style: auto-fix lint and format

feat(widgets): show calendar events on hover with pin on click (#2637)

docs(widgets): update calendar interactions section for hover behavior

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -33,6 +33,7 @@ body:
       options:
         # The below comment is used to insert a new version with on-release.yml
         #NEXT_VERSION#
+        - 1.68.0
         - 1.67.0
         - 1.66.1
         - 1.66.0

apps/docs/docs/widgets/calendar/index.mdx

@@ -63,7 +63,9 @@ import withoutIntegrations from './img/without-integrations.png';
 
 ### Interactions
 
-- View calendar events by clicking on the marked dates.
+- Hover over a marked date to preview its events in a popover.
+- Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
+- Click the date again or click outside to close the pinned popover.
 
 ### Adding the widget
 

packages/common/src/object.ts

@@ -1,5 +1,3 @@
-import { hashKey } from "@tanstack/query-core";
-
 export function objectKeys<O extends object>(obj: O): (keyof O)[] {
   return Object.keys(obj) as (keyof O)[];
 }
@@ -11,5 +9,18 @@ type Entries<T> = {
 export const objectEntries = <T extends object>(obj: T) => Object.entries(obj) as Entries<T>;
 
 export const hashObjectBase64 = (obj: object) => {
-  return Buffer.from(hashKey([obj])).toString("base64");
+  const json = JSON.stringify([obj], (_, val) =>
+    typeof val === "object" && val !== null && !Array.isArray(val)
+      ? Object.keys(val)
+          .toSorted()
+          .reduce(
+            (acc, key) => {
+              acc[key] = (val as Record<string, unknown>)[key];
+              return acc;
+            },
+            {} as Record<string, unknown>,
+          )
+      : val,
+  );
+  return Buffer.from(json).toString("base64");
 };

packages/core/src/infrastructure/logs/transports/redis-transport.ts

@@ -1,5 +1,5 @@
 import superjson from "superjson";
-import Transport from "winston-transport";
+import winston from "winston";
 
 import type { RedisClient } from "../../redis/client";
 import { createRedisClient } from "../../redis/client";
@@ -7,11 +7,7 @@ import { createRedisClient } from "../../redis/client";
 const messageSymbol = Symbol.for("message");
 const levelSymbol = Symbol.for("level");
 
-//
-// Inherit from `winston-transport` so you can take advantage
-// of the base functionality and `.exceptions.handle()`.
-//
-export class RedisTransport extends Transport {
+export class RedisTransport extends winston.Transport {
   private redis: RedisClient | null = null;
   public static readonly publishChannel = "pubSub:logging";
 

packages/translation/src/lang/en.json

@@ -2357,6 +2357,9 @@
       "name": "Docker stats",
       "description": "Stats of your containers (This widget can only be added with administrator privileges)",
       "option": {
+        "columns": {
+          "label": "Columns to show"
+        },
         "enableRowSorting": {
           "label": "Enable items sorting"
         },
@@ -5096,7 +5099,8 @@
       }
     },
     "error": {
-      "internalServerError": "Failed to fetch Docker containers"
+      "internalServerError": "Failed to fetch Docker containers",
+      "noColumns": "Select at least one column in the widget settings"
     }
   },
   "kubernetes": {

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
@@ -13,10 +13,12 @@ interface CalendarDayProps {
   disabled: boolean;
   rootWidth: number;
   rootHeight: number;
+  onOpen: (close: () => void) => void;
 }
 
-export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
+export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onOpen }: CalendarDayProps) => {
   const [opened, setOpened] = useState(false);
+  const [pinned, setPinned] = useState(false);
   const { primaryColor } = useMantineTheme();
   const { ref, height } = useElementSize();
   const board = useRequiredBoard();
@@ -29,6 +31,19 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
 
   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"
@@ -39,7 +54,10 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
       transitionProps={{
         transition: "pop",
       }}
-      onChange={setOpened}
+      onChange={(value) => {
+        setOpened(value);
+        if (!value) setPinned(false);
+      }}
       opened={opened}
       disabled={disabled}
     >
@@ -59,10 +77,10 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
             cursor: disabled ? "default" : "pointer",
           }}
           onClick={() => {
-            if (disabled) return;
-
-            setOpened((prev) => !prev);
+            if (!disabled) setPinned((prev) => !prev);
           }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
           <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
             {date.getDate()}
@@ -71,7 +89,15 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
         </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" }}>
+      <Popover.Dropdown
+        maw="calc(100vw - 24px)"
+        w={512}
+        pe={4}
+        pb={0}
+        style={{ overflow: "hidden" }}
+        onMouseEnter={() => setOpened(true)}
+        onMouseLeave={handleMouseLeave}
+      >
         <CalendarEventList events={events} />
       </Popover.Dropdown>
     </Popover>

packages/widgets/src/calendar/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
@@ -16,11 +16,15 @@ import type { WidgetComponentProps } from "../definition";
 import { CalendarDay } from "./calender-day";
 import classes from "./component.module.css";
 
-export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
+export default function CalendarWidget(
+  props: WidgetComponentProps<"calendar">,
+) {
   const [month, setMonth] = useState(new Date());
 
   if (props.integrationIds.length === 0) {
-    return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
+    return (
+      <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />
+    );
   }
 
   return <FetchCalendar month={month} setMonth={setMonth} {...props} />;
@@ -31,7 +35,13 @@ interface FetchCalendarProps extends WidgetComponentProps<"calendar"> {
   setMonth: (date: Date) => void;
 }
 
-const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }: FetchCalendarProps) => {
+const FetchCalendar = ({
+  month,
+  setMonth,
+  isEditMode,
+  integrationIds,
+  options,
+}: FetchCalendarProps) => {
   const input = {
     integrationIds,
     month: month.getMonth(),
@@ -61,9 +71,20 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }:
     },
   });
 
