Shelfless

Ein vollständiges alternatives Web-Frontend für Audiobookshelf (ABS). ABS läuft weiter als Backend; Shelfless ersetzt dessen Oberfläche – Wiedergabe, Bibliotheken, Metadaten, Cover, Podcasts, User-Admin, Scanner und Server-Einstellungen.

Stack

React 18 · Vite · TypeScript · Tailwind (+ CSS-Variablen) · Zustand · React Router · Axios · HTML5-Audio · Lucide. Kein UI-Framework.

Entwicklung

npm install
npm run dev      # http://localhost:5173
npm run build    # Typecheck + Production-Build
npm run preview  # gebautes Bundle lokal servieren

Beim ersten Start öffnet sich der Setup-Screen: ABS-Server-URL (http://host:13378), Benutzername, Passwort. Der Token wird in localStorage gespeichert und beim Start via POST /api/authorize validiert.

Design

Dark-Theme, ein Akzent (Amber, in den Einstellungen umstellbar), Fraunces (Headings) + Hanken Grotesk (Body). Die verbindliche Design-Referenz liegt unter design-system/MASTER.md.

Struktur

src/
  api/        ABS-API nach Domäne (auth, libraries, items, progress, sessions, …)
  components/ MediaCard/Row/Grid, player/, detail/, admin/, ui/ (Primitives)
  hooks/      useDebounce, useClickOutside
  lib/        media (cover/stream-URLs), format, html (sicheres htmlToText), url
  pages/      Home, Library, ItemDetail, Settings, Setup, admin/*
  routes/     RequireAuth, RequireAdmin
  store/      auth, libraries, progress, player, settings, toast (Zustand)
  types/      abs.ts (ABS-API-Typen)

Hinweise zur ABS-API

Einige Pfade weichen vom ursprünglichen Briefing ab und folgen der echten ABS-API: Login POST /login, Authorize POST /api/authorize, Wiedergabe POST /api/items/:id/play. Server-Settings/Backups-Pfade ggf. je nach ABS-Version verifizieren.