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()