feat: restart to apply update, privileged helper, rollback

web/src/components/RestartOverlay.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import AppLogo from '@/components/AppLogo.vue'
+import type { RestartKind } from '@/composables/useUpdate'
+import { formatStartedAt, formatStartedWithAge } from '@/lib/updateFormat'
+
+const LOGO_SIZE = 26
+
+const props = defineProps<{
+	kind: RestartKind | null
+	version: string
+	startedAt: string
+	slow: boolean
+	now: number
+}>()
+
+const emit = defineEmits<{
+	reload: []
+}>()
+
+const copy = computed(() => {
+	if (props.slow) {
+		return {
+			title: 'Still restarting',
+			text: 'This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now.',
+		}
+	}
+	if (props.kind === 'update') {
+		return {
+			title: `Installing version ${props.version}`,
+			text: 'Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back.',
+		}
+	}
+	return {
+		title: 'Restarting your site',
+		text: 'This takes about 10 seconds. This page reloads on its own when the site is back.',
+	}
+})
+
+const meta = computed(() =>
+	props.slow
+		? formatStartedWithAge(props.startedAt, new Date(props.now))
+		: formatStartedAt(props.startedAt),
+)
+</script>
+
+<template>
+	<div
+		role="status"
+		data-testid="restart-overlay"
+		class="fixed inset-0 z-70 flex items-center justify-center bg-muted p-6"
+	>
+		<div class="flex w-full max-w-110 flex-col items-start gap-4">
+			<AppLogo :size="LOGO_SIZE" />
+			<div class="flex flex-col gap-1.5">
+				<h2 class="text-xl/7.5 font-semibold text-highlighted" data-testid="restart-title">
+					{{ copy.title }}
+				</h2>
+				<span class="text-base/5.5 text-pretty text-toned" data-testid="restart-text">{{
+					copy.text
+				}}</span>
+			</div>
+			<div
+				role="progressbar"
+				aria-label="Restarting"
+				class="h-1 w-full overflow-hidden bg-accented"
+			>
+				<div class="restart-bar h-1 w-7/20 bg-primary" />
+			</div>
+			<span class="text-xs text-muted" data-testid="restart-meta">{{ meta }}</span>
+			<UButton
+				v-if="slow"
+				color="neutral"
+				variant="outline"
+				class="h-11 gap-1.5 border border-accented bg-default px-3.5 text-highlighted ring-0 md:h-8"
+				@click="emit('reload')"
+			>
+				Reload page
+			</UButton>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.restart-bar {
+	margin-left: 30%;
+	animation: restart-slide 1.6s ease-in-out infinite alternate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.restart-bar {
+		animation: none;
+	}
+}
+
+@keyframes restart-slide {
+	from {
+		margin-left: 0;
+	}
+	to {
+		margin-left: 65%;
+	}
+}
+</style>