Show navigation on space landing on mobile

src/app/components/Chat.svelte

@@ -249,36 +249,36 @@
 </script>
 
 <PageBar>
-  {#snippet title()}
-    <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
-      {#if others.length === 0}
-        <div class="row-2">
-          <ProfileCircle pubkey={$pubkey!} size={5} />
-          <ProfileName pubkey={$pubkey!} />
-        </div>
-      {:else if others.length === 1}
-        <div class="row-2">
-          <ProfileCircle pubkey={others[0]} size={5} />
-          <ProfileName pubkey={others[0]} />
-        </div>
-      {:else}
-        <div class="flex items-center gap-2">
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+  <div class="flex items-center justify-between gap-4">
+    <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
+      <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
+        {#if others.length === 0}
+          <div class="row-2">
+            <ProfileCircle pubkey={$pubkey!} size={5} />
+            <ProfileName pubkey={$pubkey!} />
+          </div>
+        {:else if others.length === 1}
+          <div class="row-2">
+            <ProfileCircle pubkey={others[0]} size={5} />
             <ProfileName pubkey={others[0]} />
-            and
-            {#if others.length === 2}
-              <ProfileName pubkey={others[1]} />
-            {:else}
-              {others.length - 1}
-              {others.length > 2 ? "others" : "other"}
-            {/if}
-          </p>
-        </div>
-      {/if}
-    </Button>
-  {/snippet}
-  {#snippet action()}
+          </div>
+        {:else}
+          <div class="flex items-center gap-2">
+            <ProfileCircles pubkeys={others} size={5} />
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <ProfileName pubkey={others[0]} />
+              and
+              {#if others.length === 2}
+                <ProfileName pubkey={others[1]} />
+              {:else}
+                {others.length - 1}
+                {others.length > 2 ? "others" : "other"}
+              {/if}
+            </p>
+          </div>
+        {/if}
+      </Button>
+    </div>
     {#if remove($pubkey, missingRelayLists).length > 0}
       {@const count = remove($pubkey, missingRelayLists).length}
       {@const label = count > 1 ? "lists are" : "list is"}
@@ -289,7 +289,7 @@
         {count}
       </div>
     {/if}
-  {/snippet}
+  </div>
 </PageBar>
 
 <PageContent class="flex flex-col-reverse gap-2 pt-4">

src/app/components/SpaceBar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {displayRelayUrl} from "@welshman/util"
+  import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import {decodeRelay} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
+
+  interface Props {
+    back?: () => unknown
+    title?: Snippet
+    action?: Snippet
+    [key: string]: any
+  }
+
+  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+
+  const url = decodeRelay($page.params.relay!)
+</script>
+
+<PageBar {...props}>
+  <div class="flex">
+    <Button onclick={back} class="place-self-start pr-2 sm:pr-6">
+      <Icon icon={ArrowLeft} size={7} />
+    </Button>
+    <div class="ellipsize whitespace-nowrap flex flex-grow justify-between gap-4">
+      <div class="flex flex-col">
+        <div class="flex gap-2 items-center">
+          {@render title?.()}
+        </div>
+        <div class="text-xs text-primary md:hidden">
+          {displayRelayUrl(url)}
+        </div>
+      </div>
+      <div class="flex gap-2 items-start">
+        {@render action?.()}
+      </div>
+    </div>
+  </div>
+</PageBar>

src/app/components/SpaceMenuButton.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import SpaceMenu from "@app/components/SpaceMenu.svelte"
-  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(SpaceMenu, {url})
-</script>
-
-<Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden btn-square">
-  <Icon icon={MenuDots} />
-  {#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/util/notifications.ts

@@ -180,7 +180,6 @@ export const allNotifications = derived(
 
     for (const url of getSpaceUrlsFromGroupList($userGroupList)) {
       const spacePath = makeSpacePath(url)
-      const spacePathMobile = spacePath + ":mobile"
       const eventsById = eventsByIdByUrl.get(url) || new Map()
       const latestEvent = first(sortEventsDesc(eventsById.values()))
 
@@ -194,7 +193,6 @@ export const allNotifications = derived(
           const latestEvent = find(e => e.tags.some(spec(["h", h])), eventsById.values())
 
           if (hasNotification(roomPath, latestEvent)) {
-            paths.add(spacePathMobile)
             paths.add(spacePath)
             paths.add(roomPath)
           }
@@ -203,7 +201,6 @@ export const allNotifications = derived(
         const messagesPath = makeSpaceChatPath(url)
 
         if (hasNotification(messagesPath, first(eventsById.values()))) {
-          paths.add(spacePathMobile)
           paths.add(spacePath)
           paths.add(messagesPath)
         }

src/app/util/routes.ts

@@ -1,4 +1,5 @@
 import type {Page} from "@sveltejs/kit"
+import theme from "tailwindcss/defaultTheme"
 import {get} from "svelte/store"
 import * as nip19 from "nostr-tools/nip19"
 import {goto} from "$app/navigation"
@@ -6,7 +7,7 @@ import {page} from "$app/stores"
 import {nthEq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {getAddress} from "@welshman/util"
-import {tracker, loadRelay} from "@welshman/app"
+import {tracker} from "@welshman/app"
 import {identity} from "@welshman/lib"
 import {
   getTagValue,
@@ -23,7 +24,6 @@ import {
   decodeRelay,
   encodeRelay,
   userSpaceUrls,
-  hasNip29,
   DM_KINDS,
   ROOM,
 } from "@app/core/state"
@@ -49,10 +49,10 @@ export const goToSpace = async (url: string) => {
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
     goto(prevPath)
-  } else if (hasNip29(await loadRelay(url))) {
+  } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
     goto(makeSpacePath(url, "recent"))
   } else {
-    goto(makeSpacePath(url, "chat"))
+    goto(makeSpacePath(url))
   }
 }