Add chat sidebar

src/app/commands.ts

@@ -8,6 +8,7 @@ import {
   makeThunk,
   publishThunk,
   loadProfile,
+  loadInboxRelaySelections,
   profilesByPubkey,
   relaySelectionsByPubkey,
   getWriteRelayUrls,
@@ -59,6 +60,7 @@ export const loadUserData = (
   request: Partial<SubscribeRequestWithHandlers> = {},
 ) => {
   const promise = Promise.all([
+    loadInboxRelaySelections(pubkey, request),
     loadProfile(pubkey, request),
     loadFollows(pubkey, request),
     loadMutes(pubkey, request),

src/app/components/PrimaryNav.svelte

@@ -49,8 +49,7 @@
       <PrimaryNavItem href="/home">
         <Avatar
           src={$userProfile?.picture}
-          class="!h-10 !w-10 border border-solid border-base-300"
-          size={7} />
+          class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
       {#each $userMembership?.roomsByUrl.keys() || [] as url (url)}
         <PrimaryNavItem title={displayRelayUrl(url)} href={makeSpacePath(url)}>
@@ -58,21 +57,15 @@
         </PrimaryNavItem>
       {/each}
       <PrimaryNavItem title="Add Space" on:click={addSpace}>
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={7} icon="add-circle" />
-        </div>
+        <Avatar icon="add-circle" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Discover Spaces" href="/discover">
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={6} icon="compass-big" />
-        </div>
+        <Avatar icon="compass-big" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
     </div>
     <div>
       <PrimaryNavItem title="Settings" href="/settings">
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={7} icon="settings" />
-        </div>
+        <Avatar icon="settings" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
     </div>
   </div>

src/app/components/ProfileCircle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import {deriveProfile} from '@welshman/app'
+  import Avatar from '@lib/components/Avatar.svelte'
+
+  export let pubkey
+
+  const profile = deriveProfile(pubkey)
+</script>
+
+<Avatar src={$profile?.picture} icon="user-circle" {...$$props} />

src/app/components/ProfileCircles.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import {deriveProfile} from '@welshman/app'
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+
+  export let pubkeys
+</script>
+
+<div class="flex pr-3">
+  {#each pubkeys.slice(0, 15) as pubkey (pubkey)}
+    <div class="z-feature -mr-3 inline-block">
+      <ProfileCircle class="w-8 h-8" {pubkey} {...$$props} />
+    </div>
+  {/each}
+</div>

src/app/components/SpaceAvatar.svelte

@@ -9,8 +9,7 @@
 </script>
 
 <Avatar
-  icon="ghost"
+  icon="remote-controller-minimalistic"
   class="!h-10 !w-10 border border-solid border-base-300"
   alt={displayRelayUrl(url)}
-  src={$relay?.profile?.icon}
-  size={7} />
+  src={$relay?.profile?.icon} />

src/app/state.ts

@@ -1,7 +1,7 @@
 import {nip19} from "nostr-tools"
 import {get, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"
-import {setContext, sort, uniq, partition, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
+import {setContext, remove, assoc, sortBy, sort, uniq, partition, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
 import {
   getIdFilters,
   NOTE,
@@ -17,8 +17,11 @@ import {
   getAncestorTags,
   getAncestorTagValues,
   getPubkeyTagValues,
+  isHashedEvent,
+  displayProfile,
 } from "@welshman/util"
-import type {TrustedEvent} from "@welshman/util"
+import type {TrustedEvent, SignedEvent} from "@welshman/util"
+import {Nip59} from "@welshman/signer"
 import {
   pubkey,
   repository,
@@ -32,7 +35,15 @@ import {
   getDefaultNetContext,
   makeRouter,
   trackerStore,
+  tracker,
+  relay,
+  getSession,
+  getSigner,
+  hasNegentropy,
+  pull,
+  createSearch,
 } from "@welshman/app"
+import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
 
@@ -78,6 +89,60 @@ export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 
 export const tagRoom = (room: string, url: string) => [ROOM, room, url]
 
+export const ensureUnwrapped = async (event: TrustedEvent) => {
+  if (event.kind !== WRAP) {
+    return event
+  }
+
+  let rumor = repository.eventsByWrap.get(event.id)
+
+  if (rumor) {
+    return rumor
+  }
+
+  for (const recipient of getPubkeyTagValues(event.tags)) {
+    const session = getSession(recipient)
+    const signer = getSigner(session)
+
+    if (signer) {
+      try {
+        rumor = await Nip59.fromSigner(signer).unwrap(event as SignedEvent)
+        break
+      } catch (e) {
+        // pass
+      }
+    }
+  }
+
+  if (rumor && isHashedEvent(rumor)) {
+    tracker.copy(event.id, rumor.id)
+    relay.send("EVENT", rumor)
+  }
+
+  return rumor
+}
+
+export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
+  const [smart, dumb] = partition(hasNegentropy, relays)
+  const promises = [pull({relays: smart, filters})]
+
+  // Since pulling from relays without negentropy is expensive, only do it 30% of the time,
+  // unless we have very few matching events. If that's the case, either we haven't synced
+  // this filter yet, or there are few enough events that we don't really need to worry about
+  // downloading duplicates. Otherwise, add a reasonable since value to make sure we at
+  // least fetch recent events.
+  if (Math.random() > 0.7 || repository.query(filters).length < 100) {
+    promises.push(pull({relays: dumb, filters}))
+  } else {
+    const events = sortBy(e => -e.created_at, repository.query(filters))
+    const since = events[50]!.created_at
+
+    promises.push(pull({relays: dumb, filters: filters.map(assoc("since", since))}))
+  }
+
+  return Promise.all(promises)
+}
+
 setContext({
   net: getDefaultNetContext(),
   app: getDefaultAppContext({
@@ -88,6 +153,12 @@ setContext({
   }),
 })
 
+repository.on('update', ({added}) => {
+  for (const event of added) {
+    ensureUnwrapped(event)
+  }
+})
+
 export const deriveEvent = (idOrAddress: string, hints: string[] = []) => {
   let attempted = false
 
@@ -231,13 +302,15 @@ export type Chat = {
   id: string
   pubkeys: string[]
   messages: TrustedEvent[]
+  last_activity: number
+  search_text: string
 }
 
 export const makeChatId = (pubkeys: string[]) => sort(uniq(pubkeys)).join(",")
 
 export const splitChatId = (id: string) => id.split(",")
 
-export const chats = derived(chatMessages, $messages => {
+export const chats = derived([pubkey, chatMessages, profilesByPubkey], ([$pubkey, $messages, $profilesByPubkey]) => {
   const messagesByChatId = new Map<string, TrustedEvent[]>()
 
   for (const message of $messages) {
@@ -246,11 +319,23 @@ export const chats = derived(chatMessages, $messages => {
     pushToMapKey(messagesByChatId, chatId, message)
   }
 
-  return Array.from(messagesByChatId.entries()).map(([id, messages]): Chat => {
-    const pubkeys = splitChatId(id)
+  return sortBy(
+    c => -c.last_activity,
+    Array.from(messagesByChatId.entries()).map(([id, events]): Chat => {
+      const pubkeys = splitChatId(id)
+      const messages = sortBy(e => -e.created_at, events)
+      const last_activity = messages[0].created_at
+      const search_text = remove($pubkey as string, pubkeys)
+        .map(pubkey => {
+          const profile = $profilesByPubkey.get(pubkey)
 
-    return {id, pubkeys, messages}
-  })
+          return profile ? displayProfile(profile) : ""
+        })
+        .join(' ')
+
+      return {id, pubkeys, messages, last_activity, search_text}
+    })
+  )
 })
 
 export const {
@@ -274,6 +359,13 @@ export const {
   },
 })
 
+export const chatSearch = derived(chats, $chats =>
+  createSearch($chats, {
+    getValue: (chat: Chat) => chat.id,
+    fuseOptions: {keys: ["search_text"]},
+  }),
+)
+
 // Calendar events
 
 export const events = deriveEvents(repository, {filters: [{kinds: [EVENT_DATE, EVENT_TIME]}]})

src/lib/components/Avatar.svelte

@@ -2,7 +2,7 @@
   import cx from "classnames"
   import Icon from "@lib/components/Icon.svelte"
 
-  export let src
+  export let src = ""
   export let size = 7
   export let icon = "user-rounded"
 </script>
@@ -15,6 +15,6 @@
   <div
     class={cx($$props.class, "rounded-full !flex center")}
     style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
-    <Icon {icon} size={Math.round(size * 0.7)} />
+    <Icon {icon} size={Math.round(size * 0.8)} />
   </div>
 {/if}

src/lib/components/SecondaryNav.svelte

@@ -1,3 +1,3 @@
-<div class="flex w-60 flex-shrink-0 flex-col gap-1 bg-base-300">
+<div class="flex w-60 flex-shrink-0 flex-col gap-1 bg-base-300 max-h-screen">
   <slot />
 </div>

src/routes/home/+layout.svelte

@@ -1,17 +1,41 @@
 <script lang="ts">
+  import {onMount} from 'svelte'
+  import {ellipsize, ctx, ago, remove} from '@welshman/lib'
+  import {WRAP} from '@welshman/util'
+  import {pubkey, subscribe} from '@welshman/app'
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import Name from "@app/components/Name.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
-  import {chats} from '@app/state'
+  import {chatSearch, pullConservatively} from '@app/state'
   import {pushModal} from '@app/modal'
 
   const startChat = () => pushModal(ChatStart)
+
+  let term = ""
+
+  $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
+
+  onMount(() => {
+    const filter = {kinds: [WRAP], '#p': [$pubkey!]}
+    const sub = subscribe({filters: [{...filter, since: ago(30)}]})
+
+    pullConservatively({
+      filters: [filter],
+      relays: ctx.app.router.InboxRelays().getUrls(),
+    })
+
+    return () => sub.close()
+  })
 </script>
 
 <SecondaryNav>
@@ -39,14 +63,36 @@
         </Button>
       </SecondaryNavHeader>
     </div>
-    {#each $chats as {id, pubkeys}, i (id)}
-      <div in:fly={{delay: 200 + i * 50}}>
-        <SecondaryNavItem href="/home/{id}">
-          {id}
-        </SecondaryNavItem>
+  </SecondaryNavSection>
+  <label class="input input-bordered input-sm flex items-center gap-2 mx-6 -mt-4" in:fly={{delay: 200}}>
+    <Icon icon="magnifer" />
+    <input bind:value={term} class="grow" type="text" />
+  </label>
+  <div class="overflow-auto">
+    {#each chats as {id, pubkeys, messages}, i (id)}
+      {@const message = messages[0]}
+      {@const others = remove($pubkey, pubkeys)}
+      <div class="px-6 py-2 border-t border-base-100 border-solid hover:bg-base-100 transition-colors cursor-pointer">
+        <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
+          <div class="flex gap-2 items-center">
+            {#if others.length === 1}
+              <ProfileCircle pubkey={others[0]} size={5} />
+              <Name pubkey={others[0]} />
+            {:else}
+              <ProfileCircles pubkeys={others} size={5} />
+              <p class="whitespace-nowrap overflow-hidden text-ellipsis">
+                <Name pubkey={others[0]} />
+                and {others.length - 1} {others.length > 2 ? 'others' : 'other'}
+              </p>
+            {/if}
+          </div>
+          <p class="text-sm whitespace-nowrap overflow-hidden text-ellipsis">
+            {message.content}
+          </p>
+        </Link>
       </div>
     {/each}
-  </SecondaryNavSection>
+  </div>
 </SecondaryNav>
 
 <Page>