add new table to album detail

src/renderer/components/item-list/item-table-list/hooks/use-fixed-table-header.tsx

@@ -0,0 +1,43 @@
+import { useInView } from 'motion/react';
+import { RefObject, useMemo } from 'react';
+
+import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { Platform } from '/@/shared/types/types';
+
+export const useFixedTableHeader = ({
+    containerRef,
+    enabled,
+    headerRef,
+}: {
+    containerRef: RefObject<HTMLDivElement | null>;
+    enabled: boolean;
+    headerRef: RefObject<HTMLDivElement | null>;
+}) => {
+    const { windowBarStyle } = useWindowSettings();
+
+    const topMargin =
+        windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
+            ? '-130px'
+            : '-100px';
+
+    const isTableHeaderInView = useInView(headerRef, {
+        margin: `${topMargin} 0px 0px 0px`,
+    });
+
+    const isTableInView = useInView(containerRef, {
+        margin: `${topMargin} 0px 0px 0px`,
+    });
+
+    const shouldShowStickyHeader = useMemo(() => {
+        return enabled && !isTableHeaderInView && isTableInView;
+    }, [enabled, isTableHeaderInView, isTableInView]);
+
+    const stickyTop = useMemo(() => {
+        return windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS ? 95 : 65;
+    }, [windowBarStyle]);
+
+    return {
+        shouldShowStickyHeader,
+        stickyTop,
+    };
+};

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

