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}
 />