pinned databases

packages/web/src/appobj/AppObjectCore.svelte

@@ -21,6 +21,9 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let colorMark = null;
+  export let onPin = null;
+  export let onUnpin = null;
+  export let showPinnedInsteadOfUnpin = false;
 
   $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
 
@@ -101,6 +104,36 @@
       {extInfo}
     </span>
   {/if}
+  {#if onPin}
+    <span
+      class="pin"
+      on:click={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onPin();
+      }}
+    >
+      <FontIcon icon="icon pin" />
+    </span>
+  {/if}
+  {#if onUnpin}
+    {#if showPinnedInsteadOfUnpin}
+      <span class="pin-active">
+        <FontIcon icon="icon pin" />
+      </span>
+    {:else}
+      <span
+        class="unpin"
+        on:click={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onUnpin();
+        }}
+      >
+        <FontIcon icon="icon close" />
+      </span>
+    {/if}
+  {/if}
 </div>
 <slot />
 
@@ -128,4 +161,32 @@
   .expand-icon {
     margin-right: 3px;
   }
+
+  .pin {
+    float: right;
+    color: var(--theme-font-2);
+  }
+  .pin:hover {
+    color: var(--theme-font-hover);
+  }
+  .main .pin {
+    visibility: hidden;
+  }
+  .main:hover .pin {
+    visibility: visible;
+  }
+
+  .unpin {
+    float: right;
+    color: var(--theme-font-2);
+  }
+  .unpin:hover {
+    color: var(--theme-font-hover);
+  }
+
+  .pin-active {
+    float: right;
+    color: var(--theme-font-2);
+  }
+
 </style>

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -199,7 +199,7 @@
   statusIcon={statusIcon || engineStatusIcon}
   statusTitle={statusTitle || engineStatusTitle}
   {extInfo}
-  colorMark={passProps?.connectionColorFactory({ conid: data._id })}
+  colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}
   on:click={handleConnect}
   on:click

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -162,7 +162,14 @@
   import { showModal } from '../modals/modalTools';
   import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
   import { getDefaultFileFormat } from '../plugins/fileformats';
-  import { currentArchive, currentDatabase, extensions, getExtensions, selectedWidget } from '../stores';
+  import {
+    currentArchive,
+    currentDatabase,
+    extensions,
+    getExtensions,
+    pinnedDatabases,
+    selectedWidget,
+  } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
   import getElectron from '../utility/getElectron';
   import openNewTab from '../utility/openNewTab';
@@ -179,6 +186,8 @@
   function createMenu() {
     return getDatabaseMenuItems(data.connection, data.name, $extensions, $currentDatabase);
   }
+
+  $: isPinned = !!$pinnedDatabases.find(x => x.name == data.name && x.connection?._id == data.connection?._id);
 </script>
 
 <AppObjectCore
@@ -186,12 +195,8 @@
   {data}
   title={data.name}
   icon="img database"
-  colorMark={passProps?.connectionColorFactory(
-    { conid: _.get(data.connection, '_id'), database: data.name },
-    null,
-    null,
-    false
-  )}
+  colorMark={passProps?.connectionColorFactory &&
+    passProps?.connectionColorFactory({ conid: _.get(data.connection, '_id'), database: data.name }, null, null, false)}
   isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
     _.get($currentDatabase, 'name') == data.name}
   on:click={() => ($currentDatabase = data)}
@@ -201,4 +206,12 @@
       .onClick();
   }}
   menu={createMenu}
+  showPinnedInsteadOfUnpin={passProps?.showPinnedInsteadOfUnpin}
+  onPin={isPinned ? null : () => pinnedDatabases.update(list => [...list, data])}
+  onUnpin={isPinned
+    ? () =>
+        pinnedDatabases.update(list =>
+          list.filter(x => x.name != data.name || x.connection?._id != data.connection?._id)
+        )
+    : null}
 />

packages/web/src/commands/stdCommands.ts

@@ -288,14 +288,20 @@ registerCommand({
       'zoomKoef',
       'selectedWidget',
       'currentTheme',
+
       'connectionsWidget',
+      'pinnedItemsWidget',
       'dbObjectsWidget',
+
       'favoritesWidget',
       'savedFilesWidget',
+
       'closedTabsWidget',
       'queryHistoryWidget',
+
       'archiveFoldersWidget',
       'archiveFilesWidget',
+
       'installedPluginsWidget',
       'allPluginsWidget',
     ];

packages/web/src/icons/FontIcon.svelte

@@ -23,6 +23,7 @@
     'icon keyboard': 'mdi mdi-keyboard-settings',
     'icon settings': 'mdi mdi-cog',
     'icon version': 'mdi mdi-ticket-confirmation',
+    'icon pin': 'mdi mdi-pin',
 
     'icon columns': 'mdi mdi-view-column',
     'icon columns-outline': 'mdi mdi-view-column-outline',

packages/web/src/stores.ts

@@ -42,6 +42,7 @@ 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 pinnedDatabases = writableWithStorage([], 'pinnedDatabases');
 export const commandsSettings = derived(useSettings(), (config: any) => (config || {}).commands || {});
 export const allResultsInOneTabDefault = writableWithStorage(false, 'allResultsInOneTabDefault');
 export const commandsCustomized = derived([commands, commandsSettings], ([$commands, $commandsSettings]) =>

packages/web/src/widgets/ConnectionList.svelte

@@ -46,7 +46,7 @@
     expandOnClick
     isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
     {filter}
-    passProps={{ connectionColorFactory: $connectionColorFactory }}
+    passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
   />
   {#if $connections && $connections.length == 0 && $commandsCustomized['new.connection']?.enabled}
     <ToolbarButton icon="icon new-connection" on:click={() => runCommand('new.connection')}>

packages/web/src/widgets/DatabaseWidget.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { findEngineDriver } from 'dbgate-tools';
-  import { currentDatabase, extensions } from '../stores';
+  import { currentDatabase, extensions, pinnedDatabases } from '../stores';
   import { useConfig, useConnectionInfo } from '../utility/metadataLoaders';
 
   import ConnectionList from './ConnectionList.svelte';
+  import PinnedObjectsList from './PinnedObjectsList.svelte';
   import SqlObjectListWrapper from './SqlObjectListWrapper.svelte';
 
   import WidgetColumnBar from './WidgetColumnBar.svelte';
@@ -23,6 +24,11 @@
       <ConnectionList />
     </WidgetColumnBarItem>
   {/if}
+  {#if $pinnedDatabases?.length > 0}
+    <WidgetColumnBarItem title="Pinned" name="pinned" height="15%" storageName="pinnedItemsWidget">
+      <PinnedObjectsList />
+    </WidgetColumnBarItem>
+  {/if}
   <WidgetColumnBarItem
     title={driver?.dialect?.nosql ? 'Collections' : 'Tables, views, functions'}
     name="dbObjects"

packages/web/src/widgets/PinnedObjectsList.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import {  pinnedDatabases } from '../stores';
+  import * as databaseAppObject from '../appobj/DatabaseAppObject.svelte';
+
+</script>
+
+<WidgetsInnerContainer>
+  <AppObjectList list={$pinnedDatabases} module={databaseAppObject} />
+</WidgetsInnerContainer>