Show notification badge on voice room item

src/app/components/SpaceMenuRoomItem.svelte

@@ -23,15 +23,13 @@
   const shouldNotifyForSpace = deriveShouldNotify(url)
   const shouldNotifyForRoom = deriveShouldNotify(url, h)
   const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
+  const notification = $derived($shouldNotifyForRoom ? $notifications.has(path) : false)
 </script>
 
 {#if roomType === RoomType.Voice}
-  <VoiceRoomItem {url} {h} {replaceState} />
+  <VoiceRoomItem {url} {h} {replaceState} {notification} />
 {:else}
-  <SecondaryNavItem
+  <SecondaryNavItem href={path} {replaceState} {notification}>
-    href={path}
-    {replaceState}
-    notification={$shouldNotifyForRoom ? $notifications.has(path) : false}>
     <RoomNameWithImage {url} {h} />
     {#if showDifferenceIcon}
       <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />

src/app/components/VoiceRoomItem.svelte

@@ -25,9 +25,10 @@
     url: string
     h: string
     replaceState?: boolean
+    notification?: boolean
   }
 
-  const {url, h, replaceState = false}: Props = $props()
+  const {url, h, replaceState = false, notification = false}: Props = $props()
 
   const participants = deriveVoiceParticipants(url, h)
   const isActive = $derived(
@@ -61,6 +62,7 @@
 <SecondaryNavItem
   href={makeRoomPath(url, h)}
   {replaceState}
+  {notification}
   onclick={handleClick}
   class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
   <div class="flex w-full min-w-0 flex-col gap-2">