chore: update dependencies in package.json

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/gitleaks/gitleaks
-    rev: v8.30.0
+    rev: v8.30.1
     hooks:
       - id: gitleaks
         args: ["--verbose"]

client/package.json

@@ -35,7 +35,7 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^6.0.1",
-    "jsdom": "^29.0.0",
+    "jsdom": "^29.0.1",
     "typescript": "^5.3.3",
     "vite": "8.00",
     "vitest": "^4.1.0"

client/src/components/PageList.css

@@ -427,3 +427,130 @@
     min-height: 44px;
   }
 }
+
+/* Move page modal - tree-based folder picker */
+.move-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.move-modal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 8px);
+  padding: 20px;
+  width: 320px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px var(--shadow-lg, rgba(0, 0, 0, 0.3));
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.move-modal-title {
+  margin: 0;
+  font-size: var(--text-base, 16px);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.move-modal-subtitle {
+  margin: 0;
+  font-size: var(--text-sm, 14px);
+  color: var(--text-secondary);
+}
+
+.move-picker {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md, 4px);
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.move-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 8px;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--text-sm, 14px);
+  color: var(--text-primary);
+  transition: background 0.15s ease;
+}
+
+.move-picker-item:last-child {
+  border-bottom: none;
+}
+
+.move-picker-item:hover {
+  background: var(--bg-hover, var(--bg-tertiary));
+}
+
+.move-picker-item.selected {
+  background: var(--accent-bg, rgba(59, 130, 246, 0.1));
+  color: var(--accent-color);
+  font-weight: 500;
+}
+
+.move-picker-root {
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.move-picker-root.selected {
+  color: var(--accent-color);
+}
+
+.move-modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.move-modal-cancel {
+  padding: 6px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md, 4px);
+  background: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: var(--text-sm, 14px);
+  transition: background 0.15s ease;
+}
+
+.move-modal-cancel:hover:not(:disabled) {
+  background: var(--bg-hover, var(--bg-tertiary));
+}
+
+.move-modal-confirm {
+  padding: 6px 14px;
+  border: none;
+  border-radius: var(--radius-md, 4px);
+  background: var(--accent-color);
+  color: var(--accent-text);
+  cursor: pointer;
+  font-size: var(--text-sm, 14px);
+  font-weight: 500;
+  transition: background 0.15s ease;
+}
+
+.move-modal-confirm:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.move-modal-cancel:disabled,
+.move-modal-confirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

client/src/components/PageList.tsx

