Web: reminders UI, per-calendar reminder toggle, popup/grid polish

- Event popup: new "Reminders" section for local events — show/add/remove
  multiple reminders, prefilled with the global default on new events; sent
  in the local create/update body and synced like any other event field.
- Sidebar calendar list: per-calendar reminder bell toggle (PUTs the new
  reminders_enabled flag); disabled state shown dimmed.
- Date picker: a day click now commits immediately in date-only mode instead
  of requiring an extra "Save" click.
- Start/End: moving the end before the start now shifts the start back
  (mirroring the start handler) instead of showing an error toast.
- Calendar dropdown: group calendars moved under a "Groups" optgroup; dropped
  the 👥 emoji prefix (a native <select> can't render the icon SVG).
- Month grid: selectedDate defaults to today so the highlight no longer
  follows the cells while navigating before any click.
- Today cell tint now derives from --today-color instead of hardcoded blue.
- version v44 -> v45.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-06-09 19:33:40 +02:00
parent 14dea01053
commit db43bad432
6 changed files with 184 additions and 20 deletions

View File

@@ -302,6 +302,10 @@ a { color: var(--primary); text-decoration: none; }
.color-swatch.active { border-color: var(--text-1); }
.ev-color-row { display: flex; align-items: center; gap: 8px; }
.ev-reminders-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ev-reminder-row { display: flex; align-items: center; gap: 8px; }
.ev-reminder-row select { flex: 1; }
.ev-reminder-remove { flex-shrink: 0; }
.ev-color-hex {
flex: 1; height: 36px; padding: 0 10px;
background: var(--bg-hover); border: 1px solid var(--border);
@@ -539,6 +543,11 @@ a { color: var(--primary); text-decoration: none; }
width and only truncates while the button is visible. */
.cal-item-remove { display: none; }
.cal-item:hover .cal-item-remove { display: inline-flex; }
/* Reminder bell: only shown on hover when enabled, but always shown (dimmed)
when disabled so the muted state is visible at a glance. */
.cal-item-bell { display: none; flex-shrink: 0; }
.cal-item:hover .cal-item-bell { display: inline-flex; }
.cal-item-bell.off { display: inline-flex; color: var(--text-3); opacity: .75; }
/* ── Month View ─────────────────────────────────────────── */
.month-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@@ -574,7 +583,7 @@ a { color: var(--primary); text-decoration: none; }
}
.month-col:last-child { border-right: none; }
.month-col:hover { background: var(--bg-hover); }
.month-col.today { background: rgba(66,133,244,.08); }
.month-col.today { background: color-mix(in srgb, var(--today-color) 10%, transparent); }
.month-col.month-selected { background: var(--primary-dim); }
.month-col.month-selected .cell-day { border: 2px solid var(--primary); color: var(--primary); font-weight: 700; }
.month-col.month-selected .cell-day.today { background: var(--today-color); color: #fff; border: none; }