b38ae92d8d
Login screen (with a language picker), header, account menu, sync status, About and Release Notes dialogs, and the version banner are now fully translated in Hungarian, English and German.
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Sparkles, X } from "lucide-react";
|
|
import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
|
|
|
|
// Eye-catching, dismissible bar shown once after the running build's version changes
|
|
// (compares the baked frontend version to the last one the user acknowledged).
|
|
export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
|
|
const { t } = useTranslation();
|
|
const [dismissed, setDismissed] = useState(false);
|
|
const seen = localStorage.getItem(SEEN_VERSION_KEY);
|
|
// Don't nag in un-stamped dev builds, or once this version has been seen.
|
|
const show = FRONTEND_VERSION !== "dev" && seen !== FRONTEND_VERSION && !dismissed;
|
|
if (!show) return null;
|
|
|
|
function markSeen() {
|
|
localStorage.setItem(SEEN_VERSION_KEY, FRONTEND_VERSION);
|
|
setDismissed(true);
|
|
}
|
|
|
|
return (
|
|
<div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
|
|
<Sparkles className="w-4 h-4 text-accent shrink-0" />
|
|
<span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
|
|
<button
|
|
onClick={() => {
|
|
onOpen();
|
|
markSeen();
|
|
}}
|
|
className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
|
|
>
|
|
{t("header.banner.releaseNotes")}
|
|
</button>
|
|
<button
|
|
onClick={markSeen}
|
|
title={t("header.banner.dismiss")}
|
|
className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|