@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/components/FolderTree.tsx

@@ -1,38 +1,48 @@
-'use client';
+'use client'
 
 import {
-  ChevronRight, ChevronDown, FolderOpen, Folder as FolderIcon,
-  Plus, MoreHorizontal, Pencil, Trash2, FolderPlus, Clock,
-  Inbox, LayoutGrid, Loader2,
-} from 'lucide-react';
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { toast } from 'sonner';
-import { cmsApi } from '../lib/api.js';
+  ChevronRight,
+  ChevronDown,
+  FolderOpen,
+  Folder as FolderIcon,
+  Plus,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  FolderPlus,
+  Clock,
+  Inbox,
+  LayoutGrid,
+  Loader2,
+} from 'lucide-react'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { toast } from 'sonner'
+import { cmsApi } from '../lib/api.js'
 
 export interface FolderNode {
-  id: string;
-  name: string;
-  scope: string;
-  parentId: string | null;
-  position: number;
-  children: FolderNode[];
+  id: string
+  name: string
+  scope: string
+  parentId: string | null
+  position: number
+  children: FolderNode[]
 }
 
-export type SmartFolder = 'all' | 'recent' | 'uncategorized';
+export type SmartFolder = 'all' | 'recent' | 'uncategorized'
 
 export type FolderSelection =
   | { type: 'smart'; smart: SmartFolder }
-  | { type: 'folder'; folderId: string };
+  | { type: 'folder'; folderId: string }
 
 export interface FolderTreeProps {
-  scope: string;
-  selected: FolderSelection;
-  onSelect: (selection: FolderSelection) => void;
-  itemCounts?: Record<string, number>;
-  totalCount?: number;
-  recentCount?: number;
-  uncategorizedCount?: number;
-  onDropItem?: (itemId: string, folderId: string | null) => void;
+  scope: string
+  selected: FolderSelection
+  onSelect: (selection: FolderSelection) => void
+  itemCounts?: Record<string, number>
+  totalCount?: number
+  recentCount?: number
+  uncategorizedCount?: number
+  onDropItem?: (itemId: string, folderId: string | null) => void
 }
 
 export function FolderTree({
@@ -45,134 +55,136 @@ export function FolderTree({
   uncategorizedCount,
   onDropItem,
 }: FolderTreeProps) {
-  const [folders, setFolders] = useState<FolderNode[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editName, setEditName] = useState('');
-  const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null);
-  const [creatingIn, setCreatingIn] = useState<string | null | false>(false);
-  const [newFolderName, setNewFolderName] = useState('');
-  const newFolderInputRef = useRef<HTMLInputElement>(null);
-  const editInputRef = useRef<HTMLInputElement>(null);
-  const [dragOverId, setDragOverId] = useState<string | null>(null);
+  const [folders, setFolders] = useState<FolderNode[]>([])
+  const [loading, setLoading] = useState(true)
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editName, setEditName] = useState('')
+  const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null)
+  const [creatingIn, setCreatingIn] = useState<string | null | false>(false)
+  const [newFolderName, setNewFolderName] = useState('')
+  const newFolderInputRef = useRef<HTMLInputElement>(null)
+  const editInputRef = useRef<HTMLInputElement>(null)
+  const [dragOverId, setDragOverId] = useState<string | null>(null)
 
   const fetchFolders = useCallback(async () => {
-    const res = await cmsApi<FolderNode[]>(`/folders?scope=${scope}`);
-    if (res.data) setFolders(res.data);
-    setLoading(false);
-  }, [scope]);
+    const res = await cmsApi<FolderNode[]>(`/folders?scope=${scope}`)
+    if (res.data) setFolders(res.data)
+    setLoading(false)
+  }, [scope])
 
