Feat/focused region highlight

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,24 @@ 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={2}
+      marginTop={-1}
+      transition="border-color 0.1s"
+    >
       <EntityListSelectedEntityActionBar />
-      <Divider py={0} />
+      <Divider py={0} borderColor="base.600" />
       {!hasEntities && <CanvasAddEntityButtons />}
       {hasEntities && <CanvasEntityList />}
     </Flex>

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,10 @@ export const CanvasMainPanelContent = memo(() => {
       gap={2}
       alignItems="center"
       justifyContent="center"
+      borderWidth={1}
+      p={2}
+      borderColor={isRegionFocused ? 'blue.300' : 'transparent'}
+      transition="border-color 0.1s"
     >
       <CanvasManagerProviderGate>
         <CanvasToolbar />

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,20 @@ 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={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}>
           <Button

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}
@@ -49,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} />}