feature(web): Add support for attaching notes to bookmarks

2 files changed, 56 insertions, 2 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
index 74c49ddd..102e0788 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
@@ -24,6 +24,7 @@ import Markdown from "react-markdown";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
+import { NoteEditor } from "./NoteEditor";
 import { TagsEditor } from "./TagsEditor";
 
 dayjs.extend(relativeTime);
@@ -198,12 +199,17 @@ export default function BookmarkPreview({
       <div className="row-span-2 h-full w-full overflow-hidden p-2 md:col-span-2 lg:row-auto">
         {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>
-      <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-accent p-4 lg:row-auto">
+      <div className="lg:col-span1 row-span-1 flex flex-col gap-4 overflow-auto bg-accent p-4 lg:row-auto">
         {linkHeader}
         <CreationTime createdAt={bookmark.createdAt} />
-        <div className="flex gap-2">
+        <div className="flex gap-4">
+          <p className="text-sm text-gray-400">Tags</p>
           <TagsEditor bookmark={bookmark} />
         </div>
+        <div className="flex gap-4">
+          <p className="text-sm text-gray-400">Note</p>
+          <NoteEditor bookmark={bookmark} />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/components/dashboard/bookmarks/NoteEditor.tsx b/apps/web/components/dashboard/bookmarks/NoteEditor.tsx
new file mode 100644
index 00000000..d712d523
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/NoteEditor.tsx
@@ -0,0 +1,48 @@
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
+import { useClientConfig } from "@/lib/clientConfig";
+import { api } from "@/lib/trpc";
+
+import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+
+export function NoteEditor({ bookmark }: { bookmark: ZBookmark }) {
+  const demoMode = !!useClientConfig().demoMode;
+
+  const invalidateBookmarkCache =
+    api.useUtils().bookmarks.getBookmark.invalidate;
+
+  const updateBookmarkMutator = api.bookmarks.updateBookmark.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "The bookmark has been updated!",
+      });
+    },
+    onError: () => {
+      toast({
+        description: "Something went wrong while saving the note",
+        variant: "destructive",
+      });
+    },
+    onSettled: () => {
+      invalidateBookmarkCache({ bookmarkId: bookmark.id });
+    },
+  });
+
+  return (
+    <Textarea
+      className="h-44 w-full overflow-auto rounded bg-background p-2 text-sm text-gray-400 dark:text-gray-300"
+      defaultValue={bookmark.note ?? ""}
+      disabled={demoMode}
+      placeholder="Write some notes ..."
+      onBlur={(e) => {
+        if (e.currentTarget.value == bookmark.note) {
+          return;
+        }
+        updateBookmarkMutator.mutate({
+          bookmarkId: bookmark.id,
+          note: e.currentTarget.value,
+        });
+      }}
+    />
+  );
+}