feat: Add notes feature to highlights (#2154)

* feat: Add note-taking functionality to highlights

This commit adds the ability to add and edit notes on highlights, allowing users to capture their thoughts alongside highlighted text.

Changes:
- Updated zUpdateHighlightSchema to include optional note field
- Modified Highlight.update() method to persist notes to database
- Added note button (MessageSquare icon) beside color picker in highlight menu
- Implemented note dialog with textarea for adding/editing notes
- Updated Highlight interface to include optional note field
- Modified ReaderView to pass notes through create and update operations
- Enhanced HighlightCard to display notes below highlighted text

The note button appears alongside the color picker for both new and existing highlights. Notes are displayed in a smaller, muted font below the highlighted text in the HighlightCard component.

* refactor: Convert highlight UI to inline form

Changed the highlight creation/editing interface from a modal dialog to an inline form for a more streamlined user experience.

Changes:
- Replaced ColorPickerMenu and Dialog with a unified HighlightForm component
- Form now displays color selector and note textarea together inline
- Added labels for "Color" and "Note" sections
- Textarea is now optional and inline (placeholder: "Add a note (optional)...")
- Consolidated Save and Cancel buttons in the form
- Delete button appears only for existing highlights
- Removed MessageSquare icon - notes are now always visible in the form
- Simplified state management by removing separate dialog state

The form appears in a popover when text is selected or an existing highlight is clicked, showing both color options and note input in a single 320px wide form.

* fixes

---------

Co-authored-by: Claude <noreply@anthropic.com>

3 files changed, 6 insertions, 0 deletions

diff --git a/packages/open-api/karakeep-openapi-spec.json b/packages/open-api/karakeep-openapi-spec.json
index 04596bf0..c151f42d 100644
--- a/packages/open-api/karakeep-openapi-spec.json
+++ b/packages/open-api/karakeep-openapi-spec.json
@@ -3159,6 +3159,10 @@
                       "green",
                       "blue"
                     ]
+                  },
+                  "note": {
+                    "type": "string",
+                    "nullable": true
                   }
                 }
               }
diff --git a/packages/shared/types/highlights.ts b/packages/shared/types/highlights.ts
index ff4b7e7f..de1d3ec2 100644
--- a/packages/shared/types/highlights.ts
+++ b/packages/shared/types/highlights.ts
@@ -32,6 +32,7 @@ export const zNewHighlightSchema = zHighlightBaseSchema;
 export const zUpdateHighlightSchema = z.object({
   highlightId: z.string(),
   color: zHighlightColorSchema.optional(),
+  note: z.string().nullable().optional(),
 });
 
 export const zGetAllHighlightsResponseSchema = z.object({
diff --git a/packages/trpc/models/highlights.ts b/packages/trpc/models/highlights.ts
index 48f0672a..76651c3e 100644
--- a/packages/trpc/models/highlights.ts
+++ b/packages/trpc/models/highlights.ts
@@ -183,6 +183,7 @@ export class Highlight {
       .update(highlights)
       .set({
         color: input.color,
+        note: input.note,
       })
       .where(
         and(