Initial draft

Fix forge versions being reversed
feat(marketing): miami, overallocation card, misc fixes (#2926 )
2024-11-08 17:42:41 -08:00 · 2024-11-08 16:26:02 -08:00 · 2024-11-08 23:52:32 +00:00 · 2024-11-07 19:08:12 -08:00 · 2024-11-07 19:01:53 -08:00 · 2024-11-08 02:25:02 +00:00
1889 changed files with 228563 additions and 23078 deletions
@@ -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"]
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,43 @@
+name: daedalus-docker-build
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - .github/workflows/daedalus-docker.yml
+      - 'apps/daedalus_client/**'
+  pull_request:
+    types: [ opened, synchronize ]
+    paths:
+      - .github/workflows/daedalus-docker.yml
+      - 'apps/daedalus_client/**'
+  merge_group:
+    types: [ checks_requested ]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Fetch docker metadata
+        id: docker_meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ghcr.io/modrinth/daedalus
+      -
+        name: Login to GitHub Images
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      -
+        name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          file: ./apps/daedalus_client/Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
@@ -0,0 +1,52 @@
+name: Run Meta
+
+on:
+  schedule:
+    - cron: '*/5 * * * *'
+  workflow_dispatch:
+
+jobs:
+  run-docker:
+    if: github.repository_owner == 'modrinth'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+
+      - name: Pull Docker image from GHCR
+        run: docker pull ghcr.io/modrinth/daedalus:main
+
+      - name: Run Docker container
+        env:
+          BASE_URL: ${{ secrets.BASE_URL }}
+          S3_ACCESS_TOKEN: ${{ secrets.S3_ACCESS_TOKEN }}
+          S3_SECRET: ${{ secrets.S3_SECRET }}
+          S3_URL: ${{ secrets.S3_URL }}
+          S3_REGION: ${{ secrets.S3_REGION }}
+          S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }}
+          CLOUDFLARE_INTEGRATION: ${{ secrets.CLOUDFLARE_INTEGRATION }}
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
+          CLOUDFLARE_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+        run: |
+          docker run \
+            --name daedalus \
+            -e RUST_LOG=warn,daedalus_client=trace \
+            -e BASE_URL=$BASE_URL \
+            -e S3_ACCESS_TOKEN=$S3_ACCESS_TOKEN \
+            -e S3_SECRET=$S3_SECRET \
+            -e S3_URL=$S3_URL \
+            -e S3_REGION=$S3_REGION \
+            -e S3_BUCKET_NAME=$S3_BUCKET_NAME \
+            -e CLOUDFLARE_INTEGRATION=$CLOUDFLARE_INTEGRATION \
+            -e CLOUDFLARE_TOKEN=$CLOUDFLARE_TOKEN \
+            -e CLOUDFLARE_ZONE_ID=$CLOUDFLARE_ZONE_ID \
+            ghcr.io/modrinth/daedalus:main
@@ -0,0 +1,30 @@
+name: Clear pages cache
+
+on:
+  push:
+    branches:
+      - prod
+
+jobs:
+  wait:
+    if: github.repository_owner == 'modrinth'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    steps:
+      - name: Cloudflare Pages deployment
+        uses: WalshyDev/cf-pages-await@v1
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: '9ddae624c98677d68d93df6e524a6061'
+          project: 'frontend'
+          commitHash: ${{ steps.push-changes.outputs.commit-hash }}
+      - name: Purge cache
+        if: github.ref == 'refs/heads/prod'
+        run: |
+          curl -X POST \
+            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            --data '{"hosts": ["modrinth.com", "www.modrinth.com"]}' \
+            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
@@ -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
@@ -0,0 +1,46 @@
+name: docker-build
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - .github/workflows/labrinth-docker.yml
+      - 'apps/labrinth/**'
+  pull_request:
+    types: [ opened, synchronize ]
+    paths:
+      - .github/workflows/labrinth-docker.yml
+      - 'apps/labrinth/**'
+  merge_group:
+    types: [ checks_requested ]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/labrinth
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Fetch docker metadata
+        id: docker_meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ghcr.io/modrinth/labrinth
+      -
+        name: Login to GitHub Images
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      -
+        name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: ./apps/labrinth
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}
@@ -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') }}"
@@ -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
@@ -0,0 +1,80 @@
+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
+        env:
+          SQLX_OFFLINE: true
+
+      - name: Lint
+        run: pnpm lint
+        env:
+          SQLX_OFFLINE: true
+
+      - name: Start docker compose
+        run: docker compose up -d
+
+      - name: Test
+        run: pnpm test
+        env:
+          SQLX_OFFLINE: true
+          DATABASE_URL: postgresql://labrinth:labrinth@localhost/postgres
@@ -1,114 +1,63 @@
-/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
+.turbo
+target
+generated
+.env

