refactor: standardize code formatting and improve readability across multiple components, including transaction handling and sidebar layout adjustments

This commit is contained in:
Julien Froidefond
2025-12-08 09:28:09 +01:00
parent 11c0df1293
commit cb8628ce39
10 changed files with 80 additions and 86 deletions

View File

@@ -77,10 +77,7 @@ function SidebarContent({
</div>
)}
<nav className={cn(
"flex-1 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
<nav className={cn("flex-1 space-y-2", collapsed ? "p-2" : "p-4")}>
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
@@ -117,10 +114,12 @@ function SidebarContent({
})}
</nav>
<div className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
<div
className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4",
)}
>
<Link href="/settings" onClick={handleLinkClick}>
<Button
variant="ghost"
@@ -186,10 +185,12 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
collapsed ? "w-16" : "w-64",
)}
>
<div className={cn(
"flex items-center border-b border-border/30 transition-all duration-300",
collapsed ? "justify-center p-4" : "justify-between p-6"
)}>
<div
className={cn(
"flex items-center border-b border-border/30 transition-all duration-300",
collapsed ? "justify-center p-4" : "justify-between p-6",
)}
>
{!collapsed && (
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
@@ -206,7 +207,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
onClick={() => setCollapsed(!collapsed)}
className={cn(
"hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
collapsed ? "" : "ml-auto"
collapsed ? "" : "ml-auto",
)}
>
{collapsed ? (

View File

@@ -40,9 +40,7 @@ export function PageHeader({
<h1 className="text-2xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight leading-tight flex-1 min-w-0">
{title}
</h1>
{rightContent && (
<div className="shrink-0">{rightContent}</div>
)}
{rightContent && <div className="shrink-0">{rightContent}</div>}
</div>
{description && (
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">

View File

@@ -164,7 +164,7 @@ export function TransactionTable({
setFocusedIndex(index);
onMarkReconciled(transactionId);
},
[onMarkReconciled]
[onMarkReconciled],
);
const handleKeyDown = useCallback(
@@ -193,7 +193,7 @@ export function TransactionTable({
}
}
},
[focusedIndex, transactions, onMarkReconciled, virtualizer]
[focusedIndex, transactions, onMarkReconciled, virtualizer],
);
useEffect(() => {
@@ -210,7 +210,7 @@ export function TransactionTable({
(accountId: string) => {
return accounts.find((a) => a.id === accountId);
},
[accounts]
[accounts],
);
const getCategory = useCallback(
@@ -218,7 +218,7 @@ export function TransactionTable({
if (!categoryId) return null;
return categories.find((c) => c.id === categoryId);
},
[categories]
[categories],
);
return (
@@ -269,7 +269,7 @@ export function TransactionTable({
className={cn(
"p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
isFocused && "bg-primary/10 ring-1 ring-primary/30",
)}
>
<div className="flex items-start justify-between gap-2">
@@ -297,7 +297,7 @@ export function TransactionTable({
"font-semibold tabular-nums text-sm md:text-base shrink-0",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
@@ -332,7 +332,7 @@ export function TransactionTable({
showBadge
align="start"
disabled={updatingTransactionIds.has(
transaction.id
transaction.id,
)}
/>
</div>
@@ -365,7 +365,7 @@ export function TransactionTable({
e.stopPropagation();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
)
) {
onDelete(transaction.id);
@@ -474,7 +474,7 @@ export function TransactionTable({
className={cn(
"grid grid-cols-[auto_120px_2fr_150px_180px_140px_auto_auto] gap-0 border-b border-border hover:bg-muted/50 cursor-pointer",
transaction.isReconciled && "bg-emerald-500/5",
isFocused && "bg-primary/10 ring-1 ring-primary/30"
isFocused && "bg-primary/10 ring-1 ring-primary/30",
)}
>
<div className="p-3">
@@ -529,7 +529,7 @@ export function TransactionTable({
"p-3 text-right font-semibold tabular-nums",
transaction.amount >= 0
? "text-emerald-600"
: "text-red-600"
: "text-red-600",
)}
>
{transaction.amount >= 0 ? "+" : ""}
@@ -596,7 +596,7 @@ export function TransactionTable({
e.stopPropagation();
if (
confirm(
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`
`Êtes-vous sûr de vouloir supprimer cette transaction ?\n\n${transaction.description}\n${formatCurrency(transaction.amount)}`,
)
) {
onDelete(transaction.id);

View File

@@ -182,9 +182,7 @@ export function AccountFilterCombobox({
{isFolderPartiallySelected(folder.id) && (
<div className="h-3 w-3 rounded-sm bg-primary/50 mr-1" />
)}
{isFolderSelected(folder.id) && (
<Check className="h-4 w-4" />
)}
{isFolderSelected(folder.id) && <Check className="h-4 w-4" />}
</div>
</CommandItem>
@@ -306,9 +304,7 @@ export function AccountFilterCombobox({
)
</span>
)}
{isAll && (
<Check className="ml-auto h-4 w-4" />
)}
{isAll && <Check className="ml-auto h-4 w-4" />}
</CommandItem>
</CommandGroup>

View File

@@ -193,7 +193,11 @@ export function CategoryFilterCombobox({
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command value={isAll ? "all" : isUncategorized ? "uncategorized" : value.join(",")}>
<Command
value={
isAll ? "all" : isUncategorized ? "uncategorized" : value.join(",")
}
>
<CommandInput placeholder="Rechercher..." />
<CommandList className="max-h-[300px]">
<CommandEmpty>Aucune catégorie trouvée.</CommandEmpty>
@@ -212,9 +216,7 @@ export function CategoryFilterCombobox({
({filteredTransactions.length})
</span>
)}
{isAll && (
<Check className="ml-auto h-4 w-4 shrink-0" />
)}
{isAll && <Check className="ml-auto h-4 w-4 shrink-0" />}
</CommandItem>
<CommandItem
value="uncategorized"