put delete actions behind a kebab menu to prevent accidental deletion

Replace the always-visible delete buttons on the movie detail modal and
TV series header with a ⋮ kebab menu. Selecting "Delete" from the menu
shows an inline confirmation banner before any action is taken.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/tv/TvView.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useRef, useState, useCallback } from 'react'
 import type { TvSeries, TvSeason, TvEpisode } from '@/types'
 import FilterPanel from '@/components/FilterPanel'
 import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
@@ -26,8 +26,10 @@ 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 [menuOpen, setMenuOpen] = useState(false)
   const [confirming, setConfirming] = useState(false)
   const [deleting, setDeleting] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -80,10 +82,23 @@ export default function TvView({ libraryId }: Props) {
       .catch(() => { setError('Failed to load episodes'); setLoading(false) })
   }
 
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [menuOpen])
+
   const goToSeries = () => {
     setView('series')
     setSelectedSeries(null)
     setSelectedSeason(null)
+    setMenuOpen(false)
     setConfirming(false)
   }
 
@@ -95,11 +110,6 @@ export default function TvView({ libraryId }: Props) {
 
   const handleDeleteSeries = () => {
     if (!selectedSeries) return
-    if (!confirming) {
-      setConfirming(true)
-      setTimeout(() => setConfirming(false), 4000)
-      return
-    }
     setDeleting(true)
     fetch(
       `/api/tv?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries.id)}`,
@@ -235,61 +245,88 @@ export default function TvView({ libraryId }: Props) {
       {view === 'seasons' && selectedSeries && (
         <div>
           {/* Series info header */}
-          <div className="flex items-start gap-4 mb-6 p-4 rounded-xl" style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}>
-            {selectedSeries.posterUrl && (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img src={selectedSeries.posterUrl} alt={selectedSeries.title} className="w-16 rounded-lg object-cover flex-shrink-0" style={{ aspectRatio: '2/3' }} />
-            )}
-            <div className="flex-1 min-w-0">
-              <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>{selectedSeries.title}</h2>
-              {(selectedSeries.year || selectedSeries.genres.length > 0) && (
-                <div className="flex flex-wrap items-center gap-2 mt-1">
-                  {selectedSeries.year && <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.year}</span>}
-                  {selectedSeries.genres.map((g) => (
-                    <span key={g} className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>{g}</span>
-                  ))}
+          <div className="mb-6 p-4 rounded-xl" style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}>
+            <div className="flex items-start gap-4">
+              {selectedSeries.posterUrl && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={selectedSeries.posterUrl} alt={selectedSeries.title} className="w-16 rounded-lg object-cover flex-shrink-0" style={{ aspectRatio: '2/3' }} />
+              )}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-start gap-2">
+                  <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>{selectedSeries.title}</h2>
+                  {/* Kebab menu */}
+                  <div className="relative flex-shrink-0" ref={menuRef}>
+                    <button
+                      onClick={() => { setMenuOpen((o) => !o); setConfirming(false) }}
+                      className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
+                      style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
+                      onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                      onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                      aria-label="More options"
+                    >
+                      ⋮
+                    </button>
+                    {menuOpen && (
+                      <div
+                        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)' }}
+                      >
+                        <button
+                          onClick={() => { setMenuOpen(false); setConfirming(true) }}
+                          className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                          style={{ color: '#fca5a5' }}
+                          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                        >
+                          Delete series
+                        </button>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              )}
-              {selectedSeries.plot && (
-                <p className="text-sm mt-2 line-clamp-3" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.plot}</p>
-              )}
+                {(selectedSeries.year || selectedSeries.genres.length > 0) && (
+                  <div className="flex flex-wrap items-center gap-2 mt-1">
+                    {selectedSeries.year && <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.year}</span>}
+                    {selectedSeries.genres.map((g) => (
+                      <span key={g} className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>{g}</span>
+                    ))}
+                  </div>
+                )}
+                {selectedSeries.plot && (
+                  <p className="text-sm mt-2 line-clamp-3" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.plot}</p>
+                )}
+              </div>
             </div>
-            {/* Delete series button */}
-            <div className="flex items-center gap-2 flex-shrink-0">
-              {confirming && (
+            {/* Confirmation banner */}
+            {confirming && (
+              <div
+                className="flex items-center gap-3 mt-3 px-3 py-2.5 rounded-lg"
+                style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
+              >
+                <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
+                  Permanently delete this series and all its files?
+                </p>
                 <button
                   onClick={() => setConfirming(false)}
-                  className="text-xs px-2.5 py-1.5 rounded-lg"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                  className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
+                  style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
                 >
                   Cancel
                 </button>
-              )}
-              <button
-                onClick={handleDeleteSeries}
-                disabled={deleting}
-                className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
-                style={{
-                  backgroundColor: confirming ? '#7f1d1d' : 'var(--border)',
-                  color: confirming ? '#fca5a5' : 'var(--text-secondary)',
-                }}
-                onMouseEnter={(e) => {
-                  if (!confirming) {
-                    ;(e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d'
-                    ;(e.currentTarget as HTMLElement).style.color = '#fca5a5'
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!confirming) {
-                    ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                    ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                  }
-                }}
-                title={confirming ? 'Click again to permanently delete this series and all its files' : 'Delete this series'}
-              >
-                {deleting ? 'Deleting…' : confirming ? 'Confirm delete?' : 'Delete series'}
-              </button>
-            </div>
+                <button
+                  onClick={handleDeleteSeries}
+                  disabled={deleting}
+                  className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
+                  style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
+                >
+                  {deleting ? 'Deleting…' : 'Yes, delete'}
+                </button>
+              </div>
+            )}
           </div>
 
           {loading ? (