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

On-screen options popover

Linear: AUT-130

Tray popover that controls what shows during recording — desktop cleanup, keypress overlay, sensitive-info auto-blur. Composes UI-03 PopoverSurface + UI-04 ToggleSwitch. Three options today; more can land by extending OnScreenOptionKind.

States

StateStory
Default — some onon-screen-options-default
All toggles onon-screen-options-all-on
Blur Sensitive disabled (feature pending)on-screen-options-sensitive-disabled
Long copy wraps cleanlyon-screen-options-long-copy

API

#![allow(unused)]
fn main() {
use ui_storybook::components::{
    OnScreenOptionsPopover, OnScreenOptionKind, OnScreenOptionView,
};
use ui_storybook::fixtures::recorder::sample_on_screen_options;

view! {
    <OnScreenOptionsPopover
        options=sample_on_screen_options(false)
        // optional — defaults to "Applies to this recording".
        applies_label="Applies to all recordings"
    />
}
}

OnScreenOptionKind

A stable enum so parents can pattern-match on a row instead of string-comparing:

  • CleanDesktop — hide desktop icons + dock
  • ShowKeys — render keypress badges over the recording
  • BlurSensitiveInfo — auto-detect + blur sensitive regions

Disabled is per-row, not all-or-nothing

OnScreenOptionView::disabled lets the parent dim individual rows while a feature is still pending. BlurSensitiveInfo ships disabled today because the runtime detection isn't wired yet — the parent can set disabled = false once the backend lands and the row turns on.

Composition

flowchart TD
    Popover[OnScreenOptionsPopover] --> Surface[PopoverSurface · title + description]
    Surface --> List[ul.on-screen-options]
    List --> Row[OnScreenOptionView × N]
    Row --> Toggle[ToggleSwitch]
    Row --> Text[title + description]
    Surface --> Footer[MenuFooter · applies_label + Done button]