add album column to table

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

@@ -0,0 +1,16 @@
+.album-container {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: var(--theme-colors-foreground-muted);
+    user-select: none;
+}
+
+.album-container.compact {
+    -webkit-line-clamp: 1;
+}
+
+.album-container.large {
+    -webkit-line-clamp: 3;
+}

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

@@ -0,0 +1,77 @@
+import clsx from 'clsx';
+import { memo, useMemo } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import styles from './album-column.module.css';
+
+import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Text } from '/@/shared/components/text/text';
+import { Song } from '/@/shared/types/domain-types';
+
+const AlbumColumn = (props: ItemTableListInnerColumn) => {
+    const row: null | string | undefined = (props.data as (null | string | undefined)[])[
+        props.rowIndex
+    ]?.[props.columns[props.columnIndex].id];
+
+    const song = props.data[props.rowIndex] as Song | undefined;
+    const albumId = song?.albumId;
+
+    const albumPath = useMemo(() => {
+        if (!albumId) return null;
+        return generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId });
+    }, [albumId]);
+
+    if (typeof row === 'string') {
+        if (albumId && albumPath) {
+            return (
+                <TableColumnContainer {...props}>
+                    <Text
+                        className={clsx(styles.albumContainer, {
+                            [styles.compact]: props.size === 'compact',
+                            [styles.large]: props.size === 'large',
+                        })}
+                        component={Link}
+                        isLink
+                        isMuted
+                        isNoSelect
+                        state={{ item: song }}
+                        to={albumPath}
+                    >
+                        {row}
+                    </Text>
+                </TableColumnContainer>
+            );
+        }
+
+        return (
+            <TableColumnContainer {...props}>
+                <Text
+                    className={clsx(styles.albumContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                    isMuted
+                    isNoSelect
+                >
+                    {row}
+                </Text>
+            </TableColumnContainer>
+        );
+    }
+
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
+};
+
+export const AlbumColumnMemo = memo(AlbumColumn);
+
+export { AlbumColumnMemo as AlbumColumn };

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

@@ -19,6 +19,7 @@ import i18n from '/@/i18n/i18n';
 import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
 import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
 import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
+import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
 import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
 import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
 import {
@@ -376,6 +377,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
         case TableColumn.SKIP:
             return <ActionsColumn {...props} {...dragProps} controls={controls} type={type} />;
 
+        case TableColumn.ALBUM:
+            return <AlbumColumn {...props} {...dragProps} controls={controls} type={type} />;
+
         case TableColumn.ALBUM_ARTIST:
             return <AlbumArtistsColumn {...props} {...dragProps} controls={controls} type={type} />;