Einstellungsseiten: Sektions-Sprungnavigation #145

New Issue

fable-5 · 2026-07-20T00:15:47+02:00

fable-5 commented

2026-07-20 00:15:47 +02:00

Ziel

Auf allen vier Einstellungsseiten (Nutzer-, Teich-, Admin-Einstellungen, Admin-System) werden die vorhandenen Abschnitte als Sprungliste in einer Seitenleiste angezeigt; ein Klick scrollt zur Sektion.

Umsetzungsskizze

Ist-Zustand: apps/web/src/pages/SettingsPage.tsx, PondSettingsPage.tsx, AdminSettingsPage.tsx, AdminSystemPage.tsx bestehen aus flach gestapelten <section className="settings-section">-Blöcken (Style-Hook apps/web/src/styles/base.css:855) — ohne id-Anker, ohne Navigation.
Neue geteilte Komponente SettingsSectionNav + Layout-Wrapper (z. B. apps/web/src/components/SettingsSectionNav.tsx): nimmt [{id, title}], rendert eine sticky Nav-Spalte neben dem Inhalt.
Sektionen bekommen id-Anker; aktive Sektion per IntersectionObserver hervorgehoben; Titel aus den vorhandenen i18n-Keys der <h2>-Überschriften.
Schmale Viewports: Nav als horizontale Chip-Leiste oberhalb des Inhalts (kein zweites Sidebar-Gedränge neben der globalen Sidebar).
Styles in styles/base.css neben .settings-section.

Akzeptanzkriterien

Alle 4 Einstellungsseiten zeigen die Sektions-Navigation.
Klick springt zur Sektion; aktive Sektion ist markiert.
de + en; e2e-Spec (settings-nav) im CI-Pack.

## Ziel Auf allen vier Einstellungsseiten (Nutzer-, Teich-, Admin-Einstellungen, Admin-System) werden die vorhandenen Abschnitte als Sprungliste in einer Seitenleiste angezeigt; ein Klick scrollt zur Sektion. ## Umsetzungsskizze - Ist-Zustand: `apps/web/src/pages/SettingsPage.tsx`, `PondSettingsPage.tsx`, `AdminSettingsPage.tsx`, `AdminSystemPage.tsx` bestehen aus flach gestapelten `<section className="settings-section">`-Blöcken (Style-Hook `apps/web/src/styles/base.css:855`) — ohne `id`-Anker, ohne Navigation. - Neue geteilte Komponente `SettingsSectionNav` + Layout-Wrapper (z. B. `apps/web/src/components/SettingsSectionNav.tsx`): nimmt `[{id, title}]`, rendert eine sticky Nav-Spalte neben dem Inhalt. - Sektionen bekommen `id`-Anker; aktive Sektion per IntersectionObserver hervorgehoben; Titel aus den vorhandenen i18n-Keys der `<h2>`-Überschriften. - Schmale Viewports: Nav als horizontale Chip-Leiste oberhalb des Inhalts (kein zweites Sidebar-Gedränge neben der globalen Sidebar). - Styles in `styles/base.css` neben `.settings-section`. ## Akzeptanzkriterien - Alle 4 Einstellungsseiten zeigen die Sektions-Navigation. - Klick springt zur Sektion; aktive Sektion ist markiert. - de + en; e2e-Spec (settings-nav) im CI-Pack.

fable-5 added this to the M20 — UI & Einbettung milestone 2026-07-20 00:15:47 +02:00

fable-5 referenced this issue from a commit

2026-07-20 00:34:31 +02:00

#145: Einstellungsseiten mit Sektions-Sprungnavigation

fable-5 referenced this issue

2026-07-20 00:34:43 +02:00

M20: Einstellungs-Sektionsnavigation (#145) + transparente Einbettung $[[…]] (#146) #156

fable-5 commented

2026-07-20 00:50:28 +02:00

Umgesetzt in PR #156 (Commit b4247f4): Neue geteilte SettingsLayout-Komponente leitet die Sprungnavigation per MutationObserver aus den section>h2-Blöcken ab (erfasst konditionale und komponenten-eigene Sektionen ohne Verdrahtung). Sticky Leiste neben dem Inhalt, horizontale Chip-Leiste auf schmalen Viewports, aktive Sektion via Scroll-Position (am Seitenende gewinnt die letzte). Auf allen vier Einstellungsseiten verdrahtet; Admin-Grundeinstellungen haben dafür eine eigene Überschrift bekommen. Neuer CI-Pack settings-nav (grün); CI des PR komplett grün, auf Test deployt (b4247f4).

Umgesetzt in PR #156 (Commit b4247f4): Neue geteilte `SettingsLayout`-Komponente leitet die Sprungnavigation per MutationObserver aus den `section>h2`-Blöcken ab (erfasst konditionale und komponenten-eigene Sektionen ohne Verdrahtung). Sticky Leiste neben dem Inhalt, horizontale Chip-Leiste auf schmalen Viewports, aktive Sektion via Scroll-Position (am Seitenende gewinnt die letzte). Auf allen vier Einstellungsseiten verdrahtet; Admin-Grundeinstellungen haben dafür eine eigene Überschrift bekommen. Neuer CI-Pack `settings-nav` (grün); CI des PR komplett grün, auf Test deployt (b4247f4).

fable-5 closed this issue

2026-07-20 00:50:28 +02:00

Sign in to join this conversation.