feat: add categorization feature for transaction groups with UI enhancements for category selection

components/transactions/transaction-bulk-actions.tsx

@@ -1,16 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
-import { CategoryIcon } from "@/components/ui/category-icon";
-import { CheckCircle2, Circle, Tags } from "lucide-react";
+import { CategoryCombobox } from "@/components/ui/category-combobox";
+import { CheckCircle2, Circle } from "lucide-react";
 import type { Category } from "@/lib/types";
 
 interface TransactionBulkActionsProps {
@@ -26,8 +20,15 @@ export function TransactionBulkActions({
   onReconcile,
   onSetCategory,
 }: TransactionBulkActionsProps) {
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
+
   if (selectedCount === 0) return null;
 
+  const handleCategorySelect = (categoryId: string | null) => {
+    setSelectedCategoryId(null); // Reset après sélection
+    onSetCategory(categoryId);
+  };
+
   return (
     <Card className="bg-primary/5 border-primary/20">
       <CardContent className="py-3">
@@ -47,34 +48,14 @@ export function TransactionBulkActions({
             <Circle className="w-4 h-4 mr-1" />
             Dépointer
           </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="sm" variant="outline">
-                <Tags className="w-4 h-4 mr-1" />
-                Catégoriser
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem onClick={() => onSetCategory(null)}>
-                Aucune catégorie
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              {categories.map((cat) => (
-                <DropdownMenuItem
-                  key={cat.id}
-                  onClick={() => onSetCategory(cat.id)}
-                >
-                  <CategoryIcon
-                    icon={cat.icon}
-                    color={cat.color}
-                    size={14}
-                    className="mr-2"
-                  />
-                  {cat.name}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <CategoryCombobox
+            categories={categories}
+            value={selectedCategoryId}
+            onChange={handleCategorySelect}
+            placeholder="Catégoriser..."
+            width="w-[300px]"
+            buttonWidth="w-auto"
+          />
         </div>
       </CardContent>
     </Card>