Add mobile nav notification badges

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import "@src/app.css"
   import {onMount} from "svelte"
   import {get, derived} from "svelte/store"
+  import {page} from "$app/stores"
   import {dev} from "$app/environment"
   import {identity, uniq, sleep, take, sortBy, ago, now, HOUR, WEEK, Worker} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
@@ -229,7 +230,9 @@
 {:then}
   <div data-theme={$theme}>
     <AppContainer>
-      <slot />
+      {#key $page.url.pathname}
+        <slot />
+      {/key}
     </AppContainer>
     <ModalContainer />
     <div class="tippy-target" />

src/routes/chat/+layout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {page} from "$app/stores"
   import {ctx} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
@@ -56,22 +55,17 @@
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" />
   </label>
-  {#key $page.params.chat}
-    <div class="overflow-auto">
-      {#each chats as { id, pubkeys, messages } (id)}
-        <ChatItem {id} {pubkeys} {messages} />
-      {/each}
-      {#await promise}
-        <div class="border-t border-solid border-base-100 px-6 py-4 text-xs">
-          <Spinner loading>Loading conversations...</Spinner>
-        </div>
-      {/await}
-    </div>
-  {/key}
+  <div class="overflow-auto">
+    {#each chats as { id, pubkeys, messages } (id)}
+      <ChatItem {id} {pubkeys} {messages} />
+    {/each}
+    {#await promise}
+      <div class="border-t border-solid border-base-100 px-6 py-4 text-xs">
+        <Spinner loading>Loading conversations...</Spinner>
+      </div>
+    {/await}
+  </div>
 </SecondaryNav>
-
 <Page>
-  {#key JSON.stringify($page.params)}
-    <slot />
-  {/key}
+  <slot />
 </Page>

src/routes/chat/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import {page} from "$app/stores"
+  import {onDestroy} from "svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
@@ -6,12 +8,17 @@
   import ChatStart from "@app/components/ChatStart.svelte"
   import {chatSearch} from "@app/state"
   import {pushModal} from "@app/modal"
+  import {setChecked} from "@app/notifications"
 
   let term = ""
 
   const startChat = () => pushModal(ChatStart)
 
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
+
+  onDestroy(() => {
+    setChecked($page.url.pathname)
+  })
 </script>
 
 <div class="hidden min-h-screen md:hero">

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

@@ -1,16 +1,18 @@
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
+  import {onMount} from "svelte"
   import {page} from "$app/stores"
   import Page from "@lib/components/Page.svelte"
-  import Delay from "@lib/components/Delay.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
   import {pushToast} from "@app/toast"
   import {setChecked} from "@app/notifications"
   import {checkRelayConnection, checkRelayAuth} from "@app/commands"
   import {decodeRelay} from "@app/state"
+  import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
 
-  $: url = decodeRelay($page.params.relay)
+  const url = decodeRelay($page.params.relay)
+
+  const notification = deriveNotification($page.url.pathname, SPACE_FILTERS, url)
 
   const ifLet = <T,>(x: T | undefined, f: (x: T) => void) => (x === undefined ? undefined : f(x))
 
@@ -24,24 +26,21 @@
     })
   }
 
+  // We have to watch this one, since on mobile the badge wil be visible when active
+  $: {
+    if ($notification) {
+      setChecked($page.url.pathname)
+    }
+  }
+
   onMount(() => {
     checkConnection()
   })
-
-  onDestroy(() => {
-    setChecked($page.url.pathname)
-  })
 </script>
 
-{#key url}
-  <Delay>
-    <SecondaryNav>
-      <MenuSpace {url} />
-    </SecondaryNav>
-    <Page>
-      {#key $page.params.room}
-        <slot />
-      {/key}
-    </Page>
-  </Delay>
-{/key}
+<SecondaryNav>
+  <MenuSpace {url} />
+</SecondaryNav>
+<Page>
+  <slot />
+</Page>