From 35ee065acf17244665eb8d5f2add68fb00fc2826 Mon Sep 17 00:00:00 2001
From: Leonard Roussard <lroussard@gmail.com>
Date: Sat, 30 May 2026 02:24:27 +0200
Subject: [PATCH 1/2] =?UTF-8?q?style(ui):=20full-product=20Emil=20design?=
 =?UTF-8?q?=20pass=20=E2=80=94=20tokens,=20focus,=20motion,=20a11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Foundation + product-wide polish following Emil Kowalski's design
engineering principles. Visual/interaction only — no behavior changes.

Tokens (index.css): elevation scale (shadow-card/popover/overlay),
z-index scale, macOS window-control colors, modal/fade keyframes.

Shared components: Button gains focus-visible ring, press feedback and a
link variant; Modal gains role/aria-modal, focus trap + restore, scroll
lock and an entrance animation; Card uses the elevation token (+optional
interactive lift); Badge/SearchableSelect/PeriodSelector/ModelCard get
focus-visible, ease-out and motion-reduce; dropdowns share the popover
shadow + pop-in.

Shell & pages: sidebar/onboarding/profiles no longer shift layout on
active states (constant font-weight); transition-all replaced with named
properties; focus-visible added to nav, list items, tabs and footer
buttons; inline accent text-buttons routed through Button link variant.

dupe-ignore: register the new "link" variant string (matches existing
ghost/secondary entries).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .doctor/dupe-ignore                           |  1 +
 src/index.css                                 | 50 +++++++++++++++
 src/layout/sidebar.tsx                        | 26 +++++---
 src/onboarding/onboarding-layout.tsx          | 14 ++--
 src/onboarding/steps/step-microphone.tsx      |  2 +-
 src/profiles/list/profile-list-item.tsx       |  4 +-
 src/profiles/llm/llm-model-selector.tsx       |  4 +-
 src/settings/about/about-section.tsx          | 15 +++--
 src/settings/general/general-section.tsx      |  8 ++-
 src/settings/llm/llm-model-download-row.tsx   |  2 +-
 src/settings/speech/speech-model-modal.tsx    |  2 +-
 src/shared/components/badge/badge.tsx         |  2 +-
 .../components/button/button-size-styles.ts   |  2 +
 .../button/button-variant-styles.ts           |  3 +
 src/shared/components/button/button.tsx       | 16 +++--
 src/shared/components/card.tsx                |  7 +-
 .../components/modal-focusable-selector.ts    |  5 ++
 src/shared/components/modal.tsx               | 64 ++++++++++++++++---
 .../components/model-card/model-card.tsx      |  4 +-
 src/shared/components/period-selector.tsx     |  4 +-
 .../searchable-select/searchable-select.tsx   | 11 ++--
 src/transcripts/transcript-item.tsx           |  4 +-
 src/widget/idle-bar.tsx                       |  2 +-
 23 files changed, 201 insertions(+), 51 deletions(-)
 create mode 100644 src/shared/components/modal-focusable-selector.ts

diff --git a/.doctor/dupe-ignore b/.doctor/dupe-ignore
index f160f98..c858103 100644
--- a/.doctor/dupe-ignore
+++ b/.doctor/dupe-ignore
@@ -23,6 +23,7 @@ MAGIC:ghost
 MAGIC:secondary
 MAGIC:accent
 MAGIC:default
+MAGIC:link
 
 # Config key — only 2 files, not worth extracting
 MAGIC:sttModel
diff --git a/src/index.css b/src/index.css
index 6c7fd36..492b269 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,9 +16,30 @@
   --color-warning: #f59e0b;
   --color-recording: #ef4444;
   --color-border: #e5e5e0;
