Skip to content

feat(tags): autocomplete, persist tags, and improve tag page UX

Laxman Reddy requested to merge feat/frontend-hashtag-tagging into develop

Description:

Implemented a tagging system with autocomplete in the description input field.
Users can type # to tag usernames and general tags with real-time suggestions fetched from the backend.

Key features:

  • Cursor-aware tag detection (#word)
  • Debounced API calls to /records/tags/suggest
  • Dropdown with user + tag suggestions
  • Keyboard navigation (↑ ↓ Enter Esc)
  • Safe async handling (AbortController, requestIdRef)
  • Tag replacement without affecting surrounding text
  • Clickable tags in view mode (#username → /user/:username)
  • Fixed backend URL using environment variable
  • Ensured retry works after failed requests (no stuck state)

Type of Change:

Feature Development

Testing:

  • Tested on desktop
    • Tested on mobile (basic responsive behavior verified)
    • Tested in different browsers (Chrome, Edge)

Screenshots (if applicable):

  • Autocomplete dropdown while typing

    image.png

  • Tag insertion inside textarea

    image.png

  • Clickable tags in view mode

    image.png

image.png

Video Demo:

Screencast from 2026-04-21 10-07-32.webm

AI Usage Disclosure:

AI tools were used to assist in implementation and debugging.
A code walkthrough video explaining the changes will be provided.

Link to code walkthrough:

(Add your walkthrough link here)

Checklist:

  • Code follows project style guidelines
    • Self-review completed
    • No console errors
    • TypeScript types are correct

Merge request reports