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

components/ui/category-combobox.tsx

@@ -29,6 +29,7 @@ interface CategoryComboboxProps {
   showBadge?: boolean;
   align?: "start" | "center" | "end";
   width?: string;
+  buttonWidth?: string;
 }
 
 export function CategoryCombobox({
@@ -39,6 +40,7 @@ export function CategoryCombobox({
   showBadge = false,
   align = "start",
   width = "w-[300px]",
+  buttonWidth,
 }: CategoryComboboxProps) {
   const [open, setOpen] = useState(false);
 
@@ -181,7 +183,10 @@ export function CategoryCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full justify-between"
+          className={cn(
+            "justify-between",
+            buttonWidth || "w-full"
+          )}
         >
           {selectedCategory ? (
             <div className="flex items-center gap-2">
@@ -207,6 +212,21 @@ export function CategoryCombobox({
           <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}>