feat: web impl.

2025-12-15 06:24:23 +03:00 · 2025-11-20 16:08:16 +00:00
parent 56a4159295
commit 2e15012257
16 changed files with 354 additions and 90 deletions
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1326,6 +1326,8 @@
  "maintenance_end": "End maintenance mode",
  "maintenance_end_error": "Failed to end maintenance mode.",
  "maintenance_logged_in_as": "Currently logged in as {user}",
+  "maintenance_task_backup": "Creating a backup of the existing database...",
+  "maintenance_task_restore": "Restoring the chosen backup...",
  "maintenance_title": "Temporarily Unavailable",
  "make": "Make",
  "manage_geolocation": "Manage location",
--- a/mobile/openapi/README.md
+++ b/mobile/openapi/README.md
@@ -159,10 +159,10 @@ Class | Method | HTTP request | Description
 *LibrariesApi* | [**scanLibrary**](doc//LibrariesApi.md#scanlibrary) | **POST** /libraries/{id}/scan | Scan a library
 *LibrariesApi* | [**updateLibrary**](doc//LibrariesApi.md#updatelibrary) | **PUT** /libraries/{id} | Update a library
 *LibrariesApi* | [**validate**](doc//LibrariesApi.md#validate) | **POST** /libraries/{id}/validate | Validate library settings
-*MaintenanceAdminApi* | [**deleteBackup**](doc//MaintenanceAdminApi.md#deletebackup) | **DELETE** /admin/maintenance/admin/maintenance/backups/{filename} | Delete backup
-*MaintenanceAdminApi* | [**listBackups**](doc//MaintenanceAdminApi.md#listbackups) | **GET** /admin/maintenance/admin/maintenance/backups/list | List backups
+*MaintenanceAdminApi* | [**deleteBackup**](doc//MaintenanceAdminApi.md#deletebackup) | **DELETE** /admin/maintenance/backups/{filename} | Delete backup
+*MaintenanceAdminApi* | [**listBackups**](doc//MaintenanceAdminApi.md#listbackups) | **GET** /admin/maintenance/backups/list | List backups
 *MaintenanceAdminApi* | [**maintenanceLogin**](doc//MaintenanceAdminApi.md#maintenancelogin) | **POST** /admin/maintenance/login | Log into maintenance mode
-*MaintenanceAdminApi* | [**maintenanceStatus**](doc//MaintenanceAdminApi.md#maintenancestatus) | **GET** /admin/maintenance/admin/maintenance/status | Get maintenance mode status
+*MaintenanceAdminApi* | [**maintenanceStatus**](doc//MaintenanceAdminApi.md#maintenancestatus) | **GET** /admin/maintenance/status | Get maintenance mode status
 *MaintenanceAdminApi* | [**setMaintenanceMode**](doc//MaintenanceAdminApi.md#setmaintenancemode) | **POST** /admin/maintenance | Set maintenance mode
 *MapApi* | [**getMapMarkers**](doc//MapApi.md#getmapmarkers) | **GET** /map/markers | Retrieve map markers
 *MapApi* | [**reverseGeocode**](doc//MapApi.md#reversegeocode) | **GET** /map/reverse-geocode | Reverse geocode coordinates
--- a/mobile/openapi/lib/api/maintenance_admin_api.dart
+++ b/mobile/openapi/lib/api/maintenance_admin_api.dart
@@ -27,7 +27,7 @@ class MaintenanceAdminApi {
  /// * [String] filename (required):
  Future<Response> deleteBackupWithHttpInfo(String filename,) async {
    // ignore: prefer_const_declarations
-    final apiPath = r'/admin/maintenance/admin/maintenance/backups/{filename}'
+    final apiPath = r'/admin/maintenance/backups/{filename}'
      .replaceAll('{filename}', filename);

    // ignore: prefer_final_locals
@@ -72,7 +72,7 @@ class MaintenanceAdminApi {
  /// Note: This method returns the HTTP [Response].
  Future<Response> listBackupsWithHttpInfo() async {
    // ignore: prefer_const_declarations
-    final apiPath = r'/admin/maintenance/admin/maintenance/backups/list';
+    final apiPath = r'/admin/maintenance/backups/list';

    // ignore: prefer_final_locals
    Object? postBody;
@@ -176,7 +176,7 @@ class MaintenanceAdminApi {
  /// Note: This method returns the HTTP [Response].
  Future<Response> maintenanceStatusWithHttpInfo() async {
    // ignore: prefer_const_declarations
-    final apiPath = r'/admin/maintenance/admin/maintenance/status';
+    final apiPath = r'/admin/maintenance/status';

    // ignore: prefer_final_locals
    Object? postBody;
--- a/open-api/immich-openapi-specs.json
+++ b/open-api/immich-openapi-specs.json
@@ -372,7 +372,7 @@
        "x-immich-state": "Alpha"
      }
    },
-    "/admin/maintenance/admin/maintenance/backups/list": {
+    "/admin/maintenance/backups/list": {
      "get": {
        "description": "Get the list of the successful and failed backups",
        "operationId": "listBackups",
@@ -419,7 +419,7 @@
        "x-immich-state": "Alpha"
      }
    },
-    "/admin/maintenance/admin/maintenance/backups/{filename}": {
+    "/admin/maintenance/backups/{filename}": {
      "delete": {
        "description": "Delete a backup by its filename",
        "operationId": "deleteBackup",
@@ -469,40 +469,6 @@
        "x-immich-state": "Alpha"
      }
    },
-    "/admin/maintenance/admin/maintenance/status": {
-      "get": {
-        "description": "Fetch information about the currently running maintenance action.",
-        "operationId": "maintenanceStatus",
-        "parameters": [],
-        "responses": {
-          "200": {
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/MaintenanceStatusResponseDto"
-                }
-              }
-            },
-            "description": ""
-          }
-        },
-        "summary": "Get maintenance mode status",
-        "tags": [
-          "Maintenance (admin)"
-        ],
-        "x-immich-history": [
-          {
-            "version": "v9.9.9",
-            "state": "Added"
-          },
-          {
-            "version": "v9.9.9",
-            "state": "Alpha"
-          }
-        ],
-        "x-immich-state": "Alpha"
-      }
-    },
    "/admin/maintenance/login": {
      "post": {
        "description": "Login with maintenance token or cookie to receive current information and perform further actions.",
@@ -547,6 +513,40 @@
        "x-immich-state": "Alpha"
      }
    },
+    "/admin/maintenance/status": {
+      "get": {
+        "description": "Fetch information about the currently running maintenance action.",
+        "operationId": "maintenanceStatus",
+        "parameters": [],
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/MaintenanceStatusResponseDto"
+                }
+              }
+            },
+            "description": ""
+          }
+        },
+        "summary": "Get maintenance mode status",
+        "tags": [
+          "Maintenance (admin)"
+        ],
+        "x-immich-history": [
+          {
+            "version": "v9.9.9",
+            "state": "Added"
+          },
+          {
+            "version": "v9.9.9",
+            "state": "Alpha"
+          }
+        ],
+        "x-immich-state": "Alpha"
+      }
+    },
    "/admin/notifications": {
      "post": {
        "description": "Create a new notification for a specific user.",
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -48,18 +48,18 @@ export type MaintenanceListBackupsResponseDto = {
    backups: string[];
    failedBackups: string[];
 };
-export type MaintenanceStatusResponseDto = {
-    action: MaintenanceAction;
-    error?: string;
-    progress?: number;
-    task?: string;
-};
 export type MaintenanceLoginDto = {
    token?: string;
 };
 export type MaintenanceAuthDto = {
    username: string;
 };
+export type MaintenanceStatusResponseDto = {
+    action: MaintenanceAction;
+    error?: string;
+    progress?: number;
+    task?: string;
+};
 export type NotificationCreateDto = {
    data?: object;
    description?: string | null;
@@ -1862,7 +1862,7 @@ export function listBackups(opts?: Oazapfts.RequestOpts) {
    return oazapfts.ok(oazapfts.fetchJson<{
        status: 200;
        data: MaintenanceListBackupsResponseDto;
-    }>("/admin/maintenance/admin/maintenance/backups/list", {
+    }>("/admin/maintenance/backups/list", {
        ...opts
    }));
 }
@@ -1872,22 +1872,11 @@ export function listBackups(opts?: Oazapfts.RequestOpts) {
 export function deleteBackup({ filename }: {
    filename: string;
 }, opts?: Oazapfts.RequestOpts) {
-    return oazapfts.ok(oazapfts.fetchText(`/admin/maintenance/admin/maintenance/backups/${encodeURIComponent(filename)}`, {
+    return oazapfts.ok(oazapfts.fetchText(`/admin/maintenance/backups/${encodeURIComponent(filename)}`, {
        ...opts,
        method: "DELETE"
    }));
 }
-/**
- * Get maintenance mode status
- */
-export function maintenanceStatus(opts?: Oazapfts.RequestOpts) {
-    return oazapfts.ok(oazapfts.fetchJson<{
-        status: 200;
-        data: MaintenanceStatusResponseDto;
-    }>("/admin/maintenance/admin/maintenance/status", {
-        ...opts
-    }));
-}
 /**
 * Log into maintenance mode
 */
@@ -1903,6 +1892,17 @@ export function maintenanceLogin({ maintenanceLoginDto }: {
        body: maintenanceLoginDto
    })));
 }
+/**
+ * Get maintenance mode status
+ */
+export function maintenanceStatus(opts?: Oazapfts.RequestOpts) {
+    return oazapfts.ok(oazapfts.fetchJson<{
+        status: 200;
+        data: MaintenanceStatusResponseDto;
+    }>("/admin/maintenance/status", {
+        ...opts
+    }));
+}
 /**
 * Create a notification
 */
--- a/server/src/controllers/maintenance.controller.ts
+++ b/server/src/controllers/maintenance.controller.ts
@@ -22,7 +22,7 @@ import { FilenameParamDto } from 'src/validation';
 export class MaintenanceController {
  constructor(private service: MaintenanceService) {}

-  @Get('admin/maintenance/status')
+  @Get('status')
  @Endpoint({
    summary: 'Get maintenance mode status',
    description: 'Fetch information about the currently running maintenance action.',
@@ -66,7 +66,7 @@ export class MaintenanceController {
    }
  }

-  @Get('admin/maintenance/backups/list')
+  @Get('backups/list')
  @Endpoint({
    summary: 'List backups',
    description: 'Get the list of the successful and failed backups',
@@ -77,7 +77,7 @@ export class MaintenanceController {
    return this.service.listBackups();
  }

-  @Delete('admin/maintenance/backups/:filename')
+  @Delete('backups/:filename')
  @Endpoint({
    summary: 'Delete backup',
    description: 'Delete a backup by its filename',
--- a/server/src/maintenance/maintenance-worker.service.spec.ts
+++ b/server/src/maintenance/maintenance-worker.service.spec.ts
@@ -245,6 +245,7 @@ describe(MaintenanceWorkerService.name, () => {

      expect(maintenanceEphemeralStateRepositoryMock.setStatus).toHaveBeenCalledWith({
        action: MaintenanceAction.RestoreDatabase,
+        task: 'ready',
        progress: expect.any(Number),
      });

--- a/server/src/maintenance/maintenance-worker.service.ts
+++ b/server/src/maintenance/maintenance-worker.service.ts
@@ -250,6 +250,7 @@ export class MaintenanceWorkerService {
  private async restoreBackup(filename: string): Promise<void> {
    this.setStatus({
      action: MaintenanceAction.RestoreDatabase,
+      task: 'ready',
      progress: 0,
    });

--- a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { handleError } from '$lib/utils/handle-error';
+  import { deleteBackup, listBackups, MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
+  import { Button, Card, CardBody, HStack, modalManager, Stack, Text } from '@immich/ui';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  interface Props {
+    backups?: string[];
+    showDelete?: boolean;
+  }
+
+  let props: Props = $props();
+
+  function mapBackups(filenames: string[]) {
+    return filenames.map((filename) => {
+      const date = /(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})/.exec(filename);
+      const hoursAgo = date
+        ? Math.floor(
+            (+Date.now() - +new Date(`${date[1]}-${date[2]}-${date[3]}T${date[4]}:${date[5]}:${date[6]}`)) / 36e5,
+          )
+        : null;
+
+      return {
+        filename,
+        hoursAgo,
+      };
+    });
+  }
+
+  let deleting = new SvelteSet();
+  let backups = $state(mapBackups(props.backups ?? []));
+
+  onMount(async () => {
+    if (!props.backups) {
+      const result = await listBackups();
+      backups = mapBackups(result.backups);
+    }
+  });
+
+  async function restore(filename: string) {
+    const confirm = await modalManager.showDialog({
+      confirmText: 'Restore',
+      title: 'Restore Backup',
+      prompt: 'Immich will be wiped and restored from the chosen backup. A backup will be created before continuing.',
+    });
+
+    if (confirm) {
+      try {
+        await setMaintenanceMode({
+          setMaintenanceModeDto: {
+            action: MaintenanceAction.RestoreDatabase,
+            restoreBackupFilename: filename,
+          },
+        });
+      } catch (error) {
+        handleError(error, $t('admin.maintenance_start_error'));
+      }
+    }
+  }
+
+  async function remove(filename: string) {
+    const confirm = await modalManager.showDialog({
+      confirmText: 'Delete',
+      title: 'Delete Backup',
+      prompt: 'This file will be irrevocably deleted.',
+    });
+
+    if (confirm) {
+      try {
+        deleting.add(filename);
+
+        await deleteBackup({
+          filename,
+        });
+
+        backups = backups.filter((backup) => backup.filename !== filename);
+      } catch (error) {
+        handleError(error, 'failed to delete backup i18n');
+      } finally {
+        deleting.delete(filename);
+      }
+    }
+  }
+</script>
+
+<Stack gap={2} class="mt-4 text-left">
+  {#each backups as backup (backup.filename)}
+    <Card>
+      <CardBody>
+        <HStack>
+          <Stack class="flex-grow">
+            <Text>{backup.filename}</Text>
+            {#if typeof backup.hoursAgo === 'number'}
+              {#if backup.hoursAgo <= 24}
+                <Text color="info" size="small">Created {backup.hoursAgo} hours ago</Text>
+              {:else if backup.hoursAgo <= 48}
+                <Text color="info" size="small">Created 1 day ago</Text>
+              {:else}
+                <Text color="info" size="small">Created {Math.floor(backup.hoursAgo / 24)} days ago</Text>
+              {/if}
+            {/if}
+          </Stack>
+          <Button size="small" disabled={deleting.has(backup.filename)} onclick={() => restore(backup.filename)}
+            >Restore</Button
+          >
+          {#if props.showDelete}
+            <Button
+              size="small"
+              color="danger"
+              disabled={deleting.has(backup.filename)}
+              onclick={() => remove(backup.filename)}>Delete</Button
+            >
+          {/if}
+        </HStack>
+      </CardBody>
+    </Card>
+  {/each}
+</Stack>
--- a/web/src/lib/sidebars/AdminSidebar.svelte
+++ b/web/src/lib/sidebars/AdminSidebar.svelte
@@ -11,6 +11,7 @@
    <NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
    <NavbarItem title={$t('jobs')} href={AppRoute.ADMIN_JOBS} icon={mdiSync} />
    <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
+    <NavbarItem title={$t('admin.maintenance_settings')} href={AppRoute.ADMIN_MAINTENANCE} icon={mdiCog} />
    <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
    <NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />
  </div>
--- a/web/src/lib/stores/maintenance.store.ts
+++ b/web/src/lib/stores/maintenance.store.ts
@@ -3,5 +3,5 @@ import { writable } from 'svelte/store';

 export const maintenanceStore = {
  auth: writable<MaintenanceAuthDto>(),
-  status: writable<MaintenanceStatusResponseDto>(),
+  status: writable<MaintenanceStatusResponseDto | undefined>(),
 };
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -72,16 +72,17 @@
  afterNavigate(() => {
    showNavigationLoadingBar = false;
  });
+
+  const { release, serverRestarting } = websocketStore;
+
  run(() => {
-    if ($user || page.url.pathname.startsWith(AppRoute.MAINTENANCE)) {
+    if ($user || $serverRestarting || page.url.pathname.startsWith(AppRoute.MAINTENANCE)) {
      openWebsocketConnection();
    } else {
      closeWebsocketConnection();
    }
  });

-  const { release, serverRestarting } = websocketStore;
-
  const handleRelease = async (release?: ReleaseEvent) => {
    if (!release?.isAvailable || !$user.isAdmin) {
      return;
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,17 +1,39 @@
 <script lang="ts">
  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
  import { AppRoute } from '$lib/constants';
-  import { Button, Heading } from '@immich/ui';
+  import { websocketStore } from '$lib/stores/websocket';
+  import { handleError } from '$lib/utils/handle-error';
+  import { MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
+  import { Button, Heading, Stack } from '@immich/ui';
  import { t } from 'svelte-i18n';
+
+  async function switchToMaintenance() {
+    try {
+      websocketStore.serverRestarting.set({
+        isMaintenanceMode: true,
+      });
+
+      await setMaintenanceMode({
+        setMaintenanceModeDto: {
+          action: MaintenanceAction.RestoreDatabase,
+        },
+      });
+    } catch (error) {
+      handleError(error, $t('admin.maintenance_start_error'));
+    }
+  }
 </script>

 <AuthPageLayout>
  <div class="flex flex-col place-items-center text-center gap-12">
    <Heading size="large" color="primary" tag="h1">{$t('welcome_to_immich')}</Heading>
-    <div>
+    <Stack>
      <Button href={AppRoute.AUTH_REGISTER} size="medium" shape="round">
        <span class="px-2 font-semibold">{$t('getting_started')}</span>
      </Button>
-    </div>
+      <Button size="medium" shape="round" variant="ghost" onclick={switchToMaintenance}>
+        <span class="px-2 font-semibold">Restore from backup</span>
+      </Button>
+    </Stack>
  </div>
 </AuthPageLayout>
--- a/web/src/routes/admin/maintenance/+page.svelte
+++ b/web/src/routes/admin/maintenance/+page.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import MaintenanceBackupsList from '$lib/components/maintenance/MaintenanceBackupsList.svelte';
+  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import { QueryParameter } from '$lib/constants';
+  import { handleError } from '$lib/utils/handle-error';
+  import { MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
+  import { Button, HStack, Text } from '@immich/ui';
+  import { mdiProgressWrench, mdiRefresh } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  async function switchToMaintenance() {
+    try {
+      await setMaintenanceMode({
+        setMaintenanceModeDto: {
+          action: MaintenanceAction.Start,
+        },
+      });
+    } catch (error) {
+      handleError(error, $t('admin.maintenance_start_error'));
+    }
+  }
+</script>
+
+<AdminPageLayout title={data.meta.title}>
+  {#snippet buttons()}
+    <HStack gap={1}>
+      <Button
+        leadingIcon={mdiProgressWrench}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        onclick={switchToMaintenance}
+      >
+        <Text class="hidden md:block">Switch to maintenance mode</Text>
+      </Button>
+    </HStack>
+  {/snippet}
+
+  <section id="setting-content" class="flex place-content-center sm:mx-4">
+    <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
+      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+        <SettingAccordion
+          title="Restore database backup"
+          subtitle="Rollback to an earlier database state using a backup file"
+          icon={mdiRefresh}
+          key="backups"
+        >
+          <MaintenanceBackupsList backups={data.backups} showDelete />
+        </SettingAccordion>
+      </SettingAccordionState>
+    </section>
+  </section>
+</AdminPageLayout>
--- a/web/src/routes/admin/maintenance/+page.ts
+++ b/web/src/routes/admin/maintenance/+page.ts
@@ -0,0 +1,17 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { listBackups } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+  const { backups } = await listBackups();
+  const $t = await getFormatter();
+
+  return {
+    backups,
+    meta: {
+      title: $t('admin.maintenance_settings'),
+    },
+  };
+}) satisfies PageLoad;
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import MaintenanceBackupsList from '$lib/components/maintenance/MaintenanceBackupsList.svelte';
  import FormatMessage from '$lib/elements/FormatMessage.svelte';
  import { maintenanceStore } from '$lib/stores/maintenance.store';
  import { handleError } from '$lib/utils/handle-error';
  import { MaintenanceAction, setMaintenanceMode } from '@immich/sdk';
-  import { Button, Heading, Link } from '@immich/ui';
+  import { Button, Heading, Link, Scrollable, Text } from '@immich/ui';
  import { t } from 'svelte-i18n';

-  const { auth } = maintenanceStore;
+  const { auth, status } = maintenanceStore;

  // strip token from URL after load
  const url = new URL(location.href);
@@ -27,30 +28,66 @@
      handleError(error, $t('maintenance_end_error'));
    }
  }
+
+  let error = $derived(
+    $status?.error
+      ?.split('\n')
+      .filter((line) => !line.includes('drop cascades'))
+      .join('\n'),
+  );
 </script>

 <AuthPageLayout>
  <div class="flex flex-col place-items-center text-center gap-4">
-    <Heading size="large" color="primary" tag="h1">{$t('maintenance_title')}</Heading>
-    <p>
-      <FormatMessage key="maintenance_description">
-        {#snippet children({ tag, message })}
-          {#if tag === 'link'}
-            <Link href="https://docs.immich.app/administration/maintenance-mode">
-              {message}
-            </Link>
+    {#if $status?.action === MaintenanceAction.RestoreDatabase}
+      {#if $status.task}
+        <Heading size="large" color="primary" tag="h1">Restoring Database</Heading>
+        {#if $status.error}
+          <Scrollable class="max-h-[320px]">
+            <pre class="text-left"><code>{error}</code></pre>
+          </Scrollable>
+        {:else}
+          <div class="w-[240px] h-[10px] bg-gray-300 rounded-full overflow-hidden">
+            <div
+              class="h-full bg-blue-600 transition-all duration-700"
+              style="width: {($status.progress || 0) * 100}%"
+            ></div>
+          </div>
+          {#if $status.task !== 'ready'}
+            <Text>{$t(`maintenance_task_${$status.task as 'backup' | 'restore'}`)}</Text>
          {/if}
-        {/snippet}
-      </FormatMessage>
-    </p>
-    {#if $auth}
+        {/if}
+      {:else}
+        <Heading size="large" color="primary" tag="h1">Restore From Backup</Heading>
+        <Scrollable class="max-h-[320px]">
+          <MaintenanceBackupsList />
+        </Scrollable>
+        <Button onclick={end}>Cancel</Button>
+      {/if}
+    {:else}
+      <Heading size="large" color="primary" tag="h1">{$t('maintenance_title')}</Heading>
      <p>
-        {$t('maintenance_logged_in_as', {
-          values: {
-            user: $auth.username,
-          },
-        })}
+        <FormatMessage key="maintenance_description">
+          {#snippet children({ tag, message })}
+            {#if tag === 'link'}
+              <Link href="https://docs.immich.app/administration/maintenance-mode">
+                {message}
+              </Link>
+            {/if}
+          {/snippet}
+        </FormatMessage>
      </p>
+      {#if $auth}
+        <p>
+          {$t('maintenance_logged_in_as', {
+            values: {
+              user: $auth.username,
+            },
+          })}
+        </p>
+      {/if}
+    {/if}
+    {#if $auth && ($status?.action === MaintenanceAction.Start || $status?.error)}
      <Button onclick={end}>{$t('maintenance_end')}</Button>
    {/if}
  </div>