feat(explorer): run query shortcut (#3443)

Author: karooolis

.changeset/perfect-steaks-fold.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+SQL queries can be executed using the Cmd/Ctrl + Enter shortcut.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx

@@ -38,10 +38,10 @@ export function Explorer() {
   }, [chainId, setQuery, selectedTableId, table, worldAddress, prevSelectedTableId, query, indexer.type]);
 
   return (
-    <>
-      {indexer.type !== "sqlite" && <SQLEditor table={table} />}
+    <div className="space-y-4">
       <TableSelector tables={tables} />
+      {indexer.type !== "sqlite" && <SQLEditor table={table} />}
       <TablesViewer table={table} query={query} />
-    </>
+    </div>
   );
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/ExportButton.tsx

@@ -14,8 +14,7 @@ export function ExportButton({ tableData, isLoading }: { tableData?: TData; isLo
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" disabled={!tableData || isLoading}>
-          <DownloadIcon className="mr-2 h-4 w-4" />
-          Export
+          <DownloadIcon className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { PlayIcon } from "lucide-react";
-import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+import { CommandIcon, CornerDownLeft } from "lucide-react";
+import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { useQueryState } from "nuqs";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -58,40 +58,64 @@ export function SQLEditor({ table }: Props) {
 
   return (
     <Form {...form}>
-      <form
-        className={cn("relative w-full rounded-md border bg-black px-3 py-2 ring-offset-background", {
-          "outline-none ring-2 ring-ring ring-offset-2": isFocused,
-        })}
-        onSubmit={handleSubmit}
-      >
-        <FormField
-          name="query"
-          render={({ field }) => (
-            <div ref={containerRef} className="min-h-[21px] w-full">
-              <Editor
-                width="100%"
-                theme="hc-black"
-                value={decodeURIComponent(field.value)}
-                options={monacoOptions}
-                language="sql"
-                onChange={(value) => field.onChange(encodeURIComponent(value ?? ""))}
-                onMount={(editor) => {
-                  editorRef.current = editor;
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div
+          className={cn("relative w-full rounded-md border bg-black px-3 py-2 ring-offset-background", {
+            "outline-none ring-2 ring-ring ring-offset-2": isFocused,
+          })}
+        >
+          <FormField
+            name="query"
+            render={({ field }) => (
+              <div ref={containerRef} className="min-h-[21px] w-full">
+                <Editor
+                  width="100%"
+                  theme="hc-black"
+                  value={decodeURIComponent(field.value)}
+                  options={monacoOptions}
+                  language="sql"
+                  onChange={(value) => field.onChange(encodeURIComponent(value ?? ""))}
+                  onMount={(editor) => {
+                    editorRef.current = editor;
+                    editor.addAction({
+                      id: "executeSQL",
+                      label: "Execute SQL command",
+                      keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
+                      run: () => {
+                        handleSubmit();
+                      },
+                    });
 
-                  updateHeight();
-                  editor.onDidContentSizeChange(updateHeight);
-                  editor.onDidFocusEditorText(() => setIsFocused(true));
-                  editor.onDidBlurEditorText(() => setIsFocused(false));
-                }}
-                loading={null}
-              />
-            </div>
-          )}
-        />
+                    updateHeight();
+                    editor.onDidContentSizeChange(updateHeight);
+                    editor.onDidFocusEditorText(() => setIsFocused(true));
+                    editor.onDidBlurEditorText(() => setIsFocused(false));
+                  }}
+                  loading={null}
+                />
+              </div>
+            )}
+          />
+        </div>
 
-        <Button className="absolute bottom-1 right-1 h-8 px-4" type="submit">
-          <PlayIcon className="mr-1.5 h-3 w-3" /> Run
-        </Button>
+        <div className="flex justify-end">
+          <Button className="flex gap-2 pl-4 pr-3" type="submit">
+            Run
+            <span className="flex items-center gap-0.5 text-white/60">
+              {navigator.platform.toLowerCase().includes("mac") ? (
+                <>
+                  <CommandIcon className="h-3 w-3" />
+                  <CornerDownLeft className="h-3 w-3" />
+                </>
+              ) : (
+                <>
+                  <span className="text-xs">CTRL</span>
+                  <CornerDownLeft className="h-3 w-3" />
+                </>
+              )}
+            </span>
+          </Button>
+        </div>
       </form>
     </Form>
   );

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TableSelector.tsx

@@ -45,7 +45,7 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
   }, [selectedTableId, setTableId, tables]);
 
   return (
-    <div className="w-full py-4">
+    <div className="w-full">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -97,8 +97,8 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
   });
 
   return (
-    <>
-      <div className="flex items-center justify-between gap-4 pb-4">
+    <div className="!-mt-10 space-y-4">
+      <div className="flex w-1/2 items-center gap-4">
         <Input
           placeholder="Filter..."
           value={globalFilter}
@@ -172,7 +172,7 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
         )}
       </div>
 
-      <div className="flex items-center justify-end space-x-2 py-4">
+      <div className="flex items-center justify-end space-x-2">
         <div className="flex-1 text-sm text-muted-foreground">
           {tableData && `Total rows: ${tableData.rows.length.toLocaleString()}`}
         </div>
@@ -196,6 +196,6 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 }