feat(ui): canvas entity list headers

invokeai/frontend/web/public/locales/en.json

@@ -1668,6 +1668,10 @@
         "raster": "Raster",
         "rasterLayer": "$t(controlLayers.raster) $t(unifiedCanvas.layer)",
         "opacity": "Opacity",
+        "regionalGuidance_withCount": "Regional Guidance ({{count}})",
+        "controlAdapters_withCount": "Control Adapters ({{count}})",
+        "layers_withCount": "Raster Layers ({{count}})",
+        "ipAdapters_withCount": "IP Adapters ({{count}})",
         "globalControlAdapter": "Global $t(controlnet.controlAdapter_one)",
         "globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
         "globalIPAdapter": "Global $t(common.ipAdapter)",

invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx

@@ -1,16 +1,22 @@
-/* eslint-disable i18next/no-literal-string */
+import { Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
   return canvasV2.controlAdapters.entities.map(mapId).reverse();
 });
 
 export const CAEntityList = memo(() => {
+  const { t } = useTranslation();
+  const isTypeSelected = useAppSelector((s) =>
+    Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'control_adapter')
+  );
+
   const caIds = useAppSelector(selectEntityIds);
 
   if (caIds.length === 0) {
@@ -20,6 +26,13 @@ export const CAEntityList = memo(() => {
   if (caIds.length > 0) {
     return (
       <>
+        <Text
+          color={isTypeSelected ? 'base.100' : 'base.300'}
+          fontWeight={isTypeSelected ? 'semibold' : 'normal'}
+          userSelect="none"
+        >
+          {t('controlLayers.controlAdapters_withCount', { count: caIds.length })}
+        </Text>
         {caIds.map((id) => (
           <CA key={id} id={id} />
         ))}

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx

@@ -1,16 +1,20 @@
 /* eslint-disable i18next/no-literal-string */
+import { Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
   return canvasV2.ipAdapters.entities.map(mapId).reverse();
 });
 
 export const IPAEntityList = memo(() => {
+  const { t } = useTranslation();
+  const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'ip_adapter'));
   const ipaIds = useAppSelector(selectEntityIds);
 
   if (ipaIds.length === 0) {
@@ -20,6 +24,13 @@ export const IPAEntityList = memo(() => {
   if (ipaIds.length > 0) {
     return (
       <>
+        <Text
+          userSelect="none"
+          color={isTypeSelected ? 'base.100' : 'base.300'}
+          fontWeight={isTypeSelected ? 'semibold' : 'normal'}
+        >
+          {t('controlLayers.ipAdapters_withCount', { count: ipaIds.length })}
+        </Text>
         {ipaIds.map((id) => (
           <IPA key={id} id={id} />
         ))}

invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx

@@ -1,16 +1,19 @@
-/* eslint-disable i18next/no-literal-string */
+import { Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { Layer } from 'features/controlLayers/components/Layer/Layer';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
   return canvasV2.layers.entities.map(mapId).reverse();
 });
 
 export const LayerEntityList = memo(() => {
+  const { t } = useTranslation();
+  const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'layer'));
   const layerIds = useAppSelector(selectEntityIds);
 
   if (layerIds.length === 0) {
@@ -20,6 +23,13 @@ export const LayerEntityList = memo(() => {
   if (layerIds.length > 0) {
     return (
       <>
+        <Text
+          color={isTypeSelected ? 'base.100' : 'base.300'}
+          fontWeight={isTypeSelected ? 'semibold' : 'normal'}
+          userSelect="none"
+        >
+          {t('controlLayers.layers_withCount', { count: layerIds.length })}
+        </Text>
         {layerIds.map((id) => (
           <Layer key={id} id={id} />
         ))}

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx

@@ -1,16 +1,22 @@
-/* eslint-disable i18next/no-literal-string */
+import { Text } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
 import { mapId } from 'features/controlLayers/konva/util';
 import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
   return canvasV2.regions.entities.map(mapId).reverse();
 });
 
 export const RGEntityList = memo(() => {
+  const { t } = useTranslation();
+  const isTypeSelected = useAppSelector((s) =>
+    Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'regional_guidance')
+  );
+
   const rgIds = useAppSelector(selectEntityIds);
 
   if (rgIds.length === 0) {
@@ -20,6 +26,13 @@ export const RGEntityList = memo(() => {
   if (rgIds.length > 0) {
     return (
       <>
+        <Text
+          color={isTypeSelected ? 'base.100' : 'base.300'}
+          fontWeight={isTypeSelected ? 'semibold' : 'normal'}
+          userSelect="none"
+        >
+          {t('controlLayers.regionalGuidance_withCount', { count: rgIds.length })}
+        </Text>
         {rgIds.map((id) => (
           <RG key={id} id={id} />
         ))}