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/components/AlbumTrackList.tsx

@@ -1,53 +1,22 @@
 import type { SubsonicSong } from '../api/subsonicTypes';
-import { songToTrack } from '../utils/songToTrack';
 import type { Track } from '../store/playerStoreTypes';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Play, ChevronRight, Heart, ChevronDown, Check, RotateCcw, Square, AudioLines } from 'lucide-react';
-import { useTracklistColumns, type ColDef } from '../utils/useTracklistColumns';
+import React, { useState, useEffect } from 'react';
+import { useTracklistColumns } from '../utils/useTracklistColumns';
 import { usePlayerStore } from '../store/playerStore';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useDragDrop } from '../contexts/DragDropContext';
 import { useIsMobile } from '../hooks/useIsMobile';
-import StarRating from './StarRating';
 import { useSelectionStore } from '../store/selectionStore';
-import { useThemeStore } from '../store/themeStore';
-import { usePreviewStore } from '../store/previewStore';
+import {
+  COLUMNS,
+  type SortKey,
+} from '../utils/albumTrackListHelpers';
+import { useAlbumTrackListSelection } from '../hooks/useAlbumTrackListSelection';
+import { TrackRow } from './albumTrackList/TrackRow';
+import { AlbumTrackListMobile } from './albumTrackList/AlbumTrackListMobile';
+import { TracklistColumnPicker } from './albumTrackList/TracklistColumnPicker';
+import { TracklistHeaderRow } from './albumTrackList/TracklistHeaderRow';
 
