diff --git a/src/App.tsx b/src/App.tsx
index 8da2a292a..bc4f407fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,45 +1,7 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
-import { open } from '@tauri-apps/plugin-dialog';
-import { homeDir } from '@tauri-apps/api/path';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import debounce from 'lodash.debounce';
-import throttle from 'lodash.throttle';
-import { ClerkProvider } from '@clerk/clerk-react';
-import { ToastContainer, toast, Slide } from 'react-toastify';
+import { ToastContainer, Slide } from 'react-toastify';
 import clsx from 'clsx';
-import {
-  Aperture,
-  Check,
-  ClipboardPaste,
-  Copy,
-  CopyPlus,
-  Edit,
-  FileEdit,
-  Folder,
-  FolderInput,
-  FolderPlus,
-  Images,
-  LayoutTemplate,
-  Redo,
-  RotateCcw,
-  Star,
-  Save,
-  SquaresUnite,
-  Palette,
-  Tag,
-  Trash2,
-  Undo,
-  X,
-  Pin,
-  PinOff,
-  Users,
-  Gauge,
-  Grip,
-  Film,
-} from 'lucide-react';
 import TitleBar from './window/TitleBar';
 import CommunityPage from './components/panel/CommunityPage';
 import MainLibrary from './components/panel/MainLibrary';
@@ -47,4375 +9,469 @@ import FolderTree from './components/panel/FolderTree';
 import Editor from './components/panel/Editor';
 import Controls from './components/panel/right/ControlsPanel';
 import { useThumbnails } from './hooks/useThumbnails';
-import { ImageDimensions } from './hooks/useImageRenderSize';
 import RightPanelSwitcher from './components/panel/right/RightPanelSwitcher';
 import MetadataPanel from './components/panel/right/MetadataPanel';
-import CropPanel, { type OverlayMode } from './components/panel/right/CropPanel';
+import CropPanel from './components/panel/right/CropPanel';
 import PresetsPanel from './components/panel/right/PresetsPanel';
 import AIPanel from './components/panel/right/AIPanel';
 import ExportPanel from './components/panel/right/ExportPanel';
 import LibraryExportPanel from './components/panel/right/LibraryExportPanel';
 import MasksPanel from './components/panel/right/MasksPanel';
-import BottomBar from './components/panel/BottomBar';
-import { ContextMenuProvider, useContextMenu } from './context/ContextMenuContext';
-import TaggingSubMenu from './context/TaggingSubMenu';
-import CreateFolderModal from './components/modals/CreateFolderModal';
-import RenameFolderModal from './components/modals/RenameFolderModal';
-import ConfirmModal from './components/modals/ConfirmModal';
-import ImportSettingsModal from './components/modals/ImportSettingsModal';
-import RenameFileModal from './components/modals/RenameFileModal';
-import PanoramaModal from './components/modals/PanoramaModal';
-import NegativeConversionModal from './components/modals/NegativeConversionModal';
-import DenoiseModal from './components/modals/DenoiseModal';
-import CollageModal from './components/modals/CollageModal';
-import CopyPasteSettingsModal from './components/modals/CopyPasteSettingsModal';
-import CullingModal from './components/modals/CullingModal';
-import { useHistoryState } from './hooks/useHistoryState';
-import Resizer from './components/ui/Resizer';
-import {
-  Adjustments,
-  AiPatch,
-  Color,
-  COLOR_LABELS,
-  Coord,
-  COPYABLE_ADJUSTMENT_KEYS,
-  INITIAL_ADJUSTMENTS,
-  MaskContainer,
-  normalizeLoadedAdjustments,
-  PasteMode,
-  CopyPasteSettings,
-} from './utils/adjustments';
-import { generatePaletteFromImage } from './utils/palette';
-import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
-import GlobalTooltip from './components/ui/GlobalTooltip';
-import { THEMES, DEFAULT_THEME_ID, ThemeProps } from './utils/themes';
-import { SubMask, ToolType } from './components/panel/right/Masks';
-import { ExportState, IMPORT_TIMEOUT, ImportState, Status } from './components/ui/ExportImportProperties';
-import {
-  AppSettings,
-  BrushSettings,
-  FilterCriteria,
-  Invokes,
-  ImageFile,
-  Option,
-  OPTION_SEPARATOR,
-  LibraryViewMode,
-  Panel,
-  Progress,
-  RawStatus,
-  SelectedImage,
-  SortCriteria,
-  SortDirection,
-  SupportedTypes,
-  Theme,
-  TransformState,
-  UiVisibility,
-  WaveformData,
-  Orientation,
-  ThumbnailSize,
-  ThumbnailAspectRatio,
-  CullingSuggestions,
-} from './components/ui/AppProperties';
-import { ChannelConfig } from './components/adjustments/Curves';
-import HdrModal from './components/modals/HdrModal';
-
-const CLERK_PUBLISHABLE_KEY = 'pk_test_YnJpZWYtc2Vhc25haWwtMTIuY2xlcmsuYWNjb3VudHMuZGV2JA'; // local dev key
-
-interface CollapsibleSectionsState {
-  basic: boolean;
-  color: boolean;
-  curves: boolean;
-  details: boolean;
-  effects: boolean;
-}
-
-interface ConfirmModalState {
-  confirmText?: string;
-  confirmVariant?: string;
-  isOpen: boolean;
-  message?: string;
-  onConfirm?(): void;
-  title?: string;
-}
-
-interface Metadata {
-  adjustments: Adjustments;
-  rating: number;
-  tags: Array<string> | null;
-  version: number;
-}
-
-interface MultiSelectOptions {
-  onSimpleClick(p: any): void;
-  updateLibraryActivePath: boolean;
-  shiftAnchor: string | null;
-}
-
-interface CollageModalState {
-  isOpen: boolean;
-  sourceImages: ImageFile[];
-}
-
-interface PanoramaModalState {
-  error: string | null;
-  finalImageBase64: string | null;
-  isOpen: boolean;
-  progressMessage: string | null;
-  stitchingSourcePaths: Array<string>;
-}
-
-interface HdrModalState {
-  error: string | null;
-  finalImageBase64: string | null;
-  isOpen: boolean;
-  progressMessage: string | null;
-  stitchingSourcePaths: Array<string>;
-}
-
-interface DenoiseModalState {
-  isOpen: boolean;
-  isProcessing: boolean;
-  previewBase64: string | null;
-  originalBase64?: string | null;
-  error: string | null;
-  targetPath: string | null;
-  progressMessage: string | null;
-}
-
-interface NegativeConversionModalState {
-  isOpen: boolean;
-  targetPath: string | null;
-}
-
-interface CullingModalState {
-  isOpen: boolean;
-  suggestions: CullingSuggestions | null;
-  progress: { current: number; total: number; stage: string } | null;
-  error: string | null;
-  pathsToCull: Array<string>;
-}
-
-interface LutData {
-  size: number;
-}
-
-interface SearchCriteria {
-  tags: string[];
-  text: string;
-  mode: 'AND' | 'OR';
-}
-
-const RIGHT_PANEL_ORDER = [
-  Panel.Metadata,
-  Panel.Adjustments,
-  Panel.Crop,
-  Panel.Masks,
-  Panel.Ai,
-  Panel.Presets,
-  Panel.Export,
-];
-
-const DEBUG = false;
-
-const getParentDir = (filePath: string): string => {
-  const separator = filePath.includes('/') ? '/' : '\\';
-  const lastSeparatorIndex = filePath.lastIndexOf(separator);
-  if (lastSeparatorIndex === -1) {
-    return '';
-  }
-  return filePath.substring(0, lastSeparatorIndex);
-};
-
-function App() {
-  const [rootPath, setRootPath] = useState<string | null>(null);
-  const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
-  const [activeView, setActiveView] = useState('library');
-  const [isWindowFullScreen, setIsWindowFullScreen] = useState(false);
-  const [isLayoutReady, setIsLayoutReady] = useState(false);
-  const [currentFolderPath, setCurrentFolderPath] = useState<string | null>(null);
-  const [expandedFolders, setExpandedFolders] = useState(new Set<string>());
-  const [folderTree, setFolderTree] = useState<any>(null);
-  const [pinnedFolderTrees, setPinnedFolderTrees] = useState<any[]>([]);
-  const [imageList, setImageList] = useState<Array<ImageFile>>([]);
-  const [imageRatings, setImageRatings] = useState<Record<string, number>>({});
-  const [sortCriteria, setSortCriteria] = useState<SortCriteria>({ key: 'name', order: SortDirection.Ascending });
-  const [filterCriteria, setFilterCriteria] = useState<FilterCriteria>({
-    colors: [],
-    rating: 0,
-    rawStatus: RawStatus.All,
-  });
-  const [supportedTypes, setSupportedTypes] = useState<SupportedTypes | null>(null);
-  const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
-  const selectedImagePathRef = useRef<string | null>(null);
-  useEffect(() => {
-    selectedImagePathRef.current = selectedImage?.path ?? null;
-  }, [selectedImage?.path]);
-  const [multiSelectedPaths, setMultiSelectedPaths] = useState<Array<string>>([]);
-  const [libraryActivePath, setLibraryActivePath] = useState<string | null>(null);
-  const [libraryActiveAdjustments, setLibraryActiveAdjustments] = useState<Adjustments>(INITIAL_ADJUSTMENTS);
-  const [finalPreviewUrl, setFinalPreviewUrl] = useState<string | null>(null);
-  const [uncroppedAdjustedPreviewUrl, setUncroppedAdjustedPreviewUrl] = useState<string | null>(null);
-  const {
-    state: historyAdjustments,
-    setState: setHistoryAdjustments,
-    undo: undoAdjustments,
-    redo: redoAdjustments,
-    canUndo,
-    canRedo,
-    resetHistory: resetAdjustmentsHistory,
-    history: adjustmentsHistory,
-    historyIndex: adjustmentsHistoryIndex,
-    goToIndex: goToAdjustmentsHistoryIndex,
-  } = useHistoryState(INITIAL_ADJUSTMENTS);
-  const [adjustments, setLiveAdjustments] = useState<Adjustments>(INITIAL_ADJUSTMENTS);
-  const [showOriginal, setShowOriginal] = useState(false);
-  const [isTreeLoading, setIsTreeLoading] = useState(false);
-  const [isViewLoading, setIsViewLoading] = useState(false);
-  const [initialFileToOpen, setInitialFileToOpen] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [histogram, setHistogram] = useState<ChannelConfig | null>(null);
-  const [waveform, setWaveform] = useState<WaveformData | null>(null);
-  const [isWaveformVisible, setIsWaveformVisible] = useState(false);
-  const [uiVisibility, setUiVisibility] = useState<UiVisibility>({
-    folderTree: true,
-    filmstrip: true,
-  });
-  const [isSliderDragging, setIsSliderDragging] = useState(false);
-  const dragIdleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [isHighResNeeded, setIsHighResNeeded] = useState(false);
-  const [isAnimatingTheme, setIsAnimatingTheme] = useState(false);
-  const isInitialThemeMount = useRef(true);
-  const [theme, setTheme] = useState(DEFAULT_THEME_ID);
-  const [adaptivePalette, setAdaptivePalette] = useState<any>(null);
-  const [activeRightPanel, setActiveRightPanel] = useState<Panel | null>(Panel.Adjustments);
-  const [slideDirection, setSlideDirection] = useState(1);
-  const [activeMaskContainerId, setActiveMaskContainerId] = useState<string | null>(null);
-  const [activeMaskId, setActiveMaskId] = useState<string | null>(null);
-  const [activeAiPatchContainerId, setActiveAiPatchContainerId] = useState<string | null>(null);
-  const [activeAiSubMaskId, setActiveAiSubMaskId] = useState<string | null>(null);
-  const [zoom, setZoom] = useState(1);
-  const [displaySize, setDisplaySize] = useState<ImageDimensions>({ width: 0, height: 0 });
-  const [previewSize, setPreviewSize] = useState<ImageDimensions>({ width: 0, height: 0 });
-  const [baseRenderSize, setBaseRenderSize] = useState<ImageDimensions>({ width: 0, height: 0 });
-  const [originalSize, setOriginalSize] = useState<ImageDimensions>({ width: 0, height: 0 });
-  const [isLoadingFullRes, setIsLoadingFullRes] = useState(false);
-  const [isRotationActive, setIsRotationActive] = useState(false);
-  const [overlayMode, setOverlayMode] = useState<OverlayMode>('thirds');
-  const [overlayRotation, setOverlayRotation] = useState(0);
-  const [transformedOriginalUrl, setTransformedOriginalUrl] = useState<string | null>(null);
-  const fullResCacheKeyRef = useRef<string | null>(null);
-  const patchesSentToBackend = useRef<Set<string>>(new Set());
-
-  const handleDisplaySizeChange = useCallback((size: ImageDimensions & { scale?: number }) => {
-    setDisplaySize({ width: size.width, height: size.height });
-
-    if (size.scale) {
-      const baseWidth = size.width / size.scale;
-      const baseHeight = size.height / size.scale;
-      setBaseRenderSize({ width: baseWidth, height: baseHeight });
-    }
-  }, []);
-
-  const [initialFitScale, setInitialFitScale] = useState<number | null>(null);
-  const [renderedRightPanel, setRenderedRightPanel] = useState<Panel | null>(activeRightPanel);
-  const [collapsibleSectionsState, setCollapsibleSectionsState] = useState<CollapsibleSectionsState>({
-    basic: true,
-    color: false,
-    curves: true,
-    details: false,
-    effects: false,
-  });
-  const [isLibraryExportPanelVisible, setIsLibraryExportPanelVisible] = useState(false);
-  const [libraryViewMode, setLibraryViewMode] = useState<LibraryViewMode>(LibraryViewMode.Flat);
-  const [leftPanelWidth, setLeftPanelWidth] = useState<number>(256);
-  const [rightPanelWidth, setRightPanelWidth] = useState<number>(320);
-  const [bottomPanelHeight, setBottomPanelHeight] = useState<number>(144);
-  const [activeTreeSection, setActiveTreeSection] = useState<string | null>('current');
-  const [isResizing, setIsResizing] = useState(false);
-  const [thumbnailSize, setThumbnailSize] = useState(ThumbnailSize.Medium);
-  const [thumbnailAspectRatio, setThumbnailAspectRatio] = useState(ThumbnailAspectRatio.Cover);
-  const [copiedAdjustments, setCopiedAdjustments] = useState<Adjustments | null>(null);
-  const [isStraightenActive, setIsStraightenActive] = useState(false);
-  const [isWbPickerActive, setIsWbPickerActive] = useState(false);
-  const [copiedFilePaths, setCopiedFilePaths] = useState<Array<string>>([]);
-  const [aiModelDownloadStatus, setAiModelDownloadStatus] = useState<string | null>(null);
-  const [copiedSectionAdjustments, setCopiedSectionAdjustments] = useState(null);
-  const [copiedMask, setCopiedMask] = useState<MaskContainer | null>(null);
-  const [isCopied, setIsCopied] = useState(false);
-  const [isPasted, setIsPasted] = useState(false);
-  const [isIndexing, setIsIndexing] = useState(false);
-  const [indexingProgress, setIndexingProgress] = useState<Progress>({ current: 0, total: 0 });
-  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria>({
-    tags: [],
-    text: '',
-    mode: 'OR',
-  });
-  const [brushSettings, setBrushSettings] = useState<BrushSettings | null>({
-    size: 50,
-    feather: 50,
-    tool: ToolType.Brush,
-  });
-  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = useState(false);
-  const [isRenameFolderModalOpen, setIsRenameFolderModalOpen] = useState(false);
-  const [isRenameFileModalOpen, setIsRenameFileModalOpen] = useState(false);
-  const [renameTargetPaths, setRenameTargetPaths] = useState<Array<string>>([]);
-  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
-  const [isCopyPasteSettingsModalOpen, setIsCopyPasteSettingsModalOpen] = useState(false);
-  const [importTargetFolder, setImportTargetFolder] = useState<string | null>(null);
-  const [importSourcePaths, setImportSourcePaths] = useState<Array<string>>([]);
-  const [folderActionTarget, setFolderActionTarget] = useState<string | null>(null);
-  const [confirmModalState, setConfirmModalState] = useState<ConfirmModalState>({ isOpen: false });
-  const [panoramaModalState, setPanoramaModalState] = useState<PanoramaModalState>({
-    error: null,
-    finalImageBase64: null,
-    isOpen: false,
-    progressMessage: '',
-    stitchingSourcePaths: [],
-  });
-  const [hdrModalState, setHdrModalState] = useState<HdrModalState>({
-    error: null,
-    finalImageBase64: null,
-    isOpen: false,
-    progressMessage: '',
-    stitchingSourcePaths: [],
-  });
-  const [negativeModalState, setNegativeModalState] = useState<NegativeConversionModalState>({
-    isOpen: false,
-    targetPath: null,
-  });
-  const [denoiseModalState, setDenoiseModalState] = useState<DenoiseModalState>({
-    isOpen: false,
-    isProcessing: false,
-    previewBase64: null,
-    error: null,
-    targetPath: null,
-    progressMessage: null,
-  });
-  const [cullingModalState, setCullingModalState] = useState<CullingModalState>({
-    isOpen: false,
-    suggestions: null,
-    progress: null,
-    error: null,
-    pathsToCull: [],
-  });
-  const [collageModalState, setCollageModalState] = useState<CollageModalState>({
-    isOpen: false,
-    sourceImages: [],
-  });
-  const [customEscapeHandler, setCustomEscapeHandler] = useState(null);
-  const [isGeneratingAiMask, setIsGeneratingAiMask] = useState(false);
-  const [isAIConnectorConnected, setisAIConnectorConnected] = useState(false);
-  const [isGeneratingAi, setIsGeneratingAi] = useState(false);
-  const [isMaskControlHovered, setIsMaskControlHovered] = useState(false);
-  const [libraryScrollTop, setLibraryScrollTop] = useState<number>(0);
-  const { showContextMenu } = useContextMenu();
-  const [thumbnails, setThumbnails] = useState<Record<string, string>>({});
-  const { loading: isThumbnailsLoading } = useThumbnails(imageList, setThumbnails);
-  const transformWrapperRef = useRef<any>(null);
-  const isProgrammaticZoom = useRef(false);
-  const isInitialMount = useRef(true);
-  const currentFolderPathRef = useRef<string>(currentFolderPath);
-  const preloadedDataRef = useRef<{
-    tree?: Promise<any>;
-    images?: Promise<ImageFile[]>;
-    rootPath?: string;
-    currentPath?: string;
-  }>({});
-  const previewJobIdRef = useRef<number>(0);
-  const latestRenderedJobIdRef = useRef<number>(0);
-
-  useEffect(() => {
-    if (currentFolderPath) {
-      preloadedDataRef.current = {
-        ...preloadedDataRef.current,
-        currentPath: currentFolderPath,
-        images: Promise.resolve(imageList),
-      };
-    }
-  }, [currentFolderPath, imageList]);
-
-  useEffect(() => {
-    if (rootPath && folderTree) {
-      preloadedDataRef.current = {
-        ...preloadedDataRef.current,
-        rootPath: rootPath,
-        tree: Promise.resolve(folderTree),
-      };
-    }
-  }, [rootPath, folderTree]);
-
-  const [exportState, setExportState] = useState<ExportState>({
-    errorMessage: '',
-    progress: { current: 0, total: 0 },
-    status: Status.Idle,
-  });
-
-  const [importState, setImportState] = useState<ImportState>({
-    errorMessage: '',
-    path: '',
-    progress: { current: 0, total: 0 },
-    status: Status.Idle,
-  });
-
-  useEffect(() => {
-    currentFolderPathRef.current = currentFolderPath;
-  }, [currentFolderPath]);
-
-  useEffect(() => {
-    if (!isCopied) {
-      return;
-    }
-    const timer = setTimeout(() => setIsCopied(false), 1000);
-    return () => clearTimeout(timer);
-  }, [isCopied]);
-
-  useEffect(() => {
-    if (!isPasted) {
-      return;
-    }
-    const timer = setTimeout(() => setIsPasted(false), 1000);
-    return () => clearTimeout(timer);
-  }, [isPasted]);
-
-  const isLightTheme = useMemo(() => [Theme.Light, Theme.Snow, Theme.Arctic].includes(theme as Theme), [theme]);
-
-  useEffect(() => {
-    if (error) {
-      toast.error(error);
-      setError(null);
-    }
-  }, [error]);
-
-  const debouncedSetHistory = useMemo(
-    () => debounce((newAdjustments) => setHistoryAdjustments(newAdjustments), 300),
-    [setHistoryAdjustments],
-  );
-
-  const setAdjustments = useCallback(
-    (value: any) => {
-      setLiveAdjustments((prevAdjustments: Adjustments) => {
-        const newAdjustments = typeof value === 'function' ? value(prevAdjustments) : value;
-        debouncedSetHistory(newAdjustments);
-        return newAdjustments;
-      });
-    },
-    [debouncedSetHistory],
-  );
-
-  const handleStraighten = useCallback(
-    (angleCorrection: number) => {
-      setAdjustments((prev: Partial<Adjustments>) => {
-        const newRotation = (prev.rotation || 0) + angleCorrection;
-        return { ...prev, rotation: newRotation, crop: null };
-      });
-
-      setIsStraightenActive(false);
-    },
-    [setAdjustments],
-  );
-
-  const toggleWbPicker = useCallback(() => {
-    setIsWbPickerActive((prev) => !prev);
-  }, []);
-
-  const handleWbPicked = useCallback(() => {
-    //setIsWbPickerActive(false); // lets keep it active
-  }, []);
-
-  useEffect(() => {
-    setLiveAdjustments(historyAdjustments);
-  }, [historyAdjustments]);
-
-  useEffect(() => {
-    if (
-      (activeRightPanel !== Panel.Masks || !activeMaskContainerId) &&
-      (activeRightPanel !== Panel.Ai || !activeAiPatchContainerId)
-    ) {
-      setIsMaskControlHovered(false);
-    }
-  }, [activeRightPanel, activeMaskContainerId, activeAiPatchContainerId]);
-
-  const geometricAdjustmentsKey = useMemo(() => {
-    if (!adjustments) return '';
-    const { crop, rotation, flipHorizontal, flipVertical, orientationSteps } = adjustments;
-    return JSON.stringify({ crop, rotation, flipHorizontal, flipVertical, orientationSteps });
-  }, [
-    adjustments?.crop,
-    adjustments?.rotation,
-    adjustments?.flipHorizontal,
-    adjustments?.flipVertical,
-    adjustments?.orientationSteps,
-  ]);
-
-  const visualAdjustmentsKey = useMemo(() => {
-    if (!adjustments) return '';
-    const { rating: _rating, sectionVisibility: _sectionVisibility, ...visualAdjustments } = adjustments;
-    return JSON.stringify(visualAdjustments);
-  }, [adjustments]);
-
-  const undo = useCallback(() => {
-    if (canUndo) {
-      undoAdjustments();
-      debouncedSetHistory.cancel();
-    }
-  }, [canUndo, undoAdjustments, debouncedSetHistory]);
-  const redo = useCallback(() => {
-    if (canRedo) {
-      redoAdjustments();
-      debouncedSetHistory.cancel();
-    }
-  }, [canRedo, redoAdjustments, debouncedSetHistory]);
-
-  useEffect(() => {
-    setTransformedOriginalUrl(null);
-  }, [geometricAdjustmentsKey, selectedImage?.path]);
-
-  useEffect(() => {
-    let isEffectActive = true;
-
-    const generate = async () => {
-      if (showOriginal && selectedImage?.path && !transformedOriginalUrl) {
-        try {
-          const base64Data: string = await invoke('generate_original_transformed_preview', {
-            jsAdjustments: adjustments,
-          });
-          if (isEffectActive) {
-            setTransformedOriginalUrl(base64Data);
-          }
-        } catch (e) {
-          if (isEffectActive) {
-            console.error('Failed to generate original preview:', e);
-            setError('Failed to show original image.');
-            setShowOriginal(false);
-          }
-        }
-      }
-    };
-
-    generate();
-
-    return () => {
-      isEffectActive = false;
-    };
-  }, [showOriginal, selectedImage?.path, adjustments, transformedOriginalUrl]);
-
-  useEffect(() => {
-    if (currentFolderPath) {
-      refreshImageList();
-    }
-  }, [libraryViewMode]);
-
-  useEffect(() => {
-    const unlisten = listen('ai-connector-status-update', (event: any) => {
-      setisAIConnectorConnected(event.payload.connected);
-    });
-    invoke(Invokes.CheckAIConnectorStatus);
-    const interval = setInterval(() => invoke(Invokes.CheckAIConnectorStatus), 10000);
-    return () => {
-      clearInterval(interval);
-      unlisten.then((f) => f());
-    };
-  }, []);
-
-  const updateSubMask = (subMaskId: string, updatedData: any) => {
-    setAdjustments((prev: Adjustments) => ({
-      ...prev,
-      masks: prev.masks.map((c: MaskContainer) => ({
-        ...c,
-        subMasks: c.subMasks.map((sm: SubMask) => (sm.id === subMaskId ? { ...sm, ...updatedData } : sm)),
-      })),
-      aiPatches: (prev.aiPatches || []).map((p: AiPatch) => ({
-        ...p,
-        subMasks: p.subMasks.map((sm: SubMask) => (sm.id === subMaskId ? { ...sm, ...updatedData } : sm)),
-      })),
-    }));
-  };
-
-  const handleGenerativeReplace = useCallback(
-    async (patchId: string, prompt: string, useFastInpaint: boolean) => {
-      if (!selectedImage?.path || isGeneratingAi) {
-        return;
-      }
-
-      const patch: AiPatch | undefined = adjustments.aiPatches.find((p: AiPatch) => p.id === patchId);
-      if (!patch) {
-        console.error('Could not find AI patch to generate for:', patchId);
-        return;
-      }
-
-      const patchDefinition = { ...patch, prompt };
-
-      setAdjustments((prev: Adjustments) => ({
-        ...prev,
-        aiPatches: prev.aiPatches.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: true, prompt } : p)),
-      }));
-
-      setIsGeneratingAi(true);
-
-      try {
-        const newPatchDataJson: any = await invoke(Invokes.InvokeGenerativeReplaseWithMaskDef, {
-          currentAdjustments: adjustments,
-          patchDefinition: patchDefinition,
-          path: selectedImage.path,
-          useFastInpaint: useFastInpaint,
-        });
-
-        const newPatchData = JSON.parse(newPatchDataJson);
-        patchesSentToBackend.current.delete(patchId);
-        setAdjustments((prev: Adjustments) => ({
-          ...prev,
-          aiPatches: prev.aiPatches.map((p: AiPatch) =>
-            p.id === patchId
-              ? {
-                  ...p,
-                  patchData: newPatchData,
-                  isLoading: false,
-                  name: useFastInpaint ? 'Inpaint' : prompt && prompt.trim() ? prompt.trim() : p.name,
-                }
-              : p,
-          ),
-        }));
-        setActiveAiPatchContainerId(null);
-        setActiveAiSubMaskId(null);
-      } catch (err) {
-        console.error('Generative replace failed:', err);
-        setError(`AI Replace Failed: ${err}`);
-        setAdjustments((prev: Adjustments) => ({
-          ...prev,
-          aiPatches: prev.aiPatches.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: false } : p)),
-        }));
-      } finally {
-        setIsGeneratingAi(false);
-      }
-    },
-    [
-      selectedImage?.path,
-      isGeneratingAi,
-      adjustments,
-      setAdjustments,
-      setActiveAiPatchContainerId,
-      setActiveAiSubMaskId,
-    ],
-  );
-
-  const handleQuickErase = useCallback(
-    async (subMaskId: string | null, startPoint: Coord, endPoint: Coord) => {
-      if (!selectedImage?.path || isGeneratingAi) {
-        return;
-      }
-
-      const patchId = adjustments.aiPatches.find((p: AiPatch) =>
-        p.subMasks.some((sm: SubMask) => sm.id === subMaskId),
-      )?.id;
-      if (!patchId) {
-        console.error('Could not find AI patch container for Quick Erase.');
-        return;
-      }
-
-      setIsGeneratingAi(true);
-      setAdjustments((prev: Partial<Adjustments>) => ({
-        ...prev,
-        aiPatches: prev.aiPatches?.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: true } : p)),
-      }));
-
-      try {
-        const transformAdjustments = {
-          transformDistortion: adjustments.transformDistortion,
-          transformVertical: adjustments.transformVertical,
-          transformHorizontal: adjustments.transformHorizontal,
-          transformRotate: adjustments.transformRotate,
-          transformAspect: adjustments.transformAspect,
-          transformScale: adjustments.transformScale,
-          transformXOffset: adjustments.transformXOffset,
-          transformYOffset: adjustments.transformYOffset,
-          lensDistortionAmount: adjustments.lensDistortionAmount,
-          lensVignetteAmount: adjustments.lensVignetteAmount,
-          lensTcaAmount: adjustments.lensTcaAmount,
-          lensDistortionParams: adjustments.lensDistortionParams,
-          lensMaker: adjustments.lensMaker,
-          lensModel: adjustments.lensModel,
-          lensDistortionEnabled: adjustments.lensDistortionEnabled,
-          lensTcaEnabled: adjustments.lensTcaEnabled,
-          lensVignetteEnabled: adjustments.lensVignetteEnabled,
-        };
-
-        const newMaskParams: any = await invoke(Invokes.GenerateAiSubjectMask, {
-          jsAdjustments: transformAdjustments,
-          endPoint: [endPoint.x, endPoint.y],
-          flipHorizontal: adjustments.flipHorizontal,
-          flipVertical: adjustments.flipVertical,
-          orientationSteps: adjustments.orientationSteps,
-          path: selectedImage.path,
-          rotation: adjustments.rotation,
-          startPoint: [startPoint.x, startPoint.y],
-        });
-
-        const subMaskToUpdate = adjustments.aiPatches
-          ?.find((p: AiPatch) => p.id === patchId)
-          ?.subMasks.find((sm: SubMask) => sm.id === subMaskId);
-        const finalSubMaskParams: any = { ...subMaskToUpdate?.parameters, ...newMaskParams };
-        const updatedAdjustmentsForBackend = {
-          ...adjustments,
-          aiPatches: adjustments.aiPatches.map((p: AiPatch) =>
-            p.id === patchId
-              ? {
-                  ...p,
-                  subMasks: p.subMasks.map((sm: SubMask) =>
-                    sm.id === subMaskId ? { ...sm, parameters: finalSubMaskParams } : sm,
-                  ),
-                }
-              : p,
-          ),
-        };
-
-        const patchDefinitionForBackend = updatedAdjustmentsForBackend.aiPatches.find((p: AiPatch) => p.id === patchId);
-        const newPatchDataJson: any = await invoke(Invokes.InvokeGenerativeReplaseWithMaskDef, {
-          currentAdjustments: updatedAdjustmentsForBackend,
-          patchDefinition: { ...patchDefinitionForBackend, prompt: '' },
-          path: selectedImage.path,
-          useFastInpaint: true,
-        });
-
-        const newPatchData = JSON.parse(newPatchDataJson);
-        if (!newPatchData?.color || !newPatchData?.mask) {
-          throw new Error('Inpainting failed to return a valid result.');
-        }
-        patchesSentToBackend.current.delete(patchId);
-
-        setAdjustments((prev: Partial<Adjustments>) => ({
-          ...prev,
-          aiPatches: prev.aiPatches?.map((p: AiPatch) =>
-            p.id === patchId
-              ? {
-                  ...p,
-                  patchData: newPatchData,
-                  isLoading: false,
-                  subMasks: p.subMasks.map((sm: SubMask) =>
-                    sm.id === subMaskId ? { ...sm, parameters: finalSubMaskParams } : sm,
-                  ),
-                }
-              : p,
-          ),
-        }));
-        setActiveAiPatchContainerId(null);
-        setActiveAiSubMaskId(null);
-      } catch (err: any) {
-        console.error('Quick Erase failed:', err);
-        setError(`Quick Erase Failed: ${err.message || String(err)}`);
-        setAdjustments((prev: Partial<Adjustments>) => ({
-          ...prev,
-          aiPatches: prev.aiPatches?.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: false } : p)),
-        }));
-      } finally {
-        setIsGeneratingAi(false);
-      }
-    },
-    [
-      selectedImage?.path,
-      isGeneratingAi,
-      adjustments,
-      setAdjustments,
-      setActiveAiPatchContainerId,
-      setActiveAiSubMaskId,
-    ],
-  );
-
-  const handleDeleteMaskContainer = useCallback(
-    (containerId: string) => {
-      setAdjustments((prev: Adjustments) => ({
-        ...prev,
-        masks: (prev.masks || []).filter((c) => c.id !== containerId),
-      }));
-      if (activeMaskContainerId === containerId) {
-        setActiveMaskContainerId(null);
-        setActiveMaskId(null);
-      }
-    },
-    [setAdjustments, activeMaskContainerId],
-  );
-
-  const handleDeleteAiPatch = useCallback(
-    (patchId: string) => {
-      setAdjustments((prev: Adjustments) => ({
-        ...prev,
-        aiPatches: (prev.aiPatches || []).filter((p) => p.id !== patchId),
-      }));
-      if (activeAiPatchContainerId === patchId) {
-        setActiveAiPatchContainerId(null);
-        setActiveAiSubMaskId(null);
-      }
-    },
-    [setAdjustments, activeAiPatchContainerId],
-  );
-
-  const handleToggleAiPatchVisibility = useCallback(
-    (patchId: string) => {
-      setAdjustments((prev: Adjustments) => ({
-        ...prev,
-        aiPatches: (prev.aiPatches || []).map((p: AiPatch) => (p.id === patchId ? { ...p, visible: !p.visible } : p)),
-      }));
-    },
-    [setAdjustments],
-  );
-
-  const handleGenerateAiMask = async (subMaskId: string, startPoint: Coord, endPoint: Coord) => {
-    if (!selectedImage?.path) {
-      console.error('Cannot generate AI mask: No image selected.');
-      return;
-    }
-    setIsGeneratingAiMask(true);
-    try {
-      const transformAdjustments = {
-        transformDistortion: adjustments.transformDistortion,
-        transformVertical: adjustments.transformVertical,
-        transformHorizontal: adjustments.transformHorizontal,
-        transformRotate: adjustments.transformRotate,
-        transformAspect: adjustments.transformAspect,
-        transformScale: adjustments.transformScale,
-        transformXOffset: adjustments.transformXOffset,
-        transformYOffset: adjustments.transformYOffset,
-        lensDistortionAmount: adjustments.lensDistortionAmount,
-        lensVignetteAmount: adjustments.lensVignetteAmount,
-        lensTcaAmount: adjustments.lensTcaAmount,
-        lensDistortionParams: adjustments.lensDistortionParams,
-        lensMaker: adjustments.lensMaker,
-        lensModel: adjustments.lensModel,
-        lensDistortionEnabled: adjustments.lensDistortionEnabled,
-        lensTcaEnabled: adjustments.lensTcaEnabled,
-        lensVignetteEnabled: adjustments.lensVignetteEnabled,
-      };
-      const newParameters = await invoke(Invokes.GenerateAiSubjectMask, {
-        jsAdjustments: transformAdjustments,
-        endPoint: [endPoint.x, endPoint.y],
-        flipHorizontal: adjustments.flipHorizontal,
-        flipVertical: adjustments.flipVertical,
-        orientationSteps: adjustments.orientationSteps,
-        path: selectedImage.path,
-        rotation: adjustments.rotation,
-        startPoint: [startPoint.x, startPoint.y],
-      });
-
-      const subMask = adjustments.aiPatches
-        ?.flatMap((p: AiPatch) => p.subMasks)
-        .find((sm: SubMask) => sm.id === subMaskId);
-
-      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
-      patchesSentToBackend.current.delete(subMaskId);
-      updateSubMask(subMaskId, { parameters: mergedParameters });
-    } catch (error) {
-      console.error('Failed to generate AI subject mask:', error);
-      setError(`AI Mask Failed: ${error}`);
-    } finally {
-      setIsGeneratingAiMask(false);
-    }
-  };
-
-  const handleGenerateAiForegroundMask = async (subMaskId: string) => {
-    if (!selectedImage?.path) {
-      console.error('Cannot generate AI mask: No image selected.');
-      return;
-    }
-    setIsGeneratingAiMask(true);
-    try {
-      const transformAdjustments = {
-        transformDistortion: adjustments.transformDistortion,
-        transformVertical: adjustments.transformVertical,
-        transformHorizontal: adjustments.transformHorizontal,
-        transformRotate: adjustments.transformRotate,
-        transformAspect: adjustments.transformAspect,
-        transformScale: adjustments.transformScale,
-        transformXOffset: adjustments.transformXOffset,
-        transformYOffset: adjustments.transformYOffset,
-        lensDistortionAmount: adjustments.lensDistortionAmount,
-        lensVignetteAmount: adjustments.lensVignetteAmount,
-        lensTcaAmount: adjustments.lensTcaAmount,
-        lensDistortionParams: adjustments.lensDistortionParams,
-        lensMaker: adjustments.lensMaker,
-        lensModel: adjustments.lensModel,
-        lensDistortionEnabled: adjustments.lensDistortionEnabled,
-        lensTcaEnabled: adjustments.lensTcaEnabled,
-        lensVignetteEnabled: adjustments.lensVignetteEnabled,
-      };
-      const newParameters = await invoke(Invokes.GenerateAiForegroundMask, {
-        jsAdjustments: transformAdjustments,
-        flipHorizontal: adjustments.flipHorizontal,
-        flipVertical: adjustments.flipVertical,
-        orientationSteps: adjustments.orientationSteps,
-        rotation: adjustments.rotation,
-      });
-
-      const subMask = adjustments.aiPatches
-        ?.flatMap((p: AiPatch) => p.subMasks)
-        .find((sm: SubMask) => sm.id === subMaskId);
-
-      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
-      patchesSentToBackend.current.delete(subMaskId);
-      updateSubMask(subMaskId, { parameters: mergedParameters });
-    } catch (error) {
-      console.error('Failed to generate AI foreground mask:', error);
-      setError(`AI Mask Failed: ${error}`);
-    } finally {
-      setIsGeneratingAiMask(false);
-    }
-  };
-
-  const handleGenerateAiSkyMask = async (subMaskId: string) => {
-    if (!selectedImage?.path) {
-      console.error('Cannot generate AI mask: No image selected.');
-      return;
-    }
-    setIsGeneratingAiMask(true);
-    try {
-      const transformAdjustments = {
-        transformDistortion: adjustments.transformDistortion,
-        transformVertical: adjustments.transformVertical,
-        transformHorizontal: adjustments.transformHorizontal,
-        transformRotate: adjustments.transformRotate,
-        transformAspect: adjustments.transformAspect,
-        transformScale: adjustments.transformScale,
-        transformXOffset: adjustments.transformXOffset,
-        transformYOffset: adjustments.transformYOffset,
-        lensDistortionAmount: adjustments.lensDistortionAmount,
-        lensVignetteAmount: adjustments.lensVignetteAmount,
-        lensTcaAmount: adjustments.lensTcaAmount,
-        lensDistortionParams: adjustments.lensDistortionParams,
-        lensMaker: adjustments.lensMaker,
-        lensModel: adjustments.lensModel,
-        lensDistortionEnabled: adjustments.lensDistortionEnabled,
-        lensTcaEnabled: adjustments.lensTcaEnabled,
-        lensVignetteEnabled: adjustments.lensVignetteEnabled,
-      };
-      const newParameters = await invoke(Invokes.GenerateAiSkyMask, {
-        jsAdjustments: transformAdjustments,
-        flipHorizontal: adjustments.flipHorizontal,
-        flipVertical: adjustments.flipVertical,
-        orientationSteps: adjustments.orientationSteps,
-        rotation: adjustments.rotation,
-      });
-
-      const subMask = adjustments.aiPatches
-        ?.flatMap((p: AiPatch) => p.subMasks)
-        .find((sm: SubMask) => sm.id === subMaskId);
-
-      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
-      patchesSentToBackend.current.delete(subMaskId);
-      updateSubMask(subMaskId, { parameters: mergedParameters });
-    } catch (error) {
-      console.error('Failed to generate AI sky mask:', error);
-      setError(`AI Mask Failed: ${error}`);
-    } finally {
-      setIsGeneratingAiMask(false);
-    }
-  };
-
-  const sortedImageList = useMemo(() => {
-    let processedList = imageList;
-
-    if (filterCriteria.rawStatus === RawStatus.RawOverNonRaw && supportedTypes) {
-      const rawBaseNames = new Set<string>();
-
-      for (const image of imageList) {
-        const pathWithoutVC = image.path.split('?vc=')[0];
-        const filename = pathWithoutVC.split(/[\\/]/).pop() || '';
-        const lastDotIndex = filename.lastIndexOf('.');
-        const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1).toLowerCase() : '';
-
-        if (extension && supportedTypes.raw.includes(extension)) {
-          const baseName = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
-          const parentDir = getParentDir(pathWithoutVC);
-          const uniqueKey = `${parentDir}/${baseName}`;
-          rawBaseNames.add(uniqueKey);
-        }
-      }
-
-      if (rawBaseNames.size > 0) {
-        processedList = imageList.filter((image) => {
-          const pathWithoutVC = image.path.split('?vc=')[0];
-          const filename = pathWithoutVC.split(/[\\/]/).pop() || '';
-          const lastDotIndex = filename.lastIndexOf('.');
-          const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1).toLowerCase() : '';
-
-          const isNonRaw = extension && supportedTypes.nonRaw.includes(extension);
-
-          if (isNonRaw) {
-            const baseName = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
-            const parentDir = getParentDir(pathWithoutVC);
-            const uniqueKey = `${parentDir}/${baseName}`;
-
-            if (rawBaseNames.has(uniqueKey)) {
-              return false;
-            }
-          }
-
-          return true;
-        });
-      }
-    }
-
-    const filteredList = processedList.filter((image) => {
-      if (filterCriteria.rating > 0) {
-        const rating = imageRatings[image.path] || 0;
-        if (filterCriteria.rating === 5) {
-          if (rating !== 5) return false;
-        } else {
-          if (rating < filterCriteria.rating) return false;
-        }
-      }
-
-      if (
-        filterCriteria.rawStatus &&
-        filterCriteria.rawStatus !== RawStatus.All &&
-        filterCriteria.rawStatus !== RawStatus.RawOverNonRaw &&
-        supportedTypes
-      ) {
-        const extension = image.path.split('.').pop()?.toLowerCase() || '';
-        const isRaw = supportedTypes.raw?.includes(extension);
-
-        if (filterCriteria.rawStatus === RawStatus.RawOnly && !isRaw) {
-          return false;
-        }
-        if (filterCriteria.rawStatus === RawStatus.NonRawOnly && isRaw) {
-          return false;
-        }
-      }
-
-      if (filterCriteria.colors && filterCriteria.colors.length > 0) {
-        const imageColor = (image.tags || []).find((tag: string) => tag.startsWith('color:'))?.substring(6);
-
-        const hasMatchingColor = imageColor && filterCriteria.colors.includes(imageColor);
-        const matchesNone = !imageColor && filterCriteria.colors.includes('none');
-
-        if (!hasMatchingColor && !matchesNone) {
-          return false;
-        }
-      }
-
-      return true;
-    });
-
-    const { tags: searchTags, text: searchText, mode: searchMode } = searchCriteria;
-    const lowerCaseSearchText = searchText.trim().toLowerCase();
-
-    const filteredBySearch =
-      searchTags.length === 0 && lowerCaseSearchText === ''
-        ? filteredList
-        : filteredList.filter((image: ImageFile) => {
-            const lowerCaseImageTags = (image.tags || []).map((t) => t.toLowerCase().replace('user:', ''));
-            const filename = image?.path?.split(/[\\/]/)?.pop()?.toLowerCase() || '';
-
-            let tagsMatch = true;
-            if (searchTags.length > 0) {
-              const lowerCaseSearchTags = searchTags.map((t) => t.toLowerCase());
-              if (searchMode === 'OR') {
-                tagsMatch = lowerCaseSearchTags.some((searchTag) =>
-                  lowerCaseImageTags.some((imgTag) => imgTag.includes(searchTag)),
-                );
-              } else {
-                tagsMatch = lowerCaseSearchTags.every((searchTag) =>
-                  lowerCaseImageTags.some((imgTag) => imgTag.includes(searchTag)),
-                );
-              }
-            }
-
-            let textMatch = true;
-            if (lowerCaseSearchText !== '') {
-              textMatch =
-                filename.includes(lowerCaseSearchText) ||
-                lowerCaseImageTags.some((t) => t.includes(lowerCaseSearchText));
-            }
-
-            return tagsMatch && textMatch;
-          });
-
-    const list = [...filteredBySearch];
-
-    const parseShutter = (val: string | undefined): number | null => {
-      if (!val) return null;
-      const cleanVal = val.replace(/s/i, '').trim();
-      const parts = cleanVal.split('/');
-      if (parts.length === 2) {
-        const num = parseFloat(parts[0]);
-        const den = parseFloat(parts[1]);
-        return den !== 0 ? num / den : null;
-      }
-      const numVal = parseFloat(cleanVal);
-      return isNaN(numVal) ? null : numVal;
-    };
-
-    const parseAperture = (val: string | undefined): number | null => {
-      if (!val) return null;
-      const match = val.match(/(\d+(\.\d+)?)/);
-      const numVal = match ? parseFloat(match[0]) : null;
-      return numVal === null || isNaN(numVal) ? null : numVal;
-    };
-
-    const parseFocalLength = (val: string | undefined): number | null => {
-      if (!val) return null;
-      const match = val.match(/(\d+(\.\d+)?)/);
-      if (!match) return null;
-      const numVal = parseFloat(match[0]);
-      return isNaN(numVal) ? null : numVal;
-    };
-
-    list.sort((a, b) => {
-      const { key, order } = sortCriteria;
-      let comparison = 0;
-
-      const compareNullable = (valA: any, valB: any) => {
-        if (valA !== null && valB !== null) {
-          if (valA < valB) return -1;
-          if (valA > valB) return 1;
-          return 0;
-        }
-        if (valA !== null) return -1;
-        if (valB !== null) return 1;
-        return 0;
-      };
-
-      switch (key) {
-        case 'date_taken': {
-          const dateA = a.exif?.DateTimeOriginal;
-          const dateB = b.exif?.DateTimeOriginal;
-          comparison = compareNullable(dateA, dateB);
-          if (comparison === 0) comparison = a.modified - b.modified;
-          break;
-        }
-        case 'iso': {
-          const getIso = (exif: { [key: string]: string } | null): number | null => {
-            if (!exif) return null;
-            const isoStr = exif.PhotographicSensitivity || exif.ISOSpeedRatings;
-            if (!isoStr) return null;
-            const isoNum = parseInt(isoStr, 10);
-            return isNaN(isoNum) ? null : isoNum;
-          };
-          const isoA = getIso(a.exif);
-          const isoB = getIso(b.exif);
-          comparison = compareNullable(isoA, isoB);
-          break;
-        }
-        case 'shutter_speed': {
-          const shutterA = parseShutter(a.exif?.ExposureTime);
-          const shutterB = parseShutter(b.exif?.ExposureTime);
-          comparison = compareNullable(shutterA, shutterB);
-          break;
-        }
-        case 'aperture': {
-          const apertureA = parseAperture(a.exif?.FNumber);
-          const apertureB = parseAperture(b.exif?.FNumber);
-          comparison = compareNullable(apertureA, apertureB);
-          break;
-        }
-        case 'focal_length': {
-          const focalA = parseFocalLength(a.exif?.FocalLength);
-          const focalB = parseFocalLength(b.exif?.FocalLength);
-          comparison = compareNullable(focalA, focalB);
-          break;
-        }
-        case 'date':
-          comparison = a.modified - b.modified;
-          break;
-        case 'rating':
-          comparison = (imageRatings[a.path] || 0) - (imageRatings[b.path] || 0);
-          break;
-        default:
-          comparison = a.path.localeCompare(b.path);
-          break;
-      }
-
-      if (comparison === 0 && key !== 'name') {
-        return a.path.localeCompare(b.path);
-      }
-
-      return order === SortDirection.Ascending ? comparison : -comparison;
-    });
-    return list;
-  }, [imageList, sortCriteria, imageRatings, filterCriteria, supportedTypes, searchCriteria, appSettings]);
-
-  const applyAdjustments = useCallback(
-    async (currentAdjustments: Adjustments, dragging: boolean = false) => {
-      if (!selectedImage?.isReady) return;
-      const currentPath = selectedImage.path;
-
-      const payload = JSON.parse(JSON.stringify(currentAdjustments));
-
-      if (payload.aiPatches && Array.isArray(payload.aiPatches)) {
-        payload.aiPatches.forEach((p: any) => {
-          if (p.id && p.patchData && !p.isLoading) {
-            if (patchesSentToBackend.current.has(p.id)) {
-              p.patchData = null;
-            } else {
-              patchesSentToBackend.current.add(p.id);
-            }
-          }
-        });
-      }
-
-      if (payload.masks && Array.isArray(payload.masks)) {
-        payload.masks.forEach((container: any) => {
-          if (container.subMasks && Array.isArray(container.subMasks)) {
-            container.subMasks.forEach((sm: any) => {
-              if (sm.id && sm.parameters && sm.parameters.mask_data_base64) {
-                if (patchesSentToBackend.current.has(sm.id)) {
-                  sm.parameters.mask_data_base64 = null;
-                } else {
-                  patchesSentToBackend.current.add(sm.id);
-                }
-              }
-            });
-          }
-        });
-      }
-
-      const jobId = ++previewJobIdRef.current;
-
-      try {
-        const buffer: ArrayBuffer = await invoke(Invokes.ApplyAdjustments, {
-          jsAdjustments: payload,
-          isInteractive: dragging,
-        });
-
-        if (currentPath !== selectedImagePathRef.current) return;
-
-        if (buffer && buffer.byteLength > 0 && jobId >= latestRenderedJobIdRef.current) {
-          latestRenderedJobIdRef.current = jobId;
-          const blob = new Blob([buffer], { type: 'image/jpeg' });
-          const url = URL.createObjectURL(blob);
-
-          setFinalPreviewUrl((prevUrl) => {
-            if (prevUrl && prevUrl.startsWith('blob:')) URL.revokeObjectURL(prevUrl);
-            return url;
-          });
-        }
-      } catch (err) {
-        if (err !== 'Superseded or worker failed') {
-          console.error('Failed to apply adjustments:', err);
-        }
-      }
-    },
-    [selectedImage?.isReady, selectedImage?.path],
-  );
-
-  const generateUncroppedPreview = useCallback(
-    (currentAdjustments: Adjustments) => {
-      if (!selectedImage?.isReady) {
-        return;
-      }
-      invoke(Invokes.GenerateUncroppedPreview, { jsAdjustments: currentAdjustments }).catch((err) =>
-        console.error('Failed to generate uncropped preview:', err),
-      );
-    },
-    [selectedImage?.isReady],
-  );
-
-  useEffect(() => {
-    if (activeRightPanel === Panel.Crop && selectedImage?.isReady) {
-      generateUncroppedPreview(adjustments);
-    }
-  }, [adjustments, activeRightPanel, selectedImage?.isReady, generateUncroppedPreview]);
-
-  const debouncedSave = useCallback(
-    debounce((path, adjustmentsToSave) => {
-      invoke(Invokes.SaveMetadataAndUpdateThumbnail, { path, adjustments: adjustmentsToSave }).catch((err) => {
-        console.error('Auto-save failed:', err);
-        setError(`Failed to save changes: ${err}`);
-      });
-    }, 300),
-    [],
-  );
-
-  const createResizeHandler = (setter: any, startSize: number) => (e: any) => {
-    e.preventDefault();
-    setIsResizing(true);
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const doDrag = (moveEvent: any) => {
-      if (setter === setLeftPanelWidth) {
-        setter(Math.max(200, Math.min(startSize + (moveEvent.clientX - startX), 500)));
-      } else if (setter === setRightPanelWidth) {
-        setter(Math.max(280, Math.min(startSize - (moveEvent.clientX - startX), 600)));
-      } else if (setter === setBottomPanelHeight) {
-        setter(Math.max(100, Math.min(startSize - (moveEvent.clientY - startY), 400)));
-      }
-    };
-    const stopDrag = () => {
-      document.documentElement.style.cursor = '';
-      window.removeEventListener('mousemove', doDrag);
-      window.removeEventListener('mouseup', stopDrag);
-      setIsResizing(false);
-    };
-    document.documentElement.style.cursor = setter === setBottomPanelHeight ? 'row-resize' : 'col-resize';
-    window.addEventListener('mousemove', doDrag);
-    window.addEventListener('mouseup', stopDrag);
-  };
-
-  useEffect(() => {
-    const appWindow = getCurrentWindow();
-    const checkFullscreen = async () => {
-      setIsWindowFullScreen(await appWindow.isFullscreen());
-    };
-    checkFullscreen();
-
-    const unlistenPromise = appWindow.onResized(checkFullscreen);
-
-    return () => {
-      unlistenPromise.then((unlisten: any) => unlisten());
-    };
-  }, []);
-
-  const handleLutSelect = useCallback(
-    async (path: string) => {
-      try {
-        const result: LutData = await invoke('load_and_parse_lut', { path });
-        const name = path.split(/[\\/]/).pop() || 'LUT';
-        setAdjustments((prev: Partial<Adjustments>) => ({
-          ...prev,
-          lutPath: path,
-          lutName: name,
-          lutSize: result.size,
-          lutIntensity: 100,
-          sectionVisibility: {
-            ...(prev.sectionVisibility || INITIAL_ADJUSTMENTS.sectionVisibility),
-            effects: true,
-          },
-        }));
-      } catch (err) {
-        console.error('Failed to load or parse LUT:', err);
-        setError(`Failed to load LUT: ${err}`);
-      }
-    },
-    [setAdjustments],
-  );
-
-  const handleRightPanelSelect = useCallback(
-    (panelId: Panel) => {
-      if (panelId === activeRightPanel) {
-        setActiveRightPanel(null);
-      } else {
-        const currentIndex = activeRightPanel ? RIGHT_PANEL_ORDER.indexOf(activeRightPanel) : -1;
-        const newIndex = RIGHT_PANEL_ORDER.indexOf(panelId);
-        setSlideDirection(newIndex > currentIndex ? 1 : -1);
-        setActiveRightPanel(panelId);
-        setRenderedRightPanel(panelId);
-      }
-      setActiveMaskId(null);
-      setActiveAiSubMaskId(null);
-    },
-    [activeRightPanel],
-  );
-
-  const handleSettingsChange = useCallback(
-    (newSettings: AppSettings) => {
-      if (!newSettings) {
-        console.error('handleSettingsChange was called with null settings. Aborting save operation.');
-        return;
-      }
-      if (newSettings.theme && newSettings.theme !== theme) {
-        setTheme(newSettings.theme);
-      }
-
-      const { searchCriteria: _searchCriteria, ...settingsToSave } = newSettings as any;
-      setAppSettings(newSettings);
-      invoke(Invokes.SaveSettings, { settings: settingsToSave }).catch((err) => {
-        console.error('Failed to save settings:', err);
-      });
-    },
-    [theme],
-  );
-
-  useEffect(() => {
-    invoke(Invokes.LoadSettings)
-      .then(async (settings: any) => {
-        if (
-          !settings.copyPasteSettings ||
-          !settings.copyPasteSettings.includedAdjustments ||
-          settings.copyPasteSettings.includedAdjustments.length === 0
-        ) {
-          settings.copyPasteSettings = {
-            mode: 'merge',
-            includedAdjustments: COPYABLE_ADJUSTMENT_KEYS,
-          };
-        }
-        setAppSettings(settings);
-        if (settings?.sortCriteria) setSortCriteria(settings.sortCriteria);
-        if (settings?.filterCriteria) {
-          setFilterCriteria((prev: FilterCriteria) => ({
-            ...prev,
-            ...settings.filterCriteria,
-            rawStatus: settings.filterCriteria.rawStatus || RawStatus.All,
-            colors: settings.filterCriteria.colors || [],
-          }));
-        }
-        if (settings?.theme) {
-          setTheme(settings.theme);
-        }
-        if (settings?.uiVisibility) {
-          setUiVisibility((prev) => ({ ...prev, ...settings.uiVisibility }));
-        }
-        if (settings?.libraryViewMode) {
-          setLibraryViewMode(settings.libraryViewMode);
-        }
-        if (settings?.thumbnailSize) {
-          setThumbnailSize(settings.thumbnailSize);
-        }
-        if (settings?.thumbnailAspectRatio) {
-          setThumbnailAspectRatio(settings.thumbnailAspectRatio);
-        }
-        if (settings?.activeTreeSection) {
-          setActiveTreeSection(settings.activeTreeSection);
-        }
-        if (settings?.pinnedFolders && settings.pinnedFolders.length > 0) {
-          try {
-            const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: settings.pinnedFolders });
-            setPinnedFolderTrees(trees);
-          } catch (err) {
-            console.error('Failed to load pinned folder trees:', err);
-          }
-        }
-
-        if (settings.lastRootPath) {
-          const root = settings.lastRootPath;
-          const currentPath = settings.lastFolderState?.currentFolderPath || root;
-
-          const command =
-            settings.libraryViewMode === LibraryViewMode.Recursive
-              ? Invokes.ListImagesRecursive
-              : Invokes.ListImagesInDir;
-
-          preloadedDataRef.current = {
-            rootPath: root,
-            currentPath: currentPath,
-            tree: invoke(Invokes.GetFolderTree, { path: root }),
-            images: invoke(command, { path: currentPath }),
-          };
-        }
-
-        invoke('frontend_ready').catch((e) => console.error('Failed to notify backend of readiness:', e));
-      })
-      .catch((err) => {
-        console.error('Failed to load settings:', err);
-        setAppSettings({ lastRootPath: null, theme: DEFAULT_THEME_ID });
-      })
-      .finally(() => {
-        isInitialMount.current = false;
-      });
-  }, []);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (JSON.stringify(appSettings.uiVisibility) !== JSON.stringify(uiVisibility)) {
-      handleSettingsChange({ ...appSettings, uiVisibility });
-    }
-  }, [uiVisibility, appSettings, handleSettingsChange]);
-
-  const handleToggleWaveform = useCallback(() => {
-    setIsWaveformVisible((prev: boolean) => !prev);
-  }, []);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (appSettings.thumbnailSize !== thumbnailSize) {
-      handleSettingsChange({ ...appSettings, thumbnailSize });
-    }
-  }, [thumbnailSize, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (appSettings.thumbnailAspectRatio !== thumbnailAspectRatio) {
-      handleSettingsChange({ ...appSettings, thumbnailAspectRatio });
-    }
-  }, [thumbnailAspectRatio, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (appSettings.libraryViewMode !== libraryViewMode) {
-      handleSettingsChange({ ...appSettings, libraryViewMode });
-    }
-  }, [libraryViewMode, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    invoke(Invokes.GetSupportedFileTypes)
-      .then((types: any) => setSupportedTypes(types))
-      .catch((err) => console.error('Failed to load supported file types:', err));
-  }, []);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (JSON.stringify(appSettings.sortCriteria) !== JSON.stringify(sortCriteria)) {
-      handleSettingsChange({ ...appSettings, sortCriteria });
-    }
-  }, [sortCriteria, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings) {
-      return;
-    }
-    if (JSON.stringify(appSettings.filterCriteria) !== JSON.stringify(filterCriteria)) {
-      handleSettingsChange({ ...appSettings, filterCriteria });
-    }
-  }, [filterCriteria, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    if (appSettings?.adaptiveEditorTheme && selectedImage && finalPreviewUrl) {
-      generatePaletteFromImage(finalPreviewUrl)
-        .then(setAdaptivePalette)
-        .catch((_err) => {
-          const darkTheme = THEMES.find((t) => t.id === Theme.Dark);
-          setAdaptivePalette(darkTheme ? darkTheme.cssVariables : null);
-        });
-    } else if (!appSettings?.adaptiveEditorTheme || !selectedImage) {
-      setAdaptivePalette(null);
-    }
-  }, [appSettings?.adaptiveEditorTheme, selectedImage, finalPreviewUrl]);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    const currentThemeId = theme || DEFAULT_THEME_ID;
-
-    const baseTheme =
-      THEMES.find((t: ThemeProps) => t.id === currentThemeId) ||
-      THEMES.find((t: ThemeProps) => t.id === DEFAULT_THEME_ID);
-    if (!baseTheme) {
-      return;
-    }
-
-    let finalCssVariables: any = { ...baseTheme.cssVariables };
-    const effectThemeForWindow = baseTheme.id;
-
-    if (adaptivePalette) {
-      finalCssVariables = { ...finalCssVariables, ...adaptivePalette };
-    }
-
-    Object.entries(finalCssVariables).forEach(([key, value]) => {
-      root.style.setProperty(key, value as string);
-    });
-
-    const isLight = [Theme.Light, Theme.Snow, Theme.Arctic].includes(effectThemeForWindow);
-    invoke(Invokes.UpdateWindowEffect, { theme: isLight ? Theme.Light : Theme.Dark });
-  }, [theme, adaptivePalette]);
-
-  useEffect(() => {
-    if (isInitialThemeMount.current) {
-      isInitialThemeMount.current = false;
-      return;
-    }
-
-    setIsAnimatingTheme(true);
-    const timer = setTimeout(() => setIsAnimatingTheme(false), 500);
-
-    return () => clearTimeout(timer);
-  }, [theme]);
-
-  const refreshAllFolderTrees = useCallback(async () => {
-    if (rootPath) {
-      try {
-        const treeData = await invoke(Invokes.GetFolderTree, { path: rootPath });
-        setFolderTree(treeData);
-      } catch (err) {
-        console.error('Failed to refresh main folder tree:', err);
-        setError(`Failed to refresh folder tree: ${err}.`);
-      }
-    }
-
-    const currentPins = appSettings?.pinnedFolders || [];
-    if (currentPins.length > 0) {
-      try {
-        const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: currentPins });
-        setPinnedFolderTrees(trees);
-      } catch (err) {
-        console.error('Failed to refresh pinned folder trees:', err);
-      }
-    }
-  }, [rootPath, appSettings?.pinnedFolders]);
-
-  const pinnedFolders = useMemo(() => appSettings?.pinnedFolders || [], [appSettings]);
-
-  const handleTogglePinFolder = useCallback(
-    async (path: string) => {
-      if (!appSettings) return;
-      const currentPins = appSettings.pinnedFolders || [];
-      const isPinned = currentPins.includes(path);
-      const newPins = isPinned
-        ? currentPins.filter((p) => p !== path)
-        : [...currentPins, path].sort((a, b) => a.localeCompare(b));
-
-      if (!isPinned && path === currentFolderPath) {
-        handleActiveTreeSectionChange('pinned');
-      }
-
-      handleSettingsChange({ ...appSettings, pinnedFolders: newPins });
-
-      try {
-        const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: newPins });
-        setPinnedFolderTrees(trees);
-      } catch (err) {
-        console.error('Failed to refresh pinned folders:', err);
-      }
-    },
-    [appSettings, handleSettingsChange],
-  );
-
-  const handleActiveTreeSectionChange = (section: string | null) => {
-    setActiveTreeSection(section);
-    if (appSettings) {
-      handleSettingsChange({ ...appSettings, activeTreeSection: section });
-    }
-  };
-
-  const handleSelectSubfolder = useCallback(
-    async (path: string | null, isNewRoot = false, preloadedImages?: ImageFile[]) => {
-      await invoke('cancel_thumbnail_generation');
-      setIsViewLoading(true);
-      setSearchCriteria({ tags: [], text: '', mode: 'OR' });
-      setLibraryScrollTop(0);
-      setThumbnails({});
-      try {
-        setCurrentFolderPath(path);
-        setActiveView('library');
-
-        if (isNewRoot) {
-          setExpandedFolders(new Set([path]));
-        } else if (path) {
-          setExpandedFolders((prev) => {
-            const newSet = new Set(prev);
-            const allRoots = [rootPath, ...pinnedFolders].filter(Boolean) as string[];
-            const relevantRoot = allRoots.find((r) => path.startsWith(r));
-
-            if (relevantRoot) {
-              const separator = path.includes('/') ? '/' : '\\';
-              const parentSeparatorIndex = path.lastIndexOf(separator);
-
-              if (parentSeparatorIndex > -1 && path.length > relevantRoot.length) {
-                let current = path.substring(0, parentSeparatorIndex);
-                while (current && current.length >= relevantRoot.length) {
-                  newSet.add(current);
-                  const nextParentIndex = current.lastIndexOf(separator);
-                  if (nextParentIndex === -1 || current === relevantRoot) {
-                    break;
-                  }
-                  current = current.substring(0, nextParentIndex);
-                }
-              }
-              newSet.add(relevantRoot);
-            }
-            return newSet;
-          });
-        }
-
-        if (isNewRoot) {
-          if (path && !pinnedFolders.includes(path)) {
-            handleActiveTreeSectionChange('current');
-          }
-          setIsTreeLoading(true);
-          handleSettingsChange({ ...appSettings, lastRootPath: path } as AppSettings);
-          try {
-            const treeData = await invoke(Invokes.GetFolderTree, { path });
-            setFolderTree(treeData);
-          } catch (err) {
-            console.error('Failed to load folder tree:', err);
-            setError(`Failed to load folder tree: ${err}. Some sub-folders might be inaccessible.`);
-          } finally {
-            setIsTreeLoading(false);
-          }
-        }
-
-        setImageList([]);
-        setImageRatings({});
-        setMultiSelectedPaths([]);
-        setLibraryActivePath(null);
-        if (selectedImage) {
-          setSelectedImage(null);
-          setFinalPreviewUrl(null);
-          setUncroppedAdjustedPreviewUrl(null);
-          setHistogram(null);
-        }
-
-        const command =
-          libraryViewMode === LibraryViewMode.Recursive ? Invokes.ListImagesRecursive : Invokes.ListImagesInDir;
-
-        let files: ImageFile[];
-        if (preloadedImages) {
-          files = preloadedImages;
-        } else {
-          files = await invoke(command, { path });
-        }
-
-        const exifSortKeys = ['date_taken', 'iso', 'shutter_speed', 'aperture', 'focal_length'];
-        const isExifSortActive = exifSortKeys.includes(sortCriteria.key);
-        const shouldReadExif = appSettings?.enableExifReading ?? false;
-
-        if (shouldReadExif && files.length > 0) {
-          const paths = files.map((f: ImageFile) => f.path);
-
-          if (isExifSortActive) {
-            const exifDataMap: Record<string, any> = await invoke(Invokes.ReadExifForPaths, { paths });
-            const finalImageList = files.map((image) => ({
-              ...image,
-              exif: exifDataMap[image.path] || image.exif || null,
-            }));
-            setImageList(finalImageList);
-          } else {
-            setImageList(files);
-            invoke(Invokes.ReadExifForPaths, { paths })
-              .then((exifDataMap: any) => {
-                setImageList((currentImageList) =>
-                  currentImageList.map((image) => ({
-                    ...image,
-                    exif: exifDataMap[image.path] || image.exif || null,
-                  })),
-                );
-              })
-              .catch((err) => {
-                console.error('Failed to read EXIF data in background:', err);
-              });
-          }
-        } else {
-          setImageList(files);
-        }
-
-        invoke(Invokes.StartBackgroundIndexing, { folderPath: path }).catch((err) => {
-          console.error('Failed to start background indexing:', err);
-        });
-      } catch (err) {
-        console.error('Failed to load folder contents:', err);
-        setError('Failed to load images from the selected folder.');
-        setIsTreeLoading(false);
-      } finally {
-        setIsViewLoading(false);
-      }
-    },
-    [appSettings, handleSettingsChange, selectedImage, rootPath, sortCriteria.key, pinnedFolders, libraryViewMode],
-  );
-
-  const handleLibraryRefresh = useCallback(() => {
-    if (currentFolderPath) handleSelectSubfolder(currentFolderPath, false);
-  }, [currentFolderPath, handleSelectSubfolder]);
-
-  const refreshImageList = useCallback(async () => {
-    if (!currentFolderPath) return;
-    try {
-      const command =
-        libraryViewMode === LibraryViewMode.Recursive ? Invokes.ListImagesRecursive : Invokes.ListImagesInDir;
-
-      const files: ImageFile[] = await invoke(command, { path: currentFolderPath });
-      const exifSortKeys = ['date_taken', 'iso', 'shutter_speed', 'aperture', 'focal_length'];
-      const isExifSortActive = exifSortKeys.includes(sortCriteria.key);
-      const shouldReadExif = appSettings?.enableExifReading ?? false;
-
-      let freshExifData: Record<string, any> | null = null;
-
-      if (shouldReadExif && files.length > 0 && isExifSortActive) {
-        const paths = files.map((f: ImageFile) => f.path);
-        freshExifData = await invoke(Invokes.ReadExifForPaths, { paths });
-      }
-
-      setImageList((prevList) => {
-        const prevMap = new Map(prevList.map((img) => [img.path, img]));
-
-        return files.map((newFile) => {
-          if (freshExifData && freshExifData[newFile.path]) {
-            newFile.exif = freshExifData[newFile.path];
-            return newFile;
-          }
-          const existing = prevMap.get(newFile.path);
-          if (existing && existing.modified === newFile.modified) {
-            return existing;
-          }
-
-          return newFile;
-        });
-      });
-
-      if (shouldReadExif && files.length > 0 && !isExifSortActive) {
-        const paths = files.map((f: ImageFile) => f.path);
-        invoke(Invokes.ReadExifForPaths, { paths })
-          .then((exifDataMap: any) => {
-            setImageList((currentImageList) =>
-              currentImageList.map((image) => {
-                if (exifDataMap[image.path] && !image.exif) {
-                  return { ...image, exif: exifDataMap[image.path] };
-                }
-                return image;
-              }),
-            );
-          })
-          .catch((err) => {
-            console.error('Failed to read EXIF data in background:', err);
-          });
-      }
-    } catch (err) {
-      console.error('Failed to refresh image list:', err);
-      setError('Failed to refresh image list.');
-    }
-  }, [currentFolderPath, sortCriteria.key, appSettings?.enableExifReading, libraryViewMode]);
-
-  const handleToggleFolder = useCallback((path: string) => {
-    setExpandedFolders((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(path)) {
-        newSet.delete(path);
-      } else {
-        newSet.add(path);
-      }
-      return newSet;
-    });
-  }, []);
-
-  useEffect(() => {
-    if (isInitialMount.current || !appSettings || !rootPath) {
-      return;
-    }
-
-    const newFolderState = {
-      currentFolderPath,
-      expandedFolders: Array.from(expandedFolders),
-    };
-
-    if (JSON.stringify(appSettings.lastFolderState) === JSON.stringify(newFolderState)) {
-      return;
-    }
-
-    handleSettingsChange({ ...appSettings, lastFolderState: newFolderState });
-  }, [currentFolderPath, expandedFolders, rootPath, appSettings, handleSettingsChange]);
-
-  useEffect(() => {
-    const handleGlobalContextMenu = (event: any) => {
-      if (!DEBUG) event.preventDefault();
-    };
-    window.addEventListener('contextmenu', handleGlobalContextMenu);
-    return () => window.removeEventListener('contextmenu', handleGlobalContextMenu);
-  }, []);
-
-  const handleBackToLibrary = useCallback(() => {
-    const lastActivePath = selectedImage?.path ?? null;
-    setSelectedImage(null);
-    setFinalPreviewUrl(null);
-    setUncroppedAdjustedPreviewUrl(null);
-    setHistogram(null);
-    setWaveform(null);
-    setIsWaveformVisible(false);
-    setActiveMaskId(null);
-    setActiveMaskContainerId(null);
-    setActiveAiPatchContainerId(null);
-    setIsWbPickerActive(false);
-    setActiveAiSubMaskId(null);
-    setLibraryActivePath(lastActivePath);
-    setSlideDirection(1);
-    setLiveAdjustments(INITIAL_ADJUSTMENTS);
-    resetAdjustmentsHistory(INITIAL_ADJUSTMENTS);
-  }, [selectedImage?.path]);
-
-  const handleImageSelect = useCallback(
-    (path: string) => {
-      if (selectedImage?.path === path) {
-        return;
-      }
-      debouncedSave.cancel();
-      patchesSentToBackend.current.clear();
-
-      const knownRating = imageRatings[path] ?? 0;
-      const placeholderAdjustments = {
-        ...INITIAL_ADJUSTMENTS,
-        rating: knownRating,
-      };
-
-      setLiveAdjustments(placeholderAdjustments);
-      resetAdjustmentsHistory(placeholderAdjustments);
-
-      setSelectedImage({
-        exif: null,
-        height: 0,
-        isRaw: false,
-        isReady: false,
-        metadata: null,
-        originalUrl: null,
-        path,
-        thumbnailUrl: thumbnails[path],
-        width: 0,
-      });
-      setOriginalSize({ width: 0, height: 0 });
-      setPreviewSize({ width: 0, height: 0 });
-      setMultiSelectedPaths([path]);
-      setLibraryActivePath(null);
-      setIsViewLoading(true);
-      setError(null);
-      setHistogram(null);
-      setFinalPreviewUrl(null);
-      setUncroppedAdjustedPreviewUrl(null);
-      setTransformedOriginalUrl(null);
-      setShowOriginal(false);
-      setActiveMaskId(null);
-      setActiveMaskContainerId(null);
-      setActiveAiPatchContainerId(null);
-      setActiveAiSubMaskId(null);
-      setIsWbPickerActive(false);
-      setIsHighResNeeded(false);
-
-      if (transformWrapperRef.current) {
-        transformWrapperRef.current.resetTransform(0);
-      }
-
-      setZoom(1);
-      setIsLibraryExportPanelVisible(false);
-
-      fullResCacheKeyRef.current = null;
-      setFinalPreviewUrl((prev) => {
-        if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
-        return null;
-      });
-    },
-    [selectedImage?.path, applyAdjustments, debouncedSave, thumbnails, imageRatings, resetAdjustmentsHistory],
-  );
-
-  const executeDelete = useCallback(
-    async (pathsToDelete: Array<string>, options = { includeAssociated: false }) => {
-      if (!pathsToDelete || pathsToDelete.length === 0) {
-        return;
-      }
-
-      const activePath = selectedImage ? selectedImage.path : libraryActivePath;
-      let nextImagePath: string | null = null;
-
-      if (activePath) {
-        const physicalPath = activePath.split('?vc=')[0];
-        const isActiveImageDeleted = pathsToDelete.some((p) => p === activePath || p === physicalPath);
-
-        if (isActiveImageDeleted) {
-          const currentIndex = sortedImageList.findIndex((img) => img.path === activePath);
-          if (currentIndex !== -1) {
-            const nextCandidate = sortedImageList
-              .slice(currentIndex + 1)
-              .find((img) => !pathsToDelete.includes(img.path));
-
-            if (nextCandidate) {
-              nextImagePath = nextCandidate.path;
-            } else {
-              const prevCandidate = sortedImageList
-                .slice(0, currentIndex)
-                .reverse()
-                .find((img) => !pathsToDelete.includes(img.path));
-
-              if (prevCandidate) {
-                nextImagePath = prevCandidate.path;
-              }
-            }
-          }
-        } else {
-          nextImagePath = activePath;
-        }
-      }
-
-      try {
-        const command = options.includeAssociated ? 'delete_files_with_associated' : 'delete_files_from_disk';
-        await invoke(command, { paths: pathsToDelete });
-
-        await refreshImageList();
-
-        if (selectedImage) {
-          const physicalPath = selectedImage.path.split('?vc=')[0];
-          const isFileBeingEditedDeleted = pathsToDelete.some((p) => p === selectedImage.path || p === physicalPath);
-
-          if (isFileBeingEditedDeleted) {
-            if (nextImagePath) {
-              handleImageSelect(nextImagePath);
-            } else {
-              handleBackToLibrary();
-            }
-          }
-        } else {
-          if (nextImagePath) {
-            setMultiSelectedPaths([nextImagePath]);
-            setLibraryActivePath(nextImagePath);
-          } else {
-            setMultiSelectedPaths([]);
-            setLibraryActivePath(null);
-          }
-        }
-      } catch (err) {
-        console.error('Failed to delete files:', err);
-        setError(`Failed to delete files: ${err}`);
-      }
-    },
-    [refreshImageList, selectedImage, handleBackToLibrary, libraryActivePath, sortedImageList, handleImageSelect],
-  );
-
-  const handleDeleteSelected = useCallback(() => {
-    const pathsToDelete = multiSelectedPaths;
-    if (pathsToDelete.length === 0) {
-      return;
-    }
-
-    const isSingle = pathsToDelete.length === 1;
-
-    const selectionHasVirtualCopies =
-      isSingle &&
-      !pathsToDelete[0].includes('?vc=') &&
-      imageList.some((image) => image.path.startsWith(`${pathsToDelete[0]}?vc=`));
-
-    let modalTitle = 'Confirm Delete';
-    let modalMessage = '';
-    let confirmText = 'Delete';
-
-    if (selectionHasVirtualCopies) {
-      modalTitle = 'Delete Image and All Virtual Copies?';
-      modalMessage = `Are you sure you want to permanently delete this image and all of its virtual copies? This action cannot be undone.`;
-      confirmText = 'Delete All';
-    } else if (isSingle) {
-      modalMessage = `Are you sure you want to permanently delete this image? This action cannot be undone. Right-click for more options (e.g., deleting associated files).`;
-      confirmText = 'Delete Selected Only';
-    } else {
-      modalMessage = `Are you sure you want to permanently delete these ${pathsToDelete.length} images? This action cannot be undone. Right-click for more options (e.g., deleting associated files).`;
-      confirmText = 'Delete Selected Only';
-    }
-
-    setConfirmModalState({
-      confirmText,
-      confirmVariant: 'destructive',
-      isOpen: true,
-      message: modalMessage,
-      onConfirm: () => executeDelete(pathsToDelete, { includeAssociated: false }),
-      title: modalTitle,
-    });
-  }, [multiSelectedPaths, executeDelete, imageList]);
-
-  const handleToggleFullScreen = useCallback(() => {
-    if (isFullScreen) {
-      setIsFullScreen(false);
-    } else {
-      if (!selectedImage) {
-        return;
-      }
-      setIsFullScreen(true);
-    }
-  }, [isFullScreen, selectedImage]);
-
-  const handleCopyAdjustments = useCallback(() => {
-    const sourceAdjustments = selectedImage ? adjustments : libraryActiveAdjustments;
-    const adjustmentsToCopy: any = {};
-    for (const key of COPYABLE_ADJUSTMENT_KEYS) {
-      if (Object.prototype.hasOwnProperty.call(sourceAdjustments, key)) {
-        adjustmentsToCopy[key] = sourceAdjustments[key];
-      }
-    }
-    setCopiedAdjustments(adjustmentsToCopy);
-    setIsCopied(true);
-  }, [selectedImage, adjustments, libraryActiveAdjustments]);
-
-  const handlePasteAdjustments = useCallback(
-    (paths?: Array<string>) => {
-      if (!copiedAdjustments || !appSettings) {
-        return;
-      }
-
-      const { mode, includedAdjustments } = appSettings.copyPasteSettings;
-
-      const adjustmentsToApply: Partial<Adjustments> = {};
-
-      for (const key of includedAdjustments) {
-        if (Object.prototype.hasOwnProperty.call(copiedAdjustments, key)) {
-          const value = copiedAdjustments[key as keyof Adjustments];
-
-          if (mode === PasteMode.Merge) {
-            const defaultValue = INITIAL_ADJUSTMENTS[key as keyof Adjustments];
-            if (JSON.stringify(value) !== JSON.stringify(defaultValue)) {
-              adjustmentsToApply[key as keyof Adjustments] = value;
-            }
-          } else {
-            adjustmentsToApply[key as keyof Adjustments] = value;
-          }
-        }
-      }
-
-      if (Object.keys(adjustmentsToApply).length === 0) {
-        setIsPasted(true);
-        return;
-      }
-
-      const pathsToUpdate =
-        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
-      if (pathsToUpdate.length === 0) {
-        return;
-      }
-
-      if (selectedImage && pathsToUpdate.includes(selectedImage.path)) {
-        const newAdjustments = { ...adjustments, ...adjustmentsToApply };
-        setAdjustments(newAdjustments);
-      }
-
-      invoke(Invokes.ApplyAdjustmentsToPaths, { paths: pathsToUpdate, adjustments: adjustmentsToApply }).catch(
-        (err) => {
-          console.error('Failed to paste adjustments to multiple images:', err);
-          setError(`Failed to paste adjustments: ${err}`);
-        },
-      );
-      setIsPasted(true);
-    },
-    [copiedAdjustments, appSettings, multiSelectedPaths, selectedImage, adjustments, setAdjustments],
-  );
-
-  const handleAutoAdjustments = async () => {
-    if (!selectedImage) {
-      return;
-    }
-    try {
-      const autoAdjustments: Adjustments = await invoke(Invokes.CalculateAutoAdjustments);
-      setAdjustments((prev: Adjustments) => {
-        const newAdjustments = { ...prev, ...autoAdjustments };
-        newAdjustments.sectionVisibility = {
-          ...prev.sectionVisibility,
-          ...autoAdjustments.sectionVisibility,
-        };
-
-        return newAdjustments;
-      });
-    } catch (err) {
-      console.error('Failed to calculate auto adjustments:', err);
-      setError(`Failed to apply auto adjustments: ${err}`);
-    }
-  };
-
-  const handleRate = useCallback(
-    (newRating: number, paths?: Array<string>) => {
-      const pathsToRate =
-        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
-      if (pathsToRate.length === 0) {
-        return;
-      }
-
-      let currentRating = 0;
-      if (selectedImage && pathsToRate.includes(selectedImage.path)) {
-        currentRating = adjustments.rating;
-      } else if (libraryActivePath && pathsToRate.includes(libraryActivePath)) {
-        currentRating = libraryActiveAdjustments.rating;
-      }
-
-      const finalRating = newRating === currentRating ? 0 : newRating;
-
-      setImageRatings((prev: Record<string, number>) => {
-        const newRatings = { ...prev };
-        pathsToRate.forEach((path: string) => {
-          newRatings[path] = finalRating;
-        });
-        return newRatings;
-      });
-
-      if (selectedImage && pathsToRate.includes(selectedImage.path)) {
-        setAdjustments((prev: Adjustments) => ({ ...prev, rating: finalRating }));
-      }
-
-      if (libraryActivePath && pathsToRate.includes(libraryActivePath)) {
-        setLibraryActiveAdjustments((prev) => ({ ...prev, rating: finalRating }));
-      }
-
-      invoke(Invokes.ApplyAdjustmentsToPaths, { paths: pathsToRate, adjustments: { rating: finalRating } }).catch(
-        (err) => {
-          console.error('Failed to apply rating to paths:', err);
-          setError(`Failed to apply rating: ${err}`);
-        },
-      );
-    },
-    [
-      multiSelectedPaths,
-      selectedImage,
-      libraryActivePath,
-      adjustments.rating,
-      libraryActiveAdjustments.rating,
-      setAdjustments,
-    ],
-  );
-
-  const handleSetColorLabel = useCallback(
-    async (color: string | null, paths?: Array<string>) => {
-      const pathsToUpdate =
-        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
-      if (pathsToUpdate.length === 0) {
-        return;
-      }
-      const primaryPath = selectedImage?.path || libraryActivePath;
-      const primaryImage = imageList.find((img: ImageFile) => img.path === primaryPath);
-      let currentColor = null;
-      if (primaryImage && primaryImage.tags) {
-        const colorTag = primaryImage.tags.find((tag: string) => tag.startsWith('color:'));
-        if (colorTag) {
-          currentColor = colorTag.substring(6);
-        }
-      }
-      const finalColor = color !== null && color === currentColor ? null : color;
-      try {
-        await invoke(Invokes.SetColorLabelForPaths, { paths: pathsToUpdate, color: finalColor });
-
-        setImageList((prevList: Array<ImageFile>) =>
-          prevList.map((image: ImageFile) => {
-            if (pathsToUpdate.includes(image.path)) {
-              const otherTags = (image.tags || []).filter((tag: string) => !tag.startsWith('color:'));
-              const newTags = finalColor ? [...otherTags, `color:${finalColor}`] : otherTags;
-              return { ...image, tags: newTags };
-            }
-            return image;
-          }),
-        );
-      } catch (err) {
-        console.error('Failed to set color label:', err);
-        setError(`Failed to set color label: ${err}`);
-      }
-    },
-    [multiSelectedPaths, selectedImage, libraryActivePath, imageList],
-  );
-
-  const getCommonTags = useCallback(
-    (paths: string[]): { tag: string; isUser: boolean }[] => {
-      if (paths.length === 0) return [];
-      const imageFiles = imageList.filter((img) => paths.includes(img.path));
-      if (imageFiles.length === 0) return [];
-
-      const allTagsSets = imageFiles.map((img) => {
-        const tagsWithPrefix = (img.tags || []).filter((t) => !t.startsWith('color:'));
-        return new Set(tagsWithPrefix);
-      });
-
-      if (allTagsSets.length === 0) return [];
-
-      const commonTagsWithPrefix = allTagsSets.reduce((intersection, currentSet) => {
-        return new Set([...intersection].filter((tag) => currentSet.has(tag)));
-      });
-
-      return Array.from(commonTagsWithPrefix)
-        .map((tag) => ({
-          tag: tag.startsWith('user:') ? tag.substring(5) : tag,
-          isUser: tag.startsWith('user:'),
-        }))
-        .sort((a, b) => a.tag.localeCompare(b.tag));
-    },
-    [imageList],
-  );
-
-  const handleTagsChanged = useCallback(
-    (changedPaths: string[], newTags: { tag: string; isUser: boolean }[]) => {
-      setImageList((prevList) =>
-        prevList.map((image) => {
-          if (changedPaths.includes(image.path)) {
-            const colorTags = (image.tags || []).filter((t) => t.startsWith('color:'));
-            const prefixedNewTags = newTags.map((t) => (t.isUser ? `user:${t.tag}` : t.tag));
-            const finalTags = [...colorTags, ...prefixedNewTags].sort();
-            return { ...image, tags: finalTags.length > 0 ? finalTags : null };
-          }
-          return image;
-        }),
-      );
-    },
-    [setImageList],
-  );
-
-  const closeConfirmModal = () => setConfirmModalState({ ...confirmModalState, isOpen: false });
-
-  const handlePasteFiles = useCallback(
-    async (mode = 'copy') => {
-      if (copiedFilePaths.length === 0 || !currentFolderPath) {
-        return;
-      }
-      try {
-        if (mode === 'copy')
-          await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
-        else {
-          await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
-          setCopiedFilePaths([]);
-        }
-        await refreshImageList();
-      } catch (err) {
-        setError(`Failed to ${mode} files: ${err}`);
-      }
-    },
-    [copiedFilePaths, currentFolderPath, refreshImageList],
-  );
-
-  const requestFullResolution = useCallback(
-    debounce((currentAdjustments: any, key: string) => {
-      if (!selectedImage?.path) return;
-
-      const jobId = ++previewJobIdRef.current;
-
-      invoke<ArrayBuffer>(Invokes.GenerateFullscreenPreview, {
-        jsAdjustments: currentAdjustments,
-      })
-        .then((buffer) => {
-          if (jobId >= latestRenderedJobIdRef.current) {
-            latestRenderedJobIdRef.current = jobId;
-            const blob = new Blob([buffer], { type: 'image/jpeg' });
-            const url = URL.createObjectURL(blob);
-
-            setFinalPreviewUrl((prevUrl) => {
-              if (prevUrl && prevUrl.startsWith('blob:')) URL.revokeObjectURL(prevUrl);
-              return url;
-            });
-
-            fullResCacheKeyRef.current = key;
-            setIsLoadingFullRes(false);
-          }
-        })
-        .catch((error: any) => {
-          if (jobId >= latestRenderedJobIdRef.current) {
-            console.error('Failed to generate high resolution preview:', error);
-            fullResCacheKeyRef.current = null;
-            setIsLoadingFullRes(false);
-          }
-        });
-    }, 100),
-    [selectedImage?.path],
-  );
-
-  useEffect(() => {
-    if ((isFullScreen || isHighResNeeded) && selectedImage?.isReady) {
-      if (fullResCacheKeyRef.current !== visualAdjustmentsKey) {
-        setIsLoadingFullRes(true);
-        requestFullResolution(adjustments, visualAdjustmentsKey);
-      }
-    } else if (!isFullScreen && !isHighResNeeded) {
-      if (requestFullResolution.cancel) {
-        requestFullResolution.cancel();
-      }
-      setIsLoadingFullRes(false);
-    }
-  }, [adjustments, isFullScreen, isHighResNeeded, selectedImage?.isReady, requestFullResolution, visualAdjustmentsKey]);
-
-  const handleFullResolutionLogic = useCallback(
-    (targetZoomPercent: number) => {
-      if (appSettings?.enableZoomHifi === false) {
-        return;
-      }
-
-      if (!initialFitScale) {
-        return;
-      }
-      const highResThreshold = Math.max(initialFitScale * 2, 0.5);
-      const needsFullRes = targetZoomPercent > highResThreshold;
-      const previewIsAlreadyFullRes = previewSize.width >= originalSize.width;
-
-      if (needsFullRes && !previewIsAlreadyFullRes) {
-        setIsHighResNeeded(true);
-      } else {
-        setIsHighResNeeded(false);
-      }
-    },
-    [initialFitScale, previewSize.width, originalSize.width, appSettings],
-  );
-
-  const handleZoomChange = useCallback(
-    (zoomValue: number, fitToWindow: boolean = false) => {
-      let targetZoomPercent: number;
-      const orientationSteps = adjustments.orientationSteps || 0;
-      const isSwapped = orientationSteps === 1 || orientationSteps === 3;
-      const effectiveOriginalWidth = isSwapped ? originalSize.height : originalSize.width;
-      const effectiveOriginalHeight = isSwapped ? originalSize.width : originalSize.height;
-      if (fitToWindow) {
-        if (
-          effectiveOriginalWidth > 0 &&
-          effectiveOriginalHeight > 0 &&
-          baseRenderSize.width > 0 &&
-          baseRenderSize.height > 0
-        ) {
-          const originalAspect = effectiveOriginalWidth / effectiveOriginalHeight;
-          const baseAspect = baseRenderSize.width / baseRenderSize.height;
-          if (originalAspect > baseAspect) {
-            targetZoomPercent = baseRenderSize.width / effectiveOriginalWidth;
-          } else {
-            targetZoomPercent = baseRenderSize.height / effectiveOriginalHeight;
-          }
-        } else {
-          targetZoomPercent = 1.0;
-        }
-      } else {
-        targetZoomPercent = zoomValue;
-      }
-      targetZoomPercent = Math.max(0.1, Math.min(2.0, targetZoomPercent));
-      let transformZoom = 1.0;
-      if (
-        effectiveOriginalWidth > 0 &&
-        effectiveOriginalHeight > 0 &&
-        baseRenderSize.width > 0 &&
-        baseRenderSize.height > 0
-      ) {
-        const originalAspect = effectiveOriginalWidth / effectiveOriginalHeight;
-        const baseAspect = baseRenderSize.width / baseRenderSize.height;
-        if (originalAspect > baseAspect) {
-          transformZoom = (targetZoomPercent * effectiveOriginalWidth) / baseRenderSize.width;
-        } else {
-          transformZoom = (targetZoomPercent * effectiveOriginalHeight) / baseRenderSize.height;
-        }
-      }
-      isProgrammaticZoom.current = true;
-      setZoom(transformZoom);
-      handleFullResolutionLogic(targetZoomPercent);
-    },
-    [originalSize, baseRenderSize, handleFullResolutionLogic, adjustments.orientationSteps],
-  );
-
-  const handleUserTransform = useCallback(
-    (transformState: TransformState) => {
-      if (isProgrammaticZoom.current) {
-        isProgrammaticZoom.current = false;
-        return;
-      }
-
-      setZoom(transformState.scale);
-
-      if (originalSize.width > 0 && baseRenderSize.width > 0) {
-        const orientationSteps = adjustments.orientationSteps || 0;
-        const isSwapped = orientationSteps === 1 || orientationSteps === 3;
-        const effectiveOriginalWidth = isSwapped ? originalSize.height : originalSize.width;
-
-        const targetZoomPercent = (baseRenderSize.width * transformState.scale) / effectiveOriginalWidth;
-        handleFullResolutionLogic(targetZoomPercent);
-      }
-    },
-    [originalSize, baseRenderSize, handleFullResolutionLogic, adjustments.orientationSteps],
-  );
-
-  const isAnyModalOpen =
-    isCreateFolderModalOpen ||
-    isRenameFolderModalOpen ||
-    isRenameFileModalOpen ||
-    isImportModalOpen ||
-    isCopyPasteSettingsModalOpen ||
-    confirmModalState.isOpen ||
-    panoramaModalState.isOpen ||
-    cullingModalState.isOpen ||
-    collageModalState.isOpen ||
-    denoiseModalState.isOpen ||
-    negativeModalState.isOpen;
-
-  useKeyboardShortcuts({
-    isModalOpen: isAnyModalOpen,
-    activeAiPatchContainerId,
-    activeAiSubMaskId,
-    activeMaskContainerId,
-    activeMaskId,
-    activeRightPanel,
-    canRedo,
-    canUndo,
-    copiedFilePaths,
-    customEscapeHandler,
-    handleBackToLibrary,
-    handleCopyAdjustments,
-    handleDeleteAiPatch,
-    handleDeleteMaskContainer,
-    handleDeleteSelected,
-    handleImageSelect,
-    handlePasteAdjustments,
-    handlePasteFiles,
-    handleRate,
-    handleRightPanelSelect,
-    handleSetColorLabel,
-    handleToggleFullScreen,
-    handleZoomChange,
-    isFullScreen,
-    isStraightenActive,
-    isViewLoading,
-    libraryActivePath,
-    multiSelectedPaths,
-    redo,
-    selectedImage,
-    setActiveAiSubMaskId,
-    setActiveMaskContainerId,
-    setActiveMaskId,
-    setCopiedFilePaths,
-    setIsStraightenActive,
-    setIsWaveformVisible,
-    setLibraryActivePath,
-    setMultiSelectedPaths,
-    setShowOriginal,
-    sortedImageList,
-    undo,
-    zoom,
-    displaySize,
-    baseRenderSize,
-    originalSize,
-  });
-
-  useEffect(() => {
-    let isEffectActive = true;
-    const listeners = [
-      listen('preview-update-uncropped', (event: any) => {
-        if (isEffectActive) {
-          setUncroppedAdjustedPreviewUrl(event.payload);
-        }
-      }),
-      listen('histogram-update', (event: any) => {
-        if (isEffectActive) {
-          setHistogram(event.payload);
-        }
-      }),
-      listen('open-with-file', (event: any) => {
-        if (isEffectActive) {
-          setInitialFileToOpen(event.payload as string);
-        }
-      }),
-      listen('waveform-update', (event: any) => {
-        if (isEffectActive) {
-          setWaveform(event.payload);
-        }
-      }),
-      listen('thumbnail-generated', (event: any) => {
-        if (isEffectActive) {
-          const { path, data, rating } = event.payload;
-          if (data) {
-            setThumbnails((prev) => ({ ...prev, [path]: data }));
-          }
-          if (rating !== undefined) {
-            setImageRatings((prev) => ({ ...prev, [path]: rating }));
-          }
-        }
-      }),
-      listen('ai-model-download-start', (event: any) => {
-        if (isEffectActive) {
-          setAiModelDownloadStatus(event.payload);
-        }
-      }),
-      listen('ai-model-download-finish', () => {
-        if (isEffectActive) {
-          setAiModelDownloadStatus(null);
-        }
-      }),
-      listen('indexing-started', () => {
-        if (isEffectActive) {
-          setIsIndexing(true);
-          setIndexingProgress({ current: 0, total: 0 });
-        }
-      }),
-      listen('indexing-progress', (event: any) => {
-        if (isEffectActive) {
-          setIndexingProgress(event.payload);
-        }
-      }),
-      listen('indexing-finished', () => {
-        if (isEffectActive) {
-          setIsIndexing(false);
-          setIndexingProgress({ current: 0, total: 0 });
-          if (currentFolderPathRef.current) {
-            const refreshImageList = async () => {
-              try {
-                const list: ImageFile[] = await invoke(Invokes.ListImagesInDir, { path: currentFolderPathRef.current });
-                if (Array.isArray(list)) {
-                  setImageList(list);
-                }
-              } catch (err) {
-                console.error('Failed to refresh after indexing:', err);
-              }
-            };
-            refreshImageList();
-          }
-        }
-      }),
-      listen('batch-export-progress', (event: any) => {
-        if (isEffectActive) {
-          setExportState((prev: ExportState) => ({ ...prev, progress: event.payload }));
-        }
-      }),
-      listen('export-complete', () => {
-        if (isEffectActive) {
-          setExportState((prev: ExportState) => ({ ...prev, status: Status.Success }));
-        }
-      }),
-      listen('export-error', (event) => {
-        if (isEffectActive) {
-          setExportState((prev: ExportState) => ({
-            ...prev,
-            status: Status.Error,
-            errorMessage: typeof event.payload === 'string' ? event.payload : 'An unknown export error occurred.',
-          }));
-        }
-      }),
-      listen('export-cancelled', () => {
-        if (isEffectActive) {
-          setExportState((prev: ExportState) => ({ ...prev, status: Status.Cancelled }));
-        }
-      }),
-      listen('import-start', (event: any) => {
-        if (isEffectActive) {
-          setImportState({
-            errorMessage: '',
-            path: '',
-            progress: { current: 0, total: event.payload.total },
-            status: Status.Importing,
-          });
-        }
-      }),
-      listen('import-progress', (event: any) => {
-        if (isEffectActive) {
-          setImportState((prev: ImportState) => ({
-            ...prev,
-            path: event.payload.path,
-            progress: { current: event.payload.current, total: event.payload.total },
-          }));
-        }
-      }),
-      listen('import-complete', () => {
-        if (isEffectActive) {
-          setImportState((prev: ImportState) => ({ ...prev, status: Status.Success }));
-          refreshAllFolderTrees();
-          if (currentFolderPathRef.current) {
-            handleSelectSubfolder(currentFolderPathRef.current, false);
-          }
-        }
-      }),
-      listen('import-error', (event) => {
-        if (isEffectActive) {
-          setImportState((prev: ImportState) => ({
-            ...prev,
-            errorMessage: typeof event.payload === 'string' ? event.payload : 'An unknown import error occurred.',
-            status: Status.Error,
-          }));
-        }
-      }),
-      listen('denoise-progress', (event: any) => {
-        if (isEffectActive) {
-          setDenoiseModalState((prev) => ({ ...prev, progressMessage: event.payload as string }));
-        }
-      }),
-      listen('denoise-complete', (event: any) => {
-        if (isEffectActive) {
-          const payload = event.payload;
-          const isObject = typeof payload === 'object' && payload !== null;
-
-          setDenoiseModalState((prev) => ({
-            ...prev,
-            isProcessing: false,
-            previewBase64: isObject ? payload.denoised : payload,
-            originalBase64: isObject ? payload.original : null,
-            progressMessage: null,
-          }));
-        }
-      }),
-      listen('denoise-error', (event: any) => {
-        if (isEffectActive) {
-          setDenoiseModalState((prev) => ({
-            ...prev,
-            isProcessing: false,
-            error: String(event.payload),
-            progressMessage: null,
-          }));
-        }
-      }),
-    ];
-    return () => {
-      isEffectActive = false;
-      listeners.forEach((p) => p.then((unlisten) => unlisten()));
-    };
-  }, [refreshAllFolderTrees, handleSelectSubfolder]);
-
-  useEffect(() => {
-    if ([Status.Success, Status.Error, Status.Cancelled].includes(exportState.status)) {
-      const timeoutDuration = exportState.status === Status.Success ? 5000 : 3000;
-
-      const timer = setTimeout(() => {
-        setExportState({ status: Status.Idle, progress: { current: 0, total: 0 }, errorMessage: '' });
-      }, timeoutDuration);
-      return () => clearTimeout(timer);
-    }
-  }, [exportState.status]);
-
-  useEffect(() => {
-    if ([Status.Success, Status.Error].includes(importState.status)) {
-      const timer = setTimeout(() => {
-        setImportState({ status: Status.Idle, progress: { current: 0, total: 0 }, path: '', errorMessage: '' });
-      }, IMPORT_TIMEOUT);
-
-      return () => clearTimeout(timer);
-    }
-  }, [importState.status]);
-
-  useEffect(() => {
-    if (libraryActivePath) {
-      invoke(Invokes.LoadMetadata, { path: libraryActivePath })
-        .then((metadata: any) => {
-          if (metadata.adjustments && !metadata.adjustments.is_null) {
-            const normalized: Adjustments = normalizeLoadedAdjustments(metadata.adjustments);
-            setLibraryActiveAdjustments(normalized);
-          } else {
-            setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
-          }
-        })
-        .catch((err) => {
-          console.error('Failed to load metadata for library active image', err);
-          setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
-        });
-    } else {
-      setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
-    }
-  }, [libraryActivePath]);
-
-  useEffect(() => {
-    let isEffectActive = true;
-
-    const unlistenProgress = listen('panorama-progress', (event: any) => {
-      if (isEffectActive) {
-        setPanoramaModalState((prev: PanoramaModalState) => ({
-          ...prev,
-          error: null,
-          finalImageBase64: null,
-          isOpen: true,
-          progressMessage: event.payload,
-        }));
-      }
-    });
-
-    const unlistenComplete = listen('panorama-complete', (event: any) => {
-      if (isEffectActive) {
-        const { base64 } = event.payload;
-        setPanoramaModalState((prev: PanoramaModalState) => ({
-          ...prev,
-          error: null,
-          finalImageBase64: base64,
-          progressMessage: 'Panorama Ready',
-        }));
-      }
-    });
-
-    const unlistenError = listen('panorama-error', (event: any) => {
-      if (isEffectActive) {
-        setPanoramaModalState((prev: PanoramaModalState) => ({
-          ...prev,
-          error: String(event.payload),
-          finalImageBase64: null,
-          progressMessage: 'An error occurred.',
-        }));
-      }
-    });
-
-    return () => {
-      isEffectActive = false;
-      unlistenProgress.then((f: any) => f());
-      unlistenComplete.then((f: any) => f());
-      unlistenError.then((f: any) => f());
-    };
-  }, []);
-
-  useEffect(() => {
-    let isEffectActive = true;
-
-    const unlistenProgress = listen('hdr-progress', (event: any) => {
-      if (isEffectActive) {
-        setHdrModalState((prev: HdrModalState) => ({
-          ...prev,
-          error: null,
-          finalImageBase64: null,
-          isOpen: true,
-          progressMessage: event.payload,
-        }));
-      }
-    });
-
-    const unlistenComplete = listen('hdr-complete', (event: any) => {
-      if (isEffectActive) {
-        const { base64 } = event.payload;
-        setHdrModalState((prev: HdrModalState) => ({
-          ...prev,
-          error: null,
-          finalImageBase64: base64,
-          progressMessage: 'Hdr Ready',
-        }));
-      }
-    });
-
-    const unlistenError = listen('hdr-error', (event: any) => {
-      if (isEffectActive) {
-        setHdrModalState((prev: HdrModalState) => ({
-          ...prev,
-          error: String(event.payload),
-          finalImageBase64: null,
-          progressMessage: 'An error occurred.',
-        }));
-      }
-    });
-
-    return () => {
-      isEffectActive = false;
-      unlistenProgress.then((f: any) => f());
-      unlistenComplete.then((f: any) => f());
-      unlistenError.then((f: any) => f());
-    };
-  }, []);
-
-  useEffect(() => {
-    let isEffectActive = true;
-
-    const unlistenStart = listen('culling-start', (event: any) => {
-      if (isEffectActive) {
-        setCullingModalState({
-          isOpen: true,
-          progress: { current: 0, total: event.payload, stage: 'Initializing...' },
-          suggestions: null,
-          error: null,
-        });
-      }
-    });
-
-    const unlistenProgress = listen('culling-progress', (event: any) => {
-      if (isEffectActive) {
-        setCullingModalState((prev) => ({ ...prev, progress: event.payload }));
-      }
-    });
-
-    const unlistenComplete = listen('culling-complete', (event: any) => {
-      if (isEffectActive) {
-        setCullingModalState((prev) => ({ ...prev, progress: null, suggestions: event.payload }));
-      }
-    });
-
-    const unlistenError = listen('culling-error', (event: any) => {
-      if (isEffectActive) {
-        setCullingModalState((prev) => ({ ...prev, progress: null, error: String(event.payload) }));
-      }
-    });
-
-    return () => {
-      isEffectActive = false;
-      unlistenStart.then((f) => f());
-      unlistenProgress.then((f) => f());
-      unlistenComplete.then((f) => f());
-      unlistenError.then((f) => f());
-    };
-  }, []);
-
-  const handleSavePanorama = async (): Promise<string> => {
-    if (panoramaModalState.stitchingSourcePaths.length === 0) {
-      const err = 'Source paths for panorama not found.';
-      setPanoramaModalState((prev: PanoramaModalState) => ({ ...prev, error: err }));
-      throw new Error(err);
-    }
-
-    try {
-      const savedPath: string = await invoke(Invokes.SavePanorama, {
-        firstPathStr: panoramaModalState.stitchingSourcePaths[0],
-      });
-      await refreshImageList();
-      return savedPath;
-    } catch (err) {
-      console.error('Failed to save panorama:', err);
-      setPanoramaModalState((prev: PanoramaModalState) => ({ ...prev, error: String(err) }));
-      throw err;
-    }
-  };
-
-  const handleSaveHdr = async (): Promise<string> => {
-    if (hdrModalState.stitchingSourcePaths.length === 0) {
-      const err = 'Source paths for HDR not found.';
-      setHdrModalState((prev: HdrModalState) => ({ ...prev, error: err }));
-      throw new Error(err);
-    }
-
-    try {
-      const savedPath: string = await invoke(Invokes.SaveHdr, {
-        firstPathStr: hdrModalState.stitchingSourcePaths[0],
-      });
-      await refreshImageList();
-      return savedPath;
-    } catch (err) {
-      console.error('Failed to save HDR image:', err);
-      setHdrModalState((prev: HdrModalState) => ({ ...prev, error: String(err) }));
-      throw err;
-    }
-  };
-
-  const handleApplyDenoise = useCallback(
-    async (intensity: number) => {
-      if (!denoiseModalState.targetPath) return;
-
-      setDenoiseModalState((prev) => ({
-        ...prev,
-        isProcessing: true,
-        error: null,
-        progressMessage: 'Starting engine...',
-      }));
-
-      try {
-        await invoke(Invokes.ApplyDenoising, {
-          path: denoiseModalState.targetPath,
-          intensity: intensity,
-        });
-      } catch (err) {
-        setDenoiseModalState((prev) => ({
-          ...prev,
-          isProcessing: false,
-          error: String(err),
-        }));
-      }
-    },
-    [denoiseModalState.targetPath],
-  );
-
-  const handleSaveDenoisedImage = async (): Promise<string> => {
-    if (!denoiseModalState.targetPath) throw new Error('No target path');
-    const savedPath = await invoke<string>(Invokes.SaveDenoisedImage, {
-      originalPathStr: denoiseModalState.targetPath,
-    });
-    await refreshImageList();
-    return savedPath;
-  };
-
-  const handleSaveCollage = async (base64Data: string, firstPath: string): Promise<string> => {
-    try {
-      const savedPath: string = await invoke(Invokes.SaveCollage, {
-        base64Data,
-        firstPathStr: firstPath,
-      });
-      await refreshImageList();
-      return savedPath;
-    } catch (err) {
-      console.error('Failed to save collage:', err);
-      setError(`Failed to save collage: ${err}`);
-      throw err;
-    }
-  };
-
-  useEffect(() => {
-    if (!selectedImage?.isReady) return;
-
-    if (dragIdleTimer.current) {
-      clearTimeout(dragIdleTimer.current);
-    }
-
-    if (isSliderDragging) {
-      if (appSettings?.enableLivePreviews !== false) {
-        applyAdjustments(adjustments, true);
-      }
-
-      dragIdleTimer.current = setTimeout(() => {
-        applyAdjustments(adjustments, false);
-      }, 150);
-    } else {
-      applyAdjustments(adjustments, false);
-      debouncedSave(selectedImage.path, adjustments);
-    }
-
-    return () => {
-      if (dragIdleTimer.current) clearTimeout(dragIdleTimer.current);
-    };
-  }, [
-    adjustments,
-    selectedImage?.path,
-    selectedImage?.isReady,
-    isSliderDragging,
-    applyAdjustments,
-    debouncedSave,
-    appSettings?.enableLivePreviews,
-  ]);
-
-  const handleOpenFolder = async () => {
-    try {
-      const selected = await open({ directory: true, multiple: false, defaultPath: await homeDir() });
-      if (typeof selected === 'string') {
-        setRootPath(selected);
-        await handleSelectSubfolder(selected, true);
-      }
-    } catch (err) {
-      console.error('Failed to open directory dialog:', err);
-      setError('Failed to open folder selection dialog.');
-    }
-  };
-
-  useEffect(() => {
-    if (!rootPath) {
-      setIsLayoutReady(false);
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      setIsLayoutReady(true);
-    }, 100);
-
-    return () => clearTimeout(timer);
-  }, [rootPath]);
-
-  const handleContinueSession = () => {
-    const restore = async () => {
-      if (!appSettings?.lastRootPath) {
-        return;
-      }
-
-      const root = appSettings.lastRootPath;
-      const folderState = appSettings.lastFolderState;
-      const pathToSelect = folderState?.currentFolderPath || root;
-
-      setRootPath(root);
-
-      if (folderState?.expandedFolders) {
-        const newExpandedFolders = new Set(folderState.expandedFolders);
-        newExpandedFolders.add(root);
-        setExpandedFolders(newExpandedFolders);
-      } else {
-        setExpandedFolders(new Set([root]));
-      }
-
-      setIsTreeLoading(true);
-      try {
-        let treeData;
-        if (preloadedDataRef.current.rootPath === root && preloadedDataRef.current.tree) {
-          treeData = await preloadedDataRef.current.tree;
-          console.log('Preload cache hit for folder tree.');
-        } else {
-          treeData = await invoke(Invokes.GetFolderTree, { path: root });
-        }
-        setFolderTree(treeData);
-      } catch (err) {
-        console.error('Failed to restore folder tree:', err);
-      } finally {
-        setIsTreeLoading(false);
-      }
-
-      let preloadedImages: ImageFile[] | undefined = undefined;
-      if (preloadedDataRef.current.currentPath === pathToSelect && preloadedDataRef.current.images) {
-        try {
-          preloadedImages = await preloadedDataRef.current.images;
-          console.log('Preload cache hit for image list.');
-        } catch (e) {
-          console.error('Failed to retrieve preloaded images', e);
-        }
-      }
-
-      await handleSelectSubfolder(pathToSelect, false, preloadedImages);
-    };
-    restore().catch((err) => {
-      console.error('Failed to restore session, folder might be missing:', err);
-      setError('Failed to restore session. The last used folder may have been moved or deleted.');
-      if (appSettings) {
-        handleSettingsChange({ ...appSettings, lastRootPath: null, lastFolderState: null });
-      }
-      handleGoHome();
-      setIsTreeLoading(false);
-    });
-  };
-
-  useEffect(() => {
-    if (!initialFileToOpen || !appSettings) {
-      return;
-    }
-    const parentDir = getParentDir(initialFileToOpen);
-    if (currentFolderPath !== parentDir) {
-      setRootPath(parentDir);
-      handleSelectSubfolder(parentDir, true);
-      return;
-    }
-    const isImageInList = imageList.some((image) => image.path === initialFileToOpen);
-    if (isImageInList) {
-      handleImageSelect(initialFileToOpen);
-      setInitialFileToOpen(null);
-    } else if (!isViewLoading) {
-      console.warn(`'open-with-file' target ${initialFileToOpen} not found in its directory after loading. Aborting.`);
-      setInitialFileToOpen(null);
-    }
-  }, [
-    initialFileToOpen,
-    appSettings,
-    currentFolderPath,
-    imageList,
-    isViewLoading,
-    handleSelectSubfolder,
-    handleImageSelect,
-  ]);
-
-  const handleGoHome = () => {
-    setRootPath(null);
-    setCurrentFolderPath(null);
-    setImageList([]);
-    setImageRatings({});
-    setFolderTree(null);
-    setMultiSelectedPaths([]);
-    setLibraryActivePath(null);
-    setIsLibraryExportPanelVisible(false);
-    setExpandedFolders(new Set());
-  };
-
-  const handleMultiSelectClick = (path: string, event: any, options: MultiSelectOptions) => {
-    const { ctrlKey, metaKey, shiftKey } = event;
-    const isCtrlPressed = ctrlKey || metaKey;
-    const { shiftAnchor, onSimpleClick, updateLibraryActivePath } = options;
-
-    if (shiftKey && shiftAnchor) {
-      const lastIndex = sortedImageList.findIndex((f) => f.path === shiftAnchor);
-      const currentIndex = sortedImageList.findIndex((f) => f.path === path);
-
-      if (lastIndex !== -1 && currentIndex !== -1) {
-        const start = Math.min(lastIndex, currentIndex);
-        const end = Math.max(lastIndex, currentIndex);
-        const range = sortedImageList.slice(start, end + 1).map((f: ImageFile) => f.path);
-        const baseSelection = isCtrlPressed ? multiSelectedPaths : [shiftAnchor];
-        const newSelection = Array.from(new Set([...baseSelection, ...range]));
-
-        setMultiSelectedPaths(newSelection);
-        if (updateLibraryActivePath) {
-          setLibraryActivePath(path);
-        }
-      }
-    } else if (isCtrlPressed) {
-      const newSelection = new Set(multiSelectedPaths);
-      if (newSelection.has(path)) {
-        newSelection.delete(path);
-      } else {
-        newSelection.add(path);
-      }
-
-      const newSelectionArray = Array.from(newSelection);
-      setMultiSelectedPaths(newSelectionArray);
-
-      if (updateLibraryActivePath) {
-        if (newSelectionArray.includes(path)) {
-          setLibraryActivePath(path);
-        } else if (newSelectionArray.length > 0) {
-          setLibraryActivePath(newSelectionArray[newSelectionArray.length - 1]);
-        } else {
-          setLibraryActivePath(null);
-        }
-      }
-    } else {
-      onSimpleClick(path);
-    }
-  };
-
-  const handleLibraryImageSingleClick = (path: string, event: any) => {
-    handleMultiSelectClick(path, event, {
-      shiftAnchor: libraryActivePath,
-      updateLibraryActivePath: true,
-      onSimpleClick: (p: any) => {
-        setMultiSelectedPaths([p]);
-        setLibraryActivePath(p);
-      },
-    });
-  };
-
-  const handleImageClick = (path: string, event: any) => {
-    const inEditor = !!selectedImage;
-    handleMultiSelectClick(path, event, {
-      shiftAnchor: inEditor ? selectedImage.path : libraryActivePath,
-      updateLibraryActivePath: !inEditor,
-      onSimpleClick: handleImageSelect,
-    });
-  };
-
-  useEffect(() => {
-    const invokeWaveForm = async () => {
-      const waveForm: any = await invoke(Invokes.GenerateWaveform).catch((err) =>
-        console.error('Failed to generate waveform:', err),
-      );
-      if (waveForm) {
-        setWaveform(waveForm);
-      }
-    };
-
-    if (isWaveformVisible && selectedImage?.isReady && !waveform) {
-      invokeWaveForm();
-    }
-  }, [isWaveformVisible, selectedImage?.isReady, waveform]);
-
-  useEffect(() => {
-    if (selectedImage && !selectedImage.isReady && selectedImage.path) {
-      let isEffectActive = true;
-
-      const loadMetadataEarly = async () => {
-        try {
-          const metadata: any = await invoke(Invokes.LoadMetadata, { path: selectedImage.path });
-          if (!isEffectActive) return;
-
-          let initialAdjusts;
-          if (metadata.adjustments && !metadata.adjustments.is_null) {
-            initialAdjusts = normalizeLoadedAdjustments(metadata.adjustments);
-          } else {
-            initialAdjusts = { ...INITIAL_ADJUSTMENTS };
-          }
-
-          setLiveAdjustments(initialAdjusts);
-          resetAdjustmentsHistory(initialAdjusts);
-        } catch (err) {
-          console.error('Failed to load metadata early:', err);
-        }
-      };
-
-      loadMetadataEarly();
-
-      const loadFullImageData = async () => {
-        try {
-          const loadImageResult: any = await invoke(Invokes.LoadImage, { path: selectedImage.path });
-          if (!isEffectActive) {
-            return;
-          }
-
-          const { width, height } = loadImageResult;
-          setOriginalSize({ width, height });
-
-          if (appSettings?.editorPreviewResolution) {
-            const maxSize = appSettings.editorPreviewResolution;
-            const aspectRatio = width / height;
-
-            if (width > height) {
-              const pWidth = Math.min(width, maxSize);
-              const pHeight = Math.round(pWidth / aspectRatio);
-              setPreviewSize({ width: pWidth, height: pHeight });
-            } else {
-              const pHeight = Math.min(height, maxSize);
-              const pWidth = Math.round(pHeight * aspectRatio);
-              setPreviewSize({ width: pWidth, height: pHeight });
-            }
-          } else {
-            setPreviewSize({ width: 0, height: 0 });
-          }
-
-          fullResCacheKeyRef.current = null;
-
-          setSelectedImage((currentSelected: SelectedImage | null) => {
-            if (currentSelected && currentSelected.path === selectedImage.path) {
-              return {
-                ...currentSelected,
-                exif: loadImageResult.exif,
-                height: loadImageResult.height,
-                isRaw: loadImageResult.is_raw,
-                isReady: true,
-                metadata: loadImageResult.metadata,
-                originalUrl: null,
-                width: loadImageResult.width,
-              };
-            }
-            return currentSelected;
-          });
-
-          setLiveAdjustments((prev: Adjustments) => {
-            if (!prev.aspectRatio && !prev.crop) {
-              return { ...prev, aspectRatio: loadImageResult.width / loadImageResult.height };
-            }
-            return prev;
-          });
-        } catch (err) {
-          if (isEffectActive) {
-            console.error('Failed to load image:', err);
-            setError(`Failed to load image: ${err}`);
-            setSelectedImage(null);
-          }
-        } finally {
-          if (isEffectActive) {
-            setIsViewLoading(false);
-          }
-        }
-      };
-      loadFullImageData();
-      return () => {
-        isEffectActive = false;
-      };
-    }
-  }, [selectedImage?.path, selectedImage?.isReady, resetAdjustmentsHistory, appSettings?.editorPreviewResolution]);
-
-  const handleClearSelection = () => {
-    if (selectedImage) {
-      setMultiSelectedPaths([selectedImage.path]);
-    } else {
-      setMultiSelectedPaths([]);
-      setLibraryActivePath(null);
-    }
-  };
-
-  const handleRenameFiles = useCallback(async (paths: Array<string>) => {
-    if (paths && paths.length > 0) {
-      setRenameTargetPaths(paths);
-      setIsRenameFileModalOpen(true);
-    }
-  }, []);
-
-  const handleSaveRename = useCallback(
-    async (nameTemplate: string) => {
-      if (renameTargetPaths.length > 0 && nameTemplate) {
-        try {
-          const newPaths: Array<string> = await invoke(Invokes.RenameFiles, {
-            nameTemplate,
-            paths: renameTargetPaths,
-          });
-
-          await refreshImageList();
-
-          if (selectedImage && renameTargetPaths.includes(selectedImage.path)) {
-            const oldPathIndex = renameTargetPaths.indexOf(selectedImage.path);
-
-            if (newPaths[oldPathIndex]) {
-              handleImageSelect(newPaths[oldPathIndex]);
-            } else {
-              handleBackToLibrary();
-            }
-          }
-
-          if (libraryActivePath && renameTargetPaths.includes(libraryActivePath)) {
-            const oldPathIndex = renameTargetPaths.indexOf(libraryActivePath);
-
-            if (newPaths[oldPathIndex]) {
-              setLibraryActivePath(newPaths[oldPathIndex]);
-            } else {
-              setLibraryActivePath(null);
-            }
-          }
-
-          setMultiSelectedPaths(newPaths);
-        } catch (err) {
-          setError(`Failed to rename files: ${err}`);
-        }
-      }
-
-      setRenameTargetPaths([]);
-    },
-    [renameTargetPaths, refreshImageList, selectedImage, libraryActivePath, handleImageSelect, handleBackToLibrary],
-  );
-
-  const handleStartImport = async (settings: AppSettings) => {
-    if (importSourcePaths.length > 0 && importTargetFolder) {
-      invoke(Invokes.ImportFiles, {
-        destinationFolder: importTargetFolder,
-        settings: settings,
-        sourcePaths: importSourcePaths,
-      }).catch((err) => {
-        console.error('Failed to start import:', err);
-        setImportState({ status: Status.Error, errorMessage: `Failed to start import: ${err}` });
-      });
-    }
-  };
-
-  const handleResetAdjustments = useCallback(
-    (paths?: Array<string>) => {
-      const pathsToReset = paths || multiSelectedPaths;
-      if (pathsToReset.length === 0) {
-        return;
-      }
-
-      debouncedSetHistory.cancel();
-
-      invoke(Invokes.ResetAdjustmentsForPaths, { paths: pathsToReset })
-        .then(() => {
-          if (libraryActivePath && pathsToReset.includes(libraryActivePath)) {
-            setLibraryActiveAdjustments((prev: Adjustments) => ({ ...INITIAL_ADJUSTMENTS, rating: prev.rating }));
-          }
-          if (selectedImage && pathsToReset.includes(selectedImage.path)) {
-            const currentRating = adjustments.rating;
-
-            const originalAspectRatio =
-              selectedImage.width && selectedImage.height ? selectedImage.width / selectedImage.height : null;
-
-            resetAdjustmentsHistory({
-              ...INITIAL_ADJUSTMENTS,
-              aspectRatio: originalAspectRatio,
-              rating: currentRating,
-              aiPatches: [],
-            });
-          }
-        })
-        .catch((err) => {
-          console.error('Failed to reset adjustments:', err);
-          setError(`Failed to reset adjustments: ${err}`);
-        });
-    },
-    [
-      multiSelectedPaths,
-      libraryActivePath,
-      selectedImage,
-      adjustments.rating,
-      resetAdjustmentsHistory,
-      debouncedSetHistory,
-    ],
-  );
-
-  const handleImportClick = useCallback(
-    async (targetPath: string) => {
-      try {
-        const nonRaw = supportedTypes?.nonRaw || [];
-        const raw = supportedTypes?.raw || [];
-
-        const expandExtensions = (exts: string[]) => {
-          return Array.from(new Set(exts.flatMap((ext) => [ext.toLowerCase(), ext.toUpperCase()])));
-        };
-
-        const processedNonRaw = expandExtensions(nonRaw);
-        const processedRaw = expandExtensions(raw);
-        const allImageExtensions = [...processedNonRaw, ...processedRaw];
-
-        const selected = await open({
-          filters: [
-            {
-              name: 'All Supported Images',
-              extensions: allImageExtensions,
-            },
-            {
-              name: 'RAW Images',
-              extensions: processedRaw,
-            },
-            {
-              name: 'Standard Images (JPEG, PNG, etc.)',
-              extensions: processedNonRaw,
-            },
-            {
-              name: 'All Files',
-              extensions: ['*'],
-            },
-          ],
-          multiple: true,
-          title: 'Select files to import',
-        });
-
-        if (Array.isArray(selected) && selected.length > 0) {
-          setImportSourcePaths(selected);
-          setImportTargetFolder(targetPath);
-          setIsImportModalOpen(true);
-        }
-      } catch (err) {
-        console.error('Failed to open file dialog for import:', err);
-      }
-    },
-    [supportedTypes],
-  );
-
-  const handleEditorContextMenu = (event: any) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!selectedImage) return;
-
-    const handleCreateVirtualCopy = async (sourcePath: string) => {
-      try {
-        await invoke(Invokes.CreateVirtualCopy, { sourceVirtualPath: sourcePath });
-        await refreshImageList();
-      } catch (err) {
-        console.error('Failed to create virtual copy:', err);
-        setError(`Failed to create virtual copy: ${err}`);
-      }
-    };
-
-    const commonTags = getCommonTags([selectedImage.path]);
-
-    const options: Array<Option> = [
-      {
-        label: 'Export Image',
-        icon: Save,
-        onClick: () => {
-          setRenderedRightPanel(Panel.Export);
-          setActiveRightPanel(Panel.Export);
-        },
-      },
-      { type: OPTION_SEPARATOR },
-      { label: 'Undo', icon: Undo, onClick: undo, disabled: !canUndo },
-      { label: 'Redo', icon: Redo, onClick: redo, disabled: !canRedo },
-      { type: OPTION_SEPARATOR },
-      { label: 'Copy Adjustments', icon: Copy, onClick: handleCopyAdjustments },
-      {
-        label: 'Paste Adjustments',
-        icon: ClipboardPaste,
-        onClick: handlePasteAdjustments,
-        disabled: copiedAdjustments === null,
-      },
-      {
-        label: 'Productivity',
-        icon: Gauge,
-        submenu: [
-          {
-            label: 'Auto Adjust Image',
-            icon: Aperture,
-            onClick: handleAutoAdjustments,
-          },
-          {
-            icon: CopyPlus,
-            label: 'Create Virtual Copy',
-            onClick: () => handleCreateVirtualCopy(selectedImage.path),
-          },
-          {
-            label: 'Denoise',
-            icon: Grip,
-            onClick: () => {
-              setDenoiseModalState({
-                isOpen: true,
-                isProcessing: false,
-                previewBase64: null,
-                error: null,
-                targetPath: selectedImage.path,
-                progressMessage: null,
-              });
-            },
-          },
-          {
-            label: 'Convert Negative',
-            icon: Film,
-            onClick: () => {
-              if (selectedImage) {
-                setNegativeModalState({
-                  isOpen: true,
-                  targetPath: selectedImage.path,
-                });
-              }
-            },
-          },
-          {
-            disabled: true,
-            icon: SquaresUnite,
-            label: 'Stitch Panorama',
-          },
-          {
-            disabled: true,
-            icon: Images,
-            label: 'Merge to HDR',
-          },
-          {
-            icon: LayoutTemplate,
-            label: 'Frame Image',
-            onClick: () => {
-              setCollageModalState({
-                isOpen: true,
-                sourceImages: [selectedImage],
-              });
-            },
-          },
-          {
-            label: 'Cull Image',
-            icon: Users,
-            disabled: true,
-          },
-        ],
-      },
-      { type: OPTION_SEPARATOR },
-      {
-        label: 'Rating',
-        icon: Star,
-        submenu: [0, 1, 2, 3, 4, 5].map((rating: number) => ({
-          label: rating === 0 ? 'No Rating' : `${rating} Star${rating !== 1 ? 's' : ''}`,
-          onClick: () => handleRate(rating),
-        })),
-      },
-      {
-        label: 'Color Label',
-        icon: Palette,
-        submenu: [
-          { label: 'No Label', onClick: () => handleSetColorLabel(null) },
-          ...COLOR_LABELS.map((label: Color) => ({
-            label: label.name.charAt(0).toUpperCase() + label.name.slice(1),
-            color: label.color,
-            onClick: () => handleSetColorLabel(label.name),
-          })),
-        ],
-      },
-      {
-        label: 'Tagging',
-        icon: Tag,
-        submenu: [
-          {
-            customComponent: TaggingSubMenu,
-            customProps: {
-              paths: [selectedImage.path],
-              initialTags: commonTags,
-              onTagsChanged: handleTagsChanged,
-              appSettings,
-            },
-          },
-        ],
-      },
-      { type: OPTION_SEPARATOR },
-      {
-        label: 'Reset Adjustments',
-        icon: RotateCcw,
-        onClick: () => {
-          debouncedSetHistory.cancel();
-          const currentRating = adjustments.rating;
-
-          const originalAspectRatio =
-            selectedImage.width && selectedImage.height ? selectedImage.width / selectedImage.height : null;
-
-          resetAdjustmentsHistory({
-            ...INITIAL_ADJUSTMENTS,
-            aspectRatio: originalAspectRatio,
-            rating: currentRating,
-            aiPatches: [],
-          });
-        },
-      },
-    ];
-    showContextMenu(event.clientX, event.clientY, options);
-  };
-
-  const handleThumbnailContextMenu = (event: any, path: string) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const isTargetInSelection = multiSelectedPaths.includes(path);
-    let finalSelection;
-
-    if (!isTargetInSelection) {
-      finalSelection = [path];
-      setMultiSelectedPaths([path]);
-      if (!selectedImage) {
-        setLibraryActivePath(path);
-      }
-    } else {
-      finalSelection = multiSelectedPaths;
-    }
-
-    const commonTags = getCommonTags(finalSelection);
-
-    const selectionCount = finalSelection.length;
-    const isSingleSelection = selectionCount === 1;
-    const isEditingThisImage = selectedImage?.path === path;
-    const deleteLabel = isSingleSelection ? 'Delete Image' : `Delete ${selectionCount} Images`;
-    const exportLabel = isSingleSelection ? 'Export Image' : `Export ${selectionCount} Images`;
-
-    const selectionHasVirtualCopies =
-      isSingleSelection &&
-      !finalSelection[0].includes('?vc=') &&
-      imageList.some((image) => image.path.startsWith(`${finalSelection[0]}?vc=`));
-
-    const hasAssociatedFiles = finalSelection.some((selectedPath) => {
-      const lastDotIndex = selectedPath.lastIndexOf('.');
-      if (lastDotIndex === -1) return false;
-      const basePath = selectedPath.substring(0, lastDotIndex);
-      return imageList.some((image) => image.path.startsWith(basePath + '.') && image.path !== selectedPath);
-    });
-
-    let deleteSubmenu;
-    if (selectionHasVirtualCopies) {
-      deleteSubmenu = [
-        { label: 'Cancel', icon: X, onClick: () => {} },
-        {
-          label: 'Confirm Delete + Virtual Copies',
-          icon: Check,
-          isDestructive: true,
-          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
-        },
-      ];
-    } else if (hasAssociatedFiles) {
-      deleteSubmenu = [
-        { label: 'Cancel', icon: X, onClick: () => {} },
-        {
-          label: 'Delete Selected Only',
-          icon: Check,
-          isDestructive: true,
-          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
-        },
-        {
-          label: 'Delete + Associated',
-          icon: Check,
-          isDestructive: true,
-          onClick: () => executeDelete(finalSelection, { includeAssociated: true }),
-        },
-      ];
-    } else {
-      deleteSubmenu = [
-        { label: 'Cancel', icon: X, onClick: () => {} },
-        {
-          label: 'Confirm',
-          icon: Check,
-          isDestructive: true,
-          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
-        },
-      ];
-    }
-
-    const deleteOption = {
-      label: deleteLabel,
-      icon: Trash2,
-      isDestructive: true,
-      submenu: deleteSubmenu,
-    };
-
-    const pasteLabel = isSingleSelection ? 'Paste Adjustments' : `Paste Adjustments to ${selectionCount} Images`;
-    const resetLabel = isSingleSelection ? 'Reset Adjustments' : `Reset Adjustments on ${selectionCount} Images`;
-    const copyLabel = isSingleSelection ? 'Copy Image' : `Copy ${selectionCount} Images`;
-    const autoAdjustLabel = isSingleSelection ? 'Auto Adjust Image' : `Auto Adjust Images`;
-    const renameLabel = isSingleSelection ? 'Rename Image' : `Rename ${selectionCount} Images`;
-    const cullLabel = isSingleSelection ? 'Cull Image' : `Cull Images`;
-    const collageLabel = isSingleSelection ? 'Frame Image' : 'Create Collage';
-    const stitchLabel = `Stitch Panorama`;
-    const mergeLabel = `Merge to HDR`;
-
-    const handleCreateVirtualCopy = async (sourcePath: string) => {
-      try {
-        await invoke(Invokes.CreateVirtualCopy, { sourceVirtualPath: sourcePath });
-        await refreshImageList();
-      } catch (err) {
-        console.error('Failed to create virtual copy:', err);
-        setError(`Failed to create virtual copy: ${err}`);
-      }
-    };
-
-    const handleApplyAutoAdjustmentsToSelection = () => {
-      if (finalSelection.length === 0) return;
-
-      invoke(Invokes.ApplyAutoAdjustmentsToPaths, { paths: finalSelection })
-        .then(async () => {
-          if (selectedImage && finalSelection.includes(selectedImage.path)) {
-            const metadata: Metadata = await invoke(Invokes.LoadMetadata, {
-              path: selectedImage.path,
-            });
-            if (metadata.adjustments && !metadata.adjustments.is_null) {
-              const normalized = normalizeLoadedAdjustments(metadata.adjustments);
-              setLiveAdjustments(normalized);
-              resetAdjustmentsHistory(normalized);
-            }
-          }
-          if (libraryActivePath && finalSelection.includes(libraryActivePath)) {
-            const metadata: Metadata = await invoke(Invokes.LoadMetadata, {
-              path: libraryActivePath,
-            });
-            if (metadata.adjustments && !metadata.adjustments.is_null) {
-              const normalized = normalizeLoadedAdjustments(metadata.adjustments);
-              setLibraryActiveAdjustments(normalized);
-            }
-          }
-        })
-        .catch((err) => {
-          console.error('Failed to apply auto adjustments to paths:', err);
-          setError(`Failed to apply auto adjustments: ${err}`);
-        });
-    };
-
-    const onExportClick = () => {
-      if (selectedImage) {
-        if (selectedImage.path !== path) {
-          handleImageSelect(path);
-        }
-        setRenderedRightPanel(Panel.Export);
-        setActiveRightPanel(Panel.Export);
-      } else {
-        setIsLibraryExportPanelVisible(true);
-      }
-    };
-
-    const options = [
-      ...(!isEditingThisImage
-        ? [
-            {
-              disabled: !isSingleSelection,
-              icon: Edit,
-              label: 'Edit Image',
-              onClick: () => handleImageSelect(finalSelection[0]),
-            },
-            {
-              icon: Save,
-              label: exportLabel,
-              onClick: onExportClick,
-            },
-            { type: OPTION_SEPARATOR },
-          ]
-        : [
-            {
-              icon: Save,
-              label: exportLabel,
-              onClick: onExportClick,
-            },
-            { type: OPTION_SEPARATOR },
-          ]),
-      {
-        disabled: !isSingleSelection,
-        icon: Copy,
-        label: 'Copy Adjustments',
-        onClick: async () => {
-          try {
-            const metadata: any = await invoke(Invokes.LoadMetadata, { path: finalSelection[0] });
-            const sourceAdjustments =
-              metadata.adjustments && !metadata.adjustments.is_null
-                ? { ...INITIAL_ADJUSTMENTS, ...metadata.adjustments }
-                : INITIAL_ADJUSTMENTS;
-            const adjustmentsToCopy: any = {};
-            for (const key of COPYABLE_ADJUSTMENT_KEYS) {
-              if (Object.prototype.hasOwnProperty.call(sourceAdjustments, key)) {
-                adjustmentsToCopy[key] = sourceAdjustments[key];
-              }
-            }
-            setCopiedAdjustments(adjustmentsToCopy);
-            setIsCopied(true);
-          } catch (err) {
-            console.error('Failed to load metadata for copy:', err);
-            setError(`Failed to copy adjustments: ${err}`);
-          }
-        },
-      },
-      {
-        disabled: copiedAdjustments === null,
-        icon: ClipboardPaste,
-        label: pasteLabel,
-        onClick: handlePasteAdjustments,
-      },
-      {
-        label: 'Productivity',
-        icon: Gauge,
-        submenu: [
-          {
-            label: autoAdjustLabel,
-            icon: Aperture,
-            onClick: handleApplyAutoAdjustmentsToSelection,
-          },
-          {
-            disabled: !isSingleSelection,
-            icon: CopyPlus,
-            label: 'Create Virtual Copy',
-            onClick: () => handleCreateVirtualCopy(finalSelection[0]),
-          },
-          {
-            label: 'Denoise',
-            icon: Grip,
-            disabled: !isSingleSelection,
-            onClick: () => {
-              setDenoiseModalState({
-                isOpen: true,
-                isProcessing: false,
-                previewBase64: null,
-                error: null,
-                targetPath: finalSelection[0],
-                progressMessage: null,
-              });
-            },
-          },
-          {
-            label: 'Convert Negative',
-            icon: Film,
-            disabled: !isSingleSelection,
-            onClick: () => {
-              setNegativeModalState({
-                isOpen: true,
-                targetPath: finalSelection[0],
-              });
-            },
-          },
-          {
-            disabled: selectionCount < 2 || selectionCount > 30,
-            icon: SquaresUnite,
-            label: stitchLabel,
-            onClick: () => {
-              setPanoramaModalState({
-                error: null,
-                finalImageBase64: null,
-                isOpen: true,
-                progressMessage: 'Starting panorama process...',
-                stitchingSourcePaths: finalSelection,
-              });
-              invoke(Invokes.StitchPanorama, { paths: finalSelection }).catch((err) => {
-                setPanoramaModalState((prev: PanoramaModalState) => ({
-                  ...prev,
-                  error: String(err),
-                  isOpen: true,
-                  progressMessage: 'Failed to start.',
-                }));
-              });
-            },
-          },
-          {
-            disabled: selectionCount < 2 || selectionCount > 9,
-            icon: Images,
-            label: mergeLabel,
-            onClick: () => {
-              setHdrModalState({
-                error: null,
-                finalImageBase64: null,
-                isOpen: true,
-                progressMessage: 'Starting hdr process...',
-                stitchingSourcePaths: finalSelection,
-              });
-              invoke(Invokes.MergeHdr, { paths: finalSelection }).catch((err) => {
-                setHdrModalState((prev: HdrModalState) => ({
-                  ...prev,
-                  error: String(err),
-                  isOpen: true,
-                  progressMessage: 'Failed to start.',
-                }));
-              });
-            },
-          },
-          {
-            icon: LayoutTemplate,
-            label: collageLabel,
-            onClick: () => {
-              const imagesForCollage = imageList.filter((img) => finalSelection.includes(img.path));
-              setCollageModalState({
-                isOpen: true,
-                sourceImages: imagesForCollage,
-              });
-            },
-            disabled: selectionCount === 0 || selectionCount > 9,
-          },
-          {
-            label: cullLabel,
-            icon: Users,
-            onClick: () =>
-              setCullingModalState({
-                isOpen: true,
-                progress: null,
-                suggestions: null,
-                error: null,
-                pathsToCull: finalSelection,
-              }),
-            disabled: selectionCount < 2,
-          },
-        ],
-      },
-      { type: OPTION_SEPARATOR },
-      {
-        label: copyLabel,
-        icon: Copy,
-        onClick: () => {
-          setCopiedFilePaths(finalSelection);
-          setIsCopied(true);
-        },
-      },
-      {
-        disabled: !isSingleSelection,
-        icon: CopyPlus,
-        label: 'Duplicate Image',
-        onClick: async () => {
-          try {
-            await invoke(Invokes.DuplicateFile, { path: finalSelection[0] });
-            await refreshImageList();
-          } catch (err) {
-            console.error('Failed to duplicate file:', err);
-            setError(`Failed to duplicate file: ${err}`);
-          }
-        },
-      },
-      { icon: FileEdit, label: renameLabel, onClick: () => handleRenameFiles(finalSelection) },
-      { type: OPTION_SEPARATOR },
-      {
-        icon: Star,
-        label: 'Rating',
-        submenu: [0, 1, 2, 3, 4, 5].map((rating: number) => ({
-          label: rating === 0 ? 'No Rating' : `${rating} Star${rating !== 1 ? 's' : ''}`,
-          onClick: () => handleRate(rating, finalSelection),
-        })),
-      },
-      {
-        label: 'Color Label',
-        icon: Palette,
-        submenu: [
-          { label: 'No Label', onClick: () => handleSetColorLabel(null, finalSelection) },
-          ...COLOR_LABELS.map((label: Color) => ({
-            label: label.name.charAt(0).toUpperCase() + label.name.slice(1),
-            color: label.color,
-            onClick: () => handleSetColorLabel(label.name, finalSelection),
-          })),
-        ],
-      },
-      {
-        label: 'Tagging',
-        icon: Tag,
-        submenu: [
-          {
-            customComponent: TaggingSubMenu,
-            customProps: {
-              paths: finalSelection,
-              initialTags: commonTags,
-              onTagsChanged: handleTagsChanged,
-              appSettings,
-            },
-          },
-        ],
-      },
-      { type: OPTION_SEPARATOR },
-      {
-        disabled: !isSingleSelection,
-        icon: Folder,
-        label: 'Show in File Explorer',
-        onClick: () => {
-          invoke(Invokes.ShowInFinder, { path: finalSelection[0] }).catch((err) =>
-            setError(`Could not show file in explorer: ${err}`),
-          );
-        },
-      },
-      { label: resetLabel, icon: RotateCcw, onClick: () => handleResetAdjustments(finalSelection) },
-      deleteOption,
-    ];
-    showContextMenu(event.clientX, event.clientY, options);
-  };
-
-  const handleCreateFolder = async (folderName: string) => {
-    if (folderName && folderName.trim() !== '' && folderActionTarget) {
-      try {
-        await invoke(Invokes.CreateFolder, { path: `${folderActionTarget}/${folderName.trim()}` });
-        refreshAllFolderTrees();
-      } catch (err) {
-        setError(`Failed to create folder: ${err}`);
-      }
-    }
-  };
+import BottomBar from './components/panel/BottomBar';
+import CreateFolderModal from './components/modals/CreateFolderModal';
+import RenameFolderModal from './components/modals/RenameFolderModal';
+import ConfirmModal from './components/modals/ConfirmModal';
+import ImportSettingsModal from './components/modals/ImportSettingsModal';
+import RenameFileModal from './components/modals/RenameFileModal';
+import PanoramaModal from './components/modals/PanoramaModal';
+import NegativeConversionModal from './components/modals/NegativeConversionModal';
+import DenoiseModal from './components/modals/DenoiseModal';
+import CollageModal from './components/modals/CollageModal';
+import CopyPasteSettingsModal from './components/modals/CopyPasteSettingsModal';
+import CullingModal from './components/modals/CullingModal';
+import Resizer from './components/ui/Resizer';
+import { CopyPasteSettings } from './utils/adjustments';
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
+import GlobalTooltip from './components/ui/GlobalTooltip';
+import {
+  ImageFile,
+  Panel,
+  UiVisibility,
+  Orientation,
+  CullingSuggestions,
+  AppSettings,
+} from './components/ui/AppProperties';
+import HdrModal from './components/modals/HdrModal';
+import { ContextProviders, useAppState } from './context/ContextProviders';
+import { useSortedImageList } from './hooks/useSortedImageList';
+import { useHandlers } from './hooks/useHandlers';
+import { useGlobalEffects } from './hooks/useGlobalEffects';
+import { useHandleFolderTreeContextMenu } from './hooks/handlers/useHandleFolderTreeContextMenu';
 
-  const handleRenameFolder = async (newName: string) => {
-    if (newName && newName.trim() !== '' && folderActionTarget) {
-      try {
-        const oldPath = folderActionTarget;
-        const trimmedNewName = newName.trim();
+export interface CollapsibleSectionsState {
+  basic: boolean;
+  color: boolean;
+  curves: boolean;
+  details: boolean;
+  effects: boolean;
+}
 
-        await invoke(Invokes.RenameFolder, { path: oldPath, newName: trimmedNewName });
+export interface ConfirmModalState {
+  confirmText?: string;
+  confirmVariant?: string;
+  isOpen: boolean;
+  message?: string;
+  onConfirm?(): void;
+  title?: string;
+}
 
-        const parentDir = getParentDir(oldPath);
-        const separator = oldPath.includes('/') ? '/' : '\\';
-        const newPath = parentDir ? `${parentDir}${separator}${trimmedNewName}` : trimmedNewName;
+export interface MultiSelectOptions {
+  onSimpleClick(p: any): void;
+  updateLibraryActivePath: boolean;
+  shiftAnchor: string | null;
+}
 
-        const newAppSettings = { ...appSettings } as AppSettings;
-        let settingsChanged = false;
+export interface CollageModalState {
+  isOpen: boolean;
+  sourceImages: ImageFile[];
+}
 
-        if (rootPath === oldPath) {
-          setRootPath(newPath);
-          newAppSettings.lastRootPath = newPath;
-          settingsChanged = true;
-        }
-        if (currentFolderPath?.startsWith(oldPath)) {
-          const newCurrentPath = currentFolderPath.replace(oldPath, newPath);
-          setCurrentFolderPath(newCurrentPath);
-        }
+export interface PanoramaModalState {
+  error: string | null;
+  finalImageBase64: string | null;
+  isOpen: boolean;
+  progressMessage: string | null;
+  stitchingSourcePaths: Array<string>;
+}
 
-        const currentPins = appSettings?.pinnedFolders || [];
-        if (currentPins.includes(oldPath)) {
-          const newPins = currentPins.map((p) => (p === oldPath ? newPath : p)).sort((a, b) => a.localeCompare(b));
-          newAppSettings.pinnedFolders = newPins;
-          settingsChanged = true;
-        }
+export interface HdrModalState {
+  error: string | null;
+  finalImageBase64: string | null;
+  isOpen: boolean;
+  progressMessage: string | null;
+  stitchingSourcePaths: Array<string>;
+}
 
-        if (settingsChanged) {
-          handleSettingsChange(newAppSettings);
-        }
+export interface DenoiseModalState {
+  isOpen: boolean;
+  isProcessing: boolean;
+  previewBase64: string | null;
+  originalBase64?: string | null;
+  error: string | null;
+  targetPath: string | null;
+  progressMessage: string | null;
+}
 
-        await refreshAllFolderTrees();
-      } catch (err) {
-        setError(`Failed to rename folder: ${err}`);
-      }
-    }
-  };
+export interface NegativeConversionModalState {
+  isOpen: boolean;
+  targetPath: string | null;
+}
 
-  const handleFolderTreeContextMenu = (event: any, path: string, isCurrentlyPinned?: boolean) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const targetPath = path || rootPath;
-    if (!targetPath) {
-      return;
-    }
-    const isRoot = targetPath === rootPath;
-    const numCopied = copiedFilePaths.length;
-    const copyPastedLabel = numCopied === 1 ? 'Copy image here' : `Copy ${numCopied} images here`;
-    const movePastedLabel = numCopied === 1 ? 'Move image here' : `Move ${numCopied} images here`;
+export interface CullingModalState {
+  isOpen: boolean;
+  suggestions: CullingSuggestions | null;
+  progress: { current: number; total: number; stage: string } | null;
+  error: string | null;
+  pathsToCull: Array<string>;
+}
 
-    const pinOption = isCurrentlyPinned
-      ? {
-          icon: PinOff,
-          label: 'Unpin Folder',
-          onClick: () => handleTogglePinFolder(targetPath),
-        }
-      : {
-          icon: Pin,
-          label: 'Pin Folder',
-          onClick: () => handleTogglePinFolder(targetPath),
-        };
+export interface SearchCriteria {
+  tags: string[];
+  text: string;
+  mode: 'AND' | 'OR';
+}
 
-    const options = [
-      pinOption,
-      { type: OPTION_SEPARATOR },
-      {
-        icon: FolderPlus,
-        label: 'New Folder',
-        onClick: () => {
-          setFolderActionTarget(targetPath);
-          setIsCreateFolderModalOpen(true);
-        },
-      },
-      {
-        disabled: isRoot,
-        icon: FileEdit,
-        label: 'Rename Folder',
-        onClick: () => {
-          setFolderActionTarget(targetPath);
-          setIsRenameFolderModalOpen(true);
-        },
-      },
-      { type: OPTION_SEPARATOR },
-      {
-        disabled: copiedFilePaths.length === 0,
-        icon: ClipboardPaste,
-        label: 'Paste',
-        submenu: [
-          {
-            label: copyPastedLabel,
-            onClick: async () => {
-              try {
-                await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: targetPath });
-                if (targetPath === currentFolderPath) handleLibraryRefresh();
-              } catch (err) {
-                setError(`Failed to copy files: ${err}`);
-              }
-            },
-          },
-          {
-            label: movePastedLabel,
-            onClick: async () => {
-              try {
-                await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: targetPath });
-                setCopiedFilePaths([]);
-                setMultiSelectedPaths([]);
-                refreshAllFolderTrees();
-                handleLibraryRefresh();
-              } catch (err) {
-                setError(`Failed to move files: ${err}`);
-              }
-            },
-          },
-        ],
-      },
-      { icon: FolderInput, label: 'Import Images', onClick: () => handleImportClick(targetPath) },
-      { type: OPTION_SEPARATOR },
-      {
-        icon: Folder,
-        label: 'Show in File Explorer',
-        onClick: () =>
-          invoke(Invokes.ShowInFinder, { path: targetPath }).catch((err) => setError(`Could not show folder: ${err}`)),
-      },
-      ...(path
-        ? [
-            {
-              disabled: isRoot,
-              icon: Trash2,
-              isDestructive: true,
-              label: 'Delete Folder',
-              submenu: [
-                { label: 'Cancel', icon: X, onClick: () => {} },
-                {
-                  label: 'Confirm',
-                  icon: Check,
-                  isDestructive: true,
-                  onClick: async () => {
-                    try {
-                      await invoke(Invokes.DeleteFolder, { path: targetPath });
-                      if (currentFolderPath?.startsWith(targetPath)) await handleSelectSubfolder(rootPath);
-                      refreshAllFolderTrees();
-                    } catch (err) {
-                      setError(`Failed to delete folder: ${err}`);
-                    }
-                  },
-                },
-              ],
-            },
-          ]
-        : []),
-    ];
-    showContextMenu(event.clientX, event.clientY, options);
-  };
+function App() {
+  const {
+    selectedImage,
+    appSettings,
+    rootPath,
+    activeView,
+    setActiveView,
+    isWindowFullScreen,
+    isLayoutReady,
+    currentFolderPath,
+    folderTree,
+    imageList,
+    imageRatings,
+    sortCriteria,
+    filterCriteria,
+    supportedTypes,
+    multiSelectedPaths,
+    setMultiSelectedPaths,
+    libraryActivePath,
+    setLibraryActivePath,
+    libraryActiveAdjustments,
+    setShowOriginal,
+    adjustments,
+    isTreeLoading,
+    isViewLoading,
+    setIsWaveformVisible,
+    uiVisibility,
+    setUiVisibility,
+    setIsSliderDragging,
+    isFullScreen,
+    isAnimatingTheme,
+    theme,
+    activeRightPanel,
+    slideDirection,
+    activeMaskContainerId,
+    setActiveMaskContainerId,
+    activeMaskId,
+    setActiveMaskId,
+    activeAiPatchContainerId,
+    setActiveAiPatchContainerId,
+    activeAiSubMaskId,
+    setActiveAiSubMaskId,
+    zoom,
+    displaySize,
+    baseRenderSize,
+    originalSize,
+    setInitialFitScale,
+    renderedRightPanel,
+    isLibraryExportPanelVisible,
+    setIsLibraryExportPanelVisible,
+    libraryViewMode,
+    leftPanelWidth,
+    setLeftPanelWidth,
+    rightPanelWidth,
+    setRightPanelWidth,
+    bottomPanelHeight,
+    setBottomPanelHeight,
+    isResizing,
+    thumbnailSize,
+    setThumbnailSize,
+    thumbnailAspectRatio,
+    setThumbnailAspectRatio,
+    copiedAdjustments,
+    isStraightenActive,
+    setIsStraightenActive,
+    copiedFilePaths,
+    setCopiedFilePaths,
+    aiModelDownloadStatus,
+    isCopied,
+    isPasted,
+    isIndexing,
+    indexingProgress,
+    searchCriteria,
+    setIsCreateFolderModalOpen,
+    setIsRenameFolderModalOpen,
+    setIsRenameFileModalOpen,
+    setIsImportModalOpen,
+    setIsCopyPasteSettingsModalOpen,
+    importSourcePaths,
+    folderActionTarget,
+    confirmModalState,
+    setPanoramaModalState,
+    setHdrModalState,
+    negativeModalState,
+    setNegativeModalState,
+    setDenoiseModalState,
+    setCullingModalState,
+    setCollageModalState,
+    customEscapeHandler,
+    libraryScrollTop,
+    thumbnails,
+    setThumbnails,
+    history,
+    importState,
+    isLightTheme,
+    isAnyModalOpen,
+    collageModalState,
+    cullingModalState,
+    isImportModalOpen,
+    renameTargetPaths,
+    denoiseModalState,
+    isRenameFileModalOpen,
+    isRenameFolderModalOpen,
+    isCreateFolderModalOpen,
+    hdrModalState,
+    panoramaModalState,
+    activeTreeSection,
+    adaptivePalette,
+    brushSettings,
+    collapsibleSectionsState,
+    copiedMask,
+    copiedSectionAdjustments,
+    currentFolderPathRef,
+    dragIdleTimer,
+    error,
+    expandedFolders,
+    exportState,
+    finalPreviewUrl,
+    fullResCacheKeyRef,
+    geometricAdjustmentsKey,
+    histogram,
+    importTargetFolder,
+    initialFileToOpen,
+    initialFitScale,
+    isAIConnectorConnected,
+    isCopyPasteSettingsModalOpen,
+    isGeneratingAi,
+    isGeneratingAiMask,
+    isHighResNeeded,
+    isInitialMount,
+    isInitialThemeMount,
+    isLoadingFullRes,
+    isMaskControlHovered,
+    isProgrammaticZoom,
+    isRotationActive,
+    isSliderDragging,
+    isWaveformVisible,
+    isWbPickerActive,
+    latestRenderedJobIdRef,
+    overlayMode,
+    overlayRotation,
+    patchesSentToBackend,
+    pinnedFolderTrees,
+    pinnedFolders,
+    preloadedDataRef,
+    previewJobIdRef,
+    previewSize,
+    selectedImagePathRef,
+    setActiveRightPanel,
+    setActiveTreeSection,
+    setAdaptivePalette,
+    setAiModelDownloadStatus,
+    setAdjustments: setLiveAdjustments,
+    setAppSettings,
+    setBaseRenderSize,
+    setBrushSettings,
+    setCollapsibleSectionsState,
+    setConfirmModalState,
+    setCopiedAdjustments,
+    setCopiedMask,
+    setCopiedSectionAdjustments,
+    setCurrentFolderPath,
+    setCustomEscapeHandler,
+    setDisplaySize,
+    setError,
+    setExpandedFolders,
+    setExportState,
+    setFilterCriteria,
+    setFinalPreviewUrl,
+    setFolderActionTarget,
+    setFolderTree,
+    setHistogram,
+    setImageList,
+    setImageRatings,
+    setImportSourcePaths,
+    setImportState,
+    setImportTargetFolder,
+    setIndexingProgress,
+    setInitialFileToOpen,
+    setIsAIConnectorConnected,
+    setIsAnimatingTheme,
+    setIsCopied,
+    setIsFullScreen,
+    setIsGeneratingAi,
+    setIsGeneratingAiMask,
+    setIsHighResNeeded,
+    setIsIndexing,
+    setIsLayoutReady,
+    setIsLoadingFullRes,
+    setIsMaskControlHovered,
+    setIsPasted,
+    setIsResizing,
+    setIsRotationActive,
+    setIsTreeLoading,
+    setIsViewLoading,
+    setIsWbPickerActive,
+    setIsWindowFullScreen,
+    setLibraryActiveAdjustments,
+    setLibraryScrollTop,
+    setLibraryViewMode,
+    setOriginalSize,
+    setOverlayMode,
+    setOverlayRotation,
+    setPinnedFolderTrees,
+    setPreviewSize,
+    setRenameTargetPaths,
+    setRenderedRightPanel,
+    setRootPath,
+    setSearchCriteria,
+    setSelectedImage,
+    setSlideDirection,
+    setSortCriteria,
+    setSupportedTypes,
+    setTheme,
+    setTransformedOriginalUrl,
+    setUncroppedAdjustedPreviewUrl,
+    setWaveform,
+    setZoom,
+    showOriginal,
+    transformWrapperRef,
+    transformedOriginalUrl,
+    uncroppedAdjustedPreviewUrl,
+    visualAdjustmentsKey,
+    waveform,
+  } = useAppState();
+
+  const { sortedImageList } = useSortedImageList();
 
-  const handleMainLibraryContextMenu = (event: any) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const numCopied = copiedFilePaths.length;
-    const copyPastedLabel = numCopied === 1 ? 'Copy image here' : `Copy ${numCopied} images here`;
-    const movePastedLabel = numCopied === 1 ? 'Move image here' : `Move ${numCopied} images here`;
+  const {
+    canUndo,
+    canRedo,
+    goToIndex: goToAdjustmentsHistoryIndex,
+    history: adjustmentsHistory,
+    historyIndex: adjustmentsHistoryIndex,
+  } = history;
 
-    const options = [
-      {
-        label: 'Paste',
-        icon: ClipboardPaste,
-        disabled: copiedFilePaths.length === 0,
-        submenu: [
-          {
-            label: copyPastedLabel,
-            onClick: async () => {
-              try {
-                await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
-                handleLibraryRefresh();
-              } catch (err) {
-                setError(`Failed to copy files: ${err}`);
-              }
-            },
-          },
-          {
-            label: movePastedLabel,
-            onClick: async () => {
-              try {
-                await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
-                setCopiedFilePaths([]);
-                setMultiSelectedPaths([]);
-                refreshAllFolderTrees();
-                handleLibraryRefresh();
-              } catch (err) {
-                setError(`Failed to move files: ${err}`);
-              }
-            },
-          },
-        ],
-      },
-      {
-        icon: FolderInput,
-        label: 'Import Images',
-        onClick: () => handleImportClick(currentFolderPath as string),
-        disabled: !currentFolderPath,
-      },
-    ];
-    showContextMenu(event.clientX, event.clientY, options);
-  };
+  const {
+    handleBackToLibrary,
+    handleImageSelect,
+    executeDelete,
+    handleDeleteSelected,
+    refreshImageList,
+    handleDisplaySizeChange,
+    setAdjustments,
+    handleStraighten,
+    toggleWbPicker,
+    handleWbPicked,
+    undo,
+    redo,
+    updateSubMask,
+    handleGenerativeReplace,
+    handleQuickErase,
+    handleDeleteMaskContainer,
+    handleDeleteAiPatch,
+    handleToggleAiPatchVisibility,
+    handleGenerateAiMask,
+    handleGenerateAiForegroundMask,
+    handleGenerateAiSkyMask,
+    createResizeHandler,
+    handleLutSelect,
+    handleRightPanelSelect,
+    handleSettingsChange,
+    handleToggleWaveform,
+    handleActiveTreeSectionChange,
+    handleSelectSubfolder,
+    handleLibraryRefresh,
+    handleToggleFolder,
+    handleToggleFullScreen,
+    handleCopyAdjustments,
+    handlePasteAdjustments,
+    handleAutoAdjustments,
+    handleRate,
+    handleSetColorLabel,
+    handleTagsChanged,
+    closeConfirmModal,
+    handlePasteFiles,
+    handleZoomChange,
+    handleUserTransform,
+    handleSavePanorama,
+    handleSaveHdr,
+    handleApplyDenoise,
+    handleSaveDenoisedImage,
+    handleSaveCollage,
+    handleOpenFolder,
+    handleContinueSession,
+    handleGoHome,
+    handleLibraryImageSingleClick,
+    handleImageClick,
+    handleClearSelection,
+    handleSaveRename,
+    handleStartImport,
+    handleResetAdjustments,
+    handleEditorContextMenu,
+    handleThumbnailContextMenu,
+    handleCreateFolder,
+    handleRenameFolder,
+    handleFolderTreeContextMenu,
+    handleMainLibraryContextMenu,
+  } = useHandlers();
+
+  useGlobalEffects();
 
-  const memoizedFolderTree = useMemo(
-    () =>
-      rootPath && (
-        <div
-          className={clsx(
-            'flex h-full overflow-hidden flex-shrink-0',
-            !isResizing && 'transition-all duration-300 ease-in-out',
-          )}
-          style={{
-            maxWidth: isFullScreen ? '0px' : '1000px',
-            opacity: isFullScreen ? 0 : 1,
-          }}
-        >
-          <FolderTree
-            expandedFolders={expandedFolders}
-            isLoading={isTreeLoading}
-            isResizing={isResizing}
-            isVisible={uiVisibility.folderTree}
-            onContextMenu={handleFolderTreeContextMenu}
-            onFolderSelect={(path) => handleSelectSubfolder(path, false)}
-            onToggleFolder={handleToggleFolder}
-            selectedPath={currentFolderPath}
-            setIsVisible={(value: boolean) => setUiVisibility((prev: UiVisibility) => ({ ...prev, folderTree: value }))}
-            style={{ width: uiVisibility.folderTree ? `${leftPanelWidth}px` : '32px' }}
-            tree={folderTree}
-            pinnedFolderTrees={pinnedFolderTrees}
-            pinnedFolders={pinnedFolders}
-            activeSection={activeTreeSection}
-            onActiveSectionChange={handleActiveTreeSectionChange}
-            showImageCounts={appSettings?.enableFolderImageCounts ?? false}
-          />
-          <Resizer
-            direction={Orientation.Vertical}
-            onMouseDown={createResizeHandler(setLeftPanelWidth, leftPanelWidth)}
-          />
-        </div>
-      ),
-    [
-      rootPath,
-      expandedFolders,
-      isTreeLoading,
-      isResizing,
-      handleSelectSubfolder,
-      uiVisibility.folderTree,
-      currentFolderPath,
-      leftPanelWidth,
-      folderTree,
-      pinnedFolderTrees,
-      pinnedFolders,
-      activeTreeSection,
-      copiedFilePaths,
-      isFullScreen,
-    ],
-  );
+  const { loading: isThumbnailsLoading } = useThumbnails(imageList, setThumbnails);
 
-  const memoizedLibraryView = useMemo(
-    () => (
-      <div className="flex flex-row flex-grow h-full min-h-0">
-        <div className="flex-1 flex flex-col min-w-0 gap-2">
-          {activeView === 'community' ? (
-            <CommunityPage
-              onBackToLibrary={() => setActiveView('library')}
-              supportedTypes={supportedTypes}
-              imageList={sortedImageList}
-              currentFolderPath={currentFolderPath}
-            />
-          ) : (
-            <MainLibrary
-              activePath={libraryActivePath}
-              aiModelDownloadStatus={aiModelDownloadStatus}
-              appSettings={appSettings}
-              currentFolderPath={currentFolderPath}
-              filterCriteria={filterCriteria}
-              imageList={sortedImageList}
-              imageRatings={imageRatings}
-              importState={importState}
-              indexingProgress={indexingProgress}
-              isIndexing={isIndexing}
-              isThumbnailsLoading={isThumbnailsLoading}
-              isLoading={isViewLoading}
-              isTreeLoading={isTreeLoading}
-              libraryScrollTop={libraryScrollTop}
-              libraryViewMode={libraryViewMode}
-              multiSelectedPaths={multiSelectedPaths}
-              onClearSelection={handleClearSelection}
-              onContextMenu={handleThumbnailContextMenu}
-              onContinueSession={handleContinueSession}
-              onEmptyAreaContextMenu={handleMainLibraryContextMenu}
-              onGoHome={handleGoHome}
-              onImageClick={handleLibraryImageSingleClick}
-              onImageDoubleClick={handleImageSelect}
-              onLibraryRefresh={handleLibraryRefresh}
-              onOpenFolder={handleOpenFolder}
-              onSettingsChange={handleSettingsChange}
-              onThumbnailAspectRatioChange={setThumbnailAspectRatio}
-              onThumbnailSizeChange={setThumbnailSize}
-              rootPath={rootPath}
-              searchCriteria={searchCriteria}
-              setFilterCriteria={setFilterCriteria}
-              setLibraryScrollTop={setLibraryScrollTop}
-              setLibraryViewMode={setLibraryViewMode}
-              setSearchCriteria={setSearchCriteria}
-              setSortCriteria={setSortCriteria}
-              sortCriteria={sortCriteria}
-              theme={theme}
-              thumbnailAspectRatio={thumbnailAspectRatio}
-              thumbnails={thumbnails}
-              thumbnailSize={thumbnailSize}
-              onNavigateToCommunity={() => setActiveView('community')}
-            />
-          )}
-          {rootPath && (
-            <BottomBar
-              isCopied={isCopied}
-              isCopyDisabled={multiSelectedPaths.length !== 1}
-              isExportDisabled={multiSelectedPaths.length === 0}
-              isLibraryView={true}
-              isPasted={isPasted}
-              isPasteDisabled={copiedAdjustments === null || multiSelectedPaths.length === 0}
-              isRatingDisabled={multiSelectedPaths.length === 0}
-              isResetDisabled={multiSelectedPaths.length === 0}
-              multiSelectedPaths={multiSelectedPaths}
-              onCopy={handleCopyAdjustments}
-              onExportClick={() => setIsLibraryExportPanelVisible((prev) => !prev)}
-              onOpenCopyPasteSettings={() => setIsCopyPasteSettingsModalOpen(true)}
-              onPaste={() => handlePasteAdjustments()}
-              onRate={handleRate}
-              onReset={() => handleResetAdjustments()}
-              rating={libraryActiveAdjustments.rating || 0}
-              thumbnailAspectRatio={thumbnailAspectRatio}
-              totalImages={imageList.length}
-            />
-          )}
-        </div>
-      </div>
-    ),
-    [
-      activeView,
-      sortedImageList,
-      currentFolderPath,
-      libraryActivePath,
-      aiModelDownloadStatus,
-      appSettings,
-      filterCriteria,
-      imageRatings,
-      importState,
-      indexingProgress,
-      isIndexing,
-      isThumbnailsLoading,
-      isViewLoading,
-      isTreeLoading,
-      libraryScrollTop,
-      libraryViewMode,
-      multiSelectedPaths,
-      rootPath,
-      searchCriteria,
-      sortCriteria,
-      theme,
-      thumbnailAspectRatio,
-      thumbnails,
-      thumbnailSize,
-      isCopied,
-      isPasted,
-      copiedAdjustments,
-      libraryActiveAdjustments,
-      supportedTypes,
-      copiedFilePaths,
-    ],
-  );
+  useKeyboardShortcuts({
+    isModalOpen: isAnyModalOpen,
+    activeAiPatchContainerId,
+    activeAiSubMaskId,
+    activeMaskContainerId,
+    activeMaskId,
+    activeRightPanel,
+    canRedo,
+    canUndo,
+    copiedFilePaths,
+    customEscapeHandler,
+    handleBackToLibrary,
+    handleCopyAdjustments,
+    handleDeleteAiPatch,
+    handleDeleteMaskContainer,
+    handleDeleteSelected,
+    handleImageSelect,
+    handlePasteAdjustments,
+    handlePasteFiles,
+    handleRate,
+    handleRightPanelSelect,
+    handleSetColorLabel,
+    handleToggleFullScreen,
+    handleZoomChange,
+    isFullScreen,
+    isStraightenActive,
+    isViewLoading,
+    libraryActivePath,
+    multiSelectedPaths,
+    redo,
+    selectedImage,
+    setActiveAiSubMaskId,
+    setActiveMaskContainerId,
+    setActiveMaskId,
+    setCopiedFilePaths,
+    setIsStraightenActive,
+    setIsWaveformVisible,
+    setLibraryActivePath,
+    setMultiSelectedPaths,
+    setShowOriginal,
+    sortedImageList,
+    undo,
+    zoom,
+    displaySize,
+    baseRenderSize,
+    originalSize,
+  });
 
   const renderMainView = () => {
     const panelVariants: any = {
@@ -4452,6 +508,7 @@ function App() {
               finalPreviewUrl={finalPreviewUrl}
               isFullScreen={isFullScreen}
               isLoading={isViewLoading}
+              isSliderDragging={isSliderDragging}
               isMaskControlHovered={isMaskControlHovered}
               isStraightenActive={isStraightenActive}
               isWaveformVisible={isWaveformVisible}
@@ -4708,7 +765,7 @@ function App() {
         </div>
       );
     }
-    return memoizedLibraryView;
+    return <MemoizedLibraryView />;
   };
 
   const renderContent = () => {
@@ -4741,7 +798,7 @@ function App() {
         )}
       >
         <div className="flex flex-row flex-grow h-full min-h-0">
-          {memoizedFolderTree}
+          <MemoizedFolderTree />
           <div className="flex-1 flex flex-col min-w-0">{renderContent()}</div>
           {!selectedImage && isLibraryExportPanelVisible && (
             <Resizer
@@ -4914,13 +971,219 @@ function App() {
   );
 }
 
+const MemoizedFolderTree = React.memo(() => {
+  const {
+    rootPath,
+    isResizing,
+    isFullScreen,
+    expandedFolders,
+    isTreeLoading,
+    uiVisibility,
+    currentFolderPath,
+    setUiVisibility,
+    leftPanelWidth,
+    folderTree,
+    pinnedFolderTrees,
+    pinnedFolders,
+    activeTreeSection,
+    appSettings,
+    setLeftPanelWidth,
+  } = useAppState();
+  if (!rootPath) return <></>;
+
+  const {
+    handleFolderTreeContextMenu,
+    handleSelectSubfolder,
+    handleToggleFolder,
+    handleActiveTreeSectionChange,
+    createResizeHandler,
+  } = useHandlers();
+
+  return (
+    <div
+      className={clsx(
+        'flex h-full overflow-hidden flex-shrink-0',
+        !isResizing && 'transition-all duration-300 ease-in-out',
+      )}
+      style={{
+        maxWidth: isFullScreen ? '0px' : '1000px',
+        opacity: isFullScreen ? 0 : 1,
+      }}
+    >
+      <FolderTree
+        expandedFolders={expandedFolders}
+        isLoading={isTreeLoading}
+        isResizing={isResizing}
+        isVisible={uiVisibility.folderTree}
+        onContextMenu={handleFolderTreeContextMenu}
+        onFolderSelect={(path) => handleSelectSubfolder(path, false)}
+        onToggleFolder={handleToggleFolder}
+        selectedPath={currentFolderPath}
+        setIsVisible={(value: boolean) => setUiVisibility((prev: UiVisibility) => ({ ...prev, folderTree: value }))}
+        style={{ width: uiVisibility.folderTree ? `${leftPanelWidth}px` : '32px' }}
+        tree={folderTree}
+        pinnedFolderTrees={pinnedFolderTrees}
+        pinnedFolders={pinnedFolders}
+        activeSection={activeTreeSection}
+        onActiveSectionChange={handleActiveTreeSectionChange}
+        showImageCounts={appSettings?.enableFolderImageCounts ?? false}
+      />
+      <Resizer direction={Orientation.Vertical} onMouseDown={createResizeHandler(setLeftPanelWidth, leftPanelWidth)} />
+    </div>
+  );
+});
+
+const MemoizedLibraryView = React.memo(() => {
+  const {
+    activeView,
+    setActiveView,
+    supportedTypes,
+    currentFolderPath,
+    libraryActivePath,
+    aiModelDownloadStatus,
+    appSettings,
+    filterCriteria,
+    imageRatings,
+    importState,
+    indexingProgress,
+    isIndexing,
+    imageList,
+    setThumbnails,
+    isViewLoading,
+    isTreeLoading,
+    libraryScrollTop,
+    libraryViewMode,
+    multiSelectedPaths,
+    setThumbnailAspectRatio,
+    setThumbnailSize,
+    rootPath,
+    searchCriteria,
+    setFilterCriteria,
+    setLibraryScrollTop,
+    setLibraryViewMode,
+    setSearchCriteria,
+    setSortCriteria,
+    sortCriteria,
+    theme,
+    thumbnailAspectRatio,
+    thumbnails,
+    thumbnailSize,
+    isCopied,
+    isPasted,
+    copiedAdjustments,
+    setIsLibraryExportPanelVisible,
+    setIsCopyPasteSettingsModalOpen,
+    libraryActiveAdjustments,
+  } = useAppState();
+
+  const { sortedImageList } = useSortedImageList();
+
+  const { loading: isThumbnailsLoading } = useThumbnails(imageList, setThumbnails);
+
+  const {
+    handleClearSelection,
+    handleThumbnailContextMenu,
+    handleContinueSession,
+    handleMainLibraryContextMenu,
+    handleGoHome,
+    handleLibraryImageSingleClick,
+    handleImageSelect,
+    handleLibraryRefresh,
+    handleOpenFolder,
+    handleSettingsChange,
+    handleCopyAdjustments,
+    handlePasteAdjustments,
+    handleRate,
+    handleResetAdjustments,
+  } = useHandlers();
+
+  return (
+    <div className="flex flex-row flex-grow h-full min-h-0">
+      <div className="flex-1 flex flex-col min-w-0 gap-2">
+        {activeView === 'community' ? (
+          <CommunityPage
+            onBackToLibrary={() => setActiveView('library')}
+            supportedTypes={supportedTypes}
+            imageList={sortedImageList}
+            currentFolderPath={currentFolderPath}
+          />
+        ) : (
+          <MainLibrary
+            activePath={libraryActivePath}
+            aiModelDownloadStatus={aiModelDownloadStatus}
+            appSettings={appSettings}
+            currentFolderPath={currentFolderPath}
+            filterCriteria={filterCriteria}
+            imageList={sortedImageList}
+            imageRatings={imageRatings}
+            importState={importState}
+            indexingProgress={indexingProgress}
+            isIndexing={isIndexing}
+            isThumbnailsLoading={isThumbnailsLoading}
+            isLoading={isViewLoading}
+            isTreeLoading={isTreeLoading}
+            libraryScrollTop={libraryScrollTop}
+            libraryViewMode={libraryViewMode}
+            multiSelectedPaths={multiSelectedPaths}
+            onClearSelection={handleClearSelection}
+            onContextMenu={handleThumbnailContextMenu}
+            onContinueSession={handleContinueSession}
+            onEmptyAreaContextMenu={handleMainLibraryContextMenu}
+            onGoHome={handleGoHome}
+            onImageClick={handleLibraryImageSingleClick}
+            onImageDoubleClick={handleImageSelect}
+            onLibraryRefresh={handleLibraryRefresh}
+            onOpenFolder={handleOpenFolder}
+            onSettingsChange={handleSettingsChange}
+            onThumbnailAspectRatioChange={setThumbnailAspectRatio}
+            onThumbnailSizeChange={setThumbnailSize}
+            rootPath={rootPath}
+            searchCriteria={searchCriteria}
+            setFilterCriteria={setFilterCriteria}
+            setLibraryScrollTop={setLibraryScrollTop}
+            setLibraryViewMode={setLibraryViewMode}
+            setSearchCriteria={setSearchCriteria}
+            setSortCriteria={setSortCriteria}
+            sortCriteria={sortCriteria}
+            theme={theme}
+            thumbnailAspectRatio={thumbnailAspectRatio}
+            thumbnails={thumbnails}
+            thumbnailSize={thumbnailSize}
+            onNavigateToCommunity={() => setActiveView('community')}
+          />
+        )}
+        {rootPath && (
+          <BottomBar
+            isCopied={isCopied}
+            isCopyDisabled={multiSelectedPaths.length !== 1}
+            isExportDisabled={multiSelectedPaths.length === 0}
+            isLibraryView={true}
+            isPasted={isPasted}
+            isPasteDisabled={copiedAdjustments === null || multiSelectedPaths.length === 0}
+            isRatingDisabled={multiSelectedPaths.length === 0}
+            isResetDisabled={multiSelectedPaths.length === 0}
+            multiSelectedPaths={multiSelectedPaths}
+            onCopy={handleCopyAdjustments}
+            onExportClick={() => setIsLibraryExportPanelVisible((prev) => !prev)}
+            onOpenCopyPasteSettings={() => setIsCopyPasteSettingsModalOpen(true)}
+            onPaste={() => handlePasteAdjustments()}
+            onRate={handleRate}
+            onReset={() => handleResetAdjustments()}
+            rating={libraryActiveAdjustments.rating || 0}
+            thumbnailAspectRatio={thumbnailAspectRatio}
+            totalImages={imageList.length}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
 const AppWrapper = () => (
-  <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
-    <ContextMenuProvider>
-      <App />
-      <GlobalTooltip />
-    </ContextMenuProvider>
-  </ClerkProvider>
+  <ContextProviders>
+    <App />
+    <GlobalTooltip />
+  </ContextProviders>
 );
 
 export default AppWrapper;
diff --git a/src/context/ContextProviders.tsx b/src/context/ContextProviders.tsx
new file mode 100644
index 000000000..850642a8c
--- /dev/null
+++ b/src/context/ContextProviders.tsx
@@ -0,0 +1,331 @@
+import { createContext, PropsWithChildren, useContext, useMemo, useRef, useState } from 'react';
+import { ContextMenuProvider } from './ContextMenuContext';
+import { ClerkProvider } from '@clerk/clerk-react';
+import { CLERK_PUBLISHABLE_KEY } from '../utils/constants';
+import {
+  AppSettings,
+  BrushSettings,
+  FilterCriteria,
+  ImageFile,
+  LibraryViewMode,
+  Panel,
+  Progress,
+  RawStatus,
+  SortCriteria,
+  SortDirection,
+  SupportedTypes,
+  Theme,
+  ThumbnailAspectRatio,
+  ThumbnailSize,
+  UiVisibility,
+  WaveformData,
+} from '../components/ui/AppProperties';
+import { useSelectedImage } from './state/SelectedImageContext';
+import { Adjustments, INITIAL_ADJUSTMENTS, MaskContainer } from '../utils/adjustments';
+import { ChannelConfig } from '../components/adjustments/Curves';
+import { DEFAULT_THEME_ID } from '../utils/themes';
+import { ImageDimensions } from '../hooks/useImageRenderSize';
+import { OverlayMode } from '../components/panel/right/CropPanel';
+import {
+  CollageModalState,
+  CollapsibleSectionsState,
+  ConfirmModalState,
+  CullingModalState,
+  DenoiseModalState,
+  HdrModalState,
+  NegativeConversionModalState,
+  PanoramaModalState,
+  SearchCriteria,
+} from '../App';
+import { ToolType } from '../components/panel/right/Masks';
+import { useHistoryState } from '../hooks/useHistoryState';
+import { ExportState, ImportState, Status } from '../components/ui/ExportImportProperties';
+
+export function ContextProviders({ children }: PropsWithChildren) {
+  return (
+    <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
+      <AppStateContextProvider>
+        <ContextMenuProvider>{children}</ContextMenuProvider>
+      </AppStateContextProvider>
+    </ClerkProvider>
+  );
+}
+
+const AppStateContext = createContext<ReturnType<typeof createAppStateContext> | null>(null);
+
+function AppStateContextProvider({ children }: PropsWithChildren) {
+  return <AppStateContext.Provider value={createAppStateContext()}>{children}</AppStateContext.Provider>;
+}
+
+export function useAppState() {
+  const ctx = useContext(AppStateContext);
+
+  if (!ctx) {
+    throw new Error(`${useAppState.name} must be used within a ${AppStateContextProvider.name}`);
+  }
+
+  return ctx;
+}
+
+function createAppStateContext() {
+  const refs = {
+    dragIdleTimer: useRef<ReturnType<typeof setTimeout> | null>(null),
+    isInitialThemeMount: useRef(true),
+    fullResCacheKeyRef: useRef<string | null>(null),
+    patchesSentToBackend: useRef<Set<string>>(new Set()),
+    transformWrapperRef: useRef<any>(null),
+    isProgrammaticZoom: useRef(false),
+    isInitialMount: useRef(true),
+    preloadedDataRef: useRef<{
+      tree?: Promise<any>;
+      images?: Promise<ImageFile[]>;
+      rootPath?: string;
+      currentPath?: string;
+    }>({}),
+    previewJobIdRef: useRef<number>(0),
+    latestRenderedJobIdRef: useRef<number>(0),
+  };
+
+  const state = {
+    ...useSelectedImage(),
+    history: useHistoryState(INITIAL_ADJUSTMENTS),
+    ...useContextState<AppSettings>()('appSettings'),
+    ...useContextState<string | null>()('rootPath'),
+    ...useContextState<string>()('activeView', 'library'),
+    ...useContextState<boolean>()('isWindowFullScreen', false),
+    ...useContextState<boolean>()('isLayoutReady', false),
+    ...useContextState<string>()('currentFolderPath'),
+    ...useContextState<Set<string>>()('expandedFolders', new Set()),
+    ...useContextState<any>()('folderTree'),
+    ...useContextState<any[]>()('pinnedFolderTrees', []),
+    ...useContextState<Array<ImageFile>>()('imageList', []),
+    ...useContextState<Record<string, number>>()('imageRatings', {}),
+    ...useContextState<SortCriteria>()('sortCriteria', { key: 'name', order: SortDirection.Ascending }),
+    ...useContextState<FilterCriteria>()('filterCriteria', {
+      colors: [],
+      rating: 0,
+      rawStatus: RawStatus.All,
+    }),
+    ...useContextState<SupportedTypes | null>()('supportedTypes'),
+    ...useContextState<Array<string>>()('multiSelectedPaths', []),
+    ...useContextState<string | null>()('libraryActivePath'),
+    ...useContextState<Adjustments>()('libraryActiveAdjustments', INITIAL_ADJUSTMENTS),
+    ...useContextState<string | null>()('finalPreviewUrl'),
+    ...useContextState<string | null>()('uncroppedAdjustedPreviewUrl'),
+    ...useContextState<Adjustments>()('adjustments', INITIAL_ADJUSTMENTS),
+    ...useContextState<boolean>()('showOriginal', false),
+    ...useContextState<boolean>()('isTreeLoading', false),
+    ...useContextState<boolean>()('isViewLoading', false),
+    ...useContextState<string | null>()('initialFileToOpen'),
+    ...useContextState<string | null>()('error'),
+    ...useContextState<ChannelConfig | null>()('histogram'),
+    ...useContextState<WaveformData | null>()('waveform'),
+    ...useContextState<boolean>()('isWaveformVisible', false),
+    ...useContextState<UiVisibility>()('uiVisibility', {
+      folderTree: true,
+      filmstrip: true,
+    }),
+    ...useContextState<boolean>()('isSliderDragging', false),
+    ...useContextState<boolean>()('isFullScreen', false),
+    ...useContextState<boolean>()('isHighResNeeded', false),
+    ...useContextState<boolean>()('isAnimatingTheme', false),
+    ...useContextState<Theme>()('theme', DEFAULT_THEME_ID),
+    ...useContextState<any>()('adaptivePalette'),
+    ...useContextState<Panel | null>()('activeRightPanel', Panel.Adjustments),
+    ...useContextState<number>()('slideDirection', 1),
+    ...useContextState<string | null>()('activeMaskContainerId'),
+    ...useContextState<string | null>()('activeMaskId'),
+    ...useContextState<string | null>()('activeAiPatchContainerId'),
+    ...useContextState<string | null>()('activeAiSubMaskId'),
+    ...useContextState<number>()('zoom', 1),
+    ...useContextState<ImageDimensions>()('displaySize', { width: 0, height: 0 }),
+    ...useContextState<ImageDimensions>()('previewSize', { width: 0, height: 0 }),
+    ...useContextState<ImageDimensions>()('baseRenderSize', { width: 0, height: 0 }),
+    ...useContextState<ImageDimensions>()('originalSize', { width: 0, height: 0 }),
+    ...useContextState<boolean>()('isLoadingFullRes', false),
+    ...useContextState<boolean>()('isRotationActive', false),
+    ...useContextState<OverlayMode>()('overlayMode', 'thirds'),
+    ...useContextState<number>()('overlayRotation', 0),
+    ...useContextState<string | null>()('transformedOriginalUrl'),
+    ...useContextState<number | null>()('initialFitScale'),
+    ...useContextState<CollapsibleSectionsState>()('collapsibleSectionsState', {
+      basic: true,
+      color: false,
+      curves: true,
+      details: false,
+      effects: false,
+    }),
+    ...useContextState<boolean>()('isLibraryExportPanelVisible', false),
+    ...useContextState<LibraryViewMode>()('libraryViewMode', LibraryViewMode.Flat),
+    ...useContextState<number>()('leftPanelWidth', 256),
+    ...useContextState<number>()('rightPanelWidth', 320),
+    ...useContextState<number>()('bottomPanelHeight', 144),
+    ...useContextState<string | null>()('activeTreeSection', 'current'),
+    ...useContextState<boolean>()('isResizing', false),
+    ...useContextState<ThumbnailSize>()('thumbnailSize', ThumbnailSize.Medium),
+    ...useContextState<ThumbnailAspectRatio>()('thumbnailAspectRatio', ThumbnailAspectRatio.Cover),
+    ...useContextState<Adjustments | null>()('copiedAdjustments', null),
+    ...useContextState<boolean>()('isStraightenActive', false),
+    ...useContextState<boolean>()('isWbPickerActive', false),
+    ...useContextState<Array<string>>()('copiedFilePaths', []),
+    ...useContextState<string | null>()('aiModelDownloadStatus'),
+    ...useContextState<Adjustments | null>()('copiedSectionAdjustments'),
+    ...useContextState<MaskContainer | null>()('copiedMask'),
+    ...useContextState<boolean>()('isCopied', false),
+    ...useContextState<boolean>()('isPasted', false),
+    ...useContextState<boolean>()('isIndexing', false),
+    ...useContextState<Progress>()('indexingProgress', { current: 0, total: 0 }),
+    ...useContextState<SearchCriteria>()('searchCriteria', {
+      tags: [],
+      text: '',
+      mode: 'OR',
+    }),
+    ...useContextState<BrushSettings | null>()('brushSettings', {
+      size: 50,
+      feather: 50,
+      tool: ToolType.Brush,
+    }),
+    ...useContextState<boolean>()('isCreateFolderModalOpen', false),
+    ...useContextState<boolean>()('isRenameFolderModalOpen', false),
+    ...useContextState<boolean>()('isRenameFileModalOpen', false),
+    ...useContextState<Array<string>>()('renameTargetPaths', []),
+    ...useContextState<boolean>()('isImportModalOpen', false),
+    ...useContextState<boolean>()('isCopyPasteSettingsModalOpen', false),
+    ...useContextState<string | null>()('importTargetFolder'),
+    ...useContextState<Array<string>>()('importSourcePaths', []),
+    ...useContextState<string | null>()('folderActionTarget'),
+    ...useContextState<ConfirmModalState>()('confirmModalState', { isOpen: false }),
+    ...useContextState<PanoramaModalState>()('panoramaModalState', {
+      error: null,
+      finalImageBase64: null,
+      isOpen: false,
+      progressMessage: '',
+      stitchingSourcePaths: [],
+    }),
+    ...useContextState<HdrModalState>()('hdrModalState', {
+      error: null,
+      finalImageBase64: null,
+      isOpen: false,
+      progressMessage: '',
+      stitchingSourcePaths: [],
+    }),
+    ...useContextState<NegativeConversionModalState>()('negativeModalState', {
+      isOpen: false,
+      targetPath: null,
+    }),
+    ...useContextState<DenoiseModalState>()('denoiseModalState', {
+      isOpen: false,
+      isProcessing: false,
+      previewBase64: null,
+      error: null,
+      targetPath: null,
+      progressMessage: null,
+    }),
+    ...useContextState<CullingModalState>()('cullingModalState', {
+      isOpen: false,
+      suggestions: null,
+      progress: null,
+      error: null,
+      pathsToCull: [],
+    }),
+    ...useContextState<CollageModalState>()('collageModalState', {
+      isOpen: false,
+      sourceImages: [],
+    }),
+    ...useContextState<null>()('customEscapeHandler'),
+    ...useContextState<boolean>()('isGeneratingAiMask', false),
+    ...useContextState<boolean>()('isAIConnectorConnected', false),
+    ...useContextState<boolean>()('isGeneratingAi', false),
+    ...useContextState<boolean>()('isMaskControlHovered', false),
+    ...useContextState<number>()('libraryScrollTop', 0),
+    ...useContextState<Record<string, string>>()('thumbnails', {}),
+    ...useContextState<ExportState>()('exportState', {
+      errorMessage: '',
+      progress: { current: 0, total: 0 },
+      status: Status.Idle,
+    }),
+    ...useContextState<ImportState>()('importState', {
+      errorMessage: '',
+      path: '',
+      progress: { current: 0, total: 0 },
+      status: Status.Idle,
+    }),
+  };
+
+  const {
+    activeRightPanel,
+    theme,
+    adjustments,
+    appSettings,
+    isCreateFolderModalOpen,
+    isRenameFolderModalOpen,
+    isRenameFileModalOpen,
+    isImportModalOpen,
+    isCopyPasteSettingsModalOpen,
+    confirmModalState,
+    panoramaModalState,
+    cullingModalState,
+    collageModalState,
+    denoiseModalState,
+    negativeModalState,
+  } = state;
+
+  const dependants = {
+    ...useContextState<Panel | null>()('renderedRightPanel', activeRightPanel),
+    currentFolderPathRef: useRef<string>(state.currentFolderPath),
+    isLightTheme: useMemo(() => [Theme.Light, Theme.Snow, Theme.Arctic].includes(theme as Theme), [theme]),
+    geometricAdjustmentsKey: useMemo(() => {
+      if (!adjustments) return '';
+      const { crop, rotation, flipHorizontal, flipVertical, orientationSteps } = adjustments;
+      return JSON.stringify({ crop, rotation, flipHorizontal, flipVertical, orientationSteps });
+    }, [
+      adjustments?.crop,
+      adjustments?.rotation,
+      adjustments?.flipHorizontal,
+      adjustments?.flipVertical,
+      adjustments?.orientationSteps,
+    ]),
+    visualAdjustmentsKey: useMemo(() => {
+      if (!adjustments) return '';
+      const { rating: _rating, sectionVisibility: _sectionVisibility, ...visualAdjustments } = adjustments;
+      return JSON.stringify(visualAdjustments);
+    }, [adjustments]),
+    pinnedFolders: useMemo(() => appSettings?.pinnedFolders || [], [appSettings]),
+    isAnyModalOpen:
+      isCreateFolderModalOpen ||
+      isRenameFolderModalOpen ||
+      isRenameFileModalOpen ||
+      isImportModalOpen ||
+      isCopyPasteSettingsModalOpen ||
+      confirmModalState.isOpen ||
+      panoramaModalState.isOpen ||
+      cullingModalState.isOpen ||
+      collageModalState.isOpen ||
+      denoiseModalState.isOpen ||
+      negativeModalState.isOpen,
+  };
+
+  return {
+    ...refs,
+    ...state,
+    ...dependants,
+  };
+}
+
+type ContextStateObj<ValueName extends string, T> = {
+  [K in ValueName]: T;
+} & {
+  [K in `set${Capitalize<ValueName>}`]: React.Dispatch<React.SetStateAction<T>>;
+};
+
+function useContextState<T>() {
+  function create<ValueName extends string>(valueName: ValueName, defaultValue?: T) {
+    const [value, setter] = useState<T | null>(defaultValue === undefined ? null : defaultValue);
+
+    const setterName = 'set' + valueName.charAt(0).toUpperCase() + valueName.slice(1);
+
+    return { [valueName]: value, [setterName]: setter } as ContextStateObj<ValueName, T>;
+  }
+
+  return create;
+}
diff --git a/src/context/state/SelectedImageContext.tsx b/src/context/state/SelectedImageContext.tsx
new file mode 100644
index 000000000..55b8fcc80
--- /dev/null
+++ b/src/context/state/SelectedImageContext.tsx
@@ -0,0 +1,27 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  RefObject,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { SelectedImage } from '../../components/ui/AppProperties';
+
+export interface SelectedImageContext {
+  selectedImage: SelectedImage | null;
+  selectedImagePathRef: RefObject<string | null>;
+  setSelectedImage: React.Dispatch<SetStateAction<SelectedImage | null>>;
+}
+
+export function useSelectedImage() {
+  const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
+  const selectedImagePathRef = useRef<string | null>(null);
+  useEffect(() => {
+    selectedImagePathRef.current = selectedImage?.path ?? null;
+  }, [selectedImage?.path]);
+
+  return { selectedImage, setSelectedImage, selectedImagePathRef };
+}
diff --git a/src/hooks/handlers/useApplyAdjustments.ts b/src/hooks/handlers/useApplyAdjustments.ts
new file mode 100644
index 000000000..6ba883206
--- /dev/null
+++ b/src/hooks/handlers/useApplyAdjustments.ts
@@ -0,0 +1,82 @@
+import { useCallback } from 'react';
+import { Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { invoke } from '@tauri-apps/api/core';
+import { Invokes } from '../../components/ui/AppProperties';
+
+export function useApplyAdjustments() {
+  const {
+    selectedImage,
+    patchesSentToBackend,
+    previewJobIdRef,
+    selectedImagePathRef,
+    latestRenderedJobIdRef,
+    setFinalPreviewUrl,
+  } = useAppState();
+
+  const applyAdjustments = useCallback(
+    async (currentAdjustments: Adjustments, dragging: boolean = false) => {
+      if (!selectedImage?.isReady) return;
+      const currentPath = selectedImage.path;
+
+      const payload = JSON.parse(JSON.stringify(currentAdjustments));
+
+      if (payload.aiPatches && Array.isArray(payload.aiPatches)) {
+        payload.aiPatches.forEach((p: any) => {
+          if (p.id && p.patchData && !p.isLoading) {
+            if (patchesSentToBackend.current.has(p.id)) {
+              p.patchData = null;
+            } else {
+              patchesSentToBackend.current.add(p.id);
+            }
+          }
+        });
+      }
+
+      if (payload.masks && Array.isArray(payload.masks)) {
+        payload.masks.forEach((container: any) => {
+          if (container.subMasks && Array.isArray(container.subMasks)) {
+            container.subMasks.forEach((sm: any) => {
+              if (sm.id && sm.parameters && sm.parameters.mask_data_base64) {
+                if (patchesSentToBackend.current.has(sm.id)) {
+                  sm.parameters.mask_data_base64 = null;
+                } else {
+                  patchesSentToBackend.current.add(sm.id);
+                }
+              }
+            });
+          }
+        });
+      }
+
+      const jobId = ++previewJobIdRef.current;
+
+      try {
+        const buffer: ArrayBuffer = await invoke(Invokes.ApplyAdjustments, {
+          jsAdjustments: payload,
+          isInteractive: dragging,
+        });
+
+        if (currentPath !== selectedImagePathRef.current) return;
+
+        if (buffer && buffer.byteLength > 0 && jobId >= latestRenderedJobIdRef.current) {
+          latestRenderedJobIdRef.current = jobId;
+          const blob = new Blob([buffer], { type: 'image/jpeg' });
+          const url = URL.createObjectURL(blob);
+
+          setFinalPreviewUrl((prevUrl) => {
+            if (prevUrl && prevUrl.startsWith('blob:')) URL.revokeObjectURL(prevUrl);
+            return url;
+          });
+        }
+      } catch (err) {
+        if (err !== 'Superseded or worker failed') {
+          console.error('Failed to apply adjustments:', err);
+        }
+      }
+    },
+    [selectedImage?.isReady, selectedImage?.path],
+  );
+
+  return applyAdjustments;
+}
diff --git a/src/hooks/handlers/useCloseConfirmModal.ts b/src/hooks/handlers/useCloseConfirmModal.ts
new file mode 100644
index 000000000..ba22badde
--- /dev/null
+++ b/src/hooks/handlers/useCloseConfirmModal.ts
@@ -0,0 +1,8 @@
+import { useAppState } from '../../context/ContextProviders';
+
+export function useCloseConfirmModal() {
+  const { confirmModalState, setConfirmModalState } = useAppState();
+
+  const closeConfirmModal = () => setConfirmModalState({ ...confirmModalState, isOpen: false });
+  return closeConfirmModal;
+}
diff --git a/src/hooks/handlers/useCreateResizeHandler.ts b/src/hooks/handlers/useCreateResizeHandler.ts
new file mode 100644
index 000000000..187aa64cb
--- /dev/null
+++ b/src/hooks/handlers/useCreateResizeHandler.ts
@@ -0,0 +1,32 @@
+import { useAppState } from '../../context/ContextProviders';
+
+export function useCreateResizeHandler() {
+  const { setIsResizing, setLeftPanelWidth, setRightPanelWidth, setBottomPanelHeight } = useAppState();
+
+  const createResizeHandler = (setter: any, startSize: number) => (e: any) => {
+    e.preventDefault();
+    setIsResizing(true);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const doDrag = (moveEvent: any) => {
+      if (setter === setLeftPanelWidth) {
+        setter(Math.max(200, Math.min(startSize + (moveEvent.clientX - startX), 500)));
+      } else if (setter === setRightPanelWidth) {
+        setter(Math.max(280, Math.min(startSize - (moveEvent.clientX - startX), 600)));
+      } else if (setter === setBottomPanelHeight) {
+        setter(Math.max(100, Math.min(startSize - (moveEvent.clientY - startY), 400)));
+      }
+    };
+    const stopDrag = () => {
+      document.documentElement.style.cursor = '';
+      window.removeEventListener('mousemove', doDrag);
+      window.removeEventListener('mouseup', stopDrag);
+      setIsResizing(false);
+    };
+    document.documentElement.style.cursor = setter === setBottomPanelHeight ? 'row-resize' : 'col-resize';
+    window.addEventListener('mousemove', doDrag);
+    window.addEventListener('mouseup', stopDrag);
+  };
+
+  return createResizeHandler;
+}
diff --git a/src/hooks/handlers/useDebounce.ts b/src/hooks/handlers/useDebounce.ts
new file mode 100644
index 000000000..b50fef1a3
--- /dev/null
+++ b/src/hooks/handlers/useDebounce.ts
@@ -0,0 +1,20 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import debounce from 'lodash.debounce';
+
+export function useDebouncedSave() {
+  const { setError } = useAppState();
+  const debouncedSave = useCallback(
+    debounce((path, adjustmentsToSave) => {
+      invoke(Invokes.SaveMetadataAndUpdateThumbnail, { path, adjustments: adjustmentsToSave }).catch((err) => {
+        console.error('Auto-save failed:', err);
+        setError(`Failed to save changes: ${err}`);
+      });
+    }, 300),
+    [],
+  );
+
+  return debouncedSave;
+}
diff --git a/src/hooks/handlers/useDebouncedSetHistory.ts b/src/hooks/handlers/useDebouncedSetHistory.ts
new file mode 100644
index 000000000..fe9207c0b
--- /dev/null
+++ b/src/hooks/handlers/useDebouncedSetHistory.ts
@@ -0,0 +1,15 @@
+import debounce from 'lodash.debounce';
+import { useMemo } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useDebouncedSetHistory() {
+  const { history } = useAppState();
+  const { setState: setHistoryAdjustments } = history;
+
+  const debouncedSetHistory = useMemo(
+    () => debounce((newAdjustments) => setHistoryAdjustments(newAdjustments), 300),
+    [setHistoryAdjustments],
+  );
+
+  return debouncedSetHistory;
+}
diff --git a/src/hooks/handlers/useExecuteDelete.ts b/src/hooks/handlers/useExecuteDelete.ts
new file mode 100644
index 000000000..e3d7b62cc
--- /dev/null
+++ b/src/hooks/handlers/useExecuteDelete.ts
@@ -0,0 +1,89 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useSortedImageList } from '../useSortedImageList';
+import { invoke } from '@tauri-apps/api/core';
+import { useRefreshImageList } from './useRefreshImageList';
+import { useHandleImageSelect } from './useHandleImageSelect';
+import { useHandleBackToLibrary } from './useHandleBackToLibrary';
+
+export function useExecuteDelete() {
+  const { selectedImage, libraryActivePath, setMultiSelectedPaths, setLibraryActivePath, setError } = useAppState();
+  const { sortedImageList } = useSortedImageList();
+  const refreshImageList = useRefreshImageList();
+  const handleImageSelect = useHandleImageSelect();
+  const handleBackToLibrary = useHandleBackToLibrary();
+
+  const executeDelete = useCallback(
+    async (pathsToDelete: Array<string>, options = { includeAssociated: false }) => {
+      if (!pathsToDelete || pathsToDelete.length === 0) {
+        return;
+      }
+
+      const activePath = selectedImage ? selectedImage.path : libraryActivePath;
+      let nextImagePath: string | null = null;
+
+      if (activePath) {
+        const physicalPath = activePath.split('?vc=')[0];
+        const isActiveImageDeleted = pathsToDelete.some((p) => p === activePath || p === physicalPath);
+
+        if (isActiveImageDeleted) {
+          const currentIndex = sortedImageList.findIndex((img) => img.path === activePath);
+          if (currentIndex !== -1) {
+            const nextCandidate = sortedImageList
+              .slice(currentIndex + 1)
+              .find((img) => !pathsToDelete.includes(img.path));
+
+            if (nextCandidate) {
+              nextImagePath = nextCandidate.path;
+            } else {
+              const prevCandidate = sortedImageList
+                .slice(0, currentIndex)
+                .reverse()
+                .find((img) => !pathsToDelete.includes(img.path));
+
+              if (prevCandidate) {
+                nextImagePath = prevCandidate.path;
+              }
+            }
+          }
+        } else {
+          nextImagePath = activePath;
+        }
+      }
+
+      try {
+        const command = options.includeAssociated ? 'delete_files_with_associated' : 'delete_files_from_disk';
+        await invoke(command, { paths: pathsToDelete });
+
+        await refreshImageList();
+
+        if (selectedImage) {
+          const physicalPath = selectedImage.path.split('?vc=')[0];
+          const isFileBeingEditedDeleted = pathsToDelete.some((p) => p === selectedImage.path || p === physicalPath);
+
+          if (isFileBeingEditedDeleted) {
+            if (nextImagePath) {
+              handleImageSelect(nextImagePath);
+            } else {
+              handleBackToLibrary();
+            }
+          }
+        } else {
+          if (nextImagePath) {
+            setMultiSelectedPaths([nextImagePath]);
+            setLibraryActivePath(nextImagePath);
+          } else {
+            setMultiSelectedPaths([]);
+            setLibraryActivePath(null);
+          }
+        }
+      } catch (err) {
+        console.error('Failed to delete files:', err);
+        setError(`Failed to delete files: ${err}`);
+      }
+    },
+    [refreshImageList, selectedImage, handleBackToLibrary, libraryActivePath, sortedImageList, handleImageSelect],
+  );
+
+  return executeDelete;
+}
diff --git a/src/hooks/handlers/useGenerateUncroppedPreview.ts b/src/hooks/handlers/useGenerateUncroppedPreview.ts
new file mode 100644
index 000000000..deabc4aa5
--- /dev/null
+++ b/src/hooks/handlers/useGenerateUncroppedPreview.ts
@@ -0,0 +1,23 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useGenerateUncroppedPreview() {
+  const { selectedImage } = useAppState();
+
+  const generateUncroppedPreview = useCallback(
+    (currentAdjustments: Adjustments) => {
+      if (!selectedImage?.isReady) {
+        return;
+      }
+      invoke(Invokes.GenerateUncroppedPreview, { jsAdjustments: currentAdjustments }).catch((err) =>
+        console.error('Failed to generate uncropped preview:', err),
+      );
+    },
+    [selectedImage?.isReady],
+  );
+
+  return generateUncroppedPreview;
+}
diff --git a/src/hooks/handlers/useGetCommonTags.ts b/src/hooks/handlers/useGetCommonTags.ts
new file mode 100644
index 000000000..ae22e15d2
--- /dev/null
+++ b/src/hooks/handlers/useGetCommonTags.ts
@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useGetCommonTags() {
+  const { imageList } = useAppState();
+
+  const getCommonTags = useCallback(
+    (paths: string[]): { tag: string; isUser: boolean }[] => {
+      if (paths.length === 0) return [];
+      const imageFiles = imageList.filter((img) => paths.includes(img.path));
+      if (imageFiles.length === 0) return [];
+
+      const allTagsSets = imageFiles.map((img) => {
+        const tagsWithPrefix = (img.tags || []).filter((t) => !t.startsWith('color:'));
+        return new Set(tagsWithPrefix);
+      });
+
+      if (allTagsSets.length === 0) return [];
+
+      const commonTagsWithPrefix = allTagsSets.reduce((intersection, currentSet) => {
+        return new Set([...intersection].filter((tag) => currentSet.has(tag)));
+      });
+
+      return Array.from(commonTagsWithPrefix)
+        .map((tag) => ({
+          tag: tag.startsWith('user:') ? tag.substring(5) : tag,
+          isUser: tag.startsWith('user:'),
+        }))
+        .sort((a, b) => a.tag.localeCompare(b.tag));
+    },
+    [imageList],
+  );
+
+  return getCommonTags;
+}
diff --git a/src/hooks/handlers/useHandleActiveTreeSectionChange.ts b/src/hooks/handlers/useHandleActiveTreeSectionChange.ts
new file mode 100644
index 000000000..3bc3cd70d
--- /dev/null
+++ b/src/hooks/handlers/useHandleActiveTreeSectionChange.ts
@@ -0,0 +1,16 @@
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleSettingsChange } from './useHandleSettingsChange';
+
+export function useHandleActiveTreeSectionChange() {
+  const { setActiveTreeSection, appSettings } = useAppState();
+  const handleSettingsChange = useHandleSettingsChange();
+
+  const handleActiveTreeSectionChange = (section: string | null) => {
+    setActiveTreeSection(section);
+    if (appSettings) {
+      handleSettingsChange({ ...appSettings, activeTreeSection: section });
+    }
+  };
+
+  return handleActiveTreeSectionChange;
+}
diff --git a/src/hooks/handlers/useHandleApplyDenoise.ts b/src/hooks/handlers/useHandleApplyDenoise.ts
new file mode 100644
index 000000000..d28fafe6f
--- /dev/null
+++ b/src/hooks/handlers/useHandleApplyDenoise.ts
@@ -0,0 +1,37 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleApplyDenoise() {
+  const { denoiseModalState, setDenoiseModalState } = useAppState();
+
+  const handleApplyDenoise = useCallback(
+    async (intensity: number) => {
+      if (!denoiseModalState.targetPath) return;
+
+      setDenoiseModalState((prev) => ({
+        ...prev,
+        isProcessing: true,
+        error: null,
+        progressMessage: 'Starting engine...',
+      }));
+
+      try {
+        await invoke(Invokes.ApplyDenoising, {
+          path: denoiseModalState.targetPath,
+          intensity: intensity,
+        });
+      } catch (err) {
+        setDenoiseModalState((prev) => ({
+          ...prev,
+          isProcessing: false,
+          error: String(err),
+        }));
+      }
+    },
+    [denoiseModalState.targetPath],
+  );
+
+  return handleApplyDenoise;
+}
diff --git a/src/hooks/handlers/useHandleAutoAdjustments.ts b/src/hooks/handlers/useHandleAutoAdjustments.ts
new file mode 100644
index 000000000..088e02505
--- /dev/null
+++ b/src/hooks/handlers/useHandleAutoAdjustments.ts
@@ -0,0 +1,33 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { Adjustments } from '../../utils/adjustments';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandleAutoAdjustments() {
+  const { selectedImage, setError } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleAutoAdjustments = async () => {
+    if (!selectedImage) {
+      return;
+    }
+    try {
+      const autoAdjustments: Adjustments = await invoke(Invokes.CalculateAutoAdjustments);
+      setAdjustments((prev: Adjustments) => {
+        const newAdjustments = { ...prev, ...autoAdjustments };
+        newAdjustments.sectionVisibility = {
+          ...prev.sectionVisibility,
+          ...autoAdjustments.sectionVisibility,
+        };
+
+        return newAdjustments;
+      });
+    } catch (err) {
+      console.error('Failed to calculate auto adjustments:', err);
+      setError(`Failed to apply auto adjustments: ${err}`);
+    }
+  };
+
+  return handleAutoAdjustments;
+}
diff --git a/src/hooks/handlers/useHandleBackToLibrary.ts b/src/hooks/handlers/useHandleBackToLibrary.ts
new file mode 100644
index 000000000..d621e410a
--- /dev/null
+++ b/src/hooks/handlers/useHandleBackToLibrary.ts
@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+
+export function useHandleBackToLibrary() {
+  const {
+    selectedImage,
+    setSelectedImage,
+    setFinalPreviewUrl,
+    setUncroppedAdjustedPreviewUrl,
+    setHistogram,
+    setWaveform,
+    setIsWaveformVisible,
+    setActiveMaskId,
+    setActiveMaskContainerId,
+    setActiveAiPatchContainerId,
+    setIsWbPickerActive,
+    setActiveAiSubMaskId,
+    setLibraryActivePath,
+    setSlideDirection,
+    setAdjustments,
+    history,
+  } = useAppState();
+
+  const { resetHistory } = history;
+
+  const handleBackToLibrary = useCallback(() => {
+    const lastActivePath = selectedImage?.path ?? null;
+    setSelectedImage(null);
+    setFinalPreviewUrl(null);
+    setUncroppedAdjustedPreviewUrl(null);
+    setHistogram(null);
+    setWaveform(null);
+    setIsWaveformVisible(false);
+    setActiveMaskId(null);
+    setActiveMaskContainerId(null);
+    setActiveAiPatchContainerId(null);
+    setIsWbPickerActive(false);
+    setActiveAiSubMaskId(null);
+    setLibraryActivePath(lastActivePath);
+    setSlideDirection(1);
+    setAdjustments(INITIAL_ADJUSTMENTS);
+    resetHistory(INITIAL_ADJUSTMENTS);
+  }, [selectedImage?.path]);
+
+  return handleBackToLibrary;
+}
diff --git a/src/hooks/handlers/useHandleClearSelection.ts b/src/hooks/handlers/useHandleClearSelection.ts
new file mode 100644
index 000000000..0df29edd9
--- /dev/null
+++ b/src/hooks/handlers/useHandleClearSelection.ts
@@ -0,0 +1,16 @@
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleClearSelection() {
+  const { selectedImage, setMultiSelectedPaths, setLibraryActivePath } = useAppState();
+
+  const handleClearSelection = () => {
+    if (selectedImage) {
+      setMultiSelectedPaths([selectedImage.path]);
+    } else {
+      setMultiSelectedPaths([]);
+      setLibraryActivePath(null);
+    }
+  };
+
+  return handleClearSelection;
+}
diff --git a/src/hooks/handlers/useHandleContinueSession.ts b/src/hooks/handlers/useHandleContinueSession.ts
new file mode 100644
index 000000000..f56293606
--- /dev/null
+++ b/src/hooks/handlers/useHandleContinueSession.ts
@@ -0,0 +1,76 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Invokes, ImageFile } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleSelectSubfolder } from './useHandleSelectSubfolder';
+import { useHandleSettingsChange } from './useHandleSettingsChange';
+import { useHandleGoHome } from './useHandleGoHome';
+
+export function useHandleContinueSession() {
+  const { appSettings, setRootPath, setExpandedFolders, setIsTreeLoading, preloadedDataRef, setFolderTree, setError } =
+    useAppState();
+
+  const handleSelectSubfolder = useHandleSelectSubfolder();
+  const handleSettingsChange = useHandleSettingsChange();
+  const handleGoHome = useHandleGoHome();
+
+  const handleContinueSession = () => {
+    const restore = async () => {
+      if (!appSettings?.lastRootPath) {
+        return;
+      }
+
+      const root = appSettings.lastRootPath;
+      const folderState = appSettings.lastFolderState;
+      const pathToSelect = folderState?.currentFolderPath || root;
+
+      setRootPath(root);
+
+      if (folderState?.expandedFolders) {
+        const newExpandedFolders = new Set(folderState.expandedFolders);
+        newExpandedFolders.add(root);
+        setExpandedFolders(newExpandedFolders);
+      } else {
+        setExpandedFolders(new Set([root]));
+      }
+
+      setIsTreeLoading(true);
+      try {
+        let treeData;
+        if (preloadedDataRef.current.rootPath === root && preloadedDataRef.current.tree) {
+          treeData = await preloadedDataRef.current.tree;
+          console.log('Preload cache hit for folder tree.');
+        } else {
+          treeData = await invoke(Invokes.GetFolderTree, { path: root });
+        }
+        setFolderTree(treeData);
+      } catch (err) {
+        console.error('Failed to restore folder tree:', err);
+      } finally {
+        setIsTreeLoading(false);
+      }
+
+      let preloadedImages: ImageFile[] | undefined = undefined;
+      if (preloadedDataRef.current.currentPath === pathToSelect && preloadedDataRef.current.images) {
+        try {
+          preloadedImages = await preloadedDataRef.current.images;
+          console.log('Preload cache hit for image list.');
+        } catch (e) {
+          console.error('Failed to retrieve preloaded images', e);
+        }
+      }
+
+      await handleSelectSubfolder(pathToSelect, false, preloadedImages);
+    };
+    restore().catch((err) => {
+      console.error('Failed to restore session, folder might be missing:', err);
+      setError('Failed to restore session. The last used folder may have been moved or deleted.');
+      if (appSettings) {
+        handleSettingsChange({ ...appSettings, lastRootPath: null, lastFolderState: null });
+      }
+      handleGoHome();
+      setIsTreeLoading(false);
+    });
+  };
+
+  return handleContinueSession;
+}
diff --git a/src/hooks/handlers/useHandleCopyAdjustments.ts b/src/hooks/handlers/useHandleCopyAdjustments.ts
new file mode 100644
index 000000000..d2a4c2425
--- /dev/null
+++ b/src/hooks/handlers/useHandleCopyAdjustments.ts
@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { COPYABLE_ADJUSTMENT_KEYS } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleCopyAdjustments() {
+  const { selectedImage, adjustments, libraryActiveAdjustments, setCopiedAdjustments, setIsCopied } = useAppState();
+
+  const handleCopyAdjustments = useCallback(() => {
+    const sourceAdjustments = selectedImage ? adjustments : libraryActiveAdjustments;
+    const adjustmentsToCopy: any = {};
+    for (const key of COPYABLE_ADJUSTMENT_KEYS) {
+      if (Object.prototype.hasOwnProperty.call(sourceAdjustments, key)) {
+        adjustmentsToCopy[key] = sourceAdjustments[key];
+      }
+    }
+    setCopiedAdjustments(adjustmentsToCopy);
+    setIsCopied(true);
+  }, [selectedImage, adjustments, libraryActiveAdjustments]);
+
+  return handleCopyAdjustments;
+}
diff --git a/src/hooks/handlers/useHandleCreateFolder.ts b/src/hooks/handlers/useHandleCreateFolder.ts
new file mode 100644
index 000000000..d721ad008
--- /dev/null
+++ b/src/hooks/handlers/useHandleCreateFolder.ts
@@ -0,0 +1,22 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useAppState } from '../../context/ContextProviders';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useRefreshAllFolderTrees } from './useRefreshAllFolderTrees';
+
+export function useHandleCreateFolder() {
+  const { folderActionTarget, setError } = useAppState();
+  const refreshAllFolderTrees = useRefreshAllFolderTrees();
+
+  const handleCreateFolder = async (folderName: string) => {
+    if (folderName && folderName.trim() !== '' && folderActionTarget) {
+      try {
+        await invoke(Invokes.CreateFolder, { path: `${folderActionTarget}/${folderName.trim()}` });
+        refreshAllFolderTrees();
+      } catch (err) {
+        setError(`Failed to create folder: ${err}`);
+      }
+    }
+  };
+
+  return handleCreateFolder;
+}
diff --git a/src/hooks/handlers/useHandleDeleteAiPatch.ts b/src/hooks/handlers/useHandleDeleteAiPatch.ts
new file mode 100644
index 000000000..a6a505c52
--- /dev/null
+++ b/src/hooks/handlers/useHandleDeleteAiPatch.ts
@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { Adjustments } from '../../utils/adjustments';
+import { useSetAdjustments } from './useSetAdjustments';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleDeleteAiPatch() {
+  const { activeAiPatchContainerId, setActiveAiPatchContainerId, setActiveAiSubMaskId } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleDeleteAiPatch = useCallback(
+    (patchId: string) => {
+      setAdjustments((prev: Adjustments) => ({
+        ...prev,
+        aiPatches: (prev.aiPatches || []).filter((p) => p.id !== patchId),
+      }));
+      if (activeAiPatchContainerId === patchId) {
+        setActiveAiPatchContainerId(null);
+        setActiveAiSubMaskId(null);
+      }
+    },
+    [setAdjustments, activeAiPatchContainerId],
+  );
+
+  return handleDeleteAiPatch;
+}
diff --git a/src/hooks/handlers/useHandleDeleteMaskContainer.ts b/src/hooks/handlers/useHandleDeleteMaskContainer.ts
new file mode 100644
index 000000000..6fe170603
--- /dev/null
+++ b/src/hooks/handlers/useHandleDeleteMaskContainer.ts
@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { Adjustments } from '../../utils/adjustments';
+import { useSetAdjustments } from './useSetAdjustments';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleDeleteMaskContainer() {
+  const { activeMaskContainerId, setActiveMaskContainerId, setActiveMaskId } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleDeleteMaskContainer = useCallback(
+    (containerId: string) => {
+      setAdjustments((prev: Adjustments) => ({
+        ...prev,
+        masks: (prev.masks || []).filter((c) => c.id !== containerId),
+      }));
+      if (activeMaskContainerId === containerId) {
+        setActiveMaskContainerId(null);
+        setActiveMaskId(null);
+      }
+    },
+    [setAdjustments, activeMaskContainerId],
+  );
+
+  return handleDeleteMaskContainer;
+}
diff --git a/src/hooks/handlers/useHandleDeleteSelected.ts b/src/hooks/handlers/useHandleDeleteSelected.ts
new file mode 100644
index 000000000..230e13301
--- /dev/null
+++ b/src/hooks/handlers/useHandleDeleteSelected.ts
@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useExecuteDelete } from './useExecuteDelete';
+
+export function useHandleDeleteSelected() {
+  const { multiSelectedPaths, imageList, setConfirmModalState } = useAppState();
+  const executeDelete = useExecuteDelete();
+
+  const handleDeleteSelected = useCallback(() => {
+    const pathsToDelete = multiSelectedPaths;
+    if (pathsToDelete.length === 0) {
+      return;
+    }
+
+    const isSingle = pathsToDelete.length === 1;
+
+    const selectionHasVirtualCopies =
+      isSingle &&
+      !pathsToDelete[0].includes('?vc=') &&
+      imageList.some((image) => image.path.startsWith(`${pathsToDelete[0]}?vc=`));
+
+    let modalTitle = 'Confirm Delete';
+    let modalMessage = '';
+    let confirmText = 'Delete';
+
+    if (selectionHasVirtualCopies) {
+      modalTitle = 'Delete Image and All Virtual Copies?';
+      modalMessage = `Are you sure you want to permanently delete this image and all of its virtual copies? This action cannot be undone.`;
+      confirmText = 'Delete All';
+    } else if (isSingle) {
+      modalMessage = `Are you sure you want to permanently delete this image? This action cannot be undone. Right-click for more options (e.g., deleting associated files).`;
+      confirmText = 'Delete Selected Only';
+    } else {
+      modalMessage = `Are you sure you want to permanently delete these ${pathsToDelete.length} images? This action cannot be undone. Right-click for more options (e.g., deleting associated files).`;
+      confirmText = 'Delete Selected Only';
+    }
+
+    setConfirmModalState({
+      confirmText,
+      confirmVariant: 'destructive',
+      isOpen: true,
+      message: modalMessage,
+      onConfirm: () => executeDelete(pathsToDelete, { includeAssociated: false }),
+      title: modalTitle,
+    });
+  }, [multiSelectedPaths, executeDelete, imageList]);
+
+  return handleDeleteSelected;
+}
diff --git a/src/hooks/handlers/useHandleDisplaySizeChange.ts b/src/hooks/handlers/useHandleDisplaySizeChange.ts
new file mode 100644
index 000000000..bd33ffbb0
--- /dev/null
+++ b/src/hooks/handlers/useHandleDisplaySizeChange.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { ImageDimensions } from '../useImageRenderSize';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleDisplaySizeChange() {
+  const { setDisplaySize, setBaseRenderSize } = useAppState();
+
+  const handleDisplaySizeChange = useCallback((size: ImageDimensions & { scale?: number }) => {
+    setDisplaySize({ width: size.width, height: size.height });
+
+    if (size.scale) {
+      const baseWidth = size.width / size.scale;
+      const baseHeight = size.height / size.scale;
+      setBaseRenderSize({ width: baseWidth, height: baseHeight });
+    }
+  }, []);
+
+  return handleDisplaySizeChange;
+}
diff --git a/src/hooks/handlers/useHandleEditorContextMenu.ts b/src/hooks/handlers/useHandleEditorContextMenu.ts
new file mode 100644
index 000000000..76d69e09c
--- /dev/null
+++ b/src/hooks/handlers/useHandleEditorContextMenu.ts
@@ -0,0 +1,233 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Color } from 'framer-motion';
+import {
+  Save,
+  Undo,
+  Redo,
+  Copy,
+  ClipboardPaste,
+  Gauge,
+  Aperture,
+  CopyPlus,
+  Grip,
+  Film,
+  SquaresUnite,
+  Images,
+  LayoutTemplate,
+  Users,
+  Star,
+  Palette,
+  Tag,
+  RotateCcw,
+} from 'lucide-react';
+
+import { Invokes, Panel, OPTION_SEPARATOR, Option } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import TaggingSubMenu from '../../context/TaggingSubMenu';
+import { COLOR_LABELS, INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+import { useRefreshImageList } from './useRefreshImageList';
+import { useGetCommonTags } from './useGetCommonTags';
+import { useUndo } from './useUndo';
+import { useRedo } from './useRedo';
+import { useHandleCopyAdjustments } from './useHandleCopyAdjustments';
+import { useHandlePasteAdjustments } from './useHandlePasteAdjustments';
+import { useContextMenu } from '../../context/ContextMenuContext';
+import { useDebouncedSetHistory } from './useDebouncedSetHistory';
+import { useHandleTagsChanged } from './useHandleTagsChanged';
+import { useHandleSetColorLabel } from './useHandleSetColorLabel';
+import { useHandleRate } from './useHandleRate';
+import { useHandleAutoAdjustments } from './useHandleAutoAdjustments';
+
+export function useHandleEditorContextMenu() {
+  const {
+    selectedImage,
+    setError,
+    setRenderedRightPanel,
+    setActiveRightPanel,
+    history,
+    copiedAdjustments,
+    adjustments,
+    appSettings,
+    setCollageModalState,
+    setNegativeModalState,
+    setDenoiseModalState,
+  } = useAppState();
+  const { canRedo, canUndo, resetHistory: resetAdjustmentsHistory } = history;
+  const { showContextMenu } = useContextMenu();
+  const refreshImageList = useRefreshImageList();
+  const getCommonTags = useGetCommonTags();
+  const undo = useUndo();
+  const redo = useRedo();
+  const handleCopyAdjustments = useHandleCopyAdjustments();
+  const handlePasteAdjustments = useHandlePasteAdjustments();
+  const debouncedSetHistory = useDebouncedSetHistory();
+  const handleTagsChanged = useHandleTagsChanged();
+  const handleSetColorLabel = useHandleSetColorLabel();
+  const handleRate = useHandleRate();
+  const handleAutoAdjustments = useHandleAutoAdjustments();
+
+  const handleEditorContextMenu = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!selectedImage) return;
+
+    const handleCreateVirtualCopy = async (sourcePath: string) => {
+      try {
+        await invoke(Invokes.CreateVirtualCopy, { sourceVirtualPath: sourcePath });
+        await refreshImageList();
+      } catch (err) {
+        console.error('Failed to create virtual copy:', err);
+        setError(`Failed to create virtual copy: ${err}`);
+      }
+    };
+
+    const commonTags = getCommonTags([selectedImage.path]);
+
+    const options: Array<Option> = [
+      {
+        label: 'Export Image',
+        icon: Save,
+        onClick: () => {
+          setRenderedRightPanel(Panel.Export);
+          setActiveRightPanel(Panel.Export);
+        },
+      },
+      { type: OPTION_SEPARATOR },
+      { label: 'Undo', icon: Undo, onClick: undo, disabled: !canUndo },
+      { label: 'Redo', icon: Redo, onClick: redo, disabled: !canRedo },
+      { type: OPTION_SEPARATOR },
+      { label: 'Copy Adjustments', icon: Copy, onClick: handleCopyAdjustments },
+      {
+        label: 'Paste Adjustments',
+        icon: ClipboardPaste,
+        onClick: handlePasteAdjustments,
+        disabled: copiedAdjustments === null,
+      },
+      {
+        label: 'Productivity',
+        icon: Gauge,
+        submenu: [
+          {
+            label: 'Auto Adjust Image',
+            icon: Aperture,
+            onClick: handleAutoAdjustments,
+          },
+          {
+            icon: CopyPlus,
+            label: 'Create Virtual Copy',
+            onClick: () => handleCreateVirtualCopy(selectedImage.path),
+          },
+          {
+            label: 'Denoise',
+            icon: Grip,
+            onClick: () => {
+              setDenoiseModalState({
+                isOpen: true,
+                isProcessing: false,
+                previewBase64: null,
+                error: null,
+                targetPath: selectedImage.path,
+                progressMessage: null,
+              });
+            },
+          },
+          {
+            label: 'Convert Negative',
+            icon: Film,
+            onClick: () => {
+              if (selectedImage) {
+                setNegativeModalState({
+                  isOpen: true,
+                  targetPath: selectedImage.path,
+                });
+              }
+            },
+          },
+          {
+            disabled: true,
+            icon: SquaresUnite,
+            label: 'Stitch Panorama',
+          },
+          {
+            disabled: true,
+            icon: Images,
+            label: 'Merge to HDR',
+          },
+          {
+            icon: LayoutTemplate,
+            label: 'Frame Image',
+            onClick: () => {
+              setCollageModalState({
+                isOpen: true,
+                sourceImages: [selectedImage],
+              });
+            },
+          },
+          {
+            label: 'Cull Image',
+            icon: Users,
+            disabled: true,
+          },
+        ],
+      },
+      { type: OPTION_SEPARATOR },
+      {
+        label: 'Rating',
+        icon: Star,
+        submenu: [0, 1, 2, 3, 4, 5].map((rating: number) => ({
+          label: rating === 0 ? 'No Rating' : `${rating} Star${rating !== 1 ? 's' : ''}`,
+          onClick: () => handleRate(rating),
+        })),
+      },
+      {
+        label: 'Color Label',
+        icon: Palette,
+        submenu: [
+          { label: 'No Label', onClick: () => handleSetColorLabel(null) },
+          ...COLOR_LABELS.map((label: Color) => ({
+            label: label.name.charAt(0).toUpperCase() + label.name.slice(1),
+            color: label.color,
+            onClick: () => handleSetColorLabel(label.name),
+          })),
+        ],
+      },
+      {
+        label: 'Tagging',
+        icon: Tag,
+        submenu: [
+          {
+            customComponent: TaggingSubMenu,
+            customProps: {
+              paths: [selectedImage.path],
+              initialTags: commonTags,
+              onTagsChanged: handleTagsChanged,
+              appSettings,
+            },
+          },
+        ],
+      },
+      { type: OPTION_SEPARATOR },
+      {
+        label: 'Reset Adjustments',
+        icon: RotateCcw,
+        onClick: () => {
+          debouncedSetHistory.cancel();
+          const currentRating = adjustments.rating;
+
+          const originalAspectRatio =
+            selectedImage.width && selectedImage.height ? selectedImage.width / selectedImage.height : null;
+
+          resetAdjustmentsHistory({
+            ...INITIAL_ADJUSTMENTS,
+            aspectRatio: originalAspectRatio,
+            rating: currentRating,
+            aiPatches: [],
+          });
+        },
+      },
+    ];
+    showContextMenu(event.clientX, event.clientY, options);
+  };
+
+  return handleEditorContextMenu;
+}
diff --git a/src/hooks/handlers/useHandleFolderTreeContextMenu.ts b/src/hooks/handlers/useHandleFolderTreeContextMenu.ts
new file mode 100644
index 000000000..c3fdf36b9
--- /dev/null
+++ b/src/hooks/handlers/useHandleFolderTreeContextMenu.ts
@@ -0,0 +1,150 @@
+import { invoke } from '@tauri-apps/api/core';
+import { PinOff, Pin, FolderPlus, FileEdit, ClipboardPaste, FolderInput, Folder, Trash2, X, Check } from 'lucide-react';
+import { OPTION_SEPARATOR, Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleTogglePinFolder } from './useHandleTogglePinFolder';
+import { useContextMenu } from '../../context/ContextMenuContext';
+import { useRefreshAllFolderTrees } from './useRefreshAllFolderTrees';
+import { useHandleSelectSubfolder } from './useHandleSelectSubfolder';
+import { useHandleImportClick } from './useHandleImportClick';
+import { useHandleLibraryRefresh } from './useHandleLibraryRefresh';
+
+export function useHandleFolderTreeContextMenu() {
+  const {
+    rootPath,
+    copiedFilePaths,
+    setFolderActionTarget,
+    setIsCreateFolderModalOpen,
+    setError,
+    currentFolderPath,
+    setMultiSelectedPaths,
+    setCopiedFilePaths,
+    setIsRenameFolderModalOpen,
+  } = useAppState();
+
+  const { showContextMenu } = useContextMenu();
+
+  const handleTogglePinFolder = useHandleTogglePinFolder();
+  const refreshAllFolderTrees = useRefreshAllFolderTrees();
+  const handleSelectSubfolder = useHandleSelectSubfolder();
+  const handleImportClick = useHandleImportClick();
+  const handleLibraryRefresh = useHandleLibraryRefresh();
+
+  const handleFolderTreeContextMenu = (event: any, path: string, isCurrentlyPinned?: boolean) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const targetPath = path || rootPath;
+    if (!targetPath) {
+      return;
+    }
+    const isRoot = targetPath === rootPath;
+    const numCopied = copiedFilePaths.length;
+    const copyPastedLabel = numCopied === 1 ? 'Copy image here' : `Copy ${numCopied} images here`;
+    const movePastedLabel = numCopied === 1 ? 'Move image here' : `Move ${numCopied} images here`;
+
+    const pinOption = isCurrentlyPinned
+      ? {
+          icon: PinOff,
+          label: 'Unpin Folder',
+          onClick: () => handleTogglePinFolder(targetPath),
+        }
+      : {
+          icon: Pin,
+          label: 'Pin Folder',
+          onClick: () => handleTogglePinFolder(targetPath),
+        };
+
+    const options = [
+      pinOption,
+      { type: OPTION_SEPARATOR },
+      {
+        icon: FolderPlus,
+        label: 'New Folder',
+        onClick: () => {
+          setFolderActionTarget(targetPath);
+          setIsCreateFolderModalOpen(true);
+        },
+      },
+      {
+        disabled: isRoot,
+        icon: FileEdit,
+        label: 'Rename Folder',
+        onClick: () => {
+          setFolderActionTarget(targetPath);
+          setIsRenameFolderModalOpen(true);
+        },
+      },
+      { type: OPTION_SEPARATOR },
+      {
+        disabled: copiedFilePaths.length === 0,
+        icon: ClipboardPaste,
+        label: 'Paste',
+        submenu: [
+          {
+            label: copyPastedLabel,
+            onClick: async () => {
+              try {
+                await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: targetPath });
+                if (targetPath === currentFolderPath) handleLibraryRefresh();
+              } catch (err) {
+                setError(`Failed to copy files: ${err}`);
+              }
+            },
+          },
+          {
+            label: movePastedLabel,
+            onClick: async () => {
+              try {
+                await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: targetPath });
+                setCopiedFilePaths([]);
+                setMultiSelectedPaths([]);
+                refreshAllFolderTrees();
+                handleLibraryRefresh();
+              } catch (err) {
+                setError(`Failed to move files: ${err}`);
+              }
+            },
+          },
+        ],
+      },
+      { icon: FolderInput, label: 'Import Images', onClick: () => handleImportClick(targetPath) },
+      { type: OPTION_SEPARATOR },
+      {
+        icon: Folder,
+        label: 'Show in File Explorer',
+        onClick: () =>
+          invoke(Invokes.ShowInFinder, { path: targetPath }).catch((err) => setError(`Could not show folder: ${err}`)),
+      },
+      ...(path
+        ? [
+            {
+              disabled: isRoot,
+              icon: Trash2,
+              isDestructive: true,
+              label: 'Delete Folder',
+              submenu: [
+                { label: 'Cancel', icon: X, onClick: () => {} },
+                {
+                  label: 'Confirm',
+                  icon: Check,
+                  isDestructive: true,
+                  onClick: async () => {
+                    try {
+                      await invoke(Invokes.DeleteFolder, { path: targetPath });
+                      if (currentFolderPath?.startsWith(targetPath)) await handleSelectSubfolder(rootPath);
+                      refreshAllFolderTrees();
+                    } catch (err) {
+                      setError(`Failed to delete folder: ${err}`);
+                    }
+                  },
+                },
+              ],
+            },
+          ]
+        : []),
+    ];
+    showContextMenu(event.clientX, event.clientY, options);
+  };
+
+  return handleFolderTreeContextMenu;
+}
diff --git a/src/hooks/handlers/useHandleFullResolutionLogic.ts b/src/hooks/handlers/useHandleFullResolutionLogic.ts
new file mode 100644
index 000000000..767243f8e
--- /dev/null
+++ b/src/hooks/handlers/useHandleFullResolutionLogic.ts
@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleFullResolutionLogic() {
+  const { appSettings, initialFitScale, previewSize, originalSize, setIsHighResNeeded } = useAppState();
+
+  const handleFullResolutionLogic = useCallback(
+    (targetZoomPercent: number) => {
+      if (appSettings?.enableZoomHifi === false) {
+        return;
+      }
+
+      if (!initialFitScale) {
+        return;
+      }
+      const highResThreshold = Math.max(initialFitScale * 2, 0.5);
+      const needsFullRes = targetZoomPercent > highResThreshold;
+      const previewIsAlreadyFullRes = previewSize.width >= originalSize.width;
+
+      if (needsFullRes && !previewIsAlreadyFullRes) {
+        setIsHighResNeeded(true);
+      } else {
+        setIsHighResNeeded(false);
+      }
+    },
+    [initialFitScale, previewSize.width, originalSize.width, appSettings],
+  );
+
+  return handleFullResolutionLogic;
+}
diff --git a/src/hooks/handlers/useHandleGenerateAiForegroundMask.ts b/src/hooks/handlers/useHandleGenerateAiForegroundMask.ts
new file mode 100644
index 000000000..b1d32c311
--- /dev/null
+++ b/src/hooks/handlers/useHandleGenerateAiForegroundMask.ts
@@ -0,0 +1,62 @@
+import { invoke } from '@tauri-apps/api/core';
+import { SubMask } from '../../components/panel/right/Masks';
+import { Invokes } from '../../components/ui/AppProperties';
+import { AiPatch } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useUpdateSubMask } from './useUpdateSubMask';
+
+export function useHandleGenerateAiForegroundMask() {
+  const { selectedImage, setIsGeneratingAiMask, adjustments, patchesSentToBackend, setError } = useAppState();
+  const updateSubMask = useUpdateSubMask();
+
+  const handleGenerateAiForegroundMask = async (subMaskId: string) => {
+    if (!selectedImage?.path) {
+      console.error('Cannot generate AI mask: No image selected.');
+      return;
+    }
+    setIsGeneratingAiMask(true);
+    try {
+      const transformAdjustments = {
+        transformDistortion: adjustments.transformDistortion,
+        transformVertical: adjustments.transformVertical,
+        transformHorizontal: adjustments.transformHorizontal,
+        transformRotate: adjustments.transformRotate,
+        transformAspect: adjustments.transformAspect,
+        transformScale: adjustments.transformScale,
+        transformXOffset: adjustments.transformXOffset,
+        transformYOffset: adjustments.transformYOffset,
+        lensDistortionAmount: adjustments.lensDistortionAmount,
+        lensVignetteAmount: adjustments.lensVignetteAmount,
+        lensTcaAmount: adjustments.lensTcaAmount,
+        lensDistortionParams: adjustments.lensDistortionParams,
+        lensMaker: adjustments.lensMaker,
+        lensModel: adjustments.lensModel,
+        lensDistortionEnabled: adjustments.lensDistortionEnabled,
+        lensTcaEnabled: adjustments.lensTcaEnabled,
+        lensVignetteEnabled: adjustments.lensVignetteEnabled,
+      };
+      const newParameters = await invoke(Invokes.GenerateAiForegroundMask, {
+        jsAdjustments: transformAdjustments,
+        flipHorizontal: adjustments.flipHorizontal,
+        flipVertical: adjustments.flipVertical,
+        orientationSteps: adjustments.orientationSteps,
+        rotation: adjustments.rotation,
+      });
+
+      const subMask = adjustments.aiPatches
+        ?.flatMap((p: AiPatch) => p.subMasks)
+        .find((sm: SubMask) => sm.id === subMaskId);
+
+      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
+      patchesSentToBackend.current.delete(subMaskId);
+      updateSubMask(subMaskId, { parameters: mergedParameters });
+    } catch (error) {
+      console.error('Failed to generate AI foreground mask:', error);
+      setError(`AI Mask Failed: ${error}`);
+    } finally {
+      setIsGeneratingAiMask(false);
+    }
+  };
+
+  return handleGenerateAiForegroundMask;
+}
diff --git a/src/hooks/handlers/useHandleGenerateAiMask.ts b/src/hooks/handlers/useHandleGenerateAiMask.ts
new file mode 100644
index 000000000..f6cf1d24a
--- /dev/null
+++ b/src/hooks/handlers/useHandleGenerateAiMask.ts
@@ -0,0 +1,65 @@
+import { invoke } from '@tauri-apps/api/core';
+import { SubMask } from '../../components/panel/right/Masks';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Coord, AiPatch } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useUpdateSubMask } from './useUpdateSubMask';
+
+export function useHandleGenerateAiMask() {
+  const { selectedImage, adjustments, patchesSentToBackend, setIsGeneratingAiMask, setError } = useAppState();
+  const updateSubMask = useUpdateSubMask();
+
+  const handleGenerateAiMask = async (subMaskId: string, startPoint: Coord, endPoint: Coord) => {
+    if (!selectedImage?.path) {
+      console.error('Cannot generate AI mask: No image selected.');
+      return;
+    }
+    setIsGeneratingAiMask(true);
+    try {
+      const transformAdjustments = {
+        transformDistortion: adjustments.transformDistortion,
+        transformVertical: adjustments.transformVertical,
+        transformHorizontal: adjustments.transformHorizontal,
+        transformRotate: adjustments.transformRotate,
+        transformAspect: adjustments.transformAspect,
+        transformScale: adjustments.transformScale,
+        transformXOffset: adjustments.transformXOffset,
+        transformYOffset: adjustments.transformYOffset,
+        lensDistortionAmount: adjustments.lensDistortionAmount,
+        lensVignetteAmount: adjustments.lensVignetteAmount,
+        lensTcaAmount: adjustments.lensTcaAmount,
+        lensDistortionParams: adjustments.lensDistortionParams,
+        lensMaker: adjustments.lensMaker,
+        lensModel: adjustments.lensModel,
+        lensDistortionEnabled: adjustments.lensDistortionEnabled,
+        lensTcaEnabled: adjustments.lensTcaEnabled,
+        lensVignetteEnabled: adjustments.lensVignetteEnabled,
+      };
+      const newParameters = await invoke(Invokes.GenerateAiSubjectMask, {
+        jsAdjustments: transformAdjustments,
+        endPoint: [endPoint.x, endPoint.y],
+        flipHorizontal: adjustments.flipHorizontal,
+        flipVertical: adjustments.flipVertical,
+        orientationSteps: adjustments.orientationSteps,
+        path: selectedImage.path,
+        rotation: adjustments.rotation,
+        startPoint: [startPoint.x, startPoint.y],
+      });
+
+      const subMask = adjustments.aiPatches
+        ?.flatMap((p: AiPatch) => p.subMasks)
+        .find((sm: SubMask) => sm.id === subMaskId);
+
+      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
+      patchesSentToBackend.current.delete(subMaskId);
+      updateSubMask(subMaskId, { parameters: mergedParameters });
+    } catch (error) {
+      console.error('Failed to generate AI subject mask:', error);
+      setError(`AI Mask Failed: ${error}`);
+    } finally {
+      setIsGeneratingAiMask(false);
+    }
+  };
+
+  return handleGenerateAiMask;
+}
diff --git a/src/hooks/handlers/useHandleGenerateAiSkyMask.ts b/src/hooks/handlers/useHandleGenerateAiSkyMask.ts
new file mode 100644
index 000000000..9ae5d84ab
--- /dev/null
+++ b/src/hooks/handlers/useHandleGenerateAiSkyMask.ts
@@ -0,0 +1,61 @@
+import { invoke } from '@tauri-apps/api/core';
+import { SubMask } from '../../components/panel/right/Masks';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { AiPatch } from '../../utils/adjustments';
+import { useUpdateSubMask } from './useUpdateSubMask';
+
+export function useHandleGenerateAiSkyMask() {
+  const { selectedImage, setIsGeneratingAiMask, adjustments, patchesSentToBackend, setError } = useAppState();
+  const updateSubMask = useUpdateSubMask();
+  const handleGenerateAiSkyMask = async (subMaskId: string) => {
+    if (!selectedImage?.path) {
+      console.error('Cannot generate AI mask: No image selected.');
+      return;
+    }
+    setIsGeneratingAiMask(true);
+    try {
+      const transformAdjustments = {
+        transformDistortion: adjustments.transformDistortion,
+        transformVertical: adjustments.transformVertical,
+        transformHorizontal: adjustments.transformHorizontal,
+        transformRotate: adjustments.transformRotate,
+        transformAspect: adjustments.transformAspect,
+        transformScale: adjustments.transformScale,
+        transformXOffset: adjustments.transformXOffset,
+        transformYOffset: adjustments.transformYOffset,
+        lensDistortionAmount: adjustments.lensDistortionAmount,
+        lensVignetteAmount: adjustments.lensVignetteAmount,
+        lensTcaAmount: adjustments.lensTcaAmount,
+        lensDistortionParams: adjustments.lensDistortionParams,
+        lensMaker: adjustments.lensMaker,
+        lensModel: adjustments.lensModel,
+        lensDistortionEnabled: adjustments.lensDistortionEnabled,
+        lensTcaEnabled: adjustments.lensTcaEnabled,
+        lensVignetteEnabled: adjustments.lensVignetteEnabled,
+      };
+      const newParameters = await invoke(Invokes.GenerateAiSkyMask, {
+        jsAdjustments: transformAdjustments,
+        flipHorizontal: adjustments.flipHorizontal,
+        flipVertical: adjustments.flipVertical,
+        orientationSteps: adjustments.orientationSteps,
+        rotation: adjustments.rotation,
+      });
+
+      const subMask = adjustments.aiPatches
+        ?.flatMap((p: AiPatch) => p.subMasks)
+        .find((sm: SubMask) => sm.id === subMaskId);
+
+      const mergedParameters = { ...(subMask?.parameters || {}), ...newParameters };
+      patchesSentToBackend.current.delete(subMaskId);
+      updateSubMask(subMaskId, { parameters: mergedParameters });
+    } catch (error) {
+      console.error('Failed to generate AI sky mask:', error);
+      setError(`AI Mask Failed: ${error}`);
+    } finally {
+      setIsGeneratingAiMask(false);
+    }
+  };
+
+  return handleGenerateAiSkyMask;
+}
diff --git a/src/hooks/handlers/useHandleGenerativeReplace.ts b/src/hooks/handlers/useHandleGenerativeReplace.ts
new file mode 100644
index 000000000..bc78ced95
--- /dev/null
+++ b/src/hooks/handlers/useHandleGenerativeReplace.ts
@@ -0,0 +1,89 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { AiPatch, Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandleGenerativeReplace() {
+  const {
+    selectedImage,
+    isGeneratingAi,
+    adjustments,
+    setIsGeneratingAi,
+    patchesSentToBackend,
+    setActiveAiPatchContainerId,
+    setActiveAiSubMaskId,
+    setError,
+  } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleGenerativeReplace = useCallback(
+    async (patchId: string, prompt: string, useFastInpaint: boolean) => {
+      if (!selectedImage?.path || isGeneratingAi) {
+        return;
+      }
+
+      const patch: AiPatch | undefined = adjustments.aiPatches.find((p: AiPatch) => p.id === patchId);
+      if (!patch) {
+        console.error('Could not find AI patch to generate for:', patchId);
+        return;
+      }
+
+      const patchDefinition = { ...patch, prompt };
+
+      setAdjustments((prev: Adjustments) => ({
+        ...prev,
+        aiPatches: prev.aiPatches.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: true, prompt } : p)),
+      }));
+
+      setIsGeneratingAi(true);
+
+      try {
+        const newPatchDataJson: any = await invoke(Invokes.InvokeGenerativeReplaseWithMaskDef, {
+          currentAdjustments: adjustments,
+          patchDefinition: patchDefinition,
+          path: selectedImage.path,
+          useFastInpaint: useFastInpaint,
+        });
+
+        const newPatchData = JSON.parse(newPatchDataJson);
+        patchesSentToBackend.current.delete(patchId);
+        setAdjustments((prev: Adjustments) => ({
+          ...prev,
+          aiPatches: prev.aiPatches.map((p: AiPatch) =>
+            p.id === patchId
+              ? {
+                  ...p,
+                  patchData: newPatchData,
+                  isLoading: false,
+                  name: useFastInpaint ? 'Inpaint' : prompt && prompt.trim() ? prompt.trim() : p.name,
+                }
+              : p,
+          ),
+        }));
+        setActiveAiPatchContainerId(null);
+        setActiveAiSubMaskId(null);
+      } catch (err) {
+        console.error('Generative replace failed:', err);
+        setError(`AI Replace Failed: ${err}`);
+        setAdjustments((prev: Adjustments) => ({
+          ...prev,
+          aiPatches: prev.aiPatches.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: false } : p)),
+        }));
+      } finally {
+        setIsGeneratingAi(false);
+      }
+    },
+    [
+      selectedImage?.path,
+      isGeneratingAi,
+      adjustments,
+      setAdjustments,
+      setActiveAiPatchContainerId,
+      setActiveAiSubMaskId,
+    ],
+  );
+
+  return handleGenerativeReplace;
+}
diff --git a/src/hooks/handlers/useHandleGoHome.ts b/src/hooks/handlers/useHandleGoHome.ts
new file mode 100644
index 000000000..0710e3f47
--- /dev/null
+++ b/src/hooks/handlers/useHandleGoHome.ts
@@ -0,0 +1,29 @@
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleGoHome() {
+  const {
+    setRootPath,
+    setCurrentFolderPath,
+    setImageList,
+    setImageRatings,
+    setFolderTree,
+    setMultiSelectedPaths,
+    setLibraryActivePath,
+    setIsLibraryExportPanelVisible,
+    setExpandedFolders,
+  } = useAppState();
+
+  const handleGoHome = () => {
+    setRootPath(null);
+    setCurrentFolderPath(null);
+    setImageList([]);
+    setImageRatings({});
+    setFolderTree(null);
+    setMultiSelectedPaths([]);
+    setLibraryActivePath(null);
+    setIsLibraryExportPanelVisible(false);
+    setExpandedFolders(new Set());
+  };
+
+  return handleGoHome;
+}
diff --git a/src/hooks/handlers/useHandleImageClick.ts b/src/hooks/handlers/useHandleImageClick.ts
new file mode 100644
index 000000000..fb3a472ef
--- /dev/null
+++ b/src/hooks/handlers/useHandleImageClick.ts
@@ -0,0 +1,20 @@
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleImageSelect } from './useHandleImageSelect';
+import { useHandleMultiselectClick } from './useHandleMultiSelectClick';
+
+export function useHandleImageClick() {
+  const { selectedImage, libraryActivePath } = useAppState();
+  const handleMultiSelectClick = useHandleMultiselectClick();
+  const handleImageSelect = useHandleImageSelect();
+
+  const handleImageClick = (path: string, event: any) => {
+    const inEditor = !!selectedImage;
+    handleMultiSelectClick(path, event, {
+      shiftAnchor: inEditor ? selectedImage.path : libraryActivePath,
+      updateLibraryActivePath: !inEditor,
+      onSimpleClick: handleImageSelect,
+    });
+  };
+
+  return handleImageClick;
+}
diff --git a/src/hooks/handlers/useHandleImageSelect.ts b/src/hooks/handlers/useHandleImageSelect.ts
new file mode 100644
index 000000000..3b964ec31
--- /dev/null
+++ b/src/hooks/handlers/useHandleImageSelect.ts
@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useDebouncedSave } from './useDebounce';
+import { INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+import { useApplyAdjustments } from './useApplyAdjustments';
+
+export function useHandleImageSelect() {
+  const {
+    selectedImage,
+    patchesSentToBackend,
+    imageRatings,
+    setAdjustments,
+    history,
+    setSelectedImage,
+    thumbnails,
+    setOriginalSize,
+    setPreviewSize,
+    setMultiSelectedPaths,
+    setLibraryActivePath,
+    setIsViewLoading,
+    setError,
+    setHistogram,
+    setFinalPreviewUrl,
+    setUncroppedAdjustedPreviewUrl,
+    setTransformedOriginalUrl,
+    setShowOriginal,
+    setActiveMaskId,
+    setActiveMaskContainerId,
+    setActiveAiPatchContainerId,
+    setActiveAiSubMaskId,
+    setIsWbPickerActive,
+    setIsHighResNeeded,
+    transformWrapperRef,
+    setZoom,
+    setIsLibraryExportPanelVisible,
+    fullResCacheKeyRef,
+  } = useAppState();
+  const { resetHistory } = history;
+  const debouncedSave = useDebouncedSave();
+  const applyAdjustments = useApplyAdjustments();
+
+  const handleImageSelect = useCallback(
+    (path: string) => {
+      if (selectedImage?.path === path) {
+        return;
+      }
+      debouncedSave.cancel();
+      patchesSentToBackend.current.clear();
+
+      const knownRating = imageRatings[path] ?? 0;
+      const placeholderAdjustments = {
+        ...INITIAL_ADJUSTMENTS,
+        rating: knownRating,
+      };
+
+      setAdjustments(placeholderAdjustments);
+      resetHistory(placeholderAdjustments);
+
+      setSelectedImage({
+        exif: null,
+        height: 0,
+        isRaw: false,
+        isReady: false,
+        metadata: null,
+        originalUrl: null,
+        path,
+        thumbnailUrl: thumbnails[path],
+        width: 0,
+      });
+      setOriginalSize({ width: 0, height: 0 });
+      setPreviewSize({ width: 0, height: 0 });
+      setMultiSelectedPaths([path]);
+      setLibraryActivePath(null);
+      setIsViewLoading(true);
+      setError(null);
+      setHistogram(null);
+      setFinalPreviewUrl(null);
+      setUncroppedAdjustedPreviewUrl(null);
+      setTransformedOriginalUrl(null);
+      setShowOriginal(false);
+      setActiveMaskId(null);
+      setActiveMaskContainerId(null);
+      setActiveAiPatchContainerId(null);
+      setActiveAiSubMaskId(null);
+      setIsWbPickerActive(false);
+      setIsHighResNeeded(false);
+
+      if (transformWrapperRef.current) {
+        transformWrapperRef.current.resetTransform(0);
+      }
+
+      setZoom(1);
+      setIsLibraryExportPanelVisible(false);
+
+      fullResCacheKeyRef.current = null;
+      setFinalPreviewUrl((prev) => {
+        if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
+        return null;
+      });
+    },
+    [selectedImage?.path, applyAdjustments, debouncedSave, thumbnails, imageRatings, resetHistory],
+  );
+
+  return handleImageSelect;
+}
diff --git a/src/hooks/handlers/useHandleImportClick.ts b/src/hooks/handlers/useHandleImportClick.ts
new file mode 100644
index 000000000..aa1ea7769
--- /dev/null
+++ b/src/hooks/handlers/useHandleImportClick.ts
@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { open } from '@tauri-apps/plugin-dialog';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleImportClick() {
+  const { supportedTypes, setImportSourcePaths, setImportTargetFolder, setIsImportModalOpen } = useAppState();
+
+  const handleImportClick = useCallback(
+    async (targetPath: string) => {
+      try {
+        const nonRaw = supportedTypes?.nonRaw || [];
+        const raw = supportedTypes?.raw || [];
+
+        const expandExtensions = (exts: string[]) => {
+          return Array.from(new Set(exts.flatMap((ext) => [ext.toLowerCase(), ext.toUpperCase()])));
+        };
+
+        const processedNonRaw = expandExtensions(nonRaw);
+        const processedRaw = expandExtensions(raw);
+        const allImageExtensions = [...processedNonRaw, ...processedRaw];
+
+        const selected = await open({
+          filters: [
+            {
+              name: 'All Supported Images',
+              extensions: allImageExtensions,
+            },
+            {
+              name: 'RAW Images',
+              extensions: processedRaw,
+            },
+            {
+              name: 'Standard Images (JPEG, PNG, etc.)',
+              extensions: processedNonRaw,
+            },
+            {
+              name: 'All Files',
+              extensions: ['*'],
+            },
+          ],
+          multiple: true,
+          title: 'Select files to import',
+        });
+
+        if (Array.isArray(selected) && selected.length > 0) {
+          setImportSourcePaths(selected);
+          setImportTargetFolder(targetPath);
+          setIsImportModalOpen(true);
+        }
+      } catch (err) {
+        console.error('Failed to open file dialog for import:', err);
+      }
+    },
+    [supportedTypes],
+  );
+
+  return handleImportClick;
+}
diff --git a/src/hooks/handlers/useHandleLibraryImageSingleClick.ts b/src/hooks/handlers/useHandleLibraryImageSingleClick.ts
new file mode 100644
index 000000000..20c180569
--- /dev/null
+++ b/src/hooks/handlers/useHandleLibraryImageSingleClick.ts
@@ -0,0 +1,20 @@
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleMultiselectClick } from './useHandleMultiSelectClick';
+
+export function useHandleLibraryImageSingleClick() {
+  const { libraryActivePath, setMultiSelectedPaths, setLibraryActivePath } = useAppState();
+  const handleMultiSelectClick = useHandleMultiselectClick();
+
+  const handleLibraryImageSingleClick = (path: string, event: any) => {
+    handleMultiSelectClick(path, event, {
+      shiftAnchor: libraryActivePath,
+      updateLibraryActivePath: true,
+      onSimpleClick: (p: any) => {
+        setMultiSelectedPaths([p]);
+        setLibraryActivePath(p);
+      },
+    });
+  };
+
+  return handleLibraryImageSingleClick;
+}
diff --git a/src/hooks/handlers/useHandleLibraryRefresh.ts b/src/hooks/handlers/useHandleLibraryRefresh.ts
new file mode 100644
index 000000000..b4adb647f
--- /dev/null
+++ b/src/hooks/handlers/useHandleLibraryRefresh.ts
@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleSelectSubfolder } from './useHandleSelectSubfolder';
+
+export function useHandleLibraryRefresh() {
+  const { currentFolderPath } = useAppState();
+  const handleSelectSubfolder = useHandleSelectSubfolder();
+
+  const handleLibraryRefresh = useCallback(() => {
+    if (currentFolderPath) handleSelectSubfolder(currentFolderPath, false);
+  }, [currentFolderPath, handleSelectSubfolder]);
+
+  return handleLibraryRefresh;
+}
diff --git a/src/hooks/handlers/useHandleLutSelect.ts b/src/hooks/handlers/useHandleLutSelect.ts
new file mode 100644
index 000000000..2991311b1
--- /dev/null
+++ b/src/hooks/handlers/useHandleLutSelect.ts
@@ -0,0 +1,40 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Adjustments, INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+
+interface LutData {
+  size: number;
+}
+
+export function useHandleLutSelect() {
+  const { setError } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleLutSelect = useCallback(
+    async (path: string) => {
+      try {
+        const result: LutData = await invoke('load_and_parse_lut', { path });
+        const name = path.split(/[\\/]/).pop() || 'LUT';
+        setAdjustments((prev: Partial<Adjustments>) => ({
+          ...prev,
+          lutPath: path,
+          lutName: name,
+          lutSize: result.size,
+          lutIntensity: 100,
+          sectionVisibility: {
+            ...(prev.sectionVisibility || INITIAL_ADJUSTMENTS.sectionVisibility),
+            effects: true,
+          },
+        }));
+      } catch (err) {
+        console.error('Failed to load or parse LUT:', err);
+        setError(`Failed to load LUT: ${err}`);
+      }
+    },
+    [setAdjustments],
+  );
+
+  return handleLutSelect;
+}
diff --git a/src/hooks/handlers/useHandleMainLibraryContextMenu.ts b/src/hooks/handlers/useHandleMainLibraryContextMenu.ts
new file mode 100644
index 000000000..27b6ad16c
--- /dev/null
+++ b/src/hooks/handlers/useHandleMainLibraryContextMenu.ts
@@ -0,0 +1,70 @@
+import { invoke } from '@tauri-apps/api/core';
+import { ClipboardPaste, FolderInput } from 'lucide-react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useContextMenu } from '../../context/ContextMenuContext';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleImportClick } from './useHandleImportClick';
+import { useHandleLibraryRefresh } from './useHandleLibraryRefresh';
+import { useRefreshAllFolderTrees } from './useRefreshAllFolderTrees';
+
+export function useHandleMainLibraryContextMenu() {
+  const { copiedFilePaths, currentFolderPath, setError, setMultiSelectedPaths, setCopiedFilePaths } = useAppState();
+
+  const { showContextMenu } = useContextMenu();
+
+  const handleImportClick = useHandleImportClick();
+  const handleLibraryRefresh = useHandleLibraryRefresh();
+  const refreshAllFolderTrees = useRefreshAllFolderTrees();
+
+  const handleMainLibraryContextMenu = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const numCopied = copiedFilePaths.length;
+    const copyPastedLabel = numCopied === 1 ? 'Copy image here' : `Copy ${numCopied} images here`;
+    const movePastedLabel = numCopied === 1 ? 'Move image here' : `Move ${numCopied} images here`;
+
+    const options = [
+      {
+        label: 'Paste',
+        icon: ClipboardPaste,
+        disabled: copiedFilePaths.length === 0,
+        submenu: [
+          {
+            label: copyPastedLabel,
+            onClick: async () => {
+              try {
+                await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
+                handleLibraryRefresh();
+              } catch (err) {
+                setError(`Failed to copy files: ${err}`);
+              }
+            },
+          },
+          {
+            label: movePastedLabel,
+            onClick: async () => {
+              try {
+                await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
+                setCopiedFilePaths([]);
+                setMultiSelectedPaths([]);
+                refreshAllFolderTrees();
+                handleLibraryRefresh();
+              } catch (err) {
+                setError(`Failed to move files: ${err}`);
+              }
+            },
+          },
+        ],
+      },
+      {
+        icon: FolderInput,
+        label: 'Import Images',
+        onClick: () => handleImportClick(currentFolderPath as string),
+        disabled: !currentFolderPath,
+      },
+    ];
+    showContextMenu(event.clientX, event.clientY, options);
+  };
+
+  return handleMainLibraryContextMenu;
+}
diff --git a/src/hooks/handlers/useHandleMultiSelectClick.ts b/src/hooks/handlers/useHandleMultiSelectClick.ts
new file mode 100644
index 000000000..5dc968706
--- /dev/null
+++ b/src/hooks/handlers/useHandleMultiSelectClick.ts
@@ -0,0 +1,57 @@
+import { MultiSelectOptions } from '../../App';
+import { ImageFile } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useSortedImageList } from '../useSortedImageList';
+
+export function useHandleMultiselectClick() {
+  const { multiSelectedPaths, setMultiSelectedPaths, setLibraryActivePath } = useAppState();
+  const { sortedImageList } = useSortedImageList();
+
+  const handleMultiSelectClick = (path: string, event: any, options: MultiSelectOptions) => {
+    const { ctrlKey, metaKey, shiftKey } = event;
+    const isCtrlPressed = ctrlKey || metaKey;
+    const { shiftAnchor, onSimpleClick, updateLibraryActivePath } = options;
+
+    if (shiftKey && shiftAnchor) {
+      const lastIndex = sortedImageList.findIndex((f) => f.path === shiftAnchor);
+      const currentIndex = sortedImageList.findIndex((f) => f.path === path);
+
+      if (lastIndex !== -1 && currentIndex !== -1) {
+        const start = Math.min(lastIndex, currentIndex);
+        const end = Math.max(lastIndex, currentIndex);
+        const range = sortedImageList.slice(start, end + 1).map((f: ImageFile) => f.path);
+        const baseSelection = isCtrlPressed ? multiSelectedPaths : [shiftAnchor];
+        const newSelection = Array.from(new Set([...baseSelection, ...range]));
+
+        setMultiSelectedPaths(newSelection);
+        if (updateLibraryActivePath) {
+          setLibraryActivePath(path);
+        }
+      }
+    } else if (isCtrlPressed) {
+      const newSelection = new Set(multiSelectedPaths);
+      if (newSelection.has(path)) {
+        newSelection.delete(path);
+      } else {
+        newSelection.add(path);
+      }
+
+      const newSelectionArray = Array.from(newSelection);
+      setMultiSelectedPaths(newSelectionArray);
+
+      if (updateLibraryActivePath) {
+        if (newSelectionArray.includes(path)) {
+          setLibraryActivePath(path);
+        } else if (newSelectionArray.length > 0) {
+          setLibraryActivePath(newSelectionArray[newSelectionArray.length - 1]);
+        } else {
+          setLibraryActivePath(null);
+        }
+      }
+    } else {
+      onSimpleClick(path);
+    }
+  };
+
+  return handleMultiSelectClick;
+}
diff --git a/src/hooks/handlers/useHandleOpenFolder.ts b/src/hooks/handlers/useHandleOpenFolder.ts
new file mode 100644
index 000000000..68943b4a2
--- /dev/null
+++ b/src/hooks/handlers/useHandleOpenFolder.ts
@@ -0,0 +1,24 @@
+import { useAppState } from '../../context/ContextProviders';
+import { open } from '@tauri-apps/plugin-dialog';
+import { useHandleSelectSubfolder } from './useHandleSelectSubfolder';
+import { homeDir } from '@tauri-apps/api/path';
+
+export function useHandleOpenFolder() {
+  const { setRootPath, setError } = useAppState();
+  const handleSelectSubfolder = useHandleSelectSubfolder();
+
+  const handleOpenFolder = async () => {
+    try {
+      const selected = await open({ directory: true, multiple: false, defaultPath: await homeDir() });
+      if (typeof selected === 'string') {
+        setRootPath(selected);
+        await handleSelectSubfolder(selected, true);
+      }
+    } catch (err) {
+      console.error('Failed to open directory dialog:', err);
+      setError('Failed to open folder selection dialog.');
+    }
+  };
+
+  return handleOpenFolder;
+}
diff --git a/src/hooks/handlers/useHandlePasteAdjustments.ts b/src/hooks/handlers/useHandlePasteAdjustments.ts
new file mode 100644
index 000000000..2d447ebe7
--- /dev/null
+++ b/src/hooks/handlers/useHandlePasteAdjustments.ts
@@ -0,0 +1,67 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Adjustments, PasteMode, INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandlePasteAdjustments() {
+  const { copiedAdjustments, appSettings, setIsPasted, multiSelectedPaths, selectedImage, adjustments, setError } =
+    useAppState();
+
+  const setAdjustments = useSetAdjustments();
+
+  const handlePasteAdjustments = useCallback(
+    (paths?: Array<string>) => {
+      if (!copiedAdjustments || !appSettings) {
+        return;
+      }
+
+      const { mode, includedAdjustments } = appSettings.copyPasteSettings;
+
+      const adjustmentsToApply: Partial<Adjustments> = {};
+
+      for (const key of includedAdjustments) {
+        if (Object.prototype.hasOwnProperty.call(copiedAdjustments, key)) {
+          const value = copiedAdjustments[key as keyof Adjustments];
+
+          if (mode === PasteMode.Merge) {
+            const defaultValue = INITIAL_ADJUSTMENTS[key as keyof Adjustments];
+            if (JSON.stringify(value) !== JSON.stringify(defaultValue)) {
+              adjustmentsToApply[key as keyof Adjustments] = value;
+            }
+          } else {
+            adjustmentsToApply[key as keyof Adjustments] = value;
+          }
+        }
+      }
+
+      if (Object.keys(adjustmentsToApply).length === 0) {
+        setIsPasted(true);
+        return;
+      }
+
+      const pathsToUpdate =
+        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
+      if (pathsToUpdate.length === 0) {
+        return;
+      }
+
+      if (selectedImage && pathsToUpdate.includes(selectedImage.path)) {
+        const newAdjustments = { ...adjustments, ...adjustmentsToApply };
+        setAdjustments(newAdjustments);
+      }
+
+      invoke(Invokes.ApplyAdjustmentsToPaths, { paths: pathsToUpdate, adjustments: adjustmentsToApply }).catch(
+        (err) => {
+          console.error('Failed to paste adjustments to multiple images:', err);
+          setError(`Failed to paste adjustments: ${err}`);
+        },
+      );
+      setIsPasted(true);
+    },
+    [copiedAdjustments, appSettings, multiSelectedPaths, selectedImage, adjustments, setAdjustments],
+  );
+
+  return handlePasteAdjustments;
+}
diff --git a/src/hooks/handlers/useHandlePasteFiles.ts b/src/hooks/handlers/useHandlePasteFiles.ts
new file mode 100644
index 000000000..60616b181
--- /dev/null
+++ b/src/hooks/handlers/useHandlePasteFiles.ts
@@ -0,0 +1,32 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useRefreshImageList } from './useRefreshImageList';
+
+export function useHandlePasteFiles() {
+  const { copiedFilePaths, currentFolderPath, setCopiedFilePaths, setError } = useAppState();
+  const refreshImageList = useRefreshImageList();
+
+  const handlePasteFiles = useCallback(
+    async (mode = 'copy') => {
+      if (copiedFilePaths.length === 0 || !currentFolderPath) {
+        return;
+      }
+      try {
+        if (mode === 'copy')
+          await invoke(Invokes.CopyFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
+        else {
+          await invoke(Invokes.MoveFiles, { sourcePaths: copiedFilePaths, destinationFolder: currentFolderPath });
+          setCopiedFilePaths([]);
+        }
+        await refreshImageList();
+      } catch (err) {
+        setError(`Failed to ${mode} files: ${err}`);
+      }
+    },
+    [copiedFilePaths, currentFolderPath, refreshImageList],
+  );
+
+  return handlePasteFiles;
+}
diff --git a/src/hooks/handlers/useHandleQuickErase.ts b/src/hooks/handlers/useHandleQuickErase.ts
new file mode 100644
index 000000000..135031168
--- /dev/null
+++ b/src/hooks/handlers/useHandleQuickErase.ts
@@ -0,0 +1,145 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+import { invoke } from '@tauri-apps/api/core';
+import { SubMask } from '../../components/panel/right/Masks';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Coord, AiPatch, Adjustments } from '../../utils/adjustments';
+
+export function useHandleQuickErase() {
+  const {
+    selectedImage,
+    isGeneratingAi,
+    adjustments,
+    setIsGeneratingAi,
+    patchesSentToBackend,
+    setActiveAiPatchContainerId,
+    setActiveAiSubMaskId,
+    setError,
+  } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleQuickErase = useCallback(
+    async (subMaskId: string | null, startPoint: Coord, endPoint: Coord) => {
+      if (!selectedImage?.path || isGeneratingAi) {
+        return;
+      }
+
+      const patchId = adjustments.aiPatches.find((p: AiPatch) =>
+        p.subMasks.some((sm: SubMask) => sm.id === subMaskId),
+      )?.id;
+      if (!patchId) {
+        console.error('Could not find AI patch container for Quick Erase.');
+        return;
+      }
+
+      setIsGeneratingAi(true);
+      setAdjustments((prev: Partial<Adjustments>) => ({
+        ...prev,
+        aiPatches: prev.aiPatches?.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: true } : p)),
+      }));
+
+      try {
+        const transformAdjustments = {
+          transformDistortion: adjustments.transformDistortion,
+          transformVertical: adjustments.transformVertical,
+          transformHorizontal: adjustments.transformHorizontal,
+          transformRotate: adjustments.transformRotate,
+          transformAspect: adjustments.transformAspect,
+          transformScale: adjustments.transformScale,
+          transformXOffset: adjustments.transformXOffset,
+          transformYOffset: adjustments.transformYOffset,
+          lensDistortionAmount: adjustments.lensDistortionAmount,
+          lensVignetteAmount: adjustments.lensVignetteAmount,
+          lensTcaAmount: adjustments.lensTcaAmount,
+          lensDistortionParams: adjustments.lensDistortionParams,
+          lensMaker: adjustments.lensMaker,
+          lensModel: adjustments.lensModel,
+          lensDistortionEnabled: adjustments.lensDistortionEnabled,
+          lensTcaEnabled: adjustments.lensTcaEnabled,
+          lensVignetteEnabled: adjustments.lensVignetteEnabled,
+        };
+
+        const newMaskParams: any = await invoke(Invokes.GenerateAiSubjectMask, {
+          jsAdjustments: transformAdjustments,
+          endPoint: [endPoint.x, endPoint.y],
+          flipHorizontal: adjustments.flipHorizontal,
+          flipVertical: adjustments.flipVertical,
+          orientationSteps: adjustments.orientationSteps,
+          path: selectedImage.path,
+          rotation: adjustments.rotation,
+          startPoint: [startPoint.x, startPoint.y],
+        });
+
+        const subMaskToUpdate = adjustments.aiPatches
+          ?.find((p: AiPatch) => p.id === patchId)
+          ?.subMasks.find((sm: SubMask) => sm.id === subMaskId);
+        const finalSubMaskParams: any = { ...subMaskToUpdate?.parameters, ...newMaskParams };
+        const updatedAdjustmentsForBackend = {
+          ...adjustments,
+          aiPatches: adjustments.aiPatches.map((p: AiPatch) =>
+            p.id === patchId
+              ? {
+                  ...p,
+                  subMasks: p.subMasks.map((sm: SubMask) =>
+                    sm.id === subMaskId ? { ...sm, parameters: finalSubMaskParams } : sm,
+                  ),
+                }
+              : p,
+          ),
+        };
+
+        const patchDefinitionForBackend = updatedAdjustmentsForBackend.aiPatches.find((p: AiPatch) => p.id === patchId);
+        const newPatchDataJson: any = await invoke(Invokes.InvokeGenerativeReplaseWithMaskDef, {
+          currentAdjustments: updatedAdjustmentsForBackend,
+          patchDefinition: { ...patchDefinitionForBackend, prompt: '' },
+          path: selectedImage.path,
+          useFastInpaint: true,
+        });
+
+        const newPatchData = JSON.parse(newPatchDataJson);
+        if (!newPatchData?.color || !newPatchData?.mask) {
+          throw new Error('Inpainting failed to return a valid result.');
+        }
+        patchesSentToBackend.current.delete(patchId);
+
+        setAdjustments((prev: Partial<Adjustments>) => ({
+          ...prev,
+          aiPatches: prev.aiPatches?.map((p: AiPatch) =>
+            p.id === patchId
+              ? {
+                  ...p,
+                  patchData: newPatchData,
+                  isLoading: false,
+                  subMasks: p.subMasks.map((sm: SubMask) =>
+                    sm.id === subMaskId ? { ...sm, parameters: finalSubMaskParams } : sm,
+                  ),
+                }
+              : p,
+          ),
+        }));
+        setActiveAiPatchContainerId(null);
+        setActiveAiSubMaskId(null);
+      } catch (err: any) {
+        console.error('Quick Erase failed:', err);
+        setError(`Quick Erase Failed: ${err.message || String(err)}`);
+        setAdjustments((prev: Partial<Adjustments>) => ({
+          ...prev,
+          aiPatches: prev.aiPatches?.map((p: AiPatch) => (p.id === patchId ? { ...p, isLoading: false } : p)),
+        }));
+      } finally {
+        setIsGeneratingAi(false);
+      }
+    },
+    [
+      selectedImage?.path,
+      isGeneratingAi,
+      adjustments,
+      setAdjustments,
+      setActiveAiPatchContainerId,
+      setActiveAiSubMaskId,
+    ],
+  );
+
+  return handleQuickErase;
+}
diff --git a/src/hooks/handlers/useHandleRate.ts b/src/hooks/handlers/useHandleRate.ts
new file mode 100644
index 000000000..e5389f419
--- /dev/null
+++ b/src/hooks/handlers/useHandleRate.ts
@@ -0,0 +1,72 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandleRate() {
+  const {
+    multiSelectedPaths,
+    selectedImage,
+    libraryActivePath,
+    adjustments,
+    libraryActiveAdjustments,
+    setImageRatings,
+    setError,
+    setLibraryActiveAdjustments,
+  } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleRate = useCallback(
+    (newRating: number, paths?: Array<string>) => {
+      const pathsToRate =
+        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
+      if (pathsToRate.length === 0) {
+        return;
+      }
+
+      let currentRating = 0;
+      if (selectedImage && pathsToRate.includes(selectedImage.path)) {
+        currentRating = adjustments.rating;
+      } else if (libraryActivePath && pathsToRate.includes(libraryActivePath)) {
+        currentRating = libraryActiveAdjustments.rating;
+      }
+
+      const finalRating = newRating === currentRating ? 0 : newRating;
+
+      setImageRatings((prev: Record<string, number>) => {
+        const newRatings = { ...prev };
+        pathsToRate.forEach((path: string) => {
+          newRatings[path] = finalRating;
+        });
+        return newRatings;
+      });
+
+      if (selectedImage && pathsToRate.includes(selectedImage.path)) {
+        setAdjustments((prev: Adjustments) => ({ ...prev, rating: finalRating }));
+      }
+
+      if (libraryActivePath && pathsToRate.includes(libraryActivePath)) {
+        setLibraryActiveAdjustments((prev) => ({ ...prev, rating: finalRating }));
+      }
+
+      invoke(Invokes.ApplyAdjustmentsToPaths, { paths: pathsToRate, adjustments: { rating: finalRating } }).catch(
+        (err) => {
+          console.error('Failed to apply rating to paths:', err);
+          setError(`Failed to apply rating: ${err}`);
+        },
+      );
+    },
+    [
+      multiSelectedPaths,
+      selectedImage,
+      libraryActivePath,
+      adjustments.rating,
+      libraryActiveAdjustments.rating,
+      setAdjustments,
+    ],
+  );
+
+  return handleRate;
+}
diff --git a/src/hooks/handlers/useHandleRenameFiles.ts b/src/hooks/handlers/useHandleRenameFiles.ts
new file mode 100644
index 000000000..be95ff1c0
--- /dev/null
+++ b/src/hooks/handlers/useHandleRenameFiles.ts
@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleRenameFiles() {
+  const { setRenameTargetPaths, setIsRenameFileModalOpen } = useAppState();
+
+  const handleRenameFiles = useCallback(async (paths: Array<string>) => {
+    if (paths && paths.length > 0) {
+      setRenameTargetPaths(paths);
+      setIsRenameFileModalOpen(true);
+    }
+  }, []);
+
+  return handleRenameFiles;
+}
diff --git a/src/hooks/handlers/useHandleRenameFolder.ts b/src/hooks/handlers/useHandleRenameFolder.ts
new file mode 100644
index 000000000..666913dba
--- /dev/null
+++ b/src/hooks/handlers/useHandleRenameFolder.ts
@@ -0,0 +1,58 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useAppState } from '../../context/ContextProviders';
+import { Invokes, AppSettings } from '../../components/ui/AppProperties';
+import { getParentDir } from '../../utils/helpers';
+import { useHandleSettingsChange } from './useHandleSettingsChange';
+import { useRefreshAllFolderTrees } from './useRefreshAllFolderTrees';
+
+export function useHandleRenameFolder() {
+  const { setError, folderActionTarget, appSettings, setCurrentFolderPath, currentFolderPath, setRootPath, rootPath } =
+    useAppState();
+
+  const handleSettingsChange = useHandleSettingsChange();
+  const refreshAllFolderTrees = useRefreshAllFolderTrees();
+
+  const handleRenameFolder = async (newName: string) => {
+    if (newName && newName.trim() !== '' && folderActionTarget) {
+      try {
+        const oldPath = folderActionTarget;
+        const trimmedNewName = newName.trim();
+
+        await invoke(Invokes.RenameFolder, { path: oldPath, newName: trimmedNewName });
+
+        const parentDir = getParentDir(oldPath);
+        const separator = oldPath.includes('/') ? '/' : '\\';
+        const newPath = parentDir ? `${parentDir}${separator}${trimmedNewName}` : trimmedNewName;
+
+        const newAppSettings = { ...appSettings } as AppSettings;
+        let settingsChanged = false;
+
+        if (rootPath === oldPath) {
+          setRootPath(newPath);
+          newAppSettings.lastRootPath = newPath;
+          settingsChanged = true;
+        }
+        if (currentFolderPath?.startsWith(oldPath)) {
+          const newCurrentPath = currentFolderPath.replace(oldPath, newPath);
+          setCurrentFolderPath(newCurrentPath);
+        }
+
+        const currentPins = appSettings?.pinnedFolders || [];
+        if (currentPins.includes(oldPath)) {
+          const newPins = currentPins.map((p) => (p === oldPath ? newPath : p)).sort((a, b) => a.localeCompare(b));
+          newAppSettings.pinnedFolders = newPins;
+          settingsChanged = true;
+        }
+
+        if (settingsChanged) {
+          handleSettingsChange(newAppSettings);
+        }
+
+        await refreshAllFolderTrees();
+      } catch (err) {
+        setError(`Failed to rename folder: ${err}`);
+      }
+    }
+  };
+  return handleRenameFolder;
+}
diff --git a/src/hooks/handlers/useHandleResetAdjustments.ts b/src/hooks/handlers/useHandleResetAdjustments.ts
new file mode 100644
index 000000000..b24b5a295
--- /dev/null
+++ b/src/hooks/handlers/useHandleResetAdjustments.ts
@@ -0,0 +1,65 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { Adjustments, INITIAL_ADJUSTMENTS } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useDebouncedSetHistory } from './useDebouncedSetHistory';
+
+export function useHandleResetAdjustments() {
+  const {
+    multiSelectedPaths,
+    libraryActivePath,
+    selectedImage,
+    history,
+    setLibraryActiveAdjustments,
+    adjustments,
+    setError,
+  } = useAppState();
+  const { resetHistory: resetAdjustmentsHistory } = history;
+  const debouncedSetHistory = useDebouncedSetHistory();
+
+  const handleResetAdjustments = useCallback(
+    (paths?: Array<string>) => {
+      const pathsToReset = paths || multiSelectedPaths;
+      if (pathsToReset.length === 0) {
+        return;
+      }
+
+      debouncedSetHistory.cancel();
+
+      invoke(Invokes.ResetAdjustmentsForPaths, { paths: pathsToReset })
+        .then(() => {
+          if (libraryActivePath && pathsToReset.includes(libraryActivePath)) {
+            setLibraryActiveAdjustments((prev: Adjustments) => ({ ...INITIAL_ADJUSTMENTS, rating: prev.rating }));
+          }
+          if (selectedImage && pathsToReset.includes(selectedImage.path)) {
+            const currentRating = adjustments.rating;
+
+            const originalAspectRatio =
+              selectedImage.width && selectedImage.height ? selectedImage.width / selectedImage.height : null;
+
+            resetAdjustmentsHistory({
+              ...INITIAL_ADJUSTMENTS,
+              aspectRatio: originalAspectRatio,
+              rating: currentRating,
+              aiPatches: [],
+            });
+          }
+        })
+        .catch((err) => {
+          console.error('Failed to reset adjustments:', err);
+          setError(`Failed to reset adjustments: ${err}`);
+        });
+    },
+    [
+      multiSelectedPaths,
+      libraryActivePath,
+      selectedImage,
+      adjustments.rating,
+      resetAdjustmentsHistory,
+      debouncedSetHistory,
+    ],
+  );
+
+  return handleResetAdjustments;
+}
diff --git a/src/hooks/handlers/useHandleRightPanelSelect.ts b/src/hooks/handlers/useHandleRightPanelSelect.ts
new file mode 100644
index 000000000..0bb639db4
--- /dev/null
+++ b/src/hooks/handlers/useHandleRightPanelSelect.ts
@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { Panel } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+const RIGHT_PANEL_ORDER = [
+  Panel.Metadata,
+  Panel.Adjustments,
+  Panel.Crop,
+  Panel.Masks,
+  Panel.Ai,
+  Panel.Presets,
+  Panel.Export,
+];
+
+export function useHandleRightPanelSelect() {
+  const {
+    activeRightPanel,
+    setActiveRightPanel,
+    setSlideDirection,
+    setRenderedRightPanel,
+    setActiveMaskId,
+    setActiveAiSubMaskId,
+  } = useAppState();
+
+  const handleRightPanelSelect = useCallback(
+    (panelId: Panel) => {
+      if (panelId === activeRightPanel) {
+        setActiveRightPanel(null);
+      } else {
+        const currentIndex = activeRightPanel ? RIGHT_PANEL_ORDER.indexOf(activeRightPanel) : -1;
+        const newIndex = RIGHT_PANEL_ORDER.indexOf(panelId);
+        setSlideDirection(newIndex > currentIndex ? 1 : -1);
+        setActiveRightPanel(panelId);
+        setRenderedRightPanel(panelId);
+      }
+      setActiveMaskId(null);
+      setActiveAiSubMaskId(null);
+    },
+    [activeRightPanel],
+  );
+
+  return handleRightPanelSelect;
+}
diff --git a/src/hooks/handlers/useHandleSaveCollage.ts b/src/hooks/handlers/useHandleSaveCollage.ts
new file mode 100644
index 000000000..0454c321b
--- /dev/null
+++ b/src/hooks/handlers/useHandleSaveCollage.ts
@@ -0,0 +1,26 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useRefreshImageList } from './useRefreshImageList';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleSaveCollage() {
+  const { setError } = useAppState();
+  const refreshImageList = useRefreshImageList();
+
+  const handleSaveCollage = async (base64Data: string, firstPath: string): Promise<string> => {
+    try {
+      const savedPath: string = await invoke(Invokes.SaveCollage, {
+        base64Data,
+        firstPathStr: firstPath,
+      });
+      await refreshImageList();
+      return savedPath;
+    } catch (err) {
+      console.error('Failed to save collage:', err);
+      setError(`Failed to save collage: ${err}`);
+      throw err;
+    }
+  };
+
+  return handleSaveCollage;
+}
diff --git a/src/hooks/handlers/useHandleSaveDenoisedImage.ts b/src/hooks/handlers/useHandleSaveDenoisedImage.ts
new file mode 100644
index 000000000..a8a89d975
--- /dev/null
+++ b/src/hooks/handlers/useHandleSaveDenoisedImage.ts
@@ -0,0 +1,20 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useRefreshImageList } from './useRefreshImageList';
+
+export function useHandleSaveDenoisedImage() {
+  const { denoiseModalState } = useAppState();
+  const refreshImageList = useRefreshImageList();
+
+  const handleSaveDenoisedImage = async (): Promise<string> => {
+    if (!denoiseModalState.targetPath) throw new Error('No target path');
+    const savedPath = await invoke<string>(Invokes.SaveDenoisedImage, {
+      originalPathStr: denoiseModalState.targetPath,
+    });
+    await refreshImageList();
+    return savedPath;
+  };
+
+  return handleSaveDenoisedImage;
+}
diff --git a/src/hooks/handlers/useHandleSaveHdr.ts b/src/hooks/handlers/useHandleSaveHdr.ts
new file mode 100644
index 000000000..d71af571e
--- /dev/null
+++ b/src/hooks/handlers/useHandleSaveHdr.ts
@@ -0,0 +1,32 @@
+import { invoke } from '@tauri-apps/api/core';
+import { HdrModalState } from '../../App';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useRefreshImageList } from './useRefreshImageList';
+
+export function useHandleSaveHdr() {
+  const { hdrModalState, setHdrModalState } = useAppState();
+  const refreshImageList = useRefreshImageList();
+
+  const handleSaveHdr = async (): Promise<string> => {
+    if (hdrModalState.stitchingSourcePaths.length === 0) {
+      const err = 'Source paths for HDR not found.';
+      setHdrModalState((prev: HdrModalState) => ({ ...prev, error: err }));
+      throw new Error(err);
+    }
+
+    try {
+      const savedPath: string = await invoke(Invokes.SaveHdr, {
+        firstPathStr: hdrModalState.stitchingSourcePaths[0],
+      });
+      await refreshImageList();
+      return savedPath;
+    } catch (err) {
+      console.error('Failed to save HDR image:', err);
+      setHdrModalState((prev: HdrModalState) => ({ ...prev, error: String(err) }));
+      throw err;
+    }
+  };
+
+  return handleSaveHdr;
+}
diff --git a/src/hooks/handlers/useHandleSavePanorama.ts b/src/hooks/handlers/useHandleSavePanorama.ts
new file mode 100644
index 000000000..4d5105ebc
--- /dev/null
+++ b/src/hooks/handlers/useHandleSavePanorama.ts
@@ -0,0 +1,32 @@
+import { invoke } from '@tauri-apps/api/core';
+import { PanoramaModalState } from '../../App';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useRefreshImageList } from './useRefreshImageList';
+
+export function useHandleSavePanorama() {
+  const { panoramaModalState, setPanoramaModalState } = useAppState();
+  const refreshImageList = useRefreshImageList();
+
+  const handleSavePanorama = async (): Promise<string> => {
+    if (panoramaModalState.stitchingSourcePaths.length === 0) {
+      const err = 'Source paths for panorama not found.';
+      setPanoramaModalState((prev: PanoramaModalState) => ({ ...prev, error: err }));
+      throw new Error(err);
+    }
+
+    try {
+      const savedPath: string = await invoke(Invokes.SavePanorama, {
+        firstPathStr: panoramaModalState.stitchingSourcePaths[0],
+      });
+      await refreshImageList();
+      return savedPath;
+    } catch (err) {
+      console.error('Failed to save panorama:', err);
+      setPanoramaModalState((prev: PanoramaModalState) => ({ ...prev, error: String(err) }));
+      throw err;
+    }
+  };
+
+  return handleSavePanorama;
+}
diff --git a/src/hooks/handlers/useHandleSaveRename.ts b/src/hooks/handlers/useHandleSaveRename.ts
new file mode 100644
index 000000000..570823a28
--- /dev/null
+++ b/src/hooks/handlers/useHandleSaveRename.ts
@@ -0,0 +1,67 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleImageSelect } from './useHandleImageSelect';
+import { useHandleBackToLibrary } from './useHandleBackToLibrary';
+import { useRefreshImageList } from './useRefreshImageList';
+
+export function useHandleSaveRename() {
+  const {
+    renameTargetPaths,
+    selectedImage,
+    libraryActivePath,
+    setLibraryActivePath,
+    setMultiSelectedPaths,
+    setError,
+    setRenameTargetPaths,
+  } = useAppState();
+
+  const handleImageSelect = useHandleImageSelect();
+  const handleBackToLibrary = useHandleBackToLibrary();
+  const refreshImageList = useRefreshImageList();
+
+  const handleSaveRename = useCallback(
+    async (nameTemplate: string) => {
+      if (renameTargetPaths.length > 0 && nameTemplate) {
+        try {
+          const newPaths: Array<string> = await invoke(Invokes.RenameFiles, {
+            nameTemplate,
+            paths: renameTargetPaths,
+          });
+
+          await refreshImageList();
+
+          if (selectedImage && renameTargetPaths.includes(selectedImage.path)) {
+            const oldPathIndex = renameTargetPaths.indexOf(selectedImage.path);
+
+            if (newPaths[oldPathIndex]) {
+              handleImageSelect(newPaths[oldPathIndex]);
+            } else {
+              handleBackToLibrary();
+            }
+          }
+
+          if (libraryActivePath && renameTargetPaths.includes(libraryActivePath)) {
+            const oldPathIndex = renameTargetPaths.indexOf(libraryActivePath);
+
+            if (newPaths[oldPathIndex]) {
+              setLibraryActivePath(newPaths[oldPathIndex]);
+            } else {
+              setLibraryActivePath(null);
+            }
+          }
+
+          setMultiSelectedPaths(newPaths);
+        } catch (err) {
+          setError(`Failed to rename files: ${err}`);
+        }
+      }
+
+      setRenameTargetPaths([]);
+    },
+    [renameTargetPaths, refreshImageList, selectedImage, libraryActivePath, handleImageSelect, handleBackToLibrary],
+  );
+
+  return handleSaveRename;
+}
diff --git a/src/hooks/handlers/useHandleSelectSubfolder.ts b/src/hooks/handlers/useHandleSelectSubfolder.ts
new file mode 100644
index 000000000..060137aaa
--- /dev/null
+++ b/src/hooks/handlers/useHandleSelectSubfolder.ts
@@ -0,0 +1,164 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { ImageFile, AppSettings, Invokes, LibraryViewMode } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleSettingsChange } from './useHandleSettingsChange';
+import { useHandleActiveTreeSectionChange } from './useHandleActiveTreeSectionChange';
+
+export function useHandleSelectSubfolder() {
+  const {
+    appSettings,
+    selectedImage,
+    rootPath,
+    sortCriteria,
+    pinnedFolders,
+    libraryViewMode,
+    setIsViewLoading,
+    setIsTreeLoading,
+    setError,
+    setImageList,
+    setHistogram,
+    setUncroppedAdjustedPreviewUrl,
+    setFinalPreviewUrl,
+    setSelectedImage,
+    setLibraryActivePath,
+    setMultiSelectedPaths,
+    setImageRatings,
+    setFolderTree,
+    setExpandedFolders,
+    setActiveView,
+    setCurrentFolderPath,
+    setThumbnails,
+    setLibraryScrollTop,
+    setSearchCriteria,
+  } = useAppState();
+  const handleSettingsChange = useHandleSettingsChange();
+  const handleActiveTreeSectionChange = useHandleActiveTreeSectionChange();
+
+  const handleSelectSubfolder = useCallback(
+    async (path: string | null, isNewRoot = false, preloadedImages?: ImageFile[]) => {
+      await invoke('cancel_thumbnail_generation');
+      setIsViewLoading(true);
+      setSearchCriteria({ tags: [], text: '', mode: 'OR' });
+      setLibraryScrollTop(0);
+      setThumbnails({});
+      try {
+        setCurrentFolderPath(path);
+        setActiveView('library');
+
+        if (isNewRoot) {
+          setExpandedFolders(new Set([path]));
+        } else if (path) {
+          setExpandedFolders((prev) => {
+            const newSet = new Set(prev);
+            const allRoots = [rootPath, ...pinnedFolders].filter(Boolean) as string[];
+            const relevantRoot = allRoots.find((r) => path.startsWith(r));
+
+            if (relevantRoot) {
+              const separator = path.includes('/') ? '/' : '\\';
+              const parentSeparatorIndex = path.lastIndexOf(separator);
+
+              if (parentSeparatorIndex > -1 && path.length > relevantRoot.length) {
+                let current = path.substring(0, parentSeparatorIndex);
+                while (current && current.length >= relevantRoot.length) {
+                  newSet.add(current);
+                  const nextParentIndex = current.lastIndexOf(separator);
+                  if (nextParentIndex === -1 || current === relevantRoot) {
+                    break;
+                  }
+                  current = current.substring(0, nextParentIndex);
+                }
+              }
+              newSet.add(relevantRoot);
+            }
+            return newSet;
+          });
+        }
+
+        if (isNewRoot) {
+          if (path && !pinnedFolders.includes(path)) {
+            handleActiveTreeSectionChange('current');
+          }
+          setIsTreeLoading(true);
+          handleSettingsChange({ ...appSettings, lastRootPath: path } as AppSettings);
+          try {
+            const treeData = await invoke(Invokes.GetFolderTree, { path });
+            setFolderTree(treeData);
+          } catch (err) {
+            console.error('Failed to load folder tree:', err);
+            setError(`Failed to load folder tree: ${err}. Some sub-folders might be inaccessible.`);
+          } finally {
+            setIsTreeLoading(false);
+          }
+        }
+
+        setImageList([]);
+        setImageRatings({});
+        setMultiSelectedPaths([]);
+        setLibraryActivePath(null);
+        if (selectedImage) {
+          setSelectedImage(null);
+          setFinalPreviewUrl(null);
+          setUncroppedAdjustedPreviewUrl(null);
+          setHistogram(null);
+        }
+
+        const command =
+          libraryViewMode === LibraryViewMode.Recursive ? Invokes.ListImagesRecursive : Invokes.ListImagesInDir;
+
+        let files: ImageFile[];
+        if (preloadedImages) {
+          files = preloadedImages;
+        } else {
+          files = await invoke(command, { path });
+        }
+
+        const exifSortKeys = ['date_taken', 'iso', 'shutter_speed', 'aperture', 'focal_length'];
+        const isExifSortActive = exifSortKeys.includes(sortCriteria.key);
+        const shouldReadExif = appSettings?.enableExifReading ?? false;
+
+        if (shouldReadExif && files.length > 0) {
+          const paths = files.map((f: ImageFile) => f.path);
+
+          if (isExifSortActive) {
+            const exifDataMap: Record<string, any> = await invoke(Invokes.ReadExifForPaths, { paths });
+            const finalImageList = files.map((image) => ({
+              ...image,
+              exif: exifDataMap[image.path] || image.exif || null,
+            }));
+            setImageList(finalImageList);
+          } else {
+            setImageList(files);
+            invoke(Invokes.ReadExifForPaths, { paths })
+              .then((exifDataMap: any) => {
+                setImageList((currentImageList) =>
+                  currentImageList.map((image) => ({
+                    ...image,
+                    exif: exifDataMap[image.path] || image.exif || null,
+                  })),
+                );
+              })
+              .catch((err) => {
+                console.error('Failed to read EXIF data in background:', err);
+              });
+          }
+        } else {
+          setImageList(files);
+        }
+
+        invoke(Invokes.StartBackgroundIndexing, { folderPath: path }).catch((err) => {
+          console.error('Failed to start background indexing:', err);
+        });
+      } catch (err) {
+        console.error('Failed to load folder contents:', err);
+        setError('Failed to load images from the selected folder.');
+        setIsTreeLoading(false);
+      } finally {
+        setIsViewLoading(false);
+      }
+    },
+    [appSettings, handleSettingsChange, selectedImage, rootPath, sortCriteria.key, pinnedFolders, libraryViewMode],
+  );
+
+  return handleSelectSubfolder;
+}
diff --git a/src/hooks/handlers/useHandleSetColorLabel.ts b/src/hooks/handlers/useHandleSetColorLabel.ts
new file mode 100644
index 000000000..3056fdcf8
--- /dev/null
+++ b/src/hooks/handlers/useHandleSetColorLabel.ts
@@ -0,0 +1,48 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { ImageFile, Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleSetColorLabel() {
+  const { multiSelectedPaths, selectedImage, libraryActivePath, imageList, setImageList, setError } = useAppState();
+
+  const handleSetColorLabel = useCallback(
+    async (color: string | null, paths?: Array<string>) => {
+      const pathsToUpdate =
+        paths || (multiSelectedPaths.length > 0 ? multiSelectedPaths : selectedImage ? [selectedImage.path] : []);
+      if (pathsToUpdate.length === 0) {
+        return;
+      }
+      const primaryPath = selectedImage?.path || libraryActivePath;
+      const primaryImage = imageList.find((img: ImageFile) => img.path === primaryPath);
+      let currentColor = null;
+      if (primaryImage && primaryImage.tags) {
+        const colorTag = primaryImage.tags.find((tag: string) => tag.startsWith('color:'));
+        if (colorTag) {
+          currentColor = colorTag.substring(6);
+        }
+      }
+      const finalColor = color !== null && color === currentColor ? null : color;
+      try {
+        await invoke(Invokes.SetColorLabelForPaths, { paths: pathsToUpdate, color: finalColor });
+
+        setImageList((prevList: Array<ImageFile>) =>
+          prevList.map((image: ImageFile) => {
+            if (pathsToUpdate.includes(image.path)) {
+              const otherTags = (image.tags || []).filter((tag: string) => !tag.startsWith('color:'));
+              const newTags = finalColor ? [...otherTags, `color:${finalColor}`] : otherTags;
+              return { ...image, tags: newTags };
+            }
+            return image;
+          }),
+        );
+      } catch (err) {
+        console.error('Failed to set color label:', err);
+        setError(`Failed to set color label: ${err}`);
+      }
+    },
+    [multiSelectedPaths, selectedImage, libraryActivePath, imageList],
+  );
+
+  return handleSetColorLabel;
+}
diff --git a/src/hooks/handlers/useHandleSettingsChange.ts b/src/hooks/handlers/useHandleSettingsChange.ts
new file mode 100644
index 000000000..1938e6680
--- /dev/null
+++ b/src/hooks/handlers/useHandleSettingsChange.ts
@@ -0,0 +1,30 @@
+import { setTheme } from '@tauri-apps/api/app';
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { AppSettings, Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleSettingsChange() {
+  const { setAppSettings, theme } = useAppState();
+
+  const handleSettingsChange = useCallback(
+    (newSettings: AppSettings) => {
+      if (!newSettings) {
+        console.error('handleSettingsChange was called with null settings. Aborting save operation.');
+        return;
+      }
+      if (newSettings.theme && newSettings.theme !== theme) {
+        setTheme(newSettings.theme);
+      }
+
+      const { searchCriteria: _searchCriteria, ...settingsToSave } = newSettings as any;
+      setAppSettings(newSettings);
+      invoke(Invokes.SaveSettings, { settings: settingsToSave }).catch((err) => {
+        console.error('Failed to save settings:', err);
+      });
+    },
+    [theme],
+  );
+
+  return handleSettingsChange;
+}
diff --git a/src/hooks/handlers/useHandleStartImport.ts b/src/hooks/handlers/useHandleStartImport.ts
new file mode 100644
index 000000000..7006e0af2
--- /dev/null
+++ b/src/hooks/handlers/useHandleStartImport.ts
@@ -0,0 +1,23 @@
+import { invoke } from '@tauri-apps/api/core';
+import { AppSettings, Invokes } from '../../components/ui/AppProperties';
+import { Status } from '../../components/ui/ExportImportProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleStartImport() {
+  const { importSourcePaths, importTargetFolder, setImportState } = useAppState();
+
+  const handleStartImport = async (settings: AppSettings) => {
+    if (importSourcePaths.length > 0 && importTargetFolder) {
+      invoke(Invokes.ImportFiles, {
+        destinationFolder: importTargetFolder,
+        settings: settings,
+        sourcePaths: importSourcePaths,
+      }).catch((err) => {
+        console.error('Failed to start import:', err);
+        setImportState({ status: Status.Error, errorMessage: `Failed to start import: ${err}` });
+      });
+    }
+  };
+
+  return handleStartImport;
+}
diff --git a/src/hooks/handlers/useHandleStraighten.ts b/src/hooks/handlers/useHandleStraighten.ts
new file mode 100644
index 000000000..67d799122
--- /dev/null
+++ b/src/hooks/handlers/useHandleStraighten.ts
@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandleStraighten() {
+  const { setIsStraightenActive } = useAppState();
+  const setAdjustments = useSetAdjustments();
+
+  const handleStraighten = useCallback(
+    (angleCorrection: number) => {
+      setAdjustments((prev: Partial<Adjustments>) => {
+        const newRotation = (prev.rotation || 0) + angleCorrection;
+        return { ...prev, rotation: newRotation, crop: null };
+      });
+
+      setIsStraightenActive(false);
+    },
+    [setAdjustments],
+  );
+
+  return handleStraighten;
+}
diff --git a/src/hooks/handlers/useHandleTagsChanged.ts b/src/hooks/handlers/useHandleTagsChanged.ts
new file mode 100644
index 000000000..6102c1f68
--- /dev/null
+++ b/src/hooks/handlers/useHandleTagsChanged.ts
@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleTagsChanged() {
+  const { setImageList } = useAppState();
+
+  const handleTagsChanged = useCallback(
+    (changedPaths: string[], newTags: { tag: string; isUser: boolean }[]) => {
+      setImageList((prevList) =>
+        prevList.map((image) => {
+          if (changedPaths.includes(image.path)) {
+            const colorTags = (image.tags || []).filter((t) => t.startsWith('color:'));
+            const prefixedNewTags = newTags.map((t) => (t.isUser ? `user:${t.tag}` : t.tag));
+            const finalTags = [...colorTags, ...prefixedNewTags].sort();
+            return { ...image, tags: finalTags.length > 0 ? finalTags : null };
+          }
+          return image;
+        }),
+      );
+    },
+    [setImageList],
+  );
+
+  return handleTagsChanged;
+}
diff --git a/src/hooks/handlers/useHandleThumbnailContextmenu.ts b/src/hooks/handlers/useHandleThumbnailContextmenu.ts
new file mode 100644
index 000000000..e46c0fad1
--- /dev/null
+++ b/src/hooks/handlers/useHandleThumbnailContextmenu.ts
@@ -0,0 +1,490 @@
+import { invoke } from '@tauri-apps/api/core';
+import {
+  X,
+  Check,
+  Trash2,
+  Edit,
+  Save,
+  Copy,
+  ClipboardPaste,
+  Gauge,
+  Aperture,
+  CopyPlus,
+  Grip,
+  Film,
+  SquaresUnite,
+  Images,
+  LayoutTemplate,
+  Users,
+  FileEdit,
+  Star,
+  Palette,
+  Tag,
+  Folder,
+  RotateCcw,
+} from 'lucide-react';
+import { PanoramaModalState, HdrModalState } from '../../App';
+import { Invokes, Panel, OPTION_SEPARATOR } from '../../components/ui/AppProperties';
+import { useContextMenu } from '../../context/ContextMenuContext';
+import { useAppState } from '../../context/ContextProviders';
+import TaggingSubMenu from '../../context/TaggingSubMenu';
+import {
+  Adjustments,
+  Color,
+  COLOR_LABELS,
+  COPYABLE_ADJUSTMENT_KEYS,
+  INITIAL_ADJUSTMENTS,
+  normalizeLoadedAdjustments,
+} from '../../utils/adjustments';
+import { useHandleResetAdjustments } from './useHandleResetAdjustments';
+import { useHandleTagsChanged } from './useHandleTagsChanged';
+import { useHandleSetColorLabel } from './useHandleSetColorLabel';
+import { useHandleRate } from './useHandleRate';
+import { useHandleRenameFiles } from './useHandleRenameFiles';
+import { useRefreshImageList } from './useRefreshImageList';
+import { useHandlePasteAdjustments } from './useHandlePasteAdjustments';
+import { useHandleImageClick } from './useHandleImageClick';
+import { useHandleImageSelect } from './useHandleImageSelect';
+import { useExecuteDelete } from './useExecuteDelete';
+import { useGetCommonTags } from './useGetCommonTags';
+
+interface Metadata {
+  adjustments: Adjustments;
+  rating: number;
+  tags: Array<string> | null;
+  version: number;
+}
+
+export function useHandleThumbnailContextMenu() {
+  const {
+    multiSelectedPaths,
+    setMultiSelectedPaths,
+    setError,
+    appSettings,
+    setIsCopied,
+    setCopiedFilePaths,
+    setCullingModalState,
+    setCollageModalState,
+    setHdrModalState,
+    setPanoramaModalState,
+    setNegativeModalState,
+    setDenoiseModalState,
+    copiedAdjustments,
+    setCopiedAdjustments,
+    imageList,
+    setIsLibraryExportPanelVisible,
+    setActiveRightPanel,
+    setRenderedRightPanel,
+    selectedImage,
+    setLibraryActiveAdjustments,
+    libraryActivePath,
+    history,
+    setAdjustments: setLiveAdjustments,
+    setLibraryActivePath,
+  } = useAppState();
+  const { showContextMenu } = useContextMenu();
+  const { resetHistory: resetAdjustmentsHistory } = history;
+
+  const handleResetAdjustments = useHandleResetAdjustments();
+  const handleTagsChanged = useHandleTagsChanged();
+  const handleSetColorLabel = useHandleSetColorLabel();
+  const handleRate = useHandleRate();
+  const handleRenameFiles = useHandleRenameFiles();
+  const refreshImageList = useRefreshImageList();
+  const handlePasteAdjustments = useHandlePasteAdjustments();
+  const handleImageSelect = useHandleImageSelect();
+  const executeDelete = useExecuteDelete();
+  const getCommonTags = useGetCommonTags();
+
+  const handleThumbnailContextMenu = (event: any, path: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const isTargetInSelection = multiSelectedPaths.includes(path);
+    let finalSelection;
+
+    if (!isTargetInSelection) {
+      finalSelection = [path];
+      setMultiSelectedPaths([path]);
+      if (!selectedImage) {
+        setLibraryActivePath(path);
+      }
+    } else {
+      finalSelection = multiSelectedPaths;
+    }
+
+    const commonTags = getCommonTags(finalSelection);
+
+    const selectionCount = finalSelection.length;
+    const isSingleSelection = selectionCount === 1;
+    const isEditingThisImage = selectedImage?.path === path;
+    const deleteLabel = isSingleSelection ? 'Delete Image' : `Delete ${selectionCount} Images`;
+    const exportLabel = isSingleSelection ? 'Export Image' : `Export ${selectionCount} Images`;
+
+    const selectionHasVirtualCopies =
+      isSingleSelection &&
+      !finalSelection[0].includes('?vc=') &&
+      imageList.some((image) => image.path.startsWith(`${finalSelection[0]}?vc=`));
+
+    const hasAssociatedFiles = finalSelection.some((selectedPath) => {
+      const lastDotIndex = selectedPath.lastIndexOf('.');
+      if (lastDotIndex === -1) return false;
+      const basePath = selectedPath.substring(0, lastDotIndex);
+      return imageList.some((image) => image.path.startsWith(basePath + '.') && image.path !== selectedPath);
+    });
+
+    let deleteSubmenu;
+    if (selectionHasVirtualCopies) {
+      deleteSubmenu = [
+        { label: 'Cancel', icon: X, onClick: () => {} },
+        {
+          label: 'Confirm Delete + Virtual Copies',
+          icon: Check,
+          isDestructive: true,
+          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
+        },
+      ];
+    } else if (hasAssociatedFiles) {
+      deleteSubmenu = [
+        { label: 'Cancel', icon: X, onClick: () => {} },
+        {
+          label: 'Delete Selected Only',
+          icon: Check,
+          isDestructive: true,
+          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
+        },
+        {
+          label: 'Delete + Associated',
+          icon: Check,
+          isDestructive: true,
+          onClick: () => executeDelete(finalSelection, { includeAssociated: true }),
+        },
+      ];
+    } else {
+      deleteSubmenu = [
+        { label: 'Cancel', icon: X, onClick: () => {} },
+        {
+          label: 'Confirm',
+          icon: Check,
+          isDestructive: true,
+          onClick: () => executeDelete(finalSelection, { includeAssociated: false }),
+        },
+      ];
+    }
+
+    const deleteOption = {
+      label: deleteLabel,
+      icon: Trash2,
+      isDestructive: true,
+      submenu: deleteSubmenu,
+    };
+
+    const pasteLabel = isSingleSelection ? 'Paste Adjustments' : `Paste Adjustments to ${selectionCount} Images`;
+    const resetLabel = isSingleSelection ? 'Reset Adjustments' : `Reset Adjustments on ${selectionCount} Images`;
+    const copyLabel = isSingleSelection ? 'Copy Image' : `Copy ${selectionCount} Images`;
+    const autoAdjustLabel = isSingleSelection ? 'Auto Adjust Image' : `Auto Adjust Images`;
+    const renameLabel = isSingleSelection ? 'Rename Image' : `Rename ${selectionCount} Images`;
+    const cullLabel = isSingleSelection ? 'Cull Image' : `Cull Images`;
+    const collageLabel = isSingleSelection ? 'Frame Image' : 'Create Collage';
+    const stitchLabel = `Stitch Panorama`;
+    const mergeLabel = `Merge to HDR`;
+
+    const handleCreateVirtualCopy = async (sourcePath: string) => {
+      try {
+        await invoke(Invokes.CreateVirtualCopy, { sourceVirtualPath: sourcePath });
+        await refreshImageList();
+      } catch (err) {
+        console.error('Failed to create virtual copy:', err);
+        setError(`Failed to create virtual copy: ${err}`);
+      }
+    };
+
+    const handleApplyAutoAdjustmentsToSelection = () => {
+      if (finalSelection.length === 0) return;
+
+      invoke(Invokes.ApplyAutoAdjustmentsToPaths, { paths: finalSelection })
+        .then(async () => {
+          if (selectedImage && finalSelection.includes(selectedImage.path)) {
+            const metadata: Metadata = await invoke(Invokes.LoadMetadata, {
+              path: selectedImage.path,
+            });
+            if (metadata.adjustments && !metadata.adjustments.is_null) {
+              const normalized = normalizeLoadedAdjustments(metadata.adjustments);
+              setLiveAdjustments(normalized);
+              resetAdjustmentsHistory(normalized);
+            }
+          }
+          if (libraryActivePath && finalSelection.includes(libraryActivePath)) {
+            const metadata: Metadata = await invoke(Invokes.LoadMetadata, {
+              path: libraryActivePath,
+            });
+            if (metadata.adjustments && !metadata.adjustments.is_null) {
+              const normalized = normalizeLoadedAdjustments(metadata.adjustments);
+              setLibraryActiveAdjustments(normalized);
+            }
+          }
+        })
+        .catch((err) => {
+          console.error('Failed to apply auto adjustments to paths:', err);
+          setError(`Failed to apply auto adjustments: ${err}`);
+        });
+    };
+
+    const onExportClick = () => {
+      if (selectedImage) {
+        if (selectedImage.path !== path) {
+          handleImageSelect(path);
+        }
+        setRenderedRightPanel(Panel.Export);
+        setActiveRightPanel(Panel.Export);
+      } else {
+        setIsLibraryExportPanelVisible(true);
+      }
+    };
+
+    const options = [
+      ...(!isEditingThisImage
+        ? [
+            {
+              disabled: !isSingleSelection,
+              icon: Edit,
+              label: 'Edit Image',
+              onClick: () => handleImageSelect(finalSelection[0]),
+            },
+            {
+              icon: Save,
+              label: exportLabel,
+              onClick: onExportClick,
+            },
+            { type: OPTION_SEPARATOR },
+          ]
+        : [
+            {
+              icon: Save,
+              label: exportLabel,
+              onClick: onExportClick,
+            },
+            { type: OPTION_SEPARATOR },
+          ]),
+      {
+        disabled: !isSingleSelection,
+        icon: Copy,
+        label: 'Copy Adjustments',
+        onClick: async () => {
+          try {
+            const metadata: any = await invoke(Invokes.LoadMetadata, { path: finalSelection[0] });
+            const sourceAdjustments =
+              metadata.adjustments && !metadata.adjustments.is_null
+                ? { ...INITIAL_ADJUSTMENTS, ...metadata.adjustments }
+                : INITIAL_ADJUSTMENTS;
+            const adjustmentsToCopy: any = {};
+            for (const key of COPYABLE_ADJUSTMENT_KEYS) {
+              if (Object.prototype.hasOwnProperty.call(sourceAdjustments, key)) {
+                adjustmentsToCopy[key] = sourceAdjustments[key];
+              }
+            }
+            setCopiedAdjustments(adjustmentsToCopy);
+            setIsCopied(true);
+          } catch (err) {
+            console.error('Failed to load metadata for copy:', err);
+            setError(`Failed to copy adjustments: ${err}`);
+          }
+        },
+      },
+      {
+        disabled: copiedAdjustments === null,
+        icon: ClipboardPaste,
+        label: pasteLabel,
+        onClick: handlePasteAdjustments,
+      },
+      {
+        label: 'Productivity',
+        icon: Gauge,
+        submenu: [
+          {
+            label: autoAdjustLabel,
+            icon: Aperture,
+            onClick: handleApplyAutoAdjustmentsToSelection,
+          },
+          {
+            disabled: !isSingleSelection,
+            icon: CopyPlus,
+            label: 'Create Virtual Copy',
+            onClick: () => handleCreateVirtualCopy(finalSelection[0]),
+          },
+          {
+            label: 'Denoise',
+            icon: Grip,
+            disabled: !isSingleSelection,
+            onClick: () => {
+              setDenoiseModalState({
+                isOpen: true,
+                isProcessing: false,
+                previewBase64: null,
+                error: null,
+                targetPath: finalSelection[0],
+                progressMessage: null,
+              });
+            },
+          },
+          {
+            label: 'Convert Negative',
+            icon: Film,
+            disabled: !isSingleSelection,
+            onClick: () => {
+              setNegativeModalState({
+                isOpen: true,
+                targetPath: finalSelection[0],
+              });
+            },
+          },
+          {
+            disabled: selectionCount < 2 || selectionCount > 30,
+            icon: SquaresUnite,
+            label: stitchLabel,
+            onClick: () => {
+              setPanoramaModalState({
+                error: null,
+                finalImageBase64: null,
+                isOpen: true,
+                progressMessage: 'Starting panorama process...',
+                stitchingSourcePaths: finalSelection,
+              });
+              invoke(Invokes.StitchPanorama, { paths: finalSelection }).catch((err) => {
+                setPanoramaModalState((prev: PanoramaModalState) => ({
+                  ...prev,
+                  error: String(err),
+                  isOpen: true,
+                  progressMessage: 'Failed to start.',
+                }));
+              });
+            },
+          },
+          {
+            disabled: selectionCount < 2 || selectionCount > 9,
+            icon: Images,
+            label: mergeLabel,
+            onClick: () => {
+              setHdrModalState({
+                error: null,
+                finalImageBase64: null,
+                isOpen: true,
+                progressMessage: 'Starting hdr process...',
+                stitchingSourcePaths: finalSelection,
+              });
+              invoke(Invokes.MergeHdr, { paths: finalSelection }).catch((err) => {
+                setHdrModalState((prev: HdrModalState) => ({
+                  ...prev,
+                  error: String(err),
+                  isOpen: true,
+                  progressMessage: 'Failed to start.',
+                }));
+              });
+            },
+          },
+          {
+            icon: LayoutTemplate,
+            label: collageLabel,
+            onClick: () => {
+              const imagesForCollage = imageList.filter((img) => finalSelection.includes(img.path));
+              setCollageModalState({
+                isOpen: true,
+                sourceImages: imagesForCollage,
+              });
+            },
+            disabled: selectionCount === 0 || selectionCount > 9,
+          },
+          {
+            label: cullLabel,
+            icon: Users,
+            onClick: () =>
+              setCullingModalState({
+                isOpen: true,
+                progress: null,
+                suggestions: null,
+                error: null,
+                pathsToCull: finalSelection,
+              }),
+            disabled: selectionCount < 2,
+          },
+        ],
+      },
+      { type: OPTION_SEPARATOR },
+      {
+        label: copyLabel,
+        icon: Copy,
+        onClick: () => {
+          setCopiedFilePaths(finalSelection);
+          setIsCopied(true);
+        },
+      },
+      {
+        disabled: !isSingleSelection,
+        icon: CopyPlus,
+        label: 'Duplicate Image',
+        onClick: async () => {
+          try {
+            await invoke(Invokes.DuplicateFile, { path: finalSelection[0] });
+            await refreshImageList();
+          } catch (err) {
+            console.error('Failed to duplicate file:', err);
+            setError(`Failed to duplicate file: ${err}`);
+          }
+        },
+      },
+      { icon: FileEdit, label: renameLabel, onClick: () => handleRenameFiles(finalSelection) },
+      { type: OPTION_SEPARATOR },
+      {
+        icon: Star,
+        label: 'Rating',
+        submenu: [0, 1, 2, 3, 4, 5].map((rating: number) => ({
+          label: rating === 0 ? 'No Rating' : `${rating} Star${rating !== 1 ? 's' : ''}`,
+          onClick: () => handleRate(rating, finalSelection),
+        })),
+      },
+      {
+        label: 'Color Label',
+        icon: Palette,
+        submenu: [
+          { label: 'No Label', onClick: () => handleSetColorLabel(null, finalSelection) },
+          ...COLOR_LABELS.map((label: Color) => ({
+            label: label.name.charAt(0).toUpperCase() + label.name.slice(1),
+            color: label.color,
+            onClick: () => handleSetColorLabel(label.name, finalSelection),
+          })),
+        ],
+      },
+      {
+        label: 'Tagging',
+        icon: Tag,
+        submenu: [
+          {
+            customComponent: TaggingSubMenu,
+            customProps: {
+              paths: finalSelection,
+              initialTags: commonTags,
+              onTagsChanged: handleTagsChanged,
+              appSettings,
+            },
+          },
+        ],
+      },
+      { type: OPTION_SEPARATOR },
+      {
+        disabled: !isSingleSelection,
+        icon: Folder,
+        label: 'Show in File Explorer',
+        onClick: () => {
+          invoke(Invokes.ShowInFinder, { path: finalSelection[0] }).catch((err) =>
+            setError(`Could not show file in explorer: ${err}`),
+          );
+        },
+      },
+      { label: resetLabel, icon: RotateCcw, onClick: () => handleResetAdjustments(finalSelection) },
+      deleteOption,
+    ];
+    showContextMenu(event.clientX, event.clientY, options);
+  };
+
+  return handleThumbnailContextMenu;
+}
diff --git a/src/hooks/handlers/useHandleToggleAiPatchVisibility.ts b/src/hooks/handlers/useHandleToggleAiPatchVisibility.ts
new file mode 100644
index 000000000..fe3bf6ae6
--- /dev/null
+++ b/src/hooks/handlers/useHandleToggleAiPatchVisibility.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { Adjustments, AiPatch } from '../../utils/adjustments';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useHandleToggleAiPatchVisibility() {
+  const setAdjustments = useSetAdjustments();
+
+  const handleToggleAiPatchVisibility = useCallback(
+    (patchId: string) => {
+      setAdjustments((prev: Adjustments) => ({
+        ...prev,
+        aiPatches: (prev.aiPatches || []).map((p: AiPatch) => (p.id === patchId ? { ...p, visible: !p.visible } : p)),
+      }));
+    },
+    [setAdjustments],
+  );
+
+  return handleToggleAiPatchVisibility;
+}
diff --git a/src/hooks/handlers/useHandleToggleFolder.ts b/src/hooks/handlers/useHandleToggleFolder.ts
new file mode 100644
index 000000000..8ff1dc475
--- /dev/null
+++ b/src/hooks/handlers/useHandleToggleFolder.ts
@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleToggleFolder() {
+  const { setExpandedFolders } = useAppState();
+
+  const handleToggleFolder = useCallback((path: string) => {
+    setExpandedFolders((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(path)) {
+        newSet.delete(path);
+      } else {
+        newSet.add(path);
+      }
+      return newSet;
+    });
+  }, []);
+
+  return handleToggleFolder;
+}
diff --git a/src/hooks/handlers/useHandleToggleFullScreen.ts b/src/hooks/handlers/useHandleToggleFullScreen.ts
new file mode 100644
index 000000000..9b91ef6c3
--- /dev/null
+++ b/src/hooks/handlers/useHandleToggleFullScreen.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleToggleFullScreen() {
+  const { isFullScreen, setIsFullScreen, selectedImage } = useAppState();
+
+  const handleToggleFullScreen = useCallback(() => {
+    if (isFullScreen) {
+      setIsFullScreen(false);
+    } else {
+      if (!selectedImage) {
+        return;
+      }
+      setIsFullScreen(true);
+    }
+  }, [isFullScreen, selectedImage]);
+
+  return handleToggleFullScreen;
+}
diff --git a/src/hooks/handlers/useHandleTogglePinFolder.ts b/src/hooks/handlers/useHandleTogglePinFolder.ts
new file mode 100644
index 000000000..a4d452d6b
--- /dev/null
+++ b/src/hooks/handlers/useHandleTogglePinFolder.ts
@@ -0,0 +1,39 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleActiveTreeSectionChange } from './useHandleActiveTreeSectionChange';
+import { useHandleSettingsChange } from './useHandleSettingsChange';
+
+export function useHandleTogglePinFolder() {
+  const { appSettings, currentFolderPath, setPinnedFolderTrees } = useAppState();
+  const handleActiveTreeSectionChange = useHandleActiveTreeSectionChange();
+  const handleSettingsChange = useHandleSettingsChange();
+
+  const handleTogglePinFolder = useCallback(
+    async (path: string) => {
+      if (!appSettings) return;
+      const currentPins = appSettings.pinnedFolders || [];
+      const isPinned = currentPins.includes(path);
+      const newPins = isPinned
+        ? currentPins.filter((p) => p !== path)
+        : [...currentPins, path].sort((a, b) => a.localeCompare(b));
+
+      if (!isPinned && path === currentFolderPath) {
+        handleActiveTreeSectionChange('pinned');
+      }
+
+      handleSettingsChange({ ...appSettings, pinnedFolders: newPins });
+
+      try {
+        const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: newPins });
+        setPinnedFolderTrees(trees);
+      } catch (err) {
+        console.error('Failed to refresh pinned folders:', err);
+      }
+    },
+    [appSettings, handleSettingsChange],
+  );
+
+  return handleTogglePinFolder;
+}
diff --git a/src/hooks/handlers/useHandleToggleWaveform.ts b/src/hooks/handlers/useHandleToggleWaveform.ts
new file mode 100644
index 000000000..cf4d3cbea
--- /dev/null
+++ b/src/hooks/handlers/useHandleToggleWaveform.ts
@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useHandleToggleWaveform() {
+  const { setIsWaveformVisible } = useAppState();
+
+  const handleToggleWaveform = useCallback(() => {
+    setIsWaveformVisible((prev: boolean) => !prev);
+  }, []);
+
+  return handleToggleWaveform;
+}
diff --git a/src/hooks/handlers/useHandleUserTransform.ts b/src/hooks/handlers/useHandleUserTransform.ts
new file mode 100644
index 000000000..3b550e15f
--- /dev/null
+++ b/src/hooks/handlers/useHandleUserTransform.ts
@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { TransformState } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleFullResolutionLogic } from './useHandleFullResolutionLogic';
+
+export function useHandleUserTransform() {
+  const { isProgrammaticZoom, setZoom, originalSize, baseRenderSize, adjustments } = useAppState();
+  const handleFullResolutionLogic = useHandleFullResolutionLogic();
+
+  const handleUserTransform = useCallback(
+    (transformState: TransformState) => {
+      if (isProgrammaticZoom.current) {
+        isProgrammaticZoom.current = false;
+        return;
+      }
+
+      setZoom(transformState.scale);
+
+      if (originalSize.width > 0 && baseRenderSize.width > 0) {
+        const orientationSteps = adjustments.orientationSteps || 0;
+        const isSwapped = orientationSteps === 1 || orientationSteps === 3;
+        const effectiveOriginalWidth = isSwapped ? originalSize.height : originalSize.width;
+
+        const targetZoomPercent = (baseRenderSize.width * transformState.scale) / effectiveOriginalWidth;
+        handleFullResolutionLogic(targetZoomPercent);
+      }
+    },
+    [originalSize, baseRenderSize, handleFullResolutionLogic, adjustments.orientationSteps],
+  );
+
+  return handleUserTransform;
+}
diff --git a/src/hooks/handlers/useHandleZoomChange.ts b/src/hooks/handlers/useHandleZoomChange.ts
new file mode 100644
index 000000000..3e8e6db26
--- /dev/null
+++ b/src/hooks/handlers/useHandleZoomChange.ts
@@ -0,0 +1,60 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useHandleFullResolutionLogic } from './useHandleFullResolutionLogic';
+
+export function useHandleZoomChange() {
+  const { adjustments, originalSize, baseRenderSize, isProgrammaticZoom, setZoom } = useAppState();
+  const handleFullResolutionLogic = useHandleFullResolutionLogic();
+
+  const handleZoomChange = useCallback(
+    (zoomValue: number, fitToWindow: boolean = false) => {
+      let targetZoomPercent: number;
+      const orientationSteps = adjustments.orientationSteps || 0;
+      const isSwapped = orientationSteps === 1 || orientationSteps === 3;
+      const effectiveOriginalWidth = isSwapped ? originalSize.height : originalSize.width;
+      const effectiveOriginalHeight = isSwapped ? originalSize.width : originalSize.height;
+      if (fitToWindow) {
+        if (
+          effectiveOriginalWidth > 0 &&
+          effectiveOriginalHeight > 0 &&
+          baseRenderSize.width > 0 &&
+          baseRenderSize.height > 0
+        ) {
+          const originalAspect = effectiveOriginalWidth / effectiveOriginalHeight;
+          const baseAspect = baseRenderSize.width / baseRenderSize.height;
+          if (originalAspect > baseAspect) {
+            targetZoomPercent = baseRenderSize.width / effectiveOriginalWidth;
+          } else {
+            targetZoomPercent = baseRenderSize.height / effectiveOriginalHeight;
+          }
+        } else {
+          targetZoomPercent = 1.0;
+        }
+      } else {
+        targetZoomPercent = zoomValue;
+      }
+      targetZoomPercent = Math.max(0.1, Math.min(2.0, targetZoomPercent));
+      let transformZoom = 1.0;
+      if (
+        effectiveOriginalWidth > 0 &&
+        effectiveOriginalHeight > 0 &&
+        baseRenderSize.width > 0 &&
+        baseRenderSize.height > 0
+      ) {
+        const originalAspect = effectiveOriginalWidth / effectiveOriginalHeight;
+        const baseAspect = baseRenderSize.width / baseRenderSize.height;
+        if (originalAspect > baseAspect) {
+          transformZoom = (targetZoomPercent * effectiveOriginalWidth) / baseRenderSize.width;
+        } else {
+          transformZoom = (targetZoomPercent * effectiveOriginalHeight) / baseRenderSize.height;
+        }
+      }
+      isProgrammaticZoom.current = true;
+      setZoom(transformZoom);
+      handleFullResolutionLogic(targetZoomPercent);
+    },
+    [originalSize, baseRenderSize, handleFullResolutionLogic, adjustments.orientationSteps],
+  );
+
+  return handleZoomChange;
+}
diff --git a/src/hooks/handlers/useRedo.ts b/src/hooks/handlers/useRedo.ts
new file mode 100644
index 000000000..a25ef3487
--- /dev/null
+++ b/src/hooks/handlers/useRedo.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useDebouncedSetHistory } from './useDebouncedSetHistory';
+
+export function useRedo() {
+  const { history } = useAppState();
+
+  const { redo: redoAdjustments, canRedo } = history;
+  const debouncedSetHistory = useDebouncedSetHistory();
+
+  const redo = useCallback(() => {
+    if (canRedo) {
+      redoAdjustments();
+      debouncedSetHistory.cancel();
+    }
+  }, [canRedo, redoAdjustments, debouncedSetHistory]);
+
+  return redo;
+}
diff --git a/src/hooks/handlers/useRefreshAllFolderTrees.ts b/src/hooks/handlers/useRefreshAllFolderTrees.ts
new file mode 100644
index 000000000..44200b64b
--- /dev/null
+++ b/src/hooks/handlers/useRefreshAllFolderTrees.ts
@@ -0,0 +1,32 @@
+import { invoke } from '@tauri-apps/api/core';
+import { useCallback } from 'react';
+import { Invokes } from '../../components/ui/AppProperties';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useRefreshAllFolderTrees() {
+  const { rootPath, setFolderTree, setError, appSettings, setPinnedFolderTrees } = useAppState();
+
+  const refreshAllFolderTrees = useCallback(async () => {
+    if (rootPath) {
+      try {
+        const treeData = await invoke(Invokes.GetFolderTree, { path: rootPath });
+        setFolderTree(treeData);
+      } catch (err) {
+        console.error('Failed to refresh main folder tree:', err);
+        setError(`Failed to refresh folder tree: ${err}.`);
+      }
+    }
+
+    const currentPins = appSettings?.pinnedFolders || [];
+    if (currentPins.length > 0) {
+      try {
+        const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: currentPins });
+        setPinnedFolderTrees(trees);
+      } catch (err) {
+        console.error('Failed to refresh pinned folder trees:', err);
+      }
+    }
+  }, [rootPath, appSettings?.pinnedFolders]);
+
+  return refreshAllFolderTrees;
+}
diff --git a/src/hooks/handlers/useRefreshImageList.ts b/src/hooks/handlers/useRefreshImageList.ts
new file mode 100644
index 000000000..449ac5c9d
--- /dev/null
+++ b/src/hooks/handlers/useRefreshImageList.ts
@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { ImageFile, Invokes, LibraryViewMode } from '../../components/ui/AppProperties';
+import { invoke } from '@tauri-apps/api/core';
+
+export function useRefreshImageList() {
+  const { currentFolderPath, libraryViewMode, sortCriteria, appSettings, setImageList, setError } = useAppState();
+
+  const refreshImageList = useCallback(async () => {
+    if (!currentFolderPath) return;
+    try {
+      const command =
+        libraryViewMode === LibraryViewMode.Recursive ? Invokes.ListImagesRecursive : Invokes.ListImagesInDir;
+
+      const files: ImageFile[] = await invoke(command, { path: currentFolderPath });
+      const exifSortKeys = ['date_taken', 'iso', 'shutter_speed', 'aperture', 'focal_length'];
+      const isExifSortActive = exifSortKeys.includes(sortCriteria.key);
+      const shouldReadExif = appSettings?.enableExifReading ?? false;
+
+      let freshExifData: Record<string, any> | null = null;
+
+      if (shouldReadExif && files.length > 0 && isExifSortActive) {
+        const paths = files.map((f: ImageFile) => f.path);
+        freshExifData = await invoke(Invokes.ReadExifForPaths, { paths });
+      }
+
+      setImageList((prevList) => {
+        const prevMap = new Map(prevList.map((img) => [img.path, img]));
+
+        return files.map((newFile) => {
+          if (freshExifData && freshExifData[newFile.path]) {
+            newFile.exif = freshExifData[newFile.path];
+            return newFile;
+          }
+          const existing = prevMap.get(newFile.path);
+          if (existing && existing.modified === newFile.modified) {
+            return existing;
+          }
+
+          return newFile;
+        });
+      });
+
+      if (shouldReadExif && files.length > 0 && !isExifSortActive) {
+        const paths = files.map((f: ImageFile) => f.path);
+        invoke(Invokes.ReadExifForPaths, { paths })
+          .then((exifDataMap: any) => {
+            setImageList((currentImageList) =>
+              currentImageList.map((image) => {
+                if (exifDataMap[image.path] && !image.exif) {
+                  return { ...image, exif: exifDataMap[image.path] };
+                }
+                return image;
+              }),
+            );
+          })
+          .catch((err) => {
+            console.error('Failed to read EXIF data in background:', err);
+          });
+      }
+    } catch (err) {
+      console.error('Failed to refresh image list:', err);
+      setError('Failed to refresh image list.');
+    }
+  }, [currentFolderPath, sortCriteria.key, appSettings?.enableExifReading, libraryViewMode]);
+
+  return refreshImageList;
+}
diff --git a/src/hooks/handlers/useRequestFullResolution.ts b/src/hooks/handlers/useRequestFullResolution.ts
new file mode 100644
index 000000000..1a1a17c13
--- /dev/null
+++ b/src/hooks/handlers/useRequestFullResolution.ts
@@ -0,0 +1,53 @@
+import { invoke } from '@tauri-apps/api/core';
+import debounce from 'lodash.debounce';
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { Invokes } from '../../components/ui/AppProperties';
+
+export function useRequestFullResolution() {
+  const {
+    selectedImage,
+    previewJobIdRef,
+    latestRenderedJobIdRef,
+    setFinalPreviewUrl,
+    fullResCacheKeyRef,
+    setIsLoadingFullRes,
+  } = useAppState();
+
+  const requestFullResolution = useCallback(
+    debounce((currentAdjustments: any, key: string) => {
+      if (!selectedImage?.path) return;
+
+      const jobId = ++previewJobIdRef.current;
+
+      invoke<ArrayBuffer>(Invokes.GenerateFullscreenPreview, {
+        jsAdjustments: currentAdjustments,
+      })
+        .then((buffer) => {
+          if (jobId >= latestRenderedJobIdRef.current) {
+            latestRenderedJobIdRef.current = jobId;
+            const blob = new Blob([buffer], { type: 'image/jpeg' });
+            const url = URL.createObjectURL(blob);
+
+            setFinalPreviewUrl((prevUrl) => {
+              if (prevUrl && prevUrl.startsWith('blob:')) URL.revokeObjectURL(prevUrl);
+              return url;
+            });
+
+            fullResCacheKeyRef.current = key;
+            setIsLoadingFullRes(false);
+          }
+        })
+        .catch((error: any) => {
+          if (jobId >= latestRenderedJobIdRef.current) {
+            console.error('Failed to generate high resolution preview:', error);
+            fullResCacheKeyRef.current = null;
+            setIsLoadingFullRes(false);
+          }
+        });
+    }, 100),
+    [selectedImage?.path],
+  );
+
+  return requestFullResolution;
+}
diff --git a/src/hooks/handlers/useSetAdjustments.ts b/src/hooks/handlers/useSetAdjustments.ts
new file mode 100644
index 000000000..2a1948e31
--- /dev/null
+++ b/src/hooks/handlers/useSetAdjustments.ts
@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { Adjustments } from '../../utils/adjustments';
+import { useAppState } from '../../context/ContextProviders';
+import { useDebouncedSetHistory } from './useDebouncedSetHistory';
+
+export function useSetAdjustments() {
+  const { setAdjustments: setLiveAdjustments } = useAppState();
+  const debouncedSetHistory = useDebouncedSetHistory();
+
+  const setAdjustments = useCallback(
+    (value: any) => {
+      setLiveAdjustments((prevAdjustments: Adjustments) => {
+        const newAdjustments = typeof value === 'function' ? value(prevAdjustments) : value;
+        debouncedSetHistory(newAdjustments);
+        return newAdjustments;
+      });
+    },
+    [debouncedSetHistory],
+  );
+
+  return setAdjustments;
+}
diff --git a/src/hooks/handlers/useUndo.ts b/src/hooks/handlers/useUndo.ts
new file mode 100644
index 000000000..6be11f076
--- /dev/null
+++ b/src/hooks/handlers/useUndo.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+import { useDebouncedSetHistory } from './useDebouncedSetHistory';
+
+export function useUndo() {
+  const { history } = useAppState();
+
+  const { undo: undoAdjustments, canUndo } = history;
+  const debouncedSetHistory = useDebouncedSetHistory();
+
+  const undo = useCallback(() => {
+    if (canUndo) {
+      undoAdjustments();
+      debouncedSetHistory.cancel();
+    }
+  }, [canUndo, undoAdjustments, debouncedSetHistory]);
+
+  return undo;
+}
diff --git a/src/hooks/handlers/useUpdateSubMask.ts b/src/hooks/handlers/useUpdateSubMask.ts
new file mode 100644
index 000000000..69138828e
--- /dev/null
+++ b/src/hooks/handlers/useUpdateSubMask.ts
@@ -0,0 +1,22 @@
+import { SubMask } from '../../components/panel/right/Masks';
+import { Adjustments, MaskContainer, AiPatch } from '../../utils/adjustments';
+import { useSetAdjustments } from './useSetAdjustments';
+
+export function useUpdateSubMask() {
+  const setAdjustments = useSetAdjustments();
+
+  const updateSubMask = (subMaskId: string, updatedData: any) => {
+    setAdjustments((prev: Adjustments) => ({
+      ...prev,
+      masks: prev.masks.map((c: MaskContainer) => ({
+        ...c,
+        subMasks: c.subMasks.map((sm: SubMask) => (sm.id === subMaskId ? { ...sm, ...updatedData } : sm)),
+      })),
+      aiPatches: (prev.aiPatches || []).map((p: AiPatch) => ({
+        ...p,
+        subMasks: p.subMasks.map((sm: SubMask) => (sm.id === subMaskId ? { ...sm, ...updatedData } : sm)),
+      })),
+    }));
+  };
+  return updateSubMask;
+}
diff --git a/src/hooks/handlers/useWbPicker.ts b/src/hooks/handlers/useWbPicker.ts
new file mode 100644
index 000000000..b54d31e7a
--- /dev/null
+++ b/src/hooks/handlers/useWbPicker.ts
@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useAppState } from '../../context/ContextProviders';
+
+export function useToggleWbPicker() {
+  const { setIsWbPickerActive } = useAppState();
+
+  const toggleWbPicker = useCallback(() => {
+    setIsWbPickerActive((prev) => !prev);
+  }, []);
+
+  return toggleWbPicker;
+}
+
+export function useHandleWbPicked() {
+  const handleWbPicked = useCallback(() => {
+    //setIsWbPickerActive(false); // lets keep it active
+  }, []);
+
+  return handleWbPicked;
+}
diff --git a/src/hooks/useGlobalEffects.ts b/src/hooks/useGlobalEffects.ts
new file mode 100644
index 000000000..e60d87bd0
--- /dev/null
+++ b/src/hooks/useGlobalEffects.ts
@@ -0,0 +1,1026 @@
+import { useEffect } from 'react';
+import { useAppState } from '../context/ContextProviders';
+import { toast } from 'react-toastify';
+import {
+  FilterCriteria,
+  ImageFile,
+  Invokes,
+  LibraryViewMode,
+  Panel,
+  RawStatus,
+  SelectedImage,
+  Theme,
+} from '../components/ui/AppProperties';
+import { invoke } from '@tauri-apps/api/core';
+import { useHandlers } from './useHandlers';
+import { listen } from '@tauri-apps/api/event';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { setTheme } from '@tauri-apps/api/app';
+import {
+  Adjustments,
+  COPYABLE_ADJUSTMENT_KEYS,
+  INITIAL_ADJUSTMENTS,
+  normalizeLoadedAdjustments,
+} from '../utils/adjustments';
+import { DEFAULT_THEME_ID, ThemeProps, THEMES } from '../utils/themes';
+import { generatePaletteFromImage } from '../utils/palette';
+import { DEBUG } from '../utils/constants';
+import { ExportState, Status, ImportState, IMPORT_TIMEOUT } from '../components/ui/ExportImportProperties';
+import { PanoramaModalState, HdrModalState } from '../App';
+import { getParentDir } from '../utils/helpers';
+
+export function useGlobalEffects() {
+  const {
+    currentFolderPath,
+    preloadedDataRef,
+    imageList,
+    rootPath,
+    folderTree,
+    currentFolderPathRef,
+    isCopied,
+    setIsCopied,
+    isPasted,
+    setIsPasted,
+    error,
+    setError,
+    setAdjustments: setLiveAdjustments,
+    history,
+    activeRightPanel,
+    activeMaskContainerId,
+    activeAiPatchContainerId,
+    setIsMaskControlHovered,
+    setTransformedOriginalUrl,
+    geometricAdjustmentsKey,
+    selectedImage,
+    showOriginal,
+    transformedOriginalUrl,
+    adjustments,
+    setShowOriginal,
+    libraryViewMode,
+    setIsAIConnectorConnected,
+    setIsWindowFullScreen,
+    setAppSettings,
+    setSortCriteria,
+    setFilterCriteria,
+    setUiVisibility,
+    setLibraryViewMode,
+    setThumbnailSize,
+    setThumbnailAspectRatio,
+    setActiveTreeSection,
+    setPinnedFolderTrees,
+    isInitialMount,
+    appSettings,
+    uiVisibility,
+    thumbnailSize,
+    thumbnailAspectRatio,
+    setSupportedTypes,
+    sortCriteria,
+    filterCriteria,
+    finalPreviewUrl,
+    setAdaptivePalette,
+    theme,
+    adaptivePalette,
+    isInitialThemeMount,
+    setIsAnimatingTheme,
+    expandedFolders,
+    isFullScreen,
+    isHighResNeeded,
+    fullResCacheKeyRef,
+    visualAdjustmentsKey,
+    setIsLoadingFullRes,
+    setUncroppedAdjustedPreviewUrl,
+    setDenoiseModalState,
+    setImportState,
+    setExportState,
+    setImageList,
+    setIndexingProgress,
+    setIsIndexing,
+    setAiModelDownloadStatus,
+    setImageRatings,
+    setThumbnails,
+    setWaveform,
+    setInitialFileToOpen,
+    setHistogram,
+    exportState,
+    importState,
+    libraryActivePath,
+    setLibraryActiveAdjustments,
+    setPanoramaModalState,
+    setHdrModalState,
+    setCullingModalState,
+    dragIdleTimer,
+    isSliderDragging,
+    setIsLayoutReady,
+    initialFileToOpen,
+    setRootPath,
+    isViewLoading,
+    isWaveformVisible,
+    waveform,
+    setSelectedImage,
+    setOriginalSize,
+    setPreviewSize,
+    setIsViewLoading,
+  } = useAppState();
+
+  const { state: historyAdjustments, resetHistory: resetAdjustmentsHistory } = history;
+
+  const {
+    refreshImageList,
+    generateUncroppedPreview,
+    handleSettingsChange,
+    requestFullResolution,
+    refreshAllFolderTrees,
+    handleSelectSubfolder,
+    applyAdjustments,
+    debouncedSave,
+    handleImageSelect,
+  } = useHandlers();
+
+  useEffect(() => {
+    if (selectedImage && !selectedImage.isReady && selectedImage.path) {
+      let isEffectActive = true;
+
+      const loadMetadataEarly = async () => {
+        try {
+          const metadata: any = await invoke(Invokes.LoadMetadata, { path: selectedImage.path });
+          if (!isEffectActive) return;
+
+          let initialAdjusts;
+          if (metadata.adjustments && !metadata.adjustments.is_null) {
+            initialAdjusts = normalizeLoadedAdjustments(metadata.adjustments);
+          } else {
+            initialAdjusts = { ...INITIAL_ADJUSTMENTS };
+          }
+
+          setLiveAdjustments(initialAdjusts);
+          resetAdjustmentsHistory(initialAdjusts);
+        } catch (err) {
+          console.error('Failed to load metadata early:', err);
+        }
+      };
+
+      loadMetadataEarly();
+
+      const loadFullImageData = async () => {
+        try {
+          const loadImageResult: any = await invoke(Invokes.LoadImage, { path: selectedImage.path });
+          if (!isEffectActive) {
+            return;
+          }
+
+          const { width, height } = loadImageResult;
+          setOriginalSize({ width, height });
+
+          if (appSettings?.editorPreviewResolution) {
+            const maxSize = appSettings.editorPreviewResolution;
+            const aspectRatio = width / height;
+
+            if (width > height) {
+              const pWidth = Math.min(width, maxSize);
+              const pHeight = Math.round(pWidth / aspectRatio);
+              setPreviewSize({ width: pWidth, height: pHeight });
+            } else {
+              const pHeight = Math.min(height, maxSize);
+              const pWidth = Math.round(pHeight * aspectRatio);
+              setPreviewSize({ width: pWidth, height: pHeight });
+            }
+          } else {
+            setPreviewSize({ width: 0, height: 0 });
+          }
+
+          fullResCacheKeyRef.current = null;
+
+          setSelectedImage((currentSelected: SelectedImage | null) => {
+            if (currentSelected && currentSelected.path === selectedImage.path) {
+              return {
+                ...currentSelected,
+                exif: loadImageResult.exif,
+                height: loadImageResult.height,
+                isRaw: loadImageResult.is_raw,
+                isReady: true,
+                metadata: loadImageResult.metadata,
+                originalUrl: null,
+                width: loadImageResult.width,
+              };
+            }
+            return currentSelected;
+          });
+
+          setLiveAdjustments((prev: Adjustments) => {
+            if (!prev.aspectRatio && !prev.crop) {
+              return { ...prev, aspectRatio: loadImageResult.width / loadImageResult.height };
+            }
+            return prev;
+          });
+        } catch (err) {
+          if (isEffectActive) {
+            console.error('Failed to load image:', err);
+            setError(`Failed to load image: ${err}`);
+            setSelectedImage(null);
+          }
+        } finally {
+          if (isEffectActive) {
+            setIsViewLoading(false);
+          }
+        }
+      };
+      loadFullImageData();
+      return () => {
+        isEffectActive = false;
+      };
+    }
+  }, [selectedImage?.path, selectedImage?.isReady, resetAdjustmentsHistory, appSettings?.editorPreviewResolution]);
+
+  useEffect(() => {
+    const invokeWaveForm = async () => {
+      const waveForm: any = await invoke(Invokes.GenerateWaveform).catch((err) =>
+        console.error('Failed to generate waveform:', err),
+      );
+      if (waveForm) {
+        setWaveform(waveForm);
+      }
+    };
+
+    if (isWaveformVisible && selectedImage?.isReady && !waveform) {
+      invokeWaveForm();
+    }
+  }, [isWaveformVisible, selectedImage?.isReady, waveform]);
+
+  useEffect(() => {
+    if (!initialFileToOpen || !appSettings) {
+      return;
+    }
+    const parentDir = getParentDir(initialFileToOpen);
+    if (currentFolderPath !== parentDir) {
+      setRootPath(parentDir);
+      handleSelectSubfolder(parentDir, true);
+      return;
+    }
+    const isImageInList = imageList.some((image) => image.path === initialFileToOpen);
+    if (isImageInList) {
+      handleImageSelect(initialFileToOpen);
+      setInitialFileToOpen(null);
+    } else if (!isViewLoading) {
+      console.warn(`'open-with-file' target ${initialFileToOpen} not found in its directory after loading. Aborting.`);
+      setInitialFileToOpen(null);
+    }
+  }, [
+    initialFileToOpen,
+    appSettings,
+    currentFolderPath,
+    imageList,
+    isViewLoading,
+    handleSelectSubfolder,
+    handleImageSelect,
+  ]);
+
+  useEffect(() => {
+    if (!rootPath) {
+      setIsLayoutReady(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setIsLayoutReady(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [rootPath]);
+
+  useEffect(() => {
+    if (!selectedImage?.isReady) return;
+
+    if (dragIdleTimer.current) {
+      clearTimeout(dragIdleTimer.current);
+    }
+
+    if (isSliderDragging) {
+      if (appSettings?.enableLivePreviews !== false) {
+        applyAdjustments(adjustments, true);
+      }
+
+      dragIdleTimer.current = setTimeout(() => {
+        applyAdjustments(adjustments, false);
+      }, 150);
+    } else {
+      applyAdjustments(adjustments, false);
+      debouncedSave(selectedImage.path, adjustments);
+    }
+
+    return () => {
+      if (dragIdleTimer.current) clearTimeout(dragIdleTimer.current);
+    };
+  }, [
+    adjustments,
+    selectedImage?.path,
+    selectedImage?.isReady,
+    isSliderDragging,
+    applyAdjustments,
+    debouncedSave,
+    appSettings?.enableLivePreviews,
+  ]);
+
+  useEffect(() => {
+    let isEffectActive = true;
+
+    const unlistenStart = listen('culling-start', (event: any) => {
+      if (isEffectActive) {
+        setCullingModalState({
+          isOpen: true,
+          progress: { current: 0, total: event.payload, stage: 'Initializing...' },
+          suggestions: null,
+          error: null,
+        });
+      }
+    });
+
+    const unlistenProgress = listen('culling-progress', (event: any) => {
+      if (isEffectActive) {
+        setCullingModalState((prev) => ({ ...prev, progress: event.payload }));
+      }
+    });
+
+    const unlistenComplete = listen('culling-complete', (event: any) => {
+      if (isEffectActive) {
+        setCullingModalState((prev) => ({ ...prev, progress: null, suggestions: event.payload }));
+      }
+    });
+
+    const unlistenError = listen('culling-error', (event: any) => {
+      if (isEffectActive) {
+        setCullingModalState((prev) => ({ ...prev, progress: null, error: String(event.payload) }));
+      }
+    });
+
+    return () => {
+      isEffectActive = false;
+      unlistenStart.then((f) => f());
+      unlistenProgress.then((f) => f());
+      unlistenComplete.then((f) => f());
+      unlistenError.then((f) => f());
+    };
+  }, []);
+
+  useEffect(() => {
+    let isEffectActive = true;
+
+    const unlistenProgress = listen('panorama-progress', (event: any) => {
+      if (isEffectActive) {
+        setPanoramaModalState((prev: PanoramaModalState) => ({
+          ...prev,
+          error: null,
+          finalImageBase64: null,
+          isOpen: true,
+          progressMessage: event.payload,
+        }));
+      }
+    });
+
+    const unlistenComplete = listen('panorama-complete', (event: any) => {
+      if (isEffectActive) {
+        const { base64 } = event.payload;
+        setPanoramaModalState((prev: PanoramaModalState) => ({
+          ...prev,
+          error: null,
+          finalImageBase64: base64,
+          progressMessage: 'Panorama Ready',
+        }));
+      }
+    });
+
+    const unlistenError = listen('panorama-error', (event: any) => {
+      if (isEffectActive) {
+        setPanoramaModalState((prev: PanoramaModalState) => ({
+          ...prev,
+          error: String(event.payload),
+          finalImageBase64: null,
+          progressMessage: 'An error occurred.',
+        }));
+      }
+    });
+
+    return () => {
+      isEffectActive = false;
+      unlistenProgress.then((f: any) => f());
+      unlistenComplete.then((f: any) => f());
+      unlistenError.then((f: any) => f());
+    };
+  }, []);
+
+  useEffect(() => {
+    let isEffectActive = true;
+
+    const unlistenProgress = listen('hdr-progress', (event: any) => {
+      if (isEffectActive) {
+        setHdrModalState((prev: HdrModalState) => ({
+          ...prev,
+          error: null,
+          finalImageBase64: null,
+          isOpen: true,
+          progressMessage: event.payload,
+        }));
+      }
+    });
+
+    const unlistenComplete = listen('hdr-complete', (event: any) => {
+      if (isEffectActive) {
+        const { base64 } = event.payload;
+        setHdrModalState((prev: HdrModalState) => ({
+          ...prev,
+          error: null,
+          finalImageBase64: base64,
+          progressMessage: 'Hdr Ready',
+        }));
+      }
+    });
+
+    const unlistenError = listen('hdr-error', (event: any) => {
+      if (isEffectActive) {
+        setHdrModalState((prev: HdrModalState) => ({
+          ...prev,
+          error: String(event.payload),
+          finalImageBase64: null,
+          progressMessage: 'An error occurred.',
+        }));
+      }
+    });
+
+    return () => {
+      isEffectActive = false;
+      unlistenProgress.then((f: any) => f());
+      unlistenComplete.then((f: any) => f());
+      unlistenError.then((f: any) => f());
+    };
+  }, []);
+
+  useEffect(() => {
+    if (libraryActivePath) {
+      invoke(Invokes.LoadMetadata, { path: libraryActivePath })
+        .then((metadata: any) => {
+          if (metadata.adjustments && !metadata.adjustments.is_null) {
+            const normalized: Adjustments = normalizeLoadedAdjustments(metadata.adjustments);
+            setLibraryActiveAdjustments(normalized);
+          } else {
+            setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
+          }
+        })
+        .catch((err) => {
+          console.error('Failed to load metadata for library active image', err);
+          setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
+        });
+    } else {
+      setLibraryActiveAdjustments(INITIAL_ADJUSTMENTS);
+    }
+  }, [libraryActivePath]);
+
+  useEffect(() => {
+    if ([Status.Success, Status.Error].includes(importState.status)) {
+      const timer = setTimeout(() => {
+        setImportState({ status: Status.Idle, progress: { current: 0, total: 0 }, path: '', errorMessage: '' });
+      }, IMPORT_TIMEOUT);
+
+      return () => clearTimeout(timer);
+    }
+  }, [importState.status]);
+
+  useEffect(() => {
+    if ([Status.Success, Status.Error, Status.Cancelled].includes(exportState.status)) {
+      const timeoutDuration = exportState.status === Status.Success ? 5000 : 3000;
+
+      const timer = setTimeout(() => {
+        setExportState({ status: Status.Idle, progress: { current: 0, total: 0 }, errorMessage: '' });
+      }, timeoutDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [exportState.status]);
+
+  useEffect(() => {
+    let isEffectActive = true;
+    const listeners = [
+      listen('preview-update-uncropped', (event: any) => {
+        if (isEffectActive) {
+          setUncroppedAdjustedPreviewUrl(event.payload);
+        }
+      }),
+      listen('histogram-update', (event: any) => {
+        if (isEffectActive) {
+          setHistogram(event.payload);
+        }
+      }),
+      listen('open-with-file', (event: any) => {
+        if (isEffectActive) {
+          setInitialFileToOpen(event.payload as string);
+        }
+      }),
+      listen('waveform-update', (event: any) => {
+        if (isEffectActive) {
+          setWaveform(event.payload);
+        }
+      }),
+      listen('thumbnail-generated', (event: any) => {
+        if (isEffectActive) {
+          const { path, data, rating } = event.payload;
+          if (data) {
+            setThumbnails((prev) => ({ ...prev, [path]: data }));
+          }
+          if (rating !== undefined) {
+            setImageRatings((prev) => ({ ...prev, [path]: rating }));
+          }
+        }
+      }),
+      listen('ai-model-download-start', (event: any) => {
+        if (isEffectActive) {
+          setAiModelDownloadStatus(event.payload);
+        }
+      }),
+      listen('ai-model-download-finish', () => {
+        if (isEffectActive) {
+          setAiModelDownloadStatus(null);
+        }
+      }),
+      listen('indexing-started', () => {
+        if (isEffectActive) {
+          setIsIndexing(true);
+          setIndexingProgress({ current: 0, total: 0 });
+        }
+      }),
+      listen('indexing-progress', (event: any) => {
+        if (isEffectActive) {
+          setIndexingProgress(event.payload);
+        }
+      }),
+      listen('indexing-finished', () => {
+        if (isEffectActive) {
+          setIsIndexing(false);
+          setIndexingProgress({ current: 0, total: 0 });
+          if (currentFolderPathRef.current) {
+            const refreshImageList = async () => {
+              try {
+                const list: ImageFile[] = await invoke(Invokes.ListImagesInDir, { path: currentFolderPathRef.current });
+                if (Array.isArray(list)) {
+                  setImageList(list);
+                }
+              } catch (err) {
+                console.error('Failed to refresh after indexing:', err);
+              }
+            };
+            refreshImageList();
+          }
+        }
+      }),
+      listen('batch-export-progress', (event: any) => {
+        if (isEffectActive) {
+          setExportState((prev: ExportState) => ({ ...prev, progress: event.payload }));
+        }
+      }),
+      listen('export-complete', () => {
+        if (isEffectActive) {
+          setExportState((prev: ExportState) => ({ ...prev, status: Status.Success }));
+        }
+      }),
+      listen('export-error', (event) => {
+        if (isEffectActive) {
+          setExportState((prev: ExportState) => ({
+            ...prev,
+            status: Status.Error,
+            errorMessage: typeof event.payload === 'string' ? event.payload : 'An unknown export error occurred.',
+          }));
+        }
+      }),
+      listen('export-cancelled', () => {
+        if (isEffectActive) {
+          setExportState((prev: ExportState) => ({ ...prev, status: Status.Cancelled }));
+        }
+      }),
+      listen('import-start', (event: any) => {
+        if (isEffectActive) {
+          setImportState({
+            errorMessage: '',
+            path: '',
+            progress: { current: 0, total: event.payload.total },
+            status: Status.Importing,
+          });
+        }
+      }),
+      listen('import-progress', (event: any) => {
+        if (isEffectActive) {
+          setImportState((prev: ImportState) => ({
+            ...prev,
+            path: event.payload.path,
+            progress: { current: event.payload.current, total: event.payload.total },
+          }));
+        }
+      }),
+      listen('import-complete', () => {
+        if (isEffectActive) {
+          setImportState((prev: ImportState) => ({ ...prev, status: Status.Success }));
+          refreshAllFolderTrees();
+          if (currentFolderPathRef.current) {
+            handleSelectSubfolder(currentFolderPathRef.current, false);
+          }
+        }
+      }),
+      listen('import-error', (event) => {
+        if (isEffectActive) {
+          setImportState((prev: ImportState) => ({
+            ...prev,
+            errorMessage: typeof event.payload === 'string' ? event.payload : 'An unknown import error occurred.',
+            status: Status.Error,
+          }));
+        }
+      }),
+      listen('denoise-progress', (event: any) => {
+        if (isEffectActive) {
+          setDenoiseModalState((prev) => ({ ...prev, progressMessage: event.payload as string }));
+        }
+      }),
+      listen('denoise-complete', (event: any) => {
+        if (isEffectActive) {
+          const payload = event.payload;
+          const isObject = typeof payload === 'object' && payload !== null;
+
+          setDenoiseModalState((prev) => ({
+            ...prev,
+            isProcessing: false,
+            previewBase64: isObject ? payload.denoised : payload,
+            originalBase64: isObject ? payload.original : null,
+            progressMessage: null,
+          }));
+        }
+      }),
+      listen('denoise-error', (event: any) => {
+        if (isEffectActive) {
+          setDenoiseModalState((prev) => ({
+            ...prev,
+            isProcessing: false,
+            error: String(event.payload),
+            progressMessage: null,
+          }));
+        }
+      }),
+    ];
+    return () => {
+      isEffectActive = false;
+      listeners.forEach((p) => p.then((unlisten) => unlisten()));
+    };
+  }, [refreshAllFolderTrees, handleSelectSubfolder]);
+
+  useEffect(() => {
+    if ((isFullScreen || isHighResNeeded) && selectedImage?.isReady) {
+      if (fullResCacheKeyRef.current !== visualAdjustmentsKey) {
+        setIsLoadingFullRes(true);
+        requestFullResolution(adjustments, visualAdjustmentsKey);
+      }
+    } else if (!isFullScreen && !isHighResNeeded) {
+      if (requestFullResolution.cancel) {
+        requestFullResolution.cancel();
+      }
+      setIsLoadingFullRes(false);
+    }
+  }, [adjustments, isFullScreen, isHighResNeeded, selectedImage?.isReady, requestFullResolution, visualAdjustmentsKey]);
+
+  useEffect(() => {
+    const handleGlobalContextMenu = (event: any) => {
+      if (!DEBUG) event.preventDefault();
+    };
+    window.addEventListener('contextmenu', handleGlobalContextMenu);
+    return () => window.removeEventListener('contextmenu', handleGlobalContextMenu);
+  }, []);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings || !rootPath) {
+      return;
+    }
+
+    const newFolderState = {
+      currentFolderPath,
+      expandedFolders: Array.from(expandedFolders),
+    };
+
+    if (JSON.stringify(appSettings.lastFolderState) === JSON.stringify(newFolderState)) {
+      return;
+    }
+
+    handleSettingsChange({ ...appSettings, lastFolderState: newFolderState });
+  }, [currentFolderPath, expandedFolders, rootPath, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    if (isInitialThemeMount.current) {
+      isInitialThemeMount.current = false;
+      return;
+    }
+
+    setIsAnimatingTheme(true);
+    const timer = setTimeout(() => setIsAnimatingTheme(false), 500);
+
+    return () => clearTimeout(timer);
+  }, [theme]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const currentThemeId = theme || DEFAULT_THEME_ID;
+
+    const baseTheme =
+      THEMES.find((t: ThemeProps) => t.id === currentThemeId) ||
+      THEMES.find((t: ThemeProps) => t.id === DEFAULT_THEME_ID);
+    if (!baseTheme) {
+      return;
+    }
+
+    let finalCssVariables: any = { ...baseTheme.cssVariables };
+    const effectThemeForWindow = baseTheme.id;
+
+    if (adaptivePalette) {
+      finalCssVariables = { ...finalCssVariables, ...adaptivePalette };
+    }
+
+    Object.entries(finalCssVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value as string);
+    });
+
+    const isLight = [Theme.Light, Theme.Snow, Theme.Arctic].includes(effectThemeForWindow);
+    invoke(Invokes.UpdateWindowEffect, { theme: isLight ? Theme.Light : Theme.Dark });
+  }, [theme, adaptivePalette]);
+
+  useEffect(() => {
+    if (appSettings?.adaptiveEditorTheme && selectedImage && finalPreviewUrl) {
+      generatePaletteFromImage(finalPreviewUrl)
+        .then(setAdaptivePalette)
+        .catch((_err) => {
+          const darkTheme = THEMES.find((t) => t.id === Theme.Dark);
+          setAdaptivePalette(darkTheme ? darkTheme.cssVariables : null);
+        });
+    } else if (!appSettings?.adaptiveEditorTheme || !selectedImage) {
+      setAdaptivePalette(null);
+    }
+  }, [appSettings?.adaptiveEditorTheme, selectedImage, finalPreviewUrl]);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (JSON.stringify(appSettings.filterCriteria) !== JSON.stringify(filterCriteria)) {
+      handleSettingsChange({ ...appSettings, filterCriteria });
+    }
+  }, [filterCriteria, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (JSON.stringify(appSettings.sortCriteria) !== JSON.stringify(sortCriteria)) {
+      handleSettingsChange({ ...appSettings, sortCriteria });
+    }
+  }, [sortCriteria, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    invoke(Invokes.GetSupportedFileTypes)
+      .then((types: any) => setSupportedTypes(types))
+      .catch((err) => console.error('Failed to load supported file types:', err));
+  }, []);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (appSettings.libraryViewMode !== libraryViewMode) {
+      handleSettingsChange({ ...appSettings, libraryViewMode });
+    }
+  }, [libraryViewMode, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (appSettings.thumbnailAspectRatio !== thumbnailAspectRatio) {
+      handleSettingsChange({ ...appSettings, thumbnailAspectRatio });
+    }
+  }, [thumbnailAspectRatio, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (appSettings.thumbnailSize !== thumbnailSize) {
+      handleSettingsChange({ ...appSettings, thumbnailSize });
+    }
+  }, [thumbnailSize, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    if (isInitialMount.current || !appSettings) {
+      return;
+    }
+    if (JSON.stringify(appSettings.uiVisibility) !== JSON.stringify(uiVisibility)) {
+      handleSettingsChange({ ...appSettings, uiVisibility });
+    }
+  }, [uiVisibility, appSettings, handleSettingsChange]);
+
+  useEffect(() => {
+    invoke(Invokes.LoadSettings)
+      .then(async (settings: any) => {
+        if (
+          !settings.copyPasteSettings ||
+          !settings.copyPasteSettings.includedAdjustments ||
+          settings.copyPasteSettings.includedAdjustments.length === 0
+        ) {
+          settings.copyPasteSettings = {
+            mode: 'merge',
+            includedAdjustments: COPYABLE_ADJUSTMENT_KEYS,
+          };
+        }
+        setAppSettings(settings);
+        if (settings?.sortCriteria) setSortCriteria(settings.sortCriteria);
+        if (settings?.filterCriteria) {
+          setFilterCriteria((prev: FilterCriteria) => ({
+            ...prev,
+            ...settings.filterCriteria,
+            rawStatus: settings.filterCriteria.rawStatus || RawStatus.All,
+            colors: settings.filterCriteria.colors || [],
+          }));
+        }
+        if (settings?.theme) {
+          setTheme(settings.theme);
+        }
+        if (settings?.uiVisibility) {
+          setUiVisibility((prev) => ({ ...prev, ...settings.uiVisibility }));
+        }
+        if (settings?.libraryViewMode) {
+          setLibraryViewMode(settings.libraryViewMode);
+        }
+        if (settings?.thumbnailSize) {
+          setThumbnailSize(settings.thumbnailSize);
+        }
+        if (settings?.thumbnailAspectRatio) {
+          setThumbnailAspectRatio(settings.thumbnailAspectRatio);
+        }
+        if (settings?.activeTreeSection) {
+          setActiveTreeSection(settings.activeTreeSection);
+        }
+        if (settings?.pinnedFolders && settings.pinnedFolders.length > 0) {
+          try {
+            const trees = await invoke(Invokes.GetPinnedFolderTrees, { paths: settings.pinnedFolders });
+            setPinnedFolderTrees(trees);
+          } catch (err) {
+            console.error('Failed to load pinned folder trees:', err);
+          }
+        }
+
+        if (settings.lastRootPath) {
+          const root = settings.lastRootPath;
+          const currentPath = settings.lastFolderState?.currentFolderPath || root;
+
+          const command =
+            settings.libraryViewMode === LibraryViewMode.Recursive
+              ? Invokes.ListImagesRecursive
+              : Invokes.ListImagesInDir;
+
+          preloadedDataRef.current = {
+            rootPath: root,
+            currentPath: currentPath,
+            tree: invoke(Invokes.GetFolderTree, { path: root }),
+            images: invoke(command, { path: currentPath }),
+          };
+        }
+
+        invoke('frontend_ready').catch((e) => console.error('Failed to notify backend of readiness:', e));
+      })
+      .catch((err) => {
+        console.error('Failed to load settings:', err);
+        setAppSettings({ lastRootPath: null, theme: DEFAULT_THEME_ID });
+      })
+      .finally(() => {
+        isInitialMount.current = false;
+      });
+  }, []);
+
+  useEffect(() => {
+    const appWindow = getCurrentWindow();
+    const checkFullscreen = async () => {
+      setIsWindowFullScreen(await appWindow.isFullscreen());
+    };
+    checkFullscreen();
+
+    const unlistenPromise = appWindow.onResized(checkFullscreen);
+
+    return () => {
+      unlistenPromise.then((unlisten: any) => unlisten());
+    };
+  }, []);
+
+  useEffect(() => {
+    if (activeRightPanel === Panel.Crop && selectedImage?.isReady) {
+      generateUncroppedPreview(adjustments);
+    }
+  }, [adjustments, activeRightPanel, selectedImage?.isReady, generateUncroppedPreview]);
+
+  useEffect(() => {
+    const unlisten = listen('ai-connector-status-update', (event: any) => {
+      setIsAIConnectorConnected(event.payload.connected);
+    });
+    invoke(Invokes.CheckAIConnectorStatus);
+    const interval = setInterval(() => invoke(Invokes.CheckAIConnectorStatus), 10000);
+    return () => {
+      clearInterval(interval);
+      unlisten.then((f) => f());
+    };
+  }, []);
+
+  useEffect(() => {
+    if (currentFolderPath) {
+      refreshImageList();
+    }
+  }, [libraryViewMode]);
+
+  useEffect(() => {
+    if (currentFolderPath) {
+      preloadedDataRef.current = {
+        ...preloadedDataRef.current,
+        currentPath: currentFolderPath,
+        images: Promise.resolve(imageList),
+      };
+    }
+  }, [currentFolderPath, imageList]);
+
+  useEffect(() => {
+    if (rootPath && folderTree) {
+      preloadedDataRef.current = {
+        ...preloadedDataRef.current,
+        rootPath: rootPath,
+        tree: Promise.resolve(folderTree),
+      };
+    }
+  }, [rootPath, folderTree]);
+
+  useEffect(() => {
+    currentFolderPathRef.current = currentFolderPath;
+  }, [currentFolderPath]);
+
+  useEffect(() => {
+    if (!isCopied) {
+      return;
+    }
+    const timer = setTimeout(() => setIsCopied(false), 1000);
+    return () => clearTimeout(timer);
+  }, [isCopied]);
+
+  useEffect(() => {
+    if (!isPasted) {
+      return;
+    }
+    const timer = setTimeout(() => setIsPasted(false), 1000);
+    return () => clearTimeout(timer);
+  }, [isPasted]);
+
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+      setError(null);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    setLiveAdjustments(historyAdjustments);
+  }, [historyAdjustments]);
+
+  useEffect(() => {
+    if (
+      (activeRightPanel !== Panel.Masks || !activeMaskContainerId) &&
+      (activeRightPanel !== Panel.Ai || !activeAiPatchContainerId)
+    ) {
+      setIsMaskControlHovered(false);
+    }
+  }, [activeRightPanel, activeMaskContainerId, activeAiPatchContainerId]);
+
+  useEffect(() => {
+    setTransformedOriginalUrl(null);
+  }, [geometricAdjustmentsKey, selectedImage?.path]);
+
+  useEffect(() => {
+    let isEffectActive = true;
+
+    const generate = async () => {
+      if (showOriginal && selectedImage?.path && !transformedOriginalUrl) {
+        try {
+          const base64Data: string = await invoke('generate_original_transformed_preview', {
+            jsAdjustments: adjustments,
+          });
+          if (isEffectActive) {
+            setTransformedOriginalUrl(base64Data);
+          }
+        } catch (e) {
+          if (isEffectActive) {
+            console.error('Failed to generate original preview:', e);
+            setError('Failed to show original image.');
+            setShowOriginal(false);
+          }
+        }
+      }
+    };
+
+    generate();
+
+    return () => {
+      isEffectActive = false;
+    };
+  }, [showOriginal, selectedImage?.path, adjustments, transformedOriginalUrl]);
+}
diff --git a/src/hooks/useHandlers.ts b/src/hooks/useHandlers.ts
new file mode 100644
index 000000000..b5058a0fe
--- /dev/null
+++ b/src/hooks/useHandlers.ts
@@ -0,0 +1,150 @@
+import { useApplyAdjustments } from './handlers/useApplyAdjustments';
+import { useCloseConfirmModal } from './handlers/useCloseConfirmModal';
+import { useCreateResizeHandler } from './handlers/useCreateResizeHandler';
+import { useDebouncedSave } from './handlers/useDebounce';
+import { useDebouncedSetHistory } from './handlers/useDebouncedSetHistory';
+import { useExecuteDelete } from './handlers/useExecuteDelete';
+import { useGenerateUncroppedPreview } from './handlers/useGenerateUncroppedPreview';
+import { useGetCommonTags } from './handlers/useGetCommonTags';
+import { useHandleActiveTreeSectionChange } from './handlers/useHandleActiveTreeSectionChange';
+import { useHandleApplyDenoise } from './handlers/useHandleApplyDenoise';
+import { useHandleAutoAdjustments } from './handlers/useHandleAutoAdjustments';
+import { useHandleBackToLibrary } from './handlers/useHandleBackToLibrary';
+import { useHandleClearSelection } from './handlers/useHandleClearSelection';
+import { useHandleContinueSession } from './handlers/useHandleContinueSession';
+import { useHandleCopyAdjustments } from './handlers/useHandleCopyAdjustments';
+import { useHandleCreateFolder } from './handlers/useHandleCreateFolder';
+import { useHandleDeleteAiPatch } from './handlers/useHandleDeleteAiPatch';
+import { useHandleDeleteMaskContainer } from './handlers/useHandleDeleteMaskContainer';
+import { useHandleDeleteSelected } from './handlers/useHandleDeleteSelected';
+import { useHandleDisplaySizeChange } from './handlers/useHandleDisplaySizeChange';
+import { useHandleEditorContextMenu } from './handlers/useHandleEditorContextMenu';
+import { useHandleFolderTreeContextMenu } from './handlers/useHandleFolderTreeContextMenu';
+import { useHandleFullResolutionLogic } from './handlers/useHandleFullResolutionLogic';
+import { useHandleGenerateAiForegroundMask } from './handlers/useHandleGenerateAiForegroundMask';
+import { useHandleGenerateAiMask } from './handlers/useHandleGenerateAiMask';
+import { useHandleGenerateAiSkyMask } from './handlers/useHandleGenerateAiSkyMask';
+import { useHandleGenerativeReplace } from './handlers/useHandleGenerativeReplace';
+import { useHandleGoHome } from './handlers/useHandleGoHome';
+import { useHandleImageClick } from './handlers/useHandleImageClick';
+import { useHandleImageSelect } from './handlers/useHandleImageSelect';
+import { useHandleImportClick } from './handlers/useHandleImportClick';
+import { useHandleLibraryImageSingleClick } from './handlers/useHandleLibraryImageSingleClick';
+import { useHandleLibraryRefresh } from './handlers/useHandleLibraryRefresh';
+import { useHandleLutSelect } from './handlers/useHandleLutSelect';
+import { useHandleMainLibraryContextMenu } from './handlers/useHandleMainLibraryContextMenu';
+import { useHandleMultiselectClick } from './handlers/useHandleMultiSelectClick';
+import { useHandleOpenFolder } from './handlers/useHandleOpenFolder';
+import { useHandlePasteAdjustments } from './handlers/useHandlePasteAdjustments';
+import { useHandlePasteFiles } from './handlers/useHandlePasteFiles';
+import { useHandleQuickErase } from './handlers/useHandleQuickErase';
+import { useHandleRate } from './handlers/useHandleRate';
+import { useHandleRenameFiles } from './handlers/useHandleRenameFiles';
+import { useHandleRenameFolder } from './handlers/useHandleRenameFolder';
+import { useHandleResetAdjustments } from './handlers/useHandleResetAdjustments';
+import { useHandleRightPanelSelect } from './handlers/useHandleRightPanelSelect';
+import { useHandleSaveCollage } from './handlers/useHandleSaveCollage';
+import { useHandleSaveDenoisedImage } from './handlers/useHandleSaveDenoisedImage';
+import { useHandleSaveHdr } from './handlers/useHandleSaveHdr';
+import { useHandleSavePanorama } from './handlers/useHandleSavePanorama';
+import { useHandleSaveRename } from './handlers/useHandleSaveRename';
+import { useHandleSelectSubfolder } from './handlers/useHandleSelectSubfolder';
+import { useHandleSetColorLabel } from './handlers/useHandleSetColorLabel';
+import { useHandleSettingsChange } from './handlers/useHandleSettingsChange';
+import { useHandleStartImport } from './handlers/useHandleStartImport';
+import { useHandleStraighten } from './handlers/useHandleStraighten';
+import { useHandleTagsChanged } from './handlers/useHandleTagsChanged';
+import { useHandleThumbnailContextMenu } from './handlers/useHandleThumbnailContextmenu';
+import { useHandleToggleAiPatchVisibility } from './handlers/useHandleToggleAiPatchVisibility';
+import { useHandleToggleFolder } from './handlers/useHandleToggleFolder';
+import { useHandleToggleFullScreen } from './handlers/useHandleToggleFullScreen';
+import { useHandleTogglePinFolder } from './handlers/useHandleTogglePinFolder';
+import { useHandleToggleWaveform } from './handlers/useHandleToggleWaveform';
+import { useHandleUserTransform } from './handlers/useHandleUserTransform';
+import { useHandleZoomChange } from './handlers/useHandleZoomChange';
+import { useRedo } from './handlers/useRedo';
+import { useRefreshAllFolderTrees } from './handlers/useRefreshAllFolderTrees';
+import { useRefreshImageList } from './handlers/useRefreshImageList';
+import { useRequestFullResolution } from './handlers/useRequestFullResolution';
+import { useSetAdjustments } from './handlers/useSetAdjustments';
+import { useUndo } from './handlers/useUndo';
+import { useUpdateSubMask } from './handlers/useUpdateSubMask';
+import { useHandleWbPicked, useToggleWbPicker } from './handlers/useWbPicker';
+
+export function useHandlers() {
+  return {
+    handleBackToLibrary: useHandleBackToLibrary(),
+    handleImageSelect: useHandleImageSelect(),
+    executeDelete: useExecuteDelete(),
+    handleDeleteSelected: useHandleDeleteSelected(),
+    applyAdjustments: useApplyAdjustments(),
+    debouncedSave: useDebouncedSave(),
+    refreshImageList: useRefreshImageList(),
+    handleDisplaySizeChange: useHandleDisplaySizeChange(),
+    debouncedSetHistory: useDebouncedSetHistory(),
+    setAdjustments: useSetAdjustments(),
+    handleStraighten: useHandleStraighten(),
+    toggleWbPicker: useToggleWbPicker(),
+    handleWbPicked: useHandleWbPicked(),
+    undo: useUndo(),
+    redo: useRedo(),
+    updateSubMask: useUpdateSubMask(),
+    handleGenerativeReplace: useHandleGenerativeReplace(),
+    handleQuickErase: useHandleQuickErase(),
+    handleDeleteMaskContainer: useHandleDeleteMaskContainer(),
+    handleDeleteAiPatch: useHandleDeleteAiPatch(),
+    handleToggleAiPatchVisibility: useHandleToggleAiPatchVisibility(),
+    handleGenerateAiMask: useHandleGenerateAiMask(),
+    handleGenerateAiForegroundMask: useHandleGenerateAiForegroundMask(),
+    handleGenerateAiSkyMask: useHandleGenerateAiSkyMask(),
+    generateUncroppedPreview: useGenerateUncroppedPreview(),
+    createResizeHandler: useCreateResizeHandler(),
+    handleLutSelect: useHandleLutSelect(),
+    handleRightPanelSelect: useHandleRightPanelSelect(),
+    handleSettingsChange: useHandleSettingsChange(),
+    handleToggleWaveform: useHandleToggleWaveform(),
+    refreshAllFolderTrees: useRefreshAllFolderTrees(),
+    handleActiveTreeSectionChange: useHandleActiveTreeSectionChange(),
+    handleTogglePinFolder: useHandleTogglePinFolder(),
+    handleSelectSubfolder: useHandleSelectSubfolder(),
+    handleLibraryRefresh: useHandleLibraryRefresh(),
+    handleToggleFolder: useHandleToggleFolder(),
+    handleToggleFullScreen: useHandleToggleFullScreen(),
+    handleCopyAdjustments: useHandleCopyAdjustments(),
+    handlePasteAdjustments: useHandlePasteAdjustments(),
+    handleAutoAdjustments: useHandleAutoAdjustments(),
+    handleRate: useHandleRate(),
+    handleSetColorLabel: useHandleSetColorLabel(),
+    getCommonTags: useGetCommonTags(),
+    handleTagsChanged: useHandleTagsChanged(),
+    closeConfirmModal: useCloseConfirmModal(),
+    handlePasteFiles: useHandlePasteFiles(),
+    requestFullResolution: useRequestFullResolution(),
+    handleFullResolutionLogic: useHandleFullResolutionLogic(),
+    handleZoomChange: useHandleZoomChange(),
+    handleUserTransform: useHandleUserTransform(),
+    handleSavePanorama: useHandleSavePanorama(),
+    handleSaveHdr: useHandleSaveHdr(),
+    handleApplyDenoise: useHandleApplyDenoise(),
+    handleSaveDenoisedImage: useHandleSaveDenoisedImage(),
+    handleSaveCollage: useHandleSaveCollage(),
+    handleOpenFolder: useHandleOpenFolder(),
+    handleGoHome: useHandleGoHome(),
+    handleContinueSession: useHandleContinueSession(),
+    handleMultiSelectClick: useHandleMultiselectClick(),
+    handleLibraryImageSingleClick: useHandleLibraryImageSingleClick(),
+    handleImageClick: useHandleImageClick(),
+    handleClearSelection: useHandleClearSelection(),
+    handleRenameFiles: useHandleRenameFiles(),
+    handleSaveRename: useHandleSaveRename(),
+    handleStartImport: useHandleStartImport(),
+    handleResetAdjustments: useHandleResetAdjustments(),
+    handleImportClick: useHandleImportClick(),
+    handleEditorContextMenu: useHandleEditorContextMenu(),
+    handleThumbnailContextMenu: useHandleThumbnailContextMenu(),
+    handleCreateFolder: useHandleCreateFolder(),
+    handleRenameFolder: useHandleRenameFolder(),
+    handleFolderTreeContextMenu: useHandleFolderTreeContextMenu(),
+    handleMainLibraryContextMenu: useHandleMainLibraryContextMenu(),
+  };
+}
diff --git a/src/hooks/useSortedImageList.ts b/src/hooks/useSortedImageList.ts
new file mode 100644
index 000000000..2e4f80dae
--- /dev/null
+++ b/src/hooks/useSortedImageList.ts
@@ -0,0 +1,234 @@
+import { useMemo } from 'react';
+import { useAppState } from '../context/ContextProviders';
+import { ImageFile, RawStatus, SortDirection } from '../components/ui/AppProperties';
+import { getParentDir } from '../utils/helpers';
+
+export function useSortedImageList() {
+  const { imageList, filterCriteria, supportedTypes, imageRatings, searchCriteria, sortCriteria, appSettings } =
+    useAppState();
+
+  const sortedImageList = useMemo(() => {
+    let processedList = imageList;
+
+    if (filterCriteria.rawStatus === RawStatus.RawOverNonRaw && supportedTypes) {
+      const rawBaseNames = new Set<string>();
+
+      for (const image of imageList) {
+        const pathWithoutVC = image.path.split('?vc=')[0];
+        const filename = pathWithoutVC.split(/[\\/]/).pop() || '';
+        const lastDotIndex = filename.lastIndexOf('.');
+        const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1).toLowerCase() : '';
+
+        if (extension && supportedTypes.raw.includes(extension)) {
+          const baseName = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
+          const parentDir = getParentDir(pathWithoutVC);
+          const uniqueKey = `${parentDir}/${baseName}`;
+          rawBaseNames.add(uniqueKey);
+        }
+      }
+
+      if (rawBaseNames.size > 0) {
+        processedList = imageList.filter((image) => {
+          const pathWithoutVC = image.path.split('?vc=')[0];
+          const filename = pathWithoutVC.split(/[\\/]/).pop() || '';
+          const lastDotIndex = filename.lastIndexOf('.');
+          const extension = lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1).toLowerCase() : '';
+
+          const isNonRaw = extension && supportedTypes.nonRaw.includes(extension);
+
+          if (isNonRaw) {
+            const baseName = lastDotIndex !== -1 ? filename.substring(0, lastDotIndex) : filename;
+            const parentDir = getParentDir(pathWithoutVC);
+            const uniqueKey = `${parentDir}/${baseName}`;
+
+            if (rawBaseNames.has(uniqueKey)) {
+              return false;
+            }
+          }
+
+          return true;
+        });
+      }
+    }
+
+    const filteredList = processedList.filter((image) => {
+      if (filterCriteria.rating > 0) {
+        const rating = imageRatings[image.path] || 0;
+        if (filterCriteria.rating === 5) {
+          if (rating !== 5) return false;
+        } else {
+          if (rating < filterCriteria.rating) return false;
+        }
+      }
+
+      if (
+        filterCriteria.rawStatus &&
+        filterCriteria.rawStatus !== RawStatus.All &&
+        filterCriteria.rawStatus !== RawStatus.RawOverNonRaw &&
+        supportedTypes
+      ) {
+        const extension = image.path.split('.').pop()?.toLowerCase() || '';
+        const isRaw = supportedTypes.raw?.includes(extension);
+
+        if (filterCriteria.rawStatus === RawStatus.RawOnly && !isRaw) {
+          return false;
+        }
+        if (filterCriteria.rawStatus === RawStatus.NonRawOnly && isRaw) {
+          return false;
+        }
+      }
+
+      if (filterCriteria.colors && filterCriteria.colors.length > 0) {
+        const imageColor = (image.tags || []).find((tag: string) => tag.startsWith('color:'))?.substring(6);
+
+        const hasMatchingColor = imageColor && filterCriteria.colors.includes(imageColor);
+        const matchesNone = !imageColor && filterCriteria.colors.includes('none');
+
+        if (!hasMatchingColor && !matchesNone) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    const { tags: searchTags, text: searchText, mode: searchMode } = searchCriteria;
+    const lowerCaseSearchText = searchText.trim().toLowerCase();
+
+    const filteredBySearch =
+      searchTags.length === 0 && lowerCaseSearchText === ''
+        ? filteredList
+        : filteredList.filter((image: ImageFile) => {
+            const lowerCaseImageTags = (image.tags || []).map((t) => t.toLowerCase().replace('user:', ''));
+            const filename = image?.path?.split(/[\\/]/)?.pop()?.toLowerCase() || '';
+
+            let tagsMatch = true;
+            if (searchTags.length > 0) {
+              const lowerCaseSearchTags = searchTags.map((t) => t.toLowerCase());
+              if (searchMode === 'OR') {
+                tagsMatch = lowerCaseSearchTags.some((searchTag) =>
+                  lowerCaseImageTags.some((imgTag) => imgTag.includes(searchTag)),
+                );
+              } else {
+                tagsMatch = lowerCaseSearchTags.every((searchTag) =>
+                  lowerCaseImageTags.some((imgTag) => imgTag.includes(searchTag)),
+                );
+              }
+            }
+
+            let textMatch = true;
+            if (lowerCaseSearchText !== '') {
+              textMatch =
+                filename.includes(lowerCaseSearchText) ||
+                lowerCaseImageTags.some((t) => t.includes(lowerCaseSearchText));
+            }
+
+            return tagsMatch && textMatch;
+          });
+
+    const list = [...filteredBySearch];
+
+    const parseShutter = (val: string | undefined): number | null => {
+      if (!val) return null;
+      const cleanVal = val.replace(/s/i, '').trim();
+      const parts = cleanVal.split('/');
+      if (parts.length === 2) {
+        const num = parseFloat(parts[0]);
+        const den = parseFloat(parts[1]);
+        return den !== 0 ? num / den : null;
+      }
+      const numVal = parseFloat(cleanVal);
+      return isNaN(numVal) ? null : numVal;
+    };
+
+    const parseAperture = (val: string | undefined): number | null => {
+      if (!val) return null;
+      const match = val.match(/(\d+(\.\d+)?)/);
+      const numVal = match ? parseFloat(match[0]) : null;
+      return numVal === null || isNaN(numVal) ? null : numVal;
+    };
+
+    const parseFocalLength = (val: string | undefined): number | null => {
+      if (!val) return null;
+      const match = val.match(/(\d+(\.\d+)?)/);
+      if (!match) return null;
+      const numVal = parseFloat(match[0]);
+      return isNaN(numVal) ? null : numVal;
+    };
+
+    list.sort((a, b) => {
+      const { key, order } = sortCriteria;
+      let comparison = 0;
+
+      const compareNullable = (valA: any, valB: any) => {
+        if (valA !== null && valB !== null) {
+          if (valA < valB) return -1;
+          if (valA > valB) return 1;
+          return 0;
+        }
+        if (valA !== null) return -1;
+        if (valB !== null) return 1;
+        return 0;
+      };
+
+      switch (key) {
+        case 'date_taken': {
+          const dateA = a.exif?.DateTimeOriginal;
+          const dateB = b.exif?.DateTimeOriginal;
+          comparison = compareNullable(dateA, dateB);
+          if (comparison === 0) comparison = a.modified - b.modified;
+          break;
+        }
+        case 'iso': {
+          const getIso = (exif: { [key: string]: string } | null): number | null => {
+            if (!exif) return null;
+            const isoStr = exif.PhotographicSensitivity || exif.ISOSpeedRatings;
+            if (!isoStr) return null;
+            const isoNum = parseInt(isoStr, 10);
+            return isNaN(isoNum) ? null : isoNum;
+          };
+          const isoA = getIso(a.exif);
+          const isoB = getIso(b.exif);
+          comparison = compareNullable(isoA, isoB);
+          break;
+        }
+        case 'shutter_speed': {
+          const shutterA = parseShutter(a.exif?.ExposureTime);
+          const shutterB = parseShutter(b.exif?.ExposureTime);
+          comparison = compareNullable(shutterA, shutterB);
+          break;
+        }
+        case 'aperture': {
+          const apertureA = parseAperture(a.exif?.FNumber);
+          const apertureB = parseAperture(b.exif?.FNumber);
+          comparison = compareNullable(apertureA, apertureB);
+          break;
+        }
+        case 'focal_length': {
+          const focalA = parseFocalLength(a.exif?.FocalLength);
+          const focalB = parseFocalLength(b.exif?.FocalLength);
+          comparison = compareNullable(focalA, focalB);
+          break;
+        }
+        case 'date':
+          comparison = a.modified - b.modified;
+          break;
+        case 'rating':
+          comparison = (imageRatings[a.path] || 0) - (imageRatings[b.path] || 0);
+          break;
+        default:
+          comparison = a.path.localeCompare(b.path);
+          break;
+      }
+
+      if (comparison === 0 && key !== 'name') {
+        return a.path.localeCompare(b.path);
+      }
+
+      return order === SortDirection.Ascending ? comparison : -comparison;
+    });
+    return list;
+  }, [imageList, sortCriteria, imageRatings, filterCriteria, supportedTypes, searchCriteria, appSettings]);
+
+  return { sortedImageList };
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
new file mode 100644
index 000000000..ce43b570b
--- /dev/null
+++ b/src/utils/constants.ts
@@ -0,0 +1,3 @@
+export const CLERK_PUBLISHABLE_KEY = 'pk_test_YnJpZWYtc2Vhc25haWwtMTIuY2xlcmsuYWNjb3VudHMuZGV2JA'; // local dev key
+
+export const DEBUG = false;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
new file mode 100644
index 000000000..3124cfdcd
--- /dev/null
+++ b/src/utils/helpers.ts
@@ -0,0 +1,8 @@
+export const getParentDir = (filePath: string): string => {
+  const separator = filePath.includes('/') ? '/' : '\\';
+  const lastSeparatorIndex = filePath.lastIndexOf(separator);
+  if (lastSeparatorIndex === -1) {
+    return '';
+  }
+  return filePath.substring(0, lastSeparatorIndex);
+};