Added confirm for checking discussion threads

Signed-off-by: Jakob <minenash@protonmail.com>
fixed tag in web bug report
2024-08-28 01:17:31 -04:00 · 2024-08-28 01:12:55 -04:00 · 2024-08-27 21:19:07 -07:00 · 2024-08-27 17:50:10 -07:00 · 2024-08-27 13:59:16 -07:00 · 2024-08-27 13:50:48 -07:00
991 changed files with 110193 additions and 23182 deletions
@@ -1,3 +1,3 @@
 # Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
-rustflags = ["-C", "link-args=/STACK:16777220"]
+rustflags = ["-C", "link-args=/STACK:16777220"]
@@ -1,13 +1,18 @@
+# Editor configuration, see http://editorconfig.org
 root = true

 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
 max_line_length = 100

 [*.md]
+max_line_length = off
 trim_trailing_whitespace = false
+
+[*.rs]
+indent_size = 4
@@ -0,0 +1,59 @@
+name: 🎮 Modrinth App bug
+description: Report an issue in the Modrinth Launcher.
+labels: [bug, app]
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+        - label: I have ensured my Modrinth App installation is up to date
+          required: true
+  - type: input
+    id: version
+    attributes:
+      label: What version of the Modrinth App are you using?
+      description: Find this in ⚙️ Settings (bottom right) -> About -> App version.
+    validations:
+      required: true
+  - type: dropdown
+    id: oses
+    attributes:
+      label: What operating systems are you seeing the problem on?
+      multiple: true
+      options:
+        - Windows
+        - MacOS
+        - Linux
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false
@@ -0,0 +1,52 @@
+name: 🌐 Website bug (modrinth.com)
+description: Report an issue on the Modrinth website.
+labels: [bug, web]
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Chrome (including Arc, Brave, Opera, Vivaldi)
+        - Microsoft Edge
+        - Firefox
+        - Safari
+        - Other (please specify)
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false
@@ -1,11 +1,19 @@
-name: Bug report
-description: Create a report to help us improve Modrinth
-labels: [bug]
+name: 🛠️ API issue (api.modrinth.com)
+description: Report an issue regarding the Modrinth API.
+labels: [bug, api]
 body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
  - type: textarea
    attributes:
      label: Describe the bug
-      description: A clear and concise description of what the bug is.
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
    validations:
      required: false
  - type: textarea
@@ -25,13 +33,9 @@ body:
      description: A clear and concise description of what you expected to happen.
    validations:
      required: false
-  - type: textarea
-    attributes: 
-      label: System information
-      description: Add any information about what OS you are on (like Windows or Mac), and what version of the app you are using.
  - type: textarea
    attributes:
      label: Additional context
-      description: Add any other context about the problem here. This might include logs, screenshots, etc. The more the merrier!
+      description: Add any other context about the problem here.
    validations:
-      required: false
+      required: false
@@ -0,0 +1,48 @@
+name: 💡 Feature Request
+description: Suggest an idea
+labels: [enhancement]
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate feature requests
+          required: true
+        - label: I checked the [existing discussions](https://github.com/orgs/modrinth/discussions) 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 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
+  - type: textarea
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the suggested enhancement here.
+    validations:
+      required: false
@@ -1,16 +1,14 @@
 blank_issues_enabled: true
 contact_links:
-  - name: Discord
-    about: Ask questions on our Discord Server.
+  - name: 🫶 Support Portal
+    about: Get support using through our portal.
+    url: https://support.modrinth.com
+  - name: 💬 Chat
+    about: Join our Discord server to chat about Modrinth.
    url: https://discord.modrinth.com
-  - name: Roadmap
+  - name: 🛣️ Roadmap
    about: View our Roadmap. Please do not open issues for items on our roadmap.
    url: https://roadmap.modrinth.com
-  - name: Discussions (Feature requests)
-    about: |
-      Please use Issues for reporting bugs and suggesting enhancements to existing features.
-      Suggestions for new features should be made as a Discussion.
-    url: https://github.com/orgs/modrinth/discussions/categories/feature-requests
-  - name: Documentation
-    about: Useful documentation about Modrinth, its API, and how you can contribute.
-    url: https://docs.modrinth.com
+  - name: 📚 Documentation
+    about: Useful documentation about Modrinth's API
+    url: https://docs.modrinth.com
@@ -1,28 +0,0 @@
-name: Enhancement
-description: Suggest an enhancement for an existing Modrinth feature
-labels: [enhancement]
-body:
-  - type: textarea
-    attributes:
-      label: Is your suggested enhancement 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
-  - type: textarea
-    attributes:
-      label: Describe the solution you'd like
-      description: A clear and concise description of what you want to happen.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe alternatives you've considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Additional context
-      description: Add any other context or screenshots about the suggested enhancement here.
-    validations:
-      required: false
@@ -0,0 +1,131 @@
+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/**
+          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 libappindicator3-dev librsvg2-dev patchelf libssl-dev sqlite3
+
+      - 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
+            target/release/bundle/*/*.msi.zip
+            target/release/bundle/*/*.msi.zip.sig
+
@@ -0,0 +1,70 @@
+name: CI
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize]
+  merge_group:
+    types: [ checks_requested ]
+
+jobs:
+  build:
+    name: Build, Test, and Lint
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Install build dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Setup Node.JS environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm via corepack
+        shell: bash
+        run: |
+          corepack enable
+          corepack prepare --activate
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test
@@ -1,44 +0,0 @@
-name: CLI Build + Lint
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-env:
-  CARGO_TERM_COLOR: always
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./theseus_cli
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: install dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
-
-      - name: Rust setup
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: './src-tauri -> target'
-
-      - uses: actions-rs/cargo@v1
-        name: Build program
-        with:
-          command: build
-          args: --bin theseus_cli
-
-      - name: Run Lint
-        uses: actions-rs/clippy-check@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          args: --bin theseus_cli
@@ -0,0 +1,28 @@
+name: Deploy frontend
+
+on: push
+
+jobs:
+  wait:
+    if: github.repository_owner == 'modrinth'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    steps:
+      - name: Cloudflare Pages deployment
+        uses: WalshyDev/cf-pages-await@v1
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: '9ddae624c98677d68d93df6e524a6061'
+          project: 'frontend'
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          commitHash: ${{ steps.push-changes.outputs.commit-hash }}
+      - name: Purge cache
+        if: github.ref == 'refs/heads/prod'
+        run: |
+          curl -X POST \
+            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            --data '{"hosts": ["modrinth.com", "www.modrinth.com"]}' \
+            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
@@ -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
@@ -1,109 +0,0 @@
-name: 'Tauri GUI Build'
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-jobs:
-  test-tauri:
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-20.04, ubuntu-22.04]
-
-    runs-on: ${{ matrix.platform }}
-    defaults:
-      run:
-        working-directory: ./theseus_gui
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Rust setup (mac)
-        if: startsWith(matrix.platform, 'macos')
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-          targets: aarch64-apple-darwin
-
-      - name: Rust setup
-        if: "!startsWith(matrix.platform, 'macos')"
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: './src-tauri -> target'
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - name: Install pnpm via corepack
-        shell: bash
-        run: |
-          corepack enable
-          corepack prepare --activate
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: install dependencies (ubuntu only)
-        if: startsWith(matrix.platform, 'ubuntu')
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf libselinux1
-
-      - name: Install frontend dependencies
-        run: pnpm install
-
-      - name: build app (macos)
-        uses: tauri-apps/tauri-action@v0
-        id: build_os_mac
-        if: startsWith(matrix.platform, 'macos')
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-        with:
-          args: --target universal-apple-darwin
-
-      - name: build app
-        uses: tauri-apps/tauri-action@v0
-        id: build_os
-        if: "!startsWith(matrix.platform, 'macos')"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - name: upload ${{ matrix.platform }}
-        uses: actions/upload-artifact@v3
-        if: startsWith(matrix.platform, 'macos')
-        with:
-          name: ${{ matrix.platform }}
-          path: "${{ join(fromJSON(steps.build_os_mac.outputs.artifactPaths), '\n') }}"
-
-      - name: upload ${{ matrix.platform }}
-        uses: actions/upload-artifact@v3
-        if: "!startsWith(matrix.platform, 'macos')"
-        with:
-          name: ${{ matrix.platform }}
-          path: "${{ join(fromJSON(steps.build_os.outputs.artifactPaths), '\n') }}"
@@ -1,114 +1,57 @@
-/target
-node_modules/
-.svelte-kit/
-theseus_gui/build/
-theseus_gui/generated/
-WixTools
-.direnv/
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
 .DS_Store
-.pnpm-debug.log
+Thumbs.db

-minecraft
-config
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache

-[#]*[#]
+# frontend generated files
+apps/frontend/src/generated

-# TEMPORARY: ignore my test instance and metadata
-theseus_cli/foo
-
-### Intellij+all ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
-# CMake
-cmake-build-*/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
-### Intellij+all Patch ###
-# Ignore everything but code style settings and run configurations
-# that are supposed to be shared within teams.
-
-.idea/*
-
-!.idea/codeStyles
-!.idea/runConfigurations
-
-# These are backup files generated by rustfmt
-**/*.rs.bk
-
-# MSVC Windows builds of rustc generate these, which store debugging information
-*.pdb
-
-theseus.iml
+.turbo
+target
+generated
+.env

+# app testing dir
+app-playground-data/*
@@ -0,0 +1,2 @@
+strict-peer-dependencies=false
+auto-install-peers=true
@@ -1,12 +1,3 @@
 {
-  "recommendations": [
-    "tauri-apps.tauri-vscode",
-    "vunguyentuan.vscode-css-variables",
-    "stylelint.vscode-stylelint",
-    "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "pivaszbs.svelte-autoimport",
-    "svelte.svelte-vscode",
-    "ardenivanov.svelte-intellisense"
-  ]
-}
+  "recommendations": ["esbenp.prettier-vscode", "Vue.volar", "rust-lang.rust-analyzer"]
+}
@@ -1,160 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in library 'theseus'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--lib",
-                    "--package=theseus"
-                ],
-                "filter": {
-                    "name": "theseus",
-                    "kind": "lib"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_cli'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_cli",
-                    "--package=theseus_cli"
-                ],
-                "filter": {
-                    "name": "theseus_cli",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_cli'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_cli",
-                    "--package=theseus_cli"
-                ],
-                "filter": {
-                    "name": "theseus_cli",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_playground'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_playground",
-                    "--package=theseus_playground"
-                ],
-                "filter": {
-                    "name": "theseus_playground",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_playground'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_playground",
-                    "--package=theseus_playground"
-                ],
-                "filter": {
-                    "name": "theseus_playground",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug executable 'theseus_gui'",
-            "cargo": {
-                "args": [
-                    "build",
-                    "--bin=theseus_gui",
-                    "--package=theseus_gui"
-                ],
-                "filter": {
-                    "name": "theseus_gui",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Debug unit tests in executable 'theseus_gui'",
-            "cargo": {
-                "args": [
-                    "test",
-                    "--no-run",
-                    "--bin=theseus_gui",
-                    "--package=theseus_gui"
-                ],
-                "filter": {
-                    "name": "theseus_gui",
-                    "kind": "bin"
-                }
-            },
-            "args": [],
-            "cwd": "${workspaceFolder}"
-        },
-        {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Development Debug",
-            "cargo": {
-              "args": [
-                "build",
-                "--manifest-path=./theseus_gui/src-tauri/Cargo.toml",
-                "--no-default-features"
-              ]
-            },
-            "preLaunchTask": "ui:dev"
-          },
-          {
-            "type": "lldb",
-            "request": "launch",
-            "name": "Tauri Production Debug",
-            "cargo": {
-              "args": ["build", "--release", "--manifest-path=.theseus_gui/src-tauri/Cargo.toml"]
-            },
-            "preLaunchTask": "ui:build"
-          }      
-    ]
-}
@@ -1,60 +1,13 @@
 {
-  "cssVariables.lookupFiles": [
-    "**/*.postcss",
-    "**/node_modules/omorphia/**/*.postcss"
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
  ],
