refactor: improve behaviour of edit mode when navigating away and back (#525)

apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
+import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
 import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 
@@ -13,6 +13,8 @@ const BoardContext = createContext<{
   board: RouterOutputs["board"]["getHomeBoard"];
   isReady: boolean;
   markAsReady: (id: string) => void;
+  isEditMode: boolean;
+  setEditMode: Dispatch<SetStateAction<boolean>>;
 } | null>(null);
 
 export const BoardProvider = ({
@@ -24,11 +26,11 @@ export const BoardProvider = ({
   const pathname = usePathname();
   const utils = clientApi.useUtils();
   const [readySections, setReadySections] = useState<string[]>([]);
+  const [isEditMode, setEditMode] = useState(false);
   const { data } = clientApi.board.getBoardByName.useQuery(
     { name: initialBoard.name },
     {
       initialData: initialBoard,
-      refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
     },
@@ -60,6 +62,8 @@ export const BoardProvider = ({
         board: data,
         isReady: data.sections.length === readySections.length,
         markAsReady,
+        isEditMode,
+        setEditMode,
       }}
     >
       {children}
@@ -102,3 +106,13 @@ export const useOptionalBoard = () => {
 
   return context?.board;
 };
+
+export const useEditMode = () => {
+  const context = useContext(BoardContext);
+
+  if (!context) {
+    throw new Error("Board is required");
+  }
+
+  return [context.isEditMode, context.setEditMode] as const;
+};

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

@@ -12,7 +12,6 @@ import {
   IconPlus,
   IconSettings,
 } from "@tabler/icons-react";
-import { useAtom, useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
@@ -20,16 +19,15 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
-import { editModeAtom } from "~/components/board/editMode";
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
 import { HeaderButton } from "~/components/layout/header/button";
-import { useRequiredBoard } from "./_context";
+import { useEditMode, useRequiredBoard } from "./_context";
 
 export const BoardContentHeaderActions = () => {
-  const isEditMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
 
@@ -107,7 +105,7 @@ const AddMenu = () => {
 };
 
 const EditModeMenu = () => {
-  const [isEditMode, setEditMode] = useAtom(editModeAtom);
+  const [isEditMode, setEditMode] = useEditMode();
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
   const t = useScopedI18n("board.action.edit");