feat: v1.31.0 — AutoEQ, resizable tracklist columns, Discord Listening type, layout fixes

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

src/pages/AdvancedSearch.tsx

@@ -169,7 +169,7 @@ export default function AdvancedSearch() {
               <span style={{ fontSize: 13, color: 'var(--text-muted)', minWidth: 90, flexShrink: 0 }}>
                 {t('search.advancedGenre')}
               </span>
-              <div style={{ minWidth: 180 }}>
+              <div style={{ minWidth: 240, flex: '1 1 240px', maxWidth: 360 }}>
                 <CustomSelect
                   value={genre}
                   options={genreSelectOptions}
@@ -188,7 +188,7 @@ export default function AdvancedSearch() {
                 value={yearFrom}
                 onChange={e => setYearFrom(e.target.value)}
                 placeholder={t('search.advancedYearFrom')}
-                style={{ width: 76 }}
+                style={{ width: 96 }}
               />
               <span style={{ color: 'var(--text-muted)', fontSize: 14 }}>–</span>
               <input
@@ -199,7 +199,7 @@ export default function AdvancedSearch() {
                 value={yearTo}
                 onChange={e => setYearTo(e.target.value)}
                 placeholder={t('search.advancedYearTo')}
-                style={{ width: 76 }}
+                style={{ width: 96 }}
               />
             </div>
 
@@ -319,7 +319,7 @@ export default function AdvancedSearch() {
                       </div>
                       <div className="track-artist-cell">
                         <span
-                          className="track-artist"
+                          className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
                           style={{ cursor: song.artistId ? 'pointer' : 'default' }}
                           onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
                         >

src/pages/ArtistDetail.tsx

@@ -410,12 +410,10 @@ export default function ArtistDetail() {
                          openContextMenu(e.clientX, e.clientY, track, 'song');
                        }}
                      >
-                <div className="track-num" style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, topSongs.map(songToTrack)); }}>
-                  <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
-                    {currentTrack?.id === song.id && isPlaying
-                      ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                      : <Play size={13} fill="currentColor" />}
-                  </span>
+                <div className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, topSongs.map(songToTrack)); }}>
+                  {currentTrack?.id === song.id && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                  <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                  <span className="track-num-number">{idx + 1}</span>
                 </div>
                 <div className="track-info" style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                   {song.coverArt && (

src/pages/Favorites.tsx

@@ -133,19 +133,17 @@ export default function Favorites() {
                         document.addEventListener('mouseup', onUp);
                       }}
                     >
-                      <div className="track-num col-center" style={{ cursor: 'pointer' }}>
-                        <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
-                          {currentTrack?.id === song.id && isPlaying
-                            ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                            : <Play size={13} fill="currentColor" />}
-                        </span>
+                      <div className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, visibleSongs.map(songToTrack)); }}>
+                        {currentTrack?.id === song.id && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                        <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                        <span className="track-num-number">{i + 1}</span>
                       </div>
                       <div className="track-info">
                         <span className="track-title">{song.title}</span>
                       </div>
                       <div className="track-artist-cell">
                         <span
-                          className="track-artist"
+                          className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
                           style={{ cursor: song.artistId ? 'pointer' : 'default' }}
                           onClick={() => song.artistId && navigate(`/artist/${song.artistId}`)}
                         >{song.artist}</span>

src/pages/PlaylistDetail.tsx

@@ -7,6 +7,7 @@ import {
   getRandomSongs, SubsonicPlaylist, SubsonicSong,
 } from '../api/subsonic';
 import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useShallow } from 'zustand/react/shallow';
 import { usePlaylistStore } from '../store/playlistStore';
 import { useOfflineStore } from '../store/offlineStore';
 import { useAuthStore } from '../store/authStore';
