feat: v1.21.0 — What's New Modal, 3 New Themes (Beta), Artist Column, Powerslave Blue

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

src/components/AlbumTrackList.tsx

@@ -93,10 +93,10 @@ export default function AlbumTrackList({
 
   return (
     <div className="tracklist">
-      <div className={`tracklist-header${hasVariousArtists ? ' tracklist-va' : ''}`}>
+      <div className={`tracklist-header${' tracklist-va'}`}>
         <div className="col-center">#</div>
         <div>{t('albumDetail.trackTitle')}</div>
-        {hasVariousArtists && <div>{t('albumDetail.trackArtist')}</div>}
+        <div>{t('albumDetail.trackArtist')}</div>
         <div className="col-center">{t('albumDetail.trackFavorite')}</div>
         <div className="col-center">{t('albumDetail.trackRating')}</div>
         <div className="col-center">{t('albumDetail.trackDuration')}</div>
@@ -114,7 +114,7 @@ export default function AlbumTrackList({
           {discs.get(discNum)!.map((song, i) => (
             <div
               key={song.id}
-              className={`track-row${hasVariousArtists ? ' track-row-va' : ''}${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
+              className={`track-row track-row-va${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
               onMouseEnter={() => setHoveredSongId(song.id)}
               onMouseLeave={() => setHoveredSongId(null)}
               onDoubleClick={() => onPlaySong(song)}
@@ -149,11 +149,9 @@ export default function AlbumTrackList({
               <div className="track-info">
                 <span className="track-title">{song.title}</span>
               </div>
-              {hasVariousArtists && (
-                <div className="track-artist-cell">
-                  <span className="track-artist">{song.artist}</span>
-                </div>
-              )}
+              <div className="track-artist-cell">
+                <span className="track-artist">{song.artist}</span>
+              </div>
               <div className="track-star-cell">
                 <button
                   className="btn btn-ghost track-star-btn"
@@ -181,7 +179,7 @@ export default function AlbumTrackList({
         </div>
       ))}
 
-      <div className={`tracklist-total${hasVariousArtists ? ' tracklist-va' : ''}`}>
+      <div className={`tracklist-total${' tracklist-va'}`}>
         <span className="tracklist-total-label">{t('albumDetail.trackTotal')}</span>
         <span className="tracklist-total-value">{formatDuration(totalDuration)}</span>
       </div>

src/components/ChangelogModal.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Sparkles } from 'lucide-react';
+import { version } from '../../package.json';
+import changelogRaw from '../../CHANGELOG.md?raw';
+import { useAuthStore } from '../store/authStore';
+
+function renderInline(text: string): React.ReactNode[] {
+  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**'))
+      return <strong key={i}>{part.slice(2, -2)}</strong>;
+    if (part.startsWith('*') && part.endsWith('*'))
+      return <em key={i}>{part.slice(1, -1)}</em>;
+    if (part.startsWith('`') && part.endsWith('`'))
+      return <code key={i} className="changelog-code">{part.slice(1, -1)}</code>;
+    return part;
+  });
+}
+
+interface Props {
+  onClose: () => void;
+}
+
+export default function ChangelogModal({ onClose }: Props) {
+  const { t } = useTranslation();
+  const [dontShow, setDontShow] = useState(false);
+  const setShowChangelogOnUpdate = useAuthStore(s => s.setShowChangelogOnUpdate);
+  const setLastSeenChangelogVersion = useAuthStore(s => s.setLastSeenChangelogVersion);
+
+  const currentVersionData = 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 };
+  }, []);
+
+  const handleClose = () => {
+    if (dontShow) setShowChangelogOnUpdate(false);
+    setLastSeenChangelogVersion(version);
+    onClose();
+  };
+
+  if (!currentVersionData) return null;
+
+  return createPortal(
+    <>
+      <div className="eq-popup-backdrop" onClick={handleClose} style={{ zIndex: 300 }} />
+      <div
+        className="eq-popup"
+        style={{ zIndex: 301, width: 'min(580px, 92vw)', gap: 0, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div className="eq-popup-header" style={{ flexShrink: 0 }}>
+          <span className="eq-popup-title" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Sparkles size={16} style={{ color: 'var(--accent)' }} />
+            {t('changelog.modalTitle')} — v{version}
+          </span>
+          {currentVersionData.date && (
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>
+              {currentVersionData.date}
+            </span>
+          )}
+        </div>
+
+        <div style={{ overflowY: 'auto', padding: '12px 20px', flex: 1 }}>
+          {currentVersionData.body.split('\n').map((line, i) => {
+            if (line.startsWith('### '))
+              return <div key={i} className="changelog-h3">{renderInline(line.slice(4))}</div>;
+            if (line.startsWith('#### '))
+              return <div key={i} className="changelog-h4">{renderInline(line.slice(5))}</div>;
+            if (line.startsWith('- '))
+              return <div key={i} className="changelog-item">{renderInline(line.slice(2))}</div>;
+            if (line.trim() === '') return null;
+            return <div key={i} className="changelog-text">{renderInline(line)}</div>;
+          })}
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '12px 20px',
+            borderTop: '1px solid var(--border-subtle)',
+            flexShrink: 0,
+            gap: '1rem',
+          }}
+        >
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: 13, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
+            <input type="checkbox" checked={dontShow} onChange={e => setDontShow(e.target.checked)} />
+            {t('changelog.dontShowAgain')}
+          </label>
+          <button className="btn btn-primary" onClick={handleClose}>
+            {t('changelog.close')}
+          </button>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}

src/components/ThemePicker.tsx

@@ -105,6 +105,14 @@ const THEME_GROUPS: { group: string; themes: ThemeDef[] }[] = [
       { id: 'doh-matic',    label: "D'oh-matic",              bg: '#FFFDF0', card: '#FFD90F', accent: '#1F75FE' },
       { id: 'heisenberg',   label: 'Heisenberg',              bg: '#0b0e12', card: '#141a22', accent: '#35d4f8' },
       { id: 'turtle-power', label: 'Turtle Power',            bg: '#1a1a1a', card: '#0a0a0a', accent: '#33cc33' },
+      { id: 'north-park',   label: 'North Park',              bg: '#F5F1E8', card: '#FFFFFF',  accent: '#FF8C00' },
+    ],
+  },
+  {
+    group: 'Famous Albums',
+    themes: [
+      { id: 'dark-side-of-the-moon', label: 'Dark Side of the Moon (inspired)', bg: '#050505', card: '#0D0D0D', accent: '#9B30FF' },
+      { id: 'powerslave',            label: 'Powerslave (inspired)',            bg: '#F0DFB0', card: '#2A1808', accent: '#C8960C' },
     ],
   },
   {