wip: clean up experimental api

.agents/skills/api-module/SKILL.md

@@ -1,23 +0,0 @@
----
-name: api-module
-description: Add an API endpoint module to packages/api-client from an OpenAPI schema. Use for new backend endpoints, API client modules, or tasks that provide an OpenAPI schema.
----
-
-# Add an API Module
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the API module standard](../../../standards/frontend/ADDING_API_MODULES.md) in full.
-
-1. Identify the OpenAPI schema from the request. If more than one schema is possible, ask the user to select one.
-2. Read the schema. Identify each endpoint, HTTP method, request type, response type, and path parameter.
-3. Get the service and version from the URL prefix. For example, map `/v3/projects` to `labrinth/v3/`.
-4. Define the API types in `types.ts`. Make each type match the schema exactly.
-5. Do not change, rename, or remove API fields.
-6. Make a module class that extends `AbstractModule`. Implement each endpoint with `this.client.request()` or `this.client.upload()`.
-7. Use the request-option pattern from the standard. Do not call `$fetch`, `fetch`, or another HTTP client directly.
-8. Add the module to `MODULE_REGISTRY` so the client can instantiate it.
-9. Export new service types from the applicable barrel `index.ts`.
-10. Check the module paths, registry key, public type exports, and endpoint types.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/api-module/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Add API Module"
-  short_description: "Add typed API client modules from OpenAPI"
-  default_prompt: "Use $api-module to add an API client module from this OpenAPI schema."

.agents/skills/cross-platform-pages/SKILL.md

@@ -1,38 +0,0 @@
----
-name: cross-platform-pages
-description: Convert a page to the shared Modrinth page system for the website and desktop app. Use for shared layouts, wrapped layouts, or platform dependency-injection contracts.
----
-
-# Convert a Cross-Platform Page
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read these standards in full:
-
-- [Cross-platform pages](../../../standards/frontend/CROSS_PLATFORM_PAGES.md)
-- [Dependency injection](../../../standards/frontend/DEPENDENCY_INJECTION.md)
-
-1. Identify the target page from the request.
-2. Read the page and its route shell. Identify data sources, mutations, navigation, and platform APIs.
-3. Use a wrapped layout when both platforms use the same API source and page logic.
-4. Use a shared layout when platform data or operations have different implementations.
-
-For a shared layout:
-
-1. Define a provider contract for all platform operations.
-2. Put common UI and state logic in the shared layout.
-3. Put reusable search, filter, and selection logic in local composables.
-4. Implement the contract in `apps/frontend/` and `apps/app-frontend/`.
-5. Use optional contract fields only for capabilities that are not available on both platforms.
-
-For a wrapped layout:
-
-1. Move the page to `packages/ui/src/layouts/wrapped/` and preserve its route structure.
-2. Replace platform-only imports with common utilities or provider calls.
-3. Make each frontend route shell render the wrapped component.
-4. Match primary query options in both route shells when the layout uses `ReadyTransition` and `useReadyState`.
-5. Prefetch these queries with `ensureQueryData`, as the standard specifies.
-
-Check that both route shells resolve their imports. Check that all required provider fields have implementations.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/cross-platform-pages/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Convert Cross-Platform Page"
-  short_description: "Share pages across the web and desktop app"
-  default_prompt: "Use $cross-platform-pages to convert this page for the website and desktop app."

.agents/skills/figma-mcp/SKILL.md

@@ -1,21 +0,0 @@
----
-name: figma-mcp
-description: Convert a Figma design into a Modrinth Vue page or component. Use when a request provides a Figma URL or asks to implement a Figma layout.
----
-
-# Implement a Figma Design
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read `packages/ui/AGENTS.md` in full.
-
-1. Load the available Figma design-to-code instructions and follow the MCP tool guidance.
-2. Call `get_design_context` first with `clientLanguages: "typescript,html,css"` and `clientFrameworks: "vue"`.
-3. Treat the result as reference code and adapt it to the Modrinth codebase.
-4. Map Figma color variables to the applicable `surface-*` and `text-*` tokens. Do not use aliased Figma names directly.
-5. Reuse applicable components from `packages/ui/src/components/` before creating new ones. Also refer to `standards/frontend/COMPONENT_STRUCTURE.md`
-6. Read `packages/assets/styles/variables.scss` when Figma does not supply a required token.
-7. Use exact spacing values from the design.
-8. Implement the result as a Vue SFC with Tailwind classes and the existing component library.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/figma-mcp/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Implement Figma Design"
-  short_description: "Build Modrinth Vue UI from Figma designs"
-  default_prompt: "Use $figma-mcp to implement this Figma design as a Modrinth Vue component."

.agents/skills/i18n-pass/SKILL.md

@@ -1,32 +0,0 @@
----
-name: i18n-pass
-description: Convert hard-coded English text in changed Vue components to the @modrinth/ui localization system. Use for an i18n pass, untranslated-string review, pull request, or component migration.
----
-
-# Do an Internationalization Pass
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the internationalization standard](../../../standards/frontend/INTERNATIONALIZATION.md) in full.
-
-1. Identify the scope from the request.
-2. For a pull request, use `gh pr diff <number>` to identify changed files.
-3. For a file path, inspect that file.
-4. When the request gives no scope, inspect the current uncommitted diff.
-5. Limit the pass to changed `.vue` files.
-6. Find user-visible text in templates and scripts.
-
-Check inner text, `alt`, `placeholder`, `aria-label`, buttons, tooltips, notifications, dropdown labels, and error messages.
-
-Do not change dynamic expressions, HTML tag names, CSS classes, internal identifiers, or log messages.
-
-1. Define stable message IDs with `defineMessage` or `defineMessages`.
-2. Replace simple text with `formatMessage()` calls.
-3. Use `<IntlFormatted>` for text that contains links or markup.
-4. Use ICU selections and plurals when grammar depends on a value.
-5. Add a space before `}}` when an ICU placeholder ends at the Vue delimiter.
-6. Do not change component logic, layout, or reactivity.
-7. Do not edit localization JSON files. The user maintains those files.
-8. Check the changed templates again for hard-coded English text.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/i18n-pass/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Run Internationalization Pass"
-  short_description: "Localize user-visible text in Vue files"
-  default_prompt: "Use $i18n-pass to localize the user-visible text in these changed Vue files."

.agents/skills/review-changelog/SKILL.md

@@ -1,40 +0,0 @@
----
-name: review-changelog
-description: Review the latest packages/blog/changelog.ts entry against the Modrinth changelog standard. Use before a pull request or when asked to review or lint a changelog entry.
----
-
-# Review a Changelog Entry
-
-Read [the changelog standard](../../../standards/maintaining/CHANGELOG.md) in full before the review.
-
-1. Open `packages/blog/changelog.ts`.
-2. Find the first entry in the `VERSIONS` array.
-3. If the request names `web`, `hosting`, or `app`, review the latest entry for that product.
-4. Otherwise, review the latest entry and all adjacent entries with the same date.
-
-Check the entry structure:
-
-- `date` contains a valid ISO 8601 timestamp.
-- `product` is `web`, `hosting`, or `app`.
-- An `app` entry has a `version` value.
-- A `web` or `hosting` entry does not have a `version` value.
-- Standard headings are `## Added`, `## Changed`, `## Fixed`, and `## Security`.
-- A featured release can use a linked heading.
-- Flag the legacy `## Improvements` heading.
-
-Check each bullet:
-
-- The voice and tense agree with the section.
-- The first verb agrees with the section.
-- The bullet describes user-visible behavior, not implementation.
-- The bullet identifies the applicable page, tab, modal, or feature.
-- The bullet contains one sentence, uses sentence case, and ends with a period.
-- Product and UI names use the public labels.
-- The bullet does not contain filler, vague intensifiers, apologies, or internal references.
-- The bullet is not a duplicate detail of a larger listed change.
-
-Group findings by entry. For each finding, show the original bullet and a proposed replacement.
-
-If the entry has no findings, state this result. Do not edit the changelog unless the user asks you to apply fixes.
-
-When the user asks for fixes, preserve tab indentation and template-literal formatting.

.agents/skills/review-changelog/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Review Changelog"
-  short_description: "Review changelog entries for style problems"
-  default_prompt: "Use $review-changelog to review the latest changelog entry."

.agents/skills/tanstack-query/SKILL.md

@@ -1,39 +0,0 @@
----
-name: tanstack-query
-description: Convert Vue server-state code to TanStack Query. Use for useQuery, useMutation, cache invalidation, optimistic updates, or replacement of useAsyncData and manual ref patterns.
----
-
-# Convert Data Code to TanStack Query
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the TanStack Query standard](../../../standards/frontend/FETCHING_DATA.md) in full.
-
-1. Identify the target file from the request.
-2. Find `useAsyncData`, `useFetch`, manual API refs, and fetch calls in `onMounted`.
-3. Identify mutations that use manual loading, error, or result refs.
-
-For queries:
-
-1. Replace manual fetch logic with `useQuery`.
-2. Get `api-client` with `injectModrinthClient()`.
-3. Use a hierarchical query key with the resource, qualifier, and parameters.
-4. Use a computed query key for reactive parameters.
-5. Use a computed `enabled` option when the query depends on other data.
-6. Use a shared query-option factory when multiple components use the query.
-
-For mutations:
-
-1. Replace manual mutation state with `useMutation`.
-2. Invalidate or update related query data after success.
-3. Use an optimistic update only when the UI needs an immediate response.
-4. Cancel the applicable query and save its prior data before an optimistic update.
-5. Restore the prior data after an error. Invalidate the query after settlement.
-
-Remove manual loading and error refs that TanStack Query replaces. Remove obsolete `onMounted` fetch calls.
-
-Keep Nuxt SSR behavior. Match route-shell prefetch options when `ReadyTransition` and `useReadyState` depend on the query.
-
-Check query keys, invalidation prefixes, reactive values, and rollback data.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/tanstack-query/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Migrate to TanStack Query"
-  short_description: "Migrate Vue server state to TanStack Query"
-  default_prompt: "Use $tanstack-query to migrate this Vue component to TanStack Query."

.cargo/config.toml

@@ -1,5 +1,5 @@
 # Windows has stack overflows when calling from Tauri, so we increase the default stack size used by the compiler
