Add mobile nav notification badges

src/app/components/MenuSpace.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {displayRelayUrl} from "@welshman/util"
-  import {fly, slide} from "@lib/transition"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Popover from "@lib/components/Popover.svelte"
@@ -55,17 +55,6 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
-  const getDelay = (reset = false) => {
-    if (reset) {
-      delay = 0
-    } else {
-      delay += 50
-    }
-
-    return delay
-  }
-
-  let delay = 0
   let showMenu = false
   let replaceState = false
   let element: Element
@@ -120,53 +109,37 @@
         </Popover>
       {/if}
     </div>
-    <div in:fly={{delay: getDelay(true)}}>
-      <SecondaryNavItem href={makeSpacePath(url)}>
-        <Icon icon="home-smile" /> Home
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: getDelay()}}>
-      <SecondaryNavItem href={threadsPath} notification={$threadsNotification}>
-        <Icon icon="notes-minimalistic" /> Threads
-      </SecondaryNavItem>
-    </div>
-    <div transition:slide={{delay: getDelay()}}>
-      <div class="h-2" />
-      <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-    </div>
-    <div transition:slide={{delay: getDelay()}}>
-      <MenuSpaceRoomItem {url} room={GENERAL} />
-    </div>
+    <SecondaryNavItem href={makeSpacePath(url)}>
+      <Icon icon="home-smile" /> Home
+    </SecondaryNavItem>
+    <SecondaryNavItem href={threadsPath} notification={$threadsNotification}>
+      <Icon icon="notes-minimalistic" /> Threads
+    </SecondaryNavItem>
+    <div class="h-2" />
+    <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+    <MenuSpaceRoomItem {url} room={GENERAL} />
     {#each rooms as room, i (room)}
-      <div transition:slide={{delay: getDelay()}}>
-        <MenuSpaceRoomItem {url} {room} />
-      </div>
+      <MenuSpaceRoomItem {url} {room} />
     {/each}
     {#if otherRooms.length > 0}
-      <div transition:slide={{delay: getDelay()}}>
-        <div class="h-2" />
-        <SecondaryNavHeader>
-          {#if rooms.length > 0}
-            Other Rooms
-          {:else}
-            Rooms
-          {/if}
-        </SecondaryNavHeader>
-      </div>
+      <div class="h-2" />
+      <SecondaryNavHeader>
+        {#if rooms.length > 0}
+          Other Rooms
+        {:else}
+          Rooms
+        {/if}
+      </SecondaryNavHeader>
     {/if}
     {#each otherRooms as room, i (room)}
-      <div transition:slide={{delay: getDelay()}}>
-        <SecondaryNavItem href={makeSpacePath(url, room)}>
-          <Icon icon="hashtag" />
-          {room}
-        </SecondaryNavItem>
-      </div>
-    {/each}
-    <div in:fly={{delay: getDelay()}}>
-      <SecondaryNavItem on:click={addRoom}>
-        <Icon icon="add-circle" />
-        Create room
+      <SecondaryNavItem href={makeSpacePath(url, room)}>
+        <Icon icon="hashtag" />
+        {room}
       </SecondaryNavItem>
-    </div>
+    {/each}
+    <SecondaryNavItem on:click={addRoom}>
+      <Icon icon="add-circle" />
+      Create room
+    </SecondaryNavItem>
   </SecondaryNavSection>
 </div>

src/app/components/MenuSpaces.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
-  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
-  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {userMembership, getMembershipUrls, PLATFORM_RELAY} from "@app/state"
-  import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const addSpace = () => pushModal(SpaceAdd)
@@ -17,23 +13,11 @@
 
 <div class="column menu gap-2">
   {#if PLATFORM_RELAY}
-    <Link replaceState href={makeSpacePath(PLATFORM_RELAY)}>
-      <CardButton>
-        <div slot="icon"><SpaceAvatar url={PLATFORM_RELAY} /></div>
-        <div slot="title"><RelayName url={PLATFORM_RELAY} /></div>
-        <div slot="info"><RelayDescription url={PLATFORM_RELAY} /></div>
-      </CardButton>
-    </Link>
+    <MenuSpacesItem url={PLATFORM_RELAY} />
     <Divider />
   {:else if getMembershipUrls($userMembership).length > 0}
     {#each getMembershipUrls($userMembership) as url (url)}
-      <Link replaceState href={makeSpacePath(url)}>
-        <CardButton>
-          <div slot="icon"><SpaceAvatar {url} /></div>
-          <div slot="title"><RelayName {url} /></div>
-          <div slot="info"><RelayDescription {url} /></div>
-        </CardButton>
-      </Link>
+      <MenuSpacesItem {url} />
     {/each}
     <Divider />
   {/if}

src/app/components/MenuSpacesItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Link from "@lib/components/Link.svelte"
+  import CardButton from "@lib/components/CardButton.svelte"
+  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import {makeSpacePath} from "@app/routes"
+  import {deriveNotification, SPACE_FILTERS} from "@app/notifications"
+
+  export let url
+
+  const path = makeSpacePath(url)
+  const notification = deriveNotification(path, SPACE_FILTERS, url)
+</script>
+
+<Link replaceState href={path}>
+  <CardButton>
+    <div slot="icon"><SpaceAvatar {url} /></div>
+    <div slot="title" class="flex gap-1">
+      <RelayName {url} />
+      {#if $notification}
+        <div class="relative top-1 h-2 w-2 rounded-full bg-primary" />
+      {/if}
+    </div>
+    <div slot="info"><RelayDescription {url} /></div>
+  </CardButton>
+</Link>

src/app/components/PrimaryNav.svelte

@@ -9,7 +9,7 @@
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
   import {userMembership, getMembershipUrls, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
   import {pushModal} from "@app/modal"
-  import {deriveNotification, CHAT_FILTERS} from "@app/notifications"
+  import {deriveNotification, spacesNotification, CHAT_FILTERS} from "@app/notifications"
 
   const chatNotification = deriveNotification("/chat", CHAT_FILTERS)
 
@@ -76,10 +76,10 @@
       <PrimaryNavItem title="Notes" href="/notes">
         <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Messages" href="/chat">
+      <PrimaryNavItem title="Messages" href="/chat" notification={$chatNotification}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu}>
+      <PrimaryNavItem title="Spaces" on:click={showSpacesMenu} notification={$spacesNotification}>
         <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>