Add RPM to website

* Mute audio from playing in ads

* Update tauri version, get rid of custom

* bump wry

* fix more

* Fix lint

.cargo/config.toml

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

.editorconfig

@@ -1,13 +1,18 @@
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
 max_line_length = 100
 
 [*.md]
+max_line_length = off
 trim_trailing_whitespace = false
+
+[*.rs]
+indent_size = 4

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

@@ -0,0 +1,59 @@
+name: 🎮 Modrinth App bug
+description: Report an issue in the Modrinth Launcher.
+labels: [bug, app]
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+        - label: I have ensured my Modrinth App installation is up to date
+          required: true
+  - type: input
+    id: version
+    attributes:
+      label: What version of the Modrinth App are you using?
+      description: Find this in ⚙️ Settings (bottom right) -> About -> App version.
+    validations:
+      required: true
+  - type: dropdown
+    id: oses
+    attributes:
+      label: What operating systems are you seeing the problem on?
+      multiple: true
+      options:
+        - Windows
+        - MacOS
+        - Linux
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false

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

@@ -0,0 +1,52 @@
+name: 🌐 Website bug (modrinth.com)
+description: Report an issue on the Modrinth website.
+labels: [bug, frontend]
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Chrome (including Arc, Brave, Opera, Vivaldi)
+        - Microsoft Edge
+        - Firefox
+        - Safari
+        - Other (please specify)
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false

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

@@ -1,11 +1,19 @@
-name: Bug report
-description: Create a report to help us improve Modrinth
-labels: [bug]
+name: 🛠️ API issue (api.modrinth.com)
+description: Report an issue regarding the Modrinth API.
+labels: [bug, api]
 body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of what the bug is.
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
     validations:
       required: false
   - type: textarea
@@ -25,13 +33,9 @@ body:
       description: A clear and concise description of what you expected to happen.
     validations:
       required: false
-  - type: textarea
-    attributes: 
-      label: System information
-      description: Add any information about what OS you are on (like Windows or Mac), and what version of the app you are using.
   - type: textarea
     attributes:
       label: Additional context
-      description: Add any other context about the problem here. This might include logs, screenshots, etc. The more the merrier!
+      description: Add any other context about the problem here.
     validations:
-      required: false
+      required: false

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

@@ -1,10 +1,28 @@
-name: Enhancement
-description: Suggest an enhancement for an existing Modrinth feature
+name: 💡 Feature Request
+description: Suggest an idea
 labels: [enhancement]
+
 body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate feature requests
+          required: true
+        - label: I have checked that this feature request is not on our [roadmap](https://roadmap.modrinth.com)
+          required: true
+  - type: dropdown
+    id: projects
+    attributes:
+      label: What parts of Modrinth is your feature request related too?
+      multiple: true
+      options:
+        - App
+        - Website
+        - API
   - type: textarea
     attributes:
-      label: Is your suggested enhancement related to a problem? Please describe.
+      label: Is your suggested feature related to a problem? Please describe.
       description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
     validations:
       required: false
@@ -25,4 +43,4 @@ body:
       label: Additional context
       description: Add any other context or screenshots about the suggested enhancement here.
     validations:
-      required: false
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -1,16 +1,14 @@
 blank_issues_enabled: true
 contact_links:
-  - name: Discord
-    about: Ask questions on our Discord Server.
+  - name: 🫶 Support Portal
+    about: Get support using through our portal.
+    url: https://support.modrinth.com
+  - name: 💬 Chat
+    about: Join our Discord server to chat about Modrinth.
     url: https://discord.modrinth.com
-  - name: Roadmap
+  - name: 🛣️ Roadmap
     about: View our Roadmap. Please do not open issues for items on our roadmap.
     url: https://roadmap.modrinth.com
-  - name: Discussions (Feature requests)
-    about: |
-      Please use Issues for reporting bugs and suggesting enhancements to existing features.
-      Suggestions for new features should be made as a Discussion.
-    url: https://github.com/orgs/modrinth/discussions/categories/feature-requests
-  - name: Documentation
-    about: Useful documentation about Modrinth, its API, and how you can contribute.
-    url: https://docs.modrinth.com
+  - name: 📚 Documentation
+    about: Useful documentation about Modrinth's API
+    url: https://docs.modrinth.com

.github/workflows/app-release.yml

@@ -0,0 +1,155 @@
+name: 'Modrinth App build'
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+    paths:
+      - .github/workflows/app-release.yml
+      - 'apps/app/**'
+      - 'apps/app-frontend/**'
+      - '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-22.04]
+
+    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
+            !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
+          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 }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: build app
+        run: pnpm --filter=@modrinth/app run tauri build --config "tauri-release.conf.json"
+        id: build_os
+        if: "!startsWith(matrix.platform, 'macos')"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: upload ${{ matrix.platform }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.platform }}
+          path: |
+            target/*/release/bundle/*/*.dmg
+            target/*/release/bundle/*/*.app.tar.gz
+            target/*/release/bundle/*/*.app.tar.gz.sig
+            target/release/bundle/*/*.dmg
+            target/release/bundle/*/*.app.tar.gz
+            target/release/bundle/*/*.app.tar.gz.sig
+
+            target/release/bundle/*/*.AppImage
+            target/release/bundle/*/*.AppImage.tar.gz
+            target/release/bundle/*/*.AppImage.tar.gz.sig
+            target/release/bundle/*/*.deb
+            target/release/bundle/*/*.rpm
+
+            target/release/bundle/msi/*.msi
+            target/release/bundle/msi/*.msi.zip
+            target/release/bundle/msi/*.msi.zip.sig
+
+            target/release/bundle/nsis/*.exe
+            target/release/bundle/nsis/*.nsis.zip
+            target/release/bundle/nsis/*.nsis.zip.sig

.github/workflows/ci.yml

@@ -0,0 +1,70 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize]
+  merge_group:
+    types: [ checks_requested ]
+
+jobs:
+  build:
+    name: Build, Test, and Lint
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Install build dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Setup Node.JS environment
+        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
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        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
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test

.github/workflows/cli-build.yml

@@ -1,44 +0,0 @@
-name: CLI Build + Lint
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-env:
-  CARGO_TERM_COLOR: always
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./theseus_cli
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: install dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
-
-      - name: Rust setup
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: './src-tauri -> target'
-
-      - uses: actions-rs/cargo@v1
-        name: Build program
-        with:
-          command: build
-          args: --bin theseus_cli
-
-      - name: Run Lint
-        uses: actions-rs/clippy-check@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          args: --bin theseus_cli

.github/workflows/frontend-pages.yml

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

.github/workflows/gui-build.yml

@@ -1,42 +0,0 @@
-name: GUI Build + Lint
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./theseus_gui
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - 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@v3
-        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
-        run: pnpm install
-      - name: Run Lint
-        run: pnpm lint
-      - name: Build
-        run: pnpm build

.github/workflows/tauri-build.yml

@@ -1,109 +0,0 @@
-name: 'Tauri GUI Build'
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-jobs:
-  test-tauri:
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-20.04, ubuntu-22.04]
-
-    runs-on: ${{ matrix.platform }}
-    defaults:
-      run:
-        working-directory: ./theseus_gui
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Rust setup (mac)
-        if: startsWith(matrix.platform, 'macos')
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-          targets: aarch64-apple-darwin
-
-      - name: Rust setup
-        if: "!startsWith(matrix.platform, 'macos')"
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: './src-tauri -> target'
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - 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@v3
-        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 libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf libselinux1
-
-      - name: Install frontend dependencies
-        run: pnpm install
-
-      - name: build app (macos)
-        uses: tauri-apps/tauri-action@v0
-        id: build_os_mac
-        if: startsWith(matrix.platform, 'macos')
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-        with:
-          args: --target universal-apple-darwin
-
-      - name: build app
-        uses: tauri-apps/tauri-action@v0
-        id: build_os
-        if: "!startsWith(matrix.platform, 'macos')"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - name: upload ${{ matrix.platform }}
-        uses: actions/upload-artifact@v3
-        if: startsWith(matrix.platform, 'macos')
-        with:
-          name: ${{ matrix.platform }}
-          path: "${{ join(fromJSON(steps.build_os_mac.outputs.artifactPaths), '\n') }}"
-
-      - name: upload ${{ matrix.platform }}
-        uses: actions/upload-artifact@v3
-        if: "!startsWith(matrix.platform, 'macos')"
-        with:
-          name: ${{ matrix.platform }}
-          path: "${{ join(fromJSON(steps.build_os.outputs.artifactPaths), '\n') }}"

.gitignore

@@ -1,114 +1,57 @@
-/target
-node_modules/
-.svelte-kit/
-theseus_gui/build/
-theseus_gui/generated/
-WixTools
-.direnv/
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
 .DS_Store
-.pnpm-debug.log
+Thumbs.db
 
-minecraft
-config
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
 
-[#]*[#]
+# frontend generated files
+apps/frontend/src/generated
 
-# TEMPORARY: ignore my test instance and metadata
-theseus_cli/foo
-
-### Intellij+all ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
-# CMake
-cmake-build-*/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
-### Intellij+all Patch ###
-# Ignore everything but code style settings and run configurations
-# that are supposed to be shared within teams.
-
-.idea/*
-
-!.idea/codeStyles
-!.idea/runConfigurations
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# MSVC Windows builds of rustc generate these, which store debugging information
-*.pdb
-
-theseus.iml
+.turbo
+target
+generated
+.env
 
+# app testing dir
+app-playground-data/*

.npmrc

@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+auto-install-peers=true

.vscode/extensions.json

@@ -1,12 +1,3 @@
 {
-  "recommendations": [
-    "tauri-apps.tauri-vscode",
-    "vunguyentuan.vscode-css-variables",
-    "stylelint.vscode-stylelint",
-    "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "pivaszbs.svelte-autoimport",
-    "svelte.svelte-vscode",
-    "ardenivanov.svelte-intellisense"
-  ]
-}
+  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer"]
+}

.vscode/launch.json

@@ -1,160 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in library 'theseus'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--lib",
-                    "--package=theseus"
-                ],
-                "filter": {
-                    "name": "theseus",
-                    "kind": "lib"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_cli'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_cli",
-                    "--package=theseus_cli"
-                ],
-                "filter": {
-                    "name": "theseus_cli",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_cli'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_cli",
-                    "--package=theseus_cli"
-                ],
-                "filter": {
-                    "name": "theseus_cli",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_playground'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_playground",
-                    "--package=theseus_playground"
-                ],
-                "filter": {
-                    "name": "theseus_playground",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_playground'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_playground",
-                    "--package=theseus_playground"
-                ],
-                "filter": {
-                    "name": "theseus_playground",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_gui'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_gui",
-                    "--package=theseus_gui"
-                ],
-                "filter": {
-                    "name": "theseus_gui",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_gui'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_gui",
-                    "--package=theseus_gui"
-                ],
-                "filter": {
-                    "name": "theseus_gui",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Development Debug",
-            "cargo": {
-              "args": [
-                "build",
-                "--manifest-path=./theseus_gui/src-tauri/Cargo.toml",
-                "--no-default-features"
-              ]
-            },
-            "preLaunchTask": "ui:dev"
-          },
-          {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Production Debug",
-            "cargo": {
-              "args": ["build", "--release", "--manifest-path=.theseus_gui/src-tauri/Cargo.toml"]
-            },
-            "preLaunchTask": "ui:build"
-          }      
-    ]
-}

.vscode/settings.json

@@ -1,60 +1,13 @@
 {
-  "cssVariables.lookupFiles": [
-    "**/*.postcss",
-    "**/node_modules/omorphia/**/*.postcss"
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
   ],
-  "cssVariables.blacklistFolders": [
-    "**/.git",
-    "**/.svn",
-    "**/.hg",
-    "**/CVS",
-    "**/.DS_Store",
-    "**/.git",
-    "**/bower_components",
-    "**/tmp",
-    "**/dist",
-    "**/tests"
-  ],
-  "gitlens.showWelcomeOnInstall": false,
-  "gitlens.showWhatsNewAfterUpgrades": false,
-  "gitlens.plusFeatures.enabled": false,
-  "gitlens.currentLine.enabled": false,
-  "gitlens.currentLine.pullRequests.enabled": false,
-  "gitlens.currentLine.scrollable": true,
-  "gitlens.codeLens.enabled": false,
-  "gitlens.hovers.enabled": false,
-  "CSSNavigation.activeCSSFileExtensions": [
-    "css",
-    "postcss"
-  ],
-  "CSSNavigation.activeHTMLFileExtensions": [
-    "html",
-    "svelte",
-    "js",
-    "ts"
-  ],
-  "CSSNavigation.excludeGlobPatterns": [
-    "**/bower_components/**",
-    "**/vendor/**",
-    "**/coverage/**"
-  ],
-  "CSSNavigation.alwaysIncludeGlobPatterns": [
-    "./theseus_gui/node_modules/omorphia/**/*.postcss"
-  ],
-  "html-css-class-completion.HTMLLanguages": [
-    "html",
-    "svelte"
-  ],
-  "html-css-class-completion.includeGlobPattern": "**/*.{postcss,svelte}",
-  "html-css-class-completion.CSSLanguages": [
-    "postcss",
-  ],
-  "svelte.enable-ts-plugin": true,
-  "svelte.ask-to-enable-ts-plugin": false,
-  "svelte.plugin.css.diagnostics.enable": false,
-  "svelte.plugin.svelte.diagnostics.enable": false,
-  "rust-analyzer.linkedProjects": [
-    "./theseus/Cargo.toml"
-  ],
-  "rust-analyzer.showUnlinkedFileNotification": false,
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

.vscode/tasks.json

@@ -1,32 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "ui:dev",
-      "type": "shell",
-      // `dev` keeps running in the background
-      // ideally you should also configure a `problemMatcher`
-      // see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
-      "isBackground": true,
-      // change this to your `beforeDevCommand`:
-      "command": "yarn",
-      "args": ["dev"],
-      "options": {
-        "cwd": "${workspaceFolder}/theseus_gui"
-      }
-    },
-    {
-      "label": "ui:build",
-      "type": "shell",
-      // change this to your `beforeBuildCommand`:
-      "command": "yarn",
-      "args": ["build"],
-      "options": {
-        "cwd": "${workspaceFolder}/theseus_gui"
-      }
-    }
-  ]
-
-}

COPYING.md

@@ -1,13 +1,13 @@
-# Copying
+# Copying Guidelines
 
-The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+All packages in this repository are licensed under their respective licenses. For more information, refer to the LICENSE file in each package.
 
-## Modrinth logo
+For detailed information, consult each package's COPYING.md file, if available.
 
-Any files depicting the Modrinth branding, including the wrench-in-labyrinth logo, the landing image, and variations thereof, are licensed as follows:
+## Modrinth Branding
 
-> All rights reserved. © 2020-2023 Rinth, Inc.
+The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
 
-This includes, but may not be limited to, the following files:
+All rights reserved. © 2020-2024 Rinth, Inc.
 
