feature(web): Add ability to manually trigger full page archives. Fixes #398 (#418)

* [Feature Request] Ability to select what to "crawl full page archive" #398
Added the ability to start a full page crawl for links and also in bulk operations
added the ability to refresh links as a bulk operation as well

* minor icon and wording changes

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

2 files changed, 75 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/BulkBookmarksAction.tsx b/apps/web/components/dashboard/BulkBookmarksAction.tsx
index 0867fdd2..39e13940 100644
--- a/apps/web/components/dashboard/BulkBookmarksAction.tsx
+++ b/apps/web/components/dashboard/BulkBookmarksAction.tsx
@@ -8,10 +8,21 @@ import {
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { useToast } from "@/components/ui/use-toast";
 import useBulkActionsStore from "@/lib/bulkActions";
-import { CheckCheck, Hash, Link, List, Pencil, Trash2, X } from "lucide-react";
+import {
+  CheckCheck,
+  FileDown,
+  Hash,
+  Link,
+  List,
+  Pencil,
+  RotateCw,
+  Trash2,
+  X,
+} from "lucide-react";
 
 import {
   useDeleteBookmark,
+  useRecrawlBookmark,
   useUpdateBookmark,
 } from "@hoarder/shared-react/hooks/bookmarks";
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
@@ -63,11 +74,35 @@ export default function BulkBookmarksAction() {
     onError,
   });
 
+  const recrawlBookmarkMutator = useRecrawlBookmark({
+    onSuccess: () => {
+      setIsBulkEditEnabled(false);
+    },
+    onError,
+  });
+
   interface UpdateBookmarkProps {
     favourited?: boolean;
     archived?: boolean;
   }
 
+  const recrawlBookmarks = async (archiveFullPage: boolean) => {
+    const links = selectedBookmarks.filter(
+      (item) => item.content.type === BookmarkTypes.LINK,
+    );
+    await Promise.all(
+      links.map((item) =>
+        recrawlBookmarkMutator.mutateAsync({
+          bookmarkId: item.id,
+          archiveFullPage,
+        }),
+      ),
+    );
+    toast({
+      description: `${links.length} bookmarks will be ${archiveFullPage ? "re-crawled and archived!" : "refreshed!"}`,
+    });
+  };
+
   function isClipboardAvailable() {
     if (typeof window === "undefined") {
       return false;
@@ -173,6 +208,20 @@ export default function BulkBookmarksAction() {
       hidden: !isBulkEditEnabled,
     },
     {
+      name: "Download Full Page Archive",
+      icon: <FileDown size={18} />,
+      action: () => recrawlBookmarks(true),
+      isPending: recrawlBookmarkMutator.isPending,
+      hidden: !isBulkEditEnabled,
+    },
+    {
+      name: "Refresh",
+      icon: <RotateCw size={18} />,
+      action: () => recrawlBookmarks(false),
+      isPending: recrawlBookmarkMutator.isPending,
+      hidden: !isBulkEditEnabled,
+    },
+    {
       name: "Delete",
       icon: <Trash2 size={18} color="red" />,
       action: () => setIsDeleteDialogOpen(true),
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
index 4007090e..c09d2e50 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
@@ -11,6 +11,7 @@ import {
 import { useToast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
 import {
+  FileDown,
   Link,
   List,
   ListX,
@@ -88,6 +89,15 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
     onError,
   });
 
+  const fullPageArchiveBookmarkMutator = useRecrawlBookmark({
+    onSuccess: () => {
+      toast({
+        description: "Full Page Archive creation has been triggered",
+      });
+    },
+    onError,
+  });
+
   const removeFromListMutator = useRemoveBookmarkFromList({
     onSuccess: () => {
       toast({
@@ -152,6 +162,21 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
             />
             <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
           </DropdownMenuItem>
+
+          {bookmark.content.type === BookmarkTypes.LINK && (
+            <DropdownMenuItem
+              onClick={() => {
+                fullPageArchiveBookmarkMutator.mutate({
+                  bookmarkId: bookmark.id,
+                  archiveFullPage: true,
+                });
+              }}
+            >
+              <FileDown className="mr-2 size-4" />
+              <span>Download Full Page Archive</span>
+            </DropdownMenuItem>
+          )}
+
           {bookmark.content.type === BookmarkTypes.LINK && (
             <DropdownMenuItem
               onClick={() => {