supascan 0.0.0

package/apps/web/src/components/QueryBuilder.tsx

@@ -0,0 +1,174 @@
+import { useState } from "react";
+import { useNotification } from "../hooks/useNotification";
+import { useTableQuery } from "../hooks/useTableQuery";
+import type { SupabaseClient } from "../types";
+import { SmartTable } from "./SmartTable";
+
+interface QueryBuilderProps {
+  client: SupabaseClient | null;
+  schema: string;
+  table: string;
+}
+
+type Operation = "select" | "insert" | "update" | "delete";
+
+export function QueryBuilder({ client, schema, table }: QueryBuilderProps) {
+  const [operation, setOperation] = useState<Operation>("select");
+  const [columns, setColumns] = useState("*");
+  const [limit, setLimit] = useState("10");
+  const [orderBy, setOrderBy] = useState("");
+  const [jsonData, setJsonData] = useState("{}");
+  const [filter, setFilter] = useState("");
+
+  const { state, execute } = useTableQuery(client, schema, table);
+  const notify = useNotification();
+
+  const handleExecute = async () => {
+    try {
+      const parsedLimit = parseInt(limit);
+      const [orderCol, orderDir] = orderBy.trim().split(" ");
+
+      let data: Record<string, unknown> | undefined;
+      if (operation !== "select") {
+        try {
+          data = JSON.parse(jsonData);
+        } catch (e) {
+          notify("Invalid JSON data", "error");
+          return;
+        }
+      }
+
+      await execute({
+        operation,
+        columns: columns.trim() || "*",
+        limit: parsedLimit > 0 ? parsedLimit : undefined,
+        orderBy: orderCol || undefined,
+        orderDir: orderDir === "desc" ? "desc" : "asc",
+        data,
+        filter: filter.trim() || undefined,
+      });
+
+      notify("Query executed successfully", "success");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      notify(message, "error");
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 space-y-3 border-b border-gray-200">
+        <select
+          value={operation}
+          onChange={(e) => setOperation(e.target.value as Operation)}
+          className="w-full p-2 text-sm border border-gray-300 rounded font-mono bg-white focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+        >
+          <option value="select">SELECT</option>
+          <option value="insert">INSERT</option>
+          <option value="update">UPDATE</option>
+          <option value="delete">DELETE</option>
+        </select>
+
+        {operation === "select" && (
+          <>
+            <input
+              type="text"
+              value={columns}
+              onChange={(e) => setColumns(e.target.value)}
+              placeholder="* or column1, column2"
+              className="w-full p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <input
+                type="number"
+                value={limit}
+                onChange={(e) => setLimit(e.target.value)}
+                placeholder="Limit"
+                className="p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+              />
+              <input
+                type="text"
+                value={orderBy}
+                onChange={(e) => setOrderBy(e.target.value)}
+                placeholder="column asc/desc"
+                className="p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+              />
+            </div>
+          </>
+        )}
+
+        {operation !== "select" && (
+          <>
+            <textarea
+              value={jsonData}
+              onChange={(e) => setJsonData(e.target.value)}
+              placeholder={
+                operation === "insert"
+                  ? '{"column": "value"}'
+                  : '{"column": "new value"}'
+              }
+              rows={operation === "update" ? 2 : 3}
+              className="w-full p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+            />
+            {(operation === "update" || operation === "delete") && (
+              <input
+                type="text"
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="id = 1"
+                className="w-full p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+              />
+            )}
+          </>
+        )}
+
+        <button
+          onClick={handleExecute}
+          disabled={state.status === "loading" || !client}
+          className="w-full px-4 py-2 bg-slate-700 text-white rounded text-sm font-mono hover:bg-slate-800 disabled:opacity-50 transition-colors"
+        >
+          {state.status === "loading" ? "Executing..." : "Execute Query"}
+        </button>
+      </div>
+
+      <div className="flex-1 flex flex-col border-t border-gray-200 min-h-0">
+        <div className="px-4 py-2 bg-gray-50 border-b border-gray-200">
+          <h4 className="text-xs font-semibold text-gray-700 font-mono">
+            Results
+          </h4>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {state.status === "loading" && (
+            <div className="p-8 text-center">
+              <div className="inline-flex items-center gap-3 text-slate-600 font-mono text-sm">
+                <div className="animate-spin rounded-full h-4 w-4 border-2 border-slate-300 border-t-slate-600"></div>
+                Executing query...
+              </div>
+            </div>
+          )}
+
+          {state.status === "error" && (
+            <div className="p-4 bg-red-50 border-b border-red-200 text-xs text-red-700 font-mono">
+              Error: {state.error.message}
+            </div>
+          )}
+
+          {state.status === "success" &&
+            (state.data.length > 0 ? (
+              <SmartTable data={state.data} />
+            ) : (
+              <div className="p-6 text-center text-gray-400 text-sm font-mono">
+                No data returned
+              </div>
+            ))}
+
+          {state.status === "idle" && (
+            <div className="p-6 text-center text-gray-400 text-sm font-mono">
+              Query results will appear here...
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/QueryWindow.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useRef, useState } from "react";
+
+interface QueryWindowProps {
+  id: string;
+  title: string;
+  onClose: () => void;
+  onFocus: () => void;
+  zIndex: number;
+  initialPosition?: { x: number; y: number };
+  children: React.ReactNode;
+}
+
+export function QueryWindow({
+  id,
+  title,
+  onClose,
+  onFocus,
+  zIndex,
+  initialPosition = { x: 100, y: 100 },
+  children,
+}: QueryWindowProps) {
+  const [position, setPosition] = useState(initialPosition);
+  const [size, setSize] = useState({ width: 800, height: 600 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const windowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        setPosition({
+          x: Math.max(0, e.clientX - dragStart.x),
+          y: Math.max(0, e.clientY - dragStart.y),
+        });
+      } else if (isResizing) {
+        const newWidth = Math.max(400, e.clientX - position.x);
+        const newHeight = Math.max(300, e.clientY - position.y);
+        setSize({ width: newWidth, height: newHeight });
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      setIsResizing(false);
+    };
+
+    if (isDragging || isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, isResizing, dragStart, position.x, position.y]);
+
+  const handleHeaderMouseDown = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest(".window-controls")) return;
+    onFocus();
+    setIsDragging(true);
+    setDragStart({
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    });
+  };
+
+  const handleResizeMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onFocus();
+    setIsResizing(true);
+  };
+
+  const handleWindowClick = () => {
+    onFocus();
+  };
+
+  return (
+    <div
+      ref={windowRef}
+      className="fixed bg-white rounded-lg shadow-2xl border border-gray-300 flex flex-col overflow-hidden"
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        zIndex: 1000 + zIndex,
+      }}
+      onClick={handleWindowClick}
+    >
+      <div
+        className="bg-gradient-to-r from-slate-700 to-slate-600 px-4 py-3 flex items-center justify-between cursor-move select-none"
+        onMouseDown={handleHeaderMouseDown}
+      >
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1.5 window-controls">
+            <button
+              onClick={onClose}
+              className="w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors"
+              title="Close"
+            />
+            <button
+              className="w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors opacity-50 cursor-default"
+              title="Minimize"
+            />
+            <button
+              className="w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors opacity-50 cursor-default"
+              title="Maximize"
+            />
+          </div>
+          <h3 className="text-sm font-semibold text-white font-mono ml-2 truncate">
+            {title}
+          </h3>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto">{children}</div>
+
+      <div
+        className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize"
+        onMouseDown={handleResizeMouseDown}
+      >
+        <svg
+          className="w-4 h-4 text-gray-400"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path d="M16 16V14l-2-2v4h4zm0-6V8l-4-4v4l4 4zm0-6V2l-6-2v4l6 2z" />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/RPCExecutor.tsx

@@ -0,0 +1,176 @@
+import type { RPCFunction } from "@supascan/core";
+import { useState } from "react";
+import { useNotification } from "../hooks/useNotification";
+import { useRPC } from "../hooks/useRPC";
+import type { SupabaseClient } from "../types";
+import { SmartTable } from "./SmartTable";
+
+interface RPCExecutorProps {
+  client: SupabaseClient | null;
+  schema: string;
+  rpc: RPCFunction;
+}
+
+function parseParamValue(value: string, type: string): unknown {
+  if (value === "") return undefined;
+  if (type === "number" || type === "integer") return parseFloat(value);
+  if (type === "boolean") return value === "true";
+  if (type === "json" || type === "jsonb") return JSON.parse(value);
+  return value;
+}
+
+export function RPCExecutor({ client, schema, rpc }: RPCExecutorProps) {
+  const [params, setParams] = useState<Record<string, string>>({});
+  const { state, execute } = useRPC(client, schema, rpc.name);
+  const notify = useNotification();
+
+  const handleParamChange = (name: string, value: string) => {
+    if (value === "") {
+      const { [name]: _, ...rest } = params;
+      setParams(rest);
+    } else {
+      setParams({ ...params, [name]: value });
+    }
+  };
+
+  const handleExecute = async () => {
+    try {
+      const parsedParams = Object.entries(params).reduce(
+        (acc, [key, value]) => {
+          const param = rpc.parameters.find((p) => p.name === key);
+          if (param) {
+            try {
+              acc[key] = parseParamValue(value, param.type);
+            } catch (e) {
+              notify(`Invalid value for parameter "${key}"`, "error");
+              throw e;
+            }
+          }
+          return acc;
+        },
+        {} as Record<string, unknown>,
+      );
+
+      await execute(parsedParams);
+      notify(`RPC ${rpc.name} executed successfully`, "success");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      notify(message, "error");
+    }
+  };
+
+  const result = state.status === "success" ? state.data : null;
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 space-y-3 border-b border-gray-200">
+        {rpc.parameters.length > 0 && (
+          <div className="space-y-2">
+            {rpc.parameters.map((param) => (
+              <div key={param.name}>
+                <label className="block text-xs font-medium text-gray-600 mb-1 font-mono">
+                  {param.name} ({param.type})
+                  {param.required && <span className="text-red-600"> *</span>}
+                </label>
+                {param.type === "boolean" ? (
+                  <select
+                    value={params[param.name] || ""}
+                    onChange={(e) =>
+                      handleParamChange(param.name, e.target.value)
+                    }
+                    className="w-full p-2 text-sm border border-gray-300 rounded font-mono bg-white focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+                  >
+                    <option value="">Select...</option>
+                    <option value="true">true</option>
+                    <option value="false">false</option>
+                  </select>
+                ) : param.type === "json" || param.type === "jsonb" ? (
+                  <textarea
+                    value={params[param.name] || ""}
+                    onChange={(e) =>
+                      handleParamChange(param.name, e.target.value)
+                    }
+                    placeholder="{}"
+                    rows={2}
+                    className="w-full p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+                  />
+                ) : (
+                  <input
+                    type={
+                      param.type === "number" || param.type === "integer"
+                        ? "number"
+                        : "text"
+                    }
+                    value={params[param.name] || ""}
+                    onChange={(e) =>
+                      handleParamChange(param.name, e.target.value)
+                    }
+                    placeholder={param.description || `Enter ${param.type}`}
+                    className="w-full p-2 text-sm border border-gray-300 rounded font-mono focus:ring-2 focus:ring-supabase-green focus:border-supabase-green"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <button
+          onClick={handleExecute}
+          disabled={state.status === "loading" || !client}
+          className="w-full px-4 py-2 bg-slate-700 text-white rounded text-sm font-mono hover:bg-slate-800 transition-colors disabled:opacity-50"
+        >
+          {state.status === "loading" ? "Executing..." : "Execute RPC"}
+        </button>
+      </div>
+
+      <div className="flex-1 flex flex-col border-t border-gray-200 min-h-0">
+        <div className="px-4 py-2 bg-gray-50 border-b border-gray-200">
+          <h4 className="text-xs font-semibold text-gray-700 font-mono">
+            Results
+          </h4>
+        </div>
+        <div className="flex-1 overflow-auto">
+          {state.status === "loading" && (
+            <div className="p-8 text-center">
+              <div className="inline-flex items-center gap-3 text-slate-600 font-mono text-sm">
+                <div className="animate-spin rounded-full h-4 w-4 border-2 border-slate-300 border-t-slate-600"></div>
+                Executing RPC...
+              </div>
+            </div>
+          )}
+
+          {state.status === "error" && (
+            <div className="p-4 bg-red-50 border-b border-red-200 text-xs text-red-700 font-mono">
+              Error: {state.error.message}
+            </div>
+          )}
+
+          {state.status === "success" &&
+            (Array.isArray(result) && result.length > 0 ? (
+              <SmartTable data={result as Record<string, unknown>[]} />
+            ) : Array.isArray(result) && result.length === 0 ? (
+              <div className="p-6 text-center text-gray-400 text-sm font-mono">
+                No data returned
+              </div>
+            ) : typeof result === "object" && result !== null ? (
+              <div className="p-4">
+                <pre className="text-xs font-mono whitespace-pre-wrap">
+                  {JSON.stringify(result, null, 2)}
+                </pre>
+              </div>
+            ) : (
+              <div className="p-4">
+                <div className="text-xs font-mono">{String(result)}</div>
+              </div>
+            ))}
+
+          {state.status === "idle" && (
+            <div className="p-6 text-center text-gray-400 text-sm font-mono">
+              RPC results will appear here...
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}