save widget state & size

packages/web/src/commands/stdCommands.ts

@@ -23,6 +23,8 @@ import _ from 'lodash';
 import { findEngineDriver } from 'dbgate-tools';
 import { openArchiveFolder } from '../utility/openArchiveFolder';
 import InputTextModal from '../modals/InputTextModal.svelte';
+import { removeLocalStorage } from '../utility/storageCache';
+import { showSnackbarSuccess } from '../utility/snackbar';
 
 const electron = getElectron();
 
@@ -275,6 +277,33 @@ registerCommand({
     }),
 });
 
+registerCommand({
+  id: 'view.reset',
+  category: 'View',
+  name: 'Reset view',
+  onClick: () => {
+    const keys = [
+      'leftPanelWidth',
+      'visibleToolbar',
+      'zoomKoef',
+      'selectedWidget',
+      'currentTheme',
+      'connectionsWidget',
+      'dbObjectsWidget',
+      'favoritesWidget',
+      'savedFilesWidget',
+      'closedTabsWidget',
+      'queryHistoryWidget',
+      'archiveFoldersWidget',
+      'archiveFilesWidget',
+      'installedPluginsWidget',
+      'allPluginsWidget',
+    ];
+    for (const key of keys) removeLocalStorage(key);
+    showSnackbarSuccess('Restart DbGate (or reload on web) for applying changes');
+  },
+});
+
 registerCommand({
   id: 'sql.generator',
   category: 'SQL',

packages/web/src/stores.ts

@@ -30,7 +30,7 @@ function subscribeCssVariable(store, transform, cssVariable) {
   store.subscribe(value => document.documentElement.style.setProperty(cssVariable, transform(value)));
 }
 
-export const selectedWidget = writable('database');
+export const selectedWidget = writableWithStorage('database', 'selectedWidget');
 export const openedConnections = writable([]);
 export const currentDatabase = writable(null);
 export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
@@ -54,7 +54,7 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
 
 export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
 export const zoomKoef = writableWithStorage(1, 'zoomKoef');
-export const leftPanelWidth = writable(300);
+export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');
 export const currentDropDownMenu = writable(null);
 export const openedModals = writable([]);
 export const openedSnackbars = writable([]);

packages/web/src/widgets/ArchiveWidget.svelte

@@ -8,10 +8,10 @@
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Archive folders, DB models" name="folders" height="50%">
+  <WidgetColumnBarItem title="Archive folders, DB models" name="folders" height="50%" storageName='archiveFoldersWidget'>
     <ArchiveFolderList />
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Files, Tables, Views, Functions" name="files">
+  <WidgetColumnBarItem title="Files, Tables, Views, Functions" name="files" storageName='archiveFilesWidget'>
     <ArchiveFilesList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/DatabaseWidget.svelte

@@ -19,11 +19,15 @@
 
 <WidgetColumnBar {hidden}>
   {#if !$config?.singleDatabase}
-    <WidgetColumnBarItem title="Connections" name="connections" height="50%">
+    <WidgetColumnBarItem title="Connections" name="connections" height="35%" storageName="connectionsWidget">
       <ConnectionList />
     </WidgetColumnBarItem>
   {/if}
-  <WidgetColumnBarItem title={driver?.dialect?.nosql ? 'Collections' : 'Tables, views, functions'} name="dbObjects">
+  <WidgetColumnBarItem
+    title={driver?.dialect?.nosql ? 'Collections' : 'Tables, views, functions'}
+    name="dbObjects"
+    storageName="dbObjectsWidget"
+  >
     <SqlObjectListWrapper />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/FilesWidget.svelte

@@ -20,14 +20,14 @@
 
 <WidgetColumnBar>
   {#if hasPermission('files/favorites/read')}
-    <WidgetColumnBarItem title="Favorites" name="favorites" height="20%">
+    <WidgetColumnBarItem title="Favorites" name="favorites" height="20%" storageName="favoritesWidget">
       <WidgetsInnerContainer>
         <AppObjectList list={$favorites || []} module={favoriteFileAppObject} />
       </WidgetsInnerContainer>
     </WidgetColumnBarItem>
   {/if}
 
-  <WidgetColumnBarItem title="Saved files" name="files">
+  <WidgetColumnBarItem title="Saved files" name="files" storageName="savedFilesWidget">
     <SavedFilesList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/HistoryWidget.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs">
+  <WidgetColumnBarItem title="Recently closed tabs" name="closedTabs" storageName='closedTabsWidget'>
     <WidgetsInnerContainer>
       <AppObjectList
         list={_.sortBy(
@@ -30,7 +30,7 @@
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Query history" name="queryHistory">
+  <WidgetColumnBarItem title="Query history" name="queryHistory" storageName='queryHistoryWidget'>
     <QueryHistoryList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/PluginsWidget.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <WidgetColumnBar>
-  <WidgetColumnBarItem title="Installed extensions" name="installed" height="50%">
+  <WidgetColumnBarItem title="Installed extensions" name="installed" height="50%" storageName='installedPluginsWidget'>
     <InstalledPluginsList />
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Available extensions" name="all">
+  <WidgetColumnBarItem title="Available extensions" name="all" storageName='allPluginsWidget'>
     <AvailablePluginsList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -7,6 +7,7 @@
 
   import WidgetTitle from './WidgetTitle.svelte';
   import splitterDrag from '../utility/splitterDrag';
+  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
 
   export let title;
   export let name;
@@ -15,6 +16,8 @@
   export let height = null;
   export let collapsed = null;
 
+  export let storageName = null;
+
   let size = 0;
 
   const dynamicProps = writable({
@@ -37,14 +40,28 @@
 
   $: setInitialSize(height, $widgetColumnBarHeight);
 
+  $: if (storageName && $widgetColumnBarHeight > 0) {
+    setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible });
+  }
+
   function setInitialSize(initialSize, parentHeight) {
+    if (storageName) {
+      const storage = getLocalStorage(storageName);
+      if (storage) {
+        size = parentHeight * storage.relativeHeight;
+        return;
+      }
+    }
     if (_.isString(initialSize) && initialSize.endsWith('px')) size = parseInt(initialSize.slice(0, -2));
     else if (_.isString(initialSize) && initialSize.endsWith('%'))
       size = (parentHeight * parseFloat(initialSize.slice(0, -1))) / 100;
     else size = parentHeight / 3;
   }
 
-  let visible = !collapsed;
+  let visible =
+    storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
+      ? getLocalStorage(storageName).visible
+      : !collapsed;
 </script>
 
 {#if !skip && show}