fix: intercom bubble on console fullscreen

* feat: date picker component

* fix: month and year input padding

* fix: chevron padding issue

* feat: more padding/style fixes

* feat: implement header disabled state for min/max dates

* feat: implement dragging on start/end dates to move dates

* feat: improve selected range styles

* fix: type error

* fix: time input problems

* feat: implement 2 calendar view

* fix: white bg when dragging on a normal day

* fix: selected date background incorrectly applied

* prepr

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

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

@@ -1,156 +1,18 @@
-# Adding a New API Module
+---
+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>
+---
 
-How to add a new API endpoint module to `packages/api-client`.
+Refer to the standard: @standards/frontend/ADDING_API_MODULES.md
 
 ## Steps
 
-### 1. Define types in the module's `types.ts`
-
-Types must match 1:1 with the backend API response. Do not reshape, rename, or omit fields.
-
-Add to an existing namespace or create a new one:
-
-```ts
-// modules/labrinth/types.ts (existing namespace)
-export namespace Labrinth {
-	export namespace MyDomain {
-		export namespace v3 {
-			export type Thing = {
-				id: string
-				name: string
-				created: string
-				// ... matches API response exactly
-			}
-
-			export type CreateThingRequest = {
-				name: string
-			}
-		}
-	}
-}
-```
-
-For a new API service, create `modules/<service>/types.ts` with a new top-level namespace and re-export it from `modules/types.ts`.
-
-### 2. Create the module class
-
-Create `modules/<api>/<domain>/v<N>.ts`:
-
-```ts
-// modules/labrinth/things/v3.ts
-import { AbstractModule } from '../../../core/abstract-module'
-import type { Labrinth } from '../types'
-
-export class LabrinthThingsV3Module extends AbstractModule {
-	public getModuleID(): string {
-		return 'labrinth_things_v3'
-	}
-
-	public async get(id: string): Promise<Labrinth.MyDomain.v3.Thing> {
-		return this.client.request<Labrinth.MyDomain.v3.Thing>(`/thing/${id}`, {
-			api: 'labrinth',
-			version: 3,
-			method: 'GET',
-		})
-	}
-
-	public async create(data: Labrinth.MyDomain.v3.CreateThingRequest): Promise<Labrinth.MyDomain.v3.Thing> {
-		return this.client.request<Labrinth.MyDomain.v3.Thing>(`/thing`, {
-			api: 'labrinth',
-			version: 3,
-			method: 'POST',
-			body: data,
-		})
-	}
-
-	public async delete(id: string): Promise<void> {
-		return this.client.request(`/thing/${id}`, {
-			api: 'labrinth',
-			version: 3,
-			method: 'DELETE',
-		})
-	}
-}
-```
-
-#### Request options
-
-| Field | Values | Purpose |
-|-------|--------|---------|
-| `api` | `'labrinth'`, `'archon'`, or a full URL | Which base URL to use |
-| `version` | `2`, `3`, `'internal'`, `'modrinth/v0'`, etc. | URL version segment |
-| `method` | `'GET'`, `'POST'`, `'PUT'`, `'PATCH'`, `'DELETE'` | HTTP method |
-| `body` | object | JSON request body |
-| `params` | `Record<string, string>` | Query parameters |
-| `skipAuth` | `boolean` | Skip auth feature for this request |
-| `useNodeAuth` | `boolean` | Use node-level auth (kyros) |
-| `timeout` | `number` | Request timeout in ms |
-| `retry` | `boolean \| number` | Override retry behavior |
-
-#### For uploads
-
-Return an `UploadHandle` instead of a `Promise`:
-
-```ts
-public uploadThing(id: string, file: File): UploadHandle<void> {
-	return this.client.upload<void>(`/thing/${id}/file`, {
-		api: 'labrinth',
-		version: 3,
-		file,
-	})
-}
-
-// Or with FormData for multipart:
-public createWithFiles(data: CreateRequest, files: File[]): UploadHandle<Thing> {
-	const formData = new FormData()
-	formData.append('data', JSON.stringify(data))
-	files.forEach((f, i) => formData.append(`file-${i}`, f, f.name))
-
-	return this.client.upload<Thing>(`/thing`, {
-		api: 'labrinth',
-		version: 3,
-		formData,
-		timeout: 60 * 5 * 1000,  // longer timeout for uploads
-	})
-}
-```
-
-### 3. Register in the MODULE_REGISTRY
-
-Add to `modules/index.ts`:
-
-```ts
-import { LabrinthThingsV3Module } from './labrinth/things/v3'
-
-export const MODULE_REGISTRY = {
-	// ... existing modules
-	labrinth_things_v3: LabrinthThingsV3Module,
-} as const
-```
-
-The naming convention is `<api>_<domain>_<version>`. This flat key gets transformed into nested access: `client.labrinth.things_v3`.
-
-### 4. Export types
-
-If you added to an existing namespace, types are already re-exported. If you created a new `types.ts`, add it to `modules/types.ts`:
-
-```ts
-export * from './<service>/types'
-```
-
-## Naming Conventions
-
-| Convention | Example |
-|-----------|---------|
-| Module class | `LabrinthThingsV3Module` — `{Api}{Domain}V{N}Module` |
-| Module ID | `labrinth_things_v3` — `{api}_{domain}_v{n}` |
-| Type namespace | `Labrinth.MyDomain.v3.Thing` |
-| File path | `modules/labrinth/things/v3.ts` |
-
-## Key Files
-
-- `src/core/abstract-module.ts` — base class all modules extend
-- `src/core/abstract-client.ts` — `request()` and `upload()` methods
-- `src/modules/index.ts` — `MODULE_REGISTRY` and `buildModuleStructure()`
-- `src/modules/<api>/types.ts` — type definitions per API
-- `src/types/upload.ts` — `UploadHandle`, `UploadProgress`, `UploadRequestOptions`
+1. **Read the OpenAPI schema** at `$ARGUMENTS` — identify the endpoints, request/response shapes, and path parameters.
+2. **Read the standard above** for naming conventions, type rules, and the module registration pattern.
+3. **Determine the service and version** — the URL path prefix tells you which service directory and version namespace to use (e.g. `/v3/projects` → `labrinth/v3/`).
+4. **Define types in `types.ts`** — types must match the API response 1:1. Use the OpenAPI schema as the source of truth. Do not reshape or rename fields.
+5. **Create the module class** — extend `BaseModule`, implement each endpoint as a method. Use the correct HTTP verb and request options pattern from the standard.
+6. **Register in `MODULE_REGISTRY`** — add the module entry so it's auto-instantiated on the client.
+7. **Export types** from the service's barrel `index.ts`.
+8. **Verify** — check that the module compiles and the types are accessible from `@modrinth/api-client`.

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

@@ -1,144 +1,26 @@
-# Cross-Platform Page System
+---
+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>
+---
 
-When a page needs to exist in both the Modrinth App (`apps/app-frontend`) and the Modrinth Website (`apps/frontend`), use the cross-platform page system.
+Refer to the standards: @standards/frontend/CROSS_PLATFORM_PAGES.md and @standards/frontend/DEPENDENCY_INJECTION.md
 
-## How It Works
+## Steps
 
-1. **Pages live as Vue SFCs in `packages/ui`** — either in `src/pages/` or `src/layout/` (if `src/pages/` doesn't exist, it's been renamed to `src/layout/`).
-2. **Platform-dependent data flows via DI** — the app uses Tauri `invoke` commands, the website uses `api-client` or the legacy `useBaseFetch` composable. The shared page never knows which. See the `dependency-injection` skill for full DI docs.
-3. **Non-platform-dependent data flows via props** — if data doesn't change based on _how_ it's fetched, just pass it as a prop.
-
-## Example: Content Page
-
-`ContentPageLayout` demonstrates the full pattern.
-
-### 1. Define a DI contract in `packages/ui/src/providers/`
-
-The provider interface abstracts all platform-specific operations:
-
-```ts
-// packages/ui/src/providers/content-manager.ts
-export interface ContentManagerContext {
-	items: Ref<ContentItem[]>
-	loading: Ref<boolean>
-	error: Ref<Error | null>
-	contentTypeLabel: Ref<string>
-
-	// These are the platform-abstracted operations:
-	// App uses invoke(), website uses api-client
-	toggleEnabled: (item: ContentItem) => Promise<void>
-	deleteItem: (item: ContentItem) => Promise<void>
-	refresh: () => Promise<void>
-	browse: () => void
-	uploadFiles: () => void
-
-	// Optional capabilities — not every platform supports everything
-	hasUpdateSupport: boolean
-	updateItem?: (item: ContentItem) => Promise<void>
-	bulkUpdateItem?: (items: ContentItem[]) => Promise<void>
-
-	mapToTableItem: (item: ContentItem) => ContentCardTableItem
-}
-
-export const [injectContentManager, provideContentManager] =
-	createContext<ContentManagerContext>('ContentManager')
-```
-
-### 2. Build the shared page in `packages/ui`
-
-The page component injects the context and handles all UI logic (search, filtering, selection, bulk operations, empty states, modals) without knowing the platform:
-
-```vue
-<!-- packages/ui/src/components/instances/ContentPageLayout.vue -->
-<script setup lang="ts">
-import { injectContentManager } from '../../providers/content-manager'
-
-const { items, loading, toggleEnabled, deleteItem, refresh, mapToTableItem } =
-	injectContentManager()
-
-// All UI logic lives here — search, filters, sort, bulk ops, etc.
-</script>
-
-<template>
-	<ContentCardTable :items="filteredItems" />
-</template>
-```
-
-### 3. Each platform provides its implementation
-
-**Website (Nuxt)** — uses `api-client` or `useBaseFetch`:
-
-```vue
-<!-- apps/frontend/src/pages/hosting/manage/[id]/content.vue -->
-<script setup lang="ts">
-import { provideContentManager, ContentPageLayout } from '@modrinth/ui'
-const { labrinth } = injectModrinthClient()
-
-const { data: items } = useQuery({
-	queryKey: ['content', serverId],
-	queryFn: () => labrinth.servers_v0.getAddons(serverId),
-})
-
-provideContentManager({
-	items: computed(() => items.value?.map(addonToContentItem) ?? []),
-	deleteItem: async (item) => {
-		await labrinth.servers_v0.deleteAddon(serverId, item.id)
-	},
-	// ... rest of the contract
-})
-</script>
-
-<template>
-	<ContentPageLayout />
-</template>
-```
-
-**App (Tauri)** — uses `invoke`:
-
-```vue
-<!-- apps/app-frontend/src/pages/instance/Content.vue -->
-<script setup lang="ts">
-import { provideContentManager, ContentPageLayout } from '@modrinth/ui'
-import { invoke } from '@tauri-apps/api/core'
-
-const items = ref<ContentItem[]>([])
-await invoke('get_instance_content', { instanceId }).then(/* map to ContentItem[] */)
-
-provideContentManager({
-	items,
-	deleteItem: async (item) => {
-		await invoke('delete_content', { instanceId, path: item.file_path })
-	},
-	// ... rest of the contract
-})
-</script>
-
-<template>
-	<ContentPageLayout />
-</template>
-```
-
-## When to Use Props vs DI
-
-| Use       | When                                                                                                     |
-| --------- | -------------------------------------------------------------------------------------------------------- |
-| **DI**    | The data depends on _how_ it's fetched (different per platform) — API calls, file operations, navigation |
-| **Props** | The data is the same regardless of platform — configuration flags, display options                       |
-
-## Composables for Shared Logic
-
-Extract reusable stateful logic into composables in `packages/ui/src/composables/`. The shared page orchestrates them internally:
-
-- Search (Fuse.js fuzzy search over items)
-- Filtering (dynamic filter pills)
-- Selection (multi-select with bulk operations)
-- Bulk operations (sequential execution with progress tracking)
-
-## Key Files
-
-- `packages/ui/src/pages/` (or `src/layout/`) — shared page components
-- `packages/ui/src/providers/` — DI contracts
-- `packages/ui/src/composables/` — shared stateful logic
-- `apps/frontend/src/app.vue` — website root provider setup
-- `apps/app-frontend/src/App.vue` — app root provider setup
-- `apps/app-frontend/src/routes.js` — app route definitions
+1. **Read the target page** at `$ARGUMENTS` and understand its data sources, mutations, and navigation.
+2. **Read the standards above** to understand the shared vs wrapped distinction and the DI pattern.
+3. **Decide the category:**
+   - **Wrapped** (`layouts/wrapped/`) — if the page uses the same API source on both platforms (e.g. web requests, not Tauri plugins). Just move the page component into `packages/ui` and import it from both frontends.
+   - **Shared** (`layouts/shared/`) — if the page has different data-fetching logic per platform (e.g. website uses `api-client`, app uses Tauri `invoke`). Requires a DI contract.
+4. **For shared layouts:**
+   - Define a DI contract interface in `providers/` capturing all platform-specific operations.
+   - Create the layout component that injects the context and handles all UI logic.
+   - Extract reusable stateful logic (search, filtering, selection) into `composables/`.
+   - Implement the contract separately in each frontend (`apps/frontend/`, `apps/app-frontend/`).
+5. **For wrapped pages:**
+   - Move the page component into `packages/ui/src/layouts/wrapped/` matching the route structure.
+   - Replace any platform-specific imports with shared utilities.
+   - Import and render the wrapped page from both frontends as a simple component.
+   - If the layout uses TanStack Query for initial route paint with `ReadyTransition` / `useReadyState`, each platform route shell must call `ensureQueryData` for those queries with matching keys and fetchers — see **Platform route shells: prefetch with `ensureQueryData`** in `standards/frontend/CROSS_PLATFORM_PAGES.md`.
+6. **Verify** the page renders correctly by checking for missing imports and that all DI contracts are satisfied.

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

@@ -1,45 +1,22 @@
-# Figma MCP Usage
+---
+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>
+---
 
-When the Figma MCP server is connected, use it to translate Figma designs into production-ready Vue components for this monorepo.
+Refer to the standard: @standards/frontend/FIGMA_MCP_USAGE.md
+Also read @packages/ui/CLAUDE.md for color token mapping and component conventions.
 
-## Workflow
+## Steps
 
-### 1. Get the design context
-
-Use `get_design_context` with the node ID from a Figma URL. If the URL is `https://figma.com/design/:fileKey/:fileName?node-id=1-2`, the node ID is `1:2`.
-
-```
-get_design_context(nodeId: "1:2", clientLanguages: "typescript,html,css", clientFrameworks: "vue")
-```
-
-This returns reference code, a screenshot, and metadata. Always start here.
-
-### 2. Get a screenshot for visual reference
-
-Use `get_screenshot` if you need to see the design without full code context:
-
-```
-get_screenshot(nodeId: "1:2")
-```
-
-### 3. Get variable definitions
-
-Use `get_variable_defs` to see what design tokens are applied to a node:
-
-```
-get_variable_defs(nodeId: "1:2")
-```
-
-### 4. Get metadata for structure overview
-
-Use `get_metadata` to get an XML overview of node IDs, layer types, names, positions and sizes — useful for understanding the structure of a complex frame before diving into individual nodes.
-
-## Adapting Figma Output
-
-The Figma MCP returns generic reference code. Adapt it to match the Modrinth codebase:
-
-1. **Read `packages/ui/CLAUDE.md`** for color usage rules, surface token mapping, and component patterns.
-2. **Map Figma color variables to `surface-*` tokens** — never use Figma's aliased names like `bg/default` or `bg/raised` directly. The CLAUDE.md has the full mapping table.
-3. **Check `packages/assets/styles/variables.scss`** for tokens not exposed in Figma (brand highlights, semantic backgrounds, shadows).
-4. **Check for existing components** in `packages/ui/src/components/` before building from scratch.
-5. **Match spacing exactly** — do not approximate values from the design.
+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-convert/SKILL.md

