feat(extension): Allow writing notes directly in the extension (#2104)

* feat(extension): add notes editor to bookmark hoarded screen

Adds the ability to directly add and edit notes for bookmarks in the browser extension's hoarded screen (the page shown after saving a bookmark).

Changes:
- Created Textarea UI component for the browser extension
- Created NoteEditor component that uses useUpdateBookmark hook
- Added Notes section to BookmarkSavedPage, displayed between the header and tags
- Notes auto-save when the user clicks away from the textarea (onBlur)
- Shows saving state and error messages to the user

This brings feature parity with the web app's notes functionality.

* add explicit button

* more fixes

---------

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

1 files changed, 4 insertions, 0 deletions

diff --git a/apps/browser-extension/src/BookmarkSavedPage.tsx b/apps/browser-extension/src/BookmarkSavedPage.tsx
index 67e6f753..3be5f9d0 100644
--- a/apps/browser-extension/src/BookmarkSavedPage.tsx
+++ b/apps/browser-extension/src/BookmarkSavedPage.tsx
@@ -6,6 +6,7 @@ import { useDeleteBookmark } from "@karakeep/shared-react/hooks/bookmarks";
 
 import BookmarkLists from "./components/BookmarkLists";
 import { ListsSelector } from "./components/ListsSelector";
+import { NoteEditor } from "./components/NoteEditor";
 import TagList from "./components/TagList";
 import { TagsSelector } from "./components/TagsSelector";
 import { Button, buttonVariants } from "./components/ui/button";
@@ -79,6 +80,9 @@ export default function BookmarkSavedPage() {
         </div>
       </div>
       <hr />
+      <p className="text-lg">Notes</p>
+      <NoteEditor bookmarkId={bookmarkId} />
+      <hr />
       <p className="text-lg">Tags</p>
       <TagList bookmarkId={bookmarkId} />
       <TagsSelector bookmarkId={bookmarkId} />