fix jsign not running

.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"

.claude/skills/api-module/SKILL.md

@@ -1,18 +0,0 @@
----
-name: api-module
-description: Add a new API endpoint module to packages/api-client from an OpenAPI schema. Use when adding new backend endpoints, creating API client modules, or when an openapi.yml is provided.
-argument-hint: <path-to-openapi.yml>
----
-
-Refer to the standard: @standards/frontend/ADDING_API_MODULES.md
-
-## Steps
-
-1. **Read the OpenAPI schema** at `$ARGUMENTS` — identify the endpoints, request/response shapes, and path parameters.
-2. **Read the standard above** for naming conventions, type rules, and the module registration pattern.
-3. **Determine the service and version** — the URL path prefix tells you which service directory and version namespace to use (e.g. `/v3/projects` → `labrinth/v3/`).
-4. **Define types in `types.ts`** — types must match the API response 1:1. Use the OpenAPI schema as the source of truth. Do not reshape or rename fields.
-5. **Create the module class** — extend `BaseModule`, implement each endpoint as a method. Use the correct HTTP verb and request options pattern from the standard.
-6. **Register in `MODULE_REGISTRY`** — add the module entry so it's auto-instantiated on the client.
-7. **Export types** from the service's barrel `index.ts`.
-8. **Verify** — check that the module compiles and the types are accessible from `@modrinth/api-client`.

.claude/skills/cross-platform-pages/SKILL.md

@@ -1,26 +0,0 @@
----
-name: cross-platform-pages
-description: Convert a page to the cross-platform page system so it works in both the website and the desktop app. Use when moving a page into packages/ui/src/layouts/, creating shared or wrapped layouts, or setting up DI contracts for platform abstraction.
-argument-hint: <path-to-page>
----
-
-Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standards/frontend/DEPENDENCY_INJECTION.md
-
-## Steps
-
-1. **Read the target page** at `$ARGUMENTS` and understand its data sources, mutations, and navigation.
-2. **Read the standards above** to understand the shared vs wrapped distinction and the DI pattern.
-3. **Decide the category:**
-   - **Wrapped** (`layouts/wrapped/`) — if the page uses the same API source on both platforms (e.g. web requests, not Tauri plugins). Just move the page component into `packages/ui` and import it from both frontends.
-   - **Shared** (`layouts/shared/`) — if the page has different data-fetching logic per platform (e.g. website uses `api-client`, app uses Tauri `invoke`). Requires a DI contract.
-4. **For shared layouts:**
-   - Define a DI contract interface in `providers/` capturing all platform-specific operations.
-   - Create the layout component that injects the context and handles all UI logic.
-   - Extract reusable stateful logic (search, filtering, selection) into `composables/`.
-   - Implement the contract separately in each frontend (`apps/frontend/`, `apps/app-frontend/`).
-5. **For wrapped pages:**
-   - Move the page component into `packages/ui/src/layouts/wrapped/` matching the route structure.
-   - Replace any platform-specific imports with shared utilities.
-   - Import and render the wrapped page from both frontends as a simple component.
-   - If the layout uses TanStack Query for initial route paint with `ReadyTransition` / `useReadyState`, each platform route shell must call `ensureQueryData` for those queries with matching keys and fetchers — see **Platform route shells: prefetch with `ensureQueryData`** in `standards/frontend/CROSS_PLATFORM_PAGES.md`.
-6. **Verify** the page renders correctly by checking for missing imports and that all DI contracts are satisfied.

.claude/skills/figma-mcp/SKILL.md

@@ -1,22 +0,0 @@
----
-name: figma-mcp
-description: Use the Figma MCP server to translate a Figma design into a Vue page or component layout. Use when the user provides a Figma URL, asks to implement a design, or wants to draft a page layout from Figma.
-argument-hint: <figma-url>
----
-
-Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md
-Also read @packages/ui/CLAUDE.md for color token mapping and component conventions.
-
-## Steps
-
-1. **Parse the Figma URL** from `$ARGUMENTS` — extract the `fileKey` and `nodeId`. Convert `-` to `:` in the node ID.
-2. **Read the standards above** for the available tools, adaptation rules, and color usage.
-3. **Call `get_design_context`** with the extracted `nodeId` and `fileKey`, using `clientLanguages: "typescript,html,css"` and `clientFrameworks: "vue"`. This is always the first tool to call.
-5. **Adapt the output to the Modrinth codebase:**
-   - Map Figma color variables to `surface-*` / `text-*` tokens — never use Figma's aliased names directly.
-   - Check `packages/ui/src/components/` for existing components that match elements in the design (buttons, cards, modals, inputs, etc.).
-   - Check `packages/assets/styles/variables.scss` for tokens not exposed in Figma.
-   - Match spacing values exactly from the design.
-6. **Use `get_screenshot`** if you need a closer visual reference of specific nodes.
-7. **Use `get_variable_defs`** to verify which design tokens are applied to ambiguous elements.
-8. **Build the component** as a Vue SFC using Tailwind classes and the project's existing component library.

.claude/skills/i18n-pass/SKILL.md

@@ -1,24 +0,0 @@
----
-name: i18n-pass
-description: Perform an i18n localization pass on changed files or a pull request, converting hard-coded English strings to the @modrinth/ui i18n system. Use when internationalizing a set of changes, reviewing a PR for untranslated strings, or converting a specific component.
-argument-hint: [file-path-or-pr-number]
----
-
-Refer to the standard: @standards/frontend/INTERNATIONALIZATION.md
-
-## Steps
-
-1. **Identify the scope of changes:**
-   - If `$ARGUMENTS` is a PR number, run `gh pr diff $ARGUMENTS` to get the changed files.
-   - If `$ARGUMENTS` is a file path, use that directly.
-   - If no argument, check `git diff` for uncommitted changes.
-2. **Read the standard above** for the message definition pattern, ICU format rules, and `IntlFormatted` usage.
-3. **Filter to Vue SFCs** — only `.vue` files need i18n passes. Skip non-component files.
-4. **For each file, scan for hard-coded strings:**
-   - `<template>`: inner text, `alt`, `placeholder`, `aria-label`, button labels, tooltip text.
-   - `<script>`: string literals passed to user-visible UI (notification messages, dropdown labels, error messages).
-   - Skip: dynamic expressions, HTML tag names, CSS classes, internal identifiers, log messages.
-5. **Define messages** with `defineMessages` — use descriptive, stable `id`s based on the component's domain (e.g. `project.settings.title`).
-6. **Replace strings in templates** with `formatMessage()` calls, or `<IntlFormatted>` for strings containing links or markup.
-7. **Handle ICU edge cases** — add a space before `}}` if an ICU placeholder ends at a Vue template delimiter boundary.
-8. **Verify** no hard-coded English strings remain in the changed templates. Do not alter logic, layout, or reactivity.

.claude/skills/review-changelog/SKILL.md

@@ -1,36 +0,0 @@
----
-name: review-changelog
-description: Review the latest changelog entry in packages/blog/changelog.ts against the project's changelog style guide and flag bullets that need rewriting. Use when checking a freshly added changelog entry before opening a PR, or when the user asks to review/lint the latest changelog.
-argument-hint: [product?]
----
-
-Refer to the standard: @standards/maintaining/CHANGELOG.md
-
-## Steps
-
-1. **Locate the latest entry:**
-   - Open `packages/blog/changelog.ts`.
-   - The latest entries are at the top of the `VERSIONS` array.
-   - If `$ARGUMENTS` specifies a product (`web`, `hosting`, `app`), review the most recent entry for that product. Otherwise, review the most recent entry overall, plus any sibling entries sharing the same `date` (coordinated releases ship together).
-
-2. **Read the standard above** in full before reviewing. The bullet rules, section/verb agreement, and "Don't" list are the source of truth.
-
-3. **Check the entry shell:**
-   - `date` is a valid ISO 8601 timestamp.
-   - `product` is one of `web`, `hosting`, `app`.
-   - `version` is present for `app` entries and omitted for `web`/`hosting`.
-   - Section headings use `## Added`, `## Changed`, `## Fixed`, `## Security` (or a featured-release linked heading). Flag legacy `## Improvements`.
-
-4. **Review each bullet** against the standard. For each bullet, check:
-   - Voice/tense matches the section heading.
-   - Opening verb agrees with its section.
-   - Describes observable behavior, not implementation.
-   - Specific enough to identify the surface (names the tab/page/modal).
-   - One sentence, ends with a period, sentence case.
-   - Uses branded names (Modrinth App, Modrinth Hosting) correctly.
-   - No filler ("issue with", "issue where", "various", "some"), no vague intensifiers, no apologies, no PR/commit references (unless crediting a third-party contributor with a linked GitHub profile).
-   - Not a duplicate sub-fix of a bigger change already listed.
-
-5. **Report findings** as a short list grouped by entry. For each problem bullet, show the original line and a suggested rewrite. If the entry is clean, say so explicitly. Do not edit the file unless the user asks - this skill is a review pass, not a rewrite pass.
-
-6. **If the user then asks to apply fixes**, edit `packages/blog/changelog.ts` directly using the suggested rewrites. Preserve tab indentation and template literal formatting.

.claude/skills/tanstack-query/SKILL.md

@@ -1,27 +0,0 @@
----
-name: tanstack-query
-description: Convert a page or component from useAsyncData/manual ref patterns to TanStack Query for server state management. Use when migrating data fetching to useQuery/useMutation, adding cache invalidation, or replacing useAsyncData with TanStack Query.
-argument-hint: <path-to-file>
----
-
-Refer to the standard: @standards/frontend/FETCHING_DATA.md
-
-## Steps
-
-1. **Read the target file** at `$ARGUMENTS` and identify all data-fetching patterns: `useAsyncData`, `useFetch`, manual `ref()` + `await`, or `onMounted` fetch calls.
-2. **Read the standard above** for the query/mutation patterns, query key conventions, and optimistic update approach.
-3. **Convert queries:**
-   - Replace `useAsyncData` / `useFetch` / manual fetches with `useQuery`.
-   - Use the `api-client` via `injectModrinthClient()` for the `queryFn`.
-   - Design query keys with the `['resource', 'version', ...params]` convention.
-   - Use `computed` query keys for reactive parameters.
-   - Use the `enabled` option for conditional queries that depend on other data.
-4. **Convert mutations:**
-   - Replace manual `try/catch` + `ref` patterns with `useMutation`.
-   - Add `onSuccess` handlers that invalidate or update related query caches.
-   - Consider optimistic updates for UI-critical mutations (follow the pattern in the standard).
-5. **Clean up:**
-   - Remove manual loading/error `ref()`s that are now handled by TanStack Query's return values (`isPending`, `isError`, `error`).
-   - Remove manual `onMounted` fetch calls.
-   - Ensure SSR compatibility — queries in Nuxt pages are automatically awaited during SSR.
-6. **Verify** the page still renders correctly and that cache invalidation triggers re-fetches where expected.

.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 +1 @@
 * 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

.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, web]
 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

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

@@ -0,0 +1,41 @@
+name: 🛠️ API issue (api.modrinth.com)
+description: Report an issue regarding the Modrinth API.
+labels: [bug, backend]
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false

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

@@ -1,63 +0,0 @@
-name: 👥 Bug with Modrinth Hosting
-description: For issues with a Modrinth Hosting product.
-labels: [hosting]
-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-api-bug.yml

@@ -1,42 +0,0 @@
-name: 🛠 Bug with Modrinth API
-description: For issues with the Modrinth API for developers.
-labels: [api, backend]
-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: 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

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

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

@@ -1,45 +0,0 @@
-name: 💡 Feature request
-description: Suggest an idea
-type: 'feature'
-
-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
-          required: true
-  - type: dropdown
-    id: projects
-    attributes:
-      label: What parts of Modrinth is your feature request related too?
-      multiple: true
-      options:
-        - Modrinth App
-        - Modrinth.com website
-        - Modrinth Hosting
-        - Modrinth API for developers
-  - type: textarea
-    attributes:
-      label: Is your suggested feature related to a problem? Please describe.
-      description: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe the solution you'd like
-      description: A clear and concise description of what you want to happen.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe alternatives you've considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Additional context
-      description: Add any other context or screenshots about the suggested enhancement here.
-    validations:
-      required: false

.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/error.vue`
-
-When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.

.github/merge-queue-ci-skipper/action.yml

@@ -1,171 +0,0 @@
-# MIT License
-#
-# Copyright (c) 2024 CARIAD SE
-#
-# 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.
-
-name: 'Merge Queue CI Check Skipper'
-description: 'Outputs `skip-check` as `true` if this is running as part of merge queue checks and the same checks have already been executed in the PR itself.'
-inputs:
-  secret:
-    description: 'Optional GitHub Secret that can access branch protection rules using the administration:read permission'
-    required: false
-outputs:
-  skip-check:
-    description: 'Skip Check (boolean)'
-    value: ${{ steps.passed-checks.outputs.can-skip-checks }}
-runs:
-  using: 'composite'
-  steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - name: Extract PR Number and Commit ID
-      id: extract-pr-info
-      uses: actions/github-script@v7
-      with:
-        script: |
-          const githubRef = process.env.GITHUB_REF;
-          const regex = /^refs\/heads\/gh-readonly-queue\/([a-zA-Z0-9.\-_\/]+)\/pr-(\d+)-([a-f0-9]+)$/;
-
-          if (regex.test(githubRef)) {
-            const [, targetBranchName, prNumber, commitId] = githubRef.match(regex);
-            core.setOutput('targetBranchName', targetBranchName);
-            core.setOutput('prNumber', prNumber);
-            core.setOutput('commitId', commitId);
-          } else {
-            console.log(`GITHUB_REF is not a merge queue ref, setting CAN_SKIP_CHECKS to false: ${githubRef}`);
-            core.exportVariable('CAN_SKIP_CHECKS', 'false');
-          }
-
-    - name: Print PR Number and Target Commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        echo "Target Branch Name: ${{ steps.extract-pr-info.outputs.targetBranchName }}"
-        echo "PR Number: ${{ steps.extract-pr-info.outputs.prNumber }}"
-        echo "Target Commit ID: ${{ steps.extract-pr-info.outputs.commitId }}"
-
-    - name: Check if merge queue entry was enqueued as head of the queue
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        targetBranchHead=$(git rev-parse origin/${{ steps.extract-pr-info.outputs.targetBranchName }})
-        if [[ "$targetBranchHead" != "${{ steps.extract-pr-info.outputs.commitId }}" ]]; then
-          echo "'${{ steps.extract-pr-info.outputs.targetBranchName }}' branch commit ID does not match PR commit ID. This Merge Queue run was not head of the queue when it was enqueued. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        else
-          echo "This merge queue entry is targeting '${{ steps.extract-pr-info.outputs.targetBranchName }}' directly."
-        fi
-
-    - name: Get PR Branch
-      id: get-pr-branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      env:
-        GH_TOKEN: ${{ github.token }}
-      run: |
-        prNumber=${{ steps.extract-pr-info.outputs.prNumber }}
-        branchName=$(gh pr view ${prNumber} --json headRefName -q '.headRefName')
-        echo "prBranch=$branchName" >> "$GITHUB_OUTPUT"
-
-    - name: Print PR Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        echo "PR Branch: ${{ steps.get-pr-branch.outputs.prBranch }}"
-
-    - name: Check if PR branch contains the Merge Queue target commit ID
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        # Get the branch name from previous steps
-        branch_name="origin/${{ steps.get-pr-branch.outputs.prBranch }}"
-        commit_id="${{ steps.extract-pr-info.outputs.commitId }}"
-
-        # Check if the branch history contains the commit
-        if git branch -r --contains "$commit_id" | grep -q "$branch_name"; then
-          echo "Branch '$branch_name' contains commit '$commit_id'. It is up to date with ${{ steps.extract-pr-info.outputs.targetBranchName }}."
-        else
-          echo "Branch '$branch_name' does not contain commit '$commit_id'. It is outdated. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compare PR Branch with Current Branch
-      if: env.CAN_SKIP_CHECKS != 'false'
-      shell: bash
-      run: |
-        if git diff --quiet "origin/${{ steps.get-pr-branch.outputs.prBranch }}"; then
-          echo "No differences found. PR branch is identical with this merge queue branch."
-        else
-          echo "Differences detected. PR branch has been updated after PR was added to merge queue. Setting CAN_SKIP_CHECKS to false."
-          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
-        fi
-
-    - name: Compute/publish skip result
-      id: passed-checks
-      uses: actions/github-script@v7
-      env:
-        SECRET: ${{ inputs.secret }}
-      with:
-        github-token: ${{ inputs.secret != '' && inputs.secret || github.token }}
-        script: |
-          if (process.env.CAN_SKIP_CHECKS == "false") {
-            console.log("Setting CAN_SKIP_CHECKS to false");
-            core.setOutput("can-skip-checks", false);
-            return;
-          }
-
-          const secretProvided = !!process.env.SECRET;
-          if (!secretProvided) {
-            console.log("secret input not set, assuming all checks have passed. Ensure 'Require status checks to pass before merging' is enabled, or provide a secret with administration:read.");
-            core.setOutput("can-skip-checks", true);
-            return;
-          }
-
-          const { data: branchProtection } = await github.rest.repos.getBranchProtection({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            branch: "${{ steps.extract-pr-info.outputs.targetBranchName }}",
-          });
-          const requiredCheckNames = branchProtection.required_status_checks.contexts;
-          console.log(`requiredCheckNames = ${requiredCheckNames}`);
-
-          const { data: checks } = await github.rest.checks.listForRef({
-            owner: context.repo.owner,
-            repo: context.repo.repo,
-            ref: "refs/heads/${{ steps.get-pr-branch.outputs.prBranch }}",
-          });
-
-          console.log(`checks.check_runs = ${checks.check_runs.map(check => `${check.status},${check.conclusion},${check.name};`)}`);
-          const nonSuccessfulChecks = checks.check_runs.filter(check => check.status !== "completed" || check.conclusion !== "success");
-          const nonSuccessfulCheckNames = nonSuccessfulChecks.map(check => check.name);
-          console.log(`nonSuccessfulCheckNames = ${nonSuccessfulCheckNames}`);
-
-          const missingChecks = requiredCheckNames.filter(checkName => nonSuccessfulCheckNames.includes(checkName));
-
-          if (missingChecks.length > 0) {
-            console.log(`Required checks not passed, cannot skip merge queue checks. Setting CAN_SKIP_CHECKS to false. Missing checks: ${missingChecks.join(', ')}`);
-            core.setOutput("can-skip-checks", false);
-          } else {
-            console.log("No missing checks. Setting CAN_SKIP_CHECKS to true.");
-            core.setOutput("can-skip-checks", true);
-          }

.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/api-client-release.yml

@@ -1,125 +0,0 @@
-name: API client release
-
-on:
-  push:
-    branches: [main]
-    paths:
-      - .github/workflows/api-client-release.yml
-      - packages/api-client/**
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-  id-token: write
-
-jobs:
-  release:
-    if: github.repository_owner == 'modrinth' && github.ref == 'refs/heads/main'
-    # npm Trusted Publishing requires a GitHub-hosted runner.
-    runs-on: ubuntu-latest
-    env:
-      FORCE_COLOR: 3
-      PACKAGE_DIR: packages/api-client
-      PACKAGE_NAME: '@modrinth/api-client'
-      BUMP_TYPE: minor
-    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
-
-      - name: Check for api-client changes
-        id: changes
-        run: |
-          if [ "${{ github.event.before }}" = "0000000000000000000000000000000000000000" ]; then
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          if git diff --quiet "${{ github.event.before }}" "$GITHUB_SHA" -- "$PACKAGE_DIR"; then
-            echo "changed=false" >> "$GITHUB_OUTPUT"
-          else
-            echo "changed=true" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Setup Node
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-          registry-url: https://registry.npmjs.org
-
-      - name: Enable Corepack
-        if: steps.changes.outputs.changed == 'true'
-        run: corepack enable
-
-      - name: Get pnpm store path
-        if: steps.changes.outputs.changed == 'true'
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> "$GITHUB_OUTPUT"
-
-      - name: Restore pnpm cache
-        if: steps.changes.outputs.changed == 'true'
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Install dependencies
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm install --frozen-lockfile --filter @modrinth/api-client...
-
-      - name: Resolve release version
-        if: steps.changes.outputs.changed == 'true'
-        id: version
-        run: |
-          CURRENT_VERSION_JSON="$(npm view "${PACKAGE_NAME}" version --json)"
-          CURRENT_VERSION="$(
-            jq -nr \
-              --argjson version "$CURRENT_VERSION_JSON" \
-              'if ($version | type) == "array" then $version[-1] else $version end'
-          )"
-
-          NEXT_VERSION="$(
-            jq -nr \
-              --arg version "$CURRENT_VERSION" \
-              --arg bump "$BUMP_TYPE" '
-                def semver:
-                  capture("^(?<major>[0-9]+)\\.(?<minor>[0-9]+)\\.(?<patch>[0-9]+)$")
-                  | with_entries(.value |= tonumber);
-
-                ($version | semver) as $current
-                | if $bump == "major" then "\($current.major + 1).0.0"
-                  elif $bump == "minor" then "\($current.major).\($current.minor + 1).0"
-                  elif $bump == "patch" then "\($current.major).\($current.minor).\($current.patch + 1)"
-                  else error("Unsupported bump type: \($bump)")
-                  end
-              '
-          )"
-
-          PACKAGE_JSON="$(mktemp)"
-          jq --tab --arg version "$NEXT_VERSION" '.version = $version' "$PACKAGE_DIR/package.json" > "$PACKAGE_JSON"
-          mv "$PACKAGE_JSON" "$PACKAGE_DIR/package.json"
-
-          echo "current_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "published_version=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "version=$NEXT_VERSION" >> "$GITHUB_OUTPUT"
-
-      - name: Build api-client
-        if: steps.changes.outputs.changed == 'true'
-        run: pnpm --filter @modrinth/api-client build
-
-      - name: Check package contents
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm pack --dry-run
-
-      - name: Publish api-client
-        if: steps.changes.outputs.changed == 'true'
-        working-directory: packages/api-client
-        run: pnpm publish --access public --provenance --no-git-checks

.github/workflows/cancel-pr-workflow-on-merge.yml

@@ -1,22 +0,0 @@
-name: Cancel PR Workflows on Merge
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-permissions:
-  actions: write
-
-jobs:
-  cancel:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@85880fa0301c86cca9da44039ee3bb12d3bedbfa # 0.12.1
-        with:
-          workflow_id: all
-          access_token: ${{ secrets.GITHUB_TOKEN }}
-          ignore_sha: true
-          pr_number: ${{ github.event.pull_request.number }}

.github/workflows/changelog-comment.yml

@@ -1,121 +0,0 @@
-name: Changelog Comment
-
-on:
-  pull_request_target:
-    types: [opened, reopened]
-  workflow_dispatch:
-    inputs:
-      pr_number:
-        description: 'PR number to post the changelog comment on (for testing)'
-        required: true
-        type: number
-
-jobs:
-  comment:
-    name: Post changelog comment
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Post or update changelog comment
-        uses: actions/github-script@d746ffe35508b1917358783b479e04febd2b8f71 # v9.0.0
-        with:
-          github-token: ${{ secrets.CROWDIN_GH_TOKEN }}
-          script: |
-            const marker = '<!-- changelog -->';
-            const mergedMarker = '<!-- changelog-merged -->';
-
-            const sections = ['### Added', '', '### Changed', '', '### Deprecated', '', '### Removed', '', '### Fixed', '', '### Security'].join('\n');
-            const productBlock = (name) => `<details>\n<summary>${name}</summary>\n\n${sections}\n\n</details>`;
-
-            const template = [
-              marker,
-              '## Pull request changelog',
-              '',
-              '<!-- Fill in the changelog under each product area this PR affects.',
-              '     Empty sections are ignored. Leave a product collapsed/empty',
-              '     if it doesn\'t apply. -->',
-              '',
-              productBlock('App'),
-              '',
-              productBlock('Website'),
-              '',
-              productBlock('Hosting'),
-            ].join('\n');
-
-            // Resolve PR number from event or workflow_dispatch input
-            const prNumber = context.payload.pull_request?.number
-              ?? parseInt('${{ github.event.inputs.pr_number }}', 10);
-
-            if (!prNumber || isNaN(prNumber)) {
-              core.setFailed('Could not determine PR number');
-              return;
-            }
-
-            // Get PR details (need base ref for child PR detection)
-            const { data: pr } = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            // Check if bot comment already exists
-            const { data: comments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-            });
-
-            const existingComment = comments.find(c => c.body.includes(marker));
-            if (existingComment) {
-              core.info('Changelog comment already exists, skipping');
-              return;
-            }
-
-            // Post the template comment
-            await github.rest.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-              body: template,
-            });
-
-            core.info(`Posted changelog comment on PR #${prNumber}`);
-
-            // Detect child PR: check if this PR's base branch is another open PR's head branch
-            const baseRef = pr.base.ref;
-
-            if (baseRef === 'main' || baseRef === 'prod') {
-              return;
-            }
-
-            // Look for a parent PR whose head branch matches our base branch
-            const { data: candidatePRs } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              head: `${context.repo.owner}:${baseRef}`,
-            });
-
-            if (candidatePRs.length === 0) {
-              return;
-            }
-
-            const parentPR = candidatePRs[0];
-            core.info(`Detected parent PR #${parentPR.number} for child PR #${prNumber}`);
-
-            // Add admonition to child PR's changelog comment
-            const { data: childComments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-            });
-
-            const childChangelogComment = childComments.find(c => c.body.includes(marker));
-            if (childChangelogComment && !childChangelogComment.body.includes(mergedMarker)) {
-              await github.rest.issues.updateComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: childChangelogComment.id,
-                body: `${mergedMarker}\n> [!NOTE]\n> This changelog has been merged into the changelog for #${parentPR.number}\n\n${childChangelogComment.body}`,
-              });
-            }

