From 8057c516b201e592181db0af639132bc169edc83 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 7 Sep 2026 21:43:10 +0000
Subject: [PATCH 1/4] feat(dashboard): add "Report an Issue" link to user menu

Opens the GitHub new-issue page in a new tab from the account popover,
placed above the Log Out divider so the destructive action stays last.

Closes #432

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kQ1Dp7xRj9mVNuYGeVYB2
---
 dashboard/src/components/UserMenu.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/dashboard/src/components/UserMenu.vue b/dashboard/src/components/UserMenu.vue
index 5d8a233a..ac512766 100644
--- a/dashboard/src/components/UserMenu.vue
+++ b/dashboard/src/components/UserMenu.vue
@@ -29,6 +29,13 @@ const themes = [
 
 const settingsOpen = ref(false)
 
+const NEW_ISSUE_URL = "https://github.com/bwhtech/buzz/issues/new"
+
+function reportIssue(closeMenu: () => void) {
+	closeMenu()
+	window.open(NEW_ISSUE_URL, "_blank", "noopener")
+}
+
 // The popover sits above the dialog's overlay, so it never gets the outside-click.
 function openSettings(closeMenu: () => void) {
 	closeMenu()
@@ -101,6 +108,15 @@ function openSettings(closeMenu: () => void) {
 					</div>
 				</div>
 
+				<Button
+					size="sm"
+					label="Report an Issue"
+					icon="lucide-bug"
+					variant="ghost"
+					class="w-full !justify-start"
+					@click="reportIssue(close)"
+				/>
+
 				<Divider class="my-2" />
 
 				<Button

From 56781d965fab75dbe4866a6c2439923f378d74ac Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 7 Sep 2026 21:44:05 +0000
Subject: [PATCH 2/4] style(dashboard): drop the icon from the report button

Settings and Log Out carry no leading icon, so an icon on this row alone
left the three menu items with mismatched label alignment.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kQ1Dp7xRj9mVNuYGeVYB2
---
 dashboard/src/components/UserMenu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dashboard/src/components/UserMenu.vue b/dashboard/src/components/UserMenu.vue
index ac512766..cd6a7f1c 100644
--- a/dashboard/src/components/UserMenu.vue
+++ b/dashboard/src/components/UserMenu.vue
@@ -111,7 +111,6 @@ function openSettings(closeMenu: () => void) {
 				<Button
 					size="sm"
 					label="Report an Issue"
-					icon="lucide-bug"
 					variant="ghost"
 					class="w-full !justify-start"
 					@click="reportIssue(close)"

From e044980677042d958bcecc6ed025e204776ca10c Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 12:12:15 +0530
Subject: [PATCH 3/4] refactor(dashboard): rebuild the account menu on Dropdown

The menu was a Popover holding ghost buttons, so it announced itself as a
dialog and had none of a menu's behaviour: no arrow keys, no type-ahead, no
focus containment, and a tab order that ran off the end into the page behind
it. frappe-ui's Dropdown supplies all of that, and the options array is
shorter than the markup it replaces.

Carried over on the way: icons on every row, to match the sidebar items
directly above; a Theme row that keeps the menu open, since a switch-type
option renders outside the menu-item primitive; aria-pressed on the theme
buttons, which were previously only distinguishable by fill; and __() on the
labels, which the rest of the dashboard already had.

Log Out is the one irreversible action in the shell and it ran bare: no
pending state and no error path, so a slow request looked like a dead click
and a failed one was silent. It now disables itself while in flight and the
resource reports a failure.

The trigger's aria-label was overriding its own contents, so a screen reader
never read the signed-in name. An sr-only span names the control instead. The
e2e locator moves to a test id because the settings dialog hides the sidebar
from the accessibility tree while it is open.
---
 dashboard/src/components/UserMenu.vue | 155 ++++++++++++--------------
 dashboard/src/data/session.ts         |   6 +-
 e2e/tests/user-settings.spec.ts       |  10 +-
 3 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/dashboard/src/components/UserMenu.vue b/dashboard/src/components/UserMenu.vue
index cd6a7f1c..dca68e39 100644
--- a/dashboard/src/components/UserMenu.vue
+++ b/dashboard/src/components/UserMenu.vue
@@ -2,14 +2,14 @@
 import {
 	Avatar,
 	Button,
-	Divider,
+	Dropdown,
 	KeyboardShortcut,
-	Popover,
 	Tooltip,
 	sidebarCollapsedKey,
 	useColorScheme,
+	type DropdownOptions,
 } from "frappe-ui"
-import { computed, inject, ref } from "vue"
+import { computed, h, inject, ref } from "vue"
 
 import UserSettingsDialog from "@/components/UserSettingsDialog.vue"
 import { session } from "@/data/session"
@@ -21,33 +21,81 @@ const isCollapsed = inject(
 
 const { colorScheme, setColorScheme } = useColorScheme()
 
-const themes = [
-	{ value: "light", icon: "lucide-sun", label: "Light" },
-	{ value: "dark", icon: "lucide-moon", label: "Dark" },
-	{ value: "system", icon: "lucide-monitor", label: "System" },
-] as const
+const themes = computed(() => [
+	{ value: "light", icon: "lucide-sun", label: __("Light") } as const,
+	{ value: "dark", icon: "lucide-moon", label: __("Dark") } as const,
+	{ value: "system", icon: "lucide-monitor", label: __("System") } as const,
+])
 
 const settingsOpen = ref(false)
 
 const NEW_ISSUE_URL = "https://github.com/bwhtech/buzz/issues/new"
 
-function reportIssue(closeMenu: () => void) {
-	closeMenu()
-	window.open(NEW_ISSUE_URL, "_blank", "noopener")
+// Buttons rather than a menu item each: the row is one choice of three, and it
+// keeps the menu open so the theme can be compared without reopening it.
+function themeChoices() {
+	return h(
+		"div",
+		{ class: "flex items-center gap-1", role: "group", "aria-label": __("Theme") },
+		themes.value.map((theme) =>
+			h(Button, {
+				key: theme.value,
+				variant: colorScheme.value === theme.value ? "subtle" : "ghost",
+				icon: theme.icon,
+				label: theme.label,
+				tooltip: theme.label,
+				"aria-pressed": colorScheme.value === theme.value,
+				onClick: () => setColorScheme(theme.value),
+			}),
+		),
+	)
 }
 
-// The popover sits above the dialog's overlay, so it never gets the outside-click.
-function openSettings(closeMenu: () => void) {
-	closeMenu()
-	settingsOpen.value = true
-}
+const menu = computed<DropdownOptions>(() => [
+	{
+		group: "settings",
+		hideLabel: true,
+		options: [
+			{
+				label: __("Settings"),
+				icon: "lucide-settings",
+				onClick: () => (settingsOpen.value = true),
+				slots: { suffix: () => h(KeyboardShortcut, { combo: "G+S", bg: true }) },
+			},
+			{
+				label: __("Theme"),
+				icon: "lucide-sun-moon",
+				switch: true,
+				slots: { suffix: themeChoices },
+			},
+			{
+				label: __("Report an Issue"),
+				icon: "lucide-bug",
+				onClick: () => window.open(NEW_ISSUE_URL, "_blank", "noopener"),
+			},
+		],
+	},
+	{
+		group: "session",
+		hideLabel: true,
+		options: [
+			{
+				label: session.logout.loading ? __("Signing out…") : __("Log Out"),
+				icon: "lucide-log-out",
+				theme: "red",
+				disabled: session.logout.loading,
+				onClick: () => session.logout.fetch(),
+			},
+		],
+	},
+])
 </script>
 
 <template>
-	<Popover match-trigger-width side="top" align="start">
-		<template #trigger="{ open: isOpen }">
+	<Dropdown :options="menu" side="top" align="start" match-trigger-width>
+		<template #default="{ open: isOpen }">
 			<button
-				aria-label="Account menu"
+				data-testid="account-menu"
 				class="flex h-12 w-full items-center gap-2 rounded-4 px-1.5 transition-[background-color,transform] duration-150 ease-out hover:bg-surface-gray-2 active:scale-[0.98] focus-visible:outline-none focus-visible:focus-ring"
 				:class="{ 'bg-surface-gray-2': isOpen }"
 			>
@@ -58,77 +106,22 @@ function openSettings(closeMenu: () => void) {
 					class="flex min-w-0 flex-col text-left transition-opacity duration-150 ease-out"
 					:class="isCollapsed ? 'w-0 flex-none overflow-hidden opacity-0' : 'flex-1 opacity-100'"
 				>
-					<span class="truncate text-base font-medium text-ink-gray-8">
+					<span :title="session.fullName" class="truncate text-base font-medium text-ink-gray-8">
 						{{ session.fullName }}
 					</span>
-					<span class="truncate text-sm text-ink-gray-6">{{ session.user }}</span>
+					<span :title="session.user" class="truncate text-sm text-ink-gray-6">
+						{{ session.user }}
+					</span>
 				</span>
+				<!-- Names the control without replacing the name the button already shows. -->
+				<span class="sr-only">{{ __("Account menu") }}</span>
 				<span
 					class="lucide-chevrons-up-down size-4 shrink-0 text-ink-gray-5 transition-opacity duration-150 ease-out"
 					:class="{ 'w-0 overflow-hidden opacity-0': isCollapsed }"
 				/>
 			</button>
 		</template>
-
-		<template #default="{ close }">
-			<div class="p-2">
-				<div class="flex flex-col px-1.5 py-1">
-					<span class="truncate text-base text-ink-gray-8">{{ session.fullName }}</span>
-					<span class="truncate text-sm text-ink-gray-5">{{ session.user }}</span>
-				</div>
-
-				<Divider class="my-2" />
-
-				<Button
-					size="sm"
-					label="Settings"
-					variant="ghost"
-					class="w-full !justify-start"
-					@click="openSettings(close)"
-				>
-					<template #suffix>
-						<span class="ml-auto flex items-center gap-1">
-							<KeyboardShortcut combo="G+S" bg />
-						</span>
-					</template>
-				</Button>
-
-				<div class="flex h-8 items-center justify-between gap-2 px-1.5">
-					<span class="text-base text-ink-gray-8 pl-0.5">Theme</span>
-					<div class="flex items-center gap-1">
-						<Button
-							v-for="theme in themes"
-							:key="theme.value"
-							:variant="colorScheme === theme.value ? 'subtle' : 'ghost'"
-							:icon="theme.icon"
-							:label="theme.label"
-							:tooltip="theme.label"
-							@click="setColorScheme(theme.value)"
-						/>
-					</div>
-				</div>
-
-				<Button
-					size="sm"
-					label="Report an Issue"
-					variant="ghost"
-					class="w-full !justify-start"
-					@click="reportIssue(close)"
-				/>
-
-				<Divider class="my-2" />
-
-				<Button
-					size="sm"
-					label="Log Out"
-					variant="ghost"
-					theme="red"
-					class="w-full !justify-start"
-					@click="session.logout.fetch()"
-				/>
-			</div>
-		</template>
-	</Popover>
+	</Dropdown>
 
 	<UserSettingsDialog v-model:open="settingsOpen" />
 </template>
diff --git a/dashboard/src/data/session.ts b/dashboard/src/data/session.ts
index 25ad2cb4..dc9db01e 100644
--- a/dashboard/src/data/session.ts
+++ b/dashboard/src/data/session.ts
@@ -1,4 +1,4 @@
-import { createResource } from "frappe-ui"
+import { createResource, toast } from "frappe-ui"
 import { computed, reactive } from "vue"
 
 import { clearBookingCache } from "@/utils"
@@ -40,6 +40,10 @@ export const session = reactive({
 			clearBookingCache()
 			window.location.reload()
 		},
+		// A silent failure leaves the menu open on a session that is still live.
+		onError() {
+			toast.error(__("Could not sign you out. Check your connection and try again."))
+		},
 	}),
 	user: sessionUser(),
 	fullName: computed((): string => userResource.data?.full_name || session.user),
diff --git a/e2e/tests/user-settings.spec.ts b/e2e/tests/user-settings.spec.ts
index 43726604..308f3152 100644
--- a/e2e/tests/user-settings.spec.ts
+++ b/e2e/tests/user-settings.spec.ts
@@ -10,10 +10,14 @@ const unique = (prefix: string) => `${prefix} ${Date.now()}`
 // getByLabel("Email") also matches an event card's "Open E2E Guest Email OTP" button.
 const settings = (page: Page) => page.getByRole("dialog")
 
+// By test id, not by role: the open settings dialog hides the sidebar from the
+// accessibility tree, and the name assertion below runs while it is open.
+const accountMenu = (page: Page) => page.getByTestId("account-menu")
+
 async function openSettings(page: Page) {
 	await expect(page.getByRole("heading", { name: "Events", level: 1 })).toBeVisible()
-	await page.getByLabel("Account menu").click()
-	await page.getByRole("button", { name: "Settings" }).click()
+	await accountMenu(page).click()
+	await page.getByRole("menuitem", { name: "Settings" }).click()
 	await expect(settings(page).getByRole("heading", { name: "Profile" })).toBeVisible()
 }
 
@@ -42,7 +46,7 @@ test.describe("User settings", () => {
 		await save.click()
 
 		// The sidebar reads full_name, which the server derives on save.
-		await expect(page.getByLabel("Account menu")).toContainText(edited)
+		await expect(accountMenu(page)).toContainText(edited)
 
 		await firstName.fill(SETTINGS_FIRST_NAME)
 		await save.click()

From d2174a56b1c3a406903f4c769e1adc292a08dd1f Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Tue, 8 Sep 2026 15:42:02 +0530
Subject: [PATCH 4/4] fix(dashboard): make the theme choices reachable by
 keyboard

The theme buttons sat in a Dropdown switch row, which Menu renders as a plain
div rather than a menu item. That leaves it out of the roving-focus collection,
and the modal content swallows Tab, so keyboard users could not reach the
choices at all.

Each theme is a submenu item now, so arrow keys walk them. Selecting one calls
preventDefault on the select event, which reka honours to keep the menu open.
---
 dashboard/src/components/UserMenu.vue | 47 +++++++++++----------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/dashboard/src/components/UserMenu.vue b/dashboard/src/components/UserMenu.vue
index dca68e39..f26a9a6c 100644
--- a/dashboard/src/components/UserMenu.vue
+++ b/dashboard/src/components/UserMenu.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
 	Avatar,
-	Button,
 	Dropdown,
 	KeyboardShortcut,
 	Tooltip,
@@ -21,35 +20,28 @@ const isCollapsed = inject(
 
 const { colorScheme, setColorScheme } = useColorScheme()
 
-const themes = computed(() => [
-	{ value: "light", icon: "lucide-sun", label: __("Light") } as const,
-	{ value: "dark", icon: "lucide-moon", label: __("Dark") } as const,
-	{ value: "system", icon: "lucide-monitor", label: __("System") } as const,
-])
-
 const settingsOpen = ref(false)
 
 const NEW_ISSUE_URL = "https://github.com/bwhtech/buzz/issues/new"
 
-// Buttons rather than a menu item each: the row is one choice of three, and it
-// keeps the menu open so the theme can be compared without reopening it.
-function themeChoices() {
-	return h(
-		"div",
-		{ class: "flex items-center gap-1", role: "group", "aria-label": __("Theme") },
-		themes.value.map((theme) =>
-			h(Button, {
-				key: theme.value,
-				variant: colorScheme.value === theme.value ? "subtle" : "ghost",
-				icon: theme.icon,
-				label: theme.label,
-				tooltip: theme.label,
-				"aria-pressed": colorScheme.value === theme.value,
-				onClick: () => setColorScheme(theme.value),
-			}),
-		),
-	)
-}
+// preventDefault keeps the menu open, so themes can be compared without reopening it.
+const themeOptions = computed<DropdownOptions>(() =>
+	(
+		[
+			{ value: "light", icon: "lucide-sun", label: __("Light") },
+			{ value: "dark", icon: "lucide-moon", label: __("Dark") },
+			{ value: "system", icon: "lucide-monitor", label: __("System") },
+		] as const
+	).map((theme) => ({
+		label: theme.label,
+		icon: theme.icon,
+		selected: colorScheme.value === theme.value,
+		onClick: (event: Event) => {
+			event.preventDefault()
+			setColorScheme(theme.value)
+		},
+	})),
+)
 
 const menu = computed<DropdownOptions>(() => [
 	{
@@ -65,8 +57,7 @@ const menu = computed<DropdownOptions>(() => [
 			{
 				label: __("Theme"),
 				icon: "lucide-sun-moon",
-				switch: true,
-				slots: { suffix: themeChoices },
+				submenu: themeOptions.value,
 			},
 			{
 				label: __("Report an Issue"),