fixes

packages/web/src/stores.ts

@@ -147,6 +147,12 @@ recentDatabases.subscribe(value => {
 });
 export const getRecentDatabases = () => _.compact(recentDatabasesValue);
 
+let pinnedDatabasesValue = null;
+pinnedDatabases.subscribe(value => {
+  pinnedDatabasesValue = value;
+});
+export const getPinnedDatabases = () => _.compact(pinnedDatabasesValue);
+
 let currentDatabaseValue = null;
 currentDatabase.subscribe(value => {
   currentDatabaseValue = value;

packages/web/src/widgets/DatabaseWidget.svelte

@@ -24,11 +24,15 @@
       <ConnectionList />
     </WidgetColumnBarItem>
   {/if}
-  {#if $pinnedDatabases?.length > 0}
+  <WidgetColumnBarItem
-    <WidgetColumnBarItem title="Pinned" name="pinned" height="15%" storageName="pinnedItemsWidget">
+    title="Pinned"
-      <PinnedObjectsList />
+    name="pinned"
-    </WidgetColumnBarItem>
+    height="15%"
-  {/if}
+    storageName="pinnedItemsWidget"
+    skip={!$pinnedDatabases?.length}
+  >
+    <PinnedObjectsList />
+  </WidgetColumnBarItem>
   <WidgetColumnBarItem
     title={driver?.dialect?.nosql ? 'Collections' : 'Tables, views, functions'}
     name="dbObjects"

packages/web/src/widgets/PinnedObjectsList.svelte

@@ -2,11 +2,17 @@
   import _ from 'lodash';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import {  pinnedDatabases } from '../stores';
+  import { pinnedDatabases } from '../stores';
   import * as databaseAppObject from '../appobj/DatabaseAppObject.svelte';
+  import { useConnectionColorFactory } from '../utility/useConnectionColor';
 
+  const connectionColorFactory = useConnectionColorFactory(3);
 </script>
 
 <WidgetsInnerContainer>
-  <AppObjectList list={$pinnedDatabases} module={databaseAppObject} />
+  <AppObjectList
+    list={$pinnedDatabases}
+    module={databaseAppObject}
+    passProps={{ connectionColorFactory: $connectionColorFactory }}
+  />
 </WidgetsInnerContainer>