From 49f6ff04d0da06e88aad86478051c421570c49b8 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 5 Nov 2024 22:56:54 -0500
Subject: [PATCH 1/2] Add more actions to categories

---
 apps/web/components/GroupedTable.tsx | 67 +++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/GroupedTable.tsx b/apps/web/components/GroupedTable.tsx
index 239f4b517..43e8af966 100644
--- a/apps/web/components/GroupedTable.tsx
+++ b/apps/web/components/GroupedTable.tsx
@@ -12,7 +12,14 @@ import {
   type ColumnDef,
   flexRender,
 } from "@tanstack/react-table";
-import { ArchiveIcon, ChevronRight, PencilIcon } from "lucide-react";
+import {
+  ArchiveIcon,
+  ChevronRight,
+  MoreVerticalIcon,
+  PencilIcon,
+  TagIcon,
+  TagsIcon,
+} from "lucide-react";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import type { Category } from "@prisma/client";
 import { EmailCell } from "@/components/EmailCell";
@@ -41,6 +48,17 @@ import {
 import { getGmailSearchUrl, getGmailUrl } from "@/utils/url";
 import { MessageText } from "@/components/Typography";
 import { CreateCategoryDialog } from "@/app/(app)/smart-categories/CreateCategoryButton";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useLabels, type UserLabel } from "@/hooks/useLabels";
+import { LabelsSubMenu } from "@/components/LabelsSubMenu";
 
 const COLUMNS = 4;
 
