add additional album group metadata rows

src/renderer/features/shared/components/album-group-metadata-config.tsx

@@ -0,0 +1,116 @@
+import { Reorder } from 'motion/react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DraggableItem } from '/@/renderer/features/settings/components/general/draggable-item';
+import {
+    AlbumGroupItem,
+    SortableItem,
+    useAlbumGroupItems,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
+import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
+
+const ALBUM_GROUP_ITEM_LABELS: Array<[AlbumGroupItem, string]> = [
+    [AlbumGroupItem.ALBUM_ARTISTS, 'table.column.albumArtist'],
+    [AlbumGroupItem.RELEASE_DATE, 'table.column.releaseDate'],
+    [AlbumGroupItem.RELEASE_YEAR, 'table.column.releaseYear'],
+    [AlbumGroupItem.SONG_COUNT, 'table.column.songCount'],
+    [AlbumGroupItem.DURATION, 'common.duration'],
+    [AlbumGroupItem.RELEASE_TYPE, 'common.releaseType'],
+    [AlbumGroupItem.GENRES, 'table.column.genre'],
+    [AlbumGroupItem.SIZE, 'table.column.size'],
+];
+
+const mergeItems = (
+    items: SortableItem<AlbumGroupItem>[],
+    itemLabels: Array<[string, string]>,
+): SortableItem<AlbumGroupItem>[] => {
+    const allItemIds = itemLabels.map(([key]) => key);
+
+    const missingItemIds = allItemIds.filter((id) => !items.some((item) => item.id === id));
+
+    const merged = [
+        ...items,
+        ...(missingItemIds.map((id) => ({
+            disabled: true,
+            id,
+        })) as SortableItem<AlbumGroupItem>[]),
+    ];
+
+    const uniqueMerged = merged.filter(
+        (item, index, self) => index === self.findIndex((t) => t.id === item.id),
+    );
+
+    return uniqueMerged.filter((item) => itemLabels.some(([key]) => key === item.id));
+};
+
+export const AlbumGroupMetadataConfig = memo(() => {
+    const { t } = useTranslation();
+    const albumGroupItems = useAlbumGroupItems();
+    const { setAlbumGroupItems } = useSettingsStoreActions();
+
+    const items = useMemo(
+        () => mergeItems(albumGroupItems, ALBUM_GROUP_ITEM_LABELS),
+        [albumGroupItems],
+    );
+
+    const translatedItemMap = useMemo(
+        () =>
+            Object.fromEntries(
+                ALBUM_GROUP_ITEM_LABELS.map(([key, value]) => [key, t(value)]),
+            ) as Record<AlbumGroupItem, string>,
+        [t],
+    );
+
+    const handleChangeDisabled = useCallback(
+        (id: string, enabled: boolean) => {
+            setAlbumGroupItems(
+                items.map((item) => {
+                    if (item.id === id) {
+                        return {
+                            ...item,
+                            disabled: !enabled,
+                        };
+                    }
+
+                    return item;
+                }),
+            );
+        },
+        [items, setAlbumGroupItems],
+    );
+
+    const handleReorder = useCallback(
+        (reorderedItems: SortableItem<AlbumGroupItem>[]) => {
+            setAlbumGroupItems(reorderedItems);
+        },
+        [setAlbumGroupItems],
+    );
+
+    return (
+        <Stack gap="sm" pb="md" pl="md" pr="md">
+            <Stack gap={0}>
+                <Text fw={500} size="sm">
+                    {t('table.config.general.albumGroupMetadata')}
+                </Text>
+            </Stack>
+            <Reorder.Group
+                axis="y"
+                onReorder={handleReorder}
+                style={{ userSelect: 'none' }}
+                values={items}
+            >
+                {items.map((item) => (
+                    <DraggableItem
+                        handleChangeDisabled={handleChangeDisabled}
+                        item={item}
+                        key={item.id}
+                        value={translatedItemMap[item.id]}
+                    />
+                ))}
+            </Reorder.Group>
+        </Stack>
+    );
+});

src/renderer/features/shared/components/table-config.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import styles from './table-config.module.css';
 
 import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
+import { AlbumGroupMetadataConfig } from '/@/renderer/features/shared/components/album-group-metadata-config';
 import {
     ListConfigBooleanControl,
     ListConfigTable,
@@ -74,6 +75,9 @@ export const TableConfig = ({
 
     const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
     const albumGroupImageSize = useSettingsStore((state) => state.general.albumGroupImageSize);
+    const albumGroupShowFavoriteRating = useSettingsStore(
+        (state) => state.general.albumGroupShowFavoriteRating,
+    );
     const imageResTable = useSettingsStore((state) => state.general.imageRes.table);
     const { setList, setSettings } = useSettingsStoreActions();
     const [albumGroupOpen, setAlbumGroupOpen] = useState(false);
@@ -156,11 +160,31 @@ export const TableConfig = ({
                                     ),
                                     id: 'albumImageSize',
                                     label: (
-                                        <Text pl="md">
+                                        <Text fw={500} pl="md" size="sm">
                                             {t('table.config.general.albumImageSize')}
                                         </Text>
                                     ),
                                 },
+                                {
+                                    component: (
+                                        <ListConfigBooleanControl
+                                            onChange={(value) =>
+                                                setSettings({
+                                                    general: {
+                                                        albumGroupShowFavoriteRating: value,
+                                                    },
+                                                })
+                                            }
+                                            value={albumGroupShowFavoriteRating}
+                                        />
+                                    ),
+                                    id: 'albumGroupShowFavoriteRating',
+                                    label: (
+                                        <Text fw={500} pl="md" size="sm">
+                                            {t('table.config.general.albumGroupShowFavoriteRating')}
+                                        </Text>
+                                    ),
+                                },
                             ]
                           : []),
                   ]
@@ -342,6 +366,7 @@ export const TableConfig = ({
         hasAlbumGroupColumn,
         albumGroupOpen,
         albumGroupImageSize,
+        albumGroupShowFavoriteRating,
         imageResTable,
         setSettings,
     ]);
@@ -349,6 +374,9 @@ export const TableConfig = ({
     return (
         <>
             <ListConfigTable options={advancedSettings} />
+            {hasAlbumGroupColumn && tableKey === 'main' && albumGroupOpen && (
+                <AlbumGroupMetadataConfig />
+            )}
             <Divider />
             <TableColumnConfig
                 data={tableColumnsData}