Scarriffle/Audiolib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend-Redesign nach DESIGN.md: neues Dark-Theme mit grüner Akzentfarbe

Browse Source 
- Neue Farbpalette: #0a0d0b Hintergrund, #111511 Surface, #1ed760 Akzent
- Inter-Font via Google Fonts (400/500/600)
- CSS Grid Layout: 240px Sidebar + 1fr Content + 88px Player Bar
- Sidebar: neue Nav-Items mit Padding, Uppercase-Labels, grünes Logo-Icon
- CoverImage: 2-Buchstaben-Kürzel mit 6 Cover-Placeholder-Farben
- BookCard: Play-Overlay (34px), 3px Progress-Bar am Kartenrand
- MiniPlayer: Player Bar mit 3-Spalten-Grid, 4px Progress-Track
- Alle Pages und Komponenten auf neue Tokenfarben aktualisiert
- BookDetail: Fehlermeldung wenn kein Match gefunden

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Audiolib
2026-05-26 17:04:42 +02:00
parent 3871da4bcc
commit a756db9d96
18 changed files with 477 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/index.html
View File

@@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audiolib</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>

20
frontend/src/App.tsx
View File

@@ -50,7 +50,7 @@ function AppRoutes() {
<Route path="/" element={
defaultLib
? <Navigate to={`/library/${defaultLib}`} replace />
: <div className="p-6 text-gray-400">Keine Bibliothek. Im Admin-Bereich anlegen.</div>
: <div style={{ padding: '32px' }} className="text-muted">Keine Bibliothek. Im Admin-Bereich anlegen.</div>
} />
<Route path="/library/:libraryId" element={<Library />} />
<Route path="/book/:id" element={<BookDetail />} />
@@ -64,7 +64,6 @@ function AppRoutes() {
/>
</Routes>
{/* Vollbild-Player als Overlay */}
{expanded && (
<div className="fixed inset-0 bg-background z-50 overflow-y-auto">
<AudioPlayer />
@@ -77,7 +76,6 @@ function AppRoutes() {
function PodcastList() {
const { libraries } = useAuthStore()
const [podcasts, setPodcasts] = React.useState<any[]>([])
const podcastLib = libraries.find((l: any) => l.mediaType === 'podcast')
React.useEffect(() => {
import('./api/client').then(({ default: api }) => {
@@ -86,22 +84,22 @@ function PodcastList() {
}, [])
return (
<div className="p-6">
<h1 className="text-2xl font-bold text-white mb-6">Podcasts</h1>
<div style={{ padding: '32px 32px 24px' }}>
<h1 className="text-ink font-semibold mb-6" style={{ fontSize: '22px', letterSpacing: '-0.5px' }}>Podcasts</h1>
{podcasts.length === 0 ? (
<p className="text-gray-500">Noch keine Podcasts. Library vom Typ „Podcast" scannen.</p>
<p className="text-muted" style={{ fontSize: '13px' }}>Noch keine Podcasts. Library vom Typ „Podcast" scannen.</p>
) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
{podcasts.map((p: any) => (
<a key={p.id} href={`/podcast/${p.id}`} className="group block">
<div className="aspect-square bg-surface rounded-lg overflow-hidden mb-2">
<div className="aspect-square rounded-xl overflow-hidden mb-2" style={{ borderRadius: '12px' }}>
{p.cover
? <img src={p.cover} alt={p.title} className="w-full h-full object-cover" />
: <div className="w-full h-full flex items-center justify-center text-gray-600 text-4xl">🎙</div>
: <div className="w-full h-full flex items-center justify-center bg-card text-muted" style={{ fontSize: '32px' }}>🎙</div>
}
</div>
<p className="text-sm font-medium text-white truncate">{p.title}</p>
<p className="text-xs text-gray-400">{p.numEpisodes} Episoden</p>
<p className="text-ink truncate" style={{ fontSize: '13px', fontWeight: 500 }}>{p.title}</p>
<p className="text-muted" style={{ fontSize: '12px' }}>{p.numEpisodes} Episoden</p>
</a>
))}
</div>

29
frontend/src/components/common/CoverImage.tsx
View File

@@ -1,5 +1,18 @@
import React, { useState } from 'react'
import { BookOpen } from 'lucide-react'
const COVER_COLORS = ['#1a2e1c', '#1c1a2e', '#2e1a1a', '#1a2a2e', '#2a2e1a', '#2e2218']
function hashStr(s: string): number {
let h = 0
for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0
return Math.abs(h)
}
function initials(text: string): string {
const words = text.trim().split(/\s+/).filter(Boolean)
if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase()
return (text.slice(0, 2) || '?').toUpperCase()
}
interface Props {
src?: string | null
@@ -7,13 +20,19 @@ interface Props {
className?: string
}
export default function CoverImage({ src, alt, className = '' }: Props) {
export default function CoverImage({ src, alt = '', className = '' }: Props) {
const [error, setError] = useState(false)
if (!src || error) {
const bg = COVER_COLORS[hashStr(alt || 'X') % COVER_COLORS.length]
return (
<div className={`bg-surface flex items-center justify-center ${className}`}>
<BookOpen className="text-gray-600" size={32} />
<div
className={`flex items-center justify-center ${className}`}
style={{ background: bg }}
>
<span style={{ fontSize: '11px', fontWeight: 600, color: 'rgba(255,255,255,0.5)' }}>
{initials(alt || '?')}
</span>
</div>
)
}
@@ -21,7 +40,7 @@ export default function CoverImage({ src, alt, className = '' }: Props) {
return (
<img
src={src}
alt={alt || ''}
alt={alt}
className={`object-cover ${className}`}
onError={() => setError(true)}
/>

38
frontend/src/components/common/FileBrowser.tsx
View File

@@ -37,36 +37,37 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
return (
<div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" onClick={onClose}>
<div
className="bg-surface border border-white/10 rounded-xl w-full max-w-lg shadow-2xl flex flex-col"
className="bg-surface border border-divider rounded-xl w-full max-w-lg flex flex-col"
style={{ maxHeight: '80vh' }}
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-white/10 flex-shrink-0">
<h3 className="text-sm font-semibold text-white">Ordner auswählen</h3>
<button onClick={onClose} className="text-gray-400 hover:text-white">
<div className="flex items-center justify-between px-4 py-3 border-b border-divider flex-shrink-0">
<h3 className="text-ink" style={{ fontSize: '13px', fontWeight: 600 }}>Ordner auswählen</h3>
<button onClick={onClose} className="text-muted hover:text-ink transition-colors">
<X size={16} />
</button>
</div>
{/* Quick access */}
<div className="flex gap-1 px-3 py-2 border-b border-white/10 flex-shrink-0 overflow-x-auto">
<div className="flex gap-1 px-3 py-2 border-b border-divider flex-shrink-0 overflow-x-auto">
{['/audiofiles', '/data', '/media', '/'].map((p) => (
<button key={p} onClick={() => load(p)}
className={`flex-shrink-0 px-2 py-1 rounded text-xs transition-colors ${path === p ? 'bg-primary/20 text-primary' : 'text-gray-500 hover:text-white hover:bg-white/5'}`}>
className={`flex-shrink-0 px-2 py-1 rounded transition-colors ${path === p ? 'bg-primary-dim text-primary' : 'text-muted hover:text-ink hover:bg-card'}`}
style={{ fontSize: '11px' }}>
{p}
</button>
))}
</div>
{/* Current path */}
<div className="px-4 py-2 bg-white/5 border-b border-white/10 flex items-center gap-2 flex-shrink-0">
<div className="px-4 py-2 bg-card border-b border-divider flex items-center gap-2 flex-shrink-0">
{parent && (
<button onClick={() => load(parent)} className="text-gray-400 hover:text-white flex-shrink-0">
<button onClick={() => load(parent)} className="text-muted hover:text-ink flex-shrink-0 transition-colors">
<ChevronUp size={16} />
</button>
)}
<p className="text-xs text-gray-300 font-mono truncate">{path}</p>
<p className="text-muted font-mono truncate" style={{ fontSize: '11px' }}>{path}</p>
</div>
{/* Entry list */}
@@ -76,25 +77,27 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
<Loader2 size={24} className="text-primary animate-spin" />
</div>
) : error ? (
<p className="text-red-400 text-sm px-4 py-6">{error}</p>
<p className="text-red-400 px-4 py-6" style={{ fontSize: '13px' }}>{error}</p>
) : entries.length === 0 ? (
<p className="text-gray-500 text-sm px-4 py-6">Ordner ist leer</p>
<p className="text-muted px-4 py-6" style={{ fontSize: '13px' }}>Ordner ist leer</p>
) : (
entries.map((e) =>
e.isDir ? (
<button
key={e.path}
onClick={() => load(e.path)}
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-white/5 text-gray-300 hover:text-white text-sm text-left transition-colors"
className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-card text-muted hover:text-ink text-left transition-colors"
style={{ fontSize: '13px' }}
>
<Folder size={16} className="text-yellow-500 flex-shrink-0" />
<span className="flex-1 truncate">{e.name}</span>
<ChevronRight size={14} className="flex-shrink-0 text-gray-600" />
<ChevronRight size={14} className="flex-shrink-0 text-muted2" />
</button>
) : (
<div
key={e.path}
className="flex items-center gap-3 px-4 py-2 text-gray-600 text-sm"
className="flex items-center gap-3 px-4 py-2 text-muted2"
style={{ fontSize: '12px' }}
>
<FileAudio size={14} className="flex-shrink-0" />
<span className="truncate">{e.name}</span>
@@ -105,13 +108,14 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
</div>
{/* Footer */}
<div className="flex items-center justify-between px-4 py-3 border-t border-white/10 flex-shrink-0">
<button onClick={onClose} className="text-gray-400 text-sm hover:text-white">
<div className="flex items-center justify-between px-4 py-3 border-t border-divider flex-shrink-0">
<button onClick={onClose} className="text-muted hover:text-ink transition-colors" style={{ fontSize: '13px' }}>
Abbrechen
</button>
<button
onClick={() => { onSelect(path); onClose() }}
className="flex items-center gap-2 bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary/80"
className="flex items-center gap-2 bg-primary text-black px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity"
style={{ fontSize: '13px' }}
>
<Check size={14} />
Auswählen

28
frontend/src/components/common/Layout.tsx
View File

@@ -9,12 +9,32 @@ export default function Layout({ children }: Props) {
const item = usePlayerStore((s) => s.item)
return (
<div className="flex h-screen bg-background overflow-hidden">
<Sidebar />
<main className={`flex-1 overflow-y-auto ${item ? 'pb-24' : ''}`}>
<div
className="h-screen overflow-hidden"
style={{
display: 'grid',
gridTemplateColumns: '240px 1fr',
gridTemplateRows: item ? '1fr 88px' : '1fr',
gridTemplateAreas: item ? '"sidebar main" "player player"' : '"sidebar main"',
}}
>
<aside
className="overflow-y-auto bg-surface border-r border-divider"
style={{ gridArea: 'sidebar' }}
>
<Sidebar />
</aside>
<main
className="overflow-y-auto bg-background"
style={{ gridArea: 'main' }}
>
{children}
</main>
{item && <MiniPlayer />}
{item && (
<div style={{ gridArea: 'player' }}>
<MiniPlayer />
</div>
)}
</div>
)
}

111
frontend/src/components/common/Sidebar.tsx
View File

@@ -3,6 +3,35 @@ import { NavLink } from 'react-router-dom'
import { Library, Mic2, Settings, LogOut, BookOpen } from 'lucide-react'
import { useAuthStore } from '../../store/authStore'
function NavLabel({ children }: { children: React.ReactNode }) {
return (
<p
className="text-muted px-3 py-2"
style={{ fontSize: '10px', fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase' }}
>
{children}
</p>
)
}
function NavItem({ to, icon, label }: { to: string; icon: React.ReactNode; label: string }) {
return (
<NavLink to={to}>
{({ isActive }) => (
<div
className={`flex items-center gap-2 rounded-lg cursor-pointer transition-colors ${
isActive ? 'bg-card text-ink' : 'text-muted hover:bg-card hover:text-ink'
}`}
style={{ padding: '10px 12px' }}
>
<span style={{ opacity: isActive ? 1 : 0.7 }}>{icon}</span>
<span style={{ fontSize: '13px', fontWeight: 500 }}>{label}</span>
</div>
)}
</NavLink>
)
}
export default function Sidebar() {
const { libraries, user, logout } = useAuthStore()
@@ -10,84 +39,72 @@ export default function Sidebar() {
const podcastLibraries = libraries.filter((l: any) => l.mediaType === 'podcast')
return (
<aside className="w-56 bg-surface flex-shrink-0 flex flex-col border-r border-white/5">
<div className="flex flex-col h-full">
{/* Logo */}
<div className="p-4 flex items-center gap-2 border-b border-white/5">
<BookOpen className="text-primary" size={22} />
<span className="font-bold text-white text-lg">Audiolib</span>
<div style={{ padding: '24px 20px 20px' }}>
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center flex-shrink-0">
<BookOpen size={15} className="text-black" />
</div>
<span
className="text-ink font-semibold"
style={{ fontSize: '20px', letterSpacing: '-0.5px' }}
>
Audiolib
</span>
</div>
</div>
<nav className="flex-1 overflow-y-auto p-2">
{/* Hörbücher-Libraries */}
<nav className="flex-1 overflow-y-auto px-2">
{bookLibraries.length > 0 && (
<>
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Bibliotheken</p>
<NavLabel>Bibliotheken</NavLabel>
{bookLibraries.map((lib: any) => (
<NavLink
<NavItem
key={lib.id}
to={`/library/${lib.id}`}
className={({ isActive }) =>
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
}`
}
>
<Library size={16} />
{lib.name}
</NavLink>
icon={<Library size={16} />}
label={lib.name}
/>
))}
</>
)}
{/* Podcast-Libraries */}
{podcastLibraries.length > 0 && (
<div className={bookLibraries.length > 0 ? 'mt-4 border-t border-white/5 pt-2' : ''}>
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Podcasts</p>
<div className={bookLibraries.length > 0 ? 'mt-4' : ''}>
<NavLabel>Podcasts</NavLabel>
{podcastLibraries.map((lib: any) => (
<NavLink
<NavItem
key={lib.id}
to={`/library/${lib.id}`}
className={({ isActive }) =>
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
}`
}
>
<Mic2 size={16} />
{lib.name}
</NavLink>
icon={<Mic2 size={16} />}
label={lib.name}
/>
))}
</div>
)}
{libraries.length === 0 && (
<p className="text-xs text-gray-600 px-2 py-2">Noch keine Bibliotheken.<br />Im Admin-Bereich anlegen.</p>
<p className="text-muted px-3 py-2" style={{ fontSize: '12px' }}>
Noch keine Bibliotheken.<br />Im Admin-Bereich anlegen.
</p>
)}
</nav>
{/* Footer */}
<div className="p-2 border-t border-white/5">
<div className="px-2 pb-4 border-t border-divider pt-2">
{user?.isAdmin && (
<NavLink
to="/admin"
className={({ isActive }) =>
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
}`
}
>
<Settings size={16} />
Admin
</NavLink>
<NavItem to="/admin" icon={<Settings size={16} />} label="Admin" />
)}
<button
onClick={logout}
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
className="w-full flex items-center gap-2 rounded-lg text-muted hover:bg-card hover:text-ink transition-colors"
style={{ padding: '10px 12px' }}
>
<LogOut size={16} />
Abmelden
<span style={{ opacity: 0.7 }}><LogOut size={16} /></span>
<span style={{ fontSize: '13px', fontWeight: 500 }}>Abmelden</span>
</button>
</div>
</aside>
</div>
)
}

48
frontend/src/components/library/BookCard.tsx
View File

@@ -21,52 +21,62 @@ export default function BookCard({ item }: Props) {
const isPlaying = currentItem?.id === item.id
const hasCover = item.media?.coverPath
const pct = progress && progress.duration > 0
? Math.min((progress.currentTime / progress.duration) * 100, 100)
: 0
return (
<div
className="group relative bg-surface rounded-lg overflow-hidden cursor-pointer hover:ring-1 hover:ring-primary/50 transition-all"
className="group cursor-pointer"
onClick={() => navigate(`/book/${item.id}`)}
>
<div className="relative aspect-square">
{/* Cover */}
<div
className="relative aspect-square overflow-hidden mb-2"
style={{ borderRadius: '12px' }}
>
<CoverImage
src={hasCover ? coverUrl(item.id) : null}
alt={title}
className="w-full h-full"
/>
{isPlaying && (
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
<div className="w-3 h-3 bg-primary rounded-full animate-pulse" />
</div>
)}
<button
className="absolute bottom-2 right-2 bg-primary text-black rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
className="absolute bottom-2 right-2 flex items-center justify-center bg-primary text-black opacity-0 group-hover:opacity-100"
style={{ width: 34, height: 34, borderRadius: '50%', transition: 'opacity 0.2s' }}
onClick={(e) => { e.stopPropagation(); play(item) }}
>
<Play size={14} fill="currentColor" />
</button>
{progress && !progress.isFinished && pct > 0 && (
<div className="absolute bottom-0 left-0 right-0 bg-muted2" style={{ height: '3px' }}>
<div className="h-full bg-primary" style={{ width: `${pct}%` }} />
</div>
)}
</div>
<div className="p-3">
{/* Text */}
<div>
{series && (
<p className="text-xs text-primary truncate mb-0.5">
<p className="text-primary truncate mb-0.5" style={{ fontSize: '11px' }}>
{series.name}{series.sequence ? ` #${series.sequence}` : ''}
</p>
)}
<p className="text-sm font-medium text-white truncate">{title}</p>
{author && <p className="text-xs text-gray-400 truncate mt-0.5">{author}</p>}
{progress && !progress.isFinished && (
<div className="mt-2 h-0.5 bg-white/10 rounded-full overflow-hidden">
<div
className="h-full bg-primary rounded-full"
style={{ width: `${Math.min((progress.currentTime / progress.duration) * 100, 100)}%` }}
/>
</div>
<p className="text-ink truncate" style={{ fontSize: '13px', fontWeight: 500 }}>{title}</p>
{author && (
<p className="text-muted truncate" style={{ fontSize: '12px' }}>{author}</p>
)}
{tags.includes('zu_prüfen') && (
<div className="mt-1.5 flex items-center gap-1">
<AlertCircle size={10} className="text-yellow-400 flex-shrink-0" />
<span className="text-xs text-yellow-400">zu prüfen</span>
<div className="mt-1 flex items-center gap-1">
<AlertCircle size={10} className="text-yellow-500 flex-shrink-0" />
<span style={{ fontSize: '10px' }} className="text-yellow-500">zu prüfen</span>
</div>
)}
</div>

66
frontend/src/components/player/AudioPlayer.tsx
View File

@@ -29,7 +29,6 @@ export default function AudioPlayer() {
const title = meta.title || item?.relPath || ''
const author = meta.authors?.[0]?.name || ''
// HLS laden sobald sich die Session ändert
useEffect(() => {
if (!session || !audioRef.current) return
const hlsUrl = session.audioTracks?.[0]?.contentUrl
@@ -57,7 +56,6 @@ export default function AudioPlayer() {
}
}, [session?.id])
// isPlaying <-> audio
useEffect(() => {
if (!audioRef.current) return
if (isPlaying) audioRef.current.play().catch(() => {})
@@ -72,7 +70,6 @@ export default function AudioPlayer() {
if (audioRef.current) audioRef.current.volume = muted ? 0 : volume
}, [volume, muted])
// Keyboard shortcuts
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement) return
@@ -126,7 +123,6 @@ export default function AudioPlayer() {
const SPEEDS = [0.75, 1, 1.25, 1.5, 1.75, 2]
const SLEEP_OPTIONS = [15 * 60, 30 * 60, 45 * 60, 60 * 60]
// Chapter progress markers
const chapterMarkers = chapters.map((c: any) => ({
pct: duration > 0 ? (c.start / duration) * 100 : 0,
}))
@@ -142,11 +138,11 @@ export default function AudioPlayer() {
{/* Header */}
<div className="flex items-center justify-between mb-6">
<button onClick={() => setExpanded(false)} className="text-gray-400 hover:text-white">
<button onClick={() => setExpanded(false)} className="text-muted hover:text-ink transition-colors">
<ChevronLeft size={24} />
</button>
<span className="text-sm text-gray-400">Jetzt läuft</span>
<button onClick={stop} className="text-gray-400 hover:text-white">
<span className="text-muted" style={{ fontSize: '13px' }}>Jetzt läuft</span>
<button onClick={stop} className="text-muted hover:text-ink transition-colors">
<X size={20} />
</button>
</div>
@@ -156,31 +152,31 @@ export default function AudioPlayer() {
<CoverImage
src={item ? coverUrl(item.id) : null}
alt={title}
className="w-64 h-64 rounded-xl shadow-2xl"
className="w-64 h-64 rounded-xl"
/>
</div>
{/* Title */}
<div className="text-center mb-6">
{currentChapter && (
<p className="text-xs text-primary mb-1 truncate">{currentChapter.title}</p>
<p className="text-primary mb-1 truncate" style={{ fontSize: '12px' }}>{currentChapter.title}</p>
)}
<h2 className="text-xl font-bold text-white truncate">{title}</h2>
{author && <p className="text-gray-400 mt-1 truncate">{author}</p>}
<h2 className="text-ink font-semibold truncate" style={{ fontSize: '18px', letterSpacing: '-0.5px' }}>{title}</h2>
{author && <p className="text-muted mt-1 truncate" style={{ fontSize: '13px' }}>{author}</p>}
</div>
{/* Progress bar with chapter markers */}
<div className="mb-4 relative">
<div className="relative h-1.5 bg-white/10 rounded-full mb-1">
{/* Progress bar */}
<div className="mb-4">
<div className="relative bg-muted2 rounded-full mb-2" style={{ height: '4px' }}>
{chapterMarkers.map((m: any, i: number) => (
<div
key={i}
className="absolute top-0 w-0.5 h-full bg-white/20"
className="absolute top-0 w-px h-full bg-muted"
style={{ left: `${m.pct}%` }}
/>
))}
<div
className="absolute top-0 left-0 h-full bg-primary rounded-full pointer-events-none"
className="absolute top-0 left-0 h-full bg-ink rounded-full pointer-events-none"
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
/>
<input
@@ -193,7 +189,7 @@ export default function AudioPlayer() {
className="absolute inset-0 w-full opacity-0 cursor-pointer h-full"
/>
</div>
<div className="flex justify-between text-xs text-gray-500">
<div className="flex justify-between text-muted" style={{ fontSize: '11px' }}>
<span>{fmtTime(currentTime)}</span>
<span>-{fmtTime(duration - currentTime)}</span>
</div>
@@ -202,19 +198,26 @@ export default function AudioPlayer() {
{/* Controls */}
<div className="flex items-center justify-center gap-6 mb-6">
<button
className="text-gray-400 hover:text-white"
className="text-muted hover:text-ink transition-colors"
onClick={() => audioRef.current && (audioRef.current.currentTime -= 30)}
>
<SkipBack size={28} />
</button>
<button
className="w-14 h-14 rounded-full bg-primary text-black flex items-center justify-center hover:bg-primary/80 transition-colors"
className="flex items-center justify-center"
style={{
width: 52, height: 52, borderRadius: '50%',
background: '#e4ede5', color: '#000',
transition: 'transform 0.1s',
}}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.background = '#fff' }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = '#e4ede5' }}
onClick={() => setPlaying(!isPlaying)}
>
{isPlaying ? <Pause size={24} fill="currentColor" /> : <Play size={24} fill="currentColor" />}
{isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" />}
</button>
<button
className="text-gray-400 hover:text-white"
className="text-muted hover:text-ink transition-colors"
onClick={() => audioRef.current && (audioRef.current.currentTime += 30)}
>
<SkipForward size={28} />
@@ -226,17 +229,18 @@ export default function AudioPlayer() {
{/* Speed */}
<div className="relative">
<button
className="text-sm text-gray-400 hover:text-white px-2 py-1 rounded"
className="text-muted hover:text-ink border border-divider px-2 py-1 transition-colors"
style={{ fontSize: '11px', fontWeight: 600, borderRadius: '4px', padding: '3px 8px' }}
onClick={() => setShowSpeedMenu(!showSpeedMenu)}
>
{playbackRate}×
</button>
{showSpeedMenu && (
<div className="absolute bottom-8 left-0 bg-surface border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
<div className="absolute bottom-8 left-0 bg-surface border border-divider rounded-lg overflow-hidden z-10">
{SPEEDS.map((s) => (
<button
key={s}
className={`block w-full px-4 py-2 text-sm text-left hover:bg-white/5 ${playbackRate === s ? 'text-primary' : 'text-gray-300'}`}
className={`block w-full px-4 py-2 text-sm text-left hover:bg-card transition-colors ${playbackRate === s ? 'text-primary' : 'text-muted'}`}
onClick={() => { setPlaybackRate(s); setShowSpeedMenu(false) }}
>
{s}×
@@ -247,27 +251,27 @@ export default function AudioPlayer() {
</div>
{/* Bookmark */}
<button className="text-gray-400 hover:text-white" onClick={addBookmark}>
<button className="text-muted hover:text-ink transition-colors" onClick={addBookmark}>
<BookmarkPlus size={20} />
</button>
{/* Sleep Timer */}
<div className="relative">
<button
className={`hover:text-white ${sleepTimerActive ? 'text-primary' : 'text-gray-400'}`}
className={`hover:text-ink transition-colors ${sleepTimerActive ? 'text-primary' : 'text-muted'}`}
onClick={() => sleepTimerActive ? cancelSleepTimer() : setShowSleepMenu(!showSleepMenu)}
>
<Moon size={20} />
</button>
{sleepTimerActive && sleepTimer !== null && (
<span className="text-xs text-primary ml-1">{Math.floor(sleepTimer / 60)}m</span>
<span className="text-primary ml-1" style={{ fontSize: '11px' }}>{Math.floor(sleepTimer / 60)}m</span>
)}
{showSleepMenu && (
<div className="absolute bottom-8 right-0 bg-surface border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
<div className="absolute bottom-8 right-0 bg-surface border border-divider rounded-lg overflow-hidden z-10">
{SLEEP_OPTIONS.map((s) => (
<button
key={s}
className="block w-full px-4 py-2 text-sm text-left text-gray-300 hover:bg-white/5"
className="block w-full px-4 py-2 text-sm text-left text-muted hover:bg-card hover:text-ink transition-colors"
onClick={() => { setSleepTimer(s); setShowSleepMenu(false) }}
>
{s / 60} Min
@@ -279,14 +283,14 @@ export default function AudioPlayer() {
{/* Chapter List */}
<button
className={`hover:text-white ${showChapters ? 'text-primary' : 'text-gray-400'}`}
className={`hover:text-ink transition-colors ${showChapters ? 'text-primary' : 'text-muted'}`}
onClick={() => setShowChapters(!showChapters)}
>
<List size={20} />
</button>
{/* Volume */}
<button className="text-gray-400 hover:text-white" onClick={() => setMuted(!muted)}>
<button className="text-muted hover:text-ink transition-colors" onClick={() => setMuted(!muted)}>
{muted ? <VolumeX size={20} /> : <Volume2 size={20} />}
</button>
</div>

10
frontend/src/components/player/ChapterList.tsx
View File

@@ -23,18 +23,18 @@ export default function ChapterList({ chapters, currentTime, onSeek }: Props) {
}
return (
<div className="mt-4 border-t border-white/10 pt-4 max-h-64 overflow-y-auto">
<p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Kapitel</p>
<div className="mt-4 border-t border-divider pt-4 max-h-64 overflow-y-auto">
<p className="text-muted uppercase tracking-wider mb-2" style={{ fontSize: '10px', fontWeight: 600, letterSpacing: '0.12em' }}>Kapitel</p>
{chapters.map((ch, i) => (
<button
key={ch.id}
className={`w-full flex items-center gap-3 px-2 py-2 rounded-lg text-left transition-colors ${
i === active ? 'bg-primary/10 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
i === active ? 'bg-primary-dim text-primary' : 'text-muted hover:text-ink hover:bg-card'
}`}
onClick={() => onSeek(ch.start)}
>
<span className="text-xs font-mono w-10 flex-shrink-0">{fmt(ch.start)}</span>
<span className="text-sm truncate">{ch.title}</span>
<span className="font-mono w-10 flex-shrink-0" style={{ fontSize: '11px' }}>{fmt(ch.start)}</span>
<span className="truncate" style={{ fontSize: '13px' }}>{ch.title}</span>
</button>
))}
</div>

69
frontend/src/components/player/MiniPlayer.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import { Play, Pause, X, ChevronUp } from 'lucide-react'
import { Play, Pause, X } from 'lucide-react'
import { usePlayerStore } from '../../store/playerStore'
import CoverImage from '../common/CoverImage'
import { coverUrl } from '../../api/items'
@@ -14,36 +14,65 @@ export default function MiniPlayer() {
const pct = duration > 0 ? (currentTime / duration) * 100 : 0
return (
<div className="fixed bottom-0 left-0 right-0 bg-surface border-t border-white/10 z-50">
{/* Progress bar */}
<div className="h-0.5 bg-white/10">
<div className="h-full bg-primary transition-all" style={{ width: `${pct}%` }} />
<div className="h-full flex flex-col bg-surface border-t border-divider">
{/* Progress track */}
<div className="bg-muted2 relative" style={{ height: '4px', borderRadius: '2px' }}>
<div
className="h-full bg-ink"
style={{ width: `${pct}%`, borderRadius: '2px', transition: 'width 0.5s linear' }}
/>
</div>
<div className="flex items-center gap-3 px-4 py-3">
{/* 3-column grid */}
<div
className="flex-1 grid items-center"
style={{ gridTemplateColumns: '1fr auto 1fr', padding: '0 24px', gap: '16px' }}
>
{/* Left: cover + title */}
<div
className="cursor-pointer flex items-center gap-3 flex-1 min-w-0"
className="flex items-center gap-3 cursor-pointer min-w-0"
onClick={() => setExpanded(true)}
>
<CoverImage
src={item.media?.coverPath ? coverUrl(item.id) : null}
alt={title}
className="w-10 h-10 rounded flex-shrink-0"
/>
<div className="w-10 h-10 flex-shrink-0 overflow-hidden" style={{ borderRadius: '6px' }}>
<CoverImage
src={item.media?.coverPath ? coverUrl(item.id) : null}
alt={title}
className="w-full h-full"
/>
</div>
<div className="min-w-0">
<p className="text-sm font-medium text-white truncate">{title}</p>
{author && <p className="text-xs text-gray-400 truncate">{author}</p>}
<p className="text-ink truncate" style={{ fontSize: '13px', fontWeight: 500 }}>{title}</p>
{author && <p className="text-muted truncate" style={{ fontSize: '12px' }}>{author}</p>}
</div>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{/* Center: play/pause */}
<button
className="flex items-center justify-center flex-shrink-0"
style={{
width: 40,
height: 40,
borderRadius: '50%',
background: '#e4ede5',
color: '#000',
transition: 'transform 0.1s',
}}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.background = '#fff' }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = '#e4ede5' }}
onClick={() => setPlaying(!isPlaying)}
>
{isPlaying
? <Pause size={18} fill="currentColor" />
: <Play size={18} fill="currentColor" />
}
</button>
{/* Right: close */}
<div className="flex items-center justify-end">
<button
className="w-9 h-9 rounded-full bg-primary text-black flex items-center justify-center"
onClick={() => setPlaying(!isPlaying)}
className="text-muted hover:text-ink transition-colors p-1.5"
onClick={stop}
>
{isPlaying ? <Pause size={16} fill="currentColor" /> : <Play size={16} fill="currentColor" />}
</button>
<button className="text-gray-400 hover:text-white p-1" onClick={stop}>
<X size={18} />
</button>
</div>

18
frontend/src/index.css
View File

@@ -3,6 +3,20 @@
@tailwind utilities;
body {
@apply bg-background text-white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0a0d0b;
color: #e4ede5;
font-family: 'Inter', sans-serif;
font-size: 14px;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2e3f30; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3d5440; }
input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}

100
frontend/src/pages/Admin.tsx
View File

@@ -10,16 +10,17 @@ export default function Admin() {
const [tab, setTab] = useState<Tab>('users')
return (
<div className="p-6">
<h1 className="text-2xl font-bold text-white mb-6">Administration</h1>
<div className="flex gap-1 mb-6 bg-surface rounded-xl p-1 w-fit">
<div style={{ padding: '32px 32px 24px' }}>
<h1 className="text-ink font-semibold mb-6" style={{ fontSize: '22px', letterSpacing: '-0.5px' }}>Administration</h1>
<div className="flex gap-1 mb-6 bg-surface rounded-xl p-1 w-fit border border-divider">
{(['users', 'libraries', 'settings'] as Tab[]).map((t) => (
<button
key={t}
onClick={() => setTab(t)}
className={`px-4 py-2 rounded-lg text-sm transition-colors ${
tab === t ? 'bg-primary text-black font-medium' : 'text-gray-400 hover:text-white'
className={`px-4 py-2 rounded-lg transition-colors ${
tab === t ? 'bg-primary text-black font-medium' : 'text-muted hover:text-ink'
}`}
style={{ fontSize: '13px' }}
>
{t === 'users' ? 'Benutzer' : t === 'libraries' ? 'Bibliotheken' : 'Einstellungen'}
</button>
@@ -58,38 +59,40 @@ function UsersPanel() {
return (
<div>
<div className="flex items-center justify-between mb-4">
<p className="text-gray-400 text-sm">{users.length} Benutzer</p>
<p className="text-muted" style={{ fontSize: '13px' }}>{users.length} Benutzer</p>
<button
onClick={() => setShowCreate(!showCreate)}
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg text-sm font-medium"
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg font-medium"
style={{ fontSize: '13px' }}
>
<Plus size={14} /> Neu
</button>
</div>
{showCreate && (
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-4 space-y-3">
<h3 className="text-sm font-semibold text-white">Neuer Benutzer</h3>
<div className="bg-surface border border-divider rounded-xl p-4 mb-4 space-y-3">
<h3 className="text-ink" style={{ fontSize: '13px', fontWeight: 600 }}>Neuer Benutzer</h3>
<input
type="text" placeholder="Benutzername"
value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<input
type="password" placeholder="Passwort"
value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
<label className="flex items-center gap-2 text-muted cursor-pointer" style={{ fontSize: '13px' }}>
<input type="checkbox" checked={form.isAdmin} onChange={(e) => setForm({ ...form, isAdmin: e.target.checked })} />
Admin-Rechte
</label>
<div className="flex gap-2">
<button onClick={handleCreate} disabled={!form.username || !form.password}
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
className="bg-primary text-black px-4 py-2 rounded-lg font-medium disabled:opacity-50"
style={{ fontSize: '13px' }}>
Anlegen
</button>
<button onClick={() => setShowCreate(false)} className="text-gray-400 px-4 py-2 rounded-lg text-sm hover:text-white">
<button onClick={() => setShowCreate(false)} className="text-muted px-4 py-2 rounded-lg hover:text-ink transition-colors" style={{ fontSize: '13px' }}>
Abbrechen
</button>
</div>
@@ -99,12 +102,12 @@ function UsersPanel() {
{loading ? <Loader2 className="text-primary animate-spin" size={24} /> : (
<div className="space-y-1">
{users.map((u: any) => (
<div key={u.id} className="flex items-center gap-4 bg-surface px-4 py-3 rounded-lg">
<div key={u.id} className="flex items-center gap-4 bg-surface px-4 py-3 rounded-lg border border-divider">
<div className="flex-1">
<p className="text-sm text-white">{u.username}</p>
<p className="text-xs text-gray-500">{u.email || 'Keine E-Mail'} · {u.isAdmin ? 'Admin' : 'Benutzer'}</p>
<p className="text-ink" style={{ fontSize: '13px' }}>{u.username}</p>
<p className="text-muted" style={{ fontSize: '11px' }}>{u.email || 'Keine E-Mail'} · {u.isAdmin ? 'Admin' : 'Benutzer'}</p>
</div>
<button onClick={() => handleDelete(u.id)} className="text-gray-500 hover:text-red-400 p-1">
<button onClick={() => handleDelete(u.id)} className="text-muted hover:text-red-400 p-1 transition-colors">
<Trash2 size={14} />
</button>
</div>
@@ -139,19 +142,19 @@ function LibraryForm({
}
return (
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-4 space-y-3">
<h3 className="text-sm font-semibold text-white">{title}</h3>
<div className="bg-surface border border-divider rounded-xl p-4 mb-4 space-y-3">
<h3 className="text-ink" style={{ fontSize: '13px', fontWeight: 600 }}>{title}</h3>
<input type="text" placeholder="Name (z.B. Hörbücher)"
value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<div className="flex gap-2">
<input type="text" placeholder="Pfad (z.B. /audiofiles)"
value={form.path} onChange={(e) => setForm({ ...form, path: e.target.value })}
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="flex-1 bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<button type="button" onClick={() => setShowBrowser(true)}
className="flex items-center gap-1.5 bg-white/5 border border-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/10">
className="flex items-center gap-1.5 bg-card border border-divider px-3 py-2 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 transition-colors">
<FolderOpen size={14} /> Durchsuchen
</button>
</div>
@@ -163,14 +166,14 @@ function LibraryForm({
/>
)}
<select value={form.mediaType} onChange={(e) => setForm({ ...form, mediaType: e.target.value })}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none">
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-muted focus:outline-none">
<option value="book">Hörbücher</option>
<option value="podcast">Podcasts</option>
</select>
{form.mediaType === 'book' && (
<div>
<p className="text-xs text-gray-500 mb-2">Matching-Quellen (Reihenfolge = Priorität)</p>
<p className="text-muted mb-2" style={{ fontSize: '11px' }}>Matching-Quellen (Reihenfolge = Priorität)</p>
<div className="flex flex-wrap gap-2">
{MATCH_SOURCES.map((s) => {
const checked = form.matchSources.includes(s.id)
@@ -184,11 +187,12 @@ function LibraryForm({
? form.matchSources.filter((x) => x !== s.id)
: [...form.matchSources, s.id],
})}
className={`px-3 py-1 rounded-full text-xs border transition-colors ${
className={`px-3 py-1 rounded-full border transition-colors ${
checked
? 'bg-primary/20 border-primary text-primary'
: 'bg-white/5 border-white/10 text-gray-400 hover:text-white'
? 'bg-primary-dim border-primary text-primary'
: 'bg-card border-divider text-muted hover:text-ink'
}`}
style={{ fontSize: '12px' }}
>
{s.label}
</button>
@@ -199,10 +203,11 @@ function LibraryForm({
)}
<div className="flex gap-2">
<button onClick={submit} disabled={!form.name || !form.path || saving}
className="flex items-center gap-2 bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
className="flex items-center gap-2 bg-primary text-black px-4 py-2 rounded-lg font-medium disabled:opacity-50"
style={{ fontSize: '13px' }}>
{saving && <Loader2 size={12} className="animate-spin" />} Speichern
</button>
<button onClick={onCancel} className="text-gray-400 px-4 py-2 rounded-lg text-sm hover:text-white">
<button onClick={onCancel} className="text-muted px-4 py-2 rounded-lg hover:text-ink transition-colors" style={{ fontSize: '13px' }}>
Abbrechen
</button>
</div>
@@ -260,9 +265,10 @@ function LibrariesPanel() {
return (
<div>
<div className="flex items-center justify-between mb-4">
<p className="text-gray-400 text-sm">{libraries.length} Bibliotheken</p>
<p className="text-muted" style={{ fontSize: '13px' }}>{libraries.length} Bibliotheken</p>
<button onClick={() => { setShowCreate(!showCreate); setEditingId(null) }}
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg text-sm font-medium">
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg font-medium"
style={{ fontSize: '13px' }}>
<Plus size={14} /> Neu
</button>
</div>
@@ -288,31 +294,33 @@ function LibrariesPanel() {
onCancel={() => setEditingId(null)}
/>
) : (
<div className="flex items-center gap-3 bg-surface px-4 py-3 rounded-lg">
<div className="flex items-center gap-3 bg-surface px-4 py-3 rounded-lg border border-divider">
<div className="flex-1 min-w-0">
<p className="text-sm text-white">{lib.name}</p>
<p className="text-xs text-gray-500 truncate">
<p className="text-ink" style={{ fontSize: '13px' }}>{lib.name}</p>
<p className="text-muted truncate" style={{ fontSize: '11px' }}>
{lib.folders?.[0]?.fullPath || ''} · {lib.mediaType === 'podcast' ? 'Podcast' : 'Hörbücher'}
</p>
</div>
<button onClick={() => handleScan(lib.id)} disabled={scanning === lib.id}
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white bg-white/5 px-3 py-1.5 rounded-lg disabled:opacity-50 flex-shrink-0">
className="flex items-center gap-1 text-muted hover:text-ink bg-card border border-divider px-3 py-1.5 rounded-lg disabled:opacity-50 flex-shrink-0 transition-colors"
style={{ fontSize: '12px' }}>
<RefreshCw size={12} className={scanning === lib.id ? 'animate-spin' : ''} />
Scan
</button>
{lib.mediaType !== 'podcast' && (
<button onClick={() => handleMatchAll(lib.id)} disabled={matching === lib.id}
title="Matching für alle Items starten"
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white bg-white/5 px-3 py-1.5 rounded-lg disabled:opacity-50 flex-shrink-0">
className="flex items-center gap-1 text-muted hover:text-ink bg-card border border-divider px-3 py-1.5 rounded-lg disabled:opacity-50 flex-shrink-0 transition-colors"
style={{ fontSize: '12px' }}>
<Sparkles size={12} className={matching === lib.id ? 'animate-pulse' : ''} />
Match
</button>
)}
<button onClick={() => { setEditingId(lib.id); setShowCreate(false) }}
className="text-gray-500 hover:text-white p-1 flex-shrink-0">
className="text-muted hover:text-ink p-1 flex-shrink-0 transition-colors">
<Pencil size={14} />
</button>
<button onClick={() => handleDelete(lib.id)} className="text-gray-500 hover:text-red-400 p-1 flex-shrink-0">
<button onClick={() => handleDelete(lib.id)} className="text-muted hover:text-red-400 p-1 flex-shrink-0 transition-colors">
<Trash2 size={14} />
</button>
</div>
@@ -344,7 +352,7 @@ function SettingsPanel() {
const toggle = (key: string) => (
<button
onClick={() => save(key, !settings[key])}
className={`relative w-10 h-5 rounded-full transition-colors ${settings[key] ? 'bg-primary' : 'bg-white/20'}`}
className={`relative w-10 h-5 rounded-full transition-colors ${settings[key] ? 'bg-primary' : 'bg-muted2'}`}
>
<span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform ${settings[key] ? 'translate-x-5' : 'translate-x-0'}`} />
</button>
@@ -353,7 +361,7 @@ function SettingsPanel() {
return (
<div className="space-y-4 max-w-lg">
{saved && (
<div className="flex items-center gap-2 text-primary text-sm">
<div className="flex items-center gap-2 text-primary" style={{ fontSize: '13px' }}>
<Check size={14} /> Gespeichert
</div>
)}
@@ -361,18 +369,18 @@ function SettingsPanel() {
{ key: 'autoMatchBooks', label: 'Auto-Match Hörbücher' },
{ key: 'autoMatchPodcasts', label: 'Auto-Match Podcasts' },
].map(({ key, label }) => (
<div key={key} className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg">
<p className="text-sm text-gray-300">{label}</p>
<div key={key} className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg border border-divider">
<p className="text-muted" style={{ fontSize: '13px' }}>{label}</p>
{toggle(key)}
</div>
))}
<div className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg">
<p className="text-sm text-gray-300">Feed-Update Intervall (Stunden)</p>
<div className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg border border-divider">
<p className="text-muted" style={{ fontSize: '13px' }}>Feed-Update Intervall (Stunden)</p>
<input
type="number" min={1} max={168}
value={settings.podcastUpdateIntervalHours || 24}
onChange={(e) => save('podcastUpdateIntervalHours', parseInt(e.target.value))}
className="w-16 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-sm text-white text-center focus:outline-none focus:ring-1 focus:ring-primary"
className="w-16 bg-card border border-divider rounded-lg px-2 py-1 text-sm text-ink text-center focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
</div>
</div>

88
frontend/src/pages/BookDetail.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import {
Play, ArrowLeft, Tag, RefreshCw, Search, Check,
Loader2, Trash2, X, ExternalLink, BookmarkPlus
Play, ArrowLeft, RefreshCw, Search, Check,
Loader2, Trash2, X
} from 'lucide-react'
import { getItem, updateItem, triggerMatch, searchMatch, applyMatch, coverUrl } from '../api/items'
import { getMe, createBookmark, deleteBookmark } from '../api/me'
@@ -36,7 +36,7 @@ export default function BookDetail() {
if (loading) return (
<div className="flex justify-center py-16"><Loader2 className="text-primary animate-spin" size={32} /></div>
)
if (!item) return <div className="p-6 text-gray-400">Nicht gefunden</div>
if (!item) return <div className="p-6 text-muted">Nicht gefunden</div>
const meta = item.media?.metadata || {}
const title = meta.title || item.relPath || 'Unbekannt'
@@ -86,54 +86,56 @@ export default function BookDetail() {
}
return (
<div className="p-6 max-w-4xl">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-gray-400 hover:text-white mb-6 text-sm">
<div style={{ padding: '32px 32px 24px' }} className="max-w-4xl">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-muted hover:text-ink mb-6 transition-colors" style={{ fontSize: '13px' }}>
<ArrowLeft size={16} /> Zurück
</button>
<div className="flex gap-6 mb-8 flex-wrap">
{/* Cover */}
<CoverImage
src={item.media?.coverPath ? coverUrl(id!) : null}
alt={title}
className="w-48 h-48 rounded-xl flex-shrink-0 shadow-2xl"
/>
<div className="w-44 h-44 rounded-xl overflow-hidden flex-shrink-0" style={{ borderRadius: '12px' }}>
<CoverImage
src={item.media?.coverPath ? coverUrl(id!) : null}
alt={title}
className="w-full h-full"
/>
</div>
{/* Info */}
<div className="flex-1 min-w-0">
{series && (
<p className="text-primary text-sm mb-1">
<p className="text-primary mb-1" style={{ fontSize: '12px' }}>
{series.name}{series.sequence ? ` #${series.sequence}` : ''}
</p>
)}
<h1 className="text-2xl font-bold text-white mb-1">{title}</h1>
{author && <p className="text-gray-400 mb-2">{author}</p>}
{meta.narrator && <p className="text-gray-500 text-sm mb-2">Sprecher: {meta.narrator}</p>}
{meta.publisher && <p className="text-gray-500 text-sm">Verlag: {meta.publisher} {meta.publishedYear ? `(${meta.publishedYear})` : ''}</p>}
<h1 className="text-ink font-semibold mb-1" style={{ fontSize: '22px', letterSpacing: '-0.5px' }}>{title}</h1>
{author && <p className="text-muted mb-2" style={{ fontSize: '14px' }}>{author}</p>}
{meta.narrator && <p className="text-muted mb-1" style={{ fontSize: '12px' }}>Sprecher: {meta.narrator}</p>}
{meta.publisher && <p className="text-muted" style={{ fontSize: '12px' }}>Verlag: {meta.publisher} {meta.publishedYear ? `(${meta.publishedYear})` : ''}</p>}
{item.media?.duration > 0 && (
<p className="text-gray-500 text-sm mt-1">{fmtTime(item.media.duration)}</p>
<p className="text-muted mt-1" style={{ fontSize: '12px' }}>{fmtTime(item.media.duration)}</p>
)}
{/* Progress */}
{progress && !progress.isFinished && (
<div className="mt-3">
<div className="h-1 bg-white/10 rounded-full w-48">
<div className="bg-muted2 rounded-full w-48" style={{ height: '3px' }}>
<div className="h-full bg-primary rounded-full" style={{ width: `${Math.min((progress.currentTime / progress.duration) * 100, 100)}%` }} />
</div>
<p className="text-xs text-gray-500 mt-1">{fmtTime(progress.currentTime)} von {fmtTime(progress.duration)}</p>
<p className="text-muted mt-1" style={{ fontSize: '11px' }}>{fmtTime(progress.currentTime)} von {fmtTime(progress.duration)}</p>
</div>
)}
{progress?.isFinished && <p className="text-primary text-sm mt-2">✓ Abgeschlossen</p>}
{progress?.isFinished && <p className="text-primary mt-2" style={{ fontSize: '13px' }}>✓ Abgeschlossen</p>}
{/* Tags */}
<div className="flex flex-wrap gap-2 mt-3">
{tags.map((tag) => (
<span key={tag} className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ${
tag === 'zu_prüfen' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-white/10 text-gray-300'
tag === 'zu_prüfen' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-card text-muted'
}`}>
{tag}
<button onClick={() => handleRemoveTag(tag)} className="hover:text-white">
<button onClick={() => handleRemoveTag(tag)} className="hover:text-ink transition-colors">
<X size={10} />
</button>
</span>
@@ -144,14 +146,15 @@ export default function BookDetail() {
<div className="flex gap-3 mt-4 flex-wrap">
<button
onClick={() => play(item)}
className="flex items-center gap-2 bg-primary text-black font-semibold px-4 py-2 rounded-lg hover:bg-primary/80"
className="flex items-center gap-2 bg-primary text-black font-semibold px-4 py-2 rounded-lg hover:opacity-90 transition-opacity"
style={{ fontSize: '13px' }}
>
<Play size={16} fill="currentColor" />
<Play size={15} fill="currentColor" />
{isCurrentItem ? 'Läuft...' : progress ? 'Weiter hören' : 'Abspielen'}
</button>
<button
onClick={() => setShowMatchPanel(!showMatchPanel)}
className="flex items-center gap-2 bg-surface border border-white/10 px-4 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5"
className="flex items-center gap-2 bg-card border border-divider px-4 py-2 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 transition-colors"
>
<Search size={14} />
Match
@@ -159,7 +162,7 @@ export default function BookDetail() {
<button
onClick={handleAutoMatch}
disabled={matchLoading}
className="flex items-center gap-2 bg-surface border border-white/10 px-4 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5 disabled:opacity-50"
className="flex items-center gap-2 bg-card border border-divider px-4 py-2 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 disabled:opacity-50 transition-colors"
>
<RefreshCw size={14} className={matchLoading ? 'animate-spin' : ''} />
Auto-Match
@@ -171,14 +174,14 @@ export default function BookDetail() {
{/* Description */}
{meta.description && (
<div className="mb-6">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Beschreibung</h3>
<p className="text-gray-300 text-sm leading-relaxed whitespace-pre-line">{meta.description}</p>
<h3 className="text-muted uppercase tracking-wider mb-2" style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.12em' }}>Beschreibung</h3>
<p className="text-muted leading-relaxed whitespace-pre-line" style={{ fontSize: '13px', lineHeight: '1.6' }}>{meta.description}</p>
</div>
)}
{/* Match info */}
{item.matchedSource && item.matchedSource !== 'none' && (
<div className="mb-4 flex items-center gap-2 text-xs text-gray-500">
<div className="mb-4 flex items-center gap-2 text-muted" style={{ fontSize: '12px' }}>
<Check size={12} className="text-primary" />
Metadaten via {item.matchedSource}
{item.matchConfidence && ` (${Math.round(item.matchConfidence * 100)}%)`}
@@ -187,8 +190,8 @@ export default function BookDetail() {
{/* Manual Match Panel */}
{showMatchPanel && (
<div className="mb-6 bg-surface border border-white/10 rounded-xl p-4">
<h3 className="text-sm font-semibold text-white mb-3">Manuelles Matching</h3>
<div className="mb-6 bg-surface border border-divider rounded-xl p-4">
<h3 className="text-ink mb-3" style={{ fontSize: '13px', fontWeight: 600 }}>Manuelles Matching</h3>
<div className="flex gap-2 mb-4">
<input
type="text"
@@ -196,7 +199,7 @@ export default function BookDetail() {
onChange={(e) => setMatchQuery(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearchMatch()}
placeholder={`${meta.title || 'Suche...'}`}
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="flex-1 bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<button
onClick={handleSearchMatch}
@@ -206,15 +209,18 @@ export default function BookDetail() {
{matchLoading ? <Loader2 size={14} className="animate-spin" /> : 'Suchen'}
</button>
</div>
{matchResults.length === 0 && !matchLoading && matchQuery && (
<p className="text-muted text-sm py-2">Kein Match gefunden für „{matchQuery}"</p>
)}
{matchResults.map((r, i) => (
<div key={i} className="flex items-center gap-3 py-2 border-t border-white/5 hover:bg-white/3">
<div key={i} className="flex items-center gap-3 py-2 border-t border-divider hover:bg-card transition-colors">
<div className="flex-1 min-w-0">
<p className="text-sm text-white truncate">{r.title}</p>
<p className="text-xs text-gray-400">{r.author} · {r.source} · {Math.round(r.confidence * 100)}%</p>
<p className="text-ink truncate" style={{ fontSize: '13px' }}>{r.title}</p>
<p className="text-muted" style={{ fontSize: '11px' }}>{r.author} · {r.source} · {Math.round(r.confidence * 100)}%</p>
</div>
<button
onClick={() => handleApplyMatch(r)}
className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-lg hover:bg-primary/30"
className="text-xs bg-primary-dim text-primary px-3 py-1 rounded-lg hover:bg-primary hover:text-black transition-colors"
>
Anwenden
</button>
@@ -226,7 +232,7 @@ export default function BookDetail() {
{/* Chapters */}
{chapters.length > 0 && (
<div className="mb-6">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
<h3 className="text-muted uppercase tracking-wider mb-2" style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.12em' }}>
Kapitel ({chapters.length})
</h3>
<ChapterList
@@ -243,7 +249,7 @@ export default function BookDetail() {
{/* Bookmarks */}
{bookmarks.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Lesezeichen</h3>
<h3 className="text-muted uppercase tracking-wider mb-2" style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.12em' }}>Lesezeichen</h3>
<div className="space-y-1">
{bookmarks.map((b, i) => {
const fmt = (s: number) => {
@@ -251,15 +257,15 @@ export default function BookDetail() {
return h > 0 ? `${h}:${m.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}` : `${m}:${sec.toString().padStart(2,'0')}`
}
return (
<div key={i} className="flex items-center gap-3 py-2 border-t border-white/5">
<span className="text-xs font-mono text-gray-500 w-16">{fmt(b.time)}</span>
<span className="text-sm text-gray-300 flex-1">{b.title}</span>
<div key={i} className="flex items-center gap-3 py-2 border-t border-divider">
<span className="font-mono text-muted w-16" style={{ fontSize: '11px' }}>{fmt(b.time)}</span>
<span className="text-ink flex-1" style={{ fontSize: '13px' }}>{b.title}</span>
<button
onClick={async () => {
await deleteBookmark(id!, b.time)
setBookmarks(bks => bks.filter((_, j) => j !== i))
}}
className="text-gray-500 hover:text-red-400"
className="text-muted hover:text-red-400 transition-colors"
>
<Trash2 size={12} />
</button>

72
frontend/src/pages/Library.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState, useCallback } from 'react'
import { useParams } from 'react-router-dom'
import { Search, RefreshCw, Grid, List, Loader2 } from 'lucide-react'
import { Search, RefreshCw, Loader2 } from 'lucide-react'
import { getLibraryItems, scanLibrary } from '../api/libraries'
import { getMe } from '../api/me'
import BookCard from '../components/library/BookCard'
@@ -16,7 +16,6 @@ export default function Library() {
const [loading, setLoading] = useState(false)
const [scanning, setScanning] = useState(false)
const [progressMap, setProgressMap] = useState<Record<string, any>>({})
const [view, setView] = useState<'grid' | 'list'>('grid')
const [filterTag, setFilterTag] = useState('')
const load = useCallback(async () => {
@@ -61,20 +60,18 @@ export default function Library() {
: items
const allTags = [...new Set(items.flatMap((i) => i.media?.tags || []))]
// Inject progress into items
const enriched = displayed.map((i) => ({ ...i, _progress: progressMap[i.id] }))
return (
<div className="p-6">
<div style={{ padding: '32px 32px 24px' }}>
{/* Toolbar */}
<div className="flex items-center gap-3 mb-6 flex-wrap">
<div className="flex items-center gap-3 mb-8 flex-wrap">
<div className="relative flex-1 min-w-48">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
<input
type="text"
placeholder="Suchen..."
className="w-full bg-surface border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg pl-9 pr-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
onChange={(e) => searchDebounce(e.target.value)}
/>
</div>
@@ -83,7 +80,7 @@ export default function Library() {
<select
value={filterTag}
onChange={(e) => setFilterTag(e.target.value)}
className="bg-surface border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-primary"
className="bg-card border border-divider rounded-lg px-3 py-2 text-sm text-muted focus:outline-none focus:ring-1 focus:ring-primary"
>
<option value="">Alle Tags</option>
{allTags.map((t) => <option key={t} value={t}>{t}</option>)}
@@ -93,26 +90,15 @@ export default function Library() {
<button
onClick={handleScan}
disabled={scanning}
className="flex items-center gap-2 bg-surface border border-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5 disabled:opacity-50"
className="flex items-center gap-2 bg-card border border-divider px-3 py-2 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 disabled:opacity-50 transition-colors"
>
<RefreshCw size={14} className={scanning ? 'animate-spin' : ''} />
Scan
</button>
<div className="flex bg-surface border border-white/10 rounded-lg overflow-hidden">
<button
className={`p-2 ${view === 'grid' ? 'bg-white/10 text-white' : 'text-gray-400'}`}
onClick={() => setView('grid')}
><Grid size={16} /></button>
<button
className={`p-2 ${view === 'list' ? 'bg-white/10 text-white' : 'text-gray-400'}`}
onClick={() => setView('list')}
><List size={16} /></button>
</div>
</div>
{/* Stats */}
<p className="text-sm text-gray-500 mb-4">
<p className="text-muted mb-6" style={{ fontSize: '13px' }}>
{total} {total === 1 ? 'Eintrag' : 'Einträge'}
{filterTag && ` · Filter: ${filterTag}`}
</p>
@@ -123,36 +109,16 @@ export default function Library() {
<Loader2 className="text-primary animate-spin" size={32} />
</div>
) : enriched.length === 0 ? (
<div className="text-center py-16 text-gray-500">
<p className="text-lg mb-2">Keine Einträge gefunden</p>
<p className="text-sm">Klicke auf „Scan" um die Bibliothek zu durchsuchen.</p>
</div>
) : view === 'grid' ? (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
{enriched.map((item) => <BookCard key={item.id} item={item} />)}
<div className="text-center py-16 text-muted">
<p className="mb-2" style={{ fontSize: '16px' }}>Keine Einträge gefunden</p>
<p style={{ fontSize: '13px' }}>Klicke auf „Scan" um die Bibliothek zu durchsuchen.</p>
</div>
) : (
<div className="space-y-1">
{enriched.map((item) => {
const meta = item.media?.metadata || {}
const title = meta.title || item.relPath || 'Unbekannt'
const author = meta.authors?.[0]?.name || ''
const p = item._progress
return (
<div key={item.id} className="flex items-center gap-4 bg-surface hover:bg-white/5 px-4 py-3 rounded-lg cursor-pointer">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate">{title}</p>
{author && <p className="text-xs text-gray-400">{author}</p>}
</div>
{p && !p.isFinished && (
<div className="w-24 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
<div className="h-full bg-primary" style={{ width: `${Math.min((p.currentTime / p.duration) * 100, 100)}%` }} />
</div>
)}
{p?.isFinished && <span className="text-xs text-primary flex-shrink-0">Fertig</span>}
</div>
)
})}
<div
className="grid"
style={{ gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px' }}
>
{enriched.map((item) => <BookCard key={item.id} item={item} />)}
</div>
)}
@@ -162,17 +128,17 @@ export default function Library() {
<button
disabled={page === 0}
onClick={() => setPage(p => p - 1)}
className="px-4 py-2 bg-surface border border-white/10 rounded-lg text-sm text-gray-300 disabled:opacity-50 hover:bg-white/5"
className="px-4 py-2 bg-card border border-divider rounded-lg text-sm text-muted disabled:opacity-50 hover:text-ink transition-colors"
>
Zurück
</button>
<span className="px-4 py-2 text-sm text-gray-400">
<span className="px-4 py-2 text-sm text-muted">
{page + 1} / {Math.ceil(total / PAGE_SIZE)}
</span>
<button
disabled={(page + 1) * PAGE_SIZE >= total}
onClick={() => setPage(p => p + 1)}
className="px-4 py-2 bg-surface border border-white/10 rounded-lg text-sm text-gray-300 disabled:opacity-50 hover:bg-white/5"
className="px-4 py-2 bg-card border border-divider rounded-lg text-sm text-muted disabled:opacity-50 hover:text-ink transition-colors"
>
Weiter
</button>

25
frontend/src/pages/Login.tsx
View File

@@ -26,39 +26,41 @@ export default function Login() {
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-sm">
<div className="flex items-center justify-center gap-3 mb-8">
<BookOpen className="text-primary" size={32} />
<h1 className="text-3xl font-bold text-white">Audiolib</h1>
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
<BookOpen size={20} className="text-black" />
</div>
<h1 className="text-ink font-semibold" style={{ fontSize: '26px', letterSpacing: '-0.5px' }}>Audiolib</h1>
</div>
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4">
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4 border border-divider">
<div>
<label className="block text-sm text-gray-400 mb-1">Benutzername</label>
<label className="block text-muted mb-1.5" style={{ fontSize: '12px', fontWeight: 500 }}>Benutzername</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
placeholder="admin"
autoFocus
/>
</div>
<div>
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
<label className="block text-muted mb-1.5" style={{ fontSize: '12px', fontWeight: 500 }}>Passwort</label>
<div className="relative">
<input
type={showPwd ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 pr-10 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 pr-10 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
placeholder="••••••••"
/>
<button
type="button"
onClick={() => setShowPwd(!showPwd)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-ink transition-colors"
tabIndex={-1}
>
{showPwd ? <EyeOff size={16} /> : <Eye size={16} />}
{showPwd ? <EyeOff size={15} /> : <Eye size={15} />}
</button>
</div>
</div>
@@ -66,9 +68,10 @@ export default function Login() {
<button
type="submit"
disabled={loading || !username || !password}
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-opacity"
style={{ fontSize: '13px' }}
>
{loading && <Loader2 size={16} className="animate-spin" />}
{loading && <Loader2 size={15} className="animate-spin" />}
Anmelden
</button>
</form>

60
frontend/src/pages/PodcastDetail.tsx
View File

@@ -1,9 +1,8 @@
import React, { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ArrowLeft, RefreshCw, Loader2, ExternalLink } from 'lucide-react'
import { ArrowLeft, RefreshCw, Loader2 } from 'lucide-react'
import api from '../api/client'
import CoverImage from '../components/common/CoverImage'
import { coverUrl } from '../api/items'
export default function PodcastDetail() {
const { id } = useParams<{ id: string }>()
@@ -50,58 +49,60 @@ export default function PodcastDetail() {
}
if (loading) return <div className="flex justify-center py-16"><Loader2 className="text-primary animate-spin" size={32} /></div>
if (!podcast) return <div className="p-6 text-gray-400">Nicht gefunden</div>
if (!podcast) return <div style={{ padding: '32px' }} className="text-muted">Nicht gefunden</div>
return (
<div className="p-6 max-w-3xl">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-gray-400 hover:text-white mb-6 text-sm">
<div style={{ padding: '32px 32px 24px' }} className="max-w-3xl">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-muted hover:text-ink mb-6 transition-colors" style={{ fontSize: '13px' }}>
<ArrowLeft size={16} /> Zurück
</button>
<div className="flex gap-6 mb-8">
<CoverImage src={podcast.cover} alt={podcast.title} className="w-40 h-40 rounded-xl flex-shrink-0 shadow-xl" />
<div className="w-40 h-40 rounded-xl overflow-hidden flex-shrink-0" style={{ borderRadius: '12px' }}>
<CoverImage src={podcast.cover} alt={podcast.title} className="w-full h-full" />
</div>
<div className="flex-1">
<h1 className="text-2xl font-bold text-white mb-1">{podcast.title}</h1>
{podcast.author && <p className="text-gray-400 mb-2">{podcast.author}</p>}
<p className="text-sm text-gray-500">{podcast.numEpisodes} Episoden</p>
<h1 className="text-ink font-semibold mb-1" style={{ fontSize: '22px', letterSpacing: '-0.5px' }}>{podcast.title}</h1>
{podcast.author && <p className="text-muted mb-2" style={{ fontSize: '14px' }}>{podcast.author}</p>}
<p className="text-muted" style={{ fontSize: '12px' }}>{podcast.numEpisodes} Episoden</p>
{podcast.feedLastChecked && (
<p className="text-xs text-gray-600 mt-1">
<p className="text-muted mt-1" style={{ fontSize: '11px' }}>
Zuletzt aktualisiert: {fmtDate(podcast.feedLastChecked)}
</p>
)}
<button onClick={handleUpdate} className="mt-3 flex items-center gap-2 bg-surface border border-white/10 px-3 py-1.5 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5">
<button onClick={handleUpdate} className="mt-3 flex items-center gap-2 bg-card border border-divider px-3 py-1.5 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 transition-colors">
<RefreshCw size={13} /> Feed aktualisieren
</button>
</div>
</div>
{podcast.description && (
<p className="text-gray-400 text-sm leading-relaxed mb-6">{podcast.description}</p>
<p className="text-muted leading-relaxed mb-6" style={{ fontSize: '13px' }}>{podcast.description}</p>
)}
{/* Feed URL */}
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-6">
<h3 className="text-sm font-semibold text-white mb-3">RSS-Feed</h3>
<div className="bg-surface border border-divider rounded-xl p-4 mb-6">
<h3 className="text-ink mb-3" style={{ fontSize: '13px', fontWeight: 600 }}>RSS-Feed</h3>
<div className="flex gap-2">
<input
type="url"
value={feedInput}
onChange={(e) => setFeedInput(e.target.value)}
placeholder="https://..."
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="flex-1 bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
/>
<button
onClick={handleSetFeed}
disabled={saving || !feedInput}
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
className="bg-primary text-black px-4 py-2 rounded-lg font-medium disabled:opacity-50"
style={{ fontSize: '13px' }}
>
{saving ? <Loader2 size={14} className="animate-spin" /> : 'Speichern'}
</button>
</div>
{/* Feed-Suche */}
<div className="mt-3 flex gap-2">
<input
type="text"
@@ -109,21 +110,22 @@ export default function PodcastDetail() {
onChange={(e) => setSearchQ(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearchFeed()}
placeholder="Podcast suchen..."
className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none"
className="flex-1 bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none transition-colors"
/>
<button onClick={handleSearchFeed} className="bg-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:bg-white/20">
<button onClick={handleSearchFeed} className="bg-card border border-divider px-3 py-2 rounded-lg text-muted hover:text-ink hover:bg-card/80 transition-colors" style={{ fontSize: '13px' }}>
Suchen
</button>
</div>
{searchResults.map((r, i) => (
<div key={i} className="flex items-center gap-3 mt-2 py-2 border-t border-white/5">
<div key={i} className="flex items-center gap-3 mt-2 py-2 border-t border-divider">
<div className="flex-1">
<p className="text-sm text-white">{r.title}</p>
<p className="text-xs text-gray-500">{r.author} · {r.trackCount} Episoden</p>
<p className="text-ink" style={{ fontSize: '13px' }}>{r.title}</p>
<p className="text-muted" style={{ fontSize: '11px' }}>{r.author} · {r.trackCount} Episoden</p>
</div>
<button
onClick={() => { setFeedInput(r.feedUrl); setSearchResults([]) }}
className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-lg hover:bg-primary/30"
className="bg-primary-dim text-primary px-3 py-1 rounded-lg hover:bg-primary hover:text-black transition-colors"
style={{ fontSize: '12px' }}
>
Verwenden
</button>
@@ -132,21 +134,21 @@ export default function PodcastDetail() {
</div>
{/* Episodes */}
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Episoden</h3>
<h3 className="text-muted uppercase tracking-wider mb-3" style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.12em' }}>Episoden</h3>
<div className="space-y-1">
{podcast.episodes?.map((ep: any) => (
<div key={ep.id} className="flex items-start gap-3 py-3 border-t border-white/5">
<div key={ep.id} className="flex items-start gap-3 py-3 border-t border-divider">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-white truncate">{ep.title || 'Unbekannte Episode'}</p>
<p className="text-ink truncate" style={{ fontSize: '13px', fontWeight: 500 }}>{ep.title || 'Unbekannte Episode'}</p>
<div className="flex items-center gap-3 mt-0.5">
{ep.pubDate && <span className="text-xs text-gray-500">{fmtDate(ep.pubDate)}</span>}
{ep.duration > 0 && <span className="text-xs text-gray-500">{fmtDur(ep.duration)}</span>}
{ep.pubDate && <span className="text-muted" style={{ fontSize: '11px' }}>{fmtDate(ep.pubDate)}</span>}
{ep.duration > 0 && <span className="text-muted" style={{ fontSize: '11px' }}>{fmtDur(ep.duration)}</span>}
</div>
</div>
</div>
))}
{(!podcast.episodes || podcast.episodes.length === 0) && (
<p className="text-gray-500 text-sm py-4">Keine Episoden. Feed konfigurieren und aktualisieren.</p>
<p className="text-muted py-4" style={{ fontSize: '13px' }}>Keine Episoden. Feed konfigurieren und aktualisieren.</p>
)}
</div>
</div>

27
frontend/src/pages/Setup.tsx
View File

@@ -31,40 +31,42 @@ export default function Setup({ onComplete }: Props) {
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-sm">
<div className="flex items-center justify-center gap-3 mb-3">
<BookOpen className="text-primary" size={32} />
<h1 className="text-3xl font-bold text-white">Audiolib</h1>
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
<BookOpen size={20} className="text-black" />
</div>
<h1 className="text-ink font-semibold" style={{ fontSize: '26px', letterSpacing: '-0.5px' }}>Audiolib</h1>
</div>
<p className="text-center text-gray-400 text-sm mb-8">Erster Start — Admin-Konto anlegen</p>
<p className="text-center text-muted mb-8" style={{ fontSize: '13px' }}>Erster Start — Admin-Konto anlegen</p>
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4">
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4 border border-divider">
<div>
<label className="block text-sm text-gray-400 mb-1">Benutzername</label>
<label className="block text-muted mb-1.5" style={{ fontSize: '12px', fontWeight: 500 }}>Benutzername</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
placeholder="admin"
autoFocus
/>
</div>
<div>
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
<label className="block text-muted mb-1.5" style={{ fontSize: '12px', fontWeight: 500 }}>Passwort</label>
<div className="relative">
<input
type={showPwd ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 pr-10 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
className="w-full bg-card border border-divider rounded-lg px-3 py-2 pr-10 text-sm text-ink placeholder-muted focus:outline-none focus:ring-1 focus:ring-primary transition-colors"
placeholder="••••••••"
/>
<button
type="button"
onClick={() => setShowPwd(!showPwd)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-ink transition-colors"
tabIndex={-1}
>
{showPwd ? <EyeOff size={16} /> : <Eye size={16} />}
{showPwd ? <EyeOff size={15} /> : <Eye size={15} />}
</button>
</div>
</div>
@@ -72,9 +74,10 @@ export default function Setup({ onComplete }: Props) {
<button
type="submit"
disabled={loading || !username || !password}
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-opacity"
style={{ fontSize: '13px' }}
>
{loading && <Loader2 size={16} className="animate-spin" />}
{loading && <Loader2 size={15} className="animate-spin" />}
Konto anlegen
</button>
</form>

21
frontend/tailwind.config.js
View File

@@ -5,9 +5,24 @@ export default {
theme: {
extend: {
colors: {
primary: '#1db954',
surface: '#1e1e2e',
background: '#13131f',
background: '#0a0d0b',
surface: '#111511',
card: '#161d17',
divider: '#1e2a1f',
primary: '#1ed760',
'primary-dim': '#155a2a',
ink: '#e4ede5',
muted: '#6a8c6d',
muted2: '#2e3f30',
c1: '#1a2e1c',
c2: '#1c1a2e',
c3: '#2e1a1a',
c4: '#1a2a2e',
c5: '#2a2e1a',
c6: '#2e2218',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},