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/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>
+    </>
   )
 }