70 lines
2.8 KiB
JavaScript
70 lines
2.8 KiB
JavaScript
import { useEffect, useRef, useState } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { APP_VERSION, RELEASE_NOTES } from '@/lib/version';
|
|
import { Sparkles } from 'lucide-react';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { api } from '@/api';
|
|
|
|
// Written on close so the dialog doesn't flash during the brief window before
|
|
// /me resolves on repeat visits. The backend is authoritative; this is a cache.
|
|
const LS_KEY = `bt-release-seen-${APP_VERSION}`;
|
|
|
|
export function ReleaseNotesDialog() {
|
|
const { hasNewVersion, setHasNewVersion } = useAuth();
|
|
const [open, setOpen] = useState(false);
|
|
const titleRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (hasNewVersion) setOpen(true);
|
|
}, [hasNewVersion]);
|
|
|
|
const handleClose = () => {
|
|
localStorage.setItem(LS_KEY, '1');
|
|
setOpen(false);
|
|
setHasNewVersion(false); // optimistic — don't wait for the server
|
|
api.acknowledgeVersion().catch(() => {}); // fire-and-forget
|
|
const prev = document.activeElement;
|
|
if (prev?.focus) setTimeout(() => prev.focus(), 0);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={v => { if (!v) handleClose(); }}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
|
|
<Sparkles className="h-4 w-4 text-primary" />
|
|
</div>
|
|
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
v{RELEASE_NOTES.version} · {RELEASE_NOTES.date}
|
|
</span>
|
|
</div>
|
|
<DialogTitle ref={titleRef} className="text-xl">What's new</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
Release highlights for BillTracker v{RELEASE_NOTES.version}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="mt-2 space-y-3" role="list" aria-label="Release highlights">
|
|
{RELEASE_NOTES.highlights.map((item, i) => (
|
|
<div key={i} className="flex gap-3 items-start" role="listitem">
|
|
<span className="text-lg leading-none mt-0.5" aria-hidden="true">{item.icon}</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">{item.title}</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-border flex items-center justify-end">
|
|
<Button size="sm" onClick={handleClose}>
|
|
Got it
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|