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/components/Sidebar.tsx

@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
+import WhatsNewBanner from './WhatsNewBanner';
 import { getPlaylists } from '../api/subsonic';
 import { usePlaylistStore } from '../store/playlistStore';
 import { ALL_NAV_ITEMS } from '../config/navItems';
@@ -294,13 +295,18 @@ export default function Sidebar({
           )
         ))}
 
+        {/* Spacer: everything from here onward sticks to the bottom of the sidebar. */}
+        <div className="sidebar-bottom-spacer" />
+
+        {/* What's New banner — only visible while the current release hasn't been seen. */}
+        <WhatsNewBanner collapsed={isCollapsed} />
+
         {/* Now Playing — fixed, always visible */}
         <NavLink
           to="/now-playing"
           className={({ isActive }) => `nav-link nav-link-nowplaying ${isActive ? 'active' : ''}`}
           data-tooltip={isCollapsed ? t('sidebar.nowPlaying') : undefined}
           data-tooltip-pos="bottom"
-          style={{ marginTop: 'auto' }}
         >
           <span className="nav-np-icon-wrap">
             <AudioLines size={isCollapsed ? 22 : 18} />

src/components/WhatsNewBanner.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sparkles, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { version } from '../../package.json';
+import { useAuthStore } from '../store/authStore';
+
+interface Props {
+  collapsed?: boolean;
+}
+
+/**
+ * Sidebar pill shown above Now Playing while the current app version hasn't
+ * been opened yet. Clicking opens the What's New page; X dismisses.
+ *
+ * Uses a fixed neutral palette so it looks identical across every theme.
+ */
+export default function WhatsNewBanner({ collapsed }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const lastSeen = useAuthStore(s => s.lastSeenChangelogVersion);
+  const setLastSeen = useAuthStore(s => s.setLastSeenChangelogVersion);
+  const showOnUpdate = useAuthStore(s => s.showChangelogOnUpdate);
+
+  if (!showOnUpdate || lastSeen === version) return null;
+
+  const dismiss = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLastSeen(version);
+  };
+
+  const open = () => navigate('/whats-new');
+
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="whats-new-banner whats-new-banner--collapsed"
+        onClick={open}
+        data-tooltip={t('whatsNew.bannerCollapsed', { version })}
+        data-tooltip-pos="bottom"
+      >
+        <Sparkles size={16} />
+      </button>
+    );
+  }
+
+  return (
+    <button type="button" className="whats-new-banner" onClick={open}>
+      <Sparkles size={14} className="whats-new-banner__icon" />
+      <span className="whats-new-banner__text">
+        <span className="whats-new-banner__title">{t('whatsNew.bannerTitle')}</span>
+        <span className="whats-new-banner__version">v{version}</span>
+      </span>
+      <span
+        className="whats-new-banner__dismiss"
+        role="button"
+        aria-label={t('whatsNew.dismiss')}
+        onClick={dismiss}
+      >
+        <X size={12} />
+      </span>
+    </button>
+  );
+}