From f1a9fe8383eb71ef49f9f440cca90b183f1f84bd Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Sat, 21 Mar 2026 10:44:49 +0000
Subject: [PATCH] =?UTF-8?q?agent:=20titlebar=20=E2=80=94=20restyle=20with?=
 =?UTF-8?q?=20brand=20tokens,=20add=20compact=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Titlebar.svelte | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Titlebar.svelte b/src/lib/components/Titlebar.svelte
index 420e04e..465608c 100644
--- a/src/lib/components/Titlebar.svelte
+++ b/src/lib/components/Titlebar.svelte
@@ -2,6 +2,8 @@
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import { settings } from "$lib/stores/page.svelte.js";
 
+  let { compact = false } = $props();
+
   let maximised = $state(false);
 
   async function handleMinimise() {
@@ -34,15 +36,19 @@
 </script>
 
 <div
-  class="flex items-center h-[32px] select-none bg-sidebar border-b border-border-subtle"
+  class="flex items-center select-none bg-sidebar border-b border-border-subtle
+    {compact ? 'h-[28px]' : 'h-[32px]'}"
   onmousedown={handleDragStart}
   data-tauri-drag-region
 >
-  <!-- Left spacer: aligns with sidebar width -->
-  <div
-    class="transition-all duration-200 {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
-    data-tauri-drag-region
-  ></div>
+  {#if !compact}
+    <!-- Left spacer: aligns with sidebar width -->
+    <div
+      class="transition-all {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
+      style="transition-duration: var(--duration-ui)"
+      data-tauri-drag-region
+    ></div>
+  {/if}
 
   <!-- Centre: drag area -->
   <div class="flex-1" data-tauri-drag-region></div>
@@ -50,23 +56,23 @@
   <!-- Window controls -->
   <div class="flex items-center h-full">
     <button class="titlebar-btn hover:bg-hover" onclick={handleMinimise} aria-label="Minimise">
-      <svg class="w-3 h-3" viewBox="0 0 12 12">
+      <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
         <rect y="5" width="12" height="1.5" rx="0.5" fill="currentColor" />
       </svg>
     </button>
     <button class="titlebar-btn hover:bg-hover" onclick={handleMaximise} aria-label="Maximise">
       {#if maximised}
-        <svg class="w-3 h-3" viewBox="0 0 12 12">
+        <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
           <path d="M3 1h8v8h-2v2H1V3h2V1zm1 1v1h5v5h1V2H4zm-2 2v6h6V4H2z" fill="currentColor" />
         </svg>
       {:else}
-        <svg class="w-3 h-3" viewBox="0 0 12 12">
+        <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
           <rect x="1" y="1" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" />
         </svg>
       {/if}
     </button>
     <button class="titlebar-btn hover:bg-danger/20 hover:text-danger" onclick={handleClose} aria-label="Close">
-      <svg class="w-3 h-3" viewBox="0 0 12 12">
+      <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
         <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
       </svg>
     </button>