Lumotia/src/lib/Sidebar.svelte

<script lang="ts">
  import { page, settings, tasks, saveSettings } from "$lib/stores/page.svelte.js";
  import { Mic, FileText, SquareCheck, Clock, Settings, ChevronRight, ChevronLeft } from 'lucide-svelte';
  import LlmStatusChip from "$lib/components/LlmStatusChip.svelte";

  let taskCount = $derived(tasks.filter((t) => !t.done).length);

  const navItems = [
    { 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 },
  ];

  let collapsed = $derived(settings.sidebarCollapsed);

  function toggleCollapsed() {
    settings.sidebarCollapsed = !settings.sidebarCollapsed;
    saveSettings();
  }

  function navigate(id: string) {
    page.current = id;
    if (id !== "dictation") {
      page.taskSidebarOpen = false;
    }
  }
</script>

<!--
  Layout-transition perf fix: previously animated `width` + `min-width` which
  triggers layout on every frame. Replaced with a CSS-grid track-size
  transition (`grid-template-columns`) on a wrapping container; the inner
  flex column lives in the single track. This keeps the parent flex row in
  charge of width allocation but moves the animated property onto a track
  spec, which the browser can collapse without re-running our layout work.
-->
<div
  class="grid h-full {collapsed ? 'grid-cols-[48px]' : 'grid-cols-[210px]'}"
  style="transition: grid-template-columns var(--duration-ui)"
>
<aside
  class="flex flex-col bg-sidebar border-r border-border-subtle h-full overflow-hidden min-w-0"
>
  <!-- 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">Lumotia</h1>
        <span
          class="text-[18px] text-accent inline-block {page.recording ? 'animate-sinhala-spin' : ''}"
          title="Lumotia"
        >&#3559;</span>
      </div>
    {:else}
      <!-- Collapsed: just the decorative character centred -->
      <span
        class="text-[18px] text-accent inline-block {page.recording ? 'animate-sinhala-spin' : ''}"
        title="Lumotia"
      >&#3559;</span>
    {/if}
  </div>

  {#if !collapsed}
    <p class="text-[12px] text-text-secondary px-5 mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
    <!-- LLM status chip — hidden when aiTier === off, otherwise reflects
         disconnected / warming / ready / generating / error state live. -->
    <div class="px-5 mt-2">
      <LlmStatusChip />
    </div>
  {:else}
    <!-- Collapsed: compact dot-only chip so the sidebar still surfaces
         the state without eating horizontal space. -->
    <div class="mt-2 flex justify-center">
      <LlmStatusChip compact />
    </div>
  {/if}

  <!-- Separator -->
  <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"
      style="transition-duration: var(--duration-ui)"
      onclick={toggleCollapsed}
      title={collapsed ? 'Expand sidebar ([)' : 'Collapse sidebar ([)'}
      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
    >
      {#if collapsed}
        <ChevronRight size={14} strokeWidth={2.5} aria-hidden="true" />
      {:else}
        <ChevronLeft size={14} strokeWidth={2.5} aria-hidden="true" />
      {/if}
    </button>
  </div>

  <!-- Navigation -->
  <!--
    Recording-as-sacred-state: when recording is active, nav items are
    de-emphasised (lower opacity, non-interactive) so the recording controls
    on DictationPage are the unambiguous focus. DOM is preserved for
    screen-reader users (aria-disabled, not hidden).
    The transition is wrapped by prefers-reduced-motion below.
  -->
  <nav
    class="flex flex-col gap-0.5 {collapsed ? 'px-1' : 'px-3'}"
    aria-label="Main navigation"
    style="transition: opacity 200ms ease; {page.recording ? 'opacity: 0.3; pointer-events: none;' : 'opacity: 1;'}"
  >
    {#each navItems as item}
      {@const Icon = item.icon}
      {@const isActive = page.current === item.id}
      <button
        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'}
          {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)}
        aria-label={item.label}
        aria-disabled={page.recording ? "true" : undefined}
        tabindex={page.recording ? -1 : 0}
      >
        <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}
          <span>{item.label}</span>
          {#if item.id === "tasks" && taskCount > 0}
            <span class="ml-auto text-[12px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
              {taskCount}
            </span>
          {/if}
        {: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-[12px] 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>

  <!-- Spacer -->
  <div class="flex-1"></div>

  {#if !collapsed}
    <!-- 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">
        <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-[12px] text-text-secondary">{page.status}</span>
      </div>
      <p class="text-[12px] text-text-secondary mt-1.5">{settings.formatMode} · v0.1</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>
    </div>
  {/if}
</aside>
</div>

<style>
  /* Instant snap instead of 200ms fade for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    nav {
      transition: none !important;
    }
  }
</style>