Add title stemming to typesense

* Fix Typesense tests

* fix

* add back author

* Split project title and authors by words and index on that

* clippy

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

@@ -0,0 +1,156 @@
+# Adding a New API Module
+
+How to add a new API endpoint module to `packages/api-client`.
+
+## 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`

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

@@ -0,0 +1,144 @@
+# Cross-Platform Page System
+
+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.
+
+## How It Works
+
+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

.claude/skills/dependency-injection/SKILL.md

@@ -0,0 +1,174 @@
+# Dependency Injection
+
+Modrinth uses a lightweight DI layer built on Vue's `provide`/`inject` for sharing platform-specific capabilities and page-level state across shared UI components.
+
+## The `createContext` Factory
+
+All providers are defined using `createContext` from `packages/ui/src/providers/index.ts` (adapted from Reka UI). It produces a typed `[inject, provide]` tuple:
+
+```ts
+import { createContext } from '@modrinth/ui'
+
+interface MyContext {
+	someValue: Ref<string>
+	doSomething: () => void
+}
+
+export const [injectMyContext, provideMyContext] = createContext<MyContext>('MyComponent')
+```
+
+- **`provideMyContext(value)`** — call in a parent component's `setup()`.
+- **`injectMyContext()`** — call in any descendant's `setup()`. Throws if never provided.
+- **`injectMyContext(null)`** — returns `null` instead of throwing (for optional contexts).
+
+## When to Use DI
+
+Use DI when:
+- **The same interface needs different implementations** depending on the platform (web vs desktop app).
+- **Deeply nested components** need access to shared page-level state without prop drilling through 3+ levels.
+
+### Platform Abstraction (Primary Use Case)
+
+`packages/ui` components need capabilities that each frontend fulfils differently:
+
+| Provider | App Frontend | Website Frontend |
+|----------|-------------|-----------------|
+| API client | Tauri IPC client | REST fetch client |
+| Notifications | `ref()` state + app window mgmt | `useState()` for SSR hydration |
+| File picker | Native Tauri dialogs | Browser file inputs |
+| Tags | Tauri commands | Nuxt server state |
+| Page context | `sidebar: true`, ad window hooks | `sidebar: false`, no ads |
+
+### Page-Level Context
+
+Sharing data between a page and deeply nested children — e.g. project page data consumed by sidebar, header, and version components.
+
+## Creating a New Provider
+
+### 1. Define the interface in `packages/ui/src/providers/`
+
+```ts
+// packages/ui/src/providers/my-feature.ts
+import type { Ref } from 'vue'
+import { createContext } from '.'
+
+export interface MyFeatureContext {
+	items: Ref<Item[]>
+	addItem: (item: Item) => Promise<void>
+	removeItem: (id: string) => Promise<void>
+}
+
+export const [injectMyFeature, provideMyFeature] = createContext<MyFeatureContext>('MyFeature')
+```
+
+Re-export from the barrel file (`packages/ui/src/providers/index.ts`).
+
+### 2. For complex platform-specific logic, use an abstract class
+
+```ts
+export abstract class AbstractMyFeatureManager {
+	abstract items: Ref<Item[]>
+	abstract addItem(item: Item): Promise<void>
+
+	// Shared logic lives on the base class
+	handleError(err: unknown) {
+		console.error(err)
+	}
+}
+
+export const [injectMyFeature, provideMyFeature] =
+	createContext<AbstractMyFeatureManager>('MyFeature')
+```
+
+See `AbstractWebNotificationManager` in `packages/ui/src/providers/web-notifications.ts` for a real example.
+
+## Wiring Up Providers
+
+### App Frontend (Tauri)
+
+Create a setup function in `apps/app-frontend/src/providers/setup/`:
+
+```ts
+// apps/app-frontend/src/providers/setup/my-feature.ts
+import { ref } from 'vue'
+import { provideMyFeature } from '@modrinth/ui'
+
+export function setupMyFeatureProvider() {
+	const items = ref<Item[]>([])
+
+	provideMyFeature({
+		items,
+		addItem: async (item) => {
+			await invoke('add_item', { item })
+			items.value.push(item)
+		},
+		removeItem: async (id) => {
+			await invoke('remove_item', { id })
+			items.value = items.value.filter(i => i.id !== id)
+		},
+	})
+}
+```
+
+Register it in `apps/app-frontend/src/providers/setup.ts`, which is called from `App.vue`'s `setup()`.
+
+### Website Frontend (Nuxt)
+
+Provide directly in `apps/frontend/src/app.vue`, using Nuxt's `useState()` where SSR hydration is needed:
+
+```ts
+provideMyFeature({
+	items: useState<Item[]>('my-feature-items', () => []),
+	addItem: async (item) => {
+		await $fetch('/api/items', { method: 'POST', body: item })
+	},
+	removeItem: async (id) => {
+		await $fetch(`/api/items/${id}`, { method: 'DELETE' })
+	},
+})
+```
+
+## Consuming Providers
+
+In any component across `packages/ui`, `apps/frontend`, or `apps/app-frontend`:
+
+```vue
+<script setup lang="ts">
+import { injectMyFeature } from '@modrinth/ui'
+
+const { items, addItem } = injectMyFeature()
+</script>
+
+<template>
+	<div v-for="item in items" :key="item.id">{{ item.name }}</div>
+	<button @click="addItem({ id: '1', name: 'New' })">Add</button>
+</template>
+```
+
+## When NOT to Use DI
+
+Default to props and emits. DI adds indirection — only use it with a concrete reason.
+
+- **Parent to direct child** — use props.
+- **Data only exists in one frontend** — keep context local to that app, not in `packages/ui`.
+- **Shallow prop drilling (1–2 levels)** — passing through one intermediate is fine.
+- **Component-local state** — use `ref()` / `reactive()` locally.
+
+## Existing Providers
+
+| Provider | File | Purpose |
+|----------|------|---------|
+| `provideModrinthClient` | `providers/api-client.ts` | API client instance |
+| `provideNotificationManager` | `providers/web-notifications.ts` | Notification management |
+| `providePageContext` | `providers/page-context.ts` | Page config (sidebar, ads) |
+| `provideProjectPageContext` | `providers/project-page.ts` | Project page state + mutations |
+| `provideServerContext` | `providers/server-context.ts` | Server hosting state |
+| `provideUserPageContext` | `providers/user-page.ts` | User page state |
+
+## Key Files
+
+- `packages/ui/src/providers/index.ts` — `createContext` factory + barrel exports
+- `packages/ui/src/providers/*.ts` — Provider definitions
+- `apps/frontend/src/app.vue` — Nuxt root provider setup
+- `apps/app-frontend/src/App.vue` — Tauri root provider setup
+- `apps/app-frontend/src/providers/setup/` — App provider setup functions

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

@@ -0,0 +1,45 @@
+# Figma MCP Usage
+
+When the Figma MCP server is connected, use it to translate Figma designs into production-ready Vue components for this monorepo.
+
+## Workflow
+
+### 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.

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

@@ -0,0 +1,105 @@
+# 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/multistage-modals/SKILL.md

@@ -0,0 +1,215 @@
+# 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/tanstack-query/SKILL.md

@@ -0,0 +1,154 @@
+# TanStack Query
+
+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.
+
+A TanStack MCP server is available — use `tanstack_doc` and `tanstack_search_docs` tools to look up API details when needed.
+
+## 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

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

@@ -1,6 +1,6 @@
-name: 👥 Bug with Modrinth Servers
-description: For issues with a Modrinth Servers product.
-labels: [servers]
+name: 👥 Bug with Modrinth Hosting
+description: For issues with a Modrinth Hosting product.
+labels: [hosting]
 type: 'bug'
 body:
   - type: checkboxes

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

@@ -19,7 +19,7 @@ body:
       options:
         - Modrinth App
         - Modrinth.com website
-        - Modrinth Servers
+        - Modrinth Hosting
         - Modrinth API for developers
   - type: textarea
     attributes:

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

@@ -2,7 +2,7 @@
 applyTo: '**/*.vue'
 ---
 
-You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using @vintl/vintl-nuxt (which wraps FormatJS).
+You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using vue-i18n with utilities from `@modrinth/ui`.
 
 Please follow these rules precisely:
 
@@ -13,40 +13,53 @@ Please follow these rules precisely:
 
 2. Create message definitions
 
-- In the <script setup> block, import `defineMessage` or `defineMessages` from `@vintl/vintl`.
+- In the <script setup> block, import `defineMessage` or `defineMessages` from `@modrinth/ui`.
 - For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
   Example:
   const messages = defineMessages({
   welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
-  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You’re now part of the community…' },
+  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You're now part of the community…' },
   })
 
 3. Handle variables and ICU formats
 
 - Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
-- For numbers/dates/times, use ICU/FormatJS options (e.g., currency): `{price, number, ::currency/USD}`
+- For numbers/dates/times, use ICU options (e.g., currency): `{price, number, ::currency/USD}`
 - For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
 
 4. Rich-text messages (links/markup)
 
 - In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
   "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
-- Render rich-text messages with `<IntlFormatted>` from `@vintl/vintl/components` and map tags via `values`:
-  <IntlFormatted
-    :message="messages.tosLabel"
-    :values="{
-      'terms-link': (chunks) => <NuxtLink to='/terms'>{chunks}</NuxtLink>,
-      'privacy-link': (chunks) => <NuxtLink to='/privacy'>{chunks}</NuxtLink>,
-    }"
-  />
-- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` and map `'strong': (c) => <strong>{c}</strong>`
+- Render rich-text messages with `<IntlFormatted>` from `@modrinth/ui` using named slots:
+  <IntlFormatted :message-id="messages.tosLabel">
+    <template #terms-link="{ children }">
+      <NuxtLink to="/terms">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+    <template #privacy-link="{ children }">
+      <NuxtLink to="/privacy">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+  </IntlFormatted>
+- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
+  <template #strong="{ children }">
+    <strong><component :is="() => children" /></strong>
+  </template>
+- For more complex child handling, use `normalizeChildren` from `@modrinth/ui`:
+  <template #bold="{ children }">
+    <strong><component :is="() => normalizeChildren(children)" /></strong>
+  </template>
 
 5. Formatting in templates
 
-- Import and use `useVIntl()`; prefer `formatMessage` for simple strings:
+- Import and use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
   `const { formatMessage } = useVIntl()`
   `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
-- Vue methods like `$formatMessage`, `$formatNumber`, `$formatDate` are also available if needed.
+- Pass variables as a second argument:
+  `{{ formatMessage(messages.greeting, { name: user.name }) }}`
 
 6. Naming conventions and id stability
 
@@ -58,7 +71,8 @@ Please follow these rules precisely:
 
 8. Update imports and remove literals
 
-- Ensure imports for `defineMessage`/`defineMessages`, `useVIntl`, and `<IntlFormatted>` are present. Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
+- Ensure imports from `@modrinth/ui` are present: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, and optionally `normalizeChildren`.
+- Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
 
 9. Preserve functionality
 

.github/workflows/COPYING.md

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

.github/workflows/LICENSE

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

.github/workflows/check-generic.yml

@@ -13,13 +13,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: crate-ci/typos@master
+      - uses: crate-ci/typos@v1.43.1
 
-  # broken: <https://github.com/SchemaStore/schemastore/issues/5108>
-  # tombi:
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: tombi-toml/setup-tombi@v1
-  #     - run: tombi lint
-  #     - run: tombi fmt --check
+  # 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
+        with:
+          tool: tombi
+      - run: tombi lint
+      - run: tombi fmt --check

.github/workflows/frontend-deploy.yml

