fix: typo

* feat: consistently format all HTML, XML, JSON, CSS, JS, TS, SQL, TOML, YAML, and Markdown files

* chore: deal with VS Code not being able to parse valid editorconfig syntax

Sometimes I'm surprised that computers even work.

* chore: get rid of IntelliJ IDE config files that should not be there

These were already added to the `.gitignore` a long time ago, and now
are being ignored by Prettier.

* fix: rename `tooling-config` `format` script to `fix` for it to run with Turbo

.cargo/config.toml

@@ -1,6 +1,9 @@
-# Windows has stack overflows when calling from Tauri, so we increase compiler size
+# 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"]
+rustflags = ["-C", "link-args=/STACK:16777220", "--cfg", "tokio_unstable"]
+
+[target.x86_64-pc-windows-msvc]
+linker = "rust-lld"
 
 [build]
 rustflags = ["--cfg", "tokio_unstable"]

.dockerignore

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

.editorconfig

@@ -3,16 +3,23 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
+indent_style = tab
-indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 max_line_length = 100
 
 [*.md]
+indent_size = 2
 max_line_length = off
-trim_trailing_whitespace = false
 
-[*.rs]
+[*.toml]
-indent_size = 4
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+# YAML requires space indentation by spec
+[*.{yml,yaml}]
+indent_size = 2
+indent_style = space

.gitattributes

@@ -1 +1,35 @@
 * 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/astralrinth-build.yml

@@ -0,0 +1,153 @@
+name: AstralRinth App build
+
+on:
+  push:
+    branches:
+      - main
+      - feature*
+    tags:
+      - 'v*'
+    paths:
+      - .github/workflows/astralrinth-build.yml
+      - 'apps/app/**'
+      - 'apps/app-frontend/**'
+      - 'packages/app-lib/**'
+      - 'packages/app-macros/**'
+      - 'packages/assets/**'
+      - 'packages/ui/**'
+      - 'packages/utils/**'
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Build
+    strategy:
+      fail-fast: false
+      matrix:
+        # platform: [macos-latest, windows-latest, ubuntu-latest]
+        platform: [windows-latest, ubuntu-latest]
+        include:
+          # - platform: macos-latest
+          #   artifact-target-name: universal-apple-darwin
+          - platform: windows-latest
+            artifact-target-name: x86_64-pc-windows-msvc
+          - platform: ubuntu-latest
+            artifact-target-name: x86_64-unknown-linux-gnu
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: 🔍 Validate Git config does not introduce CRLF
+        shell: bash
+        run: |
+          echo "🔍 Checking Git config for CRLF settings..."
+
+          autocrlf=$(git config --get core.autocrlf || echo "unset")
+          eol_setting=$(git config --get core.eol || echo "unset")
+
+          echo "core.autocrlf = $autocrlf"
+          echo "core.eol = $eol_setting"
+
+          if [ "$autocrlf" = "true" ]; then
+            echo "⚠️ WARNING: core.autocrlf is set to 'true'. Consider setting it to 'input' or 'false'."
+          fi
+
+          if [ "$eol_setting" = "crlf" ]; then
+            echo "⚠️ WARNING: core.eol is set to 'crlf'. Consider unsetting it or setting to 'lf'."
+          fi
+
+      - name: 🔍 Check migration files line endings (LF only)
+        shell: bash
+        run: |
+          echo "🔍 Scanning migration SQL files for CR characters (\\r)..."
+          if grep -Iq $'\r' packages/app-lib/migrations/*.sql; then
+            echo "❌ ERROR: Some migration files contain CR (\\r) characters — expected only LF line endings."
+            exit 1
+          fi
+          echo "✅ All migration files use LF line endings"
+
+      - name: 🧰 Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          target: ${{ matrix.artifact-target-name }}
+
+      - 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: matrix.platform == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -yq \
+            libgtk-3-dev \
+            libwebkit2gtk-4.1-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev \
+            xdg-utils \
+            openjdk-11-jdk
+  
+      - name: ⚙️ Set application environment
+        shell: bash
+        run: |
+          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 (jsign)
+        if: matrix.platform == 'windows-latest' && env.SIGN_WINDOWS_BINARIES == 'true'
+        shell: bash
+        run: |
+          choco install jsign --ignore-dependencies
+
+      - name: 🗑️ Clean up cached bundles
+        shell: bash
+        run: |
+          rm -rf target/release/bundle
+          rm -rf target/*/release/bundle || true
+
+      # - name: 🔨 Build macOS app
+      #   if: matrix.platform == 'macos-latest'
+      #   run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
+      #   env:
+      #     TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+      #     TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: 🔨 Build Linux app
+        if: matrix.platform == 'ubuntu-latest'
+        run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
+        env:
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: 🔨 Build Windows app
+        if: matrix.platform == 'windows-latest'
+        shell: pwsh
+        run: |
+          $env:JAVA_HOME = "$env:JAVA_HOME_11_X64"
+          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis'
+        env:
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: 📤 Upload app bundles
+        uses: actions/upload-artifact@v3
+        with:
+          name: App bundle (${{ matrix.artifact-target-name }})
+          path: |
+            target/release/bundle/**
+            target/*/release/bundle/**

.github/workflows/theseus-release.yml

@@ -1,151 +0,0 @@
-name: 'AstralRinth App build'
-on:
-  push:
-    branches:
-      - feature*
-    tags:
-      - 'build*'
-      - '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:
-
-jobs:
-  build:
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-latest]
-
-    runs-on: ${{ matrix.platform }}
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Rust setup (mac)
-        if: startsWith(matrix.platform, 'macos')
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-          targets: aarch64-apple-darwin, x86_64-apple-darwin
-
-      - name: Rust setup
-        if: "!startsWith(matrix.platform, 'macos')"
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - 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: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: Install pnpm via corepack
-        shell: bash
-        run: |
-          corepack enable
-          corepack prepare --activate
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - 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-
-
-      - 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
-
-      - 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 }}
-          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

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/code.iml

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/apps/daedalus_client/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/daedalus/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/app-playground/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/app/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
-      <excludeFolder url="file://$MODULE_DIR$/target" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/discord.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DiscordProjectSettings">
-    <option name="show" value="PROJECT_FILES" />
-    <option name="description" value="" />
-  </component>
-</project>

.idea/libraries/KotlinJavaRuntime.xml

@@ -1,26 +0,0 @@
-<component name="libraryTable">
-  <library name="KotlinJavaRuntime" type="repository">
-    <properties maven-id="org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.0" />
-    <CLASSES>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0.jar!/" />
-    </CLASSES>
-    <JAVADOC>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-javadoc.jar!/" />
-    </JAVADOC>
-    <SOURCES>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-sources.jar!/" />
-    </SOURCES>
-  </library>
-</component>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/code.iml" filepath="$PROJECT_DIR$/.idea/code.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

.nvmrc

@@ -0,0 +1 @@
+20.19.2

.prettierignore

@@ -0,0 +1,3 @@
+Cargo.lock
+pnpm-lock.yaml
+.github/**/*.png

.vscode/settings.json

@@ -2,7 +2,14 @@
 	"prettier.endOfLine": "lf",
 	"editor.formatOnSave": true,
 	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+	"editor.detectIndentation": false,
+	"editor.insertSpaces": false,
+	"files.eol": "\n",
+	"files.trimTrailingWhitespace": true,
+	"files.insertFinalNewline": true,
 	"editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+		"source.fixAll.eslint": "explicit",
-  }
+		"source.organizeImports": "always"
+	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode"
 }

COPYING.md

@@ -2,7 +2,7 @@
 
 All packages in this repository are licensed under their respective licenses. For more information, refer to the LICENSE file in each package.
 
-For detailed information, consult each package's COPYING.md file, if available.
+For detailed information, consult each package's COPYING.md, LICENSE.txt, or LICENSE file, if available.
 
 ## Modrinth Branding
 

Cargo.toml

@@ -1,25 +1,235 @@
 [workspace]
-resolver = '2'
+resolver = "2"
 members = [
-  './packages/app-lib',
+	"apps/app",
-	'./apps/app-playground',
+	"apps/app-playground",
-  './apps/app',
+	"apps/daedalus_client",
-  './apps/labrinth',
+	"apps/labrinth",
-    './apps/daedalus_client',
+	"packages/app-lib",
-    './packages/daedalus',
+	"packages/ariadne",
-    './packages/ariadne',
+	"packages/daedalus",
 ]
 
+[workspace.package]
+edition = "2024"
+
+[workspace.dependencies]
+actix-cors = "0.7.1"
+actix-files = "0.6.6"
+actix-http = "3.11.0"
+actix-multipart = "0.7.2"
+actix-rt = "2.10.0"
+actix-web = "4.11.0"
+actix-web-prom = "0.10.0"
+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.27", default-features = false }
+async-recursion = "1.1.1"
+async-stripe = { version = "0.41.0", default-features = false, features = [
+	"runtime-tokio-hyper-rustls",
+] }
+async-trait = "0.1.88"
+async-tungstenite = { version = "0.30.0", default-features = false, features = ["futures-03-sink"] }
+async-walkdir = "2.1.0"
+base64 = "0.22.1"
+bitflags = "2.9.1"
+bytemuck = "1.23.1"
+bytes = "1.10.1"
+censor = "0.3.0"
+chardetng = "0.1.17"
+chrono = "0.4.41"
+clap = "4.5.43"
+clickhouse = "0.13.3"
+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.22.0"
+dirs = "6.0.0"
+discord-rich-presence = "0.2.5"
+dotenv-build = "0.1.1"
+dotenvy = "0.15.7"
+dunce = "1.0.5"
+either = "1.15.0"
+encoding_rs = "0.8.35"
+enumset = "1.1.7"
+flate2 = "1.1.2"
+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 = "1.6.0"
+hyper-rustls = { version = "0.27.7", default-features = false, features = [
+	"http1",
+	"native-tokio",
+	"ring",
+	"tls12",
+] }
+hyper-util = "0.1.16"
+iana-time-zone = "0.1.63"
+image = { version = "0.25.6", default-features = false, features = ["rayon"] }
+indexmap = "2.10.0"
+indicatif = "0.18.0"
+itertools = "0.14.0"
+jemalloc_pprof = "0.8.1"
+json-patch = { version = "4.0.0", default-features = false }
+lettre = { version = "0.11.18", default-features = false, features = [
+	"builder",
+	"hostname",
+	"pool",
+	"ring",
+	"rustls",
+	"rustls-native-certs",
+	"smtp-transport",
+] }
+maxminddb = "0.26.0"
+meilisearch-sdk = { version = "0.29.1", default-features = false }
+murmur2 = "0.1.0"
+native-dialog = "0.9.0"
+notify = { version = "8.2.0", default-features = false }
+notify-debouncer-mini = { version = "0.7.0", default-features = false }
+p256 = "0.13.2"
+paste = "1.0.15"
+phf = { version = "0.12.1", features = ["macros"] }
+png = "0.17.16"
+prometheus = "0.14.0"
+quartz_nbt = "0.2.9"
+quick-xml = "0.38.1"
+rand = "=0.8.5" # Locked on 0.8 until argon2 and p256 update to 0.9
+rand_chacha = "=0.3.1" # Locked on 0.3 until we can update rand to 0.9
+redis = "0.32.4"
+regex = "1.11.1"
+reqwest = { version = "0.12.22", default-features = false }
+rgb = "0.8.52"
+rust_decimal = { version = "1.37.2", features = ["serde-with-float", "serde-with-str"] }
+rust_iso3166 = "0.1.14"
+rust-s3 = { version = "0.35.1", default-features = false, features = [
+	"fail-on-err",
+	"tags",
+	"tokio-rustls-tls",
+] }
+rusty-money = "0.4.1"
+sentry = { version = "0.42.0", default-features = false, features = [
+	"backtrace",
+	"contexts",
+	"debug-images",
+	"panic",
+	"reqwest",
+	"rustls",
+] }
+sentry-actix = "0.42.0"
+serde = "1.0.219"
+serde_bytes = "0.11.17"
+serde_cbor = "0.11.2"
+serde_ini = "0.2.0"
+serde_json = "1.0.142"
+serde_with = "3.14.0"
+serde-xml-rs = "0.8.1" # Also an XML (de)serializer, consider dropping yaserde in favor of this
+sha1 = "0.10.6"
+sha1_smol = { version = "1.0.1", features = ["std"] }
+sha2 = "0.10.9"
+spdx = "0.10.9"
+sqlx = { version = "0.8.6", default-features = false }
+sysinfo = { version = "0.36.1", default-features = false }
+tar = "0.4.44"
+tauri = "2.7.0"
+tauri-build = "2.3.1"
+tauri-plugin-deep-link = "2.4.1"
+tauri-plugin-dialog = "2.3.2"
+tauri-plugin-http = "2.5.1"
+tauri-plugin-opener = "2.4.0"
+tauri-plugin-os = "2.3.0"
+tauri-plugin-single-instance = "2.3.2"
+tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
+	"rustls-tls",
+	"zip",
+] }
+tauri-plugin-window-state = "2.4.0"
+tempfile = "3.20.0"
+theseus = { path = "packages/app-lib" }
+thiserror = "2.0.12"
+tikv-jemalloc-ctl = "0.6.0"
+tikv-jemallocator = "0.6.0"
+tokio = "1.47.1"
+tokio-stream = "0.1.17"
+tokio-util = "0.7.16"
+totp-rs = "5.7.0"
+tracing = "0.1.41"
+tracing-actix-web = "0.7.19"
+tracing-error = "0.2.1"
+tracing-subscriber = "0.3.19"
+url = "2.5.4"
+urlencoding = "2.1.3"
+uuid = "1.17.0"
+validator = "0.20.0"
+webp = { version = "0.3.0", default-features = false }
+whoami = "1.6.0"
+winreg = "0.55.0"
+woothee = "0.13.0"
+yaserde = "0.12.0"
+zip = { version = "4.3.0", default-features = false, features = [
+	"bzip2",
+	"deflate",
+	"deflate64",
+	"zstd",
+] }
+zxcvbn = "3.1.0"
+
+[workspace.lints.clippy]
+bool_to_int_with_if = "warn"
+borrow_as_ptr = "warn"
+cfg_not_test = "warn"
+clear_with_drain = "warn"
+cloned_instead_of_copied = "warn"
+collection_is_never_read = "warn"
+dbg_macro = "warn"
+default_trait_access = "warn"
+explicit_iter_loop = "warn"
+filter_map_next = "warn"
+flat_map_option = "warn"
+format_push_string = "warn"
+get_unwrap = "warn"
+large_include_file = "warn"
+large_stack_arrays = "warn"
+manual_assert = "warn"
+manual_instant_elapsed = "warn"
+manual_is_variant_and = "warn"
+manual_let_else = "warn"
+map_unwrap_or = "warn"
+match_bool = "warn"
+needless_collect = "warn"
+negative_feature_names = "warn"
+non_std_lazy_statics = "warn"
+pathbuf_init_then_push = "warn"
+read_zero_byte_vec = "warn"
+redundant_clone = "warn"
+redundant_feature_names = "warn"
+redundant_type_annotations = "warn"
+todo = "warn"
+unnested_or_patterns = "warn"
+wildcard_dependencies = "warn"
+
+[workspace.lints.rust]
+# Turn warnings into errors by default
+warnings = "deny"
+
+[patch.crates-io]
+wry = { git = "https://github.com/modrinth/wry", rev = "f2ce0b0" }
+
 # Optimize for speed and reduce size on release builds
 [profile.release]
-panic = "abort" # Strip expensive panic clean-up logic
-codegen-units = 1 # Compile crates one after another so the compiler can optimize better
-lto = true # Enables link to optimizations
 opt-level = "s"   # Optimize for binary size
 strip = true      # Remove debug symbols
+lto = true        # Enables link to optimizations
+panic = "abort"   # Strip expensive panic clean-up logic
+codegen-units = 1 # Compile crates one after another so the compiler can optimize better
 
 [profile.dev.package.sqlx-macros]
 opt-level = 3
-
-[patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "51907c6" }

README.md

