feature: Add title to bookmarks and allow editing them. Fixes #27

1 files changed, 15 insertions, 36 deletions

diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 73e49376..93f14c64 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -24,6 +24,7 @@ import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
 import ActionBar from "./ActionBar";
 import { AssetContentSection } from "./AssetContentSection";
+import { EditableTitle } from "./EditableTitle";
 import { NoteEditor } from "./NoteEditor";
 import { TextContentSection } from "./TextContentSection";
 
@@ -62,37 +63,6 @@ function CreationTime({ createdAt }: { createdAt: Date }) {
   );
 }
 
-function LinkHeader({ bookmark }: { bookmark: ZBookmark }) {
-  if (bookmark.content.type !== "link") {
-    throw new Error("Unexpected content type");
-  }
-
-  const title = bookmark.content.title ?? bookmark.content.url;
-
-  return (
-    <div className="flex w-full flex-col items-center justify-center space-y-3">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <p className="line-clamp-2 text-center text-lg">{title}</p>
-        </TooltipTrigger>
-        <TooltipPortal>
-          <TooltipContent side="bottom" className="w-96">
-            {title}
-          </TooltipContent>
-        </TooltipPortal>
-      </Tooltip>
-      <Link
-        href={bookmark.content.url}
-        className="mx-auto flex gap-2 text-gray-400"
-      >
-        <span className="my-auto">View Original</span>
-        <ExternalLink />
-      </Link>
-      <Separator />
-    </div>
-  );
-}
-
 export default function BookmarkPreview({
   initialData,
 }: {
@@ -131,17 +101,26 @@ export default function BookmarkPreview({
     }
   }
 
-  const linkHeader = bookmark.content.type == "link" && (
-    <LinkHeader bookmark={bookmark} />
-  );
-
   return (
     <div className="grid h-full grid-rows-3 gap-2 overflow-hidden bg-background lg:grid-cols-3 lg:grid-rows-none">
       <div className="row-span-2 h-full w-full overflow-auto 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 overflow-auto bg-accent p-4 lg:row-auto">
-        {linkHeader}
+        <div className="flex w-full flex-col items-center justify-center gap-y-2">
+          <EditableTitle bookmark={bookmark} />
+          {bookmark.content.type == "link" && (
+            <Link
+              href={bookmark.content.url}
+              className="flex items-center gap-2 text-gray-400"
+            >
+              <span>View Original</span>
+              <ExternalLink />
+            </Link>
+          )}
+          <Separator />
+        </div>
+
         <CreationTime createdAt={bookmark.createdAt} />
         <div className="flex gap-4">
           <p className="text-sm text-gray-400">Tags</p>