Components › Overlays & dialogs › Dialog › Note dialog

Note dialog

canon

The note detail: a document-class form-less dialog with autosave. One chip row under the title: Link (RecordLinksChip, avatars + „+N“) · Dictate (voice → text, audio discarded) · Magic (AI rewrite, undo) · Add audio (file or Plaud kept below the text with player and transcript; the AI summary becomes note text).

Voice approved by the product owner 16–17 Sep 2026 (proto/poznamka-audio). Dictate: acrm !3807/!3808. Add audio + recordings on notes: !3891 (mig. 0414), !3892 (dialog), !3893 (project recordings migrated into notes, mig. 0415). E2E on dev 26 Sep 2026 with real Czech speech: dictation → text, upload → transcript 3 s → summary 27 s written into the body once, 390 px sheet. No Ladle stories: the pattern lives in apps/web, which packages/ui must not import (same as formless-dialog). Updated 27 Sep 2026: „Přidat audio“ = Menu button with a MetaChip trigger (acrm !3919), sources from recording-sources.ts (Plaud · file); „Magic“ AI rewrite chip with glyph sparkles-2, undo = history, both voice/AI chips share ChipMorph (idle slot .chip-morph-hit, one transition constant, ds/chip-morph.css — acrm !3902); links move to RecordLinksChip (follow-up MR, owner approved 27 Sep). NoteAudioMenu/NoteMetaRow listed above are superseded by those. Verified on dev 27 Sep 2026 (acrm !3944 + !3919 + Magic, Playwright): desktop 1440 — Link · Dictate · Magic · Add audio, all 28 px, radius 8 px, 600/12 px, gap 4 px, one line; phone 390 (touch) — same chips, wrap after Magic with 4 px row gap; old .eref-chip/.add-ref pills in the row: 0; Magic → „Undo“ keeps 28 px. Phone overlays (27 Sep 2026, verified on dev by touch at 390 px, 25/25): the Link picker (RecordSelect) and Add audio (MenuButton) open as a BottomSheet — grab handle, title, full-width Done = <Button touch> 44 px, tap-to-close backdrop, portalled into the dialog scrim so taps do not fall through (acrm !4009 + !4028). Desktop unchanged (anchored panel / popover). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .nd-rec-layer, .nd-rec-hit. Registry repaired 17 Oct 2026 (review F4/F11): attached css chip-morph.css.

Used in 6 files · 5 areas · 7× — components/deal, components/meetings, components/notes, components/tasks, components/timeline

apps/web <NoteDialog> <NoteMetaRow> <NoteRecChip> <NoteLevelMeter> <NoteAudioMenu> <NoteRecordings> <RecordLinksChip> <ChipMorph>.acrm-dialog.note .nd-meta .nd-rec-chip .nd-rec-live +12SourceStoryLegacy card note-dialog.html
ExamplesCodeUsageAccessibilityChangelog

Everything in dialog.a11y.md and formless-dialog.a11y.md holds (Escape order, focus trap, inert background, scroll lock, chip row). This page covers what the note and its voice input add.

Keyboard

  • Escape closes the window after flushing the autosave; there is no unsaved state to confirm.
  • Chips are buttons: Tab reaches Diktovat and Přidat audio after the link chips; Enter/Space activates them. While recording, the widened chip exposes pause/resume and Hotovo — přepsat as separate buttons.
  • Přidat audio with Plaud opens a menu: arrow keys move over Nahrát soubor / Z Plaudu, Enter picks, Escape closes the menu only.
  • Recording items: the native <audio controls> is keyboard operable; the transcript summary toggles with Enter/Space; Odebrat audio is an icon button with a confirmation dialog.

ARIA

  • The recordings block has aria-label Nahrávky poznámky; each remove button has aria-label Odebrat audio (icon only).
  • The dictation chip is labelled Diktovat; while recording it holds separate icon buttons with aria-label Pozastavit / Pokračovat and Hotovo — přepsat. The red dot and the level meter are decorative (aria-hidden); the leaving layer of the morph is aria-hidden and inert.
  • The Add audio menu is a Popover with role="menuitem" items and aria-label Přidat audio; the file input is hidden and triggered from the chip.
  • The save state in the header is a role="status" region: a screen reader hears the change in words (Ukládá se, Uloženo, Chyba, Konflikt).

Focus

  • Opening a new note focuses the body editor; opening an existing note leaves it in reading mode, and a click or the + menu moves focus into the editor.
  • Dictated text and the merged summary are appended without moving focus or the caret.
  • The Plaud picker is its own dialog; closing it returns focus to the chip row.

Contrast

  • Recording meta and stages use --fg-secondary / .acrm-muted on --surface-100; the live dictation dot is --critical and is always accompanied by the running clock, so the state is not colour-only.
  • The hairline above the recordings is --border; it separates, it does not carry meaning.

Known limits

  • Processing stages update by polling (every 2 s while something is processing); the change is not announced by a live region.
  • The transcript is plain text without speaker turns (meeting recordings have the dialogue view; note recordings are single-speaker dictaphone takes).
  • Microphone permission denial is reported by a toast; there is no in-dialog retry prompt.

Source: docs/dialog/note-dialog.a11y.md · GitLab