chore: redesign threads as a linear phpBB-style forum view

src/app/components/SpaceBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import type {Snippet} from "svelte"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -16,33 +17,50 @@
     leading?: Snippet
     title?: Snippet
     action?: Snippet
+    hideRelay?: boolean
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), leading, title, action, ...props}: Props = $props()
+  const {
+    back = () => goto(makeSpacePath(url)),
+    leading,
+    title,
+    action,
+    hideRelay = false,
+    ...props
+  }: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
 
 <PageBar {...props}>
-  <div class="flex">
-    <Button onclick={back} class="place-self-start pr-3 md:hidden">
+  <div class="flex gap-2" class:items-start={hideRelay} class:items-center={!hideRelay}>
+    <Button onclick={back} class={cx("shrink-0 md:hidden", hideRelay && "pt-0.5")}>
       <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <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">
+    <div
+      class="flex min-w-0 grow justify-between gap-4"
+      class:items-start={hideRelay}
+      class:items-center={!hideRelay}>
+      <div class="flex min-w-0 flex-col gap-0.5">
+        <div class="flex min-w-0 items-center gap-2">
+          {#if !hideRelay}
+            <RelayIcon {url} size={5} class="shrink-0 rounded-full md:hidden" />
+          {/if}
+          <div class="hidden shrink-0 md:flex md:items-center">
             {@render leading?.()}
           </div>
-          {@render title?.()}
-        </div>
-        <div class="text-xs text-primary md:hidden">
-          {displayRelayUrl(url)}
+          <div class="min-w-0">
+            {@render title?.()}
+          </div>
         </div>
+        {#if !hideRelay}
+          <div class="text-xs text-primary md:hidden">
+            {displayRelayUrl(url)}
+          </div>
+        {/if}
       </div>
-      <div class="flex gap-2 items-start">
+      <div class="flex shrink-0 items-center gap-2">
         {@render action?.()}
       </div>
     </div>