diff --git a/src/app/features/room/message/RemindMeDialog.tsx b/src/app/features/room/message/RemindMeDialog.tsx index b9216c117..15250ad18 100644 --- a/src/app/features/room/message/RemindMeDialog.tsx +++ b/src/app/features/room/message/RemindMeDialog.tsx @@ -62,7 +62,6 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const [customOpen, setCustomOpen] = useState(false); - const [cancelling, setCancelling] = useState>(new Set()); const def = useMemo(() => defaultCustomDate(), []); const [dateValue, setDateValue] = useState(() => toLocalDate(def)); const [timeValue, setTimeValue] = useState(() => toLocalTime(def)); @@ -83,21 +82,13 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind if (customOpen) dateInputRef.current?.focus(); }, [customOpen]); - const handleCancelExisting = async (timestamp: number) => { - if (cancelling.has(timestamp)) return; - setCancelling((prev) => new Set(prev).add(timestamp)); - setError(null); - try { - await removeReminder(eventId, timestamp); - } catch { - setError('Could not cancel reminder. Try again.'); - } finally { - setCancelling((prev) => { - const next = new Set(prev); - next.delete(timestamp); - return next; - }); - } + const handleCancelExisting = (timestamp: number) => { + // Optimistic, matching removeBookmark: the shared account-data store drops + // the reminder locally at once (no rollback) and re-syncs from the server. + // We deliberately show no inline error — the store has no rollback path, so a + // failed write simply reappears on the next sync rather than leaving a stale + // "couldn't cancel" message beside an already-vanished row. + removeReminder(eventId, timestamp).catch(() => undefined); }; const commit = async (timestamp: number) => { @@ -191,8 +182,10 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind {existing.length === 1 ? 'Reminder set' : 'Reminders set'} - {existing.map((r) => ( - + {existing.map((r, idx) => ( + // Composite key: two custom reminders on one message can share + // a minute-precision timestamp; index keeps React keys unique. + {formatFriendlyDateTime(r.timestamp)} @@ -202,7 +195,6 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind radii="300" variant="SurfaceVariant" fill="None" - disabled={cancelling.has(r.timestamp)} onClick={() => handleCancelExisting(r.timestamp)} aria-label={`Cancel reminder for ${formatFriendlyDateTime(r.timestamp)}`} >