@@ -1,105 +0,0 @@
-# i18n String Conversion
-
-Convert hard-coded natural-language strings in Vue SFCs into the localization system using utilities from `@modrinth/ui`.
-
-## Rules
-
-### 1. Identify translatable strings
-
-- Scan `<template>` for all user-visible strings: inner text, alt attributes, placeholders, button labels, etc.
-- Check `<script>` too: dropdown option labels, notification messages, etc.
-- Do NOT extract dynamic expressions (`{{ user.name }}`) or HTML tags — only static human-readable text.
-
-### 2. Create message definitions
-
-Import `defineMessage` or `defineMessages` from `@modrinth/ui` in `<script setup>`. Define messages with a unique `id` (descriptive prefix based on component path) and `defaultMessage` equal to the original English string:
-
-```ts
-const messages = defineMessages({
-	welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
-	welcomeDescription: { id: 'auth.welcome.description', defaultMessage: "You're now part of the community…" },
-})
-```
-
-### 3. Handle variables and ICU formats
-
-- Dynamic parts become ICU placeholders: `"Hello, ${user.name}!"` → `defaultMessage: 'Hello, {name}!'`
-- Numbers/dates/times use ICU options: `{price, number, ::currency/USD}`
-- Plurals/selects use ICU: `'{count, plural, one {# message} other {# messages}}'`
-
-### 4. Rich-text messages (links/markup)
-
-Wrap link/markup ranges with tags in `defaultMessage`:
-
-```
-"By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
-```
-
-Render with `<IntlFormatted>` from `@modrinth/ui` using named slots:
-
-```vue
-<IntlFormatted :message-id="messages.tosLabel">
-	<template #terms-link="{ children }">
-		<NuxtLink to="/terms">
-			<component :is="() => children" />
-		</NuxtLink>
-	</template>
-	<template #privacy-link="{ children }">
-		<NuxtLink to="/privacy">
-			<component :is="() => children" />
-		</NuxtLink>
-	</template>
-</IntlFormatted>
-```
-
-For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
-
-```vue
-<template #strong="{ children }">
-	<strong><component :is="() => children" /></strong>
-</template>
-```
-
-For complex child handling, use `normalizeChildren` from `@modrinth/ui`:
-
-```vue
-<template #bold="{ children }">
-	<strong><component :is="() => normalizeChildren(children)" /></strong>
-</template>
-```
-
-### 5. Formatting in templates
-
-Use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
-
-```ts
-const { formatMessage } = useVIntl()
-```
-
-```vue
-<button>{{ formatMessage(messages.welcomeTitle) }}</button>
-{{ formatMessage(messages.greeting, { name: user.name }) }}
-```
-
-### 6. Naming conventions
-
-Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
-
-### 7. Avoid Vue/ICU delimiter collisions
-
-If an ICU placeholder ends right before `}}` in a Vue template, insert a space: `} }` to avoid parsing issues.
-
-### 8. Imports
-
-Ensure these are imported from `@modrinth/ui` as needed: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, `normalizeChildren`.
-
-### 9. Preserve functionality
-
-Do not change logic, layout, reactivity, or bindings — only refactor strings into i18n.
-
-## Reference Examples
-
-- Variables/plurals: `apps/frontend/src/pages/frog.vue`
-- Rich-text link tags: `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
-
-When finished, there should be no hard-coded English strings left in the template — everything comes from `formatMessage` or `<IntlFormatted>`.

.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/multistage-modals/SKILL.md

@@ -1,215 +0,0 @@
-# Multistage Modals
-
-The `MultiStageModal` component (`packages/ui/src/components/base/MultiStageModal.vue`) provides a wizard-like modal with progress tracking, conditional stages, and per-stage button configuration.
-
-## Architecture
-
-A multistage modal has three parts:
-
-1. **Context** — A DI provider that holds all state, business logic, and stage configs
-2. **Stage configs** — Data objects describing each stage (title, component, buttons, skip conditions)
-3. **Stage components** — Vue components rendered inside the modal, consuming the context
-
-## Building a Multistage Modal
-
-### 1. Define the context
-
-Create a DI provider with all the state your wizard needs. Include the modal ref and stage configs.
-
-```ts
-// providers/my-feature/my-modal.ts
-import type { ShallowRef } from 'vue'
-import type { ComponentExposed } from 'vue-component-type-helpers'
-import type { MultiStageModal, StageConfigInput } from '@modrinth/ui'
-import { createContext } from '@modrinth/ui'
-
-export interface MyModalContext {
-	// State
-	formData: Ref<MyFormData>
-	isSubmitting: Ref<boolean>
-
-	// Modal control
-	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
-	stageConfigs: StageConfigInput<MyModalContext>[]
-
-	// Business logic
-	handleSubmit: () => Promise<void>
-}
-
-export const [injectMyModalContext, provideMyModalContext] =
-	createContext<MyModalContext>('MyModal')
-
-export function createMyModalContext(
-	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>,
-): MyModalContext {
-	const formData = ref<MyFormData>({ ... })
-	const isSubmitting = ref(false)
-
-	async function handleSubmit() {
-		isSubmitting.value = true
-		try {
-			await saveData(formData.value)
-			modal.value?.hide()
-		} finally {
-			isSubmitting.value = false
-		}
-	}
-
-	return { formData, isSubmitting, modal, stageConfigs, handleSubmit }
-}
-```
-
-### 2. Define stage configs
-
-Each stage is a `StageConfigInput<T>` where `T` is your context type. Most fields accept either a static value or a function receiving the context (`MaybeCtxFn<T, R>`).
-
-```ts
-// providers/my-feature/stages/details-stage.ts
-import { markRaw } from 'vue'
-import type { StageConfigInput } from '@modrinth/ui'
-import type { MyModalContext } from '../my-modal'
-import DetailsStage from './DetailsStage.vue'
-import { RightArrowIcon, SaveIcon } from '@modrinth/assets'
-
-export const detailsStageConfig: StageConfigInput<MyModalContext> = {
-	id: 'details',
-	stageContent: markRaw(DetailsStage),
-	title: 'Details',
-
-	// Conditional behavior based on context
-	skip: (ctx) => ctx.shouldSkipDetails.value,
-	cannotNavigateForward: (ctx) => !ctx.formData.value.name,
-	disableClose: (ctx) => ctx.isSubmitting.value,
-
-	leftButtonConfig: (ctx) => ({
-		label: 'Cancel',
-		onClick: () => ctx.modal.value?.hide(),
-	}),
-
-	rightButtonConfig: (ctx) => ({
-		label: 'Next',
-		icon: RightArrowIcon,
-		iconPosition: 'after',
-		disabled: !ctx.formData.value.name,
-		onClick: () => ctx.modal.value?.nextStage(),
-	}),
-}
-```
-
-**Stage config fields:**
-
-| Field | Type | Purpose |
-|-------|------|---------|
-| `id` | `string` | Unique stage identifier (used with `setStage()`) |
-| `stageContent` | `Component` | Vue component to render (wrap with `markRaw()`) |
-| `title` | `MaybeCtxFn<T, string>` | Stage title in breadcrumbs |
-| `skip` | `MaybeCtxFn<T, boolean>` | Skip this stage conditionally |
-| `nonProgressStage` | `MaybeCtxFn<T, boolean>` | Exclude from progress bar (for edit sub-flows) |
-| `hideStageInBreadcrumb` | `MaybeCtxFn<T, boolean>` | Hide from breadcrumb nav |
-| `cannotNavigateForward` | `MaybeCtxFn<T, boolean>` | Block forward navigation (validation) |
-| `disableClose` | `MaybeCtxFn<T, boolean>` | Disable closing the modal |
-| `leftButtonConfig` | `MaybeCtxFn<T, StageButtonConfig \| null>` | Left action button |
-| `rightButtonConfig` | `MaybeCtxFn<T, StageButtonConfig \| null>` | Right action button |
-| `maxWidth` | `MaybeCtxFn<T, string>` | Per-stage max width (default `560px`) |
-
-**Button config fields:**
-
-| Field | Purpose |
-|-------|---------|
-| `label` | Button text |
-| `icon` | Icon component |
-| `iconPosition` | `'before'` or `'after'` |
-| `color` | ButtonStyled color prop |
-| `disabled` | Disable the button |
-| `onClick` | Click handler |
-
-### 3. Create stage components
-
-Stage components inject the context and render their UI:
-
-```vue
-<!-- providers/my-feature/stages/DetailsStage.vue -->
-<script setup lang="ts">
-import { injectMyModalContext } from '../my-modal'
-
-const { formData } = injectMyModalContext()
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<StyledInput v-model="formData.name" label="Name" />
-		<StyledInput v-model="formData.description" label="Description" />
-	</div>
-</template>
-```
-
-### 4. Create the wrapper component
-
-The wrapper provides context and renders `MultiStageModal`:
-
-```vue
-<!-- components/MyModalWrapper.vue -->
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { MultiStageModal } from '@modrinth/ui'
-import { createMyModalContext, provideMyModalContext } from '../providers/my-feature/my-modal'
-
-const modal = shallowRef<InstanceType<typeof MultiStageModal> | null>(null)
-const ctx = createMyModalContext(modal)
-provideMyModalContext(ctx)
-
-defineExpose({ show: () => modal.value?.show() })
-</script>
-
-<template>
-	<MultiStageModal ref="modal" :stages="ctx.stageConfigs" :context="ctx" />
-</template>
-```
-
-## Modal API
-
-`MultiStageModal` exposes via ref:
-
-| Method/Property | Description |
-|----------------|-------------|
-| `show()` | Open the modal |
-| `hide()` | Close the modal |
-| `setStage(indexOrId)` | Jump to stage by index or string id |
-| `nextStage()` | Advance to next non-skipped stage |
-| `prevStage()` | Go back to previous stage |
-| `currentStageIndex` | Ref to current stage index |
-
-## Non-Progress Stages (Edit Sub-Flows)
-
-For stages that shouldn't appear in the progress bar (e.g. editing a specific field from a summary page):
-
-```ts
-export const editLoadersStageConfig: StageConfigInput<MyContext> = {
-	id: 'edit-loaders',
-	nonProgressStage: true,
-	stageContent: markRaw(EditLoadersStage),
-	title: 'Edit loaders',
-	leftButtonConfig: (ctx) => ({
-		label: 'Back',
-		onClick: () => ctx.modal.value?.setStage('summary'),
-	}),
-	rightButtonConfig: (ctx) => ({
-		...ctx.saveButtonConfig(),
-		label: 'Save',
-	}),
-}
-```
-
-Navigate to it with `modal.value?.setStage('edit-loaders')` — it won't affect the progress indicator.
-
-## Reference Implementation
-
-The version creation/edit modal is the most complete example:
-
-| File | Purpose |
-|------|---------|
-| `apps/frontend/src/providers/version/manage-version-modal.ts` | Context creation + business logic |
-| `apps/frontend/src/providers/version/stages/index.ts` | Stage config barrel export |
-| `apps/frontend/src/providers/version/stages/*-stage.ts` | Individual stage configs |
-
-The context includes computed properties for conditional UI, watchers for auto-fetching dependencies, loading states for granular button disabling, and both "create" and "edit" flows sharing the same stages with different button configs.

.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

@@ -1,154 +1,27 @@
-# TanStack Query
+---
+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>
+---
 
-TanStack Query (`@tanstack/vue-query` v5) is used for server state management — caching, background refetching, and cache invalidation. Use it instead of manual `ref()` + `await` patterns for any data that comes from an API.
+Refer to the standard: @standards/frontend/FETCHING_DATA.md
 
-A TanStack MCP server is available — use `tanstack_doc` and `tanstack_search_docs` tools to look up API details when needed.
+## Steps
 
-## Setup
-
-TanStack Query is configured in `apps/frontend/src/plugins/tanstack.ts` as a Nuxt plugin with SSR hydration support. Default stale time is 5 seconds. The `QueryClient` is available via `useQueryClient()` or `useAppQueryClient()` (which also works in middleware).
-
-## Queries
-
-Use `useQuery` with the api-client for data fetching:
-
-```ts
-const client = injectModrinthClient()
-
-const { data, isPending, isError, error } = useQuery({
-	queryKey: ['project', 'v3', projectId],
-	queryFn: () => client.labrinth.projects_v3.get(projectId),
-	staleTime: 1000 * 60 * 5,
-})
-```
-
-In templates:
-
-```vue
-<span v-if="isPending">Loading...</span>
-<span v-else-if="isError">Error: {{ error.message }}</span>
-<div v-else>{{ data.title }}</div>
-```
-
-### Query Option Factories
-
-For queries used across multiple components, define reusable query option factories in `packages/ui/src/queries/`:
-
-```ts
-// composables/queries/project.ts
-export const STALE_TIME = 1000 * 60 * 5
-export const STALE_TIME_LONG = 1000 * 60 * 10
-
-export const projectQueryOptions = {
-	v3: (projectId: string, client: AbstractModrinthClient) => ({
-		queryKey: ['project', 'v3', projectId] as const,
-		queryFn: () => client.labrinth.projects_v3.get(projectId),
-		staleTime: STALE_TIME,
-	}),
-
-	members: (projectId: string, client: AbstractModrinthClient) => ({
-		queryKey: ['project', projectId, 'members'] as const,
-		queryFn: () => client.labrinth.projects_v3.getMembers(projectId),
-		staleTime: STALE_TIME,
-	}),
-}
-```
-
-Then use them:
-
-```ts
-const { data } = useQuery(projectQueryOptions.v3(projectId, client))
-```
-
-### Conditional Queries
-
-Use `enabled` as a computed for queries that depend on other data:
-
-```ts
-const { data: members } = useQuery({
-	queryKey: ['project', projectId, 'members'],
-	queryFn: () => client.labrinth.projects_v3.getMembers(projectId),
-	enabled: computed(() => !!projectId.value),
-})
-```
-
-## Mutations
-
-Use `useMutation` for create/update/delete operations. Invalidate related queries on success:
-
-```ts
-const queryClient = useQueryClient()
-const client = injectModrinthClient()
-
-const createMutation = useMutation({
-	mutationFn: (name: string) => client.archon.backups_v0.create(serverId, { name }),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: ['backups', 'list', serverId] }),
-})
-```
-
-Use `createMutation.isPending.value` to disable buttons during submission.
-
-### Optimistic Updates
-
-For mutations where responsiveness matters, use optimistic updates with rollback:
-
-```ts
-const patchMutation = useMutation({
-	mutationFn: async ({ projectId, data }) => {
-		await client.labrinth.projects_v3.patch(projectId, data)
-		return data
-	},
-
-	onMutate: async ({ projectId, data }) => {
-		await queryClient.cancelQueries({ queryKey: ['project', 'v3', projectId] })
-		const previous = queryClient.getQueryData(['project', 'v3', projectId])
-
-		queryClient.setQueryData(['project', 'v3', projectId], (old) => {
-			if (!old) return old
-			return { ...old, ...data }
-		})
-
-		return { previous }
-	},
-
-	onError: (_err, _variables, context) => {
-		if (context?.previous) {
-			queryClient.setQueryData(['project', 'v3', projectId], context.previous)
-		}
-	},
-
-	onSettled: () => {
-		queryClient.invalidateQueries({ queryKey: ['project', 'v3', projectId] })
-	},
-})
-```
-
-## Query Keys
-
-Keys use a hierarchical array pattern:
-
-```ts
-// Resource type → version/qualifier → ID
-['project', 'v3', projectId]
-
-// Resource type → ID → sub-resource
-['project', projectId, 'members']
-['project', projectId, 'versions', 'v3']
-
-// Domain → action → ID
-['backups', 'list', serverId]
-['tech-reviews']
-```
-
-Use `as const` for type safety. Put the resource ID last when possible — this makes partial key matching work for invalidation:
-
-```ts
-// Invalidates all project queries for this ID
-queryClient.invalidateQueries({ queryKey: ['project', projectId] })
-```
-
-## Key Files
-
-- `apps/frontend/src/plugins/tanstack.ts` — QueryClient setup + SSR hydration
-- `apps/frontend/src/composables/query-client.ts` — `useAppQueryClient()` helper
-- `apps/frontend/src/composables/queries/` — reusable query option factories
+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/merge-queue-ci-skipper/action.yml

@@ -0,0 +1,171 @@
+# MIT License
+#
+# Copyright (c) 2024 CARIAD SE
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in all
+# copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+# SOFTWARE.
+
+name: 'Merge Queue CI Check Skipper'
+description: 'Outputs `skip-check` as `true` if this is running as part of merge queue checks and the same checks have already been executed in the PR itself.'
+inputs:
+  secret:
+    description: 'Optional GitHub Secret that can access branch protection rules using the administration:read permission'
+    required: false
+outputs:
+  skip-check:
+    description: 'Skip Check (boolean)'
+    value: ${{ steps.passed-checks.outputs.can-skip-checks }}
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Extract PR Number and Commit ID
+      id: extract-pr-info
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const githubRef = process.env.GITHUB_REF;
+          const regex = /^refs\/heads\/gh-readonly-queue\/([a-zA-Z0-9.\-_\/]+)\/pr-(\d+)-([a-f0-9]+)$/;
+
+          if (regex.test(githubRef)) {
+            const [, targetBranchName, prNumber, commitId] = githubRef.match(regex);
+            core.setOutput('targetBranchName', targetBranchName);
+            core.setOutput('prNumber', prNumber);
+            core.setOutput('commitId', commitId);
+          } else {
+            console.log(`GITHUB_REF is not a merge queue ref, setting CAN_SKIP_CHECKS to false: ${githubRef}`);
+            core.exportVariable('CAN_SKIP_CHECKS', 'false');
+          }
+
+    - name: Print PR Number and Target Commit ID
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        echo "Target Branch Name: ${{ steps.extract-pr-info.outputs.targetBranchName }}"
+        echo "PR Number: ${{ steps.extract-pr-info.outputs.prNumber }}"
+        echo "Target Commit ID: ${{ steps.extract-pr-info.outputs.commitId }}"
+
+    - name: Check if merge queue entry was enqueued as head of the queue
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        targetBranchHead=$(git rev-parse origin/${{ steps.extract-pr-info.outputs.targetBranchName }})
+        if [[ "$targetBranchHead" != "${{ steps.extract-pr-info.outputs.commitId }}" ]]; then
+          echo "'${{ steps.extract-pr-info.outputs.targetBranchName }}' branch commit ID does not match PR commit ID. This Merge Queue run was not head of the queue when it was enqueued. Setting CAN_SKIP_CHECKS to false."
+          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
+        else
+          echo "This merge queue entry is targeting '${{ steps.extract-pr-info.outputs.targetBranchName }}' directly."
+        fi
+
+    - name: Get PR Branch
+      id: get-pr-branch
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      env:
+        GH_TOKEN: ${{ github.token }}
+      run: |
+        prNumber=${{ steps.extract-pr-info.outputs.prNumber }}
+        branchName=$(gh pr view ${prNumber} --json headRefName -q '.headRefName')
+        echo "prBranch=$branchName" >> "$GITHUB_OUTPUT"
+
+    - name: Print PR Branch
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        echo "PR Branch: ${{ steps.get-pr-branch.outputs.prBranch }}"
+
+    - name: Check if PR branch contains the Merge Queue target commit ID
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        # Get the branch name from previous steps
+        branch_name="origin/${{ steps.get-pr-branch.outputs.prBranch }}"
+        commit_id="${{ steps.extract-pr-info.outputs.commitId }}"
+
+        # Check if the branch history contains the commit
+        if git branch -r --contains "$commit_id" | grep -q "$branch_name"; then
+          echo "Branch '$branch_name' contains commit '$commit_id'. It is up to date with ${{ steps.extract-pr-info.outputs.targetBranchName }}."
+        else
+          echo "Branch '$branch_name' does not contain commit '$commit_id'. It is outdated. Setting CAN_SKIP_CHECKS to false."
+          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
+        fi
+
+    - name: Compare PR Branch with Current Branch
+      if: env.CAN_SKIP_CHECKS != 'false'
+      shell: bash
+      run: |
+        if git diff --quiet "origin/${{ steps.get-pr-branch.outputs.prBranch }}"; then
+          echo "No differences found. PR branch is identical with this merge queue branch."
+        else
+          echo "Differences detected. PR branch has been updated after PR was added to merge queue. Setting CAN_SKIP_CHECKS to false."
+          echo "CAN_SKIP_CHECKS=false" >> "$GITHUB_ENV"
+        fi
+
+    - name: Compute/publish skip result
+      id: passed-checks
+      uses: actions/github-script@v7
+      env:
+        SECRET: ${{ inputs.secret }}
+      with:
+        github-token: ${{ inputs.secret != '' && inputs.secret || github.token }}
+        script: |
+          if (process.env.CAN_SKIP_CHECKS == "false") {
+            console.log("Setting CAN_SKIP_CHECKS to false");
+            core.setOutput("can-skip-checks", false);
+            return;
+          }
+
+          const secretProvided = !!process.env.SECRET;
+          if (!secretProvided) {
+            console.log("secret input not set, assuming all checks have passed. Ensure 'Require status checks to pass before merging' is enabled, or provide a secret with administration:read.");
+            core.setOutput("can-skip-checks", true);
+            return;
+          }
+
+          const { data: branchProtection } = await github.rest.repos.getBranchProtection({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            branch: "${{ steps.extract-pr-info.outputs.targetBranchName }}",
+          });
+          const requiredCheckNames = branchProtection.required_status_checks.contexts;
+          console.log(`requiredCheckNames = ${requiredCheckNames}`);
+
+          const { data: checks } = await github.rest.checks.listForRef({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            ref: "refs/heads/${{ steps.get-pr-branch.outputs.prBranch }}",
+          });
+
+          console.log(`checks.check_runs = ${checks.check_runs.map(check => `${check.status},${check.conclusion},${check.name};`)}`);
+          const nonSuccessfulChecks = checks.check_runs.filter(check => check.status !== "completed" || check.conclusion !== "success");
+          const nonSuccessfulCheckNames = nonSuccessfulChecks.map(check => check.name);
+          console.log(`nonSuccessfulCheckNames = ${nonSuccessfulCheckNames}`);
+
+          const missingChecks = requiredCheckNames.filter(checkName => nonSuccessfulCheckNames.includes(checkName));
+
+          if (missingChecks.length > 0) {
+            console.log(`Required checks not passed, cannot skip merge queue checks. Setting CAN_SKIP_CHECKS to false. Missing checks: ${missingChecks.join(', ')}`);
+            core.setOutput("can-skip-checks", false);
+          } else {
+            console.log("No missing checks. Setting CAN_SKIP_CHECKS to true.");
+            core.setOutput("can-skip-checks", true);
+          }

.github/workflows/api-client-release.yml

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

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

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

.github/workflows/changelog-comment.yml

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

.github/workflows/check-generic.yml

@@ -2,7 +2,7 @@ on:
   pull_request:
   push:
     branches:
-      - master
+      - main
 
 env:
   CARGO_TERM_COLOR: always
@@ -12,15 +12,15 @@ jobs:
   typos:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: crate-ci/typos@v1.43.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: crate-ci/typos@6ac2ebd1b93eade61faf7e12688ad87a073fea59 # v1.46.0
 
   # see <https://github.com/influxdata/datafusion-udf-wasm/pull/275>
   tombi:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: taiki-e/install-action@v2
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: taiki-e/install-action@b5fddbb5361bce8a06fb168c9d403a6cc552b084 # v2.75.29
         with:
           tool: tombi
       - run: tombi lint

.github/workflows/check-rust.yml

@@ -2,7 +2,7 @@ on:
   pull_request:
   push:
     branches:
-      - master
+      - main
 
 env:
   CARGO_TERM_COLOR: always
@@ -12,8 +12,8 @@ jobs:
   shear:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: dtolnay/rust-toolchain@stable
-      - uses: cargo-bins/cargo-binstall@main
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: dtolnay/rust-toolchain@29eef336d9b2848a0b548edc03f92a220660cdb8 # stable
+      - uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
       - run: cargo binstall --no-confirm cargo-shear
       - run: cargo shear

.github/workflows/daedalus-docker.yml

@@ -3,33 +3,133 @@ name: daedalus-docker-build
 on:
   push:
     branches:
-      - '**'
+      - 'main'
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
       - 'packages/daedalus/**'
+      - Cargo.toml
+      - Cargo.lock
   pull_request:
     types: [opened, synchronize]
     paths:
       - .github/workflows/daedalus-docker.yml
       - 'apps/daedalus_client/**'
       - 'packages/daedalus/**'
+      - Cargo.toml
+      - Cargo.lock
   merge_group:
     types: [checks_requested]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
 jobs:
-  docker:
+  skip-if-clean:
+    name: Skip if merge_queue produces no diff
     runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check.outputs.skip }}
+      internal: ${{ steps.check-internal.outputs.internal }}
+    if: ${{ always() }}
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - name: Check if workflow runs on an internal branch
+        id: check-internal
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
+          REPO: ${{ github.repository }}
+        run: |
+          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
+            echo "internal=true" >> $GITHUB_OUTPUT
+          else
+            echo "internal=false" >> $GITHUB_OUTPUT
+          fi
 
-      - name: ⚙️ Generate Docker image metadata
-        id: docker_meta
-        uses: docker/metadata-action@v5
+      - name: Merge Queue CI Check Skipper
+        id: merge-queue-ci-skipper
+        uses: ./.github/merge-queue-ci-skipper
+        with:
+          secret: ${{ secrets.GH_ACCESS_TOKEN }}
+
+      - name: Check merge_group synthetic commit
+        id: check
+        run: |
+          # PR mode: never skip
+          if [ "${{ github.event_name }}" != "merge_group" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+
+          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+          else
+            echo "skip=false" >> $GITHUB_OUTPUT
+          fi
+
+  docker:
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    env:
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        with:
+          rustflags: ''
+          cache: false
+
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-daedalus-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - name: Build daedalus_client
+        run: cargo build --release --package daedalus_client
+
+      - name: Stage Docker context
+        run: |
+          mkdir -p apps/daedalus_client/docker-stage
+          cp target/release/daedalus_client apps/daedalus_client/docker-stage/daedalus_client
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+
+      - name: Generate Docker image metadata
+        id: docker-meta
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         env:
           DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
         with:
@@ -43,20 +143,19 @@ jobs:
             org.opencontainers.image.description=Modrinth game metadata query client
             org.opencontainers.image.licenses=MIT
 
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      - name: Login to GitHub Packages
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
+          context: ./apps/daedalus_client/docker-stage
           file: ./apps/daedalus_client/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.docker_meta.outputs.tags }}
-          labels: ${{ steps.docker_meta.outputs.labels }}
-          annotations: ${{ steps.docker_meta.outputs.annotations }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
-          cache-to: type=inline
+          tags: ${{ steps.docker-meta.outputs.tags }}
+          labels: ${{ steps.docker-meta.outputs.labels }}
+          annotations: ${{ steps.docker-meta.outputs.annotations }}

.github/workflows/daedalus-run.yml

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

.github/workflows/frontend-deploy.yml

@@ -21,16 +21,20 @@ on:
         type: string
         description: 'The environment to deploy to (staging-preview or production-preview)'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-${{ inputs.environment || 'push' }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
 jobs:
   deploy:
-    runs-on: ubuntu-latest
+    runs-on: blacksmith-2vcpu-ubuntu-2404
     permissions:
       contents: read
       deployments: write
       pull-requests: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
@@ -63,14 +67,25 @@ jobs:
             echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
           fi
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: .nvmrc
-          cache: pnpm
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-cache-
 
       - name: Inject build variables
         working-directory: ./apps/frontend
@@ -99,7 +114,7 @@ jobs:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Create Sentry release and upload sourcemaps
-        uses: getsentry/action-release@v3
+        uses: getsentry/action-release@5657c9e888b4e2cc85f4d29143ea4131fde4a73a # v3.6.0
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_ORG: modrinth
@@ -111,7 +126,7 @@ jobs:
 
       - name: Deploy Cloudflare Worker
         id: wrangler
-        uses: cloudflare/wrangler-action@v3
+        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}
@@ -137,7 +152,7 @@ jobs:
 
       - name: Upload deployment URL
         if: ${{ inputs.environment != '' }}
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: deployment-url-${{ inputs.environment }}
           path: deployment-url-${{ inputs.environment }}.txt

.github/workflows/frontend-preview.yml

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

.github/workflows/i18n-pull.yml

@@ -51,14 +51,14 @@ jobs:
           CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.ref }}
           token: ${{ secrets.CROWDIN_GH_TOKEN }}
 
       - name: Configure Git author
         id: git-author
-        uses: MarcoIeni/git-config@v0.1
+        uses: MarcoIeni/git-config@59144859caf016f8b817a2ac9b051578729173c4 # v0.1.2
         env:
           GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}
 
@@ -79,7 +79,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Download translations from Crowdin
-        uses: crowdin/github-action@v2
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: false
           upload_translations: false
@@ -96,7 +96,7 @@ jobs:
         run: sudo chown -R $USER:$USER .
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
           title: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
           body-path: .github/templates/crowdin-pr.md

.github/workflows/i18n-push.yml

@@ -53,7 +53,7 @@ jobs:
           CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
 
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.ref }}
 
@@ -68,7 +68,7 @@ jobs:
           echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
 
       - name: Upload translations to Crowdin
-        uses: crowdin/github-action@v1
+        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
         with:
           upload_sources: true
           upload_translations: false

.github/workflows/labrinth-docker.yml

@@ -3,7 +3,7 @@ name: docker-build
 on:
   push:
     branches:
-      - '**'
+      - 'main'
     paths:
       - .github/workflows/labrinth-docker.yml
       - 'apps/labrinth/**'
@@ -19,19 +19,122 @@ on:
   merge_group:
     types: [checks_requested]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
 jobs:
-  docker:
+  skip-if-clean:
+    name: Skip if merge_queue produces no diff
     runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check.outputs.skip }}
+      internal: ${{ steps.check-internal.outputs.internal }}
+    if: ${{ always() }}
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: 🧰 Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - name: Check if workflow runs on an internal branch
+        id: check-internal
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
+          REPO: ${{ github.repository }}
+        run: |
+          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
+            echo "internal=true" >> $GITHUB_OUTPUT
+          else
+            echo "internal=false" >> $GITHUB_OUTPUT
+          fi
 
-      - name: ⚙️ Generate Docker image metadata
-        id: docker_meta
-        uses: docker/metadata-action@v5
+      - name: Merge Queue CI Check Skipper
+        id: merge-queue-ci-skipper
+        uses: ./.github/merge-queue-ci-skipper
+        with:
+          secret: ${{ secrets.GH_ACCESS_TOKEN }}
+
+      - name: Check merge_group synthetic commit
+        id: check
+        run: |
+          # PR mode: never skip
+          if [ "${{ github.event_name }}" != "merge_group" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+
+          if [ "${{ steps.merge-queue-ci-skipper.outputs.skip-check }}" = "true" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+          else
+            echo "skip=false" >> $GITHUB_OUTPUT
+          fi
+
+  docker:
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
+    env:
+      SQLX_OFFLINE: 'true'
+      GIT_HASH: ${{ github.sha }}
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
+        with:
+          rustflags: ''
+          cache: false
+
+      - name: Setup mold
+        uses: rui314/setup-mold@9c9c13bf4c3f1adef0cc596abc155580bcb04444 # v1 / Mold 2.41.0
+
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-labrinth-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - name: Build labrinth
+        run: cargo build --profile release-labrinth --package labrinth
+
+      - name: Stage Docker context
+        run: |
+          mkdir -p apps/labrinth/docker-stage
+          cp target/release-labrinth/labrinth apps/labrinth/docker-stage/labrinth
+          cp -r apps/labrinth/migrations apps/labrinth/docker-stage/migrations
+          cp -r apps/labrinth/assets apps/labrinth/docker-stage/assets
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+
+      - name: Generate Docker image metadata
+        id: docker-meta
+        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
         env:
           # GitHub Packages requires annotations metadata in at least the index descriptor to show them
           # up properly in its UI it seems, but it's not clear about it, because the docs refer to the
@@ -49,22 +152,19 @@ jobs:
             org.opencontainers.image.description=Modrinth API
             org.opencontainers.image.licenses=AGPL-3.0-only
 
-      - name: 🔑 Login to GitHub Packages
-        uses: docker/login-action@v3
+      - name: Login to GitHub Packages
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 🔨 Build and push
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
+          context: ./apps/labrinth/docker-stage
           file: ./apps/labrinth/Dockerfile
           push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.docker_meta.outputs.tags }}
-          labels: ${{ steps.docker_meta.outputs.labels }}
-          annotations: ${{ steps.docker_meta.outputs.annotations }}
-          build-args: |
-            GIT_HASH=${{ fromJSON(steps.docker_meta.outputs.json).labels['org.opencontainers.image.revision'] }}
-          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
-          cache-to: type=inline
+          tags: ${{ steps.docker-meta.outputs.tags }}
+          labels: ${{ steps.docker-meta.outputs.labels }}
+          annotations: ${{ steps.docker-meta.outputs.annotations }}

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

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

.github/workflows/theseus-build.yml

@@ -27,46 +27,70 @@ on:
         options:
           - prod
           - staging
+          - prod-with-staging-archon
         default: prod
         required: false
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
 jobs:
   build:
     name: Build
+    env:
+      VITE_STRIPE_PUBLISHABLE_KEY: pk_live_51JbFxJJygY5LJFfKLVVldb10HlLt24p421OWRsTOWc5sXYFOnFUXWieSc6HD3PHo25ktx8db1WcHr36XGFvZFVUz00V9ixrCs5
+      # SCCACHE_DIR: '/mnt/sccache'
+      # SCCACHE_CACHE_SIZE: '10G'
+      # SCCACHE_MULTILEVEL_CHAIN: 'disk,s3'
+      SCCACHE_S3_KEY_PREFIX: '${{ github.repository }}/'
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: 'sccache'
     strategy:
       fail-fast: false
       matrix:
-        platform: [macos-latest, windows-latest, ubuntu-latest]
+        platform: [
+            blacksmith-6vcpu-macos-26,
+            blacksmith-8vcpu-windows-2025, # At time of writing, Windows 4 vCPU VMs don't seem to actually exist
+            blacksmith-4vcpu-ubuntu-2404,
+          ]
         include:
-          - platform: macos-latest
+          - platform: blacksmith-6vcpu-macos-26
             artifact-target-name: universal-apple-darwin
-          - platform: windows-latest
+          - platform: blacksmith-8vcpu-windows-2025
             artifact-target-name: x86_64-pc-windows-msvc
-          - platform: ubuntu-latest
+          - platform: blacksmith-4vcpu-ubuntu-2404
             artifact-target-name: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.platform }}
 
     steps:
       - name: Check out code
-        uses: actions/checkout@v4
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 0
 
       - name: Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
         with:
           rustflags: ''
-          target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
+          target: ${{ contains(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
+      - name: Setup sccache
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: .nvmrc
-          cache: pnpm
+          cache: 'pnpm'
 
       - name: Generate tauri-dev.conf.json
         shell: bash
@@ -84,18 +108,19 @@ jobs:
           EOF
 
       - name: Install Linux build dependencies
-        if: startsWith(matrix.platform, 'ubuntu')
-        run: |
-          sudo apt-get update
-          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+        if: contains(matrix.platform, 'ubuntu')
+        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        with:
+          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          version: v1 # cache key
 
       - name: Setup Dasel
-        uses: jaxxstorm/action-install-gh-release@v2.1.0
+        uses: jaxxstorm/action-install-gh-release@25e24d2d23ae098373794ef1d6faecb48ee52da8 # v3.0.0
         with:
           repo: TomWright/dasel
           tag: v2.8.1
           extension-matching: disable
-          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
+          rename-to: ${{ contains(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
       - name: Set application version and environment
@@ -112,13 +137,13 @@ jobs:
           cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
 
       - name: Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
+        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
 
       - name: Install dependencies
         run: pnpm install
 
       - name: Set up Windows code signing
-        if: startsWith(matrix.platform, 'windows')
+        if: contains(matrix.platform, 'windows')
         shell: bash
         run: |
           if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
@@ -129,8 +154,9 @@ jobs:
 
       - name: Build macOS app
         run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-dev.conf.json' }}
-        if: startsWith(matrix.platform, 'macos')
+        if: contains(matrix.platform, 'macos')
         env:
+          TAURI_BUNDLER_DMG_IGNORE_CI: 'true'
           ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
@@ -143,7 +169,7 @@ jobs:
 
       - name: Build Linux app
         run: ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json' }}
-        if: startsWith(matrix.platform, 'ubuntu')
+        if: contains(matrix.platform, 'ubuntu')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -155,7 +181,7 @@ jobs:
           $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
           ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
           Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
-        if: startsWith(matrix.platform, 'windows')
+        if: contains(matrix.platform, 'windows')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -164,7 +190,7 @@ jobs:
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
 
       - name: Upload app bundles
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: App bundle (${{ matrix.artifact-target-name }})
           path: |

.github/workflows/theseus-release.yml

@@ -1,47 +1,71 @@
 name: Modrinth App release
 on:
-  workflow_dispatch:
-    inputs:
-      version-tag:
-        description: Version tag to release to the wide public
-        type: string
-        required: true
-      release-notes:
-        description: Release notes to include in the Tauri version manifest
-        default: A new release of the Modrinth App is available!
-        type: string
-        required: true
+  workflow_run:
+    workflows: ['Modrinth App build']
+    types: [completed]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
 
 jobs:
   release:
     name: Release Modrinth App
-    runs-on: ubuntu-latest
-
+    if: >-
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'push' &&
+      startsWith(github.event.workflow_run.head_branch, 'v')
+    runs-on: blacksmith-4vcpu-ubuntu-2404
     env:
+      VERSION_TAG: ${{ github.event.workflow_run.head_branch }}
       LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
       WINDOWS_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-pc-windows-msvc)
       MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME: App bundle (universal-apple-darwin)
       LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com
 
     steps:
-      - name: 📥 Download Modrinth App artifacts
-        uses: dawidd6/action-download-artifact@v11
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Verify ref is a tag
+        env:
+          GH_TOKEN: ${{ github.token }}
+          HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
+        run: |
+          tag_sha=$(gh api "repos/${{ github.repository }}/git/refs/tags/${VERSION_TAG}" --jq '.object.sha' 2>/dev/null || true)
+          if [ -z "$tag_sha" ]; then
+            echo "::error::${VERSION_TAG} is not a git tag in this repo"
+            exit 1
+          fi
+          if [ "$tag_sha" != "$HEAD_SHA" ]; then
+            commit_sha=$(gh api "repos/${{ github.repository }}/git/tags/${tag_sha}" --jq '.object.sha' 2>/dev/null || echo "$tag_sha")
+            if [ "$commit_sha" != "$HEAD_SHA" ]; then
+              echo "::error::Tag ${VERSION_TAG} (${commit_sha}) does not match build head_sha (${HEAD_SHA})"
+              exit 1
+            fi
+          fi
+          echo "Verified ${VERSION_TAG} is a tag pointing at ${HEAD_SHA}"
+
+      - name: Download Modrinth App artifacts
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
         with:
           workflow: theseus-build.yml
           workflow_conclusion: success
           event: push
-          branch: ${{ inputs.version-tag }}
+          branch: ${{ env.VERSION_TAG }}
           use_unzip: true
 
-      - name: 🛠️ Generate version manifest
+      - name: Extract app changelog
         env:
-          VERSION_TAG: ${{ inputs.version-tag }}
-          RELEASE_NOTES: ${{ inputs.release-notes }}
+          VERSION: ${{ env.VERSION_TAG }}
+        run: npx --yes tsx scripts/build-theseus-release-notes.ts
+
+      - name: Generate version manifest
         run: |
           # Reference: https://tauri.app/plugin/updater/#server-support
           jq -nc \
             --arg versionTag "${VERSION_TAG#v}" \
-            --arg releaseNotes "$RELEASE_NOTES" \
+            --rawfile releaseNotes release-notes.md \
             --rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
             --rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
             --rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
@@ -81,9 +105,8 @@ jobs:
           echo "Generated manifest for version ${VERSION_TAG}:"
           cat updates.json
 
-      - name: 📤 Upload release artifacts
+      - name: Upload release artifacts
         env:
-          VERSION_TAG: ${{ inputs.version-tag }}
           AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
           AWS_BUCKET: ${{ secrets.LAUNCHER_FILES_BUCKET_NAME }}
@@ -116,3 +139,18 @@ jobs:
           done
 
           aws s3 cp updates.json "s3://${AWS_BUCKET}"
+
+      - name: Create GitHub release
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          VERSION="${VERSION_TAG#v}"
+
+          gh release create "$VERSION_TAG" \
+            --title "Modrinth App ${VERSION}" \
+            --notes-file release-notes.md \
+            "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION}_x64-setup.exe" \
+            "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/dmg/Modrinth App_${VERSION}_universal.dmg" \
+            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION}_amd64.AppImage" \
+            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/deb/Modrinth App_${VERSION}_amd64.deb" \
+            "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/rpm/Modrinth App-${VERSION}-1.x86_64.rpm"

.github/workflows/turbo-ci.yml

@@ -8,10 +8,63 @@ on:
   merge_group:
     types: [checks_requested]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' && github.ref != 'refs/heads/prod' }}
+
 jobs:
+  skip-if-clean:
+    name: Skip if merge_queue produces no diff
+    runs-on: ubuntu-latest
+    outputs:
+      skip: ${{ steps.check.outputs.skip }}
+      internal: ${{ steps.check-internal.outputs.internal }}
+    if: ${{ always() }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Check if workflow runs on an internal branch
+        id: check-internal
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          HEAD_REPO: ${{ github.event.pull_request.head.repo.full_name }}
+          REPO: ${{ github.repository }}
+        run: |
+          if [ "$EVENT_NAME" != "pull_request" ] || [ "$HEAD_REPO" = "$REPO" ]; then
+            echo "internal=true" >> $GITHUB_OUTPUT
+          else
+            echo "internal=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Merge Queue CI Check Skipper
+        id: merge-queue-ci-skipper
+        uses: ./.github/merge-queue-ci-skipper
+        with:
+          secret: ${{ secrets.GH_ACCESS_TOKEN }}
+
+      - name: Check merge_group synthetic commit
+        id: check
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          SKIP_CHECK: ${{ steps.merge-queue-ci-skipper.outputs.skip-check }}
+        run: |
+          if [ "$EVENT_NAME" != "merge_group" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            exit 0
+          fi
+
+          if [ "$SKIP_CHECK" = "true" ]; then
+            echo "skip=true" >> $GITHUB_OUTPUT
+          else
+            echo "skip=false" >> $GITHUB_OUTPUT
+          fi
+
   build:
     name: Lint and Test
-    runs-on: ubuntu-latest
+    runs-on: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'blacksmith-4vcpu-ubuntu-2404' || 'ubuntu-latest' }}
+    needs: [skip-if-clean]
+    if: ${{ needs.skip-if-clean.outputs.skip != 'true' }}
 
     env:
       # Ensure pnpm output is colored in GitHub Actions logs
@@ -23,59 +76,107 @@ jobs:
       # since we don't want warnings to become errors
       # while developing)
       RUSTFLAGS: -Dwarnings
+      # sccache config (only populated for internal branches; secrets aren't
+      # available to forked PRs, and blacksmith stickydisk requires a
+      # blacksmith runner)
+      SCCACHE_DIR: ${{ needs.skip-if-clean.outputs.internal == 'true' && '/mnt/sccache' || '' }}
+      SCCACHE_CACHE_SIZE: ${{ needs.skip-if-clean.outputs.internal == 'true' && '10G' || '' }}
+      SCCACHE_MULTILEVEL_CHAIN: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'disk,s3' || '' }}
+      SCCACHE_S3_KEY_PREFIX: ${{ needs.skip-if-clean.outputs.internal == 'true' && format('{0}/', github.repository) || '' }}
+      SCCACHE_BUCKET: ${{ secrets.SCCACHE_BUCKET }}
+      SCCACHE_REGION: ${{ secrets.SCCACHE_REGION }}
+      SCCACHE_ENDPOINT: ${{ secrets.SCCACHE_ENDPOINT }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.SCCACHE_S3_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.SCCACHE_S3_SECRET_ACCESS_KEY }}
+      RUSTC_WRAPPER: ${{ needs.skip-if-clean.outputs.internal == 'true' && 'sccache' || '' }}
 
     steps:
-      - name: 📥 Check out code
-        uses: actions/checkout@v4
+      - name: Check out code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           fetch-depth: 2
 
-      - name: 🧰 Install build dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+      - name: Install build dependencies
+        uses: awalsh128/cache-apt-pkgs-action@acb598e5ddbc6f68a970c5da0688d2f3a9f04d05 # v1.6.0
+        with:
+          packages: libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+          version: v1 # cache key
 
-      - name: 🧰 Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: 🧰 Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: .nvmrc
-          cache: pnpm
 
-      - name: 🧰 Setup Rust toolchain
-        uses: actions-rust-lang/setup-rust-toolchain@v1
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Get pnpm store path
+        id: pnpm-store
+        run: echo "store-path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Restore pnpm cache
+        uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ${{ steps.pnpm-store.outputs.store-path }}
+          key: pnpm-cache-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-cache-
+
+      - name: Setup Rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@2b1f5e9b395427c92ee4e3331786ca3c37afe2d7 # v1.16.0
         with:
           rustflags: ''
           components: clippy, rustfmt
           cache: false
 
-      - name: 🧰 Setup nextest
-        uses: taiki-e/install-action@nextest
+      - name: Cache Cargo registry and index
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae #v5.0.5
+        with:
+          path: |
+            ~/.cargo/registry
+            ~/.cargo/git
+            ~/.cargo/bin
+          key: ${{ runner.os }}-${{ runner.arch }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+
+      - name: Mount sccache disk cache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: useblacksmith/stickydisk@13af8883542ca949a717e70fef89d15edbb29d88 # v1.2.0
+        with:
+          key: ${{ github.repository }}-turbo-sccache
+          path: /mnt/sccache
+
+      - name: Setup sccache
+        if: needs.skip-if-clean.outputs.internal == 'true'
+        uses: mozilla-actions/sccache-action@9e7fa8a12102821edf02ca5dbea1acd0f89a2696 # v0.0.10
+
+      - name: Setup binstall
+        uses: cargo-bins/cargo-binstall@dc19f1e48450eefe5a29b8da6c6b00a87d730b37 # v1.18.1
+
+      - name: Setup nextest
+        run: cargo binstall --no-confirm --secure cargo-nextest@0.9.133
 
       # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
       # back to a cached cargo install
-      - name: 🧰 Setup cargo-sqlx
-        uses: taiki-e/cache-cargo-install-action@v2
+      - name: Setup cargo-sqlx
+        uses: taiki-e/cache-cargo-install-action@f9eed3e4680f27610dc6d8c67be1b88593f7dade # v3.0.6
         with:
-          tool: sqlx-cli
+          tool: sqlx-cli@0.8.6
           locked: false
           no-default-features: true
           features: rustls,postgres
 
-      - name: 💨 Setup Turbo cache
-        uses: rharkor/caching-for-turbo@v1.8
+      - name: Setup Turbo cache
+        uses: rharkor/caching-for-turbo@56219402aacc0d06b650d898c222996dbc1191ec # v2.3.14
 
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: pnpm install
 
-      - name: ⚙️ Set app environment
+      - name: Set app environment
         working-directory: packages/app-lib
         run: cp .env.staging .env
 
       # check if labrinth tests will actually run (cache miss)
-      - name: 🔍 Check if labrinth tests need to run
+      - name: Check if labrinth tests need to run
         id: check-labrinth
         run: |
           LABRINTH_TEST_STATUS=$(pnpm turbo run test --filter=@modrinth/labrinth --dry-run=json | jq -r '.tasks[] | select(.task == "test") | .cache.status')
@@ -86,21 +187,21 @@ jobs:
             echo "needs_services=true" >> $GITHUB_OUTPUT
           fi
 
-      - name: ⚙️ Start services
+      - name: Start services
         if: steps.check-labrinth.outputs.needs_services == 'true'
         run: docker compose up --wait
 
-      - name: ⚙️ Setup labrinth environment and database
+      - name: Setup labrinth environment and database
         if: steps.check-labrinth.outputs.needs_services == 'true'
         working-directory: apps/labrinth
         run: |
           cp .env.local .env
           sqlx database setup
 
-      - name: 🔍 Lint and test
+      - name: Lint and test
         run: pnpm run ci
 
-      - name: 🔍 Verify intl:extract has been run
+      - name: Verify intl:extract has been run
         run: |
           pnpm turbo run intl:extract --force
           git diff --exit-code --color */*/src/locales/en-US/index.json

.gitignore

@@ -78,3 +78,11 @@ storybook-static
 
 # frontend robots.txt
 apps/frontend/src/public/robots.txt
+
+# Oh My Code
+.omc/
+
+# Local dry-run output for scripts/build-theseus-release-notes.mjs
+/test_result.md
+
+packages/tooling-config/script-utils/import-sort.js

.npmrc

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

.nvmrc

@@ -1 +1 @@
-20.19.2
+24.15.0

.vscode/settings.json

@@ -29,5 +29,7 @@
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	}
+	},
+	"css.lint.unknownAtRules": "ignore",
+	"scss.lint.unknownAtRules": "ignore"
 }

AGENTS.md

@@ -1 +0,0 @@
-See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.

AGENTS.md

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

CLAUDE.md

@@ -30,7 +30,7 @@ This is the Modrinth monorepo — it contains all Modrinth projects, both fronte
 | `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                              |
+| `utils`            | Shared utility functions (mostly deprecated)          |
 | `moderation`       | Moderation utilities                                  |
 | `daedalus`         | Daedalus protocol                                     |
 | `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
