Add space status indicator #245

src/app/components/MenuSpace.svelte

@@ -35,6 +35,7 @@
   import Alerts from "@app/components/Alerts.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
+  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
     MESSAGE_FILTER,
@@ -123,7 +124,7 @@
         class="flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
         onclick={openMenu}>
         <div class="flex items-center justify-between">
-          <strong class="ellipsize flex items-center gap-3">
+          <strong class="ellipsize flex items-center gap-1">
             <RelayName {url} />
           </strong>
           <Icon icon={AltArrowDown} />
@@ -245,10 +246,13 @@
       {/if}
     </div>
   </SecondaryNavSection>
-  <div class="p-4">
-    <button class="btn btn-neutral btn-sm w-full" onclick={manageAlerts}>
+  <div class="flex flex-col gap-2 p-4">
+    <Button class="btn btn-neutral btn-sm" onclick={showDetail}>
+      <SocketStatusIndicator {url} />
+    </Button>
+    <Button class="btn btn-neutral btn-sm" onclick={manageAlerts}>
       <Icon icon={Bell} />
       Manage Alerts
-    </button>
+    </Button>
   </div>
 </div>

src/app/components/MenuSpaceButton.svelte

@@ -6,17 +6,22 @@
   import {notifications} from "@app/util/notifications"
   import {makeSpacePath} from "@app/util/routes"
   import {pushDrawer} from "@app/util/modal"
+  import {deriveSocketStatus} from "@app/core/state"
 
   const {url} = $props()
 
   const path = makeSpacePath(url) + ":mobile"
 
+  const status = deriveSocketStatus(url)
+
   const openMenu = () => pushDrawer(MenuSpace, {url})
 </script>
 
 <Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden">
   <Icon icon={MenuDots} />
-  {#if $notifications.has(path)}
+  {#if $status.theme !== "success"}
+    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-{$status.theme}"></div>
+  {:else if $notifications.has(path)}
     <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>
   {/if}
 </Button>

src/app/components/SocketStatusIndicator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import StatusIndicator from "@lib/components/StatusIndicator.svelte"
+  import {deriveSocketStatus} from "@app/core/state"
+
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
+  const status = deriveSocketStatus(url)
+</script>
+
+<StatusIndicator class="bg-{$status.theme}">{$status.title}</StatusIndicator>

src/app/components/SpaceRelayStatus.svelte

@@ -2,8 +2,8 @@
   import {deriveRelay} from "@welshman/app"
   import Server from "@assets/icons/server.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import SocketStatusIndicator from "@lib/components/SocketStatusIndicator.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
+  import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
 
   interface Props {
     url: string