Keep/CHANGELOG.md

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.