Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

System audio picker

Linear: AUT-129

Tray-popover section for picking which apps' audio joins the recording. Two components: a collapsed row (selected count + overlapping app-icon stack + toggle) and an expanded list (filter chips + per-app rows with selection checkbox, Suggested badge, LIVE pulse, and meter).

States

StateStory
Collapsed (some selected)system-audio-collapsed
Expanded with Suggested filtersystem-audio-expanded
Expanded — None selectedsystem-audio-none-selected
Expanded — All selectedsystem-audio-all-selected
Single live rowaudio-app-row-live
Single idle rowaudio-app-row-muted

API

#![allow(unused)]
fn main() {
use ui_storybook::components::{
    SystemAudioRow, SystemAudioAppList, AudioFilter,
};

// Collapsed row.
view! { <SystemAudioRow view=sample_system_audio_view(true, false, &selected, total) /> }

// Expanded list.
view! { <SystemAudioAppList apps=sample_audio_apps() active_filter=AudioFilter::Suggested /> }
}

```admonish important title="active_filter is cosmetic only" The filter chip just highlights "All", "None", or "Suggested". The component does NOT change apps.selected — the parent already applied the filter to the apps slice it passes in. Clicking a chip in production fires on_filter_select(AudioFilter) and the parent recomputes selection.


## Helpers

- `format_selection_count(selected: usize, total: usize) -> String`
  → `"4 of 7 apps"` (plural) / `"1 of 1 app"` (singular). 5 unit tests.
- `ICON_STACK_MAX: usize = 3` — overflow tips to a `+N` pill above
  that count. Tested.

## Composition

```mermaid
flowchart TD
    Row[SystemAudioRow] --> Stack[icon stack — first 3 + overflow pill]
    Row --> Count[selected_count / total_count]
    Row --> Toggle[ToggleSwitch]
    Row --> Chevron[chevron expand]
    List[SystemAudioAppList] --> Filters[filter chips — All / None / Suggested]
    List --> Rows[AudioAppView × N]
    Rows --> Check[checkbox]
    Rows --> Icon[app icon tile]
    Rows --> Text[name + context]
    Rows --> Suggested[Suggested badge?]
    Rows --> Live[LIVE pulse + label?]
    Rows --> Meter[Meter · 8-bar?]

Composition uses UI-01 Badge, UI-04 Meter, UI-04 ToggleSwitch — no new primitives.