refac: hardening pass with multiple overhauls

web/src/components/DashboardShell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
 import { useApi } from '@/composables/useApi'
@@ -68,12 +68,33 @@ const navUi = computed(() => ({
 const loggingOut = ref(false)
 const sidebarOpen = ref(false)
 const accountSheetOpen = ref(false)
+const NAVBAR_TOGGLE_SELECTOR = '[data-slot="toggle"]'
+let sheetOpener: HTMLElement | undefined
 
-function openAccountSheet() {
+function openAccountSheet(opener: HTMLElement | undefined) {
+	sheetOpener = opener
 	sidebarOpen.value = false
 	accountSheetOpen.value = true
 }
 
+async function restoreFocusAfterSheet() {
+	await nextTick()
+	if (loggingOut.value) {
+		return
+	}
+	const target = sheetOpener?.isConnected
+		? sheetOpener
+		: document.querySelector<HTMLElement>(NAVBAR_TOGGLE_SELECTOR)
+	sheetOpener = undefined
+	target?.focus()
+}
+
+watch(accountSheetOpen, (isOpen) => {
+	if (!isOpen) {
+		restoreFocusAfterSheet()
+	}
+})
+
 const showBoot = computed(() => session.status === 'checking' && !props.renderWhileChecking)
 
 function onRetry() {
@@ -129,6 +150,7 @@ async function onLogout() {
 					:display-name="session.session?.displayName"
 					:email="session.session?.email"
 					:collapsed="sidebarCollapsed"
+					:sheet-open="accountSheetOpen"
 					@logout="onLogout"
 					@open-sheet="openAccountSheet"
 				/>