Initial draft

* fix(marketing): make faq headings medium

* feat(marketing): add card for overallocation

* feat(marketing): add miami location

* fix(marketing): 'login' -> 'sign in' consistency

* feat: plan query string support + simplify buttons

.cargo/config.toml

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

.editorconfig

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

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

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

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

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

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

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

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

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

.github/ISSUE_TEMPLATE/config.yml

@@ -1,16 +1,14 @@
 blank_issues_enabled: true
 contact_links:
-  - name: Discord
+  - name: 🫶 Support Portal
-    about: Ask questions on our Discord Server.
+    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)
+  - name: 📚 Documentation
-    about: |
+    about: Useful documentation about Modrinth's API
-      Please use Issues for reporting bugs and suggesting enhancements to existing features.
+    url: https://docs.modrinth.com
-      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

.github/workflows/daedalus-docker.yml

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

.github/workflows/daedalus-run.yml

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

.github/workflows/frontend-pages.yml

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

.github/workflows/gui-build.yml

@@ -1,42 +0,0 @@
-name: GUI Build + Lint
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./theseus_gui
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - name: Install pnpm via corepack
-        shell: bash
-        run: |
-          corepack enable
-          corepack prepare --activate
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-      - name: Install dependencies
-        run: pnpm install
-      - name: Run Lint
-        run: pnpm lint
-      - name: Build
-        run: pnpm build

.github/workflows/labrinth-docker.yml

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

.github/workflows/tauri-build.yml

@@ -1,109 +0,0 @@
-name: 'Tauri GUI Build'
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-jobs:
-  test-tauri:
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-20.04, ubuntu-22.04]
-
-    runs-on: ${{ matrix.platform }}
-    defaults:
-      run:
-        working-directory: ./theseus_gui
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Rust setup (mac)
-        if: startsWith(matrix.platform, 'macos')
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-          targets: aarch64-apple-darwin, x86_64-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') }}"

.github/workflows/theseus-release.yml