-  useEffect(() => { fetchFolders(); }, [fetchFolders]);
+  useEffect(() => {
+    fetchFolders()
+  }, [fetchFolders])
 
   useEffect(() => {
     if (creatingIn !== false && newFolderInputRef.current) {
-      newFolderInputRef.current.focus();
+      newFolderInputRef.current.focus()
     }
-  }, [creatingIn]);
+  }, [creatingIn])
 
   useEffect(() => {
     if (editingId && editInputRef.current) {
-      editInputRef.current.focus();
-      editInputRef.current.select();
+      editInputRef.current.focus()
+      editInputRef.current.select()
     }
-  }, [editingId]);
+  }, [editingId])
 
   useEffect(() => {
-    const handleClick = () => setContextMenu(null);
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
+    const handleClick = () => setContextMenu(null)
+    document.addEventListener('click', handleClick)
+    return () => document.removeEventListener('click', handleClick)
+  }, [])
 
   const toggleExpand = (id: string) => {
-    setExpanded(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
 
   const handleCreate = async (parentId: string | null) => {
     if (!newFolderName.trim()) {
-      setCreatingIn(false);
-      return;
+      setCreatingIn(false)
+      return
     }
     const res = await cmsApi('/folders', {
       method: 'POST',
       body: JSON.stringify({ name: newFolderName.trim(), scope, parentId }),
-    });
+    })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Folder created');
-      if (parentId) setExpanded(prev => new Set(prev).add(parentId));
-      fetchFolders();
+      toast.success('Folder created')
+      if (parentId) setExpanded((prev) => new Set(prev).add(parentId))
+      fetchFolders()
     }
-    setNewFolderName('');
-    setCreatingIn(false);
-  };
+    setNewFolderName('')
+    setCreatingIn(false)
+  }
 
   const handleRename = async (id: string) => {
     if (!editName.trim()) {
-      setEditingId(null);
-      return;
+      setEditingId(null)
+      return
     }
     const res = await cmsApi(`/folders/${id}`, {
       method: 'PUT',
       body: JSON.stringify({ name: editName.trim() }),
-    });
-    if (res.error) toast.error(res.error);
-    else fetchFolders();
-    setEditingId(null);
-  };
+    })
+    if (res.error) toast.error(res.error)
+    else fetchFolders()
+    setEditingId(null)
+  }
 
   const handleDelete = async (id: string) => {
-    const res = await cmsApi(`/folders/${id}`, { method: 'DELETE' });
-    if (res.error) toast.error(res.error);
+    const res = await cmsApi(`/folders/${id}`, { method: 'DELETE' })
+    if (res.error) toast.error(res.error)
     else {
-      toast.success('Folder deleted');
+      toast.success('Folder deleted')
       if (selected.type === 'folder' && selected.folderId === id) {
-        onSelect({ type: 'smart', smart: 'all' });
+        onSelect({ type: 'smart', smart: 'all' })
       }
-      fetchFolders();
+      fetchFolders()
     }
-  };
+  }
 
   const isSelected = (sel: FolderSelection) => {
-    if (selected.type !== sel.type) return false;
-    if (sel.type === 'smart') return (selected as any).smart === sel.smart;
-    return (selected as any).folderId === (sel as any).folderId;
-  };
+    if (selected.type !== sel.type) return false
+    if (sel.type === 'smart') return (selected as any).smart === sel.smart
+    return (selected as any).folderId === (sel as any).folderId
+  }
 
   const handleDragOver = (e: React.DragEvent, folderId: string | null) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverId(folderId);
-  };
+    e.preventDefault()
+    e.stopPropagation()
+    setDragOverId(folderId)
+  }
 
   const handleDragLeave = () => {
-    setDragOverId(null);
-  };
+    setDragOverId(null)
+  }
 
   const handleDrop = (e: React.DragEvent, folderId: string | null) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverId(null);
-    const itemId = e.dataTransfer.getData('text/actuate-item-id');
+    e.preventDefault()
+    e.stopPropagation()
+    setDragOverId(null)
+    const itemId = e.dataTransfer.getData('text/actuate-item-id')
     if (itemId && onDropItem) {
-      onDropItem(itemId, folderId);
+      onDropItem(itemId, folderId)
     }
-  };
+  }
 
