agent: sidebar — restyle with Lucide icons, labels, and collapsed tooltips

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/Sidebar.svelte

@@ -1,29 +1,17 @@
 <script>
-  import { page, settings, profiles, tasks, saveSettings } from "$lib/stores/page.svelte.js";
+  import { page, settings, tasks, saveSettings } from "$lib/stores/page.svelte.js";
+  import { Mic, FileText, SquareCheck, Clock, Settings, ChevronRight, ChevronLeft } from 'lucide-svelte';
 
   let taskCount = $derived(tasks.filter((t) => !t.done).length);
 
   const navItems = [
-    { id: "dictation", label: "Dictation", icon: "mic" },
+    { id: "dictation", label: "Dictation", icon: Mic },
-    { id: "files", label: "Files", icon: "file" },
+    { id: "files", label: "Files", icon: FileText },
-    { id: "tasks", label: "Tasks", icon: "tasks" },
+    { id: "tasks", label: "Tasks", icon: SquareCheck },
-    { id: "history", label: "History", icon: "clock" },
+    { id: "history", label: "History", icon: Clock },
-    { id: "settings", label: "Settings", icon: "settings" },
+    { id: "settings", label: "Settings", icon: Settings },
   ];
 
-  const icons = {
-    mic: "M12 1a4 4 0 0 0-4 4v7a4 4 0 0 0 8 0V5a4 4 0 0 0-4-4ZM8 17.95A7 7 0 0 1 5 12h2a5 5 0 0 0 10 0h2a7 7 0 0 1-3 5.95V21h3v2H5v-2h3v-3.05Z",
-    file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z",
-    tasks: "M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
-    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() {
@@ -40,8 +28,9 @@
 </script>
 
 <aside
-  class="flex flex-col bg-sidebar border-r border-border-subtle h-full transition-all duration-200 overflow-hidden
+  class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden
     {collapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
+  style="transition: width var(--duration-ui), min-width var(--duration-ui)"
 >
   <!-- Logo + toggle -->
   <div class="flex items-center {collapsed ? 'justify-center px-0 pt-4 pb-1' : 'px-5 pt-4 pb-1'} relative">
@@ -72,21 +61,16 @@
   <!-- 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"
+      class="flex items-center justify-center w-7 h-7 rounded-md text-text-tertiary hover:bg-hover hover:text-text"
+      style="transition-duration: var(--duration-ui)"
       onclick={toggleCollapsed}
       title={collapsed ? 'Expand sidebar ([)' : 'Collapse sidebar ([)'}
       aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
     >
       {#if collapsed}
-        <!-- Chevron right -->
+        <ChevronRight size={14} strokeWidth={2.5} aria-hidden="true" />
-        <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 -->
+        <ChevronLeft size={14} strokeWidth={2.5} aria-hidden="true" />
-        <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>
@@ -94,33 +78,46 @@
   <!-- Navigation -->
   <nav class="flex flex-col gap-0.5 {collapsed ? 'px-1' : 'px-3'}">
     {#each navItems as item}
+      {@const Icon = item.icon}
+      {@const isActive = page.current === item.id}
       <button
-        class="group flex items-center rounded-lg text-[13px] text-left w-full
+        class="group relative 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
+          {isActive
             ? 'bg-nav-active text-text font-medium'
             : 'text-text-secondary hover:bg-hover hover:text-text'}"
+        style="transition-duration: var(--duration-ui)"
         onclick={() => navigate(item.id)}
-        title={collapsed ? item.label : undefined}
+        aria-label={item.label}
       >
-        <svg
+        <Icon
-          class="w-[16px] h-[16px] flex-shrink-0
+          size={16}
-            {page.current === item.id ? 'text-accent' : 'text-text-tertiary group-hover:text-text-secondary'}"
+          strokeWidth={isActive ? 2 : 1.5}
-          viewBox="0 0 24 24" fill="currentColor"
+          class="flex-shrink-0 {isActive ? 'text-accent' : 'text-text-tertiary group-hover:text-text-secondary'}"
-        >
+          aria-hidden="true"
-          <path d={icons[item.icon]} />
+        />
-        </svg>
         {#if !collapsed}
-          {item.label}
+          <span>{item.label}</span>
           {#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}
+        {:else}
+          <!-- Tooltip on hover/focus for collapsed mode -->
+          <span class="absolute left-full ml-2 px-2 py-1 rounded-md bg-bg-elevated border border-border-subtle
+            text-[11px] text-text whitespace-nowrap opacity-0 pointer-events-none
+            group-hover:opacity-100 group-focus-visible:opacity-100 z-50 shadow-lg"
+            style="transition: opacity var(--duration-ui)"
+            role="tooltip"
+          >
+            {item.label}
+          </span>
+          {#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}
+        {/if}
       </button>
     {/each}
   </nav>
@@ -129,21 +126,6 @@
   <div class="flex-1"></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>
 
@@ -157,7 +139,7 @@
         ></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>
+      <p class="text-[10px] text-text-tertiary mt-1.5">{settings.formatMode} · v0.1</p>
     </div>
   {:else}
     <!-- Collapsed: status dot only -->