@@ -11,7 +11,7 @@ import {
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
-import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { CellComponentProps } from 'react-window-v2';
 
 import styles from './item-table-list-column.module.css';
@@ -76,6 +76,48 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
     const item = isDataRow ? props.data[props.rowIndex] : null;
     const shouldEnableDrag = !!props.enableDrag && isDataRow && !!item;
 
+    // Check if this row should render a group header (must be before conditional returns)
+    // Group headers are rendered in the main grid at columnIndex 0 (first unpinned column)
+    // We detect this by checking if columnIndex equals pinnedLeftColumnCount (first column of main grid)
+    // or if columnIndex is 0 and there are no pinned columns
+    // Groups are defined by itemCount, so we calculate which group this row belongs to
+    let groupHeader: 'GROUP_HEADER' | null | ReactElement = null;
+    if (props.groups && isDataRow && props.groups.length > 0) {
+        // Calculate which group this row index belongs to
+        let cumulativeDataIndex = 0;
+        const headerOffset = props.enableHeader ? 1 : 0;
+
+        const originalData = props.data.filter((item) => item !== null);
+
+        for (let groupIndex = 0; groupIndex < props.groups.length; groupIndex++) {
+            const group = props.groups[groupIndex];
+            const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
+
+            if (props.rowIndex === groupHeaderIndex) {
+                const isMainGridFirstColumn =
+                    props.columnIndex === (props.pinnedLeftColumnCount || 0) ||
+                    (props.columnIndex === 0 && (props.pinnedLeftColumnCount || 0) === 0);
+
+                // Only render group header in the first column of the main grid
+                if (isMainGridFirstColumn) {
+                    groupHeader = group.render({
+                        data: originalData,
+                        groupIndex,
+                        index: props.rowIndex,
+                        internalState: props.internalState,
+                        startDataIndex: cumulativeDataIndex,
+                    });
+                } else {
+                    // For other columns in this row, return marker to skip rendering
+                    groupHeader = 'GROUP_HEADER';
+                }
+                break;
+            }
+
+            cumulativeDataIndex += group.itemCount;
+        }
+    }
+
     const {
         isDraggedOver,
         isDragging: isDraggingLocal,
@@ -264,6 +306,49 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
         return <TableColumnHeaderContainer {...props} controls={controls} type={type} />;
     }
 
+    // Render group header if this row should have one
+    if (groupHeader) {
+        if (groupHeader === 'GROUP_HEADER') {
+            // For non-first columns, render empty cell (group header spans all columns)
+            return null;
+        }
+        // For first column of main grid, render the group header spanning full table width
+        // Calculate widths to span across all grids using calculated column widths
+        const pinnedLeftWidth =
+            props.pinnedLeftColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
+        const pinnedRightWidth =
+            props.pinnedRightColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
+
+        // Use calculated column widths if available (they include all columns in order)
+        // Otherwise fall back to summing column config widths
+        const totalTableWidth = props.calculatedColumnWidths
+            ? props.calculatedColumnWidths.reduce((sum, width) => sum + width, 0)
+            : pinnedLeftWidth +
+              props.columns
+                  .slice(
+                      props.pinnedLeftColumnCount || 0,
+                      props.columns.length - (props.pinnedRightColumnCount || 0),
+                  )
+                  .reduce((sum, col) => sum + col.width, 0) +
+              pinnedRightWidth;
+
+        // Use negative margins to extend beyond cell boundaries and span full width
+        // Apply props.style for virtualization positioning (top, left, position, etc.)
+        return (
+            <div
+                style={{
+                    ...props.style, // Apply virtualization styles (position, top, left, width, height)
+                    backgroundColor: 'var(--theme-bg-secondary)',
+                    borderBottom: '1px solid var(--theme-border-color)',
+                    marginLeft: pinnedLeftWidth > 0 ? `-${pinnedLeftWidth}px` : 0,
+                    width: `${totalTableWidth}px`,
+                }}
+            >
+                {groupHeader}
+            </div>
+        );
+    }
+
     switch (type) {
         case TableColumn.ACTIONS:
         case TableColumn.SKIP:

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

@@ -45,6 +45,49 @@
     position: relative;
 }
 
+.item-table-pinned-rows-grid-container.header-fixed {
+    position: fixed !important;
+    top: 65px;
+    z-index: 15;
+    background-color: var(--theme-bg-primary);
+    box-shadow: 0 -1px 0 0 var(--theme-colors-border);
+    transition: position 0.2s ease-in-out;
+}
+
+.item-table-pinned-rows-grid-container.header-window-bar {
+    top: 95px;
+}
+
+.item-table-list-container.header-fixed-margin {
+    margin-top: 36px !important;
+}
+
+.sticky-header {
+    position: fixed;
+    z-index: 15;
+    display: flex;
+    flex-direction: row;
+    padding: 0 2rem;
+    margin: 0 -2rem;
+    pointer-events: none;
+    background-color: var(--theme-colors-background);
+    border-bottom: 1px solid var(--theme-colors-border);
+    box-shadow: 0 -1px 0 0 var(--theme-colors-border);
+}
+
+.sticky-header-row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.sticky-header-section {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    pointer-events: auto;
+}
+
 .item-table-pinned-rows-grid-container.with-header::after {
     position: absolute;
     right: 0;

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

@@ -7,6 +7,7 @@ import { AnimatePresence } from 'motion/react';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import React, {
     type JSXElementConstructor,
+    ReactElement,
     Ref,
     useCallback,
     useEffect,
@@ -18,6 +19,7 @@ import React, {
 } from 'react';
 import { type CellComponentProps, Grid } from 'react-window-v2';
 
+import { useFixedTableHeader } from './hooks/use-fixed-table-header';
 import styles from './item-table-list.module.css';
 
 import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
@@ -97,6 +99,7 @@ interface VirtualizedTableGridProps {
     enableSelection: boolean;
     enableVerticalBorders: boolean;
     getRowHeight: (index: number, cellProps: TableItemProps) => number;
+    groups?: TableGroupHeader[];
     headerHeight: number;
     internalState: ItemListStateActions;
     itemType: LibraryItem;
@@ -104,11 +107,11 @@ interface VirtualizedTableGridProps {
     onRangeChanged?: ItemTableListProps['onRangeChanged'];
     parsedColumns: ReturnType<typeof parseTableColumns>;
     pinnedLeftColumnCount: number;
-    pinnedLeftColumnRef: React.RefObject<HTMLDivElement>;
+    pinnedLeftColumnRef: React.RefObject<HTMLDivElement | null>;
     pinnedRightColumnCount: number;
-    pinnedRightColumnRef: React.RefObject<HTMLDivElement>;
+    pinnedRightColumnRef: React.RefObject<HTMLDivElement | null>;
     pinnedRowCount: number;
-    pinnedRowRef: React.RefObject<HTMLDivElement>;
+    pinnedRowRef: React.RefObject<HTMLDivElement | null>;
     playerContext: PlayerContext;
     showLeftShadow: boolean;
     showRightShadow: boolean;
@@ -137,6 +140,7 @@ const VirtualizedTableGrid = React.memo(
         enableSelection,
         enableVerticalBorders,
         getRowHeight,
+        groups,
         headerHeight,
         internalState,
         itemType,
@@ -163,12 +167,71 @@ const VirtualizedTableGrid = React.memo(
             [calculatedColumnWidths],
         );
 
+        // Calculate pinned column widths for group header positioning
+        const pinnedLeftColumnWidths = useMemo(() => {
+            return Array.from({ length: pinnedLeftColumnCount }, (_, i) => columnWidth(i));
+        }, [pinnedLeftColumnCount, columnWidth]);
+
+        const pinnedRightColumnWidths = useMemo(() => {
+            return Array.from({ length: pinnedRightColumnCount }, (_, i) =>
+                columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
+            );
+        }, [pinnedRightColumnCount, pinnedLeftColumnCount, totalColumnCount, columnWidth]);
+
+        // Create data array with group headers inserted as null values
+        // Groups are defined by itemCount, so we calculate indexes based on cumulative item counts
+        const dataWithGroups = useMemo(() => {
+            const result: (null | unknown)[] = enableHeader ? [null] : [];
+
+            if (!groups || groups.length === 0) {
+                // No groups, just add all data
+                result.push(...data);
+                return result;
+            }
+
+            // Calculate group header indexes based on itemCounts
+            const groupIndexes: number[] = [];
+            let cumulativeDataIndex = 0;
+            const headerOffset = enableHeader ? 1 : 0;
+
+            groups.forEach((group, groupIndex) => {
+                // Group header appears before its items
+                // Index = header offset + cumulative data index + number of previous group headers
+                const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
+                groupIndexes.push(groupHeaderIndex);
+                cumulativeDataIndex += group.itemCount;
+            });
+
+            let dataIndex = 0;
+            const startIndex = enableHeader ? 1 : 0;
+            let groupHeaderCount = 0;
+
+            // Iterate through the expanded row space (data + group headers)
+            for (
+                let rowIndex = startIndex;
+                rowIndex < startIndex + data.length + groupIndexes.length;
+                rowIndex++
+            ) {
+                // Check if this row should have a group header
+                const expectedGroupIndex = groupIndexes[groupHeaderCount];
+                if (expectedGroupIndex !== undefined && rowIndex === expectedGroupIndex) {
+                    result.push(null); // Group header row
+                    groupHeaderCount++;
+                } else if (dataIndex < data.length) {
+                    result.push(data[dataIndex]);
+                    dataIndex++;
+                }
+            }
+            return result;
+        }, [data, enableHeader, groups]);
+
         const itemProps: TableItemProps = useMemo(
             () => ({
+                calculatedColumnWidths,
                 cellPadding,
                 columns: parsedColumns,
                 controls,
-                data: enableHeader ? [null, ...data] : data,
+                data: dataWithGroups,
                 enableAlternateRowColors,
                 enableColumnReorder,
                 enableColumnResize,
@@ -180,31 +243,42 @@ const VirtualizedTableGrid = React.memo(
                 enableSelection,
                 enableVerticalBorders,
                 getRowHeight,
+                groups,
                 internalState,
                 itemType,
+                pinnedLeftColumnCount,
+                pinnedLeftColumnWidths,
+                pinnedRightColumnCount,
+                pinnedRightColumnWidths,
                 playerContext,
                 size,
                 tableId,
             }),
             [
+                calculatedColumnWidths,
                 cellPadding,
                 controls,
                 parsedColumns,
-                enableHeader,
+                dataWithGroups,
-                data,
                 enableAlternateRowColors,
                 enableColumnReorder,
                 enableColumnResize,
                 enableDrag,
                 enableExpansion,
+                enableHeader,
                 enableHorizontalBorders,
                 enableRowHoverHighlight,
                 enableSelection,
                 enableVerticalBorders,
                 getRowHeight,
+                groups,
                 internalState,
-                playerContext,
                 itemType,
+                pinnedLeftColumnCount,
+                pinnedLeftColumnWidths,
+                pinnedRightColumnCount,
+                pinnedRightColumnWidths,
+                playerContext,
                 size,
                 tableId,
             ],
@@ -490,7 +564,20 @@ const VirtualizedTableGrid = React.memo(
 
 VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
 
+export interface TableGroupHeader {
+    itemCount: number;
+    render: (props: {
+        data: unknown[];
+        groupIndex: number;
+        index: number;
+        internalState: ItemListStateActions;
+        startDataIndex: number;
+    }) => ReactElement;
+    rowHeight?: ((index: number) => number) | number;
+}
+
 export interface TableItemProps {
+    calculatedColumnWidths?: number[];
     cellPadding?: ItemTableListProps['cellPadding'];
     columns: ItemTableListColumnConfig[];
     controls: ItemControls;
@@ -506,9 +593,14 @@ export interface TableItemProps {
     enableSelection?: ItemTableListProps['enableSelection'];
     enableVerticalBorders?: ItemTableListProps['enableVerticalBorders'];
     getRowHeight: (index: number, cellProps: TableItemProps) => number;
+    groups?: TableGroupHeader[];
     internalState: ItemListStateActions;
     itemType: ItemTableListProps['itemType'];
     onRowClick?: (item: any, event: React.MouseEvent<HTMLDivElement>) => void;
+    pinnedLeftColumnCount?: number;
+    pinnedLeftColumnWidths?: number[];
+    pinnedRightColumnCount?: number;
+    pinnedRightColumnWidths?: number[];
     playerContext: PlayerContext;
     size?: ItemTableListProps['size'];
     tableId: string;
@@ -528,8 +620,10 @@ interface ItemTableListProps {
     enableHorizontalBorders?: boolean;
     enableRowHoverHighlight?: boolean;
     enableSelection?: boolean;
+    enableStickyHeader?: boolean;
     enableVerticalBorders?: boolean;
     getRowId?: ((item: unknown) => string) | string;
+    groups?: TableGroupHeader[];
     headerHeight?: number;
     initialTop?: {
         behavior?: 'auto' | 'smooth';
@@ -564,8 +658,10 @@ export const ItemTableList = ({
     enableHorizontalBorders = false,
     enableRowHoverHighlight = true,
     enableSelection = true,
+    enableStickyHeader = false,
     enableVerticalBorders = false,
     getRowId,
+    groups,
     headerHeight = 40,
     initialTop,
     itemType,
@@ -666,7 +762,15 @@ export const ItemTableList = ({
     const pinnedRightColumnCount = parsedColumns.filter((col) => col.pinned === 'right').length;
 
     const pinnedRowCount = enableHeader ? 1 : 0;
-    const totalRowCount = totalItemCount - pinnedRowCount;
+
+    // Calculate group header row count - each group has one header row
+    const groupHeaderRowCount = useMemo(() => {
+        if (!groups || groups.length === 0) return 0;
+        return groups.length;
+    }, [groups]);
+
+    // Group headers are inserted at specific indexes, so they add to the total row count
+    const totalRowCount = totalItemCount - pinnedRowCount + groupHeaderRowCount;
     const totalColumnCount = columnCount - pinnedLeftColumnCount - pinnedRightColumnCount;
     const pinnedRowRef = useRef<HTMLDivElement>(null);
     const rowRef = useRef<HTMLDivElement>(null);
@@ -680,6 +784,59 @@ export const ItemTableList = ({
     const handleRef = useRef<ItemListHandle | null>(null);
     const containerFocusRef = useRef<HTMLDivElement | null>(null);
 
+    const { shouldShowStickyHeader, stickyTop } = useFixedTableHeader({
+        containerRef: containerFocusRef,
+        enabled: enableHeader && enableStickyHeader,
+        headerRef: pinnedRowRef,
+    });
+
+    const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+    // Sync scroll position and update position of sticky header
+    useEffect(() => {
+        if (
+            !shouldShowStickyHeader ||
+            !stickyHeaderRef.current ||
+            !rowRef.current ||
+            !containerFocusRef.current
+        ) {
+            return;
+        }
+
+        const stickyHeader = stickyHeaderRef.current;
+        const stickyMainSection = stickyHeader.querySelector(
+            `.${styles.stickyHeaderSection}`,
+        ) as HTMLDivElement;
+        const mainGrid = rowRef.current.childNodes[0] as HTMLDivElement;
+        const container = containerFocusRef.current;
+
+        if (!stickyMainSection || !mainGrid || !container) {
+            return;
+        }
+
+        const updatePosition = () => {
+            const containerRect = container.getBoundingClientRect();
+            stickyHeader.style.left = `${containerRect.left}px`;
+        };
+
+        const syncScroll = () => {
+            stickyMainSection.scrollLeft = mainGrid.scrollLeft;
+        };
+
+        updatePosition();
+        syncScroll();
+
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        mainGrid.addEventListener('scroll', syncScroll);
+
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+            mainGrid.removeEventListener('scroll', syncScroll);
+        };
+    }, [shouldShowStickyHeader]);
+
     useEffect(() => {
         const el = rowRef.current;
         if (!el) return;
@@ -1177,9 +1334,12 @@ export const ItemTableList = ({
         const row = rowRef.current?.childNodes[0] as HTMLDivElement;
 
         if (!row) {
+            const timeout = setTimeout(() => {
                 setShowLeftShadow(false);
                 setShowRightShadow(false);
-            return;
+            }, 0);
+
+            return () => clearTimeout(timeout);
         }
 
         const checkScrollPosition = () => {
@@ -1204,13 +1364,16 @@ export const ItemTableList = ({
         const row = rowRef.current?.childNodes[0] as HTMLDivElement;
 
         if (!row || !enableHeader) {
+            const timeout = setTimeout(() => {
                 setShowTopShadow(false);
-            return;
+            }, 0);
+
+            return () => clearTimeout(timeout);
         }
 
         const checkScrollPosition = () => {
-            const scrollTop = row.scrollTop;
+            const currentScrollTop = row.scrollTop;
-            setShowTopShadow(scrollTop > 0);
+            setShowTopShadow(currentScrollTop > 0);
         };
 
         checkScrollPosition();
@@ -1226,6 +1389,33 @@ export const ItemTableList = ({
         (index: number, cellProps: TableItemProps) => {
             const height = size === 'compact' ? 40 : size === 'large' ? 88 : 64;
 
+            // Check if this row is a group header row and has a custom row height
+            if (groups && groups.length > 0) {
+                // Calculate which group this index belongs to
+                let cumulativeDataIndex = 0;
+                const headerOffset = enableHeader ? 1 : 0;
+
+                for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+                    const group = groups[groupIndex];
+                    const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
+
+                    if (index === groupHeaderIndex) {
+                        if (group.rowHeight !== undefined) {
+                            const groupRowHeight =
+                                typeof group.rowHeight === 'number'
+                                    ? group.rowHeight
+                                    : group.rowHeight(index);
+                            if (groupRowHeight !== undefined) {
+                                return groupRowHeight;
+                            }
+                        }
+                        break;
+                    }
+
+                    cumulativeDataIndex += group.itemCount;
+                }
+            }
+
             const baseHeight =
                 typeof rowHeight === 'number' ? rowHeight : rowHeight?.(index, cellProps) || height;
 
@@ -1236,12 +1426,55 @@ export const ItemTableList = ({
 
             return baseHeight;
         },
-        [enableHeader, headerHeight, rowHeight, pinnedRowCount, size],
+        [enableHeader, headerHeight, rowHeight, pinnedRowCount, size, groups],
     );
 
     const getDataFn = useCallback(() => {
-        return enableHeader ? [null, ...data] : data;
+        // Reconstruct data array with group headers inserted
-    }, [data, enableHeader]);
+        // Groups are defined by itemCount, so we calculate indexes based on cumulative item counts
+        const result: (null | unknown)[] = enableHeader ? [null] : [];
+
+        if (!groups || groups.length === 0) {
+            // No groups, just add all data
+            result.push(...data);
+            return result;
+        }
+
+        // Calculate group header indexes based on itemCounts
+        const groupIndexes: number[] = [];
+        let cumulativeDataIndex = 0;
+        const headerOffset = enableHeader ? 1 : 0;
+
+        groups.forEach((group, groupIndex) => {
+            // Group header appears before its items
+            // Index = header offset + cumulative data index + number of previous group headers
+            const groupHeaderIndex = headerOffset + cumulativeDataIndex + groupIndex;
+            groupIndexes.push(groupHeaderIndex);
+            cumulativeDataIndex += group.itemCount;
+        });
+
+        let dataIndex = 0;
+        const startIndex = enableHeader ? 1 : 0;
+        let groupHeaderCount = 0;
+
+        // Iterate through the expanded row space (data + group headers)
+        for (
+            let rowIndex = startIndex;
+            rowIndex < startIndex + data.length + groupIndexes.length;
+            rowIndex++
+        ) {
+            // Check if this row should have a group header
+            const expectedGroupIndex = groupIndexes[groupHeaderCount];
+            if (expectedGroupIndex !== undefined && rowIndex === expectedGroupIndex) {
+                result.push(null); // Group header row
+                groupHeaderCount++;
+            } else if (dataIndex < data.length) {
+                result.push(data[dataIndex]);
+                dataIndex++;
+            }
+        }
+        return result;
+    }, [data, enableHeader, groups]);
 
     const extractRowId = useMemo(() => createExtractRowId(getRowId), [getRowId]);
 
@@ -1428,14 +1661,201 @@ export const ItemTableList = ({
         onColumnResized,
     });
 
+    // Create itemProps for sticky header
+    const stickyHeaderItemProps: TableItemProps = useMemo(
+        () => ({
+            calculatedColumnWidths,
+            cellPadding,
+            columns: parsedColumns,
+            controls,
+            data: [null], // Header row
+            enableAlternateRowColors,
+            enableColumnReorder: !!onColumnReordered,
+            enableColumnResize: !!onColumnResized,
+            enableDrag,
+            enableExpansion,
+            enableHeader,
+            enableHorizontalBorders,
+            enableRowHoverHighlight,
+            enableSelection,
+            enableVerticalBorders,
+            getRowHeight,
+            groups,
+            internalState,
+            itemType,
+            pinnedLeftColumnCount,
+            pinnedLeftColumnWidths: calculatedColumnWidths.slice(0, pinnedLeftColumnCount),
+            pinnedRightColumnCount,
+            pinnedRightColumnWidths: calculatedColumnWidths.slice(
+                pinnedLeftColumnCount + totalColumnCount,
+            ),
+            playerContext,
+            size,
+            tableId,
+        }),
+        [
+            calculatedColumnWidths,
+            cellPadding,
+            controls,
+            parsedColumns,
+            enableAlternateRowColors,
+            enableDrag,
+            enableExpansion,
+            enableHeader,
+            enableHorizontalBorders,
+            enableRowHoverHighlight,
+            enableSelection,
+            enableVerticalBorders,
+            getRowHeight,
+            groups,
+            internalState,
+            itemType,
+            onColumnReordered,
+            onColumnResized,
+            pinnedLeftColumnCount,
+            pinnedRightColumnCount,
+            playerContext,
+            size,
+            tableId,
+            totalColumnCount,
+        ],
+    );
+
+    const StickyHeader = useMemo(() => {
+        if (!shouldShowStickyHeader || !enableHeader) {
+            return null;
+        }
+
+        const pinnedLeftWidth = calculatedColumnWidths
+            .slice(0, pinnedLeftColumnCount)
+            .reduce((sum, width) => sum + width, 0);
+        const mainWidth = calculatedColumnWidths
+            .slice(pinnedLeftColumnCount, pinnedLeftColumnCount + totalColumnCount)
+            .reduce((sum, width) => sum + width, 0);
+        const pinnedRightWidth = calculatedColumnWidths
+            .slice(pinnedLeftColumnCount + totalColumnCount)
+            .reduce((sum, width) => sum + width, 0);
+
+        return (
+            <div
+                className={styles.stickyHeader}
+                ref={stickyHeaderRef}
+                style={{
+                    top: `${stickyTop}px`,
+                }}
+            >
+                <div className={styles.stickyHeaderRow}>
+                    {pinnedLeftColumnCount > 0 && (
+                        <div
+                            className={styles.stickyHeaderSection}
+                            style={{ width: `${pinnedLeftWidth}px` }}
+                        >
+                            {parsedColumns
+                                .filter((col) => col.pinned === 'left')
+                                .map((col) => {
+                                    const columnIndex = parsedColumns.findIndex((c) => c === col);
+                                    return (
+                                        <CellComponent
+                                            ariaAttributes={{
+                                                'aria-colindex': columnIndex + 1,
+                                                role: 'gridcell',
+                                            }}
+                                            columnIndex={columnIndex}
+                                            key={col.id}
+                                            rowIndex={0}
+                                            style={{
+                                                height: headerHeight,
+                                                width: calculatedColumnWidths[columnIndex],
+                                            }}
+                                            {...stickyHeaderItemProps}
+                                        />
+                                    );
+                                })}
+                        </div>
+                    )}
+                    <div className={styles.stickyHeaderSection} style={{ width: `${mainWidth}px` }}>
+                        {parsedColumns
+                            .filter((col) => col.pinned === null)
+                            .map((col) => {
+                                const columnIndex = parsedColumns.findIndex((c) => c === col);
+                                return (
+                                    <CellComponent
+                                        ariaAttributes={{
+                                            'aria-colindex': columnIndex + 1,
+                                            role: 'gridcell',
+                                        }}
+                                        columnIndex={columnIndex}
+                                        key={col.id}
+                                        rowIndex={0}
+                                        style={{
+                                            height: headerHeight,
+                                            width: calculatedColumnWidths[columnIndex],
+                                        }}
+                                        {...stickyHeaderItemProps}
+                                    />
+                                );
+                            })}
+                    </div>
+                    {pinnedRightColumnCount > 0 && (
+                        <div
+                            className={styles.stickyHeaderSection}
+                            style={{ width: `${pinnedRightWidth}px` }}
+                        >
+                            {parsedColumns
+                                .filter((col) => col.pinned === 'right')
+                                .map((col) => {
+                                    const columnIndex = parsedColumns.findIndex((c) => c === col);
+                                    return (
+                                        <CellComponent
+                                            ariaAttributes={{
+                                                'aria-colindex': columnIndex + 1,
+                                                role: 'gridcell',
+                                            }}
+                                            columnIndex={columnIndex}
+                                            key={col.id}
+                                            rowIndex={0}
+                                            style={{
+                                                height: headerHeight,
+                                                width: calculatedColumnWidths[columnIndex],
+                                            }}
+                                            {...stickyHeaderItemProps}
+                                        />
+                                    );
+                                })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }, [
+        shouldShowStickyHeader,
+        enableHeader,
+        stickyTop,
+        calculatedColumnWidths,
+        pinnedLeftColumnCount,
+        pinnedRightColumnCount,
+        totalColumnCount,
+        parsedColumns,
+        headerHeight,
+        CellComponent,
+        stickyHeaderItemProps,
+    ]);
+
     return (
         <div
             className={styles.itemTableListContainer}
             onKeyDown={handleKeyDown}
-            onMouseDown={(e) => (e.currentTarget as HTMLDivElement).focus()}
+            onMouseDown={(e) => {
+                const element = e.currentTarget as HTMLDivElement;
+                // Focus without scrolling into view
+                if (element.focus) {
+                    element.focus({ preventScroll: true });
+                }
+            }}
             ref={containerFocusRef}
             tabIndex={0}
         >
+            {StickyHeader}
             <VirtualizedTableGrid
                 calculatedColumnWidths={calculatedColumnWidths}
                 CellComponent={CellComponent}
@@ -1453,6 +1873,7 @@ export const ItemTableList = ({
                 enableSelection={enableSelection}
                 enableVerticalBorders={enableVerticalBorders}
                 getRowHeight={getRowHeight}
+                groups={groups}
                 headerHeight={headerHeight}
                 internalState={internalState}
                 itemType={itemType}

src/renderer/components/simple-item-table/simple-item-table.module.css

@@ -0,0 +1,37 @@
+.simple-item-table-container {
+    width: 100%;
+}
+
+/* .alternate-row-even {
+    background-color: initial;
+}
+
+.alternate-row-odd {
+    @mixin dark {
+        background-color: darken(var(--theme-colors-background), 30%);
+    }
+
+    @mixin light {
+        background-color: darken(var(--theme-colors-background), 2%);
+    }
+} */
+
+/* .row-hover {
+    cursor: pointer;
+}
+
+.row-hover:hover {
+    background-color: var(--theme-colors-surface);
+    opacity: 0.7;
+} */
+
+.row-selected {
+}
+
+/* .with-horizontal-border {
+    border-bottom: 1px solid var(--theme-colors-border);
+}
+
+.with-vertical-border {
+    border-right: 1px solid var(--theme-colors-border);
+} */

src/renderer/components/simple-item-table/simple-item-table.tsx

@@ -0,0 +1,243 @@
+import clsx from 'clsx';
+import { useId, useMemo } from 'react';
+
+import styles from './simple-item-table.module.css';
+
+import { createExtractRowId } from '/@/renderer/components/item-list/helpers/extract-row-id';
+import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
+import { useItemListState } from '/@/renderer/components/item-list/helpers/item-list-state';
+import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
+import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { TableColumnHeaderContainer } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { ItemTableListColumnConfig } from '/@/renderer/components/item-list/types';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import { Table } from '/@/shared/components/table/table';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+enum TableItemSize {
+    COMPACT = 40,
+    DEFAULT = 64,
+    LARGE = 88,
+}
+
+interface SimpleItemTableProps {
+    cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    columns: ItemTableListColumnConfig[];
+    data: unknown[];
+    enableAlternateRowColors?: boolean;
+    enableHeader?: boolean;
+    enableHorizontalBorders?: boolean;
+    enableRowHoverHighlight?: boolean;
+    enableSelection?: boolean;
+    enableVerticalBorders?: boolean;
+    getRowId?: ((item: unknown) => string) | string;
+    itemType: LibraryItem;
+    size?: 'compact' | 'default' | 'large';
+}
+
+export const SimpleItemTable = ({
+    cellPadding = 'sm',
+    columns,
+    data,
+    enableAlternateRowColors = false,
+    enableHeader = true,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    getRowId,
+    itemType,
+    size = 'default',
+}: SimpleItemTableProps) => {
+    const tableId = useId();
+    const playerContext = usePlayer();
+
+    // Filter out pinned columns by setting pinned to null
+    const columnsWithoutPinning = useMemo(
+        () =>
+            columns.map((col) => ({
+                ...col,
+                pinned: null,
+            })),
+        [columns],
+    );
+
+    // Parse columns (filters disabled and sorts by pinned position, but we've removed pinning)
+    const parsedColumns = useMemo(
+        () => parseTableColumns(columnsWithoutPinning),
+        [columnsWithoutPinning],
+    );
+
+    // Create extractRowId function
+    const extractRowId = useMemo(() => createExtractRowId(getRowId), [getRowId]);
+
+    // Use item list state for selection
+    const internalState = useItemListState(() => data, extractRowId);
+
+    // Get default item controls
+    const controls = useDefaultItemListControls();
+
+    // Calculate row height based on size
+    const DEFAULT_ROW_HEIGHT = useMemo(() => {
+        switch (size) {
+            case 'compact':
+                return TableItemSize.COMPACT;
+            case 'large':
+                return TableItemSize.LARGE;
+            case 'default':
+            default:
+                return TableItemSize.DEFAULT;
+        }
+    }, [size]);
+
+    const tableItemProps: TableItemProps = useMemo(
+        () => ({
+            cellPadding,
+            columns: parsedColumns,
+            controls,
+            data: enableHeader ? [null, ...data] : data,
+            enableAlternateRowColors,
+            enableColumnReorder: false,
+            enableColumnResize: false,
+            enableDrag: false,
+            enableExpansion: false,
+            enableHeader,
+            enableHorizontalBorders,
+            enableRowHoverHighlight,
+            enableSelection,
+            enableVerticalBorders,
+            getRowHeight: () => DEFAULT_ROW_HEIGHT,
+            internalState,
+            itemType,
+            playerContext,
+            size,
+            tableId,
+        }),
+        [
+            cellPadding,
+            parsedColumns,
+            controls,
+            enableHeader,
+            data,
+            enableAlternateRowColors,
+            enableHorizontalBorders,
+            enableRowHoverHighlight,
+            enableSelection,
+            enableVerticalBorders,
+            DEFAULT_ROW_HEIGHT,
+            internalState,
+            itemType,
+            playerContext,
+            size,
+            tableId,
+        ],
+    );
+
+    return (
+        <div className={styles.simpleItemTableContainer}>
+            <Table
+                highlightOnHover={enableRowHoverHighlight}
+                striped={enableAlternateRowColors}
+                withColumnBorders={enableVerticalBorders}
+                withRowBorders={enableHorizontalBorders}
+            >
+                {enableHeader && (
+                    <Table.Thead>
+                        <Table.Tr>
+                            {parsedColumns.map((column, columnIndex) => (
+                                <Table.Th
+                                    key={column.id}
+                                    style={{
+                                        textAlign:
+                                            column.align === 'start'
+                                                ? 'left'
+                                                : column.align === 'end'
+                                                  ? 'right'
+                                                  : 'center',
+                                        width: column.width,
+                                    }}
+                                >
+                                    <TableColumnHeaderContainer
+                                        {...tableItemProps}
+                                        ariaAttributes={{
+                                            'aria-colindex': columnIndex + 1,
+                                            role: 'gridcell',
+                                        }}
+                                        columnIndex={columnIndex}
+                                        controls={controls}
+                                        rowIndex={0}
+                                        style={{ width: column.width }}
+                                        type={column.id}
+                                    />
+                                </Table.Th>
+                            ))}
+                        </Table.Tr>
+                    </Table.Thead>
+                )}
+                <Table.Tbody>
+                    {data.map((item, rowIndex) => {
+                        const adjustedRowIndex = enableHeader ? rowIndex + 1 : rowIndex;
+                        const isSelected =
+                            item && typeof item === 'object' && 'id' in item
+                                ? internalState.isSelected(internalState.extractRowId(item) || '')
+                                : false;
+
+                        const isLastRow = rowIndex === data.length - 1;
+
+                        return (
+                            <Table.Tr
+                                className={clsx({
+                                    [styles.alternateRowEven]:
+                                        enableAlternateRowColors && rowIndex % 2 === 0,
+                                    [styles.alternateRowOdd]:
+                                        enableAlternateRowColors && rowIndex % 2 === 1,
+                                    [styles.rowHover]: enableRowHoverHighlight,
+                                    [styles.rowSelected]: isSelected,
+                                    [styles.withHorizontalBorder]:
+                                        enableHorizontalBorders && enableHeader && !isLastRow,
+                                })}
+                                data-row-index={`${tableId}-${adjustedRowIndex}`}
+                                key={internalState.extractRowId(item) || rowIndex}
+                            >
+                                {parsedColumns.map((column, columnIndex) => {
+                                    const isLastColumn = columnIndex === parsedColumns.length - 1;
+
+                                    return (
+                                        <Table.Td
+                                            className={clsx({
+                                                [styles.withVerticalBorder]:
+                                                    enableVerticalBorders && !isLastColumn,
+                                            })}
+                                            key={column.id}
+                                            style={{
+                                                textAlign:
+                                                    column.align === 'start'
+                                                        ? 'left'
+                                                        : column.align === 'end'
+                                                          ? 'right'
+                                                          : 'center',
+                                                width: column.width,
+                                            }}
+                                        >
+                                            <ItemTableListColumn
+                                                {...tableItemProps}
+                                                ariaAttributes={{
+                                                    'aria-colindex': columnIndex + 1,
+                                                    role: 'gridcell',
+                                                }}
+                                                columnIndex={columnIndex}
+                                                rowIndex={adjustedRowIndex}
+                                                style={{ width: column.width }}
+                                            />
+                                        </Table.Td>
+                                    );
+                                })}
+                            </Table.Tr>
+                        );
+                    })}
+                </Table.Tbody>
+            </Table>
+        </div>
+    );
+};

src/renderer/features/albums/components/album-detail-content.tsx

@@ -5,23 +5,35 @@ import { generatePath, Link, useParams } from 'react-router';
 
 import styles from './album-detail-content.module.css';
 
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
+import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
+import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { useCurrentServer } from '/@/renderer/store';
-import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import {
+    useGeneralSettings,
+    usePlayButtonBehavior,
+    useSettingsStore,
+} from '/@/renderer/store/settings.store';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Button } from '/@/shared/components/button/button';
+import { Checkbox } from '/@/shared/components/checkbox/checkbox';
 import { Group } from '/@/shared/components/group/group';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
-import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
+import { Text } from '/@/shared/components/text/text';
-import { Play } from '/@/shared/types/types';
+import { AlbumListSort, LibraryItem, Song, SortOrder } from '/@/shared/types/domain-types';
+import { ItemListKey, ListDisplayType, Play } from '/@/shared/types/types';
 
 interface AlbumDetailContentProps {
     background?: string;
@@ -35,27 +47,22 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
         albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
     );
 
-    const { data: detail } = useQuery(
-        albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
-    );
-
     const { ref, ...cq } = useContainerQuery();
     const { externalLinks, lastFM, musicBrainz } = useGeneralSettings();
     const genreRoute = useGenreRoute();
 
-    const carousels = useMemo(
+    const carousels = [
-        () => [
         {
-                excludeIds: detail?.id ? [detail.id] : undefined,
+            excludeIds: detailQuery?.data?.id ? [detailQuery.data.id] : undefined,
-                isHidden: !detail?.albumArtists?.[0]?.id,
+            isHidden: !detailQuery?.data?.albumArtists?.[0]?.id,
             query: {
                 _custom: {
                     jellyfin: {
-                            ExcludeItemIds: detail?.id,
+                        ExcludeItemIds: detailQuery?.data?.id,
                     },
                 },
-                    artistIds: detail?.albumArtists.length
+                artistIds: detailQuery?.data?.albumArtists.length
-                        ? [detail.albumArtists[0].id]
+                    ? [detailQuery?.data?.albumArtists[0].id]
                     : undefined,
             },
             sortBy: AlbumListSort.YEAR,
@@ -64,11 +71,11 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
             uniqueId: 'moreFromArtist',
         },
         {
-                excludeIds: detail?.id ? [detail.id] : undefined,
+            excludeIds: detailQuery?.data?.id ? [detailQuery.data.id] : undefined,
             isHidden: !detailQuery?.data?.genres?.[0],
             query: {
-                    genres: detailQuery.data?.genres.length
+                genres: detailQuery?.data?.genres.length
-                        ? [detailQuery.data.genres[0].id]
+                    ? [detailQuery?.data?.genres[0].id]
                     : undefined,
             },
             sortBy: AlbumListSort.RANDOM,
@@ -79,9 +86,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
             })} ${detailQuery?.data?.genres?.[0]?.name}`,
             uniqueId: 'relatedGenres',
         },
-        ],
+    ];
-        [detail?.id, detail?.albumArtists, detailQuery?.data?.genres, t],
-    );
     const playButtonBehavior = usePlayButtonBehavior();
 
     const handlePlay = async (playType?: Play) => {};
@@ -125,6 +130,17 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
                                 />
                             </Group>
                         </Group>
+                        <ListConfigMenu
+                            displayTypes={[{ hidden: true, value: ListDisplayType.GRID }]}
+                            listKey={ItemListKey.ALBUM_DETAIL}
+                            optionsConfig={{
+                                table: {
+                                    itemsPerPage: { hidden: true },
+                                    pagination: { hidden: true },
+                                },
+                            }}
+                            tableColumnsData={SONG_TABLE_COLUMNS}
+                        />
                     </Group>
                 </section>
                 {showGenres && (
@@ -198,6 +214,12 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
                     </section>
                 )}
 
+                {detailQuery?.data?.songs && detailQuery.data.songs.length > 0 && (
+                    <section>
+                        <AlbumDetailSongsTable songs={detailQuery.data.songs} />
+                    </section>
+                )}
+
                 <Stack gap="lg" mt="3rem">
                     {cq.height || cq.width ? (
                         <>
@@ -225,3 +247,203 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
         </div>
     );
 };
+
+interface AlbumDetailSongsTableProps {
+    songs: Song[];
+}
+
+const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
+    const { t } = useTranslation();
+    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.ALBUM_DETAIL]?.table);
+
+    const columns = useMemo(() => {
+        return tableConfig?.columns || [];
+    }, [tableConfig?.columns]);
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.ALBUM_DETAIL,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.ALBUM_DETAIL,
+    });
+
+    const discGroups = useMemo(() => {
+        if (songs.length === 0) return [];
+
+        const groups: Array<{
+            discNumber: number;
+            discSubtitle: null | string;
+            itemCount: number;
+        }> = [];
+        let lastDiscNumber = -1;
+        let currentGroupStartIndex = 0;
+
+        songs.forEach((song, index) => {
+            if (song.discNumber !== lastDiscNumber) {
+                // If we have a previous group, calculate its item count
+                if (groups.length > 0) {
+                    groups[groups.length - 1].itemCount = index - currentGroupStartIndex;
+                }
+                // Start a new group
+                groups.push({
+                    discNumber: song.discNumber,
+                    discSubtitle: song.discSubtitle,
+                    itemCount: 0, // Will be calculated when we encounter the next group or end
+                });
+                currentGroupStartIndex = index;
+                lastDiscNumber = song.discNumber;
+            }
+        });
+
+        // Set item count for the last group
+        if (groups.length > 0) {
+            groups[groups.length - 1].itemCount = songs.length - currentGroupStartIndex;
+        }
+
+        return groups;
+    }, [songs]);
+
+    // const maxHeight = useMemo(() => {
+    //     if (!tableConfig) return undefined;
+
+    //     const headerHeight = 40;
+    //     const rowHeights = {
+    //         compact: 40,
+    //         default: 64,
+    //         large: 88,
+    //     };
+    //     const rowHeight = rowHeights[tableConfig.size || 'default'];
+    //     const maxRows = 20;
+
+    //     return headerHeight + maxRows * rowHeight;
+    // }, [tableConfig]);
+
+    // Uncomment to enable static table height
+    // const containerHeight = useMemo(() => {
+    //     if (!tableConfig || !maxHeight) return undefined;
+
+    //     const headerHeight = 40;
+    //     const rowHeights = {
+    //         compact: 40,
+    //         default: 64,
+    //         large: 88,
+    //     };
+    //     const rowHeight = rowHeights[tableConfig.size || 'default'];
+    //     const actualRows = Math.min(songs.length, 20);
+
+    //     return Math.min(headerHeight + actualRows * rowHeight, maxHeight);
+    // }, [tableConfig, maxHeight, songs.length]);
+
+    const groups = useMemo(() => {
+        if (discGroups.length <= 1) {
+            return undefined;
+        }
+
+        return discGroups.map((discGroup) => ({
+            itemCount: discGroup.itemCount,
+            render: ({
+                data,
+                internalState,
+                startDataIndex,
+            }: {
+                data: unknown[];
+                groupIndex: number;
+                index: number;
+                internalState: any;
+                startDataIndex: number;
+            }) => {
+                const groupItems = data.slice(startDataIndex, startDataIndex + discGroup.itemCount);
+
+                const selectedCount = groupItems.filter((item) => {
+                    if (!item || typeof item !== 'object' || !('id' in item)) return false;
+                    const rowId = internalState.extractRowId(item);
+                    return rowId ? internalState.isSelected(rowId) : false;
+                }).length;
+
+                const isAllSelected = selectedCount === groupItems.length;
+                const isSomeSelected = selectedCount > 0 && selectedCount < groupItems.length;
+
+                const handleCheckboxChange = () => {
+                    const selectableItems = groupItems;
+
+                    if (isAllSelected) {
+                        // Deselect all items in the group
+                        const currentlySelected = internalState.getSelected();
+                        const groupItemIds = new Set(
+                            selectableItems
+                                .map((item) => internalState.extractRowId(item))
+                                .filter(Boolean),
+                        );
+                        const itemsToKeep = currentlySelected.filter(
+                            (item) => !groupItemIds.has(internalState.extractRowId(item) || ''),
+                        );
+                        internalState.setSelected(itemsToKeep);
+                    } else {
+                        // Select all items in the group (add to existing selection)
+                        const currentlySelected = internalState.getSelected();
+                        const selectedIds = new Set(
+                            currentlySelected
+                                .map((item) => internalState.extractRowId(item))
+                                .filter(Boolean),
+                        );
+                        const itemsToAdd = selectableItems.filter(
+                            (item) => !selectedIds.has(internalState.extractRowId(item) || ''),
+                        );
+                        internalState.setSelected([...currentlySelected, ...itemsToAdd]);
+                    }
+                };
+
+                return (
+                    <Group
+                        align="center"
+                        h="100%"
+                        px="md"
+                        style={{ background: 'var(--theme-colors-background)' }}
+                        w="100%"
+                    >
+                        <Checkbox
+                            checked={isAllSelected}
+                            indeterminate={isSomeSelected}
+                            onChange={handleCheckboxChange}
+                            size="xs"
+                        />
+                        <Text size="sm">
+                            {t('common.disc', { postProcess: 'sentenceCase' })}{' '}
+                            {discGroup.discNumber}
+                            {discGroup.discSubtitle && ` - ${discGroup.discSubtitle}`}
+                        </Text>
+                    </Group>
+                );
+            },
+            rowHeight: 40,
+        }));
+    }, [discGroups, t]);
+
+    if (!tableConfig || columns.length === 0) {
+        return null;
+    }
+
+    return (
+        <ItemTableList
+            autoFitColumns={tableConfig.autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={songs}
+            enableAlternateRowColors={tableConfig.enableAlternateRowColors}
+            enableDrag
+            enableExpansion={false}
+            enableHeader
+            enableHorizontalBorders={tableConfig.enableHorizontalBorders}
+            enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
+            enableSelection
+            enableStickyHeader
+            enableVerticalBorders={tableConfig.enableVerticalBorders}
+            groups={groups}
+            itemType={LibraryItem.SONG}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            size={tableConfig.size}
+        />
+    );
+};

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams } from 'react-router';
 
@@ -25,7 +25,8 @@ interface AlbumDetailHeaderProps {
     };
 }
 
-export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
+export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderProps>(
+    ({ background }, ref) => {
         const { albumId } = useParams() as { albumId: string };
         const server = useCurrentServer();
         const detailQuery = useQuery(
@@ -69,7 +70,8 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
             },
             {
                 id: 'duration',
-            value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+                value:
+                    detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
             },
             {
                 id: 'playCount',
@@ -109,7 +111,7 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
         };
 
         return (
-        <Stack>
+            <Stack ref={ref}>
                 <LibraryHeader
                     imageUrl={detailQuery?.data?.imageUrl}
                     item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
@@ -160,4 +162,5 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
                 </LibraryHeader>
             </Stack>
         );
-};
+    },
+);

src/renderer/store/settings.store.ts

@@ -218,7 +218,7 @@ const GeneralSettingsSchema = z.object({
     artistBackgroundBlur: z.number(),
     artistItems: z.array(SortableItemSchema(ArtistItemSchema)),
     buttonSize: z.number(),
-    disabledContextMenu: z.record(z.boolean()),
+    disabledContextMenu: z.record(z.string(), z.boolean()),
     doubleClickQueueAll: z.boolean(),
     externalLinks: z.boolean(),
     followSystemTheme: z.boolean(),
@@ -655,6 +655,35 @@ const initialState: SettingsState = {
         globalMediaHotkeys: false,
     },
     lists: {
+        ['albumDetail']: {
+            display: ListDisplayType.TABLE,
+            grid: {
+                itemGap: 'md',
+                itemsPerRow: 6,
+                itemsPerRowEnabled: false,
+                rows: [],
+            },
+            itemsPerPage: 100,
+            pagination: ListPaginationType.INFINITE,
+            table: {
+                autoFitColumns: true,
+                columns: pickTableColumns({
+                    autoSizeColumns: [],
+                    columns: SONG_TABLE_COLUMNS,
+                    enabledColumns: [
+                        TableColumn.TRACK_NUMBER,
+                        TableColumn.TITLE,
+                        TableColumn.DURATION,
+                        TableColumn.USER_FAVORITE,
+                    ],
+                }),
+                enableAlternateRowColors: false,
+                enableHorizontalBorders: false,
+                enableRowHoverHighlight: false,
+                enableVerticalBorders: false,
+                size: 'compact',
+            },
+        },
         fullScreen: {
             display: ListDisplayType.TABLE,
             grid: {

src/shared/types/types.ts

@@ -20,11 +20,9 @@ export enum ItemListKey {
     ARTIST = LibraryItem.ARTIST,
     FULL_SCREEN = 'fullScreen',
     GENRE = LibraryItem.GENRE,
-    NOW_PLAYING = 'nowPlaying',
     PLAYLIST = LibraryItem.PLAYLIST,
     PLAYLIST_SONG = LibraryItem.PLAYLIST_SONG,
     QUEUE_SONG = LibraryItem.QUEUE_SONG,
-    SIDE_DRAWER_QUEUE = 'sideDrawerQueue',
     SIDE_QUEUE = 'sideQueue',
     SONG = LibraryItem.SONG,
 }