Add refresh button in files tab behind feature flag

Co-authored-by: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>

.cargo/config.toml

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

.github/ISSUE_TEMPLATE/1-app-bug.yml

@@ -1,6 +1,7 @@
-name: 🎮 Modrinth App bug
-description: Report an issue in the Modrinth Launcher.
-labels: [bug, app]
+name: 🎮 Bug with Modrinth App
+description: For issues with Modrinth App.
+labels: [app]
+type: 'bug'
 body:
   - type: checkboxes
     attributes:

.github/ISSUE_TEMPLATE/2-web-bug.yml

@@ -1,6 +1,7 @@
-name: 🌐 Website bug (modrinth.com)
-description: Report an issue on the Modrinth website.
-labels: [bug, web]
+name: 🌐 Bug with Modrinth.com
+description: For issues with the Modrinth website.
+labels: [website]
+type: 'bug'
 body:
   - type: checkboxes
     attributes:

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

@@ -0,0 +1,63 @@
+name: 👥 Bug with Modrinth Hosting
+description: For issues with a Modrinth Hosting product.
+labels: [hosting]
+type: 'bug'
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+  - type: dropdown
+    id: issue-location
+    attributes:
+      label: Is this an issue in the control panel or with the Minecraft server itself?
+      options:
+        - Control panel (on Modrinth.com)
+        - Minecraft server
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on? (if a panel issue)
+      multiple: true
+      options:
+        - N/A
+        - Chrome (including Arc, Brave, Opera, Vivaldi)
+        - Microsoft Edge
+        - Firefox
+        - Safari
+        - Other (please specify)
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/4-api-bug.yml

@@ -1,6 +1,7 @@
-name: 🛠️ API issue (api.modrinth.com)
-description: Report an issue regarding the Modrinth API.
-labels: [bug, backend]
+name: 🛠 Bug with Modrinth API
+description: For issues with the Modrinth API for developers.
+labels: [api, backend]
+type: 'bug'
 body:
   - type: checkboxes
     attributes:

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

@@ -1,6 +1,6 @@
-name: 💡 Feature Request
+name: 💡 Feature request
 description: Suggest an idea
-labels: [enhancement]
+type: 'feature'
 
 body:
   - type: checkboxes
@@ -17,9 +17,10 @@ body:
       label: What parts of Modrinth is your feature request related too?
       multiple: true
       options:
-        - App
-        - Website
-        - API
+        - Modrinth App
+        - Modrinth.com website
+        - Modrinth Hosting
+        - Modrinth API for developers
   - type: textarea
     attributes:
       label: Is your suggested feature related to a problem? Please describe.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +1,8 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
-  - name: 🫶 Support Portal
-    about: Get support using through our portal.
+  - name: 🫶 Support portal
+    about: Get support using through our support website.
     url: https://support.modrinth.com
-  - name: 💬 Chat
+  - name: 💬 Chat on Discord
     about: Join our Discord server to chat about Modrinth.
     url: https://discord.modrinth.com
-  - name: 🛣️ Roadmap
-    about: View our Roadmap. Please do not open issues for items on our roadmap.
-    url: https://roadmap.modrinth.com
-  - name: 📚 Documentation
-    about: Useful documentation about Modrinth's API
-    url: https://docs.modrinth.com

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

@@ -2,50 +2,64 @@
 applyTo: '**/*.vue'
 ---
 
-You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using @vintl/vintl-nuxt (which wraps FormatJS).
+You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using vue-i18n with utilities from `@modrinth/ui`.
 
 Please follow these rules precisely:
 
 1. Identify translatable strings
 
 - Scan the <template> for all user-visible strings (inner text, alt attributes, placeholders, button labels, etc.). Do not extract dynamic expressions (like {{ user.name }}) or HTML tags. Only extract static human-readable text.
+- There may be strings within the <script> block, e.g dropdown option labels, notifications etc.
 
 2. Create message definitions
 
-- In the <script setup> block, import `defineMessage` or `defineMessages` from `@vintl/vintl`.
+- In the <script setup> block, import `defineMessage` or `defineMessages` from `@modrinth/ui`.
 - For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
   Example:
   const messages = defineMessages({
   welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
-  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You’re now part of the community…' },
+  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You're now part of the community…' },
   })
 
 3. Handle variables and ICU formats
 
 - Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
-- For numbers/dates/times, use ICU/FormatJS options (e.g., currency): `{price, number, ::currency/USD}`
+- For numbers/dates/times, use ICU options (e.g., currency): `{price, number, ::currency/USD}`
 - For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
 
 4. Rich-text messages (links/markup)
 
 - In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
   "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
-- Render rich-text messages with `<IntlFormatted>` from `@vintl/vintl/components` and map tags via `values`:
-  <IntlFormatted
-    :message="messages.tosLabel"
-    :values="{
-      'terms-link': (chunks) => <NuxtLink to='/terms'>{chunks}</NuxtLink>,
-      'privacy-link': (chunks) => <NuxtLink to='/privacy'>{chunks}</NuxtLink>,
-    }"
-  />
-- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` and map `'strong': (c) => <strong>{c}</strong>`
+- Render rich-text messages with `<IntlFormatted>` from `@modrinth/ui` using named slots:
+  <IntlFormatted :message-id="messages.tosLabel">
+    <template #terms-link="{ children }">
+      <NuxtLink to="/terms">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+    <template #privacy-link="{ children }">
+      <NuxtLink to="/privacy">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+  </IntlFormatted>
+- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
+  <template #strong="{ children }">
+    <strong><component :is="() => children" /></strong>
+  </template>
+- For more complex child handling, use `normalizeChildren` from `@modrinth/ui`:
+  <template #bold="{ children }">
+    <strong><component :is="() => normalizeChildren(children)" /></strong>
+  </template>
 
 5. Formatting in templates
 
-- Import and use `useVIntl()`; prefer `formatMessage` for simple strings:
+- Import and use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
   `const { formatMessage } = useVIntl()`
   `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
-- Vue methods like `$formatMessage`, `$formatNumber`, `$formatDate` are also available if needed.
+- Pass variables as a second argument:
+  `{{ formatMessage(messages.greeting, { name: user.name }) }}`
 
 6. Naming conventions and id stability
 
@@ -57,7 +71,8 @@ Please follow these rules precisely:
 
 8. Update imports and remove literals
 
-- Ensure imports for `defineMessage`/`defineMessages`, `useVIntl`, and `<IntlFormatted>` are present. Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
+- Ensure imports from `@modrinth/ui` are present: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, and optionally `normalizeChildren`.
+- Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
 
 9. Preserve functionality
 

.github/workflows/COPYING.md

@@ -0,0 +1,3 @@
+# Copying
+
+Modrinth's Github workflows are licensed under the MIT License, which is provided in the file [LICENSE](./LICENSE).

.github/workflows/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2025 Rinth, Inc.
+
+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.

.github/workflows/check-generic.yml

@@ -0,0 +1,27 @@
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  CARGO_TERM_COLOR: always
+  SQLX_OFFLINE: true
+
+jobs:
+  typos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: crate-ci/typos@v1.43.1
+
+  # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
+  tombi:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: taiki-e/install-action@v2
+        with:
+          tool: tombi
+      - run: tombi lint
+      - run: tombi fmt --check

.github/workflows/check-rust.yml

@@ -0,0 +1,19 @@
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  CARGO_TERM_COLOR: always
+  SQLX_OFFLINE: true
+
+jobs:
+  shear:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: cargo-bins/cargo-binstall@main
+      - run: cargo binstall --no-confirm cargo-shear
+      - run: cargo shear

.github/workflows/frontend-deploy.yml

@@ -0,0 +1,143 @@
+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)'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure environment
+        id: meta
+        run: |
+          echo "cmd=deploy" >> $GITHUB_OUTPUT
+
+          ENV_INPUT="${{ inputs.environment }}"
+          REF="${{ github.ref }}"
+          SHA_SHORT="${GITHUB_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 pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Inject build variables
+        working-directory: ./apps/frontend
+        run: |
+          if [ "${{ steps.meta.outputs.env }}" == "staging" ]; then
+            echo "Injecting staging variables from wrangler.jsonc..."
+            jq -r '.env.staging.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          else
+            echo "Injecting production variables from wrangler.jsonc..."
+            jq -r '.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          fi
+
+      - name: Install dependencies
+        working-directory: ./apps/frontend
+        run: pnpm install
+
+      - name: Build frontend
+        working-directory: ./apps/frontend
+        run: pnpm build
+        env:
+          CF_PAGES_BRANCH: ${{ github.ref_name }}
+          CF_PAGES_COMMIT_SHA: ${{ github.sha }}
+          CF_PAGES_URL: ${{ steps.meta.outputs.url }}
+          BUILD_ENV: ${{ steps.meta.outputs.env }}
+          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Create Sentry release and upload sourcemaps
+        uses: getsentry/action-release@v3
+        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@v3
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
+          workingDirectory: ./apps/frontend
+          packageManager: pnpm
+          wranglerVersion: '4.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@v6
+        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,72 @@
+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
+    strategy:
+      matrix:
+        environment: [staging-preview, production-preview]
+    with:
+      environment: ${{ matrix.environment }}
+
+  comment:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - name: Download deployment URLs
+        uses: actions/download-artifact@v7
+        with:
+          pattern: deployment-url-*
+          merge-multiple: true
+
+      - name: Read deployment URLs
+        id: urls
+        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
+
+      - name: Find comment
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/find-comment@v3
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: Frontend previews
+
+      - name: Comment deploy URL on PR
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/create-or-update-comment@v5
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          body: |
+            ## Frontend previews
+
+            Last deployed commit is [${{ github.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.sha }})
+
+            | Environment | URL |
+            |-------------|-----|
+            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
+            | production  | ${{ steps.urls.outputs.production-preview-url }} |
+          edit-mode: replace

.github/workflows/i18n-pull.yml

@@ -11,7 +11,7 @@ concurrency:
 jobs:
   pull_translations:
     name: 'Pull translations from Crowdin'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/main'
     concurrency:
       group: i18n-pull:${{ github.ref }}

.github/workflows/i18n-push.yml

@@ -18,7 +18,7 @@ concurrency:
 jobs:
   push_translations:
     name: Push sources to Crowdin
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/main'
     concurrency:
       group: i18n-push:${{ github.ref }}

.github/workflows/labrinth-docker.yml

@@ -7,11 +7,15 @@ on:
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
   merge_group:
     types: [checks_requested]
 

.github/workflows/theseus-build.yml

@@ -19,7 +19,7 @@ on:
       sign-windows-binaries:
         description: Sign Windows binaries
         type: boolean
-        default: true
+        default: false
         required: false
 
 jobs:
@@ -28,45 +28,60 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [macos-latest, windows-latest, ubuntu-22.04]
+        platform: [macos-latest, windows-latest, ubuntu-latest]
         include:
           - platform: macos-latest
             artifact-target-name: universal-apple-darwin
           - platform: windows-latest
             artifact-target-name: x86_64-pc-windows-msvc
-          - platform: ubuntu-22.04
+          - platform: ubuntu-latest
             artifact-target-name: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: 📥 Check out code
+      - name: Check out code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: 🧰 Setup Rust toolchain
+      - name: Setup Rust toolchain
         uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
           rustflags: ''
           target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: 🧰 Install pnpm
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
 
-      - name: 🧰 Setup Node.js
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: pnpm
 
-      - name: 🧰 Install Linux build dependencies
+      - name: Generate tauri-dev.conf.json
+        shell: bash
+        run: |
+          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: Install Linux build dependencies
         if: startsWith(matrix.platform, 'ubuntu')
         run: |
           sudo apt-get update
           sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
 
-      - name: 🧰 Setup Dasel
+      - name: Setup Dasel
         uses: jaxxstorm/action-install-gh-release@v2.1.0
         with:
           repo: TomWright/dasel
@@ -75,7 +90,7 @@ jobs:
           rename-to: ${{ startsWith(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/')"
@@ -86,13 +101,13 @@ jobs:
 
           cp packages/app-lib/.env.prod packages/app-lib/.env
 
-      - name: 💨 Setup Turbo cache
+      - name: Setup Turbo cache
         uses: rharkor/caching-for-turbo@v1.8
 
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: pnpm install
 
-      - name: ✍️ Set up Windows code signing
+      - name: Set up Windows code signing
         if: startsWith(matrix.platform, 'windows')
         shell: bash
         run: |
@@ -102,8 +117,8 @@ 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
+      - name: Build macOS app
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
         if: startsWith(matrix.platform, 'macos')
         env:
           ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
@@ -116,19 +131,19 @@ 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
+      - name: Build Linux app
+        run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
         if: startsWith(matrix.platform, 'ubuntu')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
-      - 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_11_X64"
-          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
+          $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
+          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
           Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
         if: startsWith(matrix.platform, 'windows')
         env:
@@ -138,7 +153,7 @@ 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
+      - name: Upload app bundles
         uses: actions/upload-artifact@v4
         with:
           name: App bundle (${{ matrix.artifact-target-name }})
@@ -146,7 +161,13 @@ jobs:
             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/turbo-ci.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   build:
     name: Lint and Test
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     env:
       # Ensure pnpm output is colored in GitHub Actions logs
@@ -70,23 +70,37 @@ jobs:
       - name: 🧰 Install dependencies
         run: pnpm install
 
+      - 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
+        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')
+          echo "Labrinth test cache status: $LABRINTH_TEST_STATUS"
+          if [ "$LABRINTH_TEST_STATUS" = "HIT" ]; then
+            echo "needs_services=false" >> $GITHUB_OUTPUT
+          else
+            echo "needs_services=true" >> $GITHUB_OUTPUT
+          fi
+
       - name: ⚙️ Start services
+        if: steps.check-labrinth.outputs.needs_services == 'true'
         run: docker compose up --wait
 
       - 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: ⚙️ Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
-
       - name: 🔍 Lint and test
         run: pnpm run ci
 
       - name: 🔍 Verify intl:extract has been run
         run: |
-          pnpm intl:extract
+          pnpm turbo run intl:extract --force
           git diff --exit-code --color */*/src/locales/en-US/index.json

.gitignore

@@ -64,3 +64,16 @@ generated
 app-playground-data/*
 
 .astro
+.claude
+.letta
+
+# labrinth demo fixtures
+apps/labrinth/fixtures/demo
+
+*storybook.log
+storybook-static
+
+.wrangler/
+
+# frontend robots.txt
+apps/frontend/src/public/robots.txt

.idea/code.iml

@@ -11,9 +11,15 @@
       <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
       <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" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>

.vscode/settings.json

@@ -11,5 +11,23 @@
 		"source.fixAll.eslint": "explicit",
 		"source.organizeImports": "always"
 	},
-	"editor.defaultFormatter": "esbenp.prettier-vscode"
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[vue]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[scss]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[css]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[rust]": {
+		"editor.defaultFormatter": "rust-lang.rust-analyzer"
+	}
 }

CLAUDE.md

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

COPYING.md

@@ -8,10 +8,14 @@ For detailed information, consult each package's COPYING.md, LICENSE.txt, or LIC
 
 The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
 
-> All rights reserved. © 2020-2024 Rinth, Inc.
+> All rights reserved. © 2020-2025 Rinth, Inc.
 
 This includes, but may not be limited to, the following files:
 
 - .idea/icon.svg
+- .github/api_cover.png
+- .github/app_cover.png
+- .github/monorepo_cover.png
+- .github/web_cover.png
 
 If you fork this repository, you must remove all Modrinth branding assets from your fork.

Cargo.toml

@@ -1,163 +1,189 @@
 [workspace]
 resolver = "2"
 members = [
-	"apps/app",
-	"apps/app-playground",
-	"apps/daedalus_client",
-	"apps/labrinth",
-	"packages/app-lib",
-	"packages/ariadne",
-	"packages/daedalus",
+  "apps/app",
+  "apps/app-playground",
+  "apps/daedalus_client",
+  "apps/labrinth",
+  "packages/app-lib",
+  "packages/ariadne",
+  "packages/daedalus",
+  "packages/modrinth-log",
+  "packages/modrinth-maxmind",
+  "packages/modrinth-util",
+  "packages/path-util",
 ]
 
 [workspace.package]
 edition = "2024"
+rust-version = "1.90.0"
+repository = "https://github.com/modrinth/code"
 
 [workspace.dependencies]
 actix-cors = "0.7.1"
-actix-files = "0.6.6"
-actix-http = "3.11.0"
+actix-files = "0.6.8"
+actix-http = "3.11.2"
 actix-multipart = "0.7.2"
-actix-rt = "2.10.0"
+actix-rt = "2.11.0"
 actix-web = "4.11.0"
 actix-web-prom = "0.10.0"
 actix-ws = "0.3.0"
+arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
-async_zip = "0.0.17"
-async-compression = { version = "0.4.27", default-features = false }
+async-compression = { version = "0.4.32", default-features = false }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
-	"runtime-tokio-hyper-rustls",
+  "runtime-tokio-hyper-rustls",
+] }
+async-trait = "0.1.89"
+async-tungstenite = { version = "0.31.0", default-features = false, features = [
+  "futures-03-sink"
 ] }
-async-trait = "0.1.88"
-async-tungstenite = { version = "0.30.0", default-features = false, features = ["futures-03-sink"] }
 async-walkdir = "2.1.0"
+async_zip = "0.0.18"
 base64 = "0.22.1"
-bitflags = "2.9.1"
-bytemuck = "1.23.1"
+bitflags = "2.9.4"
+bytemuck = "1.24.0"
 bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
-chrono = "0.4.41"
-cidre = { version = "0.11.2", default-features = false, features = ["macos_15_0"] }
-clap = "4.5.43"
-clickhouse = "0.13.3"
+chrono = "0.4.42"
+cidre = { version = "0.11.3", default-features = false, features = [
+  "macos_15_0"
+] }
+clap = "4.5.48"
+clickhouse = "0.14.0"
+color-eyre = "0.6.5"
 color-thief = "0.2.2"
-console-subscriber = "0.4.1"
+const_format = "0.2.34"
 daedalus = { path = "packages/daedalus" }
 dashmap = "6.1.0"
-data-url = "0.3.1"
-deadpool-redis = "0.22.0"
+data-url = "0.3.2"
+deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
 derive_more = "2.0.1"
+directories = "6.0.0"
 dirs = "6.0.0"
-discord-rich-presence = "0.2.5"
+discord-rich-presence = "1.0.0"
 dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
 encoding_rs = "0.8.35"
-enumset = "1.1.7"
-flate2 = "1.1.2"
+enumset = "1.1.10"
+eyre = "0.6.12"
+flate2 = "1.1.4"
 fs4 = { version = "0.13.1", default-features = false }
-futures = { version = "0.3.31", default-features = false }
+futures = "0.3.31"
 futures-util = "0.3.31"
 heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-hyper = "1.6.0"
+hyper = "1.7.0"
 hyper-rustls = { version = "0.27.7", default-features = false, features = [
-	"http1",
-	"native-tokio",
-	"ring",
-	"tls12",
+  "aws-lc-rs",
+  "http1",
+  "native-tokio",
+  "tls12",
 ] }
-hyper-util = "0.1.16"
-iana-time-zone = "0.1.63"
-image = { version = "0.25.6", default-features = false, features = ["rayon"] }
-indexmap = "2.10.0"
+hyper-util = "0.1.17"
+iana-time-zone = "0.1.64"
+image = { version = "0.25.8", default-features = false, features = ["rayon"] }
+indexmap = "2.11.4"
 indicatif = "0.18.0"
 itertools = "0.14.0"
 jemalloc_pprof = "0.8.1"
-json-patch = { version = "4.0.0", default-features = false }
-lettre = { version = "0.11.18", default-features = false, features = [
-	"builder",
-	"hostname",
-	"pool",
-	"ring",
-	"rustls",
-	"rustls-native-certs",
-	"tokio1-rustls",
-	"smtp-transport",
-	"tokio1",
+json-patch = { version = "4.1.0", default-features = false }
+lettre = { version = "0.11.19", default-features = false, features = [
+  "aws-lc-rs",
+  "builder",
+  "hostname",
+  "pool",
+  "rustls",
+  "rustls-native-certs",
+  "smtp-transport",
+  "tokio1",
+  "tokio1-rustls",
 ] }
 maxminddb = "0.26.0"
-meilisearch-sdk = { version = "0.29.1", default-features = false }
+meilisearch-sdk = { version = "0.30.0", default-features = false }
+modrinth-log = { path = "packages/modrinth-log" }
+modrinth-util = { path = "packages/modrinth-util" }
+muralpay = { path = "packages/muralpay" }
 murmur2 = "0.1.0"
-native-dialog = "0.9.0"
+native-dialog = "0.9.2"
 notify = { version = "8.2.0", default-features = false }
 notify-debouncer-mini = { version = "0.7.0", default-features = false }
 p256 = "0.13.2"
+parking_lot = "0.12.5"
 paste = "1.0.15"
-phf = { version = "0.12.1", features = ["macros"] }
-png = "0.17.16"
+path-util = { path = "packages/path-util" }
+phf = { version = "0.13.1", features = ["macros"] }
+png = "0.18.0"
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
-quick-xml = "0.38.1"
-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
-redis = "0.32.4"
-regex = "1.11.1"
-reqwest = { version = "0.12.22", default-features = false }
+quick-xml = "0.38.3"
+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
+redis = "0.32.7"
+regex = "1.12.2"
+reqwest = { version = "0.12.24", default-features = false }
 rgb = "0.8.52"
-rust_decimal = { version = "1.37.2", features = ["serde-with-float", "serde-with-str"] }
+rust_decimal = { version = "1.39.0", features = [
+  "serde-with-float",
+  "serde-with-str"
+] }
 rust_iso3166 = "0.1.14"
-rust-s3 = { version = "0.35.1", default-features = false, features = [
-	"fail-on-err",
-	"tags",
-	"tokio-rustls-tls",
+rust-s3 = { version = "0.37.0", default-features = false, features = [
+  "fail-on-err",
+  "tags",
+  "tokio-rustls-tls",
 ] }
+rustls = "0.23.32"
 rusty-money = "0.4.1"
-sentry = { version = "0.42.0", default-features = false, features = [
-	"backtrace",
-	"contexts",
-	"debug-images",
-	"panic",
-	"reqwest",
-	"rustls",
+secrecy = "0.10.3"
+sentry = { version = "0.45.0", default-features = false, features = [
+  "backtrace",
+  "contexts",
+  "debug-images",
+  "panic",
+  "reqwest",
+  "rustls",
 ] }
-sentry-actix = "0.42.0"
-serde = "1.0.219"
-serde_bytes = "0.11.17"
+serde = "1.0.228"
+serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"
-serde_json = "1.0.142"
-serde_with = "3.14.0"
-serde-xml-rs = "0.8.1" # Also an XML (de)serializer, consider dropping yaserde in favor of this
+serde_json = "1.0.145"
+serde_with = "3.15.0"
+serde-xml-rs = "0.8.1"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
 sha1 = "0.10.6"
 sha1_smol = { version = "1.0.1", features = ["std"] }
 sha2 = "0.10.9"
-spdx = "0.10.9"
+shlex = "1.3.0"
+spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
-sysinfo = { version = "0.36.1", default-features = false }
+sqlx-tracing = { path = "packages/sqlx-tracing" }
+strum = "0.27.2"
+sysinfo = { version = "0.37.2", default-features = false }
 tar = "0.4.44"
-tauri = "2.7.0"
-tauri-build = "2.3.1"
-tauri-plugin-deep-link = "2.4.1"
-tauri-plugin-dialog = "2.3.2"
-tauri-plugin-http = "2.5.1"
-tauri-plugin-opener = "2.4.0"
-tauri-plugin-os = "2.3.0"
-tauri-plugin-single-instance = "2.3.2"
+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-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 = [
-	"rustls-tls",
-	"zip",
+  "rustls-tls",
+  "zip",
 ] }
 tauri-plugin-window-state = "2.4.0"
-tempfile = "3.20.0"
+tempfile = "3.23.0"
 theseus = { path = "packages/app-lib" }
-thiserror = "2.0.12"
+thiserror = "2.0.17"
 tikv-jemalloc-ctl = "0.6.0"
 tikv-jemallocator = "0.6.0"
 tokio = "1.47.1"
@@ -165,26 +191,32 @@ tokio-stream = "0.1.17"
 tokio-util = "0.7.16"
 totp-rs = "5.7.0"
 tracing = "0.1.41"
-tracing-actix-web = "0.7.19"
+tracing-actix-web = { version = "0.7.19", default-features = false }
+tracing-ecs = "0.5.0"
 tracing-error = "0.2.1"
-tracing-subscriber = "0.3.19"
-url = "2.5.4"
+tracing-subscriber = "0.3.20"
+typed-path = "0.12.0"
+url = "2.5.7"
 urlencoding = "2.1.3"
-uuid = "1.17.0"
+utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
+utoipa-actix-web = { version = "0.1.2" }
+utoipa-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
+uuid = "1.18.1"
 validator = "0.20.0"
-webp = { version = "0.3.0", default-features = false }
-whoami = "1.6.0"
-windows = "0.61.3"
-windows-core = "0.61.2"
+webp = { version = "0.3.1", default-features = false }
+webview2-com = "0.38.0"  # Should be updated in lockstep with wry
+whoami = "1.6.1"
+windows = "=0.61.3"  # Locked on 0.61 until we can update windows-core to 0.62
+windows-core = "=0.61.2"  # Locked on 0.61 until webview2-com updates to 0.62
 winreg = "0.55.0"
 woothee = "0.13.0"
 yaserde = "0.12.0"
-zbus = "5.9.0"
-zip = { version = "4.3.0", default-features = false, features = [
-	"bzip2",
-	"deflate",
-	"deflate64",
-	"zstd",
+zbus = "5.11.0"
+zip = { version = "6.0.0", default-features = false, features = [
+  "bzip2",
+  "deflate",
+  "deflate64",
+  "zstd",
 ] }
 zxcvbn = "3.1.0"
 
@@ -208,7 +240,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"
@@ -219,24 +251,24 @@ redundant_clone = "warn"
 redundant_feature_names = "warn"
 redundant_type_annotations = "warn"
 todo = "warn"
+too_many_arguments = "allow"
+uninlined_format_args = "warn"
 unnested_or_patterns = "warn"
 wildcard_dependencies = "warn"
 
-[patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "f2ce0b0" }
+[profile.dev.package.sqlx-macros]
+opt-level = 3
 
 # Optimize for speed and reduce size on release builds
 [profile.release]
-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
+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"
-panic = "unwind" # Don't exit the whole app on panic in production
-
-[profile.dev.package.sqlx-macros]
-opt-level = 3
+strip = false  # Keep debug symbols for Sentry
+panic = "unwind"  # Don't exit the whole app on panic in production

_typos.toml

@@ -0,0 +1,23 @@
+[files]
+extend-exclude = [
+  "**/src/locales/",
+  "apps/frontend/",
+  "patches/",
+  "packages/utils/",
+  "packages/ui/",
+  "packages/blog/",
+  # contains licenses like `CC-BY-ND-4.0`
+  "packages/moderation/src/data/stages/license.ts",
+  # contains payment card IDs like `IY1VMST1MOXS` which are flagged
+  "apps/labrinth/src/queue/payouts/mod.rs",
+]
+
+[default.extend-words]
+# Terms Of Use in `tou-link`
+tou = "tou"
+# Google Ad Manager
+gam = "gam"
+# short for "constants"
+consts = "consts"
+# short for "Copy"
+Cpy = "Cpy"

apps/app-frontend/COPYING.md

@@ -1,13 +1,9 @@
 # Copying
 
-The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+The source code of Modrinth App's frontend is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
 
 ## Modrinth logo
 
 The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
 
-> All rights reserved. © 2020-2023 Rinth, Inc.
-
-This includes, but may not be limited to, the following files:
-
-- theseus_gui/src-tauri/icons/\*
+> All rights reserved. © 2020-2025 Rinth, Inc.

apps/app-frontend/package.json

@@ -13,11 +13,13 @@
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
-		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
+		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
 		"@tauri-apps/plugin-http": "^2.5.0",
@@ -26,27 +28,28 @@
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
-		"@vintl/vintl": "^4.4.1",
+		"intl-messageformat": "^10.7.7",
+		"vue-i18n": "^10.0.0",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
 		"ofetch": "^1.3.4",
-		"pinia": "^2.1.7",
+		"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-router": "4.3.0",
+		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
-		"@modrinth/tooling-config": "workspace:*",
 		"@eslint/compat": "^1.1.1",
 		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
 		"@nuxt/eslint-config": "^0.5.6",
 		"@taijased/vue-render-tracker": "^1.0.7",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@vitejs/plugin-vue": "^6.0.3",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.9.1",
 		"eslint-plugin-turbo": "^2.5.4",
@@ -55,7 +58,8 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^5.4.6",
+		"vite": "^6.0.0",
+		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},
 	"packageManager": "pnpm@9.4.0",

apps/app-frontend/src/App.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { AuthFeature, PanelVersionFeature, TauriModrinthClient } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
 	CompassIcon,
 	DownloadIcon,
+	ExternalIcon,
 	HomeIcon,
 	LeftArrowIcon,
 	LibraryIcon,
@@ -17,29 +19,38 @@ import {
 	RefreshCwIcon,
 	RestoreIcon,
 	RightArrowIcon,
+	ServerIcon,
 	SettingsIcon,
+	UserIcon,
 	WorldIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Admonition,
 	Avatar,
 	Button,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
+	I18nDebugPanel,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
 	ProgressSpinner,
+	provideModrinthClient,
 	provideNotificationManager,
+	providePageContext,
+	useDebugLogger,
+	useVIntl,
 } from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { $fetch } from 'ofetch'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
@@ -54,6 +65,7 @@ import IncompatibilityWarningModal from '@/components/ui/install_flow/Incompatib
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
@@ -61,15 +73,17 @@ import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
+import UpdateAvailableToast from '@/components/ui/UpdateAvailableToast.vue'
 import UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
+import { check_reachable } from '@/helpers/auth.js'
 import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
-import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.js'
+import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -81,6 +95,7 @@ import {
 	isDev,
 	isNetworkMetered,
 } from '@/helpers/utils.js'
+import i18n from '@/i18n.config'
 import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
@@ -100,6 +115,20 @@ const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
 const { handleError, addNotification } = notificationManager
 
+const tauriApiClient = new TauriModrinthClient({
+	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
+	features: [
+		new AuthFeature({
+			token: async () => (await getCreds()).session,
+		}),
+		new PanelVersionFeature(),
+	],
+})
+provideModrinthClient(tauriApiClient)
+providePageContext({
+	hierarchicalSidebarAvailable: ref(true),
+	showAds: ref(false),
+})
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -117,6 +146,7 @@ const showOnboarding = ref(false)
 const nativeDecorations = ref(false)
 
 const os = ref('')
+const isDevEnvironment = ref(false)
 
 const stateInitialized = ref(false)
 
@@ -124,6 +154,27 @@ const criticalErrorMessage = ref()
 
 const isMaximized = ref(false)
 
+const authUnreachableDebug = useDebugLogger('AuthReachableChecker')
+const authServerQuery = useQuery({
+	queryKey: ['authServerReachability'],
+	queryFn: async () => {
+		await check_reachable()
+		authUnreachableDebug('Auth servers are reachable')
+		return true
+	},
+	refetchInterval: 5 * 60 * 1000, // 5 minutes
+	retry: false,
+	refetchOnWindowFocus: false,
+})
+
+const authUnreachable = computed(() => {
+	if (authServerQuery.isError.value && !authServerQuery.isLoading.value) {
+		console.warn('Failed to reach auth servers', authServerQuery.error.value)
+		return true
+	}
+	return false
+})
+
 onMounted(async () => {
 	await useCheckDisableMouseover()
 
@@ -162,13 +213,22 @@ const messages = defineMessages({
 		id: 'app.update.downloading-update',
 		defaultMessage: 'Downloading update ({percent}%)',
 	},
+	authUnreachableHeader: {
+		id: 'app.auth-servers.unreachable.header',
+		defaultMessage: 'Cannot reach authentication servers',
+	},
+	authUnreachableBody: {
+		id: 'app.auth-servers.unreachable.body',
+		defaultMessage:
+			'Minecraft authentication servers may be down right now. Check your internet connection and try again later.',
+	},
 })
 
 async function setupApp() {
-	stateInitialized.value = true
 	const {
 		native_decorations,
 		theme,
+		locale,
 		telemetry,
 		collapsed_navigation,
 		advanced_rendering,
@@ -180,12 +240,18 @@ async function setupApp() {
 		pending_update_toast_for_version,
 	} = await getSettings()
 
+	// Initialize locale from saved settings
+	if (locale) {
+		i18n.global.locale.value = locale
+	}
+
 	if (default_page === 'Library') {
 		await router.push('/library')
 	}
 
 	os.value = await getOS()
 	const dev = await isDev()
+	isDevEnvironment.value = dev
 	const version = await getVersion()
 	showOnboarding.value = !onboarded
 
@@ -198,6 +264,7 @@ async function setupApp() {
 	themeStore.toggleSidebar = toggle_sidebar
 	themeStore.devMode = developer_mode
 	themeStore.featureFlags = feature_flags
+	stateInitialized.value = true
 
 	isMaximized.value = await getCurrentWindow().isMaximized()
 
@@ -205,12 +272,11 @@ async function setupApp() {
 		isMaximized.value = await getCurrentWindow().isMaximized()
 	})
 
-	initAnalytics()
-	if (!telemetry) {
-		optOutAnalytics()
+	if (telemetry) {
+		initAnalytics()
+		if (dev) debugAnalytics()
+		trackEvent('Launched', { version, dev, onboarded })
 	}
-	if (dev) debugAnalytics()
-	trackEvent('Launched', { version, dev, onboarded })
 
 	if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
 
@@ -279,16 +345,6 @@ async function setupApp() {
 		const settings = await getSettings()
 		settings.pending_update_toast_for_version = null
 		await setSettings(settings)
-
-		const version = await getVersion()
-		if (pending_update_toast_for_version === version) {
-			addNotification({
-				type: 'success',
-				title: formatMessage(messages.updateInstalledToastTitle, { version }),
-				text: formatMessage(messages.updateInstalledToastText),
-				clickAction: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
-			})
-		}
 	}
 
 	if (osType === 'windows') {
@@ -320,7 +376,11 @@ const handleClose = async () => {
 
 const router = useRouter()
 router.afterEach((to, from, failure) => {
-	trackEvent('PageView', { path: to.path, fromPath: from.path, failed: failure })
+	trackEvent('PageView', {
+		path: to.path,
+		fromPath: from.path,
+		failed: failure,
+	})
 })
 const route = useRoute()
 
@@ -329,6 +389,7 @@ loading.setEnabled(false)
 
 const error = useError()
 const errorModal = ref()
+const minecraftAuthErrorModal = ref()
 
 const install = useInstall()
 const modInstallModal = ref()
@@ -344,7 +405,7 @@ async function fetchCredentials() {
 	if (creds && creds.user_id) {
 		creds.user = await get_user(creds.user_id).catch(handleError)
 	}
-	credentials.value = creds
+	credentials.value = creds ?? null
 }
 
 async function signIn() {
@@ -391,24 +452,23 @@ const forceSidebar = computed(
 	() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
 )
 const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
-const showAd = computed(() => !(!sidebarVisible.value || hasPlus.value))
-
-watch(
-	showAd,
-	() => {
-		if (!showAd.value) {
-			hide_ads_window(true)
-		} else {
-			init_ads_window(true)
-		}
-	},
-	{ immediate: true },
+const showAd = computed(
+	() => sidebarVisible.value && !hasPlus.value && credentials.value !== undefined,
 )
 
+watch(showAd, () => {
+	if (!showAd.value) {
+		hide_ads_window(true)
+	} else {
+		init_ads_window(true)
+	}
+})
+
 onMounted(() => {
 	invoke('show_window')
 
 	error.setErrorModal(errorModal.value)
+	error.setMinecraftAuthErrorModal(minecraftAuthErrorModal.value)
 
 	install.setIncompatibilityWarningModal(incompatibilityWarningModal)
 	install.setInstallConfirmModal(installConfirmModal)
@@ -451,21 +511,23 @@ const restarting = ref(false)
 const updateToastDismissed = ref(false)
 const availableUpdate = ref(null)
 const updateSize = ref(null)
+const updatesEnabled = ref(true)
 async function checkUpdates() {
 	if (!(await areUpdatesEnabled())) {
 		console.log('Skipping update check as updates are disabled in this build or environment')
+		updatesEnabled.value = false
 		return
 	}
 
 	async function performCheck() {
 		const update = await invoke('plugin:updater|check')
-		const isExistingUpdate = update.version === availableUpdate.value?.version
-
 		if (!update) {
 			console.log('No update available')
 			return
 		}
 
+		const isExistingUpdate = update.version === availableUpdate.value?.version
+
 		if (isExistingUpdate) {
 			console.log('Update is already known')
 			return
@@ -694,7 +756,11 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 <template>
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
-	<div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
+	<div
+		v-if="stateInitialized"
+		class="app-grid-layout experimental-styles-within relative"
+		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
+	>
 		<Suspense>
 			<Transition name="toast">
 				<UpdateToast
@@ -711,6 +777,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					@restart="installUpdate"
 					@download="downloadAvailableUpdate"
 				/>
+				<UpdateAvailableToast v-else-if="!updatesEnabled && os === 'Linux' && !isDevEnvironment" />
 			</Transition>
 		</Suspense>
 		<Transition name="fade">
@@ -746,6 +813,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/hosting/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -769,7 +843,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
-			<div class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
 			</suspense>
@@ -827,29 +901,39 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<SettingsIcon />
 			</NavButton>
-			<ButtonStyled v-if="credentials" type="transparent" circular>
-				<OverflowMenu
-					:options="[
-						{
-							id: 'sign-out',
-							action: () => logOut(),
-							color: 'danger',
-						},
-					]"
-					direction="left"
-				>
-					<Avatar
-						:src="credentials.user.avatar_url"
-						:alt="credentials.user.username"
-						size="32px"
-						circle
-					/>
-					<template #sign-out> <LogOutIcon /> Sign out </template>
-				</OverflowMenu>
-			</ButtonStyled>
-			<NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
-				<LogInIcon />
-				<template #label>Sign in</template>
+			<OverflowMenu
+				v-if="credentials"
+				v-tooltip.right="`Modrinth account`"
+				class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
+				:options="[
+					{
+						id: 'view-profile',
+						action: () => openUrl('https://modrinth.com/user/' + credentials.user.username),
+					},
+					{
+						id: 'sign-out',
+						action: () => logOut(),
+						color: 'danger',
+					},
+				]"
+				placement="right-end"
+			>
+				<Avatar :src="credentials.user.avatar_url" alt="" size="32px" circle />
+				<template #view-profile>
+					<UserIcon />
+					<span class="inline-flex items-center gap-1">
+						Signed in as
+						<span class="inline-flex items-center gap-1 text-contrast font-semibold">
+							<Avatar :src="credentials.user.avatar_url" alt="" size="20px" circle />
+							{{ credentials.user.username }}
+						</span>
+					</span>
+					<ExternalIcon />
+				</template>
+				<template #sign-out> <LogOutIcon /> Sign out </template>
+			</OverflowMenu>
+			<NavButton v-else v-tooltip.right="'Sign in to a Modrinth account'" :to="() => signIn()">
+				<LogInIcon class="text-brand" />
 			</NavButton>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
@@ -912,13 +996,16 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<div
 		v-if="stateInitialized"
 		class="app-contents experimental-styles-within"
-		:class="{ 'sidebar-enabled': sidebarVisible }"
+		:class="{
+			'sidebar-enabled': sidebarVisible,
+			'disable-advanced-rendering': !themeStore.advancedRendering,
+		}"
 	>
 		<div class="app-viewport flex-grow router-view">
 			<transition name="popup-survey">
 				<div
 					v-if="availableSurvey"
-					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-divider border-[1px] border-solid border-b-0 p-4"
+					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
 				>
 					<h2 class="text-lg font-extrabold mt-0 mb-2">Hey there Modrinth user!</h2>
 					<p class="m-0 leading-tight">
@@ -960,16 +1047,25 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					width: 'calc(100% - var(--right-bar-width))',
 				}"
 			></div>
-			<div
+			<Admonition
 				v-if="criticalErrorMessage"
-				class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast"
+				type="critical"
+				:header="criticalErrorMessage.header"
+				class="m-6 mb-0"
 			>
-				<h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
 				<div
 					class="markdown-body text-primary"
 					v-html="renderString(criticalErrorMessage.body ?? '')"
 				></div>
-			</div>
+			</Admonition>
+			<Admonition
+				v-if="authUnreachable"
+				type="warning"
+				:header="formatMessage(messages.authUnreachableHeader)"
+				class="m-6 mb-0"
+			>
+				{{ formatMessage(messages.authUnreachableBody) }}
+			</Admonition>
 			<RouterView v-slot="{ Component }">
 				<template v-if="Component">
 					<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -988,20 +1084,26 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
 				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
-						<h3 class="text-lg m-0">Playing as</h3>
+					<div
+						class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
+					>
+						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
 						<suspense>
 							<AccountsCard ref="accounts" mode="small" />
 						</suspense>
 					</div>
-					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+					<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<suspense>
-							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
+							<FriendsList
+								:credentials="credentials"
+								:sign-in="() => signIn()"
+								:refresh-credentials="fetchCredentials"
+							/>
 						</suspense>
 					</div>
-					<div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
-						<h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
-						<div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
+					<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
+						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
+						<div class="space-y-4 flex flex-col items-center w-full">
 							<NewsArticleCard
 								v-for="(item, index) in news"
 								:key="`news-${index}`"
@@ -1029,8 +1131,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		</div>
 	</div>
 	<URLConfirmModal ref="urlModal" />
+	<I18nDebugPanel />
 	<NotificationPanel has-sidebar />
 	<ErrorModal ref="errorModal" />
+	<MinecraftAuthErrorModal ref="minecraftAuthErrorModal" />
 	<ModInstallModal ref="modInstallModal" />
 	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
 	<InstallConfirmModal ref="installConfirmModal" />
@@ -1186,9 +1290,19 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	display: none;
 }
 
+.disable-advanced-rendering {
+	.app-sidebar::before {
+		box-shadow: none;
+	}
+
+	&.app-contents::before {
+		box-shadow: none;
+	}
+}
+
 .app-sidebar::before {
 	content: '';
-	box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.2) inset;
+	box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.1) inset;
 	top: 0;
 	bottom: 0;
 	left: -2rem;
@@ -1213,9 +1327,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	right: calc(-1 * var(--left-bar-width));
 	bottom: calc(-1 * var(--left-bar-width));
 	border-radius: var(--radius-xl);
-	box-shadow:
-		1px 1px 15px rgba(0, 0, 0, 0.2) inset,
-		inset 1px 1px 1px rgba(255, 255, 255, 0.23);
+	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1) inset;
+	border-color: var(--surface-5);
+	border-width: 1px;
+	border-style: solid;
 	pointer-events: none;
 }
 

apps/app-frontend/src/assets/modrinth_servers.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" version="1.1" viewBox="0 0 1793 199">
-  <g>
-    <g id="Layer_1">
-      <g id="green" fill="var(--color-brand)">
-        <path d="M1184.1,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
-        <path d="M1291.1,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
-        <path d="M1357.2,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
-        <path d="M1460,165.3l-40.8-95.1h23.2l35.1,83.9h-11.4l36.3-83.9h21.4l-40.8,95.1h-23Z"/>
-        <path d="M1579.6,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
-        <path d="M1645.7,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
-        <path d="M1749.9,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
-        <g>
-          <path d="M9.8,143l63.4-38.1-5.8-15.3,18.1-18.6,22.9-4.9,6.6,8.2-10.6,10.7-9.2,2.9-6.6,6.8,3.2,9,6.5,6.9,9.2-2.5,6.6-7.2,14.3-4.5,4.3,9.6-14.8,18.1-24.8,7.8-11.1-12.4-63.6,38.2c-3-3.9-6.5-9.4-8.8-14.7ZM192.8,65.4l-50.4,13.6c2.8,7.4,3.7,11.7,4.5,16.5l50.3-13.6c-.8-5.4-2.2-10.8-4.4-16.5Z" fill-rule="evenodd"/>
-          <path d="M17.3,106.5c3.6,42.1,38.9,75.2,82,75.2s60.7-18.9,74-46.3l16.4,5.7c-15.8,34.1-50.3,57.9-90.4,57.9S3.6,158.2,0,106.5h17.3ZM.3,89.4C5.3,39.2,47.8,0,99.3,0s99.5,44.6,99.5,99.5-1.1,17.4-3.3,25.5l-16.3-5.7c1.6-6.5,2.4-13.1,2.4-19.8,0-45.4-36.9-82.3-82.3-82.3S22.6,48.7,17.6,89.4H.3Z" fill-rule="evenodd"/>
-          <path d="M99,51.6c-26.4,0-47.9,21.5-47.9,48s21.5,48,48,48,2.7,0,4-.2l4.8,16.8c-2.9.4-5.8.6-8.8.6-36,0-65.2-29.2-65.2-65.2S63.1,34.4,99,34.4s1.8,0,2.7,0l-2.7,17.1ZM118.6,37.4c26.4,8.3,45.6,33,45.6,62.2s-16.4,50.2-39.8,60l-4.8-16.7c16.2-7.7,27.4-24.2,27.4-43.3s-13-38.1-31.1-44.9l2.7-17.2Z" fill-rule="evenodd"/>
-        </g>
-      </g>
-      <g id="black" fill="currentColor">
-        <path d="M354.8,69.2c12,0,21.7,3.4,28.6,10.4,7,7.2,10.6,17.5,10.6,31.5v54.8h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,5-6.8,12.2-6.8,21.3v48.5h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,4.8-6.8,12-6.8,21.3v48.5h-22.4v-95.6h21.3v12.2c3.6-4.3,8.1-7.5,13.4-9.8,5.4-2.3,11.3-3.4,17.9-3.4s13.6,1.3,19.2,3.9c5.5,2.9,9.8,6.8,13.1,12,3.9-5,8.9-8.9,15.2-11.8,6.3-2.7,13.1-4.1,20.6-4.1ZM466,167.2c-9.7,0-18.4-2.1-26.1-6.3-7.6-4-13.8-10.1-18.1-17.5-4.5-7.3-6.6-15.7-6.6-25.2s2.1-17.9,6.6-25.2c4.3-7.4,10.6-13.4,18.1-17.4,7.7-4.1,16.5-6.3,26.1-6.3s18.6,2.1,26.3,6.3c7.7,4.1,13.8,10,18.3,17.4,4.3,7.3,6.4,15.7,6.4,25.2s-2.1,17.9-6.4,25.2c-4.5,7.5-10.6,13.4-18.3,17.5-7.7,4.1-16.5,6.3-26.3,6.3h0ZM466,148c8.2,0,15-2.7,20.4-8.2,5.4-5.5,8.1-12.7,8.1-21.7s-2.7-16.1-8.1-21.7c-5.4-5.5-12.2-8.2-20.4-8.2s-15,2.7-20.2,8.2c-5.4,5.5-8.1,12.7-8.1,21.7s2.7,16.1,8.1,21.7c5.2,5.5,12,8.2,20.2,8.2ZM631.5,33.1v132.8h-21.5v-12.3c-3.7,4.4-8.3,7.9-13.6,10.2-5.5,2.3-11.5,3.4-18.1,3.4s-17.4-2-24.7-6.1c-7.3-4.1-13.2-9.8-17.4-17.4-4.1-7.3-6.3-15.9-6.3-25.6s2.1-18.3,6.3-25.6c4.1-7.3,10-13.1,17.4-17.2,7.3-4.1,15.6-6.1,24.7-6.1s12.2,1.1,17.4,3.2c5.2,2.1,9.8,5.4,13.4,9.7v-49h22.4ZM581.1,148c5.4,0,10.2-1.3,14.5-3.8,4.3-2.3,7.7-5.9,10.2-10.4,2.5-4.5,3.8-9.8,3.8-15.7s-1.3-11.3-3.8-15.7c-2.5-4.5-5.9-8.1-10.2-10.6-4.3-2.3-9.1-3.6-14.5-3.6s-10.2,1.3-14.5,3.6c-4.3,2.5-7.7,6.1-10.2,10.6-2.5,4.5-3.8,9.8-3.8,15.7s1.3,11.3,3.8,15.7c2.5,4.5,5.9,8.1,10.2,10.4,4.3,2.5,9.1,3.8,14.5,3.8ZM681.6,84.3c6.4-10,17.7-15,34-15v21.3c-1.7-.3-3.4-.5-5.2-.5-8.8,0-15.6,2.5-20.4,7.5-4.8,5.2-7.3,12.5-7.3,22v46.4h-22.4v-95.6h21.3v14h0ZM734.1,70.3h22.4v95.6h-22.4v-95.6ZM745.4,54.6c-4.1,0-7.5-1.3-10.2-3.9-2.7-2.4-4.2-5.9-4.1-9.5,0-3.8,1.4-7,4.1-9.7,2.7-2.5,6.1-3.8,10.2-3.8s7.5,1.3,10.2,3.6c2.7,2.5,4.1,5.5,4.1,9.3s-1.3,7.2-3.9,9.8c-2.7,2.7-6.3,4.1-10.4,4.1ZM839.5,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4v-95.6h21.3v12.3c3.8-4.5,8.4-7.7,14-10,5.5-2.3,12-3.4,19-3.4ZM964.8,160.7c-2.8,2.2-6,3.9-9.5,4.8-3.9,1.1-7.9,1.6-12,1.6-10.6,0-18.6-2.7-24.3-8.2-5.7-5.5-8.6-13.4-8.6-24v-46h-15.7v-17.9h15.7v-21.8h22.4v21.8h25.6v17.9h-25.6v45.5c0,4.7,1.1,8.2,3.4,10.6,2.3,2.5,5.5,3.8,9.8,3.8s9.1-1.3,12.5-3.9l6.3,15.9ZM1036.9,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4V33.1h22.4v48.3c3.8-3.9,8.2-7,13.8-9.1,5.4-2,11.5-3,18.1-3Z"/>
-      </g>
-    </g>
-  </g>
-</svg>

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

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@modrinth/ui/src/styles/tailwind-utilities.css';
+
 @font-face {
 	font-family: 'bundled-minecraft-font-mrapp';
 	font-style: normal;
@@ -83,10 +85,6 @@ a {
 	}
 }
 
-input {
-	border: none !important;
-}
-
 .badge {
 	display: flex;
 	border-radius: var(--radius-md);

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

@@ -8,10 +8,15 @@ import {
 	SearchIcon,
 	StopCircleIcon,
 	TrashIcon,
-	XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
+import {
+	DropdownSelect,
+	formatLoader,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
@@ -22,6 +27,8 @@ import { duplicate, remove } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
+const { formatMessage } = useVIntl()
+
 const props = defineProps({
 	instances: {
 		type: Array,
@@ -121,40 +128,50 @@ const handleOptionsClick = async (args) => {
 	}
 }
 
+const state = useStorage(
+	`${props.label}-grid-display-state`,
+	{
+		group: 'Group',
+		sortBy: 'Name',
+	},
+	localStorage,
+	{ mergeDefaults: true },
+)
+
 const search = ref('')
-const group = ref('Group')
-const sortBy = ref('Name')
 
 const filteredResults = computed(() => {
+	const { group = 'Group', sortBy = 'Name' } = state.value
+
 	const instances = props.instances.filter((instance) => {
 		return instance.name.toLowerCase().includes(search.value.toLowerCase())
 	})
 
-	if (sortBy.value === 'Name') {
+	if (sortBy === 'Name') {
 		instances.sort((a, b) => {
 			return a.name.localeCompare(b.name)
 		})
 	}
 
-	if (sortBy.value === 'Game version') {
+	if (sortBy === 'Game version') {
 		instances.sort((a, b) => {
 			return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
 		})
 	}
 
-	if (sortBy.value === 'Last played') {
+	if (sortBy === 'Last played') {
 		instances.sort((a, b) => {
 			return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
 		})
 	}
 
-	if (sortBy.value === 'Date created') {
+	if (sortBy === 'Date created') {
 		instances.sort((a, b) => {
 			return dayjs(b.date_created).diff(dayjs(a.date_created))
 		})
 	}
 
-	if (sortBy.value === 'Date modified') {
+	if (sortBy === 'Date modified') {
 		instances.sort((a, b) => {
 			return dayjs(b.date_modified).diff(dayjs(a.date_modified))
 		})
@@ -162,16 +179,16 @@ const filteredResults = computed(() => {
 
 	const instanceMap = new Map()
 
-	if (group.value === 'Loader') {
+	if (group === 'Loader') {
 		instances.forEach((instance) => {
-			const loader = formatCategoryHeader(instance.loader)
+			const loader = formatLoader(formatMessage, instance.loader)
 			if (!instanceMap.has(loader)) {
 				instanceMap.set(loader, [])
 			}
 
 			instanceMap.get(loader).push(instance)
 		})
-	} else if (group.value === 'Game version') {
+	} else if (group === 'Game version') {
 		instances.forEach((instance) => {
 			if (!instanceMap.has(instance.game_version)) {
 				instanceMap.set(instance.game_version, [])
@@ -179,7 +196,7 @@ const filteredResults = computed(() => {
 
 			instanceMap.get(instance.game_version).push(instance)
 		})
-	} else if (group.value === 'Group') {
+	} else if (group === 'Group') {
 		instances.forEach((instance) => {
 			if (instance.groups.length === 0) {
 				instance.groups.push('None')
@@ -199,7 +216,7 @@ const filteredResults = computed(() => {
 
 	// For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
 	// ie: Category A should come before B, even if the first instance in B comes before the first instance in A
-	if (sortBy.value === 'Name') {
+	if (sortBy === 'Name') {
 		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
 			// None should always be first
 			if (a[0] === 'None' && b[0] !== 'None') {
@@ -217,7 +234,7 @@ const filteredResults = computed(() => {
 	}
 	// default sorting would do 1.20.4 < 1.8.9 because 2 < 8
 	// localeCompare with numeric=true puts 1.8.9 < 1.20.4 because 8 < 20
-	if (group.value === 'Game version') {
+	if (group === 'Game version') {
 		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
 			return a[0].localeCompare(b[0], undefined, { numeric: true })
 		})
@@ -232,16 +249,17 @@ 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="sortBy"
+			v-model="state.sortBy"
 			name="Sort Dropdown"
 			class="max-w-[16rem]"
 			:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
@@ -252,7 +270,7 @@ const filteredResults = computed(() => {
 		</DropdownSelect>
 		<DropdownSelect
 			v-slot="{ selected }"
-			v-model="group"
+			v-model="state.group"
 			class="max-w-[16rem]"
 			name="Group Dropdown"
 			:options="['Group', 'Loader', 'Game version', 'None']"

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

@@ -18,8 +18,8 @@ import { useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
+import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_by_profile_path } from '@/helpers/process.js'
 import { duplicate, kill, remove, run } from '@/helpers/profile.js'
@@ -270,7 +270,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

@@ -284,12 +284,12 @@ onUnmounted(() => {
 	z-index: 11;
 	gap: 0.5rem;
 	padding: 1rem;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	width: max-content;
 	user-select: none;
 	-ms-user-select: none;
 	-webkit-user-select: none;
-	max-height: 98vh;
+	max-height: calc(100vh - 300px);
 	overflow-y: auto;
 
 	&::-webkit-scrollbar-track {
@@ -380,7 +380,7 @@ onUnmounted(() => {
 	text-align: left;
 
 	&.expanded {
-		border: 1px solid var(--color-button-bg);
+		border: 1px solid var(--color-divider);
 		padding: 1rem;
 	}
 }

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const emit = defineEmits(['menu-closed', 'option-clicked'])
 
@@ -40,22 +40,27 @@ defineExpose({
 		item.value = passedItem
 		options.value = passedOptions
 
-		const menuWidth = contextMenu.value.clientWidth
-		const menuHeight = contextMenu.value.clientHeight
-
-		if (menuWidth + event.pageX >= window.innerWidth) {
-			left.value = event.pageX - menuWidth + 2 + 'px'
-		} else {
-			left.value = event.pageX - 2 + 'px'
-		}
-
-		if (menuHeight + event.pageY >= window.innerHeight) {
-			top.value = event.pageY - menuHeight + 2 + 'px'
-		} else {
-			top.value = event.pageY - 2 + 'px'
-		}
-
+		// show to get dimensions
 		shown.value = true
+
+		// then, adjust position if overflowing
+		nextTick(() => {
+			const menuWidth = contextMenu.value?.clientWidth || 200
+			const menuHeight = contextMenu.value?.clientHeight || 100
+			const minFromEdge = 10
+
+			if (event.pageX + menuWidth + minFromEdge >= window.innerWidth) {
+				left.value = Math.max(minFromEdge, event.pageX - menuWidth - minFromEdge) + 'px'
+			} else {
+				left.value = event.pageX + minFromEdge + 'px'
+			}
+
+			if (event.pageY + menuHeight + minFromEdge >= window.innerHeight) {
+				top.value = Math.max(minFromEdge, event.pageY - menuHeight - minFromEdge) + 'px'
+			} else {
+				top.value = event.pageY + minFromEdge + 'px'
+			}
+		})
 	},
 })
 
@@ -114,7 +119,7 @@ onBeforeUnmount(() => {
 	background-color: var(--color-raised-bg);
 	border-radius: var(--radius-md);
 	box-shadow: var(--shadow-floating);
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	margin: 0;
 	position: fixed;
 	z-index: 1000000;
@@ -158,7 +163,7 @@ onBeforeUnmount(() => {
 	}
 
 	.divider {
-		border: 1px solid var(--color-button-bg);
+		border: 1px solid var(--color-divider);
 		margin: var(--gap-sm);
 		pointer-events: none;
 	}

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

@@ -33,6 +33,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:')) {

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

@@ -1,6 +1,6 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
+import { Button, Checkbox, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
@@ -110,31 +110,33 @@ const exportPack = async () => {
 		<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>
-				</div>
+				<StyledInput
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					placeholder="Modpack name"
+					clearable
+				/>
 			</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>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					placeholder="1.0.0"
+					clearable
+				/>
 			</div>
 			<div class="adjacent-input">
 				<div class="labeled_input">
 					<p>Description</p>
 
-					<div class="textarea-wrapper">
-						<textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-					</div>
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						placeholder="Enter modpack description..."
+					/>
 				</div>
 			</div>
 
@@ -289,17 +291,4 @@ const exportPack = async () => {
 	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/InstanceCreationModal.vue

@@ -20,12 +20,13 @@
 			</div>
 			<div class="input-row">
 				<p class="input-label">Name</p>
-				<input
+				<StyledInput
 					v-model="profile_name"
 					autocomplete="off"
-					class="text-input"
 					type="text"
-					maxlength="100"
+					placeholder="Enter a name for your instance..."
+					:maxlength="100"
+					wrapper-class="w-full"
 				/>
 			</div>
 			<div class="input-row">
@@ -34,7 +35,7 @@
 			</div>
 			<div class="input-row">
 				<p class="input-label">Game version</p>
-				<div class="versions">
+				<div class="flex gap-4 items-center">
 					<multiselect
 						v-model="game_version"
 						class="selector"
@@ -45,7 +46,7 @@
 						open-direction="top"
 						:show-labels="false"
 					/>
-					<Checkbox v-model="showSnapshots" class="filter-checkbox" label="Show all versions" />
+					<Checkbox v-model="showSnapshots" class="shrink-0" label="Show all versions" />
 				</div>
 			</div>
 			<div v-if="loader !== 'vanilla'" class="input-row">
@@ -93,18 +94,14 @@
 			<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>
+					<StyledInput
+						v-model="selectedProfileType.path"
+						:icon="FolderOpenIcon"
+						type="text"
+						placeholder="Path to launcher"
+						clearable
+						@change="setPath"
+					/>
 					<Button icon-only @click="selectLauncherPath">
 						<FolderSearchIcon />
 					</Button>
@@ -197,7 +194,14 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	Checkbox,
+	Chips,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -341,7 +345,7 @@ 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'
+	const loaderVersion = loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable')
 
 	hide()
 	creating.value = false
@@ -350,7 +354,7 @@ const create_instance = async () => {
 		profile_name.value,
 		game_version.value,
 		loader.value,
-		loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
+		loader.value === 'vanilla' ? null : (loader_version_value ?? 'stable'),
 		icon.value,
 	).catch(handleError)
 
@@ -546,12 +550,6 @@ const next = async () => {
 	font-style: italic;
 }
 
-.versions {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-}
-
 :deep(button.checkbox) {
 	border: none;
 }

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

@@ -1,7 +1,6 @@
 <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'
 
 type Instance = {
@@ -37,7 +36,8 @@ 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>

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

@@ -1,18 +1,17 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
 	<div class="toggle-setting" :class="{ compact }">
-		<input
+		<StyledInput
 			autocomplete="off"
 			:disabled="props.disabled"
-			:value="props.modelValue ? props.modelValue.path : ''"
-			type="text"
-			class="installation-input"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
 			:placeholder="placeholder ?? '/path/to/java'"
-			@input="
+			wrapper-class="installation-input"
+			@update:model-value="
 				(val) => {
 					emit('update:modelValue', {
 						...props.modelValue,
-						path: val.target.value,
+						path: val,
 					})
 				}
 			"
@@ -60,7 +59,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 

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

@@ -1,7 +1,7 @@
 <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 } from '@modrinth/ui'
+import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -63,7 +63,7 @@ const toTransparent = computed(() => {
 		<div
 			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
 			:style="{
-				'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
 				'background-image': `url(${
 					project.featured_gallery ??
 					project.gallery[0] ??
@@ -107,7 +107,7 @@ const toTransparent = computed(() => {
 				<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/PromotionWrapper.vue

@@ -34,18 +34,18 @@ function updateAdPosition() {
 <template>
 	<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
 		<a
-			href="https://modrinth.gg/medal?from=app-placeholder"
+			href="https://modrinth.host/medal?from=app-placeholder"
 			target="_blank"
 			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
 		>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-light.webp"
-				alt="Host your next server with Modrinth Servers"
+				src="https://cdn-raw.modrinth.com/modrinth-hosting-medal-light.webp"
+				alt="Host your next server with Modrinth Hosting"
 				class="hidden light-image rounded-[inherit]"
 			/>
 			<img
-				src="https://cdn-raw.modrinth.com/medal-modrinth-servers-dark.webp"
-				alt="Host your next server with Modrinth Servers"
+				src="https://cdn-raw.modrinth.com/modrinth-hosting-medal-dark.webp"
+				alt="Host your next server with Modrinth Hosting"
 				class="dark-image rounded-[inherit]"
 			/>
 		</a>

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

@@ -69,7 +69,7 @@ onUnmounted(() => {
 			<SpinnerIcon class="animate-spin w-4 h-4" />
 		</div>
 	</NavButton>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-button-bg"></div>
+	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
 </template>
 
 <style scoped lang="scss"></style>

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

@@ -293,7 +293,7 @@ onBeforeUnmount(() => {
 	align-items: center;
 	gap: 0.5rem;
 	border-radius: var(--radius-md);
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	padding: var(--gap-sm) var(--gap-lg);
 }
 
@@ -356,7 +356,7 @@ onBeforeUnmount(() => {
 	gap: 1rem;
 	overflow: auto;
 	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 
 	&.hidden {
 		transform: translateY(-100%);
@@ -454,7 +454,7 @@ onBeforeUnmount(() => {
 	flex-direction: column;
 	overflow: auto;
 	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-button-bg);
+	border: 1px solid var(--color-divider);
 	padding: var(--gap-md);
 
 	&.hidden {

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

@@ -1,7 +1,7 @@
 <template>
-	<div
-		class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-		@click="
+	<ProjectCard
+		:title="project.title"
+		:link="
 			() => {
 				emit('open')
 				$router.push({
@@ -10,116 +10,58 @@
 				})
 			}
 		"
+		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
+		:icon-url="project.icon_url"
+		:summary="project.description"
+		:tags="project.display_categories"
+		:all-tags="project.categories"
+		:downloads="project.downloads"
+		:followers="project.follows"
+		:date-updated="project.date_modified"
+		:banner="project.featured_gallery ?? undefined"
+		:color="project.color ?? undefined"
+		:environment="
+			projectType
+				? ['mod', 'modpack'].includes(projectType)
+					? {
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}
+					: undefined
+				: undefined
+		"
+		layout="list"
 	>
-		<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 #actions>
+			<ButtonStyled color="brand" type="outlined">
+				<button
+					:disabled="installed || installing"
+					class="shrink-0 no-wrap"
+					@click.stop="install()"
 				>
-					<template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-						Client or server
+					<template v-if="!installed">
+						<DownloadIcon v-if="modpack || instance" />
+						<PlusIcon v-else />
 					</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>
+					<CheckIcon v-else />
+					{{
+						installing
+							? 'Installing'
+							: installed
+								? 'Installed'
+								: modpack || instance
+									? 'Install'
+									: 'Add to an instance'
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</ProjectCard>
 </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 { CheckIcon, DownloadIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref } from 'vue'
@@ -141,10 +83,6 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
-	categories: {
-		type: Array,
-		required: true,
-	},
 	instance: {
 		type: Object,
 		default: null,
@@ -157,6 +95,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
 })
 
 const emit = defineEmits(['open', 'install'])

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

@@ -191,7 +191,8 @@ const handleClose = async () => {
 	position: absolute;
 	height: 100vh;
 	width: 100vw;
-	background: linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
+	background:
+		linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
 		linear-gradient(0deg, rgba(22, 24, 28, 0.64), rgba(22, 24, 28, 0.64));
 	z-index: 9997;
 }

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

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

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, ProgressBar } from '@modrinth/ui'
+import { ButtonStyled, commonMessages, defineMessages, ProgressBar, useVIntl } from '@modrinth/ui'
 import { formatBytes } from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
 
 import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
@@ -69,7 +68,7 @@ const messages = defineMessages({
 </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="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
 		:class="{
 			'download-complete': progress === 1,
 		}"

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

@@ -1,41 +1,42 @@
 <script setup lang="ts">
-import {
-	MailIcon,
-	MoreVerticalIcon,
-	SettingsIcon,
-	TrashIcon,
-	UserPlusIcon,
-	XIcon,
-} from '@modrinth/assets'
+import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
 	ButtonStyled,
+	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
+	IntlFormatted,
+	StyledInput,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get_user_many } from '@/helpers/cache'
 import { friend_listener } from '@/helpers/events'
-import { add_friend, friend_statuses, friends, remove_friend } from '@/helpers/friends'
+import {
+	add_friend,
+	friends,
+	type FriendWithUserData,
+	remove_friend,
+	transformFriends,
+} from '@/helpers/friends.ts'
+import type { ModrinthCredentials } from '@/helpers/mr_auth'
+
+const { formatMessage } = useVIntl()
 
 const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
-	credentials: unknown | null
+	credentials: ModrinthCredentials | null
 	signIn: () => void
 }>()
 
 const userCredentials = computed(() => props.credentials)
 
 const search = ref('')
-const manageFriendsModal = ref()
 const friendInvitesModal = ref()
 
 const username = ref('')
@@ -47,61 +48,64 @@ async function addFriendFromModal() {
 	await loadFriends()
 }
 
-const friendOptions = ref()
-async function handleFriendOptions(args) {
-	switch (args.option) {
-		case 'remove-friend':
-			await removeFriend(args.item)
-			break
+async function addFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await add_friend(id).catch(handleError)
+		await loadFriends()
 	}
 }
 
-async function addFriend(friend: Friend) {
-	await add_friend(
-		friend.id === userCredentials.value.user_id ? friend.friend_id : friend.id,
-	).catch(handleError)
-	await loadFriends()
+async function removeFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await remove_friend(id).catch(handleError)
+		await loadFriends()
+	}
 }
 
-async function removeFriend(friend: Friend) {
-	await remove_friend(
-		friend.id === userCredentials.value.user_id ? friend.friend_id : friend.id,
-	).catch(handleError)
-	await loadFriends()
-}
+const userFriends = ref<FriendWithUserData[]>([])
+const sortedFriends = computed<FriendWithUserData[]>(() =>
+	userFriends.value.slice().sort((a, b) => {
+		if (a.last_updated === null && b.last_updated === null) {
+			return 0 // Both are null, equal in sorting
+		}
+		if (a.last_updated === null) {
+			return 1 // `a` is null, move it after `b`
+		}
+		if (b.last_updated === null) {
+			return -1 // `b` is null, move it after `a`
+		}
+		// Both are non-null, sort by date
+		return b.last_updated.diff(a.last_updated)
+	}),
+)
+const filteredFriends = computed<FriendWithUserData[]>(() =>
+	sortedFriends.value.filter((x) =>
+		x.username.trim().toLowerCase().includes(search.value.trim().toLowerCase()),
+	),
+)
 
-type Friend = {
-	id: string
-	friend_id: string | null
-	status: string | null
-	last_updated: Dayjs | null
-	created: Dayjs
-	username: string
-	accepted: boolean
-	online: boolean
-	avatar: string
-}
-
-const userFriends = ref<Friend[]>([])
-const acceptedFriends = computed(() =>
-	userFriends.value
-		.filter((x) => x.accepted)
-		.toSorted((a, b) => {
-			if (a.last_updated === null && b.last_updated === null) {
-				return 0 // Both are null, equal in sorting
-			}
-			if (a.last_updated === null) {
-				return 1 // `a` is null, move it after `b`
-			}
-			if (b.last_updated === null) {
-				return -1 // `b` is null, move it after `a`
-			}
-			// Both are non-null, sort by date
-			return b.last_updated.diff(a.last_updated)
-		}),
+const activeFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => !!x.status && x.online && x.accepted),
+)
+const onlineFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => x.online && !x.status && x.accepted),
+)
+const offlineFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => !x.online && x.accepted),
 )
 const pendingFriends = computed(() =>
-	userFriends.value.filter((x) => !x.accepted).toSorted((a, b) => b.created.diff(a.created)),
+	filteredFriends.value
+		.filter((x) => !x.accepted && x.id !== userCredentials.value?.user_id)
+		.slice()
+		.sort((a, b) => b.created.diff(a.created)),
+)
+const incomingRequests = computed(() =>
+	userFriends.value
+		.filter((x) => !x.accepted && x.id === userCredentials.value?.user_id)
+		.slice()
+		.sort((a, b) => b.created.diff(a.created)),
 )
 
 const loading = ref(true)
@@ -110,34 +114,7 @@ async function loadFriends(timeout = false) {
 
 	try {
 		const friendsList = await friends()
-
-		if (friendsList.length === 0) {
-			userFriends.value = []
-		} else {
-			const friendStatuses = await friend_statuses()
-			const users = await get_user_many(
-				friendsList.map((x) => (x.id === userCredentials.value.user_id ? x.friend_id : x.id)),
-			)
-
-			userFriends.value = friendsList.map((friend) => {
-				const user = users.find((x) => x.id === friend.id || x.id === friend.friend_id)
-				const status = friendStatuses.find(
-					(x) => x.user_id === friend.id || x.user_id === friend.friend_id,
-				)
-				return {
-					id: friend.id,
-					friend_id: friend.friend_id,
-					status: status?.profile_name,
-					last_updated: status && status.last_update ? dayjs(status.last_update) : null,
-					created: dayjs(friend.created),
-					avatar: user?.avatar_url,
-					username: user?.username,
-					online: !!status,
-					accepted: friend.accepted,
-				}
-			})
-		}
-
+		userFriends.value = await transformFriends(friendsList, userCredentials.value)
 		loading.value = false
 	} catch (e) {
 		console.error('Error loading friends', e)
@@ -152,6 +129,7 @@ watch(
 	() => {
 		if (userCredentials.value === undefined) {
 			userFriends.value = []
+			loading.value = false
 		} else if (userCredentials.value === null) {
 			userFriends.value = []
 			loading.value = false
@@ -166,49 +144,87 @@ const unlisten = await friend_listener(() => loadFriends())
 onUnmounted(() => {
 	unlisten()
 })
+
+const messages = defineMessages({
+	addFriend: {
+		id: 'friends.action.add-friend',
+		defaultMessage: 'Add a friend',
+	},
+	addingAFriend: {
+		id: 'friends.add-friend.title',
+		defaultMessage: 'Adding a friend',
+	},
+	usernameTitle: {
+		id: 'friends.add-friend.username.title',
+		defaultMessage: "What's your friend's Modrinth username?",
+	},
+	usernameDescription: {
+		id: 'friends.add-friend.username.description',
+		defaultMessage: 'It may be different from their Minecraft username!',
+	},
+	usernamePlaceholder: {
+		id: 'friends.add-friend.username.placeholder',
+		defaultMessage: 'Enter Modrinth username...',
+	},
+	sendFriendRequest: {
+		id: 'friends.add-friend.submit',
+		defaultMessage: 'Send friend request',
+	},
+	viewFriendRequests: {
+		id: 'friends.action.view-friend-requests',
+		defaultMessage: '{count} friend {count, plural, one {request} other {requests}}',
+	},
+	searchFriends: {
+		id: 'friends.search-friends-placeholder',
+		defaultMessage: 'Search friends...',
+	},
+	friends: {
+		id: 'friends.heading',
+		defaultMessage: 'Friends',
+	},
+	pending: {
+		id: 'friends.heading.pending',
+		defaultMessage: 'Pending',
+	},
+	active: {
+		id: 'friends.heading.active',
+		defaultMessage: 'Active',
+	},
+	online: {
+		id: 'friends.heading.online',
+		defaultMessage: 'Online',
+	},
+	offline: {
+		id: 'friends.heading.offline',
+		defaultMessage: 'Offline',
+	},
+	noFriendsMatch: {
+		id: 'friends.no-friends-match',
+		defaultMessage: `No friends matching ''{query}''`,
+	},
+	signInToAddFriends: {
+		id: 'friends.sign-in-to-add-friends',
+		defaultMessage:
+			"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
+	},
+	addFriendsToShare: {
+		id: 'friends.add-friends-to-share',
+		defaultMessage: "<link>Add friends</link> to see what they're playing!",
+	},
+})
 </script>
 
 <template>
-	<ModalWrapper ref="manageFriendsModal" header="Manage friends">
-		<p v-if="acceptedFriends.length === 0">Add friends to share what you're playing!</p>
-		<div v-else class="flex flex-col gap-4 min-w-[20rem]">
-			<input v-model="search" type="text" placeholder="Search friends..." class="w-full" />
-			<div
-				v-for="friend in acceptedFriends.filter(
-					(x) => !search || x.username.toLowerCase().includes(search),
-				)"
-				:key="friend.username"
-				class="flex gap-2 items-center"
-			>
-				<div class="relative">
-					<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-					<span
-						v-if="friend.online"
-						class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-					/>
-				</div>
-				<div>{{ friend.username }}</div>
-				<div class="ml-auto">
-					<ButtonStyled>
-						<button @click="removeFriend(friend)">
-							<XIcon />
-							Remove
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</ModalWrapper>
 	<ModalWrapper ref="friendInvitesModal" header="View friend requests">
-		<p v-if="pendingFriends.length === 0">You have no pending friend requests :C</p>
-		<div v-else class="flex flex-col gap-4">
-			<div v-for="friend in pendingFriends" :key="friend.username" class="flex gap-2">
+		<p v-if="incomingRequests.length === 0">You have no pending friend requests :C</p>
+		<div v-else class="flex flex-col gap-4 min-w-[40rem]">
+			<div v-for="friend in incomingRequests" :key="friend.username" class="flex gap-2">
 				<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-				<div class="flex flex-col gap-2">
+				<div class="grid grid-cols-[1fr_auto] w-full gap-4">
 					<div>
 						<p class="m-0">
-							<template v-if="friend.id === userCredentials.user_id">
-								<span class="font-bold">{{ friend.username }}</span> sent you a friend request
+							<template v-if="friend.id === userCredentials?.user_id">
+								<span class="text-contrast">{{ friend.username }}</span> sent you a friend request
 							</template>
 							<template v-else>
 								You sent <span class="font-bold">{{ friend.username }}</span> a friend request
@@ -219,7 +235,7 @@ onUnmounted(() => {
 						</p>
 					</div>
 					<div class="flex gap-2">
-						<template v-if="friend.id === userCredentials.user_id">
+						<template v-if="friend.id === userCredentials?.user_id">
 							<ButtonStyled color="brand">
 								<button @click="addFriend(friend)">
 									<UserPlusIcon />
@@ -246,78 +262,80 @@ onUnmounted(() => {
 			</div>
 		</div>
 	</ModalWrapper>
-	<ModalWrapper ref="addFriendModal" header="Add a friend">
-		<div class="mb-4">
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Username</h2>
-			<p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
-			<input
-				v-model="username"
-				class="mt-2 w-full"
-				type="text"
-				placeholder="Enter username..."
-				@keyup.enter="addFriendFromModal"
-			/>
+	<ModalWrapper ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
+		<div class="min-w-[30rem]">
+			<h2 class="m-0 text-base font-medium text-primary">
+				{{ formatMessage(messages.usernameTitle) }}
+			</h2>
+			<p class="m-0 mt-1 text-sm text-secondary leading-tight">
+				{{ formatMessage(messages.usernameDescription) }}
+			</p>
+			<div class="flex items-center gap-2 mt-4">
+				<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 />
+						{{ formatMessage(messages.sendFriendRequest) }}
+					</button>
+				</ButtonStyled>
+			</div>
 		</div>
-		<ButtonStyled color="brand">
-			<button :disabled="username.length === 0" @click="addFriendFromModal">
-				<UserPlusIcon />
-				Add friend
+	</ModalWrapper>
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
+		<template v-if="sortedFriends.length > 0">
+			<ButtonStyled circular type="transparent">
+				<button
+					v-tooltip="formatMessage(messages.addFriend)"
+					:aria-label="formatMessage(messages.addFriend)"
+					@click="addFriendModal.show"
+				>
+					<UserPlusIcon />
+				</button>
+			</ButtonStyled>
+			<StyledInput
+				v-model="search"
+				type="text"
+				:placeholder="formatMessage(messages.searchFriends)"
+				clearable
+				variant="outlined"
+				wrapper-class="flex-1"
+				@keyup.esc="search = ''"
+			/>
+		</template>
+		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
+			{{ formatMessage(messages.friends) }}
+		</h3>
+		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
+			<button
+				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				class="relative"
+				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				@click="friendInvitesModal.show"
+			>
+				<MailIcon />
+				<span
+					v-if="incomingRequests.length > 0"
+					aria-hidden="true"
+					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+				>
+					{{ incomingRequests.length }}
+				</span>
 			</button>
 		</ButtonStyled>
-	</ModalWrapper>
-	<div class="flex justify-between items-center">
-		<h3 class="text-lg m-0">Friends</h3>
-		<ButtonStyled v-if="userCredentials" type="transparent" circular>
-			<OverflowMenu
-				:options="[
-					{
-						id: 'add-friend',
-						action: () => addFriendModal.show(),
-					},
-					{
-						id: 'manage-friends',
-						action: () => manageFriendsModal.show(),
-						shown: acceptedFriends.length > 0,
-					},
-					{
-						id: 'view-requests',
-						action: () => friendInvitesModal.show(),
-						shown: pendingFriends.length > 0,
-					},
-				]"
-				aria-label="More options"
-			>
-				<MoreVerticalIcon aria-hidden="true" />
-				<template #add-friend>
-					<UserPlusIcon aria-hidden="true" />
-					Add friend
-				</template>
-				<template #manage-friends>
-					<SettingsIcon aria-hidden="true" />
-					Manage friends
-					<div
-						v-if="acceptedFriends.length > 0"
-						class="bg-button-bg w-6 h-6 rounded-full flex items-center justify-center"
-					>
-						{{ acceptedFriends.length }}
-					</div>
-				</template>
-				<template #view-requests>
-					<MailIcon aria-hidden="true" />
-					View friend requests
-					<div
-						v-if="pendingFriends.length > 0"
-						class="bg-button-bg w-6 h-6 rounded-full flex items-center justify-center"
-					>
-						{{ pendingFriends.length }}
-					</div>
-				</template>
-			</OverflowMenu>
-		</ButtonStyled>
 	</div>
-	<div class="flex flex-col gap-2 mt-2">
+	<div class="flex flex-col gap-3">
+		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
+			{{ formatMessage(messages.friends) }}
+		</h3>
 		<template v-if="loading">
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
 				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
 				<div class="flex flex-col w-full">
 					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -325,50 +343,64 @@ onUnmounted(() => {
 				</div>
 			</div>
 		</template>
-		<template v-else-if="acceptedFriends.length === 0">
-			<div class="text-sm">
+		<template v-else-if="sortedFriends.length === 0">
+			<div class="text-sm ml-4 mr-1">
 				<div v-if="!userCredentials">
-					<span class="text-link cursor-pointer" @click="signIn">Sign in</span> to add friends!
+					<IntlFormatted :message-id="messages.signInToAddFriends">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="signIn">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
 				</div>
 				<div v-else>
-					<span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
-					to share what you're playing!
+					<IntlFormatted :message-id="messages.addFriendsToShare">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="addFriendModal.show">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
 				</div>
 			</div>
 		</template>
 		<template v-else>
-			<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
-				<template #remove-friend> <TrashIcon /> Remove friend </template>
-			</ContextMenu>
-			<div
-				v-for="friend in acceptedFriends.slice(0, 5)"
-				:key="friend.username"
-				class="flex gap-2 items-center"
-				:class="{ grayscale: !friend.online }"
-				@contextmenu.prevent.stop="
-					(event) =>
-						friendOptions.showMenu(event, friend, [
-							{
-								name: 'remove-friend',
-								color: 'danger',
-							},
-						])
-				"
-			>
-				<div class="relative">
-					<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-					<span
-						v-if="friend.online"
-						class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-					/>
-				</div>
-				<div class="flex flex-col">
-					<span class="text-md m-0 font-medium" :class="{ 'text-secondary': !friend.online }">
-						{{ friend.username }}
-					</span>
-					<span v-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-				</div>
-			</div>
+			<FriendsSection
+				v-if="activeFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="activeFriends"
+				:heading="formatMessage(messages.active)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="onlineFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="onlineFriends"
+				:heading="formatMessage(messages.online)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="offlineFriends.length > 0"
+				:is-searching="!!search"
+				:open-by-default="activeFriends.length + onlineFriends.length < 3"
+				:friends="offlineFriends"
+				:heading="formatMessage(messages.offline)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="pendingFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="pendingFriends"
+				:heading="formatMessage(messages.pending)"
+				:remove-friend="removeFriend"
+			/>
+			<p v-if="filteredFriends.length === 0 && search" class="text-sm text-secondary my-1 mx-4">
+				{{ formatMessage(messages.noFriendsMatch, { query: search }) }}
+			</p>
 		</template>
 	</div>
 </template>

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	OverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { useTemplateRef } from 'vue'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { FriendWithUserData } from '@/helpers/friends.ts'
+
+const { formatMessage } = useVIntl()
+
+const props = withDefaults(
+	defineProps<{
+		friends: FriendWithUserData[]
+		heading: string
+		removeFriend: (friend: FriendWithUserData) => Promise<void>
+		isSearching?: boolean
+		openByDefault?: boolean
+	}>(),
+	{
+		isSearching: false,
+		openByDefault: false,
+	},
+)
+
+function createContextMenuOptions(friend: FriendWithUserData) {
+	if (friend.accepted) {
+		return [
+			{
+				name: 'view-profile',
+			},
+			{
+				name: 'remove-friend',
+				color: 'danger',
+			},
+		]
+	} else {
+		return [
+			{
+				name: 'view-profile',
+			},
+			{
+				name: 'cancel-request',
+			},
+		]
+	}
+}
+
+function openProfile(username: string) {
+	openUrl('https://modrinth.com/user/' + username)
+}
+
+const friendOptions = useTemplateRef('friendOptions')
+async function handleFriendOptions(args: { item: FriendWithUserData; option: string }) {
+	switch (args.option) {
+		case 'remove-friend':
+		case 'cancel-request':
+			await props.removeFriend(args.item)
+			break
+		case 'view-profile':
+			openProfile(args.item.username)
+	}
+}
+
+const messages = defineMessages({
+	removeFriend: {
+		id: 'friends.friend.remove-friend',
+		defaultMessage: 'Remove friend',
+	},
+	heading: {
+		id: 'friends.section.heading',
+		defaultMessage: '{title} - {count}',
+	},
+	friendRequestSent: {
+		id: 'friends.friend.request-sent',
+		defaultMessage: 'Friend request sent',
+	},
+	cancelRequest: {
+		id: 'friends.friend.cancel-request',
+		defaultMessage: 'Cancel request',
+	},
+	viewProfile: {
+		id: 'friends.friend.view-profile',
+		defaultMessage: 'View profile',
+	},
+})
+</script>
+
+<template>
+	<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
+		<template #view-profile>
+			<UserIcon />
+			{{ formatMessage(messages.viewProfile) }}
+		</template>
+		<template #remove-friend> <TrashIcon /> {{ formatMessage(messages.removeFriend) }} </template>
+		<template #cancel-request> <XIcon /> {{ formatMessage(messages.cancelRequest) }} </template>
+	</ContextMenu>
+	<Accordion
+		:open-by-default="openByDefault"
+		:force-open="isSearching"
+		:button-class="
+			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
+			(isSearching
+				? ''
+				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
+		"
+	>
+		<template #title>
+			<h3 class="text-base text-primary font-medium m-0">
+				{{ formatMessage(messages.heading, { title: heading, count: friends.length }) }}
+			</h3>
+		</template>
+		<template #default>
+			<div class="pt-3 flex flex-col gap-1">
+				<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"
+					@contextmenu.prevent.stop="
+						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
+					"
+				>
+					<div class="relative">
+						<Avatar
+							:src="friend.avatar"
+							:class="{ grayscale: !friend.online && friend.accepted }"
+							class="w-12 h-12 rounded-full"
+							size="32px"
+							circle
+						/>
+						<span
+							v-if="friend.online"
+							aria-hidden="true"
+							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+						/>
+					</div>
+					<div class="flex flex-col">
+						<span
+							class="text-sm m-0"
+							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+						>
+							{{ friend.username }}
+						</span>
+						<span v-if="!friend.accepted" class="m-0 text-xs">
+							{{ formatMessage(messages.friendRequestSent) }}
+						</span>
+						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+					</div>
+					<ButtonStyled v-if="friend.accepted" circular type="transparent">
+						<OverflowMenu
+							class="opacity-0 group-hover:opacity-100 transition-opacity"
+							:options="[
+								{
+									id: 'view-profile',
+									action: () => openProfile(friend.username),
+								},
+								{
+									id: 'remove-friend',
+									action: () => removeFriend(friend),
+									color: 'red',
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #view-profile>
+								<UserIcon />
+								{{ formatMessage(messages.viewProfile) }}
+							</template>
+							<template #remove-friend>
+								<TrashIcon />
+								{{ formatMessage(messages.removeFriend) }}
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+					<ButtonStyled v-else type="transparent" circular>
+						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</template>
+	</Accordion>
+</template>

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

@@ -28,7 +28,7 @@
 								:custom-label="
 									(version) =>
 										`${version?.name} (${version?.loaders
-											.map((name) => formatCategory(name))
+											.map((name) => formatLoader(formatMessage, name))
 											.join(', ')} - ${version?.game_versions.join(', ')})`
 								"
 								:max-height="150"
@@ -36,7 +36,9 @@
 							<span v-else>
 								<span>
 									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+										selectedVersion?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')
 									}}
 									- {{ selectedVersion?.game_versions.join(', ') }})
 								</span>
@@ -57,8 +59,7 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 
@@ -67,6 +68,7 @@ import { trackEvent } from '@/helpers/analytics'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 
 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 
 const instance = ref(null)
 const project = ref(null)

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

@@ -4,10 +4,11 @@ import {
 	DownloadIcon,
 	PlusIcon,
 	RightArrowIcon,
+	SearchIcon,
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
 import { computed, ref } from 'vue'
@@ -48,19 +49,14 @@ 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)
-		}),
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
 )
 
+const isProfileCompatible = (profile) =>
+	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
+
 const onInstall = ref(() => {})
 
 defineExpose({
@@ -159,20 +155,21 @@ const reset_icon = () => {
 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 gameVersions = versions.value[0].game_versions
+	const gameVersion = gameVersions[0]
 
-	const id = await create(
-		name.value,
-		versions.value[0].game_versions[0],
-		loader,
-		'latest',
-		icon.value,
-	).catch(handleError)
+	const loaders = versions.value[0].loaders
+	const loader = loaders.includes('fabric')
+		? 'fabric'
+		: loaders.includes('neoforge')
+			? 'neoforge'
+			: loaders.includes('forge')
+				? 'forge'
+				: loaders.includes('quilt')
+					? 'quilt'
+					: 'vanilla'
+
+	const id = await create(name.value, gameVersion, loader, 'latest', icon.value).catch(handleError)
 
 	await installMod(id, versions.value[0].id).catch(handleError)
 
@@ -210,12 +207,12 @@ const createInstance = async () => {
 <template>
 	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
 		<div class="modal-body">
-			<input
+			<StyledInput
 				v-model="searchFilter"
-				autocomplete="off"
-				type="text"
-				class="search"
+				:icon="SearchIcon"
+				type="search"
 				placeholder="Search for an instance"
+				autocomplete="off"
 			/>
 			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
 				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
@@ -238,17 +235,23 @@ const createInstance = async () => {
 						"
 					>
 						<Button
-							:disabled="profile.installedMod || profile.installing"
+							:disabled="
+								!isProfileCompatible(profile) || profile.installedMod || profile.installing
+							"
 							@click="install(profile)"
 						>
-							<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+							<DownloadIcon
+								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
+							/>
 							<CheckIcon v-else-if="profile.installedMod" />
 							{{
 								profile.installing
 									? 'Installing...'
 									: profile.installedMod
 										? 'Installed'
-										: 'Install'
+										: !isProfileCompatible(profile)
+											? 'Incompatible'
+											: 'Install'
 							}}
 						</Button>
 					</div>
@@ -270,7 +273,7 @@ const createInstance = async () => {
 						</div>
 					</div>
 					<div class="creation-settings">
-						<input
+						<StyledInput
 							v-model="name"
 							autocomplete="off"
 							type="text"

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

@@ -4,12 +4,14 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
+	StyledInput,
+	useVIntl,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, type Ref, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -244,13 +246,12 @@ const messages = defineMessages({
 			{{ 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'">
@@ -291,9 +292,8 @@ const messages = defineMessages({
 				@click="toggleGroup(group)"
 			/>
 			<div class="flex gap-2 items-center">
-				<input
+				<StyledInput
 					v-model="newCategoryInput"
-					type="text"
 					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
 					@submit="() => addCategory"
 				/>

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -109,14 +114,13 @@ const messages = defineMessages({
 		<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 mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -125,14 +129,13 @@ const messages = defineMessages({
 		<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 mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -141,14 +144,13 @@ const messages = defineMessages({
 		<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 mt-2"
 		/>
 	</div>
 </template>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
 	DownloadIcon,
+	getLoaderIcon,
 	HammerIcon,
 	IssuesIcon,
 	SpinnerIcon,
@@ -15,17 +16,13 @@ import {
 	ButtonStyled,
 	Checkbox,
 	Chips,
+	Combobox,
+	defineMessages,
+	formatLoader,
 	injectNotificationManager,
-	TeleportDropdownMenu,
+	useVIntl,
 } from '@modrinth/ui'
-import {
-	formatCategory,
-	type GameVersionTag,
-	type PlatformTag,
-	type Project,
-	type Version,
-} from '@modrinth/utils'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import type { GameVersionTag, PlatformTag, Project, Version } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
 
@@ -128,9 +125,7 @@ if (props.instance.linked_data && props.instance.linked_data.project_id && !prop
 	fetching.value = false
 }
 
-const currentLoaderIcon = computed(
-	() => loaders?.value.find((x) => x.name === props.instance.loader)?.icon,
-)
+const currentLoaderIcon = computed(() => getLoaderIcon(props.instance.loader))
 
 const gameVersionsForLoader = computed(() => {
 	return all_game_versions?.value.filter((item) => {
@@ -158,6 +153,21 @@ const selectableGameVersionNumbers = computed(() => {
 		.map((x) => x.version)
 })
 
+const gameVersionOptions = computed(() =>
+	(selectableGameVersionNumbers.value ?? []).map((v) => ({ value: v, label: v })),
+)
+
+const loaderVersionOptions = computed(() =>
+	(selectableLoaderVersions.value ?? []).map((opt, index) => ({ value: index, label: opt.id })),
+)
+
+const loaderVersionLabel = computed(() => {
+	const idx = loaderVersionIndex.value
+	return idx >= 0 && selectableLoaderVersions.value
+		? selectableLoaderVersions.value[idx]?.id
+		: 'Select version'
+})
+
 const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
 	if (gameVersion.value) {
 		if (loader.value === 'fabric') {
@@ -534,7 +544,7 @@ const messages = defineMessages({
 						v-else
 						class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
 					>
-						<div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
+						<component :is="currentLoaderIcon" v-if="currentLoaderIcon" />
 						<WrenchIcon v-else />
 					</div>
 					<div class="flex flex-col gap-2 justify-center">
@@ -553,7 +563,7 @@ const messages = defineMessages({
 									? modpackVersion
 										? modpackVersion?.version_number
 										: 'Unknown version'
-									: formatCategory(instance.loader)
+									: formatLoader(formatMessage, instance.loader)
 							}}
 							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
 								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
@@ -647,11 +657,11 @@ const messages = defineMessages({
 				{{ formatMessage(messages.gameVersion) }}
 			</h2>
 			<div class="flex flex-wrap mt-2 gap-2">
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableGameVersionNumbers !== undefined"
 					v-model="gameVersion"
-					:options="selectableGameVersionNumbers"
-					name="Game Version Dropdown"
+					:options="gameVersionOptions"
+					:display-value="gameVersion || formatMessage(messages.unknownVersion)"
 				/>
 				<Checkbox
 					v-if="hasSnapshots"
@@ -661,16 +671,19 @@ const messages = defineMessages({
 			</div>
 			<template v-if="loader !== 'vanilla'">
 				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
+					{{
+						formatMessage(messages.loaderVersion, {
+							loader: formatLoader(formatMessage, loader),
+						})
+					}}
 				</h2>
-				<TeleportDropdownMenu
+				<Combobox
 					v-if="selectableLoaderVersions"
-					:model-value="selectableLoaderVersions[loaderVersionIndex]"
-					:options="selectableLoaderVersions"
-					:display-name="(option: ManifestLoaderVersion) => option?.id"
+					v-model="loaderVersionIndex"
+					:options="loaderVersionOptions"
+					:display-value="loaderVersionLabel"
 					name="Version selector"
 					class="mt-2"
-					@change="(value) => (loaderVersionIndex = value.index)"
 				/>
 				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
 					<IssuesIcon />
@@ -694,7 +707,7 @@ const messages = defineMessages({
 												? messages.alreadyInstalledVanilla
 												: messages.alreadyInstalledModded,
 											{
-												platform: formatCategory(loader),
+												platform: formatLoader(formatMessage, loader),
 												version: instance.loader_version,
 												game_version: gameVersion,
 											},

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

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, readonly, ref, watch } from 'vue'
 
 import JavaSelector from '@/components/ui/JavaSelector.vue'
@@ -9,7 +15,7 @@ import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
 
-import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -22,12 +28,12 @@ const overrideJavaInstall = ref(!!props.instance.java_path)
 const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
 const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
 
-const overrideJavaArgs = ref(props.instance.extra_launch_args?.length !== undefined)
+const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
 const javaArgs = ref(
 	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
 )
 
-const overrideEnvVars = ref(props.instance.custom_env_vars?.length !== undefined)
+const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
 const envVars = ref(
 	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
 		.map((x) => x.join('='))
@@ -42,36 +48,23 @@ const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) a
 }
 
 const editProfileObject = computed(() => {
-	const editProfile: {
-		java_path?: string
-		extra_launch_args?: string[]
-		custom_env_vars?: string[][]
-		memory?: MemorySettings
-	} = {}
-
-	if (overrideJavaInstall.value) {
-		if (javaInstall.value.path !== '') {
-			editProfile.java_path = javaInstall.value.path.replace('java.exe', 'javaw.exe')
-		}
+	return {
+		java_path:
+			overrideJavaInstall.value && javaInstall.value.path !== ''
+				? javaInstall.value.path.replace('java.exe', 'javaw.exe')
+				: null,
+		extra_launch_args: overrideJavaArgs.value
+			? javaArgs.value.trim().split(/\s+/).filter(Boolean)
+			: null,
+		custom_env_vars: overrideEnvVars.value
+			? envVars.value
+					.trim()
+					.split(/\s+/)
+					.filter(Boolean)
+					.map((x) => x.split('=').filter(Boolean))
+			: null,
+		memory: overrideMemorySettings.value ? memory.value : null,
 	}
-
-	if (overrideJavaArgs.value) {
-		editProfile.extra_launch_args = javaArgs.value.trim().split(/\s+/).filter(Boolean)
-	}
-
-	if (overrideEnvVars.value) {
-		editProfile.custom_env_vars = envVars.value
-			.trim()
-			.split(/\s+/)
-			.filter(Boolean)
-			.map((x) => x.split('=').filter(Boolean))
-	}
-
-	if (overrideMemorySettings.value) {
-		editProfile.memory = memory.value
-	}
-
-	return editProfile
 })
 
 watch(
@@ -169,27 +162,25 @@ const messages = defineMessages({
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
 		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
 			:disabled="!overrideJavaArgs"
-			type="text"
-			class="w-full"
 			placeholder="Enter java arguments..."
+			wrapper-class="w-full"
 		/>
 		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
 		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
 			:disabled="!overrideEnvVars"
-			type="text"
-			class="w-full"
 			placeholder="Enter environmental variables..."
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -26,20 +32,16 @@ const fullscreenSetting: Ref<boolean> = ref(
 )
 
 const editProfileObject = computed(() => {
-	const editProfile: {
-		force_fullscreen?: boolean
-		game_resolution?: [number, number]
-	} = {}
-
-	if (overrideWindowSettings.value) {
-		editProfile.force_fullscreen = fullscreenSetting.value
-
-		if (!fullscreenSetting.value) {
-			editProfile.game_resolution = resolution.value
+	if (!overrideWindowSettings.value) {
+		return {
+			force_fullscreen: null,
+			game_resolution: null,
 		}
 	}
-
-	return editProfile
+	return {
+		force_fullscreen: fullscreenSetting.value,
+		game_resolution: fullscreenSetting.value ? null : resolution.value,
+	}
 })
 
 watch(
@@ -95,14 +97,6 @@ const messages = defineMessages({
 		<Checkbox
 			v-model="overrideWindowSettings"
 			:label="formatMessage(messages.customWindowSettings)"
-			@update:model-value="
-				(value) => {
-					if (!value) {
-						resolution = globalSettings.game_resolution
-						fullscreenSetting = globalSettings.force_fullscreen
-					}
-				}
-			"
 		/>
 		<div class="mt-2 flex items-center gap-4 justify-between">
 			<div>
@@ -134,7 +128,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -153,7 +147,7 @@ const messages = defineMessages({
 					{{ 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,184 @@
+<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 { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleSevereError } from '@/store/error.js'
+
+import { type MinecraftAuthError, minecraftAuthErrors } 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 = minecraftAuthErrors.find((e) => rawError.value.includes(e.errorCode)) ?? null
+
+	debugCollapsed.value = true
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({
+	show,
+	hide,
+})
+
+async function signInAgain() {
+	try {
+		loadingSignIn.value = true
+		const loggedIn = await login_flow()
+		if (loggedIn) {
+			await set_default_user(loggedIn.profile.id)
+		}
+		loadingSignIn.value = false
+		modal.value?.hide()
+	} catch (err) {
+		loadingSignIn.value = false
+		handleSevereError(err)
+	}
+}
+
+const debugInfo = computed(() => rawError.value || 'No error message.')
+
+async function copyToClipboard(text: string) {
+	await navigator.clipboard.writeText(text)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 3000)
+}
+</script>
+
+<template>
+	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'">
+		<div class="flex flex-col gap-6">
+			<Admonition
+				type="warning"
+				body="	We couldn't sign you into your Microsoft account. This may be due to account restrictions or
+				regional limitations."
+			>
+			</Admonition>
+
+			<!-- Matched error details -->
+			<div class="bg-surface-2 rounded-2xl p-4 px-5 flex flex-col gap-3">
+				<template v-if="matchedError">
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">What we think happened</h3>
+						<p class="text-sm text-secondary m-0">
+							{{ matchedError.whatHappened }}
+						</p>
+					</div>
+
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">How to fix it</h3>
+						<ol class="list-none flex flex-col gap-2 m-0 pl-0">
+							<li
+								v-for="(step, index) in matchedError.stepsToFix"
+								:key="index"
+								class="flex items-baseline gap-2"
+							>
+								<span
+									class="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded-full bg-surface-4 border border-solid border-surface-5 text-xs font-medium"
+								>
+									{{ index + 1 }}
+								</span>
+								<!-- eslint-disable-next-line vue/no-v-html -->
+								<span
+									class="text-sm [&_a]:text-info [&_a]:font-medium [&_a]:underline"
+									v-html="step"
+								/>
+							</li>
+						</ol>
+					</div>
+				</template>
+				<template v-else>
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">Unknown error</h3>
+						<p class="text-sm text-secondary m-0">
+							We don’t recognize this error and can’t recommend specific steps to resolve it.
+						</p>
+						<p class="text-sm text-secondary m-0">
+							Try visiting
+							<a
+								class="text-info font-medium underline hover:underline"
+								href="https://www.minecraft.net/en-us/login"
+								>Minecraft Login</a
+							>
+							and signing in, as it may prompt you with the necessary steps. You can also contact
+							support and we can look into it further.
+						</p>
+					</div>
+				</template>
+			</div>
+
+			<!-- Action buttons -->
+			<div class="flex items-center gap-2">
+				<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 flex items-start">
+							<div class="m-0 p-0 rounded-none bg-transparent text-sm font-mono">
+								{{ 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,90 @@
+export interface MinecraftAuthError {
+	errorCode: string
+	whatHappened: string
+	stepsToFix: string[]
+}
+
+export const minecraftAuthErrors: MinecraftAuthError[] = [
+	{
+		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',
+		],
+	},
+]

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

@@ -3,16 +3,23 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
 	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
 } from '@modrinth/assets'
-import { ProgressBar, TabbedModal } from '@modrinth/ui'
+import {
+	commonMessages,
+	defineMessage,
+	defineMessages,
+	ProgressBar,
+	TabbedModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { defineMessage, defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -20,6 +27,7 @@ import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
+import LanguageSettings from '@/components/ui/settings/LanguageSettings.vue'
 import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
@@ -46,6 +54,15 @@ const tabs = [
 		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.language',
+			defaultMessage: 'Language',
+		}),
+		icon: LanguagesIcon,
+		content: LanguageSettings,
+		badge: commonMessages.beta,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',

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

@@ -0,0 +1,189 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
+		<div class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" :header="formatMessage(messages.sharedServerInstance)">
+				{{ formatMessage(messages.serverRequiresMods) }}
+			</Admonition>
+
+			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
+				<Avatar
+					v-if="sharedBy?.icon_url"
+					:src="sharedBy.icon_url"
+					:alt="sharedBy.name"
+					size="24px"
+				/>
+				<span>
+					<IntlFormatted :message-id="messages.sharedByToday">
+						<template #~name>
+							<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
+						</template>
+					</IntlFormatted>
+				</span>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">
+					{{ formatMessage(messages.sharedInstance) }}
+				</span>
+				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
+					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ project.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>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	formatLoader,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import { get_organization, get_team, get_version } from '@/helpers/cache.js'
+import { install } from '@/store/install.js'
+
+const props = defineProps<{
+	project: Labrinth.Projects.v2.Project
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const { formatMessage } = useVIntl()
+
+const { data: organization } = useQuery({
+	queryKey: computed(() => ['organization', props.project.organization]),
+	queryFn: () => get_organization(props.project.organization!, 'must_revalidate'),
+	enabled: computed(() => !!props.project.organization),
+})
+
+const { data: teamMembers } = useQuery({
+	queryKey: computed(() => ['team', props.project.team]),
+	queryFn: () => get_team(props.project.team, 'must_revalidate'),
+	enabled: computed(() => !!props.project.team && !props.project.organization),
+})
+
+const sharedBy = computed(() => {
+	if (organization.value) {
+		return {
+			name: organization.value.name,
+			icon_url: organization.value.icon_url,
+		}
+	}
+	if (teamMembers.value) {
+		const owner = teamMembers.value.find((member: { is_owner: boolean }) => member.is_owner)
+		if (owner) {
+			return {
+				name: owner.user.username,
+				icon_url: owner.user.avatar_url,
+			}
+		}
+	}
+	return null
+})
+
+const loaderDisplay = computed(() => {
+	const loader = props.project.loaders?.[0]
+	if (!loader) return ''
+	return formatLoader(formatMessage, loader)
+})
+
+// Fetch the most recent version to get mod count from dependencies
+const latestVersionId = computed(() => props.project.versions?.[0] ?? null)
+const { data: latestVersion } = useQuery({
+	queryKey: computed(() => ['version', latestVersionId.value]),
+	queryFn: () => get_version(latestVersionId.value, 'must_revalidate'),
+	enabled: computed(() => !!latestVersionId.value),
+})
+const modCount = computed(() => latestVersion.value?.dependencies?.length)
+
+async function handleAccept() {
+	hide()
+	try {
+		await install(props.project.id, null, null, 'ProjectPageInstallToPlayModal')
+	} catch (error) {
+		console.error('Failed to install project from InstallToPlayModal:', error)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+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',
+	},
+	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.',
+	},
+	sharedByToday: {
+		id: 'app.modal.install-to-play.shared-by-today',
+		defaultMessage: '{name} shared this instance with you today.',
+	},
+	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',
+	},
+})
+
+defineExpose({ show, hide })
+</script>

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

@@ -7,9 +7,15 @@ import {
 	MonitorIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
+import {
+	Avatar,
+	commonMessages,
+	defineMessage,
+	TabbedModal,
+	type TabbedModalTab,
+	useVIntl,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { defineMessage, useVIntl } from '@vintl/vintl'
 import { ref } from 'vue'
 
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
@@ -75,11 +81,6 @@ function show() {
 }
 
 defineExpose({ show })
-
-const titleMessage = defineMessage({
-	id: 'instance.settings.title',
-	defaultMessage: 'Settings',
-})
 </script>
 <template>
 	<ModalWrapper ref="modal">
@@ -91,7 +92,9 @@ const titleMessage = defineMessage({
 					:tint-by="props.instance.path"
 				/>
 				{{ instance.name }} <ChevronRightIcon />
-				<span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
+				<span class="font-extrabold text-contrast">{{
+					formatMessage(commonMessages.settingsLabel)
+				}}</span>
 			</span>
 		</template>
 

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

@@ -0,0 +1,382 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.updateToPlay)" :closable="true" no-padding>
+		<div class="max-w-[500px]">
+			<div class="flex flex-col gap-4 p-4">
+				<Admonition type="warning" :header="formatMessage(messages.updateRequired)">
+					{{ formatMessage(messages.updateRequiredDescription, { name: instance.name }) }}
+				</Admonition>
+
+				<div v-if="diffs.length" class="flex flex-col gap-2">
+					<span v-if="publishedDate" class="text-contrast font-semibold">{{
+						formatMessage(messages.publishedDate, { date: publishedDate })
+					}}</span>
+					<div class="flex gap-2">
+						<div v-if="removedCount" class="flex gap-1 items-center">
+							<MinusIcon />
+							{{ formatMessage(messages.removedCount, { count: removedCount }) }}
+						</div>
+						<div v-if="addedCount" class="flex gap-1 items-center">
+							<PlusIcon />
+							{{ formatMessage(messages.addedCount, { count: addedCount }) }}
+						</div>
+						<div v-if="updatedCount" class="flex gap-1 items-center">
+							<RefreshCwIcon />
+							{{ formatMessage(messages.updatedCount, { count: updatedCount }) }}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-if="diffs.length" class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto">
+				<div
+					v-for="diff in diffs"
+					:key="diff.project_id"
+					class="grid grid-cols-[auto_1fr_1fr_1fr] items-center min-h-10 h-10 gap-2"
+				>
+					<div class="flex flex-col justify-between items-center">
+						<div class="w-[1px] h-2"></div>
+						<PlusIcon v-if="diff.type === 'added'" />
+						<MinusIcon v-else-if="diff.type === 'removed'" />
+						<RefreshCwIcon v-else />
+						<div class="bg-surface-5 w-[1px] h-2 relative top-1"></div>
+					</div>
+
+					<div class="flex gap-1 col-span-2">
+						<span class="text-sm">{{ formatMessage(diffTypeMessages[diff.type]) }}</span>
+						<span
+							v-if="diff.project"
+							v-tooltip="diff.project.title"
+							class="text-sm text-contrast font-medium truncate"
+						>
+							{{ diff.project.title }}
+						</span>
+					</div>
+
+					<span
+						v-if="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
+						v-tooltip="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
+						class="text-xs truncate text-right"
+					>
+						{{ getFilename(diff.newVersion) || getFilename(diff.currentVersion) }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-between gap-2">
+				<ButtonStyled color="red" type="transparent">
+					<button @click="handleReport">
+						<ReportIcon />
+						{{ formatMessage(commonMessages.reportButton) }}
+					</button>
+				</ButtonStyled>
+				<div class="flex gap-2">
+					<ButtonStyled>
+						<button @click="handleDecline">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="handleUpdate">
+							<DownloadIcon />
+							{{ formatMessage(commonMessages.updateButton) }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	DownloadIcon,
+	MinusIcon,
+	PlusIcon,
+	RefreshCwIcon,
+	ReportIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import dayjs from 'dayjs'
+import { computed, ref, watch } from 'vue'
+
+import { get_project, get_project_many, get_version_many } from '@/helpers/cache.js'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+
+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
+}
+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 { instance } = defineProps<{
+	instance: GameInstance
+}>()
+
+const { formatMessage } = useVIntl()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const diffs = ref<DependencyDiff[]>([])
+const latestVersionId = ref<string | null>(null)
+const latestVersion = ref<Version | null>(null)
+
+const removedCount = computed(() => diffs.value.filter((d) => d.type === 'removed').length)
+const addedCount = computed(() => diffs.value.filter((d) => d.type === 'added').length)
+const updatedCount = computed(() => diffs.value.filter((d) => d.type === 'updated').length)
+const publishedDate = computed(() =>
+	latestVersion.value?.date_published ? new Date(latestVersion.value.date_published) : null,
+)
+
+function getFilename(version?: Version): string | undefined {
+	return version?.files.find((f) => f.primary)?.filename
+}
+
+async function computeDependencyDiffs(
+	currentDeps: Dependency[],
+	latestDeps: Dependency[],
+): Promise<DependencyDiff[]> {
+	const currentByProject = new Map<string, Dependency>(
+		currentDeps.map((d) => [d.project_id || '', d]),
+	)
+	const latestByProject = new Map<string, Dependency>(
+		latestDeps.map((d) => [d.project_id || '', d]),
+	)
+
+	const diffs: DependencyDiff[] = []
+
+	// Find added and updated dependencies
+	latestByProject.forEach((latestDep, projectId) => {
+		if (!projectId) return
+		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
+	currentByProject.forEach((currentDep, projectId) => {
+		if (!projectId) return
+		if (!latestByProject.has(projectId)) {
+			diffs.push({
+				type: 'removed',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+			})
+		}
+	})
+
+	// 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, 'must_revalidate'),
+		get_version_many(allVersionIds, 'must_revalidate'),
+	])
+
+	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]))
+
+	return 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 = { removed: 0, added: 1, updated: 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()
+		})
+}
+
+async function checkUpdateAvailable(instance: GameInstance): Promise<DependencyDiff[] | null> {
+	if (!instance.linked_data) return null
+
+	try {
+		const project = await get_project(instance.linked_data.project_id, 'must_revalidate')
+		if (!project || !project.versions || project.versions.length === 0) {
+			return null
+		}
+
+		const versions = await get_version_many(project.versions, 'must_revalidate')
+		const sortedVersions = versions.sort(
+			(a: { date_published: string }, b: { date_published: string }) =>
+				dayjs(b.date_published).valueOf() - dayjs(a.date_published).valueOf(),
+		)
+
+		latestVersion.value = sortedVersions[0]
+		latestVersionId.value = latestVersion.value?.id || null
+
+		const currentVersionId = instance.linked_data.version_id
+		const currentVersion = versions.find((v: { id: string }) => v.id === currentVersionId)
+
+		// Compute dependency diffs between current and latest version
+		if (currentVersion && latestVersion.value) {
+			return await computeDependencyDiffs(
+				currentVersion.dependencies || [],
+				latestVersion.value.dependencies || [],
+			)
+		}
+	} catch (error) {
+		console.error('Error checking for updates:', error)
+		return null
+	}
+	return null
+}
+
+watch(
+	() => instance,
+	async () => {
+		const result = await checkUpdateAvailable(instance)
+		diffs.value = result || []
+	},
+	{ immediate: true, deep: true },
+)
+
+async function handleUpdate() {
+	hide()
+	try {
+		if (latestVersionId.value) {
+			await update_managed_modrinth_version(instance.path, latestVersionId.value)
+		}
+	} catch (error) {
+		console.error('Error updating instance:', error)
+	}
+}
+
+function handleReport() {
+	if (instance.linked_data?.project_id) {
+		openUrl(`https://modrinth.com/report?item=project&itemID=${instance.linked_data.project_id}`)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.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.',
+	},
+	publishedDate: {
+		id: 'app.modal.update-to-play.published-date',
+		defaultMessage: '{date, date, long}',
+	},
+	removedCount: {
+		id: 'app.modal.update-to-play.removed-count',
+		defaultMessage: '{count} removed',
+	},
+	addedCount: {
+		id: 'app.modal.update-to-play.added-count',
+		defaultMessage: '{count} added',
+	},
+	updatedCount: {
+		id: 'app.modal.update-to-play.updated-count',
+		defaultMessage: '{count} updated',
+	},
+})
+
+const diffTypeMessages = defineMessages({
+	added: {
+		id: 'app.modal.update-to-play.diff-type.added',
+		defaultMessage: 'Added',
+	},
+	removed: {
+		id: 'app.modal.update-to-play.diff-type.removed',
+		defaultMessage: 'Removed',
+	},
+	updated: {
+		id: 'app.modal.update-to-play.diff-type.updated',
+		defaultMessage: 'Updated',
+	},
+})
+
+defineExpose({ show, hide })
+</script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
@@ -50,7 +50,7 @@ watch(
 			:model-value="themeStore.advancedRendering"
 			@update:model-value="
 				(e) => {
-					themeStore.advancedRendering = e
+					themeStore.advancedRendering = !!e
 					settings.advanced_rendering = themeStore.advancedRendering
 				}
 			"
@@ -86,12 +86,13 @@ watch(
 			<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>
-		<TeleportDropdownMenu
+		<Combobox
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
 			class="w-40"
-			:options="['Home', 'Library']"
+			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
+			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>
 
@@ -122,7 +123,7 @@ watch(
 			:model-value="settings.toggle_sidebar"
 			@update:model-value="
 				(e) => {
-					settings.toggle_sidebar = e
+					settings.toggle_sidebar = !!e
 					themeStore.toggleSidebar = settings.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'
@@ -73,7 +73,7 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="width"
 				v-model="settings.game_resolution[0]"
 				:disabled="settings.force_fullscreen"
@@ -91,13 +91,12 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="height"
 				v-model="settings.game_resolution[1]"
 				:disabled="settings.force_fullscreen"
 				autocomplete="off"
 				type="number"
-				class="input"
 				placeholder="Enter height..."
 			/>
 		</div>
@@ -118,23 +117,23 @@ watch(
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="settings.launchArgs"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter java arguments..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="settings.envVars"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter environmental variables..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<hr class="mt-4 bg-button-border border-none h-[1px]" />
@@ -143,37 +142,37 @@ watch(
 
 		<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
+		<StyledInput
 			id="pre-launch"
 			v-model="settings.hooks.pre_launch"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter pre-launch command..."
-			class="w-full"
+			wrapper-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
+		<StyledInput
 			id="wrapper"
 			v-model="settings.hooks.wrapper"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter wrapper command..."
-			class="w-full"
+			wrapper-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
+		<StyledInput
 			id="post-exit"
 			v-model="settings.hooks.post_exit"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter post-exit command..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

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

@@ -21,7 +21,7 @@ async function updateJavaVersion(version) {
 }
 </script>
 <template>
-	<div v-for="(javaVersion, index) in [21, 17, 8]" :key="`java-${javaVersion}`">
+	<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>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+	Admonition,
+	AutoLink,
+	IntlFormatted,
+	LanguageSelector,
+	languageSelectorMessages,
+	LOCALES,
+	useVIntl,
+} from '@modrinth/ui'
+import { 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 settings = ref(await get())
+
+watch(
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+
+const $isChanging = ref(false)
+
+async function onLocaleChange(newLocale: string) {
+	if (settings.value.locale === newLocale) return
+
+	$isChanging.value = true
+	try {
+		i18n.global.locale.value = newLocale
+		settings.value.locale = newLocale
+	} finally {
+		$isChanging.value = false
+	}
+}
+</script>
+
+<template>
+	<h2 class="m-0 text-lg font-extrabold text-contrast">Language</h2>
+
+	<Admonition type="warning" class="mt-2 mb-4">
+		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
+	</Admonition>
+
+	<p class="m-0 mb-4">
+		<IntlFormatted
+			:message-id="languageSelectorMessages.languagesDescription"
+			:values="{ platform }"
+		>
+			<template #~crowdin-link="{ children }">
+				<AutoLink to="https://translate.modrinth.com">
+					<component :is="() => children" />
+				</AutoLink>
+			</template>
+		</IntlFormatted>
+	</p>
+
+	<LanguageSelector
+		:current-locale="settings.locale"
+		:locales="LOCALES"
+		:on-locale-change="onLocaleChange"
+		:is-changing="$isChanging"
+	/>
+</template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, Slider } from '@modrinth/ui'
+import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
@@ -65,13 +65,19 @@ async function findLauncherDir() {
 	</p>
 
 	<div class="m-1 my-2">
-		<div class="iconified-input w-full">
-			<BoxIcon />
-			<input id="appDir" v-model="settings.custom_dir" type="text" class="input" />
-			<Button class="r-btn" @click="findLauncherDir">
-				<FolderSearchIcon />
-			</Button>
-		</div>
+		<StyledInput
+			id="appDir"
+			v-model="settings.custom_dir"
+			:icon="BoxIcon"
+			type="text"
+			wrapper-class="w-full"
+		>
+			<template #right>
+				<Button class="r-btn" @click="findLauncherDir">
+					<FolderSearchIcon />
+				</Button>
+			</template>
+		</StyledInput>
 	</div>
 
 	<div>

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

@@ -130,6 +130,7 @@ import {
 	remove_custom_skin,
 	type Skin,
 	type SkinModel,
+	type SkinTextureUrl,
 	unequip_skin,
 } from '@/helpers/skins.ts'
 
@@ -142,7 +143,7 @@ const currentSkin = ref<Skin | null>(null)
 const shouldRestoreModal = ref(false)
 const isSaving = ref(false)
 
-const uploadedTextureUrl = ref<string | null>(null)
+const uploadedTextureUrl = ref<SkinTextureUrl | null>(null)
 const previewSkin = ref<string>('')
 
 const variant = ref<SkinModel>('CLASSIC')
@@ -188,7 +189,7 @@ function getSortedCapeExcluding(excludeId: string): Cape | undefined {
 
 async function loadPreviewSkin() {
 	if (uploadedTextureUrl.value) {
-		previewSkin.value = uploadedTextureUrl.value
+		previewSkin.value = uploadedTextureUrl.value.normalized
 	} else if (currentSkin.value) {
 		try {
 			previewSkin.value = await get_normalized_skin_texture(currentSkin.value)
@@ -253,11 +254,11 @@ async function show(e: MouseEvent, skin?: Skin) {
 	modal.value?.show(e)
 }
 
-async function showNew(e: MouseEvent, skinTextureUrl: string) {
+async function showNew(e: MouseEvent, skinTextureUrl: SkinTextureUrl) {
 	mode.value = 'new'
 	currentSkin.value = null
 	uploadedTextureUrl.value = skinTextureUrl
-	variant.value = await determineModelType(skinTextureUrl)
+	variant.value = await determineModelType(skinTextureUrl.original)
 	selectedCape.value = undefined
 	visibleCapeList.value = []
 	initVisibleCapeList()
@@ -267,7 +268,7 @@ async function showNew(e: MouseEvent, skinTextureUrl: string) {
 	modal.value?.show(e)
 }
 
-async function restoreWithNewTexture(skinTextureUrl: string) {
+async function restoreWithNewTexture(skinTextureUrl: SkinTextureUrl) {
 	uploadedTextureUrl.value = skinTextureUrl
 	await loadPreviewSkin()
 
@@ -361,7 +362,7 @@ async function save() {
 		let textureUrl: string
 
 		if (uploadedTextureUrl.value) {
-			textureUrl = uploadedTextureUrl.value
+			textureUrl = uploadedTextureUrl.value.original
 		} else {
 			textureUrl = currentSkin.value!.texture
 		}

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

@@ -15,10 +15,10 @@ import {
 	OverflowMenu,
 	SmartClickable,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { useVIntl } from '@vintl/vintl'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
@@ -130,7 +130,7 @@ onUnmounted(() => {
 			/>
 		</template>
 		<div
-			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow rounded-xl smart-clickable:highlight-on-hover"
 		>
 			<Avatar
 				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { LoaderCircleIcon } from '@modrinth/assets'
 import type { GameVersion } from '@modrinth/ui'
 import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import { platform } from '@tauri-apps/plugin-os'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -39,6 +41,7 @@ const props = defineProps<{
 const theme = useTheming()
 
 const jumpBackInItems = ref<JumpBackInItem[]>([])
+const loading = ref(true)
 const serverData = ref<Record<string, ServerData>>({})
 const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
 const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
@@ -46,6 +49,11 @@ const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []
 const MIN_JUMP_BACK_IN = 3
 const MAX_JUMP_BACK_IN = 6
 const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
+const MAX_LINUX_POPULATES = 3
+
+// Track populate calls on Linux to prevent server ping spam
+const isLinux = platform() === 'linux'
+const linuxPopulateCount = ref(0)
 
 type BaseJumpBackInItem = {
 	last_played: Dayjs
@@ -71,11 +79,19 @@ watch([() => props.recentInstances, () => showWorlds.value], async () => {
 	})
 })
 
-await populateJumpBackIn().catch(() => {
-	console.error('Failed to populate jump back in')
-})
+populateJumpBackIn()
+	.catch(() => {
+		console.error('Failed to populate jump back in')
+	})
+	.finally(() => {
+		loading.value = false
+	})
 
 async function populateJumpBackIn() {
+	// On Linux, limit automatic populates to prevent server ping spam
+	if (isLinux && linuxPopulateCount.value >= MAX_LINUX_POPULATES) return
+	if (isLinux) linuxPopulateCount.value++
+
 	console.info('Repopulating jump back in...')
 
 	const worldItems: WorldJumpBackInItem[] = []
@@ -224,6 +240,7 @@ const checkProcesses = async () => {
 
 onMounted(() => {
 	checkProcesses()
+	linuxPopulateCount.value = 0
 })
 
 onUnmounted(() => {
@@ -233,7 +250,15 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
+	<div v-if="loading" class="flex flex-col gap-2">
+		<span class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold">
+			Jump back in
+		</span>
+		<div class="text-center py-4">
+			<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
+		</div>
+	</div>
+	<div v-else-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
 		<HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
 			Jump back in
 		</HeadingLink>

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

@@ -17,18 +17,19 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
+import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	OverflowMenu,
 	SmartClickable,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { formatNumber, getPingLevel } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import type { MessageDescriptor } from '@vintl/vintl'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'
@@ -181,14 +182,16 @@ const messages = defineMessages({
 			/>
 		</template>
 		<div
-			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised card-shadow smart-clickable:highlight-on-hover rounded-xl"
 			:class="{
 				'world-item-highlighted': highlighted,
 			}"
 		>
 			<Avatar
 				:src="
-					world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+					world.type === 'server' && serverStatus
+						? (serverStatus.favicon ?? world.icon)
+						: world.icon
 				"
 				size="48px"
 			/>

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref } from 'vue'
 
 import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessage,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

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

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -97,12 +104,11 @@ const messages = defineMessages({
 			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 				{{ formatMessage(messages.name) }}
 			</h2>
-			<input
+			<StyledInput
 				v-model="name"
-				type="text"
 				:placeholder="formatMessage(messages.placeholderName)"
-				class="w-full"
 				autocomplete="off"
+				wrapper-class="w-full"
 			/>
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
+import { Checkbox, defineMessage, useVIntl } from '@modrinth/ui'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { TeleportDropdownMenu } from '@modrinth/ui'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import {
+	Combobox,
+	defineMessages,
+	type MessageDescriptor,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 
@@ -53,33 +58,38 @@ defineExpose({ resourcePackOptions })
 		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 			{{ formatMessage(messages.name) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="name"
-			type="text"
 			:placeholder="formatMessage(messages.placeholderName)"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.address) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="address"
-			type="text"
 			placeholder="example.modrinth.gg"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.resourcePack) }}
 		</h2>
 		<div>
-			<TeleportDropdownMenu
+			<Combobox
 				v-model="resourcePack"
-				:options="resourcePackOptions"
+				:options="
+					resourcePackOptions.map((o) => ({
+						value: o,
+						label: formatMessage(resourcePackOptionMessages[o]),
+					}))
+				"
 				name="Server resource pack"
-				:display-name="
-					(option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+				:display-value="
+					resourcePack
+						? formatMessage(resourcePackOptionMessages[resourcePack])
+						: 'Select an option'
 				"
 			/>
 		</div>

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

@@ -1,24 +0,0 @@
-import { posthog } from 'posthog-js'
-
-export const initAnalytics = () => {
-	posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
-		persistence: 'localStorage',
-		api_host: 'https://posthog.modrinth.com',
-	})
-}
-
-export const debugAnalytics = () => {
-	posthog.debug()
-}
-
-export const optOutAnalytics = () => {
-	posthog.opt_out_capturing()
-}
-
-export const optInAnalytics = () => {
-	posthog.opt_in_capturing()
-}
-
-export const trackEvent = (eventName, properties) => {
-	posthog.capture(eventName, properties)
-}

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

@@ -0,0 +1,80 @@
+import { posthog } from 'posthog-js'
+
+interface InstanceProperties {
+	loader: string
+	game_version: string
+}
+
+interface ProjectProperties extends InstanceProperties {
+	id: string
+	project_type: string
+}
+
+type AnalyticsEventMap = {
+	Launched: { version: string; dev: boolean; onboarded: boolean }
+	PageView: { path: string; fromPath: string; failed: unknown }
+	InstanceCreate: { source: string }
+	InstanceCreateStart: { source: string }
+	InstancePlay: InstanceProperties & { source: string }
+	InstanceStop: Partial<InstanceProperties> & { source?: string }
+	InstanceDuplicate: InstanceProperties
+	InstanceRepair: InstanceProperties
+	InstanceSetIcon: Record<string, never>
+	InstanceRemoveIcon: Record<string, never>
+	InstanceUpdateAll: InstanceProperties & { count: number; selected: boolean }
+	InstanceProjectUpdate: InstanceProperties & { id: string; name: string; project_type: string }
+	InstanceProjectDisable: InstanceProperties & {
+		id: string
+		name: string
+		project_type: string
+		disabled: boolean
+	}
+	InstanceProjectRemove: InstanceProperties & { id: string; name: string; project_type: string }
+	ProjectInstall: ProjectProperties & { version_id: string; title: string; source: string }
+	ProjectInstallStart: { source: string }
+	PackInstall: { id: string; version_id: string; title: string; source: string }
+	PackInstallStart: Record<string, never>
+	AccountLogIn: { source?: string }
+	AccountLogOut: Record<string, never>
+	JavaTest: { path: string; success: boolean }
+	JavaManualSelect: { version: string }
+	JavaAutoDetect: { path: string; version: string }
+}
+
+export type AnalyticsEvent = keyof AnalyticsEventMap
+
+let initialized = false
+
+export const initAnalytics = () => {
+	if (initialized) return
+	posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
+		persistence: 'localStorage',
+		api_host: 'https://posthog.modrinth.com',
+	})
+	initialized = true
+}
+
+export const debugAnalytics = () => {
+	if (!initialized) return
+	posthog.debug()
+}
+
+export const optOutAnalytics = () => {
+	if (!initialized) return
+	posthog.opt_out_capturing()
+}
+
+export const optInAnalytics = () => {
+	initAnalytics()
+	posthog.opt_in_capturing()
+}
+
+type OptionalArgs<T> = Record<string, never> extends T ? [properties?: T] : [properties: T]
+
+export const trackEvent = <E extends AnalyticsEvent>(
+	eventName: E,
+	...args: OptionalArgs<AnalyticsEventMap[E]>
+) => {
+	if (!initialized) return
+	posthog.capture(eventName, args[0])
+}

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

@@ -13,6 +13,14 @@ import { invoke } from '@tauri-apps/api/core'
 //   await authenticate_await_completion()
 // }
 
+/**
+ * Check if the authentication servers are reachable, throwing an exception if
+ * not reachable.
+ */
+export async function check_reachable() {
+	await invoke('plugin:auth|check_reachable')
+}
+
 /**
  * Authenticate a user with Hydra - part 1.
  * This begins the authentication flow quasi-synchronously.

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

@@ -1,17 +0,0 @@
-import { invoke } from '@tauri-apps/api/core'
-
-export async function friends() {
-	return await invoke('plugin:friends|friends')
-}
-
-export async function friend_statuses() {
-	return await invoke('plugin:friends|friend_statuses')
-}
-
-export async function add_friend(userId) {
-	return await invoke('plugin:friends|add_friend', { userId })
-}
-
-export async function remove_friend(userId) {
-	return await invoke('plugin:friends|remove_friend', { userId })
-}

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

@@ -0,0 +1,79 @@
+import type { User } from '@modrinth/utils'
+import { invoke } from '@tauri-apps/api/core'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+
+import { get_user_many } from '@/helpers/cache'
+import type { ModrinthCredentials } from '@/helpers/mr_auth'
+
+export type UserStatus = {
+	user_id: string
+	profile_name: string | null
+	last_update: string
+}
+
+export type UserFriend = {
+	id: string
+	friend_id: string
+	accepted: boolean
+	created: string
+}
+
+export async function friends(): Promise<UserFriend[]> {
+	return await invoke('plugin:friends|friends')
+}
+
+export async function friend_statuses(): Promise<UserStatus[]> {
+	return await invoke('plugin:friends|friend_statuses')
+}
+
+export async function add_friend(userId: string): Promise<void> {
+	return await invoke('plugin:friends|add_friend', { userId })
+}
+
+export async function remove_friend(userId: string): Promise<void> {
+	return await invoke('plugin:friends|remove_friend', { userId })
+}
+
+export type FriendWithUserData = {
+	id: string
+	friend_id: string | null
+	status: string | null
+	last_updated: Dayjs | null
+	created: Dayjs
+	username: string
+	accepted: boolean
+	online: boolean
+	avatar: string
+}
+export async function transformFriends(
+	friends: UserFriend[],
+	credentials: ModrinthCredentials | null,
+): Promise<FriendWithUserData[]> {
+	if (friends.length === 0 || !credentials) {
+		return []
+	}
+
+	const friendStatuses = await friend_statuses()
+	const users = await get_user_many(
+		friends.map((x) => (x.id === credentials.user_id ? x.friend_id : x.id)),
+	)
+
+	return friends.map((friend) => {
+		const user = users.find((x: User) => x.id === friend.id || x.id === friend.friend_id)
+		const status = friendStatuses.find(
+			(x) => x.user_id === friend.id || x.user_id === friend.friend_id,
+		)
+		return {
+			id: friend.id,
+			friend_id: friend.friend_id,
+			status: status?.profile_name ?? null,
+			last_updated: status && status.last_update ? dayjs(status.last_update) : null,
+			created: dayjs(friend.created),
+			avatar: user?.avatar_url ?? '',
+			username: user?.username ?? '',
+			online: !!status,
+			accepted: friend.accepted,
+		}
+	})
+}

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

@@ -5,18 +5,25 @@
  */
 import { invoke } from '@tauri-apps/api/core'
 
-export async function login() {
+export type ModrinthCredentials = {
+	session: string
+	expires: string
+	user_id: string
+	active: boolean
+}
+
+export async function login(): Promise<ModrinthCredentials> {
 	return await invoke('plugin:mr-auth|modrinth_login')
 }
 
-export async function logout() {
+export async function logout(): Promise<void> {
 	return await invoke('plugin:mr-auth|logout')
 }
 
-export async function get() {
+export async function get(): Promise<ModrinthCredentials | null> {
 	return await invoke('plugin:mr-auth|get')
 }
 
-export async function cancelLogin() {
+export async function cancelLogin(): Promise<void> {
 	return await invoke('plugin:mr-auth|cancel_modrinth_login')
 }

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

@@ -18,7 +18,7 @@ import { install_to_existing_profile } from '@/helpers/pack.js'
     - icon is a path to an image file, which will be copied into the profile directory
 */
 
-export async function create(name, gameVersion, modloader, loaderVersion, iconPath, skipInstall) {
+export async function create(name, gameVersion, modloader, loaderVersion, icon, skipInstall) {
 	//Trim string name to avoid "Unable to find directory"
 	name = name.trim()
 	return await invoke('plugin:profile-create|profile_create', {
@@ -26,7 +26,7 @@ export async function create(name, gameVersion, modloader, loaderVersion, iconPa
 		gameVersion,
 		modloader,
 		loaderVersion,
-		iconPath,
+		icon,
 		skipInstall,
 	})
 }

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

@@ -36,6 +36,7 @@ export type AppSettings = {
 	max_concurrent_writes: number
 
 	theme: ColorTheme
+	locale: string
 	default_page: 'home' | 'library'
 	collapsed_navigation: boolean
 	hide_nametag_skins_page: boolean
@@ -67,6 +68,8 @@ export type AppSettings = {
 	skipped_update: string | null
 	pending_update_toast_for_version: string | null
 	auto_download_updates: boolean | null
+
+	version: number
 }
 
 // Get full settings object

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

@@ -22,6 +22,11 @@ export interface Skin {
 	is_equipped: boolean
 }
 
+export interface SkinTextureUrl {
+	original: string
+	normalized: string
+}
+
 export const DEFAULT_MODEL_SORTING = ['Steve', 'Alex'] as string[]
 
 export const DEFAULT_MODELS: Record<string, SkinModel> = {

apps/app-frontend/src/i18n.config.ts

@@ -0,0 +1,18 @@
+import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+import { createI18n } from 'vue-i18n'
+
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
+	eager: true,
+})
+
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en-US',
+	fallbackLocale: 'en-US',
+	messageCompiler: createMessageCompiler(),
+	missingWarn: false,
+	fallbackWarn: false,
+	messages: buildLocaleMessages(localeModules),
+})
+
+export default i18n

apps/app-frontend/src/locales/af-ZA/index.json

@@ -1,158 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Ontwikkelaarmodus geaktiveer."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Voorkoms"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Verstek instansie opsies"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "Kenmerk vlae"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Java installasies"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Privaatheid"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Hulpbronbestuur"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "voeg by en speel"
-  },
-  "instance.add-server.add-server": {
-    "message": "bediener byvoeg"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Gestrem"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "aangeskakel"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "spoed"
-  },
-  "instance.add-server.title": {
-    "message": "voeg 'n bediener by"
-  },
-  "instance.edit-server.title": {
-    "message": "wysig bediener"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "versteek van die tuisblad"
-  },
-  "instance.edit-world.name": {
-    "message": "Naam"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Minecraft Wêreld"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "herstel ikoon"
-  },
-  "instance.edit-world.title": {
-    "message": "wêreld wysig"
-  },
-  "instance.filter.disabled": {
-    "message": "gestremde projekte"
-  },
-  "instance.filter.updates-available": {
-    "message": "opdaterings beskikbaar"
-  },
-  "instance.server-modal.address": {
-    "message": "adres"
-  },
-  "instance.server-modal.name": {
-    "message": "Naam"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Minecraft-bediener"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Hulpbronpakket"
-  },
-  "instance.settings.tabs.general": {
-    "message": "Algemeen"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "verwyder instansie"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "verwyder instansie"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "Vee 'n instansie permanent van jou toestel uit, insluitend jou wêrelde, konfigurasies en alle geïnstalleerde inhoud. Wees versigtig, want sodra jy 'n instansie verwyder het, is daar geen manier om dit te herstel nie."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "Vee tans uit …"
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "duplikaat"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "Kan nie dupliseer tydens installasie nie."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplikaat instansie"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Skep 'n kopie van hierdie instansie, insluitend wêrelde, konfigurasies, mods, ens."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "wysig ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "verwyder ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "vervang ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "kies ikoon"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "biblioteekgroepe"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "skep nuwe groep"
-  },
-  "instance.settings.tabs.general.library-groups.description": {
-    "message": "Biblioteekgroepe laat jou toe om jou instansies in verskillende afdelings in jou biblioteek te organiseer."
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Voer groepnaam in"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "Naam"
-  },
-  "instance.settings.tabs.hooks": {
-    "message": "Lanseerhake"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Pasgemaakte lanseerhake"
-  },
-  "instance.settings.tabs.hooks.description": {
-    "message": "Hooks laat gevorderde gebruikers toe om sekere stelselopdragte uit te voer voor en na die bekendstelling van die spel."
-  },
-  "instance.settings.tabs.hooks.post-exit": {
-    "message": "Na-uitgang"
-  },
-  "instance.settings.tabs.hooks.post-exit.description": {
-    "message": "Het gehardloop nadat die wedstryd geëindig het"
-  },
-  "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Voer die na-uitgang-opdrag in..."
-  },
-  "instance.settings.tabs.hooks.pre-launch": {
-    "message": "Voorbekendstelling"
-  },
-  "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "Het gehardloop voordat die instansie geloods is."
-  },
-  "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "Voer pre-lanceringsopdrag in..."
-  }
-}

apps/app-frontend/src/locales/ar-EG/index.json

@@ -1,419 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "وضع المطوّر مُفعَّل."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "المظهر"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "خيارات النسخة الافتراضية"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "إعدادات المميزات"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "تثبيتات جافا"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "الخصوصية"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "إدارة الموارد"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "إضافة واللعب"
-  },
-  "instance.add-server.add-server": {
-    "message": "إضافة الخادم"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "معطَّل"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "مفعَّل"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "موجه الأوامر"
-  },
-  "instance.add-server.title": {
-    "message": "إضافة خادم"
-  },
-  "instance.edit-server.title": {
-    "message": "تعديل خادم"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "إخفاء من الصفحة الرئيسية"
-  },
-  "instance.edit-world.name": {
-    "message": "الاسم"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "عالم ماينكرافت"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "إعادة تعيين الأيقونة"
-  },
-  "instance.edit-world.title": {
-    "message": "تعديل العالم"
-  },
-  "instance.filter.disabled": {
-    "message": "المشاريع المعطَّلة"
-  },
-  "instance.filter.updates-available": {
-    "message": "توجد تحديثات متاحة"
-  },
-  "instance.server-modal.address": {
-    "message": "العنوان"
-  },
-  "instance.server-modal.name": {
-    "message": "الاسم"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "خادم ماين كرافت"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "حزمة الموارد"
-  },
-  "instance.settings.tabs.general": {
-    "message": "عام"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "حذف النسخة"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "حذف النسخة"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "يحذف النسخة نهائيًا من جهازك، بما في ذلك عوالمك، إعداداتك، وجميع المحتويات المثبّتة. كن حذرًا، فبمجرد حذف النسخة لن تكون هناك أي طريقة لاستعادتها."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "جاري الحذف..."
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "نسخ"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "لا يمكن النسخ أثناء التثبيت."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "نسخة النسخة"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "إنشاء."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "تعديل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "أزل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "استبدل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "اختر الأيقونة"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "مجموعات المكتبة"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "إنشاء مجموعة جديدة"
-  },
-  "instance.settings.tabs.general.library-groups.description": {
-    "message": "مجموعات المكتبة تساعدك على ترتيب حالاتك على أقسام مختلفة في مكتبتك."
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "إدخال اسم المجموعة"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "الاسم"
-  },
-  "instance.settings.tabs.hooks": {
-    "message": "إجراءات تشغيل إضافية"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "إجراءات تشغيل إضافية مخصصة"
-  },
-  "instance.settings.tabs.hooks.description": {
-    "message": "إجراءات التشغيل المضافة تسمح للمستخدمين المتقدمين بإنشاء أوامر نظامية محددة قبل و عند تشغيل اللعبة."
-  },
-  "instance.settings.tabs.hooks.post-exit": {
-    "message": "ما بعد الخروج"
-  },
-  "instance.settings.tabs.hooks.post-exit.description": {
-    "message": "يتم تشغيله بعد إغلاق اللعبة."
-  },
-  "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "أدخل أمر ما بعد الخروج..."
-  },
-  "instance.settings.tabs.hooks.pre-launch": {
-    "message": "ما قبل الإطلاق"
-  },
-  "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "يتم تشغيله قبل بَدْء تشغيل النسخة."
-  },
-  "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "أدخل أمر ما قبل الإطلاق..."
-  },
-  "instance.settings.tabs.hooks.title": {
-    "message": "خطافات تشغيل اللعبة"
-  },
-  "instance.settings.tabs.hooks.wrapper": {
-    "message": "مُغلِّف"
-  },
-  "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "أمر غلاف لتشغيل ماين كرافت."
-  },
-  "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "أدخل أمر الغلاف..."
-  },
-  "instance.settings.tabs.installation": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} لماين كرافت {game_version} مثبت بالفعل"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "فانيلا {game_version} مُثبّتة بالفعل"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "تغيير الإصدار"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "جاري التثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "جاري جلب إصدارات حزمة المودات"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "جاري تثبيت الإصدار الجديد"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "المثبت حاليًا"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "معلومات التصحيح:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "جاري جلب تفاصيل حزمة المودات"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "إصدار اللعبة"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "التثبيت قيد التنفيذ"
-  },
-  "instance.settings.tabs.installation.loader-version": {
-    "message": "إصدار {loader}"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "ماين كرافت {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "تعذّر جلب تفاصيل حزمة المودات المرتبطة. يرجى التحقق من اتصالك بالإنترنت."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} غير متاح لماين كرافت {version}. جرّب محمّل مودات آخر."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "هذه النسخة مرتبطة بحزمة مودات، لكن لم يتم العثور على الحزمة على مودرنث."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "منصّة"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "جاري إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "إعادة التثبيت ستُعيد جميع الملفات المثبتة أو المعدلة إلى ما توفره حُزْمة المودات، مع إزالة أي مودات أو محتوى أضفته بعد التثبيت الأصلي. قد يساعد ذلك في حل السلوك غير المتوقع إذا تم تعديل النسخة، لكن إذا كانت عوالمك تعتمد على محتويات إضافية، فقد يتسبب ذلك في تعطلها."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "هل أنت متأكد أنك تريد إعادة تثبيت هذه النسخة؟"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "يعيد محتوى النسخة إلى حالته الأصلية، مع إزالة جميع المودات أو المحتوى الذي أُضيف فوق حزمة المودات الأصلية."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "إصلاح"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "جاري الإصلاح"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "الإصلاح يعيد تثبيت مكوّنات ماين كرافت ويتحقق من التلف. قد يساعد ذلك في حل المشكلات إذا كانت لعبتك لا تعمل بسبب أخطاء متعلقة ببرنامج التشغيل، لكنه لن يحل المشكلات أو الأعطال الناتجة عن المودات المثبّتة."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "إصلاح النسخة؟"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "الإصلاح قيد التنفيذ"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "إعادة التعيين إلى الحالة الحالية"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "عرض جميع الإصدارات"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "تغيير الإصدار"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "إعادة التثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "إصلاح"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "لا يمكن {action} أثناء التثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "لا يمكن {action} أثناء عدم الاتصال بالإنترنت"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "لا يمكن {action} أثناء الإصلاح"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(إصدار غير معروف)"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "إلغاء ربط النسخة"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "إذا تابعت، فلن تتمكّن من إعادة ربطها إلا بإنشاء نسخة جديدة بالكامل. لن تتلقى بعد ذلك تحديثات حزمة المودات، وستصبح نسخة عادية."
-  },
-  "instance.settings.tabs.installation.unlink.confirm.title": {
-    "message": "هل أنت متأكد أنك تريد إلغاء ربط هذه النسخة؟"
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "هذه النسخة مرتبطة بحزمة مودات، مما يعني أنه لا يمكن تحديث المودات أو تغيير محمّل المودات أو إصدار ماين كرافت. سيؤدي إلغاء الربط إلى فصل هذه النسخة نهائيًا عن حزمة المودات."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "إلغاء الربط من حزمة المودات"
-  },
-  "instance.settings.tabs.java": {
-    "message": "جافا والذاكرة"
-  },
-  "instance.settings.tabs.java.environment-variables": {
-    "message": "المتغيرات البيئية"
-  },
-  "instance.settings.tabs.java.hooks": {
-    "message": "الخطافات"
-  },
-  "instance.settings.tabs.java.java-arguments": {
-    "message": "وسائط جافا"
-  },
-  "instance.settings.tabs.java.java-installation": {
-    "message": "تثبيت جافا"
-  },
-  "instance.settings.tabs.java.java-memory": {
-    "message": "الذاكرة المخصَّصة"
-  },
-  "instance.settings.tabs.window": {
-    "message": "النافذة"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "إعدادات نافذة مخصّصة"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "ملء الشاشة"
-  },
-  "instance.settings.tabs.window.fullscreen.description": {
-    "message": "جعل اللعبة تبدأ في وضع ملء الشاشة عند التشغيل (باستخدام ‎options.txt)."
-  },
-  "instance.settings.tabs.window.height": {
-    "message": "الارتفاع"
-  },
-  "instance.settings.tabs.window.height.description": {
-    "message": "ارتفاع نافذة اللعبة عند التشغيل."
-  },
-  "instance.settings.tabs.window.height.enter": {
-    "message": "أدخل الارتفاع..."
-  },
-  "instance.settings.tabs.window.width": {
-    "message": "العرض"
-  },
-  "instance.settings.tabs.window.width.description": {
-    "message": "عرض نافذة اللعبة عند التشغيل."
-  },
-  "instance.settings.tabs.window.width.enter": {
-    "message": "أدخل العرض..."
-  },
-  "instance.settings.title": {
-    "message": "الإعدادات"
-  },
-  "instance.worlds.a_minecraft_server": {
-    "message": "خادم ماين كرافت"
-  },
-  "instance.worlds.cant_connect": {
-    "message": "لا يمكن الاتصال بالخادم"
-  },
-  "instance.worlds.copy_address": {
-    "message": "نسخ العنوان"
-  },
-  "instance.worlds.dont_show_on_home": {
-    "message": "عدم العرض في الصفحة الرئيسية"
-  },
-  "instance.worlds.filter.available": {
-    "message": "متاح"
-  },
-  "instance.worlds.game_already_open": {
-    "message": "النسخة مفتوحة بالفعل"
-  },
-  "instance.worlds.hardcore": {
-    "message": "وضع الهاردكور"
-  },
-  "instance.worlds.incompatible_server": {
-    "message": "الخادم غير متوافق"
-  },
-  "instance.worlds.no_contact": {
-    "message": "تعذّر الاتصال بالخادم"
-  },
-  "instance.worlds.no_server_quick_play": {
-    "message": "يمكنك الدخول مباشرة إلى الخوادم فقط على ماين كرافت Alpha 1.0.5+"
-  },
-  "instance.worlds.no_singleplayer_quick_play": {
-    "message": "يمكنك الدخول مباشرة إلى عوالم اللعب الفردي فقط على ماين كرافت ‎1.20+‎"
-  },
-  "instance.worlds.play_instance": {
-    "message": "تشغيل النسخة"
-  },
-  "instance.worlds.type.server": {
-    "message": "الخادم"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "لعب فردي"
-  },
-  "instance.worlds.view_instance": {
-    "message": "عرض النسخة"
-  },
-  "instance.worlds.world_in_use": {
-    "message": "العالم قيد الاستخدام"
-  },
-  "search.filter.locked.instance": {
-    "message": "مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance-game-version.title": {
-    "message": "إصدار اللعبة مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance-loader.title": {
-    "message": "المحمّل مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance.sync": {
-    "message": "مزامنة مع النسخة"
-  }
-}

apps/app-frontend/src/locales/ar-SA/index.json

@@ -1,6 +1,39 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "قد تكون خوادم مصادقة ماينكرافت معطلة حاليًا. تحقق من اتصالك بالإنترنت وحاول مرة أخرى لاحقًا."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "تعذر الوصول إلى خوادم المصادقة"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "نزل للعب"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "تثبيت"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": ""
+  },
+  "app.modal.update-to-play.diff-type.added": {
+    "message": "تم إضافة"
+  },
+  "app.modal.update-to-play.diff-type.removed": {
+    "message": "تم إزالة"
+  },
+  "app.modal.update-to-play.diff-type.updated": {
+    "message": "تم تحديث"
+  },
+  "app.modal.update-to-play.header": {
+    "message": "حدث للعب"
+  },
+  "app.modal.update-to-play.update-required": {
+    "message": "يلزم التحديث"
+  },
   "app.settings.developer-mode-enabled": {
-    "message": "وضع المطوّر مُفعَّل."
+    "message": "تم تفعيل وضع المطوّر."
+  },
+  "app.settings.downloading": {
+    "message": "جار تنزيل الإصدار {version}"
   },
   "app.settings.tabs.appearance": {
     "message": "المظهر"
@@ -9,22 +42,130 @@
     "message": "خيارات النسخة الافتراضية"
   },
   "app.settings.tabs.feature-flags": {
-    "message": "إعدادات المميزات"
+    "message": "أعلام الميزات"
   },
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },
+  "app.settings.tabs.language": {
+    "message": "اللغة"
+  },
   "app.settings.tabs.privacy": {
     "message": "الخصوصية"
   },
   "app.settings.tabs.resource-management": {
     "message": "إدارة الموارد"
   },
+  "app.update-toast.body": {
+    "message": "تطبيق Modrinth الإصدار {version} جاهز للتثبيت!\nأعد التحميل لتحديث التطبيق الآن، أو سيتم التحديث تلقائيًا عند إغلاق تطبيق Modrinth."
+  },
+  "app.update-toast.body.download-complete": {
+    "message": "تطبيق Modrinth الإصدار {version} جاهز للتثبيت!\nأعد التحميل لتحديث التطبيق الآن، أو سيتم التحديث تلقائيًا عند إغلاق تطبيق Modrinth."
+  },
+  "app.update-toast.body.metered": {
+    "message": "تطبيق Modrinth الإصدار {version} متاح الآن!\nنظرًا لأنك تستخدم شبكة محدودة البيانات، لم نقم بتنزيل التحديث تلقائيًا.\n"
+  },
+  "app.update-toast.changelog": {
+    "message": "سجلّ التغييرات"
+  },
+  "app.update-toast.download": {
+    "message": "تنزيل ({size})"
+  },
+  "app.update-toast.downloading": {
+    "message": "جار التنزيل..."
+  },
+  "app.update-toast.reload": {
+    "message": "إعادة تحميل"
+  },
+  "app.update-toast.title": {
+    "message": "تحديث متاح"
+  },
+  "app.update-toast.title.download-complete": {
+    "message": "اكتمل التنزيل"
+  },
+  "app.update.complete-toast.text": {
+    "message": "انقر هنا لعرض سجلّ التغييرات."
+  },
+  "app.update.complete-toast.title": {
+    "message": "تم تثبيت الإصدار {version} بنجاح!"
+  },
+  "app.update.download-update": {
+    "message": "تنزيل التحديث"
+  },
+  "app.update.downloading-update": {
+    "message": "جار تنزيل التحديث ({percent}٪)"
+  },
+  "app.update.reload-to-update": {
+    "message": "أعد التحميل لتثبيت التحديث"
+  },
+  "friends.action.add-friend": {
+    "message": "إضافة صديق"
+  },
+  "friends.action.view-friend-requests": {
+    "message": "{count} {count, plural, one {طلب صداقة} other {طلبات صداقة}}"
+  },
+  "friends.add-friend.submit": {
+    "message": "إرسال طلب صداقة"
+  },
+  "friends.add-friend.title": {
+    "message": "جار إضافة صديق"
+  },
+  "friends.add-friend.username.description": {
+    "message": "قد يختلف عن اسم المستخدم الخاص بهم في ماينكرافت!"
+  },
+  "friends.add-friend.username.placeholder": {
+    "message": "أدخل اسم مستخدم Modrinth..."
+  },
+  "friends.add-friend.username.title": {
+    "message": "ما اسم مستخدم صديقك في Modrinth؟"
+  },
+  "friends.add-friends-to-share": {
+    "message": "<link>أضف أصدقاء</link> لمعرفة ما الذي يلعبونه!"
+  },
+  "friends.friend.cancel-request": {
+    "message": "إلغاء الطلب"
+  },
+  "friends.friend.remove-friend": {
+    "message": "إزالة صديق"
+  },
+  "friends.friend.request-sent": {
+    "message": "إرسال طلب الصداقة"
+  },
+  "friends.friend.view-profile": {
+    "message": "عرض الملف الشخصي"
+  },
+  "friends.heading": {
+    "message": "أصدقاء"
+  },
+  "friends.heading.active": {
+    "message": "نشط"
+  },
+  "friends.heading.offline": {
+    "message": "غير متصل"
+  },
+  "friends.heading.online": {
+    "message": "متصل"
+  },
+  "friends.heading.pending": {
+    "message": "قيد الانتظار"
+  },
+  "friends.no-friends-match": {
+    "message": "لا يوجد أصدقاء يطابقون ‎''{query}''‎"
+  },
+  "friends.search-friends-placeholder": {
+    "message": "ابحث عن الأصدقاء..."
+  },
+  "friends.section.heading": {
+    "message": "{title} - {count}"
+  },
+  "friends.sign-in-to-add-friends": {
+    "message": "<link>سجّل الدخول إلى حساب Modrinth</link> لإضافة الأصدقاء ومعرفة ما الذي يلعبونه!"
+  },
   "instance.add-server.add-and-play": {
     "message": "إضافة واللعب"
   },
   "instance.add-server.add-server": {
-    "message": "إضافة الخادم"
+    "message": "إضافة خادم"
   },
   "instance.add-server.resource-pack.disabled": {
     "message": "معطَّل"
@@ -69,7 +210,7 @@
     "message": "الاسم"
   },
   "instance.server-modal.placeholder-name": {
-    "message": "خادم ماين كرافت"
+    "message": "خادم ماينكرافت"
   },
   "instance.server-modal.resource-pack": {
     "message": "حزمة الموارد"
@@ -162,7 +303,7 @@
     "message": "مُغلِّف"
   },
   "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "أمر غلاف لتشغيل ماين كرافت."
+    "message": "أمر غلاف لتشغيل ماينكرافت."
   },
   "instance.settings.tabs.hooks.wrapper.enter": {
     "message": "أدخل أمر الغلاف..."
@@ -171,7 +312,7 @@
     "message": "تثبيت"
   },
   "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} لماين كرافت {game_version} مثبت بالفعل"
+    "message": "{platform} {version} لماينكرافت {game_version} مثبت بالفعل"
   },
   "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
     "message": "فانيلا {game_version} مُثبّتة بالفعل"
@@ -353,9 +494,6 @@
   "instance.settings.tabs.window.width.enter": {
     "message": "أدخل العرض..."
   },
-  "instance.settings.title": {
-    "message": "الإعدادات"
-  },
   "instance.worlds.a_minecraft_server": {
     "message": "خادم ماين كرافت"
   },

apps/app-frontend/src/locales/az-AZ/index.json

@@ -1,5 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": ""
-  }
-}

apps/app-frontend/src/locales/be-BY/index.json

@@ -1 +0,0 @@
-{}

apps/app-frontend/src/locales/bg-BG/index.json

@@ -1,131 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Режим за разработчици активиран."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Външен вид"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Опции по подразбиране"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Java инсталации"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Поверителност"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Контрол на ресурси"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Добави и играй"
-  },
-  "instance.add-server.add-server": {
-    "message": "Добави сървър"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Деактивирано"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Активирано"
-  },
-  "instance.add-server.title": {
-    "message": "Добавяне на сървър"
-  },
-  "instance.edit-server.title": {
-    "message": "Редактиране на сървър"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Намиране на версиите на modpack-овете"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Инсталиране на нова версия"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "В момента инсталирано"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Намиране на детайли на modpack"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Версия на играта"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Инсталиране"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Инсталира се в момента"
-  },
-  "instance.settings.tabs.installation.loader-version": {
-    "message": "{loader} версия"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "Не може да се намери този modpack. Моля проверете интернет връзката си."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} не е наличен за Minecraft версия {version}. Моля пробвайте друг mod loader."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Платформа"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Преинсталирай"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Преинсталиране"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "Сигурни ли сте, че искате да преинсталирате това?"
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Повторно инсталиране на modpack"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Поправи"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Поправяне"
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Поправи?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Поправка..."
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "Нулирай до в моменташен"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "Покажи всички версии"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "променяте версията"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "инсталирате"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "преинсталирате"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "поправяте"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "Не можете да {action} докато се инсталира."
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "Не можете да {action} докато нямате достъп до Интернет"
-  },
-  "instance.settings.tabs.window": {
-    "message": "Прозорец"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Различни настройки на прозорец"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "Пълен екран"
-  }
-}

apps/app-frontend/src/locales/bn-BD/index.json

@@ -1 +0,0 @@
-{}

apps/app-frontend/src/locales/ca-ES/index.json

@@ -1,179 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Mode de desenvolupament activat."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Aparença"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Opcions d'instància per defecte"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Instal·lacions de Java"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Privacitat"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Afegir i jugar"
-  },
-  "instance.add-server.add-server": {
-    "message": "Afegir servidor"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Desactivat"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Activat"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "Preguntar"
-  },
-  "instance.add-server.title": {
-    "message": "Afegir un servidor"
-  },
-  "instance.edit-server.title": {
-    "message": "Editar servidor"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "Amagar de l'inici"
-  },
-  "instance.edit-world.name": {
-    "message": "Nom"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Món de Minecraft"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "Reinicia l'icona"
-  },
-  "instance.edit-world.title": {
-    "message": "Edita el món"
-  },
-  "instance.filter.disabled": {
-    "message": "Projectes desactivats"
-  },
-  "instance.filter.updates-available": {
-    "message": "Actualitzacions disponibles"
-  },
-  "instance.server-modal.address": {
-    "message": "Adreça web"
-  },
-  "instance.server-modal.name": {
-    "message": "Nom"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Servidor de Minecraft"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Paquet de recursos"
-  },
-  "instance.settings.tabs.general": {
-    "message": "General"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "Suprimeix la instància"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "Suprimir instància"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "Suprimeix permanentment una instància del dispositiu, inclosos els vostres mons, configuracions i tot el contingut instal·lat. Aneu amb compte, ja que un cop suprimiu una instància no hi ha manera de recuperar-la."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "S'està suprimint..."
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "Duplicar"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "No es pot duplicar durant la instal·lació."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplica la instància"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Crea una còpia d'aquesta instància, incloent-hi mons, configuracions, mods, etc."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "Edita la icona"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Treu icona"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Substitueix icona"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Selecciona icona"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "Grup de llibreries"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "Crear nou grup"
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Introdueix nom del grup"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "Nom"
-  },
-  "instance.settings.tabs.installation": {
-    "message": "Instal·lació"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Canviar versió"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Instal·lar"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Instal·lant"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Versió del joc"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Plataforma"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Reparar"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "canviar versió"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "reparar"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(versió desconeguda)"
-  },
-  "instance.settings.tabs.java": {
-    "message": "Java i memòria"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "Pantalla completa"
-  },
-  "instance.settings.tabs.window.height": {
-    "message": "Altura"
-  },
-  "instance.settings.tabs.window.width": {
-    "message": "Amplada"
-  },
-  "instance.settings.title": {
-    "message": "Configuració"
-  },
-  "instance.worlds.filter.available": {
-    "message": "Disponible"
-  },
-  "instance.worlds.play_instance": {
-    "message": "Jugar instància"
-  },
-  "instance.worlds.type.server": {
-    "message": "Servidor"
-  }
-}

apps/app-frontend/src/locales/ceb-PH/index.json

@@ -1,83 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Gipaandar ang paagi sa tigpalambo."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Panagway"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Mga kapilian sa sukaranan nga pananglitan"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "Bandera sa mga bahin"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Mga pagtaod sa Java"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Pribasiya"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Pagdumala sa kabtangan"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Idugang ug dulaa"
-  },
-  "instance.add-server.add-server": {
-    "message": "Idugang ang tigtagad"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Dili motugot"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Gitugotan"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "Magpatugot"
-  },
-  "instance.add-server.title": {
-    "message": "Pagdugang og tigtagad"
-  },
-  "instance.edit-server.title": {
-    "message": "Usba ang tigtagad"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "Ayaw ipakita sa panid sa Balay"
-  },
-  "instance.edit-world.name": {
-    "message": "Ngalan"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Minecraft nga Kalibutan"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "Walaa ang amoy"
-  },
-  "instance.edit-world.title": {
-    "message": "Usba ang kalibutan"
-  },
-  "instance.filter.updates-available": {
-    "message": "Naay bag-ong mga kausaban"
-  },
-  "instance.server-modal.name": {
-    "message": "Ngalan"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Minecraft nga Tigtagad"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Putos sa kabtangan"
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "Usba ang amoy"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Tangtangi ang amoy"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Mga gusto sa pinatuyo nga tamboanan"
-  },
-  "instance.settings.title": {
-    "message": "Mga Gusto"
-  }
-}

apps/app-frontend/src/locales/cs-CZ/index.json

@@ -1,7 +1,67 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "Autořizační servery Minecraftu aktuálně nejsou k dispozici. Zkontrolujte si své připojení k internetu a zkuste to znovu později."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "Připojení k autorizačním serverům se nezdařilo"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "Nainstaluj ke hraní"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "Instalovat"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": "{count, plural,one  {#mód} other  {#módy}}"
+  },
+  "app.modal.install-to-play.server-requires-mods": {
+    "message": "Tento server k hraní vyžaduje módy. Klikni na instalovat pro získání potřebných módů z Modrinth."
+  },
+  "app.modal.install-to-play.shared-by-today": {
+    "message": "{name} dnes s vámi sdílel tuto instanci."
+  },
+  "app.modal.install-to-play.shared-instance": {
+    "message": "Sdílená instance"
+  },
+  "app.modal.install-to-play.shared-server-instance": {
+    "message": "Sdílená serverová instance"
+  },
+  "app.modal.update-to-play.added-count": {
+    "message": "{count} přidáno"
+  },
+  "app.modal.update-to-play.diff-type.added": {
+    "message": "Přidáno"
+  },
+  "app.modal.update-to-play.diff-type.removed": {
+    "message": "Odebráno"
+  },
+  "app.modal.update-to-play.diff-type.updated": {
+    "message": "Aktualizováno"
+  },
+  "app.modal.update-to-play.header": {
+    "message": "Updatuj ke hraní"
+  },
+  "app.modal.update-to-play.published-date": {
+    "message": "{date, date, long}"
+  },
+  "app.modal.update-to-play.removed-count": {
+    "message": "{count} odstraněno"
+  },
+  "app.modal.update-to-play.update-required": {
+    "message": "Je vyžadována aktualizace"
+  },
+  "app.modal.update-to-play.update-required-description": {
+    "message": "Je nutná aktualizace ke hraní {name}. Prosím updatuj na nejnovější verzi k spuštění hry."
+  },
+  "app.modal.update-to-play.updated-count": {
+    "message": "{count} aktualizováno"
+  },
   "app.settings.developer-mode-enabled": {
     "message": "Vývojářský režim povolen."
   },
+  "app.settings.downloading": {
+    "message": "Stahování v{version}"
+  },
   "app.settings.tabs.appearance": {
     "message": "Vzhled"
   },
@@ -14,12 +74,126 @@
   "app.settings.tabs.java-installations": {
     "message": "Instalace Javy"
   },
+  "app.settings.tabs.language": {
+    "message": "Jazyk"
+  },
   "app.settings.tabs.privacy": {
     "message": "Soukromí"
   },
   "app.settings.tabs.resource-management": {
     "message": "Správa zdrojů"
   },
+  "app.update-toast.body": {
+    "message": "Aplikace Modrinth v{version} je připravena k instalaci! Nainstalujte aktualizaci nyní nebo automaticky po zavření aplikace Modrinth."
+  },
+  "app.update-toast.body.download-complete": {
+    "message": "Stahování aplikace Modrinth v{version} bylo dokončeno. Nainstalujte aktualizaci nyní nebo automaticky po zavření aplikace Modrinth."
+  },
+  "app.update-toast.body.linux": {
+    "message": "Modrinth App v{version} je k dispozici. Aktualizujte pomocí svého správce balíčků, abyste získali nejnovější funkce a opravy!"
+  },
+  "app.update-toast.body.metered": {
+    "message": "Aplikace Modrinth v{version} je nyní k dispozici! Protože jste v měřené síti, nebyla stažena automaticky."
+  },
+  "app.update-toast.changelog": {
+    "message": "Seznam změn"
+  },
+  "app.update-toast.download": {
+    "message": "Stahování ({size})"
+  },
+  "app.update-toast.download-page": {
+    "message": "Stáhnout"
+  },
+  "app.update-toast.downloading": {
+    "message": "Stahování..."
+  },
+  "app.update-toast.reload": {
+    "message": "Načíst znovu"
+  },
+  "app.update-toast.title": {
+    "message": "Aktualizace je k dispozici"
+  },
+  "app.update-toast.title.download-complete": {
+    "message": "Stahování bylo dokončeno"
+  },
+  "app.update.complete-toast.text": {
+    "message": "Kliknutím sem zobrazíte seznam změn."
+  },
+  "app.update.complete-toast.title": {
+    "message": "Verze {version} byla úspěšně nainstalována!"
+  },
+  "app.update.download-update": {
+    "message": "Stáhnout aktualizaci"
+  },
+  "app.update.downloading-update": {
+    "message": "Stahování aktualizace ({percent}%)"
+  },
+  "app.update.reload-to-update": {
+    "message": "Restartovat aplikaci pro nainstalování aktualizace"
+  },
+  "friends.action.add-friend": {
+    "message": "Přidat přítele"
+  },
+  "friends.action.view-friend-requests": {
+    "message": "{count} {count, plural, one {žádost} few {žádosti} other {žádostí}} o přátelství"
+  },
+  "friends.add-friend.submit": {
+    "message": "Poslat žádost o přátelství"
+  },
+  "friends.add-friend.title": {
+    "message": "Přidávání kamaráda"
+  },
+  "friends.add-friend.username.description": {
+    "message": "Může být jiné než jejich Minecraft jméno!"
+  },
+  "friends.add-friend.username.placeholder": {
+    "message": "Zadejte uživatelské jméno Modrinth..."
+  },
+  "friends.add-friend.username.title": {
+    "message": "Jak se váš kamarád jmenuje na Modrinthu?"
+  },
+  "friends.add-friends-to-share": {
+    "message": "<link>Přidejte si přátelé</link> a podívejte se, co hrají!"
+  },
+  "friends.friend.cancel-request": {
+    "message": "Zrušit žádost"
+  },
+  "friends.friend.remove-friend": {
+    "message": "Odebrat přítele"
+  },
+  "friends.friend.request-sent": {
+    "message": "Žádost o přátelství odeslána"
+  },
+  "friends.friend.view-profile": {
+    "message": "Zobrazit profil"
+  },
+  "friends.heading": {
+    "message": "Kamarádi"
+  },
+  "friends.heading.active": {
+    "message": "Aktivní"
+  },
+  "friends.heading.offline": {
+    "message": "Offline"
+  },
+  "friends.heading.online": {
+    "message": "Online"
+  },
+  "friends.heading.pending": {
+    "message": "Čeká na vyřízení"
+  },
+  "friends.no-friends-match": {
+    "message": "Žádní přátelé neodpovídají '{query}''"
+  },
+  "friends.search-friends-placeholder": {
+    "message": "Hledat přátele..."
+  },
+  "friends.section.heading": {
+    "message": "{title} - {count}"
+  },
+  "friends.sign-in-to-add-friends": {
+    "message": "<link>Přihlašte se ke svému Modrinth účtu</link>, abyste jsi přidali přátele a uviděli co hrají!"
+  },
   "instance.add-server.add-and-play": {
     "message": "Přidat a hrát"
   },
@@ -33,7 +207,7 @@
     "message": "Zapnuto"
   },
   "instance.add-server.resource-pack.prompt": {
-    "message": "Na dotaz"
+    "message": "Ptát se"
   },
   "instance.add-server.title": {
     "message": "Přidat server"
@@ -42,7 +216,7 @@
     "message": "Upravit server"
   },
   "instance.edit-world.hide-from-home": {
-    "message": "Schovat z domovské stránky"
+    "message": "Skrýt z domovské obrazovky"
   },
   "instance.edit-world.name": {
     "message": "Název"
@@ -51,16 +225,16 @@
     "message": "Minecraft svět"
   },
   "instance.edit-world.reset-icon": {
-    "message": "Reset ikony"
+    "message": "Resetovat ikonu"
   },
   "instance.edit-world.title": {
     "message": "Upravit svět"
   },
   "instance.filter.disabled": {
-    "message": "Vypnout projekty"
+    "message": "Vypnuté projekty"
   },
   "instance.filter.updates-available": {
-    "message": "Aktualizace jsou dostupné"
+    "message": "K dispozice jsou aktualizace"
   },
   "instance.server-modal.address": {
     "message": "Adresa"
@@ -72,19 +246,19 @@
     "message": "Minecraft Server"
   },
   "instance.server-modal.resource-pack": {
-    "message": "Balíček textur"
+    "message": "Balíčky textur"
   },
   "instance.settings.tabs.general": {
     "message": "Obecné"
   },
   "instance.settings.tabs.general.delete": {
-    "message": "Smazat instanci"
+    "message": "Odstranit instalaci"
   },
   "instance.settings.tabs.general.delete.button": {
-    "message": "Smazat instanci"
+    "message": "Odstranit instalaci"
   },
   "instance.settings.tabs.general.delete.description": {
-    "message": "Trvale smaže instanci z vašeho zařízení, včetně vašich světů, konfigurací a veškerého nainstalovaného obsahu. Buďte opatrní, protože jakmile instanci smažete, není možné ji obnovit."
+    "message": "Trvale smaže instalaci z vašeho zařízení, včetně vašich světů, konfigurací a veškerého nainstalovaného obsahu. Buďte opatrní, protože jakmile instalaci smažete, nebude možné ji obnovit."
   },
   "instance.settings.tabs.general.deleting.button": {
     "message": "Mazání..."
@@ -96,34 +270,34 @@
     "message": "Nelze duplikovat při instalaci."
   },
   "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplikovat instanci"
+    "message": "Duplikovat instalaci"
   },
   "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Vytvoří kopii instance, včetně světů, nastavení, modů, atd..."
+    "message": "Vytvoří kopii této instalace, včetně světů, konfigurací, modů atd."
   },
   "instance.settings.tabs.general.edit-icon": {
-    "message": "Ikona úpravy"
+    "message": "Upravit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Icona odstranit"
+    "message": "Odstranit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Ikona replikace"
+    "message": "Změnit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Výber ikona"
+    "message": "Vybrat ikonu"
   },
   "instance.settings.tabs.general.library-groups": {
     "message": "Skupina knihoven"
   },
   "instance.settings.tabs.general.library-groups.create": {
-    "message": "Vytvoří novou skupinu"
+    "message": "Vytvořit novou skupinu"
   },
   "instance.settings.tabs.general.library-groups.description": {
-    "message": "Skupiny knihoven vám umožňují uspořádat instance do různých sekcí v knihovně."
+    "message": "Skupiny knihoven vám umožňují uspořádat instalace do různých sekcí."
   },
   "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Zadej název skupiny"
+    "message": "Zadejte název skupiny"
   },
   "instance.settings.tabs.general.name": {
     "message": "Název"
@@ -150,7 +324,7 @@
     "message": "Před spuštěním"
   },
   "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "Spouštějí se před spuštěním instance."
+    "message": "Spouštějí se před spuštěním instalace."
   },
   "instance.settings.tabs.hooks.pre-launch.enter": {
     "message": "Zadejte příkaz k provedení před spuštěním..."
@@ -171,28 +345,28 @@
     "message": "Instalace"
   },
   "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} pro Minecraft {game_version} již nainstalována"
+    "message": "{platform} {version} pro Minecraft {game_version} již je nainstalována"
   },
   "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Vanilla {game_version} již nainstalována"
+    "message": "Vanilla {game_version} již je nainstalována"
   },
   "instance.settings.tabs.installation.change-version.button": {
-    "message": "Změnit instalaci"
+    "message": "Změnit verzi"
   },
   "instance.settings.tabs.installation.change-version.button.install": {
     "message": "Instalovat"
   },
   "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Instalace"
+    "message": "Instalování"
   },
   "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
     "message": "Načítání verzí modpacku"
   },
   "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Instalace nových verzí"
+    "message": "Instalace nové verze"
   },
   "instance.settings.tabs.installation.currently-installed": {
-    "message": "Aktuální instalace"
+    "message": "Aktuálně nainstalováno"
   },
   "instance.settings.tabs.installation.debug-information": {
     "message": "Debugové informace:"
@@ -207,7 +381,7 @@
     "message": "Instalovat"
   },
   "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Probíhající instalace"
+    "message": "Probíhá instalace"
   },
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} verze"
@@ -216,13 +390,13 @@
     "message": "Minecraft {version}"
   },
   "instance.settings.tabs.installation.no-connection": {
-    "message": "Nelze načíst podrobnosti o modpacku. Zkontrolujte připojení k internetu."
+    "message": "Nelze načíst podrobnosti o modpacku. Prosím, zkontrolujte své připojení k internetu."
   },
   "instance.settings.tabs.installation.no-loader-versions": {
     "message": "{loader} není dostupný pro Minecraft {version}. Zkuste jiný mod loader."
   },
   "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "Tato instalace je připojená k modpacku, ale modpack nebyl najit na Modrinthu."
+    "message": "Tato instalace je připojená k modpacku, který ake nebyl najit na Modrinthu."
   },
   "instance.settings.tabs.installation.platform": {
     "message": "Platforma"
@@ -234,7 +408,7 @@
     "message": "Přeinstalovávání modpacku"
   },
   "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Přeinstalace resetuje veškerý nainstalovaný nebo upravený obsah na to, co poskytuje modpack, a odstraní všechny mody nebo obsah, které jste přidali do původní instalaci. To může opravit neočekávané chyby, ale pokud vaše světy závisejí na nově instalovaném obsahu, možná budou poškozeny."
+    "message": "Přeinstalace resetuje veškerý nainstalovaný nebo upravený obsah kromě toho, co poskytuje modpack, a odstraní všechny módy nebo obsah, které jste přidali do původní instalace. To může opravit neočekávané chyby, ale pokud vaše světy závisejí na doinstalovaném obsahu, možná budou poškozeny."
   },
   "instance.settings.tabs.installation.reinstall.confirm.title": {
     "message": "Opravdu si přejete přeinstalovat tuto instalaci?"
@@ -267,7 +441,7 @@
     "message": "Ukázat všechny verze"
   },
   "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "Změnit verzi"
+    "message": "změnit verzi"
   },
   "instance.settings.tabs.installation.tooltip.action.install": {
     "message": "Instalovat"
@@ -353,9 +527,6 @@
   "instance.settings.tabs.window.width.enter": {
     "message": "Zadejte šířku..."
   },
-  "instance.settings.title": {
-    "message": "Nastavení"
-  },
   "instance.worlds.a_minecraft_server": {
     "message": "Minecraft Server"
   },
@@ -387,7 +558,7 @@
     "message": "Můžeš rovnou skočit na server pouze v Minecraftu Alpha 1.0.5+"
   },
   "instance.worlds.no_singleplayer_quick_play": {
-    "message": "Můžeš rovnou skočit do světa jednoho hráče pouze v Minecraftu 1.20+"
+    "message": "Můžeš se rovnou připojit do světa jednoho hráče pouze v Minecraftu 1.20+"
   },
   "instance.worlds.play_instance": {
     "message": "Hrát instanci"

apps/app-frontend/src/locales/da-DK/index.json

@@ -1,7 +1,55 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "Minecraft authentication servere kan måske være nede lige nu. Tjek din internet forbindelse og prøv igen senere."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "Kan ikke nå autentificeringsservere"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "Installer for at spille"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "Installer"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": "{count, plural, one {# mod} other {# mods}}"
+  },
+  "app.modal.install-to-play.server-requires-mods": {
+    "message": "Denne server kræver mods for at spille. Klik installer for at sætte op filerne som er krævet fra Modrinth."
+  },
+  "app.modal.update-to-play.added-count": {
+    "message": "{count} tilføjet"
+  },
+  "app.modal.update-to-play.diff-type.added": {
+    "message": "Tilføjet"
+  },
+  "app.modal.update-to-play.diff-type.removed": {
+    "message": "Fjernet"
+  },
+  "app.modal.update-to-play.diff-type.updated": {
+    "message": "Opdateret"
+  },
+  "app.modal.update-to-play.header": {
+    "message": "Opdater for at spille"
+  },
+  "app.modal.update-to-play.removed-count": {
+    "message": "{count} fjernet"
+  },
+  "app.modal.update-to-play.update-required": {
+    "message": "Opdatering krævet"
+  },
+  "app.modal.update-to-play.update-required-description": {
+    "message": "En opdatering er krævet for at spille {name}. Venligst opdater til den seneste version for at køre spillet."
+  },
+  "app.modal.update-to-play.updated-count": {
+    "message": "{count} opdateret"
+  },
   "app.settings.developer-mode-enabled": {
     "message": "Udvikler-tilstand aktiveret."
   },
+  "app.settings.downloading": {
+    "message": "Downloader v{version}"
+  },
   "app.settings.tabs.appearance": {
     "message": "Udseende"
   },
@@ -14,12 +62,126 @@
   "app.settings.tabs.java-installations": {
     "message": "Javainstallationer"
   },
+  "app.settings.tabs.language": {
+    "message": "Sprog"
+  },
   "app.settings.tabs.privacy": {
     "message": "Privatliv"
   },
   "app.settings.tabs.resource-management": {
     "message": "Ressourcestyring"
   },
+  "app.update-toast.body": {
+    "message": "Modrinth App v{version} er allerede installeret! Genindlæs for at opdatere nu, eller automatisk når du lukker Modrinth App."
+  },
+  "app.update-toast.body.download-complete": {
+    "message": "Modrinth App v{version} er færdig med at download. Genindlæs for at opdatere nu, eller automatisk når du lukker Modrinth App."
+  },
+  "app.update-toast.body.linux": {
+    "message": "Modrinth App v{version} er nu tilgængelig. Brug din pakke-manager til at opdatere for de nyeste features og fejlrettelser!"
+  },
+  "app.update-toast.body.metered": {
+    "message": "Modrinth App v{version} er nu tilgængelig! Siden du er på et begrænset netværk, vi downloadede den ikke automatisk."
+  },
+  "app.update-toast.changelog": {
+    "message": "Ændringslog"
+  },
+  "app.update-toast.download": {
+    "message": "Download ({size})"
+  },
+  "app.update-toast.download-page": {
+    "message": "Download"
+  },
+  "app.update-toast.downloading": {
+    "message": "Downloader..."
+  },
+  "app.update-toast.reload": {
+    "message": "Geninlæs"
+  },
+  "app.update-toast.title": {
+    "message": "Opdatering tilgængelig"
+  },
+  "app.update-toast.title.download-complete": {
+    "message": "Download færdiggjort"
+  },
+  "app.update.complete-toast.text": {
+    "message": "Klik her for at vise ændringslog."
+  },
+  "app.update.complete-toast.title": {
+    "message": "Version {version} var installeret med succes!"
+  },
+  "app.update.download-update": {
+    "message": "Download opdatering"
+  },
+  "app.update.downloading-update": {
+    "message": "Downloader opdatering ({percent}%)"
+  },
+  "app.update.reload-to-update": {
+    "message": "Genindlæs for at installere opdatering"
+  },
+  "friends.action.add-friend": {
+    "message": "Tilføj en ven"
+  },
+  "friends.action.view-friend-requests": {
+    "message": "{count} venne{count, plural, one {anmodning} other {anmodninger}}"
+  },
+  "friends.add-friend.submit": {
+    "message": "Send en venneanmodning"
+  },
+  "friends.add-friend.title": {
+    "message": "Tilføjer en ven"
+  },
+  "friends.add-friend.username.description": {
+    "message": "Det er muligvis anderledes end deres Minecraft brugernavn!"
+  },
+  "friends.add-friend.username.placeholder": {
+    "message": "Indskriv Modrinth brugernavn..."
+  },
+  "friends.add-friend.username.title": {
+    "message": "Hvad er din vens Modrinth brugernavn?"
+  },
+  "friends.add-friends-to-share": {
+    "message": "<link>Tilføj venner</link> for at se hvad de spiller!"
+  },
+  "friends.friend.cancel-request": {
+    "message": "Annuller anmodning"
+  },
+  "friends.friend.remove-friend": {
+    "message": "Fjern ven"
+  },
+  "friends.friend.request-sent": {
+    "message": "Venneanmodning sendt"
+  },
+  "friends.friend.view-profile": {
+    "message": "Vis profil"
+  },
+  "friends.heading": {
+    "message": "Venner"
+  },
+  "friends.heading.active": {
+    "message": "Aktiv"
+  },
+  "friends.heading.offline": {
+    "message": "Offline"
+  },
+  "friends.heading.online": {
+    "message": "Online"
+  },
+  "friends.heading.pending": {
+    "message": "Afventer"
+  },
+  "friends.no-friends-match": {
+    "message": "Ingen venner som matcher \"{query}\""
+  },
+  "friends.search-friends-placeholder": {
+    "message": "Søg venner..."
+  },
+  "friends.section.heading": {
+    "message": "{title} - {count}"
+  },
+  "friends.sign-in-to-add-friends": {
+    "message": "<link>Log ind på en Modrinth konto</link> for at tilføje venner og se hvad de spiller!"
+  },
   "instance.add-server.add-and-play": {
     "message": "Tilføj og spil"
   },
@@ -144,7 +306,7 @@
     "message": "Kørte efter spillet lukkes."
   },
   "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Indskriv post-exit kommando..."
+    "message": "Indtast post-exit kommando..."
   },
   "instance.settings.tabs.hooks.pre-launch": {
     "message": "Pre-launch"
@@ -153,7 +315,7 @@
     "message": "Kørt før en instance bliver kørt."
   },
   "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "Indskriv pre-launch kommando..."
+    "message": "Indtast pre-launch kommando..."
   },
   "instance.settings.tabs.hooks.title": {
     "message": "Spille lunch hooks"
@@ -165,7 +327,7 @@
     "message": "Wrapper kommando for at køre Minecraft."
   },
   "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "Indskriv wrapper kommando..."
+    "message": "Indtast wrapper kommando..."
   },
   "instance.settings.tabs.installation": {
     "message": "Installation"
@@ -342,7 +504,7 @@
     "message": "Højden af spillevinduet når kørt."
   },
   "instance.settings.tabs.window.height.enter": {
-    "message": "Indskriv højde..."
+    "message": "Indtast højde..."
   },
   "instance.settings.tabs.window.width": {
     "message": "Bredde"
@@ -351,10 +513,7 @@
     "message": "Bredden på spille vinduet når kørt."
   },
   "instance.settings.tabs.window.width.enter": {
-    "message": "Indskriv bredde..."
-  },
-  "instance.settings.title": {
-    "message": "Indstillinger"
+    "message": "Indtast bredde..."
   },
   "instance.worlds.a_minecraft_server": {
     "message": "En Minecraft server"