-[target."cfg(windows)"]
+[target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
 
 [target.x86_64-pc-windows-msvc]

.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/merge-queue-ci-skipper/action.yml

@@ -1,181 +0,0 @@
-# MIT License
-#
-# Copyright (c) 2024 CARIAD SE
-#
-# Permission is hereby granted, free of charge, to any person obtaining a copy
-# of this software and associated documentation files (the "Software"), to deal
-# in the Software without restriction, including without limitation the rights
-# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-# copies of the Software, and to permit persons to whom the Software is
-# furnished to do so, subject to the following conditions:
-#
-# The above copyright notice and this permission notice shall be included in all
-# copies or substantial portions of the Software.
-#
-# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-# SOFTWARE.
-
-name: 'Merge Queue CI Check Skipper'
-description: 'Outputs `skip-check` as `true` if this is running as part of merge queue checks and the same checks have already been executed in the PR itself.'
-inputs:
-  secret:
-    description: 'Optional GitHub Secret that can access branch protection rules using the administration:read permission'
-    required: false
-outputs:
-  skip-check:
-    description: 'Skip Check (boolean)'
-    value: ${{ steps.passed-checks.outputs.can-skip-checks }}
-runs:
-  using: 'composite'
-  steps:
-    - name: Checkout code
-      uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
-      with:
-        fetch-depth: 0
-
-    - name: Extract PR Number and Commit ID
-      id: extract-pr-info
-      uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
-      with:
-        script: |
-          const githubRef = process.env.GITHUB_REF;
-          const regex = /^refs\/heads\/gh-readonly-queue\/([a-zA-Z0-9.\-_\/]+)\/pr-(\d+)-([a-f0-9]+)$/;
-
-          if (regex.test(githubRef)) {
-            const [, targetBranchName, prNumber, commitId] = githubRef.match(regex);
-            core.setOutput('targetBranchName', targetBranchName);
-            core.setOutput('prNumber', prNumber);
-            core.setOutput('commitId', commitId);
-          } else {
-            console.log(`GITHUB_REF is not a merge queue ref, setting CAN_SKIP_CHECKS to false: ${githubRef}`);
-            core.exportVariable('CAN_SKIP_CHECKS', 'false');
-          }
-
-    - name: Print PR Number and Target Commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        echo "Target Branch Name: ${{ steps.extract-pr-info.outputs.targetBranchName }}"
-        echo "PR Number: ${{ steps.extract-pr-info.outputs.prNumber }}"
-        echo "Target Commit ID: ${{ steps.extract-pr-info.outputs.commitId }}"
-
-    - name: Check if merge queue entry was enqueued as head of the queue
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        targetBranchHead=$(git rev-parse origin/${{ steps.extract-pr-info.outputs.targetBranchName }})
-        if [[ "$targetBranchHead" != "${{ steps.extract-pr-info.outputs.commitId }}" ]]; then
-          echo "'${{ steps.extract-pr-info.outputs.targetBranchName }}' branch commit ID does not match PR commit ID. This Merge Queue run was not head of the queue when it was enqueued. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        else
-          echo "This merge queue entry is targeting '${{ steps.extract-pr-info.outputs.targetBranchName }}' directly."
-        fi
-
-    - name: Get PR Branch
-      id: get-pr-branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        GH_TOKEN: ${{ github.token }}
-      run: |
-        prNumber=${{ steps.extract-pr-info.outputs.prNumber }}
-        branchName=$(gh pr view ${prNumber} --json headRefName -q '.headRefName')
-        echo "prBranch=$branchName" >> "$GITHUB_OUTPUT"
-
-    - name: Print PR Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        PR_BRANCH: ${{ steps.get-pr-branch.outputs.prBranch }}
-      run: |
-        echo "PR Branch: $PR_BRANCH"
-
-    - name: Check if PR branch contains the Merge Queue target commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        PR_BRANCH: ${{ steps.get-pr-branch.outputs.prBranch }}
-        COMMIT_ID: ${{ steps.extract-pr-info.outputs.commitId }}
-        TARGET_BRANCH: ${{ steps.extract-pr-info.outputs.targetBranchName }}
-      run: |
-        # Get the branch name from previous steps
-        branch_name="origin/$PR_BRANCH"
-        commit_id="$COMMIT_ID"
-
-        # Check if the branch history contains the commit
-        if git branch -r --contains "$commit_id" | grep -qF "$branch_name"; then
-          echo "Branch '$branch_name' contains commit '$commit_id'. It is up to date with $TARGET_BRANCH."
-        else
-          echo "Branch '$branch_name' does not contain commit '$commit_id'. It is outdated. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compare PR Branch with Current Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        PR_BRANCH: ${{ steps.get-pr-branch.outputs.prBranch }}
-      run: |
-        if git diff --quiet "origin/$PR_BRANCH"; then
-          echo "No differences found. PR branch is identical with this merge queue branch."
-        else
-          echo "Differences detected. PR branch has been updated after PR was added to merge queue. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compute/publish skip result
-      id: passed-checks
-      uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
-      env:
-        SECRET: ${{ inputs.secret }}
-        PR_BRANCH: ${{ steps.get-pr-branch.outputs.prBranch }}
-        TARGET_BRANCH: ${{ steps.extract-pr-info.outputs.targetBranchName }}
-      with:
-        github-token: ${{ inputs.secret != '' && inputs.secret || github.token }}
-        script: |
-          if (process.env.CAN_SKIP_CHECKS == "false") {
-            console.log("Setting CAN_SKIP_CHECKS to false");
-            core.setOutput("can-skip-checks", false);
-            return;
-          }
-
-          const secretProvided = !!process.env.SECRET;
-          if (!secretProvided) {
-            console.log("secret input not set, assuming all checks have passed. Ensure 'Require status checks to pass before merging' is enabled, or provide a secret with administration:read.");
-            core.setOutput("can-skip-checks", true);
-            return;
-          }
-
-          const { data: branchProtection } = await github.rest.repos.getBranchProtection({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            branch: process.env.TARGET_BRANCH,
-          });
-          const requiredCheckNames = branchProtection.required_status_checks.contexts;
-          console.log(`requiredCheckNames = ${requiredCheckNames}`);
-
-          const { data: checks } = await github.rest.checks.listForRef({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            ref: `refs/heads/${process.env.PR_BRANCH}`,
-          });
-
-          console.log(`checks.check_runs = ${checks.check_runs.map(check => `${check.status},${check.conclusion},${check.name};`)}`);
-          const nonSuccessfulChecks = checks.check_runs.filter(check => check.status !== "completed" || check.conclusion !== "success");
-          const nonSuccessfulCheckNames = nonSuccessfulChecks.map(check => check.name);
-          console.log(`nonSuccessfulCheckNames = ${nonSuccessfulCheckNames}`);
-
-          const missingChecks = requiredCheckNames.filter(checkName => nonSuccessfulCheckNames.includes(checkName));
-
-          if (missingChecks.length > 0) {
-            console.log(`Required checks not passed, cannot skip merge queue checks. Setting CAN_SKIP_CHECKS to false. Missing checks: ${missingChecks.join(', ')}`);
-            core.setOutput("can-skip-checks", false);
-          } else {
-            console.log("No missing checks. Setting CAN_SKIP_CHECKS to true.");
-            core.setOutput("can-skip-checks", true);
-          }

.github/workflows/api-client-release.yml

@@ -1,125 +0,0 @@
-name: API client release
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - .github/workflows/api-client-release.yml
-      - packages/api-client/**
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-  id-token: write
-
-jobs:
-  release:
-    if: github.repository_owner == 'modrinth' && github.ref == 'refs/heads/main'
-    # npm Trusted Publishing requires a GitHub-hosted runner.
-    runs-on: ubuntu-latest
-    env:
-      FORCE_COLOR: 3
-      PACKAGE_DIR: packages/api-client
-      PACKAGE_NAME: '@modrinth/api-client'
-      BUMP_TYPE: minor
-    steps:
-      - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-        with:
-          fetch-depth: 0
-
-      - name: Check for api-client changes
-        id: changes
-        run: |
-          if [ "${{ github.event.before }}" = "0000000000000000000000000000000000000000" ]; then
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          if git diff --quiet "${{ github.event.before }}" "$GITHUB_SHA" -- "$PACKAGE_DIR"; then
-            echo "changed=false" >> "$GITHUB_OUTPUT"
-          else
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Setup Node
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
-        with:
-          node-version-file: .nvmrc
-          registry-url: https://registry.npmjs.org
-
-      - name: Enable Corepack
-        if: steps.changes.outputs.changed == 'true'
-        run: corepack enable
-
-      - name: Get pnpm store path
-        if: steps.changes.outputs.changed == 'true'
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> "$GITHUB_OUTPUT"
-
-      - name: Restore pnpm cache
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Install dependencies
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm install --frozen-lockfile --filter @modrinth/api-client...
-
-      - name: Resolve release version
-        if: steps.changes.outputs.changed == 'true'
-        id: version
-        run: |
-          CURRENT_VERSION_JSON="$(npm view "${PACKAGE_NAME}" version --json)"
-          CURRENT_VERSION="$(
-            jq -nr \
-              --argjson version "$CURRENT_VERSION_JSON" \
-              'if ($version | type) == "array" then $version[-1] else $version end'
-          )"
-
-          NEXT_VERSION="$(
-            jq -nr \
-              --arg version "$CURRENT_VERSION" \
-              --arg bump "$BUMP_TYPE" '
-                def semver:
-                  capture("^(?<major>[0-9]+)\\.(?<minor>[0-9]+)\\.(?<patch>[0-9]+)$")
-                  | with_entries(.value |= tonumber);
-
-                ($version | semver) as $current
-                | if $bump == "major" then "\($current.major + 1).0.0"
-                  elif $bump == "minor" then "\($current.major).\($current.minor + 1).0"
-                  elif $bump == "patch" then "\($current.major).\($current.minor).\($current.patch + 1)"
-                  else error("Unsupported bump type: \($bump)")
-                  end
-              '
-          )"
-
-          PACKAGE_JSON="$(mktemp)"
-          jq --tab --arg version "$NEXT_VERSION" '.version = $version' "$PACKAGE_DIR/package.json" > "$PACKAGE_JSON"
-          mv "$PACKAGE_JSON" "$PACKAGE_DIR/package.json"
-
-          echo "current_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "published_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "version=$NEXT_VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Build api-client
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm --filter @modrinth/api-client build
-
-      - name: Check package contents
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm pack --dry-run
-
-      - name: Publish api-client
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm publish --access public --provenance --no-git-checks

.github/workflows/cancel-pr-workflow-on-merge.yml

@@ -1,22 +0,0 @@
-name: Cancel PR Workflows on Merge
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-permissions:
-  actions: write
-
-jobs:
-  cancel:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@d07a454dad7609a92316b57b23c9ccfd4f59af66 # 0.13.1
-        with:
-          workflow_id: all
-          access_token: ${{ secrets.GITHUB_TOKEN }}
-          ignore_sha: true
-          pr_number: ${{ github.event.pull_request.number }}

.github/workflows/changelog-comment.yml

@@ -1,121 +0,0 @@
-name: Changelog Comment
-
-on:
-  pull_request_target:
-    types: [opened, reopened]
-  workflow_dispatch:
-    inputs:
-      pr_number:
-        description: 'PR number to post the changelog comment on (for testing)'
-        required: true
-        type: number
-
-jobs:
-  comment:
-    name: Post changelog comment
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Post or update changelog comment
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
-        with:
-          github-token: ${{ secrets.CROWDIN_GH_TOKEN }}
-          script: |
-            const marker = '<!-- changelog -->';
-            const mergedMarker = '<!-- changelog-merged -->';
-
-            const sections = ['### Added', '', '### Changed', '', '### Deprecated', '', '### Removed', '', '### Fixed', '', '### Security'].join('\n');
-            const productBlock = (name) => `<details>\n<summary>${name}</summary>\n\n${sections}\n\n</details>`;
-
-            const template = [
-              marker,
-              '## Pull request changelog',
-              '',
-              '<!-- Fill in the changelog under each product area this PR affects.',
-              '     Empty sections are ignored. Leave a product collapsed/empty',
-              '     if it doesn\'t apply. -->',
-              '',
-              productBlock('App'),
-              '',
-              productBlock('Website'),
-              '',
-              productBlock('Hosting'),
-            ].join('\n');
-
-            // Resolve PR number from event or workflow_dispatch input
-            const prNumber = context.payload.pull_request?.number
-              ?? parseInt('${{ github.event.inputs.pr_number }}', 10);
-
-            if (!prNumber || isNaN(prNumber)) {
-              core.setFailed('Could not determine PR number');
-              return;
-            }
-
-            // Get PR details (need base ref for child PR detection)
-            const { data: pr } = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            // Check if bot comment already exists
-            const { data: comments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-            });
-
-            const existingComment = comments.find(c => c.body.includes(marker));
-            if (existingComment) {
-              core.info('Changelog comment already exists, skipping');
-              return;
-            }
-
-            // Post the template comment
-            await github.rest.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-              body: template,
-            });
-
-            core.info(`Posted changelog comment on PR #${prNumber}`);
-
-            // Detect child PR: check if this PR's base branch is another open PR's head branch
-            const baseRef = pr.base.ref;
-
-            if (baseRef === 'main' || baseRef === 'prod') {
-              return;
-            }
-
-            // Look for a parent PR whose head branch matches our base branch
-            const { data: candidatePRs } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${baseRef}`,
-            });
-
-            if (candidatePRs.length === 0) {
-              return;
-            }
-
-            const parentPR = candidatePRs[0];
-            core.info(`Detected parent PR #${parentPR.number} for child PR #${prNumber}`);
-
-            // Add admonition to child PR's changelog comment
-            const { data: childComments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-            });
-
-            const childChangelogComment = childComments.find(c => c.body.includes(marker));
-            if (childChangelogComment && !childChangelogComment.body.includes(mergedMarker)) {
-              await github.rest.issues.updateComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: childChangelogComment.id,
-                body: `${mergedMarker}\n> [!NOTE]\n> This changelog has been merged into the changelog for #${parentPR.number}\n\n${childChangelogComment.body}`,
-              });
-            }

.github/workflows/check-generic.yml

@@ -2,7 +2,7 @@ on:
   pull_request:
   push:
     branches:
-      - main
+      - master
 
 env:
   CARGO_TERM_COLOR: always
@@ -12,15 +12,15 @@ jobs:
   typos:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-      - uses: crate-ci/typos@bee27e3a4fd1ea2111cf90ab89cd076c870fce14 # v1.48.0
+      - uses: actions/checkout@v4
+      - uses: crate-ci/typos@v1.43.1
 
   # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
   tombi:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-      - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9
+      - uses: actions/checkout@v4
+      - uses: taiki-e/install-action@v2
         with:
           tool: tombi
       - run: tombi lint

.github/workflows/check-rust.yml

@@ -2,19 +2,18 @@ on:
   pull_request:
   push:
     branches:
-      - main
+      - master
 
 env:
   CARGO_TERM_COLOR: always
-  CARGO_INCREMENTAL: 0
   SQLX_OFFLINE: true
 
 jobs:
   shear:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-      - uses: dtolnay/rust-toolchain@4cda84d5c5c54efe2404f9d843567869ab1699d4 # stable
-      - uses: cargo-bins/cargo-binstall@ead08b90bd7b2e6d81963fb9cf0b7239f66d5db4 # v1.21.0
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: cargo-bins/cargo-binstall@main
       - run: cargo binstall --no-confirm cargo-shear
       - run: cargo shear

.github/workflows/cmd-deploy.yml

@@ -1,24 +0,0 @@
-name: Deploy Command
-run-name: Deploy PR #${{ github.event.client_payload.github.payload.issue.number }}
-
-on:
-  repository_dispatch:
-    types: [deploy-command]
-
-permissions:
-  contents: read
-  actions: read
-
-jobs:
-  deploy:
-    if: ${{ github.event.client_payload.pull_request.head.repo.full_name == github.repository }}
-    uses: SparkUniverse/workflows/.github/workflows/deploy-command.yaml@main
-    secrets:
-      ARGOCD_DEPLOY_KEY: ${{ secrets.ARGOCD_DEPLOY_KEY }}
-      CMD_DISPATCH_GH_TOKEN: ${{ secrets.SLASH_CMD_GH_TOKEN }}
-    with:
-      application-set: labrinth
-      build-workflow: labrinth-build.yml
-      branch: ${{ github.event.client_payload.pull_request.head.ref }}
-      issue-number: ${{ github.event.client_payload.github.payload.issue.number }}
-      head-sha: ${{ github.event.client_payload.pull_request.head.sha }}

.github/workflows/daedalus-docker.yml

@@ -3,105 +3,33 @@ name: daedalus-docker-build
 on:
   push:
     branches:
-      - 'main'
+      - '**'
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
       - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
       - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
   merge_group:
     types: [checks_requested]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
   docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-medium-amd64' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    runs-on: ubuntu-latest
     steps:
-      - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
 
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
-        with:
-          rustflags: ''
-          cache: false
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
 
-      - name: Setup mold
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
-      - name: Build daedalus_client
-        run: cargo build --release --package daedalus_client
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/daedalus_client/docker-stage
-          cp target/release/daedalus_client apps/daedalus_client/docker-stage/daedalus_client
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
-
-      - name: Generate Docker image metadata
-        id: docker-meta
-        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
+      - name: ⚙️ Generate Docker image metadata
+        id: docker_meta
+        uses: docker/metadata-action@v5
         env:
           DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
         with:
@@ -115,19 +43,20 @@ jobs:
             org.opencontainers.image.description=Modrinth game metadata query client
             org.opencontainers.image.licenses=MIT
 
-      - name: Login to GitHub Packages
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+      - name: 🔑 Login to GitHub Packages
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build and push
-        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.0
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
         with:
-          context: ./apps/daedalus_client/docker-stage
           file: ./apps/daedalus_client/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.docker-meta.outputs.tags }}
-          labels: ${{ steps.docker-meta.outputs.labels }}
-          annotations: ${{ steps.docker-meta.outputs.annotations }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
+          cache-to: type=inline

.github/workflows/daedalus-run.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@v3
 
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.github/workflows/frontend-deploy.yml

@@ -16,68 +16,42 @@ on:
   workflow_dispatch:
   workflow_call:
     inputs:
-      preview:
-        required: false
-        type: boolean
-        description: 'Whether this is a preview deployment'
-      head_sha:
-        required: false
+      environment:
+        required: true
         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)'
-      branch_alias:
-        required: false
-        type: string
-        description: 'The persistent preview alias for the branch'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.preview && 'preview' || 'push' }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+        description: 'The environment to deploy to (staging-preview or production-preview)'
 
 jobs:
   deploy:
-    runs-on: namespace-profile-modrinth-frontend
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       deployments: write
       pull-requests: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Configure environment
         id: meta
-        env:
-          PREVIEW_INPUT: ${{ inputs.preview }}
-          REF: ${{ github.ref }}
-          DEPLOY_SHA: ${{ inputs.head_sha || github.sha }}
-          BRANCH_ALIAS: ${{ inputs.branch_alias }}
         run: |
           echo "cmd=deploy" >> $GITHUB_OUTPUT
 
-          SHA_SHORT="${DEPLOY_SHA::8}"
+          ENV_INPUT="${{ inputs.environment }}"
+          REF="${{ github.ref }}"
+          SHA_SHORT="${GITHUB_SHA::8}"
 
-          if [ "$PREVIEW_INPUT" = "true" ]; then
-            URL="https://git-$SHA_SHORT-frontend.modrinth.workers.dev"
-            STAGING_URL="https://git-$SHA_SHORT-staging-frontend.modrinth.workers.dev"
+          if [ "$ENV_INPUT" = "staging-preview" ]; then
+            echo "env=staging" >> $GITHUB_OUTPUT
+            echo "url=https://git-$SHA_SHORT-frontend-staging.modrinth.workers.dev" >> $GITHUB_OUTPUT
+            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
+
+          elif [ "$ENV_INPUT" = "production-preview" ]; then
             echo "env=production" >> $GITHUB_OUTPUT
-            echo "url=$URL" >> $GITHUB_OUTPUT
-            echo "staging_url=$STAGING_URL" >> $GITHUB_OUTPUT
-            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true --var CF_PAGES_URL:$URL" >> $GITHUB_OUTPUT
-
-            STAGING_VARS=$(jq -r '.env.staging.vars | to_entries[] | "--var \(.key):\(.value)"' ./apps/frontend/wrangler.jsonc | tr '\n' ' ')
-            echo "staging_cmd=versions upload --preview-alias git-$SHA_SHORT-staging ${STAGING_VARS}--var PREVIEW:true --var CF_PAGES_URL:$STAGING_URL" >> $GITHUB_OUTPUT
-
-            if [ -n "$BRANCH_ALIAS" ]; then
-              echo "branch_alias_url=https://$BRANCH_ALIAS-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
-              echo "staging_branch_alias_url=https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
-              echo "staging_branch_alias_cmd=versions upload --preview-alias $BRANCH_ALIAS-staging ${STAGING_VARS}--var PREVIEW:true --var CF_PAGES_URL:https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
-            fi
+            echo "url=https://git-$SHA_SHORT-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
+            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
 
           elif [ "$REF" = "refs/heads/main" ]; then
             echo "env=staging" >> $GITHUB_OUTPUT
@@ -89,24 +63,14 @@ jobs:
             echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
           fi
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Set up caches
-        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
-        with:
-          cache: |
-            rust
-            pnpm
-            apt
-
-      - name: Set up Turborepo caching
-        uses: namespace-actions/setup-turbocache@f96bd6befa13ae74b2858a5be49573640d4636f5 # v0.0.2
+          cache: pnpm
 
       - name: Inject build variables
         working-directory: ./apps/frontend
@@ -127,15 +91,15 @@ 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.preview && 'true' || 'false' }}
+          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Create Sentry release and upload sourcemaps
-        uses: getsentry/action-release@ff07929a6537bac57790c3451cf4d364aca38528 # v3.7.0
+        uses: getsentry/action-release@v3
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_ORG: modrinth
@@ -145,53 +109,17 @@ jobs:
           sourcemaps: ./apps/frontend/.output/server
           url_prefix: '~/'
 
-      - name: Install Wrangler CLI
-        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
+      - name: Deploy Cloudflare Worker
+        id: wrangler
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
           workingDirectory: ./apps/frontend
           packageManager: pnpm
-          wranglerVersion: '4.112.0'
-          command: --version
-
-      - parallel:
-          - name: Deploy Cloudflare Worker
-            id: wrangler
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
-              workingDirectory: ./apps/frontend
-              command: ${{ steps.meta.outputs.cmd }}
-
-          - name: Deploy staging Cloudflare Worker preview
-            if: ${{ inputs.preview }}
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              workingDirectory: ./apps/frontend
-              command: ${{ steps.meta.outputs.staging_cmd }}
-
-          - name: Deploy persistent Cloudflare Worker preview
-            if: ${{ inputs.preview && inputs.branch_alias != '' }}
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              workingDirectory: ./apps/frontend
-              command: versions upload --preview-alias ${{ inputs.branch_alias }} --var PREVIEW:true --var CF_PAGES_URL:${{ steps.meta.outputs.branch_alias_url }}
-
-          - name: Deploy persistent staging Cloudflare Worker preview
-            if: ${{ inputs.preview && inputs.branch_alias != '' }}
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              workingDirectory: ./apps/frontend
-              command: ${{ steps.meta.outputs.staging_branch_alias_cmd }}
+          wranglerVersion: '4.54.0'
+          command: ${{ steps.meta.outputs.cmd }}
 
       - name: Purge cache
         if: github.ref == 'refs/heads/prod'
@@ -202,23 +130,14 @@ jobs:
             --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
             https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
 
-      - name: Write deployment URLs to files
-        if: ${{ inputs.preview }}
+      - name: Write deployment URL to file
+        if: ${{ inputs.environment != '' }}
         run: |
-          echo "${{ steps.meta.outputs.url }}" > deployment-url-production.txt
-          echo "${{ steps.meta.outputs.staging_url }}" > deployment-url-staging.txt
+          echo "${{ steps.meta.outputs.url }}" > deployment-url-${{ inputs.environment }}.txt
 
-      - parallel:
-          - name: Upload production deployment URL
-            if: ${{ inputs.preview }}
-            uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-            with:
-              name: deployment-url-production
-              path: deployment-url-production.txt
-
-          - name: Upload staging deployment URL
-            if: ${{ inputs.preview }}
-            uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-            with:
-              name: deployment-url-staging
-              path: deployment-url-staging.txt
+      - name: Upload deployment URL
+        if: ${{ inputs.environment != '' }}
+        uses: actions/upload-artifact@v6
+        with:
+          name: deployment-url-${{ inputs.environment }}
+          path: deployment-url-${{ inputs.environment }}.txt

.github/workflows/frontend-preview.yml

@@ -12,180 +12,61 @@ on:
       - '.github/workflows/frontend-preview.yml'
 
 jobs:
-  metadata:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: ubuntu-latest
-    outputs:
-      branch-alias: ${{ steps.meta.outputs.branch_alias }}
-    steps:
-      - name: Configure branch alias
-        id: meta
-        run: echo "branch_alias=pr-${{ github.event.pull_request.number }}" >> $GITHUB_OUTPUT
-
   deploy:
     if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    needs: metadata
     uses: ./.github/workflows/frontend-deploy.yml
     secrets: inherit
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-deploy
-      cancel-in-progress: true
+    strategy:
+      matrix:
+        environment: [staging-preview, production-preview]
     with:
-      preview: true
-      head_sha: ${{ github.event.pull_request.head.sha }}
-      head_ref: ${{ github.event.pull_request.head.ref }}
-      branch_alias: ${{ needs.metadata.outputs.branch-alias }}
-
-  deploy-storybook:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    needs: metadata
-    runs-on: namespace-profile-modrinth-frontend
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-storybook
-      cancel-in-progress: true
-    permissions:
-      contents: read
-      deployments: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Set up caches
-        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
-        with:
-          cache: |
-            pnpm
-
-      - name: Install dependencies
-        working-directory: ./packages/ui
-        run: pnpm install
-
-      - 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
-
-      - name: Install Wrangler CLI
-        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-        with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          workingDirectory: ./packages/ui
-          packageManager: pnpm
-          wranglerVersion: '4.112.0'
-          command: --version
-
-      - parallel:
-          - name: Deploy Storybook preview
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              workingDirectory: ./packages/ui
-              command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
-
-          - name: Deploy persistent Storybook preview
-            uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
-            env:
-              NODE_OPTIONS: --max-old-space-size=6144
-            with:
-              apiToken: ${{ secrets.CF_API_TOKEN }}
-              accountId: ${{ secrets.CF_ACCOUNT_ID }}
-              workingDirectory: ./packages/ui
-              command: versions upload --preview-alias ${{ needs.metadata.outputs.branch-alias }}
+      environment: ${{ matrix.environment }}
 
   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: [metadata, deploy, deploy-storybook]
+    needs: deploy
     steps:
       - name: Download deployment URLs
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        uses: actions/download-artifact@v7
         with:
           pattern: deployment-url-*
           merge-multiple: true
 
       - name: Read deployment URLs
         id: urls
-        env:
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-          BRANCH_ALIAS: ${{ needs.metadata.outputs.branch-alias }}
-          STORYBOOK_RESULT: ${{ needs.deploy-storybook.result }}
-          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
         run: |
-          STAGING_SHA_URL=$(cat deployment-url-staging.txt)
-          PRODUCTION_SHA_URL=$(cat deployment-url-production.txt)
-          STAGING_BRANCH_URL="https://$BRANCH_ALIAS-staging-frontend.modrinth.workers.dev"
-          PRODUCTION_BRANCH_URL="https://$BRANCH_ALIAS-frontend.modrinth.workers.dev"
+          STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
+          PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
 
-          if [ "$STORYBOOK_RESULT" = "success" ]; then
-            STORYBOOK_SHA_URL="https://git-${HEAD_SHA::8}-storybook.modrinth.workers.dev"
-            STORYBOOK_BRANCH_URL="https://$BRANCH_ALIAS-storybook.modrinth.workers.dev"
-          else
-            STORYBOOK_SHA_URL="⚠️ Deployment $STORYBOOK_RESULT ([logs]($RUN_URL))"
-            STORYBOOK_BRANCH_URL="⚠️ Deployment $STORYBOOK_RESULT ([logs]($RUN_URL))"
-          fi
+          echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
+          echo "Staging preview URL: $STAGING_PREVIEW_URL"
 
-          echo "staging-sha-url=$STAGING_SHA_URL" >> $GITHUB_OUTPUT
-          echo "production-sha-url=$PRODUCTION_SHA_URL" >> $GITHUB_OUTPUT
-          echo "storybook-sha-url=$STORYBOOK_SHA_URL" >> $GITHUB_OUTPUT
-          echo "staging-branch-url=$STAGING_BRANCH_URL" >> $GITHUB_OUTPUT
-          echo "production-branch-url=$PRODUCTION_BRANCH_URL" >> $GITHUB_OUTPUT
-          echo "storybook-branch-url=$STORYBOOK_BRANCH_URL" >> $GITHUB_OUTPUT
+          echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
 
       - name: Find comment
         if: github.event_name == 'pull_request'
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+        uses: peter-evans/find-comment@v3
         id: fc
         with:
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
           issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
           body-includes: Frontend previews
 
       - name: Comment deploy URL on PR
         if: github.event_name == 'pull_request'
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@v5
         with:
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
           issue-number: ${{ github.event.pull_request.number }}
           comment-id: ${{ steps.fc.outputs.comment-id }}
           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 }})
-
-            ### Persistent
+            Last deployed commit is [${{ github.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.sha }})
 
             | Environment | URL |
             |-------------|-----|
-            | staging     | ${{ steps.urls.outputs.staging-branch-url }} |
-            | production  | ${{ steps.urls.outputs.production-branch-url }} |
-            | storybook   | ${{ steps.urls.outputs.storybook-branch-url }} |
-
-            ### Latest commit
-
-            | Environment | URL |
-            |-------------|-----|
-            | staging     | ${{ steps.urls.outputs.staging-sha-url }} |
-            | production  | ${{ steps.urls.outputs.production-sha-url }} |
-            | storybook   | ${{ steps.urls.outputs.storybook-sha-url }} |
+            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
+            | production  | ${{ steps.urls.outputs.production-preview-url }} |
           edit-mode: replace

.github/workflows/i18n-pull.yml

@@ -51,25 +51,14 @@ jobs:
           CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.ref }}
           token: ${{ secrets.CROWDIN_GH_TOKEN }}
 
-      - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.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
+        uses: MarcoIeni/git-config@v0.1
         env:
           GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}
 
@@ -90,7 +79,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Download translations from Crowdin
-        uses: crowdin/github-action@c7af9bc98b01694653031fef2a0dc6c7888ce9bc # v2.17.0
+        uses: crowdin/github-action@v2
         with:
           upload_sources: false
           upload_translations: false
@@ -106,11 +95,8 @@ 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
+        uses: peter-evans/create-pull-request@v7
         with:
           title: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
           body-path: .github/templates/crowdin-pr.md

.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:
 
@@ -56,21 +53,9 @@ jobs:
           CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.ref }}
-          fetch-depth: 2
-
-      - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.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
@@ -83,7 +68,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Upload translations to Crowdin
-        uses: crowdin/github-action@c7af9bc98b01694653031fef2a0dc6c7888ce9bc # v2.17.0
+        uses: crowdin/github-action@v1
         with:
           upload_sources: true
           upload_translations: false
@@ -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-build.yml

@@ -1,157 +0,0 @@
-name: Labrinth Build
-
-on:
-  push:
-    branches:
-      - 'main'
-      - 'prod'
-    paths:
-      - .github/workflows/labrinth-build.yml
-      - 'apps/labrinth/**'
-      - 'packages/**'
-      - '!packages/api-client/**'
-      - '!packages/app-lib/**'
-      - Cargo.toml
-      - Cargo.lock
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - .github/workflows/labrinth-build.yml
-      - 'apps/labrinth/**'
-      - 'packages/**'
-      - '!packages/api-client/**'
-      - '!packages/app-lib/**'
-      - Cargo.toml
-      - Cargo.lock
-  merge_group:
-    types: [checks_requested]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
-jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
-  build:
-    name: Build Labrinth
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-modrinth-labrinth' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
-    env:
-      SQLX_OFFLINE: 'true'
-      GIT_HASH: ${{ github.sha }}
-      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '20G' || '' }}
-      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
-      RUST_MIN_STACK: '16777216'
-    steps:
-      - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
-        with:
-          rustflags: ''
-          cache: false
-
-      - name: Setup mold
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
-      - name: Setup sccache
-        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
-
-      - name: Set up caches
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
-        with:
-          cache: |
-            rust
-            apt
-
-      - name: Configure sccache
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        run: nsc cache sccache setup --cache_name default >> "$GITHUB_ENV"
-
-      - name: Install build dependencies
-        run: sudo apt-get update && sudo apt-get install -y --no-install-recommends cmake libcurl4-openssl-dev
-
-      - name: Build labrinth
-        run: cargo build --profile release-labrinth --package labrinth
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/labrinth/docker-stage
-          cp target/release-labrinth/labrinth apps/labrinth/docker-stage/labrinth
-          cp -r apps/labrinth/migrations apps/labrinth/docker-stage/migrations
-          cp -r apps/labrinth/assets apps/labrinth/docker-stage/assets
-
-      - name: Upload Docker context
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: namespace-actions/upload-artifact@f6ccaacc655aec41b93af180d1d7eef21af862d2 # v1.0.3
-        with:
-          name: labrinth-docker-context
-          retention-days: 1
-          path: apps/labrinth/docker-stage
-
-  docker-build:
-    needs: [skip-if-clean, build]
-    if: ${{ needs.skip-if-clean.outputs.internal == 'true' }}
-    uses: SparkUniverse/workflows/.github/workflows/docker-build.yaml@main
-    with:
-      image-name: labrinth
-      dockerfile-path: apps/labrinth/Dockerfile
-      artifacts-name: labrinth-docker-context
-
-  deploy:
-    needs: [skip-if-clean, docker-build]
-    if: ${{ needs.skip-if-clean.outputs.internal == 'true' && github.ref == 'refs/heads/prod' }}
-    uses: SparkUniverse/workflows/.github/workflows/argo-update.yaml@main
-    secrets:
-      ARGOCD_DEPLOY_KEY: ${{ secrets.ARGOCD_DEPLOY_KEY }}
-    with:
-      application-set: labrinth
-      branch: ${{ github.ref == 'refs/heads/prod' && 'main' || 'develop' }}
-      environment-name: ${{ github.ref == 'refs/heads/prod' && 'production' || 'staging' }}

.github/workflows/labrinth-docker.yml

@@ -0,0 +1,70 @@
+name: docker-build
+
+on:
+  push:
+    branches:
+      - '**'
+    paths:
+      - .github/workflows/labrinth-docker.yml
+      - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - .github/workflows/labrinth-docker.yml
+      - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
+  merge_group:
+    types: [checks_requested]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
+
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: ⚙️ Generate Docker image metadata
+        id: docker_meta
+        uses: docker/metadata-action@v5
+        env:
+          # GitHub Packages requires annotations metadata in at least the index descriptor to show them
+          # up properly in its UI it seems, but it's not clear about it, because the docs refer to the
+          # image manifest only. See:
+          # https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#adding-a-description-to-multi-arch-images
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        with:
+          images: ghcr.io/modrinth/labrinth
+          labels: |
+            org.opencontainers.image.title=labrinth
+            org.opencontainers.image.description=Modrinth API
+            org.opencontainers.image.licenses=AGPL-3.0-only
+          annotations: |
+            org.opencontainers.image.title=labrinth
+            org.opencontainers.image.description=Modrinth API
+            org.opencontainers.image.licenses=AGPL-3.0-only
+
+      - name: 🔑 Login to GitHub Packages
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
+        with:
+          file: ./apps/labrinth/Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          build-args: |
+            GIT_HASH=${{ fromJSON(steps.docker_meta.outputs.json).labels['org.opencontainers.image.revision'] }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
+          cache-to: type=inline

.github/workflows/slash-cmds.yml

@@ -1,20 +0,0 @@
-name: Slash Command Dispatch
-
-on:
-  issue_comment:
-    types: [created]
-
-permissions: {}
-
-jobs:
-  dispatch-command:
-    if: ${{ github.event.sender.type == 'User' && contains(fromJSON('["OWNER", "MEMBER"]'), github.event.comment.author_association) }}
-    runs-on: namespace-profile-tiny-arm64
-    steps:
-      - name: Slash Command Dispatch
-        uses: peter-evans/slash-command-dispatch@9bdcd7914ec1b75590b790b844aa3b8eee7c683a # v5.0.2
-        with:
-          token: ${{ secrets.SLASH_CMD_GH_TOKEN }}
-          issue-type: pull-request
-          commands: |
-            deploy

.github/workflows/theseus-build.yml

@@ -21,85 +21,44 @@ on:
         type: boolean
         default: false
         required: false
-      environment:
-        description: Environment
-        type: choice
-        options:
-          - prod
-          - staging
-          - 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 }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
 
 jobs:
   build:
     name: Build
-    env:
-      VITE_STRIPE_PUBLISHABLE_KEY: pk_live_51JbFxJJygY5LJFfKLVVldb10HlLt24p421OWRsTOWc5sXYFOnFUXWieSc6HD3PHo25ktx8db1WcHr36XGFvZFVUz00V9ixrCs5
-      RUSTC_WRAPPER: 'sccache'
     strategy:
       fail-fast: false
       matrix:
-        platform:
-          [
-            namespace-profile-medium-amd64-macos,
-            namespace-profile-medium-amd64-windows,
-            namespace-profile-medium-amd64,
-          ]
+        platform: [macos-latest, windows-latest, ubuntu-latest]
         include:
-          - platform: namespace-profile-medium-amd64-macos
+          - platform: macos-latest
             artifact-target-name: universal-apple-darwin
-          - platform: namespace-profile-medium-amd64-windows
+          - platform: windows-latest
             artifact-target-name: x86_64-pc-windows-msvc
-          - platform: namespace-profile-medium-amd64
+          - platform: ubuntu-latest
             artifact-target-name: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.platform }}
 
     steps:
       - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
           rustflags: ''
-          target: ${{ contains(matrix.artifact-target-name, 'darwin') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: Setup mold
-        if: contains(matrix.artifact-target-name, 'linux')
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
-      - name: Setup sccache
-        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
-
-      - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Set up caches
-        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
-        with:
-          cache: |
-            rust
-            pnpm
-
-      - name: Configure sccache
-        run: nsc cache sccache setup --cache_name default >> "$GITHUB_ENV"
+          cache: pnpm
 
       - name: Generate tauri-dev.conf.json
         shell: bash
@@ -117,47 +76,39 @@ jobs:
           EOF
 
       - name: Install Linux build dependencies
-        if: contains(matrix.artifact-target-name, 'linux')
+        if: startsWith(matrix.platform, 'ubuntu')
         run: |
           sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-
-      - name: Setup Java
-        uses: actions/setup-java@03ad4de0992f5dab5e18fcb136590ce7c4a0ac95 # v5.6.0
-        with:
-          distribution: temurin
-          java-version: 17
+          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
 
       - name: Setup Dasel
-        uses: jaxxstorm/action-install-gh-release@25e24d2d23ae098373794ef1d6faecb48ee52da8 # v3.0.0
+        uses: jaxxstorm/action-install-gh-release@v2.1.0
         with:
           repo: TomWright/dasel
           tag: v2.8.1
           extension-matching: disable
-          rename-to: ${{ contains(matrix.artifact-target-name, 'windows') && 'dasel.exe' || 'dasel' }}
+          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
       - 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
-          BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
+          APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
           echo "Setting application version to $APP_VERSION"
-          echo "Using environment $BUILD_ENVIRONMENT"
           dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
 
-          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
+          cp packages/app-lib/.env.prod packages/app-lib/.env
+
+      - name: Setup Turbo cache
+        uses: rharkor/caching-for-turbo@v1.8
 
       - name: Install dependencies
         run: pnpm install
 
       - name: Set up Windows code signing
-        if: contains(matrix.artifact-target-name, 'windows')
+        if: startsWith(matrix.platform, 'windows')
         shell: bash
         run: |
           if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
@@ -167,10 +118,9 @@ 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' }}
-        if: contains(matrix.artifact-target-name, 'darwin')
+        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: startsWith(matrix.platform, 'macos')
         env:
-          TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
           ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
@@ -182,8 +132,8 @@ 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' }}
-        if: contains(matrix.artifact-target-name, 'linux')
+        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: startsWith(matrix.platform, 'ubuntu')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -193,9 +143,9 @@ 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.artifact-target-name, 'windows')
+        if: startsWith(matrix.platform, 'windows')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -204,7 +154,7 @@ jobs:
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
 
       - name: Upload app bundles
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4
         with:
           name: App bundle (${{ matrix.artifact-target-name }})
           path: |

.github/workflows/theseus-release.yml

@@ -1,74 +1,47 @@
 name: Modrinth App release
 on:
-  workflow_run:
-    workflows: ['Modrinth App build']
-    types: [completed]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+  workflow_dispatch:
+    inputs:
+      version-tag:
+        description: Version tag to release to the wide public
+        type: string
+        required: true
+      release-notes:
+        description: Release notes to include in the Tauri version manifest
+        default: A new release of the Modrinth App is available!
+        type: string
+        required: true
 
 jobs:
   release:
     name: Release Modrinth App
-    if: >-
-      github.event.workflow_run.conclusion == 'success' &&
-      github.event.workflow_run.event == 'push' &&
-      startsWith(github.event.workflow_run.head_branch, 'v')
-    runs-on: namespace-profile-medium-amd64
+    runs-on: ubuntu-latest
+
     env:
-      VERSION_TAG: ${{ github.event.workflow_run.head_branch }}
       LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
       WINDOWS_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-pc-windows-msvc)
       MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME: App bundle (universal-apple-darwin)
       LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com
 
     steps:
-      - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Verify ref is a tag
-        env:
-          GH_TOKEN: ${{ github.token }}
-          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
-        run: |
-          tag_sha=$(gh api "repos/${{ github.repository }}/git/refs/tags/${VERSION_TAG}" --jq '.object.sha' 2>/dev/null || true)
-          if [ -z "$tag_sha" ]; then
-            echo "::error::${VERSION_TAG} is not a git tag in this repo"
-            exit 1
-          fi
-          if [ "$tag_sha" != "$HEAD_SHA" ]; then
-            commit_sha=$(gh api "repos/${{ github.repository }}/git/tags/${tag_sha}" --jq '.object.sha' 2>/dev/null || echo "$tag_sha")
-            if [ "$commit_sha" != "$HEAD_SHA" ]; then
-              echo "::error::Tag ${VERSION_TAG} (${commit_sha}) does not match build head_sha (${HEAD_SHA})"
-              exit 1
-            fi
-          fi
-          echo "Verified ${VERSION_TAG} is a tag pointing at ${HEAD_SHA}"
-
-      - name: Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+      - name: 📥 Download Modrinth App artifacts
+        uses: dawidd6/action-download-artifact@v11
         with:
           workflow: theseus-build.yml
           workflow_conclusion: success
           event: push
-          branch: ${{ env.VERSION_TAG }}
+          branch: ${{ inputs.version-tag }}
           use_unzip: true
 
-      - name: Extract app changelog
+      - name: 🛠️ Generate version manifest
         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
-
-      - name: Generate version manifest
+          VERSION_TAG: ${{ inputs.version-tag }}
+          RELEASE_NOTES: ${{ inputs.release-notes }}
         run: |
           # Reference: https://tauri.app/plugin/updater/#server-support
           jq -nc \
             --arg versionTag "${VERSION_TAG#v}" \
-            --rawfile releaseNotes release-notes.md \
+            --arg releaseNotes "$RELEASE_NOTES" \
             --rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
             --rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
             --rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
@@ -108,8 +81,9 @@ jobs:
           echo "Generated manifest for version ${VERSION_TAG}:"
           cat updates.json
 
-      - name: Upload release artifacts
+      - name: 📤 Upload release artifacts
         env:
+          VERSION_TAG: ${{ inputs.version-tag }}
           AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
           AWS_BUCKET: ${{ secrets.LAUNCHER_FILES_BUCKET_NAME }}
@@ -142,18 +116,3 @@ jobs:
           done
 
           aws s3 cp updates.json "s3://${AWS_BUCKET}"
-
-      - name: Create GitHub release
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          VERSION="${VERSION_TAG#v}"
-
-          gh release create "$VERSION_TAG" \
-            --title "Modrinth App ${VERSION}" \
-            --notes-file release-notes.md \
-            "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION}_x64-setup.exe" \
-            "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/dmg/Modrinth App_${VERSION}_universal.dmg" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION}_amd64.AppImage" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/deb/Modrinth App_${VERSION}_amd64.deb" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/rpm/Modrinth App-${VERSION}-1.x86_64.rpm"

.github/workflows/turbo-ci.yml

@@ -8,63 +8,10 @@ on:
   merge_group:
     types: [checks_requested]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          SKIP_CHECK: ${{ steps.merge-queue-ci-skipper.outputs.skip-check }}
-        run: |
-          if [ "$EVENT_NAME" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "$SKIP_CHECK" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
   build:
     name: Lint and Test
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'namespace-profile-modrinth-turbo' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    runs-on: ubuntu-latest
 
     env:
       # Ensure pnpm output is colored in GitHub Actions logs
@@ -76,80 +23,59 @@ jobs:
       # since we don't want warnings to become errors
       # while developing)
       RUSTFLAGS: -Dwarnings
-      # Redis config for tests
-      REDIS_TOPOLOGY: cluster
-      REDIS_CONNECTION_TYPE: multiplexed
-      REDIS_URL: redis://127.0.0.1:7000,redis://127.0.0.1:7001,redis://127.0.0.1:7002,redis://127.0.0.1:7003,redis://127.0.0.1:7004,redis://127.0.0.1:7005
-      # Avoid stack overflows in tests
-      RUST_MIN_STACK: 134217728
 
     steps:
-      - name: Check out code
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - name: Setup Node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Set up caches
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: namespacelabs/nscloud-cache-action@c5f8dab7560444c4bf8dbc64f1b203431873c547 # v1.6.1
-        with:
-          cache: |
-            rust
-            pnpm
-            apt
-
-      - name: Set up Turborepo caching
-        if: needs.skip-if-clean.outputs.internal == 'true'
-        uses: namespace-actions/setup-turbocache@f96bd6befa13ae74b2858a5be49573640d4636f5 # v0.0.2
-
-      - name: Install apt dependencies
+      - name: 🧰 Install build dependencies
         run: |
           sudo apt-get update
-          sudo apt-get install -y cmake libcurl4-openssl-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
 
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@166cdcfd11aee3cb47222f9ddb555ce30ddb9659 # v1.17.0
+      - name: 🧰 Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: 🧰 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: 🧰 Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
           rustflags: ''
           components: clippy, rustfmt
           cache: false
 
-      - name: Setup mold
-        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
-
-      - name: Setup binstall
-        uses: cargo-bins/cargo-binstall@ead08b90bd7b2e6d81963fb9cf0b7239f66d5db4 # v1.21.0
-
-      - name: Setup nextest
-        run: cargo binstall --no-confirm --secure --locked cargo-nextest@0.9.133
+      - name: 🧰 Setup nextest
+        uses: taiki-e/install-action@nextest
 
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
-      - name: Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@417450f3c33ee20393705369577571770643d4c7 # v3.0.7
+      - name: 🧰 Setup cargo-sqlx
+        uses: taiki-e/cache-cargo-install-action@v2
         with:
-          tool: sqlx-cli@0.8.6
+          tool: sqlx-cli
           locked: false
           no-default-features: true
           features: rustls,postgres
 
-      - name: Install dependencies
+      - name: 💨 Setup Turbo cache
+        uses: rharkor/caching-for-turbo@v1.8
+
+      - name: 🧰 Install dependencies
         run: pnpm install
 
-      - name: Set app environment
+      - name: ⚙️ Set app environment
         working-directory: packages/app-lib
         run: cp .env.staging .env
 
       # check if labrinth tests will actually run (cache miss)
-      - name: Check if labrinth tests need to run
+      - name: 🔍 Check if labrinth tests need to run
         id: check-labrinth
         run: |
           LABRINTH_TEST_STATUS=$(pnpm turbo run test --filter=@modrinth/labrinth --dry-run=json | jq -r '.tasks[] | select(.task == "test") | .cache.status')
@@ -160,22 +86,21 @@ jobs:
             echo "needs_services=true" >> $GITHUB_OUTPUT
           fi
 
-      - name: Start services
+      - name: ⚙️ Start services
         if: steps.check-labrinth.outputs.needs_services == 'true'
-        run: docker compose --profile clustered-redis up --wait
+        run: docker compose up --wait
 
-      - name: Setup labrinth environment and database
+      - name: ⚙️ Setup labrinth environment and database
         if: steps.check-labrinth.outputs.needs_services == 'true'
         working-directory: apps/labrinth
         run: |
           cp .env.local .env
           sqlx database setup
 
-      - name: Lint and test
+      - name: 🔍 Lint and test
         run: pnpm run ci
 
-      - name: Verify intl:extract has been run
+      - 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/*
@@ -65,7 +64,7 @@ generated
 app-playground-data/*
 
 .astro
-.claude/
+.claude
 .letta
 
 # labrinth demo fixtures
@@ -78,11 +77,3 @@ storybook-static
 
 # frontend robots.txt
 apps/frontend/src/public/robots.txt
-
-# Oh My Code
-.omc/
-
-# Local dry-run output for scripts/build-theseus-release-notes.mjs
-/test_result.md
-
-packages/tooling-config/script-utils/import-sort.js

.mergify.yml

@@ -1,23 +0,0 @@
-merge_queue:
-  mode: parallel
-scopes:
-  source:
-    files:
-      frontend:
-        include:
-          - apps/frontend/**/*
-          - packages/ui/**/*
-          - packages/utils/**/*
-          - packages/assets/**/*
-          - "**/wrangler.jsonc"
-          - "**/pnpm-*.yaml"
-      backend:
-        include:
-          - apps/labrinth/**
-          - Cargo.toml
-      app:
-        include:
-          - apps/app/**
-          - apps/app-frontend/**
-          - packages/app-lib/**
-          - packages/app-macros/**

.npmrc

@@ -1,11 +1,2 @@
 strict-peer-dependencies=false
 auto-install-peers=true
-public-hoist-pattern[]=prettier-plugin-*
-public-hoist-pattern[]=@prettier/plugin-*
-public-hoist-pattern[]=eslint
-public-hoist-pattern[]=@eslint/*
-public-hoist-pattern[]=eslint-plugin-*
-public-hoist-pattern[]=@nuxt/eslint-config
-public-hoist-pattern[]=typescript-eslint
-public-hoist-pattern[]=vue-eslint-parser
-public-hoist-pattern[]=globals

.nvmrc

@@ -1 +1 @@
-24.15.0
+20.19.2

.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]": {
@@ -29,17 +29,5 @@
 	},
 	"[rust]": {
 		"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
+	}
 }

AGENTS.md

@@ -1,93 +0,0 @@
-# Modrinth Monorepo
-
-This is the Modrinth monorepo — it contains all Modrinth projects, both frontend and backend. When entering a project, either to edit or analyse, you should read its AGENTS.md.
-
-## Architecture
-
-- **Monorepo tooling:** [Turborepo](https://turbo.build/) (`turbo.jsonc`) + [pnpm workspaces](https://pnpm.io/workspaces) (`pnpm-workspace.yaml`)
-- **Frontend:** Vue 3 / Nuxt 3, Tailwind CSS v3
-- **Backend:** Rust (Labrinth API), Postgres, Clickhouse
-- **Indentation:** Use TAB everywhere, never spaces
-
-### Apps (`apps/`)
-
-| App               | Description                    |
-| ----------------- | ------------------------------ |
-| `frontend`        | Main Modrinth website (Nuxt 3) |
-| `app-frontend`    | Desktop/app frontend (Vue 3)   |
-| `app`             | Desktop/app shell (Tauri)      |
-| `app-playground`  | Testing playground for app     |
-| `labrinth`        | Backend API service            |
-| `daedalus_client` | Daedalus client implementation |
-| `docs`            | Documentation site (Astro)     |
-
-### Packages (`packages/`)
-
-| Package            | Description                                           |
-| ------------------ | ----------------------------------------------------- |
-| `ui`               | Shared Vue component library (`@modrinth/ui`)         |
-| `assets`           | Styling and auto-generated icons (`@modrinth/assets`) |
-| `api-client`       | API client for Nuxt, Tauri, and Node/browser          |
-| `app-lib`          | Shared app library                                    |
-| `blog`             | Blog system and changelog data                        |
-| `utils`            | Shared utility functions (mostly deprecated)          |
-| `moderation`       | Moderation utilities                                  |
-| `daedalus`         | Daedalus protocol                                     |
-| `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
-| `ariadne`          | Analytics library                                     |
-| `modrinth-log`     | Logging utilities                                     |
-| `modrinth-maxmind` | MaxMind GeoIP                                         |
-| `modrinth-util`    | General utilities                                     |
-| `muralpay`         | Payment processing                                    |
-| `path-util`        | Path utilities                                        |
-| `sqlx-tracing`     | SQLx query tracing                                    |
-
-## Pre-PR Commands
-
-Run these from the **root** folder before opening a pull request - do not run these after each prompt the user gives you, only run when asked, ask the user a question if they want to run it if the user indicates that they are about to create a pull request.
-
-- **Website:** `pnpm prepr:frontend:web`
-- **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`
-
-The website and app `prepr` commands
-
-## Dev Commands
-
-- **Website:** `pnpm web:dev` (copy `.env` template in `apps/frontend/` first)
-- **App:** `pnpm app:dev` (copy `.env` template in `packages/app-lib/` first)
-- **Storybook (packages/ui):** `pnpm storybook`
-
-## Project-Specific Instructions
-
-Each project may have its own file with detailed instructions:
-
-- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
-- [`apps/frontend/AGENTS.md`](apps/frontend/AGENTS.md) - Frontend Website
-
-## Code Guidelines
-
-### Comments
-- DO NOT use "heading" comments like: `=== Helper methods ===`.
-- Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
-
-## Bash Guidelines
-
-### Output handling
-- DO NOT pipe output through `head`, `tail`, `less`, or `more`
-- NEVER use `| head -n X` or `| tail -n X` to truncate output
-- IMPORTANT: Run commands directly without pipes when possible
-- IMPORTANT: If you need to limit output, use command-specific flags (e.g. `git log -n 10` instead of `git log | head -10`)
-- ALWAYS read the full output — never pipe through filters
-
-### General
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to
-- For Frontend, when doing lint checks, only use the `prepr` commands, do not use `typecheck` or `tsc` etc.
-- Types in `@modrinth/utils` are considered highly outdated, if a component needs them, check if you can switch said component to use types from `packages/api-client`
-- When provided problems, do not say "I didn't introduce these problems" (shifting the blame/effort) - just fix them.
-
-## Standards
-
-Standards available at the @standards/ folder.

CLAUDE.md

@@ -0,0 +1,63 @@
+# Architecture
+
+Use TAB instead of spaces.
+
+## Frontend
+
+There are two similar frontends in the Modrinth monorepo, the website (apps/frontend) and the app frontend (apps/app-frontend).
+
+Both use Tailwind v3, and their respective configs can be seen at `tailwind.config.ts` and `tailwind.config.js` respectively.
+
+Both utilize shared and common components from `@modrinth/ui` which can be found at `packages/ui`, and stylings from `@modrinth/assets` which can be found at `packages/assets`.
+
+Both can utilize icons from `@modrinth/assets`, which are automatically generated based on what's available within the `icons` folder of the `packages/assets` directory. You can see the generated icons list in `generated-icons.ts`.
+
+Both have access to our dependency injection framework, examples as seen in `packages/ui/src/providers/`. Ideally any state which is shared between a page and it's subpages should be shared using this dependency injection framework.
+
+### Website (apps/frontend)
+
+Before a pull request can be opened for the website, run `pnpm prepr:frontend:web` from the root folder, otherwise CI will fail.
+
+To run a development version of the frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within the `apps/frontend` folder into `apps/frontend/.env`. Then you can run the frontend by running `pnpm web:dev` in the root folder.
+
+### App Frontend (apps/app-frontend)
+
+Before a pull request can be opened for the app frontend, run `pnpm prepr:frontend:app` from the root folder, otherwise CI will fail.
+
+To run a development version of the app frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within `packages/app-lib` into `packages/app-lib/.env`. Then you must run the app itself by running `pnpm app:dev` in the root folder.
+
+### Localization
+
+Refer to `.github/instructions/i18n-convert.instructions.md` if the user asks you to perform any i18n conversion work on a component, set of components, pages or sets of pages.
+
+## Labrinth
+
+Labrinth is the backend API service for Modrinth.
+
+### Testing
+
+Before a pull request can be opened, run `cargo clippy -p labrinth --all-targets` and make sure there are ZERO warnings, otherwise CI will fail.
+
+Use `cargo test -p labrinth --all-targets` to test your changes. All tests must pass, otherwise CI will fail.
+
+To prepare the sqlx cache, cd into `apps/labrinth` and run `cargo sqlx prepare`. Make sure to NEVER run `cargo sqlx prepare --workspace`.
+
+Read the root `docker-compose.yml` to see what running services are available while developing. Use `docker exec` to access these services.
+
+When the user refers to "performing pre-PR checks", do the following:
+
+- Run clippy as described above
+- DO NOT run tests unless explicitly requested (they take a long time)
+- Prepare the sqlx cache
+
+### Clickhouse
+
+Use `docker exec labrinth-clickhouse clickhouse-client` to access the Clickhouse instance. We use the `staging_ariadne` database to store data in testing.
+
+### Postgres
+
+Use `docker exec labrinth-postgres psql -U labrinth -d labrinth -c "SELECT 1"` to access the PostgreSQL instance, replacing the `SELECT 1` with your query.
+
+# Guidelines
+
+- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to.

Cargo.toml

@@ -8,15 +8,10 @@ members = [
   "packages/app-lib",
   "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",
-  "packages/serde-binhum",
-  "packages/xredis",
 ]
 
 [workspace.package]
@@ -36,7 +31,8 @@ actix-ws = "0.3.0"
 arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
-async-minecraft-ping = { path = "packages/async-minecraft-ping" }
+async-compression = { version = "0.4.32", default-features = false }
+async-minecraft-ping = { version = "0.8.0" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
   "runtime-tokio-hyper-rustls",
@@ -47,21 +43,14 @@ async-tungstenite = { version = "0.31.0", default-features = false, features = [
 ] }
 async-walkdir = "2.1.0"
 async_zip = "0.0.18"
-aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
-  "default-https-client",
-  "rt-tokio",
-  "rustls",
-] }
 base64 = "0.22.1"
 bitflags = "2.9.4"
-bon = "3.9.3"
 bytemuck = "1.24.0"
 bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.42"
-chumsky = "0.9.3"
-cidre = { version = "0.15.0", default-features = false, features = [
+cidre = { version = "0.11.3", default-features = false, features = [
   "macos_15_0"
 ] }
 clap = "4.5.48"
@@ -69,14 +58,11 @@ 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"
 data-url = "0.3.2"
-deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "c7209b086829572f368f1194aba54bdea8dc540b", version = "0.23.0" }
-derive_more = "2.1.1"
+deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
+derive_more = "2.0.1"
 directories = "6.0.0"
 dirs = "6.0.0"
 discord-rich-presence = "1.0.0"
@@ -90,14 +76,11 @@ 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",
@@ -124,39 +107,27 @@ 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"
-modrinth-content-management = { path = "packages/modrinth-content-management" }
+meilisearch-sdk = { version = "0.30.0", default-features = false }
 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"
 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 = "1.4.1"
+redis = "0.32.7"
 regex = "1.12.2"
 reqwest = { version = "0.12.24", default-features = false }
 rgb = "0.8.52"
@@ -172,7 +143,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",
@@ -183,7 +153,6 @@ sentry = { version = "0.45.0", default-features = false, features = [
   "rustls",
 ] }
 serde = "1.0.228"
-serde-binhum = { path = "packages/serde-binhum" }
 serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"
@@ -194,24 +163,21 @@ sha1 = "0.10.6"
 sha1_smol = { version = "1.0.1", features = ["std"] }
 sha2 = "0.10.9"
 shlex = "1.3.0"
-smallvec = "1.15.1"
 spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
 sqlx-tracing = { path = "packages/sqlx-tracing" }
 strum = "0.27.2"
-syn = { version = "2.0" }
 sysinfo = { version = "0.37.2", default-features = false }
 tar = "0.4.44"
 tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
-tauri-plugin-fs = "2.4.5"
-tauri-plugin-http = "2.5.7"
+tauri-plugin-http = "2.5.2"
 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",
 ] }
@@ -234,10 +200,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-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
 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"
@@ -245,7 +211,6 @@ windows = "=0.61.3"  # Locked on 0.61 until we can update windows-core to 0.62
 windows-core = "=0.61.2"  # Locked on 0.61 until webview2-com updates to 0.62
 winreg = "0.55.0"
 woothee = "0.13.0"
-xredis = { path = "packages/xredis" }
 yaserde = "0.12.0"
 zbus = "5.11.0"
 zip = { version = "6.0.0", default-features = false, features = [
@@ -286,10 +251,8 @@ read_zero_byte_vec = "warn"
 redundant_clone = "warn"
 redundant_feature_names = "warn"
 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"
@@ -303,11 +266,10 @@ opt-level = "s"  # Optimize for binary size
 strip = true  # Remove debug symbols
 lto = true  # Enables link to optimizations
 panic = "abort"  # Strip expensive panic clean-up logic
+codegen-units = 1  # Compile crates one after another so the compiler can optimize better
 
 # Specific profile for labrinth production builds
 [profile.release-labrinth]
 inherits = "release"
-opt-level = 2
 strip = false  # Keep debug symbols for Sentry
-lto = "thin"  # Enable LTO but keep compile times reasonable
 panic = "unwind"  # Don't exit the whole app on panic in production

README.md

@@ -3,22 +3,22 @@
 ![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).
 
 ## Development
 
-This repository contains two primary packages. For detailed development information, please refer to their respective guides:
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
 
-- [Website frontend](https://docs.modrinth.com/contributing/knossos/)
-- [Desktop app](https://docs.modrinth.com/contributing/theseus/)
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)
 
 ## Contributing
 

_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,7 +10,6 @@
 		"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": {
@@ -20,32 +19,29 @@
 		"@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",
-		"@tauri-apps/plugin-http": "~2.5.7",
+		"@tauri-apps/plugin-http": "^2.5.0",
 		"@tauri-apps/plugin-opener": "^2.2.6",
 		"@tauri-apps/plugin-os": "^2.2.1",
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
+		"intl-messageformat": "^10.7.7",
+		"vue-i18n": "^10.0.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
-		"fuse.js": "^6.6.2",
-		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
-		"overlayscrollbars": "^2.15.1",
 		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
-		"vue-i18n": "^10.0.0",
+		"vue-multiselect": "3.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",
@@ -62,7 +58,7 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^8.0.0",
+		"vite": "^6.0.0",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},

apps/app-frontend/src/assets/stylesheets/global.scss

@@ -45,14 +45,6 @@
 	color-scheme: dark;
 	--view-width: calc(100% - 5rem);
 	--expanded-view-width: calc(100% - 13rem);
-	--medal-promotion-bg: #000;
-	--medal-promotion-bg-orange: rgba(208, 246, 255, 0.25);
-	--medal-promotion-text-orange: #42abff;
-	--medal-promotion-bg-gradient: linear-gradient(
-		90deg,
-		rgba(66, 170, 255, 0.15),
-		rgba(0, 0, 0, 0) 100%
-	);
 }
 
 body {
@@ -85,10 +77,12 @@ body {
 }
 
 a {
-	color: inherit;
+	color: var(--color-link);
 	text-decoration: none;
-	-webkit-font-smoothing: antialiased;
-	will-change: filter;
+
+	&:hover {
+		text-decoration: none;
+	}
 }
 
 .badge {
@@ -161,75 +155,4 @@ img {
 	box-shadow: var(--shadow-card);
 }
 
-// From the Bootstrap project
-// The MIT License (MIT)
-// Copyright (c) 2011-2023 The Bootstrap Authors
-// https://github.com/twbs/bootstrap/blob/2f617215755b066904248525a8c56ea425dde871/scss/mixins/_visually-hidden.scss#L8
-.visually-hidden {
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-
-	&:not(caption) {
-		position: absolute !important;
-	}
-}
-
 @import '@modrinth/assets/omorphia.scss';
-
-input {
-	border-radius: var(--size-rounded-sm);
-	box-sizing: border-box;
-	border: 2px solid transparent;
-	// safari iOS rounds inputs by default
-	// set the appearance to none to prevent this
-	appearance: none !important;
-}
-
-pre {
-	font-weight: var(--font-weight-regular);
-}
-
-input,
-textarea {
-	background: var(--color-button-bg);
-	color: var(--color-text);
-	padding: 0.5rem 1rem;
-	font-weight: var(--font-weight-medium);
-	border: none;
-	outline: 2px solid transparent;
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-	transition: box-shadow 0.1s ease-in-out;
-	min-height: 36px;
-
-	&:focus,
-	&:focus-visible {
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 0.25rem var(--color-brand-shadow);
-		color: var(--color-button-text-active);
-	}
-
-	&:disabled,
-	&[disabled='true'] {
-		opacity: 0.6;
-		pointer-events: none;
-		cursor: not-allowed;
-	}
-
-	&:focus::placeholder {
-		opacity: 0.8;
-	}
-
-	&::placeholder {
-		color: var(--color-button-text);
-		opacity: 0.6;
-	}
-}

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

@@ -10,7 +10,6 @@ import {
 	TrashIcon,
 } from '@modrinth/assets'
 import {
-	Accordion,
 	DropdownSelect,
 	formatLoader,
 	injectNotificationManager,
@@ -23,9 +22,8 @@ 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 ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { duplicate, remove } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
@@ -49,23 +47,24 @@ 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 = [
-		...(item.instance.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]),
+		{ name: 'add_content' },
+		{ type: 'divider' },
 		{ name: 'edit' },
 		{ name: 'duplicate' },
 		{ name: 'open' },
@@ -89,14 +88,10 @@ const handleRightClick = (event, instanceId) => {
 					...baseOptions,
 				]
 			: [
-					...(item.instance.quarantined
-						? []
-						: [
-								{
-									name: 'play',
-									color: 'primary',
-								},
-							]),
+					{
+						name: 'play',
+						color: 'primary',
+					},
 					...baseOptions,
 				],
 	)
@@ -118,16 +113,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
 	}
@@ -138,33 +133,12 @@ const state = useStorage(
 	{
 		group: 'Group',
 		sortBy: 'Name',
-		collapsedGroups: [],
 	},
 	localStorage,
 	{ mergeDefaults: true },
 )
 
 const search = ref('')
-const collapsedSectionKeys = computed(() => new Set(state.value.collapsedGroups ?? []))
-
-const getSectionKey = (sectionName) => `${state.value.group}:${sectionName}`
-
-const isSectionCollapsed = (sectionName) => {
-	return collapsedSectionKeys.value.has(getSectionKey(sectionName))
-}
-
-const setSectionCollapsed = (sectionName, collapsed) => {
-	const sectionKey = getSectionKey(sectionName)
-	const collapsedSections = new Set(state.value.collapsedGroups ?? [])
-
-	if (collapsed) {
-		collapsedSections.add(sectionKey)
-	} else {
-		collapsedSections.delete(sectionKey)
-	}
-
-	state.value.collapsedGroups = [...collapsedSections]
-}
 
 const filteredResults = computed(() => {
 	const { group = 'Group', sortBy = 'Name' } = state.value
@@ -306,32 +280,36 @@ const filteredResults = computed(() => {
 			<span class="font-semibold text-secondary">{{ selected }}</span>
 		</DropdownSelect>
 	</div>
-	<Accordion
+	<div
 		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
 			key,
 			value,
 		}))"
 		:key="instanceSection.key"
-		:divider="instanceSection.key !== 'None'"
-		:open-by-default="!isSectionCollapsed(instanceSection.key)"
 		class="row"
-		@on-open="setSectionCollapsed(instanceSection.key, false)"
-		@on-close="setSectionCollapsed(instanceSection.key, true)"
 	>
-		<template v-if="instanceSection.key !== 'None'" #title>
-			<span class="text-base">{{ instanceSection.key }}</span>
-		</template>
+		<div v-if="instanceSection.key !== 'None'" class="divider">
+			<p>{{ instanceSection.key }}</p>
+			<hr aria-hidden="true" />
+		</div>
 		<section class="instances">
 			<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" />
+	</div>
+	<ConfirmModalWrapper
+		ref="confirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		@proceed="deleteProfile"
+	/>
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
 		<template #stop> <StopCircleIcon /> Stop </template>
@@ -345,7 +323,73 @@ const filteredResults = computed(() => {
 </template>
 <style lang="scss" scoped>
 .row {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 	width: 100%;
+
+	.divider {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		gap: 1rem;
+		margin-bottom: 1rem;
+
+		p {
+			margin: 0;
+			font-size: 1rem;
+			white-space: nowrap;
+			color: var(--color-contrast);
+		}
+
+		hr {
+			background-color: var(--color-gray);
+			height: 1px;
+			width: 100%;
+			border: none;
+		}
+	}
+}
+
+.header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 1rem;
+	align-items: inherit;
+	margin: 1rem 1rem 0 !important;
+	padding: 1rem;
+	width: calc(100% - 2rem);
+
+	.iconified-input {
+		flex-grow: 1;
+
+		input {
+			min-width: 100%;
+		}
+	}
+
+	.sort-dropdown {
+		width: 10rem;
+	}
+
+	.filter-dropdown {
+		width: 15rem;
+	}
+
+	.group-dropdown {
+		width: 10rem;
+	}
+
+	.labeled_button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+	}
 }
 
 .instances {

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

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { useLoading } from '@/store/state.js'
+
+const props = defineProps({
+	throttle: {
+		type: Number,
+		default: 0,
+	},
+	duration: {
+		type: Number,
+		default: 1000,
+	},
+	height: {
+		type: Number,
+		default: 2,
+	},
+	color: {
+		type: String,
+		default: 'var(--loading-bar-gradient)',
+	},
+})
+
+const indicator = useLoadingIndicator({
+	duration: props.duration,
+	throttle: props.throttle,
+})
+
+onBeforeUnmount(() => indicator.clear)
+
+const loading = useLoading()
+
+watch(loading, (newValue) => {
+	if (newValue.barEnabled) {
+		if (newValue.loading) {
+			indicator.start()
+		} else {
+			indicator.finish()
+		}
+	}
+})
+
+function useLoadingIndicator(opts) {
+	const progress = ref(0)
+	const isLoading = ref(false)
+	const step = computed(() => 10000 / opts.duration)
+
+	let _timer = null
+	let _throttle = null
+
+	function start() {
+		clear()
+		progress.value = 0
+		if (opts.throttle) {
+			_throttle = setTimeout(() => {
+				isLoading.value = true
+				_startTimer()
+			}, opts.throttle)
+		} else {
+			isLoading.value = true
+			_startTimer()
+		}
+	}
+
+	function finish() {
+		progress.value = 100
+		_hide()
+	}
+
+	function clear() {
+		clearInterval(_timer)
+		clearTimeout(_throttle)
+		_timer = null
+		_throttle = null
+	}
+
+	function _increase(num) {
+		progress.value = Math.min(100, progress.value + num)
+	}
+
+	function _hide() {
+		clear()
+		setTimeout(() => {
+			isLoading.value = false
+			setTimeout(() => {
+				progress.value = 0
+			}, 400)
+		}, 500)
+	}
+
+	function _startTimer() {
+		_timer = setInterval(() => {
+			_increase(step.value)
+		}, 100)
+	}
+
+	return { progress, isLoading, start, finish, clear }
+}
+</script>
+
+<template>
+	<div
+		class="loading-indicator-bar"
+		:style="{
+			'--_width': `${indicator.progress.value}%`,
+			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
+			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
+			top: `0`,
+			right: `0`,
+			left: `${props.offsetWidth}`,
+			pointerEvents: 'none',
+			width: `var(--_width)`,
+			height: `var(--_height)`,
+			borderRadius: `var(--_height)`,
+			// opacity: `var(--_opacity)`,
+			background: `${props.color}`,
+			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
+			zIndex: 6,
+		}"
+	>
+		<slot />
+	</div>
+</template>
+<style lang="scss" scoped>
+.loading-indicator-bar::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: var(--_width);
+	bottom: 0;
+	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
+	opacity: calc(var(--_opacity) * 0.1);
+	z-index: 5;
+	transition:
+		width 0.1s ease-in-out,
+		opacity 0.1s ease-out;
+}
+</style>

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

@@ -19,17 +19,15 @@ import { useRouter } from 'vue-router'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
 import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
-import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.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 { injectContentInstall } from '@/providers/content-install'
+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 { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
-const { install: installVersion } = injectContentInstall()
 
 const router = useRouter()
 
@@ -61,19 +59,20 @@ 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) => {
 	const baseOptions = [
-		...(passedInstance.quarantined ? [] : [{ name: 'add_content' }, { type: 'divider' }]),
+		{ name: 'add_content' },
+		{ type: 'divider' },
 		{ name: 'edit' },
 		{ name: 'duplicate' },
 		{ name: 'open_folder' },
@@ -85,7 +84,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
@@ -97,14 +96,10 @@ const handleInstanceRightClick = async (event, passedInstance) => {
 					...baseOptions,
 				]
 			: [
-					...(passedInstance.quarantined
-						? []
-						: [
-								{
-									name: 'play',
-									color: 'primary',
-								},
-							]),
+					{
+						name: 'play',
+						color: 'primary',
+					},
 					...baseOptions,
 				]
 
@@ -130,14 +125,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,
@@ -146,26 +143,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(
@@ -241,7 +238,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteInstance" />
+	<ConfirmModalWrapper
+		ref="deleteConfirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		@proceed="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">
@@ -258,7 +262,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

@@ -1,110 +1,81 @@
 <template>
 	<div
-		v-if="accounts.length === 0"
-		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
+		v-if="mode !== 'isolated'"
+		ref="button"
+		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
+		:class="{ expanded: mode === 'expanded' }"
+		@click="toggleMenu"
 	>
-		<span>{{ formatMessage(messages.notSignedIn) }}</span>
-		<Button type="colored" color="brand" :disabled="loginDisabled" @click="login()">
-			<LogInIcon v-if="!loginDisabled" />
-			<SpinnerIcon v-else class="animate-spin" />
-			{{ formatMessage(messages.signInToMinecraft) }}
-		</Button>
+		<Avatar
+			size="36px"
+			:src="
+				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+			"
+		/>
+		<div class="flex flex-col w-full">
+			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
+			<span class="text-secondary text-xs">Minecraft account</span>
+		</div>
+		<DropdownIcon class="w-5 h-5 shrink-0" />
 	</div>
-	<Accordion
-		v-else
-		class="w-full mt-2 bg-button-bg border border-solid border-surface-5 rounded-xl overflow-clip"
-		button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
-		:open-by-default="false"
-	>
-		<template #title>
-			<div class="flex gap-2 w-full min-w-0">
-				<Avatar
-					size="36px"
-					:src="
-						selectedAccount
-							? avatarUrl
-							: 'https://launcher-files.modrinth.com/assets/steve_head.png'
-					"
-				/>
-				<div class="flex flex-col items-start w-full min-w-0">
-					<span class="truncate w-full text-left">{{
-						selectedAccount ? selectedAccount.profile.name : formatMessage(messages.selectAccount)
-					}}</span>
-					<span class="text-secondary text-xs">{{ formatMessage(messages.minecraftAccount) }}</span>
+	<transition name="fade">
+		<Card
+			v-if="showCard || mode === 'isolated'"
+			ref="card"
+			class="account-card"
+			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+		>
+			<div v-if="selectedAccount" class="selected account">
+				<Avatar size="xs" :src="avatarUrl" />
+				<div>
+					<h4>{{ selectedAccount.profile.name }}</h4>
+					<p>Selected</p>
 				</div>
-			</div>
-		</template>
-		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
-			<template v-if="accounts.length > 0">
-				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
-					<button
-						class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base min-w-0"
-						@click="setAccount(account)"
-					>
-						<RadioButtonCheckedIcon
-							v-if="selectedAccount && selectedAccount.profile.id === account.profile.id"
-							class="w-5 h-5 text-brand shrink-0"
-						/>
-						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
-						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
-						<p
-							class="m-0 truncate min-w-0"
-							:class="
-								selectedAccount && selectedAccount.profile.id === account.profile.id
-									? 'text-contrast font-semibold'
-									: 'text-primary'
-							"
-						>
-							{{ account.profile.name }}
-						</p>
-					</button>
-					<IconButton
-						v-tooltip="formatMessage(messages.removeAccount)"
-						type="quiet"
-						color="red"
-						:label="formatMessage(messages.removeAccount)"
-						class="mr-2 !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)] hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
-						@click="logout(account.profile.id)"
-					>
-						<TrashIcon />
-					</IconButton>
-				</div>
-			</template>
-			<div class="flex flex-col gap-2 px-2 pt-2">
 				<Button
-					v-if="accounts.length > 0"
-					class="w-full !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)]"
-					:disabled="loginDisabled"
-					@click="login()"
+					v-tooltip="'Log out'"
+					icon-only
+					color="raised"
+					@click="logout(selectedAccount.profile.id)"
 				>
-					<PlusIcon />
-					{{ formatMessage(messages.addAccount) }}
+					<TrashIcon />
 				</Button>
 			</div>
-		</div>
-	</Accordion>
+			<div v-else class="logged-out account">
+				<h4>Not signed in</h4>
+				<Button
+					v-tooltip="'Log in'"
+					:disabled="loginDisabled"
+					icon-only
+					color="primary"
+					@click="login()"
+				>
+					<LogInIcon v-if="!loginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+				</Button>
+			</div>
+			<div v-if="displayAccounts.length > 0" class="account-group">
+				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
+					<Button class="option account" @click="setAccount(account)">
+						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
+						<p>{{ account.profile.name }}</p>
+					</Button>
+					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
+						<TrashIcon />
+					</Button>
+				</div>
+			</div>
+			<Button v-if="accounts.length > 0" @click="login()">
+				<PlusIcon />
+				Add account
+			</Button>
+		</Card>
+	</transition>
 </template>
 
-<script setup lang="ts">
-import {
-	LogInIcon,
-	PlusIcon,
-	RadioButtonCheckedIcon,
-	RadioButtonIcon,
-	SpinnerIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import {
-	Accordion,
-	Avatar,
-	Button,
-	defineMessages,
-	IconButton,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
-import type { Ref } from 'vue'
-import { computed, onUnmounted, ref } from 'vue'
+<script setup>
+import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import {
@@ -116,47 +87,39 @@ import {
 } from '@/helpers/auth'
 import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
-import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
 
-const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
 
-const emit = defineEmits<{
-	change: []
-}>()
+defineProps({
+	mode: {
+		type: String,
+		required: true,
+		default: 'normal',
+	},
+})
 
-type MinecraftCredential = {
-	profile: {
-		id: string
-		name: string
-	}
-}
+const emit = defineEmits(['change'])
 
-const accounts: Ref<MinecraftCredential[]> = ref([])
+const accounts = ref({})
 const loginDisabled = ref(false)
-const defaultUser = ref<string | undefined>()
-const equippedSkin = ref<Skin | null>(null)
-const headUrlCache = ref(new Map<string, string>())
+const defaultUser = ref()
+const equippedSkin = ref(null)
+const headUrlCache = ref(new Map())
 
 async function refreshValues() {
 	defaultUser.value = await get_default_user().catch(handleError)
-	const userList = await users().catch(handleError)
-	accounts.value = Array.isArray(userList) ? [...userList] : []
-	accounts.value.sort((a, b) => (a.profile?.name ?? '').localeCompare(b.profile?.name ?? ''))
+	accounts.value = await users().catch(handleError)
 
 	try {
 		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
+		equippedSkin.value = skins.find((skin) => skin.is_equipped)
 
 		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)
 			}
@@ -166,32 +129,19 @@ 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) {
+function setLoginDisabled(value) {
 	loginDisabled.value = value
 }
 
 defineExpose({
 	refreshValues,
-	setEquippedSkin,
 	setLoginDisabled,
 	loginDisabled,
 })
-
 await refreshValues()
 
-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
+const displayAccounts = computed(() =>
+	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
 )
 
 const avatarUrl = computed(() => {
@@ -208,7 +158,7 @@ const avatarUrl = computed(() => {
 	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })
 
-function getAccountAvatarUrl(account: MinecraftCredential) {
+function getAccountAvatarUrl(account) {
 	if (
 		account.profile.id === selectedAccount.value?.profile?.id &&
 		equippedSkin.value?.texture_key
@@ -221,10 +171,13 @@ function getAccountAvatarUrl(account: MinecraftCredential) {
 	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }
 
-async function setAccount(account: MinecraftCredential) {
+const selectedAccount = computed(() =>
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
+)
+
+async function setAccount(account) {
 	defaultUser.value = account.profile.id
 	await set_default_user(account.profile.id).catch(handleError)
-	await refreshValues()
 	emit('change')
 }
 
@@ -234,57 +187,292 @@ async function login() {
 
 	if (loggedIn) {
 		await setAccount(loggedIn)
+		await refreshValues()
 	}
 
 	trackEvent('AccountLogIn')
 	loginDisabled.value = false
 }
 
-async function logout(id: string) {
+const logout = async (id) => {
 	await remove_user(id).catch(handleError)
 	await refreshValues()
 	if (!selectedAccount.value && accounts.value.length > 0) {
 		await setAccount(accounts.value[0])
+		await refreshValues()
 	} else {
 		emit('change')
 	}
 	trackEvent('AccountLogOut')
 }
 
+const showCard = ref(false)
+const card = ref(null)
+const button = ref(null)
+const handleClickOutside = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		!button.value.contains(event.target)
+	) {
+		toggleMenu(false)
+	}
+}
+
+function toggleMenu(override = true) {
+	if (showCard.value || !override) {
+		showCard.value = false
+	} else {
+		showCard.value = true
+	}
+}
+
 const unlisten = await process_listener(async (e) => {
 	if (e.event === 'launched') {
 		await refreshValues()
 	}
 })
 
+onMounted(() => {
+	window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('click', handleClickOutside)
+})
+
 onUnmounted(() => {
 	unlisten()
 })
-
-const messages = defineMessages({
-	notSignedIn: {
-		id: 'minecraft-account.not-signed-in',
-		defaultMessage: 'Not signed in',
-	},
-	addAccount: {
-		id: 'minecraft-account.add-account',
-		defaultMessage: 'Add account',
-	},
-	removeAccount: {
-		id: 'minecraft-account.remove-account',
-		defaultMessage: 'Remove account',
-	},
-	selectAccount: {
-		id: 'minecraft-account.select-account',
-		defaultMessage: 'Select account',
-	},
-	minecraftAccount: {
-		id: 'minecraft-account.label',
-		defaultMessage: 'Minecraft account',
-	},
-	signInToMinecraft: {
-		id: 'minecraft-account.sign-in',
-		defaultMessage: 'Sign in to Minecraft',
-	},
-})
 </script>
+
+<style scoped lang="scss">
+.selected {
+	background: var(--color-brand-highlight);
+	border-radius: var(--radius-lg);
+	color: var(--color-contrast);
+	gap: 1rem;
+}
+
+.logged-out {
+	background: var(--color-bg);
+	border-radius: var(--radius-lg);
+	gap: 1rem;
+}
+
+.account {
+	width: max-content;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	padding: 0.5rem 1rem;
+
+	h4,
+	p {
+		margin: 0;
+	}
+}
+
+.account-card {
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	margin-top: 0.5rem;
+	right: 2rem;
+	z-index: 11;
+	gap: 0.5rem;
+	padding: 1rem;
+	border: 1px solid var(--color-divider);
+	width: max-content;
+	user-select: none;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	max-height: calc(100vh - 300px);
+	overflow-y: auto;
+
+	&::-webkit-scrollbar-track {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}
+
+	&::-webkit-scrollbar {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}
+
+	&.hidden {
+		display: none;
+	}
+
+	&.expanded {
+		left: 13.5rem;
+	}
+
+	&.isolated {
+		position: relative;
+		left: 0;
+		top: 0;
+	}
+}
+
+.accounts-title {
+	font-size: 1.2rem;
+	font-weight: bolder;
+}
+
+.account-group {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.option {
+	width: calc(100% - 2.25rem);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;
+
+	img {
+		margin-right: 0.5rem;
+	}
+}
+
+.icon {
+	--size: 1.5rem !important;
+}
+
+.account-row {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	vertical-align: center;
+	justify-content: space-between;
+	padding-right: 1rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition:
+		opacity 0.25s ease,
+		translate 0.25s ease,
+		scale 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+	translate: 0 -2rem;
+	scale: 0.9;
+}
+
+.avatar-button {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	color: var(--color-base);
+	background-color: var(--color-button-bg);
+	border-radius: var(--radius-md);
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	text-align: left;
+
+	&.expanded {
+		border: 1px solid var(--color-divider);
+		padding: 1rem;
+	}
+}
+
+.avatar-text {
+	margin: auto 0 auto 0.25rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.text {
+	width: 6rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.accounts-text {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	margin: 0;
+}
+
+.qr-code {
+	background-color: white !important;
+	border-radius: var(--radius-md);
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-lg);
+	align-items: center;
+	padding: var(--gap-xl);
+
+	.modal-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-sm);
+		width: 100%;
+
+		h2,
+		p {
+			margin: 0;
+		}
+
+		.code-text {
+			display: flex;
+			flex-direction: row;
+			gap: var(--gap-xs);
+			align-items: center;
+
+			.code {
+				background-color: var(--color-bg);
+				border-radius: var(--radius-md);
+				border: solid 1px var(--color-button-bg);
+				font-family: var(--mono-font);
+				letter-spacing: var(--gap-md);
+				color: var(--color-contrast);
+				font-size: 2rem;
+				font-weight: bold;
+				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+			}
+
+			.btn {
+				width: 2.5rem;
+				height: 2.5rem;
+			}
+		}
+	}
+}
+
+.button-row {
+	display: flex;
+	flex-direction: row;
+}
+
+.modal {
+	position: absolute;
+}
+
+.code {
+	color: var(--color-brand);
+	padding: 0.05rem 0.1rem;
+	// row not column
+	display: flex;
+
+	.card {
+		background: var(--color-base);
+		color: var(--color-contrast);
+		padding: 0.5rem 1rem;
+	}
+}
+</style>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, TeleportOverflowMenu } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 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,40 +22,41 @@ 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>
 
 <template>
 	<div class="joined-buttons">
-		<Button @click="handleSearchContent">
-			<PlusIcon />
-			Install content
-		</Button>
-		<TeleportOverflowMenu
-			label="More options"
-			:options="[
-				{
-					id: 'from_file',
-					label: 'Add from file',
-					action: handleAddContentFromFile,
-				},
-			]"
-			class="!w-auto !px-2.5 !rounded-xl"
-		>
-			<DropdownIcon />
-			<template #from_file>
-				<FolderOpenIcon />
-				<span class="no-wrap"> Add from file </span>
-			</template>
-		</TeleportOverflowMenu>
+		<ButtonStyled>
+			<button @click="handleSearchContent">
+				<PlusIcon />
+				Install content
+			</button>
+		</ButtonStyled>
+		<ButtonStyled>
+			<OverflowMenu
+				:options="[
+					{
+						id: 'from_file',
+						action: handleAddContentFromFile,
+					},
+				]"
+			>
+				<DropdownIcon />
+				<template #from_file>
+					<FolderOpenIcon />
+					<span class="no-wrap"> Add from file </span>
+				</template>
+			</OverflowMenu>
+		</ButtonStyled>
 	</div>
 </template>

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

@@ -1,580 +0,0 @@
-<template>
-	<div class="flex gap-2 items-center">
-		<div v-if="downloadState.total > 0 || hasActiveLoadingBars" class="relative">
-			<IconButton
-				v-tooltip="downloadToggleLabel"
-				:color="downloadState.hidden > 0 ? 'brand' : undefined"
-				type="quiet"
-				:label="downloadToggleLabel"
-				@click="toggleDownloadNotifications"
-			>
-				<DownloadIcon />
-			</IconButton>
-		</div>
-		<div v-if="offline" class="flex items-center gap-1">
-			<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"
-		>
-			<template v-if="selectedProcess">
-				<OnlineIndicatorIcon />
-				<div class="text-contrast flex items-center gap-2">
-					<router-link
-						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
-						class="hover:underline"
-					>
-						{{ selectedProcess.instance.name }}
-					</router-link>
-					<Dropdown
-						v-if="currentProcesses.length > 1"
-						placement="bottom"
-						:triggers="['click']"
-						:hide-triggers="['click']"
-						@show="showInstances = true"
-						@hide="showInstances = false"
-					>
-						<IconButton
-							v-tooltip="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-							class="!size-6"
-							type="quiet"
-							size="xs"
-							:label="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-						>
-							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-						</IconButton>
-						<template #popper>
-							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
-								<div
-									v-for="process in currentProcesses"
-									:key="process.uuid"
-									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
-								>
-									<button
-										v-tooltip.left="
-											process.uuid === selectedProcess.uuid
-												? formatMessage(messages.primaryInstance)
-												: formatMessage(messages.makePrimaryInstance)
-										"
-										class="flex flex-grow items-center gap-2"
-										:class="{
-											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
-										}"
-										:disabled="process.uuid === selectedProcess.uuid"
-										@click="selectProcess(process)"
-									>
-										<OnlineIndicatorIcon />
-										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.instance.name }}
-											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
-										</span>
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.stopInstance)"
-										class="active:scale-95 flex"
-										@click.stop="stop(process)"
-									>
-										<StopCircleIcon class="text-red size-5" />
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.viewLogs)"
-										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.instance.id)"
-									>
-										<TerminalSquareIcon class="text-secondary size-5" />
-									</button>
-								</div>
-							</div>
-						</template>
-					</Dropdown>
-				</div>
-				<button
-					v-tooltip="formatMessage(messages.stopInstance)"
-					class="active:scale-95 flex"
-					@click="stop(selectedProcess)"
-				>
-					<StopCircleIcon class="text-red size-5" />
-				</button>
-				<button
-					v-tooltip="formatMessage(messages.viewLogs)"
-					class="active:scale-95 flex"
-					@click="goToTerminal()"
-				>
-					<TerminalSquareIcon class="text-secondary size-5" />
-				</button>
-			</template>
-			<template v-else>
-				<span class="size-2 rounded-full bg-secondary" />
-				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	DropdownIcon,
-	OnlineIndicatorIcon,
-	StarIcon,
-	StopCircleIcon,
-	TerminalSquareIcon,
-	UnplugIcon,
-} from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
-import {
-	defineMessages,
-	injectNotificationManager,
-	injectPopupNotificationManager,
-	type PopupNotification,
-	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 type { LoadingBar } from '@/helpers/state'
-import { progress_bars_list } from '@/helpers/state'
-import type { GameInstance } from '@/helpers/types'
-
-const { handleError } = injectNotificationManager()
-const popupNotificationManager = injectPopupNotificationManager()
-const { formatMessage } = useVIntl()
-
-const router = useRouter()
-
-const showInstances = ref(false)
-
-interface RunningProcess {
-	uuid: string
-	instance_id: string
-	instance: GameInstance
-}
-
-const messages = defineMessages({
-	offline: {
-		id: 'app.action-bar.offline',
-		defaultMessage: 'Offline',
-	},
-	viewInstance: {
-		id: 'app.action-bar.view-instance',
-		defaultMessage: 'View instance',
-	},
-	showMoreRunningInstances: {
-		id: 'app.action-bar.show-more-running-instances',
-		defaultMessage: 'Show more running instances',
-	},
-	hideMoreRunningInstances: {
-		id: 'app.action-bar.hide-more-running-instances',
-		defaultMessage: 'Hide more running instances',
-	},
-	primaryInstance: {
-		id: 'app.action-bar.primary-instance',
-		defaultMessage: 'Primary instance',
-	},
-	makePrimaryInstance: {
-		id: 'app.action-bar.make-primary-instance',
-		defaultMessage: 'Make primary instance',
-	},
-	stopInstance: {
-		id: 'app.action-bar.stop-instance',
-		defaultMessage: 'Stop instance',
-	},
-	viewLogs: {
-		id: 'app.action-bar.view-logs',
-		defaultMessage: 'View logs',
-	},
-	noInstancesRunning: {
-		id: 'app.action-bar.no-instances-running',
-		defaultMessage: 'No instances running',
-	},
-	downloadingJava: {
-		id: 'app.action-bar.downloading-java',
-		defaultMessage: 'Downloading Java {version}',
-	},
-	downloads: {
-		id: 'app.action-bar.downloads',
-		defaultMessage: 'Downloads',
-	},
-	viewActiveDownloads: {
-		id: 'app.action-bar.view-active-downloads',
-		defaultMessage: 'View active downloads',
-	},
-	hideDownloads: {
-		id: 'app.action-bar.hide-downloads',
-		defaultMessage: 'Hide active downloads',
-	},
-	showDownloads: {
-		id: 'app.action-bar.show-downloads',
-		defaultMessage: 'Show active downloads',
-	},
-})
-
-const downloadState = computed(() => popupNotificationManager.getDownloadState())
-const downloadToggleLabel = computed(() =>
-	formatMessage(
-		downloadState.value.hidden > 0
-			? messages.showDownloads
-			: downloadState.value.total > 0
-				? messages.hideDownloads
-				: messages.viewActiveDownloads,
-	),
-)
-
-function toggleDownloadNotifications(): void {
-	if (downloadState.value.total > 0) {
-		popupNotificationManager.toggleDownloadNotifications()
-	} else if (hasActiveLoadingBars.value) {
-		openDownloadToast()
-	}
-}
-
-const currentProcesses = ref<RunningProcess[]>([])
-const selectedProcess = ref<RunningProcess | undefined>()
-
-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) => {
-		handleError(error)
-		return []
-	})
-
-	currentProcesses.value = processes
-		.map((process) => {
-			const instance = instances.find((item) => process.instance_id === item.id)
-			if (!instance) {
-				return null
-			}
-			return {
-				...process,
-				instance,
-			}
-		})
-		.filter((process): process is RunningProcess => process !== null)
-	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-		selectedProcess.value = currentProcesses.value[0]
-	}
-}
-
-await refresh()
-
-const offline = ref(!navigator.onLine)
-function handleOffline() {
-	offline.value = true
-}
-function handleOnline() {
-	offline.value = false
-}
-
-onMounted(() => {
-	window.addEventListener('offline', handleOffline)
-	window.addEventListener('online', handleOnline)
-})
-
-const unlistenProcess = await process_listener(async () => {
-	await refresh()
-})
-
-const stop = async (process: RunningProcess) => {
-	try {
-		await killProcess(process.uuid).catch(handleError)
-
-		trackEvent('InstanceStop', {
-			loader: process.instance.loader,
-			game_version: process.instance.game_version,
-			source: 'AppBar',
-		})
-	} catch (e) {
-		console.error(e)
-	}
-	await refresh()
-}
-
-function goToTerminal(instanceId?: string) {
-	const selectedInstanceId = instanceId ?? selectedProcess.value?.instance.id
-	if (!selectedInstanceId) {
-		return
-	}
-	router.push(`/instance/${encodeURIComponent(selectedInstanceId)}/logs`)
-}
-
-const currentLoadingBars = ref<LoadingBar[]>([])
-const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
-const notificationId = ref<string | number | null>(null)
-const terminalNotificationIds = new Map<string, string | number>()
-const dismissed = ref(false)
-
-function getLoadingBarKey(loadingBar: LoadingBar): string {
-	return `${loadingBar.loading_bar_uuid ?? loadingBar.id}`
-}
-
-function getLoadingProgress(loadingBar: LoadingBar): number {
-	if (!loadingBar.total || loadingBar.total <= 0) {
-		return 0
-	}
-	return Math.max(0, Math.min(1, (loadingBar.current ?? 0) / (loadingBar.total ?? 0)))
-}
-
-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)
-}
-
-function getNotification(): PopupNotification | null {
-	if (!notificationId.value) {
-		return null
-	}
-	const notification = popupNotificationManager
-		.getNotifications()
-		.find((notification) => notification.id === notificationId.value)
-	return notification ?? null
-}
-
-function removeNotification(): void {
-	if (!notificationId.value) {
-		return
-	}
-	popupNotificationManager.removeNotification(notificationId.value)
-	notificationId.value = null
-}
-
-function syncTerminalNotifications(): void {
-	const terminalNotifications = installJobNotifications.terminalNotifications.value
-	const currentJobIds = new Set(terminalNotifications.map((notification) => notification.id))
-
-	for (const terminal of terminalNotifications) {
-		const popupId = terminalNotificationIds.get(terminal.id)
-		let notification = popupId
-			? popupNotificationManager.getNotifications().find((candidate) => candidate.id === popupId)
-			: undefined
-
-		if (!notification) {
-			notification = popupNotificationManager.addPopupNotification({
-				title: terminal.title,
-				text: terminal.text,
-				type: terminal.type,
-				buttons: terminal.buttons,
-				onDismiss: terminal.onDismiss,
-				autoCloseMs: null,
-			})
-			terminalNotificationIds.set(terminal.id, notification.id)
-			continue
-		}
-
-		notification.title = terminal.title
-		notification.text = terminal.text
-		notification.type = terminal.type
-		notification.buttons = terminal.buttons
-		notification.onDismiss = terminal.onDismiss
-	}
-
-	for (const [jobId, popupId] of terminalNotificationIds) {
-		if (!currentJobIds.has(jobId)) {
-			popupNotificationManager.removeNotification(popupId)
-			terminalNotificationIds.delete(jobId)
-		}
-	}
-}
-
-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: bar.bar_type?.type === 'pack_import' ? 'bytes' : 'percentage',
-			progressCurrent: bar.current,
-			progressTotal: bar.total,
-		})),
-	]
-}
-
-const hasActiveLoadingBars = computed(
-	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
-)
-
-function updateNotification(resummon = false): void {
-	syncTerminalNotifications()
-
-	if (resummon) {
-		dismissed.value = false
-	}
-
-	if (currentLoadingBars.value.length === 0 && !installJobNotifications.active.value) {
-		removeNotification()
-		dismissed.value = false
-		return
-	}
-
-	if (notificationId.value && !getNotification()) {
-		notificationId.value = null
-		dismissed.value = true
-	}
-
-	if (dismissed.value && !resummon) {
-		return
-	}
-
-	let notif = getNotification()
-	const progressItems = buildDownloadItems()
-
-	if (notif) {
-		notif.title = installJobNotifications.active.value
-			? installJobNotifications.title.value
-			: formatMessage(messages.downloads)
-		notif.text = undefined
-		notif.progressItems = progressItems
-		notif.progress = undefined
-		notif.waiting = undefined
-	} else {
-		notif = popupNotificationManager.addPopupNotification({
-			title: installJobNotifications.active.value
-				? installJobNotifications.title.value
-				: formatMessage(messages.downloads),
-			type: 'download',
-			autoCloseMs: null,
-			progressItems,
-		})
-		notificationId.value = notif.id
-	}
-}
-
-function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
-	const formatted = { ...loadingBar }
-	if (formatted.bar_type?.type === 'java_download') {
-		formatted.title = formatMessage(messages.downloadingJava, {
-			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?.pack_name) {
-		formatted.title = formatted.bar_type.pack_name
-	}
-	return formatted
-}
-
-async function refreshLoadingBars() {
-	const bars: Record<string, LoadingBar> = await progress_bars_list().catch((error) => {
-		handleError(error)
-		return {}
-	})
-
-	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]
-		}),
-	)
-
-	currentLoadingBars.value.sort((a, b) => {
-		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
-		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
-		return aKey.localeCompare(bKey)
-	})
-
-	updateNotification()
-}
-
-const installJobNotifications = await useInstallJobNotifications({
-	router,
-	handleError,
-	onChange: updateNotification,
-})
-
-await refreshLoadingBars()
-
-const unlistenLoading = await loading_listener(async () => {
-	await refreshLoadingBars()
-})
-
-function openDownloadToast() {
-	updateNotification(true)
-}
-
-function selectProcess(process: RunningProcess) {
-	selectedProcess.value = process
-}
-
-onBeforeUnmount(() => {
-	removeNotification()
-	terminalNotificationIds.forEach((id) => popupNotificationManager.removeNotification(id))
-	terminalNotificationIds.clear()
-	dismissed.value = false
-	window.removeEventListener('offline', handleOffline)
-	window.removeEventListener('online', handleOnline)
-	unlistenProcess()
-	unlistenLoading()
-	installJobNotifications.dispose()
-})
-</script>

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

@@ -1,159 +1,64 @@
 <template>
-	<div
-		ref="outerRef"
-		data-tauri-drag-region
-		class="min-w-0 overflow-hidden pl-4"
-		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
-		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
-		@mouseenter="onMouseEnter"
-		@mouseleave="onMouseLeave"
-	>
-		<div
-			ref="innerRef"
-			data-tauri-drag-region
-			class="flex w-fit items-center gap-2 pr-4"
-			:class="{ 'breadcrumbs-scroll': isAnimating }"
-			@animationiteration="onAnimationIteration"
+	<div data-tauri-drag-region class="flex items-center gap-1 pl-3">
+		<Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+			<ChevronLeftIcon />
+		</Button>
+		<Button
+			v-if="false"
+			class="breadcrumbs__forward transparent"
+			icon-only
+			@click="$router.forward()"
 		>
-			<template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.slot">
-				<component
-					:is="index < breadcrumbs.length - 1 && breadcrumb.to ? RouterLink : 'span'"
-					v-bind="index < breadcrumbs.length - 1 && breadcrumb.to ? { to: breadcrumb.to } : {}"
-					:data-tauri-drag-region="index === breadcrumbs.length - 1 ? '' : undefined"
-					class="flex shrink-0 items-center gap-1.5 whitespace-nowrap text-base font-medium leading-6"
-					:class="
-						index === breadcrumbs.length - 1
-							? 'cursor-default select-none text-contrast'
-							: 'text-primary hover:text-contrast'
-					"
-					:aria-current="index === breadcrumbs.length - 1 ? 'page' : undefined"
-				>
-					<Avatar
-						v-if="breadcrumb.visual?.type === 'image'"
-						:src="breadcrumb.visual.src"
-						:alt="breadcrumb.visual.alt ?? breadcrumb.label"
-						:circle="breadcrumb.visual.circle"
-						:tint-by="breadcrumb.visual.tintBy ?? breadcrumb.id"
-						size="20px"
-						no-shadow
-						raised
-						class="inline-block shrink-0 align-middle"
-						:class="{ '!rounded-md': !breadcrumb.visual.circle }"
-					/>
-					<component
-						:is="breadcrumb.visual.component"
-						v-else-if="breadcrumb.visual?.type === 'icon'"
-						class="size-5 shrink-0 text-primary"
-						aria-hidden="true"
-					/>
-					<span>{{ breadcrumb.label }}</span>
-				</component>
-				<ChevronRightIcon
-					v-if="index < breadcrumbs.length - 1"
-					data-tauri-drag-region
-					class="size-5 shrink-0 text-primary"
-				/>
-			</template>
-		</div>
+			<ChevronRightIcon />
+		</Button>
+		{{ breadcrumbData.resetToNames(breadcrumbs) }}
+		<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
+			<router-link
+				v-if="breadcrumb.link"
+				:to="{
+					path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+					query: breadcrumb.query,
+				}"
+				class="text-primary"
+				>{{
+					breadcrumb.name.charAt(0) === '?'
+						? breadcrumbData.getName(breadcrumb.name.slice(1))
+						: breadcrumb.name
+				}}
+			</router-link>
+			<span
+				v-else
+				data-tauri-drag-region
+				class="text-contrast font-semibold cursor-default select-none"
+				>{{
+					breadcrumb.name.charAt(0) === '?'
+						? breadcrumbData.getName(breadcrumb.name.slice(1))
+						: breadcrumb.name
+				}}</span
+			>
+			<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
+		</template>
 	</div>
 </template>
 
-<script setup lang="ts">
-import { ChevronRightIcon } from '@modrinth/assets'
-import { Avatar } from '@modrinth/ui'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { RouterLink } from 'vue-router'
+<script setup>
+import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 
-import { injectBreadcrumbManager } from '@/providers/breadcrumbs'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
 
-const { entries: breadcrumbs } = injectBreadcrumbManager()
+const route = useRoute()
 
-// Overflow detection
-const outerRef = ref<HTMLDivElement | null>(null)
-const innerRef = ref<HTMLDivElement | null>(null)
-const isOverflowing = ref(false)
-const isAnimating = ref(false)
-const overflowAmount = ref(0)
-
-let hovered = false
-let stopping = false
-
-function checkOverflow() {
-	if (!outerRef.value || !innerRef.value) return
-	const outerStyles = window.getComputedStyle(outerRef.value)
-	const horizontalPadding =
-		Number.parseFloat(outerStyles.paddingLeft) + Number.parseFloat(outerStyles.paddingRight)
-	const availableWidth = outerRef.value.clientWidth - horizontalPadding
-	const overflow = innerRef.value.scrollWidth - availableWidth
-	isOverflowing.value = overflow > 0
-	overflowAmount.value = overflow
-}
-
-function onMouseEnter() {
-	hovered = true
-	stopping = false
-	if (isOverflowing.value) {
-		isAnimating.value = true
-	}
-}
-
-function onMouseLeave() {
-	hovered = false
-	if (isAnimating.value) {
-		stopping = true
-	}
-}
-
-function onAnimationIteration() {
-	if (stopping && !hovered) {
-		isAnimating.value = false
-		stopping = false
-	}
-}
-
-let resizeObserver: ResizeObserver | null = null
-
-onMounted(() => {
-	checkOverflow()
-	resizeObserver = new ResizeObserver(checkOverflow)
-	if (outerRef.value) resizeObserver.observe(outerRef.value)
-	if (innerRef.value) resizeObserver.observe(innerRef.value)
-})
-
-onBeforeUnmount(() => {
-	resizeObserver?.disconnect()
-})
-
-watch(breadcrumbs, () => {
-	requestAnimationFrame(checkOverflow)
+const breadcrumbData = useBreadcrumbs()
+const breadcrumbs = computed(() => {
+	const additionalContext =
+		route.meta.useContext === true
+			? breadcrumbData.context
+			: route.meta.useRootContext === true
+				? breadcrumbData.rootContext
+				: null
+	return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
 </script>
-
-<style scoped>
-.breadcrumb-fade-mask {
-	mask-image: linear-gradient(
-		to right,
-		transparent,
-		black 12px,
-		black calc(100% - 12px),
-		transparent
-	);
-}
-
-.breadcrumbs-scroll {
-	animation: breadcrumb-scroll 10s ease-in-out infinite;
-}
-
-@keyframes breadcrumb-scroll {
-	0% {
-		transform: translateX(0);
-	}
-	35%,
-	65% {
-		transform: translateX(var(--scroll-distance));
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-</style>

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

@@ -6,23 +6,16 @@ import {
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
-	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Button,
-	ButtonLink,
-	Collapsible,
-	IconButton,
-	injectNotificationManager,
-} from '@modrinth/ui'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 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'
 
@@ -40,7 +33,6 @@ const metadata = ref({})
 
 defineExpose({
 	async show(errorVal, context, canClose = true, source = null) {
-		console.log(errorVal, context, canClose, source)
 		closable.value = canClose
 
 		if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
@@ -58,12 +50,16 @@ 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'
 			supportLink.value = 'https://support.modrinth.com'
 
-			if (errorVal.message.includes('directory is not writable')) {
+			if (errorVal.message.includes('directory is not writeable')) {
 				metadata.value.readOnly = true
 			}
 
@@ -74,7 +70,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'
@@ -127,7 +123,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)
@@ -158,7 +154,7 @@ async function copyToClipboard(text) {
 
 <template>
 	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
-		<div class="modal-body max-w-[550px]">
+		<div class="modal-body">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
 					<template v-if="metadata.network">
@@ -245,6 +241,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
@@ -269,7 +279,7 @@ async function copyToClipboard(text) {
 					{{ debugInfo }}
 				</template>
 				<template v-if="hasDebugInfo">
-					<div class="w-full h-[1px] bg-surface-5 mb-3"></div>
+					<hr />
 					<p>
 						If nothing is working and you need help, visit
 						<a :href="supportLink">our support page</a>
@@ -279,50 +289,34 @@ async function copyToClipboard(text) {
 				</template>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonLink :href="supportLink" @click="errorModal.hide()"
-					><ChatIcon /> Get support</ButtonLink
-				>
-				<Button v-if="closable" @click="errorModal.hide()"><XIcon /> Close</Button>
+				<ButtonStyled>
+					<a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+				</ButtonStyled>
+				<ButtonStyled v-if="closable">
+					<button @click="errorModal.hide()"><XIcon /> Close</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="hasDebugInfo">
+					<button :disabled="copied" @click="copyToClipboard(debugInfo)">
+						<template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+						<template v-else> <CopyIcon /> Copy debug info </template>
+					</button>
+				</ButtonStyled>
 			</div>
 			<template v-if="hasDebugInfo">
-				<div class="flex flex-col gap-2">
-					<div class="w-full h-[1px] bg-surface-5"></div>
-
-					<div class="overflow-clip">
-						<button
-							class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
-							@click="errorCollapsed = !errorCollapsed"
-						>
-							<span class="flex items-center gap-2 text-contrast font-extrabold m-0">
-								<WrenchIcon class="h-4 w-4" />
-								Debug information
-							</span>
-							<DropdownIcon
-								class="h-5 w-5 text-secondary transition-transform"
-								:class="{ 'rotate-180': !errorCollapsed }"
-							/>
-						</button>
-						<Collapsible :collapsed="errorCollapsed">
-							<div
-								class="p-3 bg-surface-2 rounded-2xl text-xs grid grid-cols-[1fr_auto] max-w-full items-start"
-							>
-								<div
-									class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
-								>
-									{{ debugInfo }}
-								</div>
-								<IconButton
-									v-tooltip="'Copy debug info'"
-									:label="'Copy debug info'"
-									:disabled="copied"
-									@click="copyToClipboard(debugInfo)"
-								>
-									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-									<template v-else> <CopyIcon /> </template>
-								</IconButton>
-							</div>
-						</Collapsible>
-					</div>
+				<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+					<button
+						class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+						@click="errorCollapsed = !errorCollapsed"
+					>
+						<span class="text-contrast font-extrabold m-0">Debug information:</span>
+						<DropdownIcon
+							class="h-5 w-5 text-secondary transition-transform"
+							:class="{ 'rotate-180': !errorCollapsed }"
+						/>
+					</button>
+					<Collapsible :collapsed="errorCollapsed">
+						<pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+					</Collapsible>
 				</div>
 			</template>
 		</div>

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

@@ -1,45 +1,14 @@
 <script setup>
-import { XIcon } from '@modrinth/assets'
-import {
-	Button,
-	commonMessages,
-	defineMessages,
-	FileTreeSelect,
-	injectNotificationManager,
-	NewModal,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
-import { save } from '@tauri-apps/plugin-dialog'
-import { ref, shallowRef } from 'vue'
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { Button, Checkbox, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { open } from '@tauri-apps/plugin-dialog'
+import { ref } from 'vue'
 
-import { PackageIcon } from '@/assets/icons'
-import { export_instance_mrpack, 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' },
-	modpackNamePlaceholder: {
-		id: 'app.export-modal.modpack-name-placeholder',
-		defaultMessage: 'Modpack name',
-	},
-	versionNumberLabel: {
-		id: 'app.export-modal.version-number-label',
-		defaultMessage: 'Version number',
-	},
-	versionNumberPlaceholder: {
-		id: 'app.export-modal.version-number-placeholder',
-		defaultMessage: '1.0.0',
-	},
-	descriptionPlaceholder: {
-		id: 'app.export-modal.description-placeholder',
-		defaultMessage: 'Enter modpack description...',
-	},
-	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
-})
 
 const props = defineProps({
 	instance: {
@@ -50,9 +19,8 @@ const props = defineProps({
 
 defineExpose({
 	show: () => {
-		resetExportState()
 		exportModal.value.show()
-		void initFiles().catch(handleError)
+		initFiles()
 	},
 })
 
@@ -60,44 +28,74 @@ const exportModal = ref(null)
 const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
-const files = shallowRef([])
-const includedFilePaths = ref([])
-const excludedFilePaths = ref([])
-const fileTreeKey = ref(0)
-const filesLoadId = ref(0)
-const directoryEntries = new Map()
-const currentDirectory = ref('')
+const files = ref([])
+const folders = ref([])
+const showingFiles = ref(false)
 
-async function initFiles() {
-	const loadId = ++filesLoadId.value
-	const exportCandidates = await get_pack_export_candidates(props.instance.id)
-	if (loadId !== filesLoadId.value) return
-
-	files.value = exportCandidates
-	directoryEntries.set('', exportCandidates)
-	currentDirectory.value = ''
-	includedFilePaths.value = files.value
-		.filter((file) => !file.disabled && file.defaultSelected)
-		.map((file) => file.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'))
+			.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)
+				}
+			}),
+	)
+	folders.value = [...newFolders.entries()].map(([name, value]) => [
+		{
+			name,
+			showingMore: false,
+		},
+		value,
+	])
 }
 
+await initFiles()
+
 const exportPack = async () => {
-	const outputPath = await save({
-		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
-		filters: [
-			{
-				name: 'Modrinth Modpack',
-				extensions: ['mrpack'],
-			},
-		],
+	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 open({
+		directory: true,
+		multiple: false,
 	})
 
 	if (outputPath) {
-		export_instance_mrpack(
-			props.instance.id,
-			outputPath,
-			includedFilePaths.value,
-			excludedFilePaths.value,
+		export_profile_mrpack(
+			props.instance.path,
+			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+			filesToExport,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -105,118 +103,192 @@ const exportPack = async () => {
 		exportModal.value.hide()
 	}
 }
-
-function resetExportState() {
-	nameInput.value = props.instance.name
-	exportDescription.value = ''
-	versionInput.value = '1.0.0'
-	files.value = []
-	includedFilePaths.value = []
-	excludedFilePaths.value = []
-	fileTreeKey.value += 1
-	directoryEntries.clear()
-	currentDirectory.value = ''
-}
-
-async function loadExportDirectory(path) {
-	const normalizedPath = normalizeExportPath(path)
-	currentDirectory.value = normalizedPath
-
-	const cachedEntries = directoryEntries.get(normalizedPath)
-	if (cachedEntries) {
-		files.value = cachedEntries
-		return
-	}
-
-	const loadId = filesLoadId.value
-	files.value = []
-
-	try {
-		const childItems = await get_pack_export_candidates(
-			props.instance.id,
-			normalizedPath || undefined,
-		)
-		if (loadId !== filesLoadId.value) return
-
-		directoryEntries.set(normalizedPath, childItems)
-		if (currentDirectory.value === normalizedPath) {
-			files.value = childItems
-		}
-	} catch {
-		if (currentDirectory.value === normalizedPath) files.value = []
-	}
-}
-
-function normalizeExportPath(path) {
-	return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
-}
 </script>
 
 <template>
-	<NewModal
-		ref="exportModal"
-		:header="formatMessage(messages.header)"
-		scrollable
-		width="46rem"
-		max-width="calc(100vw - 2rem)"
-	>
-		<div class="flex flex-col gap-4">
-			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input w-full">
-					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
-					<StyledInput
-						v-model="nameInput"
-						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>
-					<StyledInput
-						v-model="versionInput"
-						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>
+	<ModalWrapper ref="exportModal" header="Export modpack">
+		<div class="modal-body">
+			<div class="labeled_input">
+				<p>Modpack Name</p>
 				<StyledInput
-					v-model="exportDescription"
-					multiline
-					:placeholder="formatMessage(messages.descriptionPlaceholder)"
-					wrapper-class="w-full"
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					placeholder="Modpack name"
+					clearable
 				/>
 			</div>
-			<FileTreeSelect
-				:key="fileTreeKey"
-				v-model="includedFilePaths"
-				v-model:excluded-paths="excludedFilePaths"
-				class="min-w-0"
-				:items="files"
-				lazy
-				@navigate="loadExportDirectory"
-			/>
-		</div>
-		<template #actions>
-			<div class="flex items-center justify-end gap-2">
-				<Button type="outlined" @click="exportModal.hide">
+			<div class="labeled_input">
+				<p>Version number</p>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					placeholder="1.0.0"
+					clearable
+				/>
+			</div>
+			<div class="adjacent-input">
+				<div class="labeled_input">
+					<p>Description</p>
+
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						placeholder="Enter modpack description..."
+					/>
+				</div>
+			</div>
+
+			<div class="table">
+				<div class="table-head">
+					<div class="table-cell row-wise">
+						Select files and folders to include in pack
+						<Button
+							class="sleek-primary collapsed-button"
+							icon-only
+							@click="() => (showingFiles = !showingFiles)"
+						>
+							<PlusIcon v-if="!showingFiles" />
+							<XIcon v-else />
+						</Button>
+					</div>
+				</div>
+				<div v-if="showingFiles" class="table-content">
+					<div v-for="[path, children] in folders" :key="path.name" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
+								<Checkbox
+									:model-value="children.every((child) => child.selected)"
+									:label="path.name"
+									class="select-checkbox"
+									:disabled="children.every((x) => x.disabled)"
+									@update:model-value="
+										(newValue) => children.forEach((child) => (child.selected = newValue))
+									"
+								/>
+								<Checkbox
+									v-model="path.showingMore"
+									class="select-checkbox dropdown"
+									collapsing-toggle-style
+								/>
+							</div>
+							<div v-if="path.showingMore" class="file-secondary">
+								<div v-for="child in children" :key="child.path" class="file-secondary-row">
+									<Checkbox
+										v-model="child.selected"
+										:label="child.name"
+										class="select-checkbox"
+										:disabled="child.disabled"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-for="file in files" :key="file.path" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
+								<Checkbox
+									v-model="file.selected"
+									:label="file.name"
+									:disabled="file.disabled"
+									class="select-checkbox"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="button-row push-right">
+				<Button @click="exportModal.hide">
 					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
+					Cancel
 				</Button>
-				<Button type="colored" color="brand" @click="exportPack">
+				<Button color="primary" @click="exportPack">
 					<PackageIcon />
-					{{ formatMessage(messages.exportButton) }}
+					Export
 				</Button>
 			</div>
-		</template>
-	</NewModal>
+		</div>
+	</ModalWrapper>
 </template>
+
+<style scoped lang="scss">
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+}
+
+.labeled_input {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+
+	p {
+		margin: 0;
+	}
+}
+
+.select-checkbox {
+	gap: var(--gap-sm);
+
+	button.checkbox {
+		border: none;
+	}
+
+	&.dropdown {
+		margin-left: auto;
+	}
+}
+
+.table-content {
+	max-height: 18rem;
+	overflow-y: auto;
+}
+
+.table {
+	border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+}
+
+.file-primary {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
+}
+
+.file-secondary {
+	margin-left: var(--gap-xl);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+	height: 100%;
+	vertical-align: center;
+}
+
+.file-secondary-row {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
+}
+
+.button-row {
+	display: flex;
+	gap: var(--gap-sm);
+	align-items: center;
+}
+
+.row-wise {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+}
+</style>

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

@@ -7,7 +7,7 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from '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,23 +54,22 @@ 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
 }
 
 const play = async (e, context) => {
 	e?.stopPropagation()
-	if (props.instance.quarantined) return
 	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', {
+			trackEvent('InstancePlay', {
 				loader: props.instance.loader,
 				game_version: props.instance.game_version,
 				source: context,
@@ -84,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,33 +93,18 @@ const stop = async (e, context) => {
 
 const repair = async (e) => {
 	e?.stopPropagation()
-	if (props.instance.quarantined) return
 
-	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 () => {
-	if (props.instance.quarantined) return
 	await router.push({
 		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-		query: { i: props.instance.id },
+		query: { i: props.instance.path },
 	})
 }
 
@@ -137,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
@@ -145,9 +128,7 @@ const unlisten = await process_listener((e) => {
 	}
 })
 
-onMounted(() => {
-	checkProcess()
-})
+onMounted(() => checkProcess())
 onUnmounted(() => unlisten())
 </script>
 
@@ -161,44 +142,33 @@ 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">
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<IconButton
-					v-if="playing"
-					v-tooltip="'Stop'"
-					type="colored"
-					color="red"
-					:label="'Stop'"
-					@mouseenter="checkProcess"
-					@click="(e) => stop(e, 'InstanceCard')"
-				>
-					<StopCircleIcon />
-				</IconButton>
-				<IconButton
-					v-else-if="modLoading"
-					v-tooltip="'Instance is loading...'"
-					:label="'Instance is loading...'"
-					disabled
-				>
-					<SpinnerIcon class="animate-spin" />
-				</IconButton>
-				<IconButton
-					v-else-if="!instance.quarantined"
-					v-tooltip="'Play'"
-					:type="first ? 'colored' : 'base'"
-					:color="first ? 'brand' : undefined"
-					label="Play"
-					@click="(e) => play(e, 'InstanceCard')"
-					@mouseenter="checkProcess"
-				>
-					<!-- Translate for optical centering -->
-					<PlayIcon class="translate-x-[1px]" />
-				</IconButton>
+				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
+					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
+						<StopCircleIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="modLoading" color="standard" circular>
+					<button v-tooltip="'Instance is loading...'" disabled>
+						<SpinnerIcon class="animate-spin" />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
+					<button
+						v-tooltip="'Play'"
+						@click="(e) => play(e, 'InstanceCard')"
+						@mousehover="checkProcess"
+					>
+						<!-- Translate for optical centering -->
+						<PlayIcon class="translate-x-[1px]" />
+					</button>
+				</ButtonStyled>
 			</div>
 			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
 				<TimerIcon />
@@ -221,56 +191,47 @@ 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`}`"
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
-					<IconButton
-						v-if="playing"
-						v-tooltip="'Stop'"
-						type="colored"
-						color="red"
-						size="xl"
-						:label="'Stop'"
-						:class="{ 'scale-100 opacity-100': playing }"
-						class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
-						@click="(e) => stop(e, 'InstanceCard')"
-						@mouseenter="checkProcess"
-					>
-						<StopCircleIcon />
-					</IconButton>
+					<ButtonStyled v-if="playing" size="large" color="red" circular>
+						<button
+							v-tooltip="'Stop'"
+							:class="{ 'scale-100 opacity-100': playing }"
+							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
+							@click="(e) => stop(e, 'InstanceCard')"
+							@mousehover="checkProcess"
+						>
+							<StopCircleIcon />
+						</button>
+					</ButtonStyled>
 					<SpinnerIcon
 						v-else-if="modLoading || installing"
 						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
 						class="animate-spin w-8 h-8"
 						tabindex="-1"
 					/>
-					<IconButton
-						v-else-if="!installed && !instance.quarantined"
-						v-tooltip="'Repair'"
-						type="colored"
-						color="brand"
-						size="xl"
-						:label="'Repair'"
-						class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-						@click="(e) => repair(e)"
-					>
-						<DownloadIcon />
-					</IconButton>
-					<IconButton
-						v-else-if="!instance.quarantined"
-						v-tooltip="'Play'"
-						type="colored"
-						color="brand"
-						size="xl"
-						:label="'Play'"
-						class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-						@click="(e) => play(e, 'InstanceCard')"
-						@mouseenter="checkProcess"
-					>
-						<PlayIcon class="translate-x-[2px]" />
-					</IconButton>
+					<ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
+						<button
+							v-tooltip="'Repair'"
+							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+							@click="(e) => repair(e)"
+						>
+							<DownloadIcon />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else size="large" color="brand" circular>
+						<button
+							v-tooltip="'Play'"
+							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+							@click="(e) => play(e, 'InstanceCard')"
+							@mousehover="checkProcess"
+						>
+							<PlayIcon class="translate-x-[2px]" />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="flex flex-col gap-1">

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

@@ -0,0 +1,662 @@
+<template>
+	<ModalWrapper ref="modal" header="Creating an instance">
+		<div class="modal-header">
+			<Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
+		</div>
+		<hr class="card-divider" />
+		<div v-if="creationType === 'custom'" class="modal-body">
+			<div class="image-upload">
+				<Avatar :src="display_icon" size="md" :rounded="true" />
+				<div class="image-input">
+					<Button @click="upload_icon()">
+						<UploadIcon />
+						Select icon
+					</Button>
+					<Button :disabled="!display_icon" @click="reset_icon">
+						<XIcon />
+						Remove icon
+					</Button>
+				</div>
+			</div>
+			<div class="input-row">
+				<p class="input-label">Name</p>
+				<StyledInput
+					v-model="profile_name"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter a name for your instance..."
+					:maxlength="100"
+					wrapper-class="w-full"
+				/>
+			</div>
+			<div class="input-row">
+				<p class="input-label">Loader</p>
+				<Chips v-model="loader" :items="loaders" />
+			</div>
+			<div class="input-row">
+				<p class="input-label">Game version</p>
+				<div class="flex gap-4 items-center">
+					<multiselect
+						v-model="game_version"
+						class="selector"
+						:options="game_versions"
+						:multiple="false"
+						:searchable="true"
+						placeholder="Select game version"
+						open-direction="top"
+						:show-labels="false"
+					/>
+					<Checkbox v-model="showSnapshots" class="shrink-0" label="Show all versions" />
+				</div>
+			</div>
+			<div v-if="loader !== 'vanilla'" class="input-row">
+				<p class="input-label">Loader version</p>
+				<Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
+			</div>
+			<div v-if="loader_version === 'other' && loader !== 'vanilla'">
+				<div v-if="game_version" class="input-row">
+					<p class="input-label">Select version</p>
+					<multiselect
+						v-model="specified_loader_version"
+						class="selector"
+						:options="selectable_versions"
+						:searchable="true"
+						placeholder="Select loader version"
+						open-direction="top"
+						:show-labels="false"
+					/>
+				</div>
+				<div v-else class="input-row">
+					<p class="warning">Select a game version before you select a loader version</p>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<Button @click="hide()">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button color="primary" :disabled="!check_valid || creating" @click="create_instance()">
+					<PlusIcon v-if="!creating" />
+					{{ creating ? 'Creating...' : 'Create' }}
+				</Button>
+			</div>
+		</div>
+		<div v-else-if="creationType === 'from file'" class="modal-body">
+			<Button @click="openFile"> <FolderOpenIcon /> Import from file </Button>
+			<div class="info"><InfoIcon /> Or drag and drop your .mrpack file</div>
+		</div>
+		<div v-else class="modal-body">
+			<Chips
+				v-model="selectedProfileType"
+				:items="profileOptions"
+				:format-label="(profile) => profile?.name"
+			/>
+			<div class="path-selection">
+				<h3>{{ selectedProfileType.name }} path</h3>
+				<div class="path-input">
+					<StyledInput
+						v-model="selectedProfileType.path"
+						:icon="FolderOpenIcon"
+						type="text"
+						placeholder="Path to launcher"
+						clearable
+						@change="setPath"
+					/>
+					<Button icon-only @click="selectLauncherPath">
+						<FolderSearchIcon />
+					</Button>
+					<Button icon-only @click="reload">
+						<UpdatedIcon />
+					</Button>
+				</div>
+			</div>
+			<div class="table">
+				<div class="table-head table-row">
+					<div class="toggle-all table-cell">
+						<Checkbox
+							class="select-checkbox"
+							:model-value="
+								profiles.get(selectedProfileType.name)?.every((child) => child.selected)
+							"
+							@update:model-value="
+								(newValue) =>
+									profiles
+										.get(selectedProfileType.name)
+										?.forEach((child) => (child.selected = newValue))
+							"
+						/>
+					</div>
+					<div class="name-cell table-cell">Profile name</div>
+				</div>
+				<div
+					v-if="
+						profiles.get(selectedProfileType.name) &&
+						profiles.get(selectedProfileType.name).length > 0
+					"
+					class="table-content"
+				>
+					<div
+						v-for="(profile, index) in profiles.get(selectedProfileType.name)"
+						:key="index"
+						class="table-row"
+					>
+						<div class="checkbox-cell table-cell">
+							<Checkbox v-model="profile.selected" class="select-checkbox" />
+						</div>
+						<div class="name-cell table-cell">
+							{{ profile.name }}
+						</div>
+					</div>
+				</div>
+				<div v-else class="table-content empty">No profiles found</div>
+			</div>
+			<div class="button-row">
+				<Button
+					:disabled="
+						loading ||
+						!Array.from(profiles.values())
+							.flatMap((e) => e)
+							.some((e) => e.selected)
+					"
+					color="primary"
+					@click="next"
+				>
+					{{
+						loading
+							? 'Importing...'
+							: Array.from(profiles.values())
+										.flatMap((e) => e)
+										.some((e) => e.selected)
+								? `Import ${
+										Array.from(profiles.values())
+											.flatMap((e) => e)
+											.filter((e) => e.selected).length
+									} profiles`
+								: 'Select profiles to import'
+					}}
+				</Button>
+				<ProgressBar
+					v-if="loading"
+					:progress="(importedProfiles / (totalProfiles + 0.0001)) * 100"
+				/>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup>
+import {
+	FolderOpenIcon,
+	FolderSearchIcon,
+	InfoIcon,
+	PlusIcon,
+	UpdatedIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	Button,
+	Checkbox,
+	Chips,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import Multiselect from 'vue-multiselect'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+	get_default_launcher_path,
+	get_importable_instances,
+	import_instance,
+} from '@/helpers/import.js'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
+import { create } from '@/helpers/profile'
+import { get_loaders } from '@/helpers/tags'
+
+const { handleError } = injectNotificationManager()
+
+const profile_name = ref('')
+const game_version = ref('')
+const loader = ref('vanilla')
+const loader_version = ref('stable')
+const specified_loader_version = ref('')
+const icon = ref(null)
+const display_icon = ref(null)
+const creating = ref(false)
+const showSnapshots = ref(false)
+const creationType = ref('custom')
+const isShowing = ref(false)
+
+defineExpose({
+	show: async () => {
+		game_version.value = ''
+		specified_loader_version.value = ''
+		profile_name.value = ''
+		creating.value = false
+		showSnapshots.value = false
+		loader.value = 'vanilla'
+		loader_version.value = 'stable'
+		icon.value = null
+		display_icon.value = null
+		isShowing.value = true
+		modal.value.show()
+
+		unlistener.value = await getCurrentWebview().onDragDropEvent(async (event) => {
+			// Only if modal is showing
+			if (!isShowing.value) return
+			if (event.payload.type !== 'drop') return
+			if (creationType.value !== 'from file') return
+			hide()
+			const { paths } = event.payload
+			if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
+				await create_profile_and_install_from_file(paths[0]).catch(handleError)
+				trackEvent('InstanceCreate', {
+					source: 'CreationModalFileDrop',
+				})
+			}
+		})
+
+		trackEvent('InstanceCreateStart', { source: 'CreationModal' })
+	},
+})
+
+const unlistener = ref(null)
+const hide = () => {
+	isShowing.value = false
+	modal.value.hide()
+	if (unlistener.value) {
+		unlistener.value()
+		unlistener.value = null
+	}
+}
+onUnmounted(() => {
+	if (unlistener.value) {
+		unlistener.value()
+		unlistener.value = null
+	}
+})
+
+const [
+	fabric_versions,
+	forge_versions,
+	quilt_versions,
+	neoforge_versions,
+	all_game_versions,
+	loaders,
+] = await Promise.all([
+	get_loader_versions('fabric').then(shallowRef).catch(handleError),
+	get_loader_versions('forge').then(shallowRef).catch(handleError),
+	get_loader_versions('quilt').then(shallowRef).catch(handleError),
+	get_loader_versions('neo').then(shallowRef).catch(handleError),
+	get_game_versions().then(shallowRef).catch(handleError),
+	get_loaders()
+		.then((value) =>
+			ref(
+				value
+					.filter((item) => item.supported_project_types.includes('modpack'))
+					.map((item) => item.name.toLowerCase()),
+			),
+		)
+		.catch((err) => {
+			handleError(err)
+			return ref([])
+		}),
+])
+loaders.value.unshift('vanilla')
+
+const game_versions = computed(() => {
+	return all_game_versions.value.versions
+		.filter((item) => {
+			let defaultVal = item.type === 'release' || showSnapshots.value
+			if (loader.value === 'fabric') {
+				defaultVal &= fabric_versions.value.gameVersions.some((x) => item.id === x.id)
+			} else if (loader.value === 'forge') {
+				defaultVal &= forge_versions.value.gameVersions.some((x) => item.id === x.id)
+			} else if (loader.value === 'quilt') {
+				defaultVal &= quilt_versions.value.gameVersions.some((x) => item.id === x.id)
+			} else if (loader.value === 'neoforge') {
+				defaultVal &= neoforge_versions.value.gameVersions.some((x) => item.id === x.id)
+			}
+
+			return defaultVal
+		})
+		.map((item) => item.id)
+})
+
+const modal = ref(null)
+
+const check_valid = computed(() => {
+	return (
+		profile_name.value.trim() &&
+		game_version.value &&
+		game_versions.value.includes(game_version.value)
+	)
+})
+
+const create_instance = async () => {
+	creating.value = true
+	const loader_version_value =
+		loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
+	const loaderVersion = loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable')
+
+	hide()
+	creating.value = false
+
+	await create(
+		profile_name.value,
+		game_version.value,
+		loader.value,
+		loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable'),
+		icon.value,
+	).catch(handleError)
+
+	trackEvent('InstanceCreate', {
+		profile_name: profile_name.value,
+		game_version: game_version.value,
+		loader: loader.value,
+		loader_version: loaderVersion,
+		has_icon: !!icon.value,
+		source: 'CreationModal',
+	})
+}
+
+const upload_icon = async () => {
+	const res = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+			},
+		],
+	})
+
+	icon.value = res.path ?? res
+
+	if (!icon.value) return
+	display_icon.value = convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+	icon.value = null
+	display_icon.value = null
+}
+
+const selectable_versions = computed(() => {
+	if (game_version.value) {
+		if (loader.value === 'fabric') {
+			return fabric_versions.value.gameVersions[0].loaders.map((item) => item.id)
+		} else if (loader.value === 'forge') {
+			return forge_versions.value.gameVersions
+				.find((item) => item.id === game_version.value)
+				.loaders.map((item) => item.id)
+		} else if (loader.value === 'quilt') {
+			return quilt_versions.value.gameVersions[0].loaders.map((item) => item.id)
+		} else if (loader.value === 'neoforge') {
+			return neoforge_versions.value.gameVersions
+				.find((item) => item.id === game_version.value)
+				.loaders.map((item) => item.id)
+		}
+	}
+	return []
+})
+
+const openFile = async () => {
+	const newProject = await open({ multiple: false })
+	if (!newProject) return
+	hide()
+	await create_profile_and_install_from_file(newProject.path ?? newProject).catch(handleError)
+
+	trackEvent('InstanceCreate', {
+		source: 'CreationModalFileOpen',
+	})
+}
+
+const profiles = ref(
+	new Map([
+		['MultiMC', []],
+		['GDLauncher', []],
+		['ATLauncher', []],
+		['Curseforge', []],
+		['PrismLauncher', []],
+	]),
+)
+
+const loading = ref(false)
+const importedProfiles = ref(0)
+const totalProfiles = ref(0)
+
+const selectedProfileType = ref('MultiMC')
+const profileOptions = ref([
+	{ name: 'MultiMC', path: '' },
+	{ name: 'GDLauncher', path: '' },
+	{ name: 'ATLauncher', path: '' },
+	{ name: 'Curseforge', path: '' },
+	{ name: 'PrismLauncher', path: '' },
+])
+
+// Attempt to get import profiles on default paths
+const promises = profileOptions.value.map(async (option) => {
+	const path = await get_default_launcher_path(option.name).catch(handleError)
+	if (!path || path === '') return
+
+	// Try catch to allow failure and simply ignore default path attempt
+	try {
+		const instances = await get_importable_instances(option.name, path)
+
+		if (!instances) return
+		profileOptions.value.find((profile) => profile.name === option.name).path = path
+		profiles.value.set(
+			option.name,
+			instances.map((name) => ({ name, selected: false })),
+		)
+	} catch {
+		// Allow failure silently
+	}
+})
+await Promise.all(promises)
+
+const selectLauncherPath = async () => {
+	selectedProfileType.value.path = await open({ multiple: false, directory: true })
+
+	if (selectedProfileType.value.path) {
+		await reload()
+	}
+}
+
+const reload = async () => {
+	const instances = await get_importable_instances(
+		selectedProfileType.value.name,
+		selectedProfileType.value.path,
+	).catch(handleError)
+	if (instances) {
+		profiles.value.set(
+			selectedProfileType.value.name,
+			instances.map((name) => ({ name, selected: false })),
+		)
+	} else {
+		profiles.value.set(selectedProfileType.value.name, [])
+	}
+}
+
+const setPath = () => {
+	profileOptions.value.find((profile) => profile.name === selectedProfileType.value.name).path =
+		selectedProfileType.value.path
+}
+
+const next = async () => {
+	importedProfiles.value = 0
+	totalProfiles.value = Array.from(profiles.value.values())
+		.map((profiles) => profiles.filter((profile) => profile.selected).length)
+		.reduce((a, b) => a + b, 0)
+	loading.value = true
+	for (const launcher of Array.from(profiles.value.entries()).map(([launcher, profiles]) => ({
+		launcher,
+		path: profileOptions.value.find((option) => option.name === launcher).path,
+		profiles,
+	}))) {
+		for (const profile of launcher.profiles.filter((profile) => profile.selected)) {
+			await import_instance(launcher.launcher, launcher.path, profile.name)
+				.catch(handleError)
+				.then(() => console.log(`Successfully Imported ${profile.name} from ${launcher.launcher}`))
+			profile.selected = false
+			importedProfiles.value++
+		}
+	}
+	loading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+	margin-top: var(--gap-lg);
+}
+
+.input-label {
+	font-size: 1rem;
+	font-weight: bolder;
+	color: var(--color-contrast);
+	margin-bottom: 0.5rem;
+}
+
+.text-input {
+	width: 20rem;
+}
+
+.image-upload {
+	display: flex;
+	gap: 1rem;
+}
+
+.image-input {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
+}
+
+.warning {
+	font-style: italic;
+}
+
+:deep(button.checkbox) {
+	border: none;
+}
+
+.selector {
+	max-width: 20rem;
+}
+
+.labeled-divider {
+	text-align: center;
+}
+
+.labeled-divider:after {
+	background-color: var(--color-raised-bg);
+	content: 'Or';
+	color: var(--color-base);
+	padding: var(--gap-sm);
+	position: relative;
+	top: -0.5rem;
+}
+
+.info {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.modal-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding-bottom: 0;
+}
+
+.path-selection {
+	padding: var(--gap-xl);
+	background-color: var(--color-bg);
+	border-radius: var(--radius-lg);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+
+	h3 {
+		margin: 0;
+	}
+
+	.path-input {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		flex-direction: row;
+		gap: var(--gap-sm);
+
+		.iconified-input {
+			flex-grow: 1;
+			:deep(input) {
+				width: 100%;
+				flex-basis: auto;
+			}
+		}
+	}
+}
+
+.table {
+	border: 1px solid var(--color-bg);
+}
+
+.table-row {
+	grid-template-columns: min-content auto;
+}
+
+.table-content {
+	max-height: calc(5 * (18px + 2rem));
+	height: calc(5 * (18px + 2rem));
+	overflow-y: auto;
+}
+
+.select-checkbox {
+	button.checkbox {
+		border: none;
+	}
+}
+
+.button-row {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--gap-md);
+
+	.transparent {
+		padding: var(--gap-sm) 0;
+	}
+}
+
+.empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.5rem;
+	font-weight: bolder;
+	color: var(--color-contrast);
+}
+
+.card-divider {
+	margin: var(--gap-md) var(--gap-lg) 0 var(--gap-lg);
+}
+</style>

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { computed } from 'vue'
 
 type Instance = {
 	game_version: string
@@ -13,23 +12,18 @@ type Instance = {
 	name: string
 }
 
-const props = withDefaults(
-	defineProps<{
-		instance: Instance
-		backTab?: string
-	}>(),
-	{ backTab: undefined },
-)
-
-const instanceLink = computed(() => {
-	const base = `/instance/${encodeURIComponent(props.instance.id)}`
-	return props.backTab ? `${base}/${props.backTab}` : base
-})
+defineProps<{
+	instance: Instance
+}>()
 </script>
 
 <template>
 	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-		<router-link :to="instanceLink" tabindex="-1" class="flex flex-col gap-4 text-primary">
+		<router-link
+			:to="`/instance/${encodeURIComponent(instance.path)}`"
+			tabindex="-1"
+			class="flex flex-col gap-4 text-primary"
+		>
 			<span class="flex items-center gap-2">
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
@@ -48,7 +42,11 @@ const instanceLink = computed(() => {
 				</span>
 			</span>
 		</router-link>
-		<ButtonLink :to="instanceLink"> <LeftArrowIcon /> Back to instance </ButtonLink>
+		<ButtonStyled>
+			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
+				<LeftArrowIcon /> Back to instance
+			</router-link>
+		</ButtonStyled>
 	</div>
 </template>
 

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

@@ -1,43 +1,34 @@
 <template>
-	<ModalWrapper
-		ref="detectJavaModal"
-		:header="formatMessage(messages.title)"
-		: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">
-						<Button v-if="currentSelected.path === row.path" disabled>
-							<CheckIcon aria-hidden="true" />
-							{{ formatMessage(messages.selected) }}
-						</Button>
-						<Button v-else @click="setJavaInstall(row)">
-							<PlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.select) }}
-						</Button>
+	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
+		<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>
-				</template>
-				<template #empty-state>
-					<div class="p-4 text-secondary">
-						{{ formatMessage(messages.noInstallationsFound) }}
+					<div v-tooltip="javaInstall.path" class="table-cell table-text">
+						<span>{{ javaInstall.path }}</span>
 					</div>
-				</template>
-			</Table>
-			<div class="flex justify-end">
-				<Button
-					type="outlined"
-					class="!border-surface-4 !border"
-					@click="$refs.detectJavaModal.hide()"
-				>
-					<XIcon aria-hidden="true" />
-					{{ formatMessage(messages.cancel) }}
+					<div class="table-cell table-text manage">
+						<Button v-if="currentSelected.path === javaInstall.path" disabled
+							><CheckIcon /> Selected</Button
+						>
+						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+					</div>
+				</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">
+				<Button @click="$refs.detectJavaModal.hide()">
+					<XIcon />
+					Cancel
 				</Button>
 			</div>
 		</div>
@@ -45,64 +36,18 @@
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, defineMessages, injectNotificationManager, Table, useVIntl } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'
 
 const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	title: {
-		id: 'app.java-detection.title',
-		defaultMessage: 'Select Java installation',
-	},
-	versionColumn: {
-		id: 'app.java-detection.columns.version',
-		defaultMessage: 'Version',
-	},
-	pathColumn: {
-		id: 'app.java-detection.columns.path',
-		defaultMessage: 'Path',
-	},
-	actionsColumn: {
-		id: 'app.java-detection.columns.actions',
-		defaultMessage: 'Actions',
-	},
-	selected: {
-		id: 'app.java-detection.selected',
-		defaultMessage: 'Selected',
-	},
-	select: {
-		id: 'app.java-detection.select',
-		defaultMessage: 'Select',
-	},
-	noInstallationsFound: {
-		id: 'app.java-detection.no-installations-found',
-		defaultMessage: 'No Java installations found.',
-	},
-	cancel: {
-		id: 'app.java-detection.cancel',
-		defaultMessage: 'Cancel',
-	},
-})
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})
-const javaInstallColumns = computed(() => [
-	{ key: 'version', label: formatMessage(messages.versionColumn), width: '9rem' },
-	{ key: 'path', label: formatMessage(messages.pathColumn) },
-	{
-		key: 'actions',
-		label: formatMessage(messages.actionsColumn),
-		align: 'right',
-		width: '10rem',
-	},
-])
 
 defineExpose({
 	show: async (version, currentSelectedJava) => {
@@ -128,3 +73,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,88 +1,50 @@
 <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 ?? formatMessage(messages.pathPlaceholder)"
-				wrapper-class="installation-input"
-				@update:model-value="
-					(val) => {
-						emit('update:modelValue', {
-							...props.modelValue,
-							path: val,
-						})
-					}
-				"
-			/>
-			<Button
-				type="quiet"
-				:color="
-					!hoveringTest && !testingJava
-						? testingJavaSuccess === true
-							? 'green'
-							: 'red'
-						: undefined
-				"
-				:aria-label="formatMessage(messages.testJavaInstallation)"
-				class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
-				:disabled="testingJava || props.disabled"
-				:style="{
-					'--legacy-button-color':
-						(!hoveringTest && !testingJava
-							? testingJavaSuccess === true
-								? 'green'
-								: 'red'
-							: 'standard') &&
-						(!hoveringTest && !testingJava
-							? testingJavaSuccess === true
-								? 'green'
-								: 'red'
-							: 'standard') !== 'standard'
-							? `var(--color-${
-									!hoveringTest && !testingJava
-										? testingJavaSuccess === true
-											? 'green'
-											: 'red'
-										: 'standard'
-								})`
-							: undefined,
-				}"
-				@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>
-		</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">
 			<Button
 				v-if="props.version"
-				v-tooltip="
-					testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
-				"
-				:disabled="props.disabled || installingJava || testingJavaSuccess === true"
+				:disabled="props.disabled || installingJava"
 				@click="reinstallJava"
 			>
 				<DownloadIcon />
-				{{
-					installingJava
-						? formatMessage(messages.installing)
-						: formatMessage(messages.installRecommended)
-				}}
+				{{ installingJava ? 'Installing...' : 'Install recommended' }}
 			</Button>
 			<Button :disabled="props.disabled" @click="autoDetect">
 				<SearchIcon />
-				{{ formatMessage(messages.detect) }}
+				Detect
 			</Button>
 			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
 				<FolderSearchIcon />
-				{{ formatMessage(messages.browse) }}
+				Browse
+			</Button>
+			<Button v-if="testingJava" disabled> Testing... </Button>
+			<Button v-else-if="testingJavaSuccess === true">
+				<CheckIcon class="test-success" />
+				Success
+			</Button>
+			<Button v-else-if="testingJavaSuccess === false">
+				<XIcon class="test-fail" />
+				Failed
+			</Button>
+			<Button v-else :disabled="props.disabled" @click="testJava">
+				<PlayIcon />
+				Test
 			</Button>
 		</span>
 	</div>
@@ -90,69 +52,24 @@
 
 <script setup>
 import {
-	CheckCircleIcon,
+	CheckIcon,
 	DownloadIcon,
 	FolderSearchIcon,
-	RefreshCwIcon,
+	PlayIcon,
 	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
+	XIcon,
 } from '@modrinth/assets'
-import {
-	Button,
-	defineMessages,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, 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 { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	pathPlaceholder: {
-		id: 'app.java-selector.path.placeholder',
-		defaultMessage: '/path/to/java',
-	},
-	testJavaInstallation: {
-		id: 'app.java-selector.test-installation',
-		defaultMessage: 'Test Java installation',
-	},
-	alreadyInstalled: {
-		id: 'app.java-selector.already-installed',
-		defaultMessage: 'Already installed',
-	},
-	installing: {
-		id: 'app.java-selector.installing',
-		defaultMessage: 'Installing...',
-	},
-	installRecommended: {
-		id: 'app.java-selector.install-recommended',
-		defaultMessage: 'Install recommended',
-	},
-	detect: {
-		id: 'app.java-selector.detect',
-		defaultMessage: 'Detect',
-	},
-	browse: {
-		id: 'app.java-selector.browse',
-		defaultMessage: 'Browse',
-	},
-})
 
 const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: null,
-	},
 	version: {
 		type: Number,
 		required: false,
@@ -183,36 +100,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()
 
@@ -222,7 +132,6 @@ async function handleJavaFileInput() {
 			result = {
 				path: filePath.path ?? filePath,
 				version: props.version.toString(),
-				parsed_version: props.version,
 				architecture: 'x86',
 			}
 		}
@@ -256,7 +165,6 @@ async function reinstallJava() {
 		result = {
 			path: path,
 			version: props.version.toString(),
-			parsed_version: props.version,
 			architecture: 'x86',
 		}
 	}
@@ -268,23 +176,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 {
@@ -306,5 +204,17 @@ async function reinstallJava() {
 	align-items: center;
 	gap: 0.5rem;
 	margin: 0;
+
+	.btn {
+		width: max-content;
+	}
+}
+
+.test-success {
+	color: var(--color-green);
+}
+
+.test-fail {
+	color: var(--color-red);
 }
 </style>

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

@@ -1,6 +1,7 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
+import { Avatar, FormattedTag, TagItem } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -10,8 +11,6 @@ dayjs.extend(relativeTime)
 
 const router = useRouter()
 
-const { formatCompactNumber } = useCompactNumber()
-
 const props = defineProps({
 	project: {
 		type: Object,
@@ -97,13 +96,13 @@ const toTransparent = computed(() => {
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<DownloadIcon />
-					{{ formatCompactNumber(project.downloads) }}
+					{{ formatNumber(project.downloads) }}
 				</div>
 				<div
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<HeartIcon />
-					{{ formatCompactNumber(project.follows) }}
+					{{ formatNumber(project.follows) }}
 				</div>
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />

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

@@ -1,11 +1,11 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, IconButton } from '@modrinth/ui'
+import { Badge, Button } from '@modrinth/ui'
 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" />
@@ -74,16 +74,15 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<IconButton
-									:type="version.id === installedVersion ? 'base' : 'colored'"
-									:color="version.id === installedVersion ? undefined : 'brand'"
-									label="Switch version"
+								<Button
+									:color="version.id === installedVersion ? '' : 'primary'"
+									icon-only
 									:disabled="inProgress || installing || version.id === installedVersion"
 									@click.stop="() => switchVersion(version.id)"
 								>
 									<SwapIcon v-if="version.id !== installedVersion" />
 									<CheckIcon v-else />
-								</IconButton>
+								</Button>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">

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

@@ -3,7 +3,6 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
-		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),

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

@@ -0,0 +1,160 @@
+<template>
+	<nav
+		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+	>
+		<RouterLink
+			v-for="(link, index) in filteredLinks"
+			v-show="link.shown === undefined ? true : link.shown"
+			:key="index"
+			ref="tabLinkElements"
+			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+			:class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
+		>
+			<component :is="link.icon" v-if="link.icon" class="size-5" />
+			<span class="text-nowrap">{{ link.label }}</span>
+		</RouterLink>
+		<div
+			:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'}`"
+			:style="{
+				left: sliderLeftPx,
+				top: sliderTopPx,
+				right: sliderRightPx,
+				bottom: sliderBottomPx,
+				opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+			}"
+			aria-hidden="true"
+		></div>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+interface Tab {
+	label: string
+	href: string | RouteLocationRaw
+	shown?: boolean
+	icon?: unknown
+	subpages?: string[]
+}
+
+const props = defineProps<{
+	links: Tab[]
+	query?: string
+}>()
+
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+const activeIndex = ref(-1)
+const oldIndex = ref(-1)
+const subpageSelected = ref(false)
+
+const filteredLinks = computed(() =>
+	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
+)
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
+
+function pickLink() {
+	let index = -1
+	subpageSelected.value = false
+	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
+		const link = filteredLinks.value[i]
+
+		if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
+			index = i
+			break
+		} else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
+			index = i
+			subpageSelected.value = true
+			break
+		}
+	}
+	activeIndex.value = index
+
+	if (activeIndex.value !== -1) {
+		startAnimation()
+	} else {
+		oldIndex.value = -1
+		sliderLeft.value = 0
+		sliderRight.value = 0
+	}
+}
+
+const tabLinkElements = ref()
+
+function startAnimation() {
+	const el = tabLinkElements.value[activeIndex.value].$el
+
+	if (!el || !el.offsetParent) return
+
+	const newValues = {
+		left: el.offsetLeft,
+		top: el.offsetTop,
+		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
+	}
+
+	if (sliderLeft.value === 4 && sliderRight.value === 4) {
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+	} else {
+		const delay = 200
+
+		if (newValues.left < sliderLeft.value) {
+			sliderLeft.value = newValues.left
+			setTimeout(() => {
+				sliderRight.value = newValues.right
+			}, delay)
+		} else {
+			sliderRight.value = newValues.right
+			setTimeout(() => {
+				sliderLeft.value = newValues.left
+			}, delay)
+		}
+
+		if (newValues.top < sliderTop.value) {
+			sliderTop.value = newValues.top
+			setTimeout(() => {
+				sliderBottom.value = newValues.bottom
+			}, delay)
+		} else {
+			sliderBottom.value = newValues.bottom
+			setTimeout(() => {
+				sliderTop.value = newValues.top
+			}, delay)
+		}
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('resize', pickLink)
+	pickLink()
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', pickLink)
+})
+
+watch(route, () => {
+	pickLink()
+})
+</script>
+<style scoped>
+.navtabs-transition {
+	/* Delay on opacity is to hide any jankiness as the page loads */
+	transition:
+		all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+}
+</style>

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

