fix: account menu matches the redesigned board: System, Light, Dark stay in the menu and the sheet, and the visual-check exception on profile "Account menu" in web/visual/states.ts is removed

web/src/components/__tests__/DashboardShell.spec.ts

@@ -4,6 +4,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import uiPlugin from '@nuxt/ui/vue-plugin'
 import router from '@/router'
 import { useApi } from '@/composables/useApi'
+import { useColorMode } from '@/composables/useColorMode'
 import DashboardShell from '../DashboardShell.vue'
 import { DESKTOP_WIDTH, MOBILE_WIDTH, setViewportWidth } from './viewport'
 
@@ -272,6 +273,29 @@ describe('Account menu: opened from the drawer on mobile', () => {
 		expect(document.body.querySelector('[role="menu"]')).toBeNull()
 	})
 
+	it('applies a theme choice and closes the sheet', async () => {
+		const colorMode = useColorMode()
+		colorMode.preference = 'system'
+		await mountShell('/home', { width: MOBILE_WIDTH })
+		;(document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement).click()
+		await flushPromises()
+		;(
+			document.body.querySelector(
+				'[role="dialog"] button[aria-haspopup]',
+			) as HTMLButtonElement
+		).click()
+		await flushPromises()
+
+		const dark = Array.from(
+			document.body.querySelectorAll<HTMLElement>('[role="menu"] [role="menuitemcheckbox"]'),
+		).find((item) => item.textContent?.trim() === 'Dark')!
+		dark.click()
+		await flushPromises()
+
+		expect(colorMode.preference).toBe('dark')
+		expect(document.body.querySelector('[role="menu"]')).toBeNull()
+	})
+
 	it('logs out from the sheet', async () => {
 		await mountShell('/home', { width: MOBILE_WIDTH })
 		;(document.body.querySelector('[data-slot="toggle"]') as HTMLButtonElement).click()

web/src/components/__tests__/UserMenu.spec.ts

@@ -236,7 +236,7 @@ describe('Menu items', () => {
 })
 
 describe('Theme choice stays in the menu', () => {
-	it('checks the current preference, sets Dark, closes, and shows Dark checked on reopening', async () => {
+	it('checks the current preference, sets Dark at once and keeps the menu open', async () => {
 		const colorMode = useColorMode()
 		colorMode.preference = 'system'
 		await mountMenu()
@@ -248,15 +248,23 @@ describe('Theme choice stays in the menu', () => {
 		await flushPromises()
 
 		expect(colorMode.preference).toBe('dark')
-		expect(menu()).toBeNull()
-
-		await openMenu()
-
+		expect(menu()).not.toBeNull()
 		expect(findItem('Dark').getAttribute('aria-checked')).toBe('true')
 		expect(findItem('System').getAttribute('aria-checked')).toBe('false')
 	})
 })
 
+describe('Item heights', () => {
+	it('gives every desktop item 32 px', async () => {
+		await mountMenu()
+		await openMenu()
+
+		for (const item of itemsIn(menu()!)) {
+			expect(item.classList.contains('h-8')).toBe(true)
+		}
+	})
+})
+
 describe('Avatar initials', () => {
 	it.each([
 		['marta', '', 'MA', 'marta'],