66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { APP_VERSION, RELEASE_NOTES } from '@/lib/version';
|
|
import { Sparkles } from 'lucide-react';
|
|
|
|
const STORAGE_KEY = `bt-release-seen-${APP_VERSION}`;
|
|
|
|
export function ReleaseNotesDialog() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const seen = localStorage.getItem(STORAGE_KEY);
|
|
if (!seen) setOpen(true);
|
|
}, []);
|
|
|
|
const handleClose = () => {
|
|
localStorage.setItem(STORAGE_KEY, 'true');
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(o) => { if (!o) 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">
|
|
What's new in v{RELEASE_NOTES.version}
|
|
</span>
|
|
</div>
|
|
<DialogTitle className="text-xl">Bill Tracker is brand new</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="mt-2 space-y-3">
|
|
{RELEASE_NOTES.highlights.map((item, i) => (
|
|
<div key={i} className="flex gap-3 items-start">
|
|
<span className="text-lg leading-none mt-0.5">{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">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-border flex items-center justify-between">
|
|
<a
|
|
href="/legacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Access original UI →
|
|
</a>
|
|
<Button size="sm" onClick={handleClose}>
|
|
Get started
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|