tidy(ui): organize layer components

invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx

@@ -1,12 +1,11 @@
 import { Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import CALayerOpacity from 'features/controlLayers/components/CALayerOpacity';
 import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerMenu } from 'features/controlLayers/components/LayerMenu';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
+import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
+import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
+import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
+import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import {
   isControlAdapterLayer,
   layerSelected,
@@ -15,11 +14,13 @@ import {
 import { memo, useCallback, useMemo } from 'react';
 import { assert } from 'tsafe';
 
+import CALayerOpacity from './CALayerOpacity';
+
 type Props = {
   layerId: string;
 };
 
-export const CALayerListItem = memo(({ layerId }: Props) => {
+export const CALayer = memo(({ layerId }: Props) => {
   const dispatch = useAppDispatch();
   const selector = useMemo(
     () =>
@@ -68,4 +69,4 @@ export const CALayerListItem = memo(({ layerId }: Props) => {
   );
 });
 
-CALayerListItem.displayName = 'CALayerListItem';
+CALayer.displayName = 'CALayer';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx

@@ -4,10 +4,10 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
-import { CALayerListItem } from 'features/controlLayers/components/CALayerListItem';
+import { CALayer } from 'features/controlLayers/components/CALayer/CALayer';
 import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
-import { IPLayerListItem } from 'features/controlLayers/components/IPLayerListItem';
-import { RGLayerListItem } from 'features/controlLayers/components/RGLayerListItem';
+import { IPALayer } from 'features/controlLayers/components/IPALayer/IPALayer';
+import { RGLayer } from 'features/controlLayers/components/RGLayer/RGLayer';
 import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import type { Layer } from 'features/controlLayers/store/types';
 import { partition } from 'lodash-es';
@@ -46,13 +46,13 @@ type LayerWrapperProps = {
 
 const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => {
   if (type === 'regional_guidance_layer') {
-    return <RGLayerListItem key={id} layerId={id} />;
+    return <RGLayer key={id} layerId={id} />;
   }
   if (type === 'control_adapter_layer') {
-    return <CALayerListItem key={id} layerId={id} />;
+    return <CALayer key={id} layerId={id} />;
   }
   if (type === 'ip_adapter_layer') {
-    return <IPLayerListItem key={id} layerId={id} />;
+    return <IPALayer key={id} layerId={id} />;
   }
 });
 

invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx

@@ -2,9 +2,9 @@ import { Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
+import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
+import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
+import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useMemo } from 'react';
 import { assert } from 'tsafe';
@@ -13,7 +13,7 @@ type Props = {
   layerId: string;
 };
 
-export const IPLayerListItem = memo(({ layerId }: Props) => {
+export const IPALayer = memo(({ layerId }: Props) => {
   const selector = useMemo(
     () =>
       createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
@@ -44,4 +44,4 @@ export const IPLayerListItem = memo(({ layerId }: Props) => {
   );
 });
 
-IPLayerListItem.displayName = 'IPLayerListItem';
+IPALayer.displayName = 'IPALayer';

invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerMenu.tsx

@@ -1,8 +1,8 @@
 import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { stopPropagation } from 'common/util/stopPropagation';
-import { LayerMenuArrangeActions } from 'features/controlLayers/components/LayerMenuArrangeActions';
-import { LayerMenuRGActions } from 'features/controlLayers/components/LayerMenuRGActions';
+import { LayerMenuArrangeActions } from 'features/controlLayers/components/LayerCommon/LayerMenuArrangeActions';
+import { LayerMenuRGActions } from 'features/controlLayers/components/LayerCommon/LayerMenuRGActions';
 import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks';
 import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useCallback } from 'react';

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx

@@ -2,15 +2,11 @@ import { Badge, Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { rgbColorToString } from 'features/canvas/util/colorToString';
-import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
-import { LayerMenu } from 'features/controlLayers/components/LayerMenu';
-import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
-import { RGLayerColorPicker } from 'features/controlLayers/components/RGLayerColorPicker';
-import { RGLayerIPAdapterList } from 'features/controlLayers/components/RGLayerIPAdapterList';
-import { RGLayerNegativePrompt } from 'features/controlLayers/components/RGLayerNegativePrompt';
-import { RGLayerPositivePrompt } from 'features/controlLayers/components/RGLayerPositivePrompt';
-import RGLayerSettingsPopover from 'features/controlLayers/components/RGLayerSettingsPopover';
+import { AddPromptButtons } from 'features/controlLayers/components/AddPromptButtons';
+import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
+import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
+import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
+import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import {
   isRegionalGuidanceLayer,
   layerSelected,
@@ -20,13 +16,17 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { assert } from 'tsafe';
 
-import { AddPromptButtons } from './AddPromptButtons';
+import { RGLayerColorPicker } from './RGLayerColorPicker';
+import { RGLayerIPAdapterList } from './RGLayerIPAdapterList';
+import { RGLayerNegativePrompt } from './RGLayerNegativePrompt';
+import { RGLayerPositivePrompt } from './RGLayerPositivePrompt';
+import RGLayerSettingsPopover from './RGLayerSettingsPopover';
 
 type Props = {
   layerId: string;
 };
 
-export const RGLayerListItem = memo(({ layerId }: Props) => {
+export const RGLayer = memo(({ layerId }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const selector = useMemo(
@@ -81,4 +81,4 @@ export const RGLayerListItem = memo(({ layerId }: Props) => {
   );
 });
 
-RGLayerListItem.displayName = 'RGLayerListItem';
+RGLayer.displayName = 'RGLayer';

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton';
+import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayer/RGLayerPromptDeleteButton';
 import { useLayerNegativePrompt } from 'features/controlLayers/hooks/layerStateHooks';
 import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx

@@ -1,6 +1,6 @@
 import { Box, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton';
+import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayer/RGLayerPromptDeleteButton';
 import { useLayerPositivePrompt } from 'features/controlLayers/hooks/layerStateHooks';
 import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerSettingsPopover.tsx

@@ -10,7 +10,7 @@ import {
   PopoverTrigger,
 } from '@invoke-ai/ui-library';
 import { stopPropagation } from 'common/util/stopPropagation';
-import { RGLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RGLayerAutoNegativeCheckbox';
+import { RGLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RGLayer/RGLayerAutoNegativeCheckbox';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiGearSixBold } from 'react-icons/pi';