progress on table columns

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

@@ -0,0 +1,25 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DefaultColumn = (props: ItemTableListInnerColumn) => {
+    const row: any | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+    }
+
+    if (typeof row === 'undefined') {
+        return (
+            <TableColumnContainer {...props}>
+                <Skeleton />
+            </TableColumnContainer>
+        );
+    }
+
+    return null;
+};

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

@@ -0,0 +1,23 @@
+import formatDuration from 'format-duration';
+
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DurationColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return <TableColumnContainer {...props}>{formatDuration(row)}</TableColumnContainer>;
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton />
+        </TableColumnContainer>
+    );
+};

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

@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Genre } from '/@/shared/types/domain-types';
+
+export const GenreColumn = (props: ItemTableListInnerColumn) => {
+    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (Array.isArray(row)) {
+        return (
+            <TableColumnContainer {...props}>
+                {row.map((genre) => genre?.name).join(', ')}
+            </TableColumnContainer>
+        );
+    }
+
+    return null;
+};

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

@@ -0,0 +1,3 @@
+.skeleton {
+    aspect-ratio: 1 / 1;
+}

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

@@ -0,0 +1,28 @@
+import styles from './image-column.module.css';
+
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Image } from '/@/shared/components/image/image';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const ImageColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return (
+            <TableColumnContainer {...props}>
+                <Image src={row} />
+            </TableColumnContainer>
+        );
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton containerClassName={styles.skeleton} />
+        </TableColumnContainer>
+    );
+};

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

@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const NameColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton />
+        </TableColumnContainer>
+    );
+};

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

@@ -0,0 +1,8 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+
+export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
+    return <TableColumnContainer {...props}>{props.rowIndex + 1}</TableColumnContainer>;
+};

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

@@ -0,0 +1,21 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding: var(--theme-spacing-xs);
+}
+
+.content {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.3;
+}
+
+.container.compact {
+    padding: var(--theme-spacing-xs);
+}

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

@@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import { CellComponentProps } from 'react-window-v2';
+
+import styles from './item-table-list-column.module.css';
+
+import { DefaultColumn } from '/@/renderer/components/item-list/item-table-list/columns/default-column';
+import { DurationColumn } from '/@/renderer/components/item-list/item-table-list/columns/duration-column';
+import { GenreColumn } from '/@/renderer/components/item-list/item-table-list/columns/genre-column';
+import { ImageColumn } from '/@/renderer/components/item-list/item-table-list/columns/image-column';
+import { RowIndexColumn } from '/@/renderer/components/item-list/item-table-list/columns/row-index-column';
+import { CellProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { Text } from '/@/shared/components/text/text';
+import { TableColumn } from '/@/shared/types/types';
+
+export interface ItemTableListColumn extends CellComponentProps<CellProps> {}
+
+export interface ItemTableListInnerColumn extends ItemTableListColumn {
+    type: TableColumn;
+}
+
+export const ItemTableListColumn = (props: ItemTableListColumn) => {
+    const type = props.columns[props.columnIndex].id as TableColumn;
+
+    switch (type) {
+        case TableColumn.DURATION:
+            return <DurationColumn {...props} type={type} />;
+        case TableColumn.GENRE:
+            return <GenreColumn {...props} type={type} />;
+        case TableColumn.IMAGE:
+            return <ImageColumn {...props} type={type} />;
+        case TableColumn.ROW_INDEX:
+            return <RowIndexColumn {...props} type={type} />;
+        default:
+            return <DefaultColumn {...props} type={type} />;
+    }
+};
+
+const NonMutedColumns = [TableColumn.TITLE];
+
+export const TableColumnContainer = (
+    props: ItemTableListColumn & {
+        children: React.ReactNode;
+        className?: string;
+        containerClassName?: string;
+        type: TableColumn;
+    },
+) => {
+    return (
+        <div
+            className={clsx(styles.container, props.containerClassName, {
+                [styles.compact]: props.size === 'compact',
+            })}
+            onClick={(e) => props.handleExpand(e, props.data[props.rowIndex], props.itemType)}
+            style={props.style}
+        >
+            <Text
+                className={clsx(styles.content, props.className)}
+                isMuted={!NonMutedColumns.includes(props.type)}
+                isNoSelect
+            >
+                {props.children}
+            </Text>
+        </div>
+    );
+};

src/shared/types/types.ts

@@ -156,7 +156,9 @@ export enum TableColumn {
     DATE_ADDED = 'dateAdded',
     DISC_NUMBER = 'discNumber',
     DURATION = 'duration',
-    GENRE = 'genre',
+    GENRE = 'genres',
+    ID = 'id',
+    IMAGE = 'imageUrl',
     LAST_PLAYED = 'lastPlayedAt',
     OWNER = 'username',
     PATH = 'path',
@@ -166,7 +168,7 @@ export enum TableColumn {
     SIZE = 'size',
     SKIP = 'skip',
     SONG_COUNT = 'songCount',
-    TITLE = 'title',
+    TITLE = 'name',
     TITLE_COMBINED = 'titleCombined',
     TRACK_NUMBER = 'trackNumber',
     USER_FAVORITE = 'userFavorite',