properly handle genre columns

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

@@ -0,0 +1,12 @@
+.group {
+    flex-wrap: nowrap;
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    min-width: 0;
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+    user-select: none;
+}

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

@@ -1,4 +1,46 @@
+import { useMemo } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import styles from './genre-badge-column.module.css';
 import { ItemDetailListCellProps } from './types';
 
-export const GenreBadgeColumn = ({ song }: ItemDetailListCellProps) =>
+import { AppRoute } from '/@/renderer/router/routes';
-    song.genres?.length ? song.genres.map((g) => g.name).join(', ') : <>&nbsp;</>;
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { stringToColor } from '/@/shared/utils/string-to-color';
+
+const MAX_GENRES = 4;
+
+export const GenreBadgeColumn = ({ song }: ItemDetailListCellProps) => {
+    const genres = song.genres;
+
+    const genresWithStyle = useMemo(() => {
+        if (!genres) return [];
+        return genres.slice(0, MAX_GENRES).map((genre) => {
+            const { color, isLight } = stringToColor(genre.name);
+            const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
+            return { ...genre, color, isLight, path };
+        });
+    }, [genres]);
+
+    if (!genresWithStyle.length) return <>&nbsp;</>;
+
+    return (
+        <Group className={styles.group} wrap="nowrap">
+            {genresWithStyle.map((genre) => (
+                <Badge
+                    component={Link}
+                    key={genre.id}
+                    state={{ item: genre }}
+                    style={{
+                        backgroundColor: genre.color,
+                        color: genre.isLight ? 'black' : 'white',
+                    }}
+                    to={genre.path}
+                >
+                    {genre.name}
+                </Badge>
+            ))}
+        </Group>
+    );
+};

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

@@ -1,4 +1,40 @@
-import { ItemDetailListCellProps } from './types';
+import { Fragment } from 'react';
+import { generatePath, Link } from 'react-router';
 
-export const GenreColumn = ({ song }: ItemDetailListCellProps) =>
+import { ItemDetailListCellProps } from '/@/renderer/components/item-list/item-detail-list/columns/types';
-    song.genres?.length ? song.genres.map((g) => g.name).join(', ') : <>&nbsp;</>;
+import { AppRoute } from '/@/renderer/router/routes';
+import { Text } from '/@/shared/components/text/text';
+
+const TEXT_PROPS = { isMuted: true, isNoSelect: true, size: 'sm' as const } as const;
+
+export const GenreColumn = ({ isRowHovered, song }: ItemDetailListCellProps) => {
+    const genres = song.genres ?? [];
+    if (!genres.length) return <>&nbsp;</>;
+
+    return (
+        <>
+            {genres.map((genre, index) => (
+                <Fragment key={genre.id}>
+                    {isRowHovered ? (
+                        <Text
+                            component={Link}
+                            isLink
+                            state={{ item: genre }}
+                            to={generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
+                                genreId: genre.id,
+                            })}
+                            {...TEXT_PROPS}
+                        >
+                            {genre.name}
+                        </Text>
+                    ) : (
+                        <Text component="span" {...TEXT_PROPS}>
+                            {genre.name}
+                        </Text>
+                    )}
+                    {index < genres.length - 1 && ', '}
+                </Fragment>
+            ))}
+        </>
+    );
+};