Initial draft

.cargo/config.toml

@@ -1,6 +1,3 @@
-# Windows has stack overflows when calling from Tauri, so we increase the default stack size used by the compiler
+# Windows has stack overflows when calling from Tauri, so we increase compiler size
 [target.'cfg(windows)']
 rustflags = ["-C", "link-args=/STACK:16777220"]
-
-[target.x86_64-pc-windows-msvc]
-linker = "rust-lld"

.dockerignore

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

.editorconfig

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

.gitattributes

@@ -1,35 +0,0 @@
-* text=auto eol=lf
-
-# SQLx calculates a checksum of migration scripts at build time to compare
-# it with the checksum of the applied migration for the same version at
-# runtime, to know if the migration script has been changed, and thus the
-# DB schema went out of sync with the code.
-#
-# However, such checksum treats the script as a raw byte stream, taking
-# into account inconsequential differences like different line endings
-# in different OSes. When combined with Git's EOL conversion and mixed
-# native and cross-compilation scenarios, this leads to existing
-# migrations that didn't change having potentially different checksums
-# according to the environment they were built in, which can break the
-# migration system when deploying the Modrinth App, rendering it
-# unusable.
-#
-# The gitattribute above ensures that all text files are checked out
-# with LF line endings, but widely deployed app versions were built
-# without this attribute set, which left such line endings variable to
-# the platform. Thus, there is no perfect solution to this problem:
-# forcing CRLF here would break Linux and macOS users, forcing LF
-# breaks Windows users, and leaving it unspecified may still lead to
-# line ending differences when cross-compiling from Linux to Windows
-# or vice versa, or having Git configured with different line
-# conversion settings. Moreover, there is no `eol=native` attribute,
-# and using CI-only scripts to convert line endings would make the
-# builds differ between CI and most local environments. So, let's pick
-# the least bad option: let Git handle line endings using its
-# configuration by leaving it unspecified, which works fine as long as
-# people don't mess with Git's line ending settings, which is the vast
-# majority of cases.
-/packages/app-lib/migrations/20240711194701_init.sql !eol
-/packages/app-lib/migrations/20240813205023_drop-active-unique.sql !eol
-/packages/app-lib/migrations/20240930001852_disable-personalized-ads.sql !eol
-/packages/app-lib/migrations/20241222013857_feature-flags.sql !eol

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

@@ -1,13 +1,12 @@
-name: 🎮 Bug with Modrinth App
-description: For issues with Modrinth App.
-labels: [app]
-type: 'bug'
+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?q=is%3Aissue) for duplicate problems
+        - 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
@@ -17,7 +16,7 @@ body:
     id: version
     attributes:
       label: What version of the Modrinth App are you using?
-      description: Find this in ⚙️ Settings (bottom right) -> After Modrinth App (bottom left)
+      description: Find this in ⚙️ Settings (bottom right) -> About -> App version.
     validations:
       required: true
   - type: dropdown
@@ -57,4 +56,4 @@ body:
       label: Additional context
       description: Add any other context about the problem here.
     validations:
-      required: false
+      required: false

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

@@ -1,13 +1,12 @@
-name: 🌐 Bug with Modrinth.com
-description: For issues with the Modrinth website.
-labels: [website]
-type: 'bug'
+name: 🌐 Website bug (modrinth.com)
+description: Report an issue on the Modrinth website.
+labels: [bug, frontend]
 body:
   - type: checkboxes
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
+        - 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
@@ -50,4 +49,4 @@ body:
       label: Additional context
       description: Add any other context about the problem here.
     validations:
-      required: false
+      required: false

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

@@ -1,13 +1,12 @@
-name: 🛠 Bug with Modrinth API
-description: For issues with the Modrinth API for developers.
-labels: [api, backend]
-type: '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?q=is%3Aissue) for duplicate problems
+        - 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
@@ -39,4 +38,4 @@ body:
       label: Additional context
       description: Add any other context about the problem here.
     validations:
-      required: false
+      required: false

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

@@ -1,63 +0,0 @@
-name: 👥 Bug with Modrinth Servers
-description: For issues with a Modrinth Servers product.
-labels: [servers]
-type: 'bug'
-body:
-  - type: checkboxes
-    attributes:
-      label: Please confirm the following.
-      options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) 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: issue-location
-    attributes:
-      label: Is this an issue in the control panel or with the Minecraft server itself?
-      options:
-        - Control panel (on Modrinth.com)
-        - Minecraft server
-    validations:
-      required: true
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: What browsers are you seeing the problem on? (if a panel issue)
-      multiple: true
-      options:
-        - N/A
-        - Chrome (including Arc, Brave, Opera, Vivaldi)
-        - Microsoft Edge
-        - Firefox
-        - Safari
-        - Other (please specify)
-  - type: textarea
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. Include screenshots if applicable.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Steps to reproduce
-      description: Steps to reproduce the behavior.
-      placeholder: |
-        1. Go to '...'
-        2. Click on '...'
-        3. Scroll down to '...'
-        4. See error
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Expected behavior
-      description: A clear and concise description of what you expected to happen.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.
-    validations:
-      required: false

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

@@ -1,13 +1,13 @@
-name: 💡 Feature request
+name: 💡 Feature Request
 description: Suggest an idea
-type: 'feature'
+labels: [enhancement]
 
 body:
   - type: checkboxes
     attributes:
       label: Please confirm the following.
       options:
