refactor: simplify drag and drop logic in ItemsTree and usePageDnd

apps/app/src/features/page-tree/components/ItemsTree.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTree } from '@headless-tree/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useTranslation } from 'next-i18next';
@@ -20,7 +20,7 @@ import {
   useTreeItemHandlers,
   useTreeRevalidation,
 } from '../hooks/_inner';
-import { usePageDnd, useSetEnableDragAndDrop } from '../hooks/use-page-dnd';
+import { usePageDnd } from '../hooks/use-page-dnd';
 import { useSocketUpdateDescCount } from '../hooks/use-socket-update-desc-count';
 import type { TreeItemProps } from '../interfaces';
 import { useTriggerTreeRebuild } from '../states/_inner';
@@ -92,17 +92,11 @@ export const ItemsTree: FC<Props> = (props: Props) => {
   });
 
   // Page move (drag and drop) handlers
-  const { canDrag, canDrop, onDrop, renderDragLine } = usePageDnd();
-  const setEnableDragAndDrop = useSetEnableDragAndDrop();
+  const { canDrag, canDrop, onDrop, renderDragLine } = usePageDnd(enableDragAndDrop);
 
   // Subscribe to Socket.io UpdateDescCount events
   useSocketUpdateDescCount();
 
-  // Set enable state for D&D
-  useEffect(() => {
-    setEnableDragAndDrop(enableDragAndDrop);
-  }, [enableDragAndDrop, setEnableDragAndDrop]);
-
   // Wrap onDrop to show toast notifications
   const handleDrop = useCallback(
     async (...args: Parameters<typeof onDrop>) => {

apps/app/src/features/page-tree/hooks/use-page-dnd.tsx

@@ -6,7 +6,6 @@ import type {
   ItemInstance,
   TreeInstance,
 } from '@headless-tree/core';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { basename, join } from 'pathe';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
@@ -69,11 +68,6 @@ export type PageMoveResult = {
   errorType?: PageMoveErrorType;
 };
 
-/**
- * Atom to track if drag and drop is enabled
- */
-const enableDragAndDropAtom = atom(false);
-
 /**
  * Props for DragLine component
  */
@@ -102,10 +96,6 @@ export type UsePageDndResult = {
     items: ItemInstance<IPageForTreeItem>[],
     target: DragTarget<IPageForTreeItem>,
   ) => Promise<PageMoveResult>;
-  /**
-   * Whether drag and drop is currently enabled
-   */
-  isEnabled: boolean;
   /**
    * Render the drag line indicator
    * @param tree - The tree instance from headless-tree
@@ -121,16 +111,14 @@ export type UsePageDndResult = {
  * - Determine if items can be dragged (canDrag)
  * - Determine if items can be dropped on a target (canDrop)
  * - Execute page move API call and tree refresh (onDrop)
- * - Track enable state (isEnabled)
  * - Provide drag line rendering (renderDragLine)
  *
  * Note: Toast notifications should be handled by the caller based on PageMoveResult
  *
- * @returns Object with canDrag, canDrop, onDrop handlers, isEnabled state, and renderDragLine
+ * @returns Object with canDrag, canDrop, onDrop handlers and renderDragLine
  */
-export const usePageDnd = (): UsePageDndResult => {
+export const usePageDnd = (isEnabled: boolean = false): UsePageDndResult => {
   const { notifyUpdateItems } = usePageTreeInformationUpdate();
-  const isEnabled = useAtomValue(enableDragAndDropAtom);
 
   /**
    * Determine if items can be dragged
@@ -273,17 +261,9 @@ export const usePageDnd = (): UsePageDndResult => {
       canDrag,
       canDrop,
       onDrop,
-      isEnabled,
       renderDragLine,
     }),
-    [canDrag, canDrop, onDrop, isEnabled, renderDragLine],
+    [canDrag, canDrop, onDrop, renderDragLine],
   );
 };
 
-/**
- * Hook to set drag and drop enabled state
- * Used by tree container to enable/disable D&D feature
- */
-export const useSetEnableDragAndDrop = (): ((enabled: boolean) => void) => {
-  return useSetAtom(enableDragAndDropAtom);
-};