2026-04-05 20:32:18 +00:00
7 changed files with 326 additions and 106 deletions
--- 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>
+    </>
  )
 }

--- a/src/components/mixed/ImageLightbox.tsx
+++ b/src/components/mixed/ImageLightbox.tsx
@@ -1,15 +1,21 @@
 'use client'

-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import TagSelector from '@/components/tags/TagSelector'

 interface Props {
  url: string
  name: string
  onClose: () => void
+  mediaKey?: string
+  onTagsChanged?: () => void
 }

-export default function ImageLightbox({ url, name, onClose }: Props) {
+export default function ImageLightbox({ url, name, onClose, mediaKey, onTagsChanged }: Props) {
  const overlayRef = useRef<HTMLDivElement>(null)
+  const [showTags, setShowTags] = useState(
+    () => !!mediaKey && typeof window !== 'undefined' && window.innerWidth >= 1280
+  )

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
@@ -30,35 +36,85 @@ export default function ImageLightbox({ url, name, onClose }: Props) {
  return (
    <div
      ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
      onClick={handleOverlayClick}
    >
      {/* Toolbar */}
-      <div className="flex items-center justify-between w-full max-w-4xl">
+      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
          {name}
        </span>
-        <button
-          onClick={onClose}
-          className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
-          style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
-          aria-label="Close"
-        >
-          ✕
-        </button>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {mediaKey && (
+            <button
+              onClick={(e) => { e.stopPropagation(); setShowTags((v) => !v) }}
+              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)'
+              }}
+              onMouseLeave={(e) => {
+                if (!showTags) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+              }}
+              aria-label={showTags ? 'Hide tags' : 'Show tags'}
+              title="Tags"
+            >
+              🏷
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            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"
+          >
+            ✕
+          </button>
+        </div>
      </div>

-      {/* Image */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={url}
-        alt={name}
-        className="max-w-full max-h-[80vh] object-contain rounded-lg"
-        onClick={(e) => e.stopPropagation()}
-      />
+      {showTags ? (
+        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-full">
+          {/* Image */}
+          <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-screen">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={url}
+              alt={name}
+              className="object-contain rounded-lg"
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+          {/* Tag panel */}
+          <div
+            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
+              Tags
+            </p>
+            <TagSelector mediaKey={mediaKey!} onTagsChanged={onTagsChanged} />
+          </div>
+        </div>
+      ) : (
+        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={url}
+            alt={name}
+            className="max-w-full max-h-full object-contain rounded-lg"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
    </div>
  )
 }
--- a/src/components/mixed/MixedView.tsx
+++ b/src/components/mixed/MixedView.tsx
@@ -13,8 +13,8 @@ interface Props {
 }

 type ModalState =
-  | { type: 'video'; url: string; name: string }
-  | { type: 'image'; url: string; name: string }
+  | { type: 'video'; url: string; name: string; mediaKey: string }
+  | { type: 'image'; url: string; name: string; mediaKey: string }
  | null

 type TagPanelState = { entry: FileEntry; mediaKey: string } | null
@@ -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) => {
@@ -80,9 +81,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
    }
    if (!entry.url) return
    if (entry.mediaType === 'video') {
-      setModal({ type: 'video', url: entry.url, name: entry.name })
+      setModal({ type: 'video', url: entry.url, name: entry.name, mediaKey: mediaKeyFor(entry) })
    } else if (entry.mediaType === 'image') {
-      setModal({ type: 'image', url: entry.url, name: entry.name })
+      setModal({ type: 'image', url: entry.url, name: entry.name, mediaKey: mediaKeyFor(entry) })
    } else {
      // Download other file types
      window.open(entry.url, '_blank')
@@ -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
@@ -201,10 +221,22 @@ export default function MixedView({ libraryId, initialPath }: Props) {
      )}

      {modal?.type === 'video' && (
-        <VideoPlayerModal url={modal.url} name={modal.name} onClose={() => setModal(null)} />
+        <VideoPlayerModal
+          url={modal.url}
+          name={modal.name}
+          mediaKey={modal.mediaKey}
+          onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
+          onClose={() => setModal(null)}
+        />
      )}
      {modal?.type === 'image' && (
-        <ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
+        <ImageLightbox
+          url={modal.url}
+          name={modal.name}
+          mediaKey={modal.mediaKey}
+          onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
+          onClose={() => setModal(null)}
+        />
      )}

      {/* Tag panel */}
@@ -247,8 +279,9 @@ export default function MixedView({ libraryId, initialPath }: Props) {
          </div>
        </div>
      )}
+        </div>
      </div>
-    </div>
+    </>
  )
 }