-  "cssVariables.blacklistFolders": [
-    "**/.git",
-    "**/.svn",
-    "**/.hg",
-    "**/CVS",
-    "**/.DS_Store",
-    "**/.git",
-    "**/bower_components",
-    "**/tmp",
-    "**/dist",
-    "**/tests"
-  ],
-  "gitlens.showWelcomeOnInstall": false,
-  "gitlens.showWhatsNewAfterUpgrades": false,
-  "gitlens.plusFeatures.enabled": false,
-  "gitlens.currentLine.enabled": false,
-  "gitlens.currentLine.pullRequests.enabled": false,
-  "gitlens.currentLine.scrollable": true,
-  "gitlens.codeLens.enabled": false,
-  "gitlens.hovers.enabled": false,
-  "CSSNavigation.activeCSSFileExtensions": [
-    "css",
-    "postcss"
-  ],
-  "CSSNavigation.activeHTMLFileExtensions": [
-    "html",
-    "svelte",
-    "js",
-    "ts"
-  ],
-  "CSSNavigation.excludeGlobPatterns": [
-    "**/bower_components/**",
-    "**/vendor/**",
-    "**/coverage/**"
-  ],
-  "CSSNavigation.alwaysIncludeGlobPatterns": [
-    "./theseus_gui/node_modules/omorphia/**/*.postcss"
-  ],
-  "html-css-class-completion.HTMLLanguages": [
-    "html",
-    "svelte"
-  ],
-  "html-css-class-completion.includeGlobPattern": "**/*.{postcss,svelte}",
-  "html-css-class-completion.CSSLanguages": [
-    "postcss",
-  ],
-  "svelte.enable-ts-plugin": true,
-  "svelte.ask-to-enable-ts-plugin": false,
-  "svelte.plugin.css.diagnostics.enable": false,
-  "svelte.plugin.svelte.diagnostics.enable": false,
-  "rust-analyzer.linkedProjects": [
-    "./theseus/Cargo.toml"
-  ],
-  "rust-analyzer.showUnlinkedFileNotification": false,
-}
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}
@@ -1,32 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "ui:dev",
-      "type": "shell",
-      // `dev` keeps running in the background
-      // ideally you should also configure a `problemMatcher`
-      // see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
-      "isBackground": true,
-      // change this to your `beforeDevCommand`:
-      "command": "yarn",
-      "args": ["dev"],
-      "options": {
-        "cwd": "${workspaceFolder}/theseus_gui"
-      }
-    },
-    {
-      "label": "ui:build",
-      "type": "shell",
-      // change this to your `beforeBuildCommand`:
-      "command": "yarn",
-      "args": ["build"],
-      "options": {
-        "cwd": "${workspaceFolder}/theseus_gui"
-      }
-    }
-  ]
-
-}
@@ -1,13 +1,13 @@
-# Copying
+# Copying Guidelines

-The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+All packages in this repository are licensed under their respective licenses. For more information, refer to the LICENSE file in each package.

-## Modrinth logo
+For detailed information, consult each package's COPYING.md file, if available.

-Any files depicting the Modrinth branding, including the wrench-in-labyrinth logo, the landing image, and variations thereof, are licensed as follows:
+## Modrinth Branding

-> All rights reserved. © 2020-2023 Rinth, Inc.
+The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.

-This includes, but may not be limited to, the following files:
+All rights reserved. © 2020-2024 Rinth, Inc.

- theseus_gui/src-tauri/icons/*
+If you fork this repository, you must remove all Modrinth branding assets from your fork.
@@ -1,24 +1,11 @@
 [workspace]
-
+resolver = '2'
 members = [
-    "theseus",
-    "theseus_cli",
-    "theseus_playground",
-    "theseus_gui/src-tauri",
-    "theseus_macros"
+  './packages/app-lib',
+	'./apps/app-playground',
+  './apps/app'
 ]

-[profile.dev]
-opt-level = 0
-debug = true
-debug-assertions = true
-overflow-checks = true
-lto = false
-panic = 'unwind'
-incremental = true
-codegen-units = 256
-rpath = false
-
 # Optimize for speed and reduce size on release builds
 [profile.release]
 panic = "abort" # Strip expensive panic clean-up logic
@@ -26,3 +13,6 @@ 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
@@ -1,9 +1,39 @@
-# theseus
-A game launcher which can be used as a CLI, GUI, and a library for creating and playing modrinth projects
+# ![Modrinth Monorepo Cover](/.github/assets/monorepo_cover.png)

-Theseus aims to provide three components:
- A library (theseus)
- A CLI (theseus-cli)
- A GUI (theseus-gui)
+![Issues](https://img.shields.io/github/issues-raw/Modrinth/code?color=c78aff&label=issues&style=for-the-badge)
+![Pull Requests](https://img.shields.io/github/issues-pr-raw/Modrinth/code?color=c78aff&label=PRs&style=for-the-badge)
+![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=c78aff&label=contributors&style=for-the-badge)
+![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/code/badge?style=flat&logoColor=white&color=c78aff&style=for-the-badge)
+![Commit Activity](https://img.shields.io/github/commit-activity/m/Modrinth/code?color=c78aff&label=commits&style=for-the-badge)
+![Last Commit](https://img.shields.io/github/last-commit/Modrinth/code?color=c78aff&label=last%20commit&style=for-the-badge)

-Feel free to contribute!
+## Modrinth Monorepo
+
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines](https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/modrinth/olympus/badge?logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+
+If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).
+
+## Development
+
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
+
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)
+
+## Contributing
+
+We welcome contributions! Before submitting any contributions, please read our [contributing guidelines](https://support.modrinth.com/en/articles/8802215-contributing-to-modrinth).
+
+If you plan to fork this repository for your own purposes, please review our [copying guidelines](COPYING.md).
+
+## Security
+
+If you discover a security vulnerability within our codebase, please follow our [responsible disclosure guidelines](https://modrinth.com/legal/security).
+
+## Support
+
+If you need help with the Modrinth web interface or app, please visit our [support page](https://support.modrinth.com). For general inquiries, you can also join our [Discord server](https://discord.modrinth.com).
+
+## License
+
+All packages in this repository are licensed under their respective licenses. Refer to the LICENSE file in each package for more information.
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom/vue'],
+}
@@ -0,0 +1 @@
+**/dist
@@ -0,0 +1,13 @@
+# Copying
+
+The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+
+## Modrinth logo
+
+The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
+
+> All rights reserved. © 2020-2023 Rinth, Inc.
+
+This includes, but may not be limited to, the following files:
+
+- theseus_gui/src-tauri/icons/\*
@@ -1,10 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" class="dark-mode">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modrinth App</title>
+
+    <link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
  </head>

  <body>