@@ -0,0 +1,155 @@
+name: 'Modrinth App build'
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+    paths:
+      - .github/workflows/app-release.yml
+      - 'apps/app/**'
+      - 'apps/app-frontend/**'
+      - 'packages/app-lib/**'
+      - 'packages/app-macros/**'
+      - 'packages/assets/**'
+      - 'packages/ui/**'
+      - 'packages/utils/**'
+  workflow_dispatch:
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, windows-latest, ubuntu-22.04]
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Rust setup (mac)
+        if: startsWith(matrix.platform, 'macos')
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+          targets: aarch64-apple-darwin, x86_64-apple-darwin
+
+      - name: Rust setup
+        if: "!startsWith(matrix.platform, 'macos')"
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+
+      - name: Setup rust cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            target/**
+            !target/*/release/bundle/*/*.dmg
+            !target/*/release/bundle/*/*.app.tar.gz
+            !target/*/release/bundle/*/*.app.tar.gz.sig
+            !target/release/bundle/*/*.dmg
+            !target/release/bundle/*/*.app.tar.gz
+            !target/release/bundle/*/*.app.tar.gz.sig
+
+            !target/release/bundle/*/*.AppImage
+            !target/release/bundle/*/*.AppImage.tar.gz
+            !target/release/bundle/*/*.AppImage.tar.gz.sig
+            !target/release/bundle/*/*.deb
+            !target/release/bundle/*/*.rpm
+
+            !target/release/bundle/msi/*.msi
+            !target/release/bundle/msi/*.msi.zip
+            !target/release/bundle/msi/*.msi.zip.sig
+
+            !target/release/bundle/nsis/*.exe
+            !target/release/bundle/nsis/*.nsis.zip
+            !target/release/bundle/nsis/*.nsis.zip.sig
+          key: ${{ runner.os }}-rust-target-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-rust-target-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm via corepack
+        shell: bash
+        run: |
+          corepack enable
+          corepack prepare --activate
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: install dependencies (ubuntu only)
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev pkg-config libayatana-appindicator3-dev librsvg2-dev
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: build app (macos)
+        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config "tauri-release.conf.json"
+        if: startsWith(matrix.platform, 'macos')
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: build app
+        run: pnpm --filter=@modrinth/app run tauri build --config "tauri-release.conf.json"
+        id: build_os
+        if: "!startsWith(matrix.platform, 'macos')"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: upload ${{ matrix.platform }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.platform }}
+          path: |
+            target/*/release/bundle/*/*.dmg
+            target/*/release/bundle/*/*.app.tar.gz
+            target/*/release/bundle/*/*.app.tar.gz.sig
+            target/release/bundle/*/*.dmg
+            target/release/bundle/*/*.app.tar.gz
+            target/release/bundle/*/*.app.tar.gz.sig
+
+            target/release/bundle/*/*.AppImage
+            target/release/bundle/*/*.AppImage.tar.gz
+            target/release/bundle/*/*.AppImage.tar.gz.sig
+            target/release/bundle/*/*.deb
+            target/release/bundle/*/*.rpm
+
+            target/release/bundle/msi/*.msi
+            target/release/bundle/msi/*.msi.zip
+            target/release/bundle/msi/*.msi.zip.sig
+
+            target/release/bundle/nsis/*.exe
+            target/release/bundle/nsis/*.nsis.zip
+            target/release/bundle/nsis/*.nsis.zip.sig

.github/workflows/turbo-ci.yml

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

.gitignore

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

.idea/.gitignore

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

.idea/daedalus.iml

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

.idea/discord.xml

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

.idea/libraries/KotlinJavaRuntime.xml

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

.idea/modules.xml

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

.idea/vcs.xml

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

.npmrc

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

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer"]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

COPYING.md

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

Cargo.toml

@@ -1,24 +1,14 @@
 [workspace]
-resolver = "2"
+resolver = '2'
-
 members = [
-    "theseus",
+  './packages/app-lib',
-    "theseus_playground",
+	'./apps/app-playground',
-    "theseus_gui/src-tauri",
+  './apps/app',
-    "theseus_macros"
+  './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" }

README.md

@@ -1,45 +1,39 @@
-<img src="https://github.com/modrinth/theseus/assets/6166773/51d1ca87-05c0-445a-bd18-ddd1117f7f12" alt="modrinth app: theseus (desktop app)">
+# ![Modrinth Monorepo Cover](/.github/assets/monorepo_cover.png)
 
-# Modrinth App
+![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)
 
-<img src="https://cdn-raw.modrinth.com/app-landing/app-screenshot.webp" alt="Screenshot of the Modrinth App's home page" align="right" width="50%">
+## Modrinth Monorepo
 
-The Modrinth App, codenamed theseus, is a modern launcher for Minecraft: Java Edition with a clean look, easy-to-use interface, and deep integration into Modrinth services.
+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!
 
-### Features
+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).
-- One-click installation of modpacks
-- Automatic management of Java versions
-- Windows, Mac, and Linux[^1] support
-- Import your instances from CurseForge, Prism[^2], ATLauncher, MultiMC[^2], or GDLauncher
-- Supports offline play once you've authenticated with your Minecraft account at least once
-- Fully open source under GPLv3[^3]!
-
-[^1]: While Linux is supported, due to the wide range of distributions out there, your mileage may vary with how well the Modrinth App works on your system. We officially distribute `.deb` and `.AppImage` packages, but third party packages have been created for a number of other package platforms. Additionally, some have reported lag issues running on Linux, we believe this to be due to an upstream Tauri issue, which we hope improves with further development.
-
-[^2]: Certain features of the OneSix format used by Prism and MultiMC are not yet supported, so some instances may not import correctly, primarily on older Minecraft versions or unsupported mod loaders.
-
-[^3]: Modrinth's logos, branding, and other trademarks are not free for use, see the [licensing section](#license) for more information.
-
-## Contributing
-You're welcome to help contribute to the Modrinth App if you'd like! Please review our [contribution guide](https://support.modrinth.com/en/articles/8802215-contributing-to-modrinth) before attempting to contribute or make a pull request though.
 
 ## Development
-To get started, install [pnpm](https://pnpm.io/), [Rust](https://www.rust-lang.org/tools/install), and the [Tauri prerequisites](https://tauri.app/v1/guides/getting-started/prerequisites/#installing) for your system. Then, run the following commands:
 
-```
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
-cd theseus_gui
-pnpm install
-pnpm run tauri dev
-```
 
-Once the commands finish, you'll be viewing a Tauri window with Nuxt.js hot reloading.
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)
 
-You can use `pnpm run lint` to find any eslint problems, and `pnpm run fix` to try automatically fixing those problems.
+## 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
-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](https://github.com/modrinth/theseus/blob/master/LICENSE). However, some files are licensed under a different license.
 
-Any files depicting the Modrinth branding, including the wrench-in-labyrinth logo, the landing image, and variations thereof, are licensed as follows:
+All packages in this repository are licensed under their respective licenses. Refer to the LICENSE file in each package for more information.
-> All rights reserved. © 2020-2024 Rinth, Inc.
-
-Forking is permitted under the GPLv3, however do be aware that you must remove all Modrinth branding, including logos, brand colors, background images, or anything else that is related to trademarks or copyrights held by Rinth, Inc.

apps/app-frontend/.prettierignore

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

apps/app-frontend/COPYING.md

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

apps/app-frontend/eslint.config.mjs

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

apps/app-frontend/index.html

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

apps/app-frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.8.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"
+}

apps/app-frontend/postcss.config.js

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

apps/app-frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
 import {
   HomeIcon,
@@ -7,12 +7,10 @@ import {
   LibraryIcon,
   PlusIcon,
   SettingsIcon,
-  FileIcon,
-  Button,
-  Notifications,
   XIcon,
-  Card,
+  DownloadIcon,
-} from 'omorphia'
+} 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'
@@ -23,173 +21,171 @@ 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 { command_listener, warning_listener } from '@/helpers/events.js'
-import { MinimizeIcon, MaximizeIcon, ChatIcon } from '@/assets/icons'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
-import { type } from '@tauri-apps/api/os'
+import { type } from '@tauri-apps/plugin-os'
-import { appWindow } from '@tauri-apps/api/window'
+import { isDev, getOS, restartApp } from '@/helpers/utils.js'
-import { isDev, getOS, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
+import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
-import {
+import { getCurrentWindow } from '@tauri-apps/api/window'
-  mixpanel_track,
-  mixpanel_init,
-  mixpanel_opt_out_tracking,
-  mixpanel_is_loaded,
-} from '@/helpers/mixpanel'
-import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
 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 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 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({
+const stateInitialized = ref(false)
-  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()
-    const dev = await isDev()
-    const version = await getVersion()
-    showOnboarding.value = !fully_onboarded
 
-    nativeDecorations.value = native_decorations
+const criticalErrorMessage = ref()
-    if (os.value !== 'MacOS') appWindow.setDecorations(native_decorations)
 
-    themeStore.setThemeState(theme)
+onMounted(async () => {
-    themeStore.collapsedNavigation = collapsed_navigation
+  await useCheckDisableMouseover()
-    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()
-  },
 })
 
-const confirmClose = async () => {
+async function setupApp() {
-  const confirmed = await confirm(
+  stateInitialized.value = true
-    'An action is currently in progress. Are you sure you want to exit?',
+  const {
-    {
+    native_decorations,
-      title: 'Modrinth',
+    theme,
-      type: 'warning',
+    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 saveWindowState(StateFlags.ALL)
-    await TauriWindow.getCurrent().close()
+  await getCurrentWindow().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()
 }
 
-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()) {
+  trackEvent('PageView', { path: to.path, fromPath: from.path, failed: failure })
-    mixpanel_track('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()
 
-watch(notificationsWrapper, () => {
-  notifications.setNotifs(notificationsWrapper.value)
-})
-
 const error = useError()
 const errorModal = ref()
 
-watch(errorModal, () => {
+const install = useInstall()
+const modInstallModal = ref()
+const installConfirmModal = ref()
+const incompatibilityWarningModal = ref()
+
+onMounted(() => {
+  invoke('show_window')
+
+  notifications.setNotifs(notificationsWrapper.value)
+
   error.setErrorModal(errorModal.value)
+
+  install.setIncompatibilityWarningModal(incompatibilityWarningModal)
+  install.setInstallConfirmModal(installConfirmModal)
+  install.setModInstallModal(modInstallModal)
 })
 
 document.querySelector('body').addEventListener('click', function (e) {
@@ -201,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', {
+        open(target.href)
-          __tauriModule: 'Shell',
-          message: {
-            cmd: 'open',
-            path: target.href,
-          },
-        })
       }
       e.preventDefault()
       break
@@ -234,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',
       })
     }
@@ -247,53 +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>
-  <div v-if="failureText" class="failure dark-mode">
+  <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
-    <div class="appbar-failure dark-mode">
+  <div v-if="stateInitialized" class="app-container">
-      <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="isLoading" app-loading />
-  <OnboardingScreen v-else-if="showOnboarding" :finish="() => (showOnboarding = false)" />
-  <div v-else class="container">
     <div class="nav-container">
       <div class="nav-section">
         <suspense>
@@ -322,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"
@@ -337,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">
@@ -349,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
+          <Button class="titlebar-button close" icon-only @click="handleClose">
-            class="titlebar-button close"
-            icon-only
-            @click="
-              () => {
-                saveWindowState(StateFlags.ALL)
-                handleClose()
-              }
-            "
-          >
             <XIcon />
           </Button>
         </section>
@@ -387,6 +361,9 @@ command_listener(async (e) => {
   <URLConfirmModal ref="urlModal" />
   <Notifications ref="notificationsWrapper" />
   <ErrorModal ref="errorModal" />
+  <ModInstallModal ref="modInstallModal" />
+  <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
+  <InstallConfirmModal ref="installConfirmModal" />
 </template>
 
 <style lang="scss" scoped>
@@ -438,7 +415,7 @@ command_listener(async (e) => {
   }
 }
 
-.container {
+.app-container {
   --appbar-height: 3.25rem;
   --sidebar-width: 4.5rem;
 
@@ -451,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;
@@ -476,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;
@@ -586,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;
@@ -645,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;
@@ -664,3 +547,33 @@ command_listener(async (e) => {
   }
 }
 </style>
+<style>
+.mac {
+  .nav-container {
+    padding-top: calc(var(--gap-md) + 1.75rem);
+  }
+
+  .account-card,
+  .card-section {
+    top: calc(var(--gap-md) + 1.75rem);
+  }
+}
+
+.windows {
+  .fake-appbar {
+    height: 2.5rem !important;
+  }
+
+  .window-controls {
+    display: flex !important;
+  }
+
+  .info-card {
+    right: 8rem;
+  }
+
+  .profile-card {
+    right: 8rem;
+  }
+}
+</style>

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

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

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

@@ -9,19 +9,16 @@ import {
   TrashIcon,
   StopCircleIcon,
   EyeIcon,
-  Card,
-  DropdownSelect,
   SearchIcon,
   XIcon,
-  Button,
+} from '@modrinth/assets'
-  formatCategoryHeader,
+import { Button, Card, DropdownSelect } from '@modrinth/ui'
-  ModalConfirm,
+import { formatCategoryHeader } from '@modrinth/utils'
-} from 'omorphia'
 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,7 +35,6 @@ const props = defineProps({
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
 
-const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
@@ -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)) {
+      if (!instanceMap.has(instance.game_version)) {
-        instanceMap.set(instance.metadata.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) {
+      if (instance.groups.length === 0) {
-        instance.metadata.groups.push('None')
+        instance.groups.push('None')
       }
 
-      for (const category of instance.metadata.groups) {
+      for (const category of instance.groups) {
         if (!instanceMap.has(category)) {
           instanceMap.set(category, [])
         }
@@ -233,20 +229,19 @@ const filteredResults = computed(() => {
 })
 </script>
 <template>
-  <ModalConfirm
+  <ConfirmModalWrapper
     ref="confirmModal"
     title="Are you sure you want to delete this instance?"
     description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
     :has-to-type="false"
     proceed-label="Delete"
-    :noblur="!themeStore.advancedRendering"
     @proceed="deleteProfile"
   />
   <Card class="header">
     <div class="iconified-input">
       <SearchIcon />
       <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
         <XIcon />
       </Button>
     </div>

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

@@ -11,28 +11,20 @@ import {
   ExternalIcon,
   EyeIcon,
   ChevronRightIcon,
-  ModalConfirm,
+} from '@modrinth/assets'
-} from 'omorphia'
+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 { get_by_profile_path } from '@/helpers/process.js'
-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 { 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 { trackEvent } from '@/helpers/analytics'
-import { install as pack_install } from '@/helpers/pack.js'
-import { useTheming } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'
 
 const router = useRouter()
 
@@ -58,11 +50,8 @@ 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() {
@@ -90,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)
+  const options =
-    ? [
+    runningProcesses.length > 0
-        {
+      ? [
-          name: 'stop',
+          {
-          color: 'danger',
+            name: 'stop',
-        },
+            color: 'danger',
-        ...baseOptions,
+          },
-      ]
+          ...baseOptions,
-    : [
+        ]
-        {
+      : [
-          name: 'play',
+          {
-          color: 'primary',
+            name: 'play',
-        },
+            color: 'primary',
-        ...baseOptions,
+          },
-      ]
+          ...baseOptions,
+        ]
 
   instanceOptions.value.showMenu(event, passedInstance, options)
 }
@@ -130,24 +120,24 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
   switch (args.option) {
     case 'play':
-      await run(args.item.path).catch(handleSevereError)
+      await run(args.item.path).catch((err) =>
-      mixpanel_track('InstanceStart', {
+        handleSevereError(err, { profilePath: args.item.path }),
-        loader: args.item.metadata.loader,
+      )
-        game_version: args.item.metadata.game_version,
+      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(args.item.path).catch(handleError)
-        await kill_by_uuid(u).catch(handleError)
+      trackEvent('InstanceStop', {
-      }
+        loader: args.item.loader,
-      mixpanel_track('InstanceStop', {
+        game_version: args.item.game_version,
-        loader: args.item.metadata.loader,
-        game_version: args.item.metadata.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
@@ -170,21 +160,8 @@ const handleOptionsClick = async (args) => {
       await navigator.clipboard.writeText(args.item.path)
       break
     case 'install': {
-      const versions = await useFetch(
+      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')
-        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
-        'project versions',
-      )
 
-      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':
@@ -228,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">
@@ -243,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"
@@ -258,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>
@@ -278,8 +252,6 @@ onUnmounted(() => {
     <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
     <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
   </ContextMenu>
-  <InstallConfirmModal ref="confirmModal" />
-  <ModInstallModal ref="modInstallModal" />
 </template>
 <style lang="scss" scoped>
 .content {

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

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

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

@@ -5,7 +5,7 @@
     v-tooltip.right="'Minecraft accounts'"
     class="button-base avatar-button"
     :class="{ expanded: mode === 'expanded' }"
-    @click="showCard = !showCard"
+    @click="toggleMenu"
   >
     <Avatar
       :size="mode === 'expanded' ? 'xs' : 'sm'"
@@ -59,7 +59,8 @@
 </template>
 
 <script setup>
-import { Avatar, Button, Card, PlusIcon, TrashIcon, LogInIcon } 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,
@@ -69,9 +70,10 @@ import {
   get_default_user,
 } from '@/helpers/auth'
 import { handleError } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+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: {
@@ -117,7 +119,7 @@ async function login() {
     await refreshValues()
   }
 
-  mixpanel_track('AccountLogIn')
+  trackEvent('AccountLogIn')
 }
 
 const logout = async (id) => {
@@ -129,12 +131,12 @@ const logout = async (id) => {
   } else {
     emit('change')
   }
-  mixpanel_track('AccountLogOut')
+  trackEvent('AccountLogOut')
 }
 
-let showCard = ref(false)
+const showCard = ref(false)
-let card = ref(null)
+const card = ref(null)
-let button = ref(null)
+const button = ref(null)
 const handleClickOutside = (event) => {
   const elements = document.elementsFromPoint(event.clientX, event.clientY)
   if (
@@ -143,7 +145,20 @@ const handleClickOutside = (event) => {
     !elements.includes(card.value.$el) &&
     !button.value.contains(event.target)
   ) {
+    toggleMenu(false)
+  }
+}
+
+function toggleMenu(override = true) {
+  if (showCard.value || !override) {
+    if (showCard.value) {
+      show_ads_window()
+    }
+
     showCard.value = false
+  } else {
+    hide_ads_window()
+    showCard.value = true
   }
 }
 

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

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

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

@@ -31,7 +31,8 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon, Button, ChevronLeftIcon } from 'omorphia'
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'

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

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

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

@@ -1,14 +1,18 @@
 <script setup>
-import { Modal, XIcon, IssuesIcon, LogInIcon } from 'omorphia'
+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 mixpanel from 'mixpanel-browser'
 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')
@@ -16,7 +20,9 @@ const supportLink = ref('https://support.modrinth.com')
 const metadata = ref({})
 
 defineExpose({
-  async show(errorVal) {
+  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'
@@ -36,6 +42,27 @@ defineExpose({
       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'
@@ -58,7 +85,7 @@ async function loginMinecraft() {
       await set_default_user(loggedIn.id).catch(handleError)
     }
 
-    await mixpanel.track('AccountLogIn')
+    await trackEvent('AccountLogIn', { source: 'ErrorModal' })
     loadingMinecraft.value = false
     errorModal.value.hide()
   } catch (err) {
@@ -66,10 +93,35 @@ async function loginMinecraft() {
     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>
-  <Modal ref="errorModal" :header="title">
+  <ModalWrapper ref="errorModal" :header="title" :closable="closable">
     <div class="modal-body">
       <div class="markdown-body">
         <template v-if="errorType === 'minecraft_auth'">
@@ -124,30 +176,40 @@ async function loginMinecraft() {
               <LogInIcon /> Try signing in again
             </button>
           </div>
-          <hr />
+        </template>
-          <p>
+        <template v-if="errorType === 'directory_move'">
-            If nothing is working and you need help, visit
+          <template v-if="metadata.readOnly">
-            <a :href="supportLink">our support page</a>
+            <h3>Change directory permissions</h3>
-            and start a chat using the widget in the bottom right and we will be more than happy to
+            <p>
-            assist! Make sure to provide the following debug information to the agent:
+              It looks like the Modrinth App is unable to write to the directory you selected.
-          </p>
+              Please adjust the permissions of the directory and try again or cancel the directory
-          <details>
+              change.
-            <summary>Debug information</summary>
+            </p>
-            {{ error.message ?? error }}
+          </template>
-          </details>
+          <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'">
-          <div class="warning-banner">
-            <div class="warning-banner__title">
-              <IssuesIcon />
-              <span>Installed the app before April 23rd, 2024?</span>
-            </div>
-            <div class="warning-banner__description">
-              Modrinth has updated our sign-in workflow to allow for better stability, security, and
-              performance. You must sign in again so your credentials can be upgraded to this new
-              flow.
-            </div>
-          </div>
           <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
@@ -161,16 +223,56 @@ async function loginMinecraft() {
             </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 class="btn" @clicdck="errorModal.hide()"><XIcon /> Close</button>
+        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
       </div>
     </div>
-  </Modal>
+  </ModalWrapper>
 </template>
 
 <style>
@@ -190,6 +292,7 @@ async function loginMinecraft() {
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
+  gap: 0.5rem;
 }
 
 .warning-banner {
@@ -222,4 +325,8 @@ async function loginMinecraft() {
   gap: var(--gap-md);
   padding: var(--gap-lg);
 }
+
+.markdown-body {
+  overflow: auto;
+}
 </style>

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

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

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" header="Create instance" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="modal" header="Create instance">
     <div class="modal-header">
       <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
     </div>
@@ -110,7 +110,7 @@
               placeholder="Path to launcher"
               @change="setPath"
             />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
               <XIcon />
             </Button>
           </div>
@@ -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 { open } from '@tauri-apps/plugin-dialog'
-import { tauri } from '@tauri-apps/api'
+import { convertFileSrc } from '@tauri-apps/api/core'
-import {
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
-  get_game_versions,
-  get_fabric_versions,
-  get_forge_versions,
-  get_quilt_versions,
-  get_neoforge_versions,
-} from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { trackEvent } from '@/helpers/analytics'
-import { useTheming } from '@/store/state.js'
-import { listen } from '@tauri-apps/api/event'
 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'
-
+import { getCurrentWebview } from '@tauri-apps/api/webview'
-const themeStore = useTheming()
 
 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')) {
+      const { paths } = event.payload
-        await install_from_file(event.payload[0]).catch(handleError)
+      if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
-        mixpanel_track('InstanceCreate', {
+        await install_from_file(paths[0]).catch(handleError)
+        trackEvent('InstanceCreate', {
           source: 'CreationModalFileDrop',
         })
       }
     })
 
-    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
+    trackEvent('InstanceCreateStart', { source: 'CreationModal' })
   },
 })
 
@@ -308,10 +298,10 @@ const [
   all_game_versions,
   loaders,
 ] = await Promise.all([
-  get_fabric_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('fabric').then(shallowRef).catch(handleError),
-  get_forge_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('forge').then(shallowRef).catch(handleError),
-  get_quilt_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('quilt').then(shallowRef).catch(handleError),
-  get_neoforge_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('neo').then(shallowRef).catch(handleError),
   get_game_versions().then(shallowRef).catch(handleError),
   get_loaders()
     .then((value) =>
@@ -370,7 +360,7 @@ const create_instance = async () => {
     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',
   })
 }
@@ -472,7 +464,7 @@ const promises = profileOptions.value.map(async (option) => {
       option.name,
       instances.map((name) => ({ name, selected: false })),
     )
-  } catch (error) {
+  } catch {
     // Allow failure silently
   }
 })

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="detectJavaModal" header="Select java version" :noblur="!themeStore.advancedRendering">
+  <ModalWrapper ref="detectJavaModal" header="Select java version">
     <div class="auto-detect-modal">
       <div class="table">
         <div class="table-row table-head">
@@ -32,17 +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_filtered_jres } from '@/helpers/jre.js'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { trackEvent } from '@/helpers/analytics'
-import { useTheming } from '@/store/theme.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-
-const themeStore = useTheming()
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
@@ -52,9 +51,6 @@ defineExpose({
   show: async (version, currentSelectedJava) => {
     chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
 
-    console.log(chosenInstallOptions.value)
-    console.log(version)
-
     currentSelected.value = currentSelectedJava
     if (!currentSelected.value) {
       currentSelected.value = { path: '', version: '' }
@@ -69,7 +65,7 @@ const emit = defineEmits(['submit'])
 function setJavaInstall(javaInstall) {
   emit('submit', javaInstall)
   detectJavaModal.value.hide()
-  mixpanel_track('JavaAutoDetect', {
+  trackEvent('JavaAutoDetect', {
     path: javaInstall.path,
     version: javaInstall.version,
   })

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

@@ -53,20 +53,20 @@
 
 <script setup>
 import {
-  Button,
   SearchIcon,
   PlayIcon,
   CheckIcon,
   XIcon,
   FolderSearchIcon,
   DownloadIcon,
-} from 'omorphia'
+} 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: {
@@ -113,7 +113,7 @@ async function testJava() {
   )
   testingJava.value = false
 
-  mixpanel_track('JavaTest', {
+  trackEvent('JavaTest', {
     path: props.modelValue ? props.modelValue.path : '',
     success: testingJavaSuccess.value,
   })
@@ -124,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', {
+    trackEvent('JavaManualSelect', {
-      path: filePath,
       version: props.version,
     })
 
@@ -150,7 +149,7 @@ async function autoDetect() {
   if (!props.compact) {
     detectJavaModal.value.show(props.version, props.modelValue)
   } else {
-    let versions = await find_filtered_jres(props.version).catch(handleError)
+    const versions = await find_filtered_jres(props.version).catch(handleError)
     if (versions.length > 0) {
       emit('update:modelValue', versions[0])
     }
@@ -162,7 +161,6 @@ async function reinstallJava() {
   const path = await auto_install_java(props.version).catch(handleError)
   let result = await get_jre(path)
 
-  console.log('java result ' + result)
   if (!result) {
     result = {
       path: path,
@@ -171,7 +169,7 @@ async function reinstallJava() {
     }
   }
 
-  mixpanel_track('JavaReInstall', {
+  trackEvent('JavaReInstall', {
     path: path,
     version: props.version,
   })
@@ -205,6 +203,10 @@ async function reinstallJava() {
   align-items: center;
   gap: 0.5rem;
   margin: 0;
+
+  .btn {
+    width: max-content;
+  }
 }
 
 .test-success {

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

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

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

@@ -1,22 +1,13 @@
 <script setup>
-import {
+import { Card, Avatar, Button } from '@modrinth/ui'
-  Card,
+import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
-  Avatar,
+import { formatNumber, formatCategory } from '@modrinth/utils'
-  Button,
-  formatNumber,
-  formatCategory,
-  DownloadIcon,
-  HeartIcon,
-  CalendarIcon,
-} from 'omorphia'
 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 { install as installVersion } from '@/store/install.js'
-import { list } from '@/helpers/profile.js'
+
-import { handleError } from '@/store/notifications.js'
-import { install as pack_install } from '@/helpers/pack.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(
+  await installVersion(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    props.project.project_id,
-    'project versions',
+    null,
-  )
+    props.instance ? props.instance.path : null,
-
+    'ProjectCard',
-  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)
       installing.value = false
-    } else
+    },
-      props.confirmModal.show(
+  )
-        props.project.project_id,
-        versions[0].id,
-        props.project.title,
-        props.project.icon_url,
-      )
-  } else {
-    props.modInstallModal.show(props.project.project_id, versions)
-  }
-
-  installing.value = false
 }
 </script>
 

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

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

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

@@ -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)}`">
+        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
-          {{ selectedProfile.metadata.name }}
+          {{ 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"
+        v-for="process in currentProcesses"
-        :key="profile.id"
+        :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 {
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
-  Button,
+import { Button, Card } from '@modrinth/ui'
-  DownloadIcon,
-  Card,
-  StopCircleIcon,
-  TerminalSquareIcon,
-  DropdownIcon,
-} from 'omorphia'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import {
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-  get_all_running_profiles as getRunningProfiles,
+import { loading_listener, process_listener } from '@/helpers/events'
-  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 { 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 currentProcesses = ref([])
-const selectedProfile = ref(currentProcesses.value[0])
+const selectedProcess = ref()
 
-const offline = ref(await isOffline().catch(handleError))
+const refresh = async () => {
-const refreshInternet = async () => {
+  const processes = await getRunningProcesses().catch(handleError)
-  offline.value = await refreshOffline().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) => {
+const stop = async (process) => {
-  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) => {
   try {
-    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
+    await killProcess(process.uuid).catch(handleError)
-    await killProfile(processes[0])
 
-    mixpanel_track('InstanceStop', {
+    trackEvent('InstanceStop', {
-      loader: currentProcesses.value[0].metadata.loader,
+      loader: process.profile.loader,
-      game_version: currentProcesses.value[0].metadata.game_version,
+      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,8 +188,8 @@ const refreshInfo = async () => {
       if (x.bar_type.type === 'java_download') {
         x.title = 'Downloading Java ' + x.bar_type.version
       }
-      if (x.bar_type.profile_name) {
+      if (x.bar_type.profile_path) {
-        x.title = x.bar_type.profile_name
+        x.title = x.bar_type.profile_path
       }
       if (x.bar_type.pack_name) {
         x.title = x.bar_type.pack_name
@@ -221,8 +221,8 @@ const unlistenLoading = await loading_listener(async () => {
   await refreshInfo()
 })
 
-const selectProfile = (profile) => {
+const selectProcess = (process) => {
-  selectedProfile.value = profile
+  selectedProcess.value = process
   showProfiles.value = false
 }
 
@@ -273,7 +273,6 @@ onBeforeUnmount(() => {
   window.removeEventListener('click', handleClickOutsideProfile)
   unlistenProcess()
   unlistenLoading()
-  unlistenRefresh()
 })
 </script>
 
@@ -341,8 +340,12 @@ onBeforeUnmount(() => {
   width: 1.25rem !important;
   height: 1.25rem !important;
 
+  svg {
+    min-width: 1.25rem;
+  }
+
   &.stop {
-    --text-color: var(--color-red) !important;
+    color: var(--color-red);
   }
 }
 

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

@@ -63,29 +63,13 @@
 </template>
 
 <script setup>
-import {
+import { DownloadIcon, HeartIcon, CalendarIcon, CheckIcon, StarIcon } from '@modrinth/assets'
-  Avatar,
+import { Avatar, Card, Categories, EnvironmentIndicator, Button } from '@modrinth/ui'
-  Card,
+import { formatNumber, formatCategory } from '@modrinth/utils'
-  Categories,
-  EnvironmentIndicator,
-  Button,
-  DownloadIcon,
-  formatNumber,
-  formatCategory,
-  HeartIcon,
-  CalendarIcon,
-  CheckIcon,
-  StarIcon,
-} from 'omorphia'
 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 installVersion } from '@/store/install.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'
 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,93 +106,19 @@ const installed = ref(props.installed)
 
 async function install() {
   installing.value = true
-  const versions = await useFetch(
+  await installVersion(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    props.project.project_id,
-    'project versions',
+    null,
-  )
+    props.instance ? props.instance.path : null,
-  let queuedVersionData
+    'SearchCard',
-
+    (version) => {
-  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,
-      )
       installing.value = false
-      return
-    }
-    if (props.instance) installed.value = true
-  }
 
-  installing.value = false
+      if (props.instance && version) {
+        installed.value = true
+      }
+    },
+  )
 }
 </script>
 

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

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

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

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

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

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