Add Tag Suggestion Dropdown for Notes and Tasks

[RMCampos]

Description

Implement a tag suggestion feature that displays existing tags in a dropdown when users are adding notes or tasks. This will help users select from existing tags instead of typing everything manually, promoting tag consistency across the application.

Requirements

Functionality

• Display a dropdown showing all available tags when the tag input field is focused
• Filter tags in real-time as the user types
• Allow users to select a tag from the dropdown by clicking
• Allow users to type and create a new tag if it's not in the list
• Fetch existing tags from the API endpoint: ${ApiConfig.homeUrl}/tasks/tags
• Tags are returned as an array of strings, sorted alphabetically

Constraints

• Tasks and Notes can have only one tag
• The backend is already implemented and ready to receive tags
• No backend changes required
• No unit tests required for this feature

Technical Details

Files to modify:

• client/src/views/NoteAdd/index.tsx
• client/src/views/TaskAdd/index.tsx

API Integration:

• Endpoint: ${ApiConfig.homeUrl}/tasks/tags
• Response format: string[] (array of strings, alphabetically sorted)
• Reference: See Home view component for similar API call implementation

UI Framework:

• Bootstrap 5 (no custom components)
• Use Bootstrap dropdown or form components as appropriate

Implementation Suggestions

1. Fetch tags when the component mounts or when the input is focused
2. Store tags in component state
3. Implement filtering logic to match user input against available tags
4. Use Bootstrap's dropdown component to display filtered results
5. Handle tag selection from dropdown
6. Maintain ability to type custom tags not in the list

Acceptance Criteria

• Tag dropdown appears when input field is focused
• Dropdown displays all available tags initially
• Tags are filtered in real-time as user types
• User can select a tag by clicking from the dropdown
• User can still type and submit a custom tag not in the list
• Feature works consistently in both NoteAdd and TaskAdd views
• Selected tag is properly sent to the backend
• No console errors or warnings

Additional Notes

• The backend already supports this feature and requires no changes
• Focus on code reusability between NoteAdd and TaskAdd implementations

[RMCampos]

@claude look at this issue and implement it

[claude]

Claude finished @RMCampos's task in 2m 49s —— View job • claude/issue-11-20260210-2015 • Create PR ➔

---

Implementing Tag Suggestion Dropdown

• Gather context and understand the request
• Explore codebase (NoteAdd, TaskAdd, Home views, ApiConfig)
• Implement tag suggestion dropdown in NoteAdd/index.tsx
• Implement tag suggestion dropdown in TaskAdd/index.tsx
• Lint checks (skipped - npm commands require tool approval)
• Commit and push changes

Summary

Implemented the tag suggestion dropdown in both NoteAdd and TaskAdd views. Here's what was added to each file:

Changes in both client/src/views/NoteAdd/index.tsx and client/src/views/TaskAdd/index.tsx:

• Added useRef import and ListGroup, InputGroup from react-bootstrap, plus Hash icon from react-bootstrap-icons
• Added tags: string[] and showTagDropdown: boolean state, plus a tagContainerRef
• Added loadTags() that calls GET ${ApiConfig.homeUrl}/tasks/tags on mount
• Added a click-outside handler via document.addEventListener('mousedown', ...) to close the dropdown
• Replaced the FormInput tag field with an inline Form.Group containing:
  • An InputGroup with the hash icon + text input (shows dropdown on focus/type)
  • A ListGroup positioned absolutely below the input, showing filtered tags
  • Clicking a tag item sets it as the value and closes the dropdown

Behavior:

• Tags load from the API when the component mounts
• Dropdown opens on input focus, showing all matching tags filtered by the typed text
• Selecting a tag from the list sets it and hides the dropdown
• Typing a custom value not in the list works as before (dropdown hides when no matches)
• Clicking outside the tag container closes the dropdown
  |