jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-21 10:51:56 +00:00
parent 4c0fd0aeda
commit 2118fa6c6b
1 changed files with 41 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/lib/Sidebar.svelte
View File

@@ -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: "files", label: "Files", icon: "file" },
{ id: "tasks", label: "Tasks", icon: "tasks" },
{ id: "history", label: "History", icon: "clock" },
{ id: "settings", label: "Settings", icon: "settings" },
{ id: "dictation", label: "Dictation", icon: Mic },
{ id: "files", label: "Files", icon: FileText },
{ id: "tasks", label: "Tasks", icon: SquareCheck },
{ id: "history", label: "History", icon: Clock },
{ 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 -->
<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>
<ChevronRight size={14} strokeWidth={2.5} aria-hidden="true" />
{: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>
<ChevronLeft size={14} strokeWidth={2.5} aria-hidden="true" />
{/if}
</button>
</div>
@@ -94,32 +78,45 @@
<!-- 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
class="w-[16px] h-[16px] flex-shrink-0
{page.current === item.id ? 'text-accent' : 'text-text-tertiary group-hover:text-text-secondary'}"
viewBox="0 0 24 24" fill="currentColor"
>
<path d={icons[item.icon]} />
</svg>
<Icon
size={16}
strokeWidth={isActive ? 2 : 1.5}
class="flex-shrink-0 {isActive ? 'text-accent' : 'text-text-tertiary group-hover:text-text-secondary'}"
aria-hidden="true"
/>
{#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}
<!-- Badge dot in collapsed mode -->
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-accent"></span>
{: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}
@@ -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 -->