Kyle Pope
9635401fe8
Backend: Include overdue todos and snoozed reminders in /upcoming response, add end_datetime/snoozed_until/is_overdue fields, widen snooze schema to accept 1-1440 minutes for 1h/3h/tomorrow options. Frontend: Full UpcomingWidget rewrite with sticky day separators (Today highlighted in accent), collapsible groups, past-event toggle, focus mode (Today + Tomorrow), color-coded left borders, compact type pills, relative time for today's items, item count badge, and inline quick actions (complete todo, snooze/dismiss reminder on hover). Card fills available height with no dead space. DashboardPage always renders widget (no duplicate empty state). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import { Bell, X } from 'lucide-react';
|
|
import { getRelativeTime } from '@/lib/date-utils';
|
|
import SnoozeDropdown from '@/components/reminders/SnoozeDropdown';
|
|
import type { Reminder } from '@/types';
|
|
|
|
interface AlertBannerProps {
|
|
alerts: Reminder[];
|
|
onDismiss: (id: number) => void;
|
|
onSnooze: (id: number, minutes: number) => void;
|
|
}
|
|
|
|
export default function AlertBanner({ alerts, onDismiss, onSnooze }: AlertBannerProps) {
|
|
if (alerts.length === 0) return null;
|
|
|
|
return (
|
|
<div className="rounded-lg border border-border border-l-4 border-l-orange-500 bg-card animate-slide-up">
|
|
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-border">
|
|
<div className="p-1.5 rounded-md bg-orange-500/10">
|
|
<Bell className="h-4 w-4 text-orange-400" />
|
|
</div>
|
|
<span className="font-heading text-sm font-semibold">Alerts</span>
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-orange-500/15 text-orange-400 font-medium">
|
|
{alerts.length}
|
|
</span>
|
|
</div>
|
|
<div className="divide-y divide-border max-h-48 overflow-y-auto">
|
|
{alerts.map((alert) => (
|
|
<div
|
|
key={alert.id}
|
|
className="flex items-center gap-3 px-4 py-2 hover:bg-card-elevated transition-colors duration-150"
|
|
>
|
|
<div className="w-1.5 h-1.5 rounded-full bg-orange-400 shrink-0" />
|
|
<span className="text-sm font-medium truncate flex-1 min-w-0">{alert.title}</span>
|
|
<span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap">
|
|
{alert.remind_at ? getRelativeTime(alert.remind_at) : ''}
|
|
</span>
|
|
<SnoozeDropdown onSnooze={(m) => onSnooze(alert.id, m)} label={alert.title} direction="down" />
|
|
<button
|
|
onClick={() => onDismiss(alert.id)}
|
|
aria-label={`Dismiss "${alert.title}"`}
|
|
className="flex items-center gap-1 px-1.5 py-1 rounded hover:bg-accent/10 hover:text-accent text-muted-foreground transition-colors shrink-0"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
<span className="text-[11px] font-medium">Dismiss</span>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|