refactor: move romaji overrides into dedicated modal, fix placeholders

index.html

@@ -658,17 +658,12 @@
         </div>
       </div>
       <div class="settings-section">
-        <h3 style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
-          <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>
-          Romaji Korrekturen
-        </h3>
-        <div class="hint" style="margin-bottom:10px">Kanji → korrektes Romaji. Wird in Sort-Tags automatisch übernommen.</div>
-        <div id="romaji-overrides-list" style="display:flex;flex-direction:column;gap:5px;margin-bottom:10px"></div>
-        <div style="display:flex;gap:6px;align-items:center">
-          <input id="ro-kanji"  placeholder="照井順政" style="flex:1;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
-          <span style="color:var(--text2);flex-shrink:0">→</span>
-          <input id="ro-romaji" placeholder="Terui Yoshimasa" style="flex:1.2;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
-          <button onclick="addRomajiOverrideUI()" style="flex-shrink:0;padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer">+</button>
+        <div style="display:flex;align-items:center;justify-content:space-between">
+          <div>
+            <div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
+            <div class="hint">Kanji → korrektes Romaji für Sort-Tags</div>
+          </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">
@@ -694,6 +689,26 @@
   </div>
 </div>
 
+<!-- ROMAJI OVERRIDES MODAL -->
+<div class="modal-overlay" id="romaji-overrides-modal">
+  <div class="modal" style="padding:0;display:flex;flex-direction:column;max-height:80vh;width:min(460px,calc(100vw - 32px))">
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0">
+      <div style="font-size:16px;font-weight:700">Romaji Korrekturen</div>
+      <button onclick="closeRomajiOverridesModal()" style="background:var(--surface2);border:none;color:var(--text2);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center">✕</button>
+    </div>
+    <div style="flex:1;overflow-y:auto;padding:14px 20px">
+      <div class="hint" style="margin-bottom:12px">Kanji → korrektes Romaji. Wird beim Öffnen des Edit-Dialogs und bei Downloads automatisch in die Sort-Tags übernommen.</div>
+      <div id="romaji-overrides-list" style="display:flex;flex-direction:column;gap:5px;margin-bottom:14px"></div>
+      <div style="display:flex;gap:6px;align-items:center">
+        <input id="ro-kanji"  placeholder="米津玄師" style="flex:1;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
+        <span style="color:var(--text2);flex-shrink:0">→</span>
+        <input id="ro-romaji" placeholder="Yonezu Kenshi" style="flex:1.2;padding:8px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font);font-size:13px;outline:none" onkeydown="if(event.key==='Enter')addRomajiOverrideUI()">
+        <button onclick="addRomajiOverrideUI()" style="flex-shrink:0;padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer">+</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- JOB PANEL -->
 <div class="jobs-panel" id="jobs-panel"></div>
 

src/main.js

@@ -47,6 +47,7 @@ import {
   _pickTheme,
   toggleInfoEdit, onInfoArtFile, autofillMusicBrainz, autofillItunes, saveMetadata, deleteSong,
   addRomajiOverrideUI, removeRomajiOverrideUI,
+  openRomajiOverridesModal, closeRomajiOverridesModal,
 } from './ui.js';
 
 // ─── CONNECT ───
@@ -325,6 +326,7 @@ Object.assign(window, {
   toggleMobileSearch, closeMobileSearch, switchSetupTab,
   toggleNotifPanel, deleteNotif, clearNotifs, _notifNavigate, _pickTheme,
   addRomajiOverrideUI, removeRomajiOverrideUI,
+  openRomajiOverridesModal, closeRomajiOverridesModal,
   // App
   doConnect, disconnect,
   // Audiobookshelf

src/ui.js

@@ -51,7 +51,6 @@ export function openSettings() {
   document.getElementById('s-show-romaji').classList.toggle('on', !!S.cfg.showRomaji);
   document.getElementById('s-cover-color-bg').classList.toggle('on', !!S.cfg.coverColorBg);
   _renderThemePicker();
-  _renderRomajiOverrides();
   document.getElementById('settings-modal').classList.add('open');
   checkBackend();
 }
@@ -116,6 +115,13 @@ export function removeRomajiOverrideUI(kanji) {
   removeRomajiOverride(kanji);
   _renderRomajiOverrides();
 }
+export function openRomajiOverridesModal() {
+  _renderRomajiOverrides();
+  document.getElementById('romaji-overrides-modal').classList.add('open');
+}
+export function closeRomajiOverridesModal() {
+  document.getElementById('romaji-overrides-modal').classList.remove('open');
+}
 
 export function closeSettings() { document.getElementById('settings-modal').classList.remove('open'); }
 export async function confirmDisconnect() {