revert(ui): remove floating viewer

There are unresolved platform-specific issues with this component, and its utility is debatable.

Should be easy to just revert this commit to add it back in the future if desired.

Author: psychedelicious

invokeai/frontend/web/package.json

@@ -89,7 +89,6 @@
     "react-konva": "^18.2.10",
     "react-redux": "9.1.2",
     "react-resizable-panels": "^2.0.19",
-    "react-rnd": "^10.4.10",
     "react-select": "5.8.0",
     "react-use": "^17.5.0",
     "react-virtuoso": "^4.7.10",

invokeai/frontend/web/pnpm-lock.yaml

@@ -12,7 +12,6 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
-import { FloatingImageViewer } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
@@ -97,7 +96,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <DynamicPromptsModal />
       <Toaster />
       <PreselectedImage selectedImage={selectedImage} />
-      <FloatingImageViewer />
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/app/components/App.tsx

@@ -24,7 +24,6 @@ const initialGalleryState: GalleryState = {
   limit: INITIAL_IMAGE_LIMIT,
   offset: 0,
   isImageViewerOpen: false,
-  isFloatingImageViewerOpen: false,
 };
 
 export const gallerySlice = createSlice({
@@ -82,9 +81,6 @@ export const gallerySlice = createSlice({
     isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
       state.isImageViewerOpen = action.payload;
     },
-    isFloatingImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
-      state.isFloatingImageViewerOpen = action.payload;
-    },
   },
   extraReducers: (builder) => {
     builder.addCase(setActiveTab, (state) => {
@@ -129,7 +125,6 @@ export const {
   moreImagesLoaded,
   alwaysShowImageSizeBadgeChanged,
   isImageViewerOpenChanged,
-  isFloatingImageViewerOpenChanged,
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(

invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx

@@ -21,5 +21,4 @@ export type GalleryState = {
   limit: number;
   alwaysShowImageSizeBadge: boolean;
   isImageViewerOpen: boolean;
-  isFloatingImageViewerOpen: boolean;
 };

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -4,7 +4,6 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
-import { ToggleFloatingImageViewerButton } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
@@ -224,7 +223,6 @@ const InvokeTabs = () => {
         </TabList>
         <Spacer />
         <StatusIndicator />
-        <ToggleFloatingImageViewerButton />
         {customNavComponent ? customNavComponent : <SettingsMenu />}
       </Flex>
       <PanelGroup