feat(labrinth): user preferences api draft

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

@@ -1,23 +0,0 @@
----
-name: api-module
-description: Add an API endpoint module to packages/api-client from an OpenAPI schema. Use for new backend endpoints, API client modules, or tasks that provide an OpenAPI schema.
----
-
-# Add an API Module
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the API module standard](../../../standards/frontend/ADDING_API_MODULES.md) in full.
-
-1. Identify the OpenAPI schema from the request. If more than one schema is possible, ask the user to select one.
-2. Read the schema. Identify each endpoint, HTTP method, request type, response type, and path parameter.
-3. Get the service and version from the URL prefix. For example, map `/v3/projects` to `labrinth/v3/`.
-4. Define the API types in `types.ts`. Make each type match the schema exactly.
-5. Do not change, rename, or remove API fields.
-6. Make a module class that extends `AbstractModule`. Implement each endpoint with `this.client.request()` or `this.client.upload()`.
-7. Use the request-option pattern from the standard. Do not call `$fetch`, `fetch`, or another HTTP client directly.
-8. Add the module to `MODULE_REGISTRY` so the client can instantiate it.
-9. Export new service types from the applicable barrel `index.ts`.
-10. Check the module paths, registry key, public type exports, and endpoint types.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/api-module/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Add API Module"
-  short_description: "Add typed API client modules from OpenAPI"
-  default_prompt: "Use $api-module to add an API client module from this OpenAPI schema."

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

@@ -1,38 +0,0 @@
----
-name: cross-platform-pages
-description: Convert a page to the shared Modrinth page system for the website and desktop app. Use for shared layouts, wrapped layouts, or platform dependency-injection contracts.
----
-
-# Convert a Cross-Platform Page
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read these standards in full:
-
-- [Cross-platform pages](../../../standards/frontend/CROSS_PLATFORM_PAGES.md)
-- [Dependency injection](../../../standards/frontend/DEPENDENCY_INJECTION.md)
-
-1. Identify the target page from the request.
-2. Read the page and its route shell. Identify data sources, mutations, navigation, and platform APIs.
-3. Use a wrapped layout when both platforms use the same API source and page logic.
-4. Use a shared layout when platform data or operations have different implementations.
-
-For a shared layout:
-
-1. Define a provider contract for all platform operations.
-2. Put common UI and state logic in the shared layout.
-3. Put reusable search, filter, and selection logic in local composables.
-4. Implement the contract in `apps/frontend/` and `apps/app-frontend/`.
-5. Use optional contract fields only for capabilities that are not available on both platforms.
-
-For a wrapped layout:
-
-1. Move the page to `packages/ui/src/layouts/wrapped/` and preserve its route structure.
-2. Replace platform-only imports with common utilities or provider calls.
-3. Make each frontend route shell render the wrapped component.
-4. Match primary query options in both route shells when the layout uses `ReadyTransition` and `useReadyState`.
-5. Prefetch these queries with `ensureQueryData`, as the standard specifies.
-
-Check that both route shells resolve their imports. Check that all required provider fields have implementations.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/cross-platform-pages/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Convert Cross-Platform Page"
-  short_description: "Share pages across the web and desktop app"
-  default_prompt: "Use $cross-platform-pages to convert this page for the website and desktop app."

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

@@ -1,21 +0,0 @@
----
-name: figma-mcp
-description: Convert a Figma design into a Modrinth Vue page or component. Use when a request provides a Figma URL or asks to implement a Figma layout.
----
-
-# Implement a Figma Design
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read `packages/ui/AGENTS.md` in full.
-
-1. Load the available Figma design-to-code instructions and follow the MCP tool guidance.
-2. Call `get_design_context` first with `clientLanguages: "typescript,html,css"` and `clientFrameworks: "vue"`.
-3. Treat the result as reference code and adapt it to the Modrinth codebase.
-4. Map Figma color variables to the applicable `surface-*` and `text-*` tokens. Do not use aliased Figma names directly.
-5. Reuse applicable components from `packages/ui/src/components/` before creating new ones. Also refer to `standards/frontend/COMPONENT_STRUCTURE.md`
-6. Read `packages/assets/styles/variables.scss` when Figma does not supply a required token.
-7. Use exact spacing values from the design.
-8. Implement the result as a Vue SFC with Tailwind classes and the existing component library.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/figma-mcp/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Implement Figma Design"
-  short_description: "Build Modrinth Vue UI from Figma designs"
-  default_prompt: "Use $figma-mcp to implement this Figma design as a Modrinth Vue component."

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

@@ -1,32 +0,0 @@
----
-name: i18n-pass
-description: Convert hard-coded English text in changed Vue components to the @modrinth/ui localization system. Use for an i18n pass, untranslated-string review, pull request, or component migration.
----
-
-# Do an Internationalization Pass
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the internationalization standard](../../../standards/frontend/INTERNATIONALIZATION.md) in full.
-
-1. Identify the scope from the request.
-2. For a pull request, use `gh pr diff <number>` to identify changed files.
-3. For a file path, inspect that file.
-4. When the request gives no scope, inspect the current uncommitted diff.
-5. Limit the pass to changed `.vue` files.
-6. Find user-visible text in templates and scripts.
-
-Check inner text, `alt`, `placeholder`, `aria-label`, buttons, tooltips, notifications, dropdown labels, and error messages.
-
-Do not change dynamic expressions, HTML tag names, CSS classes, internal identifiers, or log messages.
-
-1. Define stable message IDs with `defineMessage` or `defineMessages`.
-2. Replace simple text with `formatMessage()` calls.
-3. Use `<IntlFormatted>` for text that contains links or markup.
-4. Use ICU selections and plurals when grammar depends on a value.
-5. Add a space before `}}` when an ICU placeholder ends at the Vue delimiter.
-6. Do not change component logic, layout, or reactivity.
-7. Do not edit localization JSON files. The user maintains those files.
-8. Check the changed templates again for hard-coded English text.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/i18n-pass/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Run Internationalization Pass"
-  short_description: "Localize user-visible text in Vue files"
-  default_prompt: "Use $i18n-pass to localize the user-visible text in these changed Vue files."

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

@@ -1,40 +0,0 @@
----
-name: review-changelog
-description: Review the latest packages/blog/changelog.ts entry against the Modrinth changelog standard. Use before a pull request or when asked to review or lint a changelog entry.
----
-
-# Review a Changelog Entry
-
-Read [the changelog standard](../../../standards/maintaining/CHANGELOG.md) in full before the review.
-
-1. Open `packages/blog/changelog.ts`.
-2. Find the first entry in the `VERSIONS` array.
-3. If the request names `web`, `hosting`, or `app`, review the latest entry for that product.
-4. Otherwise, review the latest entry and all adjacent entries with the same date.
-
-Check the entry structure:
-
-- `date` contains a valid ISO 8601 timestamp.
-- `product` is `web`, `hosting`, or `app`.
-- An `app` entry has a `version` value.
-- A `web` or `hosting` entry does not have a `version` value.
-- Standard headings are `## Added`, `## Changed`, `## Fixed`, and `## Security`.
-- A featured release can use a linked heading.
-- Flag the legacy `## Improvements` heading.
-
-Check each bullet:
-
-- The voice and tense agree with the section.
-- The first verb agrees with the section.
-- The bullet describes user-visible behavior, not implementation.
-- The bullet identifies the applicable page, tab, modal, or feature.
-- The bullet contains one sentence, uses sentence case, and ends with a period.
-- Product and UI names use the public labels.
-- The bullet does not contain filler, vague intensifiers, apologies, or internal references.
-- The bullet is not a duplicate detail of a larger listed change.
-
-Group findings by entry. For each finding, show the original bullet and a proposed replacement.
-
-If the entry has no findings, state this result. Do not edit the changelog unless the user asks you to apply fixes.
-
-When the user asks for fixes, preserve tab indentation and template-literal formatting.

.agents/skills/review-changelog/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Review Changelog"
-  short_description: "Review changelog entries for style problems"
-  default_prompt: "Use $review-changelog to review the latest changelog entry."

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

@@ -1,39 +0,0 @@
----
-name: tanstack-query
-description: Convert Vue server-state code to TanStack Query. Use for useQuery, useMutation, cache invalidation, optimistic updates, or replacement of useAsyncData and manual ref patterns.
----
-
-# Convert Data Code to TanStack Query
-
-Read the applicable `AGENTS.md` files before you edit code.
-
-Read [the TanStack Query standard](../../../standards/frontend/FETCHING_DATA.md) in full.
-
-1. Identify the target file from the request.
-2. Find `useAsyncData`, `useFetch`, manual API refs, and fetch calls in `onMounted`.
-3. Identify mutations that use manual loading, error, or result refs.
-
-For queries:
-
-1. Replace manual fetch logic with `useQuery`.
-2. Get `api-client` with `injectModrinthClient()`.
-3. Use a hierarchical query key with the resource, qualifier, and parameters.
-4. Use a computed query key for reactive parameters.
-5. Use a computed `enabled` option when the query depends on other data.
-6. Use a shared query-option factory when multiple components use the query.
-
-For mutations:
-
-1. Replace manual mutation state with `useMutation`.
-2. Invalidate or update related query data after success.
-3. Use an optimistic update only when the UI needs an immediate response.
-4. Cancel the applicable query and save its prior data before an optimistic update.
-5. Restore the prior data after an error. Invalidate the query after settlement.
-
-Remove manual loading and error refs that TanStack Query replaces. Remove obsolete `onMounted` fetch calls.
-
-Keep Nuxt SSR behavior. Match route-shell prefetch options when `ReadyTransition` and `useReadyState` depend on the query.
-
-Check query keys, invalidation prefixes, reactive values, and rollback data.
-
-Run only the checks that the user or the applicable `AGENTS.md` permits.

.agents/skills/tanstack-query/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: "Migrate to TanStack Query"
-  short_description: "Migrate Vue server state to TanStack Query"
-  default_prompt: "Use $tanstack-query to migrate this Vue component to TanStack Query."

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

@@ -0,0 +1,18 @@
+---
+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

@@ -0,0 +1,26 @@
+---
+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

@@ -0,0 +1,22 @@
+---
+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

@@ -0,0 +1,24 @@
+---
+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

@@ -0,0 +1,36 @@
+---
+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

@@ -0,0 +1,27 @@
+---
+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.

.github/workflows/labrinth-build.yml

@@ -8,9 +8,6 @@ on:
     paths:
       - .github/workflows/labrinth-build.yml
       - 'apps/labrinth/**'
-      - 'packages/**'
-      - '!packages/api-client/**'
-      - '!packages/app-lib/**'
       - Cargo.toml
       - Cargo.lock
   pull_request:
@@ -18,9 +15,6 @@ on:
     paths:
       - .github/workflows/labrinth-build.yml
       - 'apps/labrinth/**'
-      - 'packages/**'
-      - '!packages/api-client/**'
-      - '!packages/app-lib/**'
       - Cargo.toml
       - Cargo.lock
   merge_group:
@@ -147,7 +141,7 @@ jobs:
 
   deploy:
     needs: [skip-if-clean, docker-build]
