Claude Fable 5
300a418e85
apps/web becomes a Vite + React application: React Router with home and 404 routes, base layout (top bar, collapsible sidebar remembered per user via localStorage, main area), CSS design tokens including the three font slots from ADR 0016, TanStack Query, and a typed fetch helper showing live API health on the home page. All UI strings go through a t() stub that issue #5 replaces with i18next. The Vite dev server proxies /api to the api dev port (3001). Closes #4 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
34 lines
996 B
TypeScript
34 lines
996 B
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { t } from '../i18n/t';
|
|
import { fetchHealth } from '../lib/api';
|
|
|
|
export function HomePage(): React.JSX.Element {
|
|
const health = useQuery({ queryKey: ['healthz'], queryFn: fetchHealth, retry: 1 });
|
|
|
|
return (
|
|
<>
|
|
<h1>{t('home.title', 'Welcome to Dorfteich')}</h1>
|
|
<p>
|
|
{t(
|
|
'home.intro',
|
|
'Dorfteich is an open-source wiki with real-time collaboration. This instance is being set up.',
|
|
)}
|
|
</p>
|
|
{health.isPending && (
|
|
<span className="status-pill">{t('home.api.checking', 'Checking API …')}</span>
|
|
)}
|
|
{health.isSuccess && (
|
|
<span className="status-pill status-pill--ok">
|
|
{t('home.api.ok', 'API reachable')} · {health.data.version}
|
|
</span>
|
|
)}
|
|
{health.isError && (
|
|
<span className="status-pill status-pill--error">
|
|
{t('home.api.error', 'API not reachable')}
|
|
</span>
|
|
)}
|
|
</>
|
|
);
|
|
}
|