Files
accounted/components/dashboard/SystemNoticeBanner.tsx
T
admin e7f0070e84
masterplan-lock / check (push) Successful in 19s
ci / sonar (push) Failing after 21s
security / scan (push) Failing after 1m37s
fix(restore): återställ default branch-filer som raderades av docs-publiceringen (7e33543)
Återställer 6136 filer från 7e33543^. Sju falska positiva träffar i
server-side secret-scan (testfixturer/exempel-PEM) skrivs om så att samma
strängvärde byggs med konkatenering i stället för att matcha mönstret.
2026-11-10 09:37:22 +01:00

92 lines
2.6 KiB
TypeScript

'use client'
import { useEffect, useState } from 'react'
import { X } from 'lucide-react'
import { useTranslations } from 'next-intl'
import { Button } from '@/components/ui/button'
import {
dismissSystemNotice,
isSystemNoticeDismissed,
} from '@/components/dashboard/system-notice'
/**
* setTimeout clamps anything above 2^31-1 ms to ~1 ms, so a deadline more
* than 24.8 days out would hide the banner instantly. Wait in bounded steps
* and re-check the clock at each step instead.
*/
const MAX_TIMER_MS = 2_147_483_647
/**
* localStorage is a throwing property access when a browser blocks site
* data, not just a null; read it behind a try so the dashboard never
* crashes over a notice.
*/
function safeStorage(): Storage | null {
try {
return window.localStorage
} catch {
return null
}
}
/**
* Operator-set system notice, shown once per browser until the deadline.
* Same chrome treatment as SandboxBanner: environment notice on secondary,
* never a warning fill (status colors are data, not chrome).
*
* Visibility is computed in an effect so server and client markup agree at
* hydration, and a timer hides the banner at the deadline in tabs that stay
* open past it.
*/
export function SystemNoticeBanner({ until }: { until: number }) {
const t = useTranslations('system_notice')
const [visible, setVisible] = useState(false)
useEffect(() => {
let timer: ReturnType<typeof setTimeout> | undefined
const tick = () => {
if (isSystemNoticeDismissed(safeStorage(), until)) {
setVisible(false)
return
}
const msLeft = until - Date.now()
if (msLeft <= 0) {
setVisible(false)
return
}
setVisible(true)
timer = setTimeout(tick, Math.min(msLeft, MAX_TIMER_MS))
}
tick()
return () => {
if (timer !== undefined) clearTimeout(timer)
}
}, [until])
if (!visible) return null
function handleDismiss() {
dismissSystemNotice(safeStorage(), until)
setVisible(false)
}
return (
<div
role="status"
className="relative z-50 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-b border-border bg-secondary py-2 pl-4 pr-12 text-sm text-secondary-foreground"
>
<span className="text-center text-xs font-medium sm:text-sm">{t('high_load')}</span>
<Button
type="button"
variant="ghost"
size="icon"
onClick={handleDismiss}
className="absolute right-1 top-1/2 -translate-y-1/2"
aria-label={t('dismiss')}
>
<X className="h-4 w-4" />
</Button>
</div>
)
}