add current song styles to rowIndex and title columns

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

@@ -10,9 +10,22 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { useIsCurrentSong } from '/@/renderer/features/player/hooks/use-is-current-song';
 import { Text } from '/@/shared/components/text/text';
+import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
 export const TitleColumn = (props: ItemTableListInnerColumn) => {
+    const { itemType } = props;
+
+    switch (itemType) {
+        case LibraryItem.QUEUE_SONG:
+            return <QueueSongTitleColumn {...props} />;
+        default:
+            return <DefaultTitleColumn {...props} />;
+    }
+};
+
+function DefaultTitleColumn(props: ItemTableListInnerColumn) {
     const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
         props.columns[props.columnIndex].id
     ];
@@ -50,4 +63,49 @@ export const TitleColumn = (props: ItemTableListInnerColumn) => {
     }
 
     return <ColumnSkeletonVariable {...props} />;
-};
+}
+
+function QueueSongTitleColumn(props: ItemTableListInnerColumn) {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    const { isActive } = useIsCurrentSong(props.data[props.rowIndex] as QueueSong);
+
+    if (typeof row === 'string') {
+        const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
+
+        const textStyles = isActive ? { color: 'var(--theme-colors-primary)' } : {};
+
+        const titleLinkProps = path
+            ? {
+                  component: Link,
+                  isLink: true,
+                  to: path,
+              }
+            : {};
+
+        return (
+            <TableColumnContainer {...props}>
+                <Text
+                    className={clsx({
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                        [styles.nameContainer]: true,
+                    })}
+                    isNoSelect
+                    {...titleLinkProps}
+                    style={textStyles}
+                >
+                    {row}
+                </Text>
+            </TableColumnContainer>
+        );
+    }
+
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
+}