use exact album artist names (#1459)

src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { Fragment, memo, useMemo } from 'react';
-import { generatePath, Link } from 'react-router';
+import { memo } from 'react';
 
 import styles from './album-artists-column.module.css';
 
@@ -10,24 +9,16 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { AppRoute } from '/@/renderer/router/routes';
-import { Text } from '/@/shared/components/text/text';
-import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { Album, RelatedAlbumArtist, Song } from '/@/shared/types/domain-types';
 
 const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
     const row: RelatedAlbumArtist[] | undefined = (
         props.data as (RelatedAlbumArtist[] | undefined)[]
     )[props.rowIndex]?.[props.columns[props.columnIndex].id];
 
-    const albumArtists = useMemo(() => {
-        if (!row) return [];
-        return row.map((albumArtist) => {
-            const path = generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                albumArtistId: albumArtist.id,
-            });
-            return { ...albumArtist, path };
-        });
-    }, [row]);
+    const item = props.data[props.rowIndex] as Album | Song | undefined;
+    const albumArtistString = item && 'albumArtistName' in item ? item.albumArtistName : '';
 
     if (Array.isArray(row)) {
         return (
@@ -38,21 +29,20 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
                         [styles.large]: props.size === 'large',
                     })}
                 >
-                    {albumArtists.map((albumArtist, index) => (
-                        <Fragment key={albumArtist.id}>
-                            <Text
-                                component={Link}
-                                isLink
-                                isMuted
-                                isNoSelect
-                                state={{ item: albumArtist }}
-                                to={albumArtist.path}
-                            >
-                                {albumArtist.name}
-                            </Text>
-                            {index < albumArtists.length - 1 && ', '}
-                        </Fragment>
-                    ))}
+                    <JoinedArtists
+                        artistName={albumArtistString}
+                        artists={row}
+                        linkProps={{ fw: 400, isMuted: true }}
+                        rootTextProps={{
+                            className: clsx(styles.artistsContainer, {
+                                [styles.compact]: props.size === 'compact',
+                                [styles.large]: props.size === 'large',
+                            }),
+                            fw: 400,
+                            isMuted: true,
+                            size: 'sm',
+                        }}
+                    />
                 </div>
             </TableColumnContainer>
         );