Update files

packages/app/src/stores/panel-store.ts

@@ -30,11 +30,15 @@ interface DesktopSidebarState {
 export type ExplorerTab = "changes" | "files";
 export type SortOption = "name" | "modified" | "size";
 
-export const DEFAULT_EXPLORER_SIDEBAR_WIDTH = 400;
+export const DEFAULT_EXPLORER_SIDEBAR_WIDTH = Platform.OS === "web" ? 520 : 400;
 export const MIN_EXPLORER_SIDEBAR_WIDTH = 280;
 // Upper bound is intentionally generous; desktop resizing enforces a min-chat-width constraint.
 export const MAX_EXPLORER_SIDEBAR_WIDTH = 2000;
 
+export const DEFAULT_EXPLORER_FILES_SPLIT_RATIO = 0.38;
+export const MIN_EXPLORER_FILES_SPLIT_RATIO = 0.2;
+export const MAX_EXPLORER_FILES_SPLIT_RATIO = 0.8;
+
 interface PanelState {
   // Mobile: which panel is currently shown
   mobileView: MobilePanelView;
@@ -46,6 +50,7 @@ interface PanelState {
   explorerTab: ExplorerTab;
   explorerWidth: number;
   explorerSortOption: SortOption;
+  explorerFilesSplitRatio: number;
 
   // Actions
   openAgentList: () => void;
@@ -58,10 +63,19 @@ interface PanelState {
   setExplorerTab: (tab: ExplorerTab) => void;
   setExplorerWidth: (width: number) => void;
   setExplorerSortOption: (option: SortOption) => void;
+  setExplorerFilesSplitRatio: (ratio: number) => void;
+}
+
+function clampNumber(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
 }
 
 function clampWidth(width: number): number {
-  return Math.max(MIN_EXPLORER_SIDEBAR_WIDTH, Math.min(MAX_EXPLORER_SIDEBAR_WIDTH, width));
+  return clampNumber(width, MIN_EXPLORER_SIDEBAR_WIDTH, MAX_EXPLORER_SIDEBAR_WIDTH);
+}
+
+function clampExplorerFilesSplitRatio(ratio: number): number {
+  return clampNumber(ratio, MIN_EXPLORER_FILES_SPLIT_RATIO, MAX_EXPLORER_FILES_SPLIT_RATIO);
 }
 
 const DEFAULT_DESKTOP_OPEN = Platform.OS === "web";
@@ -82,6 +96,7 @@ export const usePanelStore = create<PanelState>()(
       explorerTab: "changes",
       explorerWidth: DEFAULT_EXPLORER_SIDEBAR_WIDTH,
       explorerSortOption: "name",
+      explorerFilesSplitRatio: DEFAULT_EXPLORER_FILES_SPLIT_RATIO,
 
       openAgentList: () =>
         set((state) => ({
@@ -137,16 +152,39 @@ export const usePanelStore = create<PanelState>()(
       setExplorerTab: (tab) => set({ explorerTab: tab }),
       setExplorerWidth: (width) => set({ explorerWidth: clampWidth(width) }),
       setExplorerSortOption: (option) => set({ explorerSortOption: option }),
+      setExplorerFilesSplitRatio: (ratio) =>
+        set({ explorerFilesSplitRatio: clampExplorerFilesSplitRatio(ratio) }),
     }),
     {
       name: "panel-state",
+      version: 2,
       storage: createJSONStorage(() => AsyncStorage),
+      migrate: (persistedState, version) => {
+        const state = persistedState as Partial<PanelState> & Record<string, unknown>;
+
+        if (version < 2) {
+          if (
+            Platform.OS === "web" &&
+            typeof state.explorerWidth === "number" &&
+            state.explorerWidth === 400
+          ) {
+            state.explorerWidth = DEFAULT_EXPLORER_SIDEBAR_WIDTH;
+          }
+
+          if (typeof state.explorerFilesSplitRatio !== "number") {
+            state.explorerFilesSplitRatio = DEFAULT_EXPLORER_FILES_SPLIT_RATIO;
+          }
+        }
+
+        return state as PanelState;
+      },
       partialize: (state) => ({
         mobileView: state.mobileView,
         desktop: state.desktop,
         explorerTab: state.explorerTab,
         explorerWidth: state.explorerWidth,
         explorerSortOption: state.explorerSortOption,
+        explorerFilesSplitRatio: state.explorerFilesSplitRatio,
       }),
     }
   )
@@ -177,9 +215,11 @@ export function usePanelState(isMobile: boolean) {
       explorerTab: store.explorerTab,
       explorerWidth: store.explorerWidth,
       explorerSortOption: store.explorerSortOption,
+      explorerFilesSplitRatio: store.explorerFilesSplitRatio,
       setExplorerTab: store.setExplorerTab,
       setExplorerWidth: store.setExplorerWidth,
       setExplorerSortOption: store.setExplorerSortOption,
+      setExplorerFilesSplitRatio: store.setExplorerFilesSplitRatio,
     };
   }
 
@@ -203,8 +243,10 @@ export function usePanelState(isMobile: boolean) {
     explorerTab: store.explorerTab,
     explorerWidth: store.explorerWidth,
     explorerSortOption: store.explorerSortOption,
+    explorerFilesSplitRatio: store.explorerFilesSplitRatio,
     setExplorerTab: store.setExplorerTab,
     setExplorerWidth: store.setExplorerWidth,
     setExplorerSortOption: store.setExplorerSortOption,
+    setExplorerFilesSplitRatio: store.setExplorerFilesSplitRatio,
   };
 }