From 52e7daffe706eea56f01b74c9f9b118e93238237 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 12 Apr 2024 18:46:31 +1000
Subject: [PATCH] feat(ui): selected layer styling

---
 invokeai/frontend/web/public/locales/en.json       |  3 ++-
 .../regionalPrompts/components/LayerListItem.tsx   | 14 +++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 7470d77390..12db155dc0 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -136,7 +136,8 @@
         "red": "Red",
         "green": "Green",
         "blue": "Blue",
-        "alpha": "Alpha"
+        "alpha": "Alpha",
+        "selected": "Selected"
     },
     "controlnet": {
         "controlAdapter_one": "Control Adapter",
diff --git a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerListItem.tsx b/invokeai/frontend/web/src/features/regionalPrompts/components/LayerListItem.tsx
index 6c3a9ac807..36b34d642c 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/components/LayerListItem.tsx
+++ b/invokeai/frontend/web/src/features/regionalPrompts/components/LayerListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spacer } from '@invoke-ai/ui-library';
+import { Flex, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { rgbColorToString } from 'features/canvas/util/colorToString';
 import { LayerColorPicker } from 'features/regionalPrompts/components/LayerColorPicker';
@@ -7,6 +7,7 @@ import { LayerVisibilityToggle } from 'features/regionalPrompts/components/Layer
 import { RegionalPromptsPrompt } from 'features/regionalPrompts/components/RegionalPromptsPrompt';
 import { layerSelected } from 'features/regionalPrompts/store/regionalPromptsSlice';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   id: string;
@@ -14,6 +15,8 @@ type Props = {
 
 export const LayerListItem = ({ id }: Props) => {
   const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const selectedLayer = useAppSelector((s) => s.regionalPrompts.selectedLayer);
   const color = useAppSelector((s) => {
     const color = s.regionalPrompts.layers.find((l) => l.id === id)?.color;
     if (color) {
@@ -26,12 +29,17 @@ export const LayerListItem = ({ id }: Props) => {
     dispatch(layerSelected(id));
   }, [dispatch, id]);
   return (
-    <Flex gap={2} onClickCapture={onClickCapture} bg={color} borderRadius="base" p="1px" ps={2}>
+    <Flex gap={2} onClickCapture={onClickCapture} bg={color} borderRadius="base" p="1px" ps={3}>
       <Flex flexDir="column" gap={2} w="full" bg="base.850" borderRadius="base" p={2}>
-        <Flex gap={2}>
+        <Flex gap={2} alignItems="center">
           <LayerColorPicker id={id} />
           <LayerVisibilityToggle id={id} />
           <Spacer />
+          {selectedLayer === id && (
+            <Text color="base.300" fontWeight="semibold" pe={2}>
+              {t('common.selected')}
+            </Text>
+          )}
           <LayerMenu id={id} />
         </Flex>
         <RegionalPromptsPrompt layerId={id} />