@@ -65,6 +65,7 @@ export const PageList: React.FC<PageListProps> = ({
   const [templatesError, setTemplatesError] = useState<string | null>(null);
   const [isDeleting, setIsDeleting] = useState<string | null>(null);
   const [isMoving, setIsMoving] = useState(false);
+  const [moveDestination, setMoveDestination] = useState<string>("");
   const [sortField, setSortField] = useState<SortField>("name");
   const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -332,15 +333,16 @@ export const PageList: React.FC<PageListProps> = ({
 
   const handleMovePage = (path: string) => {
     setMovingPage(path);
+    setMoveDestination("");
     setContextMenuPage(null);
   };
 
-  const handleMoveSubmit = async (targetFolder: string) => {
+  const handleMoveSubmit = async () => {
     if (!movingPage) return;
 
     setIsMoving(true);
     try {
-      const result = await api.movePage(movingPage, targetFolder);
+      const result = await api.movePage(movingPage, moveDestination);
       loadPages();
       onRefresh();
       if (selectedPage === movingPage) {
@@ -358,24 +360,25 @@ export const PageList: React.FC<PageListProps> = ({
     }
   };
 
-  const getAllFolders = (
+  /** Recursive folder picker with tree structure and indentation */
+  const renderPickerNodes = (
     node: FolderNode,
-    prefix: string = "",
-  ): Array<{ path: string; display: string }> => {
-    const folders: Array<{ path: string; display: string }> = [];
-    const currentPath = prefix ? `${prefix}/${node.name}` : node.name;
-    const displayPath = currentPath === "" ? "/" : currentPath;
-
-    folders.push({
-      path: node.path === "/" ? "" : node.path,
-      display: displayPath,
-    });
-
-    for (const child of node.children) {
-      folders.push(...getAllFolders(child, currentPath));
-    }
-
-    return folders;
+    indent: number = 0,
+  ): React.ReactNode => {
+    return node.children.map((child) => (
+      <React.Fragment key={child.path}>
+        <button
+          className={`move-picker-item ${moveDestination === child.path ? "selected" : ""}`}
+          style={{ paddingLeft: `${indent * 16 + 8}px` }}
+          onClick={() => setMoveDestination(child.path)}
+          role="option"
+          aria-selected={moveDestination === child.path}
+        >
+          <Folder size={14} aria-hidden="true" /> {child.name}
+        </button>
+        {renderPickerNodes(child, indent + 1)}
+      </React.Fragment>
+    ));
   };
 
   return (
@@ -531,47 +534,51 @@ export const PageList: React.FC<PageListProps> = ({
       {/* Move Page Modal */}
       {movingPage && folderTree && (
         <div
-          className="modal-overlay"
+          className="move-modal-overlay"
           onClick={() => !isMoving && setMovingPage(null)}
           role="dialog"
           aria-modal="true"
           aria-labelledby="move-modal-title"
         >
-          <div className="modal" onClick={(e) => e.stopPropagation()}>
-            <h3 id="move-modal-title">Move Page</h3>
-            <p>
-              Select destination folder for{" "}
-              <strong>{movingPage.split("/").pop()}</strong>:
-            </p>
+          <div className="move-modal" onClick={(e) => e.stopPropagation()}>
+            <h3 className="move-modal-title" id="move-modal-title">
+              Move "{movingPage.split("/").pop()}"
+            </h3>
+            <p className="move-modal-subtitle">Select destination folder:</p>
             {isMoving ? (
               <div className="modal-loading" role="status" aria-live="polite">
                 <Loader2 size={24} className="loading-spinner" aria-hidden="true" />
                 <span>Moving page...</span>
               </div>
             ) : (
-              <div className="folder-list" role="list">
-                {getAllFolders(folderTree).map((folder) => (
-                  <button
-                    key={folder.path}
-                    className="folder-option"
-                    onClick={() => handleMoveSubmit(folder.path)}
-                    disabled={isMoving}
-                    role="listitem"
-                    aria-label={`Move to ${folder.display}`}
-                  >
-                    <Folder size={14} aria-hidden="true" /> {folder.display}
-                  </button>
-                ))}
+              <div className="move-picker" role="listbox" aria-label="Destination folder">
+                <button
+                  className={`move-picker-item move-picker-root ${moveDestination === "" ? "selected" : ""}`}
+                  onClick={() => setMoveDestination("")}
+                  role="option"
+                  aria-selected={moveDestination === ""}
+                >
+                  <Folder size={14} aria-hidden="true" /> Root (top level)
+                </button>
+                {renderPickerNodes(folderTree, 1)}
               </div>
             )}
-            <button
-              className="cancel-btn"
-              onClick={() => setMovingPage(null)}
-              disabled={isMoving}
-              aria-label="Cancel moving page"
-            >
-              Cancel
-            </button>
+            <div className="move-modal-actions">
+              <button
+                className="move-modal-cancel"
+                onClick={() => setMovingPage(null)}
+                disabled={isMoving}
+              >
+                Cancel
+              </button>
+              <button
+                className="move-modal-confirm"
+                onClick={handleMoveSubmit}
+                disabled={isMoving}
+              >
+                {isMoving ? "Moving..." : "Move Here"}
+              </button>
+            </div>
           </div>
         </div>
       )}