diff --git a/.github/workflows/check-generic.yml b/.github/workflows/check-generic.yml index 1953ccedf4..25fc4ad8ef 100644 --- a/.github/workflows/check-generic.yml +++ b/.github/workflows/check-generic.yml @@ -20,8 +20,8 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9 + - uses: taiki-e/install-action@b6ff580856c41316412a0b9b60540fbc6f8c82cc # v2.86.7 with: - tool: tombi + tool: tombi@1.4.1 - run: tombi lint - run: tombi fmt --check diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml index 703431d240..79b73c57ef 100644 --- a/.github/workflows/frontend-deploy.yml +++ b/.github/workflows/frontend-deploy.yml @@ -125,8 +125,7 @@ jobs: run: pnpm install - name: Build frontend - working-directory: ./apps/frontend - run: pnpm build + run: pnpm web:build env: CF_PAGES_BRANCH: ${{ inputs.head_ref || github.ref_name }} CF_PAGES_COMMIT_SHA: ${{ inputs.head_sha || github.sha }} diff --git a/.github/workflows/frontend-docker.yml b/.github/workflows/frontend-docker.yml new file mode 100644 index 0000000000..cd63875f11 --- /dev/null +++ b/.github/workflows/frontend-docker.yml @@ -0,0 +1,99 @@ +name: Frontend Docker + +on: + push: + branches: + - main + - prod + paths: + - 'apps/frontend/**/*' + - 'packages/ui/**/*' + - 'packages/utils/**/*' + - 'packages/assets/**/*' + - 'packages/moderation/**/*' + - 'packages/api-client/**/*' + - 'packages/blog/**/*' + - '**/pnpm-*.yaml' + - .github/workflows/frontend-docker.yml + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }} + +jobs: + build: + name: Build frontend + runs-on: namespace-profile-modrinth-frontend + permissions: + contents: read + steps: + - name: Checkout code + uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + + - name: Configure environment + id: meta + env: + REF: ${{ github.ref }} + run: | + if [ "$REF" = "refs/heads/main" ]; then + echo "env=staging" >> $GITHUB_OUTPUT + else + echo "env=production" >> $GITHUB_OUTPUT + fi + + - name: Setup Node + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version-file: .nvmrc + + - name: Enable Corepack + run: corepack enable + + - name: Set up caches + uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1 + with: + cache: | + pnpm + + - name: Inject build variables + working-directory: ./apps/frontend + run: | + if [ "${{ steps.meta.outputs.env }}" == "staging" ]; then + echo "Injecting staging variables from wrangler.jsonc..." + jq -r '.env.staging.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV + else + echo "Injecting production variables from wrangler.jsonc..." + jq -r '.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV + fi + + - name: Install dependencies + working-directory: ./apps/frontend + run: pnpm install + + - name: Build frontend + run: pnpm web:build + env: + NITRO_PRESET: node-server + BUILD_ENV: ${{ steps.meta.outputs.env }} + CF_PAGES_BRANCH: ${{ github.ref_name }} + CF_PAGES_COMMIT_SHA: ${{ github.sha }} + + - name: Stage Docker context + run: | + mkdir -p apps/frontend/docker-stage + cp -r apps/frontend/.output apps/frontend/docker-stage/.output + + - name: Upload Docker context + uses: namespace-actions/upload-artifact@f6ccaacc655aec41b93af180d1d7eef21af862d2 # v1.0.3 + with: + name: frontend-docker-context + retention-days: 1 + path: apps/frontend/docker-stage + + docker-build: + needs: [build] + uses: SparkUniverse/workflows/.github/workflows/docker-build.yaml@main + with: + image-name: frontend + dockerfile-path: apps/frontend/Dockerfile + artifacts-name: frontend-docker-context diff --git a/.github/workflows/frontend-preview.yml b/.github/workflows/frontend-preview.yml index df17e1786c..16e76136fd 100644 --- a/.github/workflows/frontend-preview.yml +++ b/.github/workflows/frontend-preview.yml @@ -70,10 +70,9 @@ jobs: run: pnpm install - name: Build Storybook - working-directory: ./packages/ui env: NODE_OPTIONS: --max-old-space-size=6144 - run: pnpm run build-storybook + run: pnpm build-storybook - name: Configure short SHA id: meta diff --git a/.github/workflows/i18n-pull.yml b/.github/workflows/i18n-pull.yml index df5ceffa58..185f7815e6 100644 --- a/.github/workflows/i18n-pull.yml +++ b/.github/workflows/i18n-pull.yml @@ -8,6 +8,10 @@ on: concurrency: group: i18n-management +permissions: + contents: write + pull-requests: write + jobs: pull_translations: name: 'Pull translations from Crowdin' @@ -38,23 +42,17 @@ jobs: flight_failure "CROWDIN_PERSONAL_TOKEN secret is not defined (required to push)" fi - if [ "$CROWDIN_GH_TOKEN_DEFINED" != true ]; then - flight_failure "CROWDIN_GH_TOKEN secret is not defined (required to make pull requests)" - fi - if [ "$PREFLIGHT_CHECK_RESULT" = false ]; then exit 1 fi env: CROWDIN_PROJECT_ID_DEFINED: ${{ vars.CROWDIN_PROJECT_ID != '' }} CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }} - CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }} - name: Checkout uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 with: ref: ${{ github.ref }} - token: ${{ secrets.CROWDIN_GH_TOKEN }} - name: Setup Node uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 @@ -67,12 +65,6 @@ jobs: - name: Install script dependencies run: pnpm install --frozen-lockfile --ignore-scripts - - name: Configure Git author - id: git-author - uses: MarcoIeni/git-config@59144859caf016f8b817a2ac9b051578729173c4 # v0.1.2 - env: - GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }} - # # Because --all flag of Crowdin CLI is currently broken we need to create a fake source file # # so that the CLI won't omit translations for it. See https://github.com/crowdin/crowdin-cli/issues/724 # - name: Write fake sources @@ -116,7 +108,4 @@ jobs: body-path: .github/templates/crowdin-pr.md commit-message: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})' branch: crowdin-pull/${{ steps.branch-name.outputs.branch_name }} - author: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>' - committer: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>' labels: sync - token: ${{ secrets.CROWDIN_GH_TOKEN }} diff --git a/.gitignore b/.gitignore index 9d27dcaf5e..d442251099 100644 --- a/.gitignore +++ b/.gitignore @@ -55,6 +55,7 @@ Thumbs.db # frontend generated files apps/frontend/src/generated +/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-coverage.generated.ts .turbo target diff --git a/.idea/code.iml b/.idea/code.iml index 3861923c60..a1d7c854b4 100644 --- a/.idea/code.iml +++ b/.idea/code.iml @@ -28,6 +28,7 @@ + diff --git a/Cargo.lock b/Cargo.lock index 39f5e354f4..51fb4abe6c 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2239,6 +2239,16 @@ dependencies = [ "static_assertions", ] +[[package]] +name = "component-derive" +version = "0.0.0" +dependencies = [ + "darling 0.23.0", + "proc-macro2", + "quote", + "syn 2.0.106", +] + [[package]] name = "compression-codecs" version = "0.4.31" @@ -2682,10 +2692,10 @@ dependencies = [ "futures", "indexmap 2.11.4", "itertools 0.14.0", + "quick-xml 0.38.3", "reqwest 0.12.24", "rust-s3", "serde", - "serde-xml-rs", "serde_json", "sha1_smol", "thiserror 2.0.17", @@ -5497,6 +5507,7 @@ dependencies = [ "clickhouse", "color-eyre", "color-thief", + "component-derive", "const_format", "dashmap", "derive_more 2.1.1", @@ -5574,16 +5585,6 @@ dependencies = [ "zxcvbn", ] -[[package]] -name = "labrinth-derive" -version = "0.0.0" -dependencies = [ - "darling 0.23.0", - "proc-macro2", - "quote", - "syn 2.0.106", -] - [[package]] name = "language-tags" version = "0.3.2" @@ -9449,18 +9450,6 @@ dependencies = [ "typeid", ] -[[package]] -name = "serde-xml-rs" -version = "0.8.1" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "53630160a98edebde0123eb4dfd0fce6adff091b2305db3154a9e920206eb510" -dependencies = [ - "log", - "serde", - "thiserror 1.0.69", - "xml-rs", -] - [[package]] name = "serde_bytes" version = "0.11.19" diff --git a/Cargo.toml b/Cargo.toml index 0283fe8182..c6483af252 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,8 +8,8 @@ members = [ "packages/aditude", "packages/app-lib", "packages/ariadne", + "packages/component-derive", "packages/daedalus", - "packages/labrinth-derive", "packages/modrinth-content-management", "packages/modrinth-log", "packages/modrinth-maxmind", @@ -43,9 +43,7 @@ async-stripe = { version = "0.41.0", default-features = false, features = [ "runtime-tokio-hyper-rustls", ] } async-trait = "0.1.89" -async-tungstenite = { version = "0.31.0", default-features = false, features = [ - "futures-03-sink" -] } +async-tungstenite = { version = "0.31.0", default-features = false, features = ["futures-03-sink"] } async-walkdir = "2.1.0" async_zip = "0.0.18" aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [ @@ -63,13 +61,12 @@ censor = "0.3.0" chardetng = "0.1.17" chrono = "0.4.42" chumsky = "0.9.3" -cidre = { version = "0.15.0", default-features = false, features = [ - "macos_15_0" -] } +cidre = { version = "0.15.0", default-features = false, features = ["macos_15_0"] } clap = "4.5.48" clickhouse = "0.14.0" color-eyre = "0.6.5" color-thief = "0.2.2" +component-derive = { path = "packages/component-derive" } const_format = "0.2.34" core-foundation = "0.10.1" core-graphics = "0.24.0" @@ -164,10 +161,7 @@ redis = "1.4.1" regex = "1.12.2" reqwest = { version = "0.12.24", default-features = false } rgb = "0.8.52" -rust_decimal = { version = "1.39.0", features = [ - "serde-with-float", - "serde-with-str" -] } +rust_decimal = { version = "1.39.0", features = ["serde-with-float", "serde-with-str"] } rust_iso3166 = "0.1.14" rust-s3 = { version = "0.37.0", default-features = false, features = [ "fail-on-err", @@ -193,7 +187,6 @@ serde_cbor = "0.11.2" serde_ini = "0.2.0" serde_json = "1.0.145" serde_with = "3.15.0" -serde-xml-rs = "0.8.1" # Also an XML (de)serializer, consider dropping yaserde in favor of this sha1 = "0.10.6" sha1_smol = { version = "1.0.1", features = ["std"] } sha2 = "0.10.9" diff --git a/_typos.toml b/_typos.toml index 7775afa964..944064d355 100644 --- a/_typos.toml +++ b/_typos.toml @@ -6,13 +6,16 @@ extend-exclude = [ "packages/utils/", "packages/ui/", "packages/blog/", - # contains licenses like `CC-BY-ND-4.0` - "packages/moderation/src/data/stages/license.ts", - "packages/moderation/src/utils.ts", - # contains payment card IDs like `IY1VMST1MOXS` which are flagged - "apps/labrinth/src/queue/payouts/mod.rs", - # contains domain names with deliberate typos - "apps/labrinth/assets/disposable_email_blocklist.txt" +] + +[default] +extend-ignore-re = [ + # Ignore lines that end with `// typos:ignore` + "(?Rm)^.*(#|//)\\s*typos:ignore$", + # Ignore the line after `// typos:ignore`: + "(#|//)\\s*typos:ignore\\n.*", + # Ignore blocks between `// typos:off` and `// typos:on` + "(?s)(#|//)\\s*typos:off.*?\\n\\s*(#|//)\\s*typos:on", ] [default.extend-words] diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json index 18ff367db0..abe6e55c0f 100644 --- a/apps/app-frontend/package.json +++ b/apps/app-frontend/package.json @@ -14,6 +14,7 @@ "test": "vue-tsc --noEmit" }, "dependencies": { + "@dnd-kit/vue": "^0.5.0", "@modrinth/api-client": "workspace:^", "@modrinth/assets": "workspace:*", "@modrinth/ui": "workspace:*", @@ -37,7 +38,6 @@ "intl-messageformat": "^10.7.7", "ofetch": "^1.3.4", "overlayscrollbars": "^2.15.1", - "pinia": "^3.0.0", "posthog-js": "^1.158.2", "three": "^0.172.0", "vite-svg-loader": "^5.1.0", diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index 3db155776b..33afd4d216 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -13,11 +13,10 @@ import { ChevronLeftIcon, ChevronRightIcon, CompassIcon, - HomeIcon, - LibraryIcon, LogInIcon, LogOutIcon, NewspaperIcon, + PlayIcon, PlusIcon, RefreshCwIcon, RightArrowIcon, @@ -57,7 +56,7 @@ import { import { renderString } from '@modrinth/utils' import { useQuery, useQueryClient } from '@tanstack/vue-query' import { getVersion } from '@tauri-apps/api/app' -import { invoke } from '@tauri-apps/api/core' +import { convertFileSrc, invoke } from '@tauri-apps/api/core' import { getCurrentWindow } from '@tauri-apps/api/window' import { fetch as tauriFetch } from '@tauri-apps/plugin-http' import { openUrl } from '@tauri-apps/plugin-opener' @@ -74,6 +73,7 @@ import FriendsList from '@/components/ui/friends/FriendsList.vue' import HostingUpdateRequired from '@/components/ui/HostingUpdateRequired.vue' import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue' import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue' +import IconEditorModal from '@/components/ui/instance_settings/icon-editor-modal/index.vue' import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue' import MinecraftRequiredModal from '@/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue' import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue' @@ -82,6 +82,9 @@ import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyIn import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue' import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue' import NavButton from '@/components/ui/NavButton.vue' +import NewIconEditorNotification from '@/components/ui/new-icon-editor-notification/index.vue' +import { shouldShowNewIconEditorNotification } from '@/components/ui/new-icon-editor-notification/show-notification' +import OnboardingChecklist from '@/components/ui/onboarding-checklist/index.vue' import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue' import PromotionWrapper from '@/components/ui/PromotionWrapper.vue' import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue' @@ -91,6 +94,9 @@ import SurveyPopup from '@/components/ui/SurveyPopup.vue' import WindowControls from '@/components/ui/WindowControls.vue' 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 { config } from '@/config' import { hide_ads_window, @@ -144,8 +150,7 @@ import { setupProviders } from '@/providers/setup' import { setupAppEventsProvider } from '@/providers/setup/app-events' import { setupAuthProvider } from '@/providers/setup/auth' import { setupLoadingStateProvider } from '@/providers/setup/loading-state' -import { useError } from '@/store/error.js' -import { useTheming } from '@/store/state' +import { setupAppUserPreferencesProvider } from '@/providers/setup/user-preferences.ts' import { appMessages } from '@/utils/app-messages' import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer' @@ -154,7 +159,8 @@ import { AppNotificationManager } from './providers/app-notifications' import { AppPopupNotificationManager } from './providers/app-popup-notifications' import { appSettingsModalOpenProfileKey } from './providers/app-settings-modal' -const themeStore = useTheming() +const appSettings = useAppSettings() +const appTheme = useTheme() const router = useRouter() const route = useRoute() const { channel: appEventChannel, events: appEvents } = setupAppEventsProvider() @@ -198,7 +204,7 @@ const credentials = ref() let credentialsRefreshId = 0 const sidebarToggled = ref(true) watch( - () => themeStore.toggleSidebar, + () => appSettings.toggleSidebar, (toggleSidebar) => { sidebarToggled.value = !toggleSidebar }, @@ -218,7 +224,7 @@ const hostingUpdateRequired = computed( appUpdateState.updatesEnabled.value, ) const prideFundraiserEnabled = computed( - () => themeStore.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE, + () => appSettings.getFeatureFlag('pride_fundraiser') && Date.now() < PRIDE_FUNDRAISER_END_DATE, ) const hostingIntercomIdentityKey = computed(() => { const rawServerId = route.params.id @@ -248,7 +254,7 @@ useAppEvent( 'warning', (event) => addNotification({ - title: 'Warning', + title: formatMessage(messages.warning), text: event.message, type: 'warning', }), @@ -321,30 +327,79 @@ providePageContext({ intercomBubble: hostingIntercom.intercomBubble, featureFlags: { serverRamAsBytesAlwaysOn: computed(() => - themeStore.getFeatureFlag('server_ram_as_bytes_always_on'), + appSettings.getFeatureFlag('server_ram_as_bytes_always_on'), ), }, openExternalUrl: (url) => void openUrl(url), }) provideModalBehavior({ - noblur: computed(() => !themeStore.advancedRendering), + noblur: computed(() => !appTheme.advancedRendering), onShow: () => take_ads_window_hold(), onHide: () => release_ads_window_hold(), }) +const creationIconEditorModal = ref(null) +const creationGeneratedIcon = ref(null) +const creationIconTarget = ref('creation-flow') + const { installationModal, unknownPackWarningModal, fetchExistingInstanceNames, handleCreate, handleBrowseModpacks, - searchModpacks, - getProjectVersions, + searchProjects, getLoaderManifest, setModpackAlreadyInstalledModal, handleModpackDuplicateCreateAnyway, handleModpackDuplicateGoToInstance, -} = setupProviders(tauriApiClient, notificationManager, popupNotificationManager) + onboardingChecklist, +} = setupProviders( + tauriApiClient, + notificationManager, + popupNotificationManager, + appEvents, + (iconPath) => + creationGeneratedIcon.value?.path === iconPath ? creationGeneratedIcon.value.config : null, +) +const { hasLoggedIntoMinecraft, hasLoggedIntoModrinth, showChecklist } = onboardingChecklist +const showFriendsList = computed(() => !showChecklist.value || hasLoggedIntoModrinth.value) + +async function randomizeCreationIcon() { + const generated = await creationIconEditorModal.value?.randomizeAndSave() + if (!generated) return null + + creationGeneratedIcon.value = { path: generated.iconPath, config: generated.config } + return { + path: generated.iconPath, + previewUrl: convertFileSrc(generated.iconPath), + } +} + +function customizeCreationIcon() { + creationIconTarget.value = 'creation-flow' + creationIconEditorModal.value?.show() +} + +function customizeContentInstallIcon() { + creationIconTarget.value = 'content-install' + creationIconEditorModal.value?.show() +} + +function onCreationIconSaved(iconPath, config) { + creationGeneratedIcon.value = { path: iconPath, config } + if (creationIconTarget.value === 'content-install') { + modInstallModal.value?.setIcon(iconPath, convertFileSrc(iconPath)) + return + } + + const context = installationModal.value?.ctx + if (!context) return + + context.instanceIcon.value = null + context.instanceIconUrl.value = convertFileSrc(iconPath) + context.instanceIconPath.value = iconPath +} const news = ref([]) const displayedServerInviteNotifications = new Set() @@ -360,7 +415,6 @@ window.addEventListener('online', () => { offline.value = false }) -const showOnboarding = ref(false) const nativeDecorations = ref(false) const os = ref('') @@ -425,6 +479,15 @@ const { formatMessage } = useVIntl() 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' }, + updateDownloadMissingVersion: { + id: 'app.update.download-error.missing-version', + defaultMessage: 'Failed to download update: no version available', + }, updateInstalledToastTitle: { id: 'app.update.complete-toast.title', defaultMessage: 'Version {version} was successfully installed!', @@ -467,10 +530,6 @@ const messages = defineMessages({ id: 'app.nav.home', defaultMessage: 'Home', }, - library: { - id: 'app.nav.library', - defaultMessage: 'Library', - }, modrinthHosting: { id: 'app.nav.modrinth-hosting', defaultMessage: 'Modrinth Hosting', @@ -530,6 +589,7 @@ function handleAdsConsentRequired(required) { } const notification = addPopupNotification({ + contentType: 'standard', title: formatMessage(messages.adsConsentTitle), text: formatMessage(messages.adsConsentBody), type: 'info', @@ -562,17 +622,26 @@ function handleAdsConsentRequired(required) { } async function setupApp() { + await onboardingChecklist.initialize() + + if (shouldShowNewIconEditorNotification(showChecklist.value)) { + addPopupNotification({ + contentType: 'custom', + component: NewIconEditorNotification, + autoCloseMs: null, + }) + } + const { native_decorations, theme, locale, telemetry, - collapsed_navigation, hide_nametag_skins_page, advanced_rendering, - onboarded, - default_page, toggle_sidebar, + sync_theme_across_devices, + sync_behavior_across_devices, developer_mode, feature_flags, pending_update_toast_for_version, @@ -583,26 +652,21 @@ async function setupApp() { i18n.global.locale.value = locale } - if (default_page === 'Library') { - await router.push('/library') - } - os.value = await getOS() const dev = await isDev() isDevEnvironment.value = dev const version = await getVersion() - showOnboarding.value = !onboarded - nativeDecorations.value = native_decorations if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations) - themeStore.setThemeState(theme) - themeStore.collapsedNavigation = collapsed_navigation - themeStore.advancedRendering = advanced_rendering - themeStore.hideNametagSkinsPage = hide_nametag_skins_page - themeStore.toggleSidebar = toggle_sidebar - themeStore.devMode = developer_mode - themeStore.featureFlags = feature_flags + appTheme.preferred = theme + appTheme.advancedRendering = advanced_rendering + appTheme.syncAcrossDevices = sync_theme_across_devices + appSettings.syncBehaviorAcrossDevices = sync_behavior_across_devices + 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() @@ -614,7 +678,7 @@ async function setupApp() { if (telemetry) { initAnalytics() if (dev) debugAnalytics() - trackEvent('Launched', { version, dev, onboarded }) + trackEvent('Launched', { version, dev }) } if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault()) @@ -818,6 +882,7 @@ const { projectInfo: contentInstallProjectInfo, handleInstallToInstance, handleCreateAndInstall, + prepareNewInstance, handleNavigate: handleContentInstallNavigate, handleCancel: handleContentInstallCancel, setContentInstallModal, @@ -837,6 +902,35 @@ const { handleIncompatibilityWarningCancel: handleContentInstallIncompatibilityWarningCancel, } = contentInstall +async function prepareCreationProjectInstall(projectId, projectType) { + if (projectType === 'modpack') { + await contentInstall.install( + projectId, + null, + null, + 'CreationModalProject', + undefined, + (instanceId) => void router.push(`/instance/${encodeURIComponent(instanceId)}`), + ) + return null + } + + await prepareNewInstance(projectId) + const info = contentInstallProjectInfo.value + if (!info) throw new Error(`Project information is unavailable: '${projectId}'`) + + return { + projectId, + title: info.title, + iconUrl: info.iconUrl, + link: info.link, + owner: info.owner, + compatibleLoaders: [...contentInstallLoaders.value], + gameVersions: [...contentInstallGameVersions.value], + releaseGameVersions: new Set(contentInstallReleaseGameVersions.value), + } +} + const serverInstall = createServerInstall({ router, handleError, @@ -870,7 +964,7 @@ watch(incompatibilityWarningModal, (modal) => { } }) -setupAuthProvider(credentials, async (_redirectPath, flow, options) => { +const authProvider = setupAuthProvider(credentials, async (_redirectPath, flow, options) => { if (options?.showModal === false) { await signIn(flow) } else { @@ -878,6 +972,80 @@ setupAuthProvider(credentials, async (_redirectPath, flow, options) => { } }) +const userPreferences = setupAppUserPreferencesProvider(authProvider, notificationManager) +let userPreferencesSync = Promise.resolve() + +watch( + [userPreferences.preferences, stateInitialized], + ([preferences, initialized]) => { + if (!preferences || !initialized) return + + userPreferencesSync = userPreferencesSync + .then(async () => { + const settings = await getSettings() + const selectedTheme = preferences.appearance.auto ? 'system' : preferences.appearance.theme + const locale = preferences.localization.locale + const behavior = preferences.behavior + let settingsChanged = false + + if (appTheme.syncAcrossDevices && appTheme.preferred !== selectedTheme) { + appTheme.preferred = selectedTheme + } + if (i18n.global.locale.value !== locale) { + i18n.global.locale.value = locale + } + + if (appTheme.syncAcrossDevices && settings.theme !== selectedTheme) { + settings.theme = selectedTheme + settingsChanged = true + } + if (settings.locale !== locale) { + settings.locale = locale + settingsChanged = true + } + + if (behavior && appSettings.syncBehaviorAcrossDevices) { + const behaviorFeatureFlags = { + worlds_in_home: behavior.show_jump_in, + compact_instance_cards: behavior.compact_instance_cards, + show_instance_play_time: behavior.show_play_time, + skip_unknown_pack_warning: !behavior.warn_on_unknown_modpacks, + skip_non_essential_warnings: behavior.skip_non_essential_warnings, + } + + appSettings.toggleSidebar = behavior.hide_right_sidebar + appSettings.hideNametagSkinsPage = behavior.hide_nametag + Object.assign(appSettings.featureFlags, behaviorFeatureFlags) + + if (settings.hide_on_process_start !== behavior.minimize_app) { + settings.hide_on_process_start = behavior.minimize_app + settingsChanged = true + } + if (settings.toggle_sidebar !== behavior.hide_right_sidebar) { + settings.toggle_sidebar = behavior.hide_right_sidebar + settingsChanged = true + } + if (settings.hide_nametag_skins_page !== behavior.hide_nametag) { + settings.hide_nametag_skins_page = behavior.hide_nametag + settingsChanged = true + } + for (const [flag, value] of Object.entries(behaviorFeatureFlags)) { + if (settings.feature_flags[flag] !== value) { + settings.feature_flags[flag] = value + settingsChanged = true + } + } + } + + if (settingsChanged) { + await setSettings(settings) + } + }) + .catch(handleError) + }, + { immediate: true }, +) + async function validateSession(sessionToken) { try { const response = await tauriFetch(`${config.labrinthBaseUrl}/v2/user`, { @@ -1090,17 +1258,16 @@ async function handleLiveNotification(notification) { if (generation !== liveNotificationGeneration) return const popupNotification = addPopupNotification({ + contentType: 'toast', title: serverName, + type: 'server-invite', + actorName: invitedBy?.username ?? null, + actorAvatarUrl: invitedBy?.avatar_url ?? null, + entityName: serverName, autoCloseMs: null, - toast: { - type: 'server-invite', - actorName: invitedBy?.username ?? null, - actorAvatarUrl: invitedBy?.avatar_url ?? null, - entityName: serverName, - onAccept: () => acceptServerInviteNotification(notification), - onDecline: () => declineServerInviteNotification(notification), - onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null), - }, + onAccept: () => acceptServerInviteNotification(notification), + onDecline: () => declineServerInviteNotification(notification), + onOpenActor: () => openServerInviteInviterProfile(invitedBy?.username ?? null), }) serverInvitePopupNotificationIds.add(popupNotification.id) } @@ -1277,6 +1444,7 @@ function showDelayedUpdatePopup() { if (metered.value && !finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.updateAvailable), text: formatMessage(updatePopupMessages.meteredBody, { version: update.version }), type: 'info', @@ -1298,6 +1466,7 @@ function showDelayedUpdatePopup() { }) } else if (finishedDownloading.value) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.downloadComplete), text: formatMessage(updatePopupMessages.downloadedBody, { version: update.version, @@ -1396,6 +1565,7 @@ async function checkLinuxUpdates() { const nextPopupTime = getNextAppUpdatePopupTime(latestVersion) if (nextPopupTime !== null && Date.now() >= nextPopupTime) { addPopupNotification({ + contentType: 'standard', title: formatMessage(updatePopupMessages.updateAvailable), text: formatMessage(updatePopupMessages.linuxBody, { version: latestVersion }), type: 'info', @@ -1415,7 +1585,7 @@ async function downloadAvailableUpdate() { async function downloadUpdate(versionToDownload) { if (!versionToDownload) { - handleError(`Failed to download update: no version available`) + handleError(formatMessage(messages.updateDownloadMissingVersion)) return } @@ -1432,9 +1602,8 @@ async function downloadUpdate(versionToDownload) { .then(() => { downloading.value = false finishedDownloading.value = true - unlistenUpdateDownload?.().then(() => { - unlistenUpdateDownload = null - }) + unlistenUpdateDownload?.() + unlistenUpdateDownload = null console.log('Finished downloading!') markAppUpdateActionable(versionToDownload.version, 'downloaded') scheduleDelayedUpdatePopup() @@ -1551,7 +1720,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
+
- - + + - - -
@@ -1773,7 +1945,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
{{ route.fullPath }} @@ -1808,7 +1980,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload) @@ -1823,9 +1997,17 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :class="{ 'pb-12': !hasPlus }" data-overlayscrollbars-initialize > +
-
+

