diff --git a/frontend/css/app.css b/frontend/css/app.css index e3f6e06..403fb09 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -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; } diff --git a/frontend/index.html b/frontend/index.html index 49f0b92..9a91336 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -364,6 +364,11 @@
+
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js index 2a40ee8..ea45173 100644 --- a/frontend/js/calendar.js +++ b/frontend/js/calendar.js @@ -36,7 +36,10 @@ let weekStartDay = 'monday'; let state = { currentDate: new Date(), - selectedDate: null, // separate from currentDate; used for month-view selection + // Default to today so the month-view selection is anchored to a fixed date. + // (If left null the view falls back to currentDate, which then appears to + // "follow" the cells while navigating/scrolling before any explicit click.) + selectedDate: new Date(), currentView: 'month', events: [], accounts: [], @@ -681,6 +684,8 @@ function renderCalendarList() { // Eye-off (hide external calendar) and trash (delete local/ical) icons. const EYE_OFF = ``; const TRASH = ``; + const BELL = ``; + const BELL_OFF = ``; // Build a single flat list of all calendars. The source/account is shown // inline (small, grey) next to the name and section headers are gone, so the @@ -690,6 +695,7 @@ function renderCalendarList() { (acc.calendars || []).filter(c => !c.sidebar_hidden).forEach(cal => { entries.push({ key: `caldav:${cal.id}`, source: 'caldav', dataId: `data-cal-id="${cal.id}"`, name: cal.name, color: cal.color || '#4285f4', enabled: cal.enabled, + reminders: true, remindersEnabled: cal.reminders_enabled !== false, sourceLabel: acc.name, remove: { icon: EYE_OFF, title: t('hide_cal') } }); }); }); @@ -697,6 +703,7 @@ function renderCalendarList() { state.localCalendars.filter(c => c.owned !== false && !c.group).forEach(cal => { entries.push({ key: `local:${cal.id}`, source: 'local', dataId: `data-cal-id="${cal.id}"`, name: cal.name, color: cal.color, enabled: cal.enabled, + reminders: true, remindersEnabled: cal.reminders_enabled !== false, sourceLabel: t('cal_local'), groupVisible: cal.id === groupVisibleId, remove: { icon: TRASH, title: t('remove_cal') } }); }); @@ -715,12 +722,14 @@ function renderCalendarList() { state.icalSubscriptions.forEach(sub => { entries.push({ key: `ical:${sub.id}`, source: 'ical', dataId: `data-sub-id="${sub.id}"`, name: sub.name, color: sub.color, enabled: sub.enabled, + reminders: true, remindersEnabled: sub.reminders_enabled !== false, sourceLabel: t('cal_ical'), remove: { icon: TRASH, title: t('remove_ical_sub') } }); }); state.googleAccounts.forEach(acc => { (acc.calendars || []).filter(c => !c.sidebar_hidden).forEach(cal => { entries.push({ key: `google:${cal.id}`, source: 'google', dataId: `data-cal-id="${cal.id}"`, name: cal.name, color: cal.color || '#4285f4', enabled: cal.enabled, + reminders: true, remindersEnabled: cal.reminders_enabled !== false, sourceLabel: acc.email, remove: { icon: EYE_OFF, title: t('hide_cal') } }); }); }); @@ -728,6 +737,7 @@ function renderCalendarList() { (acc.calendars || []).filter(c => !c.sidebar_hidden).forEach(cal => { entries.push({ key: `homeassistant:${cal.id}`, source: 'homeassistant', dataId: `data-cal-id="${cal.id}"`, name: cal.name, color: cal.color || '#03a9f4', enabled: cal.enabled, + reminders: true, remindersEnabled: cal.reminders_enabled !== false, sourceLabel: acc.name, remove: { icon: EYE_OFF, title: t('hide_cal') } }); }); }); @@ -756,6 +766,7 @@ function renderCalendarList() { ${escHtml(e.name)} ${e.isGroupCal ? `${groupIconSvg('people', 13)}` : ''} ${e.groupVisible ? `${groupIconSvg('people', 13)}` : ''} + ${e.reminders ? `` : ''} ${e.remove ? `` : ''}
` ).join(''); @@ -825,6 +836,37 @@ function renderCalendarList() { }); }); + // ── Reminder bell handlers (toggle reminders_enabled per calendar) ── + container.querySelectorAll('.cal-item-bell').forEach(btn => { + btn.addEventListener('click', async e => { + e.stopPropagation(); + const source = btn.dataset.source; + const id = parseInt(btn.dataset.calId || btn.dataset.subId); + let cal = null; + if (source === 'caldav') { + for (const acc of state.accounts) { const c = acc.calendars.find(c => c.id === id); if (c) cal = c; } + } else if (source === 'local') { + cal = state.localCalendars.find(c => c.id === id); + } else if (source === 'ical') { + cal = state.icalSubscriptions.find(s => s.id === id); + } else if (source === 'google') { + for (const acc of state.googleAccounts) { const c = acc.calendars.find(c => c.id === id); if (c) cal = c; } + } else if (source === 'homeassistant') { + for (const acc of state.haAccounts) { const c = acc.calendars.find(c => c.id === id); if (c) cal = c; } + } + if (!cal) return; + const newVal = cal.reminders_enabled === false; // toggle + const path = source === 'ical' + ? `/ical/subscriptions/${id}` + : `/${source}/calendars/${id}`; + try { + await api.put(path, { reminders_enabled: newVal }); + cal.reminders_enabled = newVal; + renderCalendarList(); + } catch (err) { showToast(err.message, true); } + }); + }); + // ── Color dot handlers ───────────────────────────────── container.querySelectorAll('.cal-item-dot').forEach(dot => { dot.addEventListener('click', async e => { @@ -1463,15 +1505,24 @@ function populateCalendarSelect(selectedId) { sel.appendChild(opt); }); }); - // Local calendars (group calendars marked with 👥 so group events can be - // created from anywhere, not just the group view). - state.localCalendars.filter(c => !c.sidebar_hidden).forEach(cal => { + // Local calendars. Group calendars are collected under a "Groups" optgroup + // (no emoji — a native