-    if: ${{ needs.skip-if-clean.outputs.internal == 'true' && github.ref == 'refs/heads/prod' }}
+    if: ${{ needs.skip-if-clean.outputs.internal == 'true' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/prod') }}
     uses: SparkUniverse/workflows/.github/workflows/argo-update.yaml@main
     secrets:
       ARGOCD_DEPLOY_KEY: ${{ secrets.ARGOCD_DEPLOY_KEY }}

.gitignore

@@ -65,7 +65,8 @@ generated
 app-playground-data/*
 
 .astro
-.claude/
+.claude/*
+!.claude/skills/
 .letta
 
 # labrinth demo fixtures

.mergify.yml

@@ -1,23 +0,0 @@
-merge_queue:
-  mode: parallel
-scopes:
-  source:
-    files:
-      frontend:
-        include:
-          - apps/frontend/**/*
-          - packages/ui/**/*
-          - packages/utils/**/*
-          - packages/assets/**/*
-          - "**/wrangler.jsonc"
-          - "**/pnpm-*.yaml"
-      backend:
-        include:
-          - apps/labrinth/**
-          - Cargo.toml
-      app:
-        include:
-          - apps/app/**
-          - apps/app-frontend/**
-          - packages/app-lib/**
-          - packages/app-macros/**

AGENTS.md

@@ -1,93 +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 its AGENTS.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/AGENTS.md`](apps/frontend/AGENTS.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.
-
-## Standards
-
-Standards available at the @standards/ folder.

AGENTS.md

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

CLAUDE.md

@@ -0,0 +1,110 @@
+# 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.

Cargo.lock

@@ -2331,6 +2331,15 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
 
+[[package]]
+name = "convert_case"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baaaa0ecca5b51987b9423ccdc971514dd8b0bb7b4060b983d3664dad3f1f89f"
+dependencies = [
+ "unicode-segmentation",
+]
+
 [[package]]
 name = "convert_case"
 version = "0.10.0"
@@ -5208,6 +5217,15 @@ version = "1.70.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7943c866cc5cd64cbc25b2e01621d07fa8eb2a1a23160ee81ce38704e97b8ecf"
 
+[[package]]
+name = "iso8601"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1082f0c48f143442a1ac6122f67e360ceee130b967af4d50996e5154a45df46"
+dependencies = [
+ "nom 8.0.0",
+]
+
 [[package]]
 name = "itertools"
 version = "0.12.1"
@@ -5367,6 +5385,19 @@ dependencies = [
  "serde_json",
 ]
 
+[[package]]
+name = "jsonwebtoken"
+version = "9.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a87cc7a48537badeae96744432de36f4be2b4a34a05a5ef32e9dd8a1c169dde"
+dependencies = [
+ "base64 0.22.1",
+ "js-sys",
+ "ring",
+ "serde",
+ "serde_json",
+]
+
 [[package]]
 name = "keyboard-types"
 version = "0.7.0"
@@ -5459,7 +5490,9 @@ dependencies = [
  "jemalloc_pprof",
  "json-patch 4.1.0",
  "labrinth",
+ "language-tags",
  "lettre",
+ "meilisearch-sdk",
  "modrinth-content-management",
  "modrinth-util",
  "muralpay",
@@ -5483,7 +5516,6 @@ dependencies = [
  "scalar_api_reference",
  "sentry",
  "serde",
- "serde-binhum",
  "serde_json",
  "serde_with",
  "sha1 0.10.6",
@@ -5923,6 +5955,49 @@ version = "0.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ae960838283323069879657ca3de837e9f7bbb4c7bf6ea7f1b290d5e9476d2e0"
 
+[[package]]
+name = "meilisearch-index-setting-macro"
+version = "0.30.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e36e5cad3754ed329feb201c24f26c0694442bef50a90dbcff0ba6d12b5ca133"
+dependencies = [
+ "convert_case 0.8.0",
+ "proc-macro2",
+ "quote",
+ "structmeta",
+ "syn 2.0.106",
+]
+
+[[package]]
+name = "meilisearch-sdk"
+version = "0.30.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f620c9ed9b790cf292b66c8dab16f0e4aafb377583ec0e589da7c3ee81ff2038"
+dependencies = [
+ "async-trait",
+ "bytes",
+ "either",
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-util",
+ "iso8601",
+ "jsonwebtoken",
+ "log",
+ "meilisearch-index-setting-macro",
+ "pin-project-lite",
+ "reqwest 0.12.24",
+ "serde",
+ "serde_json",
+ "thiserror 2.0.17",
+ "time",
+ "tokio",
+ "uuid 1.23.3",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "yaup",
+]
+
 [[package]]
 name = "memchr"
 version = "2.7.6"
@@ -9305,16 +9380,6 @@ dependencies = [
  "serde_derive",
 ]
 
-[[package]]
-name = "serde-binhum"
-version = "0.1.0"
-dependencies = [
- "darling 0.23.0",
- "proc-macro2",
- "quote",
- "syn 2.0.106",
-]
-
 [[package]]
 name = "serde-untagged"
 version = "0.1.9"
@@ -13379,13 +13444,12 @@ dependencies = [
  "chrono",
  "dashmap",
  "deadpool-redis",
- "eyre",
  "futures",
  "lz4_flex",
- "postcard",
  "prometheus",
  "redis",
  "serde",
+ "serde_json",
  "thiserror 2.0.17",
  "tokio",
  "tracing",
@@ -13424,6 +13488,17 @@ dependencies = [
  "xml-rs",
 ]
 
+[[package]]
+name = "yaup"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0144f1a16a199846cb21024da74edd930b43443463292f536b7110b4855b5c6"
+dependencies = [
+ "form_urlencoded",
+ "serde",
+ "thiserror 1.0.69",
+]
+
 [[package]]
 name = "yoke"
 version = "0.8.0"

Cargo.toml

@@ -15,7 +15,6 @@ members = [
   "packages/modrinth-util",
   "packages/neverbounce",
   "packages/path-util",
-  "packages/serde-binhum",
   "packages/xredis",
 ]
 
@@ -111,6 +110,7 @@ image = { version = "0.25.8", default-features = false, features = ["rayon"] }
 indexmap = "2.11.4"
 indicatif = "0.18.0"
 itertools = "0.14.0"
+language-tags = "0.3.2"
 jemalloc_pprof = "0.8.1"
 json-patch = { version = "4.1.0", default-features = false }
 lettre = { version = "0.11.19", default-features = false, features = [
@@ -131,6 +131,7 @@ lz4_flex = { version = "0.11.5", default-features = false, features = [
   "std",
 ] }
 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" }
@@ -183,7 +184,6 @@ sentry = { version = "0.45.0", default-features = false, features = [
   "rustls",
 ] }
 serde = "1.0.228"
-serde-binhum = { path = "packages/serde-binhum" }
 serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"

README.md

@@ -9,7 +9,7 @@
 
 ## Modrinth Monorepo
 
-Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
 
 If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).
 

apps/app-frontend/src/App.vue

@@ -29,25 +29,24 @@ import {
 import {
 	Admonition,
 	Avatar,
-	ButtonLink,
+	ButtonStyled,
 	commonMessages,
 	ContentInstallModal,
 	ContentUpdaterModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
-	IconButton,
 	IntlFormatted,
 	LoadingBar,
 	NewsArticleCard,
 	NotificationPanel,
+	OverflowMenu,
 	PopupNotificationPanel,
 	provideModalBehavior,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
 	providePopupNotificationManager,
-	TeleportOverflowMenu,
 	TextLogo,
 	useDebugLogger,
 	useFormatBytes,
@@ -95,9 +94,8 @@ import {
 	hide_ads_window,
 	init_ads_window,
 	perform_ads_consent_action,
-	release_ads_window_hold,
 	should_show_ads_consent_popup,
-	take_ads_window_hold,
+	show_ads_window,
 } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
@@ -122,7 +120,6 @@ import {
 } from '@/helpers/utils.js'
 import { start_join_server, start_join_singleplayer_world } from '@/helpers/worlds.ts'
 import i18n from '@/i18n.config'
-import { instanceKeys } from '@/pages/instance/query-options'
 import {
 	appUpdateState,
 	downloadAvailableAppUpdate,
@@ -167,25 +164,6 @@ function updateHistoryNavigationState() {
 	canNavigateForward.value = historyState?.forward != null
 }
 
-let fullscreenAdsWindowHold = false
-
-async function handleFullscreenChange() {
-	const fullscreen = document.fullscreenElement !== null
-	if (fullscreen === fullscreenAdsWindowHold) return
-
-	fullscreenAdsWindowHold = fullscreen
-	try {
-		if (fullscreen) {
-			await take_ads_window_hold()
-		} else {
-			await release_ads_window_hold()
-		}
-	} catch (error) {
-		fullscreenAdsWindowHold = !fullscreen
-		handleError(error)
-	}
-}
-
 updateHistoryNavigationState()
 
 const APP_LEFT_NAV_WIDTH = '4rem'
@@ -195,12 +173,9 @@ const PRIDE_FUNDRAISER_END_DATE = new Date('2026-07-01T00:00:00Z').getTime()
 const credentials = ref()
 let credentialsRefreshId = 0
 const sidebarToggled = ref(true)
-watch(
-	() => themeStore.toggleSidebar,
-	(toggleSidebar) => {
-		sidebarToggled.value = !toggleSidebar
-	},
-)
+const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
+	sidebarToggled.value = !themeStore.toggleSidebar
+})
 const forceSidebar = computed(
 	() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
 )
@@ -267,7 +242,7 @@ const { data: authenticatedModrinthUser } = useQuery({
 	retry: false,
 })
 useQuery({
-	queryKey: computed(() => instanceKeys.sharedEligibility(credentials.value?.user?.id)),
+	queryKey: computed(() => ['shared-instance-eligibility', credentials.value?.user?.id]),
 	queryFn: can_current_user_use_shared_instances,
 	enabled: () => !!credentials.value?.session && !!credentials.value?.user?.id,
 	retry: false,
@@ -304,8 +279,8 @@ providePageContext({
 })
 provideModalBehavior({
 	noblur: computed(() => !themeStore.advancedRendering),
-	onShow: () => take_ads_window_hold(),
-	onHide: () => release_ads_window_hold(),
+	onShow: () => hide_ads_window(),
+	onHide: () => show_ads_window(),
 })
 
 const {
@@ -320,7 +295,7 @@ const {
 	setModpackAlreadyInstalledModal,
 	handleModpackDuplicateCreateAnyway,
 	handleModpackDuplicateGoToInstance,
-} = setupProviders(tauriApiClient, notificationManager, popupNotificationManager)
+} = setupProviders(notificationManager, popupNotificationManager)
 
 const news = ref([])
 const displayedServerInviteNotifications = new Set()
@@ -380,7 +355,6 @@ onMounted(async () => {
 
 	document.querySelector('body').addEventListener('click', handleClick)
 	document.querySelector('body').addEventListener('auxclick', handleAuxClick)
-	document.addEventListener('fullscreenchange', handleFullscreenChange)
 
 	checkUpdates()
 })
@@ -388,13 +362,9 @@ onMounted(async () => {
 onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
-	document.removeEventListener('fullscreenchange', handleFullscreenChange)
+	unsubscribeSidebarToggle()
 	clearDelayedUpdatePopup()
 
-	if (fullscreenAdsWindowHold) {
-		fullscreenAdsWindowHold = false
-		await release_ads_window_hold().catch(handleError)
-	}
 	await unlistenAdsConsent?.()
 	await unlistenUpdateDownload?.()
 })
@@ -1575,10 +1545,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton
 				v-tooltip.right="formatMessage(commonMessages.discoverContentLabel)"
 				to="/browse/modpack"
-				:is-primary="() => route.path.startsWith('/browse') && !route.query.i && !route.query.sid"
-				:is-subpage="
-					(route) => route.path.startsWith('/project') && !route.query.i && !route.query.sid
-				"
+				:is-primary="() => route.path.startsWith('/browse') && !route.query.i"
+				:is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
 			>
 				<CompassIcon />
 			</NavButton>
@@ -1602,11 +1570,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-tooltip.right="formatMessage(messages.modrinthHosting)"
 				to="/hosting/manage"
 				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
-				:is-subpage="
-					(r) =>
-						(r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/') ||
-						((r.path.startsWith('/browse') || r.path.startsWith('/project')) && r.query.sid)
-				"
+				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
 			>
 				<ServerStackIcon />
 			</NavButton>
@@ -1627,29 +1591,22 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<SettingsIcon />
 			</NavButton>
-			<TeleportOverflowMenu
+			<OverflowMenu
 				v-if="credentials?.user"
 				v-tooltip.right="formatMessage(messages.modrinthAccount)"
-				type="quiet"
-				size="xl"
-				label="More options"
+				class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
 				:options="[
 					{
 						id: 'view-profile',
-						label: formatMessage(messages.signedInAs, {
-							username: credentials.user.username,
-						}),
 						action: () => router.push(`/user/${encodeURIComponent(credentials.user.username)}`),
 					},
 					{
 						id: 'sign-out',
-						label: formatMessage(commonMessages.signOutButton),
-						tone: 'red',
 						action: () => logOut(),
+						color: 'danger',
 					},
 				]"
 				placement="right-end"
-				:distance="4"
 			>
 				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
 				<template #view-profile>
@@ -1672,7 +1629,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					<LogOutIcon />
 					{{ formatMessage(commonMessages.signOutButton) }}
 				</template>
-			</TeleportOverflowMenu>
+			</OverflowMenu>
 			<NavButton
 				v-else
 				v-tooltip.right="formatMessage(messages.signInToModrinthAccount)"
@@ -1685,44 +1642,49 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
 				<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
 				<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
-					<IconButton
-						type="outlined"
-						label="Go back"
-						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-						:disabled="!canNavigateBack"
-						@click="router.back()"
-					>
-						<ChevronLeftIcon
-							class="!size-4 !text-primary"
-							:class="{ 'opacity-20': !canNavigateBack }"
-						/>
-					</IconButton>
-					<IconButton
-						type="outlined"
-						label="Go forward"
-						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-						:disabled="!canNavigateForward"
-						@click="router.forward()"
-					>
-						<ChevronRightIcon
-							class="!size-4 !text-primary"
-							:class="{ 'opacity-20': !canNavigateForward }"
-						/>
-					</IconButton>
+					<ButtonStyled type="outlined" circular>
+						<button
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+							:disabled="!canNavigateBack"
+							aria-label="Go back"
+							@click="router.back()"
+						>
+							<ChevronLeftIcon
+								class="!size-4 !text-primary"
+								:class="{ 'opacity-20': !canNavigateBack }"
+							/>
+						</button>
+					</ButtonStyled>
+					<ButtonStyled type="outlined" circular>
+						<button
+							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+							:disabled="!canNavigateForward"
+							aria-label="Go forward"
+							@click="router.forward()"
+						>
+							<ChevronRightIcon
+								class="!size-4 !text-primary"
+								:class="{ 'opacity-20': !canNavigateForward }"
+							/>
+						</button>
+					</ButtonStyled>
 				</div>
 				<Breadcrumbs />
 			</div>
 			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
-				<IconButton
+				<ButtonStyled
 					v-if="!forceSidebar && themeStore.toggleSidebar"
-					:type="sidebarToggled ? 'base' : 'quiet'"
-					label="Next image"
-					class="mr-3 transition-transform"
-					:class="{ 'rotate-180': !sidebarToggled }"
-					@click="sidebarToggled = !sidebarToggled"
+					:type="sidebarToggled ? 'standard' : 'transparent'"
+					circular
 				>
-					<RightArrowIcon />
-				</IconButton>
+					<button
+						class="mr-3 transition-transform"
+						:class="{ 'rotate-180': !sidebarToggled }"
+						@click="sidebarToggled = !sidebarToggled"
+					>
+						<RightArrowIcon />
+					</button>
+				</ButtonStyled>
 				<div class="flex mr-3">
 					<Suspense>
 						<AppActionBar />
@@ -1831,17 +1793,12 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 								:key="`news-${index}`"
 								:article="item"
 							/>
-							<ButtonLink
-								type="colored"
-								color="brand"
-								size="xl"
-								href="https://modrinth.com/news"
-								target="_blank"
-								class="my-4"
-							>
-								<NewspaperIcon />
-								{{ formatMessage(messages.viewAllNews) }}
-							</ButtonLink>
+							<ButtonStyled color="brand" size="large">
+								<a href="https://modrinth.com/news" target="_blank" class="my-4">
+									<NewspaperIcon />
+									{{ formatMessage(messages.viewAllNews) }}
+								</a>
+							</ButtonStyled>
 						</div>
 					</div>
 				</div>

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

@@ -4,11 +4,13 @@
 		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>
-		<Button type="colored" color="brand" :disabled="loginDisabled" @click="login()">
-			<LogInIcon v-if="!loginDisabled" />
-			<SpinnerIcon v-else class="animate-spin" />
-			{{ formatMessage(messages.signInToMinecraft) }}
-		</Button>
+		<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
@@ -58,28 +60,24 @@
 							{{ account.profile.name }}
 						</p>
 					</button>
-					<IconButton
-						v-tooltip="formatMessage(messages.removeAccount)"
-						type="quiet"
-						color="red"
-						:label="formatMessage(messages.removeAccount)"
-						class="mr-2 !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)] hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
-						@click="logout(account.profile.id)"
-					>
-						<TrashIcon />
-					</IconButton>
+					<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">
-				<Button
-					v-if="accounts.length > 0"
-					class="w-full !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)]"
-					:disabled="loginDisabled"
-					@click="login()"
-				>
-					<PlusIcon />
-					{{ formatMessage(messages.addAccount) }}
-				</Button>
+				<ButtonStyled v-if="accounts.length > 0" class="w-full">
+					<button :disabled="loginDisabled" @click="login()">
+						<PlusIcon />
+						{{ formatMessage(messages.addAccount) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</Accordion>
@@ -97,9 +95,8 @@ import {
 import {
 	Accordion,
 	Avatar,
-	Button,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, TeleportOverflowMenu } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
@@ -36,26 +36,27 @@ const handleSearchContent = async () => {
 
 <template>
 	<div class="joined-buttons">
-		<Button @click="handleSearchContent">
-			<PlusIcon />
-			Install content
-		</Button>
-		<TeleportOverflowMenu
-			label="More options"
-			:options="[
-				{
-					id: 'from_file',
-					label: 'Add from file',
-					action: handleAddContentFromFile,
-				},
-			]"
-			class="!w-auto !px-2.5 !rounded-xl"
-		>
-			<DropdownIcon />
-			<template #from_file>
-				<FolderOpenIcon />
-				<span class="no-wrap"> Add from file </span>
-			</template>
-		</TeleportOverflowMenu>
+		<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,16 +1,15 @@
 <template>
 	<div class="flex gap-2 items-center">
-		<div v-if="downloadState.total > 0 || hasActiveLoadingBars" class="relative">
-			<IconButton
-				v-tooltip="downloadToggleLabel"
-				:color="downloadState.hidden > 0 ? 'brand' : undefined"
-				type="quiet"
-				:label="downloadToggleLabel"
-				@click="toggleDownloadNotifications"
-			>
+		<ButtonStyled
+			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
+			color="brand"
+			type="transparent"
+			circular
+		>
+			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
 				<DownloadIcon />
-			</IconButton>
-		</div>
+			</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>
@@ -37,23 +36,17 @@
 						@show="showInstances = true"
 						@hide="showInstances = false"
 					>
-						<IconButton
-							v-tooltip="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-							class="!size-6"
-							type="quiet"
-							size="xs"
-							:label="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-						>
-							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-						</IconButton>
+						<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
@@ -132,8 +125,8 @@ import {
 	TerminalSquareIcon,
 	UnplugIcon,
 } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
 import {
+	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPopupNotificationManager,
@@ -219,35 +212,8 @@ const messages = defineMessages({
 		id: 'app.action-bar.view-active-downloads',
 		defaultMessage: 'View active downloads',
 	},
-	hideDownloads: {
-		id: 'app.action-bar.hide-downloads',
-		defaultMessage: 'Hide active downloads',
-	},
-	showDownloads: {
-		id: 'app.action-bar.show-downloads',
-		defaultMessage: 'Show active downloads',
-	},
 })
 
-const downloadState = computed(() => popupNotificationManager.getDownloadState())
-const downloadToggleLabel = computed(() =>
-	formatMessage(
-		downloadState.value.hidden > 0
-			? messages.showDownloads
-			: downloadState.value.total > 0
-				? messages.hideDownloads
-				: messages.viewActiveDownloads,
-	),
-)
-
-function toggleDownloadNotifications(): void {
-	if (downloadState.value.total > 0) {
-		popupNotificationManager.toggleDownloadNotifications()
-	} else if (hasActiveLoadingBars.value) {
-		openDownloadToast()
-	}
-}
-
 const currentProcesses = ref<RunningProcess[]>([])
 const selectedProcess = ref<RunningProcess | undefined>()
 
@@ -324,7 +290,6 @@ function goToTerminal(instanceId?: string) {
 const currentLoadingBars = ref<LoadingBar[]>([])
 const currentLoadingBarIconUrls = ref<Record<string, string | null>>({})
 const notificationId = ref<string | number | null>(null)
-const terminalNotificationIds = new Map<string, string | number>()
 const dismissed = ref(false)
 
 function getLoadingBarKey(loadingBar: LoadingBar): string {
@@ -370,44 +335,6 @@ function removeNotification(): void {
 	notificationId.value = null
 }
 
-function syncTerminalNotifications(): void {
-	const terminalNotifications = installJobNotifications.terminalNotifications.value
-	const currentJobIds = new Set(terminalNotifications.map((notification) => notification.id))
-
-	for (const terminal of terminalNotifications) {
-		const popupId = terminalNotificationIds.get(terminal.id)
-		let notification = popupId
-			? popupNotificationManager.getNotifications().find((candidate) => candidate.id === popupId)
-			: undefined
-
-		if (!notification) {
-			notification = popupNotificationManager.addPopupNotification({
-				title: terminal.title,
-				text: terminal.text,
-				type: terminal.type,
-				buttons: terminal.buttons,
-				onDismiss: terminal.onDismiss,
-				autoCloseMs: null,
-			})
-			terminalNotificationIds.set(terminal.id, notification.id)
-			continue
-		}
-
-		notification.title = terminal.title
-		notification.text = terminal.text
-		notification.type = terminal.type
-		notification.buttons = terminal.buttons
-		notification.onDismiss = terminal.onDismiss
-	}
-
-	for (const [jobId, popupId] of terminalNotificationIds) {
-		if (!currentJobIds.has(jobId)) {
-			popupNotificationManager.removeNotification(popupId)
-			terminalNotificationIds.delete(jobId)
-		}
-	}
-}
-
 function buildDownloadItems(): PopupNotificationProgressItem[] {
 	return [
 		...installJobNotifications.progressItems.value,
@@ -418,20 +345,19 @@ function buildDownloadItems(): PopupNotificationProgressItem[] {
 			iconUrl: currentLoadingBarIconUrls.value[getLoadingBarKey(bar)] ?? null,
 			progress: getLoadingProgress(bar),
 			waiting: !bar.total || bar.total <= 0,
-			progressType: bar.bar_type?.type === 'pack_import' ? 'bytes' : 'percentage',
+			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 {
-	syncTerminalNotifications()
-
 	if (resummon) {
 		dismissed.value = false
 	}
@@ -460,6 +386,7 @@ function updateNotification(resummon = false): void {
 			: formatMessage(messages.downloads)
 		notif.text = undefined
 		notif.progressItems = progressItems
+		notif.buttons = installJobNotifications.buttons.value
 		notif.progress = undefined
 		notif.waiting = undefined
 	} else {
@@ -470,6 +397,7 @@ function updateNotification(resummon = false): void {
 			type: 'download',
 			autoCloseMs: null,
 			progressItems,
+			buttons: installJobNotifications.buttons.value,
 		})
 		notificationId.value = notif.id
 	}
@@ -568,8 +496,6 @@ function selectProcess(process: RunningProcess) {
 
 onBeforeUnmount(() => {
 	removeNotification()
-	terminalNotificationIds.forEach((id) => popupNotificationManager.removeNotification(id))
-	terminalNotificationIds.clear()
 	dismissed.value = false
 	window.removeEventListener('offline', handleOffline)
 	window.removeEventListener('online', handleOnline)

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

@@ -9,13 +9,7 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	Button,
-	ButtonLink,
-	Collapsible,
-	IconButton,
-	injectNotificationManager,
-} from '@modrinth/ui'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
@@ -279,10 +273,12 @@ async function copyToClipboard(text) {
 				</template>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonLink :href="supportLink" @click="errorModal.hide()"
-					><ChatIcon /> Get support</ButtonLink
-				>
-				<Button v-if="closable" @click="errorModal.hide()"><XIcon /> Close</Button>
+				<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">
@@ -311,15 +307,16 @@ async function copyToClipboard(text) {
 								>
 									{{ debugInfo }}
 								</div>
-								<IconButton
-									v-tooltip="'Copy debug info'"
-									:label="'Copy debug info'"
-									:disabled="copied"
-									@click="copyToClipboard(debugInfo)"
-								>
-									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-									<template v-else> <CopyIcon /> </template>
-								</IconButton>
+								<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>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	FileTreeSelect,
@@ -11,10 +11,15 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
-import { ref, shallowRef } from 'vue'
+import { readDir, stat } from '@tauri-apps/plugin-fs'
+import { ref } from 'vue'
 
 import { PackageIcon } from '@/assets/icons'
-import { export_instance_mrpack, get_pack_export_candidates } from '@/helpers/instance'
+import {
+	export_instance_mrpack,
+	get_full_path,
+	get_pack_export_candidates,
+} from '@/helpers/instance'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -60,24 +65,30 @@ const exportModal = ref(null)
 const nameInput = ref(props.instance.name)
 const exportDescription = ref('')
 const versionInput = ref('1.0.0')
-const files = shallowRef([])
-const includedFilePaths = ref([])
-const excludedFilePaths = ref([])
+const files = ref([])
+const selectedFilePaths = ref([])
 const fileTreeKey = ref(0)
 const filesLoadId = ref(0)
-const directoryEntries = new Map()
-const currentDirectory = ref('')
+const instanceRoot = ref('')
+const loadedDirectories = ref(new Set())
 
 async function initFiles() {
 	const loadId = ++filesLoadId.value
-	const exportCandidates = await get_pack_export_candidates(props.instance.id)
+	const [filePaths, root] = await Promise.all([
+		get_pack_export_candidates(props.instance.id),
+		get_full_path(props.instance.id),
+	])
+	if (loadId !== filesLoadId.value) return
+
+	instanceRoot.value = root
+	const exportCandidates = await Promise.all(
+		filePaths.map((path) => buildExportCandidateItem(root, path)),
+	)
 	if (loadId !== filesLoadId.value) return
 
 	files.value = exportCandidates
-	directoryEntries.set('', exportCandidates)
-	currentDirectory.value = ''
-	includedFilePaths.value = files.value
-		.filter((file) => !file.disabled && file.defaultSelected)
+	selectedFilePaths.value = files.value
+		.filter((file) => !file.disabled && isDefaultSelectedExportCandidate(file.path))
 		.map((file) => file.path)
 }
 
@@ -96,8 +107,7 @@ const exportPack = async () => {
 		export_instance_mrpack(
 			props.instance.id,
 			outputPath,
-			includedFilePaths.value,
-			excludedFilePaths.value,
+			selectedFilePaths.value,
 			versionInput.value,
 			exportDescription.value,
 			nameInput.value,
@@ -111,45 +121,115 @@ function resetExportState() {
 	exportDescription.value = ''
 	versionInput.value = '1.0.0'
 	files.value = []
-	includedFilePaths.value = []
-	excludedFilePaths.value = []
+	selectedFilePaths.value = []
 	fileTreeKey.value += 1
-	directoryEntries.clear()
-	currentDirectory.value = ''
+	instanceRoot.value = ''
+	loadedDirectories.value = new Set()
 }
 
 async function loadExportDirectory(path) {
-	const normalizedPath = normalizeExportPath(path)
-	currentDirectory.value = normalizedPath
-
-	const cachedEntries = directoryEntries.get(normalizedPath)
-	if (cachedEntries) {
-		files.value = cachedEntries
-		return
-	}
+	if (!path || !instanceRoot.value || loadedDirectories.value.has(path)) return
 
 	const loadId = filesLoadId.value
-	files.value = []
+	loadedDirectories.value.add(path)
 
 	try {
-		const childItems = await get_pack_export_candidates(
-			props.instance.id,
-			normalizedPath || undefined,
+		const entries = await readDir(`${instanceRoot.value}/${path}`)
+		const childItems = await Promise.all(
+			entries.map((entry) => buildExportDirectoryChildItem(instanceRoot.value, path, entry)),
 		)
 		if (loadId !== filesLoadId.value) return
 
-		directoryEntries.set(normalizedPath, childItems)
-		if (currentDirectory.value === normalizedPath) {
-			files.value = childItems
+		appendExportItems(childItems)
+	} catch {
+		loadedDirectories.value.delete(path)
+	}
+}
+
+async function buildExportCandidateItem(instanceRoot, path) {
+	try {
+		const entries = await readDir(`${instanceRoot}/${path}`)
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+			count: entries.length,
 		}
 	} catch {
-		if (currentDirectory.value === normalizedPath) files.value = []
+		return buildExportFileItem(instanceRoot, path)
+	}
+}
+
+async function buildExportDirectoryChildItem(instanceRoot, parentPath, entry) {
+	const path = `${parentPath}/${entry.name}`
+	if (entry.isDirectory) {
+		const metadata = await getExportCandidateMetadata(instanceRoot, path)
+		return {
+			path,
+			type: 'directory',
+			disabled: isExportCandidateDisabled(path),
+			modified: metadata.modified,
+		}
+	}
+
+	return buildExportFileItem(instanceRoot, path)
+}
+
+async function buildExportFileItem(instanceRoot, path) {
+	const metadata = await getExportCandidateMetadata(instanceRoot, path)
+	return {
+		path,
+		type: 'file',
+		disabled: isExportCandidateDisabled(path),
+		size: metadata.size,
+		modified: metadata.modified,
+	}
+}
+
+function appendExportItems(items) {
+	const nextFiles = new Map(files.value.map((file) => [normalizeExportPath(file.path), file]))
+	for (const item of items) {
+		nextFiles.set(normalizeExportPath(item.path), item)
+	}
+	files.value = [...nextFiles.values()]
+}
+
+async function getExportCandidateMetadata(instanceRoot, path) {
+	try {
+		const metadata = await stat(`${instanceRoot}/${path}`)
+		return {
+			size: metadata.size,
+			modified: metadata.mtime ? Math.floor(metadata.mtime.getTime() / 1000) : undefined,
+		}
+	} catch {
+		return {}
 	}
 }
 
 function normalizeExportPath(path) {
 	return path.replaceAll('\\', '/').split('/').filter(Boolean).join('/')
 }
+
+function isDefaultSelectedExportCandidate(path) {
+	return (
+		path.startsWith('mods') ||
+		path.startsWith('datapacks') ||
+		path.startsWith('resourcepacks') ||
+		path.startsWith('shaderpacks') ||
+		path.startsWith('config')
+	)
+}
+
+function isExportCandidateDisabled(path) {
+	return (
+		path === 'profile.json' ||
+		path.startsWith('modrinth_logs') ||
+		path.startsWith('.fabric') ||
+		path.startsWith('__MACOSX')
+	)
+}
 </script>
 
 <template>
@@ -198,24 +278,26 @@ function normalizeExportPath(path) {
 			</div>
 			<FileTreeSelect
 				:key="fileTreeKey"
-				v-model="includedFilePaths"
-				v-model:excluded-paths="excludedFilePaths"
+				v-model="selectedFilePaths"
 				class="min-w-0"
 				:items="files"
-				lazy
 				@navigate="loadExportDirectory"
 			/>
 		</div>
 		<template #actions>
 			<div class="flex items-center justify-end gap-2">
-				<Button type="outlined" @click="exportModal.hide">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button type="colored" color="brand" @click="exportPack">
-					<PackageIcon />
-					{{ formatMessage(messages.exportButton) }}
-				</Button>
+				<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>
 		</template>
 	</NewModal>

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

@@ -7,7 +7,7 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+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'
@@ -168,37 +168,30 @@ onUnmounted(() => unlisten())
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<IconButton
-					v-if="playing"
-					v-tooltip="'Stop'"
-					type="colored"
-					color="red"
-					:label="'Stop'"
-					@mouseenter="checkProcess"
-					@click="(e) => stop(e, 'InstanceCard')"
-				>
-					<StopCircleIcon />
-				</IconButton>
-				<IconButton
-					v-else-if="modLoading"
-					v-tooltip="'Instance is loading...'"
-					:label="'Instance is loading...'"
-					disabled
-				>
-					<SpinnerIcon class="animate-spin" />
-				</IconButton>
-				<IconButton
+				<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-if="!instance.quarantined"
-					v-tooltip="'Play'"
-					:type="first ? 'colored' : 'base'"
-					:color="first ? 'brand' : undefined"
-					label="Play"
-					@click="(e) => play(e, 'InstanceCard')"
-					@mouseenter="checkProcess"
+					:color="first ? 'brand' : 'standard'"
+					circular
 				>
-					<!-- Translate for optical centering -->
-					<PlayIcon class="translate-x-[1px]" />
-				</IconButton>
+					<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 />
@@ -226,51 +219,47 @@ onUnmounted(() => unlisten())
 					: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">
-					<IconButton
-						v-if="playing"
-						v-tooltip="'Stop'"
-						type="colored"
-						color="red"
-						size="xl"
-						:label="'Stop'"
-						:class="{ 'scale-100 opacity-100': playing }"
-						class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
-						@click="(e) => stop(e, 'InstanceCard')"
-						@mouseenter="checkProcess"
-					>
-						<StopCircleIcon />
-					</IconButton>
+					<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"
 					/>
-					<IconButton
+					<ButtonStyled
 						v-else-if="!installed && !instance.quarantined"
-						v-tooltip="'Repair'"
-						type="colored"
+						size="large"
 						color="brand"
-						size="xl"
-						:label="'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)"
+						circular
 					>
-						<DownloadIcon />
-					</IconButton>
-					<IconButton
-						v-else-if="!instance.quarantined"
-						v-tooltip="'Play'"
-						type="colored"
-						color="brand"
-						size="xl"
-						:label="'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')"
-						@mouseenter="checkProcess"
-					>
-						<PlayIcon class="translate-x-[2px]" />
-					</IconButton>
+						<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-if="!instance.quarantined" 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">

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed } from 'vue'
 
@@ -48,7 +48,9 @@ const instanceLink = computed(() => {
 				</span>
 			</span>
 		</router-link>
-		<ButtonLink :to="instanceLink"> <LeftArrowIcon /> Back to instance </ButtonLink>
+		<ButtonStyled>
+			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
+		</ButtonStyled>
 	</div>
 </template>
 

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

@@ -14,14 +14,18 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end">
-						<Button v-if="currentSelected.path === row.path" disabled>
-							<CheckIcon aria-hidden="true" />
-							{{ formatMessage(messages.selected) }}
-						</Button>
-						<Button v-else @click="setJavaInstall(row)">
-							<PlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.select) }}
-						</Button>
+						<ButtonStyled v-if="currentSelected.path === row.path">
+							<button class="!shadow-none" disabled>
+								<CheckIcon aria-hidden="true" />
+								{{ formatMessage(messages.selected) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-else>
+							<button class="!shadow-none" @click="setJavaInstall(row)">
+								<PlusIcon aria-hidden="true" />
+								{{ formatMessage(messages.select) }}
+							</button>
+						</ButtonStyled>
 					</div>
 				</template>
 				<template #empty-state>
@@ -31,21 +35,28 @@
 				</template>
 			</Table>
 			<div class="flex justify-end">
-				<Button
-					type="outlined"
-					class="!border-surface-4 !border"
-					@click="$refs.detectJavaModal.hide()"
-				>
-					<XIcon aria-hidden="true" />
-					{{ formatMessage(messages.cancel) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button
+						class="!shadow-none !border-surface-4 !border"
+						@click="$refs.detectJavaModal.hide()"
+					>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, defineMessages, injectNotificationManager, Table, useVIntl } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	Table,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

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

@@ -17,73 +17,64 @@
 					}
 				"
 			/>
-			<Button
-				type="quiet"
+			<ButtonStyled
 				:color="
 					!hoveringTest && !testingJava
 						? testingJavaSuccess === true
 							? 'green'
 							: 'red'
-						: undefined
+						: 'standard'
 				"
-				:aria-label="formatMessage(messages.testJavaInstallation)"
-				class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
-				:disabled="testingJava || props.disabled"
-				:style="{
-					'--legacy-button-color':
-						(!hoveringTest && !testingJava
-							? testingJavaSuccess === true
-								? 'green'
-								: 'red'
-							: 'standard') &&
-						(!hoveringTest && !testingJava
-							? testingJavaSuccess === true
-								? 'green'
-								: 'red'
-							: 'standard') !== 'standard'
-							? `var(--color-${
-									!hoveringTest && !testingJava
-										? testingJavaSuccess === true
-											? 'green'
-											: 'red'
-										: 'standard'
-								})`
-							: undefined,
-				}"
-				@click="runTest(props.modelValue?.path)"
-				@mouseenter="!props.disabled && (hoveringTest = true)"
-				@mouseleave="hoveringTest = false"
+				color-fill="text"
 			>
-				<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>
+				<button
+					:aria-label="formatMessage(messages.testJavaInstallation)"
+					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">
-			<Button
-				v-if="props.version"
-				v-tooltip="
-					testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
-				"
-				:disabled="props.disabled || installingJava || testingJavaSuccess === true"
-				@click="reinstallJava"
-			>
-				<DownloadIcon />
-				{{
-					installingJava
-						? formatMessage(messages.installing)
-						: formatMessage(messages.installRecommended)
-				}}
-			</Button>
-			<Button :disabled="props.disabled" @click="autoDetect">
-				<SearchIcon />
-				{{ formatMessage(messages.detect) }}
-			</Button>
-			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
-				<FolderSearchIcon />
-				{{ formatMessage(messages.browse) }}
-			</Button>
+			<ButtonStyled v-if="props.version">
+				<button
+					v-tooltip="
+						testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
+					"
+					class="!shadow-none"
+					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
+					@click="reinstallJava"
+				>
+					<DownloadIcon />
+					{{
+						installingJava
+							? formatMessage(messages.installing)
+							: formatMessage(messages.installRecommended)
+					}}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
+					<SearchIcon />
+					{{ formatMessage(messages.detect) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
+					<FolderSearchIcon />
+					{{ formatMessage(messages.browse) }}
+				</button>
+			</ButtonStyled>
 		</span>
 	</div>
 </template>
@@ -99,7 +90,7 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	StyledInput,

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

@@ -1,6 +1,6 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, IconButton } from '@modrinth/ui'
+import { Badge, ButtonStyled } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
@@ -74,16 +74,18 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<IconButton
-									:type="version.id === installedVersion ? 'base' : 'colored'"
-									:color="version.id === installedVersion ? undefined : 'brand'"
-									label="Switch version"
-									:disabled="inProgress || installing || version.id === installedVersion"
-									@click.stop="() => switchVersion(version.id)"
+								<ButtonStyled
+									circular
+									:color="version.id === installedVersion ? 'standard' : 'brand'"
 								>
-									<SwapIcon v-if="version.id !== installedVersion" />
-									<CheckIcon v-else />
-								</IconButton>
+									<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">

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

@@ -9,7 +9,6 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import NavButton from '@/components/ui/NavButton.vue'
 import { instance_listener } from '@/helpers/events.js'
 import { list } from '@/helpers/instance'
-import { instanceKeys } from '@/pages/instance/query-options'
 
 const ITEM_SIZE = 52
 const APPROX_USED_VERTICAL_SPACE = 513 // doesn't need to be exact lol just close enough so there's a little gap and no overflow
@@ -124,7 +123,7 @@ const getInstances = async () => {
 	const instances = await list().catch(handleError)
 
 	for (const instance of instances) {
-		queryClient.setQueryData(instanceKeys.detail(instance.id), instance)
+		queryClient.setQueryData(['instances', 'summary', instance.id], instance)
 	}
 
 	allInstances.value = instances.sort((a, b) => {

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

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { NotepadTextIcon, XIcon } from '@modrinth/assets'
-import { Button, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { type } from '@tauri-apps/plugin-os'
 import { $fetch } from 'ofetch'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
-import { release_ads_window_hold, take_ads_window_hold } from '@/helpers/ads.js'
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { list } from '@/helpers/instance'
 import { get as getCreds } from '@/helpers/mr_auth.ts'
 
-let adsWindowHold = false
-
 type Survey = {
 	id: string
 	tally_id: string
@@ -94,44 +92,30 @@ async function openSurvey() {
 		onOpen: () => console.info('Opened user survey'),
 		onClose: () => {
 			console.info('Closed user survey')
-			if (adsWindowHold) {
-				adsWindowHold = false
-				release_ads_window_hold()
-			}
+			show_ads_window()
 		},
 		onSubmit: () => console.info('Active user survey submitted'),
 	}
 
 	try {
-		await take_ads_window_hold()
-		adsWindowHold = true
+		hide_ads_window()
 		if (tallyWindow.Tally?.openPopup) {
 			console.info(`Opening Tally popup for user survey (form ID: ${formId})`)
 			dismissSurvey()
 			tallyWindow.Tally.openPopup(formId, popupOptions)
 		} else {
 			console.warn('Tally script not yet loaded')
-			adsWindowHold = false
-			await release_ads_window_hold()
+			show_ads_window()
 		}
 	} catch (e) {
 		console.error('Error opening Tally popup:', e)
-		if (adsWindowHold) {
-			adsWindowHold = false
-			await release_ads_window_hold()
-		}
+		show_ads_window()
 	}
 
 	console.info(`Found user survey to show with tally_id: ${formId}`)
+	tallyWindow.Tally?.openPopup(formId, popupOptions)
 }
 
-onUnmounted(() => {
-	if (adsWindowHold) {
-		adsWindowHold = false
-		release_ads_window_hold()
-	}
-})
-
 function dismissSurvey() {
 	if (!availableSurvey.value) return
 	localStorage.setItem(`survey-${availableSurvey.value.id}-display`, String(new Date()))
@@ -209,14 +193,18 @@ onMounted(async () => {
 				{{ formatMessage(messages.surveyFooter) }}
 			</p>
 			<div class="flex gap-2">
-				<Button type="colored" color="brand" @click="openSurvey">
-					<NotepadTextIcon />
-					{{ formatMessage(messages.takeSurvey) }}
-				</Button>
-				<Button @click="dismissSurvey">
-					<XIcon />
-					{{ formatMessage(messages.surveyNoThanks) }}
-				</Button>
+				<ButtonStyled color="brand">
+					<button @click="openSurvey">
+						<NotepadTextIcon />
+						{{ formatMessage(messages.takeSurvey) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="dismissSurvey">
+						<XIcon />
+						{{ formatMessage(messages.surveyNoThanks) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</transition>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -69,7 +69,9 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<Button type="colored" color="brand" @click="install">Install</Button>
+					<ButtonStyled color="brand">
+						<button @click="install">Install</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>

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

@@ -4,37 +4,34 @@
 		class="flex items-center gap-2 mr-1.5"
 		data-tauri-drag-region-exclude
 	>
-		<IconButton
-			type="quiet"
-			label="Minimize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().minimize()"
+		<ButtonStyled type="transparent" circular>
+			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
+				<MinimizeIcon />
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular>
+			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
+				<RestoreIcon v-if="isMaximized" />
+				<MaximizeIcon v-else />
+			</button>
+		</ButtonStyled>
+		<ButtonStyled
+			type="transparent"
+			color="red"
+			color-fill="none"
+			hover-color-fill="background"
+			circular
 		>
-			<MinimizeIcon />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Toggle maximize window"
-			class="relative expanded-button"
-			@click="() => getCurrentWindow().toggleMaximize()"
-		>
-			<RestoreIcon v-if="isMaximized" />
-			<MaximizeIcon v-else />
-		</IconButton>
-		<IconButton
-			type="quiet"
-			label="Close window"
-			class="relative expanded-button close-button"
-			@click="handleClose"
-		>
-			<XIcon />
-		</IconButton>
+			<button class="relative expanded-button close-button" @click="handleClose">
+				<XIcon />
+			</button>
+		</ButtonStyled>
 	</section>
 </template>
 
 <script setup>
 import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
+import { ButtonStyled } from '@modrinth/ui'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, onMounted, onUnmounted, ref } from 'vue'

apps/app-frontend/src/components/ui/app-update-button/index.vue

@@ -1,30 +1,31 @@
 <template>
-	<Button
-		v-if="showUpdatePill"
-		type="outlined"
-		native-type="button"
-		class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
-		:class="{
-			'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
-			'opacity-100 scale-100': 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 color="brand" type="outlined" hover-color-fill="background">
+		<button
+			v-if="showUpdatePill"
+			type="button"
+			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out"
+			:class="{
+				'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
+				'opacity-100 scale-100': 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>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
-import { Button, defineMessages, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import {

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

@@ -2,9 +2,8 @@
 import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
 	injectNotificationManager,
 	IntlFormatted,
 	StyledInput,
@@ -18,40 +17,17 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { useFriends } from '@/composables/use-friends'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
-import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
-import { useTheming } from '@/store/state'
 
 const { formatMessage } = useVIntl()
 
 const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
-const themeStore = useTheming()
 
 const props = defineProps<{
 	credentials: ModrinthCredentials | null
 	signIn: () => void
 }>()
 
-type FriendsSectionCollapsedFlag =
-	| 'friends_active_collapsed'
-	| 'friends_online_collapsed'
-	| 'friends_offline_collapsed'
-	| 'friends_pending_collapsed'
-
-function isFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag) {
-	return themeStore.getFeatureFlag(flag)
-}
-
-function setFriendsSectionCollapsed(flag: FriendsSectionCollapsedFlag, collapsed: boolean) {
-	themeStore.featureFlags[flag] = collapsed
-	getSettings()
-		.then((settings) => {
-			settings.feature_flags[flag] = collapsed
-			return setSettings(settings)
-		})
-		.catch(handleError)
-}
-
 const userCredentials = computed(() => props.credentials)
 const {
 	friends: userFriends,
@@ -221,20 +197,26 @@ const messages = defineMessages({
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials?.user_id">
-							<Button type="colored" color="brand" @click="addFriend(friend)">
-								<UserPlusIcon />
-								Accept
-							</Button>
-							<Button @click="removeFriend(friend)">
-								<XIcon />
-								Ignore
-							</Button>
+							<ButtonStyled color="brand">
+								<button @click="addFriend(friend)">
+									<UserPlusIcon />
+									Accept
+								</button>
+							</ButtonStyled>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Ignore
+								</button>
+							</ButtonStyled>
 						</template>
 						<template v-else>
-							<Button @click="removeFriend(friend)">
-								<XIcon />
-								Cancel
-							</Button>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Cancel
+								</button>
+							</ButtonStyled>
 						</template>
 					</div>
 				</div>
@@ -258,28 +240,26 @@ const messages = defineMessages({
 					wrapper-class="flex-1"
 					@keyup.enter="addFriendFromModal"
 				/>
-				<Button
-					type="colored"
-					color="brand"
-					:disabled="username.length === 0"
-					@click="addFriendFromModal"
-				>
-					<SendIcon />
-					{{ formatMessage(messages.sendFriendRequest) }}
-				</Button>
+				<ButtonStyled color="brand">
+					<button :disabled="username.length === 0" @click="addFriendFromModal">
+						<SendIcon />
+						{{ formatMessage(messages.sendFriendRequest) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
-			<IconButton
-				v-tooltip="formatMessage(messages.addFriend)"
-				type="quiet"
-				:label="formatMessage(messages.addFriend)"
-				@click="addFriendModal.show"
-			>
-				<UserPlusIcon />
-			</IconButton>
+			<ButtonStyled circular type="transparent">
+				<button
+					v-tooltip="formatMessage(messages.addFriend)"
+					:aria-label="formatMessage(messages.addFriend)"
+					@click="addFriendModal.show"
+				>
+					<UserPlusIcon />
+				</button>
+			</ButtonStyled>
 			<StyledInput
 				v-model="search"
 				:icon="SearchIcon"
@@ -294,23 +274,23 @@ const messages = defineMessages({
 		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
-		<IconButton
-			v-if="incomingRequests.length > 0"
-			v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-			type="quiet"
-			:label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-			class="relative"
-			@click="friendInvitesModal.show"
-		>
-			<MailIcon />
-			<span
-				v-if="incomingRequests.length > 0"
-				aria-hidden="true"
-				class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
+			<button
+				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				class="relative"
+				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				@click="friendInvitesModal.show"
 			>
-				{{ incomingRequests.length }}
-			</span>
-		</IconButton>
+				<MailIcon />
+				<span
+					v-if="incomingRequests.length > 0"
+					aria-hidden="true"
+					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+				>
+					{{ incomingRequests.length }}
+				</span>
+			</button>
+		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
 		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
@@ -351,42 +331,33 @@ const messages = defineMessages({
 			<FriendsSection
 				v-if="activeFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_active_collapsed')"
+				open-by-default
 				:friends="activeFriends"
 				:heading="formatMessage(messages.active)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_active_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_active_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="onlineFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_online_collapsed')"
+				open-by-default
 				:friends="onlineFriends"
 				:heading="formatMessage(messages.online)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_online_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_online_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="offlineFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_offline_collapsed')"
+				:open-by-default="activeFriends.length + onlineFriends.length < 3"
 				:friends="offlineFriends"
 				:heading="formatMessage(messages.offline)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_offline_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_offline_collapsed', true)"
 			/>
 			<FriendsSection
 				v-if="pendingFriends.length > 0"
 				:is-searching="!!search"
-				:open-by-default="!isFriendsSectionCollapsed('friends_pending_collapsed')"
 				:friends="pendingFriends"
 				:heading="formatMessage(messages.pending)"
 				:remove-friend="removeFriend"
-				@on-open="setFriendsSectionCollapsed('friends_pending_collapsed', false)"
-				@on-close="setFriendsSectionCollapsed('friends_pending_collapsed', true)"
 			/>
 			<p v-if="filteredFriends.length === 0 && search" class="text-sm text-secondary my-1 mx-4">
 				{{ formatMessage(messages.noFriendsMatch, { query: search }) }}

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

@@ -3,9 +3,9 @@ import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	Avatar,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
-	TeleportOverflowMenu,
+	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
@@ -31,11 +31,6 @@ const props = withDefaults(
 	},
 )
 
-const emit = defineEmits<{
-	onOpen: []
-	onClose: []
-}>()
-
 function createContextMenuOptions(friend: FriendWithUserData) {
 	if (friend.accepted) {
 		return [
@@ -117,8 +112,6 @@ const messages = defineMessages({
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
 		"
-		@on-open="emit('onOpen')"
-		@on-close="emit('onClose')"
 	>
 		<template #title>
 			<h3 class="text-base text-primary font-medium m-0">
@@ -166,35 +159,29 @@ const messages = defineMessages({
 							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
 						</div>
 					</RouterLink>
-					<TeleportOverflowMenu
-						v-if="friend.accepted"
-						type="quiet"
-						label="More options"
-						class="opacity-0 group-hover:opacity-100 transition-opacity"
-						:options="[
-							{
-								id: 'remove-friend',
-								label: formatMessage(messages.removeFriend),
-								action: () => removeFriend(friend),
-								tone: 'red',
-							},
-						]"
-					>
-						<MoreVerticalIcon />
-						<template #remove-friend>
-							<TrashIcon />
-							{{ formatMessage(messages.removeFriend) }}
-						</template>
-					</TeleportOverflowMenu>
-					<IconButton
-						v-else
-						v-tooltip="formatMessage(messages.cancelRequest)"
-						type="quiet"
-						:label="formatMessage(messages.cancelRequest)"
-						@click="removeFriend(friend)"
-					>
-						<XIcon />
-					</IconButton>
+					<ButtonStyled v-if="friend.accepted" circular type="transparent">
+						<OverflowMenu
+							class="opacity-0 group-hover:opacity-100 transition-opacity"
+							:options="[
+								{
+									id: 'remove-friend',
+									action: () => removeFriend(friend),
+									color: 'red',
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #remove-friend>
+								<TrashIcon />
+								{{ formatMessage(messages.removeFriend) }}
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+					<ButtonStyled v-else type="transparent" circular>
+						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+							<XIcon />
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</template>

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

@@ -1,6 +1,12 @@
 <script setup>
 import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import { Admonition, Avatar, Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'
@@ -9,7 +15,6 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { list } from '@/helpers/instance'
 import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'
-import { instanceKeys } from '@/pages/instance/query-options'
 
 const { handleError } = injectNotificationManager()
 const queryClient = useQueryClient()
@@ -62,7 +67,7 @@ async function addServer(instance) {
 	try {
 		await add_server_to_instance(instance.id, serverName.value, serverAddress.value, 'prompt')
 		instance.added = true
-		await queryClient.invalidateQueries({ queryKey: instanceKeys.worlds(instance.id) })
+		await queryClient.invalidateQueries({ queryKey: ['worlds', instance.id] })
 
 		trackEvent('AddServerToInstance', {
 			server_name: serverName.value,
@@ -104,15 +109,19 @@ async function addServer(instance) {
 						/>
 						{{ instance.name }}
 					</router-link>
-					<Button :disabled="instance.added || instance.adding" @click="addServer(instance)">
-						<PlusIcon v-if="!instance.added && !instance.adding" />
-						<CheckIcon v-else-if="instance.added" />
-						{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
-					</Button>
+					<ButtonStyled>
+						<button :disabled="instance.added || instance.adding" @click="addServer(instance)">
+							<PlusIcon v-if="!instance.added && !instance.adding" />
+							<CheckIcon v-else-if="instance.added" />
+							{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<Button @click="modal.hide()">Cancel</Button>
+				<ButtonStyled>
+					<button @click="modal.hide()">Cancel</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>

apps/app-frontend/src/components/ui/instance-page-header/index.vue

@@ -55,8 +55,8 @@
 				</PageHeaderMetadataItem>
 				<PageHeaderMetadataItem
 					v-if="sharedInstanceManager?.type !== 'user'"
-					:icon="TagIcon"
-					:icon-props="{ tag: loaderDisplayName, enforceType: 'loader' }"
+					:icon="ServerLoaderIcon"
+					:icon-props="{ loader: loaderDisplayName }"
 					tooltip="Mod loader"
 				>
 					{{ loaderLabel }}
@@ -85,98 +85,66 @@
 
 		<template #actions>
 			<PageHeaderActions>
-				<Button
-					v-if="isInstalling"
-					type="colored"
-					color="brand"
-					size="xl"
-					native-type="button"
-					disabled
-				>
-					{{ formatMessage(commonMessages.installingLabel) }}
-				</Button>
-				<Button
-					v-else-if="playing"
-					type="colored"
-					color="red"
-					size="xl"
-					native-type="button"
-					:disabled="stopping"
-					@click="emit('stop')"
-				>
-					<StopCircleIcon />
-					{{
-						stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
-					}}
-				</Button>
-				<Button
-					v-else-if="instance.quarantined"
-					v-tooltip="formatMessage(messages.lockedPlayTooltip)"
-					type="colored"
-					color="brand"
-					size="xl"
-					native-type="button"
-					disabled
-				>
-					<PlayIcon />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<Button
-					v-else-if="instance.install_stage !== 'installed'"
-					type="colored"
-					color="brand"
-					size="xl"
-					native-type="button"
-					@click="emit('repair')"
-				>
-					<DownloadIcon />
-					{{ formatMessage(messages.repair) }}
-				</Button>
-				<SplitButton
+				<ButtonStyled v-if="isInstalling" color="brand" size="large">
+					<button type="button" disabled>
+						{{ formatMessage(commonMessages.installingLabel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="playing" color="red" size="large">
+					<button type="button" :disabled="stopping" @click="emit('stop')">
+						<StopCircleIcon />
+						{{
+							stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
+						}}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="instance.quarantined" color="brand" size="large">
+					<button v-tooltip="formatMessage(messages.lockedPlayTooltip)" type="button" disabled>
+						<PlayIcon />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
+					<button type="button" @click="emit('repair')">
+						<DownloadIcon />
+						{{ formatMessage(messages.repair) }}
+					</button>
+				</ButtonStyled>
+				<JoinedButtons
 					v-else-if="!loading && isServerInstance"
-					type="colored"
+					:actions="serverPlayActions"
 					color="brand"
-					size="xl"
-					:options="serverPlayOptions"
-					:menu-label="formatMessage(messages.launchInstance)"
-					@click="emit('playServer')"
-				>
-					<PlayIcon />
-					{{ formatMessage(commonMessages.playButton) }}
-				</SplitButton>
-				<Button
-					v-else-if="!loading"
-					type="colored"
-					color="brand"
-					size="xl"
-					native-type="button"
-					@click="emit('play')"
-				>
-					<PlayIcon />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<Button v-else type="colored" color="brand" size="xl" native-type="button" disabled>{{
-					formatMessage(messages.starting)
-				}}</Button>
+					size="large"
+				/>
+				<ButtonStyled v-else-if="!loading" color="brand" size="large">
+					<button type="button" @click="emit('play')">
+						<PlayIcon />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else color="brand" size="large">
+					<button type="button" disabled>{{ formatMessage(messages.starting) }}</button>
+				</ButtonStyled>
 
-				<IconButton
-					v-tooltip="formatMessage(messages.instanceSettings)"
-					size="xl"
-					:label="formatMessage(messages.instanceSettings)"
-					native-type="button"
-					@click="emit('settings')"
-				>
-					<SettingsIcon />
-				</IconButton>
-				<TeleportOverflowMenu
-					type="quiet"
-					size="xl"
-					:label="formatMessage(messages.moreActions)"
-					:tooltip="formatMessage(messages.moreActions)"
-					:options="moreActions"
-				>
-					<MoreVerticalIcon />
-				</TeleportOverflowMenu>
+				<ButtonStyled circular size="large">
+					<button
+						v-tooltip="formatMessage(messages.instanceSettings)"
+						type="button"
+						:aria-label="formatMessage(messages.instanceSettings)"
+						@click="emit('settings')"
+					>
+						<SettingsIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular size="large" type="transparent">
+					<TeleportOverflowMenu
+						:options="moreActions"
+						:tooltip="formatMessage(messages.moreActions)"
+						:aria-label="formatMessage(messages.moreActions)"
+					>
+						<MoreVerticalIcon />
+					</TeleportOverflowMenu>
+				</ButtonStyled>
 			</PageHeaderActions>
 		</template>
 	</PageHeader>
@@ -199,20 +167,23 @@ import {
 	TimerIcon,
 	UnknownIcon,
 } from '@modrinth/assets'
-import { Button, IconButton, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
-	type OverflowMenuOption,
+	type JoinedButtonAction,
+	JoinedButtons,
+	LoaderIcon as ServerLoaderIcon,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
 	type ServerLoader,
-	TagIcon,
+	TeleportOverflowMenu,
+	type TeleportOverflowMenuItem,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
@@ -379,7 +350,13 @@ const playtimeLabel = computed(() => {
 	const seconds = Math.floor(props.timePlayed)
 	return `${seconds} second${seconds > 1 ? 's' : ''}`
 })
-const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
+const serverPlayActions = computed<JoinedButtonAction[]>(() => [
+	{
+		id: 'join_server',
+		label: formatMessage(commonMessages.playButton),
+		icon: PlayIcon,
+		action: () => emit('playServer'),
+	},
 	{
 		id: 'launch_instance',
 		label: formatMessage(messages.launchInstance),
@@ -387,8 +364,8 @@ const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
 		action: () => emit('play'),
 	},
 ])
-const moreActions = computed<OverflowMenuOption[]>(() => {
-	const actions: OverflowMenuOption[] = [
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
+	const actions: TeleportOverflowMenuItem[] = [
 		{
 			id: 'open-folder',
 			label: formatMessage(messages.openFolder),
@@ -416,12 +393,12 @@ const moreActions = computed<OverflowMenuOption[]>(() => {
 
 	if (props.instance.shared_instance?.role === 'member') {
 		actions.push(
-			{ type: 'divider' },
+			{ divider: true },
 			{
 				id: 'report-shared-instance',
 				label: formatMessage(commonMessages.reportButton),
 				icon: ReportIcon,
-				tone: 'red',
+				color: 'red',
 				action: (event) => emit('report', event),
 			},
 		)

apps/app-frontend/src/components/ui/instance/instance-admonitions/index.vue

@@ -36,11 +36,11 @@ import { computed, ref, watch } from 'vue'
 import type { SharedInstanceUnavailableReason } from '@/helpers/install'
 import type { GameInstance } from '@/helpers/types'
 
-import InstanceAdmonitionsSharedInstanceStale from './shared-instance-stale.vue'
-import InstanceAdmonitionsSharedInstanceUnavailable from './shared-instance-unavailable.vue'
-import InstanceAdmonitionsSharedInstanceUpdateAvailable from './shared-instance-update-available.vue'
-import InstanceAdmonitionsSharedInstanceWrongAccount from './shared-instance-wrong-account.vue'
-import type { InstanceAdmonitionItem, SharedInstanceRole } from './types.ts'
+import InstanceAdmonitionsSharedInstanceStale from './instance-admonitions-shared-instance-stale.vue'
+import InstanceAdmonitionsSharedInstanceUnavailable from './instance-admonitions-shared-instance-unavailable.vue'
+import InstanceAdmonitionsSharedInstanceUpdateAvailable from './instance-admonitions-shared-instance-update-available.vue'
+import InstanceAdmonitionsSharedInstanceWrongAccount from './instance-admonitions-shared-instance-wrong-account.vue'
+import type { InstanceAdmonitionItem, SharedInstanceRole } from './types'
 
 defineOptions({
 	inheritAttrs: false,

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-stale.vue

@@ -6,27 +6,23 @@
 	>
 		{{ formatMessage(messages.sharedInstanceChangesBody) }}
 		<template #actions>
-			<Button
-				type="colored"
-				color="blue"
-				size="lg"
-				:disabled="isPublishButtonDisabled"
-				@click="reviewChanges"
-			>
-				<SpinnerIcon
-					v-if="isReviewingPublish || isPublishing"
-					class="animate-spin"
-					aria-hidden="true"
-				/>
-				<UploadIcon v-else aria-hidden="true" />
-				{{
-					isPublishing
-						? formatMessage(messages.sharedInstancePublishingButton)
-						: isReviewingPublish
-							? formatMessage(messages.sharedInstanceReviewingButton)
-							: formatMessage(messages.sharedInstancePublishButton)
-				}}
-			</Button>
+			<ButtonStyled color="blue">
+				<button class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
+					<SpinnerIcon
+						v-if="isReviewingPublish || isPublishing"
+						class="animate-spin"
+						aria-hidden="true"
+					/>
+					<UploadIcon v-else aria-hidden="true" />
+					{{
+						isPublishing
+							? formatMessage(messages.sharedInstancePublishingButton)
+							: isReviewingPublish
+								? formatMessage(messages.sharedInstanceReviewingButton)
+								: formatMessage(messages.sharedInstancePublishButton)
+					}}
+				</button>
+			</ButtonStyled>
 		</template>
 	</Admonition>
 
@@ -40,13 +36,13 @@
 
 <script setup lang="ts">
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { Admonition, Button, useVIntl } from '@modrinth/ui'
+import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'
 import type { GameInstance } from '@/helpers/types'
 
-import { instanceAdmonitionsMessages as messages } from './messages'
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
 
 defineProps<{
 	instance: GameInstance

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-unavailable.vue

@@ -8,17 +8,19 @@
 	>
 		{{ formatSharedInstanceUnavailable(reason ?? null, manager) }}
 		<template v-if="reason === 'quarantined'" #actions>
-			<Button type="colored" color="orange" size="lg" @click="emit('delete')">
-				<TrashIcon aria-hidden="true" />
-				{{ formatMessage(messages.deleteInstance) }}
-			</Button>
+			<ButtonStyled color="orange">
+				<button class="!h-10" @click="emit('delete')">
+					<TrashIcon aria-hidden="true" />
+					{{ formatMessage(messages.deleteInstance) }}
+				</button>
+			</ButtonStyled>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
 import { TrashIcon } from '@modrinth/assets'
-import { Admonition, Button, defineMessages, useVIntl } from '@modrinth/ui'
+import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 
 import type { SharedInstanceUnavailableReason } from '@/helpers/install'
 import {

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-update-available.vue

@@ -6,19 +6,21 @@
 	>
 		{{ formatMessage(messages.sharedInstanceUpdateAvailableBody, { name: instanceName }) }}
 		<template #actions>
-			<Button type="colored" color="blue" size="lg" @click="emit('review', $event)">
-				<DownloadIcon aria-hidden="true" />
-				{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
-			</Button>
+			<ButtonStyled color="blue">
+				<button class="!h-10" @click="emit('review', $event)">
+					<DownloadIcon aria-hidden="true" />
+					{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
+				</button>
+			</ButtonStyled>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon } from '@modrinth/assets'
-import { Admonition, Button, useVIntl } from '@modrinth/ui'
+import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
 
-import { instanceAdmonitionsMessages as messages } from './messages'
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
 
 defineProps<{
 	instanceName: string

apps/app-frontend/src/components/ui/instance/instance-admonitions/instance-admonitions-shared-instance-wrong-account.vue

@@ -29,7 +29,7 @@ import { computed } from 'vue'
 
 import { get_user } from '@/helpers/cache'
 
-import { instanceAdmonitionsMessages as messages } from './messages'
+import { instanceAdmonitionsMessages as messages } from './instance-admonitions-messages'
 import type { SharedInstanceRole } from './types'
 
 const props = defineProps<{

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

@@ -2,13 +2,13 @@
 import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	Checkbox,
 	Chips,
 	defineMessages,
 	injectNotificationManager,
+	OverflowMenu,
 	StyledInput,
-	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -21,9 +21,9 @@ import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInsta
 import { trackEvent } from '@/helpers/analytics'
 import { install_duplicate_instance } from '@/helpers/install'
 import { edit, edit_icon, list, remove } from '@/helpers/instance'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { GameInstance } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { GameInstance } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -298,24 +298,17 @@ const messages = defineMessages({
 			<div class="flex flex-col gap-1">
 				<span class="text-lg font-semibold text-contrast">Icon</span>
 				<div class="group relative w-fit">
-					<TeleportOverflowMenu
-						:label="formatMessage(messages.editIcon)"
-						:tooltip="formatMessage(messages.editIcon)"
-						:icon-only="false"
-						type="quiet"
-						interaction="none"
-						class="m-0 !h-auto cursor-pointer appearance-none border-none bg-transparent !p-0 transition-transform group-active:scale-95"
+					<OverflowMenu
+						v-tooltip="formatMessage(messages.editIcon)"
+						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
 						:options="[
 							{
 								id: 'select',
-								label: icon
-									? formatMessage(messages.replaceIcon)
-									: formatMessage(messages.selectIcon),
 								action: () => setIcon(),
 							},
 							{
 								id: 'remove',
-								label: formatMessage(messages.removeIcon),
+								color: 'danger',
 								action: () => resetIcon(),
 								shown: !!icon,
 							},
@@ -338,7 +331,7 @@ const messages = defineMessages({
 							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
 						</template>
 						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-					</TeleportOverflowMenu>
+					</OverflowMenu>
 				</div>
 			</div>
 		</div>
@@ -359,15 +352,17 @@ const messages = defineMessages({
 				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<Button
-					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-					aria-labelledby="duplicate-instance-label"
-					:disabled="installing"
-					class="w-max"
-					@click="duplicateInstance"
-				>
-					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-				</Button>
+				<ButtonStyled>
+					<button
+						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+						aria-labelledby="duplicate-instance-label"
+						:disabled="installing"
+						class="w-max !shadow-none"
+						@click="duplicateInstance"
+					>
+						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+					</button>
+				</ButtonStyled>
 				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
@@ -393,9 +388,11 @@ const messages = defineMessages({
 						class="w-full max-w-[300px]"
 						@submit="() => addCategory"
 					/>
-					<Button class="w-fit" @click="() => addCategory()">
-						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-					</Button>
+					<ButtonStyled>
+						<button class="w-fit !shadow-none" @click="() => addCategory()">
+							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+						</button>
+					</ButtonStyled>
 				</div>
 			</div>
 			<p class="m-0">
@@ -424,22 +421,22 @@ const messages = defineMessages({
 			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 				{{ formatMessage(messages.deleteInstance) }}
 			</h2>
-			<Button
-				type="colored"
-				color="red"
-				aria-labelledby="delete-instance-label"
-				:disabled="removing"
-				class="w-fit"
-				@click="deleteConfirmModal.show()"
-			>
-				<SpinnerIcon v-if="removing" class="animate-spin" />
-				<TrashIcon v-else />
-				{{
-					removing
-						? formatMessage(messages.deletingInstanceButton)
-						: formatMessage(messages.deleteInstanceButton)
-				}}
-			</Button>
+			<ButtonStyled color="red">
+				<button
+					aria-labelledby="delete-instance-label"
+					:disabled="removing"
+					class="w-fit !shadow-none"
+					@click="deleteConfirmModal.show()"
+				>
+					<SpinnerIcon v-if="removing" class="animate-spin" />
+					<TrashIcon v-else />
+					{{
+						removing
+							? formatMessage(messages.deletingInstanceButton)
+							: formatMessage(messages.deleteInstanceButton)
+					}}
+				</button>
+			</ButtonStyled>
 			<p class="m-0">
 				{{ formatMessage(messages.deleteInstanceDescription) }}
 			</p>

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

@@ -10,9 +10,9 @@ import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, Hooks } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { AppSettings, Hooks } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -56,35 +56,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'Hooks allow advanced users to run certain system commands before and after launching the game.',
 	},
-	hookVariablesDescription: {
-		id: 'instance.settings.tabs.hooks.variables.description',
-		defaultMessage:
-			'Hooks run in the working directory of the instance, with the following variables:',
-	},
-	instanceNameDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
-		defaultMessage: '$INST_NAME: The name of the instance',
-	},
-	instanceIdDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
-		defaultMessage: "$INST_ID: The name of the instance's folder",
-	},
-	instanceDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
-		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
-	},
-	instanceMcDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
-		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
-	},
-	instanceJavaDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
-		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
-	},
-	instanceJavaArgsDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
-		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
-	},
 	customHooks: {
 		id: 'instance.settings.tabs.hooks.custom-hooks',
 		defaultMessage: 'Custom launch hooks',
@@ -182,17 +153,5 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.postExitDescription) }}
 		</p>
-
-		<div class="m-0 mt-6">
-			{{ formatMessage(messages.hookVariablesDescription) }}
-		</div>
-		<ul class="m-0 mt-2">
-			<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-			<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-		</ul>
 	</div>
 </template>

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

@@ -15,6 +15,7 @@ import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
 import { useManagedContentPolicy } from '@/composables/instances/use-managed-content-policy'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project_versions, get_version } from '@/helpers/cache'
@@ -33,12 +34,10 @@ import {
 import { get_loader_versions } from '@/helpers/metadata'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
 import { provideInstanceBackup } from '@/providers/instance-backup'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 import { useTheming } from '@/store/state'
 
-import type { Manifest } from '../../../../helpers/types'
-import { instanceKeys } from '../../query-options.ts'
-import { injectInstanceSettings } from './instance-settings-context.ts'
-import SharedInstanceInstallationSettingsControls from './shared-instance-installation-settings-controls.vue'
+import type { Manifest } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const filePicker = injectFilePicker()
@@ -149,9 +148,7 @@ async function unlinkSharedInstance() {
 	unlinkingSharedInstance.value = true
 	try {
 		await unlink_shared_instance(instance.value.id)
-		await queryClient.invalidateQueries({
-			queryKey: instanceKeys.sharedMembers(instance.value.id),
-		})
+		await queryClient.invalidateQueries({ queryKey: ['sharedInstanceUsers', instance.value.id] })
 		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
 		onUnlinked()
 	} catch (error) {

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

@@ -9,7 +9,7 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -25,9 +25,9 @@ import useJavaTest from '@/composables/useJavaTest'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -224,60 +224,45 @@ const messages = defineMessages({
 							wrapper-class="flex-1 min-w-0"
 							@update:model-value="(val) => (javaPath = String(val))"
 						/>
-						<Button
-							type="quiet"
+						<ButtonStyled
 							:color="
 								!hoveringTest && !testingJava
 									? javaTestResult === true
 										? 'green'
 										: 'red'
-									: undefined
+									: 'standard'
 							"
-							:disabled="!overrideJavaInstall || testingJava"
-							:style="{
-								'--legacy-button-color':
-									(!hoveringTest && !testingJava
-										? javaTestResult === true
-											? 'green'
-											: 'red'
-										: 'standard') &&
-									(!hoveringTest && !testingJava
-										? javaTestResult === true
-											? 'green'
-											: 'red'
-										: 'standard') !== 'standard'
-										? `var(--color-${
-												!hoveringTest && !testingJava
-													? javaTestResult === true
-														? 'green'
-														: 'red'
-													: 'standard'
-											})`
-										: undefined,
-							}"
-							class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
-							@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
-							@mouseenter="overrideJavaInstall && (hoveringTest = true)"
-							@mouseleave="hoveringTest = false"
+							color-fill="text"
 						>
-							<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-							<CheckCircleIcon
-								v-else-if="javaTestResult === true && !hoveringTest"
-								class="h-4 w-4"
-							/>
-							<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-							<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-						</Button>
+							<button
+								:disabled="!overrideJavaInstall || testingJava"
+								@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
+								@mouseenter="overrideJavaInstall && (hoveringTest = true)"
+								@mouseleave="hoveringTest = false"
+							>
+								<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+								<CheckCircleIcon
+									v-else-if="javaTestResult === true && !hoveringTest"
+									class="h-4 w-4"
+								/>
+								<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
+								<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
+							</button>
+						</ButtonStyled>
 					</div>
 					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<Button @click="handleDetectJava">
-							<SearchIcon />
-							Detect
-						</Button>
-						<Button @click="handleBrowseJava">
-							<FolderSearchIcon />
-							Browse
-						</Button>
+						<ButtonStyled>
+							<button @click="handleDetectJava">
+								<SearchIcon />
+								Detect
+							</button>
+						</ButtonStyled>
+						<ButtonStyled>
+							<button @click="handleBrowseJava">
+								<FolderSearchIcon />
+								Browse
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>

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

@@ -40,28 +40,29 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex justify-end">
-						<IconButton
-							v-tooltip="formatMessage(messages.revokeInvite)"
-							type="quiet"
-							:label="
-								formatMessage(messages.revokeInviteWithCode, {
-									code: row.id,
-								})
-							"
-							:disabled="revokeInviteMutation.isPending.value || isBusy"
-							class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
-							@click="revokeInviteModal?.show(row.id)"
-						>
-							<SpinnerIcon
-								v-if="
-									revokeInviteMutation.isPending.value &&
-									revokeInviteMutation.variables.value?.inviteId === row.id
+						<ButtonStyled circular type="transparent">
+							<button
+								v-tooltip="formatMessage(messages.revokeInvite)"
+								:aria-label="
+									formatMessage(messages.revokeInviteWithCode, {
+										code: row.id,
+									})
 								"
-								class="animate-spin"
-								aria-hidden="true"
-							/>
-							<XIcon v-else aria-hidden="true" />
-						</IconButton>
+								:disabled="revokeInviteMutation.isPending.value || isBusy"
+								class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+								@click="revokeInviteModal?.show(row.id)"
+							>
+								<SpinnerIcon
+									v-if="
+										revokeInviteMutation.isPending.value &&
+										revokeInviteMutation.variables.value?.inviteId === row.id
+									"
+									class="animate-spin"
+									aria-hidden="true"
+								/>
+								<XIcon v-else aria-hidden="true" />
+							</button>
+						</ButtonStyled>
 					</div>
 				</template>
 			</Table>
@@ -80,8 +81,8 @@
 
 <script setup lang="ts">
 import { SpinnerIcon, XIcon } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
 import {
+	ButtonStyled,
 	CopyCode,
 	defineMessages,
 	Table,
@@ -93,6 +94,8 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
+import ConfirmRevokeSharedInstanceInviteModal from '@/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue'
+import SharedInstanceInstallationSettingsControls from '@/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue'
 import { config } from '@/config'
 import {
 	get_shared_instance_invites,
@@ -101,11 +104,7 @@ import {
 	unpublish_shared_instance,
 } from '@/helpers/instance'
 import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
-
-import { instanceKeys } from '../../query-options.ts'
-import ConfirmRevokeSharedInstanceInviteModal from './confirm-revoke-shared-instance-invite-modal.vue'
-import { injectInstanceSettings } from './instance-settings-context.ts'
-import SharedInstanceInstallationSettingsControls from './shared-instance-installation-settings-controls.vue'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
 const { instance, offline, onUnlinked } = injectInstanceSettings()
 const { notifySharedInstanceError } = useSharedInstanceErrors()
@@ -194,7 +193,7 @@ async function unpublishSharedInstance() {
 	unpublishing.value = true
 	try {
 		await unpublish_shared_instance(instance.value.id)
-		queryClient.setQueryData(instanceKeys.sharedMembers(instance.value.id), [])
+		queryClient.setQueryData(['sharedInstanceUsers', instance.value.id], [])
 		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
 		onUnlinked()
 	} catch (error) {

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

@@ -11,9 +11,9 @@ import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings } from '../../../../helpers/types'
-import { injectInstanceSettings } from './instance-settings-context'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue

@@ -7,9 +7,10 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, Button, ButtonLink, Collapsible, IconButton, NewModal } from '@modrinth/ui'
+import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { handleSevereError } from '@/store/error.js'
 
@@ -28,13 +29,19 @@ function show(errorVal: { message?: string }) {
 	matchedError.value = findMinecraftAuthError(rawError.value)
 
 	debugCollapsed.value = true
+	hide_ads_window()
 	modal.value?.show()
 }
 
 function hide() {
+	onModalHide()
 	modal.value?.hide()
 }
 
+function onModalHide() {
+	show_ads_window()
+}
+
 defineExpose({
 	show,
 	hide,
@@ -67,7 +74,7 @@ async function copyToClipboard(text: string) {
 </script>
 
 <template>
-	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'">
+	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
 		<div class="flex flex-col gap-6">
 			<Admonition
 				type="warning"
@@ -130,18 +137,16 @@ async function copyToClipboard(text: string) {
 
 			<!-- Action buttons -->
 			<div class="flex items-center gap-2">
-				<ButtonLink href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
-					<MessagesSquareIcon /> Contact support
-				</ButtonLink>
-				<Button
-					type="colored"
-					color="brand"
-					:disabled="loadingSignIn"
-					class="!w-full"
-					@click="signInAgain"
-				>
-					<LogInIcon /> Sign in again
-				</Button>
+				<ButtonStyled>
+					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+						<MessagesSquareIcon /> Contact support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
+						<LogInIcon /> Sign in again
+					</button>
+				</ButtonStyled>
 			</div>
 
 			<div class="flex flex-col gap-2">
@@ -171,15 +176,16 @@ async function copyToClipboard(text: string) {
 							>
 								{{ debugInfo }}
 							</div>
-							<IconButton
-								v-tooltip="'Copy debug info'"
-								:label="'Copy debug info'"
-								:disabled="copied"
-								@click="copyToClipboard(debugInfo)"
-							>
-								<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-								<template v-else> <CopyIcon /> </template>
-							</IconButton>
+							<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>

apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue

@@ -20,28 +20,39 @@
 		</div>
 
 		<div class="flex flex-col gap-6 px-6 pb-6">
-			<div class="grid grid-cols-2 gap-2">
-				<ButtonLink href="https://support.modrinth.com" @click="modal?.hide()">
-					<MessagesSquareIcon />
-					{{ formatMessage(messages.getSupport) }}
-				</ButtonLink>
-				<Button type="colored" color="brand" :disabled="loadingSignIn" @click="signIn">
-					<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
-					<svg
-						v-else
-						width="20"
-						height="20"
-						viewBox="0 0 20 20"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-						<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-						<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-						<rect x="10.75" y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-					</svg>
-					{{ formatMessage(messages.signIn) }}
-				</Button>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<a class="w-full !shadow-none" href="https://support.modrinth.com" @click="modal?.hide()">
+						<MessagesSquareIcon />
+						{{ formatMessage(messages.getSupport) }}
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button class="w-full !shadow-none" :disabled="loadingSignIn" @click="signIn">
+						<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
+						<svg
+							v-else
+							width="20"
+							height="20"
+							viewBox="0 0 20 20"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+							<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+							<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+							<rect
+								x="10.75"
+								y="10.75"
+								width="9.25"
+								height="9.25"
+								fill="black"
+								fill-opacity="0.9"
+							/>
+						</svg>
+						{{ formatMessage(messages.signIn) }}
+					</button>
+				</ButtonStyled>
 			</div>
 			<p class="m-0 text-center text-sm text-secondary">
 				{{ formatMessage(messages.dontHaveAccount) }}
@@ -58,7 +69,7 @@
 
 <script setup lang="ts">
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { Button, ButtonLink, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
 import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'

apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue

@@ -6,14 +6,18 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" @click="modal?.hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button type="colored" color="red" @click="confirm">
-					<TrashIcon />
-					{{ formatMessage(messages.deleteButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="modal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<TrashIcon />
+						{{ formatMessage(messages.deleteButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -23,7 +27,7 @@
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	NewModal,

apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue

@@ -3,6 +3,7 @@
 		ref="modal"
 		:header="formatMessage(messages.installToPlay)"
 		:closable="true"
+		:on-hide="show_ads_window"
 		max-width="544px"
 		width="544px"
 	>
@@ -17,10 +18,12 @@
 						{{ formatMessage(messages.sharedInstance) }}
 					</span>
 
-					<Button type="quiet" @click="openViewContents">
-						<EyeIcon />
-						{{ formatMessage(messages.viewContents) }}
-					</Button>
+					<ButtonStyled type="transparent">
+						<button @click="openViewContents">
+							<EyeIcon />
+							{{ formatMessage(messages.viewContents) }}
+						</button>
+					</ButtonStyled>
 				</div>
 
 				<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
@@ -110,30 +113,40 @@
 			</p>
 
 			<div class="flex w-full items-center justify-between gap-2">
-				<Button type="quiet" color="red" @click="handleReport">
-					<ReportIcon />
-					{{ formatMessage(commonMessages.reportButton) }}
-				</Button>
+				<ButtonStyled type="transparent" color="red">
+					<button @click="handleReport">
+						<ReportIcon />
+						{{ formatMessage(commonMessages.reportButton) }}
+					</button>
+				</ButtonStyled>
 
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<Button type="quiet" color="orange" @click="handleAccept">
-							{{ formatMessage(messages.installAnyway) }}
-						</Button>
-						<Button type="colored" color="brand" @click="handleDecline">
-							<BanIcon />
-							{{ formatMessage(messages.dontInstall) }}
-						</Button>
+						<ButtonStyled type="transparent" color="orange">
+							<button @click="handleAccept">
+								{{ formatMessage(messages.installAnyway) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="brand">
+							<button @click="handleDecline">
+								<BanIcon />
+								{{ formatMessage(messages.dontInstall) }}
+							</button>
+						</ButtonStyled>
 					</template>
 					<template v-else>
-						<Button @click="handleDecline">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</Button>
-						<Button type="colored" color="brand" @click="handleAccept">
-							<DownloadIcon />
-							{{ formatMessage(messages.installButton) }}
-						</Button>
+						<ButtonStyled>
+							<button @click="handleDecline">
+								<XIcon />
+								{{ formatMessage(commonMessages.cancelButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="brand">
+							<button @click="handleAccept">
+								<DownloadIcon />
+								{{ formatMessage(messages.installButton) }}
+							</button>
+						</ButtonStyled>
 					</template>
 				</div>
 			</div>
@@ -150,10 +163,10 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, EyeIcon, ReportIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
 import {
 	Admonition,
 	Avatar,
+	ButtonStyled,
 	commonMessages,
 	type ContentItem,
 	defineMessages,
@@ -168,6 +181,7 @@ import {
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
 import { injectServerInstall } from '@/providers/server-install'
 
@@ -350,6 +364,7 @@ async function show(
 
 	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
 
+	hide_ads_window()
 	modal.value?.show(e)
 	await nextTick()
 	forceCheckTableScroll()
@@ -400,7 +415,8 @@ const messages = defineMessages({
 	},
 	reviewedFiles: {
 		id: 'app.modal.install-to-play.reviewed-files',
-		defaultMessage: "Files that aren't published to Modrinth aren't reviewed.",
+		defaultMessage:
+			'A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack).',
 	},
 	installAnyway: {
 		id: 'app.modal.install-to-play.install-anyway',

apps/app-frontend/src/components/ui/modal/InstanceSettingsModal.vue

@@ -22,19 +22,19 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
+import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
+import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
+import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
+import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
+import SharingSettings from '@/components/ui/instance_settings/SharingSettings.vue'
+import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
 import { get_linked_modpack_info } from '@/helpers/instance'
 import { get_loader_versions } from '@/helpers/metadata'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
-import type { GameInstance } from '@/helpers/types'
+import { provideInstanceSettings } from '@/providers/instance-settings'
 
-import GeneralSettings from './general-settings.vue'
-import HooksSettings from './hooks-settings.vue'
-import InstallationSettings from './installation-settings.vue'
-import { provideInstanceSettings } from './instance-settings-context.ts'
-import JavaSettings from './java-settings.vue'
-import SharingSettings from './sharing-settings.vue'
-import WindowSettings from './window-settings.vue'
+import type { GameInstance } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()

apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue

@@ -10,18 +10,24 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" @click="handleCancel">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button @click="handleGoToInstance">
-					{{ formatMessage(messages.instance) }}
-					<RightArrowIcon />
-				</Button>
-				<Button type="colored" color="orange" @click="handleCreateAnyway">
-					<PlusIcon />
-					{{ formatMessage(messages.create) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="handleGoToInstance">
+						{{ formatMessage(messages.instance) }}
+						<RightArrowIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button @click="handleCreateAnyway">
+						<PlusIcon />
+						{{ formatMessage(messages.create) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -30,7 +36,7 @@
 <script setup lang="ts">
 import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue

@@ -19,20 +19,18 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<Button class="w-full" native-type="button" @click="authenticate('sign-up')">
-						<UserPlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createAccountButton) }}
-					</Button>
-					<Button
-						type="colored"
-						color="brand"
-						class="w-full"
-						native-type="button"
-						@click="authenticate('sign-in')"
-					>
-						<LogInIcon aria-hidden="true" />
-						{{ formatMessage(messages.signInButton) }}
-					</Button>
+					<ButtonStyled>
+						<button class="w-full !shadow-none" type="button" @click="authenticate('sign-up')">
+							<UserPlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.createAccountButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button class="w-full" type="button" @click="authenticate('sign-in')">
+							<LogInIcon aria-hidden="true" />
+							{{ formatMessage(messages.signInButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -71,19 +69,23 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<Button type="outlined" class="w-full" native-type="button" @click="modal?.hide()">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</Button>
-					<Button
-						class="w-full"
-						native-type="button"
-						:disabled="reopeningBrowser"
-						@click="reopenBrowser"
-					>
-						<RefreshCwIcon aria-hidden="true" />
-						{{ formatMessage(messages.openBrowserAgainButton) }}
-					</Button>
+					<ButtonStyled type="outlined">
+						<button class="w-full" type="button" @click="modal?.hide()">
+							<XIcon aria-hidden="true" />
+							{{ formatMessage(messages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<button
+							class="w-full !shadow-none"
+							type="button"
+							:disabled="reopeningBrowser"
+							@click="reopenBrowser"
+						>
+							<RefreshCwIcon aria-hidden="true" />
+							{{ formatMessage(messages.openBrowserAgainButton) }}
+						</button>
+					</ButtonStyled>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -106,14 +108,7 @@
 
 <script setup lang="ts">
 import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import {
-	Button,
-	commonMessages,
-	defineMessages,
-	IntlFormatted,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
+import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { ref } from 'vue'
 
@@ -252,6 +247,10 @@ const messages = defineMessages({
 		id: 'modal.modrinth-account-required.waiting-for-browser',
 		defaultMessage: 'Waiting for browser confirmation...',
 	},
+	cancelButton: {
+		id: 'modal.modrinth-account-required.cancel-button',
+		defaultMessage: 'Cancel',
+	},
 	openBrowserAgainButton: {
 		id: 'modal.modrinth-account-required.open-browser-again-button',
 		defaultMessage: 'Open browser again',

apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Settings2Icon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPageContext,
@@ -78,10 +78,12 @@ watch(
 			{{ formatMessage(messages.adsConsentTitle) }}
 		</h2>
 		<div class="mt-2 flex flex-col gap-2.5 items-start">
-			<Button @click="manageAdsPreferences">
-				<Settings2Icon aria-hidden="true" />
-				{{ formatMessage(messages.adsConsentManage) }}
-			</Button>
+			<ButtonStyled>
+				<button class="!shadow-none" @click="manageAdsPreferences">
+					<Settings2Icon aria-hidden="true" />
+					{{ formatMessage(messages.adsConsentManage) }}
+				</button>
+			</ButtonStyled>
 			<div>
 				{{ formatMessage(messages.adsConsentIntro) }}
 			</div>

apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button, Toggle } from '@modrinth/ui'
+import { ButtonStyled, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -33,13 +33,14 @@ watch(
 				</h2>
 			</div>
 			<div class="flex items-center gap-2">
-				<Button
-					type="quiet"
-					:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
-					@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
-				>
-					Reset to default
-				</Button>
+				<ButtonStyled type="transparent">
+					<button
+						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
+						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
+					>
+						Reset to default
+					</button>
+				</ButtonStyled>
 				<Toggle
 					id="advanced-rendering"
 					:model-value="themeStore.getFeatureFlag(option)"

apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue

@@ -116,35 +116,6 @@ const messages = defineMessages({
 		id: 'app.settings.default-instance-options.post-exit-hook.description',
 		defaultMessage: 'Runs after the game closes.',
 	},
-	hookVariablesDescription: {
-		id: 'instance.settings.tabs.hooks.variables.description',
-		defaultMessage:
-			'Hooks run in the working directory of the instance, with the following variables:',
-	},
-	instanceNameDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-name.description',
-		defaultMessage: '$INST_NAME: The name of the instance',
-	},
-	instanceIdDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-id.description',
-		defaultMessage: "$INST_ID: The name of the instance's folder",
-	},
-	instanceDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-dir.description',
-		defaultMessage: "$INST_DIR: The absolute path to the instance's folder",
-	},
-	instanceMcDirDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-mc-dir.description',
-		defaultMessage: '$INST_MC_DIR: An alias for $INST_DIR',
-	},
-	instanceJavaDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java.description',
-		defaultMessage: '$INST_JAVA: The absolute path to the java binary',
-	},
-	instanceJavaArgsDescription: {
-		id: 'instance.settings.tabs.hooks.variables.inst-java-args.description',
-		defaultMessage: '$INST_JAVA_ARGS: The JVM Arguments provided to the game',
-	},
 })
 
 const fetchSettings = await get()
@@ -357,18 +328,6 @@ watch(
 					{{ formatMessage(messages.postExitHookDescription) }}
 				</p>
 			</div>
-
-			<div class="m-0 leading-tight">
-				{{ formatMessage(messages.hookVariablesDescription) }}
-				<ul>
-					<li>{{ formatMessage(messages.instanceNameDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceIdDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceMcDirDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaDescription) }}</li>
-					<li>{{ formatMessage(messages.instanceJavaArgsDescription) }}</li>
-				</ul>
-			</div>
 		</div>
 	</div>
 </template>

apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue

@@ -1,9 +1,8 @@
 <script setup>
 import { BoxIcon, FolderOpenIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	defineMessages,
-	IconButton,
 	injectNotificationManager,
 	Slider,
 	StyledInput,
@@ -184,14 +183,16 @@ async function findLauncherDir() {
 				wrapper-class="w-full"
 			>
 				<template #right>
-					<IconButton
-						v-tooltip="formatMessage(messages.browseAppDirectory)"
-						:label="formatMessage(messages.browseAppDirectory)"
-						class="ml-1.5"
-						@click="findLauncherDir"
-					>
-						<FolderSearchIcon aria-hidden="true" />
-					</IconButton>
+					<ButtonStyled circular>
+						<button
+							v-tooltip="formatMessage(messages.browseAppDirectory)"
+							:aria-label="formatMessage(messages.browseAppDirectory)"
+							class="ml-1.5"
+							@click="findLauncherDir"
+						>
+							<FolderSearchIcon aria-hidden="true" />
+						</button>
+					</ButtonStyled>
 				</template>
 			</StyledInput>
 			<p class="m-0 leading-tight text-secondary">
@@ -234,10 +235,10 @@ async function findLauncherDir() {
 			<h2 class="m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appCacheTitle) }}
 			</h2>
-			<Button id="purge-cache" class="w-fit" @click="handlePurgeCacheClick">
+			<button id="purge-cache" class="btn min-w-max" @click="handlePurgeCacheClick">
 				<TrashIcon aria-hidden="true" />
 				{{ formatMessage(messages.purgeCache) }}
-			</Button>
+			</button>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appCacheDescription) }}
 			</p>
@@ -279,10 +280,10 @@ async function findLauncherDir() {
 			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appDatabaseBackupsTitle) }}
 			</h2>
-			<Button id="open-db-backups-folder" class="w-fit" @click="openDbBackupsFolder">
+			<button id="open-db-backups-folder" class="btn min-w-max" @click="openDbBackupsFolder">
 				<FolderOpenIcon aria-hidden="true" />
 				{{ formatMessage(messages.openBackupsFolder) }}
-			</Button>
+			</button>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appDatabaseBackupsDescription) }}
 			</p>

apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue

@@ -10,14 +10,18 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<Button type="outlined" @click="modal?.hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button type="colored" color="red" @click="confirm">
-					<XIcon />
-					{{ formatMessage(messages.revokeButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="modal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<XIcon />
+						{{ formatMessage(messages.revokeButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -27,7 +31,7 @@
 import { XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue

@@ -10,18 +10,24 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<Button type="outlined" @click="handleCancel">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button @click="handleGoToInstance">
-					{{ formatMessage(messages.instance) }}
-					<RightArrowIcon />
-				</Button>
-				<Button type="colored" color="orange" @click="handleInstallAnyway">
-					<DownloadIcon />
-					{{ formatMessage(messages.installAnyway) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button @click="handleGoToInstance">
+						{{ formatMessage(messages.instance) }}
+						<RightArrowIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button @click="handleInstallAnyway">
+						<DownloadIcon />
+						{{ formatMessage(messages.installAnyway) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -30,7 +36,7 @@
 <script setup lang="ts">
 import { DownloadIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,

apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue

@@ -2,11 +2,13 @@
 	<div v-if="canUnpublish" class="flex flex-col gap-2.5">
 		<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
 		<div>
-			<Button type="colored" color="orange" :disabled="busy" @click="unpublishModal?.show()">
-				<SpinnerIcon v-if="unpublishing" class="animate-spin" />
-				<UnlinkIcon v-else class="size-5" />
-				{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
-			</Button>
+			<ButtonStyled color="orange">
+				<button :disabled="busy" @click="unpublishModal?.show()">
+					<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+					<UnlinkIcon v-else class="size-5" />
+					{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
 	</div>
@@ -15,11 +17,13 @@
 			formatMessage(messages.linkedTitle)
 		}}</span>
 		<div>
-			<Button type="colored" color="orange" :disabled="busy" @click="unlinkModal?.show()">
-				<SpinnerIcon v-if="unlinking" class="animate-spin" />
-				<UnlinkIcon v-else class="size-5" />
-				{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
-			</Button>
+			<ButtonStyled color="orange">
+				<button :disabled="busy" @click="unlinkModal?.show()">
+					<SpinnerIcon v-if="unlinking" class="animate-spin" />
+					<UnlinkIcon v-else class="size-5" />
+					{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
@@ -35,11 +39,15 @@
 		}}</Admonition>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<Button type="outlined" class="!border" @click="unpublishModal?.hide()">
-					<XIcon />{{ formatMessage(commonMessages.cancelButton) }} </Button
-				><Button type="colored" color="orange" :disabled="busy" @click="confirmUnpublish">
-					<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
-				</Button>
+				<ButtonStyled type="outlined"
+					><button class="!border" @click="unpublishModal?.hide()">
+						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+					</button></ButtonStyled
+				><ButtonStyled color="orange"
+					><button :disabled="busy" @click="confirmUnpublish">
+						<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
+					</button></ButtonStyled
+				>
 			</div></template
 		>
 	</NewModal>
@@ -62,16 +70,15 @@
 		</div>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<Button type="outlined" class="!border" @click="unlinkModal?.hide()">
-					<XIcon />{{ formatMessage(commonMessages.cancelButton) }} </Button
-				><Button
-					type="colored"
-					color="orange"
-					:disabled="busy || backupBusy"
-					@click="confirmUnlink"
+				<ButtonStyled type="outlined"
+					><button class="!border" @click="unlinkModal?.hide()">
+						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+					</button></ButtonStyled
+				><ButtonStyled color="orange"
+					><button :disabled="busy || backupBusy" @click="confirmUnlink">
+						<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
+					</button></ButtonStyled
 				>
-					<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
-				</Button>
 			</div></template
 		>
 	</NewModal>
@@ -81,7 +88,7 @@
 import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	InlineBackupCreator,

apps/app-frontend/src/components/ui/shared-instances/SharedInstancePublishModal.vue

@@ -28,8 +28,7 @@
 				<div class="flex min-w-0 flex-col gap-3 pt-4">
 					<div ref="configFileTreeContainer" class="max-h-[292px] overflow-y-auto rounded-[20px]">
 						<FileTreeSelect
-							v-model="includedConfigPaths"
-							v-model:excluded-paths="excludedConfigPaths"
+							v-model="selectedConfigPaths"
 							:items="configFileItems"
 							:show-size="false"
 							:show-modified="false"
@@ -80,20 +79,11 @@ const publishReviewModal = ref<InstanceType<typeof ContentDiffModal>>()
 const configFileTreeContainer = ref<HTMLElement>()
 const publishDiffs = ref<ContentDiffItem[]>([])
 const configFilePaths = ref<string[]>([])
-const includedConfigPaths = ref<string[]>([])
-const excludedConfigPaths = ref<string[]>([])
+const selectedConfigPaths = ref<string[]>([])
 const state = ref<SharedInstancePublishState>('idle')
 const configFileItems = computed<FileTreeSelectItem[]>(() =>
 	configFilePaths.value.map((path) => ({ path, type: 'file' })),
 )
-const selectedConfigPaths = computed(() => {
-	const includedPaths = new Set(includedConfigPaths.value)
-	const excludedPaths = new Set(excludedConfigPaths.value)
-
-	return configFilePaths.value.filter((path) =>
-		isConfigPathSelected(path, includedPaths, excludedPaths),
-	)
-})
 
 async function show(e?: MouseEvent) {
 	if (state.value !== 'idle') return
@@ -118,8 +108,7 @@ async function show(e?: MouseEvent) {
 			disabled: diff.disabled,
 		}))
 		configFilePaths.value = preview.configFiles
-		includedConfigPaths.value = []
-		excludedConfigPaths.value = []
+		selectedConfigPaths.value = []
 		if (!publishReviewModal.value) return
 
 		publishReviewModal.value.show(e)
@@ -145,23 +134,6 @@ async function publishChanges() {
 	}
 }
 
-function isConfigPathSelected(
-	path: string,
-	includedPaths: Set<string>,
-	excludedPaths: Set<string>,
-) {
-	let selected = false
-	let prefix = ''
-
-	for (const segment of path.split('/').filter(Boolean)) {
-		prefix = prefix ? `${prefix}/${segment}` : segment
-		if (includedPaths.has(prefix)) selected = true
-		if (excludedPaths.has(prefix)) selected = false
-	}
-
-	return selected
-}
-
 function scrollConfigFileTreeToTop() {
 	if (configFileTreeContainer.value) {
 		configFileTreeContainer.value.scrollTop = 0

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue

@@ -193,39 +193,53 @@
 				{{ formatMessage(messages.reviewedFiles) }}
 			</p>
 			<div v-if="!reportMode" class="flex w-full items-center justify-between gap-2">
-				<Button type="quiet" color="red" @click="reportMode = true">
-					<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
-				</Button>
+				<ButtonStyled color="red" type="transparent">
+					<button @click="reportMode = true">
+						<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
+					</button>
+				</ButtonStyled>
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<Button type="quiet" color="orange" @click="accept">
-							{{ formatMessage(messages.installAnyway) }}
-						</Button>
-						<Button type="colored" color="brand" @click="handleCancel">
-							<BanIcon />{{ formatMessage(messages.dontInstall) }}
-						</Button>
+						<ButtonStyled type="transparent" color="orange">
+							<button @click="accept">
+								{{ formatMessage(messages.installAnyway) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="brand">
+							<button @click="handleCancel">
+								<BanIcon />{{ formatMessage(messages.dontInstall) }}
+							</button>
+						</ButtonStyled>
 					</template>
 					<template v-else>
-						<Button type="outlined" class="!border" @click="handleCancel">
-							<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-						</Button>
-						<Button type="colored" color="brand" @click="accept">
-							<DownloadIcon />{{ formatMessage(messages.installButton) }}
-						</Button>
+						<ButtonStyled type="outlined">
+							<button class="!border" @click="handleCancel">
+								<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+							</button>
+						</ButtonStyled>
+						<ButtonStyled color="brand">
+							<button @click="accept">
+								<DownloadIcon />{{ formatMessage(messages.installButton) }}
+							</button>
+						</ButtonStyled>
 					</template>
 				</div>
 			</div>
 		</div>
 		<template v-if="reportMode" #actions>
 			<div class="flex justify-end gap-2">
-				<Button type="outlined" class="!border" :disabled="submitLoading" @click="handleCancel">
-					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button type="colored" color="brand" :disabled="!canSubmitReport" @click="submitReport">
-					<SpinnerIcon v-if="submitLoading" class="animate-spin" />
-					<SendIcon v-else />
-					{{ formatMessage(commonMessages.reportButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button class="!border" :disabled="submitLoading" @click="handleCancel">
+						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!canSubmitReport" @click="submitReport">
+						<SpinnerIcon v-if="submitLoading" class="animate-spin" />
+						<SendIcon v-else />
+						{{ formatMessage(commonMessages.reportButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -240,12 +254,12 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, ReportIcon, SendIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
 import {
 	Admonition,
 	AutoLink,
 	Avatar,
 	blockedUsersQueryKey,
+	ButtonStyled,
 	Checkbox,
 	Combobox,
 	type ComboboxOption,
@@ -268,6 +282,7 @@ import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, nextTick, ref } from 'vue'
 
 import { config } from '@/config'
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
 import { toError } from '@/helpers/errors'
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
 import { create_report } from '@/helpers/reports'
@@ -447,6 +462,7 @@ function handleCancel() {
 function handleHide() {
 	resetReportState()
 	creator.value = null
+	show_ads_window()
 }
 function resetReportState() {
 	reportMode.value = false
@@ -486,6 +502,7 @@ function showReport(
 }
 function showPreview(previewValue: SharedInstanceInstallPreview, event?: MouseEvent) {
 	preview.value = previewValue
+	hide_ads_window()
 	modal.value?.show(event)
 	void nextTick(() => forceCheckTableScroll())
 }
@@ -595,7 +612,8 @@ const messages = defineMessages({
 	},
 	reviewedFiles: {
 		id: 'app.modal.install-to-play.reviewed-files',
-		defaultMessage: "Files that aren't published to Modrinth aren't reviewed.",
+		defaultMessage:
+			'A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack).',
 	},
 	installAnyway: {
 		id: 'app.modal.install-to-play.install-anyway',

apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue

@@ -4,10 +4,12 @@
 			<span class="font-semibold text-contrast">{{
 				heading ?? formatMessage(messages.sharedInstance)
 			}}</span>
-			<Button type="quiet" @click="emit('viewContents')">
-				<EyeIcon />
-				{{ formatMessage(messages.viewContents) }}
-			</Button>
+			<ButtonStyled type="transparent">
+				<button @click="emit('viewContents')">
+					<EyeIcon />
+					{{ formatMessage(messages.viewContents) }}
+				</button>
+			</ButtonStyled>
 		</div>
 		<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
 			<Avatar
@@ -32,7 +34,7 @@
 
 <script setup lang="ts">
 import { EyeIcon } from '@modrinth/assets'
-import { Avatar, Button, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
+import { Avatar, ButtonStyled, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
 import { computed, toRefs } from 'vue'
 
 import type { SharedInstanceInstallPreview } from '@/helpers/install'

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -22,9 +22,11 @@
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
 				<section v-if="mode === 'edit' && canEditTextureAndModel">
 					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.textureSection) }}</h2>
-					<Button @click="openTextureFileBrowser">
-						<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
-					</Button>
+					<ButtonStyled>
+						<button class="!shadow-none" @click="openTextureFileBrowser">
+							<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
+						</button>
+					</ButtonStyled>
 					<input
 						ref="textureFileInput"
 						type="file"
@@ -110,21 +112,19 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" :disabled="isSaving" @click="hide">
-					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button
-					v-tooltip="saveTooltip"
-					type="colored"
-					color="brand"
-					:disabled="disableSave || isSaving"
-					@click="save"
-				>
-					<SpinnerIcon v-if="isSaving" class="animate-spin" />
-					<CheckIcon v-else-if="mode === 'new'" />
-					<SaveIcon v-else />
-					{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button :disabled="isSaving" @click="hide">
+						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
+						<SpinnerIcon v-if="isSaving" class="animate-spin" />
+						<CheckIcon v-else-if="mode === 'new'" />
+						<SaveIcon v-else />
+						{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>
@@ -133,7 +133,7 @@
 <script setup lang="ts">
 import { CheckIcon, SaveIcon, SpinnerIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,
 	commonMessages,

apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue

@@ -2,10 +2,9 @@
 import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	Accordion,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	IconButton,
 	SkinButton,
 	SkinLikeTextButton,
 	useScrollViewport,
@@ -464,26 +463,25 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<Button
-										type="colored"
-										color="brand"
-										:aria-label="formatMessage(messages.editSkinButton)"
-										class="pointer-events-auto"
-										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-									>
-										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-									</Button>
-									<IconButton
-										v-show="!skin.is_equipped"
-										v-tooltip="formatMessage(messages.deleteSkinButton)"
-										type="colored"
-										color="red"
-										:label="formatMessage(messages.deleteSkinButton)"
-										class="!rounded-[100%] pointer-events-auto"
-										@click.stop="emit('delete', skin)"
-									>
-										<TrashIcon />
-									</IconButton>
+									<ButtonStyled color="brand">
+										<button
+											:aria-label="formatMessage(messages.editSkinButton)"
+											class="pointer-events-auto"
+											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+										>
+											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+										</button>
+									</ButtonStyled>
+									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+										<button
+											v-tooltip="formatMessage(messages.deleteSkinButton)"
+											:aria-label="formatMessage(messages.deleteSkinButton)"
+											class="!rounded-[100%] pointer-events-auto"
+											@click.stop="emit('delete', skin)"
+										>
+											<TrashIcon />
+										</button>
+									</ButtonStyled>
 								</template>
 							</SkinButton>
 						</div>
@@ -505,26 +503,25 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<Button
-										type="colored"
-										color="brand"
-										:aria-label="formatMessage(messages.editSkinButton)"
-										class="pointer-events-auto"
-										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-									>
-										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-									</Button>
-									<IconButton
-										v-show="!skin.is_equipped"
-										v-tooltip="formatMessage(messages.deleteSkinButton)"
-										type="colored"
-										color="red"
-										:label="formatMessage(messages.deleteSkinButton)"
-										class="!rounded-[100%] pointer-events-auto"
-										@click.stop="emit('delete', skin)"
-									>
-										<TrashIcon />
-									</IconButton>
+									<ButtonStyled color="brand">
+										<button
+											:aria-label="formatMessage(messages.editSkinButton)"
+											class="pointer-events-auto"
+											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+										>
+											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+										</button>
+									</ButtonStyled>
+									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+										<button
+											v-tooltip="formatMessage(messages.deleteSkinButton)"
+											:aria-label="formatMessage(messages.deleteSkinButton)"
+											class="!rounded-[100%] pointer-events-auto"
+											@click.stop="emit('delete', skin)"
+										>
+											<TrashIcon />
+										</button>
+									</ButtonStyled>
 								</template>
 							</SkinButton>
 						</div>
@@ -548,15 +545,15 @@ defineExpose({ getAddSkinButtonElement })
 						@select="emit('select', skin)"
 					>
 						<template #overlay-buttons>
-							<Button
-								type="colored"
-								color="brand"
-								:aria-label="formatMessage(messages.editSkinButton)"
-								class="pointer-events-auto"
-								@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-							>
-								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-							</Button>
+							<ButtonStyled color="brand">
+								<button
+									:aria-label="formatMessage(messages.editSkinButton)"
+									class="pointer-events-auto"
+									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+								>
+									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+								</button>
+							</ButtonStyled>
 						</template>
 					</SkinButton>
 				</div>

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -9,11 +9,11 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	injectNotificationManager,
+	OverflowMenu,
 	SmartClickable,
-	TeleportOverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
@@ -185,53 +185,54 @@ onUnmounted(() => {
 				</div>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
-					<StopCircleIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.stopButton) }}
-				</Button>
-				<Button
-					v-else
-					v-tooltip="
-						instance.quarantined
-							? 'This instance has been locked'
-							: playing
-								? 'Instance is already open'
-								: null
-					"
-					:disabled="instance.quarantined || playing || loading"
-					@click="play"
-				>
-					<SpinnerIcon v-if="loading" class="animate-spin" />
-					<PlayIcon v-else aria-hidden="true" />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<TeleportOverflowMenu
-					type="quiet"
-					label="More options"
-					:options="[
-						{
-							id: 'open-instance',
-							label: 'View instance',
-							shown: !!instance.id,
-							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
-						},
-						{
-							id: 'open-folder',
-							label: formatMessage(commonMessages.openFolderButton),
-							action: () => showInstanceInFolder(instance.id),
-						},
-					]"
-				>
-					<MoreVerticalIcon aria-hidden="true" />
-					<template #open-instance>
-						<EyeIcon aria-hidden="true" />
-						View instance
-					</template>
-					<template #open-folder>
-						<FolderOpenIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.openFolderButton) }}
-					</template>
-				</TeleportOverflowMenu>
+				<ButtonStyled v-if="playing && !loading" color="red">
+					<button @click="stop">
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button
+						v-tooltip="
+							instance.quarantined
+								? 'This instance has been locked'
+								: playing
+									? 'Instance is already open'
+									: null
+						"
+						:disabled="instance.quarantined || playing || loading"
+						@click="play"
+					>
+						<SpinnerIcon v-if="loading" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu
+						:options="[
+							{
+								id: 'open-instance',
+								shown: !!instance.id,
+								action: () => router.push(encodeURI(`/instance/${instance.id}`)),
+							},
+							{
+								id: 'open-folder',
+								action: () => showInstanceInFolder(instance.id),
+							},
+						]"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<template #open-instance>
+							<EyeIcon aria-hidden="true" />
+							View instance
+						</template>
+						<template #open-folder>
+							<FolderOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.openFolderButton) }}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
 			</div>
 		</div>
 	</SmartClickable>

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -21,13 +21,13 @@ import {
 import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	OverflowMenu,
 	SmartClickable,
 	TagItem,
-	TeleportOverflowMenu,
 	useFormatDateTime,
 	useFormatNumber,
 	useRelativeTime,
@@ -412,184 +412,177 @@ const messages = defineMessages({
 				</template>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<Button
+				<ButtonStyled
 					v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
-					type="colored"
 					color="red"
-					@click="emit('stop')"
 				>
-					<StopCircleIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.stopButton) }}
-				</Button>
-				<Button
-					v-else
-					v-tooltip="
-						quarantined
-							? 'This instance has been locked'
-							: world.type === 'server'
-								? !supportsServerQuickPlay
-									? formatMessage(messages.noServerQuickPlay)
-									: playingOtherWorld
-										? formatMessage(messages.gameAlreadyOpen)
-										: !serverStatus
-											? formatMessage(messages.noContact)
-											: serverIncompatible
-												? formatMessage(messages.incompatibleServer)
-												: null
-								: !supportsWorldQuickPlay
-									? formatMessage(messages.noSingleplayerQuickPlay)
-									: playingOtherWorld || locked
-										? formatMessage(messages.gameAlreadyOpen)
-										: null
-					"
-					:disabled="
-						quarantined ||
-						playingOtherWorld ||
-						startingInstance ||
-						(world.type == 'server' && !supportsServerQuickPlay) ||
-						(world.type == 'singleplayer' && !supportsWorldQuickPlay)
-					"
-					@click="emit('play')"
-				>
-					<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-					<PlayIcon v-else aria-hidden="true" />
-					{{ formatMessage(commonMessages.playButton) }}
-				</Button>
-				<TeleportOverflowMenu
-					type="quiet"
-					label="More options"
-					:options="[
-						{
-							id: 'play-instance',
-							label: formatMessage(messages.playInstance),
-							shown: !!instanceId,
-							disabled: playingInstance || quarantined,
-							action: () => emit('play-instance'),
-						},
-						{
-							id: 'open-instance',
-							label: formatMessage(messages.viewInstance),
-							shown: !!instanceId,
-							action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
-						},
-						{
-							id: 'refresh',
-							label: formatMessage(commonMessages.refreshButton),
-							shown: world.type === 'server',
-							action: () => emit('refresh'),
-						},
-						{
-							id: 'copy-address',
-							label: formatMessage(messages.copyAddress),
-							shown: world.type === 'server',
-							action: () => copyToClipboard((world as ServerWorld).address),
-						},
-						{
-							id: 'edit',
-							label: formatMessage(commonMessages.editButton),
-							action: () => emit('edit'),
-							shown: !instanceId,
-							disabled: locked || managed,
-							tooltip: locked
-								? formatMessage(messages.worldInUse)
-								: managed
-									? formatMessage(messages.linkedServer)
-									: undefined,
-						},
-						{
-							id: 'open-folder',
-							label: formatMessage(commonMessages.openFolderButton),
-							shown: world.type === 'singleplayer',
-							action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
-						},
-						{
-							type: 'divider',
-							shown: !!instanceId,
-						},
-						{
-							id: 'dont-show-on-home',
-							label: formatMessage(messages.dontShowOnHome),
-							shown: !!instanceId,
-							action: () => {
-								set_world_display_status(
-									instanceId,
-									world.type,
-									getWorldIdentifier(world),
-									'hidden',
-								).then(() => {
-									emit('update')
-								})
+					<button @click="emit('stop')">
+						<StopCircleIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.stopButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else>
+					<button
+						v-tooltip="
+							quarantined
+								? 'This instance has been locked'
+								: world.type === 'server'
+									? !supportsServerQuickPlay
+										? formatMessage(messages.noServerQuickPlay)
+										: playingOtherWorld
+											? formatMessage(messages.gameAlreadyOpen)
+											: !serverStatus
+												? formatMessage(messages.noContact)
+												: serverIncompatible
+													? formatMessage(messages.incompatibleServer)
+													: null
+									: !supportsWorldQuickPlay
+										? formatMessage(messages.noSingleplayerQuickPlay)
+										: playingOtherWorld || locked
+											? formatMessage(messages.gameAlreadyOpen)
+											: null
+						"
+						:disabled="
+							quarantined ||
+							playingOtherWorld ||
+							startingInstance ||
+							(world.type == 'server' && !supportsServerQuickPlay) ||
+							(world.type == 'singleplayer' && !supportsWorldQuickPlay)
+						"
+						@click="emit('play')"
+					>
+						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+						<PlayIcon v-else aria-hidden="true" />
+						{{ formatMessage(commonMessages.playButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular type="transparent">
+					<OverflowMenu
+						:options="[
+							{
+								id: 'play-instance',
+								shown: !!instanceId,
+								disabled: playingInstance || quarantined,
+								action: () => emit('play-instance'),
 							},
-						},
-						{
-							id: 'create-shortcut',
-							label: formatMessage(messages.createShortcut),
-							shown: !!shortcutInstanceId && !quarantined,
-							action: () => createShortcut(),
-						},
-						{
-							type: 'divider',
-							shown: !instanceId,
-						},
-						{
-							id: 'delete',
-							label: formatMessage(
-								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
-							),
-							tone: 'red',
-							action: () => emit('delete'),
-							shown: !instanceId,
-							disabled: locked || managed,
-							tooltip: locked
-								? formatMessage(messages.worldInUse)
-								: managed
-									? formatMessage(messages.linkedServer)
-									: undefined,
-						},
-					]"
-				>
-					<MoreVerticalIcon aria-hidden="true" />
-					<template #play-instance>
-						<PlayIcon aria-hidden="true" />
-						{{ formatMessage(messages.playInstance) }}
-					</template>
-					<template #open-instance>
-						<EyeIcon aria-hidden="true" />
-						{{ formatMessage(messages.viewInstance) }}
-					</template>
-					<template #edit>
-						<EditIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.editButton) }}
-					</template>
-					<template #open-folder>
-						<FolderOpenIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.openFolderButton) }}
-					</template>
-					<template #copy-address>
-						<ClipboardCopyIcon aria-hidden="true" />
-						{{ formatMessage(messages.copyAddress) }}
-					</template>
-					<template #refresh>
-						<UpdatedIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.refreshButton) }}
-					</template>
-					<template #create-shortcut>
-						<ExternalIcon aria-hidden="true" />
-						{{ formatMessage(messages.createShortcut) }}
-					</template>
-					<template #dont-show-on-home>
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.dontShowOnHome) }}
-					</template>
-					<template #delete>
-						<TrashIcon aria-hidden="true" />
-						{{
-							formatMessage(
-								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
-							)
-						}}
-					</template>
-				</TeleportOverflowMenu>
+							{
+								id: 'open-instance',
+								shown: !!instanceId,
+								action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+							},
+							{
+								id: 'refresh',
+								shown: world.type === 'server',
+								action: () => emit('refresh'),
+							},
+							{
+								id: 'copy-address',
+								shown: world.type === 'server',
+								action: () => copyToClipboard((world as ServerWorld).address),
+							},
+							{
+								id: 'edit',
+								action: () => emit('edit'),
+								shown: !instanceId,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
+							},
+							{
+								id: 'open-folder',
+								shown: world.type === 'singleplayer',
+								action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
+							},
+							{
+								divider: true,
+								shown: !!instanceId,
+							},
+							{
+								id: 'dont-show-on-home',
+								shown: !!instanceId,
+								action: () => {
+									set_world_display_status(
+										instanceId,
+										world.type,
+										getWorldIdentifier(world),
+										'hidden',
+									).then(() => {
+										emit('update')
+									})
+								},
+							},
+							{
+								id: 'create-shortcut',
+								shown: !!shortcutInstanceId && !quarantined,
+								action: () => createShortcut(),
+							},
+							{
+								divider: true,
+								shown: !instanceId,
+							},
+							{
+								id: 'delete',
+								color: 'red',
+								hoverFilled: true,
+								action: () => emit('delete'),
+								shown: !instanceId,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
+							},
+						]"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<template #play-instance>
+							<PlayIcon aria-hidden="true" />
+							{{ formatMessage(messages.playInstance) }}
+						</template>
+						<template #open-instance>
+							<EyeIcon aria-hidden="true" />
+							{{ formatMessage(messages.viewInstance) }}
+						</template>
+						<template #edit>
+							<EditIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.editButton) }}
+						</template>
+						<template #open-folder>
+							<FolderOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.openFolderButton) }}
+						</template>
+						<template #copy-address>
+							<ClipboardCopyIcon aria-hidden="true" />
+							{{ formatMessage(messages.copyAddress) }}
+						</template>
+						<template #refresh>
+							<UpdatedIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.refreshButton) }}
+						</template>
+						<template #create-shortcut>
+							<ExternalIcon aria-hidden="true" />
+							{{ formatMessage(messages.createShortcut) }}
+						</template>
+						<template #dont-show-on-home>
+							<XIcon aria-hidden="true" />
+							{{ formatMessage(messages.dontShowOnHome) }}
+						</template>
+						<template #delete>
+							<TrashIcon aria-hidden="true" />
+							{{
+								formatMessage(
+									world.type === 'server'
+										? commonMessages.removeButton
+										: commonMessages.deleteLabel,
+								)
+							}}
+						</template>
+					</OverflowMenu>
+				</ButtonStyled>
 			</div>
 		</div>
 	</SmartClickable>

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -96,18 +96,24 @@ defineExpose({ show, hide })
 		/>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button :disabled="!address" @click="addServer(false)">
-					<PlusIcon />
-					{{ formatMessage(messages.addServer) }}
-				</Button>
-				<Button type="colored" color="brand" :disabled="!address" @click="addServer(true)">
-					<PlayIcon />
-					{{ formatMessage(messages.addAndPlay) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button :disabled="!address" @click="addServer(false)">
+						<PlusIcon />
+						{{ formatMessage(messages.addServer) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!address" @click="addServer(true)">
+						<PlayIcon />
+						{{ formatMessage(messages.addAndPlay) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue

@@ -2,7 +2,7 @@
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	NewModal,
@@ -106,19 +106,18 @@ defineExpose({ show, hide })
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" @click="hide">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button
-					type="colored"
-					color="red"
-					:disabled="!isServer && !isSingleplayer"
-					@click="confirm"
-				>
-					<TrashIcon />
-					{{ formatMessage(actionMessage) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button :disabled="!isServer && !isSingleplayer" @click="confirm">
+						<TrashIcon />
+						{{ formatMessage(actionMessage) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
@@ -105,14 +105,18 @@ const titleMessage = defineMessage({
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<Button type="outlined" @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button type="colored" color="brand" :disabled="!address" @click="saveServer">
-					<SaveIcon />
-					{{ formatMessage(commonMessages.saveChangesButton) }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!address" @click="saveServer">
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -2,7 +2,7 @@
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	Button,
+	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -113,18 +113,24 @@ const messages = defineMessages({
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>
 		<div class="flex gap-2 mt-4">
-			<Button type="colored" color="brand" @click="saveWorld">
-				<SaveIcon />
-				{{ formatMessage(commonMessages.saveChangesButton) }}
-			</Button>
-			<Button :disabled="removeIcon || !icon" @click="removeIcon = true">
-				<UndoIcon />
-				{{ formatMessage(messages.resetIcon) }}
-			</Button>
-			<Button @click="hide()">
-				<XIcon />
-				{{ formatMessage(commonMessages.cancelButton) }}
-			</Button>
+			<ButtonStyled color="brand">
+				<button @click="saveWorld">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="removeIcon || !icon" @click="removeIcon = true">
+					<UndoIcon />
+					{{ formatMessage(messages.resetIcon) }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</button>
+			</ButtonStyled>
 		</div>
 	</ModalWrapper>
 </template>

apps/app-frontend/src/composables/browse/install-job-notifications.ts

@@ -404,6 +404,8 @@ export async function useInstallJobNotifications(opts: {
 	}
 
 	function getProgress(job: InstallJobSnapshot): number {
+		if (job.status === 'succeeded') return 1
+		if (job.status === 'failed' || job.status === 'interrupted') return 0
 		const progress = getEffectiveProgress(job)
 		if (!progress || progress.total <= 0) return 0
 		return Math.max(0, Math.min(1, progress.current / progress.total))
@@ -524,12 +526,8 @@ export async function useInstallJobNotifications(opts: {
 		)
 	}
 
-	const activeJobs = computed(() =>
-		jobs.value.filter((job) => job.status === 'queued' || job.status === 'running'),
-	)
-
 	const progressItems = computed<PopupNotificationProgressItem[]>(() =>
-		activeJobs.value.map((job) => {
+		jobs.value.map((job) => {
 			const progress = getEffectiveProgress(job)
 
 			return {
@@ -538,26 +536,20 @@ export async function useInstallJobNotifications(opts: {
 				text: getText(job),
 				iconUrl: iconUrls.value[job.job_id] ?? null,
 				progress: getProgress(job),
-				waiting: !job.progress && job.status === 'running',
-				showProgress: job.status === 'running',
-				progressType: getProgressType(job),
-				progressCurrent: progress?.current,
-				progressTotal: progress?.total,
+				waiting: !job.progress && ['queued', 'running'].includes(job.status),
+				showProgress: !isTerminalJob(job),
+				wrapText: isTerminalJob(job),
+				progressType: isTerminalJob(job) ? undefined : getProgressType(job),
+				progressCurrent: isTerminalJob(job) ? undefined : progress?.current,
+				progressTotal: isTerminalJob(job) ? undefined : progress?.total,
 				buttons: getButtons(job),
+				dismissible: isTerminalJob(job),
+				onDismiss: getDismissHandler(job),
 			}
 		}),
 	)
 
-	const terminalNotifications = computed(() =>
-		jobs.value.filter(isTerminalJob).map((job) => ({
-			id: job.job_id,
-			title: getTitle(job),
-			text: getText(job),
-			type: job.status === 'failed' ? ('error' as const) : ('warning' as const),
-			buttons: getButtons(job),
-			onDismiss: getDismissHandler(job),
-		})),
-	)
+	const buttons = computed<PopupNotificationButton[] | undefined>(() => undefined)
 
 	async function refreshMetadata(notify = true) {
 		const request = ++metadataRequest
@@ -639,10 +631,10 @@ export async function useInstallJobNotifications(opts: {
 	await refresh(false)
 
 	return {
-		active: computed(() => activeJobs.value.length > 0),
+		active: computed(() => jobs.value.length > 0),
 		title: computed(() => formatMessage(messages.installs)),
 		progressItems,
-		terminalNotifications,
+		buttons,
 		refresh,
 		dispose: () => {
 			for (const timeout of copiedResetTimeouts.values()) {

apps/app-frontend/src/composables/browse/use-app-server-browse.ts

@@ -17,7 +17,6 @@ import { kill, list as listInstances } from '@/helpers/instance'
 import { get_by_instance_id } from '@/helpers/process'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_instance, getServerAddress } from '@/helpers/worlds'
-import { instanceKeys } from '@/pages/instance/query-options'
 
 interface BrowseServerInstance {
 	id: string
@@ -39,7 +38,7 @@ interface ContextMenuOptionClick {
 }
 
 export interface UseAppServerBrowseOptions {
-	instance: Readonly<Ref<BrowseServerInstance | null>>
+	instance: Ref<BrowseServerInstance | null>
 	isFromWorlds: ComputedRef<boolean>
 	allInstalledIds: ComputedRef<Set<string>>
 	newlyInstalled: Ref<string[]>
@@ -132,7 +131,7 @@ export function useAppServerBrowse(options: UseAppServerBrowseOptions) {
 					project.minecraft_java_server?.content?.kind,
 				)
 				options.newlyInstalled.value.push(project.project_id)
-				await queryClient.invalidateQueries({ queryKey: instanceKeys.worlds(instanceId) })
+				await queryClient.invalidateQueries({ queryKey: ['worlds', instanceId] })
 			} catch (error) {
 				options.handleError(error)
 			}

apps/app-frontend/src/helpers/ads.js

@@ -8,27 +8,8 @@ export async function init_ads_window(overrideShown = false) {
 	})
 }
 
-let adsWindowHoldUpdate = Promise.resolve()
-
-async function update_ads_window_hold(acquire) {
-	adsWindowHoldUpdate = adsWindowHoldUpdate
-		.catch(() => {})
-		.then(() =>
-			invoke('plugin:ads|update_ads_window_hold', {
-				acquire,
-				dpr: window.devicePixelRatio,
-			}),
-		)
-
-	return await adsWindowHoldUpdate
-}
-
-export async function take_ads_window_hold() {
-	return await update_ads_window_hold(true)
-}
-
-export async function release_ads_window_hold() {
-	return await update_ads_window_hold(false)
+export async function show_ads_window() {
+	return await invoke('plugin:ads|show_ads_window', { dpr: window.devicePixelRatio })
 }
 
 export async function hide_ads_window(reset) {

apps/app-frontend/src/helpers/instance-content.ts

@@ -51,8 +51,7 @@ export async function loadInstanceContentData(
 }
 
 function handleLoadError(error: unknown, onError?: (error: Error) => unknown) {
-	if (!onError) throw error
-	onError(error as Error)
+	onError?.(error as Error)
 	return null
 }
 

apps/app-frontend/src/helpers/instance.ts

@@ -77,10 +77,6 @@ export async function get_content_items(
 	return await invoke('plugin:instance|instance_get_content_items', { instanceId, cacheBehaviour })
 }
 
-export async function refresh_content_updates(instanceId: string): Promise<void> {
-	return await invoke('plugin:instance|instance_refresh_content_updates', { instanceId })
-}
-
 // Linked modpack info returned from backend
 export interface LinkedModpackInfo {
 	project: Labrinth.Projects.v2.Project
@@ -286,13 +282,12 @@ export async function update_repair_modrinth(instanceId: string): Promise<Instal
 }
 
 // Export an instance to .mrpack
-// included_overrides and excluded_overrides are inherited path rules for files in the export.
+// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
 // Version id is optional (ie: 1.1.5)
 export async function export_instance_mrpack(
 	instanceId: string,
 	exportLocation: string,
 	includedOverrides: string[],
-	excludedOverrides: string[],
 	versionId?: string,
 	description?: string,
 	name?: string,
@@ -301,33 +296,22 @@ export async function export_instance_mrpack(
 		instanceId,
 		exportLocation,
 		includedOverrides,
-		excludedOverrides,
 		versionId,
 		description,
 		name,
 	})
 }
 
-export type PackExportCandidate = {
-	path: string
-	type: 'directory' | 'file'
-	size?: number
-	modified?: number
-	count?: number
-	disabled: boolean
-	defaultSelected: boolean
-}
-
-// Given a folder path, populate an array of exportable direct children.
-// Allows selection for 'included_overrides' in export_instance_mrpack.
-export async function get_pack_export_candidates(
-	instanceId: string,
-	parent?: string,
-): Promise<PackExportCandidate[]> {
-	return await invoke('plugin:instance|instance_get_pack_export_candidates', {
-		instanceId,
-		parent: parent ?? null,
-	})
+// Given a folder path, populate an array of all the subfolders
+// Intended to be used for finding potential override folders
+// profile
+// -- mods
+// -- resourcepacks
+// -- file1
+// => [mods, resourcepacks]
+// allows selection for 'included_overrides' in export_instance_mrpack
+export async function get_pack_export_candidates(instanceId: string): Promise<string[]> {
+	return await invoke('plugin:instance|instance_get_pack_export_candidates', { instanceId })
 }
 
 // Run Minecraft using an instance

apps/app-frontend/src/helpers/worlds.ts

@@ -435,12 +435,11 @@ export async function refreshServerData(
 	}
 }
 
-export async function refreshServers(
+export function refreshServers(
 	worlds: World[],
 	serverData: Record<string, ServerData>,
 	protocolVersion: ProtocolVersion | null,
-	ping = true,
-): Promise<void> {
+) {
 	const servers = worlds.filter(isServerWorld)
 	servers.forEach((server) => {
 		if (!serverData[server.address]) {
@@ -452,14 +451,9 @@ export async function refreshServers(
 		}
 	})
 
-	if (!ping) {
-		return
-	}
-
-	await Promise.all(
-		Object.keys(serverData).map((address) =>
-			refreshServerData(serverData[address], protocolVersion, address),
-		),
+	// noinspection ES6MissingAwait - handled by refreshServerData
+	Object.keys(serverData).forEach((address) =>
+		refreshServerData(serverData[address], protocolVersion, address),
 	)
 }
 

apps/app-frontend/src/locales/ar-SA/index.json

@@ -134,12 +134,21 @@
   "app.ads-consent.reject": {
     "message": "رفض الكل"
   },
+  "app.appearance-settings.advanced-rendering.description": {
+    "message": "يتيح العرض المتقدم لتأثيرات مثل التشويش الذي قد تسبب مشكلات في الأداء دون استخدام العرض المسرع بالأجهزة."
+  },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "العرض المتقدم"
   },
+  "app.appearance-settings.color-theme.description": {
+    "message": "اختر لون سمتك المفضل من أجل تطبيق Modrinth App."
+  },
   "app.appearance-settings.color-theme.title": {
     "message": "لون السمة"
   },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "غير الصفحة التي يفتح عليها المشغل."
+  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "صفحة الرئيسية"
   },
@@ -149,23 +158,50 @@
   "app.appearance-settings.default-landing-page.title": {
     "message": "الصفحة الرئيسة الافتراضية"
   },
+  "app.appearance-settings.hide-nametag.description": {
+    "message": "ألغ تفعيل عرض الاسم فوق لاعبك في صفحة المظاهر."
+  },
   "app.appearance-settings.hide-nametag.title": {
     "message": "إخفاء عرض الاسم"
   },
+  "app.appearance-settings.jump-back-into-worlds.description": {
+    "message": "يتضمن العوالم الحديثة في قسم \"العودة إلى اللعب\" على الصفحة الرئيسية."
+  },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "العودة إلى العوالم"
   },
+  "app.appearance-settings.minimize-launcher.description": {
+    "message": "قم بتصغير نافذة المشغل عند بدء تشغيل عملية Minecraft."
+  },
+  "app.appearance-settings.minimize-launcher.title": {
+    "message": "تصغير نافذة المشغل"
+  },
+  "app.appearance-settings.native-decorations.description": {
+    "message": "استخدام إطار نافذة النظام (يتطلب إعادة تشغيل التطبيق)."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "message": "الزخارف التقليدية"
+  },
+  "app.appearance-settings.show-play-time.description": {
+    "message": "يعرض مقدار الوقت الذي قضيته في لعب إحدى المهام."
+  },
   "app.appearance-settings.show-play-time.title": {
     "message": "إظهار مدة التشغيل"
   },
+  "app.appearance-settings.skip-non-essential-warnings.description": {
+    "message": "يتخطى تلقائيًا عمليات التأكيد ذات المخاطر المنخفضة، مثل تثبيت حزم التعديلات المكررة، وحذف المحتوى العادي، والتحديثات الجماعية، وإلغاء ربط حزم التعديلات، ومطالبات الإصلاح. وسيستمر عرض التحذيرات الخطيرة."
+  },
   "app.appearance-settings.skip-non-essential-warnings.title": {
     "message": "تخطي التحذيرات غير الضرورية"
   },
   "app.appearance-settings.toggle-sidebar.description": {
-    "message": "قم بإخفاء الشريط الجانبي الأيمن افتراضيًا وأضف زرًا لإظهاره أو إخفائه."
+    "message": "يتيح إمكانية إظهار الشريط الجانبي أو إخفائه."
   },
   "app.appearance-settings.toggle-sidebar.title": {
-    "message": "قم بإخفاء الشريط الجانبي الأيمن"
+    "message": "تبديل الشريط الجانبي"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "message": "إذا حاولت تثبيت ملف Modrinth Pack (.mrpack) غير مستضاف على Modrinth، فسنتأكد من أنك على دراية بالمخاطر قبل تثبيته."
   },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "أخبرني قبل تثبيت حزم التعديلات غير المعروفة"
@@ -452,6 +488,9 @@
   "app.settings.tabs.appearance": {
     "message": "المظهر"
   },
+  "app.settings.tabs.default-instance-options": {
+    "message": "خيارات النسخة الافتراضية"
+  },
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },

apps/app-frontend/src/locales/cs-CZ/index.json

@@ -14,9 +14,6 @@
   "app.action-bar.install.copied-details": {
     "message": "Zkopírováno"
   },
-  "app.action-bar.install.copy-details": {
-    "message": "Kopírovat detaily"
-  },
   "app.action-bar.install.dismiss": {
     "message": "Zavřít"
   },
@@ -29,9 +26,6 @@
   "app.action-bar.install.summary.canceled": {
     "message": "Zrušeno"
   },
-  "app.action-bar.install.summary.cleanup-incomplete": {
-    "message": "Čištění nebylo dokončeno"
-  },
   "app.action-bar.install.unknown-instance": {
     "message": "Neznámá instance"
   },
@@ -71,15 +65,21 @@
   "app.action-bar.view-logs": {
     "message": "Zobrazit logy"
   },
-  "app.ads-consent.title": {
-    "message": "Vaše soukromí a způsob, jakým reklamy podporují Modrinth"
+  "app.appearance-settings.advanced-rendering.description": {
+    "message": "Povolí pokročilé vykreslování, například efekty rozmazání, které mohou bez hardwarového zrychlení způsobovat problémy s výkonem."
   },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "Pokročilé vykreslování"
   },
+  "app.appearance-settings.color-theme.description": {
+    "message": "Vyberte si váš preferovaný motiv pro aplikaci Modrinth."
+  },
   "app.appearance-settings.color-theme.title": {
     "message": "Barevný motiv"
   },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "Změňte stránku, která se otevře po spuštění launcheru."
+  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Domů"
   },
@@ -89,18 +89,51 @@
   "app.appearance-settings.default-landing-page.title": {
     "message": "Výchozí stránka po spuštění"
   },
+  "app.appearance-settings.hide-nametag.description": {
+    "message": "Zakáže zobrazení jmenovky nad vaší postavou na stránce skinů."
+  },
   "app.appearance-settings.hide-nametag.title": {
     "message": "Skrýt jmenovku"
   },
+  "app.appearance-settings.jump-back-into-worlds.description": {
+    "message": "Zahrne nedávné světy do sekce „Vrátit se do hry“ na domovské stránce."
+  },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "Rychlý návrat do světů"
   },
+  "app.appearance-settings.minimize-launcher.description": {
+    "message": "Minimalizovat launcher při spuštění Minecraftu."
+  },
+  "app.appearance-settings.minimize-launcher.title": {
+    "message": "Minimalizovat launcher"
+  },
+  "app.appearance-settings.native-decorations.description": {
+    "message": "Použít systémový rámeček okna (vyžaduje restart aplikace)."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "message": "Systémové dekorace"
+  },
+  "app.appearance-settings.show-play-time.description": {
+    "message": "Zobrazuje, kolik času jsi strávil hraním instance."
+  },
   "app.appearance-settings.show-play-time.title": {
     "message": "Zobrazit odehraný čas"
   },
+  "app.appearance-settings.skip-non-essential-warnings.description": {
+    "message": "Automaticky přeskočí nízko riziková potrvzení jako duplicitní instalace modpacků, běžné mazání obsahu, hromadné aktualizace, odpojování modpacků a výzvy k opravě. Nebezpečná upozornění se budou nadále zobrazovat."
+  },
   "app.appearance-settings.skip-non-essential-warnings.title": {
     "message": "Přeskočit nedůležitá upozornění"
   },
+  "app.appearance-settings.toggle-sidebar.description": {
+    "message": "Umožňí přepínat zobrazení postranního panelu."
+  },
+  "app.appearance-settings.toggle-sidebar.title": {
+    "message": "Přepnout postranní panel"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "message": "Pokud se pokusíte nainstalovat soubor Modrinth Pack (.mrpack), který není hostován na Modrinth, zajistíme, abyste si před instalací uvědomili související rizika."
+  },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "Upozorni mě před instalací neznámých modpacků"
   },
@@ -221,9 +254,6 @@
   "app.install.phase.running_loader_processors": {
     "message": "Spuštění loader procesů"
   },
-  "app.instance.admonitions.shared-instance.removed-label": {
-    "message": "Odstraněno"
-  },
   "app.instance.confirm-delete.admonition-body": {
     "message": "Všechna data tvé instance budou trvale smazána, včetně světů, konfigurací a veškerého nainstalovaného obsahu."
   },
@@ -371,6 +401,9 @@
   "app.settings.tabs.appearance": {
     "message": "Vzhled"
   },
+  "app.settings.tabs.default-instance-options": {
+    "message": "Výchozí možnosti instance"
+  },
   "app.settings.tabs.java-installations": {
     "message": "Instalace Javy"
   },

apps/app-frontend/src/locales/da-DK/index.json

@@ -89,9 +89,6 @@
   "app.action-bar.install.updating-shared-content": {
     "message": "Opdatere delt indhold"
   },
-  "app.action-bar.installs": {
-    "message": "Installeringer"
-  },
   "app.action-bar.make-primary-instance": {
     "message": "Gør til primære instance"
   },
@@ -134,15 +131,21 @@
   "app.ads-consent.reject": {
     "message": "Afvis alle"
   },
-  "app.ads-consent.title": {
-    "message": "Dit privatliv og hvordan reklamer hjælper Modrinth"
+  "app.appearance-settings.advanced-rendering.description": {
+    "message": "Aktiverer avanceret gengivelse som sløringseffekter, der kan forårsage ydelsesproblemer uden hardwareaccelereret gengivelse."
   },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "Avanceret rendering"
   },
+  "app.appearance-settings.color-theme.description": {
+    "message": "Vælg dit foretrukne farvetema til Modrinth App."
+  },
   "app.appearance-settings.color-theme.title": {
     "message": "Farvetema"
   },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "Skift hvilken side launcheren åbner i."
+  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Hjem"
   },
@@ -152,23 +155,38 @@
   "app.appearance-settings.default-landing-page.title": {
     "message": "Standard startside"
   },
+  "app.appearance-settings.hide-nametag.description": {
+    "message": "Slår nametagget over din spiller på skins siden fra."
+  },
   "app.appearance-settings.hide-nametag.title": {
     "message": "Gem nametag"
   },
+  "app.appearance-settings.jump-back-into-worlds.description": {
+    "message": "Inkluderer de sidste verdener i afsnittet \"Hop tilbage\" på startsiden."
+  },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "Hop tilbage ind i verdener"
   },
+  "app.appearance-settings.minimize-launcher.description": {
+    "message": "Minimer launcheren når Minecraft starter."
+  },
   "app.appearance-settings.minimize-launcher.title": {
-    "message": "Minimer app"
+    "message": "Minimer launcher"
+  },
+  "app.appearance-settings.show-play-time.description": {
+    "message": "Vis hvor meget tid du har brugt på at spille en instance."
   },
   "app.appearance-settings.show-play-time.title": {
     "message": "Vis tid spillet"
   },
-  "app.appearance-settings.skip-non-essential-warnings.title": {
-    "message": "Spring ikke nødvendige advarseler over"
+  "app.appearance-settings.toggle-sidebar.description": {
+    "message": "Aktivere muligheden for at slå sidepanelet til og fra."
   },
   "app.appearance-settings.toggle-sidebar.title": {
-    "message": "Gem højre sidebar"
+    "message": "Slå sidepanel til og fra"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "message": "Hvis du prøver at installere en Modrinth Pack fil (.mrpack) som ikke er hosted på Modrinth, så skal vi nok sikre os du forstår riskoen før du installere den."
   },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "Advar mig før jeg installere en ukendt modpacks"
@@ -179,9 +197,6 @@
   "app.auth-servers.unreachable.header": {
     "message": "Kan ikke nå autentificeringsservere"
   },
-  "app.behavior-settings.content.title": {
-    "message": "Hjem og indhold"
-  },
   "app.browse.add-servers-to-instance": {
     "message": "Tilføjet server til instance"
   },
@@ -203,18 +218,12 @@
   "app.browse.back-to-instance": {
     "message": "Tilbage til instance"
   },
-  "app.browse.discover-project-type": {
-    "message": "Udforsk {projectType}"
-  },
   "app.browse.discover-servers": {
     "message": "Opdag servere"
   },
   "app.browse.hide-added-servers": {
     "message": "Gem servere som allerede er tilføjet"
   },
-  "app.browse.hide-installed-modpacks": {
-    "message": "Skjul allerede installeret"
-  },
   "app.browse.project-type.modpacks": {
     "message": "Modpacks"
   },
@@ -254,60 +263,12 @@
   "app.install.phase.downloading_minecraft": {
     "message": "Downloader Minecraft"
   },
-  "app.install.phase.finalizing": {
-    "message": "Færdiggører"
-  },
-  "app.install.phase.preparing_instance": {
-    "message": "I kø til at intallere"
-  },
-  "app.install.phase.preparing_java": {
-    "message": "Forbereder Java"
-  },
   "app.install.phase.preparing_java.downloading": {
     "message": "Downloader Java {version}"
   },
-  "app.install.phase.preparing_java.extracting": {
-    "message": "Udpakker Java {version}"
-  },
-  "app.install.phase.preparing_java.fetching-metadata": {
-    "message": "Henter Java {version}"
-  },
-  "app.install.phase.preparing_java.resolving": {
-    "message": "Forbereder Java {version}"
-  },
-  "app.install.phase.preparing_java.validating": {
-    "message": "Validerer Java {version}"
-  },
   "app.instance.admonitions.shared-instance.added-label": {
     "message": "Tilføjet"
   },
-  "app.instance.admonitions.shared-instance.publish-button": {
-    "message": "Skub opdatering"
-  },
-  "app.instance.admonitions.shared-instance.publishing-button": {
-    "message": "Skubber..."
-  },
-  "app.instance.admonitions.shared-instance.removed-label": {
-    "message": "Fjernet"
-  },
-  "app.instance.admonitions.shared-instance.review-admonition-header": {
-    "message": "Skub opdatering"
-  },
-  "app.instance.admonitions.shared-instance.review-header": {
-    "message": "Gennemså ændringer"
-  },
-  "app.instance.admonitions.shared-instance.review-update-button": {
-    "message": "Gennemgå opdatering"
-  },
-  "app.instance.admonitions.shared-instance.reviewing-button": {
-    "message": "Gennemgår..."
-  },
-  "app.instance.admonitions.shared-instance.update-available-body": {
-    "message": "En opdatering er krævet for at spille {name}. Venligst opdater til den seneste version for at køre spillet."
-  },
-  "app.instance.admonitions.shared-instance.update-available-header": {
-    "message": "En opdatering er tilgængelig"
-  },
   "app.instance.confirm-delete.admonition-body": {
     "message": "Al' data for din instance vil blive permanent slettet, dette inkludere dine verdener, konfigurationer, og alt installeret indhold."
   },
@@ -338,9 +299,6 @@
   "app.instance.mods.content-type-project": {
     "message": "projekt"
   },
-  "app.instance.mods.locked-content": {
-    "message": "Indhold i låste instances kan ikke blive ændret."
-  },
   "app.instance.mods.project-was-added": {
     "message": "\"{name}\" blev tilføjet"
   },
@@ -356,18 +314,6 @@
   "app.instance.mods.successfully-uploaded": {
     "message": "Uploadet"
   },
-  "app.instance.share.empty.description": {
-    "message": "Du kan ændre denne instance med dine venner!"
-  },
-  "app.instance.share.empty.heading": {
-    "message": "Ingen venner inviteret"
-  },
-  "app.instance.share.empty.invite-friends-button": {
-    "message": "Inviter venner"
-  },
-  "app.instance.share.invite-modal.heading": {
-    "message": "Del {name}"
-  },
   "app.instance.share.locked.empty-description-suffix": {
     "message": "for at tilgå denne side."
   },
@@ -383,12 +329,6 @@
   "app.instance.share.remove-user-modal.effects-label": {
     "message": "Hvad vil der ske?"
   },
-  "app.instance.share.remove-user-modal.header": {
-    "message": "Fjern adgang"
-  },
-  "app.instance.share.remove-user-modal.remove-button": {
-    "message": "Fjern adgang"
-  },
   "app.instance.share.remove-user-modal.user-avatar-alt": {
     "message": "{username}'s avatar"
   },
@@ -521,6 +461,9 @@
   "app.settings.tabs.appearance": {
     "message": "Udseende"
   },
+  "app.settings.tabs.default-instance-options": {
+    "message": "Standardindstillinger for instans"
+  },
   "app.settings.tabs.java-installations": {
     "message": "Javainstallationer"
   },
@@ -1142,6 +1085,9 @@
   "minecraft-required.sign-in": {
     "message": "Log ind på Microsoft"
   },
+  "modal.modrinth-account-required.cancel-button": {
+    "message": "Annuller"
+  },
   "modal.modrinth-account-required.continue-in-browser-heading": {
     "message": "Fortsæt i din browser"
   },

apps/app-frontend/src/locales/de-CH/index.json

@@ -15,7 +15,7 @@
     "message": "Kopiert"
   },
   "app.action-bar.install.copy-details": {
-    "message": "Details kopieren"
+    "message": "Kopier Details"
   },
   "app.action-bar.install.dismiss": {
     "message": "Ignorieren"
@@ -27,16 +27,16 @@
     "message": "Wiederholen"
   },
   "app.action-bar.install.summary.app-closing": {
-    "message": "Aufgrund von Schließung der App abgebrochen"
+    "message": "Abbroche will app gschlosse worde isch"
   },
   "app.action-bar.install.summary.bad-modpack-file": {
-    "message": "Modpack konnte nicht gelesen werden"
+    "message": "Modpack kud nöd glese werde"
   },
   "app.action-bar.install.summary.canceled": {
-    "message": "Abgebrochen"
+    "message": "Abbroche"
   },
   "app.action-bar.install.summary.cleanup-incomplete": {
-    "message": "Bereinigung konnte nicht abgeschlossen werden"
+    "message": "Ufrume kunnti nöt beendet werde"
   },
   "app.action-bar.install.summary.content-download-failed": {
     "message": "Dateien konnten nicht heruntergeladen werden"
@@ -144,19 +144,19 @@
     "message": "Deine Privatsphäre und wie Werbung Modrinth unterstützt"
   },
   "app.appearance-settings.advanced-rendering.description": {
-    "message": "Visuelle Effekte wie Hintergrundunschärfe aktivieren. Ohne Hardwarebeschleunigung kann dies die Leistung beeinträchtigen."
+    "message": "Aktiviert erweiterte Rendering-Funktionen wie Unschärfeeffekte, welche ohne hardwarebeschleunigtes Rendering zu Leistungsproblemen führen können."
   },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "Erweitertes Rendering"
   },
   "app.appearance-settings.color-theme.description": {
-    "message": "Wähle das Farbschema der Modrinth App aus."
+    "message": "Wähle dein bevorzugtes Farbschema für die Modrinth App."
   },
   "app.appearance-settings.color-theme.title": {
     "message": "Farbschema"
   },
   "app.appearance-settings.default-landing-page.description": {
-    "message": "Wähle die Seite, die beim Öffnen der Modrinth App erscheint."
+    "message": "Ändere die Seite, die beim Öffnen des Launchers angezeigt wird."
   },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Start"
@@ -168,49 +168,49 @@
     "message": "Standard-Startseite"
   },
   "app.appearance-settings.hide-nametag.description": {
-    "message": "Verbirgt deinen Benutzernamen über der Spielervorschau auf der Skin-Auswahlseite."
+    "message": "Deaktiviert das Namensschild über deinem Spieler auf der Skin-Seite."
   },
   "app.appearance-settings.hide-nametag.title": {
     "message": "Namensschild ausblenden"
   },
   "app.appearance-settings.jump-back-into-worlds.description": {
-    "message": "Zeigt deine zuletzt gespielten Welten in der Sektion „Direkt in Welten weiterspielen“ auf der Startseite an."
+    "message": "Enthält zuletzt gespielte Welten im Abschnitt „Direkt weiterspielen“ auf der Startseite."
   },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "Springe zurück in Welten"
   },
   "app.appearance-settings.minimize-launcher.description": {
-    "message": "Minimiere die Modrinth App, wenn Minecraft startet."
+    "message": "Den Launcher minimieren, wenn ein Minecraft-Prozess gestartet wird."
   },
   "app.appearance-settings.minimize-launcher.title": {
-    "message": "App minimieren"
+    "message": "Launcher minimieren"
   },
   "app.appearance-settings.native-decorations.description": {
-    "message": "Nutzt die Titelleiste und Fenstersteuerung deines Betriebssystems. Erfordert einen App-Neustart."
+    "message": "Systemfensterrahmen verwenden (Neustart der App erforderlich)."
   },
   "app.appearance-settings.native-decorations.title": {
-    "message": "System-Fensterrahmen"
+    "message": "Native Dekorationen"
   },
   "app.appearance-settings.show-play-time.description": {
-    "message": "Zeigt, wie lange du jede einzelne Instanz gespielt hast."
+    "message": "Zeigt an, wie viel Zeit du mit dem Spielen einer Instanz verbracht hast."
   },
   "app.appearance-settings.show-play-time.title": {
     "message": "Spielzeit anzeigen"
   },
   "app.appearance-settings.skip-non-essential-warnings.description": {
-    "message": "Bestätigungen für risikoarme Aktionen überspringen (z. B. doppelte Installationen, normales Löschen, Massen-Updates, Entkoppeln und Reparieren). Warnungen für gefährliche Aktionen werden weiterhin angezeigt."
+    "message": "Bestätigungen mit geringem Risiko, wie z. B. die Installation doppelter Modpacks, das Löschen normaler Inhalte, Massenaktualisierungen, das Aufheben von Verknüpfungen zu Modpacks und Reparaturaufrufe, werden automatisch übersprungen. Gefährliche Warnungen werden weiterhin angezeigt."
   },
   "app.appearance-settings.skip-non-essential-warnings.title": {
     "message": "Unwichtige Warnungen überspringen"
   },
   "app.appearance-settings.toggle-sidebar.description": {
-    "message": "Blendet die rechte Seitenleiste standardmäßig aus und fügt einen Button zum Ein- oder Ausblenden hinzu."
+    "message": "Ermöglicht das Umschalten der Seitenleiste."
   },
   "app.appearance-settings.toggle-sidebar.title": {
-    "message": "Rechte Seitenleiste ausblenden"
+    "message": "Seitenleiste umschalten"
   },
   "app.appearance-settings.unknown-pack-warning.description": {
-    "message": "Zeige eine Sicherheitswarnung an, bevor ein Modrinth-Paket (.mrpack) installiert wird, welches nicht auf Modrinth gehostet wird."
+    "message": "Falls du versuchst, eine Modrinth-Pack-Datei (.mrpack) zu installieren, die nicht auf Modrinth gehostet wird, werden wir sicherstellen, dass du die Risiken vor der Installation verstehst."
   },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "Warne mich, bevor unbekannte Modpacks installiert werden"
@@ -221,15 +221,6 @@
   "app.auth-servers.unreachable.header": {
     "message": "Authentifizierungsserver sind nicht erreichbar"
   },
-  "app.behavior-settings.confirmations.title": {
-    "message": "Bestätigungen"
-  },
-  "app.behavior-settings.content.title": {
-    "message": "Startseite & Inhalte"
-  },
-  "app.behavior-settings.startup-and-navigation.title": {
-    "message": "Start & Navigation"
-  },
   "app.browse.add-servers-to-instance": {
     "message": "Server zu Instanz hinzufügen"
   },
@@ -251,18 +242,12 @@
   "app.browse.back-to-instance": {
     "message": "Zu Instanz zurückgehen"
   },
-  "app.browse.discover-project-type": {
-    "message": "{projectType} entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },
   "app.browse.hide-added-servers": {
     "message": "Bereits hinzugefügte Server ausblenden"
   },
-  "app.browse.hide-installed-modpacks": {
-    "message": "Bereits installiert ausblenden"
-  },
   "app.browse.project-type.modpacks": {
     "message": "Modpacks"
   },
@@ -377,18 +362,9 @@
   "app.instance.admonitions.shared-instance.review-header": {
     "message": "Änderungen überprüfen"
   },
-  "app.instance.admonitions.shared-instance.review-update-button": {
-    "message": "Update überprüfen"
-  },
   "app.instance.admonitions.shared-instance.reviewing-button": {
     "message": "Wird überprüft..."
   },
-  "app.instance.admonitions.shared-instance.update-available-body": {
-    "message": "Ein Update ist erforderlich, um {name} zu spielen. Bitte aktualisiere auf die neueste Version, um das Spiel zu starten."
-  },
-  "app.instance.admonitions.shared-instance.update-available-header": {
-    "message": "Ein Update ist verfügbar"
-  },
   "app.instance.confirm-delete.admonition-body": {
     "message": "Alle Daten deiner Instanz werden permanent gelöscht, inlusive deiner Welten, Konfigurationen und allen installierten Inhalten."
   },
@@ -455,9 +431,6 @@
   "app.instance.share.invite-modal.heading": {
     "message": "{name} teilen"
   },
-  "app.instance.share.invite-modal.user-limit-reached": {
-    "message": "Diese Instanz hat das Nutzerlimit von {limit} erreicht."
-  },
   "app.instance.share.locked.empty-description-prefix": {
     "message": "Du musst dich als"
   },
@@ -476,12 +449,6 @@
   "app.instance.share.locked.wrong-account-heading": {
     "message": "Falsches Konto"
   },
-  "app.instance.share.members.empty": {
-    "message": "Es sind noch keine Benutzer beigetreten"
-  },
-  "app.instance.share.members.no-filter-results": {
-    "message": "Keine Benutzer passen zu deinen Filtern."
-  },
   "app.instance.share.remove-user-modal.effect-access": {
     "message": "Diese Person wird für diese geteilte Instanz keine Updates mehr erhalten"
   },
@@ -512,12 +479,6 @@
   "app.instance.share.sign-in.button": {
     "message": "Anmelden"
   },
-  "app.instance.share.unable-to-connect.description": {
-    "message": "Der Dienst für geteilte Instanzen ist derzeit nicht erreichbar; bitte versuche es später erneut"
-  },
-  "app.instance.share.unable-to-connect.heading": {
-    "message": "Verbindung nicht möglich"
-  },
   "app.instance.share.unlink.body": {
     "message": "Du musst die Verknüpfung zu diesem Modpack trennen, um deine Instanz zu teilen"
   },
@@ -590,9 +551,6 @@
   "app.instance.worlds.no-worlds-heading": {
     "message": "Keine Server oder Welten hinzugefügt"
   },
-  "app.instance.worlds.refreshing": {
-    "message": "Wird aktualisiert..."
-  },
   "app.instance.worlds.remove-server-modal.remove-button": {
     "message": "Server entfernen"
   },
@@ -608,60 +566,12 @@
   "app.instance.worlds.search-worlds-placeholder": {
     "message": "Durchsuche {count} Welten..."
   },
-  "app.java-detection.cancel": {
-    "message": "Abbrechen"
-  },
-  "app.java-detection.columns.actions": {
-    "message": "Aktionen"
-  },
-  "app.java-detection.columns.path": {
-    "message": "Pfad"
-  },
-  "app.java-detection.columns.version": {
-    "message": "Version"
-  },
-  "app.java-detection.no-installations-found": {
-    "message": "Keine Java Installationen gefunden."
-  },
-  "app.java-detection.select": {
-    "message": "Auswählen"
-  },
-  "app.java-detection.selected": {
-    "message": "Ausgewählt"
-  },
-  "app.java-detection.title": {
-    "message": "Java-Installation auswählen"
-  },
-  "app.java-selector.already-installed": {
-    "message": "Bereits installiert"
-  },
-  "app.java-selector.browse": {
-    "message": "Durchsuchen"
-  },
-  "app.java-selector.detect": {
-    "message": "Erkennen"
-  },
-  "app.java-selector.install-recommended": {
-    "message": "Empfohlenes installieren"
-  },
-  "app.java-selector.installing": {
-    "message": "Installiere..."
-  },
-  "app.java-selector.path.placeholder": {
-    "message": "/path/to/java"
-  },
-  "app.java-selector.test-installation": {
-    "message": "Java-Installation testen"
-  },
   "app.modal.install-to-play.additional-context": {
     "message": "Zusätzlicher Kontext"
   },
   "app.modal.install-to-play.additional-context-placeholder": {
     "message": "Füge gegebenenfalls relevante Links und Bilder hinzu"
   },
-  "app.modal.install-to-play.block-user": {
-    "message": "Benutzer blockieren"
-  },
   "app.modal.install-to-play.content-you-are-reporting": {
     "message": "Die Instanz, die du meldest"
   },
@@ -683,9 +593,6 @@
   "app.modal.install-to-play.invite-warning": {
     "message": "Diese Einladung wurde von einem anderen Modrinth-Nutzer erstellt, nicht von Modrinth. Nimm nur Einladungen von Personen an, denen du vertraust."
   },
-  "app.modal.install-to-play.invite-warning-with-creator": {
-    "message": "Diese Einladung wurde von <creator>{username}</creator> erstellt, nicht von Modrinth. Akzeptierte nur Einladungen von Leuten, denen du vertraust."
-  },
   "app.modal.install-to-play.mod-count": {
     "message": "{count, plural, one {# Mod} other {# Mods}}"
   },
@@ -743,9 +650,6 @@
   "app.modal.install-to-play.unrecognized-files": {
     "message": "Nicht erkannte Dateien"
   },
-  "app.modal.install-to-play.user-blocked": {
-    "message": "Benutzer blockiert"
-  },
   "app.modal.install-to-play.view-contents": {
     "message": "Inhalte ansehen"
   },
@@ -773,36 +677,6 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "Zum Spielen von {name} ist eine Aktualisierung erforderlich. Bitte aktualisiere auf die neueste Version, um das Spiel zu starten."
   },
-  "app.nav.create-new-instance": {
-    "message": "Neue Instanz erstellen"
-  },
-  "app.nav.home": {
-    "message": "Startseite"
-  },
-  "app.nav.library": {
-    "message": "Bibliothek"
-  },
-  "app.nav.modrinth-account": {
-    "message": "Modrinth-Konto"
-  },
-  "app.nav.modrinth-hosting": {
-    "message": "Modrinth Hosting"
-  },
-  "app.nav.sign-in-to-modrinth-account": {
-    "message": "Bei einem Modrinth-Konto anmelden"
-  },
-  "app.nav.signed-in-as": {
-    "message": "Angemeldet als <user>{username}</user>"
-  },
-  "app.nav.upgrade-to-modrinth-plus": {
-    "message": "Auf Modrinth+ upgraden"
-  },
-  "app.news.title": {
-    "message": "Neuigkeiten"
-  },
-  "app.news.view-all": {
-    "message": "Alle Neuigkeiten anzeigen"
-  },
   "app.project.install-button.already-installed": {
     "message": "Dieses Projekt ist bereits installiert"
   },
@@ -812,9 +686,6 @@
   "app.project.install-context.back-to-browse": {
     "message": "Zurück zu Entdecken"
   },
-  "app.project.install-context.back-to-instance": {
-    "message": "Zurück zur Instanz"
-  },
   "app.project.version.all-versions": {
     "message": "Alle Versionen"
   },
@@ -827,188 +698,20 @@
   "app.project.versions.already-installed": {
     "message": "Bereits installiert"
   },
-  "app.quick-instance-switcher.drag-show-tooltip": {
-    "message": "Ziehen, um letzte Instanzen anzuzeigen"
-  },
-  "app.quick-instance-switcher.drag-tooltip": {
-    "message": "Ziehen zur Größenänderung"
-  },
-  "app.restarting": {
-    "message": "Wird neu gestartet..."
-  },
-  "app.settings.app-version": {
-    "message": "Modrinth App {version}"
-  },
-  "app.settings.default-instance-options.environment-variables.description": {
-    "message": "Umgebungsvariablen, die beim Starten einer Instanz gesetzt werden."
-  },
-  "app.settings.default-instance-options.environment-variables.placeholder": {
-    "message": "Umgebungsvariablen eingeben..."
-  },
-  "app.settings.default-instance-options.environment-variables.title": {
-    "message": "Umgebungsvariablen"
-  },
-  "app.settings.default-instance-options.fullscreen.description": {
-    "message": "Startet Instanzen im Vollbildmodus durch Aktualisieren ihrer options.txt-Datei."
-  },
-  "app.settings.default-instance-options.fullscreen.title": {
-    "message": "Vollbild"
-  },
-  "app.settings.default-instance-options.height.description": {
-    "message": "Die Höhe des Spielfensters beim Starten"
-  },
-  "app.settings.default-instance-options.height.placeholder": {
-    "message": "Höhe eingeben..."
-  },
-  "app.settings.default-instance-options.height.title": {
-    "message": "Höhe"
-  },
-  "app.settings.default-instance-options.java-arguments.description": {
-    "message": "Argumente, die beim Starten einer Instanz an Java übergeben werden."
-  },
-  "app.settings.default-instance-options.java-arguments.placeholder": {
-    "message": "Java-Argumente eingeben..."
-  },
-  "app.settings.default-instance-options.java-arguments.title": {
-    "message": "Java-Argumente"
-  },
-  "app.settings.default-instance-options.memory-allocation.description": {
-    "message": "Maximal verfügbarer Arbeitsspeicher zu jeder Instanz."
-  },
-  "app.settings.default-instance-options.memory-allocation.title": {
-    "message": "Arbeitsspeicherzuweisung"
-  },
-  "app.settings.default-instance-options.post-exit-hook.description": {
-    "message": "Wird nach dem Beenden des Spiels ausgeführt."
-  },
-  "app.settings.default-instance-options.post-exit-hook.placeholder": {
-    "message": "Nach Spielbeendigung auszuführender Befehl eingeben..."
-  },
-  "app.settings.default-instance-options.post-exit-hook.title": {
-    "message": "Aktion nach Programmende"
-  },
-  "app.settings.default-instance-options.pre-launch-hook.description": {
-    "message": "Läuft bevor die Instanz startet."
-  },
-  "app.settings.default-instance-options.pre-launch-hook.placeholder": {
-    "message": "Vor Spielstart auszuführenden Befehl eingeben..."
-  },
-  "app.settings.default-instance-options.pre-launch-hook.title": {
-    "message": "Startaktion"
-  },
-  "app.settings.default-instance-options.width.description": {
-    "message": "Die Breite des Spielfensters beim Start."
-  },
-  "app.settings.default-instance-options.width.placeholder": {
-    "message": "Breite eingeben..."
-  },
-  "app.settings.default-instance-options.width.title": {
-    "message": "Breite"
-  },
-  "app.settings.default-instance-options.wrapper-hook.description": {
-    "message": "Wrapper-Befehl für den Minecraft-Startprozess."
-  },
-  "app.settings.default-instance-options.wrapper-hook.placeholder": {
-    "message": "Wrapperbefehl eingeben..."
-  },
-  "app.settings.default-instance-options.wrapper-hook.title": {
-    "message": "Wrapper-Hook"
-  },
-  "app.settings.developer-mode-button.label": {
-    "message": "Entwicklermodus umschalten"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Entwicklermodus aktiviert."
   },
   "app.settings.downloading": {
     "message": "Lade v{version} herunter"
   },
-  "app.settings.java-installations.location.title": {
-    "message": "Java {version, number} Installation"
-  },
-  "app.settings.operating-system.macos": {
-    "message": "macOS"
-  },
   "app.settings.privacy.ads-consent.intro": {
     "message": "Werbung ermöglicht Modrinth und finanziert die Auszahlungen an die Ersteller. Unsere Partner speichern möglicherweise Cookies in der App oder greifen auf diese zu, um Werbung zu personalisieren und die Leistung zu messen. Du kannst dies unten deaktivieren oder deine Einstellungen verwalten."
   },
-  "app.settings.privacy.discord-rich-presence.description": {
-    "message": "Zeige Modrinth App als deine aktuelle Aktivität auf Discord. Dies betrifft nicht Rich Presence die von Mods zu Instanzen hinzugefügt wird. Benötigt einen Neustart der App."
-  },
-  "app.settings.privacy.discord-rich-presence.title": {
-    "message": "Discord Rich Presence"
-  },
-  "app.settings.privacy.telemetry.description": {
-    "message": "Modrinth sammelt anonymisierte Analyse- und Nutzungsdaten, um unsere Nutzererfahrung zu verbessern und deine Erfahrung anzupassen. Wenn du diese Option deaktivierst, entscheidest du dich dagegen und deine Daten werden nicht mehr gesammelt."
-  },
-  "app.settings.privacy.telemetry.title": {
-    "message": "Telemetrie"
-  },
-  "app.settings.resource-management.always-show-copy-details.description": {
-    "message": "Zeigt die Aktion \"Details kopieren\" an, während eine Installation in der Warteschlange steht oder ausgeführt wird. Bei fehlgeschlagenen oder abgebrochenen Installationen ist sie immer verfügbar."
-  },
-  "app.settings.resource-management.always-show-copy-details.title": {
-    "message": "Immer Kopierdetails anzeigen"
-  },
-  "app.settings.resource-management.app-cache.confirm.description": {
-    "message": "Die App könnte langsamer laden, bis der Cache neu aufgebaut wurde."
-  },
-  "app.settings.resource-management.app-cache.confirm.title": {
-    "message": "App-Cache leeren?"
-  },
-  "app.settings.resource-management.app-cache.description": {
-    "message": "Gespeicherte Cache-Daten löschen und sie neu von Modrinth herunterladen. Die App könnte langsamer laden, bis der Cache neu aufgebaut wurde."
-  },
-  "app.settings.resource-management.app-cache.purge": {
-    "message": "Cache leeren"
-  },
-  "app.settings.resource-management.app-cache.title": {
-    "message": "App-Cache"
-  },
-  "app.settings.resource-management.app-database-backups.description": {
-    "message": "Backups von wichtigen App-Daten werden hier gespeichert, falls du sie später wiederherstellen musst."
-  },
-  "app.settings.resource-management.app-database-backups.open-folder": {
-    "message": "Backups Ordner öffnen"
-  },
-  "app.settings.resource-management.app-database-backups.title": {
-    "message": "App-Daten Backups"
-  },
-  "app.settings.resource-management.app-directory.browse": {
-    "message": "Nach einem App-Verzeichnis suchen"
-  },
-  "app.settings.resource-management.app-directory.description": {
-    "message": "Wo Modrinth App Instanzen und andere Dateien speichert. Änderungen werden nach dem Neustarten der App angewendet."
-  },
-  "app.settings.resource-management.app-directory.select": {
-    "message": "Neues App-Verzeichnis auswählen"
-  },
-  "app.settings.resource-management.app-directory.title": {
-    "message": "App-Verzeichnis"
-  },
-  "app.settings.resource-management.maximum-concurrent-downloads.description": {
-    "message": "Anzahl der Dateien, die die App auf einmal herunterladen kann. Senke dies, wenn downloads auf deiner Verbindung unzuverlässig sind. Benötigt einen App-Neustart."
-  },
-  "app.settings.resource-management.maximum-concurrent-downloads.title": {
-    "message": "Maximale gleichzeitige Downloads"
-  },
-  "app.settings.resource-management.maximum-concurrent-writes.description": {
-    "message": "Wie viele Dateien die App auf einmal auf die Festplatte schreiben kann. Senke dies, wenn du oft I/O Fehler bekommst. Benötigt einen App-Neustart."
-  },
-  "app.settings.resource-management.maximum-concurrent-writes.title": {
-    "message": "Maximale gleichzeitige Schreibvorgänge"
-  },
-  "app.settings.sidebar.label.instances": {
-    "message": "Instanzen"
-  },
   "app.settings.tabs.appearance": {
     "message": "Erscheinungsbild"
   },
-  "app.settings.tabs.behavior": {
-    "message": "Verhalten"
-  },
   "app.settings.tabs.default-instance-options": {
-    "message": "Standard-Spieloptionen"
+    "message": "Standard Instanz-Einstellungen"
   },
   "app.settings.tabs.java-installations": {
     "message": "Java Installationen"
@@ -1022,9 +725,6 @@
   "app.settings.tabs.resource-management": {
     "message": "Ressourcenmanagement"
   },
-  "app.sidebar.playing-as": {
-    "message": "Wird gespielt als"
-  },
   "app.skins.add-button": {
     "message": "Skin hinzufügen"
   },
@@ -1184,21 +884,6 @@
   "app.skins.toggle-ears-features-on": {
     "message": "Aktivieren"
   },
-  "app.survey.body": {
-    "message": "Könntest du ein paar Fragen über deine Erfahrung mit Modrinth App beantworten?"
-  },
-  "app.survey.footer": {
-    "message": "Das Feedback geht direkt an das Modrinth-Team und wird helfen, zukünftige Updates zu gestalten!"
-  },
-  "app.survey.no-thanks": {
-    "message": "Nein danke"
-  },
-  "app.survey.take-survey": {
-    "message": "An Umfrage teilnehmen"
-  },
-  "app.survey.title": {
-    "message": "Hey, Modrinth Nutzer!"
-  },
   "app.update-popup.body.download-complete": {
     "message": "Modrinth App v{version} wurde heruntergeladen. Lade die App neu um jetzt zu aktualisieren, oder automatisch nach dem schliessen der Modrinth App."
   },
@@ -1229,9 +914,6 @@
   "app.update.complete-toast.title": {
     "message": "Version {version} wurde erfolgreich installiert!"
   },
-  "app.user.project.install-to-instance": {
-    "message": "In Instanz installieren"
-  },
   "app.world.server-modal.placeholder-address": {
     "message": "example.modrinth.gg"
   },
@@ -1478,45 +1160,6 @@
   "instance.server-modal.resource-pack": {
     "message": "Ressourcenpaket"
   },
-  "instance.settings.sharing.active-invites.actions": {
-    "message": "Aktionen"
-  },
-  "instance.settings.sharing.active-invites.code": {
-    "message": "Einladungslink"
-  },
-  "instance.settings.sharing.active-invites.description": {
-    "message": "Jeder, der einen dieser Einladungslinks hat, kann beitreten, solange der Link aktiv ist."
-  },
-  "instance.settings.sharing.active-invites.empty": {
-    "message": "Es gibt keine aktiven Einladungen."
-  },
-  "instance.settings.sharing.active-invites.expires": {
-    "message": "Läuft ab"
-  },
-  "instance.settings.sharing.active-invites.revoke": {
-    "message": "Einladung zurückziehen"
-  },
-  "instance.settings.sharing.active-invites.revoke-with-code": {
-    "message": "Einladung {code} zurückziehen"
-  },
-  "instance.settings.sharing.active-invites.title": {
-    "message": "Aktive Einladungen"
-  },
-  "instance.settings.sharing.active-invites.uses": {
-    "message": "Nutzungen"
-  },
-  "instance.settings.sharing.revoke-invite.admonition-body": {
-    "message": "Der Einladungslink <monospace>{code}</monospace> wird sofort aufhören zu funktionieren. Nutzer, die bereits beigetreten sind, bleibt der Zugang gewährt."
-  },
-  "instance.settings.sharing.revoke-invite.admonition-header": {
-    "message": "Diese Aktion kann nicht rückgängig gemacht werden"
-  },
-  "instance.settings.sharing.revoke-invite.confirm": {
-    "message": "Einladung zurückziehen"
-  },
-  "instance.settings.sharing.revoke-invite.header": {
-    "message": "Einladung zurückziehen"
-  },
   "instance.settings.tabs.general": {
     "message": "Allgemein"
   },
@@ -1625,27 +1268,6 @@
   "instance.settings.tabs.hooks.title": {
     "message": "Spielstart Hooks"
   },
-  "instance.settings.tabs.hooks.variables.description": {
-    "message": "Hooks werden im Arbeitsverzeichnis der Instanz mit den folgenden Variablen ausgeführt:"
-  },
-  "instance.settings.tabs.hooks.variables.inst-dir.description": {
-    "message": "$INST_DIR: Der absolute Pfad zum Ordner der Instanz"
-  },
-  "instance.settings.tabs.hooks.variables.inst-id.description": {
-    "message": "$INST_ID: Der Name des Ordners der Instanz"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java-args.description": {
-    "message": "$INST_JAVA_ARGS: Die JVM-Argumente, die dem Spiel zur Verfügung gestellt werden"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java.description": {
-    "message": "$INST_JAVA: Der absolute Pfad zur Java-Binärdatei"
-  },
-  "instance.settings.tabs.hooks.variables.inst-mc-dir.description": {
-    "message": "$INST_MC_DIR: Ein Alias für $INST_DIR"
-  },
-  "instance.settings.tabs.hooks.variables.inst-name.description": {
-    "message": "$INST_NAME: Der Name der Instanz"
-  },
   "instance.settings.tabs.hooks.wrapper": {
     "message": "Wrapper"
   },
@@ -1739,12 +1361,6 @@
   "instance.shared-instance.error.title": {
     "message": "Etwas ist schiefgelaufen"
   },
-  "instance.shared-instance.network-error.text": {
-    "message": "Verbindung zur Shared-Instances-API nicht möglich"
-  },
-  "instance.shared-instance.network-error.title": {
-    "message": "Netzwerkfehler"
-  },
   "instance.shared-instance.owner-tooltip": {
     "message": "Der Inhalt dieser Instanz wird mit anderen Benutzern geteilt."
   },
@@ -1880,6 +1496,9 @@
   "modal.modrinth-account-required.browser-description": {
     "message": "Ein neuer Tab zum Anmelden wurde geöffnet. Schließe die Anmeldung dort ab und kehren anschließend zur App zurück."
   },
+  "modal.modrinth-account-required.cancel-button": {
+    "message": "Abbrechen"
+  },
   "modal.modrinth-account-required.continue-in-browser-heading": {
     "message": "Im Browser fortfahren"
   },
@@ -1933,11 +1552,5 @@
   },
   "search.filter.locked.server-loader.title": {
     "message": "Loader wird vom Server bereitgestellt"
-  },
-  "settings.sidebar.label.account": {
-    "message": "Konto"
-  },
-  "settings.sidebar.label.display": {
-    "message": "Anzeige"
   }
 }

apps/app-frontend/src/locales/de-DE/index.json

@@ -144,19 +144,19 @@
     "message": "Deine Privatsphäre und wie Werbung Modrinth unterstützt"
   },
   "app.appearance-settings.advanced-rendering.description": {
-    "message": "Visuelle Effekte wie Hintergrundunschärfe aktivieren. Ohne Hardwarebeschleunigung kann dies die Leistung beeinträchtigen."
+    "message": "Aktiviert erweiterte Rendering-Funktionen wie Unschärfe-Effekte, welche ohne Hardware-beschleunigtes Rendering zu Leistungsproblemen führen können."
   },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "Erweitertes Rendering"
   },
   "app.appearance-settings.color-theme.description": {
-    "message": "Wähle das Farbschema der Modrinth App aus."
+    "message": "Wähle dein bevorzugtes Farbschema für die Modrinth App."
   },
   "app.appearance-settings.color-theme.title": {
     "message": "Farbschema"
   },
   "app.appearance-settings.default-landing-page.description": {
-    "message": "Wähle die Seite, die beim Öffnen der Modrinth App erscheint."
+    "message": "Ändere die Seite, die beim Öffnen des Launchers angezeigt wird."
   },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Start"
@@ -168,49 +168,49 @@
     "message": "Standard-Startseite"
   },
   "app.appearance-settings.hide-nametag.description": {
-    "message": "Verbirgt deinen Benutzernamen über der Spielervorschau auf der Skin-Auswahlseite."
+    "message": "Deaktiviert das Namensschild über deinem Spieler auf der Skin-Seite."
   },
   "app.appearance-settings.hide-nametag.title": {
     "message": "Namensschild ausblenden"
   },
   "app.appearance-settings.jump-back-into-worlds.description": {
-    "message": "Zeigt deine zuletzt gespielten Welten in der Sektion „Direkt in Welten weiterspielen“ auf der Startseite an."
+    "message": "Enthält zuletzt gespielte Welten im Abschnitt „Direkt weiterspielen“ auf der Startseite."
   },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "Direkt in Welten weiterspielen"
   },
   "app.appearance-settings.minimize-launcher.description": {
-    "message": "Minimiere die Modrinth App, wenn Minecraft startet."
+    "message": "Den Launcher minimieren, wenn ein Minecraft-Prozess gestartet wird."
   },
   "app.appearance-settings.minimize-launcher.title": {
-    "message": "App minimieren"
+    "message": "Launcher minimieren"
   },
   "app.appearance-settings.native-decorations.description": {
-    "message": "Nutzt die Titelleiste und Fenstersteuerung deines Betriebssystems. Erfordert einen App-Neustart."
+    "message": "Fensterrahmen des Systems verwenden (Neustart der App erforderlich)."
   },
   "app.appearance-settings.native-decorations.title": {
-    "message": "System-Fensterrahmen"
+    "message": "Native Dekorationen"
   },
   "app.appearance-settings.show-play-time.description": {
-    "message": "Zeigt, wie lange du jede einzelne Instanz gespielt hast."
+    "message": "Zeigt an, wie viel Zeit du damit verbracht hast, eine Instanz zu spielen."
   },
   "app.appearance-settings.show-play-time.title": {
     "message": "Spielzeit anzeigen"
   },
   "app.appearance-settings.skip-non-essential-warnings.description": {
-    "message": "Bestätigungen für risikoarme Aktionen überspringen (z. B. doppelte Installationen, normales Löschen, Massen-Updates, Entkoppeln und Reparieren). Warnungen für gefährliche Aktionen werden weiterhin angezeigt."
+    "message": "Bestätigungen mit geringem Risiko, wie z. B. die Installation doppelter Modpacks, das Löschen normaler Inhalte, Massenaktualisierungen, das Aufheben von Verknüpfungen zu Modpacks und Reparaturaufrufe, werden automatisch übersprungen. Gefährliche Warnungen werden weiterhin angezeigt."
   },
   "app.appearance-settings.skip-non-essential-warnings.title": {
     "message": "Unwichtige Warnungen überspringen"
   },
   "app.appearance-settings.toggle-sidebar.description": {
-    "message": "Blendet die rechte Seitenleiste standardmäßig aus und fügt einen Button zum Ein- oder Ausblenden hinzu."
+    "message": "Ermöglicht das Umschalten der Seitenleiste."
   },
   "app.appearance-settings.toggle-sidebar.title": {
-    "message": "Rechte Seitenleiste ausblenden"
+    "message": "Seitenleiste umschalten"
   },
   "app.appearance-settings.unknown-pack-warning.description": {
-    "message": "Zeige eine Sicherheitswarnung an, bevor ein Modrinth-Paket (.mrpack) installiert wird, welches nicht auf Modrinth gehostet wird."
+    "message": "Falls du versuchst, eine Modrinth-Pack-Datei (.mrpack) zu installieren, die nicht auf Modrinth gehostet wird, werden die Risiken vor der Installation bekannt gegeben."
   },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "Warne mich, bevor unbekannte Modpacks installiert werden"
@@ -221,15 +221,6 @@
   "app.auth-servers.unreachable.header": {
     "message": "Authentifizierungsserver sind nicht erreichbar"
   },
-  "app.behavior-settings.confirmations.title": {
-    "message": "Bestätigungen"
-  },
-  "app.behavior-settings.content.title": {
-    "message": "Startseite & Inhalte"
-  },
-  "app.behavior-settings.startup-and-navigation.title": {
-    "message": "Start & Navigation"
-  },
   "app.browse.add-servers-to-instance": {
     "message": "Server zur Instanz hinzufügen"
   },
@@ -251,18 +242,12 @@
   "app.browse.back-to-instance": {
     "message": "Zurück zur Instanz"
   },
-  "app.browse.discover-project-type": {
-    "message": "{projectType} entdecken"
-  },
   "app.browse.discover-servers": {
     "message": "Server entdecken"
   },
   "app.browse.hide-added-servers": {
     "message": "Bereits hinzugefügte Server ausblenden"
   },
-  "app.browse.hide-installed-modpacks": {
-    "message": "Bereits installiert ausblenden"
-  },
   "app.browse.project-type.modpacks": {
     "message": "Modpacks"
   },
@@ -377,18 +362,9 @@
   "app.instance.admonitions.shared-instance.review-header": {
     "message": "Änderungen überprüfen"
   },
-  "app.instance.admonitions.shared-instance.review-update-button": {
-    "message": "Update überprüfen"
-  },
   "app.instance.admonitions.shared-instance.reviewing-button": {
     "message": "Wird überprüft..."
   },
-  "app.instance.admonitions.shared-instance.update-available-body": {
-    "message": "Ein Update ist erforderlich, um {name} zu spielen. Bitte aktualisiere auf die neueste Version, um das Spiel zu starten."
-  },
-  "app.instance.admonitions.shared-instance.update-available-header": {
-    "message": "Ein Update ist verfügbar"
-  },
   "app.instance.confirm-delete.admonition-body": {
     "message": "Alle Daten deiner Instanz werden permanent gelöscht, einschließlich deiner Welten, Konfigurationen und allen installierten Inhalten."
   },
@@ -455,9 +431,6 @@
   "app.instance.share.invite-modal.heading": {
     "message": "{name} teilen"
   },
-  "app.instance.share.invite-modal.user-limit-reached": {
-    "message": "Diese Instanz hat das Nutzerlimit von {limit} erreicht."
-  },
   "app.instance.share.locked.empty-description-prefix": {
     "message": "Du musst dich als"
   },
@@ -476,12 +449,6 @@
   "app.instance.share.locked.wrong-account-heading": {
     "message": "Falsches Konto"
   },
-  "app.instance.share.members.empty": {
-    "message": "Es sind noch keine Benutzer beigetreten"
-  },
-  "app.instance.share.members.no-filter-results": {
-    "message": "Keine Benutzer passen zu deinen Filtern."
-  },
   "app.instance.share.remove-user-modal.effect-access": {
     "message": "Diese Person wird für diese geteilte Instanz keine Updates mehr erhalten"
   },
@@ -512,12 +479,6 @@
   "app.instance.share.sign-in.button": {
     "message": "Anmelden"
   },
-  "app.instance.share.unable-to-connect.description": {
-    "message": "Der Dienst für geteilte Instanzen ist derzeit nicht erreichbar; bitte versuche es später erneut"
-  },
-  "app.instance.share.unable-to-connect.heading": {
-    "message": "Verbindung nicht möglich"
-  },
   "app.instance.share.unlink.body": {
     "message": "Du musst die Verknüpfung zu diesem Modpack trennen, um deine Instanz zu teilen"
   },
@@ -590,9 +551,6 @@
   "app.instance.worlds.no-worlds-heading": {
     "message": "Keine Server oder Welten hinzugefügt"
   },
-  "app.instance.worlds.refreshing": {
-    "message": "Wird aktualisiert..."
-  },
   "app.instance.worlds.remove-server-modal.remove-button": {
     "message": "Server entfernen"
   },
@@ -608,60 +566,12 @@
   "app.instance.worlds.search-worlds-placeholder": {
     "message": "Durchsuche {count} Welten..."
   },
-  "app.java-detection.cancel": {
-    "message": "Abbrechen"
-  },
-  "app.java-detection.columns.actions": {
-    "message": "Aktionen"
-  },
-  "app.java-detection.columns.path": {
-    "message": "Pfad"
-  },
-  "app.java-detection.columns.version": {
-    "message": "Version"
-  },
-  "app.java-detection.no-installations-found": {
-    "message": "Keine Java Installationen gefunden."
-  },
-  "app.java-detection.select": {
-    "message": "Auswählen"
-  },
-  "app.java-detection.selected": {
-    "message": "Ausgewählt"
-  },
-  "app.java-detection.title": {
-    "message": "Java-Installation auswählen"
-  },
-  "app.java-selector.already-installed": {
-    "message": "Bereits installiert"
-  },
-  "app.java-selector.browse": {
-    "message": "Durchsuchen"
-  },
-  "app.java-selector.detect": {
-    "message": "Erkennen"
-  },
-  "app.java-selector.install-recommended": {
-    "message": "Empfohlenes installieren"
-  },
-  "app.java-selector.installing": {
-    "message": "Installiere..."
-  },
-  "app.java-selector.path.placeholder": {
-    "message": "/path/to/java"
-  },
-  "app.java-selector.test-installation": {
-    "message": "Java-Installation testen"
-  },
   "app.modal.install-to-play.additional-context": {
     "message": "Zusätzlicher Kontext"
   },
   "app.modal.install-to-play.additional-context-placeholder": {
     "message": "Füge gegebenenfalls relevante Links und Bilder hinzu"
   },
-  "app.modal.install-to-play.block-user": {
-    "message": "Benutzer blockieren"
-  },
   "app.modal.install-to-play.content-you-are-reporting": {
     "message": "Die Instanz, die du meldest"
   },
@@ -683,9 +593,6 @@
   "app.modal.install-to-play.invite-warning": {
     "message": "Diese Einladung wurde von einem anderen Modrinth-Nutzer erstellt, nicht von Modrinth. Nimm nur Einladungen von Personen an, denen du vertraust."
   },
-  "app.modal.install-to-play.invite-warning-with-creator": {
-    "message": "Diese Einladung wurde von <creator>{username}</creator> erstellt, nicht von Modrinth. Akzeptierte nur Einladungen von Leuten, denen du vertraust."
-  },
   "app.modal.install-to-play.mod-count": {
     "message": "{count, plural, one {# Mod} other {# Mods}}"
   },
@@ -743,9 +650,6 @@
   "app.modal.install-to-play.unrecognized-files": {
     "message": "Nicht erkannte Dateien"
   },
-  "app.modal.install-to-play.user-blocked": {
-    "message": "Benutzer blockiert"
-  },
   "app.modal.install-to-play.view-contents": {
     "message": "Inhalte ansehen"
   },
@@ -773,36 +677,6 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "Zum Spielen von {name} ist eine Aktualisierung erforderlich. Bitte aktualisiere auf die neueste Version, um das Spiel zu starten."
   },
-  "app.nav.create-new-instance": {
-    "message": "Neue Instanz erstellen"
-  },
-  "app.nav.home": {
-    "message": "Startseite"
-  },
-  "app.nav.library": {
-    "message": "Bibliothek"
-  },
-  "app.nav.modrinth-account": {
-    "message": "Modrinth-Konto"
-  },
-  "app.nav.modrinth-hosting": {
-    "message": "Modrinth Hosting"
-  },
-  "app.nav.sign-in-to-modrinth-account": {
-    "message": "Bei einem Modrinth-Konto anmelden"
-  },
-  "app.nav.signed-in-as": {
-    "message": "Angemeldet als <user>{username}</user>"
-  },
-  "app.nav.upgrade-to-modrinth-plus": {
-    "message": "Auf Modrinth+ upgraden"
-  },
-  "app.news.title": {
-    "message": "Neuigkeiten"
-  },
-  "app.news.view-all": {
-    "message": "Alle Neuigkeiten anzeigen"
-  },
   "app.project.install-button.already-installed": {
     "message": "Dieses Projekt ist bereits installiert"
   },
@@ -812,9 +686,6 @@
   "app.project.install-context.back-to-browse": {
     "message": "Zurück zum Entdecken"
   },
-  "app.project.install-context.back-to-instance": {
-    "message": "Zurück zur Instanz"
-  },
   "app.project.version.all-versions": {
     "message": "Alle Versionen"
   },
@@ -827,188 +698,20 @@
   "app.project.versions.already-installed": {
     "message": "Bereits installiert"
   },
-  "app.quick-instance-switcher.drag-show-tooltip": {
-    "message": "Ziehen, um letzte Instanzen anzuzeigen"
-  },
-  "app.quick-instance-switcher.drag-tooltip": {
-    "message": "Ziehen zur Größenänderung"
-  },
-  "app.restarting": {
-    "message": "Wird neu gestartet..."
-  },
-  "app.settings.app-version": {
-    "message": "Modrinth App {version}"
-  },
-  "app.settings.default-instance-options.environment-variables.description": {
-    "message": "Umgebungsvariablen, die beim Starten einer Instanz gesetzt werden."
-  },
-  "app.settings.default-instance-options.environment-variables.placeholder": {
-    "message": "Umgebungsvariablen eingeben..."
-  },
-  "app.settings.default-instance-options.environment-variables.title": {
-    "message": "Umgebungsvariablen"
-  },
-  "app.settings.default-instance-options.fullscreen.description": {
-    "message": "Startet Instanzen im Vollbildmodus durch Aktualisieren ihrer options.txt-Datei."
-  },
-  "app.settings.default-instance-options.fullscreen.title": {
-    "message": "Vollbild"
-  },
-  "app.settings.default-instance-options.height.description": {
-    "message": "Die Höhe des Spielfensters beim Starten"
-  },
-  "app.settings.default-instance-options.height.placeholder": {
-    "message": "Höhe eingeben..."
-  },
-  "app.settings.default-instance-options.height.title": {
-    "message": "Höhe"
-  },
-  "app.settings.default-instance-options.java-arguments.description": {
-    "message": "Argumente, die beim Starten einer Instanz an Java übergeben werden."
-  },
-  "app.settings.default-instance-options.java-arguments.placeholder": {
-    "message": "Java-Argumente eingeben..."
-  },
-  "app.settings.default-instance-options.java-arguments.title": {
-    "message": "Java-Argumente"
-  },
-  "app.settings.default-instance-options.memory-allocation.description": {
-    "message": "Maximal verfügbarer Arbeitsspeicher zu jeder Instanz."
-  },
-  "app.settings.default-instance-options.memory-allocation.title": {
-    "message": "Arbeitsspeicherzuweisung"
-  },
-  "app.settings.default-instance-options.post-exit-hook.description": {
-    "message": "Wird nach dem Beenden des Spiels ausgeführt."
-  },
-  "app.settings.default-instance-options.post-exit-hook.placeholder": {
-    "message": "Nach Spielbeendigung auszuführender Befehl eingeben..."
-  },
-  "app.settings.default-instance-options.post-exit-hook.title": {
-    "message": "Aktion nach Programmende"
-  },
-  "app.settings.default-instance-options.pre-launch-hook.description": {
-    "message": "Läuft bevor die Instanz startet."
-  },
-  "app.settings.default-instance-options.pre-launch-hook.placeholder": {
-    "message": "Vor Spielstart auszuführenden Befehl eingeben..."
-  },
-  "app.settings.default-instance-options.pre-launch-hook.title": {
-    "message": "Startaktion"
-  },
-  "app.settings.default-instance-options.width.description": {
-    "message": "Die Breite des Spielfensters beim Start."
-  },
-  "app.settings.default-instance-options.width.placeholder": {
-    "message": "Breite eingeben..."
-  },
-  "app.settings.default-instance-options.width.title": {
-    "message": "Breite"
-  },
-  "app.settings.default-instance-options.wrapper-hook.description": {
-    "message": "Wrapper-Befehl für den Minecraft-Startprozess."
-  },
-  "app.settings.default-instance-options.wrapper-hook.placeholder": {
-    "message": "Wrapperbefehl eingeben..."
-  },
-  "app.settings.default-instance-options.wrapper-hook.title": {
-    "message": "Wrapper-Hook"
-  },
-  "app.settings.developer-mode-button.label": {
-    "message": "Entwicklermodus umschalten"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Entwicklermodus aktiviert."
   },
   "app.settings.downloading": {
     "message": "Lade v{version} herunter"
   },
-  "app.settings.java-installations.location.title": {
-    "message": "Java {version, number} Installation"
-  },
-  "app.settings.operating-system.macos": {
-    "message": "macOS"
-  },
   "app.settings.privacy.ads-consent.intro": {
     "message": "Werbung ermöglicht Modrinth und finanziert die Auszahlungen an die Ersteller. Unsere Partner speichern möglicherweise Cookies in der App oder greifen auf diese zu, um Werbung zu personalisieren und die Leistung zu messen. Du kannst dies unten deaktivieren oder deine Einstellungen verwalten."
   },
-  "app.settings.privacy.discord-rich-presence.description": {
-    "message": "Zeige Modrinth App als deine aktuelle Aktivität auf Discord. Dies betrifft nicht Rich Presence die von Mods zu Instanzen hinzugefügt wird. Benötigt einen Neustart der App."
-  },
-  "app.settings.privacy.discord-rich-presence.title": {
-    "message": "Discord Rich Presence"
-  },
-  "app.settings.privacy.telemetry.description": {
-    "message": "Modrinth sammelt anonymisierte Analyse- und Nutzungsdaten, um unsere Nutzererfahrung zu verbessern und deine Erfahrung anzupassen. Wenn du diese Option deaktivierst, entscheidest du dich dagegen und deine Daten werden nicht mehr gesammelt."
-  },
-  "app.settings.privacy.telemetry.title": {
-    "message": "Telemetrie"
-  },
-  "app.settings.resource-management.always-show-copy-details.description": {
-    "message": "Zeigt die Aktion \"Details kopieren\" an, während eine Installation in der Warteschlange steht oder ausgeführt wird. Bei fehlgeschlagenen oder abgebrochenen Installationen ist sie immer verfügbar."
-  },
-  "app.settings.resource-management.always-show-copy-details.title": {
-    "message": "Immer Kopierdetails anzeigen"
-  },
-  "app.settings.resource-management.app-cache.confirm.description": {
-    "message": "Die App könnte langsamer laden, bis der Cache neu aufgebaut wurde."
-  },
-  "app.settings.resource-management.app-cache.confirm.title": {
-    "message": "App-Cache leeren?"
-  },
-  "app.settings.resource-management.app-cache.description": {
-    "message": "Gespeicherte Cache-Daten löschen und sie neu von Modrinth herunterladen. Die App könnte langsamer laden, bis der Cache neu aufgebaut wurde."
-  },
-  "app.settings.resource-management.app-cache.purge": {
-    "message": "Cache leeren"
-  },
-  "app.settings.resource-management.app-cache.title": {
-    "message": "App-Cache"
-  },
-  "app.settings.resource-management.app-database-backups.description": {
-    "message": "Backups von wichtigen App-Daten werden hier gespeichert, falls du sie später wiederherstellen musst."
-  },
-  "app.settings.resource-management.app-database-backups.open-folder": {
-    "message": "Backups Ordner öffnen"
-  },
-  "app.settings.resource-management.app-database-backups.title": {
-    "message": "App-Daten Backups"
-  },
-  "app.settings.resource-management.app-directory.browse": {
-    "message": "Nach einem App-Verzeichnis suchen"
-  },
-  "app.settings.resource-management.app-directory.description": {
-    "message": "Wo Modrinth App Instanzen und andere Dateien speichert. Änderungen werden nach dem Neustarten der App angewendet."
-  },
-  "app.settings.resource-management.app-directory.select": {
-    "message": "Neues App-Verzeichnis auswählen"
-  },
-  "app.settings.resource-management.app-directory.title": {
-    "message": "App-Verzeichnis"
-  },
-  "app.settings.resource-management.maximum-concurrent-downloads.description": {
-    "message": "Anzahl der Dateien, die die App auf einmal herunterladen kann. Senke dies, wenn downloads auf deiner Verbindung unzuverlässig sind. Benötigt einen App-Neustart."
-  },
-  "app.settings.resource-management.maximum-concurrent-downloads.title": {
-    "message": "Maximale gleichzeitige Downloads"
-  },
-  "app.settings.resource-management.maximum-concurrent-writes.description": {
-    "message": "Wie viele Dateien die App auf einmal auf die Festplatte schreiben kann. Senke dies, wenn du oft I/O Fehler bekommst. Benötigt einen App-Neustart."
-  },
-  "app.settings.resource-management.maximum-concurrent-writes.title": {
-    "message": "Maximale gleichzeitige Schreibvorgänge"
-  },
-  "app.settings.sidebar.label.instances": {
-    "message": "Instanzen"
-  },
   "app.settings.tabs.appearance": {
     "message": "Erscheinungsbild"
   },
-  "app.settings.tabs.behavior": {
-    "message": "Verhalten"
-  },
   "app.settings.tabs.default-instance-options": {
-    "message": "Standard-Spieloptionen"
+    "message": "Standard Instanz-Einstellungen"
   },
   "app.settings.tabs.java-installations": {
     "message": "Java-Installationen"
@@ -1022,9 +725,6 @@
   "app.settings.tabs.resource-management": {
     "message": "Ressourcenmanagement"
   },
-  "app.sidebar.playing-as": {
-    "message": "Wird gespielt als"
-  },
   "app.skins.add-button": {
     "message": "Skin hinzufügen"
   },
@@ -1184,21 +884,6 @@
   "app.skins.toggle-ears-features-on": {
     "message": "Aktivieren"
   },
-  "app.survey.body": {
-    "message": "Könntest du ein paar Fragen über deine Erfahrung mit Modrinth App beantworten?"
-  },
-  "app.survey.footer": {
-    "message": "Das Feedback geht direkt an das Modrinth-Team und wird helfen, zukünftige Updates zu gestalten!"
-  },
-  "app.survey.no-thanks": {
-    "message": "Nein danke"
-  },
-  "app.survey.take-survey": {
-    "message": "An Umfrage teilnehmen"
-  },
-  "app.survey.title": {
-    "message": "Hey, Modrinth Nutzer!"
-  },
   "app.update-popup.body.download-complete": {
     "message": "Modrinth App v{version} wurde heruntergeladen. Jetzt neu laden, um sofort zu aktualisieren, oder beim Schließen der Modrinth-App automatisch aktualisieren."
   },
@@ -1229,9 +914,6 @@
   "app.update.complete-toast.title": {
     "message": "Version {version} wurde erfolgreich installiert!"
   },
-  "app.user.project.install-to-instance": {
-    "message": "In Instanz installieren"
-  },
   "app.world.server-modal.placeholder-address": {
     "message": "example.modrinth.gg"
   },
@@ -1478,45 +1160,6 @@
   "instance.server-modal.resource-pack": {
     "message": "Ressourcenpaket"
   },
-  "instance.settings.sharing.active-invites.actions": {
-    "message": "Aktionen"
-  },
-  "instance.settings.sharing.active-invites.code": {
-    "message": "Einladungslink"
-  },
-  "instance.settings.sharing.active-invites.description": {
-    "message": "Jeder, der einen dieser Einladungslinks hat, kann beitreten, solange der Link aktiv ist."
-  },
-  "instance.settings.sharing.active-invites.empty": {
-    "message": "Es gibt keine aktiven Einladungen."
-  },
-  "instance.settings.sharing.active-invites.expires": {
-    "message": "Läuft ab"
-  },
-  "instance.settings.sharing.active-invites.revoke": {
-    "message": "Einladung zurückziehen"
-  },
-  "instance.settings.sharing.active-invites.revoke-with-code": {
-    "message": "Einladung {code} zurückziehen"
-  },
-  "instance.settings.sharing.active-invites.title": {
-    "message": "Aktive Einladungen"
-  },
-  "instance.settings.sharing.active-invites.uses": {
-    "message": "Nutzungen"
-  },
-  "instance.settings.sharing.revoke-invite.admonition-body": {
-    "message": "Der Einladungslink <monospace>{code}</monospace> wird sofort aufhören zu funktionieren. Nutzer, die bereits beigetreten sind, bleibt der Zugang gewährt."
-  },
-  "instance.settings.sharing.revoke-invite.admonition-header": {
-    "message": "Diese Aktion kann nicht rückgängig gemacht werden"
-  },
-  "instance.settings.sharing.revoke-invite.confirm": {
-    "message": "Einladung zurückziehen"
-  },
-  "instance.settings.sharing.revoke-invite.header": {
-    "message": "Einladung zurückziehen"
-  },
   "instance.settings.tabs.general": {
     "message": "Allgemein"
   },
@@ -1625,27 +1268,6 @@
   "instance.settings.tabs.hooks.title": {
     "message": "Start-Hooks"
   },
-  "instance.settings.tabs.hooks.variables.description": {
-    "message": "Hooks werden im Arbeitsverzeichnis der Instanz mit den folgenden Variablen ausgeführt:"
-  },
-  "instance.settings.tabs.hooks.variables.inst-dir.description": {
-    "message": "$INST_DIR: Der absolute Pfad zum Ordner der Instanz"
-  },
-  "instance.settings.tabs.hooks.variables.inst-id.description": {
-    "message": "$INST_ID: Der Name des Ordners der Instanz"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java-args.description": {
-    "message": "$INST_JAVA_ARGS: Die JVM-Argumente, die dem Spiel zur Verfügung gestellt werden"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java.description": {
-    "message": "$INST_JAVA: Der absolute Pfad zur Java-Binärdatei"
-  },
-  "instance.settings.tabs.hooks.variables.inst-mc-dir.description": {
-    "message": "$INST_MC_DIR: Ein Alias für $INST_DIR"
-  },
-  "instance.settings.tabs.hooks.variables.inst-name.description": {
-    "message": "$INST_NAME: Der Name der Instanz"
-  },
   "instance.settings.tabs.hooks.wrapper": {
     "message": "Wrapper"
   },
@@ -1739,12 +1361,6 @@
   "instance.shared-instance.error.title": {
     "message": "Etwas ist schiefgelaufen"
   },
-  "instance.shared-instance.network-error.text": {
-    "message": "Verbindung zur Shared-Instances-API nicht möglich"
-  },
-  "instance.shared-instance.network-error.title": {
-    "message": "Netzwerkfehler"
-  },
   "instance.shared-instance.owner-tooltip": {
     "message": "Der Inhalt dieser Instanz wird mit anderen Benutzern geteilt."
   },
@@ -1880,6 +1496,9 @@
   "modal.modrinth-account-required.browser-description": {
     "message": "Ein neuer Tab zum Anmelden wurde geöffnet. Schließe die Anmeldung dort ab und kehren anschließend zur App zurück."
   },
+  "modal.modrinth-account-required.cancel-button": {
+    "message": "Abbrechen"
+  },
   "modal.modrinth-account-required.continue-in-browser-heading": {
     "message": "Im Browser fortfahren"
   },
@@ -1933,11 +1552,5 @@
   },
   "search.filter.locked.server-loader.title": {
     "message": "Loader vom Server vorgegeben"
-  },
-  "settings.sidebar.label.account": {
-    "message": "Konto"
-  },
-  "settings.sidebar.label.display": {
-    "message": "Anzeige"
   }
 }

apps/app-frontend/src/locales/en-US/index.json

@@ -8,9 +8,6 @@
   "app.action-bar.downloads": {
     "message": "Downloads"
   },
-  "app.action-bar.hide-downloads": {
-    "message": "Hide active downloads"
-  },
   "app.action-bar.hide-more-running-instances": {
     "message": "Hide more running instances"
   },
@@ -113,9 +110,6 @@
   "app.action-bar.reload-to-update": {
     "message": "Reload to update"
   },
-  "app.action-bar.show-downloads": {
-    "message": "Show active downloads"
-  },
   "app.action-bar.show-more-running-instances": {
     "message": "Show more running instances"
   },
@@ -596,9 +590,6 @@
   "app.instance.worlds.no-worlds-heading": {
     "message": "No servers or worlds added"
   },
-  "app.instance.worlds.refreshing": {
-    "message": "Refreshing..."
-  },
   "app.instance.worlds.remove-server-modal.remove-button": {
     "message": "Remove server"
   },
@@ -729,7 +720,7 @@
     "message": "For support requests, contact our <support-link>support team</support-link>. For bug reports, open a <github-link>GitHub issue</github-link>."
   },
   "app.modal.install-to-play.reviewed-files": {
-    "message": "Files that aren't published to Modrinth aren't reviewed."
+    "message": "A file is only reviewed if it’s published to Modrinth, regardless of its file format (including .mrpack)."
   },
   "app.modal.install-to-play.shared-instance": {
     "message": "Shared instance"
@@ -1235,9 +1226,6 @@
   "app.update.complete-toast.title": {
     "message": "Version {version} was successfully installed!"
   },
-  "app.user.project.install-to-instance": {
-    "message": "Install to instance"
-  },
   "app.world.server-modal.placeholder-address": {
     "message": "example.modrinth.gg"
   },
@@ -1631,27 +1619,6 @@
   "instance.settings.tabs.hooks.title": {
     "message": "Game launch hooks"
   },
-  "instance.settings.tabs.hooks.variables.description": {
-    "message": "Hooks run in the working directory of the instance, with the following variables:"
-  },
-  "instance.settings.tabs.hooks.variables.inst-dir.description": {
-    "message": "$INST_DIR: The absolute path to the instance's folder"
-  },
-  "instance.settings.tabs.hooks.variables.inst-id.description": {
-    "message": "$INST_ID: The name of the instance's folder"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java-args.description": {
-    "message": "$INST_JAVA_ARGS: The JVM Arguments provided to the game"
-  },
-  "instance.settings.tabs.hooks.variables.inst-java.description": {
-    "message": "$INST_JAVA: The absolute path to the java binary"
-  },
-  "instance.settings.tabs.hooks.variables.inst-mc-dir.description": {
-    "message": "$INST_MC_DIR: An alias for $INST_DIR"
-  },
-  "instance.settings.tabs.hooks.variables.inst-name.description": {
-    "message": "$INST_NAME: The name of the instance"
-  },
   "instance.settings.tabs.hooks.wrapper": {
     "message": "Wrapper"
   },
@@ -1886,6 +1853,9 @@
   "modal.modrinth-account-required.browser-description": {
     "message": "A new tab opened to sign in. Complete the sign in there, then return to the app."
   },
+  "modal.modrinth-account-required.cancel-button": {
+    "message": "Cancel"
+  },
   "modal.modrinth-account-required.continue-in-browser-heading": {
     "message": "Continue in your browser"
   },

apps/app-frontend/src/locales/es-ES/index.json

@@ -11,12 +11,6 @@
   "app.action-bar.hide-more-running-instances": {
     "message": "Ocultar más instancias en ejecución"
   },
-  "app.action-bar.install.copied-details": {
-    "message": "Copiado"
-  },
-  "app.action-bar.install.copy-details": {
-    "message": "Copiar detalles"
-  },
   "app.action-bar.install.dismiss": {
     "message": "Descartar"
   },
@@ -26,36 +20,6 @@
   "app.action-bar.install.retry": {
     "message": "Reintentar"
   },
-  "app.action-bar.install.summary.app-closing": {
-    "message": "Cancelado por cierre de la aplicación"
-  },
-  "app.action-bar.install.summary.bad-modpack-file": {
-    "message": "No se pudo leer el modpack"
-  },
-  "app.action-bar.install.summary.canceled": {
-    "message": "Cancelado"
-  },
-  "app.action-bar.install.summary.content-download-failed": {
-    "message": "No se pudieron descargar los archivos"
-  },
-  "app.action-bar.install.summary.corrupt-download": {
-    "message": "El archivo descargado está corrupto"
-  },
-  "app.action-bar.install.summary.could-not-save-files": {
-    "message": "No se pudieron guardar los archivos"
-  },
-  "app.action-bar.install.summary.download-failed": {
-    "message": "La descarga no pudo terminar"
-  },
-  "app.action-bar.install.summary.instance-not-found": {
-    "message": "La instancia no se pudo encontrar"
-  },
-  "app.action-bar.install.summary.invalid-file-path": {
-    "message": "La ruta de archivo no es válida"
-  },
-  "app.action-bar.install.summary.invalid-modpack": {
-    "message": "Los datos del modpack no son válidos"
-  },
   "app.action-bar.install.unknown-instance": {
     "message": "Instancia desconocida"
   },
@@ -95,12 +59,21 @@
   "app.action-bar.view-logs": {
     "message": "Ver registros"
   },
+  "app.appearance-settings.advanced-rendering.description": {
+    "message": "Habilita el renderizado avanzado, como los efectos de desenfoque, que pueden causar problemas de rendimiento sin renderizado acelerado por hardware."
+  },
   "app.appearance-settings.advanced-rendering.title": {
     "message": "Renderizado avanzado"
   },
+  "app.appearance-settings.color-theme.description": {
+    "message": "Selecciona tu tema de color preferido para la Modrinth App."
+  },
   "app.appearance-settings.color-theme.title": {
     "message": "Tema de color"
   },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "Cambia la página en la que el launcher inicia."
+  },
   "app.appearance-settings.default-landing-page.home": {
     "message": "Inicio"
   },
@@ -110,18 +83,51 @@
   "app.appearance-settings.default-landing-page.title": {
     "message": "Página de inicio predeterminada"
   },
+  "app.appearance-settings.hide-nametag.description": {
+    "message": "Desactiva la etiqueta arriba de tu personaje en la página de skins."
+  },
   "app.appearance-settings.hide-nametag.title": {
     "message": "Ocultar etiqueta de nombre"
   },
+  "app.appearance-settings.jump-back-into-worlds.description": {
+    "message": "Incluye los mundos recientes en la sección \"Volver a jugar\" de la página de inicio."
+  },
   "app.appearance-settings.jump-back-into-worlds.title": {
     "message": "Volver a jugar en tus mundos"
   },
+  "app.appearance-settings.minimize-launcher.description": {
+    "message": "Minimiza el lanzador cuando se inicia un proceso de Minecraft."
+  },
+  "app.appearance-settings.minimize-launcher.title": {
+    "message": "Minimizar lanzador"
+  },
+  "app.appearance-settings.native-decorations.description": {
+    "message": "Usa el marco de ventana del sistema (requiere reiniciar la aplicación)."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "message": "Decoraciones nativas"
+  },
+  "app.appearance-settings.show-play-time.description": {
+    "message": "Muestra cuánto tiempo has estado jugando en una instancia."
+  },
   "app.appearance-settings.show-play-time.title": {
     "message": "Mostrar tiempo de juego"
   },
+  "app.appearance-settings.skip-non-essential-warnings.description": {
+    "message": "Automáticamente omite confirmaciones de bajo riesgo como modpacks duplicados, eliminación de contenido normal, actualizaciones masivas, desvinculando modpacks, y mensajes de reparación. Advertencias importantes seguirán siendo mostradas."
+  },
   "app.appearance-settings.skip-non-essential-warnings.title": {
     "message": "Omitir advertencias no esenciales"
   },
+  "app.appearance-settings.toggle-sidebar.description": {
+    "message": "Activa la posibilidad de alternar la barra lateral."
+  },
+  "app.appearance-settings.toggle-sidebar.title": {
+    "message": "Alternar barra lateral"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "message": "Si intentas instalar un archivo de paquete de Modrinth (.mrpack) que no esté alojado en Modrinth, debes comprender los riesgos que esto conlleva antes de instalarlo."
+  },
   "app.appearance-settings.unknown-pack-warning.title": {
     "message": "Adviérteme antes de instalarme modpacks desconocidos"
   },
@@ -177,7 +183,7 @@
     "message": "Exportar modpack"
   },
   "app.export-modal.modpack-name-label": {
-    "message": "Nombre del Conjunto de modificadores"
+    "message": "Nombre del modpack"
   },
   "app.export-modal.modpack-name-placeholder": {
     "message": "Nombre del modpack"
@@ -290,6 +296,9 @@
   "app.settings.tabs.appearance": {
     "message": "Apariencia"
   },
+  "app.settings.tabs.default-instance-options": {
+    "message": "Opciones predeterminadas de la instancia"
+  },
   "app.settings.tabs.java-installations": {
     "message": "Instalaciones de Java"
   },