diff --git a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
index a906aee8..9451e736 100644
--- a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
@@ -19,7 +19,7 @@ import {
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
-import { X } from "lucide-react";
+import { Archive, X } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
@@ -30,6 +30,7 @@ import {
} from "@hoarder/shared-react/hooks/lists";
import { BookmarkListSelector } from "../lists/BookmarkListSelector";
+import ArchiveBookmarkButton from "./action-buttons/ArchiveBookmarkButton";
export default function ManageListsModal({
bookmarkId,
@@ -179,6 +180,13 @@ export default function ManageListsModal({
Close
+ setOpen(false)}
+ >
+ Archive
+
{
+ bookmarkId: string;
+ onDone?: () => void;
+}
+
+const ArchiveBookmarkButton = React.forwardRef<
+ HTMLButtonElement,
+ ArchiveBookmarkButtonProps
+>(({ bookmarkId, onDone, ...props }, ref) => {
+ const { data } = api.bookmarks.getBookmark.useQuery({ bookmarkId });
+
+ const { mutate: updateBookmark, isPending: isArchivingBookmark } =
+ useUpdateBookmark({
+ onSuccess: () => {
+ toast({
+ description: "Bookmark has been archived!",
+ });
+ onDone?.();
+ },
+ onError: (e) => {
+ if (e.data?.code == "BAD_REQUEST") {
+ toast({
+ variant: "destructive",
+ description: e.message,
+ });
+ } else {
+ toast({
+ variant: "destructive",
+ title: "Something went wrong",
+ });
+ }
+ },
+ });
+
+ if (!data) {
+ return ;
+ }
+
+ return (
+
+ updateBookmark({
+ bookmarkId,
+ archived: !data.archived,
+ })
+ }
+ {...props}
+ />
+ );
+});
+
+ArchiveBookmarkButton.displayName = "ArchiveBookmarkButton";
+export default ArchiveBookmarkButton;
diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx
index 2ac361f5..b3984d97 100644
--- a/apps/web/components/ui/action-button.tsx
+++ b/apps/web/components/ui/action-button.tsx
@@ -58,3 +58,4 @@ const ActionButtonWithTooltip = React.forwardRef<
ActionButtonWithTooltip.displayName = "ActionButtonWithTooltip";
export { ActionButton, ActionButtonWithTooltip };
+export type { ActionButtonProps };