bring up to date with github

src/app/manage/page.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import { useEffect, useState, useRef } from 'react'
+import Image from 'next/image'
 import type { Library, LibraryType } from '@/types'
 
+const TYPE_ICONS: Record<string, string> = {
+  games: '🎮',
+  mixed: '🗂️',
+}
+
 const TYPE_LABELS: Record<LibraryType, string> = {
   games: 'Games',
   mixed: 'Mixed Media',
@@ -47,7 +53,7 @@ export default function ManagePage() {
         ) : (
           <div className="divide-y" style={{ borderColor: 'var(--border)' }}>
             {libraries.map((lib) => (
-              <LibraryRow key={lib.id} library={lib} onRemoved={refresh} />
+              <LibraryRow key={lib.id} library={lib} onRemoved={refresh} onUpdated={refresh} />
             ))}
           </div>
         )}
@@ -83,19 +89,27 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 
 // ─── Library Row ──────────────────────────────────────────────────────────────
 
-function LibraryRow({ library, onRemoved }: { library: Library; onRemoved: () => void }) {
+function LibraryRow({
+  library,
+  onRemoved,
+  onUpdated,
+}: {
+  library: Library
+  onRemoved: () => void
+  onUpdated: () => void
+}) {
   const [confirming, setConfirming] = useState(false)
   const [removing, setRemoving] = useState(false)
+  const [uploadingCover, setUploadingCover] = useState(false)
   const cancelRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleRemoveClick = () => {
     if (!confirming) {
       setConfirming(true)
-      // Auto-cancel confirmation after 4s if user does nothing
       cancelRef.current = setTimeout(() => setConfirming(false), 4000)
       return
     }
-    // Second click — confirmed
     if (cancelRef.current) clearTimeout(cancelRef.current)
     setRemoving(true)
     fetch(`/api/libraries/${encodeURIComponent(library.id)}`, { method: 'DELETE' })
@@ -108,8 +122,63 @@ function LibraryRow({ library, onRemoved }: { library: Library; onRemoved: () =>
     setConfirming(false)
   }
 
+  const handleCoverChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setUploadingCover(true)
+    const form = new FormData()
+    form.append('cover', file)
+    await fetch(`/api/library-cover/${encodeURIComponent(library.id)}`, {
+      method: 'POST',
+      body: form,
+    })
+    setUploadingCover(false)
+    // Reset input so the same file can be re-selected
+    e.target.value = ''
+    onUpdated()
+  }
+
+  const handleRemoveCover = async () => {
+    await fetch(`/api/library-cover/${encodeURIComponent(library.id)}`, { method: 'DELETE' })
+    onUpdated()
+  }
+
   return (
     <div className="flex items-center gap-4 py-3 first:pt-0 last:pb-0">
+      {/* Cover thumbnail */}
+      <button
+        type="button"
+        onClick={() => fileInputRef.current?.click()}
+        disabled={uploadingCover}
+        title="Click to change cover image"
+        className="flex-shrink-0 w-16 h-10 rounded-lg overflow-hidden relative transition-opacity disabled:opacity-50"
+        style={{ border: '1px solid var(--border)' }}
+      >
+        {library.coverExt ? (
+          <Image
+            src={`/api/library-cover/${library.id}`}
+            alt=""
+            fill
+            className="object-cover"
+            unoptimized
+          />
+        ) : (
+          <span
+            className="flex items-center justify-center w-full h-full text-xl"
+            style={{ backgroundColor: 'var(--border)' }}
+          >
+            {TYPE_ICONS[library.type] ?? '📁'}
+          </span>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/webp,image/gif"
+          className="hidden"
+          onChange={handleCoverChange}
+        />
+      </button>
+
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-0.5">
@@ -134,6 +203,17 @@ function LibraryRow({ library, onRemoved }: { library: Library; onRemoved: () =>
 
       {/* Actions */}
       <div className="flex items-center gap-2 flex-shrink-0">
+        {library.coverExt && (
+          <button
+            onClick={handleRemoveCover}
+            className="text-xs px-2.5 py-1.5 rounded-lg 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)')}
+          >
+            Remove cover
+          </button>
+        )}
         {confirming && (
           <button
             onClick={handleCancel}