@@ -0,0 +1,48 @@
+{
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.8.3-1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . && prettier --check .",
+    "fix": "eslint . --fix && prettier --write ."
+  },
+  "dependencies": {
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/ui": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@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-window-state": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-shell": "^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",
+    "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",
+    "posthog-js": "^1.158.2",
+    "@sentry/vue": "^8.27.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.0.0-rc",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-custom": "workspace:*",
+    "postcss": "^8.4.39",
+    "prettier": "^3.2.5",
+    "sass": "^1.74.1",
+    "tailwindcss": "^3.4.4",
+    "tsconfig": "workspace:*",
+    "vite": "^5.2.8"
+  },
+  "packageManager": "pnpm@9.4.0"
+}
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
@@ -0,0 +1,516 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue'
+import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
+import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, XIcon } 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'
+import { get } from '@/helpers/settings'
+import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import ErrorModal from '@/components/ui/ErrorModal.vue'
+import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
+import { handleError, useNotifications } from '@/store/notifications.js'
+import { command_listener, warning_listener } from '@/helpers/events.js'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
+import { type } from '@tauri-apps/plugin-os'
+import { isDev, getOS } from '@/helpers/utils.js'
+import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { getVersion } from '@tauri-apps/api/app'
+import URLConfirmModal from '@/components/ui/URLConfirmModal.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'
+
+const themeStore = useTheming()
+
+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 os = ref('')
+
+const stateInitialized = ref(false)
+
+onMounted(async () => {
+  await useCheckDisableMouseover()
+})
+
+async function setupApp() {
+  stateInitialized.value = true
+  const {
+    native_decorations,
+    theme,
+    telemetry,
+    collapsed_navigation,
+    advanced_rendering,
+    onboarded,
+    default_page,
+  } = await get()
+
+  if (default_page && default_page !== 'Home') {
+    await router.push({ name: default_page })
+  }
+
+  os.value = await getOS()
+  const dev = await isDev()
+  const version = await getVersion()
+  showOnboarding.value = !onboarded
+
+  nativeDecorations.value = native_decorations
+  if (os.value !== 'MacOS') await getCurrentWindow().setDecorations(native_decorations)
+
+  themeStore.setThemeState(theme)
+  themeStore.collapsedNavigation = collapsed_navigation
+  themeStore.advancedRendering = advanced_rendering
+
+  initAnalytics()
+  if (!telemetry) {
+    optOutAnalytics()
+  }
+  if (dev) debugAnalytics()
+  trackEvent('Launched', { version, dev, onboarded })
+
+  if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
+
+  const osType = await type()
+  if (osType === 'macos') {
+    document.getElementsByTagName('html')[0].classList.add('mac')
+  } else {
+    document.getElementsByTagName('html')[0].classList.add('windows')
+  }
+
+  await warning_listener((e) =>
+    notificationsWrapper.value.addNotification({
+      title: 'Warning',
+      text: e.message,
+      type: 'warn',
+    }),
+  )
+
+  get_opening_command().then(handleCommand)
+}
+
+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 () => {
+  await getCurrentWindow().close()
+}
+
+const router = useRouter()
+router.afterEach((to, from, failure) => {
+  trackEvent('PageView', { path: to.path, fromPath: from.path, failed: failure })
+})
+const route = useRoute()
+const isOnBrowse = computed(() => route.path.startsWith('/browse'))
+
+const loading = useLoading()
+loading.setEnabled(false)
+
+const notifications = useNotifications()
+const notificationsWrapper = ref()
+
+const error = useError()
+const errorModal = ref()
+
+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) {
+  let target = e.target
+  while (target != null) {
+    if (target.matches('a')) {
+      if (
+        target.href &&
+        ['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')
+      ) {
+        open(target.href)
+      }
+      e.preventDefault()
+      break
+    }
+    target = target.parentElement
+  }
+})
+
+document.querySelector('body').addEventListener('auxclick', function (e) {
+  // disables middle click -> new tab
+  if (e.button === 1) {
+    e.preventDefault()
+    // instead do a left click
+    const event = new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+    })
+    e.target.dispatchEvent(event)
+  }
+})
+
+const accounts = ref(null)
+
+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)
+      trackEvent('InstanceCreate', {
+        source: 'CreationModalFileDrop',
+      })
+    }
+  } else {
+    // Other commands are URL-based (deep linking)
+    urlModal.value.show(e)
+  }
+}
+</script>
+
+<template>
+  <SplashScreen v-if="!stateFailed" ref="splashScreen" data-tauri-drag-region />
+  <div v-if="stateInitialized" class="app-container">
+    <div class="nav-container">
+      <div class="nav-section">
+        <suspense>
+          <AccountsCard ref="accounts" mode="small" />
+        </suspense>
+        <div class="pages-list">
+          <RouterLink v-tooltip="'Home'" to="/" class="btn icon-only collapsed-button">
+            <HomeIcon />
+          </RouterLink>
+          <RouterLink
+            v-tooltip="'Browse'"
+            to="/browse/modpack"
+            class="btn icon-only collapsed-button"
+            :class="{
+              'router-link-active': isOnBrowse,
+            }"
+          >
+            <SearchIcon />
+          </RouterLink>
+          <RouterLink v-tooltip="'Library'" to="/library" class="btn icon-only collapsed-button">
+            <LibraryIcon />
+          </RouterLink>
+          <Suspense>
+            <InstanceCreationModal ref="installationModal" />
+          </Suspense>
+        </div>
+      </div>
+      <div class="settings pages-list">
+        <Button
+          v-tooltip="'Create profile'"
+          class="sleek-primary collapsed-button"
+          icon-only
+          :disabled="offline"
+          @click="() => $refs.installationModal.show()"
+        >
+          <PlusIcon />
+        </Button>
+        <RouterLink v-tooltip="'Settings'" to="/settings" class="btn icon-only collapsed-button">
+          <SettingsIcon />
+        </RouterLink>
+      </div>
+    </div>
+    <div class="view">
+      <div class="appbar-row">
+        <div data-tauri-drag-region class="appbar">
+          <section class="navigation-controls">
+            <Breadcrumbs data-tauri-drag-region />
+          </section>
+          <section class="mod-stats">
+            <Suspense>
+              <RunningAppBar />
+            </Suspense>
+          </section>
+        </div>
+        <section v-if="!nativeDecorations" class="window-controls">
+          <Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
+            <MinimizeIcon />
+          </Button>
+          <Button
+            class="titlebar-button"
+            icon-only
+            @click="() => getCurrentWindow().toggleMaximize()"
+          >
+            <MaximizeIcon />
+          </Button>
+          <Button class="titlebar-button close" icon-only @click="handleClose">
+            <XIcon />
+          </Button>
+        </section>
+      </div>
+      <div class="router-view">
+        <ModrinthLoadingIndicator
+          offset-height="var(--appbar-height)"
+          offset-width="var(--sidebar-width)"
+        />
+        <RouterView v-slot="{ Component }">
+          <template v-if="Component">
+            <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
+              <component :is="Component"></component>
+            </Suspense>
+          </template>
+        </RouterView>
+      </div>
+    </div>
+  </div>
+  <URLConfirmModal ref="urlModal" />
+  <Notifications ref="notificationsWrapper" />
+  <ErrorModal ref="errorModal" />
+  <ModInstallModal ref="modInstallModal" />
+  <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
+  <InstallConfirmModal ref="installConfirmModal" />
+</template>
+
+<style lang="scss" scoped>
+.sleek-primary {
+  background-color: var(--color-brand-highlight);
+  transition: all ease-in-out 0.1s;
+}
+
+.navigation-controls {
+  flex-grow: 1;
+  width: min-content;
+}
+
+.appbar-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.window-controls {
+  z-index: 20;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+    border-radius: 0;
+    height: 3.25rem;
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+
+.app-container {
+  --appbar-height: 3.25rem;
+  --sidebar-width: 4.5rem;
+
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  .view {
+    width: calc(100% - var(--sidebar-width));
+    background-color: var(--color-raised-bg);
+
+    .appbar {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      background: var(--color-raised-bg);
+      text-align: center;
+      padding: var(--gap-md);
+      height: 3.25rem;
+      gap: var(--gap-sm);
+      //no select
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .router-view {
+      width: 100%;
+      height: calc(100% - 3.125rem);
+      overflow: auto;
+      overflow-x: hidden;
+      background-color: var(--color-bg);
+      border-top-left-radius: var(--radius-xl);
+    }
+  }
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+  padding: var(--gap-md);
+}
+
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 0.5rem;
+
+  a {
+    display: flex;
+    align-items: center;
+    word-spacing: 3px;
+    background: inherit;
+    transition: all ease-in-out 0.1s;
+    color: var(--color-base);
+    box-shadow: none;
+
+    &.router-link-active {
+      color: var(--color-contrast);
+      background: var(--color-button-bg);
+      box-shadow: var(--shadow-floating);
+    }
+
+    &:hover {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      text-decoration: none;
+    }
+  }
+
+  &.primary {
+    color: var(--color-accent-contrast);
+    background-color: var(--color-brand);
+  }
+}
+
+.collapsed-button {
+  height: 3rem !important;
+  width: 3rem !important;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  box-shadow: none;
+
+  svg {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    max-width: 1.5rem !important;
+    max-height: 1.5rem !important;
+  }
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--gap-md);
+
+  .transparent {
+    padding: var(--gap-sm) 0;
+  }
+}
+</style>
+<style>
+.mac {
+  .nav-container {
+    padding-top: calc(var(--gap-md) + 1.75rem);
+  }
+
+  .account-card,
+  .card-section {
+    top: calc(var(--gap-md) + 1.75rem);
+  }
+}
+
+.windows {
+  .fake-appbar {
+    height: 2.5rem !important;
+  }
+
+  .window-controls {
+    display: flex !important;
+  }
+
+  .info-card {
+    right: 8rem;
+  }
+
+  .profile-card {
+    right: 8rem;
+  }
+}
+</style>
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
  font-family: var(--font-standard);
  color-scheme: dark;
@@ -69,44 +73,15 @@ input {
  }
 }

-.mac {
-  .nav-container {
-    padding-top: calc(var(--gap-md) + 1.75rem);
-  }
-
-  .account-card,
-  .card-section {
-    top: calc(var(--gap-md) + 1.75rem);
-  }
-}
-
-.windows {
-  .fake-appbar {
-    height: 2.5rem !important;
-  }
-
-  .window-controls {
-    display: flex !important;
-  }
-
-  .info-card {
-    right: 8rem;
-  }
-
-  .profile-card {
-    right: 8rem;
-  }
-}
-
 * {
  scrollbar-width: auto;
-  scrollbar-color: var(--color-button-bg) var(--color-bg);
+  scrollbar-color: var(--color-scrollbar) var(--color-bg);
 }

 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
  width: var(--gap-md);
-  border: 3px solid var(--color-bg);
+  border: 3px solid var(--color-scrollbar);
 }

 *::-webkit-scrollbar-track {
@@ -115,7 +90,7 @@ input {
 }

 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-button-bg);
+  background-color: var(--color-scrollbar);
  border-radius: var(--radius-lg);
  border: 3px solid var(--color-bg);
 }
@@ -135,3 +110,5 @@ img {
  -moz-user-select: none;
  -ms-user-select: none;
 }
+
+@import '@modrinth/assets/omorphia.scss';
@@ -9,14 +9,11 @@ import {
  TrashIcon,
  StopCircleIcon,
  EyeIcon,
-  Card,
-  DropdownSelect,
  SearchIcon,
  XIcon,
-  Button,
-  formatCategoryHeader,
-  ModalConfirm,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { ConfirmModal, Button, Card, DropdownSelect } from '@modrinth/ui'
+import { formatCategoryHeader } from '@modrinth/utils'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import dayjs from 'dayjs'
 import { useTheming } from '@/store/theme.js'
@@ -45,7 +42,7 @@ const confirmModal = ref(null)
 async function deleteProfile() {
  if (currentDeleteInstance.value) {
    instanceComponents.value = instanceComponents.value.filter(
-      (x) => x.instance.path !== currentDeleteInstance.value
+      (x) => x.instance.path !== currentDeleteInstance.value,
    )
    await remove(currentDeleteInstance.value).catch(handleError)
  }
@@ -88,7 +85,7 @@ const handleRightClick = (event, profilePathId) => {
            color: 'primary',
          },
          ...baseOptions,
-        ]
+        ],
  )
 }

