feat(SPA): profile page, display name and the new account menu

web/src/components/DashboardShell.vue

@@ -5,6 +5,7 @@ import { useSessionStore } from '@/stores/session'
 import { useApi } from '@/composables/useApi'
 import { useSidebarCollapsed } from '@/composables/useSidebarCollapsed'
 import AppBoot from '@/components/AppBoot.vue'
+import AccountMenuSheet from '@/components/AccountMenuSheet.vue'
 import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
 import OfflineBanner from '@/components/OfflineBanner.vue'
@@ -14,10 +15,12 @@ const props = withDefaults(
 	defineProps<{
 		mobileTitle?: string
 		fullBleed?: boolean
+		renderWhileChecking?: boolean
 	}>(),
 	{
 		mobileTitle: undefined,
 		fullBleed: false,
+		renderWhileChecking: false,
 	},
 )
 
@@ -63,6 +66,15 @@ const navUi = computed(() => ({
 	linkLeadingIcon: 'size-4',
 }))
 const loggingOut = ref(false)
+const sidebarOpen = ref(false)
+const accountSheetOpen = ref(false)
+
+function openAccountSheet() {
+	sidebarOpen.value = false
+	accountSheetOpen.value = true
+}
+
+const showBoot = computed(() => session.status === 'checking' && !props.renderWhileChecking)
 
 function onRetry() {
 	session.retry()
@@ -82,11 +94,10 @@ async function onLogout() {
 
 <template>
 	<UDashboardGroup unit="rem">
-		<a href="#dashboard-content" class="sr-only focus:not-sr-only"
-			>Skip to content</a
-		>
+		<a href="#dashboard-content" class="sr-only focus:not-sr-only">Skip to content</a>
 
 		<UDashboardSidebar
+			v-model:open="sidebarOpen"
 			v-model:collapsed="sidebarCollapsed"
 			collapsible
 			:resizable="false"
@@ -115,8 +126,11 @@ async function onLogout() {
 			<template #footer>
 				<UserMenu
 					:username="session.session?.username ?? ''"
+					:display-name="session.session?.displayName"
+					:email="session.session?.email"
 					:collapsed="sidebarCollapsed"
 					@logout="onLogout"
+					@open-sheet="openAccountSheet"
 				/>
 			</template>
 		</UDashboardSidebar>
@@ -164,26 +178,29 @@ async function onLogout() {
 			<template #body>
 				<div
 					id="dashboard-content"
-					:class="
-						fullBleed ? 'flex h-full min-h-0 flex-1 flex-col' : ''
-					"
+					:class="fullBleed ? 'flex h-full min-h-0 flex-1 flex-col' : ''"
 				>
 					<OfflineBanner />
 
-					<AppBoot v-if="session.status === 'checking'" />
+					<AppBoot v-if="showBoot" />
 					<ErrorView
 						v-else-if="session.status === 'error'"
 						kind="error"
 						@retry="onRetry"
 					/>
-					<div
-						v-else
-						:class="fullBleed ? 'flex min-h-0 flex-1 flex-col' : ''"
-					>
+					<div v-else :class="fullBleed ? 'flex min-h-0 flex-1 flex-col' : ''">
 						<slot />
 					</div>
 				</div>
 			</template>
 		</UDashboardPanel>
+
+		<AccountMenuSheet
+			v-model:open="accountSheetOpen"
+			:username="session.session?.username ?? ''"
+			:display-name="session.session?.displayName"
+			:email="session.session?.email"
+			@logout="onLogout"
+		/>
 	</UDashboardGroup>
 </template>