feat: replace category selection with CategoryCombobox in RuleCreateDialog and TransactionTable for improved user experience

components/rules/rule-create-dialog.tsx

@@ -13,15 +13,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
-import { CategoryIcon } from "@/components/ui/category-icon";
+import { CategoryCombobox } from "@/components/ui/category-combobox";
 import { Tag, AlertCircle, CheckCircle2 } from "lucide-react";
 import type { Category, Transaction } from "@/lib/types";
 
@@ -54,7 +47,7 @@ export function RuleCreateDialog({
   onSave,
 }: RuleCreateDialogProps) {
   const [keyword, setKeyword] = useState("");
-  const [categoryId, setCategoryId] = useState<string>("");
+  const [categoryId, setCategoryId] = useState<string | null>(null);
   const [applyToExisting, setApplyToExisting] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -62,28 +55,11 @@ export function RuleCreateDialog({
   useEffect(() => {
     if (group) {
       setKeyword(group.suggestedKeyword);
-      setCategoryId("");
+      setCategoryId(null);
       setApplyToExisting(true);
     }
   }, [group]);
 
-  // Organize categories by parent
-  const { parentCategories, childrenByParent } = useMemo(() => {
-    const parents = categories.filter((c) => c.parentId === null);
-    const children: Record<string, Category[]> = {};
-
-    categories
-      .filter((c) => c.parentId !== null)
-      .forEach((child) => {
-        if (!children[child.parentId!]) {
-          children[child.parentId!] = [];
-        }
-        children[child.parentId!].push(child);
-      });
-
-    return { parentCategories: parents, childrenByParent: children };
-  }, [categories]);
-
   // Check if keyword already exists in any category
   const existingCategory = useMemo(() => {
     if (!keyword) return null;
@@ -166,42 +142,16 @@ export function RuleCreateDialog({
             )}
           </div>
 
-          {/* Category select */}
+          {/* Category select with search */}
           <div className="space-y-2">
-            <Label htmlFor="category">Catégorie</Label>
+            <Label>Catégorie</Label>
-            <Select value={categoryId} onValueChange={setCategoryId}>
+            <CategoryCombobox
-              <SelectTrigger>
+              categories={categories}
-                <SelectValue placeholder="Sélectionner une catégorie" />
+              value={categoryId}
-              </SelectTrigger>
+              onChange={setCategoryId}
-              <SelectContent>
+              placeholder="Sélectionner une catégorie..."
-                {parentCategories.map((parent) => (
+              width="w-full"
-                  <div key={parent.id}>
+            />
-                    <SelectItem value={parent.id} className="font-medium">
-                      <div className="flex items-center gap-2">
-                        <CategoryIcon
-                          icon={parent.icon}
-                          color={parent.color}
-                          size={16}
-                        />
-                        <span>{parent.name}</span>
-                      </div>
-                    </SelectItem>
-                    {childrenByParent[parent.id]?.map((child) => (
-                      <SelectItem key={child.id} value={child.id}>
-                        <div className="flex items-center gap-2 pl-4">
-                          <CategoryIcon
-                            icon={child.icon}
-                            color={child.color}
-                            size={16}
-                          />
-                          <span>{child.name}</span>
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </div>
-                ))}
-              </SelectContent>
-            </Select>
             {selectedCategory && (
               <div className="flex items-center gap-2 flex-wrap">
                 <span className="text-xs text-muted-foreground">

components/transactions/transaction-table.tsx

@@ -4,21 +4,18 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Badge } from "@/components/ui/badge";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { CategoryIcon } from "@/components/ui/category-icon";
+import { CategoryCombobox } from "@/components/ui/category-combobox";
 import {
   CheckCircle2,
   Circle,
   MoreVertical,
   ArrowUpDown,
-  Check,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Transaction, Account, Category } from "@/lib/types";
@@ -110,11 +107,6 @@ export function TransactionTable({
   useEffect(() => {
     setFocusedIndex(null);
   }, [transactions.length]);
-  const getCategory = (categoryId: string | null) => {
-    if (!categoryId) return null;
-    return categories.find((c) => c.id === categoryId);
-  };
-
   const getAccount = (accountId: string) => {
     return accounts.find((a) => a.id === accountId);
   };
@@ -181,7 +173,6 @@ export function TransactionTable({
               </thead>
               <tbody>
                 {transactions.map((transaction, index) => {
-                  const category = getCategory(transaction.categoryId);
                   const account = getAccount(transaction.accountId);
                   const isFocused = focusedIndex === index;
 
@@ -222,64 +213,16 @@ export function TransactionTable({
                       <td className="p-3 text-sm text-muted-foreground">
                         {account?.name || "-"}
                       </td>
-                      <td className="p-3">
+                      <td className="p-3" onClick={(e) => e.stopPropagation()}>
-                        <DropdownMenu>
+                        <CategoryCombobox
-                          <DropdownMenuTrigger asChild>
+                          categories={categories}
-                            <button className="flex items-center gap-1 hover:opacity-80">
+                          value={transaction.categoryId}
-                              {category ? (
+                          onChange={(categoryId) =>
-                                <Badge
+                            onSetCategory(transaction.id, categoryId)
-                                  variant="secondary"
+                          }
-                                  className="gap-1"
+                          showBadge
-                                  style={{
+                          align="start"
-                                    backgroundColor: `${category.color}20`,
+                        />
-                                    color: category.color,
-                                  }}
-                                >
-                                  <CategoryIcon
-                                    icon={category.icon}
-                                    color={category.color}
-                                    size={12}
-                                  />
-                                  {category.name}
-                                </Badge>
-                              ) : (
-                                <Badge
-                                  variant="outline"
-                                  className="text-muted-foreground"
-                                >
-                                  Non catégorisé
-                                </Badge>
-                              )}
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent>
-                            <DropdownMenuItem
-                              onClick={() => onSetCategory(transaction.id, null)}
-                            >
-                              Aucune catégorie
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            {categories.map((cat) => (
-                              <DropdownMenuItem
-                                key={cat.id}
-                                onClick={() =>
-                                  onSetCategory(transaction.id, cat.id)
-                                }
-                              >
-                                <CategoryIcon
-                                  icon={cat.icon}
-                                  color={cat.color}
-                                  size={14}
-                                  className="mr-2"
-                                />
-                                {cat.name}
-                                {transaction.categoryId === cat.id && (
-                                  <Check className="w-4 h-4 ml-auto" />
-                                )}
-                              </DropdownMenuItem>
-                            ))}
-                          </DropdownMenuContent>
-                        </DropdownMenu>
                       </td>
                       <td
                         className={cn(

components/ui/category-combobox.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { ChevronsUpDown, Check, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Category } from "@/lib/types";
+
+interface CategoryComboboxProps {
+  categories: Category[];
+  value: string | null;
+  onChange: (categoryId: string | null) => void;
+  placeholder?: string;
+  showBadge?: boolean;
+  align?: "start" | "center" | "end";
+  width?: string;
+}
+
+export function CategoryCombobox({
+  categories,
+  value,
+  onChange,
+  placeholder = "Sélectionner...",
+  showBadge = false,
+  align = "start",
+  width = "w-[300px]",
+}: CategoryComboboxProps) {
+  const [open, setOpen] = useState(false);
+
+  // Organize categories by parent
+  const { parentCategories, childrenByParent } = useMemo(() => {
+    const parents = categories.filter((c) => c.parentId === null);
+    const children: Record<string, Category[]> = {};
+
+    categories
+      .filter((c) => c.parentId !== null)
+      .forEach((child) => {
+        if (!children[child.parentId!]) {
+          children[child.parentId!] = [];
+        }
+        children[child.parentId!].push(child);
+      });
+
+    return { parentCategories: parents, childrenByParent: children };
+  }, [categories]);
+
+  const selectedCategory = categories.find((c) => c.id === value);
+
+  const handleSelect = (categoryId: string | null) => {
+    onChange(categoryId);
+    setOpen(false);
+  };
+
+  // Badge style trigger
+  if (showBadge) {
+    return (
+      <Popover open={open} onOpenChange={setOpen} modal={true}>
+        <PopoverTrigger asChild>
+          <button className="flex items-center gap-1 hover:opacity-80">
+            {selectedCategory ? (
+              <Badge
+                variant="secondary"
+                className="gap-1 cursor-pointer"
+                style={{
+                  backgroundColor: `${selectedCategory.color}20`,
+                  color: selectedCategory.color,
+                }}
+              >
+                <CategoryIcon
+                  icon={selectedCategory.icon}
+                  color={selectedCategory.color}
+                  size={12}
+                />
+                {selectedCategory.name}
+              </Badge>
+            ) : (
+              <Badge
+                variant="outline"
+                className="text-muted-foreground cursor-pointer"
+              >
+                Non catégorisé
+              </Badge>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className={cn(width, "p-0")}
+          align={align}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command>
+            <CommandInput placeholder="Rechercher une catégorie..." />
+            <CommandList className="max-h-[250px]">
+              <CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  value="__none__"
+                  onSelect={() => handleSelect(null)}
+                >
+                  <X className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-muted-foreground">Aucune catégorie</span>
+                  <Check
+                    className={cn(
+                      "ml-auto h-4 w-4",
+                      value === null ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup>
+                {parentCategories.map((parent) => (
+                  <div key={parent.id}>
+                    <CommandItem
+                      value={`${parent.name}`}
+                      onSelect={() => handleSelect(parent.id)}
+                    >
+                      <CategoryIcon
+                        icon={parent.icon}
+                        color={parent.color}
+                        size={16}
+                      />
+                      <span className="font-medium">{parent.name}</span>
+                      <Check
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          value === parent.id ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                    {childrenByParent[parent.id]?.map((child) => (
+                      <CommandItem
+                        key={child.id}
+                        value={`${parent.name} ${child.name}`}
+                        onSelect={() => handleSelect(child.id)}
+                        className="pl-8"
+                      >
+                        <CategoryIcon
+                          icon={child.icon}
+                          color={child.color}
+                          size={16}
+                        />
+                        <span>{child.name}</span>
+                        <Check
+                          className={cn(
+                            "ml-auto h-4 w-4",
+                            value === child.id ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </div>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Button style trigger (default)
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selectedCategory ? (
+            <div className="flex items-center gap-2">
+              <CategoryIcon
+                icon={selectedCategory.icon}
+                color={selectedCategory.color}
+                size={16}
+              />
+              <span>{selectedCategory.name}</span>
+            </div>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn(width, "p-0")}
+        align={align}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <Command>
+          <CommandInput placeholder="Rechercher une catégorie..." />
+          <CommandList className="max-h-[250px]">
+            <CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
+            <CommandGroup>
+              {parentCategories.map((parent) => (
+                <div key={parent.id}>
+                  <CommandItem
+                    value={`${parent.name}`}
+                    onSelect={() => handleSelect(parent.id)}
+                  >
+                    <CategoryIcon
+                      icon={parent.icon}
+                      color={parent.color}
+                      size={16}
+                    />
+                    <span className="font-medium">{parent.name}</span>
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        value === parent.id ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                  {childrenByParent[parent.id]?.map((child) => (
+                    <CommandItem
+                      key={child.id}
+                      value={`${parent.name} ${child.name}`}
+                      onSelect={() => handleSelect(child.id)}
+                      className="pl-8"
+                    >
+                      <CategoryIcon
+                        icon={child.icon}
+                        color={child.color}
+                        size={16}
+                      />
+                      <span>{child.name}</span>
+                      <Check
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          value === child.id ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </div>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+