.github/workflows/check-generic.yml

@@ -1,27 +0,0 @@
-on:
-  pull_request:
-  push:
-    branches:
-      - main
-
-env:
-  CARGO_TERM_COLOR: always
-  SQLX_OFFLINE: true
-
-jobs:
-  typos:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: crate-ci/typos@6ac2ebd1b93eade61faf7e12688ad87a073fea59 # v1.46.0
-
-  # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
-  tombi:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: taiki-e/install-action@fd2f5e3d644b484055ebf4268f474c565f148f25 # v2.81.9
-        with:
-          tool: tombi
-      - run: tombi lint
-      - run: tombi fmt --check

.github/workflows/check-rust.yml

@@ -1,19 +0,0 @@
-on:
-  pull_request:
-  push:
-    branches:
-      - main
-
-env:
-  CARGO_TERM_COLOR: always
-  SQLX_OFFLINE: true
-
-jobs:
-  shear:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: dtolnay/rust-toolchain@29eef336d9b2848a0b548edc03f92a220660cdb8 # stable
-      - uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
-      - run: cargo binstall --no-confirm cargo-shear
-      - run: cargo shear

.github/workflows/daedalus-docker.yml

@@ -3,137 +3,40 @@ name: daedalus-docker-build
 on:
   push:
     branches:
-      - 'main'
+      - '**'
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
-      - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
-      - 'packages/daedalus/**'
-      - Cargo.toml
-      - Cargo.lock
   merge_group:
     types: [checks_requested]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
+  docker:
     runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
-  docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
-    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
-        with:
-          rustflags: ''
-          cache: false
-
-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Build daedalus_client
-        run: cargo build --release --package daedalus_client
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/daedalus_client/docker-stage
-          cp target/release/daedalus_client apps/daedalus_client/docker-stage/daedalus_client
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
-
-      - name: Generate Docker image metadata
-        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
-        env:
-          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
+        uses: actions/checkout@v2
+      - name: Fetch docker metadata
+        id: docker_meta
+        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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+      - 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@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
-          context: ./apps/daedalus_client/docker-stage
           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 }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}

.github/workflows/daedalus-run.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v3
 
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.github/workflows/frontend-deploy.yml

@@ -1,168 +0,0 @@
-name: Deploy frontend
-
-on:
-  push:
-    branches:
-      - main
-      - prod
-    paths:
-      - 'apps/frontend/**/*'
-      - 'packages/ui/**/*'
-      - 'packages/utils/**/*'
-      - 'packages/assets/**/*'
-      - '**/wrangler.jsonc'
-      - '**/pnpm-*.yaml'
-      - '.github/workflows/frontend-deploy.yml'
-  workflow_dispatch:
-  workflow_call:
-    inputs:
-      environment:
-        required: true
-        type: string
-        description: 'The environment to deploy to (staging-preview or production-preview)'
-      head_sha:
-        required: false
-        type: string
-        description: 'The commit SHA to deploy (defaults to github.sha)'
-      head_ref:
-        required: false
-        type: string
-        description: 'The branch name to deploy (defaults to github.ref_name)'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
-jobs:
-  deploy:
-    runs-on: blacksmith-2vcpu-ubuntu-2404
-    permissions:
-      contents: read
-      deployments: write
-      pull-requests: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
-
-      - name: Configure environment
-        id: meta
-        env:
-          ENV_INPUT: ${{ inputs.environment }}
-          REF: ${{ github.ref }}
-          DEPLOY_SHA: ${{ inputs.head_sha || github.sha }}
-        run: |
-          echo "cmd=deploy" >> $GITHUB_OUTPUT
-
-          SHA_SHORT="${DEPLOY_SHA::8}"
-
-          if [ "$ENV_INPUT" = "staging-preview" ]; then
-            echo "env=staging" >> $GITHUB_OUTPUT
-            echo "url=https://git-$SHA_SHORT-frontend-staging.modrinth.workers.dev" >> $GITHUB_OUTPUT
-            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
-
-          elif [ "$ENV_INPUT" = "production-preview" ]; then
-            echo "env=production" >> $GITHUB_OUTPUT
-            echo "url=https://git-$SHA_SHORT-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
-            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
-
-          elif [ "$REF" = "refs/heads/main" ]; then
-            echo "env=staging" >> $GITHUB_OUTPUT
-            echo "url=https://staging.modrinth.com" >> $GITHUB_OUTPUT
-
-          else
-            # Production env (no preview)
-            echo "env=production" >> $GITHUB_OUTPUT
-            echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Inject build variables
-        working-directory: ./apps/frontend
-        run: |
-          if [ "${{ steps.meta.outputs.env }}" == "staging" ]; then
-            echo "Injecting staging variables from wrangler.jsonc..."
-            jq -r '.env.staging.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
-          else
-            echo "Injecting production variables from wrangler.jsonc..."
-            jq -r '.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
-          fi
-
-      - name: Install dependencies
-        working-directory: ./apps/frontend
-        run: pnpm install
-
-      - name: Build frontend
-        working-directory: ./apps/frontend
-        run: pnpm build
-        env:
-          CF_PAGES_BRANCH: ${{ inputs.head_ref || github.ref_name }}
-          CF_PAGES_COMMIT_SHA: ${{ inputs.head_sha || github.sha }}
-          CF_PAGES_URL: ${{ steps.meta.outputs.url }}
-          BUILD_ENV: ${{ steps.meta.outputs.env }}
-          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-
-      - name: Create Sentry release and upload sourcemaps
-        uses: getsentry/action-release@5657c9e888b4e2cc85f4d29143ea4131fde4a73a # v3.6.0
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          SENTRY_ORG: modrinth
-          SENTRY_PROJECT: knossos-server
-        with:
-          environment: ${{ steps.meta.outputs.env }}
-          sourcemaps: ./apps/frontend/.output/server
-          url_prefix: '~/'
-
-      - name: Deploy Cloudflare Worker
-        id: wrangler
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
-        with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
-          workingDirectory: ./apps/frontend
-          packageManager: pnpm
-          wranglerVersion: '4.54.0'
-          command: ${{ steps.meta.outputs.cmd }}
-
-      - name: Purge cache
-        if: github.ref == 'refs/heads/prod'
-        run: |
-          curl -X POST \
-            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
-            -H "Content-Type: application/json" \
-            --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
-            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
-
-      - name: Write deployment URL to file
-        if: ${{ inputs.environment != '' }}
-        run: |
-          echo "${{ steps.meta.outputs.url }}" > deployment-url-${{ inputs.environment }}.txt
-
-      - name: Upload deployment URL
-        if: ${{ inputs.environment != '' }}
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        with:
-          name: deployment-url-${{ inputs.environment }}
-          path: deployment-url-${{ inputs.environment }}.txt

.github/workflows/frontend-pages.yml

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

.github/workflows/frontend-preview.yml

@@ -1,139 +0,0 @@
-name: Deploy frontend preview
-
-on:
-  pull_request:
-    paths:
-      - 'apps/frontend/**/*'
-      - 'packages/ui/**/*'
-      - 'packages/utils/**/*'
-      - 'packages/assets/**/*'
-      - '**/wrangler.jsonc'
-      - '**/pnpm-*.yaml'
-      - '.github/workflows/frontend-preview.yml'
-
-jobs:
-  deploy:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    uses: ./.github/workflows/frontend-deploy.yml
-    secrets: inherit
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.environment }}
-      cancel-in-progress: true
-    strategy:
-      matrix:
-        environment: [staging-preview, production-preview]
-    with:
-      environment: ${{ matrix.environment }}
-      head_sha: ${{ github.event.pull_request.head.sha }}
-      head_ref: ${{ github.event.pull_request.head.ref }}
-
-  deploy-storybook:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: blacksmith-2vcpu-ubuntu-2404
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-storybook
-      cancel-in-progress: true
-    permissions:
-      contents: read
-      deployments: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-cache-
-
-      - name: Install dependencies
-        working-directory: ./packages/ui
-        run: pnpm install
-
-      - name: Build Storybook
-        working-directory: ./packages/ui
-        run: pnpm run build-storybook
-
-      - name: Configure short SHA
-        id: meta
-        env:
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: echo "sha_short=${HEAD_SHA::8}" >> $GITHUB_OUTPUT
-
-      - name: Deploy Storybook preview
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
-        with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          workingDirectory: ./packages/ui
-          packageManager: pnpm
-          wranglerVersion: '4.54.0'
-          command: versions upload --preview-alias git-${{ steps.meta.outputs.sha_short }}
-
-  comment:
-    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: ubuntu-latest
-    needs: [deploy, deploy-storybook]
-    steps:
-      - name: Download deployment URLs
-        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
-        with:
-          pattern: deployment-url-*
-          merge-multiple: true
-
-      - name: Read deployment URLs
-        id: urls
-        env:
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: |
-          STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
-          PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
-
-          echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
-          echo "Staging preview URL: $STAGING_PREVIEW_URL"
-
-          echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
-          echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
-          echo "storybook-preview-url=https://git-${HEAD_SHA::8}-storybook.modrinth.workers.dev" >> $GITHUB_OUTPUT
-
-      - name: Find comment
-        if: github.event_name == 'pull_request'
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
-        id: fc
-        with:
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: Frontend previews
-
-      - name: Comment deploy URL on PR
-        if: github.event_name == 'pull_request'
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
-        with:
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          body: |
-            ## Frontend previews
-
-            Last deployed commit is [${{ github.event.pull_request.head.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.event.pull_request.head.sha }})
-
-            | Environment | URL |
-            |-------------|-----|
-            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
-            | production  | ${{ steps.urls.outputs.production-preview-url }} |
-            | storybook   | ${{ steps.urls.outputs.storybook-preview-url }} |
-          edit-mode: replace

.github/workflows/i18n-pull.yml

