feat: ✨ consolidated app nav to settings & dropdown

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

@@ -1,32 +0,0 @@
-import { useColorMode } from '@chakra-ui/react';
-import IAIIconButton from 'common/components/IAIIconButton';
-import { useTranslation } from 'react-i18next';
-import { FaMoon, FaSun } from 'react-icons/fa';
-
-const ColorModeButton = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const { t } = useTranslation();
-
-  return (
-    <IAIIconButton
-      aria-label={
-        colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
-      }
-      tooltip={
-        colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
-      }
-      size="sm"
-      icon={
-        colorMode === 'dark' ? (
-          <FaSun fontSize={19} />
-        ) : (
-          <FaMoon fontSize={18} />
-        )
-      }
-      onClick={toggleColorMode}
-      variant="link"
-    />
-  );
-};
-
-export default ColorModeButton;

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

@@ -1,50 +0,0 @@
-import {
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
-  Tooltip,
-} from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { map } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
-import { IoLanguage } from 'react-icons/io5';
-import { LANGUAGES } from '../store/constants';
-import { languageSelector } from '../store/systemSelectors';
-import { languageChanged } from '../store/systemSlice';
-
-export default function LanguagePicker() {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const language = useAppSelector(languageSelector);
-
-  return (
-    <Menu closeOnSelect={false}>
-      <Tooltip label={t('common.languagePickerLabel')} hasArrow>
-        <MenuButton
-          as={IconButton}
-          icon={<IoLanguage />}
-          variant="link"
-          aria-label={t('common.languagePickerLabel')}
-          fontSize={22}
-          minWidth={8}
-        />
-      </Tooltip>
-      <MenuList>
-        <MenuOptionGroup value={language}>
-          {map(LANGUAGES, (languageName, l: keyof typeof LANGUAGES) => (
-            <MenuItemOption
-              key={l}
-              value={l}
-              onClick={() => dispatch(languageChanged(l))}
-            >
-              {languageName}
-            </MenuItemOption>
-          ))}
-        </MenuOptionGroup>
-      </MenuList>
-    </Menu>
-  );
-}

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

