@allbluecn/web-app 0.6.3 → 0.7.1

package/src/plugins/core/prd/components/prd-tree-page-tab.tsx

@@ -0,0 +1,572 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import React, { useState, useCallback, useEffect, useRef, useMemo, useReducer } from "react";
+import { useTranslation } from "react-i18next";
+import { Folder, File, FolderPlus, Plus, Search, ChevronRight } from "lucide-react";
+import {
+  editReducer,
+  createReducer,
+  dragReducer,
+  initialEditState,
+  initialCreateState,
+  initialDragState,
+} from "./prd-tree-reducer";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui-shared/tooltip";
+import { cn } from "@/components/ui-shared/utils";
+import { Input } from "@/components/ui-shared/input";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+} from "@/components/ui-shared/context-menu";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "@/components/ui-shared/alert-dialog";
+import { buildTree, TreeNode, PRDPage } from "@/lib/prd-tree-utils";
+import { listPrdPagesFn, createPrdPageFn, updatePrdPageFn, deletePrdPageFn } from "../serverFns/pages";
+
+interface PRDPageTabProps {
+  prdId: string;
+  activePageId: string | null;
+  onPageSelect: (pageId: string) => void;
+}
+
+export function PRDPageTab({ prdId, activePageId, onPageSelect }: PRDPageTabProps) {
+  const { t } = useTranslation(["prd", "common"]);
+  const [pages, setPages] = useState<PRDPage[]>([]);
+  const [tree, setTree] = useState<TreeNode[]>([]);
+  const [editState, editDispatch] = useReducer(editReducer, initialEditState);
+  const homeCreated = useRef(false);
+  const dragNodeIdRef = useRef<string | null>(null);
+
+  const [dragState, dragDispatch] = useReducer(dragReducer, initialDragState);
+
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const [createState, createDispatch] = useReducer(createReducer, initialCreateState);
+  const creatingRef = useRef<HTMLInputElement>(null);
+  const editingRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editState.editingId) {
+      requestAnimationFrame(() => {
+        editingRef.current?.focus();
+        editingRef.current?.select();
+      });
+    }
+  }, [editState.editingId]);
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const toggleNode = useCallback((id: string) => {
+    setExpandedNodes(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const nodeIdsWithChildren = new Set<string>();
+    const walk = (nodes: TreeNode[]) => {
+      for (const node of nodes) {
+        if (node.children.length > 0) nodeIdsWithChildren.add(node.id);
+        walk(node.children);
+      }
+    };
+    walk(tree);
+    setExpandedNodes(prev => {
+      let hasNew = false;
+      for (const id of nodeIdsWithChildren) { if (!prev.has(id)) { hasNew = true; break; } }
+      if (!hasNew) return prev;
+      const next = new Set(prev);
+      for (const id of nodeIdsWithChildren) next.add(id);
+      return next;
+    });
+  }, [tree]);
+
+  const filteredTree = useMemo(() => {
+    if (!searchQuery.trim()) return tree;
+    const q = searchQuery.toLowerCase();
+    const filterNodes = (nodes: TreeNode[]): TreeNode[] =>
+      nodes
+        .map(n => {
+          const children = n.children ? filterNodes(n.children) : [];
+          const match = n.name.toLowerCase().includes(q) || children.length > 0;
+          return match ? { ...n, children } : null;
+        })
+        .filter(Boolean) as TreeNode[];
+    return filterNodes(tree);
+  }, [tree, searchQuery]);
+
+  const refreshPages = useCallback(() => {
+    listPrdPagesFn({ data: { prdId } })
+      .then((data) => {
+        const pages = data as PRDPage[];
+        if (pages.length === 0 && !homeCreated.current) {
+          homeCreated.current = true;
+          createPrdPageFn({ data: { prdId, name: t("treePage.homeName"), type: "page" } }).then(() => refreshPages());
+          return;
+        }
+        setPages(pages);
+        setTree(buildTree(data as PRDPage[]));
+      });
+  }, [prdId]);
+
+  useEffect(() => { refreshPages(); }, [refreshPages]);
+
+  useEffect(() => {
+    if (!activePageId && pages.length > 0) {
+      onPageSelect(pages[0].id);
+    }
+  }, [activePageId, pages, onPageSelect]);
+
+  const confirmEdit = useCallback(async (id: string, name: string) => {
+    if (!name.trim()) return;
+    await updatePrdPageFn({ data: { pageId: id, name: name.trim() } });
+    editDispatch({ type: "CANCEL_EDIT" });
+    refreshPages();
+  }, [refreshPages]);
+
+  const deleteNode = useCallback(async (id: string) => {
+    await deletePrdPageFn({ data: { pageId: id } });
+    refreshPages();
+    setDeleteConfirmId(null);
+  }, [refreshPages]);
+
+  const duplicateNode = useCallback(async (node: TreeNode) => {
+    await createPrdPageFn({ data: { prdId, name: node.name + t("treePage.duplicateSuffix"), type: node.type, parentId: node.parentId } });
+    refreshPages();
+  }, [prdId, refreshPages]);
+
+  const isDescendantOf = useCallback((id: string, ancestorId: string): boolean => {
+    const parentMap = new Map<string, string | null>();
+    pages.forEach(p => parentMap.set(p.id, p.parentId));
+    let current = parentMap.get(id);
+    while (current !== undefined) {
+      if (current === ancestorId) return true;
+      current = current ? parentMap.get(current) : undefined;
+    }
+    return false;
+  }, [pages]);
+
+  const getDepth = useCallback((nodeId: string): number => {
+    const parentMap = new Map<string, string | null>();
+    pages.forEach(p => parentMap.set(p.id, p.parentId));
+    let depth = 0;
+    let current = parentMap.get(nodeId);
+    while (current !== undefined && current !== null) {
+      depth++;
+      current = parentMap.get(current);
+    }
+    return depth;
+  }, [pages]);
+
+  const calcInsertOrder = (siblings: PRDPage[], position: "above" | "below", targetIndex: number): number => {
+    const spacing = 1000;
+    if (siblings.length === 0) return spacing;
+    if (position === "above") {
+      if (targetIndex <= 0) return (siblings[0].order ?? 0) - spacing;
+      return Math.floor(((siblings[targetIndex - 1].order ?? 0) + (siblings[targetIndex].order ?? 0)) / 2);
+    } else {
+      if (targetIndex >= siblings.length - 1) return (siblings[siblings.length - 1].order ?? 0) + spacing;
+      return Math.floor(((siblings[targetIndex].order ?? 0) + (siblings[targetIndex + 1].order ?? 0)) / 2);
+    }
+  };
+
+  const moveNode = useCallback(async (id: string, parentId: string | null, order: number) => {
+    await updatePrdPageFn({ data: { pageId: id, parentId, order } });
+  }, []);
+
+  const handleStartCreate = useCallback((type: "folder" | "page") => {
+    createDispatch({ type: "START_CREATE", creatingType: type });
+  }, []);
+
+  const handleCreateConfirm = useCallback(async () => {
+    if (!createState.creatingType) return;
+    const name = createState.creatingName.trim() || (createState.creatingType === "folder" ? t("treePage.unnamedFolder") : t("treePage.unnamed"));
+    try {
+      await createPrdPageFn({ data: { prdId, name, type: createState.creatingType } });
+      refreshPages();
+    } catch (err) {
+      console.error("Create failed:", err);
+    }
+    createDispatch({ type: "FINISH_CREATE" });
+  }, [createState.creatingType, createState.creatingName, prdId, refreshPages]);
+
+  const handleCreateCancel = useCallback(() => {
+    createDispatch({ type: "CANCEL_CREATE" });
+  }, []);
+
+  useEffect(() => {
+    if (createState.creatingType && creatingRef.current) {
+      creatingRef.current.focus();
+      creatingRef.current.select();
+    }
+  }, [createState.creatingType]);
+
+  const handleDragStart = (e: React.DragEvent, nodeId: string) => {
+    e.dataTransfer.setData("text/plain", nodeId);
+    e.dataTransfer.effectAllowed = "move";
+    dragNodeIdRef.current = nodeId;
+  };
+
+  const handleDragEnd = () => {
+    dragNodeIdRef.current = null;
+    dragDispatch({ type: "CLEAR_DRAG_OVER" });
+  };
+
+  const handleDragOverNode = (e: React.DragEvent, node: TreeNode) => {
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId || draggedId === node.id || isDescendantOf(node.id, draggedId)) return;
+
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const height = rect.height;
+
+    if (y < height * 0.25) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "above" });
+     } else if (y < height * 0.75) {
+       const draggedId = dragNodeIdRef.current;
+       const targetDepth = getDepth(node.id);
+       let canDropInside = targetDepth <= 1;
+       if (node.type === "folder" && targetDepth === 1 && draggedId && pages.some(p => p.parentId === draggedId)) {
+         canDropInside = false;
+       }
+       if (canDropInside) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "inside" });
+      } else {
+        dragDispatch({ type: "CLEAR_DRAG_OVER" });
+      }
+    } else {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      dragDispatch({ type: "SET_DRAG_OVER", nodeId: node.id, position: "below" });
+    }
+  };
+
+  const handleDragLeaveNode = () => {
+    dragDispatch({ type: "CLEAR_DRAG_OVER" });
+  };
+
+  const handleDropOnNode = async (e: React.DragEvent, targetNode: TreeNode) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId || draggedId === targetNode.id || isDescendantOf(targetNode.id, draggedId)) {
+      handleDragEnd();
+      return;
+    }
+
+    if (dragState.dragPosition === "inside") {
+      const targetChildren = pages.filter(p => p.parentId === targetNode.id);
+      let order = targetChildren.length > 0 ? Math.max(...targetChildren.map(c => c.order ?? 0)) + 1000 : 1000;
+
+      try {
+        await moveNode(draggedId, targetNode.id, order);
+
+        const draggedChildren = pages.filter(p => p.parentId === draggedId)
+          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        if (targetNode.type === "folder") {
+          for (let i = 0; i < draggedChildren.length; i++) {
+            await moveNode(draggedChildren[i].id, draggedId, (i + 1) * 1000);
+          }
+        } else {
+          for (let i = 0; i < draggedChildren.length; i++) {
+            await moveNode(draggedChildren[i].id, targetNode.id, order + (i + 1) * 1000);
+          }
+        }
+        refreshPages();
+      } catch (err) {
+        console.error("Move failed:", err);
+      }
+    } else {
+      const newParentId = targetNode.parentId;
+      const siblings = pages.filter(p => p.parentId === targetNode.parentId)
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      const targetIndex = siblings.findIndex(s => s.id === targetNode.id);
+      const newOrder = calcInsertOrder(siblings, dragState.dragPosition!, targetIndex);
+
+      try {
+        await moveNode(draggedId, newParentId, newOrder);
+        refreshPages();
+      } catch (err) {
+        console.error("Move failed:", err);
+      }
+    }
+    handleDragEnd();
+  };
+
+  const handleDropEmpty = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const draggedId = dragNodeIdRef.current;
+    if (!draggedId) { handleDragEnd(); return; }
+
+    const rootSiblings = pages.filter(p => p.parentId === null)
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const newOrder = rootSiblings.length > 0 ? Math.max(...rootSiblings.map(c => c.order ?? 0)) + 1000 : 1000;
+
+    try {
+      await moveNode(draggedId, null, newOrder);
+      refreshPages();
+    } catch (err) {
+      console.error("Move failed:", err);
+    }
+    handleDragEnd();
+  };
+
+  const isDragOver = (nodeId: string) => dragState.dragOverNodeId === nodeId;
+
+   const renderNode = (node: TreeNode, depth: number = 0) => {
+      const hovering = isDragOver(node.id);
+      const actualExpanded = searchQuery.trim() ? true : expandedNodes.has(node.id);
+      const hasChildren = node.children.length > 0;
+
+      return (
+        <div key={node.id}>
+          <ContextMenu>
+            <ContextMenuTrigger asChild>
+              <div
+                draggable
+                onDragStart={(e) => handleDragStart(e, node.id)}
+                onDragEnd={handleDragEnd}
+                onDragOver={(e) => handleDragOverNode(e, node)}
+                onDragLeave={handleDragLeaveNode}
+                onDrop={(e) => handleDropOnNode(e, node)}
+                className={cn(
+                  "relative flex items-center gap-1 px-2 py-1.5 rounded cursor-pointer text-xs group hover:bg-muted/50 transition-colors",
+                  activePageId === node.id && "bg-muted font-medium",
+                  hovering && dragState.dragPosition === "inside" && "bg-accent/50 ring-1 ring-primary/30",
+                )}
+                style={{ paddingLeft: `${12 + depth * 16}px` }}
+               onClick={(e) => {
+                 const target = e.target as HTMLElement;
+                 const isChevronClick = target.closest('[data-chevron]');
+                 
+                 if (isChevronClick) {
+                   if (hasChildren) {
+                     e.stopPropagation();
+                     toggleNode(node.id);
+                   }
+                 } else {
+                   if (node.type === "page") {
+                     onPageSelect(node.id);
+                   } else if (node.type === "folder") {
+                     if (hasChildren) toggleNode(node.id);
+                   }
+                 }
+               }}
+             >
+                {hovering && dragState.dragPosition === "above" && (
+                  <div className="absolute left-2 right-2 top-0 h-0.5 rounded-full bg-primary pointer-events-none" />
+                )}
+                {hovering && dragState.dragPosition === "below" && (
+                 <div className="absolute left-2 right-2 bottom-0 h-0.5 rounded-full bg-primary pointer-events-none" />
+               )}
+               {hasChildren ? (
+                 <button
+                   data-chevron
+                   type="button"
+                   onClick={(e) => {
+                     e.stopPropagation();
+                     toggleNode(node.id);
+                   }}
+                   className="shrink-0 hover:bg-muted rounded p-0.5 -m-0.5 z-10"
+                 >
+                   <ChevronRight className={cn("size-3.5 shrink-0 text-muted-foreground/60 transition-transform duration-150", actualExpanded && "rotate-90")} />
+                 </button>
+               ) : (
+                 <span className="size-3.5 shrink-0" />
+               )}
+               {node.type === "folder" ? (
+                 <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+               ) : (
+                 <File className="size-3.5 shrink-0 text-muted-foreground" />
+               )}
+
+               {editState.editingId === node.id ? (
+                 <input
+                   ref={editingRef}
+                   className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
+                   value={editState.editValue}
+                   aria-label={t("treePage.pageName")}
+                   onChange={e => editDispatch({ type: "SET_EDIT_VALUE", value: e.target.value })}
+                   onKeyDown={e => {
+                     if (e.key === "Enter") confirmEdit(node.id, editState.editValue);
+                     if (e.key === "Escape") editDispatch({ type: "CANCEL_EDIT" });
+                   }}
+                   onBlur={() => confirmEdit(node.id, editState.editValue)}
+                  placeholder={node.type === "folder" ? t("treePage.folderName") : t("treePage.pageName")}
+                />
+              ) : (
+                <span className="flex-1 truncate text-xs">{node.name || t("treePage.unnamed")}</span>
+              )}
+            </div>
+          </ContextMenuTrigger>
+          <ContextMenuContent className="min-w-36 space-y-1.5">
+            <ContextMenuItem onClick={() => editDispatch({ type: "START_EDIT", id: node.id, name: node.name })}>
+              {t("treePage.rename")}
+              {/* <ContextMenuShortcut className="text-xs">Ctrl+Shift+R</ContextMenuShortcut> */}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => duplicateNode(node)}>
+              {t("treePage.duplicate")}
+            </ContextMenuItem>
+            {/* <ContextMenuItem onClick={() => {
+              const targetName = window.prompt("输入目标页面/文件夹名称");
+              if (targetName) {
+                const targetNode = pages.find(p => p.name === targetName);
+                if (targetNode && getDepth(targetNode.id) <= 1) {
+                  fetch(`/api/prd/pages/${node.id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ parentId: targetNode.id }),
+                  }).then(() => refreshPages());
+                }
+              }
+            }}>
+              移动到...
+            </ContextMenuItem> */}
+            <ContextMenuSeparator />
+            <ContextMenuItem onClick={() => setDeleteConfirmId(node.id)} className="text-destructive">
+              {t("treePage.delete")}
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+{actualExpanded && node.children.length > 0 && (
+          <div>{node.children.map(child => renderNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  const deleteTarget = deleteConfirmId ? pages.find(p => p.id === deleteConfirmId) : null;
+
+  return (
+    <>
+      <AlertDialog open={!!deleteConfirmId} onOpenChange={(v) => { if (!v) setDeleteConfirmId(null); }}>
+        <AlertDialogContent className="border border-border">
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("treePage.confirmDelete")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("treePage.deleteConfirmDesc", { name: deleteTarget?.name || t("treePage.unnamed") })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setDeleteConfirmId(null)}>{t("common:button.cancel")}</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={() => deleteConfirmId && deleteNode(deleteConfirmId)}>{t("treePage.delete")}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <div className="flex flex-col h-full">
+        <div className="shrink-0 flex items-center gap-1 h-8 px-2 border-b">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground/40" />
+            <Input
+              className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30"
+              placeholder={t("treePage.searchPlaceholder")}
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => handleStartCreate("folder")}
+                className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground"
+              >
+                <FolderPlus className="size-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("treePage.newFolder")}</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => handleStartCreate("page")}
+                className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground"
+              >
+                <Plus className="size-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("treePage.newPage")}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+        <div
+          className="flex-1 overflow-y-auto py-1"
+          onDragOver={(e) => { if (dragNodeIdRef.current) e.preventDefault(); }}
+          onDrop={handleDropEmpty}
+        >
+          {filteredTree.map(node => renderNode(node))}
+          {createState.creatingType && (
+            <div
+              className="flex items-center gap-1.5 px-2 py-1.5 rounded text-xs"
+              style={{ paddingLeft: `${12}px` }}
+            >
+              {createState.creatingType === "folder" ? (
+                <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+              ) : (
+                <File className="size-3.5 shrink-0 text-muted-foreground" />
+              )}
+              <input
+                ref={creatingRef}
+                className="h-7 w-full rounded-md border border-input bg-transparent px-1.5 py-0 text-xs outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 placeholder:text-muted-foreground/40"
+                value={createState.creatingName}
+                aria-label={t("treePage.pageName")}
+                onChange={e => createDispatch({ type: "SET_CREATING_NAME", value: e.target.value })}
+                onKeyDown={e => {
+                  if (e.key === "Enter") handleCreateConfirm();
+                  if (e.key === "Escape") handleCreateCancel();
+                }}
+                onBlur={handleCreateConfirm}
+                placeholder={createState.creatingType === "folder" ? t("treePage.folderName") : t("treePage.pageName")}
+              />
+            </div>
+          )}
+          {filteredTree.length === 0 && !createState.creatingType && (
+            <div className="px-3 py-4 text-xs text-muted-foreground text-center">
+              {searchQuery ? t("treePage.noMatch") : t("treePage.noPages")}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/plugins/core/prd/components/prd-tree-reducer.ts

@@ -0,0 +1,96 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export type TreeEditState = {
+  editingId: string | null;
+  editValue: string;
+};
+
+export type TreeCreateState = {
+  creatingType: "folder" | "page" | null;
+  creatingName: string;
+};
+
+export type TreeDragState = {
+  dragOverNodeId: string | null;
+  dragPosition: "above" | "inside" | "below" | null;
+};
+
+export const initialEditState: TreeEditState = {
+  editingId: null,
+  editValue: "",
+};
+
+export const initialCreateState: TreeCreateState = {
+  creatingType: null,
+  creatingName: "",
+};
+
+export const initialDragState: TreeDragState = {
+  dragOverNodeId: null,
+  dragPosition: null,
+};
+
+type EditAction =
+  | { type: "START_EDIT"; id: string; name: string }
+  | { type: "CANCEL_EDIT" }
+  | { type: "SET_EDIT_VALUE"; value: string };
+
+type CreateAction =
+  | { type: "START_CREATE"; creatingType: "folder" | "page" }
+  | { type: "SET_CREATING_NAME"; value: string }
+  | { type: "FINISH_CREATE" }
+  | { type: "CANCEL_CREATE" };
+
+type DragAction =
+  | { type: "SET_DRAG_OVER"; nodeId: string; position: "above" | "inside" | "below" }
+  | { type: "CLEAR_DRAG_OVER" };
+
+export function editReducer(state: TreeEditState, action: EditAction): TreeEditState {
+  switch (action.type) {
+    case "START_EDIT":
+      return { editingId: action.id, editValue: action.name };
+    case "CANCEL_EDIT":
+      return { editingId: null, editValue: "" };
+    case "SET_EDIT_VALUE":
+      return { ...state, editValue: action.value };
+  }
+}
+
+export function createReducer(state: TreeCreateState, action: CreateAction): TreeCreateState {
+  switch (action.type) {
+    case "START_CREATE":
+      return {
+        creatingType: action.creatingType,
+        creatingName: action.creatingType === "folder" ? "Unnamed Folder" : "Unnamed",
+      };
+    case "SET_CREATING_NAME":
+      return { ...state, creatingName: action.value };
+    case "FINISH_CREATE":
+    case "CANCEL_CREATE":
+      return { creatingType: null, creatingName: "" };
+  }
+}
+
+export function dragReducer(state: TreeDragState, action: DragAction): TreeDragState {
+  switch (action.type) {
+    case "SET_DRAG_OVER":
+      return { dragOverNodeId: action.nodeId, dragPosition: action.position };
+    case "CLEAR_DRAG_OVER":
+      return { dragOverNodeId: null, dragPosition: null };
+  }
+}