70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { AlertTriangle, X } from "lucide-react";
|
|
import { useUpdateStore, selectBanner } from "@/stores/update-store";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Single-line, low-key update notice. Lives next to the version badge on the
|
|
// login screen — deliberately understated so it doesn't distract from the
|
|
// auth flow. Red variants (security / deprecated) still use red text but
|
|
// stay the same compact shape.
|
|
export function UpdateNotice({ className }: { className?: string }) {
|
|
const banner = useUpdateStore(useShallow(selectBanner));
|
|
const dismiss = useUpdateStore((s) => s.dismiss);
|
|
const startPolling = useUpdateStore((s) => s.startPolling);
|
|
|
|
useEffect(() => {
|
|
startPolling();
|
|
}, [startPolling]);
|
|
|
|
if (!banner) return null;
|
|
|
|
const isRed = banner.variant === "red";
|
|
|
|
const text =
|
|
banner.severity === "security"
|
|
? `Security update${banner.latest ? `: ${banner.latest}` : ""}`
|
|
: banner.severity === "deprecated"
|
|
? "Version no longer supported"
|
|
: `Update available: ${banner.latest ?? ""}`;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"inline-flex items-center gap-1.5 text-[11px] leading-none",
|
|
isRed
|
|
? "text-red-600 dark:text-red-400"
|
|
: "text-muted-foreground/60 hover:text-muted-foreground transition-colors",
|
|
className,
|
|
)}
|
|
role={isRed ? "alert" : "status"}
|
|
>
|
|
{isRed && <AlertTriangle className="w-3 h-3 flex-shrink-0" />}
|
|
{banner.url ? (
|
|
<a
|
|
href={banner.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline-offset-2 hover:underline"
|
|
>
|
|
{text}
|
|
</a>
|
|
) : (
|
|
<span>{text}</span>
|
|
)}
|
|
{banner.dismissible && (
|
|
<button
|
|
type="button"
|
|
onClick={dismiss}
|
|
className="opacity-50 hover:opacity-100 transition-opacity flex-shrink-0"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|