fix: address release v2 review findings (#6708)

apps/nextjs/src/components/board/board-layout-thumbnail.tsx

@@ -11,16 +11,17 @@ import classes from "./board-layout-thumbnail.module.css";
 interface BoardLayoutThumbnailProps {
   preview: BoardPreviewData | null;
   label: string;
-  fitFullLayout?: boolean;
+  previewRowLimit?: number;
   className?: string;
 }
 
-const maxThumbnailRows = 12;
+const compactBoardLayoutThumbnailRows = 12;
+export const maxBoardLayoutThumbnailRows = 48;
 
 export const BoardLayoutThumbnail = ({
   preview,
   label,
-  fitFullLayout = false,
+  previewRowLimit = compactBoardLayoutThumbnailRows,
   className,
 }: BoardLayoutThumbnailProps) => {
   const canvasClassName = [classes.canvas, className].filter(Boolean).join(" ");
@@ -34,7 +35,7 @@ export const BoardLayoutThumbnail = ({
   }
 
   const elements = projectBoardLayout(preview, layout, layout);
-  const thumbnailRowLimit = fitFullLayout ? Number.POSITIVE_INFINITY : maxThumbnailRows;
+  const thumbnailRowLimit = Math.max(1, Math.min(Math.floor(previewRowLimit), maxBoardLayoutThumbnailRows));
   const roots = preview.sections
     .filter((section) => section.kind === "empty")
     .toSorted((first, second) => (first.xOffset ?? 0) - (second.xOffset ?? 0) || first.id.localeCompare(second.id));
@@ -94,9 +95,21 @@ export const BoardLayoutThumbnail = ({
               }}
             >
               {laneElements.map((element) => {
+                const renderedWidth = Math.min(element.width, columnCount - element.xOffset);
+                const renderedHeight = Math.min(element.height, rowCount - element.yOffset);
                 const nestedItems =
                   element.type === "section"
-                    ? elements.filter((candidate) => candidate.type === "item" && candidate.sectionId === element.id)
+                    ? elements.filter(
+                        (candidate) =>
+                          candidate.type === "item" &&
+                          candidate.sectionId === element.id &&
+                          candidate.xOffset >= 0 &&
+                          candidate.xOffset < renderedWidth &&
+                          candidate.yOffset >= 0 &&
+                          candidate.yOffset < renderedHeight &&
+                          candidate.width > 0 &&
+                          candidate.height > 0,
+                      )
                     : [];
                 return (
                   <span
@@ -104,16 +117,16 @@ export const BoardLayoutThumbnail = ({
                     aria-hidden
                     className={`${classes.tile} ${element.type === "section" ? classes.container : ""}`}
                     style={{
-                      gridColumn: `${element.xOffset + 1} / span ${Math.min(element.width, columnCount - element.xOffset)}`,
-                      gridRow: `${element.yOffset + 1} / span ${Math.min(element.height, rowCount - element.yOffset)}`,
+                      gridColumn: `${element.xOffset + 1} / span ${renderedWidth}`,
+                      gridRow: `${element.yOffset + 1} / span ${renderedHeight}`,
                     }}
                   >
                     {element.type === "section" ? (
                       <span
                         className={classes.containerContents}
                         style={{
-                          gridTemplateColumns: `repeat(${element.width}, minmax(0, 1fr))`,
-                          gridTemplateRows: `repeat(${element.height}, minmax(0, 1fr))`,
+                          gridTemplateColumns: `repeat(${renderedWidth}, minmax(0, 1fr))`,
+                          gridTemplateRows: `repeat(${renderedHeight}, minmax(0, 1fr))`,
                         }}
                       >
                         {nestedItems.map((nestedItem) => (
@@ -123,11 +136,11 @@ export const BoardLayoutThumbnail = ({
                             style={{
                               gridColumn: `${nestedItem.xOffset + 1} / span ${Math.min(
                                 nestedItem.width,
-                                element.width - nestedItem.xOffset,
+                                renderedWidth - nestedItem.xOffset,
                               )}`,
                               gridRow: `${nestedItem.yOffset + 1} / span ${Math.min(
                                 nestedItem.height,
-                                element.height - nestedItem.yOffset,
+                                renderedHeight - nestedItem.yOffset,
                               )}`,
                             }}
                           >

apps/nextjs/src/components/board/board-switcher.tsx

@@ -30,11 +30,12 @@ import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
 import { Link, UserAvatar } from "@homarr/ui";
 
-import { BoardLayoutThumbnail } from "~/components/board/board-layout-thumbnail";
+import { BoardLayoutThumbnail, maxBoardLayoutThumbnailRows } from "~/components/board/board-layout-thumbnail";
 
 import classes from "./board-switcher.module.css";
 
 export const boardSwitcherHotkey = "shift+c";
+const boardSwitcherPreview = { previewRowLimit: maxBoardLayoutThumbnailRows } as const;
 
 export interface BoardSwitcherControls {
   open: () => void;
@@ -61,18 +62,12 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     data: boards = [],
     isPending,
     isError,
-  } = clientApi.board.getManageOverview.useQuery(
-    { fullPreview: true },
-    {
-      enabled: isOpen,
-    },
-  );
+  } = clientApi.board.getManageOverview.useQuery(boardSwitcherPreview, {
+    enabled: isOpen,
+  });
 
   const switcherBoards = useMemo(
-    () => [
-      ...boards.filter((board) => board.id !== currentBoard?.id),
-      ...boards.filter((board) => board.id === currentBoard?.id),
-    ],
+    () => boards.filter((board) => board.id !== currentBoard?.id),
     [boards, currentBoard?.id],
   );
   const filteredBoards = useMemo(() => {
@@ -91,7 +86,7 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     setSearch("");
     setActiveIndex(0);
   }, []);
-  const preloadBoards = () => void utils.board.getManageOverview.prefetch({ fullPreview: true });
+  const preloadBoards = () => void utils.board.getManageOverview.prefetch(boardSwitcherPreview);
 
   const spotlightAction = useMemo(
     () => ({
@@ -341,7 +336,7 @@ const getBoardSwitcherResults = ({
               <BoardLayoutThumbnail
                 preview={board.preview}
                 label={t("preview", { name: board.name, count: String(board.preview?.items.length ?? 0) })}
-                fitFullLayout
+                previewRowLimit={boardSwitcherPreview.previewRowLimit}
               />
             </Card.Section>
             <Card.Section withBorder px="sm" py={6}>

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -10,6 +10,7 @@ import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import { InlineConfirmMenuItem } from "@homarr/ui";
 import type { WidgetDefinition } from "@homarr/widgets/definition";
+import type { WidgetPreviewDimensions } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useSectionContext } from "../sections/section-context";
@@ -21,7 +22,7 @@ import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-
 interface BoardItemMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
+  previewDimensions: WidgetPreviewDimensions;
   resetErrorBoundary?: () => void;
 }
 

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -25,6 +25,7 @@ import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definit
 import { getWidgetQueryKeys, getWidgetRuntimeQueries, supportsAdvancedFocus } from "@homarr/widgets/definition";
 import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 import { getWidgetOptionTranslationNamespace } from "@homarr/widgets/option-translation";
+import type { WidgetPreviewDimensions } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useAdvancedFocus } from "../advanced-focus/context";
@@ -39,7 +40,7 @@ type ToggleOption = [key: string, option: { type: string; skipContextMenu?: bool
 interface WidgetContextMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
+  previewDimensions: WidgetPreviewDimensions;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
   widgetRuntimeRef: WidgetRuntimeRef;
   sourceRef: RefObject<HTMLElement | null>;

apps/nextjs/src/components/layout/header/lazy-spotlight.tsx

@@ -54,11 +54,13 @@ export const LazySpotlight = () => {
     };
   }, []);
 
-  return isMounted || isPreloaded ? (
+  if (!isMounted && !isPreloaded) return null;
+
+  return (
     <>
       {isPreloaded && <span hidden data-homarr-dev-benchmark-spotlight-preloaded />}
       {isMounted && <span hidden data-homarr-dev-benchmark-spotlight-mounted />}
-      <Spotlight />
+      {isMounted && <Spotlight />}
     </>
-  ) : null;
+  );
 };