dorfteich/apps/web/src/pages/PondHomePage.tsx
Claude Fable 5 418aafd5ec
Some checks failed
CI / Lint, typecheck, test (pull_request) Successful in 4m43s
CI / Build container images (pull_request) Successful in 1m11s
CI / Auth e2e pack (pull_request) Successful in 7m14s
CI / Import/export fidelity gate (pull_request) Successful in 56s
CD / Deploy to Test (push) Blocked by required conditions
CD / Smoke tests against Test (push) Blocked by required conditions
CD / Promote to Int (push) Blocked by required conditions
CI / Auth e2e pack (push) Blocked by required conditions
CI / Import/export fidelity gate (push) Blocked by required conditions
CI / Build container images (push) Blocked by required conditions
CD / Build and push images (push) Has been cancelled
CI / Lint, typecheck, test (push) Has been cancelled
#163: Dokumentsprache und Seitentitel der SPA
i18n spiegelt die aktive Sprache auf <html lang> (Init + languageChanged;
der User-Locale-Wechsel in auth-context läuft über dasselbe Event). Neuer
useDocumentTitle-Hook setzt je Route einen sprechenden Titel
(Seite — Teich — Dorfteich), verdrahtet in allen Routen-Komponenten;
dynamische Titel folgen den geladenen Daten.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq
2026-07-21 13:52:59 +02:00

49 lines
1.7 KiB
TypeScript

import type { PageView, PondView } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import { FormError } from '../components/forms';
import { apiGet } from '../lib/api';
import { useDocumentTitle } from '../lib/use-document-title';
/**
* Landing route for a pond without a page open yet (`/p/:pondSlug`, e.g.
* from the pond switcher). Redirects to the first page per the pond's sort
* mode once loaded; an empty pond shows a hint pointing at the sidebar's
* "new page" button instead (issue #26).
*/
export function PondHomePage(): React.JSX.Element {
const { t } = useTranslation();
const navigate = useNavigate();
const { pondSlug = '' } = useParams<{ pondSlug: string }>();
const pond = useQuery({
queryKey: ['pond', pondSlug],
queryFn: () => apiGet<PondView>(`/ponds/${pondSlug}`),
});
useDocumentTitle(pond.data?.name);
const pages = useQuery({
queryKey: ['pages', pond.data?.id, pond.data?.settings.sidebarSort],
queryFn: () => apiGet<PageView[]>(`/ponds/${pond.data!.id}/pages`),
enabled: Boolean(pond.data),
});
useEffect(() => {
if (pages.data && pages.data.length > 0) {
navigate(`/p/${pondSlug}/${pages.data[0]!.slug}`, { replace: true });
}
}, [pages.data, pondSlug, navigate]);
if (pond.error || pages.error) return <FormError error={pond.error ?? pages.error} />;
if (!pond.data || !pages.data || pages.data.length > 0) return <></>;
return (
<div className="pond-home">
<h1>{pond.data.name}</h1>
<p>{t('pondHome.empty')}</p>
</div>
);
}