Chris Olson
a68c343647
Backup and restore: restore from Settings (any backup in the folder, or an
uploaded file) or from the command line with scripts/restore.sh. Each restore
checks the file first, saves a copy of the current data so it can be undone,
and keeps the person restoring signed in. Backups are now single
self-contained files. Drilled end to end: last night's backup brings
everything back exactly, including onto an empty new machine.
Speed: a phone's first load is 147 KB compressed (target 150). The ideas box,
account menu and sign-in screens load on demand, a small built-in toast
replaces sonner, the Inter font is trimmed to the characters used, and files
and API answers are served compressed. Every screen's data comes back in
under 100 ms with 50,000 transactions (server/bench).
Accessibility: no WCAG 2.2 AA issues on any screen in either theme. Darker
status text colors, 44 px touch targets on phones, reduced motion honoured,
and focus returns after dialogs close.
Also: an in-app guide ("How Spendlight works"), OFX/QFX/QBO import, and tags
on individual parts of a split purchase.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
2.2 KiB
TypeScript
47 lines
2.2 KiB
TypeScript
import type { AlertItem } from '@spendlight/shared';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { ArrowRight, CircleAlert, Lightbulb, PartyPopper, TriangleAlert, X } from 'lucide-react';
|
|
import { Link } from 'react-router';
|
|
import { api } from '@/lib/api';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const LOOK = {
|
|
bad: { icon: CircleAlert, tone: 'bg-bad/12 text-bad-fg' },
|
|
warn: { icon: TriangleAlert, tone: 'bg-warn/14 text-warn-fg' },
|
|
good: { icon: PartyPopper, tone: 'bg-good/12 text-good-fg' },
|
|
info: { icon: Lightbulb, tone: 'bg-accent text-accent-foreground' },
|
|
} as const;
|
|
|
|
/** One insight or alert: what happened, why it matters, and a way to see the transactions. */
|
|
export function AlertCard({ alert, compact }: { alert: AlertItem; compact?: boolean }) {
|
|
const client = useQueryClient();
|
|
const dismiss = useMutation({
|
|
mutationFn: () => api(`/alerts/${alert.id}/dismiss`, { method: 'POST' }),
|
|
onSuccess: () => client.invalidateQueries({ queryKey: ['alerts'] }),
|
|
});
|
|
const { icon: Icon, tone } = LOOK[alert.severity];
|
|
return (
|
|
<div className={cn('group relative flex gap-3.5 rounded-2xl border bg-card p-4 shadow-soft', compact && 'p-3.5')}>
|
|
<span className={cn('flex size-9 shrink-0 items-center justify-center rounded-xl [&_svg]:size-[18px]', tone)}>
|
|
<Icon strokeWidth={2} />
|
|
</span>
|
|
<div className="min-w-0 flex-1 pr-6">
|
|
<p className="text-[14.5px] font-medium leading-snug">{alert.title}</p>
|
|
{alert.body ? <p className="mt-0.5 text-[13px] leading-relaxed text-muted-foreground">{alert.body}</p> : null}
|
|
{alert.link ? (
|
|
<Link to={alert.link} className="mt-1.5 inline-flex items-center gap-1 text-[13px] font-medium text-primary">
|
|
See {alert.link.startsWith('/activity') ? 'transactions' : 'details'} <ArrowRight className="size-3.5" />
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<button
|
|
onClick={() => dismiss.mutate()}
|
|
className="absolute right-2.5 top-2.5 flex size-8 items-center justify-center rounded-lg text-muted-foreground opacity-70 transition hover:bg-muted hover:opacity-100"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|