@@ -1,310 +1,75 @@
 <script setup>
 import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
+import { Avatar, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+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 { instanceKeys } from '@/pages/instance/query-options'
-
-const ITEM_SIZE = 52
-const APPROX_USED_VERTICAL_SPACE = 513 // doesn't need to be exact lol just close enough so there's a little gap and no overflow
-const STORAGE_KEY = 'modrinth-quick-instance-count'
+import { profile_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/profile'
 
 const { handleError } = injectNotificationManager()
-const queryClient = useQueryClient()
-
-const { formatMessage } = useVIntl()
-
-const maxAuto = ref(0)
-const allInstances = ref([])
-const dragging = ref(false)
-
-const stored = localStorage.getItem(STORAGE_KEY)
-const userLimit = ref(stored === null ? null : Number(stored))
-
-const maxVisible = computed(() => Math.min(maxAuto.value, allInstances.value.length))
-const visibleCount = computed(() => Math.min(userLimit.value ?? maxVisible.value, maxVisible.value))
-const recentInstances = computed(() => allInstances.value.slice(0, visibleCount.value))
-const canDrag = computed(() => maxVisible.value > 0)
-const showOverdrag = ref(false)
-
-const updateMaxAuto = () => {
-	maxAuto.value = Math.max(
-		0,
-		Math.floor((window.innerHeight - APPROX_USED_VERTICAL_SPACE) / ITEM_SIZE),
-	)
-}
-
-const setLimit = (count) => {
-	const clamped = Math.max(0, Math.min(count, maxVisible.value))
-	if (clamped >= maxVisible.value) {
-		userLimit.value = null
-		localStorage.removeItem(STORAGE_KEY)
-	} else {
-		userLimit.value = clamped
-		localStorage.setItem(STORAGE_KEY, String(clamped))
-	}
-}
-
-let dragStartY = 0
-let dragStartCount = 0
-let wasOverdragging = false
-let overdragTimeout = null
-
-const clearOverdragFlash = () => {
-	showOverdrag.value = false
-	if (overdragTimeout !== null) {
-		clearTimeout(overdragTimeout)
-		overdragTimeout = null
-	}
-}
-
-const flashOverdrag = () => {
-	showOverdrag.value = true
-	if (overdragTimeout !== null) {
-		clearTimeout(overdragTimeout)
-	}
-	overdragTimeout = setTimeout(() => {
-		showOverdrag.value = false
-		overdragTimeout = null
-	}, 500)
-}
-
-const onDividerPointerDown = (event) => {
-	if (!canDrag.value) {
-		return
-	}
-	event.preventDefault()
-	dragging.value = true
-	wasOverdragging = false
-	clearOverdragFlash()
-	dragStartY = event.clientY
-	dragStartCount = visibleCount.value
-	document.body.classList.add('quick-instance-dragging')
-	event.currentTarget.setPointerCapture(event.pointerId)
-}
-
-const onDividerPointerMove = (event) => {
-	if (!dragging.value) {
-		return
-	}
-	const delta = event.clientY - dragStartY
-	const target = dragStartCount + Math.round(delta / ITEM_SIZE)
-	const isOverdragging = target < 0 || target > maxAuto.value
-	if (isOverdragging && !wasOverdragging) {
-		flashOverdrag()
-	}
-	wasOverdragging = isOverdragging
-	setLimit(target)
-}
-
-const endDrag = (event) => {
-	if (!dragging.value) {
-		return
-	}
-	dragging.value = false
-	wasOverdragging = false
-	clearOverdragFlash()
-	document.body.classList.remove('quick-instance-dragging')
-	if (event?.currentTarget?.hasPointerCapture?.(event.pointerId)) {
-		event.currentTarget.releasePointerCapture(event.pointerId)
-	}
-}
-
-const onDividerPointerUp = (event) => {
-	endDrag(event)
-}
 
+const recentInstances = ref([])
 const getInstances = async () => {
-	const instances = await list().catch(handleError)
+	const profiles = await list().catch(handleError)
 
-	for (const instance of instances) {
-		queryClient.setQueryData(instanceKeys.detail(instance.id), instance)
-	}
+	recentInstances.value = profiles
+		.sort((a, b) => {
+			const dateACreated = dayjs(a.created)
+			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
 
-	allInstances.value = instances.sort((a, b) => {
-		const dateACreated = dayjs(a.created)
-		const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
+			const dateBCreated = dayjs(b.created)
+			const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
 
-		const dateBCreated = dayjs(b.created)
-		const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
+			const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
+			const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
 
-		const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
-		const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
+			if (dateA.isSame(dateB)) {
+				return a.name.localeCompare(b.name)
+			}
 
-		if (dateA.isSame(dateB)) {
-			return a.name.localeCompare(b.name)
-		}
-
-		return dateB - dateA
-	})
+			return dateB - dateA
+		})
+		.slice(0, 3)
 }
 
 await getInstances()
-updateMaxAuto()
 
-const unlistenInstance = await instance_listener(async (event) => {
+const unlistenProfile = await profile_listener(async (event) => {
 	if (event.event !== 'synced') {
 		await getInstances()
 	}
 })
 
-onMounted(() => {
-	window.addEventListener('resize', updateMaxAuto)
-})
-
 onUnmounted(() => {
-	window.removeEventListener('resize', updateMaxAuto)
-	document.body.classList.remove('quick-instance-dragging')
-	clearOverdragFlash()
-	unlistenInstance()
-})
-
-const messages = defineMessages({
-	dragTooltip: {
-		id: 'app.quick-instance-switcher.drag-tooltip',
-		defaultMessage: 'Drag to resize',
-	},
-	dragShowTooltip: {
-		id: 'app.quick-instance-switcher.drag-show-tooltip',
-		defaultMessage: 'Drag to show recent instances',
-	},
-})
-
-const dividerTooltip = computed(() => {
-	if (!canDrag.value || dragging.value) {
-		return null
-	}
-	return formatMessage(visibleCount.value === 0 ? messages.dragShowTooltip : messages.dragTooltip)
+	unlistenProfile()
 })
 </script>
 
 <template>
-	<Transition name="top-divider">
-		<div
-			v-if="recentInstances.length > 0"
-			class="top-divider flex items-center justify-center overflow-hidden"
-		>
-			<div class="h-px w-8 bg-surface-5 shrink-0"></div>
-		</div>
-	</Transition>
-	<TransitionGroup name="quick-instance" tag="div" class="flex flex-col items-center">
-		<div
-			v-for="instance in recentInstances"
-			:key="instance.id"
-			v-tooltip.right="instance.name"
-			class="quick-instance-item"
-		>
-			<NavButton :to="`/instance/${encodeURIComponent(instance.id)}`" class="relative">
-				<Avatar
-					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-					size="28px"
-					:tint-by="instance.id"
-					:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-				/>
-				<div
-					v-if="instance.install_stage !== 'installed'"
-					class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
-				>
-					<SpinnerIcon class="animate-spin w-4 h-4" />
-				</div>
-			</NavButton>
-		</div>
-	</TransitionGroup>
-	<div
-		v-tooltip.right="dividerTooltip"
-		class="flex items-center justify-center py-2 select-none"
-		:class="canDrag ? 'cursor-ns-resize touch-none group' : ''"
-		@pointerdown="onDividerPointerDown"
-		@pointermove="onDividerPointerMove"
-		@pointerup="onDividerPointerUp"
-		@pointercancel="onDividerPointerUp"
+	<NavButton
+		v-for="instance in recentInstances"
+		:key="instance.id"
+		v-tooltip.right="instance.name"
+		:to="`/instance/${encodeURIComponent(instance.path)}`"
+		class="relative"
 	>
+		<Avatar
+			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+			size="28px"
+			:tint-by="instance.path"
+			:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+		/>
 		<div
-			class="h-px w-8 transition-colors duration-200"
-			:class="
-				showOverdrag ? 'bg-red' : canDrag ? 'bg-surface-5 group-hover:bg-secondary' : 'bg-surface-5'
-			"
-		></div>
-	</div>
+			v-if="instance.install_stage !== 'installed'"
+			class="absolute inset-0 flex items-center justify-center z-10"
+		>
+			<SpinnerIcon class="animate-spin w-4 h-4" />
+		</div>
+	</NavButton>
+	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
 </template>
 
-<style scoped lang="scss">
-.top-divider {
-	height: calc(1rem + 1px);
-}
-
-.top-divider-enter-active,
-.top-divider-leave-active {
-	transition:
-		opacity 0.25s ease,
-		height 0.25s ease;
-}
-
-.top-divider-enter-from,
-.top-divider-leave-to {
-	opacity: 0;
-	height: 0;
-}
-
-.quick-instance-item {
-	height: 3rem;
-	overflow: hidden;
-
-	& + & {
-		margin-top: 0.25rem;
-	}
-}
-
-.quick-instance-enter-active,
-.quick-instance-leave-active {
-	transition:
-		opacity 0.25s ease,
-		transform 0.25s ease,
-		height 0.25s ease,
-		margin-top 0.25s ease;
-}
-
-.quick-instance-enter-from,
-.quick-instance-leave-to {
-	opacity: 0;
-	transform: scale(0.5);
-	height: 0;
-	margin-top: 0 !important;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.top-divider-enter-active,
-	.top-divider-leave-active,
-	.quick-instance-enter-active,
-	.quick-instance-leave-active {
-		transition: none;
-	}
-
-	.top-divider-enter-from,
-	.top-divider-leave-to {
-		opacity: 1;
-		height: calc(1rem + 1px);
-	}
-
-	.quick-instance-enter-from,
-	.quick-instance-leave-to {
-		opacity: 1;
-		transform: none;
-		height: 3rem;
-		margin-top: unset !important;
-	}
-}
-</style>
-
-<style lang="scss">
-body.quick-instance-dragging,
-body.quick-instance-dragging * {
-	cursor: ns-resize !important;
-}
-</style>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,474 @@
+<template>
+	<div class="action-groups">
+		<ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
+			<button ref="infoButton" @click="toggleCard()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<div v-if="offline" class="status">
+			<UnplugIcon />
+			<div class="running-text">
+				<span> Offline </span>
+			</div>
+		</div>
+		<div v-if="selectedProcess" class="status">
+			<span class="circle running" />
+			<div ref="profileButton" class="running-text">
+				<router-link
+					class="text-primary"
+					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+				>
+					{{ selectedProcess.profile.name }}
+				</router-link>
+				<div
+					v-if="currentProcesses.length > 1"
+					class="arrow button-base"
+					:class="{ rotate: showProfiles }"
+					@click="toggleProfiles()"
+				>
+					<DropdownIcon />
+				</div>
+			</div>
+			<Button
+				v-tooltip="'Stop instance'"
+				icon-only
+				class="icon-button stop"
+				@click="stop(selectedProcess)"
+			>
+				<StopCircleIcon />
+			</Button>
+			<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+				<TerminalSquareIcon />
+			</Button>
+		</div>
+		<div v-else class="status">
+			<span class="circle stopped" />
+			<span class="running-text"> No instances running </span>
+		</div>
+	</div>
+	<transition name="download">
+		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+			<div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+				<h3 class="info-title">
+					{{ loadingBar.title }}
+				</h3>
+				<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+				<div class="row">
+					{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
+					{{ loadingBar.message }}
+				</div>
+			</div>
+		</Card>
+	</transition>
+	<transition name="download">
+		<Card
+			v-if="showProfiles === true && currentProcesses.length > 0"
+			ref="profiles"
+			class="profile-card"
+		>
+			<Button
+				v-for="process in currentProcesses"
+				:key="process.uuid"
+				class="profile-button"
+				@click="selectProcess(process)"
+			>
+				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
+				<Button
+					v-tooltip="'Stop instance'"
+					icon-only
+					class="icon-button stop"
+					@click.stop="stop(process)"
+				>
+					<StopCircleIcon />
+				</Button>
+				<Button
+					v-tooltip="'View logs'"
+					icon-only
+					class="icon-button"
+					@click.stop="goToTerminal(process.profile.path)"
+				>
+					<TerminalSquareIcon />
+				</Button>
+			</Button>
+		</Card>
+	</transition>
+</template>
+
+<script setup>
+import {
+	DownloadIcon,
+	DropdownIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
+} from '@modrinth/assets'
+import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many } from '@/helpers/profile.js'
+import { progress_bars_list } from '@/helpers/state.js'
+
+const { handleError } = injectNotificationManager()
+
+const router = useRouter()
+const card = ref(null)
+const profiles = ref(null)
+const infoButton = ref(null)
+const profileButton = ref(null)
+const showCard = ref(false)
+
+const showProfiles = ref(false)
+
+const currentProcesses = ref([])
+const selectedProcess = ref()
+
+const refresh = async () => {
+	const processes = await getRunningProcesses().catch(handleError)
+	const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+
+	currentProcesses.value = processes.map((x) => ({
+		profile: profiles.find((prof) => x.profile_path === prof.path),
+		...x,
+	}))
+	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+		selectedProcess.value = currentProcesses.value[0]
+	}
+}
+
+await refresh()
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+	offline.value = true
+})
+window.addEventListener('online', () => {
+	offline.value = false
+})
+
+const unlistenProcess = await process_listener(async () => {
+	await refresh()
+})
+
+const stop = async (process) => {
+	try {
+		await killProcess(process.uuid).catch(handleError)
+
+		trackEvent('InstanceStop', {
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
+			source: 'AppBar',
+		})
+	} catch (e) {
+		console.error(e)
+	}
+	await refresh()
+}
+
+const goToTerminal = (path) => {
+	router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
+}
+
+const currentLoadingBars = ref([])
+
+const refreshInfo = async () => {
+	const currentLoadingBarCount = currentLoadingBars.value.length
+	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError))
+		.map((x) => {
+			if (x.bar_type.type === 'java_download') {
+				x.title = 'Downloading Java ' + x.bar_type.version
+			}
+			if (x.bar_type.profile_path) {
+				x.title = x.bar_type.profile_path
+			}
+			if (x.bar_type.pack_name) {
+				x.title = x.bar_type.pack_name
+			}
+
+			return x
+		})
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+
+	currentLoadingBars.value.sort((a, b) => {
+		if (a.loading_bar_uuid < b.loading_bar_uuid) {
+			return -1
+		}
+		if (a.loading_bar_uuid > b.loading_bar_uuid) {
+			return 1
+		}
+		return 0
+	})
+
+	if (currentLoadingBars.value.length === 0) {
+		showCard.value = false
+	} else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+		showCard.value = true
+	}
+}
+
+await refreshInfo()
+const unlistenLoading = await loading_listener(async () => {
+	await refreshInfo()
+})
+
+const selectProcess = (process) => {
+	selectedProcess.value = process
+	showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		infoButton.value &&
+		!infoButton.value.contains(event.target)
+	) {
+		showCard.value = false
+	}
+}
+
+const handleClickOutsideProfile = (event) => {
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		profiles.value &&
+		profiles.value.$el !== event.target &&
+		!elements.includes(profiles.value.$el) &&
+		!profileButton.value.contains(event.target)
+	) {
+		showProfiles.value = false
+	}
+}
+
+const toggleCard = async () => {
+	showCard.value = !showCard.value
+	showProfiles.value = false
+	await refreshInfo()
+}
+
+const toggleProfiles = async () => {
+	if (currentProcesses.value.length === 1) return
+	showProfiles.value = !showProfiles.value
+	showCard.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('click', handleClickOutsideCard)
+	window.addEventListener('click', handleClickOutsideProfile)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('click', handleClickOutsideCard)
+	window.removeEventListener('click', handleClickOutsideProfile)
+	unlistenProcess()
+	unlistenLoading()
+})
+</script>
+
+<style scoped lang="scss">
+.action-groups {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-md);
+}
+
+.arrow {
+	transition: transform 0.2s ease-in-out;
+	display: flex;
+	align-items: center;
+	&.rotate {
+		transform: rotate(180deg);
+	}
+}
+
+.status {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	border-radius: var(--radius-md);
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-sm) var(--gap-lg);
+}
+
+.running-text {
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-xs);
+	white-space: nowrap;
+	overflow: hidden;
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none;
+
+	&.clickable:hover {
+		cursor: pointer;
+	}
+}
+
+.circle {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 0.25rem;
+
+	&.running {
+		background-color: var(--color-brand);
+	}
+
+	&.stopped {
+		background-color: var(--color-base);
+	}
+}
+
+.icon-button {
+	background-color: rgba(0, 0, 0, 0);
+	box-shadow: none;
+	width: 1.25rem !important;
+	height: 1.25rem !important;
+
+	svg {
+		min-width: 1.25rem;
+	}
+
+	&.stop {
+		color: var(--color-red);
+	}
+}
+
+.info-card {
+	position: absolute;
+	top: 3.5rem;
+	right: 0.5rem;
+	z-index: 9;
+	width: 20rem;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);
+
+	&.hidden {
+		transform: translateY(-100%);
+	}
+}
+
+.loading-option {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+
+	:hover {
+		background-color: var(--color-raised-bg-hover);
+	}
+}
+
+.loading-text {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+	}
+}
+
+.loading-icon {
+	width: 2.25rem;
+	height: 2.25rem;
+	display: block;
+
+	:deep(svg) {
+		left: 1rem;
+		width: 2.25rem;
+		height: 2.25rem;
+	}
+}
+
+.download-enter-active,
+.download-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.download-enter-from,
+.download-leave-to {
+	opacity: 0;
+}
+
+.progress-bar {
+	width: 100%;
+}
+
+.info-text {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+}
+
+.info-title {
+	margin: 0;
+}
+
+.profile-button {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	width: 100%;
+	background-color: var(--color-raised-bg);
+	box-shadow: none;
+
+	.text {
+		margin-right: auto;
+	}
+}
+
+.profile-card {
+	position: absolute;
+	top: 3.5rem;
+	right: 0.5rem;
+	z-index: 9;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-md);
+
+	&.hidden {
+		transform: translateY(-100%);
+	}
+}
+
+.link {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	margin: 0;
+	color: var(--color-text);
+	text-decoration: none;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+	<ProjectCard
+		:title="project.title"
+		:link="
+			() => {
+				emit('open')
+				$router.push({
+					path: `/project/${project.project_id ?? project.id}`,
+					query: { i: props.instance ? props.instance.path : undefined },
+				})
+			}
+		"
+		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
+		:icon-url="project.icon_url"
+		:summary="project.description"
+		:tags="project.display_categories"
+		:all-tags="project.categories"
+		:downloads="project.downloads"
+		:followers="project.follows"
+		:date-updated="project.date_modified"
+		:banner="project.featured_gallery ?? undefined"
+		:color="project.color ?? undefined"
+		:environment="
+			projectType
+				? ['mod', 'modpack'].includes(projectType)
+					? {
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}
+					: undefined
+				: undefined
+		"
+		layout="list"
+	>
+		<template #actions>
+			<ButtonStyled color="brand" type="outlined">
+				<button
+					:disabled="installed || installing"
+					class="shrink-0 no-wrap"
+					@click.stop="install()"
+				>
+					<template v-if="!installed">
+						<DownloadIcon v-if="modpack || instance" />
+						<PlusIcon v-else />
+					</template>
+					<CheckIcon v-else />
+					{{
+						installing
+							? 'Installing'
+							: installed
+								? 'Installed'
+								: modpack || instance
+									? 'Install'
+									: 'Add to an instance'
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</ProjectCard>
+</template>
+
+<script setup>
+import { CheckIcon, DownloadIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { install as installVersion } from '@/store/install.js'
+dayjs.extend(relativeTime)
+
+const { handleError } = injectNotificationManager()
+
+const router = useRouter()
+
+const props = defineProps({
+	backgroundImage: {
+		type: String,
+		default: null,
+	},
+	project: {
+		type: Object,
+		required: true,
+	},
+	instance: {
+		type: Object,
+		default: null,
+	},
+	featured: {
+		type: Boolean,
+		default: false,
+	},
+	installed: {
+		type: Boolean,
+		default: false,
+	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
+})
+
+const emit = defineEmits(['open', 'install'])
+
+const installing = ref(false)
+
+async function install() {
+	installing.value = true
+	await installVersion(
+		props.project.project_id ?? props.project.id,
+		null,
+		props.instance ? props.instance.path : null,
+		'SearchCard',
+		() => {
+			installing.value = false
+			emit('install', props.project.project_id ?? props.project.id)
+		},
+		(profile) => {
+			router.push(`/instance/${profile}`)
+		},
+	).catch(handleError)
+}
+
+const modpack = computed(() => props.project.project_type === 'modpack')
+</script>

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

@@ -1,245 +0,0 @@
-<script setup lang="ts">
-import { NotepadTextIcon, XIcon } from '@modrinth/assets'
-import { Button, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { type } from '@tauri-apps/plugin-os'
-import { $fetch } from 'ofetch'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
-import { list } from '@/helpers/instance'
-import { get as getCreds } from '@/helpers/mr_auth.ts'
-
-let adsWindowHold = false
-
-type Survey = {
-	id: string
-	tally_id: string
-	type: string
-	condition?: string
-	assigned_users?: string[]
-	dismissed_users?: string[]
-}
-
-type TallyApi = {
-	openPopup: (formId: string, options: object) => void
-}
-
-const tallyWindow = window as Window & { Tally?: TallyApi }
-
-const { formatMessage } = useVIntl()
-const { handleError } = injectNotificationManager()
-
-const availableSurvey = ref<Survey | null>(null)
-
-const messages = defineMessages({
-	surveyTitle: {
-		id: 'app.survey.title',
-		defaultMessage: 'Hey there Modrinth user!',
-	},
-	surveyBody: {
-		id: 'app.survey.body',
-		defaultMessage:
-			'Would you mind answering a few questions about your experience with Modrinth App?',
-	},
-	surveyFooter: {
-		id: 'app.survey.footer',
-		defaultMessage:
-			'This feedback will go directly to the Modrinth team and help guide future updates!',
-	},
-	takeSurvey: {
-		id: 'app.survey.take-survey',
-		defaultMessage: 'Take survey',
-	},
-	surveyNoThanks: {
-		id: 'app.survey.no-thanks',
-		defaultMessage: 'No thanks',
-	},
-})
-
-function cleanupOldSurveyDisplayData() {
-	const threeWeeksAgo = new Date()
-	threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21)
-
-	for (let i = 0; i < localStorage.length; i++) {
-		const key = localStorage.key(i)
-
-		if (key?.startsWith('survey-') && key.endsWith('-display')) {
-			const dateValue = new Date(localStorage.getItem(key) ?? '')
-			if (dateValue < threeWeeksAgo) {
-				localStorage.removeItem(key)
-			}
-		}
-	}
-}
-
-async function openSurvey() {
-	if (!availableSurvey.value) {
-		console.error('No survey to open')
-		return
-	}
-
-	const creds = await getCreds().catch(handleError)
-	const userId = creds?.user_id
-
-	const formId = availableSurvey.value.tally_id
-
-	const popupOptions = {
-		layout: 'modal',
-		width: 700,
-		autoClose: 2000,
-		hideTitle: true,
-		hiddenFields: {
-			user_id: userId,
-		},
-		onOpen: () => console.info('Opened user survey'),
-		onClose: () => {
-			console.info('Closed user survey')
-			if (adsWindowHold) {
-				adsWindowHold = false
-				release_ads_window_hold()
-			}
-		},
-		onSubmit: () => console.info('Active user survey submitted'),
-	}
-
-	try {
-		await take_ads_window_hold()
-		adsWindowHold = true
-		if (tallyWindow.Tally?.openPopup) {
-			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
-			dismissSurvey()
-			tallyWindow.Tally.openPopup(formId, popupOptions)
-		} else {
-			console.warn('Tally script not yet loaded')
-			adsWindowHold = false
-			await release_ads_window_hold()
-		}
-	} catch (e) {
-		console.error('Error opening Tally popup:', e)
-		if (adsWindowHold) {
-			adsWindowHold = false
-			await release_ads_window_hold()
-		}
-	}
-
-	console.info(`Found user survey to show with tally_id: ${formId}`)
-}
-
-onUnmounted(() => {
-	if (adsWindowHold) {
-		adsWindowHold = false
-		release_ads_window_hold()
-	}
-})
-
-function dismissSurvey() {
-	if (!availableSurvey.value) return
-	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, String(new Date()))
-	availableSurvey.value = null
-}
-
-async function processPendingSurveys() {
-	function isWithinLastTwoWeeks(date: string | Date | null | undefined) {
-		if (!date) return false
-		const twoWeeksAgo = new Date()
-		twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
-		return new Date(date) >= twoWeeksAgo
-	}
-
-	cleanupOldSurveyDisplayData()
-
-	const creds = await getCreds().catch(handleError)
-	const userId = creds?.user_id
-
-	const instances = (await list().catch(handleError)) ?? []
-	const isActivePlayer = instances.some(
-		(instance) =>
-			isWithinLastTwoWeeks(instance.last_played) && !isWithinLastTwoWeeks(instance.created),
-	)
-
-	let surveys: Survey[] = []
-	try {
-		surveys = await $fetch('https://api.modrinth.com/v2/surveys')
-	} catch (e) {
-		console.error('Error fetching surveys:', e)
-	}
-
-	const surveyToShow = surveys.find(
-		(survey) =>
-			!!(
-				localStorage.getItem(`survey-${survey.id}-display`) === null &&
-				survey.type === 'tally_app' &&
-				((survey.condition === 'active_player' && isActivePlayer) ||
-					(!!userId &&
-						survey.assigned_users?.includes(userId) &&
-						!survey.dismissed_users?.includes(userId)))
-			),
-	)
-
-	if (surveyToShow) {
-		availableSurvey.value = surveyToShow
-	} else {
-		console.info('No user survey to show')
-	}
-}
-
-onMounted(async () => {
-	const osType = await type()
-	if (osType === 'windows') {
-		await processPendingSurveys()
-	} else {
-		console.info('Skipping user surveys on non-Windows platforms')
-	}
-})
-</script>
-
-<template>
-	<transition name="popup-survey">
-		<div
-			v-if="availableSurvey"
-			class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
-		>
-			<h2 class="text-lg font-extrabold mt-0 mb-2">
-				{{ formatMessage(messages.surveyTitle) }}
-			</h2>
-			<p class="m-0 leading-tight">
-				{{ formatMessage(messages.surveyBody) }}
-			</p>
-			<p class="mt-3 mb-4 leading-tight">
-				{{ formatMessage(messages.surveyFooter) }}
-			</p>
-			<div class="flex gap-2">
-				<Button type="colored" color="brand" @click="openSurvey">
-					<NotepadTextIcon />
-					{{ formatMessage(messages.takeSurvey) }}
-				</Button>
-				<Button @click="dismissSurvey">
-					<XIcon />
-					{{ formatMessage(messages.surveyNoThanks) }}
-				</Button>
-			</div>
-		</div>
-	</transition>
-</template>
-
-<style scoped>
-.popup-survey-enter-active {
-	transition:
-		opacity 0.25s ease,
-		transform 0.25s cubic-bezier(0.51, 1.08, 0.35, 1.15);
-	transform-origin: top center;
-}
-
-.popup-survey-leave-active {
-	transition:
-		opacity 0.25s ease,
-		transform 0.25s cubic-bezier(0.68, -0.17, 0.23, 0.11);
-	transform-origin: top center;
-}
-
-.popup-survey-enter-from,
-.popup-survey-leave-to {
-	opacity: 0;
-	transform: translateY(10rem) scale(0.8) scaleY(1.6);
-}
-</style>

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

@@ -1,32 +1,38 @@
 <script setup>
-import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get_project_v3, get_version } from '@/helpers/cache.js'
-import { injectContentInstall } from '@/providers/content-install'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_project, get_version } from '@/helpers/cache.js'
+import { get_categories } from '@/helpers/tags.js'
+import { install as installVersion } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
-const { install: installVersion } = injectContentInstall()
 
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
+const categories = ref(null)
+const installing = ref(false)
 
 defineExpose({
 	async show(event) {
 		if (event.event === 'InstallVersion') {
 			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project_v3(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
 			version.value = await get_version(
 				project.value.versions[project.value.versions.length - 1],
 				'must_revalidate',
 			).catch(handleError)
 		}
+		categories.value = (await get_categories().catch(handleError)).filter(
+			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+		)
 		confirmModal.value.show()
 	},
 })
@@ -45,22 +51,13 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
 		<div class="modal-body">
-			<ProjectCard
-				:title="project.name"
-				:link="() => confirmModal.hide()"
-				:icon-url="project.icon_url"
-				:summary="project.summary"
-				:tags="project.display_categories"
-				:all-tags="project.categories"
-				:downloads="project.downloads"
-				:followers="project.follows"
-				:date-updated="project.date_modified"
-				:banner="project.featured_gallery ?? undefined"
-				:color="project.color ?? undefined"
-				layout="list"
+			<SearchCard
+				:project="project"
 				class="project-card"
+				:categories="categories"
+				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
@@ -69,7 +66,7 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<Button type="colored" color="brand" @click="install">Install</Button>
+					<Button :loading="installing" color="primary" @click="install">Install</Button>
 				</div>
 			</div>
 		</div>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { getVersion } from '@tauri-apps/api/app'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const dismissed = ref(false)
+const availableUpdate = ref<{ version: string } | null>(null)
+
+let checkInterval: ReturnType<typeof setInterval> | null = null
+
+async function checkForUpdate() {
+	try {
+		const [response, currentVersion] = await Promise.all([
+			fetch('https://launcher-files.modrinth.com/updates.json'),
+			getVersion(),
+		])
+		const updates = await response.json()
+		const latestVersion = updates?.version
+
+		if (latestVersion && latestVersion !== currentVersion) {
+			if (latestVersion !== availableUpdate.value?.version) {
+				availableUpdate.value = { version: latestVersion }
+				dismissed.value = false
+			}
+		}
+	} catch (e) {
+		console.error('Failed to check for updates:', e)
+	}
+}
+
+function dismiss() {
+	dismissed.value = true
+}
+
+onMounted(() => {
+	checkForUpdate()
+	checkInterval = setInterval(checkForUpdate, 5 * 60 * 1000)
+})
+
+onUnmounted(() => {
+	if (checkInterval) {
+		clearInterval(checkInterval)
+	}
+})
+
+const messages = defineMessages({
+	title: {
+		id: 'app.update-toast.title',
+		defaultMessage: 'Update available',
+	},
+	body: {
+		id: 'app.update-toast.body.linux',
+		defaultMessage:
+			'Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!',
+	},
+	download: {
+		id: 'app.update-toast.download-page',
+		defaultMessage: 'Download',
+	},
+})
+</script>
+<template>
+	<div
+		v-if="availableUpdate && !dismissed"
+		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
+	>
+		<div class="flex min-w-[25rem] gap-4">
+			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
+				{{ formatMessage(messages.title) }}
+			</h2>
+			<ButtonStyled size="small" circular>
+				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="dismiss">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+		<p class="text-sm mt-2 mb-0">
+			{{ formatMessage(messages.body, { version: availableUpdate.version }) }}
+		</p>
+	</div>
+</template>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, defineMessages, ProgressBar, useVIntl } from '@modrinth/ui'
+import { formatBytes } from '@modrinth/utils'
+import { ref } from 'vue'
+
+import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
+
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	(e: 'close' | 'restart' | 'download'): void
+}>()
+
+defineProps<{
+	version: string
+	size: number | null
+	metered: boolean
+}>()
+
+const downloading = ref(false)
+const { progress } = injectAppUpdateDownloadProgress()
+
+function download() {
+	emit('download')
+	downloading.value = true
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'app.update-toast.title',
+		defaultMessage: 'Update available',
+	},
+	body: {
+		id: 'app.update-toast.body',
+		defaultMessage:
+			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
+	},
+	reload: {
+		id: 'app.update-toast.reload',
+		defaultMessage: 'Reload',
+	},
+	download: {
+		id: 'app.update-toast.download',
+		defaultMessage: 'Download ({size})',
+	},
+	downloading: {
+		id: 'app.update-toast.downloading',
+		defaultMessage: 'Downloading...',
+	},
+	changelog: {
+		id: 'app.update-toast.changelog',
+		defaultMessage: 'Changelog',
+	},
+	meteredBody: {
+		id: 'app.update-toast.body.metered',
+		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
+	},
+	downloadCompleteTitle: {
+		id: 'app.update-toast.title.download-complete',
+		defaultMessage: 'Download complete',
+	},
+	downloadedBody: {
+		id: 'app.update-toast.body.download-complete',
+		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
+	},
+})
+</script>
+<template>
+	<div
+		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
+		:class="{
+			'download-complete': progress === 1,
+		}"
+	>
+		<div class="flex min-w-[25rem] gap-4">
+			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
+				{{
+					formatMessage(metered && progress === 1 ? messages.downloadCompleteTitle : messages.title)
+				}}
+			</h2>
+			<ButtonStyled size="small" circular>
+				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="emit('close')">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+		<p class="text-sm mt-2 mb-0">
+			{{
+				formatMessage(
+					metered
+						? progress === 1
+							? messages.downloadedBody
+							: messages.meteredBody
+						: messages.body,
+					{ version },
+				)
+			}}
+		</p>
+		<p
+			v-if="metered && progress < 1"
+			class="text-sm text-secondary mt-2 mb-0 flex items-center gap-1"
+		>
+			<template v-if="progress > 0">
+				<ProgressBar :progress="progress" class="max-w-[unset]" />
+			</template>
+		</p>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button v-if="metered && progress < 1" :disabled="downloading" @click="download">
+					<SpinnerIcon v-if="downloading" class="animate-spin" />
+					<DownloadIcon v-else />
+					{{
+						formatMessage(downloading ? messages.downloading : messages.download, {
+							size: formatBytes(size ?? 0),
+						})
+					}}
+				</button>
+				<button v-else @click="emit('restart')">
+					<RefreshCwIcon /> {{ formatMessage(messages.reload) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<a href="https://modrinth.com/news/changelog?filter=app">
+					{{ formatMessage(messages.changelog) }} <ExternalIcon />
+				</a>
+			</ButtonStyled>
+		</div>
+	</div>
+</template>

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

@@ -1,96 +0,0 @@
-<template>
-	<section
-		v-if="showControls"
-		class="flex items-center gap-2 mr-1.5"
-		data-tauri-drag-region-exclude
-	>
-		<IconButton
-			type="quiet"
-			label="Minimize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().minimize()"
-		>
-			<MinimizeIcon />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Toggle maximize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().toggleMaximize()"
-		>
-			<RestoreIcon v-if="isMaximized" />
-			<MaximizeIcon v-else />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Close window"
-			class="relative expanded-button close-button"
-			@click="handleClose"
-		>
-			<XIcon />
-		</IconButton>
-	</section>
-</template>
-
-<script setup>
-import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-import { get as getSettings } from '@/helpers/settings.ts'
-import { getOS } from '@/helpers/utils.js'
-import { useTheming } from '@/store/state'
-
-const themeStore = useTheming()
-
-const nativeDecorations = ref(true)
-const isMaximized = ref(false)
-const os = ref('')
-
-const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls'))
-
-const showControls = computed(
-	() =>
-		alwaysShowAppControls.value ||
-		(!nativeDecorations.value && (os.value === 'Windows' || os.value === 'Linux')),
-)
-
-onMounted(async () => {
-	os.value = await getOS()
-
-	const settings = await getSettings()
-	nativeDecorations.value = settings.native_decorations
-
-	if (os.value !== 'MacOS') {
-		await getCurrentWindow().setDecorations(nativeDecorations.value)
-	}
-
-	isMaximized.value = await getCurrentWindow().isMaximized()
-
-	const unlisten = await getCurrentWindow().onResized(async () => {
-		isMaximized.value = await getCurrentWindow().isMaximized()
-	})
-
-	onUnmounted(() => {
-		unlisten()
-	})
-})
-
-const handleClose = async () => {
-	await saveWindowState(StateFlags.ALL)
-	await getCurrentWindow().close()
-}
-</script>
-<style scoped>
-.expanded-button::before {
-	inset: -9px -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,123 +0,0 @@
-<template>
-	<Button
-		v-if="showUpdatePill"
-		type="outlined"
-		native-type="button"
-		class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
-		:class="{
-			'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>
-</template>
-
-<script setup lang="ts">
-import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
-import { Button, 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,75 +1,70 @@
 <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,
-	Button,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
 	injectNotificationManager,
 	IntlFormatted,
 	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { useFriends } from '@/composables/use-friends'
-import type { FriendWithUserData } from '@/helpers/friends.ts'
+import { friend_listener } from '@/helpers/events'
+import {
+	add_friend,
+	friends,
+	type FriendWithUserData,
+	remove_friend,
+	transformFriends,
+} from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
-import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
-import { useTheming } from '@/store/state'
 
 const { formatMessage } = useVIntl()
 
 const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
-const themeStore = useTheming()
 
 const props = defineProps<{
 	credentials: ModrinthCredentials | null
 	signIn: () => void
 }>()
 
-type FriendsSectionCollapsedFlag =
-	| 'friends_active_collapsed'
-	| 'friends_online_collapsed'
-	| 'friends_offline_collapsed'
-	| 'friends_pending_collapsed'
-
-function isFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag) {
-	return themeStore.getFeatureFlag(flag)
-}
-
-function setFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag, collapsed: boolean) {
-	themeStore.featureFlags[flag] = collapsed
-	getSettings()
-		.then((settings) => {
-			settings.feature_flags[flag] = collapsed
-			return setSettings(settings)
-		})
-		.catch(handleError)
-}
-
 const userCredentials = computed(() => props.credentials)
-const {
-	friends: userFriends,
-	loading,
-	requestFriend,
-	acceptFriend,
-	removeFriend: removeFriendRecord,
-} = useFriends({
-	currentUserId: () => userCredentials.value?.user_id,
-	getCredentials: () => userCredentials.value,
-	onError: handleError,
-})
 
 const search = ref('')
 const friendInvitesModal = ref()
+
 const username = ref('')
 const addFriendModal = ref()
+async function addFriendFromModal() {
+	addFriendModal.value.hide()
+	await add_friend(username.value).catch(handleError)
+	username.value = ''
+	await loadFriends()
+}
 
+async function addFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await add_friend(id).catch(handleError)
+		await loadFriends()
+	}
+}
+
+async function removeFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await remove_friend(id).catch(handleError)
+		await loadFriends()
+	}
+}
+
+const userFriends = ref<FriendWithUserData[]>([])
 const sortedFriends = computed<FriendWithUserData[]>(() =>
 	userFriends.value.slice().sort((a, b) => {
 		if (a.last_updated === null && b.last_updated === null) {
@@ -113,22 +108,42 @@ const incomingRequests = computed(() =>
 		.sort((a, b) => b.created.diff(a.created)),
 )
 
-function addFriendFromModal() {
-	const target = username.value.trim()
-	if (!target) return
+const loading = ref(true)
+async function loadFriends(timeout = false) {
+	loading.value = timeout
 
-	addFriendModal.value.hide()
-	requestFriend({ id: target, username: target })
-	username.value = ''
+	try {
+		const friendsList = await friends()
+		userFriends.value = await transformFriends(friendsList, userCredentials.value)
+		loading.value = false
+	} catch (e) {
+		console.error('Error loading friends', e)
+		if (timeout) {
+			setTimeout(() => loadFriends(), 15 * 1000)
+		}
+	}
 }
 
-function addFriend(friend: FriendWithUserData) {
-	acceptFriend(friend)
-}
+watch(
+	userCredentials,
+	() => {
+		if (userCredentials.value === undefined) {
+			userFriends.value = []
+			loading.value = false
+		} else if (userCredentials.value === null) {
+			userFriends.value = []
+			loading.value = false
+		} else {
+			loadFriends(true)
+		}
+	},
+	{ immediate: true },
+)
 
-function removeFriend(friend: FriendWithUserData) {
-	removeFriendRecord(friend)
-}
+const unlisten = await friend_listener(() => loadFriends())
+onUnmounted(() => {
+	unlisten()
+})
 
 const messages = defineMessages({
 	addFriend: {
@@ -221,20 +236,26 @@ const messages = defineMessages({
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials?.user_id">
-							<Button type="colored" color="brand" @click="addFriend(friend)">
-								<UserPlusIcon />
-								Accept
-							</Button>
-							<Button @click="removeFriend(friend)">
-								<XIcon />
-								Ignore
-							</Button>
+							<ButtonStyled color="brand">
+								<button @click="addFriend(friend)">
+									<UserPlusIcon />
+									Accept
+								</button>
+							</ButtonStyled>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Ignore
+								</button>
+							</ButtonStyled>
 						</template>
 						<template v-else>
-							<Button @click="removeFriend(friend)">
-								<XIcon />
-								Cancel
-							</Button>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Cancel
+								</button>
+							</ButtonStyled>
 						</template>
 					</div>
 				</div>
@@ -258,66 +279,63 @@ const messages = defineMessages({
 					wrapper-class="flex-1"
 					@keyup.enter="addFriendFromModal"
 				/>
-				<Button
-					type="colored"
-					color="brand"
-					:disabled="username.length === 0"
-					@click="addFriendFromModal"
-				>
-					<SendIcon />
-					{{ formatMessage(messages.sendFriendRequest) }}
-				</Button>
+				<ButtonStyled color="brand">
+					<button :disabled="username.length === 0" @click="addFriendFromModal">
+						<SendIcon />
+						{{ formatMessage(messages.sendFriendRequest) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
 		<template v-if="sortedFriends.length > 0">
-			<IconButton
-				v-tooltip="formatMessage(messages.addFriend)"
-				type="quiet"
-				:label="formatMessage(messages.addFriend)"
-				@click="addFriendModal.show"
-			>
-				<UserPlusIcon />
-			</IconButton>
+			<ButtonStyled circular type="transparent">
+				<button
+					v-tooltip="formatMessage(messages.addFriend)"
+					:aria-label="formatMessage(messages.addFriend)"
+					@click="addFriendModal.show"
+				>
+					<UserPlusIcon />
+				</button>
+			</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>
-		<h3 v-else class="w-full text-base text-primary font-medium m-0">
+		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
-		<IconButton
-			v-if="incomingRequests.length > 0"
-			v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-			type="quiet"
-			:label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-			class="relative"
-			@click="friendInvitesModal.show"
-		>
-			<MailIcon />
-			<span
-				v-if="incomingRequests.length > 0"
-				aria-hidden="true"
-				class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
+			<button
+				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				class="relative"
+				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				@click="friendInvitesModal.show"
 			>
-				{{ incomingRequests.length }}
-			</span>
-		</IconButton>
+				<MailIcon />
+				<span
+					v-if="incomingRequests.length > 0"
+					aria-hidden="true"
+					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+				>
+					{{ incomingRequests.length }}
+				</span>
+			</button>
+		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
-		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
+		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<template v-if="loading">
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
 				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
 				<div class="flex flex-col w-full">
 					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -326,7 +344,7 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm">
+			<div class="text-sm ml-4 mr-1">
 				<div v-if="!userCredentials">
 					<IntlFormatted :message-id="messages.signInToAddFriends">
 						<template #link="{ children }">
@@ -351,42 +369,34 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="activeFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_active_collapsed')"
+				open-by-default
 				:friends="activeFriends"
 				:heading="formatMessage(messages.active)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_active_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_active_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="onlineFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_online_collapsed')"
+				open-by-default
 				:friends="onlineFriends"
 				:heading="formatMessage(messages.online)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_online_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_online_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="offlineFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_offline_collapsed')"
+				:open-by-default="activeFriends.length + onlineFriends.length < 3"
 				:friends="offlineFriends"
 				:heading="formatMessage(messages.offline)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_offline_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_offline_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_pending_collapsed')"
+				open-by-default
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_pending_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_pending_collapsed', true)"
 			/>
 			<p v-if="filteredFriends.length === 0 && search" class="text-sm text-secondary my-1 mx-4">
 				{{ formatMessage(messages.noFriendsMatch, { query: search }) }}

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

@@ -3,19 +3,18 @@ import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	Avatar,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
-	TeleportOverflowMenu,
+	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { useTemplateRef } from 'vue'
-import { useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 
 const { formatMessage } = useVIntl()
-const router = useRouter()
 
 const props = withDefaults(
 	defineProps<{
@@ -31,11 +30,6 @@ const props = withDefaults(
 	},
 )
 
-const emit = defineEmits<{
-	onOpen: []
-	onClose: []
-}>()
-
 function createContextMenuOptions(friend: FriendWithUserData) {
 	if (friend.accepted) {
 		return [
@@ -60,7 +54,7 @@ function createContextMenuOptions(friend: FriendWithUserData) {
 }
 
 function openProfile(username: string) {
-	void router.push(`/user/${encodeURIComponent(username)}`)
+	openUrl('https://modrinth.com/user/' + username)
 }
 
 const friendOptions = useTemplateRef('friendOptions')
@@ -112,13 +106,11 @@ const messages = defineMessages({
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
 		:button-class="
-			'flex w-full items-center bg-transparent border-0 p-0' +
+			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
 			(isSearching
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
 		"
-		@on-open="emit('onOpen')"
-		@on-close="emit('onClose')"
 	>
 		<template #title>
 			<h3 class="text-base text-primary font-medium m-0">
@@ -130,71 +122,68 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"
 				>
-					<RouterLink
-						:to="`/user/${encodeURIComponent(friend.username)}`"
-						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
-					>
-						<div class="relative">
-							<Avatar
-								:src="friend.avatar"
-								:class="{ grayscale: !friend.online && friend.accepted }"
-								class="w-12 h-12 rounded-full"
-								size="32px"
-								circle
-							/>
-							<span
-								v-if="friend.online"
-								aria-hidden="true"
-								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-							/>
-						</div>
-						<div class="flex flex-col">
-							<span
-								class="text-sm m-0"
-								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
-							>
-								{{ friend.username }}
-							</span>
-							<span v-if="!friend.accepted" class="m-0 text-xs">
-								{{ formatMessage(messages.friendRequestSent) }}
-							</span>
-							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-						</div>
-					</RouterLink>
-					<TeleportOverflowMenu
-						v-if="friend.accepted"
-						type="quiet"
-						label="More options"
-						class="opacity-0 group-hover:opacity-100 transition-opacity"
-						:options="[
-							{
-								id: 'remove-friend',
-								label: formatMessage(messages.removeFriend),
-								action: () => removeFriend(friend),
-								tone: 'red',
-							},
-						]"
-					>
-						<MoreVerticalIcon />
-						<template #remove-friend>
-							<TrashIcon />
-							{{ formatMessage(messages.removeFriend) }}
-						</template>
-					</TeleportOverflowMenu>
-					<IconButton
-						v-else
-						v-tooltip="formatMessage(messages.cancelRequest)"
-						type="quiet"
-						:label="formatMessage(messages.cancelRequest)"
-						@click="removeFriend(friend)"
-					>
-						<XIcon />
-					</IconButton>
+					<div class="relative">
+						<Avatar
+							:src="friend.avatar"
+							:class="{ grayscale: !friend.online && friend.accepted }"
+							class="w-12 h-12 rounded-full"
+							size="32px"
+							circle
+						/>
+						<span
+							v-if="friend.online"
+							aria-hidden="true"
+							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+						/>
+					</div>
+					<div class="flex flex-col">
+						<span
+							class="text-sm m-0"
+							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+						>
+							{{ friend.username }}
+						</span>
+						<span v-if="!friend.accepted" class="m-0 text-xs">
+							{{ formatMessage(messages.friendRequestSent) }}
+						</span>
+						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+					</div>
+					<ButtonStyled v-if="friend.accepted" circular type="transparent">
+						<OverflowMenu
+							class="opacity-0 group-hover:opacity-100 transition-opacity"
+							:options="[
+								{
+									id: 'view-profile',
+									action: () => openProfile(friend.username),
+								},
+								{
+									id: 'remove-friend',
+									action: () => removeFriend(friend),
+									color: 'red',
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #view-profile>
+								<UserIcon />
+								{{ formatMessage(messages.viewProfile) }}
+							</template>
+							<template #remove-friend>
+								<TrashIcon />
+								{{ formatMessage(messages.removeFriend) }}
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+					<ButtonStyled v-else type="transparent" circular>
+						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+							<XIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</template>

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

@@ -1,119 +0,0 @@
-<script setup>
-import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import { Admonition, Avatar, Button, 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 { instanceKeys } from '@/pages/instance/query-options'
-
-const { handleError } = injectNotificationManager()
-const queryClient = useQueryClient()
-
-const modal = ref()
-const searchFilter = ref('')
-const instances = ref([])
-
-const serverName = ref('')
-const serverAddress = ref('')
-
-const shownInstances = computed(() =>
-	instances.value.filter((instance) => {
-		return instance.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-	}),
-)
-
-defineExpose({
-	show: async (name, address) => {
-		serverName.value = name
-		serverAddress.value = address
-		searchFilter.value = ''
-
-		const instanceValues = await list().catch(handleError)
-		await Promise.allSettled(
-			instanceValues.map(async (instance) => {
-				instance.adding = false
-				instance.added = false
-
-				try {
-					const worlds = await get_instance_worlds(instance.id)
-					instance.added = worlds.some(
-						(w) => w.type === 'server' && w.address === serverAddress.value,
-					)
-				} catch {
-					// Ignore - will show as not added
-				}
-			}),
-		)
-
-		instances.value = instanceValues
-		modal.value.show()
-
-		trackEvent('AddServerToInstanceStart', { source: 'AddServerToInstanceModal' })
-	},
-})
-
-async function addServer(instance) {
-	instance.adding = true
-	try {
-		await add_server_to_instance(instance.id, serverName.value, serverAddress.value, 'prompt')
-		instance.added = true
-		await queryClient.invalidateQueries({ queryKey: instanceKeys.worlds(instance.id) })
-
-		trackEvent('AddServerToInstance', {
-			server_name: serverName.value,
-			instance_name: instance.name,
-			source: 'AddServerToInstanceModal',
-		})
-	} catch (err) {
-		handleError(err)
-	}
-	instance.adding = false
-}
-</script>
-
-<template>
-	<ModalWrapper ref="modal" header="Add server to instance">
-		<div class="flex flex-col gap-4 min-w-[350px]">
-			<Admonition type="warning" body="This server may not be compatible with all instances." />
-			<StyledInput
-				v-model="searchFilter"
-				:icon="SearchIcon"
-				type="search"
-				placeholder="Search for an instance"
-				autocomplete="off"
-			/>
-			<div class="max-h-[21rem] overflow-y-auto">
-				<div
-					v-for="instance in shownInstances"
-					:key="instance.id"
-					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)}`"
-						@click="modal.hide()"
-					>
-						<Avatar
-							:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-							class="mr-2 [--size:2rem]"
-						/>
-						{{ instance.name }}
-					</router-link>
-					<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>
-				</div>
-			</div>
-			<div class="input-group push-right">
-				<Button @click="modal.hide()">Cancel</Button>
-			</div>
-		</div>
-	</ModalWrapper>
-</template>

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

@@ -0,0 +1,170 @@
+<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>
+							<multiselect
+								v-if="versions?.length > 1"
+								v-model="selectedVersion"
+								:options="versions"
+								:searchable="true"
+								placeholder="Select version"
+								open-direction="top"
+								:show-labels="false"
+								:custom-label="
+									(version) =>
+										`${version?.name} (${version?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')} - ${version?.game_versions.join(', ')})`
+								"
+								:max-height="150"
+							/>
+							<span v-else>
+								<span>
+									{{ selectedVersion?.name }} ({{
+										selectedVersion?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')
+									}}
+									- {{ selectedVersion?.game_versions.join(', ') }})
+								</span>
+							</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<div class="button-group">
+				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+				<Button color="primary" :disabled="installing" @click="install()">
+					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup>
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { ref } from 'vue'
+import Multiselect from 'vue-multiselect'
+
+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(() => {})
+
+defineExpose({
+	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+		instance.value = instanceVal
+		versions.value = projectVersions
+		selectedVersion.value = selected ?? projectVersions[0]
+
+		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).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;
+
+	:deep(.animated-dropdown .options) {
+		max-height: 13.375rem;
+	}
+}
+</style>

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

@@ -0,0 +1,77 @@
+<script setup>
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
+
+const { handleError } = injectNotificationManager()
+
+const versionId = ref()
+const project = ref()
+const confirmModal = ref(null)
+const installing = ref(false)
+
+const onInstall = ref(() => {})
+const onCreateInstance = ref(() => {})
+
+defineExpose({
+	show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
+		project.value = projectVal
+		versionId.value = versionIdVal
+		installing.value = false
+		confirmModal.value.show()
+
+		onInstall.value = callback
+		onCreateInstance.value = createInstanceCallback
+
+		trackEvent('PackInstallStart')
+	},
+})
+
+async function install() {
+	installing.value = true
+	confirmModal.value.hide()
+
+	await pack_install(
+		project.value.id,
+		versionId.value,
+		project.value.title,
+		project.value.icon_url,
+		onCreateInstance.value,
+	).catch(handleError)
+	trackEvent('PackInstall', {
+		id: project.value.id,
+		version_id: versionId.value,
+		title: project.value.title,
+		source: 'ConfirmModal',
+	})
+
+	onInstall.value(versionId.value)
+	installing.value = false
+}
+</script>
+
+<template>
+	<ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
+		<div class="modal-body">
+			<p>You already have this modpack installed. Are you sure you want to install it again?</p>
+			<div class="input-group push-right">
+				<Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+				<Button color="primary" :disabled="installing" @click="install()"
+					><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
+				>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>

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

@@ -0,0 +1,400 @@
+<script setup>
+import {
+	CheckIcon,
+	DownloadIcon,
+	PlusIcon,
+	RightArrowIcon,
+	SearchIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import {
+	add_project_from_version as installMod,
+	check_installed,
+	create,
+	get,
+	list,
+} from '@/helpers/profile'
+import {
+	findPreferredVersion,
+	installVersionDependencies,
+	isVersionCompatible,
+} from '@/store/install.js'
+
+const { handleError } = injectNotificationManager()
+const router = useRouter()
+
+const versions = ref()
+const project = ref()
+
+const installModal = ref()
+const searchFilter = ref('')
+
+const showCreation = ref(false)
+const icon = ref(null)
+const name = ref(null)
+const display_icon = ref(null)
+const loader = ref(null)
+const gameVersion = ref(null)
+const creatingInstance = ref(false)
+
+const profiles = ref([])
+
+const shownProfiles = computed(() =>
+	profiles.value
+		.filter((profile) => {
+			return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+		})
+		.filter((profile) => {
+			const version = {
+				game_versions: versions.value.flatMap((v) => v.game_versions),
+				loaders: versions.value.flatMap((v) => v.loaders),
+			}
+			return isVersionCompatible(version, project.value, profile)
+		}),
+)
+
+const onInstall = ref(() => {})
+
+defineExpose({
+	show: async (projectVal, versionsVal, callback) => {
+		project.value = projectVal
+		versions.value = versionsVal
+		searchFilter.value = ''
+
+		showCreation.value = false
+		name.value = null
+		icon.value = null
+		display_icon.value = null
+		gameVersion.value = null
+		loader.value = null
+
+		onInstall.value = callback
+
+		const profilesVal = await list().catch(handleError)
+		for (const profile of profilesVal) {
+			profile.installing = false
+			profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+				handleError,
+			)
+		}
+		profiles.value = profilesVal
+
+		installModal.value.show()
+
+		trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
+	},
+})
+
+async function install(instance) {
+	instance.installing = true
+	const version = findPreferredVersion(versions.value, project.value, instance)
+
+	if (!version) {
+		instance.installing = false
+		handleError('No compatible version found')
+		return
+	}
+
+	await installMod(instance.path, version.id).catch(handleError)
+	await installVersionDependencies(instance, version).catch(handleError)
+
+	instance.installedMod = true
+	instance.installing = false
+
+	trackEvent('ProjectInstall', {
+		loader: instance.loader,
+		game_version: instance.game_version,
+		id: project.value.id,
+		version_id: version.id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})
+
+	onInstall.value(version.id)
+}
+
+const toggleCreation = () => {
+	showCreation.value = !showCreation.value
+	name.value = null
+	icon.value = null
+	display_icon.value = null
+	gameVersion.value = null
+	loader.value = null
+
+	if (showCreation.value) {
+		trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
+	}
+}
+
+const upload_icon = async () => {
+	const res = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg'],
+			},
+		],
+	})
+	icon.value = res.path ?? res
+
+	if (!icon.value) return
+	display_icon.value = convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+	icon.value = null
+	display_icon.value = null
+}
+
+const createInstance = async () => {
+	creatingInstance.value = true
+
+	const gameVersions = versions.value[0].game_versions
+	const gameVersion = gameVersions[0]
+
+	const loaders = versions.value[0].loaders
+	const loader = loaders.contains('fabric')
+		? 'fabric'
+		: loaders.contains('neoforge')
+			? 'neoforge'
+			: loaders.contains('forge')
+				? 'forge'
+				: loaders.contains('quilt')
+					? 'quilt'
+					: 'vanilla'
+
+	const id = await create(name.value, gameVersion, loader, 'latest', icon.value).catch(handleError)
+
+	await installMod(id, versions.value[0].id).catch(handleError)
+
+	await router.push(`/instance/${encodeURIComponent(id)}/`)
+
+	const instance = await get(id, true)
+	await installVersionDependencies(instance, versions.value[0]).catch(handleError)
+
+	trackEvent('InstanceCreate', {
+		profile_name: name.value,
+		game_version: versions.value[0].game_versions[0],
+		loader: loader,
+		loader_version: 'latest',
+		has_icon: !!icon.value,
+		source: 'ProjectInstallModal',
+	})
+
+	trackEvent('ProjectInstall', {
+		loader: loader,
+		game_version: versions.value[0].game_versions[0],
+		id: project.value,
+		version_id: versions.value[0].id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})
+
+	onInstall.value(versions.value[0].id)
+
+	if (installModal.value) installModal.value.hide()
+	creatingInstance.value = false
+}
+</script>
+
+<template>
+	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
+		<div class="modal-body">
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="search"
+				placeholder="Search for an instance"
+				autocomplete="off"
+			/>
+			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
+				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
+					<router-link
+						class="btn btn-transparent profile-button"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						@click="installModal.hide()"
+					>
+						<Avatar
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							class="profile-image"
+						/>
+						{{ profile.name }}
+					</router-link>
+					<div
+						v-tooltip="
+							profile.linked_data?.locked && !profile.installedMod
+								? 'Unpair or unlock an instance to add mods.'
+								: ''
+						"
+					>
+						<Button
+							:disabled="profile.installedMod || profile.installing"
+							@click="install(profile)"
+						>
+							<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+							<CheckIcon v-else-if="profile.installedMod" />
+							{{
+								profile.installing
+									? 'Installing...'
+									: profile.installedMod
+										? 'Installed'
+										: 'Install'
+							}}
+						</Button>
+					</div>
+				</div>
+			</div>
+			<Card v-if="showCreation" class="creation-card">
+				<div class="creation-container">
+					<div class="creation-icon">
+						<Avatar size="md" class="icon" :src="display_icon" />
+						<div class="creation-icon__description">
+							<Button @click="upload_icon()">
+								<UploadIcon />
+								<span class="no-wrap"> Select icon </span>
+							</Button>
+							<Button :disabled="!display_icon" @click="reset_icon()">
+								<XIcon />
+								<span class="no-wrap"> Remove icon </span>
+							</Button>
+						</div>
+					</div>
+					<div class="creation-settings">
+						<StyledInput
+							v-model="name"
+							autocomplete="off"
+							type="text"
+							placeholder="Name"
+							class="creation-input"
+						/>
+						<Button :disabled="creatingInstance === true || !name" @click="createInstance()">
+							<RightArrowIcon />
+							{{ creatingInstance ? 'Creating...' : 'Create' }}
+						</Button>
+					</div>
+				</div>
+			</Card>
+			<div class="input-group push-right">
+				<Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+					<PlusIcon />
+					{{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+				</Button>
+				<Button @click="installModal.hide()">Cancel</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<style scoped lang="scss">
+.creation-card {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+	background-color: var(--color-bg);
+}
+
+.creation-container {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+}
+
+.creation-icon {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	align-items: center;
+	flex-grow: 1;
+
+	.creation-icon__description {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+}
+
+.creation-input {
+	width: 100%;
+}
+
+.no-wrap {
+	white-space: nowrap;
+}
+
+.creation-dropdown {
+	width: min-content !important;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.creation-settings {
+	width: 100%;
+	margin-left: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
+}
+
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	min-width: 350px;
+}
+
+.profiles {
+	max-height: 12rem;
+	overflow-y: auto;
+
+	&.hide-creation {
+		max-height: 21rem;
+	}
+}
+
+.option {
+	width: calc(100%);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;
+
+	img {
+		margin-right: 0.5rem;
+	}
+
+	.name {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.profile-button {
+		align-content: start;
+		padding: 0.5rem;
+		text-align: left;
+	}
+}
+
+.profile-image {
+	--size: 2rem !important;
+}
+</style>

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

@@ -1,65 +0,0 @@
-<template>
-	<UnknownFileWarningModal
-		ref="modal"
-		:mode="externalFilesInModpack.length > 0 ? 'modpack' : 'mod'"
-		:file-name="fileName"
-		:external-files-in-modpack="externalFilesInModpack"
-		@cancel="reset"
-		@continue="proceed"
-	/>
-</template>
-
-<script setup lang="ts">
-import { UnknownFileWarningModal } 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 themeStore = useTheming()
-const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
-
-const modal = useTemplateRef('modal')
-const onProceed = ref<() => Promise<void>>()
-const fileName = ref('')
-const externalFilesInModpack = ref<string[]>([])
-
-function show(
-	createInstance: () => Promise<void>,
-	selectedFileName = '',
-	selectedExternalFiles: string[] = [],
-) {
-	onProceed.value = createInstance
-	fileName.value = selectedFileName
-	externalFilesInModpack.value = selectedExternalFiles
-
-	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
-		void createInstance()
-		return
-	}
-
-	modal.value?.show()
-}
-
-function reset() {
-	onProceed.value = undefined
-	fileName.value = ''
-	externalFilesInModpack.value = []
-}
-
-async function proceed(dontShowAgain: boolean) {
-	if (dontShowAgain) {
-		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
-		const settings = await getSettings()
-		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
-		await setSettings(settings)
-	}
-
-	const createInstance = onProceed.value
-	reset()
-	if (createInstance) void createInstance()
-}
-
-defineExpose({ show })
-</script>

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

@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	OverflowMenu,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, type Ref, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+
+import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const router = useRouter()
+
+const deleteConfirmModal = ref()
+
+const props = defineProps<InstanceSettingsTabProps>()
+
+const title = ref(props.instance.name)
+const icon: Ref<string | undefined> = ref(props.instance.icon_path)
+const groups = ref(props.instance.groups)
+
+const newCategoryInput = ref('')
+
+const installing = computed(() => props.instance.install_stage !== 'installed')
+
+async function duplicateProfile() {
+	await duplicate(props.instance.path).catch(handleError)
+	trackEvent('InstanceDuplicate', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})
+}
+
+const allInstances = ref((await list()) as GameInstance[])
+const availableGroups = computed(() => [
+	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
+])
+
+async function resetIcon() {
+	icon.value = undefined
+	await edit_icon(props.instance.path, null).catch(handleError)
+	trackEvent('InstanceRemoveIcon')
+}
+
+async function setIcon() {
+	const value = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+			},
+		],
+	})
+
+	if (!value) return
+
+	icon.value = value
+	await edit_icon(props.instance.path, icon.value).catch(handleError)
+
+	trackEvent('InstanceSetIcon')
+}
+
+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),
+}))
+
+const toggleGroup = (group: string) => {
+	if (groups.value.includes(group)) {
+		groups.value = groups.value.filter((x) => x !== group)
+	} else {
+		groups.value.push(group)
+	}
+}
+
+const addCategory = () => {
+	const text = newCategoryInput.value.trim()
+
+	if (text.length > 0) {
+		groups.value.push(text.substring(0, 32))
+		newCategoryInput.value = ''
+	}
+}
+
+watch(
+	[title, groups, groups],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
+)
+
+const removing = ref(false)
+async function removeProfile() {
+	removing.value = true
+	await remove(props.instance.path).catch(handleError)
+	removing.value = false
+
+	trackEvent('InstanceRemove', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})
+
+	await router.push({ path: '/' })
+}
+
+const messages = defineMessages({
+	name: {
+		id: 'instance.settings.tabs.general.name',
+		defaultMessage: 'Name',
+	},
+	libraryGroups: {
+		id: 'instance.settings.tabs.general.library-groups',
+		defaultMessage: 'Library groups',
+	},
+	libraryGroupsDescription: {
+		id: 'instance.settings.tabs.general.library-groups.description',
+		defaultMessage:
+			'Library groups allow you to organize your instances into different sections in your library.',
+	},
+	libraryGroupsEnterName: {
+		id: 'instance.settings.tabs.general.library-groups.enter-name',
+		defaultMessage: 'Enter group name',
+	},
+	libraryGroupsCreate: {
+		id: 'instance.settings.tabs.general.library-groups.create',
+		defaultMessage: 'Create new group',
+	},
+	editIcon: {
+		id: 'instance.settings.tabs.general.edit-icon',
+		defaultMessage: 'Edit icon',
+	},
+	selectIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.select',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.replace',
+		defaultMessage: 'Replace icon',
+	},
+	removeIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.remove',
+		defaultMessage: 'Remove icon',
+	},
+	duplicateInstance: {
+		id: 'instance.settings.tabs.general.duplicate-instance',
+		defaultMessage: 'Duplicate instance',
+	},
+	duplicateInstanceDescription: {
+		id: 'instance.settings.tabs.general.duplicate-instance.description',
+		defaultMessage: 'Creates a copy of this instance, including worlds, configs, mods, etc.',
+	},
+	duplicateButtonTooltipInstalling: {
+		id: 'instance.settings.tabs.general.duplicate-button.tooltip.installing',
+		defaultMessage: 'Cannot duplicate while installing.',
+	},
+	duplicateButton: {
+		id: 'instance.settings.tabs.general.duplicate-button',
+		defaultMessage: 'Duplicate',
+	},
+	deleteInstance: {
+		id: 'instance.settings.tabs.general.delete',
+		defaultMessage: 'Delete instance',
+	},
+	deleteInstanceDescription: {
+		id: 'instance.settings.tabs.general.delete.description',
+		defaultMessage:
+			'Permanently deletes an instance from your device, including your worlds, configs, and all installed content. Be careful, as once you delete a instance there is no way to recover it.',
+	},
+	deleteInstanceButton: {
+		id: 'instance.settings.tabs.general.delete.button',
+		defaultMessage: 'Delete instance',
+	},
+	deletingInstanceButton: {
+		id: 'instance.settings.tabs.general.deleting.button',
+		defaultMessage: 'Deleting...',
+	},
+})
+</script>
+
+<template>
+	<ConfirmModalWrapper
+		ref="deleteConfirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		:show-ad-on-close="false"
+		@proceed="removeProfile"
+	/>
+	<div class="block">
+		<div class="float-end ml-4 relative group">
+			<OverflowMenu
+				v-tooltip="formatMessage(messages.editIcon)"
+				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+				:options="[
+					{
+						id: 'select',
+						action: () => setIcon(),
+					},
+					{
+						id: 'remove',
+						color: 'danger',
+						action: () => resetIcon(),
+						shown: !!icon,
+					},
+				]"
+			>
+				<Avatar
+					:src="icon ? convertFileSrc(icon) : icon"
+					size="108px"
+					class="!border-4 group-hover:brightness-75"
+					:tint-by="props.instance.path"
+					no-shadow
+				/>
+				<div class="absolute top-0 right-0 m-2">
+					<div
+						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+					>
+						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+					</div>
+				</div>
+				<template #select>
+					<UploadIcon />
+					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+				</template>
+				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+			</OverflowMenu>
+		</div>
+		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.name) }}
+		</label>
+		<div class="flex">
+			<StyledInput
+				id="instance-name"
+				v-model="title"
+				autocomplete="off"
+				:maxlength="80"
+				wrapper-class="flex-grow"
+			/>
+		</div>
+		<template v-if="instance.install_stage == 'installed'">
+			<div>
+				<h2
+					id="duplicate-instance-label"
+					class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
+				>
+					{{ formatMessage(messages.duplicateInstance) }}
+				</h2>
+				<p class="m-0 mb-2">
+					{{ formatMessage(messages.duplicateInstanceDescription) }}
+				</p>
+			</div>
+			<ButtonStyled>
+				<button
+					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+					aria-labelledby="duplicate-instance-label"
+					:disabled="installing"
+					@click="duplicateProfile"
+				>
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+				</button>
+			</ButtonStyled>
+		</template>
+		<h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.libraryGroups) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.libraryGroupsDescription) }}
+		</p>
+		<div class="flex flex-col gap-1">
+			<Checkbox
+				v-for="group in availableGroups"
+				:key="group"
+				:model-value="groups.includes(group)"
+				:label="group"
+				@click="toggleGroup(group)"
+			/>
+			<div class="flex gap-2 items-center">
+				<StyledInput
+					v-model="newCategoryInput"
+					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
+					@submit="() => addCategory"
+				/>
+				<ButtonStyled>
+					<button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+		<h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.deleteInstance) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.deleteInstanceDescription) }}
+		</p>
+		<ButtonStyled color="red">
+			<button
+				aria-labelledby="delete-instance-label"
+				:disabled="removing"
+				@click="deleteConfirmModal.show()"
+			>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</button>
+		</ButtonStyled>
+	</div>
+</template>
+<style scoped lang="scss">
+.hovering-icon-shadow {
+	box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+}
+</style>

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

