diff --git a/CHANGELOG.md b/CHANGELOG.md index 0abda0a..d298d1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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