feat(app): prompt to reload when a newer deploy is live (#951)

Long-open tabs keep running the JS bundle they first loaded, so a shipped
change can look "missing" (e.g. a new settings field appearing only after a
full reload) until the whole app is reloaded. Add a small, unobtrusive prompt
that detects a newer deploy and offers a one-click reload.

- next.config: inline the deploy's commit SHA into the client bundle as
  NEXT_PUBLIC_BUILD_ID (empty in dev / self-hosted, which disables the check).
- /api/version: public, no-store route returning the running deployment's SHA
  at request time.
- DeployReloadPrompt: compares the two on load, on tab focus, and on a 30-min
  backstop; shows a bottom banner with "Ladda om" on mismatch. Mounted once in
  the root layout. No service worker, degrades to a no-op with no build id.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/api/version/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server'
+
+/**
+ * Public, unauthenticated build-version probe.
+ *
+ * The client compares the id it was built with (NEXT_PUBLIC_BUILD_ID, inlined
+ * into its JS bundle at build time) against this value, which is read at
+ * request time from the currently running deployment. A mismatch means a newer
+ * deploy is live and the open tab is running a stale bundle, so the client
+ * offers a reload (see components/system/DeployReloadPrompt).
+ *
+ * force-dynamic + no-store so it always reflects the live deployment rather
+ * than a value baked in at build.
+ */
+export const dynamic = 'force-dynamic'
+
+export function GET() {
+  const id = process.env.VERCEL_GIT_COMMIT_SHA ?? ''
+  return NextResponse.json({ id }, { headers: { 'Cache-Control': 'no-store' } })
+}

app/layout.tsx

@@ -5,6 +5,7 @@ import Script from "next/script";
 import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 import { Toaster } from "@/components/ui/toaster";
+import { DeployReloadPrompt } from "@/components/system/DeployReloadPrompt";
 import { ThemeProvider } from "@/components/theme-provider";
 import { RecaptLoader } from "@/components/RecaptLoader";
 import { RecaptHideWidget } from "@/components/RecaptHideWidget";
@@ -86,6 +87,7 @@ export default async function RootLayout({
           >
             {children}
             <Toaster />
+            <DeployReloadPrompt />
             <RecaptHideWidget />
           </ThemeProvider>
         </NextIntlClientProvider>