Download indicator

apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
-import { Maximize2 } from "lucide-react";
+import { Archive, Maximize2, Video } from "lucide-react";
 
-import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 import BookmarkOptions from "./BookmarkOptions";
 import { FavouritedActionIcon } from "./icons";
@@ -13,11 +15,48 @@ export default function BookmarkActionBar({
 }: {
   bookmark: ZBookmark;
 }) {
+  const onError = () => {
+    toast({
+      variant: "destructive",
+      title: "Something went wrong",
+      description: "There was a problem with your request.",
+    });
+  };
+
+  const updateBookmarkMutator = useUpdateBookmark({
+    onSuccess: () => {
+      toast({
+        description: "The bookmark has been updated!",
+      });
+    },
+    onError,
+  });
+
   return (
     <div className="flex text-gray-500">
-      {bookmark.favourited && (
-        <FavouritedActionIcon className="m-1 size-8 rounded p-1" favourited />
-      )}
+      {bookmark.content.type === BookmarkTypes.LINK &&
+        bookmark.content.fullPageArchiveAssetId && (
+          <Archive className="m-1 size-8 rounded p-1" />
+        )}
+      {bookmark.content.type === BookmarkTypes.LINK &&
+        bookmark.content.videoAssetId && (
+          <Video className="m-1 size-8 rounded p-1" />
+        )}
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() =>
+          updateBookmarkMutator.mutate({
+            bookmarkId: bookmark.id,
+            favourited: !bookmark.favourited,
+          })
+        }
+      >
+        <FavouritedActionIcon
+          className="m-1 size-8 rounded p-1"
+          favourited={bookmark.favourited}
+        />
+      </Button>
       <Link
         href={`/dashboard/preview/${bookmark.id}`}
         className={cn(buttonVariants({ variant: "ghost" }), "px-2")}

apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx

@@ -36,7 +36,7 @@ import { useBookmarkGridContext } from "@hoarder/shared-react/hooks/bookmark-gri
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 
 import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
-import { ArchivedActionIcon, FavouritedActionIcon } from "./icons";
+import { ArchivedActionIcon } from "./icons";
 import { useManageListsModal } from "./ManageListsModal";
 import { useTagModel } from "./TagModal";
 
@@ -132,21 +132,6 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               <span>Edit</span>
             </DropdownMenuItem>
           )}
-          <DropdownMenuItem
-            disabled={demoMode}
-            onClick={() =>
-              updateBookmarkMutator.mutate({
-                bookmarkId: linkId,
-                favourited: !bookmark.favourited,
-              })
-            }
-          >
-            <FavouritedActionIcon
-              className="mr-2 size-4"
-              favourited={bookmark.favourited}
-            />
-            <span>{bookmark.favourited ? "Un-favourite" : "Favourite"}</span>
-          </DropdownMenuItem>
           <DropdownMenuItem
             disabled={demoMode}
             onClick={() =>