@@ -0,0 +1,143 @@
+name: Deploy frontend
+
+on:
+  push:
+    branches:
+      - main
+      - prod
+    paths:
+      - 'apps/frontend/**/*'
+      - 'packages/ui/**/*'
+      - 'packages/utils/**/*'
+      - 'packages/assets/**/*'
+      - '**/wrangler.jsonc'
+      - '**/pnpm-*.yaml'
+      - '.github/workflows/frontend-deploy.yml'
+  workflow_dispatch:
+  workflow_call:
+    inputs:
+      environment:
+        required: true
+        type: string
+        description: 'The environment to deploy to (staging-preview or production-preview)'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure environment
+        id: meta
+        run: |
+          echo "cmd=deploy" >> $GITHUB_OUTPUT
+
+          ENV_INPUT="${{ inputs.environment }}"
+          REF="${{ github.ref }}"
+          SHA_SHORT="${GITHUB_SHA::8}"
+
+          if [ "$ENV_INPUT" = "staging-preview" ]; then
+            echo "env=staging" >> $GITHUB_OUTPUT
+            echo "url=https://git-$SHA_SHORT-frontend-staging.modrinth.workers.dev" >> $GITHUB_OUTPUT
+            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
+
+          elif [ "$ENV_INPUT" = "production-preview" ]; then
+            echo "env=production" >> $GITHUB_OUTPUT
+            echo "url=https://git-$SHA_SHORT-frontend.modrinth.workers.dev" >> $GITHUB_OUTPUT
+            echo "cmd=versions upload --preview-alias git-$SHA_SHORT --var PREVIEW:true" >> $GITHUB_OUTPUT
+
+          elif [ "$REF" = "refs/heads/main" ]; then
+            echo "env=staging" >> $GITHUB_OUTPUT
+            echo "url=https://staging.modrinth.com" >> $GITHUB_OUTPUT
+
+          else
+            # Production env (no preview)
+            echo "env=production" >> $GITHUB_OUTPUT
+            echo "url=https://modrinth.com" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Inject build variables
+        working-directory: ./apps/frontend
+        run: |
+          if [ "${{ steps.meta.outputs.env }}" == "staging" ]; then
+            echo "Injecting staging variables from wrangler.jsonc..."
+            jq -r '.env.staging.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          else
+            echo "Injecting production variables from wrangler.jsonc..."
+            jq -r '.vars | to_entries[] | "\(.key)=\(.value)"' wrangler.jsonc >> $GITHUB_ENV
+          fi
+
+      - name: Install dependencies
+        working-directory: ./apps/frontend
+        run: pnpm install
+
+      - name: Build frontend
+        working-directory: ./apps/frontend
+        run: pnpm build
+        env:
+          CF_PAGES_BRANCH: ${{ github.ref_name }}
+          CF_PAGES_COMMIT_SHA: ${{ github.sha }}
+          CF_PAGES_URL: ${{ steps.meta.outputs.url }}
+          BUILD_ENV: ${{ steps.meta.outputs.env }}
+          PREVIEW: ${{ inputs.environment != '' && 'true' || 'false' }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Create Sentry release and upload sourcemaps
+        uses: getsentry/action-release@v3
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: modrinth
+          SENTRY_PROJECT: knossos-server
+        with:
+          environment: ${{ steps.meta.outputs.env }}
+          sourcemaps: ./apps/frontend/.output/server
+          url_prefix: '~/'
+
+      - name: Deploy Cloudflare Worker
+        id: wrangler
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          environment: ${{ steps.meta.outputs.env != 'production' && steps.meta.outputs.env || '' }}
+          workingDirectory: ./apps/frontend
+          packageManager: pnpm
+          wranglerVersion: '4.54.0'
+          command: ${{ steps.meta.outputs.cmd }}
+
+      - name: Purge cache
+        if: github.ref == 'refs/heads/prod'
+        run: |
+          curl -X POST \
+            -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
+            https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
+
+      - name: Write deployment URL to file
+        if: ${{ inputs.environment != '' }}
+        run: |
+          echo "${{ steps.meta.outputs.url }}" > deployment-url-${{ inputs.environment }}.txt
+
+      - name: Upload deployment URL
+        if: ${{ inputs.environment != '' }}
+        uses: actions/upload-artifact@v6
+        with:
+          name: deployment-url-${{ inputs.environment }}
+          path: deployment-url-${{ inputs.environment }}.txt

.github/workflows/frontend-pages.yml

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

.github/workflows/frontend-preview.yml

@@ -0,0 +1,72 @@
+name: Deploy frontend preview
+
+on:
+  pull_request:
+    paths:
+      - 'apps/frontend/**/*'
+      - 'packages/ui/**/*'
+      - 'packages/utils/**/*'
+      - 'packages/assets/**/*'
+      - '**/wrangler.jsonc'
+      - '**/pnpm-*.yaml'
+      - '.github/workflows/frontend-preview.yml'
+
+jobs:
+  deploy:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    uses: ./.github/workflows/frontend-deploy.yml
+    secrets: inherit
+    strategy:
+      matrix:
+        environment: [staging-preview, production-preview]
+    with:
+      environment: ${{ matrix.environment }}
+
+  comment:
+    if: github.repository_owner == 'modrinth' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - name: Download deployment URLs
+        uses: actions/download-artifact@v7
+        with:
+          pattern: deployment-url-*
+          merge-multiple: true
+
+      - name: Read deployment URLs
+        id: urls
+        run: |
+          STAGING_PREVIEW_URL=$(cat deployment-url-staging-preview.txt)
+          PRODUCTION_PREVIEW_URL=$(cat deployment-url-production-preview.txt)
+
+          echo "Production preview URL: $PRODUCTION_PREVIEW_URL"
+          echo "Staging preview URL: $STAGING_PREVIEW_URL"
+
+          echo "staging-preview-url=$STAGING_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "production-preview-url=$PRODUCTION_PREVIEW_URL" >> $GITHUB_OUTPUT
+
+      - name: Find comment
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/find-comment@v3
+        id: fc
+        with:
+          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
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          body: |
+            ## Frontend previews
+
+            Last deployed commit is [${{ github.sha }}](${{ github.event.pull_request.head.repo.html_url }}/commit/${{ github.sha }})
+
+            | Environment | URL |
+            |-------------|-----|
+            | staging     | ${{ steps.urls.outputs.staging-preview-url }} |
+            | production  | ${{ steps.urls.outputs.production-preview-url }} |
+          edit-mode: replace

.github/workflows/theseus-build.yml

@@ -19,7 +19,15 @@ on:
       sign-windows-binaries:
         description: Sign Windows binaries
         type: boolean
-        default: true
+        default: false
+        required: false
+      environment:
+        description: Environment
+        type: choice
+        options:
+          - prod
+          - staging
+        default: prod
         required: false
 
 jobs:
@@ -40,33 +48,48 @@ jobs:
     runs-on: ${{ matrix.platform }}
 
     steps:
-      - name: 📥 Check out code
+      - name: Check out code
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: 🧰 Setup Rust toolchain
+      - name: Setup Rust toolchain
         uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
           rustflags: ''
           target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
 
-      - name: 🧰 Install pnpm
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
 
-      - name: 🧰 Setup Node.js
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: pnpm
 
-      - name: 🧰 Install Linux build dependencies
+      - name: Generate tauri-dev.conf.json
+        shell: bash
+        run: |
+          GIT_HASH=$(git rev-parse --short HEAD)
+          cat > apps/app/tauri-dev.conf.json <<EOF
+          {
+            "productName": "Modrinth App (dev-${GIT_HASH})",
+            "mainBinaryName": "Modrinth App (dev-${GIT_HASH})",
+            "identifier": "ModrinthApp-dev-${GIT_HASH}",
+            "bundle": {
+              "fileAssociations": []
+            }
+          }
+          EOF
+
+      - name: Install Linux build dependencies
         if: startsWith(matrix.platform, 'ubuntu')
         run: |
           sudo apt-get update
           sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
 
-      - name: 🧰 Setup Dasel
+      - name: Setup Dasel
         uses: jaxxstorm/action-install-gh-release@v2.1.0
         with:
           repo: TomWright/dasel
@@ -75,24 +98,26 @@ jobs:
           rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
           chmod: 0755
 
-      - name: ⚙️ Set application version and environment
+      - name: Set application version and environment
         shell: bash
         run: |
           APP_VERSION="$(git describe --tags --always | sed -E 's/-([0-9]+)-(g[0-9a-fA-F]+)$/-canary+\1.\2/')"
+          BUILD_ENVIRONMENT="${{ inputs.environment || 'prod' }}"
           echo "Setting application version to $APP_VERSION"
+          echo "Using environment $BUILD_ENVIRONMENT"
           dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
           dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
 
-          cp packages/app-lib/.env.prod packages/app-lib/.env
+          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
 
-      - name: 💨 Setup Turbo cache
+      - name: Setup Turbo cache
         uses: rharkor/caching-for-turbo@v1.8
 
-      - name: 🧰 Install dependencies
+      - name: Install dependencies
         run: pnpm install
 
-      - name: ✍️ Set up Windows code signing
+      - name: Set up Windows code signing
         if: startsWith(matrix.platform, 'windows')
         shell: bash
         run: |
@@ -102,8 +127,8 @@ jobs:
             dasel delete -f apps/app/tauri-release.conf.json 'bundle.windows.signCommand'
           fi
 
-      - name: 🔨 Build macOS app
-        run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
+      - 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')
         env:
           ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
@@ -116,19 +141,19 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
-      - name: 🔨 Build Linux app
-        run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
+      - 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')
         env:
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
 
-      - name: 🔨 Build Windows app
+      - name: Build Windows app
         run: |
           [System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
           $env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
           $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
-          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
+          ${{ (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')
         env:
@@ -138,7 +163,7 @@ jobs:
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
           DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
 
-      - name: 📤 Upload app bundles
+      - name: Upload app bundles
         uses: actions/upload-artifact@v4
         with:
           name: App bundle (${{ matrix.artifact-target-name }})
@@ -146,7 +171,13 @@ jobs:
             target/release/bundle/appimage/Modrinth App_*.AppImage*
             target/release/bundle/deb/Modrinth App_*.deb*
             target/release/bundle/rpm/Modrinth App-*.rpm*
+            target/release/bundle/appimage/Modrinth App (dev-*)_*.AppImage*
+            target/release/bundle/deb/Modrinth App (dev-*)_*.deb*
+            target/release/bundle/rpm/Modrinth App (dev-*)-*.rpm*
             target/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz*
+            target/universal-apple-darwin/release/bundle/macos/Modrinth App (dev-*)*.app.tar.gz
+            target/universal-apple-darwin/release/bundle/dmg/Modrinth App (dev-*)*.dmg
             target/universal-apple-darwin/release/bundle/dmg/Modrinth App_*.dmg*
             target/release/bundle/nsis/Modrinth App_*-setup.exe*
+            target/release/bundle/nsis/Modrinth App (dev-*)_*-setup.exe*
             target/release/bundle/nsis/Modrinth App_*-setup.nsis.zip*

.github/workflows/turbo-ci.yml

@@ -70,23 +70,37 @@ jobs:
       - name: 🧰 Install dependencies
         run: pnpm install
 
+      - 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
+        id: check-labrinth
+        run: |
+          LABRINTH_TEST_STATUS=$(pnpm turbo run test --filter=@modrinth/labrinth --dry-run=json | jq -r '.tasks[] | select(.task == "test") | .cache.status')
+          echo "Labrinth test cache status: $LABRINTH_TEST_STATUS"
+          if [ "$LABRINTH_TEST_STATUS" = "HIT" ]; then
+            echo "needs_services=false" >> $GITHUB_OUTPUT
+          else
+            echo "needs_services=true" >> $GITHUB_OUTPUT
+          fi
+
       - name: ⚙️ Start services
+        if: steps.check-labrinth.outputs.needs_services == 'true'
         run: docker compose up --wait
 
       - 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: ⚙️ Set app environment
-        working-directory: packages/app-lib
-        run: cp .env.staging .env
-
       - name: 🔍 Lint and test
         run: pnpm run ci
 
       - name: 🔍 Verify intl:extract has been run
         run: |
-          pnpm intl:extract
+          pnpm turbo run intl:extract --force
           git diff --exit-code --color */*/src/locales/en-US/index.json

.gitignore

@@ -64,7 +64,17 @@ generated
 app-playground-data/*
 
 .astro
-.claude
+.claude/*
+!.claude/skills/
+.letta
 
 # labrinth demo fixtures
 apps/labrinth/fixtures/demo
+
+*storybook.log
+storybook-static
+
+.wrangler/
+
+# frontend robots.txt
+apps/frontend/src/public/robots.txt

.idea/code.iml

@@ -12,6 +12,11 @@
       <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/packages/path-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-log/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/examples" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/muralpay/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/target" />
     </content>
     <orderEntry type="inheritedJdk" />

.vscode/settings.json

@@ -13,7 +13,7 @@
 	},
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"

AGENTS.md

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

CLAUDE.md

@@ -1,63 +1,128 @@
-# Architecture
+# Modrinth Monorepo
 
-Use TAB instead of spaces.
+This is the Modrinth monorepo — it contains all Modrinth projects, both frontend and backend. When entering a project, either to edit or analyse, you should read it's CLAUDE.md.
 
-## Frontend
+## Architecture
 
-There are two similar frontends in the Modrinth monorepo, the website (apps/frontend) and the app frontend (apps/app-frontend).
+- **Monorepo tooling:** [Turborepo](https://turbo.build/) (`turbo.jsonc`) + [pnpm workspaces](https://pnpm.io/workspaces) (`pnpm-workspace.yaml`)
+- **Frontend:** Vue 3 / Nuxt 3, Tailwind CSS v3
+- **Backend:** Rust (Labrinth API), Postgres, Clickhouse
+- **Indentation:** Use TAB everywhere, never spaces
 
-Both use Tailwind v3, and their respective configs can be seen at `tailwind.config.ts` and `tailwind.config.js` respectively.
+### Apps (`apps/`)
 
-Both utilize shared and common components from `@modrinth/ui` which can be found at `packages/ui`, and stylings from `@modrinth/assets` which can be found at `packages/assets`.
+| App               | Description                    |
+| ----------------- | ------------------------------ |
+| `frontend`        | Main Modrinth website (Nuxt 3) |
+| `app-frontend`    | Desktop/app frontend (Vue 3)   |
+| `app`             | Desktop/app shell (Tauri)      |
+| `app-playground`  | Testing playground for app     |
+| `labrinth`        | Backend API service            |
+| `daedalus_client` | Daedalus client implementation |
+| `docs`            | Documentation site (Astro)     |
 
-Both can utilize icons from `@modrinth/assets`, which are automatically generated based on what's available within the `icons` folder of the `packages/assets` directory. You can see the generated icons list in `generated-icons.ts`.
+### Packages (`packages/`)
 
-Both have access to our dependency injection framework, examples as seen in `packages/ui/src/providers/`. Ideally any state which is shared between a page and it's subpages should be shared using this dependency injection framework.
+| Package            | Description                                           |
+| ------------------ | ----------------------------------------------------- |
+| `ui`               | Shared Vue component library (`@modrinth/ui`)         |
+| `assets`           | Styling and auto-generated icons (`@modrinth/assets`) |
+| `api-client`       | API client for Nuxt, Tauri, and Node/browser          |
+| `app-lib`          | Shared app library                                    |
+| `blog`             | Blog system and changelog data                        |
+| `utils`            | Shared utility functions                              |
+| `moderation`       | Moderation utilities                                  |
+| `daedalus`         | Daedalus protocol                                     |
+| `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
+| `ariadne`          | Analytics library                                     |
+| `modrinth-log`     | Logging utilities                                     |
+| `modrinth-maxmind` | MaxMind GeoIP                                         |
+| `modrinth-util`    | General utilities                                     |
+| `muralpay`         | Payment processing                                    |
+| `path-util`        | Path utilities                                        |
+| `sqlx-tracing`     | SQLx query tracing                                    |
 
-### Website (apps/frontend)
+## Pre-PR Commands
 
-Before a pull request can be opened for the website, `pnpm web:fix` and `pnpm web:intl:extract` must be run, otherwise CI will fail.
+Run these from the **root** folder before opening a pull request - do not run these after each prompt the user gives you, only run when asked, ask the user a question if they want to run it if the user indicates that they are about to create a pull request.
 
-To run a development version of the frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within the `apps/frontend` folder into `apps/frontend/.env`. Then you can run the frontend by running `pnpm web:dev` in the root folder.
+- **Website:** `pnpm prepr:frontend:web`
+- **App frontend:** `pnpm prepr:frontend:app`
+- **Frontend libs:** `pnpm prepr:frontend:lib`
+- **All frontend (app+web):** `pnpm prepr`
+- **Labrinth (backend):** See `apps/labrinth/CLAUDE.md`
 
-### App Frontend (apps/app-frontend)
+The website and app `prepr` commands
 
-Before a pull request can be opened for the website, you must CD into the `app-frontend` folder; `pnpm fix` and `pnpm intl:extract` must be run, otherwise CI will fail.
+## Dev Commands
 
-To run a development version of the app frontend, you must first copy over the relevant `.env` template file (prod, staging or local, usually prod) within `packages/app-lib` into `packages/app-lib/.env`. Then you must run the app itself by running `pnpm app:dev` in the root folder.
+- **Website:** `pnpm web:dev` (copy `.env` template in `apps/frontend/` first)
+- **App:** `pnpm app:dev` (copy `.env` template in `packages/app-lib/` first)
+- **Storybook (packages/ui):** `pnpm storybook`
 
-### Localization
+## Project-Specific Instructions
 
-Refer to `.github/instructions/i18n-convert.instructions.md` if the user asks you to perform any i18n conversion work on a component, set of components, pages or sets of pages.
+Each project may have its own `CLAUDE.md` with detailed instructions:
 
-## Labrinth
+- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
+- [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
 
-Labrinth is the backend API service for Modrinth.
+## Skills (`.claude/skills/`)
 
-### Testing
+Project-specific skill files with detailed patterns. Use them when the task matches:
 
-Before a pull request can be opened, run `cargo clippy -p labrinth --all-targets` and make sure there are ZERO warnings, otherwise CI will fail.
+- **`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)
 
-Use `cargo test -p labrinth --all-targets` to test your changes. All tests must pass, otherwise CI will fail.
+## Code Guidelines
 
-To prepare the sqlx cache, cd into `apps/labrinth` and run `cargo sqlx prepare`. Make sure to NEVER run `cargo sqlx prepare --workspace`.
+### Comments
+- DO NOT use "heading" comments like: `=== Helper methods ===`.
+- Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
 
-Read the root `docker-compose.yml` to see what running services are available while developing. Use `docker exec` to access these services.
+## Bash Guidelines
 
-When the user refers to "performing pre-PR checks", do the following:
+### Output handling
+- DO NOT pipe output through `head`, `tail`, `less`, or `more`
+- NEVER use `| head -n X` or `| tail -n X` to truncate output
+- IMPORTANT: Run commands directly without pipes when possible
+- IMPORTANT: If you need to limit output, use command-specific flags (e.g. `git log -n 10` instead of `git log | head -10`)
+- ALWAYS read the full output — never pipe through filters
 
-- Run clippy as described above
-- DO NOT run tests unless explicitly requested (they take a long time)
-- Prepare the sqlx cache
+### 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.
 
-### Clickhouse
+## Edit Tool - Whitespace Handling (CLAUDE ONLY)
 
-Use `docker exec labrinth-clickhouse clickhouse-client` to access the Clickhouse instance. We use the `staging_ariadne` database to store data in testing.
+The Read tool uses `→` to mark where line numbers end and file content begins.
 
-### Postgres
+**Rule:** Copy the EXACT whitespace that appears after the `→` marker.
+- Whatever appears between `→` and the code text is what's actually in the file
+- That whitespace must be used EXACTLY in Edit tool's old_string
+- Don't count arrows, don't interpret - just copy what's after the `→`
 
-Use `docker exec labrinth-postgres psql -U postgres` to access the PostgreSQL instance.
+**Example:**
+14→		private byte tag;
+For Edit, use: `		private byte tag;` (copy everything after →, including the two tabs)
 
-# Guidelines
+**If Edit fails:** Stop and explain the problem. Do not attempt sed/awk/bash workarounds.
 
-- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to.
+**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
+
+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

COPYING.md

@@ -8,10 +8,14 @@ For detailed information, consult each package's COPYING.md, LICENSE.txt, or LIC
 
 The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
 
-> All rights reserved. © 2020-2024 Rinth, Inc.
+> All rights reserved. © 2020-2025 Rinth, Inc.
 
 This includes, but may not be limited to, the following files:
 
 - .idea/icon.svg
+- .github/api_cover.png
+- .github/app_cover.png
+- .github/monorepo_cover.png
+- .github/web_cover.png
 
 If you fork this repository, you must remove all Modrinth branding assets from your fork.

Cargo.toml

@@ -8,6 +8,7 @@ members = [
   "packages/app-lib",
   "packages/ariadne",
   "packages/daedalus",
+  "packages/labrinth-derive",
   "packages/modrinth-log",
   "packages/modrinth-maxmind",
   "packages/modrinth-util",
@@ -32,6 +33,7 @@ arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
 async-compression = { version = "0.4.32", default-features = false }
+async-minecraft-ping = { path = "packages/async-minecraft-ping" }
 async-recursion = "1.1.1"
 async-stripe = { version = "0.41.0", default-features = false, features = [
   "runtime-tokio-hyper-rustls",
@@ -58,9 +60,10 @@ color-eyre = "0.6.5"
 color-thief = "0.2.2"
 const_format = "0.2.34"
 daedalus = { path = "packages/daedalus" }
+darling = { version = "0.23" }
 dashmap = "6.1.0"
 data-url = "0.3.2"
-deadpool-redis = "0.22.0"
+deadpool-redis = { git = "https://github.com/modrinth/deadpool", rev = "db5fb00b036ecc8fe5f18853c559b745ffe47bde", version = "0.22.1" }
 derive_more = "2.0.1"
 directories = "6.0.0"
 dirs = "6.0.0"
@@ -69,6 +72,7 @@ dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
+elasticsearch = "9.1.0-alpha.1"
 encoding_rs = "0.8.35"
 enumset = "1.1.10"
 eyre = "0.6.12"
@@ -109,7 +113,6 @@ lettre = { version = "0.11.19", default-features = false, features = [
 maxminddb = "0.26.0"
 meilisearch-sdk = { version = "0.30.0", default-features = false }
 modrinth-log = { path = "packages/modrinth-log" }
-modrinth-maxmind = { path = "packages/modrinth-maxmind" }
 modrinth-util = { path = "packages/modrinth-util" }
 muralpay = { path = "packages/muralpay" }
 murmur2 = "0.1.0"
@@ -117,13 +120,16 @@ native-dialog = "0.9.2"
 notify = { version = "8.2.0", default-features = false }
 notify-debouncer-mini = { version = "0.7.0", default-features = false }
 p256 = "0.13.2"
+parking_lot = "0.12.5"
 paste = "1.0.15"
 path-util = { path = "packages/path-util" }
 phf = { version = "0.13.1", features = ["macros"] }
 png = "0.18.0"
+proc-macro2 = { version = "1.0" }
 prometheus = "0.14.0"
 quartz_nbt = "0.2.9"
 quick-xml = "0.38.3"
+quote = { version = "1.0" }
 rand = "=0.8.5"  # Locked on 0.8 until argon2 and p256 update to 0.9
 rand_chacha = "=0.3.1"  # Locked on 0.3 until we can update rand to 0.9
 redis = "0.32.7"
@@ -151,7 +157,6 @@ sentry = { version = "0.45.0", default-features = false, features = [
   "reqwest",
   "rustls",
 ] }
-sentry-actix = "0.45.0"
 serde = "1.0.228"
 serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
@@ -165,14 +170,16 @@ sha2 = "0.10.9"
 shlex = "1.3.0"
 spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
+sqlx-tracing = { path = "packages/sqlx-tracing" }
 strum = "0.27.2"
+syn = { version = "2.0" }
 sysinfo = { version = "0.37.2", default-features = false }
 tar = "0.4.44"
 tauri = "2.8.5"
 tauri-build = "2.4.1"
 tauri-plugin-deep-link = "2.4.3"
 tauri-plugin-dialog = "2.4.0"
-tauri-plugin-http = "2.5.2"
+tauri-plugin-http = "2.5.7"
 tauri-plugin-opener = "2.5.0"
 tauri-plugin-os = "2.3.1"
 tauri-plugin-single-instance = "2.3.4"
@@ -240,7 +247,7 @@ manual_assert = "warn"
 manual_instant_elapsed = "warn"
 manual_is_variant_and = "warn"
 manual_let_else = "warn"
-map_unwrap_or = "warn"
+map_unwrap_or = "allow"
 match_bool = "warn"
 needless_collect = "warn"
 negative_feature_names = "warn"
@@ -270,4 +277,5 @@ codegen-units = 1  # Compile crates one after another so the compiler can optimi
 # Specific profile for labrinth production builds
 [profile.release-labrinth]
 inherits = "release"
+strip = false  # Keep debug symbols for Sentry
 panic = "unwind"  # Don't exit the whole app on panic in production

_typos.toml

@@ -17,3 +17,7 @@ extend-exclude = [
 tou = "tou"
 # Google Ad Manager
 gam = "gam"
+# short for "constants"
+consts = "consts"
+# short for "Copy"
+Cpy = "Cpy"

apps/app-frontend/COPYING.md

@@ -1,13 +1,9 @@
 # Copying
 
-The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+The source code of Modrinth App's frontend is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
 
 ## Modrinth logo
 
 The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
 
-> All rights reserved. © 2020-2023 Rinth, Inc.
-
-This includes, but may not be limited to, the following files:
-
-- theseus_gui/src-tauri/icons/\*
+> All rights reserved. © 2020-2025 Rinth, Inc.

apps/app-frontend/package.json

@@ -22,24 +22,26 @@
 		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
-		"@tauri-apps/plugin-http": "^2.5.0",
+		"@tauri-apps/plugin-http": "~2.5.7",
 		"@tauri-apps/plugin-opener": "^2.2.6",
 		"@tauri-apps/plugin-os": "^2.2.1",
 		"@tauri-apps/plugin-updater": "^2.7.1",
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
-		"@vintl/vintl": "^4.4.1",
 		"@vueuse/core": "^11.1.0",
 		"dayjs": "^1.11.10",
 		"floating-vue": "^5.2.2",
+		"fuse.js": "^6.6.2",
+		"intl-messageformat": "^10.7.7",
 		"ofetch": "^1.3.4",
-		"pinia": "^2.1.7",
+		"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.3.0",
+		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
@@ -48,7 +50,7 @@
 		"@modrinth/tooling-config": "workspace:*",
 		"@nuxt/eslint-config": "^0.5.6",
 		"@taijased/vue-render-tracker": "^1.0.7",
-		"@vitejs/plugin-vue": "^5.0.4",
+		"@vitejs/plugin-vue": "^6.0.3",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^9.9.1",
 		"eslint-plugin-turbo": "^2.5.4",
@@ -57,7 +59,8 @@
 		"sass": "^1.74.1",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.4",
-		"vite": "^5.4.6",
+		"vite": "^6.0.0",
+		"vue-component-type-helpers": "^3.1.8",
 		"vue-tsc": "^2.1.6"
 	},
 	"packageManager": "pnpm@9.4.0",

apps/app-frontend/src/App.vue

@@ -31,16 +31,24 @@ import {
 	Button,
 	ButtonStyled,
 	commonMessages,
+	ContentInstallModal,
+	CreationFlowModal,
+	defineMessages,
+	I18nDebugPanel,
 	NewsArticleCard,
 	NotificationPanel,
 	OverflowMenu,
+	PopupNotificationPanel,
 	ProgressSpinner,
+	provideModalBehavior,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
+	providePopupNotificationManager,
 	useDebugLogger,
+	useVIntl,
 } from '@modrinth/ui'
-import { renderString } from '@modrinth/utils'
+import { formatBytes, renderString } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 import { getVersion } from '@tauri-apps/api/app'
 import { invoke } from '@tauri-apps/api/core'
@@ -48,7 +56,6 @@ import { getCurrentWindow } from '@tauri-apps/api/window'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { type } from '@tauri-apps/plugin-os'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { $fetch } from 'ofetch'
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
@@ -59,27 +66,28 @@ import AccountsCard from '@/components/ui/AccountsCard.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 ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.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 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 UpdateToast from '@/components/ui/UpdateToast.vue'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
 import { hide_ads_window, init_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { debugAnalytics, initAnalytics, trackEvent } from '@/helpers/analytics'
 import { check_reachable } from '@/helpers/auth.js'
 import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
-import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
+import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -91,18 +99,21 @@ import {
 	isDev,
 	isNetworkMetered,
 } from '@/helpers/utils.js'
+import i18n from '@/i18n.config'
+import { createContentInstall, provideContentInstall } from '@/providers/content-install'
 import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
 } from '@/providers/download-progress.ts'
+import { createServerInstall, provideServerInstall } from '@/providers/server-install'
+import { setupProviders } from '@/providers/setup'
 import { useError } from '@/store/error.js'
-import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
 
-import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
+import { AppPopupNotificationManager } from './providers/app-popup-notifications'
 
 const themeStore = useTheming()
 
@@ -110,6 +121,10 @@ const notificationManager = new AppNotificationManager()
 provideNotificationManager(notificationManager)
 const { handleError, addNotification } = notificationManager
 
+const popupNotificationManager = new AppPopupNotificationManager()
+providePopupNotificationManager(popupNotificationManager)
+const { addPopupNotification } = popupNotificationManager
+
 const tauriApiClient = new TauriModrinthClient({
 	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
 	features: [
@@ -124,6 +139,20 @@ providePageContext({
 	hierarchicalSidebarAvailable: ref(true),
 	showAds: ref(false),
 })
+provideModalBehavior({
+	noblur: computed(() => !themeStore.advancedRendering),
+	onShow: () => hide_ads_window(),
+	onHide: () => show_ads_window(),
+})
+
+const {
+	installationModal,
+	handleCreate,
+	handleBrowseModpacks,
+	searchModpacks,
+	getProjectVersions,
+} = setupProviders(notificationManager)
+
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -141,6 +170,7 @@ const showOnboarding = ref(false)
 const nativeDecorations = ref(false)
 
 const os = ref('')
+const isDevEnvironment = ref(false)
 
 const stateInitialized = ref(false)
 
@@ -219,10 +249,10 @@ const messages = defineMessages({
 })
 
 async function setupApp() {
-	stateInitialized.value = true
 	const {
 		native_decorations,
 		theme,
+		locale,
 		telemetry,
 		collapsed_navigation,
 		advanced_rendering,
@@ -234,12 +264,18 @@ async function setupApp() {
 		pending_update_toast_for_version,
 	} = await getSettings()
 
+	// Initialize locale from saved settings
+	if (locale) {
+		i18n.global.locale.value = locale
+	}
+
 	if (default_page === 'Library') {
 		await router.push('/library')
 	}
 
 	os.value = await getOS()
 	const dev = await isDev()
+	isDevEnvironment.value = dev
 	const version = await getVersion()
 	showOnboarding.value = !onboarded
 
@@ -252,6 +288,7 @@ async function setupApp() {
 	themeStore.toggleSidebar = toggle_sidebar
 	themeStore.devMode = developer_mode
 	themeStore.featureFlags = feature_flags
+	stateInitialized.value = true
 
 	isMaximized.value = await getCurrentWindow().isMaximized()
 
@@ -259,12 +296,11 @@ async function setupApp() {
 		isMaximized.value = await getCurrentWindow().isMaximized()
 	})
 
-	initAnalytics()
-	if (!telemetry) {
-		optOutAnalytics()
+	if (telemetry) {
+		initAnalytics()
+		if (dev) debugAnalytics()
+		trackEvent('Launched', { version, dev, onboarded })
 	}
-	if (dev) debugAnalytics()
-	trackEvent('Launched', { version, dev, onboarded })
 
 	if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
 
@@ -283,11 +319,7 @@ async function setupApp() {
 		}),
 	)
 
-	useFetch(
-		`https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`,
-		'criticalAnnouncements',
-		true,
-	)
+	fetch(`https://api.modrinth.com/appCriticalAnnouncement.json?version=${version}`)
 		.then((response) => response.json())
 		.then((res) => {
 			if (res && res.header && res.body) {
@@ -300,23 +332,21 @@ async function setupApp() {
 			)
 		})
 
-	useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true)
+	fetch(`https://modrinth.com/news/feed/articles.json`)
 		.then((response) => response.json())
 		.then((res) => {
 			if (res && res.articles) {
-				// Format expected by NewsArticleCard component.
 				news.value = res.articles
 					.map((article) => ({
 						...article,
 						path: article.link,
-						thumbnail: article.thumbnail,
-						title: article.title,
-						summary: article.summary,
-						date: article.date,
 					}))
 					.slice(0, 4)
 			}
 		})
+		.catch((error) => {
+			console.error('Failed to fetch news articles', error)
+		})
 
 	get_opening_command().then(handleCommand)
 	fetchCredentials()
@@ -377,11 +407,42 @@ loading.setEnabled(false)
 
 const error = useError()
 const errorModal = ref()
+const minecraftAuthErrorModal = ref()
+
+const contentInstall = createContentInstall({ router, handleError })
+provideContentInstall(contentInstall)
+const {
+	instances: contentInstallInstances,
+	compatibleLoaders: contentInstallLoaders,
+	gameVersions: contentInstallGameVersions,
+	loading: contentInstallLoading,
+	defaultTab: contentInstallDefaultTab,
+	preferredLoader: contentInstallPreferredLoader,
+	preferredGameVersion: contentInstallPreferredGameVersion,
+	releaseGameVersions: contentInstallReleaseGameVersions,
+	handleInstallToInstance,
+	handleCreateAndInstall,
+	handleNavigate: handleContentInstallNavigate,
+	handleCancel: handleContentInstallCancel,
+	setContentInstallModal,
+	setInstallConfirmModal: setContentInstallConfirmModal,
+	setIncompatibilityWarningModal: setContentIncompatibilityWarningModal,
+} = contentInstall
+
+const serverInstall = createServerInstall({ router, handleError, popupNotificationManager })
+provideServerInstall(serverInstall)
+const {
+	setInstallToPlayModal: setServerInstallToPlayModal,
+	setUpdateToPlayModal: setServerUpdateToPlayModal,
+	setAddServerToInstanceModal: setServerAddServerToInstanceModal,
+} = serverInstall
 
-const install = useInstall()
 const modInstallModal = ref()
+const addServerToInstanceModal = ref()
 const installConfirmModal = ref()
 const incompatibilityWarningModal = ref()
+const installToPlayModal = ref()
+const updateToPlayModal = ref()
 
 const credentials = ref()
 
@@ -390,7 +451,7 @@ const modrinthLoginFlowWaitModal = ref()
 async function fetchCredentials() {
 	const creds = await getCreds().catch(handleError)
 	if (creds && creds.user_id) {
-		creds.user = await get_user(creds.user_id).catch(handleError)
+		creds.user = await get_user(creds.user_id, 'bypass').catch(handleError)
 	}
 	credentials.value = creds ?? null
 }
@@ -455,10 +516,14 @@ onMounted(() => {
 	invoke('show_window')
 
 	error.setErrorModal(errorModal.value)
+	error.setMinecraftAuthErrorModal(minecraftAuthErrorModal.value)
 
-	install.setIncompatibilityWarningModal(incompatibilityWarningModal)
-	install.setInstallConfirmModal(installConfirmModal)
-	install.setModInstallModal(modInstallModal)
+	setContentIncompatibilityWarningModal(incompatibilityWarningModal.value)
+	setContentInstallConfirmModal(installConfirmModal.value)
+	setContentInstallModal(modInstallModal.value)
+	setServerAddServerToInstanceModal(addServerToInstanceModal.value)
+	setServerInstallToPlayModal(installToPlayModal.value)
+	setServerUpdateToPlayModal(updateToPlayModal.value)
 })
 
 const accounts = ref(null)
@@ -476,6 +541,9 @@ async function handleCommand(e) {
 				source: 'CreationModalFileDrop',
 			})
 		}
+	} else if (e.event === 'InstallServer') {
+		await router.push(`/project/${e.id}`)
+		await playServerProject(e.id).catch(handleError)
 	} else {
 		// Other commands are URL-based (deep linking)
 		urlModal.value.show(e)
@@ -494,24 +562,72 @@ const downloadPercent = computed(() => Math.trunc(appUpdateDownload.progress.val
 const metered = ref(true)
 const finishedDownloading = ref(false)
 const restarting = ref(false)
-const updateToastDismissed = ref(false)
 const availableUpdate = ref(null)
 const updateSize = ref(null)
+const updatesEnabled = ref(true)
+
+const updatePopupMessages = defineMessages({
+	updateAvailable: {
+		id: 'app.update-popup.title',
+		defaultMessage: 'Update available',
+	},
+	downloadComplete: {
+		id: 'app.update-popup.download-complete',
+		defaultMessage: 'Download complete',
+	},
+	body: {
+		id: 'app.update-popup.body',
+		defaultMessage:
+			'Modrinth App v{version} is ready to install! Reload to update now, or automatically when you close Modrinth App.',
+	},
+	meteredBody: {
+		id: 'app.update-popup.body.metered',
+		defaultMessage: `Modrinth App v{version} is available now! Since you're on a metered network, we didn't automatically download it.`,
+	},
+	downloadedBody: {
+		id: 'app.update-popup.body.download-complete',
+		defaultMessage: `Modrinth App v{version} has finished downloading. Reload to update now, or automatically when you close Modrinth App.`,
+	},
+	linuxBody: {
+		id: 'app.update-popup.body.linux',
+		defaultMessage:
+			'Modrinth App v{version} is available. Use your package manager to update for the latest features and fixes!',
+	},
+	reload: {
+		id: 'app.update-popup.reload',
+		defaultMessage: 'Reload',
+	},
+	download: {
+		id: 'app.update-popup.download',
+		defaultMessage: 'Download ({size})',
+	},
+	changelog: {
+		id: 'app.update-popup.changelog',
+		defaultMessage: 'Changelog',
+	},
+})
+
 async function checkUpdates() {
 	if (!(await areUpdatesEnabled())) {
 		console.log('Skipping update check as updates are disabled in this build or environment')
+		updatesEnabled.value = false
+
+		if (os.value === 'Linux' && !isDevEnvironment.value) {
+			checkLinuxUpdates()
+			setInterval(checkLinuxUpdates, 5 * 60 * 1000)
+		}
 		return
 	}
 
 	async function performCheck() {
 		const update = await invoke('plugin:updater|check')
-		const isExistingUpdate = update.version === availableUpdate.value?.version
-
 		if (!update) {
 			console.log('No update available')
 			return
 		}
 
+		const isExistingUpdate = update.version === availableUpdate.value?.version
+
 		if (isExistingUpdate) {
 			console.log('Update is already known')
 			return
@@ -519,7 +635,6 @@ async function checkUpdates() {
 
 		appUpdateDownload.progress.value = 0
 		finishedDownloading.value = false
-		updateToastDismissed.value = false
 
 		console.log(`Update ${update.version} is available.`)
 
@@ -529,6 +644,28 @@ async function checkUpdates() {
 			downloadUpdate(update)
 		} else {
 			console.log(`Metered connection detected, not auto-downloading update.`)
+			getUpdateSize(update.rid).then((size) => {
+				updateSize.value = size
+				addPopupNotification({
+					title: formatMessage(updatePopupMessages.updateAvailable),
+					text: formatMessage(updatePopupMessages.meteredBody, { version: update.version }),
+					type: 'info',
+					autoCloseMs: null,
+					buttons: [
+						{
+							label: formatMessage(updatePopupMessages.download, {
+								size: formatBytes(updateSize.value ?? 0),
+							}),
+							action: () => downloadAvailableUpdate(),
+							color: 'brand',
+						},
+						{
+							label: formatMessage(updatePopupMessages.changelog),
+							action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+						},
+					],
+				})
+			})
 		}
 
 		getUpdateSize(update.rid).then((size) => (updateSize.value = size))
@@ -545,8 +682,26 @@ async function checkUpdates() {
 	)
 }
 
-async function showUpdateToast() {
-	updateToastDismissed.value = false
+async function checkLinuxUpdates() {
+	try {
+		const [response, currentVersion] = await Promise.all([
+			fetch('https://launcher-files.modrinth.com/updates.json'),
+			getVersion(),
+		])
+		const updates = await response.json()
+		const latestVersion = updates?.version
+
+		if (latestVersion && latestVersion !== currentVersion) {
+			addPopupNotification({
+				title: formatMessage(updatePopupMessages.updateAvailable),
+				text: formatMessage(updatePopupMessages.linuxBody, { version: latestVersion }),
+				type: 'info',
+				autoCloseMs: null,
+			})
+		}
+	} catch (e) {
+		console.error('Failed to check for updates:', e)
+	}
 }
 
 async function downloadAvailableUpdate() {
@@ -572,6 +727,26 @@ async function downloadUpdate(versionToDownload) {
 				unlistenUpdateDownload = null
 			})
 			console.log('Finished downloading!')
+
+			addPopupNotification({
+				title: formatMessage(updatePopupMessages.downloadComplete),
+				text: formatMessage(updatePopupMessages.downloadedBody, {
+					version: versionToDownload.version,
+				}),
+				type: 'success',
+				autoCloseMs: null,
+				buttons: [
+					{
+						label: formatMessage(updatePopupMessages.reload),
+						action: () => installUpdate(),
+						color: 'brand',
+					},
+					{
+						label: formatMessage(updatePopupMessages.changelog),
+						action: () => openUrl('https://modrinth.com/news/changelog?filter=app'),
+					},
+				],
+			})
 		})
 		unlistenUpdateDownload = await subscribeToDownloadProgress(
 			appUpdateDownload,
@@ -745,24 +920,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		class="app-grid-layout experimental-styles-within relative"
 		:class="{ 'disable-advanced-rendering': !themeStore.advancedRendering }"
 	>
-		<Suspense>
-			<Transition name="toast">
-				<UpdateToast
-					v-if="
-						!!availableUpdate &&
-						!updateToastDismissed &&
-						!restarting &&
-						(finishedDownloading || metered)
-					"
-					:version="availableUpdate.version"
-					:size="updateSize"
-					:metered="metered"
-					@close="updateToastDismissed = true"
-					@restart="installUpdate"
-					@download="downloadAvailableUpdate"
-				/>
-			</Transition>
-		</Suspense>
 		<Transition name="fade">
 			<div
 				v-if="restarting"
@@ -784,9 +941,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		<Suspense>
 			<AuthGrantFlowWaitModal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
 		</Suspense>
-		<Suspense>
-			<InstanceCreationModal ref="installationModal" />
-		</Suspense>
+		<CreationFlowModal
+			ref="installationModal"
+			type="instance"
+			show-snapshot-toggle
+			:search-modpacks="searchModpacks"
+			:get-project-versions="getProjectVersions"
+			@create="handleCreate"
+			@browse-modpacks="handleBrowseModpacks"
+		/>
 		<div
 			class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
 		>
@@ -832,21 +995,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</suspense>
 			<NavButton
 				v-tooltip.right="'Create new instance'"
-				:to="() => $refs.installationModal.show()"
+				:to="() => installationModal?.show()"
 				:disabled="offline"
 			>
 				<PlusIcon />
 			</NavButton>
 			<div class="flex flex-grow"></div>
 			<Transition name="nav-button-animated">
-				<div
-					v-if="
-						availableUpdate &&
-						updateToastDismissed &&
-						!restarting &&
-						(finishedDownloading || metered)
-					"
-				>
+				<div v-if="availableUpdate && !restarting && (finishedDownloading || metered)">
 					<NavButton
 						v-tooltip.right="
 							formatMessage(
@@ -860,13 +1016,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 								},
 							)
 						"
-						:to="
-							finishedDownloading
-								? installUpdate
-								: downloadProgress > 0 && downloadProgress < 1
-									? showUpdateToast
-									: downloadAvailableUpdate
-						"
+						:to="finishedDownloading ? installUpdate : downloadAvailableUpdate"
 					>
 						<ProgressSpinner
 							v-if="downloadProgress > 0 && downloadProgress < 1"
@@ -885,7 +1035,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				<SettingsIcon />
 			</NavButton>
 			<OverflowMenu
-				v-if="credentials"
+				v-if="credentials?.user"
 				v-tooltip.right="`Modrinth account`"
 				class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
 				:options="[
@@ -901,14 +1051,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				]"
 				placement="right-end"
 			>
-				<Avatar :src="credentials.user.avatar_url" alt="" size="32px" circle />
+				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
 				<template #view-profile>
 					<UserIcon />
 					<span class="inline-flex items-center gap-1">
 						Signed in as
 						<span class="inline-flex items-center gap-1 text-contrast font-semibold">
-							<Avatar :src="credentials.user.avatar_url" alt="" size="20px" circle />
-							{{ credentials.user.username }}
+							<Avatar :src="credentials?.user?.avatar_url" alt="" size="20px" circle />
+							{{ credentials?.user?.username }}
 						</span>
 					</span>
 					<ExternalIcon />
@@ -920,9 +1070,9 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</NavButton>
 		</div>
 		<div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
-			<div data-tauri-drag-region class="flex p-3">
-				<ModrinthAppLogo class="h-full w-auto text-contrast pointer-events-none" />
-				<div data-tauri-drag-region class="flex items-center gap-1 ml-3">
+			<div data-tauri-drag-region class="flex min-w-0 flex-1 overflow-hidden p-3">
+				<ModrinthAppLogo class="h-full w-auto shrink-0 text-contrast pointer-events-none" />
+				<div data-tauri-drag-region class="flex shrink-0 items-center gap-1 ml-3">
 					<button
 						class="cursor-pointer p-0 m-0 text-contrast border-none outline-none bg-button-bg rounded-full flex items-center justify-center w-6 h-6 hover:brightness-75 transition-all"
 						@click="router.back()"
@@ -938,7 +1088,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 				<Breadcrumbs class="pt-[2px]" />
 			</div>
-			<section data-tauri-drag-region class="flex ml-auto items-center">
+			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
 				<ButtonStyled
 					v-if="!forceSidebar && themeStore.toggleSidebar"
 					:type="sidebarToggled ? 'standard' : 'transparent'"
@@ -988,7 +1138,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<transition name="popup-survey">
 				<div
 					v-if="availableSurvey"
-					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-divider border-[1px] border-solid border-b-0 p-4"
+					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
 				>
 					<h2 class="text-lg font-extrabold mt-0 mb-2">Hey there Modrinth user!</h2>
 					<p class="m-0 leading-tight">
@@ -1114,11 +1264,31 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		</div>
 	</div>
 	<URLConfirmModal ref="urlModal" />
+	<I18nDebugPanel />
 	<NotificationPanel has-sidebar />
+	<PopupNotificationPanel has-sidebar />
 	<ErrorModal ref="errorModal" />
-	<ModInstallModal ref="modInstallModal" />
+	<MinecraftAuthErrorModal ref="minecraftAuthErrorModal" />
+	<ContentInstallModal
+		ref="modInstallModal"
+		:instances="contentInstallInstances"
+		:compatible-loaders="contentInstallLoaders"
+		:game-versions="contentInstallGameVersions"
+		:loading="contentInstallLoading"
+		:default-tab="contentInstallDefaultTab"
+		:preferred-loader="contentInstallPreferredLoader"
+		:preferred-game-version="contentInstallPreferredGameVersion"
+		:release-game-versions="contentInstallReleaseGameVersions"
+		@install="handleInstallToInstance"
+		@create-and-install="handleCreateAndInstall"
+		@navigate="handleContentInstallNavigate"
+		@cancel="handleContentInstallCancel"
+	/>
+	<AddServerToInstanceModal ref="addServerToInstanceModal" />
 	<IncompatibilityWarningModal ref="incompatibilityWarningModal" />
 	<InstallConfirmModal ref="installConfirmModal" />
+	<InstallToPlayModal ref="installToPlayModal" />
+	<UpdateToPlayModal ref="updateToPlayModal" />
 </template>
 
 <style lang="scss" scoped>
@@ -1347,38 +1517,15 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	transform: translateY(10rem) scale(0.8) scaleY(1.6);
 }
 
-.toast-enter-active {
-	transition: opacity 0.25s linear;
-}
-
-.toast-enter-from,
-.toast-leave-to {
-	opacity: 0;
-}
-
 @media (prefers-reduced-motion: no-preference) {
-	.toast-enter-active,
 	.nav-button-animated-enter-active {
 		transition: all 0.5s cubic-bezier(0.15, 1.4, 0.64, 0.96);
 	}
 
-	.toast-leave-active,
 	.nav-button-animated-leave-active {
 		transition: all 0.25s ease;
 	}
 
-	.toast-enter-from {
-		scale: 0.5;
-		translate: 0 -10rem;
-		opacity: 0;
-	}
-
-	.toast-leave-to {
-		scale: 0.96;
-		translate: 20rem 0;
-		opacity: 0;
-	}
-
 	.nav-button-animated-enter-active {
 		position: relative;
 	}
@@ -1442,7 +1589,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	}
 
 	.info-card {
-		right: 8rem;
+		right: 22rem;
 	}
 
 	.profile-card {

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

@@ -85,10 +85,6 @@ a {
 	}
 }
 
-input {
-	border: none !important;
-}
-
 .badge {
 	display: flex;
 	border-radius: var(--radius-md);
@@ -159,4 +155,23 @@ img {
 	box-shadow: var(--shadow-card);
 }
 
+// From the Bootstrap project
+// The MIT License (MIT)
+// Copyright (c) 2011-2023 The Bootstrap Authors
+// https://github.com/twbs/bootstrap/blob/2f617215755b066904248525a8c56ea425dde871/scss/mixins/_visually-hidden.scss#L8
+.visually-hidden {
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+
+	&:not(caption) {
+		position: absolute !important;
+	}
+}
+
 @import '@modrinth/assets/omorphia.scss';

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

@@ -8,21 +8,27 @@ import {
 	SearchIcon,
 	StopCircleIcon,
 	TrashIcon,
-	XIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect, injectNotificationManager } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
+import {
+	DropdownSelect,
+	formatLoader,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { duplicate, remove } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
 
+const { formatMessage } = useVIntl()
+
 const props = defineProps({
 	instances: {
 		type: Array,
@@ -175,7 +181,7 @@ const filteredResults = computed(() => {
 
 	if (group === 'Loader') {
 		instances.forEach((instance) => {
-			const loader = formatCategoryHeader(instance.loader)
+			const loader = formatLoader(formatMessage, instance.loader)
 			if (!instanceMap.has(loader)) {
 				instanceMap.set(loader, [])
 			}
@@ -243,13 +249,14 @@ const filteredResults = computed(() => {
 </script>
 <template>
 	<div class="flex gap-2">
-		<div class="iconified-input flex-1">
-			<SearchIcon />
-			<input v-model="search" type="text" placeholder="Search" />
-			<Button class="r-btn" @click="() => (search = '')">
-				<XIcon />
-			</Button>
-		</div>
+		<StyledInput
+			v-model="search"
+			:icon="SearchIcon"
+			type="text"
+			placeholder="Search"
+			clearable
+			wrapper-class="flex-1"
+		/>
 		<DropdownSelect
 			v-slot="{ selected }"
 			v-model="state.sortBy"
@@ -295,14 +302,7 @@ const filteredResults = computed(() => {
 			/>
 		</section>
 	</div>
-	<ConfirmModalWrapper
-		ref="confirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		@proceed="deleteProfile"
-	/>
+	<ConfirmDeleteInstanceModal ref="confirmModal" @delete="deleteProfile" />
 	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
 		<template #play> <PlayIcon /> Play </template>
 		<template #stop> <StopCircleIcon /> Stop </template>

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

@@ -18,16 +18,17 @@ import { useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import Instance from '@/components/ui/Instance.vue'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
+import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_by_profile_path } from '@/helpers/process.js'
 import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { showProfileInFolder } from '@/helpers/utils.js'
+import { injectContentInstall } from '@/providers/content-install'
 import { handleSevereError } from '@/store/error.js'
-import { install as installVersion } from '@/store/install.js'
 
 const { handleError } = injectNotificationManager()
+const { install: installVersion } = injectContentInstall()
 
 const router = useRouter()
 
@@ -238,14 +239,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<ConfirmModalWrapper
-		ref="deleteConfirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		@proceed="deleteProfile"
-	/>
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="deleteProfile" />
 	<div ref="rowContainer" class="flex flex-col gap-4">
 		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
 			<HeadingLink class="mt-1" :to="row.route">
@@ -270,7 +264,7 @@ onUnmounted(() => {
 				/>
 			</section>
 			<section v-else ref="modsRow" class="projects">
-				<ProjectCard
+				<LegacyProjectCard
 					v-for="project in row.instances.slice(0, maxProjectsPerRow)"
 					:key="project?.project_id"
 					ref="instanceComponents"

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

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

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

@@ -33,6 +33,7 @@ const metadata = ref({})
 
 defineExpose({
 	async show(errorVal, context, canClose = true, source = null) {
+		console.log(errorVal, context, canClose, source)
 		closable.value = canClose
 
 		if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {

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

@@ -1,6 +1,14 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { Button, Checkbox, injectNotificationManager } from '@modrinth/ui'
+import {
+	Button,
+	Checkbox,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 
@@ -9,6 +17,33 @@ import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
 
 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: { id: 'app.export-modal.header', defaultMessage: 'Export modpack' },
+	modpackNameLabel: { id: 'app.export-modal.modpack-name-label', defaultMessage: 'Modpack Name' },
+	modpackNamePlaceholder: {
+		id: 'app.export-modal.modpack-name-placeholder',
+		defaultMessage: 'Modpack name',
+	},
+	versionNumberLabel: {
+		id: 'app.export-modal.version-number-label',
+		defaultMessage: 'Version number',
+	},
+	versionNumberPlaceholder: {
+		id: 'app.export-modal.version-number-placeholder',
+		defaultMessage: '1.0.0',
+	},
+	descriptionPlaceholder: {
+		id: 'app.export-modal.description-placeholder',
+		defaultMessage: 'Enter modpack description...',
+	},
+	selectFilesLabel: {
+		id: 'app.export-modal.select-files-label',
+		defaultMessage: 'Select files and folders to include in pack',
+	},
+	exportButton: { id: 'app.export-modal.export-button', defaultMessage: 'Export' },
+})
 
 const props = defineProps({
 	instance: {
@@ -106,42 +141,44 @@ const exportPack = async () => {
 </script>
 
 <template>
-	<ModalWrapper ref="exportModal" header="Export modpack">
+	<ModalWrapper ref="exportModal" :header="formatMessage(messages.header)">
 		<div class="modal-body">
 			<div class="labeled_input">
-				<p>Modpack Name</p>
-				<div class="iconified-input">
-					<PackageIcon />
-					<input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-					<Button class="r-btn" @click="nameInput = ''">
-						<XIcon />
-					</Button>
-				</div>
+				<p>{{ formatMessage(messages.modpackNameLabel) }}</p>
+				<StyledInput
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					:placeholder="formatMessage(messages.modpackNamePlaceholder)"
+					clearable
+				/>
 			</div>
 			<div class="labeled_input">
-				<p>Version number</p>
-				<div class="iconified-input">
-					<VersionIcon />
-					<input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-					<Button class="r-btn" @click="versionInput = ''">
-						<XIcon />
-					</Button>
-				</div>
+				<p>{{ formatMessage(messages.versionNumberLabel) }}</p>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					:placeholder="formatMessage(messages.versionNumberPlaceholder)"
+					clearable
+				/>
 			</div>
 			<div class="adjacent-input">
 				<div class="labeled_input">
-					<p>Description</p>
+					<p>{{ formatMessage(commonMessages.descriptionLabel) }}</p>
 
-					<div class="textarea-wrapper">
-						<textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-					</div>
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						:placeholder="formatMessage(messages.descriptionPlaceholder)"
+					/>
 				</div>
 			</div>
 
 			<div class="table">
 				<div class="table-head">
 					<div class="table-cell row-wise">
-						Select files and folders to include in pack
+						{{ formatMessage(messages.selectFilesLabel) }}
 						<Button
 							class="sleek-primary collapsed-button"
 							icon-only
@@ -200,11 +237,11 @@ const exportPack = async () => {
 			<div class="button-row push-right">
 				<Button @click="exportModal.hide">
 					<XIcon />
-					Cancel
+					{{ formatMessage(commonMessages.cancelButton) }}
 				</Button>
 				<Button color="primary" @click="exportPack">
 					<PackageIcon />
-					Export
+					{{ formatMessage(messages.exportButton) }}
 				</Button>
 			</div>
 		</div>
@@ -289,17 +326,4 @@ const exportPack = async () => {
 	align-items: center;
 	gap: 1rem;
 }
-
-.textarea-wrapper {
-	// margin-top: 1rem;
-	height: 12rem;
-
-	textarea {
-		max-height: 12rem;
-	}
-
-	.preview {
-		overflow-y: auto;
-	}
-}
 </style>

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

@@ -69,7 +69,7 @@ const play = async (e, context) => {
 	await run(props.instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
 				game_version: props.instance.game_version,
 				source: context,

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

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

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 
 type Instance = {
@@ -37,7 +36,8 @@ defineProps<{
 					</span>
 					<span class="text-secondary flex items-center gap-2 font-semibold">
 						<GameIcon class="h-5 w-5 text-secondary" />
-						{{ formatCategory(instance.loader) }} {{ instance.game_version }}
+						<FormattedTag :tag="instance.loader" enforce-type="loader" />
+						{{ instance.game_version }}
 					</span>
 				</span>
 			</span>

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

@@ -1,18 +1,17 @@
 <template>
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
 	<div class="toggle-setting" :class="{ compact }">
-		<input
+		<StyledInput
 			autocomplete="off"
 			:disabled="props.disabled"
-			:value="props.modelValue ? props.modelValue.path : ''"
-			type="text"
-			class="installation-input"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
 			:placeholder="placeholder ?? '/path/to/java'"
-			@input="
+			wrapper-class="installation-input"
+			@update:model-value="
 				(val) => {
 					emit('update:modelValue', {
 						...props.modelValue,
-						path: val.target.value,
+						path: val,
 					})
 				}
 			"
@@ -60,7 +59,7 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref } from 'vue'
 

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

@@ -1,7 +1,6 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, TagItem } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -11,6 +10,8 @@ dayjs.extend(relativeTime)
 
 const router = useRouter()
 
+const { formatCompactNumber } = useCompactNumber()
+
 const props = defineProps({
 	project: {
 		type: Object,
@@ -63,7 +64,7 @@ const toTransparent = computed(() => {
 		<div
 			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
 			:style="{
-				'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
 				'background-image': `url(${
 					project.featured_gallery ??
 					project.gallery[0] ??
@@ -96,18 +97,18 @@ const toTransparent = computed(() => {
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<DownloadIcon />
-					{{ formatNumber(project.downloads) }}
+					{{ formatCompactNumber(project.downloads) }}
 				</div>
 				<div
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<HeartIcon />
-					{{ formatNumber(project.follows) }}
+					{{ formatCompactNumber(project.follows) }}
 				</div>
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />
 					<TagItem>
-						{{ formatCategory(featuredCategory) }}
+						<FormattedTag :tag="featuredCategory" />
 					</TagItem>
 				</div>
 			</div>

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

@@ -1,5 +1,7 @@
 <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
@@ -14,13 +16,17 @@
 			<span class="text-nowrap">{{ link.label }}</span>
 		</RouterLink>
 		<div
-			:class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'}`"
+			: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: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
+				opacity: sliderReady && activeIndex !== -1 ? 1 : 0,
 			}"
 			aria-hidden="true"
 		></div>
@@ -28,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -47,13 +53,16 @@ const props = defineProps<{
 	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 oldIndex = 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)),
@@ -63,6 +72,11 @@ 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
@@ -83,62 +97,60 @@ function pickLink() {
 	if (activeIndex.value !== -1) {
 		startAnimation()
 	} else {
-		oldIndex.value = -1
 		sliderLeft.value = 0
 		sliderRight.value = 0
 	}
 }
 
-const tabLinkElements = ref()
+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 = tabLinkElements.value[activeIndex.value].$el
-
-	if (!el || !el.offsetParent) return
+	const el = getTabElement(activeIndex.value)
+	if (!el?.offsetParent) return
 
+	const parent = el.offsetParent as HTMLElement
 	const newValues = {
 		left: el.offsetLeft,
 		top: el.offsetTop,
-		right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
-		bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
+		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
 	}
 
-	if (sliderLeft.value === 4 && sliderRight.value === 4) {
+	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 delay = 200
-
-		if (newValues.left < sliderLeft.value) {
-			sliderLeft.value = newValues.left
-			setTimeout(() => {
-				sliderRight.value = newValues.right
-			}, delay)
-		} else {
-			sliderRight.value = newValues.right
-			setTimeout(() => {
-				sliderLeft.value = newValues.left
-			}, delay)
-		}
-
-		if (newValues.top < sliderTop.value) {
-			sliderTop.value = newValues.top
-			setTimeout(() => {
-				sliderBottom.value = newValues.bottom
-			}, delay)
-		} else {
-			sliderBottom.value = newValues.bottom
-			setTimeout(() => {
-				sliderTop.value = newValues.top
-			}, delay)
+		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(() => {
+onMounted(async () => {
 	window.addEventListener('resize', pickLink)
+	await nextTick()
 	pickLink()
 })
 
@@ -146,7 +158,17 @@ onUnmounted(() => {
 	window.removeEventListener('resize', pickLink)
 })
 
-watch(route, () => {
+watch(
+	filteredLinks,
+	async () => {
+		await nextTick()
+		pickLink()
+	},
+	{ deep: true },
+)
+
+watch(route, async () => {
+	await nextTick()
 	pickLink()
 })
 </script>
@@ -154,7 +176,10 @@ watch(route, () => {
 .navtabs-transition {
 	/* Delay on opacity is to hide any jankiness as the page loads */
 	transition:
-		all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+		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/QuickInstanceSwitcher.vue

@@ -49,27 +49,26 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<NavButton
-		v-for="instance in recentInstances"
-		:key="instance.id"
-		v-tooltip.right="instance.name"
-		:to="`/instance/${encodeURIComponent(instance.path)}`"
-		class="relative"
-	>
-		<Avatar
-			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-			size="28px"
-			:tint-by="instance.path"
-			:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-		/>
-		<div
-			v-if="instance.install_stage !== 'installed'"
-			class="absolute inset-0 flex items-center justify-center z-10"
-		>
-			<SpinnerIcon class="animate-spin w-4 h-4" />
-		</div>
-	</NavButton>
-	<div v-if="recentInstances.length > 0" class="h-px w-6 mx-auto my-2 bg-divider"></div>
+	<div v-for="instance in recentInstances" :key="instance.id" v-tooltip.right="instance.name">
+		<NavButton :to="`/instance/${encodeURIComponent(instance.path)}`" class="relative">
+			<Avatar
+				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+				size="28px"
+				:tint-by="instance.path"
+				:class="`transition-all ${instance.install_stage !== 'installed' ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+			/>
+			<div
+				v-if="instance.install_stage !== 'installed'"
+				class="absolute inset-0 flex items-center justify-center z-10 pointer-events-none"
+			>
+				<SpinnerIcon class="animate-spin w-4 h-4" />
+			</div>
+		</NavButton>
+	</div>
+	<div
+		v-if="instances && recentInstances.length > 0"
+		class="h-px w-6 mx-auto my-2 bg-divider"
+	></div>
 </template>
 
 <style scoped lang="scss"></style>

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

@@ -52,10 +52,12 @@
 				<h3 class="info-title">
 					{{ loadingBar.title }}
 				</h3>
-				<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
-				<div class="row">
-					{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
-					{{ loadingBar.message }}
+				<div 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>
@@ -346,7 +348,7 @@ onBeforeUnmount(() => {
 .info-card {
 	position: absolute;
 	top: 3.5rem;
-	right: 0.5rem;
+	right: 2rem;
 	z-index: 9;
 	width: 20rem;
 	background-color: var(--color-raised-bg);
@@ -420,7 +422,7 @@ onBeforeUnmount(() => {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 0.5rem;
+	gap: 0.75rem;
 	margin: 0;
 	padding: 0;
 }

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

@@ -1,7 +1,7 @@
 <template>
-	<div
-		class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-		@click="
+	<ProjectCard
+		:title="project.name"
+		:link="
 			() => {
 				emit('open')
 				$router.push({
@@ -10,122 +10,58 @@
 				})
 			}
 		"
+		: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"
 	>
-		<div class="icon w-[96px] h-[96px] relative">
-			<Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-		</div>
-		<div class="flex flex-col gap-2 overflow-hidden">
-			<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-				<span class="text-lg font-extrabold text-contrast m-0 leading-none">
-					{{ project.title }}
-				</span>
-				<span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-			</div>
-			<div class="m-0 line-clamp-2">
-				{{ project.description }}
-			</div>
-			<div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-				<TagsIcon class="h-4 w-4 shrink-0" />
-				<div
-					v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
+		<template #actions>
+			<ButtonStyled color="brand" type="outlined">
+				<button
+					:disabled="installed || installing"
+					class="shrink-0 no-wrap"
+					@click.stop="install()"
 				>
-					<template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-						Client or server
+					<SpinnerIcon v-if="installing" class="animate-spin" />
+					<template v-else-if="!installed">
+						<DownloadIcon v-if="modpack || instance" />
+						<PlusIcon v-else />
 					</template>
-					<template
-						v-else-if="
-							(project.client_side === 'optional' || project.client_side === 'required') &&
-							(project.server_side === 'optional' || project.server_side === 'unsupported')
-						"
-					>
-						Client
-					</template>
-					<template
-						v-else-if="
-							(project.server_side === 'optional' || project.server_side === 'required') &&
-							(project.client_side === 'optional' || project.client_side === 'unsupported')
-						"
-					>
-						Server
-					</template>
-					<template
-						v-else-if="
-							project.client_side === 'unsupported' && project.server_side === 'unsupported'
-						"
-					>
-						Unsupported
-					</template>
-					<template
-						v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-					>
-						Client and server
-					</template>
-				</div>
-				<div
-					v-for="tag in categories"
-					:key="tag"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-				>
-					{{ formatCategory(tag.name) }}
-				</div>
-			</div>
-		</div>
-		<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-			<div class="flex items-center gap-2">
-				<DownloadIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.downloads) }}
-					<span class="text-secondary">downloads</span>
-				</span>
-			</div>
-			<div class="flex items-center gap-2">
-				<HeartIcon class="shrink-0" />
-				<span>
-					{{ formatNumber(project.follows ?? project.followers) }}
-					<span class="text-secondary">followers</span>
-				</span>
-			</div>
-			<div class="mt-auto relative">
-				<div class="absolute bottom-0 right-0 w-fit">
-					<ButtonStyled color="brand" type="outlined">
-						<button
-							:disabled="installed || installing"
-							class="shrink-0 no-wrap"
-							@click.stop="install()"
-						>
-							<template v-if="!installed">
-								<DownloadIcon v-if="modpack || instance" />
-								<PlusIcon v-else />
-							</template>
-							<CheckIcon v-else />
-							{{
-								installing
-									? 'Installing'
-									: installed
-										? 'Installed'
-										: modpack || instance
-											? 'Install'
-											: 'Add to an instance'
-							}}
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</div>
+					<CheckIcon v-else />
+					{{
+						installing
+							? 'Installing'
+							: installed
+								? 'Installed'
+								: modpack || instance
+									? 'Install'
+									: 'Add to an instance'
+					}}
+				</button>
+			</ButtonStyled>
+		</template>
+	</ProjectCard>
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, HeartIcon, PlusIcon, TagsIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory, formatNumber } from '@modrinth/utils'
+import { 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 { install as installVersion } from '@/store/install.js'
+import { injectContentInstall } from '@/providers/content-install'
+
+const { install: installVersion } = injectContentInstall()
+
 dayjs.extend(relativeTime)
 
 const { handleError } = injectNotificationManager()
@@ -141,10 +77,6 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
-	categories: {
-		type: Array,
-		required: true,
-	},
 	instance: {
 		type: Object,
 		default: null,
@@ -157,6 +89,18 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
+	activeLoader: {
+		type: String,
+		default: null,
+	},
+	activeGameVersion: {
+		type: String,
+		default: null,
+	},
 })
 
 const emit = defineEmits(['open', 'install'])
@@ -170,15 +114,21 @@ async function install() {
 		null,
 		props.instance ? props.instance.path : null,
 		'SearchCard',
-		() => {
+		(versionId) => {
 			installing.value = false
-			emit('install', props.project.project_id ?? props.project.id)
+			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_type === 'modpack')
+const modpack = computed(() => props.project.project_types?.includes('modpack'))
 </script>

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

@@ -191,7 +191,8 @@ const handleClose = async () => {
 	position: absolute;
 	height: 100vh;
 	width: 100vw;
-	background: linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
+	background:
+		linear-gradient(180deg, rgba(66, 131, 92, 0.275) 0%, rgba(17, 35, 43, 0.5) 97.29%),
 		linear-gradient(0deg, rgba(22, 24, 28, 0.64), rgba(22, 24, 28, 0.64));
 	z-index: 9997;
 }

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

@@ -6,9 +6,10 @@ 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 { install as installVersion } from '@/store/install.js'
+import { injectContentInstall } from '@/providers/content-install'
 
 const { handleError } = injectNotificationManager()
+const { install: installVersion } = injectContentInstall()
 
 const confirmModal = ref(null)
 const project = ref(null)

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

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

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

@@ -3,12 +3,13 @@ import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/ass
 import {
 	Avatar,
 	ButtonStyled,
-	commonMessages,
+	defineMessages,
 	injectNotificationManager,
+	IntlFormatted,
+	StyledInput,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { IntlFormatted } from '@vintl/vintl/components'
 import { computed, onUnmounted, ref, watch } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
@@ -270,15 +271,14 @@ const messages = defineMessages({
 				{{ formatMessage(messages.usernameDescription) }}
 			</p>
 			<div class="flex items-center gap-2 mt-4">
-				<div class="iconified-input flex-1">
-					<UserIcon aria-hidden="true" />
-					<input
-						v-model="username"
-						type="text"
-						:placeholder="formatMessage(messages.usernamePlaceholder)"
-						@keyup.enter="addFriendFromModal"
-					/>
-				</div>
+				<StyledInput
+					v-model="username"
+					:icon="UserIcon"
+					type="text"
+					:placeholder="formatMessage(messages.usernamePlaceholder)"
+					wrapper-class="flex-1"
+					@keyup.enter="addFriendFromModal"
+				/>
 				<ButtonStyled color="brand">
 					<button :disabled="username.length === 0" @click="addFriendFromModal">
 						<SendIcon />
@@ -299,23 +299,15 @@ const messages = defineMessages({
 					<UserPlusIcon />
 				</button>
 			</ButtonStyled>
-			<div class="iconified-input flex-1">
-				<input
-					v-model="search"
-					type="text"
-					class="friends-search-bar flex w-full"
-					:placeholder="formatMessage(messages.searchFriends)"
-					@keyup.esc="search = ''"
-				/>
-				<button
-					v-if="search"
-					v-tooltip="formatMessage(commonMessages.clearButton)"
-					class="r-btn flex items-center justify-center bg-transparent button-animation p-2 cursor-pointer appearance-none border-none"
-					@click="search = ''"
-				>
-					<XIcon />
-				</button>
-			</div>
+			<StyledInput
+				v-model="search"
+				type="text"
+				:placeholder="formatMessage(messages.searchFriends)"
+				clearable
+				variant="outlined"
+				wrapper-class="flex-1"
+				@keyup.esc="search = ''"
+			/>
 		</template>
 		<h3 v-else class="ml-2 w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
@@ -412,16 +404,3 @@ const messages = defineMessages({
 		</template>
 	</div>
 </template>
-<style scoped>
-.friends-search-bar {
-	background: none;
-	border: 2px solid var(--color-button-bg) !important;
-	padding: 8px;
-	border-radius: 12px;
-	height: 36px;
-}
-
-.friends-search-bar::placeholder {
-	@apply text-sm font-normal;
-}
-</style>

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
-import { Accordion, Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	OverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { useTemplateRef } from 'vue'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'

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

@@ -0,0 +1,125 @@
+<script setup>
+import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	injectNotificationManager,
+	StyledInput,
+} from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { computed, ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { list } from '@/helpers/profile'
+import { add_server_to_profile, get_profile_worlds } from '@/helpers/worlds.ts'
+
+const { handleError } = injectNotificationManager()
+
+const modal = ref()
+const searchFilter = ref('')
+const profiles = ref([])
+
+const serverName = ref('')
+const serverAddress = ref('')
+
+const shownProfiles = computed(() =>
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
+)
+
+defineExpose({
+	show: async (name, address) => {
+		serverName.value = name
+		serverAddress.value = address
+		searchFilter.value = ''
+
+		const profilesVal = await list().catch(handleError)
+		await Promise.allSettled(
+			profilesVal.map(async (profile) => {
+				profile.adding = false
+				profile.added = false
+
+				try {
+					const worlds = await get_profile_worlds(profile.path)
+					profile.added = worlds.some(
+						(w) => w.type === 'server' && w.address === serverAddress.value,
+					)
+				} catch {
+					// Ignore - will show as not added
+				}
+			}),
+		)
+
+		profiles.value = profilesVal
+		modal.value.show()
+
+		trackEvent('AddServerToInstanceStart', { source: 'AddServerToInstanceModal' })
+	},
+})
+
+async function addServer(profile) {
+	profile.adding = true
+	try {
+		await add_server_to_profile(profile.path, serverName.value, serverAddress.value, 'prompt')
+		profile.added = true
+
+		trackEvent('AddServerToInstance', {
+			server_name: serverName.value,
+			instance_name: profile.name,
+			source: 'AddServerToInstanceModal',
+		})
+	} catch (err) {
+		handleError(err)
+	}
+	profile.adding = false
+}
+</script>
+
+<template>
+	<ModalWrapper ref="modal" header="Add server to instance">
+		<div class="flex flex-col gap-4 min-w-[350px]">
+			<Admonition type="warning" body="This server may not be compatible with all instances." />
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="search"
+				placeholder="Search for an instance"
+				autocomplete="off"
+			/>
+			<div class="max-h-[21rem] overflow-y-auto">
+				<div
+					v-for="profile in shownProfiles"
+					:key="profile.path"
+					class="flex w-full items-center justify-between gap-2 bg-bg-raised text-icon shadow-none"
+				>
+					<router-link
+						class="btn btn-transparent p-2 text-left"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						@click="modal.hide()"
+					>
+						<Avatar
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							class="mr-2 [--size:2rem]"
+						/>
+						{{ profile.name }}
+					</router-link>
+					<ButtonStyled>
+						<button :disabled="profile.added || profile.adding" @click="addServer(profile)">
+							<PlusIcon v-if="!profile.added && !profile.adding" />
+							<CheckIcon v-else-if="profile.added" />
+							{{ profile.adding ? 'Adding...' : profile.added ? 'Added' : 'Add' }}
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<ButtonStyled>
+					<button @click="modal.hide()">Cancel</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</ModalWrapper>
+</template>

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

@@ -28,7 +28,7 @@
 								:custom-label="
 									(version) =>
 										`${version?.name} (${version?.loaders
-											.map((name) => formatCategory(name))
+											.map((name) => formatLoader(formatMessage, name))
 											.join(', ')} - ${version?.game_versions.join(', ')})`
 								"
 								:max-height="150"
@@ -36,7 +36,9 @@
 							<span v-else>
 								<span>
 									{{ selectedVersion?.name }} ({{
-										selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+										selectedVersion?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')
 									}}
 									- {{ selectedVersion?.game_versions.join(', ') }})
 								</span>
@@ -57,8 +59,7 @@
 
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'
 import Multiselect from 'vue-multiselect'
 
@@ -67,6 +68,7 @@ import { trackEvent } from '@/helpers/analytics'
 import { add_project_from_version as installMod } from '@/helpers/profile'
 
 const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 
 const instance = ref(null)
 const project = ref(null)

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

@@ -4,10 +4,11 @@ import {
 	DownloadIcon,
 	PlusIcon,
 	RightArrowIcon,
+	SearchIcon,
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+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'
@@ -15,6 +16,7 @@ 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,
@@ -48,19 +50,14 @@ const creatingInstance = ref(false)
 const profiles = ref([])
 
 const shownProfiles = computed(() =>
-	profiles.value
-		.filter((profile) => {
-			return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
-		})
-		.filter((profile) => {
-			const version = {
-				game_versions: versions.value.flatMap((v) => v.game_versions),
-				loaders: versions.value.flatMap((v) => v.loaders),
-			}
-			return isVersionCompatible(version, project.value, profile)
-		}),
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
 )
 
+const isProfileCompatible = (profile) =>
+	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
+
 const onInstall = ref(() => {})
 
 defineExpose({
@@ -85,6 +82,22 @@ defineExpose({
 				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()
@@ -159,20 +172,21 @@ const reset_icon = () => {
 const createInstance = async () => {
 	creatingInstance.value = true
 
-	const loader =
-		versions.value[0].loaders[0] !== 'forge' &&
-		versions.value[0].loaders[0] !== 'fabric' &&
-		versions.value[0].loaders[0] !== 'quilt'
-			? 'vanilla'
-			: versions.value[0].loaders[0]
+	const gameVersions = versions.value[0].game_versions
+	const gameVersion = gameVersions[0]
 
-	const id = await create(
-		name.value,
-		versions.value[0].game_versions[0],
-		loader,
-		'latest',
-		icon.value,
-	).catch(handleError)
+	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)
 
@@ -210,12 +224,12 @@ const createInstance = async () => {
 <template>
 	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
 		<div class="modal-body">
-			<input
+			<StyledInput
 				v-model="searchFilter"
-				autocomplete="off"
-				type="text"
-				class="search"
+				: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">
@@ -238,17 +252,23 @@ const createInstance = async () => {
 						"
 					>
 						<Button
-							:disabled="profile.installedMod || profile.installing"
+							:disabled="
+								!isProfileCompatible(profile) || profile.installedMod || profile.installing
+							"
 							@click="install(profile)"
 						>
-							<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+							<DownloadIcon
+								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
+							/>
 							<CheckIcon v-else-if="profile.installedMod" />
 							{{
 								profile.installing
 									? 'Installing...'
 									: profile.installedMod
 										? 'Installed'
-										: 'Install'
+										: !isProfileCompatible(profile)
+											? 'Incompatible'
+											: 'Install'
 							}}
 						</Button>
 					</div>
@@ -270,7 +290,7 @@ const createInstance = async () => {
 						</div>
 					</div>
 					<div class="creation-settings">
-						<input
+						<StyledInput
 							v-model="name"
 							autocomplete="off"
 							type="text"

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

@@ -4,16 +4,18 @@ import {
 	Avatar,
 	ButtonStyled,
 	Checkbox,
+	defineMessages,
 	injectNotificationManager,
 	OverflowMenu,
+	StyledInput,
+	useVIntl,
 } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, type Ref, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
 
@@ -98,7 +100,8 @@ const addCategory = () => {
 watch(
 	[title, groups, groups],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		if (removing.value) return
+		await edit(props.instance.path, editProfileObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
@@ -106,8 +109,6 @@ watch(
 const removing = ref(false)
 async function removeProfile() {
 	removing.value = true
-	await remove(props.instance.path).catch(handleError)
-	removing.value = false
 
 	trackEvent('InstanceRemove', {
 		loader: props.instance.loader,
@@ -115,6 +116,7 @@ async function removeProfile() {
 	})
 
 	await router.push({ path: '/' })
+	await remove(props.instance.path).catch(handleError)
 }
 
 const messages = defineMessages({
@@ -192,15 +194,7 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<ConfirmModalWrapper
-		ref="deleteConfirmModal"
-		title="Are you sure you want to delete this instance?"
-		description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
-		:has-to-type="false"
-		proceed-label="Delete"
-		:show-ad-on-close="false"
-		@proceed="removeProfile"
-	/>
+	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<div class="block">
 		<div class="float-end ml-4 relative group">
 			<OverflowMenu
@@ -244,13 +238,12 @@ const messages = defineMessages({
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<input
+			<StyledInput
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"
-				maxlength="80"
-				class="flex-grow"
-				type="text"
+				:maxlength="80"
+				wrapper-class="flex-grow"
 			/>
 		</div>
 		<template v-if="instance.install_stage == 'installed'">
@@ -291,9 +284,8 @@ const messages = defineMessages({
 				@click="toggleGroup(group)"
 			/>
 			<div class="flex gap-2 items-center">
-				<input
+				<StyledInput
 					v-model="newCategoryInput"
-					type="text"
 					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
 					@submit="() => addCategory"
 				/>

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -109,14 +114,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.preLaunchDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.preLaunchEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -125,14 +129,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.wrapperDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.wrapperEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 
 		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
@@ -141,14 +144,13 @@ const messages = defineMessages({
 		<p class="m-0">
 			{{ formatMessage(messages.postExitDescription) }}
 		</p>
-		<input
+		<StyledInput
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
 			:disabled="!overrideHooks"
-			type="text"
 			:placeholder="formatMessage(messages.postExitEnter)"
-			class="w-full mt-2"
+			wrapper-class="w-full mt-2"
 		/>
 	</div>
 </template>

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

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

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

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
-import { Checkbox, injectNotificationManager, Slider } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, readonly, ref, watch } from 'vue'
 
 import JavaSelector from '@/components/ui/JavaSelector.vue'
@@ -156,27 +162,25 @@ const messages = defineMessages({
 			{{ formatMessage(messages.javaArguments) }}
 		</h2>
 		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
 			:disabled="!overrideJavaArgs"
-			type="text"
-			class="w-full"
 			placeholder="Enter java arguments..."
+			wrapper-class="w-full"
 		/>
 		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.javaEnvironmentVariables) }}
 		</h2>
 		<Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
 			:disabled="!overrideEnvVars"
-			type="text"
-			class="w-full"
 			placeholder="Enter environmental variables..."
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

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

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, type Ref, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
@@ -122,7 +128,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -141,7 +147,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<input
+			<StyledInput
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import {
+	CheckIcon,
+	CopyIcon,
+	DropdownIcon,
+	LogInIcon,
+	MessagesSquareIcon,
+	WrenchIcon,
+} from '@modrinth/assets'
+import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleSevereError } from '@/store/error.js'
+
+import { type MinecraftAuthError, minecraftAuthErrors } from './minecraft-auth-errors'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const rawError = ref<string>('')
+const matchedError = ref<MinecraftAuthError | null>(null)
+const debugCollapsed = ref(true)
+const copied = ref(false)
+const loadingSignIn = ref(false)
+
+function show(errorVal: { message?: string }) {
+	rawError.value = errorVal?.message ?? String(errorVal)
+
+	matchedError.value = minecraftAuthErrors.find((e) => rawError.value.includes(e.errorCode)) ?? null
+
+	debugCollapsed.value = true
+	hide_ads_window()
+	modal.value?.show()
+}
+
+function hide() {
+	onModalHide()
+	modal.value?.hide()
+}
+
+function onModalHide() {
+	show_ads_window()
+}
+
+defineExpose({
+	show,
+	hide,
+})
+
+async function signInAgain() {
+	try {
+		loadingSignIn.value = true
+		const loggedIn = await login_flow()
+		if (loggedIn) {
+			await set_default_user(loggedIn.profile.id)
+		}
+		loadingSignIn.value = false
+		modal.value?.hide()
+	} catch (err) {
+		loadingSignIn.value = false
+		handleSevereError(err)
+	}
+}
+
+const debugInfo = computed(() => rawError.value || 'No error message.')
+
+async function copyToClipboard(text: string) {
+	await navigator.clipboard.writeText(text)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 3000)
+}
+</script>
+
+<template>
+	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
+		<div class="flex flex-col gap-6">
+			<Admonition
+				type="warning"
+				body="	We couldn't sign you into your Microsoft account. This may be due to account restrictions or
+				regional limitations."
+			>
+			</Admonition>
+
+			<!-- Matched error details -->
+			<div class="bg-surface-2 rounded-2xl p-4 px-5 flex flex-col gap-3">
+				<template v-if="matchedError">
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">What we think happened</h3>
+						<p class="text-sm text-secondary m-0">
+							{{ matchedError.whatHappened }}
+						</p>
+					</div>
+
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">How to fix it</h3>
+						<ol class="list-none flex flex-col gap-2 m-0 pl-0">
+							<li
+								v-for="(step, index) in matchedError.stepsToFix"
+								:key="index"
+								class="flex items-baseline gap-2"
+							>
+								<span
+									class="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded-full bg-surface-4 border border-solid border-surface-5 text-xs font-medium"
+								>
+									{{ index + 1 }}
+								</span>
+								<!-- eslint-disable-next-line vue/no-v-html -->
+								<span
+									class="text-sm [&_a]:text-info [&_a]:font-medium [&_a]:underline"
+									v-html="step"
+								/>
+							</li>
+						</ol>
+					</div>
+				</template>
+				<template v-else>
+					<div class="flex flex-col gap-1.5">
+						<h3 class="text-base font-bold m-0">Unknown error</h3>
+						<p class="text-sm text-secondary m-0">
+							We don’t recognize this error and can’t recommend specific steps to resolve it.
+						</p>
+						<p class="text-sm text-secondary m-0">
+							Try visiting
+							<a
+								class="text-info font-medium underline hover:underline"
+								href="https://www.minecraft.net/en-us/login"
+								>Minecraft Login</a
+							>
+							and signing in, as it may prompt you with the necessary steps. You can also contact
+							support and we can look into it further.
+						</p>
+					</div>
+				</template>
+			</div>
+
+			<!-- Action buttons -->
+			<div class="flex items-center gap-2">
+				<ButtonStyled>
+					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+						<MessagesSquareIcon /> Contact support
+					</a>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
+						<LogInIcon /> Sign in again
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<div class="w-full h-[1px] bg-surface-5"></div>
+
+				<!-- Debug info -->
+				<div class="overflow-clip">
+					<button
+						class="flex items-center justify-between w-full bg-transparent border-0 py-4 cursor-pointer"
+						@click="debugCollapsed = !debugCollapsed"
+					>
+						<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': !debugCollapsed }"
+						/>
+					</button>
+					<Collapsible :collapsed="debugCollapsed">
+						<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>
+		</div>
+	</NewModal>
+</template>

apps/app-frontend/src/components/ui/minecraft-auth-error-modal/minecraft-auth-errors.ts

@@ -0,0 +1,90 @@
+export interface MinecraftAuthError {
+	errorCode: string
+	whatHappened: string
+	stepsToFix: string[]
+}
+
+export const minecraftAuthErrors: MinecraftAuthError[] = [
+	{
+		errorCode: '2148916222',
+		whatHappened:
+			'Your Minecraft/Xbox Live account requires age verification to comply with UK regulations. You must complete this before signing in.',
+		stepsToFix: [
+			'Go to the <a href="https://www.minecraft.net/en-us/login">Minecraft Login</a> page and sign in',
+			'Follow the instructions to verify your age',
+			'Once verified, try signing in again',
+			'For additional help, visit <a href="https://support.xbox.com/en-GB/help/family-online-safety/online-safety/UK-age-verification">UK age verification on Xbox</a>',
+		],
+	},
+	{
+		errorCode: '2148916233',
+		whatHappened: "This account doesn't have an Xbox profile set up or doesn't own Minecraft.",
+		stepsToFix: [
+			'Make sure Minecraft is purchased on this account',
+			'Visit <a href="https://www.minecraft.net/en-us/login">Minecraft Login</a> and sign in',
+			'Complete Xbox profile setup if prompted',
+			'Once finished, try signing in again',
+		],
+	},
+	{
+		errorCode: '2148916235',
+		whatHappened: "Xbox Live isn't available in your region, so sign-in is blocked.",
+		stepsToFix: [
+			'Xbox services must be supported in your country before you can sign in',
+			'Check <a href="https://www.xbox.com/en-US/regions">Xbox Availability</a> for supported regions',
+		],
+	},
+	{
+		errorCode: '2148916236',
+		whatHappened: 'This account requires adult verification under South Korean regulations.',
+		stepsToFix: [
+			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
+			'Complete the identity verification process',
+			'Once finished, try signing in again',
+		],
+	},
+	{
+		errorCode: '2148916237',
+		whatHappened: 'This account requires adult verification under South Korean regulations.',
+		stepsToFix: [
+			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
+			'Complete the identity verification process',
+			'Once finished, try signing in again',
+		],
+	},
+	{
+		errorCode: '2148916238',
+		whatHappened: 'This account is underage and not linked to a Microsoft family group.',
+		stepsToFix: [
+			'Review the <a href="https://help.minecraft.net/hc/en-us/articles/4408968616077">Family Setup Guide</a>',
+			'Join or create a family group as instructed',
+			'Once finished, try signing in again',
+		],
+	},
+	{
+		errorCode: '2148916227',
+		whatHappened: 'This account was suspended for violating Xbox Community Standards.',
+		stepsToFix: [
+			'Visit <a href="https://support.xbox.com">Xbox Support</a> and review the enforcement details',
+			'Submit an appeal if one is available',
+		],
+	},
+	{
+		errorCode: '2148916229',
+		whatHappened: "This account is restricted and doesn't have permission to play online.",
+		stepsToFix: [
+			'Have a guardian sign in to <a href="https://account.microsoft.com/family/">Microsoft Family</a>',
+			'Update online play permissions',
+			'Once finished, try signing in again',
+		],
+	},
+	{
+		errorCode: '2148916234',
+		whatHappened: "This account hasn't accepted Xbox's Terms of Service.",
+		stepsToFix: [
+			'Visit <a href="https://www.xbox.com">Xbox</a> and sign in',
+			'Accept the Terms if prompted',
+			'Once finished, try signing in again',
+		],
+	},
+]

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

@@ -3,16 +3,23 @@ import {
 	CoffeeIcon,
 	GameIcon,
 	GaugeIcon,
+	LanguagesIcon,
 	ModrinthIcon,
 	PaintbrushIcon,
 	ReportIcon,
 	SettingsIcon,
 	ShieldIcon,
 } from '@modrinth/assets'
-import { ProgressBar, TabbedModal } from '@modrinth/ui'
+import {
+	commonMessages,
+	defineMessage,
+	defineMessages,
+	ProgressBar,
+	TabbedModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
 import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
-import { defineMessage, defineMessages, useVIntl } from '@vintl/vintl'
 import { computed, ref, watch } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -20,6 +27,7 @@ import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
 import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
 import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
 import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
+import LanguageSettings from '@/components/ui/settings/LanguageSettings.vue'
 import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
 import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
 import { get, set } from '@/helpers/settings.ts'
@@ -46,6 +54,15 @@ const tabs = [
 		icon: PaintbrushIcon,
 		content: AppearanceSettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.language',
+			defaultMessage: 'Language',
+		}),
+		icon: LanguagesIcon,
+		content: LanguageSettings,
+		badge: commonMessages.beta,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.privacy',

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

@@ -0,0 +1,78 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
+			{{ formatMessage(messages.admonitionBody) }}
+		</Admonition>
+
+		<template #actions>
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-4" @click="modal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="red">
+					<button @click="confirm">
+						<TrashIcon />
+						{{ formatMessage(messages.deleteButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import { TrashIcon, XIcon } from '@modrinth/assets'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { ref } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	header: {
+		id: 'app.instance.confirm-delete.header',
+		defaultMessage: 'Delete instance',
+	},
+	admonitionHeader: {
+		id: 'app.instance.confirm-delete.admonition-header',
+		defaultMessage: 'This action cannot be undone',
+	},
+	admonitionBody: {
+		id: 'app.instance.confirm-delete.admonition-body',
+		defaultMessage:
+			'All data for your instance will be permanently deleted, including your worlds, configs, and all installed content.',
+	},
+	deleteButton: {
+		id: 'app.instance.confirm-delete.delete-button',
+		defaultMessage: 'Delete instance',
+	},
+})
+
+const emit = defineEmits<{
+	(e: 'delete'): void
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+function show() {
+	modal.value?.show()
+}
+
+function confirm() {
+	modal.value?.hide()
+	emit('delete')
+}
+
+defineExpose({
+	show,
+})
+</script>

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

@@ -1,13 +1,9 @@
+<!-- @deprecated Use ConfirmModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { ConfirmModal } from '@modrinth/ui'
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
-const props = defineProps({
+defineProps({
 	confirmationText: {
 		type: String,
 		default: '',
@@ -38,6 +34,7 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	/** @deprecated No longer used — ads are handled by provideModalBehavior */
 	showAdOnClose: {
 		type: Boolean,
 		default: true,
@@ -49,25 +46,17 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['proceed'])
-const modal = ref(null)
+const modal = useTemplateRef('modal')
 
 defineExpose({
 	show: () => {
-		hide_ads_window()
-		modal.value.show()
+		modal.value?.show()
 	},
 	hide: () => {
-		onModalHide()
-		modal.value.hide()
+		modal.value?.hide()
 	},
 })
 
-function onModalHide() {
-	if (props.showAdOnClose) {
-		show_ads_window()
-	}
-}
-
 function proceed() {
 	emit('proceed')
 }
@@ -82,8 +71,6 @@ function proceed() {
 		:description="description"
 		:proceed-icon="proceedIcon"
 		:proceed-label="proceedLabel"
-		:on-hide="onModalHide"
-		:noblur="!themeStore.advancedRendering"
 		:danger="danger"
 		:markdown="markdown"
 		@proceed="proceed"

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

@@ -0,0 +1,274 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
+		<div v-if="requiredContentProject" class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" :header="formatMessage(messages.contentRequired)">
+				{{ formatMessage(messages.serverRequiresMods) }}
+			</Admonition>
+
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-center">
+					<span class="font-semibold text-contrast">{{
+						formatMessage(messages.requiredModpack)
+					}}</span>
+
+					<ButtonStyled type="transparent">
+						<button @click="openViewContents">
+							<EyeIcon />
+							{{ formatMessage(messages.viewContents) }}
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex items-center gap-3 rounded-xl bg-surface-2 p-3">
+					<Avatar
+						:src="requiredContentProject.icon_url"
+						:alt="requiredContentProject.title"
+						size="48px"
+					/>
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">
+							<template v-if="usingCustomModpack && modpackVersion">
+								{{ modpackVersion.name }}
+							</template>
+							<template v-else>
+								{{ requiredContentProject.title }}
+							</template>
+						</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ requiredContentProject.game_versions?.[0] }}
+							<template v-if="modCount">
+								· {{ formatMessage(messages.modCount, { count: modCount }) }}
+							</template>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<DownloadIcon />
+						{{ formatMessage(messages.installButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+
+	<ModpackContentModal
+		ref="modpackContentModal"
+		:modpack-name="project?.name ?? ''"
+		:modpack-icon-url="project?.icon_url ?? undefined"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, EyeIcon, XIcon } from '@modrinth/assets'
+import type { ContentItem } from '@modrinth/ui'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	formatLoader,
+	ModpackContentModal,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
+import { hide_ads_window, show_ads_window } from '@/helpers/ads'
+import { get_project, get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { injectServerInstall } from '@/providers/server-install'
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
+const project = ref<Labrinth.Projects.v3.Project | null>(null)
+const requiredContentProject = ref<Labrinth.Projects.v2.Project | null>(null)
+const onInstallComplete = ref<() => void>(() => {})
+const { formatMessage } = useVIntl()
+const { installServerProject, startInstallingServer, stopInstallingServer } = injectServerInstall()
+
+const usingCustomModpack = computed(() => {
+	return requiredContentProject.value?.id === project.value?.id
+})
+
+const loaderDisplay = computed(() => {
+	const loader = requiredContentProject.value?.loaders?.[0]
+	if (!loader) return ''
+	return formatLoader(formatMessage, loader)
+})
+
+const modCount = computed(() => modpackVersion.value?.dependencies?.length)
+
+async function fetchData(versionId: string) {
+	// cache is making version null for some reason so bypassing for now
+	modpackVersion.value = await get_version(versionId, 'bypass')
+
+	if (modpackVersion.value?.project_id) {
+		requiredContentProject.value = await get_project(modpackVersion.value.project_id, 'bypass')
+	}
+}
+
+async function handleAccept() {
+	hide()
+	const serverProjectId = project.value?.id
+	startInstallingServer(serverProjectId)
+	try {
+		await installServerProject(serverProjectId)
+		onInstallComplete.value()
+	} catch (error) {
+		console.error('Failed to install server project from InstallToPlayModal:', error)
+	} finally {
+		stopInstallingServer(serverProjectId)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+const modpackContentModal = ref<InstanceType<typeof ModpackContentModal>>()
+
+async function openViewContents() {
+	modpackContentModal.value?.showLoading()
+	try {
+		// Ensure version data is available — the useQuery may not have resolved yet
+		const versionId = modpackVersionId.value
+		const version =
+			modpackVersion.value ?? (versionId ? await get_version(versionId, 'must_revalidate') : null)
+
+		const deps = version?.dependencies ?? []
+
+		const projectIds = deps
+			.map((d: { project_id?: string }) => d.project_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const versionIds = deps
+			.map((d: { version_id?: string }) => d.version_id)
+			.filter((id: string | undefined): id is string => !!id)
+
+		const projects: Labrinth.Projects.v2.Project[] =
+			projectIds.length > 0 ? await get_project_many(projectIds, 'must_revalidate') : []
+
+		const versions: Labrinth.Versions.v2.Version[] =
+			versionIds.length > 0 ? await get_version_many(versionIds, 'must_revalidate') : []
+
+		const projectMap = new Map(projects.map((p: Labrinth.Projects.v2.Project) => [p.id, p]))
+
+		const contentItems: ContentItem[] = deps.map(
+			(dep: Labrinth.Versions.v2.Dependency): ContentItem => {
+				const depProject = dep.project_id ? projectMap.get(dep.project_id) : null
+				// @ts-expect-error - version_id is missing from the type for some reason
+				const depVersion = dep.version_id
+					? // @ts-expect-error - version_id is missing from the type for some reason
+						versions.find((v: Labrinth.Versions.v2.Version) => v.id === dep.version_id)
+					: null
+
+				return {
+					file_name: dep.file_name ?? depProject?.title ?? 'Unknown',
+					project_type: depProject?.project_type ?? 'mod',
+					has_update: false,
+					update_version_id: null,
+					project: {
+						id: depProject?.id ?? dep.project_id ?? dep.file_name ?? 'unknown',
+						slug: depProject?.slug ?? dep.project_id ?? 'unknown',
+						title: depProject?.title ?? dep.file_name ?? 'Unknown',
+						icon_url: depProject?.icon_url ?? undefined,
+					},
+					...(depVersion
+						? {
+								version: {
+									id: depVersion.id,
+									file_name: depVersion.files?.[0]?.filename ?? dep.file_name,
+									version_number: depVersion.version_number ?? undefined,
+									date_published: depVersion.date_published ?? undefined,
+								},
+							}
+						: {}),
+				}
+			},
+		)
+		modpackContentModal.value?.show(contentItems)
+	} catch (err) {
+		console.error('Failed to load modpack contents:', err)
+		modpackContentModal.value?.show([])
+	}
+}
+
+async function show(
+	projectVal: Labrinth.Projects.v3.Project,
+	modpackVersionIdVal: string | null = null,
+	callback: () => void = () => {},
+	e?: MouseEvent,
+) {
+	project.value = projectVal
+	modpackVersionId.value = modpackVersionIdVal
+	modpackVersion.value = null
+	requiredContentProject.value = null
+	onInstallComplete.value = callback
+
+	if (modpackVersionIdVal) await fetchData(modpackVersionIdVal)
+
+	hide_ads_window()
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+	show_ads_window()
+}
+
+const messages = defineMessages({
+	installToPlay: {
+		id: 'app.modal.install-to-play.header',
+		defaultMessage: 'Install to play',
+	},
+	sharedServerInstance: {
+		id: 'app.modal.install-to-play.shared-server-instance',
+		defaultMessage: 'Shared server instance',
+	},
+	contentRequired: {
+		id: 'app.modal.install-to-play.content-required',
+		defaultMessage: 'Content required',
+	},
+	serverRequiresMods: {
+		id: 'app.modal.install-to-play.server-requires-mods',
+		defaultMessage:
+			'This server requires mods to play. Click Install to set up the required files from Modrinth, then launch directly into the server.',
+	},
+	requiredModpack: {
+		id: 'app.modal.install-to-play.required-modpack',
+		defaultMessage: 'Required modpack',
+	},
+	sharedInstance: {
+		id: 'app.modal.install-to-play.shared-instance',
+		defaultMessage: 'Shared instance',
+	},
+	modCount: {
+		id: 'app.modal.install-to-play.mod-count',
+		defaultMessage: '{count, plural, one {# mod} other {# mods}}',
+	},
+	installButton: {
+		id: 'app.modal.install-to-play.install-button',
+		defaultMessage: 'Install',
+	},
+	viewContents: {
+		id: 'app.modal.install-to-play.view-contents',
+		defaultMessage: 'View contents',
+	},
+})
+
+defineExpose({ show, hide })
+</script>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ChevronRightIcon,
 	CodeIcon,
@@ -7,25 +8,57 @@ import {
 	MonitorIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Avatar, TabbedModal, type TabbedModalTab } from '@modrinth/ui'
+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 { defineMessage, useVIntl } from '@vintl/vintl'
-import { ref } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
 import GeneralSettings from '@/components/ui/instance_settings/GeneralSettings.vue'
 import HooksSettings from '@/components/ui/instance_settings/HooksSettings.vue'
 import InstallationSettings from '@/components/ui/instance_settings/InstallationSettings.vue'
 import JavaSettings from '@/components/ui/instance_settings/JavaSettings.vue'
 import WindowSettings from '@/components/ui/instance_settings/WindowSettings.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { get_project_v3 } from '@/helpers/cache'
+import { get_linked_modpack_info } from '@/helpers/profile'
 
 import type { InstanceSettingsTabProps } from '../../../helpers/types'
 
 const { formatMessage } = useVIntl()
 
 const props = defineProps<InstanceSettingsTabProps>()
+const emit = defineEmits<{
+	unlinked: []
+}>()
 
-const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
+const isMinecraftServer = ref(false)
+const handleUnlinked = () => emit('unlinked')
+
+watch(
+	() => props.instance,
+	(instance) => {
+		isMinecraftServer.value = false
+		if (instance.linked_data?.project_id) {
+			get_project_v3(instance.linked_data.project_id, 'must_revalidate')
+				.then((project: Labrinth.Projects.v3.Project | undefined) => {
+					if (project?.minecraft_server != null) {
+						isMinecraftServer.value = true
+					}
+				})
+				.catch(() => {})
+		}
+	},
+	{ immediate: true },
+)
+
+const tabs = computed<TabbedModalTab<InstanceSettingsTabProps>[]>(() => [
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.general',
@@ -66,23 +99,33 @@ const tabs: TabbedModalTab<InstanceSettingsTabProps>[] = [
 		icon: CodeIcon,
 		content: HooksSettings,
 	},
-]
+])
 
+const queryClient = useQueryClient()
 const modal = ref()
+const tabbedModal = useTemplateRef('tabbedModal')
 
-function show() {
+function show(tabIndex?: number) {
+	if (props.instance.linked_data?.project_id) {
+		queryClient.prefetchQuery({
+			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryFn: () => get_linked_modpack_info(props.instance.path, 'stale_while_revalidate'),
+		})
+	}
 	modal.value.show()
+	if (tabIndex !== undefined) {
+		nextTick(() => tabbedModal.value?.setTab(tabIndex))
+	}
 }
 
 defineExpose({ show })
-
-const titleMessage = defineMessage({
-	id: 'instance.settings.title',
-	defaultMessage: 'Settings',
-})
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<NewModal
+		ref="modal"
+		:max-width="'min(928px, calc(95vw - 10rem))'"
+		:width="'min(928px, calc(95vw - 10rem))'"
+	>
 		<template #title>
 			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
 				<Avatar
@@ -91,10 +134,24 @@ const titleMessage = defineMessage({
 					:tint-by="props.instance.path"
 				/>
 				{{ instance.name }} <ChevronRightIcon />
-				<span class="font-extrabold text-contrast">{{ formatMessage(titleMessage) }}</span>
+				<span class="font-extrabold text-contrast">{{
+					formatMessage(commonMessages.settingsLabel)
+				}}</span>
 			</span>
 		</template>
 
-		<TabbedModal :tabs="tabs.map((tab) => ({ ...tab, props }))" />
-	</ModalWrapper>
+		<TabbedModal
+			ref="tabbedModal"
+			:tabs="
+				tabs.map((tab) => ({
+					...tab,
+					props: {
+						...props,
+						isMinecraftServer,
+						onUnlinked: handleUnlinked,
+					},
+				}))
+			"
+		/>
+	</NewModal>
 </template>

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

@@ -1,12 +1,8 @@
+<!-- @deprecated Use NewModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { NewModal as Modal } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
 const props = defineProps({
 	header: {
 		type: String,
@@ -26,6 +22,7 @@ const props = defineProps({
 			return () => {}
 		},
 	},
+	/** @deprecated No longer used — ads are handled by provideModalBehavior */
 	showAdOnClose: {
 		type: Boolean,
 		default: true,
@@ -35,31 +32,21 @@ const modal = useTemplateRef('modal')
 
 defineExpose({
 	show: (e: MouseEvent) => {
-		hide_ads_window()
 		modal.value?.show(e)
 	},
 	hide: () => {
-		onModalHide()
 		modal.value?.hide()
 	},
 })
-
-function onModalHide() {
-	if (props.showAdOnClose) {
-		show_ads_window()
-	}
-	props.onHide?.()
-}
 </script>
 
 <template>
 	<Modal
 		ref="modal"
 		:header="header"
-		:noblur="!themeStore.advancedRendering"
 		:closable="closable"
 		:hide-header="hideHeader"
-		@hide="onModalHide"
+		:on-hide="() => props.onHide?.()"
 	>
 		<template #title>
 			<slot name="title" />

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

@@ -1,12 +1,8 @@
+<!-- @deprecated Use ShareModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
 <script setup lang="ts">
 import { ShareModal } from '@modrinth/ui'
 import { ref } from 'vue'
 
-import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
-import { useTheming } from '@/store/theme.ts'
-
-const themeStore = useTheming()
-
 defineProps({
 	header: {
 		type: String,
@@ -34,18 +30,12 @@ const modal = ref(null)
 
 defineExpose({
 	show: (passedContent) => {
-		hide_ads_window()
 		modal.value.show(passedContent)
 	},
 	hide: () => {
-		onModalHide()
 		modal.value.hide()
 	},
 })
-
-function onModalHide() {
-	show_ads_window()
-}
 </script>
 
 <template>
@@ -56,7 +46,5 @@ function onModalHide() {
 		:share-text="shareText"
 		:link="link"
 		:open-in-new-tab="openInNewTab"
-		:on-hide="onModalHide"
-		:noblur="!themeStore.advancedRendering"
 	/>
 </template>

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

@@ -0,0 +1,308 @@
+<template>
+	<ContentDiffModal
+		ref="diffModal"
+		:header="formatMessage(messages.updateToPlay)"
+		:admonition-header="formatMessage(messages.updateRequired)"
+		:description="
+			instance ? formatMessage(messages.updateRequiredDescription, { name: instance.name }) : ''
+		"
+		:diffs="normalizedDiffs"
+		:confirm-label="formatMessage(commonMessages.updateButton)"
+		:confirm-icon="DownloadIcon"
+		:show-report-button="true"
+		@confirm="handleUpdate"
+		@cancel="handleDecline"
+		@report="handleReport"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon } from '@modrinth/assets'
+import {
+	commonMessages,
+	type ContentDiffItem,
+	ContentDiffModal,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import dayjs from 'dayjs'
+import { computed, ref, watch } from 'vue'
+
+import { get_project_many, get_version, get_version_many } from '@/helpers/cache.js'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+import { injectServerInstall } from '@/providers/server-install'
+
+type Dependency = Labrinth.Versions.v3.Dependency
+type Version = Labrinth.Versions.v2.Version
+
+interface BaseDiff {
+	project_id: string
+	project?: {
+		title: string
+		icon_url?: string
+		slug: string
+	}
+	currentVersionId?: string
+	newVersionId?: string
+	currentVersion?: Version
+	newVersion?: Version
+	fileName?: string
+}
+interface AddedDiff extends BaseDiff {
+	type: 'added'
+	newVersionId: string
+}
+interface RemovedDiff extends BaseDiff {
+	type: 'removed'
+}
+interface UpdatedDiff extends BaseDiff {
+	type: 'updated'
+	currentVersionId: string
+	newVersionId: string
+}
+type DependencyDiff = AddedDiff | RemovedDiff | UpdatedDiff
+
+type ProjectInfo = {
+	id: string
+	title: string
+	icon_url?: string
+	slug: string
+}
+
+const { formatMessage } = useVIntl()
+const { startInstallingServer, stopInstallingServer } = injectServerInstall()
+type UpdateCompleteCallback = () => void | Promise<void>
+
+const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const instance = ref<GameInstance | null>(null)
+const onUpdateComplete = ref<UpdateCompleteCallback>(() => {})
+const diffs = ref<DependencyDiff[]>([])
+const modpackVersionId = ref<string | null>(null)
+const modpackVersion = ref<Version | null>(null)
+
+const normalizedDiffs = computed<ContentDiffItem[]>(() =>
+	diffs.value.map((diff) => ({
+		type: diff.type,
+		projectName: diff.project?.title,
+		fileName: diff.fileName,
+		currentVersionName: diff.currentVersion?.version_number,
+		newVersionName: diff.newVersion?.version_number,
+	})),
+)
+
+async function computeDependencyDiffs(
+	currentDeps: Dependency[],
+	latestDeps: Dependency[],
+): Promise<DependencyDiff[]> {
+	console.log('Computing dependency diffs', { currentDeps, latestDeps })
+
+	// Separate deps with project_id from file_name-only deps
+	const currentWithProject = currentDeps.filter((d) => d.project_id)
+	const latestWithProject = latestDeps.filter((d) => d.project_id)
+	const currentFileOnly = currentDeps.filter((d) => !d.project_id && d.file_name)
+	const latestFileOnly = latestDeps.filter((d) => !d.project_id && d.file_name)
+
+	const currentByProject = new Map<string, Dependency>(
+		currentWithProject.map((d) => [d.project_id!, d]),
+	)
+	const latestByProject = new Map<string, Dependency>(
+		latestWithProject.map((d) => [d.project_id!, d]),
+	)
+	const currentFilenames = new Set(currentFileOnly.map((d) => d.file_name!))
+	const latestFilenames = new Set(latestFileOnly.map((d) => d.file_name!))
+
+	const diffs: DependencyDiff[] = []
+
+	// Find added and updated dependencies (by project_id)
+	latestByProject.forEach((latestDep, projectId) => {
+		const currentDep = currentByProject.get(projectId)
+		if (!currentDep && latestDep.version_id) {
+			diffs.push({ type: 'added', project_id: projectId, newVersionId: latestDep.version_id })
+		} else if (
+			currentDep?.version_id &&
+			latestDep?.version_id &&
+			currentDep?.version_id !== latestDep.version_id
+		) {
+			diffs.push({
+				type: 'updated',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+				newVersionId: latestDep.version_id,
+			})
+		}
+	})
+
+	// Find removed dependencies (by project_id)
+	currentByProject.forEach((currentDep, projectId) => {
+		if (!latestByProject.has(projectId)) {
+			diffs.push({
+				type: 'removed',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+			})
+		}
+	})
+
+	// Find added/removed file_name-only dependencies
+	// ideally in future, this should use the hash of the file instead of filename, but since version dependencies don't include file hashes, we'll use filename as a best effort approach
+	for (const fileName of latestFilenames) {
+		if (!currentFilenames.has(fileName)) {
+			diffs.push({ type: 'added', project_id: '', newVersionId: '' as string, fileName })
+		}
+	}
+	for (const fileName of currentFilenames) {
+		if (!latestFilenames.has(fileName)) {
+			diffs.push({ type: 'removed', project_id: '', fileName })
+		}
+	}
+
+	// Fetch projects and versions of diffs
+	const allProjectIds = [...new Set(diffs.map((d) => d.project_id).filter(Boolean))]
+	const allVersionIds = [
+		...new Set(
+			[...diffs.map((d) => d.newVersionId), ...diffs.map((d) => d.currentVersionId)].filter(
+				Boolean,
+			),
+		),
+	] as string[]
+	const [projects, versions] = await Promise.all([
+		get_project_many(allProjectIds, 'bypass'),
+		get_version_many(allVersionIds, 'bypass'),
+	])
+
+	const projectMap = new Map<string, ProjectInfo>(projects.map((p: ProjectInfo) => [p.id, p]))
+	const versionMap = new Map<string, Version>(versions.map((v: Version) => [v.id, v]))
+
+	const mappedDiffs = diffs
+		.map((diff) => {
+			const project = projectMap.get(diff.project_id)
+			return {
+				...diff,
+				project: project
+					? { title: project.title, icon_url: project.icon_url, slug: project.slug }
+					: undefined,
+				currentVersion: diff.currentVersionId ? versionMap.get(diff.currentVersionId) : undefined,
+				newVersion: diff.newVersionId ? versionMap.get(diff.newVersionId) : undefined,
+			}
+		})
+		.sort((a, b) => {
+			const typeOrder = { added: 0, updated: 1, removed: 2 }
+			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
+			if (typeCompare !== 0) return typeCompare
+
+			const aDate = a.newVersion?.date_published || a.currentVersion?.date_published || ''
+			const bDate = b.newVersion?.date_published || b.currentVersion?.date_published || ''
+			return dayjs(bDate).valueOf() - dayjs(aDate).valueOf()
+		})
+		.filter((d) => d.project || d.fileName) // filter out any diffs that couldn't be matched to a project or file
+	return mappedDiffs
+}
+
+async function checkUpdateAvailable(inst: GameInstance): Promise<DependencyDiff[] | null> {
+	if (!inst.linked_data) return null
+	if (!modpackVersionId.value || !inst.linked_data.version_id) return null
+
+	try {
+		// For server projects, linked_data.project_id is the server project but
+		// linked_data.version_id references a content modpack version from a different project.
+		// Detect this by comparing the version's project_id with linked_data.project_id.
+		modpackVersion.value = await get_version(modpackVersionId.value, 'bypass')
+		const instanceModpackVersion = await get_version(inst.linked_data.version_id, 'bypass')
+
+		// Compute dependency diffs between current and latest version
+		if (instanceModpackVersion && modpackVersion.value) {
+			return await computeDependencyDiffs(
+				instanceModpackVersion.dependencies || [],
+				modpackVersion.value.dependencies || [],
+			)
+		}
+	} catch (error) {
+		console.error('Error checking for updates:', error)
+		return null
+	}
+	return null
+}
+
+watch(
+	() => instance.value,
+	async (newInstance) => {
+		if (!newInstance) return
+		const result = await checkUpdateAvailable(newInstance)
+		diffs.value = result || []
+	},
+	{ immediate: true, deep: true },
+)
+
+async function handleUpdate() {
+	hide()
+	const serverProjectId = instance.value?.linked_data?.project_id
+	if (serverProjectId) startInstallingServer(serverProjectId)
+	try {
+		if (modpackVersionId.value && instance.value) {
+			await update_managed_modrinth_version(instance.value.path, modpackVersionId.value)
+			await onUpdateComplete.value()
+		}
+	} catch (error) {
+		console.error('Error updating instance:', error)
+	} finally {
+		if (serverProjectId) stopInstallingServer(serverProjectId)
+	}
+}
+
+function handleReport() {
+	if (instance.value?.linked_data?.project_id) {
+		openUrl(
+			`https://modrinth.com/report?item=project&itemID=${instance.value.linked_data.project_id}`,
+		)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(
+	instanceVal: GameInstance,
+	modpackVersionIdVal: string | null = null,
+	callback: UpdateCompleteCallback = () => {},
+	e?: MouseEvent,
+) {
+	instance.value = instanceVal
+	modpackVersionId.value = modpackVersionIdVal
+	onUpdateComplete.value = callback
+	diffModal.value?.show(e)
+}
+
+function hide() {
+	diffModal.value?.hide()
+}
+
+const messages = defineMessages({
+	updateToPlay: {
+		id: 'app.modal.update-to-play.header',
+		defaultMessage: 'Update to play',
+	},
+	updateRequired: {
+		id: 'app.modal.update-to-play.update-required',
+		defaultMessage: 'Update required',
+	},
+	updateRequiredDescription: {
+		id: 'app.modal.update-to-play.update-required-description',
+		defaultMessage:
+			'An update is required to play {name}. Please update to the latest version to launch the game.',
+	},
+})
+
+const hasUpdate = computed(() => {
+	if (!instance.value?.linked_data) return false
+	return (
+		modpackVersionId.value != null &&
+		modpackVersionId.value !== instance.value.linked_data.version_id
+	)
+})
+
+defineExpose({ show, hide, hasUpdate })
+</script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { injectNotificationManager, Slider, Toggle } from '@modrinth/ui'
+import { injectNotificationManager, Slider, StyledInput, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import useMemorySlider from '@/composables/useMemorySlider'
@@ -73,7 +73,7 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="width"
 				v-model="settings.game_resolution[0]"
 				:disabled="settings.force_fullscreen"
@@ -91,13 +91,12 @@ watch(
 				</p>
 			</div>
 
-			<input
+			<StyledInput
 				id="height"
 				v-model="settings.game_resolution[1]"
 				:disabled="settings.force_fullscreen"
 				autocomplete="off"
 				type="number"
-				class="input"
 				placeholder="Enter height..."
 			/>
 		</div>
@@ -118,23 +117,23 @@ watch(
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
-		<input
+		<StyledInput
 			id="java-args"
 			v-model="settings.launchArgs"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter java arguments..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
-		<input
+		<StyledInput
 			id="env-vars"
 			v-model="settings.envVars"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter environmental variables..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 
 		<hr class="mt-4 bg-button-border border-none h-[1px]" />
@@ -143,37 +142,37 @@ watch(
 
 		<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>
-		<input
+		<StyledInput
 			id="pre-launch"
 			v-model="settings.hooks.pre_launch"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter pre-launch command..."
-			class="w-full"
+			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>
-		<input
+		<StyledInput
 			id="wrapper"
 			v-model="settings.hooks.wrapper"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter wrapper command..."
-			class="w-full"
+			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>
-		<input
+		<StyledInput
 			id="post-exit"
 			v-model="settings.hooks.post_exit"
 			autocomplete="off"
 			type="text"
 			placeholder="Enter post-exit command..."
-			class="w-full"
+			wrapper-class="w-full"
 		/>
 	</div>
 </template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {
+	Admonition,
+	AutoLink,
+	IntlFormatted,
+	LanguageSelector,
+	languageSelectorMessages,
+	LOCALES,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref, watch } from 'vue'
+
+import { get, set } from '@/helpers/settings.ts'
+import i18n from '@/i18n.config'
+
+const { formatMessage } = useVIntl()
+
+const platform = computed(() => formatMessage(languageSelectorMessages.platformApp))
+
+const settings = ref(await get())
+
+watch(
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
+)
+
+const $isChanging = ref(false)
+
+async function onLocaleChange(newLocale: string) {
+	if (settings.value.locale === newLocale) return
+
+	$isChanging.value = true
+	try {
+		i18n.global.locale.value = newLocale
+		settings.value.locale = newLocale
+	} finally {
+		$isChanging.value = false
+	}
+}
+</script>
+
+<template>
+	<h2 class="m-0 text-lg font-extrabold text-contrast">Language</h2>
+
+	<Admonition type="warning" class="mt-2 mb-4">
+		{{ formatMessage(languageSelectorMessages.languageWarning, { platform }) }}
+	</Admonition>
+
+	<p class="m-0 mb-4">
+		<IntlFormatted
+			:message-id="languageSelectorMessages.languagesDescription"
+			:values="{ platform }"
+		>
+			<template #~crowdin-link="{ children }">
+				<AutoLink to="https://translate.modrinth.com">
+					<component :is="() => children" />
+				</AutoLink>
+			</template>
+		</IntlFormatted>
+	</p>
+
+	<LanguageSelector
+		:current-locale="settings.locale"
+		:locales="LOCALES"
+		:on-locale-change="onLocaleChange"
+		:is-changing="$isChanging"
+	/>
+</template>

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 } from '@modrinth/ui'
+import { Button, injectNotificationManager, Slider, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
@@ -28,10 +28,12 @@ watch(
 async function purgeCache() {
 	await purge_cache_types([
 		'project',
+		'project_v3',
 		'version',
 		'user',
 		'team',
 		'organization',
+		'file',
 		'loader_manifest',
 		'minecraft_manifest',
 		'categories',
@@ -39,8 +41,10 @@ async function purgeCache() {
 		'loaders',
 		'game_versions',
 		'donation_platforms',
+		'file_hash',
 		'file_update',
 		'search_results',
+		'search_results_v3',
 	]).catch(handleError)
 }
 
@@ -65,13 +69,19 @@ async function findLauncherDir() {
 	</p>
 
 	<div class="m-1 my-2">
-		<div class="iconified-input w-full">
-			<BoxIcon />
-			<input id="appDir" v-model="settings.custom_dir" type="text" class="input" />
-			<Button class="r-btn" @click="findLauncherDir">
-				<FolderSearchIcon />
-			</Button>
-		</div>
+		<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>
 
 	<div>

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

@@ -14,13 +14,13 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	SmartClickable,
+	useFormatDateTime,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { useVIntl } from '@vintl/vintl'
 import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -36,6 +36,10 @@ import { handleSevereError } from '@/store/error'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const router = useRouter()
 
@@ -80,7 +84,7 @@ const play = async (event: MouseEvent) => {
 	await run(props.instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: props.instance.loader,
 				game_version: props.instance.game_version,
 				source: 'InstanceItem',
@@ -145,18 +149,14 @@ onUnmounted(() => {
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							instance.last_played
-								? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
-								: null
-						"
+						v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
 					>
 						<template v-if="last_played">
 							{{
 								formatMessage(commonMessages.playedLabel, {
-									time: formatRelativeTime(last_played.toISOString?.()),
+									ago: formatRelativeTime(last_played.toISOString?.()),
 								})
 							}}
 						</template>

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

@@ -2,6 +2,7 @@
 import { LoaderCircleIcon } from '@modrinth/assets'
 import type { GameVersion } from '@modrinth/ui'
 import { GAME_MODES, HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import { platform } from '@tauri-apps/plugin-os'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -48,6 +49,11 @@ const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []
 const MIN_JUMP_BACK_IN = 3
 const MAX_JUMP_BACK_IN = 6
 const TWO_WEEKS_AGO = dayjs().subtract(14, 'day')
+const MAX_LINUX_POPULATES = 3
+
+// Track populate calls on Linux to prevent server ping spam
+const isLinux = platform() === 'linux'
+const linuxPopulateCount = ref(0)
 
 type BaseJumpBackInItem = {
 	last_played: Dayjs
@@ -82,6 +88,10 @@ populateJumpBackIn()
 	})
 
 async function populateJumpBackIn() {
+	// On Linux, limit automatic populates to prevent server ping spam
+	if (isLinux && linuxPopulateCount.value >= MAX_LINUX_POPULATES) return
+	if (isLinux) linuxPopulateCount.value++
+
 	console.info('Repopulating jump back in...')
 
 	const worldItems: WorldJumpBackInItem[] = []
@@ -165,10 +175,17 @@ function refreshServer(address: string, instancePath: string) {
 	refreshServerData(serverData.value[address], protocolVersions.value[instancePath], address)
 }
 
-async function joinWorld(world: WorldWithProfile) {
+async function joinWorld(world: WorldWithProfile, instance?: GameInstance) {
 	console.log(`Joining world ${getWorldIdentifier(world)}`)
 	if (world.type === 'server') {
 		await start_join_server(world.profile, world.address).catch(handleError)
+		if (instance) {
+			trackEvent('InstanceStart', {
+				loader: instance.loader,
+				game_version: instance.game_version,
+				source: 'WorldItem',
+			})
+		}
 	} else if (world.type === 'singleplayer') {
 		await start_join_singleplayer_world(world.profile, world.path).catch(handleError)
 	}
@@ -178,7 +195,7 @@ async function playInstance(instance: GameInstance) {
 	await run(instance.path)
 		.catch((err) => handleSevereError(err, { profilePath: instance.path }))
 		.finally(() => {
-			trackEvent('InstancePlay', {
+			trackEvent('InstanceStart', {
 				loader: instance.loader,
 				game_version: instance.game_version,
 				source: 'WorldItem',
@@ -230,6 +247,7 @@ const checkProcesses = async () => {
 
 onMounted(() => {
 	checkProcesses()
+	linuxPopulateCount.value = 0
 })
 
 onUnmounted(() => {
@@ -306,7 +324,7 @@ onUnmounted(() => {
 						() => {
 							currentProfile = item.instance.path
 							currentWorld = getWorldIdentifier(item.world)
-							joinWorld(item.world)
+							joinWorld(item.world, item.instance)
 						}
 					"
 					@play-instance="

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

@@ -17,18 +17,22 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
+import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	OverflowMenu,
 	SmartClickable,
+	TagItem,
+	useFormatDateTime,
+	useFormatNumber,
 	useRelativeTime,
+	useVIntl,
 } from '@modrinth/ui'
-import { formatNumber, getPingLevel } from '@modrinth/utils'
+import { getPingLevel } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import type { MessageDescriptor } from '@vintl/vintl'
-import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'
@@ -45,8 +49,15 @@ import type {
 } from '@/helpers/worlds.ts'
 import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.ts'
 
+import { LockIcon } from '../../../../../../packages/assets/generated-icons'
+
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatNumber = useFormatNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const router = useRouter()
 
@@ -77,6 +88,8 @@ const props = withDefaults(
 			message: MessageDescriptor
 		}
 
+		managed?: boolean
+
 		// Instance
 		instancePath?: string
 		instanceName?: string
@@ -95,6 +108,7 @@ const props = withDefaults(
 		renderedMotd: undefined,
 
 		gameMode: undefined,
+		managed: false,
 
 		instancePath: undefined,
 		instanceName: undefined,
@@ -116,6 +130,7 @@ const serverIncompatible = computed(
 )
 
 const locked = computed(() => props.world.type === 'singleplayer' && props.world.locked)
+const managed = computed(() => props.managed)
 
 const messages = defineMessages({
 	hardcore: {
@@ -170,6 +185,10 @@ const messages = defineMessages({
 		id: 'instance.worlds.dont_show_on_home',
 		defaultMessage: `Don't show on Home`,
 	},
+	linkedServer: {
+		id: 'instance.worlds.linked_server',
+		defaultMessage: 'Managed by server project',
+	},
 })
 </script>
 <template>
@@ -188,7 +207,9 @@ const messages = defineMessages({
 		>
 			<Avatar
 				:src="
-					world.type === 'server' && serverStatus ? serverStatus.favicon ?? world.icon : world.icon
+					world.type === 'server' && serverStatus
+						? (serverStatus.favicon ?? world.icon)
+						: world.icon
 				"
 				size="48px"
 			/>
@@ -197,6 +218,14 @@ const messages = defineMessages({
 					<div class="text-lg text-contrast font-bold truncate smart-clickable:underline-on-hover">
 						{{ world.name }}
 					</div>
+					<TagItem
+						v-if="managed"
+						v-tooltip="formatMessage(messages.linkedServer)"
+						class="border !border-solid border-blue bg-highlight-blue text-xs"
+						:style="`--_color: var(--color-blue)`"
+					>
+						<LockIcon aria-hidden="true" class="h-5 w-5" />
+					</TagItem>
 					<div
 						v-if="world.type === 'singleplayer'"
 						class="text-sm text-secondary flex items-center gap-1 font-semibold"
@@ -236,7 +265,7 @@ const messages = defineMessages({
 								/>
 								<Tooltip :disabled="!hasPlayersTooltip">
 									<span :class="{ 'cursor-help': hasPlayersTooltip }">
-										{{ formatNumber(serverStatus.players?.online, false) }}
+										{{ formatNumber(serverStatus.players?.online) }}
 										online
 									</span>
 									<template #popper>
@@ -257,9 +286,7 @@ const messages = defineMessages({
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
-						"
+						v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{
 							'cursor-help smart-clickable:allow-pointer-events': world.last_played,
@@ -268,7 +295,7 @@ const messages = defineMessages({
 						<template v-if="world.last_played">
 							{{
 								formatMessage(commonMessages.playedLabel, {
-									time: formatRelativeTime(dayjs(world.last_played).toISOString()),
+									ago: formatRelativeTime(dayjs(world.last_played).toISOString()),
 								})
 							}}
 						</template>
@@ -393,8 +420,12 @@ const messages = defineMessages({
 								id: 'edit',
 								action: () => emit('edit'),
 								shown: !instancePath,
-								disabled: locked,
-								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
 							},
 							{
 								id: 'open-folder',
@@ -429,8 +460,12 @@ const messages = defineMessages({
 								hoverFilled: true,
 								action: () => emit('delete'),
 								shown: !instancePath,
-								disabled: locked,
-								tooltip: locked ? formatMessage(messages.worldInUse) : undefined,
+								disabled: locked || managed,
+								tooltip: locked
+									? formatMessage(messages.worldInUse)
+									: managed
+										? formatMessage(messages.linkedServer)
+										: undefined,
 							},
 						]"
 					>

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { ref } from 'vue'
 
 import InstanceModalTitlePrefix from '@/components/ui/modal/InstanceModalTitlePrefix.vue'

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
+import {
+	ButtonStyled,
+	commonMessages,
+	defineMessage,
+	injectNotificationManager,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'

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

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, injectNotificationManager } from '@modrinth/ui'
-import { defineMessages, useVIntl } from '@vintl/vintl'
+import {
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -97,12 +104,11 @@ const messages = defineMessages({
 			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 				{{ formatMessage(messages.name) }}
 			</h2>
-			<input
+			<StyledInput
 				v-model="name"
-				type="text"
 				:placeholder="formatMessage(messages.placeholderName)"
-				class="w-full"
 				autocomplete="off"
+				wrapper-class="w-full"
 			/>
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
-import { defineMessage, useVIntl } from '@vintl/vintl'
+import { Checkbox, defineMessage, useVIntl } from '@modrinth/ui'
 import { computed } from 'vue'
 
 const { formatMessage } = useVIntl()

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

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { Combobox } from '@modrinth/ui'
-import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import {
+	Combobox,
+	defineMessages,
+	type MessageDescriptor,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 
@@ -53,22 +58,20 @@ defineExpose({ resourcePackOptions })
 		<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 			{{ formatMessage(messages.name) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="name"
-			type="text"
 			:placeholder="formatMessage(messages.placeholderName)"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.address) }}
 		</h2>
-		<input
+		<StyledInput
 			v-model="address"
-			type="text"
 			placeholder="example.modrinth.gg"
-			class="w-full"
 			autocomplete="off"
+			wrapper-class="w-full"
 		/>
 		<h2 class="text-lg font-extrabold text-contrast mt-3 mb-1">
 			{{ formatMessage(messages.resourcePack) }}

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

@@ -1,24 +0,0 @@
-import { posthog } from 'posthog-js'
-
-export const initAnalytics = () => {
-	posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
-		persistence: 'localStorage',
-		api_host: 'https://posthog.modrinth.com',
-	})
-}
-
-export const debugAnalytics = () => {
-	posthog.debug()
-}
-
-export const optOutAnalytics = () => {
-	posthog.opt_out_capturing()
-}
-
-export const optInAnalytics = () => {
-	posthog.opt_in_capturing()
-}
-
-export const trackEvent = (eventName, properties) => {
-	posthog.capture(eventName, properties)
-}

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

@@ -0,0 +1,80 @@
+import { posthog } from 'posthog-js'
+
+interface InstanceProperties {
+	loader: string
+	game_version: string
+}
+
+interface ProjectProperties extends InstanceProperties {
+	id: string
+	project_type: string
+}
+
+type AnalyticsEventMap = {
+	Launched: { version: string; dev: boolean; onboarded: boolean }
+	PageView: { path: string; fromPath: string; failed: unknown }
+	InstanceCreate: { source: string }
+	InstanceCreateStart: { source: string }
+	InstanceStart: InstanceProperties & { source: string }
+	InstanceStop: Partial<InstanceProperties> & { source?: string }
+	InstanceDuplicate: InstanceProperties
+	InstanceRepair: InstanceProperties
+	InstanceSetIcon: Record<string, never>
+	InstanceRemoveIcon: Record<string, never>
+	InstanceUpdateAll: InstanceProperties & { count: number; selected: boolean }
+	InstanceProjectUpdate: InstanceProperties & { id: string; name: string; project_type: string }
+	InstanceProjectDisable: InstanceProperties & {
+		id: string
+		name: string
+		project_type: string
+		disabled: boolean
+	}
+	InstanceProjectRemove: InstanceProperties & { id: string; name: string; project_type: string }
+	ProjectInstall: ProjectProperties & { version_id: string; title: string; source: string }
+	ProjectInstallStart: { source: string }
+	PackInstall: { id: string; version_id: string; title: string; source: string }
+	PackInstallStart: Record<string, never>
+	AccountLogIn: { source?: string }
+	AccountLogOut: Record<string, never>
+	JavaTest: { path: string; success: boolean }
+	JavaManualSelect: { version: string }
+	JavaAutoDetect: { path: string; version: string }
+}
+
+export type AnalyticsEvent = keyof AnalyticsEventMap
+
+let initialized = false
+
+export const initAnalytics = () => {
+	if (initialized) return
+	posthog.init('phc_9Iqi6lFs9sr5BSqh9RRNRSJ0mATS9PSgirDiX3iOYJ', {
+		persistence: 'localStorage',
+		api_host: 'https://posthog.modrinth.com',
+	})
+	initialized = true
+}
+
+export const debugAnalytics = () => {
+	if (!initialized) return
+	posthog.debug()
+}
+
+export const optOutAnalytics = () => {
+	if (!initialized) return
+	posthog.opt_out_capturing()
+}
+
+export const optInAnalytics = () => {
+	initAnalytics()
+	posthog.opt_in_capturing()
+}
+
+type OptionalArgs<T> = Record<string, never> extends T ? [properties?: T] : [properties: T]
+
+export const trackEvent = <E extends AnalyticsEvent>(
+	eventName: E,
+	...args: OptionalArgs<AnalyticsEventMap[E]>
+) => {
+	if (!initialized) return
+	posthog.capture(eventName, args[0])
+}

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

@@ -8,6 +8,14 @@ export async function get_project_many(ids, cacheBehaviour) {
 	return await invoke('plugin:cache|get_project_many', { ids, cacheBehaviour })
 }
 
+export async function get_project_v3(id, cacheBehaviour) {
+	return await invoke('plugin:cache|get_project_v3', { id, cacheBehaviour })
+}
+
+export async function get_project_v3_many(ids, cacheBehaviour) {
+	return await invoke('plugin:cache|get_project_v3_many', { ids, cacheBehaviour })
+}
+
 export async function get_version(id, cacheBehaviour) {
 	return await invoke('plugin:cache|get_version', { id, cacheBehaviour })
 }
@@ -48,6 +56,28 @@ export async function get_search_results_many(ids, cacheBehaviour) {
 	return await invoke('plugin:cache|get_search_results_many', { ids, cacheBehaviour })
 }
 
+export async function get_search_results_v3(id, cacheBehaviour) {
+	return await invoke('plugin:cache|get_search_results_v3', { id, cacheBehaviour })
+}
+
+export async function get_search_results_v3_many(ids, cacheBehaviour) {
+	return await invoke('plugin:cache|get_search_results_v3_many', { ids, cacheBehaviour })
+}
+
 export async function purge_cache_types(cacheTypes) {
 	return await invoke('plugin:cache|purge_cache_types', { cacheTypes })
 }
+
+/**
+ * Get versions for a project (without changelogs for fast loading).
+ * Uses the cache system - versions are cached for 30 minutes.
+ * @param {string} projectId - The project ID
+ * @param {string} [cacheBehaviour] - Cache behaviour ('must_revalidate', etc.)
+ * @returns {Promise<Array|null>} Array of version objects (without changelogs) or null
+ */
+export async function get_project_versions(projectId, cacheBehaviour) {
+	return await invoke('plugin:cache|get_project_versions', {
+		projectId,
+		cacheBehaviour,
+	})
+}

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

@@ -1,18 +0,0 @@
-import { getVersion } from '@tauri-apps/api/app'
-import { fetch } from '@tauri-apps/plugin-http'
-
-export const useFetch = async (url, item, isSilent) => {
-	try {
-		const version = await getVersion()
-		return await fetch(url, {
-			method: 'GET',
-			headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
-		})
-	} catch (err) {
-		if (!isSilent) {
-			throw err
-		} else {
-			console.error(err)
-		}
-	}
-}

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

@@ -1,65 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-import { create } from './profile'
-
-// Installs pack from a version ID
-export async function create_profile_and_install(
-	projectId,
-	versionId,
-	packTitle,
-	iconUrl,
-	createInstanceCallback = () => {},
-) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title: packTitle,
-		icon_url: iconUrl,
-	}
-	const profile_creator = await invoke('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,
-	)
-	createInstanceCallback(profile)
-
-	return await invoke('plugin:pack|pack_install', { location, profile })
-}
-
-export async function install_to_existing_profile(projectId, versionId, title, profilePath) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title,
-	}
-	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
-}
-
-// Installs pack from a path
-export async function create_profile_and_install_from_file(path) {
-	const location = {
-		type: 'fromFile',
-		path: path,
-	}
-	const profile_creator = await invoke('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 })
-}

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

@@ -0,0 +1,90 @@
+import { invoke } from '@tauri-apps/api/core'
+
+import { create } from './profile'
+import type { InstanceLoader } from './types'
+
+interface PackProfileCreator {
+	name: string
+	gameVersion: string
+	modloader: InstanceLoader
+	loaderVersion: string | null
+}
+
+interface PackLocationVersionId {
+	type: 'fromVersionId'
+	project_id: string
+	version_id: string
+	title: string
+	icon_url?: string
+}
+
+interface PackLocationFile {
+	type: 'fromFile'
+	path: string
+}
+
+export async function create_profile_and_install(
+	projectId: string,
+	versionId: string,
+	packTitle: string,
+	iconUrl?: string,
+	createInstanceCallback: (profile: string) => void = () => {},
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title: packTitle,
+		icon_url: iconUrl,
+	}
+	const profile_creator = await invoke<PackProfileCreator>(
+		'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,
+	)
+	createInstanceCallback(profile)
+
+	return await invoke('plugin:pack|pack_install', { location, profile })
+}
+
+export async function install_to_existing_profile(
+	projectId: string,
+	versionId: string,
+	title: string,
+	profilePath: string,
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title,
+	}
+	return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
+}
+
+export async function create_profile_and_install_from_file(path: string): Promise<void> {
+	const location: PackLocationFile = {
+		type: 'fromFile',
+		path,
+	}
+	const profile_creator = await invoke<PackProfileCreator>(
+		'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 })
+}

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

@@ -1,207 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- *  and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-import { install_to_existing_profile } from '@/helpers/pack.js'
-
-/// Add instance
-/*
-    name: String,           // the name of the profile, and relative path to create
-    game_version: String,   // the game version of the profile
-    modloader: ModLoader,   // the modloader to use
-    - ModLoader is an enum, with the following variants: Vanilla, Forge, Fabric, Quilt
-    loader_version: String, // the modloader version to use, set to "latest", "stable", or the ID of your chosen loader
-    icon: Path,  // the icon for the profile
-    - icon is a path to an image file, which will be copied into the profile directory
-*/
-
-export async function create(name, gameVersion, modloader, loaderVersion, icon, skipInstall) {
-	//Trim string name to avoid "Unable to find directory"
-	name = name.trim()
-	return await invoke('plugin:profile-create|profile_create', {
-		name,
-		gameVersion,
-		modloader,
-		loaderVersion,
-		icon,
-		skipInstall,
-	})
-}
-
-// duplicate a profile
-export async function duplicate(path) {
-	return await invoke('plugin:profile-create|profile_duplicate', { path })
-}
-
-// Remove a profile
-export async function remove(path) {
-	return await invoke('plugin:profile|profile_remove', { path })
-}
-
-// Get a profile by path
-// Returns a Profile
-export async function get(path) {
-	return await invoke('plugin:profile|profile_get', { path })
-}
-
-export async function get_many(paths) {
-	return await invoke('plugin:profile|profile_get_many', { paths })
-}
-
-// Get a profile's projects
-// Returns a map of a path to profile file
-export async function get_projects(path, cacheBehaviour) {
-	return await invoke('plugin:profile|profile_get_projects', { path, cacheBehaviour })
-}
-
-// Get a profile's full fs path
-// Returns a path
-export async function get_full_path(path) {
-	return await invoke('plugin:profile|profile_get_full_path', { path })
-}
-
-// Get's a mod's full fs path
-// Returns a path
-export async function get_mod_full_path(path, projectPath) {
-	return await invoke('plugin:profile|profile_get_mod_full_path', { path, projectPath })
-}
-
-// Get optimal java version from profile
-// Returns a java version
-export async function get_optimal_jre_key(path) {
-	return await invoke('plugin:profile|profile_get_optimal_jre_key', { path })
-}
-
-// Get a copy of the profile set
-// Returns hashmap of path -> Profile
-export async function list() {
-	return await invoke('plugin:profile|profile_list')
-}
-
-export async function check_installed(path, projectId) {
-	return await invoke('plugin:profile|profile_check_installed', { path, projectId })
-}
-
-// Installs/Repairs a profile
-export async function install(path, force) {
-	return await invoke('plugin:profile|profile_install', { path, force })
-}
-
-// Updates all of a profile's projects
-export async function update_all(path) {
-	return await invoke('plugin:profile|profile_update_all', { path })
-}
-
-// Updates a specified project
-export async function update_project(path, projectPath) {
-	return await invoke('plugin:profile|profile_update_project', { path, projectPath })
-}
-
-// 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, versionId) {
-	return await invoke('plugin:profile|profile_add_project_from_version', { path, versionId })
-}
-
-// Add a project to a profile from a path + project_type
-// Returns a path to the new project file
-export async function add_project_from_path(path, projectPath, projectType) {
-	return await invoke('plugin:profile|profile_add_project_from_path', {
-		path,
-		projectPath,
-		projectType,
-	})
-}
-
-// Toggle disabling a project
-export async function toggle_disable_project(path, projectPath) {
-	return await invoke('plugin:profile|profile_toggle_disable_project', { path, projectPath })
-}
-
-// Remove a project
-export async function remove_project(path, projectPath) {
-	return await invoke('plugin:profile|profile_remove_project', { path, projectPath })
-}
-
-// Update a managed Modrinth profile to a specific version
-export async function update_managed_modrinth_version(path, versionId) {
-	return await invoke('plugin:profile|profile_update_managed_modrinth_version', {
-		path,
-		versionId,
-	})
-}
-
-// Repair a managed Modrinth profile
-export async function update_repair_modrinth(path) {
-	return await invoke('plugin:profile|profile_repair_managed_modrinth', { path })
-}
-
-// Export a profile to .mrpack
-/// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
-// Version id is optional (ie: 1.1.5)
-export async function export_profile_mrpack(
-	path,
-	exportLocation,
-	includedOverrides,
-	versionId,
-	description,
-	name,
-) {
-	return await invoke('plugin:profile|profile_export_mrpack', {
-		path,
-		exportLocation,
-		includedOverrides,
-		versionId,
-		description,
-		name,
-	})
-}
-
-// Given a folder path, populate an array of all the subfolders
-// Intended to be used for finding potential override folders
-// profile
-// -- mods
-// -- resourcepacks
-// -- file1
-// => [mods, resourcepacks]
-// allows selection for 'included_overrides' in export_profile_mrpack
-export async function get_pack_export_candidates(profilePath) {
-	return await invoke('plugin:profile|profile_get_pack_export_candidates', { profilePath })
-}
-
-// Run Minecraft using a pathed profile
-// Returns PID of child
-export async function run(path) {
-	return await invoke('plugin:profile|profile_run', { path })
-}
-
-export async function kill(path) {
-	return await invoke('plugin:profile|profile_kill', { path })
-}
-
-// Edits a profile
-export async function edit(path, editProfile) {
-	return await invoke('plugin:profile|profile_edit', { path, editProfile })
-}
-
-// Edits a profile's icon
-export async function edit_icon(path, iconPath) {
-	return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
-}
-
-export async function finish_install(instance) {
-	if (instance.install_stage !== 'pack_installed') {
-		let linkedData = instance.linked_data
-		await install_to_existing_profile(
-			linkedData.project_id,
-			linkedData.version_id,
-			instance.name,
-			instance.path,
-		)
-	} else {
-		await install(instance.path, false)
-	}
-}

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

@@ -0,0 +1,298 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import type { Labrinth } from '@modrinth/api-client'
+import type { ContentItem, ContentOwner } from '@modrinth/ui'
+import { invoke } from '@tauri-apps/api/core'
+
+import { install_to_existing_profile } from '@/helpers/pack'
+
+import type {
+	CacheBehaviour,
+	ContentFile,
+	ContentFileProjectType,
+	GameInstance,
+	InstanceLoader,
+} from './types'
+
+// Add instance
+/*
+    name: String,           // the name of the profile, and relative path to create
+    game_version: String,   // the game version of the profile
+    modloader: ModLoader,   // the modloader to use
+    - ModLoader is an enum, with the following variants: Vanilla, Forge, Fabric, Quilt
+    loader_version: String, // the modloader version to use, set to "latest", "stable", or the ID of your chosen loader
+    icon: Path,  // the icon for the profile
+    - icon is a path to an image file, which will be copied into the profile directory
+*/
+
+export async function create(
+	name: string,
+	gameVersion: string,
+	modloader: InstanceLoader,
+	loaderVersion: string | null,
+	icon: string | null,
+	skipInstall: boolean,
+	linkedData?: { project_id: string; version_id: string; locked: boolean } | null,
+): Promise<string> {
+	// Trim string name to avoid "Unable to find directory"
+	name = name.trim()
+	return await invoke('plugin:profile-create|profile_create', {
+		name,
+		gameVersion,
+		modloader,
+		loaderVersion,
+		icon,
+		skipInstall,
+		linkedData,
+	})
+}
+
+// duplicate a profile
+export async function duplicate(path: string): Promise<string> {
+	return await invoke('plugin:profile-create|profile_duplicate', { path })
+}
+
+// Remove a profile
+export async function remove(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_remove', { path })
+}
+
+// Get a profile by path
+// Returns a Profile
+export async function get(path: string): Promise<GameInstance | null> {
+	return await invoke('plugin:profile|profile_get', { path })
+}
+
+export async function get_many(paths: string[]): Promise<GameInstance[]> {
+	return await invoke('plugin:profile|profile_get_many', { paths })
+}
+
+// Get a profile's projects
+// Returns a map of a path to profile file
+export async function get_projects(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<Record<string, ContentFile>> {
+	return await invoke('plugin:profile|profile_get_projects', { path, cacheBehaviour })
+}
+
+// Get just the installed project IDs for a profile (lightweight, skips update checks)
+export async function get_installed_project_ids(path: string): Promise<string[]> {
+	return await invoke('plugin:profile|profile_get_installed_project_ids', { path })
+}
+
+// Get content items with rich metadata for a profile
+// Returns content items filtered to exclude modpack files (if linked),
+// sorted alphabetically by project name
+export async function get_content_items(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_content_items', { path, cacheBehaviour })
+}
+
+// Linked modpack info returned from backend
+export interface LinkedModpackInfo {
+	project: Labrinth.Projects.v2.Project
+	version: Labrinth.Versions.v2.Version
+	owner: ContentOwner | null
+	has_update: boolean
+	update_version_id: string | null
+	update_version: Labrinth.Versions.v2.Version | null
+}
+
+// Get linked modpack info for a profile
+// Returns project, version, and owner information for the linked modpack,
+// or null if the profile is not linked to a modpack
+export async function get_linked_modpack_info(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<LinkedModpackInfo | null> {
+	return await invoke('plugin:profile|profile_get_linked_modpack_info', { path, cacheBehaviour })
+}
+
+// Get content items that are part of the linked modpack
+// Returns the modpack's dependencies as ContentItem list
+// Returns empty array if the profile is not linked to a modpack
+export async function get_linked_modpack_content(
+	path: string,
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_linked_modpack_content', { path, cacheBehaviour })
+}
+
+// Convert a list of dependencies into ContentItems with rich metadata
+export async function get_dependencies_as_content_items(
+	dependencies: Labrinth.Versions.v3.Dependency[],
+	cacheBehaviour?: CacheBehaviour,
+): Promise<ContentItem[]> {
+	return await invoke('plugin:profile|profile_get_dependencies_as_content_items', {
+		dependencies,
+		cacheBehaviour,
+	})
+}
+
+// Get a profile's full fs path
+// Returns a path
+export async function get_full_path(path: string): Promise<string> {
+	return await invoke('plugin:profile|profile_get_full_path', { path })
+}
+
+// Get's a mod's full fs path
+// Returns a path
+export async function get_mod_full_path(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_get_mod_full_path', { path, projectPath })
+}
+
+// Get optimal java version from profile
+// Returns a java version
+export async function get_optimal_jre_key(path: string): Promise<string | null> {
+	return await invoke('plugin:profile|profile_get_optimal_jre_key', { path })
+}
+
+// Get a copy of the profile set
+// Returns hashmap of path -> Profile
+export async function list(): Promise<GameInstance[]> {
+	return await invoke('plugin:profile|profile_list')
+}
+
+export async function check_installed(path: string, projectId: string): Promise<boolean> {
+	return await invoke('plugin:profile|profile_check_installed', { path, projectId })
+}
+
+export async function check_installed_batch(projectId: string): Promise<Record<string, boolean>> {
+	return await invoke('plugin:profile|profile_check_installed_batch', { projectId })
+}
+
+// Installs/Repairs a profile
+export async function install(path: string, force: boolean): Promise<void> {
+	return await invoke('plugin:profile|profile_install', { path, force })
+}
+
+// Updates all of a profile's projects
+export async function update_all(path: string): Promise<Record<string, string>> {
+	return await invoke('plugin:profile|profile_update_all', { path })
+}
+
+// Updates a specified project
+export async function update_project(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_update_project', { path, projectPath })
+}
+
+// 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 })
+}
+
+// Add a project to a profile from a path + project_type
+// Returns a path to the new project file
+export async function add_project_from_path(
+	path: string,
+	projectPath: string,
+	projectType?: ContentFileProjectType,
+): Promise<string> {
+	return await invoke('plugin:profile|profile_add_project_from_path', {
+		path,
+		projectPath,
+		projectType,
+	})
+}
+
+// Toggle disabling a project
+export async function toggle_disable_project(path: string, projectPath: string): Promise<string> {
+	return await invoke('plugin:profile|profile_toggle_disable_project', { path, projectPath })
+}
+
+// Remove a project
+export async function remove_project(path: string, projectPath: string): Promise<void> {
+	return await invoke('plugin:profile|profile_remove_project', { path, projectPath })
+}
+
+// Update a managed Modrinth profile to a specific version
+export async function update_managed_modrinth_version(
+	path: string,
+	versionId: string,
+): Promise<void> {
+	return await invoke('plugin:profile|profile_update_managed_modrinth_version', {
+		path,
+		versionId,
+	})
+}
+
+// Repair a managed Modrinth profile
+export async function update_repair_modrinth(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_repair_managed_modrinth', { path })
+}
+
+// Export a profile to .mrpack
+// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
+// Version id is optional (ie: 1.1.5)
+export async function export_profile_mrpack(
+	path: string,
+	exportLocation: string,
+	includedOverrides: string[],
+	versionId?: string,
+	description?: string,
+	name?: string,
+): Promise<void> {
+	return await invoke('plugin:profile|profile_export_mrpack', {
+		path,
+		exportLocation,
+		includedOverrides,
+		versionId,
+		description,
+		name,
+	})
+}
+
+// Given a folder path, populate an array of all the subfolders
+// Intended to be used for finding potential override folders
+// profile
+// -- mods
+// -- resourcepacks
+// -- file1
+// => [mods, resourcepacks]
+// allows selection for 'included_overrides' in export_profile_mrpack
+export async function get_pack_export_candidates(profilePath: string): Promise<string[]> {
+	return await invoke('plugin:profile|profile_get_pack_export_candidates', { profilePath })
+}
+
+// Run Minecraft using a pathed profile
+// Returns PID of child
+export async function run(path: string, serverAddress: string | null = null): Promise<unknown> {
+	return await invoke('plugin:profile|profile_run', { path, serverAddress })
+}
+
+export async function kill(path: string): Promise<void> {
+	return await invoke('plugin:profile|profile_kill', { path })
+}
+
+// Edits a profile
+export async function edit(path: string, editProfile: Partial<GameInstance>): Promise<void> {
+	return await invoke('plugin:profile|profile_edit', { path, editProfile })
+}
+
+// Edits a profile's icon
+export async function edit_icon(path: string, iconPath: string | null): Promise<void> {
+	return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
+}
+
+export async function finish_install(instance: GameInstance): Promise<void> {
+	if (instance.install_stage !== 'pack_installed') {
+		const linkedData = instance.linked_data
+		if (linkedData) {
+			await install_to_existing_profile(
+				linkedData.project_id,
+				linkedData.version_id,
+				instance.name,
+				instance.path,
+			)
+		}
+	} else {
+		await install(instance.path, false)
+	}
+}

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

@@ -36,6 +36,7 @@ export type AppSettings = {
 	max_concurrent_writes: number
 
 	theme: ColorTheme
+	locale: string
 	default_page: 'home' | 'library'
 	collapsed_navigation: boolean
 	hide_nametag_skins_page: boolean

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

@@ -49,17 +49,10 @@ type LinkedData = {
 type InstanceLoader = 'vanilla' | 'forge' | 'fabric' | 'quilt' | 'neoforge'
 
 type ContentFile = {
-	hash: string
-	file_name: string
-	size: number
-	metadata?: FileMetadata
-	update_version_id?: string
-	project_type: ContentFileProjectType
-}
-
-type FileMetadata = {
-	project_id: string
-	version_id: string
+	metadata?: {
+		project_id: string
+		version_id: string
+	}
 }
 
 type ContentFileProjectType = 'mod' | 'datapack' | 'resourcepack' | 'shaderpack'
@@ -139,4 +132,5 @@ type AppSettings = {
 export type InstanceSettingsTabProps = {
 	instance: GameInstance
 	offline?: boolean
+	isMinecraftServer?: boolean
 }

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

@@ -141,7 +141,12 @@ export async function add_server_to_profile(
 	address: string,
 	packStatus: ServerPackStatus,
 ): Promise<number> {
-	return await invoke('plugin:worlds|add_server_to_profile', { path, name, address, packStatus })
+	return await invoke('plugin:worlds|add_server_to_profile', {
+		path,
+		name,
+		address,
+		packStatus,
+	})
 }
 
 export async function edit_server_in_profile(
@@ -212,6 +217,150 @@ export function isServerWorld(world: World): world is ServerWorld {
 	return world.type === 'server'
 }
 
+const DEFAULT_MINECRAFT_SERVER_PORT = 25565
+
+function parseServerPort(port: string): number | null {
+	const parsed = Number.parseInt(port, 10)
+	return Number.isInteger(parsed) && parsed > 0 && parsed <= 65535 ? parsed : null
+}
+
+function parseServerHost(address: string): string {
+	const trimmedAddress = address.trim()
+	if (!trimmedAddress) return ''
+
+	if (trimmedAddress.startsWith('[')) {
+		const closingBracket = trimmedAddress.indexOf(']')
+		if (closingBracket > 0) {
+			return trimmedAddress.slice(1, closingBracket).trim().toLowerCase()
+		}
+	}
+
+	const firstColon = trimmedAddress.indexOf(':')
+	const lastColon = trimmedAddress.lastIndexOf(':')
+
+	if (firstColon !== -1 && firstColon === lastColon) {
+		return trimmedAddress.slice(0, firstColon).trim().toLowerCase()
+	}
+
+	return trimmedAddress.toLowerCase()
+}
+
+function isIPv4Host(host: string): boolean {
+	const segments = host.split('.')
+	if (segments.length !== 4) return false
+
+	return segments.every((segment) => {
+		if (!/^\d+$/.test(segment)) return false
+		const value = Number.parseInt(segment, 10)
+		return value >= 0 && value <= 255
+	})
+}
+
+/**
+ * Normalization converts addresses to a canonical form (lowercase-host:port, default port 25565)
+ */
+export function normalizeServerAddress(address: string): string {
+	const trimmedAddress = address.trim()
+	const host = parseServerHost(trimmedAddress)
+	if (!host) return ''
+	let port = DEFAULT_MINECRAFT_SERVER_PORT
+
+	// ipv6 address
+	if (trimmedAddress.startsWith('[')) {
+		const closingBracket = trimmedAddress.indexOf(']')
+		if (closingBracket > 0) {
+			const suffix = trimmedAddress.slice(closingBracket + 1)
+			if (suffix.startsWith(':')) {
+				const parsedPort = parseServerPort(suffix.slice(1))
+				if (parsedPort != null) {
+					port = parsedPort
+				}
+			}
+		}
+
+		// ipv4 address or hostname
+	} else {
+		const firstColon = trimmedAddress.indexOf(':')
+		const lastColon = trimmedAddress.lastIndexOf(':')
+		if (firstColon !== -1 && firstColon === lastColon) {
+			const parsedPort = parseServerPort(trimmedAddress.slice(firstColon + 1))
+			if (parsedPort != null) {
+				port = parsedPort
+			}
+		}
+	}
+
+	return `${host}:${port}`
+}
+
+/**
+ * Domain key used for deduping server entries by removing a single leading subdomain.
+ * Example: test.cobblemon.gg and cobblemon.gg map to cobblemon.gg
+ */
+export function getServerDomainKey(address: string): string {
+	const normalizedAddress = normalizeServerAddress(address)
+	if (!normalizedAddress) return ''
+
+	const separator = normalizedAddress.lastIndexOf(':')
+	if (separator <= 0 || separator === normalizedAddress.length - 1) return normalizedAddress
+
+	const host = normalizedAddress.slice(0, separator).replace(/\.+$/, '')
+	if (!host) return normalizedAddress
+	if (host.includes(':') || isIPv4Host(host)) return normalizedAddress
+
+	const segments = host.split('.').filter(Boolean)
+	if (segments.length <= 2) return host
+
+	return segments.slice(1).join('.')
+}
+
+export function resolveManagedServerWorld(
+	worlds: World[],
+	managedName: string | null | undefined,
+	managedAddress: string | null | undefined,
+): ServerWorld | null {
+	if (!managedName || !managedAddress) return null
+
+	const normalizedManagedAddress = normalizeServerAddress(managedAddress)
+	if (!normalizedManagedAddress) return null
+
+	const servers = worlds
+		.filter(isServerWorld)
+		.slice()
+		.sort((a, b) => a.index - b.index)
+
+	const exactMatch = servers.find(
+		(server) =>
+			server.name === managedName &&
+			normalizeServerAddress(server.address) === normalizedManagedAddress,
+	)
+	if (exactMatch) return exactMatch
+
+	return (
+		servers.find((server) => normalizeServerAddress(server.address) === normalizedManagedAddress) ??
+		null
+	)
+}
+
+export async function getServerLatency(
+	address: string,
+	protocolVersion: ProtocolVersion | null = null,
+): Promise<number | undefined> {
+	const pings: number[] = []
+	for (let i = 0; i < 3; i++) {
+		try {
+			const status = await get_server_status(address, protocolVersion)
+			if (status.ping != null) {
+				pings.push(status.ping)
+			}
+		} catch {
+			// Ignore individual ping failures
+		}
+	}
+	if (pings.length === 0) return undefined
+	return Math.round(pings.reduce((sum, p) => sum + p, 0) / pings.length)
+}
+
 export async function refreshServerData(
 	serverData: ServerData,
 	protocolVersion: ProtocolVersion | null,

apps/app-frontend/src/i18n.config.ts

@@ -0,0 +1,19 @@
+import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+import { uiLocaleModulesEager } from '@modrinth/ui/src/locales.eager.ts'
+import { createI18n } from 'vue-i18n'
+
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>('./locales/*/index.json', {
+	eager: true,
+})
+
+const i18n = createI18n({
+	legacy: false,
+	locale: 'en-US',
+	fallbackLocale: 'en-US',
+	messageCompiler: createMessageCompiler(),
+	missingWarn: false,
+	fallbackWarn: false,
+	messages: buildLocaleMessages(localeModules, uiLocaleModulesEager),
+})
+
+export default i18n

apps/app-frontend/src/locales/af-ZA/index.json

@@ -1,305 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Ontwikkelaarmodus geaktiveer."
-  },
-  "app.settings.downloading": {
-    "message": "Aflaai v{version}"
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Voorkoms"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Verstek instansie opsies"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "Kenmerk vlae"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Java installasies"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Privaatheid"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Hulpbronbestuur"
-  },
-  "app.update-toast.body": {
-    "message": "Modrinth App v{version} is gereed om te installeer! Herlaai nou werk, of outomaties wanneer jy naby Modrinth App."
-  },
-  "app.update-toast.body.download-complete": {
-    "message": "Modrinth App v{version} klaar afgelaai. Herlaai nou werk, of outomaties wanneer jy naby Modrinth App."
-  },
-  "app.update-toast.body.metered": {
-    "message": "Modrinth App v{version} is nou beskikbaar! Aangesien jy op'n gemeterde netwerk, ons het nie outomaties laai dit."
-  },
-  "app.update-toast.changelog": {
-    "message": "Alle veranderinge"
-  },
-  "app.update-toast.download": {
-    "message": "Laai ({size})"
-  },
-  "app.update-toast.downloading": {
-    "message": "Aflaai..."
-  },
-  "app.update-toast.reload": {
-    "message": "Herlaai"
-  },
-  "app.update-toast.title": {
-    "message": "Die opdatering is beskikbaar"
-  },
-  "app.update-toast.title.download-complete": {
-    "message": "Aflaai voltooi"
-  },
-  "app.update.complete-toast.text": {
-    "message": "Klik hier om die veranderinge te sien."
-  },
-  "app.update.complete-toast.title": {
-    "message": "Weergawe {version} is suksesvol geïnstalleer!"
-  },
-  "app.update.download-update": {
-    "message": "Laai die opdatering af"
-  },
-  "app.update.downloading-update": {
-    "message": "Laai tans opdatering af ({percent}%)"
-  },
-  "app.update.reload-to-update": {
-    "message": "Herlaai om opdatering te installeer"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "voeg by en speel"
-  },
-  "instance.add-server.add-server": {
-    "message": "bediener byvoeg"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Gestrem"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "aangeskakel"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "spoed"
-  },
-  "instance.add-server.title": {
-    "message": "voeg 'n bediener by"
-  },
-  "instance.edit-server.title": {
-    "message": "wysig bediener"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "versteek van die tuisblad"
-  },
-  "instance.edit-world.name": {
-    "message": "Naam"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Minecraft Wêreld"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "herstel ikoon"
-  },
-  "instance.edit-world.title": {
-    "message": "wêreld wysig"
-  },
-  "instance.filter.disabled": {
-    "message": "gestremde projekte"
-  },
-  "instance.filter.updates-available": {
-    "message": "opdaterings beskikbaar"
-  },
-  "instance.server-modal.address": {
-    "message": "adres"
-  },
-  "instance.server-modal.name": {
-    "message": "Naam"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Minecraft-bediener"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Hulpbronpakket"
-  },
-  "instance.settings.tabs.general": {
-    "message": "Algemeen"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "verwyder instansie"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "verwyder instansie"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "Vee 'n instansie permanent van jou toestel uit, insluitend jou wêrelde, konfigurasies en alle geïnstalleerde inhoud. Wees versigtig, want sodra jy 'n instansie verwyder het, is daar geen manier om dit te herstel nie."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "Vee tans uit …"
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "Duplikaat"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "Kan nie dupliseer tydens installasie nie."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplikaat instansie"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Skep 'n kopie van hierdie instansie, insluitend wêrelde, konfigurasies, mods, ens."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "Wwysig ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Verwyder ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Vervang ikoon"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Kies ikoon"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "Biblioteekgroepe"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "Skep nuwe groep"
-  },
-  "instance.settings.tabs.general.library-groups.description": {
-    "message": "Biblioteekgroepe laat jou toe om jou instansies in verskillende afdelings in jou biblioteek te organiseer."
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Voer groepnaam in"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "Naam"
-  },
-  "instance.settings.tabs.hooks": {
-    "message": "Lanseerhake"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Pasgemaakte lanseerhake"
-  },
-  "instance.settings.tabs.hooks.description": {
-    "message": "Hooks laat gevorderde gebruikers toe om sekere stelselopdragte uit te voer voor en na die bekendstelling van die spel."
-  },
-  "instance.settings.tabs.hooks.post-exit": {
-    "message": "Na-uitgang"
-  },
-  "instance.settings.tabs.hooks.post-exit.description": {
-    "message": "Het gehardloop nadat die wedstryd geëindig het."
-  },
-  "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Voer die na-uitgang-opdrag in..."
-  },
-  "instance.settings.tabs.hooks.pre-launch": {
-    "message": "Voorbekendstelling"
-  },
-  "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "Het gehardloop voordat die instansie geloods is."
-  },
-  "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "Voer pre-lanceringsopdrag in..."
-  },
-  "instance.settings.tabs.hooks.wrapper": {
-    "message": "Verpakking"
-  },
-  "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "Verpakking opdrag vir die bekendstelling Van Minecraft."
-  },
-  "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "Voer die Verpakking-opdrag in..."
-  },
-  "instance.settings.tabs.installation": {
-    "message": "Installation"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} vir Minecraft {game_version} reeds geïnstalleer"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Vanilla {game_version} reeds geïnstalleer"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Verander weergawe"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Installeer"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Installasie"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Haal modpack weergawes"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Installeer nuwe weergawe"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "Huidiglik geïnstalleer"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "Ontfoutinligting:"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Haal modpack besonderhede"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Spel weergawe"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Installeer"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Installasie aan die gang"
-  },
-  "instance.settings.tabs.installation.loader-version": {
-    "message": "{loader} weergawe"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-connection": {
-    "message": "Kan nie gekoppelde modpack-besonderhede haal nie. Kontroleer asseblief u internetverbinding."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} is nie beskikbaar Vir Minecraft {version} nie. Probeer'n ander mod loader."
-  },
-  "instance.settings.tabs.installation.no-modpack-found": {
-    "message": "Hierdie geval is gekoppel aan'n modpack, maar die modpack kon nie gevind word op Modrinth."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Basis"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Herinstalleer modpack"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Herinstalleer modpack weer"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Herinstalleer sal alle geïnstalleerde of gewysigde inhoud terugstel na wat deur die modpack verskaf word, en enige mods of inhoud wat jy bo-op die oorspronklike installasie bygevoeg het, verwyder. Dit kan onverwagte gedrag regstel as veranderinge aan die instansie aangebring is, maar as jou wêrelde nou afhanklik is van addisionele geïnstalleerde inhoud, kan dit bestaande wêrelde breek."
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.title": {
-    "message": "Wil u definitief hierdie instansie herinstalleer?"
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "Stel die inhoud van die instansie terug na sy oorspronklike toestand, en verwyder enige mods of inhoud wat u bo-op die oorspronklike modpack bygevoeg het."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Herinstalleer modpack"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Herstel"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Herstel"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "Herstel herinstalleer Minecraft afhanklikhede en tjeks vir korrupsie. Dit kan probleme oplos as u speletjie nie begin nie weens foute wat verband hou met die lanseerder, maar dit sal nie probleme of ineenstortings wat verband hou met geïnstalleerde mods oplos nie."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Herstel geval?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Herstelwerk aan die gang"
-  }
-}

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

@@ -1,419 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "وضع المطوّر مُفعَّل."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "المظهر"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "خيارات النسخة الافتراضية"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "إعدادات المميزات"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "تثبيتات جافا"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "الخصوصية"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "إدارة الموارد"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "إضافة واللعب"
-  },
-  "instance.add-server.add-server": {
-    "message": "إضافة الخادم"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "معطَّل"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "مفعَّل"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "موجه الأوامر"
-  },
-  "instance.add-server.title": {
-    "message": "إضافة خادم"
-  },
-  "instance.edit-server.title": {
-    "message": "تعديل خادم"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "إخفاء من الصفحة الرئيسية"
-  },
-  "instance.edit-world.name": {
-    "message": "الاسم"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "عالم ماينكرافت"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "إعادة تعيين الأيقونة"
-  },
-  "instance.edit-world.title": {
-    "message": "تعديل العالم"
-  },
-  "instance.filter.disabled": {
-    "message": "المشاريع المعطَّلة"
-  },
-  "instance.filter.updates-available": {
-    "message": "توجد تحديثات متاحة"
-  },
-  "instance.server-modal.address": {
-    "message": "العنوان"
-  },
-  "instance.server-modal.name": {
-    "message": "الاسم"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "خادم ماين كرافت"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "حزمة الموارد"
-  },
-  "instance.settings.tabs.general": {
-    "message": "عام"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "حذف النسخة"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "حذف النسخة"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "يحذف النسخة نهائيًا من جهازك، بما في ذلك عوالمك، إعداداتك، وجميع المحتويات المثبّتة. كن حذرًا، فبمجرد حذف النسخة لن تكون هناك أي طريقة لاستعادتها."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "جاري الحذف..."
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "نسخ"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "لا يمكن النسخ أثناء التثبيت."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "نسخة النسخة"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "إنشاء."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "تعديل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "أزل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "استبدل الأيقونة"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "اختر الأيقونة"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "مجموعات المكتبة"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "إنشاء مجموعة جديدة"
-  },
-  "instance.settings.tabs.general.library-groups.description": {
-    "message": "مجموعات المكتبة تساعدك على ترتيب حالاتك على أقسام مختلفة في مكتبتك."
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "إدخال اسم المجموعة"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "الاسم"
-  },
-  "instance.settings.tabs.hooks": {
-    "message": "إجراءات تشغيل إضافية"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "إجراءات تشغيل إضافية مخصصة"
-  },
-  "instance.settings.tabs.hooks.description": {
-    "message": "إجراءات التشغيل المضافة تسمح للمستخدمين المتقدمين بإنشاء أوامر نظامية محددة قبل و عند تشغيل اللعبة."
-  },
-  "instance.settings.tabs.hooks.post-exit": {
-    "message": "ما بعد الخروج"
-  },
-  "instance.settings.tabs.hooks.post-exit.description": {
-    "message": "يتم تشغيله بعد إغلاق اللعبة."
-  },
-  "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "أدخل أمر ما بعد الخروج..."
-  },
-  "instance.settings.tabs.hooks.pre-launch": {
-    "message": "ما قبل الإطلاق"
-  },
-  "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "يتم تشغيله قبل بَدْء تشغيل النسخة."
-  },
-  "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "أدخل أمر ما قبل الإطلاق..."
-  },
-  "instance.settings.tabs.hooks.title": {
-    "message": "خطافات تشغيل اللعبة"
-  },
-  "instance.settings.tabs.hooks.wrapper": {
-    "message": "مُغلِّف"
-  },
-  "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "أمر غلاف لتشغيل ماين كرافت."
-  },
-  "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "أدخل أمر الغلاف..."
-  },
-  "instance.settings.tabs.installation": {
-    "message": "تثبيت"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} لماين كرافت {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": "ماين كرافت {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": "جافا والذاكرة"
-  },
-  "instance.settings.tabs.java.environment-variables": {
-    "message": "المتغيرات البيئية"
-  },
-  "instance.settings.tabs.java.hooks": {
-    "message": "الخطافات"
-  },
-  "instance.settings.tabs.java.java-arguments": {
-    "message": "وسائط جافا"
-  },
-  "instance.settings.tabs.java.java-installation": {
-    "message": "تثبيت جافا"
-  },
-  "instance.settings.tabs.java.java-memory": {
-    "message": "الذاكرة المخصَّصة"
-  },
-  "instance.settings.tabs.window": {
-    "message": "النافذة"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "إعدادات نافذة مخصّصة"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "ملء الشاشة"
-  },
-  "instance.settings.tabs.window.fullscreen.description": {
-    "message": "جعل اللعبة تبدأ في وضع ملء الشاشة عند التشغيل (باستخدام ‎options.txt)."
-  },
-  "instance.settings.tabs.window.height": {
-    "message": "الارتفاع"
-  },
-  "instance.settings.tabs.window.height.description": {
-    "message": "ارتفاع نافذة اللعبة عند التشغيل."
-  },
-  "instance.settings.tabs.window.height.enter": {
-    "message": "أدخل الارتفاع..."
-  },
-  "instance.settings.tabs.window.width": {
-    "message": "العرض"
-  },
-  "instance.settings.tabs.window.width.description": {
-    "message": "عرض نافذة اللعبة عند التشغيل."
-  },
-  "instance.settings.tabs.window.width.enter": {
-    "message": "أدخل العرض..."
-  },
-  "instance.settings.title": {
-    "message": "الإعدادات"
-  },
-  "instance.worlds.a_minecraft_server": {
-    "message": "خادم ماين كرافت"
-  },
-  "instance.worlds.cant_connect": {
-    "message": "لا يمكن الاتصال بالخادم"
-  },
-  "instance.worlds.copy_address": {
-    "message": "نسخ العنوان"
-  },
-  "instance.worlds.dont_show_on_home": {
-    "message": "عدم العرض في الصفحة الرئيسية"
-  },
-  "instance.worlds.filter.available": {
-    "message": "متاح"
-  },
-  "instance.worlds.game_already_open": {
-    "message": "النسخة مفتوحة بالفعل"
-  },
-  "instance.worlds.hardcore": {
-    "message": "وضع الهاردكور"
-  },
-  "instance.worlds.incompatible_server": {
-    "message": "الخادم غير متوافق"
-  },
-  "instance.worlds.no_contact": {
-    "message": "تعذّر الاتصال بالخادم"
-  },
-  "instance.worlds.no_server_quick_play": {
-    "message": "يمكنك الدخول مباشرة إلى الخوادم فقط على ماين كرافت Alpha 1.0.5+"
-  },
-  "instance.worlds.no_singleplayer_quick_play": {
-    "message": "يمكنك الدخول مباشرة إلى عوالم اللعب الفردي فقط على ماين كرافت ‎1.20+‎"
-  },
-  "instance.worlds.play_instance": {
-    "message": "تشغيل النسخة"
-  },
-  "instance.worlds.type.server": {
-    "message": "الخادم"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "لعب فردي"
-  },
-  "instance.worlds.view_instance": {
-    "message": "عرض النسخة"
-  },
-  "instance.worlds.world_in_use": {
-    "message": "العالم قيد الاستخدام"
-  },
-  "search.filter.locked.instance": {
-    "message": "مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance-game-version.title": {
-    "message": "إصدار اللعبة مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance-loader.title": {
-    "message": "المحمّل مقدَّم من النسخة"
-  },
-  "search.filter.locked.instance.sync": {
-    "message": "مزامنة مع النسخة"
-  }
-}

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

@@ -1,4 +1,55 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "قد تكون خوادم مصادقة ماينكرافت معطلة حاليًا. تحقق من اتصالك بالإنترنت وحاول مرة أخرى لاحقًا."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "تعذر الوصول إلى خوادم المصادقة"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "نزل للعب"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "تثبيت"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": ""
+  },
+  "app.modal.install-to-play.shared-instance": {
+    "message": "حُزْمَة مشاركة"
+  },
+  "app.modal.install-to-play.shared-server-instance": {
+    "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.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} حُدِّث"
+  },
   "app.settings.developer-mode-enabled": {
     "message": "تم تفعيل وضع المطوّر."
   },
@@ -17,39 +68,15 @@
   "app.settings.tabs.java-installations": {
     "message": "تثبيتات جافا"
   },
+  "app.settings.tabs.language": {
+    "message": "اللغة"
+  },
   "app.settings.tabs.privacy": {
     "message": "الخصوصية"
   },
   "app.settings.tabs.resource-management": {
     "message": "إدارة الموارد"
   },
-  "app.update-toast.body": {
-    "message": "تطبيق Modrinth الإصدار {version} جاهز للتثبيت!\nأعد التحميل لتحديث التطبيق الآن، أو سيتم التحديث تلقائيًا عند إغلاق تطبيق Modrinth."
-  },
-  "app.update-toast.body.download-complete": {
-    "message": "تطبيق Modrinth الإصدار {version} جاهز للتثبيت!\nأعد التحميل لتحديث التطبيق الآن، أو سيتم التحديث تلقائيًا عند إغلاق تطبيق Modrinth."
-  },
-  "app.update-toast.body.metered": {
-    "message": "تطبيق Modrinth الإصدار {version} متاح الآن!\nنظرًا لأنك تستخدم شبكة محدودة البيانات، لم نقم بتنزيل التحديث تلقائيًا.\n"
-  },
-  "app.update-toast.changelog": {
-    "message": "سجلّ التغييرات"
-  },
-  "app.update-toast.download": {
-    "message": "تنزيل ({size})"
-  },
-  "app.update-toast.downloading": {
-    "message": "جار التنزيل..."
-  },
-  "app.update-toast.reload": {
-    "message": "إعادة تحميل"
-  },
-  "app.update-toast.title": {
-    "message": "تحديث متاح"
-  },
-  "app.update-toast.title.download-complete": {
-    "message": "اكتمل التنزيل"
-  },
   "app.update.complete-toast.text": {
     "message": "انقر هنا لعرض سجلّ التغييرات."
   },
@@ -78,7 +105,7 @@
     "message": "جار إضافة صديق"
   },
   "friends.add-friend.username.description": {
-    "message": "قد يختلف عن اسم المستخدم الخاص بهم في Minecraft!"
+    "message": "قد يختلف عن اسم المستخدم الخاص بهم في ماينكرافت!"
   },
   "friends.add-friend.username.placeholder": {
     "message": "أدخل اسم مستخدم Modrinth..."
@@ -132,7 +159,7 @@
     "message": "إضافة واللعب"
   },
   "instance.add-server.add-server": {
-    "message": "إضافة الخادم"
+    "message": "إضافة خادم"
   },
   "instance.add-server.resource-pack.disabled": {
     "message": "معطَّل"
@@ -177,7 +204,7 @@
     "message": "الاسم"
   },
   "instance.server-modal.placeholder-name": {
-    "message": "خادم ماين كرافت"
+    "message": "خادم Minecraft"
   },
   "instance.server-modal.resource-pack": {
     "message": "حزمة الموارد"
@@ -270,7 +297,7 @@
     "message": "مُغلِّف"
   },
   "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "أمر غلاف لتشغيل ماين كرافت."
+    "message": "أمر غلاف لتشغيل ماينكرافت."
   },
   "instance.settings.tabs.hooks.wrapper.enter": {
     "message": "أدخل أمر الغلاف..."
@@ -279,7 +306,7 @@
     "message": "تثبيت"
   },
   "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} لماين كرافت {game_version} مثبت بالفعل"
+    "message": "{platform} {version} لـ Minecraft{game_version} مثبت بالفعل"
   },
   "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
     "message": "فانيلا {game_version} مُثبّتة بالفعل"
@@ -321,7 +348,7 @@
     "message": "إصدار {loader}"
   },
   "instance.settings.tabs.installation.minecraft-version": {
-    "message": "ماين كرافت {version}"
+    "message": "Minecraft {version}"
   },
   "instance.settings.tabs.installation.no-connection": {
     "message": "تعذّر جلب تفاصيل حزمة المودات المرتبطة. يرجى التحقق من اتصالك بالإنترنت."
@@ -461,9 +488,6 @@
   "instance.settings.tabs.window.width.enter": {
     "message": "أدخل العرض..."
   },
-  "instance.settings.title": {
-    "message": "الإعدادات"
-  },
   "instance.worlds.a_minecraft_server": {
     "message": "خادم ماين كرافت"
   },

apps/app-frontend/src/locales/az-AZ/index.json

@@ -1,8 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": ""
-  },
-  "app.settings.downloading": {
-    "message": ""
-  }
-}

apps/app-frontend/src/locales/bg-BG/index.json

@@ -1,131 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Режим за разработчици активиран."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Външен вид"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Опции по подразбиране"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Java инсталации"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Поверителност"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Контрол на ресурси"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Добави и играй"
-  },
-  "instance.add-server.add-server": {
-    "message": "Добави сървър"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Деактивирано"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Активирано"
-  },
-  "instance.add-server.title": {
-    "message": "Добавяне на сървър"
-  },
-  "instance.edit-server.title": {
-    "message": "Редактиране на сървър"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Намиране на версиите на modpack-овете"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Инсталиране на нова версия"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "В момента инсталирано"
-  },
-  "instance.settings.tabs.installation.fetching-modpack-details": {
-    "message": "Намиране на детайли на modpack"
-  },
-  "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": "Не може да се намери този modpack. Моля проверете интернет връзката си."
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "{loader} не е наличен за Minecraft версия {version}. Моля пробвайте друг mod loader."
-  },
-  "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.title": {
-    "message": "Сигурни ли сте, че искате да преинсталирате това?"
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Повторно инсталиране на modpack"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Поправи"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "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.window": {
-    "message": "Прозорец"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Различни настройки на прозорец"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "Пълен екран"
-  }
-}

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

@@ -1,179 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Mode de desenvolupament activat."
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Aparença"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Opcions d'instància per defecte"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Instal·lacions de Java"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Privacitat"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Afegir i jugar"
-  },
-  "instance.add-server.add-server": {
-    "message": "Afegir servidor"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Desactivat"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Activat"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "Preguntar"
-  },
-  "instance.add-server.title": {
-    "message": "Afegir un servidor"
-  },
-  "instance.edit-server.title": {
-    "message": "Editar servidor"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "Amagar de l'inici"
-  },
-  "instance.edit-world.name": {
-    "message": "Nom"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Món de Minecraft"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "Reinicia l'icona"
-  },
-  "instance.edit-world.title": {
-    "message": "Edita el món"
-  },
-  "instance.filter.disabled": {
-    "message": "Projectes desactivats"
-  },
-  "instance.filter.updates-available": {
-    "message": "Actualitzacions disponibles"
-  },
-  "instance.server-modal.address": {
-    "message": "Adreça web"
-  },
-  "instance.server-modal.name": {
-    "message": "Nom"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Servidor de Minecraft"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Paquet de recursos"
-  },
-  "instance.settings.tabs.general": {
-    "message": "General"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "Suprimeix la instància"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "Suprimir instància"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "Suprimeix permanentment una instància del dispositiu, inclosos els vostres mons, configuracions i tot el contingut instal·lat. Aneu amb compte, ja que un cop suprimiu una instància no hi ha manera de recuperar-la."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "S'està suprimint..."
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "Duplicar"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "No es pot duplicar durant la instal·lació."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplica la instància"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Crea una còpia d'aquesta instància, incloent-hi mons, configuracions, mods, etc."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "Edita la icona"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Treu icona"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Substitueix icona"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Selecciona icona"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "Grup de llibreries"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "Crear nou grup"
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Introdueix nom del grup"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "Nom"
-  },
-  "instance.settings.tabs.installation": {
-    "message": "Instal·lació"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Canviar versió"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Instal·lar"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Instal·lant"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Versió del joc"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Plataforma"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Reparar"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "canviar versió"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "reparar"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(versió desconeguda)"
-  },
-  "instance.settings.tabs.java": {
-    "message": "Java i memòria"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "Pantalla completa"
-  },
-  "instance.settings.tabs.window.height": {
-    "message": "Altura"
-  },
-  "instance.settings.tabs.window.width": {
-    "message": "Amplada"
-  },
-  "instance.settings.title": {
-    "message": "Configuració"
-  },
-  "instance.worlds.filter.available": {
-    "message": "Disponible"
-  },
-  "instance.worlds.play_instance": {
-    "message": "Jugar instància"
-  },
-  "instance.worlds.type.server": {
-    "message": "Servidor"
-  }
-}

apps/app-frontend/src/locales/ceb-PH/index.json

@@ -1,473 +0,0 @@
-{
-  "app.settings.developer-mode-enabled": {
-    "message": "Gipaandar ang paagi sa tigpalambo."
-  },
-  "app.settings.downloading": {
-    "message": "Gakarganug sa v{version}"
-  },
-  "app.settings.tabs.appearance": {
-    "message": "Panagway"
-  },
-  "app.settings.tabs.default-instance-options": {
-    "message": "Mga kapilian sa sukaranan nga pananglitan"
-  },
-  "app.settings.tabs.feature-flags": {
-    "message": "Bandera sa mga panagway"
-  },
-  "app.settings.tabs.java-installations": {
-    "message": "Mga pagtaod sa Java"
-  },
-  "app.settings.tabs.privacy": {
-    "message": "Pribasiya"
-  },
-  "app.settings.tabs.resource-management": {
-    "message": "Pagdumala sa kahinguhaan"
-  },
-  "app.update-toast.body": {
-    "message": "Andam na mataud ang Modrinth App v{version}! Pagkarga kausab aron mapasibo, o kinaugalingon pagtak-op sa Modrinth App."
-  },
-  "app.update-toast.body.download-complete": {
-    "message": "Nahuman ang pagkarganug sa Modrinth App v{version}. Pagkarga kausab aron mapasibo, o kinaugalingon pagtak-op sa Modrinth App."
-  },
-  "app.update-toast.body.metered": {
-    "message": "Magamit na karon ang Modrinth App! Wala namo karganugi daan kay inihap man ang imong pum-ot."
-  },
-  "app.update-toast.changelog": {
-    "message": "Talaan sa Kausaban"
-  },
-  "app.update-toast.download": {
-    "message": "Karganugi ({size})"
-  },
-  "app.update-toast.downloading": {
-    "message": "Gakarganug..."
-  },
-  "app.update-toast.reload": {
-    "message": "Kargaha pag-usab"
-  },
-  "app.update-toast.title": {
-    "message": "Naay bag-o nga pagpasibo"
-  },
-  "app.update-toast.title.download-complete": {
-    "message": "Nahuman ang pagkarganug"
-  },
-  "app.update.complete-toast.text": {
-    "message": "Panuplok diri aron malantaw ang talaan sa kausaban."
-  },
-  "app.update.complete-toast.title": {
-    "message": "Malampusong nataud ang bersiyon nga {version}!"
-  },
-  "app.update.download-update": {
-    "message": "Karganugi ang kausaban"
-  },
-  "app.update.downloading-update": {
-    "message": "Gakarganug sa pagpasibo ({percent}%)"
-  },
-  "app.update.reload-to-update": {
-    "message": "Andam mataud ang pagpasibo"
-  },
-  "friends.action.add-friend": {
-    "message": "Pagdugang og higala"
-  },
-  "friends.action.view-friend-requests": {
-    "message": "{count} ka hangyo sa pakighigala"
-  },
-  "friends.add-friend.submit": {
-    "message": "Pagpadala og hangyo sa pakighigala"
-  },
-  "friends.add-friend.title": {
-    "message": "Pagdugang og higala"
-  },
-  "friends.add-friend.username.description": {
-    "message": "Mahimong galahi sa ngalan nila sa Minecraft!"
-  },
-  "friends.add-friend.username.placeholder": {
-    "message": "Ibutang ang ngalan sa tiggamit sa Modrinth..."
-  },
-  "friends.add-friend.username.title": {
-    "message": "Unsa man ang ngalan sa imong higala sa Modrinth?"
-  },
-  "friends.add-friends-to-share": {
-    "message": "<link>Pagdugang og mga higala</link> aron makit-an ang ilang ginadula!"
-  },
-  "friends.friend.cancel-request": {
-    "message": "Bawia ang hangyo"
-  },
-  "friends.friend.remove-friend": {
-    "message": "Tangtangi ang higala"
-  },
-  "friends.friend.request-sent": {
-    "message": "Gipadala na ang hangyo sa pakighigala"
-  },
-  "friends.friend.view-profile": {
-    "message": "Tan-awa ang propayl"
-  },
-  "friends.heading": {
-    "message": "Mga higala"
-  },
-  "friends.heading.active": {
-    "message": "Malihokon"
-  },
-  "friends.heading.offline": {
-    "message": "Sira"
-  },
-  "friends.heading.online": {
-    "message": "Buka"
-  },
-  "friends.heading.pending": {
-    "message": "Gahulat"
-  },
-  "friends.no-friends-match": {
-    "message": "Walay higala nga motukma sa \"{query}\""
-  },
-  "friends.search-friends-placeholder": {
-    "message": "Mangita sa mga higala..."
-  },
-  "friends.section.heading": {
-    "message": "{title} - {count}"
-  },
-  "friends.sign-in-to-add-friends": {
-    "message": "<link>Pag-sign-in sa Modrinth account</link> aron makadugang og mga higala ug mahibal-an ang ginadula nila!"
-  },
-  "instance.add-server.add-and-play": {
-    "message": "Idugang ug dulaa"
-  },
-  "instance.add-server.add-server": {
-    "message": "Idugang ang magsisilbi"
-  },
-  "instance.add-server.resource-pack.disabled": {
-    "message": "Dili motugot"
-  },
-  "instance.add-server.resource-pack.enabled": {
-    "message": "Gitugotan"
-  },
-  "instance.add-server.resource-pack.prompt": {
-    "message": "Magpatugot"
-  },
-  "instance.add-server.title": {
-    "message": "Pagdugang og magsisilbi"
-  },
-  "instance.edit-server.title": {
-    "message": "Usba ang magsisilbi"
-  },
-  "instance.edit-world.hide-from-home": {
-    "message": "Ayaw ipakita sa Puluy-anang panid"
-  },
-  "instance.edit-world.name": {
-    "message": "Ngalan"
-  },
-  "instance.edit-world.placeholder-name": {
-    "message": "Minecraft nga Kalibutan"
-  },
-  "instance.edit-world.reset-icon": {
-    "message": "Pag-usab sa amoy"
-  },
-  "instance.edit-world.title": {
-    "message": "Usba ang kalibutan"
-  },
-  "instance.filter.disabled": {
-    "message": "Di-paganhong mga proyekto"
-  },
-  "instance.filter.updates-available": {
-    "message": "Naay bag-ong mga kausaban"
-  },
-  "instance.server-modal.address": {
-    "message": "Padad-anan"
-  },
-  "instance.server-modal.name": {
-    "message": "Ngalan"
-  },
-  "instance.server-modal.placeholder-name": {
-    "message": "Minecraft nga Magsisilbi"
-  },
-  "instance.server-modal.resource-pack": {
-    "message": "Putos sa kahinguhaan"
-  },
-  "instance.settings.tabs.general": {
-    "message": "Tinanan"
-  },
-  "instance.settings.tabs.general.delete": {
-    "message": "Panas-i kining pananglitan"
-  },
-  "instance.settings.tabs.general.delete.button": {
-    "message": "Panas-i kining pananglitan"
-  },
-  "instance.settings.tabs.general.delete.description": {
-    "message": "Malungtarong mopanas ang pananglitan sa imong himan, apil na ang imong mga kalibutan, paghan-ay, ug tanang gitaod nga sulod. Pag-amping, dili na mabawi kung gipanas na nimo ang pananglitan."
-  },
-  "instance.settings.tabs.general.deleting.button": {
-    "message": "Gapanas..."
-  },
-  "instance.settings.tabs.general.duplicate-button": {
-    "message": "Paghulad"
-  },
-  "instance.settings.tabs.general.duplicate-button.tooltip.installing": {
-    "message": "Dili makahulad samtang nga gataud."
-  },
-  "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Paghulad sa pananglitan"
-  },
-  "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Buhatan og awat kining pananglitan, apil na ang imong mga kalibutan, paghan-ay, kausaban, ug uban pa."
-  },
-  "instance.settings.tabs.general.edit-icon": {
-    "message": "Usba ang amoy"
-  },
-  "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Tangtangi ang amoy"
-  },
-  "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Pulihan ang amoy"
-  },
-  "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Pamili og amoy"
-  },
-  "instance.settings.tabs.general.library-groups": {
-    "message": "Mga pundok sa librarya"
-  },
-  "instance.settings.tabs.general.library-groups.create": {
-    "message": "Pagbuhat og bag-o nga pundok"
-  },
-  "instance.settings.tabs.general.library-groups.description": {
-    "message": "Gitugotan sa mga pundok sa librarya nga imong mahan-ay ang imong mga pananglitan sa nagkalain-lain nga bahin sa imong librarya."
-  },
-  "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Ibutang ang ngalan sa pundok"
-  },
-  "instance.settings.tabs.general.name": {
-    "message": "Ngalan"
-  },
-  "instance.settings.tabs.hooks": {
-    "message": "Mga kaw-it sa paglansad"
-  },
-  "instance.settings.tabs.hooks.custom-hooks": {
-    "message": "Mga pinatuyo nga kaw-it sa paglansad"
-  },
-  "instance.settings.tabs.hooks.description": {
-    "message": "Gitugotan sa mga kaw-it ang mga eksperto nga mga tiggamit nga makapadagan og mga sistema nga sugo ayha ug paghuman malansad ang dula."
-  },
-  "instance.settings.tabs.hooks.post-exit": {
-    "message": "Human-matak-op"
-  },
-  "instance.settings.tabs.hooks.post-exit.description": {
-    "message": "Ipadagan paghuman matak-op ang dula."
-  },
-  "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Ibutang ang human-matak-op nga sugo..."
-  },
-  "instance.settings.tabs.hooks.pre-launch": {
-    "message": "Ayha-malansad"
-  },
-  "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "Ipadagan ayha malansad ang pananglitan."
-  },
-  "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "Ibutang ang ayha-malansad nga sugo..."
-  },
-  "instance.settings.tabs.hooks.title": {
-    "message": "Mga kaw-it sa paglansad sa dula"
-  },
-  "instance.settings.tabs.hooks.wrapper": {
-    "message": "Pamutos"
-  },
-  "instance.settings.tabs.hooks.wrapper.description": {
-    "message": "Pamutos nga sugo sa paglansad sa Minecraft."
-  },
-  "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "Ibutang ang pamutos nga sugo..."
-  },
-  "instance.settings.tabs.installation": {
-    "message": "Pagtaud"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "Nataud naman ang {platform} {version} alang sa Minecraft {game_version}"
-  },
-  "instance.settings.tabs.installation.change-version.already-installed.vanilla": {
-    "message": "Nataud naman ang Banilya nga {game_version}"
-  },
-  "instance.settings.tabs.installation.change-version.button": {
-    "message": "Pulihan og bersiyon"
-  },
-  "instance.settings.tabs.installation.change-version.button.install": {
-    "message": "Itaud"
-  },
-  "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Gataud"
-  },
-  "instance.settings.tabs.installation.change-version.cannot-while-fetching": {
-    "message": "Gapangita og mga bersiyon sa mga putos sa kausaban"
-  },
-  "instance.settings.tabs.installation.change-version.in-progress": {
-    "message": "Gataud sa bag-o nga bersiyon"
-  },
-  "instance.settings.tabs.installation.currently-installed": {
-    "message": "Pagkakarong taud"
-  },
-  "instance.settings.tabs.installation.debug-information": {
-    "message": "Kasayoran sa pagputli:"
-  },
-  "instance.settings.tabs.installation.game-version": {
-    "message": "Bersiyon sa dula"
-  },
-  "instance.settings.tabs.installation.install": {
-    "message": "Itaud"
-  },
-  "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Nagtaud karon"
-  },
-  "instance.settings.tabs.installation.loader-version": {
-    "message": "Bersiyon sa {loader}"
-  },
-  "instance.settings.tabs.installation.minecraft-version": {
-    "message": "Minecraft {version}"
-  },
-  "instance.settings.tabs.installation.no-loader-versions": {
-    "message": "Dili magamit ang {loader} sa Minecraft {version}. Sulayi ang ubang tigkarga sa kausaban."
-  },
-  "instance.settings.tabs.installation.platform": {
-    "message": "Pantawan"
-  },
-  "instance.settings.tabs.installation.reinstall.button": {
-    "message": "Itaud pag-usab ang putos sa kausaban"
-  },
-  "instance.settings.tabs.installation.reinstall.button.reinstalling": {
-    "message": "Nagtaud pag-usab sa putos sa kusaban"
-  },
-  "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Mahimo nga mobalik sa sinugdan ang tanang gitaod o giusab nga sulod sa unsay ihatag sa putos sa kausaban, tangtangon ang mga kausaban o sulod nga imong gidugang apil na ang lintunganay nga putos sa kausaban. Mahimo nga maayo ang mga tuhaw nga batasan kon naay pagbag-o sa pananglitan, apan kon gasalig na ang imong kalibutan sa dinugang nga sulod, mahimo nga madaut ani ang daan nga mga kalibutan."
-  },
-  "instance.settings.tabs.installation.reinstall.description": {
-    "message": "Ibalik ang mga sulod sa pananglitan sa unang kahimtang, tangtangon ang mga kausaban o sulod nga imong gidugang apil na ang lintunganay nga putos sa kausaban."
-  },
-  "instance.settings.tabs.installation.reinstall.title": {
-    "message": "Itaud pag-usab ang putos sa kausaban"
-  },
-  "instance.settings.tabs.installation.repair.button": {
-    "message": "Ayohon"
-  },
-  "instance.settings.tabs.installation.repair.button.repairing": {
-    "message": "Gaayo"
-  },
-  "instance.settings.tabs.installation.repair.confirm.description": {
-    "message": "Sa pag-ayo, mataud pagbalik ang mga sinaligan sa Minecraft ug mangita og mga kadunot. Mahimo nga masulbad niini ang mga isyu kun dili malunsad ang dula tungod sa mga kasaypan matud sa tiglansad, apan dili ni masulbad ang mga isyu o pagdusmog matud sa mga gitaud nga kausaban."
-  },
-  "instance.settings.tabs.installation.repair.confirm.title": {
-    "message": "Ayohon ang pananglitan?"
-  },
-  "instance.settings.tabs.installation.repair.in-progress": {
-    "message": "Nag-ayo karon"
-  },
-  "instance.settings.tabs.installation.reset-selections": {
-    "message": "Sa kasamtang pag-usab "
-  },
-  "instance.settings.tabs.installation.show-all-versions": {
-    "message": "Ipakita ang tanang bersiyon"
-  },
-  "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "pulihan og bersiyon"
-  },
-  "instance.settings.tabs.installation.tooltip.action.install": {
-    "message": "itaud"
-  },
-  "instance.settings.tabs.installation.tooltip.action.reinstall": {
-    "message": "itaud pag-usab"
-  },
-  "instance.settings.tabs.installation.tooltip.action.repair": {
-    "message": "ayohon"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-installing": {
-    "message": "Dili maka-{action} samtang nga gataud"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-offline": {
-    "message": "Dili maka-{action} samtang binugto"
-  },
-  "instance.settings.tabs.installation.tooltip.cannot-while-repairing": {
-    "message": "Dili maka-{action} samtang nag-ayo"
-  },
-  "instance.settings.tabs.installation.unknown-version": {
-    "message": "(diinilang bersiyon)"
-  },
-  "instance.settings.tabs.installation.unlink.button": {
-    "message": "Pagbugto sa pananglitan"
-  },
-  "instance.settings.tabs.installation.unlink.confirm.description": {
-    "message": "Kun imong ipadayon, dili na nimo makatay pagbalik nga wala mohimo og bag-o nga pananglitan. Dili na ka makadawat og pagpasibo sa putos sa kausaban ug mahimo kining naandan nga."
-  },
-  "instance.settings.tabs.installation.unlink.description": {
-    "message": "Nakakatay kining pananglitan sa usa ka putos sa kausaban, pasabot ani nga dili mapasibo ang mga kausaban og dili nimo mausab ang tigkarga sa kausaban o ang bersiyon sa Minecraft. Kanunay nga mabugto kining pananglitan og putos sa kausabon kun tangtangon ang katay."
-  },
-  "instance.settings.tabs.installation.unlink.title": {
-    "message": "Pagbugto sa putos sa kausaban"
-  },
-  "instance.settings.tabs.java": {
-    "message": "Java at memorya"
-  },
-  "instance.settings.tabs.java.hooks": {
-    "message": "Mga kaw-it"
-  },
-  "instance.settings.tabs.java.java-arguments": {
-    "message": "Mga lantugi sa java"
-  },
-  "instance.settings.tabs.java.java-installation": {
-    "message": "Pagtaud sa Java"
-  },
-  "instance.settings.tabs.java.java-memory": {
-    "message": "Memoryang gigahin"
-  },
-  "instance.settings.tabs.window": {
-    "message": "Tamboanan"
-  },
-  "instance.settings.tabs.window.custom-window-settings": {
-    "message": "Mga himutangan sa pinatuyo nga tamboanan"
-  },
-  "instance.settings.tabs.window.fullscreen": {
-    "message": "Punong-tabil"
-  },
-  "instance.settings.tabs.window.height": {
-    "message": "Gitas-on"
-  },
-  "instance.settings.tabs.window.height.enter": {
-    "message": "Ibutang ang gitas-on..."
-  },
-  "instance.settings.tabs.window.width": {
-    "message": "Gilapdon"
-  },
-  "instance.settings.tabs.window.width.enter": {
-    "message": "Ibutang ang gilapdon..."
-  },
-  "instance.settings.title": {
-    "message": "Mga Himutangan"
-  },
-  "instance.worlds.a_minecraft_server": {
-    "message": "Usa ka Minecraft nga Magsisilbi"
-  },
-  "instance.worlds.copy_address": {
-    "message": "Awata ang padad-anan"
-  },
-  "instance.worlds.dont_show_on_home": {
-    "message": "Ayaw pakit-a sa Puloy-anan"
-  },
-  "instance.worlds.filter.available": {
-    "message": "Magamit"
-  },
-  "instance.worlds.hardcore": {
-    "message": "Mahanasnon nga paagi"
-  },
-  "instance.worlds.play_instance": {
-    "message": "Dulai ang pananglitan"
-  },
-  "instance.worlds.type.server": {
-    "message": "Magsisilbi"
-  },
-  "instance.worlds.type.singleplayer": {
-    "message": "Inusara nga dula"
-  },
-  "instance.worlds.view_instance": {
-    "message": "Tan-awa ang pananglitan"
-  },
-  "instance.worlds.world_in_use": {
-    "message": "Gigamit ang kalibotan"
-  },
-  "search.filter.locked.instance.sync": {
-    "message": "Pagdungan sa pananglitan"
-  }
-}

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

@@ -1,4 +1,55 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "Autořizační servery Minecraftu aktuálně nejsou k dispozici. Zkontrolujte si své připojení k internetu a zkuste to znovu později."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "Připojení k autorizačním serverům se nezdařilo"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "Nainstaluj ke hraní"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "Instalovat"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": "{count, plural,one  {#mód} other  {#módy}}"
+  },
+  "app.modal.install-to-play.shared-instance": {
+    "message": "Sdílená instance"
+  },
+  "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."
   },
@@ -17,39 +68,15 @@
   "app.settings.tabs.java-installations": {
     "message": "Instalace Javy"
   },
+  "app.settings.tabs.language": {
+    "message": "Jazyk"
+  },
   "app.settings.tabs.privacy": {
     "message": "Soukromí"
   },
   "app.settings.tabs.resource-management": {
     "message": "Správa zdrojů"
   },
-  "app.update-toast.body": {
-    "message": "Modrinth App v{version} je připravena k instalaci! Znovu načtěte aktualizaci nyní nebo automaticky po zavření aplikace Modrinth."
-  },
-  "app.update-toast.body.download-complete": {
-    "message": "Modrinth App v{version} byla dokončena ke stažení. Znovu načtěte aktualizaci nyní nebo automaticky po zavření aplikace Modrinth."
-  },
-  "app.update-toast.body.metered": {
-    "message": "Modrinth App v{version} je nyní k dispozici! Protože jste v síti s měřením, nebyla stažena automaticky."
-  },
-  "app.update-toast.changelog": {
-    "message": "Seznam změn"
-  },
-  "app.update-toast.download": {
-    "message": "Stáhnout ({size})"
-  },
-  "app.update-toast.downloading": {
-    "message": "Stahování..."
-  },
-  "app.update-toast.reload": {
-    "message": "Načíst znovu"
-  },
-  "app.update-toast.title": {
-    "message": "K dispozici je aktualizace"
-  },
-  "app.update-toast.title.download-complete": {
-    "message": "Stahování dokončeno"
-  },
   "app.update.complete-toast.text": {
     "message": "Kliknutím sem zobrazíte seznam změn."
   },
@@ -63,7 +90,70 @@
     "message": "Stahování aktualizace ({percent}%)"
   },
   "app.update.reload-to-update": {
-    "message": "Znovu načíst pro nainstalování aktualizace"
+    "message": "Restartovat aplikaci pro nainstalování aktualizace"
+  },
+  "friends.action.add-friend": {
+    "message": "Přidat přítele"
+  },
+  "friends.action.view-friend-requests": {
+    "message": "{count} {count, plural, one {žádost} few {žádosti} other {žádostí}} o přátelství"
+  },
+  "friends.add-friend.submit": {
+    "message": "Poslat žádost o přátelství"
+  },
+  "friends.add-friend.title": {
+    "message": "Přidávání kamaráda"
+  },
+  "friends.add-friend.username.description": {
+    "message": "Může být jiné než jejich Minecraft jméno!"
+  },
+  "friends.add-friend.username.placeholder": {
+    "message": "Zadejte uživatelské jméno Modrinth..."
+  },
+  "friends.add-friend.username.title": {
+    "message": "Jak se váš kamarád jmenuje na Modrinthu?"
+  },
+  "friends.add-friends-to-share": {
+    "message": "<link>Přidejte si přátelé</link> a podívejte se, co hrají!"
+  },
+  "friends.friend.cancel-request": {
+    "message": "Zrušit žádost"
+  },
+  "friends.friend.remove-friend": {
+    "message": "Odebrat přítele"
+  },
+  "friends.friend.request-sent": {
+    "message": "Žádost o přátelství odeslána"
+  },
+  "friends.friend.view-profile": {
+    "message": "Zobrazit profil"
+  },
+  "friends.heading": {
+    "message": "Kamarádi"
+  },
+  "friends.heading.active": {
+    "message": "Aktivní"
+  },
+  "friends.heading.offline": {
+    "message": "Offline"
+  },
+  "friends.heading.online": {
+    "message": "Online"
+  },
+  "friends.heading.pending": {
+    "message": "Čeká na vyřízení"
+  },
+  "friends.no-friends-match": {
+    "message": "Žádní přátelé neodpovídají '{query}''"
+  },
+  "friends.search-friends-placeholder": {
+    "message": "Hledat přátele..."
+  },
+  "friends.section.heading": {
+    "message": "{title} - {count}"
+  },
+  "friends.sign-in-to-add-friends": {
+    "message": "<link>Přihlašte se ke svému Modrinth účtu</link>, abyste jsi přidali přátele a uviděli co hrají!"
   },
   "instance.add-server.add-and-play": {
     "message": "Přidat a hrát"
@@ -78,7 +168,7 @@
     "message": "Zapnuto"
   },
   "instance.add-server.resource-pack.prompt": {
-    "message": "Na dotaz"
+    "message": "Ptát se"
   },
   "instance.add-server.title": {
     "message": "Přidat server"
@@ -87,7 +177,7 @@
     "message": "Upravit server"
   },
   "instance.edit-world.hide-from-home": {
-    "message": "Schovat z domovské stránky"
+    "message": "Skrýt z domovské obrazovky"
   },
   "instance.edit-world.name": {
     "message": "Název"
@@ -96,16 +186,16 @@
     "message": "Minecraft svět"
   },
   "instance.edit-world.reset-icon": {
-    "message": "Reset ikony"
+    "message": "Resetovat ikonu"
   },
   "instance.edit-world.title": {
     "message": "Upravit svět"
   },
   "instance.filter.disabled": {
-    "message": "Vypnout projekty"
+    "message": "Vypnuté projekty"
   },
   "instance.filter.updates-available": {
-    "message": "Aktualizace jsou dostupné"
+    "message": "K dispozice jsou aktualizace"
   },
   "instance.server-modal.address": {
     "message": "Adresa"
@@ -117,19 +207,19 @@
     "message": "Minecraft Server"
   },
   "instance.server-modal.resource-pack": {
-    "message": "Balíček textur"
+    "message": "Balíčky textur"
   },
   "instance.settings.tabs.general": {
     "message": "Obecné"
   },
   "instance.settings.tabs.general.delete": {
-    "message": "Smazat instanci"
+    "message": "Odstranit instalaci"
   },
   "instance.settings.tabs.general.delete.button": {
-    "message": "Smazat instanci"
+    "message": "Odstranit instalaci"
   },
   "instance.settings.tabs.general.delete.description": {
-    "message": "Trvale smaže instanci z vašeho zařízení, včetně vašich světů, konfigurací a veškerého nainstalovaného obsahu. Buďte opatrní, protože jakmile instanci smažete, není možné ji obnovit."
+    "message": "Trvale smaže instalaci z vašeho zařízení, včetně vašich světů, konfigurací a veškerého nainstalovaného obsahu. Buďte opatrní, protože jakmile instalaci smažete, nebude možné ji obnovit."
   },
   "instance.settings.tabs.general.deleting.button": {
     "message": "Mazání..."
@@ -141,34 +231,34 @@
     "message": "Nelze duplikovat při instalaci."
   },
   "instance.settings.tabs.general.duplicate-instance": {
-    "message": "Duplikovat instanci"
+    "message": "Duplikovat instalaci"
   },
   "instance.settings.tabs.general.duplicate-instance.description": {
-    "message": "Vytvoří kopii této instance, včetně světů, konfigurací, modů atd."
+    "message": "Vytvoří kopii této instalace, včetně světů, konfigurací, modů atd."
   },
   "instance.settings.tabs.general.edit-icon": {
     "message": "Upravit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.remove": {
-    "message": "Icona odstranit"
+    "message": "Odstranit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.replace": {
-    "message": "Ikona replikace"
+    "message": "Změnit ikonu"
   },
   "instance.settings.tabs.general.edit-icon.select": {
-    "message": "Výber ikona"
+    "message": "Vybrat ikonu"
   },
   "instance.settings.tabs.general.library-groups": {
     "message": "Skupina knihoven"
   },
   "instance.settings.tabs.general.library-groups.create": {
-    "message": "Vytvoří novou skupinu"
+    "message": "Vytvořit novou skupinu"
   },
   "instance.settings.tabs.general.library-groups.description": {
-    "message": "Skupiny knihoven vám umožňují uspořádat instance do různých sekcí v knihovně."
+    "message": "Skupiny knihoven vám umožňují uspořádat instalace do různých sekcí."
   },
   "instance.settings.tabs.general.library-groups.enter-name": {
-    "message": "Zadej název skupiny"
+    "message": "Zadejte název skupiny"
   },
   "instance.settings.tabs.general.name": {
     "message": "Název"
@@ -195,7 +285,7 @@
     "message": "Před spuštěním"
   },
   "instance.settings.tabs.hooks.pre-launch.description": {
-    "message": "Spouštějí se před spuštěním instance."
+    "message": "Spouštějí se před spuštěním instalace."
   },
   "instance.settings.tabs.hooks.pre-launch.enter": {
     "message": "Zadejte příkaz k provedení před spuštěním..."
@@ -216,28 +306,28 @@
     "message": "Instalace"
   },
   "instance.settings.tabs.installation.change-version.already-installed.modded": {
-    "message": "{platform} {version} pro Minecraft {game_version} již nainstalována"
+    "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ž nainstalována"
+    "message": "Vanilla {game_version} již je nainstalována"
   },
   "instance.settings.tabs.installation.change-version.button": {
-    "message": "Změnit instalaci"
+    "message": "Změnit verzi"
   },
   "instance.settings.tabs.installation.change-version.button.install": {
     "message": "Instalovat"
   },
   "instance.settings.tabs.installation.change-version.button.installing": {
-    "message": "Instalace"
+    "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ých verzí"
+    "message": "Instalace nové verze"
   },
   "instance.settings.tabs.installation.currently-installed": {
-    "message": "Aktuální instalace"
+    "message": "Aktuálně nainstalováno"
   },
   "instance.settings.tabs.installation.debug-information": {
     "message": "Debugové informace:"
@@ -252,7 +342,7 @@
     "message": "Instalovat"
   },
   "instance.settings.tabs.installation.install.in-progress": {
-    "message": "Probíhající instalace"
+    "message": "Probíhá instalace"
   },
   "instance.settings.tabs.installation.loader-version": {
     "message": "{loader} verze"
@@ -261,13 +351,13 @@
     "message": "Minecraft {version}"
   },
   "instance.settings.tabs.installation.no-connection": {
-    "message": "Nelze načíst podrobnosti o modpacku. Zkontrolujte připojení k internetu."
+    "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, ale modpack nebyl najit na Modrinthu."
+    "message": "Tato instalace je připojená k modpacku, který ake nebyl najit na Modrinthu."
   },
   "instance.settings.tabs.installation.platform": {
     "message": "Platforma"
@@ -279,7 +369,7 @@
     "message": "Přeinstalovávání modpacku"
   },
   "instance.settings.tabs.installation.reinstall.confirm.description": {
-    "message": "Přeinstalace resetuje veškerý nainstalovaný nebo upravený obsah na to, co poskytuje modpack, a odstraní všechny mody nebo obsah, které jste přidali do původní instalaci. To může opravit neočekávané chyby, ale pokud vaše světy závisejí na nově instalovaném obsahu, možná budou poškozeny."
+    "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?"
@@ -312,7 +402,7 @@
     "message": "Ukázat všechny verze"
   },
   "instance.settings.tabs.installation.tooltip.action.change-version": {
-    "message": "Změnit verzi"
+    "message": "změnit verzi"
   },
   "instance.settings.tabs.installation.tooltip.action.install": {
     "message": "Instalovat"
@@ -398,9 +488,6 @@
   "instance.settings.tabs.window.width.enter": {
     "message": "Zadejte šířku..."
   },
-  "instance.settings.title": {
-    "message": "Nastavení"
-  },
   "instance.worlds.a_minecraft_server": {
     "message": "Minecraft Server"
   },
@@ -432,7 +519,7 @@
     "message": "Můžeš rovnou skočit na server pouze v Minecraftu Alpha 1.0.5+"
   },
   "instance.worlds.no_singleplayer_quick_play": {
-    "message": "Můžeš rovnou skočit do světa jednoho hráče pouze v Minecraftu 1.20+"
+    "message": "Můžeš se rovnou připojit do světa jednoho hráče pouze v Minecraftu 1.20+"
   },
   "instance.worlds.play_instance": {
     "message": "Hrát instanci"

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

@@ -1,4 +1,52 @@
 {
+  "app.auth-servers.unreachable.body": {
+    "message": "Minecraft authentication servere kan måske være nede lige nu. Tjek din internet forbindelse og prøv igen senere."
+  },
+  "app.auth-servers.unreachable.header": {
+    "message": "Kan ikke nå autentificeringsservere"
+  },
+  "app.modal.install-to-play.header": {
+    "message": "Installer for at spille"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "Installer"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": "{count, plural, one {# mod} other {# mods}}"
+  },
+  "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.update-to-play.diff-type.added": {
+    "message": "Tilføjet"
+  },
+  "app.modal.update-to-play.diff-type.removed": {
+    "message": "Fjernet"
+  },
+  "app.modal.update-to-play.diff-type.updated": {
+    "message": "Opdateret"
+  },
+  "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."
   },
@@ -17,39 +65,15 @@
   "app.settings.tabs.java-installations": {
     "message": "Javainstallationer"
   },
+  "app.settings.tabs.language": {
+    "message": "Sprog"
+  },
   "app.settings.tabs.privacy": {
     "message": "Privatliv"
   },
   "app.settings.tabs.resource-management": {
     "message": "Ressourcestyring"
   },
-  "app.update-toast.body": {
-    "message": "Modrinth App v{version} er allerede installeret! Genindlæs for at opdatere nu, eller automatisk når du lukker Modrinth App."
-  },
-  "app.update-toast.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-toast.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-toast.changelog": {
-    "message": "Ændringslog"
-  },
-  "app.update-toast.download": {
-    "message": "Download ({size})"
-  },
-  "app.update-toast.downloading": {
-    "message": "Downloader..."
-  },
-  "app.update-toast.reload": {
-    "message": "Geninlæs"
-  },
-  "app.update-toast.title": {
-    "message": "Opdatering tilgængelig"
-  },
-  "app.update-toast.title.download-complete": {
-    "message": "Download færdiggjort"
-  },
   "app.update.complete-toast.text": {
     "message": "Klik her for at vise ændringslog."
   },
@@ -252,7 +276,7 @@
     "message": "Kørte efter spillet lukkes."
   },
   "instance.settings.tabs.hooks.post-exit.enter": {
-    "message": "Indskriv post-exit kommando..."
+    "message": "Indtast post-exit kommando..."
   },
   "instance.settings.tabs.hooks.pre-launch": {
     "message": "Pre-launch"
@@ -261,7 +285,7 @@
     "message": "Kørt før en instance bliver kørt."
   },
   "instance.settings.tabs.hooks.pre-launch.enter": {
-    "message": "Indskriv pre-launch kommando..."
+    "message": "Indtast pre-launch kommando..."
   },
   "instance.settings.tabs.hooks.title": {
     "message": "Spille lunch hooks"
@@ -273,7 +297,7 @@
     "message": "Wrapper kommando for at køre Minecraft."
   },
   "instance.settings.tabs.hooks.wrapper.enter": {
-    "message": "Indskriv wrapper kommando..."
+    "message": "Indtast wrapper kommando..."
   },
   "instance.settings.tabs.installation": {
     "message": "Installation"
@@ -450,7 +474,7 @@
     "message": "Højden af spillevinduet når kørt."
   },
   "instance.settings.tabs.window.height.enter": {
-    "message": "Indskriv højde..."
+    "message": "Indtast højde..."
   },
   "instance.settings.tabs.window.width": {
     "message": "Bredde"
@@ -459,10 +483,7 @@
     "message": "Bredden på spille vinduet når kørt."
   },
   "instance.settings.tabs.window.width.enter": {
-    "message": "Indskriv bredde..."
-  },
-  "instance.settings.title": {
-    "message": "Indstillinger"
+    "message": "Indtast bredde..."
   },
   "instance.worlds.a_minecraft_server": {
     "message": "En Minecraft server"