diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml index b32b1d1..5815f24 100644 --- a/.gitea/workflows/ci.yml +++ b/.gitea/workflows/ci.yml @@ -396,6 +396,16 @@ jobs: E2E_BASE_URL=http://localhost:5173 \ pnpm --filter @dorfteich/web exec playwright test e2e/favorites.spec.ts + - name: Reset login rate limit before settings-nav pack + run: | + echo "DELETE FROM rate_limits WHERE key LIKE 'login%';" | \ + pnpm --filter @dorfteich/api exec prisma db execute --stdin --url "$DATABASE_URL" + + - name: Run settings-nav pack + run: | + E2E_BASE_URL=http://localhost:5173 \ + pnpm --filter @dorfteich/web exec playwright test e2e/settings-nav.spec.ts + - name: Reset login rate limit before create-missing-page pack run: | echo "DELETE FROM rate_limits WHERE key LIKE 'login%';" | \ diff --git a/apps/web/e2e/settings-nav.spec.ts b/apps/web/e2e/settings-nav.spec.ts new file mode 100644 index 0000000..7019175 --- /dev/null +++ b/apps/web/e2e/settings-nav.spec.ts @@ -0,0 +1,60 @@ +import { expect, test, type BrowserContext } from '@playwright/test'; + +import { contextForUser } from './helpers'; + +/** + * Settings section navigation pack (issue #145): every settings page derives + * a jump nav from its stacked sections; clicking an entry scrolls the section + * into view and marks it active. Language-independent selectors (CSS classes) + * throughout. + */ +const BASE_URL = process.env.E2E_BASE_URL ?? 'http://localhost:5173'; + +async function json(context: BrowserContext, url: string, data: unknown): Promise { + const response = await context.request.post(url, { data }); + if (!response.ok()) throw new Error(`post ${url} → ${response.status()}`); + return response.json() as Promise; +} + +test('user settings show the jump nav and clicking scrolls + activates', async ({ browser }) => { + const context = await contextForUser(browser, BASE_URL, 'fixture-user'); + const page = await context.newPage(); + await page.goto('/settings'); + + const nav = page.locator('.settings-nav'); + await expect(nav).toBeVisible(); + const links = nav.locator('.settings-nav__link'); + // Profile, password, sessions, watches, API tokens, data export. + await expect(links).toHaveCount(6); + + // Jump to the last section: it scrolls into view and becomes active. + const last = links.last(); + await last.click(); + const lastSection = page.locator('.settings-layout section[id]').last(); + await expect(lastSection).toBeInViewport(); + await expect(last).toHaveClass(/settings-nav__link--active/); + + await context.close(); +}); + +test('pond settings derive the nav from their sections', async ({ browser }) => { + const context = await contextForUser(browser, BASE_URL, 'fixture-user'); + const pond = await json<{ id: string; slug: string }>(context, '/api/v1/ponds', { + name: `Nav Pack ${Date.now()}`, + }); + + const page = await context.newPage(); + await page.goto(`/p/${pond.slug}/settings`); + + const links = page.locator('.settings-nav .settings-nav__link'); + // The pond owner sees the full section stack — at least members, labels, + // missing links, import, files, appearance, plugins, sidebar, comments, + // API, export. + await expect(links.first()).toBeVisible(); + expect(await links.count()).toBeGreaterThanOrEqual(8); + + await links.last().click(); + await expect(page.locator('.settings-layout section[id]').last()).toBeInViewport(); + + await context.close(); +}); diff --git a/apps/web/src/components/SettingsLayout.tsx b/apps/web/src/components/SettingsLayout.tsx new file mode 100644 index 0000000..5c7e88e --- /dev/null +++ b/apps/web/src/components/SettingsLayout.tsx @@ -0,0 +1,137 @@ +import { useEffect, useRef, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +interface SectionEntry { + id: string; + title: string; +} + +/** A stable, readable anchor id derived from the section heading. */ +function anchorId(title: string, taken: Set): string { + const base = + 'sec-' + + (title + .toLowerCase() + .normalize('NFD') + .replace(/[̀-ͯ]/g, '') + .replace(/[^a-z0-9]+/g, '-') + .replace(/^-+|-+$/g, '') || 'section'); + let id = base; + let n = 2; + while (taken.has(id)) id = `${base}-${n++}`; + taken.add(id); + return id; +} + +/** + * Wraps a settings page's stacked sections and derives a jump navigation from + * them (issue #145): every top-level `
` with an `

