From 77b1aba5acc66dfaeb02b08d60d88442336026a6 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 23 Apr 2024 13:56:35 +0100
Subject: feature(extension): Allow adding tags and lists to newly hoarded
 bookmarks

---
 .../src/components/BookmarkLists.tsx               | 45 ++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 apps/browser-extension/src/components/BookmarkLists.tsx

(limited to 'apps/browser-extension/src/components/BookmarkLists.tsx')

diff --git a/apps/browser-extension/src/components/BookmarkLists.tsx b/apps/browser-extension/src/components/BookmarkLists.tsx
new file mode 100644
index 00000000..9ccd8951
--- /dev/null
+++ b/apps/browser-extension/src/components/BookmarkLists.tsx
@@ -0,0 +1,45 @@
+import { X } from "lucide-react";
+
+import {
+  useBookmarkLists,
+  useRemoveBookmarkFromList,
+} from "@hoarder/shared-react/hooks/lists";
+
+import { api } from "../utils/trpc";
+import { Button } from "./ui/button";
+
+export default function BookmarkLists({ bookmarkId }: { bookmarkId: string }) {
+  const { data: allLists } = useBookmarkLists();
+
+  const { mutate: deleteFromList } = useRemoveBookmarkFromList();
+
+  const { data: lists } = api.lists.getListsOfBookmark.useQuery({ bookmarkId });
+  if (!lists || !allLists) {
+    return null;
+  }
+
+  return (
+    <ul className="flex flex-col gap-1">
+      {lists.lists.map((l) => (
+        <li
+          key={l.id}
+          className="flex items-center justify-between rounded border border-border bg-background p-2 text-sm text-foreground"
+        >
+          <span>
+            {allLists
+              .getPathById(l.id)!
+              .map((l) => `${l.icon} ${l.name}`)
+              .join(" / ")}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => deleteFromList({ bookmarkId, listId: l.id })}
+          >
+            <X className="size-4" />
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}
-- 
cgit v1.2.3-70-g09d2