SYNC: connection color for cloud connections

packages/web/src/appobj/CloudContentAppObject.svelte

@@ -123,6 +123,8 @@
     icon={'img cloud-connection'}
     title={data.name}
     menu={createMenu}
+    colorMark={passProps?.cloudContentColorFactory &&
+      passProps?.cloudContentColorFactory({ cntid: data.cntid, folid: data.folid })}
     on:click={handleOpenContent}
     on:dblclick
     on:expand

packages/web/src/utility/useConnectionColor.ts

@@ -1,10 +1,11 @@
 import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
 import { derived } from 'svelte/store';
-import { currentThemeDefinition } from '../stores';
+import { cloudConnectionsStore, currentThemeDefinition } from '../stores';
-import { useConnectionList } from '../utility/metadataLoaders';
+import { useCloudContentList, useConnectionList } from '../utility/metadataLoaders';
 
 export function getConnectionColor(
   connections,
+  cloudConnectionsStore,
   dbid,
   themeType,
   colorIndex,
@@ -12,7 +13,7 @@ export function getConnectionColor(
   useConnectionFallback = true
 ) {
   if (!dbid || !connections) return undefined;
-  const current = connections.find(x => x._id == dbid.conid);
+  const current = connections.find(x => x._id == dbid.conid) ?? cloudConnectionsStore?.[dbid.conid];
   const { database } = dbid;
   let colorName = useConnectionFallback || !database ? current?.connectionColor : null;
   const dbConfig = (current?.databases || []).find(x => x.name == database);
@@ -27,6 +28,18 @@ export function getConnectionColor(
   return color;
 }
 
+export function getCloudContentColor(cloudContent, { cntid, folid }, themeType, colorIndex, backgroundStyle = false) {
+  if (!cntid || !folid || !cloudContent) return undefined;
+  const current = cloudContent.flatMap(x => x.items).find(x => x.cntid == cntid && x.folid == folid);
+  const colorName = current?.contentAttributes?.connectionColor;
+  if (!colorName) return undefined;
+  const palettes = themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+  if (colorIndex == null) return colorName;
+  const color = palettes[colorName][colorIndex];
+  if (backgroundStyle) return `background:${color}`;
+  return color;
+}
+
 export function useConnectionColor(
   dbid,
   colorIndex,
@@ -55,20 +68,33 @@ export function useConnectionColorFactory(
 ) {
   const connections = useConnectionList();
   return derived(
-    [connections, currentThemeDefinition],
+    [connections, currentThemeDefinition, cloudConnectionsStore],
-    ([$connections, $themeDef]) => (
+    ([$connections, $themeDef, $cloudConnectionsStore]) =>
-      dbid,
+      (dbid, colorIndexOverride = null, backgroundStyleOverride = null, useConnectionFallbackOverride = null) =>
-      colorIndexOverride = null,
+        getConnectionColor(
-      backgroundStyleOverride = null,
+          $connections,
-      useConnectionFallbackOverride = null
+          $cloudConnectionsStore,
-    ) =>
+          dbid,
-      getConnectionColor(
+          themeType ?? $themeDef?.themeType,
-        $connections,
+          colorIndexOverride ?? colorIndex,
-        dbid,
+          backgroundStyleOverride ?? backgroundStyle,
-        themeType ?? $themeDef?.themeType,
+          useConnectionFallbackOverride ?? useConnectionFallback
-        colorIndexOverride ?? colorIndex,
+        )
-        backgroundStyleOverride ?? backgroundStyle,
+  );
-        useConnectionFallbackOverride ?? useConnectionFallback
+}
-      )
+
+export function useCloudContentColorFactory(colorIndex, themeType = null, backgroundStyle = false) {
+  const contentList = useCloudContentList();
+  return derived(
+    [contentList, currentThemeDefinition],
+    ([$contentList, $themeDef]) =>
+      (idpack, colorIndexOverride = null, backgroundStyleOverride = null) =>
+        getCloudContentColor(
+          $contentList,
+          idpack,
+          themeType ?? $themeDef?.themeType,
+          colorIndexOverride ?? colorIndex,
+          backgroundStyleOverride ?? backgroundStyle
+        )
   );
 }

packages/web/src/widgets/PrivateCloudWidget.svelte

@@ -34,12 +34,15 @@
   import ConfirmModal from '../modals/ConfirmModal.svelte';
   import { showSnackbarInfo } from '../utility/snackbar';
   import { isProApp } from '../utility/proTools';
+  import { useCloudContentColorFactory, useConnectionColorFactory } from '../utility/useConnectionColor';
 
   let filter = '';
   let domSqlObjectList = null;
 
   const cloudContentList = useCloudContentList();
   const serverStatus = useServerStatus();
+  const cloudContentColorFactory = useCloudContentColorFactory(3);
+  const connectionColorFactory = useConnectionColorFactory(3);
 
   $: emptyCloudContent = ($cloudContentList || []).filter(x => !x.items?.length).map(x => x.folid);
   $: cloudContentFlat = _.sortBy(
@@ -240,6 +243,8 @@
         }}
         passProps={{
           onFocusSqlObjectList: () => domSqlObjectList.focus(),
+          cloudContentColorFactory: $cloudContentColorFactory,
+          connectionColorFactory: $connectionColorFactory,
         }}
         groupContextMenu={createGroupContextMenu}
       />