mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
refactor(sidebar): H2 — extract 5 hooks + 5 sub-components (#664)
* refactor(sidebar): H2.1 — extract helpers + constants * refactor(sidebar): H2.2 — extract useSidebarNewReleasesUnread hook * refactor(sidebar): H2.3 — extract useSidebarNavDnd hook * refactor(sidebar): H2.4 — extract 3 hooks (LibraryDropdown + ScrollVisible + PerfProbe) * refactor(sidebar): H2.5 — extract SidebarPerfProbeModal component * refactor(sidebar): H2.5–H2.8 — split JSX into per-block components Sidebar.tsx 938 → 271 LOC. All resulting files under the 400-LOC guideline: components/sidebar/SidebarLibraryPicker.tsx 96 components/sidebar/SidebarActiveJobs.tsx 58 components/sidebar/SidebarNavBody.tsx 293 components/sidebar/SidebarPerfProbeModal.tsx 259 components/sidebar/SidebarPerfProbePhase2.tsx 176
This commit is contained in:
Frank Stellmacher
committed by
GitHub
GitHub
parent
ef5eda263d
commit
b8a9fe860e
@@ -0,0 +1,176 @@
|
||||
import { setPerfProbeFlag, type PerfProbeFlags } from '../../utils/perfFlags';
|
||||
|
||||
export default function SidebarPerfProbePhase2({ perfFlags }: { perfFlags: PerfProbeFlags }) {
|
||||
return (
|
||||
<details className="sidebar-perf-modal__phase">
|
||||
<summary className="sidebar-perf-modal__phase-title">Phase 2 — Mainstage (Center Content)</summary>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainRouteContentMount}
|
||||
onChange={e => setPerfProbeFlag('disableMainRouteContentMount', e.target.checked)}
|
||||
/>
|
||||
<span>Disable central route content mount</span>
|
||||
</label>
|
||||
<details className="sidebar-perf-modal__phase sidebar-perf-modal__phase--nested">
|
||||
<summary className="sidebar-perf-modal__phase-title">Shared mainstage layers (multiple pages)</summary>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageStickyHeader}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageStickyHeader', e.target.checked)}
|
||||
/>
|
||||
<span>Disable sticky headers (Tracks + Albums)</span>
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<details className="sidebar-perf-modal__phase sidebar-perf-modal__phase--nested">
|
||||
<summary className="sidebar-perf-modal__phase-title">Home (`/`)</summary>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageHero}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageHero', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home hero block</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageHeroBackdrop}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageHeroBackdrop', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Hero backdrop/crossfade only</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRails}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRails', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home rows/rails (`AlbumRow` + `SongRail`)</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableHomeAlbumRows}
|
||||
onChange={e => setPerfProbeFlag('disableHomeAlbumRows', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home `AlbumRow` sections only</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableHomeSongRails}
|
||||
onChange={e => setPerfProbeFlag('disableHomeSongRails', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home `SongRail` sections only</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRailArtwork}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRailArtwork', e.target.checked)}
|
||||
/>
|
||||
<span>Disable artwork inside Home rows/rails</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableHomeRailArtwork}
|
||||
onChange={e => setPerfProbeFlag('disableHomeRailArtwork', e.target.checked)}
|
||||
/>
|
||||
<span>Disable artwork inside Home rows/rails only</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableHomeArtworkFx}
|
||||
onChange={e => setPerfProbeFlag('disableHomeArtworkFx', e.target.checked)}
|
||||
/>
|
||||
<span>Keep artwork, disable Home card visual effects (hover/overlay/shadows)</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableHomeArtworkClip}
|
||||
onChange={e => setPerfProbeFlag('disableHomeArtworkClip', e.target.checked)}
|
||||
/>
|
||||
<span>Diagnostic: flatten Home artwork clipping (no rounded corners/masks)</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRailInteractivity}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRailInteractivity', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home rail scroll/nav handlers</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageGridCards}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageGridCards', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Home discover artists chip-grid</span>
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<details className="sidebar-perf-modal__phase sidebar-perf-modal__phase--nested">
|
||||
<summary className="sidebar-perf-modal__phase-title">Tracks (`/tracks`)</summary>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageHero}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageHero', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Tracks hero block</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRails}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRails', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Tracks rails (Highly Rated + Random)</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRailArtwork}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRailArtwork', e.target.checked)}
|
||||
/>
|
||||
<span>Disable artwork inside Tracks rails</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageRailInteractivity}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageRailInteractivity', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Tracks rail scroll/nav handlers</span>
|
||||
</label>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageVirtualLists}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageVirtualLists', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Tracks virtual browse list (`VirtualSongList`)</span>
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<details className="sidebar-perf-modal__phase sidebar-perf-modal__phase--nested">
|
||||
<summary className="sidebar-perf-modal__phase-title">Albums (`/albums`)</summary>
|
||||
<label className="sidebar-perf-modal__item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={perfFlags.disableMainstageGridCards}
|
||||
onChange={e => setPerfProbeFlag('disableMainstageGridCards', e.target.checked)}
|
||||
/>
|
||||
<span>Disable Albums card grid (`AlbumCard` list)</span>
|
||||
</label>
|
||||
</details>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user