-        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate feature requests
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate feature requests
           required: true
         - label: I have checked that this feature request is not on our [roadmap](https://roadmap.modrinth.com)
           required: true
@@ -17,10 +17,9 @@ body:
       label: What parts of Modrinth is your feature request related too?
       multiple: true
       options:
-        - Modrinth App
-        - Modrinth.com website
-        - Modrinth Servers
-        - Modrinth API for developers
+        - App
+        - Website
+        - API
   - type: textarea
     attributes:
       label: Is your suggested feature related to a problem? Please describe.
@@ -44,4 +43,4 @@ body:
       label: Additional context
       description: Add any other context or screenshots about the suggested enhancement here.
     validations:
-      required: false
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,14 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
-  - name: 🫶 Support portal
-    about: Get support using through our support website.
+  - name: 🫶 Support Portal
+    about: Get support using through our portal.
     url: https://support.modrinth.com
-  - name: 💬 Chat on Discord
+  - name: 💬 Chat
     about: Join our Discord server to chat about Modrinth.
     url: https://discord.modrinth.com
+  - name: 🛣️ Roadmap
+    about: View our Roadmap. Please do not open issues for items on our roadmap.
+    url: https://roadmap.modrinth.com
+  - name: 📚 Documentation
+    about: Useful documentation about Modrinth's API
+    url: https://docs.modrinth.com

.github/instructions/i18n-convert.instructions.md

@@ -1,86 +0,0 @@
----
-applyTo: '**/*.vue'
----
-
-You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using vue-i18n with utilities from `@modrinth/ui`.
-
-Please follow these rules precisely:
-
-1. Identify translatable strings
-
-- Scan the <template> for all user-visible strings (inner text, alt attributes, placeholders, button labels, etc.). Do not extract dynamic expressions (like {{ user.name }}) or HTML tags. Only extract static human-readable text.
-- There may be strings within the <script> block, e.g dropdown option labels, notifications etc.
-
-2. Create message definitions
-
-- In the <script setup> block, import `defineMessage` or `defineMessages` from `@modrinth/ui`.
-- For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
-  Example:
-  const messages = defineMessages({
-  welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
-  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You're now part of the community…' },
-  })
-
-3. Handle variables and ICU formats
-
-- Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
-- For numbers/dates/times, use ICU options (e.g., currency): `{price, number, ::currency/USD}`
-- For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
-
-4. Rich-text messages (links/markup)
-
-- In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
-  "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
-- Render rich-text messages with `<IntlFormatted>` from `@modrinth/ui` using named slots:
-  <IntlFormatted :message-id="messages.tosLabel">
-    <template #terms-link="{ children }">
-      <NuxtLink to="/terms">
-        <component :is="() => children" />
-      </NuxtLink>
-    </template>
-    <template #privacy-link="{ children }">
-      <NuxtLink to="/privacy">
-        <component :is="() => children" />
-      </NuxtLink>
-    </template>
-  </IntlFormatted>
-- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
-  <template #strong="{ children }">
-    <strong><component :is="() => children" /></strong>
-  </template>
-- For more complex child handling, use `normalizeChildren` from `@modrinth/ui`:
-  <template #bold="{ children }">
-    <strong><component :is="() => normalizeChildren(children)" /></strong>
-  </template>
-
-5. Formatting in templates
-
-- Import and use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
-  `const { formatMessage } = useVIntl()`
-  `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
-- Pass variables as a second argument:
-  `{{ formatMessage(messages.greeting, { name: user.name }) }}`
-
-6. Naming conventions and id stability
-
-- Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
-
-7. Avoid Vue/ICU delimiter collisions
-
-- If an ICU placeholder would end right before `}}` in a Vue template, insert a space so it becomes `} }` to avoid parsing issues.
-
-8. Update imports and remove literals
-
-- Ensure imports from `@modrinth/ui` are present: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, and optionally `normalizeChildren`.
-- Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
-
-9. Preserve functionality
-
-- Do not change logic, layout, reactivity, or bindings—only refactor strings into i18n.
-
-Use existing patterns from our codebase:
-
-- Variables/plurals: see `apps/frontend/src/pages/frog.vue`
-- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
-
-When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.

.github/templates/crowdin-pr.md

@@ -1,4 +0,0 @@
-This pull request is created according to the `.github/workflows/i18n-pull.yml` file.
-
-- 🌐 [Contribute to translations on Crowdin](https://translate.modrinth.com/)
-- 🔄 [Dispatch this workflow again to update this PR](https://github.com/Modrinth/code/actions/workflows/i18n-pull.yml)

.github/workflows/COPYING.md

@@ -1,3 +0,0 @@
-# Copying
-
-Modrinth's Github workflows are licensed under the MIT License, which is provided in the file [LICENSE](./LICENSE).

.github/workflows/LICENSE

@@ -1,7 +0,0 @@
-Copyright 2025 Rinth, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

.github/workflows/check-generic.yml

@@ -1,25 +0,0 @@
-on:
-  pull_request:
-  push:
-    branches:
-      - master
-
-env:
-  CARGO_TERM_COLOR: always
-  SQLX_OFFLINE: true
-
-jobs:
-  typos:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: crate-ci/typos@master
-
-  # broken: <https://github.com/SchemaStore/schemastore/issues/5108>
-  # tombi:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: tombi-toml/setup-tombi@v1
-  #     - run: tombi lint
-  #     - run: tombi fmt --check

.github/workflows/check-rust.yml

@@ -1,19 +0,0 @@
-on:
-  pull_request:
-  push:
-    branches:
-      - master
-
-env:
-  CARGO_TERM_COLOR: always
-  SQLX_OFFLINE: true
-
-jobs:
-  shear:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dtolnay/rust-toolchain@stable
-      - uses: cargo-bins/cargo-binstall@main
-      - run: cargo binstall --no-confirm cargo-shear
-      - run: cargo shear

.github/workflows/daedalus-docker.yml

@@ -2,61 +2,42 @@ name: daedalus-docker-build
 
 on:
   push:
-    branches:
-      - '**'
+    branches: [ "main" ]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
-      - 'packages/daedalus/**'
   pull_request:
-    types: [opened, synchronize]
+    types: [ opened, synchronize ]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
-      - 'packages/daedalus/**'
   merge_group:
-    types: [checks_requested]
+    types: [ checks_requested ]
 
 jobs:
   docker:
     runs-on: ubuntu-latest
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
-
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: ⚙️ Generate Docker image metadata
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v5
-        env:
-          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        uses: docker/metadata-action@v3
         with:
           images: ghcr.io/modrinth/daedalus
-          labels: |
-            org.opencontainers.image.title=daedalus
-            org.opencontainers.image.description=Modrinth game metadata query client
-            org.opencontainers.image.licenses=MIT
-          annotations: |
-            org.opencontainers.image.title=daedalus
-            org.opencontainers.image.description=Modrinth game metadata query client
-            org.opencontainers.image.licenses=MIT
-
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      -
+        name: Login to GitHub Images
+        uses: docker/login-action@v1
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      -
+        name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
           file: ./apps/daedalus_client/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
-          annotations: ${{ steps.docker_meta.outputs.annotations }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
-          cache-to: type=inline

.github/workflows/daedalus-run.yml

@@ -21,6 +21,7 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+
       - name: Pull Docker image from GHCR
         run: docker pull ghcr.io/modrinth/daedalus:main
 

.github/workflows/i18n-pull.yml

@@ -1,108 +0,0 @@
-name: Crowdin (pull)
-
-on:
-  schedule:
-    - cron: '0 7 * * MON' # every monday at 7 am
-  workflow_dispatch:
-
-concurrency:
-  group: i18n-management
-
-jobs:
-  pull_translations:
-    name: 'Pull translations from Crowdin'
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    concurrency:
-      group: i18n-pull:${{ github.ref }}
-      cancel-in-progress: true
-    steps:
-      - name: Preflight check
-        run: |
-          PREFLIGHT_CHECK_RESULT=true
-
-          function flight_failure () {
-            if [ "$PREFLIGHT_CHECK_RESULT" = true ]; then
-              echo "One or more pre-flight checks failed!"
-              echo ""
-              PREFLIGHT_CHECK_RESULT=false
-            fi
-            echo "- $1"
-          }
-
-          if [ "$CROWDIN_PROJECT_ID_DEFINED" != true ]; then
-            flight_failure "CROWDIN_PROJECT_ID variable is not defined (required to push)"
-          fi
-
-          if [ "$CROWDIN_PERSONAL_TOKEN_DEFINED" != true ]; then
-            flight_failure "CROWDIN_PERSONAL_TOKEN secret is not defined (required to push)"
-          fi
-
-          if [ "$CROWDIN_GH_TOKEN_DEFINED" != true ]; then
-            flight_failure "CROWDIN_GH_TOKEN secret is not defined (required to make pull requests)"
-          fi
-
-          if [ "$PREFLIGHT_CHECK_RESULT" = false ]; then
-            exit 1
-          fi
-        env:
-          CROWDIN_PROJECT_ID_DEFINED: ${{ vars.CROWDIN_PROJECT_ID != '' }}
-          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
-          CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.ref }}
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
-
-      - name: Configure Git author
-        id: git-author
-        uses: MarcoIeni/git-config@v0.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}
-
-      # # Because --all flag of Crowdin CLI is currently broken we need to create a fake source file
-      # # so that the CLI won't omit translations for it. See https://github.com/crowdin/crowdin-cli/issues/724
-      # - name: Write fake sources
-      #   shell: bash
-      #   run: echo "{}" > locales/en-US/index.json
-
-      - name: Query branch name
-        id: branch-name
-        shell: bash
-        run: |
-          BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
-          SAFE_BRANCH_NAME=$(echo "$BRANCH_NAME" | sed -e "s/[\\\\/\\:*?\"<>|]/_/g")
-          echo "Branch name is $BRANCH_NAME (escaped as $SAFE_BRANCH_NAME)"
-          echo "branch_name=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
-          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
-
-      - name: Download translations from Crowdin
-        uses: crowdin/github-action@v2
-        with:
-          upload_sources: false
-          upload_translations: false
-          download_translations: true
-          push_translations: false
-          create_pull_request: false
-          crowdin_branch_name: '[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}'
-        env:
-          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-
-      - name: Fix broken permissions
-        shell: bash
-        run: sudo chown -R $USER:$USER .
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          title: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
-          body-path: .github/templates/crowdin-pr.md
-          commit-message: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
-          branch: crowdin-pull/${{ steps.branch-name.outputs.branch_name }}
-          author: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>'
-          committer: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>'
-          labels: sync
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}

.github/workflows/i18n-push.yml

@@ -1,81 +0,0 @@
-name: Crowdin (push)
-
-on:
-  push:
-    branches: ['main']
-    paths:
-      - '.github/workflows/i18n.push.yml'
-      - 'apps/*/src/locales/en-US/**'
-      - 'apps/*/locales/en-US/**'
-      - 'packages/*/src/locales/en-US/**'
-      - 'packages/*/locales/en-US/**'
-      - 'crowdin.yml'
-  workflow_dispatch:
-
-concurrency:
-  group: i18n-management
-
-jobs:
-  push_translations:
-    name: Push sources to Crowdin
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    concurrency:
-      group: i18n-push:${{ github.ref }}
-      cancel-in-progress: true
-    steps:
-      - name: Preflight check
-        run: |
-          PREFLIGHT_CHECK_RESULT=true
-
-          function flight_failure () {
-            if [ "$PREFLIGHT_CHECK_RESULT" = true ]; then
-              echo "One or more pre-flight checks failed!"
-              echo ""
-              PREFLIGHT_CHECK_RESULT=false
-            fi
-            echo "- $1"
-          }
-
-          if [ "$CROWDIN_PROJECT_ID_DEFINED" != true ]; then
-            flight_failure "CROWDIN_PROJECT_ID variable is not defined (required to push)"
-          fi
-
-          if [ "$CROWDIN_PERSONAL_TOKEN_DEFINED" != true ]; then
-            flight_failure "CROWDIN_PERSONAL_TOKEN secret is not defined (required to push)"
-          fi
-
-          if [ "$PREFLIGHT_CHECK_RESULT" = false ]; then
-            exit 1
-          fi
-        env:
-          CROWDIN_PROJECT_ID_DEFINED: ${{ vars.CROWDIN_PROJECT_ID != '' }}
-          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
-
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.ref }}
-
-      - name: Query branch name
-        id: branch-name
-        shell: bash
-        run: |
-          BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
-          SAFE_BRANCH_NAME=$(echo "$BRANCH_NAME" | sed -e "s/[\\\\/\\:*?\"<>|]/_/g")
-          echo "Branch name is $BRANCH_NAME (escaped as $SAFE_BRANCH_NAME)"
-          echo "branch_name=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
-          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
-
-      - name: Upload translations to Crowdin
-        uses: crowdin/github-action@v1
-        with:
-          upload_sources: true
-          upload_translations: false
-          download_translations: false
-          push_translations: false
-          create_pull_request: false
-          crowdin_branch_name: '[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}'
-        env:
-          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/labrinth-docker.yml

@@ -2,69 +2,45 @@ name: docker-build
 
 on:
   push:
-    branches:
-      - '**'
+    branches: [ "main" ]
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
-      - Cargo.toml
-      - Cargo.lock
   pull_request:
-    types: [opened, synchronize]
+    types: [ opened, synchronize ]
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
-      - Cargo.toml
-      - Cargo.lock
   merge_group:
-    types: [checks_requested]
+    types: [ checks_requested ]
 
 jobs:
   docker:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./apps/labrinth
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
-
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: ⚙️ Generate Docker image metadata
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Fetch docker metadata
         id: docker_meta
-        uses: docker/metadata-action@v5
-        env:
-          # GitHub Packages requires annotations metadata in at least the index descriptor to show them
-          # up properly in its UI it seems, but it's not clear about it, because the docs refer to the
-          # image manifest only. See:
-          # https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#adding-a-description-to-multi-arch-images
-          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        uses: docker/metadata-action@v3
         with:
           images: ghcr.io/modrinth/labrinth
-          labels: |
-            org.opencontainers.image.title=labrinth
-            org.opencontainers.image.description=Modrinth API
-            org.opencontainers.image.licenses=AGPL-3.0-only
-          annotations: |
-            org.opencontainers.image.title=labrinth
-            org.opencontainers.image.description=Modrinth API
-            org.opencontainers.image.licenses=AGPL-3.0-only
-
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      -
+        name: Login to GitHub Images
+        uses: docker/login-action@v1
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      -
+        name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
-          file: ./apps/labrinth/Dockerfile
+          context: ./apps/labrinth
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.docker_meta.outputs.tags }}
-          labels: ${{ steps.docker_meta.outputs.labels }}
-          annotations: ${{ steps.docker_meta.outputs.annotations }}
-          build-args: |
-            GIT_HASH=${{ fromJSON(steps.docker_meta.outputs.json).labels['org.opencontainers.image.revision'] }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
-          cache-to: type=inline
+          labels: ${{ steps.docker_meta.outputs.labels }}

.github/workflows/theseus-build.yml

@@ -1,152 +0,0 @@
-name: Modrinth App build
-on:
-  push:
-    branches:
-      - main
-    tags:
-      - 'v*'
-    paths:
-      - .github/workflows/theseus-build.yml
-      - 'apps/app/**'
-      - 'apps/app-frontend/**'
-      - 'packages/app-lib/**'
-      - 'packages/app-macros/**'
-      - 'packages/assets/**'
-      - 'packages/ui/**'
-      - 'packages/utils/**'
-  workflow_dispatch:
-    inputs:
-      sign-windows-binaries:
-        description: Sign Windows binaries
-        type: boolean
-        default: true
-        required: false
-
-jobs:
-  build:
-    name: Build
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-latest]
-        include:
-          - platform: macos-latest
-            artifact-target-name: universal-apple-darwin
-          - platform: windows-latest
-            artifact-target-name: x86_64-pc-windows-msvc
-          - platform: ubuntu-latest
-            artifact-target-name: x86_64-unknown-linux-gnu
-
-    runs-on: ${{ matrix.platform }}
-
-    steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: 🧰 Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
-        with:
-          rustflags: ''
-          target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
-
-      - name: 🧰 Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: 🧰 Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-          cache: pnpm
-
-      - name: 🧰 Install Linux build dependencies
-        if: startsWith(matrix.platform, 'ubuntu')
-        run: |
-          sudo apt-get update
-          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-
-      - name: 🧰 Setup Dasel
-        uses: jaxxstorm/action-install-gh-release@v2.1.0
-        with:
-          repo: TomWright/dasel
-          tag: v2.8.1
-          extension-matching: disable
-          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
-          chmod: 0755
-
-      - name: ⚙️ Set application version and environment
-        shell: bash
-        run: |
-          APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
-          echo "Setting application version to $APP_VERSION"
-          dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
-          dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
-          dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
-
-          cp packages/app-lib/.env.prod packages/app-lib/.env
-
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
-
-      - name: 🧰 Install dependencies
-        run: pnpm install
-
-      - name: ✍️ Set up Windows code signing
-        if: startsWith(matrix.platform, 'windows')
-        shell: bash
-        run: |
-          if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
-            choco install jsign --ignore-dependencies # GitHub runners come with a global Java installation already
-          else
-            dasel delete -f apps/app/tauri-release.conf.json 'bundle.windows.signCommand'
-          fi
-
-      - name: 🔨 Build macOS app
-        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'macos')
-        env:
-          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 Linux app
-        run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
-        if: startsWith(matrix.platform, 'ubuntu')
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-
-      - name: 🔨 Build Windows app
-        run: |
-          [System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
-          $env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
-          $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
-          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
-          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: startsWith(matrix.platform, 'windows')
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          DIGICERT_ONE_SIGNER_API_KEY: ${{ secrets.DIGICERT_ONE_SIGNER_API_KEY }}
-          DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
-          DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
-
-      - name: 📤 Upload app bundles
-        uses: actions/upload-artifact@v4
-        with:
-          name: App bundle (${{ matrix.artifact-target-name }})
-          path: |
-            target/release/bundle/appimage/Modrinth App_*.AppImage*
-            target/release/bundle/deb/Modrinth App_*.deb*
-            target/release/bundle/rpm/Modrinth App-*.rpm*
-            target/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz*
-            target/universal-apple-darwin/release/bundle/dmg/Modrinth App_*.dmg*
-            target/release/bundle/nsis/Modrinth App_*-setup.exe*
-            target/release/bundle/nsis/Modrinth App_*-setup.nsis.zip*

.github/workflows/theseus-release.yml

@@ -1,118 +1,155 @@
-name: Modrinth App release
+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:
-    inputs:
-      version-tag:
-        description: Version tag to release to the wide public
-        type: string
-        required: true
-      release-notes:
-        description: Release notes to include in the Tauri version manifest
-        default: A new release of the Modrinth App is available!
-        type: string
-        required: true
 
 jobs:
-  release:
-    name: Release Modrinth App
-    runs-on: ubuntu-latest
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, windows-latest, ubuntu-22.04]
 
-    env:
-      LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
-      WINDOWS_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-pc-windows-msvc)
-      MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME: App bundle (universal-apple-darwin)
-      LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com
+    runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: 📥 Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@v11
+      - uses: actions/checkout@v4
+
+      - name: Rust setup (mac)
+        if: startsWith(matrix.platform, 'macos')
+        uses: dtolnay/rust-toolchain@stable
         with:
-          workflow: theseus-build.yml
-          workflow_conclusion: success
-          event: push
-          branch: ${{ inputs.version-tag }}
-          use_unzip: true
+          components: rustfmt, clippy
+          targets: aarch64-apple-darwin, x86_64-apple-darwin
 
-      - name: 🛠️ Generate version manifest
-        env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          RELEASE_NOTES: ${{ inputs.release-notes }}
+      - name: Rust setup
+        if: "!startsWith(matrix.platform, 'macos')"
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+
+      - name: Setup rust cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            target/**
+            !target/*/release/bundle/*/*.dmg
+            !target/*/release/bundle/*/*.app.tar.gz
+            !target/*/release/bundle/*/*.app.tar.gz.sig
+            !target/release/bundle/*/*.dmg
+            !target/release/bundle/*/*.app.tar.gz
+            !target/release/bundle/*/*.app.tar.gz.sig
+
+            !target/release/bundle/*/*.AppImage
+            !target/release/bundle/*/*.AppImage.tar.gz
+            !target/release/bundle/*/*.AppImage.tar.gz.sig
+            !target/release/bundle/*/*.deb
+            !target/release/bundle/*/*.rpm
+
+            !target/release/bundle/msi/*.msi
+            !target/release/bundle/msi/*.msi.zip
+            !target/release/bundle/msi/*.msi.zip.sig
+
+            !target/release/bundle/nsis/*.exe
+            !target/release/bundle/nsis/*.nsis.zip
+            !target/release/bundle/nsis/*.nsis.zip.sig
+          key: ${{ runner.os }}-rust-target-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-rust-target-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm via corepack
+        shell: bash
         run: |
-          # Reference: https://tauri.app/plugin/updater/#server-support
-          jq -nc \
-            --arg versionTag "${VERSION_TAG#v}" \
-            --arg releaseNotes "$RELEASE_NOTES" \
-            --rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
-            --rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
-            --rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
-            --rawfile windowsX64UpdateArtifactSignature "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION_TAG#v}_x64-setup.nsis.zip.sig" \
-          '{
-            "version": $versionTag,
-            "notes": $releaseNotes,
-            "pub_date": now | todateiso8601,
-            "platforms": {
-              "darwin-aarch64": {
-                "signature": $macOsAarch64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
-              },
-              "darwin-x86_64": {
-                "signature": $macOsX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
-              },
-              "linux-x86_64": {
-                "signature": $linuxX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage.tar.gz")",
-                "install_urls": [
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.deb")",
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage")",
-                  @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App-" + $versionTag + "-1.x86_64.rpm")"
-                ]
-              },
-              "windows-x86_64": {
-                "signature": $windowsX64UpdateArtifactSignature,
-                "url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.nsis.zip")",
-                "install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.exe")"]
-              }
-            }
-          }' > updates.json
+          corepack enable
+          corepack prepare --activate
 
-          echo "Generated manifest for version ${VERSION_TAG}:"
-          cat updates.json
-
-      - name: 📤 Upload release artifacts
-        env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
-          AWS_BUCKET: ${{ secrets.LAUNCHER_FILES_BUCKET_NAME }}
-          AWS_REGION: ${{ secrets.LAUNCHER_FILES_BUCKET_REGION }}
-          AWS_ENDPOINT_URL: ${{ secrets.LAUNCHER_FILES_BUCKET_ENDPOINT_URL }}
-          AWS_PAGER: ''
-          # Work around incompatible checksum behavior with some S3-like object storage providers,
-          # such as Cloudflare R2. See:
-          # - https://developers.cloudflare.com/r2/examples/aws/aws-cli/
-          # - https://developers.cloudflare.com/r2/examples/aws/aws-sdk-java/
-          AWS_REQUEST_CHECKSUM_CALCULATION: when_required
-          AWS_RESPONSE_CHECKSUM_VALIDATION: when_required
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
         run: |
-          for macosBundleType in 'macos' 'dmg'; do
-            aws s3 cp --recursive \
-              "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/${macosBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/macos"
-          done
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-          for linuxBundleType in 'appimage' 'deb' 'rpm'; do
-            aws s3 cp --recursive \
-              "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${linuxBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/linux"
-          done
+      - 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-
 
-          for windowsBundleType in 'nsis'; do
-            aws s3 cp --recursive \
-              "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${windowsBundleType}" \
-              "s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/windows"
-          done
+      - name: install dependencies (ubuntu only)
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev pkg-config libayatana-appindicator3-dev librsvg2-dev
 
-          aws s3 cp updates.json "s3://${AWS_BUCKET}"
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: build app (macos)
+        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config "tauri-release.conf.json"
+        if: startsWith(matrix.platform, 'macos')
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: build app
+        run: pnpm --filter=@modrinth/app run tauri build --config "tauri-release.conf.json"
+        id: build_os
+        if: "!startsWith(matrix.platform, 'macos')"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+
+      - name: upload ${{ matrix.platform }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.platform }}
+          path: |
+            target/*/release/bundle/*/*.dmg
+            target/*/release/bundle/*/*.app.tar.gz
+            target/*/release/bundle/*/*.app.tar.gz.sig
+            target/release/bundle/*/*.dmg
+            target/release/bundle/*/*.app.tar.gz
+            target/release/bundle/*/*.app.tar.gz.sig
+
+            target/release/bundle/*/*.AppImage
+            target/release/bundle/*/*.AppImage.tar.gz
+            target/release/bundle/*/*.AppImage.tar.gz.sig
+            target/release/bundle/*/*.deb
+            target/release/bundle/*/*.rpm
+
+            target/release/bundle/msi/*.msi
+            target/release/bundle/msi/*.msi.zip
+            target/release/bundle/msi/*.msi.zip.sig
+
+            target/release/bundle/nsis/*.exe
+            target/release/bundle/nsis/*.nsis.zip
+            target/release/bundle/nsis/*.nsis.zip.sig

.github/workflows/turbo-ci.yml

@@ -2,91 +2,79 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: ["main"]
   pull_request:
     types: [opened, synchronize]
   merge_group:
-    types: [checks_requested]
+    types: [ checks_requested ]
 
 jobs:
   build:
-    name: Lint and Test
-    runs-on: ubuntu-latest
-
-    env:
-      # Ensure pnpm output is colored in GitHub Actions logs
-      FORCE_COLOR: 3
-      # Make cargo nextest successfully ignore projects without tests
-      NEXTEST_NO_TESTS: pass
-      # Fail on warnings in CI
-      # (but don't do this in the root `Cargo.toml`,
-      # since we don't want warnings to become errors
-      # while developing)
-      RUSTFLAGS: -Dwarnings
+    name: Build, Test, and Lint
+    runs-on: ubuntu-22.04
 
     steps:
-      - name: 📥 Check out code
+      - name: Check out code
         uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - name: 🧰 Install build dependencies
+      - 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 -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
 
-      - name: 🧰 Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: 🧰 Setup Node.js
+      - name: Setup Node.JS environment
         uses: actions/setup-node@v4
         with:
-          node-version-file: .nvmrc
-          cache: pnpm
+          node-version: 20
 
-      - name: 🧰 Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
+      - 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:
-          rustflags: ''
-          components: clippy, rustfmt
-          cache: false
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - name: 🧰 Setup nextest
-        uses: taiki-e/install-action@nextest
-
-      # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
-      # back to a cached cargo install
-      - name: 🧰 Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@v2
-        with:
-          tool: sqlx-cli
-          locked: false
-          no-default-features: true
-          features: rustls,postgres
-
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
-
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: pnpm install
 
-      - name: ⚙️ Start services
-        run: docker compose up --wait
+      - name: Build
+        run: pnpm build
+        env:
+          SQLX_OFFLINE: true
 
-      - name: ⚙️ Setup labrinth environment and database
-        working-directory: apps/labrinth
-        run: |
-          cp .env.local .env
-          sqlx database setup
+      - name: Lint
+        run: pnpm lint
+        env:
+          SQLX_OFFLINE: true
 
-      - name: ⚙️ Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
+      - name: Start docker compose
+        run: docker compose up -d
 
-      - name: 🔍 Lint and test
-        run: pnpm run ci
-
-      - name: 🔍 Verify intl:extract has been run
-        run: |
-          pnpm turbo run intl:extract --force
-          git diff --exit-code --color */*/src/locales/en-US/index.json
+      - name: Test
+        run: pnpm test
+        env:
+          SQLX_OFFLINE: true
+          DATABASE_URL: postgresql://labrinth:labrinth@localhost/postgres

.gitignore

@@ -9,6 +9,7 @@ tmp
 node_modules
 
 # IDEs and editors
+/.idea
 .project
 .classpath
 .c9/
@@ -23,14 +24,6 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
-# IDE - IntelliJ
-.idea/*
-!.idea/code.iml
-!.idea/gradle.xml
-!.idea/icon.svg
-!.idea/modules.xml
-!.idea/vcs.xml
-
 # misc
 /.sass-cache
 /connect.lock
@@ -63,11 +56,8 @@ generated
 # app testing dir
 app-playground-data/*
 
+# soley because i need the PORT to be 3002 due to WSL stuff
+.env
+apps/frontend/.env
+
 .astro
-.claude
-
-# labrinth demo fixtures
-apps/labrinth/fixtures/demo
-
-*storybook.log
-storybook-static

.idea/.gitignore

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

.idea/daedalus.iml

@@ -3,15 +3,10 @@
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
     <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/daedalus_client_new/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/apps/daedalus_client/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/daedalus/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/app-playground/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/app/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/path-util/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />

.idea/discord.xml

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

.idea/gradle.xml

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-	<component name="GradleMigrationSettings" migrationVersion="1"/>
-	<component name="GradleSettings">
-		<option name="linkedExternalProjectsSettings">
-			<GradleProjectSettings>
-				<option name="externalProjectPath" value="$PROJECT_DIR$/packages/app-lib/java"/>
-				<option name="gradleJvm" value="#JAVA_HOME"/>
-				<option name="modules">
-					<set>
-						<option value="$PROJECT_DIR$/packages/app-lib/java"/>
-					</set>
-				</option>
-			</GradleProjectSettings>
-		</option>
-	</component>
-</project>

.idea/libraries/KotlinJavaRuntime.xml

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

.idea/modules.xml

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

.idea/vcs.xml

@@ -1,14 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-	<component name="CommitMessageInspectionProfile">
-		<profile version="1.0">
-			<inspection_tool class="CommitFormat" enabled="true" level="WARNING"
-							 enabled_by_default="true"/>
-			<inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING"
-							 enabled_by_default="true"/>
-		</profile>
-	</component>
-	<component name="VcsDirectoryMappings">
-		<mapping directory="" vcs="Git"/>
-	</component>
-</project>
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.nvmrc

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

.prettierignore

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

.vscode/settings.json

@@ -1,33 +1,13 @@
 {
-	"prettier.endOfLine": "lf",
-	"editor.formatOnSave": true,
-	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-	"editor.detectIndentation": false,
-	"editor.insertSpaces": false,
-	"files.eol": "\n",
-	"files.trimTrailingWhitespace": true,
-	"files.insertFinalNewline": true,
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit",
-		"source.organizeImports": "always"
-	},
-	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
-	"[vue]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
-	},
-	"[typescript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
-	},
-	"[javascript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
-	},
-	"[scss]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
-	},
-	"[css]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
-	},
-	"[rust]": {
-		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	}
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

CLAUDE.md

@@ -1,63 +0,0 @@
-# Architecture
-
-Use TAB instead of spaces.
-
-## Frontend
-
-There are two similar frontends in the Modrinth monorepo, the website (apps/frontend) and the app frontend (apps/app-frontend).
-
-Both use Tailwind v3, and their respective configs can be seen at `tailwind.config.ts` and `tailwind.config.js` respectively.
-
-Both utilize shared and common components from `@modrinth/ui` which can be found at `packages/ui`, and stylings from `@modrinth/assets` which can be found at `packages/assets`.
-
-Both can utilize icons from `@modrinth/assets`, which are automatically generated based on what's available within the `icons` folder of the `packages/assets` directory. You can see the generated icons list in `generated-icons.ts`.
-
-Both have access to our dependency injection framework, examples as seen in `packages/ui/src/providers/`. Ideally any state which is shared between a page and it's subpages should be shared using this dependency injection framework.
-
-### Website (apps/frontend)
-
-Before a pull request can be opened for the website, run `pnpm prepr:frontend:web` from the root folder, otherwise CI will fail.
-
-To run a development version of the frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within the `apps/frontend` folder into `apps/frontend/.env`. Then you can run the frontend by running `pnpm web:dev` in the root folder.
-
-### App Frontend (apps/app-frontend)
-
-Before a pull request can be opened for the app frontend, run `pnpm prepr:frontend:app` from the root folder, otherwise CI will fail.
-
-To run a development version of the app frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within `packages/app-lib` into `packages/app-lib/.env`. Then you must run the app itself by running `pnpm app:dev` in the root folder.
-
-### Localization
-
-Refer to `.github/instructions/i18n-convert.instructions.md` if the user asks you to perform any i18n conversion work on a component, set of components, pages or sets of pages.
-
-## Labrinth
-
-Labrinth is the backend API service for Modrinth.
-
-### Testing
-
-Before a pull request can be opened, run `cargo clippy -p labrinth --all-targets` and make sure there are ZERO warnings, otherwise CI will fail.
-
-Use `cargo test -p labrinth --all-targets` to test your changes. All tests must pass, otherwise CI will fail.
-
-To prepare the sqlx cache, cd into `apps/labrinth` and run `cargo sqlx prepare`. Make sure to NEVER run `cargo sqlx prepare --workspace`.
-
-Read the root `docker-compose.yml` to see what running services are available while developing. Use `docker exec` to access these services.
-
-When the user refers to "performing pre-PR checks", do the following:
-
-- Run clippy as described above
-- DO NOT run tests unless explicitly requested (they take a long time)
-- Prepare the sqlx cache
-
-### Clickhouse
-
-Use `docker exec labrinth-clickhouse clickhouse-client` to access the Clickhouse instance. We use the `staging_ariadne` database to store data in testing.
-
-### Postgres
-
-Use `docker exec labrinth-postgres psql -U labrinth -d labrinth -c "SELECT 1"` to access the PostgreSQL instance, replacing the `SELECT 1` with your query.
-
-# Guidelines
-
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to.

COPYING.md

@@ -2,20 +2,12 @@
 
 All packages in this repository are licensed under their respective licenses. For more information, refer to the LICENSE file in each package.
 
-For detailed information, consult each package's COPYING.md, LICENSE.txt, or LICENSE file, if available.
+For detailed information, consult each package's COPYING.md file, if available.
 
 ## Modrinth Branding
 
 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-2025 Rinth, Inc.
-
-This includes, but may not be limited to, the following files:
-
-- .idea/icon.svg
-- .github/api_cover.png
-- .github/app_cover.png
-- .github/monorepo_cover.png
-- .github/web_cover.png
+All rights reserved. © 2020-2024 Rinth, Inc.
 
 If you fork this repository, you must remove all Modrinth branding assets from your fork.

Cargo.toml

@@ -1,272 +1,24 @@
 [workspace]
-resolver = "2"
+resolver = '2'
 members = [
-  "apps/app",
-  "apps/app-playground",
-  "apps/daedalus_client",
-  "apps/labrinth",
-  "packages/app-lib",
-  "packages/ariadne",
-  "packages/daedalus",
-  "packages/modrinth-log",
-  "packages/modrinth-maxmind",
-  "packages/modrinth-util",
-  "packages/path-util",
+  './packages/app-lib',
+	'./apps/app-playground',
+  './apps/app',
+  './apps/labrinth',
+    './apps/daedalus_client',
+    './packages/daedalus',
 ]
 
-[workspace.package]
-edition = "2024"
-rust-version = "1.90.0"
-repository = "https://github.com/modrinth/code"
-
-[workspace.dependencies]
-actix-cors = "0.7.1"
-actix-files = "0.6.8"
-actix-http = "3.11.2"
-actix-multipart = "0.7.2"
-actix-rt = "2.11.0"
-actix-web = "4.11.0"
-actix-web-prom = "0.10.0"
-actix-ws = "0.3.0"
-arc-swap = "1.7.1"
-argon2 = { version = "0.5.3", features = ["std"] }
-ariadne = { path = "packages/ariadne" }
-async-compression = { version = "0.4.32", default-features = false }
-async-recursion = "1.1.1"
-async-stripe = { version = "0.41.0", default-features = false, features = [
-  "runtime-tokio-hyper-rustls",
-] }
-async-trait = "0.1.89"
-async-tungstenite = { version = "0.31.0", default-features = false, features = [
-  "futures-03-sink"
-] }
-async-walkdir = "2.1.0"
-async_zip = "0.0.18"
-base64 = "0.22.1"
-bitflags = "2.9.4"
-bytemuck = "1.24.0"
-bytes = "1.10.1"
-censor = "0.3.0"
-chardetng = "0.1.17"
-chrono = "0.4.42"
-cidre = { version = "0.11.3", default-features = false, features = [
-  "macos_15_0"
-] }
-clap = "4.5.48"
-clickhouse = "0.14.0"
-color-eyre = "0.6.5"
-color-thief = "0.2.2"
-const_format = "0.2.34"
-daedalus = { path = "packages/daedalus" }
-dashmap = "6.1.0"
-data-url = "0.3.2"
-deadpool-redis = "0.22.0"
-derive_more = "2.0.1"
-directories = "6.0.0"
-dirs = "6.0.0"
-discord-rich-presence = "1.0.0"
-dotenv-build = "0.1.1"
-dotenvy = "0.15.7"
-dunce = "1.0.5"
-either = "1.15.0"
-encoding_rs = "0.8.35"
-enumset = "1.1.10"
-eyre = "0.6.12"
-flate2 = "1.1.4"
-fs4 = { version = "0.13.1", default-features = false }
-futures = "0.3.31"
-futures-util = "0.3.31"
-heck = "0.5.0"
-hex = "0.4.3"
-hickory-resolver = "0.25.2"
-hmac = "0.12.1"
-hyper = "1.7.0"
-hyper-rustls = { version = "0.27.7", default-features = false, features = [
-  "aws-lc-rs",
-  "http1",
-  "native-tokio",
-  "tls12",
-] }
-hyper-util = "0.1.17"
-iana-time-zone = "0.1.64"
-image = { version = "0.25.8", default-features = false, features = ["rayon"] }
-indexmap = "2.11.4"
-indicatif = "0.18.0"
-itertools = "0.14.0"
-jemalloc_pprof = "0.8.1"
-json-patch = { version = "4.1.0", default-features = false }
-lettre = { version = "0.11.19", default-features = false, features = [
-  "aws-lc-rs",
-  "builder",
-  "hostname",
-  "pool",
-  "rustls",
-  "rustls-native-certs",
-  "smtp-transport",
-  "tokio1",
-  "tokio1-rustls",
-] }
-maxminddb = "0.26.0"
-meilisearch-sdk = { version = "0.30.0", default-features = false }
-modrinth-log = { path = "packages/modrinth-log" }
-modrinth-util = { path = "packages/modrinth-util" }
-muralpay = { path = "packages/muralpay" }
-murmur2 = "0.1.0"
-native-dialog = "0.9.2"
-notify = { version = "8.2.0", default-features = false }
-notify-debouncer-mini = { version = "0.7.0", default-features = false }
-p256 = "0.13.2"
-paste = "1.0.15"
-path-util = { path = "packages/path-util" }
-phf = { version = "0.13.1", features = ["macros"] }
-png = "0.18.0"
-prometheus = "0.14.0"
-quartz_nbt = "0.2.9"
-quick-xml = "0.38.3"
-rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
-rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
-redis = "0.32.7"
-regex = "1.12.2"
-reqwest = { version = "0.12.24", default-features = false }
-rgb = "0.8.52"
-rust_decimal = { version = "1.39.0", features = [
-  "serde-with-float",
-  "serde-with-str"
-] }
-rust_iso3166 = "0.1.14"
-rust-s3 = { version = "0.37.0", default-features = false, features = [
-  "fail-on-err",
-  "tags",
-  "tokio-rustls-tls",
-] }
-rustls = "0.23.32"
-rusty-money = "0.4.1"
-secrecy = "0.10.3"
-sentry = { version = "0.45.0", default-features = false, features = [
-  "backtrace",
-  "contexts",
-  "debug-images",
-  "panic",
-  "reqwest",
-  "rustls",
-] }
-sentry-actix = "0.45.0"
-serde = "1.0.228"
-serde_bytes = "0.11.19"
-serde_cbor = "0.11.2"
-serde_ini = "0.2.0"
-serde_json = "1.0.145"
-serde_with = "3.15.0"
-serde-xml-rs = "0.8.1"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
-sha1 = "0.10.6"
-sha1_smol = { version = "1.0.1", features = ["std"] }
-sha2 = "0.10.9"
-shlex = "1.3.0"
-spdx = "0.12.0"
-sqlx = { version = "0.8.6", default-features = false }
-strum = "0.27.2"
-sysinfo = { version = "0.37.2", default-features = false }
-tar = "0.4.44"
-tauri = "2.8.5"
-tauri-build = "2.4.1"
-tauri-plugin-deep-link = "2.4.3"
-tauri-plugin-dialog = "2.4.0"
-tauri-plugin-http = "2.5.2"
-tauri-plugin-opener = "2.5.0"
-tauri-plugin-os = "2.3.1"
-tauri-plugin-single-instance = "2.3.4"
-tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
-  "rustls-tls",
-  "zip",
-] }
-tauri-plugin-window-state = "2.4.0"
-tempfile = "3.23.0"
-theseus = { path = "packages/app-lib" }
-thiserror = "2.0.17"
-tikv-jemalloc-ctl = "0.6.0"
-tikv-jemallocator = "0.6.0"
-tokio = "1.47.1"
-tokio-stream = "0.1.17"
-tokio-util = "0.7.16"
-totp-rs = "5.7.0"
-tracing = "0.1.41"
-tracing-actix-web = { version = "0.7.19", default-features = false }
-tracing-ecs = "0.5.0"
-tracing-error = "0.2.1"
-tracing-subscriber = "0.3.20"
-typed-path = "0.12.0"
-url = "2.5.7"
-urlencoding = "2.1.3"
-utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
-utoipa-actix-web = { version = "0.1.2" }
-utoipa-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
-uuid = "1.18.1"
-validator = "0.20.0"
-webp = { version = "0.3.1", default-features = false }
-webview2-com = "0.38.0"  # Should be updated in lockstep with wry
-whoami = "1.6.1"
-windows = "=0.61.3"  # Locked on 0.61 until we can update windows-core to 0.62
-windows-core = "=0.61.2"  # Locked on 0.61 until webview2-com updates to 0.62
-winreg = "0.55.0"
-woothee = "0.13.0"
-yaserde = "0.12.0"
-zbus = "5.11.0"
-zip = { version = "6.0.0", default-features = false, features = [
-  "bzip2",
-  "deflate",
-  "deflate64",
-  "zstd",
-] }
-zxcvbn = "3.1.0"
-
-[workspace.lints.clippy]
-bool_to_int_with_if = "warn"
-borrow_as_ptr = "warn"
-cfg_not_test = "warn"
-clear_with_drain = "warn"
-cloned_instead_of_copied = "warn"
-collection_is_never_read = "warn"
-dbg_macro = "warn"
-default_trait_access = "warn"
-explicit_iter_loop = "warn"
-filter_map_next = "warn"
-flat_map_option = "warn"
-format_push_string = "warn"
-get_unwrap = "warn"
-large_include_file = "warn"
-large_stack_arrays = "warn"
-manual_assert = "warn"
-manual_instant_elapsed = "warn"
-manual_is_variant_and = "warn"
-manual_let_else = "warn"
-map_unwrap_or = "warn"
-match_bool = "warn"
-needless_collect = "warn"
-negative_feature_names = "warn"
-non_std_lazy_statics = "warn"
-pathbuf_init_then_push = "warn"
-read_zero_byte_vec = "warn"
-redundant_clone = "warn"
-redundant_feature_names = "warn"
-redundant_type_annotations = "warn"
-todo = "warn"
-too_many_arguments = "allow"
-uninlined_format_args = "warn"
-unnested_or_patterns = "warn"
-wildcard_dependencies = "warn"
+# Optimize for speed and reduce size on release builds
+[profile.release]
+panic = "abort" # Strip expensive panic clean-up logic
+codegen-units = 1 # Compile crates one after another so the compiler can optimize better
+lto = true # Enables link to optimizations
+opt-level = "s" # Optimize for binary size
+strip = true # Remove debug symbols
 
 [profile.dev.package.sqlx-macros]
 opt-level = 3
 
-# Optimize for speed and reduce size on release builds
-[profile.release]
-opt-level = "s"  # Optimize for binary size
-strip = true  # Remove debug symbols
-lto = true  # Enables link to optimizations
-panic = "abort"  # Strip expensive panic clean-up logic
-codegen-units = 1  # Compile crates one after another so the compiler can optimize better
-
-# Specific profile for labrinth production builds
-[profile.release-labrinth]
-inherits = "release"
-panic = "unwind"  # Don't exit the whole app on panic in production
+[patch.crates-io]
+wry = { git = "https://github.com/modrinth/wry", rev = "27fb16b" }

_typos.toml

@@ -1,19 +0,0 @@
-[files]
-extend-exclude = [
-  "**/src/locales/",
-  "apps/frontend/",
-  "patches/",
-  "packages/utils/",
-  "packages/ui/",
-  "packages/blog/",
-  # contains licenses like `CC-BY-ND-4.0`
-  "packages/moderation/src/data/stages/license.ts",
-  # contains payment card IDs like `IY1VMST1MOXS` which are flagged
-  "apps/labrinth/src/queue/payouts/mod.rs",
-]
-
-[default.extend-words]
-# Terms Of Use in `tou-link`
-tou = "tou"
-# Google Ad Manager
-gam = "gam"

apps/app-frontend/.prettierignore

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

apps/app-frontend/COPYING.md

@@ -1,9 +1,13 @@
 # Copying
 
-The source code of Modrinth App's frontend 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.
+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-2025 Rinth, Inc.
+> All rights reserved. © 2020-2023 Rinth, Inc.
+
+This includes, but may not be limited to, the following files:
+
+- theseus_gui/src-tauri/icons/\*

apps/app-frontend/eslint.config.mjs

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

apps/app-frontend/index.html

@@ -1,17 +1,16 @@
 <!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" />
-		<title>Modrinth App</title>
+  <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" />
+    <title>Modrinth App</title>
 
-		<link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
-	</head>
+    <link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
+  </head>
 
-	<body>
-		<div id="app"></div>
-		<script src="https://tally.so/widgets/embed.js" async></script>
-		<script type="module" src="/src/main.js"></script>
-	</body>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>

apps/app-frontend/package.json

@@ -1,67 +1,54 @@
 {
-	"name": "@modrinth/app-frontend",
-	"private": true,
-	"version": "1.0.0-local",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "vue-tsc --noEmit && vite build",
-		"tsc:check": "vue-tsc --noEmit",
-		"lint": "eslint . && prettier --check .",
-		"fix": "eslint . --fix && prettier --write .",
-		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
-		"test": "vue-tsc --noEmit"
-	},
-	"dependencies": {
-		"@modrinth/api-client": "workspace:^",
-		"@modrinth/assets": "workspace:*",
-		"@modrinth/ui": "workspace:*",
-		"@modrinth/utils": "workspace:*",
-		"@sentry/vue": "^8.27.0",
-		"@sfirew/minecraft-motd-parser": "^1.1.6",
-		"@tanstack/vue-query": "^5.90.7",
-		"@tauri-apps/api": "^2.5.0",
-		"@tauri-apps/plugin-dialog": "^2.2.1",
-		"@tauri-apps/plugin-http": "^2.5.0",
-		"@tauri-apps/plugin-opener": "^2.2.6",
-		"@tauri-apps/plugin-os": "^2.2.1",
-		"@tauri-apps/plugin-updater": "^2.7.1",
-		"@tauri-apps/plugin-window-state": "^2.2.2",
-		"@types/three": "^0.172.0",
-		"intl-messageformat": "^10.7.7",
-		"vue-i18n": "^10.0.0",
-		"@vueuse/core": "^11.1.0",
-		"dayjs": "^1.11.10",
-		"floating-vue": "^5.2.2",
-		"ofetch": "^1.3.4",
-		"pinia": "^3.0.0",
-		"posthog-js": "^1.158.2",
-		"three": "^0.172.0",
-		"vite-svg-loader": "^5.1.0",
-		"vue": "^3.5.13",
-		"vue-multiselect": "3.0.0",
-		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.1.1",
-		"@formatjs/cli": "^6.2.12",
-		"@modrinth/tooling-config": "workspace:*",
-		"@nuxt/eslint-config": "^0.5.6",
-		"@taijased/vue-render-tracker": "^1.0.7",
-		"@vitejs/plugin-vue": "^6.0.3",
-		"autoprefixer": "^10.4.19",
-		"eslint": "^9.9.1",
-		"eslint-plugin-turbo": "^2.5.4",
-		"postcss": "^8.4.39",
-		"prettier": "^3.2.5",
-		"sass": "^1.74.1",
-		"tailwindcss": "^3.4.4",
-		"typescript": "^5.5.4",
-		"vite": "^6.0.0",
-		"vue-component-type-helpers": "^3.1.8",
-		"vue-tsc": "^2.1.6"
-	},
-	"packageManager": "pnpm@9.4.0",
-	"web-types": "../../web-types.json"
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.8.9",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "tsc:check": "vue-tsc --noEmit",
+    "lint": "eslint . && prettier --check .",
+    "fix": "eslint . --fix && prettier --write ."
+  },
+  "dependencies": {
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/ui": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@sentry/vue": "^8.27.0",
+    "@tauri-apps/api": "^2.0.0-rc.3",
+    "@tauri-apps/plugin-dialog": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-os": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-shell": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-updater": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-window-state": "^2.0.0-rc.0",
+    "@vintl/vintl": "^4.4.1",
+    "dayjs": "^1.11.10",
+    "floating-vue": "^5.2.2",
+    "ofetch": "^1.3.4",
+    "pinia": "^2.1.7",
+    "posthog-js": "^1.158.2",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.21",
+    "vue-multiselect": "3.0.0",
+    "vue-router": "4.3.0",
+    "vue-virtual-scroller": "v2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@nuxt/eslint-config": "^0.5.6",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.9.1",
+    "eslint-config-custom": "workspace:*",
+    "eslint-plugin-turbo": "^2.1.1",
+    "postcss": "^8.4.39",
+    "prettier": "^3.2.5",
+    "sass": "^1.74.1",
+    "tailwindcss": "^3.4.4",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.8",
+    "vue-tsc": "^2.1.6"
+  },
+  "packageManager": "pnpm@9.4.0"
 }

apps/app-frontend/postcss.config.js

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

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

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

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

@@ -1,9 +1,14 @@
-export { default as AddProjectImage } from './add-project.svg'
+export { default as ServerIcon } from './server.svg'
+export { default as MinimizeIcon } from './minimize.svg'
+export { default as MaximizeIcon } from './maximize.svg'
 export { default as SwapIcon } from './arrow-left-right.svg'
-export { default as MenuIcon } from './menu.svg'
-export { default as ChatIcon } from './messages-square.svg'
-export { default as VersionIcon } from './milestone.svg'
-export { default as NewInstanceImage } from './new-instance.svg'
-export { default as PackageIcon } from './package.svg'
-export { default as TextInputIcon } from './text-cursor-input.svg'
 export { default as ToggleIcon } from './toggle.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as VersionIcon } from './milestone.svg'
+export { default as MoreIcon } from './more.svg'
+export { default as TextInputIcon } from './text-cursor-input.svg'
+export { default as AddProjectImage } from './add-project.svg'
+export { default as NewInstanceImage } from './new-instance.svg'
+export { default as MenuIcon } from './menu.svg'
+export { default as BugIcon } from './bug.svg'
+export { default as ChatIcon } from './messages-square.svg'

apps/app-frontend/src/assets/icons/maximize.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle-icon lucide-loader-circle"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"><path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>

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

@@ -2,161 +2,113 @@
 @tailwind components;
 @tailwind utilities;
 
-@import '@modrinth/ui/src/styles/tailwind-utilities.css';
-
-@font-face {
-	font-family: 'bundled-minecraft-font-mrapp';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 400;
-	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
-}
-
-@font-face {
-	font-family: 'bundled-minecraft-font-mrapp';
-	font-style: italic;
-	font-display: swap;
-	font-weight: 400;
-	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
-}
-
-@font-face {
-	font-family: 'bundled-minecraft-font-mrapp';
-	font-style: normal;
-	font-display: swap;
-	font-weight: 600;
-	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
-}
-
-@font-face {
-	font-family: 'bundled-minecraft-font-mrapp';
-	font-style: italic;
-	font-display: swap;
-	font-weight: 600;
-	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
-}
-
-.font-minecraft {
-	font-family: 'bundled-minecraft-font-mrapp', monospace;
-}
-
 :root {
-	font-family: var(--font-standard, sans-serif), sans-serif;
-	color-scheme: dark;
-	--view-width: calc(100% - 5rem);
-	--expanded-view-width: calc(100% - 13rem);
+  font-family: var(--font-standard);
+  color-scheme: dark;
+  --view-width: calc(100% - 5rem);
+  --expanded-view-width: calc(100% - 13rem);
 }
 
 body {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .card-divider {
-	background-color: var(--color-button-bg);
-	border: none;
-	color: var(--color-button-bg);
-	height: 1px;
-	margin: var(--gap-sm) 0;
+  background-color: var(--color-button-bg);
+  border: none;
+  color: var(--color-button-bg);
+  height: 1px;
+  margin: var(--gap-sm) 0;
 }
 
 .no-wrap {
-	white-space: nowrap;
+  white-space: nowrap;
 }
 
 .no-select {
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 a {
-	color: var(--color-link);
-	text-decoration: none;
+  color: var(--color-link);
+  text-decoration: none;
 
-	&:hover {
-		text-decoration: none;
-	}
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 input {
-	border: none !important;
+  border: none !important;
 }
 
 .badge {
-	display: flex;
-	border-radius: var(--radius-md);
-	white-space: nowrap;
-	align-items: center;
-	background-color: var(--color-bg);
-	padding-block: var(--gap-sm);
-	padding-inline: var(--gap-lg);
-	width: min-content;
+  display: flex;
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  align-items: center;
+  background-color: var(--color-bg);
+  padding-block: var(--gap-sm);
+  padding-inline: var(--gap-lg);
+  width: min-content;
 
-	svg {
-		width: 1.1rem;
-		height: 1.1rem;
-		margin-right: 0.5rem;
-	}
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: 0.5rem;
+  }
 
-	&.featured {
-		background-color: var(--color-brand-highlight);
-		color: var(--color-contrast);
-	}
+  &.featured {
+    background-color: var(--color-brand-highlight);
+    color: var(--color-contrast);
+  }
 }
 
 * {
-	scrollbar-width: auto;
-	scrollbar-color: var(--color-scrollbar) var(--color-bg);
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar) var(--color-bg);
 }
 
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
-	width: 16px;
-	border: 3px solid transparent;
-	opacity: 0.5;
-	transition: opacity 0.2s ease-in-out;
-}
-
-*::-webkit-scrollbar:hover {
-	opacity: 1;
+  width: var(--gap-md);
+  border: 3px solid var(--color-scrollbar);
 }
 
 *::-webkit-scrollbar-track {
-	background: transparent;
+  background: var(--color-bg);
+  border: 3px solid var(--color-bg);
 }
 
 *::-webkit-scrollbar-thumb {
-	background-color: var(--color-scrollbar);
-	border-radius: var(--radius-lg);
-	border: 5px solid transparent;
-	background-clip: content-box;
+  background-color: var(--color-scrollbar);
+  border-radius: var(--radius-lg);
+  border: 3px solid var(--color-bg);
 }
 
 .highlighted {
-	box-shadow: 0 0 1rem var(--color-brand) !important;
+  box-shadow: 0 0 1rem var(--color-brand) !important;
 }
 
 .gecko {
-	background-color: var(--color-raised-bg);
-	box-shadow: none !important;
+  background-color: var(--color-raised-bg);
+  box-shadow: none !important;
 }
 
 img {
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-}
-
-.card-shadow {
-	box-shadow: var(--shadow-card);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 
 @import '@modrinth/assets/omorphia.scss';

apps/app-frontend/src/assets/stylesheets/macFix.css

@@ -1,3 +1,3 @@
 img {
-	pointer-events: none !important;
+  pointer-events: none !important;
 }

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

@@ -1,39 +1,36 @@
 <script setup>
-import {
-	ClipboardCopyIcon,
-	EyeIcon,
-	FolderOpenIcon,
-	PlayIcon,
-	PlusIcon,
-	SearchIcon,
-	StopCircleIcon,
-	TrashIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
-import { useStorage } from '@vueuse/core'
-import dayjs from 'dayjs'
-import { computed, ref } from 'vue'
-
-import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { computed, ref } from 'vue'
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  StopCircleIcon,
+  EyeIcon,
+  SearchIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Button, Card, DropdownSelect } from '@modrinth/ui'
+import { formatCategoryHeader } from '@modrinth/utils'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import dayjs from 'dayjs'
 import { duplicate, remove } from '@/helpers/profile.js'
-
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/notifications.js'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 
 const props = defineProps({
-	instances: {
-		type: Array,
-		default() {
-			return []
-		},
-	},
-	label: {
-		type: String,
-		default: '',
-	},
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
 })
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
@@ -42,356 +39,355 @@ const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
 async function deleteProfile() {
-	if (currentDeleteInstance.value) {
-		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.path !== currentDeleteInstance.value,
-		)
-		await remove(currentDeleteInstance.value).catch(handleError)
-	}
+  if (currentDeleteInstance.value) {
+    instanceComponents.value = instanceComponents.value.filter(
+      (x) => x.instance.path !== currentDeleteInstance.value,
+    )
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
 }
 
 async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+  await duplicate(p).catch(handleError)
 }
 
 const handleRightClick = (event, profilePathId) => {
-	const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
-	const baseOptions = [
-		{ name: 'add_content' },
-		{ type: 'divider' },
-		{ name: 'edit' },
-		{ name: 'duplicate' },
-		{ name: 'open' },
-		{ name: 'copy' },
-		{ type: 'divider' },
-		{
-			name: 'delete',
-			color: 'danger',
-		},
-	]
+  const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open' },
+    { name: 'copy' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
 
-	instanceOptions.value.showMenu(
-		event,
-		item,
-		item.playing
-			? [
-					{
-						name: 'stop',
-						color: 'danger',
-					},
-					...baseOptions,
-				]
-			: [
-					{
-						name: 'play',
-						color: 'primary',
-					},
-					...baseOptions,
-				],
-	)
+  instanceOptions.value.showMenu(
+    event,
+    item,
+    item.playing
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ],
+  )
 }
 
 const handleOptionsClick = async (args) => {
-	switch (args.option) {
-		case 'play':
-			args.item.play(null, 'InstanceGridContextMenu')
-			break
-		case 'stop':
-			args.item.stop(null, 'InstanceGridContextMenu')
-			break
-		case 'add_content':
-			await args.item.addContent()
-			break
-		case 'edit':
-			await args.item.seeInstance()
-			break
-		case 'duplicate':
-			if (args.item.instance.install_stage == 'installed')
-				await duplicateProfile(args.item.instance.path)
-			break
-		case 'open':
-			await args.item.openFolder()
-			break
-		case 'copy':
-			await navigator.clipboard.writeText(args.item.instance.path)
-			break
-		case 'delete':
-			currentDeleteInstance.value = args.item.instance.path
-			confirmModal.value.show()
-			break
-	}
+  switch (args.option) {
+    case 'play':
+      args.item.play(null, 'InstanceGridContextMenu')
+      break
+    case 'stop':
+      args.item.stop(null, 'InstanceGridContextMenu')
+      break
+    case 'add_content':
+      await args.item.addContent()
+      break
+    case 'edit':
+      await args.item.seeInstance()
+      break
+    case 'duplicate':
+      if (args.item.instance.install_stage == 'installed')
+        await duplicateProfile(args.item.instance.path)
+      break
+    case 'open':
+      await args.item.openFolder()
+      break
+    case 'copy':
+      await navigator.clipboard.writeText(args.item.instance.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.instance.path
+      confirmModal.value.show()
+      break
+  }
 }
 
-const state = useStorage(
-	`${props.label}-grid-display-state`,
-	{
-		group: 'Group',
-		sortBy: 'Name',
-	},
-	localStorage,
-	{ mergeDefaults: true },
-)
-
 const search = ref('')
+const group = ref('Category')
+const filters = ref('All profiles')
+const sortBy = ref('Name')
 
 const filteredResults = computed(() => {
-	const { group = 'Group', sortBy = 'Name' } = state.value
+  let instances = props.instances.filter((instance) => {
+    return instance.name.toLowerCase().includes(search.value.toLowerCase())
+  })
 
-	const instances = props.instances.filter((instance) => {
-		return instance.name.toLowerCase().includes(search.value.toLowerCase())
-	})
+  if (sortBy.value === 'Name') {
+    instances.sort((a, b) => {
+      return a.name.localeCompare(b.name)
+    })
+  }
 
-	if (sortBy === 'Name') {
-		instances.sort((a, b) => {
-			return a.name.localeCompare(b.name)
-		})
-	}
+  if (sortBy.value === 'Game version') {
+    instances.sort((a, b) => {
+      return a.game_version.localeCompare(b.game_version)
+    })
+  }
 
-	if (sortBy === 'Game version') {
-		instances.sort((a, b) => {
-			return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
-		})
-	}
+  if (sortBy.value === 'Last played') {
+    instances.sort((a, b) => {
+      return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
+    })
+  }
 
-	if (sortBy === 'Last played') {
-		instances.sort((a, b) => {
-			return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
-		})
-	}
+  if (sortBy.value === 'Date created') {
+    instances.sort((a, b) => {
+      return dayjs(b.date_created).diff(dayjs(a.date_created))
+    })
+  }
 
-	if (sortBy === 'Date created') {
-		instances.sort((a, b) => {
-			return dayjs(b.date_created).diff(dayjs(a.date_created))
-		})
-	}
+  if (sortBy.value === 'Date modified') {
+    instances.sort((a, b) => {
+      return dayjs(b.date_modified).diff(dayjs(a.date_modified))
+    })
+  }
 
-	if (sortBy === 'Date modified') {
-		instances.sort((a, b) => {
-			return dayjs(b.date_modified).diff(dayjs(a.date_modified))
-		})
-	}
+  if (filters.value === 'Custom instances') {
+    instances = instances.filter((instance) => {
+      return !instance.linked_data
+    })
+  } else if (filters.value === 'Downloaded modpacks') {
+    instances = instances.filter((instance) => {
+      return instance.linked_data
+    })
+  }
 
-	const instanceMap = new Map()
+  const instanceMap = new Map()
 
-	if (group === 'Loader') {
-		instances.forEach((instance) => {
-			const loader = formatCategoryHeader(instance.loader)
-			if (!instanceMap.has(loader)) {
-				instanceMap.set(loader, [])
-			}
+  if (group.value === 'Loader') {
+    instances.forEach((instance) => {
+      const loader = formatCategoryHeader(instance.loader)
+      if (!instanceMap.has(loader)) {
+        instanceMap.set(loader, [])
+      }
 
-			instanceMap.get(loader).push(instance)
-		})
-	} else if (group === 'Game version') {
-		instances.forEach((instance) => {
-			if (!instanceMap.has(instance.game_version)) {
-				instanceMap.set(instance.game_version, [])
-			}
+      instanceMap.get(loader).push(instance)
+    })
+  } else if (group.value === 'Game version') {
+    instances.forEach((instance) => {
+      if (!instanceMap.has(instance.game_version)) {
+        instanceMap.set(instance.game_version, [])
+      }
 
-			instanceMap.get(instance.game_version).push(instance)
-		})
-	} else if (group === 'Group') {
-		instances.forEach((instance) => {
-			if (instance.groups.length === 0) {
-				instance.groups.push('None')
-			}
+      instanceMap.get(instance.game_version).push(instance)
+    })
+  } else if (group.value === 'Category') {
+    instances.forEach((instance) => {
+      if (instance.groups.length === 0) {
+        instance.groups.push('None')
+      }
 
-			for (const category of instance.groups) {
-				if (!instanceMap.has(category)) {
-					instanceMap.set(category, [])
-				}
+      for (const category of instance.groups) {
+        if (!instanceMap.has(category)) {
+          instanceMap.set(category, [])
+        }
 
-				instanceMap.get(category).push(instance)
-			}
-		})
-	} else {
-		return instanceMap.set('None', instances)
-	}
+        instanceMap.get(category).push(instance)
+      }
+    })
+  } else {
+    return instanceMap.set('None', instances)
+  }
 
-	// For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
-	// ie: Category A should come before B, even if the first instance in B comes before the first instance in A
-	if (sortBy === 'Name') {
-		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
-			// None should always be first
-			if (a[0] === 'None' && b[0] !== 'None') {
-				return -1
-			}
-			if (a[0] !== 'None' && b[0] === 'None') {
-				return 1
-			}
-			return a[0].localeCompare(b[0])
-		})
-		instanceMap.clear()
-		sortedEntries.forEach((entry) => {
-			instanceMap.set(entry[0], entry[1])
-		})
-	}
-	// default sorting would do 1.20.4 < 1.8.9 because 2 < 8
-	// localeCompare with numeric=true puts 1.8.9 < 1.20.4 because 8 < 20
-	if (group === 'Game version') {
-		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
-			return a[0].localeCompare(b[0], undefined, { numeric: true })
-		})
-		instanceMap.clear()
-		sortedEntries.forEach((entry) => {
-			instanceMap.set(entry[0], entry[1])
-		})
-	}
+  // For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
+  // ie: Category A should come before B, even if the first instance in B comes before the first instance in A
+  if (sortBy.value === 'Name') {
+    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+      // None should always be first
+      if (a[0] === 'None' && b[0] !== 'None') {
+        return -1
+      }
+      if (a[0] !== 'None' && b[0] === 'None') {
+        return 1
+      }
+      return a[0].localeCompare(b[0])
+    })
+    instanceMap.clear()
+    sortedEntries.forEach((entry) => {
+      instanceMap.set(entry[0], entry[1])
+    })
+  }
 
-	return instanceMap
+  return instanceMap
 })
 </script>
 <template>
-	<div class="flex gap-2">
-		<div class="iconified-input flex-1">
-			<SearchIcon />
-			<input v-model="search" type="text" placeholder="Search" />
-			<Button class="r-btn" @click="() => (search = '')">
-				<XIcon />
-			</Button>
-		</div>
-		<DropdownSelect
-			v-slot="{ selected }"
-			v-model="state.sortBy"
-			name="Sort Dropdown"
-			class="max-w-[16rem]"
-			:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
-			placeholder="Select..."
-		>
-			<span class="font-semibold text-primary">Sort by: </span>
-			<span class="font-semibold text-secondary">{{ selected }}</span>
-		</DropdownSelect>
-		<DropdownSelect
-			v-slot="{ selected }"
-			v-model="state.group"
-			class="max-w-[16rem]"
-			name="Group Dropdown"
-			:options="['Group', 'Loader', 'Game version', 'None']"
-			placeholder="Select..."
-		>
-			<span class="font-semibold text-primary">Group by: </span>
-			<span class="font-semibold text-secondary">{{ selected }}</span>
-		</DropdownSelect>
-	</div>
-	<div
-		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
-			key,
-			value,
-		}))"
-		:key="instanceSection.key"
-		class="row"
-	>
-		<div v-if="instanceSection.key !== 'None'" class="divider">
-			<p>{{ instanceSection.key }}</p>
-			<hr aria-hidden="true" />
-		</div>
-		<section class="instances">
-			<Instance
-				v-for="instance in instanceSection.value"
-				ref="instanceComponents"
-				:key="instance.path + instance.install_stage"
-				:instance="instance"
-				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-			/>
-		</section>
-	</div>
-	<ConfirmModalWrapper
-		ref="confirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		@proceed="deleteProfile"
-	/>
-	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
-		<template #play> <PlayIcon /> Play </template>
-		<template #stop> <StopCircleIcon /> Stop </template>
-		<template #add_content> <PlusIcon /> Add content </template>
-		<template #edit> <EyeIcon /> View instance </template>
-		<template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
-		<template #delete> <TrashIcon /> Delete </template>
-		<template #open> <FolderOpenIcon /> Open folder </template>
-		<template #copy> <ClipboardCopyIcon /> Copy path </template>
-	</ContextMenu>
+  <ConfirmModalWrapper
+    ref="confirmModal"
+    title="Are you sure you want to delete this instance?"
+    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    @proceed="deleteProfile"
+  />
+  <Card class="header">
+    <div class="iconified-input">
+      <SearchIcon />
+      <input v-model="search" type="text" placeholder="Search" class="search-input" />
+      <Button class="r-btn" @click="() => (search = '')">
+        <XIcon />
+      </Button>
+    </div>
+    <div class="labeled_button">
+      <span>Sort by</span>
+      <DropdownSelect
+        v-model="sortBy"
+        class="sort-dropdown"
+        name="Sort Dropdown"
+        :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Filter by</span>
+      <DropdownSelect
+        v-model="filters"
+        class="filter-dropdown"
+        name="Filter Dropdown"
+        :options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Group by</span>
+      <DropdownSelect
+        v-model="group"
+        class="group-dropdown"
+        name="Group Dropdown"
+        :options="['Category', 'Loader', 'Game version', 'None']"
+        placeholder="Select..."
+      />
+    </div>
+  </Card>
+  <div
+    v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
+      key,
+      value,
+    }))"
+    :key="instanceSection.key"
+    class="row"
+  >
+    <div v-if="instanceSection.key !== 'None'" class="divider">
+      <p>{{ instanceSection.key }}</p>
+      <hr aria-hidden="true" />
+    </div>
+    <section class="instances">
+      <Instance
+        v-for="instance in instanceSection.value"
+        ref="instanceComponents"
+        :key="instance.path + instance.install_stage"
+        :instance="instance"
+        @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+      />
+    </section>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open> <FolderOpenIcon /> Open folder </template>
+    <template #copy> <ClipboardCopyIcon /> Copy path </template>
+  </ContextMenu>
 </template>
 <style lang="scss" scoped>
 .row {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: 1rem;
 
-	.divider {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-		gap: 1rem;
-		margin-bottom: 1rem;
+  .divider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 1rem;
+    margin-bottom: 1rem;
 
-		p {
-			margin: 0;
-			font-size: 1rem;
-			white-space: nowrap;
-			color: var(--color-contrast);
-		}
+    p {
+      margin: 0;
+      font-size: 1rem;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
 
-		hr {
-			background-color: var(--color-gray);
-			height: 1px;
-			width: 100%;
-			border: none;
-		}
-	}
+    hr {
+      background-color: var(--color-gray);
+      height: 1px;
+      width: 100%;
+      border: none;
+    }
+  }
 }
 
 .header {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: 1rem;
-	align-items: inherit;
-	margin: 1rem 1rem 0 !important;
-	padding: 1rem;
-	width: calc(100% - 2rem);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: inherit;
+  margin: 1rem 1rem 0 !important;
+  padding: 1rem;
+  width: calc(100% - 2rem);
 
-	.iconified-input {
-		flex-grow: 1;
+  .iconified-input {
+    flex-grow: 1;
 
-		input {
-			min-width: 100%;
-		}
-	}
+    input {
+      min-width: 100%;
+    }
+  }
 
-	.sort-dropdown {
-		width: 10rem;
-	}
+  .sort-dropdown {
+    width: 10rem;
+  }
 
-	.filter-dropdown {
-		width: 15rem;
-	}
+  .filter-dropdown {
+    width: 15rem;
+  }
 
-	.group-dropdown {
-		width: 10rem;
-	}
+  .group-dropdown {
+    width: 10rem;
+  }
 
-	.labeled_button {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 0.5rem;
-		white-space: nowrap;
-	}
+  .labeled_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
 }
 
 .instances {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-	width: 100%;
-	gap: 0.75rem;
-	margin-right: auto;
-	scroll-behavior: smooth;
-	overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  width: 100%;
+  gap: 1rem;
+  margin-right: auto;
+  scroll-behavior: smooth;
+  overflow-y: auto;
 }
 </style>

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

@@ -1,142 +0,0 @@
-<script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-
-import { useLoading } from '@/store/state.js'
-
-const props = defineProps({
-	throttle: {
-		type: Number,
-		default: 0,
-	},
-	duration: {
-		type: Number,
-		default: 1000,
-	},
-	height: {
-		type: Number,
-		default: 2,
-	},
-	color: {
-		type: String,
-		default: 'var(--loading-bar-gradient)',
-	},
-})
-
-const indicator = useLoadingIndicator({
-	duration: props.duration,
-	throttle: props.throttle,
-})
-
-onBeforeUnmount(() => indicator.clear)
-
-const loading = useLoading()
-
-watch(loading, (newValue) => {
-	if (newValue.barEnabled) {
-		if (newValue.loading) {
-			indicator.start()
-		} else {
-			indicator.finish()
-		}
-	}
-})
-
-function useLoadingIndicator(opts) {
-	const progress = ref(0)
-	const isLoading = ref(false)
-	const step = computed(() => 10000 / opts.duration)
-
-	let _timer = null
-	let _throttle = null
-
-	function start() {
-		clear()
-		progress.value = 0
-		if (opts.throttle) {
-			_throttle = setTimeout(() => {
-				isLoading.value = true
-				_startTimer()
-			}, opts.throttle)
-		} else {
-			isLoading.value = true
-			_startTimer()
-		}
-	}
-
-	function finish() {
-		progress.value = 100
-		_hide()
-	}
-
-	function clear() {
-		clearInterval(_timer)
-		clearTimeout(_throttle)
-		_timer = null
-		_throttle = null
-	}
-
-	function _increase(num) {
-		progress.value = Math.min(100, progress.value + num)
-	}
-
-	function _hide() {
-		clear()
-		setTimeout(() => {
-			isLoading.value = false
-			setTimeout(() => {
-				progress.value = 0
-			}, 400)
-		}, 500)
-	}
-
-	function _startTimer() {
-		_timer = setInterval(() => {
-			_increase(step.value)
-		}, 100)
-	}
-
-	return { progress, isLoading, start, finish, clear }
-}
-</script>
-
-<template>
-	<div
-		class="loading-indicator-bar"
-		:style="{
-			'--_width': `${indicator.progress.value}%`,
-			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
-			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
-			top: `0`,
-			right: `0`,
-			left: `${props.offsetWidth}`,
-			pointerEvents: 'none',
-			width: `var(--_width)`,
-			height: `var(--_height)`,
-			borderRadius: `var(--_height)`,
-			// opacity: `var(--_opacity)`,
-			background: `${props.color}`,
-			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
-			zIndex: 6,
-		}"
-	>
-		<slot />
-	</div>
-</template>
-<style lang="scss" scoped>
-.loading-indicator-bar::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	width: var(--_width);
-	bottom: 0;
-	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
-	opacity: calc(var(--_opacity) * 0.1);
-	z-index: 5;
-	transition:
-		width 0.1s ease-in-out,
-		opacity 0.1s ease-out;
-}
-</style>

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

@@ -1,54 +1,49 @@
 <script setup>
 import {
-	ClipboardCopyIcon,
-	DownloadIcon,
-	ExternalIcon,
-	EyeIcon,
-	FolderOpenIcon,
-	GlobeIcon,
-	PlayIcon,
-	PlusIcon,
-	StopCircleIcon,
-	TrashIcon,
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  DownloadIcon,
+  GlobeIcon,
+  StopCircleIcon,
+  ExternalIcon,
+  EyeIcon,
+  ChevronRightIcon,
 } from '@modrinth/assets'
-import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import Instance from '@/components/ui/Instance.vue'
 import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import Instance from '@/components/ui/Instance.vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ProjectCard from '@/components/ui/ProjectCard.vue'
-import { trackEvent } from '@/helpers/analytics'
 import { get_by_profile_path } from '@/helpers/process.js'
+import { handleError } from '@/store/notifications.js'
 import { duplicate, kill, remove, run } from '@/helpers/profile.js'
+import { useRouter } from 'vue-router'
 import { showProfileInFolder } from '@/helpers/utils.js'
+import { trackEvent } from '@/helpers/analytics'
 import { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
 
-const { handleError } = injectNotificationManager()
-
 const router = useRouter()
 
 const props = defineProps({
-	instances: {
-		type: Array,
-		default() {
-			return []
-		},
-	},
-	label: {
-		type: String,
-		default: '',
-	},
-	canPaginate: Boolean,
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  canPaginate: Boolean,
 })
 
 const actualInstances = computed(() =>
-	props.instances.filter(
-		(x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
-	),
+  props.instances.filter((x) => x && x.instances && x.instances[0]),
 )
 
 const modsRow = ref(null)
@@ -60,316 +55,275 @@ const deleteConfirmModal = ref(null)
 const currentDeleteInstance = ref(null)
 
 async function deleteProfile() {
-	if (currentDeleteInstance.value) {
-		await remove(currentDeleteInstance.value).catch(handleError)
-	}
+  if (currentDeleteInstance.value) {
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
 }
 
 async function duplicateProfile(p) {
-	await duplicate(p).catch(handleError)
+  await duplicate(p).catch(handleError)
 }
 
 const handleInstanceRightClick = async (event, passedInstance) => {
-	const baseOptions = [
-		{ name: 'add_content' },
-		{ type: 'divider' },
-		{ name: 'edit' },
-		{ name: 'duplicate' },
-		{ name: 'open_folder' },
-		{ name: 'copy_path' },
-		{ type: 'divider' },
-		{
-			name: 'delete',
-			color: 'danger',
-		},
-	]
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open_folder' },
+    { name: 'copy_path' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
 
-	const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
+  const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
 
-	const options =
-		runningProcesses.length > 0
-			? [
-					{
-						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)
+  instanceOptions.value.showMenu(event, passedInstance, options)
 }
 
 const handleProjectClick = (event, passedInstance) => {
-	instanceOptions.value.showMenu(event, passedInstance, [
-		{
-			name: 'install',
-			color: 'primary',
-		},
-		{ type: 'divider' },
-		{
-			name: 'open_link',
-		},
-		{
-			name: 'copy_link',
-		},
-	])
+  instanceOptions.value.showMenu(event, passedInstance, [
+    {
+      name: 'install',
+      color: 'primary',
+    },
+    { type: 'divider' },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
 }
 
 const handleOptionsClick = async (args) => {
-	switch (args.option) {
-		case 'play':
-			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':
-			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.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-				query: { i: args.item.path },
-			})
-			break
-		case 'edit':
-			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.path)}/`,
-			})
-			break
-		case 'duplicate':
-			if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
-			break
-		case 'delete':
-			currentDeleteInstance.value = args.item.path
-			deleteConfirmModal.value.show()
-			break
-		case 'open_folder':
-			await showProfileInFolder(args.item.path)
-			break
-		case 'copy_path':
-			await navigator.clipboard.writeText(args.item.path)
-			break
-		case 'install': {
-			await installVersion(
-				args.item.project_id,
-				null,
-				null,
-				'ProjectCardContextMenu',
-				() => {},
-				() => {},
-			).catch(handleError)
+  switch (args.option) {
+    case 'play':
+      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':
+      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.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        query: { i: args.item.path },
+      })
+      break
+    case 'edit':
+      await router.push({
+        path: `/instance/${encodeURIComponent(args.item.path)}/`,
+      })
+      break
+    case 'duplicate':
+      if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.path
+      deleteConfirmModal.value.show()
+      break
+    case 'open_folder':
+      await showProfileInFolder(args.item.path)
+      break
+    case 'copy_path':
+      await navigator.clipboard.writeText(args.item.path)
+      break
+    case 'install': {
+      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')
 
-			break
-		}
-		case 'open_link':
-			openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
-			break
-		case 'copy_link':
-			await navigator.clipboard.writeText(
-				`https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
-			)
-			break
-	}
+      break
+    }
+    case 'open_link':
+      window.__TAURI_INVOKE__('tauri', {
+        __tauriModule: 'Shell',
+        message: {
+          cmd: 'open',
+          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+        },
+      })
+      break
+    case 'copy_link':
+      await navigator.clipboard.writeText(
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+      )
+      break
+  }
 }
 
-const maxInstancesPerCompactRow = ref(1)
 const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)
 
 const calculateCardsPerRow = () => {
-	if (rows.value.length === 0) {
-		return
-	}
-
-	// Calculate how many cards fit in one row
-	const containerWidth = rows.value[0].clientWidth
-	// Convert container width from pixels to rem
-	const containerWidthInRem =
-		containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
-
-	maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
-	maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
-	maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
-
-	if (maxInstancesPerRow.value < 5) {
-		maxInstancesPerRow.value *= 2
-	}
-	if (maxInstancesPerCompactRow.value < 5) {
-		maxInstancesPerCompactRow.value *= 2
-	}
-	if (maxProjectsPerRow.value < 3) {
-		maxProjectsPerRow.value *= 2
-	}
+  // Calculate how many cards fit in one row
+  const containerWidth = rows.value[0].clientWidth
+  // Convert container width from pixels to rem
+  const containerWidthInRem =
+    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 1) / 11)
+  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 1) / 19)
 }
 
-const rowContainer = ref(null)
-const resizeObserver = ref(null)
-
 onMounted(() => {
-	calculateCardsPerRow()
-	resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
-	if (rowContainer.value) {
-		resizeObserver.value.observe(rowContainer.value)
-	}
-	window.addEventListener('resize', calculateCardsPerRow)
+  calculateCardsPerRow()
+  window.addEventListener('resize', calculateCardsPerRow)
 })
 
 onUnmounted(() => {
-	window.removeEventListener('resize', calculateCardsPerRow)
-	if (rowContainer.value) {
-		resizeObserver.value.unobserve(rowContainer.value)
-	}
+  window.removeEventListener('resize', calculateCardsPerRow)
 })
 </script>
 
 <template>
-	<ConfirmModalWrapper
-		ref="deleteConfirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		@proceed="deleteProfile"
-	/>
-	<div ref="rowContainer" class="flex flex-col gap-4">
-		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
-			<HeadingLink class="mt-1" :to="row.route">
-				{{ row.label }}
-			</HeadingLink>
-			<section
-				v-if="row.instance"
-				ref="modsRow"
-				class="instances"
-				:class="{ compact: row.compact }"
-			>
-				<Instance
-					v-for="(instance, instanceIndex) in row.instances.slice(
-						0,
-						row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
-					)"
-					:key="row.label + instance.path"
-					:instance="instance"
-					:compact="row.compact"
-					:first="instanceIndex === 0"
-					@contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
-				/>
-			</section>
-			<section v-else ref="modsRow" class="projects">
-				<ProjectCard
-					v-for="project in row.instances.slice(0, maxProjectsPerRow)"
-					:key="project?.project_id"
-					ref="instanceComponents"
-					class="item"
-					:project="project"
-					@contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
-				/>
-			</section>
-		</div>
-	</div>
-	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
-		<template #play> <PlayIcon /> Play </template>
-		<template #stop> <StopCircleIcon /> Stop </template>
-		<template #add_content> <PlusIcon /> Add content </template>
-		<template #edit> <EyeIcon /> View instance </template>
-		<template #delete> <TrashIcon /> Delete </template>
-		<template #open_folder> <FolderOpenIcon /> Open folder </template>
-		<template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
-		<template #copy_path> <ClipboardCopyIcon /> Copy path </template>
-		<template #install> <DownloadIcon /> Install </template>
-		<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
-		<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
-	</ContextMenu>
+  <ConfirmModalWrapper
+    ref="deleteConfirmModal"
+    title="Are you sure you want to delete this instance?"
+    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    @proceed="deleteProfile"
+  />
+  <div class="content">
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+      <div class="header">
+        <router-link :to="row.route">{{ row.label }}</router-link>
+        <ChevronRightIcon />
+      </div>
+      <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"
+          :instance="instance"
+          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
+        />
+      </section>
+      <section v-else ref="modsRow" class="projects">
+        <ProjectCard
+          v-for="project in row.instances.slice(0, maxProjectsPerRow)"
+          :key="project?.project_id"
+          ref="instanceComponents"
+          class="item"
+          :project="project"
+          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
+        />
+      </section>
+    </div>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open_folder> <FolderOpenIcon /> Open folder </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+    <template #install> <DownloadIcon /> Install </template>
+    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+  </ContextMenu>
 </template>
 <style lang="scss" scoped>
 .content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
 
-	-ms-overflow-style: none;
-	scrollbar-width: none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 
-	&::-webkit-scrollbar {
-		width: 0;
-		background: transparent;
-	}
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
 }
 
 .row {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	overflow: hidden;
-	width: 100%;
-	min-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  width: 100%;
+  min-width: 100%;
 
-	&:nth-child(even) {
-		background: var(--color-bg);
-	}
+  &:nth-child(even) {
+    background: var(--color-bg);
+  }
 
-	.header {
-		width: 100%;
-		margin-bottom: 1rem;
-		gap: var(--gap-xs);
-		display: flex;
-		flex-direction: row;
-		align-items: center;
+  .header {
+    width: 100%;
+    margin-bottom: 1rem;
+    gap: var(--gap-xs);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-		a {
-			margin: 0;
-			font-size: var(--font-size-md);
-			font-weight: bolder;
-			white-space: nowrap;
-			color: var(--color-base);
-		}
+    a {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: bolder;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
 
-		svg {
-			height: 1.25rem;
-			width: 1.25rem;
-			color: var(--color-base);
-		}
-	}
+    svg {
+      height: 1.5rem;
+      width: 1.5rem;
+      color: var(--color-contrast);
+    }
+  }
 
-	.instances {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-		grid-gap: 0.75rem;
-		width: 100%;
+  .instances {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
+    width: 100%;
+  }
 
-		&.compact {
-			grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-			gap: 0.75rem;
-		}
-	}
+  .projects {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    grid-gap: 1rem;
 
-	.projects {
-		display: grid;
-		width: 100%;
-		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-		grid-gap: 0.75rem;
-
-		.item {
-			width: 100%;
-			max-width: 100%;
-		}
-	}
+    .item {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,136 @@
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
+import { useLoading } from '@/store/state.js'
+
+export default defineComponent({
+  props: {
+    throttle: {
+      type: Number,
+      default: 50,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+    height: {
+      type: Number,
+      default: 3,
+    },
+    color: {
+      type: [String, Boolean],
+      default:
+        'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
+    },
+    offsetWidth: {
+      type: String,
+      default: '208px',
+    },
+    offsetHeight: {
+      type: String,
+      default: '52px',
+    },
+  },
+  setup(props, { slots }) {
+    const indicator = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle,
+    })
+
+    onBeforeUnmount(() => indicator.clear)
+
+    const loading = useLoading()
+
+    watch(loading, (newValue) => {
+      if (newValue.barEnabled) {
+        if (newValue.loading) {
+          indicator.start()
+        } else {
+          indicator.finish()
+        }
+      }
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          style: {
+            position: 'fixed',
+            top: props.offsetHeight,
+            right: 0,
+            left: props.offsetWidth,
+            pointerEvents: 'none',
+            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+            height: `${props.height}px`,
+            opacity: indicator.isLoading.value ? 1 : 0,
+            background: props.color || undefined,
+            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
+            zIndex: 6,
+          },
+        },
+        slots,
+      )
+  },
+})
+
+function useLoadingIndicator(opts) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
+
+  let _timer = null
+  let _throttle = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    if (opts.throttle) {
+      _throttle = setTimeout(() => {
+        isLoading.value = true
+        _startTimer()
+      }, opts.throttle)
+    } else {
+      isLoading.value = true
+      _startTimer()
+    }
+  }
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    setTimeout(() => {
+      isLoading.value = false
+      setTimeout(() => {
+        progress.value = 0
+      }, 400)
+    }, 500)
+  }
+
+  function _startTimer() {
+    _timer = setInterval(() => {
+      _increase(step.value)
+    }, 100)
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}

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

@@ -1,478 +1,405 @@
 <template>
-	<div
-		v-if="mode !== 'isolated'"
-		ref="button"
-		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-		:class="{ expanded: mode === 'expanded' }"
-		@click="toggleMenu"
-	>
-		<Avatar
-			size="36px"
-			:src="
-				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-			"
-		/>
-		<div class="flex flex-col w-full">
-			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
-			<span class="text-secondary text-xs">Minecraft account</span>
-		</div>
-		<DropdownIcon class="w-5 h-5 shrink-0" />
-	</div>
-	<transition name="fade">
-		<Card
-			v-if="showCard || mode === 'isolated'"
-			ref="card"
-			class="account-card"
-			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
-		>
-			<div v-if="selectedAccount" class="selected account">
-				<Avatar size="xs" :src="avatarUrl" />
-				<div>
-					<h4>{{ selectedAccount.profile.name }}</h4>
-					<p>Selected</p>
-				</div>
-				<Button
-					v-tooltip="'Log out'"
-					icon-only
-					color="raised"
-					@click="logout(selectedAccount.profile.id)"
-				>
-					<TrashIcon />
-				</Button>
-			</div>
-			<div v-else class="logged-out account">
-				<h4>Not signed in</h4>
-				<Button
-					v-tooltip="'Log in'"
-					:disabled="loginDisabled"
-					icon-only
-					color="primary"
-					@click="login()"
-				>
-					<LogInIcon v-if="!loginDisabled" />
-					<SpinnerIcon v-else class="animate-spin" />
-				</Button>
-			</div>
-			<div v-if="displayAccounts.length > 0" class="account-group">
-				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
-					<Button class="option account" @click="setAccount(account)">
-						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
-						<p>{{ account.profile.name }}</p>
-					</Button>
-					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
-						<TrashIcon />
-					</Button>
-				</div>
-			</div>
-			<Button v-if="accounts.length > 0" @click="login()">
-				<PlusIcon />
-				Add account
-			</Button>
-		</Card>
-	</transition>
+  <div
+    v-if="mode !== 'isolated'"
+    ref="button"
+    v-tooltip.right="'Minecraft accounts'"
+    class="button-base avatar-button"
+    :class="{ expanded: mode === 'expanded' }"
+    @click="toggleMenu"
+  >
+    <Avatar
+      :size="mode === 'expanded' ? 'xs' : 'sm'"
+      :src="
+        selectedAccount
+          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      "
+    />
+  </div>
+  <transition name="fade">
+    <Card
+      v-if="showCard || mode === 'isolated'"
+      ref="card"
+      class="account-card"
+      :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+    >
+      <div v-if="selectedAccount" class="selected account">
+        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
+        <div>
+          <h4>{{ selectedAccount.username }}</h4>
+          <p>Selected</p>
+        </div>
+        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
+          <TrashIcon />
+        </Button>
+      </div>
+      <div v-else class="logged-out account">
+        <h4>Not signed in</h4>
+        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
+          <LogInIcon />
+        </Button>
+      </div>
+      <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/${account.id}/128`" class="icon" />
+            <p>{{ account.username }}</p>
+          </Button>
+          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
+            <TrashIcon />
+          </Button>
+        </div>
+      </div>
+      <Button v-if="accounts.length > 0" @click="login()">
+        <PlusIcon />
+        Add account
+      </Button>
+    </Card>
+  </transition>
 </template>
 
 <script setup>
-import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
-
-import { trackEvent } from '@/helpers/analytics'
+import { PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
-	get_default_user,
-	login as login_flow,
-	remove_user,
-	set_default_user,
-	users,
+  users,
+  remove_user,
+  set_default_user,
+  login as login_flow,
+  get_default_user,
 } from '@/helpers/auth'
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
-import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
-
-const { handleError } = injectNotificationManager()
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 defineProps({
-	mode: {
-		type: String,
-		required: true,
-		default: 'normal',
-	},
+  mode: {
+    type: String,
+    required: true,
+    default: 'normal',
+  },
 })
 
 const emit = defineEmits(['change'])
 
 const accounts = ref({})
-const loginDisabled = ref(false)
 const defaultUser = ref()
-const equippedSkin = ref(null)
-const headUrlCache = ref(new Map())
 
 async function refreshValues() {
-	defaultUser.value = await get_default_user().catch(handleError)
-	accounts.value = await users().catch(handleError)
-
-	try {
-		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped)
-
-		if (equippedSkin.value) {
-			try {
-				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-				headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
-			} catch (error) {
-				console.warn('Failed to get head render for equipped skin:', error)
-			}
-		}
-	} catch {
-		equippedSkin.value = null
-	}
+  defaultUser.value = await get_default_user().catch(handleError)
+  accounts.value = await users().catch(handleError)
 }
