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

web/src/components/UpdateStatusBlock.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 	title: string
 	text: string
 	meta?: string
+	tag?: string
 	live?: 'polite' | 'off'
 }>()
 
@@ -37,10 +38,21 @@ const spinning = computed(() => props.icon === 'i-lucide-loader-circle')
 			/>
 		</span>
 		<div class="flex min-w-0 flex-1 flex-col gap-1">
-			<span class="text-base font-semibold text-highlighted">{{ title }}</span>
+			<div class="flex flex-wrap items-center gap-2">
+				<span class="text-base font-semibold text-highlighted">{{ title }}</span>
+				<span
+					v-if="tag"
+					data-testid="update-tag"
+					class="inline-flex h-5 items-center border border-warning bg-default px-1.5 font-mono text-[0.6875rem] font-medium text-warning"
+					>{{ tag }}</span
+				>
+			</div>
 			<span class="text-sm text-pretty text-toned">{{ text }}</span>
 			<slot />
 			<span v-if="meta" class="text-xs/5 text-muted">{{ meta }}</span>
+			<div v-if="$slots.action" class="flex pt-2">
+				<slot name="action" />
+			</div>
 		</div>
 	</div>
 </template>