add composer column to song/album table (#1559)

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

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

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

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import { memo } from 'react';
+
+import styles from './composer-column.module.css';
+
+import {
+    ColumnNullFallback,
+    ColumnSkeletonVariable,
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
+import { Album, RelatedArtist, Song } from '/@/shared/types/domain-types';
+
+const ComposerColumn = (props: ItemTableListInnerColumn) => {
+    const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
+    const item = rowItem as Album | Song | undefined;
+
+    const composers = item?.participants?.composer || [];
+
+    if (composers && Array.isArray(composers) && composers.length > 0) {
+        return (
+            <TableColumnContainer {...props}>
+                <div
+                    className={clsx(styles.composersContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
+                    <JoinedArtists
+                        artistName=""
+                        artists={composers as RelatedArtist[]}
+                        linkProps={{ fw: 400, isMuted: true }}
+                        rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
+                    />
+                </div>
+            </TableColumnContainer>
+        );
+    }
+
+    if (composers?.length === 0 || item === null || item === undefined) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
+};
+
+export const ComposerColumnMemo = memo(ComposerColumn);
+
+export { ComposerColumnMemo as ComposerColumn };