feat: add socket listener for descendant count updates in page tree

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

@@ -21,6 +21,7 @@ import {
   useTreeRevalidation,
 } from '../hooks/_inner';
 import { usePageDnd, useSetEnableDragAndDrop } from '../hooks/use-page-dnd';
+import { useSocketUpdateDescCount } from '../hooks/use-socket-update-desc-count';
 import type { TreeItemProps } from '../interfaces';
 import { useTriggerTreeRebuild } from '../states/_inner';
 
@@ -94,6 +95,9 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
   const { canDrag, canDrop, onDrop, renderDragLine } = usePageDnd();
   const setEnableDragAndDrop = useSetEnableDragAndDrop();
 
+  // Subscribe to Socket.io UpdateDescCount events
+  useSocketUpdateDescCount();
+
   // Set enable state for D&D
   useEffect(() => {
     setEnableDragAndDrop(enableDragAndDrop);

apps/app/src/features/page-tree/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './use-page-create';
 export * from './use-page-dnd';
 export * from './use-page-rename';
 export * from './use-placeholder-rename-effect';
+export * from './use-socket-update-desc-count';

apps/app/src/features/page-tree/hooks/use-socket-update-desc-count.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+
+import type {
+  UpdateDescCountData,
+  UpdateDescCountRawData,
+} from '~/interfaces/websocket';
+import { SocketEventName } from '~/interfaces/websocket';
+import { useGlobalSocket } from '~/states/socket-io';
+
+import { usePageTreeDescCountMapAction } from '../states/page-tree-desc-count-map';
+
+/**
+ * Hook to listen for Socket.io UpdateDescCount events and update the page tree state
+ *
+ * This hook subscribes to the UpdateDescCount socket event, which is emitted by the server
+ * when descendant counts change (e.g., when pages are created, deleted, or moved).
+ * The received data is converted from raw format (Record) to Map format and stored in Jotai state.
+ */
+export const useSocketUpdateDescCount = (): void => {
+  const socket = useGlobalSocket();
+  const { update: updatePtDescCountMap } = usePageTreeDescCountMapAction();
+
+  useEffect(() => {
+    if (socket == null) {
+      return;
+    }
+
+    const handler = (data: UpdateDescCountRawData) => {
+      // Convert from Record to Map format for Jotai state
+      const newData: UpdateDescCountData = new Map(Object.entries(data));
+      updatePtDescCountMap(newData);
+    };
+
+    socket.on(SocketEventName.UpdateDescCount, handler);
+
+    return () => {
+      socket.off(SocketEventName.UpdateDescCount, handler);
+    };
+  }, [socket, updatePtDescCountMap]);
+};