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;