Build workspace sidebar with categories

[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

• Depends on: Create TanStack Query hooks for categories #21
• Blocks: Add error toast notifications #28