+
+
+ {library.type === 'games' &&
+ )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..24d6831
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,29 @@
+import { getLibraries } from '@/lib/libraries'
+import LibraryCard from '@/components/LibraryCard'
+
+export default function HomePage() {
+ const libraries = getLibraries()
+
+ return (
+
+
+ )
+}
diff --git a/src/components/LibraryCard.tsx b/src/components/LibraryCard.tsx
new file mode 100644
index 0000000..6cc4bc4
--- /dev/null
+++ b/src/components/LibraryCard.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import Link from 'next/link'
+import type { Library } from '@/types'
+
+const TYPE_LABELS: Record+ Libraries +
++ {libraries.length} {libraries.length === 1 ? 'library' : 'libraries'} configured +
+ {libraries.length === 0 ? ( +
+
+ ) : (
+ No libraries configured
+Add entries to libraries.json to get started.
+ {libraries.map((lib) => (
+
+ )}
+ {TYPE_ICONS[library.type] ?? '📁'}
+
+ {library.name}
+
+
+ {TYPE_LABELS[library.type] ?? library.type}
+
+
+ )
+}
diff --git a/src/components/games/GameDetailModal.tsx b/src/components/games/GameDetailModal.tsx
new file mode 100644
index 0000000..7bf4378
--- /dev/null
+++ b/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
+
+ )
+}
diff --git a/src/components/games/GamesView.tsx b/src/components/games/GamesView.tsx
new file mode 100644
index 0000000..6a70cd4
--- /dev/null
+++ b/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
+ {/* Close button */}
+
+
+ {/* Wide cover / cover hero */}
+
+
+ {game.wideCoverUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : game.coverUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+
+ {/* Info */}
+
+ 🎮
+ )}
+
+ {games.map((game) => (
+
+ ))}
+
+
+ {selected && (
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ )
+}
+
+function ErrorMessage({ message }: { message: string }) {
+ return (
+
+
+
+ ))}
+
+
+
+
+ {message}
+
+ )
+}
+
+function EmptyState() {
+ return (
+
+
+ )
+}
diff --git a/src/components/mixed/ImageLightbox.tsx b/src/components/mixed/ImageLightbox.tsx
new file mode 100644
index 0000000..8cccd70
--- /dev/null
+++ b/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 = useRefNo games found
+Each game should be a folder containing a .zip file.
+
+ {/* Toolbar */}
+ 
e.stopPropagation()}
+ />
+
+ )
+}
diff --git a/src/components/mixed/MixedView.tsx b/src/components/mixed/MixedView.tsx
new file mode 100644
index 0000000..3e6c76f
--- /dev/null
+++ b/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
+
+ {name}
+
+
+
+
+ {/* Image */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ {error}
+
+ )}
+
+ {!loading && !error && listing && (
+ <>
+ {listing.entries.length === 0 ? (
+
+ This folder is empty.
+
+ ) : (
+
+ {/* Up button */}
+ {breadcrumbs.length > 0 && (
+
+ )}
+ {listing.entries.map((entry) => (
+
+ )}
+
+ )}
+
+ {modal?.type === 'video' && (
+
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/mixed/VideoPlayerModal.tsx b/src/components/mixed/VideoPlayerModal.tsx
new file mode 100644
index 0000000..8098b86
--- /dev/null
+++ b/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
+ {/* Toolbar */}
+
+ )
+}
diff --git a/src/lib/files.ts b/src/lib/files.ts
new file mode 100644
index 0000000..a081b41
--- /dev/null
+++ b/src/lib/files.ts
@@ -0,0 +1,67 @@
+import fs from 'fs'
+import path from 'path'
+import type { DirectoryListing, FileEntry, MediaType } from '@/types'
+
+const HIDDEN_FILES = /^\./
+
+const VIDEO_EXTENSIONS = new Set(['.mp4', '.mov', '.mkv', '.avi', '.webm', '.m4v'])
+const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif'])
+
+function getMediaType(filename: string): MediaType {
+ const ext = path.extname(filename).toLowerCase()
+ if (VIDEO_EXTENSIONS.has(ext)) return 'video'
+ if (IMAGE_EXTENSIONS.has(ext)) return 'image'
+ return 'other'
+}
+
+function fileApiUrl(libraryId: string, relativePath: string): string {
+ return `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(relativePath)}`
+}
+
+export function scanDirectory(
+ libraryRoot: string,
+ libraryId: string,
+ subpath: string
+): DirectoryListing {
+ const absPath = subpath
+ ? path.resolve(libraryRoot, subpath)
+ : libraryRoot
+
+ let dirents: fs.Dirent[]
+ try {
+ dirents = fs.readdirSync(absPath, { withFileTypes: true })
+ } catch {
+ return { path: subpath, entries: [] }
+ }
+
+ const entries: FileEntry[] = dirents
+ .filter((d) => !HIDDEN_FILES.test(d.name))
+ .map((d): FileEntry => {
+ if (d.isDirectory()) {
+ return {
+ name: d.name,
+ type: 'directory',
+ mediaType: null,
+ url: null,
+ }
+ }
+
+ const relPath = subpath ? path.join(subpath, d.name) : d.name
+ const mediaType = getMediaType(d.name)
+
+ return {
+ name: d.name,
+ type: 'file',
+ mediaType,
+ url: fileApiUrl(libraryId, relPath),
+ }
+ })
+
+ // Sort: directories first, then files; each group sorted alphabetically
+ entries.sort((a, b) => {
+ if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
+ return a.name.localeCompare(b.name)
+ })
+
+ return { path: subpath, entries }
+}
diff --git a/src/lib/games.ts b/src/lib/games.ts
new file mode 100644
index 0000000..3a80b08
--- /dev/null
+++ b/src/lib/games.ts
@@ -0,0 +1,77 @@
+import fs from 'fs'
+import path from 'path'
+import type { Game } from '@/types'
+
+const HIDDEN_FILES = /^\./
+
+/**
+ * Finds the first file in a directory whose basename (without extension)
+ * matches the given pattern (case-insensitive).
+ */
+function findFile(dir: string, pattern: RegExp): string | null {
+ let entries: string[]
+ try {
+ entries = fs.readdirSync(dir)
+ } catch {
+ return null
+ }
+ const match = entries.find(
+ (entry) => !HIDDEN_FILES.test(entry) && pattern.test(path.basename(entry, path.extname(entry)))
+ )
+ return match ?? null
+}
+
+function fileApiUrl(libraryId: string, relativePath: string): string {
+ return `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(relativePath)}`
+}
+
+export function scanGamesLibrary(libraryRoot: string, libraryId: string): Game[] {
+ let gameDirs: string[]
+ try {
+ gameDirs = fs
+ .readdirSync(libraryRoot, { withFileTypes: true })
+ .filter((d) => d.isDirectory() && !HIDDEN_FILES.test(d.name))
+ .map((d) => d.name)
+ } catch {
+ return []
+ }
+
+ const games: Game[] = []
+
+ for (const dirName of gameDirs) {
+ const gamePath = path.join(libraryRoot, dirName)
+
+ // Find the .zip file (first match)
+ let zipFile: string | null = null
+ try {
+ const allFiles = fs.readdirSync(gamePath)
+ zipFile = allFiles.find((f) => f.toLowerCase().endsWith('.zip')) ?? null
+ } catch {
+ // skip unreadable dirs
+ continue
+ }
+
+ if (!zipFile) continue
+
+ // Case-insensitive cover matching
+ const coverFile = findFile(gamePath, /^cover$/i)
+ const wideCoverFile = findFile(gamePath, /^widecover$/i)
+
+ const id = encodeURIComponent(dirName)
+ const zipRelPath = path.join(dirName, zipFile)
+
+ games.push({
+ id,
+ title: dirName,
+ coverUrl: coverFile
+ ? fileApiUrl(libraryId, path.join(dirName, coverFile))
+ : null,
+ wideCoverUrl: wideCoverFile
+ ? fileApiUrl(libraryId, path.join(dirName, wideCoverFile))
+ : null,
+ zipPath: zipRelPath,
+ })
+ }
+
+ return games.sort((a, b) => a.title.localeCompare(b.title))
+}
diff --git a/src/lib/libraries.ts b/src/lib/libraries.ts
new file mode 100644
index 0000000..62c1289
--- /dev/null
+++ b/src/lib/libraries.ts
@@ -0,0 +1,38 @@
+import path from 'path'
+import fs from 'fs'
+import type { Library } from '@/types'
+
+const CONFIG_PATH = path.resolve(process.cwd(), 'libraries.json')
+
+export function getLibraries(): Library[] {
+ const raw = fs.readFileSync(CONFIG_PATH, 'utf-8')
+ return JSON.parse(raw) as Library[]
+}
+
+export function getLibrary(id: string): Library | undefined {
+ return getLibraries().find((lib) => lib.id === id)
+}
+
+/**
+ * Resolves a library's configured path to an absolute filesystem path.
+ * Paths in libraries.json may be relative (to project root) or absolute.
+ */
+export function resolveLibraryRoot(library: Library): string {
+ if (path.isAbsolute(library.path)) {
+ return library.path
+ }
+ return path.resolve(process.cwd(), library.path)
+}
+
+/**
+ * Resolves a relative subpath within a library root and verifies it doesn't
+ * escape the root (prevents path traversal attacks).
+ * Returns the absolute path, or throws if the path escapes the root.
+ */
+export function resolveAndJail(libraryRoot: string, subpath: string): string {
+ const resolved = path.resolve(libraryRoot, subpath)
+ if (!resolved.startsWith(libraryRoot + path.sep) && resolved !== libraryRoot) {
+ throw new Error(`Path traversal attempt detected: ${subpath}`)
+ }
+ return resolved
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..a0c5b76
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,30 @@
+export type LibraryType = 'games' | 'mixed'
+
+export interface Library {
+ id: string
+ name: string
+ path: string
+ type: LibraryType
+}
+
+export interface Game {
+ id: string
+ title: string
+ coverUrl: string | null
+ wideCoverUrl: string | null
+ zipPath: string
+}
+
+export type MediaType = 'video' | 'image' | 'other'
+
+export interface FileEntry {
+ name: string
+ type: 'file' | 'directory'
+ mediaType: MediaType | null
+ url: string | null
+}
+
+export interface DirectoryListing {
+ path: string
+ entries: FileEntry[]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f48e7ee
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,40 @@
+{
+ "compilerOptions": {
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ },
+ "target": "ES2017"
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
+
+ {name}
+
+
+
+
+ {/* Video */}
+