feat: Allow editing bookmark details

3 files changed, 32 insertions, 63 deletions

diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 86c86d5a..62d9c849 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -8,12 +8,13 @@ import {
 } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { useTranslation } from "@/lib/i18n/client";
-import { Trash2 } from "lucide-react";
+import { Pencil, Trash2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 
 import DeleteBookmarkConfirmationDialog from "../bookmarks/DeleteBookmarkConfirmationDialog";
+import { EditBookmarkDialog } from "../bookmarks/EditBookmarkDialog";
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
@@ -21,6 +22,8 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const [deleteBookmarkDialogOpen, setDeleteBookmarkDialogOpen] =
     useState(false);
 
+  const [isEditBookmarkDialogOpen, setEditBookmarkDialogOpen] = useState(false);
+
   const onError = () => {
     toast({
       variant: "destructive",
@@ -49,6 +52,26 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   return (
     <div className="flex items-center justify-center gap-3">
       <Tooltip delayDuration={0}>
+        <EditBookmarkDialog
+          bookmark={bookmark}
+          open={isEditBookmarkDialogOpen}
+          setOpen={setEditBookmarkDialogOpen}
+        />
+
+        <TooltipTrigger asChild>
+          <Button
+            variant="none"
+            className="size-14 rounded-full bg-background"
+            onClick={() => {
+              setEditBookmarkDialogOpen(true);
+            }}
+          >
+            <Pencil />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{t("actions.edit")}</TooltipContent>
+      </Tooltip>
+      <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
           <ActionButton
             variant="none"
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index c78eab22..07ae0809 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import Link from "next/link";
 import { BookmarkTagsEditor } from "@/components/dashboard/bookmarks/BookmarkTagsEditor";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
@@ -17,6 +18,7 @@ import { api } from "@/lib/trpc";
 import { CalendarDays, ExternalLink } from "lucide-react";
 
 import {
+  getBookmarkTitle,
   getSourceUrl,
   isBookmarkStillCrawling,
   isBookmarkStillLoading,
@@ -27,7 +29,6 @@ import SummarizeBookmarkArea from "../bookmarks/SummarizeBookmarkArea";
 import ActionBar from "./ActionBar";
 import { AssetContentSection } from "./AssetContentSection";
 import AttachmentBox from "./AttachmentBox";
-import { EditableTitle } from "./EditableTitle";
 import HighlightsBox from "./HighlightsBox";
 import LinkContentSection from "./LinkContentSection";
 import { NoteEditor } from "./NoteEditor";
@@ -108,6 +109,7 @@ export default function BookmarkPreview({
   }
 
   const sourceUrl = getSourceUrl(bookmark);
+  const title = getBookmarkTitle(bookmark);
 
   return (
     <div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
@@ -116,7 +118,11 @@ export default function BookmarkPreview({
       </div>
       <div className="row-span-1  flex flex-col gap-4 overflow-auto bg-accent p-4 md:col-span-2 lg:col-span-1 lg:row-auto">
         <div className="flex w-full flex-col items-center justify-center gap-y-2">
-          <EditableTitle bookmark={bookmark} />
+          <div className="flex w-full items-center justify-center gap-2">
+            <p className="line-clamp-2 text-ellipsis break-words text-lg">
+              {title === undefined || title === "" ? "Untitled" : title}
+            </p>
+          </div>
           {sourceUrl && (
             <Link
               href={sourceUrl}
diff --git a/apps/web/components/dashboard/preview/EditableTitle.tsx b/apps/web/components/dashboard/preview/EditableTitle.tsx
deleted file mode 100644
index 03b95e74..00000000
--- a/apps/web/components/dashboard/preview/EditableTitle.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { toast } from "@/components/ui/use-toast";
-
-import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
-import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
-
-import { EditableText } from "../EditableText";
-
-export function EditableTitle({ bookmark }: { bookmark: ZBookmark }) {
-  const { mutate: updateBookmark, isPending } = useUpdateBookmark({
-    onSuccess: () => {
-      toast({
-        description: "Title updated!",
-      });
-    },
-  });
-
-  let title: string | null = null;
-  switch (bookmark.content.type) {
-    case BookmarkTypes.LINK:
-      title = bookmark.content.title ?? bookmark.content.url;
-      break;
-    case BookmarkTypes.TEXT:
-      title = null;
-      break;
-    case BookmarkTypes.ASSET:
-      title = bookmark.content.fileName ?? null;
-      break;
-  }
-
-  title = bookmark.title ?? title;
-  if (title == "") {
-    title = null;
-  }
-
-  return (
-    <EditableText
-      originalText={title}
-      editClassName="p-2 text-lg break-all"
-      viewClassName="break-words line-clamp-2 text-lg text-ellipsis"
-      untitledClassName="text-lg italic text-gray-600"
-      onSave={(newTitle) => {
-        updateBookmark(
-          {
-            bookmarkId: bookmark.id,
-            title: newTitle,
-          },
-          {
-            onError: () => {
-              toast({
-                description: "Something went wrong",
-                variant: "destructive",
-              });
-            },
-          },
-        );
-      }}
-      isSaving={isPending}
-    />
-  );
-}