Add a splitter

apps/web/src/app/test/chart-playground/page.tsx

@@ -16,6 +16,7 @@ import type { RunSQLResponse } from '@/api/asset_interfaces';
 import { useMemoizedFn } from '@/hooks';
 import { Button } from '@/components/ui/buttons';
 import { Input } from '@/components/ui/inputs';
+import { AppSplitter } from '@/components/ui/layouts/AppSplitter';
 
 type YamlifiedConfig = {
   sql: string;
@@ -108,8 +109,8 @@ export default function ChartPlayground() {
     }
   );
 
-  return (
-    <div className="grid h-screen grid-cols-[2fr_3fr] gap-4 p-4">
+  // Define the left panel content (code editor and controls)
+  const leftPanelContent = (
     <div className="bg-background flex h-full w-full flex-col space-y-4 overflow-hidden rounded-lg border p-4">
       <div className="h-full w-full overflow-hidden">
         <AppCodeEditor value={config} onChange={setConfig} />
@@ -127,8 +128,10 @@ export default function ChartPlayground() {
         </Button>
       </div>
     </div>
+  );
 
-      {/* Second column - 40% width */}
+  // Define the right panel content (chart preview)
+  const rightPanelContent = (
     <div className="bg-background flex h-full flex-col overflow-hidden rounded-lg border shadow-sm">
       {/* Header */}
       <div className="bg-muted/30 border-b px-6 py-4">
@@ -145,7 +148,7 @@ export default function ChartPlayground() {
               <h4 className="text-sm font-semibold text-red-800">Chart Configuration Error</h4>
             </div>
             <pre className="overflow-x-auto rounded bg-red-100 p-3 text-xs whitespace-pre-wrap text-red-700">
-                {JSON.stringify(chartConfigError as Object, null, 2)}
+              {JSON.stringify(chartConfigError || {}, null, 2)}
             </pre>
           </div>
         )}
@@ -157,7 +160,7 @@ export default function ChartPlayground() {
               <h4 className="text-sm font-semibold text-red-800">SQL Execution Error</h4>
             </div>
             <pre className="overflow-x-auto rounded bg-red-100 p-3 text-xs whitespace-pre-wrap text-red-700">
-                {JSON.stringify(runSQLError as Object, null, 2)}
+              {JSON.stringify(runSQLError || {}, null, 2)}
             </pre>
           </div>
         )}
@@ -235,6 +238,23 @@ export default function ChartPlayground() {
         )}
       </div>
     </div>
+  );
+
+  return (
+    <div className="h-screen w-screen p-4">
+      <AppSplitter
+        autoSaveId="chart-playground"
+        splitterClassName="mx-2"
+        defaultLayout={DEFAULT_LAYOUT}
+        className="h-full w-full"
+        leftPanelMinSize="200px"
+        rightPanelMinSize="200px"
+        leftChildren={leftPanelContent}
+        rightChildren={rightPanelContent}
+        preserveSide="left"
+      />
     </div>
   );
 }
+
+const DEFAULT_LAYOUT = ['40%', 'auto'];