add subtle shadow to cards

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';

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>
   );

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">

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"

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}

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 });
+};

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');
     });
   });