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

web/src/components/UpdateBanner.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+export type UpdateBannerState = 'available'
+
+defineProps<{
+	state: UpdateBannerState
+	version: string
+}>()
+
+const emit = defineEmits<{
+	'go-to-settings': []
+	dismiss: []
+}>()
+</script>
+
+<template>
+	<UAlert
+		role="region"
+		aria-label="Update available"
+		color="info"
+		variant="soft"
+		orientation="horizontal"
+		icon="i-lucide-circle-arrow-up"
+		:title="`Version ${version} is available`"
+		description="Update it from Settings. It takes about 2 minutes and the site stays online."
+		:ui="{
+			root: 'flex-wrap items-start gap-x-2.5 gap-y-3 border border-default py-3 ring-0 md:flex-nowrap md:items-center',
+			wrapper: 'basis-0 gap-0.5',
+			title: 'text-sm text-highlighted',
+			description: 'mt-0 text-sm/5 text-toned',
+			actions: 'max-md:w-full max-md:basis-full',
+		}"
+	>
+		<template #actions>
+			<div class="flex w-full items-center gap-2">
+				<UButton
+					color="neutral"
+					variant="outline"
+					class="h-11 flex-1 justify-center border border-accented bg-default px-3 text-highlighted ring-0 md:h-8 md:flex-none"
+					@click="emit('go-to-settings')"
+				>
+					Go to Settings
+				</UButton>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					icon="i-lucide-x"
+					aria-label="Dismiss"
+					class="size-11 shrink-0 justify-center text-muted md:size-8"
+					:ui="{ leadingIcon: 'size-4' }"
+					@click="emit('dismiss')"
+				/>
+			</div>
+		</template>
+	</UAlert>
+</template>