normalize user action columns

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="subtle"
-                    variant="transparent"
                 />
             </TableColumnContainer>
         );

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="subtle"
-                    variant="transparent"
                 />
             </TableColumnContainer>
         );

src/renderer/components/item-list/item-table-list/columns/row-index-column.module.css

@@ -0,0 +1,3 @@
+.expand {
+    position: absolute;
+}

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>;
 };

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;
+}