From fe126ca044d1ea3c46cbe8df51ac946f86fc2432 Mon Sep 17 00:00:00 2001
From: dtonon <git@dtonon.com>
Date: Fri, 22 May 2026 22:09:20 +0100
Subject: [PATCH] Remove top header

---
 src/lib/components/LeftSidebar.svelte | 28 ++++++++++++++++++++++++++-
 src/lib/components/Navbar.svelte      |  3 ++-
 src/routes/+layout.svelte             |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 3990101..59894a8 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -4,6 +4,7 @@
   import { groupsStore } from "$lib/groups.svelte";
   import { resourcesStore } from "$lib/resources.svelte";
   import { draftState, resumeDraft } from "$lib/draft.svelte";
+  import { GROUP_ID, TITLE } from "$lib/config";
 
   type Props = {
     mode: "simple" | "full";
@@ -14,6 +15,14 @@
 
   let { mode, activeRoom, activeResource, contactsActive }: Props = $props();
 
+  // Brand at the top: logo when set, otherwise the title/name as text. Mirrors
+  // the mobile header's name logic (PUBLIC_TITLE wins; simple mode falls back to
+  // the room name, full mode to GROUP_ID).
+  const name = $derived(
+    TITLE ||
+      (mode === "simple" ? (groupStore.data?.name ?? GROUP_ID) : GROUP_ID),
+  );
+
   // The description of the room currently being viewed (full mode).
   const activeAbout = $derived(
     groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "",
@@ -21,9 +30,26 @@
 </script>
 
 <aside
-  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between py-2 pl-8 pr-1 pb-8 md:flex"
+  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex"
 >
   <div>
+    <a
+      href="/"
+      class="mb-6 mt-3 flex flex-col min-w-0 hover:opacity-90"
+      aria-label="{name} — home"
+    >
+      {#if groupStore.data?.picture}
+        <img
+          src={groupStore.data.picture}
+          alt={name}
+          class="max-w-[90%] shrink-0 object-cover"
+        />
+      {/if}
+      <span class="text-[1.3rem] font-medium text-neutral-900 mt-2 leading-6"
+        >{name}</span
+      >
+    </a>
+
     <a
       href="/"
       class="flex items-center gap-2 py-1 hover:bg-neutral-100 text-neutral-700"
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index d293d63..2e87106 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -12,8 +12,9 @@
   );
 </script>
 
+<!-- Mobile only: on desktop the logo lives at the top of the left sidebar. -->
 <header
-  class="sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-2 bg-neutral-100 px-4 md:static md:px-8"
+  class="sticky top-0 z-20 flex h-16 shrink-0 items-center justify-between gap-2 bg-neutral-100 px-4 md:hidden"
 >
   <a
     href="/"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 344c0dc..141421e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -95,7 +95,7 @@
 </svelte:head>
 
 <div
-  class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden {mobileView ===
+  class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden md:pt-4 {mobileView ===
   'chat'
     ? 'h-dvh overflow-hidden'
     : ''}"