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.
1.9 KiB
1.9 KiB
name, description, applyTo
| name | description | applyTo |
|---|---|---|
| Frontend | Svelte SPA structure and conventions. | frontend/src/** |
Frontend
- SPA entry point is
frontend/src/index.ts, main component isfrontend/src/App.svelte. - Component organization:
lib/for utilities and stores, keep route components in aroutes/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 inerror.data.error.
Tailwind CSS
- Always use canonical Tailwind utility classes instead of arbitrary values when a standard equivalent exists (e.g.
h-16.5noth-[66px],min-h-3notmin-h-[12px]). - Only use arbitrary values (
[...]) when no standard utility covers the needed value.
i18n
svelte-i18nis configured infrontend/src/lib/i18n/index.tswith 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")fromsvelte-i18nfor 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),authedPagefixture. - After frontend changes, run only the affected E2E tests:
npx playwright test tests/e2e/filename.spec.tsor-g "test name". - When tests fail, clarify whether the frontend or the test needs adjustment – coordinate with the user.