@@ -1,76 +1,123 @@
-# Navigation in this README
+# 📘 Navigation
-- [Install instructions](#install-instructions)
+
-- [Features](#features)
+- [🔧 Install Instructions](#install-instructions)
-- [Getting started](#getting-started)
+- [✨ Features](#features)
-- [Disclaimer](#disclaimer)
+- [🚀 Getting Started](#getting-started)
-- [Donate](#support-our-project-crypto-wallets)
+- [⚠️ Disclaimer](#disclaimer)
+- [💰 Donate](#support-our-project-crypto-wallets)
+
+## Other languages
+> [Русский](readme/ru_ru/README.md)
+
+## Support channel
+> [Telegram](https://me.astralium.su/ref/telegram_channel)
+
+---
 
 # About Project
 
-## AstralRinth • Empowering Your Minecraft Adventure
+## **AstralRinth • Empowering Your Minecraft Adventure**
-Welcome to AR • Fork of Modrinth, the ultimate game launcher designed to enhance your Minecraft experience through the Modrinth platform and their API. Whether you're a graphical interface enthusiast, or a developer integrating Modrinth projects, Theseus core is your gateway to a new level of Minecraft gaming.
 
-## About Software
+Welcome to **AstralRinth (AR)** — a powerful fork of Modrinth, reimagined to enhance your Minecraft journey. Whether you're a GUI enthusiast or a developer building with Modrinth’s API, **Theseus Core** is your launchpad into a new era of Minecraft gameplay.
-Introducing AstralRinth, a specialized variant of Theseus dedicated to implementing offline authorization for an even more flexible and user-centric Minecraft Modrinth experience. Roam the Minecraft realms without the constraints of online authentication, thanks to AstralRinth.
 
-## AR • Unlocking Minecraft's Boundless Horizon
+- *Recently, improved integration with the Git Astralium API has been added.*
-Dive into the extraordinary world of AstralRinth, a fork of the original project with a unique focus on providing a free trial experience for Minecraft, all without the need for a license. Currently boasting:
 
-# Install instructions
+## **About the Software**
-- To install our application, you need to download a file for your operating system from our available releases or development builds • [Download variants here](https://github.com/DIDIRUS4/AstralRinth/releases)
-- After you have downloaded the required executable file or archive, then open it
 
-### Downloadable file extensions
+**AstralRinth** is a dedicated branch of the Theseus project, focused on **offline authentication**, offering you more flexibility and control. Play Minecraft without the need for constant online verification — a user-first approach to modern modded gaming.
-- `.msi` format for Windows OS system _(Supported popular latest versions of Microsoft Windows)_
-- `.dmg` format for MacOS system _(Works on Macos Ventura / Sonoma / Sequoia, but it should be works on older OS builds)_
-- `.deb` format for Linux OS systems _(Since there are quite a few distributions, we do not guarantee 
 
-### Installation subjects
+## **AR • Unlocking Minecraft's Boundless Horizon**
-- Builds in releases that are signed with the following prefixes are not recommended for installation and may contain errors:
+
-  - `dev`
+This unique fork introduces a **free trial Minecraft experience**, bypassing license checks while maintaining rich functionality. Currently includes:
-  - `nightly`
+
-  - `dirty`
+---
-  - `dirty-dev`
+
-  - `dirty-nightly`
+# Install Instructions
-  - `dirty_dev`
+
-  - `dirty_nightly`
+To install the launcher:
-- Auto-updating takes place through parsing special versions from releases, so we also distribute clean types of `.msi, .dmg and .deb`
+
+1. Visit the [releases page](https://git.astralium.su/didirus/AstralRinth/releases) to download the correct version for your system.
+2. Run the downloaded file or extract and launch it, depending on the format.
+
+### Downloadable File Extensions
+
+| Extension | OS      | Notes                                                                 |
+| --------- | ------- | --------------------------------------------------------------------- |
+| `.msi`    | Windows | Supported on all recent Windows versions                              |
+| `.dmg`    | macOS   | Works on Ventura, Sonoma, Sequoia _(may also support older versions)_ |
+| `.deb`    | Linux   | Basic support; compatibility may vary by distribution                 |
+
+### Installation Warnings
+
+Avoid using builds with these prefixes — they may be unstable or experimental:
+
+- `dev`
+- `nightly`
+- `dirty`
+- `dirty-dev`
+- `dirty-nightly`
+- `dirty_dev`
+- `dirty_nightly`
+
+---
 
 # Features
 
-### Featured enhancement in AR
+> _The launcher provides an opportunity to use the well-known Modrinth, but with an improved user experience._
-- AstralRinth offers a range of authorization options, giving users the flexibility to log in with valid licenses or even a pirate account without auth credentials breaks (_Unlike MultiMC Cracked and similar software_). Experience Minecraft on your terms, breaking free from traditional licensing constraints (_Popular in Russian Federation_).
 
-### Easy to use
+## Included exclusive features
-- Using the launcher is intuitive, any user can figure it out.
 
-### Update notifies
+- No ads in the entire launcher.
-- We have implemented notifications about the release of new updates on our Github. The launcher can also download them for you and try to install them.
+- Custom `.svg` vector icons for a distinct UI.
+- Improved compatibility with both licensed and pirate accounts.
+  - Use **official microsoft accounts** or **offline/pirate accounts** — login won't break.
+  - Supports license-free access for testing or personal use.
+  - No dependence on official authentication services.
+- Discord Rich Presence integration:
+  - Dynamic status messages.
+  - In-game timer and AFK counter.
+- Strict disabling of statistics and other Modrinth metrics.
+- Optimized archive/package size.
+- Integrated update fetcher for seamless version management.
+  - Built-in update alerts for new versions posted on Git Astralium.
+  - Automatic download and installation capabilities.
+- Database migration fixes, when error occurred (Interactive Mode) (Modrinth issue)
+- ElyBy skin system integration (AuthLib / Java)
 
-### Enhancements
+---
-- Custom .SVG vectors for a personalized touch.
-- Improved compatibility for both pirate and licensed accounts.
-- Beautiful Discord RPC with random messages while playing, along with an in-game timer and AFK counter.
-- Forced disabling of statistics collection (modrinch metrics) with a hard patch from AstralRinth, ensuring it remains deactivated regardless of the configuration setting.
-- Removal of advertisements from all launcher views.
-- Optimization of packages (archives).
-- Integrated update fetching feature
 
 # Getting Started
-To begin your AstralRinth adventure, follow these steps:
+
-1. **Download Your OS Version**: Head over to our [releases page](https://git.astralium.su/didirus/AstralRinth/releases/) to find the right file for your operating system.
+To begin using AstralRinth:
-   - **Choosing the Correct File**: Ensure you select the file that matches your OS requirements.
+
-   - [**How select file**](#downloadable-file-extensions)
+1. **Download Your OS Version**
-   - [**How select release**](#installation-subjects)
+
-2. **Authentication**: Log in with a valid license or, for testing, try using a pirate account to see AstralRinth in action.
+   - Go to the [releases page](https://git.astralium.su/didirus/AstralRinth/releases)
-3. **Launch Minecraft**: Start your journey by launching Minecraft through AstralRinth and enjoy the adventures that await.
+   - [How to choose a file](#downloadable-file-extensions)
-   - **Choosing java installation**: The launcher will try to automatically detect the recommended JVM version for running the game, but you can configure everything in the launcher settings.
+   - [How to choose a release](#installation-warnings)
+
+2. **Log In**
+
+   - Use your official Mojang/Microsoft account, or test using a non-licensed account.
+
+3. **Launch Minecraft**
+   - Start Minecraft from the launcher.
+   - The launcher will auto-detect the recommended JVM version.
+   - You can also configure Java manually in the settings.
+
+---
 
 # Disclaimer
-- AstralRinth is a project intended for experimentation and educational purposes only. It does not endorse or support piracy, and users are encouraged to obtain valid licenses for a fully-supported Minecraft experience.
-- Users are reminded to respect licensing agreements and support the developers of Minecraft.
 
-# Support our Project (Crypto Wallets)
+- **AstralRinth** is intended **solely for educational and experimental use**.
+- We **do not condone piracy** — users are encouraged to purchase a legitimate Minecraft license.
+- Respect all relevant licensing agreements and support Minecraft developers.
+
+---
+
+# Support Our Project (Crypto Wallets)
+
+If you'd like to support development, you can donate via the following crypto wallets:
+
 - BTC (Telegram): 14g6asNYzcUoaQtB8B2QGKabgEvn55wfLj
-- USDT TRC20 (Telegram): TMSmv1D5Fdf4fipUpwBCdh16WevrV45vGr
 - TONCOIN (Telegram): UQAqUJ2_hVBI6k_gPyfp_jd-1K0OS61nIFPZuJWN9BwGAvKe

apps/app-frontend/.prettierignore

@@ -1 +1,4 @@
 **/dist
+*.gltf
+src/locales/
+src/assets/**/*.svg

apps/app-frontend/eslint.config.mjs

@@ -1,22 +1,2 @@
-import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-import { fixupPluginRules } from '@eslint/compat'
+export default config
-import turboPlugin from 'eslint-plugin-turbo'
-
-export default createConfigForNuxt().append([
-  {
-    name: 'turbo',
-    plugins: {
-      turbo: fixupPluginRules(turboPlugin),
-    },
-    rules: {
-      'turbo/no-undeclared-env-vars': 'error',
-    },
-  },
-  {
-    name: 'modrinth',
-    rules: {
-      'vue/html-self-closing': 'off',
-      'vue/multi-word-component-names': 'off',
-    },
-  },
-])

apps/app-frontend/index.html

@@ -11,6 +11,7 @@
 
 	<body>
 		<div id="app"></div>
+		<script src="https://tally.so/widgets/embed.js" async></script>
 		<script type="module" src="/src/main.js"></script>
 	</body>
 </html>

apps/app-frontend/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@modrinth/app-frontend",
 	"private": true,
-  "version": "0.9.3",
+	"version": "1.0.0-local",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -9,25 +9,31 @@
 		"tsc:check": "vue-tsc --noEmit",
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
-    "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"
+		"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",
+		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
+		"@geometrically/minecraft-motd-parser": "^1.1.4",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
-    "@tauri-apps/api": "^2.1.1",
+		"@tauri-apps/api": "^2.5.0",
-    "@tauri-apps/plugin-dialog": "^2.2.0",
+		"@tauri-apps/plugin-dialog": "^2.2.1",
-    "@tauri-apps/plugin-os": "^2.2.0",
+		"@tauri-apps/plugin-http": "^2.5.0",
-    "@tauri-apps/plugin-opener": "^2.2.1",
+		"@tauri-apps/plugin-opener": "^2.2.6",
-    "@tauri-apps/plugin-updater": "^2.3.0",
+		"@tauri-apps/plugin-os": "^2.2.1",
-    "@tauri-apps/plugin-window-state": "^2.2.0",
+		"@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",
@@ -35,19 +41,19 @@
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
+		"@modrinth/tooling-config": "workspace:*",
 		"@eslint/compat": "^1.1.1",
 		"@formatjs/cli": "^6.2.12",
 		"@nuxt/eslint-config": "^0.5.6",
+		"@taijased/vue-render-tracker": "^1.0.7",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.9.1",
-    "eslint-config-custom": "workspace:*",
+		"eslint-plugin-turbo": "^2.5.4",
-    "eslint-plugin-turbo": "^2.1.1",
 		"postcss": "^8.4.39",
 		"prettier": "^3.2.5",
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
-    "tsconfig": "workspace:*",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.6",
 		"vue-tsc": "^2.1.6"

apps/app-frontend/src/App.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
 	ArrowBigUpDashIcon,
+	ChangeSkinIcon,
 	CompassIcon,
 	DownloadIcon,
 	HomeIcon,
@@ -12,58 +11,82 @@ import {
 	LogOutIcon,
 	MaximizeIcon,
 	MinimizeIcon,
+	NewspaperIcon,
+	NotepadTextIcon,
 	PlusIcon,
 	RestoreIcon,
 	RightArrowIcon,
 	SettingsIcon,
+	WorldIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	ButtonStyled,
+	NewsArticleCard,
+	NotificationPanel,
+	OverflowMenu,
+	provideNotificationManager,
+} 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, set } from '@/helpers/settings'
+import { get, set } 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'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 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 { getOS, isDev, restartApp } from '@/helpers/utils.js'
 import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { getCurrentWindow } from '@tauri-apps/api/window'
+import { renderString } from '@modrinth/utils'
 import { getVersion } from '@tauri-apps/api/app'
-import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import { invoke } from '@tauri-apps/api/core'
-import { create_profile_and_install_from_file } from './helpers/pack'
+import { openUrl } from '@tauri-apps/plugin-opener'
-import { useError } from '@/store/error.js'
+import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { $fetch } from 'ofetch'
-import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+
+import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
 import { useInstall } from '@/store/install.js'
-import { invoke } from '@tauri-apps/api/core'
 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 { cancelLogin, 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 AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
-// import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
+import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.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 URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { list } from '@/helpers/profile.js'
+import { getOS, isDev } from '@/helpers/utils.js'
+import { useError } from '@/store/error.js'
+
+import { create_profile_and_install_from_file } from './helpers/pack'
+import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
+import { get_available_capes, get_available_skins } from './helpers/skins'
+import { AppNotificationManager } from './providers/app-notifications'
+
+// [AR] Feature
+import { getRemote, updateState } from '@/helpers/update.js'
 
 const themeStore = useTheming()
 
+const notificationManager = new AppNotificationManager()
+provideNotificationManager(notificationManager)
+const { handleError, addNotification } = notificationManager
+
 const news = ref([])
+const availableSurvey = ref(false)
 
 const urlModal = ref(null)
 
@@ -88,6 +111,7 @@ const isMaximized = ref(false)
 
 onMounted(async () => {
   await useCheckDisableMouseover()
+  await getRemote(false) // [AR] Check for updates
 
 	document.querySelector('body').addEventListener('click', handleClick)
 	document.querySelector('body').addEventListener('auxclick', handleAuxClick)
@@ -99,15 +123,14 @@ onUnmounted(() => {
 })
 
 async function setupApp() {
-  stateInitialized.value = true
-
   	const settings = await get()
 
-  // Patched
+  	// [AR] Patched
   	settings.personalized_ads = false
   	settings.telemetry = false
   	await set(settings)
 
+	stateInitialized.value = true
 	const {
 		native_decorations,
 		theme,
@@ -120,8 +143,7 @@ async function setupApp() {
 		toggle_sidebar,
 		developer_mode,
 		feature_flags,
-  } = settings
+	} = await get()
-
 
 	if (default_page === 'Library') {
 		await router.push('/library')
@@ -148,13 +170,13 @@ async function setupApp() {
 		isMaximized.value = await getCurrentWindow().isMaximized()
 	})
 
-  initAnalytics()
+  	// initAnalytics()
   	if (!telemetry) {
-    console.info("[AR] Telemetry disabled by default (Hard patched).")
+  	  console.info("[AR] • Telemetry disabled by default (Hard patched).")
   	  optOutAnalytics()
   	}
   	if (!personalized_ads) {
-    console.info("[AR] Personalized ads disabled by default (Hard patched).")
+  	  console.info("[AR] • Personalized ads disabled by default (Hard patched).")
   	}
 
   	if (dev) debugAnalytics()
@@ -170,32 +192,66 @@ async function setupApp() {
 	}
 
 	await warning_listener((e) =>
-    notificationsWrapper.value.addNotification({
+		addNotification({
 			title: 'Warning',
 			text: e.message,
 			type: 'warn',
 		}),
 	)
 
+  	/// [AR] Patch
 	// useFetch(
 	// 	`https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
 	// 	'criticalAnnouncements',
 	// 	true,
-  // ).then((res) => {
+	// )
+	// 	.then((response) => response.json())
+	// 	.then((res) => {
 	// 		if (res && res.header && res.body) {
 	// 			criticalErrorMessage.value = res
 	// 		}
 	// 	})
+	// 	.catch(() => {
+	// 		console.log(
+	// 			`No critical announcement found at https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
+	// 		)
+	// 	})
 
-  useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
+	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)
 			}
 		})
 
 	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 (osType === 'windows') {
+		await processPendingSurveys()
+	} else {
+		console.info('Skipping user surveys on non-Windows platforms')
+	}
 }
 
 const stateFailed = ref(false)
@@ -227,9 +283,6 @@ const route = useRoute()
 const loading = useLoading()
 loading.setEnabled(false)
 
-const notifications = useNotifications()
-const notificationsWrapper = ref()
-
 const error = useError()
 const errorModal = ref()
 
@@ -240,6 +293,8 @@ const incompatibilityWarningModal = ref()
 
 const credentials = ref()
 
+const modrinthLoginFlowWaitModal = ref()
+
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
@@ -249,8 +304,24 @@ async function fetchCredentials() {
 }
 
 async function signIn() {
-  await login().catch(handleError)
+	modrinthLoginFlowWaitModal.value.show()
+
+	try {
+		await login()
 		await fetchCredentials()
+	} catch (error) {
+		if (
+			typeof error === 'object' &&
+			typeof error['message'] === 'string' &&
+			error.message.includes('Login canceled')
+		) {
+			// Not really an error due to being a result of user interaction, show nothing
+		} else {
+			handleError(error)
+		}
+	} finally {
+		modrinthLoginFlowWaitModal.value.hide()
+	}
 }
 
 async function logOut() {
@@ -293,8 +364,6 @@ const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value
 onMounted(() => {
 	invoke('show_window')
 
-  notifications.setNotifs(notificationsWrapper.value)
-
 	error.setErrorModal(errorModal.value)
 
 	install.setIncompatibilityWarningModal(incompatibilityWarningModal)
@@ -303,6 +372,7 @@ onMounted(() => {
 })
 
 const accounts = ref(null)
+provide('accountsCard', accounts)
 
 command_listener(handleCommand)
 async function handleCommand(e) {
@@ -369,15 +439,128 @@ function handleAuxClick(e) {
 		e.target.dispatchEvent(event)
 	}
 }
+
+function cleanupOldSurveyDisplayData() {
+	const threeWeeksAgo = new Date()
+	threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21)
+
+	for (let i = 0; i < localStorage.length; i++) {
+		const key = localStorage.key(i)
+
+		if (key.startsWith('survey-') && key.endsWith('-display')) {
+			const dateValue = new Date(localStorage.getItem(key))
+			if (dateValue < threeWeeksAgo) {
+				localStorage.removeItem(key)
+			}
+		}
+	}
+}
+
+async function openSurvey() {
+	if (!availableSurvey.value) {
+		console.error('No survey to open')
+		return
+	}
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const formId = availableSurvey.value.tally_id
+
+	const popupOptions = {
+		layout: 'modal',
+		width: 700,
+		autoClose: 2000,
+		hideTitle: true,
+		hiddenFields: {
+			user_id: userId,
+		},
+		onOpen: () => console.info('Opened user survey'),
+		onClose: () => {
+			console.info('Closed user survey')
+			// show_ads_window()
+		},
+		onSubmit: () => console.info('Active user survey submitted'),
+	}
+
+	try {
+		// hide_ads_window()
+		if (window.Tally?.openPopup) {
+			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
+			dismissSurvey()
+			window.Tally.openPopup(formId, popupOptions)
+		} else {
+			console.warn('Tally script not yet loaded')
+			// show_ads_window()
+		}
+	} catch (e) {
+		console.error('Error opening Tally popup:', e)
+		// show_ads_window()
+	}
+
+	console.info(`Found user survey to show with tally_id: ${formId}`)
+	window.Tally.openPopup(formId, popupOptions)
+}
+
+function dismissSurvey() {
+	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, new Date())
+	availableSurvey.value = undefined
+}
+
+async function processPendingSurveys() {
+	function isWithinLastTwoWeeks(date) {
+		const twoWeeksAgo = new Date()
+		twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14)
+		return date >= twoWeeksAgo
+	}
+
+	cleanupOldSurveyDisplayData()
+
+	const creds = await getCreds().catch(handleError)
+	const userId = creds?.user_id
+
+	const instances = await list().catch(handleError)
+	const isActivePlayer =
+		instances.findIndex(
+			(instance) =>
+				isWithinLastTwoWeeks(instance.last_played) && !isWithinLastTwoWeeks(instance.created),
+		) >= 0
+
+	let surveys = []
+	try {
+		surveys = await $fetch('https://api.modrinth.com/v2/surveys')
+	} catch (e) {
+		console.error('Error fetching surveys:', e)
+	}
+
+	const surveyToShow = surveys.find(
+		(survey) =>
+			!!(
+				localStorage.getItem(`survey-${survey.id}-display`) === null &&
+				survey.type === 'tally_app' &&
+				((survey.condition === 'active_player' && isActivePlayer) ||
+					(survey.assigned_users?.includes(userId) && !survey.dismissed_users?.includes(userId)))
+			),
+	)
+
+	if (surveyToShow) {
+		availableSurvey.value = surveyToShow
+	} else {
+		console.info('No user survey to show')
+	}
+}
 </script>
 
 <template>
 	<SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
 	<div id="teleports"></div>
-  <div v-if="stateInitialized" class="app-grid-layout relative">
+	<div v-if="stateInitialized" class="app-grid-layout experimental-styles-within relative">
 		<Suspense>
 			<AppSettingsModal ref="settingsModal" />
 		</Suspense>
+		<Suspense>
+			<AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
+		</Suspense>
 		<Suspense>
 			<InstanceCreationModal ref="installationModal" />
 		</Suspense>
@@ -387,6 +570,9 @@ function handleAuxClick(e) {
 			<NavButton v-tooltip.right="'Home'" to="/">
 				<HomeIcon />
 			</NavButton>
+			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
+				<WorldIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -395,6 +581,9 @@ function handleAuxClick(e) {
 			>
 				<CompassIcon />
 			</NavButton>
+			<NavButton v-tooltip.right="'Skins (Beta)'" to="/skins">
+				<ChangeSkinIcon />
+			</NavButton>
 			<NavButton
 				v-tooltip.right="'Library'"
 				to="/library"
@@ -419,12 +608,19 @@ function handleAuxClick(e) {
 				<PlusIcon />
 			</NavButton>
 			<div class="flex flex-grow"></div>
-      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
+			<!-- <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
 				<DownloadIcon />
+			</NavButton> -->
+			<template v-if="updateState">
+      		  <NavButton class="neon-icon pulse" v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
+      		    <SettingsIcon />
       		  </NavButton>
+      		</template>
+      		<template v-else>
       		  <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
       		    <SettingsIcon />
       		  </NavButton>
+      		</template>
 			<ButtonStyled v-if="credentials" type="transparent" circular>
 				<OverflowMenu
 					:options="[
@@ -455,13 +651,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 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 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"
 						@click="router.back()"
 					>
 						<LeftArrowIcon />
 					</button>
 					<button
-            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"
+						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"
 						@click="router.forward()"
 					>
 						<RightArrowIcon />
@@ -488,7 +684,7 @@ function handleAuxClick(e) {
 						<RunningAppBar />
 					</Suspense>
 				</div>
-        <section v-if="!nativeDecorations" class="window-controls">
+				<section v-if="!nativeDecorations" class="window-controls" data-tauri-drag-region-exclude>
 					<Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
 						<MinimizeIcon />
 					</Button>
@@ -513,6 +709,28 @@ function handleAuxClick(e) {
 		:class="{ 'sidebar-enabled': sidebarVisible }"
 	>
 		<div class="app-viewport flex-grow router-view">
+			<transition name="popup-survey">
+				<div
+					v-if="availableSurvey"
+					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-divider border-[1px] border-solid border-b-0 p-4"
+				>
+					<h2 class="text-lg font-extrabold mt-0 mb-2">Hey there Modrinth user!</h2>
+					<p class="m-0 leading-tight">
+						Would you mind answering a few questions about your experience with Modrinth App?
+					</p>
+					<p class="mt-3 mb-4 leading-tight">
+						This feedback will go directly to the Modrinth team and help guide future updates!
+					</p>
+					<div class="flex gap-2">
+						<ButtonStyled color="brand">
+							<button @click="openSurvey"><NotepadTextIcon /> Take survey</button>
+						</ButtonStyled>
+						<ButtonStyled>
+							<button @click="dismissSurvey"><XIcon /> No thanks</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</transition>
 			<div
 				class="loading-indicator-container h-8 fixed z-50"
 				:style="{
@@ -575,38 +793,24 @@ function handleAuxClick(e) {
 							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
 						</suspense>
 					</div>
-          <div v-if="news && news.length > 0" class="pt-4 flex flex-col">
+					<div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
-            <h3 class="px-4 text-lg m-0">News</h3>
+						<h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
-            <template v-for="(item, index) in news" :key="`news-${index}`">
+						<div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
-              <a
+							<NewsArticleCard
-                :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'}`"
+								v-for="(item, index) in news"
-                :href="item.link"
+								:key="`news-${index}`"
-                target="_blank"
+								:article="item"
-                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">
+							<ButtonStyled color="brand" size="large">
-                  {{ item.title }}
+								<a href="https://modrinth.com/news" target="_blank" class="my-4">
-                </h4>
+									<NewspaperIcon /> View all news
-                <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">
-                  {{ dayjs(item.date).fromNow() }}
-                </p>
 								</a>
-              <hr
+							</ButtonStyled>
-                v-if="index !== news.length - 1"
-                class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"
-              />
-            </template>
 						</div>
 					</div>
 				</div>
-      <!-- <template v-if="showAd">
+			</div>
+			<template v-if="showAd">
 				<a
 					href="https://modrinth.plus?app"
 					class="absolute bottom-[250px] w-full flex justify-center items-center gap-1 px-4 py-3 text-purple font-medium hover:underline z-10"
@@ -614,12 +818,12 @@ function handleAuxClick(e) {
 				>
 					<ArrowBigUpDashIcon class="text-2xl" /> Upgrade to Modrinth+
 				</a>
-        <PromotionWrapper />
+				<!-- <PromotionWrapper /> -->
-      </template> -->
+			</template>
 		</div>
 	</div>
 	<URLConfirmModal ref="urlModal" />
-  <Notifications ref="notificationsWrapper" sidebar />
+	<NotificationPanel has-sidebar />
 	<ErrorModal ref="errorModal" />
 	<ModInstallModal ref="modInstallModal" />
 	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
@@ -627,6 +831,9 @@ function handleAuxClick(e) {
 </template>
 
 <style lang="scss" scoped>
+@import '../../../packages/assets/styles/neon-icon.scss';
+@import '../../../packages/assets/styles/neon-text.scss';
+
 .window-controls {
 	z-index: 20;
 	display: none;
@@ -719,6 +926,14 @@ function handleAuxClick(e) {
 	grid-area: status;
 }
 
+[data-tauri-drag-region] {
+	-webkit-app-region: drag;
+}
+
+[data-tauri-drag-region-exclude] {
+	-webkit-app-region: no-drag;
+}
+
 .app-contents {
 	position: absolute;
 	z-index: 1;
@@ -816,6 +1031,26 @@ function handleAuxClick(e) {
 .sidebar-teleport-content:empty + .sidebar-default-content.sidebar-enabled {
 	display: contents;
 }
+
+.popup-survey-enter-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.51, 1.08, 0.35, 1.15);
+	transform-origin: top center;
+}
+
+.popup-survey-leave-active {
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s cubic-bezier(0.68, -0.17, 0.23, 0.11);
+	transform-origin: top center;
+}
+
+.popup-survey-enter-from,
+.popup-survey-leave-to {
+	opacity: 0;
+	transform: translateY(10rem) scale(0.8) scaleY(1.6);
+}
 </style>
 <style>
 .mac {

apps/app-frontend/src/assets/external/index.js

@@ -1,18 +1,18 @@
+export { default as ATLauncherIcon } from './atlauncher.svg'
 export { default as BuyMeACoffeeIcon } from './bmac.svg'
 export { default as DiscordIcon } from './discord.svg'
+export { default as GDLauncherIcon } from './gdlauncher.png'
+export { default as GithubIcon } from './github.svg'
+export { default as GitLabIcon } from './gitlab.svg'
+export { default as GoogleIcon } from './google.svg'
 export { default as KoFiIcon } from './kofi.svg'
+export { default as MastodonIcon } from './mastodon.svg'
+export { default as MicrosoftIcon } from './microsoft.svg'
+export { default as MultiMCIcon } from './multimc.webp'
+export { default as OpenCollectiveIcon } from './opencollective.svg'
 export { default as PatreonIcon } from './patreon.svg'
 export { default as PaypalIcon } from './paypal.svg'
-export { default as OpenCollectiveIcon } from './opencollective.svg'
-export { default as TwitterIcon } from './twitter.svg'
-export { default as GithubIcon } from './github.svg'
-export { default as MastodonIcon } from './mastodon.svg'
-export { default as RedditIcon } from './reddit.svg'
-export { default as GoogleIcon } from './google.svg'
-export { default as MicrosoftIcon } from './microsoft.svg'
-export { default as SteamIcon } from './steam.svg'
-export { default as GitLabIcon } from './gitlab.svg'
-export { default as ATLauncherIcon } from './atlauncher.svg'
-export { default as GDLauncherIcon } from './gdlauncher.png'
-export { default as MultiMCIcon } from './multimc.webp'
 export { default as PrismIcon } from './prism.svg'
+export { default as RedditIcon } from './reddit.svg'
+export { default as SteamIcon } from './steam.svg'
+export { default as TwitterIcon } from './twitter.svg'

apps/app-frontend/src/assets/icons/index.js

@@ -1,12 +1,12 @@
-export { default as SwapIcon } from './arrow-left-right.svg'
-export { default as ToggleIcon } from './toggle.svg'
-export { default as PackageIcon } from './package.svg'
-export { default as VersionIcon } from './milestone.svg'
-export { default as TextInputIcon } from './text-cursor-input.svg'
 export { default as AddProjectImage } from './add-project.svg'
-export { default as NewInstanceImage } from './new-instance.svg'
+export { default as SwapIcon } from './arrow-left-right.svg'
 export { default as MenuIcon } from './menu.svg'
 export { default as ChatIcon } from './messages-square.svg'
 export { default as Pirate } from './pirate.svg'
 export { default as Microsoft } from './microsoft.svg'
 export { default as PirateShip } from './pirate-ship.svg'
+export { default as VersionIcon } from './milestone.svg'
+export { default as NewInstanceImage } from './new-instance.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as TextInputIcon } from './text-cursor-input.svg'
+export { default as ToggleIcon } from './toggle.svg'

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

@@ -2,8 +2,44 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
+}
+
+@font-face {
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
+}
+
+@font-face {
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 600;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
+}
+
+@font-face {
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 600;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
+}
+
+.font-minecraft {
+	font-family: 'bundled-minecraft-font-mrapp', monospace;
+}
+
 :root {
-  font-family: var(--font-standard);
+	font-family: var(--font-standard, sans-serif), sans-serif;
 	color-scheme: dark;
 	--view-width: calc(100% - 5rem);
 	--expanded-view-width: calc(100% - 13rem);

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

@@ -1,24 +1,26 @@
 <script setup>
-import Instance from '@/components/ui/Instance.vue'
-import { computed, ref } from 'vue'
 import {
 	ClipboardCopyIcon,
+	EyeIcon,
 	FolderOpenIcon,
 	PlayIcon,
 	PlusIcon,
-  TrashIcon,
-  StopCircleIcon,
-  EyeIcon,
 	SearchIcon,
+	StopCircleIcon,
+	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
+import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
 import { formatCategoryHeader } from '@modrinth/utils'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
-import { duplicate, remove } from '@/helpers/profile.js'
+import { computed, ref } from 'vue'
-import { handleError } from '@/store/notifications.js'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { duplicate, remove } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
 	instances: {
@@ -136,7 +138,7 @@ const filteredResults = computed(() => {
 
 	if (sortBy.value === 'Game version') {
 		instances.sort((a, b) => {
-      return a.game_version.localeCompare(b.game_version)
+			return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
 		})
 	}
 
@@ -213,6 +215,17 @@ 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/LoadingIndicatorBar.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
 import { useLoading } from '@/store/state.js'
 
 const props = defineProps({

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

@@ -1,31 +1,33 @@
 <script setup>
 import {
 	ClipboardCopyIcon,
-  FolderOpenIcon,
-  PlayIcon,
-  PlusIcon,
-  TrashIcon,
 	DownloadIcon,
-  GlobeIcon,
-  StopCircleIcon,
 	ExternalIcon,
 	EyeIcon,
-  ChevronRightIcon,
+	FolderOpenIcon,
+	GlobeIcon,
+	PlayIcon,
+	PlusIcon,
+	StopCircleIcon,
+	TrashIcon,
 } from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
-import Instance from '@/components/ui/Instance.vue'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { handleError } from '@/store/notifications.js'
-import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
-import { showProfileInFolder } from '@/helpers/utils.js'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
 import { trackEvent } from '@/helpers/analytics'
+import { get_by_profile_path } from '@/helpers/process.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
-import { openUrl } from '@tauri-apps/plugin-opener'
+
+const { handleError } = injectNotificationManager()
 
 const router = useRouter()
 
@@ -44,7 +46,9 @@ const props = defineProps({
 })
 
 const actualInstances = computed(() =>
-  props.instances.filter((x) => x && x.instances && x.instances[0]),
+	props.instances.filter(
+		(x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
+	),
 )
 
 const modsRow = ref(null)
@@ -161,7 +165,14 @@ const handleOptionsClick = async (args) => {
 			await navigator.clipboard.writeText(args.item.path)
 			break
 		case 'install': {
-      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')
+			await installVersion(
+				args.item.project_id,
+				null,
+				null,
+				'ProjectCardContextMenu',
+				() => {},
+				() => {},
+			).catch(handleError)
 
 			break
 		}
@@ -181,6 +192,10 @@ const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)
 
 const calculateCardsPerRow = () => {
+	if (rows.value.length === 0) {
+		return
+	}
+
 	// Calculate how many cards fit in one row
 	const containerWidth = rows.value[0].clientWidth
 	// Convert container width from pixels to rem
@@ -204,16 +219,21 @@ const calculateCardsPerRow = () => {
 
 const rowContainer = ref(null)
 const resizeObserver = ref(null)
+
 onMounted(() => {
 	calculateCardsPerRow()
 	resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
+	if (rowContainer.value) {
 		resizeObserver.value.observe(rowContainer.value)
+	}
 	window.addEventListener('resize', calculateCardsPerRow)
 })
 
 onUnmounted(() => {
 	window.removeEventListener('resize', calculateCardsPerRow)
+	if (rowContainer.value) {
 		resizeObserver.value.unobserve(rowContainer.value)
+	}
 })
 </script>
 
@@ -227,17 +247,10 @@ onUnmounted(() => {
 		@proceed="deleteProfile"
 	/>
 	<div ref="rowContainer" class="flex flex-col gap-4">
-    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
+		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
-      <router-link
+			<HeadingLink class="mt-1" :to="row.route">
-        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
-        :class="{ 'mt-1': rowIndex > 0 }"
-        :to="row.route"
-      >
 				{{ row.label }}
-        <ChevronRightIcon
+			</HeadingLink>
-          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
-        />
-      </router-link>
 			<section
 				v-if="row.instance"
 				ref="modsRow"

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

@@ -1,23 +1,13 @@
 <template>
-  <div
+	<div v-if="mode !== 'isolated'" ref="button"
-    v-if="mode !== 'isolated'"
-    ref="button"
 		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
+		:class="{ expanded: mode === 'expanded' }" @click="toggleMenu">
-    @click="toggleMenu"
+		<Avatar size="36px" :src="selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-  >
+			" />
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount
-          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
-          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
 		<div class="flex flex-col w-full">
 			<span>
-        <component v-if="selectedAccount" :is="getAccountType(selectedAccount)" class="vector-icon" />
+				<component :is="getAccountType(selectedAccount)" v-if="selectedAccount" class="vector-icon" />
-        {{ selectedAccount ? selectedAccount.username : 'Select account' }}
+				{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}
 			</span>
 			<span class="text-secondary text-xs">Minecraft account</span>
 		</div>
@@ -27,79 +17,174 @@
 		<Card v-if="showCard || mode === 'isolated'" ref="card" class="account-card"
 			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }">
 			<div v-if="selectedAccount" class="selected account">
-        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.username}/128`" />
+				<Avatar size="xs" :src="avatarUrl" />
 				<div>
 					<h4>
-            <component :is="getAccountType(selectedAccount)" class="vector-icon" /> {{ selectedAccount.username }}
+						<component :is="getAccountType(selectedAccount)" class="vector-icon" /> {{
+							selectedAccount.profile.name }}
 					</h4>
 					<p>Selected</p>
 				</div>
-        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
+				<Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.profile.id)">
 					<TrashIcon />
 				</Button>
 			</div>
 			<div v-else class="login-section account">
 				<h4>Not signed in</h4>
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
+				<Button v-tooltip="'Log via Microsoft'" :disabled="microsoftLoginDisabled" icon-only @click="login()">
-          <MicrosoftIcon />
+					<MicrosoftIcon v-if="!microsoftLoginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
 				</Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+				<Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
 					<PirateIcon />
 				</Button>
+				<Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+					<ElyByIcon v-if="!elybyLoginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+				</Button>
 			</div>
 			<div v-if="displayAccounts.length > 0" class="account-group">
-        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
+				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
 					<Button class="option account" @click="setAccount(account)">
-            <Avatar :src="`https://mc-heads.net/avatar/${account.username}/128`" class="icon" />
+						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
 						<p class="account-type">
 							<component :is="getAccountType(account)" class="vector-icon" />
-              {{ account.username }}
+							{{ account.profile.name }}
 						</p>
 					</Button>
-          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
+					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
 						<TrashIcon />
 					</Button>
 				</div>
 			</div>
 			<div v-if="accounts.length > 0" class="login-section account centered">
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
+				<Button v-tooltip="'Log via Microsoft'" icon-only @click="login()">
-          <MicrosoftIcon />
+					<MicrosoftIcon v-if="!microsoftLoginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
 				</Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+				<Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
 					<PirateIcon />
 				</Button>
+				<Button v-tooltip="'Log via Ely.by'" icon-only @click="showElybyLoginModal()">
+					<ElyByIcon v-if="!elybyLoginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+				</Button>
 			</div>
 		</Card>
 	</transition>
-  <ModalWrapper ref="loginOfflineModal" class="modal" header="Add new offline account">
+	<ModalWrapper ref="addElybyModal" class="modal" header="Authenticate with Ely.by">
-    <div class="modal-body">
+		<ModalWrapper ref="requestElybyTwoFactorCodeModal" class="modal"
-      <div class="label">Enter offline username</div>
+			header="Ely.by requested 2FA code for authentication">
-      <input type="text" v-model="playerName" placeholder="Provide offline player name" />
+			<div class="flex flex-col gap-4 px-6 py-5">
-      <Button icon-only color="secondary" @click="offlineLoginFinally()">
+				<label class="label">Enter your 2FA code</label>
+				<input v-model="elybyTwoFactorCode" type="text" placeholder="Your 2FA code here..." class="input" />
+				<div class="mt-6 ml-auto">
+					<Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
 						Continue
 					</Button>
 				</div>
+			</div>
 		</ModalWrapper>
-  <ModalWrapper ref="loginErrorModal" class="modal" header="Error while proceed">
+		<div class="flex flex-col gap-4 px-6 py-5">
-    <div class="modal-body">
+			<label class="label">Enter your player name or email (preferred)</label>
-      <div class="label">Error occurred while adding offline account</div>
+			<input v-model="elybyLogin" type="text" placeholder="Your player name or email here..." class="input" />
-      <Button color="primary" @click="retryOfflineLogin()">
+			<label class="label">Enter your password</label>
+			<input v-model="elybyPassword" type="password" placeholder="Your password here..." class="input" />
+			<div class="mt-6 ml-auto">
+				<Button icon-only color="primary" class="continue-button" @click="addElybyProfile()">
+					Login
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper ref="addOfflineModal" class="modal" header="Add new offline account">
+		<div class="flex flex-col gap-4 px-6 py-5">
+			<label class="label">Enter your player name</label>
+			<input v-model="offlinePlayerName" type="text" placeholder="Your player name here..." class="input" />
+			<div class="mt-6 ml-auto">
+				<Button icon-only color="primary" class="continue-button" @click="addOfflineProfile()">
+					Login
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper ref="authenticationElybyErrorModal" class="modal"
+		header="Error while proceeding authentication event with Ely.by">
+		<div class="flex flex-col gap-4 px-6 py-5">
+			<label class="text-base font-medium text-red-700">
+				An error occurred while logging in.
+			</label>
+
+			<div class="mt-6 ml-auto">
+				<Button color="primary" class="retry-button" @click="retryAddElybyProfile">
 					Try again
 				</Button>
 			</div>
+		</div>
 	</ModalWrapper>
-  <ModalWrapper ref="unexpectedErrorModal" class="modal" header="Ошибка">
+	<ModalWrapper ref="inputElybyErrorModal" class="modal" header="Error while proceeding input event with Ely.by">
+		<div class="flex flex-col gap-4 px-6 py-5">
+			<label class="text-base font-medium text-red-700">
+				An error occurred while adding the Ely.by account. Please follow the instructions below.
+			</label>
+
+			<ul class="list-disc list-inside text-sm space-y-1">
+				<li>Check that you have entered the correct player name or email.</li>
+				<li>Check that you have entered the correct password.</li>
+			</ul>
+
+			<div class="mt-6 ml-auto">
+				<Button color="primary" class="retry-button" @click="retryAddElybyProfile">
+					Try again
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper ref="inputErrorModal" class="modal" header="Error while proceeding input event with offline account">
+		<div class="flex flex-col gap-4 px-6 py-5">
+			<label class="text-base font-medium text-red-700">
+				An error occurred while adding the offline account. Please follow the instructions below.
+			</label>
+
+			<ul class="list-disc list-inside text-sm space-y-1">
+				<li>Check that you have entered the correct player name.</li>
+				<li>
+					Player name must be at least {{ minOfflinePlayerNameLength }} characters long and no more than
+					{{ maxOfflinePlayerNameLength }} characters.
+				</li>
+			</ul>
+
+			<div class="mt-6 ml-auto">
+				<Button color="primary" class="retry-button" @click="retryAddOfflineProfile">
+					Try again
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper ref="exceptionErrorModal" class="modal" header="Unexpected error occurred">
 		<div class="modal-body">
-      <div class="label">Unexcepted error</div>
+			<label class="label">An unexpected error has occurred. Please try again later.</label>
 		</div>
 	</ModalWrapper>
 </template>
 
 <script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, PirateIcon as Offline, MicrosoftIcon as License, MicrosoftIcon, PirateIcon } from '@modrinth/assets'
+import {
-import { Avatar, Button, Card } from '@modrinth/ui'
+	DropdownIcon,
+	TrashIcon,
+	PirateIcon as Offline,
+	MicrosoftIcon as License,
+	ElyByIcon as Elyby,
+	MicrosoftIcon,
+	PirateIcon,
+	ElyByIcon,
+	SpinnerIcon
+} from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
+	elyby_auth_authenticate,
+	elyby_login,
 	offline_login,
 	users,
 	remove_user,
@@ -107,11 +192,14 @@ import {
 	login as login_flow,
 	get_default_user,
 } from '@/helpers/auth'
-import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
-import ModalWrapper from './modal/ModalWrapper.vue'
+
+const { handleError } = injectNotificationManager()
 
 defineProps({
 	mode: {
@@ -124,72 +212,258 @@ defineProps({
 const emit = defineEmits(['change'])
 
 const accounts = ref({})
+const microsoftLoginDisabled = ref(false)
+const elybyLoginDisabled = ref(false)
 const defaultUser = ref()
-const loginOfflineModal = ref(null)
-const loginErrorModal = ref(null)
-const unexpectedErrorModal = ref(null)
-const playerName = ref('')
 
-async function tryOfflineLogin() { // Patched
+// [AR] • Feature
-  loginOfflineModal.value.show()
+const clientToken = "astralrinth"
+const addOfflineModal = ref(null)
+const addElybyModal = ref(null)
+const requestElybyTwoFactorCodeModal = ref(null)
+const authenticationElybyErrorModal = ref(null)
+const inputElybyErrorModal = ref(null)
+const inputErrorModal = ref(null)
+const exceptionErrorModal = ref(null)
+const offlinePlayerName = ref('')
+const elybyLogin = ref('')
+const elybyPassword = ref('')
+const elybyTwoFactorCode = ref('')
+const minOfflinePlayerNameLength = 2
+const maxOfflinePlayerNameLength = 20
+
+// [AR] • Feature
+function getAccountType(account) {
+	switch (account.account_type) {
+		case 'microsoft':
+			return License
+		case 'pirate':
+			return Offline
+		case 'elyby':
+			return Elyby
+	}
 }
 
-async function offlineLoginFinally() { // Patched
+// [AR] • Feature
-  let name = playerName.value
+function showOfflineLoginModal() {
-  if (name.length > 1 && name.length < 20 && name !== '') {
+	addOfflineModal.value?.show()
-    const loggedIn = await offline_login(name).catch(handleError)
+}
-    loginOfflineModal.value.hide()
+
-    if (loggedIn) {
+// [AR] • Feature
-      await setAccount(loggedIn)
+function showElybyLoginModal() {
+	addElybyModal.value?.show()
+}
+
+// [AR] • Feature
+function retryAddOfflineProfile() {
+	inputErrorModal.value?.hide()
+	clearOfflineFields()
+	showOfflineLoginModal()
+}
+
+// [AR] • Feature
+function retryAddElybyProfile() {
+	authenticationElybyErrorModal.value?.hide()
+	inputElybyErrorModal.value?.hide()
+	clearElybyFields()
+	showElybyLoginModal()
+}
+
+// [AR] • Feature
+function clearElybyFields() {
+	elybyLogin.value = ''
+	elybyPassword.value = ''
+	elybyTwoFactorCode.value = ''
+}
+
+// [AR] • Feature
+function clearOfflineFields() {
+	offlinePlayerName.value = ''
+}
+
+// [AR] • Feature
+async function addOfflineProfile() {
+	const name = offlinePlayerName.value.trim()
+	const isValidName = name.length >= minOfflinePlayerNameLength && name.length <= maxOfflinePlayerNameLength
+
+	if (!isValidName) {
+		addOfflineModal.value?.hide()
+		inputErrorModal.value?.show()
+		clearOfflineFields()
+		return
+	}
+
+	try {
+		const result = await offline_login(name)
+
+		addOfflineModal.value?.hide()
+
+		if (result) {
+			await setAccount(result)
 			await refreshValues()
 		} else {
-      unexpectedErrorModal.value.show()
+			exceptionErrorModal.value?.show()
 		}
-    playerName.value = ''
+	} catch (error) {
-  } else {
+		handleError(error)
-    playerName.value = ''
+		exceptionErrorModal.value?.show()
-    loginOfflineModal.value.hide()
+	} finally {
-    loginErrorModal.value.show()
+		clearOfflineFields()
 	}
 }
 
-function retryOfflineLogin() { // Patched
+// [AR] • Feature
-  loginErrorModal.value.hide()
+async function addElybyProfile() {
-  tryOfflineLogin()
+	if (!elybyLogin.value || !elybyPassword.value) {
-}
+		addElybyModal.value?.hide()
+		inputElybyErrorModal.value?.show()
+		clearElybyFields()
+		return
+	}
+	elybyLoginDisabled.value = true
 
-function getAccountType(account) { // Patched
+	const login = elybyLogin.value.trim()
-  if (account.access_token != "null" && account.access_token != null && account.access_token != "") {
+	let password = elybyPassword.value.trim()
-    return License
+	const twoFactorCode = elybyTwoFactorCode.value.trim()
-  } else {
+	if (password && twoFactorCode) {
-    return Offline
+		password = `${password}:${twoFactorCode}`
+	}
+
+	try {
+		const raw_result = await elyby_auth_authenticate(
+			login,
+			password,
+			clientToken
+		)
+
+		const json_data = JSON.parse(raw_result)
+
+		console.log(json_data?.error)
+		console.log(json_data?.errorMessage)
+
+		if (!json_data.accessToken) {
+			if (
+				json_data.error === 'ForbiddenOperationException' &&
+				json_data.errorMessage?.includes('two factor')
+			) {
+				requestElybyTwoFactorCodeModal.value?.show()
+				return
+			}
+
+			addElybyModal.value?.hide()
+			requestElybyTwoFactorCodeModal.value?.hide()
+			authenticationElybyErrorModal.value?.show()
+			return
+		}
+
+		const accessToken = json_data.accessToken
+		const selectedProfileId = convertRawStringToUUIDv4(json_data.selectedProfile.id)
+		const selectedProfileName = json_data.selectedProfile.name
+
+		const result = await elyby_login(selectedProfileId, selectedProfileName, accessToken)
+
+		addElybyModal.value?.hide()
+		requestElybyTwoFactorCodeModal.value?.hide()
+
+		clearElybyFields()
+
+		await setAccount(result)
+		await refreshValues()
+	} catch (err) {
+		handleError(err)
+		exceptionErrorModal.value?.show()
+	} finally {
+		elybyLoginDisabled.value = false
 	}
 }
 
+// [AR] • Feature
+function convertRawStringToUUIDv4(rawId) {
+	if (rawId.length !== 32) {
+		console.warn('Invalid UUID string:', rawId)
+		return rawId
+	}
+	return `${rawId.slice(0, 8)}-${rawId.slice(8, 12)}-${rawId.slice(12, 16)}-${rawId.slice(16, 20)}-${rawId.slice(20)}`
+}
+
+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) {
+	microsoftLoginDisabled.value = value
+}
+
 defineExpose({
 	refreshValues,
+	setLoginDisabled,
+	microsoftLoginDisabled,
 })
 await refreshValues()
 
 const displayAccounts = computed(() =>
-  accounts.value.filter((account) => defaultUser.value !== account.id),
+	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.id === defaultUser.value),
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
 )
 
 async function setAccount(account) {
-  defaultUser.value = account.id
+	defaultUser.value = account.profile.id
-  await set_default_user(account.id).catch(handleError)
+	await set_default_user(account.profile.id).catch(handleError)
 	emit('change')
 }
 
 async function login() {
+	microsoftLoginDisabled.value = true
 	const loggedIn = await login_flow().catch(handleSevereError)
 
 	if (loggedIn) {
@@ -198,6 +472,7 @@ async function login() {
 	}
 
 	trackEvent('AccountLogIn')
+	microsoftLoginDisabled.value = false
 }
 
 const logout = async (id) => {

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
+import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { add_project_from_path } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
 import { useRouter } from 'vue-router'
 
+import { add_project_from_path } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()
+
 const props = defineProps({
 	instance: {
 		type: Object,

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

@@ -19,6 +19,7 @@
 					path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
 					query: breadcrumb.query,
 				}"
+				class="text-primary"
 				>{{
 					breadcrumb.name.charAt(0) === '?'
 						? breadcrumbData.getName(breadcrumb.name.slice(1))
@@ -41,11 +42,12 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const route = useRoute()
 

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

@@ -1,13 +1,21 @@
 <template>
 	<transition name="fade">
-    <div v-show="shown" ref="contextMenu" class="context-menu" :style="{
+		<div
+			v-show="shown"
+			ref="contextMenu"
+			class="context-menu"
+			:style="{
 				left: left,
 				top: top,
-    }">
+			}"
+		>
 			<div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
 				<hr v-if="option.type === 'divider'" class="divider" />
-        <div v-else-if="!(isLinkedData(item) && option.name === `add_content`)" class="item clickable"
+				<div
-          :class="[option.color ?? 'base']">
+					v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+					class="item clickable"
+					:class="[option.color ?? 'base']"
+				>
 					<slot :name="option.name" />
 				</div>
 			</div>

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

@@ -0,0 +1,380 @@
+<template>
+	<ModalWrapper ref="modal" :header="'Import from CurseForge Profile Code'">
+		<div class="modal-body">
+			<div class="input-row">
+				<p class="input-label">Profile Code</p>
+				<div class="iconified-input">
+					<SearchIcon aria-hidden="true" class="text-lg" />
+					<input ref="codeInput" v-model="profileCode" autocomplete="off" class="h-12 card-shadow"
+						spellcheck="false" type="text" placeholder="Enter CurseForge profile code" maxlength="20"
+						@keyup.enter="importProfile" />
+					<Button v-if="profileCode" class="r-btn" @click="() => (profileCode = '')">
+						<XIcon />
+					</Button>
+				</div>
+			</div>
+
+			<div v-if="metadata && !importing" class="profile-info">
+				<h3>Profile Information</h3>
+				<p><strong>Name:</strong> {{ metadata.name }}</p>
+			</div>
+
+			<div v-if="error" class="error-message">
+				<p>{{ error }}</p>
+			</div>
+
+			<div v-if="importing && importProgress.visible" class="progress-section">
+				<div class="progress-info">
+					<span class="progress-text">{{ importProgress.message }}</span>
+					<span class="progress-percentage">{{ Math.floor(importProgress.percentage) }}%</span>
+				</div>
+				<div class="progress-bar-container">
+					<div class="progress-bar" :style="{ width: `${importProgress.percentage}%` }"></div>
+				</div>
+			</div>
+
+			<div class="button-row">
+				<Button @click="hide" :disabled="importing">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button v-if="!metadata" @click="fetchMetadata" :disabled="!profileCode.trim() || fetching"
+					color="secondary">
+					<SearchIcon v-if="!fetching" />
+					{{ fetching ? 'Checking...' : 'Check Profile' }}
+				</Button>
+				<Button v-if="metadata" @click="importProfile" :disabled="importing" color="primary">
+					<DownloadIcon v-if="!importing" />
+					{{ importing ? 'Importing...' : 'Import Profile' }}
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { Button } from '@modrinth/ui'
+import {
+	XIcon,
+	SearchIcon,
+	DownloadIcon
+} from '@modrinth/assets'
+import {
+	fetch_curseforge_profile_metadata,
+	import_curseforge_profile
+} from '@/helpers/import.js'
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener } from '@/helpers/events.js'
+
+const props = defineProps({
+	closeParent: {
+		type: Function,
+		default: null
+	}
+})
+
+const router = useRouter()
+const modal = ref(null)
+const codeInput = ref(null)
+const profileCode = ref('')
+const metadata = ref(null)
+const fetching = ref(false)
+const importing = ref(false)
+const error = ref('')
+const importProgress = ref({
+	visible: false,
+	percentage: 0,
+	message: 'Starting import...',
+	totalMods: 0,
+	downloadedMods: 0
+})
+
+let unlistenLoading = null
+let activeLoadingBarId = null
+let progressFallbackTimer = null
+
+defineExpose({
+	show: () => {
+		profileCode.value = ''
+		metadata.value = null
+		fetching.value = false
+		importing.value = false
+		error.value = ''
+		importProgress.value = {
+			visible: false,
+			percentage: 0,
+			message: 'Starting import...',
+			totalMods: 0,
+			downloadedMods: 0
+		}
+		modal.value?.show()
+
+		nextTick(() => {
+			setTimeout(() => {
+				codeInput.value?.focus()
+			}, 100)
+		})
+
+		trackEvent('CurseForgeProfileImportStart', { source: 'ImportModal' })
+	},
+})
+
+const hide = () => {
+	modal.value?.hide()
+}
+
+const fetchMetadata = async () => {
+	if (!profileCode.value.trim()) return
+
+	fetching.value = true
+	error.value = ''
+
+	try {
+		const result = await fetch_curseforge_profile_metadata(profileCode.value.trim())
+		metadata.value = result
+		trackEvent('CurseForgeProfileMetadataFetched', {
+			profileCode: profileCode.value.trim()
+		})
+	} catch (err) {
+		console.error('Failed to fetch CurseForge profile metadata:', err)
+		error.value = 'Failed to fetch profile information. Please check the code and try again.'
+		handleError(err)
+	} finally {
+		fetching.value = false
+	}
+}
+
+const importProfile = async () => {
+	if (!profileCode.value.trim()) return
+
+	importing.value = true
+	error.value = ''
+	activeLoadingBarId = null // Reset for new import session
+	importProgress.value = {
+		visible: true,
+		percentage: 0,
+		message: 'Starting import...',
+		totalMods: 0,
+		downloadedMods: 0
+	}
+
+	// Fallback progress timer in case loading events don't work
+	progressFallbackTimer = setInterval(() => {
+		if (importing.value && importProgress.value.percentage < 90) {
+			// Slowly increment progress as a fallback
+			importProgress.value.percentage = Math.min(90, importProgress.value.percentage + 1)
+		}
+	}, 1000)
+
+	try {
+		const { result, profilePath } = await import_curseforge_profile(profileCode.value.trim())
+
+		trackEvent('CurseForgeProfileImported', {
+			profileCode: profileCode.value.trim()
+		})
+
+		hide()
+
+		// Close the parent modal if provided
+		if (props.closeParent) {
+			props.closeParent()
+		}
+
+		// Navigate to the imported profile
+		await router.push(`/instance/${encodeURIComponent(profilePath)}`)
+	} catch (err) {
+		console.error('Failed to import CurseForge profile:', err)
+		error.value = 'Failed to import profile. Please try again.'
+		handleError(err)
+	} finally {
+		importing.value = false
+		importProgress.value.visible = false
+		if (progressFallbackTimer) {
+			clearInterval(progressFallbackTimer)
+			progressFallbackTimer = null
+		}
+		activeLoadingBarId = null
+	}
+}
+
+onMounted(async () => {
+	// Listen for loading events to update progress
+	unlistenLoading = await loading_listener((event) => {
+		console.log('Loading event received:', event) // Debug log
+
+		// Handle all loading events that could be related to CurseForge profile import
+		const isCurseForgeEvent = event.event?.type === 'curseforge_profile_download'
+		const hasProfileName = event.event?.profile_name && importing.value
+
+		if ((isCurseForgeEvent || hasProfileName) && importing.value) {
+			// Store the loading bar ID for this import session
+			if (!activeLoadingBarId) {
+				activeLoadingBarId = event.loader_uuid
+			}
+
+			// Only process events for our current import session
+			if (event.loader_uuid === activeLoadingBarId) {
+				if (event.fraction !== null && event.fraction !== undefined) {
+					const baseProgress = (event.fraction || 0) * 100
+
+					// Calculate custom progress based on the message
+					let finalProgress = baseProgress
+					const message = event.message || 'Importing profile...'
+
+					// Custom progress calculation for different stages
+					if (message.includes('Fetching') || message.includes('metadata')) {
+						finalProgress = Math.min(10, baseProgress)
+					} else if (message.includes('Downloading profile ZIP') || message.includes('profile ZIP')) {
+						finalProgress = Math.min(15, 10 + (baseProgress - 10) * 0.5)
+					} else if (message.includes('Extracting') || message.includes('ZIP')) {
+						finalProgress = Math.min(20, 15 + (baseProgress - 15) * 0.5)
+					} else if (message.includes('Configuring') || message.includes('profile')) {
+						finalProgress = Math.min(30, 20 + (baseProgress - 20) * 0.5)
+					} else if (message.includes('Copying') || message.includes('files')) {
+						finalProgress = Math.min(40, 30 + (baseProgress - 30) * 0.5)
+					} else if (message.includes('Downloaded mod') && message.includes(' of ')) {
+						// Parse "Downloaded mod X of Y" message
+						const match = message.match(/Downloaded mod (\d+) of (\d+)/)
+						if (match) {
+							const current = parseInt(match[1])
+							const total = parseInt(match[2])
+							// Mods take 40% of progress (from 40% to 80%)
+							const modProgress = (current / total) * 40
+							finalProgress = 40 + modProgress
+						} else {
+							finalProgress = Math.min(80, 40 + (baseProgress - 40) * 0.5)
+						}
+					} else if (message.includes('Downloading mod') || message.includes('mods')) {
+						// General mod downloading stage (40% to 80%)
+						finalProgress = Math.min(80, 40 + (baseProgress - 40) * 0.4)
+					} else if (message.includes('Installing Minecraft') || message.includes('Minecraft')) {
+						finalProgress = Math.min(95, 80 + (baseProgress - 80) * 0.75)
+					} else if (message.includes('Finalizing') || message.includes('completed')) {
+						finalProgress = Math.min(100, 95 + (baseProgress - 95))
+					} else {
+						// Default: use the base progress but ensure minimum progression
+						finalProgress = Math.max(importProgress.value.percentage, baseProgress)
+					}
+
+					importProgress.value.percentage = Math.min(100, Math.max(0, finalProgress))
+					importProgress.value.message = message
+				} else {
+					// Loading complete
+					importProgress.value.percentage = 100
+					importProgress.value.message = 'Import completed!'
+					activeLoadingBarId = null
+				}
+			}
+		}
+	})
+})
+
+onUnmounted(() => {
+	if (unlistenLoading) {
+		unlistenLoading()
+	}
+	if (progressFallbackTimer) {
+		clearInterval(progressFallbackTimer)
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 1rem;
+}
+
+.input-row {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.input-label {
+	font-weight: 600;
+	color: var(--color-contrast);
+	margin: 0;
+}
+
+.profile-info {
+	background: var(--color-bg);
+	border: 1px solid var(--color-button);
+	border-radius: var(--radius-md);
+	padding: 1rem;
+
+	h3 {
+		margin: 0 0 0.5rem 0;
+		color: var(--color-contrast);
+	}
+
+	p {
+		margin: 0.25rem 0;
+		color: var(--color-base);
+	}
+}
+
+.error-message {
+	background: var(--color-red);
+	border: 1px solid var(--color-red);
+	border-radius: var(--radius-md);
+	padding: 0.75rem;
+
+	p {
+		margin: 0;
+		color: var(--color-contrast);
+		font-weight: 500;
+	}
+}
+
+.progress-section {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.progress-info {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.progress-text {
+		color: var(--color-base);
+		font-size: 0.875rem;
+	}
+
+	.progress-percentage {
+		color: var(--color-contrast);
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+}
+
+.progress-bar-container {
+	width: 100%;
+	height: 4px;
+	background: var(--color-button);
+	border-radius: 2px;
+	overflow: hidden;
+}
+
+.progress-bar {
+	height: 100%;
+	background: var(--color-brand);
+	border-radius: 2px;
+  transition: width 0.3s ease;
+  min-width: 0;
+}
+
+.button-row {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: auto;
+}
+</style>

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

@@ -1,28 +1,37 @@
 <script setup>
 import {
 	CheckIcon,
+	CopyIcon,
 	DropdownIcon,
-  XIcon,
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
-  CopyIcon,
+	XIcon,
 } from '@modrinth/assets'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
 import { ChatIcon } from '@/assets/icons'
-import { ButtonStyled, Collapsible } from '@modrinth/ui'
-import { ref, computed } from 'vue'
-import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { handleError } from '@/store/notifications.js'
-import { handleSevereError } from '@/store/error.js'
-import { cancel_directory_change } from '@/helpers/settings.js'
-import { install } from '@/helpers/profile.js'
-import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { install } from '@/helpers/profile.js'
+import { cancel_directory_change } from '@/helpers/settings.ts'
+import { handleSevereError } from '@/store/error.js'
+
+// [AR] Feature
+import { applyMigrationFix } from '@/helpers/utils.js'
+import { restartApp } from '@/helpers/utils.js'
+
+const { handleError } = injectNotificationManager()
 
 const errorModal = ref()
 const error = ref()
 const closable = ref(true)
 const errorCollapsed = ref(false)
+const language = ref('en')
+const migrationFixSuccess = ref(null) // null | true | false
+const migrationFixCallbackModel = ref()
 
 const title = ref('An error occurred')
 const errorType = ref('unknown')
@@ -92,7 +101,7 @@ async function loginMinecraft() {
 		const loggedIn = await login_flow()
 
 		if (loggedIn) {
-      await set_default_user(loggedIn.id).catch(handleError)
+			await set_default_user(loggedIn.profile.id).catch(handleError)
 		}
 
 		await trackEvent('AccountLogIn', { source: 'ErrorModal' })
@@ -148,6 +157,30 @@ async function copyToClipboard(text) {
 		copied.value = false
 	}, 3000)
 }
+
+function toggleLanguage() {
+  language.value = language.value === 'en' ? 'ru' : 'en'
+}
+
+async function onApplyMigrationFix(eol) {
+  console.log(`[AR] • Attempting to apply migration ${eol.toUpperCase()} fix`)
+  try {
+    const result = await applyMigrationFix(eol)
+    migrationFixSuccess.value = result === true
+    console.log(`[AR] • Successfully applied migration ${eol.toUpperCase()} fix`, result)
+  } catch (err) {
+    console.error(`[AR] • Failed to apply migration fix:`, err)
+    migrationFixSuccess.value = false
+  } finally {
+    migrationFixCallbackModel.value?.show?.()
+    if (migrationFixSuccess.value === true) {
+      setTimeout(async () => {
+        await restartApp()
+      }, 3000)
+    }
+  }
+}
+
 </script>
 
 <template>
@@ -219,8 +252,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 dirctory you
+							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.
+							selected. Please free up some space and try again or cancel the directory change.
 						</p>
 					</template>
 					<template v-else>
@@ -313,10 +346,120 @@ async function copyToClipboard(text) {
 						/>
 					</button>
 					<Collapsible :collapsed="errorCollapsed">
-            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+						<pre class="m-0 px-4 py-3 bg-bg rounded-none whitespace-pre-wrap break-words overflow-x-auto max-w-full"
+							>{{ debugInfo }}</pre>
 					</Collapsible>
 				</div>
+				<template v-if="errorType === 'state_init'">
+        		  <div class="notice">
+        		    <div class="flex justify-between items-center">
+        		      <h3 v-if="language === 'en'" class="notice__title">⚠️ Migration Issue • Important Notice ⚠️</h3>
+        		      <h3 v-if="language === 'ru'" class="notice__title">⚠️ Проблема миграции • Важное уведомление ⚠️</h3>
+        		      <ButtonStyled>
+        		        <button @click="toggleLanguage">
+        		          {{ language === 'en' ? '📖 Русский' : '📖 English' }}
+        		        </button>
+        		      </ButtonStyled>
+        		    </div>
+        		      <p v-if="language === 'en'" class="notice__text">
+        		        We're experiencing an issue with our database migration system due to differences in how different operating systems handle line endings. This might cause problems with our app's functionality.
+        		      </p>
+        		      <p v-if="language === 'en'" class="notice__text">
+        		        <strong>What's happening?</strong> When we build our app, we use a system that checks the integrity of our database migrations. However, this system can get confused when it encounters different line endings (like CRLF vs LF) used by different operating systems. This can lead to errors and make our app unusable.
+        		      </p>
+        		      <p v-if="language === 'en'" class="notice__text">
+        		        <strong>Why is this happening?</strong> This issue is caused by a combination of factors, including different operating systems handling line endings differently, Git's line ending conversion settings, and our app's build process.
+        		      </p>
+        		      <p v-if="language === 'en'" class="notice__text">
+        		        <strong>What are we doing about it?</strong> We're working to resolve this issue and ensure that our app works smoothly for all users. In the meantime, we apologize for any inconvenience this might cause and appreciate your patience and understanding.
+        		      </p>
+        		      <p v-if="language === 'ru'" class="notice__text">
+        		        Мы сталкиваемся с проблемой в нашей системе миграции базы данных из-за различий в том, как разные операционные системы обрабатывают окончания строк. Это может вызвать проблемы с функциональностью нашего приложения.
+        		      </p>
+        		      <p v-if="language === 'ru'" class="notice__text">
+        		        <strong>Что происходит?</strong> Когда мы строим наше приложение, мы используем систему, которая проверяет целостность наших миграций базы данных. Однако эта система может сбиваться, когда сталкивается с различными окончаниями строк (например, CRLF против LF), используемыми разными операционными системами. Это может привести к ошибкам и сделать наше приложение неработоспособным.
+        		      </p>
+        		      <p v-if="language === 'ru'" class="notice__text">
+        		        <strong>Почему это происходит?</strong> Эта проблема вызвана сочетанием факторов, включая различную обработку окончаний строк разными операционными системами, настройки преобразования окончаний строк в Git и процесс сборки нашего приложения.
+        		      </p>
+        		      <p v-if="language === 'ru'" class="notice__text">
+        		        <strong>Что мы с этим делаем?</strong> Мы работаем над решением этой проблемы и обеспечением бесперебойной работы нашего приложения для всех пользователей. В это время мы извиняемся за возможные неудобства и благодарим вас за терпение и понимание.
+        		      </p>
+        		    </div>
+        		    <h2 class="text-lg font-bold text-contrast">
+        		      <template v-if="language === 'en'">Possible fix in real time:</template>
+        		      <template v-if="language === 'ru'">Возможное исправление в реальном времени:</template>
+        		    </h2>
+        		    <div class="flex justify-between">
+        		      <ol class="flex flex-col gap-3">
+        		        <li>
+        		          <ButtonStyled class="neon-button neon">
+        		            <button
+        		              :title="language === 'en'
+        		                ? 'Convert all line endings in migration files to LF (Unix-style: \\n)'
+        		                : 'Преобразовать все окончания строк в файлах миграций в LF (Unix-стиль: \\n)'"
+        		              aria-label="LF"
+        		              @click="onApplyMigrationFix('lf')"
+        		            >
+        		              {{ language === 'en' ? 'Apply LF Migration Fix' : 'Применить исправление миграции LF' }}
+        		            </button>
+        		          </ButtonStyled>
+        		        </li>
+        		        <li>
+        		          <ButtonStyled class="neon-button neon">
+        		            <button
+        		              :title="language === 'en'
+        		                ? 'Convert all line endings in migration files to CRLF (Windows-style: \\r\\n)'
+        		                : 'Преобразовать все окончания строк в файлах миграций в CRLF (Windows-стиль: \\r\\n)'"
+        		              aria-label="CRLF"
+        		              @click="onApplyMigrationFix('crlf')"
+        		            >
+        		              {{ language === 'en' ? 'Apply CRLF Migration Fix' : 'Применить исправление миграции CRLF' }}
+        		            </button>
+        		          </ButtonStyled>
+        		        </li>
+        		      </ol>
+        		    </div>
         		</template>
+			</template>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper
+  	  ref="migrationFixCallbackModel"
+  	  :header="language === 'en'
+  	    ? '💡 Migration fix report'
+  	    : '💡 Отчет об исправлении миграции'"
+  	  :closable="closable">
+  	  <div class="modal-body">
+  	    <h2 class="text-lg font-bold text-contrast space-y-2">
+  	      <template v-if="migrationFixSuccess === true">
+  	        <p class="flex items-center gap-2 neon-text">
+  	          ✅
+  	          {{ language === 'en'
+  	            ? 'The migration fix has been applied successfully. Please restart the launcher and try to log in to the game :)'
+  	            : 'Исправление миграции успешно применено. Пожалуйста, перезапустите лаунчер и попробуйте снова авторизоваться в игре :)' }}
+  	        </p>
+  	        <p class="mt-2 text-sm neon-text">
+  	          {{ language === 'en'
+  	            ? 'If the problem persists, please try the other fix.'
+  	            : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
+  	        </p>
+  	      </template>
+
+  	      <template v-else-if="migrationFixSuccess === false">
+  	        <p class="flex items-center gap-2 neon-text">
+  	          ❌
+  	          {{ language === 'en'
+  	            ? 'The migration fix failed or had no effect.'
+  	            : 'Исправление миграции не было успешно применено или не имело эффекта.' }}
+  	        </p>
+  	        <p class="mt-2 text-sm neon-text">
+  	          {{ language === 'en'
+  	            ? 'If the problem persists, please try the other fix.'
+  	            : 'Если проблема сохраняется, пожалуйста, попробуйте другой способ.' }}
+  	        </p>
+  	      </template>
+  	    </h2>
   	  </div>
   	</ModalWrapper>
 </template>
@@ -333,6 +476,9 @@ async function copyToClipboard(text) {
 </style>
 
 <style scoped lang="scss">
+@import '../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../packages/assets/styles/neon-text.scss';
+
 .cta-button {
 	display: flex;
 	align-items: center;

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

@@ -1,12 +1,14 @@
 <script setup>
-import { XIcon, PlusIcon } from '@modrinth/assets'
+import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox } from '@modrinth/ui'
+import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { PackageIcon, VersionIcon } from '@/assets/icons'
-import { ref } from 'vue'
-import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
 import { open } from '@tauri-apps/plugin-dialog'
-import { handleError } from '@/store/notifications.js'
+import { ref } from 'vue'
+
+import { PackageIcon, VersionIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
 	instance: {

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

@@ -1,6 +1,4 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
 import {
 	DownloadIcon,
 	GameIcon,
@@ -9,20 +7,21 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { finish_install, kill, run } from '@/helpers/profile'
+import dayjs from 'dayjs'
-import { get_by_profile_path } from '@/helpers/process'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { handleError } from '@/store/state.js'
+import { get_by_profile_path } from '@/helpers/process'
+import { finish_install, kill, run } from '@/helpers/profile'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
-import { trackEvent } from '@/helpers/analytics'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { formatCategory } from '@modrinth/utils'
 
-dayjs.extend(relativeTime)
+const { handleError } = injectNotificationManager()
+const formatRelativeTime = useRelativeTime()
 
 const props = defineProps({
 	instance: {
@@ -95,7 +94,7 @@ const stop = async (e, context) => {
 const repair = async (e) => {
 	e?.stopPropagation()
 
-  await finish_install(props.instance)
+	await finish_install(props.instance).catch(handleError)
 }
 
 const openFolder = async () => {
@@ -173,7 +172,12 @@ onUnmounted(() => unlisten())
 			</div>
 			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
 				<TimerIcon />
-        <span class="text-sm"> Played {{ dayjs(instance.last_played).fromNow() }} </span>
+				<span class="text-sm">
+					<template v-if="instance.last_played">
+						Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
+					</template>
+					<template v-else> Never played </template>
+				</span>
 			</div>
 		</div>
 	</template>
@@ -236,8 +240,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">
+					<span class="text-sm capitalize">
-            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
+						{{ instance.loader }} {{ instance.game_version }}
 					</span>
 				</div>
 			</div>

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

@@ -1,5 +1,5 @@
 <template>
-  <ModalWrapper ref="modal" header="Create instance">
+	<ModalWrapper ref="modal" header="Creating an instance">
 		<div class="modal-header">
 			<Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
 		</div>
@@ -163,6 +163,14 @@
 				<div v-else class="table-content empty">No profiles found</div>
 			</div>
 			<div class="button-row">
+				<Button
+        		  v-if="selectedProfileType.name === 'Curseforge'"
+        		  @click="showCurseForgeProfileModal"
+        		  :disabled="loading"
+        		>
+        		  <CodeIcon />
+        		  Import from Profile Code
+        		</Button>
 				<Button
 					:disabled="
 						loading ||
@@ -194,10 +202,10 @@
 			</div>
 		</div>
 	</ModalWrapper>
+  	<CurseForgeProfileImportModal ref="curseforgeProfileModal" :close-parent="hide" />
 </template>
 
 <script setup>
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import {
 	CodeIcon,
 	FolderOpenIcon,
@@ -208,24 +216,29 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
+import { Avatar, Button, Checkbox, Chips, injectNotificationManager } from '@modrinth/ui'
-import { computed, onUnmounted, ref, shallowRef } from 'vue'
-import { get_loaders } from '@/helpers/tags'
-import { create } from '@/helpers/profile'
-import { open } from '@tauri-apps/plugin-dialog'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
-import { handleError } from '@/store/notifications.js'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
 import Multiselect from 'vue-multiselect'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { create_profile_and_install_from_file } from '@/helpers/pack.js'
 import {
 	get_default_launcher_path,
 	get_importable_instances,
 	import_instance,
 } from '@/helpers/import.js'
-import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
-import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
+import { create } from '@/helpers/profile'
+import { get_loaders } from '@/helpers/tags'
+
+import CurseForgeProfileImportModal from '@/components/ui/CurseForgeProfileImportModal.vue'
+
+const { handleError } = injectNotificationManager()
 
 const profile_name = ref('')
 const game_version = ref('')
@@ -283,6 +296,11 @@ const hide = () => {
 		unlistener.value = null
 	}
 }
+
+const showCurseForgeProfileModal = () => {
+  curseforgeProfileModal.value?.show()
+}
+
 onUnmounted(() => {
 	if (unlistener.value) {
 		unlistener.value()
@@ -305,12 +323,16 @@ const [
 	get_game_versions().then(shallowRef).catch(handleError),
 	get_loaders()
 		.then((value) =>
+			ref(
 				value
 					.filter((item) => item.supported_project_types.includes('modpack'))
 					.map((item) => item.name.toLowerCase()),
+			),
 		)
-    .then(ref)
+		.catch((err) => {
-    .catch(handleError),
+			handleError(err)
+			return ref([])
+		}),
 ])
 loaders.value.unshift('vanilla')
 
@@ -334,6 +356,7 @@ const game_versions = computed(() => {
 })
 
 const modal = ref(null)
+const curseforgeProfileModal = ref(null)
 
 const check_valid = computed(() => {
 	return (

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { formatCategory } from '@modrinth/utils'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
 
 type Instance = {
 	game_version: string

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

@@ -35,13 +35,15 @@
 	</ModalWrapper>
 </template>
 <script setup>
-import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import { find_filtered_jres } from '@/helpers/jre.js'
+
-import { handleError } from '@/store/notifications.js'
-import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { find_filtered_jres } from '@/helpers/jre.js'
+
+const { handleError } = injectNotificationManager()
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)

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

@@ -53,20 +53,22 @@
 
 <script setup>
 import {
-  SearchIcon,
-  PlayIcon,
 	CheckIcon,
-  XIcon,
-  FolderSearchIcon,
 	DownloadIcon,
+	FolderSearchIcon,
+	PlayIcon,
+	SearchIcon,
+	XIcon,
 } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
-import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
-import { ref } from 'vue'
 import { open } from '@tauri-apps/plugin-dialog'
+import { ref } from 'vue'
+
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+
+const { handleError } = injectNotificationManager()
 
 const props = defineProps({
 	version: {
@@ -108,7 +110,6 @@ async function testJava() {
 	testingJava.value = true
 	testingJavaSuccess.value = await test_jre(
 		props.modelValue ? props.modelValue.path : '',
-    1,
 		props.version,
 	)
 	testingJava.value = false
@@ -127,7 +128,7 @@ async function handleJavaFileInput() {
 	const filePath = await open()
 
 	if (filePath) {
-    let result = await get_jre(filePath.path ?? filePath)
+		let result = await get_jre(filePath.path ?? filePath).catch(handleError)
 		if (!result) {
 			result = {
 				path: filePath.path ?? filePath,

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

@@ -1,11 +1,12 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Button, Badge } from '@modrinth/ui'
+import { Badge, Button } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-import { update_managed_modrinth_version } from '@/helpers/profile'
+
-import { releaseColor } from '@/helpers/utils'
 import { SwapIcon } from '@/assets/icons/index.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import { releaseColor } from '@/helpers/utils'
 
 const props = defineProps({
 	versions: {
@@ -70,7 +71,7 @@ const onHide = () => {
 							v-for="version in filteredVersions"
 							:key="version.id"
 							class="table-row with-columns selectable"
-              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
 								<Button

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

@@ -7,7 +7,7 @@
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),
 		}"
-    class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+		class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
 	>
 		<slot />
 	</RouterLink>

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

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useRoute, RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 
 const route = useRoute()
 

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

@@ -1,10 +1,10 @@
 <script setup>
-import { Avatar, TagItem } from '@modrinth/ui'
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { formatNumber, formatCategory } from '@modrinth/utils'
+import { Avatar, TagItem } from '@modrinth/ui'
-import { computed } from 'vue'
+import { formatCategory, formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 dayjs.extend(relativeTime)
@@ -21,14 +21,11 @@ const props = defineProps({
 })
 
 const featuredCategory = computed(() => {
-  if (props.project.categories.includes('optimization')) {
+	if (props.project.display_categories.includes('optimization')) {
 		return 'optimization'
 	}
 
-  if (props.project.categories.length > 0) {
+	return props.project.display_categories[0] ?? props.project.categories[0]
-    return props.project.categories[0]
-  }
-  return undefined
 })
 
 const toColor = computed(() => {

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

@@ -1,13 +1,15 @@
 <script setup>
-import { list } from '@/helpers/profile'
+import { SpinnerIcon } from '@modrinth/assets'
-import { handleError } from '@/store/notifications'
+import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
-import { profile_listener } from '@/helpers/events.js'
+
 import NavButton from '@/components/ui/NavButton.vue'
-import { Avatar } from '@modrinth/ui'
+import { profile_listener } from '@/helpers/events.js'
-import { convertFileSrc } from '@tauri-apps/api/core'
+import { list } from '@/helpers/profile'
-import { SpinnerIcon } from '@modrinth/assets'
+
+const { handleError } = injectNotificationManager()
 
 const recentInstances = ref([])
 const getInstances = async () => {
@@ -30,7 +32,7 @@ const getInstances = async () => {
 
 			return dateB - dateA
 		})
-    .slice(0, 4)
+		.slice(0, 3)
 }
 
 await getInstances()

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

@@ -14,15 +14,27 @@
 		<div v-if="selectedProcess" class="status">
 			<span class="circle running" />
 			<div ref="profileButton" class="running-text">
-        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+				<router-link
+					class="text-primary"
+					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+				>
 					{{ selectedProcess.profile.name }}
 				</router-link>
-        <div v-if="currentProcesses.length > 1" class="arrow button-base" :class="{ rotate: showProfiles }"
+				<div
-          @click="toggleProfiles()">
+					v-if="currentProcesses.length > 1"
+					class="arrow button-base"
+					:class="{ rotate: showProfiles }"
+					@click="toggleProfiles()"
+				>
 					<DropdownIcon />
 				</div>
 			</div>
-      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop(selectedProcess)">
+			<Button
+				v-tooltip="'Stop instance'"
+				icon-only
+				class="icon-button stop"
+				@click="stop(selectedProcess)"
+			>
 				<StopCircleIcon />
 			</Button>
 			<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
@@ -33,43 +45,6 @@
 			<span class="circle stopped" />
 			<span class="running-text"> No instances running </span>
 		</div>
-    <div v-if="updateState">
-      <a>
-        <Button class="download" :disabled="installState" @click="confirmUpdating(), getRemote(false, false)">
-          <DownloadIcon />
-          {{
-            installState
-              ? "Downloading new update..."
-              : "Download new update"
-          }}
-        </Button>
-      </a>
-    </div>
-    <ModalWrapper ref="confirmUpdate" :has-to-type="false" header="Request to update the AstralRinth launcher">
-      <div class="modal-body">
-        <div class="markdown-body">
-          <p>The new version of the AstralRinth launcher is available.</p>
-          <p>Your version is outdated. We recommend that you update to the latest version.</p>
-          <p>Warning:</p>
-          <p>
-            Before updating, make sure that you have saved all running instances and made a backup copy of the instances
-            that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
-            your files, so you should always make copies of them and keep them in a safe place.
-          </p>
-        </div>
-        <span>Version on remote server • <p id="releaseData" class="cosmic inline-fix"></p></span>
-        <span>Version on local device •
-          <p class="cosmic inline-fix">v{{ version }}</p>
-        </span>
-        <div class="button-group push-right">
-          <Button class="download-modal" @click="confirmUpdate.hide()">
-            Decline</Button>
-          <Button class="download-modal" @click="approveUpdate()">
-            Accept
-          </Button>
-        </div>
-      </div>
-    </ModalWrapper>
 	</div>
 	<transition name="download">
 		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
@@ -79,20 +54,39 @@
 				</h3>
 				<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
 				<div class="row">
-          {{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}% {{ loadingBar.message }}
+					{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
+					{{ loadingBar.message }}
 				</div>
 			</div>
 		</Card>
 	</transition>
 	<transition name="download">
-    <Card v-if="showProfiles === true && currentProcesses.length > 0" ref="profiles" class="profile-card">
+		<Card
-      <Button v-for="process in currentProcesses" :key="process.uuid" class="profile-button"
+			v-if="showProfiles === true && currentProcesses.length > 0"
-        @click="selectProcess(process)">
+			ref="profiles"
+			class="profile-card"
+		>
+			<Button
+				v-for="process in currentProcesses"
+				:key="process.uuid"
+				class="profile-button"
+				@click="selectProcess(process)"
+			>
 				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
-        <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click.stop="stop(process)">
+				<Button
+					v-tooltip="'Stop instance'"
+					icon-only
+					class="icon-button stop"
+					@click.stop="stop(process)"
+				>
 					<StopCircleIcon />
 				</Button>
-        <Button v-tooltip="'View logs'" icon-only class="icon-button" @click.stop="goToTerminal(process.profile.path)">
+				<Button
+					v-tooltip="'View logs'"
+					icon-only
+					class="icon-button"
+					@click.stop="goToTerminal(process.profile.path)"
+				>
 					<TerminalSquareIcon />
 				</Button>
 			</Button>
@@ -103,40 +97,23 @@
 <script setup>
 import {
 	DownloadIcon,
+	DropdownIcon,
 	StopCircleIcon,
 	TerminalSquareIcon,
-  DropdownIcon,
 	UnplugIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, Card } from '@modrinth/ui'
+import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
-import { progress_bars_list } from '@/helpers/state.js'
+
 import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { handleError } from '@/store/notifications.js'
-import { get_many } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
-import { getVersion } from '@tauri-apps/api/app'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many } from '@/helpers/profile.js'
+import { progress_bars_list } from '@/helpers/state.js'
 
-const version = await getVersion()
+const { handleError } = injectNotificationManager()
-
-import { installState, getRemote, updateState } from '@/helpers/update.js'
-import ModalWrapper from './modal/ModalWrapper.vue'
-
-const confirmUpdate = ref(null)
-
-const confirmUpdating = async () => {
-  confirmUpdate.value.show()
-}
-
-const approveUpdate = async () => {
-  confirmUpdate.value.hide()
-  await getRemote(true, true)
-}
-
-await getRemote(true, false)
 
 const router = useRouter()
 const card = ref(null)
@@ -294,101 +271,6 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-.inline-fix {
-  display: inline-flex;
-  margin-top: -2rem;
-  margin-bottom: -2rem;
-  //margin-left: 0.3rem;
-}
-
-.cosmic {
-  color: #3e8cde;
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-}
-
-.markdown-body {
-  :deep(table) {
-    width: auto;
-  }
-
-  :deep(hr),
-  :deep(h1),
-  :deep(h2) {
-    max-width: max(60rem, 90%);
-  }
-
-  :deep(ul),
-  :deep(ol) {
-    margin-left: 2rem;
-  }
-}
-
-.modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: var(--gap-lg);
-  text-align: left;
-
-  .button-group {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
-  strong {
-    color: var(--color-contrast);
-  }
-}
-
-.download {
-  color: #3e8cde;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-button-bg);
-  // padding: var(--gap-sm) var(--gap-lg);
-  background-color: rgba(0, 0, 0, 0);
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.download:hover,
-.download:focus,
-.download:active {
-  color: #10fae5;
-  text-shadow: #26065e;
-}
-
-.download-modal {
-  color: #3e8cde;
-  padding: var(--gap-sm) var(--gap-lg);
-  text-decoration: none;
-  text-shadow:
-    0 0 4px rgba(79, 173, 255, 0.5),
-    0 0 8px rgba(14, 98, 204, 0.5),
-    0 0 12px rgba(122, 31, 199, 0.5);
-  transition: color 0.35s ease;
-}
-
-.download-modal:hover,
-.download-modal:focus,
-.download-modal:active {
-  color: #10fae5;
-  text-shadow: #26065e;
-}
-
 .action-groups {
 	display: flex;
 	flex-direction: row;
@@ -400,7 +282,6 @@ onBeforeUnmount(() => {
 	transition: transform 0.2s ease-in-out;
 	display: flex;
 	align-items: center;
-
 	&.rotate {
 		transform: rotate(180deg);
 	}
@@ -422,10 +303,8 @@ onBeforeUnmount(() => {
 	gap: var(--gap-xs);
 	white-space: nowrap;
 	overflow: hidden;
-  -webkit-user-select: none;
+	-webkit-user-select: none; /* Safari */
-  /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
-  -ms-user-select: none;
-  /* IE 10 and IE 11 */
 	user-select: none;
 
 	&.clickable:hover {

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

@@ -117,15 +117,21 @@
 </template>
 
 <script setup>
-import { TagsIcon, DownloadIcon, HeartIcon, PlusIcon, CheckIcon } from '@modrinth/assets'
+import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { ButtonStyled, Avatar } from '@modrinth/ui'
+import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatNumber, formatCategory } from '@modrinth/utils'
+import { formatCategory, formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
 import { install as installVersion } from '@/store/install.js'
 dayjs.extend(relativeTime)
 
+const { handleError } = injectNotificationManager()
+
+const router = useRouter()
+
 const props = defineProps({
 	backgroundImage: {
 		type: String,
@@ -168,7 +174,10 @@ async function install() {
 			installing.value = false
 			emit('install', props.project.project_id ?? props.project.id)
 		},
-  )
+		(profile) => {
+			router.push(`/instance/${profile}`)
+		},
+	).catch(handleError)
 }
 
 const modpack = computed(() => props.project.project_type === 'modpack')

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

@@ -82,11 +82,12 @@
 </template>
 
 <script setup>
+import { MaximizeIcon, MinimizeIcon, XIcon } from '@modrinth/assets'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 import { ref, watch } from 'vue'
+
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { loading_listener } from '@/helpers/events.js'
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { XIcon, MaximizeIcon, MinimizeIcon } from '@modrinth/assets'
 import { getOS } from '@/helpers/utils.js'
 import { useLoading } from '@/store/loading.js'
 

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

@@ -1,12 +1,14 @@
 <script setup>
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
+
-import { get_categories } from '@/helpers/tags.js'
-import { handleError } from '@/store/notifications.js'
-import { get_version, get_project } from '@/helpers/cache.js'
-import { install as installVersion } from '@/store/install.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_project, get_version } from '@/helpers/cache.js'
+import { get_categories } from '@/helpers/tags.js'
+import { install as installVersion } from '@/store/install.js'
+
+const { handleError } = injectNotificationManager()
 
 const confirmModal = ref(null)
 const project = ref(null)
@@ -37,7 +39,14 @@ defineExpose({
 
 async function install() {
 	confirmModal.value.hide()
-  await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
+	await installVersion(
+		project.value.id,
+		version.value.id,
+		null,
+		'URLConfirmModal',
+		() => {},
+		() => {},
+	).catch(handleError)
 }
 </script>
 

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

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
 import {
-  UserPlusIcon,
-  MoreVerticalIcon,
 	MailIcon,
+	MoreVerticalIcon,
 	SettingsIcon,
 	TrashIcon,
+	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ref, onUnmounted, watch, computed } from 'vue'
+import {
-import { friend_listener } from '@/helpers/events'
+	Avatar,
-import { friends, friend_statuses, add_friend, remove_friend } from '@/helpers/friends'
+	ButtonStyled,
-import { get_user_many } from '@/helpers/cache'
+	injectNotificationManager,
-import { handleError } from '@/store/notifications.js'
+	OverflowMenu,
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+	useRelativeTime,
+} from '@modrinth/ui'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_user_many } from '@/helpers/cache'
+import { friend_listener } from '@/helpers/events'
+import { add_friend, friend_statuses, friends, remove_friend } from '@/helpers/friends'
+
+const { handleError } = injectNotificationManager()
+const formatRelativeTime = useRelativeTime()
 
 const props = defineProps<{
 	credentials: unknown | null
@@ -205,7 +214,9 @@ onUnmounted(() => {
 								You sent <span class="font-bold">{{ friend.username }}</span> a friend request
 							</template>
 						</p>
-            <p class="m-0 text-sm text-secondary">{{ friend.created.fromNow() }}</p>
+						<p class="m-0 text-sm text-secondary">
+							{{ formatRelativeTime(friend.created.toISOString()) }}
+						</p>
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials.user_id">

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

@@ -56,16 +56,18 @@
 </template>
 
 <script setup>
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
-import { Button } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
-import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
-import { handleError } from '@/store/state.js'
-import { trackEvent } from '@/helpers/analytics'
 import Multiselect from 'vue-multiselect'
 
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { add_project_from_version as installMod } from '@/helpers/profile'
+
+const { handleError } = injectNotificationManager()
+
 const instance = ref(null)
 const project = ref(null)
 const versions = ref(null)
@@ -76,10 +78,10 @@ const installing = ref(false)
 const onInstall = ref(() => {})
 
 defineExpose({
-  show: (instanceVal, projectVal, projectVersions, callback) => {
+	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
 		instance.value = instanceVal
 		versions.value = projectVersions
-    selectedVersion.value = projectVersions[0]
+		selectedVersion.value = selected ?? projectVersions[0]
 
 		project.value = projectVal
 

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

@@ -1,11 +1,13 @@
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
-import { create_profile_and_install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-import { trackEvent } from '@/helpers/analytics'
+
-import { handleError } from '@/store/state.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
+
+const { handleError } = injectNotificationManager()
 
 const versionId = ref()
 const project = ref()
@@ -13,15 +15,17 @@ const confirmModal = ref(null)
 const installing = ref(false)
 
 const onInstall = ref(() => {})
+const onCreateInstance = ref(() => {})
 
 defineExpose({
-  show: (projectVal, versionIdVal, callback) => {
+	show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
 		project.value = projectVal
 		versionId.value = versionIdVal
 		installing.value = false
 		confirmModal.value.show()
 
 		onInstall.value = callback
+		onCreateInstance.value = createInstanceCallback
 
 		trackEvent('PackInstallStart')
 	},
@@ -36,6 +40,7 @@ async function install() {
 		versionId.value,
 		project.value.title,
 		project.value.icon_url,
+		onCreateInstance.value,
 	).catch(handleError)
 	trackEvent('PackInstall', {
 		id: project.value.id,

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

@@ -1,29 +1,30 @@
 <script setup>
 import {
+	CheckIcon,
 	DownloadIcon,
 	PlusIcon,
+	RightArrowIcon,
 	UploadIcon,
 	XIcon,
-  RightArrowIcon,
-  CheckIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { open } from '@tauri-apps/plugin-dialog'
 import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
 import {
 	add_project_from_version as installMod,
 	check_installed,
+	create,
 	get,
 	list,
-  create,
 } from '@/helpers/profile'
-import { open } from '@tauri-apps/plugin-dialog'
 import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
-import { useRouter } from 'vue-router'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
+const { handleError } = injectNotificationManager()
 const router = useRouter()
 
 const versions = ref()
@@ -109,7 +110,7 @@ async function install(instance) {
 	}
 
 	await installMod(instance.path, version.id).catch(handleError)
-  await installVersionDependencies(instance, version)
+	await installVersionDependencies(instance, version).catch(handleError)
 
 	instance.installedMod = true
 	instance.installing = false
@@ -184,7 +185,7 @@ const createInstance = async () => {
 	await router.push(`/instance/${encodeURIComponent(id)}/`)
 
 	const instance = await get(id, true)
-  await installVersionDependencies(instance, versions.value[0])
+	await installVersionDependencies(instance, versions.value[0]).catch(handleError)
 
 	trackEvent('InstanceCreate', {
 		profile_name: name.value,

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

@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	Checkbox,
+	injectNotificationManager,
+	OverflowMenu,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon, TrashIcon, UploadIcon, PlusIcon, EditIcon, CopyIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, OverflowMenu, Checkbox } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { trackEvent } from '@/helpers/analytics'
 import { open } from '@tauri-apps/plugin-dialog'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, type Ref, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import type { InstanceSettingsTabProps, GameInstance } from '../../../helpers/types'
 
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+
+import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
+import { Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings'
+import { computed, ref, watch } from 'vue'
-import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'
 
+import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
@@ -25,9 +27,8 @@ const editProfileObject = computed(() => {
 		hooks?: Hooks
 	} = {}
 
-  if (overrideHooks.value) {
+	// When hooks are not overridden per-instance, we want to clear them
-    editProfile.hooks = hooks.value
+	editProfile.hooks = overrideHooks.value ? hooks.value : {}
-  }
 
 	return editProfile
 })

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

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import {
-  TransferIcon,
-  IssuesIcon,
-  HammerIcon,
 	DownloadIcon,
-  WrenchIcon,
+	HammerIcon,
-  UndoIcon,
+	IssuesIcon,
 	SpinnerIcon,
-  UnplugIcon,
+	TransferIcon,
+	UndoIcon,
 	UnlinkIcon,
+	UnplugIcon,
+	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, Checkbox, Chips, ButtonStyled, TeleportDropdownMenu } from '@modrinth/ui'
+import {
-import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
+	Avatar,
-import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+	ButtonStyled,
-import { handleError } from '@/store/notifications'
+	Checkbox,
-import { trackEvent } from '@/helpers/analytics'
+	Chips,
-import { defineMessages, useVIntl } from '@vintl/vintl'
+	injectNotificationManager,
-import { get_loader_versions } from '@/helpers/metadata'
+	TeleportDropdownMenu,
-import { get_game_versions, get_loaders } from '@/helpers/tags'
+} from '@modrinth/ui'
 import {
 	formatCategory,
 	type GameVersionTag,
@@ -25,16 +25,31 @@ import {
 	type Project,
 	type Version,
 } from '@modrinth/utils'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get_project, get_version_many } from '@/helpers/cache'
+import { defineMessages, useVIntl } from '@vintl/vintl'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
 import dayjs from 'dayjs'
+import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
+
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project, get_version_many } from '@/helpers/cache'
+import { get_loader_versions } from '@/helpers/metadata'
+import { edit, install, update_repair_modrinth } from '@/helpers/profile'
+import { get_game_versions, get_loaders } from '@/helpers/tags'
+
 import type {
 	InstanceSettingsTabProps,
-  ManifestLoaderVersion,
 	Manifest,
+	ManifestLoaderVersion,
 } from '../../../helpers/types'
 
+import { initAuthlibPatching } from '@/helpers/utils.js'
+const authLibPatchingModal = ref(null)
+const isAuthLibPatchedSuccess = ref(false)
+const isAuthLibPatching = ref(false)
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const repairConfirmModal = ref()
@@ -447,9 +462,43 @@ const messages = defineMessages({
 		defaultMessage: 'reinstall',
 	},
 })
+
+async function handleInitAuthLibPatching(ismojang: boolean) {
+  isAuthLibPatching.value = true
+  let state = false
+  let instance_path =  props.instance.loader_version != null ? props.instance.game_version + "-" + props.instance.loader_version : props.instance.game_version
+  try {
+    state = await initAuthlibPatching(instance_path, ismojang)
+  } catch (err) {
+    console.error(err)
+  }
+  isAuthLibPatching.value = false
+  isAuthLibPatchedSuccess.value = state
+  authLibPatchingModal.value.show()
+}
 </script>
 
 <template>
+	<ModalWrapper
+  	  ref="authLibPatchingModal"
+  	  :header="'AuthLib installation report'"
+  	  :closable="true"
+  	  @close="authLibPatchingModal.hide()"
+  	>
+  	  <div class="modal-body">
+  	    <h2 class="text-lg font-bold text-contrast space-y-2">
+  	      <p class="flex items-center gap-2 neon-text">
+  	        <span v-if="isAuthLibPatchedSuccess" class="neon-text">
+  	          AuthLib installation completed successfully! Now you can log in and play!
+  	        </span>
+  	        <span v-else class="neon-text">
+  	          Failed to install AuthLib. It's possible that no compatible AuthLib version was found for the selected game and/or mod loader version.
+  	          There may also be a problem with accessing resources behind CloudFlare.
+  	        </span>
+  	      </p>
+  	    </h2>
+  	  </div>
+  	</ModalWrapper>
 	<ConfirmModalWrapper
 		ref="repairConfirmModal"
 		:title="formatMessage(messages.repairConfirmTitle)"
@@ -505,7 +554,8 @@ const messages = defineMessages({
 		</div>
 		<div v-else-if="!modpackProject && instance.linked_data && !fetching" class="mb-2">
 			<p class="text-brand-red font-medium mt-0">
-        <IssuesIcon class="top-[3px] relative" /> {{ formatMessage(messages.noModpackFound) }}
+				<IssuesIcon class="top-[3px] relative" />
+				{{ formatMessage(messages.noModpackFound) }}
 			</p>
 			<p>{{ formatMessage(messages.debugInformation) }}</p>
 			<div class="bg-bg p-6 rounded-2xl mt-2 text-sm text-secondary">
@@ -532,7 +582,9 @@ const messages = defineMessages({
 							{{
 								modpackProject
 									? modpackProject.title
-                  : formatMessage(messages.minecraftVersion, { version: instance.game_version })
+									: formatMessage(messages.minecraftVersion, {
+											version: instance.game_version,
+										})
 							}}
 						</span>
 						<span class="text-sm text-secondary leading-none">
@@ -662,7 +714,12 @@ const messages = defineMessages({
 				/>
 				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
 					<IssuesIcon />
-          {{ formatMessage(messages.noLoaderVersions, { loader: loader, version: gameVersion }) }}
+					{{
+						formatMessage(messages.noLoaderVersions, {
+							loader: loader,
+							version: gameVersion,
+						})
+					}}
 				</div>
 			</template>
 			<div class="mt-4 flex flex-wrap gap-2">
@@ -720,6 +777,24 @@ const messages = defineMessages({
 					</button>
 				</ButtonStyled>
 			</div>
+			<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
+      		  <div v-if="isAuthLibPatching" class="w-6 h-6 cursor-pointer hover:brightness-75 neon-icon pulse">
+      		    <SpinnerIcon class="size-4 animate-spin" />
+      		  </div>
+      		  Auth system (Skins) <span class="text-sm font-bold px-2 bg-brand-highlight text-brand rounded-full">Beta</span>
+      		</h2>
+      		<div class="mt-4 flex gap-2">
+      		  <ButtonStyled class="neon-button neon">
+      		    <button :disabled="isAuthLibPatching" @click="handleInitAuthLibPatching(true)">
+      		      Install Microsoft
+      		    </button>
+      		  </ButtonStyled>
+      		  <ButtonStyled class="neon-button neon">
+      		    <button :disabled="isAuthLibPatching" @click="handleInitAuthLibPatching(false) ">
+      		      Install Ely.By
+      		    </button>
+      		  </ButtonStyled>
+      		</div>
 		</template>
 		<template v-else>
 			<template v-if="instance.linked_data && instance.linked_data.locked">
@@ -787,3 +862,9 @@ const messages = defineMessages({
 		</template>
 	</div>
 </template>
+
+<style lang="scss" scoped>
+@import '../../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../../packages/assets/styles/neon-text.scss';
+@import '../../../../../../packages/assets/styles/neon-icon.scss';
+</style>

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

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import { Checkbox, Slider } from '@modrinth/ui'
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { computed, readonly, ref, watch } from 'vue'
+import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
-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 { computed, readonly, ref, watch } from 'vue'
-import { get_max_memory } from '@/helpers/jre'
-import { get } from '@/helpers/settings'
-import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'
 
+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, InstanceSettingsTabProps, MemorySettings } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
 
-const globalSettings = (await get().catch(handleError)) as AppSettings
+const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
 
 const overrideJavaInstall = ref(!!props.instance.java_path)
 const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
@@ -34,7 +36,10 @@ const envVars = ref(
 
 const overrideMemorySettings = ref(!!props.instance.memory)
 const memory = ref(props.instance.memory ?? globalSettings.memory)
-const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}
 
 const editProfileObject = computed(() => {
 	const editProfile: {
@@ -156,6 +161,8 @@ 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/instance_settings/WindowSettings.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { Checkbox, Toggle } from '@modrinth/ui'
+import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
 import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings'
+import { computed, type Ref, ref, watch } from 'vue'
+
 import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
 
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()

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

@@ -1,28 +1,48 @@
 <script setup lang="ts">
 import {
-  ReportIcon,
-  AstralRinthLogo,
-  ShieldIcon,
-  SettingsIcon,
-  GaugeIcon,
-  PaintBrushIcon,
-  GameIcon,
 	CoffeeIcon,
+	GameIcon,
+	GaugeIcon,
+	AstralRinthLogo,
+	DownloadIcon,
+	SpinnerIcon,
+	PaintbrushIcon,
+	ReportIcon,
+	SettingsIcon,
+	ShieldIcon,
 } from '@modrinth/assets'
 import { TabbedModal } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
-import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
-import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
-import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
 import { getVersion } from '@tauri-apps/api/app'
-import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
+import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { useTheming } from '@/store/state'
+import { defineMessage, useVIntl } from '@vintl/vintl'
-import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import { computed, ref, watch } from 'vue'
+
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { get, set } from '@/helpers/settings'
+import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
+import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
+import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
+import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
+import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
+import { get, set } from '@/helpers/settings.ts'
+// [AR] Imports
+import { installState, getRemote, updateState } from '@/helpers/update.js'
+
+const updateModalView = ref(null)
+const updateRequestFailView = ref(null)
+
+const initUpdateModal = async () => {
+  updateModalView.value.show()
+}
+
+const initDownload = async () => {
+  updateModalView.value.hide()
+  const result = await getRemote(true);
+  if (!result) {
+    updateRequestFailView.value.show()
+  }
+}
+import { useTheming } from '@/store/state'
 
 const themeStore = useTheming()
 
@@ -41,7 +61,7 @@ const tabs = [
 			id: 'app.settings.tabs.appearance',
 			defaultMessage: 'Appearance',
 		}),
-    icon: PaintBrushIcon,
+		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
 	{
@@ -140,7 +160,10 @@ function devModeCount() {
 					<div class="flex items-center gap-3">
 						<button
 							class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
-              :class="{ 'text-brand': themeStore.devMode, 'text-secondary': !themeStore.devMode }"
+							:class="{
+								'text-brand': themeStore.devMode,
+								'text-secondary': !themeStore.devMode,
+							}"
 							@click="devModeCount"
 						>
 							<AstralRinthLogo class="w-6 h-6" />
@@ -152,10 +175,81 @@ function devModeCount() {
 								<span v-else class="capitalize">{{ osPlatform }}</span>
 								{{ osVersion }}
 							</p>
+						</div>
+						<div v-if="updateState" class="w-8 h-8 cursor-pointer hover:brightness-75 neon-icon pulse">
+            			  <template v-if="installState">
+            			    <SpinnerIcon class="size-6 animate-spin" v-tooltip.bottom="'Installing in process...'" />
+            			  </template>
+            			  <template v-else>
+            			    <DownloadIcon class="size-6" v-tooltip.bottom="'View update info'" @click="!installState && (initUpdateModal(), getRemote(false))" />
+            			  </template>
             			</div>
 					</div>
 				</div>
 			</template>
 		</TabbedModal>
+		<!-- [AR] Feature -->
+    	<ModalWrapper ref="updateModalView" :has-to-type="false" header="Request to update the AstralRinth launcher">
+    	  <div class="space-y-4">
+    	    <div class="space-y-2">
+    	      <p>The new version of the AstralRinth launcher is available.</p>
+    	      <p>Your version is outdated. We recommend that you update to the latest version.</p>
+    	      <p><strong>⚠️ Warning ⚠️</strong></p>
+    	      <p>
+    	        Before updating, make sure that you have saved all running instances and made a backup copy of the instances
+    	        that are valuable to you. Remember that the authors of the product are not responsible for the breakdown of
+    	        your files, so you should always make copies of them and keep them in a safe place.
+    	      </p>
+    	    </div>
+    	    <div class="text-sm text-secondary space-y-1">
+    	      <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank"
+    	        rel="noopener noreferrer"><strong>Source:</strong> Git Astralium</a>
+    	      <p>
+    	        <strong>Version on remote server:</strong>
+    	        <span id="releaseData" class="neon-text"></span>
+    	      </p>
+    	      <p>
+    	        <strong>Version on local device:</strong>
+    	        <span class="neon-text">v{{ version }}</span>
+    	      </p>
+    	    </div>
+
+    	    <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
+    	      <Button class="bordered" @click="updateModalView.hide()">Cancel</Button>
+    	      <Button class="bordered" @click="initDownload()">Download file</Button>
+    	    </div>
+    	  </div>
+    	</ModalWrapper>
+    	<ModalWrapper ref="updateRequestFailView" :has-to-type="false" header="Failed to request a file from the server :(">
+    	  <div class="space-y-4">
+    	    <div class="space-y-2">
+    	      <p><strong>Error occurred</strong></p>
+    	      <p>Unfortunately, the program was unable to download the file from our servers.</p>
+    	      <p>
+    	        Please try downloading it yourself from
+    	        <a class="neon-text" href="https://me.astralium.su/get/ar" target="_blank" rel="noopener noreferrer">Git
+    	          Astralium</a>
+    	        if there are any updates available.
+    	      </p>
+    	    </div>
+
+    	    <div class="text-sm text-secondary">
+    	      <p>
+    	        <strong>Local AstralRinth:</strong>
+    	        <span class="neon-text">v{{ version }}</span>
+    	      </p>
+    	    </div>
+
+    	    <div class="absolute bottom-4 right-4 flex items-center gap-4 neon-button neon">
+    	      <Button class="bordered" @click="updateRequestFailView.hide()">Close</Button>
+    	    </div>
+    	  </div>
+    	</ModalWrapper>
 	</ModalWrapper>
 </template>
+
+<style lang="scss" scoped>
+@import '../../../../../../packages/assets/styles/neon-icon.scss';
+@import '../../../../../../packages/assets/styles/neon-button.scss';
+@import '../../../../../../packages/assets/styles/neon-text.scss';
+</style>

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

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

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { ConfirmModal } from '@modrinth/ui'
+import { ref } from 'vue'
 
-import { useTheming } from '@/store/theme.js'
+// import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()
 
@@ -41,6 +42,10 @@ const props = defineProps({
 	// 	type: Boolean,
 	// 	default: true,
 	// },
+	markdown: {
+		type: Boolean,
+		default: true,
+	},
 })
 
 const emit = defineEmits(['proceed'])
@@ -48,10 +53,11 @@ const modal = ref(null)
 
 defineExpose({
 	show: () => {
+		// hide_ads_window()
 		modal.value.show()
 	},
 	hide: () => {
-    // onModalHide()
+		onModalHide()
 		modal.value.hide()
 	},
 })
@@ -79,6 +85,7 @@ function proceed() {
 		:on-hide="onModalHide"
 		:noblur="!themeStore.advancedRendering"
 		:danger="danger"
+		:markdown="markdown"
 		@proceed="proceed"
 	/>
 </template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+
+import type { GameInstance } from '@/helpers/types'
+
+defineProps<{
+	instance: GameInstance
+}>()
+</script>
+<template>
+	<span class="flex items-center gap-2 text-lg font-semibold text-primary">
+		<Avatar
+			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+			size="24px"
+			:tint-by="instance.path"
+		/>
+		{{ instance.name }} <ChevronRightIcon />
+	</span>
+</template>

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

@@ -1,22 +1,24 @@
 <script setup lang="ts">
 import {
 	ChevronRightIcon,
+	CodeIcon,
 	CoffeeIcon,
 	InfoIcon,
-  WrenchIcon,
 	MonitorIcon,
-  CodeIcon,
+	WrenchIcon,
 } from '@modrinth/assets'
 import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
-import { ref } from 'vue'
-import { defineMessage, useVIntl } from '@vintl/vintl'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
+
+import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
+import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
-import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
 import type { InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { NewModal as Modal } from '@modrinth/ui'
-// import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTemplateRef } from 'vue'
-import { useTheming } from '@/store/theme.js'
+
+// import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()
 
@@ -18,7 +19,7 @@ const props = defineProps({
 	onHide: {
 		type: Function,
 		default() {
-      return () => { }
+			return () => {}
 		},
 	},
 	// showAdOnClose: {
@@ -26,22 +27,23 @@ const props = defineProps({
 	// 	default: true,
 	// },
 })
-const modal = ref(null)
+const modal = useTemplateRef('modal')
 
 defineExpose({
-  show: () => {
+	show: (e: MouseEvent) => {
-    modal.value.show()
+		// hide_ads_window()
+		modal.value?.show(e)
 	},
 	hide: () => {
 		onModalHide()
-    modal.value.hide()
+		modal.value?.hide()
 	},
 })
 
 function onModalHide() {
-//   if (props.showAdOnClose) {
+	// if (props.showAdOnClose) {
-//     show_ads_window()
+	// 	show_ads_window()
-//   }
+	// }
 	props.onHide?.()
 }
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { ShareModal } from '@modrinth/ui'
+import { ref } from 'vue'
 
-import { useTheming } from '@/store/theme.js'
+// import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.ts'
 
 const themeStore = useTheming()
 
@@ -33,6 +34,7 @@ const modal = ref(null)
 
 defineExpose({
 	show: (passedContent) => {
+		// hide_ads_window()
 		modal.value.show(passedContent)
 	},
 	hide: () => {
@@ -40,9 +42,21 @@ defineExpose({
 		modal.value.hide()
 	},
 })
+
+// function onModalHide() {
+// 	show_ads_window()
+// }
 </script>
 
 <template>
-  <ShareModal ref="modal" :header="header" :share-title="shareTitle" :share-text="shareText" :link="link"
+	<ShareModal
-    :open-in-new-tab="openInNewTab" :on-hide="onModalHide" :noblur="!themeStore.advancedRendering" />
+		ref="modal"
+		:header="header"
+		:share-title="shareTitle"
+		:share-text="shareText"
+		:link="link"
+		:open-in-new-tab="openInNewTab"
+		:on-hide="onModalHide"
+		:noblur="!themeStore.advancedRendering"
+	/>
 </template>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { TeleportDropdownMenu, ThemeSelector, Toggle } from '@modrinth/ui'
-import { useTheming } from '@/store/state'
-import { get, set } from '@/helpers/settings'
 import { ref, watch } from 'vue'
+
+import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
+import { useTheming } from '@/store/state'
+import type { ColorTheme } from '@/store/theme.ts'
 
 const themeStore = useTheming()
 
@@ -24,13 +26,13 @@ watch(
 
 	<ThemeSelector
 		:update-color-theme="
-      (theme) => {
+			(theme: ColorTheme) => {
 				themeStore.setThemeState(theme)
 				settings.theme = theme
 			}
 		"
 		:current-theme="settings.theme"
-    :theme-options="themeStore.themeOptions"
+		:theme-options="themeStore.getThemeOptions()"
 		system-theme-color="system"
 	/>
 
@@ -55,9 +57,17 @@ 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" />
@@ -80,10 +90,28 @@ watch(
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
+			class="w-40"
 			:options="['Home', 'Library']"
 		/>
 	</div>
 
+	<div class="mt-4 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
+			<p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
+		</div>
+		<Toggle
+			:model-value="themeStore.getFeatureFlag('worlds_in_home')"
+			@update:model-value="
+				() => {
+					const newValue = !themeStore.getFeatureFlag('worlds_in_home')
+					themeStore.featureFlags['worlds_in_home'] = newValue
+					settings.feature_flags['worlds_in_home'] = newValue
+				}
+			"
+		/>
+	</div>
+
 	<div class="mt-4 flex items-center justify-between">
 		<div>
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>

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

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

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

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { Toggle } from '@modrinth/ui'
-import { useTheming } from '@/store/state'
 import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings'
+
+import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
+import { useTheming } from '@/store/state'
+import { DEFAULT_FEATURE_FLAGS, type FeatureFlag } from '@/store/theme.ts'
 
 const themeStore = useTheming()
 
-const settings = ref(await get())
+const settings = ref(await getSettings())
-const options = ref(['project_background', 'page_path'])
+const options = ref<FeatureFlag[]>(Object.keys(DEFAULT_FEATURE_FLAGS))
 
-function getStoreValue(key: string) {
+function setFeatureFlag(key: string, value: boolean) {
-  return themeStore.featureFlags[key] ?? false
-}
-
-function setStoreValue(key: string, value: boolean) {
 	themeStore.featureFlags[key] = value
 	settings.value.feature_flags[key] = value
 }
@@ -21,7 +19,7 @@ function setStoreValue(key: string, value: boolean) {
 watch(
 	settings,
 	async () => {
-    await set(settings.value)
+		await setSettings(settings.value)
 	},
 	{ deep: true },
 )
@@ -30,14 +28,14 @@ watch(
 	<div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
 		<div>
 			<h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-        {{ option }}
+				{{ option.replaceAll('_', ' ') }}
 			</h2>
 		</div>
 
 		<Toggle
 			id="advanced-rendering"
-      :model-value="getStoreValue(option)"
+			:model-value="themeStore.getFeatureFlag(option)"
-      @update:model-value="() => setStoreValue(option, !themeStore.featureFlags[option])"
+			@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
 		/>
 	</div>
 </template>

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

@@ -1,8 +1,11 @@
 <script setup>
+import { injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import { get_java_versions, set_java_version } from '@/helpers/jre'
+
-import { handleError } from '@/store/notifications'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
+import { get_java_versions, set_java_version } from '@/helpers/jre'
+
+const { handleError } = injectNotificationManager()
 
 const javaVersions = ref(await get_java_versions().catch(handleError))
 async function updateJavaVersion(version) {

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings'
 import { Toggle } from '@modrinth/ui'
+import { ref, watch } from 'vue'
+
 import { optInAnalytics, optOutAnalytics } from '@/helpers/analytics'
+import { get, set } from '@/helpers/settings.ts'
 
 const settings = ref(await get())
 
@@ -26,11 +27,11 @@ watch(
 		<div>
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Personalized ads</h2>
 			<p class="m-0 text-sm">
-        (Hard disabled by AR) • Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
+				Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
 				option, you opt out and ads will no longer be shown based on your interests.
 			</p>
 		</div>
-    <!-- AstralRinth disabled element by default -->
+    <!-- [AR] Patch. Disabled element by default -->
 		<Toggle id="personalized-ads" v-model="settings.personalized_ads" :disabled="!settings.personalized_ads" />
 	</div>
 
@@ -38,12 +39,12 @@ watch(
 		<div>
 			<h2 class="m-0 text-lg font-extrabold text-contrast">Telemetry</h2>
 			<p class="m-0 text-sm">
-        (Hard disabled by AR) • Modrinth collects anonymized analytics and usage data to improve our user experience and
+				Modrinth collects anonymized analytics and usage data to improve our user experience and
 				customize your experience. By disabling this option, you opt out and your data will no
 				longer be collected.
 			</p>
 		</div>
-    <!-- AstralRinth disabled element by default -->
+    <!-- [AR] Patch. Disabled element by default -->
 		<Toggle id="opt-out-analytics" v-model="settings.telemetry" :disabled="!settings.telemetry" />
 	</div>
 

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

@@ -1,13 +1,14 @@
 <script setup>
-import { Button, Slider } from '@modrinth/ui'
-import { ref, watch } from 'vue'
-import { get, set } from '@/helpers/settings.js'
-import { purge_cache_types } from '@/helpers/cache.js'
-import { handleError } from '@/store/notifications.js'
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { Button, injectNotificationManager, Slider } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
+import { ref, watch } from 'vue'
 
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { purge_cache_types } from '@/helpers/cache.js'
+import { get, set } from '@/helpers/settings.ts'
+
+const { handleError } = injectNotificationManager()
 const settings = ref(await get())
 
 watch(

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

@@ -0,0 +1,416 @@
+<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 {
+	CheckIcon,
+	ChevronRightIcon,
+	SaveIcon,
+	SpinnerIcon,
+	UploadIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	ButtonStyled,
+	CapeButton,
+	CapeLikeTextButton,
+	injectNotificationManager,
+	RadioButtons,
+	SkinPreviewRenderer,
+} from '@modrinth/ui'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
+import {
+	add_and_equip_custom_skin,
+	type Cape,
+	determineModelType,
+	get_normalized_skin_texture,
+	remove_custom_skin,
+	type Skin,
+	type SkinModel,
+	unequip_skin,
+} from '@/helpers/skins.ts'
+
+const { handleError } = injectNotificationManager()
+
+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

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

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

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

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

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import {
+	EyeIcon,
+	FolderOpenIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	injectNotificationManager,
+	OverflowMenu,
+	SmartClickable,
+	useRelativeTime,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useVIntl } from '@vintl/vintl'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { trackEvent } from '@/helpers/analytics'
+import { get_project } from '@/helpers/cache'
+import { process_listener } from '@/helpers/events'
+import { get_by_profile_path } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import { showProfileInFolder } from '@/helpers/utils'
+import { handleSevereError } from '@/store/error'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+	(e: 'play' | 'stop'): void
+}>()
+
+const props = defineProps<{
+	instance: GameInstance
+	last_played: Dayjs
+}>()
+
+const loadingModpack = ref(!!props.instance.linked_data)
+
+const modpack = ref()
+
+if (props.instance.linked_data) {
+	nextTick().then(async () => {
+		modpack.value = await get_project(props.instance.linked_data?.project_id, 'must_revalidate')
+		loadingModpack.value = false
+	})
+}
+
+const instanceIcon = computed(() => props.instance.icon_path)
+
+const loader = computed(() => {
+	if (props.instance.loader === 'vanilla') {
+		return 'Minecraft'
+	} else if (props.instance.loader === 'neoforge') {
+		return 'NeoForge'
+	} else {
+		return capitalizeString(props.instance.loader)
+	}
+})
+
+const loading = ref(false)
+const playing = ref(false)
+
+const play = async (event: MouseEvent) => {
+	event?.stopPropagation()
+	loading.value = true
+	await run(props.instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+		.finally(() => {
+			trackEvent('InstancePlay', {
+				loader: props.instance.loader,
+				game_version: props.instance.game_version,
+				source: 'InstanceItem',
+			})
+		})
+	emit('play')
+	loading.value = false
+}
+
+const stop = async (event: MouseEvent) => {
+	event?.stopPropagation()
+	loading.value = true
+	await kill(props.instance.path).catch(handleError)
+	trackEvent('InstanceStop', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		source: 'InstanceItem',
+	})
+	emit('stop')
+	loading.value = false
+}
+
+const unlistenProcesses = await process_listener(async () => {
+	await checkProcess()
+})
+
+const checkProcess = async () => {
+	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+
+	playing.value = runningProcesses.length > 0
+}
+
+onMounted(() => {
+	checkProcess()
+})
+
+onUnmounted(() => {
+	unlistenProcesses()
+})
+</script>
+<template>
+	<SmartClickable>
+		<template #clickable>
+			<router-link
+				class="no-click-animation"
+				:to="`/instance/${encodeURIComponent(instance.path)}`"
+			/>
+		</template>
+		<div
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised rounded-xl smart-clickable:highlight-on-hover"
+		>
+			<Avatar
+				:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+				:tint-by="instance.path"
+				size="48px"
+			/>
+			<div class="flex flex-col col-span-2 justify-between h-full">
+				<div class="flex items-center gap-2">
+					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+						{{ instance.name }}
+					</div>
+				</div>
+				<div class="flex items-center gap-2 text-sm text-secondary">
+					<div
+						v-tooltip="
+							instance.last_played
+								? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
+								: null
+						"
+						class="w-fit shrink-0"
+						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
+					>
+						<template v-if="last_played">
+							{{
+								formatMessage(commonMessages.playedLabel, {
+									time: formatRelativeTime(last_played.toISOString?.()),
+								})
+							}}
+						</template>
+						<template v-else> Not played yet </template>
+					</div>
+					•
+					<span v-if="modpack" class="flex items-center gap-1 truncate text-secondary">
+						<router-link
+							class="inline-flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
+							:to="`/project/${modpack.id}`"
+						>
+							<Avatar :src="modpack.icon_url" size="16px" class="shrink-0" />
+							<span class="truncate">{{ modpack.title }}</span>
+						</router-link>
+						({{ loader }} {{ instance.game_version }})
+					</span>
+					<span v-else-if="loadingModpack" class="flex items-center gap-1 truncate text-secondary">
+						<SpinnerIcon class="animate-spin shrink-0" />
+						<span class="truncate">Loading modpack...</span>
+					</span>
+					<span v-else class="flex items-center gap-1 truncate text-secondary">
+						{{ loader }}
+						{{ instance.game_version }}
+					</span>
+				</div>
+			</div>
+			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
+				<ButtonStyled v-if="playing && !loading" color="red">
+					<button @click="stop">
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button
+						v-tooltip="playing ? 'Instance is already open' : null"
+						:disabled="playing || loading"
+						@click="play"
+					>
+						<SpinnerIcon v-if="loading" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu
+						:options="[
+							{
+								id: 'open-instance',
+								shown: !!instance.path,
+								action: () => router.push(encodeURI(`/instance/${instance.path}`)),
+							},
+							{
+								id: 'open-folder',
+								action: () => showProfileInFolder(instance.path),
+							},
+						]"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<template #open-instance>
+							<EyeIcon aria-hidden="true" />
+							View instance
+						</template>
+						<template #open-folder>
+							<FolderOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.openFolderButton) }}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+	</SmartClickable>
+</template>

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

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+
+import InstanceItem from '@/components/ui/world/InstanceItem.vue'
+import WorldItem from '@/components/ui/world/WorldItem.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { get_all } from '@/helpers/process'
+import { kill, run } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import {
+	get_profile_protocol_version,
+	get_recent_worlds,
+	getWorldIdentifier,
+	type ProtocolVersion,
+	refreshServerData,
+	type ServerData,
+	type ServerWorld,
+	start_join_server,
+	start_join_singleplayer_world,
+	type WorldWithProfile,
+} from '@/helpers/worlds.ts'
+import { handleSevereError } from '@/store/error'
+import { useTheming } from '@/store/theme.ts'
+
+const { handleError } = injectNotificationManager()
+
+const props = defineProps<{
+	recentInstances: GameInstance[]
+}>()
+
+const theme = useTheming()
+
+const jumpBackInItems = ref<JumpBackInItem[]>([])
+const serverData = ref<Record<string, ServerData>>({})
+const protocolVersions = ref<Record<string, ProtocolVersion | null>>({})
+
+const MIN_JUMP_BACK_IN = 3
+const MAX_JUMP_BACK_IN = 6
+const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
+
+type BaseJumpBackInItem = {
+	last_played: Dayjs
+	instance: GameInstance
+}
+
+type InstanceJumpBackInItem = BaseJumpBackInItem & {
+	type: 'instance'
+}
+
+type WorldJumpBackInItem = BaseJumpBackInItem & {
+	type: 'world'
+	world: WorldWithProfile
+}
+
+type JumpBackInItem = InstanceJumpBackInItem | WorldJumpBackInItem
+
+const showWorlds = computed(() => theme.getFeatureFlag('worlds_in_home'))
+
+watch([() => props.recentInstances, () => showWorlds.value], async () => {
+	await populateJumpBackIn().catch(() => {
+		console.error('Failed to populate jump back in')
+	})
+})
+
+await populateJumpBackIn().catch(() => {
+	console.error('Failed to populate jump back in')
+})
+
+async function populateJumpBackIn() {
+	console.info('Repopulating jump back in...')
+
+	const worldItems: WorldJumpBackInItem[] = []
+
+	if (showWorlds.value) {
+		const worlds = await get_recent_worlds(MAX_JUMP_BACK_IN, ['normal', 'favorite'])
+
+		worlds.forEach((world) => {
+			const instance = props.recentInstances.find((instance) => instance.path === world.profile)
+
+			if (!instance || !world.last_played) {
+				return
+			}
+
+			worldItems.push({
+				type: 'world',
+				last_played: dayjs(world.last_played ?? 0),
+				world: world,
+				instance: instance,
+			})
+		})
+
+		const servers: {
+			instancePath: string
+			address: string
+		}[] = worldItems
+			.filter((item) => item.world.type === 'server' && item.instance)
+			.map((item) => ({
+				instancePath: item.instance.path,
+				address: (item.world as ServerWorld).address,
+			}))
+
+		// fetch protocol versions for all unique MC versions with server worlds
+		const uniqueServerInstances = new Set<string>(servers.map((x) => x.instancePath))
+		await Promise.all(
+			[...uniqueServerInstances].map((path) =>
+				get_profile_protocol_version(path)
+					.then((protoVer) => (protocolVersions.value[path] = protoVer))
+					.catch(() => {
+						console.error(`Failed to get profile protocol for: ${path} `)
+					}),
+			),
+		)
+
+		// initialize server data
+		servers.forEach(({ address }) => {
+			if (!serverData.value[address]) {
+				serverData.value[address] = {
+					refreshing: true,
+				}
+			}
+		})
+
+		servers.forEach(({ instancePath, address }) =>
+			refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address),
+		)
+	}
+
+	const instanceItems: InstanceJumpBackInItem[] = []
+	for (const instance of props.recentInstances) {
+		const worldItem = worldItems.find((item) => item.instance.path === instance.path)
+		if ((worldItem && worldItem.last_played.isAfter(TWO_WEEKS_AGO)) || !instance.last_played) {
+			continue
+		}
+
+		instanceItems.push({
+			type: 'instance',
+			last_played: dayjs(instance.last_played ?? 0),
+			instance: instance,
+		})
+	}
+
+	const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
+	items.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
+	jumpBackInItems.value = items
+		.filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
+		.slice(0, MAX_JUMP_BACK_IN)
+}
+
+function refreshServer(address: string, instancePath: string) {
+	refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
+}
+
+async function joinWorld(world: WorldWithProfile) {
+	console.log(`Joining world ${getWorldIdentifier(world)}`)
+	if (world.type === 'server') {
+		await start_join_server(world.profile, world.address).catch(handleError)
+	} else if (world.type === 'singleplayer') {
+		await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
+	}
+}
+
+async function playInstance(instance: GameInstance) {
+	await run(instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: instance.path }))
+		.finally(() => {
+			trackEvent('InstancePlay', {
+				loader: instance.loader,
+				game_version: instance.game_version,
+				source: 'WorldItem',
+			})
+		})
+}
+
+async function stopInstance(path: string) {
+	await kill(path).catch(handleError)
+	trackEvent('InstanceStop', {
+		source: 'RecentWorldsList',
+	})
+}
+
+const currentProfile = ref<string>()
+const currentWorld = ref<string>()
+
+const unlistenProcesses = await process_listener(async () => {
+	await checkProcesses()
+})
+
+const unlistenProfiles = await profile_listener(async () => {
+	await populateJumpBackIn().catch(() => {
+		console.error('Failed to populate jump back in')
+	})
+})
+
+const runningInstances = ref<string[]>([])
+
+type ProcessMetadata = {
+	uuid: string
+	profile_path: string
+	start_time: string
+}
+
+const checkProcesses = async () => {
+	const runningProcesses: ProcessMetadata[] = await get_all().catch(handleError)
+
+	const runningPaths = runningProcesses.map((x) => x.profile_path)
+
+	const stoppedInstances = runningInstances.value.filter((x) => !runningPaths.includes(x))
+	if (currentProfile.value && stoppedInstances.includes(currentProfile.value)) {
+		currentProfile.value = undefined
+		currentWorld.value = undefined
+	}
+
+	runningInstances.value = runningPaths
+}
+
+onMounted(() => {
+	checkProcesses()
+})
+
+onUnmounted(() => {
+	unlistenProcesses()
+	unlistenProfiles()
+})
+</script>
+
+<template>
+	<div v-if="jumpBackInItems.length > 0" class="flex flex-col gap-2">
+		<HeadingLink v-if="theme.getFeatureFlag('worlds_tab')" to="/worlds" class="mt-1">
+			Jump back in
+		</HeadingLink>
+		<span
+			v-else
+			class="flex mt-1 mb-3 leading-none items-center gap-1 text-primary text-lg font-bold"
+		>
+			Jump back in
+		</span>
+		<div class="grid-when-huge flex flex-col w-full gap-2">
+			<template
+				v-for="item in jumpBackInItems"
+				:key="`${item.instance.path}-${item.type === 'world' ? getWorldIdentifier(item.world) : 'instance'}`"
+			>
+				<WorldItem
+					v-if="item.type === 'world'"
+					:world="item.world"
+					:playing-instance="runningInstances.includes(item.instance.path)"
+					:playing-world="
+						currentProfile === item.instance.path && currentWorld === getWorldIdentifier(item.world)
+					"
+					:refreshing="
+						item.world.type === 'server'
+							? serverData[item.world.address].refreshing && !serverData[item.world.address].status
+							: undefined
+					"
+					supports-quick-play
+					:server-status="
+						item.world.type === 'server' ? serverData[item.world.address].status : undefined
+					"
+					:rendered-motd="
+						item.world.type === 'server' ? serverData[item.world.address].renderedMotd : undefined
+					"
+					:current-protocol="protocolVersions[item.instance.path]"
+					:game-mode="
+						item.world.type === 'singleplayer' ? GAME_MODES[item.world.game_mode] : undefined
+					"
+					:instance-path="item.instance.path"
+					:instance-name="item.instance.name"
+					:instance-icon="item.instance.icon_path"
+					@refresh="
+						() =>
+							item.world.type === 'server'
+								? refreshServer(item.world.address, item.instance.path)
+								: {}
+					"
+					@update="() => populateJumpBackIn()"
+					@play="
+						() => {
+							currentProfile = item.instance.path
+							currentWorld = getWorldIdentifier(item.world)
+							joinWorld(item.world)
+						}
+					"
+					@play-instance="
+						() => {
+							currentProfile = item.instance.path
+							playInstance(item.instance)
+						}
+					"
+					@stop="() => stopInstance(item.instance.path)"
+				/>
+				<InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
+			</template>
+		</div>
+	</div>
+</template>
+<style scoped lang="scss">
+.grid-when-huge {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(670px, 1fr));
+}
+</style>

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

@@ -0,0 +1,523 @@
+<script setup lang="ts">
+import {
+	ClipboardCopyIcon,
+	EditIcon,
+	EyeIcon,
+	FolderOpenIcon,
+	IssuesIcon,
+	MoreVerticalIcon,
+	NoSignalIcon,
+	PlayIcon,
+	SignalIcon,
+	SkullIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+	TrashIcon,
+	UpdatedIcon,
+	UserIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	OverflowMenu,
+	SmartClickable,
+	useRelativeTime,
+} from '@modrinth/ui'
+import { formatNumber, getPingLevel } from '@modrinth/utils'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import type { MessageDescriptor } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import dayjs from 'dayjs'
+import { Tooltip } from 'floating-vue'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { copyToClipboard } from '@/helpers/utils'
+import type {
+	ProtocolVersion,
+	ServerStatus,
+	ServerWorld,
+	SingleplayerWorld,
+	World,
+} from '@/helpers/worlds.ts'
+import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.ts'
+
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+
+const router = useRouter()
+
+const emit = defineEmits<{
+	(e: 'play' | 'play-instance' | 'update' | 'stop' | 'refresh' | 'edit' | 'delete'): void
+	(e: 'open-folder', world: SingleplayerWorld): void
+}>()
+
+const props = withDefaults(
+	defineProps<{
+		world: World
+		playingInstance?: boolean
+		playingWorld?: boolean
+		startingInstance?: boolean
+		supportsServerQuickPlay?: boolean
+		supportsWorldQuickPlay?: boolean
+		currentProtocol?: ProtocolVersion | null
+		highlighted?: boolean
+
+		// Server only
+		refreshing?: boolean
+		serverStatus?: ServerStatus
+		renderedMotd?: string
+
+		// Singleplayer only
+		gameMode?: {
+			icon: Component
+			message: MessageDescriptor
+		}
+
+		// Instance
+		instancePath?: string
+		instanceName?: string
+		instanceIcon?: string
+	}>(),
+	{
+		playingInstance: false,
+		playingWorld: false,
+		startingInstance: false,
+		supportsServerQuickPlay: true,
+		supportsWorldQuickPlay: false,
+		currentProtocol: null,
+
+		refreshing: false,
+		serverStatus: undefined,
+		renderedMotd: undefined,
+
+		gameMode: undefined,
+
+		instancePath: undefined,
+		instanceName: undefined,
+		instanceIcon: undefined,
+	},
+)
+
+const playingOtherWorld = computed(() => props.playingInstance && !props.playingWorld)
+const hasPlayersTooltip = computed(
+	() => !!props.serverStatus?.players?.sample && props.serverStatus.players?.sample?.length > 0,
+)
+const serverIncompatible = computed(
+	() =>
+		!!props.serverStatus &&
+		!!props.serverStatus.version?.protocol &&
+		!!props.currentProtocol &&
+		(props.serverStatus.version.protocol !== props.currentProtocol.version ||
+			props.serverStatus.version.legacy !== props.currentProtocol.legacy),
+)
+
+const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
+
+const messages = defineMessages({
+	hardcore: {
+		id: 'instance.worlds.hardcore',
+		defaultMessage: 'Hardcore mode',
+	},
+	cantConnect: {
+		id: 'instance.worlds.cant_connect',
+		defaultMessage: "Can't connect to server",
+	},
+	aMinecraftServer: {
+		id: 'instance.worlds.a_minecraft_server',
+		defaultMessage: 'A Minecraft Server',
+	},
+	noServerQuickPlay: {
+		id: 'instance.worlds.no_server_quick_play',
+		defaultMessage: 'You can only jump straight into servers on Minecraft Alpha 1.0.5+',
+	},
+	noSingleplayerQuickPlay: {
+		id: 'instance.worlds.no_singleplayer_quick_play',
+		defaultMessage: 'You can only jump straight into singleplayer worlds on Minecraft 1.20+',
+	},
+	gameAlreadyOpen: {
+		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',
+	},
+	viewInstance: {
+		id: 'instance.worlds.view_instance',
+		defaultMessage: 'View instance',
+	},
+	playInstance: {
+		id: 'instance.worlds.play_instance',
+		defaultMessage: 'Play instance',
+	},
+	worldInUse: {
+		id: 'instance.worlds.world_in_use',
+		defaultMessage: 'World is in use',
+	},
+	dontShowOnHome: {
+		id: 'instance.worlds.dont_show_on_home',
+		defaultMessage: `Don't show on Home`,
+	},
+})
+</script>
+<template>
+	<SmartClickable>
+		<template v-if="instancePath" #clickable>
+			<router-link
+				class="no-click-animation"
+				:to="`/instance/${encodeURIComponent(instancePath)}/worlds?highlight=${encodeURIComponent(getWorldIdentifier(world))}`"
+			/>
+		</template>
+		<div
+			class="grid grid-cols-[auto_minmax(0,3fr)_minmax(0,4fr)_auto] items-center gap-2 p-3 bg-bg-raised smart-clickable:highlight-on-hover rounded-xl"
+			:class="{
+				'world-item-highlighted': highlighted,
+			}"
+		>
+			<Avatar
+				:src="
+					world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+				"
+				size="48px"
+			/>
+			<div class="flex flex-col justify-between h-full">
+				<div class="flex items-center gap-2">
+					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
+						{{ world.name }}
+					</div>
+					<div
+						v-if="world.type === 'singleplayer'"
+						class="text-sm text-secondary flex items-center gap-1 font-semibold"
+					>
+						<UserIcon
+							aria-hidden="true"
+							class="h-4 w-4 text-secondary shrink-0"
+							stroke-width="3px"
+						/>
+						{{ formatMessage(commonMessages.singleplayerLabel) }}
+					</div>
+					<div
+						v-else-if="world.type === 'server'"
+						class="text-sm text-secondary flex items-center gap-1 font-semibold flex-nowrap whitespace-nowrap"
+					>
+						<template v-if="refreshing">
+							<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
+							Loading...
+						</template>
+						<template v-else-if="serverStatus">
+							<template v-if="serverIncompatible">
+								<IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
+								<span class="text-orange">
+									Incompatible version {{ serverStatus.version?.name }}
+								</span>
+							</template>
+							<template v-else>
+								<SignalIcon
+									v-tooltip="serverStatus ? `${serverStatus.ping}ms` : null"
+									aria-hidden="true"
+									:style="`--_signal-${getPingLevel(serverStatus.ping || 0)}: var(--color-green)`"
+									stroke-width="3px"
+									class="shrink-0"
+									:class="{
+										'smart-clickable:allow-pointer-events': serverStatus,
+									}"
+								/>
+								<Tooltip :disabled="!hasPlayersTooltip">
+									<span :class="{ 'cursor-help': hasPlayersTooltip }">
+										{{ formatNumber(serverStatus.players?.online, false) }}
+										online
+									</span>
+									<template #popper>
+										<div class="flex flex-col gap-1">
+											<span v-for="player in serverStatus.players?.sample" :key="player.name">
+												{{ player.name }}
+											</span>
+										</div>
+									</template>
+								</Tooltip>
+							</template>
+						</template>
+						<template v-else>
+							<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
+							Offline
+						</template>
+					</div>
+				</div>
+				<div class="flex items-center gap-2 text-sm text-secondary">
+					<div
+						v-tooltip="
+							world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
+						"
+						class="w-fit shrink-0"
+						:class="{
+							'cursor-help smart-clickable:allow-pointer-events': world.last_played,
+						}"
+					>
+						<template v-if="world.last_played">
+							{{
+								formatMessage(commonMessages.playedLabel, {
+									time: formatRelativeTime(dayjs(world.last_played).toISOString()),
+								})
+							}}
+						</template>
+						<template v-else> Not played yet </template>
+					</div>
+					<template v-if="instancePath">
+						•
+						<router-link
+							class="flex items-center gap-1 truncate hover:underline text-secondary smart-clickable:allow-pointer-events"
+							:to="`/instance/${instancePath}`"
+						>
+							<Avatar
+								:src="instanceIcon ? convertFileSrc(instanceIcon) : undefined"
+								size="16px"
+								:tint-by="instancePath"
+								class="shrink-0"
+							/>
+							<span class="truncate">{{ instanceName }}</span>
+						</router-link>
+					</template>
+				</div>
+			</div>
+			<div
+				class="font-semibold flex items-center gap-1 justify-center text-center"
+				:class="world.type === 'singleplayer' && world.hardcore ? `text-red` : 'text-secondary'"
+			>
+				<template v-if="world.type === 'server'">
+					<template v-if="refreshing">
+						<SpinnerIcon aria-hidden="true" class="animate-spin" />
+						{{ formatMessage(commonMessages.loadingLabel) }}
+					</template>
+					<div
+						v-else-if="renderedMotd"
+						class="motd-renderer font-normal font-minecraft line-clamp-2 text-secondary leading-5"
+						v-html="renderedMotd"
+					/>
+					<div v-else-if="!serverStatus" class="font-normal font-minecraft text-red leading-5">
+						{{ formatMessage(messages.cantConnect) }}
+					</div>
+					<div v-else class="font-normal font-minecraft text-secondary leading-5">
+						{{ formatMessage(messages.aMinecraftServer) }}
+					</div>
+				</template>
+				<template v-else-if="world.type === 'singleplayer' && gameMode">
+					<template v-if="world.hardcore">
+						<SkullIcon aria-hidden="true" class="h-4 w-4 shrink-0" />
+						{{ formatMessage(messages.hardcore) }}
+					</template>
+					<template v-else>
+						<component :is="gameMode.icon" aria-hidden="true" class="h-4 w-4 shrink-0" />
+						{{ formatMessage(gameMode.message) }}
+					</template>
+				</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="
+							world.type == 'server' && !supportsServerQuickPlay
+								? formatMessage(messages.noServerQuickPlay)
+								: world.type == 'singleplayer' && !supportsWorldQuickPlay
+									? formatMessage(messages.noSingleplayerQuickPlay)
+									: playingOtherWorld || locked
+										? formatMessage(messages.gameAlreadyOpen)
+										: !serverStatus
+											? formatMessage(messages.noContact)
+											: serverIncompatible
+												? formatMessage(messages.incompatibleServer)
+												: null
+						"
+						:disabled="
+							playingOtherWorld ||
+							startingInstance ||
+							(world.type == 'server' && !supportsServerQuickPlay) ||
+							(world.type == 'singleplayer' && !supportsWorldQuickPlay)
+						"
+						@click="emit('play')"
+					>
+						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu
+						:options="[
+							{
+								id: 'play-instance',
+								shown: !!instancePath,
+								disabled: playingInstance,
+								action: () => emit('play-instance'),
+							},
+							{
+								id: 'open-instance',
+								shown: !!instancePath,
+								action: () => router.push(encodeURI(`/instance/${instancePath}`)),
+							},
+							{
+								id: 'refresh',
+								shown: world.type === 'server',
+								action: () => emit('refresh'),
+							},
+							{
+								id: 'copy-address',
+								shown: world.type === 'server',
+								action: () => copyToClipboard((world as ServerWorld).address),
+							},
+							{
+								id: 'edit',
+								action: () => emit('edit'),
+								shown: !instancePath,
+								disabled: locked,
+								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+							},
+							{
+								id: 'open-folder',
+								shown: world.type === 'singleplayer',
+								action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
+							},
+							{
+								divider: true,
+								shown: !!instancePath,
+							},
+							{
+								id: 'dont-show-on-home',
+								shown: !!instancePath,
+								action: () => {
+									set_world_display_status(
+										instancePath,
+										world.type,
+										getWorldIdentifier(world),
+										'hidden',
+									).then(() => {
+										emit('update')
+									})
+								},
+							},
+							{
+								divider: true,
+								shown: !instancePath,
+							},
+							{
+								id: 'delete',
+								color: 'red',
+								hoverFilled: true,
+								action: () => emit('delete'),
+								shown: !instancePath,
+								disabled: locked,
+								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+							},
+						]"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<template #play-instance>
+							<PlayIcon aria-hidden="true" />
+							{{ formatMessage(messages.playInstance) }}
+						</template>
+						<template #open-instance>
+							<EyeIcon aria-hidden="true" />
+							{{ formatMessage(messages.viewInstance) }}
+						</template>
+						<template #edit>
+							<EditIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.editButton) }}
+						</template>
+						<template #open-folder>
+							<FolderOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.openFolderButton) }}
+						</template>
+						<template #copy-address>
+							<ClipboardCopyIcon aria-hidden="true" />
+							{{ formatMessage(messages.copyAddress) }}
+						</template>
+						<template #refresh>
+							<UpdatedIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.refreshButton) }}
+						</template>
+						<template #dont-show-on-home>
+							<XIcon aria-hidden="true" />
+							{{ formatMessage(messages.dontShowOnHome) }}
+						</template>
+						<template #delete>
+							<TrashIcon aria-hidden="true" />
+							{{
+								formatMessage(
+									world.type === 'server'
+										? commonMessages.removeButton
+										: commonMessages.deleteLabel,
+								)
+							}}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
+			</div>
+		</div>
+	</SmartClickable>
+</template>
+<style scoped lang="scss">
+.world-item-highlighted {
+	position: relative;
+	animation: fade-highlight 4s ease-out;
+	filter: brightness(1);
+
+	&::before {
+		@apply rounded-xl inset-0 absolute;
+
+		animation: fade-opacity 4s ease-out;
+
+		content: '';
+		box-shadow: 0 0 8px 2px var(--color-brand);
+		border: 1.5px solid var(--color-brand);
+		opacity: 0;
+	}
+}
+
+@keyframes fade-highlight {
+	0% {
+		filter: brightness(1.25);
+	}
+	75% {
+		filter: brightness(1.25);
+	}
+	100% {
+		filter: brightness(1);
+	}
+}
+
+@keyframes fade-opacity {
+	0% {
+		opacity: 0.5;
+	}
+	75% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+.light-mode .motd-renderer {
+	filter: brightness(0.75);
+}
+</style>

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
+
+import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import type { GameInstance } from '@/helpers/types'
+import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	submit: [server: ServerWorld, play: boolean]
+}>()
+
+const props = defineProps<{
+	instance: GameInstance
+}>()
+
+const modal = ref()
+
+const name = ref()
+const address = ref()
+const resourcePack = ref<ServerPackStatus>('enabled')
+
+async function addServer(play: boolean) {
+	const serverName = name.value ? name.value : address.value
+	const resourcePackStatus = resourcePack.value
+	const index =
+		(await add_server_to_profile(
+			props.instance.path,
+			serverName,
+			address.value,
+			resourcePackStatus,
+		).catch(handleError)) ?? 0
+	emit(
+		'submit',
+		{
+			name: serverName,
+			type: 'server',
+			index,
+			address: address.value,
+			pack_status: resourcePackStatus,
+		},
+		play,
+	)
+	hide()
+}
+
+function show() {
+	name.value = ''
+	address.value = ''
+	resourcePack.value = 'enabled'
+	modal.value.show()
+}
+
+function hide() {
+	modal.value.hide()
+}
+
+const messages = defineMessages({
+	title: {
+		id: 'instance.add-server.title',
+		defaultMessage: 'Add a server',
+	},
+	addServer: {
+		id: 'instance.add-server.add-server',
+		defaultMessage: 'Add server',
+	},
+	addAndPlay: {
+		id: 'instance.add-server.add-and-play',
+		defaultMessage: 'Add and play',
+	},
+})
+
+defineExpose({ show, hide })
+</script>
+<template>
+	<ModalWrapper ref="modal">
+		<template #title>
+			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
+				<InstanceModalTitlePrefix :instance="instance" />
+				<span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
+			</span>
+		</template>
+		<ServerModalBody
+			v-model:name="name"
+			v-model:address="address"
+			v-model:resource-pack="resourcePack"
+		/>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button :disabled="!address" @click="addServer(true)">
+					<PlayIcon />
+					{{ formatMessage(messages.addAndPlay) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="!address" @click="addServer(false)">
+					<PlusIcon />
+					{{ formatMessage(messages.addServer) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+</template>

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

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
+import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
+import type { GameInstance } from '@/helpers/types'
+import {
+	type DisplayStatus,
+	edit_server_in_profile,
+	type ServerPackStatus,
+	type ServerWorld,
+	set_world_display_status,
+} from '@/helpers/worlds.ts'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	submit: [server: ServerWorld]
+}>()
+
+const props = defineProps<{
+	instance: GameInstance
+}>()
+
+const modal = ref()
+
+const name = ref<string>('')
+const address = ref<string>('')
+const resourcePack = ref<ServerPackStatus>('enabled')
+const index = ref<number>(0)
+const displayStatus = ref<DisplayStatus>('normal')
+const hideFromHome = ref(false)
+
+const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))
+
+async function saveServer() {
+	const serverName = name.value ? name.value : address.value
+	const resourcePackStatus = resourcePack.value
+	await edit_server_in_profile(
+		props.instance.path,
+		index.value,
+		serverName,
+		address.value,
+		resourcePackStatus,
+	).catch(handleError)
+
+	if (newDisplayStatus.value !== displayStatus.value) {
+		await set_world_display_status(
+			props.instance.path,
+			'server',
+			address.value,
+			newDisplayStatus.value,
+		).catch(handleError)
+	}
+
+	emit('submit', {
+		name: serverName,
+		type: 'server',
+		index: index.value,
+		address: address.value,
+		pack_status: resourcePackStatus,
+		display_status: newDisplayStatus.value,
+	})
+	hide()
+}
+
+function show(server: ServerWorld) {
+	name.value = server.name
+	address.value = server.address
+	resourcePack.value = server.pack_status
+	index.value = server.index
+	displayStatus.value = server.display_status
+	hideFromHome.value = server.display_status === 'hidden'
+	modal.value.show()
+}
+
+function hide() {
+	modal.value.hide()
+}
+
+defineExpose({ show })
+
+const titleMessage = defineMessage({
+	id: 'instance.edit-server.title',
+	defaultMessage: 'Edit server',
+})
+</script>
+<template>
+	<ModalWrapper ref="modal">
+		<template #title>
+			<span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
+		</template>
+		<ServerModalBody
+			v-model:name="name"
+			v-model:address="address"
+			v-model:resource-pack="resourcePack"
+		/>
+		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button :disabled="!address" @click="saveServer">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+</template>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
+import type { GameInstance } from '@/helpers/types'
+import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
+import { rename_world, reset_world_icon, set_world_display_status } from '@/helpers/worlds.ts'
+
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const emit = defineEmits<{
+	submit: [path: string, name: string, removeIcon: boolean, displayStatus: DisplayStatus]
+}>()
+
+const props = defineProps<{
+	instance: GameInstance
+}>()
+
+const modal = ref()
+
+const icon = ref()
+const name = ref()
+const path = ref()
+const removeIcon = ref(false)
+const displayStatus = ref<DisplayStatus>('normal')
+const hideFromHome = ref(false)
+
+const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))
+
+async function saveWorld() {
+	await rename_world(props.instance.path, path.value, name.value).catch(handleError)
+
+	if (removeIcon.value) {
+		await reset_world_icon(props.instance.path, path.value).catch(handleError)
+	}
+	if (newDisplayStatus.value !== displayStatus.value) {
+		await set_world_display_status(
+			props.instance.path,
+			'singleplayer',
+			path.value,
+			newDisplayStatus.value,
+		)
+	}
+
+	emit('submit', path.value, name.value, removeIcon.value, newDisplayStatus.value)
+	hide()
+}
+
+function show(world: SingleplayerWorld) {
+	name.value = world.name
+	path.value = world.path
+	icon.value = world.icon
+	displayStatus.value = world.display_status
+	hideFromHome.value = world.display_status === 'hidden'
+	removeIcon.value = false
+	modal.value.show()
+}
+
+function hide() {
+	modal.value.hide()
+}
+
+defineExpose({ show })
+
+const messages = defineMessages({
+	title: {
+		id: 'instance.edit-world.title',
+		defaultMessage: 'Edit world',
+	},
+	name: {
+		id: 'instance.edit-world.name',
+		defaultMessage: 'Name',
+	},
+	placeholderName: {
+		id: 'instance.edit-world.placeholder-name',
+		defaultMessage: 'Minecraft World',
+	},
+	resetIcon: {
+		id: 'instance.edit-world.reset-icon',
+		defaultMessage: 'Reset icon',
+	},
+})
+</script>
+<template>
+	<ModalWrapper ref="modal">
+		<template #title>
+			<Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
+			{{ instance.name }} <ChevronRightIcon />
+			<span class="font-extrabold text-lg text-contrast">{{ formatMessage(messages.title) }}</span>
+		</template>
+		<div class="w-[450px]">
+			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+				{{ formatMessage(messages.name) }}
+			</h2>
+			<input
+				v-model="name"
+				type="text"
+				:placeholder="formatMessage(messages.placeholderName)"
+				class="w-full"
+				autocomplete="off"
+			/>
+			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
+		</div>
+		<div class="flex gap-2 mt-4">
+			<ButtonStyled color="brand">
+				<button @click="saveWorld">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="removeIcon || !icon" @click="removeIcon = true">
+					<UndoIcon />
+					{{ formatMessage(messages.resetIcon) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
+		</div>
+	</ModalWrapper>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Checkbox } from '@modrinth/ui'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
+
+const { formatMessage } = useVIntl()
+const value = defineModel<boolean>({ required: true })
+
+const labelMessage = defineMessage({
+	id: 'instance.edit-world.hide-from-home',
+	defaultMessage: `Hide from the Home page`,
+})
+
+const label = computed(() => formatMessage(labelMessage))
+</script>
+<template>
+	<Checkbox v-model="value" :label="label" />
+</template>

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { TeleportDropdownMenu } from '@modrinth/ui'
+import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+
+import type { ServerPackStatus } from '@/helpers/worlds.ts'
+
+const { formatMessage } = useVIntl()
+
+const name = defineModel<string>('name')
+const address = defineModel<string>('address')
+const resourcePack = defineModel<ServerPackStatus>('resourcePack')
+
+const resourcePackOptions: ServerPackStatus[] = ['enabled', 'prompt', 'disabled']
+
+const resourcePackOptionMessages: Record<ServerPackStatus, MessageDescriptor> = defineMessages({
+	enabled: {
+		id: 'instance.add-server.resource-pack.enabled',
+		defaultMessage: 'Enabled',
+	},
+	prompt: {
+		id: 'instance.add-server.resource-pack.prompt',
+		defaultMessage: 'Prompt',
+	},
+	disabled: {
+		id: 'instance.add-server.resource-pack.disabled',
+		defaultMessage: 'Disabled',
+	},
+})
+
+const messages = defineMessages({
+	name: {
+		id: 'instance.server-modal.name',
+		defaultMessage: 'Name',
+	},
+	address: {
+		id: 'instance.server-modal.address',
+		defaultMessage: 'Address',
+	},
+	resourcePack: {
+		id: 'instance.server-modal.resource-pack',
+		defaultMessage: 'Resource pack',
+	},
+	placeholderName: {
+		id: 'instance.server-modal.placeholder-name',
+		defaultMessage: 'Minecraft Server',
+	},
+})
+
+defineExpose({ resourcePackOptions })
+</script>
+<template>
+	<div class="w-[450px]">
+		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
+			{{ formatMessage(messages.name) }}
+		</h2>
+		<input
+			v-model="name"
+			type="text"
+			:placeholder="formatMessage(messages.placeholderName)"
+			class="w-full"
+			autocomplete="off"
+		/>
+		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+			{{ formatMessage(messages.address) }}
+		</h2>
+		<input
+			v-model="address"
+			type="text"
+			placeholder="example.modrinth.gg"
+			class="w-full"
+			autocomplete="off"
+		/>
+		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
+			{{ formatMessage(messages.resourcePack) }}
+		</h2>
+		<div>
+			<TeleportDropdownMenu
+				v-model="resourcePack"
+				:options="resourcePackOptions"
+				name="Server resource pack"
+				:display-name="
+					(option: ServerPackStatus) => formatMessage(resourcePackOptionMessages[option])
+				"
+			/>
+		</div>
+	</div>
+</template>

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

@@ -1,4 +1,5 @@
 import { invoke } from '@tauri-apps/api/core'
+
 import cssContent from '@/assets/stylesheets/macFix.css?inline'
 
 export async function useCheckDisableMouseover() {

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

@@ -0,0 +1,21 @@
+import { computed, ref } from 'vue'
+
+import { get_max_memory } from '@/helpers/jre.js'
+
+export default async function () {
+	const maxMemory = ref(Math.floor((await get_max_memory()) / 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/analytics.js

@@ -1,8 +1,9 @@
 import { posthog } from 'posthog-js'
 
 export const initAnalytics = () => {
-  posthog.init('phc_hm2ihMpTAoE86xIm7XzsCB8RPiTRKivViK5biiHedm', {
+	posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
 		persistence: 'localStorage',
+		api_host: 'https://posthog.modrinth.com',
 	})
 }
 

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

@@ -17,6 +17,24 @@ export async function offline_login(name) {
   return await invoke('plugin:auth|offline_login', { name: name })
 }
 
+// [AR] • Feature
+export async function elyby_login(uuid, login, accessToken) {
+  return await invoke('plugin:auth|elyby_login', {
+    uuid,
+    login,
+    accessToken
+  })
+}
+
+// [AR] • Feature
+export async function elyby_auth_authenticate(login, password, clientToken) {
+  return await invoke('plugin:auth|elyby_auth_authenticate', {
+    login,
+    password,
+    clientToken,
+  })
+}
+
 /**
  * Authenticate a user with Hydra - part 1.
  * This begins the authentication flow quasi-synchronously.

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

@@ -62,7 +62,7 @@ export async function process_listener(callback) {
     ProfilePayload {
         uuid: unique identification of the process in the state (currently identified by path, but that will change)
         name: name of the profile
-        profile_path: relative path to profile (used for path identification)
+        profile_path: relative path toprofile_listener profile (used for path identification)
         path: path to profile (used for opening the profile in the OS file explorer)
         event: event type ("Created", "Added", "Edited", "Removed")
     }

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

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

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

@@ -4,6 +4,7 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
+
 import { create } from './profile'
 
 /*
@@ -61,3 +62,31 @@ export async function is_valid_importable_instance(instanceFolder, launcherType)
 export async function get_default_launcher_path(launcherType) {
 	return await invoke('plugin:import|get_default_launcher_path', { launcherType })
 }
+
+/// Fetch CurseForge profile metadata from profile code
+/// eg: fetch_curseforge_profile_metadata("eSrNlKNo")
+export async function fetch_curseforge_profile_metadata(profileCode) {
+  return await invoke('plugin:import|fetch_curseforge_profile_metadata', { profileCode })
+}
+
+/// Import a CurseForge profile from profile code
+/// eg: import_curseforge_profile("eSrNlKNo")
+export async function import_curseforge_profile(profileCode) {
+  try {
+    // First, fetch the profile metadata to get the actual name
+    const metadata = await fetch_curseforge_profile_metadata(profileCode)
+
+    // create a basic, empty instance using the actual profile name
+    const profilePath = await create(metadata.name, '1.19.4', 'vanilla', 'latest', null, true)
+
+    const result = await invoke('plugin:import|import_curseforge_profile', {
+      profilePath,
+      profileCode,
+    })
+
+    // Return the profile path for navigation
+    return { result, profilePath }
+  } catch (error) {
+    throw error
+  }
+}