@actuate-media/cms-admin 0.49.1 → 0.49.3

package/src/components/FolderTree.tsx

@@ -191,10 +191,10 @@ export function FolderTree({
         <div
           className={`group flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isActive
-              ? 'bg-blue-50 font-medium text-blue-700'
+              ? 'bg-primary/10 text-primary font-medium'
               : isDragOver
-                ? 'bg-blue-100 ring-2 ring-blue-300'
-                : 'text-gray-700 hover:bg-gray-100'
+                ? 'bg-primary/15 ring-primary/40 ring-2'
+                : 'text-foreground hover:bg-muted'
           }`}
           style={{ paddingLeft: `${8 + depth * 16}px` }}
           onClick={() => onSelect({ type: 'folder', folderId: folder.id })}
@@ -208,7 +208,7 @@ export function FolderTree({
         >
           <button
             type="button"
-            className={`rounded p-0.5 transition-colors hover:bg-gray-200 ${hasChildren ? '' : 'invisible'}`}
+            className={`hover:bg-muted rounded p-0.5 transition-colors ${hasChildren ? '' : 'invisible'}`}
             onClick={(e) => {
               e.stopPropagation()
               toggleExpand(folder.id)
@@ -222,9 +222,9 @@ export function FolderTree({
           </button>
 
           {isExpanded ? (
-            <FolderOpen className="h-4 w-4 shrink-0 text-blue-500" />
+            <FolderOpen className="text-primary h-4 w-4 shrink-0" />
           ) : (
-            <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
+            <FolderIcon className="text-muted-foreground h-4 w-4 shrink-0" />
           )}
 
           {editingId === folder.id ? (
@@ -238,7 +238,7 @@ export function FolderTree({
                 if (e.key === 'Enter') handleRename(folder.id)
                 if (e.key === 'Escape') setEditingId(null)
               }}
-              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="border-primary/50 focus:ring-ring min-w-0 flex-1 rounded border px-1 py-0 text-sm focus:ring-1 focus:outline-none"
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
@@ -246,18 +246,18 @@ export function FolderTree({
           )}
 
           {count !== undefined && !editingId && (
-            <span className="text-xs text-gray-400 tabular-nums">{count}</span>
+            <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
           )}
 
           <button
             type="button"
-            className="rounded p-0.5 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-200"
+            className="hover:bg-muted rounded p-0.5 opacity-0 transition-all group-hover:opacity-100"
             onClick={(e) => {
               e.stopPropagation()
               setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY })
             }}
           >
-            <MoreHorizontal className="h-3.5 w-3.5 text-gray-500" />
+            <MoreHorizontal className="text-muted-foreground h-3.5 w-3.5" />
           </button>
         </div>
 
@@ -269,7 +269,7 @@ export function FolderTree({
                 className="flex items-center gap-1 px-2 py-1"
                 style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}
               >
-                <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
+                <FolderIcon className="text-muted-foreground h-4 w-4 shrink-0" />
                 <input
                   ref={newFolderInputRef}
                   type="text"
@@ -284,7 +284,7 @@ export function FolderTree({
                     }
                   }}
                   placeholder="Folder name..."
-                  className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="border-primary/50 focus:ring-ring min-w-0 flex-1 rounded border px-1 py-0 text-sm focus:ring-1 focus:outline-none"
                 />
               </div>
             )}
@@ -297,7 +297,7 @@ export function FolderTree({
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
-        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
+        <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
       </div>
     )
   }
@@ -309,8 +309,8 @@ export function FolderTree({
           type="button"
           className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'all' })
-              ? 'bg-blue-50 font-medium text-blue-700'
-              : 'text-gray-700 hover:bg-gray-100'
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-foreground hover:bg-muted'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'all' })}
           onDragOver={(e) => handleDragOver(e, null)}
@@ -320,7 +320,7 @@ export function FolderTree({
           <LayoutGrid className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">All</span>
           {totalCount !== undefined && (
-            <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>
+            <span className="text-muted-foreground text-xs tabular-nums">{totalCount}</span>
           )}
         </button>
 
@@ -328,15 +328,15 @@ export function FolderTree({
           type="button"
           className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'recent' })
-              ? 'bg-blue-50 font-medium text-blue-700'
-              : 'text-gray-700 hover:bg-gray-100'
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-foreground hover:bg-muted'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'recent' })}
         >
           <Clock className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Recent</span>
           {recentCount !== undefined && (
-            <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>
+            <span className="text-muted-foreground text-xs tabular-nums">{recentCount}</span>
           )}
         </button>
 
@@ -344,27 +344,27 @@ export function FolderTree({
           type="button"
           className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'uncategorized' })
-              ? 'bg-blue-50 font-medium text-blue-700'
-              : 'text-gray-700 hover:bg-gray-100'
+              ? 'bg-primary/10 text-primary font-medium'
+              : 'text-foreground hover:bg-muted'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'uncategorized' })}
         >
           <Inbox className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Uncategorized</span>
           {uncategorizedCount !== undefined && (
-            <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>
+            <span className="text-muted-foreground text-xs tabular-nums">{uncategorizedCount}</span>
           )}
         </button>
       </div>
 
-      <div className="my-1 border-t border-gray-200" />
+      <div className="border-border my-1 border-t" />
 
       <div className="flex-1 space-y-0.5 overflow-y-auto px-1 py-1">
         {folders.map((folder) => renderFolder(folder, 0))}
 
         {creatingIn === null && (
           <div className="flex items-center gap-1 px-2 py-1">
-            <FolderIcon className="ml-5 h-4 w-4 shrink-0 text-gray-400" />
+            <FolderIcon className="text-muted-foreground ml-5 h-4 w-4 shrink-0" />
             <input
               ref={newFolderInputRef}
               type="text"
@@ -379,20 +379,20 @@ export function FolderTree({
                 }
               }}
               placeholder="Folder name..."
-              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="border-primary/50 focus:ring-ring min-w-0 flex-1 rounded border px-1 py-0 text-sm focus:ring-1 focus:outline-none"
             />
           </div>
         )}
       </div>
 
-      <div className="border-t border-gray-200 p-2">
+      <div className="border-border border-t p-2">
         <button
           type="button"
           onClick={() => {
             setCreatingIn(null)
             setNewFolderName('')
           }}
-          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100"
+          className="text-muted-foreground hover:bg-muted flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors"
         >
           <Plus className="h-4 w-4" />
           New Folder
@@ -401,12 +401,12 @@ export function FolderTree({
 
       {contextMenu && (
         <div
-          className="fixed z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+          className="border-border bg-card fixed z-50 min-w-[160px] rounded-lg border py-1 shadow-lg"
           style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
             type="button"
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+            className="text-foreground hover:bg-muted flex w-full items-center gap-2 px-3 py-1.5 text-sm transition-colors"
             onClick={() => {
               const folder = findFolder(folders, contextMenu.id)
               if (folder) {
@@ -421,7 +421,7 @@ export function FolderTree({
           </button>
           <button
             type="button"
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+            className="text-foreground hover:bg-muted flex w-full items-center gap-2 px-3 py-1.5 text-sm transition-colors"
             onClick={() => {
               setCreatingIn(contextMenu.id)
               setNewFolderName('')
@@ -432,10 +432,10 @@ export function FolderTree({
             <FolderPlus className="h-3.5 w-3.5" />
             New Subfolder
           </button>
-          <div className="my-1 border-t border-gray-200" />
+          <div className="border-border my-1 border-t" />
           <button
             type="button"
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-600 transition-colors hover:bg-red-50"
+            className="text-destructive hover:bg-destructive/10 flex w-full items-center gap-2 px-3 py-1.5 text-sm transition-colors"
             onClick={() => {
               handleDelete(contextMenu.id)
               setContextMenu(null)