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))
   }
 }
 

src/lib/components/PageBar.svelte

@@ -1,32 +1,16 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {displayRelayUrl} from "@welshman/util"
-  import {page} from "$app/stores"
-  import {decodeRelay} from "@app/core/state"
 
   interface Props {
-    icon?: Snippet
-    title?: Snippet
-    action?: Snippet
-    [key: string]: any
+    children?: Snippet
+    class?: string
   }
 
-  const {...props}: Props = $props()
+  const {children, ...props}: Props = $props()
 </script>
 
 <div data-component="PageBar" class="cw top-sai fixed z-nav p-2 {props.class}">
   <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
-    <div class="flex items-center justify-between gap-4">
-      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
-        {@render props.icon?.()}
-        {@render props.title?.()}
-      </div>
-      {@render props.action?.()}
-    </div>
-    {#if $page.params.relay}
-      <div class="text-xs text-primary md:hidden">
-        {displayRelayUrl(decodeRelay($page.params.relay))}
-      </div>
-    {/if}
+    {@render children?.()}
   </div>
 </div>

src/lib/components/SecondaryNav.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+  import cx from "classnames"
+  import type {Snippet} from "svelte"
+
   interface Props {
-    children?: import("svelte").Snippet
+    class?: string
+    children?: Snippet
   }
 
-  const {children}: Props = $props()
+  const {children, ...props}: Props = $props()
 </script>
 
 <div
-  class="ml-sai mt-sai mb-sai hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
+  class={cx(
+    "ml-sai mt-sai mb-sai max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    props.class,
+  )}>
   {@render children?.()}
 </div>

src/routes/spaces/+page.svelte

@@ -96,22 +96,18 @@
 
 <Page class="cw-full">
   <PageBar class="cw-full">
-    {#snippet icon()}
-      <div class="center">
+    <div class="flex items-center justify-between gap-4">
+      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
         <Icon icon={SettingsMinimalistic} />
+        <strong>Your Spaces</strong>
       </div>
-    {/snippet}
-    {#snippet title()}
-      <strong>Your Spaces</strong>
-    {/snippet}
-    {#snippet action()}
       {#if $userSpaceUrls.length > 0 && PLATFORM_RELAYS.length === 0}
         <Button class="btn btn-primary btn-sm" onclick={addSpace}>
           <Icon icon={AddCircle} />
           Add Space
         </Button>
       {/if}
-    {/snippet}
+    </div>
   </PageBar>
   <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
     {#each PLATFORM_RELAYS as url (url)}

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

@@ -8,6 +8,7 @@
   import SpaceAuthError from "@app/components/SpaceAuthError.svelte"
   import SpaceTrustRelay from "@app/components/SpaceTrustRelay.svelte"
   import {pushModal} from "@app/util/modal"
+  import {makeSpacePath} from "@app/util/routes"
   import {decodeRelay, relaysPendingTrust} from "@app/core/state"
   import {deriveRelayAuthError} from "@app/core/commands"
 
@@ -37,11 +38,15 @@
   })
 </script>
 
-<SecondaryNav>
-  <SpaceMenu {url} />
-</SecondaryNav>
-<Page>
-  {#key $page.url.pathname}
-    {@render children?.()}
-  {/key}
-</Page>
+{#if $page.url.pathname === makeSpacePath(url)}
+  {@render children?.()}
+{:else}
+  <SecondaryNav>
+    <SpaceMenu {url} />
+  </SecondaryNav>
+  <Page>
+    {#key $page.url.pathname}
+      {@render children?.()}
+    {/key}
+  </Page>
+{/if}

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

@@ -1,7 +1,22 @@
 <script lang="ts">
   import {page} from "$app/stores"
+  import theme from "tailwindcss/defaultTheme"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import {decodeRelay} from "@app/core/state"
   import {goToSpace} from "@app/util/routes"
+  import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
+  import SpaceMenu from "@app/components/SpaceMenu.svelte"
 
-  goToSpace(decodeRelay($page.params.relay!))
+  const url = decodeRelay($page.params.relay!)
+
+  goToSpace(url)
 </script>
+
+{#if !window.matchMedia(`(min-width: ${theme.screens.md})`).matches}
+  <div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-4">
+    <PrimaryNavSpaces />
+  </div>
+  <SecondaryNav class="!w-auto !flex flex-grow">
+    <SpaceMenu {url} />
+  </SecondaryNav>
+{/if}

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

@@ -23,9 +23,9 @@
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
@@ -33,7 +33,6 @@
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
@@ -358,23 +357,18 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <RoomImage {url} {h} />
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <RoomImage {url} {h} />
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
-    <div class="row-2 items-center">
-      <SpaceSearch {url} {h} />
-      <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
-        <Icon size={4} icon={InfoCircle} />
-      </Button>
-      <SpaceMenuButton {url} />
-    </div>
+    <SpaceSearch {url} {h} />
+    <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
+      <Icon size={4} icon={InfoCircle} />
+    </Button>
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
   <div bind:this={dynamicPadding}></div>

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

@@ -8,14 +8,13 @@
   import {EVENT_TIME, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
   import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
-  import CalendarAdd from "@assets/icons/calendar-add.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
   import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
   import {pushModal} from "@app/util/modal"
@@ -111,25 +110,18 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={CalendarMinimalistic} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <Icon icon={CalendarMinimalistic} />
     <strong>Calendar</strong>
   {/snippet}
   {#snippet action()}
-    <div class="row-2">
-      <Button class="btn btn-primary btn-sm" onclick={makeEvent}>
-        <Icon icon={CalendarAdd} />
-        Create an Event
-      </Button>
-      <SpaceMenuButton {url} />
-    </div>
+    <Button class="btn btn-primary btn-sm" onclick={makeEvent}>
+      <Icon icon={Add} />
+      Create
+    </Button>
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
   {#each items as { event, dateDisplay, isFirstFutureEvent }, i (event.id)}

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

@@ -7,18 +7,16 @@
   import {request} from "@welshman/net"
   import {repository} from "@welshman/app"
   import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
   import CalendarEventMeta from "@app/components/CalendarEventMeta.svelte"
@@ -60,22 +58,11 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div>
-      <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon={AltArrowLeft} />
-        <span class="hidden sm:inline">Go back</span>
-      </Button>
-    </div>
-  {/snippet}
+<SpaceBar {back}>
   {#snippet title()}
     <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
   {/snippet}
-  {#snippet action()}
-    <SpaceMenuButton {url} />
-  {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent class="flex flex-col gap-3 p-2 pt-4">
   {#if $event}

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

@@ -14,12 +14,11 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
   import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
@@ -296,22 +295,15 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={ChatRound} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <Icon icon={ChatRound} />
     <strong>Chat</strong>
   {/snippet}
   {#snippet action()}
-    <div class="row-2 items-center">
-      <SpaceSearch {url} />
-      <SpaceMenuButton {url} />
-    </div>
+    <SpaceSearch {url} />
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
   <div bind:this={dynamicPadding}></div>

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

@@ -7,13 +7,13 @@
   import type {TrustedEvent} from "@welshman/util"
   import {CLASSIFIED, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
-  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
   import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
   import {decodeRelay} from "@app/core/state"
@@ -62,25 +62,18 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={NotesMinimalistic} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
-    <strong>Classified Listings</strong>
+    <Icon icon={CaseMinimalistic} />
+    <strong>Classifieds</strong>
   {/snippet}
   {#snippet action()}
-    <div class="row-2">
-      <Button class="btn btn-primary btn-sm" onclick={createClassified}>
-        <Icon icon={NotesMinimalistic} />
-        Create a Listing
-      </Button>
-      <SpaceMenuButton {url} />
-    </div>
+    <Button class="btn btn-primary btn-sm" onclick={createClassified}>
+      <Icon icon={Add} />
+      Create
+    </Button>
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
   {#each items as event (event.id)}

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

@@ -7,17 +7,15 @@
   import {repository} from "@welshman/app"
   import {request} from "@welshman/net"
   import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import ClassifiedActions from "@app/components/ClassifiedActions.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReply from "@app/components/EventReply.svelte"
@@ -57,24 +55,11 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div>
-      <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon={AltArrowLeft} />
-        <span class="hidden sm:inline">Go back</span>
-      </Button>
-    </div>
-  {/snippet}
+<SpaceBar {back}>
   {#snippet title()}
     <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
   {/snippet}
-  {#snippet action()}
-    <div>
-      <SpaceMenuButton {url} />
-    </div>
-  {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent class="flex flex-col p-2 pt-4">
   {#if $event}

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

@@ -7,13 +7,13 @@
   import type {TrustedEvent} from "@welshman/util"
   import {ZAP_GOAL, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
-  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import GoalItem from "@app/components/GoalItem.svelte"
   import GoalCreate from "@app/components/GoalCreate.svelte"
   import {decodeRelay, makeCommentFilter} from "@app/core/state"
@@ -61,25 +61,18 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={NotesMinimalistic} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <Icon icon={StarFallMinimalistic} />
     <strong>Goals</strong>
   {/snippet}
   {#snippet action()}
-    <div class="row-2">
-      <Button class="btn btn-primary btn-sm" onclick={createGoal}>
-        <Icon icon={NotesMinimalistic} />
-        Create a Goal
-      </Button>
-      <SpaceMenuButton {url} />
-    </div>
+    <Button class="btn btn-primary btn-sm" onclick={createGoal}>
+      <Icon icon={Add} />
+      Create
+    </Button>
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
   {#each items as event (event.id)}

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

@@ -7,17 +7,15 @@
   import {repository} from "@welshman/app"
   import {request} from "@welshman/net"
   import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import GoalActions from "@app/components/GoalActions.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReply from "@app/components/EventReply.svelte"
@@ -58,24 +56,11 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div>
-      <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon={AltArrowLeft} />
-        <span class="hidden sm:inline">Go back</span>
-      </Button>
-    </div>
-  {/snippet}
+<SpaceBar {back}>
   {#snippet title()}
     <h1 class="text-xl">{$event?.content}</h1>
   {/snippet}
-  {#snippet action()}
-    <div>
-      <SpaceMenuButton {url} />
-    </div>
-  {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent class="flex flex-col p-2 pt-4">
   {#if $event}

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

@@ -19,9 +19,8 @@
   import History from "@assets/icons/history.svg?dataurl"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
@@ -104,21 +103,12 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={History} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <Icon icon={History} />
     <strong>Recent Activity</strong>
   {/snippet}
-  {#snippet action()}
-    <div class="row-2">
-      <SpaceMenuButton {url} />
-    </div>
-  {/snippet}
-</PageBar>
+</SpaceBar>
 
 <div bind:this={element}>
   <PageContent class="flex flex-col gap-2 p-2 pt-4">

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

@@ -8,12 +8,12 @@
   import {THREAD, getTagValue} from "@welshman/util"
   import {fly} from "@lib/transition"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import Add from "@assets/icons/add.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import {decodeRelay} from "@app/core/state"
@@ -62,25 +62,18 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div class="center">
-      <Icon icon={NotesMinimalistic} />
-    </div>
-  {/snippet}
+<SpaceBar>
   {#snippet title()}
+    <Icon icon={NotesMinimalistic} />
     <strong>Threads</strong>
   {/snippet}
   {#snippet action()}
-    <div class="row-2">
-      <Button class="btn btn-primary btn-sm" onclick={createThread}>
-        <Icon icon={NotesMinimalistic} />
-        Create a Thread
-      </Button>
-      <SpaceMenuButton {url} />
-    </div>
+    <Button class="btn btn-sm btn-primary" onclick={createThread}>
+      <Icon icon={Add} />
+      Create
+    </Button>
   {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
   {#each items as event (event.id)}

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

@@ -7,17 +7,15 @@
   import {repository} from "@welshman/app"
   import {request} from "@welshman/net"
   import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
+  import SpaceBar from "@app/components/SpaceBar.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReply from "@app/components/EventReply.svelte"
@@ -57,24 +55,11 @@
   })
 </script>
 
-<PageBar>
-  {#snippet icon()}
-    <div>
-      <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
-        <Icon icon={AltArrowLeft} />
-        <span class="hidden sm:inline">Go back</span>
-      </Button>
-    </div>
-  {/snippet}
+<SpaceBar {back}>
   {#snippet title()}
     <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
   {/snippet}
-  {#snippet action()}
-    <div>
-      <SpaceMenuButton {url} />
-    </div>
-  {/snippet}
-</PageBar>
+</SpaceBar>
 
 <PageContent class="flex flex-col p-2 pt-4">
   {#if $event}