ui(web): Show bookmark URL when maximizing a bookmark

3 files changed, 21 insertions, 19 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
index d4e8dfca..6cc8e44e 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
@@ -1,6 +1,6 @@
-import BookmarkPreview from "@/components/dashboard/preview/BookmarkPreview";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { Maximize2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
@@ -18,20 +18,12 @@ export default function BookmarkActionBar({
       {bookmark.favourited && (
         <FavouritedActionIcon className="m-1 size-8 rounded p-1" favourited />
       )}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="ghost" className="my-auto block px-2">
-            <Maximize2 size="20" />
-          </Button>
-        </DialogTrigger>
-        <DialogContent
-          className="h-[90%] max-w-[90%] overflow-hidden p-0"
-          hideCloseBtn={true}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          <BookmarkPreview initialData={bookmark} />
-        </DialogContent>
-      </Dialog>
+      <Link
+        href={`/dashboard/preview/${bookmark.id}`}
+        className={cn(buttonVariants({ variant: "ghost" }), "px-2")}
+      >
+        <Maximize2 size="20" />
+      </Link>
       <BookmarkOptions bookmark={bookmark} />
     </div>
   );
diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index ec659e35..3505d0a5 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import {
   Tooltip,
@@ -16,6 +17,7 @@ import {
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
+  const router = useRouter();
   const onError = () => {
     toast({
       variant: "destructive",
@@ -46,6 +48,7 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         toast({
           description: "The bookmark has been deleted!",
         });
+        router.back();
       },
       onError,
     });
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index 581ec4bd..3d98dd19 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { TagsEditor } from "@/components/dashboard/bookmarks/TagsEditor";
+import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -65,13 +66,15 @@ function CreationTime({ createdAt }: { createdAt: Date }) {
 }
 
 export default function BookmarkPreview({
+  bookmarkId,
   initialData,
 }: {
-  initialData: ZBookmark;
+  bookmarkId: string;
+  initialData?: ZBookmark;
 }) {
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {
-      bookmarkId: initialData.id,
+      bookmarkId,
     },
     {
       initialData,
@@ -89,6 +92,10 @@ export default function BookmarkPreview({
     },
   );
 
+  if (!bookmark) {
+    return <FullPageSpinner />;
+  }
+
   let content;
   switch (bookmark.content.type) {
     case "link": {