-  const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
+  const events = useMemo(
+    () => data?.flatMap((item) => item.events) ?? [],
+    [data],
+  );
 
-  return <CalendarBase isEditMode={isEditMode} events={events} month={month} setMonth={setMonth} options={options} />;
+  return (
+    <CalendarBase
+      isEditMode={isEditMode}
+      events={events}
+      month={month}
+      setMonth={setMonth}
+      options={options}
+    />
+  );
 };
 
 interface CalendarBaseProps {
@@ -74,7 +95,13 @@ interface CalendarBaseProps {
   options: WidgetComponentProps<"calendar">["options"];
 }
 
-const CalendarBase = ({ isEditMode, events, month, setMonth, options }: CalendarBaseProps) => {
+const CalendarBase = ({
+  isEditMode,
+  events,
+  month,
+  setMonth,
+  options,
+}: CalendarBaseProps) => {
   const params = useParams();
   const locale = params.locale as string;
   const { firstDayOfWeek } = useSettings();
@@ -85,6 +112,11 @@ 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
@@ -150,9 +182,14 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
         const eventsForDate = normalizedEvents
           .filter((event) => dayjs(event.startDate).isSame(tileDate, "day"))
           .filter(
-            (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
+            (event) =>
+              event.metadata?.type !== "radarr" ||
+              options.releaseType.includes(event.metadata.releaseType),
           )
-          .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
+          .toSorted(
+            (eventA, eventB) =>
+              eventA.startDate.getTime() - eventB.startDate.getTime(),
+          );
 
         return (
           <CalendarDay
@@ -161,6 +198,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
             disabled={isEditMode || eventsForDate.length === 0}
             rootWidth={width}
             rootHeight={height}
+            onOpen={onDayOpen}
           />
         );
       }}
@@ -198,7 +236,9 @@ export const splitEvents = (events: CalendarEvent[]): CalendarEvent[] => {
       splitEvents.push({
         ...event,
         startDate: currentStart.toDate(),
-        endDate: currentStart.endOf("day").isAfter(event.endDate) ? event.endDate : currentStart.endOf("day").toDate(),
+        endDate: currentStart.endOf("day").isAfter(event.endDate)
+          ? event.endDate
+          : currentStart.endOf("day").toDate(),
       });
 
       currentStart = currentStart.add(1, "day").startOf("day");

packages/widgets/src/dns-hole/controls/component.tsx

@@ -57,6 +57,7 @@ export default function DnsHoleControlsWidget({
     },
     {
       staleTime: 5 * 1000,
+      refetchInterval: 5 * 1000,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
       retry: false,

packages/widgets/src/dns-hole/summary/component.tsx

@@ -26,6 +26,7 @@ export default function DnsHoleSummaryWidget({ options, integrationIds }: Widget
     },
     {
       staleTime: 5 * 1000,
+      refetchInterval: 5 * 1000,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
       retry: false,

packages/widgets/src/docker/component.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useMemo } from "react";
-import { ActionIcon, Avatar, Badge, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Center, Group, Stack, Text, Tooltip } from "@mantine/core";
 import type { IconProps } from "@tabler/icons-react";
 import { IconBrandDocker, IconPlayerPlay, IconPlayerStop, IconRotateClockwise } from "@tabler/icons-react";
-import type { MRT_ColumnDef } from "mantine-react-table";
+import type { MRT_ColumnDef, MRT_VisibilityState } from "mantine-react-table";
 import { MantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -213,6 +213,15 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
 
   const columns = useMemo(() => createColumns(t), [t]);
 
+  const columnVisibility: MRT_VisibilityState = {
+    name: options.columns.includes("name"),
+    state: options.columns.includes("state"),
+    host: options.columns.includes("host"),
+    cpuUsage: options.columns.includes("cpuUsage"),
+    memoryUsage: options.columns.includes("memoryUsage"),
+    actions: options.columns.includes("actions"),
+  };
+
   const table = useTranslatedMantineReactTable({
     columns,
     data: containers,
@@ -233,6 +242,9 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
       sorting: [{ id: options.defaultSort, desc: options.descendingDefaultSort }],
       density: "xs",
     },
+    state: {
+      columnVisibility,
+    },
     mantinePaperProps: {
       flex: 1,
       withBorder: false,
@@ -260,6 +272,13 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
     },
   });
 
+  if (options.columns.length === 0)
+    return (
+      <Center h="100%">
+        <Text>{t("error.noColumns")}</Text>
+      </Center>
+    );
+
   return (
     <Stack gap={0} h="100%" display="flex">
       <MantineReactTable table={table} />

packages/widgets/src/docker/index.ts

@@ -12,10 +12,29 @@ const columnsList = [
   "memoryUsage",
 ] as const satisfies (keyof RouterOutputs["docker"]["getContainers"]["containers"][number])[];
 
+const allColumnsList = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
+
+const columnTranslationKeyMap = {
+  name: "docker.field.name.label",
+  state: "docker.field.state.label",
+  host: "docker.field.host.label",
+  cpuUsage: "docker.field.stats.cpu.label",
+  memoryUsage: "docker.field.stats.memory.label",
+  actions: "docker.action.title",
+} as const satisfies Record<(typeof allColumnsList)[number], string>;
+
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
   icon: IconBrandDocker,
   createOptions() {
     return optionsBuilder.from((factory) => ({
+      columns: factory.multiSelect({
+        defaultValue: [...allColumnsList],
+        options: allColumnsList.map((value) => ({
+          value,
+          label: (t) => t(columnTranslationKeyMap[value]),
+        })),
+        searchable: true,
+      }),
       enableRowSorting: factory.switch({
         defaultValue: false,
       }),

packages/widgets/src/downloads/component.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import "../widgets-common.css";
+import "./styles.css";
 
 import { useCallback, useMemo, useState } from "react";
 import type { MantineStyleProp } from "@mantine/core";
@@ -577,7 +578,7 @@ export default function DownloadClientsWidget({
     enableColumnOrdering: isEditMode,
     enableRowVirtualization: true,
     rowVirtualizerOptions: { overscan: 5 },
-    mantinePaperProps: { flex: 1, withBorder: false, shadow: undefined },
+    mantinePaperProps: { flex: 1, withBorder: false, shadow: undefined, bg: "transparent" },
     mantineTableContainerProps: { style: { height: "100%" } },
     mantineTableProps: {
       className: "downloads-widget-table",

packages/widgets/src/downloads/styles.css

@@ -0,0 +1,12 @@
+/* Make the MantineReactTable transparent so the board card's opacity-controlled
+   background shows through. MRT defaults to var(--mantine-color-body) which is opaque. */
+.downloads-widget-table,
+.downloads-widget-table .mantine-Table-table,
+.downloads-widget-table .mantine-Table-thead,
+.downloads-widget-table .mantine-Table-tbody,
+.downloads-widget-table .mantine-Table-tfoot,
+.downloads-widget-table .mantine-Table-tr,
+.downloads-widget-table th,
+.downloads-widget-table td {
+  background-color: transparent !important;
+}

pnpm-workspace.yaml

@@ -14,7 +14,7 @@ catalog:
   "@dnd-kit/utilities": ^3.2.2
   "@drizzle-team/brocli": ^0.12.0
   "@extractus/feed-extractor": 7.2.1
-  '@gfazioli/mantine-onboarding-tour': ^4.0.5
+  "@gfazioli/mantine-onboarding-tour": ^4.0.5
   "@gitbeaker/rest": ^43.8.0
   "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0
@@ -191,7 +191,7 @@ catalog:
   zod-form-data: ^3.0.2
   zod-validation-error: ^5.0.0
 catalogMode: strict
-nodeLinker: hoisted
+enableGlobalVirtualStore: true
 strictPeerDependencies: false
 engineStrict: true
 verifyDepsBeforeRun: warn