-
-function setLoginDisabled(value) {
-	loginDisabled.value = value
-}
-
 defineExpose({
-	refreshValues,
-	setLoginDisabled,
-	loginDisabled,
+  refreshValues,
 })
 await refreshValues()
 
 const displayAccounts = computed(() =>
-	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
+  accounts.value.filter((account) => defaultUser.value !== account.id),
 )
 
-const avatarUrl = computed(() => {
-	if (equippedSkin.value?.texture_key) {
-		const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-		if (cachedUrl) {
-			return cachedUrl
-		}
-		return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
-	}
-	if (selectedAccount.value?.profile?.id) {
-		return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
-	}
-	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
-})
-
-function getAccountAvatarUrl(account) {
-	if (
-		account.profile.id === selectedAccount.value?.profile?.id &&
-		equippedSkin.value?.texture_key
-	) {
-		const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-		if (cachedUrl) {
-			return cachedUrl
-		}
-	}
-	return `https://mc-heads.net/avatar/${account.profile.id}/128`
-}
-
 const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
+  accounts.value.find((account) => account.id === defaultUser.value),
 )
 
 async function setAccount(account) {
-	defaultUser.value = account.profile.id
-	await set_default_user(account.profile.id).catch(handleError)
-	emit('change')
+  defaultUser.value = account.id
+  await set_default_user(account.id).catch(handleError)
+  emit('change')
 }
 
 async function login() {
-	loginDisabled.value = true
-	const loggedIn = await login_flow().catch(handleSevereError)
+  const loggedIn = await login_flow().catch(handleSevereError)
 
-	if (loggedIn) {
-		await setAccount(loggedIn)
-		await refreshValues()
-	}
+  if (loggedIn) {
+    await setAccount(loggedIn)
+    await refreshValues()
+  }
 
-	trackEvent('AccountLogIn')
-	loginDisabled.value = false
+  trackEvent('AccountLogIn')
 }
 
 const logout = async (id) => {
-	await remove_user(id).catch(handleError)
-	await refreshValues()
-	if (!selectedAccount.value && accounts.value.length > 0) {
-		await setAccount(accounts.value[0])
-		await refreshValues()
-	} else {
-		emit('change')
-	}
-	trackEvent('AccountLogOut')
+  await remove_user(id).catch(handleError)
+  await refreshValues()
+  if (!selectedAccount.value && accounts.value.length > 0) {
+    await setAccount(accounts.value[0])
+    await refreshValues()
+  } else {
+    emit('change')
+  }
+  trackEvent('AccountLogOut')
 }
 
 const showCard = ref(false)
 const card = ref(null)
 const button = ref(null)
 const handleClickOutside = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		card.value &&
-		card.value.$el !== event.target &&
-		!elements.includes(card.value.$el) &&
-		!button.value.contains(event.target)
-	) {
-		toggleMenu(false)
-	}
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    !button.value.contains(event.target)
+  ) {
+    toggleMenu(false)
+  }
 }
 
 function toggleMenu(override = true) {
-	if (showCard.value || !override) {
-		showCard.value = false
-	} else {
-		showCard.value = true
-	}
+  if (showCard.value || !override) {
+    if (showCard.value) {
+      show_ads_window()
+    }
+
+    showCard.value = false
+  } else {
+    hide_ads_window()
+    showCard.value = true
+  }
 }
 
 const unlisten = await process_listener(async (e) => {
-	if (e.event === 'launched') {
-		await refreshValues()
-	}
+  if (e.event === 'launched') {
+    await refreshValues()
+  }
 })
 
 onMounted(() => {
-	window.addEventListener('click', handleClickOutside)
+  window.addEventListener('click', handleClickOutside)
 })
 
 onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('click', handleClickOutside)
 })
 
 onUnmounted(() => {
-	unlisten()
+  unlisten()
 })
 </script>
 
 <style scoped lang="scss">
 .selected {
-	background: var(--color-brand-highlight);
-	border-radius: var(--radius-lg);
-	color: var(--color-contrast);
-	gap: 1rem;
+  background: var(--color-brand-highlight);
+  border-radius: var(--radius-lg);
+  color: var(--color-contrast);
+  gap: 1rem;
 }
 
 .logged-out {
-	background: var(--color-bg);
-	border-radius: var(--radius-lg);
-	gap: 1rem;
+  background: var(--color-bg);
+  border-radius: var(--radius-lg);
+  gap: 1rem;
 }
 
 .account {
-	width: max-content;
-	display: flex;
-	align-items: center;
-	text-align: left;
-	padding: 0.5rem 1rem;
+  width: max-content;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 0.5rem 1rem;
 
-	h4,
-	p {
-		margin: 0;
-	}
+  h4,
+  p {
+    margin: 0;
+  }
 }
 
 .account-card {
-	position: fixed;
-	display: flex;
-	flex-direction: column;
-	margin-top: 0.5rem;
-	right: 2rem;
-	z-index: 11;
-	gap: 0.5rem;
-	padding: 1rem;
-	border: 1px solid var(--color-divider);
-	width: max-content;
-	user-select: none;
-	-ms-user-select: none;
-	-webkit-user-select: none;
-	max-height: calc(100vh - 300px);
-	overflow-y: auto;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0.5rem;
+  left: 5.5rem;
+  z-index: 11;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--color-button-bg);
+  width: max-content;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  max-height: 98vh;
+  overflow-y: auto;
 
-	&::-webkit-scrollbar-track {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
+  &::-webkit-scrollbar-track {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
 
-	&::-webkit-scrollbar {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
+  &::-webkit-scrollbar {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
 
-	&.hidden {
-		display: none;
-	}
+  &.hidden {
+    display: none;
+  }
 
-	&.expanded {
-		left: 13.5rem;
-	}
+  &.expanded {
+    left: 13.5rem;
+  }
 
-	&.isolated {
-		position: relative;
-		left: 0;
-		top: 0;
-	}
+  &.isolated {
+    position: relative;
+    left: 0;
+    top: 0;
+  }
 }
 
 .accounts-title {
-	font-size: 1.2rem;
-	font-weight: bolder;
+  font-size: 1.2rem;
+  font-weight: bolder;
 }
 
 .account-group {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .option {
-	width: calc(100% - 2.25rem);
-	background: var(--color-raised-bg);
-	color: var(--color-base);
-	box-shadow: none;
+  width: calc(100% - 2.25rem);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
 
-	img {
-		margin-right: 0.5rem;
-	}
+  img {
+    margin-right: 0.5rem;
+  }
 }
 
 .icon {
-	--size: 1.5rem !important;
+  --size: 1.5rem !important;
 }
 
 .account-row {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-	vertical-align: center;
-	justify-content: space-between;
-	padding-right: 1rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  vertical-align: center;
+  justify-content: space-between;
+  padding-right: 1rem;
 }
 
 .fade-enter-active,
 .fade-leave-active {
-	transition:
-		opacity 0.25s ease,
-		translate 0.25s ease,
-		scale 0.25s ease;
+  transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-	opacity: 0;
-	translate: 0 -2rem;
-	scale: 0.9;
+  opacity: 0;
 }
 
 .avatar-button {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	color: var(--color-base);
-	background-color: var(--color-button-bg);
-	border-radius: var(--radius-md);
-	width: 100%;
-	padding: 0.5rem 0.75rem;
-	text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-base);
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  width: 100%;
+  text-align: left;
 
-	&.expanded {
-		border: 1px solid var(--color-divider);
-		padding: 1rem;
-	}
+  &.expanded {
+    border: 1px solid var(--color-button-bg);
+    padding: 1rem;
+  }
 }
 
 .avatar-text {
-	margin: auto 0 auto 0.25rem;
-	display: flex;
-	flex-direction: column;
+  margin: auto 0 auto 0.25rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .text {
-	width: 6rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .accounts-text {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
 }
 
 .qr-code {
-	background-color: white !important;
-	border-radius: var(--radius-md);
+  background-color: white !important;
+  border-radius: var(--radius-md);
 }
 
 .modal-body {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-lg);
-	align-items: center;
-	padding: var(--gap-xl);
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-lg);
+  align-items: center;
+  padding: var(--gap-xl);
 
-	.modal-text {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-sm);
-		width: 100%;
+  .modal-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+    width: 100%;
 
-		h2,
-		p {
-			margin: 0;
-		}
+    h2,
+    p {
+      margin: 0;
+    }
 
-		.code-text {
-			display: flex;
-			flex-direction: row;
-			gap: var(--gap-xs);
-			align-items: center;
+    .code-text {
+      display: flex;
+      flex-direction: row;
+      gap: var(--gap-xs);
+      align-items: center;
 
-			.code {
-				background-color: var(--color-bg);
-				border-radius: var(--radius-md);
-				border: solid 1px var(--color-button-bg);
-				font-family: var(--mono-font);
-				letter-spacing: var(--gap-md);
-				color: var(--color-contrast);
-				font-size: 2rem;
-				font-weight: bold;
-				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
-			}
+      .code {
+        background-color: var(--color-bg);
+        border-radius: var(--radius-md);
+        border: solid 1px var(--color-button-bg);
+        font-family: var(--mono-font);
+        letter-spacing: var(--gap-md);
+        color: var(--color-contrast);
+        font-size: 2rem;
+        font-weight: bold;
+        padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+      }
 
-			.btn {
-				width: 2.5rem;
-				height: 2.5rem;
-			}
-		}
-	}
+      .btn {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+    }
+  }
 }
 
 .button-row {
-	display: flex;
-	flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .modal {
-	position: absolute;
+  position: absolute;
 }
 
 .code {
-	color: var(--color-brand);
-	padding: 0.05rem 0.1rem;
-	// row not column
-	display: flex;
+  color: var(--color-brand);
+  padding: 0.05rem 0.1rem;
+  // row not column
+  display: flex;
 
-	.card {
-		background: var(--color-base);
-		color: var(--color-contrast);
-		padding: 0.5rem 1rem;
-	}
+  .card {
+    background: var(--color-base);
+    color: var(--color-contrast);
+    padding: 0.5rem 1rem;
+  }
 }
 </style>

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

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

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

@@ -1,64 +1,87 @@
 <template>
-	<div data-tauri-drag-region class="flex items-center gap-1 pl-3">
-		<Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
-			<ChevronLeftIcon />
-		</Button>
-		<Button
-			v-if="false"
-			class="breadcrumbs__forward transparent"
-			icon-only
-			@click="$router.forward()"
-		>
-			<ChevronRightIcon />
-		</Button>
-		{{ breadcrumbData.resetToNames(breadcrumbs) }}
-		<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
-			<router-link
-				v-if="breadcrumb.link"
-				:to="{
-					path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
-					query: breadcrumb.query,
-				}"
-				class="text-primary"
-				>{{
-					breadcrumb.name.charAt(0) === '?'
-						? breadcrumbData.getName(breadcrumb.name.slice(1))
-						: breadcrumb.name
-				}}
-			</router-link>
-			<span
-				v-else
-				data-tauri-drag-region
-				class="text-contrast font-semibold cursor-default select-none"
-				>{{
-					breadcrumb.name.charAt(0) === '?'
-						? breadcrumbData.getName(breadcrumb.name.slice(1))
-						: breadcrumb.name
-				}}</span
-			>
-			<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
-		</template>
-	</div>
+  <div class="breadcrumbs">
+    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+      <ChevronLeftIcon />
+    </Button>
+    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
+      <ChevronRightIcon />
+    </Button>
+    {{ breadcrumbData.resetToNames(breadcrumbs) }}
+    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+      <router-link
+        v-if="breadcrumb.link"
+        :to="{
+          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+          query: breadcrumb.query,
+        }"
+        >{{
+          breadcrumb.name.charAt(0) === '?'
+            ? breadcrumbData.getName(breadcrumb.name.slice(1))
+            : breadcrumb.name
+        }}
+      </router-link>
+      <span v-else class="selected">{{
+        breadcrumb.name.charAt(0) === '?'
+          ? breadcrumbData.getName(breadcrumb.name.slice(1))
+          : breadcrumb.name
+      }}</span>
+      <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 
 const route = useRoute()
 
 const breadcrumbData = useBreadcrumbs()
 const breadcrumbs = computed(() => {
-	const additionalContext =
-		route.meta.useContext === true
-			? breadcrumbData.context
-			: route.meta.useRootContext === true
-				? breadcrumbData.rootContext
-				: null
-	return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+  const additionalContext =
+    route.meta.useContext === true
+      ? breadcrumbData.context
+      : route.meta.useRootContext === true
+        ? breadcrumbData.rootContext
+        : null
+  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
 </script>
+
+<style scoped lang="scss">
+.breadcrumbs {
+  display: flex;
+  flex-direction: row;
+
+  .breadcrumbs__item {
+    display: flex;
+    flex-direction: row;
+    vertical-align: center;
+    margin: auto 0;
+
+    .chevron,
+    a {
+      margin: auto 0;
+    }
+  }
+
+  .breadcrumbs__back,
+  .breadcrumbs__forward {
+    margin: auto 0;
+    color: var(--color-base);
+    height: unset;
+    width: unset;
+  }
+
+  .breadcrumbs__forward {
+    margin-right: 1rem;
+  }
+}
+
+.selected {
+  color: var(--color-contrast);
+}
+</style>

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

@@ -1,30 +1,31 @@
 <template>
-	<transition name="fade">
-		<div
-			v-show="shown"
-			ref="contextMenu"
-			class="context-menu"
-			:style="{
-				left: left,
-				top: top,
-			}"
-		>
-			<div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
-				<hr v-if="option.type === 'divider'" class="divider" />
-				<div
-					v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
-					class="item clickable"
-					:class="[option.color ?? 'base']"
-				>
-					<slot :name="option.name" />
-				</div>
-			</div>
-		</div>
-	</transition>
+  <transition name="fade">
+    <div
+      v-show="shown"
+      ref="contextMenu"
+      class="context-menu"
+      :style="{
+        left: left,
+        top: top,
+      }"
+    >
+      <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
+        <hr v-if="option.type === 'divider'" class="divider" />
+        <div
+          v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+          class="item clickable"
+          :class="[option.color ?? 'base']"
+        >
+          <slot :name="option.name" />
+        </div>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
 
 const emit = defineEmits(['menu-closed', 'option-clicked'])
 
@@ -36,146 +37,145 @@ const top = ref('0px')
 const shown = ref(false)
 
 defineExpose({
-	showMenu: (event, passedItem, passedOptions) => {
-		item.value = passedItem
-		options.value = passedOptions
+  showMenu: (event, passedItem, passedOptions) => {
+    hide_ads_window()
+    item.value = passedItem
+    options.value = passedOptions
 
-		// show to get dimensions
-		shown.value = true
+    const menuWidth = contextMenu.value.clientWidth
+    const menuHeight = contextMenu.value.clientHeight
 
-		// then, adjust position if overflowing
-		nextTick(() => {
-			const menuWidth = contextMenu.value?.clientWidth || 200
-			const menuHeight = contextMenu.value?.clientHeight || 100
-			const minFromEdge = 10
+    if (menuWidth + event.pageX >= window.innerWidth) {
+      left.value = event.pageX - menuWidth + 2 + 'px'
+    } else {
+      left.value = event.pageX - 2 + 'px'
+    }
 
-			if (event.pageX + menuWidth + minFromEdge >= window.innerWidth) {
-				left.value = Math.max(minFromEdge, event.pageX - menuWidth - minFromEdge) + 'px'
-			} else {
-				left.value = event.pageX + minFromEdge + 'px'
-			}
+    if (menuHeight + event.pageY >= window.innerHeight) {
+      top.value = event.pageY - menuHeight + 2 + 'px'
+    } else {
+      top.value = event.pageY - 2 + 'px'
+    }
 
-			if (event.pageY + menuHeight + minFromEdge >= window.innerHeight) {
-				top.value = Math.max(minFromEdge, event.pageY - menuHeight - minFromEdge) + 'px'
-			} else {
-				top.value = event.pageY + minFromEdge + 'px'
-			}
-		})
-	},
+    shown.value = true
+  },
 })
 
 const isLinkedData = (item) => {
-	if (item.instance != undefined && item.instance.linked_data) {
-		return true
-	} else if (item != undefined && item.linked_data) {
-		return true
-	}
-	return false
+  if (item.instance != undefined && item.instance.linked_data) {
+    return true
+  } else if (item != undefined && item.linked_data) {
+    return true
+  }
+  return false
 }
 
 const hideContextMenu = () => {
-	shown.value = false
-	emit('menu-closed')
+  if (shown.value) {
+    show_ads_window()
+  }
+  shown.value = false
+  emit('menu-closed')
 }
 
 const optionClicked = (option) => {
-	emit('option-clicked', {
-		item: item.value,
-		option: option,
-	})
-	hideContextMenu()
+  emit('option-clicked', {
+    item: item.value,
+    option: option,
+  })
+  hideContextMenu()
 }
 
 const onEscKeyRelease = (event) => {
-	if (event.keyCode === 27) {
-		hideContextMenu()
-	}
+  if (event.keyCode === 27) {
+    hideContextMenu()
+  }
 }
 
 const handleClickOutside = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		contextMenu.value &&
-		contextMenu.value.$el !== event.target &&
-		!elements.includes(contextMenu.value.$el)
-	) {
-		hideContextMenu()
-	}
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    contextMenu.value &&
+    contextMenu.value.$el !== event.target &&
+    !elements.includes(contextMenu.value.$el)
+  ) {
+    hideContextMenu()
+  }
 }
 
 onMounted(() => {
-	window.addEventListener('click', handleClickOutside)
-	document.body.addEventListener('keyup', onEscKeyRelease)
+  window.addEventListener('click', handleClickOutside)
+  document.body.addEventListener('keyup', onEscKeyRelease)
 })
 
 onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutside)
