From 2d01b8e3f73fc7b1efb931cca7bf640b0095400e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 9 Feb 2026 03:12:00 -0800
Subject: [PATCH] use JoinedArtists in columns

---
 .../columns/album-artist-column.tsx           | 28 +++++++++++++++++--
 .../columns/artist-column.tsx                 | 27 +++++++++++++++++-
 .../item-detail-list/columns/types.ts         |  1 +
 .../item-detail-list/item-detail.tsx          |  1 +
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx b/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx
index c9d4f8498..dcc13385e 100644
--- a/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx
+++ b/src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx
@@ -1,4 +1,28 @@
 import { ItemDetailListCellProps } from './types';
 
-export const AlbumArtistColumn = ({ song }: ItemDetailListCellProps) =>
-    song.albumArtistName ?? <>&nbsp;</>;
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { Text } from '/@/shared/components/text/text';
+
+export const AlbumArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.albumArtistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.albumArtists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    if (!isRowHovered) {
+        return (
+            <Text component="span" isMuted size="sm">
+                {name}
+            </Text>
+        );
+    }
+
+    return (
+        <JoinedArtists
+            artistName={song.albumArtistName ?? ''}
+            artists={song.albumArtists ?? []}
+            linkProps={{ fw: 400, isMuted: true }}
+            rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
+        />
+    );
+};
diff --git a/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx b/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx
index 3a4084a6f..97fb9276e 100644
--- a/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx
+++ b/src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx
@@ -1,3 +1,28 @@
 import { ItemDetailListCellProps } from './types';
 
-export const ArtistColumn = ({ song }: ItemDetailListCellProps) => song.artistName ?? <>&nbsp;</>;
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { Text } from '/@/shared/components/text/text';
+
+export const ArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const name = song.artistName?.trim() ?? '';
+    const hasArtists = name.length > 0 || (song.artists?.length ?? 0) > 0;
+
+    if (!hasArtists) return <>&nbsp;</>;
+
+    if (!isRowHovered) {
+        return (
+            <Text component="span" isMuted size="sm">
+                {name}
+            </Text>
+        );
+    }
+
+    return (
+        <JoinedArtists
+            artistName={song.artistName ?? ''}
+            artists={song.artists ?? []}
+            linkProps={{ fw: 400, isMuted: true }}
+            rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
+        />
+    );
+};
diff --git a/src/renderer/components/item-list/item-detail-list/columns/types.ts b/src/renderer/components/item-list/item-detail-list/columns/types.ts
index dd462344f..cad0801a0 100644
--- a/src/renderer/components/item-list/item-detail-list/columns/types.ts
+++ b/src/renderer/components/item-list/item-detail-list/columns/types.ts
@@ -6,6 +6,7 @@ export interface ItemDetailListCellProps {
     controls?: ItemControls;
     internalState?: ItemListStateActions;
     isMutatingFavorite?: boolean;
+    isRowHovered?: boolean;
     onFavoriteClick?: (song: Song) => void;
     rowIndex?: number;
     size?: 'compact' | 'default' | 'large';
diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
index 5cc404539..8c97a2e25 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
@@ -242,6 +242,7 @@ const TrackRow = memo(
                             controls={controls}
                             internalState={internalState}
                             isMutatingFavorite={isMutatingFavorite}
+                            isRowHovered={isRowHovered}
                             onFavoriteClick={onFavoriteClick}
                             rowIndex={rowIndex}
                             size={size}