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

The note's own detail — the one place a note is written, read and extended with voice. A document-class form-less dialog (formless-dialog, shape A): no primary button, text autosaves while typing, and the header shows the save state. Code: apps/web/src/components/notes/NoteDialog.tsx (shell, autosave), NoteMetaRow.tsx (links), NoteDictation.tsx + use-dictation.ts (Dictate), NoteAudio.tsx (Add audio, recordings), ds/note-dialog.css.

Voice was approved by the product owner on 16–17 September 2026 (prototype proto/poznamka-audio, :3777/preview/poznamka-audio-diktat.html) as two gestures, not one menu:

  • Dictate — voice becomes text; the audio is thrown away (acrm !3807, !3808).
  • Add audio — a file or a Plaud recording stays attached to the note: player and transcript below the text, and the AI summary is written into the note body when it is ready (acrm !3891 and follow-ups, migrations 0414/0415). Recordings that used to hang on a project became notes linked to the project.

When to use

  • Writing, reading or editing any note — from a person, company, deal or project card, the Notes tab, the timeline or a permalink. There is no second note editor.
  • Capturing a spoken thought quickly (Dictate) or keeping a meeting recording with its summary next to the notes about it (Add audio).

When not to use

  • A meeting recording that belongs to a calendar meeting — it goes to the meeting (minutes, speakers, dialogue view), not to a note.
  • A quick one-line note on a card — the inline composer (note-card family) writes it without a window; the dialog opens only when the note grows.
  • A form that must be confirmed with a primary button — that is the commit class of the dialog, not a document.

Anatomy

  • Shell — flexi <Dialog size="l"> with the document body (bodyClass="doc"); window states (compact, minimised to the dock) are owned by the host, like the mail compose window.
  • Header — lead entity (LeadEntity: the record the note hangs on) and the save state icon (Ukládá se · Uloženo · Chyba · Konflikt). No actions in the header.
  • Title — auto-growing textarea.fl-title.
  • Chip row .flc.nd-meta — in this order:
  • author (locked MetaChip), only on someone else's note;
  • links (NoteMetaRow: people, companies, deals, projects — many of each);
  • Diktovat (NoteRecChip): one canonical .tk-chip that widens while recording into the live bar — red dot, clock, level meter .nd-level, pause/resume and Hotovo — přepsat. The text is appended to the end of the body as a new paragraph.
  • Přidat audio (NoteAudioMenu, icon upload): without Plaud configured it opens the file picker straight away; with Plaud it opens a menu Nahrát soubor · Z Plaudu (the Plaud picker is the meeting's PlaudPickerDialog in pick-only mode). Hidden on someone else's note.
  • Body — the note editor (Markdown: headings, lists, quote, code); an existing note opens in reading mode and a click switches to editing.
  • Recordings .nd-audio — below the body, separated by a hairline, only when the note has a recording or one is being added. Each item reuses the recording row of the project detail 1:1: .prj-rec (microphone, name, muted meta m:ss · Soubor|Plaud · stage, remove IconButton x), <audio class="prj-rec-audio" controls> shown as soon as the file is stored, transcript collapsed in details.prj-rec-fold once done. Stages: Nahrávám… · Přepisuji… · Shrnuji… · Přepis se nepovedl · Souhrn se nepovedl.
  • Summary — not shown in the recording block: it becomes the note text (## Souhrn nahrávky, purpose, summary, Témata, Rozhodnutí, Otevřené otázky). The server writes it once, in the same transaction as the done state; an open dialog merges it into what is being typed. Tasks from the recording go to task suggestions, personal to the note's author.
  • Footer — + menu (block types) on the left, kebab ⋮ (Smazat) on the right; no primary button.

Best practices

Do
  • Let a new note be created by the first gesture that needs it: typing, a link, or adding audio (an empty new note is saved with the file name as its title).
  • Keep both voice gestures in the chip row — content input sits next to the properties, the footer carries only actions on the document.
  • Reuse the recording row, player and transcript fold as they are; the note does not get its own visual language for a recording.
  • Poll the recording list only while something is processing; don't ask the server about Plaud or recordings until the user shows intent.
Don’t
  • Don't put the summary in a second panel next to the text — it is the text.
  • Don't write the summary again after regenerating it; the user may have edited the first one.
  • Don't let dictated text replace what was typed; it is always appended.
  • Don't offer Add audio or remove on someone else's note — it is read there.

Content

  • Chip labels: Diktovat, Přidat audio; menu items Nahrát soubor, Z Plaudu.
  • Confirmation before removing a recording: Odebrat nahrávku? Souhrn v textu poznámky zůstane.
  • Errors are toasts in one sentence (Nahrávku se nepodařilo nahrát.); dictation that heard nothing says Nerozuměl jsem — zkuste to prosím znovu. and inserts nothing.
  • No explanatory text inside the dialog.
  • formless-dialog — the shape and the chip row.
  • dialog — shell, window states, dock.
  • note-card — the card and the inline composer that open this dialog.
  • entity-reference — the lead entity and link chips.

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