fix(ui): ip adapter list item

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx

@@ -1,28 +1,34 @@
-import { useDisclosure } from '@invoke-ai/ui-library';
+import { Spacer, useDisclosure } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
-import { IPAHeader } from 'features/controlLayers/components/IPAdapter/IPAHeader';
+import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
+import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
+import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
+import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
 import { IPASettings } from 'features/controlLayers/components/IPAdapter/IPASettings';
-import { entitySelected } from 'features/controlLayers/store/canvasV2Slice';
+import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
-import { memo, useCallback } from 'react';
+import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo, useMemo } from 'react';
 
 type Props = {
   id: string;
 };
 
 export const IPA = memo(({ id }: Props) => {
-  const dispatch = useAppDispatch();
+  const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'ip_adapter' }), [id]);
-  const isSelected = useAppSelector((s) => s.canvasV2.selectedEntityIdentifier?.id === id);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
-  const onSelect = useCallback(() => {
-    dispatch(entitySelected({ entityIdentifier: { id, type: 'ip_adapter' } }));
-  }, [dispatch, id]);
 
   return (
-    <CanvasEntityContainer isSelected={isSelected} onSelect={onSelect}>
+    <EntityIdentifierContext.Provider value={entityIdentifier}>
-      <IPAHeader id={id} isSelected={isSelected} onToggleVisibility={onToggle} />
+      <CanvasEntityContainer>
-      {isOpen && <IPASettings id={id} />}
+        <CanvasEntityHeader onToggle={onToggle}>
-    </CanvasEntityContainer>
+          <CanvasEntityEnabledToggle />
+          <CanvasEntityTitle />
+          <Spacer />
+          <CanvasEntityDeleteButton />
+        </CanvasEntityHeader>
+        {isOpen && <IPASettings />}
+      </CanvasEntityContainer>
+    </EntityIdentifierContext.Provider>
   );
 });
 

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx

@@ -1,37 +1,21 @@
 import { Spacer } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
 import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
 import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
-import { ipaDeleted, ipaIsEnabledToggled } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
-import { selectIPAOrThrow } from 'features/controlLayers/store/ipAdaptersReducers';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 
 type Props = {
-  id: string;
-  isSelected: boolean;
   onToggleVisibility: () => void;
 };
 
-export const IPAHeader = memo(({ id, isSelected, onToggleVisibility }: Props) => {
+export const IPAHeader = memo(({ onToggleVisibility }: Props) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const isEnabled = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id).isEnabled);
-  const onToggleIsEnabled = useCallback(() => {
-    dispatch(ipaIsEnabledToggled({ id }));
-  }, [dispatch, id]);
-  const onDelete = useCallback(() => {
-    dispatch(ipaDeleted({ id }));
-  }, [dispatch, id]);
-
   return (
     <CanvasEntityHeader onToggle={onToggleVisibility}>
-      <CanvasEntityEnabledToggle isEnabled={isEnabled} onToggle={onToggleIsEnabled} />
+      <CanvasEntityEnabledToggle />
-      <CanvasEntityTitle title={t('controlLayers.ipAdapter')} isSelected={isSelected} />
+      <CanvasEntityTitle />
       <Spacer />
-      <CanvasEntityDeleteButton onDelete={onDelete} />
+      <CanvasEntityDeleteButton />
     </CanvasEntityHeader>
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx

@@ -4,6 +4,7 @@ import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginE
 import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
 import { Weight } from 'features/controlLayers/components/common/Weight';
 import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
   ipaBeginEndStepPctChanged,
   ipaCLIPVisionModelChanged,
@@ -21,12 +22,9 @@ import type { ImageDTO, IPAdapterModelConfig, IPALayerImagePostUploadAction } fr
 import { IPAImagePreview } from './IPAImagePreview';
 import { IPAModelCombobox } from './IPAModelCombobox';
 
-type Props = {
+export const IPASettings = memo(() => {
-  id: string;
-};
-
-export const IPASettings = memo(({ id }: Props) => {
   const dispatch = useAppDispatch();
+  const { id } = useEntityIdentifierContext();
   const ipAdapter = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id));
 
   const onChangeBeginEndStepPct = useCallback(