@@ -10,6 +10,7 @@ import {
   ModalOverlay,
   Text,
   useDisclosure,
+  useColorMode,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { VALID_LOG_LEVELS } from 'app/logging/logger';
@@ -46,6 +47,10 @@ import SettingSwitch from './SettingSwitch';
 import SettingsClearIntermediates from './SettingsClearIntermediates';
 import SettingsSchedulers from './SettingsSchedulers';
 import StyledFlex from './StyledFlex';
+import { useFeatureStatus } from '../../hooks/useFeatureStatus';
+import { LANGUAGES } from '../../store/constants';
+import { languageChanged } from '../../store/systemSlice';
+import { languageSelector } from '../../store/systemSelectors';
 
 const selector = createSelector(
   [stateSelector],
@@ -166,6 +171,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     [dispatch]
   );
 
+  const handleLanguageChanged = useCallback(
+    (l: string) => {
+      dispatch(languageChanged(l as keyof typeof LANGUAGES));
+    },
+    [dispatch]
+  );
+
   const handleLogToConsoleChanged = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       dispatch(shouldLogToConsoleChanged(e.target.checked));
@@ -180,6 +192,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     [dispatch]
   );
 
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  const isLocalizationEnabled =
+    useFeatureStatus('localization').isFeatureEnabled;
+  const language = useAppSelector(languageSelector);
+
   return (
     <>
       {cloneElement(children, {
@@ -225,6 +243,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
 
               <StyledFlex>
                 <Heading size="sm">{t('settings.ui')}</Heading>
+                <SettingSwitch
+                  label={t('common.darkMode')}
+                  isChecked={colorMode === 'dark'}
+                  onChange={toggleColorMode}
+                />
                 <SettingSwitch
                   label={t('settings.useSlidersForAll')}
                   isChecked={shouldUseSliders}
@@ -267,6 +290,16 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     onChange={handleToggleNodes}
                   />
                 )}
+                <IAIMantineSelect
+                  disabled={!isLocalizationEnabled}
+                  label={t('common.languagePickerLabel')}
+                  value={language}
+                  data={Object.entries(LANGUAGES).map(([value, label]) => ({
+                    value,
+                    label,
+                  }))}
+                  onChange={handleLanguageChanged}
+                />
               </StyledFlex>
 
               {shouldShowDeveloperSettings && (

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

@@ -1,28 +1,27 @@
-import { Flex, Spacer } from '@chakra-ui/react';
+import { Flex, MenuGroup, Spacer } from '@chakra-ui/react';
 import { memo } from 'react';
 import StatusIndicator from './StatusIndicator';
 
-import { Link } from '@chakra-ui/react';
+import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { useTranslation } from 'react-i18next';
-import { FaBug, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
+import { FaBug, FaDiscord, FaGithub, FaKeyboard, FaBars } from 'react-icons/fa';
 import { MdSettings } from 'react-icons/md';
 import { useFeatureStatus } from '../hooks/useFeatureStatus';
-import ColorModeButton from './ColorModeButton';
 import HotkeysModal from './HotkeysModal/HotkeysModal';
 import InvokeAILogoComponent from './InvokeAILogoComponent';
-import LanguagePicker from './LanguagePicker';
 import SettingsModal from './SettingsModal/SettingsModal';
 
 const SiteHeader = () => {
   const { t } = useTranslation();
 
-  const isLocalizationEnabled =
-    useFeatureStatus('localization').isFeatureEnabled;
   const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
   const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
   const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
 
+  const githubLink = 'http://github.com/invoke-ai/InvokeAI';
+  const discordLink = 'https://discord.gg/ZmtBAhwWhy';
+
   return (
     <Flex
       sx={{
@@ -34,87 +33,46 @@ const SiteHeader = () => {
       <Spacer />
       <StatusIndicator />
 
-      <HotkeysModal>
-        <IAIIconButton
-          aria-label={t('common.hotkeysLabel')}
-          tooltip={t('common.hotkeysLabel')}
-          size="sm"
+      <Menu>
+        <MenuButton
+          as={IAIIconButton}
           variant="link"
-          data-variant="link"
-          fontSize={20}
-          icon={<FaKeyboard />}
+          aria-label={t('accessibility.menu')}
+          tooltip={t('accessibility.menu')}
+          icon={<FaBars />}
         />
-      </HotkeysModal>
-
-      {isLocalizationEnabled && <LanguagePicker />}
-
-      {isBugLinkEnabled && (
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI/issues"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.reportBugLabel')}
-            tooltip={t('common.reportBugLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaBug />}
-          />
-        </Link>
-      )}
-
-      {isGithubLinkEnabled && (
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.githubLabel')}
-            tooltip={t('common.githubLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaGithub />}
-          />
-        </Link>
-      )}
-
-      {isDiscordLinkEnabled && (
-        <Link
-          isExternal
-          href="https://discord.gg/ZmtBAhwWhy"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.discordLabel')}
-            tooltip={t('common.discordLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaDiscord />}
-          />
-        </Link>
-      )}
-
-      <ColorModeButton />
-
-      <SettingsModal>
-        <IAIIconButton
-          aria-label={t('common.settingsLabel')}
-          tooltip={t('common.settingsLabel')}
-          variant="link"
-          data-variant="link"
-          fontSize={22}
-          size="sm"
-          icon={<MdSettings />}
-        />
-      </SettingsModal>
+        <MenuList>
+          <MenuGroup title={t('common.communityLabel')}>
+            {isGithubLinkEnabled && (
+              <MenuItem as="a" href={githubLink} icon={<FaGithub />}>
+                {t('common.githubLabel')}
+              </MenuItem>
+            )}
+            {isBugLinkEnabled && (
+              <MenuItem as="a" href={`${githubLink}/issues}`} icon={<FaBug />}>
+                {t('common.reportBugLabel')}
+              </MenuItem>
+            )}
+            {isDiscordLinkEnabled && (
+              <MenuItem as="a" href={discordLink} icon={<FaDiscord />}>
+                {t('common.discordLabel')}
+              </MenuItem>
+            )}
+          </MenuGroup>
+          <MenuGroup title={t('common.settingsLabel')}>
+            <HotkeysModal>
+              <MenuItem as="button" icon={<FaKeyboard />}>
+                {t('common.hotkeysLabel')}
+              </MenuItem>
+            </HotkeysModal>
+            <SettingsModal>
+              <MenuItem as="button" icon={<MdSettings />}>
+                {t('common.settingsLabel')}
+              </MenuItem>
+            </SettingsModal>
+          </MenuGroup>
+        </MenuList>
+      </Menu>
     </Flex>
   );
 };

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

@@ -1,111 +0,0 @@
-import { Flex, Link } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { FaBug, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
-import { MdSettings } from 'react-icons/md';
-import HotkeysModal from './HotkeysModal/HotkeysModal';
-import LanguagePicker from './LanguagePicker';
-import SettingsModal from './SettingsModal/SettingsModal';
-
-import IAIIconButton from 'common/components/IAIIconButton';
-import { useFeatureStatus } from '../hooks/useFeatureStatus';
-
-const SiteHeaderMenu = () => {
-  const { t } = useTranslation();
-
-  const isLocalizationEnabled =
-    useFeatureStatus('localization').isFeatureEnabled;
-  const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
-  const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
-  const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
-
-  return (
-    <Flex
-      alignItems="center"
-      flexDirection={{ base: 'column', xl: 'row' }}
-      gap={{ base: 4, xl: 1 }}
-    >
-      <HotkeysModal>
-        <IAIIconButton
-          aria-label={t('common.hotkeysLabel')}
-          tooltip={t('common.hotkeysLabel')}
-          size="sm"
-          variant="link"
-          data-variant="link"
-          fontSize={20}
-          icon={<FaKeyboard />}
-        />
-      </HotkeysModal>
-
-      {isLocalizationEnabled && <LanguagePicker />}
-
-      {isBugLinkEnabled && (
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI/issues"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.reportBugLabel')}
-            tooltip={t('common.reportBugLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaBug />}
-          />
-        </Link>
-      )}
-
-      {isGithubLinkEnabled && (
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.githubLabel')}
-            tooltip={t('common.githubLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaGithub />}
-          />
-        </Link>
-      )}
-
-      {isDiscordLinkEnabled && (
-        <Link
-          isExternal
-          href="https://discord.gg/ZmtBAhwWhy"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.discordLabel')}
-            tooltip={t('common.discordLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaDiscord />}
-          />
-        </Link>
-      )}
-
-      <SettingsModal>
-        <IAIIconButton
-          aria-label={t('common.settingsLabel')}
-          tooltip={t('common.settingsLabel')}
-          variant="link"
-          data-variant="link"
-          fontSize={22}
-          size="sm"
-          icon={<MdSettings />}
-        />
-      </SettingsModal>
-    </Flex>
-  );
-};
-
-SiteHeaderMenu.displayName = 'SiteHeaderMenu';
-export default SiteHeaderMenu;

invokeai/frontend/web/src/index.ts

@@ -3,7 +3,6 @@ export type { PartialAppConfig } from './app/types/invokeai';
 export { default as IAIIconButton } from './common/components/IAIIconButton';
 export { default as IAIPopover } from './common/components/IAIPopover';
 export { default as ParamMainModelSelect } from './features/parameters/components/Parameters/MainModel/ParamMainModelSelect';
-export { default as ColorModeButton } from './features/system/components/ColorModeButton';
 export { default as InvokeAiLogoComponent } from './features/system/components/InvokeAILogoComponent';
 export { default as SettingsModal } from './features/system/components/SettingsModal/SettingsModal';
 export { default as StatusIndicator } from './features/system/components/StatusIndicator';