feat(artist-detail): user-configurable visibility and order of page sections (closes #252) (#254)

Per bcorporaal's request in #252: album-oriented listeners want a
cleaner artist page focused on the album grid, with the freedom to
reorder/hide bio, top tracks, and similar artists.

Five sections are now reorder- and toggle-able from Settings →
Personalisation → "Artist page sections": Bio, Top tracks, Similar
artists, Albums, Also featured on. The fixed header block (artist
photo, name, action buttons) stays at the top.

Implementation reuses the existing sidebar customizer pattern:

- new `src/store/artistLayoutStore.ts` modelled on `sidebarStore.ts`
  with the same persist + onRehydrateStorage migration so future-added
  sections don't silently disappear from existing users' configs.
- `ArtistDetail.tsx` render block refactored from a flat sequence of
  conditional JSX into a `renderableSectionIds.map()` driven by the
  store. The "first rendered section gets marginTop: 0" rule now
  works regardless of the configured order — both hidden-by-toggle
  and empty-data sections are filtered before the layout decides
  what's first.
- `ArtistLayoutCustomizer` component in Settings, lifted from
  `LyricsSourcesCustomizer` (drag via `useDragSource` + `psy-drop`
  event, per-row toggle, reset button).
- 7 new i18n keys per locale across all 8 languages.

The store hook MUST stay above the loading / !artist early returns —
otherwise React's hook call order mismatches between renders and the
component fails silently. Lesson learned during the refactor.

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-21 22:08:39 +02:00
committed by GitHub
parent c40243dfea
commit f7a721b7b1
11 changed files with 402 additions and 103 deletions
+8
View File
@@ -651,6 +651,14 @@ export const esTranslation = {
homeCustomizerTitle: 'Página de Inicio',
sidebarTitle: 'Barra Lateral',
sidebarReset: 'Restablecer a predeterminado',
artistLayoutTitle: 'Secciones de la página del artista',
artistLayoutDesc: 'Arrastra para reordenar, alterna para ocultar secciones individuales de la página del artista. Las secciones sin datos se omiten automáticamente.',
artistLayoutReset: 'Restablecer a predeterminado',
artistLayoutBio: 'Biografía del artista',
artistLayoutTopTracks: 'Mejores pistas',
artistLayoutSimilar: 'Artistas similares',
artistLayoutAlbums: 'Álbumes',
artistLayoutFeatured: 'También presente en',
sidebarDrag: 'Arrastra para reordenar',
sidebarFixed: 'Siempre visible',
randomNavSplitTitle: 'Dividir navegación Mix',