From ac6c32a9a59108e9136962cdde18c9fcb57d8dd7 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 12 Mar 2025 13:06:09 -0600
Subject: [PATCH] selected file layout update

---
 web/src/components/ui/segmented/AppSegmented.tsx    | 13 ++-----------
 .../ChatLayoutContext/ChatLayoutContext.tsx         | 10 ++++++++--
 .../useSelectedFileAndLayout.ts                     |  2 ++
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/web/src/components/ui/segmented/AppSegmented.tsx b/web/src/components/ui/segmented/AppSegmented.tsx
index d44ce6edb..06df55ae1 100644
--- a/web/src/components/ui/segmented/AppSegmented.tsx
+++ b/web/src/components/ui/segmented/AppSegmented.tsx
@@ -110,7 +110,7 @@ export const AppSegmented: AppSegmentedComponent = React.memo(
     block = false
   }: AppSegmentedProps<T>) => {
     const rootRef = React.useRef<HTMLDivElement>(null);
-    const elementSize = useSize(rootRef);
+    const elementSize = useSize(rootRef, 25);
     const tabRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
     const [selectedValue, setSelectedValue] = useState(value || options[0]?.value);
     const [gliderStyle, setGliderStyle] = useState({
@@ -146,19 +146,10 @@ export const AppSegmented: AppSegmentedComponent = React.memo(
       }
     });
 
-    const { run: throttledUpdateGliderStyle } = useThrottleFn(updateGliderStyle, {
-      wait: 15,
-      leading: true
-    });
-
     // Use useLayoutEffect to measure before paint
     useLayoutEffect(() => {
       updateGliderStyle();
-    }, [selectedValue]);
-
-    useEffect(() => {
-      throttledUpdateGliderStyle();
-    }, [elementSize?.width]);
+    }, [selectedValue, elementSize?.width]);
 
     useEffect(() => {
       if (value !== undefined && value !== selectedValue) {
diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
index 0e71830a0..1e9be56a0 100644
--- a/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
+++ b/web/src/layouts/ChatLayout/ChatLayoutContext/ChatLayoutContext.tsx
@@ -15,13 +15,19 @@ interface UseChatSplitterProps {
 export const useChatLayout = ({ appSplitterRef }: UseChatSplitterProps) => {
   const animateOpenSplitter = useMemoizedFn((side: 'left' | 'right' | 'both') => {
     if (appSplitterRef.current) {
-      const { animateWidth } = appSplitterRef.current;
+      const { animateWidth, sizes } = appSplitterRef.current;
+      const leftSize = sizes[0] ?? 0;
+      const rightSize = sizes[1] ?? 0;
+
       if (side === 'left') {
         animateWidth('100%', 'left');
       } else if (side === 'right') {
         animateWidth('100%', 'right');
       } else if (side === 'both') {
-        //&& (isSideClosed('right') || isSideClosed('left'))
+        const shouldAnimate = Number(leftSize) < 200 || Number(rightSize) < 340;
+
+        if (!shouldAnimate) return;
+
         animateWidth(DEFAULT_CHAT_OPTION_SIDEBAR_SIZE, 'left');
         setRenderViewLayoutKey('both');
         fileLayoutContext?.closeSecondaryView();
diff --git a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
index a126b4458..54dacda1b 100644
--- a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
+++ b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
@@ -48,6 +48,8 @@ export const useSelectedFileAndLayout = ({
         ? createChatAssetRoute({ chatId, assetId: fileId, type: fileType })
         : createFileRoute({ assetId: fileId, type: fileType });
 
+    const isSameAsCurrentFile = selectedFile?.id === fileId;
+
     setRenderViewLayoutKey('both');
     setSelectedFile(file);
     await onChangePage(route);