Add side panel visibility toggles

src/App.tsx

@@ -28,7 +28,7 @@
 
 import { ContextMenuProvider } from './context/ContextMenuContext';
 import { useSettingsStore } from './store/useSettingsStore';
-import { useUIStore } from './store/useUIStore';
+import { MIN_SIDE_PANEL_WIDTH, useUIStore } from './store/useUIStore';
 import { useLibraryStore } from './store/useLibraryStore';
 import { useEditorStore } from './store/useEditorStore';
 import { useProcessStore } from './store/useProcessStore';
@@ -70,12 +70,12 @@
 
 const CLERK_PUBLISHABLE_KEY = 'pk_test_YnJpZWYtc2Vhc25haWwtMTIuY2xlcmsuYWNjb3VudHMuZGV2JA'; // local dev key
 
 const insertChildrenIntoTree = (node: any, targetPath: string, newChildren: any[]): any => {
   if (!node) return null;
 
   if (node.path === targetPath) {
     const mergedChildren = newChildren.map((newChild: any) => {
       const existingChild = node.children?.find((c: any) => c.path === newChild.path);
       if (existingChild && existingChild.children && existingChild.children.length > 0) {
         return { ...newChild, children: existingChild.children };
       }
@@ -87,7 +87,7 @@
   if (node.children && node.children.length > 0) {
     return {
       ...node,
       children: node.children.map((child: any) => insertChildrenIntoTree(child, targetPath, newChildren)),
     };
   }
 
@@ -112,10 +112,12 @@
     isWindowFullScreen,
     isInstantTransition,
     isLayoutReady,
     uiVisibility,
     isLibraryExportPanelVisible,
     leftPanelWidth,
     rightPanelWidth,
+    leftPanelVisible,
+    rightPanelVisible,
     compactEditorPanelHeightOverride,
     activePanel,
     activeLayoutDragItem,
@@ -135,6 +137,8 @@
       isLibraryExportPanelVisible: state.isLibraryExportPanelVisible,
       leftPanelWidth: state.leftPanelWidth,
       rightPanelWidth: state.rightPanelWidth,
+      leftPanelVisible: state.leftPanelVisible,
+      rightPanelVisible: state.rightPanelVisible,
       compactEditorPanelHeightOverride: state.compactEditorPanelHeightOverride,
       activePanel: state.activePanel,
       activeLayoutDragItem: state.activeLayoutDragItem,
@@ -182,7 +186,7 @@
     selectedImagePathRef.current = selectedImage?.path ?? null;
   }, [selectedImage?.path]);
 
   const prevAdjustmentsRef = useRef<any>(null);
 
   const [viewportSize, setViewportSize] = useState<ImageDimensions>(() => {
     if (typeof window === 'undefined') {
@@ -199,7 +203,7 @@
   const previewJobIdRef = useRef<number>(0);
   const latestRenderedJobIdRef = useRef<number>(0);
   const currentResRef = useRef<number>(1280);
   const cachedEditStateRef = useRef<any | null>(null);
 
   const [libraryViewMode, setLibraryViewMode] = useState<LibraryViewMode>(defaultLibraryViewMode);
   const [isResizing, setIsResizing] = useState(false);
@@ -208,9 +212,9 @@
 
   const { requestThumbnails, clearThumbnailQueue, markGenerated } = useThumbnails();
 
   const transformWrapperRef = useRef<any>(null);
   const preloadedDataRef = useRef<{
     trees?: Promise<any>;
     images?: Promise<ImageFile[]>;
     rootPaths?: string[];
     currentPath?: string;
@@ -503,14 +507,20 @@
 
       if (stateKey === 'left') {
         let w = startSize + (moveEvent.clientX - startX);
-        if (w < 200) w = 48;
-        else if (w > 600) w = 600;
-        setUI({ leftPanelWidth: Math.round(w) });
+        if (w < MIN_SIDE_PANEL_WIDTH) {
+          setUI({ leftPanelWidth: startSize, leftPanelVisible: false });
+        } else {
+          if (w > 600) w = 600;
+          setUI({ leftPanelWidth: Math.round(w), leftPanelVisible: true });
+        }
       } else if (stateKey === 'right') {
         let w = startSize - (moveEvent.clientX - startX);
-        if (w < 200) w = 48;
-        else if (w > 600) w = 600;
-        setUI({ rightPanelWidth: Math.round(w) });
+        if (w < MIN_SIDE_PANEL_WIDTH) {
+          setUI({ rightPanelWidth: startSize, rightPanelVisible: false });
+        } else {
+          if (w > 600) w = 600;
+          setUI({ rightPanelWidth: Math.round(w), rightPanelVisible: true });
+        }
       } else if (stateKey === 'bottom') {
         const newHeight = startSize - (moveEvent.clientY - startY);
         if (newHeight < 100) {
@@ -729,7 +739,7 @@
               isFullScreen ? 'max-h-0 opacity-0 pointer-events-none' : 'max-h-15 opacity-100',
             )}
           >
-            {appSettings?.decorations || (!isWindowFullScreen && <TitleBar />)}
+            {appSettings?.decorations || (!isWindowFullScreen && <TitleBar showPanelControls={hasMainContent} />)}
           </div>
         )}
         <div
@@ -745,6 +755,7 @@
                 <SidePanelArea
                   side="left"
                   width={leftPanelWidth}
+                  isVisible={leftPanelVisible}
                   topRegion="leftTop"
                   bottomRegion="leftBottom"
                   renderPanel={renderAppPanel}
@@ -845,6 +856,7 @@
                 <SidePanelArea
                   side="right"
                   width={rightPanelWidth}
+                  isVisible={rightPanelVisible}
                   topRegion="rightTop"
                   bottomRegion="rightBottom"
                   renderPanel={renderAppPanel}
@@ -908,7 +920,7 @@
 }
 
 const AppWrapper = () => (
   <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY} routerPush={(to) => {}} routerReplace={(to) => {}}>
     <ContextMenuProvider>
       <App />
       <GlobalTooltip />

src/components/panel/PanelSwitcher.tsx

@@ -39,13 +39,10 @@ const PANEL_TITLES: Record<Panel, string> = {
   [Panel.FolderTree]: 'library.folders.sourcesTitle',
 };
 
-function PanelTab({ panel, region, side }: { panel: Panel; region: PanelRegion; side: 'left' | 'right' }) {
+function PanelTab({ panel, region }: { panel: Panel; region: PanelRegion }) {
   const { t } = useTranslation();
   const activePanels = useUIStore((s) => s.activePanels);
   const setActivePanel = useUIStore((s) => s.setActivePanel);
-  const setUI = useUIStore((s) => s.setUI);
-  const leftPanelWidth = useUIStore((s) => s.leftPanelWidth);
-  const rightPanelWidth = useUIStore((s) => s.rightPanelWidth);
   const isInstantTransition = useUIStore((s) => s.isInstantTransition);
 
   const isActive = activePanels[region] === panel;
@@ -58,12 +55,6 @@ function PanelTab({ panel, region, side }: { panel: Panel; region: PanelRegion;
 
   const handleClick = () => {
     setActivePanel(region, panel);
-    if (side === 'left' && leftPanelWidth < 200) {
-      setUI({ leftPanelWidth: 320 });
-    }
-    if (side === 'right' && rightPanelWidth < 200) {
-      setUI({ rightPanelWidth: 320 });
-    }
   };
 
   return (
@@ -94,15 +85,7 @@ function PanelTab({ panel, region, side }: { panel: Panel; region: PanelRegion;
   );
 }
 
-export default function PanelSwitcher({
-  region,
-  side,
-  placement,
-}: {
-  region: PanelRegion;
-  side: 'left' | 'right';
-  placement: SwitcherPlacement;
-}) {
+export default function PanelSwitcher({ region, placement }: { region: PanelRegion; placement: SwitcherPlacement }) {
   const panelLayout = useUIStore((s) => s.panelLayout);
   const panels = panelLayout[region];
   const movePanelToIndex = useUIStore((s) => s.movePanelToIndex);
@@ -230,7 +213,7 @@ export default function PanelSwitcher({
 
       <LayoutGroup id={`switcher-${region}`}>
         {panels.map((id) => (
-          <PanelTab key={id} panel={id} region={region} side={side} />
+          <PanelTab key={id} panel={id} region={region} />
         ))}
       </LayoutGroup>
     </div>

src/components/panel/SidePanelArea.tsx

@@ -7,11 +7,10 @@ import { SwitcherPlacement, useUIStore } from '../../store/useUIStore';
 import { Panel, PanelRegion } from '../ui/AppProperties';
 import PanelSwitcher from './PanelSwitcher';
 
-const COLLAPSE_THRESHOLD = 200;
-
 interface SidePanelAreaProps {
   side: 'left' | 'right';
   width: number;
+  isVisible: boolean;
   topRegion: PanelRegion;
   bottomRegion: PanelRegion;
   renderPanel: (panel: Panel) => React.ReactNode;
@@ -23,14 +22,14 @@ function RegionDroppableContainer({
   region,
   side,
   renderPanel,
-  width,
+  isVisible,
   isInstantTransition,
   isResizing,
 }: {
   region: PanelRegion;
   side: 'left' | 'right';
   renderPanel: (panel: Panel) => React.ReactNode;
-  width: number;
+  isVisible: boolean;
   isInstantTransition: boolean;
   isResizing: boolean;
 }) {
@@ -111,8 +110,6 @@ function RegionDroppableContainer({
 
   const isFlexRow = placement === 'left' || placement === 'right';
   const showSwitcherFirst = placement === 'left' || placement === 'top';
-  const isCollapsed = width < COLLAPSE_THRESHOLD;
-
   return (
     <div
       ref={setRefs}
@@ -158,10 +155,10 @@ function RegionDroppableContainer({
         className={clsx(
           'flex flex-1 w-full h-full min-w-0 min-h-0 overflow-hidden transition-opacity duration-300 ease-in-out',
           isFlexRow ? 'flex-row' : 'flex-col',
-          isCollapsed ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto',
+          isVisible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none',
         )}
       >
-        {showSwitcherFirst && <PanelSwitcher region={region} side={side} placement={placement} />}
+        {showSwitcherFirst && <PanelSwitcher region={region} placement={placement} />}
 
         <div className="flex-1 overflow-hidden relative min-w-0" onPointerDownCapture={handleContentInteraction}>
           <AnimatePresence mode="wait">
@@ -180,7 +177,7 @@ function RegionDroppableContainer({
           </AnimatePresence>
         </div>
 
-        {!showSwitcherFirst && <PanelSwitcher region={region} side={side} placement={placement} />}
+        {!showSwitcherFirst && <PanelSwitcher region={region} placement={placement} />}
       </div>
     </div>
   );
@@ -306,6 +303,7 @@ function SplitOverlayDropzone({
 export default function SidePanelArea({
   side,
   width,
+  isVisible,
   topRegion,
   bottomRegion,
   renderPanel,
@@ -371,19 +369,20 @@ export default function SidePanelArea({
   const topSplitIsTop = topPlacement === 'bottom';
   const bottomSplitIsTop = bottomPlacement !== 'top';
 
-  const isCollapsed = width < COLLAPSE_THRESHOLD;
-  const shouldAnimateWidth = !isInstantTransition && (!isResizing || isCollapsed);
+  const shouldAnimateWidth = !isInstantTransition && !isResizing;
 
   return (
     <div
+      aria-hidden={isFullScreen || !isVisible}
+      inert={isFullScreen || !isVisible}
       className={clsx(
         'flex shrink-0 h-full relative overflow-hidden',
-        isFullScreen ? 'w-0 opacity-0 pointer-events-none' : 'opacity-100',
+        isFullScreen || !isVisible ? 'opacity-0 pointer-events-none' : 'opacity-100',
         shouldAnimateWidth && 'transition-all duration-300 ease-in-out',
       )}
-      style={{ width: isFullScreen ? 0 : width }}
+      style={{ width: isFullScreen || !isVisible ? 0 : width }}
     >
-      {side === 'right' && (
+      {side === 'right' && isVisible && (
         <div className="shrink-0 w-2 my-auto h-full cursor-col-resize z-20" onPointerDown={onWidthChange} />
       )}
 
@@ -397,7 +396,7 @@ export default function SidePanelArea({
               region={topRegion}
               side={side}
               renderPanel={renderPanel}
-              width={width}
+              isVisible={isVisible}
               isInstantTransition={isInstantTransition}
               isResizing={isResizing}
             />
@@ -426,7 +425,7 @@ export default function SidePanelArea({
               region={bottomRegion}
               side={side}
               renderPanel={renderPanel}
-              width={width}
+              isVisible={isVisible}
               isInstantTransition={isInstantTransition}
               isResizing={isResizing}
             />
@@ -439,15 +438,15 @@ export default function SidePanelArea({
               region={topRegion}
               side={side}
               renderPanel={renderPanel}
-              width={width}
+              isVisible={isVisible}
               isInstantTransition={isInstantTransition}
               isResizing={isResizing}
             />
           </div>
         )}
       </div>
 
-      {side === 'left' && (
+      {side === 'left' && isVisible && (
         <div className="shrink-0 w-2 my-auto h-full cursor-col-resize z-20" onPointerDown={onWidthChange} />
       )}
     </div>

src/components/ui/AppProperties.tsx

@@ -167,6 +167,8 @@ export enum ThumbnailAspectRatio {
 export interface WorkspaceState {
   leftPanelWidth: number;
   rightPanelWidth: number;
+  leftPanelVisible?: boolean;
+  rightPanelVisible?: boolean;
   leftTopHeight: number;
   rightTopHeight: number;
   panelLayout: Record<PanelRegion, Panel[]>;

src/hooks/useAppInitialization.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { useShallow } from 'zustand/react/shallow';
 import { useSettingsStore } from '../store/useSettingsStore';
-import { useUIStore } from '../store/useUIStore';
+import { DEFAULT_SIDE_PANEL_WIDTH, MIN_SIDE_PANEL_WIDTH, useUIStore } from '../store/useUIStore';
 import { useLibraryStore } from '../store/useLibraryStore';
 import { useEditorStore } from '../store/useEditorStore';
 import { useProcessStore } from '../store/useProcessStore';
@@ -91,6 +91,8 @@ export const useAppInitialization = ({
     useShallow((state) => ({
       leftPanelWidth: state.leftPanelWidth,
       rightPanelWidth: state.rightPanelWidth,
+      leftPanelVisible: state.leftPanelVisible,
+      rightPanelVisible: state.rightPanelVisible,
       leftTopHeight: state.leftTopHeight,
       rightTopHeight: state.rightTopHeight,
       panelLayout: state.panelLayout,
@@ -191,9 +193,18 @@ export const useAppInitialization = ({
         }
 
         if (settings?.workspace) {
+          const savedLeftPanelWidth = settings.workspace.leftPanelWidth;
+          const savedRightPanelWidth = settings.workspace.rightPanelWidth;
+          const leftPanelWasCollapsed =
+            typeof savedLeftPanelWidth === 'number' && savedLeftPanelWidth < MIN_SIDE_PANEL_WIDTH;
+          const rightPanelWasCollapsed =
+            typeof savedRightPanelWidth === 'number' && savedRightPanelWidth < MIN_SIDE_PANEL_WIDTH;
+
           setUI({
-            leftPanelWidth: settings.workspace.leftPanelWidth,
-            rightPanelWidth: settings.workspace.rightPanelWidth,
+            leftPanelWidth: leftPanelWasCollapsed ? DEFAULT_SIDE_PANEL_WIDTH : savedLeftPanelWidth,
+            rightPanelWidth: rightPanelWasCollapsed ? DEFAULT_SIDE_PANEL_WIDTH : savedRightPanelWidth,
+            leftPanelVisible: settings.workspace.leftPanelVisible ?? !leftPanelWasCollapsed,
+            rightPanelVisible: settings.workspace.rightPanelVisible ?? !rightPanelWasCollapsed,
             leftTopHeight: settings.workspace.leftTopHeight,
             rightTopHeight: settings.workspace.rightTopHeight,
             panelLayout: settings.workspace.panelLayout,

src/hooks/useKeyboardShortcuts.ts

@@ -305,6 +305,20 @@ export const useKeyboardShortcuts = ({
           s.editor.setEditor({ showOriginal: !s.editor.showOriginal });
         },
       },
+      toggle_left_panel: {
+        shouldFire: () => true,
+        execute: (e: KeyboardEvent, s: ReturnType<typeof getStoreState>) => {
+          e.preventDefault();
+          s.ui.toggleLeftPanel();
+        },
+      },
+      toggle_right_panel: {
+        shouldFire: () => true,
+        execute: (e: KeyboardEvent, s: ReturnType<typeof getStoreState>) => {
+          e.preventDefault();
+          s.ui.toggleRightPanel();
+        },
+      },
       toggle_adjustments: {
         shouldFire: () => true,
         execute: (e: any, s: any) => {

src/i18n/locales/ca.json

@@ -1529,6 +1529,8 @@
         "toggle_export": "Alternar tauler d'Exportació",
         "toggle_folder_tree": "Alternar tauler d'arbre de carpetes",
         "toggle_fullscreen": "Alternar pantalla completa",
+        "toggle_left_panel": "Alternar el tauler esquerre",
+        "toggle_right_panel": "Alternar el tauler dret",
         "toggle_library_exif": "Alternar superposició EXIF",
         "toggle_masks": "Alternar tauler de Màscares",
         "toggle_metadata": "Alternar tauler de Metadades",

src/i18n/locales/de.json

@@ -1529,6 +1529,8 @@
         "toggle_export": "Exportieren-Panel ein-/ausblenden",
         "toggle_folder_tree": "Ordnerstruktur-Panel ein-/ausblenden",
         "toggle_fullscreen": "Vollbild umschalten",
+        "toggle_left_panel": "Linkes Bedienfeld ein-/ausblenden",
+        "toggle_right_panel": "Rechtes Bedienfeld ein-/ausblenden",
         "toggle_library_exif": "EXIF-Überlagerung ein-/ausblenden",
         "toggle_masks": "Maskieren-Panel ein-/ausblenden",
         "toggle_metadata": "Metadaten-Panel ein-/ausblenden",

src/i18n/locales/en.json

@@ -1529,6 +1529,8 @@
         "toggle_export": "Toggle Export panel",
         "toggle_folder_tree": "Toggle Folder Tree panel",
         "toggle_fullscreen": "Toggle fullscreen",
+        "toggle_left_panel": "Toggle left panel",
+        "toggle_right_panel": "Toggle right panel",
         "toggle_library_exif": "Toggle EXIF overlay",
         "toggle_masks": "Toggle Masks panel",
         "toggle_metadata": "Toggle Metadata panel",

src/i18n/locales/es.json

@@ -1562,6 +1562,8 @@
         "toggle_export": "Alternar panel de Exportación",
         "toggle_folder_tree": "Alternar panel de árbol de carpetas",
         "toggle_fullscreen": "Alternar pantalla completa",
+        "toggle_left_panel": "Alternar panel izquierdo",
+        "toggle_right_panel": "Alternar panel derecho",
         "toggle_library_exif": "Alternar superposición EXIF",
         "toggle_masks": "Alternar panel de Máscaras",
         "toggle_metadata": "Alternar panel de Metadatos",

src/i18n/locales/fr.json

@@ -1562,6 +1562,8 @@
         "toggle_export": "Basculer le panneau d'exportation",
         "toggle_folder_tree": "Afficher/Masquer le panneau d'arborescence des dossiers",
         "toggle_fullscreen": "Basculer en plein écran",
+        "toggle_left_panel": "Afficher ou masquer le panneau gauche",
+        "toggle_right_panel": "Afficher ou masquer le panneau droit",
         "toggle_library_exif": "Basculer la superposition EXIF",
         "toggle_masks": "Basculer le panneau des masques",
         "toggle_metadata": "Basculer le panneau des métadonnées",

src/i18n/locales/it.json

@@ -1562,6 +1562,8 @@
         "toggle_export": "Attiva/Disattiva pannello Esportazione",
         "toggle_folder_tree": "Mostra/Nascondi pannello albero delle cartelle",
         "toggle_fullscreen": "Attiva/Disattiva schermo intero",
+        "toggle_left_panel": "Attiva/disattiva pannello sinistro",
+        "toggle_right_panel": "Attiva/disattiva pannello destro",
         "toggle_library_exif": "Attiva/Disattiva overlay EXIF",
         "toggle_masks": "Attiva/Disattiva pannello Maschere",
         "toggle_metadata": "Attiva/Disattiva pannello Metadati",

src/i18n/locales/ja.json

@@ -1527,6 +1527,8 @@
         "toggle_export": "書き出しパネルの表示/非表示",
         "toggle_folder_tree": "フォルダーツリーパネルの切り替え",
         "toggle_fullscreen": "全画面表示の切り替え",
+        "toggle_left_panel": "左パネルの表示/非表示",
+        "toggle_right_panel": "右パネルの表示/非表示",
         "toggle_library_exif": "EXIF重ね合わせ表示の表示/非表示",
         "toggle_masks": "マスクパネルの表示/非表示",
         "toggle_metadata": "メタデータパネルの表示/非表示",