add readOnly prop to JoinedArtists

src/renderer/components/item-list/item-detail-list/columns/album-artist-column.tsx

@@ -4,7 +4,6 @@ import {
     JOINED_ARTISTS_MUTED_PROPS,
     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() ?? '';
@@ -12,19 +11,12 @@ export const AlbumArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProp
 
     if (!hasArtists) return <>&nbsp;</>;
 
-    if (!isRowHovered) {
-        return (
-            <Text component="span" isMuted size="sm">
-                {name}
-            </Text>
-        );
-    }
-
     return (
         <JoinedArtists
             artistName={song.albumArtistName ?? ''}
             artists={song.albumArtists ?? []}
             linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
             rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
         />
     );

src/renderer/components/item-list/item-detail-list/columns/artist-column.tsx

@@ -4,7 +4,6 @@ import {
     JOINED_ARTISTS_MUTED_PROPS,
     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() ?? '';
@@ -12,19 +11,12 @@ export const ArtistColumn = ({ isRowHovered, song }: ItemDetailListCellProps) =>
 
     if (!hasArtists) return <>&nbsp;</>;
 
-    if (!isRowHovered) {
-        return (
-            <Text component="span" isMuted size="sm">
-                {name}
-            </Text>
-        );
-    }
-
     return (
         <JoinedArtists
             artistName={song.artistName ?? ''}
             artists={song.artists ?? []}
             linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+            readOnly={!isRowHovered}
             rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
         />
     );

src/renderer/components/item-list/item-detail-list/item-detail.tsx

@@ -55,7 +55,6 @@ import { useSettingsStore, useShowRatings } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
 import { ExplicitIndicator } from '/@/shared/components/explicit-indicator/explicit-indicator';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
-import { Text } from '/@/shared/components/text/text';
 import { useDoubleClick } from '/@/shared/hooks/use-double-click';
 import { Album, LibraryItem, Song, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey, Play, TableColumn } from '/@/shared/types/types';
@@ -456,15 +455,12 @@ const MetadataSection = memo(
                 <div className={styles.artist}>
                     {!hasArtist ? (
                         <>&nbsp;</>
-                    ) : !isMetadataHovered ? (
-                        <Text className={styles.artistPlainText} component="span" isMuted size="sm">
-                            {item.albumArtistName ?? ''}
-                        </Text>
                     ) : (
                         <JoinedArtists
                             artistName={item.albumArtistName ?? ''}
                             artists={item.albumArtists ?? []}
                             linkProps={JOINED_ARTISTS_MUTED_PROPS.linkProps}
+                            readOnly={!isMetadataHovered}
                             rootTextProps={JOINED_ARTISTS_MUTED_PROPS.rootTextProps}
                         />
                     )}

src/renderer/features/albums/components/joined-artists.tsx

@@ -14,6 +14,7 @@ interface JoinedArtistsProps {
     artistName: string;
     artists: AlbumArtist[] | RelatedAlbumArtist[] | RelatedArtist[];
     linkProps?: Partial<Omit<TextProps, 'children' | 'component' | 'to'>>;
+    readOnly?: boolean;
     rootTextProps?: Partial<Omit<TextProps, 'children' | 'component'>>;
 }
 
@@ -21,6 +22,7 @@ const JoinedArtistsComponent = ({
     artistName,
     artists,
     linkProps,
+    readOnly = false,
     rootTextProps,
 }: JoinedArtistsProps) => {
     const parts: (
@@ -116,7 +118,7 @@ const JoinedArtistsComponent = ({
                 {artists.map((artist, index) => (
                     <Fragment key={artist.id || `artist-${index}`}>
                         {index > 0 && ', '}
-                        {artist.id ? (
+                        {artist.id && !readOnly ? (
                             <Text
                                 component={Link}
                                 fw={500}
@@ -129,7 +131,7 @@ const JoinedArtistsComponent = ({
                                 {artist.name}
                             </Text>
                         ) : (
-                            <Text fw={500} {...linkProps}>
+                            <Text component="span" fw={500} {...linkProps}>
                                 {artist.name}
                             </Text>
                         )}
@@ -157,7 +159,7 @@ const JoinedArtistsComponent = ({
 
                 const { artist, text } = part;
 
-                if (artist.id) {
+                if (artist.id && !readOnly) {
                     return (
                         <Text
                             component={Link}
@@ -174,7 +176,7 @@ const JoinedArtistsComponent = ({
                     );
                 }
                 return (
-                    <Text fw={500} key={`${artist.name}-${index}`} {...linkProps}>
+                    <Text component="span" fw={500} key={`${artist.name}-${index}`} {...linkProps}>
                         {text}
                     </Text>
                 );
@@ -185,7 +187,7 @@ const JoinedArtistsComponent = ({
                     {unmatchedArtists.map((artist, index) => (
                         <Fragment key={artist.id}>
                             {index > 0 && ', '}
-                            {artist.id ? (
+                            {artist.id && !readOnly ? (
                                 <Text
                                     component={Link}
                                     fw={500}
@@ -197,6 +199,10 @@ const JoinedArtistsComponent = ({
                                 >
                                     {artist.name}
                                 </Text>
+                            ) : artist.id ? (
+                                <Text component="span" fw={500} {...linkProps}>
+                                    {artist.name}
+                                </Text>
                             ) : (
                                 <Text component="span" isMuted>
                                     {artist.name}