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

feat: enhance UI with new background gradients and responsive design adjustments across various components

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:23:53 +01:00
parent b704cc5a84
commit d4db94d156
10 changed files with 399 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/ui/account-filter-combobox.tsx
View File

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
// Get root folders (folders without parent) - same as folders/page.tsx
const rootFolders = useMemo(
() => folders.filter((f) => f.parentId === null),
[folders],
[folders]
);
// Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
// Get accounts without folder
const orphanAccounts = useMemo(
() => accounts.filter((a) => !a.folderId),
[accounts],
[accounts]
);
const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
const directAccounts = getFolderAccounts(folderId);
const childFoldersList = getChildFolders(folderId);
const childAccounts = childFoldersList.flatMap((cf) =>
getAllAccountsInFolder(cf.id),
getAllAccountsInFolder(cf.id)
);
return [...directAccounts, ...childAccounts];
};
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
if (allSelected) {
const newSelection = value.filter(
(v) => !allFolderAccountIds.includes(v),
(v) => !allFolderAccountIds.includes(v)
);
onChange(newSelection.length > 0 ? newSelection : ["all"]);
} else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
const folderAccounts = getAllAccountsInFolder(folderId);
if (folderAccounts.length === 0) return false;
const selectedCount = folderAccounts.filter((a) =>
value.includes(a.id),
value.includes(a.id)
).length;
return selectedCount > 0 && selectedCount < folderAccounts.length;
};
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"h-4 w-4",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
)}
/>
</div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0",
value.includes(account.id) ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
{/* Child folders - recursive */}
{childFoldersList.map((childFolder) =>
renderFolder(childFolder, depth + 1, currentPath),
renderFolder(childFolder, depth + 1, currentPath)
)}
</div>
);
@@ -235,7 +235,10 @@ export function AccountFilterCombobox({
variant="outline"
role="combobox"
aria-expanded={open}
className={cn("justify-between min-w-0", className)}
className={cn(
"justify-between min-w-0 h-10 w-full text-sm font-normal",
className
)}
>
<div className="flex items-center gap-2 min-w-0 flex-1">
{selectedAccounts.length === 1 ? (
@@ -285,7 +288,7 @@ export function AccountFilterCombobox({
</Button>
</PopoverTrigger>
<PopoverContent
className="w-[380px] p-0"
className="w-[calc(100vw-2rem)] sm:w-[380px] p-0"
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
@@ -301,10 +304,7 @@ export function AccountFilterCombobox({
<span className="text-xs text-muted-foreground ml-1">
(
{formatCurrency(
filteredTransactions.reduce(
(sum, t) => sum + t.amount,
0,
),
filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
)}
)
</span>
@@ -312,7 +312,7 @@ export function AccountFilterCombobox({
<Check
className={cn(
"ml-auto h-4 w-4",
isAll ? "opacity-100" : "opacity-0",
isAll ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
@@ -348,7 +348,7 @@ export function AccountFilterCombobox({
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id)
? "opacity-100"
: "opacity-0",
: "opacity-0"
)}
/>
</CommandItem>

12
components/ui/card.tsx
View File

@@ -7,8 +7,8 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className,
"bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
className
)}
{...props}
/>
@@ -20,8 +20,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className,
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props}
/>
@@ -54,7 +54,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className,
className
)}
{...props}
/>
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
className={cn("px-6 pb-6", className)}
{...props}
/>
);