feat: add tooltip for unknown dependents

* fix: app freezing fix

* fix: fmt

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

@@ -0,0 +1,18 @@
+---
+name: api-module
+description: Add a new API endpoint module to packages/api-client from an OpenAPI schema. Use when adding new backend endpoints, creating API client modules, or when an openapi.yml is provided.
+argument-hint: <path-to-openapi.yml>
+---
+
+Refer to the standard: @standards/frontend/ADDING_API_MODULES.md
+
+## Steps
+
+1. **Read the OpenAPI schema** at `$ARGUMENTS` — identify the endpoints, request/response shapes, and path parameters.
+2. **Read the standard above** for naming conventions, type rules, and the module registration pattern.
+3. **Determine the service and version** — the URL path prefix tells you which service directory and version namespace to use (e.g. `/v3/projects` → `labrinth/v3/`).
+4. **Define types in `types.ts`** — types must match the API response 1:1. Use the OpenAPI schema as the source of truth. Do not reshape or rename fields.
+5. **Create the module class** — extend `BaseModule`, implement each endpoint as a method. Use the correct HTTP verb and request options pattern from the standard.
+6. **Register in `MODULE_REGISTRY`** — add the module entry so it's auto-instantiated on the client.
+7. **Export types** from the service's barrel `index.ts`.
+8. **Verify** — check that the module compiles and the types are accessible from `@modrinth/api-client`.

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

@@ -0,0 +1,26 @@
+---
+name: cross-platform-pages
+description: Convert a page to the cross-platform page system so it works in both the website and the desktop app. Use when moving a page into packages/ui/src/layouts/, creating shared or wrapped layouts, or setting up DI contracts for platform abstraction.
+argument-hint: <path-to-page>
+---
+
+Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standards/frontend/DEPENDENCY_INJECTION.md
+
+## Steps
+
+1. **Read the target page** at `$ARGUMENTS` and understand its data sources, mutations, and navigation.
+2. **Read the standards above** to understand the shared vs wrapped distinction and the DI pattern.
+3. **Decide the category:**
+   - **Wrapped** (`layouts/wrapped/`) — if the page uses the same API source on both platforms (e.g. web requests, not Tauri plugins). Just move the page component into `packages/ui` and import it from both frontends.
+   - **Shared** (`layouts/shared/`) — if the page has different data-fetching logic per platform (e.g. website uses `api-client`, app uses Tauri `invoke`). Requires a DI contract.
+4. **For shared layouts:**
+   - Define a DI contract interface in `providers/` capturing all platform-specific operations.
+   - Create the layout component that injects the context and handles all UI logic.
+   - Extract reusable stateful logic (search, filtering, selection) into `composables/`.
+   - Implement the contract separately in each frontend (`apps/frontend/`, `apps/app-frontend/`).
+5. **For wrapped pages:**
+   - Move the page component into `packages/ui/src/layouts/wrapped/` matching the route structure.
+   - Replace any platform-specific imports with shared utilities.
+   - Import and render the wrapped page from both frontends as a simple component.
+   - If the layout uses TanStack Query for initial route paint with `ReadyTransition` / `useReadyState`, each platform route shell must call `ensureQueryData` for those queries with matching keys and fetchers — see **Platform route shells: prefetch with `ensureQueryData`** in `standards/frontend/CROSS_PLATFORM_PAGES.md`.
+6. **Verify** the page renders correctly by checking for missing imports and that all DI contracts are satisfied.

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

@@ -0,0 +1,22 @@
+---
+name: figma-mcp
+description: Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.
+argument-hint: <figma-url>
+---
+
+Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md
+Also read @packages/ui/CLAUDE.md for color token mapping and component conventions.
+
+## Steps
+
+1. **Parse the Figma URL** from `$ARGUMENTS` — extract the `fileKey` and `nodeId`. Convert `-` to `:` in the node ID.
+2. **Read the standards above** for the available tools, adaptation rules, and color usage.
+3. **Call `get_design_context`** with the extracted `nodeId` and `fileKey`, using `clientLanguages: "typescript,html,css"` and `clientFrameworks: "vue"`. This is always the first tool to call.
+5. **Adapt the output to the Modrinth codebase:**
+   - Map Figma color variables to `surface-*` / `text-*` tokens — never use Figma's aliased names directly.
+   - Check `packages/ui/src/components/` for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).
+   - Check `packages/assets/styles/variables.scss` for tokens not exposed in Figma.
+   - Match spacing values exactly from the design.
+6. **Use `get_screenshot`** if you need a closer visual reference of specific nodes.
+7. **Use `get_variable_defs`** to verify which design tokens are applied to ambiguous elements.
+8. **Build the component** as a Vue SFC using Tailwind classes and the project's existing component library.

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

@@ -0,0 +1,24 @@
+---
+name: i18n-pass
+description: Perform an i18n localization pass on changed files or a pull request, converting hard-coded English strings to the @modrinth/ui i18n system. Use when internationalizing a set of changes, reviewing a PR for untranslated strings, or converting a specific component.
+argument-hint: [file-path-or-pr-number]
+---
+
+Refer to the standard: @standards/frontend/INTERNATIONALIZATION.md
+
+## Steps
+
+1. **Identify the scope of changes:**
+   - If `$ARGUMENTS` is a PR number, run `gh pr diff $ARGUMENTS` to get the changed files.
+   - If `$ARGUMENTS` is a file path, use that directly.
+   - If no argument, check `git diff` for uncommitted changes.
+2. **Read the standard above** for the message definition pattern, ICU format rules, and `IntlFormatted` usage.
+3. **Filter to Vue SFCs** — only `.vue` files need i18n passes. Skip non-component files.
+4. **For each file, scan for hard-coded strings:**
+   - `<template>`: inner text, `alt`, `placeholder`, `aria-label`, button labels, tooltip text.
+   - `<script>`: string literals passed to user-visible UI (notification messages, dropdown labels, error messages).
+   - Skip: dynamic expressions, HTML tag names, CSS classes, internal identifiers, log messages.
+5. **Define messages** with `defineMessages` — use descriptive, stable `id`s based on the component's domain (e.g. `project.settings.title`).
+6. **Replace strings in templates** with `formatMessage()` calls, or `<IntlFormatted>` for strings containing links or markup.
+7. **Handle ICU edge cases** — add a space before `}}` if an ICU placeholder ends at a Vue template delimiter boundary.
+8. **Verify** no hard-coded English strings remain in the changed templates. Do not alter logic, layout, or reactivity.

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

@@ -0,0 +1,36 @@
+---
+name: review-changelog
+description: Review the latest changelog entry in packages/blog/changelog.ts against the project's changelog style guide and flag bullets that need rewriting. Use when checking a freshly added changelog entry before opening a PR, or when the user asks to review/lint the latest changelog.
+argument-hint: [product?]
+---
+
+Refer to the standard: @standards/maintaining/CHANGELOG.md
+
+## Steps
+
+1. **Locate the latest entry:**
+   - Open `packages/blog/changelog.ts`.
+   - The latest entries are at the top of the `VERSIONS` array.
+   - If `$ARGUMENTS` specifies a product (`web`, `hosting`, `app`), review the most recent entry for that product. Otherwise, review the most recent entry overall, plus any sibling entries sharing the same `date` (coordinated releases ship together).
+
+2. **Read the standard above** in full before reviewing. The bullet rules, section/verb agreement, and "Don't" list are the source of truth.
+
+3. **Check the entry shell:**
+   - `date` is a valid ISO 8601 timestamp.
+   - `product` is one of `web`, `hosting`, `app`.
+   - `version` is present for `app` entries and omitted for `web`/`hosting`.
+   - Section headings use `## Added`, `## Changed`, `## Fixed`, `## Security` (or a featured-release linked heading). Flag legacy `## Improvements`.
+
+4. **Review each bullet** against the standard. For each bullet, check:
+   - Voice/tense matches the section heading.
+   - Opening verb agrees with its section.
+   - Describes observable behavior, not implementation.
+   - Specific enough to identify the surface (names the tab/page/modal).
+   - One sentence, ends with a period, sentence case.
+   - Uses branded names (Modrinth App, Modrinth Hosting) correctly.
+   - No filler ("issue with", "issue where", "various", "some"), no vague intensifiers, no apologies, no PR/commit references (unless crediting a third-party contributor with a linked GitHub profile).
+   - Not a duplicate sub-fix of a bigger change already listed.
+
+5. **Report findings** as a short list grouped by entry. For each problem bullet, show the original line and a suggested rewrite. If the entry is clean, say so explicitly. Do not edit the file unless the user asks - this skill is a review pass, not a rewrite pass.
+
+6. **If the user then asks to apply fixes**, edit `packages/blog/changelog.ts` directly using the suggested rewrites. Preserve tab indentation and template literal formatting.

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

@@ -0,0 +1,27 @@
+---
+name: tanstack-query
+description: Convert a page or component from useAsyncData/manual ref patterns to TanStack Query for server state management. Use when migrating data fetching to useQuery/useMutation, adding cache invalidation, or replacing useAsyncData with TanStack Query.
+argument-hint: <path-to-file>
+---
+
+Refer to the standard: @standards/frontend/FETCHING_DATA.md
+
+## Steps
+
+1. **Read the target file** at `$ARGUMENTS` and identify all data-fetching patterns: `useAsyncData`, `useFetch`, manual `ref()` + `await`, or `onMounted` fetch calls.
+2. **Read the standard above** for the query/mutation patterns, query key conventions, and optimistic update approach.
+3. **Convert queries:**
+   - Replace `useAsyncData` / `useFetch` / manual fetches with `useQuery`.
+   - Use the `api-client` via `injectModrinthClient()` for the `queryFn`.
+   - Design query keys with the `['resource', 'version', ...params]` convention.
+   - Use `computed` query keys for reactive parameters.
+   - Use the `enabled` option for conditional queries that depend on other data.
+4. **Convert mutations:**
+   - Replace manual `try/catch` + `ref` patterns with `useMutation`.
+   - Add `onSuccess` handlers that invalidate or update related query caches.
+   - Consider optimistic updates for UI-critical mutations (follow the pattern in the standard).
+5. **Clean up:**
+   - Remove manual loading/error `ref()`s that are now handled by TanStack Query's return values (`isPending`, `isError`, `error`).
+   - Remove manual `onMounted` fetch calls.
+   - Ensure SSR compatibility — queries in Nuxt pages are automatically awaited during SSR.
+6. **Verify** the page still renders correctly and that cache invalidation triggers re-fetches where expected.

.github/ISSUE_TEMPLATE/3-hosting-bug.yml

@@ -1,6 +1,6 @@
-name: 👥 Bug with Modrinth Servers
-description: For issues with a Modrinth Servers product.
-labels: [servers]
+name: 👥 Bug with Modrinth Hosting
+description: For issues with a Modrinth Hosting product.
+labels: [hosting]
 type: 'bug'
 body:
   - type: checkboxes

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

@@ -9,8 +9,6 @@ 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:
@@ -19,7 +17,7 @@ body:
       options:
         - Modrinth App
         - Modrinth.com website