@@ -8,41 +8,40 @@ 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 type { AppSettings, Hooks } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const { instance } = injectInstanceSettings()
+const props = defineProps<InstanceSettingsTabProps>()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideHooks = ref(
-	!!instance.value.hooks.pre_launch ||
-		!!instance.value.hooks.wrapper ||
-		!!instance.value.hooks.post_exit,
+	!!props.instance.hooks.pre_launch ||
+		!!props.instance.hooks.wrapper ||
+		!!props.instance.hooks.post_exit,
 )
-const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
+const hooks = ref(props.instance.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(props.instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -56,35 +55,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'Hooks allow advanced users to run certain system commands before and after launching the game.',
 	},
-	hookVariablesDescription: {
-		id: 'instance.settings.tabs.hooks.variables.description',
-		defaultMessage:
-			'Hooks run in the working directory of the instance, with the following variables:',
-	},
-	instanceNameDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
-		defaultMessage: '$INST_NAME: The name of the instance',
-	},
-	instanceIdDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
-		defaultMessage: "$INST_ID: The name of the instance's folder",
-	},
-	instanceDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
-		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
-	},
-	instanceMcDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
-		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
-	},
-	instanceJavaDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
-		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
-	},
-	instanceJavaArgsDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
-		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
-	},
 	customHooks: {
 		id: 'instance.settings.tabs.hooks.custom-hooks',
 		defaultMessage: 'Custom launch hooks',
@@ -130,69 +100,57 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<h2 class="m-0 m-0 text-lg font-semibold text-contrast">
+		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.hooks) }}
 		</h2>
