Fix sidebar, add library editing, improve file browser

- 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>

backend/app/routers/libraries.py

@@ -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}
 

backend/app/schemas/library.py

@@ -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
 
 

frontend/src/api/libraries.ts

@@ -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)

frontend/src/components/common/FileBrowser.tsx

@@ -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 && (

frontend/src/components/common/Sidebar.tsx

@@ -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,38 +17,52 @@ 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">
-        <p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Bibliotheken</p>
+        {/* Hörbücher-Libraries */}
-        {libraries.map((lib: any) => (
+        {bookLibraries.length > 0 && (
-          <NavLink
+          <>
-            key={lib.id}
+            <p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Bibliotheken</p>
-            to={`/library/${lib.id}`}
+            {bookLibraries.map((lib: any) => (
-            className={({ isActive }) =>
+              <NavLink
-              `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                key={lib.id}
-                isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
+                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>
+              >
-        ))}
+                <Library size={16} />
+                {lib.name}
+              </NavLink>
+            ))}
+          </>
+        )}
 
-        <div className="mt-4 border-t border-white/5 pt-2">
+        {/* Podcast-Libraries */}
-          <p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Navigation</p>
+        {podcastLibraries.length > 0 && (
-          <NavLink
+          <div className={bookLibraries.length > 0 ? 'mt-4 border-t border-white/5 pt-2' : ''}>
-            to="/podcasts"
+            <p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Podcasts</p>
-            className={({ isActive }) =>
+            {podcastLibraries.map((lib: any) => (
-              `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+              <NavLink
-                isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
+                key={lib.id}
-              }`
+                to={`/library/${lib.id}`}
-            }
+                className={({ isActive }) =>
-          >
+                  `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
-            <Mic2 size={16} />
+                    isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
-            Podcasts
+                  }`
-          </NavLink>
+                }
-        </div>
+              >
+                <Mic2 size={16} />
+                {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 */}

frontend/src/pages/Admin.tsx

@@ -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 [editingId, setEditingId] = useState<string | null>(null)
-  const [form, setForm] = useState({ name: '', path: '', mediaType: 'book' })
 
-  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()
+    await reload()
-    setLibraries(libs)
     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,75 +212,54 @@ 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">
+        <LibraryForm
-          <h3 className="text-sm font-semibold text-white">Neue Bibliothek</h3>
+          title="Neue Bibliothek"
-          <input type="text" placeholder="Name (z.B. Hörbücher)"
+          initial={{ name: '', path: '', mediaType: 'book' }}
-            value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
+          onSave={handleCreate}
-            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"
+          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 key={lib.id}>
-              <div className="flex-1">
+              {editingId === lib.id ? (
-                <p className="text-sm text-white">{lib.name}</p>
+                <LibraryForm
-                <p className="text-xs text-gray-500">
+                  title={`„${lib.name}" bearbeiten`}
-                  {lib.folders?.[0]?.fullPath || ''} · {lib.mediaType}
+                  initial={{ name: lib.name, path: lib.folders?.[0]?.fullPath || '', mediaType: lib.mediaType || 'book' }}
-                </p>
+                  onSave={(form) => handleUpdate(lib.id, form)}
-              </div>
+                  onCancel={() => setEditingId(null)}
-              <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">
+              ) : (
-                <RefreshCw size={12} className={scanning === lib.id ? 'animate-spin' : ''} />
+                <div className="flex items-center gap-3 bg-surface px-4 py-3 rounded-lg">
-                Scan
+                  <div className="flex-1 min-w-0">
-              </button>
+                    <p className="text-sm text-white">{lib.name}</p>
-              <button onClick={() => handleDelete(lib.id)} className="text-gray-500 hover:text-red-400 p-1">
+                    <p className="text-xs text-gray-500 truncate">
-                <Trash2 size={14} />
+                      {lib.folders?.[0]?.fullPath || ''} · {lib.mediaType === 'podcast' ? 'Podcast' : 'Hörbücher'}
-              </button>
+                    </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">
+                    <RefreshCw size={12} className={scanning === lib.id ? 'animate-spin' : ''} />
+                    Scan
+                  </button>
+                  <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>