From 44af872a494aed7fd6401eceefbb84ea025e87a8 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 25 Oct 2024 22:51:14 -0600
Subject: [PATCH 1/2] feat(regions): :sparkles: highlight some focused regions

---
 .../components/CanvasLayersPanelContent.tsx    | 18 +++++++++++++++---
 .../components/CanvasMainPanelContent.tsx      |  6 +++++-
 .../gallery/components/GalleryPanelContent.tsx | 17 +++++++++++++++--
 .../components/ImageViewer/ImageViewer.tsx     |  5 ++++-
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
index 20e27c75601..c5b65fc3158 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
@@ -1,6 +1,6 @@
 import { Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { CanvasAddEntityButtons } from 'features/controlLayers/components/CanvasAddEntityButtons';
 import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityList';
 import { EntityListSelectedEntityActionBar } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar';
@@ -11,11 +11,23 @@ export const CanvasLayersPanelContent = memo(() => {
   const hasEntities = useAppSelector(selectHasEntities);
   const layersPanelFocusRef = useRef<HTMLDivElement>(null);
   useFocusRegion('layers', layersPanelFocusRef);
+  const isRegionFocused = useIsRegionFocused('layers');
 
   return (
-    <Flex ref={layersPanelFocusRef} flexDir="column" gap={2} w="full" h="full">
+    <Flex
+      ref={layersPanelFocusRef}
+      flexDir="column"
+      gap={2}
+      w="full"
+      h="full"
+      borderWidth={1}
+      borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
+      borderRadius="base"
+      p={1}
+      marginTop={-1}
+    >
       <EntityListSelectedEntityActionBar />
-      <Divider py={0} />
+      <Divider py={0} borderColor="base.600" />
       {!hasEntities && <CanvasAddEntityButtons />}
       {hasEntities && <CanvasEntityList />}
     </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
index b66c0d8367c..d07cc826bad 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
@@ -1,6 +1,6 @@
 import { ContextMenu, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
 import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
 import { CanvasAlertsSendingToGallery } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
@@ -42,6 +42,7 @@ export const CanvasMainPanelContent = memo(() => {
   }, []);
 
   useFocusRegion('canvas', ref);
+  const isRegionFocused = useIsRegionFocused('canvas');
 
   return (
     <Flex
@@ -55,6 +56,9 @@ export const CanvasMainPanelContent = memo(() => {
       gap={2}
       alignItems="center"
       justifyContent="center"
+      borderWidth={1}
+      p={1}
+      borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
     >
       <CanvasManagerProviderGate>
         <CanvasToolbar />
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
index 66a03606446..a5c9d2a8aa5 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Collapse, Divider, Flex, IconButton, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
 import { selectBoardSearchText } from 'features/gallery/store/gallerySelectors';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
@@ -28,6 +28,7 @@ const GalleryPanelContent = () => {
   const imperativePanelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const galleryPanelFocusRef = useRef<HTMLDivElement>(null);
   useFocusRegion('gallery', galleryPanelFocusRef);
+  const isRegionFocused = useIsRegionFocused('gallery');
 
   const boardsListPanelOptions = useMemo<UsePanelOptions>(
     () => ({
@@ -50,7 +51,19 @@ const GalleryPanelContent = () => {
   }, [boardSearchText.length, boardSearchDisclosure, boardsListPanel, dispatch]);
 
   return (
-    <Flex ref={galleryPanelFocusRef} position="relative" flexDirection="column" h="full" w="full" tabIndex={-1}>
+    <Flex
+      ref={galleryPanelFocusRef}
+      position="relative"
+      flexDirection="column"
+      h="full"
+      w="full"
+      tabIndex={-1}
+      p={1}
+      marginTop={-1}
+      borderWidth={1}
+      borderRadius="base"
+      borderColor={isRegionFocused ? 'invokeBlue.300' : 'transparent'}
+    >
       <Flex alignItems="center" justifyContent="space-between" w="full">
         <Flex flexGrow={1} flexBasis={0}>
           <Button
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index 30a1afb76b6..ab25b2f32f7 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useFocusRegion } from 'common/hooks/focus';
+import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { CanvasAlertsSendingToCanvas } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo';
 import { CompareToolbar } from 'features/gallery/components/ImageViewer/CompareToolbar';
@@ -32,6 +32,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
   const [containerRef, containerDims] = useMeasure<HTMLDivElement>();
   const ref = useRef<HTMLDivElement>(null);
   useFocusRegion('viewer', ref, useFocusRegionOptions);
+  const isRegionFocused = useIsRegionFocused('viewer');
 
   return (
     <Flex
@@ -40,6 +41,8 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
       layerStyle="first"
       p={2}
       borderRadius="base"
+      borderWidth={1}
+      borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
       position="absolute"
       flexDirection="column"
       top={0}

From 66d215cc2fad64dcdc663980dc4a71d2577ad1b3 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Fri, 25 Oct 2024 23:04:06 -0600
Subject: [PATCH 2/2] feat(regions): :lipstick: adjust adding and border
 transition

---
 .../controlLayers/components/CanvasLayersPanelContent.tsx      | 3 ++-
 .../controlLayers/components/CanvasMainPanelContent.tsx        | 3 ++-
 .../src/features/gallery/components/GalleryPanelContent.tsx    | 3 ++-
 .../features/gallery/components/ImageViewer/ImageViewer.tsx    | 1 +
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
index c5b65fc3158..90c13d87c14 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasLayersPanelContent.tsx
@@ -23,8 +23,9 @@ export const CanvasLayersPanelContent = memo(() => {
       borderWidth={1}
       borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
       borderRadius="base"
-      p={1}
+      p={2}
       marginTop={-1}
+      transition="border-color 0.1s"
     >
       <EntityListSelectedEntityActionBar />
       <Divider py={0} borderColor="base.600" />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
index d07cc826bad..efa3f9df718 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
@@ -57,8 +57,9 @@ export const CanvasMainPanelContent = memo(() => {
       alignItems="center"
       justifyContent="center"
       borderWidth={1}
-      p={1}
+      p={2}
       borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
+      transition="border-color 0.1s"
     >
       <CanvasManagerProviderGate>
         <CanvasToolbar />
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
index a5c9d2a8aa5..1263fec4ea0 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
@@ -58,11 +58,12 @@ const GalleryPanelContent = () => {
       h="full"
       w="full"
       tabIndex={-1}
-      p={1}
+      p={2}
       marginTop={-1}
       borderWidth={1}
       borderRadius="base"
       borderColor={isRegionFocused ? 'invokeBlue.300' : 'transparent'}
+      transition="border-color 0.1s"
     >
       <Flex alignItems="center" justifyContent="space-between" w="full">
         <Flex flexGrow={1} flexBasis={0}>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index ab25b2f32f7..a4639c0d6a8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -52,6 +52,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
       rowGap={4}
       alignItems="center"
       justifyContent="center"
+      transition="border-color 0.1s"
     >
       {hasImageToCompare && <CompareToolbar />}
       {!hasImageToCompare && <ViewerToolbar closeButton={closeButton} />}