Skip to content

Add Tag Editing UI to the Note Editor #15

@TheZupZup

Description

@TheZupZup

Overview

Context: Tags are fully supported in the backend. The Note model has a tags: List[str] field, the PUT /notes/{id} endpoint accepts tags, and the Flutter Note model in api_client.dart also has a tags field. The _NoteCard widget in notes_list.dart already displays up to 2 tags as chips on each card.

The gap: There is currently no way to add or remove tags from inside the app. Tags can only be set programmatically. This issue adds the missing UI.

What needs to be done

  • In NoteEditorScreen (note_editor_screen.dart), add a tag input row below the title field (visible in both Text and Draw modes)
  • Display existing tags as small dismissible chips — tapping the ✕ on a chip removes that tag
  • Add an inline text input (or small + button that opens a text field) to type and add a new tag — pressing Enter or tapping "Add" confirms it
  • When a tag is added or removed, call AppState.updateNoteTitle() — or better, add an updateNoteTags(noteId, tags) method to AppState that calls PUT /notes/{id} with the updated tags list
  • Persist tag changes using the same debounce/auto-save pattern already used for the note content (2-second debounce timer in _NoteEditorScreenState)

Goal

A user can open any note, see its current tags displayed as chips below the title, tap ✕ to remove one, and type a new tag to add it — with changes saved automatically within 2 seconds.

Where to look

  • app/lib/screens/note_editor_screen.dart — add the tag row here
  • app/lib/services/app_state.dart — add updateNoteTags() (mirrors updateNoteTitle() but sends tags)
  • app/lib/services/api_client.dartupdateNote(id, tags: tags) already accepts tags
  • app/lib/widgets/notes_list.dart — reference for how tags are already rendered as chips

Testing steps

  • Open a note with no tags — verify the tag row is empty and an "Add tag" input is visible
  • Add a tag — verify it appears as a chip immediately and is saved to the backend
  • Remove a tag — verify the chip disappears and the change persists after reopening the note
  • Open a note that already has tags (set via API) — verify they appear correctly
  • Add more than 5 tags — verify the UI doesn't overflow

Related to: #8, #13

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions