color mark in connection tree

packages/web/src/appobj/AppObjectCore.svelte

@@ -20,6 +20,7 @@
   export let expandIcon = undefined;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let colorMark = null;
 
   $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
 
@@ -86,6 +87,9 @@
   {:else}
     <FontIcon {icon} />
   {/if}
+  {#if colorMark}
+    <FontIcon style={`color:${colorMark}`} icon="icon square" />
+  {/if}
   {title}
   {#if statusIcon}
     <span class="status">

packages/web/src/appobj/AppObjectGroup.svelte

@@ -13,6 +13,7 @@
   export let module;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let passProps;
 
   let isExpanded = true;
 
@@ -61,6 +62,7 @@
       {checkedObjectsStore}
       on:objectClick
       {disableContextMenu}
+      {passProps}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectList.svelte

@@ -14,6 +14,7 @@
   export let expandIconFunc = undefined;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
+  export let passProps;
 
   export let groupFunc = undefined;
 
@@ -75,6 +76,7 @@
       {groupFunc}
       {disableContextMenu}
       {filter}
+      {passProps}
     />
   {/each}
 {:else}
@@ -92,6 +94,7 @@
       {disableContextMenu}
       {filter}
       isExpandedBySearch={childrenMatched.includes(data)}
+      {passProps}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -21,6 +21,7 @@
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let isExpandedBySearch = false;
+  export let passProps;
 
   let isExpanded = false;
 
@@ -50,6 +51,7 @@
     {checkedObjectsStore}
     {module}
     {disableContextMenu}
+    {passProps}
   />
 
   {#if (isExpanded || isExpandedBySearch) && subItemsComponent}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -31,6 +31,7 @@
   import { getLocalStorage } from '../utility/storageCache';
 
   export let data;
+  export let passProps;
 
   let statusIcon = null;
   let statusTitle = null;
@@ -198,6 +199,7 @@
   statusIcon={statusIcon || engineStatusIcon}
   statusTitle={statusTitle || engineStatusTitle}
   {extInfo}
+  colorMark={passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}
   on:click={handleConnect}
   on:click

packages/web/src/icons/FontIcon.svelte

@@ -3,6 +3,7 @@
   export let title = null;
   export let padLeft = false;
   export let padRight = false;
+  export let style = null;
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -47,6 +48,7 @@
     'icon form': 'mdi mdi-form-select',
     'icon history': 'mdi mdi-history',
     'icon structure': 'mdi mdi-tools',
+    'icon square': 'mdi mdi-square',
 
     'icon edit': 'mdi mdi-pencil',
     'icon delete': 'mdi mdi-delete',
@@ -145,7 +147,7 @@
   };
 </script>
 
-<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight on:click />
+<span class={iconNames[icon] || icon} {title} class:padLeft class:padRight {style} on:click />
 
 <style>
   .padLeft {

packages/web/src/widgets/ConnectionList.svelte

@@ -13,6 +13,7 @@
   import ToolbarButton from './ToolbarButton.svelte';
   import runCommand from '../commands/runCommand';
   import getConnectionLabel from '../utility/getConnectionLabel';
+  import { useConnectionColorFactory } from '../utility/useConnectionColor';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -29,6 +30,8 @@
       axiosInstance.post('server-connections/refresh', { conid });
     }
   };
+
+  const connectionColorFactory = useConnectionColorFactory(3);
 </script>
 
 <SearchBoxWrapper>
@@ -43,6 +46,7 @@
     expandOnClick
     isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
     {filter}
+    passProps={{ connectionColorFactory: $connectionColorFactory }}
   />
   {#if $connections && $connections.length == 0 && $commandsCustomized['new.connection']?.enabled}
     <ToolbarButton icon="icon new-connection" on:click={() => runCommand('new.connection')}>