chore(ui): lint (circular dependency)

Had to shuffle around the canvas right panel tabs state.

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx

@@ -12,9 +12,9 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useBoolean } from 'common/hooks/useBoolean';
 import {
-  setRightPanelTabToGallery,
-  setRightPanelTabToLayers,
-} from 'features/controlLayers/components/CanvasRightPanel';
+  selectCanvasRightPanelGalleryTab,
+  selectCanvasRightPanelLayersTab,
+} from 'features/controlLayers/store/ephemeral';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination';
 import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice';
@@ -29,7 +29,7 @@ const ActivateImageViewerButton = (props: PropsWithChildren) => {
   const imageViewer = useImageViewer();
   const onClick = useCallback(() => {
     imageViewer.open();
-    setRightPanelTabToGallery();
+    selectCanvasRightPanelGalleryTab();
   }, [imageViewer]);
   return (
     <Button onClick={onClick} size="sm" variant="link" color="base.50">
@@ -69,7 +69,7 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
   const imageViewer = useImageViewer();
   const onClick = useCallback(() => {
     dispatch(setActiveTab('canvas'));
-    setRightPanelTabToLayers();
+    selectCanvasRightPanelLayersTab();
     imageViewer.close();
   }, [dispatch, imageViewer]);
   return (

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

@@ -4,35 +4,34 @@ import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { CanvasLayersPanelContent } from 'features/controlLayers/components/CanvasLayersPanelContent';
+import {
+  $canvasRightPanelTabIndex,
+  selectCanvasRightPanelGalleryTab,
+  selectCanvasRightPanelLayersTab,
+} from 'features/controlLayers/store/ephemeral';
 import { selectEntityCountActive } from 'features/controlLayers/store/selectors';
 import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { atom, computed } from 'nanostores';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
-const $tabIndex = atom(0);
-export const $canvasRightPanelTab = computed($tabIndex, (index) => (index === 0 ? 'layers' : 'gallery'));
-export const setRightPanelTabToLayers = () => $tabIndex.set(0);
-export const setRightPanelTabToGallery = () => $tabIndex.set(1);
-
 export const CanvasRightPanel = memo(() => {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
-  const tabIndex = useStore($tabIndex);
+  const tabIndex = useStore($canvasRightPanelTabIndex);
   useScopeOnFocus('gallery', ref);
   const imageViewer = useImageViewer();
   const onClickViewerToggleButton = useCallback(() => {
-    if ($tabIndex.get() !== 1) {
-      $tabIndex.set(1);
+    if ($canvasRightPanelTabIndex.get() !== 1) {
+      $canvasRightPanelTabIndex.set(1);
     }
     imageViewer.toggle();
   }, [imageViewer]);
   useHotkeys('z', imageViewer.toggle);
 
   return (
-    <Tabs index={tabIndex} onChange={$tabIndex.set} w="full" h="full" display="flex" flexDir="column">
+    <Tabs index={tabIndex} onChange={$canvasRightPanelTabIndex.set} w="full" h="full" display="flex" flexDir="column">
       <TabList alignItems="center">
         <PanelTabs />
         <Spacer />
@@ -63,7 +62,7 @@ const PanelTabs = memo(() => {
   const onOnMouseOverLayersTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToLayers();
+        selectCanvasRightPanelLayersTab();
       }
     }, 300);
   }, [dndCtx.active]);
@@ -71,7 +70,7 @@ const PanelTabs = memo(() => {
   const onOnMouseOverGalleryTab = useCallback(() => {
     tabTimeout.current = window.setTimeout(() => {
       if (dndCtx.active) {
-        setRightPanelTabToGallery();
+        selectCanvasRightPanelGalleryTab();
       }
     }, 300);
   }, [dndCtx.active]);

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx

@@ -1,7 +1,7 @@
 import { $alt, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
-import { $canvasManager } from 'features/controlLayers/store/canvasSlice';
+import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';