# Frontend

Svelte 5 SPA bundled with esbuild and styled with Tailwind CSS 4.

## Structure

- Entry point: `src/index.ts`, main component: `src/App.svelte`.
- `src/lib/` — utilities, stores, actions, API layer.
- `src/widgets/` — reusable UI components (Button, Input, Form, etc.).
- `src/css/` — global styles and Tailwind imports.
- Keep route components in a `src/routes/` folder when needed.

## Conventions

- PascalCase component names; export props at the top of `<script>` tag.
- Keep code and comments in English.
- SSR safety: guard browser-only code with `typeof window !== "undefined"`.
- API behavior: PUT responses return only changed fields; filter by id uses `_id`; API requests reject non-2xx with `{ response, data }` and error payload in `error.data.error`.

## Tailwind CSS

- Always use canonical Tailwind utility classes instead of arbitrary values when a standard equivalent exists (e.g. `h-16.5` not `h-[66px]`, `min-h-3` not `min-h-[12px]`).
- Only use arbitrary values (`[...]`) when no standard utility covers the needed value.

## i18n

- `svelte-i18n` is configured in `src/lib/i18n/index.ts` with lazy loading for locale files.
- Locale files live in `src/lib/i18n/locales/{lang}.json`.
- URL-based language routing: `/{lang}/...` (e.g. `/de/`, `/en/about`).
- Language utilities in `src/lib/i18n.ts`: `extractLanguageFromPath()`, `localizedPath()`, `getLanguageSwitchUrl()`.
- Use `$_("key")` from `svelte-i18n` for translations in components.

## Related tests

- When developing frontend features: extend or create corresponding E2E tests in `tests/e2e/`.
- After frontend changes, run only the affected E2E tests: `npx playwright test tests/e2e/filename.spec.ts` or `-g "test name"`.
- When tests fail, clarify whether the frontend or the test needs adjustment — coordinate with the user.