feat: romaji override list — manual kanji→romaji corrections for sort tags

Adds a maintained list in Settings where you can map kanji artist/album/title
strings to their correct romaji reading (e.g. 照井順政 → Terui Yoshimasa).
Overrides are applied last (highest priority) when the edit-metadata modal
opens, so saving the song writes the correct sort tags permanently to the file.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/ui.js

@@ -1,6 +1,6 @@
 import { S } from './state.js';
 import { esc, formatDur, toast } from './utils.js';
-import { api, coverUrl, ndAuth, fetchRomajiIndex, romajiConvert, romajiLookup, invalidateRomajiIndex, invalidateCoverCache } from './api.js';
+import { api, coverUrl, ndAuth, fetchRomajiIndex, romajiConvert, romajiLookup, invalidateRomajiIndex, invalidateCoverCache, getRomajiOverrides, setRomajiOverride, removeRomajiOverride } from './api.js';
 import { THEMES, applyTheme, getCurrentThemeId } from './themes.js';
 // Circular imports — safe (only used inside function bodies)
 import { playQueue, dlSongLocal, toggleStar, togglePlay, renderQueue, syncNpStar, updateStarBtn, npToggleStar, playCurrent, _syncNpDirect, setPlayIcon, nativeInsertAt, refreshDisplayMode, updateNpColorMode } from './player.js';
@@ -51,6 +51,7 @@ 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();
 }
@@ -70,6 +71,38 @@ export function _pickTheme(id) {
   applyTheme(id);
   _renderThemePicker();
 }
+
+function _renderRomajiOverrides() {
+  const list = document.getElementById('romaji-overrides-list');
+  if (!list) return;
+  const entries = Object.entries(getRomajiOverrides());
+  if (!entries.length) {
+    list.innerHTML = '<div style="color:var(--text2);font-size:13px;padding:4px 0">Keine Korrekturen vorhanden</div>';
+    return;
+  }
+  list.innerHTML = entries.map(([k, v]) =>
+    `<div style="display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg2);border-radius:8px">
+      <span style="flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(k)}</span>
+      <span style="color:var(--text2);flex-shrink:0">→</span>
+      <span style="flex:1.2;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(v)}</span>
+      <button onclick="removeRomajiOverrideUI(${JSON.stringify(k)})" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;flex-shrink:0">×</button>
+    </div>`
+  ).join('');
+}
+export function addRomajiOverrideUI() {
+  const k = (document.getElementById('ro-kanji')?.value  || '').trim();
+  const v = (document.getElementById('ro-romaji')?.value || '').trim();
+  if (!k || !v) { toast('⚠ Kanji und Romaji eingeben'); return; }
+  setRomajiOverride(k, v);
+  document.getElementById('ro-kanji').value  = '';
+  document.getElementById('ro-romaji').value = '';
+  _renderRomajiOverrides();
+}
+export function removeRomajiOverrideUI(kanji) {
+  removeRomajiOverride(kanji);
+  _renderRomajiOverrides();
+}
+
 export function closeSettings() { document.getElementById('settings-modal').classList.remove('open'); }
 export async function confirmDisconnect() {
   const ok = await showConfirm('Abmelden', 'Wirklich abmelden? Alle lokalen Einstellungen werden gelöscht.', 'Abmelden');
@@ -369,14 +402,21 @@ export function toggleInfoEdit() {
     const p = new URLSearchParams({ ndUrl: S.cfg.url, user: S.cfg.user, pass: S.cfg.pass, songId: _sId });
     return fetch(`${S.cfg.backendUrl}/api/song-sorttags?${p}`).then(r => r.ok ? r.json() : null).catch(() => null);
   }).then(t => {
-    if (!t) return;
-    const _jp = /[ぁ-んァ-ン一-龯]/;
-    // Only use file sort tags if they are non-Japanese (romaji/ASCII) — Japanese sort tags
-    // in the file are incorrect and should be ignored in favour of the romaji index value.
-    if (t.titleSort       && !_jp.test(t.titleSort))       document.getElementById('ie-titlesort').value       = t.titleSort;
-    if (t.artistSort      && !_jp.test(t.artistSort))      document.getElementById('ie-artistsort').value      = t.artistSort;
-    if (t.albumArtistSort && !_jp.test(t.albumArtistSort)) document.getElementById('ie-albumartistsort').value = t.albumArtistSort;
-    if (t.albumSort       && !_jp.test(t.albumSort))       document.getElementById('ie-albumsort').value       = t.albumSort;
+    if (t) {
+      const _jp = /[ぁ-んァ-ン一-龯]/;
+      // Only use file sort tags if they are non-Japanese (romaji/ASCII) — Japanese sort tags
+      // in the file are incorrect and should be ignored in favour of the romaji index value.
+      if (t.titleSort       && !_jp.test(t.titleSort))       document.getElementById('ie-titlesort').value       = t.titleSort;
+      if (t.artistSort      && !_jp.test(t.artistSort))      document.getElementById('ie-artistsort').value      = t.artistSort;
+      if (t.albumArtistSort && !_jp.test(t.albumArtistSort)) document.getElementById('ie-albumartistsort').value = t.albumArtistSort;
+      if (t.albumSort       && !_jp.test(t.albumSort))       document.getElementById('ie-albumsort').value       = t.albumSort;
+    }
+    // Manual overrides — highest priority, always applied last.
+    const ov = getRomajiOverrides();
+    if (s.artist     && ov[s.artist])     { document.getElementById('ie-artistsort').value      = ov[s.artist]; document.getElementById('ie-albumartistsort').value = ov[s.artist]; }
+    if (s.albumArtist && ov[s.albumArtist]) document.getElementById('ie-albumartistsort').value = ov[s.albumArtist];
+    if (s.title      && ov[s.title])       document.getElementById('ie-titlesort').value        = ov[s.title];
+    if (s.album      && ov[s.album])       document.getElementById('ie-albumsort').value        = ov[s.album];
   }).catch(() => {});
 
   // Art preview — use existing cover