feat: refactor transaction filters to support multiple account selection and improve UI with new account filter component

components/transactions/transaction-filters.tsx

@@ -11,33 +11,36 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { CategoryFilterCombobox } from "@/components/ui/category-filter-combobox";
+import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
 import { CategoryIcon } from "@/components/ui/category-icon";
-import { Search, X, Filter } from "lucide-react";
-import type { Account, Category } from "@/lib/types";
+import { Search, X, Filter, Wallet } from "lucide-react";
+import type { Account, Category, Folder } from "@/lib/types";
 
 interface TransactionFiltersProps {
   searchQuery: string;
   onSearchChange: (query: string) => void;
-  selectedAccount: string;
-  onAccountChange: (account: string) => void;
+  selectedAccounts: string[];
+  onAccountsChange: (accounts: string[]) => void;
   selectedCategories: string[];
   onCategoriesChange: (categories: string[]) => void;
   showReconciled: string;
   onReconciledChange: (value: string) => void;
   accounts: Account[];
+  folders: Folder[];
   categories: Category[];
 }
 
 export function TransactionFilters({
   searchQuery,
   onSearchChange,
-  selectedAccount,
-  onAccountChange,
+  selectedAccounts,
+  onAccountsChange,
   selectedCategories,
   onCategoriesChange,
   showReconciled,
   onReconciledChange,
   accounts,
+  folders,
   categories,
 }: TransactionFiltersProps) {
   return (
@@ -56,19 +59,13 @@ export function TransactionFilters({
             </div>
           </div>
 
-          <Select value={selectedAccount} onValueChange={onAccountChange}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Compte" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Tous les comptes</SelectItem>
-              {accounts.map((account) => (
-                <SelectItem key={account.id} value={account.id}>
-                  {account.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <AccountFilterCombobox
+            accounts={accounts}
+            folders={folders}
+            value={selectedAccounts}
+            onChange={onAccountsChange}
+            className="w-[200px]"
+          />
 
           <CategoryFilterCombobox
             categories={categories}
@@ -92,8 +89,12 @@ export function TransactionFilters({
         <ActiveFilters
           searchQuery={searchQuery}
           onClearSearch={() => onSearchChange("")}
-          selectedAccount={selectedAccount}
-          onClearAccount={() => onAccountChange("all")}
+          selectedAccounts={selectedAccounts}
+          onRemoveAccount={(id) => {
+            const newAccounts = selectedAccounts.filter((a) => a !== id);
+            onAccountsChange(newAccounts.length > 0 ? newAccounts : ["all"]);
+          }}
+          onClearAccounts={() => onAccountsChange(["all"])}
           selectedCategories={selectedCategories}
           onRemoveCategory={(id) => {
             const newCategories = selectedCategories.filter((c) => c !== id);
@@ -113,8 +114,9 @@ export function TransactionFilters({
 function ActiveFilters({
   searchQuery,
   onClearSearch,
-  selectedAccount,
-  onClearAccount,
+  selectedAccounts,
+  onRemoveAccount,
+  onClearAccounts,
   selectedCategories,
   onRemoveCategory,
   onClearCategories,
@@ -125,8 +127,9 @@ function ActiveFilters({
 }: {
   searchQuery: string;
   onClearSearch: () => void;
-  selectedAccount: string;
-  onClearAccount: () => void;
+  selectedAccounts: string[];
+  onRemoveAccount: (id: string) => void;
+  onClearAccounts: () => void;
   selectedCategories: string[];
   onRemoveCategory: (id: string) => void;
   onClearCategories: () => void;
@@ -136,21 +139,21 @@ function ActiveFilters({
   categories: Category[];
 }) {
   const hasSearch = searchQuery.trim() !== "";
-  const hasAccount = selectedAccount !== "all";
+  const hasAccounts = !selectedAccounts.includes("all");
   const hasCategories = !selectedCategories.includes("all");
   const hasReconciled = showReconciled !== "all";
 
-  const hasActiveFilters = hasSearch || hasAccount || hasCategories || hasReconciled;
+  const hasActiveFilters = hasSearch || hasAccounts || hasCategories || hasReconciled;
 
   if (!hasActiveFilters) return null;
 
-  const account = accounts.find((a) => a.id === selectedAccount);
+  const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
   const selectedCats = categories.filter((c) => selectedCategories.includes(c.id));
   const isUncategorized = selectedCategories.includes("uncategorized");
 
   const clearAll = () => {
     onClearSearch();
-    onClearAccount();
+    onClearAccounts();
     onClearCategories();
     onClearReconciled();
   };
@@ -168,14 +171,18 @@ function ActiveFilters({
         </Badge>
       )}
 
-      {hasAccount && account && (
-        <Badge variant="secondary" className="gap-1 text-xs font-normal">
-          Compte: {account.name}
-          <button onClick={onClearAccount} className="ml-1 hover:text-foreground">
+      {selectedAccs.map((acc) => (
+        <Badge key={acc.id} variant="secondary" className="gap-1 text-xs font-normal">
+          <Wallet className="h-3 w-3" />
+          {acc.name}
+          <button
+            onClick={() => onRemoveAccount(acc.id)}
+            className="ml-1 hover:text-foreground"
+          >
             <X className="h-3 w-3" />
           </button>
         </Badge>
-      )}
+      ))}
 
       {isUncategorized && (
         <Badge variant="secondary" className="gap-1 text-xs font-normal">

components/ui/account-filter-combobox.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { CategoryIcon } from "@/components/ui/category-icon";
+import { ChevronsUpDown, Check, Wallet, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Account, Folder } from "@/lib/types";
+
+interface AccountFilterComboboxProps {
+  accounts: Account[];
+  folders: Folder[];
+  value: string[]; // ["all"] | [accountId, accountId, ...]
+  onChange: (value: string[]) => void;
+  className?: string;
+}
+
+export function AccountFilterCombobox({
+  accounts,
+  folders,
+  value,
+  onChange,
+  className,
+}: AccountFilterComboboxProps) {
+  const [open, setOpen] = useState(false);
+
+  // Get root folders (folders without parent) - same as folders/page.tsx
+  const rootFolders = useMemo(
+    () => folders.filter((f) => f.parentId === null),
+    [folders]
+  );
+
+  // Get child folders for a given parent - same as FolderTreeItem
+  const getChildFolders = (parentId: string) =>
+    folders.filter((f) => f.parentId === parentId);
+
+  // Get accounts in a specific folder - same as FolderTreeItem
+  const getFolderAccounts = (folderId: string) =>
+    accounts.filter((a) => a.folderId === folderId);
+
+  // Get accounts without folder
+  const orphanAccounts = useMemo(
+    () => accounts.filter((a) => !a.folderId),
+    [accounts]
+  );
+
+  const selectedAccounts = accounts.filter((a) => value.includes(a.id));
+  const isAll = value.includes("all") || value.length === 0;
+
+  // Get all accounts in a folder and its descendants recursively
+  const getAllAccountsInFolder = (folderId: string): Account[] => {
+    const directAccounts = getFolderAccounts(folderId);
+    const childFoldersList = getChildFolders(folderId);
+    const childAccounts = childFoldersList.flatMap((cf) =>
+      getAllAccountsInFolder(cf.id)
+    );
+    return [...directAccounts, ...childAccounts];
+  };
+
+  const handleSelect = (newValue: string) => {
+    if (newValue === "all") {
+      onChange(["all"]);
+      return;
+    }
+
+    let newSelection: string[];
+
+    if (isAll) {
+      newSelection = [newValue];
+    } else if (value.includes(newValue)) {
+      newSelection = value.filter((v) => v !== newValue);
+      if (newSelection.length === 0) {
+        newSelection = ["all"];
+      }
+    } else {
+      newSelection = [...value, newValue];
+    }
+
+    onChange(newSelection);
+  };
+
+  const handleSelectFolder = (folderId: string) => {
+    const allFolderAccounts = getAllAccountsInFolder(folderId);
+    const allFolderAccountIds = allFolderAccounts.map((a) => a.id);
+
+    if (allFolderAccountIds.length === 0) return;
+
+    const allSelected = allFolderAccountIds.every((id) => value.includes(id));
+
+    if (allSelected) {
+      const newSelection = value.filter(
+        (v) => !allFolderAccountIds.includes(v)
+      );
+      onChange(newSelection.length > 0 ? newSelection : ["all"]);
+    } else {
+      if (isAll) {
+        onChange(allFolderAccountIds);
+      } else {
+        const newSelection = [...new Set([...value, ...allFolderAccountIds])];
+        onChange(newSelection);
+      }
+    }
+  };
+
+  const clearSelection = () => {
+    onChange(["all"]);
+  };
+
+  const isFolderSelected = (folderId: string) => {
+    const folderAccounts = getAllAccountsInFolder(folderId);
+    if (folderAccounts.length === 0) return false;
+    return folderAccounts.every((a) => value.includes(a.id));
+  };
+
+  const isFolderPartiallySelected = (folderId: string) => {
+    const folderAccounts = getAllAccountsInFolder(folderId);
+    if (folderAccounts.length === 0) return false;
+    const selectedCount = folderAccounts.filter((a) =>
+      value.includes(a.id)
+    ).length;
+    return selectedCount > 0 && selectedCount < folderAccounts.length;
+  };
+
+  // Recursive render function - mirrors FolderTreeItem logic
+  const renderFolder = (folder: Folder, depth: number, parentPath: string) => {
+    const folderAccounts = getFolderAccounts(folder.id);
+    const childFoldersList = getChildFolders(folder.id);
+    const currentPath = parentPath ? `${parentPath} ${folder.name}` : folder.name;
+    const paddingLeft = depth * 16 + 8;
+
+    return (
+      <div key={folder.id}>
+        {/* Folder row */}
+        <CommandItem
+          value={`folder-${currentPath}`}
+          onSelect={() => handleSelectFolder(folder.id)}
+          style={{ paddingLeft: `${paddingLeft}px` }}
+          className="font-medium"
+        >
+          <CategoryIcon icon={folder.icon} color={folder.color} size={16} />
+          <span>{folder.name}</span>
+          <div className="ml-auto flex items-center">
+            {isFolderPartiallySelected(folder.id) && (
+              <div className="h-3 w-3 rounded-sm bg-primary/50 mr-1" />
+            )}
+            <Check
+              className={cn(
+                "h-4 w-4",
+                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
+              )}
+            />
+          </div>
+        </CommandItem>
+
+        {/* Accounts in this folder */}
+        {folderAccounts.map((account) => (
+          <CommandItem
+            key={account.id}
+            value={`${currentPath} ${account.name}`}
+            onSelect={() => handleSelect(account.id)}
+            style={{ paddingLeft: `${paddingLeft + 16}px` }}
+          >
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+            <span>{account.name}</span>
+            <Check
+              className={cn(
+                "ml-auto h-4 w-4",
+                value.includes(account.id) ? "opacity-100" : "opacity-0"
+              )}
+            />
+          </CommandItem>
+        ))}
+
+        {/* Child folders - recursive */}
+        {childFoldersList.map((childFolder) =>
+          renderFolder(childFolder, depth + 1, currentPath)
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("justify-between", className)}
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {selectedAccounts.length === 1 ? (
+              <>
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+                <span className="truncate">{selectedAccounts[0].name}</span>
+              </>
+            ) : selectedAccounts.length > 1 ? (
+              <>
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+                <span className="truncate">
+                  {selectedAccounts.length} comptes
+                </span>
+              </>
+            ) : (
+              <>
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+                <span className="text-muted-foreground">Tous les comptes</span>
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-1">
+            {!isAll && (
+              <div
+                role="button"
+                className="h-4 w-4 rounded-sm hover:bg-muted flex items-center justify-center"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  clearSelection();
+                }}
+              >
+                <X className="h-3 w-3" />
+              </div>
+            )}
+            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[300px] p-0"
+        align="start"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <Command>
+          <CommandInput placeholder="Rechercher..." />
+          <CommandList className="max-h-[300px]">
+            <CommandEmpty>Aucun compte trouvé.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem value="all" onSelect={() => handleSelect("all")}>
+                <Wallet className="h-4 w-4 text-muted-foreground" />
+                <span>Tous les comptes</span>
+                <Check
+                  className={cn(
+                    "ml-auto h-4 w-4",
+                    isAll ? "opacity-100" : "opacity-0"
+                  )}
+                />
+              </CommandItem>
+            </CommandGroup>
+
+            <CommandGroup>
+              {rootFolders.map((folder) => renderFolder(folder, 0, ""))}
+            </CommandGroup>
+
+            {orphanAccounts.length > 0 && (
+              <CommandGroup heading="Sans dossier">
+                {orphanAccounts.map((account) => (
+                  <CommandItem
+                    key={account.id}
+                    value={`sans-dossier ${account.name}`}
+                    onSelect={() => handleSelect(account.id)}
+                  >
+                    <Wallet className="h-4 w-4 text-muted-foreground" />
+                    <span>{account.name}</span>
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        value.includes(account.id) ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}