feat(ui): remove floating panels, move all to resizable panels

There is a console error we can ignore when toggling gallery panel on canvas - this will be resolved in the next release of the resizable library

invokeai/frontend/web/src/features/system/components/SettingsModal/ResetWebUIButton.tsx

@@ -0,0 +1,82 @@
+import {
+  Flex,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
+import IAIButton from 'common/components/IAIButton';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  onSettingsModalClose: () => void;
+};
+
+const ResetWebUIButton = ({ onSettingsModalClose }: Props) => {
+  const { t } = useTranslation();
+  const [countdown, setCountdown] = useState(5);
+
+  const {
+    isOpen: isRefreshModalOpen,
+    onOpen: onRefreshModalOpen,
+    onClose: onRefreshModalClose,
+  } = useDisclosure();
+
+  const handleClickResetWebUI = useCallback(() => {
+    // Only remove our keys
+    Object.keys(window.localStorage).forEach((key) => {
+      if (
+        LOCALSTORAGE_KEYS.includes(key) ||
+        key.startsWith(LOCALSTORAGE_PREFIX)
+      ) {
+        localStorage.removeItem(key);
+      }
+    });
+    onSettingsModalClose();
+    onRefreshModalOpen();
+    setInterval(() => setCountdown((prev) => prev - 1), 1000);
+  }, [onSettingsModalClose, onRefreshModalOpen]);
+
+  useEffect(() => {
+    if (countdown <= 0) {
+      window.location.reload();
+    }
+  }, [countdown]);
+
+  return (
+    <>
+      <IAIButton colorScheme="error" onClick={handleClickResetWebUI}>
+        {t('settings.resetWebUI')}
+      </IAIButton>
+      <Modal
+        closeOnOverlayClick={false}
+        isOpen={isRefreshModalOpen}
+        onClose={onRefreshModalClose}
+        isCentered
+        closeOnEsc={false}
+      >
+        <ModalOverlay backdropFilter="blur(40px)" />
+        <ModalContent>
+          <ModalHeader />
+          <ModalBody>
+            <Flex justifyContent="center">
+              <Text fontSize="lg">
+                <Text>{t('settings.resetComplete')}</Text>
+                <Text>Reloading in {countdown}...</Text>
+              </Text>
+            </Flex>
+          </ModalBody>
+          <ModalFooter />
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default memo(ResetWebUIButton);

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -42,6 +42,7 @@ import {
   memo,
   useCallback,
   useEffect,
+  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LogLevelName } from 'roarr';
@@ -113,6 +114,7 @@ type SettingsModalProps = {
 const SettingsModal = ({ children, config }: SettingsModalProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const [countdown, setCountdown] = useState(3);
 
   const shouldShowBetaLayout = config?.shouldShowBetaLayout ?? true;
   const shouldShowDeveloperSettings =
@@ -179,8 +181,15 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     });
     onSettingsModalClose();
     onRefreshModalOpen();
+    setInterval(() => setCountdown((prev) => prev - 1), 1000);
   }, [onSettingsModalClose, onRefreshModalOpen]);
 
+  useEffect(() => {
+    if (countdown <= 0) {
+      window.location.reload();
+    }
+  }, [countdown]);
+
   const handleLogLevelChanged = useCallback(
     (v: string) => {
       dispatch(consoleLogLevelChanged(v as LogLevelName));
@@ -381,6 +390,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
         isOpen={isRefreshModalOpen}
         onClose={onRefreshModalClose}
         isCentered
+        closeOnEsc={false}
       >
         <ModalOverlay backdropFilter="blur(40px)" />
         <ModalContent>
@@ -388,7 +398,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
           <ModalBody>
             <Flex justifyContent="center">
               <Text fontSize="lg">
-                <Text>{t('settings.resetComplete')}</Text>
+                <Text>
+                  {t('settings.resetComplete')} Reloading in {countdown}...
+                </Text>
               </Text>
             </Flex>
           </ModalBody>