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

Fix toggle positioning and show files in FileBrowser

Browse Source 
- Toggle: add left-0.5 anchor so translate works correctly
- FileBrowser: show files (grayed out) alongside dirs so users can
  confirm they are in the right folder before selecting it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Audiolib
2026-05-26 14:34:27 +02:00
parent 464b47fb9c
commit 1772c97dc8
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Folder, ChevronRight, ChevronUp, X, Check, Loader2 } from 'lucide-react' import { Folder, ChevronRight, ChevronUp, X, Check, Loader2, FileAudio } from 'lucide-react'
import api from '../../api/client' import api from '../../api/client'
interface Entry { name: string; path: string; isDir: boolean } interface Entry { name: string; path: string; isDir: boolean }
@@ -24,7 +24,7 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
const r = await api.get('/api/filebrowser', { params: { path: p } }) const r = await api.get('/api/filebrowser', { params: { path: p } })
setPath(r.data.path) setPath(r.data.path)
setParent(r.data.parent) setParent(r.data.parent)
setEntries(r.data.entries.filter((e: Entry) => e.isDir)) setEntries(r.data.entries)
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.detail || 'Fehler beim Laden') setError(err.response?.data?.detail || 'Fehler beim Laden')
} finally { } finally {
@@ -68,19 +68,29 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
) : error ? ( ) : error ? (
<p className="text-red-400 text-sm px-4 py-6">{error}</p> <p className="text-red-400 text-sm px-4 py-6">{error}</p>
) : entries.length === 0 ? ( ) : entries.length === 0 ? (
<p className="text-gray-500 text-sm px-4 py-6">Keine Unterordner</p> <p className="text-gray-500 text-sm px-4 py-6">Ordner ist leer</p>
) : ( ) : (
entries.map((e) => ( entries.map((e) =>
<button e.isDir ? (
key={e.path} <button
onClick={() => load(e.path)} key={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" 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"
<Folder size={16} className="text-yellow-500 flex-shrink-0" /> >
<span className="flex-1 truncate">{e.name}</span> <Folder size={16} className="text-yellow-500 flex-shrink-0" />
<ChevronRight size={14} className="flex-shrink-0 text-gray-600" /> <span className="flex-1 truncate">{e.name}</span>
</button> <ChevronRight size={14} className="flex-shrink-0 text-gray-600" />
)) </button>
) : (
<div
key={e.path}
className="flex items-center gap-3 px-4 py-2 text-gray-600 text-sm"
>
<FileAudio size={14} className="flex-shrink-0" />
<span className="truncate">{e.name}</span>
</div>
)
)
)} )}
</div> </div>

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

@@ -247,7 +247,7 @@ function SettingsPanel() {
onClick={() => save(key, !settings[key])} 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-white/20'}`}
> >
<span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${settings[key] ? 'translate-x-5' : 'translate-x-0.5'}`} /> <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> </button>
) )