Address some PR feedback

src/app/components/VoiceWidget.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import {derived, get} from "svelte/store"
+  import {readable} from "svelte/store"
   import {fly} from "svelte/transition"
   import {goto} from "$app/navigation"
+  import {page} from "$app/stores"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
@@ -11,7 +12,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
-  import {deriveDisplayedRoom, displayRoom, getRoomType, RoomType} from "@app/core/state"
+  import {decodeRelay, deriveRoom, displayRoom, getRoomType, RoomType} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {makeRoomPath} from "@app/util/routes"
   import {
@@ -24,37 +25,40 @@
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
-  const targetRoom = derived(
-    [voiceState, currentVoiceRoom, deriveDisplayedRoom],
-    ([voiceState, currentVoiceRoom, routeDisplayedRoom]) => {
-      if (voiceState === VoiceState.Joining || voiceState === VoiceState.Connected) {
-        return currentVoiceRoom
-      }
-      if (voiceState === VoiceState.Disconnected) {
-        if (routeDisplayedRoom) {
-          if (getRoomType(routeDisplayedRoom) === RoomType.Voice) {
-            return {url: routeDisplayedRoom.url, h: routeDisplayedRoom.h}
-          }
-          return undefined
-        }
-        return currentVoiceRoom
-      }
-      return currentVoiceRoom
-    },
+  const {relay, h} = $derived($page.params)
+  const url = $derived(relay ? decodeRelay(relay) : undefined)
+  const displayedRoomStore = $derived(
+    url && h && typeof h === "string" ? deriveRoom(url, h) : readable(undefined),
   )
+  const routeDisplayedRoom = $derived($displayedRoomStore)
 
-  const roomName = $derived($targetRoom ? displayRoom($targetRoom.url, $targetRoom.h) : "")
-  const spaceName = $derived($targetRoom ? displayRelayUrl($targetRoom.url) : "")
+  const targetRoom = $derived.by(() => {
+    if ($voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected) {
+      return $currentVoiceRoom
+    }
+    if ($voiceState === VoiceState.Disconnected) {
+      if (routeDisplayedRoom) {
+        if (getRoomType(routeDisplayedRoom) === RoomType.Voice) {
+          return {url: routeDisplayedRoom.url, h: routeDisplayedRoom.h}
+        }
+        return undefined
+      }
+      return $currentVoiceRoom
+    }
+    return $currentVoiceRoom
+  })
+
+  const roomName = $derived(targetRoom ? displayRoom(targetRoom.url, targetRoom.h) : "")
+  const spaceName = $derived(targetRoom ? displayRelayUrl(targetRoom.url) : "")
 
   const openJoinDialog = async () => {
-    const target = get(targetRoom)
-    if (!target) return
-    await goto(makeRoomPath(target.url, target.h))
-    pushModal(VoiceRoomJoinDialog, {url: target.url, h: target.h})
+    if (!targetRoom) return
+    await goto(makeRoomPath(targetRoom.url, targetRoom.h))
+    pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 </script>
 
-{#if $targetRoom}
+{#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
     out:fly={{y: 60, duration: 250}}

src/app/core/state.ts

@@ -1,9 +1,7 @@
 import twColors from "tailwindcss/colors"
 import {context as pomadeContext} from "@pomade/core"
 import {Capacitor} from "@capacitor/core"
-import {page} from "$app/stores"
-import type {Page} from "@sveltejs/kit"
-import {derived, readable, writable, type Readable} from "svelte/store"
+import {derived, readable, writable} from "svelte/store"
 import * as nip19 from "nostr-tools/nip19"
 import {
   on,
@@ -809,25 +807,6 @@ export const deriveOtherRooms = (url: string) =>
     },
   )
 
-export const parseDisplayedRoomParams = (params: Page["params"]): RoomRef | undefined => {
-  const relay = params.relay
-  const h = params.h
-  if (!relay || !h || typeof h !== "string") return undefined
-  return {url: decodeRelay(relay), h}
-}
-
-export const deriveDisplayedRoom = derived(
-  derived(page, $p => parseDisplayedRoomParams($p.params)),
-  ($p, set) => {
-    if (!$p) {
-      set(undefined)
-      return () => {}
-    }
-    const inner = deriveRoom($p.url, $p.h)
-    return inner.subscribe(set)
-  },
-) as Readable<(RoomMeta & {url: string; id: string}) | undefined>
-
 // Space/room memberships
 
 export const deriveSpaceMembers = (url: string) =>