` becomes a nav + * entry. The list is read from the DOM (and kept fresh via MutationObserver), + * so conditionally rendered and component-owned sections need no wiring. On + * wide viewports the nav sits sticky beside the content; on narrow ones it + * collapses to a horizontal chip bar above it. + */ +export function SettingsLayout({ children }: { children: React.ReactNode }): React.JSX.Element { + const { t } = useTranslation(); + const contentRef = useRef(null); + const [sections, setSections] = useState([]); + const [active, setActive] = useState(null); + + useEffect(() => { + const container = contentRef.current; + if (!container) return undefined; + + const scan = (): void => { + const taken = new Set(); + const found: SectionEntry[] = []; + container.querySelectorAll('section').forEach((section) => { + // Only top-level sections: a nested
belongs to its parent's + // entry, not the nav. + const parent = section.parentElement?.closest('section'); + if (parent && container.contains(parent)) return; + const title = section.querySelector('h2')?.textContent?.trim(); + if (!title) return; + if (!section.id) section.id = anchorId(title, taken); + else taken.add(section.id); + found.push({ id: section.id, title }); + }); + setSections((prev) => + prev.length === found.length && + prev.every((p, i) => p.id === found[i]!.id && p.title === found[i]!.title) + ? prev + : found, + ); + }; + + const scrollParent: HTMLElement | Window = container.closest('.main') ?? window; + + const atScrollEnd = (): boolean => + scrollParent instanceof Window + ? window.innerHeight + window.scrollY >= document.body.scrollHeight - 2 + : scrollParent.scrollTop + scrollParent.clientHeight >= scrollParent.scrollHeight - 2; + + const updateActive = (): void => { + const anchors = Array.from(container.querySelectorAll('section[id]')); + if (anchors.length === 0) return; + // The active section is the last one whose top has passed the reading + // line (a bit below the viewport top). At the very bottom the last + // section wins even if its top never reaches the line. + let current = anchors[0]!.id; + for (const section of anchors) { + if (section.getBoundingClientRect().top <= 160) current = section.id; + } + if (atScrollEnd()) current = anchors[anchors.length - 1]!.id; + setActive(current); + }; + + scan(); + updateActive(); + const observer = new MutationObserver(() => { + scan(); + updateActive(); + }); + observer.observe(container, { childList: true, subtree: true }); + + scrollParent.addEventListener('scroll', updateActive, { passive: true }); + window.addEventListener('resize', updateActive); + return () => { + observer.disconnect(); + scrollParent.removeEventListener('scroll', updateActive); + window.removeEventListener('resize', updateActive); + }; + }, []); + + const jump = (id: string): void => { + document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + setActive(id); + }; + + return ( +
+ {sections.length > 1 && ( + + )} +
+ {children} +
+
+ ); +} diff --git a/apps/web/src/pages/AdminSettingsPage.tsx b/apps/web/src/pages/AdminSettingsPage.tsx index 53cf5c9..88d32b8 100644 --- a/apps/web/src/pages/AdminSettingsPage.tsx +++ b/apps/web/src/pages/AdminSettingsPage.tsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { Field, FormError, FormSuccess } from '../components/forms'; +import { SettingsLayout } from '../components/SettingsLayout'; import { apiGet, apiPatch } from '../lib/api'; import { PluginManager } from './PluginManager'; import { QuotaManager } from './QuotaManager'; @@ -63,61 +64,64 @@ export function AdminSettingsPage(): React.JSX.Element {

{t('system:settingsLink')} →

-
-
- - - - - - - - - - - - - -
- -
-

{tQuotas('defaults.title')}

-
- {( - [ - 'quota.editorsPerPond', - 'quota.readersPerPond', - 'quota.additionalPonds', - 'quota.storageBytes', - 'quota.maxFileBytes', - ] as const - ).map((key) => ( - - + +
+

{t('settings:admin.general')}

+ + + + + - ))} - - -
+ + + + + + + + +
- - - - +
+

{tQuotas('defaults.title')}

+
+ {( + [ + 'quota.editorsPerPond', + 'quota.readersPerPond', + 'quota.additionalPonds', + 'quota.storageBytes', + 'quota.maxFileBytes', + ] as const + ).map((key) => ( + + + + ))} + +
+
- - - + + + + + + + + + ); } diff --git a/apps/web/src/pages/AdminSystemPage.tsx b/apps/web/src/pages/AdminSystemPage.tsx index c98b7af..428b64b 100644 --- a/apps/web/src/pages/AdminSystemPage.tsx +++ b/apps/web/src/pages/AdminSystemPage.tsx @@ -11,6 +11,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; +import { SettingsLayout } from '../components/SettingsLayout'; import { formatBytes } from '../files/file-format'; import { apiGet, apiPost } from '../lib/api'; import { BackupSection } from './AdminBackupSection'; @@ -29,10 +30,12 @@ export function AdminSystemPage(): React.JSX.Element {

← {t('backLink')}

- - - - + + + + + + ); } diff --git a/apps/web/src/pages/PondSettingsPage.tsx b/apps/web/src/pages/PondSettingsPage.tsx index 721cb54..f7707d4 100644 --- a/apps/web/src/pages/PondSettingsPage.tsx +++ b/apps/web/src/pages/PondSettingsPage.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; import { useAuth } from '../auth/auth-context'; +import { SettingsLayout } from '../components/SettingsLayout'; import { ApiOptInSetting } from '../api-tokens/ApiOptInSetting'; import { CommentPolicySetting } from '../comments/CommentPolicySetting'; import { WatchToggle } from '../watches/WatchToggle'; @@ -60,96 +61,98 @@ export function PondSettingsPage(): React.JSX.Element {

{pond.data.name}

-
-

{tMembers('title')}

- -
- - -
-

{t('settings.title')}

- {canModify ? ( - - ) : ( -

- {tErrors('forbidden')} -

+ +
+

{tMembers('title')}

+ +
+ + +
+

{t('settings.title')}

+ {canModify ? ( + + ) : ( +

+ {tErrors('forbidden')} +

+ )} +
+ {canModify && ( +
+

{tLinks('missing.title')}

+ +
)} -
- {canModify && ( -
-

{tLinks('missing.title')}

- + {canModify && ( +
+

{tImport('vault.title')}

+ +
+ )} + {canModify && ( +
+

{tFiles('manager.title')}

+ +
+ )} + {canModify && ( +
+

{tFont('heading')}

+ +
+ )} + {canModify && } + {canModify && ( +
+

{tCommon('layout.sidebar.view.defaultTitle')}

+ +
+ )} + {canModify && ( +
+

{tComments('policy.title')}

+ +
+ )} + {canModify && ( +
+

{tApiTokens('pond.title')}

+ +
+ )} +
+

{tExport('pond.heading')}

+

{tExport('pond.hint')}

+ + {tExport('pond.zip')} +
- )} - {canModify && ( -
-

{tImport('vault.title')}

- -
- )} - {canModify && ( -
-

{tFiles('manager.title')}

- -
- )} - {canModify && ( -
-

{tFont('heading')}

- -
- )} - {canModify && } - {canModify && ( -
-

{tCommon('layout.sidebar.view.defaultTitle')}

- -
- )} - {canModify && ( -
-

{tComments('policy.title')}

- -
- )} - {canModify && ( -
-

{tApiTokens('pond.title')}

- -
- )} -
-

{tExport('pond.heading')}

-

{tExport('pond.hint')}

- - {tExport('pond.zip')} - -
- {canModify && pond.data.type === 'shared' && ( - - )} + {canModify && pond.data.type === 'shared' && ( + + )} + ); } diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx index 4ac3cf7..e2b8425 100644 --- a/apps/web/src/pages/SettingsPage.tsx +++ b/apps/web/src/pages/SettingsPage.tsx @@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'; import { useAuth } from '../auth/auth-context'; import { Field, FormError, FormSuccess, applyFieldErrors } from '../components/forms'; +import { SettingsLayout } from '../components/SettingsLayout'; import { useDataExport } from '../export/use-data-export'; import { apiDelete, apiGet, apiPatch, apiPost } from '../lib/api'; import { ApiTokensSection } from '../api-tokens/ApiTokensSection'; @@ -25,12 +26,14 @@ export function SettingsPage(): React.JSX.Element { return ( <>

{t('settings:title')}

- - - - - - + + + + + + + + ); } diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index f31836a..7cb3e8a 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -3720,3 +3720,91 @@ ul[data-type='task_list'] li p:last-of-type { transform: translateY(0); } } + +/* Settings section jump navigation (issue #145). Wide viewports: sticky rail + beside the content; narrow ones: horizontal chip bar above it. */ +.settings-layout { + display: flex; + flex-direction: row-reverse; + gap: var(--space-6); + align-items: flex-start; +} + +.settings-layout__content { + flex: 1; + min-width: 0; +} + +.settings-layout section[id] { + scroll-margin-top: var(--space-4); +} + +.settings-nav { + position: sticky; + top: var(--space-2); + width: 13rem; + flex-shrink: 0; +} + +.settings-nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} + +.settings-nav__link { + display: block; + width: 100%; + text-align: left; + padding: var(--space-1) var(--space-2); + border: none; + border-left: 2px solid var(--color-border); + border-radius: 0 6px 6px 0; + background: none; + color: var(--color-text-muted); + font: inherit; + font-size: 0.9375rem; + cursor: pointer; +} + +.settings-nav__link:hover { + color: var(--color-text); + background: var(--color-bg-subtle); +} + +.settings-nav__link--active { + color: var(--color-accent); + border-left-color: var(--color-accent); + font-weight: var(--font-weight-heading); +} + +@media (max-width: 60rem) { + .settings-layout { + flex-direction: column; + } + + .settings-nav { + position: static; + width: 100%; + overflow-x: auto; + } + + .settings-nav ul { + flex-direction: row; + gap: var(--space-2); + } + + .settings-nav__link { + white-space: nowrap; + border-left: none; + border-bottom: 2px solid var(--color-border); + border-radius: 6px 6px 0 0; + } + + .settings-nav__link--active { + border-bottom-color: var(--color-accent); + } +} diff --git a/packages/shared/i18n/de/common.json b/packages/shared/i18n/de/common.json index 0117fa0..a2bdae7 100644 --- a/packages/shared/i18n/de/common.json +++ b/packages/shared/i18n/de/common.json @@ -92,5 +92,8 @@ "submit": "Teich löschen", "deleted": "Teich gelöscht." } + }, + "settingsNav": { + "label": "Abschnitte" } } diff --git a/packages/shared/i18n/de/settings.json b/packages/shared/i18n/de/settings.json index e441707..a3177a9 100644 --- a/packages/shared/i18n/de/settings.json +++ b/packages/shared/i18n/de/settings.json @@ -4,7 +4,10 @@ "title": "Profil", "displayName": "Anzeigename", "locale": "Sprache", - "locales": { "de": "Deutsch", "en": "English" }, + "locales": { + "de": "Deutsch", + "en": "English" + }, "save": "Speichern", "saved": "Gespeichert." }, @@ -38,6 +41,7 @@ }, "admin": { "title": "Administration", + "general": "Allgemein", "instanceName": "Name der Instanz", "defaultLocale": "Standardsprache", "registrationMode": "Selbst-Registrierung", diff --git a/packages/shared/i18n/en/common.json b/packages/shared/i18n/en/common.json index b9e8576..a552651 100644 --- a/packages/shared/i18n/en/common.json +++ b/packages/shared/i18n/en/common.json @@ -92,5 +92,8 @@ "submit": "Delete pond", "deleted": "Pond deleted." } + }, + "settingsNav": { + "label": "Sections" } } diff --git a/packages/shared/i18n/en/settings.json b/packages/shared/i18n/en/settings.json index 09c9197..6f0db76 100644 --- a/packages/shared/i18n/en/settings.json +++ b/packages/shared/i18n/en/settings.json @@ -4,7 +4,10 @@ "title": "Profile", "displayName": "Display name", "locale": "Language", - "locales": { "de": "Deutsch", "en": "English" }, + "locales": { + "de": "Deutsch", + "en": "English" + }, "save": "Save", "saved": "Saved." }, @@ -38,6 +41,7 @@ }, "admin": { "title": "Administration", + "general": "General", "instanceName": "Instance name", "defaultLocale": "Default language", "registrationMode": "Self-registration",