-		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="my-2.5" />
 		<p class="m-0">
 			{{ formatMessage(messages.hooksDescription) }}
 		</p>
+		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />
 
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.preLaunchDescription) }}
+		</p>
 		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>
 
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.wrapperDescription) }}
+		</p>
 		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>
 
-		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.postExitDescription) }}
+		</p>
 		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			wrapper-class="w-full my-2.5"
+			wrapper-class="w-full mt-2"
 		/>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
-
-		<div class="m-0 mt-6">
-			{{ formatMessage(messages.hookVariablesDescription) }}
-		</div>
-		<ul class="m-0 mt-2">
-			<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-		</ul>
 	</div>
 </template>

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

@@ -0,0 +1,819 @@
+<script setup lang="ts">
+import {
+	DownloadIcon,
+	getLoaderIcon,
+	HammerIcon,
+	IssuesIcon,
+	SpinnerIcon,
+	TransferIcon,
+	UndoIcon,
+	UnlinkIcon,
+	UnplugIcon,
+	WrenchIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	Checkbox,
+	Chips,
+	Combobox,
+	defineMessages,
+	formatLoader,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import type { GameVersionTag, PlatformTag, Project, Version } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_version_many } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
+
+import type {
+	InstanceSettingsTabProps,
+	Manifest,
+	ManifestLoaderVersion,
+} from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const repairConfirmModal = ref()
+const modpackVersionModal = ref()
+const modalConfirmUnpair = ref()
+const modalConfirmReinstall = ref()
+
+const props = defineProps<InstanceSettingsTabProps>()
+
+const loader = ref(props.instance.loader)
+const gameVersion = ref(props.instance.game_version)
+
+const showSnapshots = ref(false)
+
+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),
+])
+
+const modpackProject: Ref<Project | null> = ref(null)
+const modpackVersion: Ref<Version | null> = ref(null)
+const modpackVersions: Ref<Version[] | null> = ref(null)
+const fetching = ref(true)
+
+if (props.instance.linked_data && props.instance.linked_data.project_id && !props.offline) {
+	get_project(props.instance.linked_data.project_id, 'must_revalidate')
+		.then((project) => {
+			modpackProject.value = project
+
+			if (project && project.versions) {
+				get_version_many(project.versions, 'must_revalidate')
+					.then((versions: Version[]) => {
+						modpackVersions.value = versions.sort((a, b) =>
+							dayjs(b.date_published).diff(dayjs(a.date_published)),
+						)
+						modpackVersion.value =
+							versions.find(
+								(version: Version) => version.id === props.instance.linked_data?.version_id,
+							) ?? null
+					})
+					.catch(handleError)
+					.finally(() => {
+						fetching.value = false
+					})
+			}
+		})
+		.catch((err) => {
+			handleError(err)
+			fetching.value = false
+		})
+} else {
+	fetching.value = false
+}
+
+const currentLoaderIcon = computed(() => getLoaderIcon(props.instance.loader))
+
+const gameVersionsForLoader = computed(() => {
+	return all_game_versions?.value.filter((item) => {
+		if (loader.value === 'fabric') {
+			return !!fabric_versions?.value.gameVersions.some((x) => item.version === x.id)
+		} else if (loader.value === 'forge') {
+			return !!forge_versions?.value.gameVersions.some((x) => item.version === x.id)
+		} else if (loader.value === 'quilt') {
+			return !!quilt_versions?.value.gameVersions.some((x) => item.version === x.id)
+		} else if (loader.value === 'neoforge') {
+			return !!neoforge_versions?.value.gameVersions.some((x) => item.version === x.id)
+		}
+
+		return []
+	})
+})
+
+const hasSnapshots = computed(() =>
+	gameVersionsForLoader.value?.some((x) => x.version_type !== 'release'),
+)
+
+const selectableGameVersionNumbers = computed(() => {
+	return gameVersionsForLoader.value
+		?.filter((x) => x.version_type === 'release' || showSnapshots.value)
+		.map((x) => x.version)
+})
+
+const gameVersionOptions = computed(() =>
+	(selectableGameVersionNumbers.value ?? []).map((v) => ({ value: v, label: v })),
+)
+
+const loaderVersionOptions = computed(() =>
+	(selectableLoaderVersions.value ?? []).map((opt, index) => ({ value: index, label: opt.id })),
+)
+
+const loaderVersionLabel = computed(() => {
+	const idx = loaderVersionIndex.value
+	return idx >= 0 && selectableLoaderVersions.value
+		? selectableLoaderVersions.value[idx]?.id
+		: 'Select version'
+})
+
+const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
+	if (gameVersion.value) {
+		if (loader.value === 'fabric') {
+			return fabric_versions?.value.gameVersions[0].loaders
+		} else if (loader.value === 'forge') {
+			return forge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
+				?.loaders
+		} else if (loader.value === 'quilt') {
+			return quilt_versions?.value.gameVersions[0].loaders
+		} else if (loader.value === 'neoforge') {
+			return neoforge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
+				?.loaders
+		}
+	}
+	return []
+})
+const loaderVersionIndex: Ref<number> = ref(-1)
+
+resetLoaderVersionIndex()
+
+function resetLoaderVersionIndex() {
+	loaderVersionIndex.value =
+		selectableLoaderVersions.value?.findIndex((x) => x.id === props.instance.loader_version) ?? -1
+}
+
+const isValid = computed(() => {
+	return (
+		selectableGameVersionNumbers.value?.includes(gameVersion.value) &&
+		((loaderVersionIndex.value !== undefined && loaderVersionIndex.value >= 0) ||
+			loader.value === 'vanilla')
+	)
+})
+
+const isChanged = computed(() => {
+	return (
+		loader.value !== props.instance.loader ||
+		gameVersion.value !== props.instance.game_version ||
+		(loader.value !== 'vanilla' &&
+			loaderVersionIndex.value !== undefined &&
+			loaderVersionIndex.value >= 0 &&
+			selectableLoaderVersions.value?.[loaderVersionIndex.value].id !==
+				props.instance.loader_version)
+	)
+})
+
+watch(loader, () => {
+	loaderVersionIndex.value = 0
+})
+
+const editing = ref(false)
+
+async function saveGvLoaderEdits() {
+	editing.value = true
+
+	const editProfile: { loader?: string; game_version?: string; loader_version?: string } = {}
+	editProfile.loader = loader.value
+	editProfile.game_version = gameVersion.value
+
+	if (loader.value !== 'vanilla' && loaderVersionIndex.value !== undefined) {
+		editProfile.loader_version = selectableLoaderVersions.value?.[loaderVersionIndex.value].id
+	} else {
+		loaderVersionIndex.value = -1
+	}
+	console.log('Editing:')
+	console.log(loader.value)
+
+	await edit(props.instance.path, editProfile).catch(handleError)
+	await repairProfile(false)
+
+	editing.value = false
+}
+
+const installing = computed(() => props.instance.install_stage !== 'installed')
+const repairing = ref(false)
+const reinstalling = ref(false)
+const changingVersion = ref(false)
+
+async function repairProfile(force: boolean) {
+	if (force) {
+		repairing.value = true
+	}
+	await install(props.instance.path, force).catch(handleError)
+	if (force) {
+		repairing.value = false
+	}
+
+	trackEvent('InstanceRepair', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})
+}
+
+async function unpairProfile() {
+	await edit(props.instance.path, {
+		linked_data: null,
+	})
+	modpackProject.value = null
+	modpackVersion.value = null
+	modpackVersions.value = null
+	modalConfirmUnpair.value.hide()
+}
+
+async function repairModpack() {
+	reinstalling.value = true
+	await update_repair_modrinth(props.instance.path).catch(handleError)
+	reinstalling.value = false
+
+	trackEvent('InstanceRepair', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})
+}
+
+const messages = defineMessages({
+	cannotWhileInstalling: {
+		id: 'instance.settings.tabs.installation.tooltip.cannot-while-installing',
+		defaultMessage: 'Cannot {action} while installing',
+	},
+	cannotWhileOffline: {
+		id: 'instance.settings.tabs.installation.tooltip.cannot-while-offline',
+		defaultMessage: 'Cannot {action} while offline',
+	},
+	cannotWhileRepairing: {
+		id: 'instance.settings.tabs.installation.tooltip.cannot-while-repairing',
+		defaultMessage: 'Cannot {action} while repairing',
+	},
+	currentlyInstalled: {
+		id: 'instance.settings.tabs.installation.currently-installed',
+		defaultMessage: 'Currently installed',
+	},
+	platform: {
+		id: 'instance.settings.tabs.installation.platform',
+		defaultMessage: 'Platform',
+	},
+	gameVersion: {
+		id: 'instance.settings.tabs.installation.game-version',
+		defaultMessage: 'Game version',
+	},
+	loaderVersion: {
+		id: 'instance.settings.tabs.installation.loader-version',
+		defaultMessage: '{loader} version',
+	},
+	showAllVersions: {
+		id: 'instance.settings.tabs.installation.show-all-versions',
+		defaultMessage: 'Show all versions',
+	},
+	install: {
+		id: 'instance.settings.tabs.installation.install',
+		defaultMessage: 'Install',
+	},
+	resetSelections: {
+		id: 'instance.settings.tabs.installation.reset-selections',
+		defaultMessage: 'Reset to current',
+	},
+	unknownVersion: {
+		id: 'instance.settings.tabs.installation.unknown-version',
+		defaultMessage: '(unknown version)',
+	},
+	repairConfirmTitle: {
+		id: 'instance.settings.tabs.installation.repair.confirm.title',
+		defaultMessage: 'Repair instance?',
+	},
+	repairConfirmDescription: {
+		id: 'instance.settings.tabs.installation.repair.confirm.description',
+		defaultMessage:
+			'Repairing reinstalls Minecraft dependencies and checks for corruption. This may resolve issues if your game is not launching due to launcher-related errors, but will not resolve issues or crashes related to installed mods.',
+	},
+	repairButton: {
+		id: 'instance.settings.tabs.installation.repair.button',
+		defaultMessage: 'Repair',
+	},
+	repairingButton: {
+		id: 'instance.settings.tabs.installation.repair.button.repairing',
+		defaultMessage: 'Repairing',
+	},
+	repairInProgress: {
+		id: 'instance.settings.tabs.installation.repair.in-progress',
+		defaultMessage: 'Repair in progress',
+	},
+	repairAction: {
+		id: 'instance.settings.tabs.installation.tooltip.action.repair',
+		defaultMessage: 'repair',
+	},
+	changeVersionCannotWhileFetching: {
+		id: 'instance.settings.tabs.installation.change-version.cannot-while-fetching',
+		defaultMessage: 'Fetching modpack versions',
+	},
+	changeVersionButton: {
+		id: 'instance.settings.tabs.installation.change-version.button',
+		defaultMessage: 'Change version',
+	},
+	changeVersionAction: {
+		id: 'instance.settings.tabs.installation.tooltip.action.change-version',
+		defaultMessage: 'change version',
+	},
+	installingButton: {
+		id: 'instance.settings.tabs.installation.change-version.button.installing',
+		defaultMessage: 'Installing',
+	},
+	installInProgress: {
+		id: 'instance.settings.tabs.installation.install.in-progress',
+		defaultMessage: 'Installation in progress',
+	},
+	installButton: {
+		id: 'instance.settings.tabs.installation.change-version.button.install',
+		defaultMessage: 'Install',
+	},
+	alreadyInstalledVanilla: {
+		id: 'instance.settings.tabs.installation.change-version.already-installed.vanilla',
+		defaultMessage: 'Vanilla {game_version} already installed',
+	},
+	alreadyInstalledModded: {
+		id: 'instance.settings.tabs.installation.change-version.already-installed.modded',
+		defaultMessage: '{platform} {version} for Minecraft {game_version} already installed',
+	},
+	installAction: {
+		id: 'instance.settings.tabs.installation.tooltip.action.install',
+		defaultMessage: 'install',
+	},
+	installingNewVersion: {
+		id: 'instance.settings.tabs.installation.change-version.in-progress',
+		defaultMessage: 'Installing new version',
+	},
+	minecraftVersion: {
+		id: 'instance.settings.tabs.installation.minecraft-version',
+		defaultMessage: 'Minecraft {version}',
+	},
+	noLoaderVersions: {
+		id: 'instance.settings.tabs.installation.no-loader-versions',
+		defaultMessage: '{loader} is not available for Minecraft {version}. Try another mod loader.',
+	},
+	noConnection: {
+		id: 'instance.settings.tabs.installation.no-connection',
+		defaultMessage: 'Cannot fetch linked modpack details. Please check your internet connection.',
+	},
+	noModpackFound: {
+		id: 'instance.settings.tabs.installation.no-modpack-found',
+		defaultMessage:
+			'This instance is linked to a modpack, but the modpack could not be found on Modrinth.',
+	},
+	debugInformation: {
+		id: 'instance.settings.tabs.installation.debug-information',
+		defaultMessage: 'Debug information:',
+	},
+	fetchingModpackDetails: {
+		id: 'instance.settings.tabs.installation.fetching-modpack-details',
+		defaultMessage: 'Fetching modpack details',
+	},
+	unlinkInstanceTitle: {
+		id: 'instance.settings.tabs.installation.unlink.title',
+		defaultMessage: 'Unlink from modpack',
+	},
+	unlinkInstanceDescription: {
+		id: 'instance.settings.tabs.installation.unlink.description',
+		defaultMessage: `This instance is linked to a modpack, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the modpack.`,
+	},
+	unlinkInstanceButton: {
+		id: 'instance.settings.tabs.installation.unlink.button',
+		defaultMessage: 'Unlink instance',
+	},
+	unlinkInstanceConfirmTitle: {
+		id: 'instance.settings.tabs.installation.unlink.confirm.title',
+		defaultMessage: 'Are you sure you want to unlink this instance?',
+	},
+	unlinkInstanceConfirmDescription: {
+		id: 'instance.settings.tabs.installation.unlink.confirm.description',
+		defaultMessage:
+			'If you proceed, you will not be able to re-link it without creating an entirely new instance. You will no longer receive modpack updates and it will become a normal.',
+	},
+	reinstallModpackConfirmTitle: {
+		id: 'instance.settings.tabs.installation.reinstall.confirm.title',
+		defaultMessage: 'Are you sure you want to reinstall this instance?',
+	},
+	reinstallModpackConfirmDescription: {
+		id: 'instance.settings.tabs.installation.reinstall.confirm.description',
+		defaultMessage: `Reinstalling will reset all installed or modified content to what is provided by the modpack, removing any mods or content you have added on top of the original installation. This may fix unexpected behavior if changes have been made to the instance, but if your worlds now depend on additional installed content, it may break existing worlds.`,
+	},
+	reinstallModpackTitle: {
+		id: 'instance.settings.tabs.installation.reinstall.title',
+		defaultMessage: 'Reinstall modpack',
+	},
+	reinstallModpackDescription: {
+		id: 'instance.settings.tabs.installation.reinstall.description',
+		defaultMessage: `Resets the instance's content to its original state, removing any mods or content you have added on top of the original modpack.`,
+	},
+	reinstallModpackButton: {
+		id: 'instance.settings.tabs.installation.reinstall.button',
+		defaultMessage: 'Reinstall modpack',
+	},
+	reinstallingModpackButton: {
+		id: 'instance.settings.tabs.installation.reinstall.button.reinstalling',
+		defaultMessage: 'Reinstalling modpack',
+	},
+	reinstallAction: {
+		id: 'instance.settings.tabs.installation.tooltip.action.reinstall',
+		defaultMessage: 'reinstall',
+	},
+})
+</script>
+
+<template>
+	<ConfirmModalWrapper
+		ref="repairConfirmModal"
+		:title="formatMessage(messages.repairConfirmTitle)"
+		:description="formatMessage(messages.repairConfirmDescription)"
+		:proceed-icon="HammerIcon"
+		:proceed-label="formatMessage(messages.repairButton)"
+		:danger="false"
+		:show-ad-on-close="false"
+		@proceed="() => repairProfile(true)"
+	/>
+	<ModpackVersionModal
+		v-if="instance.linked_data && modpackVersions"
+		ref="modpackVersionModal"
+		:instance="instance"
+		:versions="modpackVersions"
+		@finish-install="
+			() => {
+				changingVersion = false
+				modpackVersion =
+					modpackVersions?.find(
+						(version: Version) => version.id === props.instance.linked_data?.version_id,
+					) ?? null
+			}
+		"
+	/>
+	<ConfirmModalWrapper
+		ref="modalConfirmUnpair"
+		:title="formatMessage(messages.unlinkInstanceConfirmTitle)"
+		:description="formatMessage(messages.unlinkInstanceConfirmDescription)"
+		:proceed-icon="UnlinkIcon"
+		:proceed-label="formatMessage(messages.unlinkInstanceButton)"
+		:show-ad-on-close="false"
+		@proceed="() => unpairProfile()"
+	/>
+	<ConfirmModalWrapper
+		ref="modalConfirmReinstall"
+		:title="formatMessage(messages.reinstallModpackConfirmTitle)"
+		:description="formatMessage(messages.reinstallModpackConfirmDescription)"
+		:proceed-icon="DownloadIcon"
+		:proceed-label="formatMessage(messages.reinstallModpackButton)"
+		:show-ad-on-close="false"
+		@proceed="() => repairModpack()"
+	/>
+	<div>
+		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.currentlyInstalled) }}
+		</h2>
+		<div
+			v-if="!modpackProject && instance.linked_data && offline && !fetching"
+			class="text-secondary font-medium mb-2"
+		>
+			<UnplugIcon class="top-[3px] relative" /> {{ formatMessage(messages.noConnection) }}
+		</div>
+		<div v-else-if="!modpackProject && instance.linked_data && !fetching" class="mb-2">
+			<p class="text-brand-red font-medium mt-0">
+				<IssuesIcon class="top-[3px] relative" />
+				{{ formatMessage(messages.noModpackFound) }}
+			</p>
+			<p>{{ formatMessage(messages.debugInformation) }}</p>
+			<div class="bg-bg p-6 rounded-2xl mt-2 text-sm text-secondary">
+				{{ instance.linked_data }}
+			</div>
+		</div>
+		<div class="flex gap-4 items-center justify-between p-4 bg-bg rounded-2xl">
+			<div v-if="fetching" class="flex items-center gap-2 h-10">
+				<SpinnerIcon class="animate-spin" />
+				{{ formatMessage(messages.fetchingModpackDetails) }}
+			</div>
+			<template v-else>
+				<div class="flex gap-2 items-center">
+					<Avatar v-if="modpackProject" :src="modpackProject?.icon_url" size="40px" />
+					<div
+						v-else
+						class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
+					>
+						<component :is="currentLoaderIcon" v-if="currentLoaderIcon" />
+						<WrenchIcon v-else />
+					</div>
+					<div class="flex flex-col gap-2 justify-center">
+						<span class="font-semibold leading-none">
+							{{
+								modpackProject
+									? modpackProject.title
+									: formatMessage(messages.minecraftVersion, {
+											version: instance.game_version,
+										})
+							}}
+						</span>
+						<span class="text-sm text-secondary leading-none">
+							{{
+								modpackProject
+									? modpackVersion
+										? modpackVersion?.version_number
+										: 'Unknown version'
+									: formatLoader(formatMessage, instance.loader)
+							}}
+							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
+								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
+							</template>
+						</span>
+					</div>
+				</div>
+				<div class="flex gap-1">
+					<ButtonStyled color="orange" type="transparent" hover-color-fill="background">
+						<button
+							v-tooltip="
+								repairing
+									? formatMessage(messages.repairInProgress)
+									: installing || reinstalling
+										? formatMessage(messages.cannotWhileInstalling, {
+												action: formatMessage(messages.repairAction),
+											})
+										: offline
+											? formatMessage(messages.cannotWhileOffline, {
+													action: formatMessage(messages.repairAction),
+												})
+											: null
+							"
+							:disabled="installing || repairing || reinstalling || offline"
+							@click="repairConfirmModal.show()"
+						>
+							<SpinnerIcon v-if="repairing" class="animate-spin" />
+							<HammerIcon v-else />
+							{{
+								repairing
+									? formatMessage(messages.repairingButton)
+									: formatMessage(messages.repairButton)
+							}}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-if="modpackProject" hover-color-fill="background">
+						<button
+							v-tooltip="
+								changingVersion
+									? formatMessage(messages.installingNewVersion)
+									: repairing
+										? formatMessage(messages.cannotWhileRepairing, {
+												action: formatMessage(messages.changeVersionAction),
+											})
+										: installing || reinstalling
+											? formatMessage(messages.cannotWhileInstalling, {
+													action: formatMessage(messages.changeVersionAction),
+												})
+											: fetching && !modpackVersions
+												? formatMessage(messages.changeVersionCannotWhileFetching)
+												: offline
+													? formatMessage(messages.cannotWhileOffline, {
+															action: formatMessage(messages.changeVersionAction),
+														})
+													: null
+							"
+							:disabled="
+								changingVersion ||
+								repairing ||
+								installing ||
+								reinstalling ||
+								offline ||
+								fetching ||
+								!modpackVersions
+							"
+							@click="
+								() => {
+									changingVersion = true
+									modpackVersionModal.show()
+								}
+							"
+						>
+							<SpinnerIcon v-if="changingVersion" class="animate-spin" />
+							<TransferIcon v-else />
+							{{
+								changingVersion
+									? formatMessage(messages.installingButton)
+									: formatMessage(messages.changeVersionButton)
+							}}
+						</button>
+					</ButtonStyled>
+				</div>
+			</template>
+		</div>
+		<template v-if="!instance.linked_data || !instance.linked_data.locked">
+			<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+				{{ formatMessage(messages.platform) }}
+			</h2>
+			<Chips v-if="loaders" v-model="loader" :items="loaders.map((x) => x.name)" class="mt-2" />
+			<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+				{{ formatMessage(messages.gameVersion) }}
+			</h2>
+			<div class="flex flex-wrap mt-2 gap-2">
+				<Combobox
+					v-if="selectableGameVersionNumbers !== undefined"
+					v-model="gameVersion"
+					:options="gameVersionOptions"
+					:display-value="gameVersion || formatMessage(messages.unknownVersion)"
+				/>
+				<Checkbox
+					v-if="hasSnapshots"
+					v-model="showSnapshots"
+					:label="formatMessage(messages.showAllVersions)"
+				/>
+			</div>
+			<template v-if="loader !== 'vanilla'">
+				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+					{{
+						formatMessage(messages.loaderVersion, {
+							loader: formatLoader(formatMessage, loader),
+						})
+					}}
+				</h2>
+				<Combobox
+					v-if="selectableLoaderVersions"
+					v-model="loaderVersionIndex"
+					:options="loaderVersionOptions"
+					:display-value="loaderVersionLabel"
+					name="Version selector"
+					class="mt-2"
+				/>
+				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
+					<IssuesIcon />
+					{{
+						formatMessage(messages.noLoaderVersions, {
+							loader: loader,
+							version: gameVersion,
+						})
+					}}
+				</div>
+			</template>
+			<div class="mt-4 flex flex-wrap gap-2">
+				<ButtonStyled color="brand">
+					<button
+						v-tooltip="
+							installing || reinstalling
+								? formatMessage(messages.installInProgress)
+								: !isChanged
+									? formatMessage(
+											loader === 'vanilla'
+												? messages.alreadyInstalledVanilla
+												: messages.alreadyInstalledModded,
+											{
+												platform: formatLoader(formatMessage, loader),
+												version: instance.loader_version,
+												game_version: gameVersion,
+											},
+										)
+									: repairing
+										? formatMessage(messages.cannotWhileRepairing, {
+												action: formatMessage(messages.installAction),
+											})
+										: offline
+											? formatMessage(messages.cannotWhileOffline, {
+													action: formatMessage(messages.installAction),
+												})
+											: null
+						"
+						:disabled="!isValid || !isChanged || editing || offline || repairing"
+						@click="saveGvLoaderEdits()"
+					>
+						<SpinnerIcon v-if="editing" class="animate-spin" />
+						<DownloadIcon v-else />
+						{{
+							editing
+								? formatMessage(messages.installingButton)
+								: formatMessage(messages.installButton)
+						}}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button
+						:disabled="!isChanged"
+						@click="
+							() => {
+								loader = instance.loader
+								gameVersion = instance.game_version
+								resetLoaderVersionIndex()
+							}
+						"
+					>
+						<UndoIcon />
+						{{ formatMessage(messages.resetSelections) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+		<template v-else>
+			<template v-if="instance.linked_data && instance.linked_data.locked">
+				<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+					{{ formatMessage(messages.unlinkInstanceTitle) }}
+				</h2>
+				<p class="m-0">
+					{{ formatMessage(messages.unlinkInstanceDescription) }}
+				</p>
+				<ButtonStyled>
+					<button class="mt-2" @click="modalConfirmUnpair.show()">
+						<UnlinkIcon /> {{ formatMessage(messages.unlinkInstanceButton) }}
+					</button>
+				</ButtonStyled>
+				<template v-if="modpackProject">
+					<div>
+						<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast block mt-4">
+							{{ formatMessage(messages.reinstallModpackTitle) }}
+						</h2>
+						<p class="m-0">
+							{{ formatMessage(messages.reinstallModpackDescription) }}
+						</p>
+					</div>
+					<ButtonStyled color="red" type="outlined">
+						<button
+							v-tooltip="
+								reinstalling
+									? formatMessage(messages.reinstallingModpackButton)
+									: repairing
+										? formatMessage(messages.cannotWhileRepairing, {
+												action: formatMessage(messages.reinstallAction),
+											})
+										: installing
+											? formatMessage(messages.cannotWhileInstalling, {
+													action: formatMessage(messages.reinstallAction),
+												})
+											: offline
+												? formatMessage(messages.cannotWhileOffline, {
+														action: formatMessage(messages.reinstallAction),
+													})
+												: null
+							"
+							class="mt-2"
+							:disabled="
+								changingVersion ||
+								repairing ||
+								installing ||
+								offline ||
+								fetching ||
+								!modpackVersions
+							"
+							@click="modalConfirmReinstall.show()"
+						>
+							<SpinnerIcon v-if="reinstalling" class="animate-spin" />
+							<DownloadIcon v-else />
+							{{
+								reinstalling
+									? formatMessage(messages.reinstallingModpackButton)
+									: formatMessage(messages.reinstallModpackButton)
+							}}
+						</button>
+					</ButtonStyled>
+				</template>
+			</template>
+		</template>
+	</div>
+</template>

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, readonly, ref, watch } from 'vue'
+
+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const props = defineProps<InstanceSettingsTabProps>()
+
+const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
+
+const overrideJavaInstall = ref(!!props.instance.java_path)
+const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
+
+const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
+const javaArgs = ref(
+	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
+)
+
+const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
+const envVars = ref(
+	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
+		.map((x) => x.join('='))
+		.join(' '),
+)
+
+const overrideMemorySettings = ref(!!props.instance.memory)
+const memory = ref(props.instance.memory ?? globalSettings.memory)
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}
+
+const editProfileObject = computed(() => {
+	return {
+		java_path:
+			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)
+			: null,
+		custom_env_vars: overrideEnvVars.value
+			? envVars.value
+					.trim()
+					.split(/\s+/)
+					.filter(Boolean)
+					.map((x) => x.split('=').filter(Boolean))
+			: null,
+		memory: overrideMemorySettings.value ? memory.value : null,
+	}
+})
+
+watch(
+	[
+		overrideJavaInstall,
+		javaInstall,
+		overrideJavaArgs,
+		javaArgs,
+		overrideEnvVars,
+		envVars,
+		overrideMemorySettings,
+		memory,
+	],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
+)
+
+const messages = defineMessages({
+	javaInstallation: {
+		id: 'instance.settings.tabs.java.java-installation',
+		defaultMessage: 'Java installation',
+	},
+	javaArguments: {
+		id: 'instance.settings.tabs.java.java-arguments',
+		defaultMessage: 'Java arguments',
+	},
+	javaEnvironmentVariables: {
+		id: 'instance.settings.tabs.java.environment-variables',
+		defaultMessage: 'Environment variables',
+	},
+	javaMemory: {
+		id: 'instance.settings.tabs.java.java-memory',
+		defaultMessage: 'Memory allocated',
+	},
+	hooks: {
+		id: 'instance.settings.tabs.java.hooks',
+		defaultMessage: 'Hooks',
+	},
+})
+</script>
+
+<template>
+	<div>
+		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaInstallation) }}
+		</h2>
+		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
+		<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
+					>
+				</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
+				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-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaMemory) }}
+		</h2>
+		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
+		<Slider
+			id="max-memory"
+			v-model="memory.maximum"
+			:disabled="!overrideMemorySettings"
+			:min="512"
+			:max="maxMemory"
+			:step="64"
+			:snap-points="snapPoints"
+			:snap-range="512"
+			unit="MB"
+		/>
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaArguments) }}
+		</h2>
+		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
+		<StyledInput
+			id="java-args"
+			v-model="javaArgs"
+			autocomplete="off"
+			:disabled="!overrideJavaArgs"
+			placeholder="Enter java arguments..."
+			wrapper-class="w-full"
+		/>
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaEnvironmentVariables) }}
+		</h2>
+		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
+		<StyledInput
+			id="env-vars"
+			v-model="envVars"
+			autocomplete="off"
+			:disabled="!overrideEnvVars"
+			placeholder="Enter environmental variables..."
+			wrapper-class="w-full"
+		/>
+	</div>
+</template>

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

