From 5f1867c14f84630f49d5b3551b27d72a203a6983 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 4 Jan 2026 00:44:22 -0800
Subject: [PATCH] add support for track subtitle display (#1177)

---
 .../columns/title-column.module.css           |  4 ++++
 .../item-table-list/columns/title-column.tsx  | 18 ++++++++++++---
 .../columns/title-combined-column.module.css  |  4 ++++
 .../columns/title-combined-column.tsx         | 22 ++++++++++++++++---
 .../player/components/left-controls.tsx       |  7 ++++++
 src/shared/api/jellyfin/jellyfin-normalize.ts |  1 +
 .../api/navidrome/navidrome-normalize.ts      |  1 +
 src/shared/api/subsonic/subsonic-normalize.ts |  1 +
 src/shared/types/domain-types.ts              |  1 +
 9 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
index 35d7b0530..75eae91f0 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/title-column.module.css
@@ -16,3 +16,7 @@
 .name-container.large {
     -webkit-line-clamp: 3;
 }
+
+.active {
+    color: var(--theme-colors-primary);
+}
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
index a10ccaff6..f3dc22120 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx
@@ -83,8 +83,6 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
         const item = props.data[props.rowIndex] as any;
 
-        const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
-
         const titleLinkProps = path
             ? {
                   component: Link,
@@ -98,15 +96,29 @@ function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
             <TableColumnContainer {...props}>
                 <Text
                     className={clsx({
+                        [styles.active]: isActive,
                         [styles.compact]: props.size === 'compact',
                         [styles.large]: props.size === 'large',
                         [styles.nameContainer]: true,
                     })}
                     isNoSelect
                     {...titleLinkProps}
-                    style={textStyles}
                 >
                     {row}
+                    {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+                        <Text
+                            className={clsx({
+                                [styles.active]: isActive,
+                            })}
+                            component="span"
+                            isMuted
+                            size="sm"
+                        >
+                            {' ('}
+                            {song.trackSubtitle}
+                            {')'}
+                        </Text>
+                    )}
                 </Text>
             </TableColumnContainer>
         );
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
index 8f5067aaa..8441c79c1 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.module.css
@@ -70,3 +70,7 @@
     width: 24px;
     height: 24px;
 }
+
+.active {
+    color: var(--theme-colors-primary);
+}
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
index efae1d0c2..7dd74a77f 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
@@ -213,7 +213,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
 
         const item = props.data[props.rowIndex] as any;
-        const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
 
         const titleLinkProps = path
             ? {
@@ -265,17 +264,34 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                 </div>
                 <div
                     className={clsx(styles.textContainer, {
+                        [styles.active]: isActive,
                         [styles.compact]: props.size === 'compact',
                     })}
                 >
                     <Text
-                        className={styles.title}
+                        className={clsx({
+                            [styles.active]: isActive,
+                            [styles.title]: true,
+                        })}
                         isNoSelect
                         size="md"
                         {...titleLinkProps}
-                        style={textStyles}
                     >
                         {row.name as string}
+                        {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+                            <Text
+                                className={clsx({
+                                    [styles.active]: isActive,
+                                })}
+                                component="span"
+                                isMuted
+                                size="sm"
+                            >
+                                {' ('}
+                                {song.trackSubtitle}
+                                {')'}
+                            </Text>
+                        )}
                     </Text>
                     <div className={styles.artists}>
                         <JoinedArtists
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 87d1b7eed..bb9036a67 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -173,6 +173,13 @@ export const LeftControls = () => {
                                         to={AppRoute.NOW_PLAYING}
                                     >
                                         {title || '—'}
+                                        {currentSong?.trackSubtitle && (
+                                            <Text component="span" isMuted size="sm">
+                                                {' ('}
+                                                {currentSong.trackSubtitle}
+                                                {')'}
+                                            </Text>
+                                        )}
                                     </Text>
                                     {isSongDefined && (
                                         <ActionIcon
diff --git a/src/shared/api/jellyfin/jellyfin-normalize.ts b/src/shared/api/jellyfin/jellyfin-normalize.ts
index d6d404924..5411d95e7 100644
--- a/src/shared/api/jellyfin/jellyfin-normalize.ts
+++ b/src/shared/api/jellyfin/jellyfin-normalize.ts
@@ -244,6 +244,7 @@ const normalizeSong = (
         size,
         tags: getTags(item),
         trackNumber: item.IndexNumber,
+        trackSubtitle: null,
         updatedAt: item.DateCreated,
         userFavorite: (item.UserData && item.UserData.IsFavorite) || false,
         userRating: null,
diff --git a/src/shared/api/navidrome/navidrome-normalize.ts b/src/shared/api/navidrome/navidrome-normalize.ts
index f2b4ab871..e970117e9 100644
--- a/src/shared/api/navidrome/navidrome-normalize.ts
+++ b/src/shared/api/navidrome/navidrome-normalize.ts
@@ -226,6 +226,7 @@ const normalizeSong = (
         size: item.size,
         tags: item.tags || null,
         trackNumber: item.trackNumber,
+        trackSubtitle: item.tags?.subtitle ? item.tags.subtitle.join(' · ') : null,
         updatedAt: item.updatedAt,
         userFavorite: item.starred || false,
         userRating: item.rating || null,
diff --git a/src/shared/api/subsonic/subsonic-normalize.ts b/src/shared/api/subsonic/subsonic-normalize.ts
index 58c39628e..9e9f2964b 100644
--- a/src/shared/api/subsonic/subsonic-normalize.ts
+++ b/src/shared/api/subsonic/subsonic-normalize.ts
@@ -195,6 +195,7 @@ const normalizeSong = (
         size: item.size,
         tags: null,
         trackNumber: item.track || 1,
+        trackSubtitle: null,
         updatedAt: '',
         userFavorite: Boolean(item.starred) || false,
         userRating: item.userRating || null,
diff --git a/src/shared/types/domain-types.ts b/src/shared/types/domain-types.ts
index 25464fa7d..564449795 100644
--- a/src/shared/types/domain-types.ts
+++ b/src/shared/types/domain-types.ts
@@ -392,6 +392,7 @@ export type Song = {
     size: number;
     tags: null | Record<string, string[]>;
     trackNumber: number;
+    trackSubtitle: null | string;
     updatedAt: string;
     userFavorite: boolean;
     userRating: null | number;