From 1772c97dc80a09878ee4e3cd613a68c8abfca64b Mon Sep 17 00:00:00 2001
From: Audiolib <audiolib@setup>
Date: Tue, 26 May 2026 14:34:27 +0200
Subject: [PATCH] Fix toggle positioning and show files in FileBrowser

- 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>
---
 .../src/components/common/FileBrowser.tsx     | 38 ++++++++++++-------
 frontend/src/pages/Admin.tsx                  |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/common/FileBrowser.tsx b/frontend/src/components/common/FileBrowser.tsx
index b4677dc..cddb9d4 100644
--- a/frontend/src/components/common/FileBrowser.tsx
+++ b/frontend/src/components/common/FileBrowser.tsx
@@ -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>
 
diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
index fa4d3e6..686533b 100644
--- a/frontend/src/pages/Admin.tsx
+++ b/frontend/src/pages/Admin.tsx
@@ -247,7 +247,7 @@ function SettingsPanel() {
       onClick={() => save(key, !settings[key])}
       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>
   )