fix: Refresh the all tags page automatically when a tag is modified

2 files changed, 71 insertions, 4 deletions

diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
index ecd6d29c..91294b2e 100644
--- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx
@@ -17,16 +17,16 @@ interface EditableTag {
 
 export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) {
   const demoMode = !!useClientConfig().demoMode;
-  const bookmarkInvalidationFunction =
-    api.useUtils().bookmarks.getBookmark.invalidate;
+  const apiUtils = api.useUtils();
 
   const { mutate } = api.bookmarks.updateTags.useMutation({
     onSuccess: () => {
       toast({
         description: "Tags has been updated!",
       });
-      bookmarkInvalidationFunction({ bookmarkId: bookmark.id });
-      // TODO(bug) Invalidate the tag views as well
+      apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
+      apiUtils.tags.list.invalidate();
+      apiUtils.tags.get.invalidate();
     },
     onError: () => {
       toast({
diff --git a/apps/web/components/dashboard/tags/AllTagsView.tsx b/apps/web/components/dashboard/tags/AllTagsView.tsx
new file mode 100644
index 00000000..0f9ee823
--- /dev/null
+++ b/apps/web/components/dashboard/tags/AllTagsView.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import Link from "next/link";
+import InfoTooltip from "@/components/ui/info-tooltip";
+import { Separator } from "@/components/ui/separator";
+import { api } from "@/lib/trpc";
+
+import type { ZGetTagResponse } from "@hoarder/trpc/types/tags";
+
+function TagPill({ name, count }: { name: string; count: number }) {
+  return (
+    <Link
+      className="flex gap-2 rounded-md border border-border bg-background px-2 py-1 text-foreground hover:bg-foreground hover:text-background"
+      href={`/dashboard/tags/${name}`}
+    >
+      {name} <Separator orientation="vertical" /> {count}
+    </Link>
+  );
+}
+
+export default function AllTagsView({
+  initialData,
+}: {
+  initialData: ZGetTagResponse[];
+}) {
+  const { data } = api.tags.list.useQuery(undefined, {
+    initialData: { tags: initialData },
+  });
+  // Sort tags by usage desc
+  const allTags = data.tags.sort((a, b) => b.count - a.count);
+
+  const humanTags = allTags.filter((t) => (t.countAttachedBy.human ?? 0) > 0);
+  const aiTags = allTags.filter((t) => (t.countAttachedBy.human ?? 0) == 0);
+
+  const tagsToPill = (tags: typeof allTags) => {
+    let tagPill;
+    if (tags.length) {
+      tagPill = tags.map((t) => (
+        <TagPill key={t.id} name={t.name} count={t.count} />
+      ));
+    } else {
+      tagPill = "No Tags";
+    }
+    return tagPill;
+  };
+  return (
+    <>
+      <span className="flex items-center gap-2">
+        <p className="text-lg">Your Tags</p>
+        <InfoTooltip size={15} className="my-auto" variant="explain">
+          <p>Tags that were attached at least once by you</p>
+        </InfoTooltip>
+      </span>
+      <div className="flex flex-wrap gap-3">{tagsToPill(humanTags)}</div>
+
+      <Separator />
+
+      <span className="flex items-center gap-2">
+        <p className="text-lg">AI Tags</p>
+        <InfoTooltip size={15} className="my-auto" variant="explain">
+          <p>Tags that were only attached automatically (by AI)</p>
+        </InfoTooltip>
+      </span>
+      <div className="flex flex-wrap gap-3">{tagsToPill(aiTags)}</div>
+    </>
+  );
+}