-- theseus_gui/src-tauri/icons/*
+If you fork this repository, you must remove all Modrinth branding assets from your fork.

Cargo.toml

@@ -1,24 +1,11 @@
 [workspace]
-
+resolver = '2'
 members = [
-    "theseus",
-    "theseus_cli",
-    "theseus_playground",
-    "theseus_gui/src-tauri",
-    "theseus_macros"
+  './packages/app-lib',
+	'./apps/app-playground',
+  './apps/app'
 ]
 
-[profile.dev]
-opt-level = 0
-debug = true
-debug-assertions = true
-overflow-checks = true
-lto = false
-panic = 'unwind'
-incremental = true
-codegen-units = 256
-rpath = false
-
 # Optimize for speed and reduce size on release builds
 [profile.release]
 panic = "abort" # Strip expensive panic clean-up logic
@@ -26,3 +13,9 @@ codegen-units = 1 # Compile crates one after another so the compiler can optimiz
 lto = true # Enables link to optimizations
 opt-level = "s" # Optimize for binary size
 strip = true # Remove debug symbols
+
+[profile.dev.package.sqlx-macros]
+opt-level = 3
+
+[patch.crates-io]
+wry = { git = "https://github.com/modrinth/wry", rev = "27fb16b" }

README.md

@@ -1,9 +1,39 @@
-# theseus
-A game launcher which can be used as a CLI, GUI, and a library for creating and playing modrinth projects
+# ![Modrinth Monorepo Cover](/.github/assets/monorepo_cover.png)
 
-Theseus aims to provide three components:
-- A library (theseus)
-- A CLI (theseus-cli)
-- A GUI (theseus-gui)
+![Issues](https://img.shields.io/github/issues-raw/Modrinth/code?color=c78aff&label=issues&style=for-the-badge)
+![Pull Requests](https://img.shields.io/github/issues-pr-raw/Modrinth/code?color=c78aff&label=PRs&style=for-the-badge)
+![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=c78aff&label=contributors&style=for-the-badge)
+![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
+![Commit Activity](https://img.shields.io/github/commit-activity/m/Modrinth/code?color=c78aff&label=commits&style=for-the-badge)
+![Last Commit](https://img.shields.io/github/last-commit/Modrinth/code?color=c78aff&label=last%20commit&style=for-the-badge)
 
-Feel free to contribute!
+## Modrinth Monorepo
+
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/olympus/badge?logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+
+If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).
+
+## Development
+
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
+
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)
+
+## Contributing
+
+We welcome contributions! Before submitting any contributions, please read our [contributing guidelines](https://support.modrinth.com/en/articles/8802215-contributing-to-modrinth).
+
+If you plan to fork this repository for your own purposes, please review our [copying guidelines](COPYING.md).
+
+## Security
+
+If you discover a security vulnerability within our codebase, please follow our [responsible disclosure guidelines](https://modrinth.com/legal/security).
+
+## Support
+
+If you need help with the Modrinth web interface or app, please visit our [support page](https://support.modrinth.com). For general inquiries, you can also join our [Discord server](https://discord.modrinth.com).
+
+## License
+
+All packages in this repository are licensed under their respective licenses. Refer to the LICENSE file in each package for more information.

apps/app-frontend/.prettierignore

@@ -0,0 +1 @@
+**/dist

apps/app-frontend/COPYING.md

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

apps/app-frontend/eslint.config.mjs

@@ -0,0 +1,22 @@
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import { fixupPluginRules } from '@eslint/compat'
+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

@@ -1,10 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" class="dark-mode">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Modrinth App</title>
+
+    <link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
   </head>
 
   <body>

apps/app-frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.8.8",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "tsc:check": "vue-tsc --noEmit",
+    "lint": "eslint . && prettier --check .",
+    "fix": "eslint . --fix && prettier --write ."
+  },
+  "dependencies": {
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/ui": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@sentry/vue": "^8.27.0",
+    "@tauri-apps/api": "^2.0.0-rc.3",
+    "@tauri-apps/plugin-dialog": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-os": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-shell": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
+    "@vintl/vintl": "^4.4.1",
+    "dayjs": "^1.11.10",
+    "floating-vue": "^5.2.2",
+    "ofetch": "^1.3.4",
+    "pinia": "^2.1.7",
+    "posthog-js": "^1.158.2",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.21",
+    "vue-multiselect": "3.0.0",
+    "vue-router": "4.3.0",
+    "vue-virtual-scroller": "v2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@nuxt/eslint-config": "^0.5.6",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.9.1",
+    "eslint-config-custom": "workspace:*",
+    "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.2.8",
+    "vue-tsc": "^2.1.6"
+  },
+  "packageManager": "pnpm@9.4.0"
+}

apps/app-frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/app-frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
 import {
   HomeIcon,
@@ -7,12 +7,10 @@ import {
   LibraryIcon,
   PlusIcon,
   SettingsIcon,
-  FileIcon,
-  Button,
-  Notifications,
   XIcon,
-  Card,
-} from 'omorphia'
+  DownloadIcon,
+} from '@modrinth/assets'
+import { Button, Notifications } from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
@@ -20,170 +18,174 @@ import { get } from '@/helpers/settings'
 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/modrinth-loading-indicator'
 import { handleError, useNotifications } from '@/store/notifications.js'
-import { offline_listener, command_listener, warning_listener } from '@/helpers/events.js'
-import { MinimizeIcon, MaximizeIcon, ChatIcon } from '@/assets/icons'
-import { type } from '@tauri-apps/api/os'
-import { appWindow } from '@tauri-apps/api/window'
-import { isDev, getOS, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
-import {
-  mixpanel_track,
-  mixpanel_init,
-  mixpanel_opt_out_tracking,
-  mixpanel_is_loaded,
-} from '@/helpers/mixpanel'
-import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
+import { command_listener, warning_listener } from '@/helpers/events.js'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
+import { type } from '@tauri-apps/plugin-os'
+import { isDev, getOS, restartApp } from '@/helpers/utils.js'
+import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 import { getVersion } from '@tauri-apps/api/app'
-import { window as TauriWindow } from '@tauri-apps/api'
-import { TauriEvent } from '@tauri-apps/api/event'
-import { await_sync, check_safe_loading_bars_complete } from './helpers/state'
-import { confirm } from '@tauri-apps/api/dialog'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import StickyTitleBar from '@/components/ui/tutorial/StickyTitleBar.vue'
-import OnboardingScreen from '@/components/ui/tutorial/OnboardingScreen.vue'
 import { install_from_file } from './helpers/pack'
+import { useError } from '@/store/error.js'
+import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.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 { open } from '@tauri-apps/plugin-shell'
+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'
 
 const themeStore = useTheming()
-const urlModal = ref(null)
-const isLoading = ref(true)
 
-const videoPlaying = ref(false)
-const offline = ref(false)
+const urlModal = ref(null)
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+  offline.value = true
+})
+window.addEventListener('online', () => {
+  offline.value = false
+})
+
 const showOnboarding = ref(false)
 const nativeDecorations = ref(false)
 
-const onboardingVideo = ref()
-
-const failureText = ref(null)
 const os = ref('')
 
