From e6655554d07c223c7a55476c89e1e5f890eceffe Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Feb 2025 11:24:32 -0700
Subject: [PATCH] close secondary when open primary

---
 .../MetricController/MetricController.tsx          |  6 ++++--
 .../MetricController/useMetricControllerLayout.ts  |  5 ++---
 .../ChatLayoutContext/ChatLayoutContext.tsx        |  1 +
 .../useChatFileLayout/useChatFileLayout.ts         | 14 +++++++++++++-
 .../components/layout/AppSplitter/AppSplitter.tsx  |  6 ++++--
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/src/app/app/_controllers/MetricController/MetricController.tsx b/web/src/app/app/_controllers/MetricController/MetricController.tsx
index cf6fbc68c..f0bafc0ef 100644
--- a/web/src/app/app/_controllers/MetricController/MetricController.tsx
+++ b/web/src/app/app/_controllers/MetricController/MetricController.tsx
@@ -5,6 +5,8 @@ import { useChatLayoutContextSelector } from '../../_layouts/ChatLayout';
 import { AppSplitter, AppSplitterRef } from '@/components';
 import { useMetricControllerLayout } from './useMetricControllerLayout';
 
+const defaultLayout = ['auto', '0px'];
+
 export const MetricController: React.FC<{
   metricId: string;
 }> = React.memo(({ metricId }) => {
@@ -14,7 +16,7 @@ export const MetricController: React.FC<{
     (x) => x.selectedFileViewSecondary
   );
 
-  const { renderSecondary, isOpenSecondary } = useMetricControllerLayout({
+  const { renderSecondary } = useMetricControllerLayout({
     selectedFileViewSecondary,
     appSplitterRef
   });
@@ -26,7 +28,7 @@ export const MetricController: React.FC<{
       rightChildren={<div className="min-w-[230px]">right swag</div>}
       rightHidden={!renderSecondary}
       autoSaveId="metric-controller"
-      defaultLayout={['auto', '0px']}
+      defaultLayout={defaultLayout}
       preserveSide={'right'}
       rightPanelMinSize={250}
       rightPanelMaxSize={360}
diff --git a/web/src/app/app/_controllers/MetricController/useMetricControllerLayout.ts b/web/src/app/app/_controllers/MetricController/useMetricControllerLayout.ts
index 9830252bb..b93b0432e 100644
--- a/web/src/app/app/_controllers/MetricController/useMetricControllerLayout.ts
+++ b/web/src/app/app/_controllers/MetricController/useMetricControllerLayout.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { useMemoizedFn, useUpdateLayoutEffect } from 'ahooks';
 import { type AppSplitterRef } from '@/components/layout';
 
@@ -29,7 +29,6 @@ export const useMetricControllerLayout = ({
   }, [isOpenSecondary]);
 
   return {
-    renderSecondary,
-    isOpenSecondary
+    renderSecondary
   };
 };
diff --git a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
index e94f61c12..75ba48aa6 100644
--- a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
+++ b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
@@ -41,6 +41,7 @@ export const useChatLayout = ({
         animateWidth(DEFAULT_CHAT_OPTION, 'left');
         setIsPureChat(false);
         setIsPureFile(false);
+        fileLayoutContext?.closeSecondaryView();
       }
     }
   });
diff --git a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
index 0aa459778..e4a902484 100644
--- a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
+++ b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
@@ -2,6 +2,7 @@ import { FileType } from '@/api/asset_interfaces';
 import { useMemo, useState } from 'react';
 import { FileConfig, FileView, FileViewConfig, FileViewSecondary } from './interfaces';
 import { useMemoizedFn } from 'ahooks';
+import { produce } from 'immer';
 
 export const useChatFileLayout = ({
   selectedFileId,
@@ -67,11 +68,22 @@ export const useChatFileLayout = ({
     return selectedFileViewConfig?.[selectedFileView]?.secondaryView ?? null;
   }, [selectedFileViewConfig, selectedFileId, selectedFileView]);
 
+  const closeSecondaryView = useMemoizedFn(() => {
+    if (!selectedFileId || !selectedFileViewConfig || !selectedFileView) return;
+    setFileViews(
+      produce((draft) => {
+        if (!draft[selectedFileId]?.fileViewConfig?.[selectedFileView]) return;
+        draft[selectedFileId].fileViewConfig[selectedFileView].secondaryView = null;
+      })
+    );
+  });
+
   return {
     selectedFileType,
     selectedFileView,
     selectedFileViewSecondary,
-    onSetFileView
+    onSetFileView,
+    closeSecondaryView
   };
 };
 
diff --git a/web/src/components/layout/AppSplitter/AppSplitter.tsx b/web/src/components/layout/AppSplitter/AppSplitter.tsx
index eb89a93c6..8c2b39775 100644
--- a/web/src/components/layout/AppSplitter/AppSplitter.tsx
+++ b/web/src/components/layout/AppSplitter/AppSplitter.tsx
@@ -26,6 +26,7 @@ export interface AppSplitterRef {
   setSplitSizes: (newSizes: (number | string)[]) => void;
   animateWidth: (width: string, side: 'left' | 'right', duration?: number) => Promise<void>;
   isSideClosed: (side: 'left' | 'right') => boolean;
+  sizes: (number | string)[];
 }
 
 export const AppSplitter = React.memo(
@@ -228,9 +229,10 @@ export const AppSplitter = React.memo(
         return () => ({
           setSplitSizes,
           animateWidth,
-          isSideClosed
+          isSideClosed,
+          sizes: _sizes
         });
-      }, [setSplitSizes, animateWidth, isSideClosed]);
+      }, [setSplitSizes, animateWidth, isSideClosed, _sizes]);
 
       // Add useImperativeHandle to expose the function
       useImperativeHandle(ref, imperativeHandleMethods);