use JoinedArtists in columns

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) =>
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
-    song.albumArtistName ?? <>&nbsp;</>;
+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' }}
+        />
+    );
+};

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' }}
+        />
+    );
+};

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';

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}