WordloopNote Components
Domain execution constraints, capabilities, and test cases.
Note Components
Owner: App Engineer Domain: app Complexity: M Prerequisite: Milestone 01 merged
This vertical slice delivers the shared UI components required for full note CRUD, tag management, and context linking across the application, fulfilling Milestone 03 Reusable Note Components. When complete, users can create, edit, delete, and search notes from the global /notes listing, the meeting detail page, and the people detail page, using a consistent rich text composer, card display, and context link picker.
Required Capabilities
- Render a shared
NoteListcomponent supporting loading, empty, and error states. - Render a shared
NoteCardcomponent extracting and displaying title, excerpt, tags, context badge (meeting/person), and timestamp. - Provide a shared
NoteComposercomponent with rich text editing, markdown shortcuts, and preview toggle. - Enable note creation across
/notes, meeting detail, and people detail pages using theNoteComposer. - Pre-fill context links automatically when creating notes from meeting detail (linked to meeting) or people detail (linked to person).
- Provide inline or modal editing of existing notes using the shared
NoteComposer. - Delete notes with a standard confirmation dialog.
- Render a
NoteSearchcomponent allowing text-based search of note contents and tags. - Render a
TagPickercomponent for adding, removing, and filtering notes by tags. - Render a
ContextLinkPickerallowing users to manually link/unlink a note to/from a person or meeting. - Display meeting-scoped notes on the meeting detail page (filtered to that meeting).
- Display person-scoped notes on the people detail page (filtered to that person).
Dependencies
- Core Note API endpoints must be available.
- Milestone 01 merged.
Domain Notes
UI States
| State | Trigger | What the user sees |
|---|---|---|
| Loading | Fetching notes list | Skeleton loaders matching the NoteCard layout |
| Empty (Global) | No notes exist on /notes | Empty state illustration with "Create your first note" call to action |
| Empty (Context) | No notes for specific meeting/person | Empty state illustration with "Add a note to this meeting" or person |
| Composer (Create) | User clicks "New Note" | Empty rich text editor, context pre-filled if on a detail page |
| Composer (Edit) | User clicks edit on NoteCard | Editor pre-filled with note content, tags, and context links |
| Delete Confirmation | User clicks delete on NoteCard | Standard destructive confirmation dialog |
| Search Active | User enters text in NoteSearch | NoteList updates dynamically, showing filtered results |
| Filter Active | User selects a tag in TagPicker | NoteList updates to show only notes matching the tag |
Test Cases
| Test | Location | Assertion |
|---|---|---|
| Create standalone note | test_app | Renders composer, allows save, new note appears in global /notes list |
| Create meeting note | test_app | Renders composer on meeting detail, saves note, note appears in meeting notes list and is linked to meeting |
| Create person note | test_app | Renders composer on person detail, saves note, note appears in person notes list and is linked to person |
| Edit note | test_app | Updates note content via composer, changes reflect on note card immediately |
| Delete note | test_app | Shows confirmation, deletes note, removes from list |
| Search notes | test_app | Entering text in search filters note list to matching items |
| Filter by tag | test_app | Selecting a tag filters note list to items containing that tag |
| Context linking | test_app | Context link picker allows linking standalone note to a meeting and a person |
Completion Checklist
- Code merged and deployed
- Bet progress tests pass (
./dev test bet meeting-recording) - Permanent service tests implemented per testing strategy
- Code review completed
- Testing review completed
- System documentation updated (architecture, data flows, API reference, database reference, runbooks — as applicable)