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 +12Source Story Legacy card note-dialog.html

Examples Code Usage Accessibility Changelog

Import

Not exported from @acrm/ui — <NoteDialog>, <NoteMetaRow>, <NoteRecChip>, <NoteLevelMeter>, <NoteAudioMenu>, <NoteRecordings>, <RecordLinksChip>, <ChipMorph> lives in the app (apps/web/src/components/notes/NoteDialog.tsx). Reuse the CSS classes below, or move the component into the package first.