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

src/i18n/locales/en.json

@@ -1086,6 +1086,7 @@
                 "bpm": "$t(common.bpm)",
                 "channels": "$t(common.channel_other)",
                 "codec": "$t(common.codec)",
+                "composer": "composer",
                 "dateAdded": "date added",
                 "discNumber": "disc number",
                 "duration": "$t(common.duration)",

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 };

src/renderer/components/item-list/item-table-list/default-columns.ts

@@ -94,6 +94,15 @@ export const SONG_TABLE_COLUMNS: DefaultTableColumn[] = [
         value: TableColumn.ARTIST,
         width: 300,
     },
+    {
+        align: 'start',
+        autoSize: false,
+        isEnabled: false,
+        label: i18n.t('table.config.label.composer', { postProcess: 'titleCase' }),
+        pinned: null,
+        value: TableColumn.COMPOSER,
+        width: 300,
+    },
     {
         align: 'start',
         autoSize: false,
@@ -360,6 +369,15 @@ export const ALBUM_TABLE_COLUMNS: DefaultTableColumn[] = [
         value: TableColumn.ARTIST,
         width: 300,
     },
+    {
+        align: 'start',
+        autoSize: false,
+        isEnabled: false,
+        label: i18n.t('table.config.label.composer', { postProcess: 'titleCase' }),
+        pinned: null,
+        value: TableColumn.COMPOSER,
+        width: 300,
+    },
     {
         align: 'center',
         autoSize: false,

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

@@ -26,6 +26,7 @@ import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/
 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 { ComposerColumn } from '/@/renderer/components/item-list/item-table-list/columns/composer-column';
 import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
 import {
     AbsoluteDateColumn,
@@ -482,6 +483,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
             case TableColumn.TRACK_NUMBER:
                 return <NumericColumn {...props} {...dragProps} controls={controls} type={type} />;
 
+            case TableColumn.COMPOSER:
+                return <ComposerColumn {...props} {...dragProps} controls={controls} type={type} />;
+
             case TableColumn.DATE_ADDED:
                 return <DateColumn {...props} {...dragProps} controls={controls} type={type} />;
 
@@ -1126,6 +1130,9 @@ const columnLabelMap: Record<TableColumn, ReactNode | string> = {
     [TableColumn.CHANNELS]: i18n.t('table.column.channels', { postProcess: 'upperCase' }) as string,
     [TableColumn.CODEC]: i18n.t('table.column.codec', { postProcess: 'upperCase' }) as string,
     [TableColumn.COMMENT]: i18n.t('table.column.comment', { postProcess: 'upperCase' }) as string,
+    [TableColumn.COMPOSER]: i18n.t('table.config.label.composer', {
+        postProcess: 'upperCase',
+    }) as string,
     [TableColumn.DATE_ADDED]: i18n.t('table.column.dateAdded', {
         postProcess: 'upperCase',
     }) as string,

src/renderer/store/settings.store.ts

@@ -1941,10 +1941,52 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                     });
                 }
 
+                if (version <= 21) {
+                    // Add COMPOSER column to SONG and ALBUM table configs
+                    const composerColumn: ItemTableListColumnConfig = {
+                        align: 'start',
+                        autoSize: false,
+                        id: TableColumn.COMPOSER,
+                        isEnabled: false,
+                        pinned: null,
+                        width: 300,
+                    };
+
+                    const listKeysToUpdate: (LibraryItem | string)[] = [
+                        LibraryItem.SONG,
+                        LibraryItem.ALBUM,
+                        LibraryItem.PLAYLIST_SONG,
+                        LibraryItem.QUEUE_SONG,
+                        ItemListKey.ALBUM_DETAIL,
+                        ItemListKey.FULL_SCREEN,
+                        ItemListKey.SIDE_QUEUE,
+                    ];
+
+                    listKeysToUpdate.forEach((listKey) => {
+                        const listConfig = state.lists[listKey];
+                        if (listConfig?.table?.columns) {
+                            const columns = listConfig.table.columns;
+                            const hasComposer = columns.some(
+                                (col) => col.id === TableColumn.COMPOSER,
+                            );
+                            if (!hasComposer) {
+                                const artistIndex = columns.findIndex(
+                                    (col) => col.id === TableColumn.ARTIST,
+                                );
+                                if (artistIndex >= 0) {
+                                    columns.splice(artistIndex + 1, 0, composerColumn);
+                                } else {
+                                    columns.push(composerColumn);
+                                }
+                            }
+                        }
+                    });
+                }
+
                 return persistedState;
             },
             name: 'store_settings',
-            version: 21,
+            version: 22,
         },
     ),
 );

src/shared/types/types.ts

@@ -168,6 +168,7 @@ export enum TableColumn {
     CHANNELS = 'channels',
     CODEC = 'container',
     COMMENT = 'comment',
+    COMPOSER = 'composer',
     DATE_ADDED = 'createdAt',
     DISC_NUMBER = 'discNumber',
     DURATION = 'duration',