move detail list to its own config

src/renderer/components/item-list/helpers/use-item-list-column-reorder.ts

@@ -7,14 +7,19 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnReorderProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReorderProps) => {
+export const useItemListColumnReorder = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnReorderProps) => {
     const { setList } = useSettingsStoreActions();
 
     const handleColumnReordered = useCallback(
         (columnIdFrom: TableColumn, columnIdTo: TableColumn, edge: Edge | null) => {
-            const columns = useSettingsStore.getState().lists[itemListKey]?.table.columns;
+            const list = useSettingsStore.getState().lists[itemListKey];
+            const columns = tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
 
             if (!columns) {
                 return;
@@ -83,13 +88,20 @@ export const useItemListColumnReorder = ({ itemListKey }: UseItemListColumnReord
             // Insert the column at the new position
             newColumns.splice(newIndex, 0, updatedMovedColumn);
 
-            setList(itemListKey, {
-                table: {
-                    columns: newColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: newColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: newColumns,
+                    },
+                });
+            }
         },
-        [itemListKey, setList],
+        [itemListKey, setList, tableKey],
     );
 
     return { handleColumnReordered };

src/renderer/components/item-list/helpers/use-item-list-column-resize.ts

@@ -5,11 +5,18 @@ import { ItemListKey, TableColumn } from '/@/shared/types/types';
 
 interface UseItemListColumnResizeProps {
     itemListKey: ItemListKey;
+    tableKey?: 'detail' | 'main';
 }
 
-export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResizeProps) => {
+export const useItemListColumnResize = ({
+    itemListKey,
+    tableKey = 'main',
+}: UseItemListColumnResizeProps) => {
     const { setList } = useSettingsStoreActions();
-    const columns = useSettingsStore((state) => state.lists[itemListKey]?.table.columns);
+    const columns = useSettingsStore((state) => {
+        const list = state.lists[itemListKey];
+        return tableKey === 'detail' ? list?.detail?.columns : list?.table?.columns;
+    });
 
     const handleColumnResized = useCallback(
         (columnId: TableColumn, width: number) => {
@@ -19,13 +26,20 @@ export const useItemListColumnResize = ({ itemListKey }: UseItemListColumnResize
                 column.id === columnId ? { ...column, width } : column,
             );
 
-            setList(itemListKey, {
-                table: {
-                    columns: updatedColumns,
-                },
-            });
+            if (tableKey === 'detail') {
+                type SetListData = Parameters<
+                    ReturnType<typeof useSettingsStoreActions>['setList']
+                >[1];
+                setList(itemListKey, { detail: { columns: updatedColumns } } as SetListData);
+            } else {
+                setList(itemListKey, {
+                    table: {
+                        columns: updatedColumns,
+                    },
+                });
+            }
         },
-        [columns, itemListKey, setList],
+        [columns, itemListKey, setList, tableKey],
     );
 
     return { handleColumnResized };

src/renderer/components/item-list/item-detail-list/item-detail.module.css

@@ -66,6 +66,8 @@
 }
 
 .track-header-cell {
+    display: flex;
+    align-items: center;
     min-width: 0;
     padding-right: var(--theme-spacing-sm);
     padding-left: var(--theme-spacing-sm);

src/renderer/components/item-list/item-detail-list/item-detail.tsx

@@ -724,7 +724,7 @@ export const ItemDetailList = ({
 
     const internalState = useItemListState(getDataFn, extractRowIdSong);
 
-    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM_DETAIL]?.table);
+    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM]?.detail);
     const trackColumns = useMemo((): ItemTableListColumnConfig[] => {
         const raw = tableConfig?.columns;
         if (raw && raw.length > 0) {

src/renderer/components/item-list/types.ts

@@ -98,7 +98,7 @@ export interface ItemListTableComponentProps<TQuery> extends ItemListComponentPr
     enableRowHoverHighlight?: boolean;
     enableSelection?: boolean;
     enableVerticalBorders?: boolean;
-    size?: 'compact' | 'default';
+    size?: 'compact' | 'default' | 'large';
 }
 
 export interface ItemTableListColumnConfig {