refactor(album-track-list): I.2 — split AlbumTrackList.tsx 662 → 187 LOC across 7 files (#672)

* refactor(album-track-list): extract helpers + types

Pull formatDuration / codecLabel, the COLUMNS / CENTERED_COLS / SORTABLE_COLS
tables, ColKey / SortKey types, and the isSortable type guard into
utils/albumTrackListHelpers.ts. SortKey is re-exported from
AlbumTrackList.tsx so existing imports stay valid.

AlbumTrackList.tsx: 662 → 633 LOC.

* refactor(album-track-list): extract TrackRow subcomponent

Move the memoised tracklist row (~220 LOC including renderCell switch and
mouse handlers) into components/albumTrackList/TrackRow.tsx. It still
subscribes to its own selection + preview state via primitive selectors,
so per-row re-render scope is unchanged.

AlbumTrackList.tsx: 633 → 404 LOC.

* refactor(album-track-list): extract AlbumTrackListMobile subcomponent

Move the narrow-viewport branch (compact tracklist with disc separators
and no column grid) into components/albumTrackList/AlbumTrackListMobile.tsx.

AlbumTrackList.tsx: 404 → 376 LOC.

* refactor(album-track-list): extract TracklistColumnPicker subcomponent

The column visibility dropdown lives outside .tracklist to avoid the
overflow box clipping its menu — pull the wrapper + button + popover into
components/albumTrackList/TracklistColumnPicker.tsx.

AlbumTrackList.tsx: 376 → 347 LOC.

* refactor(album-track-list): extract TracklistHeaderRow subcomponent

The fixed header (sortable + resizable per-column with the bulk-select
toggle on the num cell) moves into
components/albumTrackList/TracklistHeaderRow.tsx, taking 85+ LOC of cell
rendering with it.

AlbumTrackList.tsx: 347 → 254 LOC.

* refactor(album-track-list): extract useAlbumTrackListSelection hook

Pull bulk-selection state (selectedIds-size subscription, shift-range
toggle, click-outside-clear, song-list-change clear) and the drag-start
dispatcher (single vs multi-song drag) into
hooks/useAlbumTrackListSelection.ts.

AlbumTrackList.tsx: 254 → 187 LOC.

src/hooks/useAlbumTrackListSelection.ts

@@ -0,0 +1,101 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { SubsonicSong } from '../api/subsonicTypes';
+import { useSelectionStore } from '../store/selectionStore';
+import { useDragDrop } from '../contexts/DragDropContext';
+import { songToTrack } from '../utils/songToTrack';
+
+interface UseAlbumTrackListSelectionArgs {
+  songs: SubsonicSong[];
+  tracklistRef: React.RefObject<HTMLDivElement | null>;
+}
+
+interface UseAlbumTrackListSelectionResult {
+  inSelectMode: boolean;
+  allSelected: boolean;
+  onToggleSelect: (id: string, globalIdx: number, shift: boolean) => void;
+  onDragStart: (song: SubsonicSong, me: MouseEvent) => void;
+  toggleAll: () => void;
+}
+
+/**
+ * Bulk selection + drag wiring for `AlbumTrackList`:
+ *  - Clears selection whenever the song list changes (album switch or
+ *    filter applied) and on mousedown outside the tracklist.
+ *  - `onToggleSelect` supports shift-click ranges anchored against the
+ *    last toggled row.
+ *  - `onDragStart` promotes a single-row drag into a multi-row drag when
+ *    the dragged song is part of the active selection.
+ *
+ * Subscribes only to `selectedIds.size` so the host component re-renders
+ * once when select-mode flips on/off; per-row state stays inside
+ * `TrackRow`'s own primitive selector for O(1) toggles.
+ */
+export function useAlbumTrackListSelection({
+  songs,
+  tracklistRef,
+}: UseAlbumTrackListSelectionArgs): UseAlbumTrackListSelectionResult {
+  const psyDrag = useDragDrop();
+  const selectedCount = useSelectionStore(s => s.selectedIds.size);
+  const inSelectMode = selectedCount > 0;
+  const allSelected = selectedCount === songs.length && songs.length > 0;
+  const lastSelectedIdxRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    useSelectionStore.getState().clearAll();
+    lastSelectedIdxRef.current = null;
+  }, [songs]);
+
+  useEffect(() => {
+    if (!inSelectMode) return;
+    const handler = (e: MouseEvent) => {
+      if (tracklistRef.current && !tracklistRef.current.contains(e.target as Node)) {
+        useSelectionStore.getState().clearAll();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [inSelectMode, tracklistRef]);
+
+  const onToggleSelect = useCallback((id: string, globalIdx: number, shift: boolean) => {
+    useSelectionStore.getState().setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (shift && lastSelectedIdxRef.current !== null) {
+        const from = Math.min(lastSelectedIdxRef.current, globalIdx);
+        const to   = Math.max(lastSelectedIdxRef.current, globalIdx);
+        songs.slice(from, to + 1).forEach(s => next.add(s.id));
+      } else {
+        next.has(id) ? next.delete(id) : next.add(id);
+      }
+      lastSelectedIdxRef.current = globalIdx;
+      return next;
+    });
+  }, [songs]);
+
+  const onDragStart = useCallback((song: SubsonicSong, me: MouseEvent) => {
+    const { selectedIds } = useSelectionStore.getState();
+    if (selectedIds.has(song.id) && selectedIds.size > 1) {
+      const tracks = songs
+        .filter(s => selectedIds.has(s.id))
+        .map(s => songToTrack(s));
+      psyDrag.startDrag(
+        { data: JSON.stringify({ type: 'songs', tracks }), label: `${tracks.length} Songs` },
+        me.clientX, me.clientY,
+      );
+    } else {
+      psyDrag.startDrag(
+        { data: JSON.stringify({ type: 'song', track: songToTrack(song) }), label: song.title },
+        me.clientX, me.clientY,
+      );
+    }
+  }, [songs, psyDrag]);
+
+  const toggleAll = useCallback(() => {
+    if (allSelected) {
+      useSelectionStore.getState().clearAll();
+    } else {
+      useSelectionStore.getState().setSelectedIds(() => new Set(songs.map(s => s.id)));
+    }
+  }, [allSelected, songs]);
+
+  return { inSelectMode, allSelected, onToggleSelect, onDragStart, toggleAll };
+}