Further refine notifications

src/app/components/MenuSpacesItem.svelte

@@ -5,7 +5,7 @@
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {inactiveNotifications} from "@app/notifications"
+  import {notifications} from "@app/notifications"
 
   export let url
 
@@ -17,7 +17,7 @@
     <div slot="icon"><SpaceAvatar {url} /></div>
     <div slot="title" class="flex gap-1">
       <RelayName {url} />
-      {#if $inactiveNotifications.has(path)}
+      {#if $notifications.has(path)}
         <div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
       {/if}
     </div>

src/app/components/PrimaryNav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {userProfile} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
@@ -18,7 +19,7 @@
   } from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
-  import {notifications, inactiveNotifications} from "@app/notifications"
+  import {notifications} from "@app/notifications"
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -32,7 +33,9 @@
 
   $: spaceUrls = getMembershipUrls($userMembership)
   $: spacePaths = spaceUrls.map(url => makeSpacePath(url))
-  $: anySpaceNotifications = spacePaths.some(path => $inactiveNotifications.has(path))
+  $: anySpaceNotifications = spacePaths.some(
+    path => !$page.url.pathname.startsWith(path) && $notifications.has(path),
+  )
 </script>
 
 <div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">

src/app/notifications.ts

@@ -1,7 +1,6 @@
 import {writable, derived} from "svelte/store"
-import {page} from "$app/stores"
 import {pubkey} from "@welshman/app"
-import {prop, max, sortBy, now} from "@welshman/lib"
+import {prop, sortBy, now} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {MESSAGE} from "@welshman/util"
 import {makeSpacePath, makeChatPath, makeThreadPath, makeRoomPath} from "@app/routes"
@@ -20,8 +19,7 @@ export const checked = writable<Record<string, number>>({})
 
 export const deriveChecked = (key: string) => derived(checked, prop(key))
 
-export const setChecked = (key: string) =>
+export const setChecked = (key: string) => checked.update(state => ({...state, [key]: now()}))
-  checked.update(state => ({...state, [key]: now()}))
 
 // Derived notifications state
 
@@ -35,15 +33,15 @@ export const notifications = derived(
         return false
       }
 
-      let checkPath = ""
+      for (const [entryPath, ts] of Object.entries($checked)) {
-      let lastChecked = $checked["*"]
+        const isMatch = entryPath === "*" || entryPath.startsWith(path)
 
-      for (const segment of path.slice(1).split("/")) {
+        if (isMatch && ts > latestEvent.created_at) {
-        checkPath += "/" + segment
+          return false
-        lastChecked = max([lastChecked, $checked[checkPath]])
+        }
       }
 
-      return lastChecked < latestEvent.created_at
+      return true
     }
 
     const paths = new Set<string>()
@@ -83,9 +81,3 @@ export const notifications = derived(
     return paths
   },
 )
-
-export const inactiveNotifications = derived(
-  [page, notifications],
-  ([$page, $notifications]) =>
-    new Set(Array.from($notifications).filter(path => !$page.url.pathname.startsWith(path))),
-)

src/app/requests.ts

@@ -1,6 +1,6 @@
 import type {Unsubscriber} from "svelte/store"
 import {sleep, partition, assoc, now} from "@welshman/lib"
-import {MESSAGE, DELETE, THREAD, COMMENT} from "@welshman/util"
+import {MESSAGE, REACTION, DELETE, THREAD, COMMENT} from "@welshman/util"
 import type {SubscribeRequestWithHandlers, Subscription} from "@welshman/net"
 import {SubscriptionEvent} from "@welshman/net"
 import type {AppSyncOpts} from "@welshman/app"
@@ -93,14 +93,15 @@ export const listenForNotifications = () => {
 export const listenForChannelMessages = (url: string, room: string) => {
   const since = now()
   const relays = [url]
+  const kinds = [MESSAGE, REACTION, DELETE]
   const legacyRoom = room === GENERAL ? "general" : room
 
   // Load legacy immediate so our request doesn't get rejected by nip29 relays
   load({relays, filters: [{kinds: [LEGACY_MESSAGE], "#~": [legacyRoom]}], delay: 0})
 
   // Load historical state with negentropy if available
-  pullConservatively({relays, filters: [{kinds: [MESSAGE, DELETE], "#h": [room]}]})
+  pullConservatively({relays, filters: [{kinds, "#h": [room]}]})
 
   // Listen for new messages
-  return subscribePersistent({relays, filters: [{kinds: [MESSAGE, DELETE], "#h": [room], since}]})
+  return subscribePersistent({relays, filters: [{kinds, "#h": [room], since}]})
 }

src/routes/spaces/[relay]/+page.svelte

@@ -2,6 +2,7 @@
   import {page} from "$app/stores"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
+  import {fade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -25,12 +26,14 @@
     getMembershipUrls,
   } from "@app/state"
   import {makeChatPath, makeRoomPath, makeSpacePath} from "@app/routes"
+  import {notifications} from "@app/notifications"
   import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
   const relay = deriveRelay(url)
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
+  const threadsPath = makeSpacePath(url, "threads")
 
   const joinSpace = () => pushModal(SpaceJoin, {url})
 
@@ -116,17 +119,33 @@
       {/if}
     </div>
     <div class="grid grid-cols-3 gap-2">
-      <Link href={makeSpacePath(url, "threads")} class="btn btn-primary">
+      <Link href={threadsPath} class="btn btn-primary">
-        <Icon icon="notes-minimalistic" /> Threads
+        <Icon icon="notes-minimalistic" />
+        <div class="relative">
+          Threads
+          {#if $notifications.has(threadsPath)}
+            <div
+              class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
+              transition:fade />
+          {/if}
+        </div>
       </Link>
       {#each $userRooms as room (room)}
-        <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
+        {@const roomPath = makeRoomPath(url, room)}
+        <Link href={roomPath} class="btn btn-neutral">
           {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
             <Icon icon="lock" size={4} />
           {:else}
             <Icon icon="hashtag" />
           {/if}
-          <ChannelName {url} {room} />
+          <div class="relative">
+            <ChannelName {url} {room} />
+            {#if $notifications.has(roomPath)}
+              <div
+                class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary"
+                transition:fade />
+            {/if}
+          </div>
         </Link>
       {/each}
       {#each $otherRooms as room (room)}