From 9256a432f977c579bc74dea29c322721d35f528d Mon Sep 17 00:00:00 2001 From: ajnart Date: Wed, 9 Sep 2026 12:04:18 +0200 Subject: [PATCH] fix: isolate board editing context from global menus --- .../app/[locale]/boards/(content)/_editing-provider.tsx | 6 +++--- .../src/app/[locale]/boards/(content)/_header-actions.tsx | 2 +- apps/nextjs/src/components/board/board-add-menu-items.tsx | 2 +- apps/nextjs/src/components/board/board-context-menu.tsx | 2 +- apps/nextjs/src/components/board/board-editing-context.ts | 8 ++++++++ apps/nextjs/src/components/user-avatar-menu.tsx | 2 +- 6 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 apps/nextjs/src/components/board/board-editing-context.ts diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_editing-provider.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_editing-provider.tsx index 26b1231f2..6a0efbea2 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_editing-provider.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_editing-provider.tsx @@ -1,7 +1,7 @@ "use client"; import type { PropsWithChildren } from "react"; -import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { useHotkeys } from "@mantine/hooks"; import { notifications } from "@mantine/notifications"; @@ -18,6 +18,7 @@ import { useI18n } from "@homarr/translation/client"; import { useBoardPermissions } from "~/components/board/permissions/client"; import { loadGridEditorAsync, scheduleGridEditorWarmup } from "~/components/board/sections/grid/grid-editor-loader"; import type * as EditActionsModule from "./_edit-actions"; +import { BoardEditingContext } from "~/components/board/board-editing-context"; let editActionsModulePromise: Promise | undefined; const loadEditActionsAsync = () => { @@ -35,8 +36,7 @@ const loadBoardEditorAsync = async () => import("~/components/board/sections/container/container-menu"), ]); -const BoardEditingContext = createContext | null>(null); -export const useOptionalBoardEditing = () => useContext(BoardEditingContext); +export type BoardEditingControls = ReturnType; export const BoardEditingProvider = ({ children, diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx index fa0365e2a..0ddff109e 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx @@ -5,7 +5,7 @@ import { useRequiredBoard } from "@homarr/boards/context"; import { useEditMode } from "@homarr/boards/edit-mode"; import { useI18n } from "@homarr/translation/client"; import { useBoardPermissions } from "~/components/board/permissions/client"; -import { useOptionalBoardEditing } from "./_editing-provider"; +import { useOptionalBoardEditing } from "~/components/board/board-editing-context"; import { HeaderButton } from "~/components/layout/header/button"; import { TourTarget } from "~/components/layout/header/tour-target"; const BoardEditActions = dynamic(() => import("./_edit-actions"), { ssr: false }); diff --git a/apps/nextjs/src/components/board/board-add-menu-items.tsx b/apps/nextjs/src/components/board/board-add-menu-items.tsx index 85b6f1bfe..70f4c76e5 100644 --- a/apps/nextjs/src/components/board/board-add-menu-items.tsx +++ b/apps/nextjs/src/components/board/board-add-menu-items.tsx @@ -4,7 +4,7 @@ import { Menu } from "@mantine/core"; import { IconBox, IconLayoutGridAdd, IconPlug, IconResize } from "@tabler/icons-react"; import { useI18n } from "@homarr/translation/client"; import { useBoardAddActions } from "./use-board-add-actions"; -import { useOptionalBoardEditing } from "~/app/[locale]/boards/(content)/_editing-provider"; +import { useOptionalBoardEditing } from "./board-editing-context"; export const BoardAddMenuItems = () => { const editing = useOptionalBoardEditing(); diff --git a/apps/nextjs/src/components/board/board-context-menu.tsx b/apps/nextjs/src/components/board/board-context-menu.tsx index a8f8cbd57..93d527120 100644 --- a/apps/nextjs/src/components/board/board-context-menu.tsx +++ b/apps/nextjs/src/components/board/board-context-menu.tsx @@ -4,7 +4,7 @@ import type { PropsWithChildren, MouseEvent } from "react"; import { useEffect, useState } from "react"; import { Box, Menu } from "@mantine/core"; import dynamic from "next/dynamic"; -import { useOptionalBoardEditing } from "~/app/[locale]/boards/(content)/_editing-provider"; +import { useOptionalBoardEditing } from "./board-editing-context"; const BoardAddMenuItems = dynamic(() => import("./board-add-menu-items").then((module) => module.BoardAddMenuItems)); const occupiedSpaceSelector = diff --git a/apps/nextjs/src/components/board/board-editing-context.ts b/apps/nextjs/src/components/board/board-editing-context.ts new file mode 100644 index 000000000..a29355e53 --- /dev/null +++ b/apps/nextjs/src/components/board/board-editing-context.ts @@ -0,0 +1,8 @@ +"use client"; + +import { createContext, useContext } from "react"; + +import type { BoardEditingControls } from "~/app/[locale]/boards/(content)/_editing-provider"; + +export const BoardEditingContext = createContext(null); +export const useOptionalBoardEditing = () => useContext(BoardEditingContext); diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx index 6d0a62f41..8ae9d1566 100644 --- a/apps/nextjs/src/components/user-avatar-menu.tsx +++ b/apps/nextjs/src/components/user-avatar-menu.tsx @@ -27,7 +27,7 @@ import { useI18n } from "@homarr/translation/client"; import { Link } from "@homarr/ui"; import { useAuthContext } from "~/app/[locale]/_client-providers/session"; -import { useOptionalBoardEditing } from "~/app/[locale]/boards/(content)/_editing-provider"; +import { useOptionalBoardEditing } from "./board/board-editing-context"; import { useOptionalHomarrAssistant } from "./assistant/assistant-context"; import type { BoardSwitcherControls } from "./board/board-switcher"; import { CurrentColorSchemeCombobox } from "./color-scheme/current-color-scheme-combobox";