main UI components become resizable

cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx

@@ -7,7 +7,7 @@ import {Badge} from "@/components/ui/badge.tsx";
 
 export function Docs() {
   return (
-   <Card className={"w-full min-w-[20rem] max-lg:hidden"}>
+   <Card className={"w-full max-h-full min-w-[20rem] overflow-y-scroll"}>
      <CardHeader>
        <CardTitle className={"flex flex-row gap-2 items-center"}>
          <span>Information about SQL to LogsQL</span>
@@ -112,4 +112,4 @@ export function Docs() {
      </CardContent>
    </Card>
   )
-}
+}

cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx

@@ -16,13 +16,15 @@ import {COMPLETIONS} from "@/components/sql-editor/complections.ts";
 import {CircleXIcon, CircleCheckBigIcon, PlayIcon, ListFilterIcon} from "lucide-react"
 import {Spinner} from "@/components/ui/spinner.tsx";
 import {Badge} from "@/components/ui/badge.tsx";
+import {cn} from "@/lib/utils";
 
 export interface SqlEditorProps {
   readonly onRun?: (sql: string) => void;
   readonly isLoading?: boolean;
   readonly error?: string;
   readonly success?: string;
-  readonly limit?: number
+  readonly limit?: number;
+  readonly className?: string;
 }
 
 export function SQLEditor({
@@ -31,6 +33,7 @@ export function SQLEditor({
   error,
   success,
   limit,
+  className,
 }: SqlEditorProps) {
   const [value, setValue] = useState<string>(DEFAULT_EXAMPLE_ID);
   const [sql, setSql] = useState("");
@@ -51,7 +54,7 @@ export function SQLEditor({
   }, [value]);
 
   return (
-    <Card>
+    <Card className={cn("w-full h-full", className)}>
       <CardHeader className={"max-sm:flex max-sm:flex-col max-sm:gap-4 max-sm:px-4"}>
         <CardTitle className={"sm:py-3"}>SQL</CardTitle>
         <CardAction className={"flex max-sm:flex-col gap-2 w-full"}>
@@ -77,14 +80,13 @@ export function SQLEditor({
           </Button>
         </CardAction>
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1 min-h-0">
         <Editor
-          className={
-            isLoading
-              ? "pointer-events-none opacity-50 select-none grayscale-50"
-              : ""
-          }
-          height={200}
+          className={cn(
+            "h-full",
+            isLoading ? "pointer-events-none opacity-50 select-none grayscale-50" : ""
+          )}
+          height="100%"
           defaultLanguage="sql"
           theme="vs-light"
           value={sql}

cmd/sql-to-logsql/web/ui/src/components/ui/resizable.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

cmd/sql-to-logsql/web/ui/src/pages/main/Main.tsx

@@ -4,6 +4,7 @@ import {useCallback, useEffect, useState} from "react";
 import { QueryResults } from "@/components/query-results";
 import {toast} from "sonner";
 import {Docs} from "@/components/docs";
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "@/components/ui/resizable";
 
 const formatExecutionTime = (ms: number): string => {
   if (!Number.isFinite(ms) || ms < 0) {
@@ -87,30 +88,52 @@ export function Main() {
   }, [bearerToken, endpointUrl, endpointReadOnly, endpointEnabled]);
 
   return (
-    <main className={"p-4 w-full flex flex-col gap-4"}>
-      <div className={"w-full flex gap-4"}>
-        <div className={"w-full flex flex-col gap-4  min-w-[20rem] max-w-[64rem]"}>
-          <LogsEndpoint
-            endpointUrl={endpointUrl}
-            onUrlChange={setEndpointUrl}
-            bearerToken={bearerToken}
-            onTokenChange={setBearerToken}
-            isLoading={loading}
-            endpointReadOnly={endpointReadOnly}
-            endpointEnabled={endpointEnabled}
-            onEndpointEnabledChange={setEndpointEnabled}
-          />
-          <SQLEditor
-            onRun={handleExecute}
-            isLoading={loading}
-            error={error}
-            success={success}
-            limit={limit}
-          />
-        </div>
-        <Docs />
-      </div>
-      <QueryResults query={query} data={results} isLoading={loading} endpointEnabled={endpointEnabled} />
+    <main className={"p-4 w-full min-h-screen flex flex-col gap-4"}>
+      <ResizablePanelGroup direction="vertical" className="flex-1 min-h-0">
+        <ResizablePanel defaultSize={60} minSize={40}>
+          <ResizablePanelGroup direction="horizontal" className="h-full min-h-0">
+            <ResizablePanel defaultSize={60} minSize={45} className="flex flex-col min-h-0">
+              <div className="flex h-full w-full flex-col gap-4 min-h-0 min-w-[20rem]">
+                <div className="shrink-0">
+                  <LogsEndpoint
+                    endpointUrl={endpointUrl}
+                    onUrlChange={setEndpointUrl}
+                    bearerToken={bearerToken}
+                    onTokenChange={setBearerToken}
+                    isLoading={loading}
+                    endpointReadOnly={endpointReadOnly}
+                    endpointEnabled={endpointEnabled}
+                    onEndpointEnabledChange={setEndpointEnabled}
+                  />
+                </div>
+                <SQLEditor
+                  onRun={handleExecute}
+                  isLoading={loading}
+                  error={error}
+                  success={success}
+                  limit={limit}
+                  className="flex-1 min-h-0"
+                />
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle className={"m-2"} />
+            <ResizablePanel defaultSize={30} minSize={20} className="flex">
+              <Docs />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+        <ResizableHandle withHandle className={"m-2"} />
+        <ResizablePanel defaultSize={40} minSize={10} className="min-h-0">
+          <div className="h-full overflow-auto">
+            <QueryResults
+              query={query}
+              data={results}
+              isLoading={loading}
+              endpointEnabled={endpointEnabled}
+            />
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </main>
   );
 }