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) {
{row}
+ {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+
+ {' ('}
+ {song.trackSubtitle}
+ {')'}
+
+ )}
);
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) =>
{row.name as string}
+ {song?.trackSubtitle && props.itemType !== LibraryItem.QUEUE_SONG && (
+
+ {' ('}
+ {song.trackSubtitle}
+ {')'}
+
+ )}
{
to={AppRoute.NOW_PLAYING}
>
{title || '—'}
+ {currentSong?.trackSubtitle && (
+
+ {' ('}
+ {currentSong.trackSubtitle}
+ {')'}
+
+ )}
{isSongDefined && (
;
trackNumber: number;
+ trackSubtitle: null | string;
updatedAt: string;
userFavorite: boolean;
userRating: null | number;