src/app/components/SpaceBar.svelte

@@ -7,17 +7,19 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import {decodeRelay} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   interface Props {
     back?: () => unknown
+    leading?: Snippet
     title?: Snippet
     action?: Snippet
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+  const {back = () => goto(makeSpacePath(url)), leading, title, action, ...props}: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
@@ -30,6 +32,10 @@
     <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
       <div class="flex flex-col">
         <div class="flex gap-2 items-center">
+          <RelayIcon {url} size={5} class="rounded-full md:hidden" />
+          <div class="hidden md:contents">
+            {@render leading?.()}
+          </div>
           {@render title?.()}
         </div>
         <div class="text-xs text-primary md:hidden">

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

@@ -430,8 +430,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <RoomImage {url} {h} />
+  {/snippet}
+  {#snippet title()}
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}

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

@@ -111,8 +111,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={CalendarMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Calendar</strong>
   {/snippet}
   {#snippet action()}

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

@@ -307,8 +307,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={ChatRound} />
+  {/snippet}
+  {#snippet title()}
     <strong>Chat</strong>
   {/snippet}
   {#snippet action()}

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

@@ -63,8 +63,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={CaseMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Classifieds</strong>
   {/snippet}
   {#snippet action()}

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

@@ -62,8 +62,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={StarFallMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Goals</strong>
   {/snippet}
   {#snippet action()}

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

@@ -62,8 +62,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={PollIcon} />
+  {/snippet}
+  {#snippet title()}
     <strong>Polls</strong>
   {/snippet}
   {#snippet action()}

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

@@ -211,8 +211,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={History} />
+  {/snippet}
+  {#snippet title()}
     <strong>Recent Activity</strong>
   {/snippet}
   {#snippet action()}

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

@@ -63,8 +63,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet leading()}
     <Icon icon={NotesMinimalistic} />
+  {/snippet}
+  {#snippet title()}
     <strong>Threads</strong>
   {/snippet}
   {#snippet action()}