add hover only columns

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

@@ -2,7 +2,7 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Icon } from '/@/shared/components/icon/icon';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 
 export const ActionsColumn = (props: ItemTableListInnerColumn) => {
     const row: any = (props.data as (any | undefined)[])[props.rowIndex];
@@ -10,7 +10,15 @@ export const ActionsColumn = (props: ItemTableListInnerColumn) => {
     if (row !== undefined) {
         return (
             <TableColumnContainer {...props}>
-                <Icon icon="ellipsisHorizontal" size="sm" />
+                <ActionIcon
+                    className="hover-only"
+                    icon="ellipsisHorizontal"
+                    iconProps={{
+                        color: 'muted',
+                    }}
+                    size="lg"
+                    variant="transparent"
+                />
             </TableColumnContainer>
         );
     }

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

@@ -2,7 +2,7 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { Icon } from '/@/shared/components/icon/icon';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 
 export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
     const row: boolean | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
@@ -12,7 +12,16 @@ export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
     if (typeof row === 'boolean') {
         return (
             <TableColumnContainer {...props}>
-                <Icon fill={row ? 'primary' : undefined} icon={'favorite'} size="md" />
+                <ActionIcon
+                    className={row ? undefined : 'hover-only'}
+                    icon="favorite"
+                    iconProps={{
+                        color: row ? 'primary' : 'muted',
+                        fill: row ? 'primary' : undefined,
+                    }}
+                    size="lg"
+                    variant="transparent"
+                />
             </TableColumnContainer>
         );
     }

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

@@ -12,7 +12,7 @@ export const RatingColumn = (props: ItemTableListInnerColumn) => {
     if (typeof row === 'number' || row === null) {
         return (
             <TableColumnContainer {...props}>
-                <Rating readOnly value={row || 0} />
+                <Rating className={row ? undefined : 'hover-only-flex'} value={row || 0} />
             </TableColumnContainer>
         );
     }

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

@@ -78,3 +78,18 @@
 .header-content.right {
     justify-content: flex-end;
 }
+
+.container :global(.hover-only),
+.container :global(.hover-only-flex) {
+    display: none;
+}
+
+.container.data-row:hover :global(.hover-only),
+.container.data-row.row-hovered :global(.hover-only) {
+    display: block;
+}
+
+.container.data-row:hover :global(.hover-only-flex),
+.container.data-row.row-hovered :global(.hover-only-flex) {
+    display: flex;
+}

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

@@ -377,7 +377,7 @@ const columnLabelMap: Record<TableColumn, ReactNode | string> = {
     [TableColumn.TRACK_NUMBER]: i18n.t('table.column.trackNumber', {
         postProcess: 'upperCase',
     }) as string,
-    [TableColumn.USER_FAVORITE]: <Icon fill="default" icon="favorite" size="md" />,
+    [TableColumn.USER_FAVORITE]: <Icon icon="favorite" size="md" />,
     [TableColumn.USER_RATING]: i18n.t('table.column.rating', {
         postProcess: 'upperCase',
     }) as string,