-	document.removeEventListener('keyup', onEscKeyRelease)
+  window.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keyup', onEscKeyRelease)
 })
 </script>
 
 <style lang="scss" scoped>
 .context-menu {
-	background-color: var(--color-raised-bg);
-	border-radius: var(--radius-md);
-	box-shadow: var(--shadow-floating);
-	border: 1px solid var(--color-divider);
-	margin: 0;
-	position: fixed;
-	z-index: 1000000;
-	overflow: hidden;
-	padding: var(--gap-sm);
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  border: 1px solid var(--color-button-bg);
+  margin: 0;
+  position: fixed;
+  z-index: 1000000;
+  overflow: hidden;
+  padding: var(--gap-sm);
 
-	.item {
-		align-items: center;
-		color: var(--color-base);
-		cursor: pointer;
-		display: flex;
-		gap: var(--gap-sm);
-		padding: var(--gap-sm);
-		border-radius: var(--radius-sm);
+  .item {
+    align-items: center;
+    color: var(--color-base);
+    cursor: pointer;
+    display: flex;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm);
+    border-radius: var(--radius-sm);
 
-		&:hover,
-		&:active {
-			&.base {
-				background-color: var(--color-button-bg);
-				color: var(--color-contrast);
-			}
+    &:hover,
+    &:active {
+      &.base {
+        background-color: var(--color-button-bg);
+        color: var(--color-contrast);
+      }
 
-			&.primary {
-				background-color: var(--color-brand);
-				color: var(--color-accent-contrast);
-				font-weight: bold;
-			}
+      &.primary {
+        background-color: var(--color-brand);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
 
-			&.danger {
-				background-color: var(--color-red);
-				color: var(--color-accent-contrast);
-				font-weight: bold;
-			}
+      &.danger {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
 
-			&.contrast {
-				background-color: var(--color-orange);
-				color: var(--color-accent-contrast);
-				font-weight: bold;
-			}
-		}
-	}
+      &.contrast {
+        background-color: var(--color-orange);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+    }
+  }
 
-	.divider {
-		border: 1px solid var(--color-divider);
-		margin: var(--gap-sm);
-		pointer-events: none;
-	}
+  .divider {
+    border: 1px solid var(--color-button-bg);
+    margin: var(--gap-sm);
+    pointer-events: none;
+  }
 }
 
 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 </style>

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

@@ -1,30 +1,18 @@
 <script setup>
-import {
-	CheckIcon,
-	CopyIcon,
-	DropdownIcon,
-	HammerIcon,
-	LogInIcon,
-	UpdatedIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-
+import { XIcon, HammerIcon, LogInIcon, UpdatedIcon } from '@modrinth/assets'
 import { ChatIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
+import { ref } from 'vue'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { install } from '@/helpers/profile.js'
-import { cancel_directory_change } from '@/helpers/settings.ts'
+import { handleError } from '@/store/notifications.js'
 import { handleSevereError } from '@/store/error.js'
-
-const { handleError } = injectNotificationManager()
+import { cancel_directory_change } from '@/helpers/settings.js'
+import { install } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const errorModal = ref()
 const error = ref()
 const closable = ref(true)
-const errorCollapsed = ref(false)
 
 const title = ref('An error occurred')
 const errorType = ref('unknown')
@@ -32,348 +20,313 @@ const supportLink = ref('https://support.modrinth.com')
 const metadata = ref({})
 
 defineExpose({
-	async show(errorVal, context, canClose = true, source = null) {
-		closable.value = canClose
+  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 && 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('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('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 = {}
-		}
+      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()
-	},
+    error.value = errorVal
+    errorModal.value.show()
+  },
 })
 
 const loadingMinecraft = ref(false)
 async function loginMinecraft() {
-	try {
-		loadingMinecraft.value = true
-		const loggedIn = await login_flow()
+  try {
+    loadingMinecraft.value = true
+    const loggedIn = await login_flow()
 
-		if (loggedIn) {
-			await set_default_user(loggedIn.profile.id).catch(handleError)
-		}
+    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)
-	}
+    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)
-	}
+  try {
+    await cancel_directory_change()
+    window.location.reload()
+  } catch (err) {
+    handleError(err)
+  }
 }
 
 function retryDirectoryChange() {
-	window.location.reload()
+  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
-}
-
-const hasDebugInfo = computed(
-	() =>
-		errorType.value === 'directory_move' ||
-		errorType.value === 'minecraft_auth' ||
-		errorType.value === 'state_init' ||
-		errorType.value === 'no_loader_version',
-)
-
-const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error message.')
-
-const copied = ref(false)
-
-async function copyToClipboard(text) {
-	await navigator.clipboard.writeText(text)
-	copied.value = true
-	setTimeout(() => {
-		copied.value = false
-	}, 3000)
+  loadingRepair.value = true
+  try {
+    await install(metadata.value.profilePath, false)
+    errorModal.value.hide()
+  } catch (err) {
+    handleSevereError(err)
+  }
+  loadingRepair.value = false
 }
 </script>
 
 <template>
-	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
-		<div class="modal-body">
-			<div class="markdown-body">
-				<template v-if="errorType === 'minecraft_auth'">
-					<template v-if="metadata.network">
-						<h3>Network issues</h3>
-						<p>
-							It looks like there were issues with the Modrinth App connecting to Microsoft's
-							servers. This is often the result of a poor connection, so we recommend trying again
-							to see if it works. If issues continue to persist, follow the steps in
-							<a
-								href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
-							>
-								our support article
-							</a>
-							to troubleshoot.
-						</p>
-					</template>
-					<template v-else-if="metadata.hostsFile">
-						<h3>Network issues</h3>
-						<p>
-							The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
-							remote server rejected the connection. This may indicate that these services are
-							blocked by the hosts file. Please visit
-							<a
-								href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
-							>
-								our support article
-							</a>
-							for steps on how to fix the issue.
-						</p>
-					</template>
-					<template v-else>
-						<h3>Try another Microsoft account</h3>
-						<p>
-							Double check you've signed in with the right account. You may own Minecraft on a
-							different Microsoft account.
-						</p>
-						<div class="cta-button">
-							<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-								<LogInIcon /> Try another account
-							</button>
-						</div>
-						<h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
-						<p>
-							Try signing in with the
-							<a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
-							first. Once you're done, come back here and sign in!
-						</p>
-					</template>
-					<div class="cta-button">
-						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-							<LogInIcon /> Try signing in again
-						</button>
-					</div>
-				</template>
-				<template v-if="errorType === 'directory_move'">
-					<template v-if="metadata.readOnly">
-						<h3>Change directory permissions</h3>
-						<p>
-							It looks like the Modrinth App is unable to write to the directory you selected.
-							Please adjust the permissions of the directory and try again or cancel the directory
-							change.
-						</p>
-					</template>
-					<template v-else-if="metadata.notEnoughSpace">
-						<h3>Not enough space</h3>
-						<p>
-							It looks like there is not enough space on the disk containing the directory 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>
+  <ModalWrapper ref="errorModal" :header="title" :closable="closable">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <template v-if="errorType === 'minecraft_auth'">
+          <template v-if="metadata.network">
+            <h3>Network issues</h3>
+            <p>
+              It looks like there were issues with the Modrinth App connecting to Microsoft's
+              servers. This is often the result of a poor connection, so we recommend trying again
+              to see if it works. If issues continue to persist, follow the steps in
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
+              >
+                our support article
+              </a>
+              to troubleshoot.
+            </p>
+          </template>
+          <template v-else-if="metadata.hostsFile">
+            <h3>Network issues</h3>
+            <p>
+              The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+              remote server rejected the connection. This may indicate that these services are
+              blocked by the hosts file. Please visit
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
+              >
+                our support article
+              </a>
+              for steps on how to fix the issue.
+            </p>
+          </template>
+          <template v-else>
+            <h3>Try another Microsoft account</h3>
+            <p>
+              Double check you've signed in with the right account. You may own Minecraft on a
+              different Microsoft account.
+            </p>
+            <div class="cta-button">
+              <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+                <LogInIcon /> Try another account
+              </button>
+            </div>
+            <h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
+            <p>
+              Try signing in with the
+              <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
+              first. Once you're done, come back here and sign in!
+            </p>
+          </template>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Try signing in again
+            </button>
+          </div>
+        </template>
+        <template v-if="errorType === 'directory_move'">
+          <template v-if="metadata.readOnly">
+            <h3>Change directory permissions</h3>
+            <p>
+              It looks like the Modrinth App is unable to write to the directory you selected.
+              Please adjust the permissions of the directory and try again or cancel the directory
+              change.
+            </p>
+          </template>
+          <template v-else-if="metadata.notEnoughSpace">
+            <h3>Not enough space</h3>
+            <p>
+              It looks like there is not enough space on the disk containing the dirctory you
+              selected Please free up some space and try again or cancel the directory change.
+            </p>
+          </template>
+          <template v-else>
+            <p>
+              The Modrinth App is unable to migrate to the new directory you selected. Please
+              contact support for help or cancel the directory change.
+            </p>
+          </template>
 
-					<div class="cta-button">
-						<button class="btn" @click="retryDirectoryChange">
-							<UpdatedIcon /> Retry directory change
-						</button>
-						<button class="btn btn-danger" @click="cancelDirectoryChange">
-							<XIcon /> Cancel directory change
-						</button>
-					</div>
-				</template>
-				<div v-else-if="errorType === 'minecraft_sign_in'">
-					<p>
-						To play this instance, you must sign in through Microsoft below. If you don't have a
-						Minecraft account, you can purchase the game on the
-						<a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
-							>Minecraft website</a
-						>.
-					</p>
-					<div class="cta-button">
-						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-							<LogInIcon /> Sign in to Minecraft
-						</button>
-					</div>
-				</div>
-				<template v-else-if="errorType === 'state_init'">
-					<p>
-						Modrinth App failed to load correctly. This may be because of a corrupted file, or
-						because the app is missing crucial files.
-					</p>
-					<p>You may be able to fix it through one of the following ways:</p>
-					<ul>
-						<li>Ensuring you are connected to the internet, then try restarting the app.</li>
-						<li>Redownloading the app.</li>
-					</ul>
-				</template>
-				<template v-else-if="errorType === 'no_loader_version'">
-					<p>The Modrinth App failed to find the loader version for this instance.</p>
-					<p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
-					<div class="cta-button">
-						<button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
-							<HammerIcon /> Repair instance
-						</button>
-					</div>
-				</template>
-				<template v-else>
-					{{ debugInfo }}
-				</template>
-				<template v-if="hasDebugInfo">
-					<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>
-				</template>
-			</div>
-			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-				</ButtonStyled>
-				<ButtonStyled v-if="closable">
-					<button @click="errorModal.hide()"><XIcon /> Close</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="hasDebugInfo">
-					<button :disabled="copied" @click="copyToClipboard(debugInfo)">
-						<template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
-						<template v-else> <CopyIcon /> Copy debug info </template>
-					</button>
-				</ButtonStyled>
-			</div>
-			<template v-if="hasDebugInfo">
-				<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
-					<button
-						class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
-						@click="errorCollapsed = !errorCollapsed"
-					>
-						<span class="text-contrast font-extrabold m-0">Debug information:</span>
-						<DropdownIcon
-							class="h-5 w-5 text-secondary transition-transform"
-							:class="{ 'rotate-180': !errorCollapsed }"
-						/>
-					</button>
-					<Collapsible :collapsed="errorCollapsed">
-						<pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
-					</Collapsible>
-				</div>
-			</template>
-		</div>
-	</ModalWrapper>
+          <div class="cta-button">
+            <button class="btn" @click="retryDirectoryChange">
+              <UpdatedIcon /> Retry directory change
+            </button>
+            <button class="btn btn-danger" @click="cancelDirectoryChange">
+              <XIcon /> Cancel directory change
+            </button>
+          </div>
+        </template>
+        <div v-else-if="errorType === 'minecraft_sign_in'">
+          <p>
+            To play this instance, you must sign in through Microsoft below. If you don't have a
+            Minecraft account, you can purchase the game on the
+            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+              >Minecraft website</a
+            >.
+          </p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
+        </div>
+        <template v-else-if="errorType === 'state_init'">
+          <p>
+            Modrinth App failed to load correctly. This may be because of a corrupted file, or
+            because the app is missing crucial files.
+          </p>
+          <p>You may be able to fix it through one of the following ways:</p>
+          <ul>
+            <li>Ensuring you are connected to the internet, then try restarting the app.</li>
+            <li>Redownloading the app.</li>
+          </ul>
+        </template>
+        <template v-else-if="errorType === 'no_loader_version'">
+          <p>The Modrinth App failed to find the loader version for this instance.</p>
+          <p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
+              <HammerIcon /> Repair instance
+            </button>
+          </div>
+        </template>
+        <template v-else>
+          {{ error.message ?? error }}
+        </template>
+        <template
+          v-if="
+            errorType === 'directory_move' ||
+            errorType === 'minecraft_auth' ||
+            errorType === 'state_init' ||
+            errorType === 'no_loader_version'
+          "
+        >
+          <hr />
+          <p>
+            If nothing is working and you need help, visit
+            <a :href="supportLink">our support page</a>
+            and start a chat using the widget in the bottom right and we will be more than happy to
+            assist! Make sure to provide the following debug information to the agent:
+          </p>
+          <details>
+            <summary>Debug information</summary>
+            {{ error.message ?? error }}
+          </details>
+        </template>
+      </div>
+      <div class="input-group push-right">
+        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        <button v-if="closable" class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style>
 .light-mode {
-	--color-orange-bg: rgba(255, 163, 71, 0.2);
+  --color-orange-bg: rgba(255, 163, 71, 0.2);
 }
 
 .dark-mode,
 .oled-mode {
-	--color-orange-bg: rgba(224, 131, 37, 0.2);
+  --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;
+  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;
+  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;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
 
-	svg {
-		color: var(--color-orange);
-		height: 1.5rem;
-		width: 1.5rem;
-	}
+  svg {
+    color: var(--color-orange);
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }
 
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
 }
 
 .markdown-body {
-	overflow: auto;
+  overflow: auto;
 }
 </style>

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

@@ -1,27 +1,25 @@
 <script setup>
-import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
-import { ref } from 'vue'
-
+import { XIcon, PlusIcon } from '@modrinth/assets'
+import { Button, Checkbox } from '@modrinth/ui'
 import { PackageIcon, VersionIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { ref } from 'vue'
 import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
-
-const { handleError } = injectNotificationManager()
+import { open } from '@tauri-apps/plugin-dialog'
+import { handleError } from '@/store/notifications.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
-	instance: {
-		type: Object,
-		required: true,
-	},
+  instance: {
+    type: Object,
+    required: true,
+  },
 })
 
 defineExpose({
-	show: () => {
-		exportModal.value.show()
-		initFiles()
-	},
+  show: () => {
+    exportModal.value.show()
+    initFiles()
+  },
 })
 
 const exportModal = ref(null)
@@ -33,273 +31,273 @@ const folders = ref([])
 const showingFiles = ref(false)
 
 const initFiles = async () => {
-	const newFolders = new Map()
-	const sep = '/'
-	files.value = []
-	await get_pack_export_candidates(props.instance.path).then((filePaths) =>
-		filePaths
-			.map((folder) => ({
-				path: folder,
-				name: folder.split(sep).pop(),
-				selected:
-					folder.startsWith('mods') ||
-					folder.startsWith('datapacks') ||
-					folder.startsWith('resourcepacks') ||
-					folder.startsWith('shaderpacks') ||
-					folder.startsWith('config'),
-				disabled:
-					folder === 'profile.json' ||
-					folder.startsWith('modrinth_logs') ||
-					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 !== '') {
-					if (newFolders.has(parent)) {
-						newFolders.get(parent).push(pathData)
-					} else {
-						newFolders.set(parent, [pathData])
-					}
-				} else {
-					files.value.push(pathData)
-				}
-			}),
-	)
-	folders.value = [...newFolders.entries()].map(([name, value]) => [
-		{
-			name,
-			showingMore: false,
-		},
-		value,
-	])
+  const newFolders = new Map()
+  const sep = '/'
+  files.value = []
+  await get_pack_export_candidates(props.instance.path).then((filePaths) =>
+    filePaths
+      .map((folder) => ({
+        path: folder,
+        name: folder.split(sep).pop(),
+        selected:
+          folder.startsWith('mods') ||
+          folder.startsWith('datapacks') ||
+          folder.startsWith('resourcepacks') ||
+          folder.startsWith('shaderpacks') ||
+          folder.startsWith('config'),
+        disabled:
+          folder === 'profile.json' ||
+          folder.startsWith('modrinth_logs') ||
+          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 !== '') {
+          if (newFolders.has(parent)) {
+            newFolders.get(parent).push(pathData)
+          } else {
+            newFolders.set(parent, [pathData])
+          }
+        } else {
+          files.value.push(pathData)
+        }
+      }),
+  )
+  folders.value = [...newFolders.entries()].map(([name, value]) => [
+    {
+      name,
+      showingMore: false,
+    },
+    value,
+  ])
 }
 
 await initFiles()
 
 const exportPack = async () => {
-	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
-	folders.value.forEach((args) => {
-		args[1].forEach((child) => {
-			if (child.selected) {
-				filesToExport.push(child.path)
-			}
-		})
-	})
-	const outputPath = await open({
-		directory: true,
-		multiple: false,
-	})
+  const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+  folders.value.forEach((args) => {
+    args[1].forEach((child) => {
+      if (child.selected) {
+        filesToExport.push(child.path)
+      }
+    })
+  })
+  const outputPath = await open({
+    directory: true,
+    multiple: false,
+  })
 
-	if (outputPath) {
-		export_profile_mrpack(
-			props.instance.path,
-			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
-			filesToExport,
-			versionInput.value,
-			exportDescription.value,
-			nameInput.value,
-		).catch((err) => handleError(err))
-		exportModal.value.hide()
-	}
+  if (outputPath) {
+    export_profile_mrpack(
+      props.instance.path,
+      outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+      filesToExport,
+      versionInput.value,
+      exportDescription.value,
+      nameInput.value,
+    ).catch((err) => handleError(err))
+    exportModal.value.hide()
+  }
 }
 </script>
 
 <template>
-	<ModalWrapper ref="exportModal" header="Export modpack">
-		<div class="modal-body">
-			<div class="labeled_input">
-				<p>Modpack Name</p>
-				<div class="iconified-input">
-					<PackageIcon />
-					<input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-					<Button class="r-btn" @click="nameInput = ''">
-						<XIcon />
-					</Button>
-				</div>
-			</div>
-			<div class="labeled_input">
-				<p>Version number</p>
-				<div class="iconified-input">
-					<VersionIcon />
-					<input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-					<Button class="r-btn" @click="versionInput = ''">
-						<XIcon />
-					</Button>
-				</div>
-			</div>
-			<div class="adjacent-input">
-				<div class="labeled_input">
-					<p>Description</p>
+  <ModalWrapper ref="exportModal" header="Export modpack">
+    <div class="modal-body">
+      <div class="labeled_input">
+        <p>Modpack Name</p>
+        <div class="iconified-input">
+          <PackageIcon />
+          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
+          <Button class="r-btn" @click="nameInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="labeled_input">
+        <p>Version number</p>
+        <div class="iconified-input">
+          <VersionIcon />
+          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
+          <Button class="r-btn" @click="versionInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <div class="labeled_input">
+          <p>Description</p>
 
-					<div class="textarea-wrapper">
-						<textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-					</div>
-				</div>
-			</div>
+          <div class="textarea-wrapper">
+            <textarea v-model="exportDescription" placeholder="Enter modpack description..." />
+          </div>
+        </div>
+      </div>
 
-			<div class="table">
-				<div class="table-head">
-					<div class="table-cell row-wise">
-						Select files and folders to include in pack
-						<Button
-							class="sleek-primary collapsed-button"
-							icon-only
-							@click="() => (showingFiles = !showingFiles)"
-						>
-							<PlusIcon v-if="!showingFiles" />
-							<XIcon v-else />
-						</Button>
-					</div>
-				</div>
-				<div v-if="showingFiles" class="table-content">
-					<div v-for="[path, children] in folders" :key="path.name" class="table-row">
-						<div class="table-cell file-entry">
-							<div class="file-primary">
-								<Checkbox
-									:model-value="children.every((child) => child.selected)"
-									:label="path.name"
-									class="select-checkbox"
-									:disabled="children.every((x) => x.disabled)"
-									@update:model-value="
-										(newValue) => children.forEach((child) => (child.selected = newValue))
-									"
-								/>
-								<Checkbox
-									v-model="path.showingMore"
-									class="select-checkbox dropdown"
-									collapsing-toggle-style
-								/>
-							</div>
-							<div v-if="path.showingMore" class="file-secondary">
-								<div v-for="child in children" :key="child.path" class="file-secondary-row">
-									<Checkbox
-										v-model="child.selected"
-										:label="child.name"
-										class="select-checkbox"
-										:disabled="child.disabled"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div v-for="file in files" :key="file.path" class="table-row">
-						<div class="table-cell file-entry">
-							<div class="file-primary">
-								<Checkbox
-									v-model="file.selected"
-									:label="file.name"
-									:disabled="file.disabled"
-									class="select-checkbox"
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="button-row push-right">
-				<Button @click="exportModal.hide">
-					<XIcon />
-					Cancel
-				</Button>
-				<Button color="primary" @click="exportPack">
-					<PackageIcon />
-					Export
-				</Button>
-			</div>
-		</div>
-	</ModalWrapper>
+      <div class="table">
+        <div class="table-head">
+          <div class="table-cell row-wise">
+            Select files and folders to include in pack
+            <Button
+              class="sleek-primary collapsed-button"
+              icon-only
+              @click="() => (showingFiles = !showingFiles)"
+            >
+              <PlusIcon v-if="!showingFiles" />
+              <XIcon v-else />
+            </Button>
+          </div>
+        </div>
+        <div v-if="showingFiles" class="table-content">
+          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  :model-value="children.every((child) => child.selected)"
+                  :label="path.name"
+                  class="select-checkbox"
+                  :disabled="children.every((x) => x.disabled)"
+                  @update:model-value="
+                    (newValue) => children.forEach((child) => (child.selected = newValue))
+                  "
+                />
+                <Checkbox
+                  v-model="path.showingMore"
+                  class="select-checkbox dropdown"
+                  collapsing-toggle-style
+                />
+              </div>
+              <div v-if="path.showingMore" class="file-secondary">
+                <div v-for="child in children" :key="child.path" class="file-secondary-row">
+                  <Checkbox
+                    v-model="child.selected"
+                    :label="child.name"
+                    class="select-checkbox"
+                    :disabled="child.disabled"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-for="file in files" :key="file.path" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  v-model="file.selected"
+                  :label="file.name"
+                  :disabled="file.disabled"
+                  class="select-checkbox"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="button-row push-right">
+        <Button @click="exportModal.hide">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" @click="exportPack">
+          <PackageIcon />
+          Export
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-md);
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
 }
 
 .labeled_input {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
 
-	p {
-		margin: 0;
-	}
+  p {
+    margin: 0;
+  }
 }
 
 .select-checkbox {
-	gap: var(--gap-sm);
+  gap: var(--gap-sm);
 
-	button.checkbox {
-		border: none;
-	}
+  button.checkbox {
+    border: none;
+  }
 
-	&.dropdown {
-		margin-left: auto;
-	}
+  &.dropdown {
+    margin-left: auto;
+  }
 }
 
 .table-content {
-	max-height: 18rem;
-	overflow-y: auto;
+  max-height: 18rem;
+  overflow-y: auto;
 }
 
 .table {
-	border: 1px solid var(--color-bg);
+  border: 1px solid var(--color-bg);
 }
 
 .file-entry {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
 }
 
 .file-primary {
-	display: flex;
-	align-items: center;
-	gap: var(--gap-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
 }
 
 .file-secondary {
-	margin-left: var(--gap-xl);
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-sm);
-	height: 100%;
-	vertical-align: center;
+  margin-left: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  height: 100%;
+  vertical-align: center;
 }
 
 .file-secondary-row {
-	display: flex;
-	align-items: center;
-	gap: var(--gap-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
 }
 
 .button-row {
-	display: flex;
-	gap: var(--gap-sm);
-	align-items: center;
+  display: flex;
+  gap: var(--gap-sm);
+  align-items: center;
 }
 
 .row-wise {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .textarea-wrapper {
-	// margin-top: 1rem;
-	height: 12rem;
+  // margin-top: 1rem;
+  height: 12rem;
 
-	textarea {
-		max-height: 12rem;
-	}
+  textarea {
+    max-height: 12rem;
+  }
 
-	.preview {
-		overflow-y: auto;
-	}
+  .preview {
+    overflow-y: auto;
+  }
 }
 </style>

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

@@ -1,250 +1,259 @@
 <script setup>
-import {
-	DownloadIcon,
-	GameIcon,
-	PlayIcon,
-	SpinnerIcon,
-	StopCircleIcon,
-	TimerIcon,
-} from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import dayjs from 'dayjs'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-
-import { trackEvent } from '@/helpers/analytics'
-import { process_listener } from '@/helpers/events'
+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 { finish_install, kill, run } from '@/helpers/profile'
+import { process_listener } from '@/helpers/events'
+import { handleError } from '@/store/state.js'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
-
-const { handleError } = injectNotificationManager()
-const formatRelativeTime = useRelativeTime()
+import { trackEvent } from '@/helpers/analytics'
 
 const props = defineProps({
-	instance: {
-		type: Object,
-		default() {
-			return {}
-		},
-	},
-	compact: {
-		type: Boolean,
-		default: false,
-	},
-	first: {
-		type: Boolean,
-		default: false,
-	},
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
 })
 
 const playing = ref(false)
-const loading = ref(false)
-const modLoading = computed(
-	() =>
-		loading.value ||
-		currentEvent.value === 'installing' ||
-		(currentEvent.value === 'launched' && !playing.value),
-)
-const installing = computed(() => props.instance.install_stage.includes('installing'))
-const installed = computed(() => props.instance.install_stage === 'installed')
+
+const modLoading = computed(() => props.instance.install_stage !== 'installed')
 
 const router = useRouter()
 
 const seeInstance = async () => {
-	await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
+  await router.push(`/instance/${encodeURIComponent(props.instance.path)}/`)
 }
 
 const checkProcess = async () => {
-	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
 
-	playing.value = runningProcesses.length > 0
+  playing.value = runningProcesses.length > 0
 }
 
 const play = async (e, context) => {
-	e?.stopPropagation()
-	loading.value = true
-	await run(props.instance.path)
-		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
-		.finally(() => {
-			trackEvent('InstancePlay', {
-				loader: props.instance.loader,
-				game_version: props.instance.game_version,
-				source: context,
-			})
-		})
-	loading.value = false
+  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
+  e?.stopPropagation()
+  playing.value = false
 
-	await kill(props.instance.path).catch(handleError)
+  await kill(props.instance.path).catch(handleError)
 
-	trackEvent('InstanceStop', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-		source: context,
-	})
-}
-
-const repair = async (e) => {
-	e?.stopPropagation()
-
-	await finish_install(props.instance).catch(handleError)
+  trackEvent('InstanceStop', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: context,
+  })
 }
 
 const openFolder = async () => {
-	await showProfileInFolder(props.instance.path)
+  await showProfileInFolder(props.instance.path)
 }
 
 const addContent = async () => {
-	await router.push({
-		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-		query: { i: props.instance.path },
-	})
+  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,
+  play,
+  stop,
+  seeInstance,
+  openFolder,
+  addContent,
+  instance: props.instance,
 })
 
-const currentEvent = ref(null)
-
 const unlisten = await process_listener((e) => {
-	if (e.profile_path_id === props.instance.path) {
-		currentEvent.value = e.event
-		if (e.event === 'finished') {
-			playing.value = false
-		}
-	}
+  if (e.event === 'finished' && e.profile_path_id === props.instance.path) playing.value = false
 })
 
-onMounted(() => checkProcess())
 onUnmounted(() => unlisten())
 </script>
 
 <template>
-	<template v-if="compact">
-		<div
-			class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
-			@click="seeInstance"
-			@mouseenter="checkProcess"
-		>
-			<Avatar
-				size="48px"
-				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-				:tint-by="instance.path"
-				alt="Mod card"
-			/>
-			<div class="h-full flex items-center font-bold text-contrast leading-normal">
-				<span class="line-clamp-2">{{ instance.name }}</span>
-			</div>
-			<div class="flex items-center">
-				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
-					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
-						<StopCircleIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="modLoading" color="standard" circular>
-					<button v-tooltip="'Instance is loading...'" disabled>
-						<SpinnerIcon class="animate-spin" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
-					<button
-						v-tooltip="'Play'"
-						@click="(e) => play(e, 'InstanceCard')"
-						@mousehover="checkProcess"
-					>
-						<!-- Translate for optical centering -->
-						<PlayIcon class="translate-x-[1px]" />
-					</button>
-				</ButtonStyled>
-			</div>
-			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
-				<TimerIcon />
-				<span class="text-sm">
-					<template v-if="instance.last_played">
-						Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
-					</template>
-					<template v-else> Never played </template>
-				</span>
-			</div>
-		</div>
-	</template>
-	<div v-else>
-		<div
-			class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
-			@click="seeInstance"
-			@mouseenter="checkProcess"
-		>
-			<div class="relative flex items-center justify-center">
-				<Avatar
-					size="48px"
-					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-					:tint-by="instance.path"
-					alt="Mod card"
-					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-				/>
-				<div class="absolute inset-0 flex items-center justify-center">
-					<ButtonStyled v-if="playing" size="large" color="red" circular>
-						<button
-							v-tooltip="'Stop'"
-							:class="{ 'scale-100 opacity-100': playing }"
-							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
-							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
-					<SpinnerIcon
-						v-else-if="modLoading || installing"
-						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
-						class="animate-spin w-8 h-8"
-						tabindex="-1"
-					/>
-					<ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
-						<button
-							v-tooltip="'Repair'"
-							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-							@click="(e) => repair(e)"
-						>
-							<DownloadIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else size="large" color="brand" circular>
-						<button
-							v-tooltip="'Play'"
-							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-							@click="(e) => play(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<PlayIcon class="translate-x-[2px]" />
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-			<div class="flex flex-col gap-1">
-				<p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
-					{{ instance.name }}
-				</p>
-				<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
-					<GameIcon class="shrink-0" />
-					<span class="text-sm capitalize">
-						{{ instance.loader }} {{ instance.game_version }}
-					</span>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="instance">
+    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
+      <Avatar
+        size="lg"
+        :src="props.instance.icon_path ? convertFileSrc(props.instance.icon_path) : null"
+        alt="Mod card"
+        class="mod-image"
+      />
+      <div class="project-info">
+        <p class="title">{{ props.instance.name }}</p>
+        <p
+          v-if="
+            props.instance.install_stage === 'installing' ||
+            props.instance.install_stage === 'not_installed' ||
+            props.instance.install_stage === 'pack_installing'
+          "
+          class="description"
+        >
+          Installing...
+        </p>
+        <p v-else class="description">
+          {{ props.instance.loader }}
+          {{ props.instance.game_version }}
+        </p>
+      </div>
+    </Card>
+    <div
+      v-if="playing === true"
+      class="stop cta button-base"
+      @click="(e) => stop(e, 'InstanceCard')"
+      @mousehover="checkProcess"
+    >
+      <StopCircleIcon />
+    </div>
+    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
+      <AnimatedLogo class="loading-indicator" />
+    </div>
+    <div v-else class="install cta button-base" @click="(e) => play(e, 'InstanceCard')">
+      <PlayIcon />
+    </div>
+  </div>
 </template>