@@ -67,18 +67,6 @@ Each project may have its own `CLAUDE.md` with detailed instructions:
 - [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
 - [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
-## Skills (`.claude/skills/`)
-
-Project-specific skill files with detailed patterns. Use them when the task matches:
-
-- **`api-module`** — Adding a new API endpoint module to `packages/api-client` (types, module class, registry registration)
-- **`cross-platform-pages`** — Building a page that needs to work in both the website (`apps/frontend`) and the desktop app (`apps/app-frontend`)
-- **`dependency-injection`** — Creating or wiring up a `provide`/`inject` context for platform abstraction or deep component state sharing
-- **`figma-mcp`** — Translating a Figma design into Vue components using the Figma MCP tools
-- **`i18n-convert`** — Converting hardcoded English strings in Vue SFCs into the `@modrinth/ui` i18n system (`defineMessages`, `formatMessage`, `IntlFormatted`)
-- **`multistage-modals`** — Building a wizard-like modal with multiple stages, progress tracking, and per-stage buttons using `MultiStageModal`
-- **`tanstack-query`** — Fetching, caching, or mutating server data with `@tanstack/vue-query` (queries, mutations, invalidation, optimistic updates)
-
 ## Code Guidelines
 
 ### Comments
@@ -97,6 +85,8 @@ Project-specific skill files with detailed patterns. Use them when the task matc
 ### 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)
 
@@ -115,14 +105,6 @@ For Edit, use: `		private byte tag;` (copy everything after →, including the t
 
 **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.
 
-## Skills
+## Standards
 
-Project-specific skills (patterns, conventions, and implementation guides) are located in [`.claude/skills/`](./.claude/skills/). Each skill has a `SKILL.md` describing the pattern:
-
-- **[Dependency Injection](./.claude/skills/dependency-injection/SKILL.md)** — Vue provide/inject DI layer using `createContext`
-- **[Cross-Platform Pages](./.claude/skills/cross-platform-pages/SKILL.md)** — Shared component architecture across Nuxt and Tauri frontends
-- **[Multistage Modals](./.claude/skills/multistage-modals/SKILL.md)** — Wizard-like modal flows with `MultiStageModal`
-- **[Figma MCP](./.claude/skills/figma-mcp/SKILL.md)** — Translating Figma designs to Modrinth Vue components
-- **[i18n Convert](./.claude/skills/i18n-convert/SKILL.md)** — Converting hard-coded strings to vue-i18n localization
-- **[API Module](./.claude/skills/api-module/SKILL.md)** — Adding new endpoint modules to `@modrinth/api-client`
-- **[TanStack Query](./.claude/skills/tanstack-query/SKILL.md)** — Server state management with `@tanstack/vue-query` v5
+Standards available at the @standards/ folder.

Cargo.lock

@@ -27,7 +27,7 @@ checksum = "daa239b93927be1ff123eebada5a3ff23e89f0124ccb8609234e5103d5a5ae6d"
 dependencies = [
  "actix-utils",
  "actix-web",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "futures-util",
  "log",
  "once_cell",
@@ -46,7 +46,7 @@ dependencies = [
  "actix-web",
  "bitflags 2.9.4",
  "bytes",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "futures-core",
  "http-range",
  "log",
@@ -72,10 +72,10 @@ dependencies = [
  "brotli",
  "bytes",
  "bytestring",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "encoding_rs",
  "flate2",
- "foldhash",
+ "foldhash 0.1.5",
  "futures-core",
  "h2 0.3.27",
  "http 0.2.12",
@@ -226,9 +226,9 @@ dependencies = [
  "bytestring",
  "cfg-if",
  "cookie 0.16.2",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "encoding_rs",
- "foldhash",
+ "foldhash 0.1.5",
  "futures-core",
  "futures-util",
  "impl-more",
@@ -914,6 +914,18 @@ dependencies = [
  "arrayvec",
 ]
 
+[[package]]
+name = "aws-credential-types"
+version = "1.2.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3cd362783681b15d136480ad555a099e82ecd8e2d10a841e14dfd0078d67fee3"
+dependencies = [
+ "aws-smithy-async",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "zeroize",
+]
+
 [[package]]
 name = "aws-creds"
 version = "0.39.0"
@@ -964,6 +976,295 @@ dependencies = [
  "thiserror 2.0.17",
 ]
 
+[[package]]
+name = "aws-runtime"
+version = "1.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c635c2dc792cb4a11ce1a4f392a925340d1bdf499289b5ec1ec6810954eb43f5"
+dependencies = [
+ "aws-credential-types",
+ "aws-sigv4",
+ "aws-smithy-async",
+ "aws-smithy-eventstream",
+ "aws-smithy-http",
+ "aws-smithy-runtime",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "aws-types",
+ "bytes",
+ "fastrand 2.3.0",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 0.4.6",
+ "http-body 1.0.1",
+ "percent-encoding",
+ "pin-project-lite",
+ "tracing",
+ "uuid 1.18.1",
+]
+
+[[package]]
+name = "aws-sdk-s3"
+version = "1.122.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94c2ca0cba97e8e279eb6c0b2d0aa10db5959000e602ab2b7c02de6b85d4c19b"
+dependencies = [
+ "aws-credential-types",
+ "aws-runtime",
+ "aws-sigv4",
+ "aws-smithy-async",
+ "aws-smithy-checksums",
+ "aws-smithy-eventstream",
+ "aws-smithy-http",
+ "aws-smithy-json",
+ "aws-smithy-observability",
+ "aws-smithy-runtime",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "aws-smithy-xml",
+ "aws-types",
+ "bytes",
+ "fastrand 2.3.0",
+ "hex",
+ "hmac",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "lru",
+ "percent-encoding",
+ "regex-lite",
+ "sha2",
+ "tracing",
+ "url",
+]
+
+[[package]]
+name = "aws-sigv4"
+version = "1.3.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "efa49f3c607b92daae0c078d48a4571f599f966dce3caee5f1ea55c4d9073f99"
+dependencies = [
+ "aws-credential-types",
+ "aws-smithy-eventstream",
+ "aws-smithy-http",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "bytes",
+ "form_urlencoded",
+ "hex",
+ "hmac",
+ "http 0.2.12",
+ "http 1.3.1",
+ "percent-encoding",
+ "sha2",
+ "time",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-async"
+version = "1.2.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52eec3db979d18cb807fc1070961cc51d87d069abe9ab57917769687368a8c6c"
+dependencies = [
+ "futures-util",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "aws-smithy-checksums"
+version = "0.64.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ddcf418858f9f3edd228acb8759d77394fed7531cce78d02bdda499025368439"
+dependencies = [
+ "aws-smithy-http",
+ "aws-smithy-types",
+ "bytes",
+ "crc-fast",
+ "hex",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "http-body-util",
+ "md-5",
+ "pin-project-lite",
+ "sha1",
+ "sha2",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-eventstream"
+version = "0.60.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "35b9c7354a3b13c66f60fe4616d6d1969c9fd36b1b5333a5dfb3ee716b33c588"
+dependencies = [
+ "aws-smithy-types",
+ "bytes",
+ "crc32fast",
+]
+
+[[package]]
+name = "aws-smithy-http"
+version = "0.63.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "630e67f2a31094ffa51b210ae030855cb8f3b7ee1329bdd8d085aaf61e8b97fc"
+dependencies = [
+ "aws-smithy-eventstream",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "bytes",
+ "bytes-utils",
+ "futures-core",
+ "futures-util",
+ "http 1.3.1",
+ "http-body 1.0.1",
+ "http-body-util",
+ "percent-encoding",
+ "pin-project-lite",
+ "pin-utils",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-http-client"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "12fb0abf49ff0cab20fd31ac1215ed7ce0ea92286ba09e2854b42ba5cabe7525"
+dependencies = [
+ "aws-smithy-async",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "h2 0.3.27",
+ "h2 0.4.12",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 0.4.6",
+ "hyper 0.14.32",
+ "hyper 1.7.0",
+ "hyper-rustls 0.24.2",
+ "hyper-rustls 0.27.7",
+ "hyper-util",
+ "pin-project-lite",
+ "rustls 0.21.12",
+ "rustls 0.23.32",
+ "rustls-native-certs 0.8.1",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls 0.26.4",
+ "tower",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-json"
+version = "0.62.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3cb96aa208d62ee94104645f7b2ecaf77bf27edf161590b6224bfbac2832f979"
+dependencies = [
+ "aws-smithy-types",
+]
+
+[[package]]
+name = "aws-smithy-observability"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0a46543fbc94621080b3cf553eb4cbbdc41dd9780a30c4756400f0139440a1d"
+dependencies = [
+ "aws-smithy-runtime-api",
+]
+
+[[package]]
+name = "aws-smithy-runtime"
+version = "1.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3df87c14f0127a0d77eb261c3bc45d5b4833e2a1f63583ebfb728e4852134ee"
+dependencies = [
+ "aws-smithy-async",
+ "aws-smithy-http",
+ "aws-smithy-http-client",
+ "aws-smithy-observability",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "bytes",
+ "fastrand 2.3.0",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 0.4.6",
+ "http-body 1.0.1",
+ "http-body-util",
+ "pin-project-lite",
+ "pin-utils",
+ "tokio",
+ "tracing",
+]
+
+[[package]]
+name = "aws-smithy-runtime-api"
+version = "1.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49952c52f7eebb72ce2a754d3866cc0f87b97d2a46146b79f80f3a93fb2b3716"
+dependencies = [
+ "aws-smithy-async",
+ "aws-smithy-types",
+ "bytes",
+ "http 0.2.12",
+ "http 1.3.1",
+ "pin-project-lite",
+ "tokio",
+ "tracing",
+ "zeroize",
+]
+
+[[package]]
+name = "aws-smithy-types"
+version = "1.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b3a26048eeab0ddeba4b4f9d51654c79af8c3b32357dc5f336cee85ab331c33"
+dependencies = [
+ "base64-simd",
+ "bytes",
+ "bytes-utils",
+ "futures-core",
+ "http 0.2.12",
+ "http 1.3.1",
+ "http-body 0.4.6",
+ "http-body 1.0.1",
+ "http-body-util",
+ "itoa",
+ "num-integer",
+ "pin-project-lite",
+ "pin-utils",
+ "ryu",
+ "serde",
+ "time",
+ "tokio",
+ "tokio-util",
+]
+
+[[package]]
+name = "aws-smithy-xml"
+version = "0.60.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11b2f670422ff42bf7065031e72b45bc52a3508bd089f743ea90731ca2b6ea57"
+dependencies = [
+ "xmlparser",
+]
+
+[[package]]
+name = "aws-types"
+version = "1.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d980627d2dd7bfc32a3c025685a033eeab8d365cc840c631ef59d1b8f428164"
+dependencies = [
+ "aws-credential-types",
+ "aws-smithy-async",
+ "aws-smithy-runtime-api",
+ "aws-smithy-types",
+ "rustc_version",
+ "tracing",
+]
+
 [[package]]
 name = "axum"
 version = "0.8.8"
@@ -1052,6 +1353,16 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
+[[package]]
+name = "base64-simd"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "339abbe78e73178762e23bea9dfd08e697eb3f3301cd4be981c0f78ba5859195"
+dependencies = [
+ "outref",
+ "vsimd",
+]
+
 [[package]]
 name = "base64ct"
 version = "1.8.0"
@@ -1067,7 +1378,7 @@ dependencies = [
  "bitflags 2.9.4",
  "cexpr",
  "clang-sys",
- "itertools 0.13.0",
+ "itertools 0.12.1",
  "log",
  "prettyplease",
  "proc-macro2",
@@ -1372,6 +1683,16 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "bytes-utils"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7dafe3a8757b027e2be6e4e5601ed563c55989fcf1546e933c66c8eb3a058d35"
+dependencies = [
+ "bytes",
+ "either",
+]
+
 [[package]]
 name = "bytestring"
 version = "1.5.0"
@@ -1572,18 +1893,19 @@ dependencies = [
 
 [[package]]
 name = "cidre"
-version = "0.11.3"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0cc0eb4d7faf9f94493eaf7e7c0534dee2dfa9642353382039572abb4e0e56e9"
+checksum = "0c903ff1729987d29e07295d2c5841993db25ff86cca43bee04505878d3ec1a7"
 dependencies = [
+ "cc",
  "cidre-macros",
 ]
 
 [[package]]
 name = "cidre-macros"
-version = "0.3.0"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82bc2f84c0baaa09299da3a03864491549685912c1e338a54211e00589dc1e4c"
+checksum = "6facfeffa8b9792dc014bb4e65e364d13518b74e06783d56249810a3e48cfad7"
 
 [[package]]
 name = "cityhash-rs"
@@ -1902,6 +2224,15 @@ dependencies = [
  "unicode-segmentation",
 ]
 
+[[package]]
+name = "convert_case"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "633458d4ef8c78b72454de2d54fd6ab2e60f9e02be22f3c6104cdc8a4e0fceb9"
+dependencies = [
+ "unicode-segmentation",
+]
+
 [[package]]
 name = "cookie"
 version = "0.16.2"
@@ -2016,6 +2347,18 @@ version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
 
+[[package]]
+name = "crc-fast"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd92aca2c6001b1bf5ba0ff84ee74ec8501b52bbef0cac80bf25a6c1d87a83d"
+dependencies = [
+ "crc",
+ "digest",
+ "rustversion",
+ "spin 0.10.0",
+]
+
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -2450,21 +2793,23 @@ dependencies = [
 
 [[package]]
 name = "derive_more"
-version = "2.0.1"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "093242cf7570c207c83073cf82f79706fe7b8317e98620a47d5be7c3d8497678"
+checksum = "d751e9e49156b02b44f9c1815bcb94b984cdcc4396ecc32521c739452808b134"
 dependencies = [
  "derive_more-impl",
 ]
 
 [[package]]
 name = "derive_more-impl"
-version = "2.0.1"
+version = "2.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bda628edc44c4bb645fbe0f758797143e4e07926f7ebf4e9bdfbd3d2ce621df3"
+checksum = "799a97264921d8623a957f6c3b9011f3b5492f557bbb7a5a19b7fa6d06ba8dcb"
 dependencies = [
+ "convert_case 0.10.0",
  "proc-macro2",
  "quote",
+ "rustc_version",
  "syn 2.0.106",
  "unicode-xid",
 ]
@@ -2582,7 +2927,7 @@ version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "330c60081dcc4c72131f8eb70510f1ac07223e5d4163db481a04a0befcffa412"
 dependencies = [
- "libloading 0.8.8",
+ "libloading 0.7.4",
 ]
 
 [[package]]
@@ -2938,7 +3283,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -3139,7 +3484,7 @@ checksum = "da0e4dd2a88388a1f4ccc7c9ce104604dab68d9f408dc34cd45823d5a9069095"
 dependencies = [
  "futures-core",
  "futures-sink",
- "spin",
+ "spin 0.9.8",
 ]
 
 [[package]]
@@ -3154,6 +3499,12 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
 
+[[package]]
+name = "foldhash"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
+
 [[package]]
 name = "foreign-types"
 version = "0.3.2"
@@ -3805,7 +4156,7 @@ checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
 dependencies = [
  "allocator-api2",
  "equivalent",
- "foldhash",
+ "foldhash 0.1.5",
 ]
 
 [[package]]
@@ -3813,6 +4164,11 @@ name = "hashbrown"
 version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5419bdc4f6a9207fbeba6d11b604d481addf78ecd10c11ad51e76c2f6482748d"
+dependencies = [
+ "allocator-api2",
+ "equivalent",
+ "foldhash 0.2.0",
+]
 
 [[package]]
 name = "hashlink"
@@ -4244,7 +4600,7 @@ dependencies = [
  "libc",
  "percent-encoding",
  "pin-project-lite",
- "socket2 0.6.1",
+ "socket2 0.5.10",
  "system-configuration",
  "tokio",
  "tower-service",
@@ -4581,9 +4937,9 @@ dependencies = [
 
 [[package]]
 name = "io-uring"
-version = "0.7.10"
+version = "0.7.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "046fa2d4d00aea763528b4950358d0ead425372445dc8ff86312b3c69ff7727b"
+checksum = "4d09b98f7eace8982db770e4408e7470b028ce513ac28fecdc6bf4c30fe92b62"
 dependencies = [
  "bitflags 2.9.4",
  "cfg-if",
@@ -4641,7 +4997,7 @@ checksum = "e04d7f318608d35d4b61ddd75cbdaee86b023ebe2bd5a66ee0915f0bf93095a9"
 dependencies = [
  "hermit-abi 0.5.2",
  "libc",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -4902,6 +5258,7 @@ dependencies = [
  "async-minecraft-ping",
  "async-stripe",
  "async-trait",
+ "aws-sdk-s3",
  "base64 0.22.1",
  "bitflags 2.9.4",
  "bytes",
@@ -4914,7 +5271,7 @@ dependencies = [
  "const_format",
  "dashmap",
  "deadpool-redis",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "dotenv-build",
  "dotenvy",
  "either",
@@ -4922,6 +5279,7 @@ dependencies = [
  "eyre",
  "futures",
  "futures-util",
+ "heck 0.5.0",
  "hex",
  "hmac",
  "hyper-rustls 0.27.7",
@@ -4940,12 +5298,12 @@ dependencies = [
  "paste",
  "path-util",
  "prometheus",
+ "quick-xml 0.38.3",
  "rand 0.8.5",
  "rand_chacha 0.3.1",
  "redis",
  "regex",
  "reqwest 0.12.24",
- "rust-s3",
  "rust_decimal",
  "rust_iso3166",
  "rustls 0.23.32",
@@ -4972,7 +5330,7 @@ dependencies = [
  "urlencoding",
  "utoipa",
  "utoipa-actix-web",
- "utoipa-swagger-ui",
+ "utoipa-scalar",
  "uuid 1.18.1",
  "validator",
  "webp",
@@ -5004,7 +5362,7 @@ version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
 dependencies = [
- "spin",
+ "spin 0.9.8",
 ]
 
 [[package]]
@@ -5105,7 +5463,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
  "cfg-if",
- "windows-targets 0.53.5",
+ "windows-targets 0.48.5",
 ]
 
 [[package]]
@@ -5226,6 +5584,15 @@ dependencies = [
  "imgref",
 ]
 
+[[package]]
+name = "lru"
+version = "0.16.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f66e8d5d03f609abc3a39e6f08e4164ebf1447a732906d39eb9b99b7919ef39"
+dependencies = [
+ "hashbrown 0.16.0",
+]
+
 [[package]]
 name = "lru-cache"
 version = "0.1.2"
@@ -5514,7 +5881,7 @@ name = "modrinth-util"
 version = "0.0.0"
 dependencies = [
  "actix-web",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "dotenvy",
  "eyre",
  "modrinth-log",
@@ -5580,7 +5947,7 @@ dependencies = [
  "arc-swap",
  "bytes",
  "chrono",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "reqwest 0.12.24",
  "rust_decimal",
  "rust_iso3166",
@@ -6467,6 +6834,12 @@ dependencies = [
  "thiserror 2.0.17",
 ]
 
+[[package]]
+name = "outref"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a80800c0488c3a21695ea981a54918fbb37abf04f4d0720c453632255e2ff0e"
+
 [[package]]
 name = "owo-colors"
 version = "4.2.3"
@@ -6591,7 +6964,7 @@ checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a"
 name = "path-util"
 version = "0.0.0"
 dependencies = [
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "itertools 0.14.0",
  "serde",
  "typed-path",
@@ -7352,7 +7725,7 @@ dependencies = [
  "quinn-udp",
  "rustc-hash",
  "rustls 0.23.32",
- "socket2 0.6.1",
+ "socket2 0.5.10",
  "thiserror 2.0.17",
  "tokio",
  "tracing",
@@ -7389,9 +7762,9 @@ dependencies = [
  "cfg_aliases",
  "libc",
  "once_cell",
- "socket2 0.6.1",
+ "socket2 0.5.10",
  "tracing",
- "windows-sys 0.60.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -7949,40 +8322,6 @@ dependencies = [
  "zeroize",
 ]
 
-[[package]]
-name = "rust-embed"
-version = "8.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb44e1917075637ee8c7bcb865cf8830e3a92b5b1189e44e3a0ab5a0d5be314b"
-dependencies = [
- "rust-embed-impl",
- "rust-embed-utils",
- "walkdir",
-]
-
-[[package]]
-name = "rust-embed-impl"
-version = "8.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "382499b49db77a7c19abd2a574f85ada7e9dbe125d5d1160fa5cad7c4cf71fc9"
-dependencies = [
- "proc-macro2",
- "quote",
- "rust-embed-utils",
- "syn 2.0.106",
- "walkdir",
-]
-
-[[package]]
-name = "rust-embed-utils"
-version = "8.8.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21fcbee55c2458836bcdbfffb6ec9ba74bbc23ca7aa6816015a3dd2c4d8fc185"
-dependencies = [
- "sha2",
- "walkdir",
-]
-
 [[package]]
 name = "rust-ini"
 version = "0.21.3"
@@ -8098,7 +8437,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.4.15",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -8111,7 +8450,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.11.0",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -9092,6 +9431,12 @@ dependencies = [
  "lock_api",
 ]
 
+[[package]]
+name = "spin"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d5fe4ccb98d9c292d56fec89a5e07da7fc4cf0dc11e156b41793132775d3e591"
+
 [[package]]
 name = "spki"
 version = "0.7.3"
@@ -9307,7 +9652,7 @@ dependencies = [
 name = "sqlx-tracing"
 version = "0.2.0"
 dependencies = [
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "futures",
  "opentelemetry",
  "opentelemetry-testing",
@@ -9333,6 +9678,7 @@ dependencies = [
  "cfg-if",
  "libc",
  "psm",
+ "windows-sys 0.52.0",
  "windows-sys 0.59.0",
 ]
 
@@ -10097,7 +10443,7 @@ dependencies = [
  "getrandom 0.3.3",
  "once_cell",
  "rustix 1.1.2",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -10180,7 +10526,7 @@ dependencies = [
  "daedalus",
  "dashmap",
  "data-url",
- "derive_more 2.0.1",
+ "derive_more 2.1.1",
  "dirs",
  "discord-rich-presence",
  "dotenvy",
@@ -10188,6 +10534,7 @@ dependencies = [
  "either",
  "encoding_rs",
  "enumset",
+ "eyre",
  "flate2",
  "fs4",
  "futures",
@@ -10240,6 +10587,7 @@ dependencies = [
 name = "theseus_gui"
 version = "1.0.0-local"
 dependencies = [
+ "async_zip",
  "chrono",
  "daedalus",
  "dashmap",
@@ -10257,6 +10605,7 @@ dependencies = [
  "tauri-build",
  "tauri-plugin-deep-link",
  "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tauri-plugin-http",
  "tauri-plugin-opener",
  "tauri-plugin-os",
@@ -11196,30 +11545,17 @@ dependencies = [
 ]
 
 [[package]]
-name = "utoipa-swagger-ui"
-version = "9.0.2"
+name = "utoipa-scalar"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d047458f1b5b65237c2f6dc6db136945667f40a7668627b3490b9513a3d43a55"
+checksum = "59559e1509172f6b26c1cdbc7247c4ddd1ac6560fe94b584f81ee489b141f719"
 dependencies = [
  "actix-web",
- "base64 0.22.1",
- "mime_guess",
- "regex",
- "rust-embed",
  "serde",
  "serde_json",
- "url",
  "utoipa",
- "utoipa-swagger-ui-vendored",
- "zip 3.0.0",
 ]
 
-[[package]]
-name = "utoipa-swagger-ui-vendored"
-version = "0.1.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2eebbbfe4093922c2b6734d7c679ebfebd704a0d7e56dfcb0d05818ce28977d"
-
 [[package]]
 name = "uuid"
 version = "0.8.2"
@@ -11335,6 +11671,12 @@ version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6a02e4885ed3bc0f2de90ea6dd45ebcbb66dacffe03547fadbb0eeae2770887d"
 
+[[package]]
+name = "vsimd"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c3082ca00d5a5ef149bb8b555a72ae84c9c59f7250f013ac822ac2e49b19c64"
+
 [[package]]
 name = "vswhom"
 version = "0.1.0"
@@ -11755,7 +12097,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
@@ -12401,6 +12743,12 @@ version = "0.8.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6fd8403733700263c6eb89f192880191f1b83e332f7a20371ddcf421c4a337c7"
 
+[[package]]
+name = "xmlparser"
+version = "0.13.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "66fee0b777b0f5ac1c69bb06d361268faafa61cd4682ae064a171c16c433e9e4"
+
 [[package]]
 name = "yaserde"
 version = "0.12.0"
@@ -12604,20 +12952,6 @@ dependencies = [
  "syn 2.0.106",
 ]
 
-[[package]]
-name = "zip"
-version = "3.0.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12598812502ed0105f607f941c386f43d441e00148fce9dec3ca5ffb0bde9308"
-dependencies = [
- "arbitrary",
- "crc32fast",
- "flate2",
- "indexmap 2.11.4",
- "memchr",
- "zopfli",
-]
-
 [[package]]
 name = "zip"
 version = "4.6.1"

Cargo.toml

@@ -44,6 +44,11 @@ async-tungstenite = { version = "0.31.0", default-features = false, features = [
 ] }
 async-walkdir = "2.1.0"
 async_zip = "0.0.18"
+aws-sdk-s3 = { version = "=1.122.0", default-features = false, features = [
+  "default-https-client",
+  "rt-tokio",
+  "rustls",
+] }
 base64 = "0.22.1"
 bitflags = "2.9.4"
 bytemuck = "1.24.0"
@@ -51,7 +56,7 @@ bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
 chrono = "0.4.42"
-cidre = { version = "0.11.3", default-features = false, features = [
+cidre = { version = "0.15.0", default-features = false, features = [
   "macos_15_0"
 ] }
 clap = "4.5.48"
@@ -64,7 +69,7 @@ darling = { version = "0.23" }
 dashmap = "6.1.0"
 data-url = "0.3.2"
 deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
-derive_more = "2.0.1"
+derive_more = "2.1.1"
 directories = "6.0.0"
 dirs = "6.0.0"
 discord-rich-presence = "1.0.0"
@@ -179,6 +184,7 @@ tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
+tauri-plugin-fs = "2.4.5"
 tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
@@ -207,7 +213,7 @@ url = "2.5.7"
 urlencoding = "2.1.3"
 utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
 utoipa-actix-web = { version = "0.1.2" }
-utoipa-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
+utoipa-scalar = { version = "0.3.0", default-features = false }
 uuid = "1.18.1"
 validator = "0.20.0"
 webp = { version = "0.3.1", default-features = false }
@@ -257,6 +263,7 @@ read_zero_byte_vec = "warn"
 redundant_clone = "warn"
 redundant_feature_names = "warn"
 redundant_type_annotations = "warn"
+result_large_err = "allow"
 todo = "warn"
 too_many_arguments = "allow"
 uninlined_format_args = "warn"
@@ -272,10 +279,11 @@ opt-level = "s"  # Optimize for binary size
 strip = true  # Remove debug symbols
 lto = true  # Enables link to optimizations
 panic = "abort"  # Strip expensive panic clean-up logic
-codegen-units = 1  # Compile crates one after another so the compiler can optimize better
 
 # Specific profile for labrinth production builds
 [profile.release-labrinth]
 inherits = "release"
+opt-level = 2
 strip = false  # Keep debug symbols for Sentry
+lto = "thin"  # Enable LTO but keep compile times reasonable
 panic = "unwind"  # Don't exit the whole app on panic in production

README.md

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

apps/app-frontend/package.json

@@ -13,6 +13,7 @@
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
+		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
@@ -22,6 +23,7 @@
 		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
+		"@tauri-apps/plugin-fs": "^2.4.5",
 		"@tauri-apps/plugin-http": "~2.5.7",
 		"@tauri-apps/plugin-opener": "^2.2.6",
 		"@tauri-apps/plugin-os": "^2.2.1",
@@ -34,13 +36,13 @@
 		"fuse.js": "^6.6.2",
 		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
+		"overlayscrollbars": "^2.15.1",
 		"pinia": "^3.0.0",
 		"posthog-js": "^1.158.2",
 		"three": "^0.172.0",
 		"vite-svg-loader": "^5.1.0",
 		"vue": "^3.5.13",
 		"vue-i18n": "^10.0.0",
-		"vue-multiselect": "3.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
@@ -59,7 +61,7 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^6.0.0",
+		"vite": "^8.0.0",
 		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},

apps/app-frontend/src/App.vue

@@ -1,5 +1,13 @@
 <script setup>
-import { AuthFeature, PanelVersionFeature, TauriModrinthClient } from '@modrinth/api-client'
+import { Intercom, shutdown as shutdownIntercom } from '@intercom/messenger-js-sdk'
+import {
+	AuthFeature,
+	NodeAuthFeature,
+	nodeAuthState,
+	PanelVersionFeature,
+	TauriModrinthClient,
+	VerboseLoggingFeature,
+} from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
@@ -11,15 +19,12 @@ import {
 	LibraryIcon,
 	LogInIcon,
 	LogOutIcon,
-	MaximizeIcon,
-	MinimizeIcon,
 	NewspaperIcon,
 	NotepadTextIcon,
 	PlusIcon,
 	RefreshCwIcon,
-	RestoreIcon,
 	RightArrowIcon,
-	ServerIcon,
+	ServerStackIcon,
 	SettingsIcon,
 	UserIcon,
 	WorldIcon,
@@ -28,13 +33,13 @@ import {
 import {
 	Admonition,
 	Avatar,
-	Button,
 	ButtonStyled,
 	commonMessages,
 	ContentInstallModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
+	LoadingBar,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
@@ -49,10 +54,11 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
@@ -61,30 +67,32 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
-import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
+import AppActionBar from '@/components/ui/AppActionBar.vue'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import ErrorModal from '@/components/ui/ErrorModal.vue'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import AddServerToInstanceModal from '@/components/ui/install_flow/AddServerToInstanceModal.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
-import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
+import UnknownPackWarningModal from '@/components/ui/install_flow/UnknownPackWarningModal.vue'
 import MinecraftAuthErrorModal from '@/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
 import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
+import ModpackAlreadyInstalledModal from '@/components/ui/modal/ModpackAlreadyInstalledModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
-import RunningAppBar from '@/components/ui/RunningAppBar.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
-import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import WindowControls from '@/components/ui/WindowControls.vue'
+import { useIntercomPositioning } from '@/composables/intercom-positioning'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { config } from '@/config'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
-import { get_user } from '@/helpers/cache.js'
+import { get_user, get_version } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
 import { create_profile_and_install_from_file } from '@/helpers/pack'
@@ -107,8 +115,10 @@ import {
 } from '@/providers/download-progress.ts'
 import { createServerInstall, provideServerInstall } from '@/providers/server-install'
 import { setupProviders } from '@/providers/setup'
+import { setupAuthProvider } from '@/providers/setup/auth'
+import { setupLoadingStateProvider } from '@/providers/setup/loading-state'
 import { useError } from '@/store/error.js'
-import { useLoading, useTheming } from '@/store/state'
+import { useTheming } from '@/store/state'
 
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
@@ -116,6 +126,17 @@ import { AppNotificationManager } from './providers/app-notifications'
 import { AppPopupNotificationManager } from './providers/app-popup-notifications'
 
 const themeStore = useTheming()
+const router = useRouter()
+const route = useRoute()
+const intercomBubblePositioning = useIntercomPositioning({ route, themeStore })
+const {
+	sidebarToggled,
+	forceSidebar,
+	sidebarVisible,
+	intercomBubblePosition,
+	updateIntercomBubbleStyles,
+	clearIntercomBubbleStyles,
+} = intercomBubblePositioning
 
 const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
@@ -127,17 +148,35 @@ const { addPopupNotification } = popupNotificationManager
 
 const tauriApiClient = new TauriModrinthClient({
 	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
+	labrinthBaseUrl: config.labrinthBaseUrl,
+	archonBaseUrl: config.archonBaseUrl,
 	features: [
+		new NodeAuthFeature({
+			getAuth: () => nodeAuthState.getAuth?.() ?? null,
+			refreshAuth: async () => {
+				if (nodeAuthState.refreshAuth) {
+					await nodeAuthState.refreshAuth()
+				}
+			},
+		}),
 		new AuthFeature({
-			token: async () => (await getCreds()).session,
+			token: async () => (await getCreds())?.session,
 		}),
 		new PanelVersionFeature(),
+		new VerboseLoggingFeature(),
 	],
 })
 provideModrinthClient(tauriApiClient)
 providePageContext({
 	hierarchicalSidebarAvailable: ref(true),
 	showAds: ref(false),
+	...intercomBubblePositioning.pageContext,
+	featureFlags: {
+		serverRamAsBytesAlwaysOn: computed(() =>
+			themeStore.getFeatureFlag('server_ram_as_bytes_always_on'),
+		),
+	},
+	openExternalUrl: (url) => openUrl(url),
 })
 provideModalBehavior({
 	noblur: computed(() => !themeStore.advancedRendering),
@@ -147,17 +186,21 @@ provideModalBehavior({
 
 const {
 	installationModal,
+	unknownPackWarningModal,
+	fetchExistingInstanceNames,
 	handleCreate,
 	handleBrowseModpacks,
 	searchModpacks,
 	getProjectVersions,
-} = setupProviders(notificationManager)
+	getLoaderManifest,
+	setModpackAlreadyInstalledModal,
+	handleModpackDuplicateCreateAnyway,
+	handleModpackDuplicateGoToInstance,
+} = setupProviders(notificationManager, popupNotificationManager)
 
 const news = ref([])
 const availableSurvey = ref(false)
 
-const urlModal = ref(null)
-
 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
 	offline.value = true
@@ -211,6 +254,8 @@ onMounted(async () => {
 onUnmounted(async () => {
 	document.querySelector('body').removeEventListener('click', handleClick)
 	document.querySelector('body').removeEventListener('auxclick', handleAuxClick)
+	shutdownHostingIntercom()
+	clearIntercomBubbleStyles()
 
 	await unlistenUpdateDownload?.()
 })
@@ -392,18 +437,110 @@ const handleClose = async () => {
 	await getCurrentWindow().close()
 }
 
-const router = useRouter()
+const loading = setupLoadingStateProvider()
+loading.setEnabled(false)
+let initialLoadToken = loading.begin()
+let routerToken = null
+let suspenseToken = null
+
+let suspensePending = false
+
+const sidebarOverlayScrollbarsOptions = Object.freeze({
+	overflow: {
+		x: 'hidden',
+		y: 'scroll',
+	},
+})
+
+router.beforeEach(() => {
+	suspensePending = false
+	if (routerToken) loading.end(routerToken)
+	routerToken = loading.begin()
+})
 router.afterEach((to, from, failure) => {
 	trackEvent('PageView', {
 		path: to.path,
 		fromPath: from.path,
 		failed: failure,
 	})
+	setTimeout(() => {
+		if (!suspensePending && stateInitialized.value) {
+			if (initialLoadToken) {
+				loading.end(initialLoadToken)
+				initialLoadToken = null
+			}
+			if (routerToken) {
+				loading.end(routerToken)
+				routerToken = null
+			}
+		}
+	}, 100)
 })
-const route = useRoute()
 
-const loading = useLoading()
-loading.setEnabled(false)
+function onSuspensePending() {
+	suspensePending = true
+	if (suspenseToken) loading.end(suspenseToken)
+	suspenseToken = loading.begin()
+}
+
+function onSuspenseResolve() {
+	if (suspenseToken) {
+		loading.end(suspenseToken)
+		suspenseToken = null
+	}
+	if (routerToken) {
+		loading.end(routerToken)
+		routerToken = null
+	}
+}
+
+const queryClient = useQueryClient()
+
+watch(stateInitialized, (ready) => {
+	if (ready) {
+		if (initialLoadToken) {
+			loading.end(initialLoadToken)
+			initialLoadToken = null
+		}
+		if (routerToken) {
+			loading.end(routerToken)
+			routerToken = null
+		}
+
+		queryClient.prefetchQuery({
+			queryKey: ['servers'],
+			queryFn: async () => {
+				const response = await tauriApiClient.archon.servers_v0.list({ limit: 100 })
+				const hasMedalServers = response.servers.some((s) => s.is_medal)
+				if (hasMedalServers) {
+					const subscriptions = await tauriApiClient.labrinth.billing_internal.getSubscriptions()
+					for (const server of response.servers) {
+						if (server.is_medal) {
+							const sub = subscriptions.find((s) => s.metadata?.id === server.server_id)
+							if (sub) {
+								server.medal_expires = new Date(
+									new Date(sub.created).getTime() + 5 * 86400000,
+								).toISOString()
+							}
+						}
+					}
+				}
+				return response
+			},
+			staleTime: 30_000,
+		})
+		queryClient.prefetchQuery({
+			queryKey: ['billing', 'subscriptions'],
+			queryFn: () => tauriApiClient.labrinth.billing_internal.getSubscriptions(),
+			staleTime: 30_000,
+		})
+		queryClient.prefetchQuery({
+			queryKey: ['billing', 'payments'],
+			queryFn: () => tauriApiClient.labrinth.billing_internal.getPayments(),
+			staleTime: 30_000,
+		})
+	}
+})
 
 const error = useError()
 const errorModal = ref()
@@ -420,12 +557,15 @@ const {
 	preferredLoader: contentInstallPreferredLoader,
 	preferredGameVersion: contentInstallPreferredGameVersion,
 	releaseGameVersions: contentInstallReleaseGameVersions,
+	projectInfo: contentInstallProjectInfo,
 	handleInstallToInstance,
 	handleCreateAndInstall,
 	handleNavigate: handleContentInstallNavigate,
 	handleCancel: handleContentInstallCancel,
 	setContentInstallModal,
-	setInstallConfirmModal: setContentInstallConfirmModal,
+	setModpackAlreadyInstalledModal: setContentInstallModpackAlreadyInstalledModal,
+	handleModpackDuplicateCreateAnyway: handleContentInstallModpackDuplicateCreateAnyway,
+	handleModpackDuplicateGoToInstance: handleContentInstallModpackDuplicateGoToInstance,
 	setIncompatibilityWarningModal: setContentIncompatibilityWarningModal,
 } = contentInstall
 
@@ -435,11 +575,13 @@ const {
 	setInstallToPlayModal: setServerInstallToPlayModal,
 	setUpdateToPlayModal: setServerUpdateToPlayModal,
 	setAddServerToInstanceModal: setServerAddServerToInstanceModal,
+	playServerProject,
 } = serverInstall
 
 const modInstallModal = ref()
+const modpackAlreadyInstalledModal = ref()
+const contentInstallModpackAlreadyInstalledModal = ref()
 const addServerToInstanceModal = ref()
-const installConfirmModal = ref()
 const incompatibilityWarningModal = ref()
 const installToPlayModal = ref()
 const updateToPlayModal = ref()
@@ -448,9 +590,31 @@ const credentials = ref()
 
 const modrinthLoginFlowWaitModal = ref()
 
+setupAuthProvider(credentials, async (_redirectPath) => {
+	await signIn()
+})
+
+async function validateSession(sessionToken) {
+	try {
+		const response = await tauriFetch(`${config.labrinthBaseUrl}/v2/user`, {
+			method: 'GET',
+			headers: { Authorization: sessionToken },
+		})
+		if (response.status === 401) return false
+		return true
+	} catch {
+		return true
+	}
+}
+
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
+		if (creds.session && !(await validateSession(creds.session))) {
+			await logout().catch(handleError)
+			credentials.value = null
+			return
+		}
 		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
 	}
 	credentials.value = creds ?? null
@@ -490,19 +654,100 @@ const hasPlus = computed(
 		(credentials.value.user.badges & MIDAS_BITFLAG) === MIDAS_BITFLAG,
 )
 
-const sidebarToggled = ref(true)
-
-themeStore.$subscribe(() => {
-	sidebarToggled.value = !themeStore.toggleSidebar
-})
-
-const forceSidebar = computed(
-	() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
-)
-const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
 const showAd = computed(
 	() => sidebarVisible.value && !hasPlus.value && credentials.value !== undefined,
 )
+const hostingRouteActive = computed(() => route.path.startsWith('/hosting'))
+
+let intercomBooting = false
+let intercomBooted = false
+
+async function fetchIntercomToken() {
+	const creds = await getCreds()
+	if (!creds?.session) {
+		throw new Error('Not authenticated')
+	}
+
+	const params = new URLSearchParams()
+	if (route.path.startsWith('/hosting/manage/') && typeof route.params.id === 'string') {
+		params.set('server_id', route.params.id)
+	}
+	const query = params.size > 0 ? `?${params.toString()}` : ''
+
+	const response = await tauriFetch(`${config.siteUrl}/api/intercom/messenger-jwt${query}`, {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${creds.session}`,
+		},
+	})
+	if (!response.ok) {
+		throw new Error(`Failed to fetch Intercom token: ${response.status}`)
+	}
+	return await response.json()
+}
+
+async function bootIntercom() {
+	if (
+		intercomBooting ||
+		intercomBooted ||
+		!hostingRouteActive.value ||
+		!credentials.value?.session
+	) {
+		return
+	}
+
+	intercomBooting = true
+	console.debug('[APP][INTERCOM] initializing secure support chat')
+	try {
+		const { token } = await fetchIntercomToken()
+		Intercom({
+			app_id: 'ykeritl9',
+			intercom_user_jwt: token,
+			session_duration: 1000 * 60 * 60 * 24,
+			alignment: 'right',
+			horizontal_padding: intercomBubblePosition.value.horizontalPadding,
+			vertical_padding: intercomBubblePosition.value.verticalPadding,
+		})
+		intercomBooted = true
+	} catch (error) {
+		console.warn('[APP][INTERCOM] failed to initialize secure support chat', error)
+	} finally {
+		intercomBooting = false
+	}
+}
+
+function shutdownHostingIntercom() {
+	if (!intercomBooted && !intercomBooting) return
+	shutdownIntercom()
+	intercomBooting = false
+	intercomBooted = false
+}
+
+watch(
+	intercomBubblePosition,
+	(position) => {
+		updateIntercomBubbleStyles(position)
+		if (intercomBooted) {
+			window.Intercom?.('update', {
+				horizontal_padding: position.horizontalPadding,
+				vertical_padding: position.verticalPadding,
+			})
+		}
+	},
+	{ immediate: true },
+)
+
+watch(
+	[hostingRouteActive, credentials],
+	([active]) => {
+		if (active) {
+			void bootIntercom()
+		} else {
+			shutdownHostingIntercom()
+		}
+	},
+	{ immediate: true },
+)
 
 watch(showAd, () => {
 	if (!showAd.value) {
@@ -519,8 +764,9 @@ onMounted(() => {
 	error.setMinecraftAuthErrorModal(minecraftAuthErrorModal.value)
 
 	setContentIncompatibilityWarningModal(incompatibilityWarningModal.value)
-	setContentInstallConfirmModal(installConfirmModal.value)
 	setContentInstallModal(modInstallModal.value)
+	setContentInstallModpackAlreadyInstalledModal(contentInstallModpackAlreadyInstalledModal.value)
+	setModpackAlreadyInstalledModal(modpackAlreadyInstalledModal.value)
 	setServerAddServerToInstanceModal(addServerToInstanceModal.value)
 	setServerInstallToPlayModal(installToPlayModal.value)
 	setServerUpdateToPlayModal(updateToPlayModal.value)
@@ -536,7 +782,9 @@ async function handleCommand(e) {
 	if (e.event === 'RunMRPack') {
 		// RunMRPack should directly install a local mrpack given a path
 		if (e.path.endsWith('.mrpack')) {
-			await create_profile_and_install_from_file(e.path).catch(handleError)
+			await create_profile_and_install_from_file(e.path, (createProfile, fileName) =>
+				unknownPackWarningModal.value?.show(createProfile, fileName),
+			).catch(handleError)
 			trackEvent('InstanceCreate', {
 				source: 'CreationModalFileDrop',
 			})
@@ -544,9 +792,19 @@ async function handleCommand(e) {
 	} else if (e.event === 'InstallServer') {
 		await router.push(`/project/${e.id}`)
 		await playServerProject(e.id).catch(handleError)
+	} else if (e.event === 'InstallVersion') {
+		const version = await get_version(e.id, 'must_revalidate').catch(handleError)
+		if (version) {
+			await contentInstall
+				.install(version.project_id, version.id, null, 'URLConfirmModal', undefined, undefined, {
+					showProjectInfo: true,
+				})
+				.catch(handleError)
+		}
 	} else {
-		// Other commands are URL-based (deep linking)
-		urlModal.value.show(e)
+		await contentInstall
+			.install(e.id, null, null, 'URLConfirmModal', undefined, undefined, { showProjectInfo: true })
+			.catch(handleError)
 	}
 }
 
@@ -662,6 +920,7 @@ async function checkUpdates() {
 						{
 							label: formatMessage(updatePopupMessages.changelog),
 							action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+							keepOpen: true,
 						},
 					],
 				})
@@ -744,6 +1003,7 @@ async function downloadUpdate(versionToDownload) {
 					{
 						label: formatMessage(updatePopupMessages.changelog),
 						action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+						keepOpen: true,
 					},
 				],
 			})
@@ -917,7 +1177,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	<div id="teleports"></div>
 	<div
 		v-if="stateInitialized"
-		class="app-grid-layout experimental-styles-within relative"
+		class="app-grid-layout relative"
 		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
 	>
 		<Transition name="fade">
@@ -945,11 +1205,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			ref="installationModal"
 			type="instance"
 			show-snapshot-toggle
+			:fetch-existing-instance-names="fetchExistingInstanceNames"
 			:search-modpacks="searchModpacks"
 			:get-project-versions="getProjectVersions"
+			:get-loader-manifest="getLoaderManifest"
 			@create="handleCreate"
 			@browse-modpacks="handleBrowseModpacks"
 		/>
+		<UnknownPackWarningModal ref="unknownPackWarningModal" />
 		<div
 			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
 		>
@@ -959,13 +1222,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
-			<NavButton
-				v-if="themeStore.featureFlags.servers_in_app"
-				v-tooltip.right="'Servers'"
-				to="/hosting/manage"
-			>
-				<ServerIcon />
-			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -980,6 +1236,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton
 				v-tooltip.right="'Library'"
 				to="/library"
+				:is-primary="(r) => r.path === '/library' || r.path === '/library'"
 				:is-subpage="
 					() =>
 						route.path.startsWith('/instance') ||
@@ -989,6 +1246,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
+			<NavButton
+				v-tooltip.right="'Modrinth Hosting'"
+				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/'"
+			>
+				<ServerStackIcon />
+			</NavButton>
 			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
@@ -1104,31 +1369,16 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</ButtonStyled>
 				<div class="flex mr-3">
 					<Suspense>
-						<RunningAppBar />
+						<AppActionBar />
 					</Suspense>
 				</div>
-				<section v-if="!nativeDecorations" class="window-controls" data-tauri-drag-region-exclude>
-					<Button class="titlebar-button" icon-only @click="() => getCurrentWindow().minimize()">
-						<MinimizeIcon />
-					</Button>
-					<Button
-						class="titlebar-button"
-						icon-only
-						@click="() => getCurrentWindow().toggleMaximize()"
-					>
-						<RestoreIcon v-if="isMaximized" />
-						<MaximizeIcon v-else />
-					</Button>
-					<Button class="titlebar-button close" icon-only @click="handleClose">
-						<XIcon />
-					</Button>
-				</section>
+				<WindowControls />
 			</section>
 		</div>
 	</div>
 	<div
 		v-if="stateInitialized"
-		class="app-contents experimental-styles-within"
+		class="app-contents"
 		:class="{
 			'sidebar-enabled': sidebarVisible,
 			'disable-advanced-rendering': !themeStore.advancedRendering,
@@ -1158,14 +1408,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 			</transition>
 			<div
-				class="loading-indicator-container h-8 fixed z-50"
+				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
 				:style="{
 					top: 'calc(var(--top-bar-height))',
 					left: 'calc(var(--left-bar-width))',
 					width: 'calc(100% - var(--left-bar-width) - var(--right-bar-width))',
 				}"
 			>
-				<ModrinthLoadingIndicator />
+				<LoadingBar position="absolute" />
 			</div>
 			<div
 				v-if="themeStore.featureFlags.page_path"
@@ -1201,40 +1451,36 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</Admonition>
 			<RouterView v-slot="{ Component }">
 				<template v-if="Component">
-					<Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
+					<Suspense @pending="onSuspensePending" @resolve="onSuspenseResolve">
 						<component :is="Component"></component>
 					</Suspense>
 				</template>
 			</RouterView>
 		</div>
 		<div
-			class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid overflow-auto"
+			class="app-sidebar mt-px shrink-0 flex flex-col border-0 border-l-[1px] border-[--brand-gradient-border] border-solid"
 			:class="{ 'has-plus': hasPlus }"
 		>
 			<div
-				class="app-sidebar-scrollable flex-grow shrink overflow-y-auto relative"
+				v-overlay-scrollbars="sidebarOverlayScrollbarsOptions"
+				class="app-sidebar-scrollable flex-grow shrink relative"
 				:class="{ 'pb-12': !hasPlus }"
+				data-overlayscrollbars-initialize
 			>
 				<div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
 				<div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
-					<div
-						class="p-4 pr-1 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
-					>
+					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<h3 class="text-base text-primary font-medium m-0">Playing as</h3>
 						<suspense>
-							<AccountsCard ref="accounts" mode="small" />
+							<AccountsCard ref="accounts" />
 						</suspense>
 					</div>
-					<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
+					<div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<suspense>
-							<FriendsList
-								:credentials="credentials"
-								:sign-in="() => signIn()"
-								:refresh-credentials="fetchCredentials"
-							/>
+							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
 						</suspense>
 					</div>
-					<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
+					<div v-if="news && news.length > 0" class="p-4 flex flex-col items-center">
 						<h3 class="text-base mb-4 text-primary font-medium m-0 text-left w-full">News</h3>
 						<div class="space-y-4 flex flex-col items-center w-full">
 							<NewsArticleCard
@@ -1263,10 +1509,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</template>
 		</div>
 	</div>
-	<URLConfirmModal ref="urlModal" />
 	<I18nDebugPanel />
-	<NotificationPanel has-sidebar />
-	<PopupNotificationPanel has-sidebar />
+	<NotificationPanel :has-sidebar="sidebarVisible" />
+	<PopupNotificationPanel :has-sidebar="sidebarVisible" />
 	<ErrorModal ref="errorModal" />
 	<MinecraftAuthErrorModal ref="minecraftAuthErrorModal" />
 	<ContentInstallModal
@@ -1279,85 +1524,29 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		:preferred-loader="contentInstallPreferredLoader"
 		:preferred-game-version="contentInstallPreferredGameVersion"
 		:release-game-versions="contentInstallReleaseGameVersions"
+		:project-info="contentInstallProjectInfo"
 		@install="handleInstallToInstance"
 		@create-and-install="handleCreateAndInstall"
 		@navigate="handleContentInstallNavigate"
 		@cancel="handleContentInstallCancel"
 	/>
+	<ModpackAlreadyInstalledModal
+		ref="modpackAlreadyInstalledModal"
+		@create-anyway="handleModpackDuplicateCreateAnyway"
+		@go-to-instance="handleModpackDuplicateGoToInstance"
+	/>
 	<AddServerToInstanceModal ref="addServerToInstanceModal" />
 	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
-	<InstallConfirmModal ref="installConfirmModal" />
+	<ModpackAlreadyInstalledModal
+		ref="contentInstallModpackAlreadyInstalledModal"
+		@create-anyway="handleContentInstallModpackDuplicateCreateAnyway"
+		@go-to-instance="handleContentInstallModpackDuplicateGoToInstance"
+	/>
 	<InstallToPlayModal ref="installToPlayModal" />
 	<UpdateToPlayModal ref="updateToPlayModal" />
 </template>
 
 <style lang="scss" scoped>
-.window-controls {
-	z-index: 20;
-	display: none;
-	flex-direction: row;
-	align-items: center;
-
-	.titlebar-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: all ease-in-out 0.1s;
-		background-color: transparent;
-		color: var(--color-base);
-		height: 100%;
-		width: 3rem;
-		position: relative;
-		box-shadow: none;
-
-		&:last-child {
-			padding-right: 0.75rem;
-			width: 3.75rem;
-		}
-
-		svg {
-			width: 1.25rem;
-			height: 1.25rem;
-		}
-
-		&::before {
-			content: '';
-			border-radius: 999999px;
-			width: 3rem;
-			height: 3rem;
-			aspect-ratio: 1 / 1;
-			margin-block: auto;
-			position: absolute;
-			background-color: transparent;
-			scale: 0.9;
-			transition: all ease-in-out 0.2s;
-			z-index: -1;
-		}
-
-		&.close {
-			&:hover,
-			&:active {
-				color: var(--color-accent-contrast);
-
-				&::before {
-					background-color: var(--color-red);
-				}
-			}
-		}
-
-		&:hover,
-		&:active {
-			color: var(--color-contrast);
-
-			&::before {
-				background-color: var(--color-button-bg);
-				scale: 1;
-			}
-		}
-	}
-}
-
 .app-grid-layout,
 .app-contents {
 	--top-bar-height: 3rem;
@@ -1382,6 +1571,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 
 .app-grid-statusbar {
 	grid-area: status;
+	padding-right: var(--window-controls-width, 0px);
 }
 
 [data-tauri-drag-region-exclude] {
@@ -1573,6 +1763,21 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 }
 </style>
 <style>
+.os-theme-dark,
+.os-theme-light {
+	--os-handle-bg: var(--color-scrollbar) !important;
+	--os-handle-bg-hover: var(--color-scrollbar) !important;
+	--os-handle-bg-active: var(--color-scrollbar) !important;
+}
+
+.intercom-lightweight-app-launcher,
+.intercom-launcher-frame,
+iframe[name='intercom-launcher-frame'] {
+	right: var(--app-support-launcher-right, 20px) !important;
+	bottom: var(--app-support-launcher-bottom, 20px) !important;
+	z-index: 9 !important;
+}
+
 .mac {
 	.app-grid-statusbar {
 		padding-left: 5rem;
@@ -1584,10 +1789,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		height: 2.5rem !important;
 	}
 
-	.window-controls {
-		display: flex !important;
-	}
-
 	.info-card {
 		right: 22rem;
 	}
@@ -1597,4 +1798,3 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>

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

@@ -45,6 +45,14 @@
 	color-scheme: dark;
 	--view-width: calc(100% - 5rem);
 	--expanded-view-width: calc(100% - 13rem);
+	--medal-promotion-bg: #000;
+	--medal-promotion-bg-orange: rgba(208, 246, 255, 0.25);
+	--medal-promotion-text-orange: #42abff;
+	--medal-promotion-bg-gradient: linear-gradient(
+		90deg,
+		rgba(66, 170, 255, 0.15),
+		rgba(0, 0, 0, 0) 100%
+	);
 }
 
 body {
@@ -77,12 +85,10 @@ body {
 }
 
 a {
-	color: var(--color-link);
+	color: inherit;
 	text-decoration: none;
-
-	&:hover {
-		text-decoration: none;
-	}
+	-webkit-font-smoothing: antialiased;
+	will-change: filter;
 }
 
 .badge {
@@ -175,3 +181,55 @@ img {
 }
 
 @import '@modrinth/assets/omorphia.scss';
+
+input {
+	border-radius: var(--size-rounded-sm);
+	box-sizing: border-box;
+	border: 2px solid transparent;
+	// safari iOS rounds inputs by default
+	// set the appearance to none to prevent this
+	appearance: none !important;
+}
+
+pre {
+	font-weight: var(--font-weight-regular);
+}
+
+input,
+textarea {
+	background: var(--color-button-bg);
+	color: var(--color-text);
+	padding: 0.5rem 1rem;
+	font-weight: var(--font-weight-medium);
+	border: none;
+	outline: 2px solid transparent;
+	box-shadow:
+		var(--shadow-inset-sm),
+		0 0 0 0 transparent;
+	transition: box-shadow 0.1s ease-in-out;
+	min-height: 36px;
+
+	&:focus,
+	&:focus-visible {
+		box-shadow:
+			inset 0 0 0 transparent,
+			0 0 0 0.25rem var(--color-brand-shadow);
+		color: var(--color-button-text-active);
+	}
+
+	&:disabled,
+	&[disabled='true'] {
+		opacity: 0.6;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+
+	&:focus::placeholder {
+		opacity: 0.8;
+	}
+
+	&::placeholder {
+		color: var(--color-button-text);
+		opacity: 0.6;
+	}
+}

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

@@ -10,6 +10,7 @@ import {
 	TrashIcon,
 } from '@modrinth/assets'
 import {
+	Accordion,
 	DropdownSelect,
 	formatLoader,
 	injectNotificationManager,
@@ -133,12 +134,33 @@ const state = useStorage(
 	{
 		group: 'Group',
 		sortBy: 'Name',
+		collapsedGroups: [],
 	},
 	localStorage,
 	{ mergeDefaults: true },
 )
 
 const search = ref('')
+const collapsedSectionKeys = computed(() => new Set(state.value.collapsedGroups ?? []))
+
+const getSectionKey = (sectionName) => `${state.value.group}:${sectionName}`
+
+const isSectionCollapsed = (sectionName) => {
+	return collapsedSectionKeys.value.has(getSectionKey(sectionName))
+}
+
+const setSectionCollapsed = (sectionName, collapsed) => {
+	const sectionKey = getSectionKey(sectionName)
+	const collapsedSections = new Set(state.value.collapsedGroups ?? [])
+
+	if (collapsed) {
+		collapsedSections.add(sectionKey)
+	} else {
+		collapsedSections.delete(sectionKey)
+	}
+
+	state.value.collapsedGroups = [...collapsedSections]
+}
 
 const filteredResults = computed(() => {
 	const { group = 'Group', sortBy = 'Name' } = state.value
@@ -280,18 +302,21 @@ const filteredResults = computed(() => {
 			<span class="font-semibold text-secondary">{{ selected }}</span>
 		</DropdownSelect>
 	</div>
-	<div
+	<Accordion
 		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
 			key,
 			value,
 		}))"
 		:key="instanceSection.key"
+		:divider="instanceSection.key !== 'None'"
+		:open-by-default="!isSectionCollapsed(instanceSection.key)"
 		class="row"
+		@on-open="setSectionCollapsed(instanceSection.key, false)"
+		@on-close="setSectionCollapsed(instanceSection.key, true)"
 	>
-		<div v-if="instanceSection.key !== 'None'" class="divider">
-			<p>{{ instanceSection.key }}</p>
-			<hr aria-hidden="true" />
-		</div>
+		<template v-if="instanceSection.key !== 'None'" #title>
+			<span class="text-base">{{ instanceSection.key }}</span>
+		</template>
 		<section class="instances">
 			<Instance
 				v-for="instance in instanceSection.value"
@@ -301,7 +326,7 @@ const filteredResults = computed(() => {
 				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
 			/>
 		</section>
-	</div>
+	</Accordion>
 	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteProfile" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
@@ -316,73 +341,7 @@ const filteredResults = computed(() => {
 </template>
 <style lang="scss" scoped>
 .row {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
 	width: 100%;
-
-	.divider {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-		gap: 1rem;
-		margin-bottom: 1rem;
-
-		p {
-			margin: 0;
-			font-size: 1rem;
-			white-space: nowrap;
-			color: var(--color-contrast);
-		}
-
-		hr {
-			background-color: var(--color-gray);
-			height: 1px;
-			width: 100%;
-			border: none;
-		}
-	}
-}
-
-.header {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: 1rem;
-	align-items: inherit;
-	margin: 1rem 1rem 0 !important;
-	padding: 1rem;
-	width: calc(100% - 2rem);
-
-	.iconified-input {
-		flex-grow: 1;
-
-		input {
-			min-width: 100%;
-		}
-	}
-
-	.sort-dropdown {
-		width: 10rem;
-	}
-
-	.filter-dropdown {
-		width: 15rem;
-	}
-
-	.group-dropdown {
-		width: 10rem;
-	}
-
-	.labeled_button {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		gap: 0.5rem;
-		white-space: nowrap;
-	}
 }
 
 .instances {

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

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

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

@@ -1,81 +1,107 @@
 <template>
 	<div
-		v-if="mode !== 'isolated'"
-		ref="button"
-		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-		:class="{ expanded: mode === 'expanded' }"
-		@click="toggleMenu"
+		v-if="accounts.length === 0"
+		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
 	>
-		<Avatar
-			size="36px"
-			:src="
-				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-			"
-		/>
-		<div class="flex flex-col w-full">
-			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
-			<span class="text-secondary text-xs">Minecraft account</span>
-		</div>
-		<DropdownIcon class="w-5 h-5 shrink-0" />
+		<span>{{ formatMessage(messages.notSignedIn) }}</span>
+		<ButtonStyled color="brand">
+			<button color="primary" :disabled="loginDisabled" @click="login()">
+				<LogInIcon v-if="!loginDisabled" />
+				<SpinnerIcon v-else class="animate-spin" />
+				{{ formatMessage(messages.signInToMinecraft) }}
+			</button>
+		</ButtonStyled>
 	</div>
-	<transition name="fade">
-		<Card
-			v-if="showCard || mode === 'isolated'"
-			ref="card"
-			class="account-card"
-			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
-		>
-			<div v-if="selectedAccount" class="selected account">
-				<Avatar size="xs" :src="avatarUrl" />
-				<div>
-					<h4>{{ selectedAccount.profile.name }}</h4>
-					<p>Selected</p>
-				</div>
-				<Button
-					v-tooltip="'Log out'"
-					icon-only
-					color="raised"
-					@click="logout(selectedAccount.profile.id)"
-				>
-					<TrashIcon />
-				</Button>
-			</div>
-			<div v-else class="logged-out account">
-				<h4>Not signed in</h4>
-				<Button
-					v-tooltip="'Log in'"
-					:disabled="loginDisabled"
-					icon-only
-					color="primary"
-					@click="login()"
-				>
-					<LogInIcon v-if="!loginDisabled" />
-					<SpinnerIcon v-else class="animate-spin" />
-				</Button>
-			</div>
-			<div v-if="displayAccounts.length > 0" class="account-group">
-				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
-					<Button class="option account" @click="setAccount(account)">
-						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
-						<p>{{ account.profile.name }}</p>
-					</Button>
-					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
-						<TrashIcon />
-					</Button>
+	<Accordion
+		v-else
+		class="w-full mt-2 bg-button-bg border border-solid border-surface-5 rounded-xl overflow-clip"
+		button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
+		:open-by-default="false"
+	>
+		<template #title>
+			<div class="flex gap-2 w-full min-w-0">
+				<Avatar
+					size="36px"
+					:src="
+						selectedAccount
+							? avatarUrl
+							: 'https://launcher-files.modrinth.com/assets/steve_head.png'
+					"
+				/>
+				<div class="flex flex-col items-start w-full min-w-0">
+					<span class="truncate w-full text-left">{{
+						selectedAccount ? selectedAccount.profile.name : formatMessage(messages.selectAccount)
+					}}</span>
+					<span class="text-secondary text-xs">{{ formatMessage(messages.minecraftAccount) }}</span>
 				</div>
 			</div>
-			<Button v-if="accounts.length > 0" @click="login()">
-				<PlusIcon />
-				Add account
-			</Button>
-		</Card>
-	</transition>
+		</template>
+		<div class="bg-button-bg pt-1 pb-2 border border-solid border-surface-5">
+			<template v-if="accounts.length > 0">
+				<div v-for="account in accounts" :key="account.profile.id" class="flex gap-1 items-center">
+					<button
+						class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base min-w-0"
+						@click="setAccount(account)"
+					>
+						<RadioButtonCheckedIcon
+							v-if="selectedAccount && selectedAccount.profile.id === account.profile.id"
+							class="w-5 h-5 text-brand shrink-0"
+						/>
+						<RadioButtonIcon v-else class="w-5 h-5 text-secondary shrink-0" />
+						<Avatar :src="getAccountAvatarUrl(account)" size="24px" />
+						<p
+							class="m-0 truncate min-w-0"
+							:class="
+								selectedAccount && selectedAccount.profile.id === account.profile.id
+									? 'text-contrast font-semibold'
+									: 'text-primary'
+							"
+						>
+							{{ account.profile.name }}
+						</p>
+					</button>
+					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+						<button
+							v-tooltip="formatMessage(messages.removeAccount)"
+							class="mr-2"
+							@click="logout(account.profile.id)"
+						>
+							<TrashIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+			</template>
+			<div class="flex flex-col gap-2 px-2 pt-2">
+				<ButtonStyled v-if="accounts.length > 0" class="w-full">
+					<button :disabled="loginDisabled" @click="login()">
+						<PlusIcon />
+						{{ formatMessage(messages.addAccount) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</Accordion>
 </template>
 
-<script setup>
-import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
+<script setup lang="ts">
+import {
+	LogInIcon,
+	PlusIcon,
+	RadioButtonCheckedIcon,
+	RadioButtonIcon,
+	SpinnerIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import type { Ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 
 import { trackEvent } from '@/helpers/analytics'
 import {
@@ -87,34 +113,39 @@ import {
 } from '@/helpers/auth'
 import { process_listener } from '@/helpers/events'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
+import type { Skin } from '@/helpers/skins'
 import { get_available_skins } from '@/helpers/skins'
 import { handleSevereError } from '@/store/error.js'
 
+const { formatMessage } = useVIntl()
 const { handleError } = injectNotificationManager()
 
-defineProps({
-	mode: {
-		type: String,
-		required: true,
-		default: 'normal',
-	},
-})
+const emit = defineEmits<{
+	change: []
+}>()
 
-const emit = defineEmits(['change'])
+type MinecraftCredential = {
+	profile: {
+		id: string
+		name: string
+	}
+}
 
-const accounts = ref({})
+const accounts: Ref<MinecraftCredential[]> = ref([])
 const loginDisabled = ref(false)
-const defaultUser = ref()
-const equippedSkin = ref(null)
-const headUrlCache = ref(new Map())
+const defaultUser = ref<string | undefined>()
+const equippedSkin = ref<Skin | null>(null)
+const headUrlCache = ref(new Map<string, string>())
 
 async function refreshValues() {
 	defaultUser.value = await get_default_user().catch(handleError)
-	accounts.value = await users().catch(handleError)
+	const userList = await users().catch(handleError)
+	accounts.value = Array.isArray(userList) ? [...userList] : []
+	accounts.value.sort((a, b) => (a.profile?.name ?? '').localeCompare(b.profile?.name ?? ''))
 
 	try {
 		const skins = await get_available_skins()
-		equippedSkin.value = skins.find((skin) => skin.is_equipped)
+		equippedSkin.value = skins.find((skin) => skin.is_equipped) ?? null
 
 		if (equippedSkin.value) {
 			try {
@@ -129,7 +160,7 @@ async function refreshValues() {
 	}
 }
 
-function setLoginDisabled(value) {
+function setLoginDisabled(value: boolean) {
 	loginDisabled.value = value
 }
 
@@ -138,10 +169,11 @@ defineExpose({
 	setLoginDisabled,
 	loginDisabled,
 })
+
 await refreshValues()
 
-const displayAccounts = computed(() =>
-	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
+const selectedAccount = computed(() =>
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
 )
 
 const avatarUrl = computed(() => {
@@ -158,7 +190,7 @@ const avatarUrl = computed(() => {
 	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })
 
-function getAccountAvatarUrl(account) {
+function getAccountAvatarUrl(account: MinecraftCredential) {
 	if (
 		account.profile.id === selectedAccount.value?.profile?.id &&
 		equippedSkin.value?.texture_key
@@ -171,13 +203,10 @@ function getAccountAvatarUrl(account) {
 	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }
 
-const selectedAccount = computed(() =>
-	accounts.value.find((account) => account.profile.id === defaultUser.value),
-)
-
-async function setAccount(account) {
+async function setAccount(account: MinecraftCredential) {
 	defaultUser.value = account.profile.id
 	await set_default_user(account.profile.id).catch(handleError)
+	await refreshValues()
 	emit('change')
 }
 
@@ -187,292 +216,57 @@ async function login() {
 
 	if (loggedIn) {
 		await setAccount(loggedIn)
-		await refreshValues()
 	}
 
 	trackEvent('AccountLogIn')
 	loginDisabled.value = false
 }
 
-const logout = async (id) => {
+async function logout(id: string) {
 	await remove_user(id).catch(handleError)
 	await refreshValues()
 	if (!selectedAccount.value && accounts.value.length > 0) {
 		await setAccount(accounts.value[0])
-		await refreshValues()
 	} else {
 		emit('change')
 	}
 	trackEvent('AccountLogOut')
 }
 
-const showCard = ref(false)
-const card = ref(null)
-const button = ref(null)
-const handleClickOutside = (event) => {
-	const elements = document.elementsFromPoint(event.clientX, event.clientY)
-	if (
-		card.value &&
-		card.value.$el !== event.target &&
-		!elements.includes(card.value.$el) &&
-		!button.value.contains(event.target)
-	) {
-		toggleMenu(false)
-	}
-}
-
-function toggleMenu(override = true) {
-	if (showCard.value || !override) {
-		showCard.value = false
-	} else {
-		showCard.value = true
-	}
-}
-
 const unlisten = await process_listener(async (e) => {
 	if (e.event === 'launched') {
 		await refreshValues()
 	}
 })
 
-onMounted(() => {
-	window.addEventListener('click', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener('click', handleClickOutside)
-})
-
 onUnmounted(() => {
 	unlisten()
 })
+
+const messages = defineMessages({
+	notSignedIn: {
+		id: 'minecraft-account.not-signed-in',
+		defaultMessage: 'Not signed in',
+	},
+	addAccount: {
+		id: 'minecraft-account.add-account',
+		defaultMessage: 'Add account',
+	},
+	removeAccount: {
+		id: 'minecraft-account.remove-account',
+		defaultMessage: 'Remove account',
+	},
+	selectAccount: {
+		id: 'minecraft-account.select-account',
+		defaultMessage: 'Select account',
+	},
+	minecraftAccount: {
+		id: 'minecraft-account.label',
+		defaultMessage: 'Minecraft account',
+	},
+	signInToMinecraft: {
+		id: 'minecraft-account.sign-in',
+		defaultMessage: 'Sign in to Minecraft',
+	},
+})
 </script>
-
-<style scoped lang="scss">
-.selected {
-	background: var(--color-brand-highlight);
-	border-radius: var(--radius-lg);
-	color: var(--color-contrast);
-	gap: 1rem;
-}
-
-.logged-out {
-	background: var(--color-bg);
-	border-radius: var(--radius-lg);
-	gap: 1rem;
-}
-
-.account {
-	width: max-content;
-	display: flex;
-	align-items: center;
-	text-align: left;
-	padding: 0.5rem 1rem;
-
-	h4,
-	p {
-		margin: 0;
-	}
-}
-
-.account-card {
-	position: fixed;
-	display: flex;
-	flex-direction: column;
-	margin-top: 0.5rem;
-	right: 2rem;
-	z-index: 11;
-	gap: 0.5rem;
-	padding: 1rem;
-	border: 1px solid var(--color-divider);
-	width: max-content;
-	user-select: none;
-	-ms-user-select: none;
-	-webkit-user-select: none;
-	max-height: calc(100vh - 300px);
-	overflow-y: auto;
-
-	&::-webkit-scrollbar-track {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
-
-	&::-webkit-scrollbar {
-		border-top-right-radius: 1rem;
-		border-bottom-right-radius: 1rem;
-	}
-
-	&.hidden {
-		display: none;
-	}
-
-	&.expanded {
-		left: 13.5rem;
-	}
-
-	&.isolated {
-		position: relative;
-		left: 0;
-		top: 0;
-	}
-}
-
-.accounts-title {
-	font-size: 1.2rem;
-	font-weight: bolder;
-}
-
-.account-group {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.option {
-	width: calc(100% - 2.25rem);
-	background: var(--color-raised-bg);
-	color: var(--color-base);
-	box-shadow: none;
-
-	img {
-		margin-right: 0.5rem;
-	}
-}
-
-.icon {
-	--size: 1.5rem !important;
-}
-
-.account-row {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-	vertical-align: center;
-	justify-content: space-between;
-	padding-right: 1rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition:
-		opacity 0.25s ease,
-		translate 0.25s ease,
-		scale 0.25s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-	translate: 0 -2rem;
-	scale: 0.9;
-}
-
-.avatar-button {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	color: var(--color-base);
-	background-color: var(--color-button-bg);
-	border-radius: var(--radius-md);
-	width: 100%;
-	padding: 0.5rem 0.75rem;
-	text-align: left;
-
-	&.expanded {
-		border: 1px solid var(--color-divider);
-		padding: 1rem;
-	}
-}
-
-.avatar-text {
-	margin: auto 0 auto 0.25rem;
-	display: flex;
-	flex-direction: column;
-}
-
-.text {
-	width: 6rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.accounts-text {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-	margin: 0;
-}
-
-.qr-code {
-	background-color: white !important;
-	border-radius: var(--radius-md);
-}
-
-.modal-body {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-lg);
-	align-items: center;
-	padding: var(--gap-xl);
-
-	.modal-text {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-sm);
-		width: 100%;
-
-		h2,
-		p {
-			margin: 0;
-		}
-
-		.code-text {
-			display: flex;
-			flex-direction: row;
-			gap: var(--gap-xs);
-			align-items: center;
-
-			.code {
-				background-color: var(--color-bg);
-				border-radius: var(--radius-md);
-				border: solid 1px var(--color-button-bg);
-				font-family: var(--mono-font);
-				letter-spacing: var(--gap-md);
-				color: var(--color-contrast);
-				font-size: 2rem;
-				font-weight: bold;
-				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
-			}
-
-			.btn {
-				width: 2.5rem;
-				height: 2.5rem;
-			}
-		}
-	}
-}
-
-.button-row {
-	display: flex;
-	flex-direction: row;
-}
-
-.modal {
-	position: absolute;
-}
-
-.code {
-	color: var(--color-brand);
-	padding: 0.05rem 0.1rem;
-	// row not column
-	display: flex;
-
-	.card {
-		background: var(--color-base);
-		color: var(--color-contrast);
-		padding: 0.5rem 1rem;
-	}
-}
-</style>

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

@@ -0,0 +1,434 @@
+<template>
+	<div class="flex gap-4 items-center">
+		<ButtonStyled
+			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
+			color="brand"
+			type="transparent"
+			circular
+		>
+			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<div v-if="offline" class="flex items-center gap-1">
+			<UnplugIcon class="text-secondary" />
+			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
+		</div>
+		<div
+			class="flex border-solid border-surface-5 text-sm items-center gap-2 py-1.5 px-3 rounded-xl border"
+		>
+			<template v-if="selectedProcess">
+				<OnlineIndicatorIcon />
+				<div class="text-contrast flex items-center gap-2">
+					<router-link
+						v-tooltip="formatMessage(messages.viewInstance)"
+						:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+						class="hover:underline"
+					>
+						{{ selectedProcess.profile.name }}
+					</router-link>
+					<Dropdown
+						v-if="currentProcesses.length > 1"
+						placement="bottom"
+						:triggers="['click']"
+						:hide-triggers="['click']"
+						@show="showProfiles = true"
+						@hide="showProfiles = false"
+					>
+						<ButtonStyled type="transparent" circular size="small">
+							<button
+								v-tooltip="
+									showProfiles
+										? formatMessage(messages.hideMoreRunningInstances)
+										: formatMessage(messages.showMoreRunningInstances)
+								"
+							>
+								<DropdownIcon :class="{ 'rotate-180': !!showProfiles }" />
+							</button>
+						</ButtonStyled>
+						<template #popper>
+							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
+								<div
+									v-for="process in currentProcesses"
+									:key="process.uuid"
+									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
+								>
+									<button
+										v-tooltip.left="
+											process.uuid === selectedProcess.uuid
+												? formatMessage(messages.primaryInstance)
+												: formatMessage(messages.makePrimaryInstance)
+										"
+										class="flex flex-grow items-center gap-2"
+										:class="{
+											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
+										}"
+										:disabled="process.uuid === selectedProcess.uuid"
+										@click="selectProcess(process)"
+									>
+										<OnlineIndicatorIcon />
+										<span class="mr-auto text-contrast flex items-center gap-2">
+											{{ process.profile.name }}
+											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
+										</span>
+									</button>
+									<button
+										v-tooltip="formatMessage(messages.stopInstance)"
+										class="active:scale-95 flex"
+										@click.stop="stop(process)"
+									>
+										<StopCircleIcon class="text-red size-5" />
+									</button>
+									<button
+										v-tooltip="formatMessage(messages.viewLogs)"
+										class="active:scale-95 flex"
+										@click.stop="goToTerminal(process.profile.path)"
+									>
+										<TerminalSquareIcon class="text-secondary size-5" />
+									</button>
+								</div>
+							</div>
+						</template>
+					</Dropdown>
+				</div>
+				<button
+					v-tooltip="formatMessage(messages.stopInstance)"
+					class="active:scale-95 flex"
+					@click="stop(selectedProcess)"
+				>
+					<StopCircleIcon class="text-red size-5" />
+				</button>
+				<button
+					v-tooltip="formatMessage(messages.viewLogs)"
+					class="active:scale-95 flex"
+					@click="goToTerminal()"
+				>
+					<TerminalSquareIcon class="text-secondary size-5" />
+				</button>
+			</template>
+			<template v-else>
+				<span class="size-2 rounded-full bg-secondary" />
+				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	DownloadIcon,
+	DropdownIcon,
+	OnlineIndicatorIcon,
+	StarIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	injectPopupNotificationManager,
+	type PopupNotification,
+	type PopupNotificationProgressItem,
+	useVIntl,
+} from '@modrinth/ui'
+import { Dropdown } from 'floating-vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many as getInstances } from '@/helpers/profile.js'
+import type { LoadingBar } from '@/helpers/state'
+import { progress_bars_list } from '@/helpers/state'
+import type { GameInstance } from '@/helpers/types'
+
+const { handleError } = injectNotificationManager()
+const popupNotificationManager = injectPopupNotificationManager()
+const { formatMessage } = useVIntl()
+
+const router = useRouter()
+
+const showProfiles = ref(false)
+
+interface RunningProcess {
+	uuid: string
+	profile_path: string
+	profile: GameInstance
+}
+
+const messages = defineMessages({
+	offline: {
+		id: 'app.action-bar.offline',
+		defaultMessage: 'Offline',
+	},
+	viewInstance: {
+		id: 'app.action-bar.view-instance',
+		defaultMessage: 'View instance',
+	},
+	showMoreRunningInstances: {
+		id: 'app.action-bar.show-more-running-instances',
+		defaultMessage: 'Show more running instances',
+	},
+	hideMoreRunningInstances: {
+		id: 'app.action-bar.hide-more-running-instances',
+		defaultMessage: 'Hide more running instances',
+	},
+	primaryInstance: {
+		id: 'app.action-bar.primary-instance',
+		defaultMessage: 'Primary instance',
+	},
+	makePrimaryInstance: {
+		id: 'app.action-bar.make-primary-instance',
+		defaultMessage: 'Make primary instance',
+	},
+	stopInstance: {
+		id: 'app.action-bar.stop-instance',
+		defaultMessage: 'Stop instance',
+	},
+	viewLogs: {
+		id: 'app.action-bar.view-logs',
+		defaultMessage: 'View logs',
+	},
+	noInstancesRunning: {
+		id: 'app.action-bar.no-instances-running',
+		defaultMessage: 'No instances running',
+	},
+	downloadingJava: {
+		id: 'app.action-bar.downloading-java',
+		defaultMessage: 'Downloading Java {version}',
+	},
+	downloads: {
+		id: 'app.action-bar.downloads',
+		defaultMessage: 'Downloads',
+	},
+	viewActiveDownloads: {
+		id: 'app.action-bar.view-active-downloads',
+		defaultMessage: 'View active downloads',
+	},
+})
+
+const currentProcesses = ref<RunningProcess[]>([])
+const selectedProcess = ref<RunningProcess | undefined>()
+
+const refresh = async () => {
+	const processes = ((await getRunningProcesses().catch((error) => {
+		handleError(error)
+		return []
+	})) ?? []) as Array<{ uuid: string; profile_path: string }>
+	const paths = processes.map((process) => process.profile_path)
+	const profiles: GameInstance[] = await getInstances(paths).catch((error) => {
+		handleError(error)
+		return []
+	})
+
+	currentProcesses.value = processes
+		.map((process) => {
+			const profile = profiles.find((item) => process.profile_path === item.path)
+			if (!profile) {
+				return null
+			}
+			return {
+				...process,
+				profile,
+			}
+		})
+		.filter((process): process is RunningProcess => process !== null)
+	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+		selectedProcess.value = currentProcesses.value[0]
+	}
+}
+
+await refresh()
+
+const offline = ref(!navigator.onLine)
+function handleOffline() {
+	offline.value = true
+}
+function handleOnline() {
+	offline.value = false
+}
+
+onMounted(() => {
+	window.addEventListener('offline', handleOffline)
+	window.addEventListener('online', handleOnline)
+})
+
+const unlistenProcess = await process_listener(async () => {
+	await refresh()
+})
+
+const stop = async (process: RunningProcess) => {
+	try {
+		await killProcess(process.uuid).catch(handleError)
+
+		trackEvent('InstanceStop', {
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
+			source: 'AppBar',
+		})
+	} catch (e) {
+		console.error(e)
+	}
+	await refresh()
+}
+
+function goToTerminal(path?: string) {
+	const selectedPath = path ?? selectedProcess.value?.profile.path
+	if (!selectedPath) {
+		return
+	}
+	router.push(`/instance/${encodeURIComponent(selectedPath)}/logs`)
+}
+
+const currentLoadingBars = ref<LoadingBar[]>([])
+const notificationId = ref<string | number | null>(null)
+const dismissed = ref(false)
+
+function getLoadingBarKey(loadingBar: LoadingBar): string {
+	return `${loadingBar.loading_bar_uuid ?? loadingBar.id}`
+}
+
+function getLoadingProgress(loadingBar: LoadingBar): number {
+	if (!loadingBar.total || loadingBar.total <= 0) {
+		return 0
+	}
+	return Math.max(0, Math.min(1, (loadingBar.current ?? 0) / (loadingBar.total ?? 0)))
+}
+
+function getLoadingText(loadingBar: LoadingBar): string {
+	const percent = Math.floor(getLoadingProgress(loadingBar) * 100)
+	return loadingBar.message ? `${percent}% ${loadingBar.message}` : `${percent}%`
+}
+
+function getNotification(): PopupNotification | null {
+	if (!notificationId.value) {
+		return null
+	}
+	const notification = popupNotificationManager
+		.getNotifications()
+		.find((notification) => notification.id === notificationId.value)
+	return notification ?? null
+}
+
+function removeNotification(): void {
+	if (!notificationId.value) {
+		return
+	}
+	popupNotificationManager.removeNotification(notificationId.value)
+	notificationId.value = null
+}
+
+function buildDownloadItems(): PopupNotificationProgressItem[] {
+	return currentLoadingBars.value.map((bar) => ({
+		id: getLoadingBarKey(bar),
+		title: bar.title ?? '',
+		text: getLoadingText(bar),
+		progress: getLoadingProgress(bar),
+		waiting: !bar.total || bar.total <= 0,
+	}))
+}
+
+const hasVisibleActiveDownloadToasts = computed(() => !!getNotification())
+const hasActiveLoadingBars = computed(() => currentLoadingBars.value.length > 0)
+
+function updateNotification(resummon = false): void {
+	if (resummon) {
+		dismissed.value = false
+	}
+
+	if (currentLoadingBars.value.length === 0) {
+		removeNotification()
+		dismissed.value = false
+		return
+	}
+
+	if (notificationId.value && !getNotification()) {
+		notificationId.value = null
+		dismissed.value = true
+	}
+
+	if (dismissed.value && !resummon) {
+		return
+	}
+
+	let notif = getNotification()
+	const progressItems = buildDownloadItems()
+
+	if (notif) {
+		notif.title = formatMessage(messages.downloads)
+		notif.text = undefined
+		notif.progressItems = progressItems
+		notif.progress = undefined
+		notif.waiting = undefined
+	} else {
+		notif = popupNotificationManager.addPopupNotification({
+			title: formatMessage(messages.downloads),
+			type: 'download',
+			autoCloseMs: null,
+			progressItems,
+		})
+		notificationId.value = notif.id
+	}
+}
+
+function formatLoadingBars(loadingBar: LoadingBar): LoadingBar {
+	const formatted = { ...loadingBar }
+	if (formatted.bar_type?.type === 'java_download') {
+		formatted.title = formatMessage(messages.downloadingJava, {
+			version: formatted.bar_type.version,
+		})
+	}
+	if (formatted.bar_type?.profile_path) {
+		formatted.title = formatted.bar_type.profile_path
+	}
+	if (formatted.bar_type?.pack_name) {
+		formatted.title = formatted.bar_type.pack_name
+	}
+	return formatted
+}
+
+async function refreshLoadingBars() {
+	const bars: Record<string, LoadingBar> = await progress_bars_list().catch((error) => {
+		handleError(error)
+		return {}
+	})
+
+	currentLoadingBars.value = Object.values(bars)
+		.map(formatLoadingBars)
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')
+
+	currentLoadingBars.value.sort((a, b) => {
+		const aKey = `${a.loading_bar_uuid ?? a.id ?? ''}`
+		const bKey = `${b.loading_bar_uuid ?? b.id ?? ''}`
+		return aKey.localeCompare(bKey)
+	})
+
+	updateNotification()
+}
+
+await refreshLoadingBars()
+
+const unlistenLoading = await loading_listener(async () => {
+	await refreshLoadingBars()
+})
+
+function openDownloadToast() {
+	updateNotification(true)
+}
+
+function selectProcess(process: RunningProcess) {
+	selectedProcess.value = process
+}
+
+onBeforeUnmount(() => {
+	removeNotification()
+	dismissed.value = false
+	window.removeEventListener('offline', handleOffline)
+	window.removeEventListener('online', handleOnline)
+	unlistenProcess()
+	unlistenLoading()
+})
+</script>

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

@@ -3,6 +3,7 @@
 		ref="outerRef"
 		data-tauri-drag-region
 		class="min-w-0 overflow-hidden pl-3"
+		:class="{ 'breadcrumb-fade-mask': isOverflowing }"
 		:style="isOverflowing ? { '--scroll-distance': `-${overflowAmount}px` } : undefined"
 		@mouseenter="onMouseEnter"
 		@mouseleave="onMouseLeave"
@@ -128,6 +129,16 @@ watch(breadcrumbs, () => {
 </script>
 
 <style scoped>
+.breadcrumb-fade-mask {
+	mask-image: linear-gradient(
+		to right,
+		transparent,
+		black 12px,
+		black calc(100% - 12px),
+		transparent
+	);
+}
+
 .breadcrumbs-scroll {
 	animation: breadcrumb-scroll 10s ease-in-out infinite;
 }

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

@@ -6,6 +6,7 @@ import {
 	HammerIcon,
 	LogInIcon,
 	UpdatedIcon,
+	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
 import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
@@ -60,7 +61,7 @@ defineExpose({
 			errorType.value = 'directory_move'
 			supportLink.value = 'https://support.modrinth.com'
 
-			if (errorVal.message.includes('directory is not writeable')) {
+			if (errorVal.message.includes('directory is not writable')) {
 				metadata.value.readOnly = true
 			}
 
@@ -155,7 +156,7 @@ async function copyToClipboard(text) {
 
 <template>
 	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
-		<div class="modal-body">
+		<div class="modal-body max-w-[550px]">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
 					<template v-if="metadata.network">
@@ -280,7 +281,7 @@ async function copyToClipboard(text) {
 					{{ debugInfo }}
 				</template>
 				<template v-if="hasDebugInfo">
-					<hr />
+					<div class="w-full h-[1px] bg-surface-5 mb-3"></div>
 					<p>
 						If nothing is working and you need help, visit
 						<a :href="supportLink">our support page</a>
@@ -296,28 +297,47 @@ async function copyToClipboard(text) {
 				<ButtonStyled v-if="closable">
 					<button @click="errorModal.hide()"><XIcon /> Close</button>
 				</ButtonStyled>
-				<ButtonStyled v-if="hasDebugInfo">
-					<button :disabled="copied" @click="copyToClipboard(debugInfo)">
-						<template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
-						<template v-else> <CopyIcon /> Copy debug info </template>
-					</button>
-				</ButtonStyled>
 			</div>
 			<template v-if="hasDebugInfo">
-				<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
-					<button
-						class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
-						@click="errorCollapsed = !errorCollapsed"
-					>
-						<span class="text-contrast font-extrabold m-0">Debug information:</span>
-						<DropdownIcon
-							class="h-5 w-5 text-secondary transition-transform"
-							:class="{ 'rotate-180': !errorCollapsed }"
-						/>
-					</button>
-					<Collapsible :collapsed="errorCollapsed">
-						<pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
-					</Collapsible>
+				<div class="flex flex-col gap-2">
+					<div class="w-full h-[1px] bg-surface-5"></div>
+
+					<div class="overflow-clip">
+						<button
+							class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
+							@click="errorCollapsed = !errorCollapsed"
+						>
+							<span class="flex items-center gap-2 text-contrast font-extrabold m-0">
+								<WrenchIcon class="h-4 w-4" />
+								Debug information
+							</span>
+							<DropdownIcon
+								class="h-5 w-5 text-secondary transition-transform"
+								:class="{ 'rotate-180': !errorCollapsed }"
+							/>
+						</button>
+						<Collapsible :collapsed="errorCollapsed">
+							<div
+								class="p-3 bg-surface-2 rounded-2xl text-xs grid grid-cols-[1fr_auto] max-w-full items-start"
+							>
+								<div
+									class="m-0 p-0 rounded-none bg-transparent text-sm font-mono break-words overflow-auto"
+								>
+									{{ debugInfo }}
+								</div>
+								<ButtonStyled circular>
+									<button
+										v-tooltip="'Copy debug info'"
+										:disabled="copied"
+										@click="copyToClipboard(debugInfo)"
+									>
+										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+										<template v-else> <CopyIcon /> </template>
+									</button>
+								</ButtonStyled>
+							</div>
+						</Collapsible>
+					</div>
 				</div>
 			</template>
 		</div>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	Button,
+	ButtonStyled,
 	Checkbox,
 	commonMessages,
 	defineMessages,
@@ -179,14 +179,12 @@ const exportPack = async () => {
 				<div class="table-head">
 					<div class="table-cell row-wise">
 						{{ formatMessage(messages.selectFilesLabel) }}
-						<Button
-							class="sleek-primary collapsed-button"
-							icon-only
-							@click="() => (showingFiles = !showingFiles)"
-						>
-							<PlusIcon v-if="!showingFiles" />
-							<XIcon v-else />
-						</Button>
+						<ButtonStyled circular>
+							<button @click="() => (showingFiles = !showingFiles)">
+								<PlusIcon v-if="!showingFiles" />
+								<XIcon v-else />
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="showingFiles" class="table-content">
@@ -235,14 +233,18 @@ const exportPack = async () => {
 				</div>
 			</div>
 			<div class="button-row push-right">
-				<Button @click="exportModal.hide">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</Button>
-				<Button color="primary" @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>
 		</div>
 	</ModalWrapper>

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

@@ -2,6 +2,7 @@
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
 import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
+import { computed } from 'vue'
 
 type Instance = {
 	game_version: string
@@ -12,18 +13,23 @@ type Instance = {
 	name: string
 }
 
-defineProps<{
-	instance: Instance
-}>()
+const props = withDefaults(
+	defineProps<{
+		instance: Instance
+		backTab?: string
+	}>(),
+	{ backTab: undefined },
+)
+
+const instanceLink = computed(() => {
+	const base = `/instance/${encodeURIComponent(props.instance.path)}`
+	return props.backTab ? `${base}/${props.backTab}` : base
+})
 </script>
 
 <template>
 	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-		<router-link
-			:to="`/instance/${encodeURIComponent(instance.path)}`"
-			tabindex="-1"
-			class="flex flex-col gap-4 text-primary"
-		>
+		<router-link :to="instanceLink" tabindex="-1" class="flex flex-col gap-4 text-primary">
 			<span class="flex items-center gap-2">
 				<Avatar
 					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
@@ -43,9 +49,7 @@ defineProps<{
 			</span>
 		</router-link>
 		<ButtonStyled>
-			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
-				<LeftArrowIcon /> Back to instance
-			</router-link>
+			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
 		</ButtonStyled>
 	</div>
 </template>

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

@@ -15,10 +15,12 @@
 						<span>{{ javaInstall.path }}</span>
 					</div>
 					<div class="table-cell table-text manage">
-						<Button v-if="currentSelected.path === javaInstall.path" disabled
-							><CheckIcon /> Selected</Button
-						>
-						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+						<ButtonStyled v-if="currentSelected.path === javaInstall.path">
+							<button disabled><CheckIcon /> Selected</button>
+						</ButtonStyled>
+						<ButtonStyled v-else>
+							<button @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</button>
+						</ButtonStyled>
 					</div>
 				</div>
 				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
@@ -26,17 +28,19 @@
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<Button @click="$refs.detectJavaModal.hide()">
-					<XIcon />
-					Cancel
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="$refs.detectJavaModal.hide()">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

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

@@ -17,35 +17,45 @@
 			"
 		/>
 		<span class="installation-buttons">
-			<Button
-				v-if="props.version"
-				:disabled="props.disabled || installingJava"
-				@click="reinstallJava"
-			>
-				<DownloadIcon />
-				{{ installingJava ? 'Installing...' : 'Install recommended' }}
-			</Button>
-			<Button :disabled="props.disabled" @click="autoDetect">
-				<SearchIcon />
-				Detect
-			</Button>
-			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
-				<FolderSearchIcon />
-				Browse
-			</Button>
-			<Button v-if="testingJava" disabled> Testing... </Button>
-			<Button v-else-if="testingJavaSuccess === true">
-				<CheckIcon class="test-success" />
-				Success
-			</Button>
-			<Button v-else-if="testingJavaSuccess === false">
-				<XIcon class="test-fail" />
-				Failed
-			</Button>
-			<Button v-else :disabled="props.disabled" @click="testJava">
-				<PlayIcon />
-				Test
-			</Button>
+			<ButtonStyled v-if="props.version">
+				<button :disabled="props.disabled || installingJava" @click="reinstallJava">
+					<DownloadIcon />
+					{{ installingJava ? 'Installing...' : 'Install recommended' }}
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="props.disabled" @click="autoDetect">
+					<SearchIcon />
+					Detect
+				</button>
+			</ButtonStyled>
+			<ButtonStyled>
+				<button :disabled="props.disabled" @click="handleJavaFileInput()">
+					<FolderSearchIcon />
+					Browse
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-if="testingJava">
+				<button disabled>Testing...</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === true">
+				<button disabled>
+					<CheckIcon />
+					Success
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else-if="testingJavaSuccess === false">
+				<button disabled>
+					<XIcon />
+					Failed
+				</button>
+			</ButtonStyled>
+			<ButtonStyled v-else>
+				<button :disabled="props.disabled" @click="testJava">
+					<PlayIcon />
+					Test
+				</button>
+			</ButtonStyled>
 		</span>
 	</div>
 </template>
@@ -59,7 +69,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
@@ -204,10 +214,6 @@ async function reinstallJava() {
 	align-items: center;
 	gap: 0.5rem;
 	margin: 0;
-
-	.btn {
-		width: max-content;
-	}
 }
 
 .test-success {

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

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

@@ -3,6 +3,7 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
+		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),

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

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

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

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

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

@@ -1,134 +0,0 @@
-<template>
-	<ProjectCard
-		:title="project.name"
-		:link="
-			() => {
-				emit('open')
-				$router.push({
-					path: `/project/${project.project_id ?? project.id}`,
-					query: { i: props.instance ? props.instance.path : undefined },
-				})
-			}
-		"
-		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
-		:icon-url="project.icon_url"
-		:summary="project.summary"
-		:tags="project.display_categories"
-		:all-tags="project.categories"
-		:downloads="project.downloads"
-		:followers="project.follows"
-		:date-updated="project.date_modified"
-		:banner="project.featured_gallery ?? undefined"
-		:color="project.color ?? undefined"
-		layout="list"
-	>
-		<template #actions>
-			<ButtonStyled color="brand" type="outlined">
-				<button
-					:disabled="installed || installing"
-					class="shrink-0 no-wrap"
-					@click.stop="install()"
-				>
-					<SpinnerIcon v-if="installing" class="animate-spin" />
-					<template v-else-if="!installed">
-						<DownloadIcon v-if="modpack || instance" />
-						<PlusIcon v-else />
-					</template>
-					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing'
-							: installed
-								? 'Installed'
-								: modpack || instance
-									? 'Install'
-									: 'Add to an instance'
-					}}
-				</button>
-			</ButtonStyled>
-		</template>
-	</ProjectCard>
-</template>
-
-<script setup>
-import { CheckIcon, DownloadIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { injectContentInstall } from '@/providers/content-install'
-
-const { install: installVersion } = injectContentInstall()
-
-dayjs.extend(relativeTime)
-
-const { handleError } = injectNotificationManager()
-
-const router = useRouter()
-
-const props = defineProps({
-	backgroundImage: {
-		type: String,
-		default: null,
-	},
-	project: {
-		type: Object,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
-	featured: {
-		type: Boolean,
-		default: false,
-	},
-	installed: {
-		type: Boolean,
-		default: false,
-	},
-	projectType: {
-		type: String,
-		default: undefined,
-	},
-	activeLoader: {
-		type: String,
-		default: null,
-	},
-	activeGameVersion: {
-		type: String,
-		default: null,
-	},
-})
-
-const emit = defineEmits(['open', 'install'])
-
-const installing = ref(false)
-
-async function install() {
-	installing.value = true
-	await installVersion(
-		props.project.project_id ?? props.project.id,
-		null,
-		props.instance ? props.instance.path : null,
-		'SearchCard',
-		(versionId) => {
-			installing.value = false
-			if (versionId) {
-				emit('install', props.project.project_id ?? props.project.id)
-			}
-		},
-		(profile) => {
-			router.push(`/instance/${profile}`)
-		},
-		{
-			preferredLoader: props.activeLoader ?? undefined,
-			preferredGameVersion: props.activeGameVersion ?? undefined,
-		},
-	).catch(handleError)
-}
-
-const modpack = computed(() => props.project.project_types?.includes('modpack'))
-</script>

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

@@ -1,11 +1,9 @@
 <script setup>
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_project, get_version } from '@/helpers/cache.js'
-import { get_categories } from '@/helpers/tags.js'
+import { get_project_v3, get_version } from '@/helpers/cache.js'
 import { injectContentInstall } from '@/providers/content-install'
 
 const { handleError } = injectNotificationManager()
@@ -14,26 +12,21 @@ const { install: installVersion } = injectContentInstall()
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
-const categories = ref(null)
-const installing = ref(false)
 
 defineExpose({
 	async show(event) {
 		if (event.event === 'InstallVersion') {
 			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project_v3(event.id, 'must_revalidate').catch(handleError)
 			version.value = await get_version(
 				project.value.versions[project.value.versions.length - 1],
 				'must_revalidate',
 			).catch(handleError)
 		}
-		categories.value = (await get_categories().catch(handleError)).filter(
-			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
-		)
 		confirmModal.value.show()
 	},
 })
@@ -52,13 +45,22 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
-			<SearchCard
-				:project="project"
+			<ProjectCard
+				:title="project.name"
+				:link="() => confirmModal.hide()"
+				:icon-url="project.icon_url"
+				:summary="project.summary"
+				:tags="project.display_categories"
+				:all-tags="project.categories"
+				:downloads="project.downloads"
+				:followers="project.follows"
+				:date-updated="project.date_modified"
+				:banner="project.featured_gallery ?? undefined"
+				:color="project.color ?? undefined"
+				layout="list"
 				class="project-card"
-				:categories="categories"
-				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
@@ -67,7 +69,9 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<Button :loading="installing" color="primary" @click="install">Install</Button>
+					<ButtonStyled color="brand">
+						<button @click="install">Install</button>
+					</ButtonStyled>
 				</div>
 			</div>
 		</div>

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

@@ -0,0 +1,89 @@
+<template>
+	<section
+		v-if="showControls"
+		class="flex items-center gap-2 mr-1.5"
+		data-tauri-drag-region-exclude
+	>
+		<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
+		>
+			<button class="relative expanded-button" @click="handleClose">
+				<XIcon />
+			</button>
+		</ButtonStyled>
+	</section>
+</template>
+
+<script setup>
+import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
+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'
+
+import { get as getSettings } from '@/helpers/settings.ts'
+import { getOS } from '@/helpers/utils.js'
+import { useTheming } from '@/store/state'
+
+const themeStore = useTheming()
+
+const nativeDecorations = ref(true)
+const isMaximized = ref(false)
+const os = ref('')
+
+const alwaysShowAppControls = computed(() => themeStore.getFeatureFlag('always_show_app_controls'))
+
+const showControls = computed(
+	() =>
+		alwaysShowAppControls.value ||
+		(!nativeDecorations.value && (os.value === 'Windows' || os.value === 'Linux')),
+)
+
+onMounted(async () => {
+	os.value = await getOS()
+
+	const settings = await getSettings()
+	nativeDecorations.value = settings.native_decorations
+
+	if (os.value !== 'MacOS') {
+		await getCurrentWindow().setDecorations(nativeDecorations.value)
+	}
+
+	isMaximized.value = await getCurrentWindow().isMaximized()
+
+	const unlisten = await getCurrentWindow().onResized(async () => {
+		isMaximized.value = await getCurrentWindow().isMaximized()
+	})
+
+	onUnmounted(() => {
+		unlisten()
+	})
+})
+
+const handleClose = async () => {
+	await saveWindowState(StateFlags.ALL)
+	await getCurrentWindow().close()
+}
+</script>
+<style scoped>
+.expanded-button::before {
+	inset: -6px;
+	content: '';
+	position: absolute;
+}
+</style>

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

@@ -288,7 +288,7 @@ const messages = defineMessages({
 			</div>
 		</div>
 	</ModalWrapper>
-	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
 			<ButtonStyled circular type="transparent">
 				<button
@@ -309,7 +309,7 @@ const messages = defineMessages({
 				@keyup.esc="search = ''"
 			/>
 		</template>
-		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
+		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
@@ -331,11 +331,11 @@ const messages = defineMessages({
 		</ButtonStyled>
 	</div>
 	<div class="flex flex-col gap-3">
-		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
+		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
 		<template v-if="loading">
-			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
 				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
 				<div class="flex flex-col w-full">
 					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
@@ -344,7 +344,7 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<template v-else-if="sortedFriends.length === 0">
-			<div class="text-sm ml-4 mr-1">
+			<div class="text-sm">
 				<div v-if="!userCredentials">
 					<IntlFormatted :message-id="messages.signInToAddFriends">
 						<template #link="{ children }">

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

@@ -106,7 +106,7 @@ const messages = defineMessages({
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
 		:button-class="
-			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
+			'flex w-full items-center bg-transparent border-0 p-0' +
 			(isSearching
 				? ''
 				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
@@ -122,7 +122,7 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
+					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"

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

@@ -17,41 +17,31 @@
 					<tr class="content">
 						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
 						<td>
-							<multiselect
+							<Combobox
 								v-if="versions?.length > 1"
-								v-model="selectedVersion"
-								:options="versions"
+								v-model="selectedVersionId"
+								:options="versionOptions"
 								:searchable="true"
 								placeholder="Select version"
-								open-direction="top"
-								:show-labels="false"
-								:custom-label="
-									(version) =>
-										`${version?.name} (${version?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')} - ${version?.game_versions.join(', ')})`
-								"
+								force-direction="up"
 								:max-height="150"
 							/>
 							<span v-else>
-								<span>
-									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders
-											.map((name) => formatLoader(formatMessage, name))
-											.join(', ')
-									}}
-									- {{ selectedVersion?.game_versions.join(', ') }})
-								</span>
+								<span>{{ selectedVersionLabel }}</span>
 							</span>
 						</td>
 					</tr>
 				</tbody>
 			</table>
 			<div class="button-group">
-				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
-				<Button color="primary" :disabled="installing" @click="install()">
-					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
-				</Button>
+				<ButtonStyled type="outlined">
+					<button @click="() => incompatibleModal.hide()"><XIcon />Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="installing" @click="install()">
+						<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</ModalWrapper>
@@ -59,9 +49,14 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
-import { ref } from 'vue'
-import Multiselect from 'vue-multiselect'
+import {
+	ButtonStyled,
+	Combobox,
+	formatLoader,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
@@ -79,11 +74,35 @@ const installing = ref(false)
 
 const onInstall = ref(() => {})
 
+const selectedVersionLabel = computed(() => {
+	if (!selectedVersion.value) return ''
+	return `${selectedVersion.value.name} (${selectedVersion.value.loaders
+		.map((name) => formatLoader(formatMessage, name))
+		.join(', ')} - ${selectedVersion.value.game_versions.join(', ')})`
+})
+
+const versionOptions = computed(() =>
+	(versions.value ?? []).map((version) => ({
+		value: version.id,
+		label: `${version.name} (${version.loaders
+			.map((name) => formatLoader(formatMessage, name))
+			.join(', ')} - ${version.game_versions.join(', ')})`,
+	})),
+)
+
+const selectedVersionId = computed({
+	get: () => selectedVersion.value?.id ?? null,
+	set: (value) => {
+		if (!value) return
+		selectedVersion.value = (versions.value ?? []).find((version) => version.id === value) ?? null
+	},
+})
+
 defineExpose({
 	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
 		instance.value = instanceVal
-		versions.value = projectVersions
-		selectedVersion.value = selected ?? projectVersions[0]
+		versions.value = projectVersions ?? []
+		selectedVersion.value = selected ?? projectVersions?.[0] ?? null
 
 		project.value = projectVal
 
@@ -98,7 +117,7 @@ defineExpose({
 
 const install = async () => {
 	installing.value = true
-	await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
+	await installMod(instance.value.path, selectedVersion.value.id, 'standalone').catch(handleError)
 	installing.value = false
 	onInstall.value(selectedVersion.value.id)
 	incompatibleModal.value.hide()
@@ -162,9 +181,5 @@ td:first-child {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-
-	:deep(.animated-dropdown .options) {
-		max-height: 13.375rem;
-	}
 }
 </style>

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

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

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

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

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

@@ -0,0 +1,140 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" :on-hide="reset">
+		<div class="max-w-[31rem] flex flex-col gap-6">
+			<Admonition
+				type="warning"
+				:header="formatMessage(messages.warningTitle)"
+				:body="formatMessage(messages.warningBody)"
+			/>
+			<div v-if="fileName" class="overflow-x-auto whitespace-nowrap text-sm text-secondary">
+				{{ fileName }}
+			</div>
+			<div>
+				<p class="mt-0 leading-tight">
+					{{ formatMessage(messages.body) }}
+				</p>
+				<p class="text-orange font-semibold mb-0 leading-tight">
+					{{ formatMessage(messages.malwareStatement) }}
+				</p>
+			</div>
+			<Checkbox v-model="dontShowAgain" :label="formatMessage(messages.dontShowAgain)" />
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button @click="cancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="orange">
+					<button :disabled="isProceeding" @click="proceed">
+						<SpinnerIcon v-if="isProceeding" class="animate-spin" />
+						<CircleArrowRightIcon v-else />
+						{{ formatMessage(messages.installAnyway) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { CircleArrowRightIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref, useTemplateRef } from 'vue'
+
+import { get as getSettings, set as setSettings } from '@/helpers/settings'
+import { useTheming } from '@/store/state'
+import type { FeatureFlag } from '@/store/theme.ts'
+
+const { formatMessage } = useVIntl()
+const themeStore = useTheming()
+const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
+
+const dontShowAgain = ref(false)
+const modal = useTemplateRef('modal')
+const onProceed = ref<() => Promise<void>>()
+const isProceeding = ref(false)
+const fileName = ref('')
+
+const messages = defineMessages({
+	header: {
+		id: 'unknown-pack-warning-modal.header',
+		defaultMessage: 'Confirm installation',
+	},
+	warningTitle: {
+		id: 'unknown-pack-warning-modal.warning.title',
+		defaultMessage: 'Unknown file warning',
+	},
+	warningBody: {
+		id: 'unknown-pack-warning-modal.warning.body',
+		defaultMessage: `We couldn't find this file on Modrinth. We strongly recommend only installing files from sources you trust.`,
+	},
+	body: {
+		id: 'unknown-pack-warning-modal.body',
+		defaultMessage: `A file is only reviewed if it’s uploaded to Modrinth, regardless of its file format (including .mrpack).`,
+	},
+	malwareStatement: {
+		id: 'unknown-pack-warning-modal.malware-statement',
+		defaultMessage: `Malware is often distributed through modpack files by sharing them on platforms like Discord.`,
+	},
+	dontShowAgain: {
+		id: 'unknown-pack-warning-modal.dont-show-again',
+		defaultMessage: `Don't show this warning again`,
+	},
+	installAnyway: {
+		id: 'unknown-pack-warning-modal.install-anyway',
+		defaultMessage: `Install anyway`,
+	},
+})
+
+function show(createInstance: () => Promise<void>, selectedFileName = '') {
+	onProceed.value = createInstance
+	fileName.value = selectedFileName
+	dontShowAgain.value = false
+
+	if (themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)) {
+		// noinspection ES6MissingAwait
+		createInstance()
+		return
+	}
+
+	modal.value?.show()
+}
+
+function reset() {
+	onProceed.value = undefined
+	fileName.value = ''
+}
+
+function cancel() {
+	modal.value?.hide()
+}
+
+async function proceed() {
+	if (!onProceed.value) {
+		return
+	}
+
+	if (dontShowAgain.value) {
+		themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = true
+		const settings = await getSettings()
+		settings.feature_flags[skipUnknownPackWarningFeatureFlag] = true
+		await setSettings(settings)
+	}
+
+	const createInstance = onProceed.value
+	modal.value?.hide()
+	// noinspection ES6MissingAwait
+	createInstance()
+}
+
+defineExpose({ show })
+</script>

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

@@ -18,8 +18,9 @@ import { useRouter } from 'vue-router'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { GameInstance } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -27,21 +28,21 @@ const router = useRouter()
 
 const deleteConfirmModal = ref()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
-const title = ref(props.instance.name)
-const icon: Ref<string | undefined> = ref(props.instance.icon_path)
-const groups = ref(props.instance.groups)
+const title = ref(instance.value.name)
+const icon: Ref<string | undefined> = ref(instance.value.icon_path)
+const groups = ref([...instance.value.groups])
 
 const newCategoryInput = ref('')
 
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const installing = computed(() => instance.value.install_stage !== 'installed')
 
 async function duplicateProfile() {
-	await duplicate(props.instance.path).catch(handleError)
+	await duplicate(instance.value.path).catch(handleError)
 	trackEvent('InstanceDuplicate', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
 	})
 }
 
@@ -52,7 +53,7 @@ const availableGroups = computed(() => [
 
 async function resetIcon() {
 	icon.value = undefined
-	await edit_icon(props.instance.path, null).catch(handleError)
+	await edit_icon(instance.value.path, null).catch(handleError)
 	trackEvent('InstanceRemoveIcon')
 }
 
@@ -70,7 +71,7 @@ async function setIcon() {
 	if (!value) return
 
 	icon.value = value
-	await edit_icon(props.instance.path, icon.value).catch(handleError)
+	await edit_icon(instance.value.path, icon.value).catch(handleError)
 
 	trackEvent('InstanceSetIcon')
 }
@@ -101,7 +102,7 @@ watch(
 	[title, groups, groups],
 	async () => {
 		if (removing.value) return
-		await edit(props.instance.path, editProfileObject.value).catch(handleError)
+		await edit(instance.value.path, editProfileObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
@@ -109,14 +110,15 @@ watch(
 const removing = ref(false)
 async function removeProfile() {
 	removing.value = true
+	const path = instance.value.path
 
 	trackEvent('InstanceRemove', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
 	})
 
 	await router.push({ path: '/' })
-	await remove(props.instance.path).catch(handleError)
+	await remove(path).catch(handleError)
 }
 
 const messages = defineMessages({
@@ -196,45 +198,48 @@ const messages = defineMessages({
 <template>
 	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<div class="block">
-		<div class="float-end ml-4 relative group">
-			<OverflowMenu
-				v-tooltip="formatMessage(messages.editIcon)"
-				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-				:options="[
-					{
-						id: 'select',
-						action: () => setIcon(),
-					},
-					{
-						id: 'remove',
-						color: 'danger',
-						action: () => resetIcon(),
-						shown: !!icon,
-					},
-				]"
-			>
-				<Avatar
-					:src="icon ? convertFileSrc(icon) : icon"
-					size="108px"
-					class="!border-4 group-hover:brightness-75"
-					:tint-by="props.instance.path"
-					no-shadow
-				/>
-				<div class="absolute top-0 right-0 m-2">
-					<div
-						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+		<div class="float-end ml-10 relative group w-fit">
+			<div class="flex flex-col gap-1">
+				<span class="text-lg font-semibold text-contrast">Icon</span>
+				<div class="group relative w-fit">
+					<OverflowMenu
+						v-tooltip="formatMessage(messages.editIcon)"
+						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+						:options="[
+							{
+								id: 'select',
+								action: () => setIcon(),
+							},
+							{
+								id: 'remove',
+								color: 'danger',
+								action: () => resetIcon(),
+								shown: !!icon,
+							},
+						]"
 					>
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-					</div>
+						<Avatar
+							:src="icon ? convertFileSrc(icon) : icon"
+							size="108px"
+							class="transition-[filter] group-hover:brightness-75"
+							:tint-by="instance.path"
+							no-shadow
+						/>
+						<div
+							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+						>
+							<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
+						</div>
+						<template #select>
+							<UploadIcon />
+							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+						</template>
+						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+					</OverflowMenu>
 				</div>
-				<template #select>
-					<UploadIcon />
-					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-				</template>
-				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-			</OverflowMenu>
+			</div>
 		</div>
-		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+		<label for="instance-name" class="m-0 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
@@ -247,76 +252,82 @@ const messages = defineMessages({
 			/>
 		</div>
 		<template v-if="instance.install_stage == 'installed'">
-			<div>
-				<h2
-					id="duplicate-instance-label"
-					class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
-				>
+			<div class="flex flex-col gap-2.5 mt-6">
+				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<p class="m-0 mb-2">
+				<ButtonStyled>
+					<button
+						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+						aria-labelledby="duplicate-instance-label"
+						:disabled="installing"
+						class="w-max !shadow-none"
+						@click="duplicateProfile"
+					>
+						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+					</button>
+				</ButtonStyled>
+				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
 			</div>
-			<ButtonStyled>
+		</template>
+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.libraryGroups) }}
+			</h2>
+
+			<div class="flex flex-col gap-1">
+				<Checkbox
+					v-for="group in availableGroups"
+					:key="group"
+					:model-value="groups.includes(group)"
+					:label="group"
+					@click="toggleGroup(group)"
+				/>
+				<div class="flex gap-2 items-center">
+					<StyledInput
+						v-model="newCategoryInput"
+						:placeholder="formatMessage(messages.libraryGroupsEnterName)"
+						class="w-full max-w-[300px]"
+						@submit="() => addCategory"
+					/>
+					<ButtonStyled>
+						<button class="w-fit !shadow-none" @click="() => addCategory()">
+							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<p class="m-0">
+				{{ formatMessage(messages.libraryGroupsDescription) }}
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5 mt-6">
+			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
+				{{ formatMessage(messages.deleteInstance) }}
+			</h2>
+			<ButtonStyled color="red">
 				<button
-					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-					aria-labelledby="duplicate-instance-label"
-					:disabled="installing"
-					@click="duplicateProfile"
+					aria-labelledby="delete-instance-label"
+					:disabled="removing"
+					class="w-fit !shadow-none"
+					@click="deleteConfirmModal.show()"
 				>
-					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+					<SpinnerIcon v-if="removing" class="animate-spin" />
+					<TrashIcon v-else />
+					{{
+						removing
+							? formatMessage(messages.deletingInstanceButton)
+							: formatMessage(messages.deleteInstanceButton)
+					}}
 				</button>
 			</ButtonStyled>
-		</template>
-		<h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.libraryGroups) }}
-		</h2>
-		<p class="m-0 mb-2">
-			{{ formatMessage(messages.libraryGroupsDescription) }}
-		</p>
-		<div class="flex flex-col gap-1">
-			<Checkbox
-				v-for="group in availableGroups"
-				:key="group"
-				:model-value="groups.includes(group)"
-				:label="group"
-				@click="toggleGroup(group)"
-			/>
-			<div class="flex gap-2 items-center">
-				<StyledInput
-					v-model="newCategoryInput"
-					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
-					@submit="() => addCategory"
-				/>
-				<ButtonStyled>
-					<button class="w-fit" @click="() => addCategory()">
-						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-					</button>
-				</ButtonStyled>
-			</div>
+			<p class="m-0">
+				{{ formatMessage(messages.deleteInstanceDescription) }}
+			</p>
 		</div>
-		<h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-			{{ formatMessage(messages.deleteInstance) }}
-		</h2>
-		<p class="m-0 mb-2">
-			{{ formatMessage(messages.deleteInstanceDescription) }}
-		</p>
-		<ButtonStyled color="red">
-			<button
-				aria-labelledby="delete-instance-label"
-				:disabled="removing"
-				@click="deleteConfirmModal.show()"
-			>
-				<SpinnerIcon v-if="removing" class="animate-spin" />
-				<TrashIcon v-else />
-				{{
-					removing
-						? formatMessage(messages.deletingInstanceButton)
-						: formatMessage(messages.deleteInstanceButton)
-				}}
-			</button>
-		</ButtonStyled>
 	</div>
 </template>
 <style scoped lang="scss">

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

@@ -10,22 +10,23 @@ import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings, Hooks } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideHooks = ref(
-	!!props.instance.hooks.pre_launch ||
-		!!props.instance.hooks.wrapper ||
-		!!props.instance.hooks.post_exit,
+	!!instance.value.hooks.pre_launch ||
+		!!instance.value.hooks.wrapper ||
+		!!instance.value.hooks.post_exit,
 )
-const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
+const hooks = ref(instance.value.hooks ?? globalSettings.hooks)
 
 const editProfileObject = computed(() => {
 	const editProfile: {
@@ -41,7 +42,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -100,57 +101,57 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="m-0 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.hooks) }}
 		</h2>
+		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="my-2.5" />
 		<p class="m-0">
 			{{ formatMessage(messages.hooksDescription) }}
 		</p>
-		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />
 
-		<h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.preLaunchDescription) }}
-		</p>
 		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			wrapper-class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.preLaunchDescription) }}
+		</p>
 
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.wrapperDescription) }}
-		</p>
 		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			wrapper-class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.wrapperDescription) }}
+		</p>
 
-		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
-		<p class="m-0">
-			{{ formatMessage(messages.postExitDescription) }}
-		</p>
 		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			wrapper-class="w-full mt-2"
+			wrapper-class="w-full my-2.5"
 		/>
+		<p class="m-0">
+			{{ formatMessage(messages.postExitDescription) }}
+		</p>
 	</div>
 </template>

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

@@ -27,17 +27,15 @@ import {
 	update_repair_modrinth,
 } from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { InstanceSettingsTabProps, Manifest } from '../../../helpers/types'
+import type { Manifest } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
 
-const props = defineProps<InstanceSettingsTabProps>()
-const emit = defineEmits<{
-	unlinked: []
-}>()
+const { instance, offline, isMinecraftServer, onUnlinked } = injectInstanceSettings()
 
 const [
 	fabric_versions,
@@ -75,9 +73,9 @@ const [
 ])
 
 const { data: modpackInfo } = useQuery({
-	queryKey: computed(() => ['linkedModpackInfo', props.instance.path]),
-	queryFn: () => get_linked_modpack_info(props.instance.path, 'must_revalidate'),
-	enabled: computed(() => !!props.instance.linked_data?.project_id && !props.offline),
+	queryKey: computed(() => ['linkedModpackInfo', instance.value.path]),
+	queryFn: () => get_linked_modpack_info(instance.value.path, 'must_revalidate'),
+	enabled: computed(() => !!instance.value.linked_data?.project_id && !offline),
 })
 
 const repairing = ref(false)
@@ -103,13 +101,13 @@ function getManifest(loader: string) {
 provideAppBackup({
 	async createBackup() {
 		const allProfiles = await list()
-		const prefix = `${props.instance.name} - Backup #`
+		const prefix = `${instance.value.name} - Backup #`
 		const existingNums = allProfiles
 			.filter((p) => p.name.startsWith(prefix))
 			.map((p) => parseInt(p.name.slice(prefix.length), 10))
 			.filter((n) => !isNaN(n))
 		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
-		const newPath = await duplicate(props.instance.path)
+		const newPath = await duplicate(instance.value.path)
 		await edit(newPath, { name: `${prefix}${nextNum}` })
 	},
 })
@@ -120,30 +118,30 @@ provideInstallationSettings({
 		const rows = [
 			{
 				label: formatMessage(commonMessages.platformLabel),
-				value: formatLoaderLabel(props.instance.loader),
+				value: formatLoaderLabel(instance.value.loader),
 			},
 			{
 				label: formatMessage(commonMessages.gameVersionLabel),
-				value: props.instance.game_version,
+				value: instance.value.game_version,
 			},
 		]
-		if (props.instance.loader !== 'vanilla' && props.instance.loader_version) {
+		if (instance.value.loader !== 'vanilla' && instance.value.loader_version) {
 			rows.push({
 				label: formatMessage(messages.loaderVersion, {
-					loader: formatLoaderLabel(props.instance.loader),
+					loader: formatLoaderLabel(instance.value.loader),
 				}),
-				value: props.instance.loader_version,
+				value: instance.value.loader_version,
 			})
 		}
 		return rows
 	}),
-	isLinked: computed(() => !!props.instance.linked_data?.locked),
+	isLinked: computed(() => !!instance.value.linked_data?.locked),
 	isBusy: computed(
 		() =>
-			props.instance.install_stage !== 'installed' ||
+			instance.value.install_stage !== 'installed' ||
 			repairing.value ||
 			reinstalling.value ||
-			!!props.offline,
+			!!offline,
 	),
 	modpack: computed(() => {
 		if (!modpackInfo.value) return null
@@ -154,9 +152,9 @@ provideInstallationSettings({
 			versionNumber: modpackInfo.value.version?.version_number,
 		}
 	}),
-	currentPlatform: computed(() => props.instance.loader),
-	currentGameVersion: computed(() => props.instance.game_version),
-	currentLoaderVersion: computed(() => props.instance.loader_version ?? ''),
+	currentPlatform: computed(() => instance.value.loader),
+	currentGameVersion: computed(() => instance.value.game_version),
+	currentLoaderVersion: computed(() => instance.value.loader_version ?? ''),
 	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
 
 	resolveGameVersions(loader, showSnapshots) {
@@ -199,50 +197,50 @@ provideInstallationSettings({
 		if (platform !== 'vanilla' && loaderVersionId) {
 			editProfile.loader_version = loaderVersionId
 		}
-		await edit(props.instance.path, editProfile).catch(handleError)
+		await edit(instance.value.path, editProfile).catch(handleError)
 	},
 
 	afterSave: async () => {
-		await install(props.instance.path, false).catch(handleError)
+		await install(instance.value.path, false).catch(handleError)
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.value.loader,
+			game_version: instance.value.game_version,
 		})
 	},
 
 	async repair() {
 		repairing.value = true
-		await install(props.instance.path, true).catch(handleError)
+		await install(instance.value.path, true).catch(handleError)
 		repairing.value = false
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.value.loader,
+			game_version: instance.value.game_version,
 		})
 	},
 
 	async reinstallModpack() {
 		reinstalling.value = true
-		await update_repair_modrinth(props.instance.path).catch(handleError)
+		await update_repair_modrinth(instance.value.path).catch(handleError)
 		reinstalling.value = false
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.value.loader,
+			game_version: instance.value.game_version,
 		})
 	},
 
 	async unlinkModpack() {
-		await edit(props.instance.path, {
+		await edit(instance.value.path, {
 			linked_data: null as unknown as undefined,
 		})
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
-		emit('unlinked')
+		onUnlinked()
 	},
 
 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
-		const versions = await get_project_versions(props.instance.linked_data!.project_id!).catch(
+		const versions = await get_project_versions(instance.value.linked_data!.project_id!).catch(
 			handleError,
 		)
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
@@ -255,25 +253,25 @@ provideInstallationSettings({
 	},
 
 	async onModpackVersionConfirm(version) {
-		await update_managed_modrinth_version(props.instance.path, version.id)
+		await update_managed_modrinth_version(instance.value.path, version.id)
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryKey: ['linkedModpackInfo', instance.value.path],
 		})
 	},
 
 	updaterModalProps: computed(() => ({
 		isApp: true,
 		currentVersionId:
-			modpackInfo.value?.update_version_id ?? props.instance.linked_data?.version_id ?? '',
+			modpackInfo.value?.update_version_id ?? instance.value.linked_data?.version_id ?? '',
 		projectIconUrl: modpackInfo.value?.project?.icon_url,
 		projectName: modpackInfo.value?.project?.title ?? 'Modpack',
-		currentGameVersion: props.instance.game_version,
-		currentLoader: props.instance.loader,
+		currentGameVersion: instance.value.game_version,
+		currentLoader: instance.value.loader,
 	})),
 
 	isServer: false,
 	isApp: true,
-	showModpackVersionActions: !props.isMinecraftServer,
+	showModpackVersionActions: !isMinecraftServer.value,
 	repairing,
 	reinstalling,
 })

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

@@ -14,34 +14,35 @@ import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
 
-const overrideJavaInstall = ref(!!props.instance.java_path)
-const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
-const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
+const overrideJavaInstall = ref(!!instance.value.java_path)
+const optimalJava = readonly(await get_optimal_jre_key(instance.value.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? instance.value.java_path })
 
-const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
+const overrideJavaArgs = ref((instance.value.extra_launch_args?.length ?? 0) > 0)
 const javaArgs = ref(
-	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
+	(instance.value.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
 )
 
-const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
+const overrideEnvVars = ref((instance.value.custom_env_vars?.length ?? 0) > 0)
 const envVars = ref(
-	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
+	(instance.value.custom_env_vars ?? globalSettings.custom_env_vars)
 		.map((x) => x.join('='))
 		.join(' '),
 )
 
-const overrideMemorySettings = ref(!!props.instance.memory)
-const memory = ref(props.instance.memory ?? globalSettings.memory)
+const overrideMemorySettings = ref(!!instance.value.memory)
+const memory = ref(instance.value.memory ?? globalSettings.memory)
 const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
 	maxMemory: number
 	snapPoints: number[]
@@ -79,7 +80,7 @@ watch(
 		memory,
 	],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -110,10 +111,10 @@ const messages = defineMessages({
 
 <template>
 	<div>
-		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="m-0 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaInstallation) }}
 		</h2>
-		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
+		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2.5" />
 		<template v-if="!overrideJavaInstall">
 			<div class="flex my-2 items-center gap-2 font-semibold">
 				<template v-if="javaInstall">
@@ -143,10 +144,10 @@ const messages = defineMessages({
 			</div>
 		</template>
 		<JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaMemory) }}
 		</h2>
-		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
+		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2.5" />
 		<Slider
 			id="max-memory"
 			v-model="memory.maximum"
@@ -158,7 +159,7 @@ const messages = defineMessages({
 			:snap-range="512"
 			unit="MB"
 		/>
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
 		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
@@ -170,10 +171,10 @@ const messages = defineMessages({
 			placeholder="Enter java arguments..."
 			wrapper-class="w-full"
 		/>
-		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+		<h2 id="project-name" class="mt-6 mb-2.5 text-lg font-semibold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
-		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
+		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2.5" />
 		<StyledInput
 			id="env-vars"
 			v-model="envVars"

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

@@ -11,24 +11,25 @@ import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideWindowSettings = ref(
-	!!props.instance.game_resolution || !!props.instance.force_fullscreen,
+	!!instance.value.game_resolution || !!instance.value.force_fullscreen,
 )
 const resolution: Ref<[number, number]> = ref(
-	props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+	instance.value.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
 )
 const fullscreenSetting: Ref<boolean> = ref(
-	props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
+	instance.value.force_fullscreen ?? globalSettings.force_fullscreen,
 )
 
 const editProfileObject = computed(() => {
@@ -47,7 +48,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideWindowSettings, resolution, fullscreenSetting],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.value.path, editProfileObject.value)
 	},
 	{ deep: true },
 )
@@ -93,14 +94,14 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div>
+	<div class="flex flex-col gap-6">
 		<Checkbox
 			v-model="overrideWindowSettings"
 			:label="formatMessage(messages.customWindowSettings)"
 		/>
-		<div class="mt-2 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<div class="flex items-center gap-4 justify-between">
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.fullscreen) }}
 				</h2>
 				<p class="m-0">
@@ -119,9 +120,9 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="mt-4 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<div class="flex items-center gap-4 justify-between">
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.width) }}
 				</h2>
 				<p class="m-0">
@@ -138,9 +139,9 @@ const messages = defineMessages({
 			/>
 		</div>
 
-		<div class="mt-4 flex items-center gap-4 justify-between">
-			<div>
-				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+		<div class="flex items-center gap-4 justify-between">
+			<div class="flex flex-col gap-1">
+				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.height) }}
 				</h2>
 				<p class="m-0">

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

@@ -6,12 +6,13 @@ import {
 	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
-	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
+	ToggleRightIcon,
 } from '@modrinth/assets'
 import {
 	commonMessages,
+	commonSettingsMessages,
 	defineMessage,
 	defineMessages,
 	ProgressBar,
@@ -20,9 +21,8 @@ import {
 } from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
@@ -96,25 +96,20 @@ const tabs = [
 		content: ResourceManagementSettings,
 	},
 	{
-		name: defineMessage({
-			id: 'app.settings.tabs.feature-flags',
-			defaultMessage: 'Feature flags',
-		}),
-		icon: ReportIcon,
+		name: commonSettingsMessages.featureFlags,
+		icon: ToggleRightIcon,
 		content: FeatureFlagSettings,
 		developerOnly: true,
 	},
 ]
 
-const modal = ref()
+const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function show() {
-	modal.value.show()
+	modal.value?.show()
 }
 
-const isOpen = computed(() => modal.value?.isOpen)
-
-defineExpose({ show, isOpen })
+defineExpose({ show })
 
 const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
 
@@ -138,8 +133,8 @@ function devModeCount() {
 		settings.value.developer_mode = !!themeStore.devMode
 		devModeCounter.value = 0
 
-		if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
-			modal.value.setTab(0)
+		if (!themeStore.devMode && tabs[modal.value!.selectedTab].developerOnly) {
+			modal.value!.setTab(0)
 		}
 	}
 }
@@ -152,49 +147,46 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<TabbedModal ref="modal" :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
 		<template #title>
 			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
 				<SettingsIcon /> Settings
 			</span>
 		</template>
-
-		<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
-			<template #footer>
-				<div class="mt-auto text-secondary text-sm">
-					<div class="mb-3">
-						<template v-if="progress > 0 && progress < 1">
-							<p class="m-0 mb-2">
-								{{ formatMessage(messages.downloading, { version: downloadingVersion }) }}
-							</p>
-							<ProgressBar :progress="progress" />
-						</template>
-					</div>
-					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
-						{{ formatMessage(developerModeEnabled) }}
-					</p>
-					<div class="flex items-center gap-3">
-						<button
-							class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
-							:class="{
-								'text-brand': themeStore.devMode,
-								'text-secondary': !themeStore.devMode,
-							}"
-							@click="devModeCount"
-						>
-							<ModrinthIcon class="w-6 h-6" />
-						</button>
-						<div>
-							<p class="m-0">Modrinth App {{ version }}</p>
-							<p class="m-0">
-								<span v-if="osPlatform === 'macos'">macOS</span>
-								<span v-else class="capitalize">{{ osPlatform }}</span>
-								{{ osVersion }}
-							</p>
-						</div>
+		<template #footer>
+			<div class="mt-auto text-secondary text-sm">
+				<div class="mb-3">
+					<template v-if="progress > 0 && progress < 1">
+						<p class="m-0 mb-2">
+							{{ formatMessage(messages.downloading, { version: downloadingVersion }) }}
+						</p>
+						<ProgressBar :progress="progress" />
+					</template>
+				</div>
+				<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
+					{{ formatMessage(developerModeEnabled) }}
+				</p>
+				<div class="flex items-center gap-3">
+					<button
+						class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
+						:class="{
+							'text-brand': themeStore.devMode,
+							'text-secondary': !themeStore.devMode,
+						}"
+						@click="devModeCount"
+					>
+						<ModrinthIcon class="w-6 h-6" />
+					</button>
+					<div class="max-w-[200px]">
+						<p class="m-0">Modrinth App {{ version }}</p>
+						<p class="m-0">
+							<span v-if="osPlatform === 'macos'">macOS</span>
+							<span v-else class="capitalize">{{ osPlatform }}</span>
+							{{ osVersion }}
+						</p>
 					</div>
 				</div>
-			</template>
-		</TabbedModal>
-	</ModalWrapper>
+			</div>
+		</template>
+	</TabbedModal>
 </template>

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

@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>

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

@@ -12,14 +12,13 @@ import {
 	Avatar,
 	commonMessages,
 	defineMessage,
-	NewModal,
 	TabbedModal,
 	type TabbedModalTab,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+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'
@@ -28,12 +27,16 @@ import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
 import { get_project_v3 } from '@/helpers/cache'
 import { get_linked_modpack_info } from '@/helpers/profile'
+import { provideInstanceSettings } from '@/providers/instance-settings'
 
-import type { InstanceSettingsTabProps } from '../../../helpers/types'
+import type { GameInstance } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const props = defineProps<{
+	instance: GameInstance
+	offline?: boolean
+}>()
 const emit = defineEmits<{
 	unlinked: []
 }>()
@@ -41,6 +44,15 @@ const emit = defineEmits<{
 const isMinecraftServer = ref(false)
 const handleUnlinked = () => emit('unlinked')
 
+const instanceRef = computed(() => props.instance)
+
+provideInstanceSettings({
+	instance: instanceRef,
+	offline: props.offline,
+	isMinecraftServer,
+	onUnlinked: handleUnlinked,
+})
+
 watch(
 	() => props.instance,
 	(instance) => {
@@ -58,7 +70,7 @@ watch(
 	{ immediate: true },
 )
 
-const tabs = computed<TabbedModalTab<InstanceSettingsTabProps>[]>(() => [
+const tabs = computed<TabbedModalTab[]>(() => [
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.general',
@@ -102,8 +114,7 @@ const tabs = computed<TabbedModalTab<InstanceSettingsTabProps>[]>(() => [
 ])
 
 const queryClient = useQueryClient()
-const modal = ref()
-const tabbedModal = useTemplateRef('tabbedModal')
+const tabbedModal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
 function show(tabIndex?: number) {
 	if (props.instance.linked_data?.project_id) {
@@ -112,7 +123,7 @@ function show(tabIndex?: number) {
 			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
 		})
 	}
-	modal.value.show()
+	tabbedModal.value?.show()
 	if (tabIndex !== undefined) {
 		nextTick(() => tabbedModal.value?.setTab(tabIndex))
 	}
@@ -121,8 +132,9 @@ function show(tabIndex?: number) {
 defineExpose({ show })
 </script>
 <template>
-	<NewModal
-		ref="modal"
+	<TabbedModal
+		ref="tabbedModal"
+		:tabs="tabs"
 		:max-width="'min(928px, calc(95vw - 10rem))'"
 		:width="'min(928px, calc(95vw - 10rem))'"
 	>
@@ -139,19 +151,5 @@ defineExpose({ show })
 				}}</span>
 			</span>
 		</template>
-
-		<TabbedModal
-			ref="tabbedModal"
-			:tabs="
-				tabs.map((tab) => ({
-					...tab,
-					props: {
-						...props,
-						isMinecraftServer,
-						onUnlinked: handleUnlinked,
-					},
-				}))
-			"
-		/>
-	</NewModal>
+	</TabbedModal>
 </template>

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

@@ -31,7 +31,7 @@ const props = defineProps({
 const modal = useTemplateRef('modal')
 
 defineExpose({
-	show: (e: MouseEvent) => {
+	show: (e?: MouseEvent) => {
 		modal.value?.show(e)
 	},
 	hide: () => {

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

@@ -0,0 +1,102 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+		<p class="m-0 text-secondary">
+			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
+				<template #bold="{ children }">
+					<span class="font-medium text-contrast"><component :is="() => children" /></span>
+				</template>
+			</IntlFormatted>
+		</p>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<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>
+</template>
+
+<script setup lang="ts">
+import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.modpack-already-installed.header',
+		defaultMessage: 'Modpack already installed',
+	},
+	body: {
+		id: 'app.instance.modpack-already-installed.body',
+		defaultMessage:
+			'This modpack is already installed in the <bold>{instanceName}</bold> instance. Are you sure you want to duplicate it?',
+	},
+	instance: {
+		id: 'app.instance.modpack-already-installed.instance',
+		defaultMessage: 'Instance',
+	},
+	create: {
+		id: 'app.instance.modpack-already-installed.create',
+		defaultMessage: 'Create',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'go-to-instance', instancePath: string): void
+	(e: 'create-anyway'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const instanceName = ref('')
+const instancePath = ref('')
+
+function show(name: string, path: string) {
+	instanceName.value = name
+	instancePath.value = path
+	modal.value?.show()
+}
+
+function handleCancel() {
+	modal.value?.hide()
+}
+
+function handleGoToInstance() {
+	modal.value?.hide()
+	emit('go-to-instance', instancePath.value)
+}
+
+function handleCreateAnyway() {
+	modal.value?.hide()
+	emit('create-anyway')
+}
+
+defineExpose({
+	show,
+})
+</script>

apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue

@@ -1,13 +1,106 @@
 <script setup lang="ts">
-import { Combobox, ThemeSelector, Toggle } from '@modrinth/ui'
+import { Combobox, defineMessages, ThemeSelector, Toggle, useVIntl } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get, set } from '@/helpers/settings.ts'
 import { getOS } from '@/helpers/utils'
 import { useTheming } from '@/store/state'
-import type { ColorTheme } from '@/store/theme.ts'
+import type { ColorTheme, FeatureFlag } from '@/store/theme.ts'
 
 const themeStore = useTheming()
+const { formatMessage } = useVIntl()
+
+const worldsInHomeFeatureFlag = 'worlds_in_home' as FeatureFlag
+const skipUnknownPackWarningFeatureFlag = 'skip_unknown_pack_warning' as FeatureFlag
+
+const messages = defineMessages({
+	colorThemeTitle: {
+		id: 'app.appearance-settings.color-theme.title',
+		defaultMessage: 'Color theme',
+	},
+	colorThemeDescription: {
+		id: 'app.appearance-settings.color-theme.description',
+		defaultMessage: 'Select your preferred color theme for Modrinth App.',
+	},
+	advancedRenderingTitle: {
+		id: 'app.appearance-settings.advanced-rendering.title',
+		defaultMessage: 'Advanced rendering',
+	},
+	advancedRenderingDescription: {
+		id: 'app.appearance-settings.advanced-rendering.description',
+		defaultMessage:
+			'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+	},
+	hideNametagTitle: {
+		id: 'app.appearance-settings.hide-nametag.title',
+		defaultMessage: 'Hide nametag',
+	},
+	hideNametagDescription: {
+		id: 'app.appearance-settings.hide-nametag.description',
+		defaultMessage: 'Disables the nametag above your player on the skins page.',
+	},
+	nativeDecorationsTitle: {
+		id: 'app.appearance-settings.native-decorations.title',
+		defaultMessage: 'Native decorations',
+	},
+	nativeDecorationsDescription: {
+		id: 'app.appearance-settings.native-decorations.description',
+		defaultMessage: 'Use system window frame (app restart required).',
+	},
+	minimizeLauncherTitle: {
+		id: 'app.appearance-settings.minimize-launcher.title',
+		defaultMessage: 'Minimize launcher',
+	},
+	minimizeLauncherDescription: {
+		id: 'app.appearance-settings.minimize-launcher.description',
+		defaultMessage: 'Minimize the launcher when a Minecraft process starts.',
+	},
+	defaultLandingPageTitle: {
+		id: 'app.appearance-settings.default-landing-page.title',
+		defaultMessage: 'Default landing page',
+	},
+	defaultLandingPageDescription: {
+		id: 'app.appearance-settings.default-landing-page.description',
+		defaultMessage: 'Change the page to which the launcher opens on.',
+	},
+	defaultLandingPageHome: {
+		id: 'app.appearance-settings.default-landing-page.home',
+		defaultMessage: 'Home',
+	},
+	defaultLandingPageLibrary: {
+		id: 'app.appearance-settings.default-landing-page.library',
+		defaultMessage: 'Library',
+	},
+	selectOption: {
+		id: 'app.appearance-settings.select-option',
+		defaultMessage: 'Select an option',
+	},
+	jumpBackIntoWorldsTitle: {
+		id: 'app.appearance-settings.jump-back-into-worlds.title',
+		defaultMessage: 'Jump back into worlds',
+	},
+	jumpBackIntoWorldsDescription: {
+		id: 'app.appearance-settings.jump-back-into-worlds.description',
+		defaultMessage: 'Includes recent worlds in the "Jump back in" section on the Home page.',
+	},
+	toggleSidebarTitle: {
+		id: 'app.appearance-settings.toggle-sidebar.title',
+		defaultMessage: 'Toggle sidebar',
+	},
+	toggleSidebarDescription: {
+		id: 'app.appearance-settings.toggle-sidebar.description',
+		defaultMessage: 'Enables the ability to toggle the sidebar.',
+	},
+	unknownPackWarningTitle: {
+		id: 'app.appearance-settings.unknown-pack-warning.title',
+		defaultMessage: 'Warn me before installing unknown modpacks',
+	},
+	unknownPackWarningDescription: {
+		id: 'app.appearance-settings.unknown-pack-warning.description',
+		defaultMessage:
+			"If you attempt to install a Modrinth Pack file (.mrpack) that isn't hosted on Modrinth, we'll make sure you understand the risks before installing it.",
+	},
+})
 
 const os = ref(await getOS())
 const settings = ref(await get())
@@ -21,8 +114,10 @@ watch(
 )
 </script>
 <template>
-	<h2 class="m-0 text-lg font-extrabold text-contrast">Color theme</h2>
-	<p class="m-0 mt-1">Select your preferred color theme for Modrinth App.</p>
+	<h2 class="m-0 text-lg font-semibold text-contrast">
+		{{ formatMessage(messages.colorThemeTitle) }}
+	</h2>
+	<p class="m-0 mt-1">{{ formatMessage(messages.colorThemeDescription) }}</p>
 
 	<ThemeSelector
 		:update-color-theme="
@@ -36,12 +131,13 @@ watch(
 		system-theme-color="system"
 	/>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Advanced rendering</h2>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.advancedRenderingTitle) }}
+			</h2>
 			<p class="m-0 mt-1">
-				Enables advanced rendering such as blur effects that may cause performance issues without
-				hardware-accelerated rendering.
+				{{ formatMessage(messages.advancedRenderingDescription) }}
 			</p>
 		</div>
 
@@ -57,66 +153,107 @@ watch(
 		/>
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
-			<p class="m-0 mt-1">Disables the nametag above your player on the skins page.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.hideNametagTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.hideNametagDescription) }}</p>
 		</div>
 		<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
 	</div>
 
-	<div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
+	<div v-if="os !== 'MacOS'" class="mt-6 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
-			<p class="m-0 mt-1">Use system window frame (app restart required).</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.nativeDecorationsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.nativeDecorationsDescription) }}</p>
 		</div>
 		<Toggle id="native-decorations" v-model="settings.native_decorations" />
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Minimize launcher</h2>
-			<p class="m-0 mt-1">Minimize the launcher when a Minecraft process starts.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.minimizeLauncherTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.minimizeLauncherDescription) }}</p>
 		</div>
 		<Toggle id="minimize-launcher" v-model="settings.hide_on_process_start" />
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Default landing page</h2>
-			<p class="m-0 mt-1">Change the page to which the launcher opens on.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.defaultLandingPageTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.defaultLandingPageDescription) }}</p>
 		</div>
 		<Combobox
 			id="opening-page"
 			v-model="settings.default_page"
 			name="Opening page dropdown"
-			class="w-40"
-			:options="['Home', 'Library'].map((v) => ({ value: v, label: v }))"
+			class="max-w-40"
+			:options="[
+				{
+					value: 'Home',
+					label: formatMessage(messages.defaultLandingPageHome),
+				},
+				{
+					value: 'Library',
+					label: formatMessage(messages.defaultLandingPageLibrary),
+				},
+			]"
 			:display-value="settings.default_page ?? 'Select an option'"
 		/>
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Jump back into worlds</h2>
-			<p class="m-0 mt-1">Includes recent worlds in the "Jump back in" section on the Home page.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.jumpBackIntoWorldsTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.jumpBackIntoWorldsDescription) }}</p>
 		</div>
 		<Toggle
-			:model-value="themeStore.getFeatureFlag('worlds_in_home')"
+			:model-value="themeStore.getFeatureFlag(worldsInHomeFeatureFlag)"
 			@update:model-value="
 				() => {
-					const newValue = !themeStore.getFeatureFlag('worlds_in_home')
-					themeStore.featureFlags['worlds_in_home'] = newValue
-					settings.feature_flags['worlds_in_home'] = newValue
+					const newValue = !themeStore.getFeatureFlag(worldsInHomeFeatureFlag)
+					themeStore.featureFlags[worldsInHomeFeatureFlag] = newValue
+					settings.feature_flags[worldsInHomeFeatureFlag] = newValue
 				}
 			"
 		/>
 	</div>
 
-	<div class="mt-4 flex items-center justify-between">
+	<div class="mt-6 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Toggle sidebar</h2>
-			<p class="m-0 mt-1">Enables the ability to toggle the sidebar.</p>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.unknownPackWarningTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.unknownPackWarningDescription) }}</p>
+		</div>
+		<Toggle
+			:model-value="!themeStore.getFeatureFlag(skipUnknownPackWarningFeatureFlag)"
+			@update:model-value="
+				(e) => {
+					const warnBeforeUnknownPackInstall = !!e
+					const skipUnknownPackWarning = !warnBeforeUnknownPackInstall
+					themeStore.featureFlags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
+					settings.feature_flags[skipUnknownPackWarningFeatureFlag] = skipUnknownPackWarning
+				}
+			"
+		/>
+	</div>
+
+	<div class="mt-6 flex items-center justify-between">
+		<div>
+			<h2 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.toggleSidebarTitle) }}
+			</h2>
+			<p class="m-0 mt-1">{{ formatMessage(messages.toggleSidebarDescription) }}</p>
 		</div>
 		<Toggle
 			id="toggle-sidebar"

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

@@ -52,127 +52,135 @@ watch(
 
 <template>
 	<div>
-		<h2 class="m-0 text-lg font-extrabold text-contrast">Window size</h2>
+		<div class="flex flex-col gap-6">
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Fullscreen</h3>
+					<p class="m-0 leading-tight">
+						Overwrites the options.txt file to start in full screen when launched.
+					</p>
+				</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Fullscreen</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					Overwrites the options.txt file to start in full screen when launched.
-				</p>
+				<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
 			</div>
 
-			<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
-		</div>
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Width</h3>
+					<p class="m-0 leading-tight">The width of the game window when launched.</p>
+				</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Width</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					The width of the game window when launched.
-				</p>
+				<StyledInput
+					id="width"
+					v-model="settings.game_resolution[0]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					placeholder="Enter width..."
+				/>
 			</div>
 
-			<StyledInput
-				id="width"
-				v-model="settings.game_resolution[0]"
-				:disabled="settings.force_fullscreen"
-				autocomplete="off"
-				type="number"
-				placeholder="Enter width..."
-			/>
+			<div class="flex items-center justify-between gap-4">
+				<div class="flex flex-col gap-1">
+					<h3 class="m-0 text-lg font-semibold text-contrast">Height</h3>
+					<p class="m-0 leading-tight">The height of the game window when launched.</p>
+				</div>
+
+				<StyledInput
+					id="height"
+					v-model="settings.game_resolution[1]"
+					:disabled="settings.force_fullscreen"
+					autocomplete="off"
+					type="number"
+					placeholder="Enter height..."
+				/>
+			</div>
 		</div>
 
-		<div class="flex items-center justify-between gap-4">
-			<div>
-				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Height</h3>
-				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-					The height of the game window when launched.
-				</p>
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
+
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Memory allocated</h2>
+				<Slider
+					id="max-memory"
+					v-model="settings.memory.maximum"
+					:min="512"
+					:max="maxMemory"
+					:step="64"
+					:snap-points="snapPoints"
+					:snap-range="512"
+					unit="MB"
+				/>
+				<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
 			</div>
 
-			<StyledInput
-				id="height"
-				v-model="settings.game_resolution[1]"
-				:disabled="settings.force_fullscreen"
-				autocomplete="off"
-				type="number"
-				placeholder="Enter height..."
-			/>
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Java arguments</h2>
+				<StyledInput
+					id="java-args"
+					v-model="settings.launchArgs"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter java arguments..."
+					wrapper-class="w-full"
+				/>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<h2 class="m-0 text-lg font-semibold text-contrast">Environmental variables</h2>
+				<StyledInput
+					id="env-vars"
+					v-model="settings.envVars"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter environmental variables..."
+					wrapper-class="w-full"
+				/>
+			</div>
 		</div>
 
-		<hr class="mt-4 bg-button-border border-none h-[1px]" />
+		<hr class="my-6 bg-button-border border-none h-[1px]" />
 
-		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Memory allocated</h2>
-		<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
-		<Slider
-			id="max-memory"
-			v-model="settings.memory.maximum"
-			:min="512"
-			:max="maxMemory"
-			:step="64"
-			:snap-points="snapPoints"
-			:snap-range="512"
-			unit="MB"
-		/>
+		<div class="flex flex-col gap-6">
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Pre launch hook</h3>
+				<StyledInput
+					id="pre-launch"
+					v-model="settings.hooks.pre_launch"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter pre-launch command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Ran before the instance is launched.</p>
+			</div>
 
-		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
-		<StyledInput
-			id="java-args"
-			v-model="settings.launchArgs"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter java arguments..."
-			wrapper-class="w-full"
-		/>
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Wrapper hook</h3>
+				<StyledInput
+					id="wrapper"
+					v-model="settings.hooks.wrapper"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter wrapper command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Wrapper command for launching Minecraft.</p>
+			</div>
 
-		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
-		<StyledInput
-			id="env-vars"
-			v-model="settings.envVars"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter environmental variables..."
-			wrapper-class="w-full"
-		/>
-
-		<hr class="mt-4 bg-button-border border-none h-[1px]" />
-
-		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Hooks</h2>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
-		<StyledInput
-			id="pre-launch"
-			v-model="settings.hooks.pre_launch"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter pre-launch command..."
-			wrapper-class="w-full"
-		/>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-			Wrapper command for launching Minecraft.
-		</p>
-		<StyledInput
-			id="wrapper"
-			v-model="settings.hooks.wrapper"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter wrapper command..."
-			wrapper-class="w-full"
-		/>
-
-		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
-		<StyledInput
-			id="post-exit"
-			v-model="settings.hooks.post_exit"
-			autocomplete="off"
-			type="text"
-			placeholder="Enter post-exit command..."
-			wrapper-class="w-full"
-		/>
+			<div class="flex flex-col gap-2.5">
+				<h3 class="m-0 text-lg font-semibold text-contrast">Post exit hook</h3>
+				<StyledInput
+					id="post-exit"
+					v-model="settings.hooks.post_exit"
+					autocomplete="off"
+					type="text"
+					placeholder="Enter post-exit command..."
+					wrapper-class="w-full"
+				/>
+				<p class="m-0 leading-tight">Ran after the game closes.</p>
+			</div>
+		</div>
 	</div>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { 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'
@@ -25,17 +25,28 @@ watch(
 )
 </script>
 <template>
-	<div v-for="option in options" :key="option" class="mt-4 flex items-center justify-between">
-		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast capitalize">
-				{{ option.replaceAll('_', ' ') }}
-			</h2>
+	<div class="flex flex-col gap-2.5 min-w-[600px]">
+		<div v-for="option in options" :key="option" class="flex items-center justify-between">
+			<div>
+				<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
+					{{ option.replaceAll('_', ' ') }}
+				</h2>
+			</div>
+			<div class="flex items-center gap-2">
+				<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)"
+					@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
+				/>
+			</div>
 		</div>
-
-		<Toggle
-			id="advanced-rendering"
-			:model-value="themeStore.getFeatureFlag(option)"
-			@update:model-value="() => setFeatureFlag(option, !themeStore.getFeatureFlag(option))"
-		/>
 	</div>
 </template>

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

@@ -21,15 +21,21 @@ async function updateJavaVersion(version) {
 }
 </script>
 <template>
-	<div v-for="(javaVersion, index) in [25, 21, 17, 8]" :key="`java-${javaVersion}`">
-		<h2 class="m-0 text-lg font-extrabold text-contrast" :class="{ 'mt-4': index !== 0 }">
-			Java {{ javaVersion }} location
-		</h2>
-		<JavaSelector
-			:id="'java-selector-' + javaVersion"
-			v-model="javaVersions[javaVersion]"
-			:version="javaVersion"
-			@update:model-value="updateJavaVersion"
-		/>
+	<div class="flex flex-col gap-6">
+		<div
+			v-for="(javaVersion, index) in [25, 21, 17, 8]"
+			:key="`java-${javaVersion}`"
+			class="flex flex-col gap-2.5"
+		>
+			<h2 class="m-0 text-lg font-semibold text-contrast" :class="{ 'mt-4': index !== 0 }">
+				Java {{ javaVersion }} location
+			</h2>
+			<JavaSelector
+				:id="'java-selector-' + javaVersion"
+				v-model="javaVersions[javaVersion]"
+				:version="javaVersion"
+				@update:model-value="updateJavaVersion"
+			/>
+		</div>
 	</div>
 </template>

apps/app-frontend/src/components/ui/settings/LanguageSettings.vue

@@ -43,7 +43,7 @@ async function onLocaleChange(newLocale: string) {
 </script>
 
 <template>
-	<h2 class="m-0 text-lg font-extrabold text-contrast">Language</h2>
+	<h2 class="m-0 text-lg font-semibold text-contrast">Language</h2>
 
 	<Admonition type="warning" class="mt-2 mb-4">
 		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}

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

@@ -25,8 +25,8 @@ watch(
 <template>
 	<div class="flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Personalized ads</h2>
-			<p class="m-0 text-sm">
+			<h2 class="m-0 text-lg font-semibold text-contrast">Personalized ads</h2>
+			<p class="m-0 mt-1 text-sm">
 				Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
 				option, you opt out and ads will no longer be shown based on your interests.
 			</p>
@@ -36,8 +36,8 @@ watch(
 
 	<div class="mt-4 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Telemetry</h2>
-			<p class="m-0 text-sm">
+			<h2 class="m-0 text-lg font-semibold text-contrast">Telemetry</h2>
+			<p class="m-0 mt-1 text-sm">
 				Modrinth collects anonymized analytics and usage data to improve our user experience and
 				customize your experience. By disabling this option, you opt out and your data will no
 				longer be collected.
@@ -48,8 +48,8 @@ watch(
 
 	<div class="mt-4 flex items-center justify-between gap-4">
 		<div>
-			<h2 class="m-0 text-lg font-extrabold text-contrast">Discord RPC</h2>
-			<p class="m-0 text-sm">
+			<h2 class="m-0 text-lg font-semibold text-contrast">Discord RPC</h2>
+			<p class="m-0 mt-1 text-sm">
 				Manages the Discord Rich Presence integration. Disabling this will cause 'Modrinth' to no
 				longer show up as a game or app you are using on your Discord profile.
 			</p>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { BoxIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
@@ -62,67 +62,79 @@ async function findLauncherDir() {
 </script>
 
 <template>
-	<h2 class="m-0 text-lg font-extrabold text-contrast">App directory</h2>
-	<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-		The directory where the launcher stores all of its files. Changes will be applied after
-		restarting the launcher.
-	</p>
+	<div class="flex flex-col gap-6">
+		<div class="flex flex-col gap-2.5">
+			<h2 class="m-0 text-lg font-semibold text-contrast">App directory</h2>
+			<StyledInput
+				id="appDir"
+				v-model="settings.custom_dir"
+				:icon="BoxIcon"
+				type="text"
+				wrapper-class="w-full"
+			>
+				<template #right>
+					<ButtonStyled circular>
+						<button class="ml-1.5" @click="findLauncherDir">
+							<FolderSearchIcon />
+						</button>
+					</ButtonStyled>
+				</template>
+			</StyledInput>
+			<p class="m-0 leading-tight text-secondary">
+				The directory where the launcher stores all of its files. Changes will be applied after
+				restarting the launcher.
+			</p>
+		</div>
 
-	<div class="m-1 my-2">
-		<StyledInput
-			id="appDir"
-			v-model="settings.custom_dir"
-			:icon="BoxIcon"
-			type="text"
-			wrapper-class="w-full"
-		>
-			<template #right>
-				<Button class="r-btn" @click="findLauncherDir">
-					<FolderSearchIcon />
-				</Button>
-			</template>
-		</StyledInput>
+		<div class="flex flex-col gap-2.5">
+			<ConfirmModalWrapper
+				ref="purgeCacheConfirmModal"
+				title="Are you sure you want to purge the cache?"
+				description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
+				:has-to-type="false"
+				proceed-label="Purge cache"
+				:show-ad-on-close="false"
+				@proceed="purgeCache"
+			/>
+			<h2 class="m-0 text-lg font-semibold text-contrast">App cache</h2>
+			<button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
+				<TrashIcon />
+				Purge cache
+			</button>
+			<p class="m-0 leading-tight text-secondary">
+				The Modrinth app stores a cache of data to speed up loading. This can be purged to force the
+				app to reload data. This may slow down the app temporarily.
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<h2 class="m-0 text-lg font-semibold text-contrast mt-4">Maximum concurrent downloads</h2>
+			<Slider
+				id="max-downloads"
+				v-model="settings.max_concurrent_downloads"
+				:min="1"
+				:max="10"
+				:step="1"
+			/>
+			<p class="m-0 leading-tight text-secondary">
+				The maximum amount of files the launcher can download at the same time. Set this to a lower
+				value if you have a poor internet connection. (app restart required to take effect)
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">Maximum concurrent writes</h2>
+			<Slider
+				id="max-writes"
+				v-model="settings.max_concurrent_writes"
+				:min="1"
+				:max="50"
+				:step="1"
+			/>
+			<p class="m-0 leading-tight text-secondary">
+				The maximum amount of files the launcher can write to the disk at once. Set this to a lower
+				value if you are frequently getting I/O errors. (app restart required to take effect)
+			</p>
+		</div>
 	</div>
-
-	<div>
-		<ConfirmModalWrapper
-			ref="purgeCacheConfirmModal"
-			title="Are you sure you want to purge the cache?"
-			description="If you proceed, your entire cache will be purged. This may slow down the app temporarily."
-			:has-to-type="false"
-			proceed-label="Purge cache"
-			:show-ad-on-close="false"
-			@proceed="purgeCache"
-		/>
-
-		<h2 class="m-0 text-lg font-extrabold text-contrast">App cache</h2>
-		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-			The Modrinth app stores a cache of data to speed up loading. This can be purged to force the
-			app to reload data. This may slow down the app temporarily.
-		</p>
-	</div>
-	<button id="purge-cache" class="btn min-w-max" @click="$refs.purgeCacheConfirmModal.show()">
-		<TrashIcon />
-		Purge cache
-	</button>
-
-	<h2 class="m-0 text-lg font-extrabold text-contrast mt-4">Maximum concurrent downloads</h2>
-	<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-		The maximum amount of files the launcher can download at the same time. Set this to a lower
-		value if you have a poor internet connection. (app restart required to take effect)
-	</p>
-	<Slider
-		id="max-downloads"
-		v-model="settings.max_concurrent_downloads"
-		:min="1"
-		:max="10"
-		:step="1"
-	/>
-
-	<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Maximum concurrent writes</h2>
-	<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
-		The maximum amount of files the launcher can write to the disk at once. Set this to a lower
-		value if you are frequently getting I/O errors. (app restart required to take effect)
-	</p>
-	<Slider id="max-writes" v-model="settings.max_concurrent_writes" :min="1" :max="50" :step="1" />
 </template>

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

@@ -25,7 +25,9 @@
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
 				<section>
 					<h2 class="text-base font-semibold mb-2">Texture</h2>
-					<Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
+					<ButtonStyled>
+						<button @click="openUploadSkinModal"><UploadIcon /> Replace texture</button>
+					</ButtonStyled>
 				</section>
 
 				<section>
@@ -79,7 +81,7 @@
 		</div>
 
 		<div class="flex gap-2 mt-12">
-			<ButtonStyled color="brand" :disabled="disableSave || isSaving">
+			<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'" />
@@ -87,7 +89,9 @@
 					{{ mode === 'new' ? 'Add skin' : 'Save skin' }}
 				</button>
 			</ButtonStyled>
-			<Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
+			<ButtonStyled type="outlined">
+				<button :disabled="isSaving" @click="hide"><XIcon />Cancel</button>
+			</ButtonStyled>
 		</div>
 	</ModalWrapper>
 
@@ -109,7 +113,6 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	CapeButton,
 	CapeLikeTextButton,

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

@@ -79,7 +79,7 @@ watch([() => props.recentInstances, () => showWorlds.value], async () => {
 	})
 })
 
-populateJumpBackIn()
+await populateJumpBackIn()
 	.catch(() => {
 		console.error('Failed to populate jump back in')
 	})

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

@@ -189,6 +189,22 @@ const messages = defineMessages({
 		id: 'instance.worlds.linked_server',
 		defaultMessage: 'Managed by server project',
 	},
+	incompatibleVersion: {
+		id: 'app.world.world-item.incompatible-version',
+		defaultMessage: 'Incompatible version {version}',
+	},
+	playersOnline: {
+		id: 'app.world.world-item.players-online',
+		defaultMessage: '{count} online',
+	},
+	offline: {
+		id: 'app.world.world-item.offline',
+		defaultMessage: 'Offline',
+	},
+	notPlayedYet: {
+		id: 'app.world.world-item.not-played-yet',
+		defaultMessage: 'Not played yet',
+	},
 })
 </script>
 <template>
@@ -243,13 +259,17 @@ const messages = defineMessages({
 					>
 						<template v-if="refreshing">
 							<SpinnerIcon aria-hidden="true" class="animate-spin shrink-0" />
-							Loading...
+							{{ formatMessage(commonMessages.loadingLabel) }}
 						</template>
 						<template v-else-if="serverStatus">
 							<template v-if="serverIncompatible">
 								<IssuesIcon class="shrink-0 text-orange" aria-hidden="true" />
 								<span class="text-orange">
-									Incompatible version {{ serverStatus.version?.name }}
+									{{
+										formatMessage(messages.incompatibleVersion, {
+											version: serverStatus.version?.name,
+										})
+									}}
 								</span>
 							</template>
 							<template v-else>
@@ -265,8 +285,11 @@ const messages = defineMessages({
 								/>
 								<Tooltip :disabled="!hasPlayersTooltip">
 									<span :class="{ 'cursor-help': hasPlayersTooltip }">
-										{{ formatNumber(serverStatus.players?.online) }}
-										online
+										{{
+											formatMessage(messages.playersOnline, {
+												count: formatNumber(serverStatus.players?.online ?? 0),
+											})
+										}}
 									</span>
 									<template #popper>
 										<div class="flex flex-col gap-1">
@@ -280,7 +303,7 @@ const messages = defineMessages({
 						</template>
 						<template v-else>
 							<NoSignalIcon aria-hidden="true" stroke-width="3px" class="shrink-0" />
-							Offline
+							{{ formatMessage(messages.offline) }}
 						</template>
 					</div>
 				</div>
@@ -299,7 +322,7 @@ const messages = defineMessages({
 								})
 							}}
 						</template>
-						<template v-else> Not played yet </template>
+						<template v-else> {{ formatMessage(messages.notPlayedYet) }} </template>
 					</div>
 					<template v-if="instancePath">
 						•

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

@@ -5,12 +5,11 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
 
-import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, type ServerPackStatus, type ServerWorld } from '@/helpers/worlds.ts'
@@ -26,10 +25,10 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref()
+const modal = ref<InstanceType<typeof NewModal>>()
 
-const name = ref()
-const address = ref()
+const name = ref('')
+const address = ref('')
 const resourcePack = ref<ServerPackStatus>('enabled')
 
 async function addServer(play: boolean) {
@@ -60,11 +59,11 @@ function show() {
 	name.value = ''
 	address.value = ''
 	resourcePack.value = 'enabled'
-	modal.value.show()
+	modal.value?.show()
 }
 
 function hide() {
-	modal.value.hide()
+	modal.value?.hide()
 }
 
 const messages = defineMessages({
@@ -85,37 +84,33 @@ const messages = defineMessages({
 defineExpose({ show, hide })
 </script>
 <template>
-	<ModalWrapper ref="modal">
-		<template #title>
-			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
-				<InstanceModalTitlePrefix :instance="instance" />
-				<span class="font-extrabold text-contrast">{{ formatMessage(messages.title) }}</span>
-			</span>
-		</template>
+	<NewModal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
 			v-model:resource-pack="resourcePack"
 		/>
-		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button :disabled="!address" @click="addServer(true)">
-					<PlayIcon />
-					{{ formatMessage(messages.addAndPlay) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button :disabled="!address" @click="addServer(false)">
-					<PlusIcon />
-					{{ formatMessage(messages.addServer) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
-		</div>
-	</ModalWrapper>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<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>
 </template>

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

@@ -5,11 +5,11 @@ import {
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
+	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
 import type { GameInstance } from '@/helpers/types'
@@ -32,7 +32,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref()
+const modal = ref<InstanceType<typeof NewModal>>()
 
 const name = ref<string>('')
 const address = ref<string>('')
@@ -81,11 +81,11 @@ function show(server: ServerWorld) {
 	index.value = server.index
 	displayStatus.value = server.display_status
 	hideFromHome.value = server.display_status === 'hidden'
-	modal.value.show()
+	modal.value?.show()
 }
 
 function hide() {
-	modal.value.hide()
+	modal.value?.hide()
 }
 
 defineExpose({ show })
@@ -96,29 +96,28 @@ const titleMessage = defineMessage({
 })
 </script>
 <template>
-	<ModalWrapper ref="modal">
-		<template #title>
-			<span class="font-extrabold text-lg text-contrast">{{ formatMessage(titleMessage) }}</span>
-		</template>
+	<NewModal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
 			v-model:resource-pack="resourcePack"
 		/>
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
-		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button :disabled="!address" @click="saveServer">
-					<SaveIcon />
-					{{ formatMessage(commonMessages.saveChangesButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
-		</div>
-	</ModalWrapper>
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<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>
 </template>

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

@@ -49,34 +49,40 @@ const messages = defineMessages({
 		id: 'instance.server-modal.placeholder-name',
 		defaultMessage: 'Minecraft Server',
 	},
+	placeholderAddress: {
+		id: 'app.world.server-modal.placeholder-address',
+		defaultMessage: 'example.modrinth.gg',
+	},
+	selectAnOption: {
+		id: 'app.world.server-modal.select-an-option',
+		defaultMessage: 'Select an option',
+	},
 })
 
 defineExpose({ resourcePackOptions })
 </script>
 <template>
-	<div class="w-[450px]">
-		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
-			{{ formatMessage(messages.name) }}
-		</h2>
-		<StyledInput
-			v-model="name"
-			:placeholder="formatMessage(messages.placeholderName)"
-			autocomplete="off"
-			wrapper-class="w-full"
-		/>
-		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
-			{{ formatMessage(messages.address) }}
-		</h2>
-		<StyledInput
-			v-model="address"
-			placeholder="example.modrinth.gg"
-			autocomplete="off"
-			wrapper-class="w-full"
-		/>
-		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
-			{{ formatMessage(messages.resourcePack) }}
-		</h2>
-		<div>
+	<div class="space-y-4 w-full">
+		<label class="flex flex-col gap-2">
+			<span class="font-semibold text-contrast">{{ formatMessage(messages.name) }}</span>
+			<StyledInput
+				v-model="name"
+				:placeholder="formatMessage(messages.placeholderName)"
+				autocomplete="off"
+				wrapper-class="w-full"
+			/>
+		</label>
+		<label class="flex flex-col gap-2">
+			<span class="font-semibold text-contrast">{{ formatMessage(messages.address) }}</span>
+			<StyledInput
+				v-model="address"
+				:placeholder="formatMessage(messages.placeholderAddress)"
+				autocomplete="off"
+				wrapper-class="w-full"
+			/>
+		</label>
+		<label class="flex flex-col gap-2">
+			<span class="font-semibold text-contrast">{{ formatMessage(messages.resourcePack) }}</span>
 			<Combobox
 				v-model="resourcePack"
 				:options="
@@ -89,9 +95,9 @@ defineExpose({ resourcePackOptions })
 				:display-value="
 					resourcePack
 						? formatMessage(resourcePackOptionMessages[resourcePack])
-						: 'Select an option'
+						: formatMessage(messages.selectAnOption)
 				"
 			/>
-		</div>
+		</label>
 	</div>
 </template>

apps/app-frontend/src/composables/intercom-positioning.ts

@@ -0,0 +1,121 @@
+import { computed, onUnmounted, ref } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+interface ThemeStore {
+	toggleSidebar: boolean
+	$subscribe: (callback: () => void) => () => void
+}
+
+interface IntercomBubblePosition {
+	horizontalPadding: number
+	verticalPadding: number
+}
+
+const APP_LEFT_NAV_WIDTH = '4rem'
+const APP_SIDEBAR_WIDTH = 300
+const INTERCOM_BUBBLE_DEFAULT_PADDING = 20
+const INTERCOM_BUBBLE_WIDTH = 72
+const INTERCOM_BUBBLE_RIGHT_VAR = '--app-support-launcher-right'
+const INTERCOM_BUBBLE_BOTTOM_VAR = '--app-support-launcher-bottom'
+
+export function useIntercomPositioning({
+	route,
+	themeStore,
+}: {
+	route: RouteLocationNormalizedLoaded
+	themeStore: ThemeStore
+}) {
+	const sidebarToggled = ref(true)
+	const unsubscribeSidebarToggle = themeStore.$subscribe(() => {
+		sidebarToggled.value = !themeStore.toggleSidebar
+	})
+
+	onUnmounted(unsubscribeSidebarToggle)
+
+	const forceSidebar = computed(
+		() => route.path.startsWith('/browse') || route.path.startsWith('/project'),
+	)
+	const sidebarVisible = computed(() => sidebarToggled.value || forceSidebar.value)
+	const defaultIntercomBubbleHorizontalPadding = computed(() =>
+		sidebarVisible.value
+			? APP_SIDEBAR_WIDTH + INTERCOM_BUBBLE_DEFAULT_PADDING
+			: INTERCOM_BUBBLE_DEFAULT_PADDING,
+	)
+	const intercomBubbleRequestedHorizontalPadding = ref<number | null>(null)
+	const intercomBubbleHorizontalPadding = computed(
+		() =>
+			intercomBubbleRequestedHorizontalPadding.value ??
+			defaultIntercomBubbleHorizontalPadding.value,
+	)
+	const intercomBubbleVerticalClearance = ref<number | null>(null)
+	const intercomBubblePosition = computed(() => ({
+		horizontalPadding: intercomBubbleHorizontalPadding.value,
+		verticalPadding: intercomBubbleVerticalClearance.value ?? INTERCOM_BUBBLE_DEFAULT_PADDING,
+	}))
+	const intercomBubbleHorizontalPaddingRequests = new Map<symbol, number>()
+	const intercomBubbleClearanceRequests = new Map<symbol, number>()
+
+	function requestIntercomBubbleHorizontalPadding(id: symbol, padding: number | null) {
+		if (padding === null) {
+			intercomBubbleHorizontalPaddingRequests.delete(id)
+		} else {
+			intercomBubbleHorizontalPaddingRequests.set(id, padding)
+		}
+
+		intercomBubbleRequestedHorizontalPadding.value =
+			intercomBubbleHorizontalPaddingRequests.size > 0
+				? Math.max(...intercomBubbleHorizontalPaddingRequests.values())
+				: null
+	}
+
+	function requestIntercomBubbleVerticalClearance(id: symbol, clearance: number | null) {
+		if (clearance === null) {
+			intercomBubbleClearanceRequests.delete(id)
+		} else {
+			intercomBubbleClearanceRequests.set(id, clearance)
+		}
+
+		intercomBubbleVerticalClearance.value =
+			intercomBubbleClearanceRequests.size > 0
+				? Math.max(...intercomBubbleClearanceRequests.values())
+				: null
+	}
+
+	function updateIntercomBubbleStyles({
+		horizontalPadding,
+		verticalPadding,
+	}: IntercomBubblePosition) {
+		if (typeof document === 'undefined') return
+
+		document.documentElement.style.setProperty(INTERCOM_BUBBLE_RIGHT_VAR, `${horizontalPadding}px`)
+		document.documentElement.style.setProperty(INTERCOM_BUBBLE_BOTTOM_VAR, `${verticalPadding}px`)
+	}
+
+	function clearIntercomBubbleStyles() {
+		if (typeof document === 'undefined') return
+
+		document.documentElement.style.removeProperty(INTERCOM_BUBBLE_RIGHT_VAR)
+		document.documentElement.style.removeProperty(INTERCOM_BUBBLE_BOTTOM_VAR)
+	}
+
+	return {
+		sidebarToggled,
+		forceSidebar,
+		sidebarVisible,
+		intercomBubblePosition,
+		updateIntercomBubbleStyles,
+		clearIntercomBubbleStyles,
+		pageContext: {
+			floatingActionBarOffsets: {
+				left: ref(APP_LEFT_NAV_WIDTH),
+				right: computed(() => (sidebarVisible.value ? `${APP_SIDEBAR_WIDTH}px` : '0px')),
+			},
+			intercomBubble: {
+				width: ref(INTERCOM_BUBBLE_WIDTH),
+				horizontalPadding: intercomBubbleHorizontalPadding,
+				requestHorizontalPadding: requestIntercomBubbleHorizontalPadding,
+				requestVerticalClearance: requestIntercomBubbleVerticalClearance,
+			},
+		},
+	}
+}

apps/app-frontend/src/composables/useInstanceConsole.ts

@@ -0,0 +1,99 @@
+import { createConsoleState } from '@modrinth/ui'
+
+import { clear_log_buffer, get_live_log_buffer, get_logs } from '@/helpers/logs'
+
+type ConsoleState = ReturnType<typeof createConsoleState>
+
+interface LogEntry {
+	filename: string
+	name?: string
+	log_type: string
+	stdout?: string
+	age?: number
+	live?: boolean
+}
+
+interface InstanceConsoleEntry {
+	liveConsole: ConsoleState
+	historicalConsole: ConsoleState
+	historicalCache: Map<string, string>
+	logList: LogEntry[] | null
+}
+
+const instances = new Map<string, InstanceConsoleEntry>()
+
+function getOrCreate(profilePathId: string): InstanceConsoleEntry {
+	let entry = instances.get(profilePathId)
+	if (entry) return entry
+
+	entry = {
+		liveConsole: createConsoleState(),
+		historicalConsole: createConsoleState(),
+		historicalCache: new Map(),
+		logList: null,
+	}
+	instances.set(profilePathId, entry)
+	return entry
+}
+
+async function hydrate(profilePathId: string): Promise<void> {
+	const entry = getOrCreate(profilePathId)
+	if (entry.liveConsole.output.value.length > 0) return
+
+	const buffer = await get_live_log_buffer(profilePathId)
+	if (buffer) {
+		entry.liveConsole.addLegacyLog(buffer)
+	}
+}
+
+async function getHistoricalLogs(profilePathId: string, instancePath: string): Promise<LogEntry[]> {
+	const entry = getOrCreate(profilePathId)
+	if (entry.logList) return entry.logList
+
+	const logs: LogEntry[] = await get_logs(instancePath, false)
+	entry.logList = logs
+
+	for (const log of logs) {
+		if (log.stdout && log.stdout !== '') {
+			entry.historicalCache.set(log.filename, log.stdout)
+		}
+	}
+
+	return logs
+}
+
+function getHistoricalContent(profilePathId: string, filename: string): string | undefined {
+	return instances.get(profilePathId)?.historicalCache.get(filename)
+}
+
+function invalidate(profilePathId: string): void {
+	const entry = instances.get(profilePathId)
+	if (!entry) return
+	entry.historicalCache.clear()
+	entry.logList = null
+}
+
+async function clearLive(profilePathId: string): Promise<void> {
+	const entry = getOrCreate(profilePathId)
+	entry.liveConsole.clear()
+	await clear_log_buffer(profilePathId).catch(() => {})
+}
+
+async function destroy(profilePathId: string): Promise<void> {
+	instances.delete(profilePathId)
+	await clear_log_buffer(profilePathId).catch(() => {})
+}
+
+export function useInstanceConsole(profilePathId: string) {
+	const entry = getOrCreate(profilePathId)
+	return {
+		liveConsole: entry.liveConsole,
+		historicalConsole: entry.historicalConsole,
+		hydrate: () => hydrate(profilePathId),
+		getHistoricalLogs: (instancePath: string) => getHistoricalLogs(profilePathId, instancePath),
+		getHistoricalContent: (filename: string) => getHistoricalContent(profilePathId, filename),
+		invalidate: () => invalidate(profilePathId),
+		clearLive: () => clearLive(profilePathId),
+		destroy: () => destroy(profilePathId),
+	}
+}

apps/app-frontend/src/config.ts

@@ -0,0 +1,18 @@
+const trimTrailingSlash = (url: string) => url.replace(/\/$/, '')
+
+const siteUrl = trimTrailingSlash(import.meta.env.MODRINTH_URL || 'https://modrinth.com')
+const labrinthBaseUrl = trimTrailingSlash(
+	import.meta.env.MODRINTH_API_BASE_URL || 'https://api.modrinth.com',
+)
+const archonBaseUrl = trimTrailingSlash(
+	import.meta.env.MODRINTH_ARCHON_BASE_URL || 'https://archon.modrinth.com',
+)
+
+export const config = {
+	siteUrl,
+	stripePublishableKey:
+		import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ||
+		'pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b',
+	labrinthBaseUrl,
+	archonBaseUrl,
+}

apps/app-frontend/src/directives/overlayScrollbars.ts

@@ -0,0 +1,35 @@
+import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
+import type { ObjectDirective } from 'vue'
+
+const defaultOverlayScrollbarsOptions = Object.freeze<PartialOptions>({
+	scrollbars: {
+		theme: 'os-theme-dark',
+		autoHide: 'leave',
+		autoHideSuspend: true,
+	},
+})
+
+const mergeOptions = (options: PartialOptions = {}): PartialOptions => ({
+	...defaultOverlayScrollbarsOptions,
+	...options,
+	scrollbars: {
+		...defaultOverlayScrollbarsOptions.scrollbars,
+		...(options.scrollbars ?? {}),
+	},
+})
+
+export const overlayScrollbarsDirective: ObjectDirective<HTMLElement, PartialOptions | undefined> =
+	{
+		mounted(el, binding) {
+			OverlayScrollbars(el, mergeOptions(binding.value))
+		},
+		updated(el, binding) {
+			if (binding.value === binding.oldValue) return
+			const instance = OverlayScrollbars(el)
+			instance?.options(mergeOptions(binding.value))
+		},
+		unmounted(el) {
+			const instance = OverlayScrollbars(el)
+			instance?.destroy()
+		},
+	}

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

@@ -97,3 +97,23 @@ export async function warning_listener(callback) {
 export async function friend_listener(callback) {
 	return await listen('friend', (event) => callback(event.payload))
 }
+
+/// Payload for the 'log' event
+/*
+    LogPayload {
+        profile_path_id: string,
+        type: "log4j" | "legacy",
+        // log4j fields (when type === "log4j"):
+        timestamp_millis?: number,
+        logger_name?: string,
+        level?: string,
+        thread_name?: string,
+        message?: string,
+        throwable?: string,
+        // legacy fields (when type === "legacy"):
+        message?: string,
+    }
+*/
+export async function log_listener(callback) {
+	return await listen('log', (event) => callback(event.payload))
+}

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

@@ -63,3 +63,13 @@ export async function delete_logs(profilePath) {
 export async function get_latest_log_cursor(profilePath, cursor) {
 	return await invoke('plugin:logs|logs_get_latest_log_cursor', { profilePath, cursor })
 }
+
+/// Get all buffered live log lines for a profile from the Rust ring buffer
+export async function get_live_log_buffer(profilePath) {
+	return await invoke('plugin:logs|logs_get_live_log_buffer', { profilePath })
+}
+
+/// Clear the live log buffer for a profile on the Rust side
+export async function clear_log_buffer(profilePath) {
+	return await invoke('plugin:logs|logs_clear_live_log_buffer', { profilePath })
+}

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

@@ -8,6 +8,7 @@ interface PackProfileCreator {
 	gameVersion: string
 	modloader: InstanceLoader
 	loaderVersion: string | null
+	unknownFile: boolean
 }
 
 interface PackLocationVersionId {
@@ -69,7 +70,10 @@ export async function install_to_existing_profile(
 	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
 }
 
-export async function create_profile_and_install_from_file(path: string): Promise<void> {
+export async function create_profile_and_install_from_file(
+	path: string,
+	showUnknownPackWarningModal?: (createProfile: () => Promise<void>, fileName: string) => void,
+): Promise<void> {
 	const location: PackLocationFile = {
 		type: 'fromFile',
 		path,
@@ -78,13 +82,24 @@ export async function create_profile_and_install_from_file(path: string): Promis
 		'plugin:pack|pack_get_profile_from_pack',
 		{ location },
 	)
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	return await invoke('plugin:pack|pack_install', { location, profile })
+
+	const createProfile = async () => {
+		const profile = await create(
+			profile_creator.name,
+			profile_creator.gameVersion,
+			profile_creator.modloader,
+			profile_creator.loaderVersion,
+			null,
+			true,
+		)
+		await invoke('plugin:pack|pack_install', { location, profile })
+	}
+
+	if (profile_creator.unknownFile && showUnknownPackWarningModal) {
+		const splitPath = path.split(/[\\/]/)
+		const fileName = splitPath ? splitPath[splitPath.length - 1] : path
+		showUnknownPackWarningModal(createProfile, fileName)
+	} else {
+		await createProfile()
+	}
 }

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

@@ -184,8 +184,18 @@ export async function update_project(path: string, projectPath: string): Promise
 
 // Add a project to a profile from a version
 // Returns a path to the new project file
-export async function add_project_from_version(path: string, versionId: string): Promise<string> {
-	return await invoke('plugin:profile|profile_add_project_from_version', { path, versionId })
+export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'
+
+export async function add_project_from_version(
+	path: string,
+	versionId: string,
+	reason: DownloadReason,
+): Promise<string> {
+	return await invoke('plugin:profile|profile_add_project_from_version', {
+		path,
+		versionId,
+		reason,
+	})
 }
 
 // Add a project to a profile from a path + project_type

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

@@ -5,15 +5,46 @@
  */
 import { invoke } from '@tauri-apps/api/core'
 
+export interface LoadingBarType {
+	type?: string
+	version?: string
+	profile_path?: string
+	pack_name?: string
+}
+
+export interface LoadingBar {
+	id?: string | number
+	loading_bar_uuid?: string | number
+	title?: string
+	message?: string
+	current?: number
+	total?: number
+	bar_type?: LoadingBarType
+}
+
+export type OpeningCommandEvent =
+	| 'RunMRPack'
+	| 'InstallServer'
+	| 'InstallVersion'
+	| 'InstallMod'
+	| 'InstallModpack'
+	| string
+
+export interface OpeningCommand {
+	event: OpeningCommandEvent
+	id?: string
+	path?: string
+}
+
 // Initialize the theseus API state
 // This should be called during the initializion/opening of the launcher
 export async function initialize_state() {
-	return await invoke('initialize_state')
+	return await invoke<void>('initialize_state')
 }
 
 // Gets active progress bars
 export async function progress_bars_list() {
-	return await invoke('plugin:utils|progress_bars_list')
+	return await invoke<Record<string, LoadingBar>>('plugin:utils|progress_bars_list')
 }
 
 // Get opening command
@@ -21,5 +52,5 @@ export async function progress_bars_list() {
 // This should be called once and only when the app is done booting up and ready to receive a command
 // Returns a Command struct- see events.js
 export async function get_opening_command() {
-	return await invoke('plugin:utils|get_opening_command')
+	return await invoke<OpeningCommand | null>('plugin:utils|get_opening_command')
 }

apps/app-frontend/src/helpers/types.d.ts

@@ -1,6 +1,6 @@
 import type { ModrinthId } from '@modrinth/utils'
 
-type GameInstance = {
+export type GameInstance = {
 	path: string
 	install_stage: InstallStage
 
@@ -46,7 +46,7 @@ type LinkedData = {
 	locked: boolean
 }
 
-type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'
+export type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'
 
 type ContentFile = {
 	metadata?: {
@@ -128,9 +128,3 @@ type AppSettings = {
 	prev_custom_dir?: string
 	migrated: boolean
 }
-
-export type InstanceSettingsTabProps = {
-	instance: GameInstance
-	offline?: boolean
-	isMinecraftServer?: boolean
-}

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

@@ -30,6 +30,8 @@ export type ServerWorld = BaseWorld & {
 	index: number
 	address: string
 	pack_status: ServerPackStatus
+	project_id?: string
+	content_kind?: string
 }
 
 export type World = SingleplayerWorld | ServerWorld
@@ -140,12 +142,16 @@ export async function add_server_to_profile(
 	name: string,
 	address: string,
 	packStatus: ServerPackStatus,
+	projectId?: string,
+	contentKind?: string,
 ): Promise<number> {
 	return await invoke('plugin:worlds|add_server_to_profile', {
 		path,
 		name,
 		address,
 		packStatus,
+		projectId,
+		contentKind,
 	})
 }
 

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

@@ -5,6 +5,150 @@
   "app.auth-servers.unreachable.header": {
     "message": "تعذر الوصول إلى خوادم المصادقة"
   },
+  "app.browse.add-server-to-instance": {
+    "message": "أضف الخادم للنموذج"
+  },
+  "app.browse.add-servers-to-instance": {
+    "message": "أضف الخوادم لنموذجك"
+  },
+  "app.browse.add-to-instance": {
+    "message": "أضف للنموذج"
+  },
+  "app.browse.add-to-instance-name": {
+    "message": "أضف للنموذج {instanceName}"
+  },
+  "app.browse.added": {
+    "message": "مضاف"
+  },
+  "app.browse.already-added": {
+    "message": "مضاف فعلا"
+  },
+  "app.browse.discover-content": {
+    "message": "استكشف محتوى"
+  },
+  "app.browse.discover-servers": {
+    "message": "استكشف خوادم"
+  },
+  "app.browse.install-content-to-instance": {
+    "message": "تثبيت محتوى لنموذجك"
+  },
+  "app.browse.server.installing": {
+    "message": "جاري التثبيت"
+  },
+  "app.export-modal.description-placeholder": {
+    "message": "أدخل وصف التعديل..."
+  },
+  "app.export-modal.export-button": {
+    "message": "تصدير"
+  },
+  "app.export-modal.header": {
+    "message": "تصدير حزمة التعديل"
+  },
+  "app.export-modal.modpack-name-label": {
+    "message": "إسم حزمة التعديل"
+  },
+  "app.export-modal.modpack-name-placeholder": {
+    "message": "إسم حزمة التعديل"
+  },
+  "app.export-modal.select-files-label": {
+    "message": "حدد الملفات والمجلدات المراد تضمينها في الحزمة"
+  },
+  "app.export-modal.version-number-label": {
+    "message": "رقم الإصدار"
+  },
+  "app.export-modal.version-number-placeholder": {
+    "message": "1.0.0"
+  },
+  "app.instance.confirm-delete.admonition-body": {
+    "message": "سيتم حذف جميع البيانات الخاصة لنموذجك نهائيًا، بما في ذلك عوالمك والتكوينات وكل المحتوى المثبت."
+  },
+  "app.instance.confirm-delete.admonition-header": {
+    "message": "لا يمكن التراجع عن هذا الإجراء"
+  },
+  "app.instance.confirm-delete.delete-button": {
+    "message": "حذف النموذج"
+  },
+  "app.instance.confirm-delete.header": {
+    "message": "حذف النموذج"
+  },
+  "app.instance.modpack-already-installed.body": {
+    "message": "حُزْمَة التعديل هذه مثبته فعلًا في نموذج <bold>{instanceName}</bold>. هل انت متأكد بإرادة نسخه؟"
+  },
+  "app.instance.modpack-already-installed.create": {
+    "message": "إنشاء"
+  },
+  "app.instance.modpack-already-installed.header": {
+    "message": "حُزْمَة التعديل مثبتة بالفعل"
+  },
+  "app.instance.modpack-already-installed.instance": {
+    "message": "النموذج"
+  },
+  "app.instance.mods.content-type-project": {
+    "message": "مشروع"
+  },
+  "app.instance.mods.project-was-added": {
+    "message": "تمت إضافة \"{name}\""
+  },
+  "app.instance.mods.projects-were-added": {
+    "message": "تمت إضافة {count} مشروع"
+  },
+  "app.instance.mods.share-text": {
+    "message": "تحقق من المشاريع التي أستخدمها في حزمة التعديل الخاص بي!"
+  },
+  "app.instance.mods.share-title": {
+    "message": "مشاركة محتوى حزمة التعديل"
+  },
+  "app.instance.mods.successfully-uploaded": {
+    "message": "تم الرفع بنجاح"
+  },
+  "app.instance.worlds.add-server": {
+    "message": "أضف خادم"
+  },
+  "app.instance.worlds.browse-servers": {
+    "message": "تصفح الخوادم"
+  },
+  "app.instance.worlds.delete-world-description": {
+    "message": "سيتم حذف '{name}' **نهائيا**, و لن هناك أي طريقة لاسترداده."
+  },
+  "app.instance.worlds.delete-world-title": {
+    "message": "هل أنت متيقِّن من رغبتك بحذف هذا العالم نهائيا؟"
+  },
+  "app.instance.worlds.filter-modded": {
+    "message": "معدّل"
+  },
+  "app.instance.worlds.filter-offline": {
+    "message": "مفصول"
+  },
+  "app.instance.worlds.filter-online": {
+    "message": "يعمل"
+  },
+  "app.instance.worlds.filter-vanilla": {
+    "message": "الأصلي"
+  },
+  "app.instance.worlds.no-worlds-description": {
+    "message": "أضف خادما أو تصفح لكي تبدأ"
+  },
+  "app.instance.worlds.no-worlds-heading": {
+    "message": "لم تتم إضافة أي من الخوادم أو العوالم"
+  },
+  "app.instance.worlds.remove-server-description": {
+    "message": "ستتم إزالة '{name}' من قائمتك, إضافة لما داخل اللعبة, و لن يكون هناك أي طريقة لاسترداده."
+  },
+  "app.instance.worlds.remove-server-description-with-address": {
+    "message": "ستتم إزالة '{name}' ({address}) من قائمتك, إضافة لما داخل اللعبة, و لن يكون هناك أي طريقة لاسترداده."
+  },
+  "app.instance.worlds.remove-server-title": {
+    "message": "هل أنت متيقِّن من رغبتك في إزالة {name}؟"
+  },
+  "app.instance.worlds.search-worlds-placeholder": {
+    "message": "ابحث بين ال{count} عوالم..."
+  },
+  "app.instance.worlds.this-server": {
+    "message": "هذا الخادم"
+  },
+  "app.modal.install-to-play.content-required": {
+    "message": "المحتوى مطلوب"
+  },
   "app.modal.install-to-play.header": {
     "message": "نزل للعب"
   },
@@ -12,43 +156,31 @@
     "message": "تثبيت"
   },
   "app.modal.install-to-play.mod-count": {
-    "message": ""
+    "message": "{count, plural, one {# تعديل} other {# تعديلات}}"
+  },
+  "app.modal.install-to-play.required-modpack": {
+    "message": "حزمة التعديل مطلوبة"
+  },
+  "app.modal.install-to-play.server-requires-mods": {
+    "message": "يتطلب هذا الخادم تعديلات للعب. انقر فوق \"تثبيت\" لإعداد الملفات المطلوبة من Modrinth، ثم قم بتشغيله مباشرة إلى الخادم."
   },
   "app.modal.install-to-play.shared-instance": {
-    "message": "حُزْمَة مشاركة"
+    "message": "النماذج المشتركة"
   },
   "app.modal.install-to-play.shared-server-instance": {
-    "message": "حُزْمَة خادم مشاركة"
+    "message": "نماذج الخادم مشتركة"
   },
-  "app.modal.update-to-play.added-count": {
-    "message": "{count} مضاف"
-  },
-  "app.modal.update-to-play.diff-type.added": {
-    "message": "تمت الإضافة"
-  },
-  "app.modal.update-to-play.diff-type.removed": {
-    "message": "تمت الإزالة"
-  },
-  "app.modal.update-to-play.diff-type.updated": {
-    "message": "تم تحديث"
+  "app.modal.install-to-play.view-contents": {
+    "message": "عرض المحتويات"
   },
   "app.modal.update-to-play.header": {
     "message": "حدث للعب"
   },
-  "app.modal.update-to-play.published-date": {
-    "message": "{date, date, long}"
-  },
-  "app.modal.update-to-play.removed-count": {
-    "message": "{count} مزال"
-  },
   "app.modal.update-to-play.update-required": {
     "message": "يلزم التحديث"
   },
   "app.modal.update-to-play.update-required-description": {
-    "message": "هناك تحديث لازم للعب بـ {name}. الرجاء التحديث إلى آخر اصدار لتشغيل اللعبة."
-  },
-  "app.modal.update-to-play.updated-count": {
-    "message": "{count} حُدِّث"
+    "message": "هناك تحديث مطلوب للعب بـ {name}. الرجاء التحديث إلى آخر اصدار لتشغيل اللعبة."
   },
   "app.settings.developer-mode-enabled": {
     "message": "تم تفعيل وضع المطوّر."
@@ -62,9 +194,6 @@
   "app.settings.tabs.default-instance-options": {
     "message": "خيارات النسخة الافتراضية"
   },
-  "app.settings.tabs.feature-flags": {
-    "message": "أعلام الميزات"
-  },
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },
@@ -77,6 +206,33 @@
   "app.settings.tabs.resource-management": {
     "message": "إدارة الموارد"
   },
+  "app.update-popup.body": {
+    "message": "تطبيق Modrinth v{version} جاهز للتثبيت! أعد التحميل للتحديث الآن، أو تلقائيًا عند إغلاق تطبيق Modrinth."
+  },
+  "app.update-popup.body.download-complete": {
+    "message": "انتهى تنزيل تطبيق Modrinth v{version}. أعد التحميل للتحديث الآن، أو تلقائيًا عند إغلاق تطبيق Modrinth."
+  },
+  "app.update-popup.body.linux": {
+    "message": "تطبيق Modrinth v {version} متاح. استخدم مدير الحزم الخاص بك للتحديث للحصول على أحدث الميزات والإصلاحات!"
+  },
+  "app.update-popup.body.metered": {
+    "message": "تطبيق Modrinth v{version} متاح الآن! وبما أنك متصل بشبكة مقيّدة، لم نقم بتنزيله تلقائيًا."
+  },
+  "app.update-popup.changelog": {
+    "message": "سجل التغيير"
+  },
+  "app.update-popup.download": {
+    "message": "تنزيل ({size})"
+  },
+  "app.update-popup.download-complete": {
+    "message": "اكتمل التنزيل"
+  },
+  "app.update-popup.reload": {
+    "message": "إعادة تحميل"
+  },
+  "app.update-popup.title": {
+    "message": "تحديث متاح"
+  },
   "app.update.complete-toast.text": {
     "message": "انقر هنا لعرض سجلّ التغييرات."
   },
@@ -92,6 +248,24 @@
   "app.update.reload-to-update": {
     "message": "أعد التحميل لتثبيت التحديث"
   },
+  "app.world.server-modal.placeholder-address": {
+    "message": "مثال.مودرنث.جج"
+  },
+  "app.world.server-modal.select-an-option": {
+    "message": "حدد خيارا"
+  },
+  "app.world.world-item.incompatible-version": {
+    "message": "إصدار غير مطابق ({version})"
+  },
+  "app.world.world-item.not-played-yet": {
+    "message": "لم يتم اللعب به"
+  },
+  "app.world.world-item.offline": {
+    "message": "مفصول"
+  },
+  "app.world.world-item.players-online": {
+    "message": "{count} متصل حاليا"
+  },
   "friends.action.add-friend": {
     "message": "إضافة صديق"
   },
@@ -191,11 +365,11 @@
   "instance.edit-world.title": {
     "message": "تعديل العالم"
   },
-  "instance.filter.disabled": {
-    "message": "المشاريع المعطَّلة"
+  "instance.files.adding-files": {
+    "message": "إضافة ملفات ({completed}\\{total})"
   },
-  "instance.filter.updates-available": {
-    "message": "توجد تحديثات متاحة"
+  "instance.files.save-as": {
+    "message": "حفظ ك..."
   },
   "instance.server-modal.address": {
     "message": "العنوان"
@@ -234,7 +408,7 @@
     "message": "نسخة النسخة"
   },
   "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "إنشاء."
+    "message": "ينشئ نسخة من هذا النموذج شاملا عوالمه, تعديلاتها النصيه, إلخ..."
   },
   "instance.settings.tabs.general.edit-icon": {
     "message": "تعديل الأيقونة"
@@ -305,141 +479,9 @@
   "instance.settings.tabs.installation": {
     "message": "تثبيت"
   },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} لـ Minecraft{game_version} مثبت بالفعل"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "فانيلا {game_version} مُثبّتة بالفعل"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "تغيير الإصدار"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "جاري التثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "جاري جلب إصدارات حزمة المودات"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "جاري تثبيت الإصدار الجديد"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "المثبت حاليًا"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "معلومات التصحيح:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "جاري جلب تفاصيل حزمة المودات"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "إصدار اللعبة"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "التثبيت قيد التنفيذ"
-  },
   "instance.settings.tabs.installation.loader-version": {
     "message": "إصدار {loader}"
   },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "تعذّر جلب تفاصيل حزمة المودات المرتبطة. يرجى التحقق من اتصالك بالإنترنت."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} غير متاح لماين كرافت {version}. جرّب محمّل مودات آخر."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "هذه النسخة مرتبطة بحزمة مودات، لكن لم يتم العثور على الحزمة على مودرنث."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "منصّة"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "جاري إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "إعادة التثبيت ستُعيد جميع الملفات المثبتة أو المعدلة إلى ما توفره حُزْمة المودات، مع إزالة أي مودات أو محتوى أضفته بعد التثبيت الأصلي. قد يساعد ذلك في حل السلوك غير المتوقع إذا تم تعديل النسخة، لكن إذا كانت عوالمك تعتمد على محتويات إضافية، فقد يتسبب ذلك في تعطلها."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "هل أنت متأكد أنك تريد إعادة تثبيت هذه النسخة؟"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "يعيد محتوى النسخة إلى حالته الأصلية، مع إزالة جميع المودات أو المحتوى الذي أُضيف فوق حزمة المودات الأصلية."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "إعادة تثبيت حزمة المودات"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "إصلاح"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "جاري الإصلاح"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "الإصلاح يعيد تثبيت مكوّنات ماين كرافت ويتحقق من التلف. قد يساعد ذلك في حل المشكلات إذا كانت لعبتك لا تعمل بسبب أخطاء متعلقة ببرنامج التشغيل، لكنه لن يحل المشكلات أو الأعطال الناتجة عن المودات المثبّتة."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "إصلاح النسخة؟"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "الإصلاح قيد التنفيذ"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "إعادة التعيين إلى الحالة الحالية"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "عرض جميع الإصدارات"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "تغيير الإصدار"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "إعادة التثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "إصلاح"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "لا يمكن {action} أثناء التثبيت"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "لا يمكن {action} أثناء عدم الاتصال بالإنترنت"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "لا يمكن {action} أثناء الإصلاح"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(إصدار غير معروف)"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "إلغاء ربط النسخة"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "إذا تابعت، فلن تتمكّن من إعادة ربطها إلا بإنشاء نسخة جديدة بالكامل. لن تتلقى بعد ذلك تحديثات حزمة المودات، وستصبح نسخة عادية."
-  },
-  "instance.settings.tabs.installation.unlink.confirm.title": {
-    "message": "هل أنت متأكد أنك تريد إلغاء ربط هذه النسخة؟"
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "هذه النسخة مرتبطة بحزمة مودات، مما يعني أنه لا يمكن تحديث المودات أو تغيير محمّل المودات أو إصدار ماين كرافت. سيؤدي إلغاء الربط إلى فصل هذه النسخة نهائيًا عن حزمة المودات."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "إلغاء الربط من حزمة المودات"
-  },
   "instance.settings.tabs.java": {
     "message": "جافا والذاكرة"
   },
@@ -500,9 +542,6 @@
   "instance.worlds.dont_show_on_home": {
     "message": "عدم العرض في الصفحة الرئيسية"
   },
-  "instance.worlds.filter.available": {
-    "message": "متاح"
-  },
   "instance.worlds.game_already_open": {
     "message": "النسخة مفتوحة بالفعل"
   },
@@ -512,6 +551,9 @@
   "instance.worlds.incompatible_server": {
     "message": "الخادم غير متوافق"
   },
+  "instance.worlds.linked_server": {
+    "message": "تدار بواسطة مشروع الخادم"
+  },
   "instance.worlds.no_contact": {
     "message": "تعذّر الاتصال بالخادم"
   },
@@ -524,12 +566,6 @@
   "instance.worlds.play_instance": {
     "message": "تشغيل النسخة"
   },
-  "instance.worlds.type.server": {
-    "message": "الخادم"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "لعب فردي"
-  },
   "instance.worlds.view_instance": {
     "message": "عرض النسخة"
   },
@@ -547,5 +583,17 @@
   },
   "search.filter.locked.instance.sync": {
     "message": "مزامنة مع النسخة"
+  },
+  "search.filter.locked.server": {
+    "message": "يقدمها الخادم"
+  },
+  "search.filter.locked.server-environment.title": {
+    "message": "يمكن إضافة التعديلات **المحليه** فقط إلى نموذج الخادم"
+  },
+  "search.filter.locked.server-game-version.title": {
+    "message": "يتم توفير نسخة اللعبة من قبل الخادم"
+  },
+  "search.filter.locked.server-loader.title": {
+    "message": "يتم توفير المحمّل من قبل الخادم"
   }
 }

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

@@ -5,6 +5,141 @@
   "app.auth-servers.unreachable.header": {
     "message": "Připojení k autorizačním serverům se nezdařilo"
   },
+  "app.browse.add-server-to-instance": {
+    "message": "Přidat server do instance"
+  },
+  "app.browse.add-servers-to-instance": {
+    "message": "Přidat servery do instance"
+  },
+  "app.browse.add-to-instance": {
+    "message": "Přidat do instalace"
+  },
+  "app.browse.add-to-instance-name": {
+    "message": "Přidat do {instanceName}"
+  },
+  "app.browse.added": {
+    "message": "Přidáno"
+  },
+  "app.browse.already-added": {
+    "message": "Už přidáno"
+  },
+  "app.browse.discover-content": {
+    "message": "Prozkoumat obsah"
+  },
+  "app.browse.discover-servers": {
+    "message": "Prozkoumat servery"
+  },
+  "app.browse.install-content-to-instance": {
+    "message": "Nainstalovat obsah do instnce"
+  },
+  "app.export-modal.description-placeholder": {
+    "message": "Přidej popis modpacku..."
+  },
+  "app.export-modal.export-button": {
+    "message": "Exportovat"
+  },
+  "app.export-modal.header": {
+    "message": "Exportovat modpack"
+  },
+  "app.export-modal.modpack-name-label": {
+    "message": "Jméno Modpacku"
+  },
+  "app.export-modal.modpack-name-placeholder": {
+    "message": "Jméno modpacku"
+  },
+  "app.export-modal.select-files-label": {
+    "message": "Vybrat soubory a složky co zahrnout do modpacku"
+  },
+  "app.export-modal.version-number-label": {
+    "message": "Číslo verze"
+  },
+  "app.export-modal.version-number-placeholder": {
+    "message": "1.0.0"
+  },
+  "app.instance.confirm-delete.admonition-body": {
+    "message": "Všechna data z instance budou navždy smazána, včetně světů, nastavení a všeho ostatního."
+  },
+  "app.instance.confirm-delete.admonition-header": {
+    "message": "Tato akce nemůže být vrácena"
+  },
+  "app.instance.confirm-delete.delete-button": {
+    "message": "Odstranit instanci"
+  },
+  "app.instance.confirm-delete.header": {
+    "message": "Odstanit instanci"
+  },
+  "app.instance.modpack-already-installed.body": {
+    "message": "Tento modpack je už nainstalovaný v instanci <bold>{instanceName}</bold>. Opravdu ho chceš duplikovat?"
+  },
+  "app.instance.modpack-already-installed.create": {
+    "message": "Vytvořit"
+  },
+  "app.instance.modpack-already-installed.header": {
+    "message": "Modpack už je nainstalovaný"
+  },
+  "app.instance.modpack-already-installed.instance": {
+    "message": "Instalace"
+  },
+  "app.instance.mods.content-type-project": {
+    "message": "projekt"
+  },
+  "app.instance.mods.project-was-added": {
+    "message": "\"{name}\" bylo přidáno"
+  },
+  "app.instance.mods.projects-were-added": {
+    "message": "{count} projektů bylo přidáno"
+  },
+  "app.instance.mods.share-text": {
+    "message": "Podívejte se na projekty co používám ve svém modpacku!"
+  },
+  "app.instance.mods.share-title": {
+    "message": "Sdílení obsahu modpacku"
+  },
+  "app.instance.mods.successfully-uploaded": {
+    "message": "Úspěšně nahráno"
+  },
+  "app.instance.worlds.add-server": {
+    "message": "Přidat server"
+  },
+  "app.instance.worlds.browse-servers": {
+    "message": "Procházet servery"
+  },
+  "app.instance.worlds.delete-world-description": {
+    "message": "\"{name}\" bude **navždy smazáno** a nebude způsob, jak to obnovit."
+  },
+  "app.instance.worlds.delete-world-title": {
+    "message": "Opravdu si jsi jistý, že chceš navždy smazat tenhle svět?"
+  },
+  "app.instance.worlds.filter-modded": {
+    "message": "Módováno"
+  },
+  "app.instance.worlds.filter-offline": {
+    "message": "Offline"
+  },
+  "app.instance.worlds.filter-online": {
+    "message": "Online"
+  },
+  "app.instance.worlds.filter-vanilla": {
+    "message": "Vanilla"
+  },
+  "app.instance.worlds.no-worlds-description": {
+    "message": "Přidej nebo procházej servery"
+  },
+  "app.instance.worlds.no-worlds-heading": {
+    "message": "Žádné servery nebo světy nebyly přidány"
+  },
+  "app.instance.worlds.remove-server-description": {
+    "message": "„{name}“ bude odstraněn z tvého seznamu, včetně hry, a nebude žádný způsob, jak ho obnovit."
+  },
+  "app.instance.worlds.remove-server-title": {
+    "message": "Opravdu chceš odstranit {name}?"
+  },
+  "app.instance.worlds.search-worlds-placeholder": {
+    "message": "Hledat ve světech {count}..."
+  },
+  "app.instance.worlds.this-server": {
+    "message": "tento server"
+  },
   "app.modal.install-to-play.header": {
     "message": "Nainstaluj ke hraní"
   },
@@ -20,36 +155,15 @@
   "app.modal.install-to-play.shared-server-instance": {
     "message": "Sdílená serverová instance"
   },
-  "app.modal.update-to-play.added-count": {
-    "message": "{count} přidáno"
-  },
-  "app.modal.update-to-play.diff-type.added": {
-    "message": "Přidáno"
-  },
-  "app.modal.update-to-play.diff-type.removed": {
-    "message": "Odebráno"
-  },
-  "app.modal.update-to-play.diff-type.updated": {
-    "message": "Aktualizováno"
-  },
   "app.modal.update-to-play.header": {
     "message": "Updatuj ke hraní"
   },
-  "app.modal.update-to-play.published-date": {
-    "message": "{date, date, long}"
-  },
-  "app.modal.update-to-play.removed-count": {
-    "message": "{count} odstraněno"
-  },
   "app.modal.update-to-play.update-required": {
     "message": "Je vyžadována aktualizace"
   },
   "app.modal.update-to-play.update-required-description": {
     "message": "Je nutná aktualizace ke hraní {name}. Prosím updatuj na nejnovější verzi k spuštění hry."
   },
-  "app.modal.update-to-play.updated-count": {
-    "message": "{count} aktualizováno"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Vývojářský režim povolen."
   },
@@ -62,9 +176,6 @@
   "app.settings.tabs.default-instance-options": {
     "message": "Výchozí možnosti instance"
   },
-  "app.settings.tabs.feature-flags": {
-    "message": "Vlajky funkcí"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Instalace Javy"
   },
@@ -77,6 +188,9 @@
   "app.settings.tabs.resource-management": {
     "message": "Správa zdrojů"
   },
+  "app.update-popup.download": {
+    "message": "Stáhnout ({size})"
+  },
   "app.update.complete-toast.text": {
     "message": "Kliknutím sem zobrazíte seznam změn."
   },
@@ -96,7 +210,7 @@
     "message": "Přidat přítele"
   },
   "friends.action.view-friend-requests": {
-    "message": "{count} {count, plural, one {žádost} few {žádosti} other {žádostí}} o přátelství"
+    "message": "{count} přátelé {count, plural, one {request} other {requests}}"
   },
   "friends.add-friend.submit": {
     "message": "Poslat žádost o přátelství"
@@ -191,12 +305,6 @@
   "instance.edit-world.title": {
     "message": "Upravit svět"
   },
-  "instance.filter.disabled": {
-    "message": "Vypnuté projekty"
-  },
-  "instance.filter.updates-available": {
-    "message": "K dispozice jsou aktualizace"
-  },
   "instance.server-modal.address": {
     "message": "Adresa"
   },
@@ -305,141 +413,9 @@
   "instance.settings.tabs.installation": {
     "message": "Instalace"
   },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} pro Minecraft {game_version} již je nainstalována"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Vanilla {game_version} již je nainstalována"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Změnit verzi"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Instalovat"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Instalování"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Načítání verzí modpacku"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Instalace nové verze"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "Aktuálně nainstalováno"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "Debugové informace:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Načítání detailů modpacku"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Verze hry"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Instalovat"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Probíhá instalace"
-  },
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} verze"
   },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "Nelze načíst podrobnosti o modpacku. Prosím, zkontrolujte své připojení k internetu."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} není dostupný pro Minecraft {version}. Zkuste jiný mod loader."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "Tato instalace je připojená k modpacku, který ake nebyl najit na Modrinthu."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Platforma"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Přeinstalovat modpack"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Přeinstalovávání modpacku"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Přeinstalace resetuje veškerý nainstalovaný nebo upravený obsah kromě toho, co poskytuje modpack, a odstraní všechny módy nebo obsah, které jste přidali do původní instalace. To může opravit neočekávané chyby, ale pokud vaše světy závisejí na doinstalovaném obsahu, možná budou poškozeny."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "Opravdu si přejete přeinstalovat tuto instalaci?"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "Obnoví obsah instance do původního stavu a odstraní všechny mody nebo obsah, které jste přidali nad původní modpack."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Přeinstalovat modpack"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Opravit"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Opravováno"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "Oprava přeinstaluje závislosti Minecraftu a zkontroluje poškození. To může vyřešit problémy, pokud se hra nespustí kvůli chybám souvisejícím s launcherem, ale nevyřeší to problémy nebo pády související s nainstalovanými mody."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Opravit instanci?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Probíhá oprava"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "Resetovat na aktuální"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "Ukázat všechny verze"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "změnit verzi"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "Instalovat"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "přeinstalovat"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "opravit"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "Nelze {action} při instalaci"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "Nelze {action} když offline"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "Nelze {action} při opravě"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(neznámá verze)"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "Odpojit instanci"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "Pokud budete pokračovat, nebudete ji moci znovu propojit bez vytvoření zcela nové instance. Již nebudete dostávat aktualizace modpacku a stane se z něj běžná instance."
-  },
-  "instance.settings.tabs.installation.unlink.confirm.title": {
-    "message": "Opravdu si přejete odpojit tuto instanci?"
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "Tato instance je připojena k modpacku, což znamená, že módy nemohou být aktualizované a nelze změnit mod loader ani verze minecraftu. Odpojení permanentně rozváže tuto instanci od modpacku."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "Odpojit od modpacku"
-  },
   "instance.settings.tabs.java": {
     "message": "Java a pamět"
   },
@@ -500,9 +476,6 @@
   "instance.worlds.dont_show_on_home": {
     "message": "Nezobrazuje na domovské stránce"
   },
-  "instance.worlds.filter.available": {
-    "message": "Dostupné"
-  },
   "instance.worlds.game_already_open": {
     "message": "Instance je již otevřená"
   },
@@ -519,17 +492,11 @@
     "message": "Můžeš rovnou skočit na server pouze v Minecraftu Alpha 1.0.5+"
   },
   "instance.worlds.no_singleplayer_quick_play": {
-    "message": "Můžeš se rovnou připojit do světa jednoho hráče pouze v Minecraftu 1.20+"
+    "message": "V Minecraftu 1.20+ se dá rovnou přeskočit pouze do singleplayerových světů"
   },
   "instance.worlds.play_instance": {
     "message": "Hrát instanci"
   },
-  "instance.worlds.type.server": {
-    "message": "Server"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "Hra pro jednoho hráče"
-  },
   "instance.worlds.view_instance": {
     "message": "Zobrazit instanci"
   },
@@ -543,9 +510,18 @@
     "message": "Verze hry je poskytnut instanci"
   },
   "search.filter.locked.instance-loader.title": {
-    "message": "Spouštěč je poskytnut instanci"
+    "message": "Spouštěč je poskytnut instancí"
   },
   "search.filter.locked.instance.sync": {
     "message": "Synchronizováno z instancí"
+  },
+  "search.filter.locked.server-environment.title": {
+    "message": "Jen klientské mody mohou být přidány na server"
+  },
+  "search.filter.locked.server-game-version.title": {
+    "message": "Verzi hry poskytuje server"
+  },
+  "search.filter.locked.server-loader.title": {
+    "message": "Loader zprostředkovává server"
   }
 }

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

@@ -5,6 +5,84 @@
   "app.auth-servers.unreachable.header": {
     "message": "Kan ikke nå autentificeringsservere"
   },
+  "app.browse.add-to-instance-name": {
+    "message": "Tilføjet til {instanceName}"
+  },
+  "app.browse.added": {
+    "message": "Tilføjet"
+  },
+  "app.browse.already-added": {
+    "message": "Allerede tilføjet"
+  },
+  "app.browse.discover-content": {
+    "message": "Opdag indhold"
+  },
+  "app.browse.discover-servers": {
+    "message": "Opdag servere"
+  },
+  "app.export-modal.description-placeholder": {
+    "message": "Indtast modpack beskrivelse..."
+  },
+  "app.export-modal.export-button": {
+    "message": "Eksporter"
+  },
+  "app.export-modal.header": {
+    "message": "Eksporter modpack"
+  },
+  "app.export-modal.modpack-name-label": {
+    "message": "Modpack Navn"
+  },
+  "app.export-modal.modpack-name-placeholder": {
+    "message": "Modpack navn"
+  },
+  "app.export-modal.select-files-label": {
+    "message": "Vælg filer og mapper til at inkludere i pakken"
+  },
+  "app.export-modal.version-number-label": {
+    "message": "Versionsnummer"
+  },
+  "app.export-modal.version-number-placeholder": {
+    "message": "1.0.0"
+  },
+  "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."
+  },
+  "app.instance.confirm-delete.admonition-header": {
+    "message": "Denne handling kan ikke fortrydes"
+  },
+  "app.instance.confirm-delete.delete-button": {
+    "message": "Slet instance"
+  },
+  "app.instance.confirm-delete.header": {
+    "message": "Slet instance"
+  },
+  "app.instance.modpack-already-installed.body": {
+    "message": "Denne modpack er allerede installeret i <bold>{instanceName}</bold> instancen. Er du sikker på du vil duplikere den?"
+  },
+  "app.instance.modpack-already-installed.create": {
+    "message": "Opret"
+  },
+  "app.instance.mods.content-type-project": {
+    "message": "projekt"
+  },
+  "app.instance.mods.project-was-added": {
+    "message": "\"{name}\" blev tilføjet"
+  },
+  "app.instance.mods.projects-were-added": {
+    "message": "{count} projekter blev tilføjet"
+  },
+  "app.instance.mods.share-text": {
+    "message": "Tjek ud disse projekter jeg bruger i min modpack!"
+  },
+  "app.instance.mods.share-title": {
+    "message": "Deler modpack indhold"
+  },
+  "app.instance.mods.successfully-uploaded": {
+    "message": "Uploadet"
+  },
+  "app.modal.install-to-play.content-required": {
+    "message": "Indhold krævet"
+  },
   "app.modal.install-to-play.header": {
     "message": "Installer for at spille"
   },
@@ -14,39 +92,30 @@
   "app.modal.install-to-play.mod-count": {
     "message": "{count, plural, one {# mod} other {# mods}}"
   },
+  "app.modal.install-to-play.required-modpack": {
+    "message": "Modpack krævet"
+  },
   "app.modal.install-to-play.server-requires-mods": {
     "message": "Denne server kræver mods for at spille. Tryk på installer for at sætte de krævet filler fra modrinth op, så lancer direkte til serveren."
   },
-  "app.modal.update-to-play.added-count": {
-    "message": "{count} tilføjet"
+  "app.modal.install-to-play.shared-instance": {
+    "message": "Delt instance"
   },
-  "app.modal.update-to-play.diff-type.added": {
-    "message": "Tilføjet"
+  "app.modal.install-to-play.shared-server-instance": {
+    "message": "Delt server instance"
   },
-  "app.modal.update-to-play.diff-type.removed": {
-    "message": "Fjernet"
-  },
-  "app.modal.update-to-play.diff-type.updated": {
-    "message": "Opdateret"
+  "app.modal.install-to-play.view-contents": {
+    "message": "Vis indhold"
   },
   "app.modal.update-to-play.header": {
     "message": "Opdater for at spille"
   },
-  "app.modal.update-to-play.published-date": {
-    "message": "{date, date, long}"
-  },
-  "app.modal.update-to-play.removed-count": {
-    "message": "{count} fjernet"
-  },
   "app.modal.update-to-play.update-required": {
     "message": "Opdatering krævet"
   },
   "app.modal.update-to-play.update-required-description": {
     "message": "En opdatering er krævet for at spille {name}. Venligst opdater til den seneste version for at køre spillet."
   },
-  "app.modal.update-to-play.updated-count": {
-    "message": "{count} opdateret"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Udvikler-tilstand aktiveret."
   },
@@ -59,9 +128,6 @@
   "app.settings.tabs.default-instance-options": {
     "message": "Standardindstillinger for instans"
   },
-  "app.settings.tabs.feature-flags": {
-    "message": "Funktionsflags"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Javainstallationer"
   },
@@ -74,6 +140,33 @@
   "app.settings.tabs.resource-management": {
     "message": "Ressourcestyring"
   },
+  "app.update-popup.body": {
+    "message": "Modrinth App v{version} er klar til at blive installeret! Genindlæs for at opdatere nu, eller automatisk når du lukker Modrinth App."
+  },
+  "app.update-popup.body.download-complete": {
+    "message": "Modrinth App v{version} er færdig med at download. Genindlæs for at opdatere nu, eller automatisk når du lukker Modrinth App."
+  },
+  "app.update-popup.body.linux": {
+    "message": "Modrinth App v{version} er nu tilgængelig. Brug din pakke-manager til at opdatere for de nyeste features og fejlrettelser!"
+  },
+  "app.update-popup.body.metered": {
+    "message": "Modrinth App v{version} er nu tilgængelig! Siden du er på et begrænset netværk, vi downloadede den ikke automatisk."
+  },
+  "app.update-popup.changelog": {
+    "message": "Ændringslog"
+  },
+  "app.update-popup.download": {
+    "message": "Download ({size})"
+  },
+  "app.update-popup.download-complete": {
+    "message": "Download færdiggjort"
+  },
+  "app.update-popup.reload": {
+    "message": "Geninlæs"
+  },
+  "app.update-popup.title": {
+    "message": "Opdatering tilgængelig"
+  },
   "app.update.complete-toast.text": {
     "message": "Klik her for at vise ændringslog."
   },
@@ -188,12 +281,6 @@
   "instance.edit-world.title": {
     "message": "Rediger verden"
   },
-  "instance.filter.disabled": {
-    "message": "Deaktiverede projekter"
-  },
-  "instance.filter.updates-available": {
-    "message": "Tilgængelige opdateringer"
-  },
   "instance.server-modal.address": {
     "message": "Adresse"
   },
@@ -302,141 +389,9 @@
   "instance.settings.tabs.installation": {
     "message": "Installation"
   },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} for Minecraft {game_version} er allerede installeret"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Vanilla {game_version} er allerede installeret"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Skift version"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Installer"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Installer"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Får modpack versioner"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Installere ny version"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "Lige nu installeret"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "Debug information:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Får modpack detaljer"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Spil version"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Installer"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Installation igangværende"
-  },
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} version"
   },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "Kan ikke få forbundet modpack detaljer. Venligst tjek din internet forbindelse."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} er ikke mulig at bruge for Minecraft {version}. Prøv en anden mod loader."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "Denne instance er koblet til en modpack, men modpacken kunne ikke blive fundet på Modrinth."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Platform"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Geninstaller modpack"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Geninstallere modpack"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Geninstallering vil nulstille alt installeret eller modificeret indhold givet af modpacken, fjerne alle mods eller indhold du har tilføjet ovenpå den originale installation. Dette vil måske fikse uforventet adfærd hvis ændringer er blevet lavet til den instance, men hvis din verdener nu afhænger af ektra tilføjet indhold, dette vil måske ødelægge eksisterende verdener."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "Er du sikker på du vil geninstallere denne instance?"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "Nulstiller instanceens indhold til dens oprindelige tilstand, fjerne alle mods eller indhold du har tilføjet ovenpå den oprindelige modpack."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Geninstaller modpack"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Reparer"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Reparere"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "Reparering geninstaller Minecraft afhængigheder og tjekker for korruption. Dette vil måske fikse fejl hvis dit spil ikke køre på grund af launcher relateret fejl, men vil ikke fikse fejl eller crashes relateret til installerede mods."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Reparer instance?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Reparation i gang"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "Nulstil til nuværende"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "Vis alle versioner"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "Ændre version"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "Installer"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "Geninstaller"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "Reparer"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "Kan ikke {action} under installation"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "Kan ikke {action} uden internet"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "Kan ikke {action} under reparation"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(Ukendt version)"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "Frakoble instance"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "Hvis du forsætter, du vil ikke have mulighed for at koble sammen igen uden at lave en helt ny instance. Du vil ikke længere modtage modpack opdateringer og vil blive en normal."
-  },
-  "instance.settings.tabs.installation.unlink.confirm.title": {
-    "message": "Er du sikker på du vil frakoble denne instance?"
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "Denne instance er forbundet til en modpack, hvilket betyder mods kan ikke blive opdateret og du kan ikke ændre mod loaderen eller Minecraft version. Frakobling vil permanent frakoble denne instance fra modpacken."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "Frakoble fra modpack"
-  },
   "instance.settings.tabs.java": {
     "message": "Java og hukommelse"
   },
@@ -497,9 +452,6 @@
   "instance.worlds.dont_show_on_home": {
     "message": "Vis ikke på forsiden"
   },
-  "instance.worlds.filter.available": {
-    "message": "Tilgængelig"
-  },
   "instance.worlds.game_already_open": {
     "message": "Instance allerede åben"
   },
@@ -509,6 +461,9 @@
   "instance.worlds.incompatible_server": {
     "message": "Serveren er uforenelig"
   },
+  "instance.worlds.linked_server": {
+    "message": "Styret af server projektet"
+  },
   "instance.worlds.no_contact": {
     "message": "Serveren kunne ikke blive kontaktet"
   },
@@ -521,12 +476,6 @@
   "instance.worlds.play_instance": {
     "message": "Spil instance"
   },
-  "instance.worlds.type.server": {
-    "message": "Server"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "Singleplayer"
-  },
   "instance.worlds.view_instance": {
     "message": "Se instance"
   },
@@ -544,5 +493,17 @@
   },
   "search.filter.locked.instance.sync": {
     "message": "Synkroniser med instance"
+  },
+  "search.filter.locked.server": {
+    "message": "Givet af serveren"
+  },
+  "search.filter.locked.server-environment.title": {
+    "message": "Kun klient-sided mods kan blive tilføjet til denne server instance"
+  },
+  "search.filter.locked.server-game-version.title": {
+    "message": "Spille version er givet af serveren"
+  },
+  "search.filter.locked.server-loader.title": {
+    "message": "Loader er givet af serveren"
   }
 }

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

@@ -1,10 +1,271 @@
 {
+  "app.action-bar.downloading-java": {
+    "message": "Java {version} wird heruntergeladen"
+  },
+  "app.action-bar.downloads": {
+    "message": "Downloads"
+  },
+  "app.action-bar.hide-more-running-instances": {
+    "message": "Weitere laufende Instanzen ausblenden"
+  },
+  "app.action-bar.make-primary-instance": {
+    "message": "Zur primären Instanz machen"
+  },
+  "app.action-bar.no-instances-running": {
+    "message": "Keine Instanzen laufen"
+  },
+  "app.action-bar.offline": {
+    "message": "Offline"
+  },
+  "app.action-bar.primary-instance": {
+    "message": "Primäre Instanz"
+  },
+  "app.action-bar.show-more-running-instances": {
+    "message": "Weitere laufende Instanzen anzeigen"
+  },
+  "app.action-bar.stop-instance": {
+    "message": "Instanz stoppen"
+  },
+  "app.action-bar.view-active-downloads": {
+    "message": "Aktive Downloads anzeigen"
+  },
+  "app.action-bar.view-instance": {
+    "message": "Instanz anzeigen"
+  },
+  "app.action-bar.view-logs": {
+    "message": "Protokolle anzeigen"
+  },
+  "app.appearance-settings.advanced-rendering.description": {
+    "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 dein bevorzugtes Farbschema für die Modrinth App."
+  },
+  "app.appearance-settings.color-theme.title": {
+    "message": "Farbschema"
+  },
+  "app.appearance-settings.default-landing-page.description": {
+    "message": "Ändere die Seite, die beim Öffnen des Launchers angezeigt wird."
+  },
+  "app.appearance-settings.default-landing-page.home": {
+    "message": "Start"
+  },
+  "app.appearance-settings.default-landing-page.library": {
+    "message": "Bibliothek"
+  },
+  "app.appearance-settings.default-landing-page.title": {
+    "message": "Standard-Startseite"
+  },
+  "app.appearance-settings.hide-nametag.description": {
+    "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": "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": "Den Launcher minimieren, wenn ein Minecraft-Prozess gestartet wird."
+  },
+  "app.appearance-settings.minimize-launcher.title": {
+    "message": "Launcher minimieren"
+  },
+  "app.appearance-settings.native-decorations.description": {
+    "message": "Systemfensterrahmen verwenden (Neustart der App erforderlich)."
+  },
+  "app.appearance-settings.native-decorations.title": {
+    "message": "Native Dekorationen"
+  },
+  "app.appearance-settings.select-option": {
+    "message": "Option wählen"
+  },
+  "app.appearance-settings.toggle-sidebar.description": {
+    "message": "Ermöglicht das Umschalten der Seitenleiste."
+  },
+  "app.appearance-settings.toggle-sidebar.title": {
+    "message": "Seitenleiste umschalten"
+  },
+  "app.appearance-settings.unknown-pack-warning.description": {
+    "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"
+  },
   "app.auth-servers.unreachable.body": {
     "message": "Die Authentifizierungsserver von Minecraft sind eventuell momentan nicht erreichbar. Überprüfe deine Internetverbindung und versuche es später erneut."
   },
   "app.auth-servers.unreachable.header": {
     "message": "Authentifizierungsserver sind nicht erreichbar"
   },
+  "app.browse.add-server-to-instance": {
+    "message": "Server zu Instanz hinzufügen"
+  },
+  "app.browse.add-servers-to-instance": {
+    "message": "Server zu deiner Instanz hinzufügen"
+  },
+  "app.browse.add-to-instance": {
+    "message": "Zu Instanz hinzufügen"
+  },
+  "app.browse.add-to-instance-name": {
+    "message": "Zu {instanceName} hinzufügen"
+  },
+  "app.browse.added": {
+    "message": "Hinzugefügt"
+  },
+  "app.browse.already-added": {
+    "message": "Bereits hinzugefügt"
+  },
+  "app.browse.discover-content": {
+    "message": "Inhalte entdecken"
+  },
+  "app.browse.discover-servers": {
+    "message": "Server entdecken"
+  },
+  "app.browse.hide-added-servers": {
+    "message": "Bereits hinzugefügte Server ausblenden"
+  },
+  "app.browse.hide-installed-content": {
+    "message": "Bereits installierte Inhalte ausblenden"
+  },
+  "app.browse.install-content-to-instance": {
+    "message": "Inhalt in Instanz installieren"
+  },
+  "app.browse.project-type.modpacks": {
+    "message": "Modpacks"
+  },
+  "app.browse.server.install": {
+    "message": "Installieren"
+  },
+  "app.browse.server.installed": {
+    "message": "Installiert"
+  },
+  "app.browse.server.installing": {
+    "message": "Wird installiert"
+  },
+  "app.creation-modal.installing-modpack.description": {
+    "message": "{fileName}"
+  },
+  "app.creation-modal.installing-modpack.title": {
+    "message": "Modpack wird installiert..."
+  },
+  "app.export-modal.description-placeholder": {
+    "message": "Modpaketbeschreibung eingeben..."
+  },
+  "app.export-modal.export-button": {
+    "message": "Exportieren"
+  },
+  "app.export-modal.header": {
+    "message": "Modpack exportieren"
+  },
+  "app.export-modal.modpack-name-label": {
+    "message": "Modpaketname"
+  },
+  "app.export-modal.modpack-name-placeholder": {
+    "message": "Modpaketname"
+  },
+  "app.export-modal.select-files-label": {
+    "message": "Wähle Dateien und Ordner zum hinzufügen im Paket aus"
+  },
+  "app.export-modal.version-number-label": {
+    "message": "Versionsnummer"
+  },
+  "app.export-modal.version-number-placeholder": {
+    "message": "1.0.0"
+  },
+  "app.instance.confirm-delete.admonition-body": {
+    "message": "Alle Daten deiner Instanz werden permanent gelöscht, inlusive deiner Welten, Konfigurationen und allen installierten Inhalten."
+  },
+  "app.instance.confirm-delete.admonition-header": {
+    "message": "Diese Aktion kann nicht rückgängig gemacht werden"
+  },
+  "app.instance.confirm-delete.delete-button": {
+    "message": "Instanz löschen"
+  },
+  "app.instance.confirm-delete.header": {
+    "message": "Instanz löschen"
+  },
+  "app.instance.modpack-already-installed.body": {
+    "message": "Dieses Modpack ist bereits in der Instanz <bold>{instanceName}</bold> installiert. Möchtest du es wirklich duplizieren?"
+  },
+  "app.instance.modpack-already-installed.create": {
+    "message": "Erstellen"
+  },
+  "app.instance.modpack-already-installed.header": {
+    "message": "Modpack bereits installiert"
+  },
+  "app.instance.modpack-already-installed.instance": {
+    "message": "Instanz"
+  },
+  "app.instance.mods.content-type-project": {
+    "message": "Projekt"
+  },
+  "app.instance.mods.project-was-added": {
+    "message": "\"{name}\" wurde hinzugefügt"
+  },
+  "app.instance.mods.projects-were-added": {
+    "message": "{count} Projekte wurden hinzugefügt"
+  },
+  "app.instance.mods.share-text": {
+    "message": "Schau dir die Projekte, welche ich in meinem Modpaket nutze an!"
+  },
+  "app.instance.mods.share-title": {
+    "message": "Modpaketinhalte teilen"
+  },
+  "app.instance.mods.successfully-uploaded": {
+    "message": "Erfolgreich hochgeladen"
+  },
+  "app.instance.worlds.add-server": {
+    "message": "Server hinzufügen"
+  },
+  "app.instance.worlds.browse-servers": {
+    "message": "Server durchsuchen"
+  },
+  "app.instance.worlds.delete-world-description": {
+    "message": "„{name}“ wird **endgültig gelöscht**, und es gibt keine Möglichkeit, sie wiederherzustellen."
+  },
+  "app.instance.worlds.delete-world-title": {
+    "message": "Möchtest du diese Welt wirklich endgültig löschen?"
+  },
+  "app.instance.worlds.filter-modded": {
+    "message": "Modifiziert"
+  },
+  "app.instance.worlds.filter-offline": {
+    "message": "Offline"
+  },
+  "app.instance.worlds.filter-online": {
+    "message": "Online"
+  },
+  "app.instance.worlds.filter-vanilla": {
+    "message": "Vanilla"
+  },
+  "app.instance.worlds.no-worlds-description": {
+    "message": "Füge einen Server hinzu oder durchsuche, um loszulegen"
+  },
+  "app.instance.worlds.no-worlds-heading": {
+    "message": "Keine Server oder Welten hinzugefügt"
+  },
+  "app.instance.worlds.remove-server-description": {
+    "message": "„{name}“ wird aus deiner Liste entfernt, auch im Spiel, und es gibt keine Möglichkeit, ihn wiederherzustellen."
+  },
+  "app.instance.worlds.remove-server-description-with-address": {
+    "message": "„{name}“ ({address}) wird aus deiner Liste entfernt, inklusive im Spiel, und es gibt keine Möglichkeit, ihn wiederherzustellen."
+  },
+  "app.instance.worlds.remove-server-title": {
+    "message": "Möchtest du {name} wirklich entfernen?"
+  },
+  "app.instance.worlds.search-worlds-placeholder": {
+    "message": "Durchsuche {count} Welten..."
+  },
+  "app.instance.worlds.this-server": {
+    "message": "dieser Server"
+  },
   "app.modal.install-to-play.content-required": {
     "message": "Inhalte benötigt"
   },
@@ -32,36 +293,15 @@
   "app.modal.install-to-play.view-contents": {
     "message": "Inhalte ansehen"
   },
-  "app.modal.update-to-play.added-count": {
-    "message": "{count} hinzuäfüägt"
-  },
-  "app.modal.update-to-play.diff-type.added": {
-    "message": "Hinzugefügt"
-  },
-  "app.modal.update-to-play.diff-type.removed": {
-    "message": "Entfernt"
-  },
-  "app.modal.update-to-play.diff-type.updated": {
-    "message": "Aktualisiert"
-  },
   "app.modal.update-to-play.header": {
     "message": "Aktualisieren zum Spielen"
   },
-  "app.modal.update-to-play.published-date": {
-    "message": "{date, date, long}"
-  },
-  "app.modal.update-to-play.removed-count": {
-    "message": "{count} entfernt"
-  },
   "app.modal.update-to-play.update-required": {
     "message": "Aktualisierung benötigt"
   },
   "app.modal.update-to-play.update-required-description": {
     "message": "Eine aktualisierung zum spielen von {name} ist benötigt. Bitte aktualisiere auf die neuste Version um das Spiel zu starten."
   },
-  "app.modal.update-to-play.updated-count": {
-    "message": "{count} aktualisiert"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Entwicklermodus aktiviert."
   },
@@ -74,9 +314,6 @@
   "app.settings.tabs.default-instance-options": {
     "message": "Standard Instanz-Einstellungen"
   },
-  "app.settings.tabs.feature-flags": {
-    "message": "Funktionsflaggen"
-  },
   "app.settings.tabs.java-installations": {
     "message": "Java Installationen"
   },
@@ -131,6 +368,24 @@
   "app.update.reload-to-update": {
     "message": "Lade neu um Aktualisierung zu installieren"
   },
+  "app.world.server-modal.placeholder-address": {
+    "message": "example.modrinth.gg"
+  },
+  "app.world.server-modal.select-an-option": {
+    "message": "Wählen eine Option"
+  },
+  "app.world.world-item.incompatible-version": {
+    "message": "Inkompatible Version {version}"
+  },
+  "app.world.world-item.not-played-yet": {
+    "message": "Noch nicht gespielt"
+  },
+  "app.world.world-item.offline": {
+    "message": "Offline"
+  },
+  "app.world.world-item.players-online": {
+    "message": "{count} online"
+  },
   "friends.action.add-friend": {
     "message": "Freund hinzufügen"
   },
@@ -150,10 +405,10 @@
     "message": "Modrinth Nutzernamen eingeben..."
   },
   "friends.add-friend.username.title": {
-    "message": "Was ist der Modrinth Nutzername deines Freundes?"
+    "message": "Was ist der Modrinth-Nutzername deines Freundes?"
   },
   "friends.add-friends-to-share": {
-    "message": "<link>Füge Freunde hinzu</link> um zu sehen, was sie spielen!"
+    "message": "<link>Füge Freunde hinzu</link>, um zu sehen, was sie spielen!"
   },
   "friends.friend.cancel-request": {
     "message": "Anfrage abbrechen"
@@ -192,7 +447,7 @@
     "message": "{title} - {count}"
   },
   "friends.sign-in-to-add-friends": {
-    "message": "<link>Logge dich in ein Modrinth Konto ein</link> um Freunde hinzuzufügen und zu sehen, was sie spielen!"
+    "message": "<link>Logge dich in ein Modrinth Konto ein</link>, um Freunde hinzuzufügen und zu sehen, was sie spielen!"
   },
   "instance.add-server.add-and-play": {
     "message": "Ersteue u starte"
@@ -230,11 +485,11 @@
   "instance.edit-world.title": {
     "message": "Welt bearbeiten"
   },
-  "instance.filter.disabled": {
-    "message": "Deaktivierte Projekte"
+  "instance.files.adding-files": {
+    "message": "Dateien werden hinzugefügt ({completed}/{total})"
   },
-  "instance.filter.updates-available": {
-    "message": "Updates verfügbar"
+  "instance.files.save-as": {
+    "message": "Speichern unter..."
   },
   "instance.server-modal.address": {
     "message": "Adresse"
@@ -312,13 +567,13 @@
     "message": "Hooks ermöglichen es erfahrenen Benutzern, bestimmte Systembefehle vor und nach dem Start des Spiels auszuführen."
   },
   "instance.settings.tabs.hooks.post-exit": {
-    "message": "Nach dem Schliessen des Spiels"
+    "message": "Nach dem Schließen des Spiels"
   },
   "instance.settings.tabs.hooks.post-exit.description": {
     "message": "Wird nach dem Beenden des Spiels ausgeführt."
   },
   "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Ausgeführter Befehl nach dem Beenden des Spiels eingeben..."
+    "message": "Nach dem Beenden des Spiels auszuführenden Befehl eingeben..."
   },
   "instance.settings.tabs.hooks.pre-launch": {
     "message": "Vor Start des Spiels"
@@ -344,150 +599,9 @@
   "instance.settings.tabs.installation": {
     "message": "Installation"
   },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} für Minecraft {game_version} ist bereits installiert"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Vanilla {game_version} ist bereits installiert"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Version ändern"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Installieren"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Wird installiert"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Sammle Modpack-Versionen"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Neue Version wird installiert"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "Aktuell installiert"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "Informationen zur Fehlerbehebung:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Sammle Modpack-Details"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Spielversion"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Installieren"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Wird installiert"
-  },
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} Version"
   },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "Kann Details für verknüpftes Modpack nicht abrufen. Bitte überprüfe deine Internerverbindung."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} ist nicht verfügbar für Minecraft {version}. Versuch einen anderen Modloader."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "Diese Instanz ist mit einem Modpack verknüpft, aber das Modpack konnte nicht auf Modrinth gefunden werden."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Platform"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Modpack neu installieren"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Modpack wird neu installiert"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Durch die Neuinstallation werden alle installierten oder geänderten Inhalte auf die vom Modpack bereitgestellten Inhalte zurückgesetzt, wobei alle Mods oder Inhalte entfernt werden, die zusätzlich zur ursprünglichen Installation hinzugefügt wurden. Dies kann unerwartetes Verhalten beheben, wenn Änderungen an der Instanz vorgenommen wurden. Wenn deine Welten jedoch von zusätzlich installierten Inhalten abhängig sind, kann dies zu Fehlern in bestehenden Welten führen."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "Bist du sicher, dass du diese Instanz neu installieren willst?"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "Setzt den Inhalt der Instanz auf seinen ursprünglichen Zustand zurück und entfernt all Mods oder Inhalte, welche zusätzlich zum ursprünglichen Modpack hinzugefügt wurden."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Modpack neu installieren"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Reparieren"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Wird repariert"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "Das reparieren installier Minecraft-Abhängigkeiten neu und überprüft für Beschädigungen. Dies kann Probleme beheben, sofern dein Spiel aufgrund von Launcher-relevanten Problemen nicht startet, aber es kann nicht Fehler und Abstpürze in Zusammenhang mit installierten Mods beheben."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Instanz reparieren?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Wird repariert"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "Auf aktuellen Wert zurücksetzen"
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "Alle Versionen anzeigen"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "Version ändern"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "Installieren"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "Neuinstallieren"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "Reparieren"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "{action} während der Installation nicht möglich"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "{action} nicht möglich ohne Internetverbindung"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "{action} während reparatur nicht möglich"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(unbekannte Version)"
-  },
-  "instance.settings.tabs.installation.unlink-server-vanilla.description": {
-    "message": "Diese Instanz ist mit einem Server verknüpft, was bedeutet, dass du die Minecraft Version nicht ändern kannst. Das trennen der Verknüpfung trennt diese Instanz permanent vom Server."
-  },
-  "instance.settings.tabs.installation.unlink-server.description": {
-    "message": "Diese Instanz ist mit einem Server verknüpft, was bedeutet, dass du Mods nicht aktualisieren, und den Modloader oder die Minecraft Version nicht ändern kannst. Das trennen der Verknüpfung trennt diese Instanz permanent vom Server."
-  },
-  "instance.settings.tabs.installation.unlink-server.title": {
-    "message": "Serververknüpfung trennen"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "Verlinking der Instanz trennen"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "Wenn du fortfährst, kann die Instanz nicht erneut verknüpft werden, ohne eine komplett neue Instanz zu ersztellen. Du erhälst keine Modpack-Updates mehr und es wird zu einer normalen Instanz."
-  },
-  "instance.settings.tabs.installation.unlink.confirm.title": {
-    "message": "Bist du sicher, dass du die Verknüpfung dieser Instanz trennen willst?"
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "Diese Instanz ist mit einem Modpack verknüpft. Dies bedeutet, dass Mods nicht aktualisiert werden können, und dass du den Modloader oder die Minecraft Versionen nicht ändern kannst. Durch das trennen der Verknüpfung wird die Instanz permanent vom Modpack getrennt."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "Verknüpfung vom Modpack trennen"
-  },
   "instance.settings.tabs.java": {
     "message": "Java und Arbeitsspeicher"
   },
@@ -516,13 +630,13 @@
     "message": "Vollbild"
   },
   "instance.settings.tabs.window.fullscreen.description": {
-    "message": "Startet das Spiel im Vollbildmodus (durch verwenden von options.txt)."
+    "message": "Startet das Spiel im Vollbildmodus (mithilfe von options.txt)."
   },
   "instance.settings.tabs.window.height": {
     "message": "Höhe"
   },
   "instance.settings.tabs.window.height.description": {
-    "message": "Die höhe des Spielfensters beim Start."
+    "message": "Die Höhe des Spielfensters beim Start."
   },
   "instance.settings.tabs.window.height.enter": {
     "message": "Höhe eingeben..."
@@ -537,7 +651,7 @@
     "message": "Breite eingeben..."
   },
   "instance.worlds.a_minecraft_server": {
-    "message": "Ä Minecraft-Server"
+    "message": "Ein Minecraft-Server"
   },
   "instance.worlds.cant_connect": {
     "message": "Verbindung mit Server nicht möglich"
@@ -548,9 +662,6 @@
   "instance.worlds.dont_show_on_home": {
     "message": "Nicht auf Startseite anzeigen"
   },
-  "instance.worlds.filter.available": {
-    "message": "Verfügbar"
-  },
   "instance.worlds.game_already_open": {
     "message": "Instanz ist bereits geöffnet"
   },
@@ -558,7 +669,7 @@
     "message": "Hardcore-Modus"
   },
   "instance.worlds.incompatible_server": {
-    "message": "Server ist inkompatibel"
+    "message": "Server ist nicht kompatibel"
   },
   "instance.worlds.linked_server": {
     "message": "Von Serverprojekt verwaltet"
@@ -567,48 +678,81 @@
     "message": "Server konnte nicht erreicht werden"
   },
   "instance.worlds.no_server_quick_play": {
-    "message": "Du kannst nur in Minecraft Alpha 1.0.5 und neuer direkt einem Server beitreten"
+    "message": "Du kannst nur mit Minecraft Alpha 1.0.5 und neuer einem Server direkt beitreten"
   },
   "instance.worlds.no_singleplayer_quick_play": {
-    "message": "Du kannst nur in Minecraft 1.20 und neuer einer Einzelspieler-Welt beitreten"
+    "message": "Du kannst nur mit Minecraft 1.20 und neuer einer Einzelspieler-Welt direkt beitreten"
   },
   "instance.worlds.play_instance": {
     "message": "Instanz Spielen"
   },
-  "instance.worlds.type.server": {
-    "message": "Server"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "Einzelspieler"
-  },
   "instance.worlds.view_instance": {
     "message": "Instanz anzeigen"
   },
   "instance.worlds.world_in_use": {
-    "message": "Welt bereits in benutzung"
+    "message": "Welt bereits in Benutzung"
+  },
+  "minecraft-account.add-account": {
+    "message": "Konto hinzufügen"
+  },
+  "minecraft-account.label": {
+    "message": "Minecraft-Konto"
+  },
+  "minecraft-account.not-signed-in": {
+    "message": "Nicht angemeldet"
+  },
+  "minecraft-account.remove-account": {
+    "message": "Konto entfernen"
+  },
+  "minecraft-account.select-account": {
+    "message": "Konto auswählen"
+  },
+  "minecraft-account.sign-in": {
+    "message": "In Minecraft anmelden"
   },
   "search.filter.locked.instance": {
-    "message": "Von der Instanz bereitgestellt"
+    "message": "Von der Instanz vorgegeben"
   },
   "search.filter.locked.instance-game-version.title": {
-    "message": "Spielversion ist von der Instanz bereitgestellt"
+    "message": "Spielversion ist von der Instanz vorgegeben"
   },
   "search.filter.locked.instance-loader.title": {
-    "message": "Loader ist von der Instanz bereitgestellt"
+    "message": "Loader ist von der Instanz vorgegeben"
   },
   "search.filter.locked.instance.sync": {
     "message": "Mit Instanz synchronisieren"
   },
   "search.filter.locked.server": {
-    "message": "Von Server bereitgestellt"
+    "message": "Vom Server bereitgestellt"
   },
   "search.filter.locked.server-environment.title": {
     "message": "Nur Clientseitige Mods können der Serverinstanz hinzugefügt werden"
   },
   "search.filter.locked.server-game-version.title": {
-    "message": "Spielversion vom Server bereitgestellt"
+    "message": "Spielversion wird vom Server bereitgestellt"
   },
   "search.filter.locked.server-loader.title": {
-    "message": "Loader vom Server bereitgestellt"
+    "message": "Loader wird vom Server bereitgestellt"
+  },
+  "unknown-pack-warning-modal.body": {
+    "message": "Eine Datei wird nur geprüft, wenn sie auf Modrinth hochgeladen wird, unabhängig von ihrem Dateiformat (auch .mrpack)."
+  },
+  "unknown-pack-warning-modal.dont-show-again": {
+    "message": "Diese Warnung nicht mehr anzeigen"
+  },
+  "unknown-pack-warning-modal.header": {
+    "message": "Installation bestätigen"
+  },
+  "unknown-pack-warning-modal.install-anyway": {
+    "message": "Trotzdem installieren"
+  },
+  "unknown-pack-warning-modal.malware-statement": {
+    "message": "Schadsoftware wird häufig über Modpack-Dateien verbreitet, indem diese auf Plattformen wie Discord geteilt werden."
+  },
+  "unknown-pack-warning-modal.warning.body": {
+    "message": "Wir konnten diese Datei auf Modrinth nicht finden. Wir empfehlen dringend, nur Dateien aus vertrauenswürdigen Quellen zu installieren."
+  },
+  "unknown-pack-warning-modal.warning.title": {
+    "message": "Warnung vor unbekannter Datei"
   }
 }