Highlight currently playing song on all song tables (#178)

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -102,6 +102,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
             </ImageWrapper>
             <MetadataWrapper>
                 <Text
+                    className="current-song-child"
                     overflow="hidden"
                     size="md"
                 >

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -1,20 +1,10 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
-import { motion, Variants } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
-export const CELL_VARIANTS: Variants = {
-    animate: {
-        opacity: 1,
-    },
-    initial: {
-        opacity: 0,
-    },
-};
-
-export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
+export const CellContainer = styled.div<{ position?: 'left' | 'center' | 'right' }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) =>

src/renderer/components/virtual-table/cells/title-cell.tsx

@@ -0,0 +1,29 @@
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { Text } from '/@/renderer/components/text';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+
+export const TitleCell = ({ value }: ICellRendererParams) => {
+    if (value === undefined) {
+        return (
+            <CellContainer position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
+
+    return (
+        <CellContainer position="left">
+            <Text
+                className="current-song-child"
+                overflow="hidden"
+                size="md"
+            >
+                {value}
+            </Text>
+        </CellContainer>
+    );
+};

src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts

@@ -0,0 +1,57 @@
+import { RowClassRules, RowNode } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { MutableRefObject, useEffect, useMemo } from 'react';
+import { Song } from '/@/renderer/api/types';
+import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
+
+interface UseCurrentSongRowStylesProps {
+    tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesProps) => {
+    const currentSong = useCurrentSong();
+
+    const rowClassRules = useMemo<RowClassRules<Song> | undefined>(() => {
+        return {
+            'current-song': (params) => {
+                return params?.data?.id === currentSong?.id;
+            },
+        };
+    }, [currentSong?.id]);
+
+    // Redraw song rows when current song changes
+    useEffect(() => {
+        const unsubSongChange = usePlayerStore.subscribe(
+            (state) => state.current.song,
+            (song, previousSong) => {
+                if (tableRef?.current) {
+                    const { api, columnApi } = tableRef?.current || {};
+                    if (api == null || columnApi == null) {
+                        return;
+                    }
+
+                    const currentNode = song?.id ? api.getRowNode(song.id) : undefined;
+
+                    const previousNode = previousSong?.id
+                        ? api.getRowNode(previousSong?.id)
+                        : undefined;
+
+                    const rowNodes = [currentNode, previousNode].filter(
+                        (e) => e !== undefined,
+                    ) as RowNode<any>[];
+
+                    api.redrawRows({ rowNodes });
+                }
+            },
+            { equalityFn: (a, b) => a?.id === b?.id },
+        );
+
+        return () => {
+            unsubSongChange();
+        };
+    }, [tableRef]);
+
+    return {
+        rowClassRules,
+    };
+};

src/renderer/components/virtual-table/index.tsx

@@ -34,6 +34,7 @@ import { FavoriteCell } from '/@/renderer/components/virtual-table/cells/favorit
 import { RatingCell } from '/@/renderer/components/virtual-table/cells/rating-cell';
 import { TablePagination } from '/@/renderer/components/virtual-table/table-pagination';
 import { ActionsCell } from '/@/renderer/components/virtual-table/cells/actions-cell';
+import { TitleCell } from '/@/renderer/components/virtual-table/cells/title-cell';
 
 export * from './table-config-dropdown';
 export * from './table-pagination';
@@ -274,8 +275,7 @@ const tableColumns: { [key: string]: ColDef } = {
         width: 80,
     },
     title: {
-        cellRenderer: (params: ICellRendererParams) =>
-            GenericCell(params, { position: 'left', primary: true }),
+        cellRenderer: TitleCell,
         colId: TableColumn.TITLE,
         field: 'name',
         headerName: 'Title',