connection color in tabs panel

packages/web/src/utility/useConnectionColor.ts

@@ -0,0 +1,36 @@
+import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
+import { derived } from 'svelte/store';
+import { currentThemeDefinition } from '../stores';
+import { useConnectionList } from '../utility/metadataLoaders';
+
+export function getConnectionColor(connections, dbid, themeType, colorIndex, backgroundStyle = false) {
+  if (!dbid || !connections) return undefined;
+  const current = connections.find(x => x._id == dbid.conid);
+  if (!current?.connectionColor) return undefined;
+  const palettes = themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+  const color = palettes[current?.connectionColor][colorIndex];
+  if (backgroundStyle) return `background:${color}`;
+  return color;
+}
+
+export function useConnectionColor(dbid, colorIndex, themeType = null, backgroundStyle = false) {
+  const connections = useConnectionList();
+  return derived([connections, currentThemeDefinition], ([$connections, $themeDef]) =>
+    getConnectionColor($connections, dbid, themeType ?? $themeDef?.themeType, colorIndex, backgroundStyle)
+  );
+}
+
+export function useConnectionColorFactory(colorIndex, themeType = null, backgroundStyle = false) {
+  const connections = useConnectionList();
+  return derived(
+    [connections, currentThemeDefinition],
+    ([$connections, $themeDef]) => (dbid, colorIndexOverride = null) =>
+      getConnectionColor(
+        $connections,
+        dbid,
+        themeType ?? $themeDef?.themeType,
+        colorIndexOverride || colorIndex,
+        backgroundStyle
+      )
+  );
+}

packages/web/src/widgets/StatusBar.svelte

@@ -31,7 +31,6 @@
   import _ from 'lodash';
   import { writable } from 'svelte/store';
   import moment from 'moment';
-  import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
 
   import FontIcon from '../icons/FontIcon.svelte';
 
@@ -40,17 +39,19 @@
   import { useConnectionList, useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
   import axiosInstance from '../utility/axiosInstance';
   import { findCommand } from '../commands/runCommand';
+  import { useConnectionColor } from '../utility/useConnectionColor';
 
   $: databaseName = $currentDatabase && $currentDatabase.name;
   $: connection = $currentDatabase && $currentDatabase.connection;
-  $: status = useDatabaseStatus(connection ? { conid: connection._id, database: databaseName } : {});
+  $: dbid = connection ? { conid: connection._id, database: databaseName } : null;
-  $: serverVersion = useDatabaseServerVersion(connection ? { conid: connection._id, database: databaseName } : {});
+  $: status = useDatabaseStatus(dbid || {});
+  $: serverVersion = useDatabaseServerVersion(dbid || {});
   const connections = useConnectionList();
 
   $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 
-  $: connectionColor = getConnectionColor($connections, connection, $currentThemeDefinition);
+  $: connectionBackground = useConnectionColor(dbid, 3, 'dark', true);
 
   let timerValue = 1;
 
@@ -58,16 +59,6 @@
     timerValue++;
   }, 10000);
 
-  function getConnectionColor(connections, connection, themeDef) {
-    if (!connection || !connections) return null;
-    const current = connections.find(x => x._id == connection._id);
-    if (!current?.connectionColor) return null;
-    if (!themeDef) return null;
-    // const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
-    const palettes = presetDarkPalettes;
-    return palettes[current?.connectionColor][3];
-  }
-
   async function handleSyncModel() {
     if (connection && databaseName) {
       await axiosInstance.post('database-connections/sync-model', { conid: connection._id, database: databaseName });
@@ -75,7 +66,7 @@
   }
 </script>
 
-<div class="main" style={connectionColor ? `background: ${connectionColor}` : null}>
+<div class="main" style={$connectionBackground}>
   <div class="container">
     {#if databaseName}
       <div class="item">

packages/web/src/widgets/TabsPanel.svelte

@@ -142,6 +142,7 @@
   import getElectron from '../utility/getElectron';
   import { getConnectionInfo, useConnectionList } from '../utility/metadataLoaders';
   import { duplicateTab } from '../utility/openNewTab';
+  import { useConnectionColorFactory } from '../utility/useConnectionColor';
 
   $: connectionList = useConnectionList();
 
@@ -165,6 +166,8 @@
 
   $: scrollInViewTab($activeTabId);
 
+  const connectionColorFactory = useConnectionColorFactory(3, null, true);
+
   const handleTabClick = (e, tabid) => {
     if (e.target.closest('.tabCloseButton')) {
       return;
@@ -259,6 +262,7 @@
       class:selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
       on:click={() => handleSetDb(tabsByDb[dbKey][0].props)}
       use:contextMenu={getDatabaseContextMenu(tabsByDb[dbKey])}
+      style={$connectionColorFactory(tabsByDb[dbKey][0].props, tabsByDb[dbKey][0].tabDbKey == currentDbKey ? 2 : 3)}
     >
       <FontIcon icon={getDbIcon(dbKey)} />
       {tabsByDb[dbKey][0].tabDbName}