{{ formatMessage(messages.playingAs) }}

@@ -1833,7 +2015,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
-
+
@@ -1897,6 +2082,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload) :preferred-game-version="contentInstallPreferredGameVersion" :release-game-versions="contentInstallReleaseGameVersions" :project-info="contentInstallProjectInfo" + :randomize-icon="randomizeCreationIcon" + :customize-icon="customizeContentInstallIcon" @install="handleInstallToInstance" @create-and-install="handleCreateAndInstall" @navigate="handleContentInstallNavigate" diff --git a/apps/app-frontend/src/assets/icons/instance-file.svg b/apps/app-frontend/src/assets/icons/instance-file.svg new file mode 100644 index 0000000000..437ade0188 --- /dev/null +++ b/apps/app-frontend/src/assets/icons/instance-file.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/app-frontend/src/assets/instance-icons/backpack.png b/apps/app-frontend/src/assets/instance-icons/backpack.png new file mode 100755 index 0000000000..48e085a82c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/backpack.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/beacon.png b/apps/app-frontend/src/assets/instance-icons/beacon.png new file mode 100755 index 0000000000..f292990c45 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/beacon.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/blue-shark.png b/apps/app-frontend/src/assets/instance-icons/blue-shark.png new file mode 100755 index 0000000000..b2be9cbe6d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/blue-shark.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/bookshelf.png b/apps/app-frontend/src/assets/instance-icons/bookshelf.png new file mode 100755 index 0000000000..8b5cd311ef Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/bookshelf.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/brown-bear.png b/apps/app-frontend/src/assets/instance-icons/brown-bear.png new file mode 100755 index 0000000000..7d79594bad Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/brown-bear.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cake.png b/apps/app-frontend/src/assets/instance-icons/cake.png new file mode 100755 index 0000000000..ad91e8b7e0 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cake.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/campfire.png b/apps/app-frontend/src/assets/instance-icons/campfire.png new file mode 100755 index 0000000000..812af89118 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/campfire.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/chest.png b/apps/app-frontend/src/assets/instance-icons/chest.png new file mode 100755 index 0000000000..afb215e61d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/chest.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cogwheel.png b/apps/app-frontend/src/assets/instance-icons/cogwheel.png new file mode 100755 index 0000000000..aac5766e5c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cogwheel.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/command-block.png b/apps/app-frontend/src/assets/instance-icons/command-block.png new file mode 100755 index 0000000000..63970a023d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/command-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/cooking-pot.png b/apps/app-frontend/src/assets/instance-icons/cooking-pot.png new file mode 100755 index 0000000000..afc8b37262 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/cooking-pot.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/couch.png b/apps/app-frontend/src/assets/instance-icons/couch.png new file mode 100755 index 0000000000..ad38323aae Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/couch.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/crafting-table.png b/apps/app-frontend/src/assets/instance-icons/crafting-table.png new file mode 100755 index 0000000000..d167c30a0b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/crafting-table.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/creeper.png b/apps/app-frontend/src/assets/instance-icons/creeper.png new file mode 100755 index 0000000000..861875269b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/creeper.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/enchanting-table.png b/apps/app-frontend/src/assets/instance-icons/enchanting-table.png new file mode 100755 index 0000000000..4d1c29a0b7 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/enchanting-table.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/ender-chest.png b/apps/app-frontend/src/assets/instance-icons/ender-chest.png new file mode 100755 index 0000000000..4bf9085ab8 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/ender-chest.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/ender-dragon.png b/apps/app-frontend/src/assets/instance-icons/ender-dragon.png new file mode 100755 index 0000000000..d0b9048e2d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/ender-dragon.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/engine.png b/apps/app-frontend/src/assets/instance-icons/engine.png new file mode 100755 index 0000000000..438e17a270 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/engine.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/fabric.png b/apps/app-frontend/src/assets/instance-icons/fabric.png new file mode 100644 index 0000000000..c763735e73 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/fabric.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/forge.png b/apps/app-frontend/src/assets/instance-icons/forge.png new file mode 100644 index 0000000000..09f54201e8 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/forge.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/furnace.png b/apps/app-frontend/src/assets/instance-icons/furnace.png new file mode 100755 index 0000000000..207f2e8580 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/furnace.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/gizmo.png b/apps/app-frontend/src/assets/instance-icons/gizmo.png new file mode 100755 index 0000000000..ce11f1d199 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/gizmo.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/globe.png b/apps/app-frontend/src/assets/instance-icons/globe.png new file mode 100755 index 0000000000..e58bc94b76 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/globe.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/grass-block.png b/apps/app-frontend/src/assets/instance-icons/grass-block.png new file mode 100755 index 0000000000..2f4c618bde Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/grass-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/lantern.png b/apps/app-frontend/src/assets/instance-icons/lantern.png new file mode 100755 index 0000000000..770f066545 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/lantern.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/moobloom.png b/apps/app-frontend/src/assets/instance-icons/moobloom.png new file mode 100755 index 0000000000..52a54566d6 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/moobloom.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/mr-pack.png b/apps/app-frontend/src/assets/instance-icons/mr-pack.png new file mode 100755 index 0000000000..2d8d99bc3c Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/mr-pack.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/neoforge.png b/apps/app-frontend/src/assets/instance-icons/neoforge.png new file mode 100644 index 0000000000..f82d367d38 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/neoforge.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/orb.png b/apps/app-frontend/src/assets/instance-icons/orb.png new file mode 100755 index 0000000000..0d3236c696 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/orb.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png b/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png new file mode 100755 index 0000000000..ecaf7635f9 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/oxygen-distributor.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/pancakes.png b/apps/app-frontend/src/assets/instance-icons/pancakes.png new file mode 100755 index 0000000000..b2cf89ac6d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/pancakes.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/pickaxe.png b/apps/app-frontend/src/assets/instance-icons/pickaxe.png new file mode 100755 index 0000000000..5b4cc24916 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/pickaxe.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/poke-ball.png b/apps/app-frontend/src/assets/instance-icons/poke-ball.png new file mode 100755 index 0000000000..1e2a847368 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/poke-ball.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/quilt.png b/apps/app-frontend/src/assets/instance-icons/quilt.png new file mode 100644 index 0000000000..a829f58a44 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/quilt.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/redstone-block.png b/apps/app-frontend/src/assets/instance-icons/redstone-block.png new file mode 100755 index 0000000000..74a5203dec Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/redstone-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png b/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png new file mode 100755 index 0000000000..1eda1df523 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sculk-sensor.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/skeleton.png b/apps/app-frontend/src/assets/instance-icons/skeleton.png new file mode 100644 index 0000000000..8446bf7bd9 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/skeleton.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/skillet.png b/apps/app-frontend/src/assets/instance-icons/skillet.png new file mode 100755 index 0000000000..5b19a39e09 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/skillet.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/slime-block.png b/apps/app-frontend/src/assets/instance-icons/slime-block.png new file mode 100755 index 0000000000..e2eae3fdb5 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/slime-block.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/space-helmet.png b/apps/app-frontend/src/assets/instance-icons/space-helmet.png new file mode 100644 index 0000000000..b31f746909 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/space-helmet.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sticky-piston.png b/apps/app-frontend/src/assets/instance-icons/sticky-piston.png new file mode 100755 index 0000000000..47627f0fd5 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sticky-piston.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/sword.png b/apps/app-frontend/src/assets/instance-icons/sword.png new file mode 100755 index 0000000000..edb12fd95e Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/sword.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/terminal.png b/apps/app-frontend/src/assets/instance-icons/terminal.png new file mode 100755 index 0000000000..7b1e91244b Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/terminal.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tiny-potato.png b/apps/app-frontend/src/assets/instance-icons/tiny-potato.png new file mode 100755 index 0000000000..f696894ae7 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tiny-potato.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tire.png b/apps/app-frontend/src/assets/instance-icons/tire.png new file mode 100755 index 0000000000..0ea6ad995f Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tire.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/tnt.png b/apps/app-frontend/src/assets/instance-icons/tnt.png new file mode 100755 index 0000000000..9848ad076d Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/tnt.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png b/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png new file mode 100755 index 0000000000..f710969fb4 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/wrench-rinth.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/wrench.png b/apps/app-frontend/src/assets/instance-icons/wrench.png new file mode 100755 index 0000000000..c504bcd620 Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/wrench.png differ diff --git a/apps/app-frontend/src/assets/instance-icons/zombie.png b/apps/app-frontend/src/assets/instance-icons/zombie.png new file mode 100644 index 0000000000..b69c6b3ffa Binary files /dev/null and b/apps/app-frontend/src/assets/instance-icons/zombie.png differ diff --git a/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png b/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png new file mode 100644 index 0000000000..d9e8d54759 Binary files /dev/null and b/apps/app-frontend/src/assets/welcome/modrinth-social-icon.png differ diff --git a/apps/app-frontend/src/components/GridDisplay.vue b/apps/app-frontend/src/components/GridDisplay.vue deleted file mode 100644 index 5004b927b5..0000000000 --- a/apps/app-frontend/src/components/GridDisplay.vue +++ /dev/null @@ -1,360 +0,0 @@ - - - diff --git a/apps/app-frontend/src/components/RowDisplay.vue b/apps/app-frontend/src/components/RowDisplay.vue deleted file mode 100644 index 982b2ad0b1..0000000000 --- a/apps/app-frontend/src/components/RowDisplay.vue +++ /dev/null @@ -1,371 +0,0 @@ - - - - diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue index f1cb5fa479..6dacd0f6a2 100644 --- a/apps/app-frontend/src/components/ui/AccountsCard.vue +++ b/apps/app-frontend/src/components/ui/AccountsCard.vue @@ -20,6 +20,7 @@
- +

