pinned databases

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>