feat: v1.17.0 — Media Keys, 3 New Themes, Perf Fixes, Contrast Audit

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

src/pages/Favorites.tsx

@@ -3,9 +3,10 @@ import AlbumRow from '../components/AlbumRow';
 import ArtistRow from '../components/ArtistRow';
 import { getStarred, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
-import { Play, ListPlus } from 'lucide-react';
+import { ListPlus, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { unstar } from '../api/subsonic';
 
 export default function Favorites() {
   const { t } = useTranslation();
@@ -15,6 +16,11 @@ export default function Favorites() {
   const [loading, setLoading] = useState(true);
 
   const { playTrack, enqueue } = usePlayerStore();
+
+  function removeSong(id: string) {
+    unstar(id, 'song').catch(() => {});
+    setSongs(prev => prev.filter(s => s.id !== id));
+  }
   const openContextMenu = usePlayerStore(s => s.openContextMenu);
   const navigate = useNavigate();
 
@@ -77,11 +83,12 @@ export default function Favorites() {
                 </button>
               </div>
               <div className="tracklist" style={{ padding: 0 }}>
-                <div className="tracklist-header tracklist-va">
+                <div className="tracklist-header tracklist-va" style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}>
                   <div className="col-center">#</div>
                   <div>{t('albumDetail.trackTitle')}</div>
                   <div>{t('albumDetail.trackArtist')}</div>
                   <div className="col-center">{t('albumDetail.trackDuration')}</div>
+                  <div />
                 </div>
                 {songs.map((song, i) => {
                   const track = {
@@ -93,6 +100,7 @@ export default function Favorites() {
                     <div
                       key={song.id}
                       className="track-row track-row-va"
+                      style={{ gridTemplateColumns: '40px 1fr 1fr 60px 32px' }}
                       onDoubleClick={() => playTrack(song, songs)}
                       onContextMenu={e => { e.preventDefault(); openContextMenu(e.clientX, e.clientY, track, 'song'); }}
                       role="row"
@@ -118,6 +126,16 @@ export default function Favorites() {
                       <div className="track-duration">
                         {Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}
                       </div>
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <button
+                          className="btn-icon fav-remove-btn"
+                          data-tooltip={t('favorites.removeSong')}
+                          onClick={e => { e.stopPropagation(); removeSong(song.id); }}
+                          aria-label={t('favorites.removeSong')}
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
                     </div>
                   );
                 })}

src/pages/RandomMix.tsx

@@ -48,6 +48,7 @@ export default function RandomMix() {
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const { excludeAudiobooks, setExcludeAudiobooks, customGenreBlacklist, setCustomGenreBlacklist } = useAuthStore();
   const [addedGenre, setAddedGenre] = useState<string | null>(null);
+  const [addedArtist, setAddedArtist] = useState<string | null>(null);
 
   // Blacklist panel state
   const [blacklistOpen, setBlacklistOpen] = useState(false);
@@ -94,6 +95,7 @@ export default function RandomMix() {
     if (song.genre && checkText(song.genre)) return false;
     if (song.title && checkText(song.title)) return false;
     if (song.album && checkText(song.album)) return false;
+    if (song.artist && checkText(song.artist)) return false;
     return true;
   });
 
@@ -419,7 +421,45 @@ export default function RandomMix() {
               </div>
 
               <div className="track-artist-cell">
-                <span className="track-artist">{song.artist}</span>
+                {(() => {
+                  const artist = song.artist;
+                  if (!artist) return <span className="track-artist">—</span>;
+                  const isBlocked = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+                  const justAdded = addedArtist === artist;
+                  return (
+                    <button
+                      className="btn btn-ghost track-artist"
+                      style={{
+                        fontSize: 'inherit',
+                        padding: '1px 6px',
+                        borderRadius: 'var(--radius-sm)',
+                        background: isBlocked ? 'color-mix(in srgb, var(--danger) 15%, transparent)' : justAdded ? 'color-mix(in srgb, var(--accent) 15%, transparent)' : 'transparent',
+                        color: isBlocked ? 'var(--danger)' : justAdded ? 'var(--accent)' : 'var(--text-secondary)',
+                        border: 'none',
+                        cursor: isBlocked ? 'default' : 'pointer',
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        height: 'auto',
+                        minHeight: 'unset',
+                        textAlign: 'left',
+                      }}
+                      onClick={() => {
+                        if (isBlocked) return;
+                        const already = customGenreBlacklist.some(bg => artist.toLowerCase().includes(bg.toLowerCase()));
+                        if (!already) {
+                          setCustomGenreBlacklist([...customGenreBlacklist, artist]);
+                          setAddedArtist(artist);
+                          setTimeout(() => setAddedArtist(null), 1500);
+                        }
+                      }}
+                      data-tooltip={isBlocked ? t('randomMix.artistBlocked') : justAdded ? t('randomMix.artistAddedToBlacklist') : t('randomMix.artistClickHint')}
+                    >
+                      {artist}
+                    </button>
+                  );
+                })()}
               </div>
 
               <div className="track-info">