refac: revamp the update flow in settings so the user has better visibility that it has to restart when update downloaded

web/src/components/UpdatesCard.vue

@@ -39,6 +39,7 @@ interface Block {
 	title: string
 	text: string
 	meta?: string
+	tag?: string
 }
 
 interface ActionButton {
@@ -187,8 +188,11 @@ const applyBlocks = computed<Record<ApplyView, Block>>(() => ({
 		},
 	},
 	ready: {
-		tone: 'success',
-		icon: 'i-lucide-circle-check',
+		tone: 'warning',
+		icon: 'i-lucide-clock',
+		get tag() {
+			return t('Pending')
+		},
 		get title() {
 			return t('Version {0} is ready to install', [newVersion.value])
 		},
@@ -498,6 +502,12 @@ const actionButtons = computed<ActionButton[]>(() => {
 	})
 })
 
+const inBlockButton = computed(() =>
+	applyView.value === 'ready' ? (actionButtons.value[0] ?? null) : null,
+)
+
+const rowButtons = computed(() => (inBlockButton.value ? [] : actionButtons.value))
+
 const showRestartHint = computed(() => actionButtons.value.includes(plainRestartButton))
 
 function withPlainRestart(button: ActionButton) {
@@ -577,6 +587,7 @@ const notes = computed(() => {
 			:title="block.title"
 			:text="block.text"
 			:meta="block.meta"
+			:tag="block.tag"
 			:live="progressView ? 'off' : 'polite'"
 		>
 			<UpdateProgress
@@ -585,6 +596,25 @@ const notes = computed(() => {
 				:text="progressView.text"
 				:value="progressView.value"
 			/>
+			<template v-if="inBlockButton" #action>
+				<UButton
+					:data-testid="inBlockButton.action === 'restart' ? 'restart-button' : undefined"
+					:color="inBlockButton.primary ? 'primary' : 'neutral'"
+					:variant="inBlockButton.primary ? 'solid' : 'outline'"
+					:icon="inBlockButton.icon"
+					:disabled="inBlockButton.disabled"
+					class="h-11 justify-center gap-1.5 px-3.5 md:h-8"
+					:class="
+						inBlockButton.primary
+							? ''
+							: 'border border-accented bg-default text-highlighted ring-0'
+					"
+					:ui="{ leadingIcon: 'size-4' }"
+					@click="onAction(inBlockButton)"
+				>
+					{{ inBlockButton.label }}
+				</UButton>
+			</template>
 		</UpdateStatusBlock>
 
 		<p v-if="canApplyView" role="status" data-testid="update-announcer" class="sr-only">
@@ -595,9 +625,9 @@ const notes = computed(() => {
 
 		<ServerCommand v-if="showServerGuidance" :line="ENABLE_BROWSER_UPDATES_COMMAND" />
 
-		<div v-if="actionButtons.length" class="flex flex-col gap-2 md:flex-row md:items-center">
+		<div v-if="rowButtons.length" class="flex flex-col gap-2 md:flex-row md:items-center">
 			<UButton
-				v-for="button in actionButtons"
+				v-for="button in rowButtons"
 				:key="button.label"
 				:data-testid="button.action === 'restart' ? 'restart-button' : undefined"
 				:color="button.primary ? 'primary' : 'neutral'"