add table row playback controls

- supports song, album, artist, and album artist tables
- hovering over the first row index or track number column will display a hovercard for the playback controls

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

@@ -0,0 +1,51 @@
+import styles from './row-index-column.module.css';
+
+import { isRowPlayControlColumn } from '/@/renderer/components/item-list/helpers/get-row-play-control-column';
+import { NumericColumn } from '/@/renderer/components/item-list/item-table-list/columns/numeric-column';
+import { RowPlayControlCell } from '/@/renderer/components/item-list/item-table-list/columns/row-play-control-cell';
+import {
+    supportsTrackNumberRowPlayControls,
+    useRowPlayControl,
+} from '/@/renderer/components/item-list/item-table-list/columns/use-row-play-control';
+import { ItemTableListInnerColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Flex } from '/@/shared/components/flex/flex';
+import { Icon } from '/@/shared/components/icon/icon';
+import { TableColumn } from '/@/shared/types/types';
+
+export const TrackNumberColumn = (props: ItemTableListInnerColumn) => {
+    if (
+        isRowPlayControlColumn(TableColumn.TRACK_NUMBER, props.columns) &&
+        supportsTrackNumberRowPlayControls(props.itemType)
+    ) {
+        return <PlayableTrackNumberColumn {...props} />;
+    }
+
+    return <NumericColumn {...props} />;
+};
+
+const PlayableTrackNumberColumn = (props: ItemTableListInnerColumn) => {
+    const { handlePlay, isActive, isPlaying, showPlayControls } = useRowPlayControl(props);
+    const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as unknown[])[props.rowIndex];
+    const trackNumber = (rowItem as undefined | { trackNumber?: number })?.trackNumber;
+
+    if (typeof trackNumber !== 'number') {
+        return <NumericColumn {...props} />;
+    }
+
+    const indexContent = isActive ? (
+        <Flex className={styles.indexContent}>
+            <Icon fill="primary" icon={isPlaying ? 'mediaPlay' : 'mediaPause'} />
+        </Flex>
+    ) : (
+        trackNumber
+    );
+
+    return (
+        <RowPlayControlCell
+            {...props}
+            indexContent={indexContent}
+            onPlay={handlePlay}
+            showPlayControls={showPlayControls}
+        />
+    );
+};