Add mobile nav notification badges

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}