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/movies/MovieDetailModal.tsx

@@ -15,14 +15,19 @@ interface Props {
 
 export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChanged, onDeleted }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
   const [playing, setPlaying] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
   const [confirming, setConfirming] = useState(false)
   const [deleting, setDeleting] = useState(false)
-  const cancelRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
+      if (e.key === 'Escape') {
+        if (menuOpen) { setMenuOpen(false); return }
+        if (confirming) { setConfirming(false); return }
+        onClose()
+      }
     }
     document.addEventListener('keydown', handleKey)
     document.body.style.overflow = 'hidden'
@@ -30,7 +35,19 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose])
+  }, [onClose, menuOpen, confirming])
+
+  // 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 handleOverlayClick = (e: React.MouseEvent) => {
     if (e.target === overlayRef.current) onClose()
@@ -38,13 +55,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
 
   const videoUrl = `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(movie.videoPath)}`
 
-  const handleDeleteClick = () => {
-    if (!confirming) {
-      setConfirming(true)
-      cancelRef.current = setTimeout(() => setConfirming(false), 4000)
-      return
-    }
-    if (cancelRef.current) clearTimeout(cancelRef.current)
+  const handleConfirmDelete = () => {
     setDeleting(true)
     fetch(`/api/movies?libraryId=${encodeURIComponent(libraryId)}&movieId=${encodeURIComponent(movie.id)}`, {
       method: 'DELETE',
@@ -53,11 +64,6 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
       .catch(() => setDeleting(false))
   }
 
-  const handleCancelDelete = () => {
-    if (cancelRef.current) clearTimeout(cancelRef.current)
-    setConfirming(false)
-  }
-
   if (playing) {
     return <VideoPlayerModal url={videoUrl} name={movie.title} onClose={() => setPlaying(false)} />
   }
@@ -103,8 +109,9 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
 
         {/* Info */}
         <div className="p-5">
-          <div className="flex items-start justify-between gap-3 mb-1">
-            <h2 className="text-lg font-semibold" style={{ color: 'var(--text-primary)' }}>
+          {/* Title row with kebab menu */}
+          <div className="flex items-start gap-2 mb-1">
+            <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
               {movie.title}
             </h2>
             {movie.year && (
@@ -112,6 +119,35 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
                 {movie.year}
               </span>
             )}
+            {/* 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 movie
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
 
           {/* Meta row */}
@@ -141,6 +177,37 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
             </p>
           )}
 
+          {/* Confirmation banner */}
+          {confirming && (
+            <div
+              className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
+              style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
+            >
+              <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
+                Permanently delete this movie and all its files?
+              </p>
+              <button
+                onClick={() => setConfirming(false)}
+                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={handleConfirmDelete}
+                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>
+          )}
+
           {/* Play button */}
           <button
             onClick={() => setPlaying(true)}
@@ -160,47 +227,6 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onTagsChan
             </p>
             <TagSelector mediaKey={`${libraryId}:${movie.id}`} onTagsChanged={onTagsChanged} />
           </div>
-
-          {/* Delete */}
-          <div className="mt-4 pt-4 flex items-center gap-2" style={{ borderTop: '1px solid var(--border)' }}>
-            {confirming && (
-              <p className="text-xs flex-1" style={{ color: 'var(--text-secondary)' }}>
-                This will permanently delete the folder and all its contents.
-              </p>
-            )}
-            {confirming && (
-              <button
-                onClick={handleCancelDelete}
-                className="text-xs px-2.5 py-1.5 rounded-lg flex-shrink-0"
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
-              >
-                Cancel
-              </button>
-            )}
-            <button
-              onClick={handleDeleteClick}
-              disabled={deleting}
-              className="text-xs px-2.5 py-1.5 rounded-lg flex-shrink-0 transition-colors disabled:opacity-50 ml-auto"
-              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)'
-                }
-              }}
-            >
-              {deleting ? 'Deleting…' : confirming ? 'Confirm delete?' : 'Delete movie'}
-            </button>
-          </div>
         </div>
       </div>
     </div>