From 2c32e2e5c14f93789b23f4403fa19043ce79647d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 3 Jul 2024 16:10:49 +1000
Subject: [PATCH] feat(ui): updated layer list component styling

---
 invokeai/frontend/web/public/locales/en.json    |  7 ++++++-
 .../components/Layer/LayerHeader.tsx            |  8 ++++++--
 .../components/common/CanvasEntityContainer.tsx | 17 ++++++++---------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 9b2afeccd3..f7c6bb7cc0 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1674,12 +1674,17 @@
         "globalIPAdapterLayer": "Global $t(common.ipAdapter) $t(unifiedCanvas.layer)",
         "globalInitialImage": "Global Initial Image",
         "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
+        "inpaintMask": "Inpaint Mask",
+        "layer": "Layer",
         "opacityFilter": "Opacity Filter",
         "clearProcessor": "Clear Processor",
         "resetProcessor": "Reset Processor to Defaults",
         "noLayersAdded": "No Layers Added",
         "layers_one": "Layer",
-        "layers_other": "Layers"
+        "layers_other": "Layers",
+        "objects_zero": "empty",
+        "objects_one": "{{count}} object",
+        "objects_other": "{{count}} objects"
     },
     "upscaling": {
         "upscale": "Upscale",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx
index c1f5606eba..53a8d0dbfa 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx
@@ -7,7 +7,7 @@ import { CanvasEntityTitle } from 'features/controlLayers/components/common/Canv
 import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerActionsMenu';
 import { layerDeleted, layerIsEnabledToggled } from 'features/controlLayers/store/canvasV2Slice';
 import { selectLayerOrThrow } from 'features/controlLayers/store/layersReducers';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { LayerOpacity } from './LayerOpacity';
@@ -21,17 +21,21 @@ export const LayerHeader = memo(({ id, onToggleVisibility }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isEnabled = useAppSelector((s) => selectLayerOrThrow(s.canvasV2, id).isEnabled);
+  const objectCount = useAppSelector((s) => selectLayerOrThrow(s.canvasV2, id).objects.length);
   const onToggleIsEnabled = useCallback(() => {
     dispatch(layerIsEnabledToggled({ id }));
   }, [dispatch, id]);
   const onDelete = useCallback(() => {
     dispatch(layerDeleted({ id }));
   }, [dispatch, id]);
+  const title = useMemo(() => {
+    return `${t('controlLayers.layer')} (${t('controlLayers.objects', { count: objectCount })})`;
+  }, [objectCount, t]);
 
   return (
     <CanvasEntityHeader onToggle={onToggleVisibility}>
       <CanvasEntityEnabledToggle isEnabled={isEnabled} onToggle={onToggleIsEnabled} />
-      <CanvasEntityTitle title={t('controlLayers.layer')} />
+      <CanvasEntityTitle title={title} />
       <Spacer />
       <LayerOpacity id={id} />
       <LayerActionsMenu id={id} />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
index 1cc7221831..9a244b697c 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
@@ -10,7 +10,7 @@ type Props = PropsWithChildren<{
 }>;
 
 export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorderColor, children }: Props) => {
-  const bg = useMemo(() => {
+  const borderColor = useMemo(() => {
     if (isSelected) {
       return selectedBorderColor ?? 'base.400';
     }
@@ -25,19 +25,18 @@ export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorde
 
   return (
     <Flex
-      position="relative"
-      gap={2}
+      flexDir="column"
+      w="full"
+      bg="base.850"
       onClick={_onSelect}
-      bg={bg}
-      px={2}
+      borderInlineStartWidth={5}
+      borderColor={borderColor}
+      opacity={isSelected ? 1 : 0.6}
       borderRadius="base"
-      py="1px"
       transitionProperty="all"
       transitionDuration="0.2s"
     >
-      <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
-        {children}
-      </Flex>
+      {children}
     </Flex>
   );
 });