From ca4bea084ad4cb1d57fa61369a871e82859e1c72 Mon Sep 17 00:00:00 2001
From: Garret Patti <42485635+garretpatti@users.noreply.github.com>
Date: Sun, 5 Apr 2026 16:29:49 -0400
Subject: [PATCH] make FilterPanel hideable and responsive across all library
 views

Adds a toggle button to show/hide the filter panel in Movies, Games,
Mixed, and TV views. On mobile the layout stacks vertically (filter
above content); on md+ it returns to the side-by-side layout. The
toggle button highlights when filters are active so hidden filters
remain discoverable. Also fixes a layout bug where items-start on the
flex-col container caused MixedView thumbnails to collapse on narrow
screens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/games/GamesView.tsx     | 47 +++++++++++++++++++-------
 src/components/mixed/ImageLightbox.tsx |  7 ++--
 src/components/mixed/MixedView.tsx     | 47 +++++++++++++++++++-------
 src/components/movies/MoviesView.tsx   | 47 +++++++++++++++++++-------
 src/components/tv/TvView.tsx           | 47 +++++++++++++++++++-------
 5 files changed, 140 insertions(+), 55 deletions(-)

diff --git a/src/components/games/GamesView.tsx b/src/components/games/GamesView.tsx
index 0b2a266..d4a0d04 100644
--- a/src/components/games/GamesView.tsx
+++ b/src/components/games/GamesView.tsx
@@ -21,6 +21,7 @@ export default function GamesView({ libraryId }: Props) {
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
+  const [showFilters, setShowFilters] = useState(true)
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -83,20 +84,39 @@ export default function GamesView({ libraryId }: Props) {
     return true
   })
 
