--- phase: 120-alert-component-unification plan: 01 type: execute wave: 1 depends_on: [] files_modified: - resources/scss/shared/_ui-components.scss - resources/views/components/alert.php - public/assets/js/modules/alert-dismiss.js - resources/views/layouts/app.php - resources/views/layouts/auth.php - resources/views/layouts/public.php - src/Core/Support/Flash.php - resources/views/settings/fakturownia.php - resources/views/settings/accounting-invoice-edit.php - resources/views/settings/smsplanet.php - resources/views/settings/hostedsms.php - resources/views/settings/accounting.php - resources/views/settings/accounting-receipt-edit.php - resources/views/settings/accounting-receipts.php - resources/views/settings/accounting-invoices.php - resources/views/accounting/invoice_form.php - resources/views/users/index.php - resources/views/statistics/orders.php - resources/views/settings/statuses.php - resources/views/settings/shoppro.php - resources/views/settings/printing.php - resources/views/settings/project-mappings.php - resources/views/settings/integrations.php - resources/views/settings/email-templates.php - resources/views/settings/inpost.php - resources/views/settings/email-templates-form.php - resources/views/settings/email-mailboxes.php - resources/views/settings/delivery-statuses.php - resources/views/settings/database.php - resources/views/settings/delivery-status-form.php - resources/views/settings/cron.php - resources/views/settings/company.php - resources/views/settings/apaczka.php - resources/views/settings/allegro.php - resources/views/orders/receipt-create.php - resources/views/orders/list.php - resources/views/automation/index.php - resources/views/automation/form.php - resources/views/auth/login.php autonomous: true delegation: off --- ## Goal Ujednolicic alerty/flash messages w calej aplikacji: reusable komponent widoku, brakujacy wariant `--info`, ikony i dismiss button, centralny renderer flash w layoutach. Po teście połączenia w `/settings/integrations/fakturownia` alert "OK (HTTP 200)" pojawia sie jako wyraznie wystylizowany `alert--info` z ikona i mozliwoscia zamkniecia. ## Purpose Obecnie 34 widoki uzywaja inline `
` z roznym wzorcem; brak `.alert--info` powoduje czarny tekst na bialym tle (bug widoczny w fakturownia.php). Brak centralnego renderowania flash zmusza kazdy controller+widok do recznego przekazywania zmiennych `$flashSave/$flashTest/$flashError`. Jedno zrodlo prawdy upraszcza UX i przyszle utrzymanie. ## Output - `resources/views/components/alert.php` (komponent z paramami `$type`, `$message`, `$dismissible`) - `resources/scss/shared/_ui-components.scss` z `.alert--info`, ikonami i stylami dismiss - `public/assets/js/modules/alert-dismiss.js` (vanilla JS, idempotent guard) - `src/Core/Support/Flash.php` rozszerzone o `push()` + `all()` z zachowaniem `set()/get()` (BC) - Centralny render flash w `layouts/app.php` (+ `auth.php`, `public.php`) - Migracja 34 widokow na komponent + zamiana `.flash--*` w login.php - **Zakres** — Jak szeroki zakres migracji widokow w tej fazie? → Odpowiedz: Komponent + migracja wszystkich (34 widoki). - **Funkcje** — Jakie warianty i funkcje ma obslugiwac komponent alert? → Odpowiedz: Wariant info (brakujacy), Ikona per typ (info/success/warning/danger), Przycisk dismiss (×). Auto-hide pominiete. - **Flash legacy** — Czy ujednolicic rowniez stary wzorzec `.flash--error` (login.php) z nowym `.alert--*`? → Odpowiedz: Tak, zastapic `.flash--*` przez `.alert--*`. - **Flash render** — Czy wyswietlanie alertow z sesji (Flash::get) zrobic tez przez komponent (centralny render np. w layoucie)? → Odpowiedz: Centralny renderer flash w layoucie app.php (i auth/public). ## Project Context @.paul/PROJECT.md @.paul/STATE.md @.paul/codebase/architecture.md ## Source Files @resources/scss/shared/_ui-components.scss @resources/views/settings/fakturownia.php @resources/views/layouts/app.php @resources/views/auth/login.php @src/Core/Support/Flash.php ## AC-1: Komponent alert + brakujacy wariant info ```gherkin Given uzytkownik otwiera /settings/integrations/fakturownia i wykonuje udany test polaczenia When kontroler ustawia Flash::push('info', 'OK (HTTP 200)') i widok renderuje sie ponownie Then na gorze strony pokazuje sie alert z niebieskim tlem (#eff6ff), niebieska ramka, ikona "i" po lewej, tekstem "OK (HTTP 200)" w czytelnym kontraście oraz przyciskiem × po prawej; klikniecie × usuwa alert z DOM bez przeladowania ``` ## AC-2: Centralny renderer flash w layoutach ```gherkin Given kontroler wywoluje Flash::push('success', 'Zapisano') albo legacy Flash::set('module.save', 'Zapisano') When renderowany jest widok dziedziczacy z layouts/app.php (lub auth.php / public.php) Then layout automatycznie wyswietla wszystkie zakolejkowane flash entries u gory glownego obszaru, bez koniecznosci ifow w widoku; po pobraniu Flash::all() kolejne zadanie nie pokazuje juz tych wpisow ``` ## AC-3: Migracja widokow i flash--error ```gherkin Given kazdy z 34 widokow wymienionych w files_modified When przegladam ich kod Then zaden nie zawiera inline `
` z zmiennymi flash (zamiast tego uzywa komponentu lub renderowanie jest delegowane do layoutu); login.php nie zawiera klasy `.flash--error` (zostala zastapiona alert--danger przez komponent); wizualnie alerty na fakturownia/hostedsms/smsplanet/login wygladaja identycznie i spojnie ``` Task 1: Komponent alert + SCSS info/ikony/dismiss + JS resources/scss/shared/_ui-components.scss, resources/views/components/alert.php, public/assets/js/modules/alert-dismiss.js, resources/views/layouts/app.php, resources/views/layouts/auth.php, resources/views/layouts/public.php 1) SCSS — w `_ui-components.scss` po istniejacych `.alert--success/warning/danger` dodac: - `.alert` — display: flex; gap: 10px; align-items: flex-start; (zachowac padding/border-radius/border/font-size/min-height) - `.alert__icon` — flex: 0 0 18px; line-height: 1; svg width/height 18px; color: inherit - `.alert__body` — flex: 1; line-height: 1.4 - `.alert__dismiss` — margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px 6px; color: inherit; opacity: 0.6; &:hover { opacity: 1 } - `.alert--info` — border-color: #bfdbfe; background: #eff6ff; color: #1e3a8a - Subtelnie wzmocnic kontrast tla istniejacych wariantow tylko jezeli wymaga to drobnej zmiany (np. zostawic jak jest dla --success/warning/danger). 2) `resources/views/components/alert.php` — komponent renderujacy 1 alert. Params (przez extract): - `$type` (string, default 'info') — jeden z: info|success|warning|danger - `$message` (string) — escapowany przez `$e()`; alternatywnie `$messageHtml` (trusted HTML, opcjonalnie) - `$dismissible` (bool, default true) - Markup: `