database & connection color overrides

packages/web/src/appobj/AppObjectListItem.svelte

@@ -56,7 +56,7 @@
 
   {#if (isExpanded || isExpandedBySearch) && subItemsComponent}
     <div class="subitems">
-      <svelte:component this={subItemsComponent} {data} {filter} />
+      <svelte:component this={subItemsComponent} {data} {filter} {passProps} />
     </div>
   {/if}
 {/if}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -171,8 +171,10 @@
   import { findEngineDriver } from 'dbgate-tools';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { getDatabaseInfo } from '../utility/metadataLoaders';
-import { openJsonDocument } from '../tabs/JsonTab.svelte';
+  import { openJsonDocument } from '../tabs/JsonTab.svelte';
+
   export let data;
+  export let passProps;
 
   function createMenu() {
     return getDatabaseMenuItems(data.connection, data.name, $extensions, $currentDatabase);
@@ -184,6 +186,12 @@ import { openJsonDocument } from '../tabs/JsonTab.svelte';
   {data}
   title={data.name}
   icon="img database"
+  colorMark={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)}

packages/web/src/appobj/SubDatabaseList.svelte

@@ -7,6 +7,7 @@
 
   export let filter;
   export let data;
+  export let passProps;
 
   $: databases = useDatabaseList({ conid: data._id });
 </script>
@@ -17,4 +18,5 @@
     'name'
   ).map(db => ({ ...db, connection: data }))}
   module={databaseAppObject}
+  {passProps}
 />