From de5ebbc4422b458c685a653b8b8fbaac6e6af5f4 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 23 Nov 2025 11:02:27 +0000
Subject: 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>
---
 apps/web/components/dashboard/preview/ReaderView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'apps/web/components/dashboard/preview/ReaderView.tsx')

diff --git a/apps/web/components/dashboard/preview/ReaderView.tsx b/apps/web/components/dashboard/preview/ReaderView.tsx
index 1974626a..f2f843ee 100644
--- a/apps/web/components/dashboard/preview/ReaderView.tsx
+++ b/apps/web/components/dashboard/preview/ReaderView.tsx
@@ -105,6 +105,7 @@ export default function ReaderView({
           updateHighlight({
             highlightId: h.id,
             color: h.color,
+            note: h.note,
           })
         }
         onHighlight={(h) =>
@@ -114,7 +115,7 @@ export default function ReaderView({
             color: h.color,
             bookmarkId,
             text: h.text,
-            note: null,
+            note: h.note ?? null,
           })
         }
       />
-- 
cgit v1.2.3-70-g09d2

