feat: Reminder Manager UX — timeline-first grouped layout
Replace 3-row filter panel with a grouped feed (Überfällig / Diese Woche / Dieser Monat / Später). KPI cards are now clickable shortcuts that filter to their time horizon or type (Pre-Market). Filter bar condenses to one row: search + type dropdown + archive toggle. Rows get a left priority-color border (red/orange/yellow). Default status filter is ACTIVE+SNOOZED. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,14 @@ import { ReminderTypeBadge } from './ReminderTypeBadge'
|
||||
import { ReminderDaysIndicator } from './ReminderDaysIndicator'
|
||||
import { useCompleteReminder, useDismissReminder, useSnoozeReminder } from '../../hooks/useReminders'
|
||||
import { useReminderStore } from '../../stores/reminderStore'
|
||||
import { ReminderStatus } from '../../domain/reminder'
|
||||
import { ReminderStatus, ReminderPriority } from '../../domain/reminder'
|
||||
|
||||
const PRIORITY_BORDER: Record<string, string> = {
|
||||
[ReminderPriority.URGENT]: '#dc2626',
|
||||
[ReminderPriority.HIGH]: '#ea580c',
|
||||
[ReminderPriority.MEDIUM]: '#ca8a04',
|
||||
[ReminderPriority.LOW]: 'transparent',
|
||||
}
|
||||
|
||||
const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
|
||||
ACTIVE: 'info',
|
||||
@@ -56,6 +63,8 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
|
||||
snooze.mutate({ id: reminder.id, until: '2026-05-27' })
|
||||
}
|
||||
|
||||
const borderColor = PRIORITY_BORDER[reminder.priority] ?? 'transparent'
|
||||
|
||||
return (
|
||||
<Box
|
||||
onClick={handleRowClick}
|
||||
@@ -64,9 +73,11 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
|
||||
gridTemplateColumns: '100px 130px 1fr 140px 90px 100px 90px',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
px: 2,
|
||||
pl: 1.5,
|
||||
pr: 2,
|
||||
py: 1.25,
|
||||
borderBottom: '1px solid #f1f5f9',
|
||||
borderLeft: `3px solid ${borderColor}`,
|
||||
bgcolor: 'white',
|
||||
cursor: 'pointer',
|
||||
'&:hover': { bgcolor: '#f8fafc' },
|
||||
|
||||
Reference in New Issue
Block a user