Reorganise adding recipe to plan

2026-03-27 15:20:46 +01:00
parent a22bb7b35c
commit 5c17976732
5 changed files with 551 additions and 292 deletions
--- a/VIEWS_AND_SCENARIOS.md
+++ b/VIEWS_AND_SCENARIOS.md
@@ -12,108 +12,154 @@
 |-------|------|
 | Liczba osób | 1 (gotuje dla siebie) |
 | Planowanie | Elastyczne, 1–7 dni do przodu |
-| Posiłki | 3 główne (śniadanie, obiad, kolacja) + dodatkowe przy treningu |
+| Posiłki | 5 slotów (śniadanie, drugie śniadanie, obiad, przekąska, kolacja) |
 | Powtarzalność | Duża (zwłaszcza śniadania) — kopiowanie dnia kluczowe |
 | Styl gotowania | Hybrydowy: trochę meal-prep, trochę na bieżąco |
 | Zakupy | Mieszane: duże zakupy + uzupełnienia w tygodniu |
 | Cel dietetyczny | Utrzymanie wagi, śledzenie per posiłek |
-| Pomijanie posiłków | Jawne "pomijam" (jedzenie na mieście) |
-| Przepisy | Na razie katalog wbudowany (9 przepisów), bez edytora |
-
-### Kluczowe pain-pointy (zgłoszone)
-
-1. Brak możliwości pominięcia slotu w planerze
-2. Brak "Dodaj do planera" z widoku przepisu
-3. Ilości na liście zakupów nie do edycji
-4. Brak kalorii per slot w widoku dnia
-5. Za dużo kliknięć w kluczowych flow
+| Pomijanie posiłków | Jawne "Pomijam" (jedzenie na mieście itp.) |
+| Przepisy | Katalog wbudowany (9 przepisów, 24 składniki), bez edytora |

 ---

-## 2. Przegląd widoków
+## 2. Architektura i stos technologiczny

-### 2.1 Przepisy (`RecipeList`)
+| Warstwa | Technologia |
+|---------|-------------|
+| Frontend | Plain HTML + ES modules, imperatywna manipulacja DOM |
+| Style | Tailwind CSS (CDN) + inline `<style>` w `index.html`, Font Awesome 6 (CDN) |
+| Dane | Statyczny katalog `js/data/catalog.js` (`INGREDIENTS` + `RECIPES` z opcjonalnymi `alternatives` per składnik), localStorage |
+| Stan | Moduły-closure (`filterState`, `state` w planerze) + localStorage przez serwisy |
+| Komunikacja widoków | Globalne callbacki na `window` (`refreshPlanner`, `refreshPantry`, `refreshShopping`, `openRecipeDetail` itp.) |
+| PWA | `manifest.webmanifest` + `sw.js` (network-only fetch, spełnia warunek instalowalności) |
+| Deploy | Docker + nginx:alpine, Gitea CI/CD |
+| Język UI | Polski |
+
+### Struktura plików
+
+```
+index.html                    ← jedyny plik HTML, shell aplikacji
+js/
+  app.js                      ← entry point, montuje widoki, setupTabs()
+  storageKeys.js              ← klucze localStorage
+  views/
+    RecipeList.js             ← lista przepisów
+    Filter.js                 ← overlay filtrów
+    RecipeDetail.js           ← detal przepisu (slide-in overlay)
+    MealPlanner.js            ← planer posiłków + kalendarz
+    Pantry.js                 ← spiżarnia
+    Shopping.js               ← listy zakupów
+  services/
+    planStore.js              ← load/save planów posiłków
+    pantryShopping.js         ← logika spiżarni i list zakupów
+    planIngredients.js        ← analityka: sumy kalorii, braki, prognoza
+    dateUtils.js              ← narzędzia dat (poniedziałek jako start tygodnia)
+  planner/
+    mealSlots.js              ← definicja 5 slotów (id, label, icon)
+  data/
+    catalog.js                ← INGREDIENTS, RECIPES, helpery
+  ui/
+    toast.js                  ← showAppToast()
+```
+
+---
+
+## 3. Przegląd widoków
+
+### 3.1 Przepisy (`RecipeList`)

 **Lokalizacja:** `js/views/RecipeList.js`

-Siatka 2-kolumnowa kart przepisów generowana dynamicznie z `RECIPES`. Każda karta zawiera miniaturę (placeholder), tytuł, czas przygotowania, kalorie. Kliknięcie otwiera detal.
+Siatka 2-kolumnowa kart przepisów generowana dynamicznie z `RECIPES`. Każda karta zawiera miniaturę (placeholder), tytuł, opis, czas przygotowania, kalorie, chipy slotów. Kliknięcie otwiera detal.

 **Elementy:**
 - Wyszukiwarka (real-time, po tytule i tagach)
- Przycisk filtrów (overlay)
+- Przycisk filtrów (otwiera overlay)
 - Siatka kart
+- Empty state gdy brak wyników

 **Stan:** Kompletny.

 ---

-### 2.2 Filtry (`Filter`)
+### 3.2 Filtry (`Filter`)

 **Lokalizacja:** `js/views/Filter.js`

-Overlay z chipami pór posiłku, tagami dietetycznymi i suwakiem czasu. Dynamicznie generowane z `MEAL_SLOTS` i tagów z `RECIPES`.
+Full-screen overlay (z-50) z chipami pór posiłku, tagami dietetycznymi i suwakiem czasu. Filtr zamknięty przyciskiem ← odrzuca niezapisane zmiany; "Pokaż X wyników" aplikuje i zamyka.

 **Elementy:**
 - Chipy: pory posiłku (z `MEAL_SLOTS`)
- Chipy: tagi dietetyczne (zbierane z `RECIPES`)
- Suwak: maksymalny czas przygotowania
+- Chipy: tagi dietetyczne (zbierane dynamicznie z `RECIPES`)
+- Suwak: maksymalny czas przygotowania (5–120 min)
 - Przycisk "Wyczyść" + "Pokaż X wyników"

 **Stan:** Kompletny.

 ---

-### 2.3 Szczegóły przepisu (`RecipeDetail`)
+### 3.3 Szczegóły przepisu (`RecipeDetail`)

 **Lokalizacja:** `js/views/RecipeDetail.js`

-Full-screen overlay z detalami przepisu. Trzy zakładki: Składniki, Kroki, Wartości.
+Slide-in overlay z detalami przepisu. Trzy zakładki: Składniki, Kroki, Wartości.

 **Elementy:**
