feat: add keymaps component

src/components/CommandPalette/CommandPaletteContext.tsx

@@ -1,32 +1,33 @@
-import { actions } from "./actions";
-import { useAppSelector } from "services/Context";
-import { CommandPalette, Root } from "solid-command-palette";
-import { JSX } from "solid-js/jsx-runtime";
-import { createShortcut } from "@solid-primitives/keyboard";
+import { actions } from './actions';
+import { useAppSelector } from 'services/Context';
+import { CommandPalette, Root } from 'solid-command-palette';
+import { JSX } from 'solid-js/jsx-runtime';
+import { createShortcut } from '@solid-primitives/keyboard';
 
 export interface ActionsContext {
   [key: string]: unknown;
 }
 
 export const CommandPaletteContext = (props: { children: JSX.Element }) => {
   const {
-    connections: {
-      addContentTab,
-      removeContentTab,
-      setContentIdx,
-      setConnectionIdx,
-    },
+    connections: { addContentTab, removeContentTab, setContentIdx, contentStore },
   } = useAppSelector();
 
   const actionsContext: ActionsContext = {};
 
-  for (let i = 0; i < 9; i++) {
-    createShortcut(["Alt", String(i)], () => setContentIdx(i - 1));
-    createShortcut(["Control", String(i)], () => setConnectionIdx(i - 1));
-  }
+  createShortcut(['Meta', 'w'], () => {
+    removeContentTab(contentStore.idx);
+  });
+
+  createShortcut(['Meta', 't'], () => {
+    addContentTab();
+  });
 
-  createShortcut(["Control", "T"], () => addContentTab());
-  createShortcut(["Control", "Shift", "T"], () => removeContentTab());
+  for (let i = 1; i <= 9; i++) {
+    createShortcut(['Meta', String(i)], () => {
+      setContentIdx(i - 1);
+    });
+  }
 
   return (
     <Root actions={actions} actionsContext={actionsContext}>

src/components/Screens/Console/Console.tsx

@@ -7,7 +7,7 @@ export const Console = () => {
   createEffect(() => {
     const s = Split(["#sidebar", "#main"], {
       sizes: [20, 80],
-      minSize: [100, 200],
+      minSize: [200, 200],
       maxSize: [400, Infinity],
       gutterSize: 4,
     });

src/components/Screens/Console/Content/Content.tsx

@@ -4,27 +4,12 @@ import { AddIcon, CloseIcon } from 'components/UI/Icons';
 import { QueryTab } from './QueryTab/QueryTab';
 import { TableStructureTab } from './TableStructure/TableStructureTab';
 import { ContentTab } from 'services/Connections';
-import { createShortcut } from '@solid-primitives/keyboard';
 
 export const Content = () => {
   const {
     connections: { contentStore, setContentIdx, addContentTab, removeContentTab },
   } = useAppSelector();
 
-  createShortcut(['Meta', 'w'], () => {
-    removeContentTab(contentStore.idx);
-  });
-
-  createShortcut(['Meta', 't'], () => {
-    addContentTab();
-  });
-
-  for (let i = 1; i <= 9; i++) {
-    createShortcut(['Meta', String(i)], () => {
-      setContentIdx(i - 1);
-    });
-  }
-
   return (
     <div class="flex flex-col h-full">
       <div class="bg-base-300 tabs gap-1">

src/components/Screens/Console/Content/QueryTab/QueryTab.tsx

@@ -5,7 +5,6 @@ import { QueryTextArea } from "./QueryTextArea";
 
 export const QueryTab = () => {
   createEffect(() => {
-    // TODO: fix this, results table height changes between results sets
     const q = Split(["#query", "#results"], {
       sizes: [30, 70],
       minSize: [200, 400],

src/components/Screens/Console/Content/QueryTab/ResultesTable.tsx

@@ -8,6 +8,7 @@ import { createCodeMirror, createEditorControlledValue } from 'solid-codemirror'
 import { Pagination } from './components/Pagination';
 import { useAppSelector } from 'services/Context';
 import { Row } from 'interfaces';
+import Keymaps from 'components/UI/Keymaps';
 
 type TableColumn = { title: string; field: string; resizeable: boolean };
 
@@ -78,7 +79,7 @@ export const ResultsTable = () => {
 
   createEffect(updateRows);
 
-  createEffect(async () => {
+  createEffect(() => {
     let columns: TableColumn[] = [];
     if (rows().length) {
       columns = Object.keys(rows()[0]).map((k) => ({
@@ -91,6 +92,8 @@ export const ResultsTable = () => {
 
     new Tabulator('#results-table', {
       data: rows(),
+      placeholder: <Keymaps /> as HTMLElement,
+      // autoColumns: true,
       columns,
       columnDefaults: {
         title: '',
@@ -99,8 +102,10 @@ export const ResultsTable = () => {
       layout: 'fitDataStretch',
       autoResize: true,
       clipboard: true,
+      renderHorizontal: 'virtual',
       pagination: false,
       maxHeight: '100%',
+      minHeight: '100%',
       height: '100%',
       paginationCounter: 'rows',
       debugInvalidOptions: false,
@@ -138,6 +143,7 @@ export const ResultsTable = () => {
       //   navRight: ["ctrl + shift + l", 39],
       // },
     });
+    console.log('render');
   });
 
   const onNextPage = async () => {

src/components/UI/Keymaps.tsx

@@ -0,0 +1,43 @@
+import { For } from 'solid-js';
+
+const keymaps = [
+  // TODO:
+  // { action: 'Help', keys: ['F1'] },
+  { action: 'Execute query', keys: ['Ctrl', 'e'] },
+  { action: 'Select tab', keys: ['Meta', 'number'] },
+  { action: 'New tab', keys: ['Meta', 'w'] },
+  { action: 'Close current tab', keys: ['Meta', 't'] },
+  { action: 'Focus on editor', keys: ['Ctrl', 'l'] },
+  { action: 'Format query', keys: ['Ctrl', 'Shift', 'f'] },
+  { action: 'Select next/previous result', keys: ['Ctrl', 'Shift', 'n/p'] },
+  { action: 'Select next/previous page', keys: ['Ctrl', 'n/p'] },
+];
+
+const Keymaps = () => {
+  return (
+    <div class="flex items-center justify-center">
+      <div class="flex flex-col items-end pr-1">
+        <For each={keymaps}>
+          {({ action }) => (
+            <div class="h-[40px] flex items-center align-middle">
+              <span class="text-lg font-medium ">{action}</span>
+            </div>
+          )}
+        </For>
+      </div>
+      <div class="flex flex-col items-start pl-1">
+        <For each={keymaps}>
+          {({ keys }) => (
+            <div class="h-[40px] flex items-center">
+              <span class="flex gap-2">
+                <For each={keys}>{(key) => <kbd class="kbd kbd-sm">{key}</kbd>}</For>
+              </span>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+};
+
+export default Keymaps;