feat(web): row-click selection on playlist tracks in edit mode

While the playlist detail page is in edit mode, clicking a track row
toggles its selection in the bulk-actions context instead of playing
the track. Holding shift while clicking extends the selection over
the range between the previous click and the new one.

- New `EditAwareTracksTable` wrapper around the standard
  `TracksTable`. It captures the global shift-key state with a
  window listener (TracksTable's onClickRow does not pass a
  MouseEvent) and rewrites `onClickRow` to call
  `selection.toggle(id, index, { shift })` when edit mode is active.
- Outside of edit mode the wrapper is a transparent pass-through and
  the existing play-on-click behavior is preserved.
- Desktop `CollectionPage` swaps its `TracksTable` usage for the new
  edit-aware wrapper.

Combined with the bulk-actions bar from the previous PR, the user
can now: shift-click a range, Cmd/Ctrl+A to select all, Escape to
clear, Delete to remove, Cmd/Ctrl+Z/Y for undo/redo, and the bar's
Copy URLs / Remove buttons for bulk operations.

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

Author: dylanjeffers

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

@@ -0,0 +1,66 @@
+import { ComponentProps, useCallback, useEffect, useRef } from 'react'
+
+import { ID } from '@audius/common/models'
+
+import { TracksTable } from 'components/tracks-table'
+
+import { usePlaylistEditMode } from '../PlaylistEditModeContext'
+
+import { useTrackSelection } from './TrackSelectionContext'
+
+type TrackLike = { track_id?: number | null } & Record<string, unknown>
+
+type EditAwareTracksTableProps = ComponentProps<typeof TracksTable> & {
+  collectionId: ID
+}
+
+/**
+ * Wraps the standard TracksTable for the playlist detail page so that, while
+ * the page is in edit mode, clicking a row toggles selection (shift to extend
+ * the range) instead of activating playback. Outside of edit mode the
+ * behavior is identical to the underlying TracksTable.
+ */
+export const EditAwareTracksTable = (props: EditAwareTracksTableProps) => {
+  const { collectionId, onClickRow, ...rest } = props
+  const editMode = usePlaylistEditMode()
+  const selection = useTrackSelection()
+  const isEditingThis =
+    editMode.isEditMode && editMode.collectionId === collectionId
+
+  // Capture shift modifier state from keyboard so we can extend the selection
+  // even though TracksTable's onClickRow does not pass the MouseEvent.
+  const shiftRef = useRef(false)
+  useEffect(() => {
+    if (!isEditingThis) {
+      shiftRef.current = false
+      return
+    }
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftRef.current = true
+    }
+    const up = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftRef.current = false
+    }
+    window.addEventListener('keydown', down)
+    window.addEventListener('keyup', up)
+    return () => {
+      window.removeEventListener('keydown', down)
+      window.removeEventListener('keyup', up)
+    }
+  }, [isEditingThis])
+
+  const handleClickRow = useCallback(
+    (track: TrackLike, index: number) => {
+      if (!isEditingThis) {
+        onClickRow?.(track, index)
+        return
+      }
+      const id = track.track_id
+      if (typeof id !== 'number') return
+      selection.toggle(id, index, { shift: shiftRef.current })
+    },
+    [isEditingThis, onClickRow, selection]
+  )
+
+  return <TracksTable {...rest} onClickRow={handleClickRow} />
+}

packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx

@@ -24,14 +24,14 @@ import { CollectionDogEar } from 'components/collection'
 import { CollectionHeader } from 'components/collection/desktop/CollectionHeader'
 import { PlaylistEditModeBar } from 'components/collection/desktop/edit-mode/PlaylistEditModeBar'
 import { PlaylistEditModeProvider } from 'components/collection/desktop/edit-mode/PlaylistEditModeContext'
+import { EditAwareTracksTable } from 'components/collection/desktop/edit-mode/tracks/EditAwareTracksTable'
 import { TrackBulkActionsBar } from 'components/collection/desktop/edit-mode/tracks/TrackBulkActionsBar'
 import { TrackHistoryProvider } from 'components/collection/desktop/edit-mode/tracks/TrackHistoryContext'
 import { TrackSelectionProvider } from 'components/collection/desktop/edit-mode/tracks/TrackSelectionContext'
 import FilterInput from 'components/filter-input/FilterInput'
 import Page from 'components/page/Page'
 import { SuggestedTracks } from 'components/suggested-tracks'
 import { RESPONSIVE_TABLE_POLICIES } from 'components/table/responsivePolicies'
-import { TracksTable } from 'components/tracks-table'
 import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
 import { useMainContentRef } from 'pages/MainContentContext'
 import { computeCollectionMetadataProps } from 'pages/collection-page/store/utils'
@@ -349,7 +349,8 @@ const CollectionPage = ({ type }: CollectionPageProps) => {
                 <NoSearchResultsContent />
               ) : (
                 <div className={styles.tableWrapper}>
-                  <TracksTable
+                  <EditAwareTracksTable
+                    collectionId={playlistId!}
                     // @ts-ignore
                     columns={tracksTableColumns}
                     wrapperClassName={styles.tracksTableWrapper}