added toast and modal confirmation

This commit is contained in:
2026-02-14 08:22:35 +01:00
parent 072f44c213
commit 1d5b730e11
17 changed files with 604 additions and 42 deletions

View File

@ -33,21 +33,33 @@ It describes what the project is, what is already implemented, and what still ne
- Top bar/title: `frontend/src/components/navigation/AppTopbar.vue`.
- Pages: `TodayView`, `MealsView`, `MealDetailView`, `IngredientsView`, `StatsView`, `SettingsView`.
- Route guard is active for `/app/*` (requires token), guest-only for `/`.
- Frontend UX layer is implemented:
- global toasts: `frontend/src/components/common/ToastHost.vue`
- global confirm modal: `frontend/src/components/common/ConfirmModalHost.vue`
- state management: `frontend/src/stores/ui.ts`
- mounted globally in `frontend/src/App.vue`
- card-level loading/error states are wired in `TodayView`, `MealsView`, `MealDetailView`, `IngredientsView`
- Frontend i18n is wired and used across new UI:
- setup in `frontend/src/i18n/index.ts`
- locale files in `frontend/src/locales/{sk,cs,en,es,de}.json`
- language switcher updates locale dynamically.
- new app UI keys are added (`nav`, `pageTitles`, `mealTypes`, `common`, `nutrition`, `today`, `meals`, `ingredients`, `stats`, `settings`).
- app UI keys include (`nav`, `pageTitles`, `mealTypes`, `common`, `nutrition`, `today`, `meals`, `ingredients`, `stats`, `settings`, `ux`)
- Frontend theme system is implemented:
- light/dark mode toggle in auth page
- centralized theme store: `frontend/src/stores/theme.ts`
- shared toggle component: `frontend/src/components/common/ThemeToggle.vue`
- toggle available in auth, app topbar, and settings
- design tokens in `frontend/src/assets/css/style.css` (`:root` variables).
- App logo is served from `frontend/public/Nutrio.png` (copied from `doc/Nutrio.png`).
- Font Awesome is installed and registered globally in `frontend/src/main.ts`.
- Pinia is installed and configured in `frontend/src/main.ts` via `frontend/src/stores/index.ts`.
- Frontend domain/store structure exists:
- `frontend/src/types/domain.ts`
- `frontend/src/stores/{auth,ingredients,meals,diary}.ts`
- `frontend/src/utils/{nutrition,api,date}.ts`
- `frontend/src/stores/{auth,theme,ui,ingredients,meals,diary}.ts`
- `frontend/src/utils/{nutrition,api,date,error}.ts`
- Ingredients form UX detail:
- create/edit form in `IngredientsView` is hidden by default
- shows only after `Nová surovina` or `Upraviť`
- hides again after successful save (form remount resets fields)
- `frontend/src/BackendAPI.ts` is generated via `backend/scripts/buildTypeScript.php` and should not be edited manually.
- `backend/data.json` contains sample meal data (not currently wired into DB/API flow).
@ -181,7 +193,7 @@ Frontend:
## Product Behavior Target (what to build next)
- Harden auth (token transport/header strategy, token revoke strategy, brute-force/rate-limits).
- Polish authenticated frontend UX (validation messages, delete confirmations, optimistic updates, better loading/error states).
- Polish authenticated frontend UX further (more granular field validation, retry actions, richer empty states).
- Add diary range screen/workflow on frontend (backend endpoint already exists).
- Add i18n coverage for any future UI additions and keep keys stable.
- Add API tests for validation, ownership checks, and totals calculation consistency.