-function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = Math.floor(seconds % 60);
-  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-  return `${m}:${s.toString().padStart(2, '0')}`;
-}
-
-function codecLabel(song: { suffix?: string; bitRate?: number }, showBitrate: boolean): string {
-  const parts: string[] = [];
-  if (song.suffix) parts.push(song.suffix.toUpperCase());
-  if (showBitrate && song.bitRate) parts.push(`${song.bitRate} kbps`);
-  return parts.join(' · ');
-}
-
-// ── Column configuration ──────────────────────────────────────────────────────
-const COLUMNS: readonly ColDef[] = [
-  { key: 'num',      i18nKey: null,            minWidth: 60,  defaultWidth: 60,  required: true  },
-  { key: 'title',    i18nKey: 'trackTitle',    minWidth: 150, defaultWidth: 0,   required: true,  flex: true },
-  { key: 'artist',   i18nKey: 'trackArtist',   minWidth: 80,  defaultWidth: 180, required: false },
-  { key: 'favorite', i18nKey: 'trackFavorite', minWidth: 50,  defaultWidth: 70,  required: false },
-  { key: 'rating',   i18nKey: 'trackRating',   minWidth: 80,  defaultWidth: 120, required: false },
-  { key: 'duration', i18nKey: 'trackDuration', minWidth: 72,  defaultWidth: 92,  required: false },
-  { key: 'format',   i18nKey: 'trackFormat',   minWidth: 60,  defaultWidth: 90,  required: false },
-  { key: 'genre',    i18nKey: 'trackGenre',    minWidth: 60,  defaultWidth: 90,  required: false },
-];
-
-type ColKey = 'num' | 'title' | 'artist' | 'favorite' | 'rating' | 'duration' | 'format' | 'genre';
-
-const CENTERED_COLS = new Set<ColKey>(['favorite', 'rating', 'duration']);
-
-// ── Props ─────────────────────────────────────────────────────────────────────
-
-export type SortKey = 'natural' | 'title' | 'artist' | 'album' | 'favorite' | 'rating' | 'duration';
+export type { SortKey } from '../utils/albumTrackListHelpers';
 
 interface AlbumTrackListProps {
   songs: SubsonicSong[];
@@ -69,231 +38,6 @@ interface AlbumTrackListProps {
   onSort?: (key: SortKey) => void;
 }
 
-// ── TrackRow (memoised) ───────────────────────────────────────────────────────
-// Subscribes only to its own boolean in the selection store → O(1) re-render on toggle.
-
-interface TrackRowProps {
-  song: SubsonicSong;
-  globalIdx: number;
-  visibleCols: readonly ColDef[];
-  gridStyle: React.CSSProperties;
-  currentTrackId: string | null;
-  isPlaying: boolean;
-  ratingValue: number;
-  isStarred: boolean;
-  inSelectMode: boolean;
-  isContextMenuSong: boolean;
-  onPlaySong: (song: SubsonicSong) => void;
-  onDoubleClickSong?: (song: SubsonicSong) => void;
-  onRate: (songId: string, rating: number) => void;
-  onToggleSongStar: (song: SubsonicSong, e: React.MouseEvent) => void;
-  onContextMenu: AlbumTrackListProps['onContextMenu'];
-  onToggleSelect: (id: string, globalIdx: number, shift: boolean) => void;
-  onDragStart: (song: SubsonicSong, me: MouseEvent) => void;
-  setContextMenuSongId: (id: string | null) => void;
-}
-
-const TrackRow = React.memo(function TrackRow({
-  song,
-  globalIdx,
-  visibleCols,
-  gridStyle,
-  currentTrackId,
-  isPlaying,
-  ratingValue,
-  isStarred,
-  inSelectMode,
-  isContextMenuSong,
-  onPlaySong,
-  onDoubleClickSong,
-  onRate,
-  onToggleSongStar,
-  onContextMenu,
-  onToggleSelect,
-  onDragStart,
-  setContextMenuSongId,
-}: TrackRowProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const showBitrate = useThemeStore(s => s.showBitrate);
-  // Fine-grained: only re-renders when THIS row's selection boolean flips.
-  const isSelected = useSelectionStore(s => s.selectedIds.has(song.id));
-  const isActive = currentTrackId === song.id;
-  // Primitive selector: row only re-renders when *this song's* preview state flips.
-  const isPreviewing = usePreviewStore(s => s.previewingId === song.id);
-  const isPreviewAudioStarted = usePreviewStore(s => s.previewingId === song.id && s.audioStarted);
-
-  const renderCell = (colDef: ColDef) => {
-    const key = colDef.key as ColKey;
-    switch (key) {
-      case 'num':
-        return (
-          <div
-            key="num"
-            className={`track-num${isActive ? ' track-num-active' : ''}`}
-          >
-            <span
-              className={`bulk-check${isSelected ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
-              onClick={e => { e.stopPropagation(); onToggleSelect(song.id, globalIdx, e.shiftKey); }}
-            />
-            {isActive && isPlaying ? (
-              <span className="track-num-eq">
-                <AudioLines className="eq-bars" size={14} />
-              </span>
-            ) : (
-              <span className="track-num-number">{song.track ?? '—'}</span>
-            )}
-          </div>
-        );
-      case 'title':
-        return (
-          <div key="title" className="track-info track-info-suggestion">
-            <button
-              type="button"
-              className="playlist-suggestion-play-btn"
-              onClick={e => { e.stopPropagation(); onPlaySong(song); }}
-              onDoubleClick={onDoubleClickSong ? e => { e.stopPropagation(); onDoubleClickSong(song); } : undefined}
-              data-tooltip={t('common.play')}
-              aria-label={t('common.play')}
-            >
-              <Play size={10} fill="currentColor" strokeWidth={0} className="playlist-suggestion-play-icon" />
-            </button>
-            <button
-              type="button"
-              className={`playlist-suggestion-preview-btn${isPreviewing ? ' is-previewing' : ''}${isPreviewAudioStarted ? ' audio-started' : ''}`}
-              onClick={e => {
-                e.stopPropagation();
-                usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'albums');
-              }}
-              data-tooltip={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
-              aria-label={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
-            >
-              <svg className="playlist-suggestion-preview-ring" viewBox="0 0 24 24" aria-hidden="true">
-                <circle cx="12" cy="12" r="10.5" className="playlist-suggestion-preview-ring-track" />
-                <circle cx="12" cy="12" r="10.5" className="playlist-suggestion-preview-ring-progress" />
-              </svg>
-              {isPreviewing
-                ? <Square size={9} fill="currentColor" strokeWidth={0} className="playlist-suggestion-preview-icon" />
-                : <ChevronRight size={14} className="playlist-suggestion-preview-icon playlist-suggestion-preview-icon-play" />}
-            </button>
-            <span className="track-title">{song.title}</span>
-          </div>
-        );
-      case 'artist': {
-        const artistRefs = song.artists && song.artists.length > 0
-          ? song.artists
-          : [{ id: song.artistId, name: song.artist }];
-        return (
-          <div key="artist" className="track-artist-cell">
-            {artistRefs.map((a, i) => (
-              <React.Fragment key={a.id ?? a.name ?? i}>
-                {i > 0 && <span className="track-artist-sep">&nbsp;·&nbsp;</span>}
-                <span
-                  className={`track-artist${a.id ? ' track-artist-link' : ''}`}
-                  style={{ cursor: a.id ? 'pointer' : 'default' }}
-                  onClick={e => { if (a.id) { e.stopPropagation(); navigate(`/artist/${a.id}`); } }}
-                >
-                  {a.name ?? song.artist}
-                </span>
-              </React.Fragment>
-            ))}
-          </div>
-        );
-      }
-      case 'favorite':
-        return (
-          <div key="favorite" className="track-star-cell">
-            <button
-              className={`btn btn-ghost track-star-btn${isStarred ? ' is-starred' : ''}`}
-              onClick={e => onToggleSongStar(song, e)}
-              data-tooltip={isStarred ? t('albumDetail.favoriteRemove') : t('albumDetail.favoriteAdd')}
-            >
-              <Heart size={14} fill={isStarred ? 'currentColor' : 'none'} />
-            </button>
-          </div>
-        );
-      case 'rating':
-        return (
-          <StarRating
-            key="rating"
-            value={ratingValue}
-            onChange={r => onRate(song.id, r)}
-          />
-        );
-      case 'duration':
-        return (
-          <div key="duration" className="track-duration">
-            {formatDuration(song.duration)}
-          </div>
-        );
-      case 'format':
-        return (
-          <div key="format" className="track-meta">
-            {(song.suffix || (showBitrate && song.bitRate)) && (
-              <span className="track-codec">{codecLabel(song, showBitrate)}</span>
-            )}
-          </div>
-        );
-      case 'genre':
-        return (
-          <div key="genre" className="track-genre">
-            {song.genre ?? '—'}
-          </div>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div
-      className={`track-row track-row-va track-row-with-actions${isActive ? ' active' : ''}${isContextMenuSong ? ' context-active' : ''}${isSelected ? ' bulk-selected' : ''}`}
-      style={gridStyle}
-      onClick={e => {
-        if ((e.target as HTMLElement).closest('button, a, input')) return;
-        if (e.ctrlKey || e.metaKey) {
-          onToggleSelect(song.id, globalIdx, false);
-        } else if (inSelectMode) {
-          onToggleSelect(song.id, globalIdx, e.shiftKey);
-        } else {
-          onPlaySong(song);
-        }
-      }}
-      onDoubleClick={onDoubleClickSong ? e => {
-        if ((e.target as HTMLElement).closest('button, a, input')) return;
-        if (e.ctrlKey || e.metaKey || inSelectMode) return;
-        onDoubleClickSong(song);
-      } : undefined}
-      onContextMenu={e => {
-        e.preventDefault();
-        setContextMenuSongId(song.id);
-        onContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
-      }}
-      role="row"
-      onMouseDown={e => {
-        if (e.button !== 0) return;
-        e.preventDefault();
-        const sx = e.clientX, sy = e.clientY;
-        const onMove = (me: MouseEvent) => {
-          if (Math.abs(me.clientX - sx) > 5 || Math.abs(me.clientY - sy) > 5) {
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
-            onDragStart(song, me);
-          }
-        };
-        const onUp = () => {
-          document.removeEventListener('mousemove', onMove);
-          document.removeEventListener('mouseup', onUp);
-        };
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-      }}
-    >
-      {visibleCols.map(colDef => renderCell(colDef))}
-    </div>
-  );
-});
-
 // ── AlbumTrackList ────────────────────────────────────────────────────────────
 
 export default function AlbumTrackList({
@@ -318,87 +62,21 @@ export default function AlbumTrackList({
   const isMobile = useIsMobile();
   const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
   const contextMenuOpen = usePlayerStore(s => s.contextMenu.isOpen);
-  const psyDrag = useDragDrop();
 
-  // Selection state lives in selectionStore — only the toggled row re-renders (O(1)).
-  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);
-
-  // ── Column state ──────────────────────────────────────────────────────────
   const {
     colVisible, visibleCols, gridStyle,
     startResize, toggleColumn, resetColumns,
     pickerOpen, setPickerOpen, pickerRef, tracklistRef,
   } = useTracklistColumns(COLUMNS, 'psysonic_tracklist_columns');
 
-  // Clear selection when the song list changes (different album / filter applied).
-  useEffect(() => {
-    useSelectionStore.getState().clearAll();
-    lastSelectedIdxRef.current = null;
-  }, [songs]);
+  const {
+    inSelectMode, allSelected, onToggleSelect, onDragStart, toggleAll,
+  } = useAlbumTrackListSelection({ songs, tracklistRef });
 
   useEffect(() => {
     if (!contextMenuOpen) setContextMenuSongId(null);
   }, [contextMenuOpen]);
 
-  // Clear selection on click outside the tracklist (header, album art, etc.)
-  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]);
-
-  // ── Stable callbacks passed to memoised TrackRow ──────────────────────────
-
-  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]);
-
-  // Drag: if the dragged song is part of the selection, drag all selected 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]);
-
   // ── Disc grouping ─────────────────────────────────────────────────────────
   const discs = new Map<number, SubsonicSong[]>();
   if (!sorted) {
@@ -415,192 +93,33 @@ export default function AlbumTrackList({
 
   const currentTrackId = currentTrack?.id ?? null;
 
-  // ── Sortable columns ──────────────────────────────────────────────────────
-  const SORTABLE_COLS = new Set<ColKey | 'album'>(['title', 'artist', 'album', 'favorite', 'rating', 'duration']);
-
-  const isSortable = (key: ColKey | string): key is SortKey => SORTABLE_COLS.has(key as ColKey);
-
-  const handleHeaderClick = (key: ColKey | string) => {
-    if (!isSortable(key) || !onSort) return;
-    onSort(key);
-  };
-
-  const renderSortIndicator = (key: SortKey) => {
-    if (sortKey !== key) return null;
-    return (
-      <span style={{ marginLeft: 4, fontSize: 10, opacity: 0.7 }}>
-        {sortDir === 'asc' ? '▲' : '▼'}
-      </span>
-    );
-  };
-
-  // ── Header cell renderer ──────────────────────────────────────────────────
-  const renderHeaderCell = (colDef: ColDef, colIndex: number) => {
-    const key = colDef.key as ColKey;
-    const isLastCol = colIndex === visibleCols.length - 1;
-    const isCentered = CENTERED_COLS.has(key);
-    const label = colDef.i18nKey ? t(`albumDetail.${colDef.i18nKey as string}`) : '';
-    const canSort = isSortable(key) && onSort;
-    const isActive = canSort && sortKey === key;
-
-    if (key === 'num') {
-      return (
-        <div key={key} className="track-num">
-          <span
-            className={`bulk-check${allSelected ? ' checked' : ''}${inSelectMode ? ' bulk-check-visible' : ''}`}
-            onClick={e => { e.stopPropagation(); toggleAll(); }}
-            style={{ cursor: 'pointer' }}
-          />
-          <span className="track-num-number">#</span>
-        </div>
-      );
-    }
-
-    if (key === 'title') {
-      const hasNextCol = colIndex + 1 < visibleCols.length;
-      return (
-        <div
-          key={key}
-          style={{
-            position: 'relative',
-            padding: 0,
-            margin: 0,
-            minWidth: 0,
-            overflow: 'hidden',
-            cursor: canSort ? 'pointer' : 'default',
-            userSelect: 'none',
-          }}
-          onClick={() => handleHeaderClick(key)}
-          className={isActive ? 'tracklist-header-cell-active' : ''}
-        >
-          <div style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 12 }}>
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: isActive ? 600 : 400 }}>{label}</span>
-            {canSort && renderSortIndicator(key as SortKey)}
-          </div>
-          {hasNextCol && (
-            <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex + 1, -1)} />
-          )}
-        </div>
-      );
-    }
-
-    const isResizable = !isLastCol;
-    return (
-      <div
-        key={key}
-        style={{
-          position: 'relative',
-          padding: 0,
-          margin: 0,
-          minWidth: 0,
-          overflow: 'hidden',
-          cursor: canSort ? 'pointer' : 'default',
-          userSelect: 'none',
-        }}
-        onClick={() => handleHeaderClick(key)}
-        className={isActive ? 'tracklist-header-cell-active' : ''}
-      >
-        <div
-          style={{
-            display: 'flex', width: '100%', height: '100%', alignItems: 'center',
-            justifyContent: isCentered ? 'center' : 'flex-start',
-            paddingLeft: isCentered ? 0 : 12,
-          }}
-        >
-          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: isActive ? 600 : 400 }}>{label}</span>
-          {canSort && isSortable(key) && renderSortIndicator(key as SortKey)}
-        </div>
-        {isResizable && (
-          <div className="col-resize-handle" onMouseDown={e => startResize(e, colIndex, 1)} />
-        )}
-      </div>
-    );
-  };
-
-  // ── Mobile tracklist ──────────────────────────────────────────────────────
   if (isMobile) {
     return (
-      <div className="tracklist-mobile">
-        {discNums.map(discNum => (
-          <div key={discNum}>
-            {isMultiDisc && (
-              <div className="disc-header">
-                <span className="disc-icon">💿</span> CD {discNum}
-              </div>
-            )}
-            {discs.get(discNum)!.map(song => {
-              const isActive = currentTrackId === song.id;
-              return (
-                <div
-                  key={song.id}
-                  className={`tracklist-mobile-row${isActive ? ' active' : ''}${contextMenuSongId === song.id ? ' context-active' : ''}`}
-                  onClick={() => onPlaySong(song)}
-                  onContextMenu={e => {
-                    e.preventDefault();
-                    setContextMenuSongId(song.id);
-                    onContextMenu(e.clientX, e.clientY, songToTrack(song), 'album-song');
-                  }}
-                >
-                  <div className="tracklist-mobile-main">
-                    {isActive && isPlaying ? (
-                      <span className="tracklist-mobile-eq">
-                        <AudioLines className="eq-bars" size={14} />
-                      </span>
-                    ) : (
-                      <span className="tracklist-mobile-num">{song.track ?? ''}</span>
-                    )}
-                    <span className="tracklist-mobile-title">{song.title}</span>
-                  </div>
-                  <span className="tracklist-mobile-duration">{formatDuration(song.duration)}</span>
-                </div>
-              );
-            })}
-          </div>
-        ))}
-      </div>
+      <AlbumTrackListMobile
+        discNums={discNums}
+        discs={discs}
+        isMultiDisc={isMultiDisc}
+        currentTrackId={currentTrackId}
+        isPlaying={isPlaying}
+        contextMenuSongId={contextMenuSongId}
+        setContextMenuSongId={setContextMenuSongId}
+        onPlaySong={onPlaySong}
+        onContextMenu={onContextMenu}
+      />
     );
   }
 
   return (
     <>
-      {/* Column visibility picker - outside .tracklist to avoid overflow cutoff */}
-      <div className="tracklist-col-picker-wrapper" ref={pickerRef}>
-        <div className="tracklist-col-picker">
-          <button
-            className="tracklist-col-picker-btn"
-            onClick={e => { e.stopPropagation(); setPickerOpen(v => !v); }}
-            data-tooltip={t('albumDetail.columns')}
-          >
-            <ChevronDown size={14} />
-          </button>
-          {pickerOpen && (
-            <div className="tracklist-col-picker-menu">
-              <div className="tracklist-col-picker-label">{t('albumDetail.columns')}</div>
-              {COLUMNS.filter(c => !c.required).map(c => {
-                const label = c.i18nKey ? t(`albumDetail.${c.i18nKey as string}`) : c.key;
-                const isOn = colVisible.has(c.key);
-                return (
-                  <button
-                    key={c.key}
-                    className={`tracklist-col-picker-item${isOn ? ' active' : ''}`}
-                    onClick={() => toggleColumn(c.key)}
-                  >
-                    <span className="tracklist-col-picker-check">
-                      {isOn && <Check size={13} />}
-                    </span>
-                    {label}
-                  </button>
-                );
-              })}
-              <div className="tracklist-col-picker-divider" />
-              <button className="tracklist-col-picker-reset" onClick={resetColumns}>
-                <RotateCcw size={13} />
-                {t('albumDetail.resetColumns')}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
+      <TracklistColumnPicker
+        pickerRef={pickerRef}
+        pickerOpen={pickerOpen}
+        setPickerOpen={setPickerOpen}
+        colVisible={colVisible}
+        toggleColumn={toggleColumn}
+        resetColumns={resetColumns}
+        t={t}
+      />
 
     <div
         className="tracklist"
@@ -611,12 +130,18 @@ export default function AlbumTrackList({
         }}
       >
 
-      {/* ── Header ── */}
-      <div className="tracklist-header-wrapper">
-        <div className="tracklist-header" style={gridStyle}>
-          {visibleCols.map((colDef, colIndex) => renderHeaderCell(colDef, colIndex))}
-        </div>
-      </div>
+      <TracklistHeaderRow
+        visibleCols={visibleCols}
+        gridStyle={gridStyle}
+        sortKey={sortKey}
+        sortDir={sortDir}
+        onSort={onSort}
+        allSelected={allSelected}
+        inSelectMode={inSelectMode}
+        toggleAll={toggleAll}
+        startResize={startResize}
+        t={t}
+      />
 
       {/* ── Tracks ── */}
       {discNums.map(discNum => (