-

-
-
-
- -
-
-
- - - - - - diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue index 475c1f3f76..efac61720c 100644 --- a/apps/app-frontend/src/components/ui/ErrorModal.vue +++ b/apps/app-frontend/src/components/ui/ErrorModal.vue @@ -20,11 +20,11 @@ import { computed, ref } from 'vue' import { ChatIcon } from '@/assets/icons' import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue' +import { handleSevereError } from '@/composables/use-error.js' import { trackEvent } from '@/helpers/analytics' import { login as login_flow, set_default_user } from '@/helpers/auth.js' import { install_existing_instance } from '@/helpers/install' import { cancel_directory_change } from '@/helpers/settings.ts' -import { handleSevereError } from '@/store/error.js' const { handleError } = injectNotificationManager() diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue index d0cdd1410b..66e76126a2 100644 --- a/apps/app-frontend/src/components/ui/ExportModal.vue +++ b/apps/app-frontend/src/components/ui/ExportModal.vue @@ -7,8 +7,9 @@ import { FileTreeSelect, injectNotificationManager, injectPopupNotificationManager, + Input, NewModal, - StyledInput, + Textarea, useVIntl, } from '@modrinth/ui' import { save } from '@tauri-apps/plugin-dialog' @@ -194,7 +195,7 @@ function normalizeExportPath(path) {