@@ -1,122 +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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          ref: ${{ github.ref }}
-          token: ${{ secrets.CROWDIN_GH_TOKEN }}
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install script dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
-
-      - name: Configure Git author
-        id: git-author
-        uses: MarcoIeni/git-config@59144859caf016f8b817a2ac9b051578729173c4 # v0.1.2
-        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@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
-        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: Prune stale ICU translations
-        run: pnpm scripts i18n-icu-contract prune-local
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
-        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,102 +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/**'
-      - 'scripts/i18n-icu-contract.ts'
-      - 'package.json'
-      - 'pnpm-lock.yaml'
-      - '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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          ref: ${{ github.ref }}
-          fetch-depth: 2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install script dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
-
-      - 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@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
-        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 }}
-
-      - name: Clear stale ICU translations in Crowdin
-        run: pnpm scripts i18n-icu-contract clear-crowdin-changed --base-ref HEAD^ --crowdin-branch "[${{ 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

@@ -3,150 +3,43 @@ name: docker-build
 on:
   push:
     branches:
-      - 'main'
+      - '**'
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
-      - Cargo.toml
-      - Cargo.lock
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
-      - Cargo.toml
-      - Cargo.lock
   merge_group:
     types: [checks_requested]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
+  docker:
     runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-      internal: ${{ steps.check-internal.outputs.internal }}
-    if: ${{ always() }}
+    defaults:
+      run:
+        working-directory: ./apps/labrinth
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Check if workflow runs on an internal branch
-        id: check-internal
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
-          REPO: ${{ github.repository }}
-        run: |
-          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
-            echo "internal=true" >> $GITHUB_OUTPUT
-          else
-            echo "internal=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        run: |
-          # PR mode: never skip
-          if [ "${{ github.event_name }}" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
-  docker:
-    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
-    env:
-      SQLX_OFFLINE: 'true'
-      GIT_HASH: ${{ github.sha }}
-    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
-        with:
-          rustflags: ''
-          cache: false
-
-      - name: Install build dependencies
-        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
-        with:
-          packages: cmake libcurl4-openssl-dev
-          version: v2 # cache key
-
-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Build labrinth
-        run: cargo build --profile release-labrinth --package labrinth
-
-      - name: Stage Docker context
-        run: |
-          mkdir -p apps/labrinth/docker-stage
-          cp target/release-labrinth/labrinth apps/labrinth/docker-stage/labrinth
-          cp -r apps/labrinth/migrations apps/labrinth/docker-stage/migrations
-          cp -r apps/labrinth/assets apps/labrinth/docker-stage/assets
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
-
-      - name: Generate Docker image metadata
-        id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
-        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: actions/checkout@v2
+      - name: Fetch docker metadata
+        id: docker_meta
+        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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+      - 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@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        id: docker_build
+        uses: docker/build-push-action@v2
         with:
-          context: ./apps/labrinth/docker-stage
-          file: ./apps/labrinth/Dockerfile
-          push: true
-          tags: ${{ steps.docker-meta.outputs.tags }}
-          labels: ${{ steps.docker-meta.outputs.labels }}
-          annotations: ${{ steps.docker-meta.outputs.annotations }}
+          context: ./apps/labrinth
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.docker_meta.outputs.tags }}
+          labels: ${{ steps.docker_meta.outputs.labels }}

.github/workflows/prepare-pnpm-cache.yml

@@ -1,41 +0,0 @@
-name: Prepare pnpm cache
-
-on:
-  push:
-    paths:
-      - .github/workflows/prepare-pnpm-cache.yml
-      - package.json
-      - pnpm-lock.yaml
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
-jobs:
-  prepare:
-    if: github.repository_owner == 'modrinth'
-    runs-on: blacksmith-2vcpu-ubuntu-2404
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Cache pnpm
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - name: Install dependencies
-        run: pnpm recursive install --frozen-lockfile

.github/workflows/theseus-build.yml

@@ -1,203 +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: false
-        required: false
-      environment:
-        description: Environment
-        type: choice
-        options:
-          - prod
-          - staging
-          - prod-with-staging-archon
-        default: prod
-        required: false
-      app-version-override:
-        description: Temporary app version override for updater testing
-        type: string
-        required: false
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
-jobs:
-  build:
-    name: Build
-    env:
-      VITE_STRIPE_PUBLISHABLE_KEY: pk_live_51JbFxJJygY5LJFfKLVVldb10HlLt24p421OWRsTOWc5sXYFOnFUXWieSc6HD3PHo25ktx8db1WcHr36XGFvZFVUz00V9ixrCs5
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [
-            blacksmith-6vcpu-macos-26,
-            blacksmith-8vcpu-windows-2025, # At time of writing, Windows 4 vCPU VMs don't seem to actually exist
-            blacksmith-4vcpu-ubuntu-2404,
-          ]
-        include:
-          - platform: blacksmith-6vcpu-macos-26
-            artifact-target-name: universal-apple-darwin
-          - platform: blacksmith-8vcpu-windows-2025
-            artifact-target-name: x86_64-pc-windows-msvc
-          - platform: blacksmith-4vcpu-ubuntu-2404
-            artifact-target-name: x86_64-unknown-linux-gnu
-
-    runs-on: ${{ matrix.platform }}
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
-
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
-        with:
-          rustflags: ''
-          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-          cache: 'pnpm'
-
-      - name: Generate tauri-dev.conf.json
-        shell: bash
-        run: |
-          GIT_HASH=$(git rev-parse --short HEAD)
-          cat > apps/app/tauri-dev.conf.json <<EOF
-          {
-            "productName": "Modrinth App (dev-${GIT_HASH})",
-            "mainBinaryName": "Modrinth App (dev-${GIT_HASH})",
-            "identifier": "ModrinthApp-dev-${GIT_HASH}",
-            "bundle": {
-              "fileAssociations": []
-            }
-          }
-          EOF
-
-      - name: Install Linux build dependencies
-        if: contains(matrix.platform, 'ubuntu')
-        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
-        with:
-          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-          version: v1 # cache key
-
-      - name: Setup Dasel
-        uses: jaxxstorm/action-install-gh-release@25e24d2d23ae098373794ef1d6faecb48ee52da8 # v3.0.0
-        with:
-          repo: TomWright/dasel
-          tag: v2.8.1
-          extension-matching: disable
-          rename-to: ${{ contains(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
-          chmod: 0755
-
-      - name: Set application version and environment
-        shell: bash
-        run: |
-          APP_VERSION="${{ inputs.app-version-override }}"
-          if [ -z "$APP_VERSION" ]; then
-            APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
-          fi
-          BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
-          echo "Setting application version to $APP_VERSION"
-          echo "Using environment $BUILD_ENVIRONMENT"
-          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.${BUILD_ENVIRONMENT}" packages/app-lib/.env
-
-      - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Set up Windows code signing
-        if: contains(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: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
-        if: contains(matrix.platform, 'macos')
-        env:
-          TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
-          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: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
-        if: contains(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"
-          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') || inputs.app-version-override != '') && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
-          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: contains(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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
-        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/release/bundle/appimage/Modrinth App (dev-*)_*.AppImage*
-            target/release/bundle/deb/Modrinth App (dev-*)_*.deb*
-            target/release/bundle/rpm/Modrinth App (dev-*)-*.rpm*
-            target/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz*
-            target/universal-apple-darwin/release/bundle/macos/Modrinth App (dev-*)*.app.tar.gz
-            target/universal-apple-darwin/release/bundle/dmg/Modrinth App (dev-*)*.dmg
-            target/universal-apple-darwin/release/bundle/dmg/Modrinth App_*.dmg*
-            target/release/bundle/nsis/Modrinth App_*-setup.exe*
-            target/release/bundle/nsis/Modrinth App (dev-*)_*-setup.exe*
-            target/release/bundle/nsis/Modrinth App_*-setup.nsis.zip*

.github/workflows/theseus-release.yml

@@ -1,159 +1,156 @@
-name: Modrinth App release
+name: 'Modrinth App build'
 on:
-  workflow_run:
-    workflows: ['Modrinth App build']
-    types: [completed]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+    paths:
+      - .github/workflows/app-release.yml
+      - 'apps/app/**'
+      - 'apps/app-frontend/**'
+      - 'packages/app-lib/**'
+      - 'packages/app-macros/**'
+      - 'packages/assets/**'
+      - 'packages/ui/**'
+      - 'packages/utils/**'
+  workflow_dispatch:
 
 jobs:
-  release:
-    name: Release Modrinth App
-    if: >-
-      github.event.workflow_run.conclusion == 'success' &&
-      github.event.workflow_run.event == 'push' &&
-      startsWith(github.event.workflow_run.head_branch, 'v')
-    runs-on: blacksmith-4vcpu-ubuntu-2404
-    env:
-      VERSION_TAG: ${{ github.event.workflow_run.head_branch }}
-      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
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [macos-latest, self-hosted, ubuntu-22.04]
+
+    runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: Check out code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@v4
 
-      - name: Verify ref is a tag
-        env:
-          GH_TOKEN: ${{ github.token }}
-          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
-        run: |
-          tag_sha=$(gh api "repos/${{ github.repository }}/git/refs/tags/${VERSION_TAG}" --jq '.object.sha' 2>/dev/null || true)
-          if [ -z "$tag_sha" ]; then
-            echo "::error::${VERSION_TAG} is not a git tag in this repo"
-            exit 1
-          fi
-          if [ "$tag_sha" != "$HEAD_SHA" ]; then
-            commit_sha=$(gh api "repos/${{ github.repository }}/git/tags/${tag_sha}" --jq '.object.sha' 2>/dev/null || echo "$tag_sha")
-            if [ "$commit_sha" != "$HEAD_SHA" ]; then
-              echo "::error::Tag ${VERSION_TAG} (${commit_sha}) does not match build head_sha (${HEAD_SHA})"
-              exit 1
-            fi
-          fi
-          echo "Verified ${VERSION_TAG} is a tag pointing at ${HEAD_SHA}"
-
-      - name: Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+      - 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: ${{ env.VERSION_TAG }}
-          use_unzip: true
+          components: rustfmt, clippy
+          targets: aarch64-apple-darwin, x86_64-apple-darwin
 
-      - name: Extract app changelog
+      - 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/*.AppImage
+            !target/release/bundle/appimage/*.AppImage.tar.gz
+            !target/release/bundle/appimage/*.AppImage.tar.gz.sig
+            !target/release/bundle/deb/*.deb
+            !target/release/bundle/rpm/*.rpm
+
+            !target/release/bundle/msi/*.msi
+            !target/release/bundle/msi/*.msi.zip
+            !target/release/bundle/msi/*.msi.zip.sig
+
+            !target/release/bundle/nsis/*.exe
+            !target/release/bundle/nsis/*.nsis.zip
+            !target/release/bundle/nsis/*.nsis.zip.sig
+          key: ${{ runner.os }}-rust-target-${{ hashFiles('**/Cargo.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-rust-target-
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm via corepack
+        shell: bash
+        run: |
+          corepack enable
+          corepack prepare --activate
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: install dependencies (ubuntu only)
+        if: startsWith(matrix.platform, 'ubuntu')
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev pkg-config libayatana-appindicator3-dev librsvg2-dev
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: build app (macos)
+        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config "tauri-release.conf.json"
+        if: startsWith(matrix.platform, 'macos')
         env:
-          GH_TOKEN: ${{ github.token }}
-          VERSION: ${{ env.VERSION_TAG }}
-        run: |
-          LAST_GITHUB_RELEASE_PUBLISHED_AT=$(gh api "repos/${{ github.repository }}/releases/latest" --jq '.published_at // ""' 2>/dev/null || true)
-          LAST_GITHUB_RELEASE_PUBLISHED_AT="$LAST_GITHUB_RELEASE_PUBLISHED_AT" npx --yes tsx scripts/build-theseus-release-notes.ts
+          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: Generate version manifest
-        run: |
-          # Reference: https://tauri.app/plugin/updater/#server-support
-          jq -nc \
-            --arg versionTag "${VERSION_TAG#v}" \
-            --rawfile releaseNotes release-notes.md \
-            --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
-
-          echo "Generated manifest for version ${VERSION_TAG}:"
-          cat updates.json
-
-      - name: Upload release artifacts
+      - 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:
-          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
-        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
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+          DIGICERT_PASSWORD: ${{ secrets.DIGICERT_PASSWORD }}
 
-          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: 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
 
-          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
+            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
 
-          aws s3 cp updates.json "s3://${AWS_BUCKET}"
+            target/release/bundle/msi/*.msi
+            target/release/bundle/msi/*.msi.zip
+            target/release/bundle/msi/*.msi.zip.sig
 
-      - name: Create GitHub release
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          VERSION="${VERSION_TAG#v}"
-
-          gh release create "$VERSION_TAG" \
-            --title "Modrinth App ${VERSION}" \
-            --notes-file release-notes.md \
-            "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION}_x64-setup.exe" \
-            "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/dmg/Modrinth App_${VERSION}_universal.dmg" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION}_amd64.AppImage" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/deb/Modrinth App_${VERSION}_amd64.deb" \
-            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/rpm/Modrinth App-${VERSION}-1.x86_64.rpm"
+            target/release/bundle/nsis/*.exe
+            target/release/bundle/nsis/*.nsis.zip
+            target/release/bundle/nsis/*.nsis.zip.sig

.github/workflows/turbo-ci.yml

@@ -2,169 +2,79 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: ['main']
   pull_request:
     types: [opened, synchronize]
   merge_group:
     types: [checks_requested]
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
-
 jobs:
-  skip-if-clean:
-    name: Skip if merge_queue produces no diff
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check.outputs.skip }}
-    if: ${{ always() }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-
-      - name: Merge Queue CI Check Skipper
-        id: merge-queue-ci-skipper
-        uses: ./.github/merge-queue-ci-skipper
-        with:
-          secret: ${{ secrets.GH_ACCESS_TOKEN }}
-
-      - name: Check merge_group synthetic commit
-        id: check
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          SKIP_CHECK: ${{ steps.merge-queue-ci-skipper.outputs.skip-check }}
-        run: |
-          if [ "$EVENT_NAME" != "merge_group" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-
-          if [ "$SKIP_CHECK" = "true" ]; then
-            echo "skip=true" >> $GITHUB_OUTPUT
-          else
-            echo "skip=false" >> $GITHUB_OUTPUT
-          fi
-
   build:
-    name: Lint and Test
-    runs-on: ubuntu-latest
-    needs: [skip-if-clean]
-    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
-
-    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
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - name: Install build dependencies
-        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
         with:
-          packages: cmake libcurl4-openssl-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
-          version: v2 # cache key
-
-      - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
-        with:
-          node-version-file: .nvmrc
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Get pnpm store path
-        id: pnpm-store
-        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
-
-      - name: Restore pnpm cache
-        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
-        with:
-          path: ${{ steps.pnpm-store.outputs.store-path }}
-          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
           restore-keys: |
-            pnpm-cache-
+            ${{ runner.os }}-turbo-
 
-      - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+      - name: Install build dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Setup Node.JS environment
+        uses: actions/setup-node@v4
         with:
-          rustflags: ''
-          components: clippy, rustfmt
-          cache: false
+          node-version: 20
 
-      - name: Cache Cargo registry and index
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae #v5.0.5
+      - name: Install pnpm via corepack
+        shell: bash
+        run: |
+          corepack enable
+          corepack prepare --activate
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
         with:
-          path: |
-            ~/.cargo/registry
-            ~/.cargo/git
-            ~/.cargo/bin
-          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
-
-      - name: Setup binstall
-        uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
-
-      - name: Setup nextest
-        run: cargo binstall --no-confirm --secure --locked cargo-nextest@0.9.133
-
-      # 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@f9eed3e4680f27610dc6d8c67be1b88593f7dade # v3.0.6
-        with:
-          tool: sqlx-cli@0.8.6
-          locked: false
-          no-default-features: true
-          features: rustls,postgres
-
-      - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install
 
-      - name: Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
+      - name: Build
+        run: pnpm build
+        env:
+          SQLX_OFFLINE: true
 
-      # check if labrinth tests will actually run (cache miss)
-      - name: Check if labrinth tests need to run
-        id: check-labrinth
-        run: |
-          LABRINTH_TEST_STATUS=$(pnpm turbo run test --filter=@modrinth/labrinth --dry-run=json | jq -r '.tasks[] | select(.task == "test") | .cache.status')
-          echo "Labrinth test cache status: $LABRINTH_TEST_STATUS"
-          if [ "$LABRINTH_TEST_STATUS" = "HIT" ]; then
-            echo "needs_services=false" >> $GITHUB_OUTPUT
-          else
-            echo "needs_services=true" >> $GITHUB_OUTPUT
-          fi
+      - name: Lint
+        run: pnpm lint
+        env:
+          SQLX_OFFLINE: true
 
-      - name: Start services
-        if: steps.check-labrinth.outputs.needs_services == 'true'
-        run: docker compose up --wait
+      - name: Start docker compose
+        run: docker compose up -d
 
-      - name: Setup labrinth environment and database
-        if: steps.check-labrinth.outputs.needs_services == 'true'
-        working-directory: apps/labrinth
-        run: |
-          cp .env.local .env
-          sqlx database setup
-
-      - name: Lint and test
-        run: pnpm run ci
-
-      - name: Verify intl:extract has been run
-        run: |
-          pnpm turbo run intl:extract --force
-          pnpm scripts i18n-icu-contract prune-local --check
-          git diff --exit-code --color */*/src/locales/*/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/
@@ -22,15 +23,6 @@ node_modules
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/i18n-ally-custom-framework.yml
-
-# IDE - IntelliJ
-.idea/*
-!.idea/code.iml
-!.idea/gradle.xml
-!.idea/icon.svg
-!.idea/modules.xml
-!.idea/vcs.xml
 
 # misc
 /.sass-cache
@@ -64,26 +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/*
-!.claude/skills/
-.letta
-
-# labrinth demo fixtures
-apps/labrinth/fixtures/demo
-
-*storybook.log
-storybook-static
-
-.wrangler/
-
-# frontend robots.txt
-apps/frontend/src/public/robots.txt
-
-# Oh My Code
-.omc/
-
-# Local dry-run output for scripts/build-theseus-release-notes.mjs
-/test_result.md
-
-packages/tooling-config/script-utils/import-sort.js

.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/code.iml

@@ -10,16 +10,9 @@
       <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" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-log/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/examples" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-util/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/muralpay/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
-</module>
+</module>

.idea/discord.xml

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

.idea/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/icon.svg

@@ -1,4 +0,0 @@
-<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#00af5c"/>
-  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#00af5c"/>
-</svg>

.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>
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/code.iml" filepath="$PROJECT_DIR$/.idea/code.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>

.npmrc

@@ -1,11 +1,2 @@
 strict-peer-dependencies=false
 auto-install-peers=true
-public-hoist-pattern[]=prettier-plugin-*
-public-hoist-pattern[]=@prettier/plugin-*
-public-hoist-pattern[]=eslint
-public-hoist-pattern[]=@eslint/*
-public-hoist-pattern[]=eslint-plugin-*
-public-hoist-pattern[]=@nuxt/eslint-config
-public-hoist-pattern[]=typescript-eslint
-public-hoist-pattern[]=vue-eslint-parser
-public-hoist-pattern[]=globals

.nvmrc

@@ -1 +0,0 @@
-24.15.0

.prettierignore

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

.vscode/extensions.json

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

.vscode/i18n-ally-custom-framework.yml

@@ -1,10 +0,0 @@
-languageIds:
-  - vue
-  - typescript
-  - javascript
-  - typescriptreact
-
-usageMatchRegex:
-  - id:\s*['"]({key})['"]
-
-monopoly: true

.vscode/settings.json

@@ -1,45 +1,8 @@
 {
-	"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": "never"
-	},
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"[vue]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[scss]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[css]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[rust]": {
-		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	},
-	"css.lint.unknownAtRules": "ignore",
-	"scss.lint.unknownAtRules": "ignore",
-	"i18n-ally.localesPaths": [
-		"packages/ui/src/locales",
-		"apps/frontend/src/locales",
-		"packages/moderation/src/locales"
-	],
-	"i18n-ally.pathMatcher": "{locale}/index.{ext}",
-	"i18n-ally.keystyle": "flat",
-	"i18n-ally.sourceLanguage": "en-US",
-	"i18n-ally.namespace": false,
-	"i18n-ally.includeSubfolders": true
+  "prettier.endOfLine": "lf",
+  "editor.formatOnSave": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

AGENTS.md

@@ -1 +0,0 @@
-CLAUDE.md

CLAUDE.md

@@ -1,110 +0,0 @@
-# Modrinth Monorepo
-
-This is the Modrinth monorepo — it contains all Modrinth projects, both frontend and backend. When entering a project, either to edit or analyse, you should read it's CLAUDE.md.
-
-## Architecture
-
-- **Monorepo tooling:** [Turborepo](https://turbo.build/) (`turbo.jsonc`) + [pnpm workspaces](https://pnpm.io/workspaces) (`pnpm-workspace.yaml`)
-- **Frontend:** Vue 3 / Nuxt 3, Tailwind CSS v3
-- **Backend:** Rust (Labrinth API), Postgres, Clickhouse
-- **Indentation:** Use TAB everywhere, never spaces
-
-### Apps (`apps/`)
-
-| App               | Description                    |
-| ----------------- | ------------------------------ |
-| `frontend`        | Main Modrinth website (Nuxt 3) |
-| `app-frontend`    | Desktop/app frontend (Vue 3)   |
-| `app`             | Desktop/app shell (Tauri)      |
-| `app-playground`  | Testing playground for app     |
-| `labrinth`        | Backend API service            |
-| `daedalus_client` | Daedalus client implementation |
-| `docs`            | Documentation site (Astro)     |
-
-### Packages (`packages/`)
-
-| Package            | Description                                           |
-| ------------------ | ----------------------------------------------------- |
-| `ui`               | Shared Vue component library (`@modrinth/ui`)         |
-| `assets`           | Styling and auto-generated icons (`@modrinth/assets`) |
-| `api-client`       | API client for Nuxt, Tauri, and Node/browser          |
-| `app-lib`          | Shared app library                                    |
-| `blog`             | Blog system and changelog data                        |
-| `utils`            | Shared utility functions (mostly deprecated)          |
-| `moderation`       | Moderation utilities                                  |
-| `daedalus`         | Daedalus protocol                                     |
-| `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
-| `ariadne`          | Analytics library                                     |
-| `modrinth-log`     | Logging utilities                                     |
-| `modrinth-maxmind` | MaxMind GeoIP                                         |
-| `modrinth-util`    | General utilities                                     |
-| `muralpay`         | Payment processing                                    |
-| `path-util`        | Path utilities                                        |
-| `sqlx-tracing`     | SQLx query tracing                                    |
-
-## Pre-PR Commands
-
-Run these from the **root** folder before opening a pull request - do not run these after each prompt the user gives you, only run when asked, ask the user a question if they want to run it if the user indicates that they are about to create a pull request.
-
-- **Website:** `pnpm prepr:frontend:web`
-- **App frontend:** `pnpm prepr:frontend:app`
-- **Frontend libs:** `pnpm prepr:frontend:lib`
-- **All frontend (app+web):** `pnpm prepr`
-- **Labrinth (backend):** See `apps/labrinth/AGENTS.md`
-
-The website and app `prepr` commands
-
-## Dev Commands
-
-- **Website:** `pnpm web:dev` (copy `.env` template in `apps/frontend/` first)
-- **App:** `pnpm app:dev` (copy `.env` template in `packages/app-lib/` first)
-- **Storybook (packages/ui):** `pnpm storybook`
-
-## Project-Specific Instructions
-
-Each project may have its own file with detailed instructions:
-
-- [`apps/labrinth/AGENTS.md`](apps/labrinth/AGENTS.md) — Backend API
-- [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
-
-## Code Guidelines
-
-### Comments
-- DO NOT use "heading" comments like: `=== Helper methods ===`.
-- Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
-
-## Bash Guidelines
-
-### Output handling
-- DO NOT pipe output through `head`, `tail`, `less`, or `more`
-- NEVER use `| head -n X` or `| tail -n X` to truncate output
-- IMPORTANT: Run commands directly without pipes when possible
-- IMPORTANT: If you need to limit output, use command-specific flags (e.g. `git log -n 10` instead of `git log | head -10`)
-- ALWAYS read the full output — never pipe through filters
-
-### General
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to
-- For Frontend, when doing lint checks, only use the `prepr` commands, do not use `typecheck` or `tsc` etc.
-- Types in `@modrinth/utils` are considered highly outdated, if a component needs them, check if you can switch said component to use types from `packages/api-client`
-- When provided problems, do not say "I didn't introduce these problems" (shifting the blame/effort) - just fix them.
-
-## Edit Tool - Whitespace Handling (CLAUDE ONLY)
-
-The Read tool uses `→` to mark where line numbers end and file content begins.
-
-**Rule:** Copy the EXACT whitespace that appears after the `→` marker.
-- Whatever appears between `→` and the code text is what's actually in the file
-- That whitespace must be used EXACTLY in Edit tool's old_string
-- Don't count arrows, don't interpret - just copy what's after the `→`
-
-**Example:**
-14→		private byte tag;
-For Edit, use: `		private byte tag;` (copy everything after →, including the two tabs)
-
-**If Edit fails:** Stop and explain the problem. Do not attempt sed/awk/bash workarounds.
-
-**IMPORTANT**: Trust the Read tool output. Copy what's after `→` into Edit immediately. DO NOT verify with sed/od/grep first - that's wasting time and the instructions already tell you to stop if Edit fails, not to pre-verify.
-
-## Standards
-
-Standards available at the @standards/ folder.

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,297 +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/labrinth-derive",
-  "packages/modrinth-content-management",
-  "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-minecraft-ping = { path = "packages/async-minecraft-ping" }
-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"
-aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
-  "default-https-client",
-  "rt-tokio",
-  "rustls",
-] }
-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.15.0", 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"
-core-foundation = "0.10.1"
-core-graphics = "0.24.0"
-daedalus = { path = "packages/daedalus" }
-darling = { version = "0.23" }
-dashmap = "6.1.0"
-data-url = "0.3.2"
-deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
-derive_more = "2.1.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-lite = "2.6.1"
-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-content-management = { path = "packages/modrinth-content-management" }
-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 }
-objc2-app-kit = { version = "0.3.2", default-features = false }
-p256 = "0.13.2"
-parking_lot = "0.12.5"
-paste = "1.0.15"
-path-util = { path = "packages/path-util" }
-phf = { version = "0.13.1", features = ["macros"] }
-png = "0.18.0"
-proc-macro2 = { version = "1.0" }
-prometheus = "0.14.0"
-quartz_nbt = "0.2.9"
-quick-xml = "0.38.3"
-quote = { version = "1.0" }
-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
-rdkafka = { version = "0.36.2", features = ["cmake-build"] }
-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",
-] }
-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 }
-sqlx-tracing = { path = "packages/sqlx-tracing" }
-strum = "0.27.2"
-syn = { version = "2.0" }
-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-fs = "2.4.5"
-tauri-plugin-http = "2.5.7"
-tauri-plugin-opener = "2.5.0"
-tauri-plugin-os = "2.3.1"
-tauri-plugin-single-instance = "2.3.4"
-tauri-plugin-updater = { git = "https://github.com/modrinth/plugins-workspace", rev = "0d30f2aa28ec668ce187d527da1c475da3c01cbc", 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-scalar = { version = "0.3.0", default-features = false }
-uuid = "1.18.1"
-validator = "0.20.0"
-webauthn-rs = "0.5.5"
-webauthn-rs-proto = "0.5.5"
-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 = "allow"
-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"
-result_large_err = "allow"
-todo = "warn"
-too_many_arguments = "allow"
-type_complexity = "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
-
-# Specific profile for labrinth production builds
-[profile.release-labrinth]
-inherits = "release"
-opt-level = 2
-strip = false  # Keep debug symbols for Sentry
-lto = "thin"  # Enable LTO but keep compile times reasonable
-panic = "unwind"  # Don't exit the whole app on panic in production
+[patch.crates-io]
+wry = { git = "https://github.com/modrinth/wry", rev ="cdbf938" }

README.md

@@ -15,10 +15,10 @@ If you're not a developer and you've stumbled upon this repository, you can acce
 
 ## Development
 
-This repository contains two primary packages. For detailed development information, please refer to their respective guides:
+This repository contains two primary packages. For detailed development information, please refer to their respective READMEs:
 
-- [Website frontend](https://docs.modrinth.com/contributing/knossos/)
-- [Desktop app](https://docs.modrinth.com/contributing/theseus/)
+- [Web Interface](apps/frontend/README.md)
+- [Desktop App](apps/app/README.md)
 
 ## Contributing
 

_typos.toml

@@ -1,23 +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"
-# short for "constants"
-consts = "consts"
-# short for "Copy"
-Cpy = "Cpy"

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,71 +1,57 @@
 {
-	"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",
-		"intl:prune-local": "pnpm -w scripts i18n-icu-contract prune-local --scope apps/app-frontend",
-		"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-fs": "^2.4.5",
-		"@tauri-apps/plugin-http": "~2.5.7",
-		"@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",
-		"@vueuse/core": "^11.1.0",
-		"dayjs": "^1.11.10",
-		"floating-vue": "^5.2.2",
-		"fuse.js": "^6.6.2",
-		"intl-messageformat": "^10.7.7",
-		"ofetch": "^1.3.4",
-		"overlayscrollbars": "^2.15.1",
-		"pinia": "^3.0.0",
-		"posthog-js": "^1.158.2",
-		"three": "^0.172.0",
-		"vite-svg-loader": "^5.1.0",
-		"vue": "^3.5.13",
-		"vue-i18n": "^10.0.0",
-		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8",
-		"vuedraggable": "^4.1.0"
-	},
-	"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": "^8.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.9.2",
+  "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/components,src/composables,src/helpers,src/pages,src/store}/**/*.{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"
+  },
+  "dependencies": {
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/ui": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@sentry/vue": "^8.27.0",
+    "@tauri-apps/api": "^2.1.1",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-os": "^2.2.0",
+    "@tauri-apps/plugin-opener": "^2.2.1",
+    "@tauri-apps/plugin-updater": "^2.3.0",
+    "@tauri-apps/plugin-window-state": "^2.2.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.5.13",
+    "vue-multiselect": "3.0.0",
+    "vue-router": "4.3.0",
+    "vue-virtual-scroller": "v2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@formatjs/cli": "^6.2.12",
+    "@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.4.6",
+    "vue-tsc": "^2.1.6"
+  },
+  "packageManager": "pnpm@9.4.0",
+  "web-types": "../../web-types.json"
 }

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,9 @@
-export { default as AddProjectImage } from './add-project.svg'
 export { default as SwapIcon } from './arrow-left-right.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 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 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'

