wip

Author: psychedelicious

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

@@ -4,16 +4,19 @@ import {
   MenuButton,
   MenuGroup,
   MenuItem,
+  MenuItemOption,
   MenuList,
+  MenuOptionGroup,
   Portal,
   useDisclosure,
   useGlobalMenuClose,
 } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import AboutModal from 'features/system/components/AboutModal/AboutModal';
 import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { discordLink, githubLink } from 'features/system/store/constants';
-import { $panels } from 'features/ui/components/AppContent';
+import { $advancedLayout, $panels, toggleAdvancedLayout } from 'features/ui/components/AppContent';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -38,6 +41,7 @@ const SettingsMenu = () => {
   const isBugLinkEnabled = useFeatureStatus('bugLink');
   const isDiscordLinkEnabled = useFeatureStatus('discordLink');
   const isGithubLinkEnabled = useFeatureStatus('githubLink');
+  const advancedLayout = useStore($advancedLayout);
 
   const resetLayout = useCallback(() => {
     $panels.get()?.resetLayout();
@@ -79,6 +83,15 @@ const SettingsMenu = () => {
           <MenuItem as="button" onClick={resetLayout} icon={<PiLayoutBold />}>
             Reset Layout
           </MenuItem>
+          <MenuOptionGroup
+            value={advancedLayout ? 'advanced' : 'simple'}
+            onChange={toggleAdvancedLayout}
+            title="Layout"
+            type="radio"
+          >
+            <MenuItemOption value="simple">Simple</MenuItemOption>
+            <MenuItemOption value="advanced">Advanced</MenuItemOption>
+          </MenuOptionGroup>
           <MenuGroup title={t('common.settingsLabel')}>
             <HotkeysModal>
               <MenuItem as="button" icon={<PiKeyboardBold />}>