From f53527e2e731a66689f5c7a1a1b2343a8e028804 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 22 May 2026 11:37:39 +0200
Subject: [PATCH] fix(board): make SectionContext optional for view mode

Add useOptionalSectionContext to gracefully handle rendering outside
GridStack (view mode). The item menu now uses optional chaining for
gridstack access instead of throwing when context is absent.
---
 apps/nextjs/src/components/board/items/item-menu.tsx       | 7 ++++---
 .../src/components/board/sections/section-context.ts       | 4 ++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/components/board/items/item-menu.tsx b/apps/nextjs/src/components/board/items/item-menu.tsx
index a7d870a28..efeba756c 100644
--- a/apps/nextjs/src/components/board/items/item-menu.tsx
+++ b/apps/nextjs/src/components/board/items/item-menu.tsx
@@ -12,7 +12,7 @@ import { widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
-import { useSectionContext } from "../sections/section-context";
+import { useOptionalSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
 
@@ -41,7 +41,8 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
     useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
-  const { gridstack } = useSectionContext().refs;
+  const sectionContext = useOptionalSectionContext();
+  const gridstack = sectionContext?.refs.gridstack;
   const settings = useSettings();
 
   // Reset error boundary on next render if item has been edited
@@ -119,7 +120,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
         <Menu.Item
           leftSection={<IconLayoutKanban size={16} />}
           onClick={() => {
-            if (!gridstack.current) return;
+            if (!gridstack?.current) return;
             openMoveModal({ item, columnCount: gridstack.current.getColumn(), gridStack: gridstack.current });
           }}
         >
diff --git a/apps/nextjs/src/components/board/sections/section-context.ts b/apps/nextjs/src/components/board/sections/section-context.ts
index c01d05d7c..9b4bc66bc 100644
--- a/apps/nextjs/src/components/board/sections/section-context.ts
+++ b/apps/nextjs/src/components/board/sections/section-context.ts
@@ -20,4 +20,8 @@ export const useSectionContext = () => {
   return context;
 };
 
+export const useOptionalSectionContext = () => {
+  return useContext(SectionContext);
+};
+
 export const SectionProvider = SectionContext.Provider;