From 106fbf54bf7f2684f2086ad1acbba40d1b542812 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Sun, 7 Jun 2026 20:59:10 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20reorder=20settings=20sections=20?=
 =?UTF-8?q?=E2=80=94=20important=20ones=20first,=20login=20last?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Theme → Bibliothek (+ Romaji) → Audiobookshelf → Discover APIs → Navidrome Server
Also merged the standalone Romaji Korrekturen row into the Bibliothek section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 104 ++++++++++++++++++++++++++---------------------------
 1 file changed, 50 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index 684ab57..ca29a87 100644
--- a/index.html
+++ b/index.html
@@ -586,37 +586,41 @@
     <div style="flex:1;overflow-y:auto;padding:18px 24px 8px">
       <div class="settings-section">
         <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-          <span style="width:24px;height:24px;border-radius:6px;background:var(--blue-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🌐</span>
-          Navidrome Server
+          <span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🎨</span>
+          Theme
         </h3>
-        <div class="field"><label>Server URL</label><input id="s-url" type="url" placeholder="https://music.example.com"></div>
-        <div class="field"><label>Benutzername</label><input id="s-user" type="text" placeholder="admin"></div>
-        <div class="field"><label>Passwort</label><input id="s-pass" type="password" placeholder="(unverändert lassen)"></div>
+        <div id="theme-picker" class="theme-picker"></div>
+        <div class="edit-pl-toggle-row" style="margin-top:14px">
+          <span>Einfarbiger Player-Hintergrund</span>
+          <div id="s-cover-color-bg" class="toggle" onclick="this.classList.toggle('on')"></div>
+        </div>
       </div>
       <div class="settings-section">
         <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-          <span style="width:24px;height:24px;border-radius:6px;background:var(--accent-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🔑</span>
-          Discover APIs
+          <span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📊</span>
+          Bibliothek
         </h3>
-        <div class="field">
-          <label>Last.fm API Key</label>
-          <input id="s-lastfm" type="text" placeholder="Für Künstler-Infos & Empfehlungen">
-          <div class="hint">Kostenlos unter last.fm/api/account/create</div>
+        <div class="edit-pl-toggle-row">
+          <span>Abspielhäufigkeit anzeigen</span>
+          <div id="s-show-playcount" class="toggle" onclick="this.classList.toggle('on')"></div>
         </div>
-        <div class="field">
-          <label>NovaSonic Backend URL</label>
-          <input id="s-backend" type="url" placeholder="http://192.168.x.x:3700">
-          <div class="hint">Für Download-to-Server via yt-dlp</div>
+        <div class="edit-pl-toggle-row" style="margin-top:12px">
+          <span>Romaji anzeigen</span>
+          <div id="s-show-romaji" class="toggle" onclick="this.classList.toggle('on')"></div>
         </div>
-        <div class="settings-row" style="margin-top:8px;border-radius:9px">
-          <div>
-            <div style="font-size:13px;font-weight:500">Backend Status</div>
-            <div class="hint" id="backend-status-text">Nicht verbunden</div>
-          </div>
-          <div style="display:flex;align-items:center;gap:8px">
-            <div class="status-dot" id="backend-status-dot"></div>
-            <button class="btn-outline" style="padding:6px 12px;font-size:12px" onclick="checkBackend()">Testen</button>
-          </div>
+        <div class="edit-pl-toggle-row" style="margin-top:12px">
+          <span>Scrobble senden nach</span>
+          <select id="s-scrobble-mode" style="background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:var(--font);font-size:13px;cursor:pointer">
+            <option value="15s">15 Sekunden</option>
+            <option value="30s">30 Sekunden</option>
+            <option value="1/3">1/3 der Song-Dauer</option>
+            <option value="2/3">2/3 der Song-Dauer</option>
+            <option value="end">Song-Ende</option>
+          </select>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-top:14px">
+          <div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
+          <button onclick="openRomajiOverridesModal()" class="btn-outline" style="padding:7px 14px;font-size:13px;font-weight:600;flex-shrink:0">Liste öffnen</button>
         </div>
       </div>
       <div class="settings-section">
@@ -650,46 +654,38 @@
       </div>
       <div class="settings-section">
         <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-          <span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📊</span>
-          Bibliothek
+          <span style="width:24px;height:24px;border-radius:6px;background:var(--accent-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🔑</span>
+          Discover APIs
         </h3>
-        <div class="edit-pl-toggle-row">
-          <span>Abspielhäufigkeit anzeigen</span>
-          <div id="s-show-playcount" class="toggle" onclick="this.classList.toggle('on')"></div>
+        <div class="field">
+          <label>Last.fm API Key</label>
+          <input id="s-lastfm" type="text" placeholder="Für Künstler-Infos & Empfehlungen">
+          <div class="hint">Kostenlos unter last.fm/api/account/create</div>
         </div>
-        <div class="edit-pl-toggle-row" style="margin-top:12px">
-          <span>Romaji anzeigen</span>
-          <div id="s-show-romaji" class="toggle" onclick="this.classList.toggle('on')"></div>
+        <div class="field">
+          <label>NovaSonic Backend URL</label>
+          <input id="s-backend" type="url" placeholder="http://192.168.x.x:3700">
+          <div class="hint">Für Download-to-Server via yt-dlp</div>
         </div>
-        <div class="edit-pl-toggle-row" style="margin-top:12px">
-          <span>Scrobble senden nach</span>
-          <select id="s-scrobble-mode" style="background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:var(--font);font-size:13px;cursor:pointer">
-            <option value="15s">15 Sekunden</option>
-            <option value="30s">30 Sekunden</option>
-            <option value="1/3">1/3 der Song-Dauer</option>
-            <option value="2/3">2/3 der Song-Dauer</option>
-            <option value="end">Song-Ende</option>
-          </select>
-        </div>
-      </div>
-      <div class="settings-section">
-        <div style="display:flex;align-items:center;justify-content:space-between">
+        <div class="settings-row" style="margin-top:8px;border-radius:9px">
           <div>
-            <div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
+            <div style="font-size:13px;font-weight:500">Backend Status</div>
+            <div class="hint" id="backend-status-text">Nicht verbunden</div>
+          </div>
+          <div style="display:flex;align-items:center;gap:8px">
+            <div class="status-dot" id="backend-status-dot"></div>
+            <button class="btn-outline" style="padding:6px 12px;font-size:12px" onclick="checkBackend()">Testen</button>
           </div>
-          <button onclick="openRomajiOverridesModal()" class="btn-outline" style="padding:7px 14px;font-size:13px;font-weight:600;flex-shrink:0">Liste öffnen</button>
         </div>
       </div>
       <div class="settings-section">
         <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
-          <span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🎨</span>
-          Theme
+          <span style="width:24px;height:24px;border-radius:6px;background:var(--blue-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🌐</span>
+          Navidrome Server
         </h3>
-        <div id="theme-picker" class="theme-picker"></div>
-        <div class="edit-pl-toggle-row" style="margin-top:14px">
-          <span>Einfarbiger Player-Hintergrund</span>
-          <div id="s-cover-color-bg" class="toggle" onclick="this.classList.toggle('on')"></div>
-        </div>
+        <div class="field"><label>Server URL</label><input id="s-url" type="url" placeholder="https://music.example.com"></div>
+        <div class="field"><label>Benutzername</label><input id="s-user" type="text" placeholder="admin"></div>
+        <div class="field"><label>Passwort</label><input id="s-pass" type="password" placeholder="(unverändert lassen)"></div>
       </div>
     </div>
     <!-- Sticky footer -->