apps/app-frontend/src/assets/modrinth_servers.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" version="1.1" viewBox="0 0 1793 199">
+  <g>
+    <g id="Layer_1">
+      <g id="green" fill="var(--color-brand)">
+        <path d="M1184.1,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
+        <path d="M1291.1,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
+        <path d="M1357.2,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
+        <path d="M1460,165.3l-40.8-95.1h23.2l35.1,83.9h-11.4l36.3-83.9h21.4l-40.8,95.1h-23Z"/>
+        <path d="M1579.6,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
+        <path d="M1645.7,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
+        <path d="M1749.9,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
+        <g>
+          <path d="M9.8,143l63.4-38.1-5.8-15.3,18.1-18.6,22.9-4.9,6.6,8.2-10.6,10.7-9.2,2.9-6.6,6.8,3.2,9,6.5,6.9,9.2-2.5,6.6-7.2,14.3-4.5,4.3,9.6-14.8,18.1-24.8,7.8-11.1-12.4-63.6,38.2c-3-3.9-6.5-9.4-8.8-14.7ZM192.8,65.4l-50.4,13.6c2.8,7.4,3.7,11.7,4.5,16.5l50.3-13.6c-.8-5.4-2.2-10.8-4.4-16.5Z" fill-rule="evenodd"/>
+          <path d="M17.3,106.5c3.6,42.1,38.9,75.2,82,75.2s60.7-18.9,74-46.3l16.4,5.7c-15.8,34.1-50.3,57.9-90.4,57.9S3.6,158.2,0,106.5h17.3ZM.3,89.4C5.3,39.2,47.8,0,99.3,0s99.5,44.6,99.5,99.5-1.1,17.4-3.3,25.5l-16.3-5.7c1.6-6.5,2.4-13.1,2.4-19.8,0-45.4-36.9-82.3-82.3-82.3S22.6,48.7,17.6,89.4H.3Z" fill-rule="evenodd"/>
+          <path d="M99,51.6c-26.4,0-47.9,21.5-47.9,48s21.5,48,48,48,2.7,0,4-.2l4.8,16.8c-2.9.4-5.8.6-8.8.6-36,0-65.2-29.2-65.2-65.2S63.1,34.4,99,34.4s1.8,0,2.7,0l-2.7,17.1ZM118.6,37.4c26.4,8.3,45.6,33,45.6,62.2s-16.4,50.2-39.8,60l-4.8-16.7c16.2-7.7,27.4-24.2,27.4-43.3s-13-38.1-31.1-44.9l2.7-17.2Z" fill-rule="evenodd"/>
+        </g>
+      </g>
+      <g id="black" fill="currentColor">
+        <path d="M354.8,69.2c12,0,21.7,3.4,28.6,10.4,7,7.2,10.6,17.5,10.6,31.5v54.8h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,5-6.8,12.2-6.8,21.3v48.5h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,4.8-6.8,12-6.8,21.3v48.5h-22.4v-95.6h21.3v12.2c3.6-4.3,8.1-7.5,13.4-9.8,5.4-2.3,11.3-3.4,17.9-3.4s13.6,1.3,19.2,3.9c5.5,2.9,9.8,6.8,13.1,12,3.9-5,8.9-8.9,15.2-11.8,6.3-2.7,13.1-4.1,20.6-4.1ZM466,167.2c-9.7,0-18.4-2.1-26.1-6.3-7.6-4-13.8-10.1-18.1-17.5-4.5-7.3-6.6-15.7-6.6-25.2s2.1-17.9,6.6-25.2c4.3-7.4,10.6-13.4,18.1-17.4,7.7-4.1,16.5-6.3,26.1-6.3s18.6,2.1,26.3,6.3c7.7,4.1,13.8,10,18.3,17.4,4.3,7.3,6.4,15.7,6.4,25.2s-2.1,17.9-6.4,25.2c-4.5,7.5-10.6,13.4-18.3,17.5-7.7,4.1-16.5,6.3-26.3,6.3h0ZM466,148c8.2,0,15-2.7,20.4-8.2,5.4-5.5,8.1-12.7,8.1-21.7s-2.7-16.1-8.1-21.7c-5.4-5.5-12.2-8.2-20.4-8.2s-15,2.7-20.2,8.2c-5.4,5.5-8.1,12.7-8.1,21.7s2.7,16.1,8.1,21.7c5.2,5.5,12,8.2,20.2,8.2ZM631.5,33.1v132.8h-21.5v-12.3c-3.7,4.4-8.3,7.9-13.6,10.2-5.5,2.3-11.5,3.4-18.1,3.4s-17.4-2-24.7-6.1c-7.3-4.1-13.2-9.8-17.4-17.4-4.1-7.3-6.3-15.9-6.3-25.6s2.1-18.3,6.3-25.6c4.1-7.3,10-13.1,17.4-17.2,7.3-4.1,15.6-6.1,24.7-6.1s12.2,1.1,17.4,3.2c5.2,2.1,9.8,5.4,13.4,9.7v-49h22.4ZM581.1,148c5.4,0,10.2-1.3,14.5-3.8,4.3-2.3,7.7-5.9,10.2-10.4,2.5-4.5,3.8-9.8,3.8-15.7s-1.3-11.3-3.8-15.7c-2.5-4.5-5.9-8.1-10.2-10.6-4.3-2.3-9.1-3.6-14.5-3.6s-10.2,1.3-14.5,3.6c-4.3,2.5-7.7,6.1-10.2,10.6-2.5,4.5-3.8,9.8-3.8,15.7s1.3,11.3,3.8,15.7c2.5,4.5,5.9,8.1,10.2,10.4,4.3,2.5,9.1,3.8,14.5,3.8ZM681.6,84.3c6.4-10,17.7-15,34-15v21.3c-1.7-.3-3.4-.5-5.2-.5-8.8,0-15.6,2.5-20.4,7.5-4.8,5.2-7.3,12.5-7.3,22v46.4h-22.4v-95.6h21.3v14h0ZM734.1,70.3h22.4v95.6h-22.4v-95.6ZM745.4,54.6c-4.1,0-7.5-1.3-10.2-3.9-2.7-2.4-4.2-5.9-4.1-9.5,0-3.8,1.4-7,4.1-9.7,2.7-2.5,6.1-3.8,10.2-3.8s7.5,1.3,10.2,3.6c2.7,2.5,4.1,5.5,4.1,9.3s-1.3,7.2-3.9,9.8c-2.7,2.7-6.3,4.1-10.4,4.1ZM839.5,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4v-95.6h21.3v12.3c3.8-4.5,8.4-7.7,14-10,5.5-2.3,12-3.4,19-3.4ZM964.8,160.7c-2.8,2.2-6,3.9-9.5,4.8-3.9,1.1-7.9,1.6-12,1.6-10.6,0-18.6-2.7-24.3-8.2-5.7-5.5-8.6-13.4-8.6-24v-46h-15.7v-17.9h15.7v-21.8h22.4v21.8h25.6v17.9h-25.6v45.5c0,4.7,1.1,8.2,3.4,10.6,2.3,2.5,5.5,3.8,9.8,3.8s9.1-1.3,12.5-3.9l6.3,15.9ZM1036.9,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4V33.1h22.4v48.3c3.8-3.9,8.2-7,13.8-9.1,5.4-2,11.5-3,18.1-3Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -2,234 +2,123 @@
 @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);
-	--medal-promotion-bg: #000;
-	--medal-promotion-bg-orange: rgba(208, 246, 255, 0.25);
-	--medal-promotion-text-orange: #42abff;
-	--medal-promotion-bg-gradient: linear-gradient(
-		90deg,
-		rgba(66, 170, 255, 0.15),
-		rgba(0, 0, 0, 0) 100%
-	);
+  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: inherit;
-	text-decoration: none;
-	-webkit-font-smoothing: antialiased;
-	will-change: filter;
+  color: var(--color-link);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+input {
+  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;
+  width: 16px;
+  border: 3px solid transparent;
+  opacity: 0.5;
+  transition: opacity 0.2s ease-in-out;
 }
 
 *::-webkit-scrollbar:hover {
-	opacity: 1;
+  opacity: 1;
 }
 
 *::-webkit-scrollbar-track {
-	background: transparent;
+  background: transparent;
 }
 
 *::-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: 5px solid transparent;
+  background-clip: content-box;
 }
 
 .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;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 
 .card-shadow {
-	box-shadow: var(--shadow-card);
-}
-
-// From the Bootstrap project
-// The MIT License (MIT)
-// Copyright (c) 2011-2023 The Bootstrap Authors
-// https://github.com/twbs/bootstrap/blob/2f617215755b066904248525a8c56ea425dde871/scss/mixins/_visually-hidden.scss#L8
-.visually-hidden {
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0, 0, 0, 0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-
-	&:not(caption) {
-		position: absolute !important;
-	}
+  box-shadow: var(--shadow-card);
 }
 
 @import '@modrinth/assets/omorphia.scss';
-
-input {
-	border-radius: var(--size-rounded-sm);
-	box-sizing: border-box;
-	border: 2px solid transparent;
-	// safari iOS rounds inputs by default
-	// set the appearance to none to prevent this
-	appearance: none !important;
-}
-
-pre {
-	font-weight: var(--font-weight-regular);
-}
-
-input,
-textarea {
-	background: var(--color-button-bg);
-	color: var(--color-text);
-	padding: 0.5rem 1rem;
-	font-weight: var(--font-weight-medium);
-	border: none;
-	outline: 2px solid transparent;
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-	transition: box-shadow 0.1s ease-in-out;
-	min-height: 36px;
-
-	&:focus,
-	&:focus-visible {
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 0.25rem var(--color-brand-shadow);
-		color: var(--color-button-text-active);
-	}
-
-	&:disabled,
-	&[disabled='true'] {
-		opacity: 0.6;
-		pointer-events: none;
-		cursor: not-allowed;
-	}
-
-	&:focus::placeholder {
-		opacity: 0.8;
-	}
-
-	&::placeholder {
-		color: var(--color-button-text);
-		opacity: 0.6;
-	}
-}

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,47 +1,36 @@
 <script setup>