{{ formatMessage(messages.modpackNameLabel) }}

- {{ formatMessage(messages.versionNumberLabel) }}

- {{ formatMessage(commonMessages.descriptionLabel) }}

- diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue index 7540fb5865..9f8338df6d 100644 --- a/apps/app-frontend/src/components/ui/Instance.vue +++ b/apps/app-frontend/src/components/ui/Instance.vue @@ -7,22 +7,39 @@ import { StopCircleIcon, TimerIcon, } from '@modrinth/assets' -import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' +import { + Avatar, + defineMessages, + IconButton, + injectNotificationManager, + useRelativeTime, + useVIntl, +} from '@modrinth/ui' import dayjs from 'dayjs' import { computed, onMounted, ref } from 'vue' import { useRouter } from 'vue-router' import { useAppEvent } from '@/composables/use-app-event' +import { handleSevereError } from '@/composables/use-error.js' import { trackEvent } from '@/helpers/analytics' import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install' -import { kill, run } from '@/helpers/instance' +import { getInstanceIconUrl, kill, run } from '@/helpers/instance' import { get_by_instance_id } from '@/helpers/process' import { showInstanceInFolder } from '@/helpers/utils.js' -import { handleSevereError } from '@/store/error.js' const { handleError } = injectNotificationManager() +const { formatMessage } = useVIntl() const formatRelativeTime = useRelativeTime() +const messages = defineMessages({ + instanceIcon: { id: 'app.instance.card.icon-alt', defaultMessage: 'Instance icon' }, + stop: { id: 'app.instance.card.stop', defaultMessage: 'Stop' }, + loading: { id: 'app.instance.card.loading', defaultMessage: 'Instance is loading...' }, + installing: { id: 'app.instance.card.installing', defaultMessage: 'Installing...' }, + play: { id: 'app.instance.card.play', defaultMessage: 'Play' }, + repair: { id: 'app.instance.card.repair', defaultMessage: 'Repair' }, + played: { id: 'app.instance.card.played', defaultMessage: 'Played {relativeTime}' }, + neverPlayed: { id: 'app.instance.card.never-played', defaultMessage: 'Never played' }, +}) const props = defineProps({ instance: { @@ -159,9 +176,9 @@ onMounted(() => { >
{{ instance.name }} @@ -169,10 +186,10 @@ onMounted(() => {
@@ -180,18 +197,18 @@ onMounted(() => { @@ -203,9 +220,13 @@ onMounted(() => { - +
@@ -219,19 +240,19 @@ onMounted(() => {
{ @@ -259,11 +280,11 @@ onMounted(() => { import { GameIcon, LeftArrowIcon } from '@modrinth/assets' -import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui' -import { convertFileSrc } from '@tauri-apps/api/core' +import { Avatar, ButtonLink, defineMessages, FormattedTag, useVIntl } from '@modrinth/ui' import { computed } from 'vue' +import { getInstanceIconUrl } from '@/helpers/instance' + +const { formatMessage } = useVIntl() +const messages = defineMessages({ + backToInstance: { + id: 'app.instance.navigation.back-to-instance', + defaultMessage: 'Back to instance', + }, +}) + type Instance = { game_version: string loader: string @@ -31,11 +40,7 @@ const instanceLink = computed(() => {
- + {{ instance.name }} @@ -48,7 +53,9 @@ const instanceLink = computed(() => { - Back to instance + + {{ formatMessage(messages.backToInstance) }} +
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue index a46f4347b1..ff0631397e 100644 --- a/apps/app-frontend/src/components/ui/JavaSelector.vue +++ b/apps/app-frontend/src/components/ui/JavaSelector.vue @@ -2,7 +2,7 @@
- { > +import { ImportIcon, PlusIcon } from '@modrinth/assets' +import { Button, defineMessages, IntlFormatted, useVIntl } from '@modrinth/ui' +import { inject, onMounted, onUnmounted, ref } from 'vue' + +import modrinthSocialIcon from '../../assets/welcome/modrinth-social-icon.png' + +const showCreationModal = inject<() => void>('showCreationModal') +const showImportModal = inject<() => void>('showImportModal') + +const { formatMessage } = useVIntl() + +const messages = defineMessages({ + welcomeTitle: { + id: 'app.welcome-screen.title', + defaultMessage: 'Welcome to Modrinth', + }, + welcomeDescription: { + id: 'app.welcome-screen.description', + defaultMessage: 'Ready to start playing?', + }, + createInstance: { + id: 'app.welcome-screen.create-instance', + defaultMessage: 'Create an instance', + }, + quickCreateHint: { + id: 'app.welcome-screen.quick-create-hint', + defaultMessage: 'Press N to quick create an instance', + }, + importPrompt: { + id: 'app.welcome-screen.import-prompt', + defaultMessage: 'Escaping another launcher?', + }, + importFromLauncher: { + id: 'app.welcome-screen.import-from-launcher', + defaultMessage: 'Import from launcher', + }, +}) + +const offline = ref(!navigator.onLine) + +function handleOffline() { + offline.value = true +} + +function handleOnline() { + offline.value = false +} + +function handleQuickCreate(event: KeyboardEvent) { + const target = event.target as HTMLElement | null + if ( + event.key.toLowerCase() !== 'n' || + event.repeat || + event.metaKey || + event.ctrlKey || + event.altKey || + target?.isContentEditable || + ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName ?? '') + ) { + return + } + + if (!offline.value) { + event.preventDefault() + showCreationModal?.() + } +} + +onMounted(() => { + window.addEventListener('offline', handleOffline) + window.addEventListener('online', handleOnline) + window.addEventListener('keydown', handleQuickCreate) +}) + +onUnmounted(() => { + window.removeEventListener('offline', handleOffline) + window.removeEventListener('online', handleOnline) + window.removeEventListener('keydown', handleQuickCreate) +}) + + + + + diff --git a/apps/app-frontend/src/components/ui/WindowControls.vue b/apps/app-frontend/src/components/ui/WindowControls.vue index 81797ba5fa..a10ccffff5 100644 --- a/apps/app-frontend/src/components/ui/WindowControls.vue +++ b/apps/app-frontend/src/components/ui/WindowControls.vue @@ -39,17 +39,17 @@ import { getCurrentWindow } from '@tauri-apps/api/window' import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state' import { computed, onMounted, onUnmounted, ref } from 'vue' +import { useAppSettings } from '@/composables/use-app-settings.ts' import { get as getSettings } from '@/helpers/settings.ts' import { getOS } from '@/helpers/utils.js' -import { useTheming } from '@/store/state' -const themeStore = useTheming() +const appSettings = useAppSettings() const nativeDecorations = ref(true) const isMaximized = ref(false) const os = ref('') -const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls')) +const alwaysShowAppControls = computed(() => appSettings.getFeatureFlag('always_show_app_controls')) const showControls = computed( () => diff --git a/apps/app-frontend/src/components/ui/app-update-button/index.vue b/apps/app-frontend/src/components/ui/app-update-button/index.vue index f5098e0187..084cb25b5d 100644 --- a/apps/app-frontend/src/components/ui/app-update-button/index.vue +++ b/apps/app-frontend/src/components/ui/app-update-button/index.vue @@ -3,7 +3,7 @@ v-if="showUpdatePill" type="outlined" native-type="button" - class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]" + class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-inherit !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]" :class="{ 'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill, 'opacity-100 scale-100': finishedDownloading && animateReadyPill, diff --git a/apps/app-frontend/src/components/ui/context-menu/index.vue b/apps/app-frontend/src/components/ui/context-menu/index.vue new file mode 100644 index 0000000000..93732168bb --- /dev/null +++ b/apps/app-frontend/src/components/ui/context-menu/index.vue @@ -0,0 +1,236 @@ + + + + + diff --git a/apps/app-frontend/src/components/ui/context-menu/types.ts b/apps/app-frontend/src/components/ui/context-menu/types.ts new file mode 100644 index 0000000000..fe45d2b6ff --- /dev/null +++ b/apps/app-frontend/src/components/ui/context-menu/types.ts @@ -0,0 +1,41 @@ +import type { ComponentPublicInstance } from 'vue' + +export type ContextMenuDivider = { + type: string +} + +export type ContextMenuAction = { + name: string + color?: string + children?: ContextMenuOption[] +} + +export type ContextMenuParentAction = ContextMenuAction & { + children: ContextMenuOption[] +} + +export type ContextMenuOption = ContextMenuDivider | ContextMenuAction + +export type ContextMenuSelection = { + item: unknown + option: string +} + +export type ContextMenuEmit = { + (event: 'menu-closed'): void + (event: 'option-clicked', selection: ContextMenuSelection): void +} + +export type Point = { + x: number + y: number +} + +export type ViewportRect = { + width: number + height: number + offsetTop: number + offsetLeft: number +} + +export type ButtonRefElement = Element | ComponentPublicInstance | null diff --git a/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts b/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts new file mode 100644 index 0000000000..7ffa4fef4f --- /dev/null +++ b/apps/app-frontend/src/components/ui/context-menu/use-context-menu-position.ts @@ -0,0 +1,170 @@ +import type { CSSProperties, Ref } from 'vue' +import { computed, nextTick, ref } from 'vue' + +import type { ContextMenuParentAction, Point, ViewportRect } from './types' + +const MENU_GAP = 8 +const VIEWPORT_MARGIN = 10 + +type ContextMenuPositionOptions = { + shown: Ref + activeOption: Ref + activeOptionIndex: Ref + isMobileSubmenuLayout: Ref + contextMenu: Ref + submenu: Ref + optionButtonRefs: Map +} + +export function useContextMenuPosition({ + shown, + activeOption, + activeOptionIndex, + isMobileSubmenuLayout, + contextMenu, + submenu, + optionButtonRefs, +}: ContextMenuPositionOptions) { + const menuStyle = ref({ left: '0px', top: '0px' }) + const menuAnchor = ref({ x: 0, y: 0 }) + const submenuPosition = ref({ x: 0, y: 0 }) + const hasSubmenuPosition = ref(false) + let positionRafId: number | null = null + + const submenuStyle = computed(() => { + if (isMobileSubmenuLayout.value) return menuStyle.value + + return { + left: `${submenuPosition.value.x}px`, + top: `${submenuPosition.value.y}px`, + } + }) + + function updateMenuPosition(x: number, y: number) { + if (!contextMenu.value) return + + const viewport = getViewportRect() + const menuRect = contextMenu.value.getBoundingClientRect() + const viewportLeft = viewport.offsetLeft + const viewportTop = viewport.offsetTop + const viewportRight = viewport.offsetLeft + viewport.width + const viewportBottom = viewport.offsetTop + viewport.height + const anchorX = x + viewport.offsetLeft + const anchorY = y + viewport.offsetTop + const left = Math.min( + Math.max(viewportLeft + VIEWPORT_MARGIN, anchorX + MENU_GAP), + Math.max(viewportLeft + VIEWPORT_MARGIN, viewportRight - menuRect.width - VIEWPORT_MARGIN), + ) + const top = Math.min( + Math.max(viewportTop + VIEWPORT_MARGIN, anchorY + MENU_GAP), + Math.max(viewportTop + VIEWPORT_MARGIN, viewportBottom - menuRect.height - VIEWPORT_MARGIN), + ) + + menuStyle.value = { left: `${left}px`, top: `${top}px` } + if (activeOption.value) scheduleSubmenuPositionUpdate() + } + + function updateSubmenuPosition() { + if (!activeOption.value || activeOptionIndex.value === null) return false + + if (isMobileSubmenuLayout.value) { + hasSubmenuPosition.value = true + return true + } + + const optionButton = optionButtonRefs.get(activeOptionIndex.value) + if (!optionButton || !contextMenu.value) return false + + const viewport = getViewportRect() + const buttonRect = optionButton.getBoundingClientRect() + const menuRect = contextMenu.value.getBoundingClientRect() + const submenuRect = submenu.value?.getBoundingClientRect() + const submenuWidth = submenuRect?.width ?? menuRect.width + const submenuHeight = submenuRect?.height ?? 100 + const direction = getSubmenuOpenDirection(menuRect, submenuWidth, viewport) + const preferredLeft = + direction === 'right' + ? buttonRect.right + MENU_GAP + : buttonRect.left - submenuWidth - MENU_GAP + const minLeft = viewport.offsetLeft + VIEWPORT_MARGIN + const maxLeft = Math.max( + minLeft, + viewport.offsetLeft + viewport.width - submenuWidth - VIEWPORT_MARGIN, + ) + const minTop = viewport.offsetTop + VIEWPORT_MARGIN + const maxTop = Math.max( + minTop, + viewport.offsetTop + viewport.height - submenuHeight - VIEWPORT_MARGIN, + ) + + submenuPosition.value = { + x: Math.min(Math.max(minLeft, preferredLeft), maxLeft), + y: Math.min(Math.max(minTop, buttonRect.top), maxTop), + } + hasSubmenuPosition.value = true + return true + } + + function scheduleSubmenuPositionUpdate(retries = 8) { + nextTick(() => { + if (!shown.value || !activeOption.value) return + + const hasRenderedSubmenu = submenu.value !== null + if (updateSubmenuPosition()) { + if (!hasRenderedSubmenu) nextTick(updateSubmenuPosition) + return + } + + if (retries > 0) setTimeout(() => scheduleSubmenuPositionUpdate(retries - 1), 0) + }) + } + + function schedulePositionUpdate() { + if (!shown.value || positionRafId !== null) return + + positionRafId = window.requestAnimationFrame(() => { + positionRafId = null + updateMenuPosition(menuAnchor.value.x, menuAnchor.value.y) + }) + } + + function cancelPositionUpdate() { + if (positionRafId !== null) window.cancelAnimationFrame(positionRafId) + } + + return { + menuStyle, + menuAnchor, + submenuStyle, + hasSubmenuPosition, + updateMenuPosition, + scheduleSubmenuPositionUpdate, + schedulePositionUpdate, + cancelPositionUpdate, + } +} + +function getViewportRect(): ViewportRect { + const visualViewport = window.visualViewport + return { + width: visualViewport?.width ?? window.innerWidth, + height: visualViewport?.height ?? window.innerHeight, + offsetTop: visualViewport?.offsetTop ?? 0, + offsetLeft: visualViewport?.offsetLeft ?? 0, + } +} + +function getSubmenuOpenDirection( + menuRect: DOMRect, + submenuWidth: number, + viewport: ViewportRect, +): 'left' | 'right' { + const viewportLeft = viewport.offsetLeft + const viewportRight = viewport.offsetLeft + viewport.width + const rightSpace = viewportRight - menuRect.right - MENU_GAP - VIEWPORT_MARGIN + const leftSpace = menuRect.left - viewportLeft - MENU_GAP - VIEWPORT_MARGIN + + if (rightSpace >= submenuWidth) return 'right' + if (leftSpace >= submenuWidth) return 'left' + return rightSpace >= leftSpace ? 'right' : 'left' +} diff --git a/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts b/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts new file mode 100644 index 0000000000..a74b5012e0 --- /dev/null +++ b/apps/app-frontend/src/components/ui/context-menu/use-context-menu.ts @@ -0,0 +1,357 @@ +import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue' + +import type { + ButtonRefElement, + ContextMenuAction, + ContextMenuEmit, + ContextMenuOption, + ContextMenuParentAction, + Point, +} from './types' +import { useContextMenuPosition } from './use-context-menu-position' +import { + focusRelativeButton, + getFocusableButtons, + hasChildren, + isAction, + isInstanceLink, + isPointInTriangle, +} from './utils' + +const MOBILE_SUBMENU_LAYOUT_QUERY = '(pointer: coarse), (max-width: 800px)' +const CONTEXT_MENU_OPEN_EVENT = 'modrinth-context-menu-open' + +export function useContextMenu(emit: ContextMenuEmit) { + const item = ref(null) + const contextMenu = ref(null) + const submenu = ref(null) + const options = ref([]) + const shown = ref(false) + const activeOptionIndex = ref(null) + const pendingOptionIndex = ref(null) + const isCursorInsideSubmenu = ref(false) + const isMobileSubmenuLayout = ref(false) + const lastMousePosition = ref(null) + const contextMenuId = Symbol() + const optionButtonRefs = new Map() + const submenuButtonRefs = new Map() + let previousMousePosition: Point | null = null + let pendingOptionTimeout: ReturnType | null = null + let mobileSubmenuMediaQuery: MediaQueryList | null = null + + const activeOption = computed(() => { + if (activeOptionIndex.value === null) return null + const option = options.value[activeOptionIndex.value] + return option && isAction(option) && hasChildren(option) ? option : null + }) + + const { + menuStyle, + menuAnchor, + submenuStyle, + hasSubmenuPosition, + updateMenuPosition, + scheduleSubmenuPositionUpdate, + schedulePositionUpdate, + cancelPositionUpdate, + } = useContextMenuPosition({ + shown, + activeOption, + activeOptionIndex, + isMobileSubmenuLayout, + contextMenu, + submenu, + optionButtonRefs, + }) + + const isMobileActiveSubmenu = computed( + () => isMobileSubmenuLayout.value && activeOption.value !== null && hasSubmenuPosition.value, + ) + + function isOptionVisible(option: ContextMenuOption): option is ContextMenuAction { + return isAction(option) && !(isInstanceLink(item.value) && option.name === 'add_content') + } + + function setOptionButtonRef(index: number, element: ButtonRefElement) { + setButtonRef(optionButtonRefs, index, element) + } + + function setSubmenuButtonRef(index: number, element: ButtonRefElement) { + setButtonRef(submenuButtonRefs, index, element) + } + + function hideMenu() { + if (!shown.value) return + + shown.value = false + deactivateSubmenu() + emit('menu-closed') + } + + function showMenu(event: MouseEvent, passedItem: unknown, passedOptions: ContextMenuOption[]) { + window.dispatchEvent(new CustomEvent(CONTEXT_MENU_OPEN_EVENT, { detail: contextMenuId })) + + item.value = passedItem + options.value = passedOptions + menuAnchor.value = { x: event.clientX, y: event.clientY } + shown.value = true + deactivateSubmenu() + syncMobileSubmenuLayout() + nextTick(() => updateMenuPosition(event.clientX, event.clientY)) + } + + function handleOptionClick(option: ContextMenuAction, index: number) { + if (hasChildren(option)) { + activateSubmenu(index) + return + } + + optionClicked(option.name) + } + + function optionClicked(option: string) { + emit('option-clicked', { item: item.value, option }) + hideMenu() + } + + function handleOptionFocus(option: ContextMenuAction, index: number) { + if (hasChildren(option) && !isMobileSubmenuLayout.value) { + activateSubmenu(index) + } else if (!hasChildren(option)) { + deactivateSubmenu() + } + } + + function handleOptionMouseEnter(option: ContextMenuAction, index: number) { + if (isMobileSubmenuLayout.value) return + + if (activeOptionIndex.value === null) { + if (hasChildren(option)) activateSubmenu(index) + return + } + + if (activeOptionIndex.value === index) return + + if (!isCursorAimingAtSubmenu(lastMousePosition.value, previousMousePosition)) { + commitHoveredOption(index) + return + } + + pendingOptionIndex.value = index + clearPendingOptionTimeout() + pendingOptionTimeout = setTimeout(() => { + if (pendingOptionIndex.value !== index) return + if (isCursorInsideSubmenu.value) { + pendingOptionIndex.value = null + return + } + + commitHoveredOption(index) + }, 180) + } + + function commitHoveredOption(index: number) { + const option = options.value[index] + if (option && hasChildren(option)) { + activateSubmenu(index) + } else { + deactivateSubmenu() + } + } + + function activateSubmenu(index: number) { + clearPendingOptionTimeout() + pendingOptionIndex.value = null + activeOptionIndex.value = index + hasSubmenuPosition.value = false + scheduleSubmenuPositionUpdate() + } + + function deactivateSubmenu() { + clearPendingOptionTimeout() + activeOptionIndex.value = null + pendingOptionIndex.value = null + hasSubmenuPosition.value = false + isCursorInsideSubmenu.value = false + lastMousePosition.value = null + previousMousePosition = null + } + + function returnToMenu() { + const previousIndex = activeOptionIndex.value + deactivateSubmenu() + nextTick(() => { + if (previousIndex !== null) optionButtonRefs.get(previousIndex)?.focus() + }) + } + + function handleSubmenuMouseEnter() { + isCursorInsideSubmenu.value = true + clearPendingOptionTimeout() + pendingOptionIndex.value = null + } + + function handleMenuMouseMove(event: MouseEvent, source: 'menu' | 'submenu') { + previousMousePosition = lastMousePosition.value + lastMousePosition.value = { x: event.clientX, y: event.clientY } + + if ( + source === 'menu' && + pendingOptionIndex.value !== null && + !isCursorAimingAtSubmenu(lastMousePosition.value, previousMousePosition) + ) { + commitHoveredOption(pendingOptionIndex.value) + } + } + + function isCursorAimingAtSubmenu(cursor: Point | null, origin: Point | null) { + const submenuRect = submenu.value?.getBoundingClientRect() + if (!submenuRect || !cursor || !origin) return false + + const submenuTargetX = + origin.x <= submenuRect.left + ? submenuRect.left + : origin.x >= submenuRect.right + ? submenuRect.right + : cursor.x <= submenuRect.left + ? submenuRect.left + : submenuRect.right + const upperTarget = { x: submenuTargetX, y: submenuRect.top - 20 } + const lowerTarget = { x: submenuTargetX, y: submenuRect.bottom + 20 } + + return isPointInTriangle(cursor, origin, upperTarget, lowerTarget) + } + + function handleMenuKeydown(event: KeyboardEvent) { + const buttons = getFocusableButtons(optionButtonRefs) + if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { + event.preventDefault() + focusRelativeButton(buttons, event.key === 'ArrowDown' ? 1 : -1) + } else if (event.key === 'Home' || event.key === 'End') { + event.preventDefault() + buttons[event.key === 'Home' ? 0 : buttons.length - 1]?.focus() + } else if (event.key === 'ArrowRight') { + const focusedIndex = [...optionButtonRefs.entries()].find( + ([, button]) => button === document.activeElement, + )?.[0] + const focusedOption = focusedIndex === undefined ? undefined : options.value[focusedIndex] + if (focusedIndex !== undefined && focusedOption && hasChildren(focusedOption)) { + event.preventDefault() + activateSubmenu(focusedIndex) + nextTick(() => getFocusableButtons(submenuButtonRefs)[0]?.focus()) + } + } else if (event.key === 'Escape') { + event.preventDefault() + hideMenu() + } + } + + function handleSubmenuKeydown(event: KeyboardEvent) { + const buttons = getFocusableButtons(submenuButtonRefs) + if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { + event.preventDefault() + focusRelativeButton(buttons, event.key === 'ArrowDown' ? 1 : -1) + } else if (event.key === 'Home' || event.key === 'End') { + event.preventDefault() + buttons[event.key === 'Home' ? 0 : buttons.length - 1]?.focus() + } else if (event.key === 'ArrowLeft') { + event.preventDefault() + returnToMenu() + } else if (event.key === 'Escape') { + event.preventDefault() + hideMenu() + } + } + + function syncMobileSubmenuLayout(event?: MediaQueryListEvent) { + isMobileSubmenuLayout.value = event?.matches ?? mobileSubmenuMediaQuery?.matches ?? false + } + + function handleDocumentKeydown(event: KeyboardEvent) { + if (shown.value && event.key === 'Escape') hideMenu() + } + + function handleContextMenuOpen(event: Event) { + if (shown.value && event instanceof CustomEvent && event.detail !== contextMenuId) hideMenu() + } + + function handleClickOutside(event: MouseEvent) { + const target = event.target + if (!(target instanceof Node)) return + if (!contextMenu.value?.contains(target) && !submenu.value?.contains(target)) hideMenu() + } + + onMounted(() => { + mobileSubmenuMediaQuery = window.matchMedia(MOBILE_SUBMENU_LAYOUT_QUERY) + syncMobileSubmenuLayout() + mobileSubmenuMediaQuery.addEventListener('change', syncMobileSubmenuLayout) + window.addEventListener('click', handleClickOutside) + window.addEventListener('resize', schedulePositionUpdate) + window.addEventListener('scroll', schedulePositionUpdate, true) + window.visualViewport?.addEventListener('scroll', schedulePositionUpdate) + window.visualViewport?.addEventListener('resize', schedulePositionUpdate) + window.addEventListener(CONTEXT_MENU_OPEN_EVENT, handleContextMenuOpen) + document.addEventListener('keydown', handleDocumentKeydown) + }) + + onBeforeUnmount(() => { + clearPendingOptionTimeout() + cancelPositionUpdate() + mobileSubmenuMediaQuery?.removeEventListener('change', syncMobileSubmenuLayout) + window.removeEventListener('click', handleClickOutside) + window.removeEventListener('resize', schedulePositionUpdate) + window.removeEventListener('scroll', schedulePositionUpdate, true) + window.visualViewport?.removeEventListener('scroll', schedulePositionUpdate) + window.visualViewport?.removeEventListener('resize', schedulePositionUpdate) + window.removeEventListener(CONTEXT_MENU_OPEN_EVENT, handleContextMenuOpen) + document.removeEventListener('keydown', handleDocumentKeydown) + }) + + function clearPendingOptionTimeout() { + if (!pendingOptionTimeout) return + clearTimeout(pendingOptionTimeout) + pendingOptionTimeout = null + } + + return { + shown, + contextMenu, + submenu, + options, + menuStyle, + submenuStyle, + activeOption, + activeOptionIndex, + pendingOptionIndex, + hasSubmenuPosition, + isMobileSubmenuLayout, + isMobileActiveSubmenu, + isCursorInsideSubmenu, + isOptionVisible, + setOptionButtonRef, + setSubmenuButtonRef, + showMenu, + hideMenu, + handleOptionClick, + optionClicked, + handleOptionFocus, + handleOptionMouseEnter, + returnToMenu, + handleSubmenuMouseEnter, + handleMenuMouseMove, + handleMenuKeydown, + handleSubmenuKeydown, + } +} + +function setButtonRef( + buttonRefs: Map, + index: number, + element: ButtonRefElement, +) { + if (element instanceof HTMLElement) { + buttonRefs.set(index, element) + } else { + buttonRefs.delete(index) + } +} diff --git a/apps/app-frontend/src/components/ui/context-menu/utils.ts b/apps/app-frontend/src/components/ui/context-menu/utils.ts new file mode 100644 index 0000000000..e7bd7c79d2 --- /dev/null +++ b/apps/app-frontend/src/components/ui/context-menu/utils.ts @@ -0,0 +1,59 @@ +import type { + ContextMenuAction, + ContextMenuDivider, + ContextMenuOption, + ContextMenuParentAction, + Point, +} from './types' + +export function isAction(option: ContextMenuOption): option is ContextMenuAction { + return 'name' in option +} + +export function isDivider(option: ContextMenuOption): option is ContextMenuDivider { + return 'type' in option && option.type === 'divider' +} + +export function hasChildren(option: ContextMenuOption): option is ContextMenuParentAction { + return isAction(option) && Boolean(option.children?.length) +} + +export function isInstanceLink(value: unknown) { + if (!value || typeof value !== 'object') return false + + if ('instance' in value) { + const instance = value.instance + return Boolean(instance && typeof instance === 'object' && 'link' in instance && instance.link) + } + + return 'link' in value && Boolean(value.link) +} + +export function getFocusableButtons(buttonRefs: Map) { + return [...buttonRefs.entries()] + .sort(([left], [right]) => left - right) + .map(([, button]) => button) + .filter((button) => button.offsetParent !== null) +} + +export function focusRelativeButton(buttons: HTMLElement[], direction: 1 | -1) { + if (!buttons.length) return + + const currentIndex = buttons.indexOf(document.activeElement as HTMLElement) + const nextIndex = + currentIndex === -1 ? (direction === 1 ? 0 : buttons.length - 1) : currentIndex + direction + buttons[(nextIndex + buttons.length) % buttons.length]?.focus() +} + +export function isPointInTriangle(point: Point, a: Point, b: Point, c: Point) { + const area = triangleArea(a, b, c) + const area1 = triangleArea(point, b, c) + const area2 = triangleArea(a, point, c) + const area3 = triangleArea(a, b, point) + + return Math.abs(area - (area1 + area2 + area3)) < 0.5 +} + +function triangleArea(a: Point, b: Point, c: Point) { + return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2) +} diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue index 705b3c16a1..b5c281e81a 100644 --- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue +++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue @@ -6,8 +6,8 @@ import { defineMessages, IconButton, injectNotificationManager, + Input, IntlFormatted, - StyledInput, useRelativeTime, useVIntl, } from '@modrinth/ui' @@ -15,17 +15,17 @@ import { computed, ref } from 'vue' import FriendsSection from '@/components/ui/friends/FriendsSection.vue' import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue' +import { useAppSettings } from '@/composables/use-app-settings.ts' import { useFriends } from '@/composables/use-friends' import type { FriendWithUserData } from '@/helpers/friends.ts' import type { ModrinthCredentials } from '@/helpers/mr_auth' import { get as getSettings, set as setSettings } from '@/helpers/settings.ts' -import { useTheming } from '@/store/state' const { formatMessage } = useVIntl() const { handleError } = injectNotificationManager() const formatRelativeTime = useRelativeTime() -const themeStore = useTheming() +const appSettings = useAppSettings() const props = defineProps<{ credentials: ModrinthCredentials | null @@ -39,11 +39,11 @@ type FriendsSectionCollapsedFlag = | 'friends_pending_collapsed' function isFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag) { - return themeStore.getFeatureFlag(flag) + return appSettings.getFeatureFlag(flag) } function setFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag, collapsed: boolean) { - themeStore.featureFlags[flag] = collapsed + appSettings.featureFlags[flag] = collapsed getSettings() .then((settings) => { settings.feature_flags[flag] = collapsed @@ -250,7 +250,7 @@ const messages = defineMessages({ {{ formatMessage(messages.usernameDescription) }}

- - import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets' -import { Admonition, Avatar, Button, injectNotificationManager, StyledInput } from '@modrinth/ui' +import { + Admonition, + Avatar, + Button, + defineMessages, + injectNotificationManager, + Input, + useVIntl, +} from '@modrinth/ui' import { useQueryClient } from '@tanstack/vue-query' -import { convertFileSrc } from '@tauri-apps/api/core' import { computed, ref } from 'vue' import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue' import { trackEvent } from '@/helpers/analytics' -import { list } from '@/helpers/instance' +import { getInstanceIconUrl, list } from '@/helpers/instance' import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts' import { instanceKeys } from '@/pages/instance/query-options' const { handleError } = injectNotificationManager() +const { formatMessage } = useVIntl() +const messages = defineMessages({ + title: { id: 'app.instance.add-server.title', defaultMessage: 'Add server to instance' }, + compatibilityWarning: { + id: 'app.instance.add-server.compatibility-warning', + defaultMessage: 'This server may not be compatible with all instances.', + }, + searchPlaceholder: { + id: 'app.instance.add-server.search-placeholder', + defaultMessage: 'Search for an instance', + }, + adding: { id: 'app.instance.add-server.adding', defaultMessage: 'Adding...' }, + added: { id: 'app.instance.add-server.added', defaultMessage: 'Added' }, + add: { id: 'app.instance.add-server.add', defaultMessage: 'Add' }, + cancel: { id: 'app.instance.add-server.cancel', defaultMessage: 'Cancel' }, +}) const queryClient = useQueryClient() const modal = ref() @@ -77,14 +100,14 @@ async function addServer(instance) {
-

+

{{ formatMessage(developerModeEnabled) }}

@@ -306,8 +317,8 @@ const messages = defineMessages({ :aria-label="formatMessage(messages.developerModeButtonLabel)" class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation" :class="{ - 'text-brand': themeStore.devMode, - 'text-secondary': !themeStore.devMode, + 'text-brand': appSettings.devMode, + 'text-secondary': !appSettings.devMode, }" @click="devModeCount" > diff --git a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue index 4ebef1803e..560f117a25 100644 --- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue +++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue @@ -1,8 +1,71 @@