julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement optimistic updates for transaction handling and improve category selection in combobox components for enhanced user experience

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 07:44:02 +01:00
parent 1263ac9c52
commit 2177ae7b4a
4 changed files with 80 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/ui/category-combobox.tsx
View File

@@ -105,7 +105,7 @@ export function CategoryCombobox({
align={align}
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command>
<Command value={value || ""}>
<CommandInput placeholder="Rechercher une catégorie..." />
<CommandList className="max-h-[250px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
@@ -118,19 +118,16 @@ export function CategoryCombobox({
<span className="text-muted-foreground">
Aucune catégorie
</span>
<Check
className={cn(
"ml-auto h-4 w-4",
value === null ? "opacity-100" : "opacity-0",
)}
/>
{value === null && (
<Check className="ml-auto h-4 w-4" />
)}
</CommandItem>
</CommandGroup>
<CommandGroup>
{parentCategories.map((parent) => (
<div key={parent.id}>
<CommandItem
value={`${parent.name}`}
value={parent.id}
onSelect={() => handleSelect(parent.id)}
>
<CategoryIcon
@@ -139,17 +136,14 @@ export function CategoryCombobox({
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",
)}
/>
{value === parent.id && (
<Check className="ml-auto h-4 w-4" />
)}
</CommandItem>
{childrenByParent[parent.id]?.map((child) => (
<CommandItem
key={child.id}
value={`${parent.name} ${child.name}`}
value={child.id}
onSelect={() => handleSelect(child.id)}
className="pl-8"
>
@@ -159,12 +153,9 @@ export function CategoryCombobox({
size={16}
/>
<span>{child.name}</span>
<Check
className={cn(
"ml-auto h-4 w-4",
value === child.id ? "opacity-100" : "opacity-0",
)}
/>
{value === child.id && (
<Check className="ml-auto h-4 w-4" />
)}
</CommandItem>
))}
</div>
@@ -207,7 +198,7 @@ export function CategoryCombobox({
align={align}
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command>
<Command value={value || ""}>
<CommandInput placeholder="Rechercher une catégorie..." />
<CommandList className="max-h-[250px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
@@ -227,7 +218,7 @@ export function CategoryCombobox({
{parentCategories.map((parent) => (
<div key={parent.id}>
<CommandItem
value={`${parent.name}`}
value={parent.id}
onSelect={() => handleSelect(parent.id)}
>
<CategoryIcon
@@ -246,7 +237,7 @@ export function CategoryCombobox({
{childrenByParent[parent.id]?.map((child) => (
<CommandItem
key={child.id}
value={`${parent.name} ${child.name}`}
value={child.id}
onSelect={() => handleSelect(child.id)}
className="pl-8"
>