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

apps/nextjs/src/components/board/editMode.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const editModeAtom = atom(false);

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -11,13 +11,12 @@ import {
   IconTransitionTop,
   IconTrash,
 } from "@tabler/icons-react";
-import { useAtomValue } from "jotai";
 
 import { useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
-import { editModeAtom } from "../../editMode";
+import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { useCategoryMenuActions } from "./category-menu-actions";
 
 interface Props {
@@ -56,7 +55,7 @@ export const CategoryMenu = ({ category }: Props) => {
 };
 
 const useActions = (category: CategorySection) => {
-  const isEditMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
   const editModeActions = useEditModeActions(category);
   const nonEditModeActions = useNonEditModeActions(category);
 

apps/nextjs/src/components/board/sections/content.tsx

@@ -1,13 +1,12 @@
 /* eslint-disable react/no-unknown-property */
 // Ignored because of gridstack attributes
 
-import { useMemo } from "react";
 import type { RefObject } from "react";
+import { useMemo } from "react";
 import { ActionIcon, Card, Menu } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 import combineClasses from "clsx";
-import { useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
@@ -21,8 +20,7 @@ import {
 } from "@homarr/widgets";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
-import { editModeAtom } from "../editMode";
+import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { useItemActions } from "../items/item-actions";
 import type { UseGridstackRefs } from "./gridstack/use-gridstack";
 import classes from "./item.module.css";
@@ -97,7 +95,7 @@ interface ItemContentProps {
 
 const BoardItemContent = ({ item, ...dimensions }: ItemContentProps) => {
   const board = useRequiredBoard();
-  const editMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
   const serverData = useServerDataFor(item.id);
   const Comp = loadWidgetDynamic(item.kind);
   const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
@@ -112,7 +110,7 @@ const BoardItemContent = ({ item, ...dimensions }: ItemContentProps) => {
         options={options as never}
         integrations={item.integrations}
         serverData={serverData?.data as never}
-        isEditMode={editMode}
+        isEditMode={isEditMode}
         boardId={board.id}
         itemId={item.id}
         {...dimensions}
@@ -126,7 +124,7 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
   const t = useI18n();
   const { openModal } = useModalAction(WidgetEditModal);
   const { openConfirmModal } = useConfirmModal();
-  const isEditMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
   const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, removeItem } = useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);

apps/nextjs/src/components/board/sections/empty-section.tsx

@@ -1,8 +1,7 @@
 import type { RefObject } from "react";
-import { useAtomValue } from "jotai";
 
 import type { EmptySection } from "~/app/[locale]/boards/_types";
-import { editModeAtom } from "../editMode";
+import { useEditMode } from "~/app/[locale]/boards/(content)/_context";
 import { SectionContent } from "./content";
 import { useGridstack } from "./gridstack/use-gridstack";
 
@@ -15,7 +14,7 @@ const defaultClasses = "grid-stack grid-stack-empty min-row";
 
 export const BoardEmptySection = ({ section, mainRef }: Props) => {
   const { refs } = useGridstack({ section, mainRef });
-  const isEditMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
 
   return (
     <div

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,12 +1,10 @@
 import type { MutableRefObject, RefObject } from "react";
 import { createRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { useAtomValue } from "jotai";
 
 import type { GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
 
 import type { Section } from "~/app/[locale]/boards/_types";
-import { useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
-import { editModeAtom } from "../../editMode";
+import { useEditMode, useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { useItemActions } from "../../items/item-actions";
 import { initializeGridstack } from "./init-gridstack";
 
@@ -26,7 +24,7 @@ interface UseGridstackProps {
 }
 
 export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGristackReturnType => {
-  const isEditMode = useAtomValue(editModeAtom);
+  const [isEditMode] = useEditMode();
   const markAsReady = useMarkSectionAsReady();
   const { moveAndResizeItem, moveItemToSection } = useItemActions();
   // define reference for wrapper - is used to calculate the width of the wrapper