From 3f6d718bb21e07442de01ac89ff9511b43cfd32d Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Tue, 17 Mar 2026 02:26:08 +0000
Subject: [PATCH] =?UTF-8?q?feat(kon):=20collapsible=20sidebar=20=E2=80=94?=
 =?UTF-8?q?=20toggle=20with=20[=20key,=20auto-collapse=20below=20900px,=20?=
 =?UTF-8?q?icons-only=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add sidebarCollapsed to settings defaults (persists via localStorage on saveSettings)
- Sidebar collapses to 48px icons-only view with smooth 200ms transition
- Toggle button (chevron) at top of nav; [ keyboard shortcut in layout (input-safe)
- Auto-collapse on window resize below 900px (checked on mount and on resize event)
- Titlebar left spacer tracks sidebar width reactively (48px / 210px)
- All labels, profile selector, status text hidden in collapsed mode; nav items show tooltips via title attribute

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/Sidebar.svelte             | 142 +++++++++++++++++++++--------
 src/lib/components/Titlebar.svelte |   6 +-
 src/lib/stores/page.svelte.js      |   1 +
 src/routes/+layout.svelte          |  34 ++++++-
 4 files changed, 141 insertions(+), 42 deletions(-)

diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index f104111..794e56d 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { page, settings, profiles, tasks } from "$lib/stores/page.svelte.js";
+  import { page, settings, profiles, tasks, saveSettings } from "$lib/stores/page.svelte.js";
 
   let taskCount = $derived(tasks.filter((t) => !t.done).length);
 
@@ -18,8 +18,19 @@
     clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7Z",
     user: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v2h16v-2c0-1.33-2.67-4-8-4Z",
     settings: "M19.14 12.94a7.07 7.07 0 0 0 .06-.94 7.07 7.07 0 0 0-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.04 7.04 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.49.37 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.57 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58ZM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2Z",
+    // Hamburger / collapse toggle
+    menu: "M3 6h18M3 12h18M3 18h18",
+    // Chevron right (expand)
+    expand: "M9 18l6-6-6-6",
   };
 
+  let collapsed = $derived(settings.sidebarCollapsed);
+
+  function toggleCollapsed() {
+    settings.sidebarCollapsed = !settings.sidebarCollapsed;
+    saveSettings();
+  }
+
   function navigate(id) {
     page.current = id;
     if (id !== "dictation") {
@@ -28,31 +39,69 @@
   }
 </script>
 
-<aside class="flex flex-col w-[210px] min-w-[210px] bg-sidebar border-r border-border-subtle h-full">
-  <!-- Logo -->
-  <div class="px-5 pt-4 pb-1">
-    <div class="flex items-center gap-2">
-      <h1 class="font-display text-[26px] text-text tracking-tight leading-none italic">Kon</h1>
+<aside
+  class="flex flex-col bg-sidebar border-r border-border-subtle h-full transition-all duration-200 overflow-hidden
+    {collapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
+>
+  <!-- Logo + toggle -->
+  <div class="flex items-center {collapsed ? 'justify-center px-0 pt-4 pb-1' : 'px-5 pt-4 pb-1'} relative">
+    {#if !collapsed}
+      <div class="flex items-center gap-2 flex-1 min-w-0">
+        <h1 class="font-display text-[26px] text-text tracking-tight leading-none italic">Kon</h1>
+        <span
+          class="text-[18px] text-accent inline-block {page.recording ? 'animate-sinhala-spin' : ''}"
+          title="Kon"
+        >&#3559;</span>
+      </div>
+    {:else}
+      <!-- Collapsed: just the decorative character centred -->
       <span
         class="text-[18px] text-accent inline-block {page.recording ? 'animate-sinhala-spin' : ''}"
         title="Kon"
       >&#3559;</span>
-    </div>
-    <p class="text-[10px] text-text-tertiary mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
+    {/if}
   </div>
 
+  {#if !collapsed}
+    <p class="text-[10px] text-text-tertiary px-5 mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
+  {/if}
+
   <!-- Separator -->
-  <div class="mx-5 my-5 h-px bg-border-subtle"></div>
+  <div class="{collapsed ? 'mx-2' : 'mx-5'} my-4 h-px bg-border-subtle"></div>
+
+  <!-- Toggle button -->
+  <div class="px-2 mb-1 flex {collapsed ? 'justify-center' : 'justify-end'}">
+    <button
+      class="flex items-center justify-center w-7 h-7 rounded-md text-text-tertiary hover:bg-hover hover:text-text transition-colors"
+      onclick={toggleCollapsed}
+      title={collapsed ? 'Expand sidebar ([)' : 'Collapse sidebar ([)'}
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+    >
+      {#if collapsed}
+        <!-- Chevron right -->
+        <svg class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d={icons.expand} />
+        </svg>
+      {:else}
+        <!-- Chevron left -->
+        <svg class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 18l-6-6 6-6" />
+        </svg>
+      {/if}
+    </button>
+  </div>
 
   <!-- Navigation -->
-  <nav class="flex flex-col gap-0.5 px-3">
+  <nav class="flex flex-col gap-0.5 {collapsed ? 'px-1' : 'px-3'}">
     {#each navItems as item}
       <button
-        class="group flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] text-left w-full
+        class="group flex items-center rounded-lg text-[13px] text-left w-full
+          {collapsed ? 'justify-center px-0 py-2.5' : 'gap-2.5 px-3 py-2'}
           {page.current === item.id
             ? 'bg-nav-active text-text font-medium'
             : 'text-text-secondary hover:bg-hover hover:text-text'}"
         onclick={() => navigate(item.id)}
+        title={collapsed ? item.label : undefined}
       >
         <svg
           class="w-[16px] h-[16px] flex-shrink-0
@@ -61,11 +110,16 @@
         >
           <path d={icons[item.icon]} />
         </svg>
-        {item.label}
-        {#if item.id === "tasks" && taskCount > 0}
-          <span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
-            {taskCount}
-          </span>
+        {#if !collapsed}
+          {item.label}
+          {#if item.id === "tasks" && taskCount > 0}
+            <span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
+              {taskCount}
+            </span>
+          {/if}
+        {:else if item.id === "tasks" && taskCount > 0}
+          <!-- Badge dot in collapsed mode -->
+          <span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-accent"></span>
         {/if}
       </button>
     {/each}
@@ -74,34 +128,46 @@
   <!-- Spacer -->
   <div class="flex-1"></div>
 
-  <!-- Profile selector -->
-  <div class="px-4 pb-3">
-    <p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5 px-1">Profile</p>
-    <select
-      class="w-full bg-bg-input border border-border rounded-lg px-3 py-1.5 text-[12px] text-text-secondary
-             focus:outline-none focus:border-accent appearance-none cursor-pointer"
-      bind:value={page.activeProfile}
-    >
-      <option>None</option>
-      {#each profiles as profile}
-        <option>{profile.name}</option>
-      {/each}
-    </select>
-  </div>
+  {#if !collapsed}
+    <!-- Profile selector -->
+    <div class="px-4 pb-3">
+      <p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5 px-1">Profile</p>
+      <select
+        class="w-full bg-bg-input border border-border rounded-lg px-3 py-1.5 text-[12px] text-text-secondary
+               focus:outline-none focus:border-accent appearance-none cursor-pointer"
+        bind:value={page.activeProfile}
+      >
+        <option>None</option>
+        {#each profiles as profile}
+          <option>{profile.name}</option>
+        {/each}
+      </select>
+    </div>
 
-  <!-- Separator -->
-  <div class="mx-5 mb-3 h-px bg-border-subtle"></div>
+    <!-- Separator -->
+    <div class="mx-5 mb-3 h-px bg-border-subtle"></div>
 
-  <!-- Status -->
-  <div class="px-5 pb-5">
-    <div class="flex items-center gap-2">
+    <!-- Status -->
+    <div class="px-5 pb-5">
+      <div class="flex items-center gap-2">
+        <span
+          class="w-[7px] h-[7px] rounded-full flex-shrink-0"
+          class:animate-pulse-soft={page.recording}
+          style="background: {page.statusColor}"
+        ></span>
+        <span class="text-[11px] text-text-secondary">{page.status}</span>
+      </div>
+      <p class="text-[10px] text-text-tertiary mt-1.5">{settings.formatMode} · v1.0</p>
+    </div>
+  {:else}
+    <!-- Collapsed: status dot only -->
+    <div class="pb-5 flex justify-center">
       <span
         class="w-[7px] h-[7px] rounded-full"
         class:animate-pulse-soft={page.recording}
         style="background: {page.statusColor}"
+        title={page.status}
       ></span>
-      <span class="text-[11px] text-text-secondary">{page.status}</span>
     </div>
-    <p class="text-[10px] text-text-tertiary mt-1.5">{settings.formatMode} · v1.0</p>
-  </div>
+  {/if}
 </aside>
diff --git a/src/lib/components/Titlebar.svelte b/src/lib/components/Titlebar.svelte
index 649e651..420e04e 100644
--- a/src/lib/components/Titlebar.svelte
+++ b/src/lib/components/Titlebar.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getCurrentWindow } from "@tauri-apps/api/window";
+  import { settings } from "$lib/stores/page.svelte.js";
 
   let maximised = $state(false);
 
@@ -38,7 +39,10 @@
   data-tauri-drag-region
 >
   <!-- Left spacer: aligns with sidebar width -->
-  <div class="w-[210px] min-w-[210px]" data-tauri-drag-region></div>
+  <div
+    class="transition-all duration-200 {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
+    data-tauri-drag-region
+  ></div>
 
   <!-- Centre: drag area -->
   <div class="flex-1" data-tauri-drag-region></div>
diff --git a/src/lib/stores/page.svelte.js b/src/lib/stores/page.svelte.js
index 5672329..7969c90 100644
--- a/src/lib/stores/page.svelte.js
+++ b/src/lib/stores/page.svelte.js
@@ -32,6 +32,7 @@ const defaults = {
   saveAudio: false,
   outputFolder: "",
   globalHotkey: "Ctrl+Shift+R",
+  sidebarCollapsed: false,
 };
 
 function loadSettings() {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e62b9f1..a72ef41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
   import Sidebar from "$lib/Sidebar.svelte";
   import TaskSidebar from "$lib/components/TaskSidebar.svelte";
   import Titlebar from "$lib/components/Titlebar.svelte";
-  import { page, settings } from "$lib/stores/page.svelte.js";
+  import { page, settings, saveSettings } from "$lib/stores/page.svelte.js";
 
   import { page as sveltePage } from "$app/stores";
 
@@ -76,8 +76,35 @@
     document.documentElement.style.setProperty("--font-size-transcript", `${settings.fontSize}px`);
   });
 
-  // First-run detection: check if any models are downloaded
+  // Check whether the keydown originates from a text input (avoid triggering while typing)
+  function isInputFocused(e) {
+    const tag = e.target?.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable;
+  }
+
+  function handleKeydown(e) {
+    if (e.key === "Escape" && page.taskSidebarOpen) {
+      page.taskSidebarOpen = false;
+      return;
+    }
+    if (e.key === "[" && !isInputFocused(e)) {
+      settings.sidebarCollapsed = !settings.sidebarCollapsed;
+      saveSettings();
+    }
+  }
+
+  function handleResize() {
+    if (window.innerWidth < 900 && !settings.sidebarCollapsed) {
+      settings.sidebarCollapsed = true;
+      saveSettings();
+    }
+  }
+
   onMount(async () => {
+    // Auto-collapse if window is already narrow on first load
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
     try {
       const whisper = await invoke("list_models");
       const parakeet = await invoke("list_parakeet_models");
@@ -90,6 +117,7 @@
   });
 
   onDestroy(() => {
+    window.removeEventListener("resize", handleResize);
     if (registeredHotkey) {
       import("@tauri-apps/plugin-global-shortcut")
         .then((mod) => mod.unregister(registeredHotkey))
@@ -98,7 +126,7 @@
   });
 </script>
 
-<svelte:window onmousemove={handleMouseMove} onkeydown={(e) => { if (e.key === "Escape" && page.taskSidebarOpen) page.taskSidebarOpen = false; }} />
+<svelte:window onmousemove={handleMouseMove} onkeydown={handleKeydown} />
 
 {#if page.recording}
   <div