feat(web): highlight selected playlist rows while in edit mode

Builds on the row-click selection from this branch to give the user
visible feedback for which tracks are currently selected.

- `TracksTable` gains an optional `rowClassNameAddition(track, index)`
  prop that's composed with the table's existing per-row className
  (used internally for the locked/disabled states). The hook is
  ref-stable so external state changes don't force a full re-render
  of the table machinery.
- `EditAwareTracksTable` passes a `rowClassNameAddition` that
  returns the new `selected` CSS class when the row's track id is
  in the selection set and the page is in edit mode. The class
  draws a surface-2 background fill and a 3px accent bar on the
  left edge so selected rows are immediately scannable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.module.css

@@ -0,0 +1,5 @@
+.selected,
+.selected td {
+  background-color: var(--harmony-bg-surface-2) !important;
+  box-shadow: inset 3px 0 0 0 var(--harmony-secondary, var(--harmony-accent));
+}

packages/web/src/components/collection/desktop/edit-mode/tracks/EditAwareTracksTable.tsx

@@ -6,6 +6,7 @@ import { TracksTable } from 'components/tracks-table'
 
 import { usePlaylistEditMode } from '../PlaylistEditModeContext'
 
+import styles from './EditAwareTracksTable.module.css'
 import { useTrackSelection } from './TrackSelectionContext'
 
 type TrackLike = { track_id?: number | null } & Record<string, unknown>
@@ -62,5 +63,21 @@ export const EditAwareTracksTable = (props: EditAwareTracksTableProps) => {
     [isEditingThis, onClickRow, selection]
   )
 
-  return <TracksTable {...rest} onClickRow={handleClickRow} />
+  const rowClassNameAddition = useCallback(
+    (track: TrackLike) => {
+      if (!isEditingThis) return undefined
+      const id = track.track_id
+      if (typeof id !== 'number') return undefined
+      return selection.isSelected(id) ? styles.selected : undefined
+    },
+    [isEditingThis, selection]
+  )
+
+  return (
+    <TracksTable
+      {...rest}
+      onClickRow={handleClickRow}
+      rowClassNameAddition={rowClassNameAddition}
+    />
+  )
 }

packages/web/src/components/tracks-table/TracksTable.tsx

@@ -184,6 +184,12 @@ type TracksTableProps = {
   showArtistInTrackNameColumn?: boolean
   onClickRow?: (track: any, index: number) => void
   trackActionsHeader?: ReactNode
+  /**
+   * Optional additional className applied per row. The result is appended
+   * to the table's own per-row className. Use this for things like a
+   * selected-row highlight while the page is in edit mode.
+   */
+  rowClassNameAddition?: (track: any, rowIndex: number) => string | undefined
 } & Omit<TableProps, 'onClickRow' | 'columns'>
 
 const defaultColumns: TracksTableColumn[] = [
@@ -214,6 +220,7 @@ export const TracksTable = ({
   data,
   activeIndex,
   trackActionsHeader,
+  rowClassNameAddition,
   ...tableProps
 }: TracksTableProps) => {
   const { isVirtualized, onClickRow } = tableProps
@@ -1046,6 +1053,9 @@ export const TracksTable = ({
     [activateTrack]
   )
 
+  const rowClassNameAdditionRef = useRef(rowClassNameAddition)
+  rowClassNameAdditionRef.current = rowClassNameAddition
+
   const getRowClassName = useCallback((rowIndex: number) => {
     const track = dataRef.current[rowIndex]
     const { isFetchingNFTAccess, hasStreamAccess } = trackAccessMapRef.current[
@@ -1058,10 +1068,15 @@ export const TracksTable = ({
     const deleted =
       track.is_delete || track._marked_deleted || !!track.user?.is_deactivated
     const isPremium = isContentUSDCPurchaseGated(track.stream_conditions)
-    return cn(styles.tableRow, {
-      [styles.disabled]: deleted,
-      [styles.lockedRow]: isLocked && !deleted && !isPremium
-    })
+    const extra = rowClassNameAdditionRef.current?.(track, rowIndex)
+    return cn(
+      styles.tableRow,
+      {
+        [styles.disabled]: deleted,
+        [styles.lockedRow]: isLocked && !deleted && !isPremium
+      },
+      extra
+    )
   }, [])
 
   return (