Add profile detail and notes to self

2024-10-09 09:31:50 -07:00
parent 86c7e6f831
commit beaaa0e2ed
12 changed files with 173 additions and 176 deletions
@@ -17,8 +17,10 @@
  import Icon from "@lib/components/Icon.svelte"
  import Avatar from "@lib/components/Avatar.svelte"
  import Content from "@app/components/Content.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
  import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
  import {colors, displayReaction} from "@app/state"
+  import {pushDrawer} from "@app/modal"
  import {makeDelete, makeReaction, sendWrapped} from "@app/commands"

  export let event: TrustedEvent
@@ -32,6 +34,8 @@
  const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
  const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))

+  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
+
  const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
    $ps.find(({status}) => statuses.includes(status))

@@ -53,16 +57,19 @@
  class="group chat relative flex w-full flex-col gap-1 p-2 text-left"
  class:chat-start={event.pubkey !== $pubkey}
  class:chat-end={event.pubkey === $pubkey}>
-  <div class="chat-bubble max-w-sm">
-    <div class="flex gap-2">
+  <div class="chat-bubble max-w-sm mx-1">
+    <div class="flex gap-2 items-start">
      {#if showPubkey}
-        <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        <button type="button" on:click|stopPropagation={showProfile}>
+          <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        </button>
      {/if}
      <div class="-mt-1 flex-grow pr-1">
        {#if showPubkey}
          <div class="flex items-center gap-2">
-            <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
-              >{$profileDisplay}</strong>
+            <button type="button" class="text-bold text-sm" style="color: {colorValue}" on:click|stopPropagation={showProfile}>
+              {$profileDisplay}
+            </button>
            <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
          </div>
        {/if}
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {sleep} from '@welshman/lib'
+  import {feedFromFilter} from '@welshman/feeds'
+  import {NOTE, displayProfile, displayPubkey} from '@welshman/util'
+  import type {TrustedEvent} from '@welshman/util'
+  import {deriveProfile, displayNip05, feedLoader} from '@welshman/app'
+  import {createScroller} from "@lib/html"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import Spinner from '@lib/components/Spinner.svelte'
+  import Content from "@app/components/Content.svelte"
+
+  export let pubkey
+
+  const profile = deriveProfile(pubkey)
+  const pubkeyDisplay = displayPubkey(pubkey)
+
+  const feed = feedFromFilter({kinds: [NOTE], authors: [pubkey]})
+
+  const loader = feedLoader.getLoader(feed, {
+    onEvent: (event: TrustedEvent) => {
+      events = events.concat(event)
+    },
+  })
+
+  let element: Element
+  let events: TrustedEvent[] = []
+
+  onMount(() => {
+    const scroller = createScroller({
+      element: element,
+      onScroll: async () => {
+        const $loader = await loader
+
+        $loader(10)
+      },
+    })
+
+    return () => scroller.stop()
+  })
+</script>
+
+<div class="flex flex-col gap-4 p-4 max-w-full" bind:this={element}>
+  {#if $profile}
+    <div class="flex max-w-full gap-3">
+      <div class="py-1">
+        <Avatar src={$profile?.picture} size={10} />
+      </div>
+      <div class="flex min-w-0 flex-col">
+        <div class="flex items-center gap-2">
+          <div class="text-bold overflow-hidden text-ellipsis">
+            {displayProfile($profile, pubkeyDisplay)}
+          </div>
+        </div>
+        <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+          {$profile?.nip05 ? displayNip05($profile.nip05) : pubkeyDisplay}
+        </div>
+      </div>
+    </div>
+    <Content event={{content: $profile.about, tags: []}} hideMedia />
+    <p class="text-xl">Recent notes</p>
+    <div class="flex flex-col gap-2">
+      {#each events as event (event.id)}
+        <div class="card2 bg-alt">
+          <Content {event} />
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <p class="flex center my-12">
+      {#await sleep(3000)}
+        <Spinner loading />
+      {:then}
+        Unable to find this profile.
+      {/await}
+    </p>
+  {/if}
+</div>
@@ -24,6 +24,12 @@ export const pushModal = (
  return id
 }

+export const pushDrawer = (
+  component: ComponentType,
+  props: Record<string, any> = {},
+  options: ModalOptions = {},
+) => pushModal(component, props, {...options, drawer: true})
+
 export const clearModal = () => {
  goto("#")
  emitter.emit("close")
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9C10.3431 9 9 7.65685 9 6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6C15 7.65685 13.6569 9 12 9Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M5.5 21C3.84315 21 2.5 19.6569 2.5 18C2.5 16.3431 3.84315 15 5.5 15C7.15685 15 8.5 16.3431 8.5 18C8.5 19.6569 7.15685 21 5.5 21Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M18.5 21C16.8431 21 15.5 19.6569 15.5 18C15.5 16.3431 16.8431 15 18.5 15C20.1569 15 21.5 16.3431 21.5 18C21.5 19.6569 20.1569 21 18.5 21Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M20 13C20 10.6106 18.9525 8.46589 17.2916 7M4 13C4 10.6106 5.04752 8.46589 6.70838 7M10 20.748C10.6392 20.9125 11.3094 21 12 21C12.6906 21 13.3608 20.9125 14 20.748" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
@@ -61,6 +61,7 @@
  import Reply from "@assets/icons/Reply.svg?dataurl"
  import Settings from "@assets/icons/Settings.svg?dataurl"
  import TagHorizontal from "@assets/icons/Tag Horizontal.svg?dataurl"
+  import ShareCircle from "@assets/icons/Share Circle.svg?dataurl"
  import ShopMinimalistic from "@assets/icons/Shop Minimalistic.svg?dataurl"
  import SmileCircle from "@assets/icons/Smile Circle.svg?dataurl"
  import SquareShareLine from "@assets/icons/Square Share Line.svg?dataurl"
@@ -129,6 +130,7 @@
    plain: Plain,
    reply: Reply,
    "remote-controller-minimalistic": RemoteControllerMinimalistic,
+    "share-circle": ShareCircle,
    "shop-minimalistic": ShopMinimalistic,
    "smile-circle": SmileCircle,
    settings: Settings,
@@ -52,11 +52,16 @@
      </SecondaryNavItem>
    </div>
    <div in:fly={{delay: 100}}>
+      <SecondaryNavItem href="/home/network">
+        <Icon icon="share-circle" /> Network
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 150}}>
      <SecondaryNavItem href="/home/notes">
        <Icon icon="notes-minimalistic" /> Notes
      </SecondaryNavItem>
    </div>
-    <div in:fly={{delay: 150}}>
+    <div in:fly={{delay: 200}}>
      <SecondaryNavHeader>
        Chats
        <Button on:click={startChat}>
@@ -67,7 +72,7 @@
  </SecondaryNavSection>
  <label
    class="input input-sm input-bordered mx-6 -mt-4 flex items-center gap-2 mb-2"
-    in:fly={{delay: 200}}>
+    in:fly={{delay: 250}}>
    <Icon icon="magnifer" />
    <input bind:value={term} class="grow" type="text" />
  </label>
@@ -32,7 +32,7 @@
  import {deriveChat, splitChatId} from "@app/state"
  import {sendWrapped} from "@app/commands"

-  const {chat: id} = $page.params
+  const id = $page.params.chat === 'notes' ? $pubkey! : $page.params.chat
  const chat = deriveChat(id)
  const pubkeys = splitChatId(id)
  const others = remove($pubkey, pubkeys)
@@ -87,7 +87,9 @@
    <div
      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
      <div class="flex items-center gap-2">
-        {#if others.length === 1}
+        {#if others.length === 0}
+          Your notes
+        {:else if others.length === 1}
          <ProfileCircle pubkey={others[0]} size={5} />
          <Name pubkey={others[0]} />
        {:else}
@@ -53,7 +53,7 @@
  }

  onMount(() => {
-    load({filters: [notesFilter, reactionsFilter]})
+    load({filters: [notesFilter, reactionsFilter], timeout: 30_000})

    const scroller = createScroller({
      element: element.closest(".max-h-screen")!,
@@ -75,12 +75,12 @@
 <div class="content column gap-4" bind:this={element}>
  {#await loading}
    <div class="center my-20">
-      <Spinner loading>Loading notes...</Spinner>
+      <Spinner loading>Loading posts from people you follow...</Spinner>
    </div>
  {:then}
    <div class="flex flex-col gap-2">
      {#each events as event (event.id)}
-        <NoteCard {event} class="card2 w-full">
+        <NoteCard {event} class="card2 bg-alt w-full">
          <div class="ml-12">
            <Content {event} />
          </div>
@@ -9,7 +9,7 @@
    createProfile,
    isPublishedProfile,
  } from "@welshman/util"
-  import {pubkey, profilesByPubkey, makeThunk, publishThunk} from "@welshman/app"
+  import {pubkey, profilesByPubkey, makeThunk, publishThunk, displayNip05} from "@welshman/app"
  import {slide} from "@lib/transition"
  import Icon from "@lib/components/Icon.svelte"
  import Field from "@lib/components/Field.svelte"
@@ -23,8 +23,6 @@

  const pubkeyDisplay = displayPubkey($pubkey!)

-  const displayNip05 = (nip05: string) => (nip05?.startsWith("_@") ? last(nip05.split("@")) : nip05)
-
  const cloneProfile = () => ({...($profilesByPubkey.get($pubkey!) || makeProfile())})

  const toggleEdit = () => {