Skip to content

Build workspace sidebar with categories #22

@RossCabrera

Description

@RossCabrera

Overview

Create the sidebar component displaying categories with color-coded badges,
allowing users to filter notes and create/manage categories.

Components

Sidebar Component

  • Displays all user categories
  • Each category shows color badge
  • Click category to filter notes
  • Active category highlighted
  • Add category button
  • Category settings menu

Category Item Component

  • Color badge (small circle)
  • Category name
  • Hover effects
  • Right-click context menu (edit, delete)
  • Note count badge (optional)

Add Category Modal

  • Input for category name
  • Color picker (hex input or visual picker)
  • Submit button
  • Cancel button
  • Error messages

Integration

  • Use useCategories() hook to fetch
  • Use useCreateCategory() to add
  • Use useDeleteCategory() to delete
  • Use useUpdateCategory() to edit
  • Filter notes when category selected

Acceptance Criteria

  • All categories displayed (AC-NOTE-06)
  • Color badges show custom colors (AC-NOTE-03)
  • Category names displayed (AC-NOTE-03)
  • Click category filters notes
  • Add category modal works
  • Edit category modal works
  • Delete category works
  • Responsive design
  • Accessible (ARIA, keyboard nav)
  • Loading states

Related User Stories

  • US-NOTE-06: Color-coded categories

Related Acceptance Criteria

  • AC-NOTE-03: Custom category names and colors

Related Issues

Metadata

Metadata

Assignees

Labels

featureA new functionality or capability added to the system.frontendUser interface, client-side logic, components, styling, and user interactions.ux/uiUI design and user experience improvements like layouts, components, and user flows

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions