chore: remove dead profile_run_credentials plugin command

.cargo/config.toml

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

.dockerignore

@@ -1 +0,0 @@
-.gitignore

.editorconfig

@@ -14,5 +14,5 @@ max_line_length = 100
 max_line_length = off
 trim_trailing_whitespace = false
 
-[*.{rs,java,kts}]
-indent_size = 4
+[*.rs]
+indent_size = 4

.gitattributes

@@ -1,35 +1 @@
 * text=auto eol=lf
-
-# SQLx calculates a checksum of migration scripts at build time to compare
-# it with the checksum of the applied migration for the same version at
-# runtime, to know if the migration script has been changed, and thus the
-# DB schema went out of sync with the code.
-#
-# However, such checksum treats the script as a raw byte stream, taking
-# into account inconsequential differences like different line endings
-# in different OSes. When combined with Git's EOL conversion and mixed
-# native and cross-compilation scenarios, this leads to existing
-# migrations that didn't change having potentially different checksums
-# according to the environment they were built in, which can break the
-# migration system when deploying the Modrinth App, rendering it
-# unusable.
-#
-# The gitattribute above ensures that all text files are checked out
-# with LF line endings, but widely deployed app versions were built
-# without this attribute set, which left such line endings variable to
-# the platform. Thus, there is no perfect solution to this problem:
-# forcing CRLF here would break Linux and macOS users, forcing LF
-# breaks Windows users, and leaving it unspecified may still lead to
-# line ending differences when cross-compiling from Linux to Windows
-# or vice versa, or having Git configured with different line
-# conversion settings. Moreover, there is no `eol=native` attribute,
-# and using CI-only scripts to convert line endings would make the
-# builds differ between CI and most local environments. So, let's pick
-# the least bad option: let Git handle line endings using its
-# configuration by leaving it unspecified, which works fine as long as
-# people don't mess with Git's line ending settings, which is the vast
-# majority of cases.
-/packages/app-lib/migrations/20240711194701_init.sql !eol
-/packages/app-lib/migrations/20240813205023_drop-active-unique.sql !eol
-/packages/app-lib/migrations/20240930001852_disable-personalized-ads.sql !eol
-/packages/app-lib/migrations/20241222013857_feature-flags.sql !eol

.github/workflows/labrinth-docker.yml

@@ -18,6 +18,9 @@ on:
 jobs:
   docker:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/labrinth
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -35,6 +38,8 @@ jobs:
       - name: Build and push
         id: docker_build
         uses: docker/build-push-action@v2
+        env:
+          SQLX_OFFLINE: true
         with:
           file: ./apps/labrinth/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}

.github/workflows/theseus-build.yml

@@ -1,152 +0,0 @@
-name: Modrinth App build
-on:
-  push:
-    branches:
-      - main
-    tags:
-      - 'v*'
-    paths:
-      - .github/workflows/theseus-build.yml
-      - 'apps/app/**'
-      - 'apps/app-frontend/**'
-      - 'packages/app-lib/**'
-      - 'packages/app-macros/**'
-      - 'packages/assets/**'
-      - 'packages/ui/**'
-      - 'packages/utils/**'
-  workflow_dispatch:
-    inputs:
-      sign-windows-binaries:
-        description: Sign Windows binaries
-        type: boolean
-        default: true
-        required: false
-
-jobs:
-  build:
-    name: Build
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-22.04]
-        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
-            artifact-target-name: x86_64-unknown-linux-gnu
-
-    runs-on: ${{ matrix.platform }}
-
-    steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - 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
-        uses: pnpm/action-setup@v4
-
-      - name: 🧰 Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-          cache: pnpm
-
-      - 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
-        uses: jaxxstorm/action-install-gh-release@v2.1.0
-        with:
-          repo: TomWright/dasel
-          tag: v2.8.1
-          extension-matching: disable
-          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
-          chmod: 0755
-
-      - 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/')"
-          echo "Setting application version to $APP_VERSION"
-          dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
-          dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
-          dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
-
-          cp packages/app-lib/.env.prod packages/app-lib/.env
-
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
-
-      - name: 🧰 Install dependencies
-        run: pnpm install
-
-      - name: ✍️ Set up Windows code signing
-        if: startsWith(matrix.platform, 'windows')
-        shell: bash
-        run: |
-          if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
-            choco install jsign --ignore-dependencies # GitHub runners come with a global Java installation already
-          else
-            dasel delete -f apps/app/tauri-release.conf.json 'bundle.windows.signCommand'
-          fi
-
-      - name: 🔨 Build macOS app
-        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'macos')
-        env:
-          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - name: 🔨 Build Linux app
-        run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'ubuntu')
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - 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'
-          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: startsWith(matrix.platform, 'windows')
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          DIGICERT_ONE_SIGNER_API_KEY: ${{ secrets.DIGICERT_ONE_SIGNER_API_KEY }}
-          DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
-          DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
-
-      - name: 📤 Upload app bundles
-        uses: actions/upload-artifact@v4
-        with:
-          name: App bundle (${{ matrix.artifact-target-name }})
-          path: |
-            target/release/bundle/appimage/Modrinth App_*.AppImage*
-            target/release/bundle/deb/Modrinth App_*.deb*
-            target/release/bundle/rpm/Modrinth App-*.rpm*
-            target/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz*
-            target/universal-apple-darwin/release/bundle/dmg/Modrinth App_*.dmg*
-            target/release/bundle/nsis/Modrinth App_*-setup.exe*
-            target/release/bundle/nsis/Modrinth App_*-setup.nsis.zip*

.github/workflows/theseus-release.yml

@@ -1,118 +1,157 @@
-name: Modrinth App release
+name: 'Modrinth App build'
 on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+    paths:
+      - .github/workflows/theseus-release.yml
+      - 'apps/app/**'
+      - 'apps/app-frontend/**'
+      - 'apps/labrinth/src/common/**'
+      - 'apps/labrinth/Cargo.toml'
+      - 'packages/app-lib/**'
+      - 'packages/app-macros/**'
+      - 'packages/assets/**'
+      - 'packages/ui/**'
+      - 'packages/utils/**'
   workflow_dispatch:
-    inputs:
-      version-tag:
-        description: Version tag to release to the wide public
-        type: string
-        required: true
-      release-notes:
-        description: Release notes to include in the Tauri version manifest
-        default: A new release of the Modrinth App is available!
-        type: string
-        required: true
 
 jobs:
-  release:
-    name: Release Modrinth App
-    runs-on: ubuntu-latest
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, windows-latest, ubuntu-22.04]
 
-    env:
-      LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
-      WINDOWS_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-pc-windows-msvc)
-      MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME: App bundle (universal-apple-darwin)
-      LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com
+    runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: 📥 Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@v11
+      - uses: actions/checkout@v4
+
+      - name: Rust setup (mac)
+        if: startsWith(matrix.platform, 'macos')
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          workflow: theseus-build.yml
-          workflow_conclusion: success
-          event: push
-          branch: ${{ inputs.version-tag }}
-          use_unzip: true
+          rustflags: ''
+          target: x86_64-apple-darwin
 
-      - name: 🛠️ Generate version manifest
-        env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          RELEASE_NOTES: ${{ inputs.release-notes }}
+      - name: Rust setup
+        if: "!startsWith(matrix.platform, 'macos')"
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          rustflags: ''
+
+      - name: Setup rust cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            target/**
+            !target/*/release/bundle/*/*.dmg
+            !target/*/release/bundle/*/*.app.tar.gz
+            !target/*/release/bundle/*/*.app.tar.gz.sig
+            !target/release/bundle/*/*.dmg
+            !target/release/bundle/*/*.app.tar.gz
+            !target/release/bundle/*/*.app.tar.gz.sig
+
+            !target/release/bundle/appimage/*.AppImage
+            !target/release/bundle/appimage/*.AppImage.tar.gz
+            !target/release/bundle/appimage/*.AppImage.tar.gz.sig
+            !target/release/bundle/deb/*.deb
+            !target/release/bundle/rpm/*.rpm
+
+            !target/release/bundle/msi/*.msi
+            !target/release/bundle/msi/*.msi.zip
+            !target/release/bundle/msi/*.msi.zip.sig
+
+            !target/release/bundle/nsis/*.exe
+            !target/release/bundle/nsis/*.nsis.zip
+            !target/release/bundle/nsis/*.nsis.zip.sig
+          key: ${{ runner.os }}-rust-target-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-rust-target-
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install pnpm via corepack
+        shell: bash
         run: |
-          # Reference: https://tauri.app/plugin/updater/#server-support
-          jq -nc \
-            --arg versionTag "${VERSION_TAG#v}" \
-            --arg releaseNotes "$RELEASE_NOTES" \
-            --rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
-            --rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
-            --rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
-            --rawfile windowsX64UpdateArtifactSignature "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION_TAG#v}_x64-setup.nsis.zip.sig" \
-          '{
-            "version": $versionTag,
-            "notes": $releaseNotes,
-            "pub_date": now | todateiso8601,
-            "platforms": {
-              "darwin-aarch64": {
-                "signature": $macOsAarch64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
-              },
-              "darwin-x86_64": {
-                "signature": $macOsX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
-              },
-              "linux-x86_64": {
-                "signature": $linuxX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage.tar.gz")",
-                "install_urls": [
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.deb")",
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage")",
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App-" + $versionTag + "-1.x86_64.rpm")"
-                ]
-              },
-              "windows-x86_64": {
-                "signature": $windowsX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.nsis.zip")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.exe")"]
-              }
-            }
-          }' > updates.json
+          corepack enable
+          corepack prepare --activate
 
-          echo "Generated manifest for version ${VERSION_TAG}:"
-          cat updates.json
-
-      - name: 📤 Upload release artifacts
-        env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
-          AWS_BUCKET: ${{ secrets.LAUNCHER_FILES_BUCKET_NAME }}
-          AWS_REGION: ${{ secrets.LAUNCHER_FILES_BUCKET_REGION }}
-          AWS_ENDPOINT_URL: ${{ secrets.LAUNCHER_FILES_BUCKET_ENDPOINT_URL }}
-          AWS_PAGER: ''
-          # Work around incompatible checksum behavior with some S3-like object storage providers,
-          # such as Cloudflare R2. See:
-          # - https://developers.cloudflare.com/r2/examples/aws/aws-cli/
-          # - https://developers.cloudflare.com/r2/examples/aws/aws-sdk-java/
-          AWS_REQUEST_CHECKSUM_CALCULATION: when_required
-          AWS_RESPONSE_CHECKSUM_VALIDATION: when_required
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
         run: |
-          for macosBundleType in 'macos' 'dmg'; do
-            aws s3 cp --recursive \
-              "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/${macosBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/macos"
-          done
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-          for linuxBundleType in 'appimage' 'deb' 'rpm'; do
-            aws s3 cp --recursive \
-              "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${linuxBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/linux"
-          done
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-          for windowsBundleType in 'nsis'; do
-            aws s3 cp --recursive \
-              "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${windowsBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/windows"
-          done
+      - name: install dependencies (ubuntu only)
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev pkg-config libayatana-appindicator3-dev librsvg2-dev
 
-          aws s3 cp updates.json "s3://${AWS_BUCKET}"
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: build app (macos)
+        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config "tauri-release.conf.json"
+        if: startsWith(matrix.platform, 'macos')
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: build app
+        run: pnpm --filter=@modrinth/app run tauri build --config "tauri-release.conf.json"
+        id: build_os
+        if: "!startsWith(matrix.platform, 'macos')"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: upload ${{ matrix.platform }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.platform }}
+          path: |
+            target/*/release/bundle/*/*.dmg
+            target/*/release/bundle/*/*.app.tar.gz
+            target/*/release/bundle/*/*.app.tar.gz.sig
+            target/release/bundle/*/*.dmg
+            target/release/bundle/*/*.app.tar.gz
+            target/release/bundle/*/*.app.tar.gz.sig
+
+            target/release/bundle/*/*.AppImage
+            target/release/bundle/*/*.AppImage.tar.gz
+            target/release/bundle/*/*.AppImage.tar.gz.sig
+            target/release/bundle/*/*.deb
+            target/release/bundle/*/*.rpm
+
+            target/release/bundle/msi/*.msi
+            target/release/bundle/msi/*.msi.zip
+            target/release/bundle/msi/*.msi.zip.sig
+
+            target/release/bundle/nsis/*.exe
+            target/release/bundle/nsis/*.nsis.zip
+            target/release/bundle/nsis/*.nsis.zip.sig

.github/workflows/turbo-ci.yml

@@ -74,14 +74,5 @@ jobs:
           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
-          git diff --exit-code --color */*/src/locales/en-US/index.json

.idea/code.iml

@@ -17,4 +17,4 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>

.idea/modules.xml

@@ -5,4 +5,4 @@
       <module fileurl="file://$PROJECT_DIR$/.idea/code.iml" filepath="$PROJECT_DIR$/.idea/code.iml" />
     </modules>
   </component>
-</project>
+</project>

Cargo.toml

@@ -25,7 +25,7 @@ actix-ws = "0.3.0"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
 async_zip = "0.0.17"
-async-compression = { version = "0.4.25", default-features = false }
+async-compression = { version = "0.4.24", default-features = false }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
   "runtime-tokio-hyper-rustls",
@@ -37,7 +37,6 @@ async-tungstenite = { version = "0.29.1", default-features = false, features = [
 async-walkdir = "2.1.0"
 base64 = "0.22.1"
 bitflags = "2.9.1"
-bytemuck = "1.23.0"
 bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
@@ -48,7 +47,6 @@ color-thief = "0.2.2"
 console-subscriber = "0.4.1"
 daedalus = { path = "packages/daedalus" }
 dashmap = "6.1.0"
-data-url = "0.3.1"
 deadpool-redis = "0.21.1"
 dirs = "6.0.0"
 discord-rich-presence = "0.2.5"
@@ -62,17 +60,11 @@ flate2 = "1.1.2"
 fs4 = { version = "0.13.1", default-features = false }
 futures = { version = "0.3.31", default-features = false }
 futures-util = "0.3.31"
-hashlink = "0.10.0"
 heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-hyper-rustls = { version = "0.27.7", default-features = false, features = [
-  "http1",
-  "native-tokio",
-  "ring",
-  "tls12",
-] }
+hyper-tls = "0.6.0"
 hyper-util = "0.1.14"
 iana-time-zone = "0.1.63"
 image = { version = "0.25.6", default-features = false, features = ["rayon"] }
@@ -98,7 +90,6 @@ notify = { version = "8.0.0", default-features = false }
 notify-debouncer-mini = { version = "0.6.0", default-features = false }
 p256 = "0.13.2"
 paste = "1.0.15"
-png = "0.17.16"
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
 quick-xml = "0.37.5"
@@ -106,9 +97,8 @@ 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.31.0"  # Locked on 0.31 until deadpool-redis updates to 0.32
 regex = "1.11.1"
-reqwest = { version = "0.12.20", default-features = false }
-rgb = "0.8.50"
-rust_decimal = { version = "1.37.2", features = [
+reqwest = { version = "0.12.19", default-features = false }
+rust_decimal = { version = "1.37.1", features = [
   "serde-with-float",
   "serde-with-str",
 ] }
@@ -119,7 +109,7 @@ rust-s3 = { version = "0.35.1", default-features = false, features = [
   "tokio-rustls-tls",
 ] }
 rusty-money = "0.4.1"
-sentry = { version = "0.41.0", default-features = false, features = [
+sentry = { version = "0.38.1", default-features = false, features = [
   "backtrace",
   "contexts",
   "debug-images",
@@ -127,13 +117,13 @@ sentry = { version = "0.41.0", default-features = false, features = [
   "reqwest",
   "rustls",
 ] }
-sentry-actix = "0.41.0"
+sentry-actix = "0.38.1"
 serde = "1.0.219"
 serde_bytes = "0.11.17"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"
 serde_json = "1.0.140"
-serde_with = "3.13.0"
+serde_with = "3.12.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"] }
@@ -142,19 +132,18 @@ spdx = "0.10.8"
 sqlx = { version = "0.8.6", default-features = false }
 sysinfo = { version = "0.35.2", default-features = false }
 tar = "0.4.44"
-tauri = "2.6.1"
-tauri-build = "2.3.0"
-tauri-plugin-deep-link = "2.4.0"
-tauri-plugin-dialog = "2.3.0"
-tauri-plugin-http = "2.5.0"
-tauri-plugin-opener = "2.4.0"
-tauri-plugin-os = "2.3.0"
-tauri-plugin-single-instance = "2.3.0"
-tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
+tauri = "2.5.1"
+tauri-build = "2.2.0"
+tauri-plugin-deep-link = "2.3.0"
+tauri-plugin-dialog = "2.2.2"
+tauri-plugin-opener = "2.2.7"
+tauri-plugin-os = "2.2.1"
+tauri-plugin-single-instance = "2.2.4"
+tauri-plugin-updater = { version = "2.7.1", default-features = false, features = [
   "rustls-tls",
   "zip",
 ] }
-tauri-plugin-window-state = "2.3.0"
+tauri-plugin-window-state = "2.2.2"
 tempfile = "3.20.0"
 theseus = { path = "packages/app-lib" }
 thiserror = "2.0.12"
@@ -177,7 +166,7 @@ whoami = "1.6.0"
 winreg = "0.55.0"
 woothee = "0.13.0"
 yaserde = "0.12.0"
-zip = { version = "4.2.0", default-features = false, features = [
+zip = { version = "4.0.0", default-features = false, features = [
   "bzip2",
   "deflate",
   "deflate64",
@@ -224,7 +213,7 @@ wildcard_dependencies = "warn"
 warnings = "deny"
 
 [patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "21db186" }
+wry = { git = "https://github.com/modrinth/wry", rev = "cafdaa9" }
 
 # Optimize for speed and reduce size on release builds
 [profile.release]

apps/app-frontend/.prettierignore

@@ -1,2 +1 @@
 **/dist
-*.gltf

apps/app-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "1.0.0-local",
+  "version": "0.9.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
     "tsc:check": "vue-tsc --noEmit",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/helpers,src/pages,src/store}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
     "test": "vue-tsc --noEmit"
   },
   "dependencies": {
@@ -20,20 +20,16 @@
     "@sentry/vue": "^8.27.0",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.2.1",
-    "@tauri-apps/plugin-http": "^2.5.0",
     "@tauri-apps/plugin-opener": "^2.2.6",
     "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-updater": "^2.7.1",
     "@tauri-apps/plugin-window-state": "^2.2.2",
-    "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
-    "@vueuse/core": "^11.1.0",
     "dayjs": "^1.11.10",
     "floating-vue": "^5.2.2",
     "ofetch": "^1.3.4",
     "pinia": "^2.1.7",
     "posthog-js": "^1.158.2",
-    "three": "^0.172.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.13",
     "vue-multiselect": "3.0.0",

apps/app-frontend/src/App.vue

@@ -1,18 +1,8 @@
 <script setup>
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-  useTemplateRef,
-  provide,
-  nextTick,
-} from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
   ArrowBigUpDashIcon,
-  ChangeSkinIcon,
   CompassIcon,
   DownloadIcon,
   HomeIcon,
@@ -28,7 +18,6 @@ import {
   SettingsIcon,
   WorldIcon,
   XIcon,
-  NewspaperIcon,
 } from '@modrinth/assets'
 import {
   Avatar,
@@ -36,13 +25,13 @@ import {
   ButtonStyled,
   Notifications,
   OverflowMenu,
-  NewsArticleCard,
+  useRelativeTime,
 } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
-import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
+import { get } from '@/helpers/settings.ts'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
@@ -51,7 +40,7 @@ import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { type } from '@tauri-apps/plugin-os'
-import { areUpdatesEnabled, getOS, isDev } from '@/helpers/utils.js'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
 import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { getVersion } from '@tauri-apps/api/app'
@@ -68,20 +57,19 @@ import { get_opening_command, initialize_state } from '@/helpers/state'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { renderString } from '@modrinth/utils'
 import { useFetch } from '@/helpers/fetch.js'
+import { check } from '@tauri-apps/plugin-updater'
 import NavButton from '@/components/ui/NavButton.vue'
 import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
+import dayjs from 'dayjs'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
-import UpdateModal from '@/components/ui/UpdateModal.vue'
-import { get_available_capes, get_available_skins } from './helpers/skins'
-import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { createTooltip, destroyTooltip } from 'floating-vue'
+
+const formatRelativeTime = useRelativeTime()
 
 const themeStore = useTheming()
 
@@ -120,18 +108,6 @@ onUnmounted(() => {
   document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
 })
 
-const { formatMessage } = useVIntl()
-const messages = defineMessages({
-  updateInstalledToastTitle: {
-    id: 'app.update.complete-toast.title',
-    defaultMessage: 'Version {version} was successfully installed!',
-  },
-  updateInstalledToastText: {
-    id: 'app.update.complete-toast.text',
-    defaultMessage: 'Click here to view the changelog.',
-  },
-})
-
 async function setupApp() {
   stateInitialized.value = true
   const {
@@ -145,8 +121,7 @@ async function setupApp() {
     toggle_sidebar,
     developer_mode,
     feature_flags,
-    pending_update_toast_for_version,
-  } = await getSettings()
+  } = await get()
 
   if (default_page === 'Library') {
     await router.push('/library')
@@ -202,7 +177,6 @@ async function setupApp() {
     'criticalAnnouncements',
     true,
   )
-    .then((response) => response.json())
     .then((res) => {
       if (res && res.header && res.body) {
         criticalErrorMessage.value = res
@@ -214,50 +188,15 @@ async function setupApp() {
       )
     })
 
-  useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true)
-    .then((response) => response.json())
-    .then((res) => {
-      if (res && res.articles) {
-        // Format expected by NewsArticleCard component.
-        news.value = res.articles
-          .map((article) => ({
-            ...article,
-            path: article.link,
-            thumbnail: article.thumbnail,
-            title: article.title,
-            summary: article.summary,
-            date: article.date,
-          }))
-          .slice(0, 4)
-      }
-    })
+  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
+    if (res && res.articles) {
+      news.value = res.articles
+    }
+  })
 
   get_opening_command().then(handleCommand)
+  checkUpdates()
   fetchCredentials()
-
-  try {
-    const skins = (await get_available_skins()) ?? []
-    const capes = (await get_available_capes()) ?? []
-    generateSkinPreviews(skins, capes)
-  } catch (error) {
-    console.warn('Failed to generate skin previews in app setup.', error)
-  }
-
-  if (pending_update_toast_for_version !== null) {
-    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) {
-      notifications.addNotification({
-        type: 'success',
-        title: formatMessage(messages.updateInstalledToastTitle, { version }),
-        text: formatMessage(messages.updateInstalledToastText),
-        clickAction: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
-      })
-    }
-  }
 }
 
 const stateFailed = ref(false)
@@ -365,7 +304,6 @@ onMounted(() => {
 })
 
 const accounts = ref(null)
-provide('accountsCard', accounts)
 
 command_listener(handleCommand)
 async function handleCommand(e) {
@@ -385,95 +323,19 @@ async function handleCommand(e) {
   }
 }
 
-const availableUpdate = ref(null)
-const updateSkipped = ref(false)
-const enqueuedUpdate = ref(null)
-const updateModal = useTemplateRef('updateModal')
+const updateAvailable = ref(false)
 async function checkUpdates() {
-  if (!(await areUpdatesEnabled())) {
-    console.log('Skipping update check as updates are disabled in this build')
-    return
-  }
+  const update = await check()
+  updateAvailable.value = !!update
 
-  async function performCheck() {
-    if (updateModal.value.isOpen) {
-      console.log('Skipping update check because the update modal is already open')
-      return
-    }
-
-    const update = await invoke('plugin:updater|check')
-    if (!update) {
-      return
-    }
-
-    console.log(`Update ${update.version} is available.`)
-
-    if (update.version === availableUpdate.value?.version) {
-      console.log(
-        'Skipping update modal because the new version is the same as the dismissed update',
-      )
-      return
-    }
-
-    availableUpdate.value = update
-
-    const settings = await getSettings()
-    if (settings.skipped_update === update.version) {
-      updateSkipped.value = true
-      console.log('Skipping update modal because the user chose to skip this update')
-      return
-    }
-
-    updateSkipped.value = false
-    updateModal.value.show(update)
-  }
-
-  await performCheck()
   setTimeout(
     () => {
       checkUpdates()
     },
-    5 * 60 * 1000,
+    5 * 1000 * 60,
   )
 }
 
-async function skipUpdate(version) {
-  enqueuedUpdate.value = null
-
-  updateSkipped.value = true
-  const settings = await getSettings()
-  settings.skipped_update = version
-  await setSettings(settings)
-}
-
-async function updateEnqueuedForLater(version) {
-  enqueuedUpdate.value = version
-}
-
-async function forceOpenUpdateModal() {
-  if (updateSkipped.value) {
-    updateSkipped.value = false
-    const settings = await getSettings()
-    settings.skipped_update = null
-    await setSettings(settings)
-  }
-  updateModal.value.show(availableUpdate.value)
-}
-
-const updateButton = useTemplateRef('updateButton')
-async function showUpdateButtonTooltip() {
-  await nextTick()
-  const tooltip = createTooltip(updateButton.value.$el, {
-    placement: 'right',
-    content: 'Click here to view the update again.',
-  })
-  tooltip.show()
-  setTimeout(() => {
-    tooltip.hide()
-    destroyTooltip(updateButton.value.$el)
-  }, 3500)
-}
-
 function handleClick(e) {
   let target = e.target
   while (target != null) {
@@ -514,14 +376,6 @@ function handleAuxClick(e) {
   <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">
-    <Suspense @resolve="checkUpdates">
-      <UpdateModal
-        ref="updateModal"
-        @update-skipped="skipUpdate"
-        @update-enqueued-for-later="updateEnqueuedForLater"
-        @modal-hidden="showUpdateButtonTooltip"
-      />
-    </Suspense>
     <Suspense>
       <AppSettingsModal ref="settingsModal" />
     </Suspense>
@@ -545,9 +399,6 @@ function handleAuxClick(e) {
       >
         <CompassIcon />
       </NavButton>
-      <NavButton v-tooltip.right="'Skins (Beta)'" to="/skins">
-        <ChangeSkinIcon />
-      </NavButton>
       <NavButton
         v-tooltip.right="'Library'"
         to="/library"
@@ -572,18 +423,8 @@ function handleAuxClick(e) {
         <PlusIcon />
       </NavButton>
       <div class="flex flex-grow"></div>
-      <NavButton
-        v-if="!!availableUpdate"
-        ref="updateButton"
-        v-tooltip.right="
-          enqueuedUpdate === availableUpdate?.version
-            ? 'Update installation queued for next restart'
-            : 'Update available'
-        "
-        :to="forceOpenUpdateModal"
-      >
-        <DownloadIcon v-if="updateSkipped || enqueuedUpdate === availableUpdate?.version" />
-        <DownloadIcon v-else class="text-brand-green" />
+      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
+        <DownloadIcon />
       </NavButton>
       <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
         <SettingsIcon />
@@ -618,13 +459,13 @@ function handleAuxClick(e) {
         <ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
         <div class="flex items-center gap-1 ml-3">
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
             @click="router.back()"
           >
             <LeftArrowIcon />
           </button>
           <button
-            class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
+            class="cursor-pointer p-0 m-0 border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
             @click="router.forward()"
           >
             <RightArrowIcon />
@@ -738,20 +579,34 @@ function handleAuxClick(e) {
               <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
             </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">
-              <NewsArticleCard
-                v-for="(item, index) in news"
-                :key="`news-${index}`"
-                :article="item"
+          <div v-if="news && news.length > 0" class="pt-4 flex flex-col">
+            <h3 class="px-4 text-lg m-0">News</h3>
+            <template v-for="(item, index) in news" :key="`news-${index}`">
+              <a
+                :class="`flex flex-col outline-offset-[-4px] hover:bg-[--brand-gradient-border] focus:bg-[--brand-gradient-border] px-4 transition-colors ${index === 0 ? 'pt-2 pb-4' : 'py-4'}`"
+                :href="item.link"
+                target="_blank"
+                rel="external"
+              >
+                <img
+                  :src="item.thumbnail"
+                  alt="News thumbnail"
+                  aria-hidden="true"
+                  class="w-full aspect-[3/1] object-cover rounded-2xl border-[1px] border-solid border-[--brand-gradient-border]"
+                />
+                <h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">
+                  {{ item.title }}
+                </h4>
+                <p class="my-1 text-sm text-secondary leading-tight">{{ item.summary }}</p>
+                <p class="text-right text-sm text-secondary opacity-60 leading-tight m-0">
+                  {{ formatRelativeTime(dayjs(item.date).toISOString()) }}
+                </p>
+              </a>
+              <hr
+                v-if="index !== news.length - 1"
+                class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"
               />
-              <ButtonStyled color="brand" size="large">
-                <a href="https://modrinth.com/news" target="_blank" class="my-4">
-                  <NewspaperIcon /> View all news
-                </a>
-              </ButtonStyled>
-            </div>
+            </template>
           </div>
         </div>
       </div>

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

@@ -136,7 +136,7 @@ const filteredResults = computed(() => {
 
   if (sortBy.value === 'Game version') {
     instances.sort((a, b) => {
-      return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
+      return a.game_version.localeCompare(b.game_version)
     })
   }
 
@@ -213,17 +213,6 @@ const filteredResults = computed(() => {
       instanceMap.set(entry[0], entry[1])
     })
   }
-  // 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') {
-    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
-      return a[0].localeCompare(b[0], undefined, { numeric: true })
-    })
-    instanceMap.clear()
-    sortedEntries.forEach((entry) => {
-      instanceMap.set(entry[0], entry[1])
-    })
-  }
 
   return instanceMap
 })

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

@@ -9,7 +9,9 @@
     <Avatar
       size="36px"
       :src="
-        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+        selectedAccount
+          ? `https://mc-heads.net/avatar/${selectedAccount.profile.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
       "
     />
     <div class="flex flex-col w-full">
@@ -26,7 +28,7 @@
       :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
     >
       <div v-if="selectedAccount" class="selected account">
-        <Avatar size="xs" :src="avatarUrl" />
+        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.profile.id}/128`" />
         <div>
           <h4>{{ selectedAccount.profile.name }}</h4>
           <p>Selected</p>
@@ -42,21 +44,14 @@
       </div>
       <div v-else class="logged-out account">
         <h4>Not signed in</h4>
-        <Button
-          v-tooltip="'Log in'"
-          :disabled="loginDisabled"
-          icon-only
-          color="primary"
-          @click="login()"
-        >
-          <LogInIcon v-if="!loginDisabled" />
-          <SpinnerIcon v-else class="animate-spin" />
+        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
+          <LogInIcon />
         </Button>
       </div>
       <div v-if="displayAccounts.length > 0" class="account-group">
         <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
           <Button class="option account" @click="setAccount(account)">
-            <Avatar :src="getAccountAvatarUrl(account)" class="icon" />
+            <Avatar :src="`https://mc-heads.net/avatar/${account.profile.id}/128`" class="icon" />
             <p>{{ account.profile.name }}</p>
           </Button>
           <Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
@@ -73,7 +68,7 @@
 </template>
 
 <script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
@@ -87,8 +82,6 @@ import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
 import { handleSevereError } from '@/store/error.js'
-import { get_available_skins } from '@/helpers/skins'
-import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
 
 defineProps({
   mode: {
@@ -101,40 +94,14 @@ defineProps({
 const emit = defineEmits(['change'])
 
 const accounts = ref({})
-const loginDisabled = ref(false)
 const defaultUser = ref()
-const equippedSkin = ref(null)
-const headUrlCache = ref(new Map())
 
 async function refreshValues() {
   defaultUser.value = await get_default_user().catch(handleError)
   accounts.value = await users().catch(handleError)
-
-  try {
-    const skins = await get_available_skins()
-    equippedSkin.value = skins.find((skin) => skin.is_equipped)
-
-    if (equippedSkin.value) {
-      try {
-        const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-        headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
-      } catch (error) {
-        console.warn('Failed to get head render for equipped skin:', error)
-      }
-    }
-  } catch {
-    equippedSkin.value = null
-  }
 }
-
-function setLoginDisabled(value) {
-  loginDisabled.value = value
-}
-
 defineExpose({
   refreshValues,
-  setLoginDisabled,
-  loginDisabled,
 })
 await refreshValues()
 
@@ -142,33 +109,6 @@ const displayAccounts = computed(() =>
   accounts.value.filter((account) => defaultUser.value !== account.profile.id),
 )
 
-const avatarUrl = computed(() => {
-  if (equippedSkin.value?.texture_key) {
-    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-    if (cachedUrl) {
-      return cachedUrl
-    }
-    return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
-  }
-  if (selectedAccount.value?.profile?.id) {
-    return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
-  }
-  return 'https://launcher-files.modrinth.com/assets/steve_head.png'
-})
-
-function getAccountAvatarUrl(account) {
-  if (
-    account.profile.id === selectedAccount.value?.profile?.id &&
-    equippedSkin.value?.texture_key
-  ) {
-    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-    if (cachedUrl) {
-      return cachedUrl
-    }
-  }
-  return `https://mc-heads.net/avatar/${account.profile.id}/128`
-}
-
 const selectedAccount = computed(() =>
   accounts.value.find((account) => account.profile.id === defaultUser.value),
 )
@@ -180,7 +120,6 @@ async function setAccount(account) {
 }
 
 async function login() {
-  loginDisabled.value = true
   const loggedIn = await login_flow().catch(handleSevereError)
 
   if (loggedIn) {
@@ -189,7 +128,6 @@ async function login() {
   }
 
   trackEvent('AccountLogIn')
-  loginDisabled.value = false
 }
 
 const logout = async (id) => {

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

@@ -219,8 +219,8 @@ async function copyToClipboard(text) {
           <template v-else-if="metadata.notEnoughSpace">
             <h3>Not enough space</h3>
             <p>
-              It looks like there is not enough space on the disk containing the directory you
-              selected. Please free up some space and try again or cancel the directory change.
+              It looks like there is not enough space on the disk containing the dirctory you
+              selected Please free up some space and try again or cancel the directory change.
             </p>
           </template>
           <template v-else>

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

@@ -19,6 +19,7 @@ import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { trackEvent } from '@/helpers/analytics'
 import dayjs from 'dayjs'
+import { formatCategory } from '@modrinth/utils'
 
 const formatRelativeTime = useRelativeTime()
 
@@ -172,10 +173,7 @@ onUnmounted(() => unlisten())
       <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
         <TimerIcon />
         <span class="text-sm">
-          <template v-if="instance.last_played">
-            Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
-          </template>
-          <template v-else> Never played </template>
+          Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
         </span>
       </div>
     </div>
@@ -239,8 +237,8 @@ onUnmounted(() => unlisten())
         </p>
         <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
           <GameIcon class="shrink-0" />
-          <span class="text-sm capitalize">
-            {{ instance.loader }} {{ instance.game_version }}
+          <span class="text-sm">
+            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
           </span>
         </div>
       </div>

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

@@ -108,6 +108,7 @@ async function testJava() {
   testingJava.value = true
   testingJavaSuccess.value = await test_jre(
     props.modelValue ? props.modelValue.path : '',
+    1,
     props.version,
   )
   testingJava.value = false
@@ -126,7 +127,7 @@ async function handleJavaFileInput() {
   const filePath = await open()
 
   if (filePath) {
-    let result = await get_jre(filePath.path ?? filePath).catch(handleError)
+    let result = await get_jre(filePath.path ?? filePath)
     if (!result) {
       result = {
         path: filePath.path ?? filePath,

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

@@ -1,12 +1,6 @@
 <template>
   <div class="progress-bar">
-    <div
-      class="progress-bar__fill"
-      :style="{
-        width: `${progress}%`,
-        'background-color': error ? 'var(--color-red)' : 'var(--color-brand)',
-      }"
-    ></div>
+    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
   </div>
 </template>
 
@@ -19,10 +13,6 @@ defineProps({
       return value >= 0 && value <= 100
     },
   },
-  error: {
-    type: Boolean,
-    default: false,
-  },
 })
 </script>
 
@@ -37,6 +27,7 @@ defineProps({
 
 .progress-bar__fill {
   height: 100%;
+  background-color: var(--color-brand);
   transition: width 0.3s;
 }
 </style>

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

@@ -32,33 +32,8 @@ function updateAdPosition() {
 
 <template>
   <div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
-    <a
-      href="https://modrinth.gg?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/modrinth-servers-placeholder-light.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="hidden light-image rounded-[inherit]"
-      />
-      <img
-        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="dark-image rounded-[inherit]"
-      />
-    </a>
+    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
+      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
+    </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.light,
-.light-mode {
-  .dark-image {
-    display: none;
-  }
-
-  .light-image {
-    display: block;
-  }
-}
-</style>

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

@@ -30,7 +30,7 @@ const getInstances = async () => {
 
       return dateB - dateA
     })
-    .slice(0, 3)
+    .slice(0, 4)
 }
 
 await getInstances()

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

@@ -1,303 +0,0 @@
-<template>
-  <ModalWrapper ref="modal" hide-header :closable="false" :on-hide="onHide">
-    <div class="flex flex-col gap-4">
-      <div class="w-[500px]">
-        <div class="font-extrabold text-contrast text-xl">
-          {{ formatMessage(messages.header) }} Modrinth App v{{ update!.version }}
-        </div>
-        <template v-if="!downloadInProgress && !downloadError">
-          <div class="mb-1 leading-tight">{{ formatMessage(messages.bodyVersion) }}</div>
-          <div class="text-sm text-secondary mb-2">
-            {{ formatMessage(messages.downloadSize, { size: formatBytes(updateSize) }) }}
-          </div>
-        </template>
-        <AppearingProgressBar
-          v-if="!downloadError"
-          :max-value="shouldShowProgress ? updateSize || 0 : 0"
-          :current-value="shouldShowProgress ? downloadedBytes : 0"
-          color="green"
-          class="w-full mb-4 mt-2"
-        />
-        <div v-if="downloadError" class="leading-tight">
-          <div class="text-red font-medium mb-4">
-            {{ formatMessage(messages.downloadError) }}
-          </div>
-          <div class="flex flex-wrap gap-2">
-            <ButtonStyled color="brand">
-              <button @click="installUpdateNow">
-                <DownloadIcon />
-                {{ formatMessage(messages.tryAgain) }}
-              </button>
-            </ButtonStyled>
-            <ButtonStyled>
-              <button @click="copyError">
-                <ClipboardCopyIcon />
-                {{
-                  copiedError
-                    ? formatMessage(messages.copiedError)
-                    : formatMessage(messages.copyError)
-                }}
-              </button>
-            </ButtonStyled>
-            <ButtonStyled>
-              <a href="https://support.modrinth.com"><ChatIcon /> Get support</a>
-            </ButtonStyled>
-          </div>
-        </div>
-        <div v-if="!downloadError" class="flex flex-wrap gap-2 w-full">
-          <JoinedButtons
-            :actions="installActions"
-            :disabled="updatingImmediately || downloadInProgress"
-            color="brand"
-          />
-          <div>
-            <ButtonStyled>
-              <button @click="() => openUrl('https://modrinth.com/news/changelog?filter=app')">
-                <ExternalIcon /> {{ formatMessage(messages.changelog) }}
-              </button>
-            </ButtonStyled>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ModalWrapper>
-</template>
-
-<script setup lang="ts">
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { useTemplateRef, ref, computed } from 'vue'
-import { AppearingProgressBar, ButtonStyled, JoinedButtons } from '@modrinth/ui'
-import type { JoinedButtonAction } from '@modrinth/ui'
-import { ExternalIcon, DownloadIcon, RedoIcon, ClipboardCopyIcon, XIcon } from '@modrinth/assets'
-import { enqueueUpdateForInstallation, getUpdateSize } from '@/helpers/utils'
-import { formatBytes } from '@modrinth/utils'
-import { handleError } from '@/store/notifications'
-import { loading_listener } from '@/helpers/events'
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { ChatIcon } from '@/assets/icons'
-
-const emit = defineEmits<{
-  (e: 'updateEnqueuedForLater', version: string | null): Promise<void>
-  (e: 'modalHidden'): void
-}>()
-
-const { formatMessage } = useVIntl()
-const messages = defineMessages({
-  header: {
-    id: 'app.update.modal-header',
-    defaultMessage: 'Update available - ',
-  },
-  copiedError: {
-    id: 'app.update.copied-error',
-    defaultMessage: 'Copied to clipboard!',
-  },
-  bodyVersion: {
-    id: 'app.update.modal-body-version',
-    defaultMessage:
-      'We recommend updating as soon as possible so you can enjoy the latest features, fixes, and improvements.',
-  },
-  downloadSize: {
-    id: 'app.update.download-size',
-    defaultMessage: 'The update is {size}.',
-  },
-  changelog: {
-    id: 'app.update.changelog',
-    defaultMessage: 'View changelog',
-  },
-  restartNow: {
-    id: 'app.update.restart',
-    defaultMessage: 'Update now',
-  },
-  later: {
-    id: 'app.update.later',
-    defaultMessage: 'Update on exit',
-  },
-  downloadError: {
-    id: 'app.update.download-error',
-    defaultMessage:
-      'An error occurred while downloading the update. Please try again later. Contact support if the issue persists.',
-  },
-  copyError: {
-    id: 'app.update.copy-error',
-    defaultMessage: 'Copy error',
-  },
-  tryAgain: {
-    id: 'app.update.try-again',
-    defaultMessage: 'Try again',
-  },
-  hide: {
-    id: 'app.update.hide',
-    defaultMessage: 'Hide update reminder',
-  },
-})
-
-type UpdateData = {
-  rid: number
-  currentVersion: string
-  version: string
-  date?: string
-  body?: string
-  rawJson: Record<string, unknown>
-}
-
-const update = ref<UpdateData>()
-const updateSize = ref<number>()
-
-const updatingImmediately = ref(false)
-const downloadInProgress = ref(false)
-const downloadProgress = ref(0)
-const copiedError = ref(false)
-const downloadError = ref<Error | null>(null)
-
-const enqueuedUpdate = ref<string | null>(null)
-
-const installActions = computed<JoinedButtonAction[]>(() => [
-  {
-    id: 'install-now',
-    label: formatMessage(messages.restartNow),
-    icon: DownloadIcon,
-    action: installUpdateNow,
-    color: 'green',
-  },
-  {
-    id: 'install-later',
-    label: formatMessage(messages.later),
-    icon: RedoIcon,
-    action: updateAtNextExit,
-  },
-  {
-    id: 'hide',
-    label: formatMessage(messages.hide),
-    action: () => {
-      hide()
-      emit('modalHidden')
-    },
-    icon: XIcon,
-  },
-])
-
-const downloadedBytes = computed(() => {
-  return updateSize.value ? Math.round((downloadProgress.value / 100) * updateSize.value) : 0
-})
-
-const shouldShowProgress = computed(() => {
-  return downloadInProgress.value || updatingImmediately.value
-})
-
-const modal = useTemplateRef('modal')
-const isOpen = ref(false)
-
-async function show(newUpdate: UpdateData) {
-  const oldVersion = update.value?.version
-
-  update.value = newUpdate
-  updateSize.value = await getUpdateSize(newUpdate.rid).catch(handleError)
-
-  if (oldVersion !== update.value?.version) {
-    downloadProgress.value = 0
-  }
-
-  modal.value!.show(new MouseEvent('click'))
-  isOpen.value = true
-}
-
-function onHide() {
-  isOpen.value = false
-}
-
-function hide() {
-  modal.value!.hide()
-}
-
-defineExpose({ show, hide, isOpen })
-
-async function copyError() {
-  if (downloadError.value) {
-    copiedError.value = true
-    const errorData = {
-      message: downloadError.value.message,
-      stack: downloadError.value.stack,
-      name: downloadError.value.name,
-      timestamp: new Date().toISOString(),
-      updateVersion: update.value?.version,
-    }
-
-    setTimeout(() => {
-      copiedError.value = false
-    }, 3000)
-
-    try {
-      await navigator.clipboard.writeText(JSON.stringify(errorData, null, 2))
-    } catch (e) {
-      console.error('Failed to copy error to clipboard:', e)
-    }
-  }
-}
-
-// TODO: Migrate to common events.ts helper when events/listeners are refactored
-interface LoadingListenerEvent {
-  event: {
-    type: 'launcher_update'
-    version: string
-  }
-  fraction?: number
-}
-
-loading_listener((event: LoadingListenerEvent) => {
-  if (event.event.type === 'launcher_update') {
-    if (event.event.version === update.value!.version) {
-      downloadProgress.value = (event.fraction ?? 1.0) * 100
-    }
-  }
-})
-
-function installUpdateNow() {
-  updatingImmediately.value = true
-
-  if (enqueuedUpdate.value !== update.value!.version) {
-    downloadUpdate()
-  } else if (!downloadInProgress.value) {
-    // Update already downloaded. Simply close the app
-    getCurrentWindow().close()
-  }
-}
-
-function updateAtNextExit() {
-  enqueuedUpdate.value = update.value!.version
-  emit('updateEnqueuedForLater', update.value!.version)
-
-  downloadUpdate()
-  hide()
-}
-
-async function downloadUpdate() {
-  downloadError.value = null
-  downloadProgress.value = 0
-
-  const versionToDownload = update.value!.version
-
-  downloadInProgress.value = true
-  try {
-    await enqueueUpdateForInstallation(update.value!.rid)
-  } catch (e) {
-    downloadInProgress.value = false
-    downloadError.value = e instanceof Error ? e : new Error(String(e))
-
-    handleError(e)
-
-    enqueuedUpdate.value = null
-    updatingImmediately.value = false
-    await emit('updateEnqueuedForLater', null)
-    return
-  }
-  downloadInProgress.value = false
-
-  if (updatingImmediately.value && update.value!.version === versionToDownload) {
-    await getCurrentWindow().close()
-  }
-}
-</script>
-
-<style scoped lang="scss"></style>

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

@@ -6,9 +6,9 @@ import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { get_max_memory } from '@/helpers/jre'
 import { get } from '@/helpers/settings.ts'
 import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
-import useMemorySlider from '@/composables/useMemorySlider'
 
 const { formatMessage } = useVIntl()
 
@@ -34,7 +34,7 @@ const envVars = ref(
 
 const overrideMemorySettings = ref(!!props.instance.memory)
 const memory = ref(props.instance.memory ?? globalSettings.memory)
-const { maxMemory, snapPoints } = await useMemorySlider()
+const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
 
 const editProfileObject = computed(() => {
   const editProfile: {
@@ -156,8 +156,6 @@ const messages = defineMessages({
       :min="512"
       :max="maxMemory"
       :step="64"
-      :snap-points="snapPoints"
-      :snap-range="512"
       unit="MB"
     />
     <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">

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

@@ -5,7 +5,7 @@ import {
   ShieldIcon,
   SettingsIcon,
   GaugeIcon,
-  PaintbrushIcon,
+  PaintBrushIcon,
   GameIcon,
   CoffeeIcon,
 } from '@modrinth/assets'
@@ -41,7 +41,7 @@ const tabs = [
       id: 'app.settings.tabs.appearance',
       defaultMessage: 'Appearance',
     }),
-    icon: PaintbrushIcon,
+    icon: PaintBrushIcon,
     content: AppearanceSettings,
   },
   {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { ref } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
 import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 import { useTheming } from '@/store/theme.ts'
@@ -11,10 +11,6 @@ const props = defineProps({
     type: String,
     default: null,
   },
-  hideHeader: {
-    type: Boolean,
-    default: false,
-  },
   closable: {
     type: Boolean,
     default: true,
@@ -30,16 +26,16 @@ const props = defineProps({
     default: true,
   },
 })
-const modal = useTemplateRef('modal')
+const modal = ref(null)
 
 defineExpose({
-  show: (e: MouseEvent) => {
+  show: () => {
     hide_ads_window()
-    modal.value?.show(e)
+    modal.value.show()
   },
   hide: () => {
     onModalHide()
-    modal.value?.hide()
+    modal.value.hide()
   },
 })
 
@@ -52,14 +48,7 @@ function onModalHide() {
 </script>
 
 <template>
-  <Modal
-    ref="modal"
-    :header="header"
-    :noblur="!themeStore.advancedRendering"
-    :closable="closable"
-    :hide-header="hideHeader"
-    @hide="onModalHide"
-  >
+  <Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
     <template #title>
       <slot name="title" />
     </template>

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

@@ -56,17 +56,9 @@ watch(
     />
   </div>
 
-  <div class="mt-4 flex items-center justify-between">
-    <div>
-      <h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
-      <p class="m-0 mt-1">Disables the nametag above your player on the skins page.</p>
-    </div>
-    <Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
-  </div>
-
   <div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
     <div>
-      <h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
+      <h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
       <p class="m-0 mt-1">Use system window frame (app restart required).</p>
     </div>
     <Toggle id="native-decorations" v-model="settings.native_decorations" />

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { get, set } from '@/helpers/settings.ts'
 import { ref, watch } from 'vue'
+import { get_max_memory } from '@/helpers/jre'
+import { handleError } from '@/store/notifications'
 import { Slider, Toggle } from '@modrinth/ui'
-import useMemorySlider from '@/composables/useMemorySlider'
 
 const fetchSettings = await get()
 fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
@@ -10,7 +11,7 @@ fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).jo
 
 const settings = ref(fetchSettings)
 
-const { maxMemory, snapPoints } = await useMemorySlider()
+const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
 
 watch(
   settings,
@@ -106,8 +107,6 @@ watch(
       :min="512"
       :max="maxMemory"
       :step="64"
-      :snap-points="snapPoints"
-      :snap-range="512"
       unit="MB"
     />
 

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

@@ -1,413 +0,0 @@
-<template>
-  <UploadSkinModal ref="uploadModal" />
-  <ModalWrapper ref="modal" @on-hide="resetState">
-    <template #title>
-      <span class="text-lg font-extrabold text-contrast">
-        {{ mode === 'edit' ? 'Editing skin' : 'Adding a skin' }}
-      </span>
-    </template>
-
-    <div class="flex flex-col md:flex-row gap-6">
-      <div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
-        <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
-          <SkinPreviewRenderer
-            :variant="variant"
-            :texture-src="previewSkin || ''"
-            :cape-src="selectedCapeTexture"
-            :scale="1.4"
-            :fov="50"
-            :initial-rotation="Math.PI / 8"
-            class="h-full w-full"
-          />
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-4 w-full min-h-[20rem]">
-        <section>
-          <h2 class="text-base font-semibold mb-2">Texture</h2>
-          <Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
-        </section>
-
-        <section>
-          <h2 class="text-base font-semibold mb-2">Arm style</h2>
-          <RadioButtons v-model="variant" :items="['CLASSIC', 'SLIM']">
-            <template #default="{ item }">
-              {{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
-            </template>
-          </RadioButtons>
-        </section>
-
-        <section>
-          <h2 class="text-base font-semibold mb-2">Cape</h2>
-          <div class="flex gap-2">
-            <CapeButton
-              v-if="defaultCape"
-              :id="defaultCape.id"
-              :texture="defaultCape.texture"
-              :name="undefined"
-              :selected="!selectedCape"
-              faded
-              @select="selectCape(undefined)"
-            >
-              <span>Use default cape</span>
-            </CapeButton>
-            <CapeLikeTextButton v-else :highlighted="!selectedCape" @click="selectCape(undefined)">
-              <span>Use default cape</span>
-            </CapeLikeTextButton>
-
-            <CapeButton
-              v-for="cape in visibleCapeList"
-              :id="cape.id"
-              :key="cape.id"
-              :texture="cape.texture"
-              :name="cape.name || 'Cape'"
-              :selected="selectedCape?.id === cape.id"
-              @select="selectCape(cape)"
-            />
-
-            <CapeLikeTextButton
-              v-if="(capes?.length ?? 0) > 2"
-              tooltip="View more capes"
-              @mouseup="openSelectCapeModal"
-            >
-              <template #icon><ChevronRightIcon /></template>
-              <span>More</span>
-            </CapeLikeTextButton>
-          </div>
-        </section>
-      </div>
-    </div>
-
-    <div class="flex gap-2 mt-12">
-      <ButtonStyled color="brand" :disabled="disableSave || isSaving">
-        <button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
-          <SpinnerIcon v-if="isSaving" class="animate-spin" />
-          <CheckIcon v-else-if="mode === 'new'" />
-          <SaveIcon v-else />
-          {{ mode === 'new' ? 'Add skin' : 'Save skin' }}
-        </button>
-      </ButtonStyled>
-      <Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
-    </div>
-  </ModalWrapper>
-
-  <SelectCapeModal
-    ref="selectCapeModal"
-    :capes="capes || []"
-    @select="handleCapeSelected"
-    @cancel="handleCapeCancel"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, useTemplateRef } from 'vue'
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import {
-  SkinPreviewRenderer,
-  Button,
-  RadioButtons,
-  CapeButton,
-  CapeLikeTextButton,
-  ButtonStyled,
-} from '@modrinth/ui'
-import {
-  add_and_equip_custom_skin,
-  remove_custom_skin,
-  unequip_skin,
-  type Skin,
-  type Cape,
-  type SkinModel,
-  get_normalized_skin_texture,
-  determineModelType,
-} from '@/helpers/skins.ts'
-import { handleError } from '@/store/notifications'
-import {
-  UploadIcon,
-  CheckIcon,
-  SaveIcon,
-  XIcon,
-  ChevronRightIcon,
-  SpinnerIcon,
-} from '@modrinth/assets'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-
-const modal = useTemplateRef('modal')
-const selectCapeModal = useTemplateRef('selectCapeModal')
-const mode = ref<'new' | 'edit'>('new')
-const currentSkin = ref<Skin | null>(null)
-const shouldRestoreModal = ref(false)
-const isSaving = ref(false)
-
-const uploadedTextureUrl = ref<string | null>(null)
-const previewSkin = ref<string>('')
-
-const variant = ref<SkinModel>('CLASSIC')
-const selectedCape = ref<Cape | undefined>(undefined)
-const props = defineProps<{ capes?: Cape[]; defaultCape?: Cape }>()
-
-const selectedCapeTexture = computed(() => selectedCape.value?.texture)
-const visibleCapeList = ref<Cape[]>([])
-
-const sortedCapes = computed(() => {
-  return [...(props.capes || [])].sort((a, b) => {
-    const nameA = (a.name || '').toLowerCase()
-    const nameB = (b.name || '').toLowerCase()
-    return nameA.localeCompare(nameB)
-  })
-})
-
-function initVisibleCapeList() {
-  if (!props.capes || props.capes.length === 0) {
-    visibleCapeList.value = []
-    return
-  }
-
-  if (visibleCapeList.value.length === 0) {
-    if (selectedCape.value) {
-      const otherCape = getSortedCapeExcluding(selectedCape.value.id)
-      visibleCapeList.value = otherCape ? [selectedCape.value, otherCape] : [selectedCape.value]
-    } else {
-      visibleCapeList.value = getSortedCapes(2)
-    }
-  }
-}
-
-function getSortedCapes(count: number): Cape[] {
-  if (!sortedCapes.value || sortedCapes.value.length === 0) return []
-  return sortedCapes.value.slice(0, count)
-}
-
-function getSortedCapeExcluding(excludeId: string): Cape | undefined {
-  if (!sortedCapes.value || sortedCapes.value.length <= 1) return undefined
-  return sortedCapes.value.find((cape) => cape.id !== excludeId)
-}
-
-async function loadPreviewSkin() {
-  if (uploadedTextureUrl.value) {
-    previewSkin.value = uploadedTextureUrl.value
-  } else if (currentSkin.value) {
-    try {
-      previewSkin.value = await get_normalized_skin_texture(currentSkin.value)
-    } catch (error) {
-      console.error('Failed to load skin texture:', error)
-      previewSkin.value = '/src/assets/skins/steve.png'
-    }
-  } else {
-    previewSkin.value = '/src/assets/skins/steve.png'
-  }
-}
-
-const hasEdits = computed(() => {
-  if (mode.value !== 'edit') return true
-  if (uploadedTextureUrl.value) return true
-  if (!currentSkin.value) return false
-  if (variant.value !== currentSkin.value.variant) return true
-  if ((selectedCape.value?.id || null) !== (currentSkin.value.cape_id || null)) return true
-  return false
-})
-
-const disableSave = computed(
-  () =>
-    (mode.value === 'new' && !uploadedTextureUrl.value) ||
-    (mode.value === 'edit' && !hasEdits.value),
-)
-
-const saveTooltip = computed(() => {
-  if (isSaving.value) return 'Saving...'
-  if (mode.value === 'new' && !uploadedTextureUrl.value) return 'Upload a skin first!'
-  if (mode.value === 'edit' && !hasEdits.value) return 'Make an edit to the skin first!'
-  return undefined
-})
-
-function resetState() {
-  mode.value = 'new'
-  currentSkin.value = null
-  uploadedTextureUrl.value = null
-  previewSkin.value = ''
-  variant.value = 'CLASSIC'
-  selectedCape.value = undefined
-  visibleCapeList.value = []
-  shouldRestoreModal.value = false
-  isSaving.value = false
-}
-
-async function show(e: MouseEvent, skin?: Skin) {
-  mode.value = skin ? 'edit' : 'new'
-  currentSkin.value = skin ?? null
-  if (skin) {
-    variant.value = skin.variant
-    selectedCape.value = props.capes?.find((c) => c.id === skin.cape_id)
-  } else {
-    variant.value = 'CLASSIC'
-    selectedCape.value = undefined
-  }
-  visibleCapeList.value = []
-  initVisibleCapeList()
-
-  await loadPreviewSkin()
-
-  modal.value?.show(e)
-}
-
-async function showNew(e: MouseEvent, skinTextureUrl: string) {
-  mode.value = 'new'
-  currentSkin.value = null
-  uploadedTextureUrl.value = skinTextureUrl
-  variant.value = await determineModelType(skinTextureUrl)
-  selectedCape.value = undefined
-  visibleCapeList.value = []
-  initVisibleCapeList()
-
-  await loadPreviewSkin()
-
-  modal.value?.show(e)
-}
-
-async function restoreWithNewTexture(skinTextureUrl: string) {
-  uploadedTextureUrl.value = skinTextureUrl
-  await loadPreviewSkin()
-
-  if (shouldRestoreModal.value) {
-    setTimeout(() => {
-      modal.value?.show()
-      shouldRestoreModal.value = false
-    }, 0)
-  }
-}
-
-function hide() {
-  modal.value?.hide()
-  setTimeout(() => resetState(), 250)
-}
-
-function selectCape(cape: Cape | undefined) {
-  if (cape && selectedCape.value?.id !== cape.id) {
-    const isInVisibleList = visibleCapeList.value.some((c) => c.id === cape.id)
-    if (!isInVisibleList && visibleCapeList.value.length > 0) {
-      visibleCapeList.value.splice(0, 1, cape)
-
-      if (visibleCapeList.value.length > 1 && visibleCapeList.value[1].id === cape.id) {
-        const otherCape = getSortedCapeExcluding(cape.id)
-        if (otherCape) {
-          visibleCapeList.value.splice(1, 1, otherCape)
-        }
-      }
-    }
-  }
-  selectedCape.value = cape
-}
-
-function handleCapeSelected(cape: Cape | undefined) {
-  selectCape(cape)
-
-  if (shouldRestoreModal.value) {
-    setTimeout(() => {
-      modal.value?.show()
-      shouldRestoreModal.value = false
-    }, 0)
-  }
-}
-
-function handleCapeCancel() {
-  if (shouldRestoreModal.value) {
-    setTimeout(() => {
-      modal.value?.show()
-      shouldRestoreModal.value = false
-    }, 0)
-  }
-}
-
-function openSelectCapeModal(e: MouseEvent) {
-  if (!selectCapeModal.value) return
-
-  shouldRestoreModal.value = true
-  modal.value?.hide()
-
-  setTimeout(() => {
-    selectCapeModal.value?.show(
-      e,
-      currentSkin.value?.texture_key,
-      selectedCape.value,
-      previewSkin.value,
-      variant.value,
-    )
-  }, 0)
-}
-
-function openUploadSkinModal(e: MouseEvent) {
-  shouldRestoreModal.value = true
-  modal.value?.hide()
-  emit('open-upload-modal', e)
-}
-
-function restoreModal() {
-  if (shouldRestoreModal.value) {
-    setTimeout(() => {
-      const fakeEvent = new MouseEvent('click')
-      modal.value?.show(fakeEvent)
-      shouldRestoreModal.value = false
-    }, 500)
-  }
-}
-
-async function save() {
-  isSaving.value = true
-
-  try {
-    let textureUrl: string
-
-    if (uploadedTextureUrl.value) {
-      textureUrl = uploadedTextureUrl.value
-    } else {
-      textureUrl = currentSkin.value!.texture
-    }
-
-    await unequip_skin()
-
-    const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())
-
-    if (mode.value === 'new') {
-      await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
-      emit('saved')
-    } else {
-      await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
-      await remove_custom_skin(currentSkin.value!)
-      emit('saved')
-    }
-
-    hide()
-  } catch (err) {
-    handleError(err)
-  } finally {
-    isSaving.value = false
-  }
-}
-
-watch([uploadedTextureUrl, currentSkin], async () => {
-  await loadPreviewSkin()
-})
-
-watch(
-  () => props.capes,
-  () => {
-    initVisibleCapeList()
-  },
-  { immediate: true },
-)
-
-const emit = defineEmits<{
-  (event: 'saved'): void
-  (event: 'deleted', skin: Skin): void
-  (event: 'open-upload-modal', mouseEvent: MouseEvent): void
-}>()
-
-defineExpose({
-  show,
-  showNew,
-  restoreWithNewTexture,
-  hide,
-  shouldRestoreModal,
-  restoreModal,
-})
-</script>

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

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

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

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

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import {
   EyeIcon,
@@ -43,7 +42,6 @@ const emit = defineEmits<{
 
 const props = defineProps<{
   instance: GameInstance
-  last_played: Dayjs
 }>()
 
 const loadingModpack = ref(!!props.instance.linked_data)
@@ -149,12 +147,12 @@ onUnmounted(() => {
                 : null
             "
             class="w-fit shrink-0"
-            :class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
+            :class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
           >
-            <template v-if="last_played">
+            <template v-if="instance.last_played">
               {{
                 formatMessage(commonMessages.playedLabel, {
-                  time: formatRelativeTime(last_played.toISOString?.()),
+                  time: formatRelativeTime(instance.last_played.toISOString()),
                 })
               }}
             </template>

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

@@ -84,7 +84,7 @@ async function populateJumpBackIn() {
 
       worldItems.push({
         type: 'world',
-        last_played: dayjs(world.last_played ?? 0),
+        last_played: dayjs(world.last_played),
         world: world,
         instance: instance,
       })
@@ -138,13 +138,13 @@ async function populateJumpBackIn() {
 
     instanceItems.push({
       type: 'instance',
-      last_played: dayjs(instance.last_played ?? 0),
+      last_played: dayjs(instance.last_played),
       instance: instance,
     })
   }
 
   const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
-  items.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
+  items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
   jumpBackInItems.value = items
     .filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
     .slice(0, MAX_JUMP_BACK_IN)
@@ -291,7 +291,7 @@ onUnmounted(() => {
           "
           @stop="() => stopInstance(item.instance.path)"
         />
-        <InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
+        <InstanceItem v-else :instance="item.instance" />
       </template>
     </div>
   </div>

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

@@ -128,14 +128,6 @@ const messages = defineMessages({
     id: 'instance.worlds.game_already_open',
     defaultMessage: 'Instance is already open',
   },
-  noContact: {
-    id: 'instance.worlds.no_contact',
-    defaultMessage: "Server couldn't be contacted",
-  },
-  incompatibleServer: {
-    id: 'instance.worlds.incompatible_server',
-    defaultMessage: 'Server is incompatible',
-  },
   copyAddress: {
     id: 'instance.worlds.copy_address',
     defaultMessage: 'Copy address',
@@ -310,33 +302,39 @@ const messages = defineMessages({
         </template>
       </div>
       <div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-        <ButtonStyled
-          v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-          color="red"
-        >
-          <button @click="emit('stop')">
-            <StopCircleIcon aria-hidden="true" />
-            {{ formatMessage(commonMessages.stopButton) }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-else>
-          <button
-            v-tooltip="
-              !serverStatus
-                ? formatMessage(messages.noContact)
-                : serverIncompatible
-                  ? formatMessage(messages.incompatibleServer)
+        <template v-if="world.type === 'singleplayer' || serverStatus">
+          <ButtonStyled
+            v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+            color="red"
+          >
+            <button @click="emit('stop')">
+              <StopCircleIcon aria-hidden="true" />
+              {{ formatMessage(commonMessages.stopButton) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-else>
+            <button
+              v-tooltip="
+                serverIncompatible
+                  ? 'Server is incompatible'
                   : !supportsQuickPlay
                     ? formatMessage(messages.noQuickPlay)
                     : playingOtherWorld || locked
                       ? formatMessage(messages.gameAlreadyOpen)
                       : null
-            "
-            :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
-            @click="emit('play')"
-          >
-            <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-            <PlayIcon v-else aria-hidden="true" />
+              "
+              :disabled="!supportsQuickPlay || playingOtherWorld || startingInstance"
+              @click="emit('play')"
+            >
+              <SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+              <PlayIcon v-else aria-hidden="true" />
+              {{ formatMessage(commonMessages.playButton) }}
+            </button>
+          </ButtonStyled>
+        </template>
+        <ButtonStyled v-else>
+          <button class="invisible">
+            <PlayIcon aria-hidden="true" />
             {{ formatMessage(commonMessages.playButton) }}
           </button>
         </ButtonStyled>

apps/app-frontend/src/composables/useMemorySlider.js

@@ -1,21 +0,0 @@
-import { ref, computed } from 'vue'
-import { get_max_memory } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
-
-export default async function () {
-  const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
-
-  const snapPoints = computed(() => {
-    let points = []
-    let memory = 2048
-
-    while (memory <= maxMemory.value) {
-      points.push(memory)
-      memory *= 2
-    }
-
-    return points
-  })
-
-  return { maxMemory, snapPoints }
-}

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

@@ -1,12 +1,12 @@
-import { fetch } from '@tauri-apps/plugin-http'
+import { ofetch } from 'ofetch'
 import { handleError } from '@/store/state.js'
 import { getVersion } from '@tauri-apps/api/app'
 
 export const useFetch = async (url, item, isSilent) => {
   try {
     const version = await getVersion()
-    return await fetch(url, {
-      method: 'GET',
+
+    return await ofetch(url, {
       headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
     })
   } catch (err) {

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

@@ -36,8 +36,8 @@ export async function get_jre(path) {
 
 // Tests JRE version by running 'java -version' on it.
 // Returns true if the version is valid, and matches given (after extraction)
-export async function test_jre(path, majorVersion) {
-  return await invoke('plugin:jre|jre_test_jre', { path, majorVersion })
+export async function test_jre(path, majorVersion, minorVersion) {
+  return await invoke('plugin:jre|jre_test_jre', { path, majorVersion, minorVersion })
 }
 
 // Automatically installs specified java version

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

@@ -1,446 +0,0 @@
-import * as THREE from 'three'
-import type { Skin, Cape } from '../skins'
-import { get_normalized_skin_texture, determineModelType } from '../skins'
-import { reactive } from 'vue'
-import {
-  setupSkinModel,
-  disposeCaches,
-  loadTexture,
-  applyCapeTexture,
-  createTransparentTexture,
-} from '@modrinth/utils'
-import { skinPreviewStorage } from '../storage/skin-preview-storage'
-import { headStorage } from '../storage/head-storage'
-import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
-
-export interface RenderResult {
-  forwards: string
-  backwards: string
-}
-
-export interface RawRenderResult {
-  forwards: Blob
-  backwards: Blob
-}
-
-class BatchSkinRenderer {
-  private renderer: THREE.WebGLRenderer | null = null
-  private scene: THREE.Scene | null = null
-  private camera: THREE.PerspectiveCamera | null = null
-  private currentModel: THREE.Group | null = null
-  private readonly width: number
-  private readonly height: number
-
-  constructor(width: number = 360, height: number = 504) {
-    this.width = width
-    this.height = height
-  }
-
-  private initializeRenderer(): void {
-    if (this.renderer) return
-
-    const canvas = document.createElement('canvas')
-    canvas.width = this.width
-    canvas.height = this.height
-
-    this.renderer = new THREE.WebGLRenderer({
-      canvas: canvas,
-      antialias: true,
-      alpha: true,
-      preserveDrawingBuffer: true,
-    })
-
-    this.renderer.outputColorSpace = THREE.SRGBColorSpace
-    this.renderer.toneMapping = THREE.NoToneMapping
-    this.renderer.toneMappingExposure = 10.0
-    this.renderer.setClearColor(0x000000, 0)
-    this.renderer.setSize(this.width, this.height)
-
-    this.scene = new THREE.Scene()
-    this.camera = new THREE.PerspectiveCamera(20, this.width / this.height, 0.4, 1000)
-
-    const ambientLight = new THREE.AmbientLight(0xffffff, 2)
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
-    directionalLight.castShadow = true
-    directionalLight.position.set(2, 4, 3)
-    this.scene.add(ambientLight)
-    this.scene.add(directionalLight)
-  }
-
-  public async renderSkin(
-    textureUrl: string,
-    modelUrl: string,
-    capeUrl?: string,
-  ): Promise<RawRenderResult> {
-    this.initializeRenderer()
-
-    this.clearScene()
-
-    await this.setupModel(modelUrl, textureUrl, capeUrl)
-
-    const headPart = this.currentModel!.getObjectByName('Head')
-    let lookAtTarget: [number, number, number]
-
-    if (headPart) {
-      const headPosition = new THREE.Vector3()
-      headPart.getWorldPosition(headPosition)
-      lookAtTarget = [headPosition.x, headPosition.y - 0.3, headPosition.z]
-    } else {
-      throw new Error("Failed to find 'Head' object in model.")
-    }
-
-    const frontCameraPos: [number, number, number] = [-1.3, 1, 6.3]
-    const backCameraPos: [number, number, number] = [-1.3, 1, -2.5]
-
-    const forwards = await this.renderView(frontCameraPos, lookAtTarget)
-    const backwards = await this.renderView(backCameraPos, lookAtTarget)
-
-    return { forwards, backwards }
-  }
-
-  private async renderView(
-    cameraPosition: [number, number, number],
-    lookAtPosition: [number, number, number],
-  ): Promise<Blob> {
-    if (!this.camera || !this.renderer || !this.scene) {
-      throw new Error('Renderer not initialized')
-    }
-
-    this.camera.position.set(...cameraPosition)
-    this.camera.lookAt(...lookAtPosition)
-
-    this.renderer.render(this.scene, this.camera)
-
-    const dataUrl = this.renderer.domElement.toDataURL('image/webp', 0.9)
-    const response = await fetch(dataUrl)
-    return await response.blob()
-  }
-
-  private async setupModel(modelUrl: string, textureUrl: string, capeUrl?: string): Promise<void> {
-    if (!this.scene) {
-      throw new Error('Renderer not initialized')
-    }
-
-    const { model } = await setupSkinModel(modelUrl, textureUrl)
-
-    if (capeUrl) {
-      const capeTexture = await loadTexture(capeUrl)
-      applyCapeTexture(model, capeTexture)
-    } else {
-      const transparentTexture = createTransparentTexture()
-      applyCapeTexture(model, null, transparentTexture)
-    }
-
-    const group = new THREE.Group()
-    group.add(model)
-    group.position.set(0, 0.3, 1.95)
-    group.scale.set(0.8, 0.8, 0.8)
-
-    this.scene.add(group)
-    this.currentModel = group
-  }
-
-  private clearScene(): void {
-    if (!this.scene) return
-
-    while (this.scene.children.length > 0) {
-      const child = this.scene.children[0]
-      this.scene.remove(child)
-
-      if (child instanceof THREE.Mesh) {
-        if (child.geometry) child.geometry.dispose()
-        if (child.material) {
-          if (Array.isArray(child.material)) {
-            child.material.forEach((material) => material.dispose())
-          } else {
-            child.material.dispose()
-          }
-        }
-      }
-    }
-
-    const ambientLight = new THREE.AmbientLight(0xffffff, 2)
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
-    directionalLight.castShadow = true
-    directionalLight.position.set(2, 4, 3)
-    this.scene.add(ambientLight)
-    this.scene.add(directionalLight)
-
-    this.currentModel = null
-  }
-
-  public dispose(): void {
-    if (this.renderer) {
-      this.renderer.dispose()
-    }
-    disposeCaches()
-  }
-}
-
-function getModelUrlForVariant(variant: string): string {
-  switch (variant) {
-    case 'SLIM':
-      return SlimPlayerModel
-    case 'CLASSIC':
-    case 'UNKNOWN':
-    default:
-      return ClassicPlayerModel
-  }
-}
-
-export const skinBlobUrlMap = reactive(new Map<string, RenderResult>())
-export const headBlobUrlMap = reactive(new Map<string, string>())
-const DEBUG_MODE = false
-
-let sharedRenderer: BatchSkinRenderer | null = null
-function getSharedRenderer(): BatchSkinRenderer {
-  if (!sharedRenderer) {
-    sharedRenderer = new BatchSkinRenderer()
-  }
-  return sharedRenderer
-}
-
-export function disposeSharedRenderer(): void {
-  if (sharedRenderer) {
-    sharedRenderer.dispose()
-    sharedRenderer = null
-  }
-}
-
-export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
-  const validKeys = new Set<string>()
-  const validHeadKeys = new Set<string>()
-
-  for (const skin of skins) {
-    const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-    const headKey = `${skin.texture_key}-head`
-    validKeys.add(key)
-    validHeadKeys.add(headKey)
-  }
-
-  try {
-    await skinPreviewStorage.cleanupInvalidKeys(validKeys)
-    await headStorage.cleanupInvalidKeys(validHeadKeys)
-  } catch (error) {
-    console.warn('Failed to cleanup unused skin previews:', error)
-  }
-}
-
-export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-
-    img.onload = () => {
-      try {
-        const sourceCanvas = document.createElement('canvas')
-        const sourceCtx = sourceCanvas.getContext('2d')
-
-        if (!sourceCtx) {
-          throw new Error('Could not get 2D context from source canvas')
-        }
-
-        sourceCanvas.width = img.width
-        sourceCanvas.height = img.height
-
-        sourceCtx.drawImage(img, 0, 0)
-
-        const outputCanvas = document.createElement('canvas')
-        const outputCtx = outputCanvas.getContext('2d')
-
-        if (!outputCtx) {
-          throw new Error('Could not get 2D context from output canvas')
-        }
-
-        outputCanvas.width = size
-        outputCanvas.height = size
-
-        outputCtx.imageSmoothingEnabled = false
-
-        const headImageData = sourceCtx.getImageData(8, 8, 8, 8)
-
-        const headCanvas = document.createElement('canvas')
-        const headCtx = headCanvas.getContext('2d')
-
-        if (!headCtx) {
-          throw new Error('Could not get 2D context from head canvas')
-        }
-
-        headCanvas.width = 8
-        headCanvas.height = 8
-        headCtx.putImageData(headImageData, 0, 0)
-
-        outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size)
-
-        const hatImageData = sourceCtx.getImageData(40, 8, 8, 8)
-
-        const hatCanvas = document.createElement('canvas')
-        const hatCtx = hatCanvas.getContext('2d')
-
-        if (!hatCtx) {
-          throw new Error('Could not get 2D context from hat canvas')
-        }
-
-        hatCanvas.width = 8
-        hatCanvas.height = 8
-        hatCtx.putImageData(hatImageData, 0, 0)
-
-        const hatPixels = hatImageData.data
-        let hasHat = false
-
-        for (let i = 3; i < hatPixels.length; i += 4) {
-          if (hatPixels[i] > 0) {
-            hasHat = true
-            break
-          }
-        }
-
-        if (hasHat) {
-          outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
-        }
-
-        outputCanvas.toBlob(
-          (blob) => {
-            if (blob) {
-              resolve(blob)
-            } else {
-              reject(new Error('Failed to create blob from canvas'))
-            }
-          },
-          'image/webp',
-          0.9,
-        )
-      } catch (error) {
-        reject(error)
-      }
-    }
-
-    img.onerror = () => {
-      reject(new Error('Failed to load skin texture image'))
-    }
-
-    img.src = skinUrl
-  })
-}
-
-async function generateHeadRender(skin: Skin): Promise<string> {
-  const headKey = `${skin.texture_key}-head`
-
-  if (headBlobUrlMap.has(headKey)) {
-    if (DEBUG_MODE) {
-      const url = headBlobUrlMap.get(headKey)!
-      URL.revokeObjectURL(url)
-      headBlobUrlMap.delete(headKey)
-    } else {
-      return headBlobUrlMap.get(headKey)!
-    }
-  }
-
-  const skinUrl = await get_normalized_skin_texture(skin)
-  const headBlob = await generatePlayerHeadBlob(skinUrl, 64)
-  const headUrl = URL.createObjectURL(headBlob)
-
-  headBlobUrlMap.set(headKey, headUrl)
-
-  try {
-    await headStorage.store(headKey, headBlob)
-  } catch (error) {
-    console.warn('Failed to store head render in persistent storage:', error)
-  }
-
-  return headUrl
-}
-
-export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
-  return await generateHeadRender(skin)
-}
-
-export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
-  try {
-    const skinKeys = skins.map(
-      (skin) => `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`,
-    )
-    const headKeys = skins.map((skin) => `${skin.texture_key}-head`)
-
-    const [cachedSkinPreviews, cachedHeadPreviews] = await Promise.all([
-      skinPreviewStorage.batchRetrieve(skinKeys),
-      headStorage.batchRetrieve(headKeys),
-    ])
-
-    for (let i = 0; i < skins.length; i++) {
-      const skinKey = skinKeys[i]
-      const headKey = headKeys[i]
-
-      const rawCached = cachedSkinPreviews[skinKey]
-      if (rawCached) {
-        const cached: RenderResult = {
-          forwards: URL.createObjectURL(rawCached.forwards),
-          backwards: URL.createObjectURL(rawCached.backwards),
-        }
-        skinBlobUrlMap.set(skinKey, cached)
-      }
-
-      const cachedHead = cachedHeadPreviews[headKey]
-      if (cachedHead) {
-        headBlobUrlMap.set(headKey, URL.createObjectURL(cachedHead))
-      }
-    }
-
-    for (const skin of skins) {
-      const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-
-      if (skinBlobUrlMap.has(key)) {
-        if (DEBUG_MODE) {
-          const result = skinBlobUrlMap.get(key)!
-          URL.revokeObjectURL(result.forwards)
-          URL.revokeObjectURL(result.backwards)
-          skinBlobUrlMap.delete(key)
-        } else continue
-      }
-
-      const renderer = getSharedRenderer()
-
-      let variant = skin.variant
-      if (variant === 'UNKNOWN') {
-        try {
-          variant = await determineModelType(skin.texture)
-        } catch (error) {
-          console.error(`Failed to determine model type for skin ${key}:`, error)
-          variant = 'CLASSIC'
-        }
-      }
-
-      const modelUrl = getModelUrlForVariant(variant)
-      const cape: Cape | undefined = capes.find((_cape) => _cape.id === skin.cape_id)
-      const rawRenderResult = await renderer.renderSkin(
-        await get_normalized_skin_texture(skin),
-        modelUrl,
-        cape?.texture,
-      )
-
-      const renderResult: RenderResult = {
-        forwards: URL.createObjectURL(rawRenderResult.forwards),
-        backwards: URL.createObjectURL(rawRenderResult.backwards),
-      }
-
-      skinBlobUrlMap.set(key, renderResult)
-
-      try {
-        await skinPreviewStorage.store(key, rawRenderResult)
-      } catch (error) {
-        console.warn('Failed to store skin preview in persistent storage:', error)
-      }
-
-      const headKey = `${skin.texture_key}-head`
-      if (!headBlobUrlMap.has(headKey)) {
-        await generateHeadRender(skin)
-      }
-    }
-  } finally {
-    disposeSharedRenderer()
-    await cleanupUnusedPreviews(skins)
-
-    await skinPreviewStorage.debugCalculateStorage()
-    await headStorage.debugCalculateStorage()
-  }
-}

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

@@ -37,7 +37,6 @@ export type AppSettings = {
   theme: ColorTheme
   default_page: 'home' | 'library'
   collapsed_navigation: boolean
-  hide_nametag_skins_page: boolean
   advanced_rendering: boolean
   native_decorations: boolean
   toggle_sidebar: boolean
@@ -62,9 +61,6 @@ export type AppSettings = {
 
   developer_mode: boolean
   feature_flags: Record<FeatureFlag, boolean>
-
-  skipped_update: string | null
-  pending_update_toast_for_version: string | null
 }
 
 // Get full settings object

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

@@ -1,164 +0,0 @@
-import { invoke } from '@tauri-apps/api/core'
-import { handleError } from '@/store/notifications'
-import { arrayBufferToBase64 } from '@modrinth/utils'
-
-export interface Cape {
-  id: string
-  name: string
-  texture: string
-  is_default: boolean
-  is_equipped: boolean
-}
-
-export type SkinModel = 'CLASSIC' | 'SLIM' | 'UNKNOWN'
-export type SkinSource = 'default' | 'custom_external' | 'custom'
-
-export interface Skin {
-  texture_key: string
-  name?: string
-  variant: SkinModel
-  cape_id?: string
-  texture: string
-  source: SkinSource
-  is_equipped: boolean
-}
-
-export const DEFAULT_MODEL_SORTING = ['Steve', 'Alex'] as string[]
-
-export const DEFAULT_MODELS: Record<string, SkinModel> = {
-  Steve: 'CLASSIC',
-  Alex: 'SLIM',
-  Zuri: 'CLASSIC',
-  Sunny: 'CLASSIC',
-  Noor: 'SLIM',
-  Makena: 'SLIM',
-  Kai: 'CLASSIC',
-  Efe: 'SLIM',
-  Ari: 'CLASSIC',
-}
-
-export function filterSavedSkins(list: Skin[]) {
-  const customSkins = list.filter((s) => s.source !== 'default')
-  fixUnknownSkins(customSkins).catch(handleError)
-  return customSkins
-}
-
-export async function determineModelType(texture: string): Promise<'SLIM' | 'CLASSIC'> {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement('canvas')
-    const context = canvas.getContext('2d')
-
-    if (!context) {
-      return reject(new Error('Failed to create canvas rendering context.'))
-    }
-
-    const image = new Image()
-    image.crossOrigin = 'anonymous'
-    image.src = texture
-
-    image.onload = () => {
-      canvas.width = image.width
-      canvas.height = image.height
-
-      context.drawImage(image, 0, 0)
-
-      const armX = 54
-      const armY = 20
-      const armWidth = 2
-      const armHeight = 12
-      const imageData = context.getImageData(armX, armY, armWidth, armHeight).data
-      for (let alphaIndex = 3; alphaIndex < imageData.length; alphaIndex += 4) {
-        if (imageData[alphaIndex] !== 0) {
-          resolve('CLASSIC')
-          return
-        }
-      }
-
-      canvas.remove()
-      resolve('SLIM')
-    }
-
-    image.onerror = () => {
-      canvas.remove()
-      reject(new Error('Failed to load the image.'))
-    }
-  })
-}
-
-export async function fixUnknownSkins(list: Skin[]) {
-  const unknownSkins = list.filter((s) => s.variant === 'UNKNOWN')
-  for (const unknownSkin of unknownSkins) {
-    unknownSkin.variant = await determineModelType(unknownSkin.texture)
-  }
-}
-
-export function filterDefaultSkins(list: Skin[]) {
-  return list
-    .filter(
-      (s) =>
-        s.source === 'default' &&
-        (!s.name || !(s.name in DEFAULT_MODELS) || s.variant === DEFAULT_MODELS[s.name]),
-    )
-    .sort((a, b) => {
-      const aIndex = a.name ? DEFAULT_MODEL_SORTING.indexOf(a.name) : -1
-      const bIndex = b.name ? DEFAULT_MODEL_SORTING.indexOf(b.name) : -1
-      return (aIndex === -1 ? Infinity : aIndex) - (bIndex === -1 ? Infinity : bIndex)
-    })
-}
-
-export async function get_available_capes(): Promise<Cape[]> {
-  return invoke('plugin:minecraft-skins|get_available_capes', {})
-}
-
-export async function get_available_skins(): Promise<Skin[]> {
-  return invoke('plugin:minecraft-skins|get_available_skins', {})
-}
-
-export async function add_and_equip_custom_skin(
-  textureBlob: Uint8Array,
-  variant: SkinModel,
-  capeOverride?: Cape,
-): Promise<void> {
-  await invoke('plugin:minecraft-skins|add_and_equip_custom_skin', {
-    textureBlob,
-    variant,
-    capeOverride,
-  })
-}
-
-export async function set_default_cape(cape?: Cape): Promise<void> {
-  await invoke('plugin:minecraft-skins|set_default_cape', {
-    cape,
-  })
-}
-
-export async function equip_skin(skin: Skin): Promise<void> {
-  await invoke('plugin:minecraft-skins|equip_skin', {
-    skin,
-  })
-}
-
-export async function remove_custom_skin(skin: Skin): Promise<void> {
-  await invoke('plugin:minecraft-skins|remove_custom_skin', {
-    skin,
-  })
-}
-
-export async function get_normalized_skin_texture(skin: Skin): Promise<string> {
-  const data = await normalize_skin_texture(skin.texture)
-  const base64 = arrayBufferToBase64(data)
-  return `data:image/png;base64,${base64}`
-}
-
-export async function normalize_skin_texture(texture: Uint8Array | string): Promise<Uint8Array> {
-  return await invoke('plugin:minecraft-skins|normalize_skin_texture', { texture })
-}
-
-export async function unequip_skin(): Promise<void> {
-  await invoke('plugin:minecraft-skins|unequip_skin')
-}
-
-export async function get_dragged_skin_data(path: string): Promise<Uint8Array> {
-  const data = await invoke('plugin:minecraft-skins|get_dragged_skin_data', { path })
-  return new Uint8Array(data)
-}

apps/app-frontend/src/helpers/storage/head-storage.ts

@@ -1,229 +0,0 @@
-interface StoredHead {
-  blob: Blob
-  timestamp: number
-}
-
-export class HeadStorage {
-  private dbName = 'head-storage'
-  private version = 1
-  private db: IDBDatabase | null = null
-
-  async init(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const request = indexedDB.open(this.dbName, this.version)
-
-      request.onerror = () => reject(request.error)
-      request.onsuccess = () => {
-        this.db = request.result
-        resolve()
-      }
-
-      request.onupgradeneeded = () => {
-        const db = request.result
-        if (!db.objectStoreNames.contains('heads')) {
-          db.createObjectStore('heads')
-        }
-      }
-    })
-  }
-
-  async store(key: string, blob: Blob): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-
-    const storedHead: StoredHead = {
-      blob,
-      timestamp: Date.now(),
-    }
-
-    return new Promise((resolve, reject) => {
-      const request = store.put(storedHead, key)
-
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async retrieve(key: string): Promise<string | null> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-
-    return new Promise((resolve, reject) => {
-      const request = store.get(key)
-
-      request.onsuccess = () => {
-        const result = request.result as StoredHead | undefined
-
-        if (!result) {
-          resolve(null)
-          return
-        }
-
-        const url = URL.createObjectURL(result.blob)
-        resolve(url)
-      }
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async batchRetrieve(keys: string[]): Promise<Record<string, Blob | null>> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-    const results: Record<string, Blob | null> = {}
-
-    return new Promise((resolve, _reject) => {
-      let completedRequests = 0
-
-      if (keys.length === 0) {
-        resolve(results)
-        return
-      }
-
-      for (const key of keys) {
-        const request = store.get(key)
-
-        request.onsuccess = () => {
-          const result = request.result as StoredHead | undefined
-
-          if (result) {
-            results[key] = result.blob
-          } else {
-            results[key] = null
-          }
-
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-
-        request.onerror = () => {
-          results[key] = null
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-      }
-    })
-  }
-
-  async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-    let deletedCount = 0
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-
-          if (!validKeys.has(key)) {
-            const deleteRequest = cursor.delete()
-            deleteRequest.onsuccess = () => {
-              deletedCount++
-            }
-            deleteRequest.onerror = () => {
-              console.warn('Failed to delete invalid head entry:', key)
-            }
-          }
-
-          cursor.continue()
-        } else {
-          resolve(deletedCount)
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async debugCalculateStorage(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readonly')
-    const store = transaction.objectStore('heads')
-
-    let totalSize = 0
-    let count = 0
-    const entries: Array<{ key: string; size: number }> = []
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-          const value = cursor.value as StoredHead
-
-          const entrySize = value.blob.size
-          totalSize += entrySize
-          count++
-
-          entries.push({
-            key,
-            size: entrySize,
-          })
-
-          cursor.continue()
-        } else {
-          console.group('🗄️ Head Storage Debug Info')
-          console.log(`Total entries: ${count}`)
-          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
-          console.log(
-            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
-          )
-
-          if (entries.length > 0) {
-            const sortedEntries = entries.sort((a, b) => b.size - a.size)
-            console.log(
-              'Largest entry:',
-              sortedEntries[0].key,
-              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
-            )
-            console.log(
-              'Smallest entry:',
-              sortedEntries[sortedEntries.length - 1].key,
-              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
-            )
-          }
-
-          console.groupEnd()
-          resolve()
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async clearAll(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['heads'], 'readwrite')
-    const store = transaction.objectStore('heads')
-
-    return new Promise((resolve, reject) => {
-      const request = store.clear()
-
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(request.error)
-    })
-  }
-}
-
-export const headStorage = new HeadStorage()

apps/app-frontend/src/helpers/storage/skin-preview-storage.ts

@@ -1,218 +0,0 @@
-import type { RawRenderResult } from '../rendering/batch-skin-renderer'
-
-interface StoredPreview {
-  forwards: Blob
-  backwards: Blob
-  timestamp: number
-}
-
-export class SkinPreviewStorage {
-  private dbName = 'skin-previews'
-  private version = 1
-  private db: IDBDatabase | null = null
-
-  async init(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const request = indexedDB.open(this.dbName, this.version)
-
-      request.onerror = () => reject(request.error)
-      request.onsuccess = () => {
-        this.db = request.result
-        resolve()
-      }
-
-      request.onupgradeneeded = () => {
-        const db = request.result
-        if (!db.objectStoreNames.contains('previews')) {
-          db.createObjectStore('previews')
-        }
-      }
-    })
-  }
-
-  async store(key: string, result: RawRenderResult): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readwrite')
-    const store = transaction.objectStore('previews')
-
-    const storedPreview: StoredPreview = {
-      forwards: result.forwards,
-      backwards: result.backwards,
-      timestamp: Date.now(),
-    }
-
-    return new Promise((resolve, reject) => {
-      const request = store.put(storedPreview, key)
-
-      request.onsuccess = () => resolve()
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async retrieve(key: string): Promise<RawRenderResult | null> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readonly')
-    const store = transaction.objectStore('previews')
-
-    return new Promise((resolve, reject) => {
-      const request = store.get(key)
-
-      request.onsuccess = () => {
-        const result = request.result as StoredPreview | undefined
-
-        if (!result) {
-          resolve(null)
-          return
-        }
-
-        resolve({ forwards: result.forwards, backwards: result.backwards })
-      }
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async batchRetrieve(keys: string[]): Promise<Record<string, RawRenderResult | null>> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readonly')
-    const store = transaction.objectStore('previews')
-    const results: Record<string, RawRenderResult | null> = {}
-
-    return new Promise((resolve, _reject) => {
-      let completedRequests = 0
-
-      if (keys.length === 0) {
-        resolve(results)
-        return
-      }
-
-      for (const key of keys) {
-        const request = store.get(key)
-
-        request.onsuccess = () => {
-          const result = request.result as StoredPreview | undefined
-
-          if (result) {
-            results[key] = { forwards: result.forwards, backwards: result.backwards }
-          } else {
-            results[key] = null
-          }
-
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-
-        request.onerror = () => {
-          results[key] = null
-          completedRequests++
-          if (completedRequests === keys.length) {
-            resolve(results)
-          }
-        }
-      }
-    })
-  }
-
-  async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readwrite')
-    const store = transaction.objectStore('previews')
-    let deletedCount = 0
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-
-          if (!validKeys.has(key)) {
-            const deleteRequest = cursor.delete()
-            deleteRequest.onsuccess = () => {
-              deletedCount++
-            }
-            deleteRequest.onerror = () => {
-              console.warn('Failed to delete invalid entry:', key)
-            }
-          }
-
-          cursor.continue()
-        } else {
-          resolve(deletedCount)
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-
-  async debugCalculateStorage(): Promise<void> {
-    if (!this.db) await this.init()
-
-    const transaction = this.db!.transaction(['previews'], 'readonly')
-    const store = transaction.objectStore('previews')
-
-    let totalSize = 0
-    let count = 0
-    const entries: Array<{ key: string; size: number }> = []
-
-    return new Promise((resolve, reject) => {
-      const request = store.openCursor()
-
-      request.onsuccess = (event) => {
-        const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
-
-        if (cursor) {
-          const key = cursor.primaryKey as string
-          const value = cursor.value as StoredPreview
-
-          const entrySize = value.forwards.size + value.backwards.size
-          totalSize += entrySize
-          count++
-
-          entries.push({
-            key,
-            size: entrySize,
-          })
-
-          cursor.continue()
-        } else {
-          console.group('🗄️ Skin Preview Storage Debug Info')
-          console.log(`Total entries: ${count}`)
-          console.log(`Total size: ${(totalSize / 1024 / 1024).toFixed(2)} MB`)
-          console.log(
-            `Average size per entry: ${count > 0 ? (totalSize / count / 1024).toFixed(2) : 0} KB`,
-          )
-
-          if (entries.length > 0) {
-            const sortedEntries = entries.sort((a, b) => b.size - a.size)
-            console.log(
-              'Largest entry:',
-              sortedEntries[0].key,
-              '(' + (sortedEntries[0].size / 1024).toFixed(2) + ' KB)',
-            )
-            console.log(
-              'Smallest entry:',
-              sortedEntries[sortedEntries.length - 1].key,
-              '(' + (sortedEntries[sortedEntries.length - 1].size / 1024).toFixed(2) + ' KB)',
-            )
-          }
-
-          console.groupEnd()
-          resolve()
-        }
-      }
-
-      request.onerror = () => reject(request.error)
-    })
-  }
-}
-
-export const skinPreviewStorage = new SkinPreviewStorage()

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

@@ -5,22 +5,6 @@ export async function isDev() {
   return await invoke('is_dev')
 }
 
-export async function areUpdatesEnabled() {
-  return await invoke('are_updates_enabled')
-}
-
-export async function getUpdateSize(updateRid) {
-  return await invoke('get_update_size', { rid: updateRid })
-}
-
-export async function enqueueUpdateForInstallation(updateRid) {
-  return await invoke('enqueue_update_for_installation', { rid: updateRid })
-}
-
-export async function removeEnqueuedUpdate() {
-  return await invoke('remove_enqueued_update')
-}
-
 // One of 'Windows', 'Linux', 'MacOS'
 export async function getOS() {
   return await invoke('plugin:utils|get_os')
@@ -53,6 +37,13 @@ export async function restartApp() {
   return await invoke('restart_app')
 }
 
+/**
+ * @deprecated This method is no longer needed, and just returns its parameter
+ */
+export function sanitizePotentialFileUrl(url) {
+  return url
+}
+
 export const releaseColor = (releaseType) => {
   switch (releaseType) {
     case 'release':

apps/app-frontend/src/locales/en-US/index.json

@@ -20,45 +20,6 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
-  "app.update.changelog": {
-    "message": "View changelog"
-  },
-  "app.update.complete-toast.text": {
-    "message": "Click here to view the changelog."
-  },
-  "app.update.complete-toast.title": {
-    "message": "Version {version} was successfully installed!"
-  },
-  "app.update.copied-error": {
-    "message": "Copied to clipboard!"
-  },
-  "app.update.copy-error": {
-    "message": "Copy error"
-  },
-  "app.update.download-error": {
-    "message": "An error occurred while downloading the update. Please try again later. Contact support if the issue persists."
-  },
-  "app.update.download-size": {
-    "message": "The update is {size}."
-  },
-  "app.update.hide": {
-    "message": "Hide update reminder"
-  },
-  "app.update.later": {
-    "message": "Update on exit"
-  },
-  "app.update.modal-body-version": {
-    "message": "We recommend updating as soon as possible so you can enjoy the latest features, fixes, and improvements."
-  },
-  "app.update.modal-header": {
-    "message": "Update available - "
-  },
-  "app.update.restart": {
-    "message": "Update now"
-  },
-  "app.update.try-again": {
-    "message": "Try again"
-  },
   "instance.add-server.add-and-play": {
     "message": "Add and play"
   },
@@ -416,12 +377,6 @@
   "instance.worlds.hardcore": {
     "message": "Hardcore mode"
   },
-  "instance.worlds.incompatible_server": {
-    "message": "Server is incompatible"
-  },
-  "instance.worlds.no_contact": {
-    "message": "Server couldn't be contacted"
-  },
   "instance.worlds.no_quick_play": {
     "message": "You can only jump straight into worlds on Minecraft 1.20+"
   },

apps/app-frontend/src/pages/Browse.vue

@@ -220,7 +220,6 @@ async function refreshSearch() {
     }
   }
   results.value = rawResults.result
-  currentPage.value = 1
 
   const persistentParams: LocationQuery = {}
 
@@ -266,7 +265,6 @@ async function onSearchChangeToTop() {
 
 function clearSearch() {
   query.value = ''
-  currentPage.value = 1
 }
 
 watch(

apps/app-frontend/src/pages/Index.vue

@@ -10,7 +10,6 @@ import dayjs from 'dayjs'
 import { get_search_results } from '@/helpers/cache.js'
 import type { SearchResult } from '@modrinth/utils'
 import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
-import type { GameInstance } from '@/helpers/types'
 
 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -83,15 +82,13 @@ async function refreshFeaturedProjects() {
 await fetchInstances()
 await refreshFeaturedProjects()
 
-const unlistenProfile = await profile_listener(
-  async (e: { event: string; profile_path_id: string }) => {
-    await fetchInstances()
+const unlistenProfile = await profile_listener(async (e) => {
+  await fetchInstances()
 
-    if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
-      await refreshFeaturedProjects()
-    }
-  },
-)
+  if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
+    await refreshFeaturedProjects()
+  }
+})
 
 onUnmounted(() => {
   unlistenProfile()
@@ -100,8 +97,8 @@ onUnmounted(() => {
 
 <template>
   <div class="p-6 flex flex-col gap-2">
-    <h1 v-if="recentInstances?.length > 0" class="m-0 text-2xl font-extrabold">Welcome back!</h1>
-    <h1 v-else class="m-0 text-2xl font-extrabold">Welcome to Modrinth App!</h1>
+    <h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
+    <h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
     <RecentWorldsList :recent-instances="recentInstances" />
     <RowDisplay
       v-if="hasFeaturedProjects"

apps/app-frontend/src/pages/Skins.vue

@@ -1,521 +0,0 @@
-<script setup lang="ts">
-import {
-  EditIcon,
-  ExcitedRinthbot,
-  LogInIcon,
-  PlusIcon,
-  SpinnerIcon,
-  TrashIcon,
-  UpdatedIcon,
-} from '@modrinth/assets'
-import {
-  Button,
-  ButtonStyled,
-  ConfirmModal,
-  SkinButton,
-  SkinLikeTextButton,
-  SkinPreviewRenderer,
-} from '@modrinth/ui'
-import { computedAsync } from '@vueuse/core'
-import type { Ref } from 'vue'
-import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
-import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
-import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
-import { handleError, useNotifications } from '@/store/notifications'
-import type { Cape, Skin } from '@/helpers/skins.ts'
-import {
-  normalize_skin_texture,
-  equip_skin,
-  filterDefaultSkins,
-  filterSavedSkins,
-  get_available_capes,
-  get_available_skins,
-  get_normalized_skin_texture,
-  remove_custom_skin,
-  set_default_cape,
-} from '@/helpers/skins.ts'
-import { get as getSettings } from '@/helpers/settings.ts'
-import { get_default_user, login as login_flow, users } from '@/helpers/auth'
-import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { generateSkinPreviews, skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { handleSevereError } from '@/store/error'
-import { trackEvent } from '@/helpers/analytics'
-import type AccountsCard from '@/components/ui/AccountsCard.vue'
-import { arrayBufferToBase64 } from '@modrinth/utils'
-const editSkinModal = useTemplateRef('editSkinModal')
-const selectCapeModal = useTemplateRef('selectCapeModal')
-const uploadSkinModal = useTemplateRef('uploadSkinModal')
-
-const notifications = useNotifications()
-
-const settings = ref(await getSettings())
-const skins = ref<Skin[]>([])
-const capes = ref<Cape[]>([])
-
-const accountsCard = inject('accountsCard') as Ref<typeof AccountsCard>
-const currentUser = ref(undefined)
-const currentUserId = ref<string | undefined>(undefined)
-
-const username = computed(() => currentUser.value?.profile?.name ?? undefined)
-const selectedSkin = ref<Skin | null>(null)
-const defaultCape = ref<Cape>()
-
-const originalSelectedSkin = ref<Skin | null>(null)
-const originalDefaultCape = ref<Cape>()
-
-const savedSkins = computed(() => filterSavedSkins(skins.value))
-const defaultSkins = computed(() => filterDefaultSkins(skins.value))
-
-const currentCape = computed(() => {
-  if (selectedSkin.value?.cape_id) {
-    const overrideCape = capes.value.find((c) => c.id === selectedSkin.value?.cape_id)
-    if (overrideCape) {
-      return overrideCape
-    }
-  }
-  return defaultCape.value
-})
-
-const skinTexture = computedAsync(async () => {
-  if (selectedSkin.value?.texture) {
-    return await get_normalized_skin_texture(selectedSkin.value)
-  } else {
-    return ''
-  }
-})
-const capeTexture = computed(() => currentCape.value?.texture)
-const skinVariant = computed(() => selectedSkin.value?.variant)
-const skinNametag = computed(() =>
-  settings.value.hide_nametag_skins_page ? undefined : username.value,
-)
-
-let userCheckInterval: number | null = null
-
-const deleteSkinModal = ref()
-const skinToDelete = ref<Skin | null>(null)
-
-function confirmDeleteSkin(skin: Skin) {
-  skinToDelete.value = skin
-  deleteSkinModal.value?.show()
-}
-
-async function deleteSkin() {
-  if (!skinToDelete.value) return
-  await remove_custom_skin(skinToDelete.value).catch(handleError)
-  await loadSkins()
-  skinToDelete.value = null
-}
-
-async function loadCapes() {
-  try {
-    capes.value = (await get_available_capes()) ?? []
-    defaultCape.value = capes.value.find((c) => c.is_equipped)
-    originalDefaultCape.value = defaultCape.value
-  } catch (error) {
-    if (currentUser.value) {
-      handleError(error)
-    }
-  }
-}
-
-async function loadSkins() {
-  try {
-    skins.value = (await get_available_skins()) ?? []
-    generateSkinPreviews(skins.value, capes.value)
-    selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
-    originalSelectedSkin.value = selectedSkin.value
-  } catch (error) {
-    if (currentUser.value) {
-      handleError(error)
-    }
-  }
-}
-
-async function changeSkin(newSkin: Skin) {
-  const previousSkin = selectedSkin.value
-  const previousSkinsList = [...skins.value]
-
-  skins.value = skins.value.map((skin) => {
-    return {
-      ...skin,
-      is_equipped: skin.texture_key === newSkin.texture_key,
-    }
-  })
-
-  selectedSkin.value = skins.value.find((s) => s.texture_key === newSkin.texture_key) || null
-
-  try {
-    await equip_skin(newSkin)
-    if (accountsCard.value) {
-      await accountsCard.value.refreshValues()
-    }
-  } catch (error) {
-    selectedSkin.value = previousSkin
-    skins.value = previousSkinsList
-
-    if ((error as { message?: string })?.message?.includes('429 Too Many Requests')) {
-      notifications.addNotification({
-        type: 'error',
-        title: 'Slow down!',
-        text: "You're changing your skin too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
-      })
-    } else {
-      handleError(error)
-    }
-  }
-}
-
-async function handleCapeSelected(cape: Cape | undefined) {
-  const previousDefaultCape = defaultCape.value
-  const previousCapesList = [...capes.value]
-
-  capes.value = capes.value.map((c) => ({
-    ...c,
-    is_equipped: cape ? c.id === cape.id : false,
-  }))
-
-  defaultCape.value = cape ? capes.value.find((c) => c.id === cape.id) : undefined
-
-  try {
-    await set_default_cape(cape)
-  } catch (error) {
-    defaultCape.value = previousDefaultCape
-    capes.value = previousCapesList
-
-    if ((error as { message?: string })?.message?.includes('429 Too Many Requests')) {
-      notifications.addNotification({
-        type: 'error',
-        title: 'Slow down!',
-        text: "You're changing your cape too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
-      })
-    } else {
-      handleError(error)
-    }
-  }
-}
-
-async function onSkinSaved() {
-  await Promise.all([loadCapes(), loadSkins()])
-}
-
-async function loadCurrentUser() {
-  try {
-    const defaultId = await get_default_user()
-    currentUserId.value = defaultId
-
-    const allAccounts = await users()
-    currentUser.value = allAccounts.find((acc) => acc.profile.id === defaultId)
-  } catch (e) {
-    handleError(e)
-    currentUser.value = undefined
-    currentUserId.value = undefined
-  }
-}
-
-function getBakedSkinTextures(skin: Skin): RenderResult | undefined {
-  const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
-  return skinBlobUrlMap.get(key)
-}
-
-async function login() {
-  accountsCard.value.setLoginDisabled(true)
-  const loggedIn = await login_flow().catch(handleSevereError)
-
-  if (loggedIn && accountsCard) {
-    await accountsCard.value.refreshValues()
-  }
-
-  trackEvent('AccountLogIn')
-  accountsCard.value.setLoginDisabled(false)
-}
-
-function openUploadSkinModal(e: MouseEvent) {
-  uploadSkinModal.value?.show(e)
-}
-
-function onSkinFileUploaded(buffer: ArrayBuffer) {
-  const fakeEvent = new MouseEvent('click')
-  normalize_skin_texture(`data:image/png;base64,` + arrayBufferToBase64(buffer)).then(
-    (skinTextureNormalized: Uint8Array) => {
-      const skinTexUrl = `data:image/png;base64,` + arrayBufferToBase64(skinTextureNormalized)
-      if (editSkinModal.value && editSkinModal.value.shouldRestoreModal) {
-        editSkinModal.value.restoreWithNewTexture(skinTexUrl)
-      } else {
-        editSkinModal.value?.showNew(fakeEvent, skinTexUrl)
-      }
-    },
-  )
-}
-
-function onUploadCanceled() {
-  editSkinModal.value?.restoreModal()
-}
-
-watch(
-  () => selectedSkin.value?.cape_id,
-  () => {},
-)
-
-onMounted(() => {
-  userCheckInterval = window.setInterval(checkUserChanges, 250)
-})
-
-onUnmounted(() => {
-  if (userCheckInterval !== null) {
-    window.clearInterval(userCheckInterval)
-  }
-})
-
-async function checkUserChanges() {
-  try {
-    const defaultId = await get_default_user()
-    if (defaultId !== currentUserId.value) {
-      await loadCurrentUser()
-      await loadCapes()
-      await loadSkins()
-    }
-  } catch (error) {
-    if (currentUser.value) {
-      handleError(error)
-    }
-  }
-}
-
-await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
-</script>
-
-<template>
-  <EditSkinModal
-    ref="editSkinModal"
-    :capes="capes"
-    :default-cape="defaultCape"
-    @saved="onSkinSaved"
-    @deleted="() => loadSkins()"
-    @open-upload-modal="openUploadSkinModal"
-  />
-  <SelectCapeModal ref="selectCapeModal" :capes="capes" @select="handleCapeSelected" />
-  <UploadSkinModal
-    ref="uploadSkinModal"
-    @uploaded="onSkinFileUploaded"
-    @canceled="onUploadCanceled"
-  />
-  <ConfirmModal
-    ref="deleteSkinModal"
-    title="Are you sure you want to delete this skin?"
-    description="This will permanently delete the selected skin. This action cannot be undone."
-    proceed-label="Delete"
-    @proceed="deleteSkin"
-  />
-
-  <div v-if="currentUser" class="p-4 skin-layout">
-    <div class="preview-panel">
-      <h1 class="m-0 text-2xl font-bold flex items-center gap-2">
-        Skins
-        <span class="text-sm font-bold px-2 bg-brand-highlight text-brand rounded-full">Beta</span>
-      </h1>
-      <div class="preview-container">
-        <SkinPreviewRenderer
-          :cape-src="capeTexture"
-          :texture-src="skinTexture || ''"
-          :variant="skinVariant"
-          :nametag="skinNametag"
-          :initial-rotation="Math.PI / 8"
-        >
-          <template #subtitle>
-            <ButtonStyled :disabled="!!selectedSkin?.cape_id">
-              <button
-                v-tooltip="
-                  selectedSkin?.cape_id
-                    ? 'The equipped skin is overriding the default cape.'
-                    : undefined
-                "
-                :disabled="!!selectedSkin?.cape_id"
-                @click="
-                  (e: MouseEvent) =>
-                    selectCapeModal?.show(
-                      e,
-                      selectedSkin?.texture_key,
-                      currentCape,
-                      skinTexture,
-                      skinVariant,
-                    )
-                "
-              >
-                <UpdatedIcon />
-                Change cape
-              </button>
-            </ButtonStyled>
-          </template>
-        </SkinPreviewRenderer>
-      </div>
-    </div>
-
-    <div class="skins-container">
-      <section class="flex flex-col gap-2 mt-1">
-        <h2 class="text-lg font-bold m-0 text-primary">Saved skins</h2>
-        <div class="skin-card-grid">
-          <SkinLikeTextButton class="skin-card" @click="openUploadSkinModal">
-            <template #icon>
-              <PlusIcon class="size-8" />
-            </template>
-            <span>Add a skin</span>
-          </SkinLikeTextButton>
-
-          <SkinButton
-            v-for="skin in savedSkins"
-            :key="`saved-skin-${skin.texture_key}`"
-            class="skin-card"
-            :forward-image-src="getBakedSkinTextures(skin)?.forwards"
-            :backward-image-src="getBakedSkinTextures(skin)?.backwards"
-            :selected="selectedSkin === skin"
-            @select="changeSkin(skin)"
-          >
-            <template #overlay-buttons>
-              <Button
-                color="green"
-                aria-label="Edit skin"
-                class="pointer-events-auto"
-                @click.stop="(e) => editSkinModal?.show(e, skin)"
-              >
-                <EditIcon /> Edit
-              </Button>
-              <Button
-                v-show="!skin.is_equipped"
-                v-tooltip="'Delete skin'"
-                aria-label="Delete skin"
-                color="red"
-                class="!rounded-[100%] pointer-events-auto"
-                icon-only
-                @click.stop="() => confirmDeleteSkin(skin)"
-              >
-                <TrashIcon />
-              </Button>
-            </template>
-          </SkinButton>
-        </div>
-      </section>
-
-      <section class="flex flex-col gap-2 mt-6">
-        <h2 class="text-lg font-bold m-0 text-primary">Default skins</h2>
-        <div class="skin-card-grid">
-          <SkinButton
-            v-for="skin in defaultSkins"
-            :key="`default-skin-${skin.texture_key}`"
-            class="skin-card"
-            :forward-image-src="getBakedSkinTextures(skin)?.forwards"
-            :backward-image-src="getBakedSkinTextures(skin)?.backwards"
-            :selected="selectedSkin === skin"
-            :tooltip="skin.name"
-            @select="changeSkin(skin)"
-          />
-        </div>
-      </section>
-    </div>
-  </div>
-
-  <div v-else class="flex items-center justify-center min-h-[50vh] pt-[25%]">
-    <div
-      class="bg-bg-raised rounded-lg p-7 flex flex-col gap-5 shadow-md relative max-w-xl w-full mx-auto"
-    >
-      <img
-        :src="ExcitedRinthbot"
-        alt="Excited Modrinth Bot"
-        class="absolute -top-28 right-8 md:right-20 h-28 w-auto"
-      />
-      <div
-        class="absolute top-0 left-0 w-full h-[1px] opacity-40 bg-gradient-to-r from-transparent via-green-500 to-transparent"
-        style="
-          background: linear-gradient(
-            to right,
-            transparent 2rem,
-            var(--color-green) calc(100% - 13rem),
-            var(--color-green) calc(100% - 5rem),
-            transparent calc(100% - 2rem)
-          );
-        "
-      ></div>
-
-      <div class="flex flex-col gap-5">
-        <h1 class="text-3xl font-extrabold m-0">Please sign-in</h1>
-        <p class="text-lg m-0">
-          Please sign into your Minecraft account to use the skin management features of the
-          Modrinth app.
-        </p>
-        <ButtonStyled v-show="accountsCard" color="brand" :disabled="accountsCard.loginDisabled">
-          <button :disabled="accountsCard.loginDisabled" @click="login">
-            <LogInIcon v-if="!accountsCard.loginDisabled" />
-            <SpinnerIcon v-else class="animate-spin" />
-            Sign In
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-$skin-card-width: 155px;
-$skin-card-gap: 4px;
-
-.skin-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
-  gap: 2.5rem;
-
-  @media (max-width: 700px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.preview-panel {
-  top: 1.5rem;
-  position: sticky;
-  align-self: start;
-  padding: 0.5rem;
-  padding-top: 0;
-}
-
-.preview-container {
-  height: 80vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: calc((2.5rem / 2));
-
-  @media (max-width: 700px) {
-    height: 50vh;
-  }
-}
-
-.skins-container {
-  padding-top: 0.5rem;
-}
-
-.skin-card-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: $skin-card-gap;
-  width: 100%;
-
-  @media (min-width: 1300px) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  @media (min-width: 1750px) {
-    grid-template-columns: repeat(5, 1fr);
-  }
-
-  @media (min-width: 2050px) {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-.skin-card {
-  aspect-ratio: 0.95;
-  border-radius: 10px;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-}
-</style>

apps/app-frontend/src/pages/index.js

@@ -1,6 +1,5 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
 import Worlds from './Worlds.vue'
-import Skins from './Skins.vue'
 
-export { Index, Browse, Worlds, Skins }
+export { Index, Browse, Worlds }

apps/app-frontend/src/pages/instance/Logs.vue

@@ -483,7 +483,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  height: 100vh;
+  height: calc(100vh - 11rem);
 }
 
 .button-row {

apps/app-frontend/src/routes.js

@@ -34,14 +34,6 @@ export default new createRouter({
         breadcrumb: [{ name: 'Discover content' }],
       },
     },
-    {
-      path: '/skins',
-      name: 'Skins',
-      component: Pages.Skins,
-      meta: {
-        breadcrumb: [{ name: 'Skins' }],
-      },
-    },
     {
       path: '/library',
       name: 'Library',

apps/app-frontend/tailwind.config.js

@@ -41,7 +41,6 @@ export default {
           green: 'var(--color-green-highlight)',
           blue: 'var(--color-blue-highlight)',
           purple: 'var(--color-purple-highlight)',
-          gray: 'var(--color-gray-highlight)',
         },
         divider: {
           DEFAULT: 'var(--color-divider)',

apps/app-frontend/tsconfig.node.json

@@ -10,7 +10,6 @@
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-    "resolveJsonModule": true,
 
     "strict": true
   },

apps/app-frontend/vite.config.ts

@@ -4,8 +4,6 @@ import svgLoader from 'vite-svg-loader'
 
 import vue from '@vitejs/plugin-vue'
 
-import tauriConf from '../app/tauri.conf.json'
-
 const projectRootDir = resolve(__dirname)
 
 // https://vitejs.dev/config/
@@ -43,32 +41,17 @@ export default defineConfig({
   server: {
     port: 1420,
     strictPort: true,
-    headers: {
-      'content-security-policy': Object.entries(tauriConf.app.security.csp)
-        .map(([directive, sources]) => {
-          // An additional websocket connect-src is required for Vite dev tools to work
-          if (directive === 'connect-src') {
-            sources = Array.isArray(sources) ? sources : [sources]
-            sources.push('ws://localhost:1420')
-          }
-
-          return Array.isArray(sources)
-            ? `${directive} ${sources.join(' ')}`
-            : `${directive} ${sources}`
-        })
-        .join('; '),
-    },
   },
   // to make use of `TAURI_ENV_DEBUG` and other env variables
   // https://v2.tauri.app/reference/environment-variables/#tauri-cli-hook-commands
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     // Tauri supports es2021
-    target: process.env.TAURI_ENV_PLATFORM == 'windows' ? 'chrome105' : 'safari13', // eslint-disable-line turbo/no-undeclared-env-vars
+    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13', // eslint-disable-line turbo/no-undeclared-env-vars
     // don't minify for debug builds
-    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false, // eslint-disable-line turbo/no-undeclared-env-vars
+    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, // eslint-disable-line turbo/no-undeclared-env-vars
     // produce sourcemaps for debug builds
-    sourcemap: !!process.env.TAURI_ENV_DEBUG, // eslint-disable-line turbo/no-undeclared-env-vars
+    sourcemap: !!process.env.TAURI_DEBUG, // eslint-disable-line turbo/no-undeclared-env-vars
     commonjsOptions: {
       esmExternals: true,
     },

apps/app/.gitignore

@@ -1,2 +1,6 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
 # Generated by tauri, metadata generated at compile time
 /gen/

apps/app/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "1.0.0-local" # The actual version is set by the theseus-build workflow on tagging
+version = "0.9.5"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
@@ -16,15 +16,14 @@ serde_json.workspace = true
 serde = { workspace = true, features = ["derive"] }
 serde_with.workspace = true
 
-tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset"] }
-tauri-plugin-deep-link.workspace = true
-tauri-plugin-dialog.workspace = true
-tauri-plugin-http.workspace = true
-tauri-plugin-opener.workspace = true
-tauri-plugin-os.workspace = true
-tauri-plugin-single-instance.workspace = true
-tauri-plugin-updater.workspace = true
+tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
 tauri-plugin-window-state.workspace = true
+tauri-plugin-deep-link.workspace = true
+tauri-plugin-os.workspace = true
+tauri-plugin-opener.workspace = true
+tauri-plugin-dialog.workspace = true
+tauri-plugin-updater.workspace = true
+tauri-plugin-single-instance.workspace = true
 
 tokio = { workspace = true, features = ["time"] }
 thiserror.workspace = true

apps/app/Info.plist

@@ -18,25 +18,5 @@
         <string>A Minecraft mod wants to access your camera.</string>
         <key>NSMicrophoneUsageDescription</key>
         <string>A Minecraft mod wants to access your microphone.</string>
-        <key>NSAppTransportSecurity</key>
-        <dict>
-          <key>NSExceptionDomains</key>
-          <dict>
-            <key>asset.localhost</key>
-            <dict>
-              <key>NSExceptionAllowsInsecureHTTPLoads</key>
-              <true/>
-              <key>NSIncludesSubdomains</key>
-              <true/>
-            </dict>
-            <key>textures.minecraft.net</key>
-            <dict>
-              <key>NSExceptionAllowsInsecureHTTPLoads</key>
-              <true/>
-              <key>NSIncludesSubdomains</key>
-              <true/>
-            </dict>
-          </dict>
-        </dict>
     </dict>
 </plist>

apps/app/build.rs

@@ -99,24 +99,6 @@ fn main() {
                         DefaultPermissionRule::AllowAllCommands,
                     ),
             )
-            .plugin(
-                "minecraft-skins",
-                InlinedPlugin::new()
-                    .commands(&[
-                        "get_available_capes",
-                        "get_available_skins",
-                        "add_and_equip_custom_skin",
-                        "set_default_cape",
-                        "equip_skin",
-                        "remove_custom_skin",
-                        "unequip_skin",
-                        "normalize_skin_texture",
-                        "get_dragged_skin_data",
-                    ])
-                    .default_permission(
-                        DefaultPermissionRule::AllowAllCommands,
-                    ),
-            )
             .plugin(
                 "mr-auth",
                 InlinedPlugin::new()

apps/app/capabilities/plugins.json

@@ -19,21 +19,12 @@
     "window-state:default",
     "window-state:allow-restore-state",
     "window-state:allow-save-window-state",
-    
-    {
-      "identifier": "http:default",
-      "allow": [
-        { "url": "https://modrinth.com/*" },
-        { "url": "https://*.modrinth.com/*" }
-      ]
-    },
 
     "auth:default",
     "import:default",
     "jre:default",
     "logs:default",
     "metadata:default",
-    "minecraft-skins:default",
     "mr-auth:default",
     "profile-create:default",
     "pack:default",

apps/app/package.json

@@ -5,8 +5,8 @@
     "build": "tauri build",
     "dev": "tauri dev",
     "test": "cargo nextest run --all-targets --no-fail-fast",
-    "lint": "cargo fmt --check && cargo clippy --all-targets && cargo clippy --all-targets --features updater",
-    "fix": "cargo clippy --all-targets --fix --allow-dirty && cargo clippy --all-targets --features updater --fix --allow-dirty && cargo fmt"
+    "lint": "cargo fmt --check && cargo clippy --all-targets",
+    "fix": "cargo clippy --all-targets --fix --allow-dirty && cargo fmt"
   },
   "devDependencies": {
     "@tauri-apps/cli": "2.5.0"

apps/app/src/api/jre.rs

@@ -41,8 +41,8 @@ pub async fn jre_find_filtered_jres(
 // Validates JRE at a given path
 // Returns None if the path is not a valid JRE
 #[tauri::command]
-pub async fn jre_get_jre(path: PathBuf) -> Result<JavaVersion> {
-    Ok(jre::check_jre(path).await?)
+pub async fn jre_get_jre(path: PathBuf) -> Result<Option<JavaVersion>> {
+    jre::check_jre(path).await.map_err(|e| e.into())
 }
 
 // Tests JRE of a certain version

apps/app/src/api/minecraft_skins.rs

@@ -1,104 +0,0 @@
-use crate::api::Result;
-
-use std::path::Path;
-use theseus::minecraft_skins::{
-    self, Bytes, Cape, MinecraftSkinVariant, Skin, UrlOrBlob,
-};
-
-pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
-    tauri::plugin::Builder::new("minecraft-skins")
-        .invoke_handler(tauri::generate_handler![
-            get_available_capes,
-            get_available_skins,
-            add_and_equip_custom_skin,
-            set_default_cape,
-            equip_skin,
-            remove_custom_skin,
-            unequip_skin,
-            normalize_skin_texture,
-            get_dragged_skin_data,
-        ])
-        .build()
-}
-
-/// `invoke('plugin:minecraft-skins|get_available_capes')`
-///
-/// See also: [minecraft_skins::get_available_capes]
-#[tauri::command]
-pub async fn get_available_capes() -> Result<Vec<Cape>> {
-    Ok(minecraft_skins::get_available_capes().await?)
-}
-
-/// `invoke('plugin:minecraft-skins|get_available_skins')`
-///
-/// See also: [minecraft_skins::get_available_skins]
-#[tauri::command]
-pub async fn get_available_skins() -> Result<Vec<Skin>> {
-    Ok(minecraft_skins::get_available_skins().await?)
-}
-
-/// `invoke('plugin:minecraft-skins|add_and_equip_custom_skin', texture_blob, variant, cape_override)`
-///
-/// See also: [minecraft_skins::add_and_equip_custom_skin]
-#[tauri::command]
-pub async fn add_and_equip_custom_skin(
-    texture_blob: Bytes,
-    variant: MinecraftSkinVariant,
-    cape_override: Option<Cape>,
-) -> Result<()> {
-    Ok(minecraft_skins::add_and_equip_custom_skin(
-        texture_blob,
-        variant,
-        cape_override,
-    )
-    .await?)
-}
-
-/// `invoke('plugin:minecraft-skins|set_default_cape', cape)`
-///
-/// See also: [minecraft_skins::set_default_cape]
-#[tauri::command]
-pub async fn set_default_cape(cape: Option<Cape>) -> Result<()> {
-    Ok(minecraft_skins::set_default_cape(cape).await?)
-}
-
-/// `invoke('plugin:minecraft-skins|equip_skin', skin)`
-///
-/// See also: [minecraft_skins::equip_skin]
-#[tauri::command]
-pub async fn equip_skin(skin: Skin) -> Result<()> {
-    Ok(minecraft_skins::equip_skin(skin).await?)
-}
-
-/// `invoke('plugin:minecraft-skins|remove_custom_skin', skin)`
-///
-/// See also: [minecraft_skins::remove_custom_skin]
-#[tauri::command]
-pub async fn remove_custom_skin(skin: Skin) -> Result<()> {
-    Ok(minecraft_skins::remove_custom_skin(skin).await?)
-}
-
-/// `invoke('plugin:minecraft-skins|unequip_skin')`
-///
-/// See also: [minecraft_skins::unequip_skin]
-#[tauri::command]
-pub async fn unequip_skin() -> Result<()> {
-    Ok(minecraft_skins::unequip_skin().await?)
-}
-
-/// `invoke('plugin:minecraft-skins|normalize_skin_texture')`
-///
-/// See also: [minecraft_skins::normalize_skin_texture]
-#[tauri::command]
-pub async fn normalize_skin_texture(texture: UrlOrBlob) -> Result<Bytes> {
-    Ok(minecraft_skins::normalize_skin_texture(&texture).await?)
-}
-
-/// `invoke('plugin:minecraft-skins|get_dragged_skin_data', path)`
-///
-/// See also: [minecraft_skins::get_dragged_skin_data]
-#[tauri::command]
-pub async fn get_dragged_skin_data(path: String) -> Result<Bytes> {
-    let path = Path::new(&path);
-    Ok(minecraft_skins::get_dragged_skin_data(path).await?)
-}

apps/app/src/api/mod.rs

@@ -7,7 +7,6 @@ pub mod import;
 pub mod jre;
 pub mod logs;
 pub mod metadata;
-pub mod minecraft_skins;
 pub mod mr_auth;
 pub mod pack;
 pub mod process;
@@ -45,12 +44,8 @@ pub enum TheseusSerializableError {
     Tauri(#[from] tauri::Error),
 
     #[cfg(feature = "updater")]
-    #[error("Updater error: {0}")]
-    Updater(#[from] tauri_plugin_updater::Error),
-
-    #[cfg(feature = "updater")]
-    #[error("HTTP error: {0}")]
-    Http(#[from] tauri_plugin_http::reqwest::Error),
+    #[error("Tauri updater error: {0}")]
+    TauriUpdater(#[from] tauri_plugin_updater::Error),
 }
 
 // Generic implementation of From<T> for ErrorTypeA
@@ -108,6 +103,5 @@ impl_serialize! {
 impl_serialize! {
     IO,
     Tauri,
-    Updater,
-    Http,
+    TauriUpdater,
 }

apps/app/src/main.rs

@@ -14,11 +14,6 @@ mod error;
 #[cfg(target_os = "macos")]
 mod macos;
 
-#[cfg(feature = "updater")]
-mod updater_impl;
-#[cfg(not(feature = "updater"))]
-mod updater_impl_noop;
-
 // Should be called in launcher initialization
 #[tracing::instrument(skip_all)]
 #[tauri::command]
@@ -26,9 +21,75 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
     tracing::info!("Initializing app event state...");
     theseus::EventState::init(app.clone()).await?;
 
-    tracing::info!("Initializing app state...");
-    State::init().await?;
+    #[cfg(feature = "updater")]
+    'updater: {
+        if env::var("MODRINTH_EXTERNAL_UPDATE_PROVIDER").is_ok() {
+            State::init().await?;
+            break 'updater;
+        }
 
+        use tauri_plugin_updater::UpdaterExt;
+
+        let updater = app.updater_builder().build()?;
+
+        let update_fut = updater.check();
+
+        tracing::info!("Initializing app state...");
+        State::init().await?;
+
+        let check_bar = theseus::init_loading(
+            theseus::LoadingBarType::CheckingForUpdates,
+            1.0,
+            "Checking for updates...",
+        )
+        .await?;
+
+        tracing::info!("Checking for updates...");
+        let update = update_fut.await;
+
+        drop(check_bar);
+
+        if let Some(update) = update.ok().flatten() {
+            tracing::info!("Update found: {:?}", update.download_url);
+            let loader_bar_id = theseus::init_loading(
+                theseus::LoadingBarType::LauncherUpdate {
+                    version: update.version.clone(),
+                    current_version: update.current_version.clone(),
+                },
+                1.0,
+                "Updating Modrinth App...",
+            )
+            .await?;
+
+            // 100 MiB
+            const DEFAULT_CONTENT_LENGTH: u64 = 1024 * 1024 * 100;
+
+            update
+                .download_and_install(
+                    |chunk_length, content_length| {
+                        let _ = theseus::emit_loading(
+                            &loader_bar_id,
+                            (chunk_length as f64)
+                                / (content_length
+                                    .unwrap_or(DEFAULT_CONTENT_LENGTH)
+                                    as f64),
+                            None,
+                        );
+                    },
+                    || {},
+                )
+                .await?;
+
+            app.restart();
+        }
+    }
+
+    #[cfg(not(feature = "updater"))]
+    {
+        State::init().await?;
+    }
+
+    tracing::info!("Finished checking for updates!");
     let state = State::get().await?;
     app.asset_protocol_scope()
         .allow_directory(state.directories.caches_dir(), true)?;
@@ -64,17 +125,6 @@ fn is_dev() -> bool {
     cfg!(debug_assertions)
 }
 
-#[tauri::command]
-fn are_updates_enabled() -> bool {
-    cfg!(feature = "updater")
-}
-
-#[cfg(feature = "updater")]
-pub use updater_impl::*;
-
-#[cfg(not(feature = "updater"))]
-pub use updater_impl_noop::*;
-
 // Toggles decorations
 #[tauri::command]
 async fn toggle_decorations(b: bool, window: tauri::Window) -> api::Result<()> {
@@ -116,17 +166,7 @@ fn main() {
 
     #[cfg(feature = "updater")]
     {
-        use tauri_plugin_http::reqwest::header::{HeaderValue, USER_AGENT};
-        use theseus::LAUNCHER_USER_AGENT;
-        builder = builder.plugin(
-            tauri_plugin_updater::Builder::new()
-                .header(
-                    USER_AGENT,
-                    HeaderValue::from_str(LAUNCHER_USER_AGENT).unwrap(),
-                )
-                .unwrap()
-                .build(),
-        );
+        builder = builder.plugin(tauri_plugin_updater::Builder::new().build());
     }
 
     builder = builder
@@ -143,7 +183,6 @@ fn main() {
                 let _ = win.set_focus();
             }
         }))
-        .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_deep_link::init())
@@ -209,7 +248,6 @@ fn main() {
         .plugin(api::logs::init())
         .plugin(api::jre::init())
         .plugin(api::metadata::init())
-        .plugin(api::minecraft_skins::init())
         .plugin(api::pack::init())
         .plugin(api::process::init())
         .plugin(api::profile::init())
@@ -221,14 +259,9 @@ fn main() {
         .plugin(api::ads::init())
         .plugin(api::friends::init())
         .plugin(api::worlds::init())
-        .manage(PendingUpdateData::default())
         .invoke_handler(tauri::generate_handler![
             initialize_state,
             is_dev,
-            are_updates_enabled,
-            get_update_size,
-            enqueue_update_for_installation,
-            remove_enqueued_update,
             toggle_decorations,
             show_window,
             restart_app,
@@ -240,41 +273,8 @@ fn main() {
     match app {
         Ok(app) => {
             app.run(|app, event| {
-                #[cfg(not(any(feature = "updater", target_os = "macos")))]
+                #[cfg(not(target_os = "macos"))]
                 drop((app, event));
-
-                #[cfg(feature = "updater")]
-                if matches!(event, tauri::RunEvent::Exit) {
-                    let update_data = app.state::<PendingUpdateData>().inner();
-                    if let Some((update, data)) = &*update_data.0.lock().unwrap() {
-                        fn set_changelog_toast(version: Option<String>) {
-                            let toast_result: theseus::Result<()> = tauri::async_runtime::block_on(async move {
-                                let mut settings = settings::get().await?;
-                                settings.pending_update_toast_for_version = version;
-                                settings::set(settings).await?;
-                                Ok(())
-                            });
-                            if let Err(e) = toast_result {
-                                tracing::warn!("Failed to set pending_update_toast: {e}")
-                            }
-                        }
-
-                        set_changelog_toast(Some(update.version.clone()));
-                        if let Err(e) = update.install(data) {
-                            tracing::error!("Error while updating: {e}");
-                            set_changelog_toast(None);
-
-                            DialogBuilder::message()
-                                .set_level(MessageLevel::Error)
-                                .set_title("Update error")
-                                .set_text(format!("Failed to install update due to an error:\n{e}"))
-                                .alert()
-                                .show()
-                                .unwrap();
-                        }
-                    }
-                }
-
                 #[cfg(target_os = "macos")]
                 if let tauri::RunEvent::Opened { urls } = event {
                     tracing::info!("Handling webview open {urls:?}");
@@ -302,8 +302,6 @@ fn main() {
             });
         }
         Err(e) => {
-            tracing::error!("Error while running tauri application: {:?}", e);
-
             #[cfg(target_os = "windows")]
             {
                 // tauri doesn't expose runtime errors, so matching a string representation seems like the only solution
@@ -332,6 +330,7 @@ fn main() {
                 .show()
                 .unwrap();
 
+            tracing::error!("Error while running tauri application: {:?}", e);
             panic!("{1}: {:?}", e, "error while running tauri application")
         }
     }

apps/app/src/updater_impl.rs

@@ -1,121 +0,0 @@
-use crate::api::Result;
-use std::sync::{Arc, Mutex};
-use tauri::http::HeaderValue;
-use tauri::http::header::ACCEPT;
-use tauri::{Manager, ResourceId, Runtime, Webview};
-use tauri_plugin_http::reqwest;
-use tauri_plugin_http::reqwest::ClientBuilder;
-use tauri_plugin_updater::Error;
-use tauri_plugin_updater::Update;
-use theseus::{
-    LAUNCHER_USER_AGENT, LoadingBarType, emit_loading, init_loading,
-};
-use tokio::time::Instant;
-
-#[derive(Default)]
-pub struct PendingUpdateData(pub Mutex<Option<(Arc<Update>, Vec<u8>)>>);
-
-// Reimplementation of Update::download mostly, minus the actual download part
-#[tauri::command]
-pub async fn get_update_size<R: Runtime>(
-    webview: Webview<R>,
-    rid: ResourceId,
-) -> Result<Option<u64>> {
-    let update = webview.resources_table().get::<Update>(rid)?;
-
-    let mut headers = update.headers.clone();
-    if !headers.contains_key(ACCEPT) {
-        headers.insert(
-            ACCEPT,
-            HeaderValue::from_static("application/octet-stream"),
-        );
-    }
-
-    let mut request = ClientBuilder::new().user_agent(LAUNCHER_USER_AGENT);
-    if let Some(timeout) = update.timeout {
-        request = request.timeout(timeout);
-    }
-    if let Some(ref proxy) = update.proxy {
-        let proxy = reqwest::Proxy::all(proxy.as_str())?;
-        request = request.proxy(proxy);
-    }
-    let response = request
-        .build()?
-        .head(update.download_url.clone())
-        .headers(headers)
-        .send()
-        .await?;
-
-    if !response.status().is_success() {
-        return Err(Error::Network(format!(
-            "Download request failed with status: {}",
-            response.status()
-        ))
-        .into());
-    }
-
-    let content_length = response
-        .headers()
-        .get("Content-Length")
-        .and_then(|value| value.to_str().ok())
-        .and_then(|value| value.parse().ok());
-
-    Ok(content_length)
-}
-
-#[tauri::command]
-pub async fn enqueue_update_for_installation<R: Runtime>(
-    webview: Webview<R>,
-    rid: ResourceId,
-) -> Result<()> {
-    let pending_data = webview.state::<PendingUpdateData>().inner();
-
-    let update = webview.resources_table().get::<Update>(rid)?;
-
-    let progress = init_loading(
-        LoadingBarType::LauncherUpdate {
-            version: update.version.clone(),
-            current_version: update.current_version.clone(),
-        },
-        1.0,
-        "Downloading update...",
-    )
-    .await?;
-
-    let download_start = Instant::now();
-    let update_data = update
-        .download(
-            |chunk_size, total_size| {
-                let Some(total_size) = total_size else {
-                    return;
-                };
-                if let Err(e) = emit_loading(
-                    &progress,
-                    chunk_size as f64 / total_size as f64,
-                    None,
-                ) {
-                    tracing::error!(
-                        "Failed to update download progress bar: {e}"
-                    );
-                }
-            },
-            || {},
-        )
-        .await?;
-    let download_duration = download_start.elapsed();
-    tracing::info!("Downloaded update in {download_duration:?}");
-
-    pending_data
-        .0
-        .lock()
-        .unwrap()
-        .replace((update, update_data));
-
-    Ok(())
-}
-
-#[tauri::command]
-pub fn remove_enqueued_update<R: Runtime>(webview: Webview<R>) {
-    let pending_data = webview.state::<PendingUpdateData>().inner();
-    pending_data.0.lock().unwrap().take();
-}

apps/app/src/updater_impl_noop.rs

@@ -1,26 +0,0 @@
-use crate::api::Result;
-use theseus::ErrorKind;
-
-#[derive(Default)]
-pub struct PendingUpdateData(());
-
-#[tauri::command]
-pub fn get_update_size() -> Result<()> {
-    updates_are_disabled()
-}
-
-#[tauri::command]
-pub fn enqueue_update_for_installation() -> Result<()> {
-    updates_are_disabled()
-}
-
-fn updates_are_disabled() -> Result<()> {
-    let error: theseus::Error = ErrorKind::OtherError(
-        "Updates are disabled in this build.".to_string(),
-    )
-    .into();
-    Err(error.into())
-}
-
-#[tauri::command]
-pub fn remove_enqueued_update() {}

apps/app/tauri-release.conf.json

@@ -1,24 +1,6 @@
 {
   "bundle": {
-    "createUpdaterArtifacts": "v1Compatible",
-    "windows": {
-      "signCommand": {
-        "cmd": "jsign",
-        "args": [
-          "sign",
-          "--verbose",
-          "--storetype",
-          "DIGICERTONE",
-          "--keystore",
-          "https://clientauth.one.digicert.com",
-          "--storepass",
-          "env:DIGICERT_ONE_SIGNER_CREDENTIALS",
-          "--tsaurl",
-          "https://timestamp.sectigo.com,http://timestamp.digicert.com",
-          "%1"
-        ]
-      }
-    }
+    "createUpdaterArtifacts": "v1Compatible"
   },
   "build": {
     "features": ["updater"]

apps/app/tauri.conf.json

@@ -14,6 +14,9 @@
     "externalBin": [],
     "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
     "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": "http://timestamp.digicert.com",
       "nsis": {
         "installMode": "perMachine",
         "installerHooks": "./nsis/hooks.nsi"
@@ -27,6 +30,7 @@
       "providerShortName": null,
       "signingIdentity": null
     },
+    "resources": [],
     "shortDescription": "",
     "linux": {
       "deb": {
@@ -41,7 +45,7 @@
     ]
   },
   "productName": "Modrinth App",
-  "version": "../app-frontend/package.json",
+  "version": "0.9.5",
   "mainBinaryName": "Modrinth App",
   "identifier": "ModrinthApp",
   "plugins": {
@@ -86,9 +90,9 @@
       "capabilities": ["ads", "core", "plugins"],
       "csp": {
         "default-src": "'self' customprotocol: asset:",
-        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs 'self' data: blob:",
+        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs",
         "font-src": ["https://cdn-raw.modrinth.com/fonts/"],
-        "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
+        "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost blob: data:",
         "style-src": "'unsafe-inline' 'self'",
         "script-src": "https://*.posthog.com 'self'",
         "frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com 'self'",

apps/daedalus_client/Dockerfile

@@ -1,4 +1,5 @@
-FROM rust:1.88.0 AS build
+FROM rust:1.87.0 AS build
+ENV PKG_CONFIG_ALLOW_CROSS=1
 
 WORKDIR /usr/src/daedalus
 COPY . .
@@ -9,8 +10,11 @@ FROM debian:bookworm-slim
 
 RUN apt-get update \
   && apt-get install -y --no-install-recommends ca-certificates openssl \
+  && apt-get clean \
   && rm -rf /var/lib/apt/lists/*
 
+RUN update-ca-certificates
+
 COPY --from=build /usr/src/daedalus/target/release/daedalus_client /daedalus/daedalus_client
 WORKDIR /daedalus_client
 

apps/docs/public/welcome-channel.yaml

@@ -68,7 +68,7 @@
     Support: https://support.modrinth.com
     Status page: https://status.modrinth.com
     Roadmap: https://roadmap.modrinth.com
-    Blog and newsletter: https://modrinth.com/news
+    Blog and newsletter: https://blog.modrinth.com/subscribe?utm_medium=social&utm_source=discord&utm_campaign=welcome
     API documentation: https://docs.modrinth.com
     Modrinth source code: https://github.com/modrinth
     Help translate Modrinth: https://crowdin.com/project/modrinth

apps/docs/src/content/docs/contributing/labrinth.md

@@ -19,6 +19,8 @@ From there, you can create the database and perform all database migrations with
 sqlx database setup
 ```
 
+Finally, if on Linux, you will need the OpenSSL library. On Debian-based systems, this involves the `pkg-config` and `libssl-dev` packages.
+
 To enable labrinth to create a project, you need to add two things.
 
 1. An entry in the `loaders` table.
@@ -83,10 +85,11 @@ During development, you might notice that changes made directly to entities in t
 
 #### CDN options
 
-`STORAGE_BACKEND`: Controls what storage backend is used. This can be either `local` or `s3`, but defaults to `local`
+`STORAGE_BACKEND`: Controls what storage backend is used. This can be either `local`, `backblaze`, or `s3`, but defaults to `local`
 
-The S3 configuration options are fairly self-explanatory in name, so here's simply their names:
-`S3_ACCESS_TOKEN`, `S3_SECRET`, `S3_URL`, `S3_REGION`, `S3_PUBLIC_BUCKET_NAME`, `S3_PRIVATE_BUCKET_NAME`, `S3_USES_PATH_STYLE_BUCKETS`
+The Backblaze and S3 configuration options are fairly self-explanatory in name, so here's simply their names:  
+`BACKBLAZE_KEY_ID`, `BACKBLAZE_KEY`, `BACKBLAZE_BUCKET_ID`  
+`S3_ACCESS_TOKEN`, `S3_SECRET`, `S3_URL`, `S3_REGION`, `S3_BUCKET_NAME`
 
 #### Search, OAuth, and miscellaneous options
 

apps/frontend/.env.local

@@ -2,3 +2,4 @@ BASE_URL=http://127.0.0.1:8000/v2/
 BROWSER_BASE_URL=http://127.0.0.1:8000/v2/
 PYRO_BASE_URL=https://staging-archon.modrinth.com
 PROD_OVERRIDE=true
+

apps/frontend/package.json

@@ -10,7 +10,7 @@
     "postinstall": "nuxi prepare",
     "lint": "eslint . && prettier --check .",
     "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/layouts,src/middleware,src/modules,src/pages,src/plugins,src/utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
     "test": "nuxi build"
   },
   "devDependencies": {
@@ -38,12 +38,9 @@
     "@intercom/messenger-js-sdk": "^0.0.14",
     "@ltd/j-toml": "^1.38.0",
     "@modrinth/assets": "workspace:*",
-    "@modrinth/blog": "workspace:*",
-    "@modrinth/moderation": "workspace:*",
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@pinia/nuxt": "^0.5.1",
-    "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
     "@vueuse/core": "^11.1.0",
     "ace-builds": "^1.36.2",
@@ -59,10 +56,10 @@
     "markdown-it": "14.1.0",
     "pathe": "^1.1.2",
     "pinia": "^2.1.7",
-    "prettier": "^3.6.2",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "three": "^0.172.0",
+    "@types/three": "^0.172.0",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",

apps/frontend/src/assets/styles/components.scss

@@ -197,13 +197,13 @@
   }
 
   > :where(
-    input + *,
-    .input-group + *,
-    .textarea-wrapper + *,
-    .chips + *,
-    .resizable-textarea-wrapper + *,
-    .input-div + *
-  ) {
+      input + *,
+      .input-group + *,
+      .textarea-wrapper + *,
+      .chips + *,
+      .resizable-textarea-wrapper + *,
+      .input-div + *
+    ) {
     &:not(:empty) {
       margin-block-start: var(--spacing-card-md);
     }

apps/frontend/src/assets/styles/global.scss

@@ -115,12 +115,10 @@ html {
   --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
 
   --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
-  --shadow-raised:
-    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
+  --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
     1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
     4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating:
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
@@ -152,8 +150,8 @@ html {
     rgba(255, 255, 255, 0.35) 0%,
     rgba(255, 255, 255, 0.2695) 100%
   );
-  --landing-blob-shadow:
-    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(255, 255, 255, 0.45);
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
+    inset 2px 2px 64px rgba(255, 255, 255, 0.45);
 
   --landing-card-bg: rgba(255, 255, 255, 0.8);
   --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -253,15 +251,13 @@ html {
 
   --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
   --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating:
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
   --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
-  --landing-maze-gradient-bg:
-    linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
+  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
     url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
   --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
 
@@ -288,8 +284,7 @@ html {
     rgba(44, 48, 79, 0.35) 0%,
     rgba(32, 35, 50, 0.2695) 100%
   );
-  --landing-blob-shadow:
-    2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
 
   --landing-card-bg: rgba(59, 63, 85, 0.15);
   --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -365,9 +360,8 @@ body {
   // Defaults
   background-color: var(--color-bg);
   color: var(--color-text);
-  --font-standard:
-    Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell,
-    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   font-family: var(--font-standard);
   font-size: 16px;

apps/frontend/src/components/ui/AdPlaceholder.vue

@@ -1,20 +1,15 @@
 <template>
   <div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
-    <nuxt-link
-      to="/servers"
-      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/modrinth-servers-placeholder-light.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="light-image hidden rounded-[inherit]"
-      />
-      <img
-        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="dark-image rounded-[inherit]"
-      />
-    </nuxt-link>
+    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
+      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
+      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
+        <span>
+          Support creators and Modrinth ad-free with
+          <span class="font-bold">Modrinth+</span>
+        </span>
+        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
+      </nuxt-link>
+    </div>
     <div
       class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
     >
@@ -23,6 +18,8 @@
   </div>
 </template>
 <script setup>
+import { ChevronRightIcon } from "@modrinth/assets";
+
 useHead({
   script: [
     // {
@@ -140,16 +137,3 @@ iframe[id^="google_ads_iframe"] {
   }
 }
 </style>
-
-<style lang="scss" scoped>
-.light,
-.light-mode {
-  .dark-image {
-    display: none;
-  }
-
-  .light-image {
-    display: block;
-  }
-}
-</style>

apps/frontend/src/components/ui/Avatar.vue

@@ -0,0 +1,46 @@
+<template>
+  <OmorphiaAvatar
+    :src="src"
+    :alt="alt"
+    :size="size"
+    :circle="circle"
+    :no-shadow="noShadow"
+    :loading="loading"
+    :raised="raised"
+  />
+</template>
+
+<script setup>
+import { Avatar as OmorphiaAvatar } from "@modrinth/ui";
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: null,
+  },
+  alt: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "2rem",
+  },
+  circle: {
+    type: Boolean,
+    default: false,
+  },
+  noShadow: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: String,
+    default: "eager",
+  },
+  raised: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

apps/frontend/src/components/ui/Badge.vue

@@ -0,0 +1,131 @@
+<template>
+  <span
+    :class="
+      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
+    "
+  >
+    <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
+
+    <!-- User roles -->
+    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
+    <template v-else-if="type === 'moderator'"> <ModeratorIcon /> Moderator</template>
+    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
+    <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
+
+    <!-- Project statuses -->
+    <template v-else-if="type === 'approved'"><GlobeIcon /> Public</template>
+    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
+    <template v-else-if="type === 'unlisted' || type === 'withheld'"
+      ><LinkIcon /> Unlisted</template
+    >
+    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
+    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
+    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
+    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
+    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
+    <template v-else-if="type === 'processing'"> <ProcessingIcon /> Under review</template>
+
+    <!-- Team members -->
+    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
+    <template v-else-if="type === 'pending'"> <ProcessingIcon /> Pending </template>
+
+    <!-- Transaction statuses -->
+    <template v-else-if="type === 'success'"><CheckIcon /> Success</template>
+
+    <!-- Report status -->
+    <template v-else-if="type === 'closed'"> <CloseIcon /> Closed</template>
+
+    <!-- Other -->
+    <template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
+  </span>
+</template>
+
+<script setup>
+import {
+  GlobeIcon,
+  LinkIcon,
+  ModrinthIcon,
+  PlusIcon,
+  ScaleIcon as ModeratorIcon,
+  BoxIcon as CreatorIcon,
+  FileTextIcon as DraftIcon,
+  XIcon as CrossIcon,
+  ArchiveIcon,
+  UpdatedIcon as ProcessingIcon,
+  CheckIcon,
+  LockIcon,
+  CalendarIcon,
+  XCircleIcon as CloseIcon,
+} from "@modrinth/assets";
+import { capitalizeString } from "@modrinth/utils";
+
+defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.badge {
+  .circle {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 0.25rem;
+    background-color: var(--badge-color);
+  }
+
+  svg {
+    vertical-align: -15%;
+    width: 1em;
+    height: 1em;
+  }
+
+  &.type--closed,
+  &.type--withheld,
+  &.type--rejected,
+  &.red {
+    --badge-color: var(--color-red);
+  }
+
+  &.type--pending,
+  &.type--moderator,
+  &.type--processing,
+  &.type--scheduled,
+  &.orange {
+    --badge-color: var(--color-orange);
+  }
+
+  &.type--accepted,
+  &.type--admin,
+  &.type--success,
+  &.type--approved-general,
+  &.green {
+    --badge-color: var(--color-green);
+  }
+
+  &.type--creator,
+  &.blue {
+    --badge-color: var(--color-blue);
+  }
+
+  &.type--unlisted,
+  &.type--plus,
+  &.purple {
+    --badge-color: var(--color-purple);
+  }
+
+  &.type--private,
+  &.type--approved,
+  &.gray {
+    --badge-color: var(--color-secondary);
+  }
+}
+</style>

apps/frontend/src/components/ui/CopyCode.vue

@@ -0,0 +1,75 @@
+<template>
+  <button class="code" :class="{ copied }" title="Copy code to clipboard" @click="copyText">
+    <span>{{ text }}</span>
+    <CheckIcon v-if="copied" />
+    <ClipboardCopyIcon v-else />
+  </button>
+</template>
+
+<script>
+import { CheckIcon, ClipboardCopyIcon } from "@modrinth/assets";
+
+export default {
+  components: {
+    CheckIcon,
+    ClipboardCopyIcon,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      copied: false,
+    };
+  },
+  methods: {
+    async copyText() {
+      await navigator.clipboard.writeText(this.text);
+      this.copied = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.code {
+  color: var(--color-text);
+  display: inline-flex;
+  grid-gap: 0.5rem;
+  font-family: var(--mono-font);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--color-code-bg);
+  width: fit-content;
+  border-radius: 10px;
+  user-select: text;
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.2s ease-in-out,
+    transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &:active {
+    transform: scale(0.95);
+    filter: brightness(0.8);
+  }
+}
+</style>

apps/frontend/src/components/ui/ModerationChecklist.vue

@@ -9,7 +9,7 @@
       </h1>
       <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
         <button v-tooltip="`Exit moderation`" @click="exitModeration">
-          <XIcon />
+          <CrossIcon />
         </button>
       </ButtonStyled>
       <ButtonStyled circular>
@@ -306,7 +306,7 @@
           <div class="flex items-center gap-2">
             <ButtonStyled v-if="!done">
               <button aria-label="Skip" @click="goToNextProject">
-                <XIcon aria-hidden="true" />
+                <ExitIcon aria-hidden="true" />
                 <template v-if="futureProjects.length > 0">Skip</template>
                 <template v-else>Exit</template>
               </button>
@@ -335,7 +335,7 @@
               <div class="joined-buttons">
                 <ButtonStyled color="red">
                   <button @click="sendMessage('rejected')">
-                    <XIcon aria-hidden="true" /> Reject
+                    <CrossIcon aria-hidden="true" /> Reject
                   </button>
                 </ButtonStyled>
                 <ButtonStyled color="red">
@@ -373,8 +373,9 @@ import {
   UpdatedIcon,
   CheckIcon,
   DropdownIcon,
+  XIcon as CrossIcon,
   EyeOffIcon,
-  XIcon,
+  ExitIcon,
   ScaleIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";
@@ -653,11 +654,11 @@ For a brief rundown of how this works:
         {
           name: "Insufficient",
           resultingMessage: `## Insufficient Gallery Images
-We ask that projects like yours show off their content using images in the Gallery, or optionally in the Description, in order to effectively and clearly inform users of its content per section 2.1 of [Modrinth's content rules](https://modrinth.com/legal/rules#general-expectations).
-Keep in mind that you should:
-- Set a featured image that best represents your project.
-- Ensure all your images have titles that accurately label the image, and optionally, details on the contents of the image in the images Description.
-- Upload any relevant images in your Description to your Gallery tab for best results.`,
+        We ask that projects like yours show off their content using images in the Gallery, or optionally in the Description, in order to effectively and clearly inform users of its content per section 2.1 of [Modrinth's content rules](https://modrinth.com/legal/rules#general-expectations).
+        Keep in mind that you should:
+        - Set a featured image that best represents your project.
+        - Ensure all your images have titles that accurately label the image, and optionally, details on the contents of the image in the images Description.
+        - Upload any relevant images in your Description to your Gallery tab for best results.`,
         },
         {
           name: "Not relevant",

apps/frontend/src/components/ui/NewsletterButton.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
-import { MailIcon, CheckIcon } from "@modrinth/assets";
-import { ref, watchEffect } from "vue";
-import { useBaseFetch } from "~/composables/fetch.js";
-
-const auth = await useAuth();
-const showSubscriptionConfirmation = ref(false);
-const subscribed = ref(false);
-
-async function checkSubscribed() {
-  if (auth.value?.user) {
-    try {
-      const { data } = await useBaseFetch("auth/email/subscribe", {
-        method: "GET",
-      });
-      subscribed.value = data?.subscribed || false;
-    } catch {
-      subscribed.value = false;
-    }
-  }
-}
-
-watchEffect(() => {
-  checkSubscribed();
-});
-
-async function subscribe() {
-  try {
-    await useBaseFetch("auth/email/subscribe", {
-      method: "POST",
-    });
-    showSubscriptionConfirmation.value = true;
-  } catch {
-  } finally {
-    setTimeout(() => {
-      showSubscriptionConfirmation.value = false;
-      subscribed.value = true;
-    }, 2500);
-  }
-}
-</script>
-
-<template>
-  <ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
-    <button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
-      <template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
-      <template v-else> <CheckIcon /> Subscribed! </template>
-    </button>
-  </ButtonStyled>
-</template>

apps/frontend/src/components/ui/NotificationItem.vue

@@ -104,13 +104,13 @@
         </nuxt-link>
         <template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
           has been
-          <ProjectStatusBadge :status="notification.body.new_status" />
+          <Badge :type="notification.body.new_status" />
         </template>
         <template v-else>
           updated from
-          <ProjectStatusBadge :status="notification.body.old_status" />
+          <Badge :type="notification.body.old_status" />
           to
-          <ProjectStatusBadge :status="notification.body.new_status" />
+          <Badge :type="notification.body.new_status" />
         </template>
         by the moderators.
       </template>
@@ -331,13 +331,16 @@ import {
   XIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { Avatar, ProjectStatusBadge, CopyCode, useRelativeTime } from "@modrinth/ui";
+import { useRelativeTime } from "@modrinth/ui";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
 import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
 import { getUserLink } from "~/helpers/users.js";
 import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
 import { markAsRead } from "~/helpers/notifications.ts";
 import DoubleIcon from "~/components/ui/DoubleIcon.vue";
+import Avatar from "~/components/ui/Avatar.vue";
+import Badge from "~/components/ui/Badge.vue";
+import CopyCode from "~/components/ui/CopyCode.vue";
 import Categories from "~/components/ui/search/Categories.vue";
 
 const app = useNuxtApp();

apps/frontend/src/components/ui/Notifications.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="vue-notification-group experimental-styles-within"
-    :class="{
-      'intercom-present': isIntercomPresent,
-      rightwards: moveNotificationsRight,
-    }"
-  >
+  <div class="vue-notification-group experimental-styles-within">
     <transition-group name="notifs">
       <div
         v-for="(item, index) in notifications"
@@ -85,9 +79,6 @@ import {
   CopyIcon,
 } from "@modrinth/assets";
 const notifications = useNotifications();
-const { isVisible: moveNotificationsRight } = useNotificationRightwards();
-
-const isIntercomPresent = ref(false);
 
 function stopTimer(notif) {
   clearTimeout(notif.timer);
@@ -115,27 +106,6 @@ const createNotifText = (notif) => {
   return text;
 };
 
-function checkIntercomPresence() {
-  isIntercomPresent.value = !!document.querySelector(".intercom-lightweight-app");
-}
-
-onMounted(() => {
-  checkIntercomPresence();
-
-  const observer = new MutationObserver(() => {
-    checkIntercomPresence();
-  });
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  });
-
-  onBeforeUnmount(() => {
-    observer.disconnect();
-  });
-});
-
 function copyToClipboard(notif) {
   const text = createNotifText(notif);
 
@@ -160,19 +130,6 @@ function copyToClipboard(notif) {
     bottom: 0.75rem;
   }
 
-  &.intercom-present {
-    bottom: 5rem;
-  }
-
-  &.rightwards {
-    right: unset !important;
-    left: 1.5rem;
-
-    @media screen and (max-width: 500px) {
-      left: 0.75rem;
-    }
-  }
-
   .vue-notification-wrapper {
     width: 100%;
     overflow: hidden;

apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue

@@ -57,7 +57,7 @@
             <div class="table-cell">
               <BoxIcon />
               <span>{{
-                formatProjectType(
+                $formatProjectType(
                   $getProjectTypeForDisplay(
                     project.project_types?.[0] ?? "project",
                     project.loaders,
@@ -111,7 +111,6 @@
 <script setup>
 import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from "@modrinth/assets";
 import { Button, Modal, Checkbox, CopyCode, Avatar } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
 
 const modalOpen = ref(null);
 

apps/frontend/src/components/ui/Pagination.vue

@@ -0,0 +1,196 @@
+<template>
+  <div v-if="count > 1" class="columns paginates">
+    <a
+      :class="{ disabled: page === 1 }"
+      :tabindex="page === 1 ? -1 : 0"
+      class="left-arrow paginate has-icon"
+      aria-label="Previous Page"
+      :href="linkFunction(page - 1)"
+      @click.prevent="page !== 1 ? switchPage(page - 1) : null"
+    >
+      <LeftArrowIcon />
+    </a>
+    <div
+      v-for="(item, index) in pages"
+      :key="'page-' + item + '-' + index"
+      :class="{
+        'page-number': page !== item,
+        shrink: item > 99,
+      }"
+      class="page-number-container"
+    >
+      <div v-if="item === '-'" class="has-icon">
+        <GapIcon />
+      </div>
+      <a
+        v-else
+        :class="{
+          'page-number current': page === item,
+          shrink: item > 99,
+        }"
+        :href="linkFunction(item)"
+        @click.prevent="page !== item ? switchPage(item) : null"
+      >
+        {{ item }}
+      </a>
+    </div>
+
+    <a
+      :class="{
+        disabled: page === pages[pages.length - 1],
+      }"
+      :tabindex="page === pages[pages.length - 1] ? -1 : 0"
+      class="right-arrow paginate has-icon"
+      aria-label="Next Page"
+      :href="linkFunction(page + 1)"
+      @click.prevent="page !== pages[pages.length - 1] ? switchPage(page + 1) : null"
+    >
+      <RightArrowIcon />
+    </a>
+  </div>
+</template>
+
+<script>
+import { GapIcon, LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
+
+export default {
+  components: {
+    GapIcon,
+    LeftArrowIcon,
+    RightArrowIcon,
+  },
+  props: {
+    page: {
+      type: Number,
+      default: 1,
+    },
+    count: {
+      type: Number,
+      default: 1,
+    },
+    linkFunction: {
+      type: Function,
+      default() {
+        return () => "/";
+      },
+    },
+  },
+  emits: ["switch-page"],
+  computed: {
+    pages() {
+      let pages = [];
+
+      if (this.count > 7) {
+        if (this.page + 3 >= this.count) {
+          pages = [
+            1,
+            "-",
+            this.count - 4,
+            this.count - 3,
+            this.count - 2,
+            this.count - 1,
+            this.count,
+          ];
+        } else if (this.page > 5) {
+          pages = [1, "-", this.page - 1, this.page, this.page + 1, "-", this.count];
+        } else {
+          pages = [1, 2, 3, 4, 5, "-", this.count];
+        }
+      } else {
+        pages = Array.from({ length: this.count }, (_, i) => i + 1);
+      }
+
+      return pages;
+    },
+  },
+  methods: {
+    switchPage(newPage) {
+      this.$emit("switch-page", newPage);
+      if (newPage !== null && newPage !== "" && !isNaN(newPage)) {
+        this.$emit("switch-page", Math.min(Math.max(newPage, 1), this.count));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+a {
+  position: relative;
+  color: var(--color-button-text);
+  box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+  padding: 0.5rem 1rem;
+  margin: 0;
+  border-radius: 2rem;
+  background: var(--color-raised-bg);
+
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.2s ease-in-out,
+    transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;
+
+  &.page-number.current {
+    background: var(--color-brand);
+    color: var(--color-brand-inverted);
+    cursor: default;
+    outline: 2px solid transparent;
+  }
+
+  &.paginate.disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+    filter: grayscale(50%);
+    opacity: 0.5;
+  }
+}
+
+.has-icon {
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 1em;
+  }
+}
+
+.page-number-container,
+a,
+.has-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.paginates {
+  height: 2em;
+  margin: 0.5rem 0;
+
+  > div,
+  .has-icon {
+    margin: 0 0.3em;
+  }
+}
+
+.left-arrow {
+  margin-left: auto !important;
+}
+
+.right-arrow {
+  margin-right: auto !important;
+}
+
+@media screen and (max-width: 400px) {
+  .paginates {
+    font-size: 80%;
+  }
+}
+
+@media screen and (max-width: 530px) {
+  a {
+    width: 2.5rem;
+    padding: 0.5rem 0;
+  }
+}
+</style>

apps/frontend/src/components/ui/ProjectCard.vue

@@ -29,7 +29,7 @@
           {{ author }}
         </nuxt-link>
       </p>
-      <ProjectStatusBadge v-if="status && status !== 'approved'" :status="status" class="status" />
+      <Badge v-if="status && status !== 'approved'" :type="status" class="status" />
     </div>
     <p class="description">
       {{ description }}
@@ -91,16 +91,18 @@
 
 <script>
 import { CalendarIcon, UpdatedIcon, DownloadIcon, HeartIcon } from "@modrinth/assets";
-import { Avatar, ProjectStatusBadge, useRelativeTime } from "@modrinth/ui";
 import Categories from "~/components/ui/search/Categories.vue";
+import Badge from "~/components/ui/Badge.vue";
 import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
+import Avatar from "~/components/ui/Avatar.vue";
+import { useRelativeTime } from "@modrinth/ui";
 
 export default {
   components: {
-    ProjectStatusBadge,
     EnvironmentIndicator,
     Avatar,
     Categories,
+    Badge,
     CalendarIcon,
     UpdatedIcon,
     DownloadIcon,

apps/frontend/src/components/ui/ProjectMemberHeader.vue

@@ -118,7 +118,7 @@ import {
   ScaleIcon,
   DropdownIcon,
 } from "@modrinth/assets";
-import { formatProjectType } from "@modrinth/utils";
+import { formatProjectType } from "~/plugins/shorthands.js";
 import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
 
 const props = defineProps({

apps/frontend/src/components/ui/ShareArticleButtons.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="flex gap-2">
-    <ButtonStyled circular>
-      <a
-        v-tooltip="`Share on Bluesky`"
-        :href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
-        target="_blank"
-      >
-        <BlueskyIcon />
-      </a>
-    </ButtonStyled>
-    <ButtonStyled circular>
-      <a
-        v-tooltip="`Share on Mastodon`"
-        :href="`https://tootpick.org/#text=${encodedUrl}`"
-        target="_blank"
-      >
-        <MastodonIcon />
-      </a>
-    </ButtonStyled>
-    <ButtonStyled circular>
-      <a
-        v-tooltip="`Share on X`"
-        :href="`https://www.x.com/intent/post?url=${encodedUrl}`"
-        target="_blank"
-      >
-        <TwitterIcon />
-      </a>
-    </ButtonStyled>
-    <ButtonStyled circular>
-      <a
-        v-tooltip="`Share via email`"
-        :href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
-        target="_blank"
-      >
-        <MailIcon />
-      </a>
-    </ButtonStyled>
-    <ButtonStyled circular>
-      <button
-        v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
-        :disabled="copied"
-        class="relative grid place-items-center overflow-hidden"
-        @click="copyToClipboard(url)"
-      >
-        <CheckIcon
-          class="absolute transition-all ease-in-out"
-          :class="copied ? 'translate-y-0' : 'translate-y-7'"
-        />
-        <LinkIcon
-          class="absolute transition-all ease-in-out"
-          :class="copied ? '-translate-y-7' : 'translate-y-0'"
-        />
-      </button>
-    </ButtonStyled>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  BlueskyIcon,
-  CheckIcon,
-  LinkIcon,
-  MailIcon,
-  MastodonIcon,
-  TwitterIcon,
-} from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-
-const props = defineProps<{
-  title?: string;
-  url: string;
-}>();
-
-const copied = ref(false);
-const encodedUrl = computed(() => encodeURIComponent(props.url));
-const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));
-
-async function copyToClipboard(text: string) {
-  await navigator.clipboard.writeText(text);
-  copied.value = true;
-  setTimeout(() => {
-    copied.value = false;
-  }, 3000);
-}
-</script>

apps/frontend/src/components/ui/moderation/ChecklistKeybindsModal.vue

@@ -1,116 +0,0 @@
-<template>
-  <NewModal ref="modal" header="Moderation shortcuts" :closable="true">
-    <div>
-      <div class="keybinds-sections">
-        <div class="grid grid-cols-2 gap-x-12 gap-y-3">
-          <div
-            v-for="keybind in keybinds"
-            :key="keybind.id"
-            class="keybind-item flex items-center justify-between gap-4"
-            :class="{
-              'col-span-2': keybinds.length % 2 === 1 && keybinds[keybinds.length - 1] === keybind,
-            }"
-          >
-            <span class="text-sm text-secondary">{{ keybind.description }}</span>
-            <div class="flex items-center gap-1">
-              <kbd
-                v-for="(key, index) in parseKeybindDisplay(keybind.keybind)"
-                :key="`${keybind.id}-key-${index}`"
-                class="keybind-key"
-              >
-                {{ key }}
-              </kbd>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </NewModal>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import NewModal from "@modrinth/ui/src/components/modal/NewModal.vue";
-import { keybinds, type KeybindListener, normalizeKeybind } from "@modrinth/moderation";
-
-const modal = ref<InstanceType<typeof NewModal>>();
-
-function parseKeybindDisplay(keybind: KeybindListener["keybind"]): string[] {
-  const keybinds = Array.isArray(keybind) ? keybind : [keybind];
-  const normalized = keybinds[0];
-  const def = normalizeKeybind(normalized);
-
-  const keys = [];
-
-  if (def.ctrl || def.meta) {
-    keys.push(isMac() ? "CMD" : "CTRL");
-  }
-  if (def.shift) keys.push("SHIFT");
-  if (def.alt) keys.push("ALT");
-
-  const mainKey = def.key
-    .replace("ArrowLeft", "←")
-    .replace("ArrowRight", "→")
-    .replace("ArrowUp", "↑")
-    .replace("ArrowDown", "↓")
-    .replace("Enter", "↵")
-    .replace("Space", "SPACE")
-    .replace("Escape", "ESC")
-    .toUpperCase();
-
-  keys.push(mainKey);
-
-  return keys;
-}
-
-function isMac() {
-  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-}
-
-function show(event?: MouseEvent) {
-  modal.value?.show(event);
-}
-
-function hide() {
-  modal.value?.hide();
-}
-
-defineExpose({
-  show,
-  hide,
-});
-</script>
-
-<style scoped lang="scss">
-.keybind-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-divider);
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--color-contrast);
-
-  + .keybind-key {
-    margin-left: 0.25rem;
-  }
-}
-
-.keybind-item {
-  min-height: 2rem;
-}
-
-@media (max-width: 768px) {
-  .keybinds-sections {
-    .grid {
-      grid-template-columns: 1fr;
-      gap: 0.75rem;
-    }
-  }
-}
-</style>

apps/frontend/src/components/ui/moderation/ModpackPermissionsFlow.vue

@@ -1,422 +0,0 @@
-<template>
-  <div>
-    <h2 v-if="modPackData" class="m-0 mb-2 text-lg font-extrabold">
-      Modpack permissions ({{ Math.min(modPackData.length, currentIndex + 1) }} /
-      {{ modPackData.length }})
-    </h2>
-
-    <div v-if="!modPackData">Loading data...</div>
-
-    <div v-else-if="modPackData.length === 0">
-      <p>All permissions obtained. You may skip this step!</p>
-    </div>
-
-    <div v-else-if="!modPackData[currentIndex]">
-      <p>All permission checks complete!</p>
-    </div>
-
-    <div v-else>
-      <div v-if="modPackData[currentIndex].type === 'unknown'">
-        <p>What is the approval type of {{ modPackData[currentIndex].file_name }}?</p>
-        <div class="input-group">
-          <ButtonStyled
-            v-for="(option, index) in fileApprovalTypes"
-            :key="index"
-            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
-            @click="setStatus(currentIndex, option.id)"
-          >
-            <button>
-              {{ option.name }}
-            </button>
-          </ButtonStyled>
-        </div>
-        <div v-if="modPackData[currentIndex].status !== 'unidentified'" class="flex flex-col gap-1">
-          <label for="proof">
-            <span class="label__title">Proof</span>
-          </label>
-          <input
-            id="proof"
-            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
-            type="text"
-            autocomplete="off"
-            placeholder="Enter proof of status..."
-            @input="persistAll()"
-          />
-          <label for="link">
-            <span class="label__title">Link</span>
-          </label>
-          <input
-            id="link"
-            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
-            type="text"
-            autocomplete="off"
-            placeholder="Enter link of project..."
-            @input="persistAll()"
-          />
-          <label for="title">
-            <span class="label__title">Title</span>
-          </label>
-          <input
-            id="title"
-            v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
-            type="text"
-            autocomplete="off"
-            placeholder="Enter title of project..."
-            @input="persistAll()"
-          />
-        </div>
-      </div>
-
-      <div v-else-if="modPackData[currentIndex].type === 'flame'">
-        <p>
-          What is the approval type of {{ modPackData[currentIndex].title }} (<a
-            :href="modPackData[currentIndex].url"
-            target="_blank"
-            class="text-link"
-            >{{ modPackData[currentIndex].url }}</a
-          >)?
-        </p>
-        <div class="input-group">
-          <ButtonStyled
-            v-for="(option, index) in fileApprovalTypes"
-            :key="index"
-            :color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
-            @click="setStatus(currentIndex, option.id)"
-          >
-            <button>
-              {{ option.name }}
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-
-      <div
-        v-if="
-          ['unidentified', 'no', 'with-attribution'].includes(
-            modPackData[currentIndex].status || '',
-          )
-        "
-      >
-        <p v-if="modPackData[currentIndex].status === 'unidentified'">
-          Does this project provide identification and permission for
-          <strong>{{ modPackData[currentIndex].file_name }}</strong
-          >?
-        </p>
-        <p v-else-if="modPackData[currentIndex].status === 'with-attribution'">
-          Does this project provide attribution for
-          <strong>{{ modPackData[currentIndex].file_name }}</strong
-          >?
-        </p>
-        <p v-else>
-          Does this project provide proof of permission for
-          <strong>{{ modPackData[currentIndex].file_name }}</strong
-          >?
-        </p>
-        <div class="input-group">
-          <ButtonStyled
-            v-for="(option, index) in filePermissionTypes"
-            :key="index"
-            :color="modPackData[currentIndex].approved === option.id ? 'brand' : 'standard'"
-            @click="setApproval(currentIndex, option.id)"
-          >
-            <button>
-              {{ option.name }}
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-4 flex gap-2">
-      <ButtonStyled>
-        <button :disabled="currentIndex <= 0" @click="goToPrevious">
-          <LeftArrowIcon aria-hidden="true" />
-          Previous
-        </button>
-      </ButtonStyled>
-      <ButtonStyled v-if="modPackData && currentIndex < modPackData.length" color="blue">
-        <button :disabled="!canGoNext" @click="goToNext">
-          <RightArrowIcon aria-hidden="true" />
-          {{ currentIndex + 1 >= modPackData.length ? "Complete" : "Next" }}
-        </button>
-      </ButtonStyled>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
-import type {
-  ModerationJudgements,
-  ModerationModpackItem,
-  ModerationModpackResponse,
-  ModerationUnknownModpackItem,
-  ModerationFlameModpackItem,
-  ModerationModpackPermissionApprovalType,
-  ModerationPermissionType,
-} from "@modrinth/utils";
-import { ButtonStyled } from "@modrinth/ui";
-import { ref, computed, watch, onMounted } from "vue";
-import { useLocalStorage } from "@vueuse/core";
-
-const props = defineProps<{
-  projectId: string;
-  modelValue?: ModerationJudgements;
-}>();
-
-const emit = defineEmits<{
-  complete: [];
-  "update:modelValue": [judgements: ModerationJudgements];
-}>();
-
-const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
-  `modpack-permissions-${props.projectId}`,
-  null,
-  {
-    serializer: {
-      read: (v: any) => (v ? JSON.parse(v) : null),
-      write: (v: any) => JSON.stringify(v),
-    },
-  },
-);
-
-const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
-
-const modPackData = ref<ModerationModpackItem[] | null>(null);
-const currentIndex = ref(0);
-
-const fileApprovalTypes: ModerationModpackPermissionApprovalType[] = [
-  {
-    id: "yes",
-    name: "Yes",
-  },
-  {
-    id: "with-attribution-and-source",
-    name: "With attribution and source",
-  },
-  {
-    id: "with-attribution",
-    name: "With attribution",
-  },
-  {
-    id: "no",
-    name: "No",
-  },
-  {
-    id: "permanent-no",
-    name: "Permanent no",
-  },
-  {
-    id: "unidentified",
-    name: "Unidentified",
-  },
-];
-
-const filePermissionTypes: ModerationPermissionType[] = [
-  { id: "yes", name: "Yes" },
-  { id: "no", name: "No" },
-];
-
-function persistAll() {
-  persistedModPackData.value = modPackData.value;
-  persistedIndex.value = currentIndex.value;
-}
-
-watch(
-  modPackData,
-  (newValue) => {
-    persistedModPackData.value = newValue;
-  },
-  { deep: true },
-);
-
-watch(currentIndex, (newValue) => {
-  persistedIndex.value = newValue;
-});
-
-function loadPersistedData(): void {
-  if (persistedModPackData.value) {
-    modPackData.value = persistedModPackData.value;
-  }
-  currentIndex.value = persistedIndex.value;
-}
-
-function clearPersistedData(): void {
-  persistedModPackData.value = null;
-  persistedIndex.value = 0;
-}
-
-async function fetchModPackData(): Promise<void> {
-  try {
-    const data = (await useBaseFetch(`moderation/project/${props.projectId}`, {
-      internal: true,
-    })) as ModerationModpackResponse;
-    const sortedData: ModerationModpackItem[] = [
-      ...Object.entries(data.unknown_files || {})
-        .map(
-          ([sha1, fileName]): ModerationUnknownModpackItem => ({
-            sha1,
-            file_name: fileName,
-            type: "unknown",
-            status: null,
-            approved: null,
-            proof: "",
-            url: "",
-            title: "",
-          }),
-        )
-        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
-      ...Object.entries(data.flame_files || {})
-        .map(
-          ([sha1, info]): ModerationFlameModpackItem => ({
-            sha1,
-            file_name: info.file_name,
-            type: "flame",
-            status: null,
-            approved: null,
-            id: info.id,
-            title: info.title || info.file_name,
-            url: info.url || `https://www.curseforge.com/minecraft/mc-mods/${info.id}`,
-          }),
-        )
-        .sort((a, b) => a.file_name.localeCompare(b.file_name)),
-    ];
-
-    if (modPackData.value) {
-      const existingMap = new Map(modPackData.value.map((item) => [item.sha1, item]));
-
-      sortedData.forEach((item) => {
-        const existing = existingMap.get(item.sha1);
-        if (existing) {
-          Object.assign(item, {
-            status: existing.status,
-            approved: existing.approved,
-            ...(item.type === "unknown" && {
-              proof: (existing as ModerationUnknownModpackItem).proof || "",
-              url: (existing as ModerationUnknownModpackItem).url || "",
-              title: (existing as ModerationUnknownModpackItem).title || "",
-            }),
-            ...(item.type === "flame" && {
-              url: (existing as ModerationFlameModpackItem).url || item.url,
-              title: (existing as ModerationFlameModpackItem).title || item.title,
-            }),
-          });
-        }
-      });
-    }
-
-    modPackData.value = sortedData;
-    persistAll();
-  } catch (error) {
-    console.error("Failed to fetch modpack data:", error);
-    modPackData.value = [];
-    persistAll();
-  }
-}
-
-function goToPrevious(): void {
-  if (currentIndex.value > 0) {
-    currentIndex.value--;
-    persistAll();
-  }
-}
-
-function goToNext(): void {
-  if (modPackData.value && currentIndex.value < modPackData.value.length) {
-    currentIndex.value++;
-
-    if (currentIndex.value >= modPackData.value.length) {
-      const judgements = getJudgements();
-      emit("update:modelValue", judgements);
-      emit("complete");
-      clearPersistedData();
-    } else {
-      persistAll();
-    }
-  }
-}
-
-function setStatus(index: number, status: ModerationModpackPermissionApprovalType["id"]): void {
-  if (modPackData.value && modPackData.value[index]) {
-    modPackData.value[index].status = status;
-    modPackData.value[index].approved = null;
-    persistAll();
-    emit("update:modelValue", getJudgements());
-  }
-}
-
-function setApproval(index: number, approved: ModerationPermissionType["id"]): void {
-  if (modPackData.value && modPackData.value[index]) {
-    modPackData.value[index].approved = approved;
-    persistAll();
-    emit("update:modelValue", getJudgements());
-  }
-}
-
-const canGoNext = computed(() => {
-  if (!modPackData.value || !modPackData.value[currentIndex.value]) return false;
-  const current = modPackData.value[currentIndex.value];
-  return current.status !== null;
-});
-
-function getJudgements(): ModerationJudgements {
-  if (!modPackData.value) return {};
-
-  const judgements: ModerationJudgements = {};
-
-  modPackData.value.forEach((item) => {
-    if (item.type === "flame") {
-      judgements[item.sha1] = {
-        type: "flame",
-        id: item.id,
-        status: item.status,
-        link: item.url,
-        title: item.title,
-        file_name: item.file_name,
-      };
-    } else if (item.type === "unknown") {
-      judgements[item.sha1] = {
-        type: "unknown",
-        status: item.status,
-        proof: item.proof,
-        link: item.url,
-        title: item.title,
-        file_name: item.file_name,
-      };
-    }
-  });
-
-  return judgements;
-}
-
-onMounted(() => {
-  loadPersistedData();
-  if (!modPackData.value) {
-    fetchModPackData();
-  }
-});
-
-watch(
-  () => props.projectId,
-  () => {
-    clearPersistedData();
-    loadPersistedData();
-    if (!modPackData.value) {
-      fetchModPackData();
-    }
-  },
-);
-</script>
-
-<style scoped>
-.input-group {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.modpack-buttons {
-  margin-top: 1rem;
-}
-</style>

apps/frontend/src/components/ui/news/LatestNewsRow.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="mx-2 p-4 !py-8 sm:mx-8 sm:p-32">
-    <div class="my-8 flex items-center justify-between">
-      <h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
-    </div>
-
-    <div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
-      <div
-        v-for="(article, index) in latestArticles"
-        :key="article.slug"
-        :class="{ 'max-xl:hidden': index === 2 }"
-      >
-        <NewsArticleCard :article="article" />
-      </div>
-    </div>
-    <div class="mx-2 my-8 flex w-full items-center justify-center">
-      <ButtonStyled color="brand" size="large">
-        <nuxt-link to="/news">
-          <NewspaperIcon />
-          View all news
-        </nuxt-link>
-      </ButtonStyled>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { NewspaperIcon } from "@modrinth/assets";
-import { articles as rawArticles } from "@modrinth/blog";
-import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
-import { ref, computed } from "vue";
-
-const articles = ref(
-  rawArticles
-    .map((article) => ({
-      ...article,
-      path: `/news/article/${article.slug}/`,
-      thumbnail: article.thumbnail
-        ? `/news/article/${article.slug}/thumbnail.webp`
-        : `/news/default.webp`,
-      title: article.title,
-      summary: article.summary,
-      date: article.date,
-    }))
-    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
-);
-
-const latestArticles = computed(() => articles.value.slice(0, 3));
-</script>

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -11,8 +11,8 @@
         <div class="stacked">
           <span class="title">{{ report.project.title }}</span>
           <span>{{
-            formatProjectType(
-              getProjectTypeForUrl(report.project.project_type, report.project.loaders),
+            $formatProjectType(
+              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -53,8 +53,8 @@
         <div class="stacked">
           <span class="title">{{ report.project.title }}</span>
           <span>{{
-            formatProjectType(
-              getProjectTypeForUrl(report.project.project_type, report.project.loaders),
+            $formatProjectType(
+              $getProjectTypeForUrl(report.project.project_type, report.project.loaders),
             )
           }}</span>
         </div>
@@ -104,11 +104,12 @@
 
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
-import { Avatar, Badge, CopyCode, useRelativeTime } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
 import { renderHighlightedString } from "~/helpers/highlight.js";
+import { useRelativeTime } from "@modrinth/ui";
+import Avatar from "~/components/ui/Avatar.vue";
+import Badge from "~/components/ui/Badge.vue";
 import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import { getProjectTypeForUrl } from "~/helpers/projects.js";
+import CopyCode from "~/components/ui/CopyCode.vue";
 
 const formatRelativeTime = useRelativeTime();
 
@@ -172,7 +173,6 @@ const flags = useFeatureFlags();
 
   .markdown-body {
     grid-area: body;
-    max-width: 100%;
   }
 
   .reporter-info {

apps/frontend/src/components/ui/search/Categories.vue

@@ -4,14 +4,12 @@
     <span
       v-for="category in categoriesFiltered"
       :key="category.name"
-      v-html="category.icon + formatCategory(category.name)"
+      v-html="category.icon + $formatCategory(category.name)"
     />
   </div>
 </template>
 
 <script>
-import { formatCategory } from "@modrinth/utils";
-
 export default {
   props: {
     categories: {
@@ -40,7 +38,6 @@ export default {
         );
     },
   },
-  methods: { formatCategory },
 };
 </script>
 

apps/frontend/src/components/ui/servers/BackupItem.vue

@@ -16,7 +16,7 @@ import {
 } from "@modrinth/assets";
 import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from "@modrinth/ui";
 import { defineMessages, useVIntl } from "@vintl/vintl";
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import type { Backup } from "@modrinth/utils";
 
 const flags = useFeatureFlags();
@@ -52,10 +52,9 @@ const failedToCreate = computed(() => props.backup.interrupted);
 const preparedDownloadStates = ["ready", "done"];
 const inactiveStates = ["failed", "cancelled"];
 
-const hasPreparedDownload = computed(() => {
-  const fileState = props.backup.task?.file?.state ?? "";
-  return preparedDownloadStates.includes(fileState);
-});
+const hasPreparedDownload = computed(() =>
+  preparedDownloadStates.includes(props.backup.task?.file?.state ?? ""),
+);
 
 const creating = computed(() => {
   const task = props.backup.task?.create;
@@ -82,10 +81,6 @@ const restoring = computed(() => {
 const initiatedPrepare = ref(false);
 
 const preparingFile = computed(() => {
-  if (hasPreparedDownload.value) {
-    return false;
-  }
-
   const task = props.backup.task?.file;
   return (
     (!task && initiatedPrepare.value) ||

apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue

@@ -2,7 +2,7 @@
   <NewModal ref="modModal" :header="`Editing ${type.toLocaleLowerCase()} version`">
     <template #title>
       <div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
-        <Avatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
+        <UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
         <span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
       </div>
     </template>
@@ -31,9 +31,9 @@
                 class="flex cursor-pointer items-center gap-1 bg-transparent p-0"
                 @click="
                   versionFilter &&
-                  (unlockFilterAccordion.isOpen
-                    ? unlockFilterAccordion.close()
-                    : unlockFilterAccordion.open())
+                    (unlockFilterAccordion.isOpen
+                      ? unlockFilterAccordion.close()
+                      : unlockFilterAccordion.open())
                 "
               >
                 <TagItem
@@ -185,7 +185,7 @@
             Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
             Please try again later or contact support if the issue persists.
           </span>
-          <CopyCode class="!mt-2 !break-all" :text="versionsError" />
+          <LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
         </div>
       </Admonition>
 
@@ -236,7 +236,7 @@ import {
   GameIcon,
   ExternalIcon,
 } from "@modrinth/assets";
-import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from "@modrinth/ui";
+import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
 import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
 import { ref, computed } from "vue";
 import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";

apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue

@@ -39,7 +39,7 @@
                   />
                   <XCircleIcon
                     v-show="
-                      item.status.includes('error') ||
+                      item.status === 'error' ||
                       item.status === 'cancelled' ||
                       item.status === 'incorrect-type'
                     "
@@ -54,14 +54,9 @@
                 <template v-if="item.status === 'completed'">
                   <span>Done</span>
                 </template>
-                <template v-else-if="item.status === 'error-file-exists'">
+                <template v-else-if="item.status === 'error'">
                   <span class="text-red">Failed - File already exists</span>
                 </template>
-                <template v-else-if="item.status === 'error-generic'">
-                  <span class="text-red"
-                    >Failed - {{ item.error?.message || "An unexpected error occured." }}</span
-                  >
-                </template>
                 <template v-else-if="item.status === 'incorrect-type'">
                   <span class="text-red">Failed - Incorrect file type</span>
                 </template>
@@ -109,17 +104,9 @@ import { FSModule } from "~/composables/servers/modules/fs.ts";
 interface UploadItem {
   file: File;
   progress: number;
-  status:
-    | "pending"
-    | "uploading"
-    | "completed"
-    | "error-file-exists"
-    | "error-generic"
-    | "cancelled"
-    | "incorrect-type";
+  status: "pending" | "uploading" | "completed" | "error" | "cancelled" | "incorrect-type";
   size: string;
   uploader?: any;
-  error?: Error;
 }
 
 interface Props {
@@ -258,18 +245,8 @@ const uploadFile = async (file: File) => {
     console.error("Error uploading file:", error);
     const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
     if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      const target = uploadQueue.value[index];
-
-      if (error instanceof Error) {
-        if (error.message === badFileTypeMsg) {
-          target.status = "incorrect-type";
-        } else if (target.progress === 100 && error.message.includes("401")) {
-          target.status = "error-file-exists";
-        } else {
-          target.status = "error-generic";
-          target.error = error;
-        }
-      }
+      uploadQueue.value[index].status =
+        error instanceof Error && error.message === badFileTypeMsg ? "incorrect-type" : "error";
     }
 
     setTimeout(async () => {

apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue

@@ -1,147 +1,124 @@
 <template>
-  <NewModal ref="mrpackModal" header="Uploading mrpack" :closable="!isLoading" @show="onShow">
+  <NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
     <div class="flex flex-col gap-4 md:w-[600px]">
-      <AppearingProgressBar :max-value="totalBytes" :current-value="uploadedBytes" />
-
-      <Transition
-        enter-active-class="transition-all duration-300 ease-out"
-        enter-from-class="opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-20"
-        leave-active-class="transition-all duration-200 ease-in"
-        leave-from-class="opacity-100 max-h-20"
-        leave-to-class="opacity-0 max-h-0"
+      <p
+        v-if="isMrpackModalSecondPhase"
+        :style="{
+          lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
+          marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
+          marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
+        }"
       >
-        <div v-if="!isLoading" class="flex flex-col gap-4">
-          <p
-            v-if="isMrpackModalSecondPhase"
-            :style="{
-              lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
-              marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
-              marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
-            }"
+        This will reinstall your server and erase all data. You may want to back up your server
+        before proceeding. Are you sure you want to continue?
+      </p>
+      <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
+        <div class="mx-auto flex flex-row items-center gap-4">
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
           >
-            This will reinstall your server and erase all data. You may want to back up your server
-            before proceeding. Are you sure you want to continue?
-          </p>
-          <div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
-            <div class="mx-auto flex flex-row items-center gap-4">
-              <div
-                class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-              >
-                <UploadIcon class="size-10" />
-              </div>
-              <ArrowBigRightDashIcon class="size-10" />
-              <div
-                class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-              >
-                <ServerIcon class="size-10" />
-              </div>
-            </div>
-            <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-              <div class="text-sm font-bold text-contrast">Upload mrpack</div>
-              <input
-                type="file"
-                accept=".mrpack"
-                class=""
-                :disabled="isLoading"
-                @change="uploadMrpack"
-              />
-            </div>
-
-            <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-              <div class="flex w-full flex-row items-center justify-between">
-                <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-                  Erase all data
-                </label>
-                <input
-                  id="hard-reset"
-                  v-model="hardReset"
-                  class="switch stylized-toggle shrink-0"
-                  type="checkbox"
-                />
-              </div>
-              <div>
-                Removes all data on your server, including your worlds, mods, and configuration
-                files, then reinstalls it with the selected version.
-              </div>
-              <div class="font-bold">
-                This does not affect your backups, which are stored off-site.
-              </div>
-            </div>
-
-            <BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
+            <UploadIcon class="size-10" />
           </div>
-          <div class="mt-4 flex justify-start gap-4">
-            <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-              <button
-                v-tooltip="backupInProgress ? backupInProgress.tooltip : undefined"
-                :disabled="canInstall || !!backupInProgress"
-                @click="handleReinstall"
-              >
-                <RightArrowIcon />
-                {{
-                  isMrpackModalSecondPhase
-                    ? "Erase and install"
-                    : loadingServerCheck
-                      ? "Loading..."
-                      : isDangerous
-                        ? "Erase and install"
-                        : "Install"
-                }}
-              </button>
-            </ButtonStyled>
-            <ButtonStyled>
-              <button
-                :disabled="isLoading"
-                @click="
-                  () => {
-                    if (isMrpackModalSecondPhase) {
-                      isMrpackModalSecondPhase = false;
-                    } else {
-                      hide();
-                    }
-                  }
-                "
-              >
-                <XIcon />
-                {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
-              </button>
-            </ButtonStyled>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-10"
+          >
+            <path d="M5 9v6" />
+            <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+          </svg>
+          <div
+            class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
+          >
+            <ServerIcon class="size-10" />
           </div>
         </div>
-      </Transition>
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="text-sm font-bold text-contrast">Upload mrpack</div>
+          <input
+            type="file"
+            accept=".mrpack"
+            class=""
+            :disabled="isLoading"
+            @change="uploadMrpack"
+          />
+        </div>
+
+        <div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
+          <div class="flex w-full flex-row items-center justify-between">
+            <label class="w-full text-lg font-bold text-contrast" for="hard-reset">
+              Erase all data
+            </label>
+            <input
+              id="hard-reset"
+              v-model="hardReset"
+              class="switch stylized-toggle shrink-0"
+              type="checkbox"
+            />
+          </div>
+          <div>
+            Removes all data on your server, including your worlds, mods, and configuration files,
+            then reinstalls it with the selected version.
+          </div>
+          <div class="font-bold">This does not affect your backups, which are stored off-site.</div>
+        </div>
+
+        <BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
+      </div>
+      <div class="mt-4 flex justify-start gap-4">
+        <ButtonStyled :color="isDangerous ? 'red' : 'brand'">
+          <button
+            v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
+            :disabled="canInstall || backupInProgress"
+            @click="handleReinstall"
+          >
+            <RightArrowIcon />
+            {{
+              isMrpackModalSecondPhase
+                ? "Erase and install"
+                : loadingServerCheck
+                  ? "Loading..."
+                  : isDangerous
+                    ? "Erase and install"
+                    : "Install"
+            }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button
+            :disabled="isLoading"
+            @click="
+              () => {
+                if (isMrpackModalSecondPhase) {
+                  isMrpackModalSecondPhase = false;
+                } else {
+                  hide();
+                }
+              }
+            "
+          >
+            <XIcon />
+            {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
+          </button>
+        </ButtonStyled>
+      </div>
     </div>
   </NewModal>
 </template>
 
 <script setup lang="ts">
-import { BackupWarning, ButtonStyled, NewModal, AppearingProgressBar } from "@modrinth/ui";
-import {
-  UploadIcon,
-  RightArrowIcon,
-  XIcon,
-  ServerIcon,
-  ArrowBigRightDashIcon,
-} from "@modrinth/assets";
-import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
-import { onMounted, onUnmounted } from "vue";
+import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
+import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
+import { ModrinthServersFetchError } from "@modrinth/utils";
 import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
-
-const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-  if (isLoading.value) {
-    event.preventDefault();
-    return "Upload in progress. Are you sure you want to leave?";
-  }
-};
-
-onMounted(() => {
-  window.addEventListener("beforeunload", handleBeforeUnload);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("beforeunload", handleBeforeUnload);
-});
+import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
 
 const props = defineProps<{
   server: ModrinthServer;
@@ -158,8 +135,6 @@ const hardReset = ref(false);
 const isLoading = ref(false);
 const loadingServerCheck = ref(false);
 const mrpackFile = ref<File | null>(null);
-const uploadedBytes = ref(0);
-const totalBytes = ref(0);
 
 const isDangerous = computed(() => hardReset.value);
 const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
@@ -178,32 +153,18 @@ const handleReinstall = async () => {
     return;
   }
 
-  if (!mrpackFile.value) {
-    addNotification({
-      group: "server",
-      title: "No file selected",
-      text: "Choose a .mrpack file before installing.",
-      type: "error",
-    });
-    return;
-  }
-
   isLoading.value = true;
-  uploadedBytes.value = 0;
-  totalBytes.value = mrpackFile.value.size;
-
-  const { onProgress, promise } = props.server.general.reinstallFromMrpack(
-    mrpackFile.value,
-    hardReset.value,
-  );
-
-  onProgress(({ loaded, total }) => {
-    uploadedBytes.value = loaded;
-    totalBytes.value = total;
-  });
 
   try {
-    await promise;
+    if (!mrpackFile.value) {
+      throw new Error("No mrpack file selected");
+    }
+
+    const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
+      type: mrpackFile.value.type,
+    });
+
+    await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
 
     emit("reinstall", {
       loader: "mrpack",
@@ -215,18 +176,18 @@ const handleReinstall = async () => {
     window.scrollTo(0, 0);
     hide();
   } catch (error) {
-    if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
+    if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
       addNotification({
         group: "server",
-        title: "Cannot upload and install modpack to server",
+        title: "Cannot reinstall server",
         text: "You are being rate limited. Please try again later.",
         type: "error",
       });
     } else {
       addNotification({
         group: "server",
-        title: "Modpack upload and install failed",
-        text: "An unexpected error occurred while uploading/installing. Please try again later.",
+        title: "Reinstall Failed",
+        text: "An unexpected error occurred while reinstalling. Please try again later.",
         type: "error",
       });
     }
@@ -234,14 +195,17 @@ const handleReinstall = async () => {
     isLoading.value = false;
   }
 };
+
 const onShow = () => {
   hardReset.value = false;
   isMrpackModalSecondPhase.value = false;
   loadingServerCheck.value = false;
   isLoading.value = false;
   mrpackFile.value = null;
-  uploadedBytes.value = 0;
-  totalBytes.value = 0;
+};
+
+const onHide = () => {
+  onShow();
 };
 
 const show = () => mrpackModal.value?.show();