refactor(ui): co-locate OverlayScrollArea as a shared primitive in src/ui

src/app/AppShell.tsx

@@ -23,7 +23,7 @@ import ThemeMigrationNotice from '../components/ThemeMigrationNotice';
 import OrbitAccountPicker from '../components/OrbitAccountPicker';
 import OrbitHelpModal from '../components/OrbitHelpModal';
 import TooltipPortal from '@/ui/TooltipPortal';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import {
   APP_MAIN_SCROLL_VIEWPORT_ID,
   mainRouteInpageScrollViewportId,

src/components/LyricsPane.tsx

@@ -8,7 +8,7 @@ import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';
 import type { Track } from '../store/playerStoreTypes';
 import { EaseScroller, targetForFraction } from '../utils/ui/easeScroll';
-import OverlayScrollArea from './OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 
 interface Props {
   currentTrack: Track | null;

src/components/NowPlayingInfo.tsx

@@ -10,7 +10,7 @@ import { useAuthStore } from '../store/authStore';
 import { usePlaybackServerId } from '../hooks/usePlaybackServerId';
 import { fetchBandsintownEvents, type BandsintownEvent } from '../api/bandsintown';
 import CachedImage from './CachedImage';
-import OverlayScrollArea from './OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { primaryTrackArtistRef } from '../utils/playback/trackArtistRefs';
 
 const TOUR_LIMIT = 5;

src/components/Sidebar.tsx

@@ -12,7 +12,7 @@ import { PanelLeft, PanelLeftClose, Trash2 } from 'lucide-react';
 import PsysonicLogo from './PsysonicLogo';
 import PSmallLogo from './PSmallLogo';
 import { usePlaylistStore } from '../store/playlistStore';
-import OverlayScrollArea from './OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import {
   getLibraryItemsForReorder,
   getSystemItemsForReorder,

src/components/miniPlayer/MiniQueue.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import type { TFunction } from 'i18next';
-import OverlayScrollArea from '../OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import type { MiniSyncPayload, MiniTrackInfo } from '../../utils/miniPlayerBridge';
 
 // Stable initial rect so the virtualizer never re-initializes on re-render (an

src/components/queuePanel/QueueList.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useSyncExternalStore } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Play } from 'lucide-react';
 import type { TFunction } from 'i18next';
-import OverlayScrollArea from '../OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { usePlayerStore } from '../../store/playerStore';
 import { useLuckyMixStore } from '../../store/luckyMixStore';
 import type { QueueItemRef, PlayerState } from '../../store/playerStoreTypes';

src/components/search/ShareQueuePreviewModal.tsx

@@ -7,7 +7,7 @@ import type { ServerProfile } from '../../store/authStoreTypes';
 import { formatTrackTime } from '../../utils/format/formatDuration';
 import type { ShareQueuePreviewState } from '../../hooks/useShareQueuePreview';
 import { sharePayloadTotal, type QueueableShareSearchPayload } from '../../utils/share/shareSearch';
-import OverlayScrollArea from '../OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { usePlayerStore } from '../../store/playerStore';
 import { COVER_DENSE_SEARCH_CSS_PX } from '../../cover/layoutSizes';
 import { COVER_SCOPE_ACTIVE, type CoverServerScope } from '../../cover/types';

src/pages/Albums.tsx

@@ -31,7 +31,7 @@ import { useMainstageInpageHeaderTight } from '../hooks/useMainstageInpageHeader
 import { useInpageScrollViewport } from '../hooks/useInpageScrollViewport';
 import InpageScrollSentinel from '../components/InpageScrollSentinel';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { ALBUMS_INPAGE_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { useLibraryIndexStore } from '../store/libraryIndexStore';
 import { useAlbumBrowseFilters, useAlbumBrowseScrollSnapshotSync, type AlbumBrowseScrollSnapshot } from '../hooks/useAlbumBrowseFilters';

src/pages/Artists.tsx

@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { LayoutGrid, List, Images } from 'lucide-react';
 import SelectionToggleButton from '../components/SelectionToggleButton';
 import StarFilterButton from '../components/StarFilterButton';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useTranslation } from 'react-i18next';

