feat(changelog): replace auto-modal with sidebar banner + /whats-new page

Removes the giant startup changelog modal. After an update, a compact
neutral-palette pill now sits above Now Playing in the sidebar saying
"Changelog — vX.Y.Z". Clicking opens a proper /whats-new page in the
main content area; X dismisses. Page renders the current version's
CHANGELOG entry with inline Markdown (headings, lists, blockquotes,
hr, bold/italic/code, and real [label](url) links that open via the
Tauri shell plugin).

Visual tokens are hardcoded slate/gray/blue so the banner and page look
identical across every theme (dark, light, skeuomorphic, whatever) —
requested for consistent contrast. Auto-mark-as-seen removed from the
page; the banner only goes away on explicit dismiss, so users can
re-read as often as they want.

Settings → About gains a "Release notes" row with a link that resets
the seen-version and opens the page, so the banner can be retriggered
manually (also helpful for dev builds ahead of the current tag).

The existing "Show changelog on update" toggle now gates the banner
instead of the modal; description strings updated in all 8 locales.

fix(themes): WCAG contrast audit — mocha + winmedplayer + wista

Mocha (Catppuccin dark)
  .track-size used --ctp-overlay0 directly (3.36:1 on bg-app, 2.57
  on bg-card). Swapped to --text-muted → 7.37 / 5.65. Fix also lifts
  macchiato/frappe/latte which shared the failure.

WinMedPlayer (Luna)
  --text-muted #b8d0f8 (3.87:1 on bg-app) → #e8f0ff (5.28)
  --border   #2a5090 (1.31 on bg-app)   → #071027 (3.12, meets 3:1 UI)

Wista (Vista Aero)
  Lyrics pane sits on bg-sidebar #0e1e3e but used --text-primary
  (#0d1d3c) for active lines — 1.01:1, literally invisible. Added
  component overrides: .lyrics-line / .lyrics-status / word-synced
  variants → #aac8f0 (9.60), .lyrics-line.active → #ffffff (16.48).
  Palette: --warning #c8980c → #735a00 (2.37 → 5.91 on bg-app),
  --text-muted #4870a8 → #3f6aa0 (4.23 → 4.65 on bg-card).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/pages/Settings.tsx

@@ -2445,6 +2445,18 @@ export default function Settings() {
                   <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>AI</span>
                   <span style={{ color: 'var(--text-secondary)' }}>{t('settings.aboutAiCredit')}</span>
                 </div>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                  <span style={{ color: 'var(--text-muted)', minWidth: 56 }}>{t('settings.aboutReleaseNotesLabel')}</span>
+                  <button
+                    onClick={() => {
+                      useAuthStore.getState().setLastSeenChangelogVersion('');
+                      navigate('/whats-new');
+                    }}
+                    style={{ color: 'var(--accent)', background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}
+                  >
+                    {t('settings.aboutReleaseNotesLink')}
+                  </button>
+                </div>
                 <div>
                   <button
                     style={{ display: 'flex', width: '100%', alignItems: 'center', gap: '0.5rem', background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}

src/pages/WhatsNew.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { Sparkles, X } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { version } from '../../package.json';
+import changelogRaw from '../../CHANGELOG.md?raw';
+import { renderChangelogBody } from '../utils/changelogMarkdown';
+
+export default function WhatsNew() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const close = () => {
+    if (window.history.length > 1) navigate(-1);
+    else navigate('/');
+  };
+
+  const entry = useMemo(() => {
+    const blocks = changelogRaw.split(/\n(?=## \[)/).filter((b: string) => b.startsWith('## ['));
+    const block = blocks.find((b: string) => b.startsWith(`## [${version}]`));
+    if (!block) return null;
+    const lines = block.split('\n');
+    const match = lines[0].match(/## \[([^\]]+)\](?:\s*-\s*(.+))?/);
+    const body = lines.slice(1).join('\n').trim();
+    return { version: match?.[1] ?? version, date: match?.[2] ?? '', body };
+  }, []);
+
+  return (
+    <div className="whats-new">
+      <header className="whats-new__header">
+        <div className="whats-new__title-row">
+          <Sparkles size={20} className="whats-new__icon" />
+          <div>
+            <h1 className="whats-new__title">{t('whatsNew.title')}</h1>
+            <div className="whats-new__subtitle">
+              v{entry?.version ?? version}
+              {entry?.date && <span className="whats-new__date"> · {entry.date}</span>}
+            </div>
+          </div>
+          <button
+            type="button"
+            className="whats-new__close"
+            onClick={close}
+            aria-label={t('whatsNew.close')}
+            data-tooltip={t('whatsNew.close')}
+            data-tooltip-pos="bottom"
+          >
+            <X size={18} />
+          </button>
+        </div>
+      </header>
+
+      <div className="whats-new__body">
+        {entry ? (
+          renderChangelogBody(entry.body)
+        ) : (
+          <p className="whats-new__empty">{t('whatsNew.empty')}</p>
+        )}
+      </div>
+    </div>
+  );
+}