Merge pull request 'consistent-ui-across-libraries' (#28) from consistent-ui-across-libraries into main

Reviewed-on: http://gitea.lan/gpatti/MediaLore/pulls/28

src/components/games/GameDetailModal.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState, useCallback } from 'react'
 import type { Game, GameFile, GamePlatform } from '@/types'
 import TagSelector from '@/components/tags/TagSelector'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 
 // Import SVG icons
 import WindowsIcon from '@/app/icons/windows.svg'
@@ -46,6 +47,9 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   const [renameName, setRenameName] = useState('')
   const [renameError, setRenameError] = useState<string | null>(null)
   const [renameSaving, setRenameSaving] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
+  const [aiDescription, setAiDescription] = useState<string | null>(null)
 
   // Screenshots state
   const [screenshots, setScreenshots] = useState<Array<{ filename: string; url: string; thumbnailUrl: string }>>([])
@@ -54,6 +58,8 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   const [deletingScreenshot, setDeletingScreenshot] = useState<string | null>(null)
   const [uploadingCount, setUploadingCount] = useState(0)
 
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+
   const fetchScreenshots = useCallback(() => {
     setScreenshotsLoading(true)
     fetch(`/api/game-screenshots?libraryId=${encodeURIComponent(libraryId)}&gameId=${encodeURIComponent(game.id)}`)
@@ -65,6 +71,14 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
 
   useEffect(() => { fetchScreenshots() }, [fetchScreenshots])
 
+  useEffect(() => {
+    if (!game.item_key) return
+    fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(game.item_key)}`)
+      .then((r) => r.json())
+      .then((d: { aiDescription: string | null }) => setAiDescription(d.aiDescription ?? null))
+      .catch(() => {})
+  }, [game.item_key])
+
   const handleScreenshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files ?? [])
     if (files.length === 0) return
@@ -111,6 +125,7 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
         if (confirming) { setConfirming(false); return }
         if (renaming) { setRenaming(false); return }
         if (editingImages) { setEditingImages(false); return }
+        if (showTagPanel) { setShowTagPanel(false); return }
         onClose()
       }
     }
@@ -120,7 +135,7 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose, menuOpen, editingImages, confirming, renaming, lightboxIndex, screenshots.length])
+  }, [onClose, menuOpen, editingImages, confirming, renaming, showTagPanel, lightboxIndex, screenshots.length])
 
   // Close menu on outside click
   useEffect(() => {
@@ -153,13 +168,21 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
+      {/* Outer flex — row on md+, col on mobile when panel open */}
+      <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
+
+        {/* ── Left pane — relative container for floating controls ── */}
+        <div className="flex-1 min-h-0 min-w-0 relative" onClick={() => onClose()}>
+          {/* Scrollable card area */}
+          <div className="h-full overflow-y-auto flex items-start justify-center p-4">
           <div
-        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+            className="w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
             style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
           >
             {editingImages ? (
               <ImageEditor
@@ -170,17 +193,6 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
               />
             ) : (
               <>
-            {/* Close button */}
-            <button
-              onClick={onClose}
-              className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-              style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
-              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
-              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
-              aria-label="Close"
-            >
-              ✕
-            </button>
 
                 {/* Hero image */}
                 <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
@@ -195,7 +207,7 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
                 {/* Info */}
                 <div className="p-5">
                   {/* Title row with kebab menu */}
-              <div className="flex items-center gap-2 mb-4">
+                  <div className="flex items-center gap-2 mb-2">
                     <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
                       {game.title}
                     </h2>
@@ -256,6 +268,13 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
                     </div>
                   </div>
 
+                  {/* AI description (read-only) */}
+                  {aiDescription && (
+                    <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
+                      {aiDescription}
+                    </p>
+                  )}
+
                   {/* Rename inline input */}
                   {renaming && (
                     <div className="flex flex-col gap-2 mb-4">
@@ -364,6 +383,13 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
                     </div>
                   )}
 
+                  {/* Assigned tags (read-only) above download */}
+                  {game.item_key && (
+                    <div className="mb-3">
+                      <AssignedTagBadges itemKey={game.item_key} refreshKey={tagRefreshKey} />
+                    </div>
+                  )}
+
                   <DownloadButton gameFiles={game.gameFiles} clientPlatform={clientPlatform} downloadUrl={fileDownloadUrl} />
 
                   {/* Screenshots */}
@@ -439,20 +465,89 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
                       onChange={handleScreenshotUpload}
                     />
                   </div>
-
-              {/* Tags */}
-              <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  Tags
-                </p>
-                <TagSelector itemKey={game.item_key!} onTagsChanged={onTagsChanged} />
-              </div>
                 </div>
               </>
             )}
           </div>
+          </div>
 
-      {/* Lightbox */}
+          {/* Floating controls — tag + close */}
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
+            {game.item_key && !showTagPanel && (
+              <button
+                onClick={() => setShowTagPanel(true)}
+                className={smallBtn}
+                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="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className={smallBtn}
+              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>
+
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
+        {showTagPanel && (
+          <div
+            className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Panel header — ‹ hide | ✕ close */}
+            <div className="flex items-center justify-between p-4 flex-shrink-0">
+              <button
+                onClick={() => setShowTagPanel(false)}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                aria-label="Hide panel"
+                title="Hide panel"
+              >
+                ›
+              </button>
+              <button
+                onClick={onClose}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                aria-label="Close"
+                title="Close"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* Tags */}
+            <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
+              <p className="text-xs font-semibold uppercase tracking-wider mt-4 mb-3" style={{ color: 'var(--text-secondary)' }}>
+                Tags
+              </p>
+              <TagSelector
+                itemKey={game.item_key!}
+                onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
+                refreshKey={tagRefreshKey}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Screenshot lightbox (z-60, sits above the modal) */}
       {lightboxIndex !== null && (
         <div
           className="fixed inset-0 flex items-center justify-center"

src/components/mixed/ImageLightbox.tsx

@@ -325,6 +325,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                 🏷
               </button>
             )}
+            {!showTags && (
               <button
                 onClick={onClose}
                 className={smallBtn}
@@ -336,6 +337,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
               >
                 ✕
               </button>
+            )}
           </div>
 
           {/* Text display button — bottom-right, hidden when panel open */}

src/components/mixed/VideoPlayerModal.tsx

@@ -100,6 +100,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                   🏷
                 </button>
               )}
+              {!showTags && (
                 <button
                   onClick={onClose}
                   className={smallBtn}
@@ -111,6 +112,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                 >
                   ✕
                 </button>
+              )}
             </div>
           </div>
 

src/components/movies/MovieDetailModal.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import type { Movie } from '@/types'
 import TagSelector from '@/components/tags/TagSelector'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
 
 interface Props {
@@ -32,6 +33,10 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
   const [renameName, setRenameName] = useState('')
   const [renameError, setRenameError] = useState<string | null>(null)
   const [renameSaving, setRenameSaving] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
+
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
@@ -41,6 +46,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
         if (warnRefresh) { setWarnRefresh(false); return }
         if (editing) { setEditing(false); return }
         if (renaming) { setRenaming(false); return }
+        if (showTagPanel) { setShowTagPanel(false); return }
         onClose()
       }
     }
@@ -50,7 +56,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose, menuOpen, confirming, editing, warnRefresh, renaming])
+  }, [onClose, menuOpen, confirming, editing, warnRefresh, renaming, showTagPanel])
 
   // Close menu on outside click
   useEffect(() => {
@@ -132,7 +138,6 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
 
   const handleStartRename = () => {
     setMenuOpen(false)
-    // movie.id is the encoded folder name
     setRenameName(decodeURIComponent(movie.id))
     setRenameError(null)
     setRenaming(true)
@@ -187,51 +192,22 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
-      <div
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+      <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
-        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-      >
-        {/* Close button */}
-        <button
-          onClick={onClose}
-          className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-          style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
-          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
-          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
-          aria-label="Close"
-        >
-          ✕
-        </button>
 
-        {/* Prev / Next buttons on the detail card */}
+        {/* ── Left pane — relative container for floating controls ── */}
-        {onPrev && (
+        <div className="flex-1 min-h-0 min-w-0 relative" onClick={() => onClose()}>
-          <button
+          {/* Scrollable card area */}
-            onClick={onPrev}
+          <div className="h-full overflow-y-auto flex items-start justify-center p-4">
-            className="absolute top-3 left-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+          <div
-            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
+            className="w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
-            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
+            onClick={(e) => e.stopPropagation()}
-            aria-label="Previous movie"
           >
-            ‹
-          </button>
-        )}
-        {onNext && (
-          <button
-            onClick={onNext}
-            className="absolute top-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)', right: onPrev ? '3rem' : undefined }}
-            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
-            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
-            aria-label="Next movie"
-          >
-            ›
-          </button>
-        )}
 
             {/* Hero image */}
             <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
@@ -500,10 +476,18 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
                 </div>
               )}
 
-          {/* Play button */}
+              {/* Assigned tags (read-only) above action buttons */}
+              {movie.item_key && (
+                <div className="mb-3">
+                  <AssignedTagBadges itemKey={movie.item_key} refreshKey={tagRefreshKey} />
+                </div>
+              )}
+
+              {/* Action buttons row: Play + Download */}
+              <div className="flex gap-2">
                 <button
                   onClick={() => setPlaying(true)}
-            className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
+                  className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
                   style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
                   onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
                   onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
@@ -511,15 +495,120 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
                   <span>▶</span>
                   Play
                 </button>
+                <a
+                  href={videoUrl}
+                  download
+                  className="flex items-center justify-center px-3 py-2.5 rounded-lg text-sm font-medium transition-colors"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                  onClick={(e) => e.stopPropagation()}
+                  title="Download"
+                  aria-label="Download"
+                >
+                  ↓
+                </a>
+              </div>
+            </div>
+          </div>
+          </div>
+
+          {/* Floating controls — tag + close */}
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
+            {movie.item_key && !showTagPanel && (
+              <button
+                onClick={() => setShowTagPanel(true)}
+                className={smallBtn}
+                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="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className={smallBtn}
+              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>
+
+          {/* Prev / Next */}
+          {onPrev && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onPrev() }}
+              className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Previous"
+            >
+              ‹
+            </button>
+          )}
+          {onNext && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext() }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Next"
+            >
+              ›
+            </button>
+          )}
+        </div>
+
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
+        {showTagPanel && (
+          <div
+            className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Panel header — ‹ hide | ✕ close */}
+            <div className="flex items-center justify-between p-4 flex-shrink-0">
+              <button
+                onClick={() => setShowTagPanel(false)}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                aria-label="Hide panel"
+                title="Hide panel"
+              >
+                ›
+              </button>
+              <button
+                onClick={onClose}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                aria-label="Close"
+                title="Close"
+              >
+                ✕
+              </button>
+            </div>
 
             {/* Tags */}
-          <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
+            <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
-            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
+              <p className="text-xs font-semibold uppercase tracking-wider mt-4 mb-3" style={{ color: 'var(--text-secondary)' }}>
                 Tags
               </p>
-            <TagSelector itemKey={movie.item_key!} onTagsChanged={onTagsChanged} />
+              <TagSelector
+                itemKey={movie.item_key!}
+                onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
+                refreshKey={tagRefreshKey}
+              />
             </div>
           </div>
+        )}
       </div>
     </div>
   )

src/components/tags/AssignedTagBadges.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Tag, TagCategory } from '@/types'
+
+interface Props {
+  itemKey: string
+  refreshKey?: number
+}
+
+export default function AssignedTagBadges({ itemKey, refreshKey }: Props) {
+  const [tags, setTags] = useState<Tag[]>([])
+  const [categories, setCategories] = useState<TagCategory[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch(`/api/tags/assignments?itemKey=${encodeURIComponent(itemKey)}`)
+      .then((r) => r.json())
+      .then((data: { tags: Tag[]; categories: TagCategory[] }) => {
+        setTags(data.tags ?? [])
+        setCategories(data.categories ?? [])
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [itemKey, refreshKey])
+
+  if (loading) {
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {[60, 80, 50].map((w) => (
+          <div
+            key={w}
+            className="h-5 rounded-full animate-pulse"
+            style={{ width: w, backgroundColor: 'var(--border)' }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (tags.length === 0) return null
+
+  const catMap = new Map(categories.map((c) => [c.id, c.name]))
+
+  // Group by category
+  const grouped = new Map<string | null, Tag[]>()
+  for (const tag of tags) {
+    const key = tag.categoryId ?? null
+    if (!grouped.has(key)) grouped.set(key, [])
+    grouped.get(key)!.push(tag)
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {Array.from(grouped.entries()).map(([catId, catTags]) => {
+        const catName = catId ? catMap.get(catId) : null
+        return catTags.map((tag) => (
+          <span
+            key={tag.id}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs"
+            style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+          >
+            {catName && (
+              <span style={{ color: 'var(--text-secondary)' }}>{catName}:</span>
+            )}
+            {tag.name}
+          </span>
+        ))
+      })}
+    </div>
+  )
+}

src/components/tv/EpisodeCard.tsx

@@ -9,9 +9,10 @@ interface Props {
   onTag?: () => void
   onDelete?: () => void
   onRename?: (newName: string) => Promise<boolean>
+  downloadUrl?: string
 }
 
-export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename }: Props) {
+export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename, downloadUrl }: Props) {
   const epLabel = episode.episodeNumber !== null ? `E${String(episode.episodeNumber).padStart(2, '0')}` : null
   const menuRef = useRef<HTMLDivElement>(null)
   const [menuOpen, setMenuOpen] = useState(false)
@@ -79,7 +80,7 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
           </button>
         )}
         {/* Kebab menu */}
-        {onDelete && (
+        {(onDelete || downloadUrl) && (
           <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block" ref={menuRef}>
             <button
               onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false) }}
@@ -94,6 +95,19 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
                 className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
                 style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
               >
+                {downloadUrl && (
+                  <a
+                    href={downloadUrl}
+                    download
+                    onClick={(e) => { e.stopPropagation(); setMenuOpen(false) }}
+                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                    style={{ color: 'var(--text-primary)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                  >
+                    Download
+                  </a>
+                )}
                 {onRename && (
                   <button
                     onClick={(e) => {

src/components/tv/TvView.tsx

@@ -6,6 +6,7 @@ import type { TvSeries, TvSeason, TvEpisode } from '@/types'
 import FilterPanel from '@/components/FilterPanel'
 import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
 import TagSelector from '@/components/tags/TagSelector'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 import EpisodeCard from './EpisodeCard'
 import DoomScrollView, { type DoomScrollItem } from '@/components/DoomScrollView'
 import { isBrowserPlayable } from '@/lib/browser-media'
@@ -48,7 +49,12 @@ export default function TvView({ libraryId }: Props) {
   const [doomScrollActive, setDoomScrollActive] = useState(false)
   const [doomScrollItems, setDoomScrollItems] = useState<DoomScrollItem[]>([])
   const [doomScrollLoading, setDoomScrollLoading] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagPanelItemKey, setTagPanelItemKey] = useState<string | null>(null)
+  const [tagPanelDisabled, setTagPanelDisabled] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
   const menuRef = useRef<HTMLDivElement>(null)
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -108,6 +114,9 @@ export default function TvView({ libraryId }: Props) {
   const openSeason = (season: TvSeason) => {
     setSelectedSeason(season)
     setView('episodes')
+    if (showTagPanel) {
+      setTagPanelDisabled(true)
+    }
     setLoading(true)
     setError(null)
     fetch(
@@ -136,12 +145,19 @@ export default function TvView({ libraryId }: Props) {
     setSelectedSeason(null)
     setMenuOpen(false)
     setConfirming(false)
+    setShowTagPanel(false)
+    setTagPanelItemKey(null)
+    setTagPanelDisabled(false)
   }
 
   const goToSeasons = () => {
     setView('seasons')
     setSelectedSeason(null)
     setConfirming(false)
+    if (showTagPanel && selectedSeries?.item_key) {
+      setTagPanelItemKey(selectedSeries.item_key)
+      setTagPanelDisabled(false)
+    }
   }
 
   const handleDeleteSeries = () => {
@@ -312,6 +328,40 @@ export default function TvView({ libraryId }: Props) {
     }
   }
 
+  // Escape key + body scroll lock when modal is open
+  useEffect(() => {
+    if (view === 'series') return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      if (menuOpen) { setMenuOpen(false); return }
+      if (showTagPanel) { setShowTagPanel(false); return }
+      if (view === 'episodes') {
+        setView('seasons')
+        setSelectedSeason(null)
+        setConfirming(false)
+        if (selectedSeries?.item_key) {
+          setTagPanelItemKey(selectedSeries.item_key)
+          setTagPanelDisabled(false)
+        }
+        return
+      }
+      setView('series')
+      setSelectedSeries(null)
+      setSelectedSeason(null)
+      setMenuOpen(false)
+      setConfirming(false)
+      setShowTagPanel(false)
+      setTagPanelItemKey(null)
+      setTagPanelDisabled(false)
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [view, menuOpen, showTagPanel, selectedSeries])
+
   const filtersActive = search !== '' || selectedTagIds.size > 0
 
   const filteredSeries = series.filter((s) => {
@@ -502,9 +552,76 @@ export default function TvView({ libraryId }: Props) {
             )}
             </div>
           </div>
+          {tagPanel && (
+            <div
+              className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
+              style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+              onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
+            >
+              <div
+                className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+                style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+              >
+                <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
+                  <div className="min-w-0">
+                    <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
+                      Tags
+                    </p>
+                    <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                      {tagPanel.title}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setTagPanel(null)}
+                    className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                    aria-label="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <div className="px-5 py-4">
+                  <TagSelector
+                    itemKey={tagPanel.itemKey}
+                    onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
         </>
       )}
 
+      {(view === 'seasons' || view === 'episodes') && (
+        <div
+          className="fixed inset-0 z-50 overflow-hidden"
+          style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
+        >
+          <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
+            <div className="flex-1 min-h-0 min-w-0 relative" onClick={goToSeries}>
+              <div className="h-full overflow-y-auto flex items-start justify-center p-4">
+                <div
+                  className="w-full max-w-3xl rounded-2xl overflow-hidden shadow-2xl"
+                  style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {view === 'episodes' && (
+                    <div className="flex items-center gap-2 px-5 py-3 flex-shrink-0" style={{ borderBottom: '1px solid var(--border)' }}>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); goToSeasons() }}
+                        className="text-sm transition-colors hover:underline"
+                        style={{ color: 'var(--accent)' }}
+                      >
+                        ‹ {selectedSeries?.title}
+                      </button>
+                      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>·</span>
+                      <span className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                        {selectedSeason?.title}
+                      </span>
+                    </div>
+                  )}
       {view === 'seasons' && selectedSeries && (
         <div>
           {/* Series info header */}
@@ -682,6 +799,11 @@ export default function TvView({ libraryId }: Props) {
                     {selectedSeries.plot && (
                       <p className="text-sm mt-2 line-clamp-3" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.plot}</p>
                     )}
+                    {selectedSeries.item_key && (
+                      <div className="mt-2">
+                        <AssignedTagBadges itemKey={selectedSeries.item_key} refreshKey={tagRefreshKey} />
+                      </div>
+                    )}
                   </>
                 )}
               </div>
@@ -792,7 +914,7 @@ export default function TvView({ libraryId }: Props) {
       )}
 
       {view === 'episodes' && selectedSeason && (
-        <div>
+        <div className="p-4">
           {loading ? (
             <EpisodeLoadingGrid />
           ) : error ? (
@@ -808,7 +930,8 @@ export default function TvView({ libraryId }: Props) {
                   key={ep.id}
                   episode={ep}
                   onClick={() => setPlayingEpisodeIndex(episodes.indexOf(ep))}
-                  onTag={() => setTagPanel({ itemKey: ep.item_key!, title: ep.title })}
+                  onTag={() => { setTagPanelItemKey(ep.item_key!); setTagPanelDisabled(false); setShowTagPanel(true) }}
+                  downloadUrl={`/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(ep.videoPath)}`}
                   onDelete={() => {
                     fetch(
                       `/api/tv?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries!.id)}&episodeKey=${encodeURIComponent(ep.item_key!)}`,
@@ -838,42 +961,93 @@ export default function TvView({ libraryId }: Props) {
           )}
         </div>
       )}
-      {tagPanel && (
-        <div
-          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
-          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
-          onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
-        >
-          <div
-            className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
-            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-          >
-            <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
-              <div className="min-w-0">
-                <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
-                  Tags
-                </p>
-                <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
-                  {tagPanel.title}
-                </p>
                 </div>
+              </div>
+
+              {/* Floating controls — tag + close */}
+              <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
+                {view === 'seasons' && selectedSeries?.item_key && !showTagPanel && (
                   <button
-                onClick={() => setTagPanel(null)}
+                    onClick={() => { setShowTagPanel(true); setTagPanelItemKey(selectedSeries.item_key!); setTagPanelDisabled(false) }}
-                className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                    className={smallBtn}
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                    aria-label="Show tags"
+                    title="Tags"
+                  >
+                    🏷
+                  </button>
+                )}
+                <button
+                  onClick={goToSeries}
+                  className={smallBtn}
+                  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 className="px-5 py-4">
-              <TagSelector
-                itemKey={tagPanel.itemKey}
-                onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
-              />
             </div>
+
+            {/* Right tag panel */}
+            {showTagPanel && (
+              <div
+                className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
+                style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="flex items-center justify-between p-4 flex-shrink-0">
+                  <button
+                    onClick={() => setShowTagPanel(false)}
+                    className={smallBtn}
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                    onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                    onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                    aria-label="Hide panel"
+                    title="Hide panel"
+                  >
+                    ›
+                  </button>
+                  <button
+                    onClick={goToSeries}
+                    className={smallBtn}
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                    onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                    onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                    aria-label="Close"
+                    title="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
+                  {tagPanelDisabled ? (
+                    <p className="text-xs mt-4 italic" style={{ color: 'var(--text-secondary)' }}>
+                      Seasons cannot be tagged. Select an episode to tag it.
+                    </p>
+                  ) : tagPanelItemKey ? (
+                    <>
+                      <p className="text-xs font-semibold uppercase tracking-wider mt-4 mb-3" style={{ color: 'var(--text-secondary)' }}>
+                        Tags
+                      </p>
+                      <TagSelector
+                        itemKey={tagPanelItemKey}
+                        onTagsChanged={() => {
+                          setTagRefreshKey((k) => k + 1)
+                          setFilterRefreshKey((k) => k + 1)
+                          fetchAssignments()
+                          fetchSeriesEpisodeTags()
+                        }}
+                        refreshKey={tagRefreshKey}
+                      />
+                    </>
+                  ) : null}
+                </div>
+              </div>
+            )}
           </div>
         </div>
       )}