feat: PrimeVue replaced by Nuxt UI using token files from web/src/theme, with AuthShell, DashboardShell, AppBoot and the route guards from routes.md

web/src/components/DashboardShell.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useSessionStore } from '@/stores/session'
+import AppBoot from '@/components/AppBoot.vue'
+import ErrorView from '@/components/ErrorView.vue'
+import OfflineBanner from '@/components/OfflineBanner.vue'
+
+const route = useRoute()
+const session = useSessionStore()
+
+const navItems = [
+	{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
+	{ label: 'Articles', to: '/article', icon: 'i-lucide-file-text' },
+	{ label: 'Integration', to: '/integration', icon: 'i-lucide-plug' },
+]
+
+const pageTitle = computed(() => (route.meta.title as string) ?? '')
+
+function onRetry() {
+	session.retry()
+}
+</script>
+
+<template>
+	<UDashboardGroup unit="rem">
+		<a href="#dashboard-content" class="sr-only focus:not-sr-only">Skip to content</a>
+
+		<UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4">
+			<template #header>
+				<span class="font-semibold">RenewCMS</span>
+			</template>
+
+			<UNavigationMenu orientation="vertical" :items="navItems" aria-label="Main" />
+
+			<template #footer>
+				<span>Log out</span>
+			</template>
+		</UDashboardSidebar>
+
+		<UDashboardPanel>
+			<template #header>
+				<UDashboardNavbar :title="pageTitle">
+					<template #leading>
+						<UDashboardSidebarCollapse />
+					</template>
+					<template #right>
+						<slot name="navbar-right" />
+					</template>
+				</UDashboardNavbar>
+				<UBreadcrumb :items="[{ label: pageTitle }]" />
+			</template>
+
+			<template #body>
+				<div id="dashboard-content">
+					<OfflineBanner />
+
+					<AppBoot v-if="session.status === 'checking'" />
+					<ErrorView
+						v-else-if="session.status === 'error'"
+						kind="error"
+						@retry="onRetry"
+					/>
+					<div v-else>
+						<h1>{{ pageTitle }}</h1>
+						<slot />
+					</div>
+				</div>
+			</template>
+		</UDashboardPanel>
+	</UDashboardGroup>
+</template>