idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(MediaManager): enhance filter and sort bar with transition effects

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-13 02:49:08 -04:00
parent b0134a9a46
commit 5ec57a1b27
1 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/components/MediaManager.tsx
View File

@ -1107,32 +1107,34 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
</div> </div>
{/* ── Filter + sort bar ── */} {/* ── Filter + sort bar ── */}
{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={`overflow-hidden flex-shrink-0 transition-all duration-200 ease-in-out ${showFilter ? 'max-h-20 opacity-100' : 'max-h-0 opacity-0'}`}>
<div className="relative flex-1 min-w-0"> <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2">
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" /> <div className="relative flex-1 min-w-0">
<input <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
value={filter} <input
onChange={e => setFilter(e.target.value)} value={filter}
placeholder="Filter…" onChange={e => setFilter(e.target.value)}
className="w-full pl-7 pr-6 py-1 text-sm border border-neutral-300 rounded bg-white" placeholder="Filter…"
/> className="w-full pl-7 pr-6 py-1 text-sm border border-neutral-300 rounded bg-white"
{filter && ( />
<button onClick={() => setFilter('')} className="absolute right-2 top-1/2 -translate-y-1/2"> {filter && (
<X className="w-3.5 h-3.5 text-neutral-400" /> <button onClick={() => setFilter('')} className="absolute right-2 top-1/2 -translate-y-1/2">
<X className="w-3.5 h-3.5 text-neutral-400" />
</button>
)}
</div>
{(['name', 'size', 'date'] as SortKey[]).map(k => (
<button
key={k}
onClick={() => toggleSort(k)}
className={`text-xs px-2 py-1 rounded border flex-shrink-0 ${sortKey === k ? 'border-blue-400 bg-blue-50 text-blue-700' : 'border-neutral-300 bg-white text-neutral-600'}`}
>
{k === 'name' ? 'Name' : k === 'size' ? 'Size' : 'Date'}
{sortKey === k ? (sortAsc ? ' ↑' : ' ↓') : ''}
</button> </button>
)} ))}
</div> </div>
{(['name', 'size', 'date'] as SortKey[]).map(k => ( </div>
<button
key={k}
onClick={() => toggleSort(k)}
className={`text-xs px-2 py-1 rounded border flex-shrink-0 ${sortKey === k ? 'border-blue-400 bg-blue-50 text-blue-700' : 'border-neutral-300 bg-white text-neutral-600'}`}
>
{k === 'name' ? 'Name' : k === 'size' ? 'Size' : 'Date'}
{sortKey === k ? (sortAsc ? ' ↑' : ' ↓') : ''}
</button>
))}
</div>}
{/* ── Selection / clipboard bar ── */} {/* ── Selection / clipboard bar ── */}
{(selCount > 0 || clipboard) && ( {(selCount > 0 || clipboard) && (