From 86c2f6a13e39401872aa33b2772b36f1f157c969 Mon Sep 17 00:00:00 2001 From: "Calum H. (IMB11)" Date: Mon, 27 Jul 2026 11:08:42 +0100 Subject: [PATCH 1/4] refactor: app settings layout --- .../components/ui/modal/AppSettingsModal.vue | 74 +++-- .../ui/settings/AppBehaviorSettings.vue | 302 ++++++++++++++++++ .../ui/settings/AppearanceSettings.vue | 246 +------------- .../ui/settings/DefaultInstanceSettings.vue | 22 +- .../ui/settings/PrivacySettings.vue | 28 +- .../settings/ResourceManagementSettings.vue | 20 +- apps/app-frontend/src/helpers/settings.ts | 2 +- .../app-frontend/src/locales/ar-SA/index.json | 3 - .../app-frontend/src/locales/cs-CZ/index.json | 3 - .../app-frontend/src/locales/da-DK/index.json | 3 - .../app-frontend/src/locales/de-CH/index.json | 3 - .../app-frontend/src/locales/de-DE/index.json | 3 - .../app-frontend/src/locales/en-US/index.json | 54 ++-- .../src/locales/es-419/index.json | 3 - .../app-frontend/src/locales/es-ES/index.json | 3 - .../app-frontend/src/locales/fi-FI/index.json | 3 - .../src/locales/fil-PH/index.json | 3 - .../app-frontend/src/locales/fr-FR/index.json | 3 - .../app-frontend/src/locales/hu-HU/index.json | 3 - .../app-frontend/src/locales/id-ID/index.json | 3 - .../app-frontend/src/locales/it-IT/index.json | 3 - .../app-frontend/src/locales/ja-JP/index.json | 3 - .../app-frontend/src/locales/ko-KR/index.json | 3 - .../app-frontend/src/locales/ms-MY/index.json | 3 - .../app-frontend/src/locales/nl-NL/index.json | 3 - .../app-frontend/src/locales/no-NO/index.json | 3 - .../app-frontend/src/locales/pl-PL/index.json | 3 - .../app-frontend/src/locales/pt-BR/index.json | 3 - .../app-frontend/src/locales/pt-PT/index.json | 3 - .../app-frontend/src/locales/ru-RU/index.json | 3 - .../app-frontend/src/locales/sr-CS/index.json | 3 - .../app-frontend/src/locales/sv-SE/index.json | 3 - .../app-frontend/src/locales/th-TH/index.json | 3 - .../app-frontend/src/locales/tr-TR/index.json | 3 - .../app-frontend/src/locales/uk-UA/index.json | 3 - .../app-frontend/src/locales/vi-VN/index.json | 3 - .../app-frontend/src/locales/zh-CN/index.json | 3 - .../app-frontend/src/locales/zh-TW/index.json | 3 - package.json | 1 + .../ui/src/components/modal/TabbedModal.vue | 50 +-- .../src/stories/modal/TabbedModal.stories.ts | 9 + pnpm-lock.yaml | 104 ++++-- 42 files changed, 559 insertions(+), 443 deletions(-) create mode 100644 apps/app-frontend/src/components/ui/settings/AppBehaviorSettings.vue diff --git a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue index 14f4f66f7c..20a0fbb62c 100644 --- a/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue +++ b/apps/app-frontend/src/components/ui/modal/AppSettingsModal.vue @@ -6,6 +6,7 @@ import { LanguagesIcon, ModrinthIcon, PaintbrushIcon, + Settings2Icon, SettingsIcon, ShieldIcon, ToggleRightIcon, @@ -21,8 +22,9 @@ import { } from '@modrinth/ui' import { getVersion } from '@tauri-apps/api/app' import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os' -import { ref, watch } from 'vue' +import { computed, ref, watch } from 'vue' +import AppBehaviorSettings from '@/components/ui/settings/AppBehaviorSettings.vue' import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue' import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue' import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue' @@ -45,64 +47,97 @@ const developerModeEnabled = defineMessage({ defaultMessage: 'Developer mode enabled.', }) +const tabCategories = defineMessages({ + display: { + id: 'settings.sidebar.label.display', + defaultMessage: 'Display', + }, + account: { + id: 'settings.sidebar.label.account', + defaultMessage: 'Account', + }, + instances: { + id: 'app.settings.sidebar.label.instances', + defaultMessage: 'Instances', + }, +}) + const tabs = [ { name: defineMessage({ id: 'app.settings.tabs.appearance', defaultMessage: 'Appearance', }), + category: tabCategories.display, icon: PaintbrushIcon, content: AppearanceSettings, }, + { + name: defineMessage({ + id: 'app.settings.tabs.behavior', + defaultMessage: 'Behaviour', + }), + category: tabCategories.display, + icon: Settings2Icon, + content: AppBehaviorSettings, + }, { name: defineMessage({ id: 'app.settings.tabs.language', defaultMessage: 'Language', }), + category: tabCategories.display, icon: LanguagesIcon, content: LanguageSettings, badge: commonMessages.beta, }, + { + name: commonSettingsMessages.featureFlags, + category: tabCategories.display, + icon: ToggleRightIcon, + content: FeatureFlagSettings, + developerOnly: true, + }, { name: defineMessage({ id: 'app.settings.tabs.privacy', defaultMessage: 'Privacy', }), + category: tabCategories.account, icon: ShieldIcon, content: PrivacySettings, }, - { - name: defineMessage({ - id: 'app.settings.tabs.java-installations', - defaultMessage: 'Java installations', - }), - icon: CoffeeIcon, - content: JavaSettings, - }, { name: defineMessage({ id: 'app.settings.tabs.default-instance-options', defaultMessage: 'Default instance options', }), + category: tabCategories.instances, icon: GameIcon, content: DefaultInstanceSettings, }, + { + name: defineMessage({ + id: 'app.settings.tabs.java-installations', + defaultMessage: 'Java installations', + }), + category: tabCategories.instances, + icon: CoffeeIcon, + content: JavaSettings, + }, { name: defineMessage({ id: 'app.settings.tabs.resource-management', defaultMessage: 'Resource management', }), + category: tabCategories.instances, icon: GaugeIcon, content: ResourceManagementSettings, }, - { - name: commonSettingsMessages.featureFlags, - icon: ToggleRightIcon, - content: FeatureFlagSettings, - developerOnly: true, - }, ] +const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode)) + const modal = ref | null>(null) function show() { @@ -129,12 +164,15 @@ watch( function devModeCount() { devModeCounter.value++ if (devModeCounter.value > 5) { + const selectedTab = modal.value ? availableTabs.value[modal.value.selectedTab] : undefined + themeStore.devMode = !themeStore.devMode settings.value.developer_mode = !!themeStore.devMode devModeCounter.value = 0 - if (!themeStore.devMode && tabs[modal.value!.selectedTab].developerOnly) { - modal.value!.setTab(0) + if (modal.value) { + const selectedTabIndex = selectedTab ? availableTabs.value.indexOf(selectedTab) : -1 + modal.value.setTab(selectedTabIndex >= 0 ? selectedTabIndex : 0) } } } @@ -147,7 +185,7 @@ const messages = defineMessages({ })