bring up to date with github

Dockerfile

@@ -31,16 +31,13 @@ ENV NODE_ENV=production
 ENV PORT=3000
 # Bind to all interfaces so the container port is reachable
 ENV HOSTNAME=0.0.0.0
-# Store libraries.json in /config so it can be bind-mounted as a directory.
+
-# Mounting a directory (not a single file) ensures the atomic rename in
-# writeLibraries() works — both .tmp and the target are on the same filesystem.
-ENV LIBRARIES_CONFIG_PATH=/config/libraries.json
 RUN mkdir -p /config
 
 # Copy standalone Next.js output
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/public ./public
+# COPY --from=builder /app/public ./public
 
 # Copy native modules — Next.js standalone's file tracer does not follow
 # .node binary files, so we copy these manually from the deps stage.

config/libraries.json

@@ -1,14 +0,0 @@
-[
-  {
-    "id": "games",
-    "name": "Games",
-    "path": "/data/Games",
-    "type": "games"
-  },
-  {
-    "id": "various",
-    "name": "various",
-    "path": "/data/Various Media",
-    "type": "mixed"
-  }
-]

libraries.json

@@ -1,8 +0,0 @@
-[
-  {
-    "id": "games",
-    "name": "Games",
-    "path": "./data/Games",
-    "type": "games"
-  }
-]

package.json

@@ -12,7 +12,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@types/better-sqlite3": "^7.6.13",
     "better-sqlite3": "^12.8.0",
     "next": "^15.5.14",
     "react": "^19.2.4",
