add more management capabilities

src/components/movies/MovieDetailModal.tsx

@@ -24,12 +24,23 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
   const [confirming, setConfirming] = useState(false)
   const [deleting, setDeleting] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
+  const [editing, setEditing] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [editForm, setEditForm] = useState({ title: '', year: '', plot: '', genres: '' })
+  const [warnRefresh, setWarnRefresh] = useState(false)
+  const [renaming, setRenaming] = useState(false)
+  const [renameName, setRenameName] = useState('')
+  const [renameError, setRenameError] = useState<string | null>(null)
+  const [renameSaving, setRenameSaving] = useState(false)
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         if (menuOpen) { setMenuOpen(false); return }
         if (confirming) { setConfirming(false); return }
+        if (warnRefresh) { setWarnRefresh(false); return }
+        if (editing) { setEditing(false); return }
+        if (renaming) { setRenaming(false); return }
         onClose()
       }
     }
@@ -39,7 +50,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose, menuOpen, confirming])
+  }, [onClose, menuOpen, confirming, editing, warnRefresh, renaming])
 
   // Close menu on outside click
   useEffect(() => {
@@ -68,9 +79,9 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
       .catch(() => setDeleting(false))
   }
 
-  const handleRefreshMetadata = () => {
+  const doRefreshMetadata = () => {
     setRefreshing(true)
-    setMenuOpen(false)
+    setWarnRefresh(false)
     const itemKey = `${libraryId}:movie:${movie.id}`
     fetch(
       `/api/nfo-refresh?libraryId=${encodeURIComponent(libraryId)}&itemType=movie&itemKey=${encodeURIComponent(itemKey)}`,
@@ -80,6 +91,82 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
       .finally(() => setRefreshing(false))
   }
 
+  const handleRefreshMetadata = () => {
+    setMenuOpen(false)
+    if (movie.manuallyEdited) {
+      setWarnRefresh(true)
+    } else {
+      doRefreshMetadata()
+    }
+  }
+
+  const handleStartEditing = () => {
+    setMenuOpen(false)
+    setEditForm({
+      title: movie.title,
+      year: movie.year?.toString() ?? '',
+      plot: movie.plot ?? '',
+      genres: movie.genres.join(', '),
+    })
+    setEditing(true)
+  }
+
+  const handleSaveMetadata = () => {
+    setSaving(true)
+    const genres = editForm.genres.split(',').map((g) => g.trim()).filter(Boolean)
+    const yearNum = editForm.year ? parseInt(editForm.year, 10) : null
+    fetch('/api/metadata', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        itemKey: movie.item_key,
+        title: editForm.title,
+        year: isNaN(yearNum as number) ? null : yearNum,
+        plot: editForm.plot || null,
+        genres,
+      }),
+    })
+      .then(() => { setEditing(false); onMetadataRefreshed?.() })
+      .finally(() => setSaving(false))
+  }
+
+  const handleStartRename = () => {
+    setMenuOpen(false)
+    // movie.id is the encoded folder name
+    setRenameName(decodeURIComponent(movie.id))
+    setRenameError(null)
+    setRenaming(true)
+  }
+
+  const handleRename = () => {
+    const trimmed = renameName.trim()
+    if (!trimmed) return
+    setRenameSaving(true)
+    setRenameError(null)
+    fetch('/api/rename', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        libraryId,
+        oldPath: decodeURIComponent(movie.id),
+        newName: trimmed,
+        itemType: 'movie',
+      }),
+    })
+      .then(async (res) => {
+        if (res.status === 409) {
+          const data = await res.json()
+          setRenameError(data.error)
+          return
+        }
+        if (!res.ok) throw new Error()
+        setRenaming(false)
+        onMetadataRefreshed?.()
+      })
+      .catch(() => setRenameError('Rename failed'))
+      .finally(() => setRenameSaving(false))
+  }
+
   if (playing) {
     return (
       <VideoPlayerModal
@@ -199,6 +286,24 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
                   >
                     {refreshing ? 'Refreshing…' : 'Refresh metadata'}
                   </button>
+                  <button
+                    onClick={handleStartEditing}
+                    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')}
+                  >
+                    Edit metadata
+                  </button>
+                  <button
+                    onClick={handleStartRename}
+                    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')}
+                  >
+                    Rename folder
+                  </button>
                   <button
                     onClick={() => { setMenuOpen(false); setConfirming(true) }}
                     className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
@@ -213,31 +318,155 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
             </div>
           </div>
 
-          {/* Meta row */}
-          {(movie.rating !== null || movie.runtime !== null || movie.genres.length > 0) && (
-            <div className="flex flex-wrap items-center gap-2 mb-3">
-              {movie.rating !== null && (
-                <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
-                  ★ {movie.rating.toFixed(1)}
-                </span>
-              )}
-              {movie.runtime !== null && (
-                <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                  {movie.runtime} min
-                </span>
-              )}
-              {movie.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>
-              ))}
+          {/* Rename inline input */}
+          {renaming && (
+            <div className="flex flex-col gap-2 mb-3">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={renameName}
+                  onChange={(e) => setRenameName(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setRenaming(false) }}
+                  className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                  autoFocus
+                />
+                <button
+                  onClick={() => setRenaming(false)}
+                  className="px-2 py-1.5 rounded-lg text-sm transition-colors"
+                  style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleRename}
+                  disabled={renameSaving}
+                  className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                  style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                >
+                  {renameSaving ? '…' : 'Rename'}
+                </button>
+              </div>
+              {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
             </div>
           )}
 
-          {movie.plot && (
-            <p className="text-sm mb-4 line-clamp-4" style={{ color: 'var(--text-secondary)' }}>
-              {movie.plot}
-            </p>
+          {editing ? (
+            <div className="flex flex-col gap-3 mb-4">
+              <div>
+                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Title</label>
+                <input
+                  type="text"
+                  value={editForm.title}
+                  onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
+                  className="w-full px-3 py-1.5 rounded-lg text-sm"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                  autoFocus
+                />
+              </div>
+              <div>
+                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Year</label>
+                <input
+                  type="number"
+                  value={editForm.year}
+                  onChange={(e) => setEditForm((f) => ({ ...f, year: e.target.value }))}
+                  className="w-full px-3 py-1.5 rounded-lg text-sm"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                />
+              </div>
+              <div>
+                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Plot</label>
+                <textarea
+                  rows={3}
+                  value={editForm.plot}
+                  onChange={(e) => setEditForm((f) => ({ ...f, plot: e.target.value }))}
+                  className="w-full px-3 py-1.5 rounded-lg text-sm resize-none"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                />
+              </div>
+              <div>
+                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Genres (comma-separated)</label>
+                <input
+                  type="text"
+                  value={editForm.genres}
+                  onChange={(e) => setEditForm((f) => ({ ...f, genres: e.target.value }))}
+                  className="w-full px-3 py-1.5 rounded-lg text-sm"
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                />
+              </div>
+              <div className="flex gap-2 justify-end">
+                <button
+                  onClick={() => setEditing(false)}
+                  className="px-3 py-1.5 rounded-lg text-sm transition-colors"
+                  style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSaveMetadata}
+                  disabled={saving}
+                  className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                  style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                >
+                  {saving ? 'Saving…' : 'Save'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <>
+              {/* Meta row */}
+              {(movie.rating !== null || movie.runtime !== null || movie.genres.length > 0) && (
+                <div className="flex flex-wrap items-center gap-2 mb-3">
+                  {movie.rating !== null && (
+                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+                      ★ {movie.rating.toFixed(1)}
+                    </span>
+                  )}
+                  {movie.runtime !== null && (
+                    <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                      {movie.runtime} min
+                    </span>
+                  )}
+                  {movie.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>
+              )}
+
+              {movie.plot && (
+                <p className="text-sm mb-4 line-clamp-4" style={{ color: 'var(--text-secondary)' }}>
+                  {movie.plot}
+                </p>
+              )}
+            </>
+          )}
+
+          {/* NFO refresh warning */}
+          {warnRefresh && (
+            <div
+              className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
+              style={{ backgroundColor: '#78350f33', border: '1px solid #78350f' }}
+            >
+              <p className="flex-1 text-xs" style={{ color: '#fbbf24' }}>
+                Refreshing from NFO will overwrite your manual edits.
+              </p>
+              <button
+                onClick={() => setWarnRefresh(false)}
+                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
+                style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={doRefreshMetadata}
+                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
+                style={{ backgroundColor: '#78350f', color: '#fbbf24' }}
+              >
+                Overwrite
+              </button>
+            </div>
           )}
 
           {/* Confirmation banner */}