From 2f74448c8e3e1cc832833238009f2eb3fd79b83a Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 13 Mar 2025 20:06:22 -0600
Subject: [PATCH] add subtle shadow to cards

---
 .../ui/inputs/AppCodeEditor/AppCodeEditor.tsx |  2 +-
 .../MetricViewChart/MetricViewChart.tsx       |  6 ++++-
 .../MetricViewChart/MetricViewChartHeader.tsx |  2 +-
 .../MetricViewFile/MetricViewFile.tsx         |  2 +-
 .../MetricViewResultsController.tsx           |  3 ++-
 .../ChatLayout/ChatLayoutContext/helpers.ts   |  4 ++++
 .../useSelectedFileAndLayout.ts               | 22 ++++++++++++-------
 7 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
index 14a0af898..9e1be60c2 100644
--- a/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
+++ b/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
@@ -160,6 +160,6 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
 AppCodeEditor.displayName = 'AppCodeEditor';
 
 const LoadingContainer = React.memo(() => {
-  return <CircleSpinnerLoaderContainer />;
+  return <CircleSpinnerLoaderContainer className="animate-in fade-in-0 duration-300" />;
 });
 LoadingContainer.displayName = 'LoadingContainer';
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricViewChart.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricViewChart.tsx
index 59dfbfc74..0dbfa9baf 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricViewChart.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricViewChart.tsx
@@ -75,7 +75,11 @@ const MetricViewChartCard: React.FC<{
   }, [isTable, loadingData, errorData]);
 
   return (
-    <div className={cn(cardClass, 'bg-background flex flex-col overflow-hidden rounded border')}>
+    <div
+      className={cn(
+        'bg-background flex flex-col overflow-hidden rounded border shadow',
+        cardClass
+      )}>
       {children}
     </div>
   );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx
index 26f273fde..bb0ffc38f 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricViewChartHeader.tsx
@@ -20,7 +20,7 @@ export const MetricViewChartHeader: React.FC<{
       )}>
       {hasTitleOrDescription ? (
         <>
-          <EditableTitle level={4} className="mb-0" inputClassName="h-auto!" onChange={onSetTitle}>
+          <EditableTitle level={4} className="" inputClassName="h-auto!" onChange={onSetTitle}>
             {title}
           </EditableTitle>
           <div className="flex items-center space-x-1 whitespace-nowrap">
diff --git a/web/src/controllers/MetricController/MetricViewFile/MetricViewFile.tsx b/web/src/controllers/MetricController/MetricViewFile/MetricViewFile.tsx
index 263af715d..ce649613c 100644
--- a/web/src/controllers/MetricController/MetricViewFile/MetricViewFile.tsx
+++ b/web/src/controllers/MetricController/MetricViewFile/MetricViewFile.tsx
@@ -34,7 +34,7 @@ export const MetricViewFile: React.FC<MetricViewProps> = React.memo(({ metricId
   }, [fileProp]);
 
   return (
-    <div className="relative h-full overflow-hidden p-3">
+    <div className="relative h-full overflow-hidden p-5">
       <CodeCard
         code={file}
         language="yaml"
diff --git a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
index d2ebad941..3b055be99 100644
--- a/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
+++ b/web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx
@@ -81,8 +81,9 @@ export const MetricViewResults: React.FC<MetricViewProps> = React.memo(({ metric
   });
 
   return (
-    <div ref={containerRef} className="h-full w-full p-3">
+    <div ref={containerRef} className="swag h-full w-full p-5">
       <AppVerticalCodeSplitter
+        className="shadow"
         ref={appSplitterRef}
         autoSaveId={autoSaveId}
         sql={sql}
diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/helpers.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/helpers.ts
index 52bda05e4..6528a304f 100644
--- a/web/src/layouts/ChatLayout/ChatLayoutContext/helpers.ts
+++ b/web/src/layouts/ChatLayout/ChatLayoutContext/helpers.ts
@@ -80,3 +80,7 @@ export const createFileRoute = ({ assetId, type }: { assetId: string; type: File
   if (!routeBuilder) return '';
   return routeBuilder(assetId);
 };
+
+export const createChatRoute = (chatId: string) => {
+  return createBusterRoute({ route: BusterRoutes.APP_CHAT_ID, chatId });
+};
diff --git a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
index 01b18fa64..64260c721 100644
--- a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
+++ b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
@@ -5,7 +5,11 @@ import type { ChatLayoutView, SelectedFile } from '../../interfaces';
 import { usePathname } from 'next/navigation';
 import { parsePathnameSegments } from './parsePathnameSegments';
 import { useMemoizedFn } from '@/hooks';
-import { createChatAssetRoute, createFileRoute } from '../../ChatLayoutContext/helpers';
+import {
+  createChatAssetRoute,
+  createChatRoute,
+  createFileRoute
+} from '../../ChatLayoutContext/helpers';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
 import { initializeSelectedFile } from './initializeSelectedFile';
 
@@ -41,20 +45,22 @@ export const useSelectedFileAndLayout = ({
   const onSetSelectedFile = useMemoizedFn(async (file: SelectedFile) => {
     const fileType = file.type;
     const fileId = file.id;
-    const route =
-      chatId !== undefined
-        ? createChatAssetRoute({ chatId, assetId: fileId, type: fileType })
-        : createFileRoute({ assetId: fileId, type: fileType });
-
     const isSameAsCurrentFile = selectedFile?.id === fileId;
 
+    const route =
+      chatId !== undefined
+        ? isSameAsCurrentFile
+          ? createChatRoute(chatId)
+          : createChatAssetRoute({ chatId, assetId: fileId, type: fileType })
+        : createFileRoute({ assetId: fileId, type: fileType });
+
     setRenderViewLayoutKey('both');
-    setSelectedFile(file);
+    setSelectedFile(isSameAsCurrentFile ? undefined : file);
     await onChangePage(route);
 
     startTransition(() => {
       onChangePage(route); //this is hack for now...
-      animateOpenSplitter('both');
+      animateOpenSplitter(isSameAsCurrentFile ? 'left' : 'both');
     });
   });