Kyle Pope
b41b0b6635
Batch 1+2 implementation (17 items): plus button rotation, card hover glow consistency, DayBriefing container with Sparkles icon, WeekTimeline hover scale + pulsing today dot + dot tooltips, countdown urgency scaling, CalendarWidget time progress bar + current event highlight + empty state, TodoWidget inline complete + empty state, dashboard auto-refresh (2min), optimistic todo completion, "Updated Xm ago" with refresh button, keyboard quick-add (Ctrl+N → e/t/r), progress rings on stat cards, staggered row entrance in Upcoming, content crossfade, prefers-reduced-motion support, ARIA attributes on dropdown menu, and hover:bg-card-elevated consistency. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { format, startOfWeek, addDays, isSameDay, isBefore, startOfDay } from 'date-fns';
|
|
import type { UpcomingItem } from '@/types';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface WeekTimelineProps {
|
|
items: UpcomingItem[];
|
|
}
|
|
|
|
const typeColors: Record<string, string> = {
|
|
todo: 'bg-blue-400',
|
|
event: 'bg-purple-400',
|
|
reminder: 'bg-orange-400',
|
|
};
|
|
|
|
export default function WeekTimeline({ items }: WeekTimelineProps) {
|
|
const navigate = useNavigate();
|
|
const today = useMemo(() => startOfDay(new Date()), []);
|
|
const weekStart = useMemo(() => startOfWeek(today, { weekStartsOn: 1 }), [today]);
|
|
|
|
const days = useMemo(() => {
|
|
return Array.from({ length: 7 }, (_, i) => {
|
|
const date = addDays(weekStart, i);
|
|
const dayItems = items.filter((item) => {
|
|
const itemDate = item.datetime ? new Date(item.datetime) : new Date(item.date);
|
|
return isSameDay(startOfDay(itemDate), date);
|
|
});
|
|
return {
|
|
date,
|
|
key: format(date, 'yyyy-MM-dd'),
|
|
dayName: format(date, 'EEE'),
|
|
dayNum: format(date, 'd'),
|
|
isToday: isSameDay(date, today),
|
|
isPast: isBefore(date, today),
|
|
items: dayItems,
|
|
};
|
|
});
|
|
}, [weekStart, today, items]);
|
|
|
|
return (
|
|
<div className="flex items-stretch gap-1 sm:gap-2">
|
|
{days.map((day) => (
|
|
<div
|
|
key={day.key}
|
|
onClick={() => navigate('/calendar', { state: { date: day.key, view: 'timeGridDay' } })}
|
|
className={cn(
|
|
'flex-1 flex flex-col items-center gap-1 sm:gap-1.5 rounded-lg py-2 sm:py-3 px-1 sm:px-2 transition-all duration-200 border cursor-pointer',
|
|
day.isToday
|
|
? 'bg-accent/10 border-accent/30 shadow-[0_0_12px_hsl(var(--accent-color)/0.15)]'
|
|
: day.isPast
|
|
? 'border-transparent opacity-50 hover:opacity-75 hover:scale-[1.04] hover:bg-card-elevated'
|
|
: 'border-transparent hover:border-border/50 hover:scale-[1.04] hover:bg-card-elevated'
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
'text-[9px] sm:text-[11px] font-medium uppercase tracking-wider',
|
|
day.isToday ? 'text-accent' : 'text-muted-foreground'
|
|
)}
|
|
>
|
|
{day.dayName}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
'font-heading text-sm sm:text-lg font-semibold leading-none',
|
|
day.isToday ? 'text-accent' : 'text-foreground'
|
|
)}
|
|
>
|
|
{day.dayNum}
|
|
</span>
|
|
<div className="flex items-center gap-1 mt-0.5 min-h-[8px] relative">
|
|
{day.items.slice(0, 4).map((item) => (
|
|
<div
|
|
key={`${item.type}-${item.id}`}
|
|
className={cn(
|
|
'w-1.5 h-1.5 rounded-full',
|
|
!item.color && (typeColors[item.type] || 'bg-muted-foreground')
|
|
)}
|
|
style={item.color ? { backgroundColor: item.color } : undefined}
|
|
title={item.title}
|
|
/>
|
|
))}
|
|
{day.items.length > 4 && (
|
|
<span className="text-[9px] text-muted-foreground font-medium">
|
|
+{day.items.length - 4}
|
|
</span>
|
|
)}
|
|
{day.isToday && (
|
|
<div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-accent animate-pulse-dot" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|