bring up to date with github

src/app/api/library-cover/[id]/route.ts

@@ -0,0 +1,103 @@
+import path from 'path'
+import fs from 'fs'
+import sharp from 'sharp'
+import { NextRequest, NextResponse } from 'next/server'
+import { getLibrary, updateLibraryCover, clearLibraryCover } from '@/lib/libraries'
+
+const COVERS_DIR = path.resolve(process.cwd(), '.covers')
+const MAX_COVER_BYTES = 10 * 1024 * 1024 // 10 MB
+
+function coverPath(id: string, ext: string) {
+  return path.join(COVERS_DIR, `${id}.${ext}`)
+}
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const library = getLibrary(id)
+  if (!library?.coverExt) {
+    return new NextResponse(null, { status: 404 })
+  }
+
+  const filePath = coverPath(id, library.coverExt)
+  try {
+    const data = fs.readFileSync(filePath)
+    return new NextResponse(data, {
+      headers: {
+        'Content-Type': 'image/jpeg',
+        'Cache-Control': 'public, max-age=86400',
+      },
+    })
+  } catch {
+    return new NextResponse(null, { status: 404 })
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const library = getLibrary(id)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+
+  let formData: FormData
+  try {
+    formData = await request.formData()
+  } catch {
+    return NextResponse.json({ error: 'Invalid form data' }, { status: 400 })
+  }
+
+  const file = formData.get('cover')
+  if (!(file instanceof File)) {
+    return NextResponse.json({ error: 'cover file is required' }, { status: 400 })
+  }
+
+  if (file.size > MAX_COVER_BYTES) {
+    return NextResponse.json({ error: 'File too large. Maximum size is 10 MB.' }, { status: 400 })
+  }
+
+  const rawBuffer = Buffer.from(await file.arrayBuffer())
+
+  // Re-encode through sharp — validates it's a real image and strips metadata
+  let processedBuffer: Buffer
+  try {
+    processedBuffer = await sharp(rawBuffer).jpeg({ quality: 90 }).toBuffer()
+  } catch {
+    return NextResponse.json({ error: 'Invalid or corrupt image file.' }, { status: 400 })
+  }
+
+  fs.mkdirSync(COVERS_DIR, { recursive: true })
+
+  // Remove any existing cover (may have a different extension from older uploads)
+  if (library.coverExt) {
+    try { fs.unlinkSync(coverPath(id, library.coverExt)) } catch { /* ignore */ }
+  }
+
+  fs.writeFileSync(coverPath(id, 'jpg'), processedBuffer)
+  updateLibraryCover(id, 'jpg')
+
+  return NextResponse.json({ coverExt: 'jpg' }, { status: 200 })
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const library = getLibrary(id)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+
+  if (library.coverExt) {
+    try { fs.unlinkSync(coverPath(id, library.coverExt)) } catch { /* ignore */ }
+    clearLibraryCover(id)
+  }
+
+  return new NextResponse(null, { status: 204 })
+}

src/app/layout.tsx

@@ -22,7 +22,7 @@ export default function RootLayout({
               MediaLore
             </a>
             <nav className="flex items-center gap-1">
-              <NavLink href="/manage">Manage Libraries</NavLink>
+              <NavLink href="/manage">Manage</NavLink>
             </nav>
           </div>
         </header>

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}

src/app/page.tsx

@@ -23,13 +23,6 @@ export default function HomePage() {
             {libraries.length} {libraries.length === 1 ? 'library' : 'libraries'} configured
           </p>
         </div>
-        <Link
-          href="/manage"
-          className="text-sm px-3 py-1.5 rounded-lg transition-colors"
-          style={{ backgroundColor: 'var(--surface)', color: 'var(--text-secondary)', border: '1px solid var(--border)' }}
-        >
-          Manage
-        </Link>
       </div>
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {libraries.map((lib) => (