-        - Modrinth Servers
+        - Modrinth Hosting
         - Modrinth API for developers
   - type: textarea
     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/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+- Rich-text link tags: see `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

@@ -0,0 +1,171 @@
+# 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@v4
+      with:
+        fetch-depth: 0
+
+    - name: Extract PR Number and Commit ID
+      id: extract-pr-info
+      uses: actions/github-script@v7
+      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
+      run: |
+        echo "PR Branch: ${{ steps.get-pr-branch.outputs.prBranch }}"
+
+    - name: Check if PR branch contains the Merge Queue target commit ID
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        # Get the branch name from previous steps
+        branch_name="origin/${{ steps.get-pr-branch.outputs.prBranch }}"
+        commit_id="${{ steps.extract-pr-info.outputs.commitId }}"
+
+        # Check if the branch history contains the commit
+        if git branch -r --contains "$commit_id" | grep -q "$branch_name"; then
+          echo "Branch '$branch_name' contains commit '$commit_id'. It is up to date with ${{ steps.extract-pr-info.outputs.targetBranchName }}."
+        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
+      run: |
+        if git diff --quiet "origin/${{ steps.get-pr-branch.outputs.prBranch }}"; 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@v7
+      env:
+        SECRET: ${{ inputs.secret }}
+      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: "${{ steps.extract-pr-info.outputs.targetBranchName }}",
+          });
+          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/${{ steps.get-pr-branch.outputs.prBranch }}",
+          });
+
+          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

@@ -0,0 +1,125 @@
+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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        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@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        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

@@ -0,0 +1,22 @@
+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@85880fa0301c86cca9da44039ee3bb12d3bedbfa # 0.12.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

@@ -0,0 +1,121 @@
+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@d746ffe35508b1917358783b479e04febd2b8f71 # 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:
-      - master
+      - main
 
 env:
   CARGO_TERM_COLOR: always
@@ -12,14 +12,16 @@ jobs:
   typos:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: crate-ci/typos@master
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: crate-ci/typos@6ac2ebd1b93eade61faf7e12688ad87a073fea59 # v1.46.0
 
-  # broken: <https://github.com/SchemaStore/schemastore/issues/5108>
-  # tombi:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: tombi-toml/setup-tombi@v1
-  #     - run: tombi lint
-  #     - run: tombi fmt --check
+  # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
+  tombi:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9
+        with:
+          tool: tombi
+      - run: tombi lint
+      - run: tombi fmt --check

.github/workflows/check-rust.yml

@@ -2,7 +2,7 @@ on:
   pull_request:
   push:
     branches:
-      - master
+      - main
 
 env:
   CARGO_TERM_COLOR: always
@@ -12,8 +12,8 @@ jobs:
   shear:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: dtolnay/rust-toolchain@stable
-      - uses: cargo-bins/cargo-binstall@main
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: dtolnay/rust-toolchain@29eef336d9b2848a0b548edc03f92a220660cdb8 # stable
+      - uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
       - run: cargo binstall --no-confirm cargo-shear
       - run: cargo shear

.github/workflows/daedalus-docker.yml

@@ -3,33 +3,136 @@ 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:
-  docker:
+  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: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - 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: ⚙️ Generate Docker image metadata
-        id: docker_meta
-        uses: docker/metadata-action@v5
+      - 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' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    env:
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        with:
+          rustflags: ''
+          cache: false
+
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
+
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-daedalus-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - 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@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+
+      - name: Generate Docker image metadata
+        id: docker-meta
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         env:
           DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
         with:
@@ -43,20 +146,19 @@ jobs:
             org.opencontainers.image.description=Modrinth game metadata query client
             org.opencontainers.image.licenses=MIT
 
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      - name: Login to GitHub Packages
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         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 }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
-          cache-to: type=inline
+          tags: ${{ steps.docker-meta.outputs.tags }}
+          labels: ${{ steps.docker-meta.outputs.labels }}
+          annotations: ${{ steps.docker-meta.outputs.annotations }}

.github/workflows/daedalus-run.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.github/workflows/frontend-deploy.yml

@@ -0,0 +1,168 @@
+name: Deploy frontend
+
+on:
+  push:
+    branches:
+      - main
+      - prod
+    paths:
+      - 'apps/frontend/**/*'
+      - 'packages/ui/**/*'
+      - 'packages/utils/**/*'
+      - 'packages/assets/**/*'
+      - '**/wrangler.jsonc'
+      - '**/pnpm-*.yaml'
+      - '.github/workflows/frontend-deploy.yml'
+  workflow_dispatch:
+  workflow_call:
+    inputs:
+      environment:
+        required: true
+        type: string
+        description: 'The environment to deploy to (staging-preview or production-preview)'
+      head_sha:
+        required: false
+        type: string
+        description: 'The commit SHA to deploy (defaults to github.sha)'
+      head_ref:
+        required: false
+        type: string
+        description: 'The branch name to deploy (defaults to github.ref_name)'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
+jobs:
+  deploy:
+    runs-on: blacksmith-2vcpu-ubuntu-2404
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+
+      - name: Configure environment
+        id: meta
+        env:
+          ENV_INPUT: ${{ inputs.environment }}
+          REF: ${{ github.ref }}
+          DEPLOY_SHA: ${{ inputs.head_sha || github.sha }}
+        run: |
+          echo "cmd=deploy" >> $GITHUB_OUTPUT
+
+          SHA_SHORT="${DEPLOY_SHA::8}"
+
+          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=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
+            echo "url=https://staging.modrinth.com" >> $GITHUB_OUTPUT
+
+          else
+            # Production env (no preview)
+            echo "env=production" >> $GITHUB_OUTPUT
+            echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-cache-
+
+      - name: Inject build variables
+        working-directory: ./apps/frontend
+        run: |
+          if [ "${{ steps.meta.outputs.env }}" == "staging" ]; then
+            echo "Injecting staging variables from wrangler.jsonc..."
+            jq -r '.env.staging.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          else
+            echo "Injecting production variables from wrangler.jsonc..."
+            jq -r '.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          fi
+
+      - name: Install dependencies
+        working-directory: ./apps/frontend
+        run: pnpm install
+
+      - name: Build frontend
+        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_URL: ${{ steps.meta.outputs.url }}
+          BUILD_ENV: ${{ steps.meta.outputs.env }}
+          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Create Sentry release and upload sourcemaps
+        uses: getsentry/action-release@5657c9e888b4e2cc85f4d29143ea4131fde4a73a # v3.6.0
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: modrinth
+          SENTRY_PROJECT: knossos-server
+        with:
+          environment: ${{ steps.meta.outputs.env }}
+          sourcemaps: ./apps/frontend/.output/server
+          url_prefix: '~/'
+
+      - name: Deploy Cloudflare Worker
+        id: wrangler
+        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.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
+          packageManager: pnpm
+          wranglerVersion: '4.54.0'
+          command: ${{ steps.meta.outputs.cmd }}
+
+      - name: Purge cache
+        if: github.ref == 'refs/heads/prod'
+        run: |
+          curl -X POST \
+            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
+            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
+
+      - name: Write deployment URL to file
+        if: ${{ inputs.environment != '' }}
+        run: |
+          echo "${{ steps.meta.outputs.url }}" > deployment-url-${{ inputs.environment }}.txt
+
+      - name: Upload deployment URL
+        if: ${{ inputs.environment != '' }}
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: deployment-url-${{ inputs.environment }}
+          path: deployment-url-${{ inputs.environment }}.txt

.github/workflows/frontend-pages.yml

@@ -1,30 +0,0 @@
-name: Clear pages cache
-
-on:
-  push:
-    branches:
-      - prod
-
-jobs:
-  wait:
-    if: github.repository_owner == 'modrinth'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      deployments: write
-    steps:
-      - name: Cloudflare Pages deployment
-        uses: WalshyDev/cf-pages-await@v1
-        with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          accountId: '9ddae624c98677d68d93df6e524a6061'
-          project: 'frontend'
-          commitHash: ${{ steps.push-changes.outputs.commit-hash }}
-      - name: Purge cache
-        if: github.ref == 'refs/heads/prod'
-        run: |
-          curl -X POST \
-            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
-            -H "Content-Type: application/json" \
-            --data '{"hosts": ["modrinth.com", "www.modrinth.com"]}' \
-            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache

.github/workflows/frontend-preview.yml

@@ -0,0 +1,139 @@
+name: Deploy frontend preview
+
+on:
+  pull_request:
+    paths:
+      - 'apps/frontend/**/*'
+      - 'packages/ui/**/*'
+      - 'packages/utils/**/*'
+      - 'packages/assets/**/*'
+      - '**/wrangler.jsonc'
+      - '**/pnpm-*.yaml'
+      - '.github/workflows/frontend-preview.yml'
+
+jobs:
+  deploy:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    uses: ./.github/workflows/frontend-deploy.yml
+    secrets: inherit
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.environment }}
+      cancel-in-progress: true
+    strategy:
+      matrix:
+        environment: [staging-preview, production-preview]
+    with:
+      environment: ${{ matrix.environment }}
+      head_sha: ${{ github.event.pull_request.head.sha }}
+      head_ref: ${{ github.event.pull_request.head.ref }}
+
+  deploy-storybook:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: blacksmith-2vcpu-ubuntu-2404
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}-storybook
+      cancel-in-progress: true
+    permissions:
+      contents: read
+      deployments: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        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
+        working-directory: ./packages/ui
+        run: pnpm install
+
+      - name: Build Storybook
+        working-directory: ./packages/ui
+        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: Deploy Storybook preview
+        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          workingDirectory: ./packages/ui
+          packageManager: pnpm
+          wranglerVersion: '4.54.0'
+          command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
+
+  comment:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    needs: [deploy, deploy-storybook]
+    steps:
+      - name: Download deployment URLs
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          pattern: deployment-url-*
+          merge-multiple: true
+
+      - name: Read deployment URLs
+        id: urls
+        env:
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+        run: |
+          STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
+          PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
+
+          echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
+          echo "Staging preview URL: $STAGING_PREVIEW_URL"
+
+          echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "storybook-preview-url=https://git-${HEAD_SHA::8}-storybook.modrinth.workers.dev" >> $GITHUB_OUTPUT
+
+      - name: Find comment
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+        id: fc
+        with:
+          token: ${{ secrets.CROWDIN_GH_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          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
+        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 }})
+
+            | Environment | URL |
+            |-------------|-----|
+            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
+            | production  | ${{ steps.urls.outputs.production-preview-url }} |
+            | storybook   | ${{ steps.urls.outputs.storybook-preview-url }} |
+          edit-mode: replace

.github/workflows/i18n-pull.yml

@@ -51,14 +51,25 @@ jobs:
           CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.ref }}
           token: ${{ secrets.CROWDIN_GH_TOKEN }}
 
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install script dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+
       - name: Configure Git author
         id: git-author
-        uses: MarcoIeni/git-config@v0.1
+        uses: MarcoIeni/git-config@59144859caf016f8b817a2ac9b051578729173c4 # v0.1.2
         env:
           GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}
 
@@ -79,7 +90,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Download translations from Crowdin
-        uses: crowdin/github-action@v2
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: false
           upload_translations: false
@@ -95,8 +106,11 @@ 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@v7
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         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,11 +4,14 @@ 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:
 
@@ -53,9 +56,21 @@ jobs:
           CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.ref }}
+          fetch-depth: 2
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install script dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
 
       - name: Query branch name
         id: branch-name
@@ -68,7 +83,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Upload translations to Crowdin
-        uses: crowdin/github-action@v1
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: true
           upload_translations: false
@@ -79,3 +94,9 @@ jobs:
         env:
           CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
           CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+      - name: Clear stale ICU translations in Crowdin
+        run: pnpm scripts i18n-icu-contract clear-crowdin-changed --base-ref HEAD^ --crowdin-branch "[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}"
+        env:
+          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/labrinth-docker.yml

@@ -3,7 +3,7 @@ name: docker-build
 on:
   push:
     branches:
-      - '**'
+      - 'main'
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
@@ -19,19 +19,128 @@ 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:
-  docker:
+  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: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - 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: ⚙️ Generate Docker image metadata
-        id: docker_meta
-        uses: docker/metadata-action@v5
+      - 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' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    env:
+      SQLX_OFFLINE: 'true'
+      GIT_HASH: ${{ github.sha }}
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        with:
+          rustflags: ''
+          cache: false
+
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
+
+      - name: Install build dependencies
+        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        with:
+          packages: cmake libcurl4-openssl-dev
+          version: v2 # cache key
+
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-labrinth-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - 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: Set up Docker Buildx
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+
+      - name: Generate Docker image metadata
+        id: docker-meta
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         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
@@ -49,22 +158,19 @@ jobs:
             org.opencontainers.image.description=Modrinth API
             org.opencontainers.image.licenses=AGPL-3.0-only
 
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      - name: Login to GitHub Packages
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
+          context: ./apps/labrinth/docker-stage
           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
+          push: true
+          tags: ${{ steps.docker-meta.outputs.tags }}
+          labels: ${{ steps.docker-meta.outputs.labels }}
+          annotations: ${{ steps.docker-meta.outputs.annotations }}

.github/workflows/prepare-pnpm-cache.yml

@@ -0,0 +1,41 @@
+name: Prepare pnpm cache
+
+on:
+  push:
+    paths:
+      - .github/workflows/prepare-pnpm-cache.yml
+      - package.json
+      - pnpm-lock.yaml
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
+jobs:
+  prepare:
+    if: github.repository_owner == 'modrinth'
+    runs-on: blacksmith-2vcpu-ubuntu-2404
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: .nvmrc
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: pnpm recursive install --frozen-lockfile

.github/workflows/theseus-build.yml

@@ -19,81 +19,142 @@ on:
       sign-windows-binaries:
         description: Sign Windows binaries
         type: boolean
-        default: true
+        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
+      # SCCACHE_DIR: '/mnt/sccache'
+      # SCCACHE_CACHE_SIZE: '10G'
+      # SCCACHE_MULTILEVEL_CHAIN: 'disk,s3'
+      SCCACHE_S3_KEY_PREFIX: '${{ github.repository }}/'
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: 'sccache'
     strategy:
       fail-fast: false
       matrix:
-        platform: [macos-latest, windows-latest, ubuntu-latest]
+        platform: [
+            blacksmith-6vcpu-macos-26,
+            blacksmith-8vcpu-windows-2025, # At time of writing, Windows 4 vCPU VMs don't seem to actually exist
+            blacksmith-4vcpu-ubuntu-2404,
+          ]
         include:
-          - platform: macos-latest
+          - platform: blacksmith-6vcpu-macos-26
             artifact-target-name: universal-apple-darwin
-          - platform: windows-latest
+          - platform: blacksmith-8vcpu-windows-2025
             artifact-target-name: x86_64-pc-windows-msvc
-          - platform: ubuntu-latest
+          - platform: blacksmith-4vcpu-ubuntu-2404
             artifact-target-name: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
-      - name: 🧰 Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
         with:
           rustflags: ''
-          target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: 🧰 Install pnpm
-        uses: pnpm/action-setup@v4
+      - name: Setup mold
+        if: contains(matrix.platform, 'ubuntu')
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
 
-      - name: 🧰 Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup sccache
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: .nvmrc
-          cache: pnpm
+          cache: 'pnpm'
 
-      - name: 🧰 Install Linux build dependencies
-        if: startsWith(matrix.platform, 'ubuntu')
+      - name: Generate tauri-dev.conf.json
+        shell: bash
         run: |
-          sudo apt-get update
-          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          GIT_HASH=$(git rev-parse --short HEAD)
+          cat > apps/app/tauri-dev.conf.json <<EOF
+          {
+            "productName": "Modrinth App (dev-${GIT_HASH})",
+            "mainBinaryName": "Modrinth App (dev-${GIT_HASH})",
+            "identifier": "ModrinthApp-dev-${GIT_HASH}",
+            "bundle": {
+              "fileAssociations": []
+            }
+          }
+          EOF
 
-      - name: 🧰 Setup Dasel
-        uses: jaxxstorm/action-install-gh-release@v2.1.0
+      - name: Install Linux build dependencies
+        if: contains(matrix.platform, 'ubuntu')
+        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        with:
+          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          version: v1 # cache key
+
+      - name: Setup Dasel
+        uses: jaxxstorm/action-install-gh-release@25e24d2d23ae098373794ef1d6faecb48ee52da8 # v3.0.0
         with:
           repo: TomWright/dasel
           tag: v2.8.1
           extension-matching: disable
-          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
+          rename-to: ${{ contains(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
-      - name: ⚙️ Set application version and environment
+      - name: Set application version and environment
         shell: bash
         run: |
-          APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
+          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' }}"
           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.prod packages/app-lib/.env
+          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
 
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
+      - name: Setup Turbo cache
+        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
 
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: pnpm install
 
-      - name: ✍️ Set up Windows code signing
-        if: startsWith(matrix.platform, 'windows')
+      - name: Set up Windows code signing
+        if: contains(matrix.platform, 'windows')
         shell: bash
         run: |
           if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
@@ -102,10 +163,11 @@ jobs:
             dasel delete -f apps/app/tauri-release.conf.json 'bundle.windows.signCommand'
           fi
 
-      - name: 🔨 Build macOS app
-        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'macos')
+      - 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.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 }}
@@ -116,21 +178,21 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
-      - name: 🔨 Build Linux app
-        run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'ubuntu')
+      - 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.platform, 'ubuntu')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
-      - name: 🔨 Build Windows app
+      - name: Build Windows app
         run: |
           [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"
-          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
+          ${{ (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"' }}
           Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: startsWith(matrix.platform, 'windows')
+        if: contains(matrix.platform, 'windows')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -138,15 +200,21 @@ jobs:
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
 
-      - name: 📤 Upload app bundles
-        uses: actions/upload-artifact@v4
+      - name: Upload app bundles
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: App bundle (${{ matrix.artifact-target-name }})
           path: |
             target/release/bundle/appimage/Modrinth App_*.AppImage*
             target/release/bundle/deb/Modrinth App_*.deb*
             target/release/bundle/rpm/Modrinth App-*.rpm*
+            target/release/bundle/appimage/Modrinth App (dev-*)_*.AppImage*
+            target/release/bundle/deb/Modrinth App (dev-*)_*.deb*
+            target/release/bundle/rpm/Modrinth App (dev-*)-*.rpm*
             target/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz*
+            target/universal-apple-darwin/release/bundle/macos/Modrinth App (dev-*)*.app.tar.gz
+            target/universal-apple-darwin/release/bundle/dmg/Modrinth App (dev-*)*.dmg
             target/universal-apple-darwin/release/bundle/dmg/Modrinth App_*.dmg*
             target/release/bundle/nsis/Modrinth App_*-setup.exe*
+            target/release/bundle/nsis/Modrinth App (dev-*)_*-setup.exe*
             target/release/bundle/nsis/Modrinth App_*-setup.nsis.zip*

.github/workflows/theseus-release.yml

@@ -1,47 +1,74 @@
 name: Modrinth App release
 on:
-  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
+  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' }}
 
 jobs:
   release:
     name: Release Modrinth App
-    runs-on: ubuntu-latest
-
+    if: >-
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'push' &&
+      startsWith(github.event.workflow_run.head_branch, 'v')
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     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: 📥 Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@v11
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - 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
         with:
           workflow: theseus-build.yml
           workflow_conclusion: success
           event: push
-          branch: ${{ inputs.version-tag }}
+          branch: ${{ env.VERSION_TAG }}
           use_unzip: true
 
-      - name: 🛠️ Generate version manifest
+      - name: Extract app changelog
         env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          RELEASE_NOTES: ${{ inputs.release-notes }}
+          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
         run: |
           # Reference: https://tauri.app/plugin/updater/#server-support
           jq -nc \
             --arg versionTag "${VERSION_TAG#v}" \
-            --arg releaseNotes "$RELEASE_NOTES" \
+            --rawfile releaseNotes release-notes.md \
             --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" \
@@ -81,9 +108,8 @@ 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 }}
@@ -116,3 +142,18 @@ 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,10 +8,63 @@ 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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - 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: ubuntu-latest
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
 
     env:
       # Ensure pnpm output is colored in GitHub Actions logs
@@ -23,59 +76,110 @@ jobs:
       # since we don't want warnings to become errors
       # while developing)
       RUSTFLAGS: -Dwarnings
+      # sccache config (only populated for internal branches; secrets aren't
+      # available to forked PRs, and blacksmith stickydisk requires a
+      # blacksmith runner)
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
 
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 2
 
-      - name: 🧰 Install build dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+      - name: Install build dependencies
+        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        with:
+          packages: cmake libcurl4-openssl-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          version: v2 # cache key
 
-      - name: 🧰 Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: 🧰 Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: .nvmrc
-          cache: pnpm
 
-      - name: 🧰 Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-cache-
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
         with:
           rustflags: ''
           components: clippy, rustfmt
           cache: false
 
-      - name: 🧰 Setup nextest
-        uses: taiki-e/install-action@nextest
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
+
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae #v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-turbo-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - name: Setup binstall
+        uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
+
+      - name: Setup nextest
+        run: cargo binstall --no-confirm --secure --locked cargo-nextest@0.9.133
 
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
-      - name: 🧰 Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@v2
+      - name: Setup cargo-sqlx
+        uses: taiki-e/cache-cargo-install-action@f9eed3e4680f27610dc6d8c67be1b88593f7dade # v3.0.6
         with:
-          tool: sqlx-cli
+          tool: sqlx-cli@0.8.6
           locked: false
           no-default-features: true
           features: rustls,postgres
 
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
+      - name: Setup Turbo cache
+        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
 
-      - name: 🧰 Install dependencies
+      - 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')
@@ -86,21 +190,22 @@ 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 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
-          git diff --exit-code --color */*/src/locales/en-US/index.json
+          pnpm scripts i18n-icu-contract prune-local --check
+          git diff --exit-code --color */*/src/locales/*/index.json

.gitignore

@@ -22,6 +22,7 @@ node_modules
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/i18n-ally-custom-framework.yml
 
 # IDE - IntelliJ
 .idea/*
@@ -64,10 +65,25 @@ generated
 app-playground-data/*
 
 .astro
-.claude
+.claude/*
+!.claude/skills/
+.letta
 
 # labrinth demo fixtures
 apps/labrinth/fixtures/demo
 
 *storybook.log
 storybook-static
+
+.wrangler/
+
+# 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

.idea/code.iml

@@ -12,6 +12,11 @@
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/path-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-log/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/examples" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/muralpay/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />

.npmrc

@@ -1,2 +1,11 @@
 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 @@
-20.19.2
+24.15.0

.vscode/extensions.json

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

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

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

.vscode/settings.json

@@ -9,25 +9,37 @@
 	"files.insertFinalNewline": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "always"
+		"source.organizeImports": "never"
 	},
-	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[javascript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[scss]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[css]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[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

@@ -0,0 +1 @@
+CLAUDE.md

CLAUDE.md

@@ -1,63 +1,110 @@
-# Architecture
+# Modrinth Monorepo
 
-Use TAB instead of spaces.
+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 it's CLAUDE.md.
 
-## Frontend
+## Architecture
 
-There are two similar frontends in the Modrinth monorepo, the website (apps/frontend) and the app frontend (apps/app-frontend).
+- **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
 
-Both use Tailwind v3, and their respective configs can be seen at `tailwind.config.ts` and `tailwind.config.js` respectively.
+### Apps (`apps/`)
 
-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`.
+| 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)     |
 
-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`.
+### Packages (`packages/`)
 
-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.
+| 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                                    |
 
-### Website (apps/frontend)
+## Pre-PR Commands
 
-Before a pull request can be opened for the website, run `pnpm prepr:frontend:web` from the root folder, otherwise CI will fail.
+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.
 
-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.
+- **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`
 
-### App Frontend (apps/app-frontend)
+The website and app `prepr` commands
 
-Before a pull request can be opened for the app frontend, run `pnpm prepr:frontend:app` from the root folder, otherwise CI will fail.
+## Dev Commands
 
