🏠 Overview › 🧩 Components ›🧩 NotesListScreen

NotesListScreen

Component Detail

User Interface medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

The primary mobile screen for browsing all personal notes belonging to the authenticated user. It renders a scrollable list of note cards with a search bar at the top and routes to note detail or creation flows. Meets WCAG 2.2 AA contrast and minimum 44×44 pt touch targets throughout.

Feature: Notes List

notes-list-screen

Sources & reasoning

The priority matrix explicitly lists Notes as needed by all five organizations (all checkmarks), classified NICE, Phase 2. Phase 2 maps to v1.0 by the ordinal rule. The Notes List is the entry screen without which the Note Editor is unreachable, making it a prerequisite for the entire area.

Responsibilities

  • Render paginated list of user-scoped notes as tappable cards showing title, preview, and timestamp
  • Provide a search input that filters notes by keyword in real time via NotesService
  • Display empty-state illustration and prompt when no notes exist or no search results match
  • Navigate to note detail or note creation screen on user interaction
  • Accessible from the bottom-navigation Work tab and announce list updates to screen readers

Interfaces

render(): void
onSearchChange(query: string): void
onNotePress(noteId: string): void
onCreateNotePress(): void