From de5ebbc4422b458c685a653b8b8fbaac6e6af5f4 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem 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 --- 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