initial version

src/components/LibraryCard.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import Link from 'next/link'
+import type { Library } from '@/types'
+
+const TYPE_LABELS: Record<string, string> = {
+  games: 'Games',
+  mixed: 'Mixed Media',
+}
+
+const TYPE_ICONS: Record<string, string> = {
+  games: '🎮',
+  mixed: '🗂️',
+}
+
+export default function LibraryCard({ library }: { library: Library }) {
+  return (
+    <Link
+      href={`/library/${library.id}`}
+      className="group block rounded-xl border p-5 transition-colors"
+      style={{
+        borderColor: 'var(--border)',
+        backgroundColor: 'var(--surface)',
+      }}
+      onMouseEnter={(e) => {
+        (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
+        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+      }}
+    >
+      <div className="text-3xl mb-3">{TYPE_ICONS[library.type] ?? '📁'}</div>
+      <div className="font-semibold text-base mb-1" style={{ color: 'var(--text-primary)' }}>
+        {library.name}
+      </div>
+      <div
+        className="text-xs font-medium px-2 py-0.5 rounded-full inline-block"
+        style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+      >
+        {TYPE_LABELS[library.type] ?? library.type}
+      </div>
+    </Link>
+  )
+}

src/components/games/GameDetailModal.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import type { Game } from '@/types'
+
+interface Props {
+  game: Game
+  libraryId: string
+  onClose: () => void
+}
+
+export default function GameDetailModal({ game, libraryId, onClose }: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [onClose])
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === overlayRef.current) onClose()
+  }
+
+  const downloadHref = `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(game.zipPath)}`
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      onClick={handleOverlayClick}
+    >
+      <div
+        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+          style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
+          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
+          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+
+        {/* Wide cover / cover hero */}
+        <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
+          {game.wideCoverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={game.wideCoverUrl}
+              alt={`${game.title} wide cover`}
+              className="w-full object-cover max-h-64"
+            />
+          ) : game.coverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={game.coverUrl}
+              alt={`${game.title} cover`}
+              className="w-full object-contain max-h-64"
+            />
+          ) : (
+            <div className="h-40 flex items-center justify-center text-5xl">🎮</div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="p-5">
+          <h2 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+            {game.title}
+          </h2>
+          <a
+            href={downloadHref}
+            download
+            className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
+            style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
+            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
+          >
+            <span>↓</span>
+            Download .zip
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/games/GamesView.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Game } from '@/types'
+import GameDetailModal from './GameDetailModal'
+
+interface Props {
+  libraryId: string
+}
+
+export default function GamesView({ libraryId }: Props) {
+  const [games, setGames] = useState<Game[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Game | null>(null)
+
+  useEffect(() => {
+    fetch(`/api/games?libraryId=${encodeURIComponent(libraryId)}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setGames(data)
+        setLoading(false)
+      })
+      .catch(() => {
+        setError('Failed to load games')
+        setLoading(false)
+      })
+  }, [libraryId])
+
+  if (loading) return <LoadingGrid />
+  if (error) return <ErrorMessage message={error} />
+  if (games.length === 0) return <EmptyState />
+
+  return (
+    <>
+      <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        {games.map((game) => (
+          <button
+            key={game.id}
+            onClick={() => setSelected(game)}
+            className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2"
+            style={{
+              borderColor: 'var(--border)',
+              backgroundColor: 'var(--surface)',
+            }}
+            onMouseEnter={(e) => {
+              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+              ;(e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)'
+            }}
+            onMouseLeave={(e) => {
+              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+              ;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
+            }}
+          >
+            <div className="aspect-[3/4] w-full relative overflow-hidden" style={{ backgroundColor: 'var(--border)' }}>
+              {game.coverUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={game.coverUrl}
+                  alt={game.title}
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-4xl">
+                  🎮
+                </div>
+              )}
+            </div>
+            <div className="p-2">
+              <p
+                className="text-xs font-medium truncate leading-tight"
+                style={{ color: 'var(--text-primary)' }}
+                title={game.title}
+              >
+                {game.title}
+              </p>
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {selected && (
+        <GameDetailModal game={selected} libraryId={libraryId} onClose={() => setSelected(null)} />
+      )}
+    </>
+  )
+}
+
+function LoadingGrid() {
+  return (
+    <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+      {Array.from({ length: 12 }).map((_, i) => (
+        <div key={i} className="rounded-xl overflow-hidden" style={{ backgroundColor: 'var(--surface)' }}>
+          <div className="aspect-[3/4] w-full animate-pulse" style={{ backgroundColor: 'var(--border)' }} />
+          <div className="p-2">
+            <div className="h-3 rounded animate-pulse" style={{ backgroundColor: 'var(--border)', width: '70%' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ErrorMessage({ message }: { message: string }) {
+  return (
+    <div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+      {message}
+    </div>
+  )
+}
+
+function EmptyState() {
+  return (
+    <div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+      <p className="text-lg mb-1">No games found</p>
+      <p className="text-sm">Each game should be a folder containing a .zip file.</p>
+    </div>
+  )
+}

src/components/mixed/ImageLightbox.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+interface Props {
+  url: string
+  name: string
+  onClose: () => void
+}
+
+export default function ImageLightbox({ url, name, onClose }: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [onClose])
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === overlayRef.current) onClose()
+  }
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      onClick={handleOverlayClick}
+    >
+      {/* Toolbar */}
+      <div className="flex items-center justify-between w-full max-w-4xl">
+        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
+          {name}
+        </span>
+        <button
+          onClick={onClose}
+          className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
+          style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Image */}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={url}
+        alt={name}
+        className="max-w-full max-h-[80vh] object-contain rounded-lg"
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>
+  )
+}

src/components/mixed/MixedView.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { DirectoryListing, FileEntry } from '@/types'
+import VideoPlayerModal from './VideoPlayerModal'
+import ImageLightbox from './ImageLightbox'
+
+interface Props {
+  libraryId: string
+  initialPath: string
+}
+
+type ModalState =
+  | { type: 'video'; url: string; name: string }
+  | { type: 'image'; url: string; name: string }
+  | null
+
+export default function MixedView({ libraryId, initialPath }: Props) {
+  const [currentPath, setCurrentPath] = useState(initialPath)
+  const [listing, setListing] = useState<DirectoryListing | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [modal, setModal] = useState<ModalState>(null)
+
+  const loadPath = useCallback(
+    (path: string) => {
+      setLoading(true)
+      setError(null)
+      fetch(
+        `/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(path)}`
+      )
+        .then((r) => r.json())
+        .then((data: DirectoryListing) => {
+          setListing(data)
+          setCurrentPath(path)
+          setLoading(false)
+        })
+        .catch(() => {
+          setError('Failed to load directory')
+          setLoading(false)
+        })
+    },
+    [libraryId]
+  )
+
+  useEffect(() => {
+    loadPath(initialPath)
+  }, [loadPath, initialPath])
+
+  const handleEntry = (entry: FileEntry) => {
+    if (entry.type === 'directory') {
+      const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
+      loadPath(newPath)
+      return
+    }
+    if (!entry.url) return
+    if (entry.mediaType === 'video') {
+      setModal({ type: 'video', url: entry.url, name: entry.name })
+    } else if (entry.mediaType === 'image') {
+      setModal({ type: 'image', url: entry.url, name: entry.name })
+    } else {
+      // Download other file types
+      window.open(entry.url, '_blank')
+    }
+  }
+
+  const navigateUp = () => {
+    const parts = currentPath.split('/').filter(Boolean)
+    parts.pop()
+    loadPath(parts.join('/'))
+  }
+
+  // Build breadcrumb segments
+  const breadcrumbs = currentPath
+    ? currentPath.split('/').filter(Boolean)
+    : []
+
+  return (
+    <>
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
+        <button
+          onClick={() => loadPath('')}
+          className="transition-colors"
+          style={{ color: breadcrumbs.length === 0 ? 'var(--text-primary)' : 'var(--text-secondary)' }}
+        >
+          Root
+        </button>
+        {breadcrumbs.map((segment, i) => {
+          const isLast = i === breadcrumbs.length - 1
+          const pathTo = breadcrumbs.slice(0, i + 1).join('/')
+          return (
+            <span key={i} className="flex items-center gap-1">
+              <span style={{ color: 'var(--border)' }}>/</span>
+              <button
+                onClick={() => !isLast && loadPath(pathTo)}
+                className="transition-colors"
+                style={{
+                  color: isLast ? 'var(--text-primary)' : 'var(--text-secondary)',
+                  cursor: isLast ? 'default' : 'pointer',
+                }}
+              >
+                {segment}
+              </button>
+            </span>
+          )
+        })}
+      </nav>
+
+      {loading && <LoadingSkeleton />}
+      {error && (
+        <div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+          {error}
+        </div>
+      )}
+
+      {!loading && !error && listing && (
+        <>
+          {listing.entries.length === 0 ? (
+            <div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+              This folder is empty.
+            </div>
+          ) : (
+            <div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+              {/* Up button */}
+              {breadcrumbs.length > 0 && (
+                <button
+                  onClick={navigateUp}
+                  className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors aspect-square"
+                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                >
+                  <span className="text-2xl">↑</span>
+                  <span>Up</span>
+                </button>
+              )}
+              {listing.entries.map((entry) => (
+                <EntryTile key={entry.name} entry={entry} onOpen={handleEntry} />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {modal?.type === 'video' && (
+        <VideoPlayerModal url={modal.url} name={modal.name} onClose={() => setModal(null)} />
+      )}
+      {modal?.type === 'image' && (
+        <ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
+      )}
+    </>
+  )
+}
+
+function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (e: FileEntry) => void }) {
+  const icon = entry.type === 'directory'
+    ? '📁'
+    : entry.mediaType === 'video'
+    ? '▶'
+    : entry.mediaType === 'image'
+    ? '🖼'
+    : '📄'
+
+  const isVideo = entry.type === 'file' && entry.mediaType === 'video'
+
+  return (
+    <button
+      onClick={() => onOpen(entry)}
+      className="group flex flex-col items-center gap-2 rounded-xl border p-3 text-xs transition-all text-center overflow-hidden"
+      style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
+      onMouseEnter={(e) => {
+        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
+        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+      }}
+      onMouseLeave={(e) => {
+        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+        ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+      }}
+    >
+      <span
+        className="text-3xl"
+        style={isVideo ? { color: 'var(--accent)' } : undefined}
+      >
+        {icon}
+      </span>
+      <span
+        className="w-full truncate text-center"
+        style={{ color: 'var(--text-primary)' }}
+        title={entry.name}
+      >
+        {entry.name}
+      </span>
+    </button>
+  )
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+      {Array.from({ length: 12 }).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-xl aspect-square animate-pulse"
+          style={{ backgroundColor: 'var(--surface)' }}
+        />
+      ))}
+    </div>
+  )
+}

src/components/mixed/VideoPlayerModal.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+interface Props {
+  url: string
+  name: string
+  onClose: () => void
+}
+
+export default function VideoPlayerModal({ url, name, onClose }: Props) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [onClose])
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === overlayRef.current) onClose()
+  }
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center p-4 gap-3"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
+      onClick={handleOverlayClick}
+    >
+      {/* Toolbar */}
+      <div className="flex items-center justify-between w-full max-w-4xl">
+        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
+          {name}
+        </span>
+        <button
+          onClick={onClose}
+          className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
+          style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Video */}
+      <video
+        src={url}
+        controls
+        autoPlay
+        className="w-full max-w-4xl max-h-[80vh] rounded-lg"
+        style={{ backgroundColor: '#000' }}
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>
+  )
+}