Fmt

Only scan supported content archives into instance content.

Accept .jar files for mods and .zip files for datapacks, resourcepacks, and shaderpacks, after trimming the .disabled suffix. 

This prevents .DS_Store and other unsupported files from appearing in the Content tab.

Signed-off-by: Corsican Frog <49497194+acorsicanfrog@users.noreply.github.com>

.github/ISSUE_TEMPLATE/5-feature-request.yml

@@ -9,6 +9,8 @@ body:
       options:
         - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate feature requests
           required: true
+        - label: I have checked that this feature request is not on our [roadmap](https://roadmap.modrinth.com)
+          required: true
   - type: dropdown
     id: projects
     attributes:

.github/instructions/i18n-convert.instructions.md

@@ -81,6 +81,6 @@ Please follow these rules precisely:
 Use existing patterns from our codebase:
 
 - Variables/plurals: see `apps/frontend/src/pages/frog.vue`
-- Rich-text link tags: see `apps/frontend/src/error.vue`
+- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
 
 When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.

.github/workflows/check-generic.yml

@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9
+      - uses: taiki-e/install-action@b5fddbb5361bce8a06fb168c9d403a6cc552b084 # v2.75.29
         with:
           tool: tombi
       - run: tombi lint

.github/workflows/daedalus-docker.yml

@@ -76,6 +76,13 @@ jobs:
     env:
       SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
       SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
       RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
     needs: [skip-if-clean]
     if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
@@ -89,9 +96,6 @@ jobs:
           rustflags: ''
           cache: false
 
-      - name: Setup mold
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
       - name: Cache Cargo registry and index
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
@@ -101,10 +105,6 @@ jobs:
             ~/.cargo/bin
           key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
 
-      - name: Ensure sccache directory exists
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        run: sudo mkdir -p /mnt/sccache && sudo chown $(id -u):$(id -g) /mnt/sccache
-
       - name: Mount sccache disk cache
         if: needs.skip-if-clean.outputs.internal == 'true'
         uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0

.github/workflows/frontend-deploy.yml

@@ -20,14 +20,6 @@ on:
         required: true
         type: string
         description: 'The environment to deploy to (staging-preview or production-preview)'
-      head_sha:
-        required: false
-        type: string
-        description: 'The commit SHA to deploy (defaults to github.sha)'
-      head_ref:
-        required: false
-        type: string
-        description: 'The branch name to deploy (defaults to github.ref_name)'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
@@ -48,14 +40,12 @@ jobs:
 
       - name: Configure environment
         id: meta
-        env:
-          ENV_INPUT: ${{ inputs.environment }}
-          REF: ${{ github.ref }}
-          DEPLOY_SHA: ${{ inputs.head_sha || github.sha }}
         run: |
           echo "cmd=deploy" >> $GITHUB_OUTPUT
 
-          SHA_SHORT="${DEPLOY_SHA::8}"
+          ENV_INPUT="${{ inputs.environment }}"
+          REF="${{ github.ref }}"
+          SHA_SHORT="${GITHUB_SHA::8}"
 
           if [ "$ENV_INPUT" = "staging-preview" ]; then
             echo "env=staging" >> $GITHUB_OUTPUT
@@ -116,8 +106,8 @@ jobs:
         working-directory: ./apps/frontend
         run: pnpm build
         env:
-          CF_PAGES_BRANCH: ${{ inputs.head_ref || github.ref_name }}
-          CF_PAGES_COMMIT_SHA: ${{ inputs.head_sha || github.sha }}
+          CF_PAGES_BRANCH: ${{ github.ref_name }}
+          CF_PAGES_COMMIT_SHA: ${{ github.sha }}
           CF_PAGES_URL: ${{ steps.meta.outputs.url }}
           BUILD_ENV: ${{ steps.meta.outputs.env }}
           PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}

.github/workflows/frontend-preview.yml

@@ -24,8 +24,6 @@ jobs:
         environment: [staging-preview, production-preview]
     with:
       environment: ${{ matrix.environment }}
-      head_sha: ${{ github.event.pull_request.head.sha }}
-      head_ref: ${{ github.event.pull_request.head.ref }}
 
   deploy-storybook:
     if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
@@ -66,15 +64,11 @@ jobs:
 
       - name: Build Storybook
         working-directory: ./packages/ui
-        env:
-          NODE_OPTIONS: --max-old-space-size=6144
         run: pnpm run build-storybook
 
       - name: Configure short SHA
         id: meta
-        env:
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: echo "sha_short=${HEAD_SHA::8}" >> $GITHUB_OUTPUT
+        run: echo "sha_short=${GITHUB_SHA::8}" >> $GITHUB_OUTPUT
 
       - name: Deploy Storybook preview
         uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
@@ -87,11 +81,7 @@ jobs:
           command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
 
   comment:
-    if: |
-      !cancelled()
-      && github.repository_owner == 'modrinth'
-      && github.event.pull_request.head.repo.full_name == github.repository
-      && needs.deploy.result == 'success'
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
     needs: [deploy, deploy-storybook]
     steps:
@@ -103,27 +93,16 @@ jobs:
 
       - name: Read deployment URLs
         id: urls
-        env:
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-          STORYBOOK_RESULT: ${{ needs.deploy-storybook.result }}
-          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
         run: |
           STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
           PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
 
-          if [ "$STORYBOOK_RESULT" = "success" ]; then
-            STORYBOOK_PREVIEW_URL="https://git-${HEAD_SHA::8}-storybook.modrinth.workers.dev"
-          else
-            STORYBOOK_PREVIEW_URL="⚠️ Deployment $STORYBOOK_RESULT ([logs]($RUN_URL))"
-          fi
-
           echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
           echo "Staging preview URL: $STAGING_PREVIEW_URL"
-          echo "Storybook preview URL: $STORYBOOK_PREVIEW_URL"
 
           echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
           echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
-          echo "storybook-preview-url=$STORYBOOK_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "storybook-preview-url=https://git-${GITHUB_SHA::8}-storybook.modrinth.workers.dev" >> $GITHUB_OUTPUT
 
       - name: Find comment
         if: github.event_name == 'pull_request'
@@ -144,7 +123,7 @@ jobs:
           body: |
             ## Frontend previews
 
-            Last deployed commit is [${{ github.event.pull_request.head.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.event.pull_request.head.sha }})
+            Last deployed commit is [${{ github.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.sha }})
 
             | Environment | URL |
             |-------------|-----|

.github/workflows/i18n-pull.yml

@@ -56,17 +56,6 @@ jobs:
           ref: ${{ github.ref }}
           token: ${{ secrets.CROWDIN_GH_TOKEN }}
 
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - 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
@@ -106,9 +95,6 @@ jobs:
         shell: bash
         run: sudo chown -R $USER:$USER .
 
-      - name: Prune stale ICU translations
-        run: pnpm scripts i18n-icu-contract prune-local
-
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:

.github/workflows/i18n-push.yml

@@ -4,14 +4,11 @@ on:
   push:
     branches: ['main']
     paths:
-      - '.github/workflows/i18n-push.yml'
+      - '.github/workflows/i18n.push.yml'
       - 'apps/*/src/locales/en-US/**'
       - 'apps/*/locales/en-US/**'
       - 'packages/*/src/locales/en-US/**'
       - 'packages/*/locales/en-US/**'
-      - 'scripts/i18n-icu-contract.ts'
-      - 'package.json'
-      - 'pnpm-lock.yaml'
       - 'crowdin.yml'
   workflow_dispatch:
 
@@ -59,18 +56,6 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.ref }}
-          fetch-depth: 2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install script dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
 
       - name: Query branch name
         id: branch-name
@@ -94,9 +79,3 @@ jobs:
         env:
           CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
           CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-
-      - name: Clear stale ICU translations in Crowdin
-        run: pnpm scripts i18n-icu-contract clear-crowdin-changed --base-ref HEAD^ --crowdin-branch "[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}"
-        env:
-          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/labrinth-docker.yml

@@ -78,8 +78,14 @@ jobs:
       GIT_HASH: ${{ github.sha }}
       SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
       SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
       RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
-      RUST_MIN_STACK: '16777216'
     steps:
       - name: Check out code
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -93,13 +99,6 @@ jobs:
       - name: Setup mold
         uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
 
-      - name: Install build dependencies
-        run: sudo apt-get update && sudo apt-get install -y --no-install-recommends cmake libcurl4-openssl-dev
-        #uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
-        #with:
-        #  packages: cmake libcurl4-openssl-dev
-        #  version: v2 # cache key
-
       - name: Cache Cargo registry and index
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
         with:
@@ -109,10 +108,6 @@ jobs:
             ~/.cargo/bin
           key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
 
-      - name: Ensure sccache directory exists
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        run: sudo mkdir -p /mnt/sccache && sudo chown $(id -u):$(id -g) /mnt/sccache
-
       - name: Mount sccache disk cache
         if: needs.skip-if-clean.outputs.internal == 'true'
         uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
@@ -169,7 +164,7 @@ jobs:
         with:
           context: ./apps/labrinth/docker-stage
           file: ./apps/labrinth/Dockerfile
-          push: true
+          push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker-meta.outputs.tags }}
           labels: ${{ steps.docker-meta.outputs.labels }}
           annotations: ${{ steps.docker-meta.outputs.annotations }}

.github/workflows/theseus-build.yml

@@ -30,10 +30,6 @@ on:
           - prod-with-staging-archon
         default: prod
         required: false
-      app-version-override:
-        description: Temporary app version override for updater testing
-        type: string
-        required: false
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -84,10 +80,6 @@ jobs:
           rustflags: ''
           target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: Setup mold
-        if: contains(matrix.platform, 'ubuntu')
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
       - name: Setup sccache
         uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
 
@@ -134,10 +126,7 @@ jobs:
       - name: Set application version and environment
         shell: bash
         run: |
-          APP_VERSION="${{ inputs.app-version-override }}"
-          if [ -z "$APP_VERSION" ]; then
-            APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
-          fi
+          APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
           BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
           echo "Setting application version to $APP_VERSION"
           echo "Using environment $BUILD_ENVIRONMENT"
@@ -164,7 +153,7 @@ jobs:
           fi
 
       - name: Build macOS app
-        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
         if: contains(matrix.platform, 'macos')
         env:
           TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
@@ -179,7 +168,7 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
       - name: Build Linux app
-        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
         if: contains(matrix.platform, 'ubuntu')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
@@ -190,7 +179,7 @@ jobs:
           [System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
           $env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
           $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
-          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
+          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
           Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
         if: contains(matrix.platform, 'windows')
         env:

.github/workflows/theseus-release.yml

@@ -57,11 +57,8 @@ jobs:
 
       - name: Extract app changelog
         env:
-          GH_TOKEN: ${{ github.token }}
           VERSION: ${{ env.VERSION_TAG }}
-        run: |
-          LAST_GITHUB_RELEASE_PUBLISHED_AT=$(gh api "repos/${{ github.repository }}/releases/latest" --jq '.published_at // ""' 2>/dev/null || true)
-          LAST_GITHUB_RELEASE_PUBLISHED_AT="$LAST_GITHUB_RELEASE_PUBLISHED_AT" npx --yes tsx scripts/build-theseus-release-notes.ts
+        run: npx --yes tsx scripts/build-theseus-release-notes.ts
 
       - name: Generate version manifest
         run: |

.github/workflows/turbo-ci.yml

@@ -81,6 +81,13 @@ jobs:
       # blacksmith runner)
       SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
       SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
       RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
 
     steps:
@@ -92,8 +99,8 @@ jobs:
       - name: Install build dependencies
         uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
         with:
-          packages: cmake libcurl4-openssl-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-          version: v2 # cache key
+          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          version: v1 # cache key
 
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -122,9 +129,6 @@ jobs:
           components: clippy, rustfmt
           cache: false
 
-      - name: Setup mold
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
       - name: Cache Cargo registry and index
         uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae #v5.0.5
         with:
@@ -149,7 +153,7 @@ jobs:
         uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
 
       - name: Setup nextest
-        run: cargo binstall --no-confirm --secure --locked cargo-nextest@0.9.133
+        run: cargo binstall --no-confirm --secure cargo-nextest@0.9.133
 
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
@@ -200,5 +204,4 @@ jobs:
       - name: Verify intl:extract has been run
         run: |
           pnpm turbo run intl:extract --force
-          pnpm scripts i18n-icu-contract prune-local --check
-          git diff --exit-code --color */*/src/locales/*/index.json
+          git diff --exit-code --color */*/src/locales/en-US/index.json

.gitignore

@@ -22,7 +22,6 @@ node_modules
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/i18n-ally-custom-framework.yml
 
 # IDE - IntelliJ
 .idea/*

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer", "lokalise.i18n-ally"]
+  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer"]
 }

.vscode/i18n-ally-custom-framework.yml

@@ -1,10 +0,0 @@
-languageIds:
-  - vue
-  - typescript
-  - javascript
-  - typescriptreact
-
-usageMatchRegex:
-  - id:\s*['"]({key})['"]
-
-monopoly: true

.vscode/settings.json

@@ -9,7 +9,7 @@
 	"files.insertFinalNewline": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "never"
+		"source.organizeImports": "always"
 	},
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
@@ -31,15 +31,5 @@
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
 	},
 	"css.lint.unknownAtRules": "ignore",
-	"scss.lint.unknownAtRules": "ignore",
-	"i18n-ally.localesPaths": [
-		"packages/ui/src/locales",
-		"apps/frontend/src/locales",
-		"packages/moderation/src/locales"
-	],
-	"i18n-ally.pathMatcher": "{locale}/index.{ext}",
-	"i18n-ally.keystyle": "flat",
-	"i18n-ally.sourceLanguage": "en-US",
-	"i18n-ally.namespace": false,
-	"i18n-ally.includeSubfolders": true
+	"scss.lint.unknownAtRules": "ignore"
 }

CLAUDE.md

@@ -50,7 +50,7 @@ Run these from the **root** folder before opening a pull request - do not run th
 - **App frontend:** `pnpm prepr:frontend:app`
 - **Frontend libs:** `pnpm prepr:frontend:lib`
 - **All frontend (app+web):** `pnpm prepr`
-- **Labrinth (backend):** See `apps/labrinth/AGENTS.md`
+- **Labrinth (backend):** See `apps/labrinth/CLAUDE.md`
 
 The website and app `prepr` commands
 
@@ -62,9 +62,9 @@ The website and app `prepr` commands
 
 ## Project-Specific Instructions
 
-Each project may have its own file with detailed instructions:
+Each project may have its own `CLAUDE.md` with detailed instructions:
 
-- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
+- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
 - [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
 ## Code Guidelines

Cargo.toml

@@ -9,11 +9,9 @@ members = [
   "packages/ariadne",
   "packages/daedalus",
   "packages/labrinth-derive",
-  "packages/modrinth-content-management",
   "packages/modrinth-log",
   "packages/modrinth-maxmind",
   "packages/modrinth-util",
-  "packages/neverbounce",
   "packages/path-util",
 ]
 
@@ -34,6 +32,7 @@ actix-ws = "0.3.0"
 arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
+async-compression = { version = "0.4.32", default-features = false }
 async-minecraft-ping = { path = "packages/async-minecraft-ping" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
@@ -52,7 +51,6 @@ aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
 ] }
 base64 = "0.22.1"
 bitflags = "2.9.4"
-bon = "3.9.3"
 bytemuck = "1.24.0"
 bytes = "1.10.1"
 censor = "0.3.0"
@@ -66,8 +64,6 @@ clickhouse = "0.14.0"
 color-eyre = "0.6.5"
 color-thief = "0.2.2"
 const_format = "0.2.34"
-core-foundation = "0.10.1"
-core-graphics = "0.24.0"
 daedalus = { path = "packages/daedalus" }
 darling = { version = "0.23" }
 dashmap = "6.1.0"
@@ -81,20 +77,18 @@ dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
+elasticsearch = "9.1.0-alpha.1"
 encoding_rs = "0.8.35"
 enumset = "1.1.10"
 eyre = "0.6.12"
 flate2 = "1.1.4"
 fs4 = { version = "0.13.1", default-features = false }
 futures = "0.3.31"
-futures-lite = "2.6.1"
 futures-util = "0.3.31"
-governor = "0.10.4"
 heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-httpdate = "1.0.3"
 hyper = "1.7.0"
 hyper-rustls = { version = "0.27.7", default-features = false, features = [
   "aws-lc-rs",
@@ -121,31 +115,21 @@ lettre = { version = "0.11.19", default-features = false, features = [
   "tokio1",
   "tokio1-rustls",
 ] }
-lz4_flex = { version = "0.11.5", default-features = false, features = [
-  "checked-decode",
-  "safe-decode",
-  "safe-encode",
-  "std",
-] }
 maxminddb = "0.26.0"
 meilisearch-sdk = { version = "0.30.0", default-features = false }
-modrinth-content-management = { path = "packages/modrinth-content-management" }
 modrinth-log = { path = "packages/modrinth-log" }
 modrinth-util = { path = "packages/modrinth-util" }
 muralpay = { path = "packages/muralpay" }
 murmur2 = "0.1.0"
 native-dialog = "0.9.2"
-neverbounce = { path = "packages/neverbounce" }
 notify = { version = "8.2.0", default-features = false }
 notify-debouncer-mini = { version = "0.7.0", default-features = false }
-objc2-app-kit = { version = "0.3.2", default-features = false }
 p256 = "0.13.2"
 parking_lot = "0.12.5"
 paste = "1.0.15"
 path-util = { path = "packages/path-util" }
 phf = { version = "0.13.1", features = ["macros"] }
 png = "0.18.0"
-postcard = { version = "1.1.3", default-features = false, features = ["alloc"] }
 proc-macro2 = { version = "1.0" }
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
@@ -153,7 +137,6 @@ quick-xml = "0.38.3"
 quote = { version = "1.0" }
 rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
-rdkafka = { version = "0.36.2", features = ["cmake-build"] }
 redis = "0.32.7"
 regex = "1.12.2"
 reqwest = { version = "0.12.24", default-features = false }
@@ -170,7 +153,6 @@ rust-s3 = { version = "0.37.0", default-features = false, features = [
 ] }
 rustls = "0.23.32"
 rusty-money = "0.4.1"
-scalar_api_reference = { version = "0.2.2", default-features = false }
 secrecy = "0.10.3"
 sentry = { version = "0.45.0", default-features = false, features = [
   "backtrace",
@@ -207,7 +189,7 @@ tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
 tauri-plugin-single-instance = "2.3.4"
-tauri-plugin-updater = { git = "https://github.com/modrinth/plugins-workspace", rev = "0d30f2aa28ec668ce187d527da1c475da3c01cbc", default-features = false, features = [
+tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
   "rustls-tls",
   "zip",
 ] }
@@ -230,10 +212,10 @@ typed-path = "0.12.0"
 url = "2.5.7"
 urlencoding = "2.1.3"
 utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
+utoipa-actix-web = { version = "0.1.2" }
+utoipa-scalar = { version = "0.3.0", default-features = false }
 uuid = "1.18.1"
 validator = "0.20.0"
-webauthn-rs = "0.5.5"
-webauthn-rs-proto = "0.5.5"
 webp = { version = "0.3.1", default-features = false }
 webview2-com = "0.38.0"  # Should be updated in lockstep with wry
 whoami = "1.6.1"
@@ -284,7 +266,6 @@ redundant_type_annotations = "warn"
 result_large_err = "allow"
 todo = "warn"
 too_many_arguments = "allow"
-type_complexity = "allow"
 uninlined_format_args = "warn"
 unnested_or_patterns = "warn"
 wildcard_dependencies = "warn"

README.md

@@ -3,13 +3,13 @@
 ![Issues](https://img.shields.io/github/issues-raw/Modrinth/code?color=c78aff&label=issues&style=for-the-badge)
 ![Pull Requests](https://img.shields.io/github/issues-pr-raw/Modrinth/code?color=c78aff&label=PRs&style=for-the-badge)
 ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=c78aff&label=contributors&style=for-the-badge)
-![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
+![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
 ![Commit Activity](https://img.shields.io/github/commit-activity/m/Modrinth/code?color=c78aff&label=commits&style=for-the-badge)
 ![Last Commit](https://img.shields.io/github/last-commit/Modrinth/code?color=c78aff&label=last%20commit&style=for-the-badge)
 
 ## Modrinth Monorepo
 
-Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/olympus/badge?logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
 
 If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).
 

_typos.toml

@@ -8,11 +8,8 @@ extend-exclude = [
   "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-words]

apps/app-frontend/package.json

@@ -10,17 +10,17 @@
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
 		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
-		"intl:prune-local": "pnpm -w scripts i18n-icu-contract prune-local --scope apps/app-frontend",
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
+		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
 		"@sfirew/minecraft-motd-parser": "^1.1.6",
-		"@tanstack/vue-query": "5.90.7",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
 		"@tauri-apps/plugin-fs": "^2.4.5",
@@ -44,8 +44,7 @@
 		"vue": "^3.5.13",
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8",
-		"vuedraggable": "^4.1.0"
+		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",

apps/app-frontend/src/components/GridDisplay.vue

@@ -24,8 +24,7 @@ import { computed, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
-import { install_duplicate_instance } from '@/helpers/install'
-import { remove } from '@/helpers/instance'
+import { duplicate, remove } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
@@ -49,21 +48,21 @@ const instanceComponents = ref(null)
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
-async function deleteInstance() {
+async function deleteProfile() {
 	if (currentDeleteInstance.value) {
 		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.id !== currentDeleteInstance.value,
+			(x) => x.instance.path !== currentDeleteInstance.value,
 		)
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }
 
-async function duplicateInstance(p) {
-	await install_duplicate_instance(p).catch(handleError)
+async function duplicateProfile(p) {
+	await duplicate(p).catch(handleError)
 }
 
-const handleRightClick = (event, instanceId) => {
-	const item = instanceComponents.value.find((x) => x.instance.id === instanceId)
+const handleRightClick = (event, profilePathId) => {
+	const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
 	const baseOptions = [
 		{ name: 'add_content' },
 		{ type: 'divider' },
@@ -115,16 +114,16 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'duplicate':
 			if (args.item.instance.install_stage == 'installed')
-				await duplicateInstance(args.item.instance.id)
+				await duplicateProfile(args.item.instance.path)
 			break
 		case 'open':
 			await args.item.openFolder()
 			break
 		case 'copy':
-			await navigator.clipboard.writeText(args.item.instance.id)
+			await navigator.clipboard.writeText(args.item.instance.path)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.instance.id
+			currentDeleteInstance.value = args.item.instance.path
 			confirmModal.value.show()
 			break
 	}
@@ -322,13 +321,13 @@ const filteredResults = computed(() => {
 			<Instance
 				v-for="instance in instanceSection.value"
 				ref="instanceComponents"
-				:key="instance.id + instance.install_stage"
+				:key="instance.path + instance.install_stage"
 				:instance="instance"
-				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.id)"
+				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
 			/>
 		</section>
 	</Accordion>
-	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteInstance" />
+	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteProfile" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
 		<template #stop> <StopCircleIcon /> Stop </template>

apps/app-frontend/src/components/RowDisplay.vue

@@ -21,10 +21,9 @@ import Instance from '@/components/ui/Instance.vue'
 import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { install_duplicate_instance } from '@/helpers/install'
-import { kill, remove, run } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process.js'
-import { showInstanceInFolder } from '@/helpers/utils.js'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
 import { injectContentInstall } from '@/providers/content-install'
 import { handleSevereError } from '@/store/error.js'
 
@@ -61,14 +60,14 @@ const deleteConfirmModal = ref(null)
 
 const currentDeleteInstance = ref(null)
 
-async function deleteInstance() {
+async function deleteProfile() {
 	if (currentDeleteInstance.value) {
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }
 
-async function duplicateInstance(p) {
-	await install_duplicate_instance(p).catch(handleError)
+async function duplicateProfile(p) {
+	await duplicate(p).catch(handleError)
 }
 
 const handleInstanceRightClick = async (event, passedInstance) => {
@@ -86,7 +85,7 @@ const handleInstanceRightClick = async (event, passedInstance) => {
 		},
 	]
 
-	const runningProcesses = await get_by_instance_id(passedInstance.id).catch(handleError)
+	const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
 
 	const options =
 		runningProcesses.length > 0
@@ -127,14 +126,16 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
 	switch (args.option) {
 		case 'play':
-			await run(args.item.id).catch((err) => handleSevereError(err, { instanceId: args.item.id }))
+			await run(args.item.path).catch((err) =>
+				handleSevereError(err, { profilePath: args.item.path }),
+			)
 			trackEvent('InstanceStart', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
 			})
 			break
 		case 'stop':
-			await kill(args.item.id).catch(handleError)
+			await kill(args.item.path).catch(handleError)
 			trackEvent('InstanceStop', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
@@ -143,26 +144,26 @@ const handleOptionsClick = async (args) => {
 		case 'add_content':
 			await router.push({
 				path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-				query: { i: args.item.id },
+				query: { i: args.item.path },
 			})
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.id)}`,
+				path: `/instance/${encodeURIComponent(args.item.path)}`,
 			})
 			break
 		case 'duplicate':
-			if (args.item.install_stage == 'installed') await duplicateInstance(args.item.id)
+			if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.id
+			currentDeleteInstance.value = args.item.path
 			deleteConfirmModal.value.show()
 			break
 		case 'open_folder':
-			await showInstanceInFolder(args.item.id)
+			await showProfileInFolder(args.item.path)
 			break
 		case 'copy_path':
-			await navigator.clipboard.writeText(args.item.id)
+			await navigator.clipboard.writeText(args.item.path)
 			break
 		case 'install': {
 			await installVersion(
@@ -238,7 +239,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteInstance" />
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteProfile" />
 	<div ref="rowContainer" class="flex flex-col gap-4">
 		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
 			<HeadingLink class="mt-1" :to="row.route">
@@ -255,7 +256,7 @@ onUnmounted(() => {
 						0,
 						row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
 					)"
-					:key="row.label + instance.id"
+					:key="row.label + instance.path"
 					:instance="instance"
 					:compact="row.compact"
 					:first="instanceIndex === 0"

apps/app-frontend/src/components/ui/AccountsCard.vue

@@ -150,10 +150,7 @@ async function refreshValues() {
 		if (equippedSkin.value) {
 			try {
 				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-				headUrlCache.value = new Map(headUrlCache.value).set(
-					equippedSkin.value.texture_key,
-					headUrl,
-				)
+				headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
 			} catch (error) {
 				console.warn('Failed to get head render for equipped skin:', error)
 			}
@@ -163,24 +160,12 @@ async function refreshValues() {
 	}
 }
 
-async function setEquippedSkin(skin: Skin) {
-	equippedSkin.value = skin
-
-	try {
-		const headUrl = await getPlayerHeadUrl(skin)
-		headUrlCache.value = new Map(headUrlCache.value).set(skin.texture_key, headUrl)
-	} catch (error) {
-		console.warn('Failed to get head render for equipped skin:', error)
-	}
-}
-
 function setLoginDisabled(value: boolean) {
 	loginDisabled.value = value
 }
 
 defineExpose({
 	refreshValues,
-	setEquippedSkin,
 	setLoginDisabled,
 	loginDisabled,
 })

apps/app-frontend/src/components/ui/AddContentButton.vue

@@ -4,7 +4,7 @@ import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
-import { add_project_from_path } from '@/helpers/instance'
+import { add_project_from_path } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
@@ -22,14 +22,14 @@ const handleAddContentFromFile = async () => {
 	if (!newProject) return
 
 	for (const project of newProject) {
-		await add_project_from_path(props.instance.id, project.path ?? project).catch(handleError)
+		await add_project_from_path(props.instance.path, project.path ?? project).catch(handleError)
 	}
 }
 
 const handleSearchContent = async () => {
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : 'mod'}`,
-		query: { i: props.instance.id },
+		query: { i: props.instance.path },
 	})
 }
 </script>

apps/app-frontend/src/components/ui/AppActionBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex gap-2 items-center">
+	<div class="flex gap-4 items-center">
 		<ButtonStyled
 			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
 			color="brand"
@@ -14,7 +14,6 @@
 			<UnplugIcon class="text-secondary" />
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
 		</div>
-		<AppUpdateButton />
 		<div
 			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
 		>
@@ -23,28 +22,28 @@
 				<div class="text-contrast flex items-center gap-2">
 					<router-link
 						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
+						:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
 						class="hover:underline"
 					>
-						{{ selectedProcess.instance.name }}
+						{{ selectedProcess.profile.name }}
 					</router-link>
 					<Dropdown
 						v-if="currentProcesses.length > 1"
 						placement="bottom"
 						:triggers="['click']"
 						:hide-triggers="['click']"
-						@show="showInstances = true"
-						@hide="showInstances = false"
+						@show="showProfiles = true"
+						@hide="showProfiles = false"
 					>
 						<ButtonStyled type="transparent" circular size="small">
 							<button
 								v-tooltip="
-									showInstances
+									showProfiles
 										? formatMessage(messages.hideMoreRunningInstances)
 										: formatMessage(messages.showMoreRunningInstances)
 								"
 							>
-								<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+								<DropdownIcon :class="{ 'rotate-180': !!showProfiles }" />
 							</button>
 						</ButtonStyled>
 						<template #popper>
@@ -69,7 +68,7 @@
 									>
 										<OnlineIndicatorIcon />
 										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.instance.name }}
+											{{ process.profile.name }}
 											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
 										</span>
 									</button>
@@ -83,7 +82,7 @@
 									<button
 										v-tooltip="formatMessage(messages.viewLogs)"
 										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.instance.id)"
+										@click.stop="goToTerminal(process.profile.path)"
 									>
 										<TerminalSquareIcon class="text-secondary size-5" />
 									</button>
@@ -134,17 +133,14 @@ import {
 	type PopupNotificationProgressItem,
 	useVIntl,
 } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
 import { Dropdown } from 'floating-vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import AppUpdateButton from '@/components/ui/app-update-button/index.vue'
-import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications'
 import { trackEvent } from '@/helpers/analytics'
 import { loading_listener, process_listener } from '@/helpers/events'
-import { get_many as getInstances } from '@/helpers/instance'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many as getInstances } from '@/helpers/profile.js'
 import type { LoadingBar } from '@/helpers/state'
 import { progress_bars_list } from '@/helpers/state'
 import type { GameInstance } from '@/helpers/types'
@@ -155,12 +151,12 @@ const { formatMessage } = useVIntl()
 
 const router = useRouter()
 
-const showInstances = ref(false)
+const showProfiles = ref(false)
 
 interface RunningProcess {
 	uuid: string
-	instance_id: string
-	instance: GameInstance
+	profile_path: string
+	profile: GameInstance
 }
 
 const messages = defineMessages({
@@ -221,22 +217,22 @@ const refresh = async () => {
 	const processes = ((await getRunningProcesses().catch((error) => {
 		handleError(error)
 		return []
-	})) ?? []) as Array<{ uuid: string; instance_id: string }>
-	const instanceIds = processes.map((process) => process.instance_id)
-	const instances: GameInstance[] = await getInstances(instanceIds).catch((error) => {
+	})) ?? []) as Array<{ uuid: string; profile_path: string }>
+	const paths = processes.map((process) => process.profile_path)
+	const profiles: GameInstance[] = await getInstances(paths).catch((error) => {
 		handleError(error)
 		return []
 	})
 
 	currentProcesses.value = processes
 		.map((process) => {
-			const instance = instances.find((item) => process.instance_id === item.id)
-			if (!instance) {
+			const profile = profiles.find((item) => process.profile_path === item.path)
+			if (!profile) {
 				return null
 			}
 			return {
 				...process,
-				instance,
+				profile,
 			}
 		})
 		.filter((process): process is RunningProcess => process !== null)
@@ -269,8 +265,8 @@ const stop = async (process: RunningProcess) => {
 		await killProcess(process.uuid).catch(handleError)
 
 		trackEvent('InstanceStop', {
-			loader: process.instance.loader,
-			game_version: process.instance.game_version,
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
 			source: 'AppBar',
 		})
 	} catch (e) {
@@ -279,16 +275,15 @@ const stop = async (process: RunningProcess) => {
 	await refresh()
 }
 
-function goToTerminal(instanceId?: string) {
-	const selectedInstanceId = instanceId ?? selectedProcess.value?.instance.id
-	if (!selectedInstanceId) {
+function goToTerminal(path?: string) {
+	const selectedPath = path ?? selectedProcess.value?.profile.path
+	if (!selectedPath) {
 		return
 	}
-	router.push(`/instance/${encodeURIComponent(selectedInstanceId)}/logs`)
+	router.push(`/instance/${encodeURIComponent(selectedPath)}/logs`)
 }
 
 const currentLoadingBars = ref<LoadingBar[]>([])
-const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
 const notificationId = ref<string | number | null>(null)
 const dismissed = ref(false)
 
@@ -304,17 +299,8 @@ function getLoadingProgress(loadingBar: LoadingBar): number {
 }
 
 function getLoadingText(loadingBar: LoadingBar): string {
-	return loadingBar.message ?? ''
-}
-
-function getDisplayIconUrl(icon: string | null | undefined): string | null {
-	if (!icon) {
-		return null
-	}
-	if (/^(https?:|data:|blob:|asset:|tauri:)/.test(icon)) {
-		return icon
-	}
-	return convertFileSrc(icon)
+	const percent = Math.floor(getLoadingProgress(loadingBar) * 100)
+	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
 }
 
 function getNotification(): PopupNotification | null {
@@ -336,33 +322,24 @@ function removeNotification(): void {
 }
 
 function buildDownloadItems(): PopupNotificationProgressItem[] {
-	return [
-		...installJobNotifications.progressItems.value,
-		...currentLoadingBars.value.map((bar) => ({
-			id: getLoadingBarKey(bar),
-			title: bar.title ?? '',
-			text: getLoadingText(bar),
-			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
-			progress: getLoadingProgress(bar),
-			waiting: !bar.total || bar.total <= 0,
-			progressType: 'percentage',
-			progressCurrent: bar.current,
-			progressTotal: bar.total,
-		})),
-	]
+	return currentLoadingBars.value.map((bar) => ({
+		id: getLoadingBarKey(bar),
+		title: bar.title ?? '',
+		text: getLoadingText(bar),
+		progress: getLoadingProgress(bar),
+		waiting: !bar.total || bar.total <= 0,
+	}))
 }
 
 const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
-const hasActiveLoadingBars = computed(
-	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
-)
+const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
 
 function updateNotification(resummon = false): void {
 	if (resummon) {
 		dismissed.value = false
 	}
 
-	if (currentLoadingBars.value.length === 0 && !installJobNotifications.active.value) {
+	if (currentLoadingBars.value.length === 0) {
 		removeNotification()
 		dismissed.value = false
 		return
@@ -381,23 +358,17 @@ function updateNotification(resummon = false): void {
 	const progressItems = buildDownloadItems()
 
 	if (notif) {
-		notif.title = installJobNotifications.active.value
-			? installJobNotifications.title.value
-			: formatMessage(messages.downloads)
+		notif.title = formatMessage(messages.downloads)
 		notif.text = undefined
 		notif.progressItems = progressItems
-		notif.buttons = installJobNotifications.buttons.value
 		notif.progress = undefined
 		notif.waiting = undefined
 	} else {
 		notif = popupNotificationManager.addPopupNotification({
-			title: installJobNotifications.active.value
-				? installJobNotifications.title.value
-				: formatMessage(messages.downloads),
+			title: formatMessage(messages.downloads),
 			type: 'download',
 			autoCloseMs: null,
 			progressItems,
-			buttons: installJobNotifications.buttons.value,
 		})
 		notificationId.value = notif.id
 	}
@@ -410,8 +381,8 @@ function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
 			version: formatted.bar_type.version,
 		})
 	}
-	if (formatted.bar_type?.instance_id) {
-		formatted.title = formatted.bar_type.instance_name ?? formatted.bar_type.instance_id
+	if (formatted.bar_type?.profile_path) {
+		formatted.title = formatted.bar_type.profile_path
 	}
 	if (formatted.bar_type?.pack_name) {
 		formatted.title = formatted.bar_type.pack_name
@@ -427,43 +398,7 @@ async function refreshLoadingBars() {
 
 	currentLoadingBars.value = Object.values(bars)
 		.map(formatLoadingBars)
-		.filter(
-			(bar) =>
-				bar?.bar_type?.type !== 'launcher_update' &&
-				![
-					'java_download',
-					'pack_file_download',
-					'pack_download',
-					'minecraft_download',
-					'copy_instance',
-				].includes(bar?.bar_type?.type ?? ''),
-		)
-
-	const instanceIds = Array.from(
-		new Set(
-			currentLoadingBars.value
-				.map((bar) => bar.bar_type?.instance_id)
-				.filter((instanceId): instanceId is string => !!instanceId),
-		),
-	)
-	const instances = instanceIds.length
-		? await getInstances(instanceIds).catch((error) => {
-				handleError(error)
-				return []
-			})
-		: []
-	const instanceIconUrls = new Map(
-		instances.map((instance) => [instance.id, getDisplayIconUrl(instance.icon_path)]),
-	)
-	currentLoadingBarIconUrls.value = Object.fromEntries(
-		currentLoadingBars.value.map((bar) => {
-			const barIconUrl = getDisplayIconUrl(bar.bar_type?.icon)
-			const instanceIconUrl = bar.bar_type?.instance_id
-				? instanceIconUrls.get(bar.bar_type.instance_id)
-				: null
-			return [getLoadingBarKey(bar), barIconUrl ?? instanceIconUrl ?? null]
-		}),
-	)
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
 
 	currentLoadingBars.value.sort((a, b) => {
 		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
@@ -474,12 +409,6 @@ async function refreshLoadingBars() {
 	updateNotification()
 }
 
-const installJobNotifications = await useInstallJobNotifications({
-	router,
-	handleError,
-	onChange: updateNotification,
-})
-
 await refreshLoadingBars()
 
 const unlistenLoading = await loading_listener(async () => {
@@ -501,6 +430,5 @@ onBeforeUnmount(() => {
 	window.removeEventListener('online', handleOnline)
 	unlistenProcess()
 	unlistenLoading()
-	installJobNotifications.dispose()
 })
 </script>

apps/app-frontend/src/components/ui/ContextMenu.vue

@@ -12,7 +12,7 @@
 			<div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
 				<hr v-if="option.type === 'divider'" class="divider" />
 				<div
-					v-else-if="!(isInstanceLink(item) && option.name === `add_content`)"
+					v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
 					class="item clickable"
 					:class="[option.color ?? 'base']"
 				>
@@ -64,10 +64,10 @@ defineExpose({
 	},
 })
 
-const isInstanceLink = (item) => {
-	if (item.instance != undefined && item.instance.link) {
+const isLinkedData = (item) => {
+	if (item.instance != undefined && item.instance.linked_data) {
 		return true
-	} else if (item != undefined && item.link) {
+	} else if (item != undefined && item.linked_data) {
 		return true
 	}
 	return false

apps/app-frontend/src/components/ui/ErrorModal.vue

@@ -16,7 +16,7 @@ import { ChatIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 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 { install } from '@/helpers/profile.js'
 import { cancel_directory_change } from '@/helpers/settings.ts'
 import { handleSevereError } from '@/store/error.js'
 
@@ -52,6 +52,10 @@ defineExpose({
 			if (errorVal.message.includes('because the target machine actively refused it')) {
 				metadata.value.hostsFile = true
 			}
+		} else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+			title.value = 'Sign in to Minecraft'
+			errorType.value = 'minecraft_sign_in'
+			supportLink.value = 'https://support.modrinth.com'
 		} else if (errorVal.message && errorVal.message.includes('Move directory error:')) {
 			title.value = 'Could not change app directory'
 			errorType.value = 'directory_move'
@@ -68,7 +72,7 @@ defineExpose({
 			title.value = 'No loader selected'
 			errorType.value = 'no_loader_version'
 			supportLink.value = 'https://support.modrinth.com'
-			metadata.value.instanceId = context.instanceId
+			metadata.value.profilePath = context.profilePath
 		} else if (source === 'state_init') {
 			title.value = 'Error initializing Modrinth App'
 			errorType.value = 'state_init'
@@ -121,7 +125,7 @@ const loadingRepair = ref(false)
 async function repairInstance() {
 	loadingRepair.value = true
 	try {
-		await install_existing_instance(metadata.value.instanceId, false)
+		await install(metadata.value.profilePath, false)
 		errorModal.value.hide()
 	} catch (err) {
 		handleSevereError(err)
@@ -239,6 +243,20 @@ async function copyToClipboard(text) {
 						</button>
 					</div>
 				</template>
+				<div v-else-if="errorType === 'minecraft_sign_in'">
+					<p>
+						To play this instance, you must sign in through Microsoft below. If you don't have a
+						Minecraft account, you can purchase the game on the
+						<a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+							>Minecraft website</a
+						>.
+					</p>
+					<div class="cta-button">
+						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+							<LogInIcon /> Sign in to Minecraft
+						</button>
+					</div>
+				</div>
 				<template v-else-if="errorType === 'state_init'">
 					<p>
 						Modrinth App failed to load correctly. This may be because of a corrupted file, or

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -1,32 +1,28 @@
 <script setup>
-import { XIcon } from '@modrinth/assets'
+import { WrenchIcon, XIcon } from '@modrinth/assets'
 import {
+	Accordion,
 	ButtonStyled,
+	Checkbox,
 	commonMessages,
 	defineMessages,
-	FileTreeSelect,
 	injectNotificationManager,
-	NewModal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
-import { readDir, stat } from '@tauri-apps/plugin-fs'
 import { ref } from 'vue'
 
-import { PackageIcon } from '@/assets/icons'
-import {
-	export_instance_mrpack,
-	get_full_path,
-	get_pack_export_candidates,
-} from '@/helpers/instance'
+import { PackageIcon, VersionIcon } from '@/assets/icons'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
 	header: { id: 'app.export-modal.header', defaultMessage: 'Export modpack' },
-	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack name' },
+	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack Name' },
 	modpackNamePlaceholder: {
 		id: 'app.export-modal.modpack-name-placeholder',
 		defaultMessage: 'Modpack name',
@@ -43,7 +39,15 @@ const messages = defineMessages({
 		id: 'app.export-modal.description-placeholder',
 		defaultMessage: 'Enter modpack description...',
 	},
+	selectFilesLabel: {
+		id: 'app.export-modal.select-files-label',
+		defaultMessage: 'Configure which files are included in this export',
+	},
 	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
+	includeFile: {
+		id: 'app.export-modal.include-file-accessibility-label',
+		defaultMessage: 'Include "{file}"?',
+	},
 })
 
 const props = defineProps({
@@ -55,9 +59,8 @@ const props = defineProps({
 
 defineExpose({
 	show: () => {
-		resetExportState()
 		exportModal.value.show()
-		void initFiles().catch(handleError)
+		initFiles()
 	},
 })
 
@@ -66,33 +69,67 @@ const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
-const selectedFilePaths = ref([])
-const fileTreeKey = ref(0)
-const filesLoadId = ref(0)
-const instanceRoot = ref('')
-const loadedDirectories = ref(new Set())
+const folders = ref([])
 
-async function initFiles() {
-	const loadId = ++filesLoadId.value
-	const [filePaths, root] = await Promise.all([
-		get_pack_export_candidates(props.instance.id),
-		get_full_path(props.instance.id),
-	])
-	if (loadId !== filesLoadId.value) return
-
-	instanceRoot.value = root
-	const exportCandidates = await Promise.all(
-		filePaths.map((path) => buildExportCandidateItem(root, path)),
+const initFiles = async () => {
+	const newFolders = new Map()
+	const sep = '/'
+	files.value = []
+	await get_pack_export_candidates(props.instance.path).then((filePaths) =>
+		filePaths
+			.map((folder) => ({
+				path: folder,
+				name: folder.split(sep).pop(),
+				selected:
+					folder.startsWith('mods') ||
+					folder.startsWith('datapacks') ||
+					folder.startsWith('resourcepacks') ||
+					folder.startsWith('shaderpacks') ||
+					folder.startsWith('config'),
+				disabled:
+					folder === 'profile.json' ||
+					folder.startsWith('modrinth_logs') ||
+					folder.startsWith('.fabric'),
+			}))
+			.filter(
+				(pathData) =>
+					!pathData.path.includes('.DS_Store') &&
+					pathData.path !== 'mods/.connector' &&
+					!pathData.path.startsWith('mods/.connector/'),
+			)
+			.forEach((pathData) => {
+				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
+				if (parent !== '') {
+					if (newFolders.has(parent)) {
+						newFolders.get(parent).push(pathData)
+					} else {
+						newFolders.set(parent, [pathData])
+					}
+				} else {
+					files.value.push(pathData)
+				}
+			}),
 	)
-	if (loadId !== filesLoadId.value) return
-
-	files.value = exportCandidates
-	selectedFilePaths.value = files.value
-		.filter((file) => !file.disabled && isDefaultSelectedExportCandidate(file.path))
-		.map((file) => file.path)
+	folders.value = [...newFolders.entries()].map(([name, value]) => [
+		{
+			name,
+			showingMore: false,
+		},
+		value,
+	])
 }
 
+await initFiles()
+
 const exportPack = async () => {
+	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+	folders.value.forEach((args) => {
+		args[1].forEach((child) => {
+			if (child.selected) {
+				filesToExport.push(child.path)
+			}
+		})
+	})
 	const outputPath = await save({
 		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
 		filters: [
@@ -104,10 +141,10 @@ const exportPack = async () => {
 	})
 
 	if (outputPath) {
-		export_instance_mrpack(
-			props.instance.id,
+		export_profile_mrpack(
+			props.instance.path,
 			outputPath,
-			selectedFilePaths.value,
+			filesToExport,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -115,176 +152,94 @@ const exportPack = async () => {
 		exportModal.value.hide()
 	}
 }
-
-function resetExportState() {
-	nameInput.value = props.instance.name
-	exportDescription.value = ''
-	versionInput.value = '1.0.0'
-	files.value = []
-	selectedFilePaths.value = []
-	fileTreeKey.value += 1
-	instanceRoot.value = ''
-	loadedDirectories.value = new Set()
-}
-
-async function loadExportDirectory(path) {
-	if (!path || !instanceRoot.value || loadedDirectories.value.has(path)) return
-
-	const loadId = filesLoadId.value
-	loadedDirectories.value.add(path)
-
-	try {
-		const entries = await readDir(`${instanceRoot.value}/${path}`)
-		const childItems = await Promise.all(
-			entries.map((entry) => buildExportDirectoryChildItem(instanceRoot.value, path, entry)),
-		)
-		if (loadId !== filesLoadId.value) return
-
-		appendExportItems(childItems)
-	} catch {
-		loadedDirectories.value.delete(path)
-	}
-}
-
-async function buildExportCandidateItem(instanceRoot, path) {
-	try {
-		const entries = await readDir(`${instanceRoot}/${path}`)
-		const metadata = await getExportCandidateMetadata(instanceRoot, path)
-		return {
-			path,
-			type: 'directory',
-			disabled: isExportCandidateDisabled(path),
-			modified: metadata.modified,
-			count: entries.length,
-		}
-	} catch {
-		return buildExportFileItem(instanceRoot, path)
-	}
-}
-
-async function buildExportDirectoryChildItem(instanceRoot, parentPath, entry) {
-	const path = `${parentPath}/${entry.name}`
-	if (entry.isDirectory) {
-		const metadata = await getExportCandidateMetadata(instanceRoot, path)
-		return {
-			path,
-			type: 'directory',
-			disabled: isExportCandidateDisabled(path),
-			modified: metadata.modified,
-		}
-	}
-
-	return buildExportFileItem(instanceRoot, path)
-}
-
-async function buildExportFileItem(instanceRoot, path) {
-	const metadata = await getExportCandidateMetadata(instanceRoot, path)
-	return {
-		path,
-		type: 'file',
-		disabled: isExportCandidateDisabled(path),
-		size: metadata.size,
-		modified: metadata.modified,
-	}
-}
-
-function appendExportItems(items) {
-	const nextFiles = new Map(files.value.map((file) => [normalizeExportPath(file.path), file]))
-	for (const item of items) {
-		nextFiles.set(normalizeExportPath(item.path), item)
-	}
-	files.value = [...nextFiles.values()]
-}
-
-async function getExportCandidateMetadata(instanceRoot, path) {
-	try {
-		const metadata = await stat(`${instanceRoot}/${path}`)
-		return {
-			size: metadata.size,
-			modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : undefined,
-		}
-	} catch {
-		return {}
-	}
-}
-
-function normalizeExportPath(path) {
-	return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
-}
-
-function isDefaultSelectedExportCandidate(path) {
-	return (
-		path.startsWith('mods') ||
-		path.startsWith('datapacks') ||
-		path.startsWith('resourcepacks') ||
-		path.startsWith('shaderpacks') ||
-		path.startsWith('config')
-	)
-}
-
-function isExportCandidateDisabled(path) {
-	return (
-		path === 'profile.json' ||
-		path.startsWith('modrinth_logs') ||
-		path.startsWith('.fabric') ||
-		path.startsWith('__MACOSX')
-	)
-}
 </script>
 
 <template>
-	<NewModal
-		ref="exportModal"
-		:header="formatMessage(messages.header)"
-		scrollable
-		width="46rem"
-		max-width="calc(100vw - 2rem)"
-	>
-		<div class="flex flex-col gap-4">
+	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
+		<div class="flex flex-col gap-4 w-[40rem]">
 			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input w-full">
-					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
+				<div class="labeled_input">
+					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
 					<StyledInput
 						v-model="nameInput"
+						:icon="PackageIcon"
 						type="text"
 						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
 						clearable
-						wrapper-class="w-full"
 					/>
 				</div>
-				<div class="labeled_input w-full">
-					<p class="text-contrast font-semibold">
-						{{ formatMessage(messages.versionNumberLabel) }}
-					</p>
+				<div class="labeled_input">
+					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
 					<StyledInput
 						v-model="versionInput"
+						:icon="VersionIcon"
 						type="text"
 						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
 						clearable
-						wrapper-class="w-full"
 					/>
 				</div>
 			</div>
-			<div class="flex flex-col gap-2 min-w-0">
-				<p class="m-0 text-contrast font-semibold">
-					{{ formatMessage(commonMessages.descriptionLabel) }}
-				</p>
+			<div class="flex flex-col gap-2">
+				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
 				<StyledInput
 					v-model="exportDescription"
 					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
-					wrapper-class="w-full"
 				/>
 			</div>
-			<FileTreeSelect
-				:key="fileTreeKey"
-				v-model="selectedFilePaths"
-				class="min-w-0"
-				:items="files"
-				@navigate="loadExportDirectory"
-			/>
-		</div>
-		<template #actions>
+			<Accordion
+				class="w-full bg-surface-4 border border-solid border-surface-5 rounded-2xl overflow-clip"
+				button-class="p-4 w-full border-b border-solid border-b-surface-5 bg-surface-2 -mb-px hover:brightness-[--hover-brightness] group"
+			>
+				<template #title>
+					<span class="flex items-center gap-3 text-contrast group-active:scale-[0.98]">
+						<WrenchIcon aria-hidden="true" class="size-5 text-secondary" />
+						Configure which files are included in this export
+					</span>
+				</template>
+				<div class="flex flex-col [&>*:nth-child(even)]:bg-surface-3">
+					<div v-for="[path, children] in folders" :key="path.name" class="flex flex-col">
+						<Accordion
+							class="flex flex-col"
+							button-class="flex gap-3 pr-4 hover:bg-surface-5 group"
+						>
+							<template #title>
+								<Checkbox
+									:model-value="children.every((child) => child.selected)"
+									:indeterminate="
+										!children.every((child) => child.selected) &&
+										children.some((child) => child.selected)
+									"
+									:description="formatMessage(messages.includeFile, { file: path.name })"
+									class="pl-4 py-2"
+									:disabled="children.every((x) => x.disabled)"
+									@update:model-value="
+										(newValue) => children.forEach((child) => (child.selected = newValue))
+									"
+									@click.stop
+								/>
+								<span class="ml-2 group-active:scale-95">{{ path.name }}/</span>
+							</template>
+							<div v-for="child in children" :key="child.path">
+								<Checkbox
+									v-model="child.selected"
+									:label="child.name"
+									class="w-full px-8 py-2 hover:bg-surface-4 text-primary"
+									:disabled="child.disabled"
+								/>
+							</div>
+						</Accordion>
+					</div>
+					<Checkbox
+						v-for="file in files"
+						:key="file.path"
+						v-model="file.selected"
+						:label="file.name"
+						:disabled="file.disabled"
+						class="w-full px-4 py-2 hover:bg-surface-4 text-primary"
+					/>
+				</div>
+			</Accordion>
 			<div class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
 					<button @click="exportModal.hide">
@@ -299,6 +254,6 @@ function isExportCandidateDisabled(path) {
 					</button>
 				</ButtonStyled>
 			</div>
-		</template>
-	</NewModal>
+		</div>
+	</ModalWrapper>
 </template>

apps/app-frontend/src/components/ui/Instance.vue

@@ -15,10 +15,9 @@ import { useRouter } from 'vue-router'
 
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
-import { kill, run } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process'
-import { showInstanceInFolder } from '@/helpers/utils.js'
+import { get_by_profile_path } from '@/helpers/process'
+import { finish_install, kill, run } from '@/helpers/profile'
+import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 
 const { handleError } = injectNotificationManager()
@@ -55,11 +54,11 @@ const installed = computed(() => props.instance.install_stage === 'installed')
 const router = useRouter()
 
 const seeInstance = async () => {
-	await router.push(`/instance/${encodeURIComponent(props.instance.id)}`)
+	await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
 }
 
 const checkProcess = async () => {
-	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)
+	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
 
 	playing.value = runningProcesses.length > 0
 }
@@ -67,8 +66,8 @@ const checkProcess = async () => {
 const play = async (e, context) => {
 	e?.stopPropagation()
 	loading.value = true
-	await run(props.instance.id)
-		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
+	await run(props.instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
 			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
@@ -83,7 +82,7 @@ const stop = async (e, context) => {
 	e?.stopPropagation()
 	playing.value = false
 
-	await kill(props.instance.id).catch(handleError)
+	await kill(props.instance.path).catch(handleError)
 
 	trackEvent('InstanceStop', {
 		loader: props.instance.loader,
@@ -95,30 +94,17 @@ const stop = async (e, context) => {
 const repair = async (e) => {
 	e?.stopPropagation()
 
-	if (
-		props.instance.install_stage !== 'pack_installed' &&
-		(props.instance.link?.type === 'modrinth_modpack' ||
-			props.instance.link?.type === 'server_project_modpack')
-	) {
-		await install_pack_to_existing_instance(props.instance.id, {
-			type: 'fromVersionId',
-			project_id: props.instance.link.project_id ?? props.instance.link.server_project_id ?? '',
-			version_id: props.instance.link.version_id ?? props.instance.link.content_version_id ?? '',
-			title: props.instance.name,
-		}).catch(handleError)
-	} else {
-		await install_existing_instance(props.instance.id, false).catch(handleError)
-	}
+	await finish_install(props.instance).catch(handleError)
 }
 
 const openFolder = async () => {
-	await showInstanceInFolder(props.instance.id)
+	await showProfileInFolder(props.instance.path)
 }
 
 const addContent = async () => {
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-		query: { i: props.instance.id },
+		query: { i: props.instance.path },
 	})
 }
 
@@ -134,7 +120,7 @@ defineExpose({
 const currentEvent = ref(null)
 
 const unlisten = await process_listener((e) => {
-	if (e.instance_id === props.instance.id) {
+	if (e.profile_path_id === props.instance.path) {
 		currentEvent.value = e.event
 		if (e.event === 'finished') {
 			playing.value = false
@@ -156,7 +142,7 @@ onUnmounted(() => unlisten())
 			<Avatar
 				size="48px"
 				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-				:tint-by="instance.id"
+				:tint-by="instance.path"
 				alt="Mod card"
 			/>
 			<div class="h-full flex items-center font-bold text-contrast leading-normal">
@@ -205,7 +191,7 @@ onUnmounted(() => unlisten())
 				<Avatar
 					size="48px"
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-					:tint-by="instance.id"
+					:tint-by="instance.path"
 					alt="Mod card"
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 				/>

apps/app-frontend/src/components/ui/InstanceIndicator.vue

@@ -22,7 +22,7 @@ const props = withDefaults(
 )
 
 const instanceLink = computed(() => {
-	const base = `/instance/${encodeURIComponent(props.instance.id)}`
+	const base = `/instance/${encodeURIComponent(props.instance.path)}`
 	return props.backTab ? `${base}/${props.backTab}` : base
 })
 </script>

apps/app-frontend/src/components/ui/JavaDetectionModal.vue

@@ -1,33 +1,35 @@
 <template>
 	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
-		<div class="flex flex-col gap-4">
-			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
-				<template #cell-version="{ value }">
-					<span class="font-semibold text-primary">{{ value }}</span>
-				</template>
-				<template #cell-path="{ value }">
-					<span v-tooltip="value" class="block truncate font-mono text-xs">{{ value }}</span>
-				</template>
-				<template #cell-actions="{ row }">
-					<div class="flex items-center justify-end">
-						<ButtonStyled v-if="currentSelected.path === row.path">
-							<button class="!shadow-none" disabled><CheckIcon /> Selected</button>
+		<div class="auto-detect-modal">
+			<div class="table">
+				<div class="table-row table-head">
+					<div class="table-cell table-text">Version</div>
+					<div class="table-cell table-text">Path</div>
+					<div class="table-cell table-text">Actions</div>
+				</div>
+				<div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+					<div class="table-cell table-text">
+						<span>{{ javaInstall.version }}</span>
+					</div>
+					<div v-tooltip="javaInstall.path" class="table-cell table-text">
+						<span>{{ javaInstall.path }}</span>
+					</div>
+					<div class="table-cell table-text manage">
+						<ButtonStyled v-if="currentSelected.path === javaInstall.path">
+							<button disabled><CheckIcon /> Selected</button>
 						</ButtonStyled>
 						<ButtonStyled v-else>
-							<button class="!shadow-none" @click="setJavaInstall(row)"><PlusIcon /> Select</button>
+							<button @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</button>
 						</ButtonStyled>
 					</div>
-				</template>
-				<template #empty-state>
-					<div class="p-4 text-secondary">No java installations found!</div>
-				</template>
-			</Table>
-			<div class="flex justify-end">
+				</div>
+				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+					<div class="table-cell table-text">No java installations found!</div>
+				</div>
+			</div>
+			<div class="input-group push-right">
 				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
-						@click="$refs.detectJavaModal.hide()"
-					>
+					<button @click="$refs.detectJavaModal.hide()">
 						<XIcon />
 						Cancel
 					</button>
@@ -38,7 +40,7 @@
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Table } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -50,11 +52,6 @@ const { handleError } = injectNotificationManager()
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})
-const javaInstallColumns = [
-	{ key: 'version', label: 'Version', width: '9rem' },
-	{ key: 'path', label: 'Path' },
-	{ key: 'actions', label: 'Actions', align: 'right', width: '10rem' },
-]
 
 defineExpose({
 	show: async (version, currentSelectedJava) => {
@@ -80,3 +77,25 @@ function setJavaInstall(javaInstall) {
 	})
 }
 </script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+	.table {
+		.table-row {
+			grid-template-columns: 1fr 4fr min-content;
+		}
+
+		span {
+			display: inherit;
+			align-items: center;
+			justify-content: center;
+		}
+
+		padding: 0.5rem;
+	}
+}
+
+.manage {
+	display: flex;
+	gap: 0.5rem;
+}
+</style>

apps/app-frontend/src/components/ui/JavaSelector.vue

@@ -1,104 +1,85 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-	<div :id="props.id" class="toggle-setting" :class="{ compact }">
-		<div class="input-with-status">
-			<StyledInput
-				autocomplete="off"
-				:disabled="props.disabled"
-				:model-value="props.modelValue ? props.modelValue.path : ''"
-				:placeholder="placeholder ?? '/path/to/java'"
-				wrapper-class="installation-input"
-				@update:model-value="
-					(val) => {
-						emit('update:modelValue', {
-							...props.modelValue,
-							path: val,
-						})
-					}
-				"
-			/>
-			<ButtonStyled
-				:color="
-					!hoveringTest && !testingJava
-						? testingJavaSuccess === true
-							? 'green'
-							: 'red'
-						: 'standard'
-				"
-				color-fill="text"
-			>
-				<button
-					class="!shadow-none"
-					:disabled="testingJava || props.disabled"
-					@click="runTest(props.modelValue?.path)"
-					@mouseenter="!props.disabled && (hoveringTest = true)"
-					@mouseleave="hoveringTest = false"
-				>
-					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-					<CheckCircleIcon
-						v-else-if="testingJavaSuccess === true && !hoveringTest"
-						class="h-4 w-4"
-					/>
-					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
-					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
-		</div>
+	<div class="toggle-setting" :class="{ compact }">
+		<StyledInput
+			autocomplete="off"
+			:disabled="props.disabled"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
+			:placeholder="placeholder ?? '/path/to/java'"
+			wrapper-class="installation-input"
+			@update:model-value="
+				(val) => {
+					emit('update:modelValue', {
+						...props.modelValue,
+						path: val,
+					})
+				}
+			"
+		/>
 		<span class="installation-buttons">
 			<ButtonStyled v-if="props.version">
-				<button
-					v-tooltip="testingJavaSuccess === true ? 'Already installed' : undefined"
-					class="!shadow-none"
-					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
-					@click="reinstallJava"
-				>
+				<button :disabled="props.disabled || installingJava" @click="reinstallJava">
 					<DownloadIcon />
 					{{ installingJava ? 'Installing...' : 'Install recommended' }}
 				</button>
 			</ButtonStyled>
 			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
+				<button :disabled="props.disabled" @click="autoDetect">
 					<SearchIcon />
 					Detect
 				</button>
 			</ButtonStyled>
 			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
+				<button :disabled="props.disabled" @click="handleJavaFileInput()">
 					<FolderSearchIcon />
 					Browse
 				</button>
 			</ButtonStyled>
+			<ButtonStyled v-if="testingJava">
+				<button disabled>Testing...</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === true">
+				<button disabled>
+					<CheckIcon />
+					Success
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === false">
+				<button disabled>
+					<XIcon />
+					Failed
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<button :disabled="props.disabled" @click="testJava">
+					<PlayIcon />
+					Test
+				</button>
+			</ButtonStyled>
 		</span>
 	</div>
 </template>
 
 <script setup>
 import {
-	CheckCircleIcon,
+	CheckIcon,
 	DownloadIcon,
 	FolderSearchIcon,
-	RefreshCwIcon,
+	PlayIcon,
 	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
+	XIcon,
 } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import useJavaTest from '@/composables/useJavaTest'
 import { trackEvent } from '@/helpers/analytics'
-import { auto_install_java, find_filtered_jres, get_jre } from '@/helpers/jre.js'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
 
 const { handleError } = injectNotificationManager()
 
 const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: null,
-	},
 	version: {
 		type: Number,
 		required: false,
@@ -129,36 +110,29 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const {
-	testingJava,
-	javaTestResult: testingJavaSuccess,
-	testJavaInstallationDebounced,
-	testJavaInstallation,
-} = useJavaTest()
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
 
 const installingJava = ref(false)
-const hoveringTest = ref(false)
-let hasInitialized = false
 
-async function runTest(path) {
-	await testJavaInstallation(path, props.version, true)
+async function testJava() {
+	testingJava.value = true
+	testingJavaSuccess.value = await test_jre(
+		props.modelValue ? props.modelValue.path : '',
+		props.version,
+	)
+	testingJava.value = false
+
+	trackEvent('JavaTest', {
+		path: props.modelValue ? props.modelValue.path : '',
+		success: testingJavaSuccess.value,
+	})
+
+	setTimeout(() => {
+		testingJavaSuccess.value = null
+	}, 2000)
 }
 
-watch(
-	() => props.modelValue?.path,
-	(newPath) => {
-		if (newPath) {
-			if (!hasInitialized) {
-				testJavaInstallation(newPath, props.version, false)
-				hasInitialized = true
-			} else {
-				testJavaInstallationDebounced(newPath, props.version)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
 async function handleJavaFileInput() {
 	const filePath = await open()
 
@@ -168,7 +142,6 @@ async function handleJavaFileInput() {
 			result = {
 				path: filePath.path ?? filePath,
 				version: props.version.toString(),
-				parsed_version: props.version,
 				architecture: 'x86',
 			}
 		}
@@ -202,7 +175,6 @@ async function reinstallJava() {
 		result = {
 			path: path,
 			version: props.version.toString(),
-			parsed_version: props.version,
 			architecture: 'x86',
 		}
 	}
@@ -214,23 +186,13 @@ async function reinstallJava() {
 
 	emit('update:modelValue', result)
 	installingJava.value = false
-	runTest(result.path)
 }
 </script>
 
 <style lang="scss" scoped>
-.input-with-status {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	width: 100%;
-	min-width: 0;
-}
-
 .installation-input {
-	flex: 1 1 0;
-	min-width: 0;
+	width: 100% !important;
+	flex-grow: 1;
 }
 
 .toggle-setting {
@@ -253,4 +215,12 @@ async function reinstallJava() {
 	gap: 0.5rem;
 	margin: 0;
 }
+
+.test-success {
+	color: var(--color-green);
+}
+
+.test-fail {
+	color: var(--color-red);
+}
 </style>

apps/app-frontend/src/components/ui/ModpackVersionModal.vue

@@ -5,7 +5,7 @@ import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { update_managed_modrinth_version } from '@/helpers/instance'
+import { update_managed_modrinth_version } from '@/helpers/profile'
 import { releaseColor } from '@/helpers/utils'
 
 const props = defineProps({
@@ -32,14 +32,14 @@ const filteredVersions = computed(() => {
 })
 
 const modpackVersionModal = ref(null)
-const installedVersion = computed(() => props.instance?.link?.version_id)
+const installedVersion = computed(() => props.instance?.linked_data?.version_id)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)
 
 const switchVersion = async (versionId) => {
 	modpackVersionModal.value.hide()
 	inProgress.value = true
-	await update_managed_modrinth_version(props.instance.id, versionId)
+	await update_managed_modrinth_version(props.instance.path, versionId)
 	inProgress.value = false
 	emit('finish-install')
 }
@@ -59,7 +59,7 @@ const onHide = () => {
 		:on-hide="onHide"
 	>
 		<div class="modal-body">
-			<div v-if="instance.link" class="mod-card">
+			<div v-if="instance.linked_data" class="mod-card">
 				<div class="table">
 					<div class="table-row with-columns table-head">
 						<div class="table-cell table-text download-cell" />

apps/app-frontend/src/components/ui/PrideFundraiserBanner.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { CalendarIcon, UsersIcon, XIcon } from '@modrinth/assets'
-import { injectModrinthClient, ProgressBar } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, ref } from 'vue'
-
-const DISMISSED_STORAGE_KEY = 'pride-fundraiser-2026-dismissed'
-
-const client = injectModrinthClient()
-const dismissed = ref(localStorage.getItem(DISMISSED_STORAGE_KEY) === 'true')
-
-const { data: campaignInfo } = useQuery({
-	queryKey: ['campaign', 'pride-26'],
-	queryFn: () => client.labrinth.campaign_internal.getPride26(),
-	enabled: () => !dismissed.value,
-	staleTime: 15 * 60 * 1000,
-	refetchInterval: 15 * 60 * 1000,
-	retry: false,
-})
-const shouldShowBanner = computed(
-	() => !dismissed.value && Number(campaignInfo.value?.target_usd) > 0,
-)
-
-async function openPrideFundraiser() {
-	await openUrl('https://modrinth.com/pride?from=app')
-}
-
-function dismissBanner() {
-	dismissed.value = true
-	localStorage.setItem(DISMISSED_STORAGE_KEY, 'true')
-}
-
-function formatUsd(amount: string | number) {
-	return Number(amount).toLocaleString('en-US', {
-		style: 'currency',
-		currency: 'USD',
-		maximumFractionDigits: 0,
-	})
-}
-
-function daysLeft() {
-	return Math.max(
-		0,
-		Math.ceil((new Date('2026-07-01T00:00:00Z').getTime() - Date.now()) / (24 * 60 * 60 * 1000)),
-	)
-}
-</script>
-
-<template>
-	<div v-if="shouldShowBanner && campaignInfo">
-		<section
-			role="link"
-			tabindex="0"
-			class="flex w-full cursor-pointer flex-col gap-3 rounded-xl border border-solid border-surface-5 bg-button-bg p-3 text-primary transition-[border-color,filter] hover:border-surface-6 hover:brightness-125 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-			aria-label="Open Pride fundraiser"
-			@click="openPrideFundraiser"
-			@keydown.enter="openPrideFundraiser"
-			@keydown.space.prevent="openPrideFundraiser"
-		>
-			<div class="flex w-full items-center justify-between gap-2">
-				<h2 class="m-0 min-w-0 truncate text-base font-semibold text-contrast">
-					Pride Fundraiser 2026
-				</h2>
-				<button
-					type="button"
-					class="m-0 flex size-5 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-primary transition-colors hover:text-contrast focus-visible:text-contrast"
-					aria-label="Dismiss Pride fundraiser"
-					@click.stop="dismissBanner"
-					@keydown.stop
-				>
-					<XIcon aria-hidden="true" class="size-5" />
-				</button>
-			</div>
-			<div class="h-px w-full bg-surface-5" />
-			<div class="flex w-full flex-col gap-2.5">
-				<div class="flex items-end gap-1 whitespace-nowrap">
-					<span class="text-base font-semibold leading-5 text-contrast">
-						{{ formatUsd(campaignInfo.total_donations_usd) }}
-					</span>
-					<span class="text-xs font-medium leading-4">
-						of {{ formatUsd(campaignInfo.target_usd) }}
-					</span>
-				</div>
-				<ProgressBar
-					class="pride-fundraiser-banner__progress"
-					:progress="Number(campaignInfo.total_donations_usd)"
-					:max="Number(campaignInfo.target_usd)"
-					color="purple"
-					full-width
-					:gradient-border="false"
-					:aria-label="`${formatUsd(campaignInfo.total_donations_usd)} of ${formatUsd(
-						campaignInfo.target_usd,
-					)} raised`"
-				/>
-				<div class="flex flex-wrap items-center gap-2 text-xs font-medium leading-4">
-					<span class="flex items-center gap-1">
-						<UsersIcon aria-hidden="true" class="size-4 shrink-0" />
-						{{ campaignInfo.num_donators.toLocaleString('en-US') }}
-						{{ campaignInfo.num_donators === 1 ? 'supporter' : 'supporters' }}
-					</span>
-					<span class="flex items-center gap-1">
-						<CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
-						{{ daysLeft() }} {{ daysLeft() === 1 ? 'day left' : 'days left' }}
-					</span>
-				</div>
-			</div>
-		</section>
-	</div>
-</template>
-
-<style scoped>
-.pride-fundraiser-banner__progress :deep(.progress-bar) {
-	background: linear-gradient(
-		90deg,
-		var(--color-red) 0%,
-		var(--color-orange) 20%,
-		var(--color-green) 50%,
-		var(--color-blue) 75%,
-		var(--color-purple) 100%
-	);
-}
-</style>

apps/app-frontend/src/components/ui/ProgressBar.vue

@@ -37,6 +37,6 @@ defineProps({
 
 .progress-bar__fill {
 	height: 100%;
-	transition: width 0.3s ease-out;
+	transition: width 0.3s;
 }
 </style>

apps/app-frontend/src/components/ui/QuickInstanceSwitcher.vue

@@ -6,16 +6,16 @@ import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
 
 import NavButton from '@/components/ui/NavButton.vue'
-import { instance_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/instance'
+import { profile_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/profile'
 
 const { handleError } = injectNotificationManager()
 
 const recentInstances = ref([])
 const getInstances = async () => {
-	const instances = await list().catch(handleError)
+	const profiles = await list().catch(handleError)
 
-	recentInstances.value = instances
+	recentInstances.value = profiles
 		.sort((a, b) => {
 			const dateACreated = dayjs(a.created)
 			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
@@ -37,24 +37,24 @@ const getInstances = async () => {
 
 await getInstances()
 
-const unlistenInstance = await instance_listener(async (event) => {
+const unlistenProfile = await profile_listener(async (event) => {
 	if (event.event !== 'synced') {
 		await getInstances()
 	}
 })
 
 onUnmounted(() => {
-	unlistenInstance()
+	unlistenProfile()
 })
 </script>
 
 <template>
 	<div v-for="instance in recentInstances" :key="instance.id" v-tooltip.right="instance.name">
-		<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
+		<NavButton :to="`/instance/${encodeURIComponent(instance.path)}`" class="relative">
 			<Avatar
 				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
 				size="28px"
-				:tint-by="instance.id"
+				:tint-by="instance.path"
 				:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 			/>
 			<div
@@ -65,7 +65,10 @@ onUnmounted(() => {
 			</div>
 		</NavButton>
 	</div>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
+	<div
+		v-if="instances && recentInstances.length > 0"
+		class="h-px w-6 mx-auto my-2 bg-divider"
+	></div>
 </template>
 
 <style scoped lang="scss"></style>

apps/app-frontend/src/components/ui/SplashScreen.vue

@@ -126,7 +126,7 @@ watch(
 function fakeLoadingIncrease() {
 	if (loadingProgress.value < 95) {
 		setTimeout(() => {
-			loadingProgress.value += 2
+			loadingProgress.value += 1
 			fakeLoadingIncrease()
 		}, 5)
 	}

apps/app-frontend/src/components/ui/WindowControls.vue

@@ -22,7 +22,7 @@
 			hover-color-fill="background"
 			circular
 		>
-			<button class="relative expanded-button close-button" @click="handleClose">
+			<button class="relative expanded-button" @click="handleClose">
 				<XIcon />
 			</button>
 		</ButtonStyled>
@@ -82,12 +82,8 @@ const handleClose = async () => {
 </script>
 <style scoped>
 .expanded-button::before {
-	inset: -9px -6px;
+	inset: -6px;
 	content: '';
 	position: absolute;
 }
-
-.expanded-button.close-button::before {
-	inset: -9px -9px -9px -6px;
-}
 </style>

apps/app-frontend/src/components/ui/app-update-button/index.vue

@@ -1,124 +0,0 @@
-<template>
-	<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
-		<button
-			v-if="showUpdatePill"
-			type="button"
-			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out"
-			:class="{
-				'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
-				'opacity-100 scale-100': finishedDownloading && animateReadyPill,
-			}"
-			:disabled="isUpdateDownloading"
-			:aria-busy="isUpdateDownloading"
-			@click="handleUpdateClick"
-		>
-			<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
-			<DownloadIcon v-else />
-			<span v-if="isUpdateDownloading">
-				{{ formatMessage(messages.downloadingUpdate) }}
-				<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
-			</span>
-			<span v-else>{{ updateLabel }}</span>
-		</button>
-	</ButtonStyled>
-</template>
-
-<script setup lang="ts">
-import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-
-import {
-	appUpdateState,
-	downloadAvailableAppUpdate,
-	installAvailableAppUpdate,
-} from '@/providers/app-update'
-
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	update: {
-		id: 'app.action-bar.update',
-		defaultMessage: 'Update',
-	},
-	downloadingUpdate: {
-		id: 'app.action-bar.downloading-update',
-		defaultMessage: 'Downloading update',
-	},
-	reloadToUpdate: {
-		id: 'app.action-bar.reload-to-update',
-		defaultMessage: 'Reload to update',
-	},
-})
-
-const {
-	downloading,
-	downloadPercent,
-	downloadProgress,
-	finishedDownloading,
-	isVisible: isUpdateVisible,
-	metered,
-	restarting,
-} = appUpdateState
-
-const isUpdateDownloading = computed(
-	() =>
-		downloading.value ||
-		(downloadProgress.value > 0 && downloadProgress.value < 1 && !finishedDownloading.value),
-)
-const showUpdatePill = computed(
-	() => isUpdateVisible.value && (finishedDownloading.value || metered.value),
-)
-const animateReadyPill = ref(false)
-const updateLabel = computed(() => {
-	if (isUpdateDownloading.value) {
-		return formatMessage(messages.downloadingUpdate)
-	}
-
-	if (finishedDownloading.value) {
-		return formatMessage(messages.reloadToUpdate)
-	}
-
-	return formatMessage(messages.update)
-})
-let readyPillAnimationFrame: number | null = null
-watch([showUpdatePill, finishedDownloading], async ([show, ready], [wasShown, wasReady]) => {
-	if (readyPillAnimationFrame !== null) {
-		cancelAnimationFrame(readyPillAnimationFrame)
-		readyPillAnimationFrame = null
-	}
-
-	if (!show || !ready) {
-		animateReadyPill.value = false
-		return
-	}
-
-	if (wasShown && wasReady) {
-		return
-	}
-
-	animateReadyPill.value = false
-	await nextTick()
-	readyPillAnimationFrame = requestAnimationFrame(() => {
-		animateReadyPill.value = true
-		readyPillAnimationFrame = null
-	})
-})
-async function handleUpdateClick() {
-	if (isUpdateDownloading.value) {
-		return
-	}
-
-	if (finishedDownloading.value) {
-		await installAvailableAppUpdate()
-	} else {
-		await downloadAvailableAppUpdate()
-	}
-}
-
-onBeforeUnmount(() => {
-	if (readyPillAnimationFrame !== null) {
-		cancelAnimationFrame(readyPillAnimationFrame)
-	}
-})
-</script>

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
@@ -301,12 +301,11 @@ const messages = defineMessages({
 			</ButtonStyled>
 			<StyledInput
 				v-model="search"
-				:icon="SearchIcon"
 				type="text"
 				:placeholder="formatMessage(messages.searchFriends)"
 				clearable
-				input-class="!bg-transparent !border !border-solid !border-button-bg !text-primary !placeholder:text-primary"
-				wrapper-class="flex-1 [&>svg]:!text-primary [&>svg]:!opacity-100"
+				variant="outlined"
+				wrapper-class="flex-1"
 				@keyup.esc="search = ''"
 			/>
 		</template>
@@ -394,6 +393,7 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
+				open-by-default
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"

apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue

@@ -7,28 +7,26 @@ import {
 	injectNotificationManager,
 	StyledInput,
 } 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 { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'
+import { list } from '@/helpers/profile'
+import { add_server_to_profile, get_profile_worlds } from '@/helpers/worlds.ts'
 
 const { handleError } = injectNotificationManager()
-const queryClient = useQueryClient()
 
 const modal = ref()
 const searchFilter = ref('')
-const instances = ref([])
+const profiles = ref([])
 
 const serverName = ref('')
 const serverAddress = ref('')
 
-const shownInstances = computed(() =>
-	instances.value.filter((instance) => {
-		return instance.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+const shownProfiles = computed(() =>
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
 	}),
 )
 
@@ -38,15 +36,15 @@ defineExpose({
 		serverAddress.value = address
 		searchFilter.value = ''
 
-		const instanceValues = await list().catch(handleError)
+		const profilesVal = await list().catch(handleError)
 		await Promise.allSettled(
-			instanceValues.map(async (instance) => {
-				instance.adding = false
-				instance.added = false
+			profilesVal.map(async (profile) => {
+				profile.adding = false
+				profile.added = false
 
 				try {
-					const worlds = await get_instance_worlds(instance.id)
-					instance.added = worlds.some(
+					const worlds = await get_profile_worlds(profile.path)
+					profile.added = worlds.some(
 						(w) => w.type === 'server' && w.address === serverAddress.value,
 					)
 				} catch {
@@ -55,29 +53,28 @@ defineExpose({
 			}),
 		)
 
-		instances.value = instanceValues
+		profiles.value = profilesVal
 		modal.value.show()
 
 		trackEvent('AddServerToInstanceStart', { source: 'AddServerToInstanceModal' })
 	},
 })
 
-async function addServer(instance) {
-	instance.adding = true
+async function addServer(profile) {
+	profile.adding = true
 	try {
-		await add_server_to_instance(instance.id, serverName.value, serverAddress.value, 'prompt')
-		instance.added = true
-		await queryClient.invalidateQueries({ queryKey: ['worlds', instance.id] })
+		await add_server_to_profile(profile.path, serverName.value, serverAddress.value, 'prompt')
+		profile.added = true
 
 		trackEvent('AddServerToInstance', {
 			server_name: serverName.value,
-			instance_name: instance.name,
+			instance_name: profile.name,
 			source: 'AddServerToInstanceModal',
 		})
 	} catch (err) {
 		handleError(err)
 	}
-	instance.adding = false
+	profile.adding = false
 }
 </script>
 
@@ -94,26 +91,26 @@ async function addServer(instance) {
 			/>
 			<div class="max-h-[21rem] overflow-y-auto">
 				<div
-					v-for="instance in shownInstances"
-					:key="instance.id"
+					v-for="profile in shownProfiles"
+					:key="profile.path"
 					class="flex w-full items-center justify-between gap-2 bg-bg-raised text-icon shadow-none"
 				>
 					<router-link
 						class="btn btn-transparent p-2 text-left"
-						:to="`/instance/${encodeURIComponent(instance.id)}`"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
 						@click="modal.hide()"
 					>
 						<Avatar
-							:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
 							class="mr-2 [--size:2rem]"
 						/>
-						{{ instance.name }}
+						{{ profile.name }}
 					</router-link>
 					<ButtonStyled>
-						<button :disabled="instance.added || instance.adding" @click="addServer(instance)">
-							<PlusIcon v-if="!instance.added && !instance.adding" />
-							<CheckIcon v-else-if="instance.added" />
-							{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+						<button :disabled="profile.added || profile.adding" @click="addServer(profile)">
+							<PlusIcon v-if="!profile.added && !profile.adding" />
+							<CheckIcon v-else-if="profile.added" />
+							{{ profile.adding ? 'Adding...' : profile.added ? 'Added' : 'Add' }}
 						</button>
 					</ButtonStyled>
 				</div>

apps/app-frontend/src/components/ui/install_flow/IncompatibilityWarningModal.vue

@@ -0,0 +1,185 @@
+<template>
+	<ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
+		<div class="modal-body">
+			<p>
+				This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
+				you're trying to install it on. Are you sure you want to continue? Dependencies will not be
+				installed.
+			</p>
+			<table>
+				<thead>
+					<tr class="header">
+						<th>{{ instance?.name }}</th>
+						<th>{{ project.title }}</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="content">
+						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
+						<td>
+							<Combobox
+								v-if="versions?.length > 1"
+								v-model="selectedVersionId"
+								:options="versionOptions"
+								:searchable="true"
+								placeholder="Select version"
+								force-direction="up"
+								:max-height="150"
+							/>
+							<span v-else>
+								<span>{{ selectedVersionLabel }}</span>
+							</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<div class="button-group">
+				<ButtonStyled type="outlined">
+					<button @click="() => incompatibleModal.hide()"><XIcon />Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="installing" @click="install()">
+						<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup>
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	Combobox,
+	formatLoader,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { add_project_from_version as installMod } from '@/helpers/profile'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const instance = ref(null)
+const project = ref(null)
+const versions = ref(null)
+const selectedVersion = ref(null)
+const incompatibleModal = ref(null)
+const installing = ref(false)
+
+const onInstall = ref(() => {})
+
+const selectedVersionLabel = computed(() => {
+	if (!selectedVersion.value) return ''
+	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
+		.map((name) => formatLoader(formatMessage, name))
+		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
+})
+
+const versionOptions = computed(() =>
+	(versions.value ?? []).map((version) => ({
+		value: version.id,
+		label: `${version.name} (${version.loaders
+			.map((name) => formatLoader(formatMessage, name))
+			.join(', ')} - ${version.game_versions.join(', ')})`,
+	})),
+)
+
+const selectedVersionId = computed({
+	get: () => selectedVersion.value?.id ?? null,
+	set: (value) => {
+		if (!value) return
+		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
+	},
+})
+
+defineExpose({
+	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+		instance.value = instanceVal
+		versions.value = projectVersions ?? []
+		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
+
+		project.value = projectVal
+
+		onInstall.value = callback
+		installing.value = false
+
+		incompatibleModal.value.show()
+
+		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+	},
+})
+
+const install = async () => {
+	installing.value = true
+	await installMod(instance.value.path, selectedVersion.value.id, 'standalone').catch(handleError)
+	installing.value = false
+	onInstall.value(selectedVersion.value.id)
+	incompatibleModal.value.hide()
+
+	trackEvent('ProjectInstall', {
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
+		id: project.value,
+		version_id: selectedVersion.value.id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectIncompatibilityWarningModal',
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+.data {
+	text-transform: capitalize;
+}
+
+table {
+	width: 100%;
+	border-radius: var(--radius-lg);
+	border-collapse: collapse;
+	box-shadow: 0 0 0 1px var(--color-button-bg);
+}
+
+th {
+	text-align: left;
+	padding: 1rem;
+	background-color: var(--color-bg);
+	overflow: hidden;
+	border-bottom: 1px solid var(--color-button-bg);
+}
+
+th:first-child {
+	border-top-left-radius: var(--radius-lg);
+	border-right: 1px solid var(--color-button-bg);
+}
+
+th:last-child {
+	border-top-right-radius: var(--radius-lg);
+}
+
+td {
+	padding: 1rem;
+}
+
+td:first-child {
+	border-right: 1px solid var(--color-button-bg);
+}
+
+.button-group {
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>

apps/app-frontend/src/components/ui/install_flow/UnknownPackWarningModal.vue

@@ -1,41 +1,108 @@
 <template>
-	<UnknownFileWarningModal
-		ref="modal"
-		:mode="externalFilesInModpack.length > 0 ? 'modpack' : 'mod'"
-		:file-name="fileName"
-		:external-files-in-modpack="externalFilesInModpack"
-		@cancel="reset"
-		@continue="proceed"
-	/>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" :on-hide="reset">
+		<div class="max-w-[31rem] flex flex-col gap-6">
+			<Admonition
+				type="warning"
+				:header="formatMessage(messages.warningTitle)"
+				:body="formatMessage(messages.warningBody)"
+			/>
+			<div v-if="fileName" class="overflow-x-auto whitespace-nowrap text-sm text-secondary">
+				{{ fileName }}
+			</div>
+			<div>
+				<p class="mt-0 leading-tight">
+					{{ formatMessage(messages.body) }}
+				</p>
+				<p class="text-orange font-semibold mb-0 leading-tight">
+					{{ formatMessage(messages.malwareStatement) }}
+				</p>
+			</div>
+			<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button @click="cancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button :disabled="isProceeding" @click="proceed">
+						<SpinnerIcon v-if="isProceeding" class="animate-spin" />
+						<CircleArrowRightIcon v-else />
+						{{ formatMessage(messages.installAnyway) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
 </template>
 
 <script setup lang="ts">
-import { UnknownFileWarningModal } from '@modrinth/ui'
+import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings'
 import { useTheming } from '@/store/state'
 import type { FeatureFlag } from '@/store/theme.ts'
 
+const { formatMessage } = useVIntl()
 const themeStore = useTheming()
 const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
 
+const dontShowAgain = ref(false)
 const modal = useTemplateRef('modal')
 const onProceed = ref<() => Promise<void>>()
+const isProceeding = ref(false)
 const fileName = ref('')
-const externalFilesInModpack = ref<string[]>([])
 
-function show(
-	createInstance: () => Promise<void>,
-	selectedFileName = '',
-	selectedExternalFiles: string[] = [],
-) {
+const messages = defineMessages({
+	header: {
+		id: 'unknown-pack-warning-modal.header',
+		defaultMessage: 'Confirm installation',
+	},
+	warningTitle: {
+		id: 'unknown-pack-warning-modal.warning.title',
+		defaultMessage: 'Unknown file warning',
+	},
+	warningBody: {
+		id: 'unknown-pack-warning-modal.warning.body',
+		defaultMessage: `We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust.`,
+	},
+	body: {
+		id: 'unknown-pack-warning-modal.body',
+		defaultMessage: `A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack).`,
+	},
+	malwareStatement: {
+		id: 'unknown-pack-warning-modal.malware-statement',
+		defaultMessage: `Malware is often distributed through modpack files by sharing them on platforms like Discord.`,
+	},
+	dontShowAgain: {
+		id: 'unknown-pack-warning-modal.dont-show-again',
+		defaultMessage: `Don't show this warning again`,
+	},
+	installAnyway: {
+		id: 'unknown-pack-warning-modal.install-anyway',
+		defaultMessage: `Install anyway`,
+	},
+})
+
+function show(createInstance: () => Promise<void>, selectedFileName = '') {
 	onProceed.value = createInstance
 	fileName.value = selectedFileName
-	externalFilesInModpack.value = selectedExternalFiles
+	dontShowAgain.value = false
 
 	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
-		void createInstance()
+		// noinspection ES6MissingAwait
+		createInstance()
 		return
 	}
 
@@ -45,11 +112,18 @@ function show(
 function reset() {
 	onProceed.value = undefined
 	fileName.value = ''
-	externalFilesInModpack.value = []
 }
 
-async function proceed(dontShowAgain: boolean) {
-	if (dontShowAgain) {
+function cancel() {
+	modal.value?.hide()
+}
+
+async function proceed() {
+	if (!onProceed.value) {
+		return
+	}
+
+	if (dontShowAgain.value) {
 		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
 		const settings = await getSettings()
 		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
@@ -57,8 +131,9 @@ async function proceed(dontShowAgain: boolean) {
 	}
 
 	const createInstance = onProceed.value
-	reset()
-	if (createInstance) void createInstance()
+	modal.value?.hide()
+	// noinspection ES6MissingAwait
+	createInstance()
 }
 
 defineExpose({ show })

apps/app-frontend/src/components/ui/instance-page-header/index.vue

@@ -1,294 +0,0 @@
-<template>
-	<PageHeader :title="instance.name">
-		<template #leading>
-			<Avatar :src="iconSrc" :alt="instance.name" size="64px" :tint-by="instance.id" />
-		</template>
-
-		<template #metadata>
-			<InstanceHeaderServerMetadata
-				v-if="isServerInstance"
-				:loading-server-ping="loadingServerPing"
-				:players-online="playersOnline"
-				:status-online="statusOnline"
-				:recent-plays="recentPlays"
-				:ping="ping"
-				:minecraft-server="minecraftServer"
-				:linked-project-v3="linkedProjectV3"
-				:instance-id="instance.id"
-			/>
-			<PageHeaderMetadata v-else>
-				<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">
-					Minecraft {{ instance.game_version }}
-				</PageHeaderMetadataItem>
-				<PageHeaderMetadataItem
-					:icon="ServerLoaderIcon"
-					:icon-props="{ loader: loaderDisplayName }"
-					tooltip="Mod loader"
-				>
-					{{ loaderLabel }}
-				</PageHeaderMetadataItem>
-				<PageHeaderMetadataItem
-					v-if="showInstancePlayTime"
-					:icon="TimerIcon"
-					tooltip="Total playtime"
-				>
-					{{ playtimeLabel }}
-				</PageHeaderMetadataItem>
-			</PageHeaderMetadata>
-		</template>
-
-		<template #actions>
-			<PageHeaderActions>
-				<ButtonStyled v-if="isInstalling" color="brand" size="large">
-					<button type="button" disabled>
-						{{ formatMessage(commonMessages.installingLabel) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
-					<button type="button" @click="emit('repair')">
-						<DownloadIcon />
-						{{ formatMessage(messages.repair) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="playing" color="red" size="large">
-					<button type="button" :disabled="stopping" @click="emit('stop')">
-						<StopCircleIcon />
-						{{
-							stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<JoinedButtons
-					v-else-if="!loading && isServerInstance"
-					:actions="serverPlayActions"
-					color="brand"
-					size="large"
-				/>
-				<ButtonStyled v-else-if="!loading" color="brand" size="large">
-					<button type="button" @click="emit('play')">
-						<PlayIcon />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else color="brand" size="large">
-					<button type="button" disabled>{{ formatMessage(messages.starting) }}</button>
-				</ButtonStyled>
-
-				<ButtonStyled circular size="large">
-					<button
-						v-tooltip="formatMessage(messages.instanceSettings)"
-						type="button"
-						:aria-label="formatMessage(messages.instanceSettings)"
-						@click="emit('settings')"
-					>
-						<SettingsIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
-						:options="moreActions"
-						:tooltip="formatMessage(messages.moreActions)"
-						:aria-label="formatMessage(messages.moreActions)"
-					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
-			</PageHeaderActions>
-		</template>
-	</PageHeader>
-</template>
-
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	DownloadIcon,
-	ExternalIcon,
-	FolderOpenIcon,
-	MoreVerticalIcon,
-	PackageIcon,
-	PlayIcon,
-	SettingsIcon,
-	StopCircleIcon,
-	TagCategoryGamepad2Icon as Gamepad2Icon,
-	TimerIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	formatLoaderLabel,
-	type JoinedButtonAction,
-	JoinedButtons,
-	LoaderIcon as ServerLoaderIcon,
-	PageHeader,
-	PageHeaderActions,
-	PageHeaderMetadata,
-	PageHeaderMetadataItem,
-	type ServerLoader,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed } from 'vue'
-
-import type { GameInstance } from '@/helpers/types'
-
-import InstanceHeaderServerMetadata from './instance-page-header-server-metadata.vue'
-
-const messages = defineMessages({
-	createShortcut: {
-		id: 'instance.action.create-shortcut',
-		defaultMessage: 'Create shortcut',
-	},
-	exportModpack: {
-		id: 'instance.action.export-modpack',
-		defaultMessage: 'Export modpack',
-	},
-	instanceSettings: {
-		id: 'instance.action.settings',
-		defaultMessage: 'Instance settings',
-	},
-	launchInstance: {
-		id: 'instance.action.launch-instance',
-		defaultMessage: 'Launch instance',
-	},
-	moreActions: {
-		id: 'instance.action.more-actions',
-		defaultMessage: 'More actions',
-	},
-	neverPlayed: {
-		id: 'instance.playtime.never-played',
-		defaultMessage: 'Never played',
-	},
-	openFolder: {
-		id: 'instance.action.open-folder',
-		defaultMessage: 'Open folder',
-	},
-	repair: {
-		id: 'instance.action.repair',
-		defaultMessage: 'Repair',
-	},
-	starting: {
-		id: 'instance.action.starting',
-		defaultMessage: 'Starting...',
-	},
-	stopping: {
-		id: 'instance.action.stopping',
-		defaultMessage: 'Stopping...',
-	},
-})
-
-const props = withDefaults(
-	defineProps<{
-		instance: GameInstance
-		iconSrc?: string | null
-		isServerInstance?: boolean
-		showInstancePlayTime?: boolean
-		timePlayed?: number
-		playing?: boolean
-		loading?: boolean
-		stopping?: boolean
-		loadingServerPing?: boolean
-		playersOnline?: number
-		statusOnline?: boolean
-		recentPlays?: number
-		ping?: number
-		minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
-		linkedProjectV3?: Labrinth.Projects.v3.Project
-	}>(),
-	{
-		iconSrc: null,
-		isServerInstance: false,
-		showInstancePlayTime: false,
-		timePlayed: 0,
-		playing: false,
-		loading: false,
-		stopping: false,
-		loadingServerPing: false,
-		playersOnline: undefined,
-		statusOnline: false,
-		recentPlays: undefined,
-		ping: undefined,
-		minecraftServer: undefined,
-		linkedProjectV3: undefined,
-	},
-)
-
-const emit = defineEmits<{
-	repair: []
-	stop: []
-	play: []
-	playServer: []
-	settings: []
-	openFolder: []
-	export: []
-	createShortcut: []
-}>()
-
-const installingStages = [
-	'installing',
-	'pack_installing',
-	'pack_installed',
-	'not_installed',
-	'minecraft_installing',
-]
-
-const { formatMessage } = useVIntl()
-
-const isInstalling = computed(() => installingStages.includes(props.instance.install_stage))
-const loaderDisplayName = computed(() => formatLoaderLabel(props.instance.loader) as ServerLoader)
-const loaderLabel = computed(() =>
-	[loaderDisplayName.value, props.instance.loader_version].filter(Boolean).join(' '),
-)
-const playtimeLabel = computed(() => {
-	if (props.timePlayed <= 0) return formatMessage(messages.neverPlayed)
-
-	const hours = Math.floor(props.timePlayed / 3600)
-	if (hours >= 1) {
-		return `${hours} hour${hours > 1 ? 's' : ''}`
-	}
-
-	const minutes = Math.floor(props.timePlayed / 60)
-	if (minutes >= 1) {
-		return `${minutes} minute${minutes > 1 ? 's' : ''}`
-	}
-
-	const seconds = Math.floor(props.timePlayed)
-	return `${seconds} second${seconds > 1 ? 's' : ''}`
-})
-const serverPlayActions = computed<JoinedButtonAction[]>(() => [
-	{
-		id: 'join_server',
-		label: formatMessage(commonMessages.playButton),
-		icon: PlayIcon,
-		action: () => emit('playServer'),
-	},
-	{
-		id: 'launch_instance',
-		label: formatMessage(messages.launchInstance),
-		icon: PlayIcon,
-		action: () => emit('play'),
-	},
-])
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
-	{
-		id: 'open-folder',
-		label: formatMessage(messages.openFolder),
-		icon: FolderOpenIcon,
-		action: () => emit('openFolder'),
-	},
-	{
-		id: 'export-mrpack',
-		label: formatMessage(messages.exportModpack),
-		icon: PackageIcon,
-		action: () => emit('export'),
-	},
-	{
-		id: 'create-shortcut',
-		label: formatMessage(messages.createShortcut),
-		icon: ExternalIcon,
-		action: () => emit('createShortcut'),
-	},
-])
-</script>

apps/app-frontend/src/components/ui/instance-page-header/instance-page-header-server-metadata.vue

@@ -1,63 +0,0 @@
-<template>
-	<div class="flex items-center flex-wrap gap-2">
-		<template v-if="loadingServerPing">
-			<ServerOnlinePlayers
-				v-if="playersOnline !== undefined"
-				:online="playersOnline"
-				:status-online="statusOnline"
-				hide-label
-			/>
-			<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
-			<div
-				v-if="
-					(playersOnline !== undefined || recentPlays !== undefined) &&
-					(minecraftServer?.region || ping)
-				"
-				class="w-1.5 h-1.5 rounded-full bg-surface-5"
-			></div>
-			<ServerPing v-if="ping" :ping="ping" />
-		</template>
-
-		<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
-
-		<div v-if="minecraftServer?.region || ping" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
-
-		<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
-			Linked to
-			<Avatar
-				:src="linkedProjectV3.icon_url"
-				:alt="linkedProjectV3.name"
-				:tint-by="instanceId"
-				size="24px"
-			/>
-			<router-link
-				:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-				class="hover:underline text-primary truncate"
-			>
-				{{ linkedProjectV3.name }}
-			</router-link>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	Avatar,
-	ServerOnlinePlayers,
-	ServerPing,
-	ServerRecentPlays,
-	ServerRegion,
-} from '@modrinth/ui'
-
-defineProps<{
-	loadingServerPing?: boolean
-	playersOnline?: number
-	statusOnline?: boolean
-	recentPlays?: number
-	ping?: number
-	minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
-	linkedProjectV3?: Labrinth.Projects.v3.Project
-	instanceId?: string
-}>()
-</script>

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -4,14 +4,12 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
-	Chips,
 	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, type Ref, ref, watch } from 'vue'
@@ -19,8 +17,7 @@ import { useRouter } from 'vue-router'
 
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { install_duplicate_instance } from '@/helpers/install'
-import { edit, edit_icon, list, remove } from '@/helpers/instance'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
 import type { GameInstance } from '../../../helpers/types'
@@ -28,29 +25,21 @@ import type { GameInstance } from '../../../helpers/types'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
-const queryClient = useQueryClient()
 
 const deleteConfirmModal = ref()
 
 const { instance } = injectInstanceSettings()
-type ReleaseChannel = GameInstance['update_channel']
-const releaseChannelOptions: ReleaseChannel[] = ['release', 'beta', 'alpha']
 
 const title = ref(instance.value.name)
 const icon: Ref<string | undefined> = ref(instance.value.icon_path)
 const groups = ref([...instance.value.groups])
-const savingReleaseChannel = ref(false)
-const selectedReleaseChannel = ref<ReleaseChannel>(instance.value.update_channel)
-const releaseChannelDisabledItems = computed<ReleaseChannel[]>(() =>
-	savingReleaseChannel.value ? [...releaseChannelOptions] : [],
-)
 
 const newCategoryInput = ref('')
 
 const installing = computed(() => instance.value.install_stage !== 'installed')
 
-async function duplicateInstance() {
-	await install_duplicate_instance(instance.value.id).catch(handleError)
+async function duplicateProfile() {
+	await duplicate(instance.value.path).catch(handleError)
 	trackEvent('InstanceDuplicate', {
 		loader: instance.value.loader,
 		game_version: instance.value.game_version,
@@ -62,55 +51,9 @@ const availableGroups = computed(() => [
 	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
 ])
 
-function formatReleaseChannelLabel(channel: ReleaseChannel) {
-	switch (channel) {
-		case 'release':
-			return formatMessage(messages.updateChannelRelease)
-		case 'beta':
-			return formatMessage(messages.updateChannelBeta)
-		case 'alpha':
-			return formatMessage(messages.updateChannelAlpha)
-	}
-}
-
-function formatReleaseChannelDescription(channel: ReleaseChannel) {
-	switch (channel) {
-		case 'release':
-			return formatMessage(messages.updateChannelReleaseDescription)
-		case 'beta':
-			return formatMessage(messages.updateChannelBetaDescription)
-		case 'alpha':
-			return formatMessage(messages.updateChannelAlphaDescription)
-	}
-}
-
-watch(
-	() => [instance.value.id, instance.value.update_channel] as const,
-	() => {
-		if (!savingReleaseChannel.value) {
-			selectedReleaseChannel.value = instance.value.update_channel
-		}
-	},
-)
-
-watch(selectedReleaseChannel, async (channel, previousChannel) => {
-	const previousReleaseChannel = previousChannel ?? instance.value.update_channel
-	if (channel === instance.value.update_channel) return
-
-	savingReleaseChannel.value = true
-	const instanceId = instance.value.id
-	await edit(instanceId, { update_channel: channel })
-		.then(() => queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instanceId] }))
-		.catch((error) => {
-			selectedReleaseChannel.value = previousReleaseChannel
-			handleError(error)
-		})
-	savingReleaseChannel.value = false
-})
-
 async function resetIcon() {
 	icon.value = undefined
-	await edit_icon(instance.value.id, null).catch(handleError)
+	await edit_icon(instance.value.path, null).catch(handleError)
 	trackEvent('InstanceRemoveIcon')
 }
 
@@ -128,12 +71,12 @@ async function setIcon() {
 	if (!value) return
 
 	icon.value = value
-	await edit_icon(instance.value.id, icon.value).catch(handleError)
+	await edit_icon(instance.value.path, icon.value).catch(handleError)
 
 	trackEvent('InstanceSetIcon')
 }
 
-const editInstanceObject = computed(() => ({
+const editProfileObject = computed(() => ({
 	name: title.value.trim().substring(0, 32) ?? 'Instance',
 	groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
 }))
@@ -159,15 +102,15 @@ watch(
 	[title, groups, groups],
 	async () => {
 		if (removing.value) return
-		await edit(instance.value.id, editInstanceObject.value).catch(handleError)
+		await edit(instance.value.path, editProfileObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
 
 const removing = ref(false)
-async function removeInstance() {
+async function removeProfile() {
 	removing.value = true
-	const path = instance.value.id
+	const path = instance.value.path
 
 	trackEvent('InstanceRemove', {
 		loader: instance.value.loader,
@@ -232,38 +175,6 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.general.duplicate-button',
 		defaultMessage: 'Duplicate',
 	},
-	updateChannel: {
-		id: 'instance.settings.tabs.general.update-channel',
-		defaultMessage: 'Update channel',
-	},
-	updateChannelReleaseDescription: {
-		id: 'instance.settings.tabs.general.update-channel.release.description',
-		defaultMessage: 'Only release versions will be shown as available updates.',
-	},
-	updateChannelBetaDescription: {
-		id: 'instance.settings.tabs.general.update-channel.beta.description',
-		defaultMessage: 'Release and beta versions will be shown as available updates.',
-	},
-	updateChannelAlphaDescription: {
-		id: 'instance.settings.tabs.general.update-channel.alpha.description',
-		defaultMessage: 'Release, beta, and alpha versions will be shown as available updates.',
-	},
-	updateChannelRelease: {
-		id: 'instance.settings.tabs.general.update-channel.release',
-		defaultMessage: 'Release',
-	},
-	updateChannelBeta: {
-		id: 'instance.settings.tabs.general.update-channel.beta',
-		defaultMessage: 'Beta',
-	},
-	updateChannelAlpha: {
-		id: 'instance.settings.tabs.general.update-channel.alpha',
-		defaultMessage: 'Alpha',
-	},
-	selectUpdateChannelAriaLabel: {
-		id: 'instance.settings.tabs.general.update-channel.select',
-		defaultMessage: 'Select update channel',
-	},
 	deleteInstance: {
 		id: 'instance.settings.tabs.general.delete',
 		defaultMessage: 'Delete instance',
@@ -285,7 +196,7 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeInstance" />
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<div class="block">
 		<div class="float-end ml-10 relative group w-fit">
 			<div class="flex flex-col gap-1">
@@ -311,7 +222,7 @@ const messages = defineMessages({
 							:src="icon ? convertFileSrc(icon) : icon"
 							size="108px"
 							class="transition-[filter] group-hover:brightness-75"
-							:tint-by="instance.id"
+							:tint-by="instance.path"
 							no-shadow
 						/>
 						<div
@@ -351,7 +262,7 @@ const messages = defineMessages({
 						aria-labelledby="duplicate-instance-label"
 						:disabled="installing"
 						class="w-max !shadow-none"
-						@click="duplicateInstance"
+						@click="duplicateProfile"
 					>
 						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
 					</button>
@@ -393,23 +304,6 @@ const messages = defineMessages({
 			</p>
 		</div>
 
-		<div class="flex flex-col gap-2.5 mt-6">
-			<h2 class="m-0 text-lg font-semibold text-contrast block">
-				{{ formatMessage(messages.updateChannel) }}
-			</h2>
-			<Chips
-				v-model="selectedReleaseChannel"
-				:items="releaseChannelOptions"
-				:format-label="formatReleaseChannelLabel"
-				:capitalize="false"
-				:disabled-items="releaseChannelDisabledItems"
-				:aria-label="formatMessage(messages.selectUpdateChannelAriaLabel)"
-			/>
-			<p class="m-0">
-				{{ formatReleaseChannelDescription(selectedReleaseChannel) }}
-			</p>
-		</div>
-
 		<div class="flex flex-col gap-2.5 mt-6">
 			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 				{{ formatMessage(messages.deleteInstance) }}

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -8,7 +8,7 @@ import {
 } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
-import { edit } from '@/helpers/instance'
+import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
@@ -28,21 +28,21 @@ const overrideHooks = ref(
 )
 const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
 
-const editInstanceObject = computed(() => {
-	const editInstancePatch: {
+const editProfileObject = computed(() => {
+	const editProfile: {
 		hooks?: Hooks
 	} = {}
 
 	// When hooks are not overridden per-instance, we want to clear them
-	editInstancePatch.hooks = overrideHooks.value ? hooks.value : {}
+	editProfile.hooks = overrideHooks.value ? hooks.value : {}
 
-	return editInstancePatch
+	return editProfile
 })
 
 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(instance.value.id, editInstanceObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -4,123 +4,79 @@ import {
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
-	injectFilePicker,
 	injectNotificationManager,
 	InstallationSettingsLayout,
 	provideAppBackup,
 	provideInstallationSettings,
-	useDebugLogger,
 	useVIntl,
 } from '@modrinth/ui'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
 import {
-	install_duplicate_instance,
-	install_existing_instance,
-	install_pack_to_existing_instance,
-	installJobInstanceId,
-	wait_for_install_job,
-} from '@/helpers/install'
-import {
+	duplicate,
 	edit,
 	get_linked_modpack_info,
+	install,
 	list,
 	update_managed_modrinth_version,
 	update_repair_modrinth,
-} from '@/helpers/instance'
-import { get_loader_versions } from '@/helpers/metadata'
+} from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { injectInstanceSettings } from '@/providers/instance-settings'
-import { useTheming } from '@/store/state'
 
 import type { Manifest } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
-const filePicker = injectFilePicker()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
-const debug = useDebugLogger('AppInstallationSettings')
-const themeStore = useTheming()
 
-const { instance, offline, isMinecraftServer, onUnlinked, closeModal } = injectInstanceSettings()
-const skipNonEssentialWarnings = computed(() =>
-	themeStore.getFeatureFlag('skip_non_essential_warnings'),
-)
+const { instance, offline, isMinecraftServer, onUnlinked } = injectInstanceSettings()
 
-debug('metadata load: start', {
-	instanceId: instance.value.id,
-	loader: instance.value.loader,
-	gameVersion: instance.value.game_version,
-	installStage: instance.value.install_stage,
-})
+const [
+	fabric_versions,
+	forge_versions,
+	quilt_versions,
+	neoforge_versions,
+	all_game_versions,
+	loaders,
+] = await Promise.all([
+	get_loader_versions('fabric')
+		.then((manifest: Manifest) => shallowRef(manifest))
+		.catch(handleError),
+	get_loader_versions('forge')
+		.then((manifest: Manifest) => shallowRef(manifest))
+		.catch(handleError),
+	get_loader_versions('quilt')
+		.then((manifest: Manifest) => shallowRef(manifest))
+		.catch(handleError),
+	get_loader_versions('neo')
+		.then((manifest: Manifest) => shallowRef(manifest))
+		.catch(handleError),
+	get_game_versions()
+		.then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
+		.catch(handleError),
+	get_loaders()
+		.then((value: PlatformTag[]) =>
+			value
+				.filter(
+					(item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
+				)
+				.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+		)
+		.then((loader: PlatformTag[]) => ref(loader))
+		.catch(handleError),
+])
 
-function getSupportedModpackLoaders() {
-	return get_loaders().then((value: PlatformTag[]) =>
-		value
-			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
-			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-	)
-}
-
-const fabricVersionsQuery = useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
-	queryFn: () => get_loader_versions('fabric') as Promise<Manifest>,
+const { data: modpackInfo } = useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
+	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
+	enabled: computed(() => !!instance.value.linked_data?.project_id && !offline),
 })
-const forgeVersionsQuery = useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'forge'],
-	queryFn: () => get_loader_versions('forge') as Promise<Manifest>,
-})
-const quiltVersionsQuery = useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
-	queryFn: () => get_loader_versions('quilt') as Promise<Manifest>,
-})
-const neoforgeVersionsQuery = useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'neo'],
-	queryFn: () => get_loader_versions('neo') as Promise<Manifest>,
-})
-const gameVersionsQuery = useQuery({
-	queryKey: ['instance-settings', 'game-versions'],
-	queryFn: () => get_game_versions() as Promise<GameVersionTag[]>,
-})
-const loadersQuery = useQuery({
-	queryKey: ['instance-settings', 'loaders', 'modpack'],
-	queryFn: getSupportedModpackLoaders,
-})
-
-const metadataLoading = computed(() =>
-	[
-		fabricVersionsQuery,
-		forgeVersionsQuery,
-		quiltVersionsQuery,
-		neoforgeVersionsQuery,
-		gameVersionsQuery,
-		loadersQuery,
-	].some((query) => query.isLoading.value),
-)
-
-debug('metadata queries configured', {
-	instanceId: instance.value.id,
-	loader: instance.value.loader,
-	gameVersion: instance.value.game_version,
-})
-
-const isModrinthLinkedModpack = computed(
-	() =>
-		instance.value.link?.type === 'modrinth_modpack' ||
-		instance.value.link?.type === 'server_project_modpack',
-)
-const isImportedModpack = computed(() => instance.value.link?.type === 'imported_modpack')
-
-const modpackInfoQuery = useQuery({
-	queryKey: computed(() => ['linkedModpackInfo', instance.value.id]),
-	queryFn: () => get_linked_modpack_info(instance.value.id, 'must_revalidate'),
-	enabled: computed(() => isModrinthLinkedModpack.value && !offline),
-})
-const modpackInfo = modpackInfoQuery.data
 
 const repairing = ref(false)
 const reinstalling = ref(false)
@@ -133,60 +89,31 @@ const messages = defineMessages({
 })
 
 function getManifest(loader: string) {
-	const map: Record<string, Manifest | undefined> = {
-		fabric: fabricVersionsQuery.data.value,
-		forge: forgeVersionsQuery.data.value,
-		quilt: quiltVersionsQuery.data.value,
-		neoforge: neoforgeVersionsQuery.data.value,
+	const map: Record<string, typeof fabric_versions> = {
+		fabric: fabric_versions,
+		forge: forge_versions,
+		quilt: quilt_versions,
+		neoforge: neoforge_versions,
 	}
-	const manifest = map[loader]
-	debug('getManifest:', {
-		loader,
-		hasManifest: !!manifest,
-		gameVersions: manifest?.gameVersions?.length ?? 0,
-	})
-	return manifest
-}
-
-async function installLocalModpackFromPicker() {
-	const picked = await filePicker.pickModpackFile({ readFile: false })
-	if (!picked?.path) return false
-
-	const job = await install_pack_to_existing_instance(instance.value.id, {
-		type: 'fromFile',
-		path: picked.path,
-	}).catch(handleError)
-	if (!job) return false
-
-	const completed = await wait_for_install_job(job.job_id).catch(handleError)
-	return !!completed
+	return map[loader]
 }
 
 provideAppBackup({
 	async createBackup() {
-		debug('createBackup: start', {
-			instanceId: instance.value.id,
-			instanceName: instance.value.name,
-		})
-		const allInstances = await list()
+		const allProfiles = await list()
 		const prefix = `${instance.value.name} - Backup #`
-		const existingNums = allInstances
+		const existingNums = allProfiles
 			.filter((p) => p.name.startsWith(prefix))
 			.map((p) => parseInt(p.name.slice(prefix.length), 10))
 			.filter((n) => !isNaN(n))
 		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
-		const job = await install_duplicate_instance(instance.value.id)
-		const newInstanceId = installJobInstanceId(job)
-		if (newInstanceId) {
-			await edit(newInstanceId, { name: `${prefix}${nextNum}` })
-		}
-		debug('createBackup: done', { newInstanceId, backupName: `${prefix}${nextNum}` })
+		const newPath = await duplicate(instance.value.path)
+		await edit(newPath, { name: `${prefix}${nextNum}` })
 	},
 })
 
 provideInstallationSettings({
-	closeSettings: closeModal,
-	loading: computed(() => metadataLoading.value || modpackInfoQuery.isLoading.value),
+	loading: ref(false),
 	installationInfo: computed(() => {
 		const rows = [
 			{
@@ -208,7 +135,7 @@ provideInstallationSettings({
 		}
 		return rows
 	}),
-	isLinked: computed(() => isModrinthLinkedModpack.value || isImportedModpack.value),
+	isLinked: computed(() => !!instance.value.linked_data?.locked),
 	isBusy: computed(
 		() =>
 			instance.value.install_stage !== 'installed' ||
@@ -216,16 +143,7 @@ provideInstallationSettings({
 			reinstalling.value ||
 			!!offline,
 	),
-	skipNonEssentialWarnings,
 	modpack: computed(() => {
-		if (isImportedModpack.value && instance.value.link?.type === 'imported_modpack') {
-			return {
-				iconUrl: instance.value.icon_path,
-				title: instance.value.link.name ?? instance.value.name,
-				versionNumber: instance.value.link.version_number ?? undefined,
-				filename: instance.value.link.filename ?? undefined,
-			}
-		}
 		if (!modpackInfo.value) return null
 		return {
 			iconUrl: modpackInfo.value.project.icon_url,
@@ -237,212 +155,114 @@ provideInstallationSettings({
 	currentPlatform: computed(() => instance.value.loader),
 	currentGameVersion: computed(() => instance.value.game_version),
 	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
-	availablePlatforms: computed(() => loadersQuery.data.value?.map((x) => x.name) ?? []),
+	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
 
 	resolveGameVersions(loader, showSnapshots) {
-		const versions = gameVersionsQuery.data.value ?? []
+		const versions = all_game_versions?.value ?? []
 		const filtered = versions.filter((item) => {
 			if (loader === 'vanilla') return true
 			const manifest = getManifest(loader)
-			return !!manifest?.gameVersions?.some((x) => item.version === x.id)
+			return !!manifest?.value?.gameVersions?.some((x) => item.version === x.id)
 		})
-		const result = (
-			showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')
-		).map((x) => ({ value: x.version, label: x.version }))
-		debug('resolveGameVersions:', {
-			loader,
-			showSnapshots,
-			totalVersions: versions.length,
-			filteredVersions: filtered.length,
-			resultVersions: result.length,
-		})
-		return result
+		return (showSnapshots ? filtered : filtered.filter((x) => x.version_type === 'release')).map(
+			(x) => ({ value: x.version, label: x.version }),
+		)
 	},
 
 	resolveLoaderVersions(loader, gameVersion) {
-		if (loader === 'vanilla' || !gameVersion) {
-			debug('resolveLoaderVersions: skipped', { loader, gameVersion })
-			return []
-		}
+		if (loader === 'vanilla' || !gameVersion) return []
 		const manifest = getManifest(loader)
-		if (!manifest) {
-			debug('resolveLoaderVersions: no manifest', { loader, gameVersion })
-			return []
+		if (!manifest?.value) return []
+		if (loader === 'fabric' || loader === 'quilt') {
+			return manifest.value.gameVersions[0]?.loaders ?? []
 		}
-		const entry = manifest.gameVersions?.find((item) => item.id === gameVersion)
-		if (entry?.versionGroup) {
-			const result =
-				manifest.versionGroups?.find((group) => group.id === entry.versionGroup)?.loaders ?? []
-			debug('resolveLoaderVersions: version group result', {
-				loader,
-				gameVersion,
-				versionGroup: entry.versionGroup,
-				count: result.length,
-			})
-			return result
-		}
-		const placeholder = manifest.gameVersions?.find((item) => item.id === '${modrinth.gameVersion}')
-		if (placeholder) {
-			const result = manifest.gameVersions?.some((item) => item.id === gameVersion)
-				? placeholder.loaders
-				: []
-			debug('resolveLoaderVersions: placeholder result', {
-				loader,
-				gameVersion,
-				count: result.length,
-			})
-			return result
-		}
-		const result = entry?.loaders ?? []
-		debug('resolveLoaderVersions: result', { loader, gameVersion, count: result.length })
-		return result
+		return manifest.value.gameVersions?.find((item) => item.id === gameVersion)?.loaders ?? []
 	},
 
 	resolveHasSnapshots(loader) {
-		const versions = gameVersionsQuery.data.value ?? []
-		if (loader === 'vanilla') {
-			const result = versions.some((x) => x.version_type !== 'release')
-			debug('resolveHasSnapshots: vanilla', { loader, result })
-			return result
-		}
+		const versions = all_game_versions?.value ?? []
+		if (loader === 'vanilla') return versions.some((x) => x.version_type !== 'release')
 		const manifest = getManifest(loader)
 		const supported = versions.filter(
-			(item) => !!manifest?.gameVersions?.some((x) => item.version === x.id),
+			(item) => !!manifest?.value?.gameVersions?.some((x) => item.version === x.id),
 		)
-		const result = supported.some((x) => x.version_type !== 'release')
-		debug('resolveHasSnapshots:', {
-			loader,
-			totalVersions: versions.length,
-			supportedVersions: supported.length,
-			result,
-		})
-		return result
+		return supported.some((x) => x.version_type !== 'release')
 	},
 
 	async save(platform, gameVersion, loaderVersionId) {
-		debug('save: called', {
-			instanceId: instance.value.id,
-			platform,
-			gameVersion,
-			loaderVersionId,
-		})
-		const editInstancePatch: Record<string, string | undefined> = {
+		const editProfile: Record<string, string | undefined> = {
 			loader: platform,
 			game_version: gameVersion,
 		}
 		if (platform !== 'vanilla' && loaderVersionId) {
-			editInstancePatch.loader_version = loaderVersionId
+			editProfile.loader_version = loaderVersionId
 		}
-		await edit(instance.value.id, editInstancePatch).catch(handleError)
-		debug('save: edit complete', { editInstancePatch })
+		await edit(instance.value.path, editProfile).catch(handleError)
 	},
 
 	afterSave: async () => {
-		debug('afterSave: installing', { instanceId: instance.value.id })
-		await install_existing_instance(instance.value.id, false).catch(handleError)
+		await install(instance.value.path, false).catch(handleError)
 		trackEvent('InstanceRepair', {
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
-		debug('afterSave: done')
 	},
 
 	async repair() {
-		debug('repair: called', { instanceId: instance.value.id })
 		repairing.value = true
-		await install_existing_instance(instance.value.id, true).catch(handleError)
+		await install(instance.value.path, true).catch(handleError)
 		repairing.value = false
 		trackEvent('InstanceRepair', {
 			loader: instance.value.loader,
 			game_version: instance.value.game_version,
 		})
-		debug('repair: done')
 	},
 
 	async reinstallModpack() {
-		debug('reinstallModpack: called', { instanceId: instance.value.id })
 		reinstalling.value = true
-		let shouldTrack = false
-		try {
-			if (isImportedModpack.value) {
-				shouldTrack = await installLocalModpackFromPicker()
-			} else {
-				await update_repair_modrinth(instance.value.id).catch(handleError)
-				shouldTrack = true
-			}
-		} finally {
-			reinstalling.value = false
-		}
-		if (shouldTrack) {
-			trackEvent('InstanceRepair', {
-				loader: instance.value.loader,
-				game_version: instance.value.game_version,
-			})
-		}
-		debug('reinstallModpack: done')
-	},
-
-	async swapModpack() {
-		debug('swapModpack: called', { instanceId: instance.value.id })
-		reinstalling.value = true
-		try {
-			const installed = await installLocalModpackFromPicker()
-			if (installed) {
-				trackEvent('InstanceRepair', {
-					loader: instance.value.loader,
-					game_version: instance.value.game_version,
-				})
-			}
-		} finally {
-			reinstalling.value = false
-		}
-		debug('swapModpack: done')
+		await update_repair_modrinth(instance.value.path).catch(handleError)
+		reinstalling.value = false
+		trackEvent('InstanceRepair', {
+			loader: instance.value.loader,
+			game_version: instance.value.game_version,
+		})
 	},
 
 	async unlinkModpack() {
-		debug('unlinkModpack: called', { instanceId: instance.value.id })
-		await edit(instance.value.id, {
-			link: null as unknown as undefined,
+		await edit(instance.value.path, {
+			linked_data: null as unknown as undefined,
 		})
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', instance.value.id],
+			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
 		onUnlinked()
-		debug('unlinkModpack: done')
 	},
 
 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
-		debug('fetchModpackVersions: called', {
-			projectId: instance.value.link?.project_id,
-		})
-		const versions = await get_project_versions(instance.value.link!.project_id!).catch(handleError)
-		debug('fetchModpackVersions: done', { count: versions?.length ?? 0 })
+		const versions = await get_project_versions(instance.value.linked_data!.project_id!).catch(
+			handleError,
+		)
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
 	},
 
 	async getVersionChangelog(versionId: string) {
-		debug('getVersionChangelog: called', { versionId })
 		return (await get_version(versionId, 'must_revalidate').catch(
 			() => null,
 		)) as Labrinth.Versions.v2.Version | null
 	},
 
 	async onModpackVersionConfirm(version) {
-		debug('onModpackVersionConfirm: called', {
-			versionId: version.id,
-			instanceId: instance.value.id,
-		})
-		await update_managed_modrinth_version(instance.value.id, version.id)
+		await update_managed_modrinth_version(instance.value.path, version.id)
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', instance.value.id],
+			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
-		debug('onModpackVersionConfirm: done')
 	},
 
 	updaterModalProps: computed(() => ({
 		isApp: true,
-		currentVersionId: modpackInfo.value?.update_version_id ?? instance.value.link?.version_id ?? '',
+		currentVersionId:
+			modpackInfo.value?.update_version_id ?? instance.value.linked_data?.version_id ?? '',
 		projectIconUrl: modpackInfo.value?.project?.icon_url,
 		projectName: modpackInfo.value?.project?.title ?? 'Modpack',
 		currentGameVersion: instance.value.game_version,
@@ -451,10 +271,7 @@ provideInstallationSettings({
 
 	isServer: false,
 	isApp: true,
-	showModpackVersionActions: computed(
-		() => isModrinthLinkedModpack.value && !isMinecraftServer.value,
-	),
-	isLocalFile: isImportedModpack,
+	showModpackVersionActions: !isMinecraftServer.value,
 	repairing,
 	reinstalling,
 })

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -1,15 +1,6 @@
 <script setup lang="ts">
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
 import {
-	CheckCircleIcon,
-	CoffeeIcon,
-	FolderSearchIcon,
-	RefreshCwIcon,
-	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -17,13 +8,11 @@ import {
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
 import { computed, readonly, ref, watch } from 'vue'
 
-import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import useJavaTest from '@/composables/useJavaTest'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
-import { edit, get_optimal_jre_key } from '@/helpers/instance'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
@@ -36,54 +25,9 @@ const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
 
-const optimalJava = readonly(await get_optimal_jre_key(instance.value.id).catch(handleError))
-
 const overrideJavaInstall = ref(!!instance.value.java_path)
-const javaPath = ref(instance.value.java_path ?? optimalJava?.path ?? '')
-
-const activePath = computed(() =>
-	overrideJavaInstall.value ? javaPath.value : (optimalJava?.path ?? ''),
-)
-
-watch(overrideJavaInstall, (enabled) => {
-	if (enabled && !javaPath.value) {
-		javaPath.value = optimalJava?.path ?? ''
-	}
-})
-
-const { testingJava, javaTestResult, testJavaInstallationDebounced, testJavaInstallation } =
-	useJavaTest()
-
-const hoveringTest = ref(false)
-let hasInitialized = false
-
-watch(
-	activePath,
-	(newPath) => {
-		if (newPath && optimalJava?.parsed_version) {
-			if (!hasInitialized) {
-				testJavaInstallation(newPath, optimalJava?.parsed_version, false)
-				hasInitialized = true
-			} else {
-				testJavaInstallationDebounced(newPath, optimalJava?.parsed_version)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
-const javaDetectionModal = ref<{ show: (version: number, current: object) => void } | null>(null)
-
-async function handleBrowseJava() {
-	const result = await open({ multiple: false })
-	if (result) {
-		javaPath.value = result
-	}
-}
-
-function handleDetectJava() {
-	javaDetectionModal.value?.show(optimalJava?.parsed_version, { path: javaPath.value })
-}
+const optimalJava = readonly(await get_optimal_jre_key(instance.value.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? instance.value.java_path })
 
 const overrideJavaArgs = ref((instance.value.extra_launch_args?.length ?? 0) > 0)
 const javaArgs = ref(
@@ -104,11 +48,11 @@ const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) a
 	snapPoints: number[]
 }
 
-const editInstanceObject = computed(() => {
+const editProfileObject = computed(() => {
 	return {
 		java_path:
-			overrideJavaInstall.value && javaPath.value
-				? javaPath.value.replace('java.exe', 'javaw.exe')
+			overrideJavaInstall.value && javaInstall.value.path !== ''
+				? javaInstall.value.path.replace('java.exe', 'javaw.exe')
 				: null,
 		extra_launch_args: overrideJavaArgs.value
 			? javaArgs.value.trim().split(/\s+/).filter(Boolean)
@@ -127,7 +71,7 @@ const editInstanceObject = computed(() => {
 watch(
 	[
 		overrideJavaInstall,
-		javaPath,
+		javaInstall,
 		overrideJavaArgs,
 		javaArgs,
 		overrideEnvVars,
@@ -136,7 +80,7 @@ watch(
 		memory,
 	],
 	async () => {
-		await edit(instance.value.id, editInstanceObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -146,45 +90,17 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.java.java-installation',
 		defaultMessage: 'Java installation',
 	},
-	customJavaInstallation: {
-		id: 'instance.settings.tabs.java.custom-java-installation',
-		defaultMessage: 'Custom Java installation',
-	},
-	javaPathPlaceholder: {
-		id: 'instance.settings.tabs.java.java-path-placeholder',
-		defaultMessage: '/path/to/java',
-	},
-	javaMemory: {
-		id: 'instance.settings.tabs.java.java-memory',
-		defaultMessage: 'Memory allocated',
-	},
-	customMemoryAllocation: {
-		id: 'instance.settings.tabs.java.custom-memory-allocation',
-		defaultMessage: 'Custom memory allocation',
-	},
 	javaArguments: {
 		id: 'instance.settings.tabs.java.java-arguments',
 		defaultMessage: 'Java arguments',
 	},
-	customJavaArguments: {
-		id: 'instance.settings.tabs.java.custom-java-arguments',
-		defaultMessage: 'Custom Java arguments',
-	},
-	enterJavaArguments: {
-		id: 'instance.settings.tabs.java.enter-java-arguments',
-		defaultMessage: 'Enter Java arguments...',
-	},
 	javaEnvironmentVariables: {
 		id: 'instance.settings.tabs.java.environment-variables',
 		defaultMessage: 'Environment variables',
 	},
-	customEnvironmentVariables: {
-		id: 'instance.settings.tabs.java.custom-environment-variables',
-		defaultMessage: 'Custom environment variables',
-	},
-	enterEnvironmentVariables: {
-		id: 'instance.settings.tabs.java.enter-environment-variables',
-		defaultMessage: 'Enter environmental variables...',
+	javaMemory: {
+		id: 'instance.settings.tabs.java.java-memory',
+		defaultMessage: 'Memory allocated',
 	},
 	hooks: {
 		id: 'instance.settings.tabs.java.hooks',
@@ -195,86 +111,43 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<JavaDetectionModal ref="javaDetectionModal" @submit="(val) => (javaPath = val.path)" />
-		<h2 class="m-0 mb-2 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="m-0 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaInstallation) }}
 		</h2>
-		<Checkbox
-			v-model="overrideJavaInstall"
-			:label="formatMessage(messages.customJavaInstallation)"
-			class="mb-2"
-		/>
-		<div class="flex gap-4 p-4 bg-bg rounded-2xl">
-			<div class="flex gap-3 items-start flex-1 min-w-0">
-				<div
-					class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 mt-1 shrink-0 [&_svg]:h-full [&_svg]:w-full"
-				>
-					<CoffeeIcon />
-				</div>
-				<div class="flex flex-col gap-2 flex-1 min-w-0">
-					<span class="font-semibold leading-none mt-2"
-						>Java {{ optimalJava?.parsed_version }}</span
+		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2.5" />
+		<template v-if="!overrideJavaInstall">
+			<div class="flex my-2 items-center gap-2 font-semibold">
+				<template v-if="javaInstall">
+					<CheckCircleIcon class="text-brand-green h-4 w-4" />
+					<span>Using default Java {{ optimalJava.major_version }} installation:</span>
+				</template>
+				<template v-else-if="optimalJava">
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not find a default Java {{ optimalJava.major_version }} installation. Please set
+						one below:</span
 					>
-					<div class="flex gap-2 items-center">
-						<StyledInput
-							:model-value="activePath"
-							:disabled="!overrideJavaInstall"
-							autocomplete="off"
-							:placeholder="formatMessage(messages.javaPathPlaceholder)"
-							wrapper-class="flex-1 min-w-0"
-							@update:model-value="(val) => (javaPath = String(val))"
-						/>
-						<ButtonStyled
-							:color="
-								!hoveringTest && !testingJava
-									? javaTestResult === true
-										? 'green'
-										: 'red'
-									: 'standard'
-							"
-							color-fill="text"
-						>
-							<button
-								:disabled="!overrideJavaInstall || testingJava"
-								@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
-								@mouseenter="overrideJavaInstall && (hoveringTest = true)"
-								@mouseleave="hoveringTest = false"
-							>
-								<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-								<CheckCircleIcon
-									v-else-if="javaTestResult === true && !hoveringTest"
-									class="h-4 w-4"
-								/>
-								<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-								<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-							</button>
-						</ButtonStyled>
-					</div>
-					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<ButtonStyled>
-							<button @click="handleDetectJava">
-								<SearchIcon />
-								Detect
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="handleBrowseJava">
-								<FolderSearchIcon />
-								Browse
-							</button>
-						</ButtonStyled>
-					</div>
-				</div>
+				</template>
+				<template v-else>
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not automatically determine a Java installation to use. Please set one
+						below:</span
+					>
+				</template>
 			</div>
-		</div>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			<div
+				v-if="javaInstall && !overrideJavaInstall"
+				class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
+			>
+				{{ javaInstall.path }}
+			</div>
+		</template>
+		<JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaMemory) }}
 		</h2>
-		<Checkbox
-			v-model="overrideMemorySettings"
-			:label="formatMessage(messages.customMemoryAllocation)"
-			class="mb-2"
-		/>
+		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2.5" />
 		<Slider
 			id="max-memory"
 			v-model="memory.maximum"
@@ -286,36 +159,28 @@ const messages = defineMessages({
 			:snap-range="512"
 			unit="MB"
 		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
-		<Checkbox
-			v-model="overrideJavaArgs"
-			:label="formatMessage(messages.customJavaArguments)"
-			class="my-2"
-		/>
+		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
 		<StyledInput
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
 			:disabled="!overrideJavaArgs"
-			:placeholder="formatMessage(messages.enterJavaArguments)"
+			placeholder="Enter java arguments..."
 			wrapper-class="w-full"
 		/>
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
-		<Checkbox
-			v-model="overrideEnvVars"
-			:label="formatMessage(messages.customEnvironmentVariables)"
-			class="mb-2"
-		/>
+		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2.5" />
 		<StyledInput
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
 			:disabled="!overrideEnvVars"
-			:placeholder="formatMessage(messages.enterEnvironmentVariables)"
+			placeholder="Enter environmental variables..."
 			wrapper-class="w-full"
 		/>
 	</div>

apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

@@ -9,7 +9,7 @@ import {
 } from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
-import { edit } from '@/helpers/instance'
+import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
 import { injectInstanceSettings } from '@/providers/instance-settings'
 
@@ -32,7 +32,7 @@ const fullscreenSetting: Ref<boolean> = ref(
 	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
 )
 
-const editInstanceObject = computed(() => {
+const editProfileObject = computed(() => {
 	if (!overrideWindowSettings.value) {
 		return {
 			force_fullscreen: null,
@@ -48,7 +48,7 @@ const editInstanceObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(instance.value.id, editInstanceObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue

@@ -14,7 +14,7 @@ import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleSevereError } from '@/store/error.js'
 
-import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'
+import { type MinecraftAuthError, minecraftAuthErrors } from './minecraft-auth-errors'
 
 const modal = ref<InstanceType<typeof NewModal>>()
 const rawError = ref<string>('')
@@ -26,7 +26,7 @@ const loadingSignIn = ref(false)
 function show(errorVal: { message?: string }) {
 	rawError.value = errorVal?.message ?? String(errorVal)
 
-	matchedError.value = findMinecraftAuthError(rawError.value)
+	matchedError.value = minecraftAuthErrors.find((e) => rawError.value.includes(e.errorCode)) ?? null
 
 	debugCollapsed.value = true
 	hide_ads_window()

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/minecraft-auth-errors.ts

@@ -1,93 +1,10 @@
 export interface MinecraftAuthError {
-	errorCode?: string
-	errorMatchers?: string[]
-	matches?: (message: string) => boolean
+	errorCode: string
 	whatHappened: string
 	stepsToFix: string[]
 }
 
 export const minecraftAuthErrors: MinecraftAuthError[] = [
-	{
-		errorMatchers: ['Failed to deserialize response to JSON during step RefreshOAuthToken:'],
-		whatHappened:
-			'Your saved Microsoft sign-in token has expired or was revoked, so Modrinth App cannot refresh your Minecraft session.',
-		stepsToFix: [
-			'Sign out of the affected Minecraft account in Modrinth App',
-			'Sign in to the account again',
-			'Once the new sign-in finishes, try launching Minecraft again',
-		],
-	},
-	{
-		errorMatchers: ['Failed to deserialize response to JSON during step SisuAuthenticate:'],
-		whatHappened:
-			'Xbox services rejected the first sign-in response. This is most often caused by your system clock or time zone being out of sync.',
-		stepsToFix: [
-			'Open your system date and time settings',
-			'Turn on automatic time zone and automatic time, if available',
-			'Use the sync option in your system settings to synchronize the clock',
-			'Restart Modrinth App',
-			'Try signing in again',
-		],
-	},
-	{
-		matches: (message) =>
-			message.includes('Failed to deserialize response to JSON during step MinecraftToken:') &&
-			message.includes('429 Too Many Requests'),
-		whatHappened:
-			'Microsoft or Minecraft temporarily blocked the sign-in request because there were too many recent attempts.',
-		stepsToFix: [
-			'Wait about an hour before trying again',
-			'Restart Modrinth App after waiting',
-			'Try signing in once more',
-			'If the same message appears, wait longer before retrying so the temporary limit can clear',
-		],
-	},
-	{
-		matches: (message) =>
-			message.includes('Failed to deserialize response to JSON during step MinecraftToken:') &&
-			/Status Code: 5\d\d/.test(message),
-		whatHappened:
-			"Minecraft's authentication service is returning a server error, so Modrinth App cannot finish signing you in right now.",
-		stepsToFix: [
-			'Wait a few minutes and try signing in again',
-			'Check <a href="https://support.xbox.com/xbox-live-status">Xbox Status</a> for current service issues',
-			'Try signing in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a> to confirm whether Minecraft sign-in is also affected there',
-			'If the service is healthy and this keeps happening, contact support with the debug information below',
-		],
-	},
-	{
-		errorMatchers: ['Failed to fetch player profile'],
-		whatHappened:
-			'Minecraft services could not return a Java Edition profile for this account. This most often happens when the game was purchased recently, the Java profile has not finished being created, or the wrong Microsoft account is being used.',
-		stepsToFix: [
-			'Sign in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>',
-			'Launch Minecraft: Java Edition once from the official launcher',
-			'Wait up to an hour if the purchase or profile setup was recent',
-			'Make sure you are using the Microsoft account that owns Minecraft. See <a href="https://support.modrinth.com/en/articles/9409136-finding-the-right-xbox-account">Finding the right Xbox account</a> for help',
-			'Try signing in to Modrinth App again',
-		],
-	},
-	{
-		matches: (message) =>
-			message.includes('error sending request for url (') &&
-			[
-				'minecraft.net',
-				'minecraftservices.com',
-				'mojang.com',
-				'xbox.com',
-				'xboxlive.com',
-				'live.com',
-			].some((domain) => message.includes(domain)),
-		whatHappened:
-			'Modrinth App could not connect to a Microsoft, Xbox, or Minecraft service needed for sign-in. This is usually caused by a local network, DNS, proxy, firewall, hosts file, VPN, or antivirus issue.',
-		stepsToFix: [
-			'Restart Modrinth App and try signing in again',
-			'Check that your internet connection is working',
-			'Allow Modrinth App through your firewall, antivirus, proxy, VPN, and hosts file rules',
-			'Try a different network or temporarily disable VPN/proxy software if you use one',
-			'If routing or DNS is the issue, a service like Cloudflare WARP can sometimes help',
-		],
-	},
 	{
 		errorCode: '2148916222',
 		whatHappened:
@@ -170,31 +87,4 @@ export const minecraftAuthErrors: MinecraftAuthError[] = [
 			'Once finished, try signing in again',
 		],
 	},
-	{
-		errorMatchers: ['Failed to deserialize response to JSON during step XstsAuthorize:'],
-		whatHappened:
-			'Xbox services rejected the request to authorize this account for Minecraft services, but did not return a specific account restriction that Modrinth App recognizes.',
-		stepsToFix: [
-			'Sign in with the <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>',
-			'Complete any prompts shown by Microsoft, Xbox, or Minecraft',
-			'Try signing in to Modrinth App again',
-			'If the official launcher also fails, follow the error shown there or contact Xbox Support',
-		],
-	},
 ]
-
-export function findMinecraftAuthError(message: string): MinecraftAuthError | null {
-	return (
-		minecraftAuthErrors.find((error) => {
-			if (error.errorCode && message.includes(error.errorCode)) {
-				return true
-			}
-
-			if (error.errorMatchers?.some((matcher) => message.includes(matcher))) {
-				return true
-			}
-
-			return error.matches?.(message) ?? false
-		}) ?? null
-	)
-}

apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue

@@ -1,144 +0,0 @@
-<template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
-		<div class="grid grid-cols-[1fr_auto] gap-2.5 h-[154px] px-7 pt-4 pb-1 pr-9">
-			<div class="flex flex-col gap-2.5 items-start justify-center h-min mt-5">
-				<div class="font-semibold text-xl text-contrast">
-					{{ formatMessage(messages.descriptionHeader) }}
-				</div>
-				<div class="text-secondary leading-6">
-					{{ formatMessage(messages.description) }}
-				</div>
-			</div>
-			<div class="relative h-full w-[96px] overflow-hidden mx-3">
-				<div class="absolute top-0 left-0 z-0 w-full flex grow-0 flex-col items-end p-0">
-					<img :src="steveImage" alt="" class="self-stretch" />
-				</div>
-				<div
-					class="absolute left-0 bottom-0 z-10 order-1 h-6 w-[120px] shrink-0 grow-0 bg-[linear-gradient(180deg,rgba(39,41,46,0)_0%,#27292E_80%,#27292E_100%)]"
-				></div>
-			</div>
-		</div>
-
-		<div class="flex flex-col gap-6 px-6 pb-6">
-			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<a class="w-full !shadow-none" href="https://support.modrinth.com" @click="modal?.hide()">
-						<MessagesSquareIcon />
-						{{ formatMessage(messages.getSupport) }}
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button class="w-full !shadow-none" :disabled="loadingSignIn" @click="signIn">
-						<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
-						<svg
-							v-else
-							width="20"
-							height="20"
-							viewBox="0 0 20 20"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect
-								x="10.75"
-								y="10.75"
-								width="9.25"
-								height="9.25"
-								fill="black"
-								fill-opacity="0.9"
-							/>
-						</svg>
-						{{ formatMessage(messages.signIn) }}
-					</button>
-				</ButtonStyled>
-			</div>
-			<p class="m-0 text-center text-sm text-secondary">
-				{{ formatMessage(messages.dontHaveAccount) }}
-				<a
-					class="text-blue font-medium hover:underline"
-					href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
-				>
-					{{ formatMessage(messages.getMinecraft) }}
-				</a>
-			</p>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
-import { inject, type Ref, ref } from 'vue'
-
-import steveImage from '@/assets/steve-look-up-left.webp'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { login as loginFlow, set_default_user } from '@/helpers/auth.js'
-import { handleSevereError } from '@/store/error.js'
-
-const { formatMessage } = useVIntl()
-const accountsCard = inject('accountsCard') as Ref<InstanceType<typeof AccountsCard> | null>
-
-const messages = defineMessages({
-	header: {
-		id: 'minecraft-required.header',
-		defaultMessage: 'Minecraft required',
-	},
-	descriptionHeader: {
-		id: 'minecraft-required.description-header',
-		defaultMessage: 'Sign in to a Microsoft account',
-	},
-	description: {
-		id: 'minecraft-required.description',
-		defaultMessage:
-			'You need a Microsoft account that owns Minecraft before you can launch and play.',
-	},
-	getSupport: {
-		id: 'minecraft-required.get-support',
-		defaultMessage: 'Get support',
-	},
-	signIn: {
-		id: 'minecraft-required.sign-in',
-		defaultMessage: 'Sign in to Microsoft',
-	},
-	dontHaveAccount: {
-		id: 'minecraft-required.dont-have-account',
-		defaultMessage: 'Don’t have an account?',
-	},
-	getMinecraft: {
-		id: 'minecraft-required.get-minecraft',
-		defaultMessage: 'Get Minecraft',
-	},
-})
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const loadingSignIn = ref(false)
-
-function show() {
-	modal.value?.show()
-}
-
-async function signIn() {
-	loadingSignIn.value = true
-
-	try {
-		const loggedIn = await loginFlow()
-		if (!loggedIn) return
-
-		await set_default_user(loggedIn.profile.id)
-		await accountsCard.value?.refreshValues()
-		await trackEvent('AccountLogIn', { source: 'MinecraftRequiredModal' })
-		modal.value?.hide()
-	} catch (error) {
-		handleSevereError(error)
-	} finally {
-		loadingSignIn.value = false
-	}
-}
-
-defineExpose({
-	show,
-})
-</script>

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -1,22 +1,15 @@
 <template>
-	<NewModal
-		ref="modal"
-		:header="formatMessage(messages.installToPlay)"
-		:closable="true"
-		:on-hide="show_ads_window"
-		max-width="640px"
-		width="640px"
-	>
-		<div v-if="requiredContentProject" class="flex w-full flex-col gap-6">
-			<p class="m-0 text-primary">
-				{{ formatMessage(messages.inviteWarning) }}
-			</p>
+	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
+		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
+				{{ formatMessage(messages.serverRequiresMods) }}
+			</Admonition>
 
-			<div class="flex flex-col gap-2.5">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast">
-						{{ formatMessage(messages.sharedInstance) }}
-					</span>
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-center">
+					<span class="font-semibold text-contrast">{{
+						formatMessage(messages.requiredModpack)
+					}}</span>
 
 					<ButtonStyled type="transparent">
 						<button @click="openViewContents">
@@ -26,16 +19,14 @@
 					</ButtonStyled>
 				</div>
 
-				<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
+				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
 					<Avatar
 						:src="requiredContentProject.icon_url"
 						:alt="requiredContentProject.title"
-						size="56px"
-						no-shadow
-						class="!rounded-2xl"
+						size="48px"
 					/>
-					<div class="flex min-w-0 flex-col gap-0.5">
-						<span class="truncate font-semibold text-contrast">
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">
 							<template v-if="usingCustomModpack && modpackVersion">
 								{{ modpackVersion.name }}
 							</template>
@@ -43,7 +34,7 @@
 								{{ requiredContentProject.title }}
 							</template>
 						</span>
-						<span class="truncate text-sm font-medium text-secondary">
+						<span class="text-sm text-secondary">
 							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
 							<template v-if="modCount">
 								· {{ formatMessage(messages.modCount, { count: modCount }) }}
@@ -52,105 +43,24 @@
 					</div>
 				</div>
 			</div>
+		</div>
 
-			<Admonition
-				v-if="hasExternalFiles"
-				type="warning"
-				:header="formatMessage(messages.unknownFilesWarning)"
-			>
-				{{ formatMessage(messages.unknownFilesDescription) }}
-			</Admonition>
-
-			<div v-if="hasExternalFiles" class="relative w-full">
-				<div
-					ref="externalFileTable"
-					class="max-h-[242px] overflow-y-auto rounded-2xl"
-					@scroll="checkTableScrollState"
-				>
-					<Table
-						:columns="externalFileColumns"
-						:data="externalFileRows"
-						row-key="id"
-						virtualized
-						:virtual-row-height="48"
-						class="shadow-sm"
-					>
-						<template #cell-name="{ value }">
-							<span class="block truncate" :title="String(value)">{{ value }}</span>
-						</template>
-					</Table>
-				</div>
-				<Transition
-					enter-active-class="transition-all duration-200 ease-out"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-2"
-					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-2"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<div
-						v-if="showTableTopFade"
-						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-2 bg-gradient-to-b from-bg-raised to-transparent"
-					/>
-				</Transition>
-				<Transition
-					enter-active-class="transition-all duration-200 ease-out"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-2"
-					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-2"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<div
-						v-if="showTableBottomFade"
-						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-2 bg-gradient-to-t from-bg-raised to-transparent"
-					/>
-				</Transition>
-			</div>
-
-			<p v-if="hasExternalFiles" class="m-0 text-primary">
-				{{ formatMessage(messages.reviewedFiles) }}
-			</p>
-
-			<div class="flex w-full items-center justify-between gap-2">
-				<ButtonStyled type="transparent" color="red">
-					<button @click="handleReport">
-						<ReportIcon />
-						{{ formatMessage(commonMessages.reportButton) }}
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<DownloadIcon />
+						{{ formatMessage(messages.installButton) }}
 					</button>
 				</ButtonStyled>
-
-				<div class="flex items-center gap-2">
-					<template v-if="hasExternalFiles">
-						<ButtonStyled type="transparent" color="orange">
-							<button @click="handleAccept">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleDecline">
-								<BanIcon />
-								{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
-					</template>
-					<template v-else>
-						<ButtonStyled>
-							<button @click="handleDecline">
-								<XIcon />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleAccept">
-								<DownloadIcon />
-								{{ formatMessage(messages.installButton) }}
-							</button>
-						</ButtonStyled>
-					</template>
-				</div>
 			</div>
-		</div>
+		</template>
 	</NewModal>
 
 	<ModpackContentModal
@@ -162,56 +72,33 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { BanIcon, DownloadIcon, EyeIcon, ReportIcon, XIcon } from '@modrinth/assets'
+import { DownloadIcon, EyeIcon, XIcon } from '@modrinth/assets'
+import type { ContentItem } from '@modrinth/ui'
 import {
 	Admonition,
 	Avatar,
 	ButtonStyled,
 	commonMessages,
-	type ContentItem,
 	defineMessages,
 	formatLoader,
 	ModpackContentModal,
 	NewModal,
-	Table,
-	type TableColumn,
-	useScrollIndicator,
 	useVIntl,
 } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { injectServerInstall } from '@/providers/server-install'
 
-type ExternalFileColumn = 'name'
-type ExternalFileRow = {
-	id: string
-	name: string
-}
-
 const modal = ref<InstanceType<typeof NewModal>>()
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 const project = ref<Labrinth.Projects.v3.Project | null>(null)
 const requiredContentProject = ref<Labrinth.Projects.v2.Project | null>(null)
-const externalFiles = ref<string[]>([])
-const externalFileTable = ref<HTMLElement | null>(null)
 const onInstallComplete = ref<() => void>(() => {})
 const { formatMessage } = useVIntl()
-
-const props = defineProps<{
-	showExternalWarnings?: boolean
-}>()
-
 const { installServerProject, startInstallingServer, stopInstallingServer } = injectServerInstall()
-const {
-	showTopFade: showTableTopFade,
-	showBottomFade: showTableBottomFade,
-	checkScrollState: checkTableScrollState,
-	forceCheck: forceCheckTableScroll,
-} = useScrollIndicator(externalFileTable)
 
 const usingCustomModpack = computed(() => {
 	return requiredContentProject.value?.id === project.value?.id
@@ -224,36 +111,13 @@ const loaderDisplay = computed(() => {
 })
 
 const modCount = computed(() => modpackVersion.value?.dependencies?.length)
-const hasExternalFiles = computed(
-	() => Boolean(props.showExternalWarnings) && externalFiles.value.length > 0,
-)
-const externalFileRows = computed<ExternalFileRow[]>(() =>
-	externalFiles.value.map((name, index) => ({
-		id: `${index}-${name}`,
-		name,
-	})),
-)
 
 async function fetchData(versionId: string) {
 	// cache is making version null for some reason so bypassing for now
-	const version = await get_version(versionId, 'bypass')
-	modpackVersion.value = version
+	modpackVersion.value = await get_version(versionId, 'bypass')
 
-	if (version?.project_id) {
-		requiredContentProject.value = await get_project(version.project_id, 'bypass')
-		externalFiles.value = [
-			...new Set(
-				(version.dependencies ?? [])
-					.filter(
-						(dependency) =>
-							dependency.dependency_type === 'embedded' &&
-							!dependency.project_id &&
-							!dependency.version_id &&
-							dependency.file_name,
-					)
-					.flatMap((dependency) => (dependency.file_name ? [dependency.file_name] : [])),
-			),
-		].sort((left, right) => left.localeCompare(right))
+	if (modpackVersion.value?.project_id) {
+		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
 	}
 }
 
@@ -275,12 +139,6 @@ function handleDecline() {
 	hide()
 }
 
-function handleReport() {
-	if (project.value?.id) {
-		openUrl(`https://modrinth.com/report?item=project&itemID=${project.value.id}`)
-	}
-}
-
 const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
 
 async function openViewContents() {
@@ -359,19 +217,17 @@ async function show(
 	modpackVersionId.value = modpackVersionIdVal
 	modpackVersion.value = null
 	requiredContentProject.value = null
-	externalFiles.value = []
 	onInstallComplete.value = callback
 
 	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
 
 	hide_ads_window()
 	modal.value?.show(e)
-	await nextTick()
-	forceCheckTableScroll()
 }
 
 function hide() {
 	modal.value?.hide()
+	show_ads_window()
 }
 
 const messages = defineMessages({
@@ -379,10 +235,22 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.header',
 		defaultMessage: 'Install to play',
 	},
-	inviteWarning: {
-		id: 'app.modal.install-to-play.invite-warning',
+	sharedServerInstance: {
+		id: 'app.modal.install-to-play.shared-server-instance',
+		defaultMessage: 'Shared server instance',
+	},
+	contentRequired: {
+		id: 'app.modal.install-to-play.content-required',
+		defaultMessage: 'Content required',
+	},
+	serverRequiresMods: {
+		id: 'app.modal.install-to-play.server-requires-mods',
 		defaultMessage:
-			'This invite was created by another Modrinth user, not Modrinth. Only accept invites from people you trust.',
+			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',
+	},
+	requiredModpack: {
+		id: 'app.modal.install-to-play.required-modpack',
+		defaultMessage: 'Required modpack',
 	},
 	sharedInstance: {
 		id: 'app.modal.install-to-play.shared-instance',
@@ -400,41 +268,7 @@ const messages = defineMessages({
 		id: 'app.modal.install-to-play.view-contents',
 		defaultMessage: 'View contents',
 	},
-	unknownFilesWarning: {
-		id: 'app.modal.install-to-play.unknown-files-warning',
-		defaultMessage: 'Unknown files warning',
-	},
-	unknownFilesDescription: {
-		id: 'app.modal.install-to-play.unknown-files-description',
-		defaultMessage:
-			'This server modpack contains files that aren’t published on Modrinth. We strongly recommend only installing files from sources you trust.',
-	},
-	unrecognizedFiles: {
-		id: 'app.modal.install-to-play.unrecognized-files',
-		defaultMessage: 'Unrecognized files',
-	},
-	reviewedFiles: {
-		id: 'app.modal.install-to-play.reviewed-files',
-		defaultMessage:
-			'A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack).',
-	},
-	installAnyway: {
-		id: 'app.modal.install-to-play.install-anyway',
-		defaultMessage: 'Install anyway',
-	},
-	dontInstall: {
-		id: 'app.modal.install-to-play.dont-install',
-		defaultMessage: 'Dont install',
-	},
 })
 
-const externalFileColumns = computed<TableColumn<ExternalFileColumn>[]>(() => [
-	{
-		key: 'name',
-		label: formatMessage(messages.unrecognizedFiles),
-		cellClass: '!h-12',
-	},
-])
-
 defineExpose({ show, hide })
 </script>

apps/app-frontend/src/components/ui/modal/InstanceModalTitlePrefix.vue

@@ -14,7 +14,7 @@ defineProps<{
 		<Avatar
 			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
 			size="24px"
-			:tint-by="instance.id"
+			:tint-by="instance.path"
 		/>
 		{{ instance.name }} <ChevronRightIcon />
 	</span>

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -16,8 +16,7 @@ import {
 	type TabbedModalTab,
 	useVIntl,
 } from '@modrinth/ui'
-import type { PlatformTag } from '@modrinth/utils'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
@@ -27,15 +26,12 @@ import InstallationSettings from '@/components/ui/instance_settings/Installation
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
-import { get_linked_modpack_info } from '@/helpers/instance'
-import { get_loader_versions } from '@/helpers/metadata'
-import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { get_linked_modpack_info } from '@/helpers/profile'
 import { provideInstanceSettings } from '@/providers/instance-settings'
 
 import type { GameInstance } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
-const queryClient = useQueryClient()
 
 const props = defineProps<{
 	instance: GameInstance
@@ -49,26 +45,20 @@ const isMinecraftServer = ref(false)
 const handleUnlinked = () => emit('unlinked')
 
 const instanceRef = computed(() => props.instance)
-const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
-
-function hide() {
-	tabbedModal.value?.hide()
-}
 
 provideInstanceSettings({
 	instance: instanceRef,
 	offline: props.offline,
 	isMinecraftServer,
 	onUnlinked: handleUnlinked,
-	closeModal: hide,
 })
 
 watch(
 	() => props.instance,
 	(instance) => {
 		isMinecraftServer.value = false
-		if (instance.link?.project_id) {
-			get_project_v3(instance.link.project_id, 'must_revalidate')
+		if (instance.linked_data?.project_id) {
+			get_project_v3(instance.linked_data.project_id, 'must_revalidate')
 				.then((project: Labrinth.Projects.v3.Project | undefined) => {
 					if (project?.minecraft_server != null) {
 						isMinecraftServer.value = true
@@ -123,50 +113,14 @@ const tabs = computed<TabbedModalTab[]>(() => [
 	},
 ])
 
-function getSupportedModpackLoaders() {
-	return get_loaders().then((value: PlatformTag[]) =>
-		value
-			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
-			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-	)
-}
-
-// Preload
-useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
-	queryFn: () => get_loader_versions('fabric'),
-})
-useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'forge'],
-	queryFn: () => get_loader_versions('forge'),
-})
-useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
-	queryFn: () => get_loader_versions('quilt'),
-})
-useQuery({
-	queryKey: ['instance-settings', 'loader-versions', 'neo'],
-	queryFn: () => get_loader_versions('neo'),
-})
-useQuery({
-	queryKey: ['instance-settings', 'game-versions'],
-	queryFn: get_game_versions,
-})
-useQuery({
-	queryKey: ['instance-settings', 'loaders', 'modpack'],
-	queryFn: getSupportedModpackLoaders,
-})
-useQuery({
-	queryKey: computed(() => ['linkedModpackInfo', props.instance.id]),
-	queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
-	enabled: computed(() => !!props.instance.link?.project_id && !props.offline),
-})
+const queryClient = useQueryClient()
+const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function show(tabIndex?: number) {
-	if (props.instance.link?.project_id) {
+	if (props.instance.linked_data?.project_id) {
 		queryClient.prefetchQuery({
-			queryKey: ['linkedModpackInfo', props.instance.id],
-			queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
+			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
 		})
 	}
 	tabbedModal.value?.show()
@@ -175,7 +129,7 @@ function show(tabIndex?: number) {
 	}
 }
 
-defineExpose({ show, hide })
+defineExpose({ show })
 </script>
 <template>
 	<TabbedModal
@@ -189,7 +143,7 @@ defineExpose({ show, hide })
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
 					size="24px"
-					:tint-by="props.instance.id"
+					:tint-by="props.instance.path"
 				/>
 				{{ instance.name }} <ChevronRightIcon />
 				<span class="font-extrabold text-contrast">{{

apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue

@@ -68,17 +68,17 @@ const messages = defineMessages({
 })
 
 const emit = defineEmits<{
-	(e: 'go-to-instance', instanceId: string): void
+	(e: 'go-to-instance', instancePath: string): void
 	(e: 'create-anyway'): void
 }>()
 
 const modal = ref<InstanceType<typeof NewModal>>()
 const instanceName = ref('')
-const instanceId = ref('')
+const instancePath = ref('')
 
-function show(name: string, id: string) {
+function show(name: string, path: string) {
 	instanceName.value = name
-	instanceId.value = id
+	instancePath.value = path
 	modal.value?.show()
 }
 
@@ -88,7 +88,7 @@ function handleCancel() {
 
 function handleGoToInstance() {
 	modal.value?.hide()
-	emit('go-to-instance', instanceId.value)
+	emit('go-to-instance', instancePath.value)
 }
 
 function handleCreateAnyway() {

apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

@@ -2,17 +2,17 @@
 	<ContentDiffModal
 		ref="diffModal"
 		:header="formatMessage(messages.updateToPlay)"
+		:admonition-header="formatMessage(messages.updateRequired)"
 		:description="
 			instance ? formatMessage(messages.updateRequiredDescription, { name: instance.name }) : ''
 		"
 		:diffs="normalizedDiffs"
-		:version-date="versionDate"
-		:show-external-warnings="showExternalWarnings"
 		:confirm-label="formatMessage(commonMessages.updateButton)"
 		:confirm-icon="DownloadIcon"
-		:removed-label="formatMessage(messages.removed)"
+		:show-report-button="true"
 		@confirm="handleUpdate"
 		@cancel="handleDecline"
+		@report="handleReport"
 	/>
 </template>
 
@@ -26,12 +26,12 @@ import {
 	defineMessages,
 	useVIntl,
 } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
-import { wait_for_install_job } from '@/helpers/install'
-import { update_managed_modrinth_version } from '@/helpers/instance'
+import { update_managed_modrinth_version } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
 import { injectServerInstall } from '@/providers/server-install'
 
@@ -76,10 +76,6 @@ const { formatMessage } = useVIntl()
 const { startInstallingServer, stopInstallingServer } = injectServerInstall()
 type UpdateCompleteCallback = () => void | Promise<void>
 
-defineProps<{
-	showExternalWarnings?: boolean
-}>()
-
 const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
 const instance = ref<GameInstance | null>(null)
 const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
@@ -90,7 +86,6 @@ const modpackVersion = ref<Version | null>(null)
 const normalizedDiffs = computed<ContentDiffItem[]>(() =>
 	diffs.value.map((diff) => ({
 		type: diff.type,
-		external: Boolean(diff.fileName && !diff.project),
 		projectName: diff.project?.title,
 		fileName: diff.fileName,
 		currentVersionName: diff.currentVersion?.version_number,
@@ -98,12 +93,6 @@ const normalizedDiffs = computed<ContentDiffItem[]>(() =>
 	})),
 )
 
-const versionDate = computed(() =>
-	modpackVersion.value?.date_published
-		? dayjs(modpackVersion.value.date_published).format('MMMM D, YYYY')
-		: undefined,
-)
-
 async function computeDependencyDiffs(
 	currentDeps: Dependency[],
 	latestDeps: Dependency[],
@@ -200,10 +189,6 @@ async function computeDependencyDiffs(
 			}
 		})
 		.sort((a, b) => {
-			const aExternal = Boolean(a.fileName && !a.project)
-			const bExternal = Boolean(b.fileName && !b.project)
-			if (aExternal !== bExternal) return aExternal ? -1 : 1
-
 			const typeOrder = { added: 0, updated: 1, removed: 2 }
 			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
 			if (typeCompare !== 0) return typeCompare
@@ -217,15 +202,15 @@ async function computeDependencyDiffs(
 }
 
 async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[] | null> {
-	if (!inst.link) return null
-	if (!modpackVersionId.value || !inst.link.version_id) return null
+	if (!inst.linked_data) return null
+	if (!modpackVersionId.value || !inst.linked_data.version_id) return null
 
 	try {
-		// For server projects, link.project_id is the server project but
-		// link.version_id references a content modpack version from a different project.
-		// Detect this by comparing the version's project_id with link.project_id.
+		// For server projects, linked_data.project_id is the server project but
+		// linked_data.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with linked_data.project_id.
 		modpackVersion.value = await get_version(modpackVersionId.value, 'bypass')
-		const instanceModpackVersion = await get_version(inst.link.version_id, 'bypass')
+		const instanceModpackVersion = await get_version(inst.linked_data.version_id, 'bypass')
 
 		// Compute dependency diffs between current and latest version
 		if (instanceModpackVersion && modpackVersion.value) {
@@ -241,14 +226,23 @@ async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[
 	return null
 }
 
+watch(
+	() => instance.value,
+	async (newInstance) => {
+		if (!newInstance) return
+		const result = await checkUpdateAvailable(newInstance)
+		diffs.value = result || []
+	},
+	{ immediate: true, deep: true },
+)
+
 async function handleUpdate() {
 	hide()
-	const serverProjectId = instance.value?.link?.project_id
+	const serverProjectId = instance.value?.linked_data?.project_id
 	if (serverProjectId) startInstallingServer(serverProjectId)
 	try {
 		if (modpackVersionId.value && instance.value) {
-			const job = await update_managed_modrinth_version(instance.value.id, modpackVersionId.value)
-			await wait_for_install_job(job.job_id)
+			await update_managed_modrinth_version(instance.value.path, modpackVersionId.value)
 			await onUpdateComplete.value()
 		}
 	} catch (error) {
@@ -258,6 +252,14 @@ async function handleUpdate() {
 	}
 }
 
+function handleReport() {
+	if (instance.value?.linked_data?.project_id) {
+		openUrl(
+			`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`,
+		)
+	}
+}
+
 function handleDecline() {
 	hide()
 }
@@ -270,15 +272,8 @@ function show(
 ) {
 	instance.value = instanceVal
 	modpackVersionId.value = modpackVersionIdVal
-	modpackVersion.value = null
-	diffs.value = []
 	onUpdateComplete.value = callback
 	diffModal.value?.show(e)
-	void checkUpdateAvailable(instanceVal).then((result) => {
-		if (instance.value?.id === instanceVal.id && modpackVersionId.value === modpackVersionIdVal) {
-			diffs.value = result || []
-		}
-	})
 }
 
 function hide() {
@@ -290,20 +285,23 @@ const messages = defineMessages({
 		id: 'app.modal.update-to-play.header',
 		defaultMessage: 'Update to play',
 	},
+	updateRequired: {
+		id: 'app.modal.update-to-play.update-required',
+		defaultMessage: 'Update required',
+	},
 	updateRequiredDescription: {
 		id: 'app.modal.update-to-play.update-required-description',
 		defaultMessage:
 			'An update is required to play {name}. Please update to the latest version to launch the game.',
 	},
-	removed: {
-		id: 'app.modal.update-to-play.removed',
-		defaultMessage: 'Removed',
-	},
 })
 
 const hasUpdate = computed(() => {
-	if (!instance.value?.link) return false
-	return modpackVersionId.value != null && modpackVersionId.value !== instance.value.link.version_id
+	if (!instance.value?.linked_data) return false
+	return (
+		modpackVersionId.value != null &&
+		modpackVersionId.value !== instance.value.linked_data.version_id
+	)
 })
 
 defineExpose({ show, hide, hasUpdate })

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -10,10 +10,8 @@ import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
 
-const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
-const skipNonEssentialWarningsFlag: FeatureFlag = 'skip_non_essential_warnings'
-const skipUnknownPackWarningFlag: FeatureFlag = 'skip_unknown_pack_warning'
-const showPlayTimeFlag: FeatureFlag = 'show_instance_play_time'
+const worldsInHomeFeatureFlag = 'worlds_in_home' as FeatureFlag
+const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
 
 const messages = defineMessages({
 	colorThemeTitle: {
@@ -102,23 +100,6 @@ const messages = defineMessages({
 		defaultMessage:
 			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
 	},
-	skipNonEssentialWarningsTitle: {
-		id: 'app.appearance-settings.skip-non-essential-warnings.title',
-		defaultMessage: 'Skip non-essential warnings',
-	},
-	skipNonEssentialWarningsDescription: {
-		id: 'app.appearance-settings.skip-non-essential-warnings.description',
-		defaultMessage:
-			'Automatically skips low-risk confirmations like duplicate modpack installs, normal content deletion, bulk updates, unlinking modpacks, and repair prompts. Dangerous warnings will still be shown.',
-	},
-	showPlayTimeTitle: {
-		id: 'app.appearance-settings.show-play-time.title',
-		defaultMessage: 'Show play time',
-	},
-	showPlayTimeDescription: {
-		id: 'app.appearance-settings.show-play-time.description',
-		defaultMessage: `Displays how much time you've spent playing an instance.`,
-	},
 })
 
 const os = ref(await getOS())
@@ -172,6 +153,16 @@ watch(
 		/>
 	</div>
 
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.hideNametagTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
+		</div>
+		<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
+	</div>
+
 	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">
@@ -192,44 +183,6 @@ watch(
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>
 
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.showPlayTimeTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.showPlayTimeDescription) }}</p>
-		</div>
-		<Toggle
-			:model-value="themeStore.getFeatureFlag(showPlayTimeFlag)"
-			@update:model-value="
-				() => {
-					const newValue = !themeStore.getFeatureFlag(showPlayTimeFlag)
-					themeStore.featureFlags[showPlayTimeFlag] = newValue
-					settings.feature_flags[showPlayTimeFlag] = newValue
-				}
-			"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.hideNametagTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
-		</div>
-		<Toggle
-			id="hide-nametag-skins-page"
-			:model-value="themeStore.hideNametagSkinsPage"
-			@update:model-value="
-				(e) => {
-					themeStore.hideNametagSkinsPage = !!e
-					settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
-				}
-			"
-		/>
-	</div>
-
 	<div class="mt-6 flex items-center justify-between">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">
@@ -264,12 +217,12 @@ watch(
 			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag(worldsInHomeFlag)"
+			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag(worldsInHomeFlag)
-					themeStore.featureFlags[worldsInHomeFlag] = newValue
-					settings.feature_flags[worldsInHomeFlag] = newValue
+					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
+					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
+					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
 				}
 			"
 		/>
@@ -283,32 +236,13 @@ watch(
 			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFlag)"
+			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)"
 			@update:model-value="
 				(e) => {
 					const warnBeforeUnknownPackInstall = !!e
 					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
-					themeStore.featureFlags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
-					settings.feature_flags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
-				}
-			"
-		/>
-	</div>
-
-	<div class="mt-6 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.skipNonEssentialWarningsTitle) }}
-			</h2>
-			<p class="m-0 mt-1">{{ formatMessage(messages.skipNonEssentialWarningsDescription) }}</p>
-		</div>
-		<Toggle
-			:model-value="themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)"
-			@update:model-value="
-				() => {
-					const newValue = !themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)
-					themeStore.featureFlags[skipNonEssentialWarningsFlag] = newValue
-					settings.feature_flags[skipNonEssentialWarningsFlag] = newValue
+					themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
+					settings.feature_flags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
 				}
 			"
 		/>

apps/app-frontend/src/components/ui/settings/PrivacySettings.vue

@@ -1,44 +1,12 @@
 <script setup lang="ts">
-import { Settings2Icon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	injectPageContext,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
+import { Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
-import { open_ads_consent_preferences } from '@/helpers/ads.js'
 import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
 import { get, set } from '@/helpers/settings.ts'
 
-const { formatMessage } = useVIntl()
-const { handleError } = injectNotificationManager()
-const { adConsentAvailable } = injectPageContext()
 const settings = ref(await get())
 
-const messages = defineMessages({
-	adsConsentTitle: {
-		id: 'app.ads-consent.title',
-		defaultMessage: 'Your privacy and how ads support Modrinth',
-	},
-	adsConsentIntro: {
-		id: 'app.settings.privacy.ads-consent.intro',
-		defaultMessage:
-			'Ads make Modrinth possible and fund creator payouts. Our partners may store or access cookies in the app to personalize ads and measure performance. You can opt out or manage your preferences below.',
-	},
-	adsConsentManage: {
-		id: 'app.ads-consent.manage',
-		defaultMessage: 'Manage preferences',
-	},
-})
-
-async function manageAdsPreferences() {
-	await open_ads_consent_preferences().catch(handleError)
-}
-
 watch(
 	settings,
 	async () => {
@@ -55,26 +23,18 @@ watch(
 </script>
 
 <template>
-	<div v-if="adConsentAvailable">
-		<h2 class="m-0 text-lg font-semibold text-contrast">
-			{{ formatMessage(messages.adsConsentTitle) }}
-		</h2>
-		<div class="mt-1 flex flex-col gap-2.5 items-start">
-			<div class="flex flex-col gap-1 items-start">
-				<div class="text-sm">
-					{{ formatMessage(messages.adsConsentIntro) }}
-				</div>
-			</div>
-			<ButtonStyled>
-				<button class="!shadow-none" @click="manageAdsPreferences">
-					<Settings2Icon aria-hidden="true" />
-					{{ formatMessage(messages.adsConsentManage) }}
-				</button>
-			</ButtonStyled>
+	<div class="flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">Personalized ads</h2>
+			<p class="m-0 mt-1 text-sm">
+				Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
+				option, you opt out and ads will no longer be shown based on your interests.
+			</p>
 		</div>
+		<Toggle id="personalized-ads" v-model="settings.personalized_ads" />
 	</div>
 
-	<div class="mt-8 flex items-center justify-between gap-4">
+	<div class="mt-4 flex items-center justify-between gap-4">
 		<div>
 			<h2 class="m-0 text-lg font-semibold text-contrast">Telemetry</h2>
 			<p class="m-0 mt-1 text-sm">

apps/app-frontend/src/components/ui/settings/ResourceManagementSettings.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { BoxIcon, FolderOpenIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
+import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
@@ -7,13 +7,9 @@ import { ref, watch } from 'vue'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import { purge_cache_types } from '@/helpers/cache.js'
 import { get, set } from '@/helpers/settings.ts'
-import { showAppDbBackupsFolder } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state'
 
 const { handleError } = injectNotificationManager()
-const themeStore = useTheming()
 const settings = ref(await get())
-const purgeCacheConfirmModal = ref(null)
 
 watch(
 	settings,
@@ -52,19 +48,6 @@ async function purgeCache() {
 	]).catch(handleError)
 }
 
-function handlePurgeCacheClick() {
-	if (themeStore.getFeatureFlag('skip_non_essential_warnings')) {
-		void purgeCache()
-		return
-	}
-
-	purgeCacheConfirmModal.value?.show()
-}
-
-async function openDbBackupsFolder() {
-	await showAppDbBackupsFolder().catch(handleError)
-}
-
 async function findLauncherDir() {
 	const newDir = await open({
 		multiple: false,
@@ -114,7 +97,7 @@ async function findLauncherDir() {
 				@proceed="purgeCache"
 			/>
 			<h2 class="m-0 text-lg font-semibold text-contrast">App cache</h2>
-			<button id="purge-cache" class="btn min-w-max" @click="handlePurgeCacheClick">
+			<button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
 				<TrashIcon />
 				Purge cache
 			</button>
@@ -153,16 +136,5 @@ async function findLauncherDir() {
 				value if you are frequently getting I/O errors. (app restart required to take effect)
 			</p>
 		</div>
-
-		<div class="flex flex-col gap-2.5">
-			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">App database backups</h2>
-			<button id="open-db-backups-folder" class="btn min-w-max" @click="openDbBackupsFolder">
-				<FolderOpenIcon />
-				Open backups folder
-			</button>
-			<p class="m-0 leading-tight text-secondary">
-				Backups of important app data are stored here in case you need to recover them later.
-			</p>
-		</div>
 	</div>
 </template>

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -1,242 +1,149 @@
 <template>
-	<NewModal ref="modal" :on-hide="handleModalHide">
+	<UploadSkinModal ref="uploadModal" />
+	<ModalWrapper ref="modal" @on-hide="resetState">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
-				{{ formatMessage(mode === 'edit' ? messages.editSkinTitle : messages.addSkinTitle) }}
+				{{ mode === 'edit' ? 'Editing skin' : 'Adding a skin' }}
 			</span>
 		</template>
 
 		<div class="flex flex-col md:flex-row gap-6">
-			<div class="h-[25rem] w-[16rem] min-w-[16rem] flex-shrink-0 md:self-center">
-				<SkinPreviewRenderer
-					:variant="variant"
-					:texture-src="previewSkin || ''"
-					:ears-texture-src="uploadedTextureUrl?.original ?? currentSkin?.texture"
-					:cape-src="selectedCapeTexture"
-					framing="modal"
-					:initial-rotation="Math.PI / 8"
-					class="h-full w-full"
-				/>
+			<div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+				<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+					<SkinPreviewRenderer
+						:variant="variant"
+						:texture-src="previewSkin || ''"
+						:cape-src="selectedCapeTexture"
+						:scale="1.4"
+						:fov="50"
+						:initial-rotation="Math.PI / 8"
+						class="h-full w-full"
+					/>
+				</div>
 			</div>
 
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
-				<section v-if="mode === 'edit' && canEditTextureAndModel">
-					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.textureSection) }}</h2>
+				<section>
+					<h2 class="text-base font-semibold mb-2">Texture</h2>
 					<ButtonStyled>
-						<button class="!shadow-none" @click="openTextureFileBrowser">
-							<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
-						</button>
+						<button @click="openUploadSkinModal"><UploadIcon /> Replace texture</button>
 					</ButtonStyled>
-					<input
-						ref="textureFileInput"
-						type="file"
-						accept="image/png"
-						class="hidden"
-						@change="onTextureFileInputChange"
-					/>
 				</section>
 
-				<section v-if="canEditTextureAndModel">
-					<h2 class="text-base font-semibold mb-2">
-						{{ formatMessage(messages.armStyleSection) }}
-					</h2>
+				<section>
+					<h2 class="text-base font-semibold mb-2">Arm style</h2>
 					<RadioButtons v-model="variant" :items="['CLASSIC', 'SLIM']">
 						<template #default="{ item }">
-							{{
-								formatMessage(item === 'CLASSIC' ? messages.wideArmStyle : messages.slimArmStyle)
-							}}
+							{{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
 						</template>
 					</RadioButtons>
 				</section>
 
 				<section>
-					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.capeSection) }}</h2>
-					<div class="relative w-fit max-w-full">
-						<Transition
-							enter-active-class="transition-all duration-200 ease-out"
-							enter-from-class="opacity-0 max-h-0"
-							enter-to-class="opacity-100 max-h-6"
-							leave-active-class="transition-all duration-200 ease-in"
-							leave-from-class="opacity-100 max-h-6"
-							leave-to-class="opacity-0 max-h-0"
+					<h2 class="text-base font-semibold mb-2">Cape</h2>
+					<div class="flex gap-2">
+						<CapeButton
+							v-if="defaultCape"
+							:id="defaultCape.id"
+							:texture="defaultCape.texture"
+							:name="undefined"
+							:selected="!selectedCape"
+							faded
+							@select="selectCape(undefined)"
 						>
-							<div
-								v-if="showCapeTopFade"
-								class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-6 bg-gradient-to-b from-bg-raised to-transparent"
-							/>
-						</Transition>
+							<span>Use default cape</span>
+						</CapeButton>
+						<CapeLikeTextButton v-else :highlighted="!selectedCape" @click="selectCape(undefined)">
+							<span>Use default cape</span>
+						</CapeLikeTextButton>
 
-						<div
-							ref="capeListRef"
-							class="grid grid-cols-[repeat(4,max-content)] auto-rows-max gap-2 overflow-y-auto pr-1"
-							:style="{ maxHeight: capeListMaxHeight }"
-							@scroll="checkCapeScrollState"
+						<CapeButton
+							v-for="cape in visibleCapeList"
+							:id="cape.id"
+							:key="cape.id"
+							:texture="cape.texture"
+							:name="cape.name || 'Cape'"
+							:selected="selectedCape?.id === cape.id"
+							@select="selectCape(cape)"
+						/>
+
+						<CapeLikeTextButton
+							v-if="(capes?.length ?? 0) > 2"
+							tooltip="View more capes"
+							@mouseup="openSelectCapeModal"
 						>
-							<CapeLikeTextButton
-								:tooltip="formatMessage(messages.noCapeTooltip)"
-								:highlighted="!selectedCape"
-								@click="selectCape(undefined)"
-							>
-								<template #icon><XIcon /></template>
-								<span>{{ formatMessage(messages.noneCapeOption) }}</span>
-							</CapeLikeTextButton>
-
-							<CapeButton
-								v-for="cape in sortedCapes"
-								:id="cape.id"
-								:key="cape.id"
-								:texture="cape.texture"
-								:name="cape.name || formatMessage(messages.capeFallbackName)"
-								:selected="selectedCape?.id === cape.id"
-								@select="selectCape(cape)"
-							/>
-						</div>
-
-						<Transition
-							enter-active-class="transition-all duration-200 ease-out"
-							enter-from-class="opacity-0 max-h-0"
-							enter-to-class="opacity-100 max-h-6"
-							leave-active-class="transition-all duration-200 ease-in"
-							leave-from-class="opacity-100 max-h-6"
-							leave-to-class="opacity-0 max-h-0"
-						>
-							<div
-								v-if="showCapeBottomFade"
-								class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-6 bg-gradient-to-t from-bg-raised to-transparent"
-							/>
-						</Transition>
+							<template #icon><ChevronRightIcon /></template>
+							<span>More</span>
+						</CapeLikeTextButton>
 					</div>
 				</section>
 			</div>
 		</div>
 
-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button :disabled="isSaving" @click="hide">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
-						<SpinnerIcon v-if="isSaving" class="animate-spin" />
-						<CheckIcon v-else-if="mode === 'new'" />
-						<SaveIcon v-else />
-						{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
+		<div class="flex gap-2 mt-12">
+			<ButtonStyled color="brand">
+				<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
+					<SpinnerIcon v-if="isSaving" class="animate-spin" />
+					<CheckIcon v-else-if="mode === 'new'" />
+					<SaveIcon v-else />
+					{{ mode === 'new' ? 'Add skin' : 'Save skin' }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled type="outlined">
+				<button :disabled="isSaving" @click="hide"><XIcon />Cancel</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+
+	<SelectCapeModal
+		ref="selectCapeModal"
+		:capes="capes || []"
+		@select="handleCapeSelected"
+		@cancel="handleCapeCancel"
+	/>
 </template>
 
 <script setup lang="ts">
-import { CheckIcon, SaveIcon, SpinnerIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import {
+	CheckIcon,
+	ChevronRightIcon,
+	SaveIcon,
+	SpinnerIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
 import {
 	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,
-	commonMessages,
-	defineMessages,
 	injectNotificationManager,
-	NewModal,
 	RadioButtons,
 	SkinPreviewRenderer,
-	useScrollIndicator,
-	useVIntl,
 } from '@modrinth/ui'
-import { arrayBufferToBase64 } from '@modrinth/utils'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 import {
+	add_and_equip_custom_skin,
 	type Cape,
 	determineModelType,
-	equip_skin,
 	get_normalized_skin_texture,
-	normalize_skin_texture,
-	save_custom_skin,
+	remove_custom_skin,
 	type Skin,
 	type SkinModel,
 	type SkinTextureUrl,
+	unequip_skin,
 } from '@/helpers/skins.ts'
 
-const CAPE_LIST_MAX_HEIGHT = 334
-const messages = defineMessages({
-	editSkinTitle: {
-		id: 'app.skins.modal.edit-title',
-		defaultMessage: 'Editing skin',
-	},
-	addSkinTitle: {
-		id: 'app.skins.modal.add-title',
-		defaultMessage: 'Adding a skin',
-	},
-	textureSection: {
-		id: 'app.skins.modal.texture-section',
-		defaultMessage: 'Texture',
-	},
-	replaceTextureButton: {
-		id: 'app.skins.modal.replace-texture-button',
-		defaultMessage: 'Replace texture',
-	},
-	armStyleSection: {
-		id: 'app.skins.modal.arm-style-section',
-		defaultMessage: 'Arm style',
-	},
-	wideArmStyle: {
-		id: 'app.skins.modal.arm-style-wide',
-		defaultMessage: 'Wide',
-	},
-	slimArmStyle: {
-		id: 'app.skins.modal.arm-style-slim',
-		defaultMessage: 'Slim',
-	},
-	capeSection: {
-		id: 'app.skins.modal.cape-section',
-		defaultMessage: 'Cape',
-	},
-	noCapeTooltip: {
-		id: 'app.skins.modal.no-cape-tooltip',
-		defaultMessage: 'No cape',
-	},
-	noneCapeOption: {
-		id: 'app.skins.modal.none-cape-option',
-		defaultMessage: 'None',
-	},
-	capeFallbackName: {
-		id: 'app.skins.modal.cape-fallback-name',
-		defaultMessage: 'Cape',
-	},
-	savingTooltip: {
-		id: 'app.skins.modal.saving-tooltip',
-		defaultMessage: 'Saving...',
-	},
-	uploadSkinFirstTooltip: {
-		id: 'app.skins.modal.upload-skin-first-tooltip',
-		defaultMessage: 'Upload a skin first!',
-	},
-	makeEditFirstTooltip: {
-		id: 'app.skins.modal.make-edit-first-tooltip',
-		defaultMessage: 'Make an edit to the skin first!',
-	},
-	addSkinButton: {
-		id: 'app.skins.modal.add-skin-button',
-		defaultMessage: 'Add skin',
-	},
-	saveSkinButton: {
-		id: 'app.skins.modal.save-skin-button',
-		defaultMessage: 'Save skin',
-	},
-})
-
-const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
 
 const modal = useTemplateRef('modal')
-const textureFileInput = useTemplateRef<HTMLInputElement>('textureFileInput')
-const capeListRef = ref<HTMLElement | null>(null)
-const capeListMaxHeight = ref(`${CAPE_LIST_MAX_HEIGHT}px`)
+const selectCapeModal = useTemplateRef('selectCapeModal')
 const mode = ref<'new' | 'edit'>('new')
 const currentSkin = ref<Skin | null>(null)
+const shouldRestoreModal = ref(false)
 const isSaving = ref(false)
 
 const uploadedTextureUrl = ref<SkinTextureUrl | null>(null)
@@ -244,49 +151,10 @@ const previewSkin = ref<string>('')
 
 const variant = ref<SkinModel>('CLASSIC')
 const selectedCape = ref<Cape | undefined>(undefined)
-const props = defineProps<{ capes?: Cape[] }>()
+const props = defineProps<{ capes?: Cape[]; defaultCape?: Cape }>()
 
 const selectedCapeTexture = computed(() => selectedCape.value?.texture)
-const canEditTextureAndModel = computed(() => currentSkin.value?.source !== 'default')
-const {
-	showTopFade: showCapeTopFade,
-	showBottomFade: showCapeBottomFade,
-	checkScrollState: checkCapeScrollState,
-	forceCheck: forceCapeScrollCheck,
-} = useScrollIndicator(capeListRef)
-
-let capeListLayoutFrame: number | null = null
-function updateCapeListLayout() {
-	const capeList = capeListRef.value
-	const modalContent = capeList?.closest('[data-modal-content]') as HTMLElement | null
-
-	if (!capeList || !modalContent) {
-		capeListMaxHeight.value = `${CAPE_LIST_MAX_HEIGHT}px`
-		forceCapeScrollCheck()
-		return
-	}
-
-	const availableHeight =
-		modalContent.getBoundingClientRect().bottom - capeList.getBoundingClientRect().top
-
-	capeListMaxHeight.value = `${Math.min(
-		CAPE_LIST_MAX_HEIGHT,
-		Math.max(0, Math.floor(availableHeight)),
-	)}px`
-
-	nextTick(() => forceCapeScrollCheck())
-}
-
-function refreshCapeListLayout() {
-	if (capeListLayoutFrame !== null) {
-		cancelAnimationFrame(capeListLayoutFrame)
-	}
-
-	capeListLayoutFrame = requestAnimationFrame(() => {
-		capeListLayoutFrame = null
-		updateCapeListLayout()
-	})
-}
+const visibleCapeList = ref<Cape[]>([])
 
 const sortedCapes = computed(() => {
 	return [...(props.capes || [])].sort((a, b) => {
@@ -296,6 +164,32 @@ const sortedCapes = computed(() => {
 	})
 })
 
+function initVisibleCapeList() {
+	if (!props.capes || props.capes.length === 0) {
+		visibleCapeList.value = []
+		return
+	}
+
+	if (visibleCapeList.value.length === 0) {
+		if (selectedCape.value) {
+			const otherCape = getSortedCapeExcluding(selectedCape.value.id)
+			visibleCapeList.value = otherCape ? [selectedCape.value, otherCape] : [selectedCape.value]
+		} else {
+			visibleCapeList.value = getSortedCapes(2)
+		}
+	}
+}
+
+function getSortedCapes(count: number): Cape[] {
+	if (!sortedCapes.value || sortedCapes.value.length === 0) return []
+	return sortedCapes.value.slice(0, count)
+}
+
+function getSortedCapeExcluding(excludeId: string): Cape | undefined {
+	if (!sortedCapes.value || sortedCapes.value.length <= 1) return undefined
+	return sortedCapes.value.find((cape) => cape.id !== excludeId)
+}
+
 async function loadPreviewSkin() {
 	if (uploadedTextureUrl.value) {
 		previewSkin.value = uploadedTextureUrl.value.normalized
@@ -327,13 +221,9 @@ const disableSave = computed(
 )
 
 const saveTooltip = computed(() => {
-	if (isSaving.value) return formatMessage(messages.savingTooltip)
-	if (mode.value === 'new' && !uploadedTextureUrl.value) {
-		return formatMessage(messages.uploadSkinFirstTooltip)
-	}
-	if (mode.value === 'edit' && !hasEdits.value) {
-		return formatMessage(messages.makeEditFirstTooltip)
-	}
+	if (isSaving.value) return 'Saving...'
+	if (mode.value === 'new' && !uploadedTextureUrl.value) return 'Upload a skin first!'
+	if (mode.value === 'edit' && !hasEdits.value) return 'Make an edit to the skin first!'
 	return undefined
 })
 
@@ -344,13 +234,11 @@ function resetState() {
 	previewSkin.value = ''
 	variant.value = 'CLASSIC'
 	selectedCape.value = undefined
+	visibleCapeList.value = []
+	shouldRestoreModal.value = false
 	isSaving.value = false
 }
 
-function handleModalHide() {
-	setTimeout(() => resetState(), 250)
-}
-
 async function show(e: MouseEvent, skin?: Skin) {
 	mode.value = skin ? 'edit' : 'new'
 	currentSkin.value = skin ?? null
@@ -361,11 +249,12 @@ async function show(e: MouseEvent, skin?: Skin) {
 		variant.value = 'CLASSIC'
 		selectedCape.value = undefined
 	}
+	visibleCapeList.value = []
+	initVisibleCapeList()
 
 	await loadPreviewSkin()
 
 	modal.value?.show(e)
-	nextTick(() => refreshCapeListLayout())
 }
 
 async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
@@ -374,54 +263,98 @@ async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	variant.value = await determineModelType(skinTextureUrl.original)
 	selectedCape.value = undefined
+	visibleCapeList.value = []
+	initVisibleCapeList()
 
 	await loadPreviewSkin()
 
 	modal.value?.show(e)
-	nextTick(() => refreshCapeListLayout())
 }
 
-async function setUploadedTexture(skinTextureUrl: SkinTextureUrl) {
+async function restoreWithNewTexture(skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	await loadPreviewSkin()
-	nextTick(() => refreshCapeListLayout())
+
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
+	}
 }
 
 function hide() {
 	modal.value?.hide()
+	setTimeout(() => resetState(), 250)
 }
 
 function selectCape(cape: Cape | undefined) {
+	if (cape && selectedCape.value?.id !== cape.id) {
+		const isInVisibleList = visibleCapeList.value.some((c) => c.id === cape.id)
+		if (!isInVisibleList && visibleCapeList.value.length > 0) {
+			visibleCapeList.value.splice(0, 1, cape)
+
+			if (visibleCapeList.value.length > 1 && visibleCapeList.value[1].id === cape.id) {
+				const otherCape = getSortedCapeExcluding(cape.id)
+				if (otherCape) {
+					visibleCapeList.value.splice(1, 1, otherCape)
+				}
+			}
+		}
+	}
 	selectedCape.value = cape
 }
 
-function openTextureFileBrowser() {
-	textureFileInput.value?.click()
+function handleCapeSelected(cape: Cape | undefined) {
+	selectCape(cape)
+
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
+	}
 }
 
-async function onTextureFileInputChange(e: Event) {
-	const files = (e.target as HTMLInputElement).files
-	const file = files?.[0]
-
-	if (!file) {
-		return
+function handleCapeCancel() {
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			modal.value?.show()
+			shouldRestoreModal.value = false
+		}, 0)
 	}
+}
 
-	try {
-		const originalSkinTexUrl = `data:image/png;base64,${arrayBufferToBase64(
-			await file.arrayBuffer(),
-		)}`
-		const skinTextureNormalized = await normalize_skin_texture(originalSkinTexUrl)
-		await setUploadedTexture({
-			original: originalSkinTexUrl,
-			normalized: `data:image/png;base64,${arrayBufferToBase64(skinTextureNormalized)}`,
-		})
-	} catch (error) {
-		handleError(error)
-	} finally {
-		if (textureFileInput.value) {
-			textureFileInput.value.value = ''
-		}
+function openSelectCapeModal(e: MouseEvent) {
+	if (!selectCapeModal.value) return
+
+	shouldRestoreModal.value = true
+	modal.value?.hide()
+
+	setTimeout(() => {
+		selectCapeModal.value?.show(
+			e,
+			currentSkin.value?.texture_key,
+			selectedCape.value,
+			previewSkin.value,
+			variant.value,
+		)
+	}, 0)
+}
+
+function openUploadSkinModal(e: MouseEvent) {
+	shouldRestoreModal.value = true
+	modal.value?.hide()
+	emit('open-upload-modal', e)
+}
+
+function restoreModal() {
+	if (shouldRestoreModal.value) {
+		setTimeout(() => {
+			const fakeEvent = new MouseEvent('click')
+			modal.value?.show(fakeEvent)
+			shouldRestoreModal.value = false
+		}, 500)
 	}
 }
 
@@ -437,45 +370,17 @@ async function save() {
 			textureUrl = currentSkin.value!.texture
 		}
 
+		await unequip_skin()
+
 		const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())
 
 		if (mode.value === 'new') {
-			const addedSkin = await save_custom_skin(
-				{
-					texture_key: '',
-					variant: variant.value,
-					cape_id: selectedCape.value?.id,
-					texture: textureUrl,
-					source: 'custom',
-					is_equipped: false,
-				},
-				bytes,
-				variant.value,
-				selectedCape.value,
-				true,
-			)
-			emit('saved', {
-				applied: false,
-				skin: addedSkin,
-			})
+			await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+			emit('saved')
 		} else {
-			const updatedSkin = await save_custom_skin(
-				currentSkin.value!,
-				bytes,
-				variant.value,
-				selectedCape.value,
-				!!uploadedTextureUrl.value && textureUrl !== currentSkin.value?.texture,
-			)
-
-			if (currentSkin.value?.is_equipped) {
-				await equip_skin(updatedSkin)
-			}
-
-			emit('saved', {
-				applied: !!currentSkin.value?.is_equipped,
-				skin: updatedSkin,
-				previousSkin: currentSkin.value!,
-			})
+			await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+			await remove_custom_skin(currentSkin.value!)
+			emit('saved')
 		}
 
 		hide()
@@ -488,53 +393,28 @@ async function save() {
 
 watch([uploadedTextureUrl, currentSkin], async () => {
 	await loadPreviewSkin()
-	refreshCapeListLayout()
 })
 
 watch(
 	() => props.capes,
 	() => {
-		nextTick(() => refreshCapeListLayout())
+		initVisibleCapeList()
 	},
 	{ immediate: true },
 )
 
-watch(
-	capeListRef,
-	(capeList, _, onCleanup) => {
-		if (!capeList) return
-
-		const modalContent = capeList.closest('[data-modal-content]')
-		const resizeObserver = new ResizeObserver(() => refreshCapeListLayout())
-
-		if (modalContent instanceof HTMLElement) {
-			resizeObserver.observe(modalContent)
-		}
-
-		window.addEventListener('resize', refreshCapeListLayout, { passive: true })
-		refreshCapeListLayout()
-
-		onCleanup(() => {
-			resizeObserver.disconnect()
-			window.removeEventListener('resize', refreshCapeListLayout)
-
-			if (capeListLayoutFrame !== null) {
-				cancelAnimationFrame(capeListLayoutFrame)
-				capeListLayoutFrame = null
-			}
-		})
-	},
-	{ flush: 'post' },
-)
-
 const emit = defineEmits<{
-	(event: 'saved', options: { applied: boolean; skin?: Skin; previousSkin?: Skin }): void
+	(event: 'saved'): void
 	(event: 'deleted', skin: Skin): void
+	(event: 'open-upload-modal', mouseEvent: MouseEvent): void
 }>()
 
 defineExpose({
 	show,
 	showNew,
+	restoreWithNewTexture,
 	hide,
+	shouldRestoreModal,
+	restoreModal,
 })
 </script>

apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	CapeButton,
+	CapeLikeTextButton,
+	ScrollablePanel,
+	SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import type { Cape, SkinModel } from '@/helpers/skins.ts'
+
+const modal = useTemplateRef('modal')
+
+const emit = defineEmits<{
+	(e: 'select', cape: Cape | undefined): void
+	(e: 'cancel'): void
+}>()
+
+const props = defineProps<{
+	capes: Cape[]
+}>()
+
+const sortedCapes = computed(() => {
+	return [...props.capes].sort((a, b) => {
+		const nameA = (a.name || '').toLowerCase()
+		const nameB = (b.name || '').toLowerCase()
+		return nameA.localeCompare(nameB)
+	})
+})
+
+const currentSkinId = ref<string | undefined>()
+const currentSkinTexture = ref<string | undefined>()
+const currentSkinVariant = ref<SkinModel>('CLASSIC')
+const currentCapeTexture = computed<string | undefined>(() => currentCape.value?.texture)
+const currentCape = ref<Cape | undefined>()
+
+function show(
+	e: MouseEvent,
+	skinId?: string,
+	selected?: Cape,
+	skinTexture?: string,
+	variant?: SkinModel,
+) {
+	currentSkinId.value = skinId
+	currentSkinTexture.value = skinTexture
+	currentSkinVariant.value = variant || 'CLASSIC'
+	currentCape.value = selected
+	modal.value?.show(e)
+}
+
+function select() {
+	emit('select', currentCape.value)
+	hide()
+}
+
+function hide() {
+	modal.value?.hide()
+	emit('cancel')
+}
+
+function updateSelectedCape(cape: Cape | undefined) {
+	currentCape.value = cape
+}
+
+function onModalHide() {
+	emit('cancel')
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
+<template>
+	<ModalWrapper ref="modal" @on-hide="onModalHide">
+		<template #title>
+			<div class="flex flex-col">
+				<span class="text-lg font-extrabold text-heading">Change cape</span>
+			</div>
+		</template>
+		<div class="flex flex-col md:flex-row gap-6">
+			<div class="max-h-[25rem] h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
+				<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
+					<SkinPreviewRenderer
+						v-if="currentSkinTexture"
+						:cape-src="currentCapeTexture"
+						:texture-src="currentSkinTexture"
+						:variant="currentSkinVariant"
+						:scale="1.4"
+						:fov="50"
+						:initial-rotation="Math.PI + Math.PI / 8"
+						class="h-full w-full"
+					/>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-4 w-full my-auto">
+				<ScrollablePanel class="max-h-[20rem] max-w-[30rem] mb-5 h-full">
+					<div class="flex flex-wrap gap-2 justify-center content-start overflow-y-auto h-full">
+						<CapeLikeTextButton
+							tooltip="No Cape"
+							:highlighted="!currentCape"
+							@click="updateSelectedCape(undefined)"
+						>
+							<template #icon>
+								<XIcon />
+							</template>
+							<span>None</span>
+						</CapeLikeTextButton>
+						<CapeButton
+							v-for="cape in sortedCapes"
+							:id="cape.id"
+							:key="cape.id"
+							:name="cape.name"
+							:texture="cape.texture"
+							:selected="currentCape?.id === cape.id"
+							@select="updateSelectedCape(cape)"
+						/>
+					</div>
+				</ScrollablePanel>
+			</div>
+		</div>
+		<div class="flex gap-2 items-center">
+			<ButtonStyled color="brand">
+				<button @click="select">
+					<CheckIcon />
+					Select
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide">
+					<XIcon />
+					Cancel
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+</template>

apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue

@@ -0,0 +1,141 @@
+<template>
+	<ModalWrapper ref="modal" @on-hide="hide(true)">
+		<template #title>
+			<span class="text-lg font-extrabold text-contrast"> Upload skin texture </span>
+		</template>
+		<div class="relative">
+			<div
+				class="border-2 border-dashed border-highlight-gray rounded-xl h-[173px] flex flex-col items-center justify-center p-8 cursor-pointer bg-button-bg hover:bg-button-hover transition-colors relative"
+				@click="triggerFileInput"
+			>
+				<p class="mx-auto mb-0 text-primary font-bold text-lg text-center flex items-center gap-2">
+					<UploadIcon /> Select skin texture file
+				</p>
+				<p class="mx-auto mt-0 text-secondary text-sm text-center">
+					Drag and drop or click here to browse
+				</p>
+				<input
+					ref="fileInput"
+					type="file"
+					accept="image/png"
+					class="hidden"
+					@change="handleInputFileChange"
+				/>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { UploadIcon } from '@modrinth/assets'
+import { injectNotificationManager } from '@modrinth/ui'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_dragged_skin_data } from '@/helpers/skins'
+
+const { addNotification } = injectNotificationManager()
+
+const modal = ref()
+const fileInput = ref<HTMLInputElement>()
+const unlisten = ref<() => void>()
+const modalVisible = ref(false)
+
+const emit = defineEmits<{
+	(e: 'uploaded', data: ArrayBuffer): void
+	(e: 'canceled'): void
+}>()
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+	modalVisible.value = true
+	setupDragDropListener()
+}
+
+function hide(emitCanceled = false) {
+	modal.value?.hide()
+	modalVisible.value = false
+	cleanupDragDropListener()
+	resetState()
+	if (emitCanceled) {
+		emit('canceled')
+	}
+}
+
+function resetState() {
+	if (fileInput.value) fileInput.value.value = ''
+}
+
+function triggerFileInput() {
+	fileInput.value?.click()
+}
+
+async function handleInputFileChange(e: Event) {
+	const files = (e.target as HTMLInputElement).files
+	if (!files || files.length === 0) {
+		return
+	}
+	const file = files[0]
+	const buffer = await file.arrayBuffer()
+	await processData(buffer)
+}
+
+async function setupDragDropListener() {
+	try {
+		if (modalVisible.value) {
+			await cleanupDragDropListener()
+			unlisten.value = await getCurrentWebview().onDragDropEvent(async (event) => {
+				if (event.payload.type !== 'drop') {
+					return
+				}
+
+				if (!event.payload.paths || event.payload.paths.length === 0) {
+					return
+				}
+
+				const filePath = event.payload.paths[0]
+
+				try {
+					const data = await get_dragged_skin_data(filePath)
+					await processData(data.buffer)
+				} catch (error) {
+					addNotification({
+						title: 'Error processing file',
+						text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
+						type: 'error',
+					})
+				}
+			})
+		}
+	} catch (error) {
+		console.error('Failed to set up drag and drop listener:', error)
+	}
+}
+
+async function cleanupDragDropListener() {
+	if (unlisten.value) {
+		unlisten.value()
+		unlisten.value = undefined
+	}
+}
+
+async function processData(buffer: ArrayBuffer) {
+	emit('uploaded', buffer)
+	hide()
+}
+
+watch(modalVisible, (isVisible) => {
+	if (isVisible) {
+		setupDragDropListener()
+	} else {
+		cleanupDragDropListener()
+	}
+})
+
+onBeforeUnmount(() => {
+	cleanupDragDropListener()
+})
+
+defineExpose({ show, hide })
+</script>

apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue

@@ -1,578 +0,0 @@
-<script setup lang="ts">
-import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
-import {
-	Accordion,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	SkinButton,
-	SkinLikeTextButton,
-	useScrollViewport,
-	useVIntl,
-} from '@modrinth/ui'
-import { useElementSize, useWindowSize } from '@vueuse/core'
-import { Tooltip } from 'floating-vue'
-import { computed, nextTick, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import Draggable from 'vuedraggable'
-
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import type { Skin } from '@/helpers/skins.ts'
-
-type SkinSectionKind = 'saved' | 'default'
-type SkinLikeTextButtonExpose = {
-	getRootElement: () => HTMLElement | null | undefined
-}
-type AddSkinButtonRef = SkinLikeTextButtonExpose | SkinLikeTextButtonExpose[]
-
-interface DefaultSkinSection {
-	title: string
-	infoTooltip?: string
-	skins: Skin[]
-}
-
-interface SkinSection {
-	key: string
-	title: string
-	kind: SkinSectionKind
-	infoTooltip?: string
-	skins: Skin[]
-}
-
-interface VirtualSkinSection {
-	section: SkinSection
-	top: number
-	index: number
-}
-
-const SKIN_CARD_ASPECT_WIDTH = 31
-const SKIN_CARD_ASPECT_HEIGHT = 40
-const SKIN_GRID_GAP = 12
-const SKIN_SECTION_FIRST_SPACING = 4
-const SKIN_SECTION_SPACING = 24
-const SKIN_SECTION_HEADER_HEIGHT = 28
-const SKIN_SECTION_CONTENT_SPACING = 8
-const SKIN_SECTION_OVERSCAN = 900
-const FALLBACK_CARD_WIDTH = 220
-const messages = defineMessages({
-	savedSkinsSection: {
-		id: 'app.skins.section.saved-skins',
-		defaultMessage: 'Saved skins',
-	},
-	addSkinButton: {
-		id: 'app.skins.add-button',
-		defaultMessage: 'Add skin',
-	},
-	dragAndDropSubtitle: {
-		id: 'app.skins.add-button.drag-and-drop',
-		defaultMessage: 'Drag and drop',
-	},
-	editSkinButton: {
-		id: 'app.skins.edit-button',
-		defaultMessage: 'Edit skin',
-	},
-	deleteSkinButton: {
-		id: 'app.skins.delete-button',
-		defaultMessage: 'Delete skin',
-	},
-})
-
-const props = defineProps<{
-	savedSkins: Skin[]
-	defaultSkinSections: DefaultSkinSection[]
-	getBakedSkinTextures: (skin: Skin) => RenderResult | undefined
-	isSkinSelected: (skin: Skin) => boolean
-	isSkinActive: (skin: Skin) => boolean
-	isAddSkinButtonDragActive: boolean
-	readOnly?: boolean
-}>()
-
-const emit = defineEmits<{
-	select: [skin: Skin]
-	edit: [skin: Skin, event: MouseEvent]
-	delete: [skin: Skin]
-	'reorder-saved-skins': [skins: Skin[]]
-	'add-skin': []
-	'add-skin-dragenter': [event: DragEvent]
-	'add-skin-dragover': [event: DragEvent]
-	'add-skin-dragleave': [event: DragEvent]
-	'add-skin-drop': [event: DragEvent]
-}>()
-
-const addSkinButton = useTemplateRef<AddSkinButtonRef>('addSkinButton')
-const { formatMessage } = useVIntl()
-const { listContainer, relativeScrollTop, scrollContainer, viewportHeight } = useScrollViewport()
-const openSectionKeys = ref<Set<string>>(new Set())
-const hasSettledInitialLayout = ref(false)
-const knownSectionKeys = new Set<string>()
-let enableLayoutTransitionsFrame: number | null = null
-let isEnableLayoutTransitionsScheduled = false
-let isUnmounted = false
-
-const { width: listWidth } = useElementSize(listContainer)
-const { width: windowWidth } = useWindowSize()
-
-const columnCount = computed(() => {
-	if (windowWidth.value >= 2050) {
-		return 6
-	}
-
-	if (windowWidth.value >= 1750) {
-		return 5
-	}
-
-	if (windowWidth.value >= 1300) {
-		return 4
-	}
-
-	return 3
-})
-
-const cardWidth = computed(() => {
-	if (listWidth.value <= 0) {
-		return FALLBACK_CARD_WIDTH
-	}
-
-	const gapsWidth = (columnCount.value - 1) * SKIN_GRID_GAP
-	return Math.max(0, (listWidth.value - gapsWidth) / columnCount.value)
-})
-
-const cardHeight = computed(
-	() => (cardWidth.value * SKIN_CARD_ASPECT_HEIGHT) / SKIN_CARD_ASPECT_WIDTH,
-)
-
-const sections = computed<SkinSection[]>(() => [
-	{
-		key: 'saved-skins',
-		title: formatMessage(messages.savedSkinsSection),
-		kind: 'saved',
-		skins: props.savedSkins,
-	},
-	...props.defaultSkinSections.map((section) => ({
-		key: defaultSkinSectionKey(section.title),
-		title: section.title,
-		kind: 'default' as const,
-		infoTooltip: section.infoTooltip,
-		skins: section.skins,
-	})),
-])
-
-const draggableSavedSkins = ref<Skin[]>([])
-const isDraggingSavedSkin = ref(false)
-const canReorderSavedSkins = computed(() => draggableSavedSkins.value.length > 1)
-const fixedSavedSkins = computed(() => props.savedSkins.filter((skin) => !canDragSavedSkin(skin)))
-
-const sectionLayouts = computed(() => {
-	const layouts: Array<{ section: SkinSection; top: number; height: number; index: number }> = []
-	let top = 0
-
-	sections.value.forEach((section, index) => {
-		const height = getSectionHeightEstimate(section, index)
-		layouts.push({ section, top, height, index })
-		top += height
-	})
-
-	return layouts
-})
-
-const totalHeight = computed(() => {
-	const lastSection = sectionLayouts.value[sectionLayouts.value.length - 1]
-	return lastSection ? lastSection.top + lastSection.height : 0
-})
-
-const visibleSections = computed<VirtualSkinSection[]>(() => {
-	if (!listContainer.value || !scrollContainer.value) {
-		return sectionLayouts.value.slice(0, 4)
-	}
-
-	const viewportStart = Math.max(0, relativeScrollTop.value - SKIN_SECTION_OVERSCAN)
-	const viewportEnd = relativeScrollTop.value + viewportHeight.value + SKIN_SECTION_OVERSCAN
-
-	return sectionLayouts.value
-		.filter((layout) => layout.top + layout.height >= viewportStart && layout.top <= viewportEnd)
-		.map(({ section, top, index }) => ({ section, top, index }))
-})
-
-watch(
-	sections,
-	(nextSections) => {
-		const sectionKeys = new Set(nextSections.map((section) => section.key))
-		const openKeys = new Set(openSectionKeys.value)
-
-		for (const section of nextSections) {
-			if (!knownSectionKeys.has(section.key)) {
-				knownSectionKeys.add(section.key)
-				openKeys.add(section.key)
-			}
-		}
-
-		for (const key of knownSectionKeys) {
-			if (!sectionKeys.has(key)) {
-				knownSectionKeys.delete(key)
-				openKeys.delete(key)
-			}
-		}
-
-		openSectionKeys.value = openKeys
-	},
-	{ immediate: true },
-)
-
-watch(
-	() => props.savedSkins,
-	(nextSkins) => {
-		if (isDraggingSavedSkin.value) {
-			return
-		}
-
-		draggableSavedSkins.value = nextSkins.filter(canDragSavedSkin)
-	},
-	{ immediate: true },
-)
-
-watch(
-	listWidth,
-	(width) => {
-		if (
-			typeof window === 'undefined' ||
-			width <= 0 ||
-			hasSettledInitialLayout.value ||
-			isEnableLayoutTransitionsScheduled
-		) {
-			return
-		}
-
-		isEnableLayoutTransitionsScheduled = true
-		void nextTick(() => {
-			if (isUnmounted) return
-
-			enableLayoutTransitionsFrame = window.requestAnimationFrame(() => {
-				if (isUnmounted) return
-
-				enableLayoutTransitionsFrame = window.requestAnimationFrame(() => {
-					if (isUnmounted) return
-
-					hasSettledInitialLayout.value = true
-					enableLayoutTransitionsFrame = null
-					isEnableLayoutTransitionsScheduled = false
-				})
-			})
-		})
-	},
-	{ immediate: true },
-)
-
-onUnmounted(() => {
-	isUnmounted = true
-
-	if (enableLayoutTransitionsFrame !== null) {
-		window.cancelAnimationFrame(enableLayoutTransitionsFrame)
-	}
-})
-
-function defaultSkinSectionKey(title: string) {
-	return `default-skins-${title}`
-}
-
-function skinKey(skin: Skin, prefix: string) {
-	return `${prefix}-${skin.source}-${skin.texture_key}-${skin.variant}-${skin.cape_id ?? 'no-cape'}`
-}
-
-function savedSkinKey(skin: Skin) {
-	return skinKey(skin, 'saved-skin')
-}
-
-function canDragSavedSkin(skin: Skin) {
-	return skin.source === 'custom' || skin.source === 'custom_external'
-}
-
-function doSkinOrdersMatch(firstSkins: Skin[], secondSkins: Skin[]) {
-	const draggableSecondSkins = secondSkins.filter(canDragSavedSkin)
-
-	return (
-		firstSkins.length === draggableSecondSkins.length &&
-		firstSkins.every(
-			(skin, index) => savedSkinKey(skin) === savedSkinKey(draggableSecondSkins[index]),
-		)
-	)
-}
-
-function onSavedSkinDragStart() {
-	isDraggingSavedSkin.value = true
-}
-
-function onSavedSkinDragEnd() {
-	isDraggingSavedSkin.value = false
-
-	if (doSkinOrdersMatch(draggableSavedSkins.value, props.savedSkins)) {
-		draggableSavedSkins.value = props.savedSkins.filter(canDragSavedSkin)
-		return
-	}
-
-	emit('reorder-saved-skins', [...draggableSavedSkins.value])
-}
-
-function isSectionOpen(key: string) {
-	return openSectionKeys.value.has(key)
-}
-
-function setSectionOpen(key: string, open: boolean) {
-	const openKeys = new Set(openSectionKeys.value)
-
-	if (open) {
-		openKeys.add(key)
-	} else {
-		openKeys.delete(key)
-	}
-
-	openSectionKeys.value = openKeys
-}
-
-function getSectionHeightEstimate(section: SkinSection, index: number) {
-	const spacing = index === 0 ? SKIN_SECTION_FIRST_SPACING : SKIN_SECTION_SPACING
-
-	if (!isSectionOpen(section.key)) {
-		return spacing + SKIN_SECTION_HEADER_HEIGHT
-	}
-
-	const cardCount = section.kind === 'saved' ? section.skins.length + 1 : section.skins.length
-	const rowCount = Math.ceil(cardCount / columnCount.value)
-	const gridHeight = rowCount * cardHeight.value + Math.max(0, rowCount - 1) * SKIN_GRID_GAP
-
-	return spacing + SKIN_SECTION_HEADER_HEIGHT + SKIN_SECTION_CONTENT_SPACING + gridHeight
-}
-
-function getAddSkinButtonElement() {
-	const button = Array.isArray(addSkinButton.value)
-		? addSkinButton.value.find((candidate) => candidate.getRootElement())
-		: addSkinButton.value
-
-	return button?.getRootElement()
-}
-
-defineExpose({ getAddSkinButtonElement })
-</script>
-
-<template>
-	<div
-		ref="listContainer"
-		class="relative w-full"
-		:style="{ height: `${totalHeight}px`, overflowAnchor: 'none' }"
-	>
-		<div
-			v-for="{ section, top, index } in visibleSections"
-			:key="section.key"
-			class="absolute inset-x-0"
-			:class="[
-				index === 0 ? 'pt-1' : 'pt-6',
-				hasSettledInitialLayout
-					? 'transition-transform duration-300 ease-in-out will-change-transform motion-reduce:transition-none'
-					: '',
-			]"
-			:style="{ transform: `translateY(${top}px)` }"
-		>
-			<Accordion
-				button-class="group flex w-full items-center gap-[6px] bg-transparent m-0 p-0 border-none cursor-pointer text-left"
-				content-class="pt-2"
-				:open-by-default="isSectionOpen(section.key)"
-				@on-open="setSectionOpen(section.key, true)"
-				@on-close="setSectionOpen(section.key, false)"
-			>
-				<template #title>
-					{{ section.title }}
-				</template>
-				<template #button="{ open }">
-					<DropdownIcon
-						class="size-6 shrink-0 text-primary transition-transform duration-300"
-						:class="{ 'rotate-180': open }"
-					/>
-					<span class="min-w-0 text-xl font-semibold leading-7 text-primary">
-						{{ section.title }}
-					</span>
-					<Tooltip
-						v-if="section.infoTooltip"
-						theme="dismissable-prompt"
-						placement="top"
-						:triggers="['hover', 'focus']"
-					>
-						<span
-							class="inline-flex size-6 shrink-0 items-center justify-center text-secondary transition-colors group-hover:text-primary"
-							@click.stop
-						>
-							<UnknownIcon class="size-5" />
-						</span>
-						<template #popper>
-							<p class="m-0 max-w-96 text-wrap text-sm font-medium leading-tight">
-								{{ section.infoTooltip }}
-							</p>
-						</template>
-					</Tooltip>
-				</template>
-
-				<Draggable
-					v-if="section.kind === 'saved'"
-					:list="draggableSavedSkins"
-					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
-					:item-key="savedSkinKey"
-					:disabled="readOnly || !canReorderSavedSkins"
-					:animation="250"
-					:swap-threshold="1"
-					:invert-swap="false"
-					:force-fallback="true"
-					:fallback-on-body="true"
-					:fallback-tolerance="4"
-					ghost-class="skin-reorder-ghost"
-					chosen-class="skin-reorder-chosen"
-					drag-class="skin-reorder-drag"
-					fallback-class="skin-reorder-fallback"
-					@start="onSavedSkinDragStart"
-					@end="onSavedSkinDragEnd"
-				>
-					<template #header>
-						<SkinLikeTextButton
-							ref="addSkinButton"
-							class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-							dropzone
-							:disabled="readOnly"
-							:drag-active="!readOnly && isAddSkinButtonDragActive"
-							@click="emit('add-skin')"
-							@dragenter="emit('add-skin-dragenter', $event)"
-							@dragover="emit('add-skin-dragover', $event)"
-							@dragleave="emit('add-skin-dragleave', $event)"
-							@drop="emit('add-skin-drop', $event)"
-						>
-							<template #icon>
-								<PlusIcon class="size-8" />
-							</template>
-							{{ formatMessage(messages.addSkinButton) }}
-							<template #subtitle>{{ formatMessage(messages.dragAndDropSubtitle) }}</template>
-						</SkinLikeTextButton>
-					</template>
-
-					<template #item="{ element: skin }">
-						<div
-							:key="savedSkinKey(skin)"
-							class="relative aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						>
-							<SkinButton
-								class="h-full w-full min-w-0 box-border rounded-[20px]"
-								:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-								:selected="isSkinSelected(skin)"
-								:active="isSkinActive(skin)"
-								:disabled="readOnly"
-								:is-dragging="isDraggingSavedSkin"
-								@select="emit('select', skin)"
-							>
-								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
-								</template>
-							</SkinButton>
-						</div>
-					</template>
-
-					<template #footer>
-						<div
-							v-for="skin in fixedSavedSkins"
-							:key="savedSkinKey(skin)"
-							class="relative aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						>
-							<SkinButton
-								class="h-full w-full min-w-0 box-border rounded-[20px]"
-								:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-								:selected="isSkinSelected(skin)"
-								:active="isSkinActive(skin)"
-								:disabled="readOnly"
-								:is-dragging="isDraggingSavedSkin"
-								@select="emit('select', skin)"
-							>
-								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
-								</template>
-							</SkinButton>
-						</div>
-					</template>
-				</Draggable>
-
-				<div
-					v-else
-					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
-				>
-					<SkinButton
-						v-for="skin in section.skins"
-						:key="skinKey(skin, section.key)"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-						:selected="isSkinSelected(skin)"
-						:active="isSkinActive(skin)"
-						:tooltip="skin.name"
-						:disabled="readOnly"
-						:is-dragging="isDraggingSavedSkin"
-						@select="emit('select', skin)"
-					>
-						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
-									:aria-label="formatMessage(messages.editSkinButton)"
-									class="pointer-events-auto"
-									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
-						</template>
-					</SkinButton>
-				</div>
-			</Accordion>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-:global(.skin-reorder-ghost) {
-	opacity: 0.35;
-}
-
-:global(.skin-reorder-drag) {
-	cursor: grabbing;
-}
-
-:global(.skin-reorder-fallback) {
-	opacity: 0.9;
-	pointer-events: none;
-}
-</style>

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -27,10 +27,10 @@ import { useRouter } from 'vue-router'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project } from '@/helpers/cache'
 import { process_listener } from '@/helpers/events'
-import { kill, run } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
 import type { GameInstance } from '@/helpers/types'
-import { showInstanceInFolder } from '@/helpers/utils'
+import { showProfileInFolder } from '@/helpers/utils'
 import { handleSevereError } from '@/store/error'
 
 const { handleError } = injectNotificationManager()
@@ -52,13 +52,13 @@ const props = defineProps<{
 	last_played: Dayjs
 }>()
 
-const loadingModpack = ref(!!props.instance.link)
+const loadingModpack = ref(!!props.instance.linked_data)
 
 const modpack = ref()
 
-if (props.instance.link) {
+if (props.instance.linked_data) {
 	nextTick().then(async () => {
-		modpack.value = await get_project(props.instance.link?.project_id, 'must_revalidate')
+		modpack.value = await get_project(props.instance.linked_data?.project_id, 'must_revalidate')
 		loadingModpack.value = false
 	})
 }
@@ -81,8 +81,8 @@ const playing = ref(false)
 const play = async (event: MouseEvent) => {
 	event?.stopPropagation()
 	loading.value = true
-	await run(props.instance.id)
-		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
+	await run(props.instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
 			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
@@ -97,7 +97,7 @@ const play = async (event: MouseEvent) => {
 const stop = async (event: MouseEvent) => {
 	event?.stopPropagation()
 	loading.value = true
-	await kill(props.instance.id).catch(handleError)
+	await kill(props.instance.path).catch(handleError)
 	trackEvent('InstanceStop', {
 		loader: props.instance.loader,
 		game_version: props.instance.game_version,
@@ -112,7 +112,7 @@ const unlistenProcesses = await process_listener(async () => {
 })
 
 const checkProcess = async () => {
-	const runningProcesses = await get_by_instance_id(props.instance.id).catch(handleError)
+	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
 
 	playing.value = runningProcesses.length > 0
 }
@@ -130,7 +130,7 @@ onUnmounted(() => {
 		<template #clickable>
 			<router-link
 				class="no-click-animation"
-				:to="`/instance/${encodeURIComponent(instance.id)}`"
+				:to="`/instance/${encodeURIComponent(instance.path)}`"
 			/>
 		</template>
 		<div
@@ -138,7 +138,7 @@ onUnmounted(() => {
 		>
 			<Avatar
 				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
-				:tint-by="instance.id"
+				:tint-by="instance.path"
 				size="48px"
 			/>
 			<div class="flex flex-col col-span-2 justify-between h-full">
@@ -206,12 +206,12 @@ onUnmounted(() => {
 						:options="[
 							{
 								id: 'open-instance',
-								shown: !!instance.id,
-								action: () => router.push(encodeURI(`/instance/${instance.id}`)),
+								shown: !!instance.path,
+								action: () => router.push(encodeURI(`/instance/${instance.path}`)),
 							},
 							{
 								id: 'open-folder',
-								action: () => showInstanceInFolder(instance.id),
+								action: () => showProfileInFolder(instance.path),
 							},
 						]"
 					>

apps/app-frontend/src/components/ui/world/RecentWorldsList.vue

@@ -10,13 +10,13 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import InstanceItem from '@/components/ui/world/InstanceItem.vue'
 import WorldItem from '@/components/ui/world/WorldItem.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { instance_listener, process_listener } from '@/helpers/events'
-import { kill, run } from '@/helpers/instance'
+import { process_listener, profile_listener } from '@/helpers/events'
 import { get_all } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
 import { get_game_versions } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import {
-	get_instance_protocol_version,
+	get_profile_protocol_version,
 	get_recent_worlds,
 	getWorldIdentifier,
 	hasServerQuickPlaySupport,
@@ -27,7 +27,7 @@ import {
 	type ServerWorld,
 	start_join_server,
 	start_join_singleplayer_world,
-	type WorldWithInstance,
+	type WorldWithProfile,
 } from '@/helpers/worlds.ts'
 import { handleSevereError } from '@/store/error'
 import { useTheming } from '@/store/theme.ts'
@@ -66,7 +66,7 @@ type InstanceJumpBackInItem = BaseJumpBackInItem & {
 
 type WorldJumpBackInItem = BaseJumpBackInItem & {
 	type: 'world'
-	world: WorldWithInstance
+	world: WorldWithProfile
 }
 
 type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
@@ -100,7 +100,7 @@ async function populateJumpBackIn() {
 		const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN, ['normal', 'favorite'])
 
 		worlds.forEach((world) => {
-			const instance = props.recentInstances.find((instance) => instance.id === world.instance_id)
+			const instance = props.recentInstances.find((instance) => instance.path === world.profile)
 
 			if (!instance || !world.last_played) {
 				return
@@ -115,23 +115,23 @@ async function populateJumpBackIn() {
 		})
 
 		const servers: {
-			instanceId: string
+			instancePath: string
 			address: string
 		}[] = worldItems
 			.filter((item) => item.world.type === 'server' && item.instance)
 			.map((item) => ({
-				instanceId: item.instance.id,
+				instancePath: item.instance.path,
 				address: (item.world as ServerWorld).address,
 			}))
 
 		// fetch protocol versions for all unique MC versions with server worlds
-		const uniqueServerInstances = new Set<string>(servers.map((x) => x.instanceId))
+		const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
 		await Promise.all(
-			[...uniqueServerInstances].map((instanceId) =>
-				get_instance_protocol_version(instanceId)
-					.then((protoVer) => (protocolVersions.value[instanceId] = protoVer))
+			[...uniqueServerInstances].map((path) =>
+				get_profile_protocol_version(path)
+					.then((protoVer) => (protocolVersions.value[path] = protoVer))
 					.catch(() => {
-						console.error(`Failed to get instance protocol for: ${instanceId} `)
+						console.error(`Failed to get profile protocol for: ${path} `)
 					}),
 			),
 		)
@@ -145,14 +145,14 @@ async function populateJumpBackIn() {
 			}
 		})
 
-		servers.forEach(({ instanceId, address }) =>
-			refreshServerData(serverData.value[address], protocolVersions.value[instanceId], address),
+		servers.forEach(({ instancePath, address }) =>
+			refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
 		)
 	}
 
 	const instanceItems: InstanceJumpBackInItem[] = []
 	for (const instance of props.recentInstances) {
-		const worldItem = worldItems.find((item) => item.instance.id === instance.id)
+		const worldItem = worldItems.find((item) => item.instance.path === instance.path)
 		if ((worldItem && worldItem.last_played.isAfter(TWO_WEEKS_AGO)) || !instance.last_played) {
 			continue
 		}
@@ -171,14 +171,14 @@ async function populateJumpBackIn() {
 		.slice(0, MAX_JUMP_BACK_IN)
 }
 
-function refreshServer(address: string, instanceId: string) {
-	refreshServerData(serverData.value[address], protocolVersions.value[instanceId], address)
+function refreshServer(address: string, instancePath: string) {
+	refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
-async function joinWorld(world: WorldWithInstance, instance?: GameInstance) {
+async function joinWorld(world: WorldWithProfile, instance?: GameInstance) {
 	console.log(`Joining world ${getWorldIdentifier(world)}`)
 	if (world.type === 'server') {
-		await start_join_server(world.instance_id, world.address).catch(handleError)
+		await start_join_server(world.profile, world.address).catch(handleError)
 		if (instance) {
 			trackEvent('InstanceStart', {
 				loader: instance.loader,
@@ -187,13 +187,13 @@ async function joinWorld(world: WorldWithInstance, instance?: GameInstance) {
 			})
 		}
 	} else if (world.type === 'singleplayer') {
-		await start_join_singleplayer_world(world.instance_id, world.path).catch(handleError)
+		await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
 	}
 }
 
 async function playInstance(instance: GameInstance) {
-	await run(instance.id)
-		.catch((err) => handleSevereError(err, { instanceId: instance.id }))
+	await run(instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: instance.path }))
 		.finally(() => {
 			trackEvent('InstanceStart', {
 				loader: instance.loader,
@@ -210,14 +210,14 @@ async function stopInstance(path: string) {
 	})
 }
 
-const currentInstance = ref<string>()
+const currentProfile = ref<string>()
 const currentWorld = ref<string>()
 
 const unlistenProcesses = await process_listener(async () => {
 	await checkProcesses()
 })
 
-const unlistenInstances = await instance_listener(async () => {
+const unlistenProfiles = await profile_listener(async () => {
 	await populateJumpBackIn().catch(() => {
 		console.error('Failed to populate jump back in')
 	})
@@ -227,18 +227,18 @@ const runningInstances = ref<string[]>([])
 
 type ProcessMetadata = {
 	uuid: string
-	instance_id: string
+	profile_path: string
 	start_time: string
 }
 
 const checkProcesses = async () => {
 	const runningProcesses: ProcessMetadata[] = await get_all().catch(handleError)
 
-	const runningPaths = runningProcesses.map((x) => x.instance_id)
+	const runningPaths = runningProcesses.map((x) => x.profile_path)
 
 	const stoppedInstances = runningInstances.value.filter((x) => !runningPaths.includes(x))
-	if (currentInstance.value && stoppedInstances.includes(currentInstance.value)) {
-		currentInstance.value = undefined
+	if (currentProfile.value && stoppedInstances.includes(currentProfile.value)) {
+		currentProfile.value = undefined
 		currentWorld.value = undefined
 	}
 
@@ -252,7 +252,7 @@ onMounted(() => {
 
 onUnmounted(() => {
 	unlistenProcesses()
-	unlistenInstances()
+	unlistenProfiles()
 })
 </script>
 
@@ -278,14 +278,14 @@ onUnmounted(() => {
 		<div class="grid-when-huge flex flex-col w-full gap-2">
 			<template
 				v-for="item in jumpBackInItems"
-				:key="`${item.instance.id}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
+				:key="`${item.instance.path}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
 			>
 				<WorldItem
 					v-if="item.type === 'world'"
 					:world="item.world"
-					:playing-instance="runningInstances.includes(item.instance.id)"
+					:playing-instance="runningInstances.includes(item.instance.path)"
 					:playing-world="
-						currentInstance === item.instance.id && currentWorld === getWorldIdentifier(item.world)
+						currentProfile === item.instance.path && currentWorld === getWorldIdentifier(item.world)
 					"
 					:refreshing="
 						item.world.type === 'server'
@@ -306,34 +306,34 @@ onUnmounted(() => {
 					:rendered-motd="
 						item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
 					"
-					:current-protocol="protocolVersions[item.instance.id]"
+					:current-protocol="protocolVersions[item.instance.path]"
 					:game-mode="
 						item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
 					"
-					:instance-id="item.instance.id"
+					:instance-path="item.instance.path"
 					:instance-name="item.instance.name"
 					:instance-icon="item.instance.icon_path"
 					@refresh="
 						() =>
 							item.world.type === 'server'
-								? refreshServer(item.world.address, item.instance.id)
+								? refreshServer(item.world.address, item.instance.path)
 								: {}
 					"
 					@update="() => populateJumpBackIn()"
 					@play="
 						() => {
-							currentInstance = item.instance.id
+							currentProfile = item.instance.path
 							currentWorld = getWorldIdentifier(item.world)
 							joinWorld(item.world, item.instance)
 						}
 					"
 					@play-instance="
 						() => {
-							currentInstance = item.instance.id
+							currentProfile = item.instance.path
 							playInstance(item.instance)
 						}
 					"
-					@stop="() => stopInstance(item.instance.id)"
+					@stop="() => stopInstance(item.instance.path)"
 				/>
 				<InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
 			</template>

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -2,7 +2,6 @@
 import {
 	ClipboardCopyIcon,
 	EditIcon,
-	ExternalIcon,
 	EyeIcon,
 	FolderOpenIcon,
 	IssuesIcon,
@@ -24,7 +23,6 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	injectNotificationManager,
 	OverflowMenu,
 	SmartClickable,
 	TagItem,
@@ -41,7 +39,7 @@ import type { Component } from 'vue'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { copyToClipboard, createInstanceShortcut } from '@/helpers/utils'
+import { copyToClipboard } from '@/helpers/utils'
 import type {
 	ProtocolVersion,
 	ServerStatus,
@@ -62,7 +60,6 @@ const formatDateTime = useFormatDateTime({
 })
 
 const router = useRouter()
-const { addNotification } = injectNotificationManager()
 
 const emit = defineEmits<{
 	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
@@ -94,10 +91,9 @@ const props = withDefaults(
 		managed?: boolean
 
 		// Instance
-		instanceId?: string
+		instancePath?: string
 		instanceName?: string
 		instanceIcon?: string
-		shortcutInstanceId?: string
 	}>(),
 	{
 		playingInstance: false,
@@ -114,10 +110,9 @@ const props = withDefaults(
 		gameMode: undefined,
 		managed: false,
 
-		instanceId: undefined,
+		instancePath: undefined,
 		instanceName: undefined,
 		instanceIcon: undefined,
-		shortcutInstanceId: undefined,
 	},
 )
 
@@ -136,33 +131,6 @@ const serverIncompatible = computed(
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
 const managed = computed(() => props.managed)
-const shortcutInstanceId = computed(() => props.shortcutInstanceId ?? props.instanceId)
-
-async function createShortcut() {
-	if (!shortcutInstanceId.value) return
-
-	try {
-		const shortcutPath = await createInstanceShortcut(
-			props.world.name,
-			shortcutInstanceId.value,
-			props.world.type === 'server'
-				? { server: (props.world as ServerWorld).address }
-				: { singleplayerWorld: (props.world as SingleplayerWorld).path },
-		)
-		if (!shortcutPath) return
-
-		addNotification({
-			type: 'success',
-			title: 'Shortcut created',
-		})
-	} catch (error) {
-		addNotification({
-			type: 'error',
-			title: 'Failed to create shortcut',
-			text: error instanceof Error ? error.message : '',
-		})
-	}
-}
 
 const messages = defineMessages({
 	hardcore: {
@@ -217,10 +185,6 @@ const messages = defineMessages({
 		id: 'instance.worlds.dont_show_on_home',
 		defaultMessage: `Don't show on Home`,
 	},
-	createShortcut: {
-		id: 'instance.worlds.create_shortcut',
-		defaultMessage: 'Create shortcut',
-	},
 	linkedServer: {
 		id: 'instance.worlds.linked_server',
 		defaultMessage: 'Managed by server project',
@@ -245,10 +209,10 @@ const messages = defineMessages({
 </script>
 <template>
 	<SmartClickable>
-		<template v-if="instanceId" #clickable>
+		<template v-if="instancePath" #clickable>
 			<router-link
 				class="no-click-animation"
-				:to="`/instance/${encodeURIComponent(instanceId)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
+				:to="`/instance/${encodeURIComponent(instancePath)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
 			/>
 		</template>
 		<div
@@ -280,7 +244,7 @@ const messages = defineMessages({
 					</TagItem>
 					<div
 						v-if="world.type === 'singleplayer'"
-						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+						class="text-sm text-secondary flex items-center gap-1 font-semibold"
 					>
 						<UserIcon
 							aria-hidden="true"
@@ -360,16 +324,16 @@ const messages = defineMessages({
 						</template>
 						<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
 					</div>
-					<template v-if="instanceId">
+					<template v-if="instancePath">
 						•
 						<router-link
 							class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
-							:to="`/instance/${instanceId}`"
+							:to="`/instance/${instancePath}`"
 						>
 							<Avatar
 								:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
 								size="16px"
-								:tint-by="instanceId"
+								:tint-by="instancePath"
 								class="shrink-0"
 							/>
 							<span class="truncate">{{ instanceName }}</span>
@@ -456,14 +420,14 @@ const messages = defineMessages({
 						:options="[
 							{
 								id: 'play-instance',
-								shown: !!instanceId,
+								shown: !!instancePath,
 								disabled: playingInstance,
 								action: () => emit('play-instance'),
 							},
 							{
 								id: 'open-instance',
-								shown: !!instanceId,
-								action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+								shown: !!instancePath,
+								action: () => router.push(encodeURI(`/instance/${instancePath}`)),
 							},
 							{
 								id: 'refresh',
@@ -478,7 +442,7 @@ const messages = defineMessages({
 							{
 								id: 'edit',
 								action: () => emit('edit'),
-								shown: !instanceId,
+								shown: !instancePath,
 								disabled: locked || managed,
 								tooltip: locked
 									? formatMessage(messages.worldInUse)
@@ -493,14 +457,14 @@ const messages = defineMessages({
 							},
 							{
 								divider: true,
-								shown: !!instanceId,
+								shown: !!instancePath,
 							},
 							{
 								id: 'dont-show-on-home',
-								shown: !!instanceId,
+								shown: !!instancePath,
 								action: () => {
 									set_world_display_status(
-										instanceId,
+										instancePath,
 										world.type,
 										getWorldIdentifier(world),
 										'hidden',
@@ -509,21 +473,16 @@ const messages = defineMessages({
 									})
 								},
 							},
-							{
-								id: 'create-shortcut',
-								shown: !!shortcutInstanceId,
-								action: () => createShortcut(),
-							},
 							{
 								divider: true,
-								shown: !instanceId,
+								shown: !instancePath,
 							},
 							{
 								id: 'delete',
 								color: 'red',
 								hoverFilled: true,
 								action: () => emit('delete'),
-								shown: !instanceId,
+								shown: !instancePath,
 								disabled: locked || managed,
 								tooltip: locked
 									? formatMessage(messages.worldInUse)
@@ -558,10 +517,6 @@ const messages = defineMessages({
 							<UpdatedIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.refreshButton) }}
 						</template>
-						<template #create-shortcut>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(messages.createShortcut) }}
-						</template>
 						<template #dont-show-on-home>
 							<XIcon aria-hidden="true" />
 							{{ formatMessage(messages.dontShowOnHome) }}

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -12,11 +12,7 @@ import { ref } from 'vue'
 
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
-import {
-	add_server_to_instance,
-	type ServerPackStatus,
-	type ServerWorld,
-} from '@/helpers/worlds.ts'
+import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -39,8 +35,8 @@ async function addServer(play: boolean) {
 	const serverName = name.value ? name.value : address.value
 	const resourcePackStatus = resourcePack.value
 	const index =
-		(await add_server_to_instance(
-			props.instance.id,
+		(await add_server_to_profile(
+			props.instance.path,
 			serverName,
 			address.value,
 			resourcePackStatus,

apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import { TrashIcon, XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-import type { World } from '@/helpers/worlds.ts'
-
-const { formatMessage } = useVIntl()
-
-const props = defineProps<{
-	world: World | null
-}>()
-
-const emit = defineEmits<{
-	confirm: [world: World]
-}>()
-
-const messages = defineMessages({
-	removeServerTitle: {
-		id: 'app.instance.worlds.remove-server-modal.title',
-		defaultMessage: 'Remove server',
-	},
-	deleteWorldTitle: {
-		id: 'app.instance.worlds.delete-world-modal.title',
-		defaultMessage: 'Delete world',
-	},
-	removeServerWarningHeader: {
-		id: 'app.instance.worlds.remove-server-modal.warning-header',
-		defaultMessage: 'Removing {name}',
-	},
-	deleteWorldWarningHeader: {
-		id: 'app.instance.worlds.delete-world-modal.warning-header',
-		defaultMessage: 'Deleting {name}',
-	},
-	removeServerWarningBody: {
-		id: 'app.instance.worlds.remove-server-modal.warning-body',
-		defaultMessage:
-			'This server will be removed from your server list and from the in-game server list. You can add it again later if you know the address.',
-	},
-	deleteWorldWarningBody: {
-		id: 'app.instance.worlds.delete-world-modal.warning-body',
-		defaultMessage:
-			'This world will be permanently deleted from this instance. This action cannot be undone.',
-	},
-	removeServerButton: {
-		id: 'app.instance.worlds.remove-server-modal.remove-button',
-		defaultMessage: 'Remove server',
-	},
-	deleteWorldButton: {
-		id: 'app.instance.worlds.delete-world-modal.delete-button',
-		defaultMessage: 'Delete world',
-	},
-})
-
-const modal = ref<InstanceType<typeof NewModal>>()
-
-const isServer = computed(() => props.world?.type === 'server')
-const isSingleplayer = computed(() => props.world?.type === 'singleplayer')
-const titleMessage = computed(() =>
-	isServer.value ? messages.removeServerTitle : messages.deleteWorldTitle,
-)
-const actionMessage = computed(() =>
-	isServer.value ? messages.removeServerButton : messages.deleteWorldButton,
-)
-const warningHeaderMessage = computed(() =>
-	isServer.value ? messages.removeServerWarningHeader : messages.deleteWorldWarningHeader,
-)
-const warningBodyMessage = computed(() =>
-	isServer.value ? messages.removeServerWarningBody : messages.deleteWorldWarningBody,
-)
-
-function show() {
-	modal.value?.show()
-}
-
-function hide() {
-	modal.value?.hide()
-}
-
-function confirm() {
-	if (!props.world) return
-	emit('confirm', props.world)
-	hide()
-}
-
-defineExpose({ show, hide })
-</script>
-
-<template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" fade="danger" max-width="500px">
-		<div class="flex flex-col gap-4">
-			<Admonition
-				type="critical"
-				:header="formatMessage(warningHeaderMessage, { name: world?.name })"
-			>
-				{{ formatMessage(warningBodyMessage) }}
-			</Admonition>
-		</div>
-
-		<template #actions>
-			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isServer && !isSingleplayer" @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(actionMessage) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-	</NewModal>
-</template>

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -15,7 +15,7 @@ import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import {
 	type DisplayStatus,
-	edit_server_in_instance,
+	edit_server_in_profile,
 	type ServerPackStatus,
 	type ServerWorld,
 	set_world_display_status,
@@ -46,8 +46,8 @@ const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal
 async function saveServer() {
 	const serverName = name.value ? name.value : address.value
 	const resourcePackStatus = resourcePack.value
-	await edit_server_in_instance(
-		props.instance.id,
+	await edit_server_in_profile(
+		props.instance.path,
 		index.value,
 		serverName,
 		address.value,
@@ -56,7 +56,7 @@ async function saveServer() {
 
 	if (newDisplayStatus.value !== displayStatus.value) {
 		await set_world_display_status(
-			props.instance.id,
+			props.instance.path,
 			'server',
 			address.value,
 			newDisplayStatus.value,

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -40,14 +40,14 @@ const hideFromHome = ref(false)
 const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))
 
 async function saveWorld() {
-	await rename_world(props.instance.id, path.value, name.value).catch(handleError)
+	await rename_world(props.instance.path, path.value, name.value).catch(handleError)
 
 	if (removeIcon.value) {
-		await reset_world_icon(props.instance.id, path.value).catch(handleError)
+		await reset_world_icon(props.instance.path, path.value).catch(handleError)
 	}
 	if (newDisplayStatus.value !== displayStatus.value) {
 		await set_world_display_status(
-			props.instance.id,
+			props.instance.path,
 			'singleplayer',
 			path.value,
 			newDisplayStatus.value,

apps/app-frontend/src/composables/browse/install-job-notifications.ts

@@ -1,745 +0,0 @@
-import { CheckIcon, CopyIcon, UpdatedIcon } from '@modrinth/assets'
-import {
-	defineMessages,
-	type PopupNotificationButton,
-	type PopupNotificationProgressItem,
-	type PopupNotificationProgressType,
-	useVIntl,
-} from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { computed, ref } from 'vue'
-import type { Router } from 'vue-router'
-
-import { install_job_listener } from '@/helpers/events'
-import {
-	install_job_dismiss,
-	install_job_list,
-	install_job_retry,
-	install_job_support_details,
-	installJobInstanceId,
-	type InstallJobSnapshot,
-	type InstallJobStatus,
-	type InstallPhaseId,
-	type InstallProgress,
-} from '@/helpers/install'
-import { get_many as getInstances } from '@/helpers/instance'
-
-const messages = defineMessages({
-	installs: {
-		id: 'app.action-bar.installs',
-		defaultMessage: 'Installs',
-	},
-	retry: {
-		id: 'app.action-bar.install.retry',
-		defaultMessage: 'Retry',
-	},
-	copyDetails: {
-		id: 'app.action-bar.install.copy-details',
-		defaultMessage: 'Copy details',
-	},
-	copied: {
-		id: 'app.action-bar.install.copied-details',
-		defaultMessage: 'Copied',
-	},
-	dismiss: {
-		id: 'app.action-bar.install.dismiss',
-		defaultMessage: 'Dismiss',
-	},
-	openInstance: {
-		id: 'app.action-bar.install.open-instance',
-		defaultMessage: 'Open instance',
-	},
-	unknownInstance: {
-		id: 'app.action-bar.install.unknown-instance',
-		defaultMessage: 'Unknown instance',
-	},
-})
-
-const phaseMessages = defineMessages({
-	preparing_instance: {
-		id: 'app.install.phase.preparing_instance',
-		defaultMessage: 'Queued to install',
-	},
-	resolving_pack: {
-		id: 'app.install.phase.resolving_pack',
-		defaultMessage: 'Resolving content',
-	},
-	downloading_pack_file: {
-		id: 'app.install.phase.downloading_pack_file',
-		defaultMessage: 'Downloading pack file',
-	},
-	reading_pack_manifest: {
-		id: 'app.install.phase.reading_pack_manifest',
-		defaultMessage: 'Reading pack manifest',
-	},
-	downloading_content: {
-		id: 'app.install.phase.downloading_content',
-		defaultMessage: 'Downloading content',
-	},
-	extracting_overrides: {
-		id: 'app.install.phase.extracting_overrides',
-		defaultMessage: 'Extracting overrides',
-	},
-	resolving_minecraft: {
-		id: 'app.install.phase.resolving_minecraft',
-		defaultMessage: 'Resolving Minecraft',
-	},
-	resolving_loader: {
-		id: 'app.install.phase.resolving_loader',
-		defaultMessage: 'Resolving loader',
-	},
-	preparing_java: {
-		id: 'app.install.phase.preparing_java',
-		defaultMessage: 'Preparing Java',
-	},
-	downloading_minecraft: {
-		id: 'app.install.phase.downloading_minecraft',
-		defaultMessage: 'Downloading Minecraft',
-	},
-	running_loader_processors: {
-		id: 'app.install.phase.running_loader_processors',
-		defaultMessage: 'Running loader processors',
-	},
-	finalizing: {
-		id: 'app.install.phase.finalizing',
-		defaultMessage: 'Finalizing',
-	},
-	rolling_back: {
-		id: 'app.install.phase.rolling_back',
-		defaultMessage: 'Rolling back',
-	},
-})
-
-const javaStepMessages = defineMessages({
-	resolving: {
-		id: 'app.install.phase.preparing_java.resolving',
-		defaultMessage: 'Preparing Java {version}',
-	},
-	fetching_metadata: {
-		id: 'app.install.phase.preparing_java.fetching-metadata',
-		defaultMessage: 'Fetching Java {version}',
-	},
-	downloading: {
-		id: 'app.install.phase.preparing_java.downloading',
-		defaultMessage: 'Downloading Java {version}',
-	},
-	extracting: {
-		id: 'app.install.phase.preparing_java.extracting',
-		defaultMessage: 'Extracting Java {version}',
-	},
-	validating: {
-		id: 'app.install.phase.preparing_java.validating',
-		defaultMessage: 'Validating Java {version}',
-	},
-})
-
-const failureSummaryMessages = defineMessages({
-	canceled: {
-		id: 'app.action-bar.install.summary.canceled',
-		defaultMessage: 'Canceled',
-	},
-	appClosed: {
-		id: 'app.action-bar.install.summary.app-closing',
-		defaultMessage: 'Canceled due to app closing',
-	},
-	downloadFailed: {
-		id: 'app.action-bar.install.summary.download-failed',
-		defaultMessage: "Download couldn't finish",
-	},
-	modrinthUnreachable: {
-		id: 'app.action-bar.install.summary.modrinth-unreachable',
-		defaultMessage: "Couldn't reach Modrinth",
-	},
-	packDownloadFailed: {
-		id: 'app.action-bar.install.summary.pack-download-failed',
-		defaultMessage: "Couldn't download pack",
-	},
-	badModpackFile: {
-		id: 'app.action-bar.install.summary.bad-modpack-file',
-		defaultMessage: "Couldn't read modpack",
-	},
-	invalidModpack: {
-		id: 'app.action-bar.install.summary.invalid-modpack',
-		defaultMessage: 'Modpack data invalid',
-	},
-	contentDownloadFailed: {
-		id: 'app.action-bar.install.summary.content-download-failed',
-		defaultMessage: "Couldn't download files",
-	},
-	corruptDownload: {
-		id: 'app.action-bar.install.summary.corrupt-download',
-		defaultMessage: 'Downloaded file is corrupt',
-	},
-	invalidModpackFiles: {
-		id: 'app.action-bar.install.summary.invalid-modpack-files',
-		defaultMessage: 'Modpack files have invalid metadata',
-	},
-	noWritePermission: {
-		id: 'app.action-bar.install.summary.no-write-permission',
-		defaultMessage: 'No permission to write',
-	},
-	couldNotSaveFiles: {
-		id: 'app.action-bar.install.summary.could-not-save-files',
-		defaultMessage: "Couldn't save files",
-	},
-	invalidFilePath: {
-		id: 'app.action-bar.install.summary.invalid-file-path',
-		defaultMessage: 'File path is invalid',
-	},
-	instanceNotFound: {
-		id: 'app.action-bar.install.summary.instance-not-found',
-		defaultMessage: "Instance couldn't be found",
-	},
-	cleanupIncomplete: {
-		id: 'app.action-bar.install.summary.cleanup-incomplete',
-		defaultMessage: "Cleanup didn't finish",
-	},
-	javaSetupFailed: {
-		id: 'app.action-bar.install.summary.java-setup-failed',
-		defaultMessage: "Java setup couldn't finish",
-	},
-	minecraftSetupFailed: {
-		id: 'app.action-bar.install.summary.minecraft-setup-failed',
-		defaultMessage: 'Minecraft setup failed',
-	},
-	loaderSetupFailed: {
-		id: 'app.action-bar.install.summary.loader-setup-failed',
-		defaultMessage: 'Loader setup failed',
-	},
-	localDataError: {
-		id: 'app.action-bar.install.summary.local-data-error',
-		defaultMessage: "Couldn't update local data",
-	},
-	unexpectedError: {
-		id: 'app.action-bar.install.summary.unexpected-error',
-		defaultMessage: 'Something went wrong',
-	},
-})
-
-const visibleJobStatuses = new Set<InstallJobStatus>(['queued', 'running', 'failed', 'interrupted'])
-const copyDetailsStallMs = 30_000
-
-interface ProgressSnapshot {
-	signature: string
-	changedAt: number
-	timeout: number | null
-}
-
-function getDisplayIconUrl(icon: string | null | undefined): string | null {
-	if (!icon) return null
-	if (/^(https?:|data:|blob:|asset:|tauri:)/.test(icon)) return icon
-	return convertFileSrc(icon)
-}
-
-export async function useInstallJobNotifications(opts: {
-	router: Router
-	handleError: (err: unknown) => void
-	onChange: () => void
-}) {
-	const { formatMessage } = useVIntl()
-	const jobs = ref<InstallJobSnapshot[]>([])
-	const iconUrls = ref<Record<string, string | null>>({})
-	const instanceNames = ref<Record<string, string>>({})
-	const copiedJobIds = ref<Set<string>>(new Set())
-	const jobOrder = new Map<string, number>()
-	let refreshRequest = 0
-	let metadataRequest = 0
-	let nextJobOrder = 0
-	const copiedResetTimeouts = new Map<string, number>()
-	const progressSnapshots = new Map<string, ProgressSnapshot>()
-
-	function getTitle(job: InstallJobSnapshot): string {
-		if (job.display?.title) return job.display.title
-		if (job.details.type === 'instance') return job.details.name
-		if (job.details.type === 'modpack' && job.details.title) return job.details.title
-		const instanceId = installJobInstanceId(job)
-		return (
-			(instanceId ? instanceNames.value[instanceId] : null) ??
-			formatMessage(messages.unknownInstance)
-		)
-	}
-
-	function getText(job: InstallJobSnapshot): string {
-		if (job.status === 'failed' || job.status === 'interrupted') {
-			return getFailureSummary(job)
-		}
-		if (job.phase === 'preparing_java' && job.details.type === 'java') {
-			return formatMessage(javaStepMessages[job.details.step], {
-				version: job.details.major_version,
-			})
-		}
-		return formatMessage(phaseMessages[job.phase])
-	}
-
-	function getFailureSummary(job: InstallJobSnapshot): string {
-		const code = job.error?.code
-		const phase = job.error?.phase ?? job.phase
-
-		if (code === 'app_closed' || (job.status === 'interrupted' && code === 'interrupted')) {
-			return formatMessage(failureSummaryMessages.appClosed)
-		}
-		if (code === 'canceled') {
-			return formatMessage(failureSummaryMessages.canceled)
-		}
-		if (job.rollback_error || code === 'rollback_error') {
-			return formatMessage(failureSummaryMessages.cleanupIncomplete)
-		}
-		if (hasPermissionError(job)) {
-			return formatMessage(failureSummaryMessages.noWritePermission)
-		}
-
-		switch (code) {
-			case 'network_error':
-				return formatMessage(
-					phase === 'downloading_pack_file'
-						? failureSummaryMessages.packDownloadFailed
-						: failureSummaryMessages.downloadFailed,
-				)
-			case 'api_error':
-				return formatMessage(failureSummaryMessages.modrinthUnreachable)
-			case 'pack_error':
-				return formatMessage(
-					phase === 'downloading_pack_file'
-						? failureSummaryMessages.packDownloadFailed
-						: failureSummaryMessages.invalidModpack,
-				)
-			case 'archive_error':
-				return formatMessage(failureSummaryMessages.badModpackFile)
-			case 'parse_error':
-				return formatMessage(failureSummaryMessages.invalidModpack)
-			case 'content_error':
-				return formatMessage(failureSummaryMessages.invalidModpackFiles)
-			case 'hash_error':
-				return formatMessage(failureSummaryMessages.corruptDownload)
-			case 'filesystem_error':
-				return formatMessage(failureSummaryMessages.couldNotSaveFiles)
-			case 'path_error':
-				return formatMessage(failureSummaryMessages.invalidFilePath)
-			case 'instance_error':
-				return formatMessage(failureSummaryMessages.instanceNotFound)
-			case 'java_error':
-				return formatMessage(failureSummaryMessages.javaSetupFailed)
-			case 'loader_error':
-			case 'processor_error':
-				return formatMessage(failureSummaryMessages.loaderSetupFailed)
-			case 'database_error':
-				return formatMessage(failureSummaryMessages.localDataError)
-			case 'launcher_error':
-			case 'metadata_error':
-				return getFailureSummaryForPhase(phase)
-			default:
-				return getFailureSummaryForPhase(phase)
-		}
-	}
-
-	function getFailureSummaryForPhase(phase: InstallPhaseId): string {
-		switch (phase) {
-			case 'downloading_pack_file':
-				return formatMessage(failureSummaryMessages.packDownloadFailed)
-			case 'resolving_pack':
-			case 'reading_pack_manifest':
-				return formatMessage(failureSummaryMessages.invalidModpack)
-			case 'downloading_content':
-				return formatMessage(failureSummaryMessages.contentDownloadFailed)
-			case 'extracting_overrides':
-				return formatMessage(failureSummaryMessages.couldNotSaveFiles)
-			case 'resolving_minecraft':
-			case 'downloading_minecraft':
-				return formatMessage(failureSummaryMessages.minecraftSetupFailed)
-			case 'resolving_loader':
-			case 'running_loader_processors':
-				return formatMessage(failureSummaryMessages.loaderSetupFailed)
-			case 'preparing_java':
-				return formatMessage(failureSummaryMessages.javaSetupFailed)
-			case 'preparing_instance':
-				return formatMessage(failureSummaryMessages.instanceNotFound)
-			case 'rolling_back':
-				return formatMessage(failureSummaryMessages.cleanupIncomplete)
-			default:
-				return formatMessage(failureSummaryMessages.unexpectedError)
-		}
-	}
-
-	function hasPermissionError(job: InstallJobSnapshot): boolean {
-		const message = job.error?.message.toLowerCase() ?? ''
-		return (
-			message.includes('permission denied') ||
-			message.includes('access is denied') ||
-			message.includes('operation not permitted')
-		)
-	}
-
-	function getProgressType(job: InstallJobSnapshot): PopupNotificationProgressType | undefined {
-		if (!getEffectiveProgress(job)) return undefined
-		if (
-			job.phase === 'preparing_java' &&
-			job.details.type === 'java' &&
-			job.details.step === 'downloading'
-		) {
-			return 'bytes'
-		}
-		if (job.phase === 'downloading_content') {
-			return job.progress?.secondary ? 'bytes' : 'count'
-		}
-		if (
-			job.phase === 'downloading_pack_file' ||
-			job.phase === 'extracting_overrides' ||
-			job.phase === 'downloading_minecraft'
-		) {
-			return 'bytes'
-		}
-		if (job.phase === 'running_loader_processors') {
-			return 'count'
-		}
-		return 'percentage'
-	}
-
-	function getEffectiveProgress(job: InstallJobSnapshot): InstallProgress | null | undefined {
-		if (job.phase === 'downloading_content' && job.progress?.secondary) {
-			return job.progress.secondary
-		}
-
-		return job.progress
-	}
-
-	function getProgress(job: InstallJobSnapshot): number {
-		if (job.status === 'succeeded') return 1
-		if (job.status === 'failed' || job.status === 'interrupted') return 0
-		const progress = getEffectiveProgress(job)
-		if (!progress || progress.total <= 0) return 0
-		return Math.max(0, Math.min(1, progress.current / progress.total))
-	}
-
-	function isTerminalJob(job: InstallJobSnapshot): boolean {
-		return job.status === 'failed' || job.status === 'interrupted'
-	}
-
-	function canShowStalledProgressDetails(job: InstallJobSnapshot): boolean {
-		return (
-			job.status === 'running' &&
-			job.phase !== 'preparing_instance' &&
-			job.phase !== 'finalizing' &&
-			job.phase !== 'rolling_back'
-		)
-	}
-
-	function getJobSortRank(job: InstallJobSnapshot): number {
-		if (isTerminalJob(job)) return 0
-		if (job.status === 'queued' || job.phase === 'preparing_instance') return 2
-		return 1
-	}
-
-	function progressSignature(job: InstallJobSnapshot): string {
-		const progress = job.progress
-		const secondary = progress?.secondary
-		return [
-			job.status,
-			job.phase,
-			JSON.stringify(job.details),
-			progress?.current ?? '',
-			progress?.total ?? '',
-			secondary?.current ?? '',
-			secondary?.total ?? '',
-		].join(':')
-	}
-
-	function clearCopied(jobId: string) {
-		if (!copiedJobIds.value.has(jobId)) {
-			return
-		}
-
-		const timeout = copiedResetTimeouts.get(jobId)
-		if (timeout != null) {
-			window.clearTimeout(timeout)
-			copiedResetTimeouts.delete(jobId)
-		}
-
-		const nextCopiedJobIds = new Set(copiedJobIds.value)
-		nextCopiedJobIds.delete(jobId)
-		copiedJobIds.value = nextCopiedJobIds
-	}
-
-	function clearProgressSnapshot(jobId: string) {
-		const snapshot = progressSnapshots.get(jobId)
-		if (snapshot?.timeout != null) {
-			window.clearTimeout(snapshot.timeout)
-		}
-		progressSnapshots.delete(jobId)
-	}
-
-	function scheduleStaleProgressRefresh(jobId: string) {
-		const snapshot = progressSnapshots.get(jobId)
-		if (!snapshot) {
-			return
-		}
-
-		snapshot.timeout = window.setTimeout(() => {
-			const snapshot = progressSnapshots.get(jobId)
-			if (!snapshot) {
-				return
-			}
-
-			snapshot.timeout = null
-			opts.onChange()
-		}, copyDetailsStallMs)
-	}
-
-	function syncProgressSnapshots(nextJobs: InstallJobSnapshot[]) {
-		const trackedJobIds = new Set<string>()
-		const now = Date.now()
-
-		for (const job of nextJobs) {
-			if (!canShowStalledProgressDetails(job)) {
-				continue
-			}
-
-			trackedJobIds.add(job.job_id)
-			const signature = progressSignature(job)
-			const snapshot = progressSnapshots.get(job.job_id)
-			if (snapshot?.signature === signature) {
-				continue
-			}
-
-			clearProgressSnapshot(job.job_id)
-			clearCopied(job.job_id)
-			progressSnapshots.set(job.job_id, {
-				signature,
-				changedAt: now,
-				timeout: null,
-			})
-			scheduleStaleProgressRefresh(job.job_id)
-		}
-
-		for (const jobId of progressSnapshots.keys()) {
-			if (!trackedJobIds.has(jobId)) {
-				clearProgressSnapshot(jobId)
-			}
-		}
-	}
-
-	function hasStalledProgress(job: InstallJobSnapshot): boolean {
-		const snapshot = progressSnapshots.get(job.job_id)
-		return !!snapshot && Date.now() - snapshot.changedAt >= copyDetailsStallMs
-	}
-
-	function shouldShowCopyDetails(job: InstallJobSnapshot): boolean {
-		return isTerminalJob(job) || (canShowStalledProgressDetails(job) && hasStalledProgress(job))
-	}
-
-	function isCopied(job: InstallJobSnapshot): boolean {
-		return copiedJobIds.value.has(job.job_id)
-	}
-
-	function setCopied(job: InstallJobSnapshot) {
-		copiedJobIds.value = new Set([...copiedJobIds.value, job.job_id])
-		const existingTimeout = copiedResetTimeouts.get(job.job_id)
-		if (existingTimeout != null) {
-			window.clearTimeout(existingTimeout)
-		}
-		copiedResetTimeouts.set(
-			job.job_id,
-			window.setTimeout(() => {
-				copiedResetTimeouts.delete(job.job_id)
-				if (!copiedJobIds.value.has(job.job_id)) {
-					return
-				}
-				const nextCopiedJobIds = new Set(copiedJobIds.value)
-				nextCopiedJobIds.delete(job.job_id)
-				copiedJobIds.value = nextCopiedJobIds
-				opts.onChange()
-			}, 1_000),
-		)
-		opts.onChange()
-	}
-
-	async function copyJobDetails(job: InstallJobSnapshot) {
-		const details = await install_job_support_details(job.job_id).catch((error) => {
-			opts.handleError(error)
-			return null
-		})
-		if (!details) {
-			return
-		}
-		try {
-			await navigator.clipboard.writeText(details)
-			setCopied(job)
-		} catch (error) {
-			opts.handleError(error)
-		}
-	}
-
-	function getButtons(job: InstallJobSnapshot): PopupNotificationButton[] {
-		const buttons: PopupNotificationButton[] = []
-
-		if (isTerminalJob(job)) {
-			buttons.push({
-				label: formatMessage(messages.retry),
-				icon: UpdatedIcon,
-				color: 'brand',
-				keepOpen: true,
-				action: async () => {
-					await install_job_retry(job.job_id).catch(opts.handleError)
-					await refresh()
-				},
-			})
-		}
-
-		if (shouldShowCopyDetails(job)) {
-			const copied = isCopied(job)
-			buttons.push({
-				label: formatMessage(copied ? messages.copied : messages.copyDetails),
-				icon: copied ? CheckIcon : CopyIcon,
-				color: 'standard',
-				keepOpen: true,
-				action: async () => {
-					await copyJobDetails(job)
-				},
-			})
-		}
-
-		return buttons
-	}
-
-	function setJobs(nextJobs: InstallJobSnapshot[]) {
-		for (const job of nextJobs) {
-			if (!jobOrder.has(job.job_id)) {
-				jobOrder.set(job.job_id, nextJobOrder++)
-			}
-		}
-
-		const visibleJobs = nextJobs.filter((job) => visibleJobStatuses.has(job.status))
-		syncProgressSnapshots(visibleJobs)
-
-		jobs.value = visibleJobs.sort(
-			(a, b) =>
-				getJobSortRank(a) - getJobSortRank(b) ||
-				a.created.localeCompare(b.created) ||
-				(jobOrder.get(a.job_id) ?? 0) - (jobOrder.get(b.job_id) ?? 0),
-		)
-	}
-
-	const progressItems = computed<PopupNotificationProgressItem[]>(() =>
-		jobs.value.map((job) => {
-			const progress = getEffectiveProgress(job)
-
-			return {
-				id: job.job_id,
-				title: getTitle(job),
-				text: getText(job),
-				iconUrl: iconUrls.value[job.job_id] ?? null,
-				progress: getProgress(job),
-				waiting: !job.progress && ['queued', 'running'].includes(job.status),
-				showProgress: !isTerminalJob(job),
-				wrapText: isTerminalJob(job),
-				progressType: isTerminalJob(job) ? undefined : getProgressType(job),
-				progressCurrent: isTerminalJob(job) ? undefined : progress?.current,
-				progressTotal: isTerminalJob(job) ? undefined : progress?.total,
-				buttons: getButtons(job),
-				onDismiss: isTerminalJob(job)
-					? async () => {
-							await install_job_dismiss(job.job_id).catch(opts.handleError)
-							await refresh()
-						}
-					: undefined,
-			}
-		}),
-	)
-
-	const buttons = computed<PopupNotificationButton[] | undefined>(() => undefined)
-
-	async function refreshMetadata(notify = true) {
-		const request = ++metadataRequest
-		const sourceJobs = jobs.value
-		const instanceIds = Array.from(
-			new Set(
-				sourceJobs
-					.map((job) => installJobInstanceId(job))
-					.filter((instanceId): instanceId is string => !!instanceId),
-			),
-		)
-		const instances = instanceIds.length
-			? await getInstances(instanceIds).catch((error) => {
-					opts.handleError(error)
-					return []
-				})
-			: []
-
-		if (request !== metadataRequest) {
-			return
-		}
-
-		const instanceIconUrls = new Map(
-			instances.map((instance) => [instance.id, getDisplayIconUrl(instance.icon_path)]),
-		)
-		instanceNames.value = Object.fromEntries(
-			instances.map((instance) => [instance.id, instance.name]),
-		)
-		iconUrls.value = Object.fromEntries(
-			sourceJobs.map((job) => [
-				job.job_id,
-				getDisplayIconUrl(job.display?.icon) ??
-					instanceIconUrls.get(installJobInstanceId(job) ?? '') ??
-					null,
-			]),
-		)
-
-		if (notify) {
-			opts.onChange()
-		}
-	}
-
-	async function refresh(notify = true) {
-		const request = ++refreshRequest
-		const nextJobs = await install_job_list(false).catch((error) => {
-			opts.handleError(error)
-			return []
-		})
-
-		if (request !== refreshRequest) {
-			return
-		}
-
-		setJobs(nextJobs)
-		await refreshMetadata(false)
-
-		if (request !== refreshRequest) {
-			return
-		}
-
-		if (notify) {
-			opts.onChange()
-		}
-	}
-
-	function applyJobUpdate(job: InstallJobSnapshot) {
-		refreshRequest += 1
-		const existingJob = jobs.value.find((item) => item.job_id === job.job_id)
-		if (existingJob && existingJob.modified.localeCompare(job.modified) > 0) {
-			return
-		}
-
-		setJobs([...jobs.value.filter((item) => item.job_id !== job.job_id), job])
-		opts.onChange()
-		void refreshMetadata()
-	}
-
-	await refresh(false)
-	const unlisten = await install_job_listener((job: InstallJobSnapshot) => applyJobUpdate(job))
-
-	return {
-		active: computed(() => jobs.value.length > 0),
-		title: computed(() => formatMessage(messages.installs)),
-		progressItems,
-		buttons,
-		refresh,
-		dispose: () => {
-			for (const timeout of copiedResetTimeouts.values()) {
-				window.clearTimeout(timeout)
-			}
-			for (const jobId of progressSnapshots.keys()) {
-				clearProgressSnapshot(jobId)
-			}
-			unlisten()
-		},
-	}
-}

apps/app-frontend/src/composables/browse/use-app-server-browse.ts

@@ -2,24 +2,19 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlayIcon, PlusIcon, StopCircleIcon } from '@modrinth/assets'
 import type { CardAction } from '@modrinth/ui'
 import { commonMessages, defineMessages, useDebugLogger, useVIntl } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { ComputedRef, Ref } from 'vue'
 import { onUnmounted, ref, shallowRef } from 'vue'
 import type { Router } from 'vue-router'
 
-import {
-	fetchCachedServerStatus,
-	getFreshCachedServerStatus,
-} from '@/composables/instances/use-server-status-query'
 import { process_listener } from '@/helpers/events'
-import { kill, list as listInstances } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, list as listInstances } from '@/helpers/profile.js'
 import type { GameInstance } from '@/helpers/types'
-import { add_server_to_instance, getServerAddress } from '@/helpers/worlds'
+import { add_server_to_profile, getServerLatency } from '@/helpers/worlds'
+import { getServerAddress } from '@/store/install.js'
 
 interface BrowseServerInstance {
-	id: string
 	name: string
 	path: string
 }
@@ -70,13 +65,14 @@ const messages = defineMessages({
 
 export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 	const { formatMessage } = useVIntl()
-	const queryClient = useQueryClient()
 	const debugLog = useDebugLogger('BrowseServer')
 	const serverPings = shallowRef<Record<string, number | undefined>>({})
+	const serverPingCache = new Map<string, number | undefined>()
+	const pendingServerPings = new Map<string, Promise<number | undefined>>()
 	const runningServerProjects = ref<Record<string, string>>({})
 	const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
 	const contextMenuRef = ref<ContextMenuHandle | null>(null)
-	let serverPingsActive = true
+	let serverPingCacheActive = true
 	let unlistenProcesses: (() => void) | null = null
 
 	async function checkServerRunningStates(hits: Labrinth.Search.v3.ResultSearchProject[]) {
@@ -87,11 +83,13 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		})
 		const newRunning: Record<string, string> = {}
 		for (const hit of hits) {
-			const inst = packs.find((pack: GameInstance) => pack.link?.project_id === hit.project_id)
+			const inst = packs.find(
+				(pack: GameInstance) => pack.linked_data?.project_id === hit.project_id,
+			)
 			if (inst) {
-				const processes = await get_by_instance_id(inst.id).catch(() => [])
+				const processes = await get_by_profile_path(inst.path).catch(() => [])
 				if (Array.isArray(processes) && processes.length > 0) {
-					newRunning[hit.project_id] = inst.id
+					newRunning[hit.project_id] = inst.path
 				}
 			}
 		}
@@ -101,9 +99,9 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 
 	async function handleStopServerProject(projectId: string) {
 		debugLog('handleStopServerProject', projectId)
-		const instanceId = runningServerProjects.value[projectId]
-		if (!instanceId) return
-		await kill(instanceId).catch(() => {})
+		const instancePath = runningServerProjects.value[projectId]
+		if (!instancePath) return
+		await kill(instancePath).catch(() => {})
 		const { [projectId]: _, ...rest } = runningServerProjects.value
 		runningServerProjects.value = rest
 	}
@@ -120,10 +118,9 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		if (!address) return
 
 		if (options.instance.value) {
-			const instanceId = options.instance.value.id
 			try {
-				await add_server_to_instance(
-					instanceId,
+				await add_server_to_profile(
+					options.instance.value.path,
 					project.name,
 					address,
 					'prompt',
@@ -131,7 +128,6 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 					project.minecraft_java_server?.content?.kind,
 				)
 				options.newlyInstalled.value.push(project.project_id)
-				await queryClient.invalidateQueries({ queryKey: ['worlds', instanceId] })
 			} catch (error) {
 				options.handleError(error)
 			}
@@ -149,26 +145,37 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		})
 		const nextPings = { ...serverPings.value }
 		for (const { hit, address } of pingsToFetch) {
-			const cachedStatus = getFreshCachedServerStatus(queryClient, address)
-			if (cachedStatus) {
-				nextPings[hit.project_id] = cachedStatus.ping
+			if (serverPingCache.has(address)) {
+				nextPings[hit.project_id] = serverPingCache.get(address)
 			}
 		}
 		serverPings.value = nextPings
 
 		await Promise.all(
 			pingsToFetch.map(async ({ hit, address }) => {
-				if (getFreshCachedServerStatus(queryClient, address)) return
+				if (serverPingCache.has(address)) return
 
-				try {
-					const status = await fetchCachedServerStatus(queryClient, address)
-					if (!serverPingsActive) return
-					serverPings.value = { ...serverPings.value, [hit.project_id]: status.ping }
-				} catch (error) {
-					console.error(`Failed to ping server ${address}:`, error)
-					if (!serverPingsActive) return
-					serverPings.value = { ...serverPings.value, [hit.project_id]: undefined }
+				let pending = pendingServerPings.get(address)
+				if (!pending) {
+					pending = getServerLatency(address)
+						.then((latency) => {
+							if (serverPingCacheActive) serverPingCache.set(address, latency)
+							return latency
+						})
+						.catch((error) => {
+							console.error(`Failed to ping server ${address}:`, error)
+							if (serverPingCacheActive) serverPingCache.set(address, undefined)
+							return undefined
+						})
+						.finally(() => {
+							pendingServerPings.delete(address)
+						})
+					pendingServerPings.set(address, pending)
 				}
+
+				const latency = await pending
+				if (!serverPingCacheActive) return
+				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
 			}),
 		)
 	}
@@ -282,11 +289,11 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		}
 	}
 
-	process_listener((event: { event: string; instance_id: string }) => {
+	process_listener((event: { event: string; profile_path_id: string }) => {
 		debugLog('process event', event)
 		if (event.event === 'finished') {
 			const projectId = Object.entries(runningServerProjects.value).find(
-				([, path]) => path === event.instance_id,
+				([, path]) => path === event.profile_path_id,
 			)?.[0]
 			if (projectId) {
 				const { [projectId]: _, ...rest } = runningServerProjects.value
@@ -300,8 +307,10 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 		.catch(options.handleError)
 
 	onUnmounted(() => {
-		serverPingsActive = false
+		serverPingCacheActive = false
 		unlistenProcesses?.()
+		serverPingCache.clear()
+		pendingServerPings.clear()
 	})
 
 	return {

apps/app-frontend/src/composables/instances/use-server-status-query.ts

@@ -1,50 +0,0 @@
-import type { QueryClient } from '@tanstack/vue-query'
-
-import {
-	get_server_status,
-	normalizeServerAddress,
-	type ProtocolVersion,
-	type ServerStatus,
-} from '@/helpers/worlds'
-
-export const SERVER_STATUS_CACHE_MS = 10 * 60 * 1000
-
-function getProtocolVersionKey(protocolVersion: ProtocolVersion | null) {
-	if (!protocolVersion) return 'default'
-	return `${protocolVersion.version}:${protocolVersion.legacy ? 'legacy' : 'modern'}`
-}
-
-export function getServerStatusQueryKey(
-	address: string,
-	protocolVersion: ProtocolVersion | null = null,
-) {
-	return [
-		'minecraft-server-status',
-		normalizeServerAddress(address) || address.trim().toLowerCase(),
-		getProtocolVersionKey(protocolVersion),
-	] as const
-}
-
-export function getFreshCachedServerStatus(
-	queryClient: QueryClient,
-	address: string,
-	protocolVersion: ProtocolVersion | null = null,
-) {
-	const queryKey = getServerStatusQueryKey(address, protocolVersion)
-	const updatedAt = queryClient.getQueryState(queryKey)?.dataUpdatedAt ?? 0
-	if (!updatedAt || Date.now() - updatedAt >= SERVER_STATUS_CACHE_MS) return undefined
-	return queryClient.getQueryData<ServerStatus>(queryKey)
-}
-
-export async function fetchCachedServerStatus(
-	queryClient: QueryClient,
-	address: string,
-	protocolVersion: ProtocolVersion | null = null,
-) {
-	return await queryClient.fetchQuery({
-		queryKey: getServerStatusQueryKey(address, protocolVersion),
-		queryFn: () => get_server_status(address, protocolVersion),
-		staleTime: SERVER_STATUS_CACHE_MS,
-		gcTime: SERVER_STATUS_CACHE_MS,
-	})
-}

apps/app-frontend/src/composables/intercom-positioning.ts

@@ -0,0 +1,121 @@
+import { computed, onUnmounted, ref } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+interface ThemeStore {
+	toggleSidebar: boolean
+	$subscribe: (callback: () => void) => () => void
+}
+
+interface IntercomBubblePosition {
+	horizontalPadding: number
+	verticalPadding: number
+}
+
+const APP_LEFT_NAV_WIDTH = '4rem'
+const APP_SIDEBAR_WIDTH = 300
+const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
+const INTERCOM_BUBBLE_WIDTH = 72
+const INTERCOM_BUBBLE_RIGHT_VAR = '--app-support-launcher-right'
+const INTERCOM_BUBBLE_BOTTOM_VAR = '--app-support-launcher-bottom'
+
+export function useIntercomPositioning({
+	route,
+	themeStore,
+}: {
+	route: RouteLocationNormalizedLoaded
+	themeStore: ThemeStore
+}) {
+	const sidebarToggled = ref(true)
+	const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
+		sidebarToggled.value = !themeStore.toggleSidebar
+	})
+
+	onUnmounted(unsubscribeSidebarToggle)
+
+	const forceSidebar = computed(
+		() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
+	)
+	const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
+	const defaultIntercomBubbleHorizontalPadding = computed(() =>
+		sidebarVisible.value
+			? APP_SIDEBAR_WIDTH + INTERCOM_BUBBLE_DEFAULT_PADDING
+			: INTERCOM_BUBBLE_DEFAULT_PADDING,
+	)
+	const intercomBubbleRequestedHorizontalPadding = ref<number | null>(null)
+	const intercomBubbleHorizontalPadding = computed(
+		() =>
+			intercomBubbleRequestedHorizontalPadding.value ??
+			defaultIntercomBubbleHorizontalPadding.value,
+	)
+	const intercomBubbleVerticalClearance = ref<number | null>(null)
+	const intercomBubblePosition = computed(() => ({
+		horizontalPadding: intercomBubbleHorizontalPadding.value,
+		verticalPadding: intercomBubbleVerticalClearance.value ?? INTERCOM_BUBBLE_DEFAULT_PADDING,
+	}))
+	const intercomBubbleHorizontalPaddingRequests = new Map<symbol, number>()
+	const intercomBubbleClearanceRequests = new Map<symbol, number>()
+
+	function requestIntercomBubbleHorizontalPadding(id: symbol, padding: number | null) {
+		if (padding === null) {
+			intercomBubbleHorizontalPaddingRequests.delete(id)
+		} else {
+			intercomBubbleHorizontalPaddingRequests.set(id, padding)
+		}
+
+		intercomBubbleRequestedHorizontalPadding.value =
+			intercomBubbleHorizontalPaddingRequests.size > 0
+				? Math.max(...intercomBubbleHorizontalPaddingRequests.values())
+				: null
+	}
+
+	function requestIntercomBubbleVerticalClearance(id: symbol, clearance: number | null) {
+		if (clearance === null) {
+			intercomBubbleClearanceRequests.delete(id)
+		} else {
+			intercomBubbleClearanceRequests.set(id, clearance)
+		}
+
+		intercomBubbleVerticalClearance.value =
+			intercomBubbleClearanceRequests.size > 0
+				? Math.max(...intercomBubbleClearanceRequests.values())
+				: null
+	}
+
+	function updateIntercomBubbleStyles({
+		horizontalPadding,
+		verticalPadding,
+	}: IntercomBubblePosition) {
+		if (typeof document === 'undefined') return
+
+		document.documentElement.style.setProperty(INTERCOM_BUBBLE_RIGHT_VAR, `${horizontalPadding}px`)
+		document.documentElement.style.setProperty(INTERCOM_BUBBLE_BOTTOM_VAR, `${verticalPadding}px`)
+	}
+
+	function clearIntercomBubbleStyles() {
+		if (typeof document === 'undefined') return
+
+		document.documentElement.style.removeProperty(INTERCOM_BUBBLE_RIGHT_VAR)
+		document.documentElement.style.removeProperty(INTERCOM_BUBBLE_BOTTOM_VAR)
+	}
+
+	return {
+		sidebarToggled,
+		forceSidebar,
+		sidebarVisible,
+		intercomBubblePosition,
+		updateIntercomBubbleStyles,
+		clearIntercomBubbleStyles,
+		pageContext: {
+			floatingActionBarOffsets: {
+				left: ref(APP_LEFT_NAV_WIDTH),
+				right: computed(() => (sidebarVisible.value ? `${APP_SIDEBAR_WIDTH}px` : '0px')),
+			},
+			intercomBubble: {
+				width: ref(INTERCOM_BUBBLE_WIDTH),
+				horizontalPadding: intercomBubbleHorizontalPadding,
+				requestHorizontalPadding: requestIntercomBubbleHorizontalPadding,
+				requestVerticalClearance: requestIntercomBubbleVerticalClearance,
+			},
+		},
+	}
+}

apps/app-frontend/src/composables/useInstanceConsole.ts

@@ -8,7 +8,7 @@ interface LogEntry {
 	filename: string
 	name?: string
 	log_type: string
-	output?: string | null
+	stdout?: string
 	age?: number
 	live?: boolean
 }
@@ -22,8 +22,8 @@ interface InstanceConsoleEntry {
 
 const instances = new Map<string, InstanceConsoleEntry>()
 
-function getOrCreate(instanceId: string): InstanceConsoleEntry {
-	let entry = instances.get(instanceId)
+function getOrCreate(profilePathId: string): InstanceConsoleEntry {
+	let entry = instances.get(profilePathId)
 	if (entry) return entry
 
 	entry = {
@@ -32,68 +32,68 @@ function getOrCreate(instanceId: string): InstanceConsoleEntry {
 		historicalCache: new Map(),
 		logList: null,
 	}
-	instances.set(instanceId, entry)
+	instances.set(profilePathId, entry)
 	return entry
 }
 
-async function hydrate(instanceId: string): Promise<void> {
-	const entry = getOrCreate(instanceId)
+async function hydrate(profilePathId: string): Promise<void> {
+	const entry = getOrCreate(profilePathId)
 	if (entry.liveConsole.output.value.length > 0) return
 
-	const buffer = await get_live_log_buffer(instanceId)
+	const buffer = await get_live_log_buffer(profilePathId)
 	if (buffer) {
 		entry.liveConsole.addLegacyLog(buffer)
 	}
 }
 
-async function getHistoricalLogs(instanceId: string): Promise<LogEntry[]> {
-	const entry = getOrCreate(instanceId)
+async function getHistoricalLogs(profilePathId: string, instancePath: string): Promise<LogEntry[]> {
+	const entry = getOrCreate(profilePathId)
 	if (entry.logList) return entry.logList
 
-	const logs: LogEntry[] = await get_logs(instanceId, true)
+	const logs: LogEntry[] = await get_logs(instancePath, false)
 	entry.logList = logs
 
 	for (const log of logs) {
-		if (log.output) {
-			entry.historicalCache.set(log.filename, log.output)
+		if (log.stdout && log.stdout !== '') {
+			entry.historicalCache.set(log.filename, log.stdout)
 		}
 	}
 
 	return logs
 }
 
-function getHistoricalContent(instanceId: string, filename: string): string | undefined {
-	return instances.get(instanceId)?.historicalCache.get(filename)
+function getHistoricalContent(profilePathId: string, filename: string): string | undefined {
+	return instances.get(profilePathId)?.historicalCache.get(filename)
 }
 
-function invalidate(instanceId: string): void {
-	const entry = instances.get(instanceId)
+function invalidate(profilePathId: string): void {
+	const entry = instances.get(profilePathId)
 	if (!entry) return
 	entry.historicalCache.clear()
 	entry.logList = null
 }
 
-async function clearLive(instanceId: string): Promise<void> {
-	const entry = getOrCreate(instanceId)
+async function clearLive(profilePathId: string): Promise<void> {
+	const entry = getOrCreate(profilePathId)
 	entry.liveConsole.clear()
-	await clear_log_buffer(instanceId).catch(() => {})
+	await clear_log_buffer(profilePathId).catch(() => {})
 }
 
-async function destroy(instanceId: string): Promise<void> {
-	instances.delete(instanceId)
-	await clear_log_buffer(instanceId).catch(() => {})
+async function destroy(profilePathId: string): Promise<void> {
+	instances.delete(profilePathId)
+	await clear_log_buffer(profilePathId).catch(() => {})
 }
 
-export function useInstanceConsole(instanceId: string) {
-	const entry = getOrCreate(instanceId)
+export function useInstanceConsole(profilePathId: string) {
+	const entry = getOrCreate(profilePathId)
 	return {
 		liveConsole: entry.liveConsole,
 		historicalConsole: entry.historicalConsole,
-		hydrate: () => hydrate(instanceId),
-		getHistoricalLogs: () => getHistoricalLogs(instanceId),
-		getHistoricalContent: (filename: string) => getHistoricalContent(instanceId, filename),
-		invalidate: () => invalidate(instanceId),
-		clearLive: () => clearLive(instanceId),
-		destroy: () => destroy(instanceId),
+		hydrate: () => hydrate(profilePathId),
+		getHistoricalLogs: (instancePath: string) => getHistoricalLogs(profilePathId, instancePath),
+		getHistoricalContent: (filename: string) => getHistoricalContent(profilePathId, filename),
+		invalidate: () => invalidate(profilePathId),
+		clearLive: () => clearLive(profilePathId),
+		destroy: () => destroy(profilePathId),
 	}
 }

apps/app-frontend/src/composables/useJavaTest.ts

@@ -1,52 +0,0 @@
-import { ref } from 'vue'
-
-import { trackEvent } from '@/helpers/analytics'
-import { test_jre } from '@/helpers/jre.js'
-
-export default function useJavaTest() {
-	const testingJava = ref(false)
-	const javaTestResult = ref<boolean | null>(null)
-	let testDebounceTimer: ReturnType<typeof setTimeout> | null = null
-
-	async function runJavaTest(path: string, version: number, track = true) {
-		if (testDebounceTimer) {
-			clearTimeout(testDebounceTimer)
-			testDebounceTimer = null
-		}
-		if (!path) {
-			javaTestResult.value = null
-			return
-		}
-		testingJava.value = true
-		try {
-			javaTestResult.value = await test_jre(path, version)
-		} catch {
-			javaTestResult.value = false
-		}
-		testingJava.value = false
-
-		if (track) {
-			trackEvent('JavaTest', { path, success: javaTestResult.value })
-		}
-	}
-
-	function testJavaInstallationDebounced(path: string, version: number, delay = 600) {
-		if (testDebounceTimer) clearTimeout(testDebounceTimer)
-		if (!path) {
-			javaTestResult.value = null
-			return
-		}
-		testDebounceTimer = setTimeout(() => runJavaTest(path, version, false), delay)
-	}
-
-	async function testJavaInstallation(path: string, version: number, track = false) {
-		await runJavaTest(path, version, track)
-	}
-
-	return {
-		testingJava,
-		javaTestResult,
-		testJavaInstallationDebounced,
-		testJavaInstallation,
-	}
-}

apps/app-frontend/src/helpers/ads.js

@@ -1,5 +1,4 @@
 import { invoke } from '@tauri-apps/api/core'
-import { listen } from '@tauri-apps/api/event'
 
 export async function init_ads_window(overrideShown = false) {
 	return await invoke('plugin:ads|init_ads_window', {
@@ -16,22 +15,6 @@ export async function hide_ads_window(reset) {
 	return await invoke('plugin:ads|hide_ads_window', { reset })
 }
 
-export async function get_ads_consent_required() {
-	return await invoke('plugin:ads|get_ads_consent_required')
-}
-
-export async function perform_ads_consent_action(action) {
-	return await invoke('plugin:ads|perform_ads_consent_action', { action })
-}
-
-export async function open_ads_consent_preferences() {
-	return await invoke('plugin:ads|open_ads_consent_preferences')
-}
-
-export async function ads_consent_listener(callback) {
-	return await listen('ads-consent-required', (event) => callback(event.payload))
-}
-
 export async function record_ads_click() {
 	return await invoke('plugin:ads|record_ads_click')
 }

apps/app-frontend/src/helpers/auth.js

@@ -1,6 +1,6 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'

apps/app-frontend/src/helpers/events.js

@@ -31,8 +31,8 @@ import { listen } from '@tauri-apps/api/event'
           pack_name: name of the pack
           pack_id, optional, the id of the modpack
           pack_version, optional, the version of the modpack
-          instance_name: name of the instance
-          instance_id: unique identification of the instance
+          profile_name: name of the profile
+          profile_uuid: unique identification of the profile
 
         }
         loader_uuid: unique identification of the loading bar
@@ -57,32 +57,18 @@ export async function process_listener(callback) {
 	return await listen('process', (event) => callback(event.payload))
 }
 
-/// Payload for the 'instance' event
+/// Payload for the 'profile' event
 /*
-    InstancePayload {
-        instance_id: unique identification of the instance
+    ProfilePayload {
+        uuid: unique identification of the process in the state (currently identified by path, but that will change)
+        name: name of the profile
+        profile_path: relative path toprofile_listener profile (used for path identification)
+        path: path to profile (used for opening the profile in the OS file explorer)
         event: event type ("Created", "Added", "Edited", "Removed")
     }
 */
-export async function instance_listener(callback) {
-	return await listen('instance', (event) => callback(event.payload))
-}
-
-/// Payload for the 'instance_bulk_update_progress' event
-/*
-    InstanceBulkUpdateProgress {
-        instanceId: string
-        stage: "resolving_versions" | "downloading" | "finishing"
-        current: number
-        total: number
-    }
-*/
-export async function instance_bulk_update_progress_listener(callback) {
-	return await listen('instance_bulk_update_progress', (event) => callback(event.payload))
-}
-
-export async function install_job_listener(callback) {
-	return await listen('install_job', (event) => callback(event.payload))
+export async function profile_listener(callback) {
+	return await listen('profile', (event) => callback(event.payload))
 }
 
 /// Payload for the 'command' event
@@ -112,14 +98,10 @@ export async function friend_listener(callback) {
 	return await listen('friend', (event) => callback(event.payload))
 }
 
-export async function notification_listener(callback) {
-	return await listen('notification', (event) => callback(event.payload))
-}
-
 /// Payload for the 'log' event
 /*
     LogPayload {
-        instance_id: string,
+        profile_path_id: string,
         type: "log4j" | "legacy",
         // log4j fields (when type === "log4j"):
         timestamp_millis?: number,

apps/app-frontend/src/helpers/friends.ts

@@ -8,7 +8,7 @@ import type { ModrinthCredentials } from '@/helpers/mr_auth'
 
 export type UserStatus = {
 	user_id: string
-	instance_name: string | null
+	profile_name: string | null
 	last_update: string
 }
 

apps/app-frontend/src/helpers/import.js

@@ -1,11 +1,11 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
 
-import { install_import_instance } from './install'
+import { create } from './profile'
 
 /*
   API for importing instances from other launchers
@@ -32,8 +32,19 @@ export async function get_importable_instances(launcherType, basePath) {
 }
 
 /// Import an instance from a launcher type and base path
+/// eg: import_instance("profile-name-to-go-to", "MultiMC", "C:/MultiMC", "Instance 1")
 export async function import_instance(launcherType, basePath, instanceFolder) {
-	return await install_import_instance(launcherType, basePath, instanceFolder)
+	// create a basic, empty instance (most properties will be filled in by the import process)
+	// We do NOT watch the fs for changes to avoid duplicate events during installation
+	// fs watching will be enabled once the instance is imported
+	const profilePath = await create(instanceFolder, '1.19.4', 'vanilla', 'latest', null, true)
+
+	return await invoke('plugin:import|import_instance', {
+		profilePath,
+		launcherType,
+		basePath,
+		instanceFolder,
+	})
 }
 
 /// Checks if this instance is valid for importing, given a certain launcher type

apps/app-frontend/src/helpers/install.ts

@@ -1,302 +0,0 @@
-import { invoke } from '@tauri-apps/api/core'
-
-import { install_job_listener } from './events'
-import type { InstanceLink, InstanceLoader } from './types'
-
-export interface PackLocationVersionId {
-	type: 'fromVersionId'
-	project_id: string
-	version_id: string
-	title: string
-	icon_url?: string | null
-}
-
-export interface PackLocationFile {
-	type: 'fromFile'
-	path: string
-}
-
-export type CreatePackLocation = PackLocationVersionId | PackLocationFile
-
-export interface InstallModpackPreview {
-	name: string
-	gameVersion: string
-	modloader: InstanceLoader
-	loaderVersion: string | null
-	icon?: string | null
-	iconUrl?: string | null
-	link?: InstanceLink | null
-	unknownFile: boolean
-	externalFilesInModpack: string[]
-}
-
-export interface InstallCreateInstanceRequest {
-	name: string
-	gameVersion: string
-	loader: InstanceLoader
-	loaderVersion: string | null
-	iconPath: string | null
-	link?: InstanceLink | null
-}
-
-export interface InstallPostInstallEdit {
-	name?: string | null
-	iconPath?: string | null
-	link?: InstanceLink | null
-}
-
-export type InstallJobStatus =
-	| 'queued'
-	| 'running'
-	| 'succeeded'
-	| 'failed'
-	| 'interrupted'
-	| 'canceled'
-
-export type InstallPhaseId =
-	| 'preparing_instance'
-	| 'resolving_pack'
-	| 'downloading_pack_file'
-	| 'reading_pack_manifest'
-	| 'downloading_content'
-	| 'extracting_overrides'
-	| 'resolving_minecraft'
-	| 'resolving_loader'
-	| 'preparing_java'
-	| 'downloading_minecraft'
-	| 'running_loader_processors'
-	| 'finalizing'
-	| 'rolling_back'
-
-export interface InstallProgress {
-	current: number
-	total: number
-	secondary?: InstallProgressSecondary | null
-}
-
-export interface InstallProgressSecondary {
-	current: number
-	total: number
-}
-
-export type InstallJavaStep =
-	| 'resolving'
-	| 'fetching_metadata'
-	| 'downloading'
-	| 'extracting'
-	| 'validating'
-
-export interface InstallErrorView {
-	code: string
-	phase?: InstallPhaseId | null
-	message: string
-	api?: {
-		error: string
-		status?: number | null
-		method?: string | null
-		url?: string | null
-		route?: string | null
-	} | null
-	context?: {
-		operation: string
-		source_path?: string | null
-		target_path?: string | null
-		file_path?: string | null
-		entry_path?: string | null
-		urls?: string[]
-		expected_hash?: string | null
-		expected_size?: number | null
-		project_id?: string | null
-		version_id?: string | null
-		minecraft_version?: string | null
-		loader?: string | null
-		java_version?: number | null
-		os?: string | null
-		arch?: string | null
-	} | null
-}
-
-export interface InstallJobSnapshot {
-	job_id: string
-	instance_id?: string | null
-	kind:
-		| 'create_instance'
-		| 'create_modpack_instance'
-		| 'import_instance'
-		| 'duplicate_instance'
-		| 'install_existing_instance'
-		| 'install_pack_to_existing_instance'
-	status: InstallJobStatus
-	target:
-		| { type: 'new_instance'; instance_id?: string | null }
-		| { type: 'existing_instance'; instance_id: string }
-	phase: InstallPhaseId
-	progress?: InstallProgress | null
-	details:
-		| { type: 'empty' }
-		| { type: 'instance'; name: string }
-		| { type: 'minecraft'; game_version: string; loader: InstanceLoader }
-		| { type: 'java'; major_version: number; step: InstallJavaStep }
-		| {
-				type: 'modpack'
-				project_id?: string | null
-				version_id?: string | null
-				title?: string | null
-		  }
-		| { type: 'import'; launcher_type: string; instance_folder: string }
-	display?: { title: string; icon?: string | null } | null
-	error?: InstallErrorView | null
-	rollback_error?: InstallErrorView | null
-	created: string
-	modified: string
-	finished?: string | null
-}
-
-export async function install_get_modpack_preview(location: CreatePackLocation) {
-	return await invoke<InstallModpackPreview>('plugin:install|install_get_modpack_preview', {
-		location,
-	})
-}
-
-export async function install_create_instance(request: InstallCreateInstanceRequest) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_create_instance', { request })
-}
-
-export async function install_create_modpack_instance(
-	location: CreatePackLocation,
-	postInstallEdit?: InstallPostInstallEdit | null,
-) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_create_modpack_instance', {
-		location,
-		postInstallEdit,
-	})
-}
-
-export async function install_import_instance(
-	launcherType: string,
-	basePath: string,
-	instanceFolder: string,
-) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_import_instance', {
-		launcherType,
-		basePath,
-		instanceFolder,
-	})
-}
-
-export async function install_duplicate_instance(sourceInstanceId: string) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_duplicate_instance', {
-		sourceInstanceId,
-	})
-}
-
-export async function install_existing_instance(instanceId: string, force: boolean) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_existing_instance', {
-		instanceId,
-		force,
-	})
-}
-
-export async function install_pack_to_existing_instance(
-	instanceId: string,
-	location: CreatePackLocation,
-	postInstallEdit?: InstallPostInstallEdit | null,
-) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_pack_to_existing_instance', {
-		instanceId,
-		location,
-		postInstallEdit,
-	})
-}
-
-export async function install_job_list(includeFinished: boolean) {
-	return await invoke<InstallJobSnapshot[]>('plugin:install|install_job_list', { includeFinished })
-}
-
-export async function install_job_get(jobId: string) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_job_get', { jobId })
-}
-
-export async function install_job_retry(jobId: string) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_job_retry', { jobId })
-}
-
-export async function install_job_cancel(jobId: string) {
-	return await invoke<InstallJobSnapshot>('plugin:install|install_job_cancel', { jobId })
-}
-
-export async function install_job_dismiss(jobId: string) {
-	return await invoke<void>('plugin:install|install_job_dismiss', { jobId })
-}
-
-export async function install_job_support_details(jobId: string) {
-	return await invoke<string>('plugin:install|install_job_support_details', { jobId })
-}
-
-export function installJobInstanceId(job: InstallJobSnapshot): string | null {
-	return job.instance_id ?? job.target.instance_id ?? null
-}
-
-export function isInstallJobFinished(status: InstallJobStatus) {
-	return (
-		status === 'succeeded' ||
-		status === 'failed' ||
-		status === 'interrupted' ||
-		status === 'canceled'
-	)
-}
-
-function settleInstallJob(job: InstallJobSnapshot) {
-	if (job.status === 'succeeded') return job
-
-	throw new Error(job.error?.message ?? `Install job ${job.job_id} ${job.status}`)
-}
-
-export async function wait_for_install_job(jobId: string) {
-	const current = await install_job_get(jobId)
-	if (isInstallJobFinished(current.status)) return settleInstallJob(current)
-
-	return await new Promise<InstallJobSnapshot>((resolve, reject) => {
-		let finished = false
-		let unlisten: (() => void) | null = null
-
-		const cleanup = () => {
-			if (unlisten) {
-				unlisten()
-				unlisten = null
-			}
-		}
-
-		const resolveJob = (job: InstallJobSnapshot) => {
-			if (finished || job.job_id !== jobId || !isInstallJobFinished(job.status)) return
-
-			finished = true
-			cleanup()
-
-			try {
-				resolve(settleInstallJob(job))
-			} catch (err) {
-				reject(err)
-			}
-		}
-
-		const rejectWait = (err: unknown) => {
-			if (finished) return
-			finished = true
-			cleanup()
-			reject(err)
-		}
-
-		install_job_listener(resolveJob)
-			.then((listener) => {
-				if (finished) {
-					listener()
-					return
-				}
-
-				unlisten = listener
-				install_job_get(jobId).then(resolveJob).catch(rejectWait)
-			})
-			.catch(rejectWait)
-	})
-}

apps/app-frontend/src/helpers/instance-content.ts

@@ -1,100 +0,0 @@
-import type {
-	ContentItem,
-	ContentModpackCardCategory,
-	ContentModpackCardProject,
-	ContentModpackCardVersion,
-	ContentOwner,
-} from '@modrinth/ui'
-
-import {
-	get_content_items,
-	get_linked_modpack_info,
-	type LinkedModpackInfo,
-} from '@/helpers/instance'
-import { get_categories } from '@/helpers/tags.js'
-import type { CacheBehaviour } from '@/helpers/types'
-
-export type InstanceContentData = {
-	path: string
-	contentItems: ContentItem[] | null
-	modpack: InstanceContentModpackData | null
-}
-
-export type InstanceContentModpackData = {
-	project: ContentModpackCardProject
-	version: ContentModpackCardVersion
-	owner: ContentOwner | null
-	categories: ContentModpackCardCategory[]
-	hasUpdate: boolean
-	updateVersionId: string | null
-}
-
-export async function loadInstanceContentData(
-	path: string,
-	cacheBehaviour?: CacheBehaviour,
-	onError?: (error: Error) => unknown,
-): Promise<InstanceContentData> {
-	const [contentItems, modpackInfo, allCategories] = await Promise.all([
-		get_content_items(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
-		get_linked_modpack_info(path, cacheBehaviour).catch((error) => handleLoadError(error, onError)),
-		get_categories().catch((error) => handleLoadError(error, onError)),
-	])
-
-	return {
-		path,
-		contentItems: (contentItems as ContentItem[] | null | undefined) ?? null,
-		modpack: normalizeLinkedModpackInfo(
-			modpackInfo as LinkedModpackInfo | null | undefined,
-			allCategories as ContentModpackCardCategory[] | null | undefined,
-		),
-	}
-}
-
-function handleLoadError(error: unknown, onError?: (error: Error) => unknown) {
-	onError?.(error as Error)
-	return null
-}
-
-function normalizeLinkedModpackInfo(
-	modpackInfo: LinkedModpackInfo | null | undefined,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
-): InstanceContentModpackData | null {
-	if (!modpackInfo) return null
-
-	return {
-		project: {
-			...modpackInfo.project,
-			slug: modpackInfo.project.slug ?? modpackInfo.project.id,
-			icon_url: modpackInfo.project.icon_url ?? undefined,
-		},
-		version: {
-			...modpackInfo.version,
-			date_published: modpackInfo.version.date_published.toString(),
-		},
-		owner: modpackInfo.owner
-			? {
-					...modpackInfo.owner,
-					avatar_url: modpackInfo.owner.avatar_url ?? undefined,
-				}
-			: null,
-		categories: resolveLinkedModpackCategories(modpackInfo, allCategories),
-		hasUpdate: modpackInfo.has_update,
-		updateVersionId: modpackInfo.update_version_id,
-	}
-}
-
-function resolveLinkedModpackCategories(
-	modpackInfo: LinkedModpackInfo,
-	allCategories: ContentModpackCardCategory[] | null | undefined,
-) {
-	if (!allCategories || !modpackInfo.project.categories) return []
-
-	const seen = new Set<string>()
-	return allCategories.filter((category) => {
-		if (modpackInfo.project.categories.includes(category.name) && !seen.has(category.name)) {
-			seen.add(category.name)
-			return true
-		}
-		return false
-	})
-}

apps/app-frontend/src/helpers/instance.ts

@@ -1,337 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import type { Labrinth } from '@modrinth/api-client'
-import type { ContentItem, ContentOwner } from '@modrinth/ui'
-import { invoke } from '@tauri-apps/api/core'
-
-import type { InstallJobSnapshot } from './install'
-import type {
-	CacheBehaviour,
-	ContentFile,
-	ContentFileProjectType,
-	GameInstance,
-	InstanceLoader,
-} from './types'
-
-export async function remove(instanceId: string): Promise<void> {
-	return await invoke('plugin:instance|instance_remove', { instanceId })
-}
-
-export async function get(instanceId: string): Promise<GameInstance | null> {
-	return await invoke('plugin:instance|instance_get', { instanceId })
-}
-
-export async function get_many(instanceIds: string[]): Promise<GameInstance[]> {
-	return await invoke('plugin:instance|instance_get_many', { instanceIds })
-}
-
-export async function get_projects(
-	instanceId: string,
-	cacheBehaviour?: CacheBehaviour,
-): Promise<Record<string, ContentFile>> {
-	return await invoke('plugin:instance|instance_get_projects', { instanceId, cacheBehaviour })
-}
-
-export async function get_installed_project_ids(instanceId: string): Promise<string[]> {
-	return await invoke('plugin:instance|instance_get_installed_project_ids', { instanceId })
-}
-
-export type InstanceInstallTarget = {
-	game_version: string
-	loader: string
-}
-
-export type InstanceInstallCandidate = {
-	id: string
-	name: string
-	icon_path?: string | null
-	game_version: string
-	loader: InstanceLoader
-	installed: boolean
-	compatible: boolean
-}
-
-export async function get_install_candidates(
-	projectId: string,
-	projectType: string,
-	targets: InstanceInstallTarget[],
-): Promise<InstanceInstallCandidate[]> {
-	return await invoke('plugin:instance|instance_get_install_candidates', {
-		projectId,
-		projectType,
-		targets,
-	})
-}
-
-// Get content items with rich metadata for an instance
-// Returns content items filtered to exclude modpack files (if linked),
-// sorted alphabetically by project name
-export async function get_content_items(
-	instanceId: string,
-	cacheBehaviour?: CacheBehaviour,
-): Promise<ContentItem[]> {
-	return await invoke('plugin:instance|instance_get_content_items', { instanceId, cacheBehaviour })
-}
-
-// Linked modpack info returned from backend
-export interface LinkedModpackInfo {
-	project: Labrinth.Projects.v2.Project
-	version: Labrinth.Versions.v2.Version
-	owner: ContentOwner | null
-	has_update: boolean
-	update_version_id: string | null
-	update_version: Labrinth.Versions.v2.Version | null
-}
-
-// Get linked modpack info for an instance
-// Returns project, version, and owner information for the linked modpack,
-// or null if the instance is not linked to a modpack
-export async function get_linked_modpack_info(
-	instanceId: string,
-	cacheBehaviour?: CacheBehaviour,
-): Promise<LinkedModpackInfo | null> {
-	return await invoke('plugin:instance|instance_get_linked_modpack_info', {
-		instanceId,
-		cacheBehaviour,
-	})
-}
-
-// Get content items that are part of the linked modpack
-// Returns the modpack's dependencies as ContentItem list
-// Returns empty array if the instance is not linked to a modpack
-export async function get_linked_modpack_content(
-	instanceId: string,
-	cacheBehaviour?: CacheBehaviour,
-): Promise<ContentItem[]> {
-	return await invoke('plugin:instance|instance_get_linked_modpack_content', {
-		instanceId,
-		cacheBehaviour,
-	})
-}
-
-// Convert a list of dependencies into ContentItems with rich metadata
-export async function get_dependencies_as_content_items(
-	dependencies: Labrinth.Versions.v3.Dependency[],
-	cacheBehaviour?: CacheBehaviour,
-): Promise<ContentItem[]> {
-	return await invoke('plugin:instance|instance_get_dependencies_as_content_items', {
-		dependencies,
-		cacheBehaviour,
-	})
-}
-
-export async function get_full_path(instanceId: string): Promise<string> {
-	return await invoke('plugin:instance|instance_get_full_path', { instanceId })
-}
-
-export async function get_mod_full_path(instanceId: string, projectPath: string): Promise<string> {
-	return await invoke('plugin:instance|instance_get_mod_full_path', { instanceId, projectPath })
-}
-
-export interface JavaVersion {
-	parsed_version: number
-	version: string
-	architecture: string
-	path: string
-}
-
-export async function get_optimal_jre_key(instanceId: string): Promise<JavaVersion | null> {
-	return await invoke('plugin:instance|instance_get_optimal_jre_key', { instanceId })
-}
-
-export async function list(): Promise<GameInstance[]> {
-	return await invoke('plugin:instance|instance_list')
-}
-
-export async function check_installed(instanceId: string, projectId: string): Promise<boolean> {
-	return await invoke('plugin:instance|instance_check_installed', { instanceId, projectId })
-}
-
-export async function update_all(instanceId: string): Promise<Record<string, string>> {
-	return await invoke('plugin:instance|instance_update_all', { instanceId })
-}
-
-// Updates a specified project
-export async function update_project(instanceId: string, projectPath: string): Promise<string> {
-	return await invoke('plugin:instance|instance_update_project', { instanceId, projectPath })
-}
-
-// Add a project to an instance from a version
-// Returns a path to the new project file
-export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'
-
-export interface ResolutionPreferences {
-	game_versions?: string[]
-	loaders?: string[]
-}
-
-export interface ResolveContentRequest {
-	project_id: string
-	version_id?: string | null
-	content_type: Labrinth.Content.v3.ContentType
-	selected?: ResolutionPreferences
-}
-
-export interface ResolvedContent {
-	project_id: string
-	version_id: string
-	dependent_on_version_id?: string | null
-}
-
-export interface ResolveContentPlan {
-	primary: ResolvedContent
-	dependencies: ResolvedContent[]
-	skipped: Array<{
-		project_id: string
-		version_id?: string | null
-		dependent_on_version_id?: string | null
-		reason: string
-	}>
-}
-
-export async function add_project_from_version(
-	instanceId: string,
-	versionId: string,
-	reason: DownloadReason,
-	dependentOnVersionId?: string,
-): Promise<string> {
-	return await invoke('plugin:instance|instance_add_project_from_version', {
-		instanceId,
-		versionId,
-		reason,
-		dependentOnVersionId,
-	})
-}
-
-export async function install_project_with_dependencies(
-	instanceId: string,
-	request: ResolveContentRequest,
-): Promise<ResolveContentPlan> {
-	return await invoke('plugin:instance|instance_install_project_with_dependencies', {
-		instanceId,
-		request,
-	})
-}
-
-export async function switch_project_version_with_dependencies(
-	instanceId: string,
-	projectPath: string,
-	versionId: string,
-): Promise<string> {
-	return await invoke('plugin:instance|instance_switch_project_version_with_dependencies', {
-		instanceId,
-		projectPath,
-		versionId,
-	})
-}
-
-// Add a project to an instance from a path + project_type
-// Returns a path to the new project file
-export async function add_project_from_path(
-	instanceId: string,
-	projectPath: string,
-	projectType?: ContentFileProjectType,
-): Promise<string> {
-	return await invoke('plugin:instance|instance_add_project_from_path', {
-		instanceId,
-		projectPath,
-		projectType,
-	})
-}
-
-export async function is_file_on_modrinth(projectPath: string): Promise<boolean> {
-	return await invoke('plugin:instance|instance_is_file_on_modrinth', { projectPath })
-}
-
-// Toggle disabling a project
-export async function toggle_disable_project(
-	instanceId: string,
-	projectPath: string,
-	desiredEnabled?: boolean,
-): Promise<string> {
-	return await invoke('plugin:instance|instance_toggle_disable_project', {
-		instanceId,
-		projectPath,
-		desiredEnabled,
-	})
-}
-
-// Remove a project
-export async function remove_project(instanceId: string, projectPath: string): Promise<void> {
-	return await invoke('plugin:instance|instance_remove_project', { instanceId, projectPath })
-}
-
-// Update a managed Modrinth instance to a specific version
-export async function update_managed_modrinth_version(
-	instanceId: string,
-	versionId: string,
-): Promise<InstallJobSnapshot> {
-	return await invoke('plugin:instance|instance_update_managed_modrinth_version', {
-		instanceId,
-		versionId,
-	})
-}
-
-// Repair a managed Modrinth instance
-export async function update_repair_modrinth(instanceId: string): Promise<InstallJobSnapshot> {
-	return await invoke('plugin:instance|instance_repair_managed_modrinth', { instanceId })
-}
-
-// Export an instance to .mrpack
-// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
-// Version id is optional (ie: 1.1.5)
-export async function export_instance_mrpack(
-	instanceId: string,
-	exportLocation: string,
-	includedOverrides: string[],
-	versionId?: string,
-	description?: string,
-	name?: string,
-): Promise<void> {
-	return await invoke('plugin:instance|instance_export_mrpack', {
-		instanceId,
-		exportLocation,
-		includedOverrides,
-		versionId,
-		description,
-		name,
-	})
-}
-
-// Given a folder path, populate an array of all the subfolders
-// Intended to be used for finding potential override folders
-// profile
-// -- mods
-// -- resourcepacks
-// -- file1
-// => [mods, resourcepacks]
-// allows selection for 'included_overrides' in export_instance_mrpack
-export async function get_pack_export_candidates(instanceId: string): Promise<string[]> {
-	return await invoke('plugin:instance|instance_get_pack_export_candidates', { instanceId })
-}
-
-// Run Minecraft using an instance
-// Returns PID of child
-export async function run(
-	instanceId: string,
-	serverAddress: string | null = null,
-): Promise<unknown> {
-	return await invoke('plugin:instance|instance_run', { instanceId, serverAddress })
-}
-
-export async function kill(instanceId: string): Promise<void> {
-	return await invoke('plugin:instance|instance_kill', { instanceId })
-}
-
-// Edits an instance
-export async function edit(instanceId: string, editInstance: Partial<GameInstance>): Promise<void> {
-	return await invoke('plugin:instance|instance_edit', { instanceId, editInstance })
-}
-
-// Edits an instance's icon
-export async function edit_icon(instanceId: string, iconPath: string | null): Promise<void> {
-	return await invoke('plugin:instance|instance_edit_icon', { instanceId, iconPath })
-}

apps/app-frontend/src/helpers/jre.js

@@ -1,6 +1,6 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'

apps/app-frontend/src/helpers/logs.js

@@ -1,54 +1,55 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
 
 /*
-A log is a struct containing the filename string and optional output, as follows:
+A log is a struct containing the filename string, stdout, and stderr, as follows:
 
 pub struct Logs {
     pub filename:  String,
-    pub output: Option<String>,
+    pub stdout: String,
+    pub stderr: String,
 }
 */
 
-/// Get all logs that exist for a given instance
+/// Get all logs that exist for a given profile
 /// This is returned as an array of Log objects, sorted by filename (the folder name, when the log was created)
-export async function get_logs(instanceId, clearContents) {
-	return await invoke('plugin:logs|logs_get_logs', { instanceId, clearContents })
+export async function get_logs(profilePath, clearContents) {
+	return await invoke('plugin:logs|logs_get_logs', { profilePath, clearContents })
 }
 
-/// Get an instance's log by filename
-export async function get_logs_by_filename(instanceId, logType, filename) {
-	return await invoke('plugin:logs|logs_get_logs_by_filename', { instanceId, logType, filename })
+/// Get a profile's log by filename
+export async function get_logs_by_filename(profilePath, logType, filename) {
+	return await invoke('plugin:logs|logs_get_logs_by_filename', { profilePath, logType, filename })
 }
 
-/// Get an instance's log text only by filename
-export async function get_output_by_filename(instanceId, logType, filename) {
+/// Get a profile's log text only by filename
+export async function get_output_by_filename(profilePath, logType, filename) {
 	return await invoke('plugin:logs|logs_get_output_by_filename', {
-		instanceId,
+		profilePath,
 		logType,
 		filename,
 	})
 }
 
-/// Delete an instance's log by filename
-export async function delete_logs_by_filename(instanceId, logType, filename) {
+/// Delete a profile's log by filename
+export async function delete_logs_by_filename(profilePath, logType, filename) {
 	return await invoke('plugin:logs|logs_delete_logs_by_filename', {
-		instanceId,
+		profilePath,
 		logType,
 		filename,
 	})
 }
 
-/// Delete all logs for a given instance
-export async function delete_logs(instanceId) {
-	return await invoke('plugin:logs|logs_delete_logs', { instanceId })
+/// Delete all logs for a given profile
+export async function delete_logs(profilePath) {
+	return await invoke('plugin:logs|logs_delete_logs', { profilePath })
 }
 
-/// Get the latest log for a given instance and cursor (startpoint to read within the file)
+/// Get the latest log for a given profile and cursor (startpoint to read withi nthe file)
 /// Returns:
 /*
   {
@@ -59,16 +60,16 @@ export async function delete_logs(instanceId) {
 */
 
 // From latest.log directly
-export async function get_latest_log_cursor(instanceId, cursor) {
-	return await invoke('plugin:logs|logs_get_latest_log_cursor', { instanceId, cursor })
+export async function get_latest_log_cursor(profilePath, cursor) {
+	return await invoke('plugin:logs|logs_get_latest_log_cursor', { profilePath, cursor })
 }
 
-/// Get all buffered live log lines for an instance from the Rust ring buffer
-export async function get_live_log_buffer(instanceId) {
-	return await invoke('plugin:logs|logs_get_live_log_buffer', { instanceId })
+/// Get all buffered live log lines for a profile from the Rust ring buffer
+export async function get_live_log_buffer(profilePath) {
+	return await invoke('plugin:logs|logs_get_live_log_buffer', { profilePath })
 }
 
-/// Clear the live log buffer for an instance on the Rust side
-export async function clear_log_buffer(instanceId) {
-	return await invoke('plugin:logs|logs_clear_live_log_buffer', { instanceId })
+/// Clear the live log buffer for a profile on the Rust side
+export async function clear_log_buffer(profilePath) {
+	return await invoke('plugin:logs|logs_clear_live_log_buffer', { profilePath })
 }

apps/app-frontend/src/helpers/mr_auth.ts

@@ -1,6 +1,6 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'

apps/app-frontend/src/helpers/pack.ts

@@ -0,0 +1,105 @@
+import { invoke } from '@tauri-apps/api/core'
+
+import { create } from './profile'
+import type { InstanceLoader } from './types'
+
+interface PackProfileCreator {
+	name: string
+	gameVersion: string
+	modloader: InstanceLoader
+	loaderVersion: string | null
+	unknownFile: boolean
+}
+
+interface PackLocationVersionId {
+	type: 'fromVersionId'
+	project_id: string
+	version_id: string
+	title: string
+	icon_url?: string
+}
+
+interface PackLocationFile {
+	type: 'fromFile'
+	path: string
+}
+
+export async function create_profile_and_install(
+	projectId: string,
+	versionId: string,
+	packTitle: string,
+	iconUrl?: string,
+	createInstanceCallback: (profile: string) => void = () => {},
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title: packTitle,
+		icon_url: iconUrl,
+	}
+	const profile_creator = await invoke<PackProfileCreator>(
+		'plugin:pack|pack_get_profile_from_pack',
+		{ location },
+	)
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	createInstanceCallback(profile)
+
+	return await invoke('plugin:pack|pack_install', { location, profile })
+}
+
+export async function install_to_existing_profile(
+	projectId: string,
+	versionId: string,
+	title: string,
+	profilePath: string,
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title,
+	}
+	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
+}
+
+export async function create_profile_and_install_from_file(
+	path: string,
+	showUnknownPackWarningModal?: (createProfile: () => Promise<void>, fileName: string) => void,
+): Promise<void> {
+	const location: PackLocationFile = {
+		type: 'fromFile',
+		path,
+	}
+	const profile_creator = await invoke<PackProfileCreator>(
+		'plugin:pack|pack_get_profile_from_pack',
+		{ location },
+	)
+
+	const createProfile = async () => {
+		const profile = await create(
+			profile_creator.name,
+			profile_creator.gameVersion,
+			profile_creator.modloader,
+			profile_creator.loaderVersion,
+			null,
+			true,
+		)
+		await invoke('plugin:pack|pack_install', { location, profile })
+	}
+
+	if (profile_creator.unknownFile && showUnknownPackWarningModal) {
+		const splitPath = path.split(/[\\/]/)
+		const fileName = splitPath ? splitPath[splitPath.length - 1] : path
+		showUnknownPackWarningModal(createProfile, fileName)
+	} else {
+		await createProfile()
+	}
+}

apps/app-frontend/src/helpers/process.js

@@ -1,17 +1,17 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
 
-/// Gets all running process IDs with a given instance ID
+/// Gets all running process IDs with a given profile path
 /// Returns [u32]
-export async function get_by_instance_id(instanceId) {
-	return await invoke('plugin:process|process_get_by_instance_id', { instanceId })
+export async function get_by_profile_path(path) {
+	return await invoke('plugin:process|process_get_by_profile_path', { path })
 }
 
-/// Gets all running process IDs
+/// Gets all running process IDs with a given profile path
 /// Returns [u32]
 export async function get_all() {
 	return await invoke('plugin:process|process_get_all')

apps/app-frontend/src/helpers/profile.ts

@@ -0,0 +1,308 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import type { Labrinth } from '@modrinth/api-client'
+import type { ContentItem, ContentOwner } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
+
+import { install_to_existing_profile } from '@/helpers/pack'
+
+import type {
+	CacheBehaviour,
+	ContentFile,
+	ContentFileProjectType,
+	GameInstance,
+	InstanceLoader,
+} from './types'
+
+// Add instance
+/*
+    name: String,           // the name of the profile, and relative path to create
+    game_version: String,   // the game version of the profile
+    modloader: ModLoader,   // the modloader to use
+    - ModLoader is an enum, with the following variants: Vanilla, Forge, Fabric, Quilt
+    loader_version: String, // the modloader version to use, set to "latest", "stable", or the ID of your chosen loader
+    icon: Path,  // the icon for the profile
+    - icon is a path to an image file, which will be copied into the profile directory
+*/
+
+export async function create(
+	name: string,
+	gameVersion: string,
+	modloader: InstanceLoader,
+	loaderVersion: string | null,
+	icon: string | null,
+	skipInstall: boolean,
+	linkedData?: { project_id: string; version_id: string; locked: boolean } | null,
+): Promise<string> {
+	// Trim string name to avoid "Unable to find directory"
+	name = name.trim()
+	return await invoke('plugin:profile-create|profile_create', {
+		name,
+		gameVersion,
+		modloader,
+		loaderVersion,
+		icon,
+		skipInstall,
+		linkedData,
+	})
+}
+
+// duplicate a profile
+export async function duplicate(path: string): Promise<string> {
+	return await invoke('plugin:profile-create|profile_duplicate', { path })
+}
+
+// Remove a profile
+export async function remove(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_remove', { path })
+}
+
+// Get a profile by path
+// Returns a Profile
+export async function get(path: string): Promise<GameInstance | null> {
+	return await invoke('plugin:profile|profile_get', { path })
+}
+
+export async function get_many(paths: string[]): Promise<GameInstance[]> {
+	return await invoke('plugin:profile|profile_get_many', { paths })
+}
+
+// Get a profile's projects
+// Returns a map of a path to profile file
+export async function get_projects(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<Record<string, ContentFile>> {
+	return await invoke('plugin:profile|profile_get_projects', { path, cacheBehaviour })
+}
+
+// Get just the installed project IDs for a profile (lightweight, skips update checks)
+export async function get_installed_project_ids(path: string): Promise<string[]> {
+	return await invoke('plugin:profile|profile_get_installed_project_ids', { path })
+}
+
+// Get content items with rich metadata for a profile
+// Returns content items filtered to exclude modpack files (if linked),
+// sorted alphabetically by project name
+export async function get_content_items(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_content_items', { path, cacheBehaviour })
+}
+
+// Linked modpack info returned from backend
+export interface LinkedModpackInfo {
+	project: Labrinth.Projects.v2.Project
+	version: Labrinth.Versions.v2.Version
+	owner: ContentOwner | null
+	has_update: boolean
+	update_version_id: string | null
+	update_version: Labrinth.Versions.v2.Version | null
+}
+
+// Get linked modpack info for a profile
+// Returns project, version, and owner information for the linked modpack,
+// or null if the profile is not linked to a modpack
+export async function get_linked_modpack_info(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<LinkedModpackInfo | null> {
+	return await invoke('plugin:profile|profile_get_linked_modpack_info', { path, cacheBehaviour })
+}
+
+// Get content items that are part of the linked modpack
+// Returns the modpack's dependencies as ContentItem list
+// Returns empty array if the profile is not linked to a modpack
+export async function get_linked_modpack_content(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_linked_modpack_content', { path, cacheBehaviour })
+}
+
+// Convert a list of dependencies into ContentItems with rich metadata
+export async function get_dependencies_as_content_items(
+	dependencies: Labrinth.Versions.v3.Dependency[],
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_dependencies_as_content_items', {
+		dependencies,
+		cacheBehaviour,
+	})
+}
+
+// Get a profile's full fs path
+// Returns a path
+export async function get_full_path(path: string): Promise<string> {
+	return await invoke('plugin:profile|profile_get_full_path', { path })
+}
+
+// Get's a mod's full fs path
+// Returns a path
+export async function get_mod_full_path(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_get_mod_full_path', { path, projectPath })
+}
+
+// Get optimal java version from profile
+// Returns a java version
+export async function get_optimal_jre_key(path: string): Promise<string | null> {
+	return await invoke('plugin:profile|profile_get_optimal_jre_key', { path })
+}
+
+// Get a copy of the profile set
+// Returns hashmap of path -> Profile
+export async function list(): Promise<GameInstance[]> {
+	return await invoke('plugin:profile|profile_list')
+}
+
+export async function check_installed(path: string, projectId: string): Promise<boolean> {
+	return await invoke('plugin:profile|profile_check_installed', { path, projectId })
+}
+
+export async function check_installed_batch(projectId: string): Promise<Record<string, boolean>> {
+	return await invoke('plugin:profile|profile_check_installed_batch', { projectId })
+}
+
+// Installs/Repairs a profile
+export async function install(path: string, force: boolean): Promise<void> {
+	return await invoke('plugin:profile|profile_install', { path, force })
+}
+
+// Updates all of a profile's projects
+export async function update_all(path: string): Promise<Record<string, string>> {
+	return await invoke('plugin:profile|profile_update_all', { path })
+}
+
+// Updates a specified project
+export async function update_project(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_update_project', { path, projectPath })
+}
+
+// Add a project to a profile from a version
+// Returns a path to the new project file
+export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'
+
+export async function add_project_from_version(
+	path: string,
+	versionId: string,
+	reason: DownloadReason,
+): Promise<string> {
+	return await invoke('plugin:profile|profile_add_project_from_version', {
+		path,
+		versionId,
+		reason,
+	})
+}
+
+// Add a project to a profile from a path + project_type
+// Returns a path to the new project file
+export async function add_project_from_path(
+	path: string,
+	projectPath: string,
+	projectType?: ContentFileProjectType,
+): Promise<string> {
+	return await invoke('plugin:profile|profile_add_project_from_path', {
+		path,
+		projectPath,
+		projectType,
+	})
+}
+
+// Toggle disabling a project
+export async function toggle_disable_project(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_toggle_disable_project', { path, projectPath })
+}
+
+// Remove a project
+export async function remove_project(path: string, projectPath: string): Promise<void> {
+	return await invoke('plugin:profile|profile_remove_project', { path, projectPath })
+}
+
+// Update a managed Modrinth profile to a specific version
+export async function update_managed_modrinth_version(
+	path: string,
+	versionId: string,
+): Promise<void> {
+	return await invoke('plugin:profile|profile_update_managed_modrinth_version', {
+		path,
+		versionId,
+	})
+}
+
+// Repair a managed Modrinth profile
+export async function update_repair_modrinth(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_repair_managed_modrinth', { path })
+}
+
+// Export a profile to .mrpack
+// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
+// Version id is optional (ie: 1.1.5)
+export async function export_profile_mrpack(
+	path: string,
+	exportLocation: string,
+	includedOverrides: string[],
+	versionId?: string,
+	description?: string,
+	name?: string,
+): Promise<void> {
+	return await invoke('plugin:profile|profile_export_mrpack', {
+		path,
+		exportLocation,
+		includedOverrides,
+		versionId,
+		description,
+		name,
+	})
+}
+
+// Given a folder path, populate an array of all the subfolders
+// Intended to be used for finding potential override folders
+// profile
+// -- mods
+// -- resourcepacks
+// -- file1
+// => [mods, resourcepacks]
+// allows selection for 'included_overrides' in export_profile_mrpack
+export async function get_pack_export_candidates(profilePath: string): Promise<string[]> {
+	return await invoke('plugin:profile|profile_get_pack_export_candidates', { profilePath })
+}
+
+// Run Minecraft using a pathed profile
+// Returns PID of child
+export async function run(path: string, serverAddress: string | null = null): Promise<unknown> {
+	return await invoke('plugin:profile|profile_run', { path, serverAddress })
+}
+
+export async function kill(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_kill', { path })
+}
+
+// Edits a profile
+export async function edit(path: string, editProfile: Partial<GameInstance>): Promise<void> {
+	return await invoke('plugin:profile|profile_edit', { path, editProfile })
+}
+
+// Edits a profile's icon
+export async function edit_icon(path: string, iconPath: string | null): Promise<void> {
+	return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
+}
+
+export async function finish_install(instance: GameInstance): Promise<void> {
+	if (instance.install_stage !== 'pack_installed') {
+		const linkedData = instance.linked_data
+		if (linkedData) {
+			await install_to_existing_profile(
+				linkedData.project_id,
+				linkedData.version_id,
+				instance.name,
+				instance.path,
+			)
+		}
+	} else {
+		await install(instance.path, false)
+	}
+}

apps/app-frontend/src/helpers/project-links.ts

@@ -1,83 +0,0 @@
-import type { LocationQuery, LocationQueryRaw } from 'vue-router'
-
-const MODRINTH_HOSTNAMES = new Set(['modrinth.com', 'www.modrinth.com'])
-
-const SUPPORTED_PROJECT_TYPES = new Set([
-	'mod',
-	'modpack',
-	'resourcepack',
-	'datapack',
-	'plugin',
-	'shader',
-	'server',
-	'project',
-])
-
-export function parseModrinthLink(
-	href: string,
-): { slug: string; pathSuffix: string; url: URL } | null {
-	let url: URL
-	try {
-		url = new URL(href)
-	} catch {
-		return null
-	}
-
-	if (!MODRINTH_HOSTNAMES.has(url.hostname.toLowerCase())) {
-		return null
-	}
-
-	const segments = url.pathname.split('/').filter((p) => p.length > 0)
-	if (segments.length < 2) {
-		return null
-	}
-
-	if (SUPPORTED_PROJECT_TYPES.has(segments[0].toLowerCase())) {
-		const slug = segments[1]
-		if (!slug) {
-			return null
-		}
-
-		const rest: string[] = segments.slice(2)
-		const pathSuffix = toValidAppSubpath(rest)
-		if (pathSuffix === null) {
-			return null
-		}
-
-		return { slug, pathSuffix, url }
-	} else {
-		return null
-	}
-}
-
-const SUPPORTED_SUBPATHS = ['versions', 'gallery']
-
-function toValidAppSubpath(rest: string[]): string | null {
-	if (rest.length === 0) {
-		return ''
-	}
-
-	const subroute = rest[0].toLowerCase()
-	if (rest.length === 1 && SUPPORTED_SUBPATHS.includes(subroute)) {
-		return `/${subroute}`
-	}
-
-	if (rest.length === 2 && subroute === 'version') {
-		return `/version/${rest[1]}`
-	}
-
-	return null
-}
-
-export function mergeUrlQuery(routeQuery: LocationQuery, linkUrl: URL): LocationQueryRaw {
-	const newQuery: LocationQueryRaw = { ...routeQuery }
-	const keys = new Set<string>()
-	linkUrl.searchParams.forEach((_value, key) => {
-		keys.add(key)
-	})
-	for (const key of keys) {
-		const values = linkUrl.searchParams.getAll(key)
-		newQuery[key] = values.length === 1 ? values[0] : values
-	}
-	return newQuery
-}

apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts

@@ -1,13 +1,11 @@
 import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
 import {
 	applyCapeTexture,
-	applyEarsMod,
 	createTransparentTexture,
 	disposeCaches,
 	loadTexture,
-	removeEarsMod,
 	setupSkinModel,
-} from '@modrinth/ui'
+} from '@modrinth/utils'
 import * as THREE from 'three'
 import { reactive } from 'vue'
 
@@ -18,10 +16,12 @@ import { skinPreviewStorage } from '../storage/skin-preview-storage'
 
 export interface RenderResult {
 	forwards: string
+	backwards: string
 }
 
 export interface RawRenderResult {
 	forwards: Blob
+	backwards: Blob
 }
 
 class BatchSkinRenderer {
@@ -29,7 +29,6 @@ class BatchSkinRenderer {
 	private scene: THREE.Scene | null = null
 	private camera: THREE.PerspectiveCamera | null = null
 	private currentModel: THREE.Group | null = null
-	private transparentTexture: THREE.Texture | null = null
 	private readonly width: number
 	private readonly height: number
 
@@ -53,7 +52,6 @@ class BatchSkinRenderer {
 		})
 
 		this.renderer.outputColorSpace = THREE.SRGBColorSpace
-		this.renderer.shadowMap.enabled = false
 		this.renderer.toneMapping = THREE.NoToneMapping
 		this.renderer.toneMappingExposure = 10.0
 		this.renderer.setClearColor(0x000000, 0)
@@ -64,7 +62,7 @@ class BatchSkinRenderer {
 
 		const ambientLight = new THREE.AmbientLight(0xffffff, 2)
 		const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
-		directionalLight.castShadow = false
+		directionalLight.castShadow = true
 		directionalLight.position.set(2, 4, 3)
 		this.scene.add(ambientLight)
 		this.scene.add(directionalLight)
@@ -74,13 +72,12 @@ class BatchSkinRenderer {
 		textureUrl: string,
 		modelUrl: string,
 		capeUrl?: string,
-		earsTextureUrl?: string,
 	): Promise<RawRenderResult> {
 		this.initializeRenderer()
 
 		this.clearScene()
 
-		await this.setupModel(modelUrl, textureUrl, capeUrl, earsTextureUrl)
+		await this.setupModel(modelUrl, textureUrl, capeUrl)
 
 		const headPart = this.currentModel!.getObjectByName('Head')
 		let lookAtTarget: [number, number, number]
@@ -94,9 +91,12 @@ class BatchSkinRenderer {
 		}
 
 		const frontCameraPos: [number, number, number] = [-1.3, 1, 6.3]
-		const forwards = await this.renderView(frontCameraPos, lookAtTarget)
+		const backCameraPos: [number, number, number] = [-1.3, 1, -2.5]
 
-		return { forwards }
+		const forwards = await this.renderView(frontCameraPos, lookAtTarget)
+		const backwards = await this.renderView(backCameraPos, lookAtTarget)
+
+		return { forwards, backwards }
 	}
 
 	private async renderView(
@@ -112,42 +112,24 @@ class BatchSkinRenderer {
 
 		this.renderer.render(this.scene, this.camera)
 
-		return await new Promise<Blob>((resolve, reject) => {
-			this.renderer!.domElement.toBlob(
-				(blob) => {
-					if (blob) {
-						resolve(blob)
-					} else {
-						reject(new Error('Failed to create blob from rendered canvas'))
-					}
-				},
-				'image/webp',
-				0.9,
-			)
-		})
+		const dataUrl = this.renderer.domElement.toDataURL('image/webp', 0.9)
+		const response = await fetch(dataUrl)
+		return await response.blob()
 	}
 
-	private async setupModel(
-		modelUrl: string,
-		textureUrl: string,
-		capeUrl?: string,
-		earsTextureUrl?: string,
-	): Promise<void> {
+	private async setupModel(modelUrl: string, textureUrl: string, capeUrl?: string): Promise<void> {
 		if (!this.scene) {
 			throw new Error('Renderer not initialized')
 		}
 
-		const [{ model }, earsTexture] = await Promise.all([
-			setupSkinModel(modelUrl, textureUrl, capeUrl),
-			earsTextureUrl ? loadTexture(earsTextureUrl) : Promise.resolve(null),
-		])
+		const { model } = await setupSkinModel(modelUrl, textureUrl)
 
-		if (!capeUrl) {
-			applyCapeTexture(model, null, this.getTransparentTexture())
-		}
-
-		if (earsTexture) {
-			applyEarsMod(model, earsTexture)
+		if (capeUrl) {
+			const capeTexture = await loadTexture(capeUrl)
+			applyCapeTexture(model, capeTexture)
+		} else {
+			const transparentTexture = createTransparentTexture()
+			applyCapeTexture(model, null, transparentTexture)
 		}
 
 		const group = new THREE.Group()
@@ -159,39 +141,39 @@ class BatchSkinRenderer {
 		this.currentModel = group
 	}
 
-	private getTransparentTexture(): THREE.Texture {
-		if (!this.transparentTexture) {
-			this.transparentTexture = createTransparentTexture()
+	private clearScene(): void {
+		if (!this.scene) return
+
+		while (this.scene.children.length > 0) {
+			const child = this.scene.children[0]
+			this.scene.remove(child)
+
+			if (child instanceof THREE.Mesh) {
+				if (child.geometry) child.geometry.dispose()
+				if (child.material) {
+					if (Array.isArray(child.material)) {
+						child.material.forEach((material) => material.dispose())
+					} else {
+						child.material.dispose()
+					}
+				}
+			}
 		}
 
-		return this.transparentTexture
-	}
+		const ambientLight = new THREE.AmbientLight(0xffffff, 2)
+		const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
+		directionalLight.castShadow = true
+		directionalLight.position.set(2, 4, 3)
+		this.scene.add(ambientLight)
+		this.scene.add(directionalLight)
 
-	private clearScene(): void {
-		if (!this.scene || !this.currentModel) return
-
-		removeEarsMod(this.currentModel)
-		this.scene.remove(this.currentModel)
-		this.currentModel.clear()
 		this.currentModel = null
 	}
 
 	public dispose(): void {
-		this.clearScene()
-
-		if (this.transparentTexture) {
-			this.transparentTexture.dispose()
-			this.transparentTexture = null
-		}
-
 		if (this.renderer) {
 			this.renderer.dispose()
 		}
-
-		this.renderer = null
-		this.scene = null
-		this.camera = null
-
 		disposeCaches()
 	}
 }
@@ -210,12 +192,8 @@ function getModelUrlForVariant(variant: string): string {
 export const skinBlobUrlMap = reactive(new Map<string, RenderResult>())
 export const headBlobUrlMap = reactive(new Map<string, string>())
 const DEBUG_MODE = false
-const SKIN_PREVIEW_RENDER_VERSION = 'ears-2-fixed-uvs'
 
 let sharedRenderer: BatchSkinRenderer | null = null
-let latestPreviewGeneration = 0
-let previewGenerationQueue: Promise<void> = Promise.resolve()
-
 function getSharedRenderer(): BatchSkinRenderer {
 	if (!sharedRenderer) {
 		sharedRenderer = new BatchSkinRenderer()
@@ -223,10 +201,6 @@ function getSharedRenderer(): BatchSkinRenderer {
 	return sharedRenderer
 }
 
-export function getSkinPreviewKey(skin: Skin): string {
-	return `${SKIN_PREVIEW_RENDER_VERSION}+${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-}
-
 export function disposeSharedRenderer(): void {
 	if (sharedRenderer) {
 		sharedRenderer.dispose()
@@ -239,7 +213,7 @@ export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
 	const validHeadKeys = new Set<string>()
 
 	for (const skin of skins) {
-		const key = getSkinPreviewKey(skin)
+		const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
 		const headKey = `${skin.texture_key}-head`
 		validKeys.add(key)
 		validHeadKeys.add(headKey)
@@ -382,29 +356,11 @@ export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
 	return await generateHeadRender(skin)
 }
 
-export function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
-	const generation = ++latestPreviewGeneration
-	const skinsSnapshot = [...skins]
-	const capesSnapshot = [...capes]
-
-	const generationPromise = previewGenerationQueue.then(() =>
-		generateSkinPreviewsForGeneration(skinsSnapshot, capesSnapshot, generation),
-	)
-
-	previewGenerationQueue = generationPromise.catch(() => {})
-
-	return generationPromise
-}
-
-async function generateSkinPreviewsForGeneration(
-	skins: Skin[],
-	capes: Cape[],
-	generation: number,
-): Promise<void> {
-	const isCurrentGeneration = () => generation === latestPreviewGeneration
-
+export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
 	try {
-		const skinKeys = skins.map(getSkinPreviewKey)
+		const skinKeys = skins.map(
+			(skin) => `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`,
+		)
 		const headKeys = skins.map((skin) => `${skin.texture_key}-head`)
 
 		const [cachedSkinPreviews, cachedHeadPreviews] = await Promise.all([
@@ -412,35 +368,33 @@ async function generateSkinPreviewsForGeneration(
 			headStorage.batchRetrieve(headKeys),
 		])
 
-		if (!isCurrentGeneration()) return
-
 		for (let i = 0; i < skins.length; i++) {
 			const skinKey = skinKeys[i]
 			const headKey = headKeys[i]
 
 			const rawCached = cachedSkinPreviews[skinKey]
-			if (rawCached && !skinBlobUrlMap.has(skinKey)) {
+			if (rawCached) {
 				const cached: RenderResult = {
 					forwards: URL.createObjectURL(rawCached.forwards),
+					backwards: URL.createObjectURL(rawCached.backwards),
 				}
 				skinBlobUrlMap.set(skinKey, cached)
 			}
 
 			const cachedHead = cachedHeadPreviews[headKey]
-			if (cachedHead && !headBlobUrlMap.has(headKey)) {
+			if (cachedHead) {
 				headBlobUrlMap.set(headKey, URL.createObjectURL(cachedHead))
 			}
 		}
 
 		for (const skin of skins) {
-			if (!isCurrentGeneration()) return
-
-			const key = getSkinPreviewKey(skin)
+			const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
 
 			if (skinBlobUrlMap.has(key)) {
 				if (DEBUG_MODE) {
 					const result = skinBlobUrlMap.get(key)!
 					URL.revokeObjectURL(result.forwards)
+					URL.revokeObjectURL(result.backwards)
 					skinBlobUrlMap.delete(key)
 				} else continue
 			}
@@ -463,13 +417,11 @@ async function generateSkinPreviewsForGeneration(
 				await get_normalized_skin_texture(skin),
 				modelUrl,
 				cape?.texture,
-				skin.texture,
 			)
 
-			if (!isCurrentGeneration()) return
-
 			const renderResult: RenderResult = {
 				forwards: URL.createObjectURL(rawRenderResult.forwards),
+				backwards: URL.createObjectURL(rawRenderResult.backwards),
 			}
 
 			skinBlobUrlMap.set(key, renderResult)
@@ -487,12 +439,9 @@ async function generateSkinPreviewsForGeneration(
 		}
 	} finally {
 		disposeSharedRenderer()
+		await cleanupUnusedPreviews(skins)
 
-		if (isCurrentGeneration()) {
-			await cleanupUnusedPreviews(skins)
-
-			await skinPreviewStorage.debugCalculateStorage()
-			await headStorage.debugCalculateStorage()
-		}
+		await skinPreviewStorage.debugCalculateStorage()
+		await headStorage.debugCalculateStorage()
 	}
 }

apps/app-frontend/src/helpers/settings.ts

@@ -1,6 +1,6 @@
 /**
  * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank instance object, where the Rust struct is serialized,
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'