refactor to reuse ItemTableListColumnConfig for detail columns

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
+import {
+    ALBUM_TABLE_COLUMNS,
+    SONG_TABLE_COLUMNS,
+} from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
@@ -94,6 +97,17 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
             <Group gap="sm" wrap="nowrap">
                 <ListDisplayTypeToggleButton listKey={ItemListKey.ALBUM} />
                 <ListConfigMenu
+                    detailConfig={{
+                        listKey: ItemListKey.ALBUM_DETAIL,
+                        optionsConfig: {
+                            autoFitColumns: { hidden: true },
+                            enableHeader: { hidden: true },
+                            itemsPerPage: { hidden: true },
+                            pagination: { hidden: true },
+                            size: { hidden: true },
+                        },
+                        tableColumnsData: SONG_TABLE_COLUMNS,
+                    }}
                     listKey={ItemListKey.ALBUM}
                     tableColumnsData={ALBUM_TABLE_COLUMNS}
                 />

src/renderer/features/shared/components/list-config-menu.tsx

@@ -72,6 +72,12 @@ export const ListConfigBooleanControl = ({
     );
 };
 
+export interface ListConfigMenuDetailConfig {
+    listKey: ItemListKey;
+    optionsConfig?: ListConfigMenuOptionsConfig['detail'];
+    tableColumnsData: { label: string; value: string }[];
+}
+
 export interface ListConfigMenuDisplayTypeConfig {
     disabled?: boolean;
     hidden?: boolean;
@@ -84,6 +90,9 @@ export interface ListConfigMenuOptionConfig {
 }
 
 export interface ListConfigMenuOptionsConfig {
+    detail?: {
+        [key: string]: ListConfigMenuOptionConfig;
+    };
     grid?: {
         [key: string]: ListConfigMenuOptionConfig;
     };
@@ -94,6 +103,7 @@ export interface ListConfigMenuOptionsConfig {
 
 interface ListConfigMenuProps {
     buttonProps?: ActionIconProps;
+    detailConfig?: ListConfigMenuDetailConfig;
     displayTypes?: ListConfigMenuDisplayTypeConfig[];
     listKey: ItemListKey;
     optionsConfig?: ListConfigMenuOptionsConfig;
@@ -181,6 +191,18 @@ const Config = ({
     ...props
 }: ListConfigMenuProps & { displayType: ListDisplayType }) => {
     switch (displayType) {
+        case ListDisplayType.DETAIL:
+            if (props.detailConfig) {
+                return (
+                    <TableConfig
+                        listKey={props.detailConfig.listKey}
+                        optionsConfig={props.detailConfig.optionsConfig}
+                        tableColumnsData={props.detailConfig.tableColumnsData}
+                    />
+                );
+            }
+            return null;
+
         case ListDisplayType.GRID:
             return (
                 <GridConfig
@@ -199,10 +221,6 @@ const Config = ({
                 />
             );
 
-        case ListDisplayType.DETAIL:
-            // Detail view doesn't have specific configuration options
-            return null;
-
         default:
             return null;
     }