+
+<style lang="scss">
+.loading-indicator {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+
+  svg {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.instance {
+  position: relative;
+
+  &:hover {
+    .cta {
+      opacity: 1;
+      bottom: calc(var(--gap-md) + 4.25rem);
+    }
+  }
+}
+
+.cta {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  right: calc(var(--gap-md) * 2);
+  bottom: 3.25rem;
+  opacity: 0;
+  transition:
+    0.2s ease-in-out bottom,
+    0.2s ease-in-out opacity,
+    0.1s ease-in-out filter !important;
+  cursor: pointer;
+  box-shadow: var(--shadow-floating);
+
+  svg {
+    color: var(--color-accent-contrast);
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+  }
+
+  &.install {
+    background: var(--color-brand);
+    display: flex;
+  }
+
+  &.stop {
+    background: var(--color-red);
+    display: flex;
+  }
+
+  &.loading-cta {
+    background: hsl(220, 11%, 10%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.instance-card-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--gap-md);
+  transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
+  margin-bottom: 0;
+
+  .mod-image {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+
+  .project-info {
+    margin-top: 1rem;
+    width: 100%;
+
+    .title {
+      color: var(--color-contrast);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      margin: 0;
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 110%;
+      display: inline-block;
+    }
+
+    .description {
+      color: var(--color-base);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-weight: 500;
+      font-size: 0.775rem;
+      line-height: 125%;
+      margin: 0.25rem 0 0;
+      text-transform: capitalize;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

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

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-import { convertFileSrc } from '@tauri-apps/api/core'
-
-type Instance = {
-	game_version: string
-	loader: string
-	path: string
-	install_stage: string
-	icon_path?: string
-	name: string
-}
-
-defineProps<{
-	instance: Instance
-}>()
-</script>
-
-<template>
-	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-		<router-link
-			:to="`/instance/${encodeURIComponent(instance.path)}`"
-			tabindex="-1"
-			class="flex flex-col gap-4 text-primary"
-		>
-			<span class="flex items-center gap-2">
-				<Avatar
-					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
-					:alt="instance.name"
-					size="48px"
-				/>
-				<span class="flex flex-col gap-2">
-					<span class="font-extrabold bold text-contrast">
-						{{ instance.name }}
-					</span>
-					<span class="text-secondary flex items-center gap-2 font-semibold">
-						<GameIcon class="h-5 w-5 text-secondary" />
-						{{ formatCategory(instance.loader) }} {{ instance.game_version }}
-					</span>
-				</span>
-			</span>
-		</router-link>
-		<ButtonStyled>
-			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
-				<LeftArrowIcon /> Back to instance
-			</router-link>
-		</ButtonStyled>
-	</div>
-</template>
-
-<style scoped lang="scss"></style>

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

@@ -1,97 +1,97 @@
 <template>
-	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
-		<div class="auto-detect-modal">
-			<div class="table">
-				<div class="table-row table-head">
-					<div class="table-cell table-text">Version</div>
-					<div class="table-cell table-text">Path</div>
-					<div class="table-cell table-text">Actions</div>
-				</div>
-				<div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
-					<div class="table-cell table-text">
-						<span>{{ javaInstall.version }}</span>
-					</div>
-					<div v-tooltip="javaInstall.path" class="table-cell table-text">
-						<span>{{ javaInstall.path }}</span>
-					</div>
-					<div class="table-cell table-text manage">
-						<Button v-if="currentSelected.path === javaInstall.path" disabled
-							><CheckIcon /> Selected</Button
-						>
-						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
-					</div>
-				</div>
-				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
-					<div class="table-cell table-text">No java installations found!</div>
-				</div>
-			</div>
-			<div class="input-group push-right">
-				<Button @click="$refs.detectJavaModal.hide()">
-					<XIcon />
-					Cancel
-				</Button>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper ref="detectJavaModal" header="Select java version">
+    <div class="auto-detect-modal">
+      <div class="table">
+        <div class="table-row table-head">
+          <div class="table-cell table-text">Version</div>
+          <div class="table-cell table-text">Path</div>
+          <div class="table-cell table-text">Actions</div>
+        </div>
+        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.version }}</span>
+          </div>
+          <div v-tooltip="javaInstall.path" class="table-cell table-text">
+            <span>{{ javaInstall.path }}</span>
+          </div>
+          <div class="table-cell table-text manage">
+            <Button v-if="currentSelected.path === javaInstall.path" disabled
+              ><CheckIcon /> Selected</Button
+            >
+            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+          </div>
+        </div>
+        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+          <div class="table-cell table-text">No java installations found!</div>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="$refs.detectJavaModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 <script setup>
-import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'
-
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/notifications.js'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})
 
 defineExpose({
-	show: async (version, currentSelectedJava) => {
-		chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
+  show: async (version, currentSelectedJava) => {
+    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
 
-		currentSelected.value = currentSelectedJava
-		if (!currentSelected.value) {
-			currentSelected.value = { path: '', version: '' }
-		}
+    currentSelected.value = currentSelectedJava
+    if (!currentSelected.value) {
+      currentSelected.value = { path: '', version: '' }
+    }
 
-		detectJavaModal.value.show()
-	},
+    detectJavaModal.value.show()
+  },
 })
 
 const emit = defineEmits(['submit'])
 
 function setJavaInstall(javaInstall) {
-	emit('submit', javaInstall)
-	detectJavaModal.value.hide()
-	trackEvent('JavaAutoDetect', {
-		path: javaInstall.path,
-		version: javaInstall.version,
-	})
+  emit('submit', javaInstall)
+  detectJavaModal.value.hide()
+  trackEvent('JavaAutoDetect', {
+    path: javaInstall.path,
+    version: javaInstall.version,
+  })
 }
 </script>
 <style lang="scss" scoped>
 .auto-detect-modal {
-	.table {
-		.table-row {
-			grid-template-columns: 1fr 4fr min-content;
-		}
+  padding: 1rem;
 
-		span {
-			display: inherit;
-			align-items: center;
-			justify-content: center;
-		}
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr min-content;
+    }
 
-		padding: 0.5rem;
-	}
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+
+    padding: 0.5rem;
+  }
 }
 
 .manage {
-	display: flex;
-	gap: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
 }
 </style>

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

@@ -1,102 +1,100 @@
 <template>
-	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-	<div class="toggle-setting" :class="{ compact }">
-		<input
-			autocomplete="off"
-			:disabled="props.disabled"
-			:value="props.modelValue ? props.modelValue.path : ''"
-			type="text"
-			class="installation-input"
-			:placeholder="placeholder ?? '/path/to/java'"
-			@input="
-				(val) => {
-					emit('update:modelValue', {
-						...props.modelValue,
-						path: val.target.value,
-					})
-				}
-			"
-		/>
-		<span class="installation-buttons">
-			<Button
-				v-if="props.version"
-				:disabled="props.disabled || installingJava"
-				@click="reinstallJava"
-			>
-				<DownloadIcon />
-				{{ installingJava ? 'Installing...' : 'Install recommended' }}
-			</Button>
-			<Button :disabled="props.disabled" @click="autoDetect">
-				<SearchIcon />
-				Detect
-			</Button>
-			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
-				<FolderSearchIcon />
-				Browse
-			</Button>
-			<Button v-if="testingJava" disabled> Testing... </Button>
-			<Button v-else-if="testingJavaSuccess === true">
-				<CheckIcon class="test-success" />
-				Success
-			</Button>
-			<Button v-else-if="testingJavaSuccess === false">
-				<XIcon class="test-fail" />
-				Failed
-			</Button>
-			<Button v-else :disabled="props.disabled" @click="testJava">
-				<PlayIcon />
-				Test
-			</Button>
-		</span>
-	</div>
+  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+  <div class="toggle-setting" :class="{ compact }">
+    <input
+      autocomplete="off"
+      :disabled="props.disabled"
+      :value="props.modelValue ? props.modelValue.path : ''"
+      type="text"
+      class="installation-input"
+      :placeholder="placeholder ?? '/path/to/java'"
+      @input="
+        (val) => {
+          emit('update:modelValue', {
+            ...props.modelValue,
+            path: val.target.value,
+          })
+        }
+      "
+    />
+    <span class="installation-buttons">
+      <Button
+        v-if="props.version"
+        :disabled="props.disabled || installingJava"
+        @click="reinstallJava"
+      >
+        <DownloadIcon />
+        {{ installingJava ? 'Installing...' : 'Install recommended' }}
+      </Button>
+      <Button :disabled="props.disabled" @click="autoDetect">
+        <SearchIcon />
+        Auto detect
+      </Button>
+      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
+        <FolderSearchIcon />
+        Browse
+      </Button>
+      <Button v-if="testingJava" disabled> Testing... </Button>
+      <Button v-else-if="testingJavaSuccess === true">
+        <CheckIcon class="test-success" />
+        Success
+      </Button>
+      <Button v-else-if="testingJavaSuccess === false">
+        <XIcon class="test-fail" />
+        Failed
+      </Button>
+      <Button v-else :disabled="props.disabled" @click="testJava">
+        <PlayIcon />
+        Test
+      </Button>
+    </span>
+  </div>
 </template>
 
 <script setup>
 import {
-	CheckIcon,
-	DownloadIcon,
-	FolderSearchIcon,
-	PlayIcon,
-	SearchIcon,
-	XIcon,
+  SearchIcon,
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  FolderSearchIcon,
+  DownloadIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
-import { open } from '@tauri-apps/plugin-dialog'
-import { ref } from 'vue'
-
-import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { trackEvent } from '@/helpers/analytics'
+import { Button } from '@modrinth/ui'
 import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
-
-const { handleError } = injectNotificationManager()
+import { ref } from 'vue'
+import { open } from '@tauri-apps/plugin-dialog'
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const props = defineProps({
-	version: {
-		type: Number,
-		required: false,
-		default: null,
-	},
-	modelValue: {
-		type: Object,
-		default: () => ({
-			path: '',
-			version: '',
-		}),
-	},
-	disabled: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	placeholder: {
-		type: String,
-		required: false,
-		default: null,
-	},
-	compact: {
-		type: Boolean,
-		default: false,
-	},
+  version: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      path: '',
+      version: '',
+    }),
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -107,115 +105,115 @@ const testingJavaSuccess = ref(null)
 const installingJava = ref(false)
 
 async function testJava() {
-	testingJava.value = true
-	testingJavaSuccess.value = await test_jre(
-		props.modelValue ? props.modelValue.path : '',
-		props.version,
-	)
-	testingJava.value = false
+  testingJava.value = true
+  testingJavaSuccess.value = await test_jre(
+    props.modelValue ? props.modelValue.path : '',
+    1,
+    props.version,
+  )
+  testingJava.value = false
 
-	trackEvent('JavaTest', {
-		path: props.modelValue ? props.modelValue.path : '',
-		success: testingJavaSuccess.value,
-	})
+  trackEvent('JavaTest', {
+    path: props.modelValue ? props.modelValue.path : '',
+    success: testingJavaSuccess.value,
+  })
 
-	setTimeout(() => {
-		testingJavaSuccess.value = null
-	}, 2000)
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
 }
 
 async function handleJavaFileInput() {
-	const filePath = await open()
+  const filePath = await open()
 
-	if (filePath) {
-		let result = await get_jre(filePath.path ?? filePath).catch(handleError)
-		if (!result) {
-			result = {
-				path: filePath.path ?? filePath,
-				version: props.version.toString(),
-				architecture: 'x86',
-			}
-		}
+  if (filePath) {
+    let result = await get_jre(filePath.path ?? filePath)
+    if (!result) {
+      result = {
+        path: filePath.path ?? filePath,
+        version: props.version.toString(),
+        architecture: 'x86',
+      }
+    }
 
-		trackEvent('JavaManualSelect', {
-			version: props.version,
-		})
+    trackEvent('JavaManualSelect', {
+      version: props.version,
+    })
 
-		emit('update:modelValue', result)
-	}
+    emit('update:modelValue', result)
+  }
 }
 
 const detectJavaModal = ref(null)
 async function autoDetect() {
-	if (!props.compact) {
-		detectJavaModal.value.show(props.version, props.modelValue)
-	} else {
-		const versions = await find_filtered_jres(props.version).catch(handleError)
-		if (versions.length > 0) {
-			emit('update:modelValue', versions[0])
-		}
-	}
+  if (!props.compact) {
+    detectJavaModal.value.show(props.version, props.modelValue)
+  } else {
+    const versions = await find_filtered_jres(props.version).catch(handleError)
+    if (versions.length > 0) {
+      emit('update:modelValue', versions[0])
+    }
+  }
 }
 
 async function reinstallJava() {
-	installingJava.value = true
-	const path = await auto_install_java(props.version).catch(handleError)
-	let result = await get_jre(path)
+  installingJava.value = true
+  const path = await auto_install_java(props.version).catch(handleError)
+  let result = await get_jre(path)
 
-	if (!result) {
-		result = {
-			path: path,
-			version: props.version.toString(),
-			architecture: 'x86',
-		}
-	}
+  if (!result) {
+    result = {
+      path: path,
+      version: props.version.toString(),
+      architecture: 'x86',
+    }
+  }
 
-	trackEvent('JavaReInstall', {
-		path: path,
-		version: props.version,
-	})
+  trackEvent('JavaReInstall', {
+    path: path,
+    version: props.version,
+  })
 
-	emit('update:modelValue', result)
-	installingJava.value = false
+  emit('update:modelValue', result)
+  installingJava.value = false
 }
 </script>
 
 <style lang="scss" scoped>
 .installation-input {
-	width: 100% !important;
-	flex-grow: 1;
+  width: 100% !important;
+  flex-grow: 1;
 }
 
 .toggle-setting {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
 
-	&.compact {
-		flex-wrap: wrap;
-	}
+  &.compact {
+    flex-wrap: wrap;
+  }
 }
 
 .installation-buttons {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
 
-	.btn {
-		width: max-content;
-	}
+  .btn {
+    width: max-content;
+  }
 }
 
 .test-success {
-	color: var(--color-green);
+  color: var(--color-green);
 }
 
 .test-fail {
-	color: var(--color-red);
+  color: var(--color-red);
 }
 </style>

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

@@ -1,34 +1,31 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, Button } from '@modrinth/ui'
+import { Button, Badge } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-
-import { SwapIcon } from '@/assets/icons/index.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { update_managed_modrinth_version } from '@/helpers/profile'
 import { releaseColor } from '@/helpers/utils'
+import { SwapIcon } from '@/assets/icons/index.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const props = defineProps({
-	versions: {
-		type: Array,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
+  versions: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
 })
 
 defineExpose({
-	show: () => {
-		modpackVersionModal.value.show()
-	},
+  show: () => {
+    modpackVersionModal.value.show()
+  },
 })
 
-const emit = defineEmits(['finish-install'])
-
 const filteredVersions = computed(() => {
-	return props.versions
+  return props.versions
 })
 
 const modpackVersionModal = ref(null)
@@ -37,160 +34,152 @@ const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)
 
 const switchVersion = async (versionId) => {
-	modpackVersionModal.value.hide()
-	inProgress.value = true
-	await update_managed_modrinth_version(props.instance.path, versionId)
-	inProgress.value = false
-	emit('finish-install')
-}
-
-const onHide = () => {
-	if (!inProgress.value) {
-		emit('finish-install')
-	}
+  inProgress.value = true
+  await update_managed_modrinth_version(props.instance.path, versionId)
+  inProgress.value = false
 }
 </script>
 
 <template>
-	<ModalWrapper
-		ref="modpackVersionModal"
-		class="modpack-version-modal"
-		header="Change modpack version"
-		:on-hide="onHide"
-	>
-		<div class="modal-body">
-			<div 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" />
-						<div class="name-cell table-cell table-text">Name</div>
-						<div class="table-cell table-text">Supports</div>
-					</div>
-					<div class="scrollable">
-						<div
-							v-for="version in filteredVersions"
-							:key="version.id"
-							class="table-row with-columns selectable"
-							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
-						>
-							<div class="table-cell table-text">
-								<Button
-									:color="version.id === installedVersion ? '' : 'primary'"
-									icon-only
-									:disabled="inProgress || installing || version.id === installedVersion"
-									@click.stop="() => switchVersion(version.id)"
-								>
-									<SwapIcon v-if="version.id !== installedVersion" />
-									<CheckIcon v-else />
-								</Button>
-							</div>
-							<div class="name-cell table-cell table-text">
-								<div class="version-link">
-									{{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
-									<div class="version-badge">
-										<div class="channel-indicator">
-											<Badge
-												:color="releaseColor(version.version_type)"
-												:type="
-													version.version_type.charAt(0).toUpperCase() +
-													version.version_type.slice(1)
-												"
-											/>
-										</div>
-										<div>
-											{{ version.version_number }}
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="table-cell table-text stacked-text">
-								<span>
-									{{
-										version.loaders
-											.map((str) => str.charAt(0).toUpperCase() + str.slice(1))
-											.join(', ')
-									}}
-								</span>
-								<span>
-									{{ version.game_versions.join(', ') }}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper
+    ref="modpackVersionModal"
+    class="modpack-version-modal"
+    header="Change modpack version"
+  >
+    <div class="modal-body">
+      <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" />
+            <div class="name-cell table-cell table-text">Name</div>
+            <div class="table-cell table-text">Supports</div>
+          </div>
+          <div class="scrollable">
+            <div
+              v-for="version in filteredVersions"
+              :key="version.id"
+              class="table-row with-columns selectable"
+              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+            >
+              <div class="table-cell table-text">
+                <Button
+                  :color="version.id === installedVersion ? '' : 'primary'"
+                  icon-only
+                  :disabled="inProgress || installing || version.id === installedVersion"
+                  @click.stop="() => switchVersion(version.id)"
+                >
+                  <SwapIcon v-if="version.id !== installedVersion" />
+                  <CheckIcon v-else />
+                </Button>
+              </div>
+              <div class="name-cell table-cell table-text">
+                <div class="version-link">
+                  {{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
+                  <div class="version-badge">
+                    <div class="channel-indicator">
+                      <Badge
+                        :color="releaseColor(version.version_type)"
+                        :type="
+                          version.version_type.charAt(0).toUpperCase() +
+                          version.version_type.slice(1)
+                        "
+                      />
+                    </div>
+                    <div>
+                      {{ version.version_number }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-cell table-text stacked-text">
+                <span>
+                  {{
+                    version.loaders
+                      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+                      .join(', ')
+                  }}
+                </span>
+                <span>
+                  {{ version.game_versions.join(', ') }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">
 .filter-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: center;
-	gap: 0.5rem;
-	margin-bottom: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .with-columns {
-	grid-template-columns: min-content 1fr 1fr;
+  grid-template-columns: min-content 1fr 1fr;
 }
 
 .scrollable {
-	overflow-y: auto;
-	max-height: 25rem;
+  overflow-y: auto;
+  max-height: 25rem;
 }
 
 .card-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background-color: var(--color-raised-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-raised-bg);
 }
 
 .mod-card {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	overflow: hidden;
-	margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: hidden;
+  margin-top: 0.5rem;
 }
 
 .version-link {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 
-	.version-badge {
-		display: flex;
-		flex-wrap: wrap;
+  .version-badge {
+    display: flex;
+    flex-wrap: wrap;
 
-		.channel-indicator {
-			margin-right: 0.5rem;
-		}
-	}
+    .channel-indicator {
+      margin-right: 0.5rem;
+    }
+  }
 }
 
 .stacked-text {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: flex-start;
 }
 
 .download-cell {
-	width: 4rem;
-	padding: 1rem;
+  width: 4rem;
+  padding: 1rem;
 }
 
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--gap-md);
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
 }
 
 .table {
-	border: 1px solid var(--color-bg);
+  border: 1px solid var(--color-bg);
 }
 </style>

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

@@ -1,67 +0,0 @@
-<template>
-	<RouterLink
-		v-if="typeof to === 'string'"
-		:to="to"
-		v-bind="$attrs"
-		:class="{
-			'router-link-active': isPrimary && isPrimary(route),
-			'subpage-active': isSubpage && isSubpage(route),
-			disabled: disabled,
-		}"
-		class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-	>
-		<slot />
-	</RouterLink>
-	<button
-		v-else
-		v-bind="$attrs"
-		class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-		:disabled="disabled"
-		@click="to"
-	>
-		<slot />
-	</button>
-</template>
-
-<script setup lang="ts">
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { RouterLink, useRoute } from 'vue-router'
-
-const route = useRoute()
-
-type RouteFunction = (route: RouteLocationNormalizedLoaded) => boolean
-
-withDefaults(
-	defineProps<{
-		to: (() => void) | string
-		isPrimary?: RouteFunction
-		isSubpage?: RouteFunction
-		highlightOverride?: boolean
-		disabled?: boolean
-	}>(),
-	{
-		disabled: false,
-	},
-)
-
-defineOptions({
-	inheritAttrs: false,
-})
-</script>
-
-<style lang="scss" scoped>
-.router-link-active,
-.subpage-active {
-	svg {
-		filter: drop-shadow(0 0 0.5rem black);
-	}
-}
-
-.router-link-active {
-	@apply text-[--color-button-text-selected] bg-[--color-button-bg-selected];
-}
-
-.subpage-active {
-	@apply text-contrast bg-button-bg;
-}
-</style>

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

@@ -1,160 +0,0 @@
-<template>
-	<nav
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
-	>
-		<RouterLink
-			v-for="(link, index) in filteredLinks"
-			v-show="link.shown === undefined ? true : link.shown"
-			:key="index"
-			ref="tabLinkElements"
-			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-			:class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
-		>
-			<component :is="link.icon" v-if="link.icon" class="size-5" />
-			<span class="text-nowrap">{{ link.label }}</span>
-		</RouterLink>
-		<div
-			:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'}`"
-			:style="{
-				left: sliderLeftPx,
-				top: sliderTopPx,
-				right: sliderRightPx,
-				bottom: sliderBottomPx,
-				opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
-			}"
-			aria-hidden="true"
-		></div>
-	</nav>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import { RouterLink, useRoute } from 'vue-router'
-
-const route = useRoute()
-
-interface Tab {
-	label: string
-	href: string | RouteLocationRaw
-	shown?: boolean
-	icon?: unknown
-	subpages?: string[]
-}
-
-const props = defineProps<{
-	links: Tab[]
-	query?: string
-}>()
-
-const sliderLeft = ref(4)
-const sliderTop = ref(4)
-const sliderRight = ref(4)
-const sliderBottom = ref(4)
-const activeIndex = ref(-1)
-const oldIndex = ref(-1)
-const subpageSelected = ref(false)
-
-const filteredLinks = computed(() =>
-	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
-)
-const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
-const sliderTopPx = computed(() => `${sliderTop.value}px`)
-const sliderRightPx = computed(() => `${sliderRight.value}px`)
-const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
-
-function pickLink() {
-	let index = -1
-	subpageSelected.value = false
-	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
-		const link = filteredLinks.value[i]
-
-		if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
-			index = i
-			break
-		} else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
-			index = i
-			subpageSelected.value = true
-			break
-		}
-	}
-	activeIndex.value = index
-
-	if (activeIndex.value !== -1) {
-		startAnimation()
-	} else {
-		oldIndex.value = -1
-		sliderLeft.value = 0
-		sliderRight.value = 0
-	}
-}
-
-const tabLinkElements = ref()
-
-function startAnimation() {
-	const el = tabLinkElements.value[activeIndex.value].$el
-
-	if (!el || !el.offsetParent) return
-
-	const newValues = {
-		left: el.offsetLeft,
-		top: el.offsetTop,
-		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
-	}
-
-	if (sliderLeft.value === 4 && sliderRight.value === 4) {
-		sliderLeft.value = newValues.left
-		sliderRight.value = newValues.right
-		sliderTop.value = newValues.top
-		sliderBottom.value = newValues.bottom
-	} else {
-		const delay = 200
-
-		if (newValues.left < sliderLeft.value) {
-			sliderLeft.value = newValues.left
-			setTimeout(() => {
-				sliderRight.value = newValues.right
-			}, delay)
-		} else {
-			sliderRight.value = newValues.right
-			setTimeout(() => {
-				sliderLeft.value = newValues.left
-			}, delay)
-		}
-
-		if (newValues.top < sliderTop.value) {
-			sliderTop.value = newValues.top
-			setTimeout(() => {
-				sliderBottom.value = newValues.bottom
-			}, delay)
-		} else {
-			sliderBottom.value = newValues.bottom
-			setTimeout(() => {
-				sliderTop.value = newValues.top
-			}, delay)
-		}
-	}
-}
-
-onMounted(() => {
-	window.addEventListener('resize', pickLink)
-	pickLink()
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', pickLink)
-})
-
-watch(route, () => {
-	pickLink()
-})
-</script>
-<style scoped>
-.navtabs-transition {
-	/* Delay on opacity is to hide any jankiness as the page loads */
-	transition:
-		all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
-		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
-}
-</style>

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

@@ -1,42 +1,33 @@
 <template>
-	<div class="progress-bar">
-		<div
-			class="progress-bar__fill"
-			:style="{
-				width: `${progress}%`,
-				'background-color': error ? 'var(--color-red)' : 'var(--color-brand)',
-			}"
-		></div>
-	</div>
+  <div class="progress-bar">
+    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+  </div>
 </template>
 
 <script setup>
 defineProps({
-	progress: {
-		type: Number,
-		required: true,
-		validator(value) {
-			return value >= 0 && value <= 100
-		},
-	},
-	error: {
-		type: Boolean,
-		default: false,
-	},
+  progress: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100
+    },
+  },
 })
 </script>
 
 <style scoped>
 .progress-bar {
-	width: 100%;
-	height: 0.5rem;
-	background-color: var(--color-button-bg);
-	border-radius: var(--radius-lg);
-	overflow: hidden;
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
 .progress-bar__fill {
-	height: 100%;
-	transition: width 0.3s;
+  height: 100%;
+  background-color: var(--color-brand);
+  transition: width 0.3s;
 }
 </style>

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

@@ -1,118 +1,243 @@
 <script setup>
-import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+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 { computed } from 'vue'
 import { useRouter } from 'vue-router'
+import { install as installVersion } from '@/store/install.js'
 
 dayjs.extend(relativeTime)
 
 const router = useRouter()
+const installing = ref(false)
 
 const props = defineProps({
-	project: {
-		type: Object,
-		default() {
-			return {}
-		},
-	},
-})
-
-const featuredCategory = computed(() => {
-	if (props.project.display_categories.includes('optimization')) {
-		return 'optimization'
-	}
-
-	return props.project.display_categories[0] ?? props.project.categories[0]
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
 })
 
 const toColor = computed(() => {
-	let color = props.project.color
+  let color = props.project.color
 
-	color >>>= 0
-	const b = color & 0xff
-	const g = (color >>> 8) & 0xff
-	const r = (color >>> 16) & 0xff
-	return 'rgba(' + [r, g, b, 1].join(',') + ')'
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return 'rgba(' + [r, g, b, 1].join(',') + ')'
 })
 
 const toTransparent = computed(() => {
-	let color = props.project.color
+  let color = props.project.color
 
-	color >>>= 0
-	const b = color & 0xff
-	const g = (color >>> 8) & 0xff
-	const r = (color >>> 16) & 0xff
-	return (
-		'linear-gradient(rgba(' +
-		[r, g, b, 0.03].join(',') +
-		'), 65%, rgba(' +
-		[r, g, b, 0.3].join(',') +
-		'))'
-	)
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return (
+    'linear-gradient(rgba(' +
+    [r, g, b, 0.03].join(',') +
+    '), 65%, rgba(' +
+    [r, g, b, 0.3].join(',') +
+    '))'
+  )
 })
+
+const install = async (e) => {
+  e?.stopPropagation()
+  installing.value = true
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'ProjectCard',
+    () => {
+      installing.value = false
+    },
+  )
+}
 </script>
 
 <template>
-	<div
-		class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
-		@click="router.push(`/project/${project.slug}`)"
-	>
-		<div
-			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
-			:style="{
-				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
-				'background-image': `url(${
-					project.featured_gallery ??
-					project.gallery[0] ??
-					'https://launcher-files.modrinth.com/assets/maze-bg.png'
-				})`,
-			}"
-		>
-			<div
-				class="badges-wrapper"
-				:class="{
-					'no-image': !project.featured_gallery && !project.gallery[0],
-				}"
-				:style="{
-					background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
-				}"
-			></div>
-		</div>
-		<div class="flex flex-col justify-center gap-2 px-4 py-3">
-			<div class="flex gap-2 items-center">
-				<Avatar size="48px" :src="project.icon_url" />
-				<div class="h-full flex items-center font-bold text-contrast leading-normal">
-					<span class="line-clamp-2">{{ project.title }}</span>
-				</div>
-			</div>
-			<p class="m-0 text-sm font-medium line-clamp-3 leading-tight h-[3.25rem]">
-				{{ project.description }}
-			</p>
-			<div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
-				<div
-					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
-				>
-					<DownloadIcon />
-					{{ formatNumber(project.downloads) }}
-				</div>
-				<div
-					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
-				>
-					<HeartIcon />
-					{{ formatNumber(project.follows) }}
-				</div>
-				<div class="flex items-center gap-1 pr-2">
-					<TagIcon />
-					<TagItem>
-						{{ formatCategory(featuredCategory) }}
-					</TagItem>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="wrapper">
+    <Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
+      <div
+        class="banner"
+        :style="{
+          'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+          'background-image': `url(${
+            project.featured_gallery ??
+            project.gallery[0] ??
+            'https://launcher-files.modrinth.com/assets/maze-bg.png'
+          })`,
+          'no-image': !project.featured_gallery && !project.gallery[0],
+        }"
+      >
+        <div class="badges">
+          <div class="badge">
+            <DownloadIcon />
+            {{ formatNumber(project.downloads) }}
+          </div>
+          <div class="badge">
+            <HeartIcon />
+            {{ formatNumber(project.follows) }}
+          </div>
+          <div class="badge">
+            <CalendarIcon />
+            {{ formatCategory(dayjs(project.date_modified).fromNow()) }}
+          </div>
+        </div>
+        <div
+          class="badges-wrapper"
+          :class="{
+            'no-image': !project.featured_gallery && !project.gallery[0],
+          }"
+          :style="{
+            background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+          }"
+        ></div>
+      </div>
+      <Avatar class="icon" size="sm" :src="project.icon_url" />
+      <div class="title">
+        <div class="title-text">
+          {{ project.title }}
+        </div>
+        <div class="author">by {{ project.author }}</div>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+    </Card>
+    <Button color="primary" class="install" :disabled="installing" @click="install">
+      <DownloadIcon />
+      {{ installing ? 'Installing' : 'Install' }}
+    </Button>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.wrapper {
+  position: relative;
+  aspect-ratio: 1;
+
+  &:hover {
+    .install:enabled {
+      opacity: 1;
+    }
+  }
+}
+
+.project-card {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template:
+    '. . . .' 0
+    '. icon title .' 3rem
+    'banner banner banner banner' auto
+    '. description description .' 3.5rem
+    '. . . .' 0 / 0 3rem minmax(0, 1fr) 0;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  .icon {
+    grid-area: icon;
+  }
+
+  .title {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-area: title;
+    white-space: nowrap;
+
+    .title-text {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--font-size-md);
+      font-weight: bold;
+    }
+  }
+
+  .author {
+    font-size: var(--font-size-sm);
+    grid-area: author;
+  }
+
+  .banner {
+    grid-area: banner;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .badges-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      mix-blend-mode: hard-light;
+    }
+
+    .badges {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: var(--gap-sm);
+      gap: var(--gap-xs);
+      display: flex;
+      z-index: 10;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  .description {
+    grid-area: description;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.badge {
+  background-color: var(--color-raised-bg);
+  font-size: var(--font-size-xs);
+  padding: var(--gap-xs) var(--gap-sm);
+  border-radius: var(--radius-sm);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--gap-xs);
+  }
+}
+
+.install {
+  position: absolute;
+  top: calc(5rem + var(--gap-sm));
+  right: var(--gap-sm);
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+</style>

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

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

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

@@ -1,75 +0,0 @@
-<script setup>
-import { SpinnerIcon } from '@modrinth/assets'
-import { Avatar, injectNotificationManager } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import dayjs from 'dayjs'
-import { onUnmounted, ref } from 'vue'
-
-import NavButton from '@/components/ui/NavButton.vue'
-import { profile_listener } from '@/helpers/events.js'
-import { list } from '@/helpers/profile'
-
-const { handleError } = injectNotificationManager()
-
-const recentInstances = ref([])
-const getInstances = async () => {
-	const profiles = await list().catch(handleError)
-
-	recentInstances.value = profiles
-		.sort((a, b) => {
-			const dateACreated = dayjs(a.created)
-			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
-
-			const dateBCreated = dayjs(b.created)
-			const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
-
-			const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
-			const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
-
-			if (dateA.isSame(dateB)) {
-				return a.name.localeCompare(b.name)
-			}
-
-			return dateB - dateA
-		})
-		.slice(0, 3)
-}
-
-await getInstances()
-
-const unlistenProfile = await profile_listener(async (event) => {
-	if (event.event !== 'synced') {
-		await getInstances()
-	}
-})
-
-onUnmounted(() => {
-	unlistenProfile()
-})
-</script>
-
-<template>
-	<NavButton
-		v-for="instance in recentInstances"
-		:key="instance.id"
-		v-tooltip.right="instance.name"
-		:to="`/instance/${encodeURIComponent(instance.path)}`"
-		class="relative"
-	>
-		<Avatar
-			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-			size="28px"
-			:tint-by="instance.path"
-			:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-		/>
-		<div
-			v-if="instance.install_stage !== 'installed'"
-			class="absolute inset-0 flex items-center justify-center z-10"
-		>
-			<SpinnerIcon class="animate-spin w-4 h-4" />
-		</div>
-	</NavButton>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
-</template>
-
-<style scoped lang="scss"></style>

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

@@ -1,119 +1,125 @@
 <template>
-	<div class="action-groups">
-		<ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
-			<button ref="infoButton" @click="toggleCard()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
-		<div v-if="offline" class="status">
-			<UnplugIcon />
-			<div class="running-text">
-				<span> Offline </span>
-			</div>
-		</div>
-		<div v-if="selectedProcess" class="status">
-			<span class="circle running" />
-			<div ref="profileButton" class="running-text">
-				<router-link
-					class="text-primary"
-					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
-				>
-					{{ selectedProcess.profile.name }}
-				</router-link>
-				<div
-					v-if="currentProcesses.length > 1"
-					class="arrow button-base"
-					:class="{ rotate: showProfiles }"
-					@click="toggleProfiles()"
-				>
-					<DropdownIcon />
-				</div>
-			</div>
-			<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()">
-				<TerminalSquareIcon />
-			</Button>
-		</div>
-		<div v-else class="status">
-			<span class="circle stopped" />
-			<span class="running-text"> No instances running </span>
-		</div>
-	</div>
-	<transition name="download">
-		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
-			<div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
-				<h3 class="info-title">
-					{{ loadingBar.title }}
-				</h3>
-				<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
-				<div class="row">
-					{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
-					{{ loadingBar.message }}
-				</div>
-			</div>
-		</Card>
-	</transition>
-	<transition name="download">
-		<Card
-			v-if="showProfiles === true && currentProcesses.length > 0"
-			ref="profiles"
-			class="profile-card"
-		>
-			<Button
-				v-for="process in currentProcesses"
-				:key="process.uuid"
-				class="profile-button"
-				@click="selectProcess(process)"
-			>
-				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
-				<Button
-					v-tooltip="'Stop instance'"
-					icon-only
-					class="icon-button stop"
-					@click.stop="stop(process)"
-				>
-					<StopCircleIcon />
-				</Button>
-				<Button
-					v-tooltip="'View logs'"
-					icon-only
-					class="icon-button"
-					@click.stop="goToTerminal(process.profile.path)"
-				>
-					<TerminalSquareIcon />
-				</Button>
-			</Button>
-		</Card>
-	</transition>
+  <div class="action-groups">
+    <a href="https://support.modrinth.com" class="link">
+      <ChatIcon />
+      <span> Get support </span>
+    </a>
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
+    >
+      <DownloadIcon />
+    </Button>
+    <div v-if="offline" class="status">
+      <span class="circle stopped" />
+      <div class="running-text">
+        <span> Offline </span>
+      </div>
+    </div>
+    <div v-if="selectedProcess" class="status">
+      <span class="circle running" />
+      <div ref="profileButton" class="running-text">
+        <router-link :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`">
+          {{ selectedProcess.profile.name }}
+        </router-link>
+        <div
+          v-if="currentProcesses.length > 1"
+          class="arrow button-base"
+          :class="{ rotate: showProfiles }"
+          @click="toggleProfiles()"
+        >
+          <DropdownIcon />
+        </div>
+      </div>
+      <Button
+        v-tooltip="'Stop instance'"
+        icon-only
+        class="icon-button stop"
+        @click="stop(selectedProcess)"
+      >
+        <StopCircleIcon />
+      </Button>
+      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+        <TerminalSquareIcon />
+      </Button>
+      <Button
+        v-if="currentLoadingBars.length > 0"
+        ref="infoButton"
+        icon-only
+        class="icon-button show-card-icon"
+        @click="toggleCard()"
+      >
+        <DownloadIcon />
+      </Button>
+    </div>
+    <div v-else class="status">
+      <span class="circle stopped" />
+      <span class="running-text"> No instances running </span>
+    </div>
+  </div>
+  <transition name="download">
+    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.title }}
+        </h3>
+        <ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+        <div class="row">
+          {{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}% {{ loadingBar.message }}
+        </div>
+      </div>
+    </Card>
+  </transition>
+  <transition name="download">
+    <Card
+      v-if="showProfiles === true && currentProcesses.length > 0"
+      ref="profiles"
+      class="profile-card"
+    >
+      <Button
+        v-for="process in currentProcesses"
+        :key="process.uuid"
+        class="profile-button"
+        @click="selectProcess(process)"
+      >
+        <div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
+        <Button
+          v-tooltip="'Stop instance'"
+          icon-only
+          class="icon-button stop"
+          @click.stop="stop(process)"
+        >
+          <StopCircleIcon />
+        </Button>
+        <Button
+          v-tooltip="'View logs'"
+          icon-only
+          class="icon-button"
+          @click.stop="goToTerminal(process.profile.path)"
+        >
+          <TerminalSquareIcon />
+        </Button>
+      </Button>
+    </Card>
+  </transition>
 </template>
 
 <script setup>
-import {
-	DownloadIcon,
-	DropdownIcon,
-	StopCircleIcon,
-	TerminalSquareIcon,
-	UnplugIcon,
-} from '@modrinth/assets'
-import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
 import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { get_many } from '@/helpers/profile.js'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { useRouter } from 'vue-router'
 import { progress_bars_list } from '@/helpers/state.js'
-
-const { handleError } = injectNotificationManager()
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { handleError } from '@/store/notifications.js'
+import { ChatIcon } from '@/assets/icons'
+import { get_many } from '@/helpers/profile.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const router = useRouter()
 const card = ref(null)
@@ -128,347 +134,351 @@ const currentProcesses = ref([])
 const selectedProcess = ref()
 
 const refresh = async () => {
-	const processes = await getRunningProcesses().catch(handleError)
-	const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+  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]
-	}
+  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
+  offline.value = true
 })
 window.addEventListener('online', () => {
-	offline.value = false
+  offline.value = false
 })
 
 const unlistenProcess = await process_listener(async () => {
-	await refresh()
+  await refresh()
 })
 
 const stop = async (process) => {
-	try {
-		await killProcess(process.uuid).catch(handleError)
+  try {
+    await killProcess(process.uuid).catch(handleError)
 
-		trackEvent('InstanceStop', {
-			loader: process.profile.loader,
-			game_version: process.profile.game_version,
-			source: 'AppBar',
-		})
-	} catch (e) {
-		console.error(e)
-	}
-	await refresh()
+    trackEvent('InstanceStop', {
+      loader: process.profile.loader,
+      game_version: process.profile.game_version,
+      source: 'AppBar',
+    })
+  } catch (e) {
+    console.error(e)
+  }
+  await refresh()
 }
 
 const goToTerminal = (path) => {
-	router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
 }
 
 const currentLoadingBars = ref([])
 
 const refreshInfo = async () => {
-	const currentLoadingBarCount = currentLoadingBars.value.length
-	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError))
-		.map((x) => {
-			if (x.bar_type.type === 'java_download') {
-				x.title = 'Downloading Java ' + x.bar_type.version
-			}
-			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
-			}
+  const currentLoadingBarCount = currentLoadingBars.value.length
+  currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError)).map(
+    (x) => {
+      if (x.bar_type.type === 'java_download') {
+        x.title = 'Downloading Java ' + x.bar_type.version
+      }
+      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
-		})
-		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+      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
-	})
+  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) {
-		showCard.value = true
-	}
+  if (currentLoadingBars.value.length === 0) {
+    showCard.value = false
+  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+    showCard.value = true
+  }
 }
 
 await refreshInfo()
 const unlistenLoading = await loading_listener(async () => {
-	await refreshInfo()
+  await refreshInfo()
 })
 
 const selectProcess = (process) => {
-	selectedProcess.value = process
-	showProfiles.value = false
+  selectedProcess.value = process
+  showProfiles.value = false
 }
 
 const handleClickOutsideCard = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		card.value &&
