Show socket status on space dashboard

src/app/state.ts

@@ -2,6 +2,8 @@ import twColors from "tailwindcss/colors"
 import {get, derived} from "svelte/store"
 import * as nip19 from "nostr-tools/nip19"
 import {
+  on,
+  call,
   remove,
   uniqBy,
   sortBy,
@@ -19,8 +21,9 @@ import {
   groupBy,
   always,
 } from "@welshman/lib"
-import {load} from "@welshman/net"
-import {collection} from "@welshman/store"
+import type {Socket} from "@welshman/net"
+import {Pool, load, AuthStateEvent, SocketEvent} from "@welshman/net"
+import {collection, custom} from "@welshman/store"
 import {
   getIdFilters,
   WRAP,
@@ -682,3 +685,19 @@ export const displayReaction = (content: string) => {
   if (content === "-") return "👎"
   return content
 }
+
+export const deriveSocket = (url: string) =>
+  custom<Socket>(set => {
+    const pool = Pool.get()
+    const socket = pool.get(url)
+
+    set(socket)
+
+    const subs = [
+      on(socket, SocketEvent.Error, () => set(socket)),
+      on(socket, SocketEvent.Status, () => set(socket)),
+      on(socket.auth, AuthStateEvent.Status, () => set(socket)),
+    ]
+
+    return () => subs.forEach(call)
+  })

src/lib/components/StatusIndicator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  type Props = {
+    children: Snippet
+    class: string
+  }
+
+  const {children, ...props}: Props = $props()
+</script>
+
+<div class="flex items-center gap-2">
+  <div class="h-2 w-2 rounded-full {props.class}"></div>
+  <span class="text-sm">{@render children()}</span>
+</div>

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

@@ -3,12 +3,14 @@
   import type {TrustedEvent} from "@welshman/util"
   import {displayRelayUrl} from "@welshman/util"
   import {deriveRelay} from "@welshman/app"
+  import {AuthStatus, SocketStatus} from "@welshman/net"
   import {fade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
+  import StatusIndicator from "@lib/components/StatusIndicator.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ProfileFeed from "@app/components/ProfileFeed.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
@@ -24,6 +26,7 @@
     deriveUserRooms,
     deriveOtherRooms,
     userRoomsByUrl,
+    deriveSocket,
   } from "@app/state"
   import {makeChatPath, makeThreadPath, makeCalendarPath, makeRoomPath} from "@app/routes"
   import {notifications} from "@app/notifications"
@@ -31,6 +34,7 @@
 
   const url = decodeRelay($page.params.relay)
   const relay = deriveRelay(url)
+  const socket = deriveSocket(url)
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
   const threadsPath = makeThreadPath(url)
@@ -236,10 +240,31 @@
           Relay Status
         </h3>
         <div class="flex flex-col gap-3">
-          <div class="flex items-center gap-2">
-            <div class="h-2 w-2 rounded-full bg-green-500"></div>
-            <span class="text-sm">Connected</span>
-          </div>
+          {#if $socket.status === SocketStatus.Open}
+            {#if $socket.auth.status === AuthStatus.None}
+              <StatusIndicator class="bg-green-500">Connected</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.Requested}
+              <StatusIndicator class="bg-yellow-500">Authenticating</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.PendingSignature}
+              <StatusIndicator class="bg-yellow-500">Authenticating</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.DeniedSignature}
+              <StatusIndicator class="bg-red-500">Failed to Authenticate</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.PendingResponse}
+              <StatusIndicator class="bg-yellow-500">Authenticating</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.Forbidden}
+              <StatusIndicator class="bg-red-500">Access Denied</StatusIndicator>
+            {:else if $socket.auth.status === AuthStatus.Ok}
+              <StatusIndicator class="bg-green-500">Connected</StatusIndicator>
+            {/if}
+          {:else if $socket.status === SocketStatus.Opening}
+            <StatusIndicator class="bg-yellow-500">Connecting</StatusIndicator>
+          {:else if $socket.status === SocketStatus.Closing}
+            <StatusIndicator class="bg-gray-500">Not Connected</StatusIndicator>
+          {:else if $socket.status === SocketStatus.Closed}
+            <StatusIndicator class="bg-gray-500">Not Connected</StatusIndicator>
+          {:else if $socket.status === SocketStatus.Error}
+            <StatusIndicator class="bg-red-500">Failed to Connect</StatusIndicator>
+          {/if}
           {#if $relay?.profile}
             {@const {software, version, supported_nips, limitation} = $relay.profile}
             <div class="flex flex-wrap gap-1">