fix: small design harmonization and overhaul

web/visual/states.ts

@@ -3786,6 +3786,51 @@ const variantsHeroDisabled = variantsBoardList.map((entry) =>
 	entry.name === 'hero' ? { ...entry, enabled: false } : entry,
 )
 
+const settingsNavPath = '/settings'
+
+function settingsNavState(path: string, drawer = false): VisualState {
+	const base =
+		path === cachePath
+			? cacheState()
+			: path === variantsPath
+				? variantsListState()
+				: {
+						path,
+						api: {
+							...updateApi('owner', updateNeverChecked()),
+							'GET /v1/auth/me': variantsSession,
+						},
+					}
+	if (!drawer) {
+		return base
+	}
+	return {
+		...base,
+		steps: async (page) => {
+			if (isMobileViewport(page)) {
+				await page.locator('[data-slot="toggle"]').first().click()
+				await page.mouse.move(0, 0)
+				await page.waitForTimeout(250)
+			}
+		},
+	}
+}
+
+const settingsNavStates: Record<string, VisualState> = {
+	'N1 · Parent selected': settingsNavState(settingsNavPath),
+	'N2 · Child selected: Variants': settingsNavState(variantsPath),
+	'N3 · Child selected: Cache': settingsNavState(cachePath),
+	'N4 · Mobile drawer, parent selected': {
+		...settingsNavState(settingsNavPath, true),
+		exception: {
+			maxPercent: { desktop: 18.2, mobile: 10 },
+			reason: 'board inconsistency: desktop frame of a mobile-only state',
+			approvedBy: 'Florian Sylvain',
+		},
+	},
+	'N5 · Mobile drawer, child selected': settingsNavState(variantsPath, true),
+}
+
 const variantsMediaStates: Record<string, VisualState> = {
 	'Entry: sidebar': {
 		path: '/media',
@@ -5115,6 +5160,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 	'image-variants': {
 		...variantsStates,
 		...cacheStates,
+		...settingsNavStates,
 		...withVariantExceptions(variantsMediaStates),
 		...withVariantExceptions(variantsEditorStates),
 	},