2 files changed, 16 insertions, 23 deletions
diff --git a/apps/web/components/dashboard/preview/ActionBar.tsx b/apps/web/components/dashboard/preview/ActionBar.tsx
index 38ad8fa2..86c86d5a 100644
--- a/apps/web/components/dashboard/preview/ActionBar.tsx
+++ b/apps/web/components/dashboard/preview/ActionBar.tsx
@@ -1,5 +1,6 @@
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
@@ -10,16 +11,16 @@ import { useTranslation } from "@/lib/i18n/client";
 import { Trash2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
-import {
-  useDeleteBookmark,
-  useUpdateBookmark,
-} from "@hoarder/shared-react/hooks/bookmarks";
+import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 
+import DeleteBookmarkConfirmationDialog from "../bookmarks/DeleteBookmarkConfirmationDialog";
 import { ArchivedActionIcon, FavouritedActionIcon } from "../bookmarks/icons";
 
 export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const { t } = useTranslation();
-  const router = useRouter();
+  const [deleteBookmarkDialogOpen, setDeleteBookmarkDialogOpen] =
+    useState(false);
+
   const onError = () => {
     toast({
       variant: "destructive",
@@ -44,16 +45,6 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
       },
       onError,
     });
-  const { mutate: deleteBookmark, isPending: pendingDeletion } =
-    useDeleteBookmark({
-      onSuccess: () => {
-        toast({
-          description: "The bookmark has been deleted!",
-        });
-        router.back();
-      },
-      onError,
-    });
 
   return (
     <div className="flex items-center justify-center gap-3">
@@ -100,17 +91,19 @@ export default function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         </TooltipContent>
       </Tooltip>
       <Tooltip delayDuration={0}>
+        <DeleteBookmarkConfirmationDialog
+          bookmark={bookmark}
+          open={deleteBookmarkDialogOpen}
+          setOpen={setDeleteBookmarkDialogOpen}
+        />
         <TooltipTrigger asChild>
-          <ActionButton
-            loading={pendingDeletion}
+          <Button
             className="size-14 rounded-full bg-background"
             variant="none"
-            onClick={() => {
-              deleteBookmark({ bookmarkId: bookmark.id });
-            }}
+            onClick={() => setDeleteBookmarkDialogOpen(true)}
           >
             <Trash2 />
-          </ActionButton>
+          </Button>
         </TooltipTrigger>
         <TooltipContent side="bottom">{t("actions.delete")}</TooltipContent>
       </Tooltip>
diff --git a/apps/web/components/dashboard/preview/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
index c257d902..fd70fd4e 100644
--- a/apps/web/components/dashboard/preview/BookmarkPreview.tsx
+++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx
@@ -114,7 +114,7 @@ export default function BookmarkPreview({
       <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">
+      <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} />
           {sourceUrl && (