refactor: remove transition effects from various components for improved performance and consistency

components/accounts/account-card.tsx

@@ -82,7 +82,6 @@ export function AccountCard({
         "relative group",
         isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
         isDragging && "bg-muted/80 opacity-60",
-        "hover:scale-[1.02] transition-transform duration-200",
       )}
     >
       <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>

components/categories/category-card.tsx

@@ -25,7 +25,7 @@ export function CategoryCard({
   const isMobile = useIsMobile();
 
   return (
-    <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
+    <div className="flex items-center justify-between py-1.5 px-2 rounded group">
       <div className="flex items-center gap-2 min-w-0 flex-1">
         <div
           className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
@@ -59,7 +59,7 @@ export function CategoryCard({
         )}
       </div>
 
-      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
+      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100">
         <Button
           variant="ghost"
           size="icon"

components/categories/parent-category-row.tsx

@@ -57,7 +57,7 @@ export function ParentCategoryRow({
       <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
         <div className="flex items-center justify-between px-2 md:px-3 py-1.5 md:py-2">
           <CollapsibleTrigger asChild>
-            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
+            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 flex-1 min-w-0">
               {isExpanded ? (
                 <ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
               ) : (

components/dashboard/accounts-summary.tsx

@@ -113,11 +113,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
               return (
                 <div
                   key={account.id}
-                  className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
+                  className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 group"
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                         <Building2 className="w-5 h-5 text-primary" />
                       </div>
                       <div>
@@ -225,11 +225,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                   return (
                     <div
                       key={account.id}
-                      className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
+                      className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 group"
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-3">
-                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                             <Building2 className="w-5 h-5 text-primary" />
                           </div>
                           <div>

components/dashboard/overview-cards.tsx

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
 export function OverviewCards({ data }: OverviewCardsProps) {
   const totalBalance = data.accounts.reduce(
     (sum, acc) => sum + getAccountBalance(acc),
-    0,
+    0
   );
 
   const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   const thisMonthStr = thisMonth.toISOString().slice(0, 7);
 
   const monthTransactions = data.transactions.filter((t) =>
-    t.date.startsWith(thisMonthStr),
+    t.date.startsWith(thisMonthStr)
   );
 
   const income = monthTransactions
@@ -47,12 +47,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   return (
     <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-4">
       <Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Solde Total
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-primary/20">
+          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
             <Wallet className="h-5 w-5 text-primary" />
           </div>
         </CardHeader>
@@ -62,7 +61,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
               "text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words",
               totalBalance >= 0
                 ? "text-emerald-600 dark:text-emerald-400"
-                : "text-red-600 dark:text-red-400",
+                : "text-red-600 dark:text-red-400"
             )}
           >
             {formatCurrency(totalBalance)}
@@ -74,12 +73,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-success/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Revenus du mois
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-success/20">
+          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
             <TrendingUp className="h-5 w-5 text-success" />
           </div>
         </CardHeader>
@@ -97,12 +95,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-destructive/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Dépenses du mois
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-destructive/20">
+          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
             <TrendingDown className="h-5 w-5 text-destructive" />
           </div>
         </CardHeader>
@@ -120,12 +117,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-chart-4/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Pointage
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-chart-4/20">
+          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
             <CreditCard className="h-5 w-5 text-chart-4" />
           </div>
         </CardHeader>

components/dashboard/recent-transactions.tsx

@@ -76,7 +76,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
             return (
               <div
                 key={transaction.id}
-                className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 hover:from-muted/70 hover:via-muted/50 hover:to-muted/40 border-2 border-border/40 hover:border-primary/30 transition-all duration-300 overflow-hidden hover:shadow-lg hover:shadow-primary/10 hover:scale-[1.02] backdrop-blur-sm"
+                className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 border-2 border-border/40 overflow-hidden backdrop-blur-sm"
               >
                 <div className="flex items-start gap-4 md:gap-5 p-4 md:p-5">
                   <div className="flex-1 min-w-0 overflow-hidden">
@@ -89,7 +89,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                           "font-black tabular-nums text-sm md:text-base shrink-0 md:hidden",
                           transaction.amount >= 0
                             ? "text-emerald-600 dark:text-emerald-400"
-                            : "text-red-600 dark:text-red-400",
+                            : "text-red-600 dark:text-red-400"
                         )}
                       >
                         {transaction.amount >= 0 ? "+" : ""}
@@ -131,7 +131,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                       "font-black tabular-nums text-base md:text-lg shrink-0 hidden md:block leading-tight",
                       transaction.amount >= 0
                         ? "text-emerald-600 dark:text-emerald-400"
-                        : "text-red-600 dark:text-red-400",
+                        : "text-red-600 dark:text-red-400"
                     )}
                   >
                     {transaction.amount >= 0 ? "+" : ""}

components/dashboard/sidebar.tsx

@@ -85,8 +85,7 @@ function SidebarContent({
               <Button
                 variant={isActive ? "secondary" : "ghost"}
                 className={cn(
-                  "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
-                  "hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
+                  "w-full justify-start gap-4 h-12 rounded-2xl",
                   isActive &&
                     "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
                   collapsed && "justify-center px-2 w-12 mx-auto",
@@ -94,8 +93,8 @@ function SidebarContent({
               >
                 <item.icon
                   className={cn(
-                    "w-5 h-5 shrink-0 transition-all duration-300",
-                    isActive && "text-primary scale-110",
+                    "w-5 h-5 shrink-0",
+                    isActive && "text-primary",
                   )}
                 />
                 {!collapsed && (
@@ -124,7 +123,7 @@ function SidebarContent({
           <Button
             variant="ghost"
             className={cn(
-              "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
+              "w-full justify-start gap-4 h-12 rounded-2xl",
               collapsed && "justify-center px-2 w-12 mx-auto",
             )}
           >
@@ -138,8 +137,8 @@ function SidebarContent({
           variant="ghost"
           onClick={handleSignOut}
           className={cn(
-            "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
-            "text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
+            "w-full justify-start gap-4 h-12 rounded-2xl",
+            "text-destructive",
             collapsed && "justify-center px-2 w-12 mx-auto",
           )}
         >
@@ -180,14 +179,14 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
   return (
     <aside
       className={cn(
-        "hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
+        "hidden md:flex flex-col h-screen glass border-r border-border",
         "backdrop-blur-xl",
         collapsed ? "w-16" : "w-64",
       )}
     >
       <div
         className={cn(
-          "flex items-center border-b border-border/30 transition-all duration-300",
+          "flex items-center border-b border-border/30",
           collapsed ? "justify-center p-4" : "justify-between p-6",
         )}
       >
@@ -206,7 +205,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
           size="icon"
           onClick={() => setCollapsed(!collapsed)}
           className={cn(
-            "hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
+            "rounded-xl",
             collapsed ? "" : "ml-auto",
           )}
         >

components/rules/rule-group-card.tsx

@@ -57,7 +57,7 @@ export function RuleGroupCard({
     <div className="border border-border rounded-lg bg-card overflow-hidden">
       {/* Header */}
       <div
-        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5 transition-colors"
+        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5"
         onClick={onToggleExpand}
       >
         <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">

components/ui/breadcrumb.tsx

@@ -43,7 +43,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("hover:text-foreground", className)}
       {...props}
     />
   );

components/ui/button.tsx

@@ -5,21 +5,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
-          "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
+          "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground shadow-xl shadow-primary/30 backdrop-blur-sm border border-primary/20",
         destructive:
-          "bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white hover:from-destructive/95 hover:via-destructive hover:to-destructive/95 shadow-xl shadow-destructive/30 hover:shadow-2xl hover:shadow-destructive/40 hover:scale-[1.03] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:scale-[0.97] backdrop-blur-sm border border-destructive/20",
+          "bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white shadow-xl shadow-destructive/30 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 backdrop-blur-sm border border-destructive/20",
         outline:
-          "border-2 bg-background/95 backdrop-blur-md shadow-md hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:shadow-lg hover:scale-[1.03] dark:bg-input/40 dark:border-input dark:hover:bg-input/60 active:scale-[0.97]",
+          "border-2 bg-background/95 backdrop-blur-md shadow-md dark:bg-input/40 dark:border-input",
         secondary:
-          "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground hover:from-secondary/95 hover:via-secondary hover:to-secondary/95 hover:shadow-lg hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
-        ghost:
-          "hover:bg-accent/70 hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
-        link: "text-primary underline-offset-4 hover:underline font-semibold",
+          "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground backdrop-blur-sm",
+        ghost: "backdrop-blur-sm",
+        link: "text-primary underline-offset-4 font-semibold",
       },
       size: {
         default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
@@ -34,7 +33,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 function Button({

components/ui/card.tsx

@@ -9,7 +9,6 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "fintech-card",
         "bg-card text-card-foreground flex flex-col",
-        "transition-all duration-300 ease-out",
         className,
       )}
       {...props}

components/ui/dialog.tsx

@@ -69,7 +69,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>

components/ui/icon-picker.tsx

@@ -316,7 +316,7 @@ export function IconPicker({ value, onChange, color }: IconPickerProps) {
                       key={icon}
                       onClick={() => handleSelect(icon)}
                       className={cn(
-                        "flex items-center justify-center p-2 rounded-md hover:bg-accent transition-colors",
+                        "flex items-center justify-center p-2 rounded-md hover:bg-accent",
                         value === icon && "bg-accent ring-2 ring-primary",
                       )}
                       title={icon}

components/ui/sheet.tsx

@@ -72,7 +72,7 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

components/ui/table.tsx

@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b",
         className,
       )}
       {...props}