-### 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
+# app testing dir
+app-playground-data/*

-# 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
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env

+.astro
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/daedalus_client_new/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/apps/daedalus_client/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/daedalus/src" isTestSource="false" />
+      <excludeFolder url="file://$MODULE_DIR$/target" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+    <option name="description" value="" />
+  </component>
+</project>
@@ -0,0 +1,26 @@
+<component name="libraryTable">
+  <library name="KotlinJavaRuntime" type="repository">
+    <properties maven-id="org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.0" />
+    <CLASSES>
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0.jar!/" />
+    </CLASSES>
+    <JAVADOC>
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-javadoc.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-javadoc.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-javadoc.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-javadoc.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-javadoc.jar!/" />
+    </JAVADOC>
+    <SOURCES>
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-sources.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-sources.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-sources.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-sources.jar!/" />
+      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-sources.jar!/" />
+    </SOURCES>
+  </library>
+</component>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/daedalus.iml" filepath="$PROJECT_DIR$/.idea/daedalus.iml" />
+    </modules>
+  </component>
+</project>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+auto-install-peers=true
@@ -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"]
+}
@@ -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"
-          }      
-    ]
-}
@@ -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"
+  }
+}
@@ -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"
-      }
-    }
-  ]
-
-}
@@ -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.
@@ -1,24 +1,14 @@
 [workspace]
-
+resolver = '2'
 members = [
-    "theseus",
-    "theseus_cli",
-    "theseus_playground",
-    "theseus_gui/src-tauri",
-    "theseus_macros"
+  './packages/app-lib',
+	'./apps/app-playground',
+  './apps/app',
+  './apps/labrinth',
+    './apps/daedalus_client',
+    './packages/daedalus',
 ]

-[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 +16,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" }
@@ -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://docs.modrinth.com/contributing/getting-started/).
+
+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.
@@ -0,0 +1 @@
+**/dist
@@ -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/\*
@@ -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',
+    },
+  },
+])
@@ -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>
@@ -0,0 +1,54 @@
+{
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.8.9",
+  "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"
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -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>
@@ -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';
@@ -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>
@@ -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 {
@@ -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,
      )
  },
 })
@@ -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
  }
 }

@@ -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>
@@ -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>
@@ -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')
 }
