chore: reconcile grid layer after stack rebase

apps/nextjs/src/components/board/sections/grid/grid-portal-host.tsx

@@ -5,8 +5,10 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { createPortal } from "react-dom";
 
 import type { RouterOutputs } from "@homarr/api";
-import { useIntegrations } from "@homarr/auth/client";
+import { clientApi } from "@homarr/api/client";
+import { useSession } from "@homarr/auth/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { getRootSectionLane } from "@homarr/definitions";
 
 import type { ContainerSectionItem, Section } from "~/app/[locale]/boards/_types";
@@ -33,7 +35,11 @@ const GridPortalHostContext = createContext<GridPortalHostContextValue | null>(n
  */
 export const BoardGridPortalHost = ({ children }: PropsWithChildren) => {
   const board = useRequiredBoard();
-  const integrations = useIntegrations();
+  const { data: session } = useSession();
+  const [isEditMode] = useEditMode();
+  const { data: integrations } = clientApi.integration.all.useQuery(undefined, {
+    enabled: Boolean(session) && isEditMode,
+  });
   const containersRef = useRef<Map<string, HTMLElement>>(new Map());
   const [containers, setContainers] = useState<Map<string, HTMLElement>>(() => new Map());
   const [announcement, setAnnouncement] = useState({ id: 0, message: "" });

apps/nextjs/src/components/board/sections/grid/test/grid-portal-host.spec.ts

@@ -12,8 +12,18 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    integration: {
+      all: {
+        useQuery: () => ({ data: undefined }),
+      },
+    },
+  },
+}));
+
 vi.mock("@homarr/auth/client", () => ({
-  useIntegrations: () => undefined,
+  useSession: () => ({ data: { user: { id: "user" } } }),
 }));
 
 vi.mock("@homarr/boards/context", () => ({
@@ -21,6 +31,10 @@ vi.mock("@homarr/boards/context", () => ({
   useRequiredBoard: () => mocks.board,
 }));
 
+vi.mock("@homarr/boards/edit-mode", () => ({
+  useEditMode: () => [true],
+}));
+
 describe("board grid portal host", () => {
   let container: HTMLDivElement;
   let root: Root;

apps/nextjs/src/components/board/sections/use-open-section-apps.ts

@@ -1,13 +1,14 @@
-import { useCallback, useMemo } from "react";
+import { use, useCallback, useMemo } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useConfirmModal } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
+import type { WidgetComponentProps } from "@homarr/widgets/definition";
+import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { filterByItemKind } from "./filter-by-item-kind";
 
 interface SectionItemLayout {
   layoutId: string;
@@ -79,10 +80,27 @@ export const useOpenSectionApps = (sectionId: string, enabled: boolean) => {
   const settings = useSettings();
   const { openConfirmModal } = useConfirmModal();
   const t = useI18n();
+  const appDefinition = use(loadWidgetDefinition("app"));
   const appIds = useMemo(() => {
     const items: Item[] = getSectionItemsForLayout(board, sectionId, currentLayoutId);
-    return Array.from(new Set(filterByItemKind(items, settings, "app").map((item) => item.options.appId)));
-  }, [board, currentLayoutId, sectionId, settings]);
+    return Array.from(
+      new Set(
+        items
+          .filter((item) => item.kind === "app")
+          .map(
+            (item) =>
+              (
+                reduceWidgetOptionsWithDefinition(
+                  appDefinition,
+                  settings,
+                  item.options,
+                ) as WidgetComponentProps<"app">["options"]
+              ).appId,
+          )
+          .filter((appId): appId is string => typeof appId === "string"),
+      ),
+    );
+  }, [appDefinition, board, currentLayoutId, sectionId, settings]);
   const { data: apps = [], isLoading } = clientApi.app.byIds.useQuery(appIds, {
     enabled: enabled && appIds.length > 0,
     staleTime: 30_000,