Sebastian Frank
602fd6101f
- Introduced Input component with support for various input types, validation, and error handling. - Added MedialibImage component for displaying images with lazy loading and caption support. - Implemented Pagination component for navigating through pages with ellipsis for large page sets. - Created SearchableSelect component allowing users to search and select options from a dropdown. - Developed Select component with integrated styling and validation. - Added Tooltip component for displaying additional information on hover/focus.
34 lines
1.9 KiB
Markdown
34 lines
1.9 KiB
Markdown
---
|
||
name: Frontend
|
||
description: Svelte SPA structure and conventions.
|
||
applyTo: "frontend/src/**"
|
||
---
|
||
|
||
# Frontend
|
||
|
||
- SPA entry point is `frontend/src/index.ts`, main component is `frontend/src/App.svelte`.
|
||
- Component organization: `lib/` for utilities and stores, keep route components in a `routes/` folder when needed, `css/` for styles.
|
||
- Use PascalCase component names and export props at the top of the `<script>` tag; keep code/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 `frontend/src/lib/i18n/index.ts` with lazy loading for locale files.
|
||
- Locale files live in `frontend/src/lib/i18n/locales/{lang}.json`.
|
||
- URL-based language routing: `/{lang}/...` (e.g. `/de/`, `/en/about`).
|
||
- Language utilities in `frontend/src/lib/i18n.ts`: `extractLanguageFromPath()`, `localizedPath()`, `getLanguageSwitchUrl()`.
|
||
- Use `$_("key")` from `svelte-i18n` for translations in components.
|
||
|
||
## E2E Tests (Playwright)
|
||
|
||
- When developing frontend features: extend or create corresponding E2E tests in `tests/e2e/`.
|
||
- Shared fixtures and helpers in `tests/e2e/fixtures.ts`: `waitForSpaReady(page)`, `navigateToRoute(page, path)`, `clickSpaLink(page, selector)`, `authedPage` fixture.
|
||
- 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.
|