From 084543e59b7c0a9fc93fcf2d92ed79df81e67f57 Mon Sep 17 00:00:00 2001
From: Psychotoxical <dev@psysonic.app>
Date: Fri, 10 Apr 2026 14:37:29 +0200
Subject: [PATCH] fix(tracklist): split multi-artist tracks and fix reset
 button style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use OpenSubsonic `artists[]` array to render each artist separately
  with · separator; artists with an ID are clickable, others plain text
- Fall back to single artist (artistId/artist) on non-OpenSubsonic servers
- Settings reset-to-defaults buttons changed from btn-ghost to btn-danger

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/AlbumTrackList.tsx | 25 +++++++++++++++++--------
 src/pages/Settings.tsx            |  4 ++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/AlbumTrackList.tsx b/src/components/AlbumTrackList.tsx
index 268fc109..c3dc6837 100644
--- a/src/components/AlbumTrackList.tsx
+++ b/src/components/AlbumTrackList.tsx
@@ -227,18 +227,27 @@ export default function AlbumTrackList({
             <span className="track-title">{song.title}</span>
           </div>
         );
-      case 'artist':
+      case 'artist': {
+        const artistRefs = song.artists && song.artists.length > 0
+          ? song.artists
+          : [{ id: song.artistId, name: song.artist }];
         return (
           <div key="artist" className="track-artist-cell">
-            <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>
+            {artistRefs.map((a, i) => (
+              <React.Fragment key={a.id ?? a.name ?? i}>
+                {i > 0 && <span className="track-artist-sep">&nbsp;·&nbsp;</span>}
+                <span
+                  className={`track-artist${a.id ? ' track-artist-link' : ''}`}
+                  style={{ cursor: a.id ? 'pointer' : 'default' }}
+                  onClick={e => { if (a.id) { e.stopPropagation(); navigate(`/artist/${a.id}`); } }}
+                >
+                  {a.name ?? song.artist}
+                </span>
+              </React.Fragment>
+            ))}
           </div>
         );
+      }
       case 'favorite':
         return (
           <div key="favorite" className="track-star-cell">
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index dde97731..f3a12401 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1437,7 +1437,7 @@ export default function Settings() {
           </div>
           <div className="settings-card">
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '12px' }}>
-              <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { kb.resetToDefaults(); setListeningFor(null); }}>
+              <button className="btn btn-danger" style={{ fontSize: 12 }} onClick={() => { kb.resetToDefaults(); setListeningFor(null); }}>
                 {t('settings.shortcutsReset')}
               </button>
             </div>
@@ -1523,7 +1523,7 @@ export default function Settings() {
           </p>
           <div className="settings-card">
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '12px' }}>
-              <button className="btn btn-ghost" style={{ fontSize: 12 }} onClick={() => { gs.resetAll(); setListeningForGlobal(null); }}>
+              <button className="btn btn-danger" style={{ fontSize: 12 }} onClick={() => { gs.resetAll(); setListeningForGlobal(null); }}>
                 {t('settings.shortcutsReset')}
               </button>
             </div>