fix(MediaManager): simplify ActionsModal by removing select all button and adding filter toggle

This commit is contained in:
Jaime Idolpx 2026-06-12 23:17:26 -04:00
parent 3d69970ea5
commit c287de5bad

View File

@ -6,7 +6,8 @@ import {
BookOpen, BookOpen,
Braces, Braces,
Check, Check,
CheckSquare,
ChevronDown,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
ClipboardPaste, ClipboardPaste,
@ -207,9 +208,7 @@ interface FolderManagementActions {
onUpload: () => void; onUpload: () => void;
clipboard: Clipboard | null; clipboard: Clipboard | null;
onPaste: () => void; onPaste: () => void;
selectedCount: number;
totalCount: number;
onSelectAll: () => void;
isRoot: boolean; isRoot: boolean;
} }
@ -278,11 +277,6 @@ function ActionsModal({ entry, onClose, onOpen, onMount, onDownload, onDuplicate
<span>{fm.clipboard.op === 'copy' ? 'Copy' : 'Move'} {fm.clipboard.paths.length} item{fm.clipboard.paths.length !== 1 ? 's' : ''} here</span> <span>{fm.clipboard.op === 'copy' ? 'Copy' : 'Move'} {fm.clipboard.paths.length} item{fm.clipboard.paths.length !== 1 ? 's' : ''} here</span>
</button> </button>
)} )}
<button onClick={() => { onClose(); fm.onSelectAll(); }}
className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-neutral-50 inline-flex items-center gap-3">
<CheckSquare className="w-4 h-4 text-neutral-500" />
<span>{fm.selectedCount === fm.totalCount && fm.totalCount > 0 ? 'Deselect All' : 'Select All'}</span>
</button>
{!fm.isRoot && <div className="border-t border-neutral-100" />} {!fm.isRoot && <div className="border-t border-neutral-100" />}
</> </>
)} )}
@ -435,6 +429,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
const [actionEntry, setActionEntry] = useState<EntryInfo | null>(null); const [actionEntry, setActionEntry] = useState<EntryInfo | null>(null);
const [folderActionOpen, setFolderActionOpen] = useState(false); const [folderActionOpen, setFolderActionOpen] = useState(false);
const [dragOver, setDragOver] = useState(false); const [dragOver, setDragOver] = useState(false);
const [showFilter, setShowFilter] = useState(false);
const [showNewFile, setShowNewFile] = useState(false); const [showNewFile, setShowNewFile] = useState(false);
const [newFileName, setNewFileName] = useState(''); const [newFileName, setNewFileName] = useState('');
@ -984,15 +979,6 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
<button onClick={() => void load(path)} className="p-1.5 rounded hover:bg-neutral-100" title="Refresh"> <button onClick={() => void load(path)} className="p-1.5 rounded hover:bg-neutral-100" title="Refresh">
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
</button> </button>
<button onClick={() => { setShowNewFile(v => !v); setShowNewFolder(false); }} className="p-1.5 rounded hover:bg-neutral-100" title="New File">
<FilePlus className="w-4 h-4" />
</button>
<button onClick={() => { setShowNewFolder(v => !v); setShowNewFile(false); }} className="p-1.5 rounded hover:bg-neutral-100" title="New Folder">
<FolderPlus className="w-4 h-4" />
</button>
<button onClick={() => fileInputRef.current?.click()} className="p-1.5 rounded hover:bg-neutral-100" title="Upload">
<Upload className="w-4 h-4" />
</button>
<button onClick={() => setFolderActionOpen(true)} className="p-1.5 rounded hover:bg-neutral-100" title="Actions"> <button onClick={() => setFolderActionOpen(true)} className="p-1.5 rounded hover:bg-neutral-100" title="Actions">
<MoreVertical className="w-4 h-4" /> <MoreVertical className="w-4 h-4" />
</button> </button>
@ -1042,6 +1028,13 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
<SlidersHorizontal className="w-3.5 h-3.5" strokeWidth={3} /> <SlidersHorizontal className="w-3.5 h-3.5" strokeWidth={3} />
</button> </button>
)} )}
<button
onClick={() => setShowFilter(v => !v)}
className={`p-1 rounded flex-shrink-0 ${showFilter ? 'text-blue-600' : 'text-neutral-400 hover:text-neutral-600'}`}
title={showFilter ? 'Hide filter' : 'Filter & sort'}
>
<ChevronDown className={`w-3.5 h-3.5 transition-transform duration-150 ${showFilter ? 'rotate-180' : ''}`} />
</button>
</div> </div>
{(folderConfig?.['base_url']) && ( {(folderConfig?.['base_url']) && (
<div className="text-xs text-neutral-400 mt-0.5 truncate"> <div className="text-xs text-neutral-400 mt-0.5 truncate">
@ -1107,10 +1100,11 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
</button> </button>
</div> </div>
)} )}
</div> </div>
{/* ── Filter + sort bar ── */} {/* ── Filter + sort bar ── */}
<div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2 flex-shrink-0"> {showFilter && <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2 flex-shrink-0">
<div className="relative flex-1 min-w-0"> <div className="relative flex-1 min-w-0">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" /> <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
<input <input
@ -1135,7 +1129,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
{sortKey === k ? (sortAsc ? ' ↑' : ' ↓') : ''} {sortKey === k ? (sortAsc ? ' ↑' : ' ↓') : ''}
</button> </button>
))} ))}
</div> </div>}
{/* ── Selection / clipboard bar ── */} {/* ── Selection / clipboard bar ── */}
{(selCount > 0 || clipboard) && ( {(selCount > 0 || clipboard) && (
@ -1308,9 +1302,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
onUpload: () => fileInputRef.current?.click(), onUpload: () => fileInputRef.current?.click(),
clipboard, clipboard,
onPaste: () => void paste(), onPaste: () => void paste(),
selectedCount: selected.size,
totalCount: visible.length,
onSelectAll: selectAll,
isRoot: path === (rootPath ?? '/'), isRoot: path === (rootPath ?? '/'),
} : undefined} } : undefined}
/> />