feat: 移植 Axolotl 皮肤盔甲预览（Armor Preview）

从 Axolotl 1.9.7 移植皮肤编辑器的盔甲/盔甲纹饰预览功能，
让玩家在皮肤选择页可试穿盔甲并调整纹饰。

新增：
- 前端组件 ArmorTrimTab / SkinListSkeleton 及 skin-armor-preview helper
- packages/ui 组件 ArmorPreviewControls / ArmorTrimPanel
- packages/ui armor 预览 composable（armor-preview-assets/types、use-armor-preview）
- packages/ui webgl 盔甲渲染（armor-geometry / armor-preview-object / armor-rendering）
- packages/ui/src/assets/minecraft-armor 盔甲素材

改动：
- SkinPreviewRenderer 增加 armorPreview/armorControls props、
  armorConfig model 与 useArmorPreview 集成
- Skins.vue 增加盔甲 tab、状态逻辑与模板接入
- 补齐 skin/composables/utils 的导出

适配说明：ArmorPreviewControls 原版依赖 reka-ui 的 popover，
Starlight 无该依赖且只用 external 模式，故改写为 external-only，
去除 reka-ui 与 overlays.css 依赖。

apps/app-frontend/src/announcements/catalog.ts

@@ -32,6 +32,40 @@ export const ANNOUNCEMENT_CHANGE_TYPES: readonly AnnouncementChangeType[] = [
 ]
 
 export const launcherAnnouncements: readonly LauncherAnnouncement[] = [
+	{
+		id: 'launcher-1.0.2-beta3',
+		version: '1.0.2-beta3',
+		publishedAt: '2026-10-04',
+		title: {
+			'en-US': 'Starlight Launcher 1.0.2-beta3',
+			'zh-CN': 'Starlight Launcher 1.0.2-beta3',
+		},
+		changes: {
+			fixed: [
+				{
+					'en-US': 'Fixed the anniversary celebration banner not showing above the window title bar, and made the banner background semi-transparent so the content behind it stays visible.',
+					'zh-CN': '修复周年庆庆祝横幅被窗口标题栏遮挡、无法显示的问题，并将横幅背景改为半透明，避免遮住下方内容。',
+				},
+			],
+		},
+	},
+	{
+		id: 'launcher-1.0.2-beta2',
+		version: '1.0.2-beta2',
+		publishedAt: '2026-10-04',
+		title: {
+			'en-US': 'Starlight Launcher 1.0.2-beta2',
+			'zh-CN': 'Starlight Launcher 1.0.2-beta2',
+		},
+		changes: {
+			fixed: [
+				{
+					'en-US': 'Fixed the launcher failing to start with "no such table: synced_pack_catalog": the cross-instance sync migration was missing the synced_pack_catalog and synced_pack_instances tables.',
+					'zh-CN': '修复启动器因 "no such table: synced_pack_catalog" 无法启动的问题：跨实例同步迁移遗漏了 synced_pack_catalog 与 synced_pack_instances 两张表。',
+				},
+			],
+		},
+	},
 	{
 		id: 'launcher-1.0.2-beta1',
 		version: '1.0.2-beta1',

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

@@ -154,7 +154,9 @@ const bannerText = computed(() =>
 
 .anniversary-banner {
 	position: absolute;
-	top: 0;
+	/* 避开原生窗口标题栏（Windows/macOS 系统装饰条会盖住 top:0 的内容）；
+	   titlebar-area-height 是 Tauri 暴露的标题栏高度变量，不支持时降级为 0 */
+	top: env(titlebar-area-height, 0px);
 	left: 0;
 	right: 0;
 	display: flex;
@@ -166,19 +168,24 @@ const bannerText = computed(() =>
 	font-size: 0.95rem;
 	letter-spacing: 0.02em;
 	color: #fff;
-	background: linear-gradient(
+	/* 半透明深色兜底：即使下面的渐变背景失效，白字也不会在浅色页面上隐形 */
+	background-color: rgba(20, 16, 28, 0.35);
+	/* 半透明彩色渐变：让窗口下方的内容能透出来 */
+	background-image: linear-gradient(
 		90deg,
-		#f472b6,
+		rgba(244, 114, 182, 0.8),
-		#facc15,
+		rgba(250, 204, 21, 0.8),
-		#4ade80,
+		rgba(74, 222, 128, 0.8),
-		#38bdf8,
+		rgba(56, 189, 248, 0.8),
-		#a78bfa,
+		rgba(167, 139, 250, 0.8),
-		#f472b6
+		rgba(244, 114, 182, 0.8)
 	);
 	background-size: 300% 100%;
 	animation: anniversary-gradient 8s linear infinite;
 	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
-	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+	text-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.55),
+		0 0 4px rgba(0, 0, 0, 0.35);
 }
 
 .anniversary-banner-text {

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { CheckIcon, RotateCounterClockwiseIcon, XIcon } from '@modrinth/assets'
+import {
+	type ArmorPreviewConfig,
+	ArmorTrimPanel,
+	Button,
+	defineMessages,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+
+const messages = defineMessages({
+	title: { id: 'app.skins.armor.title', defaultMessage: 'Armour and trims' },
+	description: {
+		id: 'app.skins.armor.description',
+		defaultMessage: 'Try armour and trims on your skin. Nothing is stored until you save it.',
+	},
+	unsaved: { id: 'app.skins.armor.unsaved', defaultMessage: 'Unsaved changes' },
+	resetToSaved: { id: 'app.skins.armor.reset-to-saved', defaultMessage: 'Reset to saved' },
+	restoreDefaults: {
+		id: 'app.skins.armor.restore-defaults',
+		defaultMessage: 'Restore defaults',
+	},
+	save: { id: 'app.skins.armor.save', defaultMessage: 'Save' },
+	close: { id: 'app.skins.armor.close', defaultMessage: 'Close' },
+})
+
+const draft = defineModel<ArmorPreviewConfig>({ required: true })
+const props = defineProps<{
+	saved: ArmorPreviewConfig
+	/** Stable id shared with the toggle so it can point `aria-controls` here. */
+	panelId: string
+}>()
+const emit = defineEmits<{
+	save: []
+	reset: []
+	defaults: []
+	close: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+/**
+ * The tab is mounted only while it is showing, so this listens exactly for that
+ * window. It listens in the capture phase because the app's own global
+ * shortcuts listen on `window` the same way, and a bubble-phase listener here
+ * would be skipped as soon as anything closer stopped the event. A modal on top
+ * of the page owns Escape while it is up, and focus sits inside it, so the key
+ * is left to it.
+ */
+function handleKeydown(event: KeyboardEvent) {
+	if (event.key !== 'Escape') return
+	if (
+		event.target instanceof Element &&
+		event.target.closest('[role="dialog"], [role="alertdialog"], [aria-modal="true"]')
+	) {
+		return
+	}
+
+	emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown, true))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown, true))
+
+const isDirty = computed(() =>
+	Object.entries(draft.value).some(([slot, piece]) => {
+		const applied = props.saved[slot as keyof ArmorPreviewConfig]
+		return (
+			!applied ||
+			applied.material !== piece.material ||
+			applied.trimPattern !== piece.trimPattern ||
+			applied.trimMaterial !== piece.trimMaterial
+		)
+	}),
+)
+</script>
+
+<template>
+	<div
+		:id="panelId"
+		role="region"
+		:aria-label="formatMessage(messages.title)"
+		class="flex min-h-[24rem] flex-col gap-4 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+	>
+		<header class="flex flex-wrap items-start justify-between gap-3">
+			<div class="min-w-0">
+				<h2 class="m-0 text-lg font-bold text-[var(--color-text-primary)]">
+					{{ formatMessage(messages.title) }}
+				</h2>
+				<p class="m-0 mt-1 text-sm leading-6 text-[var(--color-text-tertiary)]">
+					{{ formatMessage(messages.description) }}
+				</p>
+			</div>
+			<div class="flex shrink-0 flex-wrap items-center gap-2">
+				<span v-if="isDirty" class="text-sm font-semibold text-[var(--color-text-tertiary)]">
+					{{ formatMessage(messages.unsaved) }}
+				</span>
+				<Button type="outlined" @click="emit('close')"
+					><XIcon />{{ formatMessage(messages.close) }}</Button
+				>
+			</div>
+		</header>
+
+		<ArmorTrimPanel v-model="draft" />
+
+		<footer
+			class="mt-auto flex flex-wrap items-center justify-between gap-2 border-0 border-t border-solid border-surface-5 pt-3"
+		>
+			<div class="flex flex-wrap items-center gap-2">
+				<Button type="outlined" :disabled="!isDirty" @click="emit('reset')"
+					><RotateCounterClockwiseIcon />{{ formatMessage(messages.resetToSaved) }}</Button
+				>
+				<Button type="outlined" @click="emit('defaults')">{{
+					formatMessage(messages.restoreDefaults)
+				}}</Button>
+			</div>
+			<Button type="colored" color="brand" :disabled="!isDirty" @click="emit('save')"
+				><CheckIcon />{{ formatMessage(messages.save) }}</Button
+			>
+		</footer>
+	</div>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { sections = 2, cards = 12 } = defineProps<{
+	sections?: number
+	cards?: number
+}>()
+</script>
+
+<template>
+	<!--
+		Shaped after VirtualSkinSectionList: the same grid breakpoints and card
+		ratio, so the swap to real content does not move anything. Decorative, so
+		it stays out of the accessibility tree.
+	-->
+	<div class="flex flex-col gap-8" aria-hidden="true">
+		<div v-for="section in sections" :key="section" class="flex flex-col gap-4">
+			<div class="h-7 w-44 animate-pulse rounded-lg bg-surface-4" />
+			<div
+				class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
+			>
+				<div
+					v-for="card in cards"
+					:key="card"
+					class="aspect-[31/40] w-full animate-pulse rounded-[20px] bg-surface-4"
+				/>
+			</div>
+		</div>
+	</div>
+</template>

apps/app-frontend/src/helpers/skin-armor-preview.test.ts

@@ -0,0 +1,60 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { loadSkinArmorPreview, saveSkinArmorPreview } from './skin-armor-preview.ts'
+
+const originalStorage = Object.getOwnPropertyDescriptor(globalThis, 'localStorage')
+
+function withStorage(run: (values: Map<string, string>) => void): void {
+	const values = new Map<string, string>()
+	Object.defineProperty(globalThis, 'localStorage', {
+		configurable: true,
+		value: {
+			getItem: (key: string) => values.get(key) ?? null,
+			setItem: (key: string, value: string) => values.set(key, value),
+		},
+	})
+	try {
+		run(values)
+	} finally {
+		if (originalStorage) Object.defineProperty(globalThis, 'localStorage', originalStorage)
+		else delete (globalThis as { localStorage?: Storage }).localStorage
+	}
+}
+
+test('armor preview selections survive storage round trips', () => {
+	withStorage(() => {
+		const config = loadSkinArmorPreview()
+		config.helmet.material = 'diamond'
+		config.helmet.trimPattern = 'sentry'
+		config.helmet.trimMaterial = 'gold'
+		saveSkinArmorPreview(config)
+
+		assert.deepEqual(loadSkinArmorPreview(), config)
+	})
+})
+
+test('invalid stored armor values fall back per slot and field', () => {
+	withStorage((values) => {
+		values.set(
+			'axolotl:skin-armor-preview',
+			JSON.stringify({
+				helmet: { material: 'diamond', trimPattern: 'invalid', trimMaterial: 'gold' },
+				boots: { material: 'turtle', trimPattern: 'sentry', trimMaterial: 'invalid' },
+			}),
+		)
+
+		const config = loadSkinArmorPreview()
+		assert.deepEqual(config.helmet, {
+			material: 'diamond',
+			trimPattern: null,
+			trimMaterial: 'gold',
+		})
+		assert.deepEqual(config.boots, {
+			material: null,
+			trimPattern: 'sentry',
+			trimMaterial: 'iron',
+		})
+		assert.equal(config.chestplate.material, null)
+	})
+})

apps/app-frontend/src/helpers/skin-armor-preview.ts

@@ -0,0 +1,47 @@
+import {
+	ARMOR_SLOTS,
+	ARMOR_TRIM_MATERIALS,
+	ARMOR_TRIM_PATTERNS,
+	armorMaterialsForSlot,
+	type ArmorPreviewConfig,
+	createDefaultArmorPreviewConfig,
+} from '@modrinth/ui'
+
+const STORAGE_KEY = 'axolotl:skin-armor-preview'
+
+function includes<T extends string>(values: readonly T[], value: unknown): value is T {
+	return typeof value === 'string' && values.some((item) => item === value)
+}
+
+export function loadSkinArmorPreview(): ArmorPreviewConfig {
+	const config = createDefaultArmorPreviewConfig()
+	try {
+		const saved = JSON.parse(globalThis.localStorage?.getItem(STORAGE_KEY) ?? 'null')
+		if (!saved || typeof saved !== 'object' || Array.isArray(saved)) return config
+
+		for (const slot of ARMOR_SLOTS) {
+			const piece = saved[slot]
+			if (!piece || typeof piece !== 'object' || Array.isArray(piece)) continue
+			if (piece.material === null || includes(armorMaterialsForSlot(slot), piece.material)) {
+				config[slot].material = piece.material
+			}
+			if (piece.trimPattern === null || includes(ARMOR_TRIM_PATTERNS, piece.trimPattern)) {
+				config[slot].trimPattern = piece.trimPattern
+			}
+			if (includes(ARMOR_TRIM_MATERIALS, piece.trimMaterial)) {
+				config[slot].trimMaterial = piece.trimMaterial
+			}
+		}
+	} catch {
+		// Invalid or unavailable local storage falls back to a fresh preview.
+	}
+	return config
+}
+
+export function saveSkinArmorPreview(config: ArmorPreviewConfig): void {
+	try {
+		globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(config))
+	} catch {
+		// The preview remains usable when local storage is unavailable.
+	}
+}

apps/app-frontend/src/pages/Skins.vue

@@ -9,9 +9,13 @@ import {
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
+	type ArmorPreviewConfig,
+	ArmorPreviewControls,
 	ButtonStyled,
+	cloneArmorPreviewConfig,
 	commonMessages,
 	ConfirmModal,
+	createDefaultArmorPreviewConfig,
 	defineMessages,
 	injectNotificationManager,
 	NavTabs,
@@ -24,12 +28,14 @@ import { invoke } from '@tauri-apps/api/core'
 import type { DragDropEvent } from '@tauri-apps/api/webview'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { computedAsync } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { ComponentPublicInstance, Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import ArmorTrimTab from '@/components/ui/skin/ArmorTrimTab.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
+import SkinListSkeleton from '@/components/ui/skin/SkinListSkeleton.vue'
 import VirtualSkinSectionList from '@/components/ui/skin/VirtualSkinSectionList.vue'
 import {
 	openSkinSiteLogin,
@@ -45,6 +51,7 @@ import { useNetworkStatus } from '@/composables/useNetworkStatus'
 import { check_reachable, get_default_user, users } from '@/helpers/auth'
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
 import { skinBlobUrlMap } from '@/helpers/rendering/batch-skin-renderer.ts'
+import { loadSkinArmorPreview, saveSkinArmorPreview } from '@/helpers/skin-armor-preview'
 import type { Cape, Skin, SkinTextureUrl } from '@/helpers/skins.ts'
 import {
 	determineModelType,
@@ -252,6 +259,8 @@ const editSkinModal = useTemplateRef('editSkinModal')
 const addSkinFileInput = useTemplateRef<HTMLInputElement>('addSkinFileInput')
 const skinSectionList = useTemplateRef<VirtualSkinSectionListExpose>('skinSectionList')
 const skinPreviewArea = useTemplateRef<HTMLElement>('skinPreviewArea')
+const armorTrimTab = useTemplateRef<ComponentPublicInstance>('armorTrimTab')
+const armorPreviewControls = useTemplateRef<ComponentPublicInstance>('armorPreviewControls')
 
 const { formatMessage } = useVIntl()
 const router = useRouter()
@@ -391,7 +400,8 @@ const isAddSkinButtonDragActive = ref(false)
 
 const deleteSkinModal = ref()
 const skinToDelete = ref<Skin | null>(null)
-const skinListTab = ref<'saved' | 'default'>('saved')
+const lastSkinListTab = ref<'saved' | 'default'>('saved')
+const skinListTab = ref<'saved' | 'default' | 'armor'>('saved')
 
 const skinListTabLinks = computed(() => [
 	{
@@ -403,6 +413,70 @@ const skinListTabLinks = computed(() => [
 		label: formatMessage(messages.defaultTab),
 	},
 ])
+const ARMOR_TRIM_PANEL_ID = 'skins-armor-trim-panel'
+const savedArmorPreview = ref<ArmorPreviewConfig>(loadSkinArmorPreview())
+const armorPreviewConfig = ref<ArmorPreviewConfig>(cloneArmorPreviewConfig(savedArmorPreview.value))
+
+function saveArmorPreview() {
+	savedArmorPreview.value = cloneArmorPreviewConfig(armorPreviewConfig.value)
+	saveSkinArmorPreview(savedArmorPreview.value)
+}
+
+function resetArmorPreviewToSaved() {
+	armorPreviewConfig.value = cloneArmorPreviewConfig(savedArmorPreview.value)
+}
+
+function restoreDefaultArmorPreview() {
+	armorPreviewConfig.value = createDefaultArmorPreviewConfig()
+}
+
+/** A third tab behind the two list tabs, opened from the preview's action row. */
+function openArmorTab() {
+	if (skinListTab.value !== 'armor') lastSkinListTab.value = skinListTab.value
+
+	skinListTab.value = 'armor'
+}
+
+/**
+ * Whether an element belongs to the armour surface: somewhere inside the open
+ * armour tab or the button that toggles it. Only those hold a focus ring that
+ * would be left behind when the tab closes.
+ */
+function isArmorPreviewElement(element: Element) {
+	const tabElement: unknown = armorTrimTab.value?.$el
+	const toggleElement: unknown = armorPreviewControls.value?.$el
+
+	return (
+		(tabElement instanceof Element && tabElement.contains(element)) ||
+		(toggleElement instanceof Element && toggleElement.contains(element))
+	)
+}
+
+function closeArmorTab() {
+	// Leaving the tab drops whatever was not saved on purpose.
+	resetArmorPreviewToSaved()
+	skinListTab.value = lastSkinListTab.value
+
+	// Escape and the toggle both leave the armour button holding focus, which
+	// keeps its focus ring drawn until something else is clicked. Only drop that
+	// ring when the focus sits on the armour surface, never on an unrelated
+	// control that happened to hold it when Escape was pressed.
+	const focused = document.activeElement
+	if (focused instanceof HTMLElement && isArmorPreviewElement(focused)) focused.blur()
+}
+
+/**
+ * The tab bar keeps the last list tab highlighted while the armour tab shows, so
+ * picking one of them leaves the armour tab. That transition has to drop the
+ * draft exactly like the toggle and Escape paths do, or it lingers on the model
+ * while the panel is gone.
+ */
+function selectSkinListTab(index: number) {
+	if (skinListTab.value === 'armor') resetArmorPreviewToSaved()
+
+	lastSkinListTab.value = index === 0 ? 'saved' : 'default'
+	skinListTab.value = lastSkinListTab.value
+}
 
 function confirmDeleteSkin(skin: Skin) {
 	if (isSkinManagementReadOnly.value) return
@@ -1211,6 +1285,9 @@ await loadSkins()
 				class="ml-5 mt-4 flex h-[calc(80vh-1rem)] items-center justify-center max-[700px]:h-[calc(50vh-1rem)]"
 			>
 				<SkinPreviewRenderer
+					v-model:armor-config="armorPreviewConfig"
+					armor-preview
+					:armor-controls="false"
 					:cape-src="capeTexture"
 					:texture-src="skinTexture || ''"
 					:variant="skinVariant"
@@ -1257,6 +1334,16 @@ await loadSkins()
 							<EditIcon />
 							{{ formatMessage(messages.editSkinButton) }}
 						</button>
+						<ArmorPreviewControls
+							v-if="!isSkinSiteProfile"
+							ref="armorPreviewControls"
+							v-model="armorPreviewConfig"
+							panel="external"
+							:panel-id="ARMOR_TRIM_PANEL_ID"
+							:open="skinListTab === 'armor'"
+							@open="openArmorTab"
+							@close="closeArmorTab"
+						/>
 					</template>
 				</SkinPreviewRenderer>
 			</div>
@@ -1265,14 +1352,10 @@ await loadSkins()
 		<div class="pt-2">
 			<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
 				<NavTabs
-					:active-index="skinListTab === 'saved' ? 0 : 1"
+					:active-index="lastSkinListTab === 'saved' ? 0 : 1"
 					:links="skinListTabLinks"
 					mode="local"
-					@tab-click="
+					@tab-click="selectSkinListTab"
-						(index: number) => {
-							skinListTab = index === 0 ? 'saved' : 'default'
-						}
-					"
 				/>
 				<ButtonStyled v-if="!isSkinSiteProfile" color="brand">
 					<button @click="router.push('/lab/skin-editor')">
@@ -1281,27 +1364,45 @@ await loadSkins()
 					</button>
 				</ButtonStyled>
 			</div>
-			<VirtualSkinSectionList
+			<Transition name="armor-tab" mode="out-in">
-				ref="skinSectionList"
+				<div v-if="skinListTab !== 'armor'" key="list">
-				:active-tab="skinListTab"
+					<SkinListSkeleton v-if="isSkinListBuffering" />
-				:saved-skins="savedSkins"
+					<VirtualSkinSectionList
-				:default-skin-sections="defaultSkinSections"
+						v-show="!isSkinListBuffering"
-				:get-baked-skin-textures="getBakedSkinTextures"
+						ref="skinSectionList"
-				:is-skin-selected="isSkinSelected"
+						:active-tab="skinListTab"
-				:is-skin-active="isSkinActive"
+						:saved-skins="savedSkins"
-				:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
+						:default-skin-sections="defaultSkinSections"
-				:read-only="isSkinManagementReadOnly"
+						:get-baked-skin-textures="getBakedSkinTextures"
-				:manage-saved-skins="!isSkinSiteProfile"
+						:is-skin-selected="isSkinSelected"
-				@select="changeSkin"
+						:is-skin-active="isSkinActive"
-				@edit="(skin, event) => !isSkinSiteProfile && editSkinModal?.show(event, skin)"
+						:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
-				@delete="confirmDeleteSkin"
+						:read-only="isSkinManagementReadOnly"
-				@reorder-saved-skins="reorderSavedSkins"
+						:manage-saved-skins="!isSkinSiteProfile"
-				@add-skin="openAddSkinFileBrowser"
+						@select="changeSkin"
-				@add-skin-dragenter="onAddSkinDragOver"
+						@edit="(skin, event) => !isSkinSiteProfile && editSkinModal?.show(event, skin)"
-				@add-skin-dragover="onAddSkinDragOver"
+						@delete="confirmDeleteSkin"
-				@add-skin-dragleave="onAddSkinDragLeave"
+						@reorder-saved-skins="reorderSavedSkins"
-				@add-skin-drop="onAddSkinDrop"
+						@add-skin="openAddSkinFileBrowser"
-			/>
+						@add-skin-dragenter="onAddSkinDragOver"
+						@add-skin-dragover="onAddSkinDragOver"
+						@add-skin-dragleave="onAddSkinDragLeave"
+						@add-skin-drop="onAddSkinDrop"
+					/>
+				</div>
+				<ArmorTrimTab
+					v-else
+					ref="armorTrimTab"
+					key="armor"
+					v-model="armorPreviewConfig"
+					:panel-id="ARMOR_TRIM_PANEL_ID"
+					:saved="savedArmorPreview"
+					@save="saveArmorPreview"
+					@reset="resetArmorPreviewToSaved"
+					@defaults="restoreDefaultArmorPreview"
+					@close="closeArmorTab"
+				/>
+			</Transition>
 		</div>
 	</div>
 
@@ -1382,4 +1483,17 @@ await loadSkins()
 		grid-template-columns: 1fr;
 	}
 }
+// The armour tab crossfades with the skin list it replaces.
+.armor-tab-enter-active,
+.armor-tab-leave-active {
+	transition:
+		opacity 180ms ease,
+		transform 180ms ease;
+}
+
+.armor-tab-enter-from,
+.armor-tab-leave-to {
+	opacity: 0;
+	transform: translateY(0.5rem);
+}
 </style>

packages/app-lib/migrations/20261003000000_instance-sync-feature-tables.sql

@@ -186,4 +186,32 @@ CREATE TABLE instance_server_pack_state (
 	FOREIGN KEY (instance_id) REFERENCES instances (id) ON DELETE CASCADE
 );
 
+-- Synced pack catalog tables (ported alongside the sync feature tables).
+CREATE TABLE synced_pack_catalog (
+	id TEXT PRIMARY KEY NOT NULL,
+	project_type TEXT NOT NULL CHECK (project_type IN ('resourcepack', 'datapack')),
+	file_name TEXT NOT NULL,
+	sha1 TEXT NOT NULL UNIQUE,
+	size INTEGER NOT NULL CHECK (size >= 0),
+	game_versions_json TEXT NOT NULL DEFAULT '[]',
+	enabled INTEGER NOT NULL DEFAULT 1 CHECK (enabled IN (0, 1)),
+	created_at INTEGER NOT NULL,
+	modified_at INTEGER NOT NULL
+);
+
+CREATE INDEX synced_pack_catalog_type ON synced_pack_catalog(project_type, modified_at);
+
+CREATE TABLE synced_pack_instances (
+	pack_id TEXT NOT NULL,
+	instance_id TEXT NOT NULL,
+	excluded INTEGER NOT NULL DEFAULT 0 CHECK (excluded IN (0, 1)),
+	materialized_path TEXT,
+	modified_at INTEGER NOT NULL,
+	PRIMARY KEY (pack_id, instance_id),
+	FOREIGN KEY (pack_id) REFERENCES synced_pack_catalog(id) ON DELETE CASCADE,
+	FOREIGN KEY (instance_id) REFERENCES instances(id) ON DELETE CASCADE
+);
+
+CREATE INDEX synced_pack_instances_instance ON synced_pack_instances(instance_id, excluded);
+
 ALTER TABLE settings ADD COLUMN sync_features_across_devices INTEGER NOT NULL DEFAULT FALSE;

packages/app-lib/migrations/20261003000050_synced-pack-tables.sql

@@ -1,32 +0,0 @@
--- Synced pack catalog tables.
---
--- These two tables were missed when the sync feature tables were ported;
--- 20261003000200_synced-pack-selection.sql alters `synced_pack_catalog`,
--- so it must exist first.
-
-CREATE TABLE synced_pack_catalog (
-	id TEXT PRIMARY KEY NOT NULL,
-	project_type TEXT NOT NULL CHECK (project_type IN ('resourcepack', 'datapack')),
-	file_name TEXT NOT NULL,
-	sha1 TEXT NOT NULL UNIQUE,
-	size INTEGER NOT NULL CHECK (size >= 0),
-	game_versions_json TEXT NOT NULL DEFAULT '[]',
-	enabled INTEGER NOT NULL DEFAULT 1 CHECK (enabled IN (0, 1)),
-	created_at INTEGER NOT NULL,
-	modified_at INTEGER NOT NULL
-);
-
-CREATE INDEX synced_pack_catalog_type ON synced_pack_catalog(project_type, modified_at);
-
-CREATE TABLE synced_pack_instances (
-	pack_id TEXT NOT NULL,
-	instance_id TEXT NOT NULL,
-	excluded INTEGER NOT NULL DEFAULT 0 CHECK (excluded IN (0, 1)),
-	materialized_path TEXT,
-	modified_at INTEGER NOT NULL,
-	PRIMARY KEY (pack_id, instance_id),
-	FOREIGN KEY (pack_id) REFERENCES synced_pack_catalog(id) ON DELETE CASCADE,
-	FOREIGN KEY (instance_id) REFERENCES instances(id) ON DELETE CASCADE
-);
-
-CREATE INDEX synced_pack_instances_instance ON synced_pack_instances(instance_id, excluded);

packages/app-lib/src/launcher/mod.rs

@@ -1,5 +1,4 @@
 //! Logic for launching Minecraft
-use crate::api::pack::import::direct_link::direct_link_group;
 use crate::data::ModLoader;
 use crate::event::emit::{emit_instance, emit_loading, init_loading};
 use crate::event::{InstancePayloadType, LoadingBarType};
@@ -717,14 +716,6 @@ async fn promote_external_instance_link(
         &mut tx,
     )
     .await?;
-    if let Some(group) = direct_link_group(&direct.dot_minecraft) {
-        crate::state::instances::adapters::sqlite::instance_rows::replace_instance_groups(
-            &instance.id,
-            &[group],
-            &mut tx,
-        )
-        .await?;
-    }
     tx.commit().await?;
     emit_instance(&instance.id, InstancePayloadType::Edited).await?;
     Ok(())

packages/app-lib/src/state/instances/commands/create_direct_link_instance.rs

@@ -1,6 +1,6 @@
 use crate::api::pack::import::{
     ImportLauncherType,
-    direct_link::{direct_link_group, resolve_direct_link},
+    direct_link::resolve_direct_link,
 };
 use crate::launcher::ExternalGameDirMode;
 use crate::state::instances::{
@@ -156,11 +156,6 @@ pub(crate) async fn create_direct_link_instance(
         &mut tx,
     )
     .await?;
-    let groups = direct_link_group(&resolved.dot_minecraft)
-        .into_iter()
-        .collect::<Vec<_>>();
-    instance_rows::replace_instance_groups(&instance_id, &groups, &mut tx)
-        .await?;
     instance_rows::upsert_instance_launch_overrides(&launch_overrides, &mut tx)
         .await?;
     tx.commit().await?;

packages/app-lib/src/state/instances/commands/sync_direct_link_instances.rs

@@ -1,6 +1,6 @@
 use super::create_direct_link_instance::create_direct_link_instance;
 use crate::api::pack::import::direct_link::{
-    detect_direct_link_source, direct_link_group,
+    detect_direct_link_source,
     has_minecraft_version_manifest, resolve_direct_link,
 };
 use crate::event::{InstancePayloadType, emit::emit_instance};
@@ -163,11 +163,7 @@ pub(crate) async fn sync_direct_link_instances(
                 let content_changed = metadata.applied_content_set.game_version
                     != resolved.game_version
                     || metadata.applied_content_set.loader != resolved.loader;
-                let groups = direct_link_group(&resolved.dot_minecraft)
+                if fields_changed || content_changed {
-                    .into_iter()
-                    .collect::<Vec<_>>();
-                let groups_changed = metadata.groups != groups;
-                if fields_changed || content_changed || groups_changed {
                     if content_changed {
                         crate::state::edit_instance(
                             &instance.id,
@@ -216,12 +212,6 @@ pub(crate) async fn sync_direct_link_instances(
                         &mut tx,
                     )
                     .await?;
-                    instance_rows::replace_instance_groups(
-                        &instance.id,
-                        &groups,
-                        &mut tx,
-                    )
-                    .await?;
                     tx.commit().await?;
                     let _ = emit_instance(
                         &instance.id,