TagList & BookmarkTags

​

TagList

​

Props

​

Usage

import TagList from './components/TagList'

<TagList />

​

Features

• Auto-generated: Creates tag list from all bookmarks
• Occurrence Count: Shows how many bookmarks have each tag
• Active State: Highlights currently selected tag
• Responsive Layout: Horizontal scroll on mobile, wrapped grid on desktop
• Hidden When Empty: Returns null if no bookmarks exist

​

Tag Display

• Tag name
• Count of bookmarks with that tag (in gray)
• Visual indication when selected (white background, dark text)

​

Example Output

// If bookmarks have tags: ["react", "javascript", "react", "css"]
// TagList renders:

<TagList />
// Shows:
// [all 4] [react 2] [javascript 1] [css 1]

​

Styling

• Default: Dark background with light text
• Selected: Light background with dark text
• Hover: Border color transitions to lighter gray
• Mobile: Horizontal scrollable with snap points
• Desktop: Centered, wrapped layout

​

BookmarkTags

​

Props

​

Usage

import BookmarkTags from './components/BookmarkTags'

<BookmarkTags bookmark={bookmark} />

​

Features

• Inline Editing: Click to edit tags directly on the bookmark card
• Multiple Entry Methods: Add tags with comma or Enter key
• Backspace Deletion: Press backspace when input is empty to edit last tag
• Click to Remove: Click X icon on any tag to remove it
• Duplicate Prevention: Won’t add duplicate tags
• Click-outside to Cancel: Clicking outside cancels editing without saving
• Empty State: Shows “add tags…” placeholder when no tags exist

​

Keyboard Interactions

​

Example Interaction

// Initial state: bookmark has tags ["react", "tutorial"]
// User clicks on tag area
// Tags become editable with X buttons visible

// User types "javascript," (with comma)
// Tag "javascript" is added
// Now tags are ["react", "tutorial", "javascript"]

// User clicks X on "tutorial"
// Tag is removed
// Now tags are ["react", "javascript"]

// User clicks checkmark
// Tags are saved to database

​

State Management

• editable: Whether tags are in edit mode
• inputValue: Current text input value
• newTags: Working copy of tags being edited
• isKeyReleased: Tracks key state for backspace behavior

​

Validation

• Tags are trimmed of whitespace
• Tags are converted to lowercase
• Duplicate tags are prevented
• Empty tags are not added

​

Auto-focus