From 7d7d3754d33b41478fea2d2d7ed902d665a9e03d Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Thu, 21 Mar 2024 02:15:56 +0000
Subject: feature: A better looking bookmark preview page

---
 .../app/dashboard/preview/[bookmarkId]/page.tsx    |   6 +-
 .../dashboard/bookmarks/BookmarkActionBar.tsx      |   9 +-
 .../dashboard/bookmarks/BookmarkPreview.tsx        | 204 +++++++++++++++------
 apps/web/components/ui/dialog.tsx                  |  16 +-
 apps/web/components/ui/tooltip.tsx                 |  36 ++++
 apps/web/package.json                              |   2 +
 6 files changed, 204 insertions(+), 69 deletions(-)
 create mode 100644 apps/web/components/ui/tooltip.tsx

(limited to 'apps/web')

diff --git a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
index 5f10b56e..c9f27eac 100644
--- a/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
+++ b/apps/web/app/dashboard/preview/[bookmarkId]/page.tsx
@@ -10,5 +10,9 @@ export default async function BookmarkPreviewPage({
     bookmarkId: params.bookmarkId,
   });
 
-  return <BookmarkPreview initialData={bookmark} />;
+  return (
+    <div className="max-h-screen p-4">
+      <BookmarkPreview initialData={bookmark} />
+    </div>
+  );
 }
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
index 0d98cc1f..d2beb8d4 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { DialogContent } from "@/components/ui/dialog";
-import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Maximize2, Star } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
@@ -28,7 +27,11 @@ export default function BookmarkActionBar({
             <Maximize2 size="20" />
           </Button>
         </DialogTrigger>
-        <DialogContent className="h-[90%] max-w-[90%] overflow-hidden">
+        <DialogContent
+          className="h-[90%] max-w-[90%] overflow-hidden p-0"
+          hideCloseBtn={true}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <BookmarkPreview initialData={bookmark} />
         </DialogContent>
       </Dialog>
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
index 4209192e..632422c4 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx
@@ -2,58 +2,98 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { BackButton } from "@/components/ui/back-button";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
-import { isBookmarkStillCrawling } from "@/lib/bookmarkUtils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  isBookmarkStillCrawling,
+  isBookmarkStillLoading,
+} from "@/lib/bookmarkUtils";
 import { api } from "@/lib/trpc";
-import { ArrowLeftCircle, CalendarDays, ExternalLink } from "lucide-react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { CalendarDays, ExternalLink } from "lucide-react";
 import Markdown from "react-markdown";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
-export default function BookmarkPreview({
-  initialData,
-}: {
-  initialData: ZBookmark;
-}) {
-  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
-    {
-      bookmarkId: initialData.id,
-    },
-    {
-      initialData,
-      refetchInterval: (query) => {
-        const data = query.state.data;
-        if (!data) {
-          return false;
-        }
-        // If the link is not crawled or not tagged
-        if (isBookmarkStillCrawling(data)) {
-          return 1000;
-        }
-        return false;
-      },
-    },
+import { TagsEditor } from "./TagsEditor";
+
+dayjs.extend(relativeTime);
+
+function ContentLoading() {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Skeleton className="h-4" />
+      <Skeleton className="h-4" />
+      <Skeleton className="h-4" />
+    </div>
   );
+}
 
-  const linkHeader = bookmark.content.type == "link" && (
-    <div className="flex flex-col space-y-2">
-      <p className="text-center text-3xl">
-        {bookmark.content.title ?? bookmark.content.url}
-      </p>
-      <Link href={bookmark.content.url} className="mx-auto flex gap-2">
+function CreationTime({ createdAt }: { createdAt: Date }) {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <span className="flex w-fit gap-2">
+            <CalendarDays /> {dayjs(createdAt).fromNow()}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{createdAt.toLocaleString()}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+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">
+      <TooltipProvider>
+        <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>
+      </TooltipProvider>
+      <Link
+        href={bookmark.content.url}
+        className="mx-auto flex gap-2 text-gray-400"
+      >
         <span className="my-auto">View Original</span>
         <ExternalLink />
       </Link>
+      <hr />
     </div>
   );
+}
 
+function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
   let content;
   switch (bookmark.content.type) {
     case "link": {
       if (!bookmark.content.htmlContent) {
         content = (
-          <div className="text-red-500">Failed to fetch link content ...</div>
+          <div className="text-destructive">
+            Failed to fetch link content ...
+          </div>
         );
       } else {
         content = (
@@ -61,24 +101,39 @@ export default function BookmarkPreview({
             dangerouslySetInnerHTML={{
               __html: bookmark.content.htmlContent || "",
             }}
-            className="prose"
+            className="prose mx-auto"
           />
         );
       }
       break;
     }
     case "text": {
-      content = <Markdown className="prose">{bookmark.content.text}</Markdown>;
+      content = (
+        <Markdown className="prose mx-auto">{bookmark.content.text}</Markdown>
+      );
       break;
     }
-    case "asset": {
+  }
+
+  return <ScrollArea className="h-full">{content}</ScrollArea>;
+}
+
+function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) {
+  if (bookmark.content.type != "asset") {
+    throw new Error("Invalid content type");
+  }
+
+  let content;
+  switch (bookmark.content.assetType) {
+    case "image": {
       switch (bookmark.content.assetType) {
         case "image": {
           content = (
-            <div className="relative w-full">
+            <div className="relative h-full min-w-full">
               <Image
                 alt="asset"
                 fill={true}
+                className="object-contain"
                 src={`/api/assets/${bookmark.content.assetId}`}
               />
             </div>
@@ -88,31 +143,62 @@ export default function BookmarkPreview({
       break;
     }
   }
+  return content;
+}
+
+export default function BookmarkPreview({
+  initialData,
+}: {
+  initialData: ZBookmark;
+}) {
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    {
+      bookmarkId: initialData.id,
+    },
+    {
+      initialData,
+      refetchInterval: (query) => {
+        const data = query.state.data;
+        if (!data) {
+          return false;
+        }
+        // If the link is not crawled or not tagged
+        if (isBookmarkStillLoading(data)) {
+          return 1000;
+        }
+        return false;
+      },
+    },
+  );
+
+  let content;
+  switch (bookmark.content.type) {
+    case "link":
+    case "text": {
+      content = <TextContentSection bookmark={bookmark} />;
+      break;
+    }
+    case "asset": {
+      content = <AssetContentSection bookmark={bookmark} />;
+      break;
+    }
+  }
+
+  const linkHeader = bookmark.content.type == "link" && (
+    <LinkHeader bookmark={bookmark} />
+  );
 
   return (
-    <div className="m-4 min-h-screen space-y-4 rounded-md border bg-background 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 className="grid 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-hidden p-2 md:col-span-2 lg:row-auto">
+        {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content}
       </div>
-      <hr />
-      {linkHeader}
-      <div className="mx-auto flex h-full border-x p-2 px-4 lg:w-2/3">
-        {isBookmarkStillCrawling(bookmark) ? (
-          <div className="flex w-full flex-col gap-2">
-            <Skeleton className="h-4" />
-            <Skeleton className="h-4" />
-            <Skeleton className="h-4" />
-          </div>
-        ) : (
-          content
-        )}
+      <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-gray-100 p-4 lg:row-auto">
+        {linkHeader}
+        <CreationTime createdAt={bookmark.createdAt} />
+        <div className="flex gap-2">
+          <TagsEditor bookmark={bookmark} />
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx
index 8e0c3c6c..18795408 100644
--- a/apps/web/components/ui/dialog.tsx
+++ b/apps/web/components/ui/dialog.tsx
@@ -30,8 +30,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideCloseBtn?: boolean;
+  }
+>(({ className, children, hideCloseBtn = false, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -43,10 +45,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="size-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {!hideCloseBtn && (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx
new file mode 100644
index 00000000..020f6151
--- /dev/null
+++ b/apps/web/components/ui/tooltip.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+};
diff --git a/apps/web/package.json b/apps/web/package.json
index 85cd8942..aa38b882 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.24.8",
     "@tanstack/react-query-devtools": "^5.21.0",
     "@trpc/client": "11.0.0-next-beta.308",
@@ -40,6 +41,7 @@
     "better-sqlite3": "^9.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
     "drizzle-orm": "^0.29.4",
     "lucide-react": "^0.330.0",
     "next": "14.1.4",
-- 
cgit v1.2.3-70-g09d2