fix(widgets): simplify calendar day popover to uncontrolled click-to-open

Replaces the hover+pin+timeout implementation with Mantine Popover's
built-in uncontrolled behavior (click to open, click outside/escape to
close). Removes all component state, mouse handlers, timeout management,
and the cross-popover close machinery from the parent.

- 56 lines removed, 13 added across 3 files
- Border highlight now via CSS aria-expanded selector
- Resolves the messy hover navigation issue (#2637)

packages/widgets/src/calendar/calender-day.module.css

@@ -0,0 +1,7 @@
+.day {
+  border: 2px solid transparent;
+}
+
+.day[aria-expanded="true"] {
+  border-color: var(--mantine-primary-color-filled);
+}

packages/widgets/src/calendar/calender-day.tsx

@@ -1,4 +1,3 @@
-import { useCallback, useState } from "react";
 import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
@@ -6,6 +5,7 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 
 import { CalendarEventList } from "./calendar-event-list";
+import classes from "./calender-day.module.css";
 
 interface CalendarDayProps {
   date: Date;
@@ -13,13 +13,9 @@ interface CalendarDayProps {
   disabled: boolean;
   rootWidth: number;
   rootHeight: number;
-  onOpen: (close: () => void) => void;
 }
 
-export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onOpen }: CalendarDayProps) => {
-  const [opened, setOpened] = useState(false);
-  const [pinned, setPinned] = useState(false);
-  const { primaryColor } = useMantineTheme();
+export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
   const { ref, height } = useElementSize();
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
@@ -31,19 +27,6 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
 
   const isTooSmallForIndicators = height < 30;
 
-  const handleMouseEnter = useCallback(() => {
-    if (disabled) return;
-    onOpen(() => {
-      setOpened(false);
-      setPinned(false);
-    });
-    setOpened(true);
-  }, [disabled, onOpen]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (!pinned) setOpened(false);
-  }, [pinned]);
-
   return (
     <Popover
       position="bottom"
@@ -51,14 +34,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
       withinPortal
       radius="lg"
       shadow="sm"
-      transitionProps={{
-        transition: "pop",
-      }}
-      onChange={(value) => {
-        setOpened(value);
-        if (!value) setPinned(false);
-      }}
-      opened={opened}
+      transitionProps={{ transition: "pop" }}
       disabled={disabled}
     >
       <Popover.Target>
@@ -70,17 +46,12 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
           pb={isSmall ? 0 : 10}
           m={0}
           ref={ref}
-          bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          className={classes.day}
           style={{
             alignContent: "center",
             borderRadius: actualItemRadius,
             cursor: disabled ? "default" : "pointer",
           }}
-          onClick={() => {
-            if (!disabled) setPinned((prev) => !prev);
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
         >
           <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
             {date.getDate()}
@@ -88,16 +59,7 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
           {!isTooSmallForIndicators && <NotificationIndicator events={events} isSmall={isSmall} />}
         </Container>
       </Popover.Target>
-      {/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
-      <Popover.Dropdown
-        maw="calc(100vw - 24px)"
-        w={512}
-        pe={4}
-        pb={0}
-        style={{ overflow: "hidden" }}
-        onMouseEnter={() => setOpened(true)}
-        onMouseLeave={handleMouseLeave}
-      >
+      <Popover.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
         <CalendarEventList events={events} />
       </Popover.Dropdown>
     </Popover>
@@ -111,7 +73,6 @@ interface NotificationIndicatorProps {
 
 const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps) => {
   const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(String);
-  /* position bottom is lower when small to not be on top of number*/
   return (
     <Flex
       w="75%"

packages/widgets/src/calendar/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
 import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
@@ -65,11 +65,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const isSmall = width < 256;
 
   const normalizedEvents = useMemo(() => splitEvents(events), [events]);
-  const activeCloseRef = useRef<(() => void) | null>(null);
-  const onDayOpen = useCallback((close: () => void) => {
-    activeCloseRef.current?.();
-    activeCloseRef.current = close;
-  }, []);
 
   return (
     <Calendar
@@ -146,7 +141,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
             disabled={isEditMode || eventsForDate.length === 0}
             rootWidth={width}
             rootHeight={height}
-            onOpen={onDayOpen}
           />
         );
       }}