+  const filtersActive = search !== '' || selectedTagIds.size > 0
+
   return (
-    <div className="flex gap-6 items-start">
-      <div className="w-52 flex-shrink-0">
-        <FilterPanel
-          libraryId={libraryId}
-          assignments={assignments}
-          search={search}
-          onSearchChange={setSearch}
-          selectedTagIds={selectedTagIds}
-          onTagToggle={toggleTag}
-          refreshKey={filterRefreshKey}
-        />
+    <>
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={() => setShowFilters((v) => !v)}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          style={{
+            backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
+            color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+          aria-label={showFilters ? 'Hide filters' : 'Show filters'}
+        >
+          Filters{filtersActive ? ' ●' : ''}
+        </button>
       </div>
-      <div className="flex-1 min-w-0">
+      <div className="flex flex-col md:flex-row gap-6 md:items-start">
+        {showFilters && (
+          <div className="w-full md:w-52 md:flex-shrink-0">
+            <FilterPanel
+              libraryId={libraryId}
+              assignments={assignments}
+              search={search}
+              onSearchChange={setSearch}
+              selectedTagIds={selectedTagIds}
+              onTagToggle={toggleTag}
+              refreshKey={filterRefreshKey}
+            />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
         {/* Breadcrumb when inside a series */}
         {selectedSeries && (
           <div className="flex items-center gap-2 mb-4 text-sm">
@@ -154,8 +174,9 @@ export default function GamesView({ libraryId }: Props) {
             onCoverUploaded={() => fetchGames(true)}
           />
         )}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/mixed/ImageLightbox.tsx b/src/components/mixed/ImageLightbox.tsx
index 7db86f5..a474cc7 100644
--- a/src/components/mixed/ImageLightbox.tsx
+++ b/src/components/mixed/ImageLightbox.tsx
@@ -49,10 +49,11 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
           {mediaKey && (
             <button
               onClick={(e) => { e.stopPropagation(); setShowTags((v) => !v) }}
-              className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+              className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
               style={{
                 backgroundColor: showTags ? 'var(--accent)' : 'var(--surface)',
                 color: showTags ? '#fff' : 'var(--text-primary)',
+                fontSize: '1.5rem',
               }}
               onMouseEnter={(e) => {
                 if (!showTags) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
@@ -68,8 +69,8 @@ export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChan
           )}
           <button
             onClick={onClose}
-            className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-            style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+            className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
+            style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)', fontSize: '1.5rem' }}
             onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
             onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
             aria-label="Close"
diff --git a/src/components/mixed/MixedView.tsx b/src/components/mixed/MixedView.tsx
index f5eacf9..6ac4118 100644
--- a/src/components/mixed/MixedView.tsx
+++ b/src/components/mixed/MixedView.tsx
@@ -30,6 +30,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
+  const [showFilters, setShowFilters] = useState(true)
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -120,20 +121,39 @@ export default function MixedView({ libraryId, initialPath }: Props) {
     return true
   })
 
+  const filtersActive = search !== '' || selectedTagIds.size > 0
+
   return (
-    <div className="flex gap-6 items-start">
-      <div className="w-52 flex-shrink-0">
-        <FilterPanel
-          libraryId={libraryId}
-          assignments={assignments}
-          search={search}
-          onSearchChange={setSearch}
-          selectedTagIds={selectedTagIds}
-          onTagToggle={toggleTag}
-          refreshKey={filterRefreshKey}
-        />
+    <>
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={() => setShowFilters((v) => !v)}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          style={{
+            backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
+            color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+          aria-label={showFilters ? 'Hide filters' : 'Show filters'}
+        >
+          Filters{filtersActive ? ' ●' : ''}
+        </button>
       </div>
-      <div className="flex-1 min-w-0">
+      <div className="flex flex-col md:flex-row gap-6 md:items-start">
+        {showFilters && (
+          <div className="w-full md:w-52 md:flex-shrink-0">
+            <FilterPanel
+              libraryId={libraryId}
+              assignments={assignments}
+              search={search}
+              onSearchChange={setSearch}
+              selectedTagIds={selectedTagIds}
+              onTagToggle={toggleTag}
+              refreshKey={filterRefreshKey}
+            />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
       {/* Breadcrumb */}
       <nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
         <button
@@ -259,8 +279,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
           </div>
         </div>
       )}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/movies/MoviesView.tsx b/src/components/movies/MoviesView.tsx
index a19778b..27739eb 100644
--- a/src/components/movies/MoviesView.tsx
+++ b/src/components/movies/MoviesView.tsx
@@ -18,6 +18,7 @@ export default function MoviesView({ libraryId }: Props) {
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
+  const [showFilters, setShowFilters] = useState(true)
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -64,20 +65,39 @@ export default function MoviesView({ libraryId }: Props) {
     setMovies((prev) => prev.filter((m) => m.id !== movieId))
   }
 
+  const filtersActive = search !== '' || selectedTagIds.size > 0
+
   return (
-    <div className="flex gap-6 items-start">
-      <div className="w-52 flex-shrink-0">
-        <FilterPanel
-          libraryId={libraryId}
-          assignments={assignments}
-          search={search}
-          onSearchChange={setSearch}
-          selectedTagIds={selectedTagIds}
-          onTagToggle={toggleTag}
-          refreshKey={filterRefreshKey}
-        />
+    <>
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={() => setShowFilters((v) => !v)}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          style={{
+            backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
+            color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+          aria-label={showFilters ? 'Hide filters' : 'Show filters'}
+        >
+          Filters{filtersActive ? ' ●' : ''}
+        </button>
       </div>
-      <div className="flex-1 min-w-0">
+      <div className="flex flex-col md:flex-row gap-6 md:items-start">
+        {showFilters && (
+          <div className="w-full md:w-52 md:flex-shrink-0">
+            <FilterPanel
+              libraryId={libraryId}
+              assignments={assignments}
+              search={search}
+              onSearchChange={setSearch}
+              selectedTagIds={selectedTagIds}
+              onTagToggle={toggleTag}
+              refreshKey={filterRefreshKey}
+            />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
         {loading ? (
           <LoadingGrid />
         ) : error ? (
@@ -148,8 +168,9 @@ export default function MoviesView({ libraryId }: Props) {
             onDeleted={handleDeleted}
           />
         )}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/tv/TvView.tsx b/src/components/tv/TvView.tsx
index 58b5c04..3639cfc 100644
--- a/src/components/tv/TvView.tsx
+++ b/src/components/tv/TvView.tsx
@@ -26,6 +26,7 @@ export default function TvView({ libraryId }: Props) {
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
+  const [showFilters, setShowFilters] = useState(true)
   const [menuOpen, setMenuOpen] = useState(false)
   const [confirming, setConfirming] = useState(false)
   const [deleting, setDeleting] = useState(false)
@@ -123,6 +124,8 @@ export default function TvView({ libraryId }: Props) {
       .catch(() => setDeleting(false))
   }
 
+  const filtersActive = search !== '' || selectedTagIds.size > 0
+
   const filteredSeries = series.filter((s) => {
     if (search && !s.title.toLowerCase().includes(search.toLowerCase())) return false
     if (selectedTagIds.size > 0) {
@@ -179,19 +182,36 @@ export default function TvView({ libraryId }: Props) {
       </div>
 
       {view === 'series' && (
-        <div className="flex gap-6 items-start">
-          <div className="w-52 flex-shrink-0">
-            <FilterPanel
-              libraryId={libraryId}
-              assignments={assignments}
-              search={search}
-              onSearchChange={setSearch}
-              selectedTagIds={selectedTagIds}
-              onTagToggle={toggleTag}
-              refreshKey={filterRefreshKey}
-            />
+        <>
+          <div className="flex items-center gap-2 mb-4">
+            <button
+              onClick={() => setShowFilters((v) => !v)}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              style={{
+                backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
+                color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
+                border: '1px solid var(--border)',
+              }}
+              aria-label={showFilters ? 'Hide filters' : 'Show filters'}
+            >
+              Filters{filtersActive ? ' ●' : ''}
+            </button>
           </div>
-          <div className="flex-1 min-w-0">
+          <div className="flex flex-col md:flex-row gap-6 md:items-start">
+            {showFilters && (
+              <div className="w-full md:w-52 md:flex-shrink-0">
+                <FilterPanel
+                  libraryId={libraryId}
+                  assignments={assignments}
+                  search={search}
+                  onSearchChange={setSearch}
+                  selectedTagIds={selectedTagIds}
+                  onTagToggle={toggleTag}
+                  refreshKey={filterRefreshKey}
+                />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
             {loading ? (
               <SeriesLoadingGrid />
             ) : error ? (
@@ -238,8 +258,9 @@ export default function TvView({ libraryId }: Props) {
                 ))}
               </div>
             )}
+            </div>
           </div>
-        </div>
+        </>
       )}
 
       {view === 'seasons' && selectedSeries && (