feat: update button (download, verify, stage)

web/src/components/UpdateBanner.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-export type UpdateBannerState = 'available'
+import { computed } from 'vue'
 
-defineProps<{
+export type UpdateBannerState = 'available' | 'ready'
+
+const props = defineProps<{
 	state: UpdateBannerState
 	version: string
 }>()
 
+const COPY = {
+	available: {
+		icon: 'i-lucide-circle-arrow-up',
+		title: (version: string) => `Version ${version} is available`,
+		description: 'Update it from Settings. It takes about 2 minutes and the site stays online.',
+	},
+	ready: {
+		icon: 'i-lucide-circle-check',
+		title: (version: string) => `Version ${version} is ready to install`,
+		description:
+			'Restart from Settings to finish. The site is unavailable for about 10 seconds.',
+	},
+} as const
+
+const copy = computed(() => COPY[props.state])
+
 const emit = defineEmits<{
 	'go-to-settings': []
 	dismiss: []
@@ -19,9 +37,9 @@ const emit = defineEmits<{
 		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."
+		:icon="copy.icon"
+		:title="copy.title(version)"
+		:description="copy.description"
 		: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',