Fix squirrely notification badges

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 {spacesNotifications} from "@app/notifications"
+  import {inactiveSpacesNotifications} 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 $spacesNotifications.includes(url)}
+      {#if $inactiveSpacesNotifications.includes(path)}
         <div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
       {/if}
     </div>

src/app/components/PrimaryNavItemSpace.svelte

@@ -3,18 +3,17 @@
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
+  import {spacesNotifications} from "@app/notifications"
 
   export let url
 
   const path = makeSpacePath(url)
-  const notification = deriveNotification(path, SPACE_FILTERS, url)
 </script>
 
 <PrimaryNavItem
   title={displayRelayUrl(url)}
   href={path}
   class="tooltip-right"
-  notification={$notification}>
+  notification={$spacesNotifications.includes(path)}>
   <SpaceAvatar {url} />
 </PrimaryNavItem>

src/app/components/ProfileFeed.svelte

@@ -13,6 +13,7 @@
   export let url
   export let pubkey
   export let events: TrustedEvent[] = []
+  export let hideLoading = false
 
   const ctrl = createFeedController({
     useWindowing: true,
@@ -59,8 +60,10 @@
         <NoteItem {url} {event} />
       </div>
     {/each}
-    <p class="center my-12 flex">
-      <Spinner loading />
-    </p>
+    {#if !hideLoading}
+      <p class="center my-12 flex">
+        <Spinner loading />
+      </p>
+    {/if}
   </div>
 </div>

src/app/notifications.ts

@@ -17,7 +17,7 @@ checked.subscribe(v => console.log("====== checked", v))
 export const deriveChecked = (key: string) => derived(checked, prop(key))
 
 export const setChecked = (key: string, ts = now()) =>
-  Boolean(console.trace("====== setChecked", key))||
+  Boolean(console.trace("====== setChecked", key)) ||
   checked.update(state => ({...state, [key]: ts}))
 
 // Filters for various routes
@@ -64,18 +64,20 @@ export const deriveNotification = (path: string, filters: Filter[], url?: string
 export const spacesNotifications = derived(
   [pubkey, checked, userMembership, deriveEvents(repository, {filters: SPACE_FILTERS})],
   ([$pubkey, $checked, $userMembership, $events]) => {
-    return getMembershipUrls($userMembership).filter(url => {
-      const path = makeSpacePath(url)
-      const lastChecked = max([$checked["*"], $checked[path]])
-      const [latestEvent] = sortBy($e => -$e.created_at, $events)
+    return getMembershipUrls($userMembership)
+      .filter(url => {
+        const path = makeSpacePath(url)
+        const lastChecked = max([$checked["*"], $checked[path]])
+        const [latestEvent] = sortBy($e => -$e.created_at, $events)
 
-      return latestEvent?.pubkey !== $pubkey && lt(lastChecked, latestEvent?.created_at)
-    })
+        return latestEvent?.pubkey !== $pubkey && lt(lastChecked, latestEvent?.created_at)
+      })
+      .map(url => makeSpacePath(url))
   },
 )
 
 export const inactiveSpacesNotifications = derived(
   [page, spacesNotifications],
   ([$page, $spacesNotifications]) =>
-    $spacesNotifications.filter(url => !$page.url.pathname.startsWith(makeSpacePath(url))),
+    $spacesNotifications.filter(path => !$page.url.pathname.startsWith(path)),
 )

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

@@ -13,12 +13,10 @@
   import {setChecked} from "@app/notifications"
   import {checkRelayConnection, checkRelayAuth, checkRelayAccess} from "@app/commands"
   import {decodeRelay} from "@app/state"
-  import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
+  import {spacesNotifications} from "@app/notifications"
 
   const url = decodeRelay($page.params.relay)
 
-  const notification = deriveNotification($page.url.pathname, SPACE_FILTERS, url)
-
   const checkConnection = async () => {
     const connectionError = await checkRelayConnection(url)
 
@@ -35,9 +33,9 @@
     }
   }
 
-  // We have to watch this one, since on mobile the badge wil be visible when active
+  // We have to watch this one, since on mobile the badge will be visible when active
   $: {
-    if ($notification) {
+    if ($spacesNotifications.includes($page.url.pathname)) {
       setChecked($page.url.pathname)
     }
   }

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

@@ -120,9 +120,7 @@
         <Icon icon="notes-minimalistic" /> Threads
       </Link>
       {#each $userRooms as room (room)}
-        <Link
-          href={makeRoomPath(url, room)}
-          class="btn btn-neutral">
+        <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
           {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
             <Icon icon="lock" size={4} />
           {:else}
@@ -132,9 +130,7 @@
         </Link>
       {/each}
       {#each $otherRooms as room (room)}
-        <Link
-          href={makeRoomPath(url, room)}
-          class="btn btn-neutral">
+        <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
           {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
             <Icon icon="lock" size={4} />
           {:else}
@@ -151,7 +147,7 @@
     {#if pubkey}
       <div class="hidden flex-col gap-2" class:!flex={relayAdminEvents.length > 0}>
         <Divider>Recent posts from the relay admin</Divider>
-        <ProfileFeed {url} {pubkey} bind:events={relayAdminEvents} />
+        <ProfileFeed hideLoading {url} {pubkey} bind:events={relayAdminEvents} />
       </div>
     {/if}
   </div>