feature(web): Add support for removing items from lists

1 files changed, 30 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
index 692d7d78..249946b4 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -10,11 +10,13 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useToast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
+import { BookmarkListContext } from "@/lib/hooks/list-context";
 import { api } from "@/lib/trpc";
 import {
   Archive,
   Link,
   List,
+  ListX,
   MoreHorizontal,
   Pencil,
   RotateCw,
@@ -42,6 +44,8 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
 
   const [isTextEditorOpen, setTextEditorOpen] = useState(false);
 
+  const { listId } = useContext(BookmarkListContext);
+
   const invalidateAllBookmarksCache =
     api.useUtils().bookmarks.getBookmarks.invalidate;
 
@@ -92,6 +96,16 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
     },
   });
 
+  const removeFromListMutator = api.lists.removeFromList.useMutation({
+    onSuccess: (_resp, req) => {
+      invalidateAllBookmarksCache({ listId: req.listId });
+      toast({
+        description: "The bookmark has been deleted from the list",
+      });
+    },
+    onError,
+  });
+
   return (
     <>
       {tagModal}
@@ -166,6 +180,21 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
             <span>Add to List</span>
           </DropdownMenuItem>
 
+          {listId && (
+            <DropdownMenuItem
+              disabled={demoMode}
+              onClick={() =>
+                removeFromListMutator.mutate({
+                  listId,
+                  bookmarkId: bookmark.id,
+                })
+              }
+            >
+              <ListX className="mr-2 size-4" />
+              <span>Remove from List</span>
+            </DropdownMenuItem>
+          )}
+
           {bookmark.content.type === "link" && (
             <DropdownMenuItem
               disabled={demoMode}