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