feat: add splitter and minimize/maximize for query editor

ui/src/components/editor.tsx

@@ -27,9 +27,14 @@ loader.config({ monaco });
 type Props = {
   value: string;
   onChange?: (value: string) => void;
+  height?: number;
 };
 
-export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
+export const Editor: FunctionComponent<Props> = ({
+  value,
+  onChange,
+  height = 200,
+}) => {
   const currentTheme = useTheme();
   const monacoInstance = useMonaco();
   const providerRef = useRef<IDisposable | null>(null);
@@ -141,7 +146,7 @@ export const Editor: FunctionComponent<Props> = ({ value, onChange }) => {
   return (
     <Card className="p-2">
       <EditorComponent
-        height="200px"
+        height={height}
         value={value}
         onChange={(val) => onChange?.(val ?? "")}
         language={ID_LANGUAGE_SQL}

ui/src/routes/query.tsx

@@ -1,11 +1,11 @@
 import "react-data-grid/lib/styles.css";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { z } from "zod";
 import { DataGrid } from "react-data-grid";
 import { useQuery } from "@tanstack/react-query";
 import { useDebounce } from "@uidotdev/usehooks";
-import { Database, Play, ShieldX, Terminal } from "lucide-react";
+import { Database, Maximize2, Play, ShieldX, Terminal } from "lucide-react";
 import { createFileRoute } from "@tanstack/react-router";
 
 import { cn } from "@/lib/utils";
@@ -24,6 +24,10 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTheme } from "@/provider/theme.provider";
 
+const DEFAULT_EDITOR_HEIGHT = 200;
+const MIN_EDITOR_HEIGHT = 120;
+const MAX_EDITOR_HEIGHT = Math.min(600, Math.floor(window.innerHeight * 0.6));
+
 export const Route = createFileRoute("/query")({
   component: Query,
   validateSearch: z.object({ sql: z.string().optional() }),
@@ -37,6 +41,15 @@ function Query() {
   const code = useDebounce(codeState, 100);
 
   const [autoExecute, setAutoExecute] = useState(true);
+  const [editorHeight, setEditorHeight] = useState(DEFAULT_EDITOR_HEIGHT);
+  const [editorMinimized, setEditorMinimized] = useState(false);
+
+  const isResizingRef = useRef(false);
+  const resizeStartYRef = useRef(0);
+  const resizeStartHeightRef = useRef(DEFAULT_EDITOR_HEIGHT);
+
+  const clampEditorHeight = (height: number) =>
+    Math.min(Math.max(height, MIN_EDITOR_HEIGHT), MAX_EDITOR_HEIGHT);
 
   const { data, error, refetch } = useQuery({
     queryKey: ["query", code],
@@ -45,6 +58,39 @@ function Query() {
     retry: false,
   });
 
+  const handleDividerPointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    isResizingRef.current = true;
+    resizeStartYRef.current = event.clientY;
+    resizeStartHeightRef.current = editorHeight;
+  };
+
+  const handleDividerPointerMove = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    if (!isResizingRef.current) return;
+
+    const nextHeight =
+      resizeStartHeightRef.current + (event.clientY - resizeStartYRef.current);
+
+    setEditorHeight(clampEditorHeight(nextHeight));
+  };
+
+  const handleDividerPointerUp = () => {
+    isResizingRef.current = false;
+  };
+
+  const handleDividerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+
+    event.preventDefault();
+    const delta = event.key === "ArrowDown" ? 10 : -10;
+    setEditorHeight((height) => clampEditorHeight(height + delta));
+  };
+
   const grid = !data ? (
     !autoExecute && code && error ? (
       <Card>
@@ -102,10 +148,39 @@ function Query() {
   return (
     <div className="grid gap-8">
       <div className="grid gap-4 grid-cols-1">
-        <Editor
-          value={code}
-          onChange={(val) => setCodeState({ type: "SET_SQL", data: val })}
-        />
+        {editorMinimized ? (
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-fit"
+            onClick={() => setEditorMinimized(false)}
+          >
+            <Maximize2 className="h-4 w-4" />
+            Editor
+          </Button>
+        ) : (
+          <Editor
+            value={code}
+            onChange={(val) => setCodeState({ type: "SET_SQL", data: val })}
+            height={editorHeight}
+          />
+        )}
+
+        {!editorMinimized && (
+          <div
+            role="separator"
+            aria-orientation="horizontal"
+            aria-label="Resize query editor"
+            tabIndex={0}
+            onPointerDown={handleDividerPointerDown}
+            onPointerMove={handleDividerPointerMove}
+            onPointerUp={handleDividerPointerUp}
+            onKeyDown={handleDividerKeyDown}
+            className="relative z-10 flex h-3 cursor-ns-resize touch-none select-none items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          >
+            <div className="h-0.5 w-8 rounded bg-border transition-colors hover:bg-primary" />
+          </div>
+        )}
 
         <div className="flex gap-2 justify-between">
           <div className="flex gap-2">