diff --git a/backend/src/index.js b/backend/src/index.js
index e0b14e4..deb78c4 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -5,6 +5,7 @@ import { initDb } from './db.js'
import { noticeRoutes } from './routes/notices.js'
const app = Fastify({ logger: true, trustProxy: true })
+const startedAt = Date.now()
await app.register(cookie)
await app.register(cors, {
@@ -12,7 +13,7 @@ await app.register(cors, {
credentials: true,
})
-app.get('/health', async () => ({ status: 'healthy' }))
+app.get('/health', async () => ({ status: 'healthy', version: process.env.BUILD_VERSION || String(startedAt) }))
await app.register(noticeRoutes)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7d2d075..354e54b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,16 @@
import { AuthGate } from './components/AuthGate'
import { NoticeBoard } from './components/NoticeBoard'
+import { UpdateBanner } from './components/UpdateBanner'
+import { useVersionCheck } from './hooks/useVersionCheck'
export default function App() {
+ const updateAvailable = useVersionCheck('/notices/health')
return (
-
- {user => }
-
+ <>
+
+ {user => }
+
+
+ >
)
}
diff --git a/frontend/src/components/UpdateBanner.tsx b/frontend/src/components/UpdateBanner.tsx
new file mode 100644
index 0000000..b492c67
--- /dev/null
+++ b/frontend/src/components/UpdateBanner.tsx
@@ -0,0 +1,44 @@
+import { RefreshCw } from 'lucide-react'
+
+export function UpdateBanner({ visible }: { visible: boolean }) {
+ if (!visible) return null
+ return (
+
+ A new version is available.
+
+
+ )
+}
diff --git a/frontend/src/hooks/useVersionCheck.ts b/frontend/src/hooks/useVersionCheck.ts
new file mode 100644
index 0000000..e4fed28
--- /dev/null
+++ b/frontend/src/hooks/useVersionCheck.ts
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+const POLL_MS = 2 * 60 * 1000
+
+export function useVersionCheck(healthUrl: string) {
+ const [updateAvailable, setUpdateAvailable] = useState(false)
+
+ useEffect(() => {
+ let seenVersion: string | null = null
+
+ async function check() {
+ try {
+ const res = await fetch(healthUrl, { cache: 'no-store' })
+ if (!res.ok) return
+ const data = await res.json()
+ const v: string | undefined = data.version
+ if (!v) return
+ if (seenVersion === null) {
+ seenVersion = v
+ } else if (v !== seenVersion) {
+ setUpdateAvailable(true)
+ }
+ } catch {
+ // network error — skip silently
+ }
+ }
+
+ check()
+ const interval = setInterval(check, POLL_MS)
+
+ function onVisible() {
+ if (document.visibilityState === 'visible') check()
+ }
+ document.addEventListener('visibilitychange', onVisible)
+
+ return () => {
+ clearInterval(interval)
+ document.removeEventListener('visibilitychange', onVisible)
+ }
+ }, [healthUrl])
+
+ return updateAvailable
+}