-		card.value.$el !== event.target &&
-		!elements.includes(card.value.$el) &&
-		infoButton.value &&
-		!infoButton.value.contains(event.target)
-	) {
-		showCard.value = false
-	}
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    infoButton.value &&
+    !infoButton.value.contains(event.target)
+  ) {
+    showCard.value = false
+  }
 }
 
 const handleClickOutsideProfile = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		profiles.value &&
-		profiles.value.$el !== event.target &&
-		!elements.includes(profiles.value.$el) &&
-		!profileButton.value.contains(event.target)
-	) {
-		showProfiles.value = false
-	}
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    profiles.value &&
+    profiles.value.$el !== event.target &&
+    !elements.includes(profiles.value.$el) &&
+    !profileButton.value.contains(event.target)
+  ) {
+    showProfiles.value = false
+  }
 }
 
 const toggleCard = async () => {
-	showCard.value = !showCard.value
-	showProfiles.value = false
-	await refreshInfo()
+  showCard.value = !showCard.value
+  showProfiles.value = false
+  await refreshInfo()
 }
 
 const toggleProfiles = async () => {
-	if (currentProcesses.value.length === 1) return
-	showProfiles.value = !showProfiles.value
-	showCard.value = false
+  if (currentProcesses.value.length === 1) return
+  showProfiles.value = !showProfiles.value
+  showCard.value = false
 }
 
 onMounted(() => {
-	window.addEventListener('click', handleClickOutsideCard)
-	window.addEventListener('click', handleClickOutsideProfile)
+  window.addEventListener('click', handleClickOutsideCard)
+  window.addEventListener('click', handleClickOutsideProfile)
 })
 
 onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutsideCard)
-	window.removeEventListener('click', handleClickOutsideProfile)
-	unlistenProcess()
-	unlistenLoading()
+  window.removeEventListener('click', handleClickOutsideCard)
+  window.removeEventListener('click', handleClickOutsideProfile)
+  unlistenProcess()
+  unlistenLoading()
 })
 </script>
 
 <style scoped lang="scss">
 .action-groups {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-md);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-md);
 }
 
 .arrow {
-	transition: transform 0.2s ease-in-out;
-	display: flex;
-	align-items: center;
-	&.rotate {
-		transform: rotate(180deg);
-	}
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  &.rotate {
+    transform: rotate(180deg);
+  }
 }
 
 .status {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	border-radius: var(--radius-md);
-	border: 1px solid var(--color-divider);
-	padding: var(--gap-sm) var(--gap-lg);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-sm) var(--gap-lg);
 }
 
 .running-text {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-xs);
-	white-space: nowrap;
-	overflow: hidden;
-	-webkit-user-select: none; /* Safari */
-	-ms-user-select: none; /* IE 10 and IE 11 */
-	user-select: none;
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
 
-	&.clickable:hover {
-		cursor: pointer;
-	}
+  &.clickable:hover {
+    cursor: pointer;
+  }
 }
 
 .circle {
-	width: 0.5rem;
-	height: 0.5rem;
-	border-radius: 50%;
-	display: inline-block;
-	margin-right: 0.25rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.25rem;
 
-	&.running {
-		background-color: var(--color-brand);
-	}
+  &.running {
+    background-color: var(--color-brand);
+  }
 
-	&.stopped {
-		background-color: var(--color-base);
-	}
+  &.stopped {
+    background-color: var(--color-base);
+  }
 }
 
 .icon-button {
-	background-color: rgba(0, 0, 0, 0);
-	box-shadow: none;
-	width: 1.25rem !important;
-	height: 1.25rem !important;
+  background-color: rgba(0, 0, 0, 0);
+  box-shadow: none;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
 
-	svg {
-		min-width: 1.25rem;
-	}
+  svg {
+    min-width: 1.25rem;
+  }
 
-	&.stop {
-		color: var(--color-red);
-	}
+  &.stop {
+    color: var(--color-red);
+  }
 }
 
 .info-card {
-	position: absolute;
-	top: 3.5rem;
-	right: 0.5rem;
-	z-index: 9;
-	width: 20rem;
-	background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-raised);
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	overflow: auto;
-	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-divider);
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  width: 20rem;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
 
-	&.hidden {
-		transform: translateY(-100%);
-	}
+  &.hidden {
+    transform: translateY(-100%);
+  }
 }
 
 .loading-option {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
 
-	:hover {
-		background-color: var(--color-raised-bg-hover);
-	}
+  :hover {
+    background-color: var(--color-raised-bg-hover);
+  }
 }
 
 .loading-text {
-	display: flex;
-	flex-direction: column;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
 
-	.row {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 0.5rem;
-	}
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
 }
 
 .loading-icon {
-	width: 2.25rem;
-	height: 2.25rem;
-	display: block;
+  width: 2.25rem;
+  height: 2.25rem;
+  display: block;
 
-	:deep(svg) {
-		left: 1rem;
-		width: 2.25rem;
-		height: 2.25rem;
-	}
+  :deep(svg) {
+    left: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.show-card-icon {
+  color: var(--color-brand);
 }
 
 .download-enter-active,
 .download-leave-active {
-	transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
 }
 
 .download-enter-from,
 .download-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 
 .progress-bar {
-	width: 100%;
+  width: 100%;
 }
 
 .info-text {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 0.5rem;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
 }
 
 .info-title {
-	margin: 0;
+  margin: 0;
 }
 
 .profile-button {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-sm);
-	width: 100%;
-	background-color: var(--color-raised-bg);
-	box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: none;
 
-	.text {
-		margin-right: auto;
-	}
+  .text {
+    margin-right: auto;
+  }
 }
 
 .profile-card {
-	position: absolute;
-	top: 3.5rem;
-	right: 0.5rem;
-	z-index: 9;
-	background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-raised);
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-	transition: all 0.2s ease-in-out;
-	border: 1px solid var(--color-divider);
-	padding: var(--gap-md);
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-md);
 
-	&.hidden {
-		transform: translateY(-100%);
-	}
+  &.hidden {
+    transform: translateY(-100%);
+  }
 }
 
 .link {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-sm);
-	margin: 0;
-	color: var(--color-text);
-	text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  margin: 0;
+  color: var(--color-text);
+  text-decoration: none;
 }
 </style>

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

@@ -1,184 +1,197 @@
 <template>
-	<div
-		class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-		@click="
-			() => {
-				emit('open')
-				$router.push({
-					path: `/project/${project.project_id ?? project.id}`,
-					query: { i: props.instance ? props.instance.path : undefined },
-				})
-			}
-		"
-	>
-		<div class="icon w-[96px] h-[96px] relative">
-			<Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-		</div>
-		<div class="flex flex-col gap-2 overflow-hidden">
-			<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-				<span class="text-lg font-extrabold text-contrast m-0 leading-none">
-					{{ project.title }}
-				</span>
-				<span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-			</div>
-			<div class="m-0 line-clamp-2">
-				{{ project.description }}
-			</div>
-			<div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-				<TagsIcon class="h-4 w-4 shrink-0" />
-				<div
-					v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					<template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-						Client or server
-					</template>
-					<template
-						v-else-if="
-							(project.client_side === 'optional' || project.client_side === 'required') &&
-							(project.server_side === 'optional' || project.server_side === 'unsupported')
-						"
-					>
-						Client
-					</template>
-					<template
-						v-else-if="
-							(project.server_side === 'optional' || project.server_side === 'required') &&
-							(project.client_side === 'optional' || project.client_side === 'unsupported')
-						"
-					>
-						Server
-					</template>
-					<template
-						v-else-if="
-							project.client_side === 'unsupported' && project.server_side === 'unsupported'
-						"
-					>
-						Unsupported
-					</template>
-					<template
-						v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-					>
-						Client and server
-					</template>
-				</div>
-				<div
-					v-for="tag in categories"
-					:key="tag"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					{{ formatCategory(tag.name) }}
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-			<div class="flex items-center gap-2">
-				<DownloadIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.downloads) }}
-					<span class="text-secondary">downloads</span>
-				</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<HeartIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.follows ?? project.followers) }}
-					<span class="text-secondary">followers</span>
-				</span>
-			</div>
-			<div class="mt-auto relative">
-				<div class="absolute bottom-0 right-0 w-fit">
-					<ButtonStyled color="brand" type="outlined">
-						<button
-							:disabled="installed || installing"
-							class="shrink-0 no-wrap"
-							@click.stop="install()"
-						>
-							<template v-if="!installed">
-								<DownloadIcon v-if="modpack || instance" />
-								<PlusIcon v-else />
-							</template>
-							<CheckIcon v-else />
-							{{
-								installing
-									? 'Installing'
-									: installed
-										? 'Installed'
-										: modpack || instance
-											? 'Install'
-											: 'Add to an instance'
-							}}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</div>
+  <Card
+    class="card button-base"
+    @click="
+      () => {
+        emits('open')
+        $router.push({
+          path: `/project/${project.project_id ?? project.id}/`,
+          query: { i: props.instance ? props.instance.path : undefined },
+        })
+      }
+    "
+  >
+    <div class="icon">
+      <Avatar :src="project.icon_url" size="md" class="search-icon" />
+    </div>
+    <div class="content-wrapper">
+      <div class="title joined-text">
+        <h2>{{ project.title }}</h2>
+        <span v-if="project.author">by {{ project.author }}</span>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+      <div class="tags">
+        <Categories :categories="categories" :type="project.project_type">
+          <EnvironmentIndicator
+            :type-only="project.moderation"
+            :client-side="project.client_side"
+            :server-side="project.server_side"
+            :type="project.project_type"
+            :search="true"
+          />
+        </Categories>
+      </div>
+    </div>
+    <div class="stats button-group">
+      <div v-if="featured" class="badge">
+        <StarIcon />
+        Featured
+      </div>
+      <div class="badge">
+        <DownloadIcon />
+        {{ formatNumber(project.downloads) }}
+      </div>
+      <div class="badge">
+        <HeartIcon />
+        {{ formatNumber(project.follows ?? project.followers) }}
+      </div>
+      <div class="badge">
+        <CalendarIcon />
+        {{ formatCategory(dayjs(project.date_modified ?? project.updated).fromNow()) }}
+      </div>
+    </div>
+    <div v-if="project.author" class="install">
+      <Button color="primary" :disabled="installed || installing" @click.stop="install()">
+        <DownloadIcon v-if="!installed" />
+        <CheckIcon v-else />
+        {{ installing ? 'Installing' : installed ? 'Installed' : 'Install' }}
+      </Button>
+    </div>
+  </Card>
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+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 { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
+import { ref } from 'vue'
 import { install as installVersion } from '@/store/install.js'
 dayjs.extend(relativeTime)
 
-const { handleError } = injectNotificationManager()
-
-const router = useRouter()
-
 const props = defineProps({
-	backgroundImage: {
-		type: String,
-		default: null,
-	},
-	project: {
-		type: Object,
-		required: true,
-	},
-	categories: {
-		type: Array,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
-	featured: {
-		type: Boolean,
-		default: false,
-	},
-	installed: {
-		type: Boolean,
-		default: false,
-	},
+  backgroundImage: {
+    type: String,
+    default: null,
+  },
+  project: {
+    type: Object,
+    required: true,
+  },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+  featured: {
+    type: Boolean,
+    default: false,
+  },
+  installed: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const emit = defineEmits(['open', 'install'])
+const emits = defineEmits(['open'])
 
 const installing = ref(false)
+const installed = ref(props.installed)
 
 async function install() {
-	installing.value = true
-	await installVersion(
-		props.project.project_id ?? props.project.id,
-		null,
-		props.instance ? props.instance.path : null,
-		'SearchCard',
-		() => {
-			installing.value = false
-			emit('install', props.project.project_id ?? props.project.id)
-		},
-		(profile) => {
-			router.push(`/instance/${profile}`)
-		},
-	).catch(handleError)
+  installing.value = true
+  await installVersion(
+    props.project.project_id,
+    null,
+    props.instance ? props.instance.path : null,
+    'SearchCard',
+    (version) => {
+      installing.value = false
+
+      if (props.instance && version) {
+        installed.value = true
+      }
+    },
+  )
+}
+</script>
+
+<style scoped lang="scss">
+.icon {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  height: 6rem;
 }
 
-const modpack = computed(() => props.project.project_type === 'modpack')
-</script>
+.content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  grid-column: 2 / 4;
+  flex-direction: column;
+  grid-row: 1;
+  gap: 0.5rem;
+
+  .description {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.stats {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  justify-self: stretch;
+  align-self: start;
+}
+
+.install {
+  grid-column: 3 / 4;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
+}
+
+.card {
+  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: 6rem auto 7rem;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  &:active:not(&:disabled) {
+    scale: 0.98 !important;
+  }
+}
+
+.joined-text {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 0.5rem;
+  align-items: baseline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  h2 {
+    margin-bottom: 0 !important;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.button-group {
+  display: inline-flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+</style>

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

@@ -1,14 +1,12 @@
 <script setup>
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_project, get_version } from '@/helpers/cache.js'
 import { get_categories } from '@/helpers/tags.js'
+import { handleError } from '@/store/notifications.js'
+import { get_version, get_project } from '@/helpers/cache.js'
 import { install as installVersion } from '@/store/install.js'
-
-const { handleError } = injectNotificationManager()
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const confirmModal = ref(null)
 const project = ref(null)
@@ -17,93 +15,87 @@ const categories = ref(null)
 const installing = ref(false)
 
 defineExpose({
-	async show(event) {
-		if (event.event === 'InstallVersion') {
-			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 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()
-	},
+  async show(event) {
+    if (event.event === 'InstallVersion') {
+      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 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()
+  },
 })
 
 async function install() {
-	confirmModal.value.hide()
-	await installVersion(
-		project.value.id,
-		version.value.id,
-		null,
-		'URLConfirmModal',
-		() => {},
-		() => {},
-	).catch(handleError)
+  confirmModal.value.hide()
+  await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
 }
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
-		<div class="modal-body">
-			<SearchCard
-				:project="project"
-				class="project-card"
-				:categories="categories"
-				@open="confirmModal.hide()"
-			/>
-			<div class="button-row">
-				<div class="markdown-body">
-					<p>
-						Installing <code>{{ version.id }}</code> from Modrinth
-					</p>
-				</div>
-				<div class="button-group">
-					<Button :loading="installing" color="primary" @click="install">Install</Button>
-				</div>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+    <div class="modal-body">
+      <SearchCard
+        :project="project"
+        class="project-card"
+        :categories="categories"
+        @open="confirmModal.hide()"
+      />
+      <div class="button-row">
+        <div class="markdown-body">
+          <p>
+            Installing <code>{{ version.id }}</code> from Modrinth
+          </p>
+        </div>
+        <div class="button-group">
+          <Button :loading="installing" color="primary" @click="install">Install</Button>
+        </div>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--gap-md);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
 }
 
 .button-row {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: var(--gap-md);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
 }
 
 .button-group {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-sm);
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-sm);
 }
 
 .project-card {
-	background-color: var(--color-bg);
-	width: 100%;
+  background-color: var(--color-bg);
+  width: 100%;
 
-	:deep(.badge) {
-		border: 1px solid var(--color-raised-bg);
-		background-color: var(--color-accent-contrast);
-	}
+  :deep(.badge) {
+    border: 1px solid var(--color-raised-bg);
+    background-color: var(--color-accent-contrast);
+  }
 }
 </style>

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

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { DownloadIcon, ExternalIcon, RefreshCwIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, defineMessages, ProgressBar, useVIntl } from '@modrinth/ui'
-import { formatBytes } from '@modrinth/utils'
-import { ref } from 'vue'
-
-import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
-
-const { formatMessage } = useVIntl()
-
-const emit = defineEmits<{
-	(e: 'close' | 'restart' | 'download'): void
-}>()
-
-defineProps<{
-	version: string
-	size: number | null
-	metered: boolean
-}>()
-
-const downloading = ref(false)
-const { progress } = injectAppUpdateDownloadProgress()
-
-function download() {
-	emit('download')
-	downloading.value = true
-}
-
-const messages = defineMessages({
-	title: {
-		id: 'app.update-toast.title',
-		defaultMessage: 'Update available',
-	},
-	body: {
-		id: 'app.update-toast.body',
-		defaultMessage:
-			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
-	},
-	reload: {
-		id: 'app.update-toast.reload',
-		defaultMessage: 'Reload',
-	},
-	download: {
-		id: 'app.update-toast.download',
-		defaultMessage: 'Download ({size})',
-	},
-	downloading: {
-		id: 'app.update-toast.downloading',
-		defaultMessage: 'Downloading...',
-	},
-	changelog: {
-		id: 'app.update-toast.changelog',
-		defaultMessage: 'Changelog',
-	},
-	meteredBody: {
-		id: 'app.update-toast.body.metered',
-		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
-	},
-	downloadCompleteTitle: {
-		id: 'app.update-toast.title.download-complete',
-		defaultMessage: 'Download complete',
-	},
-	downloadedBody: {
-		id: 'app.update-toast.body.download-complete',
-		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
-	},
-})
-</script>
-<template>
-	<div
-		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-divider border-solid border-[2px]"
-		:class="{
-			'download-complete': progress === 1,
-		}"
-	>
-		<div class="flex min-w-[25rem] gap-4">
-			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
-				{{
-					formatMessage(metered && progress === 1 ? messages.downloadCompleteTitle : messages.title)
-				}}
-			</h2>
-			<ButtonStyled size="small" circular>
-				<button v-tooltip="formatMessage(commonMessages.closeButton)" @click="emit('close')">
-					<XIcon />
-				</button>
-			</ButtonStyled>
-		</div>
-		<p class="text-sm mt-2 mb-0">
-			{{
-				formatMessage(
-					metered
-						? progress === 1
-							? messages.downloadedBody
-							: messages.meteredBody
-						: messages.body,
-					{ version },
-				)
-			}}
-		</p>
-		<p
-			v-if="metered && progress < 1"
-			class="text-sm text-secondary mt-2 mb-0 flex items-center gap-1"
-		>
-			<template v-if="progress > 0">
-				<ProgressBar :progress="progress" class="max-w-[unset]" />
-			</template>
-		</p>
-		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button v-if="metered && progress < 1" :disabled="downloading" @click="download">
-					<SpinnerIcon v-if="downloading" class="animate-spin" />
-					<DownloadIcon v-else />
-					{{
-						formatMessage(downloading ? messages.downloading : messages.download, {
-							size: formatBytes(size ?? 0),
-						})
-					}}
-				</button>
-				<button v-else @click="emit('restart')">
-					<RefreshCwIcon /> {{ formatMessage(messages.reload) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a href="https://modrinth.com/news/changelog?filter=app">
-					{{ formatMessage(messages.changelog) }} <ExternalIcon />
-				</a>
-			</ButtonStyled>
-		</div>
-	</div>
-</template>

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

@@ -1,428 +0,0 @@
-<script setup lang="ts">
-import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	injectNotificationManager,
-	IntlFormatted,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, onUnmounted, ref, watch } from 'vue'
-
-import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { friend_listener } from '@/helpers/events'
-import {
-	add_friend,
-	friends,
-	type FriendWithUserData,
-	remove_friend,
-	transformFriends,
-} from '@/helpers/friends.ts'
-import type { ModrinthCredentials } from '@/helpers/mr_auth'
-
-const { formatMessage } = useVIntl()
-
-const { handleError } = injectNotificationManager()
-const formatRelativeTime = useRelativeTime()
-
-const props = defineProps<{
-	credentials: ModrinthCredentials | null
-	signIn: () => void
-}>()
-
-const userCredentials = computed(() => props.credentials)
-
-const search = ref('')
-const friendInvitesModal = ref()
-
-const username = ref('')
-const addFriendModal = ref()
-async function addFriendFromModal() {
-	addFriendModal.value.hide()
-	await add_friend(username.value).catch(handleError)
-	username.value = ''
-	await loadFriends()
-}
-
-async function addFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await add_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-async function removeFriend(friend: FriendWithUserData) {
-	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
-	if (id) {
-		await remove_friend(id).catch(handleError)
-		await loadFriends()
-	}
-}
-
-const userFriends = ref<FriendWithUserData[]>([])
-const sortedFriends = computed<FriendWithUserData[]>(() =>
-	userFriends.value.slice().sort((a, b) => {
-		if (a.last_updated === null && b.last_updated === null) {
-			return 0 // Both are null, equal in sorting
-		}
-		if (a.last_updated === null) {
-			return 1 // `a` is null, move it after `b`
-		}
-		if (b.last_updated === null) {
-			return -1 // `b` is null, move it after `a`
-		}
-		// Both are non-null, sort by date
-		return b.last_updated.diff(a.last_updated)
-	}),
-)
-const filteredFriends = computed<FriendWithUserData[]>(() =>
-	sortedFriends.value.filter((x) =>
-		x.username.trim().toLowerCase().includes(search.value.trim().toLowerCase()),
-	),
-)
-
-const activeFriends = computed<FriendWithUserData[]>(() =>
-	filteredFriends.value.filter((x) => !!x.status && x.online && x.accepted),
-)
-const onlineFriends = computed<FriendWithUserData[]>(() =>
-	filteredFriends.value.filter((x) => x.online && !x.status && x.accepted),
-)
-const offlineFriends = computed<FriendWithUserData[]>(() =>
-	filteredFriends.value.filter((x) => !x.online && x.accepted),
-)
-const pendingFriends = computed(() =>
-	filteredFriends.value
-		.filter((x) => !x.accepted && x.id !== userCredentials.value?.user_id)
-		.slice()
-		.sort((a, b) => b.created.diff(a.created)),
-)
-const incomingRequests = computed(() =>
-	userFriends.value
-		.filter((x) => !x.accepted && x.id === userCredentials.value?.user_id)
-		.slice()
-		.sort((a, b) => b.created.diff(a.created)),
-)
-
-const loading = ref(true)
-async function loadFriends(timeout = false) {
-	loading.value = timeout
-
-	try {
-		const friendsList = await friends()
-		userFriends.value = await transformFriends(friendsList, userCredentials.value)
-		loading.value = false
-	} catch (e) {
-		console.error('Error loading friends', e)
-		if (timeout) {
-			setTimeout(() => loadFriends(), 15 * 1000)
-		}
-	}
-}
-
-watch(
-	userCredentials,
-	() => {
-		if (userCredentials.value === undefined) {
-			userFriends.value = []
-			loading.value = false
-		} else if (userCredentials.value === null) {
-			userFriends.value = []
-			loading.value = false
-		} else {
-			loadFriends(true)
-		}
-	},
-	{ immediate: true },
-)
-
-const unlisten = await friend_listener(() => loadFriends())
-onUnmounted(() => {
-	unlisten()
-})
-
-const messages = defineMessages({
-	addFriend: {
-		id: 'friends.action.add-friend',
-		defaultMessage: 'Add a friend',
-	},
-	addingAFriend: {
-		id: 'friends.add-friend.title',
-		defaultMessage: 'Adding a friend',
-	},
-	usernameTitle: {
-		id: 'friends.add-friend.username.title',
-		defaultMessage: "What's your friend's Modrinth username?",
-	},
-	usernameDescription: {
-		id: 'friends.add-friend.username.description',
-		defaultMessage: 'It may be different from their Minecraft username!',
-	},
-	usernamePlaceholder: {
-		id: 'friends.add-friend.username.placeholder',
-		defaultMessage: 'Enter Modrinth username...',
-	},
-	sendFriendRequest: {
-		id: 'friends.add-friend.submit',
-		defaultMessage: 'Send friend request',
-	},
-	viewFriendRequests: {
-		id: 'friends.action.view-friend-requests',
-		defaultMessage: '{count} friend {count, plural, one {request} other {requests}}',
-	},
-	searchFriends: {
-		id: 'friends.search-friends-placeholder',
-		defaultMessage: 'Search friends...',
-	},
-	friends: {
-		id: 'friends.heading',
-		defaultMessage: 'Friends',
-	},
-	pending: {
-		id: 'friends.heading.pending',
-		defaultMessage: 'Pending',
-	},
-	active: {
-		id: 'friends.heading.active',
-		defaultMessage: 'Active',
-	},
-	online: {
-		id: 'friends.heading.online',
-		defaultMessage: 'Online',
-	},
-	offline: {
-		id: 'friends.heading.offline',
-		defaultMessage: 'Offline',
-	},
-	noFriendsMatch: {
-		id: 'friends.no-friends-match',
-		defaultMessage: `No friends matching ''{query}''`,
-	},
-	signInToAddFriends: {
-		id: 'friends.sign-in-to-add-friends',
-		defaultMessage:
-			"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
-	},
-	addFriendsToShare: {
-		id: 'friends.add-friends-to-share',
-		defaultMessage: "<link>Add friends</link> to see what they're playing!",
-	},
-})
-</script>
-
-<template>
-	<ModalWrapper ref="friendInvitesModal" header="View friend requests">
-		<p v-if="incomingRequests.length === 0">You have no pending friend requests :C</p>
-		<div v-else class="flex flex-col gap-4 min-w-[40rem]">
-			<div v-for="friend in incomingRequests" :key="friend.username" class="flex gap-2">
-				<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-				<div class="grid grid-cols-[1fr_auto] w-full gap-4">
-					<div>
-						<p class="m-0">
-							<template v-if="friend.id === userCredentials?.user_id">
-								<span class="text-contrast">{{ friend.username }}</span> sent you a friend request
-							</template>
-							<template v-else>
-								You sent <span class="font-bold">{{ friend.username }}</span> a friend request
-							</template>
-						</p>
-						<p class="m-0 text-sm text-secondary">
-							{{ formatRelativeTime(friend.created.toISOString()) }}
-						</p>
-					</div>
-					<div class="flex gap-2">
-						<template v-if="friend.id === userCredentials?.user_id">
-							<ButtonStyled color="brand">
-								<button @click="addFriend(friend)">
-									<UserPlusIcon />
-									Accept
-								</button>
-							</ButtonStyled>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Ignore
-								</button>
-							</ButtonStyled>
-						</template>
-						<template v-else>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Cancel
-								</button>
-							</ButtonStyled>
-						</template>
-					</div>
-				</div>
-			</div>
-		</div>
-	</ModalWrapper>
-	<ModalWrapper ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
-		<div class="min-w-[30rem]">
-			<h2 class="m-0 text-base font-medium text-primary">
-				{{ formatMessage(messages.usernameTitle) }}
-			</h2>
-			<p class="m-0 mt-1 text-sm text-secondary leading-tight">
-				{{ formatMessage(messages.usernameDescription) }}
-			</p>
-			<div class="flex items-center gap-2 mt-4">
-				<div class="iconified-input flex-1">
-					<UserIcon aria-hidden="true" />
-					<input
-						v-model="username"
-						type="text"
-						:placeholder="formatMessage(messages.usernamePlaceholder)"
-						@keyup.enter="addFriendFromModal"
-					/>
-				</div>
-				<ButtonStyled color="brand">
-					<button :disabled="username.length === 0" @click="addFriendFromModal">
-						<SendIcon />
-						{{ formatMessage(messages.sendFriendRequest) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
-		<template v-if="sortedFriends.length > 0">
-			<ButtonStyled circular type="transparent">
-				<button
-					v-tooltip="formatMessage(messages.addFriend)"
-					:aria-label="formatMessage(messages.addFriend)"
-					@click="addFriendModal.show"
-				>
-					<UserPlusIcon />
-				</button>
-			</ButtonStyled>
-			<div class="iconified-input flex-1">
-				<input
-					v-model="search"
-					type="text"
-					class="friends-search-bar flex w-full"
-					:placeholder="formatMessage(messages.searchFriends)"
-					@keyup.esc="search = ''"
-				/>
-				<button
-					v-if="search"
-					v-tooltip="formatMessage(commonMessages.clearButton)"
-					class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
-					@click="search = ''"
-				>
-					<XIcon />
-				</button>
-			</div>
-		</template>
-		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
-			{{ formatMessage(messages.friends) }}
-		</h3>
-		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
-			<button
-				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-				class="relative"
-				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-				@click="friendInvitesModal.show"
-			>
-				<MailIcon />
-				<span
-					v-if="incomingRequests.length > 0"
-					aria-hidden="true"
-					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
-				>
-					{{ incomingRequests.length }}
-				</span>
-			</button>
-		</ButtonStyled>
-	</div>
-	<div class="flex flex-col gap-3">
-		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
-			{{ formatMessage(messages.friends) }}
-		</h3>
-		<template v-if="loading">
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
-				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
-				<div class="flex flex-col w-full">
-					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
-					<div class="h-2.5 bg-button-bg rounded-full w-3/4"></div>
-				</div>
-			</div>
-		</template>
-		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm ml-4 mr-1">
-				<div v-if="!userCredentials">
-					<IntlFormatted :message-id="messages.signInToAddFriends">
-						<template #link="{ children }">
-							<span class="font-semibold text-brand cursor-pointer" @click="signIn">
-								<component :is="() => children" />
-							</span>
-						</template>
-					</IntlFormatted>
-				</div>
-				<div v-else>
-					<IntlFormatted :message-id="messages.addFriendsToShare">
-						<template #link="{ children }">
-							<span class="font-semibold text-brand cursor-pointer" @click="addFriendModal.show">
-								<component :is="() => children" />
-							</span>
-						</template>
-					</IntlFormatted>
-				</div>
-			</div>
-		</template>
-		<template v-else>
-			<FriendsSection
-				v-if="activeFriends.length > 0"
-				:is-searching="!!search"
-				open-by-default
-				:friends="activeFriends"
-				:heading="formatMessage(messages.active)"
-				:remove-friend="removeFriend"
-			/>
-			<FriendsSection
-				v-if="onlineFriends.length > 0"
-				:is-searching="!!search"
-				open-by-default
-				:friends="onlineFriends"
-				:heading="formatMessage(messages.online)"
-				:remove-friend="removeFriend"
-			/>
-			<FriendsSection
-				v-if="offlineFriends.length > 0"
-				:is-searching="!!search"
-				:open-by-default="activeFriends.length + onlineFriends.length < 3"
-				:friends="offlineFriends"
-				:heading="formatMessage(messages.offline)"
-				:remove-friend="removeFriend"
-			/>
-			<FriendsSection
-				v-if="pendingFriends.length > 0"
-				:is-searching="!!search"
-				open-by-default
-				:friends="pendingFriends"
-				:heading="formatMessage(messages.pending)"
-				:remove-friend="removeFriend"
-			/>
-			<p v-if="filteredFriends.length === 0 && search" class="text-sm text-secondary my-1 mx-4">
-				{{ formatMessage(messages.noFriendsMatch, { query: search }) }}
-			</p>
-		</template>
-	</div>
-</template>
-<style scoped>
-.friends-search-bar {
-	background: none;
-	border: 2px solid var(--color-button-bg) !important;
-	padding: 8px;
-	border-radius: 12px;
-	height: 36px;
-}
-
-.friends-search-bar::placeholder {
-	@apply text-sm font-normal;
-}
-</style>

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

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
-import {
-	Accordion,
-	Avatar,
-	ButtonStyled,
-	defineMessages,
-	OverflowMenu,
-	useVIntl,
-} from '@modrinth/ui'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { useTemplateRef } from 'vue'
-
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { FriendWithUserData } from '@/helpers/friends.ts'
-
-const { formatMessage } = useVIntl()
-
-const props = withDefaults(
-	defineProps<{
-		friends: FriendWithUserData[]
-		heading: string
-		removeFriend: (friend: FriendWithUserData) => Promise<void>
-		isSearching?: boolean
-		openByDefault?: boolean
-	}>(),
-	{
-		isSearching: false,
-		openByDefault: false,
-	},
-)
-
-function createContextMenuOptions(friend: FriendWithUserData) {
-	if (friend.accepted) {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'remove-friend',
-				color: 'danger',
-			},
-		]
-	} else {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'cancel-request',
-			},
-		]
-	}
-}
-
-function openProfile(username: string) {
-	openUrl('https://modrinth.com/user/' + username)
-}
-
-const friendOptions = useTemplateRef('friendOptions')
-async function handleFriendOptions(args: { item: FriendWithUserData; option: string }) {
-	switch (args.option) {
-		case 'remove-friend':
-		case 'cancel-request':
-			await props.removeFriend(args.item)
-			break
-		case 'view-profile':
-			openProfile(args.item.username)
-	}
-}
-
-const messages = defineMessages({
-	removeFriend: {
-		id: 'friends.friend.remove-friend',
-		defaultMessage: 'Remove friend',
-	},
-	heading: {
-		id: 'friends.section.heading',
-		defaultMessage: '{title} - {count}',
-	},
-	friendRequestSent: {
-		id: 'friends.friend.request-sent',
-		defaultMessage: 'Friend request sent',
-	},
-	cancelRequest: {
-		id: 'friends.friend.cancel-request',
-		defaultMessage: 'Cancel request',
-	},
-	viewProfile: {
-		id: 'friends.friend.view-profile',
-		defaultMessage: 'View profile',
-	},
-})
-</script>
-
-<template>
-	<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
-		<template #view-profile>
-			<UserIcon />
-			{{ formatMessage(messages.viewProfile) }}
-		</template>
-		<template #remove-friend> <TrashIcon /> {{ formatMessage(messages.removeFriend) }} </template>
-		<template #cancel-request> <XIcon /> {{ formatMessage(messages.cancelRequest) }} </template>
-	</ContextMenu>
-	<Accordion
-		:open-by-default="openByDefault"
-		:force-open="isSearching"
-		:button-class="
-			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
-			(isSearching
-				? ''
-				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
-		"
-	>
-		<template #title>
-			<h3 class="text-base text-primary font-medium m-0">
-				{{ formatMessage(messages.heading, { title: heading, count: friends.length }) }}
-			</h3>
-		</template>
-		<template #default>
-			<div class="pt-3 flex flex-col gap-1">
-				<div
-					v-for="friend in friends"
-					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
-					@contextmenu.prevent.stop="
-						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
-					"
-				>
-					<div class="relative">
-						<Avatar
-							:src="friend.avatar"
-							:class="{ grayscale: !friend.online && friend.accepted }"
-							class="w-12 h-12 rounded-full"
-							size="32px"
-							circle
-						/>
-						<span
-							v-if="friend.online"
-							aria-hidden="true"
-							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-						/>
-					</div>
-					<div class="flex flex-col">
-						<span
-							class="text-sm m-0"
-							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
-						>
-							{{ friend.username }}
-						</span>
-						<span v-if="!friend.accepted" class="m-0 text-xs">
-							{{ formatMessage(messages.friendRequestSent) }}
-						</span>
-						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-					</div>
-					<ButtonStyled v-if="friend.accepted" circular type="transparent">
-						<OverflowMenu
-							class="opacity-0 group-hover:opacity-100 transition-opacity"
-							:options="[
-								{
-									id: 'view-profile',
-									action: () => openProfile(friend.username),
-								},
-								{
-									id: 'remove-friend',
-									action: () => removeFriend(friend),
-									color: 'red',
-								},
-							]"
-						>
-							<MoreVerticalIcon />
-							<template #view-profile>
-								<UserIcon />
-								{{ formatMessage(messages.viewProfile) }}
-							</template>
-							<template #remove-friend>
-								<TrashIcon />
-								{{ formatMessage(messages.removeFriend) }}
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled v-else type="transparent" circular>
-						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
-							<XIcon />
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</template>
-	</Accordion>
-</template>

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

@@ -1,72 +1,63 @@
 <template>
-	<ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
-		<div class="modal-body">
-			<p>
-				This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
-				you're trying to install it on. Are you sure you want to continue? Dependencies will not be
-				installed.
-			</p>
-			<table>
-				<thead>
-					<tr class="header">
-						<th>{{ instance?.name }}</th>
-						<th>{{ project.title }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr class="content">
-						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
-						<td>
-							<multiselect
-								v-if="versions?.length > 1"
-								v-model="selectedVersion"
-								:options="versions"
-								:searchable="true"
-								placeholder="Select version"
-								open-direction="top"
-								:show-labels="false"
-								:custom-label="
-									(version) =>
-										`${version?.name} (${version?.loaders
-											.map((name) => formatCategory(name))
-											.join(', ')} - ${version?.game_versions.join(', ')})`
-								"
-								:max-height="150"
-							/>
-							<span v-else>
-								<span>
-									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
-									}}
-									- {{ selectedVersion?.game_versions.join(', ') }})
-								</span>
-							</span>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-			<div class="button-group">
-				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
-				<Button color="primary" :disabled="installing" @click="install()">
-					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
-				</Button>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
+    <div class="modal-body">
+      <p>
+        This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
+        you're trying to install it on. Are you sure you want to continue? Dependencies will not be
+        installed.
+      </p>
+      <table>
+        <tr class="header">
+          <th>{{ instance?.name }}</th>
+          <th>{{ project.title }}</th>
+        </tr>
+        <tr class="content">
+          <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
+          <td>
+            <DropdownSelect
+              v-if="versions?.length > 1"
+              v-model="selectedVersion"
+              :options="versions"
+              placeholder="Select version"
+              name="Version select"
+              :display-name="
+                (version) =>
+                  `${version?.name} (${version?.loaders
+                    .map((name) => formatCategory(name))
+                    .join(', ')} - ${version?.game_versions.join(', ')})`
+              "
+              render-up
+            />
+            <span v-else>
+              <span>
+                {{ selectedVersion?.name }} ({{
+                  selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+                }}
+                - {{ selectedVersion?.game_versions.join(', ') }})
+              </span>
+            </span>
+          </td>
+        </tr>
+      </table>
+      <div class="button-group">
+        <Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()">
+          <DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+        </Button>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-import { ref } from 'vue'
-import Multiselect from 'vue-multiselect'
-
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, DropdownSelect } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
 import { add_project_from_version as installMod } from '@/helpers/profile'
