feature: Allow users to delete all unused tags in one go

3 files changed, 89 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/tags/AllTagsView.tsx b/apps/web/components/dashboard/tags/AllTagsView.tsx
index ce780a2f..a16dd759 100644
--- a/apps/web/components/dashboard/tags/AllTagsView.tsx
+++ b/apps/web/components/dashboard/tags/AllTagsView.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import Link from "next/link";
+import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -9,13 +11,50 @@ import {
 } from "@/components/ui/collapsible";
 import InfoTooltip from "@/components/ui/info-tooltip";
 import { Separator } from "@/components/ui/separator";
+import { toast } from "@/components/ui/use-toast";
 import { api } from "@/lib/trpc";
 import { X } from "lucide-react";
 
 import type { ZGetTagResponse } from "@hoarder/shared/types/tags";
+import { useDeleteUnusedTags } from "@hoarder/shared-react/hooks/tags";
 
 import DeleteTagConfirmationDialog from "./DeleteTagConfirmationDialog";
 
+function DeleteAllUnusedTags({ numUnusedTags }: { numUnusedTags: number }) {
+  const { mutate, isPending } = useDeleteUnusedTags({
+    onSuccess: () => {
+      toast({
+        description: `Deleted all ${numUnusedTags} unused tags`,
+      });
+    },
+    onError: () => {
+      toast({
+        description: "Something went wrong",
+        variant: "destructive",
+      });
+    },
+  });
+  return (
+    <ActionConfirmingDialog
+      title="Delete all unused tags?"
+      description={`Are you sure you want to delete the ${numUnusedTags} unused tags?`}
+      actionButton={() => (
+        <ActionButton
+          variant="destructive"
+          loading={isPending}
+          onClick={() => mutate()}
+        >
+          DELETE THEM ALL
+        </ActionButton>
+      )}
+    >
+      <Button variant="destructive" disabled={numUnusedTags == 0}>
+        Delete All Unused Tags
+      </Button>
+    </ActionConfirmingDialog>
+  );
+}
+
 function TagPill({
   id,
   name,
@@ -102,9 +141,18 @@ export default function AllTagsView({
         </InfoTooltip>
       </span>
       <Collapsible>
-        <CollapsibleTrigger className="pb-2">
-          <Button variant="link">Show {emptyTags.length} unused tags</Button>
-        </CollapsibleTrigger>
+        <div className="space-x-1 pb-2">
+          <CollapsibleTrigger asChild>
+            <Button variant="secondary" disabled={emptyTags.length == 0}>
+              {emptyTags.length > 0
+                ? `Show ${emptyTags.length} unused tags`
+                : "You don't have any unused tags"}
+            </Button>
+          </CollapsibleTrigger>
+          {emptyTags.length > 0 && (
+            <DeleteAllUnusedTags numUnusedTags={emptyTags.length} />
+          )}
+        </div>
         <CollapsibleContent>
           <div className="flex flex-wrap gap-3">{tagsToPill(emptyTags)}</div>
         </CollapsibleContent>
diff --git a/packages/shared-react/hooks/tags.ts b/packages/shared-react/hooks/tags.ts
index d3129fed..6ce0f0c9 100644
--- a/packages/shared-react/hooks/tags.ts
+++ b/packages/shared-react/hooks/tags.ts
@@ -53,3 +53,17 @@ export function useDeleteTag(
     },
   });
 }
+
+export function useDeleteUnusedTags(
+  ...opts: Parameters<typeof api.tags.deleteUnused.useMutation>
+) {
+  const apiUtils = api.useUtils();
+
+  return api.tags.deleteUnused.useMutation({
+    ...opts[0],
+    onSuccess: (res, req, meta) => {
+      apiUtils.tags.list.invalidate();
+      return opts[0]?.onSuccess?.(res, req, meta);
+    },
+  });
+}
diff --git a/packages/trpc/routers/tags.ts b/packages/trpc/routers/tags.ts
index b95570ae..dc70b068 100644
--- a/packages/trpc/routers/tags.ts
+++ b/packages/trpc/routers/tags.ts
@@ -1,5 +1,5 @@
 import { experimental_trpcMiddleware, TRPCError } from "@trpc/server";
-import { and, eq, inArray } from "drizzle-orm";
+import { and, eq, inArray, notExists } from "drizzle-orm";
 import { z } from "zod";
 
 import type { ZAttachedByEnum } from "@hoarder/shared/types/tags";
@@ -115,6 +115,28 @@ export const tagsAppRouter = router({
       }
       // TODO: Update affected bookmarks in search index
     }),
+  deleteUnused: authedProcedure
+    .output(
+      z.object({
+        deletedTags: z.number(),
+      }),
+    )
+    .mutation(async ({ ctx }) => {
+      const res = await ctx.db
+        .delete(bookmarkTags)
+        .where(
+          and(
+            eq(bookmarkTags.userId, ctx.user.id),
+            notExists(
+              ctx.db
+                .select({ id: tagsOnBookmarks.tagId })
+                .from(tagsOnBookmarks)
+                .where(eq(tagsOnBookmarks.tagId, bookmarkTags.id)),
+            ),
+          ),
+        );
+      return { deletedTags: res.changes };
+    }),
   update: authedProcedure
     .input(
       z.object({
@@ -261,7 +283,7 @@ export const tagsAppRouter = router({
                   tagId: input.intoTagId,
                 })),
               )
-              .onConflictDoNothing()
+              .onConflictDoNothing();
           }
 
           // Delete the old tags