src/pages/Composers.tsx

@@ -24,7 +24,7 @@ import { ALL_SENTINEL, artistLetterBucket } from '../utils/componentHelpers/arti
 import { useLibraryIgnoredArticles } from '../hooks/useLibraryIgnoredArticles';
 import { usePerfProbeFlags } from '../utils/perf/perfFlags';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { useVirtualizerScrollMargin } from '../hooks/useVirtualizerScrollMargin';
 import { useClientSliceInfiniteScroll } from '../hooks/useClientSliceInfiniteScroll';
 import { useInpageScrollViewport } from '../hooks/useInpageScrollViewport';

src/pages/GenreDetail.tsx

@@ -5,7 +5,7 @@ import { ArrowLeft, Disc3, Play, ListPlus, Loader2 } from 'lucide-react';
 import AlbumCard from '../components/AlbumCard';
 import { LongPressWaveOverlay } from '../components/LongPressWaveOverlay';
 import InpageScrollSentinel from '../components/InpageScrollSentinel';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
 import { GENRE_DETAIL_INPAGE_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { albumGridWarmCovers } from '../cover/layoutSizes';

src/pages/LosslessAlbums.tsx

@@ -22,7 +22,7 @@ import { Download, HardDriveDownload, ListPlus } from 'lucide-react';
 import SelectionToggleButton from '../components/SelectionToggleButton';
 import { albumGridWarmCovers } from '../cover/layoutSizes';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { LOSSLESS_ALBUMS_INPAGE_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { useInpageScrollSentinel } from '../hooks/useInpageScrollSentinel';
 import { useInpageScrollViewport } from '../hooks/useInpageScrollViewport';

src/pages/NewReleases.tsx

@@ -23,7 +23,7 @@ import { usePerfProbeFlags } from '../utils/perf/perfFlags';
 import { useMainstageInpageHeaderTight } from '../hooks/useMainstageInpageHeaderTight';
 import { albumGridWarmCovers } from '../cover/layoutSizes';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { NEW_RELEASES_INPAGE_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { useAsyncInpagePagination } from '../hooks/useAsyncInpagePagination';
 import { useInpageScrollSentinel } from '../hooks/useInpageScrollSentinel';

src/pages/NowPlaying.tsx

@@ -14,7 +14,7 @@ import { useLyricsStore } from '../store/lyricsStore';
 import { songToTrack } from '../utils/playback/songToTrack';
 import { useRadioMetadata } from '../hooks/useRadioMetadata';
 import { useDragDrop } from '../contexts/DragDropContext';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import {
   useNpLayoutStore, NP_CARD_IDS,
   type NpCardId, type NpColumn,

src/pages/RandomAlbums.tsx

@@ -29,7 +29,7 @@ import {
   primeAlbumCoversForDisplay,
 } from '../cover/warmDiskPeek';
 import { VirtualCardGrid } from '../components/VirtualCardGrid';
-import OverlayScrollArea from '../components/OverlayScrollArea';
+import OverlayScrollArea from '@/ui/OverlayScrollArea';
 import { RANDOM_ALBUMS_INPAGE_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { useMainstageInpageHeaderTight } from '../hooks/useMainstageInpageHeaderTight';
 import { useInpageScrollViewport } from '../hooks/useInpageScrollViewport';

src/ui/OverlayScrollArea.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { computeOverlayScrollbarThumbMeta } from '../utils/ui/overlayScrollbarMetrics';
+import { computeOverlayScrollbarThumbMeta } from '@/utils/ui/overlayScrollbarMetrics';
-import { bindOverlayScrollbarThumbDrag } from '../utils/ui/overlayScrollbarThumb';
+import { bindOverlayScrollbarThumbDrag } from '@/utils/ui/overlayScrollbarThumb';
-import { usePerfProbeFlags } from '../utils/perf/perfFlags';
+import { usePerfProbeFlags } from '@/utils/perf/perfFlags';
 
 export type OverlayScrollRailInset = 'none' | 'mini' | 'panel';