@@ -9,30 +9,29 @@ 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 type { AppSettings } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const { instance } = injectInstanceSettings()
+const props = defineProps<InstanceSettingsTabProps>()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideWindowSettings = ref(
-	!!instance.value.game_resolution || !!instance.value.force_fullscreen,
+	!!props.instance.game_resolution || !!props.instance.force_fullscreen,
 )
 const resolution: Ref<[number, number]> = ref(
-	instance.value.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+	props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
 )
 const fullscreenSetting: Ref<boolean> = ref(
-	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
+	props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
 )
 
-const editInstanceObject = computed(() => {
+const editProfileObject = computed(() => {
 	if (!overrideWindowSettings.value) {
 		return {
 			force_fullscreen: null,
@@ -48,7 +47,7 @@ const editInstanceObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(instance.value.id, editInstanceObject.value)
+		await edit(props.instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -94,14 +93,14 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div class="flex flex-col gap-6">
+	<div>
 		<Checkbox
 			v-model="overrideWindowSettings"
 			:label="formatMessage(messages.customWindowSettings)"
 		/>
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-2 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.fullscreen) }}
 				</h2>
 				<p class="m-0">
@@ -120,9 +119,9 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.width) }}
 				</h2>
 				<p class="m-0">
@@ -139,9 +138,9 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="flex items-center gap-4 justify-between">
-			<div class="flex flex-col gap-1">
-				<h2 class="m-0 text-lg font-semibold text-contrast">
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
 					{{ formatMessage(messages.height) }}
 				</h2>
 				<p class="m-0">

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

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import {
-	CheckIcon,
-	CopyIcon,
-	DropdownIcon,
-	LogInIcon,
-	MessagesSquareIcon,
-	WrenchIcon,
-} from '@modrinth/assets'
-import { Admonition, Button, ButtonLink, Collapsible, IconButton, NewModal } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
-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'
-
-const modal = ref<InstanceType<typeof NewModal>>()
-const rawError = ref<string>('')
-const matchedError = ref<MinecraftAuthError | null>(null)
-const debugCollapsed = ref(true)
-const copied = ref(false)
-const loadingSignIn = ref(false)
-
-function show(errorVal: { message?: string }) {
-	rawError.value = errorVal?.message ?? String(errorVal)
-
-	matchedError.value = findMinecraftAuthError(rawError.value)
-
-	debugCollapsed.value = true
-	modal.value?.show()
-}
-
-function hide() {
-	modal.value?.hide()
-}
-
-defineExpose({
-	show,
-	hide,
-})
-
-async function signInAgain() {
-	try {
-		loadingSignIn.value = true
-		const loggedIn = await login_flow()
-		if (loggedIn) {
-			await set_default_user(loggedIn.profile.id)
-		}
-		loadingSignIn.value = false
-		modal.value?.hide()
-	} catch (err) {
-		loadingSignIn.value = false
-		handleSevereError(err)
-	}
-}
-
-const debugInfo = computed(() => rawError.value || 'No error message.')
-
-async function copyToClipboard(text: string) {
-	await navigator.clipboard.writeText(text)
-	copied.value = true
-	setTimeout(() => {
-		copied.value = false
-	}, 3000)
-}
-</script>
-
-<template>
-	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'">
-		<div class="flex flex-col gap-6">
-			<Admonition
-				type="warning"
-				body="	We couldn't sign you into your Microsoft account. This may be due to account restrictions or
-				regional limitations."
-			>
-			</Admonition>
-
-			<!-- Matched error details -->
-			<div class="bg-surface-2 rounded-2xl p-4 px-5 flex flex-col gap-3">
-				<template v-if="matchedError">
-					<div class="flex flex-col gap-1.5">
-						<h3 class="text-base font-bold m-0">What we think happened</h3>
-						<p class="text-sm text-secondary m-0">
-							{{ matchedError.whatHappened }}
-						</p>
-					</div>
-
-					<div class="flex flex-col gap-1.5">
-						<h3 class="text-base font-bold m-0">How to fix it</h3>
-						<ol class="list-none flex flex-col gap-2 m-0 pl-0">
-							<li
-								v-for="(step, index) in matchedError.stepsToFix"
-								:key="index"
-								class="flex items-baseline gap-2"
-							>
-								<span
-									class="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded-full bg-surface-4 border border-solid border-surface-5 text-xs font-medium"
-								>
-									{{ index + 1 }}
-								</span>
-								<!-- eslint-disable-next-line vue/no-v-html -->
-								<span
-									class="text-sm [&_a]:text-info [&_a]:font-medium [&_a]:underline"
-									v-html="step"
-								/>
-							</li>
-						</ol>
-					</div>
-				</template>
-				<template v-else>
-					<div class="flex flex-col gap-1.5">
-						<h3 class="text-base font-bold m-0">Unknown error</h3>
-						<p class="text-sm text-secondary m-0">
-							We don’t recognize this error and can’t recommend specific steps to resolve it.
-						</p>
-						<p class="text-sm text-secondary m-0">
-							Try visiting
-							<a
-								class="text-info font-medium underline hover:underline"
-								href="https://www.minecraft.net/en-us/login"
-								>Minecraft Login</a
-							>
-							and signing in, as it may prompt you with the necessary steps. You can also contact
-							support and we can look into it further.
-						</p>
-					</div>
-				</template>
-			</div>
-
-			<!-- Action buttons -->
-			<div class="flex items-center gap-2">
-				<ButtonLink href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
-					<MessagesSquareIcon /> Contact support
-				</ButtonLink>
-				<Button
-					type="colored"
-					color="brand"
-					:disabled="loadingSignIn"
-					class="!w-full"
-					@click="signInAgain"
-				>
-					<LogInIcon /> Sign in again
-				</Button>
-			</div>
-
-			<div class="flex flex-col gap-2">
-				<div class="w-full h-[1px] bg-surface-5"></div>
-
-				<!-- Debug info -->
-				<div class="overflow-clip">
-					<button
-						class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
-						@click="debugCollapsed = !debugCollapsed"
-					>
-						<span class="flex items-center gap-2 text-contrast font-extrabold m-0">
-							<WrenchIcon class="h-4 w-4" />
-							Debug information
-						</span>
-						<DropdownIcon
-							class="h-5 w-5 text-secondary transition-transform"
-							:class="{ 'rotate-180': !debugCollapsed }"
-						/>
-					</button>
-					<Collapsible :collapsed="debugCollapsed">
-						<div
-							class="p-3 bg-surface-2 rounded-2xl text-xs grid grid-cols-[1fr_auto] max-w-full items-start"
-						>
-							<div
-								class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
-							>
-								{{ debugInfo }}
-							</div>
-							<IconButton
-								v-tooltip="'Copy debug info'"
-								:label="'Copy debug info'"
-								:disabled="copied"
-								@click="copyToClipboard(debugInfo)"
-							>
-								<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-								<template v-else> <CopyIcon /> </template>
-							</IconButton>
-						</div>
-					</Collapsible>
-				</div>
-			</div>
-		</div>
-	</NewModal>
-</template>

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

@@ -1,200 +0,0 @@
-export interface MinecraftAuthError {
-	errorCode?: string
-	errorMatchers?: string[]
-	matches?: (message: string) => boolean
-	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:
-			'Your Minecraft/Xbox Live account requires age verification to comply with UK regulations. You must complete this before signing in.',
-		stepsToFix: [
-			'Go to the <a href="https://www.minecraft.net/en-us/login">Minecraft Login</a> page and sign in',
-			'Follow the instructions to verify your age',
-			'Once verified, try signing in again',
-			'For additional help, visit <a href="https://support.xbox.com/en-GB/help/family-online-safety/online-safety/UK-age-verification">UK age verification on Xbox</a>',
-		],
-	},
-	{
-		errorCode: '2148916233',
-		whatHappened: "This account doesn't have an Xbox profile set up or doesn't own Minecraft.",
-		stepsToFix: [
-			'Make sure Minecraft is purchased on this account',
-			'Visit <a href="https://www.minecraft.net/en-us/login">Minecraft Login</a> and sign in',
-			'Complete Xbox profile setup if prompted',
-			'Once finished, try signing in again',
-		],
-	},
-	{
-		errorCode: '2148916235',
-		whatHappened: "Xbox Live isn't available in your region, so sign-in is blocked.",
-		stepsToFix: [
-			'Xbox services must be supported in your country before you can sign in',
-			'Check <a href="https://www.xbox.com/en-US/regions">Xbox Availability</a> for supported regions',
-		],
-	},
-	{
-		errorCode: '2148916236',
-		whatHappened: 'This account requires adult verification under South Korean regulations.',
-		stepsToFix: [
-			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
-			'Complete the identity verification process',
-			'Once finished, try signing in again',
-		],
-	},
-	{
-		errorCode: '2148916237',
-		whatHappened: 'This account requires adult verification under South Korean regulations.',
-		stepsToFix: [
-			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
-			'Complete the identity verification process',
-			'Once finished, try signing in again',
-		],
-	},
-	{
-		errorCode: '2148916238',
-		whatHappened: 'This account is underage and not linked to a Microsoft family group.',
-		stepsToFix: [
-			'Review the <a href="https://help.minecraft.net/hc/en-us/articles/4408968616077">Family Setup Guide</a>',
-			'Join or create a family group as instructed',
-			'Once finished, try signing in again',
-		],
-	},
-	{
-		errorCode: '2148916227',
-		whatHappened: 'This account was suspended for violating Xbox Community Standards.',
-		stepsToFix: [
-			'Visit <a href="https://support.xbox.com">Xbox Support</a> and review the enforcement details',
-			'Submit an appeal if one is available',
-		],
-	},
-	{
-		errorCode: '2148916229',
-		whatHappened: "This account is restricted and doesn't have permission to play online.",
-		stepsToFix: [
-			'Have a guardian sign in to <a href="https://account.microsoft.com/family/">Microsoft Family</a>',
-			'Update online play permissions',
-			'Once finished, try signing in again',
-		],
-	},
-	{
-		errorCode: '2148916234',
-		whatHappened: "This account hasn't accepted Xbox's Terms of Service.",
-		stepsToFix: [
-			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
-			'Accept the Terms if prompted',
-			'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,133 +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="grid grid-cols-2 gap-2">
-				<ButtonLink href="https://support.modrinth.com" @click="modal?.hide()">
-					<MessagesSquareIcon />
-					{{ formatMessage(messages.getSupport) }}
-				</ButtonLink>
-				<Button type="colored" color="brand" :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>
-			</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 { Button, ButtonLink, 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/AppSettingsModal.vue

@@ -3,48 +3,37 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
-	HeartHandshakeIcon,
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
-	Settings2Icon,
+	ReportIcon,
+	SettingsIcon,
 	ShieldIcon,
-	ToggleRightIcon,
-	UserIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
-	commonSettingsMessages,
 	defineMessage,
 	defineMessages,
 	ProgressBar,
 	TabbedModal,
-	UnsavedChangesPopup,
 	useVIntl,
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { computed, provide, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import PrivacySettings from '@/components/ui/settings/account/PrivacySettings.vue'
-import ProfileSettings from '@/components/ui/settings/account/ProfileSettings.vue'
-import SocialSettings from '@/components/ui/settings/account/SocialSettings.vue'
-import AppearanceSettings from '@/components/ui/settings/display/AppearanceSettings.vue'
-import BehaviorSettings from '@/components/ui/settings/display/BehaviorSettings.vue'
-import FeatureFlagSettings from '@/components/ui/settings/display/FeatureFlagSettings.vue'
-import LanguageSettings from '@/components/ui/settings/display/LanguageSettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/instances/DefaultInstanceSettings.vue'
-import JavaSettings from '@/components/ui/settings/instances/JavaSettings.vue'
-import ResourceManagementSettings from '@/components/ui/settings/instances/ResourceManagementSettings.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
+import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
+import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
+import LanguageSettings from '@/components/ui/settings/LanguageSettings.vue'
+import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
+import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
-import {
-	appSettingsModalContextKey,
-	type UnsavedChangesController,
-} from '@/providers/app-settings-modal'
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
 import { useTheming } from '@/store/state'
 
-// TODO: Apply COMPONENT_STRUCTURE.md here and extract out common setting option components
 const themeStore = useTheming()
 
 const { formatMessage } = useVIntl()
@@ -56,162 +45,76 @@ const developerModeEnabled = defineMessage({
 	defaultMessage: 'Developer mode enabled.',
 })
 
-const tabCategories = defineMessages({
-	display: {
-		id: 'settings.sidebar.label.display',
-		defaultMessage: 'Display',
-	},
-	account: {
-		id: 'settings.sidebar.label.account',
-		defaultMessage: 'Account',
-	},
-	instances: {
-		id: 'app.settings.sidebar.label.instances',
-		defaultMessage: 'Instances',
-	},
-})
-
 const tabs = [
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.appearance',
 			defaultMessage: 'Appearance',
 		}),
-		category: tabCategories.display,
 		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
-	{
-		name: defineMessage({
-			id: 'app.settings.tabs.behavior',
-			defaultMessage: 'Behavior',
-		}),
-		category: tabCategories.display,
-		icon: Settings2Icon,
-		content: BehaviorSettings,
-	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.language',
 			defaultMessage: 'Language',
 		}),
-		category: tabCategories.display,
 		icon: LanguagesIcon,
 		content: LanguageSettings,
 		badge: commonMessages.beta,
 	},
-	{
-		name: commonSettingsMessages.featureFlags,
-		category: tabCategories.display,
-		icon: ToggleRightIcon,
-		content: FeatureFlagSettings,
-		developerOnly: true,
-	},
-	{
-		name: commonSettingsMessages.profile,
-		category: tabCategories.account,
-		icon: UserIcon,
-		content: ProfileSettings,
-	},
-	{
-		name: commonSettingsMessages.social,
-		category: tabCategories.account,
-		icon: HeartHandshakeIcon,
-		content: SocialSettings,
-	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',
 			defaultMessage: 'Privacy',
 		}),
-		category: tabCategories.account,
 		icon: ShieldIcon,
 		content: PrivacySettings,
 	},