-defineExpose({
-  initialize: async () => {
-    isLoading.value = false
-    const {
-      native_decorations,
-      theme,
-      opt_out_analytics,
-      collapsed_navigation,
-      advanced_rendering,
-      fully_onboarded,
-    } = await get()
-    // video should play if the user is not on linux, and has not onboarded
-    os.value = await getOS()
-    videoPlaying.value = !fully_onboarded && os.value !== 'Linux'
-    const dev = await isDev()
-    const version = await getVersion()
-    showOnboarding.value = !fully_onboarded
+const stateInitialized = ref(false)
 
-    nativeDecorations.value = native_decorations
-    if (os.value !== 'MacOS') appWindow.setDecorations(native_decorations)
+const criticalErrorMessage = ref()
 
-    themeStore.setThemeState(theme)
-    themeStore.collapsedNavigation = collapsed_navigation
-    themeStore.advancedRendering = advanced_rendering
-
-    mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
-    if (opt_out_analytics) {
-      mixpanel_opt_out_tracking()
-    }
-    mixpanel_track('Launched', { version, dev, fully_onboarded })
-
-    if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
-
-    if ((await type()) === 'Darwin') {
-      document.getElementsByTagName('html')[0].classList.add('mac')
-    } else {
-      document.getElementsByTagName('html')[0].classList.add('windows')
-    }
-
-    offline.value = await isOffline()
-    await offline_listener((b) => {
-      offline.value = b
-    })
-
-    await warning_listener((e) =>
-      notificationsWrapper.value.addNotification({
-        title: 'Warning',
-        text: e.message,
-        type: 'warn',
-      })
-    )
-
-    if (showOnboarding.value) {
-      onboardingVideo.value.play()
-    }
-  },
-  failure: async (e) => {
-    isLoading.value = false
-    failureText.value = e
-    os.value = await getOS()
-  },
+onMounted(async () => {
+  await useCheckDisableMouseover()
 })
 
-const confirmClose = async () => {
-  const confirmed = await confirm(
-    'An action is currently in progress. Are you sure you want to exit?',
-    {
-      title: 'Modrinth',
-      type: 'warning',
-    }
+async function setupApp() {
+  stateInitialized.value = true
+  const {
+    native_decorations,
+    theme,
+    telemetry,
+    collapsed_navigation,
+    advanced_rendering,
+    onboarded,
+    default_page,
+  } = await get()
+
+  if (default_page && default_page !== 'Home') {
+    await router.push({ name: default_page })
+  }
+
+  os.value = await getOS()
+  const dev = await isDev()
+  const version = await getVersion()
+  showOnboarding.value = !onboarded
+
+  nativeDecorations.value = native_decorations
+  if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations)
+
+  themeStore.setThemeState(theme)
+  themeStore.collapsedNavigation = collapsed_navigation
+  themeStore.advancedRendering = advanced_rendering
+
+  initAnalytics()
+  if (!telemetry) {
+    optOutAnalytics()
+  }
+  if (dev) debugAnalytics()
+  trackEvent('Launched', { version, dev, onboarded })
+
+  if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
+
+  const osType = await type()
+  if (osType === 'macos') {
+    document.getElementsByTagName('html')[0].classList.add('mac')
+  } else {
+    document.getElementsByTagName('html')[0].classList.add('windows')
+  }
+
+  await warning_listener((e) =>
+    notificationsWrapper.value.addNotification({
+      title: 'Warning',
+      text: e.message,
+      type: 'warn',
+    }),
   )
-  return confirmed
+
+  useFetch(
+    `https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
+    'criticalAnnouncements',
+    true,
+  ).then((res) => {
+    if (res && res.header && res.body) {
+      criticalErrorMessage.value = res
+    }
+  })
+
+  get_opening_command().then(handleCommand)
+  checkUpdates()
 }
 
+const stateFailed = ref(false)
+initialize_state()
+  .then(() => {
+    setupApp().catch((err) => {
+      stateFailed.value = true
+      console.error(err)
+      error.showError(err, null, false, 'state_init')
+    })
+  })
+  .catch((err) => {
+    stateFailed.value = true
+    console.error('Failed to initialize app', err)
+    error.showError(err, null, false, 'state_init')
+  })
+
 const handleClose = async () => {
-  if (failureText.value != null) {
-    await TauriWindow.getCurrent().close()
-    return
-  }
-  // State should respond immeiately if it's safe to close
-  // If not, code is deadlocked or worse, so wait 2 seconds and then ask the user to confirm closing
-  // (Exception: if the user is changing config directory, which takes control of the state, and it's taking a significant amount of time for some reason)
-  const isSafe = await Promise.race([
-    check_safe_loading_bars_complete(),
-    new Promise((r) => setTimeout(r, 2000)),
-  ])
-  if (!isSafe) {
-    const response = await confirmClose()
-    if (!response) {
-      return
-    }
-  }
-  await await_sync()
-  await TauriWindow.getCurrent().close()
+  await saveWindowState(StateFlags.ALL)
+  await getCurrentWindow().close()
 }
 
-const openSupport = async () => {
-  window.__TAURI_INVOKE__('tauri', {
-    __tauriModule: 'Shell',
-    message: {
-      cmd: 'open',
-      path: 'https://discord.gg/modrinth',
-    },
-  })
-}
-
-TauriWindow.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
-  await handleClose()
-})
-
 const router = useRouter()
 router.afterEach((to, from, failure) => {
-  if (mixpanel_is_loaded()) {
-    mixpanel_track('PageView', { path: to.path, fromPath: from.path, failed: failure })
-  }
+  trackEvent('PageView', { path: to.path, fromPath: from.path, failed: failure })
 })
 const route = useRoute()
 const isOnBrowse = computed(() => route.path.startsWith('/browse'))
 
 const loading = useLoading()
+loading.setEnabled(false)
 
 const notifications = useNotifications()
-const notificationsWrapper = ref(null)
+const notificationsWrapper = ref()
+
+const error = useError()
+const errorModal = ref()
+
+const install = useInstall()
+const modInstallModal = ref()
+const installConfirmModal = ref()
+const incompatibilityWarningModal = ref()
+
+onMounted(() => {
+  invoke('show_window')
 
-watch(notificationsWrapper, () => {
   notifications.setNotifs(notificationsWrapper.value)
+
+  error.setErrorModal(errorModal.value)
+
+  install.setIncompatibilityWarningModal(incompatibilityWarningModal)
+  install.setInstallConfirmModal(installConfirmModal)
+  install.setModInstallModal(modInstallModal)
 })
 
 document.querySelector('body').addEventListener('click', function (e) {
@@ -195,15 +197,10 @@ document.querySelector('body').addEventListener('click', function (e) {
         ['http://', 'https://', 'mailto:', 'tel:'].some((v) => target.href.startsWith(v)) &&
         !target.classList.contains('router-link-active') &&
         !target.href.startsWith('http://localhost') &&
-        !target.href.startsWith('https://tauri.localhost')
+        !target.href.startsWith('https://tauri.localhost') &&
+        !target.href.startsWith('http://tauri.localhost')
       ) {
-        window.__TAURI_INVOKE__('tauri', {
-          __tauriModule: 'Shell',
-          message: {
-            cmd: 'open',
-            path: target.href,
-          },
-        })
+        open(target.href)
       }
       e.preventDefault()
       break
@@ -228,12 +225,15 @@ document.querySelector('body').addEventListener('auxclick', function (e) {
 
 const accounts = ref(null)
 
-command_listener(async (e) => {
+command_listener(handleCommand)
+async function handleCommand(e) {
+  if (!e) return
+
   if (e.event === 'RunMRPack') {
     // RunMRPack should directly install a local mrpack given a path
     if (e.path.endsWith('.mrpack')) {
       await install_from_file(e.path).catch(handleError)
-      mixpanel_track('InstanceCreate', {
+      trackEvent('InstanceCreate', {
         source: 'CreationModalFileDrop',
       })
     }
@@ -241,62 +241,26 @@ command_listener(async (e) => {
     // Other commands are URL-based (deep linking)
     urlModal.value.show(e)
   }
-})
+}
+
+const updateAvailable = ref(false)
+async function checkUpdates() {
+  const update = await check()
+  console.log(update)
+  updateAvailable.value = !!update
+
+  setTimeout(
+    () => {
+      checkUpdates()
+    },
+    5 * 1000 * 60,
+  )
+}
 </script>
 
 <template>
-  <StickyTitleBar v-if="videoPlaying" />
-  <video
-    v-if="videoPlaying"
-    ref="onboardingVideo"
-    class="video"
-    src="@/assets/video.mp4"
-    autoplay
-    @ended="videoPlaying = false"
-  />
-  <div v-if="failureText" class="failure dark-mode">
-    <div class="appbar-failure dark-mode">
-      <Button v-if="os != 'MacOS'" icon-only @click="TauriWindow.getCurrent().close()">
-        <XIcon />
-      </Button>
-    </div>
-    <div class="error-view dark-mode">
-      <Card class="error-text">
-        <div class="label">
-          <h3>
-            <span class="label__title size-card-header">Failed to initialize</span>
-          </h3>
-        </div>
-        <div class="error-div">
-          Modrinth App failed to load correctly. This may be because of a corrupted file, or because
-          the app is missing crucial files.
-        </div>
-        <div class="error-div">You may be able to fix it one of the following ways:</div>
-        <ul class="error-div">
-          <li>Ennsuring you are connected to the internet, then try restarting the app.</li>
-          <li>Redownloading the app.</li>
-        </ul>
-        <div class="error-div">
-          If it still does not work, you can seek support using the link below. You should provide
-          the following error, as well as any recent launcher logs in the folder below.
-        </div>
-        <div class="error-div">The following error was provided:</div>
-
-        <Card class="error-message">
-          {{ failureText.message }}
-        </Card>
-
-        <div class="button-row push-right">
-          <Button @click="showLauncherLogsFolder"><FileIcon />Open launcher logs</Button>
-
-          <Button @click="openSupport"><ChatIcon />Get support</Button>
-        </div>
-      </Card>
-    </div>
-  </div>
-  <SplashScreen v-else-if="!videoPlaying && isLoading" app-loading />
-  <OnboardingScreen v-else-if="showOnboarding" :finish="() => (showOnboarding = false)" />
-  <div v-else class="container">
+  <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
+  <div v-if="stateInitialized" class="app-container">
     <div class="nav-container">
       <div class="nav-section">
         <suspense>
@@ -325,6 +289,14 @@ command_listener(async (e) => {
         </div>
       </div>
       <div class="settings pages-list">
+        <button
+          v-if="updateAvailable"
+          v-tooltip="'Install update'"
+          class="btn btn-outline btn-primary icon-only collapsed-button"
+          @click="restartApp()"
+        >
+          <DownloadIcon />
+        </button>
         <Button
           v-tooltip="'Create profile'"
           class="sleek-primary collapsed-button"
@@ -340,6 +312,10 @@ command_listener(async (e) => {
       </div>
     </div>
     <div class="view">
+      <div v-if="criticalErrorMessage" class="critical-error-banner" data-tauri-drag-region>
+        <h1>{{ criticalErrorMessage.header }}</h1>
+        <div class="markdown-body" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
+      </div>
       <div class="appbar-row">
         <div data-tauri-drag-region class="appbar">
           <section class="navigation-controls">
@@ -352,22 +328,17 @@ command_listener(async (e) => {
           </section>
         </div>
         <section v-if="!nativeDecorations" class="window-controls">
-          <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
+          <Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
             <MinimizeIcon />
           </Button>
-          <Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
+          <Button
+            class="titlebar-button"
+            icon-only
+            @click="() => getCurrentWindow().toggleMaximize()"
+          >
             <MaximizeIcon />
           </Button>
-          <Button
-            class="titlebar-button close"
-            icon-only
-            @click="
-              () => {
-                saveWindowState(StateFlags.ALL)
-                handleClose()
-              }
-            "
-          >
+          <Button class="titlebar-button close" icon-only @click="handleClose">
             <XIcon />
           </Button>
         </section>
@@ -389,6 +360,10 @@ command_listener(async (e) => {
   </div>
   <URLConfirmModal ref="urlModal" />
   <Notifications ref="notificationsWrapper" />
+  <ErrorModal ref="errorModal" />
+  <ModInstallModal ref="modInstallModal" />
+  <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
+  <InstallConfirmModal ref="installConfirmModal" />
 </template>
 
 <style lang="scss" scoped>
@@ -440,7 +415,7 @@ command_listener(async (e) => {
   }
 }
 
-.container {
+.app-container {
   --appbar-height: 3.25rem;
   --sidebar-width: 4.5rem;
 
@@ -453,6 +428,16 @@ command_listener(async (e) => {
     width: calc(100% - var(--sidebar-width));
     background-color: var(--color-raised-bg);
 
+    .critical-error-banner {
+      margin-top: -1.25rem;
+      padding: 1rem;
+      background-color: rgba(203, 34, 69, 0.1);
+      border-left: 2px solid var(--color-red);
+      border-bottom: 2px solid var(--color-red);
+      border-right: 2px solid var(--color-red);
+      border-radius: 1rem;
+    }
+
     .appbar {
       display: flex;
       align-items: center;
@@ -478,53 +463,6 @@ command_listener(async (e) => {
   }
 }
 
-.failure {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--color-bg);
-
-  .appbar-failure {
-    display: flex; /* Change to flex to align items horizontally */
-    justify-content: flex-end; /* Align items to the right */
-    height: 3.25rem;
-    //no select
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .error-view {
-    display: flex; /* Change to flex to align items horizontally */
-    justify-content: center;
-    width: 100%;
-    background-color: var(--color-bg);
-
-    color: var(--color-base);
-
-    .card {
-      background-color: var(--color-raised-bg);
-    }
-
-    .error-text {
-      display: flex;
-      max-width: 60%;
-      gap: 0.25rem;
-      flex-direction: column;
-
-      .error-div {
-        // spaced out
-        margin: 0.5rem;
-      }
-
-      .error-message {
-        margin: 0.5rem;
-        background-color: var(--color-button-bg);
-      }
-    }
-  }
-}
-
 .nav-container {
   display: flex;
   flex-direction: column;
@@ -588,55 +526,6 @@ command_listener(async (e) => {
   }
 }
 
-.instance-list {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 70%;
-  margin: 0.4rem;
-
-  p:nth-child(1) {
-    font-size: 0.6rem;
-  }
-
-  & > p {
-    color: var(--color-base);
-    margin: 0.8rem 0;
-    font-size: 0.7rem;
-    line-height: 0.8125rem;
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-}
-
-.user-section {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  height: 4.375rem;
-
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    text-align: left;
-    margin-left: 0.5rem;
-  }
-
-  .username {
-    margin-bottom: 0.3rem;
-    font-weight: 400;
-    line-height: 1.25rem;
-    color: var(--color-contrast);
-  }
-
-  a {
-    font-weight: 400;
-    color: var(--color-secondary);
-  }
-}
-
 .nav-section {
   display: flex;
   flex-direction: column;
@@ -647,14 +536,6 @@ command_listener(async (e) => {
   gap: 1rem;
 }
 
-.video {
-  margin-top: 2.25rem;
-  width: 100vw;
-  height: calc(100vh - 2.25rem);
-  object-fit: cover;
-  border-radius: var(--radius-md);
-}
-
 .button-row {
   display: flex;
   flex-direction: row;
@@ -666,3 +547,33 @@ command_listener(async (e) => {
   }
 }
 </style>
+<style>
+.mac {
+  .nav-container {
+    padding-top: calc(var(--gap-md) + 1.75rem);
+  }
+
+  .account-card,
+  .card-section {
+    top: calc(var(--gap-md) + 1.75rem);
+  }
+}
+
+.windows {
+  .fake-appbar {
+    height: 2.5rem !important;
+  }
+
+  .window-controls {
+    display: flex !important;
+  }
+
+  .info-card {
+    right: 8rem;
+  }
+
+  .profile-card {
+    right: 8rem;
+  }
+}
+</style>

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

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: var(--font-standard);
   color-scheme: dark;
@@ -69,44 +73,15 @@ input {
   }
 }
 
-.mac {
-  .nav-container {
-    padding-top: calc(var(--gap-md) + 1.75rem);
-  }
-
-  .account-card,
-  .card-section {
-    top: calc(var(--gap-md) + 1.75rem);
-  }
-}
-
-.windows {
-  .fake-appbar {
-    height: 2.5rem !important;
-  }
-
-  .window-controls {
-    display: flex !important;
-  }
-
-  .info-card {
-    right: 8rem;
-  }
-
-  .profile-card {
-    right: 8rem;
-  }
-}
-
 * {
   scrollbar-width: auto;
-  scrollbar-color: var(--color-button-bg) var(--color-bg);
+  scrollbar-color: var(--color-scrollbar) var(--color-bg);
 }
 
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: var(--gap-md);
-  border: 3px solid var(--color-bg);
+  border: 3px solid var(--color-scrollbar);
 }
 
 *::-webkit-scrollbar-track {
@@ -115,7 +90,7 @@ input {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-button-bg);
+  background-color: var(--color-scrollbar);
   border-radius: var(--radius-lg);
   border: 3px solid var(--color-bg);
 }
@@ -135,3 +110,5 @@ img {
   -moz-user-select: none;
   -ms-user-select: none;
 }
+
+@import '@modrinth/assets/omorphia.scss';

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

@@ -9,19 +9,16 @@ import {
   TrashIcon,
   StopCircleIcon,
   EyeIcon,
-  Card,
-  DropdownSelect,
   SearchIcon,
   XIcon,
-  Button,
-  formatCategoryHeader,
-  ModalConfirm,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { Button, Card, DropdownSelect } from '@modrinth/ui'
+import { formatCategoryHeader } from '@modrinth/utils'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
-import { useTheming } from '@/store/theme.js'
 import { duplicate, remove } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 
 const props = defineProps({
   instances: {
@@ -38,14 +35,13 @@ const props = defineProps({
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
 
-const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
 async function deleteProfile() {
   if (currentDeleteInstance.value) {
     instanceComponents.value = instanceComponents.value.filter(
-      (x) => x.instance.path !== currentDeleteInstance.value
+      (x) => x.instance.path !== currentDeleteInstance.value,
     )
     await remove(currentDeleteInstance.value).catch(handleError)
   }
@@ -88,7 +84,7 @@ const handleRightClick = (event, profilePathId) => {
             color: 'primary',
           },
           ...baseOptions,
-        ]
+        ],
   )
 }
 
@@ -130,46 +126,46 @@ const sortBy = ref('Name')
 
 const filteredResults = computed(() => {
   let instances = props.instances.filter((instance) => {
-    return instance.metadata.name.toLowerCase().includes(search.value.toLowerCase())
+    return instance.name.toLowerCase().includes(search.value.toLowerCase())
   })
 
   if (sortBy.value === 'Name') {
     instances.sort((a, b) => {
-      return a.metadata.name.localeCompare(b.metadata.name)
+      return a.name.localeCompare(b.name)
     })
   }
 
   if (sortBy.value === 'Game version') {
     instances.sort((a, b) => {
-      return a.metadata.game_version.localeCompare(b.metadata.game_version)
+      return a.game_version.localeCompare(b.game_version)
     })
   }
 
   if (sortBy.value === 'Last played') {
     instances.sort((a, b) => {
-      return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
+      return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
     })
   }
 
   if (sortBy.value === 'Date created') {
     instances.sort((a, b) => {
-      return dayjs(b.metadata.date_created).diff(dayjs(a.metadata.date_created))
+      return dayjs(b.date_created).diff(dayjs(a.date_created))
     })
   }
 
   if (sortBy.value === 'Date modified') {
     instances.sort((a, b) => {
-      return dayjs(b.metadata.date_modified).diff(dayjs(a.metadata.date_modified))
+      return dayjs(b.date_modified).diff(dayjs(a.date_modified))
     })
   }
 
   if (filters.value === 'Custom instances') {
     instances = instances.filter((instance) => {
-      return !instance.metadata?.linked_data
+      return !instance.linked_data
     })
   } else if (filters.value === 'Downloaded modpacks') {
     instances = instances.filter((instance) => {
-      return instance.metadata?.linked_data
+      return instance.linked_data
     })
   }
 
@@ -177,7 +173,7 @@ const filteredResults = computed(() => {
 
   if (group.value === 'Loader') {
     instances.forEach((instance) => {
-      const loader = formatCategoryHeader(instance.metadata.loader)
+      const loader = formatCategoryHeader(instance.loader)
       if (!instanceMap.has(loader)) {
         instanceMap.set(loader, [])
       }
@@ -186,19 +182,19 @@ const filteredResults = computed(() => {
     })
   } else if (group.value === 'Game version') {
     instances.forEach((instance) => {
-      if (!instanceMap.has(instance.metadata.game_version)) {
-        instanceMap.set(instance.metadata.game_version, [])
+      if (!instanceMap.has(instance.game_version)) {
+        instanceMap.set(instance.game_version, [])
       }
 
-      instanceMap.get(instance.metadata.game_version).push(instance)
+      instanceMap.get(instance.game_version).push(instance)
     })
   } else if (group.value === 'Category') {
     instances.forEach((instance) => {
-      if (instance.metadata.groups.length === 0) {
-        instance.metadata.groups.push('None')
+      if (instance.groups.length === 0) {
+        instance.groups.push('None')
       }
 
-      for (const category of instance.metadata.groups) {
+      for (const category of instance.groups) {
         if (!instanceMap.has(category)) {
           instanceMap.set(category, [])
         }
@@ -233,20 +229,19 @@ const filteredResults = computed(() => {
 })
 </script>
 <template>
-  <ModalConfirm
+  <ConfirmModalWrapper
     ref="confirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
-    :noblur="!themeStore.advancedRendering"
     @proceed="deleteProfile"
   />
   <Card class="header">
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>

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

@@ -11,27 +11,20 @@ import {
   ExternalIcon,
   EyeIcon,
   ChevronRightIcon,
-  ModalConfirm,
-} from 'omorphia'
+} from '@modrinth/assets'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ProjectCard from '@/components/ui/ProjectCard.vue'
-import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
-import ModInstallModal from '@/components/ui/ModInstallModal.vue'
-import {
-  get_all_running_profile_paths,
-  get_uuids_by_profile_path,
-  kill_by_uuid,
-} from '@/helpers/process.js'
+import { get_by_profile_path } from '@/helpers/process.js'
 import { handleError } from '@/store/notifications.js'
-import { duplicate, remove, run } from '@/helpers/profile.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
 import { showProfileInFolder } from '@/helpers/utils.js'
-import { useFetch } from '@/helpers/fetch.js'
-import { install as pack_install } from '@/helpers/pack.js'
-import { useTheming } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { trackEvent } from '@/helpers/analytics'
+import { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'
 
 const router = useRouter()
 
@@ -50,18 +43,15 @@ 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]),
 )
 
 const modsRow = ref(null)
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
 const rows = ref(null)
-const confirmModal = ref(null)
 const deleteConfirmModal = ref(null)
-const modInstallModal = ref(null)
 
-const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
 
 async function deleteProfile() {
@@ -89,23 +79,24 @@ const handleInstanceRightClick = async (event, passedInstance) => {
     },
   ]
 
-  const running = await get_all_running_profile_paths().catch(handleError)
+  const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
 
-  const options = running.includes(passedInstance.path)
-    ? [
-        {
-          name: 'stop',
-          color: 'danger',
-        },
-        ...baseOptions,
-      ]
-    : [
-        {
-          name: 'play',
-          color: 'primary',
-        },
-        ...baseOptions,
-      ]
+  const options =
+    runningProcesses.length > 0
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ]
 
   instanceOptions.value.showMenu(event, passedInstance, options)
 }
@@ -129,24 +120,24 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
   switch (args.option) {
     case 'play':
-      await run(args.item.path).catch(handleError)
-      mixpanel_track('InstanceStart', {
-        loader: args.item.metadata.loader,
-        game_version: args.item.metadata.game_version,
+      await run(args.item.path).catch((err) =>
+        handleSevereError(err, { profilePath: args.item.path }),
+      )
+      trackEvent('InstanceStart', {
+        loader: args.item.loader,
+        game_version: args.item.game_version,
       })
       break
     case 'stop':
-      for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
-        await kill_by_uuid(u).catch(handleError)
-      }
-      mixpanel_track('InstanceStop', {
-        loader: args.item.metadata.loader,
-        game_version: args.item.metadata.game_version,
+      await kill(args.item.path).catch(handleError)
+      trackEvent('InstanceStop', {
+        loader: args.item.loader,
+        game_version: args.item.game_version,
       })
       break
     case 'add_content':
       await router.push({
-        path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
         query: { i: args.item.path },
       })
       break
@@ -169,21 +160,8 @@ const handleOptionsClick = async (args) => {
       await navigator.clipboard.writeText(args.item.path)
       break
     case 'install': {
-      const versions = await useFetch(
-        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
-        'project versions'
-      )
+      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')
 
-      if (args.item.project_type === 'modpack') {
-        await pack_install(
-          args.item.project_id,
-          versions[0].id,
-          args.item.title,
-          args.item.icon_url
-        )
-      } else {
-        modInstallModal.value.show(args.item.project_id, versions)
-      }
       break
     }
     case 'open_link':
@@ -197,7 +175,7 @@ const handleOptionsClick = async (args) => {
       break
     case 'copy_link':
       await navigator.clipboard.writeText(
-        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
       )
       break
   }
@@ -227,13 +205,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ModalConfirm
+  <ConfirmModalWrapper
     ref="deleteConfirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
-    :noblur="!themeStore.advancedRendering"
     @proceed="deleteProfile"
   />
   <div class="content">
@@ -242,7 +219,7 @@ onUnmounted(() => {
         <router-link :to="row.route">{{ row.label }}</router-link>
         <ChevronRightIcon />
       </div>
-      <section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
+      <section v-if="row.instance" ref="modsRow" class="instances">
         <Instance
           v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
           :key="(instance?.project_id || instance?.id) + instance.install_stage"
@@ -257,8 +234,6 @@ onUnmounted(() => {
           ref="instanceComponents"
           class="item"
           :project="project"
-          :confirm-modal="confirmModal"
-          :mod-install-modal="modInstallModal"
           @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
         />
       </section>
@@ -277,8 +252,6 @@ onUnmounted(() => {
     <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
     <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
   </ContextMenu>
-  <InstallConfirmModal ref="confirmModal" />
-  <ModInstallModal ref="modInstallModal" />
 </template>
 <style lang="scss" scoped>
 .content {

apps/app-frontend/src/components/modrinth-loading-indicator.js

@@ -40,10 +40,12 @@ export default defineComponent({
     const loading = useLoading()
 
     watch(loading, (newValue) => {
-      if (newValue.loading) {
-        indicator.start()
-      } else {
-        indicator.finish()
+      if (newValue.barEnabled) {
+        if (newValue.loading) {
+          indicator.start()
+        } else {
+          indicator.finish()
+        }
       }
     })
 
@@ -66,7 +68,7 @@ export default defineComponent({
             zIndex: 6,
           },
         },
-        slots
+        slots,
       )
   },
 })

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

@@ -5,7 +5,7 @@
     v-tooltip.right="'Minecraft accounts'"
     class="button-base avatar-button"
     :class="{ expanded: mode === 'expanded' }"
-    @click="showCard = !showCard"
+    @click="toggleMenu"
   >
     <Avatar
       :size="mode === 'expanded' ? 'xs' : 'sm'"
@@ -56,68 +56,24 @@
       </Button>
     </Card>
   </transition>
-  <Modal ref="loginModal" class="modal" header="Signing in" :noblur="!themeStore.advancedRendering">
-    <div class="modal-body">
-      <QrcodeVue :value="loginUrl" class="qr-code" margin="3" size="160" />
-      <div class="modal-text">
-        <div class="label">Copy this code</div>
-        <div class="code-text">
-          <div class="code">
-            {{ loginCode }}
-          </div>
-          <Button
-            v-tooltip="'Copy code'"
-            icon-only
-            large
-            color="raised"
-            @click="() => clipboardWrite(loginCode)"
-          >
-            <ClipboardCopyIcon />
-          </Button>
-        </div>
-        <div>And enter it on Microsoft's website to sign in.</div>
-        <div class="iconified-input">
-          <LogInIcon />
-          <input type="text" :value="loginUrl" readonly />
-          <Button
-            v-tooltip="'Open link'"
-            icon-only
-            color="raised"
-            @click="() => clipboardWrite(loginUrl)"
-          >
-            <GlobeIcon />
-          </Button>
-        </div>
-      </div>
-    </div>
-  </Modal>
 </template>
 
 <script setup>
-import {
-  Avatar,
-  Button,
-  Card,
-  PlusIcon,
-  TrashIcon,
-  LogInIcon,
-  Modal,
-  GlobeIcon,
-  ClipboardCopyIcon,
-} from 'omorphia'
+import { PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
   users,
   remove_user,
-  authenticate_begin_flow,
-  authenticate_await_completion,
+  set_default_user,
+  login as login_flow,
+  get_default_user,
 } from '@/helpers/auth'
-import { get, set } from '@/helpers/settings'
 import { handleError } from '@/store/state.js'
-import { useTheming } from '@/store/theme.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import QrcodeVue from 'qrcode.vue'
+import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
+import { handleSevereError } from '@/store/error.js'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 defineProps({
   mode: {
@@ -129,16 +85,11 @@ defineProps({
 
 const emit = defineEmits(['change'])
 
-const loginCode = ref(null)
-
-const themeStore = useTheming()
-const settings = ref({})
-const accounts = ref([])
-const loginUrl = ref('')
-const loginModal = ref(null)
+const accounts = ref({})
+const defaultUser = ref()
 
 async function refreshValues() {
-  settings.value = await get().catch(handleError)
+  defaultUser.value = await get_default_user().catch(handleError)
   accounts.value = await users().catch(handleError)
 }
 defineExpose({
@@ -147,47 +98,28 @@ defineExpose({
 await refreshValues()
 
 const displayAccounts = computed(() =>
-  accounts.value.filter((account) => settings.value.default_user !== account.id)
+  accounts.value.filter((account) => defaultUser.value !== account.id),
 )
 
 const selectedAccount = computed(() =>
-  accounts.value.find((account) => account.id === settings.value.default_user)
+  accounts.value.find((account) => account.id === defaultUser.value),
 )
 
 async function setAccount(account) {
-  settings.value.default_user = account.id
-  await set(settings.value).catch(handleError)
+  defaultUser.value = account.id
+  await set_default_user(account.id).catch(handleError)
   emit('change')
 }
 
-const clipboardWrite = async (a) => {
-  navigator.clipboard.writeText(a)
-}
-
 async function login() {
-  const loginSuccess = await authenticate_begin_flow().catch(handleError)
-
-  loginModal.value.show()
-  loginCode.value = loginSuccess.user_code
-  loginUrl.value = loginSuccess.verification_uri
-  await window.__TAURI_INVOKE__('tauri', {
-    __tauriModule: 'Shell',
-    message: {
-      cmd: 'open',
-      path: loginSuccess.verification_uri,
-    },
-  })
-
-  const loggedIn = await authenticate_await_completion().catch(handleError)
-  loginModal.value.hide()
+  const loggedIn = await login_flow().catch(handleSevereError)
 
   if (loggedIn) {
     await setAccount(loggedIn)
     await refreshValues()
   }
 
-  loginModal.value.hide()
-  mixpanel_track('AccountLogIn')
+  trackEvent('AccountLogIn')
 }
 
 const logout = async (id) => {
@@ -199,12 +131,12 @@ const logout = async (id) => {
   } else {
     emit('change')
   }
-  mixpanel_track('AccountLogOut')
+  trackEvent('AccountLogOut')
 }
 
-let showCard = ref(false)
-let card = ref(null)
-let button = ref(null)
+const showCard = ref(false)
+const card = ref(null)
+const button = ref(null)
 const handleClickOutside = (event) => {
   const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
@@ -213,7 +145,20 @@ const handleClickOutside = (event) => {
     !elements.includes(card.value.$el) &&
     !button.value.contains(event.target)
   ) {
+    toggleMenu(false)
+  }
+}
+
+function toggleMenu(override = true) {
+  if (showCard.value || !override) {
+    if (showCard.value) {
+      show_ads_window()
+    }
+
     showCard.value = false
+  } else {
+    hide_ads_window()
+    showCard.value = true
   }
 }
 

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { DropdownIcon, FolderOpenIcon, SearchIcon } from '@modrinth/assets'
+import { Button, 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'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+const router = useRouter()
+
+const handleAddContentFromFile = async () => {
+  const newProject = await open({ multiple: true })
+  if (!newProject) return
+
+  for (const project of newProject) {
+    await add_project_from_path(props.instance.path, project.path ?? project).catch(handleError)
+  }
+}
+
+const handleSearchContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+</script>
+
+<template>
+  <div class="joined-buttons">
+    <Button color="primary" @click="handleSearchContent"><SearchIcon /> Add content </Button>
+
+    <OverflowMenu
+      :options="[
+        {
+          id: 'search',
+          action: handleSearchContent,
+        },
+        {
+          id: 'from_file',
+          action: handleAddContentFromFile,
+        },
+      ]"
+      class="btn btn-primary btn-dropdown-animation icon-only"
+    >
+      <DropdownIcon />
+      <template #search>
+        <SearchIcon />
+        <span class="no-wrap"> Search </span>
+      </template>
+      <template #from_file>
+        <FolderOpenIcon />
+        <span class="no-wrap"> Add from file </span>
+      </template>
+    </OverflowMenu>
+  </div>
+</template>

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

@@ -31,7 +31,8 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon, Button, ChevronLeftIcon } from 'omorphia'
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -44,8 +45,8 @@ const breadcrumbs = computed(() => {
     route.meta.useContext === true
       ? breadcrumbData.context
       : route.meta.useRootContext === true
-      ? breadcrumbData.rootContext
-      : null
+        ? breadcrumbData.rootContext
+        : null
   return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
 </script>

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

@@ -25,6 +25,7 @@
 
 <script setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 const emit = defineEmits(['menu-closed', 'option-clicked'])
 
@@ -37,6 +38,7 @@ const shown = ref(false)
 
 defineExpose({
   showMenu: (event, passedItem, passedOptions) => {
+    hide_ads_window()
     item.value = passedItem
     options.value = passedOptions
 
@@ -60,15 +62,18 @@ defineExpose({
 })
 
 const isLinkedData = (item) => {
-  if (item.instance != undefined && item.instance.metadata.linked_data) {
+  if (item.instance != undefined && item.instance.linked_data) {
     return true
-  } else if (item.metadata != undefined && item.metadata.linked_data) {
+  } else if (item != undefined && item.linked_data) {
     return true
   }
   return false
 }
 
 const hideContextMenu = () => {
+  if (shown.value) {
+    show_ads_window()
+  }
   shown.value = false
   emit('menu-closed')
 }

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

@@ -0,0 +1,332 @@
+<script setup>
+import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
+import { ChatIcon } from '@/assets/icons'
+import { ref } 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'
+
+const errorModal = ref()
+const error = ref()
+const closable = ref(true)
+
+const title = ref('An error occurred')
+const errorType = ref('unknown')
+const supportLink = ref('https://support.modrinth.com')
+const metadata = ref({})
+
+defineExpose({
+  async show(errorVal, context, canClose = true, source = null) {
+    closable.value = canClose
+
+    if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
+      title.value = 'Unable to sign in to Minecraft'
+      errorType.value = 'minecraft_auth'
+      supportLink.value =
+        'https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues'
+
+      if (
+        errorVal.message.includes('existing connection was forcibly closed') ||
+        errorVal.message.includes('error sending request for url')
+      ) {
+        metadata.value.network = true
+      }
+      if (errorVal.message.includes('because the target machine actively refused it')) {
+        metadata.value.hostsFile = true
+      }
+    } else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+      title.value = 'Sign in to Minecraft'
+      errorType.value = 'minecraft_sign_in'
+      supportLink.value = 'https://support.modrinth.com'
+    } else if (errorVal.message && errorVal.message.includes('Move directory error:')) {
+      title.value = 'Could not change app directory'
+      errorType.value = 'directory_move'
+      supportLink.value = 'https://support.modrinth.com'
+
+      if (errorVal.message.includes('directory is not writeable')) {
+        metadata.value.readOnly = true
+      }
+
+      if (errorVal.message.includes('Not enough space')) {
+        metadata.value.notEnoughSpace = true
+      }
+    } else if (errorVal.message && errorVal.message.includes('No loader version selected for')) {
+      title.value = 'No loader selected'
+      errorType.value = 'no_loader_version'
+      supportLink.value = 'https://support.modrinth.com'
+      metadata.value.profilePath = context.profilePath
+    } else if (source === 'state_init') {
+      title.value = 'Error initializing Modrinth App'
+      errorType.value = 'state_init'
+      supportLink.value = 'https://support.modrinth.com'
+    } else {
+      title.value = 'An error occurred'
+      errorType.value = 'unknown'
+      supportLink.value = 'https://support.modrinth.com'
+      metadata.value = {}
+    }
+
+    error.value = errorVal
+    errorModal.value.show()
+  },
+})
+
+const loadingMinecraft = ref(false)
+async function loginMinecraft() {
+  try {
+    loadingMinecraft.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await trackEvent('AccountLogIn', { source: 'ErrorModal' })
+    loadingMinecraft.value = false
+    errorModal.value.hide()
+  } catch (err) {
+    loadingMinecraft.value = false
+    handleSevereError(err)
+  }
+}
+
+async function cancelDirectoryChange() {
+  try {
+    await cancel_directory_change()
+    window.location.reload()
+  } catch (err) {
+    handleError(err)
+  }
+}
+
+function retryDirectoryChange() {
+  window.location.reload()
+}
+
+const loadingRepair = ref(false)
+async function repairInstance() {
+  loadingRepair.value = true
+  try {
+    await install(metadata.value.profilePath, false)
+    errorModal.value.hide()
+  } catch (err) {
+    handleSevereError(err)
+  }
+  loadingRepair.value = false
+}
+</script>
+
+<template>
+  <ModalWrapper ref="errorModal" :header="title" :closable="closable">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <template v-if="errorType === 'minecraft_auth'">
+          <template v-if="metadata.network">
+            <h3>Network issues</h3>
+            <p>
+              It looks like there were issues with the Modrinth App connecting to Microsoft's
+              servers. This is often the result of a poor connection, so we recommend trying again
+              to see if it works. If issues continue to persist, follow the steps in
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
+              >
+                our support article
+              </a>
+              to troubleshoot.
+            </p>
+          </template>
+          <template v-else-if="metadata.hostsFile">
+            <h3>Network issues</h3>
+            <p>
+              The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+              remote server rejected the connection. This may indicate that these services are
+              blocked by the hosts file. Please visit
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
+              >
+                our support article
+              </a>
+              for steps on how to fix the issue.
+            </p>
+          </template>
+          <template v-else>
+            <h3>Try another Microsoft account</h3>
+            <p>
+              Double check you've signed in with the right account. You may own Minecraft on a
+              different Microsoft account.
+            </p>
+            <div class="cta-button">
+              <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+                <LogInIcon /> Try another account
+              </button>
+            </div>
+            <h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
+            <p>
+              Try signing in with the
+              <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
+              first. Once you're done, come back here and sign in!
+            </p>
+          </template>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Try signing in again
+            </button>
+          </div>
+        </template>
+        <template v-if="errorType === 'directory_move'">
+          <template v-if="metadata.readOnly">
+            <h3>Change directory permissions</h3>
+            <p>
+              It looks like the Modrinth App is unable to write to the directory you selected.
+              Please adjust the permissions of the directory and try again or cancel the directory
+              change.
+            </p>
+          </template>
+          <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
+              selected Please free up some space and try again or cancel the directory change.
+            </p>
+          </template>
+          <template v-else>
+            <p>
+              The Modrinth App is unable to migrate to the new directory you selected. Please
+              contact support for help or cancel the directory change.
+            </p>
+          </template>
+
+          <div class="cta-button">
+            <button class="btn" @click="retryDirectoryChange">
+              <UpdatedIcon /> Retry directory change
+            </button>
+            <button class="btn btn-danger" @click="cancelDirectoryChange">
+              <XIcon /> Cancel directory change
+            </button>
+          </div>
+        </template>
+        <div v-else-if="errorType === 'minecraft_sign_in'">
+          <p>
+            To play this instance, you must sign in through Microsoft below. If you don't have a
+            Minecraft account, you can purchase the game on the
+            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+              >Minecraft website</a
+            >.
+          </p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
+        </div>
+        <template v-else-if="errorType === 'state_init'">
+          <p>
+            Modrinth App failed to load correctly. This may be because of a corrupted file, or
+            because the app is missing crucial files.
+          </p>
+          <p>You may be able to fix it through one of the following ways:</p>
+          <ul>
+            <li>Ennsuring you are connected to the internet, then try restarting the app.</li>
+            <li>Redownloading the app.</li>
+          </ul>
+        </template>
+        <template v-else-if="errorType === 'no_loader_version'">
+          <p>The Modrinth App failed to find the loader version for this instance.</p>
+          <p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
+              <HammerIcon /> Repair instance
+            </button>
+          </div>
+        </template>
+        <template v-else>
+          {{ error.message ?? error }}
+        </template>
+        <template
+          v-if="
+            errorType === 'directory_move' ||
+            errorType === 'minecraft_auth' ||
+            errorType === 'state_init' ||
+            errorType === 'no_loader_version'
+          "
+        >
+          <hr />
+          <p>
+            If nothing is working and you need help, visit
+            <a :href="supportLink">our support page</a>
+            and start a chat using the widget in the bottom right and we will be more than happy to
+            assist! Make sure to provide the following debug information to the agent:
+          </p>
+          <details>
+            <summary>Debug information</summary>
+            {{ error.message ?? error }}
+          </details>
+        </template>
+      </div>
+      <div class="input-group push-right">
+        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
+      </div>
+    </div>
+  </ModalWrapper>
+</template>
+
+<style>
+.light-mode {
+  --color-orange-bg: rgba(255, 163, 71, 0.2);
+}
+
+.dark-mode,
+.oled-mode {
+  --color-orange-bg: rgba(224, 131, 37, 0.2);
+}
+</style>
+
+<style scoped lang="scss">
+.cta-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+
+.warning-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--gap-lg);
+  background-color: var(--color-orange-bg);
+  border: 2px solid var(--color-orange);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.warning-banner__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+
+  svg {
+    color: var(--color-orange);
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
+}
+
+.markdown-body {
+  overflow: auto;
+}
+</style>

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

@@ -1,11 +1,12 @@
 <script setup>
-import { Button, Checkbox, Modal, XIcon, PlusIcon } from 'omorphia'
+import { XIcon, PlusIcon } from '@modrinth/assets'
+import { Button, Checkbox } 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/api/dialog'
+import { open } from '@tauri-apps/plugin-dialog'
 import { handleError } from '@/store/notifications.js'
-import { useTheming } from '@/store/theme'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
   instance: {
@@ -22,15 +23,13 @@ defineExpose({
 })
 
 const exportModal = ref(null)
-const nameInput = ref(props.instance.metadata.name)
+const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
 const folders = ref([])
 const showingFiles = ref(false)
 
-const themeStore = useTheming()
-
 const initFiles = async () => {
   const newFolders = new Map()
   const sep = '/'
@@ -49,9 +48,9 @@ const initFiles = async () => {
         disabled:
           folder === 'profile.json' ||
           folder.startsWith('modrinth_logs') ||
-          folder.startsWith('.fabric') ||
-          folder.includes('.DS_Store'),
+          folder.startsWith('.fabric'),
       }))
+      .filter((pathData) => !pathData.path.includes('.DS_Store'))
       .forEach((pathData) => {
         const parent = pathData.path.split(sep).slice(0, -1).join(sep)
         if (parent !== '') {
@@ -63,7 +62,7 @@ const initFiles = async () => {
         } else {
           files.value.push(pathData)
         }
-      })
+      }),
   )
   folders.value = [...newFolders.entries()].map(([name, value]) => [
     {
@@ -97,7 +96,7 @@ const exportPack = async () => {
       filesToExport,
       versionInput.value,
       exportDescription.value,
-      nameInput.value
+      nameInput.value,
     ).catch((err) => handleError(err))
     exportModal.value.hide()
   }
@@ -105,14 +104,14 @@ const exportPack = async () => {
 </script>
 
 <template>
-  <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="exportModal" header="Export modpack">
     <div class="modal-body">
       <div class="labeled_input">
         <p>Modpack Name</p>
         <div class="iconified-input">
           <PackageIcon />
           <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-          <Button @click="nameInput = ''">
+          <Button class="r-btn" @click="nameInput = ''">
             <XIcon />
           </Button>
         </div>
@@ -122,7 +121,7 @@ const exportPack = async () => {
         <div class="iconified-input">
           <VersionIcon />
           <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-          <Button @click="versionInput = ''">
+          <Button class="r-btn" @click="versionInput = ''">
             <XIcon />
           </Button>
         </div>
@@ -207,7 +206,7 @@ const exportPack = async () => {
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,259 @@
+<script setup>
+import { onUnmounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { StopCircleIcon, PlayIcon } from '@modrinth/assets'
+import { Card, Avatar, AnimatedLogo } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { kill, run } from '@/helpers/profile'
+import { get_by_profile_path } from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
+import { handleError } from '@/store/state.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { handleSevereError } from '@/store/error.js'
+import { trackEvent } from '@/helpers/analytics'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const playing = ref(false)
+
+const modLoading = computed(() => props.instance.install_stage !== 'installed')
+
+const router = useRouter()
+
+const seeInstance = async () => {
+  await router.push(`/instance/${encodeURIComponent(props.instance.path)}/`)
+}
+
+const checkProcess = async () => {
+  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+
+  playing.value = runningProcesses.length > 0
+}
+
+const play = async (e, context) => {
+  e?.stopPropagation()
+  modLoading.value = true
+  await run(props.instance.path).catch((err) =>
+    handleSevereError(err, { profilePath: props.instance.path }),
+  )
+  modLoading.value = false
+
+  trackEvent('InstancePlay', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: context,
+  })
+}
+
+const stop = async (e, context) => {
+  e?.stopPropagation()
+  playing.value = false
+
+  await kill(props.instance.path).catch(handleError)
+
+  trackEvent('InstanceStop', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: context,
+  })
+}
+
+const openFolder = async () => {
+  await showProfileInFolder(props.instance.path)
+}
+
+const addContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+
+defineExpose({
+  play,
+  stop,
+  seeInstance,
+  openFolder,
+  addContent,
+  instance: props.instance,
+})
+
+const unlisten = await process_listener((e) => {
+  if (e.event === 'finished' && e.profile_path_id === props.instance.path) playing.value = false
+})
+
+onUnmounted(() => unlisten())
+</script>
+
+<template>
+  <div class="instance">
+    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
+      <Avatar
+        size="lg"
+        :src="props.instance.icon_path ? convertFileSrc(props.instance.icon_path) : null"
+        alt="Mod card"
+        class="mod-image"
+      />
+      <div class="project-info">
+        <p class="title">{{ props.instance.name }}</p>
+        <p
+          v-if="
+            props.instance.install_stage === 'installing' ||
+            props.instance.install_stage === 'not_installed' ||
+            props.instance.install_stage === 'pack_installing'
+          "
+          class="description"
+        >
+          Installing...
+        </p>
+        <p v-else class="description">
+          {{ props.instance.loader }}
+          {{ props.instance.game_version }}
+        </p>
+      </div>
+    </Card>
+    <div
+      v-if="playing === true"
+      class="stop cta button-base"
+      @click="(e) => stop(e, 'InstanceCard')"
+      @mousehover="checkProcess"
+    >
+      <StopCircleIcon />
+    </div>
+    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
+      <AnimatedLogo class="loading-indicator" />
+    </div>
+    <div v-else class="install cta button-base" @click="(e) => play(e, 'InstanceCard')">
+      <PlayIcon />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.loading-indicator {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+
+  svg {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.instance {
+  position: relative;
+
+  &:hover {
+    .cta {
+      opacity: 1;
+      bottom: calc(var(--gap-md) + 4.25rem);
+    }
+  }
+}
+
+.cta {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  right: calc(var(--gap-md) * 2);
+  bottom: 3.25rem;
+  opacity: 0;
+  transition:
+    0.2s ease-in-out bottom,
+    0.2s ease-in-out opacity,
+    0.1s ease-in-out filter !important;
+  cursor: pointer;
+  box-shadow: var(--shadow-floating);
+
+  svg {
+    color: var(--color-accent-contrast);
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+  }
+
+  &.install {
+    background: var(--color-brand);
+    display: flex;
+  }
+
+  &.stop {
+    background: var(--color-red);
+    display: flex;
+  }
+
+  &.loading-cta {
+    background: hsl(220, 11%, 10%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.instance-card-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--gap-md);
+  transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
+  margin-bottom: 0;
+
+  .mod-image {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+
+  .project-info {
+    margin-top: 1rem;
+    width: 100%;
+
+    .title {
+      color: var(--color-contrast);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      margin: 0;
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 110%;
+      display: inline-block;
+    }
+
+    .description {
+      color: var(--color-base);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-weight: 500;
+      font-size: 0.775rem;
+      line-height: 125%;
+      margin: 0.25rem 0 0;
+      text-transform: capitalize;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" header="Create instance" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="modal" header="Create instance">
     <div class="modal-header">
       <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
     </div>
@@ -110,7 +110,7 @@
               placeholder="Path to launcher"
               @change="setPath"
             />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
               <XIcon />
             </Button>
           </div>
@@ -177,14 +177,14 @@
             loading
               ? 'Importing...'
               : Array.from(profiles.values())
-                  .flatMap((e) => e)
-                  .some((e) => e.selected)
-              ? `Import ${
-                  Array.from(profiles.values())
                     .flatMap((e) => e)
-                    .filter((e) => e.selected).length
-                } profiles`
-              : 'Select profiles to import'
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(profiles.values())
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } profiles`
+                : 'Select profiles to import'
           }}
         </Button>
         <ProgressBar
@@ -193,41 +193,31 @@
         />
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import {
-  Avatar,
-  Button,
-  Chips,
-  Modal,
   PlusIcon,
   UploadIcon,
   XIcon,
   CodeIcon,
-  Checkbox,
   FolderOpenIcon,
   InfoIcon,
   FolderSearchIcon,
   UpdatedIcon,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { Avatar, Button, Chips, Checkbox } 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/api/dialog'
-import { tauri } from '@tauri-apps/api'
-import {
-  get_game_versions,
-  get_fabric_versions,
-  get_forge_versions,
-  get_quilt_versions,
-  get_neoforge_versions,
-} from '@/helpers/metadata'
+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 { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import { useTheming } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 import { listen } from '@tauri-apps/api/event'
 import { install_from_file } from '@/helpers/pack.js'
 import {
@@ -237,8 +227,6 @@ import {
 } from '@/helpers/import.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 
-const themeStore = useTheming()
-
 const profile_name = ref('')
 const game_version = ref('')
 const loader = ref('vanilla')
@@ -274,13 +262,13 @@ defineExpose({
       hide()
       if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
         await install_from_file(event.payload[0]).catch(handleError)
-        mixpanel_track('InstanceCreate', {
+        trackEvent('InstanceCreate', {
           source: 'CreationModalFileDrop',
         })
       }
     })
 
-    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
+    trackEvent('InstanceCreateStart', { source: 'CreationModal' })
   },
 })
 
@@ -308,16 +296,16 @@ const [
   all_game_versions,
   loaders,
 ] = await Promise.all([
-  get_fabric_versions().then(shallowRef).catch(handleError),
-  get_forge_versions().then(shallowRef).catch(handleError),
-  get_quilt_versions().then(shallowRef).catch(handleError),
-  get_neoforge_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('fabric').then(shallowRef).catch(handleError),
+  get_loader_versions('forge').then(shallowRef).catch(handleError),
+  get_loader_versions('quilt').then(shallowRef).catch(handleError),
+  get_loader_versions('neo').then(shallowRef).catch(handleError),
   get_game_versions().then(shallowRef).catch(handleError),
   get_loaders()
     .then((value) =>
       value
         .filter((item) => item.supported_project_types.includes('modpack'))
-        .map((item) => item.name.toLowerCase())
+        .map((item) => item.name.toLowerCase()),
     )
     .then(ref)
     .catch(handleError),
@@ -367,10 +355,10 @@ const create_instance = async () => {
     game_version.value,
     loader.value,
     loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
-    icon.value
+    icon.value,
   ).catch(handleError)
 
-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
     profile_name: profile_name.value,
     game_version: game_version.value,
     loader: loader.value,
@@ -381,7 +369,7 @@ const create_instance = async () => {
 }
 
 const upload_icon = async () => {
-  icon.value = await open({
+  const res = await open({
     multiple: false,
     filters: [
       {
@@ -391,8 +379,10 @@ const upload_icon = async () => {
     ],
   })
 
+  icon.value = res.path ?? res
+
   if (!icon.value) return
-  display_icon.value = tauri.convertFileSrc(icon.value)
+  display_icon.value = convertFileSrc(icon.value)
 }
 
 const reset_icon = () => {
@@ -427,9 +417,9 @@ const openFile = async () => {
   const newProject = await open({ multiple: false })
   if (!newProject) return
   hide()
-  await install_from_file(newProject).catch(handleError)
+  await install_from_file(newProject.path ?? newProject).catch(handleError)
 
-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
     source: 'CreationModalFileOpen',
   })
 }
@@ -441,7 +431,7 @@ const profiles = ref(
     ['ATLauncher', []],
     ['Curseforge', []],
     ['PrismLauncher', []],
-  ])
+  ]),
 )
 
 const loading = ref(false)
@@ -470,9 +460,9 @@ const promises = profileOptions.value.map(async (option) => {
     profileOptions.value.find((profile) => profile.name === option.name).path = path
     profiles.value.set(
       option.name,
-      instances.map((name) => ({ name, selected: false }))
+      instances.map((name) => ({ name, selected: false })),
     )
-  } catch (error) {
+  } catch {
     // Allow failure silently
   }
 })
@@ -489,12 +479,12 @@ const selectLauncherPath = async () => {
 const reload = async () => {
   const instances = await get_importable_instances(
     selectedProfileType.value.name,
-    selectedProfileType.value.path
+    selectedProfileType.value.path,
   ).catch(handleError)
   if (instances) {
     profiles.value.set(
       selectedProfileType.value.name,
-      instances.map((name) => ({ name, selected: false }))
+      instances.map((name) => ({ name, selected: false })),
     )
   } else {
     profiles.value.set(selectedProfileType.value.name, [])

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="detectJavaModal" header="Select java version" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="detectJavaModal" header="Select java version">
     <div class="auto-detect-modal">
       <div class="table">
         <div class="table-row table-head">
@@ -32,22 +32,16 @@
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 <script setup>
-import { Modal, PlusIcon, CheckIcon, Button, XIcon } from 'omorphia'
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
-import {
-  find_jre_17_jres,
-  find_jre_18plus_jres,
-  find_jre_8_jres,
-  get_all_jre,
-} from '@/helpers/jre.js'
+import { find_filtered_jres } from '@/helpers/jre.js'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import { useTheming } from '@/store/theme.js'
-
-const themeStore = useTheming()
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
@@ -55,15 +49,7 @@ const currentSelected = ref({})
 
 defineExpose({
   show: async (version, currentSelectedJava) => {
-    if (version <= 8 && !!version) {
-      chosenInstallOptions.value = await find_jre_8_jres().catch(handleError)
-    } else if (version >= 18) {
-      chosenInstallOptions.value = await find_jre_18plus_jres().catch(handleError)
-    } else if (version) {
-      chosenInstallOptions.value = await find_jre_17_jres().catch(handleError)
-    } else {
-      chosenInstallOptions.value = await get_all_jre().catch(handleError)
-    }
+    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
 
     currentSelected.value = currentSelectedJava
     if (!currentSelected.value) {
@@ -79,7 +65,7 @@ const emit = defineEmits(['submit'])
 function setJavaInstall(javaInstall) {
   emit('submit', javaInstall)
   detectJavaModal.value.hide()
-  mixpanel_track('JavaAutoDetect', {
+  trackEvent('JavaAutoDetect', {
     path: javaInstall.path,
     version: javaInstall.version,
   })

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

@@ -53,26 +53,20 @@
 
 <script setup>
 import {
-  Button,
   SearchIcon,
   PlayIcon,
   CheckIcon,
   XIcon,
   FolderSearchIcon,
   DownloadIcon,
-} from 'omorphia'
-import {
-  auto_install_java,
-  find_jre_17_jres,
-  find_jre_8_jres,
-  get_jre,
-  test_jre,
-} from '@/helpers/jre.js'
+} from '@modrinth/assets'
+import { Button } 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/api/dialog'
+import { open } from '@tauri-apps/plugin-dialog'
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const props = defineProps({
   version: {
@@ -82,7 +76,10 @@ const props = defineProps({
   },
   modelValue: {
     type: Object,
-    required: true,
+    default: () => ({
+      path: '',
+      version: '',
+    }),
   },
   disabled: {
     type: Boolean,
@@ -112,11 +109,11 @@ async function testJava() {
   testingJavaSuccess.value = await test_jre(
     props.modelValue ? props.modelValue.path : '',
     1,
-    props.version
+    props.version,
   )
   testingJava.value = false
 
-  mixpanel_track('JavaTest', {
+  trackEvent('JavaTest', {
     path: props.modelValue ? props.modelValue.path : '',
     success: testingJavaSuccess.value,
   })
@@ -127,20 +124,19 @@ async function testJava() {
 }
 
 async function handleJavaFileInput() {
-  let filePath = await open()
+  const filePath = await open()
 
   if (filePath) {
-    let result = await get_jre(filePath)
+    let result = await get_jre(filePath.path ?? filePath)
     if (!result) {
       result = {
-        path: filePath,
+        path: filePath.path ?? filePath,
         version: props.version.toString(),
         architecture: 'x86',
       }
     }
 
-    mixpanel_track('JavaManualSelect', {
-      path: filePath,
+    trackEvent('JavaManualSelect', {
       version: props.version,
     })
 
@@ -153,16 +149,9 @@ async function autoDetect() {
   if (!props.compact) {
     detectJavaModal.value.show(props.version, props.modelValue)
   } else {
-    if (props.version == 8) {
-      let versions = await find_jre_8_jres().catch(handleError)
-      if (versions.length > 0) {
-        emit('update:modelValue', versions[0])
-      }
-    } else {
-      let versions = await find_jre_17_jres().catch(handleError)
-      if (versions.length > 0) {
-        emit('update:modelValue', versions[0])
-      }
+    const versions = await find_filtered_jres(props.version).catch(handleError)
+    if (versions.length > 0) {
+      emit('update:modelValue', versions[0])
     }
   }
 }
@@ -170,10 +159,8 @@ async function autoDetect() {
 async function reinstallJava() {
   installingJava.value = true
   const path = await auto_install_java(props.version).catch(handleError)
-  console.log('java path: ' + path)
   let result = await get_jre(path)
 
-  console.log('java result ' + result)
   if (!result) {
     result = {
       path: path,
@@ -182,7 +169,7 @@ async function reinstallJava() {
     }
   }
 
-  mixpanel_track('JavaReInstall', {
+  trackEvent('JavaReInstall', {
     path: path,
     version: props.version,
   })
@@ -216,6 +203,10 @@ async function reinstallJava() {
   align-items: center;
   gap: 0.5rem;
   margin: 0;
+
+  .btn {
+    width: max-content;
+  }
 }
 
 .test-success {

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

@@ -1,10 +1,11 @@
 <script setup>
-import { Button, Modal, CheckIcon, Badge } from 'omorphia'
+import { CheckIcon } from '@modrinth/assets'
+import { Button, Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-import { useTheming } from '@/store/theme'
 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'
 
 const props = defineProps({
   versions: {
@@ -28,12 +29,10 @@ const filteredVersions = computed(() => {
 })
 
 const modpackVersionModal = ref(null)
-const installedVersion = computed(() => props.instance?.metadata?.linked_data?.version_id)
+const installedVersion = computed(() => props.instance?.linked_data?.version_id)
 const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)
 
-const themeStore = useTheming()
-
 const switchVersion = async (versionId) => {
   inProgress.value = true
   await update_managed_modrinth_version(props.instance.path, versionId)
@@ -42,14 +41,13 @@ const switchVersion = async (versionId) => {
 </script>
 
 <template>
-  <Modal
+  <ModalWrapper
     ref="modpackVersionModal"
     class="modpack-version-modal"
     header="Change modpack version"
-    :noblur="!themeStore.advancedRendering"
   >
     <div class="modal-body">
-      <Card v-if="instance.metadata.linked_data" class="mod-card">
+      <Card v-if="instance.linked_data" class="mod-card">
         <div class="table">
           <div class="table-row with-columns table-head">
             <div class="table-cell table-text download-cell" />
@@ -110,7 +108,7 @@ const switchVersion = async (versionId) => {
         </div>
       </Card>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -1,22 +1,13 @@
 <script setup>
-import {
-  Card,
-  Avatar,
-  Button,
-  formatNumber,
-  formatCategory,
-  DownloadIcon,
-  HeartIcon,
-  CalendarIcon,
-} from 'omorphia'
+import { Card, Avatar, Button } from '@modrinth/ui'
+import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
+import { formatNumber, formatCategory } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useRouter } from 'vue-router'
-import { useFetch } from '@/helpers/fetch.js'
-import { list } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { install as pack_install } from '@/helpers/pack.js'
+import { install as installVersion } from '@/store/install.js'
+
 dayjs.extend(relativeTime)
 
 const router = useRouter()
@@ -29,18 +20,6 @@ const props = defineProps({
       return {}
     },
   },
-  confirmModal: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  modInstallModal: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
 })
 
 const toColor = computed(() => {
@@ -72,40 +51,15 @@ const toTransparent = computed(() => {
 const install = async (e) => {
   e?.stopPropagation()
   installing.value = true
-  const versions = await useFetch(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
-    'project versions'
-  )
-
-  if (props.project.project_type === 'modpack') {
-    const packs = Object.values(await list(true).catch(handleError))
-
-    if (
-      packs.length === 0 ||
-      !packs
-        .map((value) => value.metadata)
-        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
-    ) {
-      installing.value = true
-      await pack_install(
-        props.project.project_id,
-        versions[0].id,
-        props.project.title,
-        props.project.icon_url
-      ).catch(handleError)
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'ProjectCard',
+    () => {
       installing.value = false
-    } else
-      props.confirmModal.show(
-        props.project.project_id,
-        versions[0].id,
-        props.project.title,
-        props.project.icon_url
-      )
-  } else {
-    props.modInstallModal.show(props.project.project_id, versions)
-  }
-
-  installing.value = false
+    },
+  )
 }
 </script>
 

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

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { get as getCreds } from '@/helpers/mr_auth.js'
+import { handleError } from '@/store/notifications.js'
+import { get_user } from '@/helpers/cache.js'
+import { ChevronRightIcon } from '@modrinth/assets'
+import { init_ads_window, open_ads_link, record_ads_click } from '@/helpers/ads.js'
+import { listen } from '@tauri-apps/api/event'
+
+const showAd = ref(true)
+
+defineExpose({
+  scroll() {
+    updateAdPosition()
+  },
+})
+
+const creds = await getCreds().catch(handleError)
+if (creds && creds.user_id) {
+  const user = await get_user(creds.user_id).catch(handleError)
+
+  const MIDAS_BITFLAG = 1 << 0
+  if (user && (user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG) {
+    showAd.value = false
+  }
+}
+
+const adsWrapper = ref(null)
+let resizeObserver
+let scrollHandler
+let intersectionObserver
+let mutationObserver
+onMounted(() => {
+  if (showAd.value) {
+    updateAdPosition(true)
+
+    resizeObserver = new ResizeObserver(() => updateAdPosition())
+    resizeObserver.observe(adsWrapper.value)
+
+    intersectionObserver = new IntersectionObserver(() => updateAdPosition())
+    intersectionObserver.observe(adsWrapper.value)
+
+    mutationObserver = new MutationObserver(() => updateAdPosition())
+    mutationObserver.observe(adsWrapper.value, { attributes: true, childList: true, subtree: true })
+
+    // Add scroll event listener
+    scrollHandler = () => {
+      requestAnimationFrame(() => updateAdPosition())
+    }
+    window.addEventListener('scroll', scrollHandler, { passive: true })
+  }
+})
+
+function updateAdPosition(overrideShown = false) {
+  if (adsWrapper.value) {
+    const rect = adsWrapper.value.getBoundingClientRect()
+
+    let y = rect.top + window.scrollY
+    let height = rect.bottom - rect.top
+
+    // Prevent ad from overlaying the app bar
+    if (y <= 52) {
+      y = 52
+      height = rect.bottom - 52
+
+      if (height < 0) {
+        height = 0
+        y = -1000
+      }
+    }
+
+    init_ads_window(rect.left + window.scrollX, y, rect.right - rect.left, height, overrideShown)
+  }
+}
+
+async function openPlusLink() {
+  await record_ads_click()
+  await open_ads_link('https://modrinth.com/plus', 'https://modrinth.com')
+}
+
+const unlisten = await listen('ads-scroll', (event) => {
+  if (adsWrapper.value) {
+    adsWrapper.value.parentNode.scrollTop += event.payload.scroll
+    updateAdPosition()
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+  if (intersectionObserver) {
+    intersectionObserver.disconnect()
+  }
+  if (mutationObserver) {
+    mutationObserver.disconnect()
+  }
+  if (scrollHandler) {
+    window.removeEventListener('scroll', scrollHandler)
+  }
+
+  unlisten()
+})
+</script>
+
+<template>
+  <div
+    v-if="showAd"
+    ref="adsWrapper"
+    class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised cursor-pointer"
+  >
+    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
+      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
+      <button
+        class="mt-auto items-center gap-1 text-purple hover:underline bg-transparent border-none text-left cursor-pointer outline-none"
+        @click="openPlusLink"
+      >
+        <span>
+          Support creators and Modrinth ad-free with
+          <span class="font-bold">Modrinth+</span>
+        </span>
+        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="action-groups">
-    <a href="https://discord.modrinth.com" class="link">
+    <a href="https://support.modrinth.com" class="link">
       <ChatIcon />
       <span> Get support </span>
     </a>
@@ -15,15 +15,15 @@
     </Button>
     <div v-if="offline" class="status">
       <span class="circle stopped" />
-      <div class="running-text clickable" @click="refreshInternet()">
+      <div class="running-text">
         <span> Offline </span>
       </div>
     </div>
-    <div v-if="selectedProfile" class="status">
+    <div v-if="selectedProcess" class="status">
       <span class="circle running" />
       <div ref="profileButton" class="running-text">
-        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
-          {{ selectedProfile.metadata.name }}
+        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+          {{ selectedProcess.profile.name }}
         </router-link>
         <div
           v-if="currentProcesses.length > 1"
@@ -34,7 +34,12 @@
           <DropdownIcon />
         </div>
       </div>
-      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
+      <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()">
@@ -75,17 +80,17 @@
       class="profile-card"
     >
       <Button
-        v-for="profile in currentProcesses"
-        :key="profile.id"
+        v-for="process in currentProcesses"
+        :key="process.uuid"
         class="profile-button"
-        @click="selectProfile(profile)"
+        @click="selectProcess(process)"
       >
-        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <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(profile.path)"
+          @click.stop="stop(process)"
         >
           <StopCircleIcon />
         </Button>
@@ -93,7 +98,7 @@
           v-tooltip="'View logs'"
           icon-only
           class="icon-button"
-          @click.stop="goToTerminal(profile.path)"
+          @click.stop="goToTerminal(process.profile.path)"
         >
           <TerminalSquareIcon />
         </Button>
@@ -103,28 +108,18 @@
 </template>
 
 <script setup>
-import {
-  Button,
-  DownloadIcon,
-  Card,
-  StopCircleIcon,
-  TerminalSquareIcon,
-  DropdownIcon,
-} from 'omorphia'
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import {
-  get_all_running_profiles as getRunningProfiles,
-  kill_by_uuid as killProfile,
-  get_uuids_by_profile_path as getProfileProcesses,
-} from '@/helpers/process'
-import { loading_listener, process_listener, offline_listener } from '@/helpers/events'
+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 { refreshOffline, isOffline } from '@/helpers/utils.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { ChatIcon } from '@/assets/icons'
+import { get_many } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const router = useRouter()
 const card = ref(null)
@@ -135,38 +130,43 @@ const showCard = ref(false)
 
 const showProfiles = ref(false)
 
-const currentProcesses = ref(await getRunningProfiles().catch(handleError))
-const selectedProfile = ref(currentProcesses.value[0])
+const currentProcesses = ref([])
+const selectedProcess = ref()
 
-const offline = ref(await isOffline().catch(handleError))
-const refreshInternet = async () => {
-  offline.value = await refreshOffline().catch(handleError)
+const refresh = async () => {
+  const processes = await getRunningProcesses().catch(handleError)
+  const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+
+  currentProcesses.value = processes.map((x) => ({
+    profile: profiles.find((prof) => x.profile_path === prof.path),
+    ...x,
+  }))
+  if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+    selectedProcess.value = currentProcesses.value[0]
+  }
 }
 
+await refresh()
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+  offline.value = true
+})
+window.addEventListener('online', () => {
+  offline.value = false
+})
+
 const unlistenProcess = await process_listener(async () => {
   await refresh()
 })
 
-const unlistenRefresh = await offline_listener(async (b) => {
-  offline.value = b
-  await refresh()
-})
-
-const refresh = async () => {
-  currentProcesses.value = await getRunningProfiles().catch(handleError)
-  if (!currentProcesses.value.includes(selectedProfile.value)) {
-    selectedProfile.value = currentProcesses.value[0]
-  }
-}
-
-const stop = async (path) => {
+const stop = async (process) => {
   try {
-    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
-    await killProfile(processes[0])
+    await killProcess(process.uuid).catch(handleError)
 
-    mixpanel_track('InstanceStop', {
-      loader: currentProcesses.value[0].metadata.loader,
-      game_version: currentProcesses.value[0].metadata.game_version,
+    trackEvent('InstanceStop', {
+      loader: process.profile.loader,
+      game_version: process.profile.game_version,
       source: 'AppBar',
     })
   } catch (e) {
@@ -176,7 +176,7 @@ const stop = async (path) => {
 }
 
 const goToTerminal = (path) => {
-  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
 }
 
 const currentLoadingBars = ref([])
@@ -188,16 +188,27 @@ const refreshInfo = async () => {
       if (x.bar_type.type === 'java_download') {
         x.title = 'Downloading Java ' + x.bar_type.version
       }
-      if (x.bar_type.profile_name) {
-        x.title = x.bar_type.profile_name
+      if (x.bar_type.profile_path) {
+        x.title = x.bar_type.profile_path
       }
       if (x.bar_type.pack_name) {
         x.title = x.bar_type.pack_name
       }
 
       return x
-    }
+    },
   )
+
+  currentLoadingBars.value.sort((a, b) => {
+    if (a.loading_bar_uuid < b.loading_bar_uuid) {
+      return -1
+    }
+    if (a.loading_bar_uuid > b.loading_bar_uuid) {
+      return 1
+    }
+    return 0
+  })
+
   if (currentLoadingBars.value.length === 0) {
     showCard.value = false
   } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
@@ -210,8 +221,8 @@ const unlistenLoading = await loading_listener(async () => {
   await refreshInfo()
 })
 
-const selectProfile = (profile) => {
-  selectedProfile.value = profile
+const selectProcess = (process) => {
+  selectedProcess.value = process
   showProfiles.value = false
 }
 
@@ -262,7 +273,6 @@ onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutsideProfile)
   unlistenProcess()
   unlistenLoading()
-  unlistenRefresh()
 })
 </script>
 
@@ -330,8 +340,12 @@ onBeforeUnmount(() => {
   width: 1.25rem !important;
   height: 1.25rem !important;
 
+  svg {
+    min-width: 1.25rem;
+  }
+
   &.stop {
-    --text-color: var(--color-red) !important;
+    color: var(--color-red);
   }
 }
 

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

@@ -63,29 +63,13 @@
 </template>
 
 <script setup>
-import {
-  Avatar,
-  Card,
-  Categories,
-  EnvironmentIndicator,
-  Button,
-  DownloadIcon,
-  formatNumber,
-  formatCategory,
-  HeartIcon,
-  CalendarIcon,
-  CheckIcon,
-  StarIcon,
-} from 'omorphia'
+import { DownloadIcon, HeartIcon, CalendarIcon, CheckIcon, StarIcon } from '@modrinth/assets'
+import { Avatar, Card, Categories, EnvironmentIndicator, Button } from '@modrinth/ui'
+import { formatNumber, formatCategory } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref } from 'vue'
-import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
-import { install as packInstall } from '@/helpers/pack.js'
-import { installVersionDependencies } from '@/helpers/utils.js'
-import { useFetch } from '@/helpers/fetch.js'
-import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { install as installVersion } from '@/store/install.js'
 dayjs.extend(relativeTime)
 
 const props = defineProps({
@@ -105,18 +89,6 @@ const props = defineProps({
     type: Object,
     default: null,
   },
-  confirmModal: {
-    type: Object,
-    default: null,
-  },
-  modInstallModal: {
-    type: Object,
-    default: null,
-  },
-  incompatibilityWarningModal: {
-    type: Object,
-    default: null,
-  },
   featured: {
     type: Boolean,
     default: false,
@@ -134,92 +106,19 @@ const installed = ref(props.installed)
 
 async function install() {
   installing.value = true
-  const versions = await useFetch(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
-    'project versions'
-  )
-  let queuedVersionData
-
-  if (!props.instance) {
-    queuedVersionData = versions[0]
-  } else {
-    queuedVersionData = versions.find(
-      (v) =>
-        v.game_versions.includes(props.instance.metadata.game_version) &&
-        (props.project.project_type !== 'mod' || v.loaders.includes(props.instance.metadata.loader))
-    )
-  }
-
-  if (props.project.project_type === 'modpack') {
-    const packs = Object.values(await list().catch(handleError))
-    if (
-      packs.length === 0 ||
-      !packs
-        .map((value) => value.metadata)
-        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
-    ) {
-      await packInstall(
-        props.project.project_id,
-        queuedVersionData.id,
-        props.project.title,
-        props.project.icon_url
-      ).catch(handleError)
-
-      mixpanel_track('PackInstall', {
-        id: props.project.project_id,
-        version_id: queuedVersionData.id,
-        title: props.project.title,
-        source: 'SearchCard',
-      })
-    } else {
-      props.confirmModal.show(
-        props.project.project_id,
-        queuedVersionData.id,
-        props.project.title,
-        props.project.icon_url
-      )
-    }
-  } else {
-    if (props.instance) {
-      if (!queuedVersionData) {
-        props.incompatibilityWarningModal.show(
-          props.instance,
-          props.project.title,
-          versions,
-          () => (installed.value = true),
-          props.project.project_id,
-          props.project.project_type
-        )
-        installing.value = false
-        return
-      } else {
-        await installMod(props.instance.path, queuedVersionData.id).catch(handleError)
-        await installVersionDependencies(props.instance, queuedVersionData)
-
-        mixpanel_track('ProjectInstall', {
-          loader: props.instance.metadata.loader,
-          game_version: props.instance.metadata.game_version,
-          id: props.project.project_id,
-          project_type: props.project.project_type,
-          version_id: queuedVersionData.id,
-          title: props.project.title,
-          source: 'SearchCard',
-        })
-      }
-    } else {
-      props.modInstallModal.show(
-        props.project.project_id,
-        versions,
-        props.project.title,
-        props.project.project_type
-      )
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'SearchCard',
+    (version) => {
       installing.value = false
-      return
-    }
-    if (props.instance) installed.value = true
-  }
 
-  installing.value = false
+      if (props.instance && version) {
+        installed.value = true
+      }
+    },
+  )
 }
 </script>
 

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

@@ -1,48 +1,35 @@
 <script setup>
-import { Modal, Button } from 'omorphia'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
-import { useFetch } from '@/helpers/fetch.js'
 import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_categories } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
-import { install as packInstall } from '@/helpers/pack.js'
-import mixpanel from 'mixpanel-browser'
-import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+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'
 
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
 const categories = ref(null)
 const installing = ref(false)
-const modInstallModal = ref(null)
 
 defineExpose({
   async show(event) {
     if (event.event === 'InstallVersion') {
-      version.value = await useFetch(
-        `https://api.modrinth.com/v2/version/${encodeURIComponent(event.id)}`,
-        'version'
-      )
-      project.value = await useFetch(
-        `https://api.modrinth.com/v2/project/${encodeURIComponent(version.value.project_id)}`,
-        'project'
+      version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
+      project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+        handleError,
       )
     } else {
-      project.value = await useFetch(
-        `https://api.modrinth.com/v2/project/${encodeURIComponent(event.id)}`,
-        'project'
-      )
-      version.value = await useFetch(
-        `https://api.modrinth.com/v2/version/${encodeURIComponent(project.value.versions[0])}`,
-        'version'
-      )
+      project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+      version.value = await get_version(
+        project.value.versions[project.value.versions.length - 1],
+        'must_revalidate',
+      ).catch(handleError)
     }
     categories.value = (await get_categories().catch(handleError)).filter(
-      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod'
-    )
-    confirmModal.value.show()
-    categories.value = (await get_categories().catch(handleError)).filter(
-      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod'
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
     )
     confirmModal.value.show()
   },
@@ -50,33 +37,12 @@ defineExpose({
 
 async function install() {
   confirmModal.value.hide()
-  if (project.value.project_type === 'modpack') {
-    await packInstall(
-      project.value.id,
-      version.value.id,
-      project.value.title,
-      project.value.icon_url
-    ).catch(handleError)
-
-    mixpanel.track('PackInstall', {
-      id: project.value.id,
-      version_id: version.value.id,
-      title: project.value.title,
-      source: 'ProjectPage',
-    })
-  } else {
-    modInstallModal.value.show(
-      project.value.id,
-      [version.value],
-      project.value.title,
-      project.value.project_type
-    )
-  }
+  await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
 }
 </script>
 
 <template>
-  <Modal ref="confirmModal" :header="`Install ${project?.title}`">
+  <ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
     <div class="modal-body">
       <SearchCard
         :project="project"
@@ -95,8 +61,7 @@ async function install() {
         </div>
       </div>
     </div>
-  </Modal>
-  <ModInstallModal ref="modInstallModal" />
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -1,9 +1,5 @@
 <template>
-  <Modal
-    ref="incompatibleModal"
-    header="Incompatibility warning"
-    :noblur="!themeStore.advancedRendering"
-  >
+  <ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
     <div class="modal-body">
       <p>
         This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
@@ -12,13 +8,11 @@
       </p>
       <table>
         <tr class="header">
-          <th>{{ instance?.metadata.name }}</th>
-          <th>{{ projectTitle }}</th>
+          <th>{{ instance?.name }}</th>
+          <th>{{ project.title }}</th>
         </tr>
         <tr class="content">
-          <td class="data">
-            {{ instance?.metadata.loader }} {{ instance?.metadata.game_version }}
-          </td>
+          <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
           <td>
             <DropdownSelect
               v-if="versions?.length > 1"
@@ -52,50 +46,42 @@
         </Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <script setup>
-import { Button, Modal, XIcon, DownloadIcon, DropdownSelect, formatCategory } from 'omorphia'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, DropdownSelect } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
-import { handleError, useTheming } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
-
-const themeStore = useTheming()
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const instance = ref(null)
 const project = ref(null)
-const projectType = ref(null)
-const projectTitle = ref(null)
 const versions = ref(null)
 const selectedVersion = ref(null)
 const incompatibleModal = ref(null)
 const installing = ref(false)
 
-let markInstalled = () => {}
+const onInstall = ref(() => {})
 
 defineExpose({
-  show: (
-    instanceVal,
-    projectTitleVal,
-    selectedVersions,
-    extMarkInstalled,
-    projectIdVal,
-    projectTypeVal
-  ) => {
+  show: (instanceVal, projectVal, projectVersions, callback) => {
     instance.value = instanceVal
-    projectTitle.value = projectTitleVal
-    versions.value = selectedVersions
-    selectedVersion.value = selectedVersions[0]
+    versions.value = projectVersions
+    selectedVersion.value = projectVersions[0]
 
-    project.value = projectIdVal
-    projectType.value = projectTypeVal
+    project.value = projectVal
+
+    onInstall.value = callback
+    installing.value = false
 
     incompatibleModal.value.show()
-    markInstalled = extMarkInstalled
 
-    mixpanel_track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+    trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
   },
 })
 
@@ -103,16 +89,16 @@ const install = async () => {
   installing.value = true
   await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
   installing.value = false
-  markInstalled()
+  onInstall.value(selectedVersion.value.id)
   incompatibleModal.value.hide()
 
-  mixpanel_track('ProjectInstall', {
-    loader: instance.value.metadata.loader,
-    game_version: instance.value.metadata.game_version,
+  trackEvent('ProjectInstall', {
+    loader: instance.value.loader,
+    game_version: instance.value.game_version,
     id: project.value,
     version_id: selectedVersion.value.id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
     source: 'ProjectIncompatibilityWarningModal',
   })
 }

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

@@ -1,54 +1,56 @@
 <script setup>
-import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import { useTheming } from '@/store/theme.js'
+import { trackEvent } from '@/helpers/analytics'
 import { handleError } from '@/store/state.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
-const themeStore = useTheming()
-
-const version = ref('')
-const title = ref('')
-const projectId = ref('')
-const icon = ref('')
+const versionId = ref()
+const project = ref()
 const confirmModal = ref(null)
 const installing = ref(false)
 
+const onInstall = ref(() => {})
+
 defineExpose({
-  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
-    projectId.value = projectIdVal
-    version.value = versionId
-    title.value = projectTitle
-    icon.value = projectIcon
+  show: (projectVal, versionIdVal, callback) => {
+    project.value = projectVal
+    versionId.value = versionIdVal
     installing.value = false
     confirmModal.value.show()
 
-    mixpanel_track('PackInstallStart')
+    onInstall.value = callback
+
+    trackEvent('PackInstallStart')
   },
 })
 
 async function install() {
   installing.value = true
-  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
   confirmModal.value.hide()
+
   await pack_install(
-    projectId.value,
-    version.value,
-    title.value,
-    icon.value ? icon.value : null
+    project.value.id,
+    versionId.value,
+    project.value.title,
+    project.value.icon_url,
   ).catch(handleError)
-  mixpanel_track('PackInstall', {
-    id: projectId.value,
-    version_id: version.value,
-    title: title.value,
+  trackEvent('PackInstall', {
+    id: project.value.id,
+    version_id: versionId.value,
+    title: project.value.title,
     source: 'ConfirmModal',
   })
+
+  onInstall.value(versionId.value)
+  installing.value = false
 }
 </script>
 
 <template>
-  <Modal ref="confirmModal" header="Are you sure?" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
     <div class="modal-body">
       <p>You already have this modpack installed. Are you sure you want to install it again?</p>
       <div class="input-group push-right">
@@ -58,7 +60,7 @@ async function install() {
         >
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,42 +1,37 @@
 <script setup>
 import {
-  Avatar,
-  Modal,
-  Button,
   DownloadIcon,
   PlusIcon,
-  Card,
   UploadIcon,
   XIcon,
   RightArrowIcon,
   CheckIcon,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 import {
   add_project_from_version as installMod,
   check_installed,
   get,
   list,
+  create,
 } from '@/helpers/profile'
-import { open } from '@tauri-apps/api/dialog'
-import { create } from '@/helpers/profile'
-import { installVersionDependencies } from '@/helpers/utils'
+import { open } from '@tauri-apps/plugin-dialog'
+import { installVersionDependencies } from '@/store/install.js'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import { useTheming } from '@/store/theme.js'
 import { useRouter } from 'vue-router'
-import { tauri } from '@tauri-apps/api'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
-const themeStore = useTheming()
 const router = useRouter()
 
-const versions = ref([])
-const project = ref('')
-const projectTitle = ref('')
-const projectType = ref('')
+const versions = ref()
+const project = ref()
 
-const installModal = ref(null)
+const installModal = ref()
 const searchFilter = ref('')
+
 const showCreation = ref(false)
 const icon = ref(null)
 const name = ref(null)
@@ -45,33 +40,65 @@ const loader = ref(null)
 const gameVersion = ref(null)
 const creatingInstance = ref(false)
 
-defineExpose({
-  show: async (projectId, selectedVersions, title, type) => {
-    project.value = projectId
-    versions.value = selectedVersions
-    projectTitle.value = title
-    projectType.value = type
+const profiles = ref([])
 
-    installModal.value.show()
+const shownProfiles = computed(() =>
+  profiles.value
+    .filter((profile) => {
+      return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      const loaders = versions.value.flatMap((v) => v.loaders)
+
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
+        (project.value.project_type === 'mod'
+          ? loaders.includes(profile.loader) || loaders.includes('minecraft')
+          : true)
+      )
+    }),
+)
+
+const onInstall = ref(() => {})
+
+defineExpose({
+  show: async (projectVal, versionsVal, callback) => {
+    project.value = projectVal
+    versions.value = versionsVal
     searchFilter.value = ''
 
-    profiles.value = await getData()
+    showCreation.value = false
+    name.value = null
+    icon.value = null
+    display_icon.value = null
+    gameVersion.value = null
+    loader.value = null
 
-    mixpanel_track('ProjectInstallStart', { source: 'ProjectInstallModal' })
+    onInstall.value = callback
+
+    const profilesVal = await list().catch(handleError)
+    for (const profile of profilesVal) {
+      profile.installing = false
+      profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+        handleError,
+      )
+    }
+    profiles.value = profilesVal
+
+    installModal.value.show()
+
+    trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
   },
 })
 
-const profiles = ref([])
-
 async function install(instance) {
   instance.installing = true
   const version = versions.value.find((v) => {
     return (
-      v.game_versions.includes(instance.metadata.game_version) &&
-      (v.loaders.includes(instance.metadata.loader) ||
-        v.loaders.includes('minecraft') ||
-        v.loaders.includes('iris') ||
-        v.loaders.includes('optifine'))
+      v.game_versions.includes(instance.game_version) &&
+      (project.value.project_type === 'mod'
+        ? v.loaders.includes(instance.loader) || v.loaders.includes('minecraft')
+        : true)
     )
   })
 
@@ -87,45 +114,19 @@ async function install(instance) {
   instance.installedMod = true
   instance.installing = false
 
-  mixpanel_track('ProjectInstall', {
-    loader: instance.metadata.loader,
-    game_version: instance.metadata.game_version,
-    id: project.value,
+  trackEvent('ProjectInstall', {
+    loader: instance.loader,
+    game_version: instance.game_version,
+    id: project.value.id,
     version_id: version.id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
     source: 'ProjectInstallModal',
   })
+
+  onInstall.value(version.id)
 }
 
-async function getData() {
-  const projects = await list(true).then(Object.values).catch(handleError)
-
-  const filtered = projects
-    .filter((profile) => {
-      return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-    })
-    .filter((profile) => {
-      return (
-        versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
-        versions.value
-          .flatMap((v) => v.loaders)
-          .some(
-            (value) =>
-              value === profile.metadata.loader || ['minecraft', 'iris', 'optifine'].includes(value)
-          )
-      )
-    })
-
-  for (let profile of filtered) {
-    profile.installing = false
-    profile.installedMod = await check_installed(profile.path, project.value).catch(handleError)
-  }
-
-  return filtered
-}
-
-const alreadySentCreation = ref(false)
 const toggleCreation = () => {
   showCreation.value = !showCreation.value
   name.value = null
@@ -134,14 +135,13 @@ const toggleCreation = () => {
   gameVersion.value = null
   loader.value = null
 
-  if (!alreadySentCreation.value) {
-    alreadySentCreation.value = false
-    mixpanel_track('InstanceCreateStart', { source: 'ProjectInstallModal' })
+  if (showCreation.value) {
+    trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
   }
 }
 
 const upload_icon = async () => {
-  icon.value = await open({
+  const res = await open({
     multiple: false,
     filters: [
       {
@@ -150,9 +150,10 @@ const upload_icon = async () => {
       },
     ],
   })
+  icon.value = res.path ?? res
 
   if (!icon.value) return
-  display_icon.value = tauri.convertFileSrc(icon.value)
+  display_icon.value = convertFileSrc(icon.value)
 }
 
 const reset_icon = () => {
@@ -175,7 +176,7 @@ const createInstance = async () => {
     versions.value[0].game_versions[0],
     loader,
     'latest',
-    icon.value
+    icon.value,
   ).catch(handleError)
 
   await installMod(id, versions.value[0].id).catch(handleError)
@@ -185,7 +186,7 @@ const createInstance = async () => {
   const instance = await get(id, true)
   await installVersionDependencies(instance, versions.value[0])
 
-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
     profile_name: name.value,
     game_version: versions.value[0].game_versions[0],
     loader: loader,
@@ -194,31 +195,25 @@ const createInstance = async () => {
     source: 'ProjectInstallModal',
   })
 
-  mixpanel_track('ProjectInstall', {
+  trackEvent('ProjectInstall', {
     loader: loader,
     game_version: versions.value[0].game_versions[0],
     id: project.value,
     version_id: versions.value[0].id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
     source: 'ProjectInstallModal',
   })
 
+  onInstall.value(versions.value[0].id)
+
   if (installModal.value) installModal.value.hide()
   creatingInstance.value = false
 }
-
-const check_valid = computed(() => {
-  return name.value
-})
 </script>
 
 <template>
-  <Modal
-    ref="installModal"
-    header="Install project to instance"
-    :noblur="!themeStore.advancedRendering"
-  >
+  <ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
     <div class="modal-body">
       <input
         v-model="searchFilter"
@@ -228,34 +223,27 @@ const check_valid = computed(() => {
         placeholder="Search for an instance"
       />
       <div class="profiles" :class="{ 'hide-creation': !showCreation }">
-        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
-          <Button
-            color="raised"
-            class="profile-button"
-            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
+        <div v-for="profile in shownProfiles" :key="profile.name" class="option">
+          <router-link
+            class="btn btn-transparent profile-button"
+            :to="`/instance/${encodeURIComponent(profile.path)}`"
+            @click="installModal.hide()"
           >
             <Avatar
-              :src="
-                !profile.metadata.icon ||
-                (profile.metadata.icon && profile.metadata.icon.startsWith('http'))
-                  ? profile.metadata.icon
-                  : tauri.convertFileSrc(profile.metadata?.icon)
-              "
+              :src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
               class="profile-image"
             />
-            {{ profile.metadata.name }}
-          </Button>
+            {{ profile.name }}
+          </router-link>
           <div
             v-tooltip="
-              profile.metadata.linked_data?.locked && !profile.installedMod
+              profile.linked_data?.locked && !profile.installedMod
                 ? 'Unpair or unlock an instance to add mods.'
                 : ''
             "
           >
             <Button
-              :disabled="
-                profile.installedMod || profile.installing || profile.metadata.linked_data?.locked
-              "
+              :disabled="profile.installedMod || profile.installing || profile.linked_data?.locked"
               @click="install(profile)"
             >
               <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
@@ -264,10 +252,10 @@ const check_valid = computed(() => {
                 profile.installing
                   ? 'Installing...'
                   : profile.installedMod
-                  ? 'Installed'
-                  : profile.metadata.linked_data && profile.metadata.linked_data.locked
-                  ? 'Paired'
-                  : 'Install'
+                    ? 'Installed'
+                    : profile.linked_data && profile.linked_data.locked
+                      ? 'Paired'
+                      : 'Install'
               }}
             </Button>
           </div>
@@ -296,7 +284,7 @@ const check_valid = computed(() => {
               placeholder="Name"
               class="creation-input"
             />
-            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+            <Button :disabled="creatingInstance === true || !name" @click="createInstance()">
               <RightArrowIcon />
               {{ creatingInstance ? 'Creating...' : 'Create' }}
             </Button>
@@ -311,7 +299,7 @@ const check_valid = computed(() => {
         <Button @click="installModal.hide()">Cancel</Button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ConfirmModal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+defineProps({
+  confirmationText: {
+    type: String,
+    default: '',
+  },
+  hasToType: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: 'No title defined',
+    required: true,
+  },
+  description: {
+    type: String,
+    default: 'No description defined',
+    required: true,
+  },
+  proceedLabel: {
+    type: String,
+    default: 'Proceed',
+  },
+})
+
+const emit = defineEmits(['proceed'])
+const modal = ref(null)
+
+defineExpose({
+  show: () => {
+    hide_ads_window()
+    modal.value.show()
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+}
+
+function proceed() {
+  emit('proceed')
+}
+</script>
+
+<template>
+  <ConfirmModal
+    ref="modal"
+    :confirmation-text="confirmationText"
+    :has-to-type="hasToType"
+    :title="title"
+    :description="description"
+    :proceed-label="proceedLabel"
+    :on-hide="onModalHide"
+    :noblur="!themeStore.advancedRendering"
+    @proceed="proceed"
+  />
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Modal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: null,
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  onHide: {
+    type: Function,
+    default() {
+      return () => {}
+    },
+  },
+})
+
+const modal = ref(null)
+
+defineExpose({
+  show: () => {
+    hide_ads_window()
+    modal.value.show()
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+  props.onHide()
+}
+</script>
+
+<template>
+  <Modal ref="modal" :header="header" :noblur="!themeStore.advancedRendering" @hide="onModalHide">
+    <slot />
+  </Modal>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShareModal } from '@modrinth/ui'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+defineProps({
+  header: {
+    type: String,
+    default: 'Share',
+  },
+  shareTitle: {
+    type: String,
+    default: 'Modrinth',
+  },
+  shareText: {
+    type: String,
+    default: null,
+  },
+  link: {
+    type: Boolean,
+    default: false,
+  },
+  openInNewTab: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const modal = ref(null)
+
+defineExpose({
+  show: (passedContent) => {
+    hide_ads_window()
+    modal.value.show(passedContent)
+  },
+  hide: () => {
+    onModalHide()
+    modal.value.hide()
+  },
+})
+
+function onModalHide() {
+  show_ads_window()
+}
+</script>
+
+<template>
+  <ShareModal
+    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/tutorial/ModrinthLoginScreen.vue

@@ -0,0 +1,368 @@
+<script setup>
+import { UserIcon, LockIcon, MailIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox } from '@modrinth/ui'
+import {
+  DiscordIcon,
+  GithubIcon,
+  MicrosoftIcon,
+  GoogleIcon,
+  SteamIcon,
+  GitLabIcon,
+} from '@/assets/external'
+import { login, login_2fa, create_account, login_pass } from '@/helpers/mr_auth.js'
+import { handleError, useNotifications } from '@/store/state.js'
+import { ref } from 'vue'
+import { handleSevereError } from '@/store/error.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+const props = defineProps({
+  callback: {
+    type: Function,
+    required: true,
+  },
+})
+
+const modal = ref()
+const turnstileToken = ref()
+const widgetId = ref()
+
+defineExpose({
+  show: () => {
+    modal.value.show()
+
+    if (window.turnstile === null || !window.turnstile) {
+      const script = document.createElement('script')
+      script.src =
+        'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback'
+      script.async = true
+      script.defer = true
+      document.head.appendChild(script)
+
+      window.onloadTurnstileCallback = loadWidget
+    } else {
+      loadWidget()
+    }
+  },
+})
+
+function loadWidget() {
+  widgetId.value = window.turnstile.render('#turnstile-container', {
+    sitekey: '0x4AAAAAAAW3guHM6Eunbgwu',
+    callback: (token) => (turnstileToken.value = token),
+    expiredCallback: () => (turnstileToken.value = null),
+  })
+}
+
+function removeWidget() {
+  if (widgetId.value) {
+    window.turnstile.remove(widgetId.value)
+    widgetId.value = null
+    turnstileToken.value = null
+  }
+}
+
+const loggingIn = ref(true)
+const twoFactorFlow = ref(null)
+const twoFactorCode = ref('')
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const subscribe = ref(true)
+
+async function signInOauth(provider) {
+  const creds = await login(provider).catch(handleSevereError)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function signIn2fa() {
+  const creds = await login_2fa(twoFactorCode.value, twoFactorFlow.value).catch(handleError)
+
+  if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function signIn() {
+  const creds = await login_pass(username.value, password.value, turnstileToken.value).catch(
+    handleError,
+  )
+  window.turnstile.reset(widgetId.value)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function createAccount() {
+  if (password.value !== confirmPassword.value) {
+    const notifs = useNotifications()
+    notifs.addNotification({
+      title: 'An error occurred',
+      text: 'Passwords do not match!',
+      type: 'error',
+    })
+    return
+  }
+
+  const creds = await create_account(
+    username.value,
+    email.value,
+    password.value,
+    turnstileToken.value,
+    subscribe.value,
+  ).catch(handleError)
+  window.turnstile.reset(widgetId.value)
+
+  if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+</script>
+
+<template>
+  <ModalWrapper ref="modal" :on-hide="removeWidget">
+    <Card>
+      <template v-if="twoFactorFlow">
+        <h1>Enter two-factor code</h1>
+        <p>Please enter a two-factor code to proceed.</p>
+        <input v-model="twoFactorCode" maxlength="11" type="text" placeholder="Enter code..." />
+      </template>
+      <template v-else>
+        <h1 v-if="loggingIn">Login to Modrinth</h1>
+        <h1 v-else>Create an account</h1>
+        <div class="button-grid">
+          <Button class="discord" large @click="signInOauth('discord')">
+            <DiscordIcon />
+            Discord
+          </Button>
+          <Button class="github" large @click="signInOauth('github')">
+            <GithubIcon />
+            Github
+          </Button>
+          <Button class="white" large @click="signInOauth('microsoft')">
+            <MicrosoftIcon />
+            Microsoft
+          </Button>
+          <Button class="google" large @click="signInOauth('google')">
+            <GoogleIcon />
+            Google
+          </Button>
+          <Button class="white" large @click="signInOauth('steam')">
+            <SteamIcon />
+            Steam
+          </Button>
+          <Button class="gitlab" large @click="signInOauth('gitlab')">
+            <GitLabIcon />
+            GitLab
+          </Button>
+        </div>
+        <div class="divider">
+          <hr />
+          <p>Or</p>
+        </div>
+        <div v-if="!loggingIn" class="iconified-input username">
+          <MailIcon />
+          <input v-model="email" type="text" placeholder="Email" />
+        </div>
+        <div class="iconified-input username">
+          <UserIcon />
+          <input
+            v-model="username"
+            type="text"
+            :placeholder="loggingIn ? 'Email or username' : 'Username'"
+          />
+        </div>
+        <div class="iconified-input" :class="{ username: !loggingIn }">
+          <LockIcon />
+          <input v-model="password" type="password" placeholder="Password" />
+        </div>
+        <div v-if="!loggingIn" class="iconified-input username">
+          <LockIcon />
+          <input v-model="confirmPassword" type="password" placeholder="Confirm password" />
+        </div>
+        <div class="turnstile">
+          <div id="turnstile-container"></div>
+          <div id="turnstile-container-2"></div>
+        </div>
+        <Checkbox
+          v-if="!loggingIn"
+          v-model="subscribe"
+          class="subscribe-btn"
+          label="Subscribe to updates about Modrinth"
+        />
+        <div class="link-row">
+          <a v-if="loggingIn" class="button-base" @click="loggingIn = false"> Create account </a>
+          <a v-else class="button-base" @click="loggingIn = true">Sign in</a>
+          <a class="button-base" href="https://modrinth.com/auth/reset-password">
+            Forgot password?
+          </a>
+        </div>
+      </template>
+      <div class="button-row">
+        <Button class="transparent" large>Close</Button>
+        <Button v-if="twoFactorCode" color="primary" large @click="signIn2fa"> Login </Button>
+        <Button
+          v-else-if="loggingIn"
+          color="primary"
+          large
+          :disabled="!turnstileToken"
+          @click="signIn"
+        >
+          Login
+        </Button>
+        <Button v-else color="primary" large :disabled="!turnstileToken" @click="createAccount">
+          Create account
+        </Button>
+      </div>
+    </Card>
+  </ModalWrapper>
+</template>
+
+<style scoped lang="scss">
+:deep(.modal-container) {
+  .modal-body {
+    width: auto;
+
+    .content {
+      background: none;
+    }
+  }
+}
+
+.card {
+  width: 25rem;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--gap-md);
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .discord {
+    background-color: #5865f2;
+    color: var(--color-contrast);
+  }
+
+  .github {
+    background-color: #8740f1;
+    color: var(--color-contrast);
+  }
+
+  .white {
+    background-color: var(--color-contrast);
+    color: var(--color-accent-contrast);
+  }
+
+  .google {
+    background-color: #4285f4;
+    color: var(--color-contrast);
+  }
+
+  .gitlab {
+    background-color: #fc6d26;
+    color: var(--color-contrast);
+  }
+}
+
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--gap-md) 0;
+
+  p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-raised-bg);
+    padding: 0 1rem;
+    margin: 0;
+  }
+
+  hr {
+    border: none;
+    width: 100%;
+    border-top: 2px solid var(--color-button-bg);
+  }
+}
+
+.iconified-input {
+  width: 100%;
+
+  input {
+    width: 100%;
+    flex-basis: auto;
+  }
+}
+
+.username {
+  margin-bottom: var(--gap-sm);
+}
+
+.link-row {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--gap-md) 0;
+
+  a {
+    color: var(--color-blue);
+    text-decoration: underline;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+
+  .btn {
+    flex-basis: auto;
+  }
+
+  .transparent {
+    padding: var(--gap-md) 0;
+  }
+}
+
+:deep(.checkbox) {
+  border: none;
+}
+
+.turnstile {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-button-bg);
+  height: 66px;
+  margin-top: var(--gap-md);
+
+  iframe {
+    margin: -1px;
+    min-width: calc(100% + 2px);
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+import { invoke } from '@tauri-apps/api/core'
+import cssContent from '@/assets/stylesheets/macFix.css?inline'
+
+export async function useCheckDisableMouseover() {
+  try {
+    // Fetch the CSS content from the Rust backend
+    let should_disable_mouseover = await invoke('plugin:utils|should_disable_mouseover')
+
+    if (should_disable_mouseover) {
+      // Create a style element and set its content
+      const styleElement = document.createElement('style')
+      styleElement.innerHTML = cssContent
+
+      // Append the style element to the document's head
+      document.head.appendChild(styleElement)
+    }
+  } catch (error) {
+    console.error('Error checking OS version from Rust backend', error)
+  }
+}