From c4f937b4dab3fbf438a390501bc95bb16f3f8e59 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 7 Oct 2025 17:45:24 -0700
Subject: [PATCH] normalize user action columns

---
 .../columns/actions-column.tsx                |  4 +--
 .../columns/favorite-column.tsx               |  4 +--
 .../columns/row-index-column.module.css       |  3 ++
 .../columns/row-index-column.tsx              | 32 +++++++++++++++++++
 .../item-table-list-column.module.css         |  9 ++++++
 5 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css

diff --git a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx b/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx
index 4d193ea24..cf5a0dbd1 100644
--- a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx
@@ -15,9 +15,9 @@ export const ActionsColumn = (props: ItemTableListInnerColumn) => {
                     icon="ellipsisHorizontal"
                     iconProps={{
                         color: 'muted',
+                        size: 'lg',
                     }}
-                    size="lg"
-                    variant="transparent"
+                    variant="subtle"
                 />
             </TableColumnContainer>
         );
diff --git a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
index 8f4ca95b8..907e3a17d 100644
--- a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx
@@ -18,9 +18,9 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
                     iconProps={{
                         color: row ? 'primary' : 'muted',
                         fill: row ? 'primary' : undefined,
+                        size: 'lg',
                     }}
-                    size="lg"
-                    variant="transparent"
+                    variant="subtle"
                 />
             </TableColumnContainer>
         );
diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css b/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css
new file mode 100644
index 000000000..b3cd7c080
--- /dev/null
+++ b/src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css
@@ -0,0 +1,3 @@
+.expand {
+    position: absolute;
+}
diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx
index 6780abb5d..4069f57ff 100644
--- a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx
@@ -1,8 +1,40 @@
+import clsx from 'clsx';
+
+import styles from './row-index-column.module.css';
+
 import {
     ItemTableListInnerColumn,
+    TableColumnContainer,
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Text } from '/@/shared/components/text/text';
 
 export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
+    const { controls, enableExpansion } = props;
+
+    if (enableExpansion) {
+        return (
+            <TableColumnContainer {...props}>
+                <ActionIcon
+                    className={clsx(styles.expand, 'hover-only')}
+                    icon="arrowDownS"
+                    iconProps={{ color: 'muted', size: 'xl' }}
+                    onClick={(e) =>
+                        controls.onItemExpand?.(
+                            props.data[props.rowIndex] as any,
+                            props.itemType,
+                            e,
+                        )
+                    }
+                    variant="subtle"
+                />
+                <Text className="hide-on-hover" isMuted>
+                    {props.rowIndex}
+                </Text>
+            </TableColumnContainer>
+        );
+    }
+
     return <TableColumnTextContainer {...props}>{props.rowIndex}</TableColumnTextContainer>;
 };
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
index 1bba91ec7..7f797673f 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
@@ -93,3 +93,12 @@
 .container.data-row.row-hovered :global(.hover-only-flex) {
     display: flex;
 }
+
+.container :global(.hide-on-hover) {
+    display: block;
+}
+
+.container.data-row:hover :global(.hide-on-hover),
+.container.data-row.row-hovered :global(.hide-on-hover) {
+    display: none;
+}