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

Fix sidebar, add library editing, improve file browser

Browse Source 
- Sidebar: show Podcasts section only when podcast libraries exist;
  show hint text when no libraries are configured yet
- Admin: extract LibraryForm component, add edit (Pencil) button per
  library with inline form and PATCH support
- Backend: add media_type to LibraryUpdate schema and PATCH handler
- FileBrowser: add quick-access shortcuts (/audiofiles /data /media /),
  show all files+dirs so users can confirm correct folder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Audiolib
2026-05-26 14:42:35 +02:00
parent 1772c97dc8
commit 18d1481681
6 changed files with 172 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/app/routers/libraries.py
View File

@@ -172,6 +172,8 @@ async def update_library(
{"id": f.get("id", str(uuid.uuid4())), "fullPath": f.get("fullPath", f.get("full_path", ""))}
for f in body.folders
]
if body.media_type is not None:
lib.media_type = body.media_type
if body.settings is not None:
lib.settings = {**(lib.settings or {}), **body.settings}

1
backend/app/schemas/library.py
View File

@@ -55,6 +55,7 @@ class LibraryCreate(BaseModel):
class LibraryUpdate(BaseModel):
name: str | None = None
folders: list[dict] | None = None
media_type: str | None = None
settings: dict | None = None

3
frontend/src/api/libraries.ts
View File

@@ -17,5 +17,8 @@ export const scanLibrary = (libraryId: string) =>
export const createLibrary = (data: object) =>
api.post('/api/libraries', data).then((r) => r.data)
export const updateLibrary = (id: string, data: object) =>
api.patch(`/api/libraries/${id}`, data).then((r) => r.data)
export const deleteLibrary = (id: string) =>
api.delete(`/api/libraries/${id}`).then((r) => r.data)

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