+
+  /* macOS window-control colors (was hardcoded in the sidebar). */
+  --color-mac-close: #ff5f57;
+  --color-mac-min: #febc2e;
+  --color-mac-max: #28c840;
+
+  /* Elevation scale — each pairs a hairline ring with a soft shadow so cards
+     and overlays blend on any background instead of showing a harsh border.
+     Maps to `shadow-card` / `shadow-popover` / `shadow-overlay` utilities. */
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
+  --shadow-popover: 0 8px 28px -6px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  --shadow-overlay: 0 16px 48px -12px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
 }
 
 @layer base {
+  /* Fixed z-index scale — reference with `z-[var(--z-modal)]` etc. so stacking
+     order is intentional instead of a scatter of arbitrary values. */
+  :root {
+    --z-dropdown: 100;
+    --z-modal: 200;
+    --z-tooltip: 300;
+    --z-toast: 400;
+  }
+
   html,
   body {
     height: 100%;
@@ -67,6 +88,35 @@
     transform-origin: top;
   }
 
+  /* Backdrop fade + centered dialog entrance. */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes modal-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.15s ease-out;
+  }
+
+  .animate-modal-in {
+    animation: modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
   /* Respect the user's motion preference everywhere by default. */
   @media (prefers-reduced-motion: reduce) {
     *,
diff --git a/src/layout/sidebar.tsx b/src/layout/sidebar.tsx
index f7fc58a..e88095c 100644
--- a/src/layout/sidebar.tsx
+++ b/src/layout/sidebar.tsx
@@ -2,6 +2,7 @@ import { NavLink } from "react-router-dom";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { open } from "@tauri-apps/plugin-shell";
 import cn from "../shared/lib/utils/cn";
+import Button from "../shared/components/button/button";
 import appVersion from "../shared/constants/app-version";
 import useUpdateCheck from "../shared/hooks/use-update-check";
 import sidebarNavItems from "./sidebar-nav-items";
@@ -17,12 +18,16 @@ export default function Sidebar() {
       >
         <div className="flex items-center gap-1.5">
           <button
+            type="button"
+            aria-label="Close window"
             onClick={() => getCurrentWindow().close()}
-            className="w-3 h-3 rounded-full bg-[#ff5f57] hover:brightness-90 transition-all"
+            className="w-3 h-3 rounded-full bg-mac-close transition-[filter] duration-150 hover:brightness-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           />
           <button
+            type="button"
+            aria-label="Minimize window"
             onClick={() => getCurrentWindow().minimize()}
-            className="w-3 h-3 rounded-full bg-[#febc2e] hover:brightness-90 transition-all"
+            className="w-3 h-3 rounded-full bg-mac-min transition-[filter] duration-150 hover:brightness-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           />
         </div>
         <span
@@ -41,9 +46,13 @@ export default function Sidebar() {
             end={item.to === "/"}
             className={({ isActive }) =>
               cn(
-                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-[13px] transition-colors duration-150",
+                // font-medium is constant across states — only color/bg change,
+                // so the active item never shifts the layout.
+                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-[13px] font-medium",
+                "transition-colors duration-150 ease-out motion-reduce:transition-none",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
                 isActive
-                  ? "bg-accent-subtle text-accent font-medium"
+                  ? "bg-accent-subtle text-accent"
                   : "text-text-secondary hover:bg-bg-tertiary hover:text-text-primary"
               )
             }
@@ -55,14 +64,15 @@ export default function Sidebar() {
       </nav>
 
       <div className="px-4 py-3 border-t border-border">
-        <div className="text-[11px] text-text-tertiary">v{appVersion}</div>
+        <div className="text-[11px] text-text-tertiary tabular-nums">v{appVersion}</div>
         {updateAvailable && (
-          <button
+          <Button
+            variant="link"
             onClick={() => open("https://loqui.impulselab.ai")}
-            className="text-[11px] text-accent hover:underline"
+            className="text-[11px]"
           >
             Update available
-          </button>
+          </Button>
         )}
       </div>
     </aside>
diff --git a/src/onboarding/onboarding-layout.tsx b/src/onboarding/onboarding-layout.tsx
index b3d6bdc..ecd2661 100644
--- a/src/onboarding/onboarding-layout.tsx
+++ b/src/onboarding/onboarding-layout.tsx
@@ -50,7 +50,7 @@ export default function OnboardingLayout({ onComplete }: OnboardingLayoutProps)
   if (!steps) {
     return (
       <div className="flex items-center justify-center h-screen bg-bg-primary text-sm text-text-tertiary">
-        Loading...
+        Loading…
       </div>
     );
   }
@@ -84,8 +84,10 @@ export default function OnboardingLayout({ onComplete }: OnboardingLayoutProps)
               </div>
               <span
                 className={cn(
-                  "text-sm",
-                  i === currentStep ? "text-text-primary font-medium" : "text-text-tertiary"
+                  // Constant weight — only the color changes per step, so the
+                  // stepper labels never reflow as you advance.
+                  "text-sm font-medium",
+                  i === currentStep ? "text-text-primary" : "text-text-tertiary"
                 )}
               >
                 {step.label}
@@ -115,7 +117,7 @@ export default function OnboardingLayout({ onComplete }: OnboardingLayoutProps)
           <button
             onClick={handleBack}
             disabled={currentStep === 0}
-            className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            className="px-4 py-2 rounded-lg text-sm text-text-secondary hover:text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
           >
             Back
           </button>
@@ -131,11 +133,11 @@ export default function OnboardingLayout({ onComplete }: OnboardingLayoutProps)
             <button
             onClick={footer.onClick}
             disabled={footer.disabled || footer.loading}
-            className="relative overflow-hidden px-6 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-w-[120px]"
+            className="relative overflow-hidden px-6 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary min-w-[120px]"
           >
             {footer.loading && footer.progress != null && (
               <div
-                className="absolute inset-0 bg-white/15 transition-all duration-300"
+                className="absolute inset-0 bg-white/15 transition-[width] duration-300 motion-reduce:transition-none"
                 style={{ width: `${footer.progress}%` }}
               />
             )}
diff --git a/src/onboarding/steps/step-microphone.tsx b/src/onboarding/steps/step-microphone.tsx
index 58eee95..532c1b5 100644
--- a/src/onboarding/steps/step-microphone.tsx
+++ b/src/onboarding/steps/step-microphone.tsx
@@ -170,7 +170,7 @@ export default function StepMicrophone({ goNext, setFooter }: StepComponentProps
 
         <div className="flex-1 h-3 bg-bg-tertiary rounded-full overflow-hidden">
           <div
-            className="h-full bg-accent rounded-full transition-all duration-75"
+            className="h-full bg-accent rounded-full transition-[width] duration-75 motion-reduce:transition-none"
             style={{ width: `${Math.min(level * 100, 100)}%` }}
           />
         </div>
diff --git a/src/profiles/list/profile-list-item.tsx b/src/profiles/list/profile-list-item.tsx
index 7b0fa88..185f945 100644
--- a/src/profiles/list/profile-list-item.tsx
+++ b/src/profiles/list/profile-list-item.tsx
@@ -27,7 +27,9 @@ export default function ProfileListItem({
       type="button"
       onClick={onSelect}
       className={cn(
-        "w-full text-left px-3 py-3 rounded-lg transition-colors cursor-pointer flex items-center justify-between",
+        "w-full text-left px-3 py-3 rounded-lg cursor-pointer flex items-center justify-between gap-2",
+        "transition-colors duration-150 ease-out motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
         selected
           ? "bg-accent-subtle"
           : "hover:bg-bg-secondary"
diff --git a/src/profiles/llm/llm-model-selector.tsx b/src/profiles/llm/llm-model-selector.tsx
index e7814c6..7514a8d 100644
--- a/src/profiles/llm/llm-model-selector.tsx
+++ b/src/profiles/llm/llm-model-selector.tsx
@@ -103,7 +103,9 @@ export default function LlmModelSelector({
             type="button"
             onClick={() => onProviderChange(tab.id)}
             className={cn(
-              "flex-1 px-2 py-1.5 text-xs font-medium rounded-md transition-colors cursor-pointer",
+              "flex-1 px-2 py-1.5 text-xs font-medium rounded-md cursor-pointer",
+              "transition-colors duration-150 ease-out motion-reduce:transition-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
               llmProvider === tab.id
                 ? "bg-bg-primary text-text-primary shadow-sm"
                 : "text-text-tertiary hover:text-text-secondary",
diff --git a/src/settings/about/about-section.tsx b/src/settings/about/about-section.tsx
index ee62fd2..9c2ad46 100644
--- a/src/settings/about/about-section.tsx
+++ b/src/settings/about/about-section.tsx
@@ -1,6 +1,7 @@
 import { open } from "@tauri-apps/plugin-shell";
 import { ExternalLink } from "lucide-react";
 import Card from "../../shared/components/card";
+import Button from "../../shared/components/button/button";
 import appVersion from "../../shared/constants/app-version";
 
 export default function AboutSection() {
@@ -15,24 +16,26 @@ export default function AboutSection() {
 
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Source code</span>
-          <button
+          <Button
+            variant="link"
             onClick={() => open("https://github.com/impulse-studio/loqui")}
-            className="inline-flex items-center gap-1.5 text-xs text-accent font-medium hover:underline"
+            className="text-xs"
           >
             GitHub
             <ExternalLink size={12} />
-          </button>
+          </Button>
         </div>
 
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Report an issue</span>
-          <button
+          <Button
+            variant="link"
             onClick={() => open("https://github.com/impulse-studio/loqui/issues")}
-            className="inline-flex items-center gap-1.5 text-xs text-accent font-medium hover:underline"
+            className="text-xs"
           >
             Feedback
             <ExternalLink size={12} />
-          </button>
+          </Button>
         </div>
       </Card>
     </section>
diff --git a/src/settings/general/general-section.tsx b/src/settings/general/general-section.tsx
index f925574..3991ac8 100644
--- a/src/settings/general/general-section.tsx
+++ b/src/settings/general/general-section.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import Card from "../../shared/components/card";
 import Toggle from "../../shared/components/toggle";
+import Button from "../../shared/components/button/button";
 import {
   setConfig,
   enableAutostart,
@@ -53,12 +54,13 @@ export default function GeneralSection() {
           </div>
           <div className="flex items-center gap-3">
             <HotkeyDisplay hotkey={hotkey} />
-            <button
+            <Button
+              variant="link"
               onClick={() => setShowHotkeyModal(true)}
-              className="text-xs text-accent font-medium hover:underline"
+              className="text-xs"
             >
               Change
-            </button>
+            </Button>
           </div>
         </div>
         <div className="flex items-center justify-between px-5 py-4">
diff --git a/src/settings/llm/llm-model-download-row.tsx b/src/settings/llm/llm-model-download-row.tsx
index 91776a8..639a7ef 100644
--- a/src/settings/llm/llm-model-download-row.tsx
+++ b/src/settings/llm/llm-model-download-row.tsx
@@ -80,7 +80,7 @@ export default function LlmModelDownloadRow({
           <div className="mt-2 space-y-1">
             <div className="h-1.5 rounded-full bg-bg-tertiary overflow-hidden">
               <div
-                className="h-full bg-accent rounded-full transition-all duration-300"
+                className="h-full bg-accent rounded-full transition-[width] duration-300 motion-reduce:transition-none"
                 style={{ width: `${percent}%` }}
               />
             </div>
diff --git a/src/settings/speech/speech-model-modal.tsx b/src/settings/speech/speech-model-modal.tsx
index 6af55cd..6c7576d 100644
--- a/src/settings/speech/speech-model-modal.tsx
+++ b/src/settings/speech/speech-model-modal.tsx
@@ -120,7 +120,7 @@ export default function SpeechModelModal({
           >
             {downloading && (
               <span
-                className="absolute inset-0 bg-accent/20 transition-all duration-300"
+                className="absolute inset-0 bg-accent/20 transition-[width] duration-300 motion-reduce:transition-none"
                 style={{ width: `${pct}%` }}
               />
             )}
diff --git a/src/shared/components/badge/badge.tsx b/src/shared/components/badge/badge.tsx
index af97278..0ab18ec 100644
--- a/src/shared/components/badge/badge.tsx
+++ b/src/shared/components/badge/badge.tsx
@@ -11,7 +11,7 @@ export default function Badge({ children, variant = "default" }: BadgeProps) {
   return (
     <span
       className={cn(
-        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
+        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium tabular-nums",
         badgeVariantStyles[variant]
       )}
     >
diff --git a/src/shared/components/button/button-size-styles.ts b/src/shared/components/button/button-size-styles.ts
index 857928c..649a30f 100644
--- a/src/shared/components/button/button-size-styles.ts
+++ b/src/shared/components/button/button-size-styles.ts
@@ -1,4 +1,6 @@
 const buttonSizeStyles: Record<string, string> = {
+  // No box chrome — for variant="link" sitting inside flowing text.
+  inline: "text-sm",
   sm: "h-8 px-3 text-[13px] rounded-lg",
   md: "h-9 px-4 text-sm rounded-lg",
   lg: "h-11 px-6 text-sm rounded-lg",
diff --git a/src/shared/components/button/button-variant-styles.ts b/src/shared/components/button/button-variant-styles.ts
index 61407a1..3c9fe02 100644
--- a/src/shared/components/button/button-variant-styles.ts
+++ b/src/shared/components/button/button-variant-styles.ts
@@ -5,6 +5,9 @@ const buttonVariantStyles: Record<string, string> = {
     "bg-bg-secondary text-text-primary border border-border hover:bg-bg-tertiary",
   destructive: "bg-error text-white hover:bg-error/90 active:bg-error/80",
   ghost: "text-text-secondary hover:bg-bg-secondary active:bg-bg-tertiary",
+  // Inline text action (e.g. "Change", "Update available"). No box — pairs
+  // with `size="inline"` so it sits in flowing text without button chrome.
+  link: "text-accent hover:text-accent-hover hover:underline underline-offset-2 rounded-sm",
 };
 
 export default buttonVariantStyles;
diff --git a/src/shared/components/button/button.tsx b/src/shared/components/button/button.tsx
index aaa09d2..66854cf 100644
--- a/src/shared/components/button/button.tsx
+++ b/src/shared/components/button/button.tsx
@@ -4,8 +4,8 @@ import buttonVariantStyles from "./button-variant-styles";
 import buttonSizeStyles from "./button-size-styles";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "destructive" | "ghost";
-  size?: "sm" | "md" | "lg";
+  variant?: "primary" | "secondary" | "destructive" | "ghost" | "link";
+  size?: "inline" | "sm" | "md" | "lg";
 }
 
 export default function Button({
@@ -16,12 +16,20 @@ export default function Button({
   children,
   ...props
 }: ButtonProps) {
+  const isLink = variant === "link";
   return (
     <button
       className={cn(
-        "inline-flex items-center justify-center gap-2 font-medium transition-colors duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center gap-2 font-medium cursor-pointer",
+        // Tailwind's `transition` animates a curated property set (colors,
+        // transform, box-shadow) — intentional, not `transition: all`.
+        "transition duration-150 ease-out motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
+        // Tactile press feedback for real buttons; links stay flat.
+        !isLink && "active:scale-[0.98]",
         buttonVariantStyles[variant],
-        buttonSizeStyles[size],
+        buttonSizeStyles[isLink ? "inline" : size],
         className
       )}
       disabled={disabled}
diff --git a/src/shared/components/card.tsx b/src/shared/components/card.tsx
index 9f18d4b..9b4dab2 100644
--- a/src/shared/components/card.tsx
+++ b/src/shared/components/card.tsx
@@ -4,19 +4,24 @@ import cn from "../lib/utils/cn";
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
   featured?: boolean;
+  /** Adds a subtle hover lift for clickable cards. */
+  interactive?: boolean;
 }
 
 export default function Card({
   children,
   featured = false,
+  interactive = false,
   className = "",
   ...props
 }: CardProps) {
   return (
     <div
       className={cn(
-        "bg-bg-card rounded-xl border shadow-[0_1px_3px_rgba(0,0,0,0.04)]",
+        "bg-bg-card rounded-xl border shadow-[var(--shadow-card)]",
         featured ? "border-accent" : "border-border",
+        interactive &&
+          "transition-shadow duration-200 ease-out motion-reduce:transition-none hover:shadow-[var(--shadow-popover)]",
         className
       )}
       {...props}
diff --git a/src/shared/components/modal-focusable-selector.ts b/src/shared/components/modal-focusable-selector.ts
new file mode 100644
index 0000000..6e7d222
--- /dev/null
+++ b/src/shared/components/modal-focusable-selector.ts
@@ -0,0 +1,5 @@
+// Tabbable elements inside the modal — used by the focus trap.
+const modalFocusableSelector =
+  'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])';
+
+export default modalFocusableSelector;
diff --git a/src/shared/components/modal.tsx b/src/shared/components/modal.tsx
index 1395a3e..b8ba302 100644
--- a/src/shared/components/modal.tsx
+++ b/src/shared/components/modal.tsx
@@ -1,4 +1,5 @@
-import { type ReactNode, useEffect } from "react";
+import { type ReactNode, useEffect, useRef } from "react";
+import FOCUSABLE from "./modal-focusable-selector";
 
 interface ModalProps {
   open: boolean;
@@ -8,31 +9,76 @@ interface ModalProps {
 }
 
 export default function Modal({ open, onClose, title, children }: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (!open) return;
 
-    function handleEsc(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
+    // Restore focus to whatever was focused before the dialog opened.
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    // Lock background scroll while the dialog is up.
+    const { overflow } = document.body.style;
+    document.body.style.overflow = "hidden";
+
+    // Move focus into the dialog.
+    const panel = panelRef.current;
+    const focusables = panel?.querySelectorAll<HTMLElement>(FOCUSABLE);
+    (focusables?.[0] ?? panel)?.focus();
+
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      // Trap Tab within the dialog.
+      if (e.key !== "Tab" || !panel) return;
+      const items = panel.querySelectorAll<HTMLElement>(FOCUSABLE);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
     }
 
-    document.addEventListener("keydown", handleEsc);
-    return () => document.removeEventListener("keydown", handleEsc);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = overflow;
+      previouslyFocused?.focus();
+    };
   }, [open, onClose]);
 
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div
+      className="fixed inset-0 z-[var(--z-modal)] flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+    >
       <div
-        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/20 backdrop-blur-sm animate-fade-in motion-reduce:animate-none"
         onClick={onClose}
       />
       <div
+        ref={panelRef}
+        tabIndex={-1}
         className="
           relative bg-bg-primary rounded-2xl border border-border
-          shadow-[0_4px_24px_rgba(0,0,0,0.08)]
+          shadow-[var(--shadow-overlay)]
           min-w-[400px] max-w-[560px] max-h-[80vh]
-          overflow-y-auto p-6
+          overflow-y-auto p-6 focus:outline-none
+          animate-modal-in motion-reduce:animate-none
         "
       >
         {title && (
diff --git a/src/shared/components/model-card/model-card.tsx b/src/shared/components/model-card/model-card.tsx
index 0b5dcf2..d36e3d4 100644
--- a/src/shared/components/model-card/model-card.tsx
+++ b/src/shared/components/model-card/model-card.tsx
@@ -20,7 +20,9 @@ export default function ModelCard({ model, selected, disabled, onSelect }: Model
       onClick={onSelect}
       disabled={disabled}
       className={cn(
-        "flex flex-col items-center gap-2 p-4 rounded-xl border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        "flex flex-col items-center gap-2 p-4 rounded-xl border cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        "transition-colors duration-150 ease-out motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
         selected
           ? "border-accent bg-accent/5"
           : "border-border bg-bg-card hover:border-text-tertiary"
diff --git a/src/shared/components/period-selector.tsx b/src/shared/components/period-selector.tsx
index 69a3c7b..5ed82d7 100644
--- a/src/shared/components/period-selector.tsx
+++ b/src/shared/components/period-selector.tsx
@@ -14,7 +14,9 @@ export default function PeriodSelector({ periods, active, onChange }: PeriodSele
           key={period}
           onClick={() => onChange(period)}
           className={cn(
-            "flex-1 px-3 py-1.5 text-xs font-medium transition-colors",
+            "flex-1 px-3 py-1.5 text-xs font-medium",
+            "transition-colors duration-150 ease-out motion-reduce:transition-none",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/40",
             period === active
               ? "bg-accent text-white"
               : "text-text-secondary hover:bg-bg-tertiary"
diff --git a/src/shared/components/searchable-select/searchable-select.tsx b/src/shared/components/searchable-select/searchable-select.tsx
index e98c4d9..3edcece 100644
--- a/src/shared/components/searchable-select/searchable-select.tsx
+++ b/src/shared/components/searchable-select/searchable-select.tsx
@@ -113,7 +113,9 @@ export default function SearchableSelect({
           type="button"
           onClick={() => setOpen(true)}
           className={cn(
-            "w-full flex items-center gap-2 border rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer",
+            "w-full flex items-center gap-2 border rounded-lg px-3 py-2 text-sm cursor-pointer",
+            "transition-colors duration-150 ease-out motion-reduce:transition-none",
+            "focus-visible:outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent/20",
             "border-border bg-bg-primary text-text-primary hover:border-text-tertiary",
           )}
         >
@@ -131,10 +133,10 @@ export default function SearchableSelect({
         <div
           ref={listRef}
           className={cn(
-            "absolute left-0 right-0 top-full mt-1 z-50",
+            "animate-pop-in origin-top absolute left-0 right-0 top-full mt-1.5 z-[var(--z-dropdown)]",
             "max-h-64 overflow-y-auto",
             "bg-bg-card rounded-lg border border-border",
-            "shadow-[0_4px_24px_rgba(0,0,0,0.08)] p-1",
+            "shadow-[var(--shadow-popover)] p-1",
           )}
         >
           {filtered.length === 0 && (
@@ -149,7 +151,8 @@ export default function SearchableSelect({
               onClick={() => handleSelect(opt.value)}
               onMouseEnter={() => setHighlightIndex(i)}
               className={cn(
-                "w-full text-left px-3 py-2 rounded-md text-sm transition-colors flex items-center gap-2",
+                "w-full text-left px-3 py-2 rounded-md text-sm flex items-center gap-2",
+                "transition-colors duration-150 ease-out motion-reduce:transition-none",
                 i === highlightIndex && "bg-bg-tertiary",
                 opt.value === value
                   ? "text-accent"
diff --git a/src/transcripts/transcript-item.tsx b/src/transcripts/transcript-item.tsx
index ee5eb7e..cfdbec4 100644
--- a/src/transcripts/transcript-item.tsx
+++ b/src/transcripts/transcript-item.tsx
@@ -19,7 +19,9 @@ export default function TranscriptItem({
     <button
       onClick={onClick}
       className={cn(
-        "w-full text-left px-4 py-3 transition-colors border-l-2",
+        "w-full text-left px-4 py-3 border-l-2",
+        "transition-colors duration-150 ease-out motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/40",
         selected
           ? "border-accent bg-accent/5"
           : "border-transparent hover:bg-bg-tertiary/50"
diff --git a/src/widget/idle-bar.tsx b/src/widget/idle-bar.tsx
index 653e4d6..3f8458c 100644
--- a/src/widget/idle-bar.tsx
+++ b/src/widget/idle-bar.tsx
@@ -6,7 +6,7 @@ export default function IdleBar() {
         rounded-lg
         bg-white/60
         hover:bg-white/85
-        transition-all duration-300
+        transition-colors duration-300 motion-reduce:transition-none
       "
     />
   );

From 22291ac3c4b64c04c8dc9b13f7a32971a51fd087 Mon Sep 17 00:00:00 2001
From: Leonard Roussard <lroussard@gmail.com>
Date: Fri, 5 Jun 2026 15:18:36 +0200
Subject: [PATCH 2/2] fix(ui): address PR review comments + premium redesign
 wave 1

Review fixes:
- widget.rs: hop NSPanel show/hide to the main thread via run_on_main_thread
  (calling AppKit from the hotkey background thread crashed on every recording)
- toggle: add `ariaLabel` prop so switches with an external label still expose
  an accessible name; pass it at all three call sites
- modal: keep onClose in a ref so focus restoration only runs on close (not on
  every re-render); make initial focus fall back to the panel; exclude disabled
  controls from the focus-trap selector

Other:
- use-fft-bars: gate the rAF loop on `active` so it idles instead of running
  at 60fps for the app's lifetime (fixes idle CPU/heap churn)
- native macOS traffic lights (titleBarStyle Overlay) + premium redesign of
  Dashboard/Settings (PageHeader, icon stat cards, spacing, type scale)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src-tauri/src/window/widget.rs                | 57 +++++++++++--------
 src-tauri/tauri.conf.json                     |  6 +-
 src/dashboard/dashboard-page.tsx              | 14 +++--
 src/dashboard/stats/stat-cards.ts             | 19 +++++++
 src/dashboard/stats/stat-placeholders.ts      |  8 ---
 src/dashboard/stats/stats-row.tsx             | 28 ++++-----
 src/index.css                                 |  9 +--
 src/layout/main-layout.tsx                    |  2 +-
 src/layout/sidebar.tsx                        | 19 +------
 src/profiles/profiles-page.tsx                |  2 +-
 src/settings/about/about-section.tsx          |  2 +-
 src/settings/data/data-section.tsx            |  2 +-
 src/settings/debug-section.tsx                |  2 +-
 src/settings/general/general-section.tsx      |  4 +-
 src/settings/llm/llm-section.tsx              |  2 +-
 src/settings/settings-page.tsx                |  6 +-
 src/settings/speech/speech-section.tsx        |  2 +-
 src/settings/widget/widget-section.tsx        |  3 +-
 .../components/modal-focusable-selector.ts    |  5 +-
 src/shared/components/modal.tsx               | 19 +++++--
 src/shared/components/page-header.tsx         | 24 ++++++++
 src/shared/components/toggle.tsx              |  6 +-
 src/transcripts/transcripts-page.tsx          |  2 +-
 src/widget/hooks/use-fft-bars.ts              | 33 ++++++++---
 src/widget/widget-app.tsx                     |  3 +-
 25 files changed, 174 insertions(+), 105 deletions(-)
 create mode 100644 src/dashboard/stats/stat-cards.ts
 delete mode 100644 src/dashboard/stats/stat-placeholders.ts
 create mode 100644 src/shared/components/page-header.tsx

diff --git a/src-tauri/src/window/widget.rs b/src-tauri/src/window/widget.rs
index 596b6a2..3ca9145 100644
--- a/src-tauri/src/window/widget.rs
+++ b/src-tauri/src/window/widget.rs
@@ -7,28 +7,36 @@ use tauri::{AppHandle, LogicalSize, Manager, PhysicalPosition, WebviewWindow};
 /// keyboard focus from the user's active app. On macOS the widget is an
 /// `NSPanel`; a plain `show()` calls `makeKeyAndOrderFront`, which would steal
 /// focus and break paste injection — so we order it front "regardless" instead.
+///
+/// NSPanel/AppKit calls must happen on the main thread. The pipeline drives
+/// this from the hotkey listener thread, so we hop to the main thread first —
+/// calling AppKit off-main crashes the process.
 pub fn show(app_handle: &AppHandle) {
-    #[cfg(target_os = "macos")]
-    {
-        use tauri_nspanel::ManagerExt;
-        if let Ok(panel) = app_handle.get_webview_panel("widget") {
-            if !panel.is_visible() {
-                panel.order_front_regardless();
+    let app = app_handle.clone();
+    let _ = app_handle.run_on_main_thread(move || {
+        #[cfg(target_os = "macos")]
+        {
+            use tauri_nspanel::ManagerExt;
+            if let Ok(panel) = app.get_webview_panel("widget") {
+                if !panel.is_visible() {
+                    panel.order_front_regardless();
+                }
+                return;
             }
-            return;
         }
-    }
 
-    if let Some(widget) = app_handle.get_webview_window("widget") {
-        if !widget.is_visible().unwrap_or(false) {
-            let _ = widget.show();
+        if let Some(widget) = app.get_webview_window("widget") {
+            if !widget.is_visible().unwrap_or(false) {
+                let _ = widget.show();
+            }
         }
-    }
+    });
 }
 
 /// Restore the widget to the user's configured visibility. Called when the
 /// pipeline returns to idle, so a hidden widget that we surfaced for recording
-/// gets hidden again.
+/// gets hidden again. The DB read is thread-safe; the AppKit hide is dispatched
+/// to the main thread (see [`show`]).
 pub fn restore_visibility(app_handle: &AppHandle) {
     let state = app_handle.state::<AppState>();
     let visible = state
@@ -42,18 +50,21 @@ pub fn restore_visibility(app_handle: &AppHandle) {
         return;
     }
 
-    #[cfg(target_os = "macos")]
-    {
-        use tauri_nspanel::ManagerExt;
-        if let Ok(panel) = app_handle.get_webview_panel("widget") {
-            panel.order_out(None);
-            return;
+    let app = app_handle.clone();
+    let _ = app_handle.run_on_main_thread(move || {
+        #[cfg(target_os = "macos")]
+        {
+            use tauri_nspanel::ManagerExt;
+            if let Ok(panel) = app.get_webview_panel("widget") {
+                panel.order_out(None);
+                return;
+            }
         }
-    }
 
-    if let Some(widget) = app_handle.get_webview_window("widget") {
-        let _ = widget.hide();
-    }
+        if let Some(widget) = app.get_webview_window("widget") {
+            let _ = widget.hide();
+        }
+    });
 }
 
 pub fn apply_position_and_size(
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 263e9c7..5f065ad 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -21,8 +21,10 @@
         "minHeight": 500,
         "center": true,
         "resizable": true,
-        "decorations": false,
-        "transparent": true,
+        "decorations": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true,
+        "transparent": false,
         "visible": true,
         "url": "index.html"
       },
diff --git a/src/dashboard/dashboard-page.tsx b/src/dashboard/dashboard-page.tsx
index c4adb5d..12c24c3 100644
--- a/src/dashboard/dashboard-page.tsx
+++ b/src/dashboard/dashboard-page.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import PageHeader from "../shared/components/page-header";
 import PeriodSelector from "../shared/components/period-selector";
 import statPeriods from "./activity/stat-periods";
 import periodToDays from "./activity/period-to-days";
@@ -11,13 +12,16 @@ export default function DashboardPage() {
 
   return (
     <div>
-      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+      <PageHeader
+        title="Dashboard"
+        description="Your dictation activity at a glance."
+      />
 
       <StatsRow />
 
-      <div className="mb-8">
+      <div className="mb-10">
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold">Activity</h2>
+          <h2 className="text-[15px] font-semibold tracking-[-0.01em]">Activity</h2>
           <PeriodSelector
             periods={statPeriods}
             active={activePeriod}
@@ -28,7 +32,9 @@ export default function DashboardPage() {
       </div>
 
       <div>
-        <h2 className="text-lg font-semibold mb-4">Recent Transcripts</h2>
+        <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-4">
+          Recent Transcripts
+        </h2>
         <RecentTranscripts />
       </div>
     </div>
diff --git a/src/dashboard/stats/stat-cards.ts b/src/dashboard/stats/stat-cards.ts
new file mode 100644
index 0000000..5cf51fc
--- /dev/null
+++ b/src/dashboard/stats/stat-cards.ts
@@ -0,0 +1,19 @@
+import { Type, Gauge, Mic, Clock, type LucideIcon } from "lucide-react";
+import formatNumber from "../../shared/lib/utils/format-number";
+import formatMinutes from "../../shared/lib/utils/format-minutes";
+import type { TranscriptStats } from "../../shared/types/transcript";
+
+export interface StatCard {
+  label: string;
+  icon: LucideIcon;
+  value: (stats: TranscriptStats) => string;
+}
+
+const statCards: StatCard[] = [
+  { label: "words total", icon: Type, value: (s) => formatNumber(s.totalWords) },
+  { label: "w/sec avg", icon: Gauge, value: (s) => s.avgWordsPerSecond.toFixed(1) },
+  { label: "transcriptions", icon: Mic, value: (s) => formatNumber(s.totalTranscripts) },
+  { label: "time saved", icon: Clock, value: (s) => formatMinutes(s.timeSavedMinutes) },
+];
+
+export default statCards;
diff --git a/src/dashboard/stats/stat-placeholders.ts b/src/dashboard/stats/stat-placeholders.ts
deleted file mode 100644
index 75134cf..0000000
--- a/src/dashboard/stats/stat-placeholders.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-const statPlaceholders = [
-  { value: "\u2014", label: "words total" },
-  { value: "\u2014", label: "w/sec avg" },
-  { value: "\u2014", label: "transcriptions" },
-  { value: "\u2014", label: "time saved" },
-];
-
-export default statPlaceholders;
diff --git a/src/dashboard/stats/stats-row.tsx b/src/dashboard/stats/stats-row.tsx
index 9c7b78a..92876dd 100644
--- a/src/dashboard/stats/stats-row.tsx
+++ b/src/dashboard/stats/stats-row.tsx
@@ -2,9 +2,7 @@ import { useEffect, useState } from "react";
 import Card from "../../shared/components/card";
 import { getTranscriptStats } from "../../shared/lib/tauri-commands";
 import type { TranscriptStats } from "../../shared/types/transcript";
-import formatNumber from "../../shared/lib/utils/format-number";
-import formatMinutes from "../../shared/lib/utils/format-minutes";
-import statPlaceholders from "./stat-placeholders";
+import statCards from "./stat-cards";
 
 export default function StatsRow() {
   const [stats, setStats] = useState<TranscriptStats | null>(null);
@@ -13,23 +11,17 @@ export default function StatsRow() {
     getTranscriptStats().then(setStats).catch(console.error);
   }, []);
 
-  const items = stats
-    ? [
-        { value: formatNumber(stats.totalWords), label: "words total" },
-        { value: `${stats.avgWordsPerSecond.toFixed(1)}`, label: "w/sec avg" },
-        { value: formatNumber(stats.totalTranscripts), label: "transcriptions" },
-        { value: formatMinutes(stats.timeSavedMinutes), label: "time saved" },
-      ]
-    : statPlaceholders;
-
   return (
-    <div className="grid grid-cols-4 gap-4 mb-8">
-      {items.map((stat) => (
-        <Card key={stat.label} className="px-5 py-4">
-          <div className="text-2xl font-bold text-text-primary tabular-nums">
-            {stat.value}
+    <div className="grid grid-cols-4 gap-4 mb-10">
+      {statCards.map(({ label, icon: Icon, value }) => (
+        <Card key={label} className="p-5">
+          <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-accent-subtle text-accent mb-3.5">
+            <Icon size={18} strokeWidth={2} />
+          </div>
+          <div className="text-[28px] leading-none font-bold tabular-nums tracking-[-0.02em] text-text-primary">
+            {stats ? value(stats) : "—"}
           </div>
-          <div className="text-xs text-text-secondary mt-1">{stat.label}</div>
+          <div className="text-xs text-text-secondary mt-1.5">{label}</div>
         </Card>
       ))}
     </div>
diff --git a/src/index.css b/src/index.css
index 492b269..d0206e2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,11 +17,6 @@
   --color-recording: #ef4444;
   --color-border: #e5e5e0;
 
-  /* macOS window-control colors (was hardcoded in the sidebar). */
-  --color-mac-close: #ff5f57;
-  --color-mac-min: #febc2e;
-  --color-mac-max: #28c840;
-
   /* Elevation scale — each pairs a hairline ring with a soft shadow so cards
      and overlays blend on any background instead of showing a harsh border.
      Maps to `shadow-card` / `shadow-popover` / `shadow-overlay` utilities. */
@@ -131,9 +126,9 @@
 
   #root[data-window="main"] {
     background-color: var(--color-bg-primary);
-    border-radius: 12px;
+    /* Native window chrome (decorations + Overlay titlebar) draws the frame,
+       corners and shadow now — no custom border/radius needed. */
     overflow: hidden;
-    border: 1px solid var(--color-border);
   }
 
   /* Scrollbar styling */
diff --git a/src/layout/main-layout.tsx b/src/layout/main-layout.tsx
index 0e6eeaa..b22736d 100644
--- a/src/layout/main-layout.tsx
+++ b/src/layout/main-layout.tsx
@@ -5,7 +5,7 @@ export default function MainLayout() {
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar />
-      <main data-tauri-drag-region className="flex-1 overflow-y-auto px-8 py-6">
+      <main data-tauri-drag-region className="flex-1 overflow-y-auto px-10 py-8">
         <Outlet />
       </main>
     </div>
diff --git a/src/layout/sidebar.tsx b/src/layout/sidebar.tsx
index e88095c..6e9c401 100644
--- a/src/layout/sidebar.tsx
+++ b/src/layout/sidebar.tsx
@@ -1,5 +1,4 @@
 import { NavLink } from "react-router-dom";
-import { getCurrentWindow } from "@tauri-apps/api/window";
 import { open } from "@tauri-apps/plugin-shell";
 import cn from "../shared/lib/utils/cn";
 import Button from "../shared/components/button/button";
@@ -12,24 +11,12 @@ export default function Sidebar() {
 
   return (
     <aside className="w-[172px] min-w-[172px] h-full bg-bg-secondary border-r border-border flex flex-col">
+      {/* Left padding reserves room for the native macOS traffic lights,
+          which the Overlay titlebar floats over this corner. */}
       <div
         data-tauri-drag-region
-        className="flex items-center gap-2.5 px-4 h-11 shrink-0 border-b border-border"
+        className="flex items-center pl-[78px] pr-4 h-11 shrink-0 border-b border-border"
       >
-        <div className="flex items-center gap-1.5">
-          <button
-            type="button"
-            aria-label="Close window"
-            onClick={() => getCurrentWindow().close()}
-            className="w-3 h-3 rounded-full bg-mac-close transition-[filter] duration-150 hover:brightness-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-          />
-          <button
-            type="button"
-            aria-label="Minimize window"
-            onClick={() => getCurrentWindow().minimize()}
-            className="w-3 h-3 rounded-full bg-mac-min transition-[filter] duration-150 hover:brightness-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-          />
-        </div>
         <span
           data-tauri-drag-region
           className="text-[13px] font-medium text-text-secondary"
diff --git a/src/profiles/profiles-page.tsx b/src/profiles/profiles-page.tsx
index 6a487d8..856f17e 100644
--- a/src/profiles/profiles-page.tsx
+++ b/src/profiles/profiles-page.tsx
@@ -92,7 +92,7 @@ export default function ProfilesPage() {
   }
 
   return (
-    <div className="flex h-full -mx-8 -my-6">
+    <div className="flex h-full -mx-10 -my-8">
       <ProfileList
         profiles={profiles}
         selectedId={selectedId}
diff --git a/src/settings/about/about-section.tsx b/src/settings/about/about-section.tsx
index 9c2ad46..ee9c7d9 100644
--- a/src/settings/about/about-section.tsx
+++ b/src/settings/about/about-section.tsx
@@ -7,7 +7,7 @@ import appVersion from "../../shared/constants/app-version";
 export default function AboutSection() {
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">About</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">About</h2>
       <Card className="divide-y divide-border">
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Version</span>
diff --git a/src/settings/data/data-section.tsx b/src/settings/data/data-section.tsx
index bdcde17..3515178 100644
--- a/src/settings/data/data-section.tsx
+++ b/src/settings/data/data-section.tsx
@@ -54,7 +54,7 @@ export default function DataSection() {
 
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">Data</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">Data</h2>
       <Card className="divide-y divide-border">
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Transcript retention</span>
diff --git a/src/settings/debug-section.tsx b/src/settings/debug-section.tsx
index 92ebd88..89e0cd2 100644
--- a/src/settings/debug-section.tsx
+++ b/src/settings/debug-section.tsx
@@ -11,7 +11,7 @@ export default function DebugSection() {
 
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">Debugging</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">Debugging</h2>
       <Card className="divide-y divide-border">
         <div className="flex items-center justify-between px-5 py-4">
           <div>
diff --git a/src/settings/general/general-section.tsx b/src/settings/general/general-section.tsx
index 3991ac8..3bd004e 100644
--- a/src/settings/general/general-section.tsx
+++ b/src/settings/general/general-section.tsx
@@ -43,7 +43,7 @@ export default function GeneralSection() {
 
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">General</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">General</h2>
       <Card className="divide-y divide-border">
         <div className="flex items-center justify-between px-5 py-4">
           <div>
@@ -71,6 +71,7 @@ export default function GeneralSection() {
             </div>
           </div>
           <Toggle
+            ariaLabel="Copy to clipboard"
             checked={copyToClipboard}
             onChange={handleToggleCopyToClipboard}
           />
@@ -78,6 +79,7 @@ export default function GeneralSection() {
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Launch at startup</span>
           <Toggle
+            ariaLabel="Launch at startup"
             checked={launchAtStartup}
             onChange={handleToggleStartup}
           />
diff --git a/src/settings/llm/llm-section.tsx b/src/settings/llm/llm-section.tsx
index 9ec4ba9..0e604d6 100644
--- a/src/settings/llm/llm-section.tsx
+++ b/src/settings/llm/llm-section.tsx
@@ -45,7 +45,7 @@ export default function LlmSection() {
 
   return (
     <section className="mb-8 space-y-4">
-      <h2 className="text-base font-semibold">LLM Refactoring</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em]">LLM Refactoring</h2>
 
       <LlmLocalSettings loadedId={loadedId} onModelLoaded={handleModelLoaded} />
 
diff --git a/src/settings/settings-page.tsx b/src/settings/settings-page.tsx
index 3c8dd27..8d4522f 100644
--- a/src/settings/settings-page.tsx
+++ b/src/settings/settings-page.tsx
@@ -1,3 +1,4 @@
+import PageHeader from "../shared/components/page-header";
 import GeneralSection from "./general/general-section";
 import SpeechSection from "./speech/speech-section";
 import LlmSection from "./llm/llm-section";
@@ -9,7 +10,10 @@ import DebugSection from "./debug-section";
 export default function SettingsPage() {
   return (
     <div className="max-w-2xl">
-      <h1 className="text-2xl font-bold mb-6">Settings</h1>
+      <PageHeader
+        title="Settings"
+        description="Configure dictation, models, and the widget."
+      />
       <GeneralSection />
       <SpeechSection />
       <LlmSection />
diff --git a/src/settings/speech/speech-section.tsx b/src/settings/speech/speech-section.tsx
index 95686ac..5a76c24 100644
--- a/src/settings/speech/speech-section.tsx
+++ b/src/settings/speech/speech-section.tsx
@@ -87,7 +87,7 @@ export default function SpeechSection() {
 
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">Speech Recognition</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">Speech Recognition</h2>
 
       <div className="space-y-3">
         <Card className="divide-y divide-border">
diff --git a/src/settings/widget/widget-section.tsx b/src/settings/widget/widget-section.tsx
index a43cea0..0128aca 100644
--- a/src/settings/widget/widget-section.tsx
+++ b/src/settings/widget/widget-section.tsx
@@ -28,11 +28,12 @@ export default function WidgetSection() {
 
   return (
     <section className="mb-8">
-      <h2 className="text-base font-semibold mb-3">Widget</h2>
+      <h2 className="text-[15px] font-semibold tracking-[-0.01em] mb-3">Widget</h2>
       <Card className="divide-y divide-border">
         <div className="flex items-center justify-between px-5 py-4">
           <span className="text-sm">Show widget</span>
           <Toggle
+            ariaLabel="Show widget"
             checked={visible}
             onChange={(v) => {
               setVisible(v);
diff --git a/src/shared/components/modal-focusable-selector.ts b/src/shared/components/modal-focusable-selector.ts
index 6e7d222..84d9913 100644
--- a/src/shared/components/modal-focusable-selector.ts
+++ b/src/shared/components/modal-focusable-selector.ts
@@ -1,5 +1,6 @@
-// Tabbable elements inside the modal — used by the focus trap.
+// Tabbable elements inside the modal — used by the focus trap. Disabled form
+// controls can't receive focus, so they're excluded to keep the trap accurate.
 const modalFocusableSelector =
-  'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])';
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
 export default modalFocusableSelector;
diff --git a/src/shared/components/modal.tsx b/src/shared/components/modal.tsx
index b8ba302..a6bdb29 100644
--- a/src/shared/components/modal.tsx
+++ b/src/shared/components/modal.tsx
@@ -11,6 +11,12 @@ interface ModalProps {
 export default function Modal({ open, onClose, title, children }: ModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
 
+  // Keep the latest onClose without making it an effect dependency — otherwise
+  // a non-memoized onClose would re-run the effect on every render and bounce
+  // focus back to the trigger while the dialog is still open.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
   useEffect(() => {
     if (!open) return;
 
@@ -21,14 +27,19 @@ export default function Modal({ open, onClose, title, children }: ModalProps) {
     const { overflow } = document.body.style;
     document.body.style.overflow = "hidden";
 
-    // Move focus into the dialog.
+    // Move focus into the dialog: try the first focusable control, then fall
+    // back to the panel itself (tabIndex=-1) if that target wasn't focusable
+    // (e.g. hidden), so the trap always holds.
     const panel = panelRef.current;
     const focusables = panel?.querySelectorAll<HTMLElement>(FOCUSABLE);
-    (focusables?.[0] ?? panel)?.focus();
+    focusables?.[0]?.focus();
+    if (panel && !panel.contains(document.activeElement)) {
+      panel.focus();
+    }
 
     function handleKey(e: KeyboardEvent) {
       if (e.key === "Escape") {
-        onClose();
+        onCloseRef.current();
         return;
       }
       // Trap Tab within the dialog.
@@ -55,7 +66,7 @@ export default function Modal({ open, onClose, title, children }: ModalProps) {
       document.body.style.overflow = overflow;
       previouslyFocused?.focus();
     };
-  }, [open, onClose]);
+  }, [open]);
 
   if (!open) return null;
 
diff --git a/src/shared/components/page-header.tsx b/src/shared/components/page-header.tsx
new file mode 100644
index 0000000..7af0821
--- /dev/null
+++ b/src/shared/components/page-header.tsx
@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  /** Optional actions rendered on the right (buttons, selectors). */
+  actions?: ReactNode;
+}
+
+export default function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 mb-7">
+      <div>
+        <h1 className="text-[26px] leading-tight font-bold tracking-[-0.02em] text-text-primary">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-sm text-text-secondary mt-1">{description}</p>
+        )}
+      </div>
+      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+    </div>
+  );
+}
diff --git a/src/shared/components/toggle.tsx b/src/shared/components/toggle.tsx
index 505f12b..d7efa82 100644
--- a/src/shared/components/toggle.tsx
+++ b/src/shared/components/toggle.tsx
@@ -4,10 +4,12 @@ interface ToggleProps {
   checked: boolean;
   onChange: (checked: boolean) => void;
   label?: string;
+  /** Accessible name when the switch has no visible `label` (external label). */
+  ariaLabel?: string;
   disabled?: boolean;
 }
 
-export default function Toggle({ checked, onChange, label, disabled }: ToggleProps) {
+export default function Toggle({ checked, onChange, label, ariaLabel, disabled }: ToggleProps) {
   return (
     <label
       className={cn(
@@ -19,7 +21,7 @@ export default function Toggle({ checked, onChange, label, disabled }: TogglePro
         type="button"
         role="switch"
         aria-checked={checked}
-        aria-label={label}
+        aria-label={ariaLabel ?? label}
         disabled={disabled}
         onClick={() => onChange(!checked)}
         className={cn(
diff --git a/src/transcripts/transcripts-page.tsx b/src/transcripts/transcripts-page.tsx
index 80cdff8..b9c31dd 100644
--- a/src/transcripts/transcripts-page.tsx
+++ b/src/transcripts/transcripts-page.tsx
@@ -99,7 +99,7 @@ export default function TranscriptsPage() {
   };
 
   return (
-    <div className="flex h-full -mx-8 -my-6">
+    <div className="flex h-full -mx-10 -my-8">
       {/* Left panel */}
       <div className="w-[300px] min-w-[300px] border-r border-border flex flex-col">
         <TranscriptFilters
diff --git a/src/widget/hooks/use-fft-bars.ts b/src/widget/hooks/use-fft-bars.ts
index 1fd0c52..40bbdb9 100644
--- a/src/widget/hooks/use-fft-bars.ts
+++ b/src/widget/hooks/use-fft-bars.ts
@@ -3,15 +3,26 @@ import barCount from "../constants/bar-count";
 import lerp from "../lib/lerp";
 import seededRandom from "../lib/seeded-random";
 
-export default function useFftBars(rms: number): number[] {
-  const [bars, setBars] = useState<number[]>(() => new Array(barCount).fill(0));
-  const currentRef = useRef<number[]>(new Array(barCount).fill(0));
-  const targetRef = useRef<number[]>(new Array(barCount).fill(0));
+const zeros = () => new Array<number>(barCount).fill(0);
+
+/**
+ * Drives the FFT bar heights from the incoming RMS level.
+ *
+ * The animation loop only runs while `active` is true (i.e. recording). When
+ * idle the loop is torn down and the bars rest at zero — otherwise a 60fps
+ * `requestAnimationFrame` loop would re-render the always-mounted widget and
+ * allocate a fresh array every frame for the entire lifetime of the app.
+ */
+export default function useFftBars(rms: number, active: boolean): number[] {
+  const [bars, setBars] = useState<number[]>(zeros);
+  const currentRef = useRef<number[]>(zeros());
+  const targetRef = useRef<number[]>(zeros());
   const frameRef = useRef(0);
   const rafRef = useRef(0);
 
   // Update targets when rms changes — boost amplitude significantly
   useEffect(() => {
+    if (!active) return;
     frameRef.current += 1;
     const frame = frameRef.current;
     const boosted = Math.min(1, rms * 6);
@@ -19,10 +30,18 @@ export default function useFftBars(rms: number): number[] {
       const variation = 0.3 + seededRandom(i, frame) * 0.7;
       targetRef.current[i] = boosted * variation;
     }
-  }, [rms]);
+  }, [rms, active]);
 
-  // Animation loop
+  // Animation loop — only while active.
   useEffect(() => {
+    if (!active) {
+      // Reset to rest and stop animating; nothing to draw while idle.
+      currentRef.current = zeros();
+      targetRef.current = zeros();
+      setBars(zeros());
+      return;
+    }
+
     let running = true;
 
     function animate() {
@@ -45,7 +64,7 @@ export default function useFftBars(rms: number): number[] {
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, []);
+  }, [active]);
 
   return bars;
 }
diff --git a/src/widget/widget-app.tsx b/src/widget/widget-app.tsx
index bf4bd05..8045e50 100644
--- a/src/widget/widget-app.tsx
+++ b/src/widget/widget-app.tsx
@@ -34,7 +34,8 @@ function Widget() {
   const stateRef = useRef<WidgetState>("model-loading");
   stateRef.current = state;
 
-  const bars = useFftBars(state === "recording" ? audioLevel : 0);
+  const isRecording = state === "recording";
+  const bars = useFftBars(isRecording ? audioLevel : 0, isRecording);
 
   const isActive =
     state === "recording" ||