From 0ab2d89c58c40c1bfbb080fb2071c0b816538b8f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 9 Feb 2026 11:12:16 -0800
Subject: [PATCH] show current album name in header

---
 .../item-detail-list/item-detail.module.css   | 12 ++++++++++
 .../item-detail-list/item-detail.tsx          | 23 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.module.css b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
index e70b9e4c6..edc8b11ae 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.module.css
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.module.css
@@ -34,7 +34,19 @@
 }
 
 .header-left {
+    display: flex;
+    align-items: center;
     min-width: 0;
+    overflow: hidden;
+}
+
+.header-left-album-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--theme-font-size-sm);
+    font-weight: 500;
+    color: var(--theme-colors-foreground);
+    white-space: nowrap;
 }
 
 .header-right {
diff --git a/src/renderer/components/item-list/item-detail-list/item-detail.tsx b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
index 18e7ebdb0..7ab0c4fbb 100644
--- a/src/renderer/components/item-list/item-detail-list/item-detail.tsx
+++ b/src/renderer/components/item-list/item-detail-list/item-detail.tsx
@@ -606,6 +606,7 @@ RowComponent.displayName = 'ItemDetailRow';
 interface DetailListHeaderProps {
     columnWidthPercents: number[];
     enableVerticalBorders: boolean;
+    headerLeftRef: React.RefObject<HTMLSpanElement | null>;
     trackColumns: ItemTableListColumnConfig[];
     trackTableSize: 'compact' | 'default' | 'large';
 }
@@ -626,12 +627,19 @@ const DetailListHeader = memo(
     ({
         columnWidthPercents,
         enableVerticalBorders,
+        headerLeftRef,
         trackColumns,
         trackTableSize,
     }: DetailListHeaderProps) => {
         return (
             <header className={styles.detailListHeader} role="rowgroup">
-                <div aria-hidden className={styles.headerLeft} />
+                <div className={styles.headerLeft}>
+                    <span
+                        className={styles.headerLeftAlbumName}
+                        data-title=""
+                        ref={headerLeftRef}
+                    />
+                </div>
                 <div className={styles.headerRight}>
                     <div
                         className={clsx(styles.tracksTableHeader, {
@@ -768,8 +776,20 @@ export const ItemDetailList = ({
         return trackColumns.map((c) => (c.width / total) * 100);
     }, [trackColumns]);
 
+    const headerLeftRef = useRef<HTMLSpanElement>(null);
+    const dataSourceRef = useRef(dataSource);
+    dataSourceRef.current = dataSource;
+
     const handleRowsRendered = useCallback(
         (range: { startIndex: number; stopIndex: number }) => {
+            const el = headerLeftRef.current;
+            if (el) {
+                const album = dataSourceRef.current[range.startIndex] as Album | undefined;
+                const name = album?.name ?? '';
+                el.textContent = name;
+                el.setAttribute('data-title', name);
+                el.title = name;
+            }
             if (onRangeChanged) {
                 onRangeChanged(range);
             }
@@ -871,6 +891,7 @@ export const ItemDetailList = ({
                 <DetailListHeader
                     columnWidthPercents={columnWidthPercents}
                     enableVerticalBorders={enableVerticalBorders}
+                    headerLeftRef={headerLeftRef}
                     trackColumns={trackColumns}
                     trackTableSize={trackTableSize}
                 />