add current song styles to rowIndex and title columns

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

@@ -8,10 +8,27 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListItem } from '/@/renderer/components/item-list/types';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
+import { usePlayerStatus } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
+import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
+import { PlayerStatus } from '/@/shared/types/types';
 
 export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
+    const { itemType } = props;
+
+    switch (itemType) {
+        case LibraryItem.QUEUE_SONG:
+            return <QueueSongRowIndexColumn {...props} />;
+        default:
+            return <DefaultRowIndexColumn {...props} />;
+    }
+};
+
+const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
     const { controls, enableExpansion } = props;
 
     if (enableExpansion) {
@@ -41,3 +58,26 @@ export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
 
     return <TableColumnTextContainer {...props}>{props.rowIndex}</TableColumnTextContainer>;
 };
+
+const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
+    const status = usePlayerStatus();
+    const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong);
+
+    return (
+        <TableColumnTextContainer {...props}>
+            {isActive ? (
+                status === PlayerStatus.PLAYING ? (
+                    <Flex>
+                        <Icon fill="primary" icon="mediaPlay" />
+                    </Flex>
+                ) : (
+                    <Flex>
+                        <Icon fill="primary" icon="mediaPause" />
+                    </Flex>
+                )
+            ) : (
+                props.rowIndex
+            )}
+        </TableColumnTextContainer>
+    );
+};