[v0.3.0] Bookmarks & Labels System

[abdullah4tech]

Description

Implement a comprehensive bookmark and labeling system for organizing messages and conversations with visual categorization.

User Stories

• As a user, I want to bookmark important messages so I can easily find them later
• As a user, I want to add labels to conversations so I can categorize and filter them
• As a user, I want to use colors to visually distinguish different types of conversations
• As a user, I want to quickly access my bookmarked content

Tasks

Type Updates

• Update src/store/types.ts

  export interface Message {
    // ...existing fields...
    isBookmarked?: boolean
  }
  
  export interface ChatSession {
    // ...existing fields...
    labels?: string[]
    isBookmarked?: boolean
  }
  
  export interface Label {
    id: string
    name: string
    color: string
    createdAt: Date
  }

Bookmark System

• Create src/components/BookmarkPanel.vue

  • Display bookmarked messages and sessions
  • Group bookmarks by session
  • Quick navigation to bookmarked items
  • Remove bookmark functionality

• Add bookmark buttons to UI

  • Star/unstar button for messages
  • Star/unstar button for sessions
  • Visual indication for bookmarked items
  • Bookmark count indicator

• Create src/store/bookmarks.ts

  • State management for bookmarks
  • Add/remove bookmark actions
  • Get all bookmarks getter
  • Persist bookmarks to localStorage

Label System

• Create src/components/LabelManager.vue
  • Create new labels with name and color
  • Edit existing labels
  • Delete labels with confirmation
  • Color picker component integration
  • Label preview
• Create label assignment UI
  • Label dropdown/modal in conversation sidebar
  • Multi-select label interface
  • Quick add label button
  • Visual label badges
• Create src/store/labels.ts
  • State management for labels
  • CRUD operations for labels
  • Assign/unassign labels to sessions
  • Get sessions by label
  • Persist labels to localStorage

Filtering System

• Enhance ConversationSidebar.vue
  • Filter by label (multi-select)
  • Filter by bookmarked status
  • Filter by date range
  • Filter by confidence score
  • Combine multiple filters
  • Clear all filters button

Smart Collections

• Implement auto-categorization
  • Group by document source
  • Group by date ranges (Today, This Week, This Month)
  • Group by high/low confidence scores
  • Custom collection views

Acceptance Criteria

• Can bookmark/unbookmark messages with single click
• Can bookmark/unbookmark entire sessions
• Can create labels with custom names and colors (at least 10 color options)
• Can edit label name and color after creation
• Can delete labels (removes from all sessions)
• Can assign multiple labels to a single session
• Can filter conversations by one or more labels
• Bookmarked items are easily accessible in dedicated panel
• Labels persist across browser sessions
• UI is intuitive with clear visual indicators
• Color contrast meets accessibility standards

Dependencies

• v0.2.0 features (sidebar must be implemented first)
• ChatSession from src/store/types.ts
• Message from src/store/types.ts
• ConversationSidebar.vue from v0.2.0

Design Notes

Colors

Suggest these default label colors:

• Red: #EF4444
• Orange: #F97316
• Yellow: #EAB308
• Green: #22C55E
• Blue: #3B82F6
• Purple: #A855F7
• Pink: #EC4899
• Gray: #6B7280

UI Guidelines

• Labels should appear as small rounded badges
• Bookmark icon: Star (filled when bookmarked)
• Maximum 5 labels visible at once (show "+N more")
• Label manager accessible from settings/sidebar
• Use tooltips for truncated label names

Technical Considerations

• Limit label name to 20 characters
• Limit 10 labels per session
• Limit total 50 labels globally
• Implement efficient filtering with Set operations
• Consider IndexedDB for large bookmark collections
• Use CSS variables for label colors

Testing Checklist

• Test bookmark functionality for messages
• Test bookmark functionality for sessions
• Test creating/editing/deleting labels
• Test assigning multiple labels to session
• Test removing label from session
• Test filtering with multiple criteria
• Test with maximum number of labels
• Test label color contrast
• Test with very long label names
• Test bookmark persistence after page reload

Related Issues

• Depends on: [v0.2.0] Core Conversation Management #3 (v0.2.0 Conversation Management)

Milestone

v0.3.0 Release