Revert DashMap changes for try_join_all

fix shear
Daedalus doesn't instantly fail when upstream loses versions
2026-08-01 05:36:39 +00:00 · 2026-03-10 17:25:50 +00:00 · 2026-03-10 16:37:34 +00:00 · 2026-03-10 16:11:58 +00:00 · 2026-03-09 22:10:32 +00:00 · 2026-03-09 21:29:32 +00:00
2568 changed files with 411896 additions and 123062 deletions
@@ -1,6 +1,6 @@
 # Windows has stack overflows when calling from Tauri, so we increase the default stack size used by the compiler
 [target.'cfg(windows)']
-rustflags = ["-C", "link-args=/STACK:16777220", "--cfg", "tokio_unstable"]
+rustflags = ["-C", "link-args=/STACK:16777220"]

-[build]
-rustflags = ["--cfg", "tokio_unstable"]
+[target.x86_64-pc-windows-msvc]
+linker = "rust-lld"
@@ -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`
@@ -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
@@ -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
@@ -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.
@@ -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>`.
@@ -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.
@@ -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
@@ -3,16 +3,23 @@ root = true

 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 max_line_length = 100

 [*.md]
+indent_size = 2
 max_line_length = off
-trim_trailing_whitespace = false

-[*.{rs,java,kts}]
-indent_size = 4
+[*.{toml,json}]
+indent_size = 2
+
+# YAML requires space indentation by spec
+[*.{yml,yaml}]
+indent_size = 2
+indent_style = space
+
+[*.rs]
+indent_style = space
@@ -1,6 +1,7 @@
-name: 🎮 Modrinth App bug
-description: Report an issue in the Modrinth Launcher.
-labels: [bug, app]
+name: 🎮 Bug with Modrinth App
+description: For issues with Modrinth App.
+labels: [app]
+type: 'bug'
 body:
  - type: checkboxes
    attributes:
@@ -1,6 +1,7 @@
-name: 🌐 Website bug (modrinth.com)
-description: Report an issue on the Modrinth website.
-labels: [bug, web]
+name: 🌐 Bug with Modrinth.com
+description: For issues with the Modrinth website.
+labels: [website]
+type: 'bug'
 body:
  - type: checkboxes
    attributes:
@@ -0,0 +1,63 @@
+name: 👥 Bug with Modrinth Hosting
+description: For issues with a Modrinth Hosting product.
+labels: [hosting]
+type: 'bug'
+body:
+  - type: checkboxes
+    attributes:
+      label: Please confirm the following.
+      options:
+        - label: I checked the [existing issues](https://github.com/modrinth/code/issues?q=is%3Aissue) for duplicate problems
+          required: true
+        - label: I have tried resolving the issue using the [support portal](https://support.modrinth.com)
+          required: true
+  - type: dropdown
+    id: issue-location
+    attributes:
+      label: Is this an issue in the control panel or with the Minecraft server itself?
+      options:
+        - Control panel (on Modrinth.com)
+        - Minecraft server
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on? (if a panel issue)
+      multiple: true
+      options:
+        - N/A
+        - Chrome (including Arc, Brave, Opera, Vivaldi)
+        - Microsoft Edge
+        - Firefox
+        - Safari
+        - Other (please specify)
+  - type: textarea
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. Include screenshots if applicable.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+    validations:
+      required: false
@@ -1,6 +1,7 @@
-name: 🛠️ API issue (api.modrinth.com)
-description: Report an issue regarding the Modrinth API.
-labels: [bug, backend]
+name: 🛠 Bug with Modrinth API
+description: For issues with the Modrinth API for developers.
+labels: [api, backend]
+type: 'bug'
 body:
  - type: checkboxes
    attributes:
@@ -1,6 +1,6 @@
-name: 💡 Feature Request
+name: 💡 Feature request
 description: Suggest an idea
-labels: [enhancement]
+type: 'feature'

 body:
  - type: checkboxes
@@ -17,9 +17,10 @@ body:
      label: What parts of Modrinth is your feature request related too?
      multiple: true
      options:
-        - App
-        - Website
-        - API
+        - Modrinth App
+        - Modrinth.com website
+        - Modrinth Hosting
+        - Modrinth API for developers
  - type: textarea
    attributes:
      label: Is your suggested feature related to a problem? Please describe.
@@ -1,14 +1,8 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
-  - name: 🫶 Support Portal
-    about: Get support using through our portal.
+  - name: 🫶 Support portal
+    about: Get support using through our support website.
    url: https://support.modrinth.com
-  - name: 💬 Chat
+  - name: 💬 Chat on Discord
    about: Join our Discord server to chat about Modrinth.
    url: https://discord.modrinth.com
-  - name: 🛣️ Roadmap
-    about: View our Roadmap. Please do not open issues for items on our roadmap.
-    url: https://roadmap.modrinth.com
-  - name: 📚 Documentation
-    about: Useful documentation about Modrinth's API
-    url: https://docs.modrinth.com
@@ -0,0 +1,86 @@
+---
+applyTo: '**/*.vue'
+---
+
+You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using vue-i18n with utilities from `@modrinth/ui`.
+
+Please follow these rules precisely:
+
+1. Identify translatable strings
+
+- Scan the <template> for all user-visible strings (inner text, alt attributes, placeholders, button labels, etc.). Do not extract dynamic expressions (like {{ user.name }}) or HTML tags. Only extract static human-readable text.
+- There may be strings within the <script> block, e.g dropdown option labels, notifications etc.
+
+2. Create message definitions
+
+- In the <script setup> block, import `defineMessage` or `defineMessages` from `@modrinth/ui`.
+- For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
+  Example:
+  const messages = defineMessages({
+  welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
+  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You're now part of the community…' },
+  })
+
+3. Handle variables and ICU formats
+
+- Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
+- For numbers/dates/times, use ICU options (e.g., currency): `{price, number, ::currency/USD}`
+- For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
+
+4. Rich-text messages (links/markup)
+
+- In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
+  "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
+- Render rich-text messages with `<IntlFormatted>` from `@modrinth/ui` using named slots:
+  <IntlFormatted :message-id="messages.tosLabel">
+    <template #terms-link="{ children }">
+      <NuxtLink to="/terms">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+    <template #privacy-link="{ children }">
+      <NuxtLink to="/privacy">
+        <component :is="() => children" />
+      </NuxtLink>
+    </template>
+  </IntlFormatted>
+- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` with a slot:
+  <template #strong="{ children }">
+    <strong><component :is="() => children" /></strong>
+  </template>
+- For more complex child handling, use `normalizeChildren` from `@modrinth/ui`:
+  <template #bold="{ children }">
+    <strong><component :is="() => normalizeChildren(children)" /></strong>
+  </template>
+
+5. Formatting in templates
+
+- Import and use `useVIntl()` from `@modrinth/ui`; prefer `formatMessage` for simple strings:
+  `const { formatMessage } = useVIntl()`
+  `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
+- Pass variables as a second argument:
+  `{{ formatMessage(messages.greeting, { name: user.name }) }}`
+
+6. Naming conventions and id stability
+
+- Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
+
+7. Avoid Vue/ICU delimiter collisions
+
+- If an ICU placeholder would end right before `}}` in a Vue template, insert a space so it becomes `} }` to avoid parsing issues.
+
+8. Update imports and remove literals
+
+- Ensure imports from `@modrinth/ui` are present: `defineMessage`/`defineMessages`, `useVIntl`, `IntlFormatted`, and optionally `normalizeChildren`.
+- Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
+
+9. Preserve functionality
+
+- Do not change logic, layout, reactivity, or bindings—only refactor strings into i18n.
+
+Use existing patterns from our codebase:
+
+- Variables/plurals: see `apps/frontend/src/pages/frog.vue`
+- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+
+When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.
@@ -0,0 +1,4 @@
+This pull request is created according to the `.github/workflows/i18n-pull.yml` file.
+
+- 🌐 [Contribute to translations on Crowdin](https://translate.modrinth.com/)
+- 🔄 [Dispatch this workflow again to update this PR](https://github.com/Modrinth/code/actions/workflows/i18n-pull.yml)
@@ -0,0 +1,3 @@
+# Copying
+
+Modrinth's Github workflows are licensed under the MIT License, which is provided in the file [LICENSE](./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.
@@ -0,0 +1,27 @@
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  CARGO_TERM_COLOR: always
+  SQLX_OFFLINE: true
+
+jobs:
+  typos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: crate-ci/typos@v1.43.1
+
+  # 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
@@ -0,0 +1,19 @@
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  CARGO_TERM_COLOR: always
+  SQLX_OFFLINE: true
+
+jobs:
+  shear:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: cargo-bins/cargo-binstall@main
+      - run: cargo binstall --no-confirm cargo-shear
+      - run: cargo shear
@@ -21,24 +21,42 @@ jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Fetch docker metadata
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
+
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: ⚙️ Generate Docker image metadata
        id: docker_meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
        with:
          images: ghcr.io/modrinth/daedalus
-      - name: Login to GitHub Images
-        uses: docker/login-action@v1
+          labels: |
+            org.opencontainers.image.title=daedalus
+            org.opencontainers.image.description=Modrinth game metadata query client
+            org.opencontainers.image.licenses=MIT
+          annotations: |
+            org.opencontainers.image.title=daedalus
+            org.opencontainers.image.description=Modrinth game metadata query client
+            org.opencontainers.image.licenses=MIT
+
+      - name: 🔑 Login to GitHub Packages
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v2
+
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
        with:
          file: ./apps/daedalus_client/Dockerfile
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.docker_meta.outputs.tags }}
          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/daedalus:main
+          cache-to: type=inline
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,108 @@
+name: Crowdin (pull)
+
+on:
+  schedule:
+    - cron: '0 7 * * MON' # every monday at 7 am
+  workflow_dispatch:
+
+concurrency:
+  group: i18n-management
+
+jobs:
+  pull_translations:
+    name: 'Pull translations from Crowdin'
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    concurrency:
+      group: i18n-pull:${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: Preflight check
+        run: |
+          PREFLIGHT_CHECK_RESULT=true
+
+          function flight_failure () {
+            if [ "$PREFLIGHT_CHECK_RESULT" = true ]; then
+              echo "One or more pre-flight checks failed!"
+              echo ""
+              PREFLIGHT_CHECK_RESULT=false
+            fi
+            echo "- $1"
+          }
+
+          if [ "$CROWDIN_PROJECT_ID_DEFINED" != true ]; then
+            flight_failure "CROWDIN_PROJECT_ID variable is not defined (required to push)"
+          fi
+
+          if [ "$CROWDIN_PERSONAL_TOKEN_DEFINED" != true ]; then
+            flight_failure "CROWDIN_PERSONAL_TOKEN secret is not defined (required to push)"
+          fi
+
+          if [ "$CROWDIN_GH_TOKEN_DEFINED" != true ]; then
+            flight_failure "CROWDIN_GH_TOKEN secret is not defined (required to make pull requests)"
+          fi
+
+          if [ "$PREFLIGHT_CHECK_RESULT" = false ]; then
+            exit 1
+          fi
+        env:
+          CROWDIN_PROJECT_ID_DEFINED: ${{ vars.CROWDIN_PROJECT_ID != '' }}
+          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
+          CROWDIN_GH_TOKEN_DEFINED: ${{ secrets.CROWDIN_GH_TOKEN != '' }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref }}
+          token: ${{ secrets.CROWDIN_GH_TOKEN }}
+
+      - name: Configure Git author
+        id: git-author
+        uses: MarcoIeni/git-config@v0.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.CROWDIN_GH_TOKEN }}
+
+      # # Because --all flag of Crowdin CLI is currently broken we need to create a fake source file
+      # # so that the CLI won't omit translations for it. See https://github.com/crowdin/crowdin-cli/issues/724
+      # - name: Write fake sources
+      #   shell: bash
+      #   run: echo "{}" > locales/en-US/index.json
+
+      - name: Query branch name
+        id: branch-name
+        shell: bash
+        run: |
+          BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+          SAFE_BRANCH_NAME=$(echo "$BRANCH_NAME" | sed -e "s/[\\\\/\\:*?\"<>|]/_/g")
+          echo "Branch name is $BRANCH_NAME (escaped as $SAFE_BRANCH_NAME)"
+          echo "branch_name=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
+          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Download translations from Crowdin
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: false
+          upload_translations: false
+          download_translations: true
+          push_translations: false
+          create_pull_request: false
+          crowdin_branch_name: '[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}'
+        env:
+          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+
+      - name: Fix broken permissions
+        shell: bash
+        run: sudo chown -R $USER:$USER .
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          title: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
+          body-path: .github/templates/crowdin-pr.md
+          commit-message: 'New translations from Crowdin (${{ steps.branch-name.outputs.branch_name }})'
+          branch: crowdin-pull/${{ steps.branch-name.outputs.branch_name }}
+          author: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>'
+          committer: '${{ steps.git-author.outputs.name }} <${{ steps.git-author.outputs.email }}>'
+          labels: sync
+          token: ${{ secrets.CROWDIN_GH_TOKEN }}
@@ -0,0 +1,81 @@
+name: Crowdin (push)
+
+on:
+  push:
+    branches: ['main']
+    paths:
+      - '.github/workflows/i18n.push.yml'
+      - 'apps/*/src/locales/en-US/**'
+      - 'apps/*/locales/en-US/**'
+      - 'packages/*/src/locales/en-US/**'
+      - 'packages/*/locales/en-US/**'
+      - 'crowdin.yml'
+  workflow_dispatch:
+
+concurrency:
+  group: i18n-management
+
+jobs:
+  push_translations:
+    name: Push sources to Crowdin
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    concurrency:
+      group: i18n-push:${{ github.ref }}
+      cancel-in-progress: true
+    steps:
+      - name: Preflight check
+        run: |
+          PREFLIGHT_CHECK_RESULT=true
+
+          function flight_failure () {
+            if [ "$PREFLIGHT_CHECK_RESULT" = true ]; then
+              echo "One or more pre-flight checks failed!"
+              echo ""
+              PREFLIGHT_CHECK_RESULT=false
+            fi
+            echo "- $1"
+          }
+
+          if [ "$CROWDIN_PROJECT_ID_DEFINED" != true ]; then
+            flight_failure "CROWDIN_PROJECT_ID variable is not defined (required to push)"
+          fi
+
+          if [ "$CROWDIN_PERSONAL_TOKEN_DEFINED" != true ]; then
+            flight_failure "CROWDIN_PERSONAL_TOKEN secret is not defined (required to push)"
+          fi
+
+          if [ "$PREFLIGHT_CHECK_RESULT" = false ]; then
+            exit 1
+          fi
+        env:
+          CROWDIN_PROJECT_ID_DEFINED: ${{ vars.CROWDIN_PROJECT_ID != '' }}
+          CROWDIN_PERSONAL_TOKEN_DEFINED: ${{ secrets.CROWDIN_PERSONAL_TOKEN != '' }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.ref }}
+
+      - name: Query branch name
+        id: branch-name
+        shell: bash
+        run: |
+          BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+          SAFE_BRANCH_NAME=$(echo "$BRANCH_NAME" | sed -e "s/[\\\\/\\:*?\"<>|]/_/g")
+          echo "Branch name is $BRANCH_NAME (escaped as $SAFE_BRANCH_NAME)"
+          echo "branch_name=$BRANCH_NAME" >> "$GITHUB_OUTPUT"
+          echo "safe_branch_name=$SAFE_BRANCH_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Upload translations to Crowdin
+        uses: crowdin/github-action@v1
+        with:
+          upload_sources: true
+          upload_translations: false
+          download_translations: false
+          push_translations: false
+          create_pull_request: false
+          crowdin_branch_name: '[${{ github.repository_owner }}.${{ github.event.repository.name }}] ${{ steps.branch-name.outputs.safe_branch_name }}'
+        env:
+          CROWDIN_PROJECT_ID: ${{ vars.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
@@ -7,11 +7,15 @@ on:
    paths:
      - .github/workflows/labrinth-docker.yml
      - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
  pull_request:
    types: [opened, synchronize]
    paths:
      - .github/workflows/labrinth-docker.yml
      - 'apps/labrinth/**'
+      - Cargo.toml
+      - Cargo.lock
  merge_group:
    types: [checks_requested]

@@ -19,24 +23,48 @@ jobs:
  docker:
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Fetch docker metadata
+      - name: 📥 Check out code
+        uses: actions/checkout@v4
+
+      - name: 🧰 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: ⚙️ Generate Docker image metadata
        id: docker_meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v5
+        env:
+          # GitHub Packages requires annotations metadata in at least the index descriptor to show them
+          # up properly in its UI it seems, but it's not clear about it, because the docs refer to the
+          # image manifest only. See:
+          # https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#adding-a-description-to-multi-arch-images
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest,index
        with:
          images: ghcr.io/modrinth/labrinth
-      - name: Login to GitHub Images
-        uses: docker/login-action@v1
+          labels: |
+            org.opencontainers.image.title=labrinth
+            org.opencontainers.image.description=Modrinth API
+            org.opencontainers.image.licenses=AGPL-3.0-only
+          annotations: |
+            org.opencontainers.image.title=labrinth
+            org.opencontainers.image.description=Modrinth API
+            org.opencontainers.image.licenses=AGPL-3.0-only
+
+      - name: 🔑 Login to GitHub Packages
+        uses: docker/login-action@v3
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build and push
-        id: docker_build
-        uses: docker/build-push-action@v2
+
+      - name: 🔨 Build and push
+        uses: docker/build-push-action@v6
        with:
          file: ./apps/labrinth/Dockerfile
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.docker_meta.outputs.tags }}
          labels: ${{ steps.docker_meta.outputs.labels }}
+          annotations: ${{ steps.docker_meta.outputs.annotations }}
+          build-args: |
+            GIT_HASH=${{ fromJSON(steps.docker_meta.outputs.json).labels['org.opencontainers.image.revision'] }}
+          cache-from: type=registry,ref=ghcr.io/modrinth/labrinth:main
+          cache-to: type=inline
@@ -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:
@@ -28,45 +36,60 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        platform: [macos-latest, windows-latest, ubuntu-22.04]
+        platform: [macos-latest, windows-latest, ubuntu-latest]
        include:
          - platform: macos-latest
            artifact-target-name: universal-apple-darwin
          - platform: windows-latest
            artifact-target-name: x86_64-pc-windows-msvc
-          - platform: ubuntu-22.04
+          - platform: ubuntu-latest
            artifact-target-name: x86_64-unknown-linux-gnu

    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,22 +98,26 @@ jobs:
          rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
          chmod: 0755

-      - name: ⚙️ Set application version
+      - 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'

-      - name: 💨 Setup Turbo cache
+          cp "packages/app-lib/.env.${BUILD_ENVIRONMENT}" packages/app-lib/.env
+
+      - 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: |
@@ -100,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 }}
@@ -114,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_11_X64"
-          pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
+          $env:JAVA_HOME = "$env:JAVA_HOME_17_X64"
+          ${{ (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')) && 'pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles "nsis,updater"' || 'pnpm --filter=@modrinth/app run tauri build --config tauri-dev.conf.json --verbose --bundles "nsis,updater"' }}
          Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
        if: startsWith(matrix.platform, 'windows')
        env:
@@ -136,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 }})
@@ -144,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*
@@ -11,13 +11,18 @@ on:
 jobs:
  build:
    name: Lint and Test
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest

    env:
      # Ensure pnpm output is colored in GitHub Actions logs
      FORCE_COLOR: 3
      # Make cargo nextest successfully ignore projects without tests
      NEXTEST_NO_TESTS: pass
+      # Fail on warnings in CI
+      # (but don't do this in the root `Cargo.toml`,
+      # since we don't want warnings to become errors
+      # while developing)
+      RUSTFLAGS: -Dwarnings

    steps:
      - name: 📥 Check out code
@@ -52,7 +57,7 @@ jobs:
      # cargo-binstall does not have pre-built binaries for sqlx-cli, so we fall
      # back to a cached cargo install
      - name: 🧰 Setup cargo-sqlx
-        uses: AlexTMjugador/cache-cargo-install-action@feat/features-support
+        uses: taiki-e/cache-cargo-install-action@v2
        with:
          tool: sqlx-cli
          locked: false
@@ -65,10 +70,28 @@ 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
+      - name: ⚙️ Setup labrinth environment and database
+        if: steps.check-labrinth.outputs.needs_services == 'true'
        working-directory: apps/labrinth
        run: |
          cp .env.local .env
@@ -76,3 +99,8 @@ jobs:

      - name: 🔍 Lint and test
        run: pnpm run ci
+
+      - name: 🔍 Verify intl:extract has been run
+        run: |
+          pnpm turbo run intl:extract --force
+          git diff --exit-code --color */*/src/locales/en-US/index.json
@@ -9,7 +9,6 @@ tmp
 node_modules

 # IDEs and editors
-/.idea
 .project
 .classpath
 .c9/
@@ -24,6 +23,14 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json

+# IDE - IntelliJ
+.idea/*
+!.idea/code.iml
+!.idea/gradle.xml
+!.idea/icon.svg
+!.idea/modules.xml
+!.idea/vcs.xml
+
 # misc
 /.sass-cache
 /connect.lock
@@ -56,8 +63,18 @@ generated
 # app testing dir
 app-playground-data/*

-# soley because i need the PORT to be 3002 due to WSL stuff
-.env
-apps/frontend/.env
-
 .astro
+.claude/*
+!.claude/skills/
+.letta
+
+# labrinth demo fixtures
+apps/labrinth/fixtures/demo
+
+*storybook.log
+storybook-static
+
+.wrangler/
+
+# frontend robots.txt
+apps/frontend/src/public/robots.txt
@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml
-# Editor-based HTTP Client requests
-/httpRequests/
@@ -10,11 +10,16 @@
      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/src" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/apps/labrinth/tests" isTestSource="true" />
      <sourceFolder url="file://$MODULE_DIR$/packages/app-lib/src" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/packages/rust-common/src" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/packages/ariadne/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/path-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-log/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/examples" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-maxmind/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/modrinth-util/src" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/packages/muralpay/src" isTestSource="false" />
      <excludeFolder url="file://$MODULE_DIR$/target" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
-</module>
+</module>
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DiscordProjectSettings">
-    <option name="show" value="PROJECT_FILES" />
-    <option name="description" value="" />
-  </component>
-</project>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+	<component name="GradleMigrationSettings" migrationVersion="1"/>
+	<component name="GradleSettings">
+		<option name="linkedExternalProjectsSettings">
+			<GradleProjectSettings>
+				<option name="externalProjectPath" value="$PROJECT_DIR$/packages/app-lib/java"/>
+				<option name="gradleJvm" value="#JAVA_HOME"/>
+				<option name="modules">
+					<set>
+						<option value="$PROJECT_DIR$/packages/app-lib/java"/>
+					</set>
+				</option>
+			</GradleProjectSettings>
+		</option>
+	</component>
+</project>
@@ -0,0 +1,4 @@
+<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#00af5c"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#00af5c"/>
+</svg>
@@ -1,26 +0,0 @@
-<component name="libraryTable">
-  <library name="KotlinJavaRuntime" type="repository">
-    <properties maven-id="org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.0" />
-    <CLASSES>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0.jar!/" />
-    </CLASSES>
-    <JAVADOC>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-javadoc.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-javadoc.jar!/" />
-    </JAVADOC>
-    <SOURCES>
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk8/1.8.0/kotlin-stdlib-jdk8-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib/1.8.0/kotlin-stdlib-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-common/1.8.0/kotlin-stdlib-common-1.8.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/annotations/13.0/annotations-13.0-sources.jar!/" />
-      <root url="jar://$MAVEN_REPOSITORY$/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.8.0/kotlin-stdlib-jdk7-1.8.0-sources.jar!/" />
-    </SOURCES>
-  </library>
-</component>
@@ -1,8 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/code.iml" filepath="$PROJECT_DIR$/.idea/code.iml" />
-    </modules>
-  </component>
-</project>
+	<component name="ProjectModuleManager">
+		<modules>
+			<module fileurl="file://$PROJECT_DIR$/.idea/code.iml"
+					filepath="$PROJECT_DIR$/.idea/code.iml"/>
+			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.iml"
+					filepath="$PROJECT_DIR$/.idea/modules/theseus.iml"/>
+			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.main.iml"
+					filepath="$PROJECT_DIR$/.idea/modules/theseus.main.iml"/>
+			<module fileurl="file://$PROJECT_DIR$/.idea/modules/theseus.test.iml"
+					filepath="$PROJECT_DIR$/.idea/modules/theseus.test.iml"/>
+		</modules>
+	</component>
+</project>
@@ -1,12 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="CommitMessageInspectionProfile">
-    <profile version="1.0">
-      <inspection_tool class="CommitFormat" enabled="true" level="WARNING" enabled_by_default="true" />
-      <inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING" enabled_by_default="true" />
-    </profile>
-  </component>
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
+	<component name="CommitMessageInspectionProfile">
+		<profile version="1.0">
+			<inspection_tool class="CommitFormat" enabled="true" level="WARNING"
+							 enabled_by_default="true"/>
+			<inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING"
+							 enabled_by_default="true"/>
+		</profile>
+	</component>
+	<component name="VcsDirectoryMappings">
+		<mapping directory="" vcs="Git"/>
+	</component>
+</project>
@@ -0,0 +1,3 @@
+Cargo.lock
+pnpm-lock.yaml
+.github/**/*.png
@@ -1,9 +1,33 @@
 {
-  "prettier.endOfLine": "lf",
-  "editor.formatOnSave": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-  "editor.detectIndentation": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  }
+	"prettier.endOfLine": "lf",
+	"editor.formatOnSave": true,
+	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+	"editor.detectIndentation": false,
+	"editor.insertSpaces": false,
+	"files.eol": "\n",
+	"files.trimTrailingWhitespace": true,
+	"files.insertFinalNewline": true,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit",
+		"source.organizeImports": "always"
+	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[vue]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[scss]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[css]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[rust]": {
+		"editor.defaultFormatter": "rust-lang.rust-analyzer"
+	}
 }
@@ -0,0 +1 @@
+See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.
@@ -0,0 +1,98 @@
+# Modrinth Monorepo
+
+This is the Modrinth monorepo — it contains all Modrinth projects, both frontend and backend. When entering a project, either to edit or analyse, you should read it's CLAUDE.md.
+
+## Architecture
+
+- **Monorepo tooling:** [Turborepo](https://turbo.build/) (`turbo.jsonc`) + [pnpm workspaces](https://pnpm.io/workspaces) (`pnpm-workspace.yaml`)
+- **Frontend:** Vue 3 / Nuxt 3, Tailwind CSS v3
+- **Backend:** Rust (Labrinth API), Postgres, Clickhouse
+- **Indentation:** Use TAB everywhere, never spaces
+
+### Apps (`apps/`)
+
+| App               | Description                    |
+| ----------------- | ------------------------------ |
+| `frontend`        | Main Modrinth website (Nuxt 3) |
+| `app-frontend`    | Desktop/app frontend (Vue 3)   |
+| `app`             | Desktop/app shell (Tauri)      |
+| `app-playground`  | Testing playground for app     |
+| `labrinth`        | Backend API service            |
+| `daedalus_client` | Daedalus client implementation |
+| `docs`            | Documentation site (Astro)     |
+
+### Packages (`packages/`)
+
+| Package            | Description                                           |
+| ------------------ | ----------------------------------------------------- |
+| `ui`               | Shared Vue component library (`@modrinth/ui`)         |
+| `assets`           | Styling and auto-generated icons (`@modrinth/assets`) |
+| `api-client`       | API client for Nuxt, Tauri, and Node/browser          |
+| `app-lib`          | Shared app library                                    |
+| `blog`             | Blog system and changelog data                        |
+| `utils`            | Shared utility functions                              |
+| `moderation`       | Moderation utilities                                  |
+| `daedalus`         | Daedalus protocol                                     |
+| `tooling-config`   | ESLint, Prettier, TypeScript configs                  |
+| `ariadne`          | Analytics library                                     |
+| `modrinth-log`     | Logging utilities                                     |
+| `modrinth-maxmind` | MaxMind GeoIP                                         |
+| `modrinth-util`    | General utilities                                     |
+| `muralpay`         | Payment processing                                    |
+| `path-util`        | Path utilities                                        |
+| `sqlx-tracing`     | SQLx query tracing                                    |
+
+## Pre-PR Commands
+
+Run these from the **root** folder before opening a pull request - do not run these after each prompt the user gives you, only run when asked, ask the user a question if they want to run it if the user indicates that they are about to create a pull request.
+
+- **Website:** `pnpm prepr:frontend:web`
+- **App frontend:** `pnpm prepr:frontend:app`
+- **Frontend libs:** `pnpm prepr:frontend:lib`
+- **All frontend (app+web):** `pnpm prepr`
+- **Labrinth (backend):** See `apps/labrinth/CLAUDE.md`
+
+The website and app `prepr` commands
+
+## Dev Commands
+
+- **Website:** `pnpm web:dev` (copy `.env` template in `apps/frontend/` first)
+- **App:** `pnpm app:dev` (copy `.env` template in `packages/app-lib/` first)
+- **Storybook (packages/ui):** `pnpm storybook`
+
+## Project-Specific Instructions
+
+Each project may have its own `CLAUDE.md` with detailed instructions:
+
+- [`apps/labrinth/CLAUDE.md`](apps/labrinth/CLAUDE.md) — Backend API
+- [`apps/frontend/CLAUDE.md`](apps/frontend/CLAUDE.md) - Frontend Website
+
+## Code Guidelines
+
+### Comments
+- DO NOT use "heading" comments like: // === Helper methods === .
+- Use doc comments, but avoid inline comments unless ABSOLUTELY necessary for clarity. Code should aim to be self documenting!
+
+## Bash Guidelines
+
+### Output handling
+- DO NOT pipe output through `head`, `tail`, `less`, or `more`
+- NEVER use `| head -n X` or `| tail -n X` to truncate output
+- Run commands directly without pipes when possible
+- If you need to limit output, use command-specific flags (e.g. `git log -n 10` instead of `git log | head -10`)
+- ALWAYS read the full output — never pipe through filters
+
+### General
+- Do not create new non-source code files (e.g. Bash scripts, SQL scripts) unless explicitly prompted to
+
+## 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
@@ -2,12 +2,20 @@

 All packages in this repository are licensed under their respective licenses. For more information, refer to the LICENSE file in each package.

-For detailed information, consult each package's COPYING.md file, if available.
+For detailed information, consult each package's COPYING.md, LICENSE.txt, or LICENSE file, if available.

 ## Modrinth Branding

 The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.

-All rights reserved. © 2020-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.
@@ -8,113 +8,147 @@ members = [
  "packages/app-lib",
  "packages/ariadne",
  "packages/daedalus",
+  "packages/labrinth-derive",
+  "packages/modrinth-log",
+  "packages/modrinth-maxmind",
+  "packages/modrinth-util",
+  "packages/path-util",
 ]

 [workspace.package]
 edition = "2024"
+rust-version = "1.90.0"
+repository = "https://github.com/modrinth/code"

 [workspace.dependencies]
 actix-cors = "0.7.1"
-actix-files = "0.6.6"
-actix-http = "3.11.0"
+actix-files = "0.6.8"
+actix-http = "3.11.2"
 actix-multipart = "0.7.2"
-actix-rt = "2.10.0"
+actix-rt = "2.11.0"
 actix-web = "4.11.0"
 actix-web-prom = "0.10.0"
 actix-ws = "0.3.0"
+arc-swap = "1.7.1"
 argon2 = { version = "0.5.3", features = ["std"] }
 ariadne = { path = "packages/ariadne" }
-async_zip = "0.0.17"
-async-compression = { version = "0.4.25", default-features = false }
+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",
 ] }
-async-trait = "0.1.88"
-async-tungstenite = { version = "0.29.1", default-features = false, features = [
-  "futures-03-sink",
+async-trait = "0.1.89"
+async-tungstenite = { version = "0.31.0", default-features = false, features = [
+  "futures-03-sink"
 ] }
 async-walkdir = "2.1.0"
+async_zip = "0.0.18"
 base64 = "0.22.1"
-bitflags = "2.9.1"
-bytemuck = "1.23.0"
+bitflags = "2.9.4"
+bytemuck = "1.24.0"
 bytes = "1.10.1"
 censor = "0.3.0"
 chardetng = "0.1.17"
-chrono = "0.4.41"
-clap = "4.5.40"
-clickhouse = "0.13.3"
+chrono = "0.4.42"
+cidre = { version = "0.11.3", default-features = false, features = [
+  "macos_15_0"
+] }
+clap = "4.5.48"
+clickhouse = "0.14.0"
+color-eyre = "0.6.5"
 color-thief = "0.2.2"
-console-subscriber = "0.4.1"
+const_format = "0.2.34"
 daedalus = { path = "packages/daedalus" }
+darling = { version = "0.23" }
 dashmap = "6.1.0"
-data-url = "0.3.1"
-deadpool-redis = "0.21.1"
+data-url = "0.3.2"
+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"
-discord-rich-presence = "0.2.5"
+discord-rich-presence = "1.0.0"
 dotenv-build = "0.1.1"
 dotenvy = "0.15.7"
 dunce = "1.0.5"
 either = "1.15.0"
 encoding_rs = "0.8.35"
-enumset = "1.1.6"
-flate2 = "1.1.2"
+enumset = "1.1.10"
+eyre = "0.6.12"
+flate2 = "1.1.4"
 fs4 = { version = "0.13.1", default-features = false }
-futures = { version = "0.3.31", default-features = false }
+futures = "0.3.31"
 futures-util = "0.3.31"
-hashlink = "0.10.0"
 heck = "0.5.0"
 hex = "0.4.3"
 hickory-resolver = "0.25.2"
 hmac = "0.12.1"
-hyper-tls = "0.6.0"
-hyper-util = "0.1.14"
-iana-time-zone = "0.1.63"
-image = { version = "0.25.6", default-features = false, features = ["rayon"] }
-indexmap = "2.9.0"
-indicatif = "0.17.11"
+hyper = "1.7.0"
+hyper-rustls = { version = "0.27.7", default-features = false, features = [
+  "aws-lc-rs",
+  "http1",
+  "native-tokio",
+  "tls12",
+] }
+hyper-util = "0.1.17"
+iana-time-zone = "0.1.64"
+image = { version = "0.25.8", default-features = false, features = ["rayon"] }
+indexmap = "2.11.4"
+indicatif = "0.18.0"
 itertools = "0.14.0"
-jemalloc_pprof = "0.7.0"
-json-patch = { version = "4.0.0", default-features = false }
-lettre = { version = "0.11.17", default-features = false, features = [
+jemalloc_pprof = "0.8.1"
+json-patch = { version = "4.1.0", default-features = false }
+lettre = { version = "0.11.19", default-features = false, features = [
+  "aws-lc-rs",
  "builder",
  "hostname",
  "pool",
-  "ring",
  "rustls",
  "rustls-native-certs",
  "smtp-transport",
+  "tokio1",
+  "tokio1-rustls",
 ] }
 maxminddb = "0.26.0"
-meilisearch-sdk = { version = "0.28.0", default-features = false }
+meilisearch-sdk = { version = "0.30.0", default-features = false }
+modrinth-log = { path = "packages/modrinth-log" }
+modrinth-util = { path = "packages/modrinth-util" }
+muralpay = { path = "packages/muralpay" }
 murmur2 = "0.1.0"
-native-dialog = "0.9.0"
-notify = { version = "8.0.0", default-features = false }
-notify-debouncer-mini = { version = "0.6.0", default-features = false }
+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"
-png = "0.17.16"
+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.37.5"
+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.31.0"  # Locked on 0.31 until deadpool-redis updates to 0.32
-regex = "1.11.1"
-reqwest = { version = "0.12.20", default-features = false }
-rgb = "0.8.50"
-rust_decimal = { version = "1.37.2", features = [
+redis = "0.32.7"
+regex = "1.12.2"
+reqwest = { version = "0.12.24", default-features = false }
+rgb = "0.8.52"
+rust_decimal = { version = "1.39.0", features = [
  "serde-with-float",
-  "serde-with-str",
+  "serde-with-str"
 ] }
 rust_iso3166 = "0.1.14"
-rust-s3 = { version = "0.35.1", default-features = false, features = [
+rust-s3 = { version = "0.37.0", default-features = false, features = [
  "fail-on-err",
  "tags",
  "tokio-rustls-tls",
 ] }
+rustls = "0.23.32"
 rusty-money = "0.4.1"
-sentry = { version = "0.41.0", default-features = false, features = [
+secrecy = "0.10.3"
+sentry = { version = "0.45.0", default-features = false, features = [
  "backtrace",
  "contexts",
  "debug-images",
@@ -122,57 +156,69 @@ sentry = { version = "0.41.0", default-features = false, features = [
  "reqwest",
  "rustls",
 ] }
-sentry-actix = "0.41.0"
-serde = "1.0.219"
-serde_bytes = "0.11.17"
+serde = "1.0.228"
+serde_bytes = "0.11.19"
 serde_cbor = "0.11.2"
 serde_ini = "0.2.0"
-serde_json = "1.0.140"
-serde_with = "3.13.0"
+serde_json = "1.0.145"
+serde_with = "3.15.0"
 serde-xml-rs = "0.8.1"  # Also an XML (de)serializer, consider dropping yaserde in favor of this
 sha1 = "0.10.6"
 sha1_smol = { version = "1.0.1", features = ["std"] }
 sha2 = "0.10.9"
-spdx = "0.10.8"
+shlex = "1.3.0"
+spdx = "0.12.0"
 sqlx = { version = "0.8.6", default-features = false }
-sysinfo = { version = "0.35.2", 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.6.1"
-tauri-build = "2.3.0"
-tauri-plugin-deep-link = "2.4.0"
-tauri-plugin-dialog = "2.3.0"
-tauri-plugin-http = "2.5.0"
-tauri-plugin-opener = "2.4.0"
-tauri-plugin-os = "2.3.0"
-tauri-plugin-single-instance = "2.3.0"
+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.7"
+tauri-plugin-opener = "2.5.0"
+tauri-plugin-os = "2.3.1"
+tauri-plugin-single-instance = "2.3.4"
 tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
  "rustls-tls",
  "zip",
 ] }
-tauri-plugin-window-state = "2.3.0"
-tempfile = "3.20.0"
+tauri-plugin-window-state = "2.4.0"
+tempfile = "3.23.0"
 theseus = { path = "packages/app-lib" }
-thiserror = "2.0.12"
+thiserror = "2.0.17"
 tikv-jemalloc-ctl = "0.6.0"
 tikv-jemallocator = "0.6.0"
-tokio = "1.45.1"
+tokio = "1.47.1"
 tokio-stream = "0.1.17"
-tokio-util = "0.7.15"
+tokio-util = "0.7.16"
 totp-rs = "5.7.0"
 tracing = "0.1.41"
-tracing-actix-web = "0.7.18"
+tracing-actix-web = { version = "0.7.19", default-features = false }
+tracing-ecs = "0.5.0"
 tracing-error = "0.2.1"
-tracing-subscriber = "0.3.19"
-url = "2.5.4"
+tracing-subscriber = "0.3.20"
+typed-path = "0.12.0"
+url = "2.5.7"
 urlencoding = "2.1.3"
-uuid = "1.17.0"
+utoipa = { version = "5.4.0", features = ["actix_extras", "chrono", "decimal"] }
+utoipa-actix-web = { version = "0.1.2" }
+utoipa-swagger-ui = { version = "9.0.2", features = ["actix-web", "vendored"] }
+uuid = "1.18.1"
 validator = "0.20.0"
-webp = { version = "0.3.0", default-features = false }
-whoami = "1.6.0"
+webp = { version = "0.3.1", default-features = false }
+webview2-com = "0.38.0"  # Should be updated in lockstep with wry
+whoami = "1.6.1"
+windows = "=0.61.3"  # Locked on 0.61 until we can update windows-core to 0.62
+windows-core = "=0.61.2"  # Locked on 0.61 until webview2-com updates to 0.62
 winreg = "0.55.0"
 woothee = "0.13.0"
 yaserde = "0.12.0"
-zip = { version = "4.2.0", default-features = false, features = [
+zbus = "5.11.0"
+zip = { version = "6.0.0", default-features = false, features = [
  "bzip2",
  "deflate",
  "deflate64",
@@ -200,7 +246,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"
@@ -211,15 +257,13 @@ redundant_clone = "warn"
 redundant_feature_names = "warn"
 redundant_type_annotations = "warn"
 todo = "warn"
+too_many_arguments = "allow"
+uninlined_format_args = "warn"
 unnested_or_patterns = "warn"
 wildcard_dependencies = "warn"

-[workspace.lints.rust]
-# Turn warnings into errors by default
-warnings = "deny"
-
-[patch.crates-io]
-wry = { git = "https://github.com/modrinth/wry", rev = "21db186" }
+[profile.dev.package.sqlx-macros]
+opt-level = 3

 # Optimize for speed and reduce size on release builds
 [profile.release]
@@ -229,5 +273,8 @@ lto = true  # Enables link to optimizations
 panic = "abort"  # Strip expensive panic clean-up logic
 codegen-units = 1  # Compile crates one after another so the compiler can optimize better

-[profile.dev.package.sqlx-macros]
-opt-level = 3
+# 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
@@ -0,0 +1,23 @@
+[files]
+extend-exclude = [
+  "**/src/locales/",
+  "apps/frontend/",
+  "patches/",
+  "packages/utils/",
+  "packages/ui/",
+  "packages/blog/",
+  # contains licenses like `CC-BY-ND-4.0`
+  "packages/moderation/src/data/stages/license.ts",
+  # contains payment card IDs like `IY1VMST1MOXS` which are flagged
+  "apps/labrinth/src/queue/payouts/mod.rs",
+]
+
+[default.extend-words]
+# Terms Of Use in `tou-link`
+tou = "tou"
+# Google Ad Manager
+gam = "gam"
+# short for "constants"
+consts = "consts"
+# short for "Copy"
+Cpy = "Cpy"
@@ -1,2 +1,4 @@
 **/dist
 *.gltf
+src/locales/
+src/assets/**/*.svg
@@ -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.
@@ -1,22 +1,2 @@
-import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
-import { fixupPluginRules } from '@eslint/compat'
-import turboPlugin from 'eslint-plugin-turbo'
-
-export default createConfigForNuxt().append([
-  {
-    name: 'turbo',
-    plugins: {
-      turbo: fixupPluginRules(turboPlugin),
-    },
-    rules: {
-      'turbo/no-undeclared-env-vars': 'error',
-    },
-  },
-  {
-    name: 'modrinth',
-    rules: {
-      'vue/html-self-closing': 'off',
-      'vue/multi-word-component-names': 'off',
-    },
-  },
-])
+import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
+export default config
@@ -1,16 +1,17 @@
 <!doctype html>
 <html lang="en" class="dark-mode">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Modrinth App</title>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Modrinth App</title>

-    <link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
-  </head>
+		<link rel="stylesheet" href="/src/assets/stylesheets/global.scss" />
+	</head>

-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+	<body>
+		<div id="app"></div>
+		<script src="https://tally.so/widgets/embed.js" async></script>
+		<script type="module" src="/src/main.js"></script>
+	</body>
 </html>
@@ -1,64 +1,67 @@
 {
-  "name": "@modrinth/app-frontend",
-  "private": true,
-  "version": "1.0.0-local",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "tsc:check": "vue-tsc --noEmit",
-    "lint": "eslint . && prettier --check .",
-    "fix": "eslint . --fix && prettier --write .",
-    "intl:extract": "formatjs extract \"{,src/components,src/composables,src/helpers,src/pages,src/store}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
-    "test": "vue-tsc --noEmit"
-  },
-  "dependencies": {
-    "@geometrically/minecraft-motd-parser": "^1.1.4",
-    "@modrinth/assets": "workspace:*",
-    "@modrinth/ui": "workspace:*",
-    "@modrinth/utils": "workspace:*",
-    "@sentry/vue": "^8.27.0",
-    "@tauri-apps/api": "^2.5.0",
-    "@tauri-apps/plugin-dialog": "^2.2.1",
-    "@tauri-apps/plugin-http": "^2.5.0",
-    "@tauri-apps/plugin-opener": "^2.2.6",
-    "@tauri-apps/plugin-os": "^2.2.1",
-    "@tauri-apps/plugin-updater": "^2.7.1",
-    "@tauri-apps/plugin-window-state": "^2.2.2",
-    "@types/three": "^0.172.0",
-    "@vintl/vintl": "^4.4.1",
-    "@vueuse/core": "^11.1.0",
-    "dayjs": "^1.11.10",
-    "floating-vue": "^5.2.2",
-    "ofetch": "^1.3.4",
-    "pinia": "^2.1.7",
-    "posthog-js": "^1.158.2",
-    "three": "^0.172.0",
-    "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.13",
-    "vue-multiselect": "3.0.0",
-    "vue-router": "4.3.0",
-    "vue-virtual-scroller": "v2.0.0-beta.8"
-  },
-  "devDependencies": {
-    "@eslint/compat": "^1.1.1",
-    "@formatjs/cli": "^6.2.12",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@taijased/vue-render-tracker": "^1.0.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.9.1",
-    "eslint-config-custom": "workspace:*",
-    "eslint-plugin-turbo": "^2.5.4",
-    "postcss": "^8.4.39",
-    "prettier": "^3.2.5",
-    "sass": "^1.74.1",
-    "tailwindcss": "^3.4.4",
-    "tsconfig": "workspace:*",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.6",
-    "vue-tsc": "^2.1.6"
-  },
-  "packageManager": "pnpm@9.4.0",
-  "web-types": "../../web-types.json"
+	"name": "@modrinth/app-frontend",
+	"private": true,
+	"version": "1.0.0-local",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vue-tsc --noEmit && vite build",
+		"tsc:check": "vue-tsc --noEmit",
+		"lint": "eslint . && prettier --check .",
+		"fix": "eslint . --fix && prettier --write .",
+		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+		"test": "vue-tsc --noEmit"
+	},
+	"dependencies": {
+		"@modrinth/api-client": "workspace:^",
+		"@modrinth/assets": "workspace:*",
+		"@modrinth/ui": "workspace:*",
+		"@modrinth/utils": "workspace:*",
+		"@sentry/vue": "^8.27.0",
+		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@tanstack/vue-query": "^5.90.7",
+		"@tauri-apps/api": "^2.5.0",
+		"@tauri-apps/plugin-dialog": "^2.2.1",
+		"@tauri-apps/plugin-http": "^2.5.0",
+		"@tauri-apps/plugin-opener": "^2.2.6",
+		"@tauri-apps/plugin-os": "^2.2.1",
+		"@tauri-apps/plugin-updater": "^2.7.1",
+		"@tauri-apps/plugin-window-state": "^2.2.2",
+		"@types/three": "^0.172.0",
+		"intl-messageformat": "^10.7.7",
+		"vue-i18n": "^10.0.0",
+		"@vueuse/core": "^11.1.0",
+		"dayjs": "^1.11.10",
+		"floating-vue": "^5.2.2",
+		"ofetch": "^1.3.4",
+		"pinia": "^3.0.0",
+		"posthog-js": "^1.158.2",
+		"three": "^0.172.0",
+		"vite-svg-loader": "^5.1.0",
+		"vue": "^3.5.13",
+		"vue-multiselect": "3.0.0",
+		"vue-router": "^4.6.0",
+		"vue-virtual-scroller": "v2.0.0-beta.8"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.1.1",
+		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
+		"@nuxt/eslint-config": "^0.5.6",
+		"@taijased/vue-render-tracker": "^1.0.7",
+		"@vitejs/plugin-vue": "^6.0.3",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9.9.1",
+		"eslint-plugin-turbo": "^2.5.4",
+		"postcss": "^8.4.39",
+		"prettier": "^3.2.5",
+		"sass": "^1.74.1",
+		"tailwindcss": "^3.4.4",
+		"typescript": "^5.5.4",
+		"vite": "^6.0.0",
+		"vue-component-type-helpers": "^3.1.8",
+		"vue-tsc": "^2.1.6"
+	},
+	"packageManager": "pnpm@9.4.0",
+	"web-types": "../../web-types.json"
 }
@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
 }
@@ -1,18 +1,18 @@
+export { default as ATLauncherIcon } from './atlauncher.svg'
 export { default as BuyMeACoffeeIcon } from './bmac.svg'
 export { default as DiscordIcon } from './discord.svg'
+export { default as GDLauncherIcon } from './gdlauncher.png'
+export { default as GithubIcon } from './github.svg'
+export { default as GitLabIcon } from './gitlab.svg'
+export { default as GoogleIcon } from './google.svg'
 export { default as KoFiIcon } from './kofi.svg'
+export { default as MastodonIcon } from './mastodon.svg'
+export { default as MicrosoftIcon } from './microsoft.svg'
+export { default as MultiMCIcon } from './multimc.webp'
+export { default as OpenCollectiveIcon } from './opencollective.svg'
 export { default as PatreonIcon } from './patreon.svg'
 export { default as PaypalIcon } from './paypal.svg'
-export { default as OpenCollectiveIcon } from './opencollective.svg'
-export { default as TwitterIcon } from './twitter.svg'
-export { default as GithubIcon } from './github.svg'
-export { default as MastodonIcon } from './mastodon.svg'
-export { default as RedditIcon } from './reddit.svg'
-export { default as GoogleIcon } from './google.svg'
-export { default as MicrosoftIcon } from './microsoft.svg'
-export { default as SteamIcon } from './steam.svg'
-export { default as GitLabIcon } from './gitlab.svg'
-export { default as ATLauncherIcon } from './atlauncher.svg'
-export { default as GDLauncherIcon } from './gdlauncher.png'
-export { default as MultiMCIcon } from './multimc.webp'
 export { default as PrismIcon } from './prism.svg'
+export { default as RedditIcon } from './reddit.svg'
+export { default as SteamIcon } from './steam.svg'
+export { default as TwitterIcon } from './twitter.svg'
@@ -1,9 +1,9 @@
-export { default as SwapIcon } from './arrow-left-right.svg'
-export { default as ToggleIcon } from './toggle.svg'
-export { default as PackageIcon } from './package.svg'
-export { default as VersionIcon } from './milestone.svg'
-export { default as TextInputIcon } from './text-cursor-input.svg'
 export { default as AddProjectImage } from './add-project.svg'
-export { default as NewInstanceImage } from './new-instance.svg'
+export { default as SwapIcon } from './arrow-left-right.svg'
 export { default as MenuIcon } from './menu.svg'
 export { default as ChatIcon } from './messages-square.svg'
+export { default as VersionIcon } from './milestone.svg'
+export { default as NewInstanceImage } from './new-instance.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as TextInputIcon } from './text-cursor-input.svg'
+export { default as ToggleIcon } from './toggle.svg'
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" version="1.1" viewBox="0 0 1793 199">
-  <g>
-    <g id="Layer_1">
-      <g id="green" fill="var(--color-brand)">
-        <path d="M1184.1,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
-        <path d="M1291.1,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
-        <path d="M1357.2,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
-        <path d="M1460,165.3l-40.8-95.1h23.2l35.1,83.9h-11.4l36.3-83.9h21.4l-40.8,95.1h-23Z"/>
-        <path d="M1579.6,166.6c-10.6,0-19.8-2.1-27.7-6.3-7.9-4.2-14-10-18.3-17.4-4.3-7.4-6.5-15.7-6.5-25.1s2.1-17.9,6.3-25.2c4.2-7.3,10-13,17.5-17.2,7.4-4.2,15.9-6.2,25.4-6.2s17.5,2,24.8,6.1c7.2,4,12.9,9.7,17.1,17.1,4.2,7.4,6.2,16,6.2,26s0,2,0,3.2c0,1.2-.2,2.3-.3,3.4h-79.3v-14.8h67.5l-8.7,4.6c.1-5.5-1-10.3-3.4-14.4-2.4-4.2-5.6-7.4-9.7-9.8-4.1-2.4-8.8-3.6-14.2-3.6s-10.2,1.2-14.3,3.6c-4.1,2.4-7.3,5.7-9.6,9.9-2.3,4.2-3.5,9.2-3.5,14.9v3.6c0,5.7,1.3,10.7,3.9,15.1,2.6,4.4,6.3,7.8,11,10.2,4.7,2.4,10.2,3.6,16.4,3.6s10.2-.8,14.4-2.5c4.3-1.7,8.1-4.3,11.4-7.8l11.9,13.7c-4.3,5-9.6,8.8-16.1,11.5-6.5,2.7-13.9,4-22.2,4Z"/>
-        <path d="M1645.7,165.3v-95.1h21.2v26.2l-2.5-7.7c2.8-6.4,7.3-11.3,13.4-14.6,6.1-3.3,13.7-5,22.9-5v21.2c-1-.2-1.8-.4-2.7-.4-.8,0-1.7,0-2.5,0-8.4,0-15.1,2.5-20.1,7.4-5,4.9-7.5,12.3-7.5,22v46.1h-22.3Z"/>
-        <path d="M1749.9,166.6c-8,0-15.6-1-22.9-3.1s-13.1-4.6-17.4-7.6l8.5-16.9c4.3,2.7,9.4,5,15.3,6.8,5.9,1.8,11.9,2.7,17.8,2.7s12.1-.9,15.2-2.8c3.1-1.9,4.7-4.5,4.7-7.7s-1.1-4.6-3.2-6c-2.1-1.4-4.9-2.4-8.4-3.1-3.4-.7-7.3-1.4-11.5-2-4.2-.6-8.4-1.4-12.6-2.4-4.2-1-8-2.5-11.5-4.5-3.4-2-6.2-4.6-8.4-7.9-2.1-3.3-3.2-7.7-3.2-13.2s1.7-11.3,5.2-15.8c3.4-4.5,8.3-7.9,14.5-10.3,6.2-2.4,13.6-3.7,22.2-3.7s12.9.7,19.4,2.1c6.5,1.4,11.9,3.4,16.2,6.1l-8.5,16.9c-4.5-2.7-9.1-4.6-13.6-5.6-4.6-1-9.1-1.5-13.6-1.5-6.8,0-11.8,1-15,3-3.3,2-4.9,4.6-4.9,7.7s1.1,5,3.2,6.4c2.1,1.4,4.9,2.6,8.4,3.4,3.4.8,7.3,1.5,11.5,2,4.2.5,8.4,1.3,12.6,2.4,4.2,1.1,8,2.5,11.5,4.4,3.5,1.8,6.3,4.4,8.5,7.7,2.1,3.3,3.2,7.7,3.2,13s-1.8,11.1-5.3,15.5c-3.5,4.4-8.5,7.8-14.9,10.2-6.4,2.4-14.1,3.7-23,3.7Z"/>
-        <g>
-          <path d="M9.8,143l63.4-38.1-5.8-15.3,18.1-18.6,22.9-4.9,6.6,8.2-10.6,10.7-9.2,2.9-6.6,6.8,3.2,9,6.5,6.9,9.2-2.5,6.6-7.2,14.3-4.5,4.3,9.6-14.8,18.1-24.8,7.8-11.1-12.4-63.6,38.2c-3-3.9-6.5-9.4-8.8-14.7ZM192.8,65.4l-50.4,13.6c2.8,7.4,3.7,11.7,4.5,16.5l50.3-13.6c-.8-5.4-2.2-10.8-4.4-16.5Z" fill-rule="evenodd"/>
-          <path d="M17.3,106.5c3.6,42.1,38.9,75.2,82,75.2s60.7-18.9,74-46.3l16.4,5.7c-15.8,34.1-50.3,57.9-90.4,57.9S3.6,158.2,0,106.5h17.3ZM.3,89.4C5.3,39.2,47.8,0,99.3,0s99.5,44.6,99.5,99.5-1.1,17.4-3.3,25.5l-16.3-5.7c1.6-6.5,2.4-13.1,2.4-19.8,0-45.4-36.9-82.3-82.3-82.3S22.6,48.7,17.6,89.4H.3Z" fill-rule="evenodd"/>
-          <path d="M99,51.6c-26.4,0-47.9,21.5-47.9,48s21.5,48,48,48,2.7,0,4-.2l4.8,16.8c-2.9.4-5.8.6-8.8.6-36,0-65.2-29.2-65.2-65.2S63.1,34.4,99,34.4s1.8,0,2.7,0l-2.7,17.1ZM118.6,37.4c26.4,8.3,45.6,33,45.6,62.2s-16.4,50.2-39.8,60l-4.8-16.7c16.2-7.7,27.4-24.2,27.4-43.3s-13-38.1-31.1-44.9l2.7-17.2Z" fill-rule="evenodd"/>
-        </g>
-      </g>
-      <g id="black" fill="currentColor">
-        <path d="M354.8,69.2c12,0,21.7,3.4,28.6,10.4,7,7.2,10.6,17.5,10.6,31.5v54.8h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,5-6.8,12.2-6.8,21.3v48.5h-22.4v-51.9c0-8.4-1.8-14.7-5.5-19-3.8-4.1-8.9-6.3-15.9-6.3s-13.6,2.5-18.1,7.3c-4.5,4.8-6.8,12-6.8,21.3v48.5h-22.4v-95.6h21.3v12.2c3.6-4.3,8.1-7.5,13.4-9.8,5.4-2.3,11.3-3.4,17.9-3.4s13.6,1.3,19.2,3.9c5.5,2.9,9.8,6.8,13.1,12,3.9-5,8.9-8.9,15.2-11.8,6.3-2.7,13.1-4.1,20.6-4.1ZM466,167.2c-9.7,0-18.4-2.1-26.1-6.3-7.6-4-13.8-10.1-18.1-17.5-4.5-7.3-6.6-15.7-6.6-25.2s2.1-17.9,6.6-25.2c4.3-7.4,10.6-13.4,18.1-17.4,7.7-4.1,16.5-6.3,26.1-6.3s18.6,2.1,26.3,6.3c7.7,4.1,13.8,10,18.3,17.4,4.3,7.3,6.4,15.7,6.4,25.2s-2.1,17.9-6.4,25.2c-4.5,7.5-10.6,13.4-18.3,17.5-7.7,4.1-16.5,6.3-26.3,6.3h0ZM466,148c8.2,0,15-2.7,20.4-8.2,5.4-5.5,8.1-12.7,8.1-21.7s-2.7-16.1-8.1-21.7c-5.4-5.5-12.2-8.2-20.4-8.2s-15,2.7-20.2,8.2c-5.4,5.5-8.1,12.7-8.1,21.7s2.7,16.1,8.1,21.7c5.2,5.5,12,8.2,20.2,8.2ZM631.5,33.1v132.8h-21.5v-12.3c-3.7,4.4-8.3,7.9-13.6,10.2-5.5,2.3-11.5,3.4-18.1,3.4s-17.4-2-24.7-6.1c-7.3-4.1-13.2-9.8-17.4-17.4-4.1-7.3-6.3-15.9-6.3-25.6s2.1-18.3,6.3-25.6c4.1-7.3,10-13.1,17.4-17.2,7.3-4.1,15.6-6.1,24.7-6.1s12.2,1.1,17.4,3.2c5.2,2.1,9.8,5.4,13.4,9.7v-49h22.4ZM581.1,148c5.4,0,10.2-1.3,14.5-3.8,4.3-2.3,7.7-5.9,10.2-10.4,2.5-4.5,3.8-9.8,3.8-15.7s-1.3-11.3-3.8-15.7c-2.5-4.5-5.9-8.1-10.2-10.6-4.3-2.3-9.1-3.6-14.5-3.6s-10.2,1.3-14.5,3.6c-4.3,2.5-7.7,6.1-10.2,10.6-2.5,4.5-3.8,9.8-3.8,15.7s1.3,11.3,3.8,15.7c2.5,4.5,5.9,8.1,10.2,10.4,4.3,2.5,9.1,3.8,14.5,3.8ZM681.6,84.3c6.4-10,17.7-15,34-15v21.3c-1.7-.3-3.4-.5-5.2-.5-8.8,0-15.6,2.5-20.4,7.5-4.8,5.2-7.3,12.5-7.3,22v46.4h-22.4v-95.6h21.3v14h0ZM734.1,70.3h22.4v95.6h-22.4v-95.6ZM745.4,54.6c-4.1,0-7.5-1.3-10.2-3.9-2.7-2.4-4.2-5.9-4.1-9.5,0-3.8,1.4-7,4.1-9.7,2.7-2.5,6.1-3.8,10.2-3.8s7.5,1.3,10.2,3.6c2.7,2.5,4.1,5.5,4.1,9.3s-1.3,7.2-3.9,9.8c-2.7,2.7-6.3,4.1-10.4,4.1ZM839.5,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4v-95.6h21.3v12.3c3.8-4.5,8.4-7.7,14-10,5.5-2.3,12-3.4,19-3.4ZM964.8,160.7c-2.8,2.2-6,3.9-9.5,4.8-3.9,1.1-7.9,1.6-12,1.6-10.6,0-18.6-2.7-24.3-8.2-5.7-5.5-8.6-13.4-8.6-24v-46h-15.7v-17.9h15.7v-21.8h22.4v21.8h25.6v17.9h-25.6v45.5c0,4.7,1.1,8.2,3.4,10.6,2.3,2.5,5.5,3.8,9.8,3.8s9.1-1.3,12.5-3.9l6.3,15.9ZM1036.9,69.2c12,0,21.7,3.6,29,10.6,7.3,7,10.9,17.5,10.9,31.3v54.8h-22.4v-51.9c0-8.4-2-14.7-5.9-19-3.9-4.1-9.5-6.3-16.8-6.3s-14.7,2.5-19.5,7.3c-4.8,5-7.2,12.2-7.2,21.5v48.3h-22.4V33.1h22.4v48.3c3.8-3.9,8.2-7,13.8-9.1,5.4-2,11.5-3,18.1-3Z"/>
-      </g>
-    </g>
-  </g>
-</svg>
@@ -2,159 +2,176 @@
@tailwind components;
@tailwind utilities;

+@import '@modrinth/ui/src/styles/tailwind-utilities.css';
+
@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/regular.otf') format('opentype');
 }

@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: italic;
-  font-display: swap;
-  font-weight: 400;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/italic.otf') format('opentype');
 }

@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 600;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold.otf') format('opentype');
 }

@font-face {
-  font-family: 'bundled-minecraft-font-mrapp';
-  font-style: italic;
-  font-display: swap;
-  font-weight: 600;
-  src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
+	font-family: 'bundled-minecraft-font-mrapp';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 600;
+	src: url('https://cdn-raw.modrinth.com/fonts/minecraft/bold-italic.otf') format('opentype');
 }

 .font-minecraft {
-  font-family: 'bundled-minecraft-font-mrapp', monospace;
+	font-family: 'bundled-minecraft-font-mrapp', monospace;
 }

 :root {
-  font-family: var(--font-standard, sans-serif), sans-serif;
-  color-scheme: dark;
-  --view-width: calc(100% - 5rem);
-  --expanded-view-width: calc(100% - 13rem);
+	font-family: var(--font-standard, sans-serif), sans-serif;
+	color-scheme: dark;
+	--view-width: calc(100% - 5rem);
+	--expanded-view-width: calc(100% - 13rem);
 }

 body {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 }

 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }

 .card-divider {
-  background-color: var(--color-button-bg);
-  border: none;
-  color: var(--color-button-bg);
-  height: 1px;
-  margin: var(--gap-sm) 0;
+	background-color: var(--color-button-bg);
+	border: none;
+	color: var(--color-button-bg);
+	height: 1px;
+	margin: var(--gap-sm) 0;
 }

 .no-wrap {
-  white-space: nowrap;
+	white-space: nowrap;
 }

 .no-select {
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }

 a {
-  color: var(--color-link);
-  text-decoration: none;
+	color: var(--color-link);
+	text-decoration: none;

-  &:hover {
-    text-decoration: none;
-  }
-}
-
-input {
-  border: none !important;
+	&:hover {
+		text-decoration: none;
+	}
 }

 .badge {
-  display: flex;
-  border-radius: var(--radius-md);
-  white-space: nowrap;
-  align-items: center;
-  background-color: var(--color-bg);
-  padding-block: var(--gap-sm);
-  padding-inline: var(--gap-lg);
-  width: min-content;
+	display: flex;
+	border-radius: var(--radius-md);
+	white-space: nowrap;
+	align-items: center;
+	background-color: var(--color-bg);
+	padding-block: var(--gap-sm);
+	padding-inline: var(--gap-lg);
+	width: min-content;

-  svg {
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
-  }
+	svg {
+		width: 1.1rem;
+		height: 1.1rem;
+		margin-right: 0.5rem;
+	}

-  &.featured {
-    background-color: var(--color-brand-highlight);
-    color: var(--color-contrast);
-  }
+	&.featured {
+		background-color: var(--color-brand-highlight);
+		color: var(--color-contrast);
+	}
 }

 * {
-  scrollbar-width: auto;
-  scrollbar-color: var(--color-scrollbar) var(--color-bg);
+	scrollbar-width: auto;
+	scrollbar-color: var(--color-scrollbar) var(--color-bg);
 }

 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
-  width: 16px;
-  border: 3px solid transparent;
-  opacity: 0.5;
-  transition: opacity 0.2s ease-in-out;
+	width: 16px;
+	border: 3px solid transparent;
+	opacity: 0.5;
+	transition: opacity 0.2s ease-in-out;
 }

 *::-webkit-scrollbar:hover {
-  opacity: 1;
+	opacity: 1;
 }

 *::-webkit-scrollbar-track {
-  background: transparent;
+	background: transparent;
 }

 *::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar);
-  border-radius: var(--radius-lg);
-  border: 5px solid transparent;
-  background-clip: content-box;
+	background-color: var(--color-scrollbar);
+	border-radius: var(--radius-lg);
+	border: 5px solid transparent;
+	background-clip: content-box;
 }

 .highlighted {
-  box-shadow: 0 0 1rem var(--color-brand) !important;
+	box-shadow: 0 0 1rem var(--color-brand) !important;
 }

 .gecko {
-  background-color: var(--color-raised-bg);
-  box-shadow: none !important;
+	background-color: var(--color-raised-bg);
+	box-shadow: none !important;
 }

 img {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 }

 .card-shadow {
-  box-shadow: var(--shadow-card);
+	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';
@@ -1,3 +1,3 @@
 img {
-  pointer-events: none !important;
+	pointer-events: none !important;
 }
@@ -1,36 +1,45 @@
 <script setup>
-import Instance from '@/components/ui/Instance.vue'
-import { computed, ref } from 'vue'
 import {
-  ClipboardCopyIcon,
-  FolderOpenIcon,
-  PlayIcon,
-  PlusIcon,
-  TrashIcon,
-  StopCircleIcon,
-  EyeIcon,
-  SearchIcon,
-  XIcon,
+	ClipboardCopyIcon,
+	EyeIcon,
+	FolderOpenIcon,
+	PlayIcon,
+	PlusIcon,
+	SearchIcon,
+	StopCircleIcon,
+	TrashIcon,
 } from '@modrinth/assets'
-import { Button, DropdownSelect } from '@modrinth/ui'
-import { formatCategoryHeader } from '@modrinth/utils'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
+import {
+	DropdownSelect,
+	formatLoader,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { duplicate, remove } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
+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 { duplicate, remove } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()
+
+const { formatMessage } = useVIntl()

 const props = defineProps({
-  instances: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  label: {
-    type: String,
-    default: '',
-  },
+	instances: {
+		type: Array,
+		default() {
+			return []
+		},
+	},
+	label: {
+		type: String,
+		default: '',
+	},
 })
 const instanceOptions = ref(null)
 const instanceComponents = ref(null)
@@ -39,335 +48,357 @@ const currentDeleteInstance = ref(null)
 const confirmModal = ref(null)

 async function deleteProfile() {
-  if (currentDeleteInstance.value) {
-    instanceComponents.value = instanceComponents.value.filter(
-      (x) => x.instance.path !== currentDeleteInstance.value,
-    )
-    await remove(currentDeleteInstance.value).catch(handleError)
-  }
+	if (currentDeleteInstance.value) {
+		instanceComponents.value = instanceComponents.value.filter(
+			(x) => x.instance.path !== currentDeleteInstance.value,
+		)
+		await remove(currentDeleteInstance.value).catch(handleError)
+	}
 }

 async function duplicateProfile(p) {
-  await duplicate(p).catch(handleError)
+	await duplicate(p).catch(handleError)
 }

 const handleRightClick = (event, profilePathId) => {
-  const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
-  const baseOptions = [
-    { name: 'add_content' },
-    { type: 'divider' },
-    { name: 'edit' },
-    { name: 'duplicate' },
-    { name: 'open' },
-    { name: 'copy' },
-    { type: 'divider' },
-    {
-      name: 'delete',
-      color: 'danger',
-    },
-  ]
+	const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+	const baseOptions = [
+		{ name: 'add_content' },
+		{ type: 'divider' },
+		{ name: 'edit' },
+		{ name: 'duplicate' },
+		{ name: 'open' },
+		{ name: 'copy' },
+		{ type: 'divider' },
+		{
+			name: 'delete',
+			color: 'danger',
+		},
+	]

-  instanceOptions.value.showMenu(
-    event,
-    item,
-    item.playing
-      ? [
-          {
-            name: 'stop',
-            color: 'danger',
-          },
-          ...baseOptions,
-        ]
-      : [
-          {
-            name: 'play',
-            color: 'primary',
-          },
-          ...baseOptions,
-        ],
-  )
+	instanceOptions.value.showMenu(
+		event,
+		item,
+		item.playing
+			? [
+					{
+						name: 'stop',
+						color: 'danger',
+					},
+					...baseOptions,
+				]
+			: [
+					{
+						name: 'play',
+						color: 'primary',
+					},
+					...baseOptions,
+				],
+	)
 }

 const handleOptionsClick = async (args) => {
-  switch (args.option) {
-    case 'play':
-      args.item.play(null, 'InstanceGridContextMenu')
-      break
-    case 'stop':
-      args.item.stop(null, 'InstanceGridContextMenu')
-      break
-    case 'add_content':
-      await args.item.addContent()
-      break
-    case 'edit':
-      await args.item.seeInstance()
-      break
-    case 'duplicate':
-      if (args.item.instance.install_stage == 'installed')
-        await duplicateProfile(args.item.instance.path)
-      break
-    case 'open':
-      await args.item.openFolder()
-      break
-    case 'copy':
-      await navigator.clipboard.writeText(args.item.instance.path)
-      break
-    case 'delete':
-      currentDeleteInstance.value = args.item.instance.path
-      confirmModal.value.show()
-      break
-  }
+	switch (args.option) {
+		case 'play':
+			args.item.play(null, 'InstanceGridContextMenu')
+			break
+		case 'stop':
+			args.item.stop(null, 'InstanceGridContextMenu')
+			break
+		case 'add_content':
+			await args.item.addContent()
+			break
+		case 'edit':
+			await args.item.seeInstance()
+			break
+		case 'duplicate':
+			if (args.item.instance.install_stage == 'installed')
+				await duplicateProfile(args.item.instance.path)
+			break
+		case 'open':
+			await args.item.openFolder()
+			break
+		case 'copy':
+			await navigator.clipboard.writeText(args.item.instance.path)
+			break
+		case 'delete':
+			currentDeleteInstance.value = args.item.instance.path
+			confirmModal.value.show()
+			break
+	}
 }

+const state = useStorage(
+	`${props.label}-grid-display-state`,
+	{
+		group: 'Group',
+		sortBy: 'Name',
+	},
+	localStorage,
+	{ mergeDefaults: true },
+)
+
 const search = ref('')
-const group = ref('Group')
-const sortBy = ref('Name')

 const filteredResults = computed(() => {
-  const instances = props.instances.filter((instance) => {
-    return instance.name.toLowerCase().includes(search.value.toLowerCase())
-  })
+	const { group = 'Group', sortBy = 'Name' } = state.value

-  if (sortBy.value === 'Name') {
-    instances.sort((a, b) => {
-      return a.name.localeCompare(b.name)
-    })
-  }
+	const instances = props.instances.filter((instance) => {
+		return instance.name.toLowerCase().includes(search.value.toLowerCase())
+	})

-  if (sortBy.value === 'Game version') {
-    instances.sort((a, b) => {
-      return a.game_version.localeCompare(b.game_version)
-    })
-  }
+	if (sortBy === 'Name') {
+		instances.sort((a, b) => {
+			return a.name.localeCompare(b.name)
+		})
+	}

-  if (sortBy.value === 'Last played') {
-    instances.sort((a, b) => {
-      return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
-    })
-  }
+	if (sortBy === 'Game version') {
+		instances.sort((a, b) => {
+			return a.game_version.localeCompare(b.game_version, undefined, { numeric: true })
+		})
+	}

-  if (sortBy.value === 'Date created') {
-    instances.sort((a, b) => {
-      return dayjs(b.date_created).diff(dayjs(a.date_created))
-    })
-  }
+	if (sortBy === 'Last played') {
+		instances.sort((a, b) => {
+			return dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0))
+		})
+	}

-  if (sortBy.value === 'Date modified') {
-    instances.sort((a, b) => {
-      return dayjs(b.date_modified).diff(dayjs(a.date_modified))
-    })
-  }
+	if (sortBy === 'Date created') {
+		instances.sort((a, b) => {
+			return dayjs(b.date_created).diff(dayjs(a.date_created))
+		})
+	}

-  const instanceMap = new Map()
+	if (sortBy === 'Date modified') {
+		instances.sort((a, b) => {
+			return dayjs(b.date_modified).diff(dayjs(a.date_modified))
+		})
+	}

-  if (group.value === 'Loader') {
-    instances.forEach((instance) => {
-      const loader = formatCategoryHeader(instance.loader)
-      if (!instanceMap.has(loader)) {
-        instanceMap.set(loader, [])
-      }
+	const instanceMap = new Map()

-      instanceMap.get(loader).push(instance)
-    })
-  } else if (group.value === 'Game version') {
-    instances.forEach((instance) => {
-      if (!instanceMap.has(instance.game_version)) {
-        instanceMap.set(instance.game_version, [])
-      }
+	if (group === 'Loader') {
+		instances.forEach((instance) => {
+			const loader = formatLoader(formatMessage, instance.loader)
+			if (!instanceMap.has(loader)) {
+				instanceMap.set(loader, [])
+			}

-      instanceMap.get(instance.game_version).push(instance)
-    })
-  } else if (group.value === 'Group') {
-    instances.forEach((instance) => {
-      if (instance.groups.length === 0) {
-        instance.groups.push('None')
-      }
+			instanceMap.get(loader).push(instance)
+		})
+	} else if (group === 'Game version') {
+		instances.forEach((instance) => {
+			if (!instanceMap.has(instance.game_version)) {
+				instanceMap.set(instance.game_version, [])
+			}

-      for (const category of instance.groups) {
-        if (!instanceMap.has(category)) {
-          instanceMap.set(category, [])
-        }
+			instanceMap.get(instance.game_version).push(instance)
+		})
+	} else if (group === 'Group') {
+		instances.forEach((instance) => {
+			if (instance.groups.length === 0) {
+				instance.groups.push('None')
+			}

-        instanceMap.get(category).push(instance)
-      }
-    })
-  } else {
-    return instanceMap.set('None', instances)
-  }
+			for (const category of instance.groups) {
+				if (!instanceMap.has(category)) {
+					instanceMap.set(category, [])
+				}

-  // For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
-  // ie: Category A should come before B, even if the first instance in B comes before the first instance in A
-  if (sortBy.value === 'Name') {
-    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
-      // None should always be first
-      if (a[0] === 'None' && b[0] !== 'None') {
-        return -1
-      }
-      if (a[0] !== 'None' && b[0] === 'None') {
-        return 1
-      }
-      return a[0].localeCompare(b[0])
-    })
-    instanceMap.clear()
-    sortedEntries.forEach((entry) => {
-      instanceMap.set(entry[0], entry[1])
-    })
-  }
+				instanceMap.get(category).push(instance)
+			}
+		})
+	} else {
+		return instanceMap.set('None', instances)
+	}

-  return instanceMap
+	// For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
+	// ie: Category A should come before B, even if the first instance in B comes before the first instance in A
+	if (sortBy === 'Name') {
+		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+			// None should always be first
+			if (a[0] === 'None' && b[0] !== 'None') {
+				return -1
+			}
+			if (a[0] !== 'None' && b[0] === 'None') {
+				return 1
+			}
+			return a[0].localeCompare(b[0])
+		})
+		instanceMap.clear()
+		sortedEntries.forEach((entry) => {
+			instanceMap.set(entry[0], entry[1])
+		})
+	}
+	// default sorting would do 1.20.4 < 1.8.9 because 2 < 8
+	// localeCompare with numeric=true puts 1.8.9 < 1.20.4 because 8 < 20
+	if (group === 'Game version') {
+		const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+			return a[0].localeCompare(b[0], undefined, { numeric: true })
+		})
+		instanceMap.clear()
+		sortedEntries.forEach((entry) => {
+			instanceMap.set(entry[0], entry[1])
+		})
+	}
+
+	return instanceMap
 })
 </script>
 <template>
-  <div class="flex gap-2">
-    <div class="iconified-input flex-1">
-      <SearchIcon />
-      <input v-model="search" type="text" placeholder="Search" />
-      <Button class="r-btn" @click="() => (search = '')">
-        <XIcon />
-      </Button>
-    </div>
-    <DropdownSelect
-      v-slot="{ selected }"
-      v-model="sortBy"
-      name="Sort Dropdown"
-      class="max-w-[16rem]"
-      :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
-      placeholder="Select..."
-    >
-      <span class="font-semibold text-primary">Sort by: </span>
-      <span class="font-semibold text-secondary">{{ selected }}</span>
-    </DropdownSelect>
-    <DropdownSelect
-      v-slot="{ selected }"
-      v-model="group"
-      class="max-w-[16rem]"
-      name="Group Dropdown"
-      :options="['Group', 'Loader', 'Game version', 'None']"
-      placeholder="Select..."
-    >
-      <span class="font-semibold text-primary">Group by: </span>
-      <span class="font-semibold text-secondary">{{ selected }}</span>
-    </DropdownSelect>
-  </div>
-  <div
-    v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
-      key,
-      value,
-    }))"
-    :key="instanceSection.key"
-    class="row"
-  >
-    <div v-if="instanceSection.key !== 'None'" class="divider">
-      <p>{{ instanceSection.key }}</p>
-      <hr aria-hidden="true" />
-    </div>
-    <section class="instances">
-      <Instance
-        v-for="instance in instanceSection.value"
-        ref="instanceComponents"
-        :key="instance.path + instance.install_stage"
-        :instance="instance"
-        @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
-      />
-    </section>
-  </div>
-  <ConfirmModalWrapper
-    ref="confirmModal"
-    title="Are you sure you want to delete this instance?"
-    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-    :has-to-type="false"
-    proceed-label="Delete"
-    @proceed="deleteProfile"
-  />
-  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
-    <template #play> <PlayIcon /> Play </template>
-    <template #stop> <StopCircleIcon /> Stop </template>
-    <template #add_content> <PlusIcon /> Add content </template>
-    <template #edit> <EyeIcon /> View instance </template>
-    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
-    <template #delete> <TrashIcon /> Delete </template>
-    <template #open> <FolderOpenIcon /> Open folder </template>
-    <template #copy> <ClipboardCopyIcon /> Copy path </template>
-  </ContextMenu>
+	<div class="flex gap-2">
+		<StyledInput
+			v-model="search"
+			:icon="SearchIcon"
+			type="text"
+			placeholder="Search"
+			clearable
+			wrapper-class="flex-1"
+		/>
+		<DropdownSelect
+			v-slot="{ selected }"
+			v-model="state.sortBy"
+			name="Sort Dropdown"
+			class="max-w-[16rem]"
+			:options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
+			placeholder="Select..."
+		>
+			<span class="font-semibold text-primary">Sort by: </span>
+			<span class="font-semibold text-secondary">{{ selected }}</span>
+		</DropdownSelect>
+		<DropdownSelect
+			v-slot="{ selected }"
+			v-model="state.group"
+			class="max-w-[16rem]"
+			name="Group Dropdown"
+			:options="['Group', 'Loader', 'Game version', 'None']"
+			placeholder="Select..."
+		>
+			<span class="font-semibold text-primary">Group by: </span>
+			<span class="font-semibold text-secondary">{{ selected }}</span>
+		</DropdownSelect>
+	</div>
+	<div
+		v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
+			key,
+			value,
+		}))"
+		:key="instanceSection.key"
+		class="row"
+	>
+		<div v-if="instanceSection.key !== 'None'" class="divider">
+			<p>{{ instanceSection.key }}</p>
+			<hr aria-hidden="true" />
+		</div>
+		<section class="instances">
+			<Instance
+				v-for="instance in instanceSection.value"
+				ref="instanceComponents"
+				:key="instance.path + instance.install_stage"
+				:instance="instance"
+				@contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+			/>
+		</section>
+	</div>
+	<ConfirmModalWrapper
+		ref="confirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		@proceed="deleteProfile"
+	/>
+	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+		<template #play> <PlayIcon /> Play </template>
+		<template #stop> <StopCircleIcon /> Stop </template>
+		<template #add_content> <PlusIcon /> Add content </template>
+		<template #edit> <EyeIcon /> View instance </template>
+		<template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+		<template #delete> <TrashIcon /> Delete </template>
+		<template #open> <FolderOpenIcon /> Open folder </template>
+		<template #copy> <ClipboardCopyIcon /> Copy path </template>
+	</ContextMenu>
 </template>
 <style lang="scss" scoped>
 .row {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;

-  .divider {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    gap: 1rem;
-    margin-bottom: 1rem;
+	.divider {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		gap: 1rem;
+		margin-bottom: 1rem;

-    p {
-      margin: 0;
-      font-size: 1rem;
-      white-space: nowrap;
-      color: var(--color-contrast);
-    }
+		p {
+			margin: 0;
+			font-size: 1rem;
+			white-space: nowrap;
+			color: var(--color-contrast);
+		}

-    hr {
-      background-color: var(--color-gray);
-      height: 1px;
-      width: 100%;
-      border: none;
-    }
-  }
+		hr {
+			background-color: var(--color-gray);
+			height: 1px;
+			width: 100%;
+			border: none;
+		}
+	}
 }

 .header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: inherit;
-  margin: 1rem 1rem 0 !important;
-  padding: 1rem;
-  width: calc(100% - 2rem);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 1rem;
+	align-items: inherit;
+	margin: 1rem 1rem 0 !important;
+	padding: 1rem;
+	width: calc(100% - 2rem);

-  .iconified-input {
-    flex-grow: 1;
+	.iconified-input {
+		flex-grow: 1;

-    input {
-      min-width: 100%;
-    }
-  }
+		input {
+			min-width: 100%;
+		}
+	}

-  .sort-dropdown {
-    width: 10rem;
-  }
+	.sort-dropdown {
+		width: 10rem;
+	}

-  .filter-dropdown {
-    width: 15rem;
-  }
+	.filter-dropdown {
+		width: 15rem;
+	}

-  .group-dropdown {
-    width: 10rem;
-  }
+	.group-dropdown {
+		width: 10rem;
+	}

-  .labeled_button {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-    white-space: nowrap;
-  }
+	.labeled_button {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+	}
 }

 .instances {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-  width: 100%;
-  gap: 0.75rem;
-  margin-right: auto;
-  scroll-behavior: smooth;
-  overflow-y: auto;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	width: 100%;
+	gap: 0.75rem;
+	margin-right: auto;
+	scroll-behavior: smooth;
+	overflow-y: auto;
 }
 </style>
@@ -1,29 +1,30 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
 import { useLoading } from '@/store/state.js'

 const props = defineProps({
-  throttle: {
-    type: Number,
-    default: 0,
-  },
-  duration: {
-    type: Number,
-    default: 1000,
-  },
-  height: {
-    type: Number,
-    default: 2,
-  },
-  color: {
-    type: String,
-    default: 'var(--loading-bar-gradient)',
-  },
+	throttle: {
+		type: Number,
+		default: 0,
+	},
+	duration: {
+		type: Number,
+		default: 1000,
+	},
+	height: {
+		type: Number,
+		default: 2,
+	},
+	color: {
+		type: String,
+		default: 'var(--loading-bar-gradient)',
+	},
 })

 const indicator = useLoadingIndicator({
-  duration: props.duration,
-  throttle: props.throttle,
+	duration: props.duration,
+	throttle: props.throttle,
 })

 onBeforeUnmount(() => indicator.clear)
@@ -31,111 +32,111 @@ onBeforeUnmount(() => indicator.clear)
 const loading = useLoading()

 watch(loading, (newValue) => {
-  if (newValue.barEnabled) {
-    if (newValue.loading) {
-      indicator.start()
-    } else {
-      indicator.finish()
-    }
-  }
+	if (newValue.barEnabled) {
+		if (newValue.loading) {
+			indicator.start()
+		} else {
+			indicator.finish()
+		}
+	}
 })

 function useLoadingIndicator(opts) {
-  const progress = ref(0)
-  const isLoading = ref(false)
-  const step = computed(() => 10000 / opts.duration)
+	const progress = ref(0)
+	const isLoading = ref(false)
+	const step = computed(() => 10000 / opts.duration)

-  let _timer = null
-  let _throttle = null
+	let _timer = null
+	let _throttle = null

-  function start() {
-    clear()
-    progress.value = 0
-    if (opts.throttle) {
-      _throttle = setTimeout(() => {
-        isLoading.value = true
-        _startTimer()
-      }, opts.throttle)
-    } else {
-      isLoading.value = true
-      _startTimer()
-    }
-  }
+	function start() {
+		clear()
+		progress.value = 0
+		if (opts.throttle) {
+			_throttle = setTimeout(() => {
+				isLoading.value = true
+				_startTimer()
+			}, opts.throttle)
+		} else {
+			isLoading.value = true
+			_startTimer()
+		}
+	}

-  function finish() {
-    progress.value = 100
-    _hide()
-  }
+	function finish() {
+		progress.value = 100
+		_hide()
+	}

-  function clear() {
-    clearInterval(_timer)
-    clearTimeout(_throttle)
-    _timer = null
-    _throttle = null
-  }
+	function clear() {
+		clearInterval(_timer)
+		clearTimeout(_throttle)
+		_timer = null
+		_throttle = null
+	}

-  function _increase(num) {
-    progress.value = Math.min(100, progress.value + num)
-  }
+	function _increase(num) {
+		progress.value = Math.min(100, progress.value + num)
+	}

-  function _hide() {
-    clear()
-    setTimeout(() => {
-      isLoading.value = false
-      setTimeout(() => {
-        progress.value = 0
-      }, 400)
-    }, 500)
-  }
+	function _hide() {
+		clear()
+		setTimeout(() => {
+			isLoading.value = false
+			setTimeout(() => {
+				progress.value = 0
+			}, 400)
+		}, 500)
+	}

-  function _startTimer() {
-    _timer = setInterval(() => {
-      _increase(step.value)
-    }, 100)
-  }
+	function _startTimer() {
+		_timer = setInterval(() => {
+			_increase(step.value)
+		}, 100)
+	}

-  return { progress, isLoading, start, finish, clear }
+	return { progress, isLoading, start, finish, clear }
 }
 </script>

 <template>
-  <div
-    class="loading-indicator-bar"
-    :style="{
-      '--_width': `${indicator.progress.value}%`,
-      '--_height': `${indicator.isLoading.value ? props.height : 0}px`,
-      '--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
-      top: `0`,
-      right: `0`,
-      left: `${props.offsetWidth}`,
-      pointerEvents: 'none',
-      width: `var(--_width)`,
-      height: `var(--_height)`,
-      borderRadius: `var(--_height)`,
-      // opacity: `var(--_opacity)`,
-      background: `${props.color}`,
-      backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-      transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
-      zIndex: 6,
-    }"
-  >
-    <slot />
-  </div>
+	<div
+		class="loading-indicator-bar"
+		:style="{
+			'--_width': `${indicator.progress.value}%`,
+			'--_height': `${indicator.isLoading.value ? props.height : 0}px`,
+			'--_opacity': `${indicator.isLoading.value ? 1 : 0}`,
+			top: `0`,
+			right: `0`,
+			left: `${props.offsetWidth}`,
+			pointerEvents: 'none',
+			width: `var(--_width)`,
+			height: `var(--_height)`,
+			borderRadius: `var(--_height)`,
+			// opacity: `var(--_opacity)`,
+			background: `${props.color}`,
+			backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+			transition: 'width 0.1s ease-in-out, height 0.1s ease-out',
+			zIndex: 6,
+		}"
+	>
+		<slot />
+	</div>
 </template>
 <style lang="scss" scoped>
 .loading-indicator-bar::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: var(--_width);
-  bottom: 0;
-  background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
-  opacity: calc(var(--_opacity) * 0.1);
-  z-index: 5;
-  transition:
-    width 0.1s ease-in-out,
-    opacity 0.1s ease-out;
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: var(--_width);
+	bottom: 0;
+	background-image: radial-gradient(80% 100% at 20% 0%, var(--color-brand) 0%, transparent 80%);
+	opacity: calc(var(--_opacity) * 0.1);
+	z-index: 5;
+	transition:
+		width 0.1s ease-in-out,
+		opacity 0.1s ease-out;
 }
 </style>
@@ -1,52 +1,54 @@
 <script setup>
 import {
-  ClipboardCopyIcon,
-  FolderOpenIcon,
-  PlayIcon,
-  PlusIcon,
-  TrashIcon,
-  DownloadIcon,
-  GlobeIcon,
-  StopCircleIcon,
-  ExternalIcon,
-  EyeIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	ExternalIcon,
+	EyeIcon,
+	FolderOpenIcon,
+	GlobeIcon,
+	PlayIcon,
+	PlusIcon,
+	StopCircleIcon,
+	TrashIcon,
 } from '@modrinth/assets'
-import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
-import Instance from '@/components/ui/Instance.vue'
+import { HeadingLink, injectNotificationManager } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import ProjectCard from '@/components/ui/ProjectCard.vue'
-import { get_by_profile_path } from '@/helpers/process.js'
-import { handleError } from '@/store/notifications.js'
-import { duplicate, kill, remove, run } from '@/helpers/profile.js'
 import { useRouter } from 'vue-router'
-import { showProfileInFolder } from '@/helpers/utils.js'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import Instance from '@/components/ui/Instance.vue'
+import LegacyProjectCard from '@/components/ui/LegacyProjectCard.vue'
+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.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 { handleSevereError } from '@/store/error.js'
 import { install as installVersion } from '@/store/install.js'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { HeadingLink } from '@modrinth/ui'
+
+const { handleError } = injectNotificationManager()

 const router = useRouter()

 const props = defineProps({
-  instances: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  canPaginate: Boolean,
+	instances: {
+		type: Array,
+		default() {
+			return []
+		},
+	},
+	label: {
+		type: String,
+		default: '',
+	},
+	canPaginate: Boolean,
 })

 const actualInstances = computed(() =>
-  props.instances.filter(
-    (x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
-  ),
+	props.instances.filter(
+		(x) => (x && x.instances && x.instances[0] && x.show === undefined) || x.show,
+	),
 )

 const modsRow = ref(null)
@@ -58,124 +60,131 @@ const deleteConfirmModal = ref(null)
 const currentDeleteInstance = ref(null)

 async function deleteProfile() {
-  if (currentDeleteInstance.value) {
-    await remove(currentDeleteInstance.value).catch(handleError)
-  }
+	if (currentDeleteInstance.value) {
+		await remove(currentDeleteInstance.value).catch(handleError)
+	}
 }

 async function duplicateProfile(p) {
-  await duplicate(p).catch(handleError)
+	await duplicate(p).catch(handleError)
 }

 const handleInstanceRightClick = async (event, passedInstance) => {
-  const baseOptions = [
-    { name: 'add_content' },
-    { type: 'divider' },
-    { name: 'edit' },
-    { name: 'duplicate' },
-    { name: 'open_folder' },
-    { name: 'copy_path' },
-    { type: 'divider' },
-    {
-      name: 'delete',
-      color: 'danger',
-    },
-  ]
+	const baseOptions = [
+		{ name: 'add_content' },
+		{ type: 'divider' },
+		{ name: 'edit' },
+		{ name: 'duplicate' },
+		{ name: 'open_folder' },
+		{ name: 'copy_path' },
+		{ type: 'divider' },
+		{
+			name: 'delete',
+			color: 'danger',
+		},
+	]

-  const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)
+	const runningProcesses = await get_by_profile_path(passedInstance.path).catch(handleError)

-  const options =
-    runningProcesses.length > 0
-      ? [
-          {
-            name: 'stop',
-            color: 'danger',
-          },
-          ...baseOptions,
-        ]
-      : [
-          {
-            name: 'play',
-            color: 'primary',
-          },
-          ...baseOptions,
-        ]
+	const options =
+		runningProcesses.length > 0
+			? [
+					{
+						name: 'stop',
+						color: 'danger',
+					},
+					...baseOptions,
+				]
+			: [
+					{
+						name: 'play',
+						color: 'primary',
+					},
+					...baseOptions,
+				]

-  instanceOptions.value.showMenu(event, passedInstance, options)
+	instanceOptions.value.showMenu(event, passedInstance, options)
 }

 const handleProjectClick = (event, passedInstance) => {
-  instanceOptions.value.showMenu(event, passedInstance, [
-    {
-      name: 'install',
-      color: 'primary',
-    },
-    { type: 'divider' },
-    {
-      name: 'open_link',
-    },
-    {
-      name: 'copy_link',
-    },
-  ])
+	instanceOptions.value.showMenu(event, passedInstance, [
+		{
+			name: 'install',
+			color: 'primary',
+		},
+		{ type: 'divider' },
+		{
+			name: 'open_link',
+		},
+		{
+			name: 'copy_link',
+		},
+	])
 }

 const handleOptionsClick = async (args) => {
-  switch (args.option) {
-    case 'play':
-      await run(args.item.path).catch((err) =>
-        handleSevereError(err, { profilePath: args.item.path }),
-      )
-      trackEvent('InstanceStart', {
-        loader: args.item.loader,
-        game_version: args.item.game_version,
-      })
-      break
-    case 'stop':
-      await kill(args.item.path).catch(handleError)
-      trackEvent('InstanceStop', {
-        loader: args.item.loader,
-        game_version: args.item.game_version,
-      })
-      break
-    case 'add_content':
-      await router.push({
-        path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-        query: { i: args.item.path },
-      })
-      break
-    case 'edit':
-      await router.push({
-        path: `/instance/${encodeURIComponent(args.item.path)}/`,
-      })
-      break
-    case 'duplicate':
-      if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
-      break
-    case 'delete':
-      currentDeleteInstance.value = args.item.path
-      deleteConfirmModal.value.show()
-      break
-    case 'open_folder':
-      await showProfileInFolder(args.item.path)
-      break
-    case 'copy_path':
-      await navigator.clipboard.writeText(args.item.path)
-      break
-    case 'install': {
-      await installVersion(args.item.project_id, null, null, 'ProjectCardContextMenu')
+	switch (args.option) {
+		case 'play':
+			await run(args.item.path).catch((err) =>
+				handleSevereError(err, { profilePath: args.item.path }),
+			)
+			trackEvent('InstanceStart', {
+				loader: args.item.loader,
+				game_version: args.item.game_version,
+			})
+			break
+		case 'stop':
+			await kill(args.item.path).catch(handleError)
+			trackEvent('InstanceStop', {
+				loader: args.item.loader,
+				game_version: args.item.game_version,
+			})
+			break
+		case 'add_content':
+			await router.push({
+				path: `/browse/${args.item.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+				query: { i: args.item.path },
+			})
+			break
+		case 'edit':
+			await router.push({
+				path: `/instance/${encodeURIComponent(args.item.path)}/`,
+			})
+			break
+		case 'duplicate':
+			if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+			break
+		case 'delete':
+			currentDeleteInstance.value = args.item.path
+			deleteConfirmModal.value.show()
+			break
+		case 'open_folder':
+			await showProfileInFolder(args.item.path)
+			break
+		case 'copy_path':
+			await navigator.clipboard.writeText(args.item.path)
+			break
+		case 'install': {
+			await installVersion(
+				args.item.project_id,
+				null,
+				null,
+				'ProjectCardContextMenu',
+				() => {},
+				() => {},
+			).catch(handleError)

-      break
-    }
-    case 'open_link':
-      openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
-      break
-    case 'copy_link':
-      await navigator.clipboard.writeText(
-        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
-      )
-      break
-  }
+			break
+		}
+		case 'open_link':
+			openUrl(`https://modrinth.com/${args.item.project_type}/${args.item.slug}`)
+			break
+		case 'copy_link':
+			await navigator.clipboard.writeText(
+				`https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+			)
+			break
+	}
 }

 const maxInstancesPerCompactRow = ref(1)
@@ -183,184 +192,184 @@ const maxInstancesPerRow = ref(1)
 const maxProjectsPerRow = ref(1)

 const calculateCardsPerRow = () => {
-  if (rows.value.length === 0) {
-    return
-  }
+	if (rows.value.length === 0) {
+		return
+	}

-  // Calculate how many cards fit in one row
-  const containerWidth = rows.value[0].clientWidth
-  // Convert container width from pixels to rem
-  const containerWidthInRem =
-    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+	// Calculate how many cards fit in one row
+	const containerWidth = rows.value[0].clientWidth
+	// Convert container width from pixels to rem
+	const containerWidthInRem =
+		containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)

-  maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
-  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
-  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
+	maxInstancesPerCompactRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)
+	maxInstancesPerRow.value = Math.floor((containerWidthInRem + 0.75) / 20.75)
+	maxProjectsPerRow.value = Math.floor((containerWidthInRem + 0.75) / 18.75)

-  if (maxInstancesPerRow.value < 5) {
-    maxInstancesPerRow.value *= 2
-  }
-  if (maxInstancesPerCompactRow.value < 5) {
-    maxInstancesPerCompactRow.value *= 2
-  }
-  if (maxProjectsPerRow.value < 3) {
-    maxProjectsPerRow.value *= 2
-  }
+	if (maxInstancesPerRow.value < 5) {
+		maxInstancesPerRow.value *= 2
+	}
+	if (maxInstancesPerCompactRow.value < 5) {
+		maxInstancesPerCompactRow.value *= 2
+	}
+	if (maxProjectsPerRow.value < 3) {
+		maxProjectsPerRow.value *= 2
+	}
 }

 const rowContainer = ref(null)
 const resizeObserver = ref(null)

 onMounted(() => {
-  calculateCardsPerRow()
-  resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
-  if (rowContainer.value) {
-    resizeObserver.value.observe(rowContainer.value)
-  }
-  window.addEventListener('resize', calculateCardsPerRow)
+	calculateCardsPerRow()
+	resizeObserver.value = new ResizeObserver(calculateCardsPerRow)
+	if (rowContainer.value) {
+		resizeObserver.value.observe(rowContainer.value)
+	}
+	window.addEventListener('resize', calculateCardsPerRow)
 })

 onUnmounted(() => {
-  window.removeEventListener('resize', calculateCardsPerRow)
-  if (rowContainer.value) {
-    resizeObserver.value.unobserve(rowContainer.value)
-  }
+	window.removeEventListener('resize', calculateCardsPerRow)
+	if (rowContainer.value) {
+		resizeObserver.value.unobserve(rowContainer.value)
+	}
 })
 </script>

 <template>
-  <ConfirmModalWrapper
-    ref="deleteConfirmModal"
-    title="Are you sure you want to delete this instance?"
-    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
-    :has-to-type="false"
-    proceed-label="Delete"
-    @proceed="deleteProfile"
-  />
-  <div ref="rowContainer" class="flex flex-col gap-4">
-    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
-      <HeadingLink class="mt-1" :to="row.route">
-        {{ row.label }}
-      </HeadingLink>
-      <section
-        v-if="row.instance"
-        ref="modsRow"
-        class="instances"
-        :class="{ compact: row.compact }"
-      >
-        <Instance
-          v-for="(instance, instanceIndex) in row.instances.slice(
-            0,
-            row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
-          )"
-          :key="row.label + instance.path"
-          :instance="instance"
-          :compact="row.compact"
-          :first="instanceIndex === 0"
-          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
-        />
-      </section>
-      <section v-else ref="modsRow" class="projects">
-        <ProjectCard
-          v-for="project in row.instances.slice(0, maxProjectsPerRow)"
-          :key="project?.project_id"
-          ref="instanceComponents"
-          class="item"
-          :project="project"
-          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
-        />
-      </section>
-    </div>
-  </div>
-  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
-    <template #play> <PlayIcon /> Play </template>
-    <template #stop> <StopCircleIcon /> Stop </template>
-    <template #add_content> <PlusIcon /> Add content </template>
-    <template #edit> <EyeIcon /> View instance </template>
-    <template #delete> <TrashIcon /> Delete </template>
-    <template #open_folder> <FolderOpenIcon /> Open folder </template>
-    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
-    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
-    <template #install> <DownloadIcon /> Install </template>
-    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
-    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
-  </ContextMenu>
+	<ConfirmModalWrapper
+		ref="deleteConfirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		@proceed="deleteProfile"
+	/>
+	<div ref="rowContainer" class="flex flex-col gap-4">
+		<div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+			<HeadingLink class="mt-1" :to="row.route">
+				{{ row.label }}
+			</HeadingLink>
+			<section
+				v-if="row.instance"
+				ref="modsRow"
+				class="instances"
+				:class="{ compact: row.compact }"
+			>
+				<Instance
+					v-for="(instance, instanceIndex) in row.instances.slice(
+						0,
+						row.compact ? maxInstancesPerCompactRow : maxInstancesPerRow,
+					)"
+					:key="row.label + instance.path"
+					:instance="instance"
+					:compact="row.compact"
+					:first="instanceIndex === 0"
+					@contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
+				/>
+			</section>
+			<section v-else ref="modsRow" class="projects">
+				<LegacyProjectCard
+					v-for="project in row.instances.slice(0, maxProjectsPerRow)"
+					:key="project?.project_id"
+					ref="instanceComponents"
+					class="item"
+					:project="project"
+					@contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
+				/>
+			</section>
+		</div>
+	</div>
+	<ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+		<template #play> <PlayIcon /> Play </template>
+		<template #stop> <StopCircleIcon /> Stop </template>
+		<template #add_content> <PlusIcon /> Add content </template>
+		<template #edit> <EyeIcon /> View instance </template>
+		<template #delete> <TrashIcon /> Delete </template>
+		<template #open_folder> <FolderOpenIcon /> Open folder </template>
+		<template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+		<template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+		<template #install> <DownloadIcon /> Install </template>
+		<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+		<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+	</ContextMenu>
 </template>
 <style lang="scss" scoped>
 .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	gap: 1rem;

-  -ms-overflow-style: none;
-  scrollbar-width: none;
+	-ms-overflow-style: none;
+	scrollbar-width: none;

-  &::-webkit-scrollbar {
-    width: 0;
-    background: transparent;
-  }
+	&::-webkit-scrollbar {
+		width: 0;
+		background: transparent;
+	}
 }

 .row {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  overflow: hidden;
-  width: 100%;
-  min-width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	overflow: hidden;
+	width: 100%;
+	min-width: 100%;

-  &:nth-child(even) {
-    background: var(--color-bg);
-  }
+	&:nth-child(even) {
+		background: var(--color-bg);
+	}

-  .header {
-    width: 100%;
-    margin-bottom: 1rem;
-    gap: var(--gap-xs);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+	.header {
+		width: 100%;
+		margin-bottom: 1rem;
+		gap: var(--gap-xs);
+		display: flex;
+		flex-direction: row;
+		align-items: center;

-    a {
-      margin: 0;
-      font-size: var(--font-size-md);
-      font-weight: bolder;
-      white-space: nowrap;
-      color: var(--color-base);
-    }
+		a {
+			margin: 0;
+			font-size: var(--font-size-md);
+			font-weight: bolder;
+			white-space: nowrap;
+			color: var(--color-base);
+		}

-    svg {
-      height: 1.25rem;
-      width: 1.25rem;
-      color: var(--color-base);
-    }
-  }
+		svg {
+			height: 1.25rem;
+			width: 1.25rem;
+			color: var(--color-base);
+		}
+	}

-  .instances {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    grid-gap: 0.75rem;
-    width: 100%;
+	.instances {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+		grid-gap: 0.75rem;
+		width: 100%;

-    &.compact {
-      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-      gap: 0.75rem;
-    }
-  }
+		&.compact {
+			grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+			gap: 0.75rem;
+		}
+	}

-  .projects {
-    display: grid;
-    width: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-    grid-gap: 0.75rem;
+	.projects {
+		display: grid;
+		width: 100%;
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-gap: 0.75rem;

-    .item {
-      width: 100%;
-      max-width: 100%;
-    }
-  }
+		.item {
+			width: 100%;
+			max-width: 100%;
+		}
+	}
 }
 </style>
@@ -1,101 +1,103 @@
 <template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
-    class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="toggleMenu"
-  >
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
-    <div class="flex flex-col w-full">
-      <span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
-      <span class="text-secondary text-xs">Minecraft account</span>
-    </div>
-    <DropdownIcon class="w-5 h-5 shrink-0" />
-  </div>
-  <transition name="fade">
-    <Card
-      v-if="showCard || mode === 'isolated'"
-      ref="card"
-      class="account-card"
-      :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
-    >
-      <div v-if="selectedAccount" class="selected account">
-        <Avatar size="xs" :src="avatarUrl" />
-        <div>
-          <h4>{{ selectedAccount.profile.name }}</h4>
-          <p>Selected</p>
-        </div>
-        <Button
-          v-tooltip="'Log out'"
-          icon-only
-          color="raised"
-          @click="logout(selectedAccount.profile.id)"
-        >
-          <TrashIcon />
-        </Button>
-      </div>
-      <div v-else class="logged-out account">
-        <h4>Not signed in</h4>
-        <Button
-          v-tooltip="'Log in'"
-          :disabled="loginDisabled"
-          icon-only
-          color="primary"
-          @click="login()"
-        >
-          <LogInIcon v-if="!loginDisabled" />
-          <SpinnerIcon v-else class="animate-spin" />
-        </Button>
-      </div>
-      <div v-if="displayAccounts.length > 0" class="account-group">
-        <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
-          <Button class="option account" @click="setAccount(account)">
-            <Avatar :src="getAccountAvatarUrl(account)" class="icon" />
-            <p>{{ account.profile.name }}</p>
-          </Button>
-          <Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
-            <TrashIcon />
-          </Button>
-        </div>
-      </div>
-      <Button v-if="accounts.length > 0" @click="login()">
-        <PlusIcon />
-        Add account
-      </Button>
-    </Card>
-  </transition>
+	<div
+		v-if="mode !== 'isolated'"
+		ref="button"
+		class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
+		:class="{ expanded: mode === 'expanded' }"
+		@click="toggleMenu"
+	>
+		<Avatar
+			size="36px"
+			:src="
+				selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+			"
+		/>
+		<div class="flex flex-col w-full">
+			<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
+			<span class="text-secondary text-xs">Minecraft account</span>
+		</div>
+		<DropdownIcon class="w-5 h-5 shrink-0" />
+	</div>
+	<transition name="fade">
+		<Card
+			v-if="showCard || mode === 'isolated'"
+			ref="card"
+			class="account-card"
+			:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+		>
+			<div v-if="selectedAccount" class="selected account">
+				<Avatar size="xs" :src="avatarUrl" />
+				<div>
+					<h4>{{ selectedAccount.profile.name }}</h4>
+					<p>Selected</p>
+				</div>
+				<Button
+					v-tooltip="'Log out'"
+					icon-only
+					color="raised"
+					@click="logout(selectedAccount.profile.id)"
+				>
+					<TrashIcon />
+				</Button>
+			</div>
+			<div v-else class="logged-out account">
+				<h4>Not signed in</h4>
+				<Button
+					v-tooltip="'Log in'"
+					:disabled="loginDisabled"
+					icon-only
+					color="primary"
+					@click="login()"
+				>
+					<LogInIcon v-if="!loginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+				</Button>
+			</div>
+			<div v-if="displayAccounts.length > 0" class="account-group">
+				<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
+					<Button class="option account" @click="setAccount(account)">
+						<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
+						<p>{{ account.profile.name }}</p>
+					</Button>
+					<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
+						<TrashIcon />
+					</Button>
+				</div>
+			</div>
+			<Button v-if="accounts.length > 0" @click="login()">
+				<PlusIcon />
+				Add account
+			</Button>
+		</Card>
+	</transition>
 </template>

 <script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
-import {
-  users,
-  remove_user,
-  set_default_user,
-  login as login_flow,
-  get_default_user,
-} from '@/helpers/auth'
-import { handleError } from '@/store/state.js'
+import { DropdownIcon, LogInIcon, PlusIcon, SpinnerIcon, TrashIcon } from '@modrinth/assets'
+import { Avatar, Button, Card, injectNotificationManager } from '@modrinth/ui'
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
+
 import { trackEvent } from '@/helpers/analytics'
+import {
+	get_default_user,
+	login as login_flow,
+	remove_user,
+	set_default_user,
+	users,
+} from '@/helpers/auth'
 import { process_listener } from '@/helpers/events'
-import { handleSevereError } from '@/store/error.js'
-import { get_available_skins } from '@/helpers/skins'
 import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { get_available_skins } from '@/helpers/skins'
+import { handleSevereError } from '@/store/error.js'
+
+const { handleError } = injectNotificationManager()

 defineProps({
-  mode: {
-    type: String,
-    required: true,
-    default: 'normal',
-  },
+	mode: {
+		type: String,
+		required: true,
+		default: 'normal',
+	},
 })

 const emit = defineEmits(['change'])
@@ -107,370 +109,370 @@ const equippedSkin = ref(null)
 const headUrlCache = ref(new Map())

 async function refreshValues() {
-  defaultUser.value = await get_default_user().catch(handleError)
-  accounts.value = await users().catch(handleError)
+	defaultUser.value = await get_default_user().catch(handleError)
+	accounts.value = await users().catch(handleError)

-  try {
-    const skins = await get_available_skins()
-    equippedSkin.value = skins.find((skin) => skin.is_equipped)
+	try {
+		const skins = await get_available_skins()
+		equippedSkin.value = skins.find((skin) => skin.is_equipped)

-    if (equippedSkin.value) {
-      try {
-        const headUrl = await getPlayerHeadUrl(equippedSkin.value)
-        headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
-      } catch (error) {
-        console.warn('Failed to get head render for equipped skin:', error)
-      }
-    }
-  } catch {
-    equippedSkin.value = null
-  }
+		if (equippedSkin.value) {
+			try {
+				const headUrl = await getPlayerHeadUrl(equippedSkin.value)
+				headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
+			} catch (error) {
+				console.warn('Failed to get head render for equipped skin:', error)
+			}
+		}
+	} catch {
+		equippedSkin.value = null
+	}
 }

 function setLoginDisabled(value) {
-  loginDisabled.value = value
+	loginDisabled.value = value
 }

 defineExpose({
-  refreshValues,
-  setLoginDisabled,
-  loginDisabled,
+	refreshValues,
+	setLoginDisabled,
+	loginDisabled,
 })
 await refreshValues()

 const displayAccounts = computed(() =>
-  accounts.value.filter((account) => defaultUser.value !== account.profile.id),
+	accounts.value.filter((account) => defaultUser.value !== account.profile.id),
 )

 const avatarUrl = computed(() => {
-  if (equippedSkin.value?.texture_key) {
-    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-    if (cachedUrl) {
-      return cachedUrl
-    }
-    return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
-  }
-  if (selectedAccount.value?.profile?.id) {
-    return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
-  }
-  return 'https://launcher-files.modrinth.com/assets/steve_head.png'
+	if (equippedSkin.value?.texture_key) {
+		const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
+		if (cachedUrl) {
+			return cachedUrl
+		}
+		return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
+	}
+	if (selectedAccount.value?.profile?.id) {
+		return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
+	}
+	return 'https://launcher-files.modrinth.com/assets/steve_head.png'
 })

 function getAccountAvatarUrl(account) {
-  if (
-    account.profile.id === selectedAccount.value?.profile?.id &&
-    equippedSkin.value?.texture_key
-  ) {
-    const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
-    if (cachedUrl) {
-      return cachedUrl
-    }
-  }
-  return `https://mc-heads.net/avatar/${account.profile.id}/128`
+	if (
+		account.profile.id === selectedAccount.value?.profile?.id &&
+		equippedSkin.value?.texture_key
+	) {
+		const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
+		if (cachedUrl) {
+			return cachedUrl
+		}
+	}
+	return `https://mc-heads.net/avatar/${account.profile.id}/128`
 }

 const selectedAccount = computed(() =>
-  accounts.value.find((account) => account.profile.id === defaultUser.value),
+	accounts.value.find((account) => account.profile.id === defaultUser.value),
 )

 async function setAccount(account) {
-  defaultUser.value = account.profile.id
-  await set_default_user(account.profile.id).catch(handleError)
-  emit('change')
+	defaultUser.value = account.profile.id
+	await set_default_user(account.profile.id).catch(handleError)
+	emit('change')
 }

 async function login() {
-  loginDisabled.value = true
-  const loggedIn = await login_flow().catch(handleSevereError)
+	loginDisabled.value = true
+	const loggedIn = await login_flow().catch(handleSevereError)

-  if (loggedIn) {
-    await setAccount(loggedIn)
-    await refreshValues()
-  }
+	if (loggedIn) {
+		await setAccount(loggedIn)
+		await refreshValues()
+	}

-  trackEvent('AccountLogIn')
-  loginDisabled.value = false
+	trackEvent('AccountLogIn')
+	loginDisabled.value = false
 }

 const logout = async (id) => {
-  await remove_user(id).catch(handleError)
-  await refreshValues()
-  if (!selectedAccount.value && accounts.value.length > 0) {
-    await setAccount(accounts.value[0])
-    await refreshValues()
-  } else {
-    emit('change')
-  }
-  trackEvent('AccountLogOut')
+	await remove_user(id).catch(handleError)
+	await refreshValues()
+	if (!selectedAccount.value && accounts.value.length > 0) {
+		await setAccount(accounts.value[0])
+		await refreshValues()
+	} else {
+		emit('change')
+	}
+	trackEvent('AccountLogOut')
 }

 const showCard = ref(false)
 const card = ref(null)
 const button = ref(null)
 const handleClickOutside = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    card.value &&
-    card.value.$el !== event.target &&
-    !elements.includes(card.value.$el) &&
-    !button.value.contains(event.target)
-  ) {
-    toggleMenu(false)
-  }
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		!button.value.contains(event.target)
+	) {
+		toggleMenu(false)
+	}
 }

 function toggleMenu(override = true) {
-  if (showCard.value || !override) {
-    showCard.value = false
-  } else {
-    showCard.value = true
-  }
+	if (showCard.value || !override) {
+		showCard.value = false
+	} else {
+		showCard.value = true
+	}
 }

 const unlisten = await process_listener(async (e) => {
-  if (e.event === 'launched') {
-    await refreshValues()
-  }
+	if (e.event === 'launched') {
+		await refreshValues()
+	}
 })

 onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
+	window.addEventListener('click', handleClickOutside)
 })

 onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
+	window.removeEventListener('click', handleClickOutside)
 })

 onUnmounted(() => {
-  unlisten()
+	unlisten()
 })
 </script>

 <style scoped lang="scss">
 .selected {
-  background: var(--color-brand-highlight);
-  border-radius: var(--radius-lg);
-  color: var(--color-contrast);
-  gap: 1rem;
+	background: var(--color-brand-highlight);
+	border-radius: var(--radius-lg);
+	color: var(--color-contrast);
+	gap: 1rem;
 }

 .logged-out {
-  background: var(--color-bg);
-  border-radius: var(--radius-lg);
-  gap: 1rem;
+	background: var(--color-bg);
+	border-radius: var(--radius-lg);
+	gap: 1rem;
 }

 .account {
-  width: max-content;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  padding: 0.5rem 1rem;
+	width: max-content;
+	display: flex;
+	align-items: center;
+	text-align: left;
+	padding: 0.5rem 1rem;

-  h4,
-  p {
-    margin: 0;
-  }
+	h4,
+	p {
+		margin: 0;
+	}
 }

 .account-card {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  margin-top: 0.5rem;
-  right: 2rem;
-  z-index: 11;
-  gap: 0.5rem;
-  padding: 1rem;
-  border: 1px solid var(--color-button-bg);
-  width: max-content;
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  max-height: 98vh;
-  overflow-y: auto;
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	margin-top: 0.5rem;
+	right: 2rem;
+	z-index: 11;
+	gap: 0.5rem;
+	padding: 1rem;
+	border: 1px solid var(--color-divider);
+	width: max-content;
+	user-select: none;
+	-ms-user-select: none;
+	-webkit-user-select: none;
+	max-height: calc(100vh - 300px);
+	overflow-y: auto;

-  &::-webkit-scrollbar-track {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
+	&::-webkit-scrollbar-track {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}

-  &::-webkit-scrollbar {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
+	&::-webkit-scrollbar {
+		border-top-right-radius: 1rem;
+		border-bottom-right-radius: 1rem;
+	}

-  &.hidden {
-    display: none;
-  }
+	&.hidden {
+		display: none;
+	}

-  &.expanded {
-    left: 13.5rem;
-  }
+	&.expanded {
+		left: 13.5rem;
+	}

-  &.isolated {
-    position: relative;
-    left: 0;
-    top: 0;
-  }
+	&.isolated {
+		position: relative;
+		left: 0;
+		top: 0;
+	}
 }

 .accounts-title {
-  font-size: 1.2rem;
-  font-weight: bolder;
+	font-size: 1.2rem;
+	font-weight: bolder;
 }

 .account-group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }

 .option {
-  width: calc(100% - 2.25rem);
-  background: var(--color-raised-bg);
-  color: var(--color-base);
-  box-shadow: none;
+	width: calc(100% - 2.25rem);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;

-  img {
-    margin-right: 0.5rem;
-  }
+	img {
+		margin-right: 0.5rem;
+	}
 }

 .icon {
-  --size: 1.5rem !important;
+	--size: 1.5rem !important;
 }

 .account-row {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  vertical-align: center;
-  justify-content: space-between;
-  padding-right: 1rem;
+	display: flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	vertical-align: center;
+	justify-content: space-between;
+	padding-right: 1rem;
 }

 .fade-enter-active,
 .fade-leave-active {
-  transition:
-    opacity 0.25s ease,
-    translate 0.25s ease,
-    scale 0.25s ease;
+	transition:
+		opacity 0.25s ease,
+		translate 0.25s ease,
+		scale 0.25s ease;
 }

 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
-  translate: 0 -2rem;
-  scale: 0.9;
+	opacity: 0;
+	translate: 0 -2rem;
+	scale: 0.9;
 }

 .avatar-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--color-base);
-  background-color: var(--color-button-bg);
-  border-radius: var(--radius-md);
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  text-align: left;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	color: var(--color-base);
+	background-color: var(--color-button-bg);
+	border-radius: var(--radius-md);
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	text-align: left;

-  &.expanded {
-    border: 1px solid var(--color-button-bg);
-    padding: 1rem;
-  }
+	&.expanded {
+		border: 1px solid var(--color-divider);
+		padding: 1rem;
+	}
 }

 .avatar-text {
-  margin: auto 0 auto 0.25rem;
-  display: flex;
-  flex-direction: column;
+	margin: auto 0 auto 0.25rem;
+	display: flex;
+	flex-direction: column;
 }

 .text {
-  width: 6rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	width: 6rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

 .accounts-text {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin: 0;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	margin: 0;
 }

 .qr-code {
-  background-color: white !important;
-  border-radius: var(--radius-md);
+	background-color: white !important;
+	border-radius: var(--radius-md);
 }

 .modal-body {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap-lg);
-  align-items: center;
-  padding: var(--gap-xl);
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-lg);
+	align-items: center;
+	padding: var(--gap-xl);

-  .modal-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap-sm);
-    width: 100%;
+	.modal-text {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-sm);
+		width: 100%;

-    h2,
-    p {
-      margin: 0;
-    }
+		h2,
+		p {
+			margin: 0;
+		}

-    .code-text {
-      display: flex;
-      flex-direction: row;
-      gap: var(--gap-xs);
-      align-items: center;
+		.code-text {
+			display: flex;
+			flex-direction: row;
+			gap: var(--gap-xs);
+			align-items: center;

-      .code {
-        background-color: var(--color-bg);
-        border-radius: var(--radius-md);
-        border: solid 1px var(--color-button-bg);
-        font-family: var(--mono-font);
-        letter-spacing: var(--gap-md);
-        color: var(--color-contrast);
-        font-size: 2rem;
-        font-weight: bold;
-        padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
-      }
+			.code {
+				background-color: var(--color-bg);
+				border-radius: var(--radius-md);
+				border: solid 1px var(--color-button-bg);
+				font-family: var(--mono-font);
+				letter-spacing: var(--gap-md);
+				color: var(--color-contrast);
+				font-size: 2rem;
+				font-weight: bold;
+				padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+			}

-      .btn {
-        width: 2.5rem;
-        height: 2.5rem;
-      }
-    }
-  }
+			.btn {
+				width: 2.5rem;
+				height: 2.5rem;
+			}
+		}
+	}
 }

 .button-row {
-  display: flex;
-  flex-direction: row;
+	display: flex;
+	flex-direction: row;
 }

 .modal {
-  position: absolute;
+	position: absolute;
 }

 .code {
-  color: var(--color-brand);
-  padding: 0.05rem 0.1rem;
-  // row not column
-  display: flex;
+	color: var(--color-brand);
+	padding: 0.05rem 0.1rem;
+	// row not column
+	display: flex;

-  .card {
-    background: var(--color-base);
-    color: var(--color-contrast);
-    padding: 0.5rem 1rem;
-  }
+	.card {
+		background: var(--color-base);
+		color: var(--color-contrast);
+		padding: 0.5rem 1rem;
+	}
 }
 </style>
@@ -1,60 +1,62 @@
 <script setup lang="ts">
-import { DropdownIcon, PlusIcon, FolderOpenIcon } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { add_project_from_path } from '@/helpers/profile.js'
-import { handleError } from '@/store/notifications.js'
 import { useRouter } from 'vue-router'

+import { add_project_from_path } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()
+
 const props = defineProps({
-  instance: {
-    type: Object,
-    required: true,
-  },
+	instance: {
+		type: Object,
+		required: true,
+	},
 })

 const router = useRouter()

 const handleAddContentFromFile = async () => {
-  const newProject = await open({ multiple: true })
-  if (!newProject) return
+	const newProject = await open({ multiple: true })
+	if (!newProject) return

-  for (const project of newProject) {
-    await add_project_from_path(props.instance.path, project.path ?? project).catch(handleError)
-  }
+	for (const project of newProject) {
+		await add_project_from_path(props.instance.path, project.path ?? project).catch(handleError)
+	}
 }

 const handleSearchContent = async () => {
-  await router.push({
-    path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : 'mod'}`,
-    query: { i: props.instance.path },
-  })
+	await router.push({
+		path: `/browse/${props.instance.loader === 'vanilla' ? 'resourcepack' : 'mod'}`,
+		query: { i: props.instance.path },
+	})
 }
 </script>

 <template>
-  <div class="joined-buttons">
-    <ButtonStyled>
-      <button @click="handleSearchContent">
-        <PlusIcon />
-        Install content
-      </button>
-    </ButtonStyled>
-    <ButtonStyled>
-      <OverflowMenu
-        :options="[
-          {
-            id: 'from_file',
-            action: handleAddContentFromFile,
-          },
-        ]"
-      >
-        <DropdownIcon />
-        <template #from_file>
-          <FolderOpenIcon />
-          <span class="no-wrap"> Add from file </span>
-        </template>
-      </OverflowMenu>
-    </ButtonStyled>
-  </div>
+	<div class="joined-buttons">
+		<ButtonStyled>
+			<button @click="handleSearchContent">
+				<PlusIcon />
+				Install content
+			</button>
+		</ButtonStyled>
+		<ButtonStyled>
+			<OverflowMenu
+				:options="[
+					{
+						id: 'from_file',
+						action: handleAddContentFromFile,
+					},
+				]"
+			>
+				<DropdownIcon />
+				<template #from_file>
+					<FolderOpenIcon />
+					<span class="no-wrap"> Add from file </span>
+				</template>
+			</OverflowMenu>
+		</ButtonStyled>
+	</div>
 </template>
@@ -1,63 +1,64 @@
 <template>
-  <div data-tauri-drag-region class="flex items-center gap-1 pl-3">
-    <Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
-      <ChevronLeftIcon />
-    </Button>
-    <Button
-      v-if="false"
-      class="breadcrumbs__forward transparent"
-      icon-only
-      @click="$router.forward()"
-    >
-      <ChevronRightIcon />
-    </Button>
-    {{ breadcrumbData.resetToNames(breadcrumbs) }}
-    <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
-      <router-link
-        v-if="breadcrumb.link"
-        :to="{
-          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
-          query: breadcrumb.query,
-        }"
-        class="text-primary"
-        >{{
-          breadcrumb.name.charAt(0) === '?'
-            ? breadcrumbData.getName(breadcrumb.name.slice(1))
-            : breadcrumb.name
-        }}
-      </router-link>
-      <span
-        v-else
-        data-tauri-drag-region
-        class="text-contrast font-semibold cursor-default select-none"
-        >{{
-          breadcrumb.name.charAt(0) === '?'
-            ? breadcrumbData.getName(breadcrumb.name.slice(1))
-            : breadcrumb.name
-        }}</span
-      >
-      <ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
-    </template>
-  </div>
+	<div data-tauri-drag-region class="flex items-center gap-1 pl-3">
+		<Button v-if="false" class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+			<ChevronLeftIcon />
+		</Button>
+		<Button
+			v-if="false"
+			class="breadcrumbs__forward transparent"
+			icon-only
+			@click="$router.forward()"
+		>
+			<ChevronRightIcon />
+		</Button>
+		{{ breadcrumbData.resetToNames(breadcrumbs) }}
+		<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
+			<router-link
+				v-if="breadcrumb.link"
+				:to="{
+					path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+					query: breadcrumb.query,
+				}"
+				class="text-primary"
+				>{{
+					breadcrumb.name.charAt(0) === '?'
+						? breadcrumbData.getName(breadcrumb.name.slice(1))
+						: breadcrumb.name
+				}}
+			</router-link>
+			<span
+				v-else
+				data-tauri-drag-region
+				class="text-contrast font-semibold cursor-default select-none"
+				>{{
+					breadcrumb.name.charAt(0) === '?'
+						? breadcrumbData.getName(breadcrumb.name.slice(1))
+						: breadcrumb.name
+				}}</span
+			>
+			<ChevronRightIcon v-if="breadcrumb.link" data-tauri-drag-region class="w-5 h-5" />
+		</template>
+	</div>
 </template>

 <script setup>
-import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useBreadcrumbs } from '@/store/breadcrumbs'

 const route = useRoute()

 const breadcrumbData = useBreadcrumbs()
 const breadcrumbs = computed(() => {
-  const additionalContext =
-    route.meta.useContext === true
-      ? breadcrumbData.context
-      : route.meta.useRootContext === true
-        ? breadcrumbData.rootContext
-        : null
-  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+	const additionalContext =
+		route.meta.useContext === true
+			? breadcrumbData.context
+			: route.meta.useRootContext === true
+				? breadcrumbData.rootContext
+				: null
+	return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
 })
 </script>
@@ -1,30 +1,30 @@
 <template>
-  <transition name="fade">
-    <div
-      v-show="shown"
-      ref="contextMenu"
-      class="context-menu"
-      :style="{
-        left: left,
-        top: top,
-      }"
-    >
-      <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
-        <hr v-if="option.type === 'divider'" class="divider" />
-        <div
-          v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
-          class="item clickable"
-          :class="[option.color ?? 'base']"
-        >
-          <slot :name="option.name" />
-        </div>
-      </div>
-    </div>
-  </transition>
+	<transition name="fade">
+		<div
+			v-show="shown"
+			ref="contextMenu"
+			class="context-menu"
+			:style="{
+				left: left,
+				top: top,
+			}"
+		>
+			<div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
+				<hr v-if="option.type === 'divider'" class="divider" />
+				<div
+					v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+					class="item clickable"
+					:class="[option.color ?? 'base']"
+				>
+					<slot :name="option.name" />
+				</div>
+			</div>
+		</div>
+	</transition>
 </template>

 <script setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'

 const emit = defineEmits(['menu-closed', 'option-clicked'])

@@ -36,141 +36,146 @@ const top = ref('0px')
 const shown = ref(false)

 defineExpose({
-  showMenu: (event, passedItem, passedOptions) => {
-    item.value = passedItem
-    options.value = passedOptions
+	showMenu: (event, passedItem, passedOptions) => {
+		item.value = passedItem
+		options.value = passedOptions

-    const menuWidth = contextMenu.value.clientWidth
-    const menuHeight = contextMenu.value.clientHeight
+		// show to get dimensions
+		shown.value = true

-    if (menuWidth + event.pageX >= window.innerWidth) {
-      left.value = event.pageX - menuWidth + 2 + 'px'
-    } else {
-      left.value = event.pageX - 2 + 'px'
-    }
+		// then, adjust position if overflowing
+		nextTick(() => {
+			const menuWidth = contextMenu.value?.clientWidth || 200
+			const menuHeight = contextMenu.value?.clientHeight || 100
+			const minFromEdge = 10

-    if (menuHeight + event.pageY >= window.innerHeight) {
-      top.value = event.pageY - menuHeight + 2 + 'px'
-    } else {
-      top.value = event.pageY - 2 + 'px'
-    }
+			if (event.pageX + menuWidth + minFromEdge >= window.innerWidth) {
+				left.value = Math.max(minFromEdge, event.pageX - menuWidth - minFromEdge) + 'px'
+			} else {
+				left.value = event.pageX + minFromEdge + 'px'
+			}

-    shown.value = true
-  },
+			if (event.pageY + menuHeight + minFromEdge >= window.innerHeight) {
+				top.value = Math.max(minFromEdge, event.pageY - menuHeight - minFromEdge) + 'px'
+			} else {
+				top.value = event.pageY + minFromEdge + 'px'
+			}
+		})
+	},
 })

 const isLinkedData = (item) => {
-  if (item.instance != undefined && item.instance.linked_data) {
-    return true
-  } else if (item != undefined && item.linked_data) {
-    return true
-  }
-  return false
+	if (item.instance != undefined && item.instance.linked_data) {
+		return true
+	} else if (item != undefined && item.linked_data) {
+		return true
+	}
+	return false
 }

 const hideContextMenu = () => {
-  shown.value = false
-  emit('menu-closed')
+	shown.value = false
+	emit('menu-closed')
 }

 const optionClicked = (option) => {
-  emit('option-clicked', {
-    item: item.value,
-    option: option,
-  })
-  hideContextMenu()
+	emit('option-clicked', {
+		item: item.value,
+		option: option,
+	})
+	hideContextMenu()
 }

 const onEscKeyRelease = (event) => {
-  if (event.keyCode === 27) {
-    hideContextMenu()
-  }
+	if (event.keyCode === 27) {
+		hideContextMenu()
+	}
 }

 const handleClickOutside = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    contextMenu.value &&
-    contextMenu.value.$el !== event.target &&
-    !elements.includes(contextMenu.value.$el)
-  ) {
-    hideContextMenu()
-  }
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		contextMenu.value &&
+		contextMenu.value.$el !== event.target &&
+		!elements.includes(contextMenu.value.$el)
+	) {
+		hideContextMenu()
+	}
 }

 onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
-  document.body.addEventListener('keyup', onEscKeyRelease)
+	window.addEventListener('click', handleClickOutside)
+	document.body.addEventListener('keyup', onEscKeyRelease)
 })

 onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keyup', onEscKeyRelease)
+	window.removeEventListener('click', handleClickOutside)
+	document.removeEventListener('keyup', onEscKeyRelease)
 })
 </script>

 <style lang="scss" scoped>
 .context-menu {
-  background-color: var(--color-raised-bg);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-floating);
-  border: 1px solid var(--color-button-bg);
-  margin: 0;
-  position: fixed;
-  z-index: 1000000;
-  overflow: hidden;
-  padding: var(--gap-sm);
+	background-color: var(--color-raised-bg);
+	border-radius: var(--radius-md);
+	box-shadow: var(--shadow-floating);
+	border: 1px solid var(--color-divider);
+	margin: 0;
+	position: fixed;
+	z-index: 1000000;
+	overflow: hidden;
+	padding: var(--gap-sm);

-  .item {
-    align-items: center;
-    color: var(--color-base);
-    cursor: pointer;
-    display: flex;
-    gap: var(--gap-sm);
-    padding: var(--gap-sm);
-    border-radius: var(--radius-sm);
+	.item {
+		align-items: center;
+		color: var(--color-base);
+		cursor: pointer;
+		display: flex;
+		gap: var(--gap-sm);
+		padding: var(--gap-sm);
+		border-radius: var(--radius-sm);

-    &:hover,
-    &:active {
-      &.base {
-        background-color: var(--color-button-bg);
-        color: var(--color-contrast);
-      }
+		&:hover,
+		&:active {
+			&.base {
+				background-color: var(--color-button-bg);
+				color: var(--color-contrast);
+			}

-      &.primary {
-        background-color: var(--color-brand);
-        color: var(--color-accent-contrast);
-        font-weight: bold;
-      }
+			&.primary {
+				background-color: var(--color-brand);
+				color: var(--color-accent-contrast);
+				font-weight: bold;
+			}

-      &.danger {
-        background-color: var(--color-red);
-        color: var(--color-accent-contrast);
-        font-weight: bold;
-      }
+			&.danger {
+				background-color: var(--color-red);
+				color: var(--color-accent-contrast);
+				font-weight: bold;
+			}

-      &.contrast {
-        background-color: var(--color-orange);
-        color: var(--color-accent-contrast);
-        font-weight: bold;
-      }
-    }
-  }
+			&.contrast {
+				background-color: var(--color-orange);
+				color: var(--color-accent-contrast);
+				font-weight: bold;
+			}
+		}
+	}

-  .divider {
-    border: 1px solid var(--color-button-bg);
-    margin: var(--gap-sm);
-    pointer-events: none;
-  }
+	.divider {
+		border: 1px solid var(--color-divider);
+		margin: var(--gap-sm);
+		pointer-events: none;
+	}
 }

 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
 }

 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+	opacity: 0;
 }
 </style>
@@ -1,23 +1,25 @@
 <script setup>
 import {
-  CheckIcon,
-  DropdownIcon,
-  XIcon,
-  HammerIcon,
-  LogInIcon,
-  UpdatedIcon,
-  CopyIcon,
+	CheckIcon,
+	CopyIcon,
+	DropdownIcon,
+	HammerIcon,
+	LogInIcon,
+	UpdatedIcon,
+	XIcon,
 } from '@modrinth/assets'
+import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+
 import { ChatIcon } from '@/assets/icons'
-import { ButtonStyled, Collapsible } from '@modrinth/ui'
-import { ref, computed } from 'vue'
-import { login as login_flow, set_default_user } from '@/helpers/auth.js'
-import { handleError } from '@/store/notifications.js'
-import { handleSevereError } from '@/store/error.js'
-import { cancel_directory_change } from '@/helpers/settings.ts'
-import { install } from '@/helpers/profile.js'
-import { trackEvent } from '@/helpers/analytics'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { install } from '@/helpers/profile.js'
+import { cancel_directory_change } from '@/helpers/settings.ts'
+import { handleSevereError } from '@/store/error.js'
+
+const { handleError } = injectNotificationManager()

 const errorModal = ref()
 const error = ref()
@@ -30,111 +32,112 @@ const supportLink = ref('https://support.modrinth.com')
 const metadata = ref({})

 defineExpose({
-  async show(errorVal, context, canClose = true, source = null) {
-    closable.value = canClose
+	async show(errorVal, context, canClose = true, source = null) {
+		console.log(errorVal, context, canClose, source)
+		closable.value = canClose

-    if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
-      title.value = 'Unable to sign in to Minecraft'
-      errorType.value = 'minecraft_auth'
-      supportLink.value =
-        'https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues'
+		if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
+			title.value = 'Unable to sign in to Minecraft'
+			errorType.value = 'minecraft_auth'
+			supportLink.value =
+				'https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues'

-      if (
-        errorVal.message.includes('existing connection was forcibly closed') ||
-        errorVal.message.includes('error sending request for url')
-      ) {
-        metadata.value.network = true
-      }
-      if (errorVal.message.includes('because the target machine actively refused it')) {
-        metadata.value.hostsFile = true
-      }
-    } else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
-      title.value = 'Sign in to Minecraft'
-      errorType.value = 'minecraft_sign_in'
-      supportLink.value = 'https://support.modrinth.com'
-    } else if (errorVal.message && errorVal.message.includes('Move directory error:')) {
-      title.value = 'Could not change app directory'
-      errorType.value = 'directory_move'
-      supportLink.value = 'https://support.modrinth.com'
+			if (
+				errorVal.message.includes('existing connection was forcibly closed') ||
+				errorVal.message.includes('error sending request for url')
+			) {
+				metadata.value.network = true
+			}
+			if (errorVal.message.includes('because the target machine actively refused it')) {
+				metadata.value.hostsFile = true
+			}
+		} else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+			title.value = 'Sign in to Minecraft'
+			errorType.value = 'minecraft_sign_in'
+			supportLink.value = 'https://support.modrinth.com'
+		} else if (errorVal.message && errorVal.message.includes('Move directory error:')) {
+			title.value = 'Could not change app directory'
+			errorType.value = 'directory_move'
+			supportLink.value = 'https://support.modrinth.com'

-      if (errorVal.message.includes('directory is not writeable')) {
-        metadata.value.readOnly = true
-      }
+			if (errorVal.message.includes('directory is not writeable')) {
+				metadata.value.readOnly = true
+			}

-      if (errorVal.message.includes('Not enough space')) {
-        metadata.value.notEnoughSpace = true
-      }
-    } else if (errorVal.message && errorVal.message.includes('No loader version selected for')) {
-      title.value = 'No loader selected'
-      errorType.value = 'no_loader_version'
-      supportLink.value = 'https://support.modrinth.com'
-      metadata.value.profilePath = context.profilePath
-    } else if (source === 'state_init') {
-      title.value = 'Error initializing Modrinth App'
-      errorType.value = 'state_init'
-      supportLink.value = 'https://support.modrinth.com'
-    } else {
-      title.value = 'An error occurred'
-      errorType.value = 'unknown'
-      supportLink.value = 'https://support.modrinth.com'
-      metadata.value = {}
-    }
+			if (errorVal.message.includes('Not enough space')) {
+				metadata.value.notEnoughSpace = true
+			}
+		} else if (errorVal.message && errorVal.message.includes('No loader version selected for')) {
+			title.value = 'No loader selected'
+			errorType.value = 'no_loader_version'
+			supportLink.value = 'https://support.modrinth.com'
+			metadata.value.profilePath = context.profilePath
+		} else if (source === 'state_init') {
+			title.value = 'Error initializing Modrinth App'
+			errorType.value = 'state_init'
+			supportLink.value = 'https://support.modrinth.com'
+		} else {
+			title.value = 'An error occurred'
+			errorType.value = 'unknown'
+			supportLink.value = 'https://support.modrinth.com'
+			metadata.value = {}
+		}

-    error.value = errorVal
-    errorModal.value.show()
-  },
+		error.value = errorVal
+		errorModal.value.show()
+	},
 })

 const loadingMinecraft = ref(false)
 async function loginMinecraft() {
-  try {
-    loadingMinecraft.value = true
-    const loggedIn = await login_flow()
+	try {
+		loadingMinecraft.value = true
+		const loggedIn = await login_flow()

-    if (loggedIn) {
-      await set_default_user(loggedIn.profile.id).catch(handleError)
-    }
+		if (loggedIn) {
+			await set_default_user(loggedIn.profile.id).catch(handleError)
+		}

-    await trackEvent('AccountLogIn', { source: 'ErrorModal' })
-    loadingMinecraft.value = false
-    errorModal.value.hide()
-  } catch (err) {
-    loadingMinecraft.value = false
-    handleSevereError(err)
-  }
+		await trackEvent('AccountLogIn', { source: 'ErrorModal' })
+		loadingMinecraft.value = false
+		errorModal.value.hide()
+	} catch (err) {
+		loadingMinecraft.value = false
+		handleSevereError(err)
+	}
 }

 async function cancelDirectoryChange() {
-  try {
-    await cancel_directory_change()
-    window.location.reload()
-  } catch (err) {
-    handleError(err)
-  }
+	try {
+		await cancel_directory_change()
+		window.location.reload()
+	} catch (err) {
+		handleError(err)
+	}
 }

 function retryDirectoryChange() {
-  window.location.reload()
+	window.location.reload()
 }

 const loadingRepair = ref(false)
 async function repairInstance() {
-  loadingRepair.value = true
-  try {
-    await install(metadata.value.profilePath, false)
-    errorModal.value.hide()
-  } catch (err) {
-    handleSevereError(err)
-  }
-  loadingRepair.value = false
+	loadingRepair.value = true
+	try {
+		await install(metadata.value.profilePath, false)
+		errorModal.value.hide()
+	} catch (err) {
+		handleSevereError(err)
+	}
+	loadingRepair.value = false
 }

 const hasDebugInfo = computed(
-  () =>
-    errorType.value === 'directory_move' ||
-    errorType.value === 'minecraft_auth' ||
-    errorType.value === 'state_init' ||
-    errorType.value === 'no_loader_version',
+	() =>
+		errorType.value === 'directory_move' ||
+		errorType.value === 'minecraft_auth' ||
+		errorType.value === 'state_init' ||
+		errorType.value === 'no_loader_version',
 )

 const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error message.')
@@ -142,236 +145,236 @@ const debugInfo = computed(() => error.value.message ?? error.value ?? 'No error
 const copied = ref(false)

 async function copyToClipboard(text) {
-  await navigator.clipboard.writeText(text)
-  copied.value = true
-  setTimeout(() => {
-    copied.value = false
-  }, 3000)
+	await navigator.clipboard.writeText(text)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 3000)
 }
 </script>

 <template>
-  <ModalWrapper ref="errorModal" :header="title" :closable="closable">
-    <div class="modal-body">
-      <div class="markdown-body">
-        <template v-if="errorType === 'minecraft_auth'">
-          <template v-if="metadata.network">
-            <h3>Network issues</h3>
-            <p>
-              It looks like there were issues with the Modrinth App connecting to Microsoft's
-              servers. This is often the result of a poor connection, so we recommend trying again
-              to see if it works. If issues continue to persist, follow the steps in
-              <a
-                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
-              >
-                our support article
-              </a>
-              to troubleshoot.
-            </p>
-          </template>
-          <template v-else-if="metadata.hostsFile">
-            <h3>Network issues</h3>
-            <p>
-              The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
-              remote server rejected the connection. This may indicate that these services are
-              blocked by the hosts file. Please visit
-              <a
-                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
-              >
-                our support article
-              </a>
-              for steps on how to fix the issue.
-            </p>
-          </template>
-          <template v-else>
-            <h3>Try another Microsoft account</h3>
-            <p>
-              Double check you've signed in with the right account. You may own Minecraft on a
-              different Microsoft account.
-            </p>
-            <div class="cta-button">
-              <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-                <LogInIcon /> Try another account
-              </button>
-            </div>
-            <h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
-            <p>
-              Try signing in with the
-              <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
-              first. Once you're done, come back here and sign in!
-            </p>
-          </template>
-          <div class="cta-button">
-            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-              <LogInIcon /> Try signing in again
-            </button>
-          </div>
-        </template>
-        <template v-if="errorType === 'directory_move'">
-          <template v-if="metadata.readOnly">
-            <h3>Change directory permissions</h3>
-            <p>
-              It looks like the Modrinth App is unable to write to the directory you selected.
-              Please adjust the permissions of the directory and try again or cancel the directory
-              change.
-            </p>
-          </template>
-          <template v-else-if="metadata.notEnoughSpace">
-            <h3>Not enough space</h3>
-            <p>
-              It looks like there is not enough space on the disk containing the directory you
-              selected. Please free up some space and try again or cancel the directory change.
-            </p>
-          </template>
-          <template v-else>
-            <p>
-              The Modrinth App is unable to migrate to the new directory you selected. Please
-              contact support for help or cancel the directory change.
-            </p>
-          </template>
+	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
+		<div class="modal-body">
+			<div class="markdown-body">
+				<template v-if="errorType === 'minecraft_auth'">
+					<template v-if="metadata.network">
+						<h3>Network issues</h3>
+						<p>
+							It looks like there were issues with the Modrinth App connecting to Microsoft's
+							servers. This is often the result of a poor connection, so we recommend trying again
+							to see if it works. If issues continue to persist, follow the steps in
+							<a
+								href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
+							>
+								our support article
+							</a>
+							to troubleshoot.
+						</p>
+					</template>
+					<template v-else-if="metadata.hostsFile">
+						<h3>Network issues</h3>
+						<p>
+							The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+							remote server rejected the connection. This may indicate that these services are
+							blocked by the hosts file. Please visit
+							<a
+								href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
+							>
+								our support article
+							</a>
+							for steps on how to fix the issue.
+						</p>
+					</template>
+					<template v-else>
+						<h3>Try another Microsoft account</h3>
+						<p>
+							Double check you've signed in with the right account. You may own Minecraft on a
+							different Microsoft account.
+						</p>
+						<div class="cta-button">
+							<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+								<LogInIcon /> Try another account
+							</button>
+						</div>
+						<h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
+						<p>
+							Try signing in with the
+							<a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
+							first. Once you're done, come back here and sign in!
+						</p>
+					</template>
+					<div class="cta-button">
+						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+							<LogInIcon /> Try signing in again
+						</button>
+					</div>
+				</template>
+				<template v-if="errorType === 'directory_move'">
+					<template v-if="metadata.readOnly">
+						<h3>Change directory permissions</h3>
+						<p>
+							It looks like the Modrinth App is unable to write to the directory you selected.
+							Please adjust the permissions of the directory and try again or cancel the directory
+							change.
+						</p>
+					</template>
+					<template v-else-if="metadata.notEnoughSpace">
+						<h3>Not enough space</h3>
+						<p>
+							It looks like there is not enough space on the disk containing the directory you
+							selected. Please free up some space and try again or cancel the directory change.
+						</p>
+					</template>
+					<template v-else>
+						<p>
+							The Modrinth App is unable to migrate to the new directory you selected. Please
+							contact support for help or cancel the directory change.
+						</p>
+					</template>

-          <div class="cta-button">
-            <button class="btn" @click="retryDirectoryChange">
-              <UpdatedIcon /> Retry directory change
-            </button>
-            <button class="btn btn-danger" @click="cancelDirectoryChange">
-              <XIcon /> Cancel directory change
-            </button>
-          </div>
-        </template>
-        <div v-else-if="errorType === 'minecraft_sign_in'">
-          <p>
-            To play this instance, you must sign in through Microsoft below. If you don't have a
-            Minecraft account, you can purchase the game on the
-            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
-              >Minecraft website</a
-            >.
-          </p>
-          <div class="cta-button">
-            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
-              <LogInIcon /> Sign in to Minecraft
-            </button>
-          </div>
-        </div>
-        <template v-else-if="errorType === 'state_init'">
-          <p>
-            Modrinth App failed to load correctly. This may be because of a corrupted file, or
-            because the app is missing crucial files.
-          </p>
-          <p>You may be able to fix it through one of the following ways:</p>
-          <ul>
-            <li>Ensuring you are connected to the internet, then try restarting the app.</li>
-            <li>Redownloading the app.</li>
-          </ul>
-        </template>
-        <template v-else-if="errorType === 'no_loader_version'">
-          <p>The Modrinth App failed to find the loader version for this instance.</p>
-          <p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
-          <div class="cta-button">
-            <button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
-              <HammerIcon /> Repair instance
-            </button>
-          </div>
-        </template>
-        <template v-else>
-          {{ debugInfo }}
-        </template>
-        <template v-if="hasDebugInfo">
-          <hr />
-          <p>
-            If nothing is working and you need help, visit
-            <a :href="supportLink">our support page</a>
-            and start a chat using the widget in the bottom right and we will be more than happy to
-            assist! Make sure to provide the following debug information to the agent:
-          </p>
-        </template>
-      </div>
-      <div class="flex items-center gap-2">
-        <ButtonStyled>
-          <a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-        </ButtonStyled>
-        <ButtonStyled v-if="closable">
-          <button @click="errorModal.hide()"><XIcon /> Close</button>
-        </ButtonStyled>
-        <ButtonStyled v-if="hasDebugInfo">
-          <button :disabled="copied" @click="copyToClipboard(debugInfo)">
-            <template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
-            <template v-else> <CopyIcon /> Copy debug info </template>
-          </button>
-        </ButtonStyled>
-      </div>
-      <template v-if="hasDebugInfo">
-        <div class="bg-button-bg rounded-xl mt-2 overflow-clip">
-          <button
-            class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
-            @click="errorCollapsed = !errorCollapsed"
-          >
-            <span class="text-contrast font-extrabold m-0">Debug information:</span>
-            <DropdownIcon
-              class="h-5 w-5 text-secondary transition-transform"
-              :class="{ 'rotate-180': !errorCollapsed }"
-            />
-          </button>
-          <Collapsible :collapsed="errorCollapsed">
-            <pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
-          </Collapsible>
-        </div>
-      </template>
-    </div>
-  </ModalWrapper>
+					<div class="cta-button">
+						<button class="btn" @click="retryDirectoryChange">
+							<UpdatedIcon /> Retry directory change
+						</button>
+						<button class="btn btn-danger" @click="cancelDirectoryChange">
+							<XIcon /> Cancel directory change
+						</button>
+					</div>
+				</template>
+				<div v-else-if="errorType === 'minecraft_sign_in'">
+					<p>
+						To play this instance, you must sign in through Microsoft below. If you don't have a
+						Minecraft account, you can purchase the game on the
+						<a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+							>Minecraft website</a
+						>.
+					</p>
+					<div class="cta-button">
+						<button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+							<LogInIcon /> Sign in to Minecraft
+						</button>
+					</div>
+				</div>
+				<template v-else-if="errorType === 'state_init'">
+					<p>
+						Modrinth App failed to load correctly. This may be because of a corrupted file, or
+						because the app is missing crucial files.
+					</p>
+					<p>You may be able to fix it through one of the following ways:</p>
+					<ul>
+						<li>Ensuring you are connected to the internet, then try restarting the app.</li>
+						<li>Redownloading the app.</li>
+					</ul>
+				</template>
+				<template v-else-if="errorType === 'no_loader_version'">
+					<p>The Modrinth App failed to find the loader version for this instance.</p>
+					<p>To resolve this, you need to repair the instance. Click the button below to do so.</p>
+					<div class="cta-button">
+						<button class="btn btn-primary" :disabled="loadingRepair" @click="repairInstance">
+							<HammerIcon /> Repair instance
+						</button>
+					</div>
+				</template>
+				<template v-else>
+					{{ debugInfo }}
+				</template>
+				<template v-if="hasDebugInfo">
+					<hr />
+					<p>
+						If nothing is working and you need help, visit
+						<a :href="supportLink">our support page</a>
+						and start a chat using the widget in the bottom right and we will be more than happy to
+						assist! Make sure to provide the following debug information to the agent:
+					</p>
+				</template>
+			</div>
+			<div class="flex items-center gap-2">
+				<ButtonStyled>
+					<a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+				</ButtonStyled>
+				<ButtonStyled v-if="closable">
+					<button @click="errorModal.hide()"><XIcon /> Close</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="hasDebugInfo">
+					<button :disabled="copied" @click="copyToClipboard(debugInfo)">
+						<template v-if="copied"> <CheckIcon class="text-green" /> Copied! </template>
+						<template v-else> <CopyIcon /> Copy debug info </template>
+					</button>
+				</ButtonStyled>
+			</div>
+			<template v-if="hasDebugInfo">
+				<div class="bg-button-bg rounded-xl mt-2 overflow-clip">
+					<button
+						class="flex items-center justify-between w-full bg-transparent border-0 px-4 py-3 cursor-pointer"
+						@click="errorCollapsed = !errorCollapsed"
+					>
+						<span class="text-contrast font-extrabold m-0">Debug information:</span>
+						<DropdownIcon
+							class="h-5 w-5 text-secondary transition-transform"
+							:class="{ 'rotate-180': !errorCollapsed }"
+						/>
+					</button>
+					<Collapsible :collapsed="errorCollapsed">
+						<pre class="m-0 px-4 py-3 bg-bg rounded-none">{{ debugInfo }}</pre>
+					</Collapsible>
+				</div>
+			</template>
+		</div>
+	</ModalWrapper>
 </template>

 <style>
 .light-mode {
-  --color-orange-bg: rgba(255, 163, 71, 0.2);
+	--color-orange-bg: rgba(255, 163, 71, 0.2);
 }

 .dark-mode,
 .oled-mode {
-  --color-orange-bg: rgba(224, 131, 37, 0.2);
+	--color-orange-bg: rgba(224, 131, 37, 0.2);
 }
 </style>

 <style scoped lang="scss">
 .cta-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  gap: 0.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.5rem;
+	gap: 0.5rem;
 }

 .warning-banner {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: var(--gap-lg);
-  background-color: var(--color-orange-bg);
-  border: 2px solid var(--color-orange);
-  border-radius: var(--radius-md);
-  margin-bottom: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: var(--gap-lg);
+	background-color: var(--color-orange-bg);
+	border: 2px solid var(--color-orange);
+	border-radius: var(--radius-md);
+	margin-bottom: 1rem;
 }

 .warning-banner__title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 700;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-weight: 700;

-  svg {
-    color: var(--color-orange);
-    height: 1.5rem;
-    width: 1.5rem;
-  }
+	svg {
+		color: var(--color-orange);
+		height: 1.5rem;
+		width: 1.5rem;
+	}
 }

 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-md);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
 }

 .markdown-body {
-  overflow: auto;
+	overflow: auto;
 }
 </style>
@@ -1,25 +1,27 @@
 <script setup>
-import { XIcon, PlusIcon } from '@modrinth/assets'
-import { Button, Checkbox } from '@modrinth/ui'
-import { PackageIcon, VersionIcon } from '@/assets/icons'
-import { ref } from 'vue'
-import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { Button, Checkbox, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
-import { handleError } from '@/store/notifications.js'
+import { ref } from 'vue'
+
+import { PackageIcon, VersionIcon } from '@/assets/icons'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+
+const { handleError } = injectNotificationManager()

 const props = defineProps({
-  instance: {
-    type: Object,
-    required: true,
-  },
+	instance: {
+		type: Object,
+		required: true,
+	},
 })

 defineExpose({
-  show: () => {
-    exportModal.value.show()
-    initFiles()
-  },
+	show: () => {
+		exportModal.value.show()
+		initFiles()
+	},
 })

 const exportModal = ref(null)
@@ -31,273 +33,262 @@ const folders = ref([])
 const showingFiles = ref(false)

 const initFiles = async () => {
-  const newFolders = new Map()
-  const sep = '/'
-  files.value = []
-  await get_pack_export_candidates(props.instance.path).then((filePaths) =>
-    filePaths
-      .map((folder) => ({
-        path: folder,
-        name: folder.split(sep).pop(),
-        selected:
-          folder.startsWith('mods') ||
-          folder.startsWith('datapacks') ||
-          folder.startsWith('resourcepacks') ||
-          folder.startsWith('shaderpacks') ||
-          folder.startsWith('config'),
-        disabled:
-          folder === 'profile.json' ||
-          folder.startsWith('modrinth_logs') ||
-          folder.startsWith('.fabric'),
-      }))
-      .filter((pathData) => !pathData.path.includes('.DS_Store'))
-      .forEach((pathData) => {
-        const parent = pathData.path.split(sep).slice(0, -1).join(sep)
-        if (parent !== '') {
-          if (newFolders.has(parent)) {
-            newFolders.get(parent).push(pathData)
-          } else {
-            newFolders.set(parent, [pathData])
-          }
-        } else {
-          files.value.push(pathData)
-        }
-      }),
-  )
-  folders.value = [...newFolders.entries()].map(([name, value]) => [
-    {
-      name,
-      showingMore: false,
-    },
-    value,
-  ])
+	const newFolders = new Map()
+	const sep = '/'
+	files.value = []
+	await get_pack_export_candidates(props.instance.path).then((filePaths) =>
+		filePaths
+			.map((folder) => ({
+				path: folder,
+				name: folder.split(sep).pop(),
+				selected:
+					folder.startsWith('mods') ||
+					folder.startsWith('datapacks') ||
+					folder.startsWith('resourcepacks') ||
+					folder.startsWith('shaderpacks') ||
+					folder.startsWith('config'),
+				disabled:
+					folder === 'profile.json' ||
+					folder.startsWith('modrinth_logs') ||
+					folder.startsWith('.fabric'),
+			}))
+			.filter((pathData) => !pathData.path.includes('.DS_Store'))
+			.forEach((pathData) => {
+				const parent = pathData.path.split(sep).slice(0, -1).join(sep)
+				if (parent !== '') {
+					if (newFolders.has(parent)) {
+						newFolders.get(parent).push(pathData)
+					} else {
+						newFolders.set(parent, [pathData])
+					}
+				} else {
+					files.value.push(pathData)
+				}
+			}),
+	)
+	folders.value = [...newFolders.entries()].map(([name, value]) => [
+		{
+			name,
+			showingMore: false,
+		},
+		value,
+	])
 }

 await initFiles()

 const exportPack = async () => {
-  const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
-  folders.value.forEach((args) => {
-    args[1].forEach((child) => {
-      if (child.selected) {
-        filesToExport.push(child.path)
-      }
-    })
-  })
-  const outputPath = await open({
-    directory: true,
-    multiple: false,
-  })
+	const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+	folders.value.forEach((args) => {
+		args[1].forEach((child) => {
+			if (child.selected) {
+				filesToExport.push(child.path)
+			}
+		})
+	})
+	const outputPath = await open({
+		directory: true,
+		multiple: false,
+	})

-  if (outputPath) {
-    export_profile_mrpack(
-      props.instance.path,
-      outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
-      filesToExport,
-      versionInput.value,
-      exportDescription.value,
-      nameInput.value,
-    ).catch((err) => handleError(err))
-    exportModal.value.hide()
-  }
+	if (outputPath) {
+		export_profile_mrpack(
+			props.instance.path,
+			outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+			filesToExport,
+			versionInput.value,
+			exportDescription.value,
+			nameInput.value,
+		).catch((err) => handleError(err))
+		exportModal.value.hide()
+	}
 }
 </script>

 <template>
-  <ModalWrapper ref="exportModal" header="Export modpack">
-    <div class="modal-body">
-      <div class="labeled_input">
-        <p>Modpack Name</p>
-        <div class="iconified-input">
-          <PackageIcon />
-          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
-          <Button class="r-btn" @click="nameInput = ''">
-            <XIcon />
-          </Button>
-        </div>
-      </div>
-      <div class="labeled_input">
-        <p>Version number</p>
-        <div class="iconified-input">
-          <VersionIcon />
-          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
-          <Button class="r-btn" @click="versionInput = ''">
-            <XIcon />
-          </Button>
-        </div>
-      </div>
-      <div class="adjacent-input">
-        <div class="labeled_input">
-          <p>Description</p>
+	<ModalWrapper ref="exportModal" header="Export modpack">
+		<div class="modal-body">
+			<div class="labeled_input">
+				<p>Modpack Name</p>
+				<StyledInput
+					v-model="nameInput"
+					:icon="PackageIcon"
+					type="text"
+					placeholder="Modpack name"
+					clearable
+				/>
+			</div>
+			<div class="labeled_input">
+				<p>Version number</p>
+				<StyledInput
+					v-model="versionInput"
+					:icon="VersionIcon"
+					type="text"
+					placeholder="1.0.0"
+					clearable
+				/>
+			</div>
+			<div class="adjacent-input">
+				<div class="labeled_input">
+					<p>Description</p>

-          <div class="textarea-wrapper">
-            <textarea v-model="exportDescription" placeholder="Enter modpack description..." />
-          </div>
-        </div>
-      </div>
+					<StyledInput
+						v-model="exportDescription"
+						multiline
+						placeholder="Enter modpack description..."
+					/>
+				</div>
+			</div>

-      <div class="table">
-        <div class="table-head">
-          <div class="table-cell row-wise">
-            Select files and folders to include in pack
-            <Button
-              class="sleek-primary collapsed-button"
-              icon-only
-              @click="() => (showingFiles = !showingFiles)"
-            >
-              <PlusIcon v-if="!showingFiles" />
-              <XIcon v-else />
-            </Button>
-          </div>
-        </div>
-        <div v-if="showingFiles" class="table-content">
-          <div v-for="[path, children] in folders" :key="path.name" class="table-row">
-            <div class="table-cell file-entry">
-              <div class="file-primary">
-                <Checkbox
-                  :model-value="children.every((child) => child.selected)"
-                  :label="path.name"
-                  class="select-checkbox"
-                  :disabled="children.every((x) => x.disabled)"
-                  @update:model-value="
-                    (newValue) => children.forEach((child) => (child.selected = newValue))
-                  "
-                />
-                <Checkbox
-                  v-model="path.showingMore"
-                  class="select-checkbox dropdown"
-                  collapsing-toggle-style
-                />
-              </div>
-              <div v-if="path.showingMore" class="file-secondary">
-                <div v-for="child in children" :key="child.path" class="file-secondary-row">
-                  <Checkbox
-                    v-model="child.selected"
-                    :label="child.name"
-                    class="select-checkbox"
-                    :disabled="child.disabled"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-for="file in files" :key="file.path" class="table-row">
-            <div class="table-cell file-entry">
-              <div class="file-primary">
-                <Checkbox
-                  v-model="file.selected"
-                  :label="file.name"
-                  :disabled="file.disabled"
-                  class="select-checkbox"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="button-row push-right">
-        <Button @click="exportModal.hide">
-          <XIcon />
-          Cancel
-        </Button>
-        <Button color="primary" @click="exportPack">
-          <PackageIcon />
-          Export
-        </Button>
-      </div>
-    </div>
-  </ModalWrapper>
+			<div class="table">
+				<div class="table-head">
+					<div class="table-cell row-wise">
+						Select files and folders to include in pack
+						<Button
+							class="sleek-primary collapsed-button"
+							icon-only
+							@click="() => (showingFiles = !showingFiles)"
+						>
+							<PlusIcon v-if="!showingFiles" />
+							<XIcon v-else />
+						</Button>
+					</div>
+				</div>
+				<div v-if="showingFiles" class="table-content">
+					<div v-for="[path, children] in folders" :key="path.name" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
+								<Checkbox
+									:model-value="children.every((child) => child.selected)"
+									:label="path.name"
+									class="select-checkbox"
+									:disabled="children.every((x) => x.disabled)"
+									@update:model-value="
+										(newValue) => children.forEach((child) => (child.selected = newValue))
+									"
+								/>
+								<Checkbox
+									v-model="path.showingMore"
+									class="select-checkbox dropdown"
+									collapsing-toggle-style
+								/>
+							</div>
+							<div v-if="path.showingMore" class="file-secondary">
+								<div v-for="child in children" :key="child.path" class="file-secondary-row">
+									<Checkbox
+										v-model="child.selected"
+										:label="child.name"
+										class="select-checkbox"
+										:disabled="child.disabled"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div v-for="file in files" :key="file.path" class="table-row">
+						<div class="table-cell file-entry">
+							<div class="file-primary">
+								<Checkbox
+									v-model="file.selected"
+									:label="file.name"
+									:disabled="file.disabled"
+									class="select-checkbox"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="button-row push-right">
+				<Button @click="exportModal.hide">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button color="primary" @click="exportPack">
+					<PackageIcon />
+					Export
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <style scoped lang="scss">
 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-md);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
 }

 .labeled_input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);

-  p {
-    margin: 0;
-  }
+	p {
+		margin: 0;
+	}
 }

 .select-checkbox {
-  gap: var(--gap-sm);
+	gap: var(--gap-sm);

-  button.checkbox {
-    border: none;
-  }
+	button.checkbox {
+		border: none;
+	}

-  &.dropdown {
-    margin-left: auto;
-  }
+	&.dropdown {
+		margin-left: auto;
+	}
 }

 .table-content {
-  max-height: 18rem;
-  overflow-y: auto;
+	max-height: 18rem;
+	overflow-y: auto;
 }

 .table {
-  border: 1px solid var(--color-bg);
+	border: 1px solid var(--color-bg);
 }

 .file-entry {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
 }

 .file-primary {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-sm);
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
 }

 .file-secondary {
-  margin-left: var(--gap-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
-  height: 100%;
-  vertical-align: center;
+	margin-left: var(--gap-xl);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-sm);
+	height: 100%;
+	vertical-align: center;
 }

 .file-secondary-row {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-sm);
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
 }

 .button-row {
-  display: flex;
-  gap: var(--gap-sm);
-  align-items: center;
+	display: flex;
+	gap: var(--gap-sm);
+	align-items: center;
 }

 .row-wise {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.textarea-wrapper {
-  // margin-top: 1rem;
-  height: 12rem;
-
-  textarea {
-    max-height: 12rem;
-  }
-
-  .preview {
-    overflow-y: auto;
-  }
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
 }
 </style>
@@ -1,51 +1,52 @@
 <script setup>
+import {
+	DownloadIcon,
+	GameIcon,
+	PlayIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+	TimerIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import {
-  DownloadIcon,
-  GameIcon,
-  PlayIcon,
-  SpinnerIcon,
-  StopCircleIcon,
-  TimerIcon,
-} from '@modrinth/assets'
-import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { finish_install, kill, run } from '@/helpers/profile'
-import { get_by_profile_path } from '@/helpers/process'
+
+import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
-import { handleError } from '@/store/state.js'
+import { get_by_profile_path } from '@/helpers/process'
+import { finish_install, kill, run } from '@/helpers/profile'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import { handleSevereError } from '@/store/error.js'
-import { trackEvent } from '@/helpers/analytics'
-import dayjs from 'dayjs'

+const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()

 const props = defineProps({
-  instance: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-  first: {
-    type: Boolean,
-    default: false,
-  },
+	instance: {
+		type: Object,
+		default() {
+			return {}
+		},
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	first: {
+		type: Boolean,
+		default: false,
+	},
 })

 const playing = ref(false)
 const loading = ref(false)
 const modLoading = computed(
-  () =>
-    loading.value ||
-    currentEvent.value === 'installing' ||
-    (currentEvent.value === 'launched' && !playing.value),
+	() =>
+		loading.value ||
+		currentEvent.value === 'installing' ||
+		(currentEvent.value === 'launched' && !playing.value),
 )
 const installing = computed(() => props.instance.install_stage.includes('installing'))
 const installed = computed(() => props.instance.install_stage === 'installed')
@@ -53,78 +54,78 @@ const installed = computed(() => props.instance.install_stage === 'installed')
 const router = useRouter()

 const seeInstance = async () => {
-  await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
+	await router.push(`/instance/${encodeURIComponent(props.instance.path)}`)
 }

 const checkProcess = async () => {
-  const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)
+	const runningProcesses = await get_by_profile_path(props.instance.path).catch(handleError)

-  playing.value = runningProcesses.length > 0
+	playing.value = runningProcesses.length > 0
 }

 const play = async (e, context) => {
-  e?.stopPropagation()
-  loading.value = true
-  await run(props.instance.path)
-    .catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
-    .finally(() => {
-      trackEvent('InstancePlay', {
-        loader: props.instance.loader,
-        game_version: props.instance.game_version,
-        source: context,
-      })
-    })
-  loading.value = false
+	e?.stopPropagation()
+	loading.value = true
+	await run(props.instance.path)
+		.catch((err) => handleSevereError(err, { profilePath: props.instance.path }))
+		.finally(() => {
+			trackEvent('InstanceStart', {
+				loader: props.instance.loader,
+				game_version: props.instance.game_version,
+				source: context,
+			})
+		})
+	loading.value = false
 }

 const stop = async (e, context) => {
-  e?.stopPropagation()
-  playing.value = false
+	e?.stopPropagation()
+	playing.value = false

-  await kill(props.instance.path).catch(handleError)
+	await kill(props.instance.path).catch(handleError)

-  trackEvent('InstanceStop', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-    source: context,
-  })
+	trackEvent('InstanceStop', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+		source: context,
+	})
 }

 const repair = async (e) => {
-  e?.stopPropagation()
+	e?.stopPropagation()

-  await finish_install(props.instance)
+	await finish_install(props.instance).catch(handleError)
 }

 const openFolder = async () => {
-  await showProfileInFolder(props.instance.path)
+	await showProfileInFolder(props.instance.path)
 }

 const addContent = async () => {
-  await router.push({
-    path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
-    query: { i: props.instance.path },
-  })
+	await router.push({
+		path: `/browse/${props.instance.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+		query: { i: props.instance.path },
+	})
 }

 defineExpose({
-  play,
-  stop,
-  seeInstance,
-  openFolder,
-  addContent,
-  instance: props.instance,
+	play,
+	stop,
+	seeInstance,
+	openFolder,
+	addContent,
+	instance: props.instance,
 })

 const currentEvent = ref(null)

 const unlisten = await process_listener((e) => {
-  if (e.profile_path_id === props.instance.path) {
-    currentEvent.value = e.event
-    if (e.event === 'finished') {
-      playing.value = false
-    }
-  }
+	if (e.profile_path_id === props.instance.path) {
+		currentEvent.value = e.event
+		if (e.event === 'finished') {
+			playing.value = false
+		}
+	}
 })

 onMounted(() => checkProcess())
@@ -132,118 +133,118 @@ onUnmounted(() => unlisten())
 </script>

 <template>
-  <template v-if="compact">
-    <div
-      class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
-      @click="seeInstance"
-      @mouseenter="checkProcess"
-    >
-      <Avatar
-        size="48px"
-        :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-        :tint-by="instance.path"
-        alt="Mod card"
-      />
-      <div class="h-full flex items-center font-bold text-contrast leading-normal">
-        <span class="line-clamp-2">{{ instance.name }}</span>
-      </div>
-      <div class="flex items-center">
-        <ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
-          <button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
-            <StopCircleIcon />
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-else-if="modLoading" color="standard" circular>
-          <button v-tooltip="'Instance is loading...'" disabled>
-            <SpinnerIcon class="animate-spin" />
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
-          <button
-            v-tooltip="'Play'"
-            @click="(e) => play(e, 'InstanceCard')"
-            @mousehover="checkProcess"
-          >
-            <!-- Translate for optical centering -->
-            <PlayIcon class="translate-x-[1px]" />
-          </button>
-        </ButtonStyled>
-      </div>
-      <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
-        <TimerIcon />
-        <span class="text-sm">
-          <template v-if="instance.last_played">
-            Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
-          </template>
-          <template v-else> Never played </template>
-        </span>
-      </div>
-    </div>
-  </template>
-  <div v-else>
-    <div
-      class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
-      @click="seeInstance"
-      @mouseenter="checkProcess"
-    >
-      <div class="relative flex items-center justify-center">
-        <Avatar
-          size="48px"
-          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
-          :tint-by="instance.path"
-          alt="Mod card"
-          :class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
-        />
-        <div class="absolute inset-0 flex items-center justify-center">
-          <ButtonStyled v-if="playing" size="large" color="red" circular>
-            <button
-              v-tooltip="'Stop'"
-              :class="{ 'scale-100 opacity-100': playing }"
-              class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
-              @click="(e) => stop(e, 'InstanceCard')"
-              @mousehover="checkProcess"
-            >
-              <StopCircleIcon />
-            </button>
-          </ButtonStyled>
-          <SpinnerIcon
-            v-else-if="modLoading || installing"
-            v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
-            class="animate-spin w-8 h-8"
-            tabindex="-1"
-          />
-          <ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
-            <button
-              v-tooltip="'Repair'"
-              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-              @click="(e) => repair(e)"
-            >
-              <DownloadIcon />
-            </button>
-          </ButtonStyled>
-          <ButtonStyled v-else size="large" color="brand" circular>
-            <button
-              v-tooltip="'Play'"
-              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-              @click="(e) => play(e, 'InstanceCard')"
-              @mousehover="checkProcess"
-            >
-              <PlayIcon class="translate-x-[2px]" />
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-      <div class="flex flex-col gap-1">
-        <p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
-          {{ instance.name }}
-        </p>
-        <div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
-          <GameIcon class="shrink-0" />
-          <span class="text-sm capitalize">
-            {{ instance.loader }} {{ instance.game_version }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+	<template v-if="compact">
+		<div
+			class="card-shadow grid grid-cols-[auto_1fr_auto] bg-bg-raised rounded-xl p-3 pl-4 gap-2 cursor-pointer hover:brightness-90 transition-all"
+			@click="seeInstance"
+			@mouseenter="checkProcess"
+		>
+			<Avatar
+				size="48px"
+				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+				:tint-by="instance.path"
+				alt="Mod card"
+			/>
+			<div class="h-full flex items-center font-bold text-contrast leading-normal">
+				<span class="line-clamp-2">{{ instance.name }}</span>
+			</div>
+			<div class="flex items-center">
+				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
+					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
+						<StopCircleIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="modLoading" color="standard" circular>
+					<button v-tooltip="'Instance is loading...'" disabled>
+						<SpinnerIcon class="animate-spin" />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else :color="first ? 'brand' : 'standard'" circular>
+					<button
+						v-tooltip="'Play'"
+						@click="(e) => play(e, 'InstanceCard')"
+						@mousehover="checkProcess"
+					>
+						<!-- Translate for optical centering -->
+						<PlayIcon class="translate-x-[1px]" />
+					</button>
+				</ButtonStyled>
+			</div>
+			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
+				<TimerIcon />
+				<span class="text-sm">
+					<template v-if="instance.last_played">
+						Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
+					</template>
+					<template v-else> Never played </template>
+				</span>
+			</div>
+		</div>
+	</template>
+	<div v-else>
+		<div
+			class="button-base bg-bg-raised p-4 rounded-xl flex gap-3 group"
+			@click="seeInstance"
+			@mouseenter="checkProcess"
+		>
+			<div class="relative flex items-center justify-center">
+				<Avatar
+					size="48px"
+					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+					:tint-by="instance.path"
+					alt="Mod card"
+					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
+				/>
+				<div class="absolute inset-0 flex items-center justify-center">
+					<ButtonStyled v-if="playing" size="large" color="red" circular>
+						<button
+							v-tooltip="'Stop'"
+							:class="{ 'scale-100 opacity-100': playing }"
+							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
+							@click="(e) => stop(e, 'InstanceCard')"
+							@mousehover="checkProcess"
+						>
+							<StopCircleIcon />
+						</button>
+					</ButtonStyled>
+					<SpinnerIcon
+						v-else-if="modLoading || installing"
+						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
+						class="animate-spin w-8 h-8"
+						tabindex="-1"
+					/>
+					<ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
+						<button
+							v-tooltip="'Repair'"
+							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+							@click="(e) => repair(e)"
+						>
+							<DownloadIcon />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled v-else size="large" color="brand" circular>
+						<button
+							v-tooltip="'Play'"
+							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+							@click="(e) => play(e, 'InstanceCard')"
+							@mousehover="checkProcess"
+						>
+							<PlayIcon class="translate-x-[2px]" />
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+			<div class="flex flex-col gap-1">
+				<p class="m-0 text-md font-bold text-contrast leading-tight line-clamp-1">
+					{{ instance.name }}
+				</p>
+				<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
+					<GameIcon class="shrink-0" />
+					<span class="text-sm capitalize">
+						{{ instance.loader }} {{ instance.game_version }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
@@ -1,53 +1,53 @@
 <script setup lang="ts">
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { formatCategory } from '@modrinth/utils'
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'

 type Instance = {
-  game_version: string
-  loader: string
-  path: string
-  install_stage: string
-  icon_path?: string
-  name: string
+	game_version: string
+	loader: string
+	path: string
+	install_stage: string
+	icon_path?: string
+	name: string
 }

 defineProps<{
-  instance: Instance
+	instance: Instance
 }>()
 </script>

 <template>
-  <div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
-    <router-link
-      :to="`/instance/${encodeURIComponent(instance.path)}`"
-      tabindex="-1"
-      class="flex flex-col gap-4 text-primary"
-    >
-      <span class="flex items-center gap-2">
-        <Avatar
-          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
-          :alt="instance.name"
-          size="48px"
-        />
-        <span class="flex flex-col gap-2">
-          <span class="font-extrabold bold text-contrast">
-            {{ instance.name }}
-          </span>
-          <span class="text-secondary flex items-center gap-2 font-semibold">
-            <GameIcon class="h-5 w-5 text-secondary" />
-            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
-          </span>
-        </span>
-      </span>
-    </router-link>
-    <ButtonStyled>
-      <router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
-        <LeftArrowIcon /> Back to instance
-      </router-link>
-    </ButtonStyled>
-  </div>
+	<div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
+		<router-link
+			:to="`/instance/${encodeURIComponent(instance.path)}`"
+			tabindex="-1"
+			class="flex flex-col gap-4 text-primary"
+		>
+			<span class="flex items-center gap-2">
+				<Avatar
+					:src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+					:alt="instance.name"
+					size="48px"
+				/>
+				<span class="flex flex-col gap-2">
+					<span class="font-extrabold bold text-contrast">
+						{{ instance.name }}
+					</span>
+					<span class="text-secondary flex items-center gap-2 font-semibold">
+						<GameIcon class="h-5 w-5 text-secondary" />
+						<FormattedTag :tag="instance.loader" enforce-type="loader" />
+						{{ instance.game_version }}
+					</span>
+				</span>
+			</span>
+		</router-link>
+		<ButtonStyled>
+			<router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
+				<LeftArrowIcon /> Back to instance
+			</router-link>
+		</ButtonStyled>
+	</div>
 </template>

 <style scoped lang="scss"></style>
@@ -1,95 +1,97 @@
 <template>
-  <ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
-    <div class="auto-detect-modal">
-      <div class="table">
-        <div class="table-row table-head">
-          <div class="table-cell table-text">Version</div>
-          <div class="table-cell table-text">Path</div>
-          <div class="table-cell table-text">Actions</div>
-        </div>
-        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
-          <div class="table-cell table-text">
-            <span>{{ javaInstall.version }}</span>
-          </div>
-          <div v-tooltip="javaInstall.path" class="table-cell table-text">
-            <span>{{ javaInstall.path }}</span>
-          </div>
-          <div class="table-cell table-text manage">
-            <Button v-if="currentSelected.path === javaInstall.path" disabled
-              ><CheckIcon /> Selected</Button
-            >
-            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
-          </div>
-        </div>
-        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
-          <div class="table-cell table-text">No java installations found!</div>
-        </div>
-      </div>
-      <div class="input-group push-right">
-        <Button @click="$refs.detectJavaModal.hide()">
-          <XIcon />
-          Cancel
-        </Button>
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper ref="detectJavaModal" header="Select java version" :show-ad-on-close="false">
+		<div class="auto-detect-modal">
+			<div class="table">
+				<div class="table-row table-head">
+					<div class="table-cell table-text">Version</div>
+					<div class="table-cell table-text">Path</div>
+					<div class="table-cell table-text">Actions</div>
+				</div>
+				<div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+					<div class="table-cell table-text">
+						<span>{{ javaInstall.version }}</span>
+					</div>
+					<div v-tooltip="javaInstall.path" class="table-cell table-text">
+						<span>{{ javaInstall.path }}</span>
+					</div>
+					<div class="table-cell table-text manage">
+						<Button v-if="currentSelected.path === javaInstall.path" disabled
+							><CheckIcon /> Selected</Button
+						>
+						<Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+					</div>
+				</div>
+				<div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+					<div class="table-cell table-text">No java installations found!</div>
+				</div>
+			</div>
+			<div class="input-group push-right">
+				<Button @click="$refs.detectJavaModal.hide()">
+					<XIcon />
+					Cancel
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>
 <script setup>
-import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
+import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import { find_filtered_jres } from '@/helpers/jre.js'
-import { handleError } from '@/store/notifications.js'
-import { trackEvent } from '@/helpers/analytics'
+
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { find_filtered_jres } from '@/helpers/jre.js'
+
+const { handleError } = injectNotificationManager()

 const chosenInstallOptions = ref([])
 const detectJavaModal = ref(null)
 const currentSelected = ref({})

 defineExpose({
-  show: async (version, currentSelectedJava) => {
-    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
+	show: async (version, currentSelectedJava) => {
+		chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)

-    currentSelected.value = currentSelectedJava
-    if (!currentSelected.value) {
-      currentSelected.value = { path: '', version: '' }
-    }
+		currentSelected.value = currentSelectedJava
+		if (!currentSelected.value) {
+			currentSelected.value = { path: '', version: '' }
+		}

-    detectJavaModal.value.show()
-  },
+		detectJavaModal.value.show()
+	},
 })

 const emit = defineEmits(['submit'])

 function setJavaInstall(javaInstall) {
-  emit('submit', javaInstall)
-  detectJavaModal.value.hide()
-  trackEvent('JavaAutoDetect', {
-    path: javaInstall.path,
-    version: javaInstall.version,
-  })
+	emit('submit', javaInstall)
+	detectJavaModal.value.hide()
+	trackEvent('JavaAutoDetect', {
+		path: javaInstall.path,
+		version: javaInstall.version,
+	})
 }
 </script>
 <style lang="scss" scoped>
 .auto-detect-modal {
-  .table {
-    .table-row {
-      grid-template-columns: 1fr 4fr min-content;
-    }
+	.table {
+		.table-row {
+			grid-template-columns: 1fr 4fr min-content;
+		}

-    span {
-      display: inherit;
-      align-items: center;
-      justify-content: center;
-    }
+		span {
+			display: inherit;
+			align-items: center;
+			justify-content: center;
+		}

-    padding: 0.5rem;
-  }
+		padding: 0.5rem;
+	}
 }

 .manage {
-  display: flex;
-  gap: 0.5rem;
+	display: flex;
+	gap: 0.5rem;
 }
 </style>
@@ -1,100 +1,101 @@
 <template>
-  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
-  <div class="toggle-setting" :class="{ compact }">
-    <input
-      autocomplete="off"
-      :disabled="props.disabled"
-      :value="props.modelValue ? props.modelValue.path : ''"
-      type="text"
-      class="installation-input"
-      :placeholder="placeholder ?? '/path/to/java'"
-      @input="
-        (val) => {
-          emit('update:modelValue', {
-            ...props.modelValue,
-            path: val.target.value,
-          })
-        }
-      "
-    />
-    <span class="installation-buttons">
-      <Button
-        v-if="props.version"
-        :disabled="props.disabled || installingJava"
-        @click="reinstallJava"
-      >
-        <DownloadIcon />
-        {{ installingJava ? 'Installing...' : 'Install recommended' }}
-      </Button>
-      <Button :disabled="props.disabled" @click="autoDetect">
-        <SearchIcon />
-        Detect
-      </Button>
-      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
-        <FolderSearchIcon />
-        Browse
-      </Button>
-      <Button v-if="testingJava" disabled> Testing... </Button>
-      <Button v-else-if="testingJavaSuccess === true">
-        <CheckIcon class="test-success" />
-        Success
-      </Button>
-      <Button v-else-if="testingJavaSuccess === false">
-        <XIcon class="test-fail" />
-        Failed
-      </Button>
-      <Button v-else :disabled="props.disabled" @click="testJava">
-        <PlayIcon />
-        Test
-      </Button>
-    </span>
-  </div>
+	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+	<div class="toggle-setting" :class="{ compact }">
+		<StyledInput
+			autocomplete="off"
+			:disabled="props.disabled"
+			:model-value="props.modelValue ? props.modelValue.path : ''"
+			:placeholder="placeholder ?? '/path/to/java'"
+			wrapper-class="installation-input"
+			@update:model-value="
+				(val) => {
+					emit('update:modelValue', {
+						...props.modelValue,
+						path: val,
+					})
+				}
+			"
+		/>
+		<span class="installation-buttons">
+			<Button
+				v-if="props.version"
+				:disabled="props.disabled || installingJava"
+				@click="reinstallJava"
+			>
+				<DownloadIcon />
+				{{ installingJava ? 'Installing...' : 'Install recommended' }}
+			</Button>
+			<Button :disabled="props.disabled" @click="autoDetect">
+				<SearchIcon />
+				Detect
+			</Button>
+			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
+				<FolderSearchIcon />
+				Browse
+			</Button>
+			<Button v-if="testingJava" disabled> Testing... </Button>
+			<Button v-else-if="testingJavaSuccess === true">
+				<CheckIcon class="test-success" />
+				Success
+			</Button>
+			<Button v-else-if="testingJavaSuccess === false">
+				<XIcon class="test-fail" />
+				Failed
+			</Button>
+			<Button v-else :disabled="props.disabled" @click="testJava">
+				<PlayIcon />
+				Test
+			</Button>
+		</span>
+	</div>
 </template>

 <script setup>
 import {
-  SearchIcon,
-  PlayIcon,
-  CheckIcon,
-  XIcon,
-  FolderSearchIcon,
-  DownloadIcon,
+	CheckIcon,
+	DownloadIcon,
+	FolderSearchIcon,
+	PlayIcon,
+	SearchIcon,
+	XIcon,
 } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
-import { ref } from 'vue'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
+import { ref } from 'vue'
+
 import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
-import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+
+const { handleError } = injectNotificationManager()

 const props = defineProps({
-  version: {
-    type: Number,
-    required: false,
-    default: null,
-  },
-  modelValue: {
-    type: Object,
-    default: () => ({
-      path: '',
-      version: '',
-    }),
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: null,
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
+	version: {
+		type: Number,
+		required: false,
+		default: null,
+	},
+	modelValue: {
+		type: Object,
+		default: () => ({
+			path: '',
+			version: '',
+		}),
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: null,
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
 })

 const emit = defineEmits(['update:modelValue'])
@@ -105,115 +106,115 @@ const testingJavaSuccess = ref(null)
 const installingJava = ref(false)

 async function testJava() {
-  testingJava.value = true
-  testingJavaSuccess.value = await test_jre(
-    props.modelValue ? props.modelValue.path : '',
-    props.version,
-  )
-  testingJava.value = false
+	testingJava.value = true
+	testingJavaSuccess.value = await test_jre(
+		props.modelValue ? props.modelValue.path : '',
+		props.version,
+	)
+	testingJava.value = false

-  trackEvent('JavaTest', {
-    path: props.modelValue ? props.modelValue.path : '',
-    success: testingJavaSuccess.value,
-  })
+	trackEvent('JavaTest', {
+		path: props.modelValue ? props.modelValue.path : '',
+		success: testingJavaSuccess.value,
+	})

-  setTimeout(() => {
-    testingJavaSuccess.value = null
-  }, 2000)
+	setTimeout(() => {
+		testingJavaSuccess.value = null
+	}, 2000)
 }

 async function handleJavaFileInput() {
-  const filePath = await open()
+	const filePath = await open()

-  if (filePath) {
-    let result = await get_jre(filePath.path ?? filePath).catch(handleError)
-    if (!result) {
-      result = {
-        path: filePath.path ?? filePath,
-        version: props.version.toString(),
-        architecture: 'x86',
-      }
-    }
+	if (filePath) {
+		let result = await get_jre(filePath.path ?? filePath).catch(handleError)
+		if (!result) {
+			result = {
+				path: filePath.path ?? filePath,
+				version: props.version.toString(),
+				architecture: 'x86',
+			}
+		}

-    trackEvent('JavaManualSelect', {
-      version: props.version,
-    })
+		trackEvent('JavaManualSelect', {
+			version: props.version,
+		})

-    emit('update:modelValue', result)
-  }
+		emit('update:modelValue', result)
+	}
 }

 const detectJavaModal = ref(null)
 async function autoDetect() {
-  if (!props.compact) {
-    detectJavaModal.value.show(props.version, props.modelValue)
-  } else {
-    const versions = await find_filtered_jres(props.version).catch(handleError)
-    if (versions.length > 0) {
-      emit('update:modelValue', versions[0])
-    }
-  }
+	if (!props.compact) {
+		detectJavaModal.value.show(props.version, props.modelValue)
+	} else {
+		const versions = await find_filtered_jres(props.version).catch(handleError)
+		if (versions.length > 0) {
+			emit('update:modelValue', versions[0])
+		}
+	}
 }

 async function reinstallJava() {
-  installingJava.value = true
-  const path = await auto_install_java(props.version).catch(handleError)
-  let result = await get_jre(path)
+	installingJava.value = true
+	const path = await auto_install_java(props.version).catch(handleError)
+	let result = await get_jre(path)

-  if (!result) {
-    result = {
-      path: path,
-      version: props.version.toString(),
-      architecture: 'x86',
-    }
-  }
+	if (!result) {
+		result = {
+			path: path,
+			version: props.version.toString(),
+			architecture: 'x86',
+		}
+	}

-  trackEvent('JavaReInstall', {
-    path: path,
-    version: props.version,
-  })
+	trackEvent('JavaReInstall', {
+		path: path,
+		version: props.version,
+	})

-  emit('update:modelValue', result)
-  installingJava.value = false
+	emit('update:modelValue', result)
+	installingJava.value = false
 }
 </script>

 <style lang="scss" scoped>
 .installation-input {
-  width: 100% !important;
-  flex-grow: 1;
+	width: 100% !important;
+	flex-grow: 1;
 }

 .toggle-setting {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;

-  &.compact {
-    flex-wrap: wrap;
-  }
+	&.compact {
+		flex-wrap: wrap;
+	}
 }

 .installation-buttons {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;

-  .btn {
-    width: max-content;
-  }
+	.btn {
+		width: max-content;
+	}
 }

 .test-success {
-  color: var(--color-green);
+	color: var(--color-green);
 }

 .test-fail {
-  color: var(--color-red);
+	color: var(--color-red);
 }
 </style>
@@ -0,0 +1,119 @@
+<script setup>
+import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+dayjs.extend(relativeTime)
+
+const router = useRouter()
+
+const { formatCompactNumber } = useCompactNumber()
+
+const props = defineProps({
+	project: {
+		type: Object,
+		default() {
+			return {}
+		},
+	},
+})
+
+const featuredCategory = computed(() => {
+	if (props.project.display_categories.includes('optimization')) {
+		return 'optimization'
+	}
+
+	return props.project.display_categories[0] ?? props.project.categories[0]
+})
+
+const toColor = computed(() => {
+	let color = props.project.color
+
+	color >>>= 0
+	const b = color & 0xff
+	const g = (color >>> 8) & 0xff
+	const r = (color >>> 16) & 0xff
+	return 'rgba(' + [r, g, b, 1].join(',') + ')'
+})
+
+const toTransparent = computed(() => {
+	let color = props.project.color
+
+	color >>>= 0
+	const b = color & 0xff
+	const g = (color >>> 8) & 0xff
+	const r = (color >>> 16) & 0xff
+	return (
+		'linear-gradient(rgba(' +
+		[r, g, b, 0.03].join(',') +
+		'), 65%, rgba(' +
+		[r, g, b, 0.3].join(',') +
+		'))'
+	)
+})
+</script>
+
+<template>
+	<div
+		class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
+		@click="router.push(`/project/${project.slug}`)"
+	>
+		<div
+			class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
+			:style="{
+				'background-color': (project.featured_gallery ?? project.gallery[0]) ? null : toColor,
+				'background-image': `url(${
+					project.featured_gallery ??
+					project.gallery[0] ??
+					'https://launcher-files.modrinth.com/assets/maze-bg.png'
+				})`,
+			}"
+		>
+			<div
+				class="badges-wrapper"
+				:class="{
+					'no-image': !project.featured_gallery && !project.gallery[0],
+				}"
+				:style="{
+					background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+				}"
+			></div>
+		</div>
+		<div class="flex flex-col justify-center gap-2 px-4 py-3">
+			<div class="flex gap-2 items-center">
+				<Avatar size="48px" :src="project.icon_url" />
+				<div class="h-full flex items-center font-bold text-contrast leading-normal">
+					<span class="line-clamp-2">{{ project.title }}</span>
+				</div>
+			</div>
+			<p class="m-0 text-sm font-medium line-clamp-3 leading-tight h-[3.25rem]">
+				{{ project.description }}
+			</p>
+			<div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
+				<div
+					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+				>
+					<DownloadIcon />
+					{{ formatCompactNumber(project.downloads) }}
+				</div>
+				<div
+					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
+				>
+					<HeartIcon />
+					{{ formatCompactNumber(project.follows) }}
+				</div>
+				<div class="flex items-center gap-1 pr-2">
+					<TagIcon />
+					<TagItem>
+						<FormattedTag :tag="featuredCategory" />
+					</TagItem>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss"></style>
@@ -1,33 +1,34 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Button, Badge } from '@modrinth/ui'
+import { Badge, Button } from '@modrinth/ui'
 import { computed, ref } from 'vue'
-import { update_managed_modrinth_version } from '@/helpers/profile'
-import { releaseColor } from '@/helpers/utils'
+
 import { SwapIcon } from '@/assets/icons/index.js'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import { releaseColor } from '@/helpers/utils'

 const props = defineProps({
-  versions: {
-    type: Array,
-    required: true,
-  },
-  instance: {
-    type: Object,
-    default: null,
-  },
+	versions: {
+		type: Array,
+		required: true,
+	},
+	instance: {
+		type: Object,
+		default: null,
+	},
 })

 defineExpose({
-  show: () => {
-    modpackVersionModal.value.show()
-  },
+	show: () => {
+		modpackVersionModal.value.show()
+	},
 })

 const emit = defineEmits(['finish-install'])

 const filteredVersions = computed(() => {
-  return props.versions
+	return props.versions
 })

 const modpackVersionModal = ref(null)
@@ -36,160 +37,160 @@ const installing = computed(() => props.instance.install_stage !== 'installed')
 const inProgress = ref(false)

 const switchVersion = async (versionId) => {
-  modpackVersionModal.value.hide()
-  inProgress.value = true
-  await update_managed_modrinth_version(props.instance.path, versionId)
-  inProgress.value = false
-  emit('finish-install')
+	modpackVersionModal.value.hide()
+	inProgress.value = true
+	await update_managed_modrinth_version(props.instance.path, versionId)
+	inProgress.value = false
+	emit('finish-install')
 }

 const onHide = () => {
-  if (!inProgress.value) {
-    emit('finish-install')
-  }
+	if (!inProgress.value) {
+		emit('finish-install')
+	}
 }
 </script>

 <template>
-  <ModalWrapper
-    ref="modpackVersionModal"
-    class="modpack-version-modal"
-    header="Change modpack version"
-    :on-hide="onHide"
-  >
-    <div class="modal-body">
-      <div v-if="instance.linked_data" class="mod-card">
-        <div class="table">
-          <div class="table-row with-columns table-head">
-            <div class="table-cell table-text download-cell" />
-            <div class="name-cell table-cell table-text">Name</div>
-            <div class="table-cell table-text">Supports</div>
-          </div>
-          <div class="scrollable">
-            <div
-              v-for="version in filteredVersions"
-              :key="version.id"
-              class="table-row with-columns selectable"
-              @click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
-            >
-              <div class="table-cell table-text">
-                <Button
-                  :color="version.id === installedVersion ? '' : 'primary'"
-                  icon-only
-                  :disabled="inProgress || installing || version.id === installedVersion"
-                  @click.stop="() => switchVersion(version.id)"
-                >
-                  <SwapIcon v-if="version.id !== installedVersion" />
-                  <CheckIcon v-else />
-                </Button>
-              </div>
-              <div class="name-cell table-cell table-text">
-                <div class="version-link">
-                  {{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
-                  <div class="version-badge">
-                    <div class="channel-indicator">
-                      <Badge
-                        :color="releaseColor(version.version_type)"
-                        :type="
-                          version.version_type.charAt(0).toUpperCase() +
-                          version.version_type.slice(1)
-                        "
-                      />
-                    </div>
-                    <div>
-                      {{ version.version_number }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="table-cell table-text stacked-text">
-                <span>
-                  {{
-                    version.loaders
-                      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
-                      .join(', ')
-                  }}
-                </span>
-                <span>
-                  {{ version.game_versions.join(', ') }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper
+		ref="modpackVersionModal"
+		class="modpack-version-modal"
+		header="Change modpack version"
+		:on-hide="onHide"
+	>
+		<div class="modal-body">
+			<div v-if="instance.linked_data" class="mod-card">
+				<div class="table">
+					<div class="table-row with-columns table-head">
+						<div class="table-cell table-text download-cell" />
+						<div class="name-cell table-cell table-text">Name</div>
+						<div class="table-cell table-text">Supports</div>
+					</div>
+					<div class="scrollable">
+						<div
+							v-for="version in filteredVersions"
+							:key="version.id"
+							class="table-row with-columns selectable"
+							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
+						>
+							<div class="table-cell table-text">
+								<Button
+									:color="version.id === installedVersion ? '' : 'primary'"
+									icon-only
+									:disabled="inProgress || installing || version.id === installedVersion"
+									@click.stop="() => switchVersion(version.id)"
+								>
+									<SwapIcon v-if="version.id !== installedVersion" />
+									<CheckIcon v-else />
+								</Button>
+							</div>
+							<div class="name-cell table-cell table-text">
+								<div class="version-link">
+									{{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
+									<div class="version-badge">
+										<div class="channel-indicator">
+											<Badge
+												:color="releaseColor(version.version_type)"
+												:type="
+													version.version_type.charAt(0).toUpperCase() +
+													version.version_type.slice(1)
+												"
+											/>
+										</div>
+										<div>
+											{{ version.version_number }}
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="table-cell table-text stacked-text">
+								<span>
+									{{
+										version.loaders
+											.map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+											.join(', ')
+									}}
+								</span>
+								<span>
+									{{ version.game_versions.join(', ') }}
+								</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <style scoped lang="scss">
 .filter-header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 0.5rem;
 }

 .with-columns {
-  grid-template-columns: min-content 1fr 1fr;
+	grid-template-columns: min-content 1fr 1fr;
 }

 .scrollable {
-  overflow-y: auto;
-  max-height: 25rem;
+	overflow-y: auto;
+	max-height: 25rem;
 }

 .card-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--color-raised-bg);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: var(--color-raised-bg);
 }

 .mod-card {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  overflow: hidden;
-  margin-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow: hidden;
+	margin-top: 0.5rem;
 }

 .version-link {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;

-  .version-badge {
-    display: flex;
-    flex-wrap: wrap;
+	.version-badge {
+		display: flex;
+		flex-wrap: wrap;

-    .channel-indicator {
-      margin-right: 0.5rem;
-    }
-  }
+		.channel-indicator {
+			margin-right: 0.5rem;
+		}
+	}
 }

 .stacked-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	align-items: flex-start;
 }

 .download-cell {
-  width: 4rem;
-  padding: 1rem;
+	width: 4rem;
+	padding: 1rem;
 }

 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-md);
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
 }

 .table {
-  border: 1px solid var(--color-bg);
+	border: 1px solid var(--color-bg);
 }
 </style>
@@ -1,24 +1,26 @@
 <template>
-  <RouterLink
-    v-if="typeof to === 'string'"
-    :to="to"
-    v-bind="$attrs"
-    :class="{
-      'router-link-active': isPrimary && isPrimary(route),
-      'subpage-active': isSubpage && isSubpage(route),
-    }"
-    class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-  >
-    <slot />
-  </RouterLink>
-  <button
-    v-else
-    v-bind="$attrs"
-    class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
-    @click="to"
-  >
-    <slot />
-  </button>
+	<RouterLink
+		v-if="typeof to === 'string'"
+		:to="to"
+		v-bind="$attrs"
+		:class="{
+			'router-link-active': isPrimary && isPrimary(route),
+			'subpage-active': isSubpage && isSubpage(route),
+			disabled: disabled,
+		}"
+		class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+	>
+		<slot />
+	</RouterLink>
+	<button
+		v-else
+		v-bind="$attrs"
+		class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
+		:disabled="disabled"
+		@click="to"
+	>
+		<slot />
+	</button>
 </template>

 <script setup lang="ts">
@@ -29,31 +31,37 @@ const route = useRoute()

 type RouteFunction = (route: RouteLocationNormalizedLoaded) => boolean

-defineProps<{
-  to: (() => void) | string
-  isPrimary?: RouteFunction
-  isSubpage?: RouteFunction
-  highlightOverride?: boolean
-}>()
+withDefaults(
+	defineProps<{
+		to: (() => void) | string
+		isPrimary?: RouteFunction
+		isSubpage?: RouteFunction
+		highlightOverride?: boolean
+		disabled?: boolean
+	}>(),
+	{
+		disabled: false,
+	},
+)

 defineOptions({
-  inheritAttrs: false,
+	inheritAttrs: false,
 })
 </script>

 <style lang="scss" scoped>
 .router-link-active,
 .subpage-active {
-  svg {
-    filter: drop-shadow(0 0 0.5rem black);
-  }
+	svg {
+		filter: drop-shadow(0 0 0.5rem black);
+	}
 }

 .router-link-active {
-  @apply text-[--color-button-text-selected] bg-[--color-button-bg-selected];
+	@apply text-[--color-button-text-selected] bg-[--color-button-bg-selected];
 }

 .subpage-active {
-  @apply text-contrast bg-button-bg;
+	@apply text-contrast bg-button-bg;
 }
 </style>
@@ -1,160 +1,184 @@
 <template>
-  <nav
-    class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
-  >
-    <RouterLink
-      v-for="(link, index) in filteredLinks"
-      v-show="link.shown === undefined ? true : link.shown"
-      :key="index"
-      ref="tabLinkElements"
-      :to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-      :class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
-    >
-      <component :is="link.icon" v-if="link.icon" class="size-5" />
-      <span class="text-nowrap">{{ link.label }}</span>
-    </RouterLink>
-    <div
-      :class="`navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 ${subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected'}`"
-      :style="{
-        left: sliderLeftPx,
-        top: sliderTopPx,
-        right: sliderRightPx,
-        bottom: sliderBottomPx,
-        opacity: sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeIndex === -1 ? 0 : 1,
-      }"
-      aria-hidden="true"
-    ></div>
-  </nav>
+	<nav
+		v-if="filteredLinks.length > 1"
+		ref="scrollContainer"
+		class="card-shadow experimental-styles-within relative flex w-fit overflow-clip rounded-full bg-bg-raised p-1 text-sm font-bold"
+	>
+		<RouterLink
+			v-for="(link, index) in filteredLinks"
+			v-show="link.shown === undefined ? true : link.shown"
+			:key="index"
+			ref="tabLinkElements"
+			:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+			:class="`button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full ${activeIndex === index && !subpageSelected ? 'text-button-textSelected' : activeIndex === index && subpageSelected ? 'text-contrast' : 'text-primary'}`"
+		>
+			<component :is="link.icon" v-if="link.icon" class="size-5" />
+			<span class="text-nowrap">{{ link.label }}</span>
+		</RouterLink>
+		<div
+			:class="[
+				'pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1',
+				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
+				{ 'navtabs-transition': transitionsEnabled },
+			]"
+			:style="{
+				left: sliderLeftPx,
+				top: sliderTopPx,
+				right: sliderRightPx,
+				bottom: sliderBottomPx,
+				opacity: sliderReady && activeIndex !== -1 ? 1 : 0,
+			}"
+			aria-hidden="true"
+		></div>
+	</nav>
 </template>

 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useRoute, RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'

 const route = useRoute()

 interface Tab {
-  label: string
-  href: string | RouteLocationRaw
-  shown?: boolean
-  icon?: unknown
-  subpages?: string[]
+	label: string
+	href: string | RouteLocationRaw
+	shown?: boolean
+	icon?: unknown
+	subpages?: string[]
 }

 const props = defineProps<{
-  links: Tab[]
-  query?: string
+	links: Tab[]
+	query?: string
 }>()

+const scrollContainer = ref<HTMLElement | null>(null)
 const sliderLeft = ref(4)
 const sliderTop = ref(4)
 const sliderRight = ref(4)
 const sliderBottom = ref(4)
 const activeIndex = ref(-1)
-const 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)),
+	props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
 )
 const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
 const sliderTopPx = computed(() => `${sliderTop.value}px`)
 const sliderRightPx = computed(() => `${sliderRight.value}px`)
 const sliderBottomPx = computed(() => `${sliderBottom.value}px`)

+const leftDelay = computed(() => sliderDelays.value.left)
+const rightDelay = computed(() => sliderDelays.value.right)
+const topDelay = computed(() => sliderDelays.value.top)
+const bottomDelay = computed(() => sliderDelays.value.bottom)
+
 function pickLink() {
-  let index = -1
-  subpageSelected.value = false
-  for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
-    const link = filteredLinks.value[i]
+	let index = -1
+	subpageSelected.value = false
+	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
+		const link = filteredLinks.value[i]

-    if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
-      index = i
-      break
-    } else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
-      index = i
-      subpageSelected.value = true
-      break
-    }
-  }
-  activeIndex.value = index
+		if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
+			index = i
+			break
+		} else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
+			index = i
+			subpageSelected.value = true
+			break
+		}
+	}
+	activeIndex.value = index

-  if (activeIndex.value !== -1) {
-    startAnimation()
-  } else {
-    oldIndex.value = -1
-    sliderLeft.value = 0
-    sliderRight.value = 0
-  }
+	if (activeIndex.value !== -1) {
+		startAnimation()
+	} else {
+		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
+	const el = getTabElement(activeIndex.value)
+	if (!el?.offsetParent) return

-  if (!el || !el.offsetParent) return
+	const parent = el.offsetParent as HTMLElement
+	const newValues = {
+		left: el.offsetLeft,
+		top: el.offsetTop,
+		right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
+		bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
+	}

-  const newValues = {
-    left: el.offsetLeft,
-    top: el.offsetTop,
-    right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
-    bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
-  }
+	const isInitialPosition = sliderLeft.value === 4 && sliderRight.value === 4

-  if (sliderLeft.value === 4 && sliderRight.value === 4) {
-    sliderLeft.value = newValues.left
-    sliderRight.value = newValues.right
-    sliderTop.value = newValues.top
-    sliderBottom.value = newValues.bottom
-  } else {
-    const delay = 200
-
-    if (newValues.left < sliderLeft.value) {
-      sliderLeft.value = newValues.left
-      setTimeout(() => {
-        sliderRight.value = newValues.right
-      }, delay)
-    } else {
-      sliderRight.value = newValues.right
-      setTimeout(() => {
-        sliderLeft.value = newValues.left
-      }, delay)
-    }
-
-    if (newValues.top < sliderTop.value) {
-      sliderTop.value = newValues.top
-      setTimeout(() => {
-        sliderBottom.value = newValues.bottom
-      }, delay)
-    } else {
-      sliderBottom.value = newValues.bottom
-      setTimeout(() => {
-        sliderTop.value = newValues.top
-      }, delay)
-    }
-  }
+	if (isInitialPosition) {
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+		sliderReady.value = true
+		requestAnimationFrame(() => {
+			transitionsEnabled.value = true
+		})
+	} else {
+		const STAGGER_DELAY = '200ms'
+		sliderDelays.value = {
+			left: newValues.left < sliderLeft.value ? '0ms' : STAGGER_DELAY,
+			right: newValues.left < sliderLeft.value ? STAGGER_DELAY : '0ms',
+			top: newValues.top < sliderTop.value ? '0ms' : STAGGER_DELAY,
+			bottom: newValues.top < sliderTop.value ? STAGGER_DELAY : '0ms',
+		}
+		sliderLeft.value = newValues.left
+		sliderRight.value = newValues.right
+		sliderTop.value = newValues.top
+		sliderBottom.value = newValues.bottom
+	}
 }

 onMounted(() => {
-  window.addEventListener('resize', pickLink)
-  pickLink()
+	window.addEventListener('resize', pickLink)
+	pickLink()
 })

 onUnmounted(() => {
-  window.removeEventListener('resize', pickLink)
+	window.removeEventListener('resize', pickLink)
 })

-watch(route, () => {
-  pickLink()
+watch(
+	filteredLinks,
+	async () => {
+		await nextTick()
+		pickLink()
+	},
+	{ deep: true },
+)
+
+watch(route, async () => {
+	await nextTick()
+	pickLink()
 })
 </script>
 <style scoped>
 .navtabs-transition {
-  /* Delay on opacity is to hide any jankiness as the page loads */
-  transition:
-    all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
-    opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+	/* Delay on opacity is to hide any jankiness as the page loads */
+	transition:
+		left 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(leftDelay),
+		right 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(rightDelay),
+		top 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(topDelay),
+		bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) v-bind(bottomDelay),
+		opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
 }
 </style>
@@ -1,33 +1,42 @@
 <template>
-  <div class="progress-bar">
-    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
-  </div>
+	<div class="progress-bar">
+		<div
+			class="progress-bar__fill"
+			:style="{
+				width: `${progress}%`,
+				'background-color': error ? 'var(--color-red)' : 'var(--color-brand)',
+			}"
+		></div>
+	</div>
 </template>

 <script setup>
 defineProps({
-  progress: {
-    type: Number,
-    required: true,
-    validator(value) {
-      return value >= 0 && value <= 100
-    },
-  },
+	progress: {
+		type: Number,
+		required: true,
+		validator(value) {
+			return value >= 0 && value <= 100
+		},
+	},
+	error: {
+		type: Boolean,
+		default: false,
+	},
 })
 </script>

 <style scoped>
 .progress-bar {
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--color-button-bg);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+	width: 100%;
+	height: 0.5rem;
+	background-color: var(--color-button-bg);
+	border-radius: var(--radius-lg);
+	overflow: hidden;
 }

 .progress-bar__fill {
-  height: 100%;
-  background-color: var(--color-brand);
-  transition: width 0.3s;
+	height: 100%;
+	transition: width 0.3s;
 }
 </style>
@@ -1,121 +0,0 @@
-<script setup>
-import { Avatar, TagItem } from '@modrinth/ui'
-import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { formatNumber, formatCategory } from '@modrinth/utils'
-import { computed } from 'vue'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { useRouter } from 'vue-router'
-
-dayjs.extend(relativeTime)
-
-const router = useRouter()
-
-const props = defineProps({
-  project: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-})
-
-const featuredCategory = computed(() => {
-  if (props.project.categories.includes('optimization')) {
-    return 'optimization'
-  }
-
-  if (props.project.categories.length > 0) {
-    return props.project.categories[0]
-  }
-  return undefined
-})
-
-const toColor = computed(() => {
-  let color = props.project.color
-
-  color >>>= 0
-  const b = color & 0xff
-  const g = (color >>> 8) & 0xff
-  const r = (color >>> 16) & 0xff
-  return 'rgba(' + [r, g, b, 1].join(',') + ')'
-})
-
-const toTransparent = computed(() => {
-  let color = props.project.color
-
-  color >>>= 0
-  const b = color & 0xff
-  const g = (color >>> 8) & 0xff
-  const r = (color >>> 16) & 0xff
-  return (
-    'linear-gradient(rgba(' +
-    [r, g, b, 0.03].join(',') +
-    '), 65%, rgba(' +
-    [r, g, b, 0.3].join(',') +
-    '))'
-  )
-})
-</script>
-
-<template>
-  <div
-    class="card-shadow bg-bg-raised rounded-xl overflow-clip cursor-pointer hover:brightness-90 transition-all"
-    @click="router.push(`/project/${project.slug}`)"
-  >
-    <div
-      class="w-full aspect-[2/1] bg-cover bg-center bg-no-repeat"
-      :style="{
-        'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
-        'background-image': `url(${
-          project.featured_gallery ??
-          project.gallery[0] ??
-          'https://launcher-files.modrinth.com/assets/maze-bg.png'
-        })`,
-      }"
-    >
-      <div
-        class="badges-wrapper"
-        :class="{
-          'no-image': !project.featured_gallery && !project.gallery[0],
-        }"
-        :style="{
-          background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
-        }"
-      ></div>
-    </div>
-    <div class="flex flex-col justify-center gap-2 px-4 py-3">
-      <div class="flex gap-2 items-center">
-        <Avatar size="48px" :src="project.icon_url" />
-        <div class="h-full flex items-center font-bold text-contrast leading-normal">
-          <span class="line-clamp-2">{{ project.title }}</span>
-        </div>
-      </div>
-      <p class="m-0 text-sm font-medium line-clamp-3 leading-tight h-[3.25rem]">
-        {{ project.description }}
-      </p>
-      <div class="flex items-center gap-2 text-sm text-secondary font-semibold mt-auto">
-        <div
-          class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
-        >
-          <DownloadIcon />
-          {{ formatNumber(project.downloads) }}
-        </div>
-        <div
-          class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
-        >
-          <HeartIcon />
-          {{ formatNumber(project.follows) }}
-        </div>
-        <div class="flex items-center gap-1 pr-2">
-          <TagIcon />
-          <TagItem>
-            {{ formatCategory(featuredCategory) }}
-          </TagItem>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
 import { init_ads_window } from '@/helpers/ads.js'

 const adsWrapper = ref(null)
@@ -7,58 +8,58 @@ const adsWrapper = ref(null)
 let devicePixelRatioWatcher = null

 function initDevicePixelRatioWatcher() {
-  if (devicePixelRatioWatcher) {
-    devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
-  }
+	if (devicePixelRatioWatcher) {
+		devicePixelRatioWatcher.removeEventListener('change', updateAdPosition)
+	}

-  devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
-  devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
+	devicePixelRatioWatcher = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+	devicePixelRatioWatcher.addEventListener('change', updateAdPosition)
 }

 onMounted(() => {
-  updateAdPosition()
+	updateAdPosition()

-  window.addEventListener('resize', updateAdPosition)
-  initDevicePixelRatioWatcher()
+	window.addEventListener('resize', updateAdPosition)
+	initDevicePixelRatioWatcher()
 })

 function updateAdPosition() {
-  if (adsWrapper.value) {
-    init_ads_window()
-    initDevicePixelRatioWatcher()
-  }
+	if (adsWrapper.value) {
+		init_ads_window()
+		initDevicePixelRatioWatcher()
+	}
 }
 </script>

 <template>
-  <div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
-    <a
-      href="https://modrinth.gg?from=app-placeholder"
-      target="_blank"
-      class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
-    >
-      <img
-        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="hidden light-image rounded-[inherit]"
-      />
-      <img
-        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
-        alt="Host your next server with Modrinth Servers"
-        class="dark-image rounded-[inherit]"
-      />
-    </a>
-  </div>
+	<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
+		<a
+			href="https://modrinth.host/medal?from=app-placeholder"
+			target="_blank"
+			class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
+		>
+			<img
+				src="https://cdn-raw.modrinth.com/modrinth-hosting-medal-light.webp"
+				alt="Host your next server with Modrinth Hosting"
+				class="hidden light-image rounded-[inherit]"
+			/>
+			<img
+				src="https://cdn-raw.modrinth.com/modrinth-hosting-medal-dark.webp"
+				alt="Host your next server with Modrinth Hosting"
+				class="dark-image rounded-[inherit]"
+			/>
+		</a>
+	</div>
 </template>
 <style lang="scss" scoped>
 .light,
 .light-mode {
-  .dark-image {
-    display: none;
-  }
+	.dark-image {
+		display: none;
+	}

-  .light-image {
-    display: block;
-  }
+	.light-image {
+		display: block;
+	}
 }
 </style>
@@ -1,73 +1,78 @@
 <script setup>
-import { list } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
+import { SpinnerIcon } from '@modrinth/assets'
+import { Avatar, injectNotificationManager } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { onUnmounted, ref } from 'vue'
-import { profile_listener } from '@/helpers/events.js'
+
 import NavButton from '@/components/ui/NavButton.vue'
-import { Avatar } from '@modrinth/ui'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon } from '@modrinth/assets'
+import { profile_listener } from '@/helpers/events.js'
+import { list } from '@/helpers/profile'
+
+const { handleError } = injectNotificationManager()

 const recentInstances = ref([])
 const getInstances = async () => {
-  const profiles = await list().catch(handleError)
+	const profiles = await list().catch(handleError)

-  recentInstances.value = profiles
-    .sort((a, b) => {
-      const dateACreated = dayjs(a.created)
-      const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)
+	recentInstances.value = profiles
+		.sort((a, b) => {
+			const dateACreated = dayjs(a.created)
+			const dateAPlayed = a.last_played ? dayjs(a.last_played) : dayjs(0)

-      const dateBCreated = dayjs(b.created)
-      const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)
+			const dateBCreated = dayjs(b.created)
+			const dateBPlayed = b.last_played ? dayjs(b.last_played) : dayjs(0)

-      const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
-      const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed
+			const dateA = dateACreated.isAfter(dateAPlayed) ? dateACreated : dateAPlayed
+			const dateB = dateBCreated.isAfter(dateBPlayed) ? dateBCreated : dateBPlayed

-      if (dateA.isSame(dateB)) {
-        return a.name.localeCompare(b.name)
-      }
+			if (dateA.isSame(dateB)) {
+				return a.name.localeCompare(b.name)
+			}

-      return dateB - dateA
-    })
-    .slice(0, 3)
+			return dateB - dateA
+		})
+		.slice(0, 3)
 }

 await getInstances()

 const unlistenProfile = await profile_listener(async (event) => {
-  if (event.event !== 'synced') {
-    await getInstances()
-  }
+	if (event.event !== 'synced') {
+		await getInstances()
+	}
 })

 onUnmounted(() => {
-  unlistenProfile()
+	unlistenProfile()
 })
 </script>

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

 <style scoped lang="scss"></style>
@@ -1,116 +1,121 @@
 <template>
-  <div class="action-groups">
-    <ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
-      <button ref="infoButton" @click="toggleCard()">
-        <DownloadIcon />
-      </button>
-    </ButtonStyled>
-    <div v-if="offline" class="status">
-      <UnplugIcon />
-      <div class="running-text">
-        <span> Offline </span>
-      </div>
-    </div>
-    <div v-if="selectedProcess" class="status">
-      <span class="circle running" />
-      <div ref="profileButton" class="running-text">
-        <router-link
-          class="text-primary"
-          :to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
-        >
-          {{ selectedProcess.profile.name }}
-        </router-link>
-        <div
-          v-if="currentProcesses.length > 1"
-          class="arrow button-base"
-          :class="{ rotate: showProfiles }"
-          @click="toggleProfiles()"
-        >
-          <DropdownIcon />
-        </div>
-      </div>
-      <Button
-        v-tooltip="'Stop instance'"
-        icon-only
-        class="icon-button stop"
-        @click="stop(selectedProcess)"
-      >
-        <StopCircleIcon />
-      </Button>
-      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
-        <TerminalSquareIcon />
-      </Button>
-    </div>
-    <div v-else class="status">
-      <span class="circle stopped" />
-      <span class="running-text"> No instances running </span>
-    </div>
-  </div>
-  <transition name="download">
-    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
-      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
-        <h3 class="info-title">
-          {{ loadingBar.title }}
-        </h3>
-        <ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
-        <div class="row">
-          {{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}% {{ loadingBar.message }}
-        </div>
-      </div>
-    </Card>
-  </transition>
-  <transition name="download">
-    <Card
-      v-if="showProfiles === true && currentProcesses.length > 0"
-      ref="profiles"
-      class="profile-card"
-    >
-      <Button
-        v-for="process in currentProcesses"
-        :key="process.uuid"
-        class="profile-button"
-        @click="selectProcess(process)"
-      >
-        <div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
-        <Button
-          v-tooltip="'Stop instance'"
-          icon-only
-          class="icon-button stop"
-          @click.stop="stop(process)"
-        >
-          <StopCircleIcon />
-        </Button>
-        <Button
-          v-tooltip="'View logs'"
-          icon-only
-          class="icon-button"
-          @click.stop="goToTerminal(process.profile.path)"
-        >
-          <TerminalSquareIcon />
-        </Button>
-      </Button>
-    </Card>
-  </transition>
+	<div class="action-groups">
+		<ButtonStyled v-if="currentLoadingBars.length > 0" color="brand" type="transparent" circular>
+			<button ref="infoButton" @click="toggleCard()">
+				<DownloadIcon />
+			</button>
+		</ButtonStyled>
+		<div v-if="offline" class="status">
+			<UnplugIcon />
+			<div class="running-text">
+				<span> Offline </span>
+			</div>
+		</div>
+		<div v-if="selectedProcess" class="status">
+			<span class="circle running" />
+			<div ref="profileButton" class="running-text">
+				<router-link
+					class="text-primary"
+					:to="`/instance/${encodeURIComponent(selectedProcess.profile.path)}`"
+				>
+					{{ selectedProcess.profile.name }}
+				</router-link>
+				<div
+					v-if="currentProcesses.length > 1"
+					class="arrow button-base"
+					:class="{ rotate: showProfiles }"
+					@click="toggleProfiles()"
+				>
+					<DropdownIcon />
+				</div>
+			</div>
+			<Button
+				v-tooltip="'Stop instance'"
+				icon-only
+				class="icon-button stop"
+				@click="stop(selectedProcess)"
+			>
+				<StopCircleIcon />
+			</Button>
+			<Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+				<TerminalSquareIcon />
+			</Button>
+		</div>
+		<div v-else class="status">
+			<span class="circle stopped" />
+			<span class="running-text"> No instances running </span>
+		</div>
+	</div>
+	<transition name="download">
+		<Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+			<div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+				<h3 class="info-title">
+					{{ loadingBar.title }}
+				</h3>
+				<div class="flex flex-col gap-2 w-full">
+					<ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+					<div class="row">
+						{{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}%
+						{{ loadingBar.message }}
+					</div>
+				</div>
+			</div>
+		</Card>
+	</transition>
+	<transition name="download">
+		<Card
+			v-if="showProfiles === true && currentProcesses.length > 0"
+			ref="profiles"
+			class="profile-card"
+		>
+			<Button
+				v-for="process in currentProcesses"
+				:key="process.uuid"
+				class="profile-button"
+				@click="selectProcess(process)"
+			>
+				<div class="text"><span class="circle running" /> {{ process.profile.name }}</div>
+				<Button
+					v-tooltip="'Stop instance'"
+					icon-only
+					class="icon-button stop"
+					@click.stop="stop(process)"
+				>
+					<StopCircleIcon />
+				</Button>
+				<Button
+					v-tooltip="'View logs'"
+					icon-only
+					class="icon-button"
+					@click.stop="goToTerminal(process.profile.path)"
+				>
+					<TerminalSquareIcon />
+				</Button>
+			</Button>
+		</Card>
+	</transition>
 </template>

 <script setup>
 import {
-  DownloadIcon,
-  StopCircleIcon,
-  TerminalSquareIcon,
-  DropdownIcon,
-  UnplugIcon,
+	DownloadIcon,
+	DropdownIcon,
+	StopCircleIcon,
+	TerminalSquareIcon,
+	UnplugIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, Card } from '@modrinth/ui'
+import { Button, ButtonStyled, Card, injectNotificationManager } from '@modrinth/ui'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
-import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
-import { progress_bars_list } from '@/helpers/state.js'
+
 import ProgressBar from '@/components/ui/ProgressBar.vue'
-import { handleError } from '@/store/notifications.js'
-import { get_many } from '@/helpers/profile.js'
 import { trackEvent } from '@/helpers/analytics'
+import { loading_listener, process_listener } from '@/helpers/events'
+import { get_all as getRunningProcesses, kill as killProcess } from '@/helpers/process'
+import { get_many } from '@/helpers/profile.js'
+import { progress_bars_list } from '@/helpers/state.js'
+
+const { handleError } = injectNotificationManager()

 const router = useRouter()
 const card = ref(null)
@@ -125,347 +130,347 @@ const currentProcesses = ref([])
 const selectedProcess = ref()

 const refresh = async () => {
-  const processes = await getRunningProcesses().catch(handleError)
-  const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)
+	const processes = await getRunningProcesses().catch(handleError)
+	const profiles = await get_many(processes.map((x) => x.profile_path)).catch(handleError)

-  currentProcesses.value = processes.map((x) => ({
-    profile: profiles.find((prof) => x.profile_path === prof.path),
-    ...x,
-  }))
-  if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
-    selectedProcess.value = currentProcesses.value[0]
-  }
+	currentProcesses.value = processes.map((x) => ({
+		profile: profiles.find((prof) => x.profile_path === prof.path),
+		...x,
+	}))
+	if (!selectedProcess.value || !currentProcesses.value.includes(selectedProcess.value)) {
+		selectedProcess.value = currentProcesses.value[0]
+	}
 }

 await refresh()

 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
-  offline.value = true
+	offline.value = true
 })
 window.addEventListener('online', () => {
-  offline.value = false
+	offline.value = false
 })

 const unlistenProcess = await process_listener(async () => {
-  await refresh()
+	await refresh()
 })

 const stop = async (process) => {
-  try {
-    await killProcess(process.uuid).catch(handleError)
+	try {
+		await killProcess(process.uuid).catch(handleError)

-    trackEvent('InstanceStop', {
-      loader: process.profile.loader,
-      game_version: process.profile.game_version,
-      source: 'AppBar',
-    })
-  } catch (e) {
-    console.error(e)
-  }
-  await refresh()
+		trackEvent('InstanceStop', {
+			loader: process.profile.loader,
+			game_version: process.profile.game_version,
+			source: 'AppBar',
+		})
+	} catch (e) {
+		console.error(e)
+	}
+	await refresh()
 }

 const goToTerminal = (path) => {
-  router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
+	router.push(`/instance/${encodeURIComponent(path ?? selectedProcess.value.profile.path)}/logs`)
 }

 const currentLoadingBars = ref([])

 const refreshInfo = async () => {
-  const currentLoadingBarCount = currentLoadingBars.value.length
-  currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError)).map(
-    (x) => {
-      if (x.bar_type.type === 'java_download') {
-        x.title = 'Downloading Java ' + x.bar_type.version
-      }
-      if (x.bar_type.profile_path) {
-        x.title = x.bar_type.profile_path
-      }
-      if (x.bar_type.pack_name) {
-        x.title = x.bar_type.pack_name
-      }
+	const currentLoadingBarCount = currentLoadingBars.value.length
+	currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError))
+		.map((x) => {
+			if (x.bar_type.type === 'java_download') {
+				x.title = 'Downloading Java ' + x.bar_type.version
+			}
+			if (x.bar_type.profile_path) {
+				x.title = x.bar_type.profile_path
+			}
+			if (x.bar_type.pack_name) {
+				x.title = x.bar_type.pack_name
+			}

-      return x
-    },
-  )
+			return x
+		})
+		.filter((bar) => bar?.bar_type?.type !== 'launcher_update')

-  currentLoadingBars.value.sort((a, b) => {
-    if (a.loading_bar_uuid < b.loading_bar_uuid) {
-      return -1
-    }
-    if (a.loading_bar_uuid > b.loading_bar_uuid) {
-      return 1
-    }
-    return 0
-  })
+	currentLoadingBars.value.sort((a, b) => {
+		if (a.loading_bar_uuid < b.loading_bar_uuid) {
+			return -1
+		}
+		if (a.loading_bar_uuid > b.loading_bar_uuid) {
+			return 1
+		}
+		return 0
+	})

-  if (currentLoadingBars.value.length === 0) {
-    showCard.value = false
-  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
-    showCard.value = true
-  }
+	if (currentLoadingBars.value.length === 0) {
+		showCard.value = false
+	} else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+		showCard.value = true
+	}
 }

 await refreshInfo()
 const unlistenLoading = await loading_listener(async () => {
-  await refreshInfo()
+	await refreshInfo()
 })

 const selectProcess = (process) => {
-  selectedProcess.value = process
-  showProfiles.value = false
+	selectedProcess.value = process
+	showProfiles.value = false
 }

 const handleClickOutsideCard = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    card.value &&
-    card.value.$el !== event.target &&
-    !elements.includes(card.value.$el) &&
-    infoButton.value &&
-    !infoButton.value.contains(event.target)
-  ) {
-    showCard.value = false
-  }
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		card.value &&
+		card.value.$el !== event.target &&
+		!elements.includes(card.value.$el) &&
+		infoButton.value &&
+		!infoButton.value.contains(event.target)
+	) {
+		showCard.value = false
+	}
 }

 const handleClickOutsideProfile = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    profiles.value &&
-    profiles.value.$el !== event.target &&
-    !elements.includes(profiles.value.$el) &&
-    !profileButton.value.contains(event.target)
-  ) {
-    showProfiles.value = false
-  }
+	const elements = document.elementsFromPoint(event.clientX, event.clientY)
+	if (
+		profiles.value &&
+		profiles.value.$el !== event.target &&
+		!elements.includes(profiles.value.$el) &&
+		!profileButton.value.contains(event.target)
+	) {
+		showProfiles.value = false
+	}
 }

 const toggleCard = async () => {
-  showCard.value = !showCard.value
-  showProfiles.value = false
-  await refreshInfo()
+	showCard.value = !showCard.value
+	showProfiles.value = false
+	await refreshInfo()
 }

 const toggleProfiles = async () => {
-  if (currentProcesses.value.length === 1) return
-  showProfiles.value = !showProfiles.value
-  showCard.value = false
+	if (currentProcesses.value.length === 1) return
+	showProfiles.value = !showProfiles.value
+	showCard.value = false
 }

 onMounted(() => {
-  window.addEventListener('click', handleClickOutsideCard)
-  window.addEventListener('click', handleClickOutsideProfile)
+	window.addEventListener('click', handleClickOutsideCard)
+	window.addEventListener('click', handleClickOutsideProfile)
 })

 onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutsideCard)
-  window.removeEventListener('click', handleClickOutsideProfile)
-  unlistenProcess()
-  unlistenLoading()
+	window.removeEventListener('click', handleClickOutsideCard)
+	window.removeEventListener('click', handleClickOutsideProfile)
+	unlistenProcess()
+	unlistenLoading()
 })
 </script>

 <style scoped lang="scss">
 .action-groups {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap-md);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-md);
 }

 .arrow {
-  transition: transform 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
-  &.rotate {
-    transform: rotate(180deg);
-  }
+	transition: transform 0.2s ease-in-out;
+	display: flex;
+	align-items: center;
+	&.rotate {
+		transform: rotate(180deg);
+	}
 }

 .status {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-button-bg);
-  padding: var(--gap-sm) var(--gap-lg);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	border-radius: var(--radius-md);
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-sm) var(--gap-lg);
 }

 .running-text {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap-xs);
-  white-space: nowrap;
-  overflow: hidden;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none;
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-xs);
+	white-space: nowrap;
+	overflow: hidden;
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none;

-  &.clickable:hover {
-    cursor: pointer;
-  }
+	&.clickable:hover {
+		cursor: pointer;
+	}
 }

 .circle {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  display: inline-block;
-  margin-right: 0.25rem;
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 0.25rem;

-  &.running {
-    background-color: var(--color-brand);
-  }
+	&.running {
+		background-color: var(--color-brand);
+	}

-  &.stopped {
-    background-color: var(--color-base);
-  }
+	&.stopped {
+		background-color: var(--color-base);
+	}
 }

 .icon-button {
-  background-color: rgba(0, 0, 0, 0);
-  box-shadow: none;
-  width: 1.25rem !important;
-  height: 1.25rem !important;
+	background-color: rgba(0, 0, 0, 0);
+	box-shadow: none;
+	width: 1.25rem !important;
+	height: 1.25rem !important;

-  svg {
-    min-width: 1.25rem;
-  }
+	svg {
+		min-width: 1.25rem;
+	}

-  &.stop {
-    color: var(--color-red);
-  }
+	&.stop {
+		color: var(--color-red);
+	}
 }

 .info-card {
-  position: absolute;
-  top: 3.5rem;
-  right: 0.5rem;
-  z-index: 9;
-  width: 20rem;
-  background-color: var(--color-raised-bg);
-  box-shadow: var(--shadow-raised);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  overflow: auto;
-  transition: all 0.2s ease-in-out;
-  border: 1px solid var(--color-button-bg);
+	position: absolute;
+	top: 3.5rem;
+	right: 2rem;
+	z-index: 9;
+	width: 20rem;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);

-  &.hidden {
-    transform: translateY(-100%);
-  }
+	&.hidden {
+		transform: translateY(-100%);
+	}
 }

 .loading-option {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;

-  :hover {
-    background-color: var(--color-raised-bg-hover);
-  }
+	:hover {
+		background-color: var(--color-raised-bg-hover);
+	}
 }

 .loading-text {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;

-  .row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.5rem;
-  }
+	.row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+	}
 }

 .loading-icon {
-  width: 2.25rem;
-  height: 2.25rem;
-  display: block;
+	width: 2.25rem;
+	height: 2.25rem;
+	display: block;

-  :deep(svg) {
-    left: 1rem;
-    width: 2.25rem;
-    height: 2.25rem;
-  }
+	:deep(svg) {
+		left: 1rem;
+		width: 2.25rem;
+		height: 2.25rem;
+	}
 }

 .download-enter-active,
 .download-leave-active {
-  transition: opacity 0.3s ease;
+	transition: opacity 0.3s ease;
 }

 .download-enter-from,
 .download-leave-to {
-  opacity: 0;
+	opacity: 0;
 }

 .progress-bar {
-  width: 100%;
+	width: 100%;
 }

 .info-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.75rem;
+	margin: 0;
+	padding: 0;
 }

 .info-title {
-  margin: 0;
+	margin: 0;
 }

 .profile-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap-sm);
-  width: 100%;
-  background-color: var(--color-raised-bg);
-  box-shadow: none;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	width: 100%;
+	background-color: var(--color-raised-bg);
+	box-shadow: none;

-  .text {
-    margin-right: auto;
-  }
+	.text {
+		margin-right: auto;
+	}
 }

 .profile-card {
-  position: absolute;
-  top: 3.5rem;
-  right: 0.5rem;
-  z-index: 9;
-  background-color: var(--color-raised-bg);
-  box-shadow: var(--shadow-raised);
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  transition: all 0.2s ease-in-out;
-  border: 1px solid var(--color-button-bg);
-  padding: var(--gap-md);
+	position: absolute;
+	top: 3.5rem;
+	right: 0.5rem;
+	z-index: 9;
+	background-color: var(--color-raised-bg);
+	box-shadow: var(--shadow-raised);
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	transition: all 0.2s ease-in-out;
+	border: 1px solid var(--color-divider);
+	padding: var(--gap-md);

-  &.hidden {
-    transform: translateY(-100%);
-  }
+	&.hidden {
+		transform: translateY(-100%);
+	}
 }

 .link {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap-sm);
-  margin: 0;
-  color: var(--color-text);
-  text-decoration: none;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--gap-sm);
+	margin: 0;
+	color: var(--color-text);
+	text-decoration: none;
 }
 </style>
@@ -1,159 +1,104 @@
 <template>
-  <div
-    class="card-shadow p-4 bg-bg-raised rounded-xl flex gap-3 group cursor-pointer hover:brightness-90 transition-all"
-    @click="
-      () => {
-        emit('open')
-        $router.push({
-          path: `/project/${project.project_id ?? project.id}`,
-          query: { i: props.instance ? props.instance.path : undefined },
-        })
-      }
-    "
-  >
-    <div class="icon w-[96px] h-[96px] relative">
-      <Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
-    </div>
-    <div class="flex flex-col gap-2 overflow-hidden">
-      <div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-        <span class="text-lg font-extrabold text-contrast m-0 leading-none">
-          {{ project.title }}
-        </span>
-        <span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
-      </div>
-      <div class="m-0 line-clamp-2">
-        {{ project.description }}
-      </div>
-      <div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
-        <TagsIcon class="h-4 w-4 shrink-0" />
-        <div
-          v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
-          class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-        >
-          <template v-if="project.client_side === 'optional' && project.server_side === 'optional'">
-            Client or server
-          </template>
-          <template
-            v-else-if="
-              (project.client_side === 'optional' || project.client_side === 'required') &&
-              (project.server_side === 'optional' || project.server_side === 'unsupported')
-            "
-          >
-            Client
-          </template>
-          <template
-            v-else-if="
-              (project.server_side === 'optional' || project.server_side === 'required') &&
-              (project.client_side === 'optional' || project.client_side === 'unsupported')
-            "
-          >
-            Server
-          </template>
-          <template
-            v-else-if="
-              project.client_side === 'unsupported' && project.server_side === 'unsupported'
-            "
-          >
-            Unsupported
-          </template>
-          <template
-            v-else-if="project.client_side === 'required' && project.server_side === 'required'"
-          >
-            Client and server
-          </template>
-        </div>
-        <div
-          v-for="tag in categories"
-          :key="tag"
-          class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
-        >
-          {{ formatCategory(tag.name) }}
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
-      <div class="flex items-center gap-2">
-        <DownloadIcon class="shrink-0" />
-        <span>
-          {{ formatNumber(project.downloads) }}
-          <span class="text-secondary">downloads</span>
-        </span>
-      </div>
-      <div class="flex items-center gap-2">
-        <HeartIcon class="shrink-0" />
-        <span>
-          {{ formatNumber(project.follows ?? project.followers) }}
-          <span class="text-secondary">followers</span>
-        </span>
-      </div>
-      <div class="mt-auto relative">
-        <div class="absolute bottom-0 right-0 w-fit">
-          <ButtonStyled color="brand" type="outlined">
-            <button
-              :disabled="installed || installing"
-              class="shrink-0 no-wrap"
-              @click.stop="install()"
-            >
-              <template v-if="!installed">
-                <DownloadIcon v-if="modpack || instance" />
-                <PlusIcon v-else />
-              </template>
-              <CheckIcon v-else />
-              {{
-                installing
-                  ? 'Installing'
-                  : installed
-                    ? 'Installed'
-                    : modpack || instance
-                      ? 'Install'
-                      : 'Add to an instance'
-              }}
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-  </div>
+	<ProjectCard
+		:title="project.title"
+		:link="
+			() => {
+				emit('open')
+				$router.push({
+					path: `/project/${project.project_id ?? project.id}`,
+					query: { i: props.instance ? props.instance.path : undefined },
+				})
+			}
+		"
+		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
+		:icon-url="project.icon_url"
+		:summary="project.description"
+		: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"
+		:environment="
+			projectType
+				? ['mod', 'modpack'].includes(projectType)
+					? {
+							clientSide: project.client_side,
+							serverSide: project.server_side,
+						}
+					: undefined
+				: undefined
+		"
+		layout="list"
+	>
+		<template #actions>
+			<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>
+		</template>
+	</ProjectCard>
 </template>

 <script setup>
-import { TagsIcon, DownloadIcon, HeartIcon, PlusIcon, CheckIcon } from '@modrinth/assets'
-import { ButtonStyled, Avatar } from '@modrinth/ui'
-import { formatNumber, formatCategory } from '@modrinth/utils'
+import { CheckIcon, DownloadIcon, PlusIcon } from '@modrinth/assets'
+import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { ref, computed } from 'vue'
-import { install as installVersion } from '@/store/install.js'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
+
+import { install as installVersion } from '@/store/install.js'
 dayjs.extend(relativeTime)

+const { handleError } = injectNotificationManager()
+
 const router = useRouter()

 const props = defineProps({
-  backgroundImage: {
-    type: String,
-    default: null,
-  },
-  project: {
-    type: Object,
-    required: true,
-  },
-  categories: {
-    type: Array,
-    required: true,
-  },
-  instance: {
-    type: Object,
-    default: null,
-  },
-  featured: {
-    type: Boolean,
-    default: false,
-  },
-  installed: {
-    type: Boolean,
-    default: false,
-  },
+	backgroundImage: {
+		type: String,
+		default: null,
+	},
+	project: {
+		type: Object,
+		required: true,
+	},
+	instance: {
+		type: Object,
+		default: null,
+	},
+	featured: {
+		type: Boolean,
+		default: false,
+	},
+	installed: {
+		type: Boolean,
+		default: false,
+	},
+	projectType: {
+		type: String,
+		default: undefined,
+	},
 })

 const emit = defineEmits(['open', 'install'])
@@ -161,20 +106,20 @@ const emit = defineEmits(['open', 'install'])
 const installing = ref(false)

 async function install() {
-  installing.value = true
-  await installVersion(
-    props.project.project_id ?? props.project.id,
-    null,
-    props.instance ? props.instance.path : null,
-    'SearchCard',
-    () => {
-      installing.value = false
-      emit('install', props.project.project_id ?? props.project.id)
-    },
-    (profile) => {
-      router.push(`/instance/${profile}`)
-    },
-  )
+	installing.value = true
+	await installVersion(
+		props.project.project_id ?? props.project.id,
+		null,
+		props.instance ? props.instance.path : null,
+		'SearchCard',
+		() => {
+			installing.value = false
+			emit('install', props.project.project_id ?? props.project.id)
+		},
+		(profile) => {
+			router.push(`/instance/${profile}`)
+		},
+	).catch(handleError)
 }

 const modpack = computed(() => props.project.project_type === 'modpack')
@@ -1,12 +1,14 @@
 <script setup>
-import { Button } from '@modrinth/ui'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_categories } from '@/helpers/tags.js'
-import { handleError } from '@/store/notifications.js'
-import { get_version, get_project } from '@/helpers/cache.js'
-import { install as installVersion } from '@/store/install.js'
+
 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'
+
+const { handleError } = injectNotificationManager()

 const confirmModal = ref(null)
 const project = ref(null)
@@ -15,86 +17,93 @@ const categories = ref(null)
 const installing = ref(false)

 defineExpose({
-  async show(event) {
-    if (event.event === 'InstallVersion') {
-      version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-      project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
-        handleError,
-      )
-    } else {
-      project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
-      version.value = await get_version(
-        project.value.versions[project.value.versions.length - 1],
-        'must_revalidate',
-      ).catch(handleError)
-    }
-    categories.value = (await get_categories().catch(handleError)).filter(
-      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
-    )
-    confirmModal.value.show()
-  },
+	async show(event) {
+		if (event.event === 'InstallVersion') {
+			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+				handleError,
+			)
+		} else {
+			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+			version.value = await get_version(
+				project.value.versions[project.value.versions.length - 1],
+				'must_revalidate',
+			).catch(handleError)
+		}
+		categories.value = (await get_categories().catch(handleError)).filter(
+			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+		)
+		confirmModal.value.show()
+	},
 })

 async function install() {
-  confirmModal.value.hide()
-  await installVersion(project.value.id, version.value.id, null, 'URLConfirmModal')
+	confirmModal.value.hide()
+	await installVersion(
+		project.value.id,
+		version.value.id,
+		null,
+		'URLConfirmModal',
+		() => {},
+		() => {},
+	).catch(handleError)
 }
 </script>

 <template>
-  <ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
-    <div class="modal-body">
-      <SearchCard
-        :project="project"
-        class="project-card"
-        :categories="categories"
-        @open="confirmModal.hide()"
-      />
-      <div class="button-row">
-        <div class="markdown-body">
-          <p>
-            Installing <code>{{ version.id }}</code> from Modrinth
-          </p>
-        </div>
-        <div class="button-group">
-          <Button :loading="installing" color="primary" @click="install">Install</Button>
-        </div>
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+		<div class="modal-body">
+			<SearchCard
+				:project="project"
+				class="project-card"
+				:categories="categories"
+				@open="confirmModal.hide()"
+			/>
+			<div class="button-row">
+				<div class="markdown-body">
+					<p>
+						Installing <code>{{ version.id }}</code> from Modrinth
+					</p>
+				</div>
+				<div class="button-group">
+					<Button :loading="installing" color="primary" @click="install">Install</Button>
+				</div>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <style scoped lang="scss">
 .modal-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--gap-md);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--gap-md);
 }

 .button-row {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--gap-md);
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--gap-md);
 }

 .button-group {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap-sm);
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap-sm);
 }

 .project-card {
-  background-color: var(--color-bg);
-  width: 100%;
+	background-color: var(--color-bg);
+	width: 100%;

-  :deep(.badge) {
-    border: 1px solid var(--color-raised-bg);
-    background-color: var(--color-accent-contrast);
-  }
+	:deep(.badge) {
+		border: 1px solid var(--color-raised-bg);
+		background-color: var(--color-accent-contrast);
+	}
 }
 </style>
@@ -1,361 +1,406 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, OverflowMenu, useRelativeTime } from '@modrinth/ui'
+import { MailIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
-  UserPlusIcon,
-  MoreVerticalIcon,
-  MailIcon,
-  SettingsIcon,
-  TrashIcon,
-  XIcon,
-} from '@modrinth/assets'
-import { ref, onUnmounted, watch, computed } from 'vue'
-import { friend_listener } from '@/helpers/events'
-import { friends, friend_statuses, add_friend, remove_friend } from '@/helpers/friends'
-import { get_user_many } from '@/helpers/cache'
-import { handleError } from '@/store/notifications.js'
-import ContextMenu from '@/components/ui/ContextMenu.vue'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	injectNotificationManager,
+	IntlFormatted,
+	StyledInput,
+	useRelativeTime,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, onUnmounted, ref, watch } from 'vue'

+import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { friend_listener } from '@/helpers/events'
+import {
+	add_friend,
+	friends,
+	type FriendWithUserData,
+	remove_friend,
+	transformFriends,
+} from '@/helpers/friends.ts'
+import type { ModrinthCredentials } from '@/helpers/mr_auth'
+
+const { formatMessage } = useVIntl()
+
+const { handleError } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()

 const props = defineProps<{
-  credentials: unknown | null
-  signIn: () => void
+	credentials: ModrinthCredentials | null
+	signIn: () => void
 }>()

 const userCredentials = computed(() => props.credentials)

 const search = ref('')
-const manageFriendsModal = ref()
 const friendInvitesModal = ref()

 const username = ref('')
 const addFriendModal = ref()
 async function addFriendFromModal() {
-  addFriendModal.value.hide()
-  await add_friend(username.value).catch(handleError)
-  username.value = ''
-  await loadFriends()
+	addFriendModal.value.hide()
+	await add_friend(username.value).catch(handleError)
+	username.value = ''
+	await loadFriends()
 }

-const friendOptions = ref()
-async function handleFriendOptions(args) {
-  switch (args.option) {
-    case 'remove-friend':
-      await removeFriend(args.item)
-      break
-  }
+async function addFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await add_friend(id).catch(handleError)
+		await loadFriends()
+	}
 }

-async function addFriend(friend: Friend) {
-  await add_friend(
-    friend.id === userCredentials.value.user_id ? friend.friend_id : friend.id,
-  ).catch(handleError)
-  await loadFriends()
+async function removeFriend(friend: FriendWithUserData) {
+	const id = friend.id === userCredentials.value?.user_id ? friend.friend_id : friend.id
+	if (id) {
+		await remove_friend(id).catch(handleError)
+		await loadFriends()
+	}
 }

-async function removeFriend(friend: Friend) {
-  await remove_friend(
-    friend.id === userCredentials.value.user_id ? friend.friend_id : friend.id,
-  ).catch(handleError)
-  await loadFriends()
-}
+const userFriends = ref<FriendWithUserData[]>([])
+const sortedFriends = computed<FriendWithUserData[]>(() =>
+	userFriends.value.slice().sort((a, b) => {
+		if (a.last_updated === null && b.last_updated === null) {
+			return 0 // Both are null, equal in sorting
+		}
+		if (a.last_updated === null) {
+			return 1 // `a` is null, move it after `b`
+		}
+		if (b.last_updated === null) {
+			return -1 // `b` is null, move it after `a`
+		}
+		// Both are non-null, sort by date
+		return b.last_updated.diff(a.last_updated)
+	}),
+)
+const filteredFriends = computed<FriendWithUserData[]>(() =>
+	sortedFriends.value.filter((x) =>
+		x.username.trim().toLowerCase().includes(search.value.trim().toLowerCase()),
+	),
+)

-type Friend = {
-  id: string
-  friend_id: string | null
-  status: string | null
-  last_updated: Dayjs | null
-  created: Dayjs
-  username: string
-  accepted: boolean
-  online: boolean
-  avatar: string
-}
-
-const userFriends = ref<Friend[]>([])
-const acceptedFriends = computed(() =>
-  userFriends.value
-    .filter((x) => x.accepted)
-    .toSorted((a, b) => {
-      if (a.last_updated === null && b.last_updated === null) {
-        return 0 // Both are null, equal in sorting
-      }
-      if (a.last_updated === null) {
-        return 1 // `a` is null, move it after `b`
-      }
-      if (b.last_updated === null) {
-        return -1 // `b` is null, move it after `a`
-      }
-      // Both are non-null, sort by date
-      return b.last_updated.diff(a.last_updated)
-    }),
+const activeFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => !!x.status && x.online && x.accepted),
+)
+const onlineFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => x.online && !x.status && x.accepted),
+)
+const offlineFriends = computed<FriendWithUserData[]>(() =>
+	filteredFriends.value.filter((x) => !x.online && x.accepted),
 )
 const pendingFriends = computed(() =>
-  userFriends.value.filter((x) => !x.accepted).toSorted((a, b) => b.created.diff(a.created)),
+	filteredFriends.value
+		.filter((x) => !x.accepted && x.id !== userCredentials.value?.user_id)
+		.slice()
+		.sort((a, b) => b.created.diff(a.created)),
+)
+const incomingRequests = computed(() =>
+	userFriends.value
+		.filter((x) => !x.accepted && x.id === userCredentials.value?.user_id)
+		.slice()
+		.sort((a, b) => b.created.diff(a.created)),
 )

 const loading = ref(true)
 async function loadFriends(timeout = false) {
-  loading.value = timeout
+	loading.value = timeout

-  try {
-    const friendsList = await friends()
-
-    if (friendsList.length === 0) {
-      userFriends.value = []
-    } else {
-      const friendStatuses = await friend_statuses()
-      const users = await get_user_many(
-        friendsList.map((x) => (x.id === userCredentials.value.user_id ? x.friend_id : x.id)),
-      )
-
-      userFriends.value = friendsList.map((friend) => {
-        const user = users.find((x) => x.id === friend.id || x.id === friend.friend_id)
-        const status = friendStatuses.find(
-          (x) => x.user_id === friend.id || x.user_id === friend.friend_id,
-        )
-        return {
-          id: friend.id,
-          friend_id: friend.friend_id,
-          status: status?.profile_name,
-          last_updated: status && status.last_update ? dayjs(status.last_update) : null,
-          created: dayjs(friend.created),
-          avatar: user?.avatar_url,
-          username: user?.username,
-          online: !!status,
-          accepted: friend.accepted,
-        }
-      })
-    }
-
-    loading.value = false
-  } catch (e) {
-    console.error('Error loading friends', e)
-    if (timeout) {
-      setTimeout(() => loadFriends(), 15 * 1000)
-    }
-  }
+	try {
+		const friendsList = await friends()
+		userFriends.value = await transformFriends(friendsList, userCredentials.value)
+		loading.value = false
+	} catch (e) {
+		console.error('Error loading friends', e)
+		if (timeout) {
+			setTimeout(() => loadFriends(), 15 * 1000)
+		}
+	}
 }

 watch(
-  userCredentials,
-  () => {
-    if (userCredentials.value === undefined) {
-      userFriends.value = []
-    } else if (userCredentials.value === null) {
-      userFriends.value = []
-      loading.value = false
-    } else {
-      loadFriends(true)
-    }
-  },
-  { immediate: true },
+	userCredentials,
+	() => {
+		if (userCredentials.value === undefined) {
+			userFriends.value = []
+			loading.value = false
+		} else if (userCredentials.value === null) {
+			userFriends.value = []
+			loading.value = false
+		} else {
+			loadFriends(true)
+		}
+	},
+	{ immediate: true },
 )

 const unlisten = await friend_listener(() => loadFriends())
 onUnmounted(() => {
-  unlisten()
+	unlisten()
+})
+
+const messages = defineMessages({
+	addFriend: {
+		id: 'friends.action.add-friend',
+		defaultMessage: 'Add a friend',
+	},
+	addingAFriend: {
+		id: 'friends.add-friend.title',
+		defaultMessage: 'Adding a friend',
+	},
+	usernameTitle: {
+		id: 'friends.add-friend.username.title',
+		defaultMessage: "What's your friend's Modrinth username?",
+	},
+	usernameDescription: {
+		id: 'friends.add-friend.username.description',
+		defaultMessage: 'It may be different from their Minecraft username!',
+	},
+	usernamePlaceholder: {
+		id: 'friends.add-friend.username.placeholder',
+		defaultMessage: 'Enter Modrinth username...',
+	},
+	sendFriendRequest: {
+		id: 'friends.add-friend.submit',
+		defaultMessage: 'Send friend request',
+	},
+	viewFriendRequests: {
+		id: 'friends.action.view-friend-requests',
+		defaultMessage: '{count} friend {count, plural, one {request} other {requests}}',
+	},
+	searchFriends: {
+		id: 'friends.search-friends-placeholder',
+		defaultMessage: 'Search friends...',
+	},
+	friends: {
+		id: 'friends.heading',
+		defaultMessage: 'Friends',
+	},
+	pending: {
+		id: 'friends.heading.pending',
+		defaultMessage: 'Pending',
+	},
+	active: {
+		id: 'friends.heading.active',
+		defaultMessage: 'Active',
+	},
+	online: {
+		id: 'friends.heading.online',
+		defaultMessage: 'Online',
+	},
+	offline: {
+		id: 'friends.heading.offline',
+		defaultMessage: 'Offline',
+	},
+	noFriendsMatch: {
+		id: 'friends.no-friends-match',
+		defaultMessage: `No friends matching ''{query}''`,
+	},
+	signInToAddFriends: {
+		id: 'friends.sign-in-to-add-friends',
+		defaultMessage:
+			"<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!",
+	},
+	addFriendsToShare: {
+		id: 'friends.add-friends-to-share',
+		defaultMessage: "<link>Add friends</link> to see what they're playing!",
+	},
 })
 </script>

 <template>
-  <ModalWrapper ref="manageFriendsModal" header="Manage friends">
-    <p v-if="acceptedFriends.length === 0">Add friends to share what you're playing!</p>
-    <div v-else class="flex flex-col gap-4 min-w-[20rem]">
-      <input v-model="search" type="text" placeholder="Search friends..." class="w-full" />
-      <div
-        v-for="friend in acceptedFriends.filter(
-          (x) => !search || x.username.toLowerCase().includes(search),
-        )"
-        :key="friend.username"
-        class="flex gap-2 items-center"
-      >
-        <div class="relative">
-          <Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-          <span
-            v-if="friend.online"
-            class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-          />
-        </div>
-        <div>{{ friend.username }}</div>
-        <div class="ml-auto">
-          <ButtonStyled>
-            <button @click="removeFriend(friend)">
-              <XIcon />
-              Remove
-            </button>
-          </ButtonStyled>
-        </div>
-      </div>
-    </div>
-  </ModalWrapper>
-  <ModalWrapper ref="friendInvitesModal" header="View friend requests">
-    <p v-if="pendingFriends.length === 0">You have no pending friend requests :C</p>
-    <div v-else class="flex flex-col gap-4">
-      <div v-for="friend in pendingFriends" :key="friend.username" class="flex gap-2">
-        <Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-        <div class="flex flex-col gap-2">
-          <div>
-            <p class="m-0">
-              <template v-if="friend.id === userCredentials.user_id">
-                <span class="font-bold">{{ friend.username }}</span> sent you a friend request
-              </template>
-              <template v-else>
-                You sent <span class="font-bold">{{ friend.username }}</span> a friend request
-              </template>
-            </p>
-            <p class="m-0 text-sm text-secondary">
-              {{ formatRelativeTime(friend.created.toISOString()) }}
-            </p>
-          </div>
-          <div class="flex gap-2">
-            <template v-if="friend.id === userCredentials.user_id">
-              <ButtonStyled color="brand">
-                <button @click="addFriend(friend)">
-                  <UserPlusIcon />
-                  Accept
-                </button>
-              </ButtonStyled>
-              <ButtonStyled>
-                <button @click="removeFriend(friend)">
-                  <XIcon />
-                  Ignore
-                </button>
-              </ButtonStyled>
-            </template>
-            <template v-else>
-              <ButtonStyled>
-                <button @click="removeFriend(friend)">
-                  <XIcon />
-                  Cancel
-                </button>
-              </ButtonStyled>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ModalWrapper>
-  <ModalWrapper ref="addFriendModal" header="Add a friend">
-    <div class="mb-4">
-      <h2 class="m-0 text-lg font-extrabold text-contrast">Username</h2>
-      <p class="m-0 mt-1 leading-tight">You can add friends with their Modrinth username.</p>
-      <input v-model="username" class="mt-2 w-full" type="text" placeholder="Enter username..." />
-    </div>
-    <ButtonStyled color="brand">
-      <button :disabled="username.length === 0" @click="addFriendFromModal">
-        <UserPlusIcon />
-        Add friend
-      </button>
-    </ButtonStyled>
-  </ModalWrapper>
-  <div class="flex justify-between items-center">
-    <h3 class="text-lg m-0">Friends</h3>
-    <ButtonStyled v-if="userCredentials" type="transparent" circular>
-      <OverflowMenu
-        :options="[
-          {
-            id: 'add-friend',
-            action: () => addFriendModal.show(),
-          },
-          {
-            id: 'manage-friends',
-            action: () => manageFriendsModal.show(),
-            shown: acceptedFriends.length > 0,
-          },
-          {
-            id: 'view-requests',
-            action: () => friendInvitesModal.show(),
-            shown: pendingFriends.length > 0,
-          },
-        ]"
-        aria-label="More options"
-      >
-        <MoreVerticalIcon aria-hidden="true" />
-        <template #add-friend>
-          <UserPlusIcon aria-hidden="true" />
-          Add friend
-        </template>
-        <template #manage-friends>
-          <SettingsIcon aria-hidden="true" />
-          Manage friends
-          <div
-            v-if="acceptedFriends.length > 0"
-            class="bg-button-bg w-6 h-6 rounded-full flex items-center justify-center"
-          >
-            {{ acceptedFriends.length }}
-          </div>
-        </template>
-        <template #view-requests>
-          <MailIcon aria-hidden="true" />
-          View friend requests
-          <div
-            v-if="pendingFriends.length > 0"
-            class="bg-button-bg w-6 h-6 rounded-full flex items-center justify-center"
-          >
-            {{ pendingFriends.length }}
-          </div>
-        </template>
-      </OverflowMenu>
-    </ButtonStyled>
-  </div>
-  <div class="flex flex-col gap-2 mt-2">
-    <template v-if="loading">
-      <div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse">
-        <div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
-        <div class="flex flex-col w-full">
-          <div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
-          <div class="h-2.5 bg-button-bg rounded-full w-3/4"></div>
-        </div>
-      </div>
-    </template>
-    <template v-else-if="acceptedFriends.length === 0">
-      <div class="text-sm">
-        <div v-if="!userCredentials">
-          <span class="text-link cursor-pointer" @click="signIn">Sign in</span> to add friends!
-        </div>
-        <div v-else>
-          <span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
-          to share what you're playing!
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
-        <template #remove-friend> <TrashIcon /> Remove friend </template>
-      </ContextMenu>
-      <div
-        v-for="friend in acceptedFriends.slice(0, 5)"
-        :key="friend.username"
-        class="flex gap-2 items-center"
-        :class="{ grayscale: !friend.online }"
-        @contextmenu.prevent.stop="
-          (event) =>
-            friendOptions.showMenu(event, friend, [
-              {
-                name: 'remove-friend',
-                color: 'danger',
-              },
-            ])
-        "
-      >
-        <div class="relative">
-          <Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
-          <span
-            v-if="friend.online"
-            class="bottom-1 right-0 absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-          />
-        </div>
-        <div class="flex flex-col">
-          <span class="text-md m-0 font-medium" :class="{ 'text-secondary': !friend.online }">
-            {{ friend.username }}
-          </span>
-          <span v-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
-        </div>
-      </div>
-    </template>
-  </div>
+	<ModalWrapper ref="friendInvitesModal" header="View friend requests">
+		<p v-if="incomingRequests.length === 0">You have no pending friend requests :C</p>
+		<div v-else class="flex flex-col gap-4 min-w-[40rem]">
+			<div v-for="friend in incomingRequests" :key="friend.username" class="flex gap-2">
+				<Avatar :src="friend.avatar" class="w-12 h-12 rounded-full" size="2.25rem" circle />
+				<div class="grid grid-cols-[1fr_auto] w-full gap-4">
+					<div>
+						<p class="m-0">
+							<template v-if="friend.id === userCredentials?.user_id">
+								<span class="text-contrast">{{ friend.username }}</span> sent you a friend request
+							</template>
+							<template v-else>
+								You sent <span class="font-bold">{{ friend.username }}</span> a friend request
+							</template>
+						</p>
+						<p class="m-0 text-sm text-secondary">
+							{{ formatRelativeTime(friend.created.toISOString()) }}
+						</p>
+					</div>
+					<div class="flex gap-2">
+						<template v-if="friend.id === userCredentials?.user_id">
+							<ButtonStyled color="brand">
+								<button @click="addFriend(friend)">
+									<UserPlusIcon />
+									Accept
+								</button>
+							</ButtonStyled>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Ignore
+								</button>
+							</ButtonStyled>
+						</template>
+						<template v-else>
+							<ButtonStyled>
+								<button @click="removeFriend(friend)">
+									<XIcon />
+									Cancel
+								</button>
+							</ButtonStyled>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ModalWrapper>
+	<ModalWrapper ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
+		<div class="min-w-[30rem]">
+			<h2 class="m-0 text-base font-medium text-primary">
+				{{ formatMessage(messages.usernameTitle) }}
+			</h2>
+			<p class="m-0 mt-1 text-sm text-secondary leading-tight">
+				{{ formatMessage(messages.usernameDescription) }}
+			</p>
+			<div class="flex items-center gap-2 mt-4">
+				<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 />
+						{{ formatMessage(messages.sendFriendRequest) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</ModalWrapper>
+	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 ml-2 mr-1">
+		<template v-if="sortedFriends.length > 0">
+			<ButtonStyled circular type="transparent">
+				<button
+					v-tooltip="formatMessage(messages.addFriend)"
+					:aria-label="formatMessage(messages.addFriend)"
+					@click="addFriendModal.show"
+				>
+					<UserPlusIcon />
+				</button>
+			</ButtonStyled>
+			<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) }}
+		</h3>
+		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
+			<button
+				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				class="relative"
+				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+				@click="friendInvitesModal.show"
+			>
+				<MailIcon />
+				<span
+					v-if="incomingRequests.length > 0"
+					aria-hidden="true"
+					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
+				>
+					{{ incomingRequests.length }}
+				</span>
+			</button>
+		</ButtonStyled>
+	</div>
+	<div class="flex flex-col gap-3">
+		<h3 v-if="loading" class="ml-4 mr-1 text-base text-primary font-medium m-0">
+			{{ formatMessage(messages.friends) }}
+		</h3>
+		<template v-if="loading">
+			<div v-for="n in 5" :key="n" class="flex gap-2 items-center animate-pulse ml-4 mr-1">
+				<div class="min-w-9 min-h-9 bg-button-bg rounded-full"></div>
+				<div class="flex flex-col w-full">
+					<div class="h-3 bg-button-bg rounded-full w-1/2 mb-1"></div>
+					<div class="h-2.5 bg-button-bg rounded-full w-3/4"></div>
+				</div>
+			</div>
+		</template>
+		<template v-else-if="sortedFriends.length === 0">
+			<div class="text-sm ml-4 mr-1">
+				<div v-if="!userCredentials">
+					<IntlFormatted :message-id="messages.signInToAddFriends">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="signIn">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
+				</div>
+				<div v-else>
+					<IntlFormatted :message-id="messages.addFriendsToShare">
+						<template #link="{ children }">
+							<span class="font-semibold text-brand cursor-pointer" @click="addFriendModal.show">
+								<component :is="() => children" />
+							</span>
+						</template>
+					</IntlFormatted>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<FriendsSection
+				v-if="activeFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="activeFriends"
+				:heading="formatMessage(messages.active)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="onlineFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="onlineFriends"
+				:heading="formatMessage(messages.online)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="offlineFriends.length > 0"
+				:is-searching="!!search"
+				:open-by-default="activeFriends.length + onlineFriends.length < 3"
+				:friends="offlineFriends"
+				:heading="formatMessage(messages.offline)"
+				:remove-friend="removeFriend"
+			/>
+			<FriendsSection
+				v-if="pendingFriends.length > 0"
+				:is-searching="!!search"
+				open-by-default
+				:friends="pendingFriends"
+				:heading="formatMessage(messages.pending)"
+				:remove-friend="removeFriend"
+			/>
+			<p v-if="filteredFriends.length === 0 && search" class="text-sm text-secondary my-1 mx-4">
+				{{ formatMessage(messages.noFriendsMatch, { query: search }) }}
+			</p>
+		</template>
+	</div>
 </template>
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
+import {
+	Accordion,
+	Avatar,
+	ButtonStyled,
+	defineMessages,
+	OverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { useTemplateRef } from 'vue'
+
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import type { FriendWithUserData } from '@/helpers/friends.ts'
+
+const { formatMessage } = useVIntl()
+
+const props = withDefaults(
+	defineProps<{
+		friends: FriendWithUserData[]
+		heading: string
+		removeFriend: (friend: FriendWithUserData) => Promise<void>
+		isSearching?: boolean
+		openByDefault?: boolean
+	}>(),
+	{
+		isSearching: false,
+		openByDefault: false,
+	},
+)
+
+function createContextMenuOptions(friend: FriendWithUserData) {
+	if (friend.accepted) {
+		return [
+			{
+				name: 'view-profile',
+			},
+			{
+				name: 'remove-friend',
+				color: 'danger',
+			},
+		]
+	} else {
+		return [
+			{
+				name: 'view-profile',
+			},
+			{
+				name: 'cancel-request',
+			},
+		]
+	}
+}
+
+function openProfile(username: string) {
+	openUrl('https://modrinth.com/user/' + username)
+}
+
+const friendOptions = useTemplateRef('friendOptions')
+async function handleFriendOptions(args: { item: FriendWithUserData; option: string }) {
+	switch (args.option) {
+		case 'remove-friend':
+		case 'cancel-request':
+			await props.removeFriend(args.item)
+			break
+		case 'view-profile':
+			openProfile(args.item.username)
+	}
+}
+
+const messages = defineMessages({
+	removeFriend: {
+		id: 'friends.friend.remove-friend',
+		defaultMessage: 'Remove friend',
+	},
+	heading: {
+		id: 'friends.section.heading',
+		defaultMessage: '{title} - {count}',
+	},
+	friendRequestSent: {
+		id: 'friends.friend.request-sent',
+		defaultMessage: 'Friend request sent',
+	},
+	cancelRequest: {
+		id: 'friends.friend.cancel-request',
+		defaultMessage: 'Cancel request',
+	},
+	viewProfile: {
+		id: 'friends.friend.view-profile',
+		defaultMessage: 'View profile',
+	},
+})
+</script>
+
+<template>
+	<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
+		<template #view-profile>
+			<UserIcon />
+			{{ formatMessage(messages.viewProfile) }}
+		</template>
+		<template #remove-friend> <TrashIcon /> {{ formatMessage(messages.removeFriend) }} </template>
+		<template #cancel-request> <XIcon /> {{ formatMessage(messages.cancelRequest) }} </template>
+	</ContextMenu>
+	<Accordion
+		:open-by-default="openByDefault"
+		:force-open="isSearching"
+		:button-class="
+			'pl-4 pr-3 flex w-full items-center bg-transparent border-0 p-0' +
+			(isSearching
+				? ''
+				: ' cursor-pointer hover:brightness-[--hover-brightness] active:scale-[0.98] transition-all')
+		"
+	>
+		<template #title>
+			<h3 class="text-base text-primary font-medium m-0">
+				{{ formatMessage(messages.heading, { title: heading, count: friends.length }) }}
+			</h3>
+		</template>
+		<template #default>
+			<div class="pt-3 flex flex-col gap-1">
+				<div
+					v-for="friend in friends"
+					:key="friend.username"
+					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full ml-4 mr-1"
+					@contextmenu.prevent.stop="
+						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
+					"
+				>
+					<div class="relative">
+						<Avatar
+							:src="friend.avatar"
+							:class="{ grayscale: !friend.online && friend.accepted }"
+							class="w-12 h-12 rounded-full"
+							size="32px"
+							circle
+						/>
+						<span
+							v-if="friend.online"
+							aria-hidden="true"
+							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+						/>
+					</div>
+					<div class="flex flex-col">
+						<span
+							class="text-sm m-0"
+							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+						>
+							{{ friend.username }}
+						</span>
+						<span v-if="!friend.accepted" class="m-0 text-xs">
+							{{ formatMessage(messages.friendRequestSent) }}
+						</span>
+						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+					</div>
+					<ButtonStyled v-if="friend.accepted" circular type="transparent">
+						<OverflowMenu
+							class="opacity-0 group-hover:opacity-100 transition-opacity"
+							:options="[
+								{
+									id: 'view-profile',
+									action: () => openProfile(friend.username),
+								},
+								{
+									id: 'remove-friend',
+									action: () => removeFriend(friend),
+									color: 'red',
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #view-profile>
+								<UserIcon />
+								{{ formatMessage(messages.viewProfile) }}
+							</template>
+							<template #remove-friend>
+								<TrashIcon />
+								{{ formatMessage(messages.removeFriend) }}
+							</template>
+						</OverflowMenu>
+					</ButtonStyled>
+					<ButtonStyled v-else type="transparent" circular>
+						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
+							<XIcon />
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</template>
+	</Accordion>
+</template>
@@ -0,0 +1,121 @@
+<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)
+		for (const profile of profilesVal) {
+			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>
@@ -1,71 +1,75 @@
 <template>
-  <ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
-    <div class="modal-body">
-      <p>
-        This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
-        you're trying to install it on. Are you sure you want to continue? Dependencies will not be
-        installed.
-      </p>
-      <table>
-        <thead>
-          <tr class="header">
-            <th>{{ instance?.name }}</th>
-            <th>{{ project.title }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="content">
-            <td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
-            <td>
-              <multiselect
-                v-if="versions?.length > 1"
-                v-model="selectedVersion"
-                :options="versions"
-                :searchable="true"
-                placeholder="Select version"
-                open-direction="top"
-                :show-labels="false"
-                :custom-label="
-                  (version) =>
-                    `${version?.name} (${version?.loaders
-                      .map((name) => formatCategory(name))
-                      .join(', ')} - ${version?.game_versions.join(', ')})`
-                "
-                :max-height="150"
-              />
-              <span v-else>
-                <span>
-                  {{ selectedVersion?.name }} ({{
-                    selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
-                  }}
-                  - {{ selectedVersion?.game_versions.join(', ') }})
-                </span>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-group">
-        <Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
-        <Button color="primary" :disabled="installing" @click="install()">
-          <DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
-        </Button>
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper ref="incompatibleModal" header="Incompatibility warning" :on-hide="onInstall">
+		<div class="modal-body">
+			<p>
+				This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
+				you're trying to install it on. Are you sure you want to continue? Dependencies will not be
+				installed.
+			</p>
+			<table>
+				<thead>
+					<tr class="header">
+						<th>{{ instance?.name }}</th>
+						<th>{{ project.title }}</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="content">
+						<td class="data">{{ instance?.loader }} {{ instance?.game_version }}</td>
+						<td>
+							<multiselect
+								v-if="versions?.length > 1"
+								v-model="selectedVersion"
+								:options="versions"
+								:searchable="true"
+								placeholder="Select version"
+								open-direction="top"
+								:show-labels="false"
+								:custom-label="
+									(version) =>
+										`${version?.name} (${version?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')} - ${version?.game_versions.join(', ')})`
+								"
+								:max-height="150"
+							/>
+							<span v-else>
+								<span>
+									{{ selectedVersion?.name }} ({{
+										selectedVersion?.loaders
+											.map((name) => formatLoader(formatMessage, name))
+											.join(', ')
+									}}
+									- {{ selectedVersion?.game_versions.join(', ') }})
+								</span>
+							</span>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<div class="button-group">
+				<Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+				<Button color="primary" :disabled="installing" @click="install()">
+					<DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+				</Button>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <script setup>
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import { XIcon, DownloadIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
-import { add_project_from_version as installMod } from '@/helpers/profile'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Button, formatLoader, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { ref } from 'vue'
-import { handleError } from '@/store/state.js'
-import { trackEvent } from '@/helpers/analytics'
 import Multiselect from 'vue-multiselect'

+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+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)
 const versions = ref(null)
@@ -76,91 +80,91 @@ const installing = ref(false)
 const onInstall = ref(() => {})

 defineExpose({
-  show: (instanceVal, projectVal, projectVersions, callback) => {
-    instance.value = instanceVal
-    versions.value = projectVersions
-    selectedVersion.value = projectVersions[0]
+	show: (instanceVal, projectVal, projectVersions, selected, callback) => {
+		instance.value = instanceVal
+		versions.value = projectVersions
+		selectedVersion.value = selected ?? projectVersions[0]

-    project.value = projectVal
+		project.value = projectVal

-    onInstall.value = callback
-    installing.value = false
+		onInstall.value = callback
+		installing.value = false

-    incompatibleModal.value.show()
+		incompatibleModal.value.show()

-    trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
-  },
+		trackEvent('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+	},
 })

 const install = async () => {
-  installing.value = true
-  await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
-  installing.value = false
-  onInstall.value(selectedVersion.value.id)
-  incompatibleModal.value.hide()
+	installing.value = true
+	await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
+	installing.value = false
+	onInstall.value(selectedVersion.value.id)
+	incompatibleModal.value.hide()

-  trackEvent('ProjectInstall', {
-    loader: instance.value.loader,
-    game_version: instance.value.game_version,
-    id: project.value,
-    version_id: selectedVersion.value.id,
-    project_type: project.value.project_type,
-    title: project.value.title,
-    source: 'ProjectIncompatibilityWarningModal',
-  })
+	trackEvent('ProjectInstall', {
+		loader: instance.value.loader,
+		game_version: instance.value.game_version,
+		id: project.value,
+		version_id: selectedVersion.value.id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectIncompatibilityWarningModal',
+	})
 }
 </script>

 <style lang="scss" scoped>
 .data {
-  text-transform: capitalize;
+	text-transform: capitalize;
 }

 table {
-  width: 100%;
-  border-radius: var(--radius-lg);
-  border-collapse: collapse;
-  box-shadow: 0 0 0 1px var(--color-button-bg);
+	width: 100%;
+	border-radius: var(--radius-lg);
+	border-collapse: collapse;
+	box-shadow: 0 0 0 1px var(--color-button-bg);
 }

 th {
-  text-align: left;
-  padding: 1rem;
-  background-color: var(--color-bg);
-  overflow: hidden;
-  border-bottom: 1px solid var(--color-button-bg);
+	text-align: left;
+	padding: 1rem;
+	background-color: var(--color-bg);
+	overflow: hidden;
+	border-bottom: 1px solid var(--color-button-bg);
 }

 th:first-child {
-  border-top-left-radius: var(--radius-lg);
-  border-right: 1px solid var(--color-button-bg);
+	border-top-left-radius: var(--radius-lg);
+	border-right: 1px solid var(--color-button-bg);
 }

 th:last-child {
-  border-top-right-radius: var(--radius-lg);
+	border-top-right-radius: var(--radius-lg);
 }

 td {
-  padding: 1rem;
+	padding: 1rem;
 }

 td:first-child {
-  border-right: 1px solid var(--color-button-bg);
+	border-right: 1px solid var(--color-button-bg);
 }

 .button-group {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
 }

 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;

-  :deep(.animated-dropdown .options) {
-    max-height: 13.375rem;
-  }
+	:deep(.animated-dropdown .options) {
+		max-height: 13.375rem;
+	}
 }
 </style>
@@ -1,11 +1,13 @@
 <script setup>
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Button } from '@modrinth/ui'
-import { create_profile_and_install as pack_install } from '@/helpers/pack'
+import { Button, injectNotificationManager } from '@modrinth/ui'
 import { ref } from 'vue'
-import { trackEvent } from '@/helpers/analytics'
-import { handleError } from '@/store/state.js'
+
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
+
+const { handleError } = injectNotificationManager()

 const versionId = ref()
 const project = ref()
@@ -16,60 +18,60 @@ const onInstall = ref(() => {})
 const onCreateInstance = ref(() => {})

 defineExpose({
-  show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
-    project.value = projectVal
-    versionId.value = versionIdVal
-    installing.value = false
-    confirmModal.value.show()
+	show: (projectVal, versionIdVal, callback, createInstanceCallback) => {
+		project.value = projectVal
+		versionId.value = versionIdVal
+		installing.value = false
+		confirmModal.value.show()

-    onInstall.value = callback
-    onCreateInstance.value = createInstanceCallback
+		onInstall.value = callback
+		onCreateInstance.value = createInstanceCallback

-    trackEvent('PackInstallStart')
-  },
+		trackEvent('PackInstallStart')
+	},
 })

 async function install() {
-  installing.value = true
-  confirmModal.value.hide()
+	installing.value = true
+	confirmModal.value.hide()

-  await pack_install(
-    project.value.id,
-    versionId.value,
-    project.value.title,
-    project.value.icon_url,
-    onCreateInstance.value,
-  ).catch(handleError)
-  trackEvent('PackInstall', {
-    id: project.value.id,
-    version_id: versionId.value,
-    title: project.value.title,
-    source: 'ConfirmModal',
-  })
+	await pack_install(
+		project.value.id,
+		versionId.value,
+		project.value.title,
+		project.value.icon_url,
+		onCreateInstance.value,
+	).catch(handleError)
+	trackEvent('PackInstall', {
+		id: project.value.id,
+		version_id: versionId.value,
+		title: project.value.title,
+		source: 'ConfirmModal',
+	})

-  onInstall.value(versionId.value)
-  installing.value = false
+	onInstall.value(versionId.value)
+	installing.value = false
 }
 </script>

 <template>
-  <ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
-    <div class="modal-body">
-      <p>You already have this modpack installed. Are you sure you want to install it again?</p>
-      <div class="input-group push-right">
-        <Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
-        <Button color="primary" :disabled="installing" @click="install()"
-          ><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
-        >
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper ref="confirmModal" header="Are you sure?" :on-hide="onInstall">
+		<div class="modal-body">
+			<p>You already have this modpack installed. Are you sure you want to install it again?</p>
+			<div class="input-group push-right">
+				<Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+				<Button color="primary" :disabled="installing" @click="install()"
+					><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
+				>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <style lang="scss" scoped>
 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
 }
 </style>
@@ -1,29 +1,36 @@
 <script setup>
 import {
-  DownloadIcon,
-  PlusIcon,
-  UploadIcon,
-  XIcon,
-  RightArrowIcon,
-  CheckIcon,
+	CheckIcon,
+	DownloadIcon,
+	PlusIcon,
+	RightArrowIcon,
+	SearchIcon,
+	UploadIcon,
+	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { computed, ref } from 'vue'
-import {
-  add_project_from_version as installMod,
-  check_installed,
-  get,
-  list,
-  create,
-} from '@/helpers/profile'
-import { open } from '@tauri-apps/plugin-dialog'
-import { installVersionDependencies } from '@/store/install.js'
-import { handleError } from '@/store/notifications.js'
-import { useRouter } from 'vue-router'
+import { Avatar, Button, Card, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { trackEvent } from '@/helpers/analytics'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { open } from '@tauri-apps/plugin-dialog'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'

+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { get_project_v3_many } from '@/helpers/cache.js'
+import {
+	add_project_from_version as installMod,
+	check_installed,
+	create,
+	get,
+	list,
+} from '@/helpers/profile'
+import {
+	findPreferredVersion,
+	installVersionDependencies,
+	isVersionCompatible,
+} from '@/store/install.js'
+
+const { handleError } = injectNotificationManager()
 const router = useRouter()

 const versions = ref()
@@ -43,361 +50,369 @@ 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 loaders = versions.value.flatMap((v) => v.loaders)
-
-      return (
-        versions.value.flatMap((v) => v.game_versions).includes(profile.game_version) &&
-        (project.value.project_type === 'mod'
-          ? loaders.includes(profile.loader) || loaders.includes('minecraft')
-          : true)
-      )
-    }),
+	profiles.value.filter((profile) => {
+		return profile.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+	}),
 )

+const isProfileCompatible = (profile) =>
+	versions.value?.some((version) => isVersionCompatible(version, project.value, profile))
+
 const onInstall = ref(() => {})

 defineExpose({
-  show: async (projectVal, versionsVal, callback) => {
-    project.value = projectVal
-    versions.value = versionsVal
-    searchFilter.value = ''
+	show: async (projectVal, versionsVal, callback) => {
+		project.value = projectVal
+		versions.value = versionsVal
+		searchFilter.value = ''

-    showCreation.value = false
-    name.value = null
-    icon.value = null
-    display_icon.value = null
-    gameVersion.value = null
-    loader.value = null
+		showCreation.value = false
+		name.value = null
+		icon.value = null
+		display_icon.value = null
+		gameVersion.value = null
+		loader.value = null

-    onInstall.value = callback
+		onInstall.value = callback

-    const profilesVal = await list().catch(handleError)
-    for (const profile of profilesVal) {
-      profile.installing = false
-      profile.installedMod = await check_installed(profile.path, project.value.id).catch(
-        handleError,
-      )
-    }
-    profiles.value = profilesVal
+		const profilesVal = await list().catch(handleError)
+		for (const profile of profilesVal) {
+			profile.installing = false
+			profile.installedMod = await check_installed(profile.path, project.value.id).catch(
+				handleError,
+			)
+		}

-    installModal.value.show()
+		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)
+			}
+		}

-    trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
-  },
+		profiles.value = profilesVal
+
+		installModal.value.show()
+
+		trackEvent('ProjectInstallStart', { source: 'ProjectInstallModal' })
+	},
 })

 async function install(instance) {
-  instance.installing = true
-  const version = versions.value.find((v) => {
-    return (
-      v.game_versions.includes(instance.game_version) &&
-      (project.value.project_type === 'mod'
-        ? v.loaders.includes(instance.loader) || v.loaders.includes('minecraft')
-        : true)
-    )
-  })
+	instance.installing = true
+	const version = findPreferredVersion(versions.value, project.value, instance)

-  if (!version) {
-    instance.installing = false
-    handleError('No compatible version found')
-    return
-  }
+	if (!version) {
+		instance.installing = false
+		handleError('No compatible version found')
+		return
+	}

-  await installMod(instance.path, version.id).catch(handleError)
-  await installVersionDependencies(instance, version)
+	await installMod(instance.path, version.id).catch(handleError)
+	await installVersionDependencies(instance, version).catch(handleError)

-  instance.installedMod = true
-  instance.installing = false
+	instance.installedMod = true
+	instance.installing = false

-  trackEvent('ProjectInstall', {
-    loader: instance.loader,
-    game_version: instance.game_version,
-    id: project.value.id,
-    version_id: version.id,
-    project_type: project.value.project_type,
-    title: project.value.title,
-    source: 'ProjectInstallModal',
-  })
+	trackEvent('ProjectInstall', {
+		loader: instance.loader,
+		game_version: instance.game_version,
+		id: project.value.id,
+		version_id: version.id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})

-  onInstall.value(version.id)
+	onInstall.value(version.id)
 }

 const toggleCreation = () => {
-  showCreation.value = !showCreation.value
-  name.value = null
-  icon.value = null
-  display_icon.value = null
-  gameVersion.value = null
-  loader.value = null
+	showCreation.value = !showCreation.value
+	name.value = null
+	icon.value = null
+	display_icon.value = null
+	gameVersion.value = null
+	loader.value = null

-  if (showCreation.value) {
-    trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
-  }
+	if (showCreation.value) {
+		trackEvent('InstanceCreateStart', { source: 'ProjectInstallModal' })
+	}
 }

 const upload_icon = async () => {
-  const res = await open({
-    multiple: false,
-    filters: [
-      {
-        name: 'Image',
-        extensions: ['png', 'jpeg'],
-      },
-    ],
-  })
-  icon.value = res.path ?? res
+	const res = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg'],
+			},
+		],
+	})
+	icon.value = res.path ?? res

-  if (!icon.value) return
-  display_icon.value = convertFileSrc(icon.value)
+	if (!icon.value) return
+	display_icon.value = convertFileSrc(icon.value)
 }

 const reset_icon = () => {
-  icon.value = null
-  display_icon.value = null
+	icon.value = null
+	display_icon.value = null
 }

 const createInstance = async () => {
-  creatingInstance.value = true
+	creatingInstance.value = true

-  const loader =
-    versions.value[0].loaders[0] !== 'forge' &&
-    versions.value[0].loaders[0] !== 'fabric' &&
-    versions.value[0].loaders[0] !== 'quilt'
-      ? 'vanilla'
-      : versions.value[0].loaders[0]
+	const 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'

-  await installMod(id, versions.value[0].id).catch(handleError)
+	const id = await create(name.value, gameVersion, loader, 'latest', icon.value).catch(handleError)

-  await router.push(`/instance/${encodeURIComponent(id)}/`)
+	await installMod(id, versions.value[0].id).catch(handleError)

-  const instance = await get(id, true)
-  await installVersionDependencies(instance, versions.value[0])
+	await router.push(`/instance/${encodeURIComponent(id)}/`)

-  trackEvent('InstanceCreate', {
-    profile_name: name.value,
-    game_version: versions.value[0].game_versions[0],
-    loader: loader,
-    loader_version: 'latest',
-    has_icon: !!icon.value,
-    source: 'ProjectInstallModal',
-  })
+	const instance = await get(id, true)
+	await installVersionDependencies(instance, versions.value[0]).catch(handleError)

-  trackEvent('ProjectInstall', {
-    loader: loader,
-    game_version: versions.value[0].game_versions[0],
-    id: project.value,
-    version_id: versions.value[0].id,
-    project_type: project.value.project_type,
-    title: project.value.title,
-    source: 'ProjectInstallModal',
-  })
+	trackEvent('InstanceCreate', {
+		profile_name: name.value,
+		game_version: versions.value[0].game_versions[0],
+		loader: loader,
+		loader_version: 'latest',
+		has_icon: !!icon.value,
+		source: 'ProjectInstallModal',
+	})

-  onInstall.value(versions.value[0].id)
+	trackEvent('ProjectInstall', {
+		loader: loader,
+		game_version: versions.value[0].game_versions[0],
+		id: project.value,
+		version_id: versions.value[0].id,
+		project_type: project.value.project_type,
+		title: project.value.title,
+		source: 'ProjectInstallModal',
+	})

-  if (installModal.value) installModal.value.hide()
-  creatingInstance.value = false
+	onInstall.value(versions.value[0].id)
+
+	if (installModal.value) installModal.value.hide()
+	creatingInstance.value = false
 }
 </script>

 <template>
-  <ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
-    <div class="modal-body">
-      <input
-        v-model="searchFilter"
-        autocomplete="off"
-        type="text"
-        class="search"
-        placeholder="Search for an instance"
-      />
-      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
-        <div v-for="profile in shownProfiles" :key="profile.name" class="option">
-          <router-link
-            class="btn btn-transparent profile-button"
-            :to="`/instance/${encodeURIComponent(profile.path)}`"
-            @click="installModal.hide()"
-          >
-            <Avatar
-              :src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
-              class="profile-image"
-            />
-            {{ profile.name }}
-          </router-link>
-          <div
-            v-tooltip="
-              profile.linked_data?.locked && !profile.installedMod
-                ? 'Unpair or unlock an instance to add mods.'
-                : ''
-            "
-          >
-            <Button
-              :disabled="profile.installedMod || profile.installing"
-              @click="install(profile)"
-            >
-              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
-              <CheckIcon v-else-if="profile.installedMod" />
-              {{
-                profile.installing
-                  ? 'Installing...'
-                  : profile.installedMod
-                    ? 'Installed'
-                    : 'Install'
-              }}
-            </Button>
-          </div>
-        </div>
-      </div>
-      <Card v-if="showCreation" class="creation-card">
-        <div class="creation-container">
-          <div class="creation-icon">
-            <Avatar size="md" class="icon" :src="display_icon" />
-            <div class="creation-icon__description">
-              <Button @click="upload_icon()">
-                <UploadIcon />
-                <span class="no-wrap"> Select icon </span>
-              </Button>
-              <Button :disabled="!display_icon" @click="reset_icon()">
-                <XIcon />
-                <span class="no-wrap"> Remove icon </span>
-              </Button>
-            </div>
-          </div>
-          <div class="creation-settings">
-            <input
-              v-model="name"
-              autocomplete="off"
-              type="text"
-              placeholder="Name"
-              class="creation-input"
-            />
-            <Button :disabled="creatingInstance === true || !name" @click="createInstance()">
-              <RightArrowIcon />
-              {{ creatingInstance ? 'Creating...' : 'Create' }}
-            </Button>
-          </div>
-        </div>
-      </Card>
-      <div class="input-group push-right">
-        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
-          <PlusIcon />
-          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
-        </Button>
-        <Button @click="installModal.hide()">Cancel</Button>
-      </div>
-    </div>
-  </ModalWrapper>
+	<ModalWrapper ref="installModal" header="Install project to instance" :on-hide="onInstall">
+		<div class="modal-body">
+			<StyledInput
+				v-model="searchFilter"
+				:icon="SearchIcon"
+				type="search"
+				placeholder="Search for an instance"
+				autocomplete="off"
+			/>
+			<div class="profiles" :class="{ 'hide-creation': !showCreation }">
+				<div v-for="profile in shownProfiles" :key="profile.name" class="option">
+					<router-link
+						class="btn btn-transparent profile-button"
+						:to="`/instance/${encodeURIComponent(profile.path)}`"
+						@click="installModal.hide()"
+					>
+						<Avatar
+							:src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
+							class="profile-image"
+						/>
+						{{ profile.name }}
+					</router-link>
+					<div
+						v-tooltip="
+							profile.linked_data?.locked && !profile.installedMod
+								? 'Unpair or unlock an instance to add mods.'
+								: ''
+						"
+					>
+						<Button
+							:disabled="
+								!isProfileCompatible(profile) || profile.installedMod || profile.installing
+							"
+							@click="install(profile)"
+						>
+							<DownloadIcon
+								v-if="isProfileCompatible(profile) && !profile.installedMod && !profile.installing"
+							/>
+							<CheckIcon v-else-if="profile.installedMod" />
+							{{
+								profile.installing
+									? 'Installing...'
+									: profile.installedMod
+										? 'Installed'
+										: !isProfileCompatible(profile)
+											? 'Incompatible'
+											: 'Install'
+							}}
+						</Button>
+					</div>
+				</div>
+			</div>
+			<Card v-if="showCreation" class="creation-card">
+				<div class="creation-container">
+					<div class="creation-icon">
+						<Avatar size="md" class="icon" :src="display_icon" />
+						<div class="creation-icon__description">
+							<Button @click="upload_icon()">
+								<UploadIcon />
+								<span class="no-wrap"> Select icon </span>
+							</Button>
+							<Button :disabled="!display_icon" @click="reset_icon()">
+								<XIcon />
+								<span class="no-wrap"> Remove icon </span>
+							</Button>
+						</div>
+					</div>
+					<div class="creation-settings">
+						<StyledInput
+							v-model="name"
+							autocomplete="off"
+							type="text"
+							placeholder="Name"
+							class="creation-input"
+						/>
+						<Button :disabled="creatingInstance === true || !name" @click="createInstance()">
+							<RightArrowIcon />
+							{{ creatingInstance ? 'Creating...' : 'Create' }}
+						</Button>
+					</div>
+				</div>
+			</Card>
+			<div class="input-group push-right">
+				<Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+					<PlusIcon />
+					{{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+				</Button>
+				<Button @click="installModal.hide()">Cancel</Button>
+			</div>
+		</div>
+	</ModalWrapper>
 </template>

 <style scoped lang="scss">
 .creation-card {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 0;
-  background-color: var(--color-bg);
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 0;
+	background-color: var(--color-bg);
 }

 .creation-container {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
 }

 .creation-icon {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  align-items: center;
-  flex-grow: 1;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	align-items: center;
+	flex-grow: 1;

-  .creation-icon__description {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
+	.creation-icon__description {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
 }

 .creation-input {
-  width: 100%;
+	width: 100%;
 }

 .no-wrap {
-  white-space: nowrap;
+	white-space: nowrap;
 }

 .creation-dropdown {
-  width: min-content !important;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+	width: min-content !important;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
 }

 .creation-settings {
-  width: 100%;
-  margin-left: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  justify-content: center;
+	width: 100%;
+	margin-left: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
 }

 .modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 350px;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	min-width: 350px;
 }

 .profiles {
-  max-height: 12rem;
-  overflow-y: auto;
+	max-height: 12rem;
+	overflow-y: auto;

-  &.hide-creation {
-    max-height: 21rem;
-  }
+	&.hide-creation {
+		max-height: 21rem;
+	}
 }

 .option {
-  width: calc(100%);
-  background: var(--color-raised-bg);
-  color: var(--color-base);
-  box-shadow: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
+	width: calc(100%);
+	background: var(--color-raised-bg);
+	color: var(--color-base);
+	box-shadow: none;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 0.5rem;

-  img {
-    margin-right: 0.5rem;
-  }
+	img {
+		margin-right: 0.5rem;
+	}

-  .name {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
+	.name {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}

-  .profile-button {
-    align-content: start;
-    padding: 0.5rem;
-    text-align: left;
-  }
+	.profile-button {
+		align-content: start;
+		padding: 0.5rem;
+		text-align: left;
+	}
 }

 .profile-image {
-  --size: 2rem !important;
+	--size: 2rem !important;
 }
 </style>
@@ -1,17 +1,27 @@
 <script setup lang="ts">
+import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import {
+	Avatar,
+	ButtonStyled,
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	OverflowMenu,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { SpinnerIcon, TrashIcon, UploadIcon, PlusIcon, EditIcon, CopyIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, OverflowMenu, Checkbox } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { trackEvent } from '@/helpers/analytics'
 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 type { InstanceSettingsTabProps, GameInstance } from '../../../helpers/types'

+import ConfirmModalWrapper from '@/components/ui/modal/ConfirmModalWrapper.vue'
+import { trackEvent } from '@/helpers/analytics'
+import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+
+import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()

@@ -28,299 +38,297 @@ const newCategoryInput = ref('')
 const installing = computed(() => props.instance.install_stage !== 'installed')

 async function duplicateProfile() {
-  await duplicate(props.instance.path).catch(handleError)
-  trackEvent('InstanceDuplicate', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
+	await duplicate(props.instance.path).catch(handleError)
+	trackEvent('InstanceDuplicate', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})
 }

 const allInstances = ref((await list()) as GameInstance[])
 const availableGroups = computed(() => [
-  ...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
+	...new Set([...allInstances.value.flatMap((instance) => instance.groups), ...groups.value]),
 ])

 async function resetIcon() {
-  icon.value = undefined
-  await edit_icon(props.instance.path, null).catch(handleError)
-  trackEvent('InstanceRemoveIcon')
+	icon.value = undefined
+	await edit_icon(props.instance.path, null).catch(handleError)
+	trackEvent('InstanceRemoveIcon')
 }

 async function setIcon() {
-  const value = await open({
-    multiple: false,
-    filters: [
-      {
-        name: 'Image',
-        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
-      },
-    ],
-  })
+	const value = await open({
+		multiple: false,
+		filters: [
+			{
+				name: 'Image',
+				extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+			},
+		],
+	})

-  if (!value) return
+	if (!value) return

-  icon.value = value
-  await edit_icon(props.instance.path, icon.value).catch(handleError)
+	icon.value = value
+	await edit_icon(props.instance.path, icon.value).catch(handleError)

-  trackEvent('InstanceSetIcon')
+	trackEvent('InstanceSetIcon')
 }

 const editProfileObject = computed(() => ({
-  name: title.value.trim().substring(0, 32) ?? 'Instance',
-  groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
+	name: title.value.trim().substring(0, 32) ?? 'Instance',
+	groups: groups.value.map((x) => x.trim().substring(0, 32)).filter((x) => x.length > 0),
 }))

 const toggleGroup = (group: string) => {
-  if (groups.value.includes(group)) {
-    groups.value = groups.value.filter((x) => x !== group)
-  } else {
-    groups.value.push(group)
-  }
+	if (groups.value.includes(group)) {
+		groups.value = groups.value.filter((x) => x !== group)
+	} else {
+		groups.value.push(group)
+	}
 }

 const addCategory = () => {
-  const text = newCategoryInput.value.trim()
+	const text = newCategoryInput.value.trim()

-  if (text.length > 0) {
-    groups.value.push(text.substring(0, 32))
-    newCategoryInput.value = ''
-  }
+	if (text.length > 0) {
+		groups.value.push(text.substring(0, 32))
+		newCategoryInput.value = ''
+	}
 }

 watch(
-  [title, groups, groups],
-  async () => {
-    await edit(props.instance.path, editProfileObject.value)
-  },
-  { deep: true },
+	[title, groups, groups],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
 )

 const removing = ref(false)
 async function removeProfile() {
-  removing.value = true
-  await remove(props.instance.path).catch(handleError)
-  removing.value = false
+	removing.value = true
+	await remove(props.instance.path).catch(handleError)
+	removing.value = false

-  trackEvent('InstanceRemove', {
-    loader: props.instance.loader,
-    game_version: props.instance.game_version,
-  })
+	trackEvent('InstanceRemove', {
+		loader: props.instance.loader,
+		game_version: props.instance.game_version,
+	})

-  await router.push({ path: '/' })
+	await router.push({ path: '/' })
 }

 const messages = defineMessages({
-  name: {
-    id: 'instance.settings.tabs.general.name',
-    defaultMessage: 'Name',
-  },
-  libraryGroups: {
-    id: 'instance.settings.tabs.general.library-groups',
-    defaultMessage: 'Library groups',
-  },
-  libraryGroupsDescription: {
-    id: 'instance.settings.tabs.general.library-groups.description',
-    defaultMessage:
-      'Library groups allow you to organize your instances into different sections in your library.',
-  },
-  libraryGroupsEnterName: {
-    id: 'instance.settings.tabs.general.library-groups.enter-name',
-    defaultMessage: 'Enter group name',
-  },
-  libraryGroupsCreate: {
-    id: 'instance.settings.tabs.general.library-groups.create',
-    defaultMessage: 'Create new group',
-  },
-  editIcon: {
-    id: 'instance.settings.tabs.general.edit-icon',
-    defaultMessage: 'Edit icon',
-  },
-  selectIcon: {
-    id: 'instance.settings.tabs.general.edit-icon.select',
-    defaultMessage: 'Select icon',
-  },
-  replaceIcon: {
-    id: 'instance.settings.tabs.general.edit-icon.replace',
-    defaultMessage: 'Replace icon',
-  },
-  removeIcon: {
-    id: 'instance.settings.tabs.general.edit-icon.remove',
-    defaultMessage: 'Remove icon',
-  },
-  duplicateInstance: {
-    id: 'instance.settings.tabs.general.duplicate-instance',
-    defaultMessage: 'Duplicate instance',
-  },
-  duplicateInstanceDescription: {
-    id: 'instance.settings.tabs.general.duplicate-instance.description',
-    defaultMessage: 'Creates a copy of this instance, including worlds, configs, mods, etc.',
-  },
-  duplicateButtonTooltipInstalling: {
-    id: 'instance.settings.tabs.general.duplicate-button.tooltip.installing',
-    defaultMessage: 'Cannot duplicate while installing.',
-  },
-  duplicateButton: {
-    id: 'instance.settings.tabs.general.duplicate-button',
-    defaultMessage: 'Duplicate',
-  },
-  deleteInstance: {
-    id: 'instance.settings.tabs.general.delete',
-    defaultMessage: 'Delete instance',
-  },
-  deleteInstanceDescription: {
-    id: 'instance.settings.tabs.general.delete.description',
-    defaultMessage:
-      'Permanently deletes an instance from your device, including your worlds, configs, and all installed content. Be careful, as once you delete a instance there is no way to recover it.',
-  },
-  deleteInstanceButton: {
-    id: 'instance.settings.tabs.general.delete.button',
-    defaultMessage: 'Delete instance',
-  },
-  deletingInstanceButton: {
-    id: 'instance.settings.tabs.general.deleting.button',
-    defaultMessage: 'Deleting...',
-  },
+	name: {
+		id: 'instance.settings.tabs.general.name',
+		defaultMessage: 'Name',
+	},
+	libraryGroups: {
+		id: 'instance.settings.tabs.general.library-groups',
+		defaultMessage: 'Library groups',
+	},
+	libraryGroupsDescription: {
+		id: 'instance.settings.tabs.general.library-groups.description',
+		defaultMessage:
+			'Library groups allow you to organize your instances into different sections in your library.',
+	},
+	libraryGroupsEnterName: {
+		id: 'instance.settings.tabs.general.library-groups.enter-name',
+		defaultMessage: 'Enter group name',
+	},
+	libraryGroupsCreate: {
+		id: 'instance.settings.tabs.general.library-groups.create',
+		defaultMessage: 'Create new group',
+	},
+	editIcon: {
+		id: 'instance.settings.tabs.general.edit-icon',
+		defaultMessage: 'Edit icon',
+	},
+	selectIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.select',
+		defaultMessage: 'Select icon',
+	},
+	replaceIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.replace',
+		defaultMessage: 'Replace icon',
+	},
+	removeIcon: {
+		id: 'instance.settings.tabs.general.edit-icon.remove',
+		defaultMessage: 'Remove icon',
+	},
+	duplicateInstance: {
+		id: 'instance.settings.tabs.general.duplicate-instance',
+		defaultMessage: 'Duplicate instance',
+	},
+	duplicateInstanceDescription: {
+		id: 'instance.settings.tabs.general.duplicate-instance.description',
+		defaultMessage: 'Creates a copy of this instance, including worlds, configs, mods, etc.',
+	},
+	duplicateButtonTooltipInstalling: {
+		id: 'instance.settings.tabs.general.duplicate-button.tooltip.installing',
+		defaultMessage: 'Cannot duplicate while installing.',
+	},
+	duplicateButton: {
+		id: 'instance.settings.tabs.general.duplicate-button',
+		defaultMessage: 'Duplicate',
+	},
+	deleteInstance: {
+		id: 'instance.settings.tabs.general.delete',
+		defaultMessage: 'Delete instance',
+	},
+	deleteInstanceDescription: {
+		id: 'instance.settings.tabs.general.delete.description',
+		defaultMessage:
+			'Permanently deletes an instance from your device, including your worlds, configs, and all installed content. Be careful, as once you delete a instance there is no way to recover it.',
+	},
+	deleteInstanceButton: {
+		id: 'instance.settings.tabs.general.delete.button',
+		defaultMessage: 'Delete instance',
+	},
+	deletingInstanceButton: {
+		id: 'instance.settings.tabs.general.deleting.button',
+		defaultMessage: 'Deleting...',
+	},
 })
 </script>

 <template>
-  <ConfirmModalWrapper
-    ref="deleteConfirmModal"
-    title="Are you sure you want to delete this instance?"
-    description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
-    :has-to-type="false"
-    proceed-label="Delete"
-    :show-ad-on-close="false"
-    @proceed="removeProfile"
-  />
-  <div class="block">
-    <div class="float-end ml-4 relative group">
-      <OverflowMenu
-        v-tooltip="formatMessage(messages.editIcon)"
-        class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-        :options="[
-          {
-            id: 'select',
-            action: () => setIcon(),
-          },
-          {
-            id: 'remove',
-            color: 'danger',
-            action: () => resetIcon(),
-            shown: !!icon,
-          },
-        ]"
-      >
-        <Avatar
-          :src="icon ? convertFileSrc(icon) : icon"
-          size="108px"
-          class="!border-4 group-hover:brightness-75"
-          :tint-by="props.instance.path"
-          no-shadow
-        />
-        <div class="absolute top-0 right-0 m-2">
-          <div
-            class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
-          >
-            <EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-          </div>
-        </div>
-        <template #select>
-          <UploadIcon />
-          {{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-        </template>
-        <template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-      </OverflowMenu>
-    </div>
-    <label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.name) }}
-    </label>
-    <div class="flex">
-      <input
-        id="instance-name"
-        v-model="title"
-        autocomplete="off"
-        maxlength="80"
-        class="flex-grow"
-        type="text"
-      />
-    </div>
-    <template v-if="instance.install_stage == 'installed'">
-      <div>
-        <h2
-          id="duplicate-instance-label"
-          class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
-        >
-          {{ formatMessage(messages.duplicateInstance) }}
-        </h2>
-        <p class="m-0 mb-2">
-          {{ formatMessage(messages.duplicateInstanceDescription) }}
-        </p>
-      </div>
-      <ButtonStyled>
-        <button
-          v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-          aria-labelledby="duplicate-instance-label"
-          :disabled="installing"
-          @click="duplicateProfile"
-        >
-          <CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-        </button>
-      </ButtonStyled>
-    </template>
-    <h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.libraryGroups) }}
-    </h2>
-    <p class="m-0 mb-2">
-      {{ formatMessage(messages.libraryGroupsDescription) }}
-    </p>
-    <div class="flex flex-col gap-1">
-      <Checkbox
-        v-for="group in availableGroups"
-        :key="group"
-        :model-value="groups.includes(group)"
-        :label="group"
-        @click="toggleGroup(group)"
-      />
-      <div class="flex gap-2 items-center">
-        <input
-          v-model="newCategoryInput"
-          type="text"
-          :placeholder="formatMessage(messages.libraryGroupsEnterName)"
-          @submit="() => addCategory"
-        />
-        <ButtonStyled>
-          <button class="w-fit" @click="() => addCategory()">
-            <PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-    <h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.deleteInstance) }}
-    </h2>
-    <p class="m-0 mb-2">
-      {{ formatMessage(messages.deleteInstanceDescription) }}
-    </p>
-    <ButtonStyled color="red">
-      <button
-        aria-labelledby="delete-instance-label"
-        :disabled="removing"
-        @click="deleteConfirmModal.show()"
-      >
-        <SpinnerIcon v-if="removing" class="animate-spin" />
-        <TrashIcon v-else />
-        {{
-          removing
-            ? formatMessage(messages.deletingInstanceButton)
-            : formatMessage(messages.deleteInstanceButton)
-        }}
-      </button>
-    </ButtonStyled>
-  </div>
+	<ConfirmModalWrapper
+		ref="deleteConfirmModal"
+		title="Are you sure you want to delete this instance?"
+		description="If you proceed, all data for your instance will be permanently erased, including your worlds. You will not be able to recover it."
+		:has-to-type="false"
+		proceed-label="Delete"
+		:show-ad-on-close="false"
+		@proceed="removeProfile"
+	/>
+	<div class="block">
+		<div class="float-end ml-4 relative group">
+			<OverflowMenu
+				v-tooltip="formatMessage(messages.editIcon)"
+				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+				:options="[
+					{
+						id: 'select',
+						action: () => setIcon(),
+					},
+					{
+						id: 'remove',
+						color: 'danger',
+						action: () => resetIcon(),
+						shown: !!icon,
+					},
+				]"
+			>
+				<Avatar
+					:src="icon ? convertFileSrc(icon) : icon"
+					size="108px"
+					class="!border-4 group-hover:brightness-75"
+					:tint-by="props.instance.path"
+					no-shadow
+				/>
+				<div class="absolute top-0 right-0 m-2">
+					<div
+						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+					>
+						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+					</div>
+				</div>
+				<template #select>
+					<UploadIcon />
+					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+				</template>
+				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+			</OverflowMenu>
+		</div>
+		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.name) }}
+		</label>
+		<div class="flex">
+			<StyledInput
+				id="instance-name"
+				v-model="title"
+				autocomplete="off"
+				:maxlength="80"
+				wrapper-class="flex-grow"
+			/>
+		</div>
+		<template v-if="instance.install_stage == 'installed'">
+			<div>
+				<h2
+					id="duplicate-instance-label"
+					class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block"
+				>
+					{{ formatMessage(messages.duplicateInstance) }}
+				</h2>
+				<p class="m-0 mb-2">
+					{{ formatMessage(messages.duplicateInstanceDescription) }}
+				</p>
+			</div>
+			<ButtonStyled>
+				<button
+					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+					aria-labelledby="duplicate-instance-label"
+					:disabled="installing"
+					@click="duplicateProfile"
+				>
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+				</button>
+			</ButtonStyled>
+		</template>
+		<h2 class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.libraryGroups) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.libraryGroupsDescription) }}
+		</p>
+		<div class="flex flex-col gap-1">
+			<Checkbox
+				v-for="group in availableGroups"
+				:key="group"
+				:model-value="groups.includes(group)"
+				:label="group"
+				@click="toggleGroup(group)"
+			/>
+			<div class="flex gap-2 items-center">
+				<StyledInput
+					v-model="newCategoryInput"
+					:placeholder="formatMessage(messages.libraryGroupsEnterName)"
+					@submit="() => addCategory"
+				/>
+				<ButtonStyled>
+					<button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+		<h2 id="delete-instance-label" class="m-0 mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.deleteInstance) }}
+		</h2>
+		<p class="m-0 mb-2">
+			{{ formatMessage(messages.deleteInstanceDescription) }}
+		</p>
+		<ButtonStyled color="red">
+			<button
+				aria-labelledby="delete-instance-label"
+				:disabled="removing"
+				@click="deleteConfirmModal.show()"
+			>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</button>
+		</ButtonStyled>
+	</div>
 </template>
 <style scoped lang="scss">
 .hovering-icon-shadow {
-  box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
+	box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
 }
 </style>
@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { Checkbox } from '@modrinth/ui'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
-import { edit } from '@/helpers/profile'
-import type { InstanceSettingsTabProps, AppSettings, Hooks } from '../../../helpers/types'

+import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

 const props = defineProps<InstanceSettingsTabProps>()
@@ -14,139 +21,136 @@ const props = defineProps<InstanceSettingsTabProps>()
 const globalSettings = (await get().catch(handleError)) as AppSettings

 const overrideHooks = ref(
-  !!props.instance.hooks.pre_launch ||
-    !!props.instance.hooks.wrapper ||
-    !!props.instance.hooks.post_exit,
+	!!props.instance.hooks.pre_launch ||
+		!!props.instance.hooks.wrapper ||
+		!!props.instance.hooks.post_exit,
 )
 const hooks = ref(props.instance.hooks ?? globalSettings.hooks)

 const editProfileObject = computed(() => {
-  const editProfile: {
-    hooks?: Hooks
-  } = {}
+	const editProfile: {
+		hooks?: Hooks
+	} = {}

-  // When hooks are not overridden per-instance, we want to clear them
-  editProfile.hooks = overrideHooks.value ? hooks.value : {}
+	// When hooks are not overridden per-instance, we want to clear them
+	editProfile.hooks = overrideHooks.value ? hooks.value : {}

-  return editProfile
+	return editProfile
 })

 watch(
-  [overrideHooks, hooks],
-  async () => {
-    await edit(props.instance.path, editProfileObject.value)
-  },
-  { deep: true },
+	[overrideHooks, hooks],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
 )
 const messages = defineMessages({
-  hooks: {
-    id: 'instance.settings.tabs.hooks.title',
-    defaultMessage: 'Game launch hooks',
-  },
-  hooksDescription: {
-    id: 'instance.settings.tabs.hooks.description',
-    defaultMessage:
-      'Hooks allow advanced users to run certain system commands before and after launching the game.',
-  },
-  customHooks: {
-    id: 'instance.settings.tabs.hooks.custom-hooks',
-    defaultMessage: 'Custom launch hooks',
-  },
-  preLaunch: {
-    id: 'instance.settings.tabs.hooks.pre-launch',
-    defaultMessage: 'Pre-launch',
-  },
-  preLaunchDescription: {
-    id: 'instance.settings.tabs.hooks.pre-launch.description',
-    defaultMessage: 'Ran before the instance is launched.',
-  },
-  preLaunchEnter: {
-    id: 'instance.settings.tabs.hooks.pre-launch.enter',
-    defaultMessage: 'Enter pre-launch command...',
-  },
-  wrapper: {
-    id: 'instance.settings.tabs.hooks.wrapper',
-    defaultMessage: 'Wrapper',
-  },
-  wrapperDescription: {
-    id: 'instance.settings.tabs.hooks.wrapper.description',
-    defaultMessage: 'Wrapper command for launching Minecraft.',
-  },
-  wrapperEnter: {
-    id: 'instance.settings.tabs.hooks.wrapper.enter',
-    defaultMessage: 'Enter wrapper command...',
-  },
-  postExit: {
-    id: 'instance.settings.tabs.hooks.post-exit',
-    defaultMessage: 'Post-exit',
-  },
-  postExitDescription: {
-    id: 'instance.settings.tabs.hooks.post-exit.description',
-    defaultMessage: 'Ran after the game closes.',
-  },
-  postExitEnter: {
-    id: 'instance.settings.tabs.hooks.post-exit.enter',
-    defaultMessage: 'Enter post-exit command...',
-  },
+	hooks: {
+		id: 'instance.settings.tabs.hooks.title',
+		defaultMessage: 'Game launch hooks',
+	},
+	hooksDescription: {
+		id: 'instance.settings.tabs.hooks.description',
+		defaultMessage:
+			'Hooks allow advanced users to run certain system commands before and after launching the game.',
+	},
+	customHooks: {
+		id: 'instance.settings.tabs.hooks.custom-hooks',
+		defaultMessage: 'Custom launch hooks',
+	},
+	preLaunch: {
+		id: 'instance.settings.tabs.hooks.pre-launch',
+		defaultMessage: 'Pre-launch',
+	},
+	preLaunchDescription: {
+		id: 'instance.settings.tabs.hooks.pre-launch.description',
+		defaultMessage: 'Ran before the instance is launched.',
+	},
+	preLaunchEnter: {
+		id: 'instance.settings.tabs.hooks.pre-launch.enter',
+		defaultMessage: 'Enter pre-launch command...',
+	},
+	wrapper: {
+		id: 'instance.settings.tabs.hooks.wrapper',
+		defaultMessage: 'Wrapper',
+	},
+	wrapperDescription: {
+		id: 'instance.settings.tabs.hooks.wrapper.description',
+		defaultMessage: 'Wrapper command for launching Minecraft.',
+	},
+	wrapperEnter: {
+		id: 'instance.settings.tabs.hooks.wrapper.enter',
+		defaultMessage: 'Enter wrapper command...',
+	},
+	postExit: {
+		id: 'instance.settings.tabs.hooks.post-exit',
+		defaultMessage: 'Post-exit',
+	},
+	postExitDescription: {
+		id: 'instance.settings.tabs.hooks.post-exit.description',
+		defaultMessage: 'Ran after the game closes.',
+	},
+	postExitEnter: {
+		id: 'instance.settings.tabs.hooks.post-exit.enter',
+		defaultMessage: 'Enter post-exit command...',
+	},
 })
 </script>

 <template>
-  <div>
-    <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
-      {{ formatMessage(messages.hooks) }}
-    </h2>
-    <p class="m-0">
-      {{ formatMessage(messages.hooksDescription) }}
-    </p>
-    <Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />
+	<div>
+		<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+			{{ formatMessage(messages.hooks) }}
+		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.hooksDescription) }}
+		</p>
+		<Checkbox v-model="overrideHooks" :label="formatMessage(messages.customHooks)" class="mt-2" />

-    <h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
-      {{ formatMessage(messages.preLaunch) }}
-    </h2>
-    <p class="m-0">
-      {{ formatMessage(messages.preLaunchDescription) }}
-    </p>
-    <input
-      id="pre-launch"
-      v-model="hooks.pre_launch"
-      autocomplete="off"
-      :disabled="!overrideHooks"
-      type="text"
-      :placeholder="formatMessage(messages.preLaunchEnter)"
-      class="w-full mt-2"
-    />
+		<h2 class="mt-2 mb-1 text-lg font-extrabold text-contrast">
+			{{ formatMessage(messages.preLaunch) }}
+		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.preLaunchDescription) }}
+		</p>
+		<StyledInput
+			id="pre-launch"
+			v-model="hooks.pre_launch"
+			autocomplete="off"
+			:disabled="!overrideHooks"
+			:placeholder="formatMessage(messages.preLaunchEnter)"
+			wrapper-class="w-full mt-2"
+		/>

-    <h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
-      {{ formatMessage(messages.wrapper) }}
-    </h2>
-    <p class="m-0">
-      {{ formatMessage(messages.wrapperDescription) }}
-    </p>
-    <input
-      id="wrapper"
-      v-model="hooks.wrapper"
-      autocomplete="off"
-      :disabled="!overrideHooks"
-      type="text"
-      :placeholder="formatMessage(messages.wrapperEnter)"
-      class="w-full mt-2"
-    />
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+			{{ formatMessage(messages.wrapper) }}
+		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.wrapperDescription) }}
+		</p>
+		<StyledInput
+			id="wrapper"
+			v-model="hooks.wrapper"
+			autocomplete="off"
+			:disabled="!overrideHooks"
+			:placeholder="formatMessage(messages.wrapperEnter)"
+			wrapper-class="w-full mt-2"
+		/>

-    <h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
-      {{ formatMessage(messages.postExit) }}
-    </h2>
-    <p class="m-0">
-      {{ formatMessage(messages.postExitDescription) }}
-    </p>
-    <input
-      id="post-exit"
-      v-model="hooks.post_exit"
-      autocomplete="off"
-      :disabled="!overrideHooks"
-      type="text"
-      :placeholder="formatMessage(messages.postExitEnter)"
-      class="w-full mt-2"
-    />
-  </div>
+		<h2 class="mt-4 mb-1 text-lg font-extrabold text-contrast">
+			{{ formatMessage(messages.postExit) }}
+		</h2>
+		<p class="m-0">
+			{{ formatMessage(messages.postExitDescription) }}
+		</p>
+		<StyledInput
+			id="post-exit"
+			v-model="hooks.post_exit"
+			autocomplete="off"
+			:disabled="!overrideHooks"
+			:placeholder="formatMessage(messages.postExitEnter)"
+			wrapper-class="w-full mt-2"
+		/>
+	</div>
 </template>
@@ -1,188 +1,186 @@
 <script setup lang="ts">
-import { Checkbox, Slider } from '@modrinth/ui'
 import { CheckCircleIcon, XCircleIcon } from '@modrinth/assets'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	Slider,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, readonly, ref, watch } from 'vue'
-import { edit, get_optimal_jre_key } from '@/helpers/profile'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import JavaSelector from '@/components/ui/JavaSelector.vue'
-import { get_max_memory } from '@/helpers/jre'
-import { get } from '@/helpers/settings.ts'
-import type { InstanceSettingsTabProps, AppSettings, MemorySettings } from '../../../helpers/types'

+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import useMemorySlider from '@/composables/useMemorySlider'
+import { edit, get_optimal_jre_key } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
+import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+
+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

 const props = defineProps<InstanceSettingsTabProps>()

-const globalSettings = (await get().catch(handleError)) as AppSettings
+const globalSettings = (await get().catch(handleError)) as unknown as AppSettings

 const overrideJavaInstall = ref(!!props.instance.java_path)
 const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
 const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })

-const overrideJavaArgs = ref(props.instance.extra_launch_args?.length !== undefined)
+const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
 const javaArgs = ref(
-  (props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
+	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
 )

-const overrideEnvVars = ref(props.instance.custom_env_vars?.length !== undefined)
+const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
 const envVars = ref(
-  (props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
-    .map((x) => x.join('='))
-    .join(' '),
+	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
+		.map((x) => x.join('='))
+		.join(' '),
 )

 const overrideMemorySettings = ref(!!props.instance.memory)
 const memory = ref(props.instance.memory ?? globalSettings.memory)
-const maxMemory = Math.floor((await get_max_memory().catch(handleError)) / 1024)
+const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
+	maxMemory: number
+	snapPoints: number[]
+}

 const editProfileObject = computed(() => {
-  const editProfile: {
-    java_path?: string
-    extra_launch_args?: string[]
-    custom_env_vars?: string[][]
-    memory?: MemorySettings
-  } = {}
-
-  if (overrideJavaInstall.value) {
-    if (javaInstall.value.path !== '') {
-      editProfile.java_path = javaInstall.value.path.replace('java.exe', 'javaw.exe')
-    }
-  }
-
-  if (overrideJavaArgs.value) {
-    editProfile.extra_launch_args = javaArgs.value.trim().split(/\s+/).filter(Boolean)
-  }
-
-  if (overrideEnvVars.value) {
-    editProfile.custom_env_vars = envVars.value
-      .trim()
-      .split(/\s+/)
-      .filter(Boolean)
-      .map((x) => x.split('=').filter(Boolean))
-  }
-
-  if (overrideMemorySettings.value) {
-    editProfile.memory = memory.value
-  }
-
-  return editProfile
+	return {
+		java_path:
+			overrideJavaInstall.value && javaInstall.value.path !== ''
+				? javaInstall.value.path.replace('java.exe', 'javaw.exe')
+				: null,
+		extra_launch_args: overrideJavaArgs.value
+			? javaArgs.value.trim().split(/\s+/).filter(Boolean)
+			: null,
+		custom_env_vars: overrideEnvVars.value
+			? envVars.value
+					.trim()
+					.split(/\s+/)
+					.filter(Boolean)
+					.map((x) => x.split('=').filter(Boolean))
+			: null,
+		memory: overrideMemorySettings.value ? memory.value : null,
+	}
 })

 watch(
-  [
-    overrideJavaInstall,
-    javaInstall,
-    overrideJavaArgs,
-    javaArgs,
-    overrideEnvVars,
-    envVars,
-    overrideMemorySettings,
-    memory,
-  ],
-  async () => {
-    await edit(props.instance.path, editProfileObject.value)
-  },
-  { deep: true },
+	[
+		overrideJavaInstall,
+		javaInstall,
+		overrideJavaArgs,
+		javaArgs,
+		overrideEnvVars,
+		envVars,
+		overrideMemorySettings,
+		memory,
+	],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
 )

 const messages = defineMessages({
-  javaInstallation: {
-    id: 'instance.settings.tabs.java.java-installation',
-    defaultMessage: 'Java installation',
-  },
-  javaArguments: {
-    id: 'instance.settings.tabs.java.java-arguments',
-    defaultMessage: 'Java arguments',
-  },
-  javaEnvironmentVariables: {
-    id: 'instance.settings.tabs.java.environment-variables',
-    defaultMessage: 'Environment variables',
-  },
-  javaMemory: {
-    id: 'instance.settings.tabs.java.java-memory',
-    defaultMessage: 'Memory allocated',
-  },
-  hooks: {
-    id: 'instance.settings.tabs.java.hooks',
-    defaultMessage: 'Hooks',
-  },
+	javaInstallation: {
+		id: 'instance.settings.tabs.java.java-installation',
+		defaultMessage: 'Java installation',
+	},
+	javaArguments: {
+		id: 'instance.settings.tabs.java.java-arguments',
+		defaultMessage: 'Java arguments',
+	},
+	javaEnvironmentVariables: {
+		id: 'instance.settings.tabs.java.environment-variables',
+		defaultMessage: 'Environment variables',
+	},
+	javaMemory: {
+		id: 'instance.settings.tabs.java.java-memory',
+		defaultMessage: 'Memory allocated',
+	},
+	hooks: {
+		id: 'instance.settings.tabs.java.hooks',
+		defaultMessage: 'Hooks',
+	},
 })
 </script>

 <template>
-  <div>
-    <h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.javaInstallation) }}
-    </h2>
-    <Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
-    <template v-if="!overrideJavaInstall">
-      <div class="flex my-2 items-center gap-2 font-semibold">
-        <template v-if="javaInstall">
-          <CheckCircleIcon class="text-brand-green h-4 w-4" />
-          <span>Using default Java {{ optimalJava.major_version }} installation:</span>
-        </template>
-        <template v-else-if="optimalJava">
-          <XCircleIcon class="text-brand-red h-5 w-5" />
-          <span
-            >Could not find a default Java {{ optimalJava.major_version }} installation. Please set
-            one below:</span
-          >
-        </template>
-        <template v-else>
-          <XCircleIcon class="text-brand-red h-5 w-5" />
-          <span
-            >Could not automatically determine a Java installation to use. Please set one
-            below:</span
-          >
-        </template>
-      </div>
-      <div
-        v-if="javaInstall && !overrideJavaInstall"
-        class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
-      >
-        {{ javaInstall.path }}
-      </div>
-    </template>
-    <JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
-    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.javaMemory) }}
-    </h2>
-    <Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
-    <Slider
-      id="max-memory"
-      v-model="memory.maximum"
-      :disabled="!overrideMemorySettings"
-      :min="512"
-      :max="maxMemory"
-      :step="64"
-      unit="MB"
-    />
-    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.javaArguments) }}
-    </h2>
-    <Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
-    <input
-      id="java-args"
-      v-model="javaArgs"
-      autocomplete="off"
-      :disabled="!overrideJavaArgs"
-      type="text"
-      class="w-full"
-      placeholder="Enter java arguments..."
-    />
-    <h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
-      {{ formatMessage(messages.javaEnvironmentVariables) }}
-    </h2>
-    <Checkbox v-model="overrideEnvVars" label="Custom environment variables" class="mb-2" />
-    <input
-      id="env-vars"
-      v-model="envVars"
-      autocomplete="off"
-      :disabled="!overrideEnvVars"
-      type="text"
-      class="w-full"
-      placeholder="Enter environmental variables..."
-    />
-  </div>
+	<div>
+		<h2 id="project-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaInstallation) }}
+		</h2>
+		<Checkbox v-model="overrideJavaInstall" label="Custom Java installation" class="mb-2" />
+		<template v-if="!overrideJavaInstall">
+			<div class="flex my-2 items-center gap-2 font-semibold">
+				<template v-if="javaInstall">
+					<CheckCircleIcon class="text-brand-green h-4 w-4" />
+					<span>Using default Java {{ optimalJava.major_version }} installation:</span>
+				</template>
+				<template v-else-if="optimalJava">
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not find a default Java {{ optimalJava.major_version }} installation. Please set
+						one below:</span
+					>
+				</template>
+				<template v-else>
+					<XCircleIcon class="text-brand-red h-5 w-5" />
+					<span
+						>Could not automatically determine a Java installation to use. Please set one
+						below:</span
+					>
+				</template>
+			</div>
+			<div
+				v-if="javaInstall && !overrideJavaInstall"
+				class="p-4 bg-bg rounded-xl text-xs text-secondary leading-none font-mono"
+			>
+				{{ javaInstall.path }}
+			</div>
+		</template>
+		<JavaSelector v-if="overrideJavaInstall || !javaInstall" v-model="javaInstall" />
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaMemory) }}
+		</h2>
+		<Checkbox v-model="overrideMemorySettings" label="Custom memory allocation" class="mb-2" />
+		<Slider
+			id="max-memory"
+			v-model="memory.maximum"
+			:disabled="!overrideMemorySettings"
+			:min="512"
+			:max="maxMemory"
+			:step="64"
+			:snap-points="snapPoints"
+			:snap-range="512"
+			unit="MB"
+		/>
+		<h2 id="project-name" class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+			{{ formatMessage(messages.javaArguments) }}
+		</h2>
+		<Checkbox v-model="overrideJavaArgs" label="Custom java arguments" class="my-2" />
+		<StyledInput
+			id="java-args"
+			v-model="javaArgs"
+			autocomplete="off"
+			:disabled="!overrideJavaArgs"
+			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" />
+		<StyledInput
+			id="env-vars"
+			v-model="envVars"
+			autocomplete="off"
+			:disabled="!overrideEnvVars"
+			placeholder="Enter environmental variables..."
+			wrapper-class="w-full"
+		/>
+	</div>
 </template>
@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import { Checkbox, Toggle } from '@modrinth/ui'
-import { computed, ref, type Ref, watch } from 'vue'
-import { handleError } from '@/store/notifications'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import { get } from '@/helpers/settings.ts'
+import {
+	Checkbox,
+	defineMessages,
+	injectNotificationManager,
+	StyledInput,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, type Ref, ref, watch } from 'vue'
+
 import { edit } from '@/helpers/profile'
+import { get } from '@/helpers/settings.ts'
+
 import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'

+const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()

 const props = defineProps<InstanceSettingsTabProps>()
@@ -14,151 +22,139 @@ const props = defineProps<InstanceSettingsTabProps>()
 const globalSettings = (await get().catch(handleError)) as AppSettings

 const overrideWindowSettings = ref(
-  !!props.instance.game_resolution || !!props.instance.force_fullscreen,
+	!!props.instance.game_resolution || !!props.instance.force_fullscreen,
 )
 const resolution: Ref<[number, number]> = ref(
-  props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
+	props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
 )
 const fullscreenSetting: Ref<boolean> = ref(
-  props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
+	props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
 )

 const editProfileObject = computed(() => {
-  const editProfile: {
-    force_fullscreen?: boolean
-    game_resolution?: [number, number]
-  } = {}
-
-  if (overrideWindowSettings.value) {
-    editProfile.force_fullscreen = fullscreenSetting.value
-
-    if (!fullscreenSetting.value) {
-      editProfile.game_resolution = resolution.value
-    }
-  }
-
-  return editProfile
+	if (!overrideWindowSettings.value) {
+		return {
+			force_fullscreen: null,
+			game_resolution: null,
+		}
+	}
+	return {
+		force_fullscreen: fullscreenSetting.value,
+		game_resolution: fullscreenSetting.value ? null : resolution.value,
+	}
 })

 watch(
-  [overrideWindowSettings, resolution, fullscreenSetting],
-  async () => {
-    await edit(props.instance.path, editProfileObject.value)
-  },
-  { deep: true },
+	[overrideWindowSettings, resolution, fullscreenSetting],
+	async () => {
+		await edit(props.instance.path, editProfileObject.value)
+	},
+	{ deep: true },
 )

 const messages = defineMessages({
-  customWindowSettings: {
-    id: 'instance.settings.tabs.window.custom-window-settings',
-    defaultMessage: 'Custom window settings',
-  },
-  fullscreen: {
-    id: 'instance.settings.tabs.window.fullscreen',
-    defaultMessage: 'Fullscreen',
-  },
-  fullscreenDescription: {
-    id: 'instance.settings.tabs.window.fullscreen.description',
-    defaultMessage: 'Make the game start in full screen when launched (using options.txt).',
-  },
-  width: {
-    id: 'instance.settings.tabs.window.width',
-    defaultMessage: 'Width',
-  },
-  widthDescription: {
-    id: 'instance.settings.tabs.window.width.description',
-    defaultMessage: 'The width of the game window when launched.',
-  },
-  enterWidth: {
-    id: 'instance.settings.tabs.window.width.enter',
-    defaultMessage: 'Enter width...',
-  },
-  height: {
-    id: 'instance.settings.tabs.window.height',
-    defaultMessage: 'Height',
-  },
-  heightDescription: {
-    id: 'instance.settings.tabs.window.height.description',
-    defaultMessage: 'The height of the game window when launched.',
-  },
-  enterHeight: {
-    id: 'instance.settings.tabs.window.height.enter',
-    defaultMessage: 'Enter height...',
-  },
+	customWindowSettings: {
+		id: 'instance.settings.tabs.window.custom-window-settings',
+		defaultMessage: 'Custom window settings',
+	},
+	fullscreen: {
+		id: 'instance.settings.tabs.window.fullscreen',
+		defaultMessage: 'Fullscreen',
+	},
+	fullscreenDescription: {
+		id: 'instance.settings.tabs.window.fullscreen.description',
+		defaultMessage: 'Make the game start in full screen when launched (using options.txt).',
+	},
+	width: {
+		id: 'instance.settings.tabs.window.width',
+		defaultMessage: 'Width',
+	},
+	widthDescription: {
+		id: 'instance.settings.tabs.window.width.description',
+		defaultMessage: 'The width of the game window when launched.',
+	},
+	enterWidth: {
+		id: 'instance.settings.tabs.window.width.enter',
+		defaultMessage: 'Enter width...',
+	},
+	height: {
+		id: 'instance.settings.tabs.window.height',
+		defaultMessage: 'Height',
+	},
+	heightDescription: {
+		id: 'instance.settings.tabs.window.height.description',
+		defaultMessage: 'The height of the game window when launched.',
+	},
+	enterHeight: {
+		id: 'instance.settings.tabs.window.height.enter',
+		defaultMessage: 'Enter height...',
+	},
 })
 </script>

 <template>
-  <div>
-    <Checkbox
-      v-model="overrideWindowSettings"
-      :label="formatMessage(messages.customWindowSettings)"
-      @update:model-value="
-        (value) => {
-          if (!value) {
-            resolution = globalSettings.game_resolution
-            fullscreenSetting = globalSettings.force_fullscreen
-          }
-        }
-      "
-    />
-    <div class="mt-2 flex items-center gap-4 justify-between">
-      <div>
-        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
-          {{ formatMessage(messages.fullscreen) }}
-        </h2>
-        <p class="m-0">
-          {{ formatMessage(messages.fullscreenDescription) }}
-        </p>
-      </div>
-      <Toggle
-        id="fullscreen"
-        :model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
-        :disabled="!overrideWindowSettings"
-        @update:model-value="
-          (e) => {
-            fullscreenSetting = e
-          }
-        "
-      />
-    </div>
+	<div>
+		<Checkbox
+			v-model="overrideWindowSettings"
+			:label="formatMessage(messages.customWindowSettings)"
+		/>
+		<div class="mt-2 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+					{{ formatMessage(messages.fullscreen) }}
+				</h2>
+				<p class="m-0">
+					{{ formatMessage(messages.fullscreenDescription) }}
+				</p>
+			</div>
+			<Toggle
+				id="fullscreen"
+				:model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
+				:disabled="!overrideWindowSettings"
+				@update:model-value="
+					(e) => {
+						fullscreenSetting = e
+					}
+				"
+			/>
+		</div>

-    <div class="mt-4 flex items-center gap-4 justify-between">
-      <div>
-        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
-          {{ formatMessage(messages.width) }}
-        </h2>
-        <p class="m-0">
-          {{ formatMessage(messages.widthDescription) }}
-        </p>
-      </div>
-      <input
-        id="width"
-        v-model="resolution[0]"
-        autocomplete="off"
-        :disabled="!overrideWindowSettings || fullscreenSetting"
-        type="number"
-        :placeholder="formatMessage(messages.enterWidth)"
-      />
-    </div>
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+					{{ formatMessage(messages.width) }}
+				</h2>
+				<p class="m-0">
+					{{ formatMessage(messages.widthDescription) }}
+				</p>
+			</div>
+			<StyledInput
+				id="width"
+				v-model="resolution[0]"
+				autocomplete="off"
+				:disabled="!overrideWindowSettings || fullscreenSetting"
+				type="number"
+				:placeholder="formatMessage(messages.enterWidth)"
+			/>
+		</div>

-    <div class="mt-4 flex items-center gap-4 justify-between">
-      <div>
-        <h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
-          {{ formatMessage(messages.height) }}
-        </h2>
-        <p class="m-0">
-          {{ formatMessage(messages.heightDescription) }}
-        </p>
-      </div>
-      <input
-        id="height"
-        v-model="resolution[1]"
-        autocomplete="off"
-        :disabled="!overrideWindowSettings || fullscreenSetting"
-        type="number"
-        :placeholder="formatMessage(messages.enterHeight)"
-      />
-    </div>
-  </div>
+		<div class="mt-4 flex items-center gap-4 justify-between">
+			<div>
+				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
+					{{ formatMessage(messages.height) }}
+				</h2>
+				<p class="m-0">
+					{{ formatMessage(messages.heightDescription) }}
+				</p>
+			</div>
+			<StyledInput
+				id="height"
+				v-model="resolution[1]"
+				autocomplete="off"
+				:disabled="!overrideWindowSettings || fullscreenSetting"
+				type="number"
+				:placeholder="formatMessage(messages.enterHeight)"
+			/>
+		</div>
+	</div>
 </template>
@@ -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>
@@ -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',
+		],
+	},
+]
@@ -1,28 +1,38 @@
 <script setup lang="ts">
 import {
-  ReportIcon,
-  ModrinthIcon,
-  ShieldIcon,
-  SettingsIcon,
-  GaugeIcon,
-  PaintbrushIcon,
-  GameIcon,
-  CoffeeIcon,
+	CoffeeIcon,
+	GameIcon,
+	GaugeIcon,
+	LanguagesIcon,
+	ModrinthIcon,
+	PaintbrushIcon,
+	ReportIcon,
+	SettingsIcon,
+	ShieldIcon,
 } from '@modrinth/assets'
-import { TabbedModal } from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
-import { useVIntl, defineMessage } from '@vintl/vintl'
-import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
-import JavaSettings from '@/components/ui/settings/JavaSettings.vue'
-import ResourceManagementSettings from '@/components/ui/settings/ResourceManagementSettings.vue'
-import PrivacySettings from '@/components/ui/settings/PrivacySettings.vue'
-import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
+import {
+	commonMessages,
+	defineMessage,
+	defineMessages,
+	ProgressBar,
+	TabbedModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { getVersion } from '@tauri-apps/api/app'
-import { version as getOsVersion, platform as getOsPlatform } from '@tauri-apps/plugin-os'
-import { useTheming } from '@/store/state'
-import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+import { platform as getOsPlatform, version as getOsVersion } from '@tauri-apps/plugin-os'
+import { computed, ref, watch } from 'vue'
+
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import AppearanceSettings from '@/components/ui/settings/AppearanceSettings.vue'
+import DefaultInstanceSettings from '@/components/ui/settings/DefaultInstanceSettings.vue'
+import FeatureFlagSettings from '@/components/ui/settings/FeatureFlagSettings.vue'
+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'
+import { injectAppUpdateDownloadProgress } from '@/providers/download-progress.ts'
+import { useTheming } from '@/store/state'

 const themeStore = useTheming()

@@ -31,131 +41,160 @@ const { formatMessage } = useVIntl()
 const devModeCounter = ref(0)

 const developerModeEnabled = defineMessage({
-  id: 'app.settings.developer-mode-enabled',
-  defaultMessage: 'Developer mode enabled.',
+	id: 'app.settings.developer-mode-enabled',
+	defaultMessage: 'Developer mode enabled.',
 })

 const tabs = [
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.appearance',
-      defaultMessage: 'Appearance',
-    }),
-    icon: PaintbrushIcon,
-    content: AppearanceSettings,
-  },
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.privacy',
-      defaultMessage: 'Privacy',
-    }),
-    icon: ShieldIcon,
-    content: PrivacySettings,
-  },
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.java-installations',
-      defaultMessage: 'Java installations',
-    }),
-    icon: CoffeeIcon,
-    content: JavaSettings,
-  },
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.default-instance-options',
-      defaultMessage: 'Default instance options',
-    }),
-    icon: GameIcon,
-    content: DefaultInstanceSettings,
-  },
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.resource-management',
-      defaultMessage: 'Resource management',
-    }),
-    icon: GaugeIcon,
-    content: ResourceManagementSettings,
-  },
-  {
-    name: defineMessage({
-      id: 'app.settings.tabs.feature-flags',
-      defaultMessage: 'Feature flags',
-    }),
-    icon: ReportIcon,
-    content: FeatureFlagSettings,
-    developerOnly: true,
-  },
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.appearance',
+			defaultMessage: 'Appearance',
+		}),
+		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',
+			defaultMessage: 'Privacy',
+		}),
+		icon: ShieldIcon,
+		content: PrivacySettings,
+	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.java-installations',
+			defaultMessage: 'Java installations',
+		}),
+		icon: CoffeeIcon,
+		content: JavaSettings,
+	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.default-instance-options',
+			defaultMessage: 'Default instance options',
+		}),
+		icon: GameIcon,
+		content: DefaultInstanceSettings,
+	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.resource-management',
+			defaultMessage: 'Resource management',
+		}),
+		icon: GaugeIcon,
+		content: ResourceManagementSettings,
+	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.feature-flags',
+			defaultMessage: 'Feature flags',
+		}),
+		icon: ReportIcon,
+		content: FeatureFlagSettings,
+		developerOnly: true,
+	},
 ]

 const modal = ref()

 function show() {
-  modal.value.show()
+	modal.value.show()
 }

 const isOpen = computed(() => modal.value?.isOpen)

 defineExpose({ show, isOpen })

+const { progress, version: downloadingVersion } = injectAppUpdateDownloadProgress()
+
 const version = await getVersion()
 const osPlatform = getOsPlatform()
 const osVersion = getOsVersion()
 const settings = ref(await get())

 watch(
-  settings,
-  async () => {
-    await set(settings.value)
-  },
-  { deep: true },
+	settings,
+	async () => {
+		await set(settings.value)
+	},
+	{ deep: true },
 )

 function devModeCount() {
-  devModeCounter.value++
-  if (devModeCounter.value > 5) {
-    themeStore.devMode = !themeStore.devMode
-    settings.value.developer_mode = !!themeStore.devMode
-    devModeCounter.value = 0
+	devModeCounter.value++
+	if (devModeCounter.value > 5) {
+		themeStore.devMode = !themeStore.devMode
+		settings.value.developer_mode = !!themeStore.devMode
+		devModeCounter.value = 0

-    if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
-      modal.value.setTab(0)
-    }
-  }
+		if (!themeStore.devMode && tabs[modal.value.selectedTab].developerOnly) {
+			modal.value.setTab(0)
+		}
+	}
 }
+
+const messages = defineMessages({
+	downloading: {
+		id: 'app.settings.downloading',
+		defaultMessage: 'Downloading v{version}',
+	},
+})
 </script>
 <template>
-  <ModalWrapper ref="modal">
-    <template #title>
-      <span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
-        <SettingsIcon /> Settings
-      </span>
-    </template>
+	<ModalWrapper ref="modal">
+		<template #title>
+			<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
+				<SettingsIcon /> Settings
+			</span>
+		</template>

-    <TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
-      <template #footer>
-        <div class="mt-auto text-secondary text-sm">
-          <p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
-            {{ formatMessage(developerModeEnabled) }}
-          </p>
-          <div class="flex items-center gap-3">
-            <button
-              class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
-              :class="{ 'text-brand': themeStore.devMode, 'text-secondary': !themeStore.devMode }"
-              @click="devModeCount"
-            >
-              <ModrinthIcon class="w-6 h-6" />
-            </button>
-            <div>
-              <p class="m-0">Modrinth App {{ version }}</p>
-              <p class="m-0">
-                <span v-if="osPlatform === 'macos'">MacOS</span>
-                <span v-else class="capitalize">{{ osPlatform }}</span>
-                {{ osVersion }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </TabbedModal>
-  </ModalWrapper>
+		<TabbedModal :tabs="tabs.filter((t) => !t.developerOnly || themeStore.devMode)">
+			<template #footer>
+				<div class="mt-auto text-secondary text-sm">
+					<div class="mb-3">
+						<template v-if="progress > 0 && progress < 1">
+							<p class="m-0 mb-2">
+								{{ formatMessage(messages.downloading, { version: downloadingVersion }) }}
+							</p>
+							<ProgressBar :progress="progress" />
+						</template>
+					</div>
+					<p v-if="themeStore.devMode" class="text-brand font-semibold m-0 mb-2">
+						{{ formatMessage(developerModeEnabled) }}
+					</p>
+					<div class="flex items-center gap-3">
+						<button
+							class="p-0 m-0 bg-transparent border-none cursor-pointer button-animation"
+							:class="{
+								'text-brand': themeStore.devMode,
+								'text-secondary': !themeStore.devMode,
+							}"
+							@click="devModeCount"
+						>
+							<ModrinthIcon class="w-6 h-6" />
+						</button>
+						<div>
+							<p class="m-0">Modrinth App {{ version }}</p>
+							<p class="m-0">
+								<span v-if="osPlatform === 'macos'">macOS</span>
+								<span v-else class="capitalize">{{ osPlatform }}</span>
+								{{ osVersion }}
+							</p>
+						</div>
+					</div>
+				</div>
+			</template>
+		</TabbedModal>
+	</ModalWrapper>
 </template>
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+defineProps({
+	onFlowCancel: {
+		type: Function,
+		default() {
+			return async () => {}
+		},
+	},
+})
+
+const modal = ref()
+
+function show() {
+	modal.value.show()
+}
+
+function hide() {
+	modal.value.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+<template>
+	<ModalWrapper ref="modal" @hide="onFlowCancel">
+		<template #title>
+			<span class="items-center gap-2 text-lg font-extrabold text-contrast">
+				<LogInIcon /> Sign in
+			</span>
+		</template>
+
+		<div class="flex justify-center gap-2">
+			<SpinnerIcon class="w-12 h-12 animate-spin" />
+		</div>
+		<p class="text-sm text-secondary">
+			Please sign in at the browser window that just opened to continue.
+		</p>
+	</ModalWrapper>
+</template>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`See [CLAUDE.md](./CLAUDE.md) for all project instructions and guidelines.`