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 { 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'
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 } })
setPath(r.data.path)
setParent(r.data.parent)
setEntries(r.data.entries.filter((e: Entry) => e.isDir))
setEntries(r.data.entries)
} catch (err: any) {
setError(err.response?.data?.detail || 'Fehler beim Laden')
} finally {
@@ -68,19 +68,29 @@ export default function FileBrowser({ initialPath = '/', onSelect, onClose }: Pr
) : error ? (
<p className="text-red-400 text-sm px-4 py-6">{error}</p>
) : 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) => (
<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"
>
<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" />
</button>
))
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"
>
<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" />
</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>