feat: signed releases, release feed, notification (read-only)

web/src/components/DashboardShell.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
+import { useUpdateStore } from '@/stores/update'
 import { useApi } from '@/composables/useApi'
 import { useSidebarCollapsed } from '@/composables/useSidebarCollapsed'
 import AppBoot from '@/components/AppBoot.vue'
@@ -9,6 +10,7 @@ import AccountMenuSheet from '@/components/AccountMenuSheet.vue'
 import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
 import OfflineBanner from '@/components/OfflineBanner.vue'
+import UpdatePill from '@/components/UpdatePill.vue'
 import UserMenu from '@/components/UserMenu.vue'
 
 const props = withDefaults(
@@ -43,6 +45,7 @@ const bodyUi = computed(() => {
 const route = useRoute()
 const router = useRouter()
 const session = useSessionStore()
+const update = useUpdateStore()
 const api = useApi()
 
 const navItems = computed(() =>
@@ -52,7 +55,7 @@ const navItems = computed(() =>
 		{ label: 'Media', to: '/media', icon: 'i-lucide-images' },
 		{ label: 'Users', to: '/users', icon: 'i-lucide-users' },
 		{ label: 'Integration', to: '/integration', icon: 'i-lucide-plug' },
-		{ label: 'Settings', to: '/settings', icon: 'i-lucide-settings' },
+		{ label: 'Settings', to: '/settings', icon: 'i-lucide-settings', slot: 'settings' },
 	].map((item) => ({
 		...item,
 		active: route.path === item.to || route.path.startsWith(`${item.to}/`),
@@ -154,7 +157,11 @@ async function onLogout() {
 				:collapsed="sidebarCollapsed"
 				aria-label="Main"
 				:ui="navUi"
-			/>
+			>
+				<template #settings-trailing>
+					<UpdatePill v-if="update.showCue && !sidebarCollapsed" />
+				</template>
+			</UNavigationMenu>
 
 			<template #footer>
 				<UserMenu
@@ -172,7 +179,6 @@ async function onLogout() {
 		<UDashboardPanel :ui="{ body: bodyUi }">
 			<template #header>
 				<UDashboardNavbar
-					:toggle="{ ui: { leadingIcon: 'size-5' } }"
 					:title="pageTitle"
 					:ui="{
 						root: 'h-14 gap-1 bg-default px-1.5 sm:px-1.5 lg:h-12 lg:gap-2 lg:px-6',
@@ -181,6 +187,23 @@ async function onLogout() {
 						toggle: 'size-11 justify-center',
 					}"
 				>
+					<template #toggle>
+						<span class="relative lg:hidden">
+							<UDashboardSidebarToggle
+								data-slot="toggle"
+								color="neutral"
+								variant="ghost"
+								class="size-11 justify-center"
+								:ui="{ leadingIcon: 'size-5' }"
+							/>
+							<span
+								v-if="update.showCue"
+								role="img"
+								aria-label="Update available"
+								class="absolute top-2.25 right-2.25 size-2.5 border-2 border-(--ui-bg) bg-info"
+							/>
+						</span>
+					</template>
 					<template #leading>
 						<UDashboardSidebarCollapse
 							color="neutral"