--- a/src/components/mixed/VideoPlayerModal.tsx
+++ b/src/components/mixed/VideoPlayerModal.tsx
@@ -1,15 +1,21 @@
 'use client'

-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import TagSelector from '@/components/tags/TagSelector'

 interface Props {
  url: string
  name: string
  onClose: () => void
+  mediaKey?: string
+  onTagsChanged?: () => void
 }

-export default function VideoPlayerModal({ url, name, onClose }: Props) {
+export default function VideoPlayerModal({ url, name, onClose, mediaKey, onTagsChanged }: Props) {
  const overlayRef = useRef<HTMLDivElement>(null)
+  const [showTags, setShowTags] = useState(
+    () => !!mediaKey && typeof window !== 'undefined' && window.innerWidth >= 1280
+  )

  useEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
@@ -30,36 +36,90 @@ export default function VideoPlayerModal({ url, name, onClose }: Props) {
  return (
    <div
      ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
      onClick={handleOverlayClick}
    >
      {/* Toolbar */}
-      <div className="flex items-center justify-between w-full max-w-4xl">
+      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
          {name}
        </span>
-        <button
-          onClick={onClose}
-          className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
-          style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
-          aria-label="Close"
-        >
-          ✕
-        </button>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {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"
+              style={{
+                backgroundColor: showTags ? 'var(--accent)' : 'var(--surface)',
+                color: showTags ? '#fff' : 'var(--text-primary)',
+              }}
+              onMouseEnter={(e) => {
+                if (!showTags) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
+              }}
+              onMouseLeave={(e) => {
+                if (!showTags) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+              }}
+              aria-label={showTags ? 'Hide tags' : 'Show tags'}
+              title="Tags"
+            >
+              🏷
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
+            style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+            aria-label="Close"
+          >
+            ✕
+          </button>
+        </div>
      </div>

-      {/* Video */}
-      <video
-        src={url}
-        controls
-        autoPlay
-        className="w-full max-w-4xl max-h-[80vh] rounded-lg"
-        style={{ backgroundColor: '#000' }}
-        onClick={(e) => e.stopPropagation()}
-      />
+      {showTags ? (
+        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden">
+          {/* Video */}
+          <div className="flex-1 min-w-0 min-h-0 flex items-center justify-center max-h-full">
+            <video
+              src={url}
+              controls
+              autoPlay
+              muted
+              loop
+              className="w-full h-full object-contain rounded-lg"
+              style={{ backgroundColor: '#000' }}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+          {/* Tag panel */}
+          <div
+            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
+              Tags
+            </p>
+            <TagSelector mediaKey={mediaKey!} onTagsChanged={onTagsChanged} />
+          </div>
+        </div>
+      ) : (
+        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full">
+          <video
+            src={url}
+            controls
+            autoPlay
+            muted
+            loop
+            className="w-full h-full max-w-4xl object-contain rounded-lg"
+            style={{ backgroundColor: '#000' }}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
    </div>
  )
 }
--- a/src/components/movies/MovieDetailModal.tsx
+++ b/src/components/movies/MovieDetailModal.tsx
@@ -65,7 +65,15 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
  }

  if (playing) {
-    return <VideoPlayerModal url={videoUrl} name={movie.title} onClose={() => setPlaying(false)} />
+    return (
+      <VideoPlayerModal
+        url={videoUrl}
+        name={movie.title}
+        mediaKey={`${libraryId}:${movie.id}`}
+        onTagsChanged={onTagsChanged}
+        onClose={() => setPlaying(false)}
+      />
+    )
  }

  const heroUrl = movie.backdropUrl ?? movie.posterUrl
--- 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>
+    </>
  )
 }

--- 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 && (