refactor: update value formatting in combobox components to include names for better context and usability

components/ui/account-filter-combobox.tsx

@@ -171,7 +171,7 @@ export function AccountFilterCombobox({
       <div key={folder.id}>
         {/* Folder row */}
         <CommandItem
-          value={`folder-${folder.id}`}
+          value={`folder-${folder.id} ${folder.name}`}
           onSelect={() => handleSelectFolder(folder.id)}
           style={{ paddingLeft: `${paddingLeft}px` }}
           className="font-medium"
@@ -195,7 +195,7 @@ export function AccountFilterCombobox({
           return (
             <CommandItem
               key={account.id}
-              value={account.id}
+              value={`${account.id} ${account.name}`}
               onSelect={() => handleSelect(account.id)}
               style={{ paddingLeft: `${paddingLeft + 16}px` }}
               className="min-w-0"
@@ -324,7 +324,7 @@ export function AccountFilterCombobox({
                   return (
                     <CommandItem
                       key={account.id}
-                      value={account.id}
+                      value={`${account.id} ${account.name}`}
                       onSelect={() => handleSelect(account.id)}
                       className="min-w-0"
                     >

components/ui/category-combobox.tsx

@@ -118,16 +118,14 @@ export function CategoryCombobox({
                   <span className="text-muted-foreground">
                     Aucune catégorie
                   </span>
-                  {value === null && (
-                    <Check className="ml-auto h-4 w-4" />
-                  )}
+                  {value === null && <Check className="ml-auto h-4 w-4" />}
                 </CommandItem>
               </CommandGroup>
               <CommandGroup>
                 {parentCategories.map((parent) => (
                   <div key={parent.id}>
                     <CommandItem
-                      value={parent.id}
+                      value={`${parent.id} ${parent.name}`}
                       onSelect={() => handleSelect(parent.id)}
                     >
                       <CategoryIcon
@@ -143,7 +141,7 @@ export function CategoryCombobox({
                     {childrenByParent[parent.id]?.map((child) => (
                       <CommandItem
                         key={child.id}
-                        value={child.id}
+                        value={`${child.id} ${child.name}`}
                         onSelect={() => handleSelect(child.id)}
                         className="pl-8"
                       >
@@ -206,16 +204,14 @@ export function CategoryCombobox({
               <CommandItem value="__none__" onSelect={() => handleSelect(null)}>
                 <X className="h-4 w-4 text-muted-foreground" />
                 <span className="text-muted-foreground">Aucune catégorie</span>
-                {value === null && (
-                  <Check className="ml-auto h-4 w-4" />
-                )}
+                {value === null && <Check className="ml-auto h-4 w-4" />}
               </CommandItem>
             </CommandGroup>
             <CommandGroup>
               {parentCategories.map((parent) => (
                 <div key={parent.id}>
                   <CommandItem
-                    value={parent.id}
+                    value={`${parent.id} ${parent.name}`}
                     onSelect={() => handleSelect(parent.id)}
                   >
                     <CategoryIcon
@@ -231,7 +227,7 @@ export function CategoryCombobox({
                   {childrenByParent[parent.id]?.map((child) => (
                     <CommandItem
                       key={child.id}
-                      value={child.id}
+                      value={`${child.id} ${child.name}`}
                       onSelect={() => handleSelect(child.id)}
                       className="pl-8"
                     >

components/ui/category-filter-combobox.tsx

@@ -237,7 +237,7 @@ export function CategoryFilterCombobox({
               {parentCategories.map((parent) => (
                 <div key={parent.id}>
                   <CommandItem
-                    value={parent.id}
+                    value={`${parent.id} ${parent.name}`}
                     onSelect={() => handleSelect(parent.id)}
                     className="min-w-0"
                   >
@@ -262,7 +262,7 @@ export function CategoryFilterCombobox({
                   {childrenByParent[parent.id]?.map((child) => (
                     <CommandItem
                       key={child.id}
-                      value={child.id}
+                      value={`${child.id} ${child.name}`}
                       onSelect={() => handleSelect(child.id)}
                       className="pl-8 min-w-0"
                     >