# Changelog

All notable changes to this project will be documented in this file.

## [0.2.0] - 2026-01-04

### Added
- **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
  - Changed selectors from hardcoded text (`text=Note 1`) to flexible attribute selectors (`[data-draggable="true"]`)
  - Updated matchers from `toContain('Note')` to regex patterns `toMatch(/Note \d+/)` to handle unique IDs with timestamps
  - Replaced UI-based cleanup with API-based cleanup using `request.delete()` for more reliable test cleanup

### Database
- Cleaned up 38 accumulated test notes from database using MCP memento tool
- Retained only essential notes: "test" and 2x "New AI Framework Released"
- Added migration `20260104203746_add_labels_table` for new Label model

### Technical Details
- **Label Management**: 
  - Labels now stored in database with colors, eliminating localStorage duplication
  - All label operations are centralized through LabelContext
  - Automatic synchronization across all components
  - Better performance with single source of truth
  - Support for user-specific labels (userId field for future auth)
  
- **Tests**: 
  - The drag-and-drop functionality itself was working correctly
  - The issue was in Playwright tests which expected exact text matches but notes were created with unique IDs (e.g., `test-1767557327567-Note 1`)
  - Tests now properly handle the dynamic note generation system

## [Previous Versions]

See individual commit history for earlier changes.