Show a connection status toast on mobile while a space reconnects (#399)

Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>

src/app/components/SocketStatusToast.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {onDestroy} from "svelte"
+  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
+  import {deriveSocketStatus} from "@app/relays"
+  import {pushToast, popToast} from "@app/toast"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const status = deriveSocketStatus(url)
+
+  let toastId: string | undefined
+  let timeout: ReturnType<typeof setTimeout> | undefined
+
+  const hide = () => {
+    clearTimeout(timeout)
+    timeout = undefined
+
+    if (toastId) {
+      popToast(toastId)
+      toastId = undefined
+    }
+  }
+
+  $effect(() => {
+    if ($status.theme !== "warning") {
+      hide()
+      return
+    }
+
+    if (toastId || timeout) return
+
+    // deriveSocketStatus is throttled, so a socket that opens immediately still reports
+    // "Connecting" for the length of the throttle. Wait that out instead of flashing.
+    timeout = setTimeout(() => {
+      timeout = undefined
+      toastId = pushToast({
+        timeout: 60_000,
+        children: {component: SocketStatusIndicator, props: {url}},
+      })
+    }, 1000)
+  })
+
+  onDestroy(hide)
+</script>

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

@@ -9,9 +9,11 @@
   import type {Maybe} from "@welshman/lib"
   import {once} from "@welshman/lib"
   import {normalizeRelayUrl} from "@welshman/util"
+  import {isMobile} from "@lib/html"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import SpaceMenu from "@app/components/SpaceMenu.svelte"
+  import SocketStatusToast from "@app/components/SocketStatusToast.svelte"
   import SpaceAuthError from "@app/components/SpaceAuthError.svelte"
   import SpaceTrustRelay from "@app/components/SpaceTrustRelay.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
@@ -99,6 +101,11 @@
   })
 </script>
 
+<!-- Desktop shows the same status pinned to the space menu; on mobile that's behind the drawer -->
+{#if isMobile}
+  <SocketStatusToast {url} />
+{/if}
+
 {#if $page.url.pathname === makeSpacePath(url)}
   {@render children?.()}
 {:else}