-import {
-	ClipboardCopyIcon,
-	EyeIcon,
-	FolderOpenIcon,
-	PlayIcon,
-	PlusIcon,
-	SearchIcon,
-	StopCircleIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import {
-	Accordion,
-	DropdownSelect,
-	formatLoader,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
-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 ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
-import { install_duplicate_instance } from '@/helpers/install'
-import { remove } from '@/helpers/instance'
-
-const { handleError } = injectNotificationManager()
-
-const { formatMessage } = useVIntl()
+import { computed, ref } from 'vue'
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  StopCircleIcon,
+  EyeIcon,
+  SearchIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Button, 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'
+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)
@@ -49,309 +38,336 @@ const instanceComponents = ref(null)
 const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)
 
-async function deleteInstance() {
-	if (currentDeleteInstance.value) {
-		instanceComponents.value = instanceComponents.value.filter(
-			(x) => x.instance.id !== currentDeleteInstance.value,
-		)
-		await remove(currentDeleteInstance.value).catch(handleError)
-	}
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    instanceComponents.value = instanceComponents.value.filter(
+      (x) => x.instance.path !== currentDeleteInstance.value,
+    )
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
 }
 
-async function duplicateInstance(p) {
-	await install_duplicate_instance(p).catch(handleError)
+async function duplicateProfile(p) {
+  await duplicate(p).catch(handleError)
 }
 
-const handleRightClick = (event, instanceId) => {
-	const item = instanceComponents.value.find((x) => x.instance.id === instanceId)
-	const baseOptions = [
-		{ name: 'add_content' },
-		{ type: 'divider' },
-		{ name: 'edit' },
-		{ name: 'duplicate' },
-		{ name: 'open' },
-		{ name: 'copy' },
-		{ type: 'divider' },
-		{
-			name: 'delete',
-			color: 'danger',
-		},
-	]
+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',
+    },
+  ]
 
-	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 duplicateInstance(args.item.instance.id)
-			break
-		case 'open':
-			await args.item.openFolder()
-			break
-		case 'copy':
-			await navigator.clipboard.writeText(args.item.instance.id)
-			break
-		case 'delete':
-			currentDeleteInstance.value = args.item.instance.id
-			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',
-		collapsedGroups: [],
-	},
-	localStorage,
-	{ mergeDefaults: true },
-)
-
 const search = ref('')
-const collapsedSectionKeys = computed(() => new Set(state.value.collapsedGroups ?? []))
-
-const getSectionKey = (sectionName) => `${state.value.group}:${sectionName}`
-
-const isSectionCollapsed = (sectionName) => {
-	return collapsedSectionKeys.value.has(getSectionKey(sectionName))
-}
-
-const setSectionCollapsed = (sectionName, collapsed) => {
-	const sectionKey = getSectionKey(sectionName)
-	const collapsedSections = new Set(state.value.collapsedGroups ?? [])
-
-	if (collapsed) {
-		collapsedSections.add(sectionKey)
-	} else {
-		collapsedSections.delete(sectionKey)
-	}
-
-	state.value.collapsedGroups = [...collapsedSections]
-}
+const group = ref('Group')
+const sortBy = ref('Name')
 
 const filteredResults = computed(() => {
-	const { group = 'Group', sortBy = 'Name' } = state.value
+  const 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))
-		})
-	}
+  const instanceMap = new Map()
 
-	const instanceMap = new Map()
+  if (group.value === 'Loader') {
+    instances.forEach((instance) => {
+      const loader = formatCategoryHeader(instance.loader)
+      if (!instanceMap.has(loader)) {
+        instanceMap.set(loader, [])
+      }
 
-	if (group === 'Loader') {
-		instances.forEach((instance) => {
-			const loader = formatLoader(formatMessage, instance.loader)
-			if (!instanceMap.has(loader)) {
-				instanceMap.set(loader, [])
-			}
+      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(loader).push(instance)
-		})
-	} else if (group === '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.value === 'Group') {
+    instances.forEach((instance) => {
+      if (instance.groups.length === 0) {
+        instance.groups.push('None')
+      }
 
-			instanceMap.get(instance.game_version).push(instance)
-		})
-	} else if (group === 'Group') {
-		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.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])
+    })
+  }
 
-	// 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])
-		})
-	}
-
-	return instanceMap
+  return instanceMap
 })
 </script>
 <template>
-	<div class="flex gap-2">
-		<StyledInput
-			v-model="search"
-			:icon="SearchIcon"
-			type="text"
-			placeholder="Search"
-			clearable
-			wrapper-class="flex-1"
-		/>
-		<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>
-	<Accordion
-		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
-			key,
-			value,
-		}))"
-		:key="instanceSection.key"
-		:divider="instanceSection.key !== 'None'"
-		:open-by-default="!isSectionCollapsed(instanceSection.key)"
-		class="row"
-		@on-open="setSectionCollapsed(instanceSection.key, false)"
-		@on-close="setSectionCollapsed(instanceSection.key, true)"
-	>
-		<template v-if="instanceSection.key !== 'None'" #title>
-			<span class="text-base">{{ instanceSection.key }}</span>
-		</template>
-		<section class="instances">
-			<Instance
-				v-for="instance in instanceSection.value"
-				ref="instanceComponents"
-				:key="instance.id + instance.install_stage"
-				:instance="instance"
-				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.id)"
-			/>
-		</section>
-	</Accordion>
-	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteInstance" />
-	<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>
+  <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="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="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>
 </template>
 <style lang="scss" scoped>
 .row {
-	width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+
+  .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);
+    }
+
+    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);
+
+  .iconified-input {
+    flex-grow: 1;
+
+    input {
+      min-width: 100%;
+    }
+  }
+
+  .sort-dropdown {
+    width: 10rem;
+  }
+
+  .filter-dropdown {
+    width: 15rem;
+  }
+
+  .group-dropdown {
+    width: 10rem;
+  }
+
+  .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(16rem, 1fr));
+  width: 100%;
+  gap: 0.75rem;
+  margin-right: auto;
+  scroll-behavior: smooth;
+  overflow-y: auto;
 }
 </style>

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

@@ -0,0 +1,141 @@
+<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,56 +1,50 @@
 <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 ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
 import Instance from '@/components/ui/Instance.vue'
-import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
-import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+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 { install_duplicate_instance } from '@/helpers/install'
-import { kill, remove, run } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process.js'
-import { showInstanceInFolder } from '@/helpers/utils.js'
-import { injectContentInstall } from '@/providers/content-install'
 import { handleSevereError } from '@/store/error.js'
-
-const { handleError } = injectNotificationManager()
-const { install: installVersion } = injectContentInstall()
+import { install as installVersion } from '@/store/install.js'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 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)
@@ -61,130 +55,125 @@ const deleteConfirmModal = ref(null)
 
 const currentDeleteInstance = ref(null)
 
-async function deleteInstance() {
-	if (currentDeleteInstance.value) {
-		await remove(currentDeleteInstance.value).catch(handleError)
-	}
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
 }
 
-async function duplicateInstance(p) {
-	await install_duplicate_instance(p).catch(handleError)
+async function duplicateProfile(p) {
+  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_instance_id(passedInstance.id).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.id).catch((err) => handleSevereError(err, { instanceId: args.item.id }))
-			trackEvent('InstanceStart', {
-				loader: args.item.loader,
-				game_version: args.item.game_version,
-			})
-			break
-		case 'stop':
-			await kill(args.item.id).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.id },
-			})
-			break
-		case 'edit':
-			await router.push({
-				path: `/instance/${encodeURIComponent(args.item.id)}`,
-			})
-			break
-		case 'duplicate':
-			if (args.item.install_stage == 'installed') await duplicateInstance(args.item.id)
-			break
-		case 'delete':
-			currentDeleteInstance.value = args.item.id
-			deleteConfirmModal.value.show()
-			break
-		case 'open_folder':
-			await showInstanceInFolder(args.item.id)
-			break
-		case 'copy_path':
-			await navigator.clipboard.writeText(args.item.id)
-			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':
+      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
+  }
 }
 
 const maxInstancesPerCompactRow = ref(1)
@@ -192,177 +181,182 @@ 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)
 
-	// 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)
 
-	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
-	}
+  if (maxInstancesPerRow.value < 5) {
+    maxInstancesPerRow.value *= 2
+  }
+  if (maxInstancesPerCompactRow.value < 5) {
+    maxInstancesPerCompactRow.value *= 2
+  }
+  if (maxProjectsPerRow.value < 3) {
+    maxProjectsPerRow.value *= 2
+  }
 }
 
 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()
+  resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
+  resizeObserver.value.observe(rowContainer.value)
+  window.addEventListener('resize', calculateCardsPerRow)
 })
 
 onUnmounted(() => {
-	window.removeEventListener('resize', calculateCardsPerRow)
-	if (rowContainer.value) {
-		resizeObserver.value.unobserve(rowContainer.value)
-	}
+  window.removeEventListener('resize', calculateCardsPerRow)
+  resizeObserver.value.unobserve(rowContainer.value)
 })
 </script>
 
 <template>
-	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteInstance" />
-	<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.id"
-					:instance="instance"
-					:compact="row.compact"
-					:first="instanceIndex === 0"
-					@contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
-				/>
-			</section>
-			<section v-else ref="modsRow" class="projects">
-				<LegacyProjectCard
-					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 ref="rowContainer" class="flex flex-col gap-4">
+    <div v-for="(row, rowIndex) in actualInstances" ref="rows" :key="row.label" class="row">
+      <router-link
+        class="flex mb-3 leading-none items-center gap-1 text-primary text-lg font-bold hover:underline group"
+        :class="{ 'mt-1': rowIndex > 0 }"
+        :to="row.route"
+      >
+        {{ row.label }}
+        <ChevronRightIcon
+          class="h-5 w-5 stroke-[3px] group-hover:translate-x-1 transition-transform group-hover:text-brand"
+        />
+      </router-link>
+      <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>
 </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%;
+  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-md);
+      font-weight: bolder;
+      white-space: nowrap;
+      color: var(--color-base);
+    }
 
-		svg {
-			height: 1.25rem;
-			width: 1.25rem;
-			color: var(--color-base);
-		}
-	}
+    svg {
+      height: 1.25rem;
+      width: 1.25rem;
+      color: var(--color-base);
+    }
+  }
 
-	.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(20rem, 1fr));
+    grid-gap: 0.75rem;
+    width: 100%;
 
-		&.compact {
-			grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-			gap: 0.75rem;
-		}
-	}
+    &.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: 0.75rem;
+  .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/ui/AccountsCard.vue

@@ -1,287 +1,409 @@
 <template>
