From 5ec57a1b272801b977d7aebc3378bfcf6425f4ba Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Sat, 13 Jun 2026 02:49:08 -0400
Subject: [PATCH] fix(MediaManager): enhance filter and sort bar with
 transition effects

---
 src/app/components/MediaManager.tsx | 50 +++++++++++++++--------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/app/components/MediaManager.tsx b/src/app/components/MediaManager.tsx
index 2ab05e8..77fdd66 100644
--- a/src/app/components/MediaManager.tsx
+++ b/src/app/components/MediaManager.tsx
@@ -1107,32 +1107,34 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
       </div>
 
       {/* ── 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="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" />
-          <input
-            value={filter}
-            onChange={e => setFilter(e.target.value)}
-            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">
-              <X className="w-3.5 h-3.5 text-neutral-400" />
+      <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="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2">
+          <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" />
+            <input
+              value={filter}
+              onChange={e => setFilter(e.target.value)}
+              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">
+                <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>
-          )}
+          ))}
         </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>
-        ))}
-      </div>}
+      </div>
 
       {/* ── Selection / clipboard bar ── */}
       {(selCount > 0 || clipboard) && (