add large table size

2026-05-17 06:00:20 +02:00 · 2025-10-09 14:25:27 -07:00
parent 6e5f8a5014
commit ee1a5ce120
16 changed files with 432 additions and 76 deletions
@@ -11,7 +11,14 @@
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
-    line-height: 1.4;
    -webkit-box-orient: vertical;
    color: var(--theme-colors-foreground-muted);
 }
+
+.artists-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.artists-container.large {
+    -webkit-line-clamp: 3;
+}
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { memo, useMemo } from 'react';
 import { generatePath, Link } from 'react-router-dom';

@@ -31,7 +32,12 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                <div className={styles.artistsContainer}>
+                <div
+                    className={clsx(styles.artistsContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
                    {albumArtists.map((albumArtist, index) => (
                        <Text
                            component={Link}
@@ -11,7 +11,14 @@
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
-    line-height: 1.4;
    -webkit-box-orient: vertical;
    color: var(--theme-colors-foreground-muted);
 }
+
+.artists-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.artists-container.large {
+    -webkit-line-clamp: 3;
+}
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { memo, useMemo } from 'react';
 import { generatePath, Link } from 'react-router-dom';

@@ -31,7 +32,12 @@ const ArtistsColumn = (props: ItemTableListInnerColumn) => {
    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                <div className={styles.artistsContainer}>
+                <div
+                    className={clsx(styles.artistsContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
                    {artists.map((artist, index) => (
                        <Text
                            component={Link}
@@ -0,0 +1,10 @@
+.group {
+    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
+    padding: var(--theme-spacing-xs) 0;
+    overflow: hidden;
+}
+
+.group a {
+    cursor: pointer;
+    user-select: none;
+}
@@ -0,0 +1,65 @@
+import { memo, useMemo } from 'react';
+import { generatePath, Link } from 'react-router-dom';
+
+import styles from './genre-badge-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';
+
+const MAX_GENRES = 4;
+
+const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
+    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
+        'genres'
+    ];
+
+    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 className={styles.group} wrap="wrap">
+                    {genres.slice(0, MAX_GENRES).map((genre) => (
+                        <Badge
+                            component={Link}
+                            key={genre.id}
+                            style={{
+                                backgroundColor: genre.color,
+                                color: genre.isLight ? 'black' : 'white',
+                            }}
+                            to={genre.path}
+                        >
+                            {genre.name}
+                        </Badge>
+                    ))}
+                </Group>
+            </TableColumnContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
+
+export const GenreColumnMemo = memo(GenreBadgeColumn);
+
+export { GenreColumnMemo as GenreBadgeColumn };
@@ -1,10 +1,15 @@
-.group {
-    gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
-    padding: var(--theme-spacing-xs) 0;
+.genres-container {
+    display: -webkit-box;
    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: var(--theme-colors-foreground-muted);
 }

-.group a {
-    cursor: pointer;
-    user-select: none;
+.genres-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.genres-container.large {
+    -webkit-line-clamp: 3;
 }
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { memo, useMemo } from 'react';
 import { generatePath, Link } from 'react-router-dom';

@@ -9,13 +10,9 @@ import {
    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 { Text } from '/@/shared/components/text/text';
 import { Genre } from '/@/shared/types/domain-types';
-import { stringToColor } from '/@/shared/utils/string-to-color';
-
-const MAX_GENRES = 4;

 const GenreColumn = (props: ItemTableListInnerColumn) => {
    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
@@ -25,30 +22,36 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
    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 };
+            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
+                genreId: genre.id,
+            });
+            return { ...genre, path };
        });
    }, [row]);

    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                <Group className={styles.group} wrap="wrap">
-                    {genres.slice(0, MAX_GENRES).map((genre) => (
-                        <Badge
+                <div
+                    className={clsx(styles.genresContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
+                    {genres.map((genre, index) => (
+                        <Text
                            component={Link}
+                            isLink
+                            isMuted
+                            isNoSelect
                            key={genre.id}
-                            style={{
-                                backgroundColor: genre.color,
-                                color: genre.isLight ? 'black' : 'white',
-                            }}
                            to={genre.path}
                        >
                            {genre.name}
-                        </Badge>
+                            {index < genres.length - 1 && ', '}
+                        </Text>
                    ))}
-                </Group>
+                </div>
            </TableColumnContainer>
        );
    }
@@ -0,0 +1,14 @@
+.text-container {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.text-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.text-container.large {
+    -webkit-line-clamp: 3;
+}
@@ -1,3 +1,7 @@
+import clsx from 'clsx';
+
+import styles from './text-column.module.css';
+
 import {
    ItemTableListInnerColumn,
    TableColumnTextContainer,
@@ -10,10 +14,17 @@ export const TextColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'string' && row) {
-        const maxLength = 100;
-        const displayText = row.length > maxLength ? `${row.slice(0, maxLength)}...` : row;
-
-        return <TableColumnTextContainer {...props}>{displayText}</TableColumnTextContainer>;
+        return (
+            <TableColumnTextContainer
+                className={clsx(styles.textContainer, {
+                    [styles.compact]: props.size === 'compact',
+                    [styles.large]: props.size === 'large',
+                })}
+                {...props}
+            >
+                {row}
+            </TableColumnTextContainer>
+        );
    }

    return (