-
-const { handleError } = injectNotificationManager()
+import { ref } from 'vue'
+import { handleError } from '@/store/state.js'
+import { trackEvent } from '@/helpers/analytics'
 
 const instance = ref(null)
 const project = ref(null)
@@ -78,91 +69,92 @@ const installing = ref(false)
 const onInstall = ref(() => {})
 
 defineExpose({
-	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
-		instance.value = instanceVal
-		versions.value = projectVersions
-		selectedVersion.value = selected ?? projectVersions[0]
+  show: (instanceVal, projectVal, projectVersions, callback) => {
+    instance.value = instanceVal
+    versions.value = projectVersions
+    selectedVersion.value = projectVersions[0]
 
-		project.value = projectVal
+    project.value = projectVal
 
-		onInstall.value = callback
-		installing.value = false
+    onInstall.value = callback
+    installing.value = false
 
-		incompatibleModal.value.show()
+    incompatibleModal.value.show()
 
-		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
-	},
+    trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+  },
 })
 
 const install = async () => {
-	installing.value = true
-	await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
-	installing.value = false
-	onInstall.value(selectedVersion.value.id)
-	incompatibleModal.value.hide()
+  installing.value = true
+  await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
+  installing.value = false
+  onInstall.value(selectedVersion.value.id)
+  incompatibleModal.value.hide()
 
-	trackEvent('ProjectInstall', {
-		loader: instance.value.loader,
-		game_version: instance.value.game_version,
-		id: project.value,
-		version_id: selectedVersion.value.id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectIncompatibilityWarningModal',
-	})
+  trackEvent('ProjectInstall', {
+    loader: instance.value.loader,
+    game_version: instance.value.game_version,
+    id: project.value,
+    version_id: selectedVersion.value.id,
+    project_type: project.value.project_type,
+    title: project.value.title,
+    source: 'ProjectIncompatibilityWarningModal',
+  })
 }
 </script>
 
 <style lang="scss" scoped>
 .data {
-	text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 table {
-	width: 100%;
-	border-radius: var(--radius-lg);
-	border-collapse: collapse;
-	box-shadow: 0 0 0 1px var(--color-button-bg);
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border-collapse: collapse;
+  box-shadow: 0 0 0 1px var(--color-button-bg);
 }
 
 th {
-	text-align: left;
-	padding: 1rem;
-	background-color: var(--color-bg);
-	overflow: hidden;
-	border-bottom: 1px solid var(--color-button-bg);
+  text-align: left;
+  padding: 1rem;
+  background-color: var(--color-bg);
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-button-bg);
 }
 
 th:first-child {
-	border-top-left-radius: var(--radius-lg);
-	border-right: 1px solid var(--color-button-bg);
+  border-top-left-radius: var(--radius-lg);
+  border-right: 1px solid var(--color-button-bg);
 }
 
 th:last-child {
-	border-top-right-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
 
 td {
-	padding: 1rem;
+  padding: 1rem;
 }
 
 td:first-child {
-	border-right: 1px solid var(--color-button-bg);
+  border-right: 1px solid var(--color-button-bg);
 }
 
 .button-group {
-	display: flex;
-	justify-content: flex-end;
-	gap: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
 }
 
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 
-	:deep(.animated-dropdown .options) {
-		max-height: 13.375rem;
-	}
+  :deep(.animated-dropdown .options) {
+    max-height: 13.375rem;
+  }
 }
 </style>

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

@@ -1,13 +1,11 @@
 <script setup>
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
-import { create_profile_and_install as pack_install } from '@/helpers/pack'
-
-const { handleError } = injectNotificationManager()
+import { handleError } from '@/store/state.js'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const versionId = ref()
 const project = ref()
@@ -15,63 +13,61 @@ const confirmModal = ref(null)
 const installing = ref(false)
 
 const onInstall = ref(() => {})
-const onCreateInstance = ref(() => {})
 
 defineExpose({
-	show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
-		project.value = projectVal
-		versionId.value = versionIdVal
-		installing.value = false
-		confirmModal.value.show()
+  show: (projectVal, versionIdVal, callback) => {
+    project.value = projectVal
+    versionId.value = versionIdVal
+    installing.value = false
+    confirmModal.value.show()
 
-		onInstall.value = callback
-		onCreateInstance.value = createInstanceCallback
+    onInstall.value = callback
 
-		trackEvent('PackInstallStart')
-	},
+    trackEvent('PackInstallStart')
+  },
 })
 
 async function install() {
-	installing.value = true
-	confirmModal.value.hide()
+  installing.value = true
+  confirmModal.value.hide()
 
-	await pack_install(
-		project.value.id,
-		versionId.value,
-		project.value.title,
-		project.value.icon_url,
-		onCreateInstance.value,
-	).catch(handleError)
-	trackEvent('PackInstall', {
-		id: project.value.id,
-		version_id: versionId.value,
-		title: project.value.title,
-		source: 'ConfirmModal',
-	})
+  await pack_install(
+    project.value.id,
+    versionId.value,
+    project.value.title,
+    project.value.icon_url,
+  ).catch(handleError)
+  trackEvent('PackInstall', {
+    id: project.value.id,
+    version_id: versionId.value,
+    title: project.value.title,
+    source: 'ConfirmModal',
+  })
 
-	onInstall.value(versionId.value)
-	installing.value = false
+  onInstall.value(versionId.value)
+  installing.value = false
 }
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
-		<div class="modal-body">
-			<p>You already have this modpack installed. Are you sure you want to install it again?</p>
-			<div class="input-group push-right">
-				<Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
-				<Button color="primary" :disabled="installing" @click="install()"
-					><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
-				>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
+    <div class="modal-body">
+      <p>You already have this modpack installed. Are you sure you want to install it again?</p>
+      <div class="input-group push-right">
+        <Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()"
+          ><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
+        >
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style lang="scss" scoped>
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 }
 </style>

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

@@ -1,34 +1,29 @@
 <script setup>
 import {
-	CheckIcon,
-	DownloadIcon,
-	PlusIcon,
-	RightArrowIcon,
-	UploadIcon,
-	XIcon,
+  DownloadIcon,
+  PlusIcon,
+  UploadIcon,
+  XIcon,
+  RightArrowIcon,
+  CheckIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { open } from '@tauri-apps/plugin-dialog'
+import { Avatar, Button, Card } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
 import {
-	add_project_from_version as installMod,
-	check_installed,
-	create,
-	get,
-	list,
+  add_project_from_version as installMod,
+  check_installed,
+  get,
+  list,
+  create,
 } from '@/helpers/profile'
-import {
-	findPreferredVersion,
-	installVersionDependencies,
-	isVersionCompatible,
-} from '@/store/install.js'
+import { open } from '@tauri-apps/plugin-dialog'
+import { installVersionDependencies } from '@/store/install.js'
+import { handleError } from '@/store/notifications.js'
+import { useRouter } from 'vue-router'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { trackEvent } from '@/helpers/analytics'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
-const { handleError } = injectNotificationManager()
 const router = useRouter()
 
 const versions = ref()
@@ -48,351 +43,365 @@ const creatingInstance = ref(false)
 const profiles = ref([])
 
 const shownProfiles = computed(() =>
-	profiles.value
-		.filter((profile) => {
-			return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-		})
-		.filter((profile) => {
-			const version = {
-				game_versions: versions.value.flatMap((v) => v.game_versions),
-				loaders: versions.value.flatMap((v) => v.loaders),
-			}
-			return isVersionCompatible(version, project.value, profile)
-		}),
+  profiles.value
+    .filter((profile) => {
+      return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      const loaders = versions.value.flatMap((v) => v.loaders)
+
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
+        (project.value.project_type === 'mod'
+          ? loaders.includes(profile.loader) || loaders.includes('minecraft')
+          : true)
+      )
+    }),
 )
 
 const onInstall = ref(() => {})
 
 defineExpose({
-	show: async (projectVal, versionsVal, callback) => {
-		project.value = projectVal
-		versions.value = versionsVal
-		searchFilter.value = ''
+  show: async (projectVal, versionsVal, callback) => {
+    project.value = projectVal
+    versions.value = versionsVal
+    searchFilter.value = ''
 
-		showCreation.value = false
-		name.value = null
-		icon.value = null
-		display_icon.value = null
-		gameVersion.value = null
-		loader.value = null
+    showCreation.value = false
+    name.value = null
+    icon.value = null
+    display_icon.value = null
+    gameVersion.value = null
+    loader.value = null
 
-		onInstall.value = callback
+    onInstall.value = callback
 
-		const profilesVal = await list().catch(handleError)
-		for (const profile of profilesVal) {
-			profile.installing = false
-			profile.installedMod = await check_installed(profile.path, project.value.id).catch(
-				handleError,
-			)
-		}
-		profiles.value = profilesVal
+    const profilesVal = await list().catch(handleError)
+    for (const profile of profilesVal) {
+      profile.installing = false
+      profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+        handleError,
+      )
+    }
+    profiles.value = profilesVal
 
-		installModal.value.show()
+    installModal.value.show()
 
-		trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
-	},
+    trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
+  },
 })
 
 async function install(instance) {
-	instance.installing = true
-	const version = findPreferredVersion(versions.value, project.value, instance)
+  instance.installing = true
+  const version = versions.value.find((v) => {
+    return (
+      v.game_versions.includes(instance.game_version) &&
+      (project.value.project_type === 'mod'
+        ? v.loaders.includes(instance.loader) || v.loaders.includes('minecraft')
+        : true)
+    )
+  })
 
-	if (!version) {
-		instance.installing = false
-		handleError('No compatible version found')
-		return
-	}
+  if (!version) {
+    instance.installing = false
+    handleError('No compatible version found')
+    return
+  }
 
-	await installMod(instance.path, version.id).catch(handleError)
-	await installVersionDependencies(instance, version).catch(handleError)
+  await installMod(instance.path, version.id).catch(handleError)
+  await installVersionDependencies(instance, version)
 
-	instance.installedMod = true
-	instance.installing = false
+  instance.installedMod = true
+  instance.installing = false
 
-	trackEvent('ProjectInstall', {
-		loader: instance.loader,
-		game_version: instance.game_version,
-		id: project.value.id,
-		version_id: version.id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectInstallModal',
-	})
+  trackEvent('ProjectInstall', {
+    loader: instance.loader,
+    game_version: instance.game_version,
+    id: project.value.id,
+    version_id: version.id,
+    project_type: project.value.project_type,
+    title: project.value.title,
+    source: 'ProjectInstallModal',
+  })
 
-	onInstall.value(version.id)
+  onInstall.value(version.id)
 }
 
 const toggleCreation = () => {
-	showCreation.value = !showCreation.value
-	name.value = null
-	icon.value = null
-	display_icon.value = null
-	gameVersion.value = null
-	loader.value = null
+  showCreation.value = !showCreation.value
+  name.value = null
+  icon.value = null
+  display_icon.value = null
+  gameVersion.value = null
+  loader.value = null
 
-	if (showCreation.value) {
-		trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
-	}
+  if (showCreation.value) {
+    trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
+  }
 }
 
 const upload_icon = async () => {
-	const res = await open({
-		multiple: false,
-		filters: [
-			{
-				name: 'Image',
-				extensions: ['png', 'jpeg'],
-			},
-		],
-	})
-	icon.value = res.path ?? res
+  const res = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg'],
+      },
+    ],
+  })
+  icon.value = res.path ?? res
 
-	if (!icon.value) return
-	display_icon.value = convertFileSrc(icon.value)
+  if (!icon.value) return
+  display_icon.value = convertFileSrc(icon.value)
 }
 
 const reset_icon = () => {
-	icon.value = null
-	display_icon.value = null
+  icon.value = null
+  display_icon.value = null
 }
 
 const createInstance = async () => {
-	creatingInstance.value = true
+  creatingInstance.value = true
 
-	const loader =
-		versions.value[0].loaders[0] !== 'forge' &&
-		versions.value[0].loaders[0] !== 'fabric' &&
-		versions.value[0].loaders[0] !== 'quilt'
-			? 'vanilla'
-			: versions.value[0].loaders[0]
+  const loader =
+    versions.value[0].loaders[0] !== 'forge' &&
+    versions.value[0].loaders[0] !== 'fabric' &&
+    versions.value[0].loaders[0] !== 'quilt'
+      ? 'vanilla'
+      : versions.value[0].loaders[0]
 
-	const id = await create(
-		name.value,
-		versions.value[0].game_versions[0],
-		loader,
-		'latest',
-		icon.value,
-	).catch(handleError)
+  const id = await create(
+    name.value,
+    versions.value[0].game_versions[0],
+    loader,
+    'latest',
+    icon.value,
+  ).catch(handleError)
 
-	await installMod(id, versions.value[0].id).catch(handleError)
+  await installMod(id, versions.value[0].id).catch(handleError)
 
-	await router.push(`/instance/${encodeURIComponent(id)}/`)
+  await router.push(`/instance/${encodeURIComponent(id)}/`)
 
-	const instance = await get(id, true)
-	await installVersionDependencies(instance, versions.value[0]).catch(handleError)
+  const instance = await get(id, true)
+  await installVersionDependencies(instance, versions.value[0])
 
-	trackEvent('InstanceCreate', {
-		profile_name: name.value,
-		game_version: versions.value[0].game_versions[0],
-		loader: loader,
-		loader_version: 'latest',
-		has_icon: !!icon.value,
-		source: 'ProjectInstallModal',
-	})
+  trackEvent('InstanceCreate', {
+    profile_name: name.value,
+    game_version: versions.value[0].game_versions[0],
+    loader: loader,
+    loader_version: 'latest',
+    has_icon: !!icon.value,
+    source: 'ProjectInstallModal',
+  })
 
-	trackEvent('ProjectInstall', {
-		loader: loader,
-		game_version: versions.value[0].game_versions[0],
-		id: project.value,
-		version_id: versions.value[0].id,
-		project_type: project.value.project_type,
-		title: project.value.title,
-		source: 'ProjectInstallModal',
-	})
+  trackEvent('ProjectInstall', {
+    loader: loader,
+    game_version: versions.value[0].game_versions[0],
+    id: project.value,
+    version_id: versions.value[0].id,
+    project_type: project.value.project_type,
+    title: project.value.title,
+    source: 'ProjectInstallModal',
+  })
 
-	onInstall.value(versions.value[0].id)
+  onInstall.value(versions.value[0].id)
 
-	if (installModal.value) installModal.value.hide()
-	creatingInstance.value = false
+  if (installModal.value) installModal.value.hide()
+  creatingInstance.value = false
 }
 </script>
 
 <template>
-	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
-		<div class="modal-body">
-			<input
-				v-model="searchFilter"
-				autocomplete="off"
-				type="text"
-				class="search"
-				placeholder="Search for an instance"
-			/>
-			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
-				<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.icon_path ? convertFileSrc(profile.icon_path) : null"
-							class="profile-image"
-						/>
-						{{ profile.name }}
-					</router-link>
-					<div
-						v-tooltip="
-							profile.linked_data?.locked && !profile.installedMod
-								? 'Unpair or unlock an instance to add mods.'
-								: ''
-						"
-					>
-						<Button
-							:disabled="profile.installedMod || profile.installing"
-							@click="install(profile)"
-						>
-							<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
-							<CheckIcon v-else-if="profile.installedMod" />
-							{{
-								profile.installing
-									? 'Installing...'
-									: profile.installedMod
-										? 'Installed'
-										: 'Install'
-							}}
-						</Button>
-					</div>
-				</div>
-			</div>
-			<Card v-if="showCreation" class="creation-card">
-				<div class="creation-container">
-					<div class="creation-icon">
-						<Avatar size="md" class="icon" :src="display_icon" />
-						<div class="creation-icon__description">
-							<Button @click="upload_icon()">
-								<UploadIcon />
-								<span class="no-wrap"> Select icon </span>
-							</Button>
-							<Button :disabled="!display_icon" @click="reset_icon()">
-								<XIcon />
-								<span class="no-wrap"> Remove icon </span>
-							</Button>
-						</div>
-					</div>
-					<div class="creation-settings">
-						<input
-							v-model="name"
-							autocomplete="off"
-							type="text"
-							placeholder="Name"
-							class="creation-input"
-						/>
-						<Button :disabled="creatingInstance === true || !name" @click="createInstance()">
-							<RightArrowIcon />
-							{{ creatingInstance ? 'Creating...' : 'Create' }}
-						</Button>
-					</div>
-				</div>
-			</Card>
-			<div class="input-group push-right">
-				<Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
-					<PlusIcon />
-					{{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
-				</Button>
-				<Button @click="installModal.hide()">Cancel</Button>
-			</div>
-		</div>
-	</ModalWrapper>
+  <ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
+    <div class="modal-body">
+      <input
+        v-model="searchFilter"
+        autocomplete="off"
+        type="text"
+        class="search"
+        placeholder="Search for an instance"
+      />
+      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
+        <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.icon_path ? convertFileSrc(profile.icon_path) : null"
+              class="profile-image"
+            />
+            {{ profile.name }}
+          </router-link>
+          <div
+            v-tooltip="
+              profile.linked_data?.locked && !profile.installedMod
+                ? 'Unpair or unlock an instance to add mods.'
+                : ''
+            "
+          >
+            <Button
+              :disabled="profile.installedMod || profile.installing || profile.linked_data?.locked"
+              @click="install(profile)"
+            >
+              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+              <CheckIcon v-else-if="profile.installedMod" />
+              {{
+                profile.installing
+                  ? 'Installing...'
+                  : profile.installedMod
+                    ? 'Installed'
+                    : profile.linked_data && profile.linked_data.locked
+                      ? 'Paired'
+                      : 'Install'
+              }}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Card v-if="showCreation" class="creation-card">
+        <div class="creation-container">
+          <div class="creation-icon">
+            <Avatar size="md" class="icon" :src="display_icon" />
+            <div class="creation-icon__description">
+              <Button @click="upload_icon()">
+                <UploadIcon />
+                <span class="no-wrap"> Select icon </span>
+              </Button>
+              <Button :disabled="!display_icon" @click="reset_icon()">
+                <XIcon />
+                <span class="no-wrap"> Remove icon </span>
+              </Button>
+            </div>
+          </div>
+          <div class="creation-settings">
+            <input
+              v-model="name"
+              autocomplete="off"
+              type="text"
+              placeholder="Name"
+              class="creation-input"
+            />
+            <Button :disabled="creatingInstance === true || !name" @click="createInstance()">
+              <RightArrowIcon />
+              {{ creatingInstance ? 'Creating...' : 'Create' }}
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <div class="input-group push-right">
+        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+          <PlusIcon />
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+        </Button>
+        <Button @click="installModal.hide()">Cancel</Button>
+      </div>
+    </div>
+  </ModalWrapper>
 </template>
 
 <style scoped lang="scss">
 .creation-card {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	margin: 0;
-	background-color: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--color-bg);
 }
 
 .creation-container {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
 }
 
 .creation-icon {
-	display: flex;
-	flex-direction: row;
-	gap: 1rem;
-	align-items: center;
-	flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-grow: 1;
 
-	.creation-icon__description {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
+  .creation-icon__description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 }
 
 .creation-input {
-	width: 100%;
+  width: 100%;
 }
 
 .no-wrap {
-	white-space: nowrap;
+  white-space: nowrap;
 }
 
 .creation-dropdown {
-	width: min-content !important;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
+  width: min-content !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .creation-settings {
-	width: 100%;
-	margin-left: 0.5rem;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	justify-content: center;
+  width: 100%;
+  margin-left: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
 }
 
 .modal-body {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	min-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 }
 
 .profiles {
-	max-height: 12rem;
-	overflow-y: auto;
+  max-height: 12rem;
+  overflow-y: auto;
 
-	&.hide-creation {
-		max-height: 21rem;
-	}
+  &.hide-creation {
+    max-height: 21rem;
+  }
 }
 
 .option {
-	width: calc(100%);
-	background: var(--color-raised-bg);
-	color: var(--color-base);
-	box-shadow: none;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 0.5rem;
+  width: calc(100%);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
 
-	img {
-		margin-right: 0.5rem;
-	}
+  img {
+    margin-right: 0.5rem;
+  }
 
-	.name {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
+  .name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-	.profile-button {
-		align-content: start;
-		padding: 0.5rem;
-		text-align: left;
-	}
+  .profile-button {
+    align-content: start;
+    padding: 0.5rem;
+    text-align: left;
+  }
 }
 
 .profile-image {
-	--size: 2rem !important;
+  --size: 2rem !important;
 }
 </style>

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

@@ -1,335 +0,0 @@
-<script setup lang="ts">
-import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	OverflowMenu,
-	useVIntl,
-} from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { open } from '@tauri-apps/plugin-dialog'
-import { computed, type Ref, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-
-import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-const router = useRouter()
-
-const deleteConfirmModal = ref()
-
-const props = defineProps<InstanceSettingsTabProps>()
-
-const title = ref(props.instance.name)
-const icon: Ref<string | undefined> = ref(props.instance.icon_path)
-const groups = ref(props.instance.groups)
-
-const newCategoryInput = ref('')
-
-const installing = computed(() => props.instance.install_stage !== 'installed')
-
-async function duplicateProfile() {
-	await duplicate(props.instance.path).catch(handleError)
-	trackEvent('InstanceDuplicate', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-	})
-}
-
-const allInstances = ref((await list()) as GameInstance[])
-const availableGroups = computed(() => [
-	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
-])
-
-async function resetIcon() {
-	icon.value = undefined
-	await edit_icon(props.instance.path, null).catch(handleError)
-	trackEvent('InstanceRemoveIcon')
-}
-
-async function setIcon() {
-	const value = await open({
-		multiple: false,
-		filters: [
-			{
-				name: 'Image',
-				extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
-			},
-		],
-	})
-
-	if (!value) return
-
-	icon.value = value
-	await edit_icon(props.instance.path, icon.value).catch(handleError)
-
-	trackEvent('InstanceSetIcon')
-}
-
-const editProfileObject = computed(() => ({
-	name: title.value.trim().substring(0, 32) ?? 'Instance',
-	groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
-}))
-
-const toggleGroup = (group: string) => {
-	if (groups.value.includes(group)) {
-		groups.value = groups.value.filter((x) => x !== group)
-	} else {
-		groups.value.push(group)
-	}
-}
-
-const addCategory = () => {
-	const text = newCategoryInput.value.trim()
-
-	if (text.length > 0) {
-		groups.value.push(text.substring(0, 32))
-		newCategoryInput.value = ''
-	}
-}
-
-watch(
-	[title, groups, groups],
-	async () => {
-		await edit(props.instance.path, editProfileObject.value)
-	},
-	{ deep: true },
-)
-
-const removing = ref(false)
-async function removeProfile() {
-	removing.value = true
-	await remove(props.instance.path).catch(handleError)
-	removing.value = false
-
-	trackEvent('InstanceRemove', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-	})
-
-	await router.push({ path: '/' })
-}
-
-const messages = defineMessages({
-	name: {
-		id: 'instance.settings.tabs.general.name',
-		defaultMessage: 'Name',
-	},
-	libraryGroups: {
-		id: 'instance.settings.tabs.general.library-groups',
-		defaultMessage: 'Library groups',
-	},
-	libraryGroupsDescription: {
-		id: 'instance.settings.tabs.general.library-groups.description',
-		defaultMessage:
-			'Library groups allow you to organize your instances into different sections in your library.',
-	},
-	libraryGroupsEnterName: {
-		id: 'instance.settings.tabs.general.library-groups.enter-name',
-		defaultMessage: 'Enter group name',
-	},
-	libraryGroupsCreate: {
-		id: 'instance.settings.tabs.general.library-groups.create',
-		defaultMessage: 'Create new group',
-	},
-	editIcon: {
-		id: 'instance.settings.tabs.general.edit-icon',
-		defaultMessage: 'Edit icon',
-	},
-	selectIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.select',
-		defaultMessage: 'Select icon',
-	},
-	replaceIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.replace',
-		defaultMessage: 'Replace icon',
-	},
-	removeIcon: {
-		id: 'instance.settings.tabs.general.edit-icon.remove',
-		defaultMessage: 'Remove icon',
-	},
-	duplicateInstance: {
-		id: 'instance.settings.tabs.general.duplicate-instance',
-		defaultMessage: 'Duplicate instance',
-	},
-	duplicateInstanceDescription: {
-		id: 'instance.settings.tabs.general.duplicate-instance.description',
-		defaultMessage: 'Creates a copy of this instance, including worlds, configs, mods, etc.',
-	},
-	duplicateButtonTooltipInstalling: {
-		id: 'instance.settings.tabs.general.duplicate-button.tooltip.installing',
-		defaultMessage: 'Cannot duplicate while installing.',
-	},
-	duplicateButton: {
-		id: 'instance.settings.tabs.general.duplicate-button',
-		defaultMessage: 'Duplicate',
-	},
-	deleteInstance: {
-		id: 'instance.settings.tabs.general.delete',
-		defaultMessage: 'Delete instance',
-	},
-	deleteInstanceDescription: {
-		id: 'instance.settings.tabs.general.delete.description',
-		defaultMessage:
-			'Permanently deletes an instance from your device, including your worlds, configs, and all installed content. Be careful, as once you delete a instance there is no way to recover it.',
-	},
-	deleteInstanceButton: {
-		id: 'instance.settings.tabs.general.delete.button',
-		defaultMessage: 'Delete instance',
-	},
-	deletingInstanceButton: {
-		id: 'instance.settings.tabs.general.deleting.button',
-		defaultMessage: 'Deleting...',
-	},
-})
-</script>
-
-<template>
-	<ConfirmModalWrapper
-		ref="deleteConfirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		:show-ad-on-close="false"
-		@proceed="removeProfile"
-	/>
-	<div class="block">
-		<div class="float-end ml-4 relative group">
-			<OverflowMenu
-				v-tooltip="formatMessage(messages.editIcon)"
-				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-				:options="[
-					{
-						id: 'select',
-						action: () => setIcon(),
-					},
-					{
-						id: 'remove',
-						color: 'danger',
-						action: () => resetIcon(),
-						shown: !!icon,
-					},
-				]"
-			>
-				<Avatar
-					:src="icon ? convertFileSrc(icon) : icon"
-					size="108px"
-					class="!border-4 group-hover:brightness-75"
-					:tint-by="props.instance.path"
-					no-shadow
-				/>
-				<div class="absolute top-0 right-0 m-2">
-					<div
-						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
-					>
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-					</div>
-				</div>
-				<template #select>
-					<UploadIcon />
-					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-				</template>
-				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-			</OverflowMenu>
-		</div>
-		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.name) }}
-		</label>
-		<div class="flex">
-			<input
-				id="instance-name"
-				v-model="title"
-				autocomplete="off"
-				maxlength="80"
-				class="flex-grow"
-				type="text"
-			/>
-		</div>
-		<template v-if="instance.install_stage == 'installed'">
-			<div>
-				<h2
-					id="duplicate-instance-label"
-					class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
-				>
-					{{ formatMessage(messages.duplicateInstance) }}
-				</h2>
-				<p class="m-0 mb-2">
-					{{ formatMessage(messages.duplicateInstanceDescription) }}
-				</p>
-			</div>
-			<ButtonStyled>
-				<button
-					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-					aria-labelledby="duplicate-instance-label"
-					:disabled="installing"
-					@click="duplicateProfile"
-				>
-					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-				</button>
-			</ButtonStyled>
-		</template>
-		<h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.libraryGroups) }}
-		</h2>
-		<p class="m-0 mb-2">
-			{{ formatMessage(messages.libraryGroupsDescription) }}
-		</p>
-		<div class="flex flex-col gap-1">
-			<Checkbox
-				v-for="group in availableGroups"
-				:key="group"
-				:model-value="groups.includes(group)"
-				:label="group"
-				@click="toggleGroup(group)"
-			/>
-			<div class="flex gap-2 items-center">
-				<input
-					v-model="newCategoryInput"
-					type="text"
-					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
-					@submit="() => addCategory"
-				/>
-				<ButtonStyled>
-					<button class="w-fit" @click="() => addCategory()">
-						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-		<h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.deleteInstance) }}
-		</h2>
-		<p class="m-0 mb-2">
-			{{ formatMessage(messages.deleteInstanceDescription) }}
-		</p>
-		<ButtonStyled color="red">
-			<button
-				aria-labelledby="delete-instance-label"
-				:disabled="removing"
-				@click="deleteConfirmModal.show()"
-			>
-				<SpinnerIcon v-if="removing" class="animate-spin" />
-				<TrashIcon v-else />
-				{{
-					removing
-						? formatMessage(messages.deletingInstanceButton)
-						: formatMessage(messages.deleteInstanceButton)
-				}}
-			</button>
-		</ButtonStyled>
-	</div>
-</template>
-<style scoped lang="scss">
-.hovering-icon-shadow {
-	box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
-}
-</style>

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

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { Checkbox, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-
-import { edit } from '@/helpers/profile'
-import { get } from '@/helpers/settings.ts'
-
-import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const props = defineProps<InstanceSettingsTabProps>()
-
-const globalSettings = (await get().catch(handleError)) as AppSettings
-
-const overrideHooks = ref(
-	!!props.instance.hooks.pre_launch ||
-		!!props.instance.hooks.wrapper ||
-		!!props.instance.hooks.post_exit,
-)
-const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
-
-const editProfileObject = computed(() => {
-	const editProfile: {
-		hooks?: Hooks
-	} = {}
-
-	// When hooks are not overridden per-instance, we want to clear them
-	editProfile.hooks = overrideHooks.value ? hooks.value : {}
-
-	return editProfile
-})
-
-watch(
-	[overrideHooks, hooks],
-	async () => {
-		await edit(props.instance.path, editProfileObject.value)
-	},
-	{ deep: true },
-)
-const messages = defineMessages({
-	hooks: {
-		id: 'instance.settings.tabs.hooks.title',
-		defaultMessage: 'Game launch hooks',
-	},
-	hooksDescription: {
-		id: 'instance.settings.tabs.hooks.description',
-		defaultMessage:
-			'Hooks allow advanced users to run certain system commands before and after launching the game.',
-	},
-	customHooks: {
-		id: 'instance.settings.tabs.hooks.custom-hooks',
-		defaultMessage: 'Custom launch hooks',
-	},
-	preLaunch: {
-		id: 'instance.settings.tabs.hooks.pre-launch',
-		defaultMessage: 'Pre-launch',
-	},
-	preLaunchDescription: {
-		id: 'instance.settings.tabs.hooks.pre-launch.description',
-		defaultMessage: 'Ran before the instance is launched.',
-	},
-	preLaunchEnter: {
-		id: 'instance.settings.tabs.hooks.pre-launch.enter',
-		defaultMessage: 'Enter pre-launch command...',
-	},
-	wrapper: {
-		id: 'instance.settings.tabs.hooks.wrapper',
-		defaultMessage: 'Wrapper',
-	},
-	wrapperDescription: {
-		id: 'instance.settings.tabs.hooks.wrapper.description',
-		defaultMessage: 'Wrapper command for launching Minecraft.',
-	},
-	wrapperEnter: {
-		id: 'instance.settings.tabs.hooks.wrapper.enter',
-		defaultMessage: 'Enter wrapper command...',
-	},
-	postExit: {
-		id: 'instance.settings.tabs.hooks.post-exit',
-		defaultMessage: 'Post-exit',
-	},
-	postExitDescription: {
-		id: 'instance.settings.tabs.hooks.post-exit.description',
-		defaultMessage: 'Ran after the game closes.',
-	},
-	postExitEnter: {
-		id: 'instance.settings.tabs.hooks.post-exit.enter',
-		defaultMessage: 'Enter post-exit command...',
-	},
-})
-</script>
-
-<template>
-	<div>
-		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
-			{{ formatMessage(messages.hooks) }}
-		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.hooksDescription) }}
-		</p>
-		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />
-
-		<h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
-			{{ formatMessage(messages.preLaunch) }}
-		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>
-		<input
-			id="pre-launch"
-			v-model="hooks.pre_launch"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			type="text"
-			:placeholder="formatMessage(messages.preLaunchEnter)"
-			class="w-full mt-2"
-		/>
-
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
-			{{ formatMessage(messages.wrapper) }}
-		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>
-		<input
-			id="wrapper"
-			v-model="hooks.wrapper"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			type="text"
-			:placeholder="formatMessage(messages.wrapperEnter)"
-			class="w-full mt-2"
-		/>
-
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
-			{{ formatMessage(messages.postExit) }}
-		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
-		<input
-			id="post-exit"
-			v-model="hooks.post_exit"
-			autocomplete="off"
-			:disabled="!overrideHooks"
-			type="text"
-			:placeholder="formatMessage(messages.postExitEnter)"
-			class="w-full mt-2"
-		/>
-	</div>
-</template>

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

