Add album grouping column (#1722)

* Add album grouping column --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
2026-06-21 03:14:16 +02:00 · 2026-02-26 20:34:55 -08:00
parent 4918b412b2
commit eb8913479b
18 changed files with 467 additions and 120 deletions
@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+
+import { AlbumGroupHeader } from '/@/renderer/components/item-list/item-table-list/album-group-header';
+import {
+    isLastInAlbumGroup,
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Song } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
+
+export const AlbumGroupColumn = (props: ItemTableListInnerColumn) => {
+    const firstDataRow = props.enableHeader ? 1 : 0;
+    const item = props.getRowItem?.(props.rowIndex) as null | Song | undefined;
+
+    const handlePlay = useCallback(
+        (playType: Play) => {
+            if (!item || !props.controls?.onDoubleClick) return;
+
+            const isHeaderEnabled = !!props.enableHeader;
+            const index = isHeaderEnabled ? props.rowIndex - 1 : props.rowIndex;
+
+            props.controls.onDoubleClick({
+                event: null,
+                index,
+                internalState: (props as any).internalState,
+                item,
+                itemType: props.itemType,
+                meta: { playType },
+            });
+        },
+        [item, props],
+    );
+
+    if (!item?.album) {
+        return <div style={props.style} />;
+    }
+
+    // Check if this is the first row of a new album group (by album name)
+    let isFirstInGroup = true;
+    if (props.rowIndex > firstDataRow) {
+        const prevItem = props.getRowItem?.(props.rowIndex - 1) as null | Song | undefined;
+        // If prevItem is undefined (not loaded yet), assume same group to avoid duplicates
+        if (prevItem === undefined || prevItem?.album === item.album) {
+            isFirstInGroup = false;
+        }
+    }
+
+    if (!isFirstInGroup) {
+        // For non-first rows, add border-bottom on the last row of the group
+        const needsBorder =
+            props.enableHorizontalBorders &&
+            isLastInAlbumGroup(
+                props.rowIndex,
+                props.getRowItem,
+                !!props.enableHeader,
+                props.data.length,
+            );
+
+        return (
+            <div
+                style={{
+                    ...props.style,
+                    ...(needsBorder
+                        ? { borderBottom: '1px solid var(--theme-colors-border)' }
+                        : {}),
+                }}
+            />
+        );
+    }
+
+    let groupRowCount = 1;
+    const totalDataRows = props.data.length + firstDataRow;
+    for (let idx = props.rowIndex + 1; idx < totalDataRows; idx++) {
+        const nextItem = props.getRowItem?.(idx) as null | Song | undefined;
+        if (!nextItem || nextItem.album !== item.album) break;
+        groupRowCount++;
+    }
+
+    return (
+        <TableColumnContainer {...props} enableAlternateRowColors={false}>
+            <AlbumGroupHeader
+                groupRowCount={groupRowCount}
+                onPlay={handlePlay}
+                size={props.size === 'default' ? 'normal' : props.size}
+                song={item}
+            />
+        </TableColumnContainer>
+    );
+};