-	{
-		name: defineMessage({
-			id: 'app.settings.tabs.default-instance-options',
-			defaultMessage: 'Default game options',
-		}),
-		category: tabCategories.instances,
-		icon: GameIcon,
-		content: DefaultInstanceSettings,
-	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.java-installations',
 			defaultMessage: 'Java installations',
 		}),
-		category: tabCategories.instances,
 		icon: CoffeeIcon,
 		content: JavaSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.default-instance-options',
+			defaultMessage: 'Default instance options',
+		}),
+		icon: GameIcon,
+		content: DefaultInstanceSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.resource-management',
 			defaultMessage: 'Resource management',
 		}),
-		category: tabCategories.instances,
 		icon: GaugeIcon,
 		content: ResourceManagementSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.feature-flags',
+			defaultMessage: 'Feature flags',
+		}),
+		icon: ReportIcon,
+		content: FeatureFlagSettings,
+		developerOnly: true,
+	},
 ]
 
-const availableTabs = computed(() => tabs.filter((tab) => !tab.developerOnly || themeStore.devMode))
-
-const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
-const unsavedChangesPopup = ref<{ nudge: () => void } | null>(null)
-const unsavedChangesController = ref<UnsavedChangesController | null>(null)
-const emptyUnsavedChangesState: Record<string, unknown> = {}
-const originalUnsavedChangesState = computed(
-	() => unsavedChangesController.value?.getOriginal() ?? emptyUnsavedChangesState,
-)
-const modifiedUnsavedChangesState = computed(
-	() => unsavedChangesController.value?.getModified() ?? emptyUnsavedChangesState,
-)
-const savingUnsavedChanges = computed(() => unsavedChangesController.value?.isSaving() ?? false)
-const hasUnsavedChanges = computed(() => unsavedChangesController.value?.hasChanges() ?? false)
-
-function canLeaveCurrentTab(): boolean {
-	if (!unsavedChangesController.value?.hasChanges()) return true
-	unsavedChangesPopup.value?.nudge()
-	return false
-}
-
-function close(): boolean {
-	return modal.value?.hide() ?? false
-}
-
-function registerUnsavedChangesController(controller: UnsavedChangesController | null): void {
-	unsavedChangesController.value = controller
-}
-
-provide(appSettingsModalContextKey, {
-	close,
-	registerUnsavedChangesController,
-})
-
-function resetUnsavedChanges(): void {
-	unsavedChangesController.value?.reset()
-}
-
-function saveUnsavedChanges(): void {
-	void unsavedChangesController.value?.save()
-}
+const modal = ref()
 
 function show() {
-	modal.value?.show()
+	modal.value.show()
 }
 
