fix(boards): open tabs before async fetch in bulk action

Pre-open blank tabs synchronously to preserve browser user-activation, then navigate those tab handles after app URLs are fetched. Also close surplus tabs and update tests for the new flow.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.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/getting-started/after-the-installation.mdx

@@ -316,6 +316,7 @@ You can drag and drop items in to this category in the edit mode.
 Categories will have a big space before and after them in the edit mode to
 enable you to drag and drop items outside the category.
 You can also collapse or open categories in edit mode to facilitate your editing process.
+Use the category menu to open every app in that category in new tabs, or use the board header action to open every app on the current board layout in new tabs.
 
 :::note
 

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
 

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -9,6 +9,7 @@ import {
   IconBox,
   IconBoxAlignTop,
   IconChevronDown,
+  IconExternalLink,
   IconLayoutBoard,
   IconPencil,
   IconPencilOff,
@@ -21,8 +22,11 @@ import {
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
-import { useRequiredBoard } from "@homarr/boards/context";
+import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { useSettings } from "@homarr/settings";
+import { openAppsInNewTabs } from "~/components/board/open-apps-in-new-tabs";
+import { filterByItemKind } from "~/components/board/sections/category/filter";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
 import { hotkeys } from "@homarr/definitions";
@@ -46,9 +50,34 @@ export const BoardContentHeaderActions = () => {
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
   const { data: demoMode, isLoading } = clientApi.info.isDemoMode.useQuery();
+  const settings = useSettings();
+  const t = useI18n();
+  const { openConfirmModal } = useConfirmModal();
+
+  const openAllInNewTabs = useCallback(async () => {
+    const currentLayoutId = getCurrentLayout(board);
+    const appIds = filterByItemKind(
+      board.items.filter((item) => item.layouts.some((layout) => layout.layoutId === currentLayoutId)),
+      settings,
+      "app",
+    ).map((item) => {
+      return item.options.appId;
+    });
+
+    await openAppsInNewTabs(appIds, { t, openConfirmModal });
+  }, [board, t, openConfirmModal, settings]);
 
   if (!hasChangeAccess || isLoading) {
-    return <SelectBoardsMenu />;
+    return (
+      <>
+        {!isLoading && (
+          <HeaderButton onClick={openAllInNewTabs} aria-label={t("section.category.action.openAllInNewTabs")}>
+            <IconExternalLink stroke={1.5} />
+          </HeaderButton>
+        )}
+        <SelectBoardsMenu />
+      </>
+    );
   }
 
   return (
@@ -57,6 +86,12 @@ export const BoardContentHeaderActions = () => {
 
       <EditModeMenu demoMode={demoMode ?? false} />
 
+      {!isEditMode && (
+        <HeaderButton onClick={openAllInNewTabs} aria-label={t("section.category.action.openAllInNewTabs")}>
+          <IconExternalLink stroke={1.5} />
+        </HeaderButton>
+      )}
+
       {!demoMode && (
         <OnboardingTour.Target id="board-settings">
           <HeaderButton href={`/boards/${board.name}/settings`}>

apps/nextjs/src/components/board/open-apps-in-new-tabs.ts

@@ -0,0 +1,48 @@
+import { fetchApi } from "@homarr/api/client";
+
+type AppWithHref = {
+  href: string | null;
+};
+
+type TranslationKey = "section.category.openAllInNewTabs.title" | "section.category.openAllInNewTabs.text";
+
+interface OpenAppsInNewTabsOptions {
+  t: (key: TranslationKey) => string;
+  openConfirmModal: (options: { title: string; children: string }) => void;
+  fetchAppsByIds?: (appIds: string[]) => Promise<AppWithHref[]>;
+}
+
+export const openAppsInNewTabs = async (
+  appIds: string[],
+  { t, openConfirmModal, fetchAppsByIds = fetchApi.app.byIds.query }: OpenAppsInNewTabsOptions,
+) => {
+  if (appIds.length === 0) return;
+
+  const distinctAppIds = [...new Set(appIds)];
+  const openedWindows = distinctAppIds.map(() => window.open("", "_blank", "noopener,noreferrer"));
+  for (const openedWindow of openedWindows) {
+    if (!openedWindow) continue;
+    openedWindow.opener = null;
+  }
+
+  const apps = await fetchAppsByIds(distinctAppIds);
+  const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+  const tabsToClose = openedWindows.slice(appsWithUrls.length).filter((openedWindow): openedWindow is Window => Boolean(openedWindow));
+  for (const tabToClose of tabsToClose) {
+    tabToClose.close();
+  }
+
+  for (const [index, app] of appsWithUrls.entries()) {
+    const openedWindow = openedWindows[index];
+    if (openedWindow) {
+      openedWindow.location.href = app.href;
+      continue;
+    }
+
+    openConfirmModal({
+      title: t("section.category.openAllInNewTabs.title"),
+      children: t("section.category.openAllInNewTabs.text"),
+    });
+    break;
+  }
+};

apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
 
-import { fetchApi } from "@homarr/api/client";
 import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
@@ -8,6 +7,7 @@ import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
+import { openAppsInNewTabs } from "~/components/board/open-apps-in-new-tabs";
 import { useCategoryActions } from "./category-actions";
 import { CategoryEditModal } from "./category-edit-modal";
 import { filterByItemKind } from "./filter";
@@ -115,21 +115,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
       return item.options.appId;
     });
 
-    const apps = await fetchApi.app.byIds.query(appIds);
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
-
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined);
-      if (openedWindow) {
-        continue;
-      }
-
-      openConfirmModal({
-        title: t("section.category.openAllInNewTabs.title"),
-        children: t("section.category.openAllInNewTabs.text"),
-      });
-      break;
-    }
+    await openAppsInNewTabs(appIds, { t, openConfirmModal });
   }, [category, board, t, openConfirmModal, settings]);
 
   return {

apps/nextjs/src/components/board/test/open-apps-in-new-tabs.spec.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { openAppsInNewTabs } from "../open-apps-in-new-tabs";
+
+describe("openAppsInNewTabs", () => {
+  test("opens tabs synchronously and navigates them to fetched URLs", async () => {
+    const openedWindowOne = { opener: null, location: { href: "" }, close: vi.fn() } as unknown as Window;
+    const openedWindowTwo = { opener: null, location: { href: "" }, close: vi.fn() } as unknown as Window;
+    const openedWindowThree = { opener: null, location: { href: "" }, close: vi.fn() } as unknown as Window;
+    const open = vi.spyOn(window, "open").mockReturnValueOnce(openedWindowOne).mockReturnValueOnce(openedWindowTwo).mockReturnValueOnce(openedWindowThree);
+    const fetchAppsByIds = vi
+      .fn()
+      .mockResolvedValue([{ href: "https://example.com/one" }, { href: null }, { href: "https://example.com/two" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one", "app-two", "app-three"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(fetchAppsByIds).toHaveBeenCalledWith(["app-one", "app-two", "app-three"]);
+    expect(open).toHaveBeenCalledTimes(3);
+    expect(open).toHaveBeenNthCalledWith(1, "", "_blank", "noopener,noreferrer");
+    expect(open).toHaveBeenNthCalledWith(2, "", "_blank", "noopener,noreferrer");
+    expect(open).toHaveBeenNthCalledWith(3, "", "_blank", "noopener,noreferrer");
+    expect(openedWindowOne.location.href).toBe("https://example.com/one");
+    expect(openedWindowTwo.location.href).toBe("https://example.com/two");
+    expect(openedWindowThree.close).toHaveBeenCalledTimes(1);
+    expect(openConfirmModal).not.toHaveBeenCalled();
+  });
+
+  test("de-duplicates app IDs before fetching", async () => {
+    const openedWindow = { opener: null, location: { href: "" }, close: vi.fn() } as unknown as Window;
+    const open = vi.spyOn(window, "open").mockReturnValue(openedWindow);
+    const fetchAppsByIds = vi.fn().mockResolvedValue([{ href: "https://example.com/one" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one", "app-one", "app-one"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(fetchAppsByIds).toHaveBeenCalledWith(["app-one"]);
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+
+  test("shows confirm modal when popup is blocked", async () => {
+    vi.spyOn(window, "open").mockReturnValue(null);
+    const fetchAppsByIds = vi.fn().mockResolvedValue([{ href: "https://example.com/one" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(openConfirmModal).toHaveBeenCalledWith({
+      title: "section.category.openAllInNewTabs.title",
+      children: "section.category.openAllInNewTabs.text",
+    });
+  });
+});

deployments/prebuilt-debian/package.json

@@ -6,7 +6,7 @@
   },
   "engines": {
     "node": ">=24.17.0",
-    "pnpm": ">=11.8.0"
+    "pnpm": ">=11.9.0"
   },
-  "packageManager": "pnpm@11.8.0"
+  "packageManager": "pnpm@11.9.0"
 }

package.json

@@ -62,9 +62,9 @@
   },
   "engines": {
     "node": ">=24.17.0",
-    "pnpm": ">=11.8.0"
+    "pnpm": ">=11.9.0"
   },
-  "packageManager": "pnpm@11.8.0",
+  "packageManager": "pnpm@11.9.0",
   "dependencies": {
     "jsonpath-plus": "catalog:"
   }

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.6
   "@gitbeaker/rest": ^43.8.0
   "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0
@@ -22,21 +22,21 @@ catalog:
   "@jellyfin/sdk": ^0.13.0
   "@kubernetes/client-node": ^1.4.0
   "@modelcontextprotocol/sdk": 1.29.0
-  "@mantine/charts": ^9.3.2
-  "@mantine/colors-generator": ^9.3.2
-  "@mantine/core": ^9.3.2
-  "@mantine/dates": ^9.3.2
-  "@mantine/dropzone": ^9.3.2
-  "@mantine/form": ^9.3.2
-  "@mantine/hooks": ^9.3.2
-  "@mantine/modals": ^9.3.2
-  "@mantine/notifications": ^9.3.2
-  "@mantine/spotlight": ^9.3.2
-  "@mantine/tiptap": ^9.3.2
+  "@mantine/charts": ^9.4.0
+  "@mantine/colors-generator": ^9.4.0
+  "@mantine/core": ^9.4.0
+  "@mantine/dates": ^9.4.0
+  "@mantine/dropzone": ^9.4.0
+  "@mantine/form": ^9.4.0
+  "@mantine/hooks": ^9.4.0
+  "@mantine/modals": ^9.4.0
+  "@mantine/notifications": ^9.4.0
+  "@mantine/spotlight": ^9.4.0
+  "@mantine/tiptap": ^9.4.0
   "@next/eslint-plugin-next": 16.2.9
   "@octokit/auth-app": ^8.2.0
   "@paralleldrive/cuid2": ^3.3.0
-  "@playwright/test": ^1.61.0
+  "@playwright/test": ^1.61.1
   "@semantic-release/changelog": ^6.0.3
   "@semantic-release/commit-analyzer": ^13.0.1
   "@semantic-release/git": ^10.0.1
@@ -88,13 +88,13 @@ catalog:
   "@types/prismjs": ^1.26.6
   "@types/react": 19.2.17
   "@types/react-dom": 19.2.3
-  "@scalar/api-reference-react": ^0.9.47
+  "@scalar/api-reference-react": ^0.9.48
   "@types/video.js": ^7.3.58
   "@types/ws": ^8.18.1
   "@types/xml2js": ^0.4.14
-  posthog-js: ^1.391.2
+  posthog-js: ^1.393.0
   posthog-node: ^4.18.0
-  "@vitejs/plugin-react": ^6.0.2
+  "@vitejs/plugin-react": ^6.0.3
   "@vitest/coverage-v8": ^4.1.9
   "@vitest/ui": ^4.1.9
   "@xterm/addon-canvas": ^0.7.0
@@ -150,8 +150,8 @@ catalog:
   next-intl: 4.13.0
   node-loader: ^2.1.0
   octokit: ^5.0.5
-  oxfmt: ^0.55.0
-  oxlint: ^1.70.0
+  oxfmt: ^0.56.0
+  oxlint: ^1.71.0
   pg: ^8.22.0
   postcss-preset-mantine: ^1.18.0
   prismjs: ^1.30.0
@@ -163,7 +163,7 @@ catalog:
   react-markdown: ^10.1.0
   react-quill-new: ^3.8.3
   react-simple-code-editor: ^0.14.1
-  recharts: ^3.8.1
+  recharts: ^3.9.0
   sass: ^1.101.0
   semantic-release: ^25.0.5
   semver-parser: ^4.2.1
@@ -177,7 +177,7 @@ catalog:
   tsx: 4.20.4
   turbo: ^2.9.18
   typescript: ^6.0.3
-  vite: ^8.0.16
+  vite: ^8.1.0
   undici: 7.27.2
   use-deep-compare-effect: ^1.8.1
   video.js: ^8.23.9
@@ -206,12 +206,12 @@ minimumReleaseAgeExclude:
 overrides:
   "@babel/helpers@<7.26.10": ">=7.29.7"
   "@babel/runtime@<7.26.10": ">=7.29.7"
-  "axios@>=1.0.0 <1.8.2": ">=1.18.0"
+  "axios@>=1.0.0 <1.8.2": ">=1.18.1"
   "brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6"
   "brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6"
   "esbuild@<=0.24.2": ">=0.28.0"
   "form-data@>=4.0.0 <4.0.4": ">=4.0.6"
-  "hono@<4.6.5": ">=4.12.26"
+  "hono@<4.6.5": ">=4.12.27"
   "linkifyjs@<4.3.2": ">=4.3.3"
   "nanoid@>=4.0.0 <5.0.9": ">=5.1.15"
   "prismjs@<1.30.0": ">=1.30.0"
@@ -222,7 +222,7 @@ overrides:
   "tar-fs@>=3.0.0 <3.0.9": ">=3.1.2"
   "tar-fs@>=2.0.0 <2.1.3": ">=3.1.2"
   "tmp@<=0.2.3": ">=0.2.7"
-  "vite@>=5.0.0 <=5.4.18": ">=8.0.16"
+  "vite@>=5.0.0 <=5.4.18": ">=8.1.0"
 patchedDependencies:
   "@types/node-unifi": "patches/@types__node-unifi.patch"
   "trpc-to-openapi": "patches/trpc-to-openapi.patch"