-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.
+- **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`
 
-### Localization
+## Project-Specific Instructions
 
-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.
+Each project may have its own file with detailed instructions:
 
-## Labrinth
+- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
+- [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
-Labrinth is the backend API service for Modrinth.
+## Code Guidelines
 
-### Testing
+### 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!
 
-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.
+## Bash Guidelines
 
-Use `cargo test -p labrinth --all-targets` to test your changes. All tests must pass, otherwise CI will fail.
+### 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
 
-To prepare the sqlx cache, cd into `apps/labrinth` and run `cargo sqlx prepare`. Make sure to NEVER run `cargo sqlx prepare --workspace`.
+### 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.
 
-Read the root `docker-compose.yml` to see what running services are available while developing. Use `docker exec` to access these services.
+## Edit Tool - Whitespace Handling (CLAUDE ONLY)
 
-When the user refers to "performing pre-PR checks", do the following:
+The Read tool uses `→` to mark where line numbers end and file content begins.
 
-- Run clippy as described above
-- DO NOT run tests unless explicitly requested (they take a long time)
-- Prepare the sqlx cache
+**Rule:** Copy the EXACT whitespace that appears after the `→` marker.
+- Whatever appears between `→` and the code text is what's actually in the file
+- That whitespace must be used EXACTLY in Edit tool's old_string
+- Don't count arrows, don't interpret - just copy what's after the `→`
 
-### Clickhouse
+**Example:**
+14→		private byte tag;
+For Edit, use: `		private byte tag;` (copy everything after →, including the two tabs)
 
-Use `docker exec labrinth-clickhouse clickhouse-client` to access the Clickhouse instance. We use the `staging_ariadne` database to store data in testing.
+**If Edit fails:** Stop and explain the problem. Do not attempt sed/awk/bash workarounds.
 
-### Postgres
+**IMPORTANT**: Trust the Read tool output. Copy what's after `→` into Edit immediately. DO NOT verify with sed/od/grep first - that's wasting time and the instructions already tell you to stop if Edit fails, not to pre-verify.
 
-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.
+## Standards
 
-# Guidelines
-
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to.
+Standards available at the @standards/ folder.

Cargo.toml

@@ -8,6 +8,8 @@ members = [
   "packages/app-lib",
   "packages/ariadne",
   "packages/daedalus",
+  "packages/labrinth-derive",
+  "packages/modrinth-content-management",
   "packages/modrinth-log",
   "packages/modrinth-maxmind",
   "packages/modrinth-util",
@@ -31,7 +33,7 @@ actix-ws = "0.3.0"
 arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
-async-compression = { version = "0.4.32", default-features = false }
+async-minecraft-ping = { path = "packages/async-minecraft-ping" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
   "runtime-tokio-hyper-rustls",
@@ -42,6 +44,11 @@ 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"
 bytemuck = "1.24.0"
@@ -49,7 +56,7 @@ bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.42"
-cidre = { version = "0.11.3", default-features = false, features = [
+cidre = { version = "0.15.0", default-features = false, features = [
   "macos_15_0"
 ] }
 clap = "4.5.48"
@@ -57,11 +64,14 @@ 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 = "0.22.0"
-derive_more = "2.0.1"
+deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
+derive_more = "2.1.1"
 directories = "6.0.0"
 dirs = "6.0.0"
 discord-rich-presence = "1.0.0"
@@ -75,6 +85,7 @@ 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"
 heck = "0.5.0"
 hex = "0.4.3"
@@ -108,6 +119,7 @@ lettre = { version = "0.11.19", default-features = false, features = [
 ] }
 maxminddb = "0.26.0"
 meilisearch-sdk = { version = "0.30.0", default-features = false }
+modrinth-content-management = { path = "packages/modrinth-content-management" }
 modrinth-log = { path = "packages/modrinth-log" }
 modrinth-util = { path = "packages/modrinth-util" }
 muralpay = { path = "packages/muralpay" }
@@ -115,16 +127,21 @@ murmur2 = "0.1.0"
 native-dialog = "0.9.2"
 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"
+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 = "0.32.7"
 regex = "1.12.2"
 reqwest = { version = "0.12.24", default-features = false }
@@ -150,7 +167,6 @@ sentry = { version = "0.45.0", default-features = false, features = [
   "reqwest",
   "rustls",
 ] }
-sentry-actix = "0.45.0"
 serde = "1.0.228"
 serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
@@ -164,18 +180,21 @@ sha2 = "0.10.9"
 shlex = "1.3.0"
 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-http = "2.5.2"
+tauri-plugin-fs = "2.4.5"
+tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
 tauri-plugin-single-instance = "2.3.4"
-tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
+tauri-plugin-updater = { git = "https://github.com/modrinth/plugins-workspace", rev = "0d30f2aa28ec668ce187d527da1c475da3c01cbc", default-features = false, features = [
   "rustls-tls",
   "zip",
 ] }
@@ -199,9 +218,11 @@ 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"] }
+utoipa-scalar = { version = "0.3.0", default-features = false }
 uuid = "1.18.1"
 validator = "0.20.0"
+webauthn-rs = "0.5.5"
+webauthn-rs-proto = "0.5.5"
 webp = { version = "0.3.1", default-features = false }
 webview2-com = "0.38.0"  # Should be updated in lockstep with wry
 whoami = "1.6.1"
@@ -239,7 +260,7 @@ manual_assert = "warn"
 manual_instant_elapsed = "warn"
 manual_is_variant_and = "warn"
 manual_let_else = "warn"
-map_unwrap_or = "warn"
+map_unwrap_or = "allow"
 match_bool = "warn"
 needless_collect = "warn"
 negative_feature_names = "warn"
@@ -249,8 +270,10 @@ 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"
@@ -264,9 +287,11 @@ 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

@@ -15,10 +15,10 @@ If you're not a developer and you've stumbled upon this repository, you can acce
 
 ## Development
 
-This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
+This repository contains two primary packages. For detailed development information, please refer to their respective guides:
 
-- [Web Interface](apps/frontend/README.md)
-- [Desktop App](apps/app/README.md)
+- [Website frontend](https://docs.modrinth.com/contributing/knossos/)
+- [Desktop app](https://docs.modrinth.com/contributing/theseus/)
 
 ## Contributing
 

_typos.toml

@@ -17,3 +17,7 @@ extend-exclude = [
 tou = "tou"
 # Google Ad Manager
 gam = "gam"
+# short for "constants"
+consts = "consts"
+# short for "Copy"
+Cpy = "Cpy"

apps/app-frontend/package.json

@@ -10,6 +10,7 @@
 		"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": {
@@ -19,29 +20,32 @@
 		"@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-http": "^2.5.0",
+		"@tauri-apps/plugin-fs": "^2.4.5",
+		"@tauri-apps/plugin-http": "~2.5.7",
 		"@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-multiselect": "3.0.0",
+		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8"
+		"vue-virtual-scroller": "v2.0.0-beta.8",
+		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",
@@ -58,7 +62,7 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^6.0.0",
+		"vite": "^8.0.0",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},

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

@@ -45,6 +45,14 @@
 	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 {
@@ -77,16 +85,10 @@ body {
 }
 
 a {
-	color: var(--color-link);
+	color: inherit;
 	text-decoration: none;
-
-	&:hover {
-		text-decoration: none;
-	}
-}
-
-input {
-	border: none !important;
+	-webkit-font-smoothing: antialiased;
+	will-change: filter;
 }
 
 .badge {
@@ -159,4 +161,75 @@ 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

@@ -8,21 +8,29 @@ import {
 	SearchIcon,
 	StopCircleIcon,
 	TrashIcon,
-	XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
+import {
+	Accordion,
+	DropdownSelect,
+	formatLoader,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { duplicate, remove } from '@/helpers/profile.js'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import { install_duplicate_instance } from '@/helpers/install'
+import { remove } from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
 
+const { formatMessage } = useVIntl()
+
 const props = defineProps({
 	instances: {
 		type: Array,
@@ -41,21 +49,21 @@ const instanceComponents = ref(null)
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
-async function deleteProfile() {
+async function deleteInstance() {
 	if (currentDeleteInstance.value) {
 		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.path !== currentDeleteInstance.value,
+			(x) => x.instance.id !== currentDeleteInstance.value,
 		)
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }
 
-async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+async function duplicateInstance(p) {
+	await install_duplicate_instance(p).catch(handleError)
 }
 
-const handleRightClick = (event, profilePathId) => {
-	const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+const handleRightClick = (event, instanceId) => {
+	const item = instanceComponents.value.find((x) => x.instance.id === instanceId)
 	const baseOptions = [
 		{ name: 'add_content' },
 		{ type: 'divider' },
@@ -107,16 +115,16 @@ const handleOptionsClick = async (args) => {
 			break
 		case 'duplicate':
 			if (args.item.instance.install_stage == 'installed')
-				await duplicateProfile(args.item.instance.path)
+				await duplicateInstance(args.item.instance.id)
 			break
 		case 'open':
 			await args.item.openFolder()
 			break
 		case 'copy':
-			await navigator.clipboard.writeText(args.item.instance.path)
+			await navigator.clipboard.writeText(args.item.instance.id)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.instance.path
+			currentDeleteInstance.value = args.item.instance.id
 			confirmModal.value.show()
 			break
 	}
@@ -127,12 +135,33 @@ 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
@@ -175,7 +204,7 @@ const filteredResults = computed(() => {
 
 	if (group === 'Loader') {
 		instances.forEach((instance) => {
-			const loader = formatCategoryHeader(instance.loader)
+			const loader = formatLoader(formatMessage, instance.loader)
 			if (!instanceMap.has(loader)) {
 				instanceMap.set(loader, [])
 			}
@@ -243,13 +272,14 @@ const filteredResults = computed(() => {
 </script>
 <template>
 	<div class="flex gap-2">
-		<div class="iconified-input flex-1">
-			<SearchIcon />
-			<input v-model="search" type="text" placeholder="Search" />
-			<Button class="r-btn" @click="() => (search = '')">
-				<XIcon />
-			</Button>
-		</div>
+		<StyledInput
+			v-model="search"
+			:icon="SearchIcon"
+			type="text"
+			placeholder="Search"
+			clearable
+			wrapper-class="flex-1"
+		/>
 		<DropdownSelect
 			v-slot="{ selected }"
 			v-model="state.sortBy"
@@ -273,36 +303,32 @@ const filteredResults = computed(() => {
 			<span class="font-semibold text-secondary">{{ selected }}</span>
 		</DropdownSelect>
 	</div>
-	<div
+	<Accordion
 		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)"
 	>
-		<div v-if="instanceSection.key !== 'None'" class="divider">
-			<p>{{ instanceSection.key }}</p>
-			<hr aria-hidden="true" />
-		</div>
+		<template v-if="instanceSection.key !== 'None'" #title>
+			<span class="text-base">{{ instanceSection.key }}</span>
+		</template>
 		<section class="instances">
 			<Instance
 				v-for="instance in instanceSection.value"
 				ref="instanceComponents"
-				:key="instance.path + instance.install_stage"
+				:key="instance.id + instance.install_stage"
 				:instance="instance"
-				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.id)"
 			/>
 		</section>
-	</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"
-	/>
+	</Accordion>
+	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteInstance" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
 		<template #stop> <StopCircleIcon /> Stop </template>
@@ -316,73 +342,7 @@ 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

@@ -1,142 +0,0 @@
-<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

@@ -18,16 +18,18 @@ import { useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
+import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-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 { 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 { handleSevereError } from '@/store/error.js'
-import { install as installVersion } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
+const { install: installVersion } = injectContentInstall()
 
 const router = useRouter()
 
@@ -59,14 +61,14 @@ const deleteConfirmModal = ref(null)
 
 const currentDeleteInstance = ref(null)
 
-async function deleteProfile() {
+async function deleteInstance() {
 	if (currentDeleteInstance.value) {
 		await remove(currentDeleteInstance.value).catch(handleError)
 	}
 }
 
-async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+async function duplicateInstance(p) {
+	await install_duplicate_instance(p).catch(handleError)
 }
 
 const handleInstanceRightClick = async (event, passedInstance) => {
@@ -84,7 +86,7 @@ const handleInstanceRightClick = async (event, passedInstance) => {
 		},
 	]
 
-	const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
+	const runningProcesses = await get_by_instance_id(passedInstance.id).catch(handleError)
 
 	const options =
 		runningProcesses.length > 0
@@ -125,16 +127,14 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
 	switch (args.option) {
 		case 'play':
-			await run(args.item.path).catch((err) =>
-				handleSevereError(err, { profilePath: args.item.path }),
-			)
+			await run(args.item.id).catch((err) => handleSevereError(err, { instanceId: args.item.id }))
 			trackEvent('InstanceStart', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
 			})
 			break
 		case 'stop':
-			await kill(args.item.path).catch(handleError)
+			await kill(args.item.id).catch(handleError)
 			trackEvent('InstanceStop', {
 				loader: args.item.loader,
 				game_version: args.item.game_version,
@@ -143,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.path },
+				query: { i: args.item.id },
 			})
 			break
 		case 'edit':
 			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.path)}/`,
+				path: `/instance/${encodeURIComponent(args.item.id)}`,
 			})
 			break
 		case 'duplicate':
-			if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+			if (args.item.install_stage == 'installed') await duplicateInstance(args.item.id)
 			break
 		case 'delete':
-			currentDeleteInstance.value = args.item.path
+			currentDeleteInstance.value = args.item.id
 			deleteConfirmModal.value.show()
 			break
 		case 'open_folder':
-			await showProfileInFolder(args.item.path)
+			await showInstanceInFolder(args.item.id)
 			break
 		case 'copy_path':
