Skip to content

UI Guide

Jump to bottom
igor-c-assuncao edited this page Jun 20, 2026 · 2 revisions

UI Guide

Themes

The app ships with two themes, switchable in Settings:

Theme CSS class Description
Liquid Glass (default) data-theme="liquid-glass" Dark, frosted glass, always-on-top pill
Minimalist Notebook data-theme="minimalist-notebook" Light, paper texture, serif font

Transparency is controlled by --bg-app (rgba) and --blur (backdrop-filter) CSS variables. Increasing the alpha value makes the widget more opaque; increasing the blur radius makes it more frosted.

Compact widget

The default mode — a small floating pill that lives on top of all other windows.

┌─────────────────────────────────────────────────┐
│  ● ○ ○  [Logo] Ai NoteTaking          ⚙  ●  ↗  │  ← OS strip (drag region)
│  ·  ████████████████░░░░  00:00            │  ← pill content
└─────────────────────────────────────────────────┘
  • OS strip (top bar): traffic lights (macOS) or caption buttons (Windows). The entire strip is a drag region — click and drag anywhere on it to move the window.
  • Status dot: red pulsing = recording, green = idle.
  • Waveform: animated when recording, static when idle.
  • Timer: MM:SS elapsed recording time.
  • Gear (⚙): opens the settings popover.
  • Record button: pulsing scale animation driven by live RMS level.
  • Expand (↗): switches to expanded view.

Drag region

The compact widget uses Tauri's data-tauri-drag-region attribute on the OS strip. The drag region elements use user-select: none (not pointer-events: none, which would block the drag listeners).

Settings popover

A separate frameless OS window opened by Rust (WebviewWindowBuilder, label "popover"), positioned above the compact widget. Falls back to opening below if the widget is near the top of the screen.

Sections (top to bottom)

  1. Drag handle — 20px invisible strip for moving the popover.
  2. Input device — dropdown populated from LIST_DEVICES Python event.
  3. Level meter — thin bar animated by VAD_TELEMETRY events.
  4. Provider — Ollama / OpenAI / Gemini / Anthropic.
  5. Model — grouped dropdown with common models + Custom input.
  6. Language — WhisperX locale or Auto detect.
  7. API Key — shown for cloud providers only.
  8. Behavior toggles: System audio capture · Auto-summarize · Speaker diarization · Always on top · Notebook theme.
  9. HF Token — shown when Speaker diarization is enabled.
  10. Footer: Preferences… · Shortcuts · Save.

Secret fields are saved through Rust keychain commands, not in plain settings.json. The Rust IPC logger redacts api_key and hf_token before printing command payloads.

Sidecar status banners

The popover listens for supervisor events and displays recoverable sidecar states:

State UI behavior
down Warning banner; Python process is unavailable
restarting Informational banner with restart attempt
failed Error banner with a reconnect button calling reconnect_sidecar

Popover window routing

App.tsx exports a Root component that checks getCurrentWindow().label:

function Root() {
  const isPopover = getCurrentWindow().label === "popover";
  if (isPopover) return <PopoverWindowContent />;
  return <App />;
}

Settings are saved to settings.json via tauri-plugin-store and broadcast to the main window via emit("settings-changed", payload).

Expanded view

Full-size window (1024×720) with sidebar + main content area.

Sidebar

  • Search box — FTS5 full-text search across all meetings (300ms debounce).
  • Current session card — shown when no search query is active.
  • Meeting history — list ordered newest first. Each card shows title, date, and up to 2 tags.

Meeting header

  • Title + participant avatar cluster (when diarization was used).
  • Status line (recording timer or pipeline step).
  • Tag row — auto-generated tags from LLM + manual tags via inline input.
  • Record button — disabled when viewing a past meeting.

Tabs

Tab Content
Transcript Diarized: TranscriptLine components (avatar, speaker, timestamp, text). Plain: <pre> block.
Summary Structured summary dashboard when structured_summary is available; otherwise markdown fallback.
Action Items Rich cards with checkbox (toggles strikethrough), assignee badge, due date badge.

Structured summary dashboard

SummaryDashboard renders schema v2 summaries:

  • TL;DR and generated tags;
  • metrics cards;
  • key decisions with rationale/owner;
  • action items with assignee, status, priority, and due date;
  • evidence links back to transcript segments.

If the Python engine had to repair an invalid local-LLM response, the structured payload may include summary_generation_warning. The dashboard still renders the transcript-derived fallback summary instead of showing a hard failure.

Keyboard shortcuts (Sprint 9)

Shortcut Action
Cmd/Ctrl + Shift + R Toggle recording
Cmd/Ctrl + Shift + P Pause / Resume
Cmd/Ctrl + Shift + E Expand / Collapse
Cmd/Ctrl + Shift + , Open settings

Window management (Rust)

Command Effect
set_compact_mode 400×120px, no decorations, always on top, not resizable
set_expanded_mode 1024×720px, no decorations, resizable, centered
open_popover_window Opens or closes (toggle) the 300×480px frameless popover
close_popover_window Closes the popover if open
reconnect_sidecar Manually restarts the Python sidecar after supervisor failure

Clone this wiki locally