From 1ed2cdae1a0247927149a110ebe8474e8d1db03e Mon Sep 17 00:00:00 2001
From: izzy <me@insrt.uk>
Date: Wed, 5 Nov 2025 17:03:51 +0000
Subject: [PATCH] feat: add a link to maintenance mode documentation

---
 i18n/en.json                            |  2 +-
 web/src/routes/maintenance/+page.svelte | 23 ++++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index 6fec63fb71..35e5fa0991 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1315,7 +1315,7 @@
   "loop_videos_description": "Enable to automatically loop a video in the detail viewer.",
   "main_branch_warning": "You're using a development version; we strongly recommend using a release version!",
   "main_menu": "Main menu",
-  "maintenance_description": "Immich has been put into maintenance mode.",
+  "maintenance_description": "Immich has been put into <link>maintenance mode</link>.",
   "maintenance_exit": "Exit maintenance mode",
   "maintenance_logged_in_as": "Currently logged in as {user}",
   "maintenance_title": "Temporarily Unavailable",
diff --git a/web/src/routes/maintenance/+page.svelte b/web/src/routes/maintenance/+page.svelte
index 99e97a4b4a..5dea0734cb 100644
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -1,22 +1,35 @@
 <script lang="ts">
   import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
-  import { AppRoute } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { maintenanceAuth } from '$lib/stores/maintenance.store';
   import { endMaintenance } from '@immich/sdk';
   import { Button, Heading } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   // strip token from URL after load
-  const query = new URLSearchParams(location.search);
-  if (query.get('token')) {
-    history.replaceState({}, document.title, AppRoute.MAINTENANCE);
+  const url = new URL(location.href);
+  if (url.searchParams.get('token')) {
+    url.searchParams.delete('token');
+    history.replaceState({}, document.title, url);
   }
 </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>{$t('maintenance_description')}</p>
+    <p>
+      <FormatMessage key="maintenance_description">
+        {#snippet children({ tag, message })}
+          {#if tag === 'link'}
+            <span class="font-medium underline">
+              <a href="https://docs.immich.app/administration/maintenance-mode" target="_blank" rel="noopener">
+                {message}
+              </a>
+            </span>
+          {/if}
+        {/snippet}
+      </FormatMessage>
+    </p>
     {#if $maintenanceAuth}
       <p>
         {$t('maintenance_logged_in_as', {