add links to genre / album artists columns

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

@@ -0,0 +1,8 @@
+.group {
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+}

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

@@ -0,0 +1,62 @@
+import { memo, useMemo } from 'react';
+import { generatePath, Link } from 'react-router-dom';
+
+import styles from './album-artists-column.module.css';
+
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Group } from '/@/shared/components/group/group';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+import { Text } from '/@/shared/components/text/text';
+import { RelatedAlbumArtist } 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]);
+
+    if (Array.isArray(row)) {
+        return (
+            <TableColumnContainer {...props}>
+                <Group className={styles.group} wrap="wrap">
+                    {albumArtists.map((albumArtist, index) => (
+                        <Text
+                            component={Link}
+                            isLink
+                            isMuted
+                            key={albumArtist.id}
+                            to={albumArtist.path}
+                        >
+                            {albumArtist.name}
+                            {index < albumArtists.length - 1 && ','}
+                        </Text>
+                    ))}
+                </Group>
+            </TableColumnContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
+
+export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn);
+
+export { AlbumArtistsColumnMemo as AlbumArtistsColumn };

src/renderer/components/item-list/item-table-list/columns/genre-column.module.css

@@ -0,0 +1,8 @@
+.group {
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+}

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

@@ -1,35 +1,47 @@
+import { memo, useMemo } from 'react';
+import { generatePath, Link } from 'react-router-dom';
+
+import styles from './genre-column.module.css';
+
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { AppRoute } from '/@/renderer/router/routes';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Group } from '/@/shared/components/group/group';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
 import { stringToColor } from '/@/shared/utils/string-to-color';
 
-export const GenreColumn = (props: ItemTableListInnerColumn) => {
+const GenreColumn = (props: ItemTableListInnerColumn) => {
     const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
     ];
 
-    const genres = (row || []).map((genre) => {
-        const { color, isLight } = stringToColor(genre.name);
-        return { ...genre, color, isLight };
-    });
+    const genres = useMemo(() => {
+        if (!row) return [];
+        return row.map((genre) => {
+            const { color, isLight } = stringToColor(genre.name);
+            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
+            return { ...genre, color, isLight, path };
+        });
+    }, [row]);
 
     if (Array.isArray(row)) {
         return (
             <TableColumnContainer {...props}>
-                <Group gap="xs" wrap="nowrap">
+                <Group className={styles.group} wrap="wrap">
                     {genres.map((genre) => (
                         <Badge
+                            component={Link}
                             key={genre.id}
                             style={{
                                 backgroundColor: genre.color,
                                 color: genre.isLight ? 'black' : 'white',
                             }}
+                            to={genre.path}
                         >
                             {genre.name}
                         </Badge>
@@ -45,3 +57,7 @@ export const GenreColumn = (props: ItemTableListInnerColumn) => {
         </TableColumnTextContainer>
     );
 };
+
+export const GenreColumnMemo = memo(GenreColumn);
+
+export { GenreColumnMemo as GenreColumn };