fix: small design harmonization and overhaul

web/visual/check.ts

@@ -26,6 +26,9 @@ interface Screen {
 	sources: Source[]
 }
 
+const VISUAL_REFERENCE =
+	/Visual reference:\*{0,2}\s*`(?:source\/)?([^`]+)`,?\s*groups?\s+((?:"[^"]+"(?:,\s*)?)+)/
+
 const officeBoard = 'RenewCMS Screens Back-office.dc.html'
 
 const extraSources: Record<string, Source[]> = {
@@ -286,7 +289,15 @@ function variantsScreen(): Screen {
 		'V5i · Purge all: confirm, typed',
 		'V5j · Purge unused: confirm',
 	]
+	const navNames = [
+		'N1 · Parent selected',
+		'N2 · Child selected: Variants',
+		'N3 · Child selected: Cache',
+		'N4 · Mobile drawer, parent selected',
+		'N5 · Mobile drawer, child selected',
+	]
 	sources.push(
+		{ board: officeBoard, group: 'Settings navigation', states: navNames, alias: {} },
 		{ board: variantsBoard, group: 'Cache panel', states: cacheNames, alias: {} },
 		{ board: variantsBoard, group: 'Media library', states: libraryNames, alias: {} },
 		{ board: variantsBoard, group: 'Image detail', states: detailNames, alias: {} },
@@ -303,22 +314,33 @@ function variantsScreen(): Screen {
 			...libraryNames,
 			...detailNames,
 			...editorNames,
+			...navNames,
 		],
 		sources,
 	}
 }
 
+function groupSectionRows(markdown: string, group: string) {
+	const heading = new RegExp(`^### .*\\(group "${group}", \\d+ states?\\)$`, 'm').exec(markdown)
+	if (!heading) {
+		return []
+	}
+	const rest = markdown.slice(heading.index + heading[0].length)
+	const end = rest.search(/^##/m)
+	const section = end === -1 ? rest : rest.slice(0, end)
+	return [...section.matchAll(/^\| \d+ \| ([^|]+?) \|/gm)].map((match) => match[1]!.trim())
+}
+
 async function readScreen(name: string): Promise<Screen> {
 	if (name === 'image-variants') {
 		return variantsScreen()
 	}
 	const markdown = await readFile(join(designRoot, 'screens', `${name}.md`), 'utf8')
-	const reference =
-		/\*\*Visual reference:\*\* `source\/([^`]+)`, group "([^"]+)"/.exec(markdown) ??
-		/^Visual reference: `([^`]+)`, groups? "([^"]+)"/m.exec(markdown)
+	const reference = VISUAL_REFERENCE.exec(markdown)
 	if (!reference) {
 		throw new Error(`docs/design/screens/${name}.md has no visual reference line`)
 	}
+	const referenceGroups = [...reference[2]!.matchAll(/"([^"]+)"/g)].map((match) => match[1]!)
 	const numberedRows = [...markdown.matchAll(/^\| \d+ \| ([^|]+?) \|/gm)].map((match) =>
 		match[1]!.trim(),
 	)
@@ -329,23 +351,35 @@ async function readScreen(name: string): Promise<Screen> {
 	const headingStates = [...statesMarkdown.matchAll(/^### (.+)$/gm)].map((match) =>
 		match[1]!.trim(),
 	)
-	const states = numberedRows.length
-		? numberedRows
-		: headingStates.length
-			? headingStates
-			: tableStates(statesMarkdown)
+	const groupRows = groupSectionRows(markdown, referenceGroups[0]!)
+	const states = groupRows.length
+		? groupRows
+		: numberedRows.length
+			? numberedRows
+			: headingStates.length
+				? headingStates
+				: tableStates(statesMarkdown)
 	const primary: Source = {
 		board: reference[1]!,
-		group: reference[2]!,
+		group: referenceGroups[0]!,
 		states,
 		alias: boardAlias[name] ?? {},
 	}
+	const configured = extraSources[name] ?? []
+	const documentedExtras = referenceGroups
+		.slice(1)
+		.filter((group) => !configured.some((source) => source.group === group))
+		.map((group): Source => ({ board: primary.board, group, states: [], alias: {} }))
 	return {
 		name,
 		board: primary.board,
 		group: primary.group,
 		states,
-		sources: [primary, ...(extraSources[name] ?? [])],
+		sources: [
+			primary,
+			...configured.filter((source) => source.group !== primary.group),
+			...documentedExtras,
+		],
 	}
 }
 

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),
 	},