@@ -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>Ensuring 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>
@@ -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">
@@ -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>
@@ -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,42 +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 { listen } from '@tauri-apps/api/event'
+import { trackEvent } from '@/helpers/analytics'
 import { install_from_file } from '@/helpers/pack.js'
 import {
  get_default_launcher_path,
@@ -236,8 +225,7 @@ import {
  import_instance,
 } from '@/helpers/import.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
-
-const themeStore = useTheming()
+import { getCurrentWebview } from '@tauri-apps/api/webview'

 const profile_name = ref('')
 const game_version = ref('')
@@ -267,20 +255,22 @@ defineExpose({
    isShowing.value = true
    modal.value.show()

-    unlistener.value = await listen('tauri://file-drop', async (event) => {
+    unlistener.value = await getCurrentWebview().onDragDropEvent(async (event) => {
      // Only if modal is showing
      if (!isShowing.value) return
+      if (event.payload.type !== 'drop') return
      if (creationType.value !== 'from file') return
      hide()
-      if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
-        await install_from_file(event.payload[0]).catch(handleError)
-        mixpanel_track('InstanceCreate', {
+      const { paths } = event.payload
+      if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
+        await install_from_file(paths[0]).catch(handleError)
+        trackEvent('InstanceCreate', {
          source: 'CreationModalFileDrop',
        })
      }
    })

-    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
+    trackEvent('InstanceCreateStart', { source: 'CreationModal' })
  },
 })

@@ -308,16 +298,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 +357,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 +371,7 @@ const create_instance = async () => {
 }

 const upload_icon = async () => {
-  icon.value = await open({
+  const res = await open({
    multiple: false,
    filters: [
      {
@@ -391,8 +381,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 +419,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 +433,7 @@ const profiles = ref(
    ['ATLauncher', []],
    ['Curseforge', []],
    ['PrismLauncher', []],
-  ])
+  ]),
 )

 const loading = ref(false)
@@ -470,9 +462,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 +481,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, [])
@@ -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,
  })
@@ -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 {
@@ -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">
@@ -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>

@@ -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>
@@ -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);
  }
 }

@@ -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>

@@ -0,0 +1,224 @@
+<template>
+  <div v-if="!hidden" class="splash-screen dark" :class="{ 'fade-out': doneLoading }">
+    <div v-if="os !== 'MacOS'" class="app-buttons">
+      <button class="btn icon-only transparent" icon-only @click="() => getCurrent().minimize()">
+        <MinimizeIcon />
+      </button>
+      <button class="btn icon-only transparent" @click="() => getCurrent().toggleMaximize()">
+        <MaximizeIcon />
+      </button>
+      <button class="btn icon-only transparent" @click="handleClose">
+        <XIcon />
+      </button>
+    </div>
+    <div class="app-logo-wrapper" data-tauri-drag-region>
+      <svg
+        class="app-logo"
+        viewBox="0 0 1215 175"
+        xml:space="preserve"
+        style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
+        color="var(--color-contrast)"
+      >
+        <g transform="matrix(1,0,0,1,-3395.45,-1175)">
+          <g transform="matrix(0.632704,0,0,0.161619,3395.45,1175)">
+            <rect
+              id="modrinth-app-logo"
+              x="0"
+              y="0"
+              width="1920"
+              height="1080"
+              style="fill: none"
+            />
+            <g id="modrinth-app-logo1">
+              <g transform="matrix(1.26353,0,0,3.23025,-514.757,-837.171)">
+                <g transform="matrix(1.25087,0,0,1.91545,-240.84,-608.008)">
+                  <g transform="matrix(0.273005,0,0,0.273005,523.782,459.389)">
+                    <path
+                      d="M1053.02,205.51C1088.61,205.51 1117.29,215.61 1138,236.32C1158.72,257.57 1169.34,288.37 1169.34,329.8L1169.34,492.33L1102.94,492.33L1102.94,338.3C1102.94,313.34 1097.64,294.75 1086.48,282C1075.33,269.78 1059.93,263.4 1039.21,263.4C1016.91,263.4 998.84,270.85 985.56,285.19C972.29,300.06 965.38,321.3 965.38,348.39L965.38,492.33L898.98,492.33L898.98,338.3C898.98,313.34 893.68,294.75 882.52,282C871.37,269.78 855.96,263.4 835.25,263.4C812.41,263.4 794.88,270.85 781.6,285.19C768.33,299.53 761.42,320.77 761.42,348.39L761.42,492.33L695.02,492.33L695.02,208.7L758.23,208.7L758.23,244.82C768.86,232.07 782.13,222.52 798.07,215.61C814,208.71 831.53,205.51 851.18,205.51C872.43,205.51 891.55,209.23 908.02,217.2C924.48,225.7 937.23,237.38 946.79,252.79C958.48,237.91 973.35,226.23 991.94,217.73C1010.53,209.76 1030.71,205.51 1053.02,205.51ZM1382.86,496.05C1354.18,496.05 1328.16,489.68 1305.32,477.46C1282.84,465.588 1264.22,447.523 1251.67,425.41C1238.39,403.63 1232.02,378.67 1232.02,350.51C1232.02,322.37 1238.39,297.41 1251.67,275.63C1264.39,253.783 1282.98,235.93 1305.32,224.1C1328.16,211.89 1354.18,205.51 1382.86,205.51C1412.08,205.51 1438.1,211.89 1460.94,224.11C1483.78,236.32 1501.84,253.85 1515.12,275.63C1527.87,297.4 1534.24,322.37 1534.24,350.52C1534.24,378.67 1527.87,403.63 1515.12,425.41C1501.84,447.71 1483.78,465.24 1460.94,477.46C1438.1,489.68 1412.08,496.06 1382.86,496.06L1382.86,496.05ZM1382.86,439.22C1407.3,439.22 1427.48,431.25 1443.41,414.79C1459.35,398.32 1467.31,377.07 1467.31,350.52C1467.31,323.96 1459.35,302.72 1443.41,286.25C1427.48,269.78 1407.3,261.82 1382.86,261.82C1358.43,261.82 1338.25,269.78 1322.84,286.25C1306.91,302.71 1298.94,323.96 1298.94,350.52C1298.94,377.07 1306.91,398.32 1322.84,414.79C1338.24,431.25 1358.44,439.22 1382.86,439.22ZM1874.18,98.22L1874.18,492.33L1810.44,492.33L1810.44,455.68C1799.56,468.819 1785.73,479.196 1770.07,485.96C1753.61,492.86 1736.07,496.06 1716.42,496.06C1689.34,496.06 1664.9,490.21 1643.12,477.99C1621.35,465.78 1603.82,448.78 1591.6,426.47C1579.39,404.69 1573.01,379.2 1573.01,350.52C1573.01,321.84 1579.39,296.34 1591.61,274.56C1603.82,252.79 1621.35,235.79 1643.13,223.57C1664.9,211.36 1689.33,205.51 1716.43,205.51C1735.02,205.51 1752.54,208.71 1767.95,215.07C1783.28,221.396 1796.92,231.222 1807.78,243.76L1807.78,98.22L1874.18,98.22ZM1724.39,439.22C1740.33,439.22 1754.67,435.5 1767.42,428.06C1780.16,421.16 1790.25,410.54 1797.69,397.26C1805.13,383.98 1808.84,368.05 1808.84,350.52C1808.84,332.99 1805.13,317.06 1797.69,303.78C1790.25,290.5 1780.16,279.88 1767.42,272.44C1754.67,265.54 1740.32,261.82 1724.39,261.82C1708.46,261.82 1694.12,265.53 1681.37,272.44C1668.62,279.87 1658.53,290.5 1651.09,303.78C1643.66,317.06 1639.94,332.98 1639.94,350.52C1639.94,368.05 1643.66,383.98 1651.09,397.26C1658.53,410.54 1668.62,421.16 1681.37,428.06C1694.12,435.5 1708.46,439.22 1724.39,439.22ZM2022.9,250.13C2042.02,220.39 2075.48,205.51 2123.82,205.51L2123.82,268.72C2118.75,267.715 2113.59,267.18 2108.42,267.12C2082.39,267.12 2062.2,274.56 2047.86,289.44C2033.52,304.84 2026.08,326.62 2026.08,354.77L2026.08,492.33L1959.69,492.33L1959.69,208.7L2022.89,208.7L2022.89,250.13L2022.9,250.13ZM2178.52,208.7L2244.92,208.7L2244.92,492.33L2178.52,492.33L2178.52,208.7ZM2211.99,161.96C2199.77,161.96 2189.68,158.24 2181.71,150.28C2173.8,143.08 2169.35,132.817 2169.5,122.12C2169.5,110.97 2173.75,101.41 2181.71,93.44C2189.68,86.01 2199.77,82.29 2211.99,82.29C2224.2,82.29 2234.29,86.01 2242.26,92.91C2250.23,100.35 2254.48,109.38 2254.48,120.53C2254.48,132.22 2250.76,141.78 2242.79,149.74C2234.83,157.71 2224.2,161.96 2211.99,161.96ZM2491.37,205.51C2526.96,205.51 2555.64,216.14 2577.42,236.85C2599.2,257.57 2609.82,288.9 2609.82,329.8L2609.82,492.33L2543.42,492.33L2543.42,338.3C2543.42,313.34 2537.58,294.75 2525.9,282C2514.21,269.78 2497.75,263.4 2475.97,263.4C2451.54,263.4 2432.42,270.85 2418.07,285.19C2403.73,300.06 2396.83,321.3 2396.83,348.92L2396.83,492.33L2330.43,492.33L2330.43,208.7L2393.64,208.7L2393.64,245.35C2404.8,232.07 2418.61,222.51 2435.07,215.61C2451.54,208.71 2470.66,205.51 2491.37,205.51ZM2863.18,476.93C2854.87,483.572 2845.29,488.451 2835.03,491.27C2823.44,494.492 2811.46,496.101 2799.43,496.05C2768.1,496.05 2744.2,488.08 2727.2,471.62C2710.2,455.15 2701.7,431.78 2701.7,400.45L2701.7,263.94L2654.97,263.94L2654.97,210.83L2701.71,210.83L2701.71,146.03L2768.11,146.03L2768.11,210.83L2844.06,210.83L2844.06,263.94L2768.1,263.94L2768.1,398.85C2768.1,412.66 2771.29,423.28 2778.2,430.19C2785.1,437.63 2794.66,441.34 2807.4,441.34C2822.28,441.34 2834.5,437.63 2844.59,429.66L2863.18,476.93ZM3077.23,205.51C3112.82,205.51 3141.5,216.14 3163.28,236.85C3185.05,257.57 3195.68,288.9 3195.68,329.8L3195.68,492.33L3129.28,492.33L3129.28,338.3C3129.28,313.34 3123.44,294.75 3111.75,282C3100.07,269.78 3083.6,263.4 3061.83,263.4C3037.39,263.4 3018.27,270.85 3003.93,285.19C2989.59,300.06 2982.69,321.3 2982.69,348.92L2982.69,492.33L2916.29,492.33L2916.29,98.23L2982.69,98.23L2982.69,241.Line truncated
+                      style="fill: currentColor; fill-rule: nonzero"
+                    />
+                  </g>
+                  <g transform="matrix(0.273005,0,0,0.273005,523.782,459.389)">
+                    <path
+                      d="M29,424.4L217.2,311.45L200.05,265.97L253.8,210.76L321.73,196.12L341.4,220.33L310.08,252.05L282.78,260.65L263.26,280.7L272.82,307.3L292.22,327.9L319.58,320.62L339.05,299.24L381.56,285.77L394.23,314.27L350.36,368.05L276.86,391.32L243.89,354.62L55.06,467.94C46.1,456.41 35.67,440.08 29,424.4ZM572.03,194.15L422.53,234.47C430.77,256.39 433.48,269.27 435.76,283.47L584.99,243.21C582.61,227.27 578.34,211.04 572.03,194.15Z"
+                      style="fill: var(--color-brand)"
+                    />
+                    <path
+                      d="M51.28,316.13C61.87,441.13 166.82,539.43 294.55,539.43C391.06,539.43 474.57,483.31 514.18,401.97L562.79,418.8C516.01,520.14 413.44,590.55 294.55,590.55C138.6,590.55 10.71,469.38 0,316.13L51.28,316.13ZM0.78,265.24C15.86,116.36 141.73,0 294.56,0C457.53,0 589.84,132.31 589.84,295.28C589.84,321.42 586.44,346.77 580.04,370.91L531.56,354.13C536.324,334.876 538.725,315.114 538.71,295.28C538.71,160.53 429.31,51.13 294.56,51.13C169.98,51.13 67.07,144.63 52.24,265.24L0.78,265.24Z"
+                      style="fill: var(--color-brand)"
+                    />
+                    <path
+                      d="M293.77,153.17C215.28,153.24 151.57,217 151.57,295.51C151.57,374.07 215.36,437.85 293.92,437.85C297.9,437.85 301.85,437.69 305.75,437.36L319.97,487.12C311.335,488.282 302.632,488.864 293.92,488.86C187.2,488.86 100.56,402.22 100.56,295.51C100.56,188.79 187.2,102.16 293.92,102.16C296.56,102.16 299.2,102.21 301.82,102.32L293.77,153.17ZM351.97,111.04C430.36,135.71 487.27,209.02 487.27,295.51C487.27,375.58 438.5,444.34 369.07,473.69L354.9,424.14C402.98,401.29 436.26,352.25 436.26,295.51C436.26,234.52 397.82,182.44 343.87,162.19L351.97,111.04Z"
+                      style="fill: var(--color-brand)"
+                    />
+                  </g>
+                </g>
+                <g transform="matrix(1.25498,0,0,1.92174,1126.78,-2077.58)">
+                  <path
+                    d="M411.597,1355.36L411.597,1339.8L410.589,1336.49L410.589,1309.28C410.589,1304 409.005,1299.89 405.837,1296.96C402.669,1294.04 397.869,1292.57 391.437,1292.57C387.117,1292.57 382.869,1293.24 378.693,1294.59C374.517,1295.93 370.989,1297.8 368.109,1300.2L361.053,1287.1C365.181,1283.93 370.101,1281.56 375.813,1279.97C381.525,1278.39 387.453,1277.6 393.597,1277.6C404.733,1277.6 413.349,1280.26 419.445,1285.59C425.541,1290.91 428.589,1299.15 428.589,1310.28L428.589,1355.36L411.597,1355.36ZM387.405,1356.36C381.645,1356.36 376.605,1355.38 372.285,1353.41C367.965,1351.44 364.629,1348.71 362.277,1345.2C359.925,1341.7 358.749,1337.74 358.749,1333.32C358.749,1329 359.781,1325.12 361.845,1321.66C363.909,1318.2 367.293,1315.47 371.997,1313.45C376.701,1311.43 382.941,1310.43 390.717,1310.43L413.037,1310.43L413.037,1322.38L392.013,1322.38C385.869,1322.38 381.741,1323.36 379.629,1325.33C377.517,1327.3 376.461,1329.72 376.461,1332.6C376.461,1335.87 377.757,1338.46 380.349,1340.38C382.941,1342.3 386.541,1343.26 391.149,1343.26C395.565,1343.26 399.525,1342.25 403.029,1340.24C406.533,1338.22 409.053,1335.24 410.589,1331.31L413.613,1342.11C411.885,1346.62 408.789,1350.12 404.325,1352.62C399.861,1355.12 394.221,1356.36 387.405,1356.36Z"
+                    style="fill: var(--color-brand); fill-rule: nonzero"
+                  />
+                  <path
+                    d="M494.253,1356.36C488.013,1356.36 482.325,1354.92 477.189,1352.04C472.053,1349.16 467.973,1344.82 464.949,1339.01C461.925,1333.2 460.413,1325.84 460.413,1316.91C460.413,1307.88 461.877,1300.49 464.805,1294.73C467.733,1288.97 471.741,1284.67 476.829,1281.84C481.917,1279.01 487.725,1277.6 494.253,1277.6C501.837,1277.6 508.533,1279.23 514.341,1282.49C520.149,1285.76 524.757,1290.32 528.165,1296.17C531.573,1302.03 533.277,1308.94 533.277,1316.91C533.277,1324.88 531.573,1331.81 528.165,1337.71C524.757,1343.62 520.149,1348.2 514.341,1351.47C508.533,1354.73 501.837,1356.36 494.253,1356.36ZM451.629,1383.29L451.629,1278.46L468.765,1278.46L468.765,1296.6L468.189,1317.05L469.629,1337.5L469.629,1383.29L451.629,1383.29ZM492.237,1340.95C496.557,1340.95 500.421,1340 503.829,1338.08C507.237,1336.15 509.949,1333.37 511.965,1329.72C513.981,1326.08 514.989,1321.8 514.989,1316.91C514.989,1311.91 513.981,1307.62 511.965,1304.02C509.949,1300.42 507.237,1297.66 503.829,1295.74C500.421,1293.82 496.557,1292.86 492.237,1292.86C487.917,1292.86 484.029,1293.82 480.573,1295.74C477.117,1297.66 474.381,1300.42 472.365,1304.02C470.349,1307.62 469.341,1311.91 469.341,1316.91C469.341,1321.8 470.349,1326.08 472.365,1329.72C474.381,1333.37 477.117,1336.15 480.573,1338.08C484.029,1340 487.917,1340.95 492.237,1340.95Z"
+                    style="fill: var(--color-brand); fill-rule: nonzero"
+                  />
+                  <path
+                    d="M593.037,1356.36C586.797,1356.36 581.109,1354.92 575.973,1352.04C570.837,1349.16 566.757,1344.82 563.733,1339.01C560.709,1333.2 559.197,1325.84 559.197,1316.91C559.197,1307.88 560.661,1300.49 563.589,1294.73C566.517,1288.97 570.525,1284.67 575.613,1281.84C580.701,1279.01 586.509,1277.6 593.037,1277.6C600.621,1277.6 607.317,1279.23 613.125,1282.49C618.933,1285.76 623.541,1290.32 626.949,1296.17C630.357,1302.03 632.061,1308.94 632.061,1316.91C632.061,1324.88 630.357,1331.81 626.949,1337.71C623.541,1343.62 618.933,1348.2 613.125,1351.47C607.317,1354.73 600.621,1356.36 593.037,1356.36ZM550.413,1383.29L550.413,1278.46L567.549,1278.46L567.549,1296.6L566.973,1317.05L568.413,1337.5L568.413,1383.29L550.413,1383.29ZM591.021,1340.95C595.341,1340.95 599.205,1340 602.613,1338.08C606.021,1336.15 608.733,1333.37 610.749,1329.72C612.765,1326.08 613.773,1321.8 613.773,1316.91C613.773,1311.91 612.765,1307.62 610.749,1304.02C608.733,1300.42 606.021,1297.66 602.613,1295.74C599.205,1293.82 595.341,1292.86 591.021,1292.86C586.701,1292.86 582.813,1293.82 579.357,1295.74C575.901,1297.66 573.165,1300.42 571.149,1304.02C569.133,1307.62 568.125,1311.91 568.125,1316.91C568.125,1321.8 569.133,1326.08 571.149,1329.72C573.165,1333.37 575.901,1336.15 579.357,1338.08C582.813,1340 586.701,1340.95 591.021,1340.95Z"
+                    style="fill: var(--color-brand); fill-rule: nonzero"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+      <ProgressBar class="loading-bar" :progress="loadingProgress" />
+      <span v-if="message">{{ message }}</span>
+    </div>
+    <div class="gradient-bg" data-tauri-drag-region></div>
+    <div class="cube-bg"></div>
+    <div class="base-bg"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { loading_listener } from '@/helpers/events.js'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { XIcon } from '@modrinth/assets'
+import { MaximizeIcon, MinimizeIcon } from '@/assets/icons/index.js'
+import { getOS } from '@/helpers/utils.js'
+import { useLoading } from '@/store/loading.js'
+
+const doneLoading = ref(false)
+const loadingProgress = ref(0)
+const hidden = ref(false)
+const message = ref()
+
+const loading = useLoading()
+
+watch(loading, (newValue) => {
+  if (!newValue.barEnabled) {
+    if (loading.loading) {
+      loadingProgress.value = 0
+      fakeLoadingIncrease()
+    } else {
+      loadingProgress.value = 100
+      doneLoading.value = true
+
+      setTimeout(() => {
+        hidden.value = true
+        loading.setEnabled(true)
+      }, 250)
+    }
+  }
+})
+
+function fakeLoadingIncrease() {
+  if (loadingProgress.value < 95) {
+    setTimeout(() => {
+      loadingProgress.value += 1
+      fakeLoadingIncrease()
+    }, 5)
+  }
+}
+
+const os = ref('')
+getOS().then((x) => (os.value = x))
+
+loading_listener(async (e) => {
+  console.log(e)
+  if (e.event.type === 'directory_move') {
+    loadingProgress.value = 100 * (e.fraction ?? 1)
+    message.value = 'Updating app directory...'
+  } else if (e.event.type === 'launcher_update') {
+    loadingProgress.value = 100 * (e.fraction ?? 1)
+    message.value = 'Updating Modrinth App...'
+  } else if (e.event.type === 'checking_for_updates') {
+    loadingProgress.value = 100 * (e.fraction ?? 1)
+    message.value = 'Checking for updates...'
+  }
+})
+
+const handleClose = async () => {
+  await getCurrentWindow().close()
+}
+</script>
+
+<style scoped lang="scss">
+.splash-screen {
+  transition: opacity 0.25s ease-in-out;
+  opacity: 1;
+
+  &.fade-out {
+    opacity: 0;
+  }
+}
+
+.app-buttons {
+  position: absolute;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+}
+
+.app-logo-wrapper {
+  position: absolute;
+  height: 100vh;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  gap: 1rem;
+
+  z-index: 9998;
+}
+
+.app-logo {
+  height: 2.25rem;
+  width: fit-content;
+}
+
+.loading-bar {
+  max-width: 20rem;
+}
+
+.gradient-bg {
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+  background: linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
+    linear-gradient(0deg, rgba(22, 24, 28, 0.64), rgba(22, 24, 28, 0.64));
+  z-index: 9997;
+}
+
+.cube-bg {
+  position: absolute;
+
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 180vw;
+  height: 180vh;
+  opacity: 0.8;
+  background: #16181c url('@/assets/loading/cube.png') center no-repeat;
+  background-size: contain;
+
+  z-index: 9996;
+}
+
+.base-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-bg);
+  z-index: 9995;
+}
+</style>