feat: ✨ consolidated app nav to settings & dropdown

invokeai/frontend/web/public/locales/ar.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "مجتمع",
         "hotkeysLabel": "مفاتيح الأختصار",
         "themeLabel": "الموضوع",
         "languagePickerLabel": "منتقي اللغة",

invokeai/frontend/web/public/locales/de.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Gemeinschaft",
         "themeLabel": "Thema",
         "languagePickerLabel": "Sprachauswahl",
         "reportBugLabel": "Fehler melden",

invokeai/frontend/web/public/locales/en.json

@@ -23,6 +23,7 @@
         "menu": "Menu"
     },
     "common": {
+        "communityLabel": "Community",
         "hotkeysLabel": "Hotkeys",
         "darkMode": "Dark Mode",
         "lightMode": "Light Mode",

invokeai/frontend/web/public/locales/es.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Comunidad",
         "hotkeysLabel": "Atajos de teclado",
         "themeLabel": "Tema",
         "languagePickerLabel": "Selector de idioma",

invokeai/frontend/web/public/locales/fi.json

@@ -22,6 +22,7 @@
         "showOptionsPanel": "Näytä asetukset"
     },
     "common": {
+        "communityLabel": "Yhteisö",
         "postProcessDesc2": "Erillinen käyttöliittymä tullaan julkaisemaan helpottaaksemme työnkulkua jälkikäsittelyssä.",
         "training": "Kouluta",
         "statusLoadingModel": "Ladataan mallia",

invokeai/frontend/web/public/locales/fr.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Communauté",
         "hotkeysLabel": "Raccourcis clavier",
         "themeLabel": "Thème",
         "languagePickerLabel": "Sélecteur de langue",

invokeai/frontend/web/public/locales/he.json

@@ -106,6 +106,7 @@
         "modelMergeInterpAddDifferenceHelp": "במצב זה, מודל 3 מופחת תחילה ממודל 2. הגרסה המתקבלת משולבת עם מודל 1 עם קצב האלפא שנקבע לעיל."
     },
     "common": {
+        "communityLabel": "קהילה",
         "nodesDesc": "מערכת מבוססת צמתים עבור יצירת תמונות עדיין תחת פיתוח. השארו קשובים לעדכונים עבור הפיצ׳ר המדהים הזה.",
         "themeLabel": "ערכת נושא",
         "languagePickerLabel": "בחירת שפה",

invokeai/frontend/web/public/locales/it.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Comunità",
         "hotkeysLabel": "Tasti di scelta rapida",
         "themeLabel": "Tema",
         "languagePickerLabel": "Seleziona lingua",

invokeai/frontend/web/public/locales/ja.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "コミュニティ",
         "themeLabel": "テーマ",
         "languagePickerLabel": "言語選択",
         "reportBugLabel": "バグ報告",

invokeai/frontend/web/public/locales/ko.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "지역 사회",
         "themeLabel": "테마 설정",
         "languagePickerLabel": "언어 설정",
         "reportBugLabel": "버그 리포트",

invokeai/frontend/web/public/locales/nl.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Gemeenschap",
         "hotkeysLabel": "Sneltoetsen",
         "themeLabel": "Thema",
         "languagePickerLabel": "Taalkeuze",

invokeai/frontend/web/public/locales/pl.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Wspólnota",
         "hotkeysLabel": "Skróty klawiszowe",
         "themeLabel": "Motyw",
         "languagePickerLabel": "Wybór języka",

invokeai/frontend/web/public/locales/pt.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Comunidade",
         "greenTheme": "Verde",
         "langArabic": "العربية",
         "themeLabel": "Tema",

invokeai/frontend/web/public/locales/pt_BR.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Comunidade",
         "hotkeysLabel": "Teclas de atalho",
         "themeLabel": "Tema",
         "languagePickerLabel": "Seletor de Idioma",

invokeai/frontend/web/public/locales/ru.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Сообщество",
         "hotkeysLabel": "Горячие клавиши",
         "themeLabel": "Тема",
         "languagePickerLabel": "Язык",

invokeai/frontend/web/public/locales/sv.json

@@ -22,6 +22,7 @@
         "showOptionsPanel": "Visa inställningspanelen"
     },
     "common": {
+        "communityLabel": "Gemenskap",
         "hotkeysLabel": "Snabbtangenter",
         "reportBugLabel": "Rapportera bugg",
         "githubLabel": "Github",

invokeai/frontend/web/public/locales/tr.json

@@ -23,6 +23,7 @@
         "showGallery": "Galeriyi Göster"
     },
     "common": {
+        "communityLabel": "Toplum",
         "hotkeysLabel": "Kısayol Tuşları",
         "themeLabel": "Tema",
         "languagePickerLabel": "Dil Seçimi",

invokeai/frontend/web/public/locales/uk.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "Спільнота",
         "hotkeysLabel": "Гарячi клавіші",
         "themeLabel": "Тема",
         "languagePickerLabel": "Мова",

invokeai/frontend/web/public/locales/zh_CN.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "社区",
         "hotkeysLabel": "快捷键",
         "themeLabel": "主题",
         "languagePickerLabel": "语言",

invokeai/frontend/web/public/locales/zh_Hant.json

@@ -1,5 +1,6 @@
 {
     "common": {
+        "communityLabel": "社區",
         "nodes": "節點",
         "img2img": "圖片轉圖片",
         "langSimplifiedChinese": "簡體中文",

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>
+      <Menu>
-        <IAIIconButton
+        <MenuButton
-          aria-label={t('common.hotkeysLabel')}
+          as={IAIIconButton}
-          tooltip={t('common.hotkeysLabel')}
-          size="sm"
           variant="link"
-          data-variant="link"
+          aria-label={t('accessibility.menu')}
-          fontSize={20}
+          tooltip={t('accessibility.menu')}
-          icon={<FaKeyboard />}
+          icon={<FaBars />}
         />
-      </HotkeysModal>
+        <MenuList>
-
+          <MenuGroup title={t('common.communityLabel')}>
-      {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
+              <MenuItem as="a" href={githubLink} icon={<FaGithub />}>
-          isExternal
+                {t('common.githubLabel')}
-          href="http://github.com/invoke-ai/InvokeAI"
+              </MenuItem>
-          marginBottom="-0.25rem"
+            )}
-        >
+            {isBugLinkEnabled && (
-          <IAIIconButton
+              <MenuItem as="a" href={`${githubLink}/issues}`} icon={<FaBug />}>
-            aria-label={t('common.githubLabel')}
+                {t('common.reportBugLabel')}
-            tooltip={t('common.githubLabel')}
+              </MenuItem>
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaGithub />}
-          />
-        </Link>
             )}
-
             {isDiscordLinkEnabled && (
-        <Link
+              <MenuItem as="a" href={discordLink} icon={<FaDiscord />}>
-          isExternal
+                {t('common.discordLabel')}
-          href="https://discord.gg/ZmtBAhwWhy"
+              </MenuItem>
-          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>
             )}
-
+          </MenuGroup>
-      <ColorModeButton />
+          <MenuGroup title={t('common.settingsLabel')}>
-
+            <HotkeysModal>
+              <MenuItem as="button" icon={<FaKeyboard />}>
+                {t('common.hotkeysLabel')}
+              </MenuItem>
+            </HotkeysModal>
             <SettingsModal>
-        <IAIIconButton
+              <MenuItem as="button" icon={<MdSettings />}>
-          aria-label={t('common.settingsLabel')}
+                {t('common.settingsLabel')}
-          tooltip={t('common.settingsLabel')}
+              </MenuItem>
-          variant="link"
-          data-variant="link"
-          fontSize={22}
-          size="sm"
-          icon={<MdSettings />}
-        />
             </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';