-  const countForFolder = (id: string): number | undefined => itemCounts?.[id];
+  const countForFolder = (id: string): number | undefined => itemCounts?.[id]
 
   const renderFolder = (folder: FolderNode, depth: number) => {
-    const isExpanded = expanded.has(folder.id);
-    const hasChildren = folder.children.length > 0;
-    const isActive = isSelected({ type: 'folder', folderId: folder.id });
-    const isDragOver = dragOverId === folder.id;
-    const count = countForFolder(folder.id);
+    const isExpanded = expanded.has(folder.id)
+    const hasChildren = folder.children.length > 0
+    const isActive = isSelected({ type: 'folder', folderId: folder.id })
+    const isDragOver = dragOverId === folder.id
+    const count = countForFolder(folder.id)
 
     return (
       <div key={folder.id}>
@@ -181,14 +193,14 @@ export function FolderTree({
             isActive
               ? 'bg-blue-50 text-blue-700 font-medium'
               : isDragOver
-              ? 'bg-blue-100 ring-2 ring-blue-300'
-              : 'text-gray-700 hover:bg-gray-100'
+                ? 'bg-blue-100 ring-2 ring-blue-300'
+                : 'text-gray-700 hover:bg-gray-100'
           }`}
           style={{ paddingLeft: `${8 + depth * 16}px` }}
           onClick={() => onSelect({ type: 'folder', folderId: folder.id })}
           onContextMenu={(e) => {
-            e.preventDefault();
-            setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY });
+            e.preventDefault()
+            setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY })
           }}
           onDragOver={(e) => handleDragOver(e, folder.id)}
           onDragLeave={handleDragLeave}
@@ -197,7 +209,10 @@ export function FolderTree({
           <button
             type="button"
             className={`p-0.5 rounded hover:bg-gray-200 transition-colors ${hasChildren ? '' : 'invisible'}`}
-            onClick={(e) => { e.stopPropagation(); toggleExpand(folder.id); }}
+            onClick={(e) => {
+              e.stopPropagation()
+              toggleExpand(folder.id)
+            }}
           >
             {isExpanded ? (
               <ChevronDown className="w-3.5 h-3.5" />
@@ -220,8 +235,8 @@ export function FolderTree({
               onChange={(e) => setEditName(e.target.value)}
               onBlur={() => handleRename(folder.id)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter') handleRename(folder.id);
-                if (e.key === 'Escape') setEditingId(null);
+                if (e.key === 'Enter') handleRename(folder.id)
+                if (e.key === 'Escape') setEditingId(null)
               }}
               className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
               onClick={(e) => e.stopPropagation()}
@@ -238,8 +253,8 @@ export function FolderTree({
             type="button"
             className="p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 transition-all"
             onClick={(e) => {
-              e.stopPropagation();
-              setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY });
+              e.stopPropagation()
+              setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY })
             }}
           >
             <MoreHorizontal className="w-3.5 h-3.5 text-gray-500" />
@@ -248,9 +263,12 @@ export function FolderTree({
 
         {isExpanded && (
           <div>
-            {folder.children.map(child => renderFolder(child, depth + 1))}
+            {folder.children.map((child) => renderFolder(child, depth + 1))}
             {creatingIn === folder.id && (
-              <div className="flex items-center gap-1 px-2 py-1" style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}>
+              <div
+                className="flex items-center gap-1 px-2 py-1"
+                style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}
+              >
                 <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
                 <input
                   ref={newFolderInputRef}
@@ -259,8 +277,11 @@ export function FolderTree({
                   onChange={(e) => setNewFolderName(e.target.value)}
                   onBlur={() => handleCreate(folder.id)}
                   onKeyDown={(e) => {
-                    if (e.key === 'Enter') handleCreate(folder.id);
-                    if (e.key === 'Escape') { setCreatingIn(false); setNewFolderName(''); }
+                    if (e.key === 'Enter') handleCreate(folder.id)
+                    if (e.key === 'Escape') {
+                      setCreatingIn(false)
+                      setNewFolderName('')
+                    }
                   }}
                   placeholder="Folder name..."
                   className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
@@ -270,15 +291,15 @@ export function FolderTree({
           </div>
         )}
       </div>
-    );
-  };
+    )
+  }
 
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
         <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
       </div>
-    );
+    )
   }
 
   return (
@@ -298,7 +319,9 @@ export function FolderTree({
         >
           <LayoutGrid className="w-4 h-4 shrink-0" />
           <span className="flex-1 text-left">All</span>
-          {totalCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>}
+          {totalCount !== undefined && (
+            <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>
+          )}
         </button>
 
         <button
@@ -312,7 +335,9 @@ export function FolderTree({
         >
           <Clock className="w-4 h-4 shrink-0" />
           <span className="flex-1 text-left">Recent</span>
-          {recentCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>}
+          {recentCount !== undefined && (
+            <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>
+          )}
         </button>
 
         <button
@@ -326,14 +351,16 @@ export function FolderTree({
         >
           <Inbox className="w-4 h-4 shrink-0" />
           <span className="flex-1 text-left">Uncategorized</span>
-          {uncategorizedCount !== undefined && <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>}
+          {uncategorizedCount !== undefined && (
+            <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>
+          )}
         </button>
       </div>
 
       <div className="border-t border-gray-200 my-1" />
 
       <div className="flex-1 overflow-y-auto px-1 py-1 space-y-0.5">
-        {folders.map(folder => renderFolder(folder, 0))}
+        {folders.map((folder) => renderFolder(folder, 0))}
 
         {creatingIn === null && (
           <div className="flex items-center gap-1 px-2 py-1">
@@ -345,8 +372,11 @@ export function FolderTree({
               onChange={(e) => setNewFolderName(e.target.value)}
               onBlur={() => handleCreate(null)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter') handleCreate(null);
-                if (e.key === 'Escape') { setCreatingIn(false); setNewFolderName(''); }
+                if (e.key === 'Enter') handleCreate(null)
+                if (e.key === 'Escape') {
+                  setCreatingIn(false)
+                  setNewFolderName('')
+                }
               }}
               placeholder="Folder name..."
               className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
@@ -358,7 +388,10 @@ export function FolderTree({
       <div className="border-t border-gray-200 p-2">
         <button
           type="button"
-          onClick={() => { setCreatingIn(null); setNewFolderName(''); }}
+          onClick={() => {
+            setCreatingIn(null)
+            setNewFolderName('')
+          }}
           className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
         >
           <Plus className="w-4 h-4" />
@@ -375,12 +408,12 @@ export function FolderTree({
             type="button"
             className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
             onClick={() => {
-              const folder = findFolder(folders, contextMenu.id);
+              const folder = findFolder(folders, contextMenu.id)
               if (folder) {
-                setEditingId(folder.id);
-                setEditName(folder.name);
+                setEditingId(folder.id)
+                setEditName(folder.name)
               }
-              setContextMenu(null);
+              setContextMenu(null)
             }}
           >
             <Pencil className="w-3.5 h-3.5" />
@@ -390,10 +423,10 @@ export function FolderTree({
             type="button"
             className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
             onClick={() => {
-              setCreatingIn(contextMenu.id);
-              setNewFolderName('');
-              setExpanded(prev => new Set(prev).add(contextMenu.id));
-              setContextMenu(null);
+              setCreatingIn(contextMenu.id)
+              setNewFolderName('')
+              setExpanded((prev) => new Set(prev).add(contextMenu.id))
+              setContextMenu(null)
             }}
           >
             <FolderPlus className="w-3.5 h-3.5" />
@@ -404,8 +437,8 @@ export function FolderTree({
             type="button"
             className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
             onClick={() => {
-              handleDelete(contextMenu.id);
-              setContextMenu(null);
+              handleDelete(contextMenu.id)
+              setContextMenu(null)
             }}
           >
             <Trash2 className="w-3.5 h-3.5" />
@@ -414,14 +447,14 @@ export function FolderTree({
         </div>
       )}
     </div>
-  );
+  )
 }
 
 function findFolder(nodes: FolderNode[], id: string): FolderNode | null {
   for (const n of nodes) {
-    if (n.id === id) return n;
-    const found = findFolder(n.children, id);
-    if (found) return found;
+    if (n.id === id) return n
+    const found = findFolder(n.children, id)
+    if (found) return found
   }
-  return null;
+  return null
 }