docs: update changelog with label management details

This commit is contained in:
sepehr 2026-01-04 22:53:28 +01:00
parent dfa88c5b63
commit 6204425080

View File

@ -5,12 +5,43 @@ All notable changes to this project will be documented in this file.
## [Unreleased] - 2026-01-04
### Added
- **Label Management System**: Complete redesign of label/tag management
- **Label Management System**: Complete redesign of label/tag management with color filtering
- Added `Label` model to Prisma schema with centralized database storage
- Fields: id, name, color, userId, createdAt, updatedAt
- Color field supports 10 pastel colors (default, red, orange, yellow, green, teal, blue, purple, pink, gray)
- Created `LabelContext` for global state management with React Context API
- Provides labels array and loading state
- Exposes functions: addLabel, updateLabel, deleteLabel, getLabelColor, refreshLabels
- Added `useLabels` hook for easy access to label functionality
- Implemented full CRUD API for labels (GET, POST, PUT, DELETE)
- `/api/labels` - GET all labels, POST create new label
- `/api/labels/[id]` - GET specific label, PUT update, DELETE remove
- Updated all components to use the new context instead of localStorage
- **New Components**:
- `LabelBadge` - Reusable component for displaying label badges
- 3 variants: default, filter, clickable
- Automatic color display via context
- Optional remove button (X icon)
- `LabelSelector` - Dropdown for selecting labels in note input
- Shows count of selected labels
- Uses LabelBadge for each option
- `LabelFilter` - Filter interface with color and label selection
- Color filter: 10 color buttons with label count per color
- Label filter: Checkbox list of all labels
- Clear all button to reset filters
- **Color Filtering**:
- Filter notes by label color via URL parameter `?color=blue`
- Shows number of labels per color
- Highlights selected color with ring effect
- Automatically filters label list when color is selected
- **Updated Components**:
- `note-input.tsx` - Added LabelSelector for label selection during note creation
- `note-card.tsx` - Uses LabelBadge to display labels on notes
- `note-editor.tsx` - Uses LabelBadge to display labels in editor
- `header.tsx` - Added selectedColor and onColorFilterChange props
- `header-wrapper.tsx` - Manages color filtering via URL params
- `page.tsx` - Filters notes by selected label color
- `layout.tsx` - Wraps app with LabelProvider
### Fixed
- **Tests**: Fixed Playwright drag-and-drop tests to work with dynamically generated note IDs