@@ -49,6 +49,16 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
</button>
</div>
{/* Quick access */}
<div className="flex gap-1 px-3 py-2 border-b border-white/10 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'}`}>
{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">
{parent && (

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

@@ -6,6 +6,9 @@ import { useAuthStore } from '../../store/authStore'
export default function Sidebar() {
const { libraries, user, logout } = useAuthStore()
const bookLibraries = libraries.filter((l: any) => l.mediaType !== 'podcast')
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">
{/* Logo */}
@@ -14,10 +17,12 @@ export default function Sidebar() {
<span className="font-bold text-white text-lg">Audiolib</span>
</div>
{/* Libraries */}
<nav className="flex-1 overflow-y-auto p-2">
{/* Hörbücher-Libraries */}
{bookLibraries.length > 0 && (
<>
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Bibliotheken</p>
{libraries.map((lib: any) => (
{bookLibraries.map((lib: any) => (
<NavLink
key={lib.id}
to={`/library/${lib.id}`}
@@ -31,11 +36,17 @@ export default function Sidebar() {
{lib.name}
</NavLink>
))}
</>
)}
<div className="mt-4 border-t border-white/5 pt-2">
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Navigation</p>
{/* 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>
{podcastLibraries.map((lib: any) => (
<NavLink
to="/podcasts"
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'
@@ -43,9 +54,15 @@ export default function Sidebar() {
}
>
<Mic2 size={16} />
Podcasts
{lib.name}
</NavLink>
))}
</div>
)}
{libraries.length === 0 && (
<p className="text-xs text-gray-600 px-2 py-2">Noch keine Bibliotheken.<br />Im Admin-Bereich anlegen.</p>
)}
</nav>
{/* Footer */}

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

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import { Users, Library, Settings, Trash2, Plus, RefreshCw, Loader2, Check, X, FolderOpen } from 'lucide-react'
import { Users, Library, Settings, Trash2, Plus, RefreshCw, Loader2, Check, X, FolderOpen, Pencil } from 'lucide-react'
import { getUsers, createUser, deleteUser, getSettings, updateSettings } from '../api/me'
import { getLibraries, scanLibrary, createLibrary, deleteLibrary } from '../api/libraries'
import { getLibraries, scanLibrary, createLibrary, updateLibrary, deleteLibrary } from '../api/libraries'
import FileBrowser from '../components/common/FileBrowser'
type Tab = 'users' | 'libraries' | 'settings'
@@ -115,15 +115,74 @@ function UsersPanel() {
)
}
function LibraryForm({
initial, onSave, onCancel, title,
}: {
initial: { name: string; path: string; mediaType: string }
onSave: (v: { name: string; path: string; mediaType: string }) => Promise<void>
onCancel: () => void
title: string
}) {
const [form, setForm] = useState(initial)
const [showBrowser, setShowBrowser] = useState(false)
const [saving, setSaving] = useState(false)
const submit = async () => {
setSaving(true)
await onSave(form).finally(() => setSaving(false))
}
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>
<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"
/>
<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"
/>
<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">
<FolderOpen size={14} /> Durchsuchen
</button>
</div>
{showBrowser && (
<FileBrowser
initialPath={form.path || '/audiofiles'}
onSelect={(p) => setForm({ ...form, path: p })}
onClose={() => setShowBrowser(false)}
/>
)}
<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">
<option value="book">Hörbücher</option>
<option value="podcast">Podcasts</option>
</select>
<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">
{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">
Abbrechen
</button>
</div>
</div>
)
}
function LibrariesPanel() {
const [libraries, setLibraries] = useState<any[]>([])
const [loading, setLoading] = useState(true)
const [scanning, setScanning] = useState<string | null>(null)
const [showCreate, setShowCreate] = useState(false)
const [showBrowser, setShowBrowser] = useState(false)
const [form, setForm] = useState({ name: '', path: '', mediaType: 'book' })
const [editingId, setEditingId] = useState<string | null>(null)
useEffect(() => { getLibraries().then(setLibraries).finally(() => setLoading(false)) }, [])
const reload = () => getLibraries().then(setLibraries)
useEffect(() => { reload().finally(() => setLoading(false)) }, [])
const handleScan = async (id: string) => {
setScanning(id)
@@ -131,12 +190,16 @@ function LibrariesPanel() {
setTimeout(() => setScanning(null), 5000)
}
const handleCreate = async () => {
const handleCreate = async (form: { name: string; path: string; mediaType: string }) => {
await createLibrary({ name: form.name, folders: [{ fullPath: form.path }], media_type: form.mediaType })
const libs = await getLibraries()
setLibraries(libs)
await reload()
setShowCreate(false)
setForm({ name: '', path: '', mediaType: 'book' })
}
const handleUpdate = async (id: string, form: { name: string; path: string; mediaType: string }) => {
await updateLibrary(id, { name: form.name, folders: [{ fullPath: form.path }], media_type: form.mediaType })
await reload()
setEditingId(null)
}
const handleDelete = async (id: string) => {
@@ -149,76 +212,55 @@ function LibrariesPanel() {
<div>
<div className="flex items-center justify-between mb-4">
<p className="text-gray-400 text-sm">{libraries.length} Bibliotheken</p>
<button onClick={() => setShowCreate(!showCreate)}
<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">
<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">Neue Bibliothek</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"
<LibraryForm
title="Neue Bibliothek"
initial={{ name: '', path: '', mediaType: 'book' }}
onSave={handleCreate}
onCancel={() => setShowCreate(false)}
/>
<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"
/>
<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"
>
<FolderOpen size={14} />
Durchsuchen
</button>
</div>
{showBrowser && (
<FileBrowser
initialPath={form.path || '/'}
onSelect={(p) => setForm({ ...form, path: p })}
onClose={() => setShowBrowser(false)}
/>
)}
<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">
<option value="book">Hörbücher</option>
<option value="podcast">Podcasts</option>
</select>
<div className="flex gap-2">
<button onClick={handleCreate} disabled={!form.name || !form.path}
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
Anlegen
</button>
<button onClick={() => setShowCreate(false)} className="text-gray-400 px-4 py-2 rounded-lg text-sm hover:text-white">
Abbrechen
</button>
</div>
</div>
)}
{loading ? <Loader2 className="text-primary animate-spin" size={24} /> : (
<div className="space-y-2">
{libraries.map((lib: any) => (
<div key={lib.id} className="flex items-center gap-4 bg-surface px-4 py-3 rounded-lg">
<div className="flex-1">
<div key={lib.id}>
{editingId === lib.id ? (
<LibraryForm
title={`„${lib.name}" bearbeiten`}
initial={{ name: lib.name, path: lib.folders?.[0]?.fullPath || '', mediaType: lib.mediaType || 'book' }}
onSave={(form) => handleUpdate(lib.id, form)}
onCancel={() => setEditingId(null)}
/>
) : (
<div className="flex items-center gap-3 bg-surface px-4 py-3 rounded-lg">
<div className="flex-1 min-w-0">
<p className="text-sm text-white">{lib.name}</p>
<p className="text-xs text-gray-500">
{lib.folders?.[0]?.fullPath || ''} · {lib.mediaType}
<p className="text-xs text-gray-500 truncate">
{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">
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">
<RefreshCw size={12} className={scanning === lib.id ? 'animate-spin' : ''} />
Scan
</button>
<button onClick={() => handleDelete(lib.id)} className="text-gray-500 hover:text-red-400 p-1">
<button onClick={() => { setEditingId(lib.id); setShowCreate(false) }}
className="text-gray-500 hover:text-white p-1 flex-shrink-0">
<Pencil size={14} />
</button>
<button onClick={() => handleDelete(lib.id)} className="text-gray-500 hover:text-red-400 p-1 flex-shrink-0">
<Trash2 size={14} />
</button>
</div>
)}
</div>
))}
</div>
)}