@@ -56,7 +57,17 @@ export default function PlaylistDetail() {
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { playTrack, enqueue, openContextMenu, currentTrack, isPlaying, starredOverrides, setStarredOverride } = usePlayerStore();
+  const { playTrack, enqueue, openContextMenu, currentTrack, isPlaying, starredOverrides, setStarredOverride } = usePlayerStore(
+    useShallow(s => ({
+      playTrack: s.playTrack,
+      enqueue: s.enqueue,
+      openContextMenu: s.openContextMenu,
+      currentTrack: s.currentTrack,
+      isPlaying: s.isPlaying,
+      starredOverrides: s.starredOverrides,
+      setStarredOverride: s.setStarredOverride,
+    }))
+  );
   const touchPlaylist = usePlaylistStore((s) => s.touchPlaylist);
   const { startDrag, isDragging } = useDragDrop();
   const { downloadPlaylist, isAlbumDownloading, isAlbumDownloaded, getAlbumProgress } = useOfflineStore();
@@ -561,11 +572,9 @@ export default function PlaylistDetail() {
 
         {songs.map((song, idx) => (
           <React.Fragment key={song.id + idx}>
-            {/* Drop indicator above row */}
             {isDragging && dropTargetIdx?.idx === idx && dropTargetIdx.before && (
               <div className="playlist-drop-indicator" />
             )}
-
             <div
               data-track-idx={idx}
               className={`track-row track-row-va tracklist-playlist${currentTrack?.id === song.id ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}${selectedIds.has(song.id) ? ' bulk-selected' : ''}`}
@@ -590,7 +599,7 @@ export default function PlaylistDetail() {
                 const inSelectMode = selectedIds.size > 0;
                 return (
                   <div
-                    className="track-num"
+                    className={`track-num${currentTrack?.id === song.id ? ' track-num-active' : ''}`}
                     style={{ cursor: 'pointer' }}
                     onClick={e => {
                       e.stopPropagation();
@@ -601,11 +610,9 @@ export default function PlaylistDetail() {
                       className={`bulk-check${selectedIds.has(song.id) ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
                       onClick={e => { e.stopPropagation(); toggleSelect(song.id, idx, e.shiftKey); }}
                     />
-                    <span style={{ color: currentTrack?.id === song.id ? 'var(--accent)' : 'var(--text-muted)' }}>
-                      {currentTrack?.id === song.id && isPlaying
-                        ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                        : <Play size={13} fill="currentColor" />}
-                    </span>
+                    {currentTrack?.id === song.id && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                    <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                    <span className="track-num-number">{idx + 1}</span>
                   </div>
                 );
               })()}
@@ -617,7 +624,11 @@ export default function PlaylistDetail() {
 
               {/* Artist */}
               <div className="track-artist-cell">
-                <span className="track-artist">{song.artist}</span>
+                <span
+                  className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
+                  style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+                  onClick={e => { if (song.artistId) { e.stopPropagation(); navigate(`/artist/${song.artistId}`); } }}
+                >{song.artist}</span>
               </div>
 
               {/* Favorite */}
@@ -654,8 +665,6 @@ export default function PlaylistDetail() {
                 </button>
               </div>
             </div>
-
-            {/* Drop indicator below last row or between rows */}
             {isDragging && dropTargetIdx?.idx === idx && !dropTargetIdx.before && (
               <div className="playlist-drop-indicator" />
             )}
@@ -726,7 +735,11 @@ export default function PlaylistDetail() {
                   <span className="track-title">{song.title}</span>
                 </div>
                 <div className="track-artist-cell">
-                  <span className="track-artist">{song.artist}</span>
+                  <span
+                    className={`track-artist${song.artistId ? ' track-artist-link' : ''}`}
+                    style={{ cursor: song.artistId ? 'pointer' : 'default' }}
+                    onClick={e => { if (song.artistId) { e.stopPropagation(); navigate(`/artist/${song.artistId}`); } }}
+                  >{song.artist}</span>
                 </div>
                 {/* no star/rating for suggestions */}
                 <div />

src/pages/RandomMix.tsx

@@ -333,7 +333,7 @@ export default function RandomMix() {
                 <div className="col-center">{t('randomMix.trackFavorite')}</div>
                 <div className="col-center">{t('randomMix.trackDuration')}</div>
               </div>
-              {genreMixSongs.map(song => {
+              {genreMixSongs.map((song, idx) => {
                 const track = songToTrack(song);
                 const queueSongs = genreMixSongs.map(songToTrack);
                 const isCurrentTrack = currentTrack?.id === song.id;
@@ -364,12 +364,10 @@ export default function RandomMix() {
                       document.addEventListener('mouseup', onUp);
                     }}
                   >
-                    <div className="track-num" style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
-                      <span style={{ color: isCurrentTrack ? 'var(--accent)' : 'var(--text-muted)' }}>
-                        {isCurrentTrack && isPlaying
-                          ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                          : <Play size={13} fill="currentColor" />}
-                      </span>
+                    <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
+                      {isCurrentTrack && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                      <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                      <span className="track-num-number">{idx + 1}</span>
                     </div>
                     <div className="track-info"><span className="track-title">{song.title}</span></div>
                     <div className="track-artist-cell">
@@ -428,7 +426,7 @@ export default function RandomMix() {
             <div className="col-center">{t('randomMix.trackDuration')}</div>
           </div>
 
-          {filteredSongs.map((song) => {
+          {filteredSongs.map((song, idx) => {
             const track = songToTrack(song);
             const queueSongs = filteredSongs.map(songToTrack);
             const isCurrentTrack = currentTrack?.id === song.id;
@@ -469,12 +467,10 @@ export default function RandomMix() {
                   document.addEventListener('mouseup', onUp);
                 }}
               >
-                <div className="track-num" style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
-                  <span style={{ color: isCurrentTrack ? 'var(--accent)' : 'var(--text-muted)' }}>
-                    {isCurrentTrack && isPlaying
-                      ? <div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div>
-                      : <Play size={13} fill="currentColor" />}
-                  </span>
+                <div className={`track-num${isCurrentTrack ? ' track-num-active' : ''}`} style={{ cursor: 'pointer' }} onClick={e => { e.stopPropagation(); playTrack(track, queueSongs); }}>
+                  {isCurrentTrack && isPlaying && <span className="track-num-eq"><div className="eq-bars"><span className="eq-bar" /><span className="eq-bar" /><span className="eq-bar" /></div></span>}
+                  <span className="track-num-play"><Play size={13} fill="currentColor" /></span>
+                  <span className="track-num-number">{idx + 1}</span>
                 </div>
 
                 <div className="track-info">

src/pages/Settings.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Wifi, WifiOff, Globe, Music2, Sliders, LogOut, CheckCircle2, FolderOpen,
   Palette, Server, Plus, Trash2, Eye, EyeOff, Info, ExternalLink, Shuffle, X, Play, Type, Keyboard, ChevronDown,
-  GripVertical, PanelLeft, RotateCcw, LayoutGrid
+  GripVertical, PanelLeft, RotateCcw, LayoutGrid, AppWindow
 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
@@ -453,7 +453,7 @@ export default function Settings() {
           {/* Cache */}
           <section className="settings-section">
             <div className="settings-section-header">
-              <Sliders size={18} />
+              <AppWindow size={18} />
               <h2>{t('settings.behavior')}</h2>
             </div>
             <div className="settings-card">
@@ -847,6 +847,9 @@ export default function Settings() {
               <Server size={18} />
               <h2>{t('settings.servers')}</h2>
             </div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
+              {t('settings.serverCompatible')}
+            </div>
 
             {auth.servers.length === 0 && !showAddForm ? (
               <div className="settings-card" style={{ color: 'var(--text-muted)', fontSize: 14 }}>
@@ -876,7 +879,7 @@ export default function Settings() {
                           {status === 'error' && <WifiOff size={16} style={{ color: 'var(--danger)' }} />}
                           {status === 'testing' && <div className="spinner" style={{ width: 16, height: 16 }} />}
                           <button
-                            className="btn btn-ghost"
+                            className="btn btn-surface"
                             style={{ fontSize: 12, padding: '4px 10px' }}
                             onClick={() => testConnection(srv)}
                             disabled={status === 'testing'}
@@ -915,7 +918,7 @@ export default function Settings() {
             {showAddForm ? (
               <AddServerForm onSave={handleAddServer} onCancel={() => setShowAddForm(false)} />
             ) : (
-              <button className="btn btn-ghost" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
+              <button className="btn btn-surface" style={{ marginTop: '0.75rem' }} onClick={() => setShowAddForm(true)} id="settings-add-server-btn">
                 <Plus size={16} /> {t('settings.addServer')}
               </button>
             )}
@@ -993,7 +996,7 @@ export default function Settings() {
           {/* Downloads + Tray */}
           <section className="settings-section">
             <div className="settings-section-header">
-              <Sliders size={18} />
+              <AppWindow size={18} />
               <h2>{t('settings.behavior')}</h2>
             </div>
             <div className="settings-card">
@@ -1060,7 +1063,7 @@ export default function Settings() {
                       <X size={16} />
                     </button>
                   )}
-                  <button className="btn btn-ghost" onClick={pickDownloadFolder} id="settings-download-folder-btn">
+                  <button className="btn btn-surface" onClick={pickDownloadFolder} id="settings-download-folder-btn">
                     <FolderOpen size={16} /> {t('settings.pickFolder')}
                   </button>
                 </div>