change to recent database

packages/web/src/commands/CommandPalette.svelte

@@ -18,7 +18,6 @@
   import { filterName } from 'dbgate-datalib';
 
   import _ from 'lodash';
-  import { derived } from 'svelte/store';
   import { onMount } from 'svelte';
   import { commands, getVisibleCommandPalette, visibleCommandPalette } from '../stores';
   import clickOutside from '../utility/clickOutside';
@@ -28,6 +27,7 @@
   let domInput;
   let parentCommand;
   let filter = '';
+  const domItems = {};
 
   $: selectedIndex = true ? 0 : filter;
 
@@ -65,7 +65,12 @@
     if (e.keyCode == keycodes.downArrow && selectedIndex < filteredItems.length - 1) selectedIndex++;
     if (e.keyCode == keycodes.enter) handleCommand(filteredItems[selectedIndex]);
     if (e.keyCode == keycodes.escape) $visibleCommandPalette = false;
+
+    if (e.keyCode == keycodes.pageDown) selectedIndex = Math.min(selectedIndex + 15, filteredItems.length - 1);
+    if (e.keyCode == keycodes.pageUp) selectedIndex = Math.max(selectedIndex - 15, 0);
   }
+
+  $: if (domItems[selectedIndex]) domItems[selectedIndex].scrollIntoView({ block: 'nearest', inline: 'nearest' });
 </script>
 
 <div class="main" use:clickOutside on:clickOutside={() => ($visibleCommandPalette = false)}>
@@ -80,7 +85,12 @@
   </div>
   <div class="content">
     {#each filteredItems as command, index}
-      <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
+      <div
+        class="command"
+        class:selected={index == selectedIndex}
+        on:click={() => handleCommand(command)}
+        bind:this={domItems[index]}
+      >
         <div>{command.text}</div>
         {#if command.keyText}
           <div class="shortcut">{command.keyText}</div>

packages/web/src/commands/recentDatabaseSwitch.ts

@@ -0,0 +1,30 @@
+import _ from 'lodash';
+import { recentDatabases, currentDatabase, getRecentDatabases } from '../stores';
+import registerCommand from './registerCommand';
+
+currentDatabase.subscribe(value => {
+  console.log('DB', value);
+  if (!value) return;
+  recentDatabases.update(list => {
+    const res = [
+      value,
+      ..._.compact(list).filter(x => x.name != value.name || x.connection?._id != value.connection?.id),
+    ].slice(0, 10);
+    return res;
+  });
+});
+
+function switchDatabaseCommand(db) {
+  return {
+    text: `${db.name} on ${db?.connection?.displayName || db?.connection?.server}`,
+    onClick: () => currentDatabase.set(db),
+  };
+}
+
+registerCommand({
+  id: 'database.switch',
+  category: 'Database',
+  name: 'Change to recent',
+  keyText: 'Ctrl+D',
+  getSubCommands: () => getRecentDatabases().map(switchDatabaseCommand),
+});

packages/web/src/commands/stdCommands.ts

@@ -13,6 +13,7 @@ import getElectron from '../utility/getElectron';
 import { openElectronFile } from '../utility/openElectronFile';
 import { getDefaultFileFormat } from '../plugins/fileformats';
 import { getCurrentConfig } from '../stores';
+import './recentDatabaseSwitch';
 
 const electron = getElectron();
 

packages/web/src/stores.ts

@@ -4,6 +4,7 @@ import invalidateCommands from './commands/invalidateCommands';
 import getElectron from './utility/getElectron';
 import { GlobalCommand } from './commands/registerCommand';
 import { useConfig } from './utility/metadataLoaders';
+import _ from 'lodash';
 
 interface TabDefinition {
   title: string;
@@ -39,6 +40,7 @@ export const commands = writable({});
 export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
+export const recentDatabases = writableWithStorage([], 'recentDatabases');
 
 export const visibleToolbar = writableWithStorage(1, 'visibleToolbar');
 export const leftPanelWidth = writable(300);
@@ -111,3 +113,9 @@ currentConfigStore.subscribe(value => {
   invalidateCommands();
 });
 export const getCurrentConfig = () => currentConfigValue;
+
+let recentDatabasesValue = null;
+recentDatabases.subscribe(value => {
+  recentDatabasesValue = value;
+});
+export const getRecentDatabases = () => _.compact(recentDatabasesValue);