feature: Preview page for the stored content of links

packages/web/app/dashboard/bookmarks/components/LinkCard.tsx

@@ -12,7 +12,7 @@ import { ZBookmark } from "@/lib/types/api/bookmarks";
 import Link from "next/link";
 import BookmarkOptions from "./BookmarkOptions";
 import { api } from "@/lib/trpc";
-import { Star } from "lucide-react";
+import { Maximize2, Star } from "lucide-react";
 import TagList from "./TagList";
 
 function isStillCrawling(bookmark: ZBookmark) {
@@ -91,7 +91,7 @@ export default function LinkCard({
           <TagList bookmark={bookmark} loading={isStillTagging(bookmark)} />
         </ImageCardBody>
         <ImageCardFooter>
-          <div className="flex justify-between text-gray-500">
+          <div className="mt-1 flex justify-between text-gray-500">
             <div className="my-auto">
               <Link
                 className="line-clamp-1 hover:text-black"
@@ -109,6 +109,12 @@ export default function LinkCard({
                   fill="#ebb434"
                 />
               )}
+              <Link
+                className="my-auto block px-2"
+                href={`/dashboard/preview/${bookmark.id}`}
+              >
+                <Maximize2 size="20" />
+              </Link>
               <BookmarkOptions bookmark={bookmark} />
             </div>
           </div>

packages/web/app/dashboard/bookmarks/components/TextCard.tsx

@@ -10,6 +10,7 @@ import Markdown from "react-markdown";
 import { useState } from "react";
 import { BookmarkedTextViewer } from "./BookmarkedTextViewer";
 import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 function isStillTagging(bookmark: ZBookmark) {
   return (
@@ -82,13 +83,12 @@ export default function TextCard({
                 />
               )}
             </div>
-            <Button
-              className="px-2"
-              variant="ghost"
-              onClick={() => setPreviewModalOpen(true)}
+            <Link
+              className="my-auto block px-2"
+              href={`/dashboard/preview/${bookmark.id}`}
             >
               <Maximize2 size="20" />
-            </Button>
+            </Link>
             <BookmarkOptions bookmark={bookmark} />
           </div>
         </div>

packages/web/app/dashboard/preview/[bookmarkId]/page.tsx

@@ -0,0 +1,64 @@
+import { BackButton } from "@/components/ui/back-button";
+import { api } from "@/server/api/client";
+import { ArrowLeftCircle, CalendarDays, ExternalLink } from "lucide-react";
+import Link from "next/link";
+import Markdown from "react-markdown";
+
+export default async function BookmarkPreviewPage({
+  params,
+}: {
+  params: { bookmarkId: string };
+}) {
+  const bookmark = await api.bookmarks.getBookmark({
+    bookmarkId: params.bookmarkId,
+  });
+
+  const linkHeader = bookmark.content.type == "link" && (
+    <div className="flex flex-col space-y-2">
+      <p className="text-center text-3xl">{bookmark.content.title}</p>
+      <Link href={bookmark.content.url} className="mx-auto flex gap-2">
+        <span className="my-auto">View Original</span>
+        <ExternalLink />
+      </Link>
+    </div>
+  );
+
+  let content;
+  switch (bookmark.content.type) {
+    case "link": {
+      content = (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: bookmark.content.htmlContent || "",
+          }}
+          className="prose"
+        />
+      );
+      break;
+    }
+    case "text": {
+      content = <Markdown className="prose">{bookmark.content.text}</Markdown>;
+      break;
+    }
+  }
+
+  return (
+    <div className="bg-background m-4 min-h-screen space-y-4 rounded-md border p-4">
+      <div className="flex justify-between">
+        <BackButton className="ghost" variant="ghost">
+          <ArrowLeftCircle />
+        </BackButton>
+        <div className="my-auto">
+          <span className="my-auto flex gap-2">
+            <CalendarDays /> {bookmark.createdAt.toLocaleString()}
+          </span>
+        </div>
+      </div>
+      <hr />
+      {linkHeader}
+      <div className="mx-auto flex h-full border-x p-2 px-4 lg:w-2/3">
+        {content}
+      </div>
+    </div>
+  );
+}

packages/web/components/ui/back-button.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button, ButtonProps } from "./button";
+
+export function BackButton({ ...props }: ButtonProps) {
+  const router = useRouter();
+  return <Button {...props} onClick={() => router.back()} />;
+}