@@ -130,46 +127,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 +174,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 +183,19 @@ const filteredResults = computed(() => {
    })
  } else if (group.value === 'Game version') {
    instances.forEach((instance) => {
-      if (!instanceMap.has(instance.metadata.game_version)) {
-        instanceMap.set(instance.metadata.game_version, [])
+      if (!instanceMap.has(instance.game_version)) {
+        instanceMap.set(instance.game_version, [])
      }

-      instanceMap.get(instance.metadata.game_version).push(instance)
+      instanceMap.get(instance.game_version).push(instance)
    })
  } else if (group.value === 'Category') {
    instances.forEach((instance) => {
-      if (instance.metadata.groups.length === 0) {
-        instance.metadata.groups.push('None')
+      if (instance.groups.length === 0) {
+        instance.groups.push('None')
      }

-      for (const category of instance.metadata.groups) {
+      for (const category of instance.groups) {
        if (!instanceMap.has(category)) {
          instanceMap.set(category, [])
        }
@@ -233,7 +230,7 @@ const filteredResults = computed(() => {
 })
 </script>
 <template>
-  <ModalConfirm
+  <ConfirmModal
    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."
@@ -246,7 +243,7 @@ const filteredResults = computed(() => {
    <div class="iconified-input">
      <SearchIcon />
      <input v-model="search" type="text" placeholder="Search" class="search-input" />
-      <Button @click="() => (search = '')">
+      <Button class="r-btn" @click="() => (search = '')">
        <XIcon />
      </Button>
    </div>
@@ -11,27 +11,21 @@ import {
  ExternalIcon,
  EyeIcon,
  ChevronRightIcon,
-  ModalConfirm,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
 import Instance from '@/components/ui/Instance.vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ProjectCard from '@/components/ui/ProjectCard.vue'
-import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
-import ModInstallModal from '@/components/ui/ModInstallModal.vue'
-import {
-  get_all_running_profile_paths,
-  get_uuids_by_profile_path,
-  kill_by_uuid,
-} from '@/helpers/process.js'
+import { get_by_profile_path } from '@/helpers/process.js'
 import { handleError } from '@/store/notifications.js'
-import { duplicate, remove, run } from '@/helpers/profile.js'
+import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
 import { showProfileInFolder } from '@/helpers/utils.js'
-import { useFetch } from '@/helpers/fetch.js'
-import { install as pack_install } from '@/helpers/pack.js'
 import { useTheming } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { trackEvent } from '@/helpers/analytics'
+import { handleSevereError } from '@/store/error.js'
+import { install as installVersion } from '@/store/install.js'

 const router = useRouter()

@@ -50,16 +44,14 @@ const props = defineProps({
 })

 const actualInstances = computed(() =>
-  props.instances.filter((x) => x && x.instances && x.instances[0])
+  props.instances.filter((x) => x && x.instances && x.instances[0]),
 )

 const modsRow = ref(null)
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
 const rows = ref(null)
-const confirmModal = ref(null)
 const deleteConfirmModal = ref(null)
-const modInstallModal = ref(null)

 const themeStore = useTheming()
 const currentDeleteInstance = ref(null)
@@ -89,23 +81,24 @@ const handleInstanceRightClick = async (event, passedInstance) => {
    },
  ]

-  const running = await get_all_running_profile_paths().catch(handleError)
+  const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)

-  const options = running.includes(passedInstance.path)
-    ? [
-        {
-          name: 'stop',
-          color: 'danger',
-        },
-        ...baseOptions,
-      ]
-    : [
-        {
-          name: 'play',
-          color: 'primary',
-        },
-        ...baseOptions,
-      ]
+  const options =
+    runningProcesses.length > 0
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ]

  instanceOptions.value.showMenu(event, passedInstance, options)
 }
@@ -129,24 +122,24 @@ const handleProjectClick = (event, passedInstance) => {
 const handleOptionsClick = async (args) => {
  switch (args.option) {
    case 'play':
-      await run(args.item.path).catch(handleError)
-      mixpanel_track('InstanceStart', {
-        loader: args.item.metadata.loader,
-        game_version: args.item.metadata.game_version,
+      await run(args.item.path).catch((err) =>
+        handleSevereError(err, { profilePath: args.item.path }),
+      )
+      trackEvent('InstanceStart', {
+        loader: args.item.loader,
+        game_version: args.item.game_version,
      })
      break
    case 'stop':
-      for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
-        await kill_by_uuid(u).catch(handleError)
-      }
-      mixpanel_track('InstanceStop', {
-        loader: args.item.metadata.loader,
-        game_version: args.item.metadata.game_version,
+      await kill(args.item.path).catch(handleError)
+      trackEvent('InstanceStop', {
+        loader: args.item.loader,
+        game_version: args.item.game_version,
      })
      break
    case 'add_content':
      await router.push({
-        path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
        query: { i: args.item.path },
      })
      break
@@ -169,21 +162,8 @@ const handleOptionsClick = async (args) => {
      await navigator.clipboard.writeText(args.item.path)
      break
    case 'install': {
-      const versions = await useFetch(
-        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
-        'project versions'
-      )
+      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')

-      if (args.item.project_type === 'modpack') {
-        await pack_install(
-          args.item.project_id,
-          versions[0].id,
-          args.item.title,
-          args.item.icon_url
-        )
-      } else {
-        modInstallModal.value.show(args.item.project_id, versions)
-      }
      break
    }
    case 'open_link':
@@ -197,7 +177,7 @@ const handleOptionsClick = async (args) => {
      break
    case 'copy_link':
      await navigator.clipboard.writeText(
-        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
      )
      break
  }
@@ -227,7 +207,7 @@ onUnmounted(() => {
 </script>

 <template>
-  <ModalConfirm
+  <ConfirmModal
    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."
@@ -242,7 +222,7 @@ onUnmounted(() => {
        <router-link :to="row.route">{{ row.label }}</router-link>
        <ChevronRightIcon />
      </div>
-      <section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
+      <section v-if="row.instance" ref="modsRow" class="instances">
        <Instance
          v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
          :key="(instance?.project_id || instance?.id) + instance.install_stage"
@@ -257,8 +237,6 @@ onUnmounted(() => {
          ref="instanceComponents"
          class="item"
          :project="project"
-          :confirm-modal="confirmModal"
-          :mod-install-modal="modInstallModal"
          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
        />
      </section>
@@ -277,8 +255,6 @@ onUnmounted(() => {
    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
  </ContextMenu>
-  <InstallConfirmModal ref="confirmModal" />
-  <ModInstallModal ref="modInstallModal" />
 </template>
 <style lang="scss" scoped>
 .content {
@@ -40,10 +40,12 @@ export default defineComponent({
    const loading = useLoading()

    watch(loading, (newValue) => {
-      if (newValue.loading) {
-        indicator.start()
-      } else {
-        indicator.finish()
+      if (newValue.barEnabled) {
+        if (newValue.loading) {
+          indicator.start()
+        } else {
+          indicator.finish()
+        }
      }
    })

@@ -66,7 +68,7 @@ export default defineComponent({
            zIndex: 6,
          },
        },
-        slots
+        slots,
      )
  },
 })
@@ -42,7 +42,7 @@
      <div v-if="displayAccounts.length > 0" class="account-group">
        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
          <Button class="option account" @click="setAccount(account)">
-            <Avatar :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" class="icon" />
+            <Avatar :src="`https://mc-heads.net/avatar/${account.id}/128`" class="icon" />
            <p>{{ account.username }}</p>
          </Button>
          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
@@ -56,68 +56,23 @@
      </Button>
    </Card>
  </transition>
-  <Modal ref="loginModal" class="modal" header="Signing in" :noblur="!themeStore.advancedRendering">
-    <div class="modal-body">
-      <QrcodeVue :value="loginUrl" class="qr-code" margin="3" size="160" />
-      <div class="modal-text">
-        <div class="label">Copy this code</div>
-        <div class="code-text">
-          <div class="code">
-            {{ loginCode }}
-          </div>
-          <Button
-            v-tooltip="'Copy code'"
-            icon-only
-            large
-            color="raised"
-            @click="() => clipboardWrite(loginCode)"
-          >
-            <ClipboardCopyIcon />
-          </Button>
-        </div>
-        <div>And enter it on Microsoft's website to sign in.</div>
-        <div class="iconified-input">
-          <LogInIcon />
-          <input type="text" :value="loginUrl" readonly />
-          <Button
-            v-tooltip="'Open link'"
-            icon-only
-            color="raised"
-            @click="() => clipboardWrite(loginUrl)"
-          >
-            <GlobeIcon />
-          </Button>
-        </div>
-      </div>
-    </div>
-  </Modal>
 </template>

 <script setup>
-import {
-  Avatar,
-  Button,
-  Card,
-  PlusIcon,
-  TrashIcon,
-  LogInIcon,
-  Modal,
-  GlobeIcon,
-  ClipboardCopyIcon,
-} from 'omorphia'
+import { PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
  users,
  remove_user,
-  authenticate_begin_flow,
-  authenticate_await_completion,
+  set_default_user,
+  login as login_flow,
+  get_default_user,
 } from '@/helpers/auth'
-import { get, set } from '@/helpers/settings'
 import { handleError } from '@/store/state.js'
-import { useTheming } from '@/store/theme.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
-import QrcodeVue from 'qrcode.vue'
+import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
+import { handleSevereError } from '@/store/error.js'

 defineProps({
  mode: {
@@ -129,16 +84,11 @@ defineProps({

 const emit = defineEmits(['change'])

-const loginCode = ref(null)
-
-const themeStore = useTheming()
-const settings = ref({})
-const accounts = ref([])
-const loginUrl = ref('')
-const loginModal = ref(null)
+const accounts = ref({})
+const defaultUser = ref()

 async function refreshValues() {
-  settings.value = await get().catch(handleError)
+  defaultUser.value = await get_default_user().catch(handleError)
  accounts.value = await users().catch(handleError)
 }
 defineExpose({
@@ -147,47 +97,28 @@ defineExpose({
 await refreshValues()

 const displayAccounts = computed(() =>
-  accounts.value.filter((account) => settings.value.default_user !== account.id)
+  accounts.value.filter((account) => defaultUser.value !== account.id),
 )

 const selectedAccount = computed(() =>
-  accounts.value.find((account) => account.id === settings.value.default_user)
+  accounts.value.find((account) => account.id === defaultUser.value),
 )

 async function setAccount(account) {
-  settings.value.default_user = account.id
-  await set(settings.value).catch(handleError)
+  defaultUser.value = account.id
+  await set_default_user(account.id).catch(handleError)
  emit('change')
 }

-const clipboardWrite = async (a) => {
-  navigator.clipboard.writeText(a)
-}
-
 async function login() {
-  const loginSuccess = await authenticate_begin_flow().catch(handleError)
-
-  loginModal.value.show()
-  loginCode.value = loginSuccess.user_code
-  loginUrl.value = loginSuccess.verification_uri
-  await window.__TAURI_INVOKE__('tauri', {
-    __tauriModule: 'Shell',
-    message: {
-      cmd: 'open',
-      path: loginSuccess.verification_uri,
-    },
-  })
-
-  const loggedIn = await authenticate_await_completion().catch(handleError)
-  loginModal.value.hide()
+  const loggedIn = await login_flow().catch(handleSevereError)

  if (loggedIn) {
    await setAccount(loggedIn)
    await refreshValues()
  }

-  loginModal.value.hide()
-  mixpanel_track('AccountLogIn')
+  trackEvent('AccountLogIn')
 }

 const logout = async (id) => {
@@ -199,7 +130,7 @@ const logout = async (id) => {
  } else {
    emit('change')
  }
-  mixpanel_track('AccountLogOut')
+  trackEvent('AccountLogOut')
 }

 let showCard = ref(false)
@@ -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).catch(handleError)
+  }
+}
+
+const handleSearchContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+</script>
+
+<template>
+  <div class="joined-buttons">
+    <Button color="primary" @click="handleSearchContent"><SearchIcon /> Add content </Button>
+
+    <OverflowMenu
+      :options="[
+        {
+          id: 'search',
+          action: handleSearchContent,
+        },
+        {
+          id: 'from_file',
+          action: handleAddContentFromFile,
+        },
+      ]"
+      class="btn btn-primary btn-dropdown-animation icon-only"
+    >
+      <DropdownIcon />
+      <template #search>
+        <SearchIcon />
+        <span class="no-wrap"> Search </span>
+      </template>
+      <template #from_file>
+        <FolderOpenIcon />
+        <span class="no-wrap"> Add from file </span>
+      </template>
+    </OverflowMenu>
+  </div>
+</template>
@@ -31,7 +31,8 @@
 </template>

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

@@ -22,7 +23,7 @@ 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([])
@@ -49,9 +50,9 @@ const initFiles = async () => {
        disabled:
          folder === 'profile.json' ||
          folder.startsWith('modrinth_logs') ||
-          folder.startsWith('.fabric') ||
-          folder.includes('.DS_Store'),
+          folder.startsWith('.fabric'),
      }))
+      .filter((pathData) => !pathData.path.includes('.DS_Store'))
      .forEach((pathData) => {
        const parent = pathData.path.split(sep).slice(0, -1).join(sep)
        if (parent !== '') {
@@ -63,7 +64,7 @@ const initFiles = async () => {
        } else {
          files.value.push(pathData)
        }
-      })
+      }),
  )
  folders.value = [...newFolders.entries()].map(([name, value]) => [
    {
@@ -97,7 +98,7 @@ const exportPack = async () => {
      filesToExport,
      versionInput.value,
      exportDescription.value,
-      nameInput.value
+      nameInput.value,
    ).catch((err) => handleError(err))
    exportModal.value.hide()
  }
@@ -112,7 +113,7 @@ const exportPack = async () => {
        <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 +123,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>
@@ -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>
@@ -110,7 +110,7 @@
              placeholder="Path to launcher"
              @change="setPath"
            />
-            <Button @click="() => (selectedLauncherPath = '')">
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
              <XIcon />
            </Button>
          </div>
@@ -177,14 +177,14 @@
            loading
              ? 'Importing...'
              : Array.from(profiles.values())
-                  .flatMap((e) => e)
-                  .some((e) => e.selected)
-              ? `Import ${
-                  Array.from(profiles.values())
                    .flatMap((e) => e)
-                    .filter((e) => e.selected).length
-                } profiles`
-              : 'Select profiles to import'
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(profiles.values())
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } profiles`
+                : 'Select profiles to import'
          }}
        </Button>
        <ProgressBar
@@ -198,35 +198,25 @@

 <script setup>
 import {
-  Avatar,
-  Button,
-  Chips,
-  Modal,
  PlusIcon,
  UploadIcon,
  XIcon,
  CodeIcon,
-  Checkbox,
  FolderOpenIcon,
  InfoIcon,
  FolderSearchIcon,
  UpdatedIcon,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { Avatar, Button, Chips, Modal, Checkbox } from '@modrinth/ui'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
 import { get_loaders } from '@/helpers/tags'
 import { create } from '@/helpers/profile'
-import { open } from '@tauri-apps/api/dialog'
-import { tauri } from '@tauri-apps/api'
-import {
-  get_game_versions,
-  get_fabric_versions,
-  get_forge_versions,
-  get_quilt_versions,
-  get_neoforge_versions,
-} from '@/helpers/metadata'
+import { open } from '@tauri-apps/plugin-dialog'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { 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'
@@ -274,13 +264,13 @@ defineExpose({
      hide()
      if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
        await install_from_file(event.payload[0]).catch(handleError)
-        mixpanel_track('InstanceCreate', {
+        trackEvent('InstanceCreate', {
          source: 'CreationModalFileDrop',
        })
      }
    })

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

@@ -308,16 +298,16 @@ const [
  all_game_versions,
  loaders,
 ] = await Promise.all([
-  get_fabric_versions().then(shallowRef).catch(handleError),
-  get_forge_versions().then(shallowRef).catch(handleError),
-  get_quilt_versions().then(shallowRef).catch(handleError),
-  get_neoforge_versions().then(shallowRef).catch(handleError),
+  get_loader_versions('fabric').then(shallowRef).catch(handleError),
+  get_loader_versions('forge').then(shallowRef).catch(handleError),
+  get_loader_versions('quilt').then(shallowRef).catch(handleError),
+  get_loader_versions('neo').then(shallowRef).catch(handleError),
  get_game_versions().then(shallowRef).catch(handleError),
  get_loaders()
    .then((value) =>
      value
        .filter((item) => item.supported_project_types.includes('modpack'))
-        .map((item) => item.name.toLowerCase())
+        .map((item) => item.name.toLowerCase()),
    )
    .then(ref)
    .catch(handleError),
@@ -367,10 +357,10 @@ const create_instance = async () => {
    game_version.value,
    loader.value,
    loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
-    icon.value
+    icon.value,
  ).catch(handleError)

-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
    profile_name: profile_name.value,
    game_version: game_version.value,
    loader: loader.value,
@@ -392,7 +382,7 @@ const upload_icon = async () => {
  })

  if (!icon.value) return
-  display_icon.value = tauri.convertFileSrc(icon.value)
+  display_icon.value = convertFileSrc(icon.value)
 }

 const reset_icon = () => {
@@ -429,7 +419,7 @@ const openFile = async () => {
  hide()
  await install_from_file(newProject).catch(handleError)

-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
    source: 'CreationModalFileOpen',
  })
 }
@@ -441,7 +431,7 @@ const profiles = ref(
    ['ATLauncher', []],
    ['Curseforge', []],
    ['PrismLauncher', []],
-  ])
+  ]),
 )

 const loading = ref(false)
@@ -470,7 +460,7 @@ const promises = profileOptions.value.map(async (option) => {
    profileOptions.value.find((profile) => profile.name === option.name).path = path
    profiles.value.set(
      option.name,
-      instances.map((name) => ({ name, selected: false }))
+      instances.map((name) => ({ name, selected: false })),
    )
  } catch (error) {
    // Allow failure silently
@@ -489,12 +479,12 @@ const selectLauncherPath = async () => {
 const reload = async () => {
  const instances = await get_importable_instances(
    selectedProfileType.value.name,
-    selectedProfileType.value.path
+    selectedProfileType.value.path,
  ).catch(handleError)
  if (instances) {
    profiles.value.set(
      selectedProfileType.value.name,
-      instances.map((name) => ({ name, selected: false }))
+      instances.map((name) => ({ name, selected: false })),
    )
  } else {
    profiles.value.set(selectedProfileType.value.name, [])
@@ -35,17 +35,13 @@
  </Modal>
 </template>
 <script setup>
-import { Modal, PlusIcon, CheckIcon, Button, XIcon } from 'omorphia'
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { Modal, Button } from '@modrinth/ui'
 import { ref } from 'vue'
-import {
-  find_jre_17_jres,
-  find_jre_18plus_jres,
-  find_jre_8_jres,
-  get_all_jre,
-} from '@/helpers/jre.js'
+import { find_filtered_jres } from '@/helpers/jre.js'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
+import { trackEvent } from '@/helpers/analytics'

 const themeStore = useTheming()

@@ -55,15 +51,7 @@ const currentSelected = ref({})

 defineExpose({
  show: async (version, currentSelectedJava) => {
-    if (version <= 8 && !!version) {
-      chosenInstallOptions.value = await find_jre_8_jres().catch(handleError)
-    } else if (version >= 18) {
-      chosenInstallOptions.value = await find_jre_18plus_jres().catch(handleError)
-    } else if (version) {
-      chosenInstallOptions.value = await find_jre_17_jres().catch(handleError)
-    } else {
-      chosenInstallOptions.value = await get_all_jre().catch(handleError)
-    }
+    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)

    currentSelected.value = currentSelectedJava
    if (!currentSelected.value) {
@@ -79,7 +67,7 @@ const emit = defineEmits(['submit'])
 function setJavaInstall(javaInstall) {
  emit('submit', javaInstall)
  detectJavaModal.value.hide()
-  mixpanel_track('JavaAutoDetect', {
+  trackEvent('JavaAutoDetect', {
    path: javaInstall.path,
    version: javaInstall.version,
  })
@@ -53,26 +53,20 @@

 <script setup>
 import {
-  Button,
  SearchIcon,
  PlayIcon,
  CheckIcon,
  XIcon,
  FolderSearchIcon,
  DownloadIcon,
-} from 'omorphia'
-import {
-  auto_install_java,
-  find_jre_17_jres,
-  find_jre_8_jres,
-  get_jre,
-  test_jre,
-} from '@/helpers/jre.js'
+} from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
 import { ref } from 'vue'
-import { open } from '@tauri-apps/api/dialog'
+import { open } from '@tauri-apps/plugin-dialog'
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'

 const props = defineProps({
  version: {
@@ -82,7 +76,10 @@ const props = defineProps({
  },
  modelValue: {
    type: Object,
-    required: true,
+    default: () => ({
+      path: '',
+      version: '',
+    }),
  },
  disabled: {
    type: Boolean,
@@ -112,11 +109,11 @@ async function testJava() {
  testingJavaSuccess.value = await test_jre(
    props.modelValue ? props.modelValue.path : '',
    1,
-    props.version
+    props.version,
  )
  testingJava.value = false

-  mixpanel_track('JavaTest', {
+  trackEvent('JavaTest', {
    path: props.modelValue ? props.modelValue.path : '',
    success: testingJavaSuccess.value,
  })
@@ -139,7 +136,7 @@ async function handleJavaFileInput() {
      }
    }

-    mixpanel_track('JavaManualSelect', {
+    trackEvent('JavaManualSelect', {
      path: filePath,
      version: props.version,
    })
@@ -153,16 +150,9 @@ async function autoDetect() {
  if (!props.compact) {
    detectJavaModal.value.show(props.version, props.modelValue)
  } else {
-    if (props.version == 8) {
-      let versions = await find_jre_8_jres().catch(handleError)
-      if (versions.length > 0) {
-        emit('update:modelValue', versions[0])
-      }
-    } else {
-      let versions = await find_jre_17_jres().catch(handleError)
-      if (versions.length > 0) {
-        emit('update:modelValue', versions[0])
-      }
+    let versions = await find_filtered_jres(props.version).catch(handleError)
+    if (versions.length > 0) {
+      emit('update:modelValue', versions[0])
    }
  }
 }
@@ -170,10 +160,8 @@ async function autoDetect() {
 async function reinstallJava() {
  installingJava.value = true
  const path = await auto_install_java(props.version).catch(handleError)
-  console.log('java path: ' + path)
  let result = await get_jre(path)

-  console.log('java result ' + result)
  if (!result) {
    result = {
      path: path,
@@ -182,7 +170,7 @@ async function reinstallJava() {
    }
  }

-  mixpanel_track('JavaReInstall', {
+  trackEvent('JavaReInstall', {
    path: path,
    version: props.version,
  })
@@ -216,6 +204,10 @@ async function reinstallJava() {
  align-items: center;
  gap: 0.5rem;
  margin: 0;
+
+  .btn {
+    width: max-content;
+  }
 }

 .test-success {
@@ -1,5 +1,6 @@
 <script setup>
-import { Button, Modal, CheckIcon, Badge } from 'omorphia'
+import { CheckIcon } from '@modrinth/assets'
+import { Button, Modal, Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 import { useTheming } from '@/store/theme'
 import { update_managed_modrinth_version } from '@/helpers/profile'
@@ -28,7 +29,7 @@ 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)

@@ -49,7 +50,7 @@ const switchVersion = async (versionId) => {
    :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" />
@@ -1,22 +1,13 @@
 <script setup>
-import {
-  Card,
-  Avatar,
-  Button,
-  formatNumber,
-  formatCategory,
-  DownloadIcon,
-  HeartIcon,
-  CalendarIcon,
-} from 'omorphia'
+import { Card, Avatar, Button } from '@modrinth/ui'
+import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
+import { formatNumber, formatCategory } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useRouter } from 'vue-router'
-import { useFetch } from '@/helpers/fetch.js'
-import { list } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
-import { install as pack_install } from '@/helpers/pack.js'
+import { install as installVersion } from '@/store/install.js'
+
 dayjs.extend(relativeTime)

 const router = useRouter()
@@ -29,18 +20,6 @@ const props = defineProps({
      return {}
    },
  },
-  confirmModal: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  modInstallModal: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
 })

 const toColor = computed(() => {
@@ -72,40 +51,15 @@ const toTransparent = computed(() => {
 const install = async (e) => {
  e?.stopPropagation()
  installing.value = true
-  const versions = await useFetch(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
-    'project versions'
-  )
-
-  if (props.project.project_type === 'modpack') {
-    const packs = Object.values(await list(true).catch(handleError))
-
-    if (
-      packs.length === 0 ||
-      !packs
-        .map((value) => value.metadata)
-        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
-    ) {
-      installing.value = true
-      await pack_install(
-        props.project.project_id,
-        versions[0].id,
-        props.project.title,
-        props.project.icon_url
-      ).catch(handleError)
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'ProjectCard',
+    () => {
      installing.value = false
-    } else
-      props.confirmModal.show(
-        props.project.project_id,
-        versions[0].id,
-        props.project.title,
-        props.project.icon_url
-      )
-  } else {
-    props.modInstallModal.show(props.project.project_id, versions)
-  }
-
-  installing.value = false
+    },
+  )
 }
 </script>

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Promotion } from '@modrinth/ui'
+import { get as getCreds } from '@/helpers/mr_auth.js'
+import { handleError } from '@/store/notifications.js'
+import { get_user } from '@/helpers/cache.js'
+
+const showAd = ref(true)
+
+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
+  }
+}
+</script>
+
+<template>
+  <Promotion v-if="showAd" :external="false" query-param="?r=launcher" />
+</template>
@@ -1,6 +1,6 @@
 <template>
  <div class="action-groups">
-    <a href="https://discord.modrinth.com" class="link">
+    <a href="https://support.modrinth.com" class="link">
      <ChatIcon />
      <span> Get support </span>
    </a>
@@ -15,15 +15,15 @@
    </Button>
    <div v-if="offline" class="status">
      <span class="circle stopped" />
-      <div class="running-text clickable" @click="refreshInternet()">
+      <div class="running-text">
        <span> Offline </span>
      </div>
    </div>
-    <div v-if="selectedProfile" class="status">
+    <div v-if="selectedProcess" class="status">
      <span class="circle running" />
      <div ref="profileButton" class="running-text">
-        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
-          {{ selectedProfile.metadata.name }}
+        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+          {{ selectedProcess.profile.name }}
        </router-link>
        <div
          v-if="currentProcesses.length > 1"
@@ -34,7 +34,12 @@
          <DropdownIcon />
        </div>
      </div>
-      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
+      <Button
+        v-tooltip="'Stop instance'"
+        icon-only
+        class="icon-button stop"
+        @click="stop(selectedProcess)"
+      >
        <StopCircleIcon />
      </Button>
      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
@@ -75,17 +80,17 @@
      class="profile-card"
    >
      <Button
-        v-for="profile in currentProcesses"
-        :key="profile.id"
+        v-for="process in currentProcesses"
+        :key="process.uuid"
        class="profile-button"
-        @click="selectProfile(profile)"
+        @click="selectProcess(process)"
      >
-        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
        <Button
          v-tooltip="'Stop instance'"
          icon-only
          class="icon-button stop"
-          @click.stop="stop(profile.path)"
+          @click.stop="stop(process)"
        >
          <StopCircleIcon />
        </Button>
@@ -93,7 +98,7 @@
          v-tooltip="'View logs'"
          icon-only
          class="icon-button"
-          @click.stop="goToTerminal(profile.path)"
+          @click.stop="goToTerminal(process.profile.path)"
        >
          <TerminalSquareIcon />
        </Button>
@@ -103,28 +108,18 @@
 </template>

 <script setup>
-import {
-  Button,
-  DownloadIcon,
-  Card,
-  StopCircleIcon,
-  TerminalSquareIcon,
-  DropdownIcon,
-} from 'omorphia'
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import {
-  get_all_running_profiles as getRunningProfiles,
-  kill_by_uuid as killProfile,
-  get_uuids_by_profile_path as getProfileProcesses,
-} from '@/helpers/process'
-import { loading_listener, process_listener, offline_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
 import { progress_bars_list } from '@/helpers/state.js'
-import { refreshOffline, isOffline } from '@/helpers/utils.js'
 import ProgressBar from '@/components/ui/ProgressBar.vue'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { ChatIcon } from '@/assets/icons'
+import { get_many } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'

 const router = useRouter()
 const card = ref(null)
@@ -135,38 +130,43 @@ const showCard = ref(false)

 const showProfiles = ref(false)

-const currentProcesses = ref(await getRunningProfiles().catch(handleError))
-const selectedProfile = ref(currentProcesses.value[0])
+const currentProcesses = ref([])
+const selectedProcess = ref()

-const offline = ref(await isOffline().catch(handleError))
-const refreshInternet = async () => {
-  offline.value = await refreshOffline().catch(handleError)
+const refresh = async () => {
+  const processes = await getRunningProcesses().catch(handleError)
+  const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+
+  currentProcesses.value = processes.map((x) => ({
+    profile: profiles.find((prof) => x.profile_path === prof.path),
+    ...x,
+  }))
+  if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+    selectedProcess.value = currentProcesses.value[0]
+  }
 }

+await refresh()
+
+const offline = ref(!navigator.onLine)
+window.addEventListener('offline', () => {
+  offline.value = true
+})
+window.addEventListener('online', () => {
+  offline.value = false
+})
+
 const unlistenProcess = await process_listener(async () => {
  await refresh()
 })

-const unlistenRefresh = await offline_listener(async (b) => {
-  offline.value = b
-  await refresh()
-})
-
-const refresh = async () => {
-  currentProcesses.value = await getRunningProfiles().catch(handleError)
-  if (!currentProcesses.value.includes(selectedProfile.value)) {
-    selectedProfile.value = currentProcesses.value[0]
-  }
-}
-
-const stop = async (path) => {
+const stop = async (process) => {
  try {
-    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
-    await killProfile(processes[0])
+    await killProcess(process.uuid).catch(handleError)

-    mixpanel_track('InstanceStop', {
-      loader: currentProcesses.value[0].metadata.loader,
-      game_version: currentProcesses.value[0].metadata.game_version,
+    trackEvent('InstanceStop', {
+      loader: process.profile.loader,
+      game_version: process.profile.game_version,
      source: 'AppBar',
    })
  } catch (e) {
@@ -176,7 +176,7 @@ const stop = async (path) => {
 }

 const goToTerminal = (path) => {
-  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
 }

 const currentLoadingBars = ref([])
@@ -188,16 +188,27 @@ const refreshInfo = async () => {
      if (x.bar_type.type === 'java_download') {
        x.title = 'Downloading Java ' + x.bar_type.version
      }
-      if (x.bar_type.profile_name) {
-        x.title = x.bar_type.profile_name
+      if (x.bar_type.profile_path) {
+        x.title = x.bar_type.profile_path
      }
      if (x.bar_type.pack_name) {
        x.title = x.bar_type.pack_name
      }

      return x
-    }
+    },
  )
+
+  currentLoadingBars.value.sort((a, b) => {
+    if (a.loading_bar_uuid < b.loading_bar_uuid) {
+      return -1
+    }
+    if (a.loading_bar_uuid > b.loading_bar_uuid) {
+      return 1
+    }
+    return 0
+  })
+
  if (currentLoadingBars.value.length === 0) {
    showCard.value = false
  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
@@ -210,8 +221,8 @@ const unlistenLoading = await loading_listener(async () => {
  await refreshInfo()
 })

-const selectProfile = (profile) => {
-  selectedProfile.value = profile
+const selectProcess = (process) => {
+  selectedProcess.value = process
  showProfiles.value = false
 }

@@ -262,7 +273,6 @@ onBeforeUnmount(() => {
  window.removeEventListener('click', handleClickOutsideProfile)
  unlistenProcess()
  unlistenLoading()
-  unlistenRefresh()
 })
 </script>

@@ -330,8 +340,12 @@ onBeforeUnmount(() => {
  width: 1.25rem !important;
  height: 1.25rem !important;

+  svg {
+    min-width: 1.25rem;
+  }
+
  &.stop {
-    --text-color: var(--color-red) !important;
+    color: var(--color-red);
  }
 }

@@ -63,29 +63,13 @@
 </template>

 <script setup>
-import {
-  Avatar,
-  Card,
-  Categories,
-  EnvironmentIndicator,
-  Button,
-  DownloadIcon,
-  formatNumber,
-  formatCategory,
-  HeartIcon,
-  CalendarIcon,
-  CheckIcon,
-  StarIcon,
-} from 'omorphia'
+import { DownloadIcon, HeartIcon, CalendarIcon, CheckIcon, StarIcon } from '@modrinth/assets'
+import { Avatar, Card, Categories, EnvironmentIndicator, Button } from '@modrinth/ui'
+import { formatNumber, formatCategory } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { ref } from 'vue'
-import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
-import { install as packInstall } from '@/helpers/pack.js'
-import { installVersionDependencies } from '@/helpers/utils.js'
-import { useFetch } from '@/helpers/fetch.js'
-import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+import { install as installVersion } from '@/store/install.js'
 dayjs.extend(relativeTime)

 const props = defineProps({
@@ -105,18 +89,6 @@ const props = defineProps({
    type: Object,
    default: null,
  },
-  confirmModal: {
-    type: Object,
-    default: null,
-  },
-  modInstallModal: {
-    type: Object,
-    default: null,
-  },
-  incompatibilityWarningModal: {
-    type: Object,
-    default: null,
-  },
  featured: {
    type: Boolean,
    default: false,
@@ -134,92 +106,19 @@ const installed = ref(props.installed)

 async function install() {
  installing.value = true
-  const versions = await useFetch(
-    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
-    'project versions'
-  )
-  let queuedVersionData
-
-  if (!props.instance) {
-    queuedVersionData = versions[0]
-  } else {
-    queuedVersionData = versions.find(
-      (v) =>
-        v.game_versions.includes(props.instance.metadata.game_version) &&
-        (props.project.project_type !== 'mod' || v.loaders.includes(props.instance.metadata.loader))
-    )
-  }
-
-  if (props.project.project_type === 'modpack') {
-    const packs = Object.values(await list().catch(handleError))
-    if (
-      packs.length === 0 ||
-      !packs
-        .map((value) => value.metadata)
-        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
-    ) {
-      await packInstall(
-        props.project.project_id,
-        queuedVersionData.id,
-        props.project.title,
-        props.project.icon_url
-      ).catch(handleError)
-
-      mixpanel_track('PackInstall', {
-        id: props.project.project_id,
-        version_id: queuedVersionData.id,
-        title: props.project.title,
-        source: 'SearchCard',
-      })
-    } else {
-      props.confirmModal.show(
-        props.project.project_id,
-        queuedVersionData.id,
-        props.project.title,
-        props.project.icon_url
-      )
-    }
-  } else {
-    if (props.instance) {
-      if (!queuedVersionData) {
-        props.incompatibilityWarningModal.show(
-          props.instance,
-          props.project.title,
-          versions,
-          () => (installed.value = true),
-          props.project.project_id,
-          props.project.project_type
-        )
-        installing.value = false
-        return
-      } else {
-        await installMod(props.instance.path, queuedVersionData.id).catch(handleError)
-        await installVersionDependencies(props.instance, queuedVersionData)
-
-        mixpanel_track('ProjectInstall', {
-          loader: props.instance.metadata.loader,
-          game_version: props.instance.metadata.game_version,
-          id: props.project.project_id,
-          project_type: props.project.project_type,
-          version_id: queuedVersionData.id,
-          title: props.project.title,
-          source: 'SearchCard',
-        })
-      }
-    } else {
-      props.modInstallModal.show(
-        props.project.project_id,
-        versions,
-        props.project.title,
-        props.project.project_type
-      )
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'SearchCard',
+    (version) => {
      installing.value = false
-      return
-    }
-    if (props.instance) installed.value = true
-  }

-  installing.value = false
+      if (props.instance && version) {
+        installed.value = true
+      }
+    },
+  )
 }
 </script>

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

 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
 const categories = ref(null)
 const installing = ref(false)
-const modInstallModal = ref(null)

 defineExpose({
  async show(event) {
    if (event.event === 'InstallVersion') {
-      version.value = await useFetch(
-        `https://api.modrinth.com/v2/version/${encodeURIComponent(event.id)}`,
-        'version'
-      )
-      project.value = await useFetch(
-        `https://api.modrinth.com/v2/project/${encodeURIComponent(version.value.project_id)}`,
-        'project'
+      version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
+      project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+        handleError,
      )
    } else {
-      project.value = await useFetch(
-        `https://api.modrinth.com/v2/project/${encodeURIComponent(event.id)}`,
-        'project'
-      )
-      version.value = await useFetch(
-        `https://api.modrinth.com/v2/version/${encodeURIComponent(project.value.versions[0])}`,
-        'version'
-      )
+      project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+      version.value = await get_version(
+        project.value.versions[project.value.versions.length - 1],
+        'must_revalidate',
+      ).catch(handleError)
    }
    categories.value = (await get_categories().catch(handleError)).filter(
-      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod'
-    )
-    confirmModal.value.show()
-    categories.value = (await get_categories().catch(handleError)).filter(
-      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod'
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
    )
    confirmModal.value.show()
  },
@@ -50,28 +36,7 @@ defineExpose({

 async function install() {
  confirmModal.value.hide()
-  if (project.value.project_type === 'modpack') {
-    await packInstall(
-      project.value.id,
-      version.value.id,
-      project.value.title,
-      project.value.icon_url
-    ).catch(handleError)
-
-    mixpanel.track('PackInstall', {
-      id: project.value.id,
-      version_id: version.value.id,
-      title: project.value.title,
-      source: 'ProjectPage',
-    })
-  } else {
-    modInstallModal.value.show(
-      project.value.id,
-      [version.value],
-      project.value.title,
-      project.value.project_type
-    )
-  }
+  await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
 }
 </script>

@@ -96,7 +61,6 @@ async function install() {
      </div>
    </div>
  </Modal>
-  <ModInstallModal ref="modInstallModal" />
 </template>

 <style scoped lang="scss">
@@ -3,6 +3,7 @@
    ref="incompatibleModal"
    header="Incompatibility warning"
    :noblur="!themeStore.advancedRendering"
+    :on-hide="onInstall"
  >
    <div class="modal-body">
      <p>
@@ -12,13 +13,11 @@
      </p>
      <table>
        <tr class="header">
-          <th>{{ instance?.metadata.name }}</th>
-          <th>{{ projectTitle }}</th>
+          <th>{{ instance?.name }}</th>
+          <th>{{ project.title }}</th>
        </tr>
        <tr class="content">
-          <td class="data">
-            {{ instance?.metadata.loader }} {{ instance?.metadata.game_version }}
-          </td>
+          <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
          <td>
            <DropdownSelect
              v-if="versions?.length > 1"
@@ -56,46 +55,39 @@
 </template>

 <script setup>
-import { Button, Modal, XIcon, DownloadIcon, DropdownSelect, formatCategory } from 'omorphia'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal, DropdownSelect } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 import { ref } from 'vue'
 import { handleError, useTheming } from '@/store/state.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
+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 = () => {}
+let onInstall = ref(() => {})

 defineExpose({
-  show: (
-    instanceVal,
-    projectTitleVal,
-    selectedVersions,
-    extMarkInstalled,
-    projectIdVal,
-    projectTypeVal
-  ) => {
+  show: (instanceVal, projectVal, projectVersions, callback) => {
    instance.value = instanceVal
-    projectTitle.value = projectTitleVal
-    versions.value = selectedVersions
-    selectedVersion.value = selectedVersions[0]
+    versions.value = projectVersions
+    selectedVersion.value = projectVersions[0]

-    project.value = projectIdVal
-    projectType.value = projectTypeVal
+    project.value = projectVal
+
+    onInstall.value = callback
+    installing.value = false

    incompatibleModal.value.show()
-    markInstalled = extMarkInstalled

-    mixpanel_track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+    trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
  },
 })

@@ -103,16 +95,16 @@ const install = async () => {
  installing.value = true
  await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
  installing.value = false
-  markInstalled()
+  onInstall.value(selectedVersion.value.id)
  incompatibleModal.value.hide()

-  mixpanel_track('ProjectInstall', {
-    loader: instance.value.metadata.loader,
-    game_version: instance.value.metadata.game_version,
+  trackEvent('ProjectInstall', {
+    loader: instance.value.loader,
+    game_version: instance.value.game_version,
    id: project.value,
    version_id: selectedVersion.value.id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
    source: 'ProjectIncompatibilityWarningModal',
  })
 }
@@ -1,54 +1,63 @@
 <script setup>
-import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal } 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'

 const themeStore = useTheming()

-const version = ref('')
-const title = ref('')
-const projectId = ref('')
-const icon = ref('')
+const versionId = ref()
+const project = ref()
 const confirmModal = ref(null)
 const installing = ref(false)

+let onInstall = ref(() => {})
+
 defineExpose({
-  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
-    projectId.value = projectIdVal
-    version.value = versionId
-    title.value = projectTitle
-    icon.value = projectIcon
+  show: (projectVal, versionIdVal, callback) => {
+    project.value = projectVal
+    versionId.value = versionIdVal
    installing.value = false
    confirmModal.value.show()

-    mixpanel_track('PackInstallStart')
+    onInstall.value = callback
+
+    trackEvent('PackInstallStart')
  },
 })

 async function install() {
  installing.value = true
-  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
  confirmModal.value.hide()
+
  await pack_install(
-    projectId.value,
-    version.value,
-    title.value,
-    icon.value ? icon.value : null
+    project.value.id,
+    versionId.value,
+    project.value.title,
+    project.value.icon_url,
  ).catch(handleError)
-  mixpanel_track('PackInstall', {
-    id: projectId.value,
-    version_id: version.value,
-    title: title.value,
+  trackEvent('PackInstall', {
+    id: project.value.id,
+    version_id: versionId.value,
+    title: project.value.title,
    source: 'ConfirmModal',
  })
+
+  onInstall.value(versionId.value)
+  installing.value = false
 }
 </script>

 <template>
-  <Modal ref="confirmModal" header="Are you sure?" :noblur="!themeStore.advancedRendering">
+  <Modal
+    ref="confirmModal"
+    header="Are you sure?"
+    :noblur="!themeStore.advancedRendering"
+    :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">
@@ -1,42 +1,38 @@
 <script setup>
 import {
-  Avatar,
-  Modal,
-  Button,
  DownloadIcon,
  PlusIcon,
-  Card,
  UploadIcon,
  XIcon,
  RightArrowIcon,
  CheckIcon,
-} from 'omorphia'
+} from '@modrinth/assets'
+import { Avatar, Modal, Button, Card } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 import {
  add_project_from_version as installMod,
  check_installed,
  get,
  list,
+  create,
 } from '@/helpers/profile'
-import { open } from '@tauri-apps/api/dialog'
-import { create } from '@/helpers/profile'
-import { installVersionDependencies } from '@/helpers/utils'
+import { open } from '@tauri-apps/plugin-dialog'
+import { installVersionDependencies } from '@/store/install.js'
 import { handleError } from '@/store/notifications.js'
-import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'
 import { useRouter } from 'vue-router'
-import { tauri } from '@tauri-apps/api'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { trackEvent } from '@/helpers/analytics'

 const themeStore = useTheming()
 const router = useRouter()

-const versions = ref([])
-const project = ref('')
-const projectTitle = ref('')
-const projectType = ref('')
+const versions = ref()
+const project = ref()

-const installModal = ref(null)
+const installModal = ref()
 const searchFilter = ref('')
+
 const showCreation = ref(false)
 const icon = ref(null)
 const name = ref(null)
@@ -45,33 +41,65 @@ const loader = ref(null)
 const gameVersion = ref(null)
 const creatingInstance = ref(false)

-defineExpose({
-  show: async (projectId, selectedVersions, title, type) => {
-    project.value = projectId
-    versions.value = selectedVersions
-    projectTitle.value = title
-    projectType.value = type
+const profiles = ref([])

-    installModal.value.show()
+const shownProfiles = computed(() =>
+  profiles.value
+    .filter((profile) => {
+      return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      let loaders = versions.value.flatMap((v) => v.loaders)
+
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
+        (project.value.project_type === 'mod'
+          ? loaders.includes(profile.loader) || loaders.includes('minecraft')
+          : true)
+      )
+    }),
+)
+
+let onInstall = ref(() => {})
+
+defineExpose({
+  show: async (projectVal, versionsVal, callback) => {
+    project.value = projectVal
+    versions.value = versionsVal
    searchFilter.value = ''

-    profiles.value = await getData()
+    showCreation.value = false
+    name.value = null
+    icon.value = null
+    display_icon.value = null
+    gameVersion.value = null
+    loader.value = null

-    mixpanel_track('ProjectInstallStart', { source: 'ProjectInstallModal' })
+    onInstall.value = callback
+
+    const profilesVal = await list().catch(handleError)
+    for (let profile of profilesVal) {
+      profile.installing = false
+      profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+        handleError,
+      )
+    }
+    profiles.value = profilesVal
+
+    installModal.value.show()
+
+    trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
  },
 })

-const profiles = ref([])
-
 async function install(instance) {
  instance.installing = true
  const version = versions.value.find((v) => {
    return (
-      v.game_versions.includes(instance.metadata.game_version) &&
-      (v.loaders.includes(instance.metadata.loader) ||
-        v.loaders.includes('minecraft') ||
-        v.loaders.includes('iris') ||
-        v.loaders.includes('optifine'))
+      v.game_versions.includes(instance.game_version) &&
+      (project.value.project_type === 'mod'
+        ? v.loaders.includes(instance.loader) || v.loaders.includes('minecraft')
+        : true)
    )
  })

@@ -87,45 +115,19 @@ async function install(instance) {
  instance.installedMod = true
  instance.installing = false

-  mixpanel_track('ProjectInstall', {
-    loader: instance.metadata.loader,
-    game_version: instance.metadata.game_version,
-    id: project.value,
+  trackEvent('ProjectInstall', {
+    loader: instance.loader,
+    game_version: instance.game_version,
+    id: project.value.id,
    version_id: version.id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
    source: 'ProjectInstallModal',
  })
+
+  onInstall.value(version.id)
 }

-async function getData() {
-  const projects = await list(true).then(Object.values).catch(handleError)
-
-  const filtered = projects
-    .filter((profile) => {
-      return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-    })
-    .filter((profile) => {
-      return (
-        versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
-        versions.value
-          .flatMap((v) => v.loaders)
-          .some(
-            (value) =>
-              value === profile.metadata.loader || ['minecraft', 'iris', 'optifine'].includes(value)
-          )
-      )
-    })
-
-  for (let profile of filtered) {
-    profile.installing = false
-    profile.installedMod = await check_installed(profile.path, project.value).catch(handleError)
-  }
-
-  return filtered
-}
-
-const alreadySentCreation = ref(false)
 const toggleCreation = () => {
  showCreation.value = !showCreation.value
  name.value = null
@@ -134,9 +136,8 @@ const toggleCreation = () => {
  gameVersion.value = null
  loader.value = null

-  if (!alreadySentCreation.value) {
-    alreadySentCreation.value = false
-    mixpanel_track('InstanceCreateStart', { source: 'ProjectInstallModal' })
+  if (showCreation.value) {
+    trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
  }
 }

@@ -152,7 +153,7 @@ const upload_icon = async () => {
  })

  if (!icon.value) return
-  display_icon.value = tauri.convertFileSrc(icon.value)
+  display_icon.value = convertFileSrc(icon.value)
 }

 const reset_icon = () => {
@@ -175,7 +176,7 @@ const createInstance = async () => {
    versions.value[0].game_versions[0],
    loader,
    'latest',
-    icon.value
+    icon.value,
  ).catch(handleError)

  await installMod(id, versions.value[0].id).catch(handleError)
@@ -185,7 +186,7 @@ const createInstance = async () => {
  const instance = await get(id, true)
  await installVersionDependencies(instance, versions.value[0])

-  mixpanel_track('InstanceCreate', {
+  trackEvent('InstanceCreate', {
    profile_name: name.value,
    game_version: versions.value[0].game_versions[0],
    loader: loader,
@@ -194,23 +195,21 @@ const createInstance = async () => {
    source: 'ProjectInstallModal',
  })

-  mixpanel_track('ProjectInstall', {
+  trackEvent('ProjectInstall', {
    loader: loader,
    game_version: versions.value[0].game_versions[0],
    id: project.value,
    version_id: versions.value[0].id,
-    project_type: projectType.value,
-    title: projectTitle.value,
+    project_type: project.value.project_type,
+    title: project.value.title,
    source: 'ProjectInstallModal',
  })

+  onInstall.value(versions.value[0].id)
+
  if (installModal.value) installModal.value.hide()
  creatingInstance.value = false
 }
-
-const check_valid = computed(() => {
-  return name.value
-})
 </script>

 <template>
@@ -218,6 +217,7 @@ const check_valid = computed(() => {
    ref="installModal"
    header="Install project to instance"
    :noblur="!themeStore.advancedRendering"
+    :on-hide="onInstall"
  >
    <div class="modal-body">
      <input
@@ -228,34 +228,27 @@ const check_valid = computed(() => {
        placeholder="Search for an instance"
      />
      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
-        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
-          <Button
-            color="raised"
-            class="profile-button"
-            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
+        <div v-for="profile in shownProfiles" :key="profile.name" class="option">
+          <router-link
+            class="btn btn-transparent profile-button"
+            :to="`/instance/${encodeURIComponent(profile.path)}`"
+            @click="installModal.hide()"
          >
            <Avatar
-              :src="
-                !profile.metadata.icon ||
-                (profile.metadata.icon && profile.metadata.icon.startsWith('http'))
-                  ? profile.metadata.icon
-                  : tauri.convertFileSrc(profile.metadata?.icon)
-              "
+              :src="profile.icon_path ? tauri.convertFileSrc(profile.icon_path) : null"
              class="profile-image"
            />
-            {{ profile.metadata.name }}
-          </Button>
+            {{ profile.name }}
+          </router-link>
          <div
            v-tooltip="
-              profile.metadata.linked_data?.locked && !profile.installedMod
+              profile.linked_data?.locked && !profile.installedMod
                ? 'Unpair or unlock an instance to add mods.'
                : ''
            "
          >
            <Button
-              :disabled="
-                profile.installedMod || profile.installing || profile.metadata.linked_data?.locked
-              "
+              :disabled="profile.installedMod || profile.installing || profile.linked_data?.locked"
              @click="install(profile)"
            >
              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
@@ -264,10 +257,10 @@ const check_valid = computed(() => {
                profile.installing
                  ? 'Installing...'
                  : profile.installedMod
-                  ? 'Installed'
-                  : profile.metadata.linked_data && profile.metadata.linked_data.locked
-                  ? 'Paired'
-                  : 'Install'
+                    ? 'Installed'
+                    : profile.linked_data && profile.linked_data.locked
+                      ? 'Paired'
+                      : 'Install'
              }}
            </Button>
          </div>
@@ -296,7 +289,7 @@ const check_valid = computed(() => {
              placeholder="Name"
              class="creation-input"
            />
-            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+            <Button :disabled="creatingInstance === true || !name" @click="createInstance()">
              <RightArrowIcon />
              {{ creatingInstance ? 'Creating...' : 'Create' }}
            </Button>
@@ -0,0 +1,367 @@
+<script setup>
+import { UserIcon, LockIcon, MailIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox, Modal } from '@modrinth/ui'
+import {
+  DiscordIcon,
+  GithubIcon,
+  MicrosoftIcon,
+  GoogleIcon,
+  SteamIcon,
+  GitLabIcon,
+} from '@/assets/external'
+import { login, login_2fa, create_account, login_pass } from '@/helpers/mr_auth.js'
+import { handleError, useNotifications } from '@/store/state.js'
+import { ref } from 'vue'
+import { handleSevereError } from '@/store/error.js'
+
+const props = defineProps({
+  callback: {
+    type: Function,
+    required: true,
+  },
+})
+
+const modal = ref()
+const turnstileToken = ref()
+const widgetId = ref()
+
+defineExpose({
+  show: () => {
+    modal.value.show()
+
+    if (window.turnstile === null || !window.turnstile) {
+      const script = document.createElement('script')
+      script.src =
+        'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback'
+      script.async = true
+      script.defer = true
+      document.head.appendChild(script)
+
+      window.onloadTurnstileCallback = loadWidget
+    } else {
+      loadWidget()
+    }
+  },
+})
+
+function loadWidget() {
+  widgetId.value = window.turnstile.render('#turnstile-container', {
+    sitekey: '0x4AAAAAAAW3guHM6Eunbgwu',
+    callback: (token) => (turnstileToken.value = token),
+    expiredCallback: () => (turnstileToken.value = null),
+  })
+}
+
+function removeWidget() {
+  if (widgetId.value) {
+    window.turnstile.remove(widgetId.value)
+    widgetId.value = null
+    turnstileToken.value = null
+  }
+}
+
+const loggingIn = ref(true)
+const twoFactorFlow = ref(null)
+const twoFactorCode = ref('')
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const subscribe = ref(true)
+
+async function signInOauth(provider) {
+  const creds = await login(provider).catch(handleSevereError)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function signIn2fa() {
+  const creds = await login_2fa(twoFactorCode.value, twoFactorFlow.value).catch(handleError)
+
+  if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function signIn() {
+  const creds = await login_pass(username.value, password.value, turnstileToken.value).catch(
+    handleError,
+  )
+  window.turnstile.reset(widgetId.value)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+
+async function createAccount() {
+  if (password.value !== confirmPassword.value) {
+    const notifs = useNotifications()
+    notifs.addNotification({
+      title: 'An error occurred',
+      text: 'Passwords do not match!',
+      type: 'error',
+    })
+    return
+  }
+
+  const creds = await create_account(
+    username.value,
+    email.value,
+    password.value,
+    turnstileToken.value,
+    subscribe.value,
+  ).catch(handleError)
+  window.turnstile.reset(widgetId.value)
+
+  if (creds && creds.session) {
+    props.callback()
+    modal.value.hide()
+  }
+}
+</script>
+
+<template>
+  <Modal ref="modal" :on-hide="removeWidget">
+    <Card>
+      <template v-if="twoFactorFlow">
+        <h1>Enter two-factor code</h1>
+        <p>Please enter a two-factor code to proceed.</p>
+        <input v-model="twoFactorCode" maxlength="11" type="text" placeholder="Enter code..." />
+      </template>
+      <template v-else>
+        <h1 v-if="loggingIn">Login to Modrinth</h1>
+        <h1 v-else>Create an account</h1>
+        <div class="button-grid">
+          <Button class="discord" large @click="signInOauth('discord')">
+            <DiscordIcon />
+            Discord
+          </Button>
+          <Button class="github" large @click="signInOauth('github')">
+            <GithubIcon />
+            Github
+          </Button>
+          <Button class="white" large @click="signInOauth('microsoft')">
+            <MicrosoftIcon />
+            Microsoft
+          </Button>
+          <Button class="google" large @click="signInOauth('google')">
+            <GoogleIcon />
+            Google
+          </Button>
+          <Button class="white" large @click="signInOauth('steam')">
+            <SteamIcon />
+            Steam
+          </Button>
+          <Button class="gitlab" large @click="signInOauth('gitlab')">
+            <GitLabIcon />
+            GitLab
+          </Button>
+        </div>
+        <div class="divider">
+          <hr />
+          <p>Or</p>
+        </div>
+        <div v-if="!loggingIn" class="iconified-input username">
+          <MailIcon />
+          <input v-model="email" type="text" placeholder="Email" />
+        </div>
+        <div class="iconified-input username">
+          <UserIcon />
+          <input
+            v-model="username"
+            type="text"
+            :placeholder="loggingIn ? 'Email or username' : 'Username'"
+          />
+        </div>
+        <div class="iconified-input" :class="{ username: !loggingIn }">
+          <LockIcon />
+          <input v-model="password" type="password" placeholder="Password" />
+        </div>
+        <div v-if="!loggingIn" class="iconified-input username">
+          <LockIcon />
+          <input v-model="confirmPassword" type="password" placeholder="Confirm password" />
+        </div>
+        <div class="turnstile">
+          <div id="turnstile-container"></div>
+          <div id="turnstile-container-2"></div>
+        </div>
+        <Checkbox
+          v-if="!loggingIn"
+          v-model="subscribe"
+          class="subscribe-btn"
+          label="Subscribe to updates about Modrinth"
+        />
+        <div class="link-row">
+          <a v-if="loggingIn" class="button-base" @click="loggingIn = false"> Create account </a>
+          <a v-else class="button-base" @click="loggingIn = true">Sign in</a>
+          <a class="button-base" href="https://modrinth.com/auth/reset-password">
+            Forgot password?
+          </a>
+        </div>
+      </template>
+      <div class="button-row">
+        <Button class="transparent" large>Close</Button>
+        <Button v-if="twoFactorCode" color="primary" large @click="signIn2fa"> Login </Button>
+        <Button
+          v-else-if="loggingIn"
+          color="primary"
+          large
+          @click="signIn"
+          :disabled="!turnstileToken"
+        >
+          Login
+        </Button>
+        <Button v-else color="primary" large @click="createAccount" :disabled="!turnstileToken">
+          Create account
+        </Button>
+      </div>
+    </Card>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+:deep(.modal-container) {
+  .modal-body {
+    width: auto;
+
+    .content {
+      background: none;
+    }
+  }
+}
+
+.card {
+  width: 25rem;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--gap-md);
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .discord {
+    background-color: #5865f2;
+    color: var(--color-contrast);
+  }
+
+  .github {
+    background-color: #8740f1;
+    color: var(--color-contrast);
+  }
+
+  .white {
+    background-color: var(--color-contrast);
+    color: var(--color-accent-contrast);
+  }
+
+  .google {
+    background-color: #4285f4;
+    color: var(--color-contrast);
+  }
+
+  .gitlab {
+    background-color: #fc6d26;
+    color: var(--color-contrast);
+  }
+}
+
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--gap-md) 0;
+
+  p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-raised-bg);
+    padding: 0 1rem;
+    margin: 0;
+  }
+
+  hr {
+    border: none;
+    width: 100%;
+    border-top: 2px solid var(--color-button-bg);
+  }
+}
+
+.iconified-input {
+  width: 100%;
+
+  input {
+    width: 100%;
+    flex-basis: auto;
+  }
+}
+
+.username {
+  margin-bottom: var(--gap-sm);
+}
+
+.link-row {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--gap-md) 0;
+
+  a {
+    color: var(--color-blue);
+    text-decoration: underline;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+
+  .btn {
+    flex-basis: auto;
+  }
+
+  .transparent {
+    padding: var(--gap-md) 0;
+  }
+}
+
+:deep(.checkbox) {
+  border: none;
+}
+
+.turnstile {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-button-bg);
+  height: 66px;
+  margin-top: var(--gap-md);
+
+  iframe {
+    margin: -1px;
+    min-width: calc(100% + 2px);
+  }
+}
+</style>
@@ -0,0 +1,20 @@
+import { invoke } from '@tauri-apps/api/core'
+import cssContent from '@/assets/stylesheets/macFix.css?inline'
+
+export async function useCheckDisableMouseover() {
+  try {
+    // Fetch the CSS content from the Rust backend
+    let should_disable_mouseover = await invoke('plugin:utils|should_disable_mouseover')
+
+    if (should_disable_mouseover) {
+      // Create a style element and set its content
+      const styleElement = document.createElement('style')
+      styleElement.innerHTML = cssContent
+
+      // Append the style element to the document's head
+      document.head.appendChild(styleElement)
+    }
+  } catch (error) {
+    console.error('Error checking OS version from Rust backend', error)
+  }
+}
@@ -0,0 +1,23 @@
+import { posthog } from 'posthog-js'
+
+export const initAnalytics = () => {
+  posthog.init('phc_hm2ihMpTAoE86xIm7XzsCB8RPiTRKivViK5biiHedm', {
+    persistence: 'localStorage',
+  })
+}
+
+export const debugAnalytics = () => {
+  posthog.debug()
+}
+
+export const optOutAnalytics = () => {
+  posthog.opt_out_capturing()
+}
+
+export const optInAnalytics = () => {
+  posthog.opt_in_capturing()
+}
+
+export const trackEvent = (eventName, properties) => {
+  posthog.capture(eventName, properties)
+}
@@ -0,0 +1,58 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/core'
+
+// Example function:
+// User goes to auth_url to complete flow, and when completed, authenticate_await_completion() returns the credentials
+// export async function authenticate() {
+//   const auth_url = await authenticate_begin_flow()
+//   console.log(auth_url)
+//   await authenticate_await_completion()
+// }
+
+/**
+ * Authenticate a user with Hydra - part 1.
+ * This begins the authentication flow quasi-synchronously.
+ *
+ * @returns {Promise<DeviceLoginSuccess>} A DeviceLoginSuccess object with two relevant fields:
+ * @property {string} verification_uri - The URL to go to complete the flow.
+ * @property {string} user_code - The code to enter on the verification_uri page.
+ */
+export async function login() {
+  return await invoke('plugin:auth|login')
+}
+
+/**
+ * Retrieves the default user
+ * @return {Promise<UUID | undefined>}
+ */
+export async function get_default_user() {
+  return await invoke('plugin:auth|get_default_user')
+}
+
+/**
+ * Updates the default user
+ * @param {UUID} user
+ */
+export async function set_default_user(user) {
+  return await invoke('plugin:auth|set_default_user', { user })
+}
+
+/**
+ * Remove a user account from the database
+ * @param {UUID} user
+ */
+export async function remove_user(user) {
+  return await invoke('plugin:auth|remove_user', { user })
+}
+
+/**
+ * Returns a list of users
+ * @returns {Promise<Credential[]>}
+ */
+export async function users() {
+  return await invoke('plugin:auth|get_users')
+}