From bbdbe36adaacd7073c84cbc6f420fa722fab7a09 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:58:14 +1000
Subject: [PATCH] tidy(ui): ViewerToggleMenu -> ViewerToggle

---
 .../controlLayers/components/ControlLayersToolbar.tsx      | 4 ++--
 .../gallery/components/ImageViewer/ViewerToggleMenu.tsx    | 7 +++++--
 .../gallery/components/ImageViewer/ViewerToolbar.tsx       | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index f5bea9877f..56133a5749 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -10,7 +10,7 @@ import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSetting
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCanvasUndoRedo } from 'features/controlLayers/hooks/useCanvasUndoRedo';
 import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
-import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
+import { ViewerToggle } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
 export const ControlLayersToolbar = memo(() => {
@@ -30,7 +30,7 @@ export const ControlLayersToolbar = memo(() => {
         <ToolFillColorPicker />
         <CanvasModeSwitcher />
         <CanvasSettingsPopover />
-        <ViewerToggleMenu />
+        <ViewerToggle />
       </Flex>
     </CanvasManagerProviderGate>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
index 78a57bf192..c37a460b12 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -1,10 +1,11 @@
 import { ButtonGroup, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold, PiPencilBold } from 'react-icons/pi';
 
-export const ViewerToggleMenu = () => {
+export const ViewerToggle = memo(() => {
   const { t } = useTranslation();
   const imageViewer = useImageViewer();
   useHotkeys('z', imageViewer.onToggle, [imageViewer]);
@@ -52,4 +53,6 @@ export const ViewerToggleMenu = () => {
       </ButtonGroup>
     </Flex>
   );
-};
+});
+
+ViewerToggle.displayName = 'ViewerToggle';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
index c0d772efab..0d00941077 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx
@@ -7,7 +7,7 @@ import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 
 import CurrentImageButtons from './CurrentImageButtons';
-import { ViewerToggleMenu } from './ViewerToggleMenu';
+import { ViewerToggle } from './ViewerToggleMenu';
 
 const selectShowToggle = createSelector(selectActiveTab, (tab) => {
   if (tab === 'upscaling' || tab === 'workflows') {
@@ -31,7 +31,7 @@ export const ViewerToolbar = memo(() => {
       </Flex>
       <Flex flex={1} justifyContent="center">
         <Flex gap={2} marginInlineStart="auto">
-          {showToggle && <ViewerToggleMenu />}
+          {showToggle && <ViewerToggle />}
         </Flex>
       </Flex>
     </Flex>