-	<div
-		v-if="accounts.length === 0"
-		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
-	>
-		<span>{{ formatMessage(messages.notSignedIn) }}</span>
-		<ButtonStyled color="brand">
-			<button color="primary" :disabled="loginDisabled" @click="login()">
-				<LogInIcon v-if="!loginDisabled" />
-				<SpinnerIcon v-else class="animate-spin" />
-				{{ formatMessage(messages.signInToMinecraft) }}
-			</button>
-		</ButtonStyled>
-	</div>
-	<Accordion
-		v-else
-		class="w-full mt-2 bg-button-bg border border-solid border-surface-5 rounded-xl overflow-clip"
-		button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
-		:open-by-default="false"
-	>
-		<template #title>
-			<div class="flex gap-2 w-full min-w-0">
-				<Avatar
-					size="36px"
-					:src="
-						selectedAccount
-							? avatarUrl
-							: 'https://launcher-files.modrinth.com/assets/steve_head.png'
-					"
-				/>
-				<div class="flex flex-col items-start w-full min-w-0">
-					<span class="truncate w-full text-left">{{
-						selectedAccount ? selectedAccount.profile.name : formatMessage(messages.selectAccount)
-					}}</span>
-					<span class="text-secondary text-xs">{{ formatMessage(messages.minecraftAccount) }}</span>
-				</div>
-			</div>
-		</template>
-		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
-			<template v-if="accounts.length > 0">
-				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
-					<button
-						class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base min-w-0"
-						@click="setAccount(account)"
-					>
-						<RadioButtonCheckedIcon
-							v-if="selectedAccount && selectedAccount.profile.id === account.profile.id"
-							class="w-5 h-5 text-brand shrink-0"
-						/>
-						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
-						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
-						<p
-							class="m-0 truncate min-w-0"
-							:class="
-								selectedAccount && selectedAccount.profile.id === account.profile.id
-									? 'text-contrast font-semibold'
-									: 'text-primary'
-							"
-						>
-							{{ account.profile.name }}
-						</p>
-					</button>
-					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-						<button
-							v-tooltip="formatMessage(messages.removeAccount)"
-							class="mr-2"
-							@click="logout(account.profile.id)"
-						>
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-			<div class="flex flex-col gap-2 px-2 pt-2">
-				<ButtonStyled v-if="accounts.length > 0" class="w-full">
-					<button :disabled="loginDisabled" @click="login()">
-						<PlusIcon />
-						{{ formatMessage(messages.addAccount) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</Accordion>
+  <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
+          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      "
+    />
+    <div class="flex flex-col w-full">
+      <span>{{ selectedAccount ? selectedAccount.username : '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="`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 lang="ts">
+<script setup>
+import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
-	LogInIcon,
-	PlusIcon,
-	RadioButtonCheckedIcon,
-	RadioButtonIcon,
-	SpinnerIcon,
-	TrashIcon,
-} from '@modrinth/assets'
-import {
-	Accordion,
-	Avatar,
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	useVIntl,
-} from '@modrinth/ui'
-import type { Ref } from 'vue'
-import { computed, onUnmounted, ref } from 'vue'
-
-import { trackEvent } from '@/helpers/analytics'
-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 type { Skin } from '@/helpers/skins'
-import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
 
-const { formatMessage } = useVIntl()
-const { handleError } = injectNotificationManager()
+defineProps({
+  mode: {
+    type: String,
+    required: true,
+    default: 'normal',
+  },
+})
 
-const emit = defineEmits<{
-	change: []
-}>()
+const emit = defineEmits(['change'])
 
-type MinecraftCredential = {
-	profile: {
-		id: string
-		name: string
-	}
-}
-
-const accounts: Ref<MinecraftCredential[]> = ref([])
-const loginDisabled = ref(false)
-const defaultUser = ref<string | undefined>()
-const equippedSkin = ref<Skin | null>(null)
-const headUrlCache = ref(new Map<string, string>())
+const accounts = ref({})
+const defaultUser = ref()
 
 async function refreshValues() {
-	defaultUser.value = await get_default_user().catch(handleError)
-	const userList = await users().catch(handleError)
-	accounts.value = Array.isArray(userList) ? [...userList] : []
-	accounts.value.sort((a, b) => (a.profile?.name ?? '').localeCompare(b.profile?.name ?? ''))
-
-	try {
-		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
-
-		if (equippedSkin.value) {
-			try {
-				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-				headUrlCache.value = new Map(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)
 }
-
-async function setEquippedSkin(skin: Skin) {
-	equippedSkin.value = skin
-
-	try {
-		const headUrl = await getPlayerHeadUrl(skin)
-		headUrlCache.value = new Map(headUrlCache.value).set(skin.texture_key, headUrl)
-	} catch (error) {
-		console.warn('Failed to get head render for equipped skin:', error)
-	}
-}
-
-function setLoginDisabled(value: boolean) {
-	loginDisabled.value = value
-}
-
 defineExpose({
-	refreshValues,
-	setEquippedSkin,
-	setLoginDisabled,
-	loginDisabled,
+  refreshValues,
 })
-
 await refreshValues()
 
-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
+const displayAccounts = computed(() =>
+  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'
-})
+const selectedAccount = computed(() =>
+  accounts.value.find((account) => account.id === defaultUser.value),
+)
 
-function getAccountAvatarUrl(account: MinecraftCredential) {
-	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`
-}
-
-async function setAccount(account: MinecraftCredential) {
-	defaultUser.value = account.profile.id
-	await set_default_user(account.profile.id).catch(handleError)
-	await refreshValues()
-	emit('change')
+async function setAccount(account) {
+  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)
-	}
+  if (loggedIn) {
+    await setAccount(loggedIn)
+    await refreshValues()
+  }
 
-	trackEvent('AccountLogIn')
-	loginDisabled.value = false
+  trackEvent('AccountLogIn')
 }
 
-async function logout(id: string) {
-	await remove_user(id).catch(handleError)
-	await refreshValues()
-	if (!selectedAccount.value && accounts.value.length > 0) {
-		await setAccount(accounts.value[0])
-	} else {
-		emit('change')
-	}
-	trackEvent('AccountLogOut')
+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')
+}
+
+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)
+  }
+}
+
+function toggleMenu(override = true) {
+  if (showCard.value || !override) {
+    showCard.value = false
+  } else {
+    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)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
 })
 
 onUnmounted(() => {
-	unlisten()
-})
-
-const messages = defineMessages({
-	notSignedIn: {
-		id: 'minecraft-account.not-signed-in',
-		defaultMessage: 'Not signed in',
-	},
-	addAccount: {
-		id: 'minecraft-account.add-account',
-		defaultMessage: 'Add account',
-	},
-	removeAccount: {
-		id: 'minecraft-account.remove-account',
-		defaultMessage: 'Remove account',
-	},
-	selectAccount: {
-		id: 'minecraft-account.select-account',
-		defaultMessage: 'Select account',
-	},
-	minecraftAccount: {
-		id: 'minecraft-account.label',
-		defaultMessage: 'Minecraft account',
-	},
-	signInToMinecraft: {
-		id: 'minecraft-account.sign-in',
-		defaultMessage: 'Sign in to Minecraft',
-	},
+  unlisten()
 })
 </script>
+
+<style scoped lang="scss">
+.selected {
+  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;
+}
+
+.account {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 0.5rem 1rem;
+
+  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-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 {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.expanded {
+    left: 13.5rem;
+  }
+
+  &.isolated {
+    position: relative;
+    left: 0;
+    top: 0;
+  }
+}
+
+.accounts-title {
+  font-size: 1.2rem;
+  font-weight: bolder;
+}
+
+.account-group {
+  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;
+
+  img {
+    margin-right: 0.5rem;
+  }
+}
+
+.icon {
+  --size: 1.5rem !important;
+}
+
+.account-row {
+  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;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  translate: 0 -2rem;
+  scale: 0.9;
+}
+
+.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;
+
+  &.expanded {
+    border: 1px solid var(--color-button-bg);
+    padding: 1rem;
+  }
+}
+
+.avatar-text {
+  margin: auto 0 auto 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.text {
+  width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.accounts-text {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.qr-code {
+  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);
+
+  .modal-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+    width: 100%;
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    .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);
+      }
+
+      .btn {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.modal {
+  position: absolute;
+}
+
+.code {
+  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;
+  }
+}
+</style>

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

@@ -1,62 +1,60 @@
 <script setup lang="ts">
-import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
+import { ButtonStyled, 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/instance'
-
-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.id, 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.id },
-	})
+  await router.push({
+    path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : '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">
+    <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>
 </template>

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

@@ -1,638 +0,0 @@
-<template>
-	<div class="flex gap-2 items-center">
-		<ButtonStyled
-			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
-			color="brand"
-			type="transparent"
-			circular
-		>
-			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
-		<div v-if="offline" class="flex items-center gap-1">
-			<UnplugIcon class="text-secondary" />
-			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
-		</div>
-		<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
-			<button
-				v-if="showUpdatePill"
-				type="button"
-				class="!h-[34px] overflow-hidden text-sm !transition-[width,opacity,transform,background-color,color,filter] !duration-200 ease-out"
-				:class="[
-					updatePillWidthClass,
-					{
-						'update-pill-ready-hidden': finishedDownloading && !animateReadyPill,
-						'update-pill-ready-visible': finishedDownloading && animateReadyPill,
-					},
-				]"
-				:disabled="isUpdateDownloading"
-				:aria-busy="isUpdateDownloading"
-				@click="handleUpdateClick"
-			>
-				<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
-				<DownloadIcon v-else />
-				<span v-if="isUpdateDownloading">
-					{{ formatMessage(messages.downloadingUpdate) }}
-					<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
-				</span>
-				<span v-else>{{ updateLabel }}</span>
-			</button>
-		</ButtonStyled>
-		<div
-			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
-		>
-			<template v-if="selectedProcess">
-				<OnlineIndicatorIcon />
-				<div class="text-contrast flex items-center gap-2">
-					<router-link
-						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
-						class="hover:underline"
-					>
-						{{ selectedProcess.instance.name }}
-					</router-link>
-					<Dropdown
-						v-if="currentProcesses.length > 1"
-						placement="bottom"
-						:triggers="['click']"
-						:hide-triggers="['click']"
-						@show="showInstances = true"
-						@hide="showInstances = false"
-					>
-						<ButtonStyled type="transparent" circular size="small">
-							<button
-								v-tooltip="
-									showInstances
-										? formatMessage(messages.hideMoreRunningInstances)
-										: formatMessage(messages.showMoreRunningInstances)
-								"
-							>
-								<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-							</button>
-						</ButtonStyled>
-						<template #popper>
-							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
-								<div
-									v-for="process in currentProcesses"
-									:key="process.uuid"
-									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
-								>
-									<button
-										v-tooltip.left="
-											process.uuid === selectedProcess.uuid
-												? formatMessage(messages.primaryInstance)
-												: formatMessage(messages.makePrimaryInstance)
-										"
-										class="flex flex-grow items-center gap-2"
-										:class="{
-											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
-										}"
-										:disabled="process.uuid === selectedProcess.uuid"
-										@click="selectProcess(process)"
-									>
-										<OnlineIndicatorIcon />
-										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.instance.name }}
-											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
-										</span>
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.stopInstance)"
-										class="active:scale-95 flex"
-										@click.stop="stop(process)"
-									>
-										<StopCircleIcon class="text-red size-5" />
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.viewLogs)"
-										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.instance.id)"
-									>
-										<TerminalSquareIcon class="text-secondary size-5" />
-									</button>
-								</div>
-							</div>
-						</template>
-					</Dropdown>
-				</div>
-				<button
-					v-tooltip="formatMessage(messages.stopInstance)"
-					class="active:scale-95 flex"
-					@click="stop(selectedProcess)"
-				>
-					<StopCircleIcon class="text-red size-5" />
-				</button>
-				<button
-					v-tooltip="formatMessage(messages.viewLogs)"
-					class="active:scale-95 flex"
-					@click="goToTerminal()"
-				>
-					<TerminalSquareIcon class="text-secondary size-5" />
-				</button>
-			</template>
-			<template v-else>
-				<span class="size-2 rounded-full bg-secondary" />
-				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	DownloadIcon,
-	DropdownIcon,
-	OnlineIndicatorIcon,
-	RefreshCwIcon,
-	StarIcon,
-	StopCircleIcon,
-	TerminalSquareIcon,
-	UnplugIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	injectPopupNotificationManager,
-	type PopupNotification,
-	type PopupNotificationProgressItem,
-	useVIntl,
-} from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { Dropdown } from 'floating-vue'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { useInstallJobNotifications } from '@/composables/browse/install-job-notifications'
-import { trackEvent } from '@/helpers/analytics'
-import { loading_listener, process_listener } from '@/helpers/events'
-import { get_many as getInstances } from '@/helpers/instance'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import type { LoadingBar } from '@/helpers/state'
-import { progress_bars_list } from '@/helpers/state'
-import type { GameInstance } from '@/helpers/types'
-import {
-	appUpdateState,
-	downloadAvailableAppUpdate,
-	installAvailableAppUpdate,
-} from '@/providers/app-update'
-
-const { handleError } = injectNotificationManager()
-const popupNotificationManager = injectPopupNotificationManager()
-const { formatMessage } = useVIntl()
-
-const router = useRouter()
-
-const showInstances = ref(false)
-
-interface RunningProcess {
-	uuid: string
-	instance_id: string
-	instance: GameInstance
-}
-
-const messages = defineMessages({
-	offline: {
-		id: 'app.action-bar.offline',
-		defaultMessage: 'Offline',
-	},
-	viewInstance: {
-		id: 'app.action-bar.view-instance',
-		defaultMessage: 'View instance',
-	},
-	showMoreRunningInstances: {
-		id: 'app.action-bar.show-more-running-instances',
-		defaultMessage: 'Show more running instances',
-	},
-	hideMoreRunningInstances: {
-		id: 'app.action-bar.hide-more-running-instances',
-		defaultMessage: 'Hide more running instances',
-	},
-	primaryInstance: {
-		id: 'app.action-bar.primary-instance',
-		defaultMessage: 'Primary instance',
-	},
-	makePrimaryInstance: {
-		id: 'app.action-bar.make-primary-instance',
-		defaultMessage: 'Make primary instance',
-	},
-	stopInstance: {
-		id: 'app.action-bar.stop-instance',
-		defaultMessage: 'Stop instance',
-	},
-	viewLogs: {
-		id: 'app.action-bar.view-logs',
-		defaultMessage: 'View logs',
-	},
-	noInstancesRunning: {
-		id: 'app.action-bar.no-instances-running',
-		defaultMessage: 'No instances running',
-	},
-	downloadingJava: {
-		id: 'app.action-bar.downloading-java',
-		defaultMessage: 'Downloading Java {version}',
-	},
-	downloads: {
-		id: 'app.action-bar.downloads',
-		defaultMessage: 'Downloads',
-	},
-	viewActiveDownloads: {
-		id: 'app.action-bar.view-active-downloads',
-		defaultMessage: 'View active downloads',
-	},
-	update: {
-		id: 'app.action-bar.update',
-		defaultMessage: 'Update',
-	},
-	downloadingUpdate: {
-		id: 'app.action-bar.downloading-update',
-		defaultMessage: 'Downloading update',
-	},
-	reloadToUpdate: {
-		id: 'app.action-bar.reload-to-update',
-		defaultMessage: 'Reload to update',
-	},
-})
-
-const {
-	downloading,
-	downloadPercent,
-	downloadProgress,
-	finishedDownloading,
-	isVisible: isUpdateVisible,
-	metered,
-	restarting,
-} = appUpdateState
-
-const isUpdateDownloading = computed(
-	() =>
-		downloading.value ||
-		(downloadProgress.value > 0 && downloadProgress.value < 1 && !finishedDownloading.value),
-)
-const showUpdatePill = computed(
-	() => isUpdateVisible.value && (finishedDownloading.value || metered.value),
-)
-const animateReadyPill = ref(false)
-const updateLabel = computed(() => {
-	if (isUpdateDownloading.value) {
-		return formatMessage(messages.downloadingUpdate)
-	}
-
-	if (finishedDownloading.value) {
-		return formatMessage(messages.reloadToUpdate)
-	}
-
-	return formatMessage(messages.update)
-})
-const updatePillWidthClass = computed(() => {
-	if (isUpdateDownloading.value) {
-		return 'w-[219px]'
-	}
-
-	if (finishedDownloading.value) {
-		return 'w-[166px]'
-	}
-
-	return '!w-[96px]'
-})
-let readyPillAnimationFrame: number | null = null
-watch([showUpdatePill, finishedDownloading], async ([show, ready], [wasShown, wasReady]) => {
-	if (readyPillAnimationFrame !== null) {
-		cancelAnimationFrame(readyPillAnimationFrame)
-		readyPillAnimationFrame = null
-	}
-
-	if (!show || !ready) {
-		animateReadyPill.value = false
-		return
-	}
-
-	if (wasShown && wasReady) {
-		return
-	}
-
-	animateReadyPill.value = false
-	await nextTick()
-	readyPillAnimationFrame = requestAnimationFrame(() => {
-		animateReadyPill.value = true
-		readyPillAnimationFrame = null
-	})
-})
-async function handleUpdateClick() {
-	if (isUpdateDownloading.value) {
-		return
-	}
-
-	if (finishedDownloading.value) {
-		await installAvailableAppUpdate()
-	} else {
-		await downloadAvailableAppUpdate()
-	}
-}
-
-const currentProcesses = ref<RunningProcess[]>([])
-const selectedProcess = ref<RunningProcess | undefined>()
-
-const refresh = async () => {
-	const processes = ((await getRunningProcesses().catch((error) => {
-		handleError(error)
-		return []
-	})) ?? []) as Array<{ uuid: string; instance_id: string }>
-	const instanceIds = processes.map((process) => process.instance_id)
-	const instances: GameInstance[] = await getInstances(instanceIds).catch((error) => {
-		handleError(error)
-		return []
-	})
-
-	currentProcesses.value = processes
-		.map((process) => {
-			const instance = instances.find((item) => process.instance_id === item.id)
-			if (!instance) {
-				return null
-			}
-			return {
-				...process,
-				instance,
-			}
-		})
-		.filter((process): process is RunningProcess => process !== null)
-	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-		selectedProcess.value = currentProcesses.value[0]
-	}
-}
-
-await refresh()
-
-const offline = ref(!navigator.onLine)
-function handleOffline() {
-	offline.value = true
-}
-function handleOnline() {
-	offline.value = false
-}
-
-onMounted(() => {
-	window.addEventListener('offline', handleOffline)
-	window.addEventListener('online', handleOnline)
-})
-
-const unlistenProcess = await process_listener(async () => {
-	await refresh()
-})
-
-const stop = async (process: RunningProcess) => {
-	try {
-		await killProcess(process.uuid).catch(handleError)
-
-		trackEvent('InstanceStop', {
-			loader: process.instance.loader,
-			game_version: process.instance.game_version,
-			source: 'AppBar',
-		})
-	} catch (e) {
-		console.error(e)
-	}
-	await refresh()
-}
-
-function goToTerminal(instanceId?: string) {
-	const selectedInstanceId = instanceId ?? selectedProcess.value?.instance.id
-	if (!selectedInstanceId) {
-		return
-	}
-	router.push(`/instance/${encodeURIComponent(selectedInstanceId)}/logs`)
-}
-
-const currentLoadingBars = ref<LoadingBar[]>([])
-const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
-const notificationId = ref<string | number | null>(null)
-const dismissed = ref(false)
-
-function getLoadingBarKey(loadingBar: LoadingBar): string {
-	return `${loadingBar.loading_bar_uuid ?? loadingBar.id}`
-}
-
-function getLoadingProgress(loadingBar: LoadingBar): number {
-	if (!loadingBar.total || loadingBar.total <= 0) {
-		return 0
-	}
-	return Math.max(0, Math.min(1, (loadingBar.current ?? 0) / (loadingBar.total ?? 0)))
-}
-
-function getLoadingText(loadingBar: LoadingBar): string {
-	return loadingBar.message ?? ''
-}
-
-function getDisplayIconUrl(icon: string | null | undefined): string | null {
-	if (!icon) {
-		return null
-	}
-	if (/^(https?:|data:|blob:|asset:|tauri:)/.test(icon)) {
-		return icon
-	}
-	return convertFileSrc(icon)
-}
-
-function getNotification(): PopupNotification | null {
-	if (!notificationId.value) {
-		return null
-	}
-	const notification = popupNotificationManager
-		.getNotifications()
-		.find((notification) => notification.id === notificationId.value)
-	return notification ?? null
-}
-
-function removeNotification(): void {
-	if (!notificationId.value) {
-		return
-	}
-	popupNotificationManager.removeNotification(notificationId.value)
-	notificationId.value = null
-}
-
-function buildDownloadItems(): PopupNotificationProgressItem[] {
-	return [
-		...installJobNotifications.progressItems.value,
-		...currentLoadingBars.value.map((bar) => ({
-			id: getLoadingBarKey(bar),
-			title: bar.title ?? '',
-			text: getLoadingText(bar),
-			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
-			progress: getLoadingProgress(bar),
-			waiting: !bar.total || bar.total <= 0,
-			progressType: 'percentage',
-			progressCurrent: bar.current,
-			progressTotal: bar.total,
-		})),
-	]
-}
-
-const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
-const hasActiveLoadingBars = computed(
-	() => currentLoadingBars.value.length > 0 || installJobNotifications.active.value,
-)
-
-function updateNotification(resummon = false): void {
-	if (resummon) {
-		dismissed.value = false
-	}
-
-	if (currentLoadingBars.value.length === 0 && !installJobNotifications.active.value) {
-		removeNotification()
-		dismissed.value = false
-		return
-	}
-
-	if (notificationId.value && !getNotification()) {
-		notificationId.value = null
-		dismissed.value = true
-	}
-
-	if (dismissed.value && !resummon) {
-		return
-	}
-
-	let notif = getNotification()
-	const progressItems = buildDownloadItems()
-
-	if (notif) {
-		notif.title = installJobNotifications.active.value
-			? installJobNotifications.title.value
-			: formatMessage(messages.downloads)
-		notif.text = undefined
-		notif.progressItems = progressItems
-		notif.buttons = installJobNotifications.buttons.value
-		notif.progress = undefined
-		notif.waiting = undefined
-	} else {
-		notif = popupNotificationManager.addPopupNotification({
-			title: installJobNotifications.active.value
-				? installJobNotifications.title.value
-				: formatMessage(messages.downloads),
-			type: 'download',
-			autoCloseMs: null,
-			progressItems,
-			buttons: installJobNotifications.buttons.value,
-		})
-		notificationId.value = notif.id
-	}
-}
-
-function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
-	const formatted = { ...loadingBar }
-	if (formatted.bar_type?.type === 'java_download') {
-		formatted.title = formatMessage(messages.downloadingJava, {
-			version: formatted.bar_type.version,
-		})
-	}
-	if (formatted.bar_type?.instance_id) {
-		formatted.title = formatted.bar_type.instance_name ?? formatted.bar_type.instance_id
-	}
-	if (formatted.bar_type?.pack_name) {
-		formatted.title = formatted.bar_type.pack_name
-	}
-	return formatted
-}
-
-async function refreshLoadingBars() {
-	const bars: Record<string, LoadingBar> = await progress_bars_list().catch((error) => {
-		handleError(error)
-		return {}
-	})
-
-	currentLoadingBars.value = Object.values(bars)
-		.map(formatLoadingBars)
-		.filter(
-			(bar) =>
-				bar?.bar_type?.type !== 'launcher_update' &&
-				![
-					'java_download',
-					'pack_file_download',
-					'pack_download',
-					'minecraft_download',
-					'copy_instance',
-				].includes(bar?.bar_type?.type ?? ''),
-		)
-
-	const instanceIds = Array.from(
-		new Set(
-			currentLoadingBars.value
-				.map((bar) => bar.bar_type?.instance_id)
-				.filter((instanceId): instanceId is string => !!instanceId),
-		),
-	)
-	const instances = instanceIds.length
-		? await getInstances(instanceIds).catch((error) => {
-				handleError(error)
-				return []
-			})
-		: []
-	const instanceIconUrls = new Map(
-		instances.map((instance) => [instance.id, getDisplayIconUrl(instance.icon_path)]),
-	)
-	currentLoadingBarIconUrls.value = Object.fromEntries(
-		currentLoadingBars.value.map((bar) => {
-			const barIconUrl = getDisplayIconUrl(bar.bar_type?.icon)
-			const instanceIconUrl = bar.bar_type?.instance_id
-				? instanceIconUrls.get(bar.bar_type.instance_id)
-				: null
-			return [getLoadingBarKey(bar), barIconUrl ?? instanceIconUrl ?? null]
-		}),
-	)
-
-	currentLoadingBars.value.sort((a, b) => {
-		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
-		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
-		return aKey.localeCompare(bKey)
-	})
-
-	updateNotification()
-}
-
-const installJobNotifications = await useInstallJobNotifications({
-	router,
-	handleError,
-	onChange: updateNotification,
-})
-
-await refreshLoadingBars()
-
-const unlistenLoading = await loading_listener(async () => {
-	await refreshLoadingBars()
-})
-
-function openDownloadToast() {
-	updateNotification(true)
-}
-
-function selectProcess(process: RunningProcess) {
-	selectedProcess.value = process
-}
-
-onBeforeUnmount(() => {
-	removeNotification()
-	dismissed.value = false
-	window.removeEventListener('offline', handleOffline)
-	window.removeEventListener('online', handleOnline)
-	unlistenProcess()
-	unlistenLoading()
-	installJobNotifications.dispose()
-	if (readyPillAnimationFrame !== null) {
-		cancelAnimationFrame(readyPillAnimationFrame)
-	}
-})
-</script>
-
-<style scoped>
-.update-pill-ready-hidden {
-	opacity: 0;
-	transform: scale(0.96);
-}
-
-.update-pill-ready-visible {
-	opacity: 1;
-	transform: scale(1);
-}
-</style>

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

@@ -1,158 +1,62 @@
 <template>
-	<div
-		ref="outerRef"
-		data-tauri-drag-region
-		class="min-w-0 overflow-hidden pl-3"
-		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
-		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
-		@mouseenter="onMouseEnter"
-		@mouseleave="onMouseLeave"
-	>
-		<div
-			ref="innerRef"
-			data-tauri-drag-region
-			class="flex w-fit items-center gap-1"
-			:class="{ 'breadcrumbs-scroll': isAnimating }"
-			@animationiteration="onAnimationIteration"
-		>
-			{{ 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 as string)),
-						query: breadcrumb.query,
-					}"
-					class="shrink-0 whitespace-nowrap text-primary"
-				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</router-link>
-				<span
-					v-else
-					data-tauri-drag-region
-					class="shrink-0 whitespace-nowrap text-contrast font-semibold cursor-default select-none"
-				>
-					{{ resolveLabel(breadcrumb.name) }}
-				</span>
-				<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5 shrink-0" />
-			</template>
-		</div>
-	</div>
+  <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,
+        }"
+        >{{
+          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>
 </template>
 
-<script setup lang="ts">
-import { ChevronRightIcon } from '@modrinth/assets'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-
+<script setup>
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-
-interface Breadcrumb {
-	name: string
-	link?: string
-	query?: Record<string, string>
-}
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 
 const route = useRoute()
+
 const breadcrumbData = useBreadcrumbs()
-
-const breadcrumbs = computed<Breadcrumb[]>(() => {
-	const additionalContext =
-		route.meta.useContext === true
-			? breadcrumbData.context
-			: route.meta.useRootContext === true
-				? breadcrumbData.rootContext
-				: null
-	const crumbs = (route.meta.breadcrumb ?? []) as Breadcrumb[]
-	return additionalContext ? [additionalContext as Breadcrumb, ...crumbs] : crumbs
-})
-
-function resolveLabel(name: string): string {
-	return name.charAt(0) === '?' ? breadcrumbData.getName(name.slice(1)) : name
-}
-
-// Overflow detection
-const outerRef = ref<HTMLDivElement | null>(null)
-const innerRef = ref<HTMLDivElement | null>(null)
-const isOverflowing = ref(false)
-const isAnimating = ref(false)
-const overflowAmount = ref(0)
-
-let hovered = false
-let stopping = false
-
-function checkOverflow() {
-	if (!outerRef.value || !innerRef.value) return
-	const overflow = innerRef.value.scrollWidth - outerRef.value.clientWidth
-	isOverflowing.value = overflow > 0
-	overflowAmount.value = overflow + 12
-}
-
-function onMouseEnter() {
-	hovered = true
-	stopping = false
-	if (isOverflowing.value) {
-		isAnimating.value = true
-	}
-}
-
-function onMouseLeave() {
-	hovered = false
-	if (isAnimating.value) {
-		stopping = true
-	}
-}
-
-function onAnimationIteration() {
-	if (stopping && !hovered) {
-		isAnimating.value = false
-		stopping = false
-	}
-}
-
-let resizeObserver: ResizeObserver | null = null
-
-onMounted(() => {
-	checkOverflow()
-	resizeObserver = new ResizeObserver(checkOverflow)
-	if (outerRef.value) resizeObserver.observe(outerRef.value)
-	if (innerRef.value) resizeObserver.observe(innerRef.value)
-})
-
-onBeforeUnmount(() => {
-	resizeObserver?.disconnect()
-})
-
-watch(breadcrumbs, () => {
-	requestAnimationFrame(checkOverflow)
+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
 })
 </script>
-
-<style scoped>
-.breadcrumb-fade-mask {
-	mask-image: linear-gradient(
-		to right,
-		transparent,
-		black 12px,
-		black calc(100% - 12px),
-		transparent
-	);
-}
-
-.breadcrumbs-scroll {
-	animation: breadcrumb-scroll 10s ease-in-out infinite;
-}
-
-@keyframes breadcrumb-scroll {
-	0% {
-		transform: translateX(0);
-	}
-	35%,
-	65% {
-		transform: translateX(var(--scroll-distance));
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-</style>

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

@@ -1,30 +1,30 @@
 <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="!(isInstanceLink(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'
 
 const emit = defineEmits(['menu-closed', 'option-clicked'])
 
@@ -36,146 +36,141 @@ const top = ref('0px')
 const shown = ref(false)
 
 defineExpose({
-	showMenu: (event, passedItem, passedOptions) => {
-		item.value = passedItem
-		options.value = passedOptions
+  showMenu: (event, passedItem, passedOptions) => {
+    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 isInstanceLink = (item) => {
-	if (item.instance != undefined && item.instance.link) {
-		return true
-	} else if (item != undefined && item.link) {
-		return true
-	}
-	return false
+const isLinkedData = (item) => {
+  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')
+  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,31 +1,18 @@
 <script setup>
-import {
-	CheckIcon,
-	CopyIcon,
-	DropdownIcon,
-	HammerIcon,
-	LogInIcon,
-	UpdatedIcon,
-	WrenchIcon,
-	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_existing_instance } from '@/helpers/install'
-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')
@@ -33,368 +20,312 @@ const supportLink = ref('https://support.modrinth.com')
 const metadata = ref({})
 
 defineExpose({
-	async show(errorVal, context, canClose = true, source = null) {
-		console.log(errorVal, context, canClose, source)
-		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 writable')) {
-				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.instanceId = context.instanceId
-		} 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_existing_instance(metadata.value.instanceId, 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 max-w-[550px]">
-			<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">
-					<div class="w-full h-[1px] bg-surface-5 mb-3"></div>
-					<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>
-			</div>
-			<template v-if="hasDebugInfo">
-				<div class="flex flex-col gap-2">
-					<div class="w-full h-[1px] bg-surface-5"></div>
-
-					<div class="overflow-clip">
-						<button
-							class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
-							@click="errorCollapsed = !errorCollapsed"
-						>
-							<span class="flex items-center gap-2 text-contrast font-extrabold m-0">
-								<WrenchIcon class="h-4 w-4" />
-								Debug information
-							</span>
-							<DropdownIcon
-								class="h-5 w-5 text-secondary transition-transform"
-								:class="{ 'rotate-180': !errorCollapsed }"
-							/>
-						</button>
-						<Collapsible :collapsed="errorCollapsed">
-							<div
-								class="p-3 bg-surface-2 rounded-2xl text-xs grid grid-cols-[1fr_auto] max-w-full items-start"
-							>
-								<div
-									class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
-								>
-									{{ debugInfo }}
-								</div>
-								<ButtonStyled circular>
-									<button
-										v-tooltip="'Copy debug info'"
-										:disabled="copied"
-										@click="copyToClipboard(debugInfo)"
-									>
-										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-										<template v-else> <CopyIcon /> </template>
-									</button>
-								</ButtonStyled>
-							</div>
-						</Collapsible>
-					</div>
-				</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);
 }
 
 .markdown-body {
-	overflow: auto;
+  overflow: auto;
 }
 </style>

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

@@ -1,67 +1,25 @@
 <script setup>
-import { WrenchIcon, XIcon } from '@modrinth/assets'
-import {
-	Accordion,
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	defineMessages,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
-import { save } 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 { ref } from 'vue'
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { open } from '@tauri-apps/plugin-dialog'
+import { handleError } from '@/store/notifications.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { export_instance_mrpack, get_pack_export_candidates } from '@/helpers/instance'
-
-const { handleError } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	header: { id: 'app.export-modal.header', defaultMessage: 'Export modpack' },
-	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack Name' },
-	modpackNamePlaceholder: {
-		id: 'app.export-modal.modpack-name-placeholder',
-		defaultMessage: 'Modpack name',
-	},
-	versionNumberLabel: {
-		id: 'app.export-modal.version-number-label',
-		defaultMessage: 'Version number',
-	},
-	versionNumberPlaceholder: {
-		id: 'app.export-modal.version-number-placeholder',
-		defaultMessage: '1.0.0',
-	},
-	descriptionPlaceholder: {
-		id: 'app.export-modal.description-placeholder',
-		defaultMessage: 'Enter modpack description...',
-	},
-	selectFilesLabel: {
-		id: 'app.export-modal.select-files-label',
-		defaultMessage: 'Configure which files are included in this export',
-	},
-	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
-	includeFile: {
-		id: 'app.export-modal.include-file-accessibility-label',
-		defaultMessage: 'Include "{file}"?',
-	},
-})
 
 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)
@@ -70,185 +28,276 @@ const exportDescription = ref('')
 const versionInput = ref('1.0.0')
 const files = ref([])
 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.id).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') ||
-					folder.startsWith('__MACOSX'),
-			}))
-			.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 save({
-		defaultPath: `${nameInput.value} ${versionInput.value}.mrpack`,
-		filters: [
-			{
-				name: 'Modrinth Modpack',
-				extensions: ['mrpack'],
-			},
-		],
-	})
+  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_instance_mrpack(
-			props.instance.id,
-			outputPath,
-			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="formatMessage(messages.header)">
-		<div class="flex flex-col gap-4 w-[40rem]">
-			<div class="grid grid-cols-2 gap-4">
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
-					<StyledInput
-						v-model="nameInput"
-						:icon="PackageIcon"
-						type="text"
-						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
-						clearable
-					/>
-				</div>
-				<div class="labeled_input">
-					<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
-					<StyledInput
-						v-model="versionInput"
-						:icon="VersionIcon"
-						type="text"
-						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
-						clearable
-					/>
-				</div>
-			</div>
-			<div class="flex flex-col gap-2">
-				<p class="m-0">{{ formatMessage(commonMessages.descriptionLabel) }}</p>
-				<StyledInput
-					v-model="exportDescription"
-					multiline
-					:placeholder="formatMessage(messages.descriptionPlaceholder)"
-				/>
-			</div>
-			<Accordion
-				class="w-full bg-surface-4 border border-solid border-surface-5 rounded-2xl overflow-clip"
-				button-class="p-4 w-full border-b border-solid border-b-surface-5 bg-surface-2 -mb-px hover:brightness-[--hover-brightness] group"
-			>
-				<template #title>
-					<span class="flex items-center gap-3 text-contrast group-active:scale-[0.98]">
-						<WrenchIcon aria-hidden="true" class="size-5 text-secondary" />
-						Configure which files are included in this export
-					</span>
-				</template>
-				<div class="flex flex-col [&>*:nth-child(even)]:bg-surface-3">
-					<div v-for="[path, children] in folders" :key="path.name" class="flex flex-col">
-						<Accordion
-							class="flex flex-col"
-							button-class="flex gap-3 pr-4 hover:bg-surface-5 group"
-						>
-							<template #title>
-								<Checkbox
-									:model-value="children.every((child) => child.selected)"
-									:indeterminate="
-										!children.every((child) => child.selected) &&
-										children.some((child) => child.selected)
-									"
-									:description="formatMessage(messages.includeFile, { file: path.name })"
-									class="pl-4 py-2"
-									:disabled="children.every((x) => x.disabled)"
-									@update:model-value="
-										(newValue) => children.forEach((child) => (child.selected = newValue))
-									"
-									@click.stop
-								/>
-								<span class="ml-2 group-active:scale-95">{{ path.name }}/</span>
-							</template>
-							<div v-for="child in children" :key="child.path">
-								<Checkbox
-									v-model="child.selected"
-									:label="child.name"
-									class="w-full px-8 py-2 hover:bg-surface-4 text-primary"
-									:disabled="child.disabled"
-								/>
-							</div>
-						</Accordion>
-					</div>
-					<Checkbox
-						v-for="file in files"
-						:key="file.path"
-						v-model="file.selected"
-						:label="file.name"
-						:disabled="file.disabled"
-						class="w-full px-4 py-2 hover:bg-surface-4 text-primary"
-					/>
-				</div>
-			</Accordion>
-			<div class="flex items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="exportModal.hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="exportPack">
-						<PackageIcon />
-						{{ formatMessage(messages.exportButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</ModalWrapper>
+  <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="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);
+}
+
+.labeled_input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+
+  p {
+    margin: 0;
+  }
+}
+
+.select-checkbox {
+  gap: var(--gap-sm);
+
+  button.checkbox {
+    border: none;
+  }
+
+  &.dropdown {
+    margin-left: auto;
+  }
+}
+
+.table-content {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.file-primary {
+  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;
+}
+
+.file-secondary-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.button-row {
+  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;
+}
+
+.textarea-wrapper {
+  // margin-top: 1rem;
+  height: 12rem;
+
+  textarea {
+    max-height: 12rem;
+  }
+
+  .preview {
+    overflow-y: auto;
+  }
+}
+</style>

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

@@ -1,53 +1,53 @@
 <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 { useRouter } from 'vue-router'
-
-import { trackEvent } from '@/helpers/analytics'
+import {
+  DownloadIcon,
+  GameIcon,
+  PlayIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+  TimerIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { finish_install, kill, run } from '@/helpers/profile'
+import { get_by_profile_path } from '@/helpers/process'
 import { process_listener } from '@/helpers/events'
-import { install_existing_instance, install_pack_to_existing_instance } from '@/helpers/install'
-import { kill, run } from '@/helpers/instance'
-import { get_by_instance_id } from '@/helpers/process'
-import { showInstanceInFolder } from '@/helpers/utils.js'
+import { handleError } from '@/store/state.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
+import { trackEvent } from '@/helpers/analytics'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { formatCategory } from '@modrinth/utils'
 
-const { handleError } = injectNotificationManager()
-const formatRelativeTime = useRelativeTime()
+dayjs.extend(relativeTime)
 
 const props = defineProps({
-	instance: {
-		type: Object,
-		default() {
-			return {}
-		},
-	},
-	compact: {
-		type: Boolean,
-		default: false,
-	},
-	first: {
-		type: Boolean,
-		default: false,
-	},
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  first: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const playing = ref(false)
 const loading = ref(false)
 const modLoading = computed(
-	() =>
-		loading.value ||
-		currentEvent.value === 'installing' ||
-		(currentEvent.value === 'launched' && !playing.value),
+  () =>
+    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')
@@ -55,91 +55,78 @@ const installed = computed(() => props.instance.install_stage === 'installed')
 const router = useRouter()
 
 const seeInstance = async () => {
-	await router.push(`/instance/${encodeURIComponent(props.instance.id)}`)
+  await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
 }
 
 const checkProcess = async () => {
-	const runningProcesses = await get_by_instance_id(props.instance.id).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.id)
-		.catch((err) => handleSevereError(err, { instanceId: props.instance.id }))
-		.finally(() => {
-			trackEvent('InstanceStart', {
-				loader: props.instance.loader,
-				game_version: props.instance.game_version,
-				source: context,
-			})
-		})
-	loading.value = false
+  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
 }
 
 const stop = async (e, context) => {
-	e?.stopPropagation()
-	playing.value = false
+  e?.stopPropagation()
+  playing.value = false
 
-	await kill(props.instance.id).catch(handleError)
+  await kill(props.instance.path).catch(handleError)
 
-	trackEvent('InstanceStop', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
-		source: context,
-	})
+  trackEvent('InstanceStop', {
+    loader: props.instance.loader,
+    game_version: props.instance.game_version,
+    source: context,
+  })
 }
 
 const repair = async (e) => {
-	e?.stopPropagation()
+  e?.stopPropagation()
 
-	if (
-		props.instance.install_stage !== 'pack_installed' &&
-		(props.instance.link?.type === 'modrinth_modpack' ||
-			props.instance.link?.type === 'server_project_modpack')
-	) {
-		await install_pack_to_existing_instance(props.instance.id, {
-			type: 'fromVersionId',
-			project_id: props.instance.link.project_id ?? props.instance.link.server_project_id ?? '',
-			version_id: props.instance.link.version_id ?? props.instance.link.content_version_id ?? '',
-			title: props.instance.name,
-		}).catch(handleError)
-	} else {
-		await install_existing_instance(props.instance.id, false).catch(handleError)
-	}
+  await finish_install(props.instance)
 }
 
 const openFolder = async () => {
-	await showInstanceInFolder(props.instance.id)
+  await showProfileInFolder(props.instance.path)
 }
 
 const addContent = async () => {
-	await router.push({
-		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-		query: { i: props.instance.id },
-	})
+  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.instance_id === props.instance.id) {
-		currentEvent.value = e.event
-		if (e.event === 'finished') {
-			playing.value = false
-		}
-	}
+  if (e.profile_path_id === props.instance.path) {
+    currentEvent.value = e.event
+    if (e.event === 'finished') {
+      playing.value = false
+    }
+  }
 })
 
 onMounted(() => checkProcess())
@@ -147,118 +134,113 @@ 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.id"
-				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.id"
-					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>
+  <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"> Played {{ dayjs(instance.last_played).fromNow() }} </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">
+            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

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

@@ -0,0 +1,674 @@
+<template>
+  <ModalWrapper ref="modal" header="Create instance">
+    <div class="modal-header">
+      <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
+    </div>
+    <hr class="card-divider" />
+    <div v-if="creationType === 'custom'" class="modal-body">
+      <div class="image-upload">
+        <Avatar :src="display_icon" size="md" :rounded="true" />
+        <div class="image-input">
+          <Button @click="upload_icon()">
+            <UploadIcon />
+            Select icon
+          </Button>
+          <Button :disabled="!display_icon" @click="reset_icon">
+            <XIcon />
+            Remove icon
+          </Button>
+        </div>
+      </div>
+      <div class="input-row">
+        <p class="input-label">Name</p>
+        <input
+          v-model="profile_name"
+          autocomplete="off"
+          class="text-input"
+          type="text"
+          maxlength="100"
+        />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Game version</p>
+        <div class="versions">
+          <multiselect
+            v-model="game_version"
+            class="selector"
+            :options="game_versions"
+            :multiple="false"
+            :searchable="true"
+            placeholder="Select game version"
+            open-direction="top"
+            :show-labels="false"
+          />
+          <Checkbox
+            v-if="showAdvanced"
+            v-model="showSnapshots"
+            class="filter-checkbox"
+            label="Include snapshots"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
+        <p class="input-label">Loader version</p>
+        <Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
+      </div>
+      <div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
+        <div v-if="game_version" class="input-row">
+          <p class="input-label">Select version</p>
+          <multiselect
+            v-model="specified_loader_version"
+            class="selector"
+            :options="selectable_versions"
+            :searchable="true"
+            placeholder="Select loader version"
+            open-direction="top"
+            :show-labels="false"
+          />
+        </div>
+        <div v-else class="input-row">
+          <p class="warning">Select a game version before you select a loader version</p>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="toggle_advanced">
+          <CodeIcon />
+          {{ showAdvanced ? 'Hide advanced' : 'Show advanced' }}
+        </Button>
+        <Button @click="hide()">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" :disabled="!check_valid || creating" @click="create_instance()">
+          <PlusIcon v-if="!creating" />
+          {{ creating ? 'Creating...' : 'Create' }}
+        </Button>
+      </div>
+    </div>
+    <div v-else-if="creationType === 'from file'" class="modal-body">
+      <Button @click="openFile"> <FolderOpenIcon /> Import from file </Button>
+      <div class="info"><InfoIcon /> Or drag and drop your .mrpack file</div>
+    </div>
+    <div v-else class="modal-body">
+      <Chips
+        v-model="selectedProfileType"
+        :items="profileOptions"
+        :format-label="(profile) => profile?.name"
+      />
+      <div class="path-selection">
+        <h3>{{ selectedProfileType.name }} path</h3>
+        <div class="path-input">
+          <div class="iconified-input">
+            <FolderOpenIcon />
+            <input
+              v-model="selectedProfileType.path"
+              type="text"
+              placeholder="Path to launcher"
+              @change="setPath"
+            />
+            <Button class="r-btn" @click="() => (selectedLauncherPath = '')">
+              <XIcon />
+            </Button>
+          </div>
+          <Button icon-only @click="selectLauncherPath">
+            <FolderSearchIcon />
+          </Button>
+          <Button icon-only @click="reload">
+            <UpdatedIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-head table-row">
+          <div class="toggle-all table-cell">
+            <Checkbox
+              class="select-checkbox"
+              :model-value="
+                profiles.get(selectedProfileType.name)?.every((child) => child.selected)
+              "
+              @update:model-value="
+                (newValue) =>
+                  profiles
+                    .get(selectedProfileType.name)
+                    ?.forEach((child) => (child.selected = newValue))
+              "
+            />
+          </div>
+          <div class="name-cell table-cell">Profile name</div>
+        </div>
+        <div
+          v-if="
+            profiles.get(selectedProfileType.name) &&
+            profiles.get(selectedProfileType.name).length > 0
+          "
+          class="table-content"
+        >
+          <div
+            v-for="(profile, index) in profiles.get(selectedProfileType.name)"
+            :key="index"
+            class="table-row"
+          >
+            <div class="checkbox-cell table-cell">
+              <Checkbox v-model="profile.selected" class="select-checkbox" />
+            </div>
+            <div class="name-cell table-cell">
+              {{ profile.name }}
+            </div>
+          </div>
+        </div>
+        <div v-else class="table-content empty">No profiles found</div>
+      </div>
+      <div class="button-row">
+        <Button
+          :disabled="
+            loading ||
+            !Array.from(profiles.values())
+              .flatMap((e) => e)
+              .some((e) => e.selected)
+          "
+          color="primary"
+          @click="next"
+        >
+          {{
+            loading
+              ? 'Importing...'
+              : Array.from(profiles.values())
+                    .flatMap((e) => e)
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(profiles.values())
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } profiles`
+                : 'Select profiles to import'
+          }}
+        </Button>
+        <ProgressBar
+          v-if="loading"
+          :progress="(importedProfiles / (totalProfiles + 0.0001)) * 100"
+        />
+      </div>
+    </div>
+  </ModalWrapper>
+</template>
+
+<script setup>
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import {
+  CodeIcon,
+  FolderOpenIcon,
+  FolderSearchIcon,
+  InfoIcon,
+  PlusIcon,
+  UpdatedIcon,
+  UploadIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import { get_loaders } from '@/helpers/tags'
+import { create } from '@/helpers/profile'
+import { open } from '@tauri-apps/plugin-dialog'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
+import { handleError } from '@/store/notifications.js'
+import Multiselect from 'vue-multiselect'
+import { trackEvent } from '@/helpers/analytics'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
+import {
+  get_default_launcher_path,
+  get_importable_instances,
+  import_instance,
+} from '@/helpers/import.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+
+const profile_name = ref('')
+const game_version = ref('')
+const loader = ref('vanilla')
+const loader_version = ref('stable')
+const specified_loader_version = ref('')
+const icon = ref(null)
+const display_icon = ref(null)
+const showAdvanced = ref(false)
+const creating = ref(false)
+const showSnapshots = ref(false)
+const creationType = ref('custom')
+const isShowing = ref(false)
+
+defineExpose({
+  show: async () => {
+    game_version.value = ''
+    specified_loader_version.value = ''
+    profile_name.value = ''
+    creating.value = false
+    showAdvanced.value = false
+    showSnapshots.value = false
+    loader.value = 'vanilla'
+    loader_version.value = 'stable'
+    icon.value = null
+    display_icon.value = null
+    isShowing.value = true
+    modal.value.show()
+
+    unlistener.value = await getCurrentWebview().onDragDropEvent(async (event) => {
+      // Only if modal is showing
+      if (!isShowing.value) return
+      if (event.payload.type !== 'drop') return
+      if (creationType.value !== 'from file') return
+      hide()
+      const { paths } = event.payload
+      if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
+        await create_profile_and_install_from_file(paths[0]).catch(handleError)
+        trackEvent('InstanceCreate', {
+          source: 'CreationModalFileDrop',
+        })
+      }
+    })
+
+    trackEvent('InstanceCreateStart', { source: 'CreationModal' })
+  },
+})
+
+const unlistener = ref(null)
+const hide = () => {
+  isShowing.value = false
+  modal.value.hide()
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+}
+onUnmounted(() => {
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+})
+
+const [
+  fabric_versions,
+  forge_versions,
+  quilt_versions,
+  neoforge_versions,
+  all_game_versions,
+  loaders,
+] = await Promise.all([
+  get_loader_versions('fabric').then(shallowRef).catch(handleError),
+  get_loader_versions('forge').then(shallowRef).catch(handleError),
+  get_loader_versions('quilt').then(shallowRef).catch(handleError),
+  get_loader_versions('neo').then(shallowRef).catch(handleError),
+  get_game_versions().then(shallowRef).catch(handleError),
+  get_loaders()
+    .then((value) =>
+      value
+        .filter((item) => item.supported_project_types.includes('modpack'))
+        .map((item) => item.name.toLowerCase()),
+    )
+    .then(ref)
+    .catch(handleError),
+])
+loaders.value.unshift('vanilla')
+
+const game_versions = computed(() => {
+  return all_game_versions.value.versions
+    .filter((item) => {
+      let defaultVal = item.type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'neoforge') {
+        defaultVal &= neoforge_versions.value.gameVersions.some((x) => item.id === x.id)
+      }
+
+      return defaultVal
+    })
+    .map((item) => item.id)
+})
+
+const modal = ref(null)
+
+const check_valid = computed(() => {
+  return (
+    profile_name.value.trim() &&
+    game_version.value &&
+    game_versions.value.includes(game_version.value)
+  )
+})
+
+const create_instance = async () => {
+  creating.value = true
+  const loader_version_value =
+    loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
+  const loaderVersion = loader.value === 'vanilla' ? null : loader_version_value ?? 'stable'
+
+  hide()
+  creating.value = false
+
+  await create(
+    profile_name.value,
+    game_version.value,
+    loader.value,
+    loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
+    icon.value,
+  ).catch(handleError)
+
+  trackEvent('InstanceCreate', {
+    profile_name: profile_name.value,
+    game_version: game_version.value,
+    loader: loader.value,
+    loader_version: loaderVersion,
+    has_icon: !!icon.value,
+    source: 'CreationModal',
+  })
+}
+
+const upload_icon = async () => {
+  const res = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+      },
+    ],
+  })
+
+  icon.value = res.path ?? res
+
+  if (!icon.value) return
+  display_icon.value = convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const selectable_versions = computed(() => {
+  if (game_version.value) {
+    if (loader.value === 'fabric') {
+      return fabric_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'forge') {
+      return forge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    } else if (loader.value === 'quilt') {
+      return quilt_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'neoforge') {
+      return neoforge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    }
+  }
+  return []
+})
+
+const toggle_advanced = () => {
+  showAdvanced.value = !showAdvanced.value
+}
+
+const openFile = async () => {
+  const newProject = await open({ multiple: false })
+  if (!newProject) return
+  hide()
+  await create_profile_and_install_from_file(newProject.path ?? newProject).catch(handleError)
+
+  trackEvent('InstanceCreate', {
+    source: 'CreationModalFileOpen',
+  })
+}
+
+const profiles = ref(
+  new Map([
+    ['MultiMC', []],
+    ['GDLauncher', []],
+    ['ATLauncher', []],
+    ['Curseforge', []],
+    ['PrismLauncher', []],
+  ]),
+)
+
+const loading = ref(false)
+const importedProfiles = ref(0)
+const totalProfiles = ref(0)
+
+const selectedProfileType = ref('MultiMC')
+const profileOptions = ref([
+  { name: 'MultiMC', path: '' },
+  { name: 'GDLauncher', path: '' },
+  { name: 'ATLauncher', path: '' },
+  { name: 'Curseforge', path: '' },
+  { name: 'PrismLauncher', path: '' },
+])
+
+// Attempt to get import profiles on default paths
+const promises = profileOptions.value.map(async (option) => {
+  const path = await get_default_launcher_path(option.name).catch(handleError)
+  if (!path || path === '') return
+
+  // Try catch to allow failure and simply ignore default path attempt
+  try {
+    const instances = await get_importable_instances(option.name, path)
+
+    if (!instances) return
+    profileOptions.value.find((profile) => profile.name === option.name).path = path
+    profiles.value.set(
+      option.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } catch {
+    // Allow failure silently
+  }
+})
+await Promise.all(promises)
+
+const selectLauncherPath = async () => {
+  selectedProfileType.value.path = await open({ multiple: false, directory: true })
+
+  if (selectedProfileType.value.path) {
+    await reload()
+  }
+}
+
+const reload = async () => {
+  const instances = await get_importable_instances(
+    selectedProfileType.value.name,
+    selectedProfileType.value.path,
+  ).catch(handleError)
+  if (instances) {
+    profiles.value.set(
+      selectedProfileType.value.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } else {
+    profiles.value.set(selectedProfileType.value.name, [])
+  }
+}
+
+const setPath = () => {
+  profileOptions.value.find((profile) => profile.name === selectedProfileType.value.name).path =
+    selectedProfileType.value.path
+}
+
+const next = async () => {
+  importedProfiles.value = 0
+  totalProfiles.value = Array.from(profiles.value.values())
+    .map((profiles) => profiles.filter((profile) => profile.selected).length)
+    .reduce((a, b) => a + b, 0)
+  loading.value = true
+  for (const launcher of Array.from(profiles.value.entries()).map(([launcher, profiles]) => ({
+    launcher,
+    path: profileOptions.value.find((option) => option.name === launcher).path,
+    profiles,
+  }))) {
+    for (const profile of launcher.profiles.filter((profile) => profile.selected)) {
+      await import_instance(launcher.launcher, launcher.path, profile.name)
+        .catch(handleError)
+        .then(() => console.log(`Successfully Imported ${profile.name} from ${launcher.launcher}`))
+      profile.selected = false
+      importedProfiles.value++
+    }
+  }
+  loading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  margin-top: var(--gap-lg);
+}
+
+.input-label {
+  font-size: 1rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+  margin-bottom: 0.5rem;
+}
+
+.text-input {
+  width: 20rem;
+}
+
+.image-upload {
+  display: flex;
+  gap: 1rem;
+}
+
+.image-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.warning {
+  font-style: italic;
+}
+
+.versions {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+:deep(button.checkbox) {
+  border: none;
+}
+
+.selector {
+  max-width: 20rem;
+}
+
+.labeled-divider {
+  text-align: center;
+}
+
+.labeled-divider:after {
+  background-color: var(--color-raised-bg);
+  content: 'Or';
+  color: var(--color-base);
+  padding: var(--gap-sm);
+  position: relative;
+  top: -0.5rem;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0;
+}
+
+.path-selection {
+  padding: var(--gap-xl);
+  background-color: var(--color-bg);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+
+  h3 {
+    margin: 0;
+  }
+
+  .path-input {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+    gap: var(--gap-sm);
+
+    .iconified-input {
+      flex-grow: 1;
+      :deep(input) {
+        width: 100%;
+        flex-basis: auto;
+      }
+    }
+  }
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.table-row {
+  grid-template-columns: min-content auto;
+}
+
+.table-content {
+  max-height: calc(5 * (18px + 2rem));
+  height: calc(5 * (18px + 2rem));
+  overflow-y: auto;
+}
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
+
+  .transparent {
+    padding: var(--gap-sm) 0;
+  }
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+}
+
+.card-divider {
+  margin: var(--gap-md) var(--gap-lg) 0 var(--gap-lg);
+}
+</style>

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

@@ -1,57 +1,53 @@
 <script setup lang="ts">
-import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { computed } from 'vue'
+import { formatCategory } from '@modrinth/utils'
+import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
 
 type Instance = {
-	game_version: string
-	loader: string
-	path: string
-	install_stage: string
-	icon_path?: string
-	name: string
+  game_version: string
+  loader: string
+  path: string
+  install_stage: string
+  icon_path?: string
+  name: string
 }
 
-const props = withDefaults(
-	defineProps<{
-		instance: Instance
-		backTab?: string
-	}>(),
-	{ backTab: undefined },
-)
-
-const instanceLink = computed(() => {
-	const base = `/instance/${encodeURIComponent(props.instance.id)}`
-	return props.backTab ? `${base}/${props.backTab}` : base
-})
+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="instanceLink" 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" />
-						<FormattedTag :tag="instance.loader" enforce-type="loader" />
-						{{ instance.game_version }}
-					</span>
-				</span>
-			</span>
-		</router-link>
-		<ButtonStyled>
-			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
-		</ButtonStyled>
-	</div>
+  <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,82 +1,95 @@
 <template>
-	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
-		<div class="flex flex-col gap-4">
-			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
-				<template #cell-version="{ value }">
-					<span class="font-semibold text-primary">{{ value }}</span>
-				</template>
-				<template #cell-path="{ value }">
-					<span v-tooltip="value" class="block truncate font-mono text-xs">{{ value }}</span>
-				</template>
-				<template #cell-actions="{ row }">
-					<div class="flex items-center justify-end">
-						<ButtonStyled v-if="currentSelected.path === row.path">
-							<button class="!shadow-none" disabled><CheckIcon /> Selected</button>
-						</ButtonStyled>
-						<ButtonStyled v-else>
-							<button class="!shadow-none" @click="setJavaInstall(row)"><PlusIcon /> Select</button>
-						</ButtonStyled>
-					</div>
-				</template>
-				<template #empty-state>
-					<div class="p-4 text-secondary">No java installations found!</div>
-				</template>
-			</Table>
-			<div class="flex justify-end">
-				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
-						@click="$refs.detectJavaModal.hide()"
-					>
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</ModalWrapper>
+  <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>
 </template>
 <script setup>
-import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, Table } 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({})
-const javaInstallColumns = [
-	{ key: 'version', label: 'Version', width: '9rem' },
-	{ key: 'path', label: 'Path' },
-	{ key: 'actions', label: 'Actions', align: 'right', width: '10rem' },
-]
 
 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;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+
+    padding: 0.5rem;
+  }
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

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

@@ -1,256 +1,220 @@
 <template>
-	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-	<div :id="props.id" class="toggle-setting" :class="{ compact }">
-		<div class="input-with-status">
-			<StyledInput
-				autocomplete="off"
-				:disabled="props.disabled"
-				:model-value="props.modelValue ? props.modelValue.path : ''"
-				:placeholder="placeholder ?? '/path/to/java'"
-				wrapper-class="installation-input"
-				@update:model-value="
-					(val) => {
-						emit('update:modelValue', {
-							...props.modelValue,
-							path: val,
-						})
-					}
-				"
-			/>
-			<ButtonStyled
-				:color="
-					!hoveringTest && !testingJava
-						? testingJavaSuccess === true
-							? 'green'
-							: 'red'
-						: 'standard'
-				"
-				color-fill="text"
-			>
-				<button
-					class="!shadow-none"
-					:disabled="testingJava || props.disabled"
-					@click="runTest(props.modelValue?.path)"
-					@mouseenter="!props.disabled && (hoveringTest = true)"
-					@mouseleave="hoveringTest = false"
-				>
-					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-					<CheckCircleIcon
-						v-else-if="testingJavaSuccess === true && !hoveringTest"
-						class="h-4 w-4"
-					/>
-					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
-					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
-		</div>
-		<span class="installation-buttons">
-			<ButtonStyled v-if="props.version">
-				<button
-					v-tooltip="testingJavaSuccess === true ? 'Already installed' : undefined"
-					class="!shadow-none"
-					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
-					@click="reinstallJava"
-				>
-					<DownloadIcon />
-					{{ installingJava ? 'Installing...' : 'Install recommended' }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
-					<SearchIcon />
-					Detect
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
-					<FolderSearchIcon />
-					Browse
-				</button>
-			</ButtonStyled>
-		</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 />
+        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 {
-	CheckCircleIcon,
-	DownloadIcon,
-	FolderSearchIcon,
-	RefreshCwIcon,
-	SearchIcon,
-	SpinnerIcon,
-	XCircleIcon,
+  SearchIcon,
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  FolderSearchIcon,
+  DownloadIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+import { ref } from 'vue'
 import { open } from '@tauri-apps/plugin-dialog'
-import { ref, watch } from 'vue'
-
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import useJavaTest from '@/composables/useJavaTest'
+import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
-import { auto_install_java, find_filtered_jres, get_jre } from '@/helpers/jre.js'
-
-const { handleError } = injectNotificationManager()
 
 const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: null,
-	},
-	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'])
 
-const {
-	testingJava,
-	javaTestResult: testingJavaSuccess,
-	testJavaInstallationDebounced,
-	testJavaInstallation,
-} = useJavaTest()
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
 
 const installingJava = ref(false)
-const hoveringTest = ref(false)
-let hasInitialized = false
 
-async function runTest(path) {
-	await testJavaInstallation(path, props.version, true)
+async function testJava() {
+  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,
+  })
+
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
 }
 
-watch(
-	() => props.modelValue?.path,
-	(newPath) => {
-		if (newPath) {
-			if (!hasInitialized) {
-				testJavaInstallation(newPath, props.version, false)
-				hasInitialized = true
-			} else {
-				testJavaInstallationDebounced(newPath, props.version)
-			}
-		}
-	},
-	{ immediate: true },
-)
-
 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(),
-				parsed_version: props.version,
-				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(),
-			parsed_version: props.version,
-			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
-	runTest(result.path)
+  emit('update:modelValue', result)
+  installingJava.value = false
 }
 </script>
 
 <style lang="scss" scoped>
