feat: one gateway port with path-mounted frontends, markdown chat, collapsible sidebars

ui/src/routes/conversations/+layout.svelte

@@ -1,26 +1,66 @@
 <script lang="ts">
+  import PanelLeftOpenIcon from "@lucide/svelte/icons/panel-left-open";
   import { page } from "$app/state";
   import ConversationList from "$lib/components/conversation-list.svelte";
+  import { Button } from "$lib/components/ui/button";
+  import { gateway } from "$lib/gateway.svelte";
+  import { ui } from "$lib/ui.svelte";
   import { cn } from "$lib/utils";
 
   let { children } = $props();
 
   const selected = $derived(page.params.id ?? null);
+  const running = $derived(gateway.running.length);
 </script>
 
 <svelte:head><title>Conversations · Beaver</title></svelte:head>
 
-<div class="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[22rem_minmax(0,1fr)]">
+<div
+  class={cn(
+    "grid min-h-0 flex-1 grid-cols-1",
+    ui.rail
+      ? "lg:grid-cols-[22rem_minmax(0,1fr)]"
+      : "lg:grid-cols-[2.75rem_minmax(0,1fr)]"
+  )}
+>
   <div
     class={cn(
       "min-h-0 border-r bg-sidebar/40",
       selected ? "hidden lg:block" : "block"
     )}
   >
-    <ConversationList {selected} />
+    {#if ui.rail}
+      <ConversationList {selected} />
+    {:else}
+      <div class="hidden h-full flex-col items-center gap-2 py-2 lg:flex">
+        <Button
+          aria-label="Show conversations"
+          onclick={() => ui.toggleRail()}
+          size="icon-sm"
+          title="Show conversations"
+          variant="ghost"
+        >
+          <PanelLeftOpenIcon class="size-4" />
+        </Button>
+        {#if running > 0}
+          <span
+            class="tabular rounded-full bg-signal/12 px-1.5 font-medium text-signal text-xs"
+            title="{running} running"
+          >
+            {running}
+          </span>
+        {/if}
+      </div>
+      <div class="h-full lg:hidden">
+        <ConversationList {selected} />
+      </div>
+    {/if}
   </div>
   <div
-    class={cn("min-h-0", selected ? "flex flex-col" : "hidden lg:flex lg:flex-col")}
+    class={cn(
+      "min-h-0",
+      selected ? "flex flex-col" : "hidden lg:flex lg:flex-col"
+    )}
   >
     {@render children()}
   </div>