connection colors

packages/web/src/charts/ChartEditor.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import AboutModal from '../modals/AboutModal.svelte';
-  import { presetPrimaryColors } from '@ant-design/colors';
-  import { startCase } from 'lodash';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
@@ -10,9 +7,7 @@
   import FormSelectField from '../forms/FormSelectField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
-  import { writable } from 'svelte/store';
   import FormFieldTemplateTiny from '../forms/FormFieldTemplateTiny.svelte';
-  import createRef from '../utility/createRef';
   import { getConnectionInfo } from '../utility/metadataLoaders';
   import { findEngineDriver } from 'dbgate-tools';
   import { extensions } from '../stores';
@@ -20,6 +15,7 @@
   import DataChart from './DataChart.svelte';
   import _ from 'lodash';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import FormColorField from '../forms/FormColorField.svelte';
 
   export let data;
   export let configStore;
@@ -144,15 +140,7 @@
             {#each availableColumnNames as col (col)}
               <FormCheckboxField label={col} name={`dataColumn_${col}`} />
               {#if config[`dataColumn_${col}`]}
-                <FormSelectField
-                  label="Color"
-                  name={`dataColumnColor_${col}`}
-                  isNative
-                  options={[
-                    { value: '', label: 'Random' },
-                    ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
-                  ]}
-                />
+                <FormColorField label="Color" name={`dataColumnColor_${col}`} emptyLabel="Random" />
                 <FormTextField label="Label" name={`dataColumnLabel_${col}`} />
               {/if}
             {/each}

packages/web/src/forms/FormColorField.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import { presetPrimaryColors } from '@ant-design/colors';
+
+  export let emptyLabel;
+</script>
+
+<FormSelectField
+  isNative
+  {...$$restProps}
+  options={[
+    { value: '', label: emptyLabel },
+    ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
+  ]}
+/>

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -3,6 +3,7 @@
   import FormElectronFileSelector from '../forms/FormElectronFileSelector.svelte';
 
   import FormPasswordField from '../forms/FormPasswordField.svelte';
+  import _ from 'lodash';
 
   import { getFormContext } from '../forms/FormProviderCore.svelte';
   import FormRadioGroupField from '../forms/FormRadioGroupField.svelte';
@@ -12,6 +13,7 @@
   import { extensions } from '../stores';
   import getElectron from '../utility/getElectron';
   import { useAuthTypes } from '../utility/metadataLoaders';
+  import FormColorField from '../forms/FormColorField.svelte';
 
   const { values } = getFormContext();
   const electron = getElectron();
@@ -142,7 +144,19 @@
   <FormCheckboxField label={`Use only database ${defaultDatabase}`} name="singleDatabase" />
 {/if}
 
-<FormTextField label="Display name" name="displayName" />
+<div class="row">
+  <div class="col-6 mr-1">
+    <FormTextField label="Display name" name="displayName" templateProps={{ noMargin: true }} />
+  </div>
+  <div class="col-6 mr-1">
+    <FormColorField
+      label="Color"
+      name="connectionColor"
+      emptyLabel="(not selected)"
+      templateProps={{ noMargin: true }}
+    />
+  </div>
+</div>
 
 <style>
   .row {

packages/web/src/widgets/StatusBar.svelte

@@ -31,12 +31,13 @@
   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';
 
-  import { activeTabId, currentDatabase, visibleCommandPalette } from '../stores';
+  import { activeTabId, currentDatabase, currentThemeDefinition, visibleCommandPalette } from '../stores';
   import getConnectionLabel from '../utility/getConnectionLabel';
-  import { useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
+  import { useConnectionList, useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
   import axiosInstance from '../utility/axiosInstance';
   import { findCommand } from '../commands/runCommand';
 
@@ -44,16 +45,29 @@
   $: connection = $currentDatabase && $currentDatabase.connection;
   $: status = useDatabaseStatus(connection ? { conid: connection._id, database: databaseName } : {});
   $: serverVersion = useDatabaseServerVersion(connection ? { conid: connection._id, database: databaseName } : {});
+  const connections = useConnectionList();
 
   $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 
+  $: connectionColor = getConnectionColor($connections, connection, $currentThemeDefinition);
+
   let timerValue = 1;
 
   setInterval(() => {
     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 });
@@ -61,7 +75,7 @@
   }
 </script>
 
-<div class="main">
+<div class="main" style={connectionColor ? `background: ${connectionColor}` : null}>
   <div class="container">
     {#if databaseName}
       <div class="item">