@@ -21,6 +20,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

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) => (

src/components/LibraryCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Link from 'next/link'
+import Image from 'next/image'
 import type { Library } from '@/types'
 
 const TYPE_LABELS: Record<string, string> = {
@@ -17,7 +18,7 @@ export default function LibraryCard({ library }: { library: Library }) {
   return (
     <Link
       href={`/library/${library.id}`}
-      className="group block rounded-xl border p-5 transition-colors"
+      className="group block rounded-xl border overflow-hidden transition-colors"
       style={{
         borderColor: 'var(--border)',
         backgroundColor: 'var(--surface)',
@@ -31,7 +32,25 @@ export default function LibraryCard({ library }: { library: Library }) {
         ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
       }}
     >
-      <div className="text-3xl mb-3">{TYPE_ICONS[library.type] ?? '📁'}</div>
+      {library.coverExt ? (
+        <div className="relative w-full aspect-video">
+          <Image
+            src={`/api/library-cover/${library.id}`}
+            alt={library.name}
+            fill
+            className="object-cover"
+            unoptimized
+          />
+        </div>
+      ) : (
+        <div
+          className="w-full aspect-video flex items-center justify-center text-4xl"
+          style={{ backgroundColor: 'var(--border)' }}
+        >
+          {TYPE_ICONS[library.type] ?? '📁'}
+        </div>
+      )}
+      <div className="p-4">
         <div className="font-semibold text-base mb-1" style={{ color: 'var(--text-primary)' }}>
           {library.name}
         </div>
@@ -41,6 +60,7 @@ export default function LibraryCard({ library }: { library: Library }) {
         >
           {TYPE_LABELS[library.type] ?? library.type}
         </div>
+      </div>
     </Link>
   )
 }

src/lib/db.ts

@@ -0,0 +1,48 @@
+import path from 'path'
+import fs from 'fs'
+import Database from 'better-sqlite3'
+
+const CONFIG_PATH = process.env.CONFIG_PATH ?? process.cwd()
+const DB_PATH = path.resolve(CONFIG_PATH, 'medialore.db')
+
+let _db: Database.Database | null = null
+
+export function getDb(): Database.Database {
+  if (_db) return _db
+  _db = new Database(DB_PATH)
+  _db.pragma('journal_mode = WAL')
+  _db.pragma('foreign_keys = ON')
+  initDb(_db)
+  return _db
+}
+
+function initDb(db: Database.Database): void {
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS tag_categories (
+      id   TEXT PRIMARY KEY,
+      name TEXT NOT NULL UNIQUE
+    );
+
+    CREATE TABLE IF NOT EXISTS tags (
+      id          TEXT PRIMARY KEY,
+      name        TEXT NOT NULL,
+      category_id TEXT NOT NULL REFERENCES tag_categories(id) ON DELETE CASCADE
+    );
+
+    CREATE UNIQUE INDEX IF NOT EXISTS tags_name_category ON tags(name, category_id);
+
+    CREATE TABLE IF NOT EXISTS media_tags (
+      media_key TEXT NOT NULL,
+      tag_id    TEXT NOT NULL REFERENCES tags(id) ON DELETE CASCADE,
+      PRIMARY KEY (media_key, tag_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS libraries (
+      id   TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      path TEXT NOT NULL,
+      type TEXT NOT NULL CHECK(type IN ('games', 'mixed')),
+      cover_ext TEXT NULL
+    );
+  `)
+}

src/lib/files.ts

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import type { DirectoryListing, FileEntry, MediaType } from '@/types'
+import { resolveAndJail } from '@/lib/libraries'
 
 const HIDDEN_FILES = /^\./
 
@@ -27,9 +28,12 @@ export function scanDirectory(
   libraryId: string,
   subpath: string
 ): DirectoryListing {
-  const absPath = subpath
+  let absPath: string
-    ? path.resolve(libraryRoot, subpath)
+  try {
-    : libraryRoot
+    absPath = subpath ? resolveAndJail(libraryRoot, subpath) : libraryRoot
+  } catch {
+    return { path: subpath, entries: [] }
+  }
 
   let dirents: fs.Dirent[]
   try {

src/lib/libraries.ts

@@ -1,26 +1,25 @@
 import path from 'path'
 import fs from 'fs'
 import type { Library, LibraryType } from '@/types'
-
+import { getDb } from '@/lib/db'
-const CONFIG_PATH = process.env.LIBRARIES_CONFIG_PATH ?? path.resolve(process.cwd(), 'libraries.json')
-const CONFIG_TMP = CONFIG_PATH + '.tmp'
 
 export function getLibraries(): Library[] {
-  try {
+  const db = getDb()
-    const raw = fs.readFileSync(CONFIG_PATH, 'utf-8')
+  return db
-    return JSON.parse(raw) as Library[]
+    .prepare('SELECT id, name, path, type, cover_ext as coverExt FROM libraries ORDER BY name')
-  } catch {
+    .all() as Library[]
-    return []
-  }
 }
 
 export function getLibrary(id: string): Library | undefined {
-  return getLibraries().find((lib) => lib.id === id)
+  const db = getDb()
+  return db
+    .prepare('SELECT id, name, path, type, cover_ext as coverExt FROM libraries WHERE id = ?')
+    .get(id) as Library | undefined
 }
 
 /**
  * Resolves a library's configured path to an absolute filesystem path.
- * Paths in libraries.json may be relative (to project root) or absolute.
+ * Paths may be relative (to project root) or absolute.
  */
 export function resolveLibraryRoot(library: Library): string {
   if (path.isAbsolute(library.path)) {
@@ -56,15 +55,6 @@ function slugify(name: string): string {
     .replace(/^-|-$/g, '')
 }
 
-/**
- * Atomically writes the library list to disk.
- */
-function writeLibraries(libraries: Library[]): void {
-  const json = JSON.stringify(libraries, null, 2) + '\n'
-  fs.writeFileSync(CONFIG_TMP, json, 'utf-8')
-  fs.renameSync(CONFIG_TMP, CONFIG_PATH)
-}
-
 /**
  * Adds a new library. Validates the path exists as a directory.
  * Throws a descriptive Error on failure.
@@ -91,37 +81,47 @@ export function addLibrary(name: string, libraryPath: string, type: LibraryType)
     throw new Error(`Path is not a directory: ${trimmedPath}`)
   }
 
-  const libraries = getLibraries()
+  const db = getDb()
+
+  // Reject exact duplicate names (case-insensitive)
+  const duplicate = db.prepare('SELECT 1 FROM libraries WHERE LOWER(name) = LOWER(?)').get(trimmedName)
+  if (duplicate) {
+    throw new Error(`A library named "${trimmedName}" already exists.`)
+  }
 
   // Generate a unique id
   const baseId = slugify(trimmedName) || 'library'
   let id = baseId
   let suffix = 2
-  while (libraries.some((lib) => lib.id === id)) {
+  while (db.prepare('SELECT 1 FROM libraries WHERE id = ?').get(id)) {
     id = `${baseId}-${suffix++}`
   }
 
-  // Reject exact duplicate names (same name, case-insensitive)
+  db.prepare('INSERT INTO libraries (id, name, path, type) VALUES (?, ?, ?, ?)').run(id, trimmedName, trimmedPath, type)
-  const duplicate = libraries.find(
+  return { id, name: trimmedName, path: trimmedPath, type, coverExt: null }
-    (lib) => lib.name.toLowerCase() === trimmedName.toLowerCase()
+}
-  )
-  if (duplicate) {
-    throw new Error(`A library named "${trimmedName}" already exists.`)
-  }
 
-  const newLibrary: Library = { id, name: trimmedName, path: trimmedPath, type }
+/**
-  writeLibraries([...libraries, newLibrary])
+ * Sets the cover image extension for a library (e.g. "jpg", "png").
-  return newLibrary
+ */
+export function updateLibraryCover(id: string, ext: string): void {
+  const db = getDb()
+  db.prepare('UPDATE libraries SET cover_ext = ? WHERE id = ?').run(ext, id)
+}
+
+/**
+ * Clears the custom cover image for a library.
+ */
+export function clearLibraryCover(id: string): void {
+  const db = getDb()
+  db.prepare('UPDATE libraries SET cover_ext = NULL WHERE id = ?').run(id)
 }
 
 /**
  * Removes a library by id. Returns true if removed, false if not found.
  */
 export function removeLibrary(id: string): boolean {
-  const libraries = getLibraries()
+  const db = getDb()
-  const index = libraries.findIndex((lib) => lib.id === id)
+  const result = db.prepare('DELETE FROM libraries WHERE id = ?').run(id)
-  if (index === -1) return false
+  return result.changes > 0
-  const updated = libraries.filter((lib) => lib.id !== id)
-  writeLibraries(updated)
-  return true
 }

src/lib/tags.ts

@@ -1,42 +1,5 @@
-import path from 'path'
-import Database from 'better-sqlite3'
 import type { Tag, TagCategory } from '@/types'
-
+import { getDb } from '@/lib/db'
-const DB_PATH = path.resolve(process.cwd(), 'medialore.db')
-
-let _db: Database.Database | null = null
-
-function getDb(): Database.Database {
-  if (_db) return _db
-  _db = new Database(DB_PATH)
-  _db.pragma('journal_mode = WAL')
-  _db.pragma('foreign_keys = ON')
-  initDb(_db)
-  return _db
-}
-
-function initDb(db: Database.Database): void {
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS tag_categories (
-      id   TEXT PRIMARY KEY,
-      name TEXT NOT NULL UNIQUE
-    );
-
-    CREATE TABLE IF NOT EXISTS tags (
-      id          TEXT PRIMARY KEY,
-      name        TEXT NOT NULL,
-      category_id TEXT NOT NULL REFERENCES tag_categories(id) ON DELETE CASCADE
-    );
-
-    CREATE UNIQUE INDEX IF NOT EXISTS tags_name_category ON tags(name, category_id);
-
-    CREATE TABLE IF NOT EXISTS media_tags (
-      media_key TEXT NOT NULL,
-      tag_id    TEXT NOT NULL REFERENCES tags(id) ON DELETE CASCADE,
-      PRIMARY KEY (media_key, tag_id)
-    );
-  `)
-}
 
 function slugify(name: string): string {
   return name

src/types/index.ts

@@ -5,6 +5,7 @@ export interface Library {
   name: string
   path: string
   type: LibraryType
+  coverExt: string | null
 }
 
 export interface Game {