feat: complete dockerization (optional)

web/src/components/ServerCommand.vue

@@ -4,9 +4,13 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
-const props = defineProps<{
-	line: string
-}>()
+const props = withDefaults(
+	defineProps<{
+		line: string
+		showNote?: boolean
+	}>(),
+	{ showNote: true },
+)
 
 const emit = defineEmits<{
 	copy: []
@@ -50,7 +54,7 @@ async function copyLine() {
 				{{ buttonLabel }}
 			</UButton>
 		</div>
-		<span class="text-xs/5 text-muted">{{
+		<span v-if="showNote" class="text-xs/5 text-muted">{{
 			t('They run this once on the server. After that, Update and Restart appear here.')
 		}}</span>
 	</div>

web/src/components/UpdatesCard.vue

@@ -10,9 +10,11 @@ import type { RestartKind, UpdateStatus } from '@/composables/useUpdate'
 import type { UserRole } from '@/composables/useApi'
 import type { UpdateApplyPhase, UpdateCheckPhase } from '@/stores/update'
 import {
+	CONTAINER_UPDATE_COMMAND,
 	ENABLE_BROWSER_UPDATES_COMMAND,
 	VERIFYING_ANNOUNCEMENT,
 	browserUpdatesDocsUrl,
+	containerUpdatesDocsUrl,
 	displayVersion,
 	downloadAnnouncement,
 	formatDownloadProgress,
@@ -383,6 +385,21 @@ const block = computed<Block>(() => {
 			meta: props.status.finished_at ? formatUpdatedAt(props.status.finished_at) : undefined,
 		}
 	}
+	if (showContainerGuidance.value) {
+		return {
+			tone: 'info',
+			icon: 'i-lucide-info',
+			get title() {
+				return t('Version {0} is available', [newVersion.value])
+			},
+			get text() {
+				return t(
+					'You have {0}. This site runs in Docker, so it updates by pulling a new image. Run the commands below on the server.',
+					[props.status.current],
+				)
+			},
+		}
+	}
 	if (props.status.available && isOwner.value) {
 		return {
 			tone: 'info',
@@ -435,9 +452,15 @@ const restartAvailable = computed(
 	() => canApplyView.value && (props.status.state === 'idle' || isDone.value),
 )
 
+const showContainerGuidance = computed(
+	() =>
+		isOwner.value && props.status.container && props.status.available && props.phase === 'idle',
+)
+
 const showServerGuidance = computed(
 	() =>
 		isOwner.value &&
+		!props.status.container &&
 		!props.status.can_apply &&
 		props.status.available &&
 		props.phase === 'idle',
@@ -550,7 +573,10 @@ function onAction(button: ActionButton) {
 
 const showNotes = computed(
 	() =>
-		showServerGuidance.value || applyView.value === 'available' || applyView.value === 'ready',
+		showServerGuidance.value ||
+		showContainerGuidance.value ||
+		applyView.value === 'available' ||
+		applyView.value === 'ready',
 )
 
 const notes = computed(() => {
@@ -625,6 +651,12 @@ const notes = computed(() => {
 
 		<ServerCommand v-if="showServerGuidance" :line="ENABLE_BROWSER_UPDATES_COMMAND" />
 
+		<ServerCommand
+			v-if="showContainerGuidance"
+			:line="CONTAINER_UPDATE_COMMAND"
+			:show-note="false"
+		/>
+
 		<div v-if="rowButtons.length" class="flex flex-col gap-2 md:flex-row md:items-center">
 			<UButton
 				v-for="button in rowButtons"
@@ -660,6 +692,17 @@ const notes = computed(() => {
 			<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
 		</a>
 
+		<a
+			v-if="showContainerGuidance && status.release_url"
+			:href="containerUpdatesDocsUrl(status.release_url)"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
+		>
+			{{ t('How to update') }}
+			<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
+		</a>
+
 		<a
 			v-if="isDone && status.release_url"
 			:href="status.release_url"