From b68a199814b8530b65ebe025a019ba8377981d9a Mon Sep 17 00:00:00 2001 From: Prospector <6166773+Prospector@users.noreply.github.com> Date: Wed, 26 Aug 2026 17:35:34 -0700 Subject: [PATCH] menu refactor + web account switcher (#7307) * add account switcher, migrate context menus to overflow menu system, update version filter controls, only pad instance icons * app account switcher, improve some context menus, theme stuff * prepr * handle reauthentication * fix a couple sign in issues, admin page cleanup, fix org status badges, fix official account badge, open in local keybind, publish plus icons * rename generic menus to ButtonMenu (& types) * fix hydration issue w/ dropdowns + middleware error --- apps/app-frontend/src/App.vue | 423 ++++++++--- .../src/assets/loading/cube-light.webp | Bin 0 -> 341878 bytes .../src/assets/stylesheets/global.scss | 4 + .../src/components/ui/AccountsCard.vue | 9 +- .../src/components/ui/ErrorModal.vue | 20 + .../src/components/ui/Instance.vue | 2 + .../src/components/ui/InstanceIndicator.vue | 7 +- .../components/ui/QuickInstanceSwitcher.vue | 102 ++- .../src/components/ui/SplashScreen.vue | 30 +- .../src/components/ui/WindowControls.vue | 91 ++- .../src/components/ui/context-menu/index.vue | 236 ------ .../src/components/ui/context-menu/types.ts | 41 -- .../context-menu/use-context-menu-position.ts | 170 ----- .../ui/context-menu/use-context-menu.ts | 357 --------- .../src/components/ui/context-menu/utils.ts | 59 -- .../src/components/ui/friends/FriendsList.vue | 7 + .../components/ui/friends/FriendsSection.vue | 101 ++- .../install_flow/AddServerToInstanceModal.vue | 6 +- .../ui/library/group-instances-modal.vue | 1 + .../src/components/ui/library/index.vue | 101 +-- .../ui/library/instance-group/index.vue | 89 ++- .../instance-group/instance-card-view.vue | 1 + .../library/instance-group/instance-card.vue | 3 + .../library-toolbar/new-group-modal.vue | 1 + .../src/components/ui/library/use-library.ts | 305 +++++--- .../components/ui/modal/AppSettingsModal.vue | 12 +- .../ui/modal/ConfirmDeleteInstanceModal.vue | 1 + .../ui/modal/ModrinthAccountRequiredModal.vue | 14 +- .../ui/settings/account/PrivacySettings.vue | 2 +- .../settings/display/AppearanceSettings.vue | 12 +- .../settings/display/FeatureFlagSettings.vue | 35 +- .../shared-instance-install-summary.vue | 1 + .../src/components/ui/world/InstanceItem.vue | 248 ++++--- .../src/components/ui/world/WorldItem.vue | 687 +++++++++--------- .../browse/use-app-server-browse.ts | 52 +- .../src/composables/use-app-settings.ts | 1 + .../app-frontend/src/composables/use-theme.ts | 104 ++- .../src/helpers/account-appearance.ts | 29 + apps/app-frontend/src/helpers/mr_auth.ts | 19 +- .../app-frontend/src/locales/ar-SA/index.json | 6 - .../app-frontend/src/locales/cs-CZ/index.json | 6 - .../app-frontend/src/locales/de-CH/index.json | 6 - .../app-frontend/src/locales/de-DE/index.json | 6 - .../app-frontend/src/locales/en-US/index.json | 65 +- .../src/locales/es-419/index.json | 6 - .../app-frontend/src/locales/es-ES/index.json | 6 - .../app-frontend/src/locales/fr-FR/index.json | 6 - .../app-frontend/src/locales/hu-HU/index.json | 3 - .../app-frontend/src/locales/it-IT/index.json | 6 - .../app-frontend/src/locales/ja-JP/index.json | 3 - .../app-frontend/src/locales/ko-KR/index.json | 3 - .../app-frontend/src/locales/nl-NL/index.json | 3 - .../app-frontend/src/locales/pl-PL/index.json | 6 - .../app-frontend/src/locales/pt-BR/index.json | 3 - .../app-frontend/src/locales/ru-RU/index.json | 6 - .../app-frontend/src/locales/sv-SE/index.json | 6 - .../app-frontend/src/locales/tr-TR/index.json | 6 - .../app-frontend/src/locales/uk-UA/index.json | 6 - .../app-frontend/src/locales/zh-CN/index.json | 6 - .../app-frontend/src/locales/zh-TW/index.json | 6 - apps/app-frontend/src/pages/Browse.vue | 17 +- apps/app-frontend/src/pages/Index.vue | 26 +- .../instance/components/page-header/index.vue | 16 +- .../settings-modal/general-settings.vue | 1 + .../components/settings-modal/index.vue | 1 + .../src/pages/instance/content/index.vue | 6 +- .../src/pages/instance/layout.vue | 122 ++-- apps/app-frontend/src/pages/project/Index.vue | 59 +- apps/app/build.rs | 3 + apps/app/src/api/mr_auth.rs | 27 +- apps/app/src/api/utils.rs | 2 +- apps/frontend/src/app.vue | 43 +- .../analytics-table/index.vue | 4 +- .../components/ui/OrganizationPageHeader.vue | 4 +- .../ui/ProjectDownloadModal/index.vue | 4 +- .../ui/SharedInstanceInviteOpenInAppModal.vue | 7 +- .../src/components/ui/auth/SignIn.vue | 286 +++++--- .../src/components/ui/auth/SignUp.vue | 3 +- .../ui/moderation/ModerationReportCard.vue | 1 + .../ui/moderation/ModerationTechRevCard.vue | 4 +- .../SharedInstanceReportContext.vue | 8 +- .../src/components/ui/report/ReportInfo.vue | 1 + .../src/components/ui/thread/ThreadView.vue | 6 +- apps/frontend/src/composables/accounts.ts | 384 ++++++++++ apps/frontend/src/composables/auth-cookie.ts | 19 + apps/frontend/src/composables/auth.ts | 105 +-- apps/frontend/src/composables/user.js | 9 +- apps/frontend/src/error.vue | 67 +- apps/frontend/src/layouts/default.vue | 386 ++++++---- apps/frontend/src/locales/ar-SA/index.json | 6 - apps/frontend/src/locales/cs-CZ/index.json | 3 - apps/frontend/src/locales/da-DK/index.json | 3 - apps/frontend/src/locales/de-CH/index.json | 6 - apps/frontend/src/locales/de-DE/index.json | 6 - apps/frontend/src/locales/en-US/index.json | 63 +- apps/frontend/src/locales/es-419/index.json | 6 - apps/frontend/src/locales/es-ES/index.json | 6 - apps/frontend/src/locales/fi-FI/index.json | 3 - apps/frontend/src/locales/fil-PH/index.json | 6 - apps/frontend/src/locales/fr-FR/index.json | 6 - apps/frontend/src/locales/he-IL/index.json | 6 - apps/frontend/src/locales/hu-HU/index.json | 6 - apps/frontend/src/locales/id-ID/index.json | 6 - apps/frontend/src/locales/it-IT/index.json | 6 - apps/frontend/src/locales/ja-JP/index.json | 6 - apps/frontend/src/locales/ko-KR/index.json | 6 - apps/frontend/src/locales/ms-MY/index.json | 6 - apps/frontend/src/locales/nl-NL/index.json | 6 - apps/frontend/src/locales/no-NO/index.json | 6 - apps/frontend/src/locales/pl-PL/index.json | 6 - apps/frontend/src/locales/pt-BR/index.json | 6 - apps/frontend/src/locales/pt-PT/index.json | 6 - apps/frontend/src/locales/ro-RO/index.json | 6 - apps/frontend/src/locales/ru-RU/index.json | 6 - apps/frontend/src/locales/sr-CS/index.json | 3 - apps/frontend/src/locales/sv-SE/index.json | 6 - apps/frontend/src/locales/th-TH/index.json | 3 - apps/frontend/src/locales/tr-TR/index.json | 6 - apps/frontend/src/locales/uk-UA/index.json | 6 - apps/frontend/src/locales/vi-VN/index.json | 6 - apps/frontend/src/locales/zh-CN/index.json | 6 - apps/frontend/src/locales/zh-TW/index.json | 6 - apps/frontend/src/middleware/auth.ts | 4 +- .../frontend/src/middleware/project.global.ts | 8 +- apps/frontend/src/middleware/staff.ts | 4 +- .../src/pages/[type]/[project]/changelog.vue | 6 +- apps/frontend/src/pages/admin.vue | 103 ++- apps/frontend/src/pages/admin/affiliates.vue | 17 +- .../src/pages/admin/analytics/events.vue | 195 +++-- .../src/pages/admin/billing/[user].vue | 30 +- apps/frontend/src/pages/admin/docs.vue | 259 +++++-- apps/frontend/src/pages/admin/emails.vue | 51 +- apps/frontend/src/pages/admin/file_lookup.vue | 134 ++-- apps/frontend/src/pages/admin/index.vue | 9 + .../src/pages/admin/servers/lookup.vue | 68 +- .../src/pages/admin/servers/notices.vue | 16 +- .../src/pages/admin/servers/transfers.vue | 8 +- apps/frontend/src/pages/admin/user_email.vue | 50 +- apps/frontend/src/pages/auth/create/oauth.vue | 4 +- .../src/pages/auth/reauthenticate.vue | 409 +++++++++++ .../src/pages/auth/reset-password.vue | 2 +- apps/frontend/src/pages/auth/sign-in.vue | 163 ++++- apps/frontend/src/pages/auth/sign-up.vue | 8 +- apps/frontend/src/pages/moderation.vue | 4 +- .../src/pages/organization/[organization].vue | 23 +- apps/frontend/src/pages/settings/account.vue | 5 +- apps/frontend/src/pages/settings/index.vue | 3 + apps/frontend/src/pages/share/[inviteId].vue | 8 +- .../src/plugins/open-on-modrinth.client.ts | 1 + apps/frontend/src/plugins/theme/index.ts | 37 +- ...85ac08744fc65c686cc185c1af97ea7f0738a.json | 38 + packages/app-lib/src/api/mr_auth.rs | 93 ++- packages/app-lib/src/install/diagnostics.rs | 6 +- packages/app-lib/src/state/mr_auth.rs | 62 +- packages/app-lib/src/state/settings.rs | 1 + packages/assets/generated-icons.ts | 10 + packages/assets/icons/box-plus.svg | 15 + packages/assets/icons/collection-plus.svg | 15 + packages/assets/icons/file-search-corner.svg | 18 + packages/assets/icons/organization-plus.svg | 18 + packages/assets/icons/play.svg | 5 +- packages/assets/icons/server-plus.svg | 16 +- packages/assets/icons/server-search.svg | 13 + packages/assets/styles/classes.scss | 5 +- packages/assets/styles/variables.scss | 15 + packages/moderation/src/data/keybinds.ts | 9 + packages/moderation/src/types/keybinds.ts | 1 + packages/ui/src/components/base/Avatar.vue | 17 +- packages/ui/src/components/base/Combobox.vue | 121 ++- .../src/components/base/DropdownFilterBar.vue | 11 +- .../ui/src/components/base/MultiSelect.vue | 9 +- packages/ui/src/components/base/Toggle.vue | 4 +- .../components/base/buttons/ContextMenu.vue | 147 ++++ .../components/base/buttons/SplitButton.vue | 10 +- .../base/buttons/TeleportOverflowMenu.vue | 462 +++--------- .../base/buttons/TeleportPopoutMenu.vue | 9 +- .../buttons/button-menu/ButtonMenuItem.vue | 185 +++++ .../buttons/button-menu/ButtonMenuPanel.vue | 164 +++++ .../buttons/button-menu/ButtonMenuSubmenu.vue | 188 +++++ .../base/buttons/button-menu/button-menu.ts | 239 ++++++ .../ui/src/components/base/buttons/index.ts | 12 +- .../ui/src/components/base/buttons/types.ts | 35 +- packages/ui/src/components/base/index.ts | 12 +- .../ExternalProjectPermissionsCard.vue | 6 +- .../components/CustomSetupStage.vue | 7 +- .../ui/src/components/project/ProjectList.vue | 12 +- .../project/ProjectPageVersions.vue | 24 +- .../settings/environment/environments.ts | 31 + .../src/components/project/settings/index.ts | 7 +- .../components/servers/access/AccessTable.vue | 4 +- .../components/servers/backups/BackupItem.vue | 6 +- .../server-header/PanelServerActionButton.vue | 4 +- .../src/components/user/AccountChoiceList.vue | 54 ++ .../components/user/AccountSwitchOverlay.vue | 49 ++ .../ui/src/components/user/UserAvatar.vue | 101 +++ .../ui/src/components/user/UserPageHeader.vue | 6 +- .../ui/src/components/user/UserRoleIcon.vue | 40 + packages/ui/src/components/user/index.ts | 5 + .../version/VersionFilterControl.vue | 525 +++++++------ ...earance-settings-theme-selector.stories.ts | 1 + .../appearance-settings-theme-selector.vue | 5 +- .../shared/appearance-settings/layout.vue | 2 + .../providers/appearance-settings.ts | 3 + .../src/layouts/shared/browse-tab/header.vue | 3 + .../components/ContentCardItem.vue | 4 +- .../managed-content-modal/index.vue | 4 +- .../components/modals/ContentInstallModal.vue | 14 +- .../use-content-metadata-filters.ts | 28 +- .../src/layouts/shared/content-tab/layout.vue | 4 +- .../content-tab/providers/content-manager.ts | 4 +- .../src/layouts/shared/content-tab/types.ts | 4 +- .../files-tab/components/FileContextMenu.vue | 175 ----- .../files-tab/components/FileTableRow.vue | 47 +- .../src/layouts/shared/files-tab/layout.vue | 88 +-- .../ui/src/layouts/shared/files-tab/types.ts | 11 - .../layouts/shared/user-profile/layout.vue | 27 +- packages/ui/src/locales/en-US/index.json | 19 +- .../stories/buttons/ButtonGroup.stories.ts | 4 +- .../{app => buttons}/ContextMenu.stories.ts | 75 +- .../buttons/TeleportOverflowMenu.stories.ts | 52 +- .../ui/src/stories/user/UserAvatar.stories.ts | 47 ++ packages/ui/src/styles/tailwind-utilities.css | 86 ++- packages/ui/src/utils/common-messages.ts | 4 +- packages/ui/src/utils/index.ts | 1 + .../ui/src/utils/theme-color-transition.ts | 19 + .../ui/src/utils/use-anchored-teleport.ts | 43 +- 226 files changed, 6585 insertions(+), 4078 deletions(-) create mode 100644 apps/app-frontend/src/assets/loading/cube-light.webp delete mode 100644 apps/app-frontend/src/components/ui/context-menu/index.vue delete mode 100644 apps/app-frontend/src/components/ui/context-menu/types.ts delete mode 100644 apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts delete mode 100644 apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts delete mode 100644 apps/app-frontend/src/components/ui/context-menu/utils.ts create mode 100644 apps/app-frontend/src/helpers/account-appearance.ts create mode 100644 apps/frontend/src/composables/accounts.ts create mode 100644 apps/frontend/src/composables/auth-cookie.ts create mode 100644 apps/frontend/src/pages/admin/index.vue create mode 100644 apps/frontend/src/pages/auth/reauthenticate.vue create mode 100644 packages/app-lib/.sqlx/query-c7ade4d5f2b4b910b8d3a100d7285ac08744fc65c686cc185c1af97ea7f0738a.json create mode 100644 packages/assets/icons/box-plus.svg create mode 100644 packages/assets/icons/collection-plus.svg create mode 100644 packages/assets/icons/file-search-corner.svg create mode 100644 packages/assets/icons/organization-plus.svg create mode 100644 packages/assets/icons/server-search.svg create mode 100644 packages/ui/src/components/base/buttons/ContextMenu.vue create mode 100644 packages/ui/src/components/base/buttons/button-menu/ButtonMenuItem.vue create mode 100644 packages/ui/src/components/base/buttons/button-menu/ButtonMenuPanel.vue create mode 100644 packages/ui/src/components/base/buttons/button-menu/ButtonMenuSubmenu.vue create mode 100644 packages/ui/src/components/base/buttons/button-menu/button-menu.ts create mode 100644 packages/ui/src/components/user/AccountChoiceList.vue create mode 100644 packages/ui/src/components/user/AccountSwitchOverlay.vue create mode 100644 packages/ui/src/components/user/UserAvatar.vue create mode 100644 packages/ui/src/components/user/UserRoleIcon.vue delete mode 100644 packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue rename packages/ui/src/stories/{app => buttons}/ContextMenu.stories.ts (53%) create mode 100644 packages/ui/src/stories/user/UserAvatar.stories.ts create mode 100644 packages/ui/src/utils/theme-color-transition.ts diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index 33afd4d216..28764564ba 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -10,6 +10,7 @@ import { } from '@modrinth/api-client' import { ArrowBigUpDashIcon, + ArrowLeftRightIcon, ChevronLeftIcon, ChevronRightIcon, CompassIcon, @@ -23,20 +24,25 @@ import { ServerStackIcon, SettingsIcon, ShirtIcon, + SpinnerIcon, + ToggleRightIcon, UserIcon, + UserPlusIcon, + XIcon, } from '@modrinth/assets' import { + AccountSwitchOverlay, Admonition, Avatar, ButtonLink, commonMessages, + commonSettingsMessages, ContentInstallModal, ContentUpdaterModal, CreationFlowModal, defineMessages, I18nDebugPanel, IconButton, - IntlFormatted, LoadingBar, NewsArticleCard, NotificationPanel, @@ -51,6 +57,7 @@ import { useDebugLogger, useFormatBytes, useHostingIntercom, + UserRoleIcon, useVIntl, } from '@modrinth/ui' import { renderString } from '@modrinth/utils' @@ -62,7 +69,7 @@ import { fetch as tauriFetch } from '@tauri-apps/plugin-http' import { openUrl } from '@tauri-apps/plugin-opener' import { type } from '@tauri-apps/plugin-os' import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state' -import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue' +import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue' import { RouterView, useRoute, useRouter } from 'vue-router' import AccountsCard from '@/components/ui/AccountsCard.vue' @@ -96,8 +103,9 @@ import { useCheckDisableMouseover } from '@/composables/macCssFix.js' import { useAppEvent } from '@/composables/use-app-event' import { useAppSettings } from '@/composables/use-app-settings.ts' import { useError } from '@/composables/use-error.js' -import { useTheme } from '@/composables/use-theme.ts' +import { isDarkTheme, useTheme } from '@/composables/use-theme.ts' import { config } from '@/config' +import { getAccountAppearance, rememberAccountAppearance } from '@/helpers/account-appearance.ts' import { hide_ads_window, init_ads_window, @@ -108,14 +116,22 @@ import { } from '@/helpers/ads.js' import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics' import { check_reachable } from '@/helpers/auth.js' -import { get_user, get_version } from '@/helpers/cache.js' +import { get_user, get_user_many, get_version } from '@/helpers/cache.js' import { install_create_modpack_instance, install_get_modpack_preview } from '@/helpers/install' import { can_current_user_use_shared_instances, get as getInstance, run } from '@/helpers/instance' -import { get as getCreds, login, logout } from '@/helpers/mr_auth.ts' +import { + get as getCreds, + getAll as getAllCreds, + login, + logout, + removeUser, + setActive, +} from '@/helpers/mr_auth.ts' import { mergeUrlQuery, parseModrinthLink } from '@/helpers/project-links.ts' import { get as getSettings, set as setSettings } from '@/helpers/settings.ts' import { get_opening_command, initialize_state } from '@/helpers/state' import { hasActivePride26Midas, hasMidasBadge } from '@/helpers/user-campaigns.ts' +import { get_user_preferences } from '@/helpers/user-preferences.ts' import { parse_modrinth_user_link } from '@/helpers/users' import { areUpdatesEnabled, @@ -201,6 +217,7 @@ const APP_SIDEBAR_WIDTH = 300 const INTERCOM_BUBBLE_DEFAULT_PADDING = 20 const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime() const credentials = ref() +const storedModrinthAccounts = ref([]) let credentialsRefreshId = 0 const sidebarToggled = ref(true) watch( @@ -425,6 +442,11 @@ const stateInitialized = ref(false) const criticalErrorMessage = ref() const isMaximized = ref(false) +const isFullscreen = ref(false) + +watch([os, isFullscreen], ([osName, fullscreen]) => { + document.documentElement.classList.toggle('mac-traffic-lights', osName === 'MacOS' && !fullscreen) +}) const authUnreachableDebug = useDebugLogger('AuthReachableChecker') const authServerQuery = useQuery({ @@ -457,6 +479,7 @@ onMounted(async () => { document.querySelector('body').addEventListener('click', handleClick) document.querySelector('body').addEventListener('auxclick', handleAuxClick) + document.querySelector('body').addEventListener('contextmenu', handleContextMenu) document.addEventListener('fullscreenchange', handleFullscreenChange) checkUpdates() @@ -465,6 +488,7 @@ onMounted(async () => { onUnmounted(async () => { document.querySelector('body').removeEventListener('click', handleClick) document.querySelector('body').removeEventListener('auxclick', handleAuxClick) + document.querySelector('body').removeEventListener('contextmenu', handleContextMenu) document.removeEventListener('fullscreenchange', handleFullscreenChange) clearDelayedUpdatePopup() @@ -480,7 +504,6 @@ const formatBytes = useFormatBytes() const messages = defineMessages({ warning: { id: 'app.notification.warning', defaultMessage: 'Warning' }, - moreOptions: { id: 'app.navigation.more-options', defaultMessage: 'More options' }, goBack: { id: 'app.navigation.go-back', defaultMessage: 'Go back' }, goForward: { id: 'app.navigation.go-forward', defaultMessage: 'Go forward' }, nextImage: { id: 'app.navigation.next-image', defaultMessage: 'Next image' }, @@ -542,13 +565,33 @@ const messages = defineMessages({ id: 'app.nav.modrinth-account', defaultMessage: 'Modrinth account', }, - signedInAs: { - id: 'app.nav.signed-in-as', - defaultMessage: 'Signed in as {username}', + viewProfile: { + id: 'app.nav.view-profile', + defaultMessage: 'View profile', + }, + addFriend: { + id: 'friends.action.add-friend', + defaultMessage: 'Add a friend', }, signInToModrinthAccount: { id: 'app.nav.sign-in-to-modrinth-account', - defaultMessage: 'Sign in to a Modrinth account', + defaultMessage: 'Sign into Modrinth', + }, + loadingProfile: { + id: 'app.nav.loading-profile', + defaultMessage: 'Loading profile...', + }, + switchAccount: { + id: 'app.nav.switch-account', + defaultMessage: 'Switch account', + }, + addAccount: { + id: 'app.nav.add-account', + defaultMessage: 'Add account', + }, + removeAccount: { + id: 'app.nav.remove-account', + defaultMessage: 'Remove account', }, restarting: { id: 'app.restarting', @@ -652,6 +695,9 @@ async function setupApp() { i18n.global.locale.value = locale } + Object.assign(appSettings.featureFlags, feature_flags) + isMaximized.value = await getCurrentWindow().isMaximized() + isFullscreen.value = await getCurrentWindow().isFullscreen() os.value = await getOS() const dev = await isDev() isDevEnvironment.value = dev @@ -666,13 +712,11 @@ async function setupApp() { appSettings.hideNametagSkinsPage = hide_nametag_skins_page appSettings.toggleSidebar = toggle_sidebar appSettings.devMode = developer_mode - Object.assign(appSettings.featureFlags, feature_flags) stateInitialized.value = true - isMaximized.value = await getCurrentWindow().isMaximized() - await getCurrentWindow().onResized(async () => { isMaximized.value = await getCurrentWindow().isMaximized() + isFullscreen.value = await getCurrentWindow().isFullscreen() }) if (telemetry) { @@ -681,8 +725,6 @@ async function setupApp() { trackEvent('Launched', { version, dev }) } - if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault()) - const osType = await type() if (osType === 'macos') { document.getElementsByTagName('html')[0].classList.add('mac') @@ -984,6 +1026,13 @@ watch( .then(async () => { const settings = await getSettings() const selectedTheme = preferences.appearance.auto ? 'system' : preferences.appearance.theme + const userId = credentials.value?.user_id ?? credentials.value?.user?.id + if (userId) { + rememberAccountAppearance(userId, preferences.appearance) + } + if (appTheme.syncAcrossDevices && isDarkTheme(preferences.appearance.theme)) { + appTheme.preferredDark = preferences.appearance.theme + } const locale = preferences.localization.locale const behavior = preferences.behavior let settingsChanged = false @@ -1073,10 +1122,12 @@ async function fetchCredentials() { if (refreshId !== credentialsRefreshId) return clearLiveNotifications() - await logout().catch(handleError) + await removeUser(creds.user_id).catch(handleError) if (refreshId !== credentialsRefreshId) return credentials.value = null + liveNotificationsEnabled = false + await fetchStoredModrinthAccounts() return } creds.user = await get_user(creds.user_id, 'bypass').catch(handleError) @@ -1084,11 +1135,12 @@ async function fetchCredentials() { } credentials.value = creds ?? null liveNotificationsEnabled = !!creds?.session + await fetchStoredModrinthAccounts() } -async function signIn(flow = 'sign-in') { +async function signIn(flow = 'sign-in', addAccount = false) { try { - await login(flow) + await login(flow, addAccount) await fetchCredentials() } catch (error) { if ( @@ -1096,35 +1148,190 @@ async function signIn(flow = 'sign-in') { typeof error['message'] === 'string' && error.message.includes('Login canceled') ) { - // Not really an error due to being a result of user interaction, show nothing + // user closed the login window } else { handleError(error) } } } -async function requestSignIn(flow = 'sign-in') { - await modrinthLoginModal.value?.showSigningIn(flow) +async function requestSignIn(flow = 'sign-in', addAccount = false) { + await modrinthLoginModal.value?.showSigningIn(flow, addAccount) } -async function requestModrinthAuth(flow = 'sign-in') { - await signIn(flow) +async function requestModrinthAuth(flow = 'sign-in', addAccount = false) { + await signIn(flow, addAccount) return !!credentials.value?.session } async function logOut() { - await performLogOut() + if (!credentials.value?.user) return + await completeAccountSwitch(() => logout()) } -async function performLogOut() { - credentialsRefreshId++ - credentials.value = undefined - clearLiveNotifications() +async function fetchStoredModrinthAccounts() { + const all = (await getAllCreds().catch(handleError)) ?? [] + const ids = all.map((account) => account.user_id) + const users = ids.length ? ((await get_user_many(ids).catch(handleError)) ?? []) : [] + const usersById = new Map(users.map((user) => [user.id, user])) - await logout().catch(handleError) - await fetchCredentials() + storedModrinthAccounts.value = all.map((account) => ({ + ...account, + user: usersById.get(account.user_id) ?? { + id: account.user_id, + username: account.user_id, + avatar_url: null, + role: 'developer', + }, + })) } +const accountSwitcherAccounts = computed(() => { + const currentId = credentials.value?.session ? credentials.value.user_id : null + + return storedModrinthAccounts.value.map((account) => ({ + ...account, + optionId: `account-${account.user_id}`, + current: account.user_id === currentId, + })) +}) + +const profileButtonTooltip = computed(() => { + if (credentials.value === undefined) return formatMessage(messages.loadingProfile) + if (credentials.value?.user) return formatMessage(messages.modrinthAccount) + return formatMessage(messages.signInToModrinthAccount) +}) + +const accountSwitcherOptions = computed(() => [ + ...accountSwitcherAccounts.value.map((account) => ({ + id: account.optionId, + label: account.user.username, + selected: account.current, + action: () => switchModrinthAccount(account), + trailingAction: { + label: formatMessage(messages.removeAccount), + icon: XIcon, + color: 'red', + action: () => forgetModrinthAccount(account.user_id), + }, + })), + { + type: 'divider', + }, + { + id: 'add-account', + label: formatMessage(messages.addAccount), + icon: PlusIcon, + action: () => requestSignIn('sign-in', true), + }, +]) + +const isSwitchingAccount = ref(false) + +async function persistAppearanceTheme(appearance) { + const selectedTheme = appearance.auto ? 'system' : appearance.theme + appTheme.applyAccountAppearance(appearance) + const settings = await getSettings() + if (settings.theme !== selectedTheme) { + settings.theme = selectedTheme + await setSettings(settings) + } +} + +async function completeAccountSwitch(task) { + isSwitchingAccount.value = true + await nextTick() + try { + await task() + window.location.reload() + } catch (error) { + isSwitchingAccount.value = false + handleError(error) + } +} + +async function switchModrinthAccount(account) { + if (account.current) return + + const cached = getAccountAppearance(account.user_id) + if (cached) await persistAppearanceTheme(cached) + await nextTick() + + await completeAccountSwitch(async () => { + await setActive(account.user_id) + if (cached) return + + try { + const preferences = await get_user_preferences(account.user_id) + rememberAccountAppearance(account.user_id, preferences.appearance) + await persistAppearanceTheme(preferences.appearance) + await nextTick() + } catch { + // no saved appearance for this account + } + }) +} + +async function forgetModrinthAccount(userId) { + const isCurrent = credentials.value?.user_id === userId && !!credentials.value?.session + if (isCurrent) { + await completeAccountSwitch(() => removeUser(userId)) + return + } + + await removeUser(userId).catch(handleError) + await fetchStoredModrinthAccounts() +} + +const modrinthAccountMenuOptions = computed(() => [ + { + id: 'view-profile', + label: formatMessage(messages.viewProfile), + icon: UserIcon, + action: () => router.push(`/user/${encodeURIComponent(credentials.value.user.username)}`), + }, + { + id: 'plus', + label: formatMessage(messages.upgradeToModrinthPlus), + icon: ArrowBigUpDashIcon, + type: 'link', + href: 'https://modrinth.plus?app', + target: '_blank', + tone: 'purple', + shown: !hasPlus.value, + }, + { + id: 'add-friend', + label: formatMessage(messages.addFriend), + icon: UserPlusIcon, + action: () => friendsList.value?.showAddFriendModal(), + }, + { + id: 'flags', + label: formatMessage(commonSettingsMessages.featureFlags), + icon: ToggleRightIcon, + shown: appSettings.devMode, + action: () => appSettingsModal.value?.showFeatureFlags(), + }, + { + type: 'divider', + }, + { + id: 'switch-account', + label: formatMessage(messages.switchAccount), + icon: ArrowLeftRightIcon, + type: 'submenu', + options: accountSwitcherOptions.value, + }, + { + id: 'sign-out', + label: formatMessage(commonMessages.signOutButton), + icon: LogOutIcon, + tone: 'red', + action: () => logOut(), + }, +]) + async function fetchIntercomToken() { const creds = await getCreds() if (!creds?.session) { @@ -1184,6 +1391,7 @@ onMounted(() => { }) const accounts = ref(null) +const friendsList = ref(null) provide('accountsCard', accounts) useAppEvent('command', handleCommand, appEvents) @@ -1711,12 +1919,39 @@ function handleAuxClick(e) { } } +function handleContextMenu(event) { + const target = event.target + if (target instanceof Element) { + if (target.closest('img, textarea, [contenteditable="true"]')) return + const input = target.closest('input') + if ( + input && + !['button', 'checkbox', 'radio', 'submit', 'reset', 'file', 'range'].includes(input.type) + ) { + return + } + } + + const selection = window.getSelection() + if ( + target instanceof Node && + selection && + !selection.isCollapsed && + selection.containsNode(target, true) + ) { + return + } + + event.preventDefault() +} + provideAppUpdateDownloadProgress(appUpdateDownload)