From 02577c75021f5a8756db1cc9313e645064354c19 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sun, 29 Mar 2026 14:10:28 +0200
Subject: [PATCH] feat: add calendar hover preview settings and functionality

---
 app/[locale]/calendar/page.tsx            | 24 +++++++++++++++--------
 components/settings/calendar-settings.tsx | 18 +++++++++++++++++
 locales/en/common.json                    |  9 ++++++++-
 stores/settings-store.ts                  |  4 ++++
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/[locale]/calendar/page.tsx b/app/[locale]/calendar/page.tsx
index a526546f..712cc606 100644
--- a/app/[locale]/calendar/page.tsx
+++ b/app/[locale]/calendar/page.tsx
@@ -69,7 +69,7 @@ export default function CalendarPage() {
     setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
     refreshAllSubscriptions,
   } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar } = useSettingsStore();
+  const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview } = useSettingsStore();
   const taskStore = useTaskStore();
   const fetchTasksFn = useTaskStore(state => state.fetchTasks);
   const { identities } = useIdentityStore();
@@ -338,18 +338,26 @@ export default function CalendarPage() {
 
   const handleHoverEvent = useCallback((event: CalendarEvent, anchorRect: DOMRect) => {
     if (isMobile) return;
+    if (calendarHoverPreview === 'off') return;
     if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
     // Don't show hover popover if the sidebar is already open for this event
     if (showEventModal && editEvent?.id === event.id) return;
-    setDetailEvent(event);
-    setDetailAnchorRect(anchorRect);
-  }, [isMobile, showEventModal, editEvent]);
+    if (calendarHoverPreview === 'delay-500ms' || calendarHoverPreview === 'delay-1s' || calendarHoverPreview === 'delay-2s') {
+      const ms = calendarHoverPreview === 'delay-500ms' ? 500 : calendarHoverPreview === 'delay-1s' ? 1000 : 2000;
+      hoverTimerRef.current = setTimeout(() => {
+        setDetailEvent(event);
+        setDetailAnchorRect(anchorRect);
+      }, ms);
+    } else {
+      setDetailEvent(event);
+      setDetailAnchorRect(anchorRect);
+    }
+  }, [isMobile, calendarHoverPreview, showEventModal, editEvent]);
 
   const handleHoverLeave = useCallback(() => {
-    hoverTimerRef.current = setTimeout(() => {
-      setDetailEvent(null);
-      setDetailAnchorRect(null);
-    }, 200);
+    if (hoverTimerRef.current) { clearTimeout(hoverTimerRef.current); hoverTimerRef.current = null; }
+    setDetailEvent(null);
+    setDetailAnchorRect(null);
   }, []);
 
   const handleEditFromDetail = useCallback(() => {
diff --git a/components/settings/calendar-settings.tsx b/components/settings/calendar-settings.tsx
index 9834a614..479b99c1 100644
--- a/components/settings/calendar-settings.tsx
+++ b/components/settings/calendar-settings.tsx
@@ -19,6 +19,7 @@ export function CalendarSettings() {
     showWeekNumbers,
     enableCalendarTasks,
     showTasksOnCalendar,
+    calendarHoverPreview,
     updateSetting,
   } = useSettingsStore();
   const { isFeatureEnabled } = usePolicyStore();
@@ -80,6 +81,23 @@ export function CalendarSettings() {
         />
       </SettingItem>
 
+      <SettingItem
+        label={t('hover_preview')}
+        description={t('hover_preview_desc')}
+      >
+        <Select
+          value={calendarHoverPreview}
+          onChange={(value) => updateSetting('calendarHoverPreview', value as 'off' | 'instant' | 'delay-500ms' | 'delay-1s' | 'delay-2s')}
+          options={[
+            { value: 'instant', label: t('hover_preview_instant') },
+            { value: 'delay-500ms', label: t('hover_preview_delay_500ms') },
+            { value: 'delay-1s', label: t('hover_preview_delay_1s') },
+            { value: 'delay-2s', label: t('hover_preview_delay_2s') },
+            { value: 'off', label: t('hover_preview_off') },
+          ]}
+        />
+      </SettingItem>
+
       {isFeatureEnabled('calendarTasksEnabled') && (
       <>
       <SettingItem
diff --git a/locales/en/common.json b/locales/en/common.json
index 799f68b8..aa745dc7 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1981,7 +1981,14 @@
       "enable_tasks": "Enable tasks",
       "enable_tasks_desc": "Show a tasks view in the calendar for managing to-dos",
       "show_tasks_on_calendar": "Show tasks on calendar",
-      "show_tasks_on_calendar_desc": "Display task chips on the day and week calendar views"
+      "show_tasks_on_calendar_desc": "Display task chips on the day and week calendar views",
+      "hover_preview": "Event hover preview",
+      "hover_preview_desc": "Show a detail popover when hovering over calendar events",
+      "hover_preview_instant": "Instant",
+      "hover_preview_delay_500ms": "0.5-second delay",
+      "hover_preview_delay_1s": "1-second delay",
+      "hover_preview_delay_2s": "2-second delay",
+      "hover_preview_off": "Disabled"
     },
     "days": {
       "monday": "Monday",
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index 594b7bec..8af5efd4 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -34,6 +34,7 @@ export type AttachmentPosition = 'beside-sender' | 'below-header';
 export type ToolbarPosition = 'top' | 'below-subject';
 export type ArchiveMode = 'single' | 'year' | 'month';
 export type MailLayout = 'split' | 'focus';
+export type CalendarHoverPreview = 'off' | 'instant' | 'delay-500ms' | 'delay-1s' | 'delay-2s';
 
 export type HoverAction = 'delete' | 'star' | 'markRead' | 'archive' | 'tag' | 'spam';
 export type HoverActionsMode = 'inline' | 'floating';
@@ -134,6 +135,7 @@ interface SettingsState {
   // Calendar
   showTimeInMonthView: boolean;
   showWeekNumbers: boolean;
+  calendarHoverPreview: CalendarHoverPreview;
 
   // Calendar Tasks
   enableCalendarTasks: boolean;
@@ -257,6 +259,7 @@ const DEFAULT_SETTINGS = {
   // Calendar
   showTimeInMonthView: false,
   showWeekNumbers: false,
+  calendarHoverPreview: 'delay-500ms' as CalendarHoverPreview,
 
   // Calendar Tasks
   enableCalendarTasks: false,
@@ -370,6 +373,7 @@ export const useSettingsStore = create<SettingsState>()(
           expandedFilterView: state.expandedFilterView,
           showTimeInMonthView: state.showTimeInMonthView,
           showWeekNumbers: state.showWeekNumbers,
+          calendarHoverPreview: state.calendarHoverPreview,
           toolbarPosition: state.toolbarPosition,
           hideAccountSwitcher: state.hideAccountSwitcher,
           showRailAccountList: state.showRailAccountList,