- Hero (placeholder) + strzałka powrotu + **"Do planera"** (nowe)
- Tytuł, tagi, czas, kcal
- Selektor porcji (±) z przeliczaniem
- Zakładka Składniki: lista z checkboxami + badge stanu spiżarni + "Dodaj do listy zakupów"
+- Hero (placeholder) + strzałka powrotu + przycisk "Zaplanuj"
+- Tytuł, tagi (sloty + tagi przepisu), czas, kcal
+- Selektor porcji (± , zakres 1–12) z przeliczaniem składników i wartości
+- Zakładka Składniki: lista read-only (bez checkboxów, bez badge'ów spiżarni). Składniki z wymiennymi wariantami mają ikonę shuffle — kliknięcie rozwija karty z alternatywami i ich wartościami odżywczymi (informacyjnie, bez możliwości wyboru)
 - Zakładka Kroki: numerowane kroki
 - Zakładka Wartości: kcal/białko/tłuszcze/węglowodany × porcje
- **Bottom sheet "Dodaj do planera"**: wybór dnia (7 dni) + slotu → zapis do planStore
+- Bottom sheet "Zaplanuj":
+  1. Kalendarz (tydzień/miesiąc, nawigacja ←/→/Dziś, toggle rozwinięcia) — styl ujednolicony z `MealPlanner`
+  2. Pora posiłku — chipy filtrowane do `allowedSlots` przepisu
+  3. Wymienne składniki (opcjonalne, widoczne tylko gdy przepis ma `alternatives`) — kompaktowe karty per składnik wyświetlające aktualny wybór z wartościami odżywczymi; kliknięcie rozwija listę opcji z radio-przyciskami; po wyborze karta się zwija; zmieniony składnik ma amber tło
+  4. Przycisk "Dodaj" → zapis do `planStore` (z opcjonalnym obiektem `substitutions`)
+
+**Model danych — wymienne składniki:**
+- W `RECIPES`, składnik może mieć pole `alternatives: ['id1', 'id2', ...]` — tablica ID alternatywnych składników
+- Przy dodawaniu do planera, wybrane zamienniki zapisywane są jako `substitutions: { originalId: chosenAltId }` w `planStore`
+- Przykład: serek wiejski ma 3 wymienne składniki — orzechy (5 opcji), truskawki (banany), borówki (jagody)

 **Stan:** Kompletny.

 ---

-### 2.4 Planer posiłków (`MealPlanner`)
+### 3.4 Planer posiłków (`MealPlanner`)

 **Lokalizacja:** `js/views/MealPlanner.js`

-Kalendarz (tydzień/miesiąc) + plan dnia z slotami posiłków.
+Kalendarz (tydzień/miesiąc) + plan dnia z 5 slotami posiłków.

 **Elementy kalendarza:**
- Widok tygodnia ↔ miesiąca (swipe góra/dół)
+- Widok tygodnia ↔ miesiąca (swipe góra/dół na `#calendar-swipe-zone`)
 - Nawigacja: ←/→ + "Dziś"
 - Kropki pod dniem = zaplanowane posiłki

 **Elementy planu dnia:**
- Nagłówek dnia + **"Kopiuj dzień"** (nowe)
+- Nagłówek dnia + przycisk "Kopiuj dzień"
 - Karta podsumowania kalorycznego (kcal + makro, rozwijalne szczegóły)
- "Składniki na ten dzień" (badge z liczbą braków)
+- "Składniki na ten dzień" (badge z liczbą braków vs "OK")
 - Sloty posiłków (5 slotów z `MEAL_SLOTS`):
-  - **Kcal per slot** w nagłówku (nowe)
-  - Karty przepisów z porcjami, kcal, czasem, przyciskiem usuwania
-  - Kliknięcie nazwy przepisu → RecipeDetail
+  - Kcal per slot w nagłówku
+  - Karty przepisów z porcjami (±), kcal, czasem, przyciskiem usuwania
+  - Kliknięcie nazwy przepisu → `RecipeDetail`
  - "Dodaj przepis" / "Dodaj kolejny"
-  - **"Pomijam"** przy pustym slocie (nowe) → slot przygaszony z "Cofnij"
+  - "Pomijam" przy pustym slocie → slot przygaszony z "Cofnij"

 **Bottom sheety:**
-1. **Picker przepisów**: wyszukiwarka + "Ostatnio używane" + lista filtrowana do `allowedSlots`
-2. **Składniki i spiżarnia**: porównanie potrzeb vs zapasy + prognoza tygodnia + "Dodaj braki"
-3. **Kopiuj plan dnia**: lista 13 dni (3 wstecz, 10 do przodu) → kopiuje cały dzień
+1. **Picker przepisów**: wyszukiwarka + sekcja "Ostatnio używane" + lista filtrowana do `allowedSlots`
+2. **Składniki i spiżarnia**: porównanie potrzeb vs zapasy + prognoza tygodniowa (`computeFullForecast`) + "Dodaj braki" (dzień / tydzień)
+3. **Kopiuj plan dnia**: lista 13 dni (3 wstecz, 10 do przodu) → kopiuje cały dzień (w tym statusy "Pominięto")
+
+**Demo:** `seedDemoIfEmpty` wypełnia dzisiejszy dzień danymi demo gdy localStorage jest pusty.

 **Stan:** Kompletny.

 ---

-### 2.5 Spiżarnia (`Pantry`)
+### 3.5 Spiżarnia (`Pantry`)

 **Lokalizacja:** `js/views/Pantry.js`

@@ -121,45 +167,43 @@ Przeglądanie i edycja stanów magazynowych składników.

 **Elementy:**
 - Wyszukiwarka
- Chipy filtrów kategorii
+- Chipy filtrów kategorii (multi-select)
 - Toggle "Tylko na stanie"
- Siatka chipów składników (kolorowana wg stanu)
- Bottom sheet edycji: ±, input, wartości odżywcze, "Dodaj na listę zakupów"
+- Siatka chipów składników pogrupowana po kategorii (kolor wg stanu)
+- Bottom sheet edycji (`#pv2-edit-sheet`): ± z krokiem (`pantryQtyStep`), input numeryczny, opcjonalne wartości odżywcze (per 100g), "Dodaj na listę zakupów" (z `purchasePack`)

 **Stan:** Kompletny.

 ---

-### 2.6 Zakupy (`Shopping`)
+### 3.6 Zakupy (`Shopping`)

 **Lokalizacja:** `js/views/Shopping.js`

-Zarządzanie listami zakupów.
+Zarządzanie listami zakupów — jedna stała lista kuchenna + dowolna liczba list freeform.

 **Elementy:**
- Selektor aktywnej listy
- Przycisk "Nowa lista"
- **Pasek akcji listy kuchennej** (widoczny gdy są zaznaczone pozycje):
-  - "Kupione → spiżarnia" (z **potwierdzeniem** — nowe)
-  - "Wyczyść kupione"
- Lista kuchenna: pogrupowana po kategorii, checkbox, **edycja ilości** (klik → prompt, nowe)
- Lista freeform: tekst + notatka, checkbox
+- Selektor aktywnej listy (dropdown)
+- Przycisk "Nowa lista" (freeform) + usuwanie list (nie dotyczy kuchennej)
+- **Lista kuchenna** (`KITCHEN_LIST_ID`): pogrupowana po kategorii, checkbox, edycja ilości (klik → prompt), usuwanie pozycji
+- **Pasek akcji** (widoczny gdy są zaznaczone pozycje): "Kupione → spiżarnia" (z potwierdzeniem i podglądem) + "Wyczyść kupione"
+- **Lista freeform**: pozycje tekstowe z opcjonalną notatką, checkbox

 **Stan:** Kompletny.

 ---

-## 3. Przepływy między widokami
+## 4. Przepływy między widokami

 ```
 Przepisy ──[klik kartę]──→ Szczegóły przepisu
-                              ├──[Dodaj do listy zakupów]──→ Zakupy (lista kuchenna)
-                              └──[Do planera]──→ Planer (wybór dnia + slotu)
+                              └──[Zaplanuj]──→ Bottom sheet (kalendarz + pora + opcjonalnie wymiana składników) → Planer

 Planer ──[klik przepis w slocie]──→ Szczegóły przepisu
-       ──[Składniki na ten dzień]──→ Sheet: porównanie z spiżarnią
+       ──[Składniki na ten dzień]──→ Sheet: porównanie z spiżarnią + prognoza
       ──[Dodaj braki do listy]──→ Zakupy (lista kuchenna)
       ──[Kopiuj dzień]──→ Sheet: wybór dnia docelowego
+       ──[Dodaj przepis]──→ Sheet: picker przepisów

 Spiżarnia ──[Dodaj na listę zakupów]──→ Zakupy

@@ -168,7 +212,7 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)

 ---

-## 4. Scenariusze użytkownika
+## 5. Scenariusze użytkownika

 ### Scenariusz 1: Przeglądanie przepisów

@@ -176,16 +220,18 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)

 1. Otwiera aplikację → widzi zakładkę **Przepisy** z siatką 9 kart
 2. Przewija listę, czyta opisy i kalorie na kartach
-3. Klika kartę "Makaron z pomidorami i bazylią"
+3. Klika kartę "Serek wiejski z orzechami i owocami"
 4. Widzi detal: składniki, kroki, wartości odżywcze
-5. Zmienia liczbę porcji z 1 na 3 → składniki i kcal się przeliczają
-6. Przełącza zakładkę na "Kroki" → widzi kroki
-7. Przełącza na "Wartości" → widzi makroskładniki ×3
-8. Wraca strzałką ← do listy
+5. Przy orzechach, truskawkach i borówkach widzi ikonę shuffle — klika ją przy orzechach
+6. Rozwija się lista alternatyw (laskowe, nerkowca, migdały, pekan) z wartościami odżywczymi — informacyjnie
+7. Zmienia liczbę porcji z 1 na 2 → składniki i kcal się przeliczają
+8. Przełącza zakładkę na "Kroki" → widzi numerowane kroki
+9. Przełącza na "Wartości" → widzi makroskładniki ×2
+10. Wraca strzałką ← do listy

-**Znane problemy:**
+**Uwagi:**
 - Brak zdjęć (szare placeholdery) — OK dla prototypu
- Po powrocie z detalu filtr/szukajka powinny się utrzymać (utrzymują się)
+- Po powrocie z detalu filtr/szukajka się utrzymują

 ---

@@ -195,17 +241,13 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)

 1. Wpisuje "łosoś" → lista filtruje się do 1 karty
 2. Kasuje tekst → wracają wszystkie
-3. Klika ikonę filtrów
-4. Zaznacza "Kolacja" → lista się zawęża
+3. Klika ikonę filtrów → otwiera się overlay
+4. Zaznacza "Kolacja" → aktualizuje się licznik wyników
 5. Dodatkowo zaznacza tag "Wysokobiałkowe"
 6. Ustawia suwak na max 25 min
 7. Klika "Pokaż X wyników" → wraca do przefiltrowanej listy
 8. Wybiera przepis i otwiera detal

-**Znane problemy:**
- Brak wizualnego wskaźnika aktywnych filtrów na ikonce (badge/kropka)
- Po zamknięciu filtrów ← (zamiast "Pokaż") — zachowanie może być nieintuicyjne
-
 ---

 ### Scenariusz 3: Planowanie posiłków na tydzień
@@ -213,21 +255,17 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)
 **Cel:** Użytkownik układa menu na kilka dni.

 1. Przechodzi na zakładkę **Planer**
-2. Widzi dzisiejszy dzień z demo-danymi
+2. Widzi dzisiejszy dzień (demo-dane lub wcześniej zaplanowane)
 3. Klika na przepis w slocie → otwiera się detal
 4. Wraca ← do planera
 5. Klika następny dzień w kalendarzu
 6. Widzi puste sloty, klika "Dodaj przepis" przy Śniadaniu
 7. Picker: wpisuje fragment nazwy, widzi "Ostatnio używane"
-8. Wybiera przepis → pojawia się w slocie z **kcal w nagłówku**
-9. Przy obiedzie klika **"Pomijam"** (je na mieście) → slot przygaszony
-10. Klika "Składniki na ten dzień" → widzi braki vs spiżarnia
-11. Klika "Dodaj braki na dziś do listy" → toast
-12. Następnego dnia: **"Kopiuj dzień"** → wybiera dzień docelowy → gotowe
-
-**Znane problemy:**
- Po dodaniu braków brak informacji "już dodano" — ryzyko duplikacji
- "Kopiuj dzień" kopiuje też status "Pominięto"
+8. Wybiera przepis → pojawia się w slocie z kcal w nagłówku
+9. Przy obiedzie klika "Pomijam" (je na mieście) → slot przygaszony
+10. Klika "Składniki na ten dzień" → widzi braki vs spiżarnia + prognoza
+11. Klika "Dodaj braki na dziś do listy" → toast potwierdzenia
+12. Następnego dnia: "Kopiuj dzień" → wybiera dzień docelowy → gotowe

 ---

@@ -239,14 +277,10 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)
 2. Widzi chipy składników pogrupowane po kategorii
 3. Włącza "Tylko na stanie" → widzi co ma
 4. Klika "Płatki owsiane" → bottom sheet
-5. Ustawia 500g
+5. Ustawia 500g (przyciskami ± lub inputem)
 6. Zamyka → chip zmienił się na zielony z "500 g"
 7. Chce dodać mleko na listę → klika "Dodaj na listę" w sheecie

-**Znane problemy:**
- Po zamknięciu bottom sheet scroll wraca na górę (re-render)
- Brak możliwości ręcznego wpisania ilości szybko (ale jest input type=number)
-
 ---

 ### Scenariusz 5: Zakupy w sklepie
@@ -256,15 +290,10 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)
 1. Otwiera zakładkę **Zakupy**
 2. Widzi listę kuchenną pogrupowaną po kategorii
 3. Bierze mleko z półki → klika checkbox → przekreślenie
-4. Widzi `sourceNote`: "Braki z planu dnia"
-5. Ilość się nie zgadza — klika na **ilość** → prompt → poprawia
+4. Widzi `sourceNote` z informacją skąd pozycja pochodzi
+5. Ilość się nie zgadza — klika na ilość → prompt → poprawia
 6. Kupuje dalsze pozycje

-**Znane problemy:**
- Kupione mieszają się z niekupionymi w grupie (brak separacji)
- Brak podsumowania: "Do kupienia: 5, kupione: 3"
- Na telefonie w sklepie — elementy mogłyby być większe
-
 ---

 ### Scenariusz 6: Po zakupach — przeniesienie do spiżarni
@@ -272,16 +301,13 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)
 **Cel:** Użytkownik wrócił ze sklepu, aktualizuje spiżarnię.

 1. Otwiera **Zakupy** → widzi zaznaczone pozycje
-2. Pojawia się pasek: **"Kupione → spiżarnia"** i **"Wyczyść kupione"**
-3. Klika "Kupione → spiżarnia" → **potwierdzenie z podglądem** pozycji
+2. Pojawia się pasek: "Kupione → spiżarnia" i "Wyczyść kupione"
+3. Klika "Kupione → spiżarnia" → potwierdzenie z podglądem pozycji
 4. Potwierdza → toast "Przeniesiono X pozycji"
 5. Kupione znikają z listy
 6. Przechodzi do **Spiżarni** → stany zaktualizowane
 7. Wraca do **Planera** → braki zmniejszone

-**Znane problemy:**
- Brak undo (cofnięcia przeniesienia)
-
 ---

 ### Scenariusz 7: Gotowanie z przepisu
@@ -295,14 +321,25 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)
 5. Sprawdza ilość składnika → przełącza na "Składniki"
 6. Wraca na "Kroki"

-**Znane problemy:**
- Brak trybu "krok po kroku" (full-screen, jeden krok, swipe next)
- Ekran wygasa po chwili (brak wake lock)
- Nie ma checkboxa przy krokach
+---
+
+### Scenariusz 8: Dodanie przepisu do planera z widoku detalu
+
+**Cel:** Użytkownik znalazł przepis i chce go zaplanować.
+
+1. Przegląda **Przepisy** → otwiera detal "Serek wiejski z orzechami i owocami"
+2. Klika "Zaplanuj" (górny przycisk)
+3. Otwiera się bottom sheet z kalendarzem (domyślnie widok tygodnia, można rozwinąć do miesiąca)
+4. Wybiera dzień w kalendarzu
+5. Wybiera porę posiłku (np. "Śniadanie")
+6. Widzi sekcję "Wymienne składniki" — 3 kompaktowe karty (orzechy, truskawki, borówki) z aktualnym wyborem
+7. Klika kartę "Orzechy włoskie" → rozwija się lista opcji (włoskie, laskowe, nerkowca, migdały, pekan) z wartościami odżywczymi i radio-przyciskami
+8. Wybiera "Migdały" → karta się zwija, wybrany składnik zmienia się na "Migdały" z amber tłem
+9. Klika "Dodaj" → toast potwierdzenia, sheet się zamyka, przepis dodany do planera z informacją o zamianie (substitutions)

 ---

-### Scenariusz 8: "Co mogę ugotować?"
+### Scenariusz 9: "Co mogę ugotować?"

 **Cel:** Użytkownik ma coś w spiżarni, chce wiedzieć co da się z tego zrobić.

@@ -314,44 +351,26 @@ Zakupy ──[Kupione → spiżarnia]──→ Spiżarnia (stany zaktualizowane)

 ---

-## 5. Tabela znanych problemów i luk
+## 6. Znane problemy i propozycje ulepszeń

-| # | Problem | Scenariusz | Status |
-|---|---------|-----------|--------|
-| 1 | Brak wskaźnika aktywnych filtrów na ikonce | 2 | TODO |
-| 2 | Podwójne dodanie braków do listy zakupów | 3 | TODO |
-| 3 | Kupione mieszają się z niekupionymi (brak separacji) | 5 | TODO |
-| 4 | Brak podsumowania na liście zakupów (ile kupione/do kupienia) | 5 | TODO |
-| 5 | Brak undo przy "Kupione → spiżarnia" | 6 | TODO |
-| 6 | Brak trybu "krok po kroku" przy gotowaniu | 7 | PROPOZYCJA |
-| 7 | Brak wake lock (ekran wygasa) | 7 | PROPOZYCJA |
-| 8 | Brak filtra "Mam składniki" | 8 | PROPOZYCJA |
-| 9 | Scroll spiżarni resetuje się po edycji | 4 | TODO |
-| 10 | Zamknięcie filtrów ← vs "Pokaż" — niespójne zachowanie? | 2 | DO WERYFIKACJI |
+### Do poprawy (TODO)

---
+| # | Problem | Dotyczy scenariusza |
+|---|---------|---------------------|
+| 1 | Brak wskaźnika aktywnych filtrów na ikonce (badge/kropka) | 2 |
+| 2 | Po dodaniu braków do listy zakupów brak ochrony przed duplikacją (brak info "już dodano") | 3 |
+| 3 | Kupione pozycje mieszają się z niekupionymi w tej samej grupie (brak separacji) | 5 |
+| 4 | Brak podsumowania na liście zakupów ("Do kupienia: X, kupione: Y") | 5 |
+| 5 | Brak undo przy "Kupione → spiżarnia" | 6 |
+| 6 | Scroll spiżarni resetuje się po edycji (re-render) | 4 |
+| 7 | "Kopiuj dzień" kopiuje też status "Pominięto" — może nie zawsze pożądane | 3 |

-## 6. Zrealizowane w ostatniej iteracji
+### Propozycje nowych funkcji

-| # | Funkcja | Widok |
-|---|---------|-------|
-| P1 | "Dodaj do planera" z widoku przepisu (wybór dnia + slotu) | RecipeDetail |
-| P2 | Kopiowanie planu dnia na inny dzień | MealPlanner |
-| P3 | "Pomijam" w slocie planera | MealPlanner + planStore |
-| P4 | Kalorie per slot w nagłówku slotu | MealPlanner |
-| P5 | Edycja ilości na liście zakupów (klik → prompt) | Shopping |
-| P6 | Potwierdzenie "Kupione → spiżarnia" z podglądem | Shopping |
-| P7 | Lepszy picker przepisów (wyszukiwarka + ostatnio używane) | MealPlanner |
-
---
-
-## 7. Stos technologiczny
-
-| Warstwa | Technologia |
-|---------|-------------|
-| Frontend | Plain HTML + ES modules, imperatywna manipulacja DOM |
-| Style | Tailwind CSS (CDN), Font Awesome 6 (CDN) |
-| Dane | Statyczny katalog `js/data/catalog.js`, localStorage |
-| PWA | manifest.webmanifest + sw.js |
-| Deploy | Docker + nginx:alpine, Gitea CI/CD |
-| Język UI | Polski |
+| # | Funkcja | Opis |
+|---|---------|------|
+| P1 | Tryb "krok po kroku" przy gotowaniu | Full-screen, jeden krok, swipe next + checkbox | 
+| P2 | Wake lock | Zapobiega wygaszeniu ekranu podczas gotowania |
+| P3 | Filtr "Mam składniki" | W widoku Przepisy — pokaż co da się ugotować z aktualnej spiżarni |
+| P4 | Większe elementy na liście zakupów | Ułatwienie obsługi w sklepie na telefonie |
+| P5 | Edytor przepisów | Dodawanie własnych przepisów (poza wbudowanym katalogiem) |
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,53 +0,0 @@
-/* Slider styling */
-input[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: #111827;
-    cursor: pointer;
-    margin-top: -8px;
-}
-input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 4px;
-    cursor: pointer;
-    background: #e5e7eb;
-    border-radius: 2px;
-}
-
-/* View Transitions */
-.view-transition {
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-}
-.slide-in {
-    transform: translateX(0);
-    opacity: 1;
-}
-.slide-out {
-    transform: translateX(100%);
-    opacity: 0;
-    pointer-events: none;
-}
-
-/* Ingredient Active States */
-.ingredient-active .check-box {
-    background-color: #111827;
-    border-color: #111827;
-}
-.ingredient-active .check-icon {
-    display: block;
-}
-.ingredient-active .ingredient-text {
-    text-decoration: line-through;
-    color: #9ca3af;
-}
-
-/* Utilities */
-.no-scrollbar::-webkit-scrollbar {
-    display: none;
-}
-.no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
--- a/js/data/catalog.js
+++ b/js/data/catalog.js
@@ -187,6 +187,34 @@ export const INGREDIENTS = {
        pantryUnit: 'g',
        nutritionPer100g: { kcal: 654, protein: 15, fat: 65, carbs: 14 },
    },
+    orzechy_laskowe: {
+        id: 'orzechy_laskowe',
+        name: 'Orzechy laskowe',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 628, protein: 15, fat: 61, carbs: 17 },
+    },
+    orzechy_nerkowca: {
+        id: 'orzechy_nerkowca',
+        name: 'Orzechy nerkowca',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 553, protein: 18, fat: 44, carbs: 30 },
+    },
+    migdaly: {
+        id: 'migdaly',
+        name: 'Migdały',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 579, protein: 21, fat: 50, carbs: 22 },
+    },
+    orzechy_pekan: {
+        id: 'orzechy_pekan',
+        name: 'Orzechy pekan',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 691, protein: 9, fat: 72, carbs: 14 },
+    },
    truskawki: {
        id: 'truskawki',
        name: 'Truskawki',
@@ -201,6 +229,20 @@ export const INGREDIENTS = {
        pantryUnit: 'g',
        nutritionPer100g: { kcal: 57, protein: 0.7, fat: 0.3, carbs: 14 },
    },
+    banany: {
+        id: 'banany',
+        name: 'Banany',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 89, protein: 1.1, fat: 0.3, carbs: 23 },
+    },
+    jagody: {
+        id: 'jagody',
+        name: 'Jagody',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 44, protein: 0.7, fat: 0.4, carbs: 10 },
+    },
 };

 /** Porcja bazowa = 1; składniki przez ingredientId */
@@ -383,9 +425,9 @@ export const RECIPES = {
        ingredients: [
            { ingredientId: 'serek_wiejski', amount: 200, unit: 'g' },
            { ingredientId: 'miod', amount: 10, unit: 'g' },
-            { ingredientId: 'orzechy_wloskie', amount: 50, unit: 'g' },
-            { ingredientId: 'truskawki', amount: 100, unit: 'g' },
-            { ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g' },
+            { ingredientId: 'orzechy_wloskie', amount: 50, unit: 'g', alternatives: ['orzechy_laskowe', 'orzechy_nerkowca', 'migdaly', 'orzechy_pekan'] },
+            { ingredientId: 'truskawki', amount: 100, unit: 'g', alternatives: ['banany'] },
+            { ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g', alternatives: ['jagody'] },
        ],
        steps: [
            'Przełóż serek wiejski do miseczki.',
--- a/js/services/planStore.js
+++ b/js/services/planStore.js
@@ -28,6 +28,9 @@ export function normalizeSlotValue(v) {
                id: x.id && String(x.id).length ? String(x.id) : newPlanEntryId(),
                recipeId: x.recipeId,
                servings: Math.max(1, Math.min(12, Number(x.servings) || 1)),
+                ...(x.substitutions && typeof x.substitutions === 'object' && !Array.isArray(x.substitutions) && Object.keys(x.substitutions).length > 0
+                    ? { substitutions: { ...x.substitutions } }
+                    : {}),
            }));
    }
    if (typeof v === 'object' && v.recipeId && RECIPES[v.recipeId]) {
@@ -35,6 +38,9 @@ export function normalizeSlotValue(v) {
            id: newPlanEntryId(),
            recipeId: v.recipeId,
            servings: Math.max(1, Math.min(12, Number(v.servings) || 1)),
+            ...(v.substitutions && typeof v.substitutions === 'object' && !Array.isArray(v.substitutions) && Object.keys(v.substitutions).length > 0
+                ? { substitutions: { ...v.substitutions } }
+                : {}),
        }];
    }
    return [];
--- a/js/views/RecipeDetail.js
+++ b/js/views/RecipeDetail.js
@@ -1,7 +1,6 @@
 import { RECIPES, INGREDIENTS } from '../data/catalog.js';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
-import { addDays, startOfDay } from '../services/dateUtils.js';
-import { addOrMergeShoppingLines, loadPantry } from '../services/pantryShopping.js';
+import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
 import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';
 import { showAppToast } from '../ui/toast.js';

@@ -14,6 +13,8 @@ function escapeHtml(s) {
 }

 const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
+const MONTHS_LONG = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
+const WEEKDAYS_SHORT = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];

 export function getRecipeDetailHTML() {
    return `
@@ -23,19 +24,44 @@ export function getRecipeDetailHTML() {
                <i class="fas fa-arrow-left text-[13px]"></i>
            </button>
            <button id="rd-add-to-planner-btn" class="h-9 px-3 bg-white/90 backdrop-blur rounded-full flex items-center justify-center gap-1.5 shadow-sm text-gray-800 hover:bg-white transition-colors text-[12px] font-semibold">
-                <i class="fas fa-calendar-plus text-[11px]"></i> Do planera
+                <i class="fas fa-calendar-plus text-[11px]"></i> Zaplanuj
            </button>
        </div>

        <div id="rd-planner-picker" class="absolute inset-0 z-50 bg-black/45 hidden flex items-end" style="pointer-events: none">
-            <div id="rd-planner-sheet" class="w-full bg-white rounded-t-3xl shadow-lg p-5 pb-8 max-h-[70vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
+            <div id="rd-planner-sheet" class="w-full bg-white rounded-t-3xl shadow-lg p-5 pb-8 max-h-[85vh] overflow-y-auto" style="pointer-events: auto; transform: translateY(100%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1)">
                <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-4"></div>
-                <h3 class="text-[15px] font-bold text-gray-900 mb-1">Dodaj do planera</h3>
-                <p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-4"></p>
-                <div id="rd-planner-days" class="space-y-2 mb-4"></div>
+                <h3 class="text-[15px] font-bold text-gray-900 mb-1">Zaplanuj</h3>
+                <p id="rd-planner-recipe-name" class="text-[11px] text-gray-500 mb-3"></p>
+
+                <div class="mb-4">
+                    <div class="flex items-center gap-1 mb-2">
+                        <button id="rd-cal-prev" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-left text-xs"></i></button>
+                        <p id="rd-cal-title" class="flex-1 min-w-0 text-xs font-medium text-gray-900 text-center tabular-nums leading-none px-1 truncate"></p>
+                        <button id="rd-cal-next" type="button" class="shrink-0 w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors"><i class="fas fa-chevron-right text-xs"></i></button>
+                    </div>
+                    <div class="flex items-center justify-center mb-2">
+                        <button id="rd-cal-today" type="button" class="h-6 shrink-0 inline-flex items-center justify-center gap-1 rounded-md border border-gray-200 bg-white px-2.5 text-[10px] font-semibold text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 transition-colors hidden">
+                            <i class="fas fa-calendar-day text-[9px] opacity-70"></i> Dziś
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-7 gap-0.5 text-center text-[9px] font-medium text-gray-400 uppercase tracking-wide mb-0.5 leading-none">
+                        ${WEEKDAYS_SHORT.map((d) => `<div>${d}</div>`).join('')}
+                    </div>
+                    <div id="rd-cal-grid" class="grid grid-cols-7 gap-0.5"></div>
+                    <button id="rd-cal-toggle" type="button" class="w-full flex items-center justify-center py-1 mt-1 text-gray-400 hover:text-gray-600 transition-colors">
+                        <i id="rd-cal-toggle-icon" class="fas fa-chevron-down text-[10px]"></i>
+                    </button>
+                </div>
+
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Pora posiłku</p>
-                <div id="rd-planner-slots" class="flex flex-wrap gap-1.5 mb-5"></div>
-                <button id="rd-planner-confirm" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
+                <div id="rd-planner-slots" class="flex flex-wrap gap-1.5 mb-4"></div>
+
+                <div id="rd-planner-variant" class="mb-4 hidden">
+                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wymienne składniki</p>
+                    <div id="rd-planner-variant-options"></div>
+                </div>
+                <button id="rd-planner-confirm" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
                    <i class="fas fa-check text-xs"></i> Dodaj
                </button>
            </div>
@@ -83,8 +109,18 @@ export function getRecipeDetailHTML() {
    `;
 }

+/* ── state ─────────────────────────────────────────────── */
+
 let currentRecipeId = null;
 let currentServings = 1;
+let currentSubstitutions = {};
+let expandedAlternatives = new Set();
+
+function getEffectiveIngredientId(originalId) {
+    return currentSubstitutions[originalId] || originalId;
+}
+
+/* ── populate ──────────────────────────────────────────── */

 function populateDetail(recipeId) {
    const recipe = RECIPES[recipeId];
@@ -92,6 +128,8 @@ function populateDetail(recipeId) {

    currentRecipeId = recipeId;
    currentServings = 1;
+    currentSubstitutions = {};
+    expandedAlternatives.clear();

    document.getElementById('rd-hero-label').textContent = `Zdjęcie: ${recipe.title}`;
    document.getElementById('rd-title').textContent = recipe.title;
@@ -107,7 +145,6 @@ function populateDetail(recipeId) {
        tagsHtml.push(`<span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">${escapeHtml(tag)}</span>`);
    }
    document.getElementById('rd-tags').innerHTML = tagsHtml.join('');
-
    document.getElementById('rd-servings').textContent = '1';

    renderIngredients(recipe);
@@ -127,6 +164,8 @@ function populateDetail(recipeId) {
    document.getElementById('rd-tab-ingredients')?.classList.add('block');
 }

+/* ── helpers ───────────────────────────────────────────── */
+
 function updateKcalDisplay() {
    const recipe = RECIPES[currentRecipeId];
    if (!recipe) return;
@@ -134,88 +173,93 @@ function updateKcalDisplay() {
    document.getElementById('rd-kcal').textContent = `${kcal} kcal`;
 }

+function nutritionForAmount(ingredientId, amount) {
+    const def = INGREDIENTS[ingredientId];
+    if (!def?.nutritionPer100g) return null;
+    const f = amount / 100;
+    return {
+        kcal: Math.round(def.nutritionPer100g.kcal * f),
+        protein: Math.round(def.nutritionPer100g.protein * f * 10) / 10,
+        fat: Math.round(def.nutritionPer100g.fat * f * 10) / 10,
+        carbs: Math.round(def.nutritionPer100g.carbs * f * 10) / 10,
+    };
+}
+
+function renderNutritionLine(nutrition) {
+    if (!nutrition) return '';
+    return `<div class="text-[10px] text-gray-500 mt-1 flex flex-wrap gap-x-3 gap-y-0.5"><span>${nutrition.kcal} kcal</span><span>${nutrition.protein}g białko</span><span>${nutrition.fat}g tłuszcz</span><span>${nutrition.carbs}g węgle</span></div>`;
+}
+
+/* ── ingredients tab (read-only) ───────────────────────── */
+
 function renderIngredients(recipe) {
    const container = document.getElementById('rd-tab-ingredients');
    if (!container) return;

-    const pantry = loadPantry();
-
    const rows = recipe.ingredients.map((ing) => {
        const def = INGREDIENTS[ing.ingredientId];
        const name = def?.name || ing.ingredientId;
        const scaledAmount = ing.amount * currentServings;
        const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));

-        const pantryQty = Number(pantry[ing.ingredientId]) || 0;
-        let stockBadge = '';
-        if (def) {
-            const u = def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit;
-            if (pantryQty >= scaledAmount) {
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-600 font-semibold whitespace-nowrap">Masz</span>`;
-            } else if (pantryQty > 0) {
-                const miss = parseFloat((scaledAmount - pantryQty).toFixed(1));
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 font-semibold whitespace-nowrap">Brak ${miss} ${u}</span>`;
-            } else {
-                stockBadge = `<span class="text-[9px] px-1.5 py-0.5 rounded bg-red-50 text-red-500 font-semibold whitespace-nowrap">Brak</span>`;
-            }
+        const hasAlts = ing.alternatives && ing.alternatives.length > 0;
+        const isExpanded = expandedAlternatives.has(ing.ingredientId);
+
+        const toggleBtn = hasAlts
+            ? `<button type="button" class="rd-alt-toggle shrink-0 w-6 h-6 rounded-full ${isExpanded ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-original-id="${escapeHtml(ing.ingredientId)}"><i class="fas fa-shuffle text-[9px]"></i></button>`
+            : '';
+
+        let altListHtml = '';
+        if (hasAlts) {
+            const altCards = ing.alternatives.map((altId) => {
+                const altDef = INGREDIENTS[altId];
+                const altName = escapeHtml(altDef?.name || altId);
+                const nutrition = nutritionForAmount(altId, scaledAmount);
+                return `<div class="bg-gray-50 rounded-lg p-2.5 border border-gray-100">
+                    <p class="text-[12px] font-medium text-gray-700">${altName}</p>
+                    ${renderNutritionLine(nutrition)}
+                </div>`;
+            });
+            altListHtml = `
+            <div class="rd-alt-list ${isExpanded ? '' : 'hidden'} mt-2 mb-0.5 space-y-1.5" data-original-id="${escapeHtml(ing.ingredientId)}">
+                <p class="text-[10px] text-gray-400 font-medium mb-1">Można zamienić na:</p>
+                ${altCards.join('')}
+            </div>`;
        }

        return `
-        <li class="flex items-center gap-2.5 py-2.5 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors rd-ingredient-row" data-ingredient-id="${escapeHtml(ing.ingredientId)}" data-base-amount="${ing.amount}" data-unit="${escapeHtml(ing.unit)}">
-            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white rd-check-box transition-colors"><i class="fas fa-check text-[10px] hidden rd-check-icon"></i></div>
-            <span class="text-gray-700 text-[13px] flex-1 rd-ing-text transition-colors">${escapeHtml(name)}</span>
-            ${stockBadge}
-            <span class="font-medium text-gray-900 text-[13px] rd-ing-amount tabular-nums">${displayAmount} ${escapeHtml(ing.unit)}</span>
+        <li class="py-2.5 border-b border-gray-100">
+            <div class="flex items-center gap-2.5 py-0.5">
+                <span class="text-gray-700 text-[13px] flex-1">${escapeHtml(name)}</span>
+                ${toggleBtn}
+                <span class="font-medium text-gray-900 text-[13px] tabular-nums">${displayAmount} ${escapeHtml(ing.unit)}</span>
+            </div>${altListHtml}
        </li>`;
    }).join('');

    container.innerHTML = `
-        <div class="flex justify-between items-end mb-3">
-            <span class="text-[11px] text-gray-500 font-medium">Zaznacz składniki do kupienia</span>
-        </div>
-        <ul class="space-y-0 mb-5" id="rd-ingredient-list">${rows}</ul>
-        <button id="rd-add-to-shopping" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold shadow-sm transition-colors text-[13px] flex items-center justify-center gap-2 mb-5">
-            <i class="fas fa-plus text-xs"></i> Dodaj do listy zakupów
-        </button>`;
+        <ul class="space-y-0" id="rd-ingredient-list">${rows}</ul>`;

-    container.querySelectorAll('.rd-ingredient-row').forEach((row) => {
-        row.addEventListener('click', () => row.classList.toggle('ingredient-active'));
-    });
-
-    document.getElementById('rd-add-to-shopping')?.addEventListener('click', () => {
-        const recipe = RECIPES[currentRecipeId];
-        if (!recipe) return;
-
-        const checkedRows = container.querySelectorAll('.rd-ingredient-row.ingredient-active');
-        if (checkedRows.length === 0) {
-            showAppToast('Zaznacz składniki, które chcesz dodać.');
-            return;
-        }
-
-        const lines = [];
-        checkedRows.forEach((row) => {
-            const ingredientId = row.dataset.ingredientId;
-            const baseAmount = parseFloat(row.dataset.baseAmount);
-            const unit = row.dataset.unit;
-            const def = INGREDIENTS[ingredientId];
-            lines.push({
-                ingredientId,
-                amount: Math.round(baseAmount * currentServings * 100) / 100,
-                unit,
-                name: def?.name || ingredientId,
-                category: def?.category || 'inne',
-                sourceNote: `Przepis: ${recipe.title}`,
-            });
+    container.querySelectorAll('.rd-alt-toggle').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const origId = btn.dataset.originalId;
+            if (expandedAlternatives.has(origId)) {
+                expandedAlternatives.delete(origId);
+            } else {
+                expandedAlternatives.add(origId);
+            }
+            const list = container.querySelector(`.rd-alt-list[data-original-id="${origId}"]`);
+            if (list) list.classList.toggle('hidden');
+            btn.classList.toggle('bg-gray-100');
+            btn.classList.toggle('text-gray-400');
+            btn.classList.toggle('bg-amber-50');
+            btn.classList.toggle('text-amber-500');
        });
-
-        addOrMergeShoppingLines(lines);
-        showAppToast(`Dodano ${lines.length} składnik(ów) na listę zakupów.`);
-        window.refreshShopping?.();
-
-        checkedRows.forEach((row) => row.classList.remove('ingredient-active'));
    });
 }

+/* ── steps tab ─────────────────────────────────────────── */
+
 function renderSteps(recipe) {
    const container = document.getElementById('rd-tab-steps');
    if (!container) return;
@@ -236,6 +280,8 @@ function renderSteps(recipe) {
        </div>`;
 }

+/* ── nutrition tab ─────────────────────────────────────── */
+
 function renderNutrition(recipe) {
    const container = document.getElementById('rd-tab-nutrition');
    if (!container) return;
@@ -255,6 +301,8 @@ function renderNutrition(recipe) {
        </div>`;
 }

+/* ── setup ─────────────────────────────────────────────── */
+
 export function setupRecipeDetail() {
    document.querySelectorAll('.rd-tab-btn').forEach((btn) => {
        btn.addEventListener('click', () => {
@@ -303,36 +351,239 @@ export function setupRecipeDetail() {
        }
    });

-    const WEEKDAYS_LONG = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
-    const MONTHS_SHORT = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
+    /* ── planner picker ──────────────────────────────── */

    let plannerPickerDay = null;
    let plannerPickerSlot = null;
+    let calViewDate = null;
+    let calExpanded = false;

    const plannerOverlay = document.getElementById('rd-planner-picker');
    const plannerSheet = document.getElementById('rd-planner-sheet');

+    function renderCalendarCell(d, today, activeMonth) {
+        const isToday = sameDay(d, today);
+        const isSelected = plannerPickerDay && sameDay(d, plannerPickerDay);
+        const isOtherMonth = d.getMonth() !== activeMonth;
+        const isPast = d.getTime() < today.getTime();
+
+        let cls = 'flex flex-col items-center justify-center rounded-md text-xs font-medium transition-colors w-full min-h-10 py-1 gap-0.5 leading-tight ';
+
+        if (isSelected) {
+            cls += 'bg-gray-900 text-white ';
+        } else if (isPast) {
+            cls += 'text-gray-300 ';
+        } else if (isOtherMonth) {
+            cls += 'text-gray-300 ';
+        } else {
+            cls += 'text-gray-800 hover:bg-gray-100 ';
+        }
+
+        if (isToday && !isSelected && !isPast) {
+            cls += 'ring-1 ring-inset ring-gray-900 ';
+        }
+
+        const inner = `<span>${d.getDate()}</span><span class="w-1 h-1"></span>`;
+
+        if (isPast && !isSelected) {
+            return `<div class="${cls}">${inner}</div>`;
+        }
+
+        return `<button type="button" class="rd-cal-day ${cls}" data-ts="${d.getTime()}">${inner}</button>`;
+    }
+
+    function renderPlannerCalendar() {
+        const grid = document.getElementById('rd-cal-grid');
+        const titleEl = document.getElementById('rd-cal-title');
+        const todayBtn = document.getElementById('rd-cal-today');
+        const toggleIcon = document.getElementById('rd-cal-toggle-icon');
+        if (!grid || !titleEl) return;
+
+        const today = startOfDay(new Date());
+
+        if (calExpanded) {
+            const ms = startOfMonth(calViewDate);
+            titleEl.textContent = `${MONTHS_LONG[ms.getMonth()]} ${ms.getFullYear()}`;
+            toggleIcon.className = 'fas fa-chevron-up text-[10px]';
+
+            const firstCell = startOfWeekMonday(ms);
+            const cells = [];
+            let d = new Date(firstCell);
+            for (let i = 0; i < 42; i++) {
+                cells.push(new Date(d));
+                d = addDays(d, 1);
+            }
+            while (cells.length > 7) {
+                const last7 = cells.slice(-7);
+                if (last7.every((c) => c.getMonth() !== ms.getMonth())) cells.splice(-7);
+                else break;
+            }
+
+            grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, ms.getMonth())).join('');
+            todayBtn.classList.toggle('hidden', sameMonth(today, calViewDate));
+        } else {
+            const ws = startOfWeekMonday(calViewDate);
+            titleEl.textContent = `${MONTHS_LONG[calViewDate.getMonth()]} ${calViewDate.getFullYear()}`;
+            toggleIcon.className = 'fas fa-chevron-down text-[10px]';
+
+            const cells = [];
+            for (let i = 0; i < 7; i++) cells.push(addDays(ws, i));
+            grid.innerHTML = cells.map((c) => renderCalendarCell(c, today, calViewDate.getMonth())).join('');
+
+            const todayWs = startOfWeekMonday(today);
+            todayBtn.classList.toggle('hidden', sameDay(ws, todayWs));
+        }
+
+        grid.querySelectorAll('.rd-cal-day').forEach((btn) => {
+            btn.addEventListener('click', () => {
+                plannerPickerDay = new Date(Number(btn.dataset.ts));
+                calViewDate = new Date(plannerPickerDay);
+                renderPlannerCalendar();
+            });
+        });
+    }
+
+    document.getElementById('rd-cal-prev')?.addEventListener('click', () => {
+        calViewDate = calExpanded ? addMonths(calViewDate, -1) : addDays(calViewDate, -7);
+        renderPlannerCalendar();
+    });
+    document.getElementById('rd-cal-next')?.addEventListener('click', () => {
+        calViewDate = calExpanded ? addMonths(calViewDate, 1) : addDays(calViewDate, 7);
+        renderPlannerCalendar();
+    });
+    document.getElementById('rd-cal-today')?.addEventListener('click', () => {
+        const today = startOfDay(new Date());
+        plannerPickerDay = today;
+        calViewDate = today;
+        renderPlannerCalendar();
+    });
+    document.getElementById('rd-cal-toggle')?.addEventListener('click', () => {
+        calExpanded = !calExpanded;
+        renderPlannerCalendar();
+    });
+
+    /* ── planner variant selection ────────────────────── */
+
+    const expandedVariantGroups = new Set();
+
+    function renderPlannerVariants(recipe) {
+        const section = document.getElementById('rd-planner-variant');
+        const container = document.getElementById('rd-planner-variant-options');
+        if (!section || !container) return;
+
+        const altsIngredients = recipe.ingredients.filter((i) => i.alternatives?.length > 0);
+        if (altsIngredients.length === 0) {
+            section.classList.add('hidden');
+            return;
+        }
+        section.classList.remove('hidden');
+
+        let html = '';
+        for (const ing of altsIngredients) {
+            const origId = ing.ingredientId;
+            const scaledAmount = ing.amount * currentServings;
+            const displayAmount = Number.isInteger(scaledAmount) ? scaledAmount : parseFloat(scaledAmount.toFixed(1));
+            const effectiveId = getEffectiveIngredientId(origId);
+            const effectiveDef = INGREDIENTS[effectiveId];
+            const effectiveName = effectiveDef?.name || effectiveId;
+            const isExpanded = expandedVariantGroups.has(origId);
+            const isSwapped = effectiveId !== origId;
+
+            html += `<div class="mb-2 last:mb-0">
+                <button type="button" class="rd-variant-toggle w-full flex items-center gap-2.5 p-2.5 rounded-xl border ${isSwapped ? 'border-amber-200 bg-amber-50/50' : 'border-gray-200 bg-white'} hover:border-gray-300 transition-colors text-left" data-original-id="${escapeHtml(origId)}">
+                    <i class="fas fa-shuffle text-[9px] ${isSwapped ? 'text-amber-500' : 'text-gray-400'}"></i>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-1.5">
+                            <span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(effectiveName)}</span>
+                            <span class="text-[10px] text-gray-400 tabular-nums shrink-0">${displayAmount} ${escapeHtml(ing.unit)}</span>
+                        </div>
+                        ${renderNutritionLine(nutritionForAmount(effectiveId, scaledAmount))}
+                    </div>
+                    <i class="fas fa-chevron-${isExpanded ? 'up' : 'down'} text-[9px] text-gray-400 shrink-0"></i>
+                </button>`;
+
+            if (isExpanded) {
+                const allOptions = [origId, ...ing.alternatives];
+                html += '<div class="mt-1.5 space-y-1 pl-2">';
+                for (const altId of allOptions) {
+                    const def = INGREDIENTS[altId];
+                    const altName = def?.name || altId;
+                    const isSelected = effectiveId === altId;
+                    const isOriginal = altId === origId;
+                    const nutrition = nutritionForAmount(altId, scaledAmount);
+
+                    const selectedCls = isSelected
+                        ? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900'
+                        : 'border-gray-200 bg-white hover:border-gray-300';
+
+                    let tag = '';
+                    if (isOriginal) tag = `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSelected ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium shrink-0">Domyślny</span>`;
+
+                    html += `
+                        <button type="button" class="rd-variant-option w-full text-left p-2.5 rounded-lg border transition-all ${selectedCls}" data-original-id="${escapeHtml(origId)}" data-alt-id="${escapeHtml(altId)}">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="flex items-center gap-2 min-w-0">
+                                    <div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSelected ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">
+                                        ${isSelected ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}
+                                    </div>
+                                    <span class="text-[12px] font-semibold text-gray-900 truncate">${escapeHtml(altName)}</span>
+                                </div>
+                                ${tag}
+                            </div>
+                            ${renderNutritionLine(nutrition)}
+                        </button>`;
+                }
+                html += '</div>';
+            }
+
+            html += '</div>';
+        }
+
+        container.innerHTML = html;
+    }
+
+    document.getElementById('rd-planner-variant-options')?.addEventListener('click', (e) => {
+        const toggle = e.target.closest('.rd-variant-toggle');
+        if (toggle) {
+            const origId = toggle.dataset.originalId;
+            if (expandedVariantGroups.has(origId)) expandedVariantGroups.delete(origId);
+            else expandedVariantGroups.add(origId);
+            const recipe = RECIPES[currentRecipeId];
+            if (recipe) renderPlannerVariants(recipe);
+            return;
+        }
+
+        const btn = e.target.closest('.rd-variant-option');
+        if (!btn) return;
+        const originalId = btn.dataset.originalId;
+        const altId = btn.dataset.altId;
+        if (altId === originalId) {
+            delete currentSubstitutions[originalId];
+        } else {
+            currentSubstitutions[originalId] = altId;
+        }
+        expandedVariantGroups.delete(originalId);
+        const recipe = RECIPES[currentRecipeId];
+        if (recipe) renderPlannerVariants(recipe);
+    });
+
    function openPlannerPicker() {
        const recipe = RECIPES[currentRecipeId];
        if (!recipe) return;

        document.getElementById('rd-planner-recipe-name').textContent = recipe.title;
+        currentSubstitutions = {};
+        expandedVariantGroups.clear();

-        const daysContainer = document.getElementById('rd-planner-days');
        const today = startOfDay(new Date());
-        const days = [];
-        for (let i = 0; i < 7; i++) days.push(addDays(today, i));
-
        plannerPickerDay = today;
+        calViewDate = today;
+        calExpanded = false;
+        renderPlannerCalendar();
+
+        renderPlannerVariants(recipe);
+
        plannerPickerSlot = recipe.allowedSlots[0] || MEAL_SLOTS[0]?.id;
-
-        daysContainer.innerHTML = days.map((d, idx) => {
-            const wd = WEEKDAYS_LONG[d.getDay()];
-            const label = idx === 0 ? `Dziś — ${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}` : `${wd}, ${d.getDate()} ${MONTHS_SHORT[d.getMonth()]}`;
-            const sel = idx === 0;
-            return `<button type="button" class="rd-plan-day-btn w-full text-left px-3 py-2.5 rounded-xl border text-[13px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-900 hover:border-gray-400'}" data-day-ts="${d.getTime()}">${escapeHtml(label)}</button>`;
-        }).join('');
-
        const slotsContainer = document.getElementById('rd-planner-slots');
        slotsContainer.innerHTML = MEAL_SLOTS.filter((s) => recipe.allowedSlots.includes(s.id)).map((s) => {
            const sel = s.id === plannerPickerSlot;
@@ -360,18 +611,6 @@ export function setupRecipeDetail() {
        if (e.target === plannerOverlay) closePlannerPicker();
    });

-    document.getElementById('rd-planner-days')?.addEventListener('click', (e) => {
-        const btn = e.target.closest('.rd-plan-day-btn');
-        if (!btn) return;
-        plannerPickerDay = new Date(Number(btn.getAttribute('data-day-ts')));
-        document.querySelectorAll('.rd-plan-day-btn').forEach((b) => {
-            b.classList.remove('border-gray-900', 'bg-gray-900', 'text-white');
-            b.classList.add('border-gray-200', 'bg-gray-50', 'text-gray-900');
-        });
-        btn.classList.remove('border-gray-200', 'bg-gray-50', 'text-gray-900');
-        btn.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
-    });
-
    document.getElementById('rd-planner-slots')?.addEventListener('click', (e) => {
        const btn = e.target.closest('.rd-plan-slot-btn');
        if (!btn) return;
@@ -390,11 +629,17 @@ export function setupRecipeDetail() {
        const key = dateKey(plannerPickerDay);
        if (!plans[key]) plans[key] = {};
        if (!plans[key][plannerPickerSlot]) plans[key][plannerPickerSlot] = [];
-        plans[key][plannerPickerSlot].push({
+
+        const entry = {
            id: newPlanEntryId(),
            recipeId: currentRecipeId,
            servings: currentServings,
-        });
+        };
+        if (Object.keys(currentSubstitutions).length > 0) {
+            entry.substitutions = { ...currentSubstitutions };
+        }
+
+        plans[key][plannerPickerSlot].push(entry);
        savePlans(plans);
        closePlannerPicker();
        showAppToast('Dodano do planera!');