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

3 files changed, 66 insertions, 13 deletions

diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx
index f28d94b1..bac2b5c7 100644
--- a/apps/web/app/dashboard/lists/[listId]/page.tsx
+++ b/apps/web/app/dashboard/lists/[listId]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
 import DeleteListButton from "@/components/dashboard/lists/DeleteListButton";
+import { BookmarkListContextProvider } from "@/lib/hooks/list-context";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { TRPCError } from "@trpc/server";
@@ -28,17 +29,19 @@ export default async function ListPage({
   }
 
   return (
-    <Bookmarks
-      query={{ listId: list.id, archived: false }}
-      showDivider={true}
-      header={
-        <div className="flex justify-between">
-          <span className="pt-4 text-2xl">
-            {list.icon} {list.name}
-          </span>
-          <DeleteListButton list={list} />
-        </div>
-      }
-    />
+    <BookmarkListContextProvider listId={list.id}>
+      <Bookmarks
+        query={{ listId: list.id, archived: false }}
+        showDivider={true}
+        header={
+          <div className="flex justify-between">
+            <span className="pt-4 text-2xl">
+              {list.icon} {list.name}
+            </span>
+            <DeleteListButton list={list} />
+          </div>
+        }
+      />
+    </BookmarkListContextProvider>
   );
 }
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}
diff --git a/apps/web/lib/hooks/list-context.tsx b/apps/web/lib/hooks/list-context.tsx
new file mode 100644
index 00000000..cb8a20b2
--- /dev/null
+++ b/apps/web/lib/hooks/list-context.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { createContext } from "react";
+
+export const BookmarkListContext = createContext<{
+  listId: string | undefined;
+}>({ listId: undefined });
+
+export function BookmarkListContextProvider({
+  listId,
+  children,
+}: {
+  listId: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <BookmarkListContext.Provider value={{ listId }}>
+      {children}
+    </BookmarkListContext.Provider>
+  );
+}