From 735fc276e5c2e28542dba4a24c70f28d7c9c7b37 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 1 Jul 2025 14:01:01 +1000
Subject: [PATCH] tidy(ui): clean up focus/layout container

---
 .../AdvancedSession/AdvancedSession.tsx       | 182 ------------------
 .../ui/layouts/AutoLayoutPanelContainer.tsx}  |  39 +---
 2 files changed, 5 insertions(+), 216 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
 rename invokeai/frontend/web/src/{common/components/FocusRegionWrapper.tsx => features/ui/layouts/AutoLayoutPanelContainer.tsx} (51%)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
deleted file mode 100644
index bed3ef2bb6..0000000000
--- a/invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import {
-  ContextMenu,
-  Divider,
-  Flex,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuList,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
-import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
-import { CanvasAlertsPreserveMask } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsPreserveMask';
-import { CanvasAlertsSelectedEntityStatus } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus';
-import { CanvasContextMenuGlobalMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems';
-import { CanvasContextMenuSelectedEntityMenuItems } from 'features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems';
-import { CanvasDropArea } from 'features/controlLayers/components/CanvasDropArea';
-import { Filter } from 'features/controlLayers/components/Filters/Filter';
-import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
-import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
-import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject';
-import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
-import { GenerateLaunchpadPanel } from 'features/controlLayers/components/SimpleSession/GenerateLaunchpadPanel';
-import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList';
-import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
-import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
-import { Transform } from 'features/controlLayers/components/Transform/Transform';
-import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
-import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
-import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
-import { memo, useCallback } from 'react';
-import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
-
-const FOCUS_REGION_STYLES: SystemStyleObject = {
-  width: 'full',
-  height: 'full',
-};
-
-const MenuContent = memo(() => {
-  return (
-    <CanvasManagerProviderGate>
-      <MenuList>
-        <CanvasContextMenuSelectedEntityMenuItems />
-        <CanvasContextMenuGlobalMenuItems />
-      </MenuList>
-    </CanvasManagerProviderGate>
-  );
-});
-MenuContent.displayName = 'MenuContent';
-
-const canvasBgSx = {
-  position: 'relative',
-  w: 'full',
-  h: 'full',
-  borderRadius: 'base',
-  overflow: 'hidden',
-  bg: 'base.900',
-  '&[data-dynamic-grid="true"]': {
-    bg: 'base.850',
-  },
-};
-
-export const AdvancedSession = memo(({ id }: { id: string | null }) => {
-  const dynamicGrid = useAppSelector(selectDynamicGrid);
-  const showHUD = useAppSelector(selectShowHUD);
-
-  const renderMenu = useCallback(() => {
-    return <MenuContent />;
-  }, []);
-
-  return (
-    <Tabs w="full" h="full">
-      <TabList>
-        <Tab>Welcome</Tab>
-        <Tab>Workspace</Tab>
-        <Tab>Viewer</Tab>
-      </TabList>
-      <TabPanels w="full" h="full">
-        <TabPanel w="full" h="full" justifyContent="center">
-          <GenerateLaunchpadPanel />
-        </TabPanel>
-        <TabPanel w="full" h="full">
-          <FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
-            <Flex
-              tabIndex={-1}
-              borderRadius="base"
-              position="relative"
-              flexDirection="column"
-              height="full"
-              width="full"
-              gap={2}
-              alignItems="center"
-              justifyContent="center"
-              overflow="hidden"
-            >
-              <CanvasManagerProviderGate>
-                <CanvasToolbar />
-              </CanvasManagerProviderGate>
-              <Divider />
-              <ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
-                {(ref) => (
-                  <Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
-                    <InvokeCanvasComponent />
-                    <CanvasManagerProviderGate>
-                      <Flex
-                        position="absolute"
-                        flexDir="column"
-                        top={1}
-                        insetInlineStart={1}
-                        pointerEvents="none"
-                        gap={2}
-                        alignItems="flex-start"
-                      >
-                        {showHUD && <CanvasHUD />}
-                        <CanvasAlertsSelectedEntityStatus />
-                        <CanvasAlertsPreserveMask />
-                        <CanvasAlertsInvocationProgress />
-                      </Flex>
-                      <Flex position="absolute" top={1} insetInlineEnd={1}>
-                        <Menu>
-                          <MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
-                          <MenuContent />
-                        </Menu>
-                      </Flex>
-                    </CanvasManagerProviderGate>
-                  </Flex>
-                )}
-              </ContextMenu>
-              {id !== null && (
-                <CanvasManagerProviderGate>
-                  <CanvasSessionContextProvider type="advanced" id={id}>
-                    <Flex
-                      position="absolute"
-                      flexDir="column"
-                      bottom={4}
-                      gap={2}
-                      align="center"
-                      justify="center"
-                      left={4}
-                      right={4}
-                    >
-                      <Flex position="relative" maxW="full" w="full" h={108}>
-                        <StagingAreaItemsList />
-                      </Flex>
-                      <Flex gap={2}>
-                        <StagingAreaToolbar />
-                      </Flex>
-                    </Flex>
-                  </CanvasSessionContextProvider>
-                </CanvasManagerProviderGate>
-              )}
-              <Flex position="absolute" bottom={4}>
-                <CanvasManagerProviderGate>
-                  <Filter />
-                  <Transform />
-                  <SelectObject />
-                </CanvasManagerProviderGate>
-              </Flex>
-              <CanvasManagerProviderGate>
-                <CanvasDropArea />
-              </CanvasManagerProviderGate>
-            </Flex>
-          </FocusRegionWrapper>
-        </TabPanel>
-        <TabPanel w="full" h="full">
-          <Flex flexDir="column" w="full" h="full">
-            <ViewerToolbar />
-            <ImageViewer />
-          </Flex>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-  );
-});
-AdvancedSession.displayName = 'AdvancedSession';
diff --git a/invokeai/frontend/web/src/common/components/FocusRegionWrapper.tsx b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
similarity index 51%
rename from invokeai/frontend/web/src/common/components/FocusRegionWrapper.tsx
rename to invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
index 1d0cd0fee9..3a3da6b80c 100644
--- a/invokeai/frontend/web/src/common/components/FocusRegionWrapper.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
@@ -1,18 +1,13 @@
-import { Box, type BoxProps, type SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, type SystemStyleObject } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { type FocusRegionName, useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
+import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import type { IDockviewPanelProps, IGridviewPanelProps } from 'dockview';
 import { selectSystemShouldEnableHighlightFocusedRegions } from 'features/system/store/systemSlice';
 import type { PanelParameters } from 'features/ui/layouts/auto-layout-context';
 import type { PropsWithChildren } from 'react';
-import { memo, useMemo, useRef } from 'react';
+import { memo, useRef } from 'react';
 
-interface FocusRegionWrapperProps extends BoxProps {
-  region: FocusRegionName;
-  focusOnMount?: boolean;
-}
-
-export const BASE_FOCUS_REGION_STYLES: SystemStyleObject = {
+const sx: SystemStyleObject = {
   position: 'relative',
   w: 'full',
   h: 'full',
@@ -32,30 +27,6 @@ export const BASE_FOCUS_REGION_STYLES: SystemStyleObject = {
   },
 };
 
-export const FocusRegionWrapper = memo((props: FocusRegionWrapperProps) => {
-  const { region, focusOnMount = false, sx: _sx, children, ...boxProps } = props;
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const sx = useMemo(() => ({ ...BASE_FOCUS_REGION_STYLES, ..._sx }), [_sx]);
-
-  const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions);
-
-  const options = useMemo(() => ({ focusOnMount }), [focusOnMount]);
-
-  useFocusRegion(region, ref, options);
-  const isFocused = useIsRegionFocused(region);
-  const isHighlighted = isFocused && shouldHighlightFocusedRegions;
-
-  return (
-    <Box ref={ref} tabIndex={-1} sx={sx} data-highlighted={isHighlighted} {...boxProps}>
-      {children}
-    </Box>
-  );
-});
-
-FocusRegionWrapper.displayName = 'FocusRegionWrapper';
-
 export const AutoLayoutPanelContainer = memo(
   (
     props:
@@ -71,7 +42,7 @@ export const AutoLayoutPanelContainer = memo(
     const isHighlighted = isFocused && shouldHighlightFocusedRegions;
 
     return (
-      <Box ref={ref} tabIndex={-1} sx={BASE_FOCUS_REGION_STYLES} data-highlighted={isHighlighted}>
+      <Box ref={ref} tabIndex={-1} sx={sx} data-highlighted={isHighlighted}>
         {props.children}
       </Box>
     );