@@ -1,821 +0,0 @@
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	HammerIcon,
-	IssuesIcon,
-	SpinnerIcon,
-	TransferIcon,
-	UndoIcon,
-	UnlinkIcon,
-	UnplugIcon,
-	WrenchIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	Chips,
-	Combobox,
-	defineMessages,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
-import {
-	formatCategory,
-	type GameVersionTag,
-	type PlatformTag,
-	type Project,
-	type Version,
-} from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed, type ComputedRef, type Ref, ref, shallowRef, watch } from 'vue'
-
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ModpackVersionModal from '@/components/ui/ModpackVersionModal.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { get_project, get_version_many } from '@/helpers/cache'
-import { get_loader_versions } from '@/helpers/metadata'
-import { edit, install, update_repair_modrinth } from '@/helpers/profile'
-import { get_game_versions, get_loaders } from '@/helpers/tags'
-
-import type {
-	InstanceSettingsTabProps,
-	Manifest,
-	ManifestLoaderVersion,
-} from '../../../helpers/types'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const repairConfirmModal = ref()
-const modpackVersionModal = ref()
-const modalConfirmUnpair = ref()
-const modalConfirmReinstall = ref()
-
-const props = defineProps<InstanceSettingsTabProps>()
-
-const loader = ref(props.instance.loader)
-const gameVersion = ref(props.instance.game_version)
-
-const showSnapshots = ref(false)
-
-const [
-	fabric_versions,
-	forge_versions,
-	quilt_versions,
-	neoforge_versions,
-	all_game_versions,
-	loaders,
-] = await Promise.all([
-	get_loader_versions('fabric')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('forge')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('quilt')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_loader_versions('neo')
-		.then((manifest: Manifest) => shallowRef(manifest))
-		.catch(handleError),
-	get_game_versions()
-		.then((gameVersions: GameVersionTag[]) => shallowRef(gameVersions))
-		.catch(handleError),
-	get_loaders()
-		.then((value: PlatformTag[]) =>
-			value
-				.filter(
-					(item) => item.supported_project_types.includes('modpack') || item.name === 'vanilla',
-				)
-				.sort((a, b) => (a.name === 'vanilla' ? -1 : b.name === 'vanilla' ? 1 : 0)),
-		)
-		.then((loader: PlatformTag[]) => ref(loader))
-		.catch(handleError),
-])
-
-const modpackProject: Ref<Project | null> = ref(null)
-const modpackVersion: Ref<Version | null> = ref(null)
-const modpackVersions: Ref<Version[] | null> = ref(null)
-const fetching = ref(true)
-
-if (props.instance.linked_data && props.instance.linked_data.project_id && !props.offline) {
-	get_project(props.instance.linked_data.project_id, 'must_revalidate')
-		.then((project) => {
-			modpackProject.value = project
-
-			if (project && project.versions) {
-				get_version_many(project.versions, 'must_revalidate')
-					.then((versions: Version[]) => {
-						modpackVersions.value = versions.sort((a, b) =>
-							dayjs(b.date_published).diff(dayjs(a.date_published)),
-						)
-						modpackVersion.value =
-							versions.find(
-								(version: Version) => version.id === props.instance.linked_data?.version_id,
-							) ?? null
-					})
-					.catch(handleError)
-					.finally(() => {
-						fetching.value = false
-					})
-			}
-		})
-		.catch((err) => {
-			handleError(err)
-			fetching.value = false
-		})
-} else {
-	fetching.value = false
-}
-
-const currentLoaderIcon = computed(
-	() => loaders?.value.find((x) => x.name === props.instance.loader)?.icon,
-)
-
-const gameVersionsForLoader = computed(() => {
-	return all_game_versions?.value.filter((item) => {
-		if (loader.value === 'fabric') {
-			return !!fabric_versions?.value.gameVersions.some((x) => item.version === x.id)
-		} else if (loader.value === 'forge') {
-			return !!forge_versions?.value.gameVersions.some((x) => item.version === x.id)
-		} else if (loader.value === 'quilt') {
-			return !!quilt_versions?.value.gameVersions.some((x) => item.version === x.id)
-		} else if (loader.value === 'neoforge') {
-			return !!neoforge_versions?.value.gameVersions.some((x) => item.version === x.id)
-		}
-
-		return []
-	})
-})
-
-const hasSnapshots = computed(() =>
-	gameVersionsForLoader.value?.some((x) => x.version_type !== 'release'),
-)
-
-const selectableGameVersionNumbers = computed(() => {
-	return gameVersionsForLoader.value
-		?.filter((x) => x.version_type === 'release' || showSnapshots.value)
-		.map((x) => x.version)
-})
-
-const gameVersionOptions = computed(() =>
-	(selectableGameVersionNumbers.value ?? []).map((v) => ({ value: v, label: v })),
-)
-
-const loaderVersionOptions = computed(() =>
-	(selectableLoaderVersions.value ?? []).map((opt, index) => ({ value: index, label: opt.id })),
-)
-
-const loaderVersionLabel = computed(() => {
-	const idx = loaderVersionIndex.value
-	return idx >= 0 && selectableLoaderVersions.value
-		? selectableLoaderVersions.value[idx]?.id
-		: 'Select version'
-})
-
-const selectableLoaderVersions: ComputedRef<ManifestLoaderVersion[] | undefined> = computed(() => {
-	if (gameVersion.value) {
-		if (loader.value === 'fabric') {
-			return fabric_versions?.value.gameVersions[0].loaders
-		} else if (loader.value === 'forge') {
-			return forge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
-				?.loaders
-		} else if (loader.value === 'quilt') {
-			return quilt_versions?.value.gameVersions[0].loaders
-		} else if (loader.value === 'neoforge') {
-			return neoforge_versions?.value?.gameVersions?.find((item) => item.id === gameVersion.value)
-				?.loaders
-		}
-	}
-	return []
-})
-const loaderVersionIndex: Ref<number> = ref(-1)
-
-resetLoaderVersionIndex()
-
-function resetLoaderVersionIndex() {
-	loaderVersionIndex.value =
-		selectableLoaderVersions.value?.findIndex((x) => x.id === props.instance.loader_version) ?? -1
-}
-
-const isValid = computed(() => {
-	return (
-		selectableGameVersionNumbers.value?.includes(gameVersion.value) &&
-		((loaderVersionIndex.value !== undefined && loaderVersionIndex.value >= 0) ||
-			loader.value === 'vanilla')
-	)
-})
-
-const isChanged = computed(() => {
-	return (
-		loader.value !== props.instance.loader ||
-		gameVersion.value !== props.instance.game_version ||
-		(loader.value !== 'vanilla' &&
-			loaderVersionIndex.value !== undefined &&
-			loaderVersionIndex.value >= 0 &&
-			selectableLoaderVersions.value?.[loaderVersionIndex.value].id !==
-				props.instance.loader_version)
-	)
-})
-
-watch(loader, () => {
-	loaderVersionIndex.value = 0
-})
-
-const editing = ref(false)
-
-async function saveGvLoaderEdits() {
-	editing.value = true
-
-	const editProfile: { loader?: string; game_version?: string; loader_version?: string } = {}
-	editProfile.loader = loader.value
-	editProfile.game_version = gameVersion.value
-
-	if (loader.value !== 'vanilla' && loaderVersionIndex.value !== undefined) {
-		editProfile.loader_version = selectableLoaderVersions.value?.[loaderVersionIndex.value].id
-	} else {
-		loaderVersionIndex.value = -1
-	}
-	console.log('Editing:')
-	console.log(loader.value)
-
-	await edit(props.instance.path, editProfile).catch(handleError)
-	await repairProfile(false)
-
-	editing.value = false
-}
-
-const installing = computed(() => props.instance.install_stage !== 'installed')
-const repairing = ref(false)
-const reinstalling = ref(false)
-const changingVersion = ref(false)
-
-async function repairProfile(force: boolean) {
-	if (force) {
-		repairing.value = true
-	}
-	await install(props.instance.path, force).catch(handleError)
-	if (force) {
-		repairing.value = false
-	}
-
-	trackEvent('InstanceRepair', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-	})
-}
-
-async function unpairProfile() {
-	await edit(props.instance.path, {
-		linked_data: null,
-	})
-	modpackProject.value = null
-	modpackVersion.value = null
-	modpackVersions.value = null
-	modalConfirmUnpair.value.hide()
-}
-
-async function repairModpack() {
-	reinstalling.value = true
-	await update_repair_modrinth(props.instance.path).catch(handleError)
-	reinstalling.value = false
-
-	trackEvent('InstanceRepair', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-	})
-}
-
-const messages = defineMessages({
-	cannotWhileInstalling: {
-		id: 'instance.settings.tabs.installation.tooltip.cannot-while-installing',
-		defaultMessage: 'Cannot {action} while installing',
-	},
-	cannotWhileOffline: {
-		id: 'instance.settings.tabs.installation.tooltip.cannot-while-offline',
-		defaultMessage: 'Cannot {action} while offline',
-	},
-	cannotWhileRepairing: {
-		id: 'instance.settings.tabs.installation.tooltip.cannot-while-repairing',
-		defaultMessage: 'Cannot {action} while repairing',
-	},
-	currentlyInstalled: {
-		id: 'instance.settings.tabs.installation.currently-installed',
-		defaultMessage: 'Currently installed',
-	},
-	platform: {
-		id: 'instance.settings.tabs.installation.platform',
-		defaultMessage: 'Platform',
-	},
-	gameVersion: {
-		id: 'instance.settings.tabs.installation.game-version',
-		defaultMessage: 'Game version',
-	},
-	loaderVersion: {
-		id: 'instance.settings.tabs.installation.loader-version',
-		defaultMessage: '{loader} version',
-	},
-	showAllVersions: {
-		id: 'instance.settings.tabs.installation.show-all-versions',
-		defaultMessage: 'Show all versions',
-	},
-	install: {
-		id: 'instance.settings.tabs.installation.install',
-		defaultMessage: 'Install',
-	},
-	resetSelections: {
-		id: 'instance.settings.tabs.installation.reset-selections',
-		defaultMessage: 'Reset to current',
-	},
-	unknownVersion: {
-		id: 'instance.settings.tabs.installation.unknown-version',
-		defaultMessage: '(unknown version)',
-	},
-	repairConfirmTitle: {
-		id: 'instance.settings.tabs.installation.repair.confirm.title',
-		defaultMessage: 'Repair instance?',
-	},
-	repairConfirmDescription: {
-		id: 'instance.settings.tabs.installation.repair.confirm.description',
-		defaultMessage:
-			'Repairing reinstalls Minecraft dependencies and checks for corruption. This may resolve issues if your game is not launching due to launcher-related errors, but will not resolve issues or crashes related to installed mods.',
-	},
-	repairButton: {
-		id: 'instance.settings.tabs.installation.repair.button',
-		defaultMessage: 'Repair',
-	},
-	repairingButton: {
-		id: 'instance.settings.tabs.installation.repair.button.repairing',
-		defaultMessage: 'Repairing',
-	},
-	repairInProgress: {
-		id: 'instance.settings.tabs.installation.repair.in-progress',
-		defaultMessage: 'Repair in progress',
-	},
-	repairAction: {
-		id: 'instance.settings.tabs.installation.tooltip.action.repair',
-		defaultMessage: 'repair',
-	},
-	changeVersionCannotWhileFetching: {
-		id: 'instance.settings.tabs.installation.change-version.cannot-while-fetching',
-		defaultMessage: 'Fetching modpack versions',
-	},
-	changeVersionButton: {
-		id: 'instance.settings.tabs.installation.change-version.button',
-		defaultMessage: 'Change version',
-	},
-	changeVersionAction: {
-		id: 'instance.settings.tabs.installation.tooltip.action.change-version',
-		defaultMessage: 'change version',
-	},
-	installingButton: {
-		id: 'instance.settings.tabs.installation.change-version.button.installing',
-		defaultMessage: 'Installing',
-	},
-	installInProgress: {
-		id: 'instance.settings.tabs.installation.install.in-progress',
-		defaultMessage: 'Installation in progress',
-	},
-	installButton: {
-		id: 'instance.settings.tabs.installation.change-version.button.install',
-		defaultMessage: 'Install',
-	},
-	alreadyInstalledVanilla: {
-		id: 'instance.settings.tabs.installation.change-version.already-installed.vanilla',
-		defaultMessage: 'Vanilla {game_version} already installed',
-	},
-	alreadyInstalledModded: {
-		id: 'instance.settings.tabs.installation.change-version.already-installed.modded',
-		defaultMessage: '{platform} {version} for Minecraft {game_version} already installed',
-	},
-	installAction: {
-		id: 'instance.settings.tabs.installation.tooltip.action.install',
-		defaultMessage: 'install',
-	},
-	installingNewVersion: {
-		id: 'instance.settings.tabs.installation.change-version.in-progress',
-		defaultMessage: 'Installing new version',
-	},
-	minecraftVersion: {
-		id: 'instance.settings.tabs.installation.minecraft-version',
-		defaultMessage: 'Minecraft {version}',
-	},
-	noLoaderVersions: {
-		id: 'instance.settings.tabs.installation.no-loader-versions',
-		defaultMessage: '{loader} is not available for Minecraft {version}. Try another mod loader.',
-	},
-	noConnection: {
-		id: 'instance.settings.tabs.installation.no-connection',
-		defaultMessage: 'Cannot fetch linked modpack details. Please check your internet connection.',
-	},
-	noModpackFound: {
-		id: 'instance.settings.tabs.installation.no-modpack-found',
-		defaultMessage:
-			'This instance is linked to a modpack, but the modpack could not be found on Modrinth.',
-	},
-	debugInformation: {
-		id: 'instance.settings.tabs.installation.debug-information',
-		defaultMessage: 'Debug information:',
-	},
-	fetchingModpackDetails: {
-		id: 'instance.settings.tabs.installation.fetching-modpack-details',
-		defaultMessage: 'Fetching modpack details',
-	},
-	unlinkInstanceTitle: {
-		id: 'instance.settings.tabs.installation.unlink.title',
-		defaultMessage: 'Unlink from modpack',
-	},
-	unlinkInstanceDescription: {
-		id: 'instance.settings.tabs.installation.unlink.description',
-		defaultMessage: `This instance is linked to a modpack, which means mods can't be updated and you can't change the mod loader or Minecraft version. Unlinking will permanently disconnect this instance from the modpack.`,
-	},
-	unlinkInstanceButton: {
-		id: 'instance.settings.tabs.installation.unlink.button',
-		defaultMessage: 'Unlink instance',
-	},
-	unlinkInstanceConfirmTitle: {
-		id: 'instance.settings.tabs.installation.unlink.confirm.title',
-		defaultMessage: 'Are you sure you want to unlink this instance?',
-	},
-	unlinkInstanceConfirmDescription: {
-		id: 'instance.settings.tabs.installation.unlink.confirm.description',
-		defaultMessage:
-			'If you proceed, you will not be able to re-link it without creating an entirely new instance. You will no longer receive modpack updates and it will become a normal.',
-	},
-	reinstallModpackConfirmTitle: {
-		id: 'instance.settings.tabs.installation.reinstall.confirm.title',
-		defaultMessage: 'Are you sure you want to reinstall this instance?',
-	},
-	reinstallModpackConfirmDescription: {
-		id: 'instance.settings.tabs.installation.reinstall.confirm.description',
-		defaultMessage: `Reinstalling will reset all installed or modified content to what is provided by the modpack, removing any mods or content you have added on top of the original installation. This may fix unexpected behavior if changes have been made to the instance, but if your worlds now depend on additional installed content, it may break existing worlds.`,
-	},
-	reinstallModpackTitle: {
-		id: 'instance.settings.tabs.installation.reinstall.title',
-		defaultMessage: 'Reinstall modpack',
-	},
-	reinstallModpackDescription: {
-		id: 'instance.settings.tabs.installation.reinstall.description',
-		defaultMessage: `Resets the instance's content to its original state, removing any mods or content you have added on top of the original modpack.`,
-	},
-	reinstallModpackButton: {
-		id: 'instance.settings.tabs.installation.reinstall.button',
-		defaultMessage: 'Reinstall modpack',
-	},
-	reinstallingModpackButton: {
-		id: 'instance.settings.tabs.installation.reinstall.button.reinstalling',
-		defaultMessage: 'Reinstalling modpack',
-	},
-	reinstallAction: {
-		id: 'instance.settings.tabs.installation.tooltip.action.reinstall',
-		defaultMessage: 'reinstall',
-	},
-})
-</script>
-
-<template>
-	<ConfirmModalWrapper
-		ref="repairConfirmModal"
-		:title="formatMessage(messages.repairConfirmTitle)"
-		:description="formatMessage(messages.repairConfirmDescription)"
-		:proceed-icon="HammerIcon"
-		:proceed-label="formatMessage(messages.repairButton)"
-		:danger="false"
-		:show-ad-on-close="false"
-		@proceed="() => repairProfile(true)"
-	/>
-	<ModpackVersionModal
-		v-if="instance.linked_data && modpackVersions"
-		ref="modpackVersionModal"
-		:instance="instance"
-		:versions="modpackVersions"
-		@finish-install="
-			() => {
-				changingVersion = false
-				modpackVersion =
-					modpackVersions?.find(
-						(version: Version) => version.id === props.instance.linked_data?.version_id,
-					) ?? null
-			}
-		"
-	/>
-	<ConfirmModalWrapper
-		ref="modalConfirmUnpair"
-		:title="formatMessage(messages.unlinkInstanceConfirmTitle)"
-		:description="formatMessage(messages.unlinkInstanceConfirmDescription)"
-		:proceed-icon="UnlinkIcon"
-		:proceed-label="formatMessage(messages.unlinkInstanceButton)"
-		:show-ad-on-close="false"
-		@proceed="() => unpairProfile()"
-	/>
-	<ConfirmModalWrapper
-		ref="modalConfirmReinstall"
-		:title="formatMessage(messages.reinstallModpackConfirmTitle)"
-		:description="formatMessage(messages.reinstallModpackConfirmDescription)"
-		:proceed-icon="DownloadIcon"
-		:proceed-label="formatMessage(messages.reinstallModpackButton)"
-		:show-ad-on-close="false"
-		@proceed="() => repairModpack()"
-	/>
-	<div>
-		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.currentlyInstalled) }}
-		</h2>
-		<div
-			v-if="!modpackProject && instance.linked_data && offline && !fetching"
-			class="text-secondary font-medium mb-2"
-		>
-			<UnplugIcon class="top-[3px] relative" /> {{ formatMessage(messages.noConnection) }}
-		</div>
-		<div v-else-if="!modpackProject && instance.linked_data && !fetching" class="mb-2">
-			<p class="text-brand-red font-medium mt-0">
-				<IssuesIcon class="top-[3px] relative" />
-				{{ formatMessage(messages.noModpackFound) }}
-			</p>
-			<p>{{ formatMessage(messages.debugInformation) }}</p>
-			<div class="bg-bg p-6 rounded-2xl mt-2 text-sm text-secondary">
-				{{ instance.linked_data }}
-			</div>
-		</div>
-		<div class="flex gap-4 items-center justify-between p-4 bg-bg rounded-2xl">
-			<div v-if="fetching" class="flex items-center gap-2 h-10">
-				<SpinnerIcon class="animate-spin" />
-				{{ formatMessage(messages.fetchingModpackDetails) }}
-			</div>
-			<template v-else>
-				<div class="flex gap-2 items-center">
-					<Avatar v-if="modpackProject" :src="modpackProject?.icon_url" size="40px" />
-					<div
-						v-else
-						class="w-10 h-10 flex items-center justify-center rounded-full bg-button-bg border-solid border-[1px] border-button-border p-2 [&_svg]:h-full [&_svg]:w-full"
-					>
-						<div v-if="!!currentLoaderIcon" class="contents" v-html="currentLoaderIcon" />
-						<WrenchIcon v-else />
-					</div>
-					<div class="flex flex-col gap-2 justify-center">
-						<span class="font-semibold leading-none">
-							{{
-								modpackProject
-									? modpackProject.title
-									: formatMessage(messages.minecraftVersion, {
-											version: instance.game_version,
-										})
-							}}
-						</span>
-						<span class="text-sm text-secondary leading-none">
-							{{
-								modpackProject
-									? modpackVersion
-										? modpackVersion?.version_number
-										: 'Unknown version'
-									: formatCategory(instance.loader)
-							}}
-							<template v-if="instance.loader !== 'vanilla' && !modpackProject">
-								{{ instance.loader_version || formatMessage(messages.unknownVersion) }}
-							</template>
-						</span>
-					</div>
-				</div>
-				<div class="flex gap-1">
-					<ButtonStyled color="orange" type="transparent" hover-color-fill="background">
-						<button
-							v-tooltip="
-								repairing
-									? formatMessage(messages.repairInProgress)
-									: installing || reinstalling
-										? formatMessage(messages.cannotWhileInstalling, {
-												action: formatMessage(messages.repairAction),
-											})
-										: offline
-											? formatMessage(messages.cannotWhileOffline, {
-													action: formatMessage(messages.repairAction),
-												})
-											: null
-							"
-							:disabled="installing || repairing || reinstalling || offline"
-							@click="repairConfirmModal.show()"
-						>
-							<SpinnerIcon v-if="repairing" class="animate-spin" />
-							<HammerIcon v-else />
-							{{
-								repairing
-									? formatMessage(messages.repairingButton)
-									: formatMessage(messages.repairButton)
-							}}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="modpackProject" hover-color-fill="background">
-						<button
-							v-tooltip="
-								changingVersion
-									? formatMessage(messages.installingNewVersion)
-									: repairing
-										? formatMessage(messages.cannotWhileRepairing, {
-												action: formatMessage(messages.changeVersionAction),
-											})
-										: installing || reinstalling
-											? formatMessage(messages.cannotWhileInstalling, {
-													action: formatMessage(messages.changeVersionAction),
-												})
-											: fetching && !modpackVersions
-												? formatMessage(messages.changeVersionCannotWhileFetching)
-												: offline
-													? formatMessage(messages.cannotWhileOffline, {
-															action: formatMessage(messages.changeVersionAction),
-														})
-													: null
-							"
-							:disabled="
-								changingVersion ||
-								repairing ||
-								installing ||
-								reinstalling ||
-								offline ||
-								fetching ||
-								!modpackVersions
-							"
-							@click="
-								() => {
-									changingVersion = true
-									modpackVersionModal.show()
-								}
-							"
-						>
-							<SpinnerIcon v-if="changingVersion" class="animate-spin" />
-							<TransferIcon v-else />
-							{{
-								changingVersion
-									? formatMessage(messages.installingButton)
-									: formatMessage(messages.changeVersionButton)
-							}}
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-		</div>
-		<template v-if="!instance.linked_data || !instance.linked_data.locked">
-			<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-				{{ formatMessage(messages.platform) }}
-			</h2>
-			<Chips v-if="loaders" v-model="loader" :items="loaders.map((x) => x.name)" class="mt-2" />
-			<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-				{{ formatMessage(messages.gameVersion) }}
-			</h2>
-			<div class="flex flex-wrap mt-2 gap-2">
-				<Combobox
-					v-if="selectableGameVersionNumbers !== undefined"
-					v-model="gameVersion"
-					:options="gameVersionOptions"
-					:display-value="gameVersion || formatMessage(messages.unknownVersion)"
-				/>
-				<Checkbox
-					v-if="hasSnapshots"
-					v-model="showSnapshots"
-					:label="formatMessage(messages.showAllVersions)"
-				/>
-			</div>
-			<template v-if="loader !== 'vanilla'">
-				<h2 class="m-0 mt-4 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.loaderVersion, { loader: formatCategory(loader) }) }}
-				</h2>
-				<Combobox
-					v-if="selectableLoaderVersions"
-					v-model="loaderVersionIndex"
-					:options="loaderVersionOptions"
-					:display-value="loaderVersionLabel"
-					name="Version selector"
-					class="mt-2"
-				/>
-				<div v-else class="mt-2 text-brand-red flex gap-2 items-center">
-					<IssuesIcon />
-					{{
-						formatMessage(messages.noLoaderVersions, {
-							loader: loader,
-							version: gameVersion,
-						})
-					}}
-				</div>
-			</template>
-			<div class="mt-4 flex flex-wrap gap-2">
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="
-							installing || reinstalling
-								? formatMessage(messages.installInProgress)
-								: !isChanged
-									? formatMessage(
-											loader === 'vanilla'
-												? messages.alreadyInstalledVanilla
-												: messages.alreadyInstalledModded,
-											{
-												platform: formatCategory(loader),
-												version: instance.loader_version,
-												game_version: gameVersion,
-											},
-										)
-									: repairing
-										? formatMessage(messages.cannotWhileRepairing, {
-												action: formatMessage(messages.installAction),
-											})
-										: offline
-											? formatMessage(messages.cannotWhileOffline, {
-													action: formatMessage(messages.installAction),
-												})
-											: null
-						"
-						:disabled="!isValid || !isChanged || editing || offline || repairing"
-						@click="saveGvLoaderEdits()"
-					>
-						<SpinnerIcon v-if="editing" class="animate-spin" />
-						<DownloadIcon v-else />
-						{{
-							editing
-								? formatMessage(messages.installingButton)
-								: formatMessage(messages.installButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button
-						:disabled="!isChanged"
-						@click="
-							() => {
-								loader = instance.loader
-								gameVersion = instance.game_version
-								resetLoaderVersionIndex()
-							}
-						"
-					>
-						<UndoIcon />
-						{{ formatMessage(messages.resetSelections) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</template>
-		<template v-else>
-			<template v-if="instance.linked_data && instance.linked_data.locked">
-				<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-					{{ formatMessage(messages.unlinkInstanceTitle) }}
-				</h2>
-				<p class="m-0">
-					{{ formatMessage(messages.unlinkInstanceDescription) }}
-				</p>
-				<ButtonStyled>
-					<button class="mt-2" @click="modalConfirmUnpair.show()">
-						<UnlinkIcon /> {{ formatMessage(messages.unlinkInstanceButton) }}
-					</button>
-				</ButtonStyled>
-				<template v-if="modpackProject">
-					<div>
-						<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast block mt-4">
-							{{ formatMessage(messages.reinstallModpackTitle) }}
-						</h2>
-						<p class="m-0">
-							{{ formatMessage(messages.reinstallModpackDescription) }}
-						</p>
-					</div>
-					<ButtonStyled color="red" type="outlined">
-						<button
-							v-tooltip="
-								reinstalling
-									? formatMessage(messages.reinstallingModpackButton)
-									: repairing
-										? formatMessage(messages.cannotWhileRepairing, {
-												action: formatMessage(messages.reinstallAction),
-											})
-										: installing
-											? formatMessage(messages.cannotWhileInstalling, {
-													action: formatMessage(messages.reinstallAction),
-												})
-											: offline
-												? formatMessage(messages.cannotWhileOffline, {
-														action: formatMessage(messages.reinstallAction),
-													})
-												: null
-							"
-							class="mt-2"
-							:disabled="
-								changingVersion ||
-								repairing ||
-								installing ||
-								offline ||
-								fetching ||
-								!modpackVersions
-							"
-							@click="modalConfirmReinstall.show()"
-						>
-							<SpinnerIcon v-if="reinstalling" class="animate-spin" />
-							<DownloadIcon v-else />
-							{{
-								reinstalling
-									? formatMessage(messages.reinstallingModpackButton)
-									: formatMessage(messages.reinstallModpackButton)
-							}}
-						</button>
-					</ButtonStyled>
-				</template>
-			</template>
-		</template>
-	</div>
-</template>

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

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, defineMessages, injectNotificationManager, Slider, useVIntl } from '@modrinth/ui'
-import { computed, readonly, ref, watch } from 'vue'
-
-import JavaSelector from '@/components/ui/JavaSelector.vue'
-import useMemorySlider from '@/composables/useMemorySlider'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { get } from '@/helpers/settings.ts'
-
-import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const props = defineProps<InstanceSettingsTabProps>()
-
-const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
-
-const overrideJavaInstall = ref(!!props.instance.java_path)
-const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
-const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
-
-const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
-const javaArgs = ref(
-	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
-)
-
-const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
-const envVars = ref(
-	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
-		.map((x) => x.join('='))
-		.join(' '),
-)
-
-const overrideMemorySettings = ref(!!props.instance.memory)
-const memory = ref(props.instance.memory ?? globalSettings.memory)
-const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
-	maxMemory: number
-	snapPoints: number[]
-}
-
-const editProfileObject = computed(() => {
-	return {
-		java_path:
-			overrideJavaInstall.value && javaInstall.value.path !== ''
-				? javaInstall.value.path.replace('java.exe', 'javaw.exe')
-				: null,
-		extra_launch_args: overrideJavaArgs.value
-			? javaArgs.value.trim().split(/\s+/).filter(Boolean)
-			: null,
-		custom_env_vars: overrideEnvVars.value
-			? envVars.value
-					.trim()
-					.split(/\s+/)
-					.filter(Boolean)
-					.map((x) => x.split('=').filter(Boolean))
-			: null,
-		memory: overrideMemorySettings.value ? memory.value : null,
-	}
-})
-
-watch(
-	[
-		overrideJavaInstall,
-		javaInstall,
-		overrideJavaArgs,
-		javaArgs,
-		overrideEnvVars,
-		envVars,
-		overrideMemorySettings,
-		memory,
-	],
-	async () => {
-		await edit(props.instance.path, editProfileObject.value)
-	},
-	{ deep: true },
-)
-
-const messages = defineMessages({
-	javaInstallation: {
-		id: 'instance.settings.tabs.java.java-installation',
-		defaultMessage: 'Java installation',
-	},
-	javaArguments: {
-		id: 'instance.settings.tabs.java.java-arguments',
-		defaultMessage: 'Java arguments',
-	},
-	javaEnvironmentVariables: {
-		id: 'instance.settings.tabs.java.environment-variables',
-		defaultMessage: 'Environment variables',
-	},
-	javaMemory: {
-		id: 'instance.settings.tabs.java.java-memory',
-		defaultMessage: 'Memory allocated',
-	},
-	hooks: {
-		id: 'instance.settings.tabs.java.hooks',
-		defaultMessage: 'Hooks',
-	},
-})
-</script>
-
-<template>
-	<div>
-		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaInstallation) }}
-		</h2>
-		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
-		<template v-if="!overrideJavaInstall">
-			<div class="flex my-2 items-center gap-2 font-semibold">
-				<template v-if="javaInstall">
-					<CheckCircleIcon class="text-brand-green h-4 w-4" />
-					<span>Using default Java {{ optimalJava.major_version }} installation:</span>
-				</template>
-				<template v-else-if="optimalJava">
-					<XCircleIcon class="text-brand-red h-5 w-5" />
-					<span
-						>Could not find a default Java {{ optimalJava.major_version }} installation. Please set
-						one below:</span
-					>
-				</template>
-				<template v-else>
-					<XCircleIcon class="text-brand-red h-5 w-5" />
-					<span
-						>Could not automatically determine a Java installation to use. Please set one
-						below:</span
-					>
-				</template>
-			</div>
-			<div
-				v-if="javaInstall && !overrideJavaInstall"
-				class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
-			>
-				{{ javaInstall.path }}
-			</div>
-		</template>
-		<JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaMemory) }}
-		</h2>
-		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
-		<Slider
-			id="max-memory"
-			v-model="memory.maximum"
-			:disabled="!overrideMemorySettings"
-			:min="512"
-			:max="maxMemory"
-			:step="64"
-			:snap-points="snapPoints"
-			:snap-range="512"
-			unit="MB"
-		/>
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaArguments) }}
-		</h2>
-		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
-		<input
-			id="java-args"
-			v-model="javaArgs"
-			autocomplete="off"
-			:disabled="!overrideJavaArgs"
-			type="text"
-			class="w-full"
-			placeholder="Enter java arguments..."
-		/>
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.javaEnvironmentVariables) }}
-		</h2>
-		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
-		<input
-			id="env-vars"
-			v-model="envVars"
-			autocomplete="off"
-			:disabled="!overrideEnvVars"
-			type="text"
-			class="w-full"
-			placeholder="Enter environmental variables..."
-		/>
-	</div>
-</template>