-			await navigator.clipboard.writeText(args.item.path)
+			await navigator.clipboard.writeText(args.item.id)
 			break
 		case 'install': {
 			await installVersion(
@@ -238,14 +238,7 @@ onUnmounted(() => {
 </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 removed. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		@proceed="deleteProfile"
-	/>
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteInstance" />
 	<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">
@@ -262,7 +255,7 @@ onUnmounted(() => {
 						0,
 						row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
 					)"
-					:key="row.label + instance.path"
+					:key="row.label + instance.id"
 					:instance="instance"
 					:compact="row.compact"
 					:first="instanceIndex === 0"
@@ -270,7 +263,7 @@ onUnmounted(() => {
 				/>
 			</section>
 			<section v-else ref="modsRow" class="projects">
-				<ProjectCard
+				<LegacyProjectCard
 					v-for="project in row.instances.slice(0, maxProjectsPerRow)"
 					:key="project?.project_id"
 					ref="instanceComponents"

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

@@ -1,81 +1,107 @@
 <template>
 	<div
-		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"
+		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"
 	>
-		<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" />
+		<span>{{ formatMessage(messages.notSignedIn) }}</span>
+		<ButtonStyled color="brand">
+			<button color="primary" :disabled="loginDisabled" @click="login()">
+				<LogInIcon v-if="!loginDisabled" />
+				<SpinnerIcon v-else class="animate-spin" />
+				{{ formatMessage(messages.signInToMinecraft) }}
+			</button>
+		</ButtonStyled>
 	</div>
-	<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>
-				<Button
-					v-tooltip="'Log out'"
-					icon-only
-					color="raised"
-					@click="logout(selectedAccount.profile.id)"
-				>
-					<TrashIcon />
-				</Button>
-			</div>
-			<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>
+	<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>
 				</div>
 			</div>
-			<Button v-if="accounts.length > 0" @click="login()">
-				<PlusIcon />
-				Add account
-			</Button>
-		</Card>
-	</transition>
+		</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>
+					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+						<button
+							v-tooltip="formatMessage(messages.removeAccount)"
+							class="mr-2"
+							@click="logout(account.profile.id)"
+						>
+							<TrashIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+			</template>
+			<div class="flex flex-col gap-2 px-2 pt-2">
+				<ButtonStyled v-if="accounts.length > 0" class="w-full">
+					<button :disabled="loginDisabled" @click="login()">
+						<PlusIcon />
+						{{ formatMessage(messages.addAccount) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</Accordion>
 </template>
 
-<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'
+<script setup lang="ts">
+import {
+	LogInIcon,
+	PlusIcon,
+	RadioButtonCheckedIcon,
+	RadioButtonIcon,
+	SpinnerIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import type { Ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import {
@@ -87,39 +113,47 @@ 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()
 
-defineProps({
-	mode: {
-		type: String,
-		required: true,
-		default: 'normal',
-	},
-})
+const emit = defineEmits<{
+	change: []
+}>()
 
-const emit = defineEmits(['change'])
+type MinecraftCredential = {
+	profile: {
+		id: string
+		name: string
+	}
+}
 
-const accounts = ref({})
+const accounts: Ref<MinecraftCredential[]> = ref([])
 const loginDisabled = ref(false)
-const defaultUser = ref()
-const equippedSkin = ref(null)
-const headUrlCache = ref(new Map())
+const defaultUser = ref<string | undefined>()
+const equippedSkin = ref<Skin | null>(null)
+const headUrlCache = ref(new Map<string, string>())
 
 async function refreshValues() {
 	defaultUser.value = await get_default_user().catch(handleError)
-	accounts.value = await users().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 ?? ''))
 
 	try {
 		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped)
+		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
 
 		if (equippedSkin.value) {
 			try {
 				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-				headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
+				headUrlCache.value = new Map(headUrlCache.value).set(
+					equippedSkin.value.texture_key,
+					headUrl,
+				)
 			} catch (error) {
 				console.warn('Failed to get head render for equipped skin:', error)
 			}
@@ -129,19 +163,32 @@ async function refreshValues() {
 	}
 }
 
-function setLoginDisabled(value) {
+async function setEquippedSkin(skin: Skin) {
+	equippedSkin.value = skin
+
+	try {
+		const headUrl = await getPlayerHeadUrl(skin)
+		headUrlCache.value = new Map(headUrlCache.value).set(skin.texture_key, headUrl)
+	} catch (error) {
+		console.warn('Failed to get head render for equipped skin:', error)
+	}
+}
+
+function setLoginDisabled(value: boolean) {
 	loginDisabled.value = value
 }
 
 defineExpose({
 	refreshValues,
+	setEquippedSkin,
 	setLoginDisabled,
 	loginDisabled,
 })
+
 await refreshValues()
 
-const displayAccounts = computed(() =>
-	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
+const selectedAccount = computed(() =>
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
 )
 
 const avatarUrl = computed(() => {
@@ -158,7 +205,7 @@ const avatarUrl = computed(() => {
 	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })
 
-function getAccountAvatarUrl(account) {
+function getAccountAvatarUrl(account: MinecraftCredential) {
 	if (
 		account.profile.id === selectedAccount.value?.profile?.id &&
 		equippedSkin.value?.texture_key
@@ -171,13 +218,10 @@ function getAccountAvatarUrl(account) {
 	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }
 
-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
-)
-
-async function setAccount(account) {
+async function setAccount(account: MinecraftCredential) {
 	defaultUser.value = account.profile.id
 	await set_default_user(account.profile.id).catch(handleError)
+	await refreshValues()
 	emit('change')
 }
 
@@ -187,292 +231,57 @@ async function login() {
 
 	if (loggedIn) {
 		await setAccount(loggedIn)
-		await refreshValues()
 	}
 
 	trackEvent('AccountLogIn')
 	loginDisabled.value = false
 }
 
-const logout = async (id) => {
+async function logout(id: string) {
 	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

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

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

@@ -0,0 +1,638 @@
+<template>
+	<div class="flex gap-2 items-center">
+		<ButtonStyled
+			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
+			color="brand"
+			type="transparent"
+			circular
+		>
+			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<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>
+		<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
+			<button
+				v-if="showUpdatePill"
+				type="button"
+				class="!h-[34px] overflow-hidden text-sm !transition-[width,opacity,transform,background-color,color,filter] !duration-200 ease-out"
+				:class="[
+					updatePillWidthClass,
+					{
+						'update-pill-ready-hidden': finishedDownloading && !animateReadyPill,
+						'update-pill-ready-visible': finishedDownloading && animateReadyPill,
+					},
+				]"
+				:disabled="isUpdateDownloading"
+				:aria-busy="isUpdateDownloading"
+				@click="handleUpdateClick"
+			>
+				<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
+				<DownloadIcon v-else />
+				<span v-if="isUpdateDownloading">
+					{{ formatMessage(messages.downloadingUpdate) }}
+					<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
+				</span>
+				<span v-else>{{ updateLabel }}</span>
+			</button>
+		</ButtonStyled>
+		<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"
+					>
+						<ButtonStyled type="transparent" circular size="small">
+							<button
+								v-tooltip="
+									showInstances
+										? formatMessage(messages.hideMoreRunningInstances)
+										: formatMessage(messages.showMoreRunningInstances)
+								"
+							>
+								<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+							</button>
+						</ButtonStyled>
+						<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,
+	RefreshCwIcon,
+	StarIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	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, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+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'
+import {
+	appUpdateState,
+	downloadAvailableAppUpdate,
+	installAvailableAppUpdate,
+} from '@/providers/app-update'
+
+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',
+	},
+	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)
+})
+const updatePillWidthClass = computed(() => {
+	if (isUpdateDownloading.value) {
+		return 'w-[219px]'
+	}
+
+	if (finishedDownloading.value) {
+		return 'w-[166px]'
+	}
+
+	return '!w-[96px]'
+})
+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()
+	}
+}
+
+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 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 buildDownloadItems(): PopupNotificationProgressItem[] {
+	return [
+		...installJobNotifications.progressItems.value,
+		...currentLoadingBars.value.map((bar) => ({
+			id: getLoadingBarKey(bar),
+			title: bar.title ?? '',
+			text: getLoadingText(bar),
+			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
+			progress: getLoadingProgress(bar),
+			waiting: !bar.total || bar.total <= 0,
+			progressType: 'percentage',
+			progressCurrent: bar.current,
+			progressTotal: bar.total,
+		})),
+	]
+}
+
+const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
+const hasActiveLoadingBars = computed(
+	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
+)
+
+function updateNotification(resummon = false): void {
+	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.buttons = installJobNotifications.buttons.value
+		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,
+			buttons: installJobNotifications.buttons.value,
+		})
+		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()
+	dismissed.value = false
+	window.removeEventListener('offline', handleOffline)
+	window.removeEventListener('online', handleOnline)
+	unlistenProcess()
+	unlistenLoading()
+	installJobNotifications.dispose()
+	if (readyPillAnimationFrame !== null) {
+		cancelAnimationFrame(readyPillAnimationFrame)
+	}
+})
+</script>
+
+<style scoped>
+.update-pill-ready-hidden {
+	opacity: 0;
+	transform: scale(0.96);
+}
+
+.update-pill-ready-visible {
+	opacity: 1;
+	transform: scale(1);
+}
+</style>

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

@@ -1,64 +1,158 @@
 <template>
-	<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()"
+	<div
+		ref="outerRef"
+		data-tauri-drag-region
+		class="min-w-0 overflow-hidden pl-3"
+		: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-1"
+			:class="{ 'breadcrumbs-scroll': isAnimating }"
+			@animationiteration="onAnimationIteration"
 		>
-			<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>
+			{{ 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 as string)),
+						query: breadcrumb.query,
+					}"
+					class="shrink-0 whitespace-nowrap text-primary"
+				>
+					{{ resolveLabel(breadcrumb.name) }}
+				</router-link>
+				<span
+					v-else
+					data-tauri-drag-region
+					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
+				>
+					{{ resolveLabel(breadcrumb.name) }}
+				</span>
+				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
+			</template>
+		</div>
 	</div>
 </template>
 
-<script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { computed } from 'vue'
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
-const route = useRoute()
+interface Breadcrumb {
+	name: string
+	link?: string
+	query?: Record<string, string>
+}
 
+const route = useRoute()
 const breadcrumbData = useBreadcrumbs()
-const breadcrumbs = computed(() => {
+
+const breadcrumbs = computed<Breadcrumb[]>(() => {
 	const additionalContext =
 		route.meta.useContext === true
 			? breadcrumbData.context
 			: route.meta.useRootContext === true
 				? breadcrumbData.rootContext
 				: null
-	return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
+	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
+})
+
+function resolveLabel(name: string): string {
+	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
+}
+
+// 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 overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
+	isOverflowing.value = overflow > 0
+	overflowAmount.value = overflow + 12
+}
+
+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)
 })
 </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="!(isLinkedData(item) && option.name === `add_content`)"
+					v-else-if="!(isInstanceLink(item) && option.name === `add_content`)"
 					class="item clickable"
 					:class="[option.color ?? 'base']"
 				>
@@ -64,10 +64,10 @@ defineExpose({
 	},
 })
 
-const isLinkedData = (item) => {
-	if (item.instance != undefined && item.instance.linked_data) {
+const isInstanceLink = (item) => {
+	if (item.instance != undefined && item.instance.link) {
 		return true
-	} else if (item != undefined && item.linked_data) {
+	} else if (item != undefined && item.link) {
 		return true
 	}
 	return false

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

@@ -6,6 +6,7 @@ import {
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
+	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
@@ -15,7 +16,7 @@ import { ChatIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { install } from '@/helpers/profile.js'
+import { install_existing_instance } from '@/helpers/install'
 import { cancel_directory_change } from '@/helpers/settings.ts'
 import { handleSevereError } from '@/store/error.js'
 
@@ -33,6 +34,7 @@ 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:')) {
@@ -59,7 +61,7 @@ defineExpose({
 			errorType.value = 'directory_move'
 			supportLink.value = 'https://support.modrinth.com'
 
-			if (errorVal.message.includes('directory is not writeable')) {
+			if (errorVal.message.includes('directory is not writable')) {
 				metadata.value.readOnly = true
 			}
 
@@ -70,7 +72,7 @@ defineExpose({
 			title.value = 'No loader selected'
 			errorType.value = 'no_loader_version'
 			supportLink.value = 'https://support.modrinth.com'
-			metadata.value.profilePath = context.profilePath
+			metadata.value.instanceId = context.instanceId
 		} else if (source === 'state_init') {
 			title.value = 'Error initializing Modrinth App'
 			errorType.value = 'state_init'
@@ -123,7 +125,7 @@ const loadingRepair = ref(false)
 async function repairInstance() {
 	loadingRepair.value = true
 	try {
-		await install(metadata.value.profilePath, false)
+		await install_existing_instance(metadata.value.instanceId, false)
 		errorModal.value.hide()
 	} catch (err) {
 		handleSevereError(err)
@@ -154,7 +156,7 @@ async function copyToClipboard(text) {
 
 <template>
 	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
-		<div class="modal-body">
+		<div class="modal-body max-w-[550px]">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
 					<template v-if="metadata.network">
@@ -279,7 +281,7 @@ async function copyToClipboard(text) {
 					{{ debugInfo }}
 				</template>
 				<template v-if="hasDebugInfo">
-					<hr />
+					<div class="w-full h-[1px] bg-surface-5 mb-3"></div>
 					<p>
 						If nothing is working and you need help, visit
 						<a :href="supportLink">our support page</a>
@@ -295,28 +297,47 @@ async function copyToClipboard(text) {
 				<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="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 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>
+								<ButtonStyled circular>
+									<button
+										v-tooltip="'Copy debug info'"
+										:disabled="copied"
+										@click="copyToClipboard(debugInfo)"
+									>
+										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+										<template v-else> <CopyIcon /> </template>
+									</button>
+								</ButtonStyled>
+							</div>
+						</Collapsible>
+					</div>
 				</div>
 			</template>
 		</div>

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

@@ -1,14 +1,50 @@
 <script setup>
-import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
+import { XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	FileTreeSelect,
+	injectNotificationManager,
+	NewModal,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { save } from '@tauri-apps/plugin-dialog'
+import { readDir, stat } from '@tauri-apps/plugin-fs'
 import { ref } from 'vue'
 
-import { PackageIcon, VersionIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { PackageIcon } from '@/assets/icons'
+import {
+	export_instance_mrpack,
+	get_full_path,
+	get_pack_export_candidates,
+} from '@/helpers/instance'
 
 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: {
@@ -19,8 +55,9 @@ const props = defineProps({
 
 defineExpose({
 	show: () => {
+		resetExportState()
 		exportModal.value.show()
-		initFiles()
+		void initFiles().catch(handleError)
 	},
 })
 
@@ -29,73 +66,48 @@ const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
-const folders = ref([])
-const showingFiles = ref(false)
+const selectedFilePaths = ref([])
+const fileTreeKey = ref(0)
+const filesLoadId = ref(0)
+const instanceRoot = ref('')
+const loadedDirectories = ref(new Set())
 
-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,
+async function initFiles() {
+	const loadId = ++filesLoadId.value
+	const [filePaths, root] = await Promise.all([
+		get_pack_export_candidates(props.instance.id),
+		get_full_path(props.instance.id),
 	])
+	if (loadId !== filesLoadId.value) return
+
+	instanceRoot.value = root
+	const exportCandidates = await Promise.all(
+		filePaths.map((path) => buildExportCandidateItem(root, path)),
+	)
+	if (loadId !== filesLoadId.value) return
+
+	files.value = exportCandidates
+	selectedFilePaths.value = files.value
+		.filter((file) => !file.disabled && isDefaultSelectedExportCandidate(file.path))
+		.map((file) => file.path)
 }
 
-await initFiles()
-
 const exportPack = async () => {
-	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
-	folders.value.forEach((args) => {
-		args[1].forEach((child) => {
-			if (child.selected) {
-				filesToExport.push(child.path)
-			}
-		})
-	})
-	const outputPath = await open({
-		directory: true,
-		multiple: false,
+	const outputPath = await save({
+		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
+		filters: [
+			{
+				name: 'Modrinth Modpack',
+				extensions: ['mrpack'],
+			},
+		],
 	})
 
 	if (outputPath) {
-		export_profile_mrpack(
-			props.instance.path,
-			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
-			filesToExport,
+		export_instance_mrpack(
+			props.instance.id,
+			outputPath,
+			selectedFilePaths.value,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -103,203 +115,190 @@ const exportPack = async () => {
 		exportModal.value.hide()
 	}
 }
+
+function resetExportState() {
+	nameInput.value = props.instance.name
+	exportDescription.value = ''
+	versionInput.value = '1.0.0'
+	files.value = []
+	selectedFilePaths.value = []
+	fileTreeKey.value += 1
+	instanceRoot.value = ''
+	loadedDirectories.value = new Set()
+}
+
+async function loadExportDirectory(path) {
+	if (!path || !instanceRoot.value || loadedDirectories.value.has(path)) return
+
+	const loadId = filesLoadId.value
+	loadedDirectories.value.add(path)
+
+	try {
+		const entries = await readDir(`${instanceRoot.value}/${path}`)
+		const childItems = await Promise.all(
+			entries.map((entry) => buildExportDirectoryChildItem(instanceRoot.value, path, entry)),
+		)
+		if (loadId !== filesLoadId.value) return
+
+		appendExportItems(childItems)
+	} catch {
+		loadedDirectories.value.delete(path)
+	}
+}
+
+async function buildExportCandidateItem(instanceRoot, path) {
+	try {
+		const entries = await readDir(`${instanceRoot}/${path}`)
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+			count: entries.length,
+		}
+	} catch {
+		return buildExportFileItem(instanceRoot, path)
+	}
+}
+
+async function buildExportDirectoryChildItem(instanceRoot, parentPath, entry) {
+	const path = `${parentPath}/${entry.name}`
+	if (entry.isDirectory) {
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+		}
+	}
+
+	return buildExportFileItem(instanceRoot, path)
+}
+
+async function buildExportFileItem(instanceRoot, path) {
+	const metadata = await getExportCandidateMetadata(instanceRoot, path)
+	return {
+		path,
+		type: 'file',
+		disabled: isExportCandidateDisabled(path),
+		size: metadata.size,
+		modified: metadata.modified,
+	}
+}
+
+function appendExportItems(items) {
+	const nextFiles = new Map(files.value.map((file) => [normalizeExportPath(file.path), file]))
+	for (const item of items) {
+		nextFiles.set(normalizeExportPath(item.path), item)
+	}
+	files.value = [...nextFiles.values()]
+}
+
+async function getExportCandidateMetadata(instanceRoot, path) {
+	try {
+		const metadata = await stat(`${instanceRoot}/${path}`)
+		return {
+			size: metadata.size,
+			modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : undefined,
+		}
+	} catch {
+		return {}
+	}
+}
+
+function normalizeExportPath(path) {
+	return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
+}
+
+function isDefaultSelectedExportCandidate(path) {
+	return (
+		path.startsWith('mods') ||
+		path.startsWith('datapacks') ||
+		path.startsWith('resourcepacks') ||
+		path.startsWith('shaderpacks') ||
+		path.startsWith('config')
+	)
+}
+
+function isExportCandidateDisabled(path) {
+	return (
+		path === 'profile.json' ||
+		path.startsWith('modrinth_logs') ||
+		path.startsWith('.fabric') ||
+		path.startsWith('__MACOSX')
+	)
+}
 </script>
 
 <template>
-	<ModalWrapper ref="exportModal" header="Export modpack">
-		<div class="modal-body">
-			<div class="labeled_input">
-				<p>Modpack Name</p>
-				<div class="iconified-input">
-					<PackageIcon />
-					<input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-					<Button class="r-btn" @click="nameInput = ''">
-						<XIcon />
-					</Button>
+	<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="labeled_input">
-				<p>Version number</p>
-				<div class="iconified-input">
-					<VersionIcon />
-					<input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-					<Button class="r-btn" @click="versionInput = ''">
-						<XIcon />
-					</Button>
-				</div>
-			</div>
-			<div class="adjacent-input">
-				<div class="labeled_input">
-					<p>Description</p>
-
-					<div class="textarea-wrapper">
-						<textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-					</div>
-				</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 />
-					Cancel
-				</Button>
-				<Button color="primary" @click="exportPack">
-					<PackageIcon />
-					Export
-				</Button>
+			<div class="flex flex-col gap-2 min-w-0">
+				<p class="m-0 text-contrast font-semibold">
+					{{ formatMessage(commonMessages.descriptionLabel) }}
+				</p>
+				<StyledInput
+					v-model="exportDescription"
+					multiline
+					:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					wrapper-class="w-full"
+				/>
 			</div>
+			<FileTreeSelect
+				:key="fileTreeKey"
+				v-model="selectedFilePaths"
+				class="min-w-0"
+				:items="files"
+				@navigate="loadExportDirectory"
+			/>
 		</div>
-	</ModalWrapper>
+		<template #actions>
+			<div class="flex items-center justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button @click="exportModal.hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="exportPack">
+						<PackageIcon />
+						{{ formatMessage(messages.exportButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
 </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;
-}
-
-.textarea-wrapper {
-	// margin-top: 1rem;
-	height: 12rem;
-
-	textarea {
-		max-height: 12rem;
-	}
-
-	.preview {
-		overflow-y: auto;
-	}
-}
-</style>

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

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

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

@@ -1,658 +0,0 @@
-<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>
-				<input
-					v-model="profile_name"
-					autocomplete="off"
-					class="text-input"
-					type="text"
-					maxlength="100"
-				/>
-			</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">
-					<div class="iconified-input">
-						<FolderOpenIcon />
-						<input
-							v-model="selectedProfileType.path"
-							type="text"
-							placeholder="Path to launcher"
-							@change="setPath"
-						/>
-						<Button class="r-btn" @click="() => (selectedProfileType.path = '')">
-							<XIcon />
-						</Button>
-					</div>
-					<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 } 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,8 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { computed } from 'vue'
 
 type Instance = {
 	game_version: string
@@ -13,18 +13,23 @@ type Instance = {
 	name: string
 }
 
-defineProps<{
-	instance: Instance
-}>()
+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
+})
 </script>
 
 <template>
 	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-		<router-link
-			:to="`/instance/${encodeURIComponent(instance.path)}`"
-			tabindex="-1"
-			class="flex flex-col gap-4 text-primary"
-		>
+		<router-link :to="instanceLink" 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"
@@ -37,15 +42,14 @@ defineProps<{
 					</span>
 					<span class="text-secondary flex items-center gap-2 font-semibold">
 						<GameIcon class="h-5 w-5 text-secondary" />
-						{{ formatCategory(instance.loader) }} {{ instance.game_version }}
+						<FormattedTag :tag="instance.loader" enforce-type="loader" />
+						{{ instance.game_version }}
 					</span>
 				</span>
 			</span>
 		</router-link>
 		<ButtonStyled>
-			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
-				<LeftArrowIcon /> Back to instance
-			</router-link>
+			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
 		</ButtonStyled>
 	</div>
 </template>

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

@@ -1,42 +1,44 @@
 <template>
 	<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 class="flex flex-col gap-4">
+			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
+				<template #cell-version="{ value }">
+					<span class="font-semibold text-primary">{{ value }}</span>
+				</template>
+				<template #cell-path="{ value }">
+					<span v-tooltip="value" class="block truncate font-mono text-xs">{{ value }}</span>
+				</template>
+				<template #cell-actions="{ row }">
+					<div class="flex items-center justify-end">
+						<ButtonStyled v-if="currentSelected.path === row.path">
+							<button class="!shadow-none" disabled><CheckIcon /> Selected</button>
+						</ButtonStyled>
+						<ButtonStyled v-else>
+							<button class="!shadow-none" @click="setJavaInstall(row)"><PlusIcon /> Select</button>
+						</ButtonStyled>
 					</div>
-					<div v-tooltip="javaInstall.path" class="table-cell table-text">
-						<span>{{ javaInstall.path }}</span>
-					</div>
-					<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>
+				</template>
+				<template #empty-state>
+					<div class="p-4 text-secondary">No java installations found!</div>
+				</template>
+			</Table>
+			<div class="flex justify-end">
+				<ButtonStyled type="outlined">
+					<button
+						class="!shadow-none !border-surface-4 !border"
+						@click="$refs.detectJavaModal.hide()"
+					>
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Table } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -48,6 +50,11 @@ const { handleError } = injectNotificationManager()
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})
+const javaInstallColumns = [
+	{ key: 'version', label: 'Version', width: '9rem' },
+	{ key: 'path', label: 'Path' },
+	{ key: 'actions', label: 'Actions', align: 'right', width: '10rem' },
+]
 
 defineExpose({
 	show: async (version, currentSelectedJava) => {
@@ -73,25 +80,3 @@ 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,76 +1,104 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-	<div class="toggle-setting" :class="{ compact }">
-		<input
-			autocomplete="off"
-			:disabled="props.disabled"
-			:value="props.modelValue ? props.modelValue.path : ''"
-			type="text"
-			class="installation-input"
-			:placeholder="placeholder ?? '/path/to/java'"
-			@input="
-				(val) => {
-					emit('update:modelValue', {
-						...props.modelValue,
-						path: val.target.value,
-					})
-				}
-			"
-		/>
-		<span class="installation-buttons">
-			<Button
-				v-if="props.version"
-				:disabled="props.disabled || installingJava"
-				@click="reinstallJava"
+	<div :id="props.id" class="toggle-setting" :class="{ compact }">
+		<div class="input-with-status">
+			<StyledInput
+				autocomplete="off"
+				:disabled="props.disabled"
+				:model-value="props.modelValue ? props.modelValue.path : ''"
+				:placeholder="placeholder ?? '/path/to/java'"
+				wrapper-class="installation-input"
+				@update:model-value="
+					(val) => {
+						emit('update:modelValue', {
+							...props.modelValue,
+							path: val,
+						})
+					}
+				"
+			/>
+			<ButtonStyled
+				:color="
+					!hoveringTest && !testingJava
+						? testingJavaSuccess === true
+							? 'green'
+							: 'red'
+						: 'standard'
+				"
+				color-fill="text"
 			>
-				<DownloadIcon />
-				{{ installingJava ? 'Installing...' : 'Install recommended' }}
-			</Button>
-			<Button :disabled="props.disabled" @click="autoDetect">
-				<SearchIcon />
-				Detect
-			</Button>
-			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
-				<FolderSearchIcon />
-				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>
+				<button
+					class="!shadow-none"
+					:disabled="testingJava || props.disabled"
+					@click="runTest(props.modelValue?.path)"
+					@mouseenter="!props.disabled && (hoveringTest = true)"
+					@mouseleave="hoveringTest = false"
+				>
+					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+					<CheckCircleIcon
+						v-else-if="testingJavaSuccess === true && !hoveringTest"
+						class="h-4 w-4"
+					/>
+					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
+					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
+				</button>
+			</ButtonStyled>
+		</div>
+		<span class="installation-buttons">
+			<ButtonStyled v-if="props.version">
+				<button
+					v-tooltip="testingJavaSuccess === true ? 'Already installed' : undefined"
+					class="!shadow-none"
+					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
+					@click="reinstallJava"
+				>
+					<DownloadIcon />
+					{{ installingJava ? 'Installing...' : 'Install recommended' }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
+					<SearchIcon />
+					Detect
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
+					<FolderSearchIcon />
+					Browse
+				</button>
+			</ButtonStyled>
 		</span>
 	</div>
 </template>
 
 <script setup>
 import {
-	CheckIcon,
+	CheckCircleIcon,
 	DownloadIcon,
 	FolderSearchIcon,
-	PlayIcon,
+	RefreshCwIcon,
 	SearchIcon,
-	XIcon,
+	SpinnerIcon,
+	XCircleIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { ref } from 'vue'
+import { ref, watch } 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, test_jre } from '@/helpers/jre.js'
+import { auto_install_java, find_filtered_jres, get_jre } from '@/helpers/jre.js'
 
 const { handleError } = injectNotificationManager()
 
 const props = defineProps({
+	id: {
+		type: String,
+		required: false,
+		default: null,
+	},
 	version: {
 		type: Number,
 		required: false,
@@ -101,29 +129,36 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const testingJava = ref(false)
-const testingJavaSuccess = ref(null)
+const {
+	testingJava,
+	javaTestResult: testingJavaSuccess,
+	testJavaInstallationDebounced,
+	testJavaInstallation,
+} = useJavaTest()
 
 const installingJava = ref(false)
+const hoveringTest = ref(false)
+let hasInitialized = false
 
-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)
+async function runTest(path) {
+	await testJavaInstallation(path, props.version, true)
 }
 
+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()
 
@@ -133,6 +168,7 @@ async function handleJavaFileInput() {
 			result = {
 				path: filePath.path ?? filePath,
 				version: props.version.toString(),
+				parsed_version: props.version,
 				architecture: 'x86',
 			}
 		}
@@ -166,6 +202,7 @@ async function reinstallJava() {
 		result = {
 			path: path,
 			version: props.version.toString(),
+			parsed_version: props.version,
 			architecture: 'x86',
 		}
 	}
@@ -177,13 +214,23 @@ 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 {
-	width: 100% !important;
-	flex-grow: 1;
+	flex: 1 1 0;
+	min-width: 0;
 }
 
 .toggle-setting {
@@ -205,17 +252,5 @@ 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,7 +1,6 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -11,6 +10,8 @@ dayjs.extend(relativeTime)
 
 const router = useRouter()
 
+const { formatCompactNumber } = useCompactNumber()
+
 const props = defineProps({
 	project: {
 		type: Object,
@@ -96,18 +97,18 @@ const toTransparent = computed(() => {
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<DownloadIcon />
-					{{ formatNumber(project.downloads) }}
+					{{ formatCompactNumber(project.downloads) }}
 				</div>
 				<div
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<HeartIcon />
-					{{ formatNumber(project.follows) }}
+					{{ formatCompactNumber(project.follows) }}
 				</div>
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />
 					<TagItem>
-						{{ formatCategory(featuredCategory) }}
+						<FormattedTag :tag="featuredCategory" />
 					</TagItem>
 				</div>
 			</div>

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

@@ -1,11 +1,11 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, Button } from '@modrinth/ui'
+import { Badge, ButtonStyled } 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/profile'
+import { update_managed_modrinth_version } from '@/helpers/instance'
 import { releaseColor } from '@/helpers/utils'
 
 const props = defineProps({
@@ -32,14 +32,14 @@ const filteredVersions = computed(() => {
 })
 
 const modpackVersionModal = ref(null)
-const installedVersion = computed(() => props.instance?.linked_data?.version_id)
+const installedVersion = computed(() => props.instance?.link?.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.path, versionId)
+	await update_managed_modrinth_version(props.instance.id, versionId)
 	inProgress.value = false
 	emit('finish-install')
 }
@@ -59,7 +59,7 @@ const onHide = () => {
 		:on-hide="onHide"
 	>
 		<div class="modal-body">
-			<div v-if="instance.linked_data" class="mod-card">
+			<div v-if="instance.link" class="mod-card">
 				<div class="table">
 					<div class="table-row with-columns table-head">
 						<div class="table-cell table-text download-cell" />
@@ -74,15 +74,18 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<Button
-									:color="version.id === installedVersion ? '' : 'primary'"
-									icon-only
-									:disabled="inProgress || installing || version.id === installedVersion"
-									@click.stop="() => switchVersion(version.id)"
+								<ButtonStyled
+									circular
+									:color="version.id === installedVersion ? 'standard' : 'brand'"
 								>
-									<SwapIcon v-if="version.id !== installedVersion" />
-									<CheckIcon v-else />
-								</Button>
+									<button
+										:disabled="inProgress || installing || version.id === installedVersion"
+										@click.stop="() => switchVersion(version.id)"
+									>
+										<SwapIcon v-if="version.id !== installedVersion" />
+										<CheckIcon v-else />
+									</button>
+								</ButtonStyled>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">

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

@@ -3,6 +3,7 @@
 		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

@@ -1,160 +0,0 @@
-<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

@@ -0,0 +1,123 @@
+<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;
+	transition: width 0.3s ease-out;
 }
 </style>

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

@@ -6,16 +6,16 @@ import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
 
 import NavButton from '@/components/ui/NavButton.vue'
-import { profile_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/profile'
+import { instance_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
 
 const recentInstances = ref([])
 const getInstances = async () => {
-	const profiles = await list().catch(handleError)
+	const instances = await list().catch(handleError)
 
-	recentInstances.value = profiles
+	recentInstances.value = instances
 		.sort((a, b) => {
 			const dateACreated = dayjs(a.created)
 			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
@@ -37,38 +37,34 @@ const getInstances = async () => {
 
 await getInstances()
 
-const unlistenProfile = await profile_listener(async (event) => {
+const unlistenInstance = await instance_listener(async (event) => {
 	if (event.event !== 'synced') {
 		await getInstances()
 	}
 })
 
 onUnmounted(() => {
-	unlistenProfile()
+	unlistenInstance()
 })
 </script>
 
 <template>
-	<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
-			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-for="instance in recentInstances" :key="instance.id" v-tooltip.right="instance.name">
+		<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>
 	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
 </template>
 

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

@@ -1,474 +0,0 @@
-<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

@@ -1,184 +0,0 @@
-<template>
-	<div
-		class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-		@click="
-			() => {
-				emit('open')
-				$router.push({
-					path: `/project/${project.project_id ?? project.id}`,
-					query: { i: props.instance ? props.instance.path : undefined },
-				})
-			}
-		"
-	>
-		<div class="icon w-[96px] h-[96px] relative">
-			<Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-		</div>
-		<div class="flex flex-col gap-2 overflow-hidden">
-			<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-				<span class="text-lg font-extrabold text-contrast m-0 leading-none">
-					{{ project.title }}
-				</span>
-				<span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-			</div>
-			<div class="m-0 line-clamp-2">
-				{{ project.description }}
-			</div>
-			<div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-				<TagsIcon class="h-4 w-4 shrink-0" />
-				<div
-					v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					<template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-						Client or server
-					</template>
-					<template
-						v-else-if="
-							(project.client_side === 'optional' || project.client_side === 'required') &&
-							(project.server_side === 'optional' || project.server_side === 'unsupported')
-						"
-					>
-						Client
-					</template>
-					<template
-						v-else-if="
-							(project.server_side === 'optional' || project.server_side === 'required') &&
-							(project.client_side === 'optional' || project.client_side === 'unsupported')
-						"
-					>
-						Server
-					</template>
-					<template
-						v-else-if="
-							project.client_side === 'unsupported' && project.server_side === 'unsupported'
-						"
-					>
-						Unsupported
-					</template>
-					<template
-						v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-					>
-						Client and server
-					</template>
-				</div>
-				<div
-					v-for="tag in categories"
-					:key="tag"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					{{ formatCategory(tag.name) }}
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-			<div class="flex items-center gap-2">
-				<DownloadIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.downloads) }}
-					<span class="text-secondary">downloads</span>
-				</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<HeartIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.follows ?? project.followers) }}
-					<span class="text-secondary">followers</span>
-				</span>
-			</div>
-			<div class="mt-auto relative">
-				<div class="absolute bottom-0 right-0 w-fit">
-					<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>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
-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,
-	},
-	categories: {
-		type: Array,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
-	featured: {
-		type: Boolean,
-		default: false,
-	},
-	installed: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-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/URLConfirmModal.vue

@@ -1,38 +1,32 @@
 <script setup>
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-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'
+import { get_project_v3, get_version } from '@/helpers/cache.js'
+import { injectContentInstall } from '@/providers/content-install'
 
 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(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project_v3(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()
 	},
 })
@@ -51,13 +45,22 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
-			<SearchCard
-				:project="project"
+			<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"
 				class="project-card"
-				:categories="categories"
-				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
@@ -66,7 +69,9 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<Button :loading="installing" color="primary" @click="install">Install</Button>
+					<ButtonStyled color="brand">
+						<button @click="install">Install</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>

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

@@ -1,130 +0,0 @@
-<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-divider 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

@@ -0,0 +1,93 @@
+<template>
+	<section
+		v-if="showControls"
+		class="flex items-center gap-2 mr-1.5"
+		data-tauri-drag-region-exclude
+	>
+		<ButtonStyled type="transparent" circular>
+			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
+				<MinimizeIcon />
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular>
+			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
+				<RestoreIcon v-if="isMaximized" />
+				<MaximizeIcon v-else />
+			</button>
+		</ButtonStyled>
+		<ButtonStyled
+			type="transparent"
+			color="red"
+			color-fill="none"
+			hover-color-fill="background"
+			circular
+		>
+			<button class="relative expanded-button close-button" @click="handleClose">
+				<XIcon />
+			</button>
+		</ButtonStyled>
+	</section>
+</template>
+
+<script setup>
+import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled } 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/friends/FriendsList.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
-	commonMessages,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -271,15 +271,14 @@ const messages = defineMessages({
 				{{ formatMessage(messages.usernameDescription) }}
 			</p>
 			<div class="flex items-center gap-2 mt-4">
-				<div class="iconified-input flex-1">
-					<UserIcon aria-hidden="true" />
-					<input
-						v-model="username"
-						type="text"
-						:placeholder="formatMessage(messages.usernamePlaceholder)"
-						@keyup.enter="addFriendFromModal"
-					/>
-				</div>
+				<StyledInput
+					v-model="username"
+					:icon="UserIcon"
+					type="text"
+					:placeholder="formatMessage(messages.usernamePlaceholder)"
+					wrapper-class="flex-1"
+					@keyup.enter="addFriendFromModal"
+				/>
 				<ButtonStyled color="brand">
 					<button :disabled="username.length === 0" @click="addFriendFromModal">
 						<SendIcon />
@@ -289,7 +288,7 @@ const messages = defineMessages({
 			</div>
 		</div>
 	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
 			<ButtonStyled circular type="transparent">
 				<button
@@ -300,25 +299,18 @@ const messages = defineMessages({
 					<UserPlusIcon />
 				</button>
 			</ButtonStyled>
-			<div class="iconified-input flex-1">
-				<input
-					v-model="search"
-					type="text"
-					class="friends-search-bar flex w-full"
-					:placeholder="formatMessage(messages.searchFriends)"
-					@keyup.esc="search = ''"
-				/>
-				<button
-					v-if="search"
-					v-tooltip="formatMessage(commonMessages.clearButton)"
-					class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
-					@click="search = ''"
-				>
-					<XIcon />
-				</button>
-			</div>
+			<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"
+				@keyup.esc="search = ''"
+			/>
 		</template>
-		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
+		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
@@ -340,11 +332,11 @@ const messages = defineMessages({
 		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
-		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
+		<h3 v-if="loading" class="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 ml-4 mr-1">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
 				<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>
@@ -353,7 +345,7 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm ml-4 mr-1">
+			<div class="text-sm">
 				<div v-if="!userCredentials">
 					<IntlFormatted :message-id="messages.signInToAddFriends">
 						<template #link="{ children }">
@@ -402,7 +394,6 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
-				open-by-default
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"
@@ -413,16 +404,3 @@ const messages = defineMessages({
 		</template>
 	</div>
 </template>
-<style scoped>
-.friends-search-bar {
-	background: none;
-	border: 2px solid var(--color-button-bg) !important;
-	padding: 8px;
-	border-radius: 12px;
-	height: 36px;
-}
-
-.friends-search-bar::placeholder {
-	@apply text-sm font-normal;
-}
-</style>

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

@@ -106,7 +106,7 @@ const messages = defineMessages({
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
 		:button-class="
-			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
+			'flex w-full items-center bg-transparent border-0 p-0' +
 			(isSearching
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -122,7 +122,7 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
+					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"

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

@@ -0,0 +1,128 @@
+<script setup>
+import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	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'
+
+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: ['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>
+					<ButtonStyled>
+						<button :disabled="instance.added || instance.adding" @click="addServer(instance)">
+							<PlusIcon v-if="!instance.added && !instance.adding" />
+							<CheckIcon v-else-if="instance.added" />
+							{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<ButtonStyled>
+					<button @click="modal.hide()">Cancel</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>

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

@@ -1,168 +0,0 @@
-<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) => formatCategory(name))
-											.join(', ')} - ${version?.game_versions.join(', ')})`
-								"
-								:max-height="150"
-							/>
-							<span v-else>
-								<span>
-									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders.map((name) => formatCategory(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, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-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 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

@@ -1,77 +0,0 @@
-<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

@@ -1,398 +0,0 @@
-<script setup>
-import {
-	CheckIcon,
-	DownloadIcon,
-	PlusIcon,
-	RightArrowIcon,
-	UploadIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } 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 loader =
-		versions.value[0].loaders[0] !== 'forge' &&
-		versions.value[0].loaders[0] !== 'fabric' &&
-		versions.value[0].loaders[0] !== 'quilt'
-			? 'vanilla'
-			: versions.value[0].loaders[0]
-
-	const id = await create(
-		name.value,
-		versions.value[0].game_versions[0],
-		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">
-			<input
-				v-model="searchFilter"
-				autocomplete="off"
-				type="text"
-				class="search"
-				placeholder="Search for an instance"
-			/>
-			<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">
-						<input
-							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

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

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

@@ -4,43 +4,56 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	Chips,
 	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
+	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, type Ref, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { install_duplicate_instance } from '@/helpers/install'
+import { edit, edit_icon, list, remove } from '@/helpers/instance'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { GameInstance } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
+const queryClient = useQueryClient()
 
 const deleteConfirmModal = ref()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
+type ReleaseChannel = GameInstance['update_channel']
+const releaseChannelOptions: ReleaseChannel[] = ['release', 'beta', 'alpha']
 
-const title = ref(props.instance.name)
-const icon: Ref<string | undefined> = ref(props.instance.icon_path)
-const groups = ref(props.instance.groups)
+const title = ref(instance.value.name)
+const icon: Ref<string | undefined> = ref(instance.value.icon_path)
+const groups = ref([...instance.value.groups])
+const savingReleaseChannel = ref(false)
+const selectedReleaseChannel = ref<ReleaseChannel>(instance.value.update_channel)
+const releaseChannelDisabledItems = computed<ReleaseChannel[]>(() =>
+	savingReleaseChannel.value ? [...releaseChannelOptions] : [],
+)
 
 const newCategoryInput = ref('')
 
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const installing = computed(() => instance.value.install_stage !== 'installed')
 
-async function duplicateProfile() {
-	await duplicate(props.instance.path).catch(handleError)
+async function duplicateInstance() {
+	await install_duplicate_instance(instance.value.id).catch(handleError)
 	trackEvent('InstanceDuplicate', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
 	})
 }
 
@@ -49,9 +62,55 @@ const availableGroups = computed(() => [
 	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
 ])
 
+function formatReleaseChannelLabel(channel: ReleaseChannel) {
+	switch (channel) {
+		case 'release':
+			return formatMessage(messages.updateChannelRelease)
+		case 'beta':
+			return formatMessage(messages.updateChannelBeta)
+		case 'alpha':
+			return formatMessage(messages.updateChannelAlpha)
+	}
+}
+
+function formatReleaseChannelDescription(channel: ReleaseChannel) {
+	switch (channel) {
+		case 'release':
+			return formatMessage(messages.updateChannelReleaseDescription)
+		case 'beta':
+			return formatMessage(messages.updateChannelBetaDescription)
+		case 'alpha':
+			return formatMessage(messages.updateChannelAlphaDescription)
+	}
+}
+
+watch(
+	() => [instance.value.id, instance.value.update_channel] as const,
+	() => {
+		if (!savingReleaseChannel.value) {
+			selectedReleaseChannel.value = instance.value.update_channel
+		}
+	},
+)
+
+watch(selectedReleaseChannel, async (channel, previousChannel) => {
+	const previousReleaseChannel = previousChannel ?? instance.value.update_channel
+	if (channel === instance.value.update_channel) return
+
+	savingReleaseChannel.value = true
+	const instanceId = instance.value.id
+	await edit(instanceId, { update_channel: channel })
+		.then(() => queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instanceId] }))
+		.catch((error) => {
+			selectedReleaseChannel.value = previousReleaseChannel
+			handleError(error)
+		})
+	savingReleaseChannel.value = false
+})
+
 async function resetIcon() {
 	icon.value = undefined
-	await edit_icon(props.instance.path, null).catch(handleError)
+	await edit_icon(instance.value.id, null).catch(handleError)
 	trackEvent('InstanceRemoveIcon')
 }
 
@@ -69,12 +128,12 @@ async function setIcon() {
 	if (!value) return
 
 	icon.value = value
-	await edit_icon(props.instance.path, icon.value).catch(handleError)
+	await edit_icon(instance.value.id, icon.value).catch(handleError)
 
 	trackEvent('InstanceSetIcon')
 }
 
-const editProfileObject = computed(() => ({
+const editInstanceObject = computed(() => ({
 	name: title.value.trim().substring(0, 32) ?? 'Instance',
 	groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
 }))
@@ -99,23 +158,24 @@ const addCategory = () => {
 watch(
 	[title, groups, groups],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		if (removing.value) return
+		await edit(instance.value.id, editInstanceObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
 
 const removing = ref(false)
-async function removeProfile() {
+async function removeInstance() {
 	removing.value = true
-	await remove(props.instance.path).catch(handleError)
-	removing.value = false
+	const path = instance.value.id
 
 	trackEvent('InstanceRemove', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
 	})
 
 	await router.push({ path: '/' })
+	await remove(path).catch(handleError)
 }
 
 const messages = defineMessages({
@@ -172,6 +232,38 @@ const messages = defineMessages({
 		id: 'instance.settings.tabs.general.duplicate-button',
 		defaultMessage: 'Duplicate',
 	},
+	updateChannel: {
+		id: 'instance.settings.tabs.general.update-channel',
+		defaultMessage: 'Update channel',
+	},
+	updateChannelReleaseDescription: {
+		id: 'instance.settings.tabs.general.update-channel.release.description',
+		defaultMessage: 'Only release versions will be shown as available updates.',
+	},
+	updateChannelBetaDescription: {
+		id: 'instance.settings.tabs.general.update-channel.beta.description',
+		defaultMessage: 'Release and beta versions will be shown as available updates.',
+	},
+	updateChannelAlphaDescription: {
+		id: 'instance.settings.tabs.general.update-channel.alpha.description',
+		defaultMessage: 'Release, beta, and alpha versions will be shown as available updates.',
+	},
+	updateChannelRelease: {
+		id: 'instance.settings.tabs.general.update-channel.release',
+		defaultMessage: 'Release',
+	},
+	updateChannelBeta: {
+		id: 'instance.settings.tabs.general.update-channel.beta',
+		defaultMessage: 'Beta',
+	},
+	updateChannelAlpha: {
+		id: 'instance.settings.tabs.general.update-channel.alpha',
+		defaultMessage: 'Alpha',
+	},
+	selectUpdateChannelAriaLabel: {
+		id: 'instance.settings.tabs.general.update-channel.select',
+		defaultMessage: 'Select update channel',
+	},
 	deleteInstance: {
 		id: 'instance.settings.tabs.general.delete',
 		defaultMessage: 'Delete instance',
@@ -193,139 +285,155 @@ const messages = defineMessages({
 </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"
-	/>
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeInstance" />
 	<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"
+		<div class="float-end ml-10 relative group w-fit">
+			<div class="flex flex-col gap-1">
+				<span class="text-lg font-semibold text-contrast">Icon</span>
+				<div class="group relative w-fit">
+					<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,
+							},
+						]"
 					>
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-					</div>
+						<Avatar
+							:src="icon ? convertFileSrc(icon) : icon"
+							size="108px"
+							class="transition-[filter] group-hover:brightness-75"
+							:tint-by="instance.id"
+							no-shadow
+						/>
+						<div
+							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+						>
+							<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
+						</div>
+						<template #select>
+							<UploadIcon />
+							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+						</template>
+						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+					</OverflowMenu>
 				</div>
-				<template #select>
-					<UploadIcon />
-					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-				</template>
-				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-			</OverflowMenu>
+			</div>
 		</div>
-		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+		<label for="instance-name" class="m-0 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<input
+			<StyledInput
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"
-				maxlength="80"
-				class="flex-grow"
-				type="text"
+				: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"
-				>
+			<div class="flex flex-col gap-2.5 mt-6">
+				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<p class="m-0 mb-2">
+				<ButtonStyled>
+					<button
+						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+						aria-labelledby="duplicate-instance-label"
+						:disabled="installing"
+						class="w-max !shadow-none"
+						@click="duplicateInstance"
+					>
+						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+					</button>
+				</ButtonStyled>
+				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
 			</div>
-			<ButtonStyled>
+		</template>
+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.libraryGroups) }}
+			</h2>
+
+			<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)"
+						class="w-full max-w-[300px]"
+						@submit="() => addCategory"
+					/>
+					<ButtonStyled>
+						<button class="w-fit !shadow-none" @click="() => addCategory()">
+							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<p class="m-0">
+				{{ formatMessage(messages.libraryGroupsDescription) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.updateChannel) }}
+			</h2>
+			<Chips
+				v-model="selectedReleaseChannel"
+				:items="releaseChannelOptions"
+				:format-label="formatReleaseChannelLabel"
+				:capitalize="false"
+				:disabled-items="releaseChannelDisabledItems"
+				:aria-label="formatMessage(messages.selectUpdateChannelAriaLabel)"
+			/>
+			<p class="m-0">
+				{{ formatReleaseChannelDescription(selectedReleaseChannel) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.deleteInstance) }}
+			</h2>
+			<ButtonStyled color="red">
 				<button
-					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-					aria-labelledby="duplicate-instance-label"
-					:disabled="installing"
-					@click="duplicateProfile"
+					aria-labelledby="delete-instance-label"
+					:disabled="removing"
+					class="w-fit !shadow-none"
+					@click="deleteConfirmModal.show()"
 				>
-					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+					<SpinnerIcon v-if="removing" class="animate-spin" />
+					<TrashIcon v-else />
+					{{
+						removing
+							? formatMessage(messages.deletingInstanceButton)
+							: formatMessage(messages.deleteInstanceButton)
+					}}
 				</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">
-				<input
-					v-model="newCategoryInput"
-					type="text"
-					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
-					@submit="() => addCategory"
-				/>
-				<ButtonStyled>
-					<button class="w-fit" @click="() => addCategory()">
-						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-					</button>
-				</ButtonStyled>
-			</div>
+			<p class="m-0">
+				{{ formatMessage(messages.deleteInstanceDescription) }}
+			</p>
 		</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">

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

@@ -1,41 +1,48 @@
 <script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
-import { edit } from '@/helpers/profile'
+import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings, Hooks } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideHooks = ref(
-	!!props.instance.hooks.pre_launch ||
-		!!props.instance.hooks.wrapper ||
-		!!props.instance.hooks.post_exit,
+	!!instance.value.hooks.pre_launch ||
+		!!instance.value.hooks.wrapper ||
+		!!instance.value.hooks.post_exit,
 )
-const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
+const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
 
-const editProfileObject = computed(() => {
-	const editProfile: {
+const editInstanceObject = computed(() => {
+	const editInstancePatch: {
 		hooks?: Hooks
 	} = {}
 
 	// When hooks are not overridden per-instance, we want to clear them
-	editProfile.hooks = overrideHooks.value ? hooks.value : {}
+	editInstancePatch.hooks = overrideHooks.value ? hooks.value : {}
 
-	return editProfile
+	return editInstancePatch
 })
 
 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.value.id, editInstanceObject.value)
 	},
 	{ deep: true },
 )
@@ -94,60 +101,57 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="m-0 m-0 text-lg font-semibold 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-2 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>
-		<input
+		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.preLaunchDescription) }}
+		</p>
 
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>
-		<input
+		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.wrapperDescription) }}
+		</p>
 
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
-		<input
+		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.postExitDescription) }}
+		</p>
 	</div>
 </template>

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

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

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

@@ -1,30 +1,38 @@
 <script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, Toggle, useVIntl } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
-import { edit } from '@/helpers/profile'
+import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideWindowSettings = ref(
-	!!props.instance.game_resolution || !!props.instance.force_fullscreen,
+	!!instance.value.game_resolution || !!instance.value.force_fullscreen,
 )
 const resolution: Ref<[number, number]> = ref(
-	props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+	instance.value.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
 )
 const fullscreenSetting: Ref<boolean> = ref(
-	props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
+	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
 )
 
-const editProfileObject = computed(() => {
+const editInstanceObject = computed(() => {
 	if (!overrideWindowSettings.value) {
 		return {
 			force_fullscreen: null,
@@ -40,7 +48,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.value.id, editInstanceObject.value)
 	},
 	{ deep: true },
 )
@@ -86,14 +94,14 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div>
+	<div class="flex flex-col gap-6">
 		<Checkbox
 			v-model="overrideWindowSettings"
 			:label="formatMessage(messages.customWindowSettings)"
 		/>
-		<div class="mt-2 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<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">
 					{{ formatMessage(messages.fullscreen) }}
 				</h2>
 				<p class="m-0">
@@ -112,16 +120,16 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="mt-4 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<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">
 					{{ formatMessage(messages.width) }}
 				</h2>
 				<p class="m-0">
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -131,16 +139,16 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="mt-4 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<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">
 					{{ formatMessage(messages.height) }}
 				</h2>
 				<p class="m-0">
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import {
+	CheckIcon,
+	CopyIcon,
+	DropdownIcon,
+	LogInIcon,
+	MessagesSquareIcon,
+	WrenchIcon,
+} from '@modrinth/assets'
+import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleSevereError } from '@/store/error.js'
+
+import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'
+
+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
+	hide_ads_window()
+	modal.value?.show()
+}
+
+function hide() {
+	onModalHide()
+	modal.value?.hide()
+}
+
+function onModalHide() {
+	show_ads_window()
+}
+
+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'" @hide="onModalHide">
+		<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">
+				<ButtonStyled>
+					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+						<MessagesSquareIcon /> Contact support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
+						<LogInIcon /> Sign in again
+					</button>
+				</ButtonStyled>
+			</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>
+							<ButtonStyled circular>
+								<button
+									v-tooltip="'Copy debug info'"
+									:disabled="copied"
+									@click="copyToClipboard(debugInfo)"
+								>
+									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+									<template v-else> <CopyIcon /> </template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</Collapsible>
+				</div>
+			</div>
+		</div>
+	</NewModal>
+</template>

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

@@ -0,0 +1,200 @@
+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/modal/AppSettingsModal.vue

@@ -6,12 +6,13 @@ import {
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
-	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
+	ToggleRightIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
+	commonSettingsMessages,
 	defineMessage,
 	defineMessages,
 	ProgressBar,
@@ -20,9 +21,8 @@ import {
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from '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'
@@ -96,25 +96,20 @@ const tabs = [
 		content: ResourceManagementSettings,
 	},
 	{
-		name: defineMessage({
-			id: 'app.settings.tabs.feature-flags',
-			defaultMessage: 'Feature flags',
-		}),
-		icon: ReportIcon,
+		name: commonSettingsMessages.featureFlags,
+		icon: ToggleRightIcon,
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
 ]
 
-const modal = ref()
+const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function show() {
-	modal.value.show()
+	modal.value?.show()
 }
 
-const isOpen = computed(() => modal.value?.isOpen)
-
-defineExpose({ show, isOpen })
+defineExpose({ show })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
@@ -138,8 +133,8 @@ function devModeCount() {
 		settings.value.developer_mode = !!themeStore.devMode
 		devModeCounter.value = 0
 
-		if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
-			modal.value.setTab(0)
+		if (!themeStore.devMode && tabs[modal.value!.selectedTab].developerOnly) {
+			modal.value!.setTab(0)
 		}
 	}
 }
@@ -152,49 +147,46 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<TabbedModal ref="modal" :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
 		<template #title>
 			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
 				<SettingsIcon /> Settings
 			</span>
 		</template>
-
-		<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>
+		<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 class="max-w-[200px]">
+						<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>
-			</template>
-		</TabbedModal>
-	</ModalWrapper>
+			</div>
+		</template>
+	</TabbedModal>
 </template>

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

@@ -0,0 +1,78 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+			{{ formatMessage(messages.admonitionBody) }}
+		</Admonition>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button @click="modal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<TrashIcon />
+						{{ formatMessage(messages.deleteButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.confirm-delete.header',
+		defaultMessage: 'Delete instance',
+	},
+	admonitionHeader: {
+		id: 'app.instance.confirm-delete.admonition-header',
+		defaultMessage: 'This action cannot be undone',
+	},
+	admonitionBody: {
+		id: 'app.instance.confirm-delete.admonition-body',
+		defaultMessage:
+			'All data for your instance will be permanently deleted, including your worlds, configs, and all installed content.',
+	},
+	deleteButton: {
+		id: 'app.instance.confirm-delete.delete-button',
+		defaultMessage: 'Delete instance',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'delete'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+function show() {
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('delete')
+}
+
+defineExpose({
+	show,
+})
+</script>

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

@@ -1,13 +1,9 @@
+<!-- @deprecated Use ConfirmModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { ConfirmModal } from '@modrinth/ui'
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
-const props = defineProps({
+defineProps({
 	confirmationText: {
 		type: String,
 		default: '',
@@ -38,6 +34,7 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	/** @deprecated No longer used — ads are handled by provideModalBehavior */
 	showAdOnClose: {
 		type: Boolean,
 		default: true,
@@ -49,25 +46,17 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['proceed'])
-const modal = ref(null)
+const modal = useTemplateRef('modal')
 
 defineExpose({
 	show: () => {
-		hide_ads_window()
-		modal.value.show()
+		modal.value?.show()
 	},
 	hide: () => {
-		onModalHide()
-		modal.value.hide()
+		modal.value?.hide()
 	},
 })
 
-function onModalHide() {
-	if (props.showAdOnClose) {
-		show_ads_window()
-	}
-}
-
 function proceed() {
 	emit('proceed')
 }
@@ -82,8 +71,6 @@ function proceed() {
 		:description="description"
 		:proceed-icon="proceedIcon"
 		:proceed-label="proceedLabel"
-		:on-hide="onModalHide"
-		:noblur="!themeStore.advancedRendering"
 		:danger="danger"
 		:markdown="markdown"
 		@proceed="proceed"

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

@@ -0,0 +1,274 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
+		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
+				{{ formatMessage(messages.serverRequiresMods) }}
+			</Admonition>
+
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-center">
+					<span class="font-semibold text-contrast">{{
+						formatMessage(messages.requiredModpack)
+					}}</span>
+
+					<ButtonStyled type="transparent">
+						<button @click="openViewContents">
+							<EyeIcon />
+							{{ formatMessage(messages.viewContents) }}
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
+					<Avatar
+						:src="requiredContentProject.icon_url"
+						:alt="requiredContentProject.title"
+						size="48px"
+					/>
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">
+							<template v-if="usingCustomModpack && modpackVersion">
+								{{ modpackVersion.name }}
+							</template>
+							<template v-else>
+								{{ requiredContentProject.title }}
+							</template>
+						</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
+							<template v-if="modCount">
+								· {{ formatMessage(messages.modCount, { count: modCount }) }}
+							</template>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<DownloadIcon />
+						{{ formatMessage(messages.installButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+
+	<ModpackContentModal
+		ref="modpackContentModal"
+		:modpack-name="project?.name ?? ''"
+		:modpack-icon-url="project?.icon_url ?? undefined"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, EyeIcon, XIcon } from '@modrinth/assets'
+import type { ContentItem } from '@modrinth/ui'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	formatLoader,
+	ModpackContentModal,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
+import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { injectServerInstall } from '@/providers/server-install'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
+const project = ref<Labrinth.Projects.v3.Project | null>(null)
+const requiredContentProject = ref<Labrinth.Projects.v2.Project | null>(null)
+const onInstallComplete = ref<() => void>(() => {})
+const { formatMessage } = useVIntl()
+const { installServerProject, startInstallingServer, stopInstallingServer } = injectServerInstall()
+
+const usingCustomModpack = computed(() => {
+	return requiredContentProject.value?.id === project.value?.id
+})
+
+const loaderDisplay = computed(() => {
+	const loader = requiredContentProject.value?.loaders?.[0]
+	if (!loader) return ''
+	return formatLoader(formatMessage, loader)
+})
+
+const modCount = computed(() => modpackVersion.value?.dependencies?.length)
+
+async function fetchData(versionId: string) {
+	// cache is making version null for some reason so bypassing for now
+	modpackVersion.value = await get_version(versionId, 'bypass')
+
+	if (modpackVersion.value?.project_id) {
+		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
+	}
+}
+
+async function handleAccept() {
+	hide()
+	const serverProjectId = project.value?.id
+	startInstallingServer(serverProjectId)
+	try {
+		await installServerProject(serverProjectId)
+		onInstallComplete.value()
+	} catch (error) {
+		console.error('Failed to install server project from InstallToPlayModal:', error)
+	} finally {
+		stopInstallingServer(serverProjectId)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
+
+async function openViewContents() {
+	modpackContentModal.value?.showLoading()
+	try {
+		// Ensure version data is available — the useQuery may not have resolved yet
+		const versionId = modpackVersionId.value
+		const version =
+			modpackVersion.value ?? (versionId ? await get_version(versionId, 'must_revalidate') : null)
+
+		const deps = version?.dependencies ?? []
+
+		const projectIds = deps
+			.map((d: { project_id?: string }) => d.project_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const versionIds = deps
+			.map((d: { version_id?: string }) => d.version_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const projects: Labrinth.Projects.v2.Project[] =
+			projectIds.length > 0 ? await get_project_many(projectIds, 'must_revalidate') : []
+
+		const versions: Labrinth.Versions.v2.Version[] =
+			versionIds.length > 0 ? await get_version_many(versionIds, 'must_revalidate') : []
+
+		const projectMap = new Map(projects.map((p: Labrinth.Projects.v2.Project) => [p.id, p]))
+
+		const contentItems: ContentItem[] = deps.map(
+			(dep: Labrinth.Versions.v2.Dependency): ContentItem => {
+				const depProject = dep.project_id ? projectMap.get(dep.project_id) : null
+				// @ts-expect-error - version_id is missing from the type for some reason
+				const depVersion = dep.version_id
+					? // @ts-expect-error - version_id is missing from the type for some reason
+						versions.find((v: Labrinth.Versions.v2.Version) => v.id === dep.version_id)
+					: null
+
+				return {
+					file_name: dep.file_name ?? depProject?.title ?? 'Unknown',
+					project_type: depProject?.project_type ?? 'mod',
+					has_update: false,
+					update_version_id: null,
+					project: {
+						id: depProject?.id ?? dep.project_id ?? dep.file_name ?? 'unknown',
+						slug: depProject?.slug ?? dep.project_id ?? 'unknown',
+						title: depProject?.title ?? dep.file_name ?? 'Unknown',
+						icon_url: depProject?.icon_url ?? undefined,
+					},
+					...(depVersion
+						? {
+								version: {
+									id: depVersion.id,
+									file_name: depVersion.files?.[0]?.filename ?? dep.file_name,
+									version_number: depVersion.version_number ?? undefined,
+									date_published: depVersion.date_published ?? undefined,
+								},
+							}
+						: {}),
+				}
+			},
+		)
+		modpackContentModal.value?.show(contentItems)
+	} catch (err) {
+		console.error('Failed to load modpack contents:', err)
+		modpackContentModal.value?.show([])
+	}
+}
+
+async function show(
+	projectVal: Labrinth.Projects.v3.Project,
+	modpackVersionIdVal: string | null = null,
+	callback: () => void = () => {},
+	e?: MouseEvent,
+) {
+	project.value = projectVal
+	modpackVersionId.value = modpackVersionIdVal
+	modpackVersion.value = null
+	requiredContentProject.value = null
+	onInstallComplete.value = callback
+
+	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
+
+	hide_ads_window()
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+	show_ads_window()
+}
+
+const messages = defineMessages({
+	installToPlay: {
+		id: 'app.modal.install-to-play.header',
+		defaultMessage: 'Install to play',
+	},
+	sharedServerInstance: {
+		id: 'app.modal.install-to-play.shared-server-instance',
+		defaultMessage: 'Shared server instance',
+	},
+	contentRequired: {
+		id: 'app.modal.install-to-play.content-required',
+		defaultMessage: 'Content required',
+	},
+	serverRequiresMods: {
+		id: 'app.modal.install-to-play.server-requires-mods',
+		defaultMessage:
+			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',
+	},
+	requiredModpack: {
+		id: 'app.modal.install-to-play.required-modpack',
+		defaultMessage: 'Required modpack',
+	},
+	sharedInstance: {
+		id: 'app.modal.install-to-play.shared-instance',
+		defaultMessage: 'Shared instance',
+	},
+	modCount: {
+		id: 'app.modal.install-to-play.mod-count',
+		defaultMessage: '{count, plural, one {# mod} other {# mods}}',
+	},
+	installButton: {
+		id: 'app.modal.install-to-play.install-button',
+		defaultMessage: 'Install',
+	},
+	viewContents: {
+		id: 'app.modal.install-to-play.view-contents',
+		defaultMessage: 'View contents',
+	},
+})
+
+defineExpose({ show, hide })
+</script>

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

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

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ChevronRightIcon,
 	CodeIcon,
@@ -7,24 +8,79 @@ import {
 	MonitorIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, defineMessage, TabbedModal, type TabbedModalTab, useVIntl } from '@modrinth/ui'
+import {
+	Avatar,
+	commonMessages,
+	defineMessage,
+	TabbedModal,
+	type TabbedModalTab,
+	useVIntl,
+} from '@modrinth/ui'
+import type { PlatformTag } from '@modrinth/utils'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_project_v3 } from '@/helpers/cache'
+import { get_linked_modpack_info } from '@/helpers/instance'
+import { get_loader_versions } from '@/helpers/metadata'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { provideInstanceSettings } from '@/providers/instance-settings'
 
-import type { InstanceSettingsTabProps } from '../../../helpers/types'
+import type { GameInstance } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const props = defineProps<{
+	instance: GameInstance
+	offline?: boolean
+}>()
+const emit = defineEmits<{
+	unlinked: []
+}>()
 
-const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
+const isMinecraftServer = ref(false)
+const handleUnlinked = () => emit('unlinked')
+
+const instanceRef = computed(() => props.instance)
+const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
+
+function hide() {
+	tabbedModal.value?.hide()
+}
+
+provideInstanceSettings({
+	instance: instanceRef,
+	offline: props.offline,
+	isMinecraftServer,
+	onUnlinked: handleUnlinked,
+	closeModal: hide,
+})
+
+watch(
+	() => props.instance,
+	(instance) => {
+		isMinecraftServer.value = false
+		if (instance.link?.project_id) {
+			get_project_v3(instance.link.project_id, 'must_revalidate')
+				.then((project: Labrinth.Projects.v3.Project | undefined) => {
+					if (project?.minecraft_server != null) {
+						isMinecraftServer.value = true
+					}
+				})
+				.catch(() => {})
+		}
+	},
+	{ immediate: true },
+)
+
+const tabs = computed<TabbedModalTab[]>(() => [
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.general',
@@ -65,35 +121,81 @@ const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
 		icon: CodeIcon,
 		content: HooksSettings,
 	},
-]
+])
 
-const modal = ref()
-
-function show() {
-	modal.value.show()
+function getSupportedModpackLoaders() {
+	return get_loaders().then((value: PlatformTag[]) =>
+		value
+			.filter((item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla')
+			.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
+	)
 }
 
-defineExpose({ show })
-
-const titleMessage = defineMessage({
-	id: 'instance.settings.title',
-	defaultMessage: 'Settings',
+// Preload
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'fabric'],
+	queryFn: () => get_loader_versions('fabric'),
 })
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'forge'],
+	queryFn: () => get_loader_versions('forge'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'quilt'],
+	queryFn: () => get_loader_versions('quilt'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'loader-versions', 'neo'],
+	queryFn: () => get_loader_versions('neo'),
+})
+useQuery({
+	queryKey: ['instance-settings', 'game-versions'],
+	queryFn: get_game_versions,
+})
+useQuery({
+	queryKey: ['instance-settings', 'loaders', 'modpack'],
+	queryFn: getSupportedModpackLoaders,
+})
+useQuery({
+	queryKey: computed(() => ['linkedModpackInfo', props.instance.id]),
+	queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
+	enabled: computed(() => !!props.instance.link?.project_id && !props.offline),
+})
+
+function show(tabIndex?: number) {
+	if (props.instance.link?.project_id) {
+		queryClient.prefetchQuery({
+			queryKey: ['linkedModpackInfo', props.instance.id],
+			queryFn: () => get_linked_modpack_info(props.instance.id, 'stale_while_revalidate'),
+		})
+	}
+	tabbedModal.value?.show()
+	if (tabIndex !== undefined) {
+		nextTick(() => tabbedModal.value?.setTab(tabIndex))
+	}
+}
+
+defineExpose({ show, hide })
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<TabbedModal
+		ref="tabbedModal"
+		:tabs="tabs"
+		:max-width="'min(928px, calc(95vw - 10rem))'"
+		:width="'min(928px, calc(95vw - 10rem))'"
+	>
 		<template #title>
 			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
 					size="24px"
-					:tint-by="props.instance.path"
+					:tint-by="props.instance.id"
 				/>
 				{{ instance.name }} <ChevronRightIcon />
-				<span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
+				<span class="font-extrabold text-contrast">{{
+					formatMessage(commonMessages.settingsLabel)
+				}}</span>
 			</span>
 		</template>
-
-		<TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
-	</ModalWrapper>
+	</TabbedModal>
 </template>

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

@@ -1,12 +1,8 @@
+<!-- @deprecated Use NewModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { NewModal as Modal } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
 const props = defineProps({
 	header: {
 		type: String,
@@ -26,6 +22,7 @@ const props = defineProps({
 			return () => {}
 		},
 	},
+	/** @deprecated No longer used — ads are handled by provideModalBehavior */
 	showAdOnClose: {
 		type: Boolean,
 		default: true,
@@ -34,32 +31,22 @@ const props = defineProps({
 const modal = useTemplateRef('modal')
 
 defineExpose({
-	show: (e: MouseEvent) => {
-		hide_ads_window()
+	show: (e?: MouseEvent) => {
 		modal.value?.show(e)
 	},
 	hide: () => {
-		onModalHide()
 		modal.value?.hide()
 	},
 })
-
-function onModalHide() {
-	if (props.showAdOnClose) {
-		show_ads_window()
-	}
-	props.onHide?.()
-}
 </script>
 
 <template>
 	<Modal
 		ref="modal"
 		:header="header"
-		:noblur="!themeStore.advancedRendering"
 		:closable="closable"
 		:hide-header="hideHeader"
-		@hide="onModalHide"
+		:on-hide="() => props.onHide?.()"
 	>
 		<template #title>
 			<slot name="title" />

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

@@ -0,0 +1,102 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+		<p class="m-0 text-secondary">
+			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
+				<template #bold="{ children }">
+					<span class="font-medium text-contrast"><component :is="() => children" /></span>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="handleGoToInstance">
+						{{ formatMessage(messages.instance) }}
+						<RightArrowIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button @click="handleCreateAnyway">
+						<PlusIcon />
+						{{ formatMessage(messages.create) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.modpack-already-installed.header',
+		defaultMessage: 'Modpack already installed',
+	},
+	body: {
+		id: 'app.instance.modpack-already-installed.body',
+		defaultMessage:
+			'This modpack is already installed in the <bold>{instanceName}</bold> instance. Are you sure you want to duplicate it?',
+	},
+	instance: {
+		id: 'app.instance.modpack-already-installed.instance',
+		defaultMessage: 'Instance',
+	},
+	create: {
+		id: 'app.instance.modpack-already-installed.create',
+		defaultMessage: 'Create',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'go-to-instance', instanceId: string): void
+	(e: 'create-anyway'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const instanceName = ref('')
+const instanceId = ref('')
+
+function show(name: string, id: string) {
+	instanceName.value = name
+	instanceId.value = id
+	modal.value?.show()
+}
+
+function handleCancel() {
+	modal.value?.hide()
+}
+
+function handleGoToInstance() {
+	modal.value?.hide()
+	emit('go-to-instance', instanceId.value)
+}
+
+function handleCreateAnyway() {
+	modal.value?.hide()
+	emit('create-anyway')
+}
+
+defineExpose({
+	show,
+})
+</script>

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

@@ -1,12 +1,8 @@
+<!-- @deprecated Use ShareModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { ShareModal } from '@modrinth/ui'
 import { ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
 defineProps({
 	header: {
 		type: String,
@@ -34,18 +30,12 @@ const modal = ref(null)
 
 defineExpose({
 	show: (passedContent) => {
-		hide_ads_window()
 		modal.value.show(passedContent)
 	},
 	hide: () => {
-		onModalHide()
 		modal.value.hide()
 	},
 })
-
-function onModalHide() {
-	show_ads_window()
-}
 </script>
 
 <template>
@@ -56,7 +46,5 @@ function onModalHide() {
 		:share-text="shareText"
 		:link="link"
 		:open-in-new-tab="openInNewTab"
-		:on-hide="onModalHide"
-		:noblur="!themeStore.advancedRendering"
 	/>
 </template>

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

@@ -0,0 +1,305 @@
+<template>
+	<ContentDiffModal
+		ref="diffModal"
+		:header="formatMessage(messages.updateToPlay)"
+		:admonition-header="formatMessage(messages.updateRequired)"
+		:description="
+			instance ? formatMessage(messages.updateRequiredDescription, { name: instance.name }) : ''
+		"
+		:diffs="normalizedDiffs"
+		:confirm-label="formatMessage(commonMessages.updateButton)"
+		:confirm-icon="DownloadIcon"
+		:show-report-button="true"
+		@confirm="handleUpdate"
+		@cancel="handleDecline"
+		@report="handleReport"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon } from '@modrinth/assets'
+import {
+	commonMessages,
+	type ContentDiffItem,
+	ContentDiffModal,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import dayjs from 'dayjs'
+import { computed, ref, watch } from 'vue'
+
+import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { wait_for_install_job } from '@/helpers/install'
+import { update_managed_modrinth_version } from '@/helpers/instance'
+import type { GameInstance } from '@/helpers/types'
+import { injectServerInstall } from '@/providers/server-install'
+
+type Dependency = Labrinth.Versions.v3.Dependency
+type Version = Labrinth.Versions.v2.Version
+
+interface BaseDiff {
+	project_id: string
+	project?: {
+		title: string
+		icon_url?: string
+		slug: string
+	}
+	currentVersionId?: string
+	newVersionId?: string
+	currentVersion?: Version
+	newVersion?: Version
+	fileName?: string
+}
+interface AddedDiff extends BaseDiff {
+	type: 'added'
+	newVersionId: string
+}
+interface RemovedDiff extends BaseDiff {
+	type: 'removed'
+}
+interface UpdatedDiff extends BaseDiff {
+	type: 'updated'
+	currentVersionId: string
+	newVersionId: string
+}
+type DependencyDiff = AddedDiff | RemovedDiff | UpdatedDiff
+
+type ProjectInfo = {
+	id: string
+	title: string
+	icon_url?: string
+	slug: string
+}
+
+const { formatMessage } = useVIntl()
+const { startInstallingServer, stopInstallingServer } = injectServerInstall()
+type UpdateCompleteCallback = () => void | Promise<void>
+
+const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const instance = ref<GameInstance | null>(null)
+const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
+const diffs = ref<DependencyDiff[]>([])
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Version | null>(null)
+
+const normalizedDiffs = computed<ContentDiffItem[]>(() =>
+	diffs.value.map((diff) => ({
+		type: diff.type,
+		projectName: diff.project?.title,
+		fileName: diff.fileName,
+		currentVersionName: diff.currentVersion?.version_number,
+		newVersionName: diff.newVersion?.version_number,
+	})),
+)
+
+async function computeDependencyDiffs(
+	currentDeps: Dependency[],
+	latestDeps: Dependency[],
+): Promise<DependencyDiff[]> {
+	console.log('Computing dependency diffs', { currentDeps, latestDeps })
+
+	// Separate deps with project_id from file_name-only deps
+	const currentWithProject = currentDeps.filter((d) => d.project_id)
+	const latestWithProject = latestDeps.filter((d) => d.project_id)
+	const currentFileOnly = currentDeps.filter((d) => !d.project_id && d.file_name)
+	const latestFileOnly = latestDeps.filter((d) => !d.project_id && d.file_name)
+
+	const currentByProject = new Map<string, Dependency>(
+		currentWithProject.map((d) => [d.project_id!, d]),
+	)
+	const latestByProject = new Map<string, Dependency>(
+		latestWithProject.map((d) => [d.project_id!, d]),
+	)
+	const currentFilenames = new Set(currentFileOnly.map((d) => d.file_name!))
+	const latestFilenames = new Set(latestFileOnly.map((d) => d.file_name!))
+
+	const diffs: DependencyDiff[] = []
+
+	// Find added and updated dependencies (by project_id)
+	latestByProject.forEach((latestDep, projectId) => {
+		const currentDep = currentByProject.get(projectId)
+		if (!currentDep && latestDep.version_id) {
+			diffs.push({ type: 'added', project_id: projectId, newVersionId: latestDep.version_id })
+		} else if (
+			currentDep?.version_id &&
+			latestDep?.version_id &&
+			currentDep?.version_id !== latestDep.version_id
+		) {
+			diffs.push({
+				type: 'updated',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+				newVersionId: latestDep.version_id,
+			})
+		}
+	})
+
+	// Find removed dependencies (by project_id)
+	currentByProject.forEach((currentDep, projectId) => {
+		if (!latestByProject.has(projectId)) {
+			diffs.push({
+				type: 'removed',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+			})
+		}
+	})
+
+	// Find added/removed file_name-only dependencies
+	// ideally in future, this should use the hash of the file instead of filename, but since version dependencies don't include file hashes, we'll use filename as a best effort approach
+	for (const fileName of latestFilenames) {
+		if (!currentFilenames.has(fileName)) {
+			diffs.push({ type: 'added', project_id: '', newVersionId: '' as string, fileName })
+		}
+	}
+	for (const fileName of currentFilenames) {
+		if (!latestFilenames.has(fileName)) {
+			diffs.push({ type: 'removed', project_id: '', fileName })
+		}
+	}
+
+	// Fetch projects and versions of diffs
+	const allProjectIds = [...new Set(diffs.map((d) => d.project_id).filter(Boolean))]
+	const allVersionIds = [
+		...new Set(
+			[...diffs.map((d) => d.newVersionId), ...diffs.map((d) => d.currentVersionId)].filter(
+				Boolean,
+			),
+		),
+	] as string[]
+	const [projects, versions] = await Promise.all([
+		get_project_many(allProjectIds, 'bypass'),
+		get_version_many(allVersionIds, 'bypass'),
+	])
+
+	const projectMap = new Map<string, ProjectInfo>(projects.map((p: ProjectInfo) => [p.id, p]))
+	const versionMap = new Map<string, Version>(versions.map((v: Version) => [v.id, v]))
+
+	const mappedDiffs = diffs
+		.map((diff) => {
+			const project = projectMap.get(diff.project_id)
+			return {
+				...diff,
+				project: project
+					? { title: project.title, icon_url: project.icon_url, slug: project.slug }
+					: undefined,
+				currentVersion: diff.currentVersionId ? versionMap.get(diff.currentVersionId) : undefined,
+				newVersion: diff.newVersionId ? versionMap.get(diff.newVersionId) : undefined,
+			}
+		})
+		.sort((a, b) => {
+			const typeOrder = { added: 0, updated: 1, removed: 2 }
+			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
+			if (typeCompare !== 0) return typeCompare
+
+			const aDate = a.newVersion?.date_published || a.currentVersion?.date_published || ''
+			const bDate = b.newVersion?.date_published || b.currentVersion?.date_published || ''
+			return dayjs(bDate).valueOf() - dayjs(aDate).valueOf()
+		})
+		.filter((d) => d.project || d.fileName) // filter out any diffs that couldn't be matched to a project or file
+	return mappedDiffs
+}
+
+async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[] | null> {
+	if (!inst.link) return null
+	if (!modpackVersionId.value || !inst.link.version_id) return null
+
+	try {
+		// For server projects, link.project_id is the server project but
+		// link.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with link.project_id.
+		modpackVersion.value = await get_version(modpackVersionId.value, 'bypass')
+		const instanceModpackVersion = await get_version(inst.link.version_id, 'bypass')
+
+		// Compute dependency diffs between current and latest version
+		if (instanceModpackVersion && modpackVersion.value) {
+			return await computeDependencyDiffs(
+				instanceModpackVersion.dependencies || [],
+				modpackVersion.value.dependencies || [],
+			)
+		}
+	} catch (error) {
+		console.error('Error checking for updates:', error)
+		return null
+	}
+	return null
+}
+
+watch(
+	() => instance.value,
+	async (newInstance) => {
+		if (!newInstance) return
+		const result = await checkUpdateAvailable(newInstance)
+		diffs.value = result || []
+	},
+	{ immediate: true, deep: true },
+)
+
+async function handleUpdate() {
+	hide()
+	const serverProjectId = instance.value?.link?.project_id
+	if (serverProjectId) startInstallingServer(serverProjectId)
+	try {
+		if (modpackVersionId.value && instance.value) {
+			const job = await update_managed_modrinth_version(instance.value.id, modpackVersionId.value)
+			await wait_for_install_job(job.job_id)
+			await onUpdateComplete.value()
+		}
+	} catch (error) {
+		console.error('Error updating instance:', error)
+	} finally {
+		if (serverProjectId) stopInstallingServer(serverProjectId)
+	}
+}
+
+function handleReport() {
+	if (instance.value?.link?.project_id) {
+		openUrl(`https://modrinth.com/report?item=project&itemID=${instance.value.link.project_id}`)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(
+	instanceVal: GameInstance,
+	modpackVersionIdVal: string | null = null,
+	callback: UpdateCompleteCallback = () => {},
+	e?: MouseEvent,
+) {
+	instance.value = instanceVal
+	modpackVersionId.value = modpackVersionIdVal
+	onUpdateComplete.value = callback
+	diffModal.value?.show(e)
+}
+
+function hide() {
+	diffModal.value?.hide()
+}
+
+const messages = defineMessages({
+	updateToPlay: {
+		id: 'app.modal.update-to-play.header',
+		defaultMessage: 'Update to play',
+	},
+	updateRequired: {
+		id: 'app.modal.update-to-play.update-required',
+		defaultMessage: 'Update required',
+	},
+	updateRequiredDescription: {
+		id: 'app.modal.update-to-play.update-required-description',
+		defaultMessage:
+			'An update is required to play {name}. Please update to the latest version to launch the game.',
+	},
+})
+
+const hasUpdate = computed(() => {
+	if (!instance.value?.link) return false
+	return modpackVersionId.value != null && modpackVersionId.value !== instance.value.link.version_id
+})
+
+defineExpose({ show, hide, hasUpdate })
+</script>

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

@@ -1,13 +1,125 @@
 <script setup lang="ts">
-import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
 import { useTheming } from '@/store/state'
-import type { ColorTheme } from '@/store/theme.ts'
+import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
 
 const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const worldsInHomeFlag: FeatureFlag = 'worlds_in_home'
+const skipNonEssentialWarningsFlag: FeatureFlag = 'skip_non_essential_warnings'
+const skipUnknownPackWarningFlag: FeatureFlag = 'skip_unknown_pack_warning'
+const showPlayTimeFlag: FeatureFlag = 'show_instance_play_time'
+
+const messages = defineMessages({
+	colorThemeTitle: {
+		id: 'app.appearance-settings.color-theme.title',
+		defaultMessage: 'Color theme',
+	},
+	colorThemeDescription: {
+		id: 'app.appearance-settings.color-theme.description',
+		defaultMessage: 'Select your preferred color theme for Modrinth App.',
+	},
+	advancedRenderingTitle: {
+		id: 'app.appearance-settings.advanced-rendering.title',
+		defaultMessage: 'Advanced rendering',
+	},
+	advancedRenderingDescription: {
+		id: 'app.appearance-settings.advanced-rendering.description',
+		defaultMessage:
+			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+	},
+	hideNametagTitle: {
+		id: 'app.appearance-settings.hide-nametag.title',
+		defaultMessage: 'Hide nametag',
+	},
+	hideNametagDescription: {
+		id: 'app.appearance-settings.hide-nametag.description',
+		defaultMessage: 'Disables the nametag above your player on the skins page.',
+	},
+	nativeDecorationsTitle: {
+		id: 'app.appearance-settings.native-decorations.title',
+		defaultMessage: 'Native decorations',
+	},
+	nativeDecorationsDescription: {
+		id: 'app.appearance-settings.native-decorations.description',
+		defaultMessage: 'Use system window frame (app restart required).',
+	},
+	minimizeLauncherTitle: {
+		id: 'app.appearance-settings.minimize-launcher.title',
+		defaultMessage: 'Minimize launcher',
+	},
+	minimizeLauncherDescription: {
+		id: 'app.appearance-settings.minimize-launcher.description',
+		defaultMessage: 'Minimize the launcher when a Minecraft process starts.',
+	},
+	defaultLandingPageTitle: {
+		id: 'app.appearance-settings.default-landing-page.title',
+		defaultMessage: 'Default landing page',
+	},
+	defaultLandingPageDescription: {
+		id: 'app.appearance-settings.default-landing-page.description',
+		defaultMessage: 'Change the page to which the launcher opens on.',
+	},
+	defaultLandingPageHome: {
+		id: 'app.appearance-settings.default-landing-page.home',
+		defaultMessage: 'Home',
+	},
+	defaultLandingPageLibrary: {
+		id: 'app.appearance-settings.default-landing-page.library',
+		defaultMessage: 'Library',
+	},
+	selectOption: {
+		id: 'app.appearance-settings.select-option',
+		defaultMessage: 'Select an option',
+	},
+	jumpBackIntoWorldsTitle: {
+		id: 'app.appearance-settings.jump-back-into-worlds.title',
+		defaultMessage: 'Jump back into worlds',
+	},
+	jumpBackIntoWorldsDescription: {
+		id: 'app.appearance-settings.jump-back-into-worlds.description',
+		defaultMessage: 'Includes recent worlds in the "Jump back in" section on the Home page.',
+	},
+	toggleSidebarTitle: {
+		id: 'app.appearance-settings.toggle-sidebar.title',
+		defaultMessage: 'Toggle sidebar',
+	},
+	toggleSidebarDescription: {
+		id: 'app.appearance-settings.toggle-sidebar.description',
+		defaultMessage: 'Enables the ability to toggle the sidebar.',
+	},
+	unknownPackWarningTitle: {
+		id: 'app.appearance-settings.unknown-pack-warning.title',
+		defaultMessage: 'Warn me before installing unknown modpacks',
+	},
+	unknownPackWarningDescription: {
+		id: 'app.appearance-settings.unknown-pack-warning.description',
+		defaultMessage:
+			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
+	},
+	skipNonEssentialWarningsTitle: {
+		id: 'app.appearance-settings.skip-non-essential-warnings.title',
+		defaultMessage: 'Skip non-essential warnings',
+	},
+	skipNonEssentialWarningsDescription: {
+		id: 'app.appearance-settings.skip-non-essential-warnings.description',
+		defaultMessage:
+			'Automatically skips low-risk confirmations like duplicate modpack installs, normal content deletion, bulk updates, unlinking modpacks, and repair prompts. Dangerous warnings will still be shown.',
+	},
+	showPlayTimeTitle: {
+		id: 'app.appearance-settings.show-play-time.title',
+		defaultMessage: 'Show play time',
+	},
+	showPlayTimeDescription: {
+		id: 'app.appearance-settings.show-play-time.description',
+		defaultMessage: `Displays how much time you've spent playing an instance.`,
+	},
+})
 
 const os = ref(await getOS())
 const settings = ref(await get())
@@ -21,8 +133,10 @@ watch(
 )
 </script>
 <template>
-	<h2 class="m-0 text-lg font-extrabold text-contrast">Color theme</h2>
-	<p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>
+	<h2 class="m-0 text-lg font-semibold text-contrast">
+		{{ formatMessage(messages.colorThemeTitle) }}
+	</h2>
+	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>
 
 	<ThemeSelector
 		:update-color-theme="
@@ -36,12 +150,13 @@ watch(
 		system-theme-color="system"
 	/>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Advanced rendering</h2>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.advancedRenderingTitle) }}
+			</h2>
 			<p class="m-0 mt-1">
-				Enables advanced rendering such as blur effects that may cause performance issues without
-				hardware-accelerated rendering.
+				{{ formatMessage(messages.advancedRenderingDescription) }}
 			</p>
 		</div>
 
@@ -57,66 +172,154 @@ watch(
 		/>
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
-			<p class="m-0 mt-1">Disables the nametag above your player on the skins page.</p>
-		</div>
-		<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
-	</div>
-
-	<div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
-		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
-			<p class="m-0 mt-1">Use system window frame (app restart required).</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.nativeDecorationsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
 		</div>
 		<Toggle id="native-decorations" v-model="settings.native_decorations" />
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
-			<p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.minimizeLauncherTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.minimizeLauncherDescription) }}</p>
 		</div>
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
-			<p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
-		</div>
-		<Combobox
-			id="opening-page"
-			v-model="settings.default_page"
-			name="Opening page dropdown"
-			class="w-40"
-			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
-			:display-value="settings.default_page ?? 'Select an option'"
-		/>
-	</div>
-
-	<div class="mt-4 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
-			<p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.showPlayTimeTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.showPlayTimeDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag('worlds_in_home')"
+			:model-value="themeStore.getFeatureFlag(showPlayTimeFlag)"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag('worlds_in_home')
-					themeStore.featureFlags['worlds_in_home'] = newValue
-					settings.feature_flags['worlds_in_home'] = newValue
+					const newValue = !themeStore.getFeatureFlag(showPlayTimeFlag)
+					themeStore.featureFlags[showPlayTimeFlag] = newValue
+					settings.feature_flags[showPlayTimeFlag] = newValue
 				}
 			"
 		/>
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
-			<p class="m-0 mt-1">Enables the ability to toggle the sidebar.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.hideNametagTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
+		</div>
+		<Toggle
+			id="hide-nametag-skins-page"
+			:model-value="themeStore.hideNametagSkinsPage"
+			@update:model-value="
+				(e) => {
+					themeStore.hideNametagSkinsPage = !!e
+					settings.hide_nametag_skins_page = themeStore.hideNametagSkinsPage
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.defaultLandingPageTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.defaultLandingPageDescription) }}</p>
+		</div>
+		<Combobox
+			id="opening-page"
+			v-model="settings.default_page"
+			name="Opening page dropdown"
+			class="max-w-40"
+			:options="[
+				{
+					value: 'Home',
+					label: formatMessage(messages.defaultLandingPageHome),
+				},
+				{
+					value: 'Library',
+					label: formatMessage(messages.defaultLandingPageLibrary),
+				},
+			]"
+			:display-value="settings.default_page ?? 'Select an option'"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.jumpBackIntoWorldsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="themeStore.getFeatureFlag(worldsInHomeFlag)"
+			@update:model-value="
+				() => {
+					const newValue = !themeStore.getFeatureFlag(worldsInHomeFlag)
+					themeStore.featureFlags[worldsInHomeFlag] = newValue
+					settings.feature_flags[worldsInHomeFlag] = newValue
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.unknownPackWarningTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFlag)"
+			@update:model-value="
+				(e) => {
+					const warnBeforeUnknownPackInstall = !!e
+					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
+					themeStore.featureFlags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
+					settings.feature_flags[skipUnknownPackWarningFlag] = skipUnknownPackWarning
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between gap-4">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.skipNonEssentialWarningsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.skipNonEssentialWarningsDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)"
+			@update:model-value="
+				() => {
+					const newValue = !themeStore.getFeatureFlag(skipNonEssentialWarningsFlag)
+					themeStore.featureFlags[skipNonEssentialWarningsFlag] = newValue
+					settings.feature_flags[skipNonEssentialWarningsFlag] = newValue
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.toggleSidebarTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
 		</div>
 		<Toggle
 			id="toggle-sidebar"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { injectNotificationManager, Slider, Toggle } from '@modrinth/ui'
+import { injectNotificationManager, Slider, StyledInput, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import useMemorySlider from '@/composables/useMemorySlider'
@@ -52,128 +52,135 @@ watch(
 
 <template>
 	<div>
-		<h2 class="m-0 text-lg font-extrabold text-contrast">Window size</h2>
+		<div class="flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Fullscreen</h3>
+					<p class="m-0 leading-tight">
+						Overwrites the options.txt file to start in full screen when launched.
+					</p>
+				</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Fullscreen</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					Overwrites the options.txt file to start in full screen when launched.
-				</p>
+				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
 			</div>
 
-			<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
-		</div>
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Width</h3>
+					<p class="m-0 leading-tight">The width of the game window when launched.</p>
+				</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Width</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					The width of the game window when launched.
-				</p>
+				<StyledInput
+					id="width"
+					v-model="settings.game_resolution[0]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					placeholder="Enter width..."
+				/>
 			</div>
 
-			<input
-				id="width"
-				v-model="settings.game_resolution[0]"
-				:disabled="settings.force_fullscreen"
-				autocomplete="off"
-				type="number"
-				placeholder="Enter width..."
-			/>
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Height</h3>
+					<p class="m-0 leading-tight">The height of the game window when launched.</p>
+				</div>
+
+				<StyledInput
+					id="height"
+					v-model="settings.game_resolution[1]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					placeholder="Enter height..."
+				/>
+			</div>
 		</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Height</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					The height of the game window when launched.
-				</p>
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
+
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Memory allocated</h2>
+				<Slider
+					id="max-memory"
+					v-model="settings.memory.maximum"
+					:min="512"
+					:max="maxMemory"
+					:step="64"
+					:snap-points="snapPoints"
+					:snap-range="512"
+					unit="MB"
+				/>
+				<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
 			</div>
 
-			<input
-				id="height"
-				v-model="settings.game_resolution[1]"
-				:disabled="settings.force_fullscreen"
-				autocomplete="off"
-				type="number"
-				class="input"
-				placeholder="Enter height..."
-			/>
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Java arguments</h2>
+				<StyledInput
+					id="java-args"
+					v-model="settings.launchArgs"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter java arguments..."
+					wrapper-class="w-full"
+				/>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Environmental variables</h2>
+				<StyledInput
+					id="env-vars"
+					v-model="settings.envVars"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter environmental variables..."
+					wrapper-class="w-full"
+				/>
+			</div>
 		</div>
 
-		<hr class="mt-4 bg-button-border border-none h-[1px]" />
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
 
-		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Memory allocated</h2>
-		<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
-		<Slider
-			id="max-memory"
-			v-model="settings.memory.maximum"
-			:min="512"
-			:max="maxMemory"
-			:step="64"
-			:snap-points="snapPoints"
-			:snap-range="512"
-			unit="MB"
-		/>
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Pre launch hook</h3>
+				<StyledInput
+					id="pre-launch"
+					v-model="settings.hooks.pre_launch"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter pre-launch command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Ran before the instance is launched.</p>
+			</div>
 
-		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
-		<input
-			id="java-args"
-			v-model="settings.launchArgs"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter java arguments..."
-			class="w-full"
-		/>
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Wrapper hook</h3>
+				<StyledInput
+					id="wrapper"
+					v-model="settings.hooks.wrapper"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter wrapper command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Wrapper command for launching Minecraft.</p>
+			</div>
 
-		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
-		<input
-			id="env-vars"
-			v-model="settings.envVars"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter environmental variables..."
-			class="w-full"
-		/>
-
-		<hr class="mt-4 bg-button-border border-none h-[1px]" />
-
-		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Hooks</h2>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
-		<input
-			id="pre-launch"
-			v-model="settings.hooks.pre_launch"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter pre-launch command..."
-			class="w-full"
-		/>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-			Wrapper command for launching Minecraft.
-		</p>
-		<input
-			id="wrapper"
-			v-model="settings.hooks.wrapper"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter wrapper command..."
-			class="w-full"
-		/>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
-		<input
-			id="post-exit"
-			v-model="settings.hooks.post_exit"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter post-exit command..."
-			class="w-full"
-		/>
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Post exit hook</h3>
+				<StyledInput
+					id="post-exit"
+					v-model="settings.hooks.post_exit"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter post-exit command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Ran after the game closes.</p>
+			</div>
+		</div>
 	</div>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Toggle } from '@modrinth/ui'
+import { ButtonStyled, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -25,17 +25,28 @@ watch(
 )
 </script>
 <template>
-	<div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-				{{ option.replaceAll('_', ' ') }}
-			</h2>
+	<div class="flex flex-col gap-2.5 min-w-[600px]">
+		<div v-for="option in options" :key="option" class="flex items-center justify-between">
+			<div>
+				<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
+					{{ option.replaceAll('_', ' ') }}
+				</h2>
+			</div>
+			<div class="flex items-center gap-2">
+				<ButtonStyled type="transparent">
+					<button
+						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
+						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
+					>
+						Reset to default
+					</button>
+				</ButtonStyled>
+				<Toggle
+					id="advanced-rendering"
+					:model-value="themeStore.getFeatureFlag(option)"
+					@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
+				/>
+			</div>
 		</div>
-
-		<Toggle
-			id="advanced-rendering"
-			:model-value="themeStore.getFeatureFlag(option)"
-			@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
-		/>
 	</div>
 </template>

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

@@ -21,15 +21,21 @@ async function updateJavaVersion(version) {
 }
 </script>
 <template>
-	<div v-for="(javaVersion, index) in [25, 21, 17, 8]" :key="`java-${javaVersion}`">
-		<h2 class="m-0 text-lg font-extrabold text-contrast" :class="{ 'mt-4': index !== 0 }">
-			Java {{ javaVersion }} location
-		</h2>
-		<JavaSelector
-			:id="'java-selector-' + javaVersion"
-			v-model="javaVersions[javaVersion]"
-			:version="javaVersion"
-			@update:model-value="updateJavaVersion"
-		/>
+	<div class="flex flex-col gap-6">
+		<div
+			v-for="(javaVersion, index) in [25, 21, 17, 8]"
+			:key="`java-${javaVersion}`"
+			class="flex flex-col gap-2.5"
+		>
+			<h2 class="m-0 text-lg font-semibold text-contrast" :class="{ 'mt-4': index !== 0 }">
+				Java {{ javaVersion }} location
+			</h2>
+			<JavaSelector
+				:id="'java-selector-' + javaVersion"
+				v-model="javaVersions[javaVersion]"
+				:version="javaVersion"
+				@update:model-value="updateJavaVersion"
+			/>
+		</div>
 	</div>
 </template>

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

@@ -8,14 +8,14 @@ import {
 	LOCALES,
 	useVIntl,
 } from '@modrinth/ui'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import i18n from '@/i18n.config'
 
 const { formatMessage } = useVIntl()
 
-const platform = formatMessage(languageSelectorMessages.platformApp)
+const platform = computed(() => formatMessage(languageSelectorMessages.platformApp))
 
 const settings = ref(await get())
 
@@ -43,7 +43,7 @@ async function onLocaleChange(newLocale: string) {
 </script>
 
 <template>
-	<h2 class="m-0 text-lg font-extrabold text-contrast">Language</h2>
+	<h2 class="m-0 text-lg font-semibold text-contrast">Language</h2>
 
 	<Admonition type="warning" class="mt-2 mb-4">
 		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}