@@ -172,6 +190,8 @@ export function GroupedTable({
   const [selectedCategoryName, setSelectedCategoryName] =
     useQueryState("categoryName");
 
+  const { userLabels: labels } = useLabels();
+
   return (
     <>
       <Table>
@@ -204,6 +224,7 @@ export function GroupedTable({
                   }}
                   onArchiveAll={onArchiveAll}
                   onEditCategory={onEditCategory}
+                  labels={labels}
                 />
                 {isCategoryExpanded && (
                   <SenderRows
@@ -316,6 +337,7 @@ function GroupRow({
   category,
   count,
   isExpanded,
+  labels,
   onToggle,
   onArchiveAll,
   onEditCategory,
@@ -323,6 +345,7 @@ function GroupRow({
   category: string;
   count: number;
   isExpanded: boolean;
+  labels: UserLabel[];
   onToggle: () => void;
   onArchiveAll: () => void;
   onEditCategory: () => void;
@@ -346,10 +369,44 @@ function GroupRow({
         </div>
       </TableCell>
       <TableCell className="flex justify-end gap-1.5 py-1">
-        <Button variant="ghost" size="xs" onClick={onEditCategory}>
-          <PencilIcon className="size-4" />
-          <span className="sr-only">Edit</span>
-        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="xs">
+              <MoreVerticalIcon className="size-4" />
+              <span className="sr-only">More</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={onEditCategory}>
+              <PencilIcon className="mr-2 size-4" />
+              Edit Prompt
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ArchiveIcon className="mr-2 size-4" />
+              Auto archive
+            </DropdownMenuItem>
+
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <TagsIcon className="mr-2 size-4" />
+                <span>Auto archive and label</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <TagIcon className="mr-2 size-4" />
+                <span>Auto label</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
         <Button variant="outline" size="xs" onClick={onArchiveAll}>
           <ArchiveIcon className="mr-2 size-4" />
           Archive all

From afdabbe950fbb9c9cb449f1c0837b92eec05cae7 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Sun, 29 Dec 2024 23:26:47 +0200
Subject: [PATCH 2/2] Remove all from category button

---
 apps/web/components/GroupedTable.tsx | 70 ++++++++++++----------------
 apps/web/utils/actions/categorize.ts | 18 +++++++
 2 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/apps/web/components/GroupedTable.tsx b/apps/web/components/GroupedTable.tsx
index ecf91b32a..338320686 100644
--- a/apps/web/components/GroupedTable.tsx
+++ b/apps/web/components/GroupedTable.tsx
@@ -17,10 +17,9 @@ import {
   ChevronRight,
   MoreVerticalIcon,
   PencilIcon,
-  TagIcon,
-  TagsIcon,
   FileCogIcon,
   PlusIcon,
+  BookmarkXIcon,
 } from "lucide-react";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { RuleType } from "@prisma/client";
@@ -37,7 +36,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { changeSenderCategoryAction } from "@/utils/actions/categorize";
+import {
+  changeSenderCategoryAction,
+  removeAllFromCategoryAction,
+} from "@/utils/actions/categorize";
 import { toastError, toastSuccess } from "@/components/Toast";
 import { isActionError } from "@/utils/error";
 import { useAiCategorizationQueueItem } from "@/store/ai-categorize-sender-queue";
@@ -54,13 +56,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useLabels, type UserLabel } from "@/hooks/useLabels";
-import { LabelsSubMenu } from "@/components/LabelsSubMenu";
 import type { CategoryWithRules } from "@/utils/category.server";
 
 const COLUMNS = 4;
@@ -204,8 +201,6 @@ export function GroupedTable({
   const [selectedCategoryName, setSelectedCategoryName] =
     useQueryState("categoryName");
 
-  const { userLabels: labels } = useLabels();
-
   return (
     <>
       <Table>
@@ -223,6 +218,22 @@ export function GroupedTable({
               setSelectedCategoryName(categoryName);
             };
 
+            const onRemoveAllFromCategory = async () => {
+              const yes = confirm(
+                "This will remove all emails from this category. You can re-categorize them later. Do you want to continue?",
+              );
+              if (!yes) return;
+              const result = await removeAllFromCategoryAction(categoryName);
+
+              if (isActionError(result)) {
+                toastError({ description: result.error });
+              } else {
+                toastSuccess({
+                  description: "All emails removed from category",
+                });
+              }
+            };
+
             const category = categoryMap[categoryName];
 
             if (!category) {
@@ -244,7 +255,7 @@ export function GroupedTable({
                   }}
                   onArchiveAll={onArchiveAll}
                   onEditCategory={onEditCategory}
-                  labels={labels}
+                  onRemoveAllFromCategory={onRemoveAllFromCategory}
                 />
                 {isCategoryExpanded && (
                   <SenderRows
@@ -357,18 +368,18 @@ function GroupRow({
   category,
   count,
   isExpanded,
-  labels,
   onToggle,
   onArchiveAll,
   onEditCategory,
+  onRemoveAllFromCategory,
 }: {
   category: CategoryWithRules;
   count: number;
   isExpanded: boolean;
-  labels: UserLabel[];
   onToggle: () => void;
   onArchiveAll: () => void;
   onEditCategory: () => void;
+  onRemoveAllFromCategory: () => void;
 }) {
   return (
     <TableRow className="h-8 cursor-pointer bg-gray-50">
@@ -399,38 +410,15 @@ function GroupRow({
           <DropdownMenuContent align="end">
             <DropdownMenuItem onClick={onEditCategory}>
               <PencilIcon className="mr-2 size-4" />
-              Edit Prompt
+              Edit
             </DropdownMenuItem>
-            <DropdownMenuItem>
-              <ArchiveIcon className="mr-2 size-4" />
-              Auto archive
+            <DropdownMenuItem onClick={onRemoveAllFromCategory}>
+              <BookmarkXIcon className="mr-2 size-4" />
+              Remove All From Category
             </DropdownMenuItem>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>
-                <TagsIcon className="mr-2 size-4" />
-                <span>Auto archive and label</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>
-                <TagIcon className="mr-2 size-4" />
-                <span>Auto label</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <LabelsSubMenu labels={labels} onClick={(labelId) => {}} />
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Button variant="ghost" size="xs" onClick={onEditCategory}>
-          <PencilIcon className="size-4" />
-          <span className="sr-only">Edit</span>
-        </Button>
+
         {category.rules.length ? (
           <div className="flex items-center gap-1">
             {category.rules.map((rule) => (
diff --git a/apps/web/utils/actions/categorize.ts b/apps/web/utils/actions/categorize.ts
index a19170329..accd4427d 100644
--- a/apps/web/utils/actions/categorize.ts
+++ b/apps/web/utils/actions/categorize.ts
@@ -234,3 +234,21 @@ export const setAutoCategorizeAction = withActionInstrumentation(
     return { autoCategorizeSenders };
   },
 );
+
+export const removeAllFromCategoryAction = withActionInstrumentation(
+  "removeAllFromCategory",
+  async (categoryName: string) => {
+    const session = await auth();
+    if (!session?.user) return { error: "Not authenticated" };
+
+    await prisma.newsletter.updateMany({
+      where: {
+        category: { name: categoryName },
+        userId: session.user.id,
+      },
+      data: { categoryId: null },
+    });
+
+    revalidatePath("/smart-categories");
+  },
+);