-.input-with-status {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: 0.5rem;
-	width: 100%;
-	min-width: 0;
-}
-
 .installation-input {
-	flex: 1 1 0;
-	min-width: 0;
+  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-wrap: wrap;
+  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;
+  }
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
 }
 </style>

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

@@ -1,119 +0,0 @@
-<script setup>
-import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-dayjs.extend(relativeTime)
-
-const router = useRouter()
-
-const { formatCompactNumber } = useCompactNumber()
-
-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]
-})
-
-const toColor = computed(() => {
-	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(',') + ')'
-})
-
-const toTransparent = computed(() => {
-	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(',') +
-		'))'
-	)
-})
-</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 />
-					{{ formatCompactNumber(project.downloads) }}
-				</div>
-				<div
-					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
-				>
-					<HeartIcon />
-					{{ formatCompactNumber(project.follows) }}
-				</div>
-				<div class="flex items-center gap-1 pr-2">
-					<TagIcon />
-					<TagItem>
-						<FormattedTag :tag="featuredCategory" />
-					</TagItem>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped lang="scss"></style>

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

@@ -1,199 +1,195 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Button, Badge } from '@modrinth/ui'
 import { computed, ref } from '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'
-import { update_managed_modrinth_version } from '@/helpers/instance'
-import { releaseColor } from '@/helpers/utils'
 
 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)
-const installedVersion = computed(() => props.instance?.link?.version_id)
+const installedVersion = computed(() => props.instance?.linked_data?.version_id)
 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.id, versionId)
-	inProgress.value = false
-	emit('finish-install')
+  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')
-	}
+  if (!inProgress.value) {
+    emit('finish-install')
+  }
 }
 </script>
 
 <template>
-	<ModalWrapper
-		ref="modpackVersionModal"
-		class="modpack-version-modal"
-		header="Change modpack version"
-		:on-hide="onHide"
-	>
-		<div class="modal-body">
-			<div v-if="instance.link" 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">
-								<ButtonStyled
-									circular
-									:color="version.id === installedVersion ? 'standard' : 'brand'"
-								>
-									<button
-										:disabled="inProgress || installing || version.id === installedVersion"
-										@click.stop="() => switchVersion(version.id)"
-									>
-										<SwapIcon v-if="version.id !== installedVersion" />
-										<CheckIcon v-else />
-									</button>
-								</ButtonStyled>
-							</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"
+    :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/${$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>
+      </div>
+    </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);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
 }
 
 .table {
-	border: 1px solid var(--color-bg);
+  border: 1px solid var(--color-bg);
 }
 </style>