refactor: optimize TransactionsPage component by removing fullscreen functionality and stabilizing transactions reference with useMemo; clean up unused imports

app/transactions/page.tsx

@@ -1,15 +1,8 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { PageLayout, PageHeader } from "@/components/layout";
-import {
-  RefreshCw,
-  Maximize2,
-  Minimize2,
-  Receipt,
-  Euro,
-  ChevronDown,
-} from "lucide-react";
+import { RefreshCw, Receipt, Euro, ChevronDown } from "lucide-react";
 import {
   TransactionFilters,
   TransactionBulkActions,
@@ -30,12 +23,6 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Upload } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { useTransactionsPage } from "@/hooks/use-transactions-page";
 import { useTransactionMutations } from "@/hooks/use-transaction-mutations";
 import { useTransactionRules } from "@/hooks/use-transaction-rules";
@@ -43,7 +30,6 @@ import { useTransactionsChartData } from "@/hooks/use-transactions-chart-data";
 
 export default function TransactionsPage() {
   const queryClient = useQueryClient();
-  const [isFullscreen, setIsFullscreen] = useState(false);
 
   // Main page state and logic
   const {
@@ -147,7 +133,11 @@ export default function TransactionsPage() {
     [handleBulkSetCategory, selectedTransactions, clearSelection]
   );
 
-  const filteredTransactions = transactionsData?.transactions || [];
+  // Stabilize transactions reference to prevent unnecessary re-renders
+  const filteredTransactions = useMemo(
+    () => transactionsData?.transactions || [],
+    [transactionsData?.transactions]
+  );
   const totalTransactions = transactionsData?.total || 0;
   const hasMore = transactionsData?.hasMore || false;
   const uncategorizedCount = transactionsData?.uncategorizedCount || 0;
@@ -310,19 +300,6 @@ export default function TransactionsPage() {
         </div>
       ) : (
         <>
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex-1" />
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setIsFullscreen(true)}
-              className="gap-2"
-            >
-              <Maximize2 className="w-4 h-4" />
-              Plein écran
-            </Button>
-          </div>
-
           <TransactionTable
             transactions={filteredTransactions}
             accounts={metadata.accounts}
@@ -355,74 +332,6 @@ export default function TransactionsPage() {
         </>
       )}
 
-      <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
-        <DialogContent
-          className="!max-w-none !max-h-none !w-full !h-full !p-0 flex flex-col !rounded-none !translate-x-0 !translate-y-0 !top-0 !left-0 !right-0 !bottom-0 !m-0"
-          showCloseButton={false}
-          style={{
-            width: "100vw",
-            height: "100vh",
-            maxWidth: "100vw",
-            maxHeight: "100vh",
-          }}
-        >
-          <DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
-            <div className="flex items-center justify-between">
-              <DialogTitle>Transactions</DialogTitle>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsFullscreen(false)}
-                className="gap-2"
-              >
-                <Minimize2 className="w-4 h-4" />
-                Réduire
-              </Button>
-            </div>
-          </DialogHeader>
-          <div className="flex-1 overflow-auto px-6 pb-6 min-h-0">
-            <div className="mb-4">
-              <TransactionBulkActions
-                selectedCount={selectedTransactions.size}
-                categories={metadata.categories}
-                onReconcile={handleBulkReconcileWithClear}
-                onSetCategory={handleBulkSetCategoryWithClear}
-              />
-            </div>
-            <TransactionTable
-              transactions={filteredTransactions}
-              accounts={metadata.accounts}
-              categories={metadata.categories}
-              selectedTransactions={selectedTransactions}
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSortChange={onSortChange}
-              onToggleSelectAll={onToggleSelectAll}
-              onToggleSelectTransaction={onToggleSelectTransaction}
-              onToggleReconciled={toggleReconciled}
-              onMarkReconciled={markReconciled}
-              onSetCategory={setCategory}
-              onCreateRule={handleCreateRule}
-              onDelete={deleteTransaction}
-              formatCurrency={formatCurrency}
-              formatDate={formatDate}
-              updatingTransactionIds={updatingTransactionIds}
-              duplicateIds={duplicateIds}
-              highlightDuplicates={showDuplicates}
-            />
-            <div className="mt-4">
-              <TransactionPagination
-                page={page}
-                pageSize={pageSize}
-                total={totalTransactions}
-                hasMore={hasMore}
-                onPageChange={onPageChange}
-              />
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
       <RuleCreateDialog
         open={ruleDialogOpen}
         onOpenChange={setRuleDialogOpen}