-function showProfile(): void {
-	const profileTabIndex = availableTabs.value.findIndex((tab) => tab.content === ProfileSettings)
-	if (profileTabIndex >= 0) {
-		modal.value?.setTab(profileTabIndex)
-	}
-	modal.value?.show()
-}
+const isOpen = computed(() => modal.value?.isOpen)
 
-defineExpose({ show, showProfile })
+defineExpose({ show, isOpen })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
@@ -231,15 +134,12 @@ watch(
 function devModeCount() {
 	devModeCounter.value++
 	if (devModeCounter.value > 5) {
-		const selectedTab = modal.value ? availableTabs.value[modal.value.selectedTab] : undefined
-
 		themeStore.devMode = !themeStore.devMode
 		settings.value.developer_mode = !!themeStore.devMode
 		devModeCounter.value = 0
 
-		if (modal.value) {
-			const selectedTabIndex = selectedTab ? availableTabs.value.indexOf(selectedTab) : -1
-			modal.value.setTab(selectedTabIndex >= 0 ? selectedTabIndex : 0)
+		if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
+			modal.value.setTab(0)
 		}
 	}
 }
@@ -249,82 +149,52 @@ const messages = defineMessages({
 		id: 'app.settings.downloading',
 		defaultMessage: 'Downloading v{version}',
 	},
-	appVersion: {
-		id: 'app.settings.app-version',
-		defaultMessage: 'Modrinth App {version}',
-	},
-	macos: {
-		id: 'app.settings.operating-system.macos',
-		defaultMessage: 'macOS',
-	},
-	developerModeButtonLabel: {
-		id: 'app.settings.developer-mode-button.label',
-		defaultMessage: 'Toggle developer mode',
-	},
 })
 </script>
 <template>
-	<TabbedModal
-		ref="modal"
-		:tabs="availableTabs"
-		:width="'min(928px, calc(95vw - 10rem))'"
-		:before-hide="canLeaveCurrentTab"
-		:before-tab-change="canLeaveCurrentTab"
-		:floating-action-bar-shown="hasUnsavedChanges"
-	>
+	<ModalWrapper ref="modal">
 		<template #title>
-			<span class="text-2xl font-semibold text-contrast">
-				{{ formatMessage(commonMessages.settingsLabel) }}
+			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
+				<SettingsIcon /> Settings
 			</span>
 		</template>
-		<template #floating-action-bar>
-			<UnsavedChangesPopup
-				ref="unsavedChangesPopup"
-				:original="originalUnsavedChangesState"
-				:modified="modifiedUnsavedChangesState"
-				:saving="savingUnsavedChanges"
-				inline
-				@reset="resetUnsavedChanges"
-				@save="saveUnsavedChanges"
-			/>
-		</template>
-		<template #footer>
-			<div class="mt-auto text-secondary text-sm">
-				<div class="mb-3">
-					<template v-if="progress > 0 && progress < 1">
-						<p class="m-0 mb-2">
-							{{ formatMessage(messages.downloading, { version: downloadingVersion }) }}
-						</p>
-						<ProgressBar :progress="progress" />
-					</template>
-				</div>
-				<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
-					{{ formatMessage(developerModeEnabled) }}
-				</p>
-				<div class="flex items-center gap-3">
-					<button
-						:aria-label="formatMessage(messages.developerModeButtonLabel)"
-						class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
-						:class="{
-							'text-brand': themeStore.devMode,
-							'text-secondary': !themeStore.devMode,
-						}"
-						@click="devModeCount"
-					>
-						<ModrinthIcon aria-hidden="true" class="w-6 h-6" />
-					</button>
-					<div class="max-w-[200px]">
-						<p class="m-0">
-							{{ formatMessage(messages.appVersion, { version }) }}
-						</p>
-						<p class="m-0">
-							<span v-if="osPlatform === 'macos'">{{ formatMessage(messages.macos) }}</span>
-							<span v-else class="capitalize">{{ osPlatform }}</span>
-							{{ osVersion }}
-						</p>
+
+		<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
+			<template #footer>
+				<div class="mt-auto text-secondary text-sm">
+					<div class="mb-3">
+						<template v-if="progress > 0 && progress < 1">
+							<p class="m-0 mb-2">
+								{{ formatMessage(messages.downloading, { version: downloadingVersion }) }}
+							</p>
+							<ProgressBar :progress="progress" />
+						</template>
+					</div>
+					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
+						{{ formatMessage(developerModeEnabled) }}
+					</p>
+					<div class="flex items-center gap-3">
+						<button
+							class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
+							:class="{
+								'text-brand': themeStore.devMode,
+								'text-secondary': !themeStore.devMode,
+							}"
+							@click="devModeCount"
+						>
+							<ModrinthIcon class="w-6 h-6" />
+						</button>
+						<div>
+							<p class="m-0">Modrinth App {{ version }}</p>
+							<p class="m-0">
+								<span v-if="osPlatform === 'macos'">macOS</span>
+								<span v-else class="capitalize">{{ osPlatform }}</span>
+								{{ osVersion }}
+							</p>
+						</div>
 					</div>
 				</div>
-			</div>
-		</template>
-	</TabbedModal>
+			</template>
+		</TabbedModal>
+	</ModalWrapper>
 </template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+defineProps({
+	onFlowCancel: {
+		type: Function,
+		default() {
+			return async () => {}
+		},
+	},
+})
+
+const modal = ref()
+
+function show() {
+	modal.value.show()
+}
+
+function hide() {
+	modal.value.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+<template>
+	<ModalWrapper ref="modal" @hide="onFlowCancel">
+		<template #title>
+			<span class="items-center gap-2 text-lg font-extrabold text-contrast">
+				<LogInIcon /> Sign in
+			</span>
+		</template>
+
+		<div class="flex justify-center gap-2">
+			<SpinnerIcon class="w-12 h-12 animate-spin" />
+		</div>
+		<p class="text-sm text-secondary">
+			Please sign in at the browser window that just opened to continue.
+		</p>
+	</ModalWrapper>
+</template>