add commit and discard keybinding (#161)

src/components/gui/tabs/table-data-tab.tsx

@@ -6,7 +6,6 @@ import {
   LucideArrowRight,
   LucideDelete,
   LucideFilter,
-  LucideLoader,
   LucidePlus,
   LucideRefreshCcw,
   LucideSaveAll,
@@ -38,6 +37,9 @@ import ResultStats from "../result-stat";
 import isEmptyResultStats from "@/components/lib/empty-stats";
 import useTableResultColumnFilter from "../table-result/filter-column";
 import { AlertDialogTitle } from "@radix-ui/react-alert-dialog";
+import { useCurrentTab } from "../windows-tab";
+import { KEY_BINDING } from "@/lib/key-matcher";
+import { Toolbar, ToolbarButton } from "../toolbar";
 
 interface TableDataContentProps {
   tableName: string;
@@ -169,6 +171,28 @@ export default function TableDataWindow({
     }
   }, [data]);
 
+  const { isActiveTab } = useCurrentTab();
+
+  useEffect(() => {
+    if (isActiveTab) {
+      const handleGlobalKeyBinding = (e: KeyboardEvent) => {
+        if (KEY_BINDING.commit.match(e)) {
+          onCommit();
+          e.preventDefault();
+          e.stopPropagation();
+        } else if (KEY_BINDING.discard.match(e)) {
+          onDiscard();
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+
+      document.addEventListener("keydown", handleGlobalKeyBinding);
+      return () =>
+        document.removeEventListener("keydown", handleGlobalKeyBinding);
+    }
+  }, [isActiveTab, onCommit, onDiscard]);
+
   return (
     <div className="flex flex-col overflow-hidden w-full h-full">
       {executeError && (
@@ -185,37 +209,24 @@ export default function TableDataWindow({
         </AlertDialog>
       )}
       <div className="shrink-0 grow-0">
-        <div className="flex p-1 gap-1">
-          <Button
-            variant={"ghost"}
-            size={"sm"}
+        <Toolbar>
+          <ToolbarButton
+            text="Commit"
+            icon={<LucideSaveAll className="w-4 h-4 mr-2" />}
+            tooltip={`Commit your changes (${KEY_BINDING.commit.toString()})`}
             disabled={!changeNumber || isExecuting}
+            loading={isExecuting}
             onClick={onCommit}
-          >
-            {isExecuting ? (
-              <LucideLoader className="w-4 h-4 animate-spin mr-2" />
-            ) : (
-              <LucideSaveAll className="w-4 h-4 mr-2 text-green-600" />
-            )}
-            Commit
-            {!!changeNumber && (
-              <span
-                className="ml-2 bg-red-500 text-white leading-5 w-5 h-5 rounded-full"
-                style={{ fontSize: 9 }}
-              >
-                {changeNumber}
-              </span>
-            )}
-          </Button>
+            badge={changeNumber ? changeNumber.toString() : ""}
+          />
 
-          <Button
-            variant={"ghost"}
-            size={"sm"}
+          <ToolbarButton
+            text="Discard Change"
+            tooltip={`Dicard all changes (${KEY_BINDING.discard.toString()})`}
+            destructive
             disabled={!changeNumber}
             onClick={onDiscard}
-          >
-            <span className="text-red-500">Discard Change</span>
-          </Button>
+          />
 
           <div className="mx-1">
             <Separator orientation="vertical" />
@@ -337,7 +348,7 @@ export default function TableDataWindow({
               }}
             />
           </Button>
-        </div>
+        </Toolbar>
         <Separator />
       </div>
       <div className="grow overflow-hidden relative">

src/components/gui/toolbar.tsx

@@ -0,0 +1,58 @@
+import { PropsWithChildren, ReactElement } from "react";
+import { Button } from "../ui/button";
+import { LucideLoader } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export function Toolbar({ children }: PropsWithChildren) {
+  return <div className="flex p-1 gap-1">{children}</div>;
+}
+
+export function ToolbarButton({
+  disabled,
+  loading,
+  icon,
+  onClick,
+  badge,
+  text,
+  tooltip,
+  destructive,
+}: {
+  icon?: ReactElement;
+  disabled?: boolean;
+  loading?: boolean;
+  badge?: string;
+  text: string;
+  onClick?: () => void;
+  tooltip?: ReactElement | string;
+  destructive?: boolean;
+}) {
+  const buttonContent = (
+    <Button variant={"ghost"} size={"sm"} disabled={disabled} onClick={onClick}>
+      {loading ? <LucideLoader className="w-4 h-4 animate-spin mr-2" /> : icon}
+
+      {destructive ? <span className="text-red-500">{text}</span> : text}
+
+      {badge && (
+        <span
+          className={
+            "ml-2 bg-red-500 text-white leading-5 w-5 h-5 rounded-full"
+          }
+          style={{ fontSize: 9 }}
+        >
+          {badge}
+        </span>
+      )}
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{buttonContent}</TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+}

src/components/gui/windows-tab.tsx

@@ -53,10 +53,18 @@ const WindowTabsContext = createContext<{
   },
 });
 
+const CurrentWindowTab = createContext<{ isActiveTab: boolean }>({
+  isActiveTab: false,
+});
+
 export function useTabsContext() {
   return useContext(WindowTabsContext);
 }
 
+export function useCurrentTab() {
+  return useContext(CurrentWindowTab);
+}
+
 export default function WindowTabs({
   menu,
   tabs,
@@ -200,15 +208,19 @@ export default function WindowTabs({
           </div>
           <div className="grow relative">
             {tabs.map((tab, tabIndex) => (
-              <div
-                className="absolute left-0 right-0 top-0 bottom-0"
-                style={{
-                  visibility: tabIndex === selected ? "inherit" : "hidden",
-                }}
+              <CurrentWindowTab.Provider
                 key={tab.key}
+                value={{ isActiveTab: tabIndex === selected }}
               >
-                {tab.component}
-              </div>
+                <div
+                  className="absolute left-0 right-0 top-0 bottom-0"
+                  style={{
+                    visibility: tabIndex === selected ? "inherit" : "hidden",
+                  }}
+                >
+                  {tab.component}
+                </div>
+              </CurrentWindowTab.Provider>
             ))}
           </div>
         </div>

src/lib/key-matcher.ts

@@ -77,4 +77,6 @@ export const KEY_BINDING = {
   copy: new KeyMatcher({ ctrl: true, key: "c" }),
   paste: new KeyMatcher({ ctrl: true, key: "v" }),
   format: new KeyMatcher({ ctrl: true, shift: true, key: "i" }),
+  commit: new KeyMatcher({ ctrl: true, key: "s" }),
+  discard: new KeyMatcher({ ctrl: true, shift: true, key: "Delete" }),
 };