Added meal planner, pantry and shopping list

2026-03-26 17:10:16 +01:00
parent 7b9db1c5e6
commit c1b3ee5ce6
22 changed files with 2888 additions and 223 deletions
--- a/12
+++ b/12
@@ -0,0 +1,12 @@
+# Use the lightweight Nginx image
+FROM nginx:alpine
+
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY index.html /usr/share/nginx/html/
+COPY manifest.webmanifest /usr/share/nginx/html/
+COPY sw.js /usr/share/nginx/html/
+COPY icons /usr/share/nginx/html/icons
+COPY js /usr/share/nginx/html/js
+COPY css /usr/share/nginx/html/css
+
+EXPOSE 80
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -0,0 +1,25 @@
+services:
+  recipe-mockup:
+    build: .
+    container_name: recipe-mockup
+    restart: unless-stopped
+    networks:
+      - homelab_apps
+    labels:
+      - "traefik.enable=true"
+      - "traefik.docker.network=homelab_apps"
+      - "traefik.http.routers.recipe.rule=Host(`${RECIPE_DOMAIN}`)"
+      - "traefik.http.routers.recipe.entrypoints=websecure"
+      - "traefik.http.routers.recipe.tls=true"
+      - "traefik.http.routers.recipe.tls.certresolver=le"
+      - "traefik.http.services.recipe.loadbalancer.server.port=80" 
+      
+      # Authentik Protection
+#      - "traefik.http.middlewares.authentik.forwardauth.address=http://authentik-server:9000/outpost.goauthentik.io/auth/traefik"
+#      - "traefik.http.middlewares.authentik.forwardauth.trustForwardHeader=true"
+#      - "traefik.http.middlewares.authentik.forwardauth.authResponseHeaders=X-authentik-username,X-authentik-groups,X-authentik-entitlements,X-authentik-email,X-authentik-name,X-authentik-uid,X-authentik-jwt,X-authentik-meta-jwks,X-authentik-meta-outpost,X-authentik-meta-provider,X-authentik-meta-app,X-authentik-meta-version"
+#      - "traefik.http.routers.recipe.middlewares=authentik"
+
+networks:
+  homelab_apps:
+    external: true
--- a/icons/apple-touch-icon.png
+++ b/icons/apple-touch-icon.png
--- a/icons/icon-192.png
+++ b/icons/icon-192.png
--- a/icons/icon-512.png
+++ b/icons/icon-512.png
--- a/index.html
+++ b/index.html
@@ -3,7 +3,14 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#111827">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Recipe">
    <title>Recipe App - Modular</title>
+    <link rel="manifest" href="./manifest.webmanifest">
+    <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
+    <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
@@ -24,13 +31,19 @@
        /* Utilities */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
    </style>
 </head>
-<body class="bg-gray-100 flex justify-center p-4 font-sans text-gray-800">
+<body class="m-0 min-h-dvh bg-white font-sans text-gray-800">

-    <div id="app-container" class="w-full max-w-[400px] h-[800px] bg-white border border-gray-300 rounded-3xl overflow-hidden relative flex flex-col shadow-xl">
+    <div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
        </div>

+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('./sw.js', { scope: './' }).catch(() => {});
+        }
+    </script>
    <script type="module" src="js/app.js"></script>
 </body>
 </html>
--- a/js/app.js
+++ b/js/app.js
@@ -2,25 +2,35 @@ import { getRecipeListHTML } from './views/RecipeList.js';
 import { getFilterHTML, setupFilter } from './views/Filter.js';
 import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetail.js';
 import { getMealPlannerHTML, setupMealPlanner } from './views/MealPlanner.js';
+import { getPantryHTML, refreshPantry, setupPantry } from './views/Pantry.js';
+import { getShoppingHTML, refreshShopping, setupShopping } from './views/Shopping.js';
+
+function getAppToastHTML() {
+    return `
+    <div id="app-toast" class="pointer-events-none absolute left-4 right-4 bottom-28 z-[60] opacity-0 translate-y-2 transition-all duration-300" role="status">
+        <div class="rounded-xl bg-gray-900 text-white text-sm font-medium px-4 py-3 shadow-lg text-center" id="app-toast-text"></div>
+    </div>
+    `;
+}

 function getBottomNavHTML() {
    return `
-    <nav id="app-bottom-nav" class="absolute bottom-0 left-0 right-0 w-full bg-white border-t border-gray-200 flex justify-between px-4 py-3 pb-6 z-20" aria-label="Główna nawigacja">
-        <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab flex flex-col items-center gap-1 text-black min-w-[3.5rem]">
-            <i class="fas fa-book text-xl" aria-hidden="true"></i>
-            <span class="text-[11px] font-medium">Przepisy</span>
+    <nav id="app-bottom-nav" class="absolute bottom-0 left-0 right-0 w-full bg-white border-t border-gray-200 flex justify-between px-1 py-2.5 pb-6 z-20 gap-0" aria-label="Główna nawigacja">
+        <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]">
+            <i class="fas fa-book text-base" aria-hidden="true"></i>
+            <span class="text-[9px] font-medium leading-tight text-center">Przepisy</span>
        </button>
-        <button type="button" data-tab="planner" id="nav-planner" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]">
-            <i class="far fa-calendar-alt text-xl" aria-hidden="true"></i>
-            <span class="text-[11px] font-medium">Planer</span>
+        <button type="button" data-tab="planner" id="nav-planner" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
+            <i class="far fa-calendar-alt text-base" aria-hidden="true"></i>
+            <span class="text-[9px] font-medium leading-tight text-center">Planer</span>
        </button>
-        <button type="button" data-tab="shopping" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]" disabled title="Wkrótce">
-            <i class="fas fa-shopping-cart text-xl" aria-hidden="true"></i>
-            <span class="text-[11px] font-medium">Zakupy</span>
+        <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
+            <i class="fas fa-warehouse text-base" aria-hidden="true"></i>
+            <span class="text-[9px] font-medium leading-tight text-center">Spiżarnia</span>
        </button>
-        <button type="button" data-tab="pantry" class="nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]" disabled title="Wkrótce">
-            <i class="fas fa-box text-xl" aria-hidden="true"></i>
-            <span class="text-[11px] font-medium">Zapasy</span>
+        <button type="button" data-tab="shopping" id="nav-shopping" class="nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]">
+            <i class="fas fa-cart-shopping text-base" aria-hidden="true"></i>
+            <span class="text-[9px] font-medium leading-tight text-center">Zakupy</span>
        </button>
    </nav>
    `;
@@ -29,21 +39,27 @@ function getBottomNavHTML() {
 function setupTabs() {
    const main = document.getElementById('main-view');
    const planner = document.getElementById('planner-view');
+    const pantry = document.getElementById('pantry-view');
+    const shopping = document.getElementById('shopping-view');
    const nav = document.getElementById('app-bottom-nav');
-    if (!main || !planner || !nav) return;
+    if (!main || !planner || !pantry || !shopping || !nav) return;

-    const activeTab = 'nav-tab flex flex-col items-center gap-1 text-black min-w-[3.5rem]';
-    const idleTab = 'nav-tab flex flex-col items-center gap-1 text-gray-500 hover:text-gray-700 min-w-[3.5rem]';
+    const activeTab = 'nav-tab flex flex-col items-center gap-0.5 text-black flex-1 min-w-0 max-w-[5.5rem]';
+    const idleTab = 'nav-tab flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]';

    const apply = (tab) => {
-        const showRecipes = tab === 'recipes';
-        main.classList.toggle('hidden', !showRecipes);
-        planner.classList.toggle('hidden', showRecipes);
+        main.classList.toggle('hidden', tab !== 'recipes');
+        planner.classList.toggle('hidden', tab !== 'planner');
+        pantry.classList.toggle('hidden', tab !== 'pantry');
+        shopping.classList.toggle('hidden', tab !== 'shopping');
+
+        if (tab === 'pantry') refreshPantry();
+        if (tab === 'shopping') refreshShopping();

        nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
            const id = btn.getAttribute('data-tab');
            if (btn.hasAttribute('disabled')) return;
-            if (id === 'recipes' || id === 'planner') {
+            if (id === 'recipes' || id === 'planner' || id === 'pantry' || id === 'shopping') {
                btn.className = id === tab ? activeTab : idleTab;
            }
        });
@@ -53,10 +69,15 @@ function setupTabs() {
        const btn = e.target.closest('.nav-tab[data-tab]');
        if (!btn || btn.hasAttribute('disabled')) return;
        const tab = btn.getAttribute('data-tab');
-        if (tab === 'recipes' || tab === 'planner') apply(tab);
+        if (tab === 'recipes' || tab === 'planner' || tab === 'pantry' || tab === 'shopping') apply(tab);
    });

    apply('recipes');
+
+    window.refreshStockViews = () => {
+        refreshPantry();
+        refreshShopping();
+    };
 }

 document.addEventListener('DOMContentLoaded', () => {
@@ -65,13 +86,18 @@ document.addEventListener('DOMContentLoaded', () => {
    appContainer.innerHTML = `
        ${getRecipeListHTML()}
        ${getMealPlannerHTML()}
+        ${getPantryHTML()}
+        ${getShoppingHTML()}
        ${getBottomNavHTML()}
        ${getRecipeDetailHTML()}
        ${getFilterHTML()}
+        ${getAppToastHTML()}
    `;

    setupTabs();
    setupMealPlanner();
+    setupPantry();
+    setupShopping();
    setupFilter();
    setupRecipeDetail();
 });
@@ -101,4 +127,4 @@ window.closeFilters = () => {
    const fv = document.getElementById('filter-view');
    fv.classList.add('hidden');
    fv.classList.remove('flex');
-};
+};
--- a/js/data/catalog.js
+++ b/js/data/catalog.js
@@ -0,0 +1,371 @@
+/**
+ * Katalog składników i przepisów — odpowiednik tabel w DB (edycja poza aplikacją).
+ * pantryUnit: jednostka magazynowa / sumowania na liście zakupów (g, ml, szt.).
+ * purchasePack: minimalna „sztuka” ze sklepu w tej samej jednostce co pantryUnit (np. 200 g).
+ * nutritionPer100g — wartości szacunkowe na 100 g (dla płynów: traktuj ml≈g przy wodzie).
+ */
+
+export const CATEGORY_LABELS = {
+    pieczywo: 'Pieczywo',
+    nabial: 'Nabiał',
+    mieso_ryby: 'Mięso i ryby',
+    warzywa: 'Warzywa',
+    owoce: 'Owoce',
+    suche: 'Suche i kasze',
+    przyprawy: 'Przyprawy i zioła',
+    inne: 'Inne',
+};
+
+/**
+ * @typedef {{ kcal: number, protein: number, fat: number, carbs: number }} NutritionPer100
+ * @typedef {{ amount: number, label?: string }} PurchasePack
+ * @typedef {{ id: string, name: string, category: keyof typeof CATEGORY_LABELS, pantryUnit: 'g'|'ml'|'szt', purchasePack?: PurchasePack, nutritionPer100g?: NutritionPer100 }} IngredientDef
+ */
+
+/** @type {Record<string, IngredientDef>} */
+export const INGREDIENTS = {
+    maka_pszenna: {
+        id: 'maka_pszenna',
+        name: 'Mąka pszenna',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 364, protein: 10, fat: 1, carbs: 76 },
+    },
+    mleko: {
+        id: 'mleko',
+        name: 'Mleko',
+        category: 'nabial',
+        pantryUnit: 'ml',
+        purchasePack: { amount: 1000, label: 'butelka 1 l' },
+        nutritionPer100g: { kcal: 42, protein: 3.4, fat: 1, carbs: 5 },
+    },
+    jajko: {
+        id: 'jajko',
+        name: 'Jajka',
+        category: 'nabial',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 143, protein: 13, fat: 9.5, carbs: 1.1 },
+    },
+    piers_kurczaka: {
+        id: 'piers_kurczaka',
+        name: 'Pierś z kurczaka',
+        category: 'mieso_ryby',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 165, protein: 31, fat: 3.6, carbs: 0 },
+    },
+    mix_salat: {
+        id: 'mix_salat',
+        name: 'Mix sałat',
+        category: 'warzywa',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 20, protein: 1.5, fat: 0.3, carbs: 3 },
+    },
+    pomidor: {
+        id: 'pomidor',
+        name: 'Pomidor',
+        category: 'warzywa',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 18, protein: 0.9, fat: 0.2, carbs: 3.9 },
+    },
+    makaron_suchy: {
+        id: 'makaron_suchy',
+        name: 'Makaron',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 371, protein: 13, fat: 1.5, carbs: 74 },
+    },
+    pomidory_krojone: {
+        id: 'pomidory_krojone',
+        name: 'Pomidory krojone (puszka)',
+        category: 'warzywa',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 20, protein: 1, fat: 0.2, carbs: 4 },
+    },
+    bazylia_swieza: {
+        id: 'bazylia_swieza',
+        name: 'Bazylia świeża',
+        category: 'przyprawy',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 23, protein: 3.2, fat: 0.6, carbs: 2.7 },
+    },
+    jogurt_naturalny: {
+        id: 'jogurt_naturalny',
+        name: 'Jogurt naturalny',
+        category: 'nabial',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 61, protein: 3.5, fat: 3.3, carbs: 4.7 },
+    },
+    mieszanka_jagod: {
+        id: 'mieszanka_jagod',
+        name: 'Mieszanka jagód',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 50, protein: 0.7, fat: 0.3, carbs: 12 },
+    },
+    miod: {
+        id: 'miod',
+        name: 'Miód',
+        category: 'inne',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 304, protein: 0.3, fat: 0, carbs: 82 },
+    },
+    chleb_zakwas: {
+        id: 'chleb_zakwas',
+        name: 'Chleb na zakwasie',
+        category: 'pieczywo',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 250, protein: 9, fat: 1.5, carbs: 49 },
+    },
+    awokado: {
+        id: 'awokado',
+        name: 'Awokado',
+        category: 'warzywa',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 160, protein: 2, fat: 15, carbs: 9 },
+    },
+    cytryna: {
+        id: 'cytryna',
+        name: 'Cytryna',
+        category: 'owoce',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 29, protein: 1.1, fat: 0.3, carbs: 9 },
+    },
+    losos_filet: {
+        id: 'losos_filet',
+        name: 'Filet z łososia',
+        category: 'mieso_ryby',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 208, protein: 20, fat: 13, carbs: 0 },
+    },
+    koper_swiezy: {
+        id: 'koper_swiezy',
+        name: 'Koper',
+        category: 'przyprawy',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 43, protein: 3.5, fat: 1.1, carbs: 7 },
+    },
+    mieso_wol_mielone: {
+        id: 'mieso_wol_mielone',
+        name: 'Mięso mielone wołowe',
+        category: 'mieso_ryby',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 250, protein: 26, fat: 15, carbs: 0 },
+    },
+    tortilla_kukurydziana: {
+        id: 'tortilla_kukurydziana',
+        name: 'Tortille kukurydziane',
+        category: 'pieczywo',
+        pantryUnit: 'szt',
+        nutritionPer100g: { kcal: 218, protein: 5.7, fat: 2.9, carbs: 44 },
+    },
+    salsa_pomidorowa: {
+        id: 'salsa_pomidorowa',
+        name: 'Salsa pomidorowa',
+        category: 'warzywa',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 36, protein: 1.5, fat: 0.2, carbs: 8 },
+    },
+    platki_owsiane: {
+        id: 'platki_owsiane',
+        name: 'Płatki owsiane',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 389, protein: 17, fat: 7, carbs: 66 },
+    },
+    serek_wiejski: {
+        id: 'serek_wiejski',
+        name: 'Serek wiejski',
+        category: 'nabial',
+        pantryUnit: 'g',
+        purchasePack: { amount: 200, label: 'opakowanie 200 g' },
+        nutritionPer100g: { kcal: 97, protein: 11, fat: 5, carbs: 3 },
+    },
+    orzechy_wloskie: {
+        id: 'orzechy_wloskie',
+        name: 'Orzechy włoskie',
+        category: 'suche',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 654, protein: 15, fat: 65, carbs: 14 },
+    },
+    truskawki: {
+        id: 'truskawki',
+        name: 'Truskawki',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 32, protein: 0.7, fat: 0.3, carbs: 8 },
+    },
+    borowki_amerykanskie: {
+        id: 'borowki_amerykanskie',
+        name: 'Borówki amerykańskie',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 57, protein: 0.7, fat: 0.3, carbs: 14 },
+    },
+};
+
+/** Porcja bazowa = 1; składniki przez ingredientId */
+export const RECIPES = {
+    placki: {
+        id: 'placki',
+        title: 'Puszyste placki',
+        minutes: 15,
+        thumbLabel: 'Placki',
+        allowedSlots: ['sniadanie', 'drugie_sniadanie'],
+        nutritionPerServing: { kcal: 320, protein: 12, fat: 8, carbs: 48 },
+        ingredients: [
+            { ingredientId: 'maka_pszenna', amount: 200, unit: 'g' },
+            { ingredientId: 'mleko', amount: 250, unit: 'ml' },
+            { ingredientId: 'jajko', amount: 2, unit: 'szt.' },
+        ],
+    },
+    salatka: {
+        id: 'salatka',
+        title: 'Sałatka z kurczakiem',
+        minutes: 20,
+        thumbLabel: 'Sałatka',
+        allowedSlots: ['obiad'],
+        nutritionPerServing: { kcal: 250, protein: 35, fat: 9, carbs: 12 },
+        ingredients: [
+            { ingredientId: 'piers_kurczaka', amount: 150, unit: 'g' },
+            { ingredientId: 'mix_salat', amount: 100, unit: 'g' },
+            { ingredientId: 'pomidor', amount: 1, unit: 'szt.' },
+        ],
+    },
+    makaron: {
+        id: 'makaron',
+        title: 'Makaron z pomidorami i bazylią',
+        minutes: 30,
+        thumbLabel: 'Makaron',
+        allowedSlots: ['obiad', 'kolacja'],
+        nutritionPerServing: { kcal: 450, protein: 14, fat: 12, carbs: 72 },
+        ingredients: [
+            { ingredientId: 'makaron_suchy', amount: 120, unit: 'g' },
+            { ingredientId: 'pomidory_krojone', amount: 400, unit: 'g' },
+            { ingredientId: 'bazylia_swieza', amount: 10, unit: 'g' },
+        ],
+    },
+    koktajl: {
+        id: 'koktajl',
+        title: 'Koktajl owocowy',
+        minutes: 5,
+        thumbLabel: 'Koktajl',
+        allowedSlots: ['przekaska', 'drugie_sniadanie'],
+        nutritionPerServing: { kcal: 180, protein: 8, fat: 3, carbs: 32 },
+        ingredients: [
+            { ingredientId: 'jogurt_naturalny', amount: 200, unit: 'g' },
+            { ingredientId: 'mieszanka_jagod', amount: 150, unit: 'g' },
+            { ingredientId: 'miod', amount: 15, unit: 'g' },
+        ],
+    },
+    tost_awokado: {
+        id: 'tost_awokado',
+        title: 'Tost z awokado',
+        minutes: 10,
+        thumbLabel: 'Tost',
+        allowedSlots: ['sniadanie', 'drugie_sniadanie'],
+        nutritionPerServing: { kcal: 220, protein: 6, fat: 14, carbs: 20 },
+        ingredients: [
+            { ingredientId: 'chleb_zakwas', amount: 2, unit: 'kromki' },
+            { ingredientId: 'awokado', amount: 1, unit: 'szt.' },
+            { ingredientId: 'cytryna', amount: 0.5, unit: 'szt.' },
+        ],
+    },
+    losos: {
+        id: 'losos',
+        title: 'Grillowany łosoś',
+        minutes: 25,
+        thumbLabel: 'Łosoś',
+        allowedSlots: ['kolacja', 'obiad'],
+        nutritionPerServing: { kcal: 380, protein: 38, fat: 22, carbs: 4 },
+        ingredients: [
+            { ingredientId: 'losos_filet', amount: 180, unit: 'g' },
+            { ingredientId: 'cytryna', amount: 0.5, unit: 'szt.' },
+            { ingredientId: 'koper_swiezy', amount: 5, unit: 'g' },
+        ],
+    },
+    tacos: {
+        id: 'tacos',
+        title: 'Tacos z wołowiną',
+        minutes: 20,
+        thumbLabel: 'Tacos',
+        allowedSlots: ['kolacja', 'obiad'],
+        nutritionPerServing: { kcal: 410, protein: 28, fat: 18, carbs: 38 },
+        ingredients: [
+            { ingredientId: 'mieso_wol_mielone', amount: 200, unit: 'g' },
+            { ingredientId: 'tortilla_kukurydziana', amount: 4, unit: 'szt.' },
+            { ingredientId: 'salsa_pomidorowa', amount: 100, unit: 'g' },
+        ],
+    },
+    owsianka: {
+        id: 'owsianka',
+        title: 'Miska owsianki',
+        minutes: 10,
+        thumbLabel: 'Owsianka',
+        allowedSlots: ['sniadanie', 'drugie_sniadanie'],
+        nutritionPerServing: { kcal: 210, protein: 8, fat: 6, carbs: 34 },
+        ingredients: [
+            { ingredientId: 'platki_owsiane', amount: 60, unit: 'g' },
+            { ingredientId: 'mleko', amount: 200, unit: 'ml' },
+            { ingredientId: 'miod', amount: 20, unit: 'g' },
+        ],
+    },
+    serek_owoc: {
+        id: 'serek_owoc',
+        title: 'Serek wiejski z orzechami i owocami',
+        minutes: 5,
+        thumbLabel: 'Serek',
+        allowedSlots: ['sniadanie', 'drugie_sniadanie', 'przekaska'],
+        nutritionPerServing: { kcal: 642, protein: 32, fat: 43, carbs: 41 },
+        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' },
+        ],
+    },
+};
+
+/**
+ * Krok +/- w spiżarni: całe opakowanie albo domyślny krok (10 g/ml lub 1 szt.).
+ * @param {string} ingredientId
+ * @returns {number}
+ */
+export function pantryQtyStep(ingredientId) {
+    const d = INGREDIENTS[ingredientId];
+    if (!d) return 10;
+    if (d.purchasePack && Number.isFinite(d.purchasePack.amount) && d.purchasePack.amount > 0) {
+        return d.purchasePack.amount;
+    }
+    return d.pantryUnit === 'szt' ? 1 : 10;
+}
+
+/**
+ * @param {IngredientDef} def
+ * @param {number} stockQty — w pantryUnit
+ */
+export function nutritionForStock(def, stockQty) {
+    const n = def.nutritionPer100g;
+    if (!n || !Number.isFinite(stockQty) || stockQty <= 0) return null;
+    const f = stockQty / 100;
+    return {
+        kcal: Math.round(n.kcal * f),
+        protein: Math.round(n.protein * f * 10) / 10,
+        fat: Math.round(n.fat * f * 10) / 10,
+        carbs: Math.round(n.carbs * f * 10) / 10,
+    };
+}
+
+/**
+ * Pełne opakowania + reszta (np. 450 g / 200 → 2 + 50 g).
+ * @param {IngredientDef} def
+ * @param {number} stockQty
+ * @returns {{ fullPacks: number, remainder: number } | null}
+ */
+export function splitStockIntoPacks(def, stockQty) {
+    const size = def.purchasePack?.amount;
+    if (!size || !Number.isFinite(size) || size <= 0 || !Number.isFinite(stockQty)) return null;
+    const fullPacks = Math.floor(stockQty / size);
+    const remainder = Math.round((stockQty - fullPacks * size) * 10) / 10;
+    return { fullPacks, remainder };
+}
--- a/js/planner/mealSlots.js
+++ b/js/planner/mealSlots.js
@@ -0,0 +1,7 @@
+export const MEAL_SLOTS = [
+    { id: 'sniadanie', label: 'Śniadanie', icon: 'fa-sun' },
+    { id: 'drugie_sniadanie', label: 'Drugie śniadanie', icon: 'fa-coffee' },
+    { id: 'obiad', label: 'Obiad', icon: 'fa-utensils' },
+    { id: 'przekaska', label: 'Przekąska', icon: 'fa-apple-alt' },
+    { id: 'kolacja', label: 'Kolacja', icon: 'fa-moon' },
+];
--- a/js/services/dateUtils.js
+++ b/js/services/dateUtils.js
@@ -0,0 +1,51 @@
+export function startOfDay(d) {
+    const x = new Date(d);
+    x.setHours(0, 0, 0, 0);
+    return x;
+}
+
+export function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear()
+        && a.getMonth() === b.getMonth()
+        && a.getDate() === b.getDate();
+}
+
+export function addDays(d, n) {
+    const x = new Date(d);
+    x.setDate(x.getDate() + n);
+    return startOfDay(x);
+}
+
+/** Poniedziałek jako pierwszy dzień tygodnia (PL) */
+export function startOfWeekMonday(d) {
+    const date = startOfDay(d);
+    const day = date.getDay();
+    const diff = day === 0 ? -6 : 1 - day;
+    return addDays(date, diff);
+}
+
+export function startOfMonth(d) {
+    const x = new Date(d.getFullYear(), d.getMonth(), 1);
+    return startOfDay(x);
+}
+
+export function addMonths(d, n) {
+    const x = new Date(d);
+    x.setMonth(x.getMonth() + n);
+    return startOfDay(x);
+}
+
+export function addWeeks(d, n) {
+    return addDays(d, n * 7);
+}
+
+export function weekContains(weekStart, d) {
+    const t = startOfDay(d).getTime();
+    const ws = weekStart.getTime();
+    const we = addDays(weekStart, 6).getTime();
+    return t >= ws && t <= we;
+}
+
+export function sameMonth(a, b) {
+    return a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+}
--- a/js/services/pantryShopping.js
+++ b/js/services/pantryShopping.js
@@ -0,0 +1,414 @@
+import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js';
+import { PANTRY_STORAGE_KEY, SHOPPING_STORAGE_KEY } from '../storageKeys.js';
+
+export const KITCHEN_LIST_ID = 'kitchen';
+export const MISC_LIST_ID = 'misc';
+
+function newId(prefix) {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `${prefix}${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+/** @typedef {{ id: string, ingredientId: string, name: string, amount: number, unit: string, category: string, checked: boolean, sourceNote?: string }} KitchenShoppingItem */
+/** @typedef {{ id: string, text: string, note?: string, checked: boolean }} FreeformShoppingItem */
+/** @typedef {{ id: string, name: string, type: 'kitchen'|'freeform', items: (KitchenShoppingItem|FreeformShoppingItem)[] }} ShoppingListDef */
+
+/**
+ * @typedef {{
+ *   lists: ShoppingListDef[],
+ *   activeListId: string
+ * }} ShoppingState
+ */
+
+function defaultShoppingState() {
+    return {
+        lists: [
+            { id: KITCHEN_LIST_ID, name: 'Kuchnia', type: 'kitchen', items: [] },
+            { id: MISC_LIST_ID, name: 'Inne zakupy', type: 'freeform', items: [] },
+        ],
+        activeListId: KITCHEN_LIST_ID,
+    };
+}
+
+/** @param {unknown} x */
+function normalizeKitchenItem(x) {
+    if (!x || typeof x !== 'object') return null;
+    const o = /** @type {Record<string, unknown>} */ (x);
+    if (!o.ingredientId || !Number.isFinite(Number(o.amount))) return null;
+    const id = String(o.id && String(o.id).length ? o.id : newId('s'));
+    const ingId = String(o.ingredientId);
+    return {
+        id,
+        ingredientId: ingId,
+        name: String(o.name || INGREDIENTS[ingId]?.name || ingId),
+        amount: Math.round(Number(o.amount) * 100) / 100,
+        unit: String(o.unit || ''),
+        category: String(o.category || INGREDIENTS[ingId]?.category || 'inne'),
+        checked: Boolean(o.checked),
+        sourceNote: o.sourceNote ? String(o.sourceNote) : undefined,
+    };
+}
+
+/** @param {unknown} x */
+function normalizeFreeformItem(x) {
+    if (!x || typeof x !== 'object') return null;
+    const o = /** @type {Record<string, unknown>} */ (x);
+    if (!o.text || !String(o.text).trim()) return null;
+    return {
+        id: String(o.id && String(o.id).length ? o.id : newId('f')),
+        text: String(o.text).trim(),
+        note: o.note ? String(o.note) : undefined,
+        checked: Boolean(o.checked),
+    };
+}
+
+/** @returns {ShoppingState} */
+function normalizeShoppingState(raw) {
+    const base = defaultShoppingState();
+    if (!raw || typeof raw !== 'object') return base;
+    const p = /** @type {Record<string, unknown>} */ (raw);
+
+    if (Array.isArray(p)) {
+        const items = p.map(normalizeKitchenItem).filter(Boolean);
+        const kitchen = base.lists.find((l) => l.id === KITCHEN_LIST_ID);
+        if (kitchen && kitchen.type === 'kitchen') {
+            kitchen.items = /** @type {KitchenShoppingItem[]} */ (items);
+        }
+        return base;
+    }
+
+    if (!Array.isArray(p.lists)) return base;
+
+    /** @type {ShoppingListDef[]} */
+    const lists = [];
+    for (const L of p.lists) {
+        if (!L || typeof L !== 'object') continue;
+        const row = /** @type {Record<string, unknown>} */ (L);
+        const id = String(row.id || '');
+        const name = String(row.name || 'Lista');
+        let type = row.type === 'freeform' ? 'freeform' : 'kitchen';
+        if (id === KITCHEN_LIST_ID) type = 'kitchen';
+        if (id === MISC_LIST_ID) type = 'freeform';
+        if (!id) continue;
+        if (type === 'kitchen') {
+            const items = Array.isArray(row.items)
+                ? row.items.map(normalizeKitchenItem).filter(Boolean)
+                : [];
+            lists.push({ id, name, type: 'kitchen', items: /** @type {KitchenShoppingItem[]} */ (items) });
+        } else {
+            const items = Array.isArray(row.items)
+                ? row.items.map(normalizeFreeformItem).filter(Boolean)
+                : [];
+            lists.push({ id, name, type: 'freeform', items: /** @type {FreeformShoppingItem[]} */ (items) });
+        }
+    }
+
+    if (lists.length === 0) return base;
+
+    const hasKitchen = lists.some((l) => l.id === KITCHEN_LIST_ID);
+    if (!hasKitchen) {
+        lists.unshift(/** @type {ShoppingListDef} */ (base.lists[0]));
+    }
+    const hasMisc = lists.some((l) => l.id === MISC_LIST_ID);
+    if (!hasMisc) {
+        lists.push(/** @type {ShoppingListDef} */ (base.lists[1]));
+    }
+
+    let activeListId = String(p.activeListId || KITCHEN_LIST_ID);
+    if (!lists.some((l) => l.id === activeListId)) activeListId = lists[0].id;
+
+    return { lists, activeListId };
+}
+
+export function loadShoppingState() {
+    try {
+        const raw = localStorage.getItem(SHOPPING_STORAGE_KEY);
+        if (!raw) return defaultShoppingState();
+        const parsed = JSON.parse(raw);
+        return normalizeShoppingState(parsed);
+    } catch {
+        return defaultShoppingState();
+    }
+}
+
+export function saveShoppingState(state) {
+    try {
+        localStorage.setItem(SHOPPING_STORAGE_KEY, JSON.stringify(state));
+    } catch { /* ignore */ }
+}
+
+export function getListSummaries() {
+    const { lists, activeListId } = loadShoppingState();
+    return {
+        lists: lists.map((l) => ({
+            id: l.id,
+            name: l.name,
+            type: l.type,
+            openCount: l.items.filter((i) => !i.checked).length,
+        })),
+        activeListId,
+    };
+}
+
+export function setActiveListId(listId) {
+    const s = loadShoppingState();
+    if (!s.lists.some((l) => l.id === listId)) return s;
+    s.activeListId = listId;
+    saveShoppingState(s);
+    return s;
+}
+
+export function getListById(listId) {
+    return loadShoppingState().lists.find((l) => l.id === listId) ?? null;
+}
+
+export function getActiveList() {
+    const s = loadShoppingState();
+    return s.lists.find((l) => l.id === s.activeListId) ?? s.lists[0];
+}
+
+/**
+ * @param {string} name
+ * @returns {string} new list id
+ */
+export function addFreeformList(name) {
+    const s = loadShoppingState();
+    const id = newId('list');
+    s.lists.push({
+        id,
+        name: name.trim() || 'Nowa lista',
+        type: 'freeform',
+        items: [],
+    });
+    s.activeListId = id;
+    saveShoppingState(s);
+    return id;
+}
+
+/**
+ * @param {string} listId
+ * @returns {boolean}
+ */
+export function deleteList(listId) {
+    if (listId === KITCHEN_LIST_ID) return false;
+    const s = loadShoppingState();
+    const idx = s.lists.findIndex((l) => l.id === listId);
+    if (idx < 0) return false;
+    s.lists.splice(idx, 1);
+    if (s.activeListId === listId) {
+        s.activeListId = s.lists[0]?.id || KITCHEN_LIST_ID;
+    }
+    saveShoppingState(s);
+    return true;
+}
+
+/**
+ * Dodaje linie tylko do listy kuchennej (składniki z katalogu).
+ * @param {{ ingredientId: string, amount: number, unit: string, name?: string, category?: string, sourceNote?: string }[]} lines
+ * @param {string} [listId]
+ */
+export function addOrMergeShoppingLines(lines, listId = KITCHEN_LIST_ID) {
+    const s = loadShoppingState();
+    const list = s.lists.find((l) => l.id === listId && l.type === 'kitchen');
+    if (!list || list.type !== 'kitchen') return s;
+
+    const items = /** @type {KitchenShoppingItem[]} */ (list.items);
+    const open = items.filter((x) => !x.checked);
+    const closed = items.filter((x) => x.checked);
+
+    for (const L of lines) {
+        const def = INGREDIENTS[L.ingredientId];
+        const name = L.name || def?.name || L.ingredientId;
+        const category = L.category || def?.category || 'inne';
+        const idx = open.findIndex(
+            (x) => x.ingredientId === L.ingredientId && x.unit === L.unit,
+        );
+        if (idx >= 0) {
+            open[idx].amount = Math.round((open[idx].amount + L.amount) * 100) / 100;
+            if (L.sourceNote && !open[idx].sourceNote) open[idx].sourceNote = L.sourceNote;
+        } else {
+            open.push({
+                id: newId('s'),
+                ingredientId: L.ingredientId,
+                name,
+                amount: Math.round(L.amount * 100) / 100,
+                unit: L.unit,
+                category,
+                checked: false,
+                sourceNote: L.sourceNote,
+            });
+        }
+    }
+
+    list.items = [...open, ...closed];
+    saveShoppingState(s);
+    return s;
+}
+
+/**
+ * Na listę kuchenną ze spiżarni (amount w pantryUnit: g, ml lub szt.).
+ * @param {string} [sourceNote] — nadpisuje domyślne „Ze spiżarni”
+ */
+export function addIngredientToKitchenList(ingredientId, amount = 1, sourceNote) {
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    const unit = displayUnit(def.pantryUnit);
+    addOrMergeShoppingLines([{
+        ingredientId,
+        amount,
+        unit,
+        name: def.name,
+        category: def.category,
+        sourceNote: sourceNote ?? 'Ze spiżarni',
+    }], KITCHEN_LIST_ID);
+}
+
+/**
+ * @param {string} listId
+ * @param {string} text
+ * @param {string} [note]
+ */
+export function addFreeformLine(listId, text, note) {
+    const t = text.trim();
+    if (!t) return;
+    const s = loadShoppingState();
+    const list = s.lists.find((l) => l.id === listId && l.type === 'freeform');
+    if (!list) return;
+    const items = /** @type {FreeformShoppingItem[]} */ (list.items);
+    items.push({
+        id: newId('f'),
+        text: t,
+        note: note?.trim() || undefined,
+        checked: false,
+    });
+    saveShoppingState(s);
+}
+
+export function toggleItemInList(listId, itemId) {
+    const s = loadShoppingState();
+    const list = s.lists.find((l) => l.id === listId);
+    if (!list) return s;
+    const it = list.items.find((i) => i.id === itemId);
+    if (it) it.checked = !it.checked;
+    saveShoppingState(s);
+    return s;
+}
+
+export function removeItemFromList(listId, itemId) {
+    const s = loadShoppingState();
+    const list = s.lists.find((l) => l.id === listId);
+    if (!list) return s;
+    list.items = list.items.filter((i) => i.id !== itemId);
+    saveShoppingState(s);
+    return s;
+}
+
+export function clearCheckedInList(listId) {
+    const s = loadShoppingState();
+    const list = s.lists.find((l) => l.id === listId);
+    if (!list) return s;
+    list.items = list.items.filter((i) => !i.checked);
+    saveShoppingState(s);
+    return s;
+}
+
+export function computeShortfalls(needLines, pantry = loadPantry()) {
+    const short = [];
+    for (const L of needLines) {
+        const def = INGREDIENTS[L.ingredientId];
+        if (!def) continue;
+        const u = normalizeUnitForPantry(L.unit, def.pantryUnit);
+        if (u === null) {
+            short.push({ ...L, pantryQty: 0, shortfall: L.amount, unitMismatch: true });
+            continue;
+        }
+        const have = Number(pantry[L.ingredientId]) || 0;
+        const miss = Math.max(0, Math.round((L.amount - have) * 100) / 100);
+        if (miss > 0) {
+            short.push({
+                ...L,
+                unit: displayUnit(def.pantryUnit),
+                pantryQty: have,
+                shortfall: miss,
+                unitMismatch: false,
+            });
+        }
+    }
+    return short;
+}
+
+function displayUnit(pantryUnit) {
+    if (pantryUnit === 'szt') return 'szt.';
+    return pantryUnit;
+}
+
+function normalizeUnitForPantry(recipeUnit, pantryUnit) {
+    const r = String(recipeUnit).trim().toLowerCase().replace(/\.$/, '');
+    if (pantryUnit === 'g' && (r === 'g' || r === 'gram')) return 'g';
+    if (pantryUnit === 'ml' && (r === 'ml' || r === 'mililitr')) return 'ml';
+    if (pantryUnit === 'szt' && (r === 'szt' || r === 'sztuka' || r === 'kromki' || r === 'kromka')) return 'szt';
+    return null;
+}
+
+export function categoryLabel(cat) {
+    return CATEGORY_LABELS[cat] || CATEGORY_LABELS.inne;
+}
+
+/** @returns {Record<string, number>} ingredientId -> ilość w pantryUnit */
+export function loadPantry() {
+    try {
+        const raw = localStorage.getItem(PANTRY_STORAGE_KEY);
+        if (!raw) return {};
+        const p = JSON.parse(raw);
+        if (typeof p !== 'object' || p === null) return {};
+        const out = {};
+        Object.keys(p).forEach((k) => {
+            const n = Number(p[k]);
+            if (!Number.isFinite(n) || n < 0) return;
+            out[k] = n;
+        });
+        return out;
+    } catch {
+        return {};
+    }
+}
+
+export function savePantry(pantry) {
+    try {
+        localStorage.setItem(PANTRY_STORAGE_KEY, JSON.stringify(pantry));
+    } catch { /* ignore */ }
+}
+
+export function setPantryQty(ingredientId, qty) {
+    const pantry = loadPantry();
+    if (qty <= 0 || !Number.isFinite(qty)) delete pantry[ingredientId];
+    else pantry[ingredientId] = Math.round(qty * 1000) / 1000;
+    savePantry(pantry);
+    return pantry;
+}
+
+/** Kupione ze listy kuchennej → spiżarnia (zawsze ta lista, niezależnie od aktywnej zakładki). */
+export function applyCheckedKitchenListToPantry() {
+    const s = loadShoppingState();
+    const kitchen = s.lists.find((l) => l.id === KITCHEN_LIST_ID && l.type === 'kitchen');
+    if (!kitchen) return { pantry: loadPantry(), state: s };
+
+    const pantry = loadPantry();
+    const items = /** @type {KitchenShoppingItem[]} */ (kitchen.items);
+
+    for (const it of items) {
+        if (!it.checked) continue;
+        const def = INGREDIENTS[it.ingredientId];
+        if (!def) continue;
+        if (normalizeUnitForPantry(it.unit, def.pantryUnit) === null) continue;
+        const cur = Number(pantry[it.ingredientId]) || 0;
+        pantry[it.ingredientId] = Math.round((cur + it.amount) * 1000) / 1000;
+    }
+
+    kitchen.items = items.filter((i) => !i.checked);
+    savePantry(pantry);
+    saveShoppingState(s);
+    return { pantry, state: s };
+}
--- a/js/services/planIngredients.js
+++ b/js/services/planIngredients.js
@@ -0,0 +1,191 @@
+import { INGREDIENTS, RECIPES } from '../data/catalog.js';
+import { MEAL_SLOTS } from '../planner/mealSlots.js';
+import { addDays } from './dateUtils.js';
+import { getDayPlan } from './planStore.js';
+
+export function dayHasAnyMeal(plans, d) {
+    const p = getDayPlan(plans, d);
+    return MEAL_SLOTS.some((s) => {
+        const arr = p[s.id];
+        return Array.isArray(arr) && arr.length > 0;
+    });
+}
+
+export function sumDayNutrition(dayPlan) {
+    let kcal = 0;
+    let protein = 0;
+    let fat = 0;
+    let carbs = 0;
+    let mealCount = 0;
+    MEAL_SLOTS.forEach((slot) => {
+        const entries = dayPlan[slot.id];
+        if (!Array.isArray(entries)) return;
+        entries.forEach((entry) => {
+            if (!entry || !entry.recipeId) return;
+            const r = RECIPES[entry.recipeId];
+            if (!r) return;
+            const s = Math.max(1, Number(entry.servings) || 1);
+            mealCount += 1;
+            kcal += r.nutritionPerServing.kcal * s;
+            protein += r.nutritionPerServing.protein * s;
+            fat += r.nutritionPerServing.fat * s;
+            carbs += r.nutritionPerServing.carbs * s;
+        });
+    });
+    return {
+        kcal: Math.round(kcal),
+        protein: Math.round(protein * 10) / 10,
+        fat: Math.round(fat * 10) / 10,
+        carbs: Math.round(carbs * 10) / 10,
+        mealCount,
+    };
+}
+
+function resolveLine(ing, scaledAmount) {
+    const def = INGREDIENTS[ing.ingredientId];
+    return {
+        ingredientId: ing.ingredientId,
+        name: def?.name ?? ing.ingredientId,
+        category: def?.category ?? 'inne',
+        amount: scaledAmount,
+        unit: ing.unit,
+    };
+}
+
+/** Płaska lista składników z jednego dnia (wszystkie pory). */
+export function flattenDayIngredientLines(dayPlan) {
+    /** @type {ReturnType<typeof resolveLine>[]} */
+    const out = [];
+    MEAL_SLOTS.forEach((slot) => {
+        const entries = dayPlan[slot.id];
+        if (!Array.isArray(entries)) return;
+        entries.forEach((entry) => {
+            if (!entry || !entry.recipeId) return;
+            const r = RECIPES[entry.recipeId];
+            if (!r || !Array.isArray(r.ingredients)) return;
+            const serv = Math.max(1, Number(entry.servings) || 1);
+            r.ingredients.forEach((ing) => {
+                const scaled = Math.round(ing.amount * serv * 10) / 10;
+                out.push(resolveLine(ing, scaled));
+            });
+        });
+    });
+    return out;
+}
+
+/** Sumuje po (ingredientId + unit) — ta sama jednostka jak w przepisie. */
+export function mergeIngredientLines(lines) {
+    const m = new Map();
+    for (const L of lines) {
+        const key = `${L.ingredientId}\t${L.unit}`;
+        const cur = m.get(key);
+        if (!cur) {
+            m.set(key, { ...L });
+        } else {
+            cur.amount = Math.round((cur.amount + L.amount) * 10) / 10;
+        }
+    }
+    return [...m.values()].sort((a, b) => {
+        const c = a.category.localeCompare(b.category);
+        return c !== 0 ? c : a.name.localeCompare(b.name);
+    });
+}
+
+/**
+ * Zapotrzebowanie składników od weekStart (włącznie) przez 7 dni.
+ * @param {Record<string, unknown>} plans
+ * @param {Date} weekStart
+ */
+export function aggregateWeekIngredientNeed(plans, weekStart) {
+    const all = [];
+    for (let i = 0; i < 7; i++) {
+        const day = addDays(weekStart, i);
+        const dayPlan = getDayPlan(plans, day);
+        all.push(...flattenDayIngredientLines(dayPlan));
+    }
+    return mergeIngredientLines(all);
+}
+
+/**
+ * Jedna grupa na porę dnia: nagłówek pory raz, potem bloki przepisów ze składnikami.
+ */
+export function aggregateDayIngredientsBySlot(dayPlan) {
+    /** @type {{ mealLabel: string, recipes: { recipeTitle: string, items: { ingredientId: string, name: string, amount: number, unit: string, category: string }[] }[] }[]} */
+    const blocks = [];
+    MEAL_SLOTS.forEach((slot) => {
+        const entries = dayPlan[slot.id];
+        if (!Array.isArray(entries) || entries.length === 0) return;
+        const recipes = [];
+        entries.forEach((entry) => {
+            if (!entry || !entry.recipeId) return;
+            const r = RECIPES[entry.recipeId];
+            if (!r) return;
+            const s = Math.max(1, Number(entry.servings) || 1);
+            const items = r.ingredients.map((ing) => {
+                const def = INGREDIENTS[ing.ingredientId];
+                return {
+                    ingredientId: ing.ingredientId,
+                    name: def?.name ?? ing.ingredientId,
+                    category: def?.category ?? 'inne',
+                    amount: Math.round(ing.amount * s * 10) / 10,
+                    unit: ing.unit,
+                };
+            });
+            recipes.push({ recipeTitle: r.title, items });
+        });
+        if (recipes.length > 0) {
+            blocks.push({ mealLabel: slot.label, recipes });
+        }
+    });
+    return blocks;
+}
+
+export function countDayShortfalls(dayPlan, pantry) {
+    const lines = mergeIngredientLines(flattenDayIngredientLines(dayPlan));
+    let count = 0;
+    for (const line of lines) {
+        if ((Number(pantry[line.ingredientId]) || 0) < line.amount) count++;
+    }
+    return count;
+}
+
+/**
+ * Kumulatywna prognoza zużycia spiżarni: od startDate przez lookAheadDays dni.
+ * Zwraca tablicę dni (tylko te z posiłkami), każdy z listą składników i informacją
+ * ile jest w spiżarni (po odjęciu zużycia z poprzednich dni) i ile brakuje.
+ */
+export function computeFullForecast(plans, pantry, startDate, lookAheadDays = 8) {
+    const running = { ...pantry };
+    const days = [];
+
+    for (let i = 0; i < lookAheadDays; i++) {
+        const day = addDays(startDate, i);
+        const dayPlan = getDayPlan(plans, day);
+        const lines = mergeIngredientLines(flattenDayIngredientLines(dayPlan));
+        if (lines.length === 0) continue;
+
+        const items = lines.map((line) => {
+            const def = INGREDIENTS[line.ingredientId];
+            const have = Math.round((Number(running[line.ingredientId]) || 0) * 10) / 10;
+            const miss = Math.max(0, Math.round((line.amount - have) * 10) / 10);
+            return {
+                ...line,
+                pantryQty: have,
+                shortfall: miss,
+                enough: miss <= 0,
+                pantryUnit: def
+                    ? def.pantryUnit === 'szt' ? 'szt.' : def.pantryUnit
+                    : line.unit,
+            };
+        });
+
+        for (const line of lines) {
+            const have = Number(running[line.ingredientId]) || 0;
+            running[line.ingredientId] = Math.max(0, Math.round((have - line.amount) * 10) / 10);
+        }
+
+        days.push({ date: day, dayIndex: i, items, hasShortfall: items.some((it) => !it.enough) });
+    }
+
+    return days;
+}
--- a/js/services/planStore.js
+++ b/js/services/planStore.js
@@ -0,0 +1,85 @@
+import { RECIPES } from '../data/catalog.js';
+import { MEAL_SLOTS } from '../planner/mealSlots.js';
+import { PLANS_STORAGE_KEY } from '../storageKeys.js';
+import { startOfDay } from './dateUtils.js';
+
+export function dateKey(d) {
+    const x = startOfDay(d);
+    const y = x.getFullYear();
+    const m = String(x.getMonth() + 1).padStart(2, '0');
+    const day = String(x.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+
+export function newPlanEntryId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `e${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+
+/** Jedna pora dnia = tablica wpisów { id, recipeId, servings } */
+export function normalizeSlotValue(v) {
+    if (!v) return [];
+    if (Array.isArray(v)) {
+        return v
+            .filter((x) => x && x.recipeId && RECIPES[x.recipeId])
+            .map((x) => ({
+                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)),
+            }));
+    }
+    if (typeof v === 'object' && v.recipeId && RECIPES[v.recipeId]) {
+        return [{
+            id: newPlanEntryId(),
+            recipeId: v.recipeId,
+            servings: Math.max(1, Math.min(12, Number(v.servings) || 1)),
+        }];
+    }
+    return [];
+}
+
+export function normalizeDayPlan(day) {
+    if (!day || typeof day !== 'object') return {};
+    const out = {};
+    MEAL_SLOTS.forEach((s) => {
+        const arr = normalizeSlotValue(day[s.id]);
+        if (arr.length > 0) out[s.id] = arr;
+    });
+    return out;
+}
+
+export function normalizeAllPlans(plans) {
+    if (!plans || typeof plans !== 'object') return {};
+    const out = {};
+    Object.keys(plans).forEach((key) => {
+        const d = normalizeDayPlan(plans[key]);
+        if (Object.keys(d).length > 0) out[key] = d;
+    });
+    return out;
+}
+
+export function loadPlans() {
+    try {
+        const raw = localStorage.getItem(PLANS_STORAGE_KEY);
+        if (!raw) return {};
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== 'object' || parsed === null) return {};
+        return normalizeAllPlans(parsed);
+    } catch {
+        return {};
+    }
+}
+
+export function savePlans(plans) {
+    try {
+        localStorage.setItem(PLANS_STORAGE_KEY, JSON.stringify(plans));
+    } catch { /* ignore */ }
+}
+
+export function getDayPlan(plans, d) {
+    const key = dateKey(d);
+    const day = plans[key];
+    return day && typeof day === 'object' ? day : {};
+}
--- a/js/storageKeys.js
+++ b/js/storageKeys.js
@@ -0,0 +1,3 @@
+export const PLANS_STORAGE_KEY = 'recipe-planner-plans-v1';
+export const PANTRY_STORAGE_KEY = 'recipe-pantry-v1';
+export const SHOPPING_STORAGE_KEY = 'recipe-shopping-v1';
--- a/js/ui/toast.js
+++ b/js/ui/toast.js
@@ -0,0 +1,13 @@
+export function showAppToast(message) {
+    const wrap = document.getElementById('app-toast');
+    const text = document.getElementById('app-toast-text');
+    if (!wrap || !text) return;
+    text.textContent = message;
+    wrap.classList.remove('opacity-0', 'translate-y-2');
+    wrap.classList.add('opacity-100', 'translate-y-0');
+    clearTimeout(showAppToast._t);
+    showAppToast._t = setTimeout(() => {
+        wrap.classList.add('opacity-0', 'translate-y-2');
+        wrap.classList.remove('opacity-100', 'translate-y-0');
+    }, 2600);
+}
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -0,0 +1,464 @@
+import {
+    INGREDIENTS,
+    CATEGORY_LABELS,
+    pantryQtyStep,
+} from '../data/catalog.js';
+import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty } from '../services/pantryShopping.js';
+import { showAppToast } from '../ui/toast.js';
+
+/* ── helpers ── */
+
+function esc(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function unitLabel(u) {
+    return u === 'szt' ? 'szt.' : u;
+}
+
+function normalizeSearch(q) {
+    return String(q).trim().toLowerCase();
+}
+
+const CATEGORY_ICONS = {
+    pieczywo: 'fa-bread-slice',
+    nabial: 'fa-cheese',
+    mieso_ryby: 'fa-drumstick-bite',
+    warzywa: 'fa-carrot',
+    owoce: 'fa-apple-whole',
+    suche: 'fa-wheat-awn',
+    przyprawy: 'fa-leaf',
+    inne: 'fa-jar',
+};
+
+/* ── state ── */
+
+let showOnlyStock = false;
+let editingId = null;
+/** @type {Set<string>} */
+const selectedCategories = new Set();
+
+let editShopStep = 1;
+let editShopUsesPacks = false;
+
+const BOTTOM = '5.25rem';
+const HIDDEN_Y = `translateY(calc(100% + ${BOTTOM}))`;
+
+/* ══════════════════════ HTML SHELL ══════════════════════ */
+
+export function getPantryHTML() {
+    return `
+    <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
+        <div class="shrink-0 bg-white border-b border-gray-100 mt-3 px-4 pt-2 pb-2.5 space-y-2">
+            <div class="flex items-center gap-2.5 bg-gray-100 rounded-2xl px-3.5 py-2.5 focus-within:ring-2 focus-within:ring-gray-900/10 transition-all">
+                <i class="fas fa-search text-gray-400 text-xs"></i>
+                <input type="search" id="pantry-search" autocomplete="off" placeholder="Szukaj produktu…"
+                    class="flex-1 bg-transparent outline-none text-sm text-gray-800 placeholder-gray-400" />
+            </div>
+            <div id="pantry-category-chips" class="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-0.5"></div>
+            <div class="flex items-center justify-end">
+                <label class="flex items-center gap-2 cursor-pointer select-none">
+                    <span class="text-xs font-medium text-gray-500">Tylko na stanie</span>
+                    <button type="button" id="pantry-stock-toggle" role="switch" aria-checked="false"
+                        class="relative w-10 h-[22px] rounded-full bg-gray-200 transition-colors duration-200 shrink-0">
+                        <span class="absolute left-0.5 top-0.5 w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-transform duration-200"></span>
+                    </button>
+                </label>
+            </div>
+        </div>
+
+        <div id="pantry-scroll" class="flex-1 overflow-y-auto no-scrollbar">
+            <div id="pantry-board" class="px-4 pt-3 pb-4 space-y-2"></div>
+        </div>
+
+        <!-- ── product sheet ── -->
+        <div id="pv2-edit-bg" class="absolute inset-0 z-[38] bg-black/40 hidden opacity-0 transition-opacity duration-200"></div>
+        <div id="pv2-edit-sheet" class="absolute left-0 right-0 z-[40] bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.12)] px-5 pt-2 pb-4 flex flex-col gap-2.5 max-h-[75%] min-h-0 overflow-y-auto no-scrollbar"
+            style="bottom:${BOTTOM};transform:${HIDDEN_Y};transition:transform 300ms cubic-bezier(.32,.72,0,1)">
+            <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto shrink-0"></div>
+
+            <div class="shrink-0">
+                <h2 id="pv2-edit-name" class="text-[15px] font-bold text-gray-900 leading-snug"></h2>
+                <p id="pv2-edit-meta" class="text-[11px] text-gray-500"></p>
+            </div>
+
+            <div class="shrink-0 flex items-center gap-2">
+                <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Zapas</span>
+                <button type="button" id="pv2-edit-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                    <i class="fas fa-minus text-xs"></i>
+                </button>
+                <div class="flex items-baseline gap-0.5">
+                    <input type="number" id="pv2-edit-qty" min="0" step="1" inputmode="decimal"
+                        class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="0" />
+                    <span id="pv2-edit-unit" class="text-xs text-gray-400 font-medium"></span>
+                </div>
+                <button type="button" id="pv2-edit-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                    <i class="fas fa-plus text-xs"></i>
+                </button>
+            </div>
+
+            <div class="border-t border-gray-100 shrink-0"></div>
+
+            <div class="shrink-0 space-y-1">
+                <div class="flex items-center gap-2">
+                    <span class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 w-[3.2rem] shrink-0">Lista</span>
+                    <button type="button" id="pv2-shop-minus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                        <i class="fas fa-minus text-xs"></i>
+                    </button>
+                    <div class="flex items-baseline gap-0.5">
+                        <input type="number" id="pv2-shop-qty" min="1" step="1" inputmode="numeric"
+                            class="w-14 text-center text-lg font-bold tabular-nums bg-transparent outline-none" value="1" />
+                        <span id="pv2-shop-unit" class="text-xs text-gray-400 font-medium"></span>
+                    </div>
+                    <button type="button" id="pv2-shop-plus" class="w-9 h-9 rounded-xl bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center justify-center transition-colors active:scale-95 shrink-0">
+                        <i class="fas fa-plus text-xs"></i>
+                    </button>
+                    <button type="button" id="pv2-shop-add" class="ml-auto shrink-0 px-3.5 py-2 rounded-xl bg-gray-900 text-white text-[11px] font-semibold hover:bg-black transition-colors active:scale-95">
+                        <i class="fas fa-cart-plus text-[9px] mr-1"></i>Dodaj
+                    </button>
+                </div>
+                <p id="pv2-shop-hint" class="text-[10px] text-gray-400 pl-[3.5rem]"></p>
+            </div>
+
+            <div id="pv2-edit-nutrition" class="shrink-0"></div>
+        </div>
+    </div>`;
+}
+
+/* ══════════════════════ CATEGORY CHIPS (multi-select) ══════════════════════ */
+
+function allCategoryKeys() {
+    const s = new Set();
+    Object.values(INGREDIENTS).forEach(d => s.add(d.category));
+    return [...s].sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)));
+}
+
+function renderCategoryChips() {
+    const wrap = document.getElementById('pantry-category-chips');
+    if (!wrap) return;
+
+    const keys = allCategoryKeys();
+    wrap.innerHTML = keys.map(k => {
+        const active = selectedCategories.has(k);
+        const icon = CATEGORY_ICONS[k] || 'fa-jar';
+        const cls = active
+            ? 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-900 text-white transition-colors'
+            : 'shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors';
+        return `<button type="button" data-cat="${esc(k)}" class="pv2-cat-chip ${cls}"><i class="fas ${icon} text-[10px]"></i>${esc(categoryLabel(k))}</button>`;
+    }).join('');
+
+    wrap.querySelectorAll('.pv2-cat-chip').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const cat = btn.dataset.cat;
+            if (selectedCategories.has(cat)) selectedCategories.delete(cat);
+            else selectedCategories.add(cat);
+            renderCategoryChips();
+            renderBoard();
+        });
+    });
+}
+
+/* ══════════════════════ BOARD RENDERING ══════════════════════ */
+
+function getFilteredIds(searchRaw) {
+    const q = normalizeSearch(searchRaw);
+    return Object.keys(INGREDIENTS).filter(id => {
+        const d = INGREDIENTS[id];
+        if (selectedCategories.size > 0 && !selectedCategories.has(d.category)) return false;
+        if (!q) return true;
+        return d.name.toLowerCase().includes(q) || (CATEGORY_LABELS[d.category] || '').toLowerCase().includes(q);
+    }).sort((a, b) => INGREDIENTS[a].name.localeCompare(INGREDIENTS[b].name, 'pl'));
+}
+
+function chipHtml(id, pantry) {
+    const def = INGREDIENTS[id];
+    const qty = Number(pantry[id]) || 0;
+    const u = unitLabel(def.pantryUnit);
+
+    if (qty > 0) {
+        return `<button type="button" class="pv2-chip inline-flex flex-col items-start px-3.5 py-2.5 rounded-xl bg-emerald-50 border border-emerald-200/80 text-left hover:bg-emerald-100/80 transition-colors active:scale-[0.96]" data-id="${esc(id)}">
+            <span class="text-[13px] font-semibold text-gray-900 leading-tight whitespace-nowrap">${esc(def.name)}</span>
+            <span class="text-[11px] text-emerald-600 font-semibold tabular-nums leading-tight mt-0.5">${Math.round(qty)} ${esc(u)}</span>
+        </button>`;
+    }
+
+    return `<button type="button" class="pv2-chip inline-flex items-center px-3.5 py-2.5 rounded-xl border border-dashed border-gray-200 text-left hover:border-gray-300 hover:bg-white transition-colors active:scale-[0.96] group" data-id="${esc(id)}">
+        <span class="text-[13px] font-medium text-gray-400 group-hover:text-gray-600 whitespace-nowrap transition-colors">${esc(def.name)}</span>
+        <i class="fas fa-plus text-[8px] text-gray-300 group-hover:text-gray-500 ml-1.5 transition-colors"></i>
+    </button>`;
+}
+
+function groupByCategory(ids) {
+    /** @type {Map<string, string[]>} */
+    const groups = new Map();
+    for (const id of ids) {
+        const cat = INGREDIENTS[id].category;
+        if (!groups.has(cat)) groups.set(cat, []);
+        groups.get(cat).push(id);
+    }
+    return [...groups.keys()]
+        .sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)))
+        .map(cat => ({ cat, ids: groups.get(cat) }));
+}
+
+function renderBoard() {
+    const root = document.getElementById('pantry-board');
+    if (!root) return;
+
+    const q = document.getElementById('pantry-search')?.value || '';
+    const pantry = loadPantry();
+    const allFiltered = getFilteredIds(q);
+    const visible = showOnlyStock
+        ? allFiltered.filter(id => (Number(pantry[id]) || 0) > 0)
+        : allFiltered;
+
+    if (visible.length === 0) {
+        root.innerHTML = showOnlyStock
+            ? `<div class="flex flex-col items-center justify-center py-16 text-center">
+                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                    <i class="fas fa-box-open text-2xl text-gray-300"></i>
+                </div>
+                <p class="text-sm font-semibold text-gray-700">Nic na stanie</p>
+                <p class="text-xs text-gray-500 mt-1 max-w-[220px] leading-relaxed">Wyłącz filtr, aby zobaczyć cały katalog produktów</p>
+            </div>`
+            : `<p class="text-sm text-gray-500 text-center py-10">Brak wyników — zmień wyszukiwanie lub filtry.</p>`;
+        return;
+    }
+
+    const groups = groupByCategory(visible);
+    let html = '';
+    for (const { cat, ids } of groups) {
+        const icon = CATEGORY_ICONS[cat] || 'fa-jar';
+        html += `
+        <div class="mb-4 last:mb-0">
+            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-0.5">
+                <i class="fas ${icon} text-[10px] mr-1"></i>${esc(categoryLabel(cat))}
+            </p>
+            <div class="flex flex-wrap gap-2">${ids.map(id => chipHtml(id, pantry)).join('')}</div>
+        </div>`;
+    }
+
+    root.innerHTML = html;
+
+    root.querySelectorAll('.pv2-chip').forEach(btn => {
+        btn.addEventListener('click', () => openEditSheet(btn.dataset.id));
+    });
+}
+
+/* ══════════════════════ STOCK TOGGLE ══════════════════════ */
+
+function updateToggleVisuals() {
+    const btn = document.getElementById('pantry-stock-toggle');
+    if (!btn) return;
+    const thumb = btn.querySelector('span');
+    btn.setAttribute('aria-checked', String(showOnlyStock));
+    if (showOnlyStock) {
+        btn.classList.remove('bg-gray-200');
+        btn.classList.add('bg-emerald-500');
+        thumb?.classList.add('translate-x-[18px]');
+    } else {
+        btn.classList.add('bg-gray-200');
+        btn.classList.remove('bg-emerald-500');
+        thumb?.classList.remove('translate-x-[18px]');
+    }
+}
+
+/* ══════════════════════ EDIT BOTTOM SHEET ══════════════════════ */
+
+function openEditSheet(ingredientId) {
+    const def = INGREDIENTS[ingredientId];
+    if (!def) return;
+    editingId = ingredientId;
+
+    const pantry = loadPantry();
+    const qty = Number(pantry[ingredientId]) || 0;
+    const u = unitLabel(def.pantryUnit);
+    const step = pantryQtyStep(ingredientId);
+    const pack = def.purchasePack;
+
+    const nameEl = document.getElementById('pv2-edit-name');
+    if (nameEl) nameEl.textContent = def.name;
+
+    const metaEl = document.getElementById('pv2-edit-meta');
+    if (metaEl) {
+        let meta = categoryLabel(def.category);
+        if (pack) meta += ` · ${pack.label || `${pack.amount} ${u}`}`;
+        metaEl.textContent = meta;
+    }
+
+    const qtyEl = document.getElementById('pv2-edit-qty');
+    if (qtyEl) qtyEl.value = qty > 0 ? String(Math.round(qty)) : '0';
+
+    const unitEl = document.getElementById('pv2-edit-unit');
+    if (unitEl) unitEl.textContent = u;
+
+    editShopUsesPacks = Boolean(pack && pack.amount > 0);
+    editShopStep = editShopUsesPacks ? 1 : step;
+
+    const shopQtyEl = document.getElementById('pv2-shop-qty');
+    if (shopQtyEl) shopQtyEl.value = String(editShopStep);
+
+    const shopUnitEl = document.getElementById('pv2-shop-unit');
+    if (shopUnitEl) shopUnitEl.textContent = editShopUsesPacks ? 'opak.' : u;
+
+    const shopHintEl = document.getElementById('pv2-shop-hint');
+    if (shopHintEl) {
+        if (editShopUsesPacks) {
+            const lab = pack.label || `${pack.amount} ${u}`;
+            shopHintEl.textContent = `1 opak. = ${lab}`;
+        } else {
+            shopHintEl.textContent = '';
+        }
+    }
+
+    renderNutritionInSheet(def);
+
+    const bg = document.getElementById('pv2-edit-bg');
+    const sheet = document.getElementById('pv2-edit-sheet');
+    if (!bg || !sheet) return;
+    bg.classList.remove('hidden');
+    sheet.classList.remove('hidden');
+    requestAnimationFrame(() => {
+        bg.classList.remove('opacity-0');
+        sheet.style.transform = 'translateY(0)';
+    });
+}
+
+function nutritionListRow(label, valueHtml) {
+    return `<li class="flex items-baseline justify-between gap-3 py-0.5 border-b border-gray-100/80 last:border-0">
+        <span class="text-gray-500 shrink-0">${esc(label)}</span>
+        <span class="text-right font-semibold tabular-nums text-gray-800">${valueHtml}</span>
+    </li>`;
+}
+
+function renderNutritionInSheet(def) {
+    const wrap = document.getElementById('pv2-edit-nutrition');
+    if (!wrap) return;
+    const n = def.nutritionPer100g;
+    if (!n) { wrap.innerHTML = ''; return; }
+
+    const refLabel = def.pantryUnit === 'ml' ? '100 ml produktu' : '100 g produktu';
+    wrap.innerHTML = `
+    <div class="text-[10px] leading-snug mt-0.5 pt-2 border-t border-gray-100 space-y-1">
+        <p class="text-[9px] font-semibold uppercase tracking-wide text-gray-500 px-0.5">${esc(refLabel)}</p>
+        <ul class="space-y-0 rounded-lg bg-white/70 px-2 py-1 ring-1 ring-gray-100/90">
+            ${nutritionListRow('Energia', `${n.kcal} kcal`)}
+            ${nutritionListRow('Białko', `${n.protein} g`)}
+            ${nutritionListRow('Tłuszcz', `${n.fat} g`)}
+            ${nutritionListRow('Węglowodany', `${n.carbs} g`)}
+        </ul>
+    </div>`;
+}
+
+function closeEditSheet() {
+    editingId = null;
+    const bg = document.getElementById('pv2-edit-bg');
+    const sheet = document.getElementById('pv2-edit-sheet');
+    if (sheet) sheet.style.transform = HIDDEN_Y;
+    if (bg) bg.classList.add('opacity-0');
+    setTimeout(() => {
+        bg?.classList.add('hidden');
+        sheet?.classList.add('hidden');
+    }, 300);
+    renderBoard();
+}
+
+function getEditQty() {
+    const el = document.getElementById('pv2-edit-qty');
+    return Math.max(0, parseFloat(String(el?.value).replace(',', '.')) || 0);
+}
+
+function setEditQty(v) {
+    const el = document.getElementById('pv2-edit-qty');
+    if (el) el.value = String(Math.max(0, Math.round(v)));
+}
+
+function applyEditQty(newQty) {
+    if (!editingId) return;
+    const v = Math.max(0, Math.round(Number(newQty) * 1000) / 1000 || 0);
+    setPantryQty(editingId, v);
+    setEditQty(v);
+}
+
+function readShopQty() {
+    const el = document.getElementById('pv2-shop-qty');
+    return Math.max(1, Math.round(parseFloat(String(el?.value).replace(',', '.')) || 0));
+}
+
+function setShopQty(v) {
+    const el = document.getElementById('pv2-shop-qty');
+    if (el) el.value = String(Math.max(1, Math.round(Number(v))));
+}
+
+function bindEditSheet() {
+    document.getElementById('pv2-edit-bg')?.addEventListener('click', closeEditSheet);
+
+    document.getElementById('pv2-edit-minus')?.addEventListener('click', () => {
+        if (!editingId) return;
+        applyEditQty(Math.max(0, getEditQty() - pantryQtyStep(editingId)));
+    });
+
+    document.getElementById('pv2-edit-plus')?.addEventListener('click', () => {
+        if (!editingId) return;
+        applyEditQty(getEditQty() + pantryQtyStep(editingId));
+    });
+
+    document.getElementById('pv2-edit-qty')?.addEventListener('change', () => {
+        applyEditQty(getEditQty());
+    });
+
+    document.getElementById('pv2-shop-minus')?.addEventListener('click', () => {
+        setShopQty(Math.max(1, readShopQty() - editShopStep));
+    });
+
+    document.getElementById('pv2-shop-plus')?.addEventListener('click', () => {
+        setShopQty(readShopQty() + editShopStep);
+    });
+
+    document.getElementById('pv2-shop-qty')?.addEventListener('change', () => {
+        setShopQty(readShopQty());
+    });
+
+    document.getElementById('pv2-shop-add')?.addEventListener('click', () => {
+        if (!editingId) return;
+        const def = INGREDIENTS[editingId];
+        if (!def) return;
+        const count = readShopQty();
+        const u = unitLabel(def.pantryUnit);
+
+        if (editShopUsesPacks && def.purchasePack) {
+            const packAmt = def.purchasePack.amount;
+            const total = count * packAmt;
+            const note = `${count}× ${def.purchasePack.label || `${packAmt} ${u}`}`;
+            addIngredientToKitchenList(editingId, total, note);
+            showAppToast(`Dodano ${count} op. (${total} ${u}) na listę.`);
+        } else {
+            addIngredientToKitchenList(editingId, count);
+            showAppToast(`Dodano ${count} ${u} na listę.`);
+        }
+        window.refreshShopping?.();
+    });
+}
+
+/* ══════════════════════ PUBLIC API ══════════════════════ */
+
+export function refreshPantry() {
+    renderCategoryChips();
+    renderBoard();
+}
+
+export function setupPantry() {
+    renderCategoryChips();
+    renderBoard();
+    bindEditSheet();
+
+    document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
+
+    document.getElementById('pantry-stock-toggle')?.addEventListener('click', () => {
+        showOnlyStock = !showOnlyStock;
+        updateToggleVisuals();
+        renderBoard();
+    });
+
+    window.refreshPantry = refreshPantry;
+}
--- a/js/views/RecipeDetail.js
+++ b/js/views/RecipeDetail.js
@@ -2,144 +2,142 @@ export function getRecipeDetailHTML() {
    return `
    <div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
        
-        <div class="absolute top-0 w-full p-4 flex justify-between z-40 mt-4">
-            <button onclick="closeRecipeDetail()" class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
-                <i class="fas fa-arrow-left"></i>
+        <div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
+            <button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
+                <i class="fas fa-arrow-left text-[13px]"></i>
            </button>
-            <button class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
-                <i class="far fa-heart"></i>
+            <button class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
+                <i class="far fa-heart text-[13px]"></i>
            </button>
        </div>

-        <div class="h-[260px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
-            <span class="text-white font-medium text-lg">Zdjęcie: Serek z owocami</span>
+        <div class="h-[220px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
+            <span class="text-white font-medium text-[15px]">Zdjęcie: Serek z owocami</span>
        </div>

-        <div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-8 flex flex-col flex-1 overflow-hidden">
+        <div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
            
-            <div class="mb-4 px-6 shrink-0">
-                <div class="flex justify-between items-start mb-3">
-                    <h1 class="text-2xl font-bold text-gray-900">Serek wiejski z orzechami i owocami</h1>
+            <div class="mb-3 px-5 shrink-0">
+                <div class="flex justify-between items-start mb-2.5">
+                    <h1 class="text-xl font-bold text-gray-900">Serek wiejski z orzechami i owocami</h1>
                </div>
                
-                <div class="flex flex-wrap gap-2 mb-4">
-                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Śniadanie</span>
-                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Wegetariańskie</span>
-                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Słodkie</span>
+                <div class="flex flex-wrap gap-1.5 mb-3">
+                    <span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Śniadanie</span>
+                    <span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Wegetariańskie</span>
+                    <span class="px-2.5 py-0.5 bg-gray-100 text-gray-700 text-[11px] rounded-md font-medium">Słodkie</span>
                </div>
                
-                <div class="flex justify-between items-center text-sm text-gray-600 font-medium">
-                    <div class="flex gap-4">
-                        <div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400"></i><span>5 min</span></div>
-                        <div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400"></i><span>642 kcal</span></div>
+                <div class="flex justify-between items-center text-[13px] text-gray-600 font-medium">
+                    <div class="flex gap-3.5">
+                        <div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400 text-xs"></i><span>5 min</span></div>
+                        <div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400 text-xs"></i><span>642 kcal</span></div>
                    </div>
                    
-                    <div class="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
-                        <button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[10px]"></i></button>
-                        <div class="flex items-center gap-1 px-2">
-                            <span id="servings-count" class="font-bold text-gray-900 text-sm w-3 text-center">1</span>
-                            <span class="text-xs text-gray-500"><i class="fas fa-user-friends"></i></span>
+                    <div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
+                        <button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
+                        <div class="flex items-center gap-1 px-1.5">
+                            <span id="servings-count" class="font-bold text-gray-900 text-[13px] w-3 text-center tabular-nums">1</span>
+                            <span class="text-[11px] text-gray-500"><i class="fas fa-user-friends"></i></span>
                        </div>
-                        <button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[10px]"></i></button>
+                        <button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
                    </div>
                </div>
            </div>

-            <div class="flex border-b border-gray-200 mb-2 px-6 shrink-0">
-                <button class="flex-1 pb-3 text-sm font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Składniki</button>
-                <button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Kroki</button>
-                <button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Wartości</button>
+            <div class="flex border-b border-gray-200 mb-2 px-5 shrink-0">
+                <button class="flex-1 pb-2.5 text-[13px] font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Składniki</button>
+                <button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Kroki</button>
+                <button class="flex-1 pb-2.5 text-[13px] font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Wartości</button>
            </div>

-            <div class="flex-1 overflow-y-auto px-6 pt-2 pb-10 no-scrollbar relative">
+            <div class="flex-1 overflow-y-auto px-5 pt-2 pb-10 no-scrollbar relative">
                
                <div id="tab-ingredients" class="tab-content block animate-fade-in">
-                    <div class="flex justify-between items-end mb-4">
-                        <span class="text-xs text-gray-500 font-medium">Zaznacz, by dodać do listy zakupów</span>
+                    <div class="flex justify-between items-end mb-3">
+                        <span class="text-[11px] text-gray-500 font-medium">Zaznacz, by dodać do listy zakupów</span>
                    </div>

-                    <ul class="space-y-0 mb-6" id="ingredient-list">
-                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
+                    <ul class="space-y-0 mb-5" id="ingredient-list">
+                        <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" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
-                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Serek wiejski</span>
-                            <span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="200" data-unit="g">200 g</span>
+                            <span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors">Serek wiejski</span>
+                            <span class="font-medium text-gray-900 text-[13px] ingredient-amount tabular-nums" data-base-amount="200" data-unit="g">200 g</span>
                        </li>
                        
-                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
+                        <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" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
-                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Miód</span>
-                            <span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="10" data-unit="g">10 g</span>
+                            <span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors">Miód</span>
+                            <span class="font-medium text-gray-900 text-[13px] ingredient-amount tabular-nums" data-base-amount="10" data-unit="g">10 g</span>
                        </li>

-                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
+                        <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" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
-                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-orzechy">Orzechy włoskie</span>
-                            <div class="flex items-center gap-3">
-                                <button onclick="event.stopPropagation(); openSwapModal('orzechy')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
-                                    <i class="fas fa-exchange-alt text-[10px]"></i>
+                            <span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-orzechy">Orzechy włoskie</span>
+                            <div class="flex items-center gap-2.5">
+                                <button onclick="event.stopPropagation(); openSwapModal('orzechy')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
+                                    <i class="fas fa-exchange-alt text-[9px]"></i>
                                </button>
-                                <span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="50" data-unit="g">50 g</span>
+                                <span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="50" data-unit="g">50 g</span>
                            </div>
                        </li>

-                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
+                        <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" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
-                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce1">Truskawki</span>
-                            <div class="flex items-center gap-3">
-                                <button onclick="event.stopPropagation(); openSwapModal('owoce1')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
-                                    <i class="fas fa-exchange-alt text-[10px]"></i>
+                            <span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce1">Truskawki</span>
+                            <div class="flex items-center gap-2.5">
+                                <button onclick="event.stopPropagation(); openSwapModal('owoce1')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
+                                    <i class="fas fa-exchange-alt text-[9px]"></i>
                                </button>
-                                <span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="100" data-unit="g">100 g</span>
+                                <span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="100" data-unit="g">100 g</span>
                            </div>
                        </li>

-                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
+                        <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" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
-                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce2">Borówki ameryk.</span>
-                            <div class="flex items-center gap-3">
-                                <button onclick="event.stopPropagation(); openSwapModal('owoce2')" class="w-7 h-7 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
-                                    <i class="fas fa-exchange-alt text-[10px]"></i>
+                            <span class="text-gray-700 text-[13px] flex-1 ingredient-text transition-colors font-medium text-gray-900" id="ingredient-owoce2">Borówki ameryk.</span>
+                            <div class="flex items-center gap-2.5">
+                                <button onclick="event.stopPropagation(); openSwapModal('owoce2')" class="w-6 h-6 flex items-center justify-center rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors shadow-sm" title="Zamień">
+                                    <i class="fas fa-exchange-alt text-[9px]"></i>
                                </button>
-                                <span class="font-medium text-gray-900 text-sm ingredient-amount w-10 text-right" data-base-amount="100" data-unit="g">100 g</span>
+                                <span class="font-medium text-gray-900 text-[13px] ingredient-amount w-10 text-right tabular-nums" data-base-amount="100" data-unit="g">100 g</span>
                            </div>
                        </li>
                    </ul>
                    
-                    <button class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm flex items-center justify-center gap-2 mb-6">
-                        <i class="fas fa-plus"></i> Dodaj do listy zakupów
+                    <button 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>
                </div>

                <div id="tab-steps" class="tab-content hidden animate-fade-in">
-                    <div class="space-y-6 pb-6">
-                        <div class="flex gap-4">
-                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">1</div>
-                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Przełóż serek wiejski do miseczki.</p></div>
+                    <div class="space-y-5 pb-5">
+                        <div class="flex gap-3">
+                            <div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">1</div>
+                            <div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Przełóż serek wiejski do miseczki.</p></div>
                        </div>
-                        <div class="flex gap-4">
-                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">2</div>
-                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Dodaj miód i delikatnie wymieszaj.</p></div>
+                        <div class="flex gap-3">
+                            <div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">2</div>
+                            <div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Dodaj miód i delikatnie wymieszaj.</p></div>
                        </div>
-                        <div class="flex gap-4">
-                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">3</div>
-                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Orzechy posiekaj na mniejsze kawałki i posyp nimi serek z miodem.</p></div>
+                        <div class="flex gap-3">
+                            <div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">3</div>
+                            <div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Orzechy posiekaj na mniejsze kawałki i posyp nimi serek z miodem.</p></div>
                        </div>
-                        <div class="flex gap-4">
-                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">4</div>
-                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Umyj owoce (ew. pokrój na połówki) i ułóż na wierzchu. Gotowe!</p></div>
+                        <div class="flex gap-3">
+                            <div class="w-6 h-6 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] font-bold shrink-0 shadow-sm">4</div>
+                            <div class="pt-0.5"><p class="text-[13px] text-gray-600 leading-relaxed">Umyj owoce (ew. pokrój na połówki) i ułóż na wierzchu. Gotowe!</p></div>
                        </div>
                    </div>
                </div>

                <div id="tab-nutrition" class="tab-content hidden animate-fade-in">
-                    <div class="bg-gray-50 rounded-xl p-5 border border-gray-100 mb-6">
-                        <h3 class="font-bold text-gray-900 border-b border-gray-200 pb-2 mb-2 text-lg">Wartości odżywcze</h3>
-                        <p class="text-xs text-gray-500 mb-4">Dla bazowej porcji (1 porcja)</p>
+                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-100 mb-5">
                        <ul class="space-y-0 divide-y divide-gray-200">
-                            <li class="flex justify-between py-2.5 font-bold"><span class="text-gray-900 text-sm">Kalorie</span><span class="text-gray-900 text-sm">642 kcal</span></li>
-                            <li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Białko</span><span class="font-medium text-gray-900 text-sm">32 g</span></li>
-                            <li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Tłuszcze</span><span class="font-medium text-gray-900 text-sm">43 g</span></li>
-                            <li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Węglowodany</span><span class="font-medium text-gray-900 text-sm">41 g</span></li>
+                            <li class="flex justify-between py-2 font-bold"><span class="text-gray-900 text-[13px]">Kalorie</span><span class="text-gray-900 text-[13px] tabular-nums">642 kcal</span></li>
+                            <li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Białko</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">32 g</span></li>
+                            <li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Tłuszcze</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">43 g</span></li>
+                            <li class="flex justify-between py-2"><span class="text-gray-800 text-[13px] font-medium">Węglowodany</span><span class="font-medium text-gray-900 text-[13px] tabular-nums">41 g</span></li>
                        </ul>
                    </div>
                </div>
@@ -149,11 +147,11 @@ export function getRecipeDetailHTML() {

        <div id="swap-backdrop" onclick="closeSwapModal()" class="absolute inset-0 bg-black/40 z-40 hidden opacity-0 transition-opacity duration-300"></div>
        
-        <div id="swap-modal" class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)] z-50 transform translate-y-full transition-transform duration-300 ease-in-out p-6 flex flex-col max-h-[60%]">
-            <div class="flex justify-between items-center mb-5 shrink-0">
-                <h3 class="text-xl font-bold text-gray-900">Zmień <span id="swap-title-target" class="text-blue-600">składnik</span></h3>
-                <button onclick="closeSwapModal()" class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 transition-colors">
-                    <i class="fas fa-times text-sm"></i>
+        <div id="swap-modal" class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)] z-50 transform translate-y-full transition-transform duration-300 ease-in-out p-5 flex flex-col max-h-[60%]">
+            <div class="flex justify-between items-center mb-4 shrink-0">
+                <h3 class="text-[15px] font-bold text-gray-900">Zmień <span id="swap-title-target" class="text-blue-600">składnik</span></h3>
+                <button onclick="closeSwapModal()" class="w-7 h-7 flex items-center justify-center bg-gray-100 rounded-full text-gray-500 hover:bg-gray-200 hover:text-gray-900 transition-colors">
+                    <i class="fas fa-times text-xs"></i>
                </button>
            </div>
            
@@ -253,9 +251,9 @@ export function setupRecipeDetail() {
            if (opt.color === 'green') badgeClass = 'text-green-600 bg-green-100';

            return `
-            <button onclick="confirmSwap('${opt.name}')" class="w-full flex justify-between items-center p-4 border border-gray-200 rounded-xl hover:border-gray-900 hover:shadow-sm transition-all bg-gray-50 hover:bg-white text-left">
-                <span class="font-medium text-gray-800">${opt.name}</span>
-                <span class="text-[11px] px-2 py-1 rounded-md font-semibold ${badgeClass}">${opt.hint}</span>
+            <button onclick="confirmSwap('${opt.name}')" class="w-full flex justify-between items-center p-3 border border-gray-200 rounded-xl hover:border-gray-900 hover:shadow-sm transition-all bg-gray-50 hover:bg-white text-left">
+                <span class="font-medium text-[13px] text-gray-800">${opt.name}</span>
+                <span class="text-[10px] px-2 py-0.5 rounded-md font-semibold ${badgeClass}">${opt.hint}</span>
            </button>
            `;
        }).join('');
--- a/js/views/Shopping.js
+++ b/js/views/Shopping.js
@@ -0,0 +1,237 @@
+import {
+    addFreeformLine,
+    addFreeformList,
+    categoryLabel,
+    deleteList,
+    getActiveList,
+    getListSummaries,
+    KITCHEN_LIST_ID,
+    removeItemFromList,
+    setActiveListId,
+    toggleItemInList,
+} from '../services/pantryShopping.js';
+import { showAppToast } from '../ui/toast.js';
+
+function escapeHtml(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+export function getShoppingHTML() {
+    return `
+    <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
+        <div class="shrink-0 bg-white border-b border-gray-200 mt-3 px-4 pt-2 pb-3 space-y-3">
+            <div class="flex gap-2 items-center">
+                <label class="sr-only" for="shopping-list-select">Aktywna lista</label>
+                <select id="shopping-list-select" class="flex-1 min-w-0 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5 text-sm font-medium text-gray-900 outline-none focus:border-gray-400"></select>
+                <button type="button" id="shopping-new-list" class="shrink-0 w-10 h-10 rounded-xl border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 flex items-center justify-center" title="Nowa lista dowolna" aria-label="Nowa lista dowolna">
+                    <i class="fas fa-plus text-sm"></i>
+                </button>
+            </div>
+            <button type="button" id="shopping-delete-list" class="hidden w-full py-2 rounded-lg text-xs font-medium text-red-600 hover:bg-red-50 transition-colors">
+                Usuń tę listę (nie dotyczy listy kuchennej)
+            </button>
+        </div>
+
+        <div id="shopping-freeform-add" class="hidden shrink-0 px-4 pt-3 pb-2 space-y-2 border-b border-gray-100">
+            <div class="flex gap-2">
+                <input type="text" id="shopping-freeform-input" class="flex-1 rounded-xl border border-gray-200 px-3 py-2.5 text-sm outline-none focus:border-gray-400" placeholder="Co kupić?" maxlength="200" />
+                <button type="button" id="shopping-freeform-submit" class="shrink-0 px-4 py-2.5 rounded-xl bg-gray-900 text-white text-xs font-semibold hover:bg-black">Dodaj</button>
+            </div>
+            <input type="text" id="shopping-freeform-note" class="w-full rounded-lg border border-gray-100 px-3 py-2 text-xs text-gray-600 outline-none focus:border-gray-300" placeholder="Opcjonalna notatka (ilość, sklep…)" maxlength="120" />
+        </div>
+
+        <div id="shopping-scroll" class="flex-1 overflow-y-auto px-4 py-3 pb-4 no-scrollbar">
+            <div id="shopping-list-root" class="space-y-4"></div>
+        </div>
+    </div>
+    `;
+}
+
+function syncListSelect() {
+    const sel = document.getElementById('shopping-list-select');
+    if (!sel) return;
+    const { lists, activeListId } = getListSummaries();
+    sel.innerHTML = lists.map((l) => {
+        const suffix = l.openCount ? ` (${l.openCount})` : '';
+        const label = `${l.name}${suffix}`;
+        return `<option value="${escapeHtml(l.id)}">${escapeHtml(label)}</option>`;
+    }).join('');
+    sel.value = activeListId;
+}
+
+function syncChromeForList() {
+    const list = getActiveList();
+    const isKitchen = list.type === 'kitchen';
+    const delBtn = document.getElementById('shopping-delete-list');
+    const ffAdd = document.getElementById('shopping-freeform-add');
+
+    if (ffAdd) ffAdd.classList.toggle('hidden', isKitchen);
+
+    if (delBtn) {
+        delBtn.classList.toggle('hidden', isKitchen);
+    }
+}
+
+function renderKitchenItems() {
+    const root = document.getElementById('shopping-list-root');
+    if (!root) return;
+
+    const list = getActiveList();
+    if (list.type !== 'kitchen') return;
+
+    const items = list.items;
+    if (items.length === 0) {
+        root.innerHTML = '<p class="text-sm text-gray-500 text-center py-10">Brak pozycji.</p>';
+        return;
+    }
+
+    const groups = {};
+    for (const it of items) {
+        const c = it.category || 'inne';
+        if (!groups[c]) groups[c] = [];
+        groups[c].push(it);
+    }
+
+    root.innerHTML = Object.keys(groups)
+        .sort((a, b) => categoryLabel(a).localeCompare(categoryLabel(b)))
+        .map((cat) => `
+            <div class="rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm">
+                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wide px-3 py-2 bg-gray-50 border-b border-gray-100">${escapeHtml(categoryLabel(cat))}</p>
+                <ul class="divide-y divide-gray-100">
+                    ${groups[cat].map((it) => `
+                    <li class="flex items-start gap-3 px-3 py-3 ${it.checked ? 'opacity-60' : ''}">
+                        <button type="button" data-shop-toggle="${escapeHtml(it.id)}" class="mt-0.5 w-5 h-5 rounded border shrink-0 flex items-center justify-center transition-colors ${it.checked ? 'bg-gray-900 border-gray-900 text-white' : 'border-gray-300 bg-white'}" aria-label="Kupione">
+                            ${it.checked ? '<i class="fas fa-check text-[10px]"></i>' : ''}
+                        </button>
+                        <div class="min-w-0 flex-1">
+                            <p class="text-sm font-medium text-gray-900 ${it.checked ? 'line-through text-gray-500' : ''}">${escapeHtml(it.name)}</p>
+                            <p class="text-xs text-gray-600 tabular-nums mt-0.5">${escapeHtml(String(it.amount))} ${escapeHtml(it.unit)}</p>
+                            ${it.sourceNote ? `<p class="text-[10px] text-gray-400 mt-1">${escapeHtml(it.sourceNote)}</p>` : ''}
+                        </div>
+                        <button type="button" data-shop-remove="${escapeHtml(it.id)}" class="shrink-0 w-8 h-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors" aria-label="Usuń">
+                            <i class="fas fa-times text-xs"></i>
+                        </button>
+                    </li>`).join('')}
+                </ul>
+            </div>
+        `)
+        .join('');
+
+    bindItemButtons(list.id);
+}
+
+function renderFreeformItems() {
+    const root = document.getElementById('shopping-list-root');
+    if (!root) return;
+
+    const list = getActiveList();
+    if (list.type !== 'freeform') return;
+
+    const items = list.items;
+    if (items.length === 0) {
+        root.innerHTML = '<p class="text-sm text-gray-500 text-center py-10">Dodaj dowolny tekst powyżej — bez powiązania z katalogiem składników.</p>';
+        return;
+    }
+
+    root.innerHTML = `
+        <div class="rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm">
+            <ul class="divide-y divide-gray-100">
+                ${items.map((it) => `
+                <li class="flex items-start gap-3 px-3 py-3 ${it.checked ? 'opacity-60' : ''}">
+                    <button type="button" data-shop-toggle="${escapeHtml(it.id)}" class="mt-0.5 w-5 h-5 rounded border shrink-0 flex items-center justify-center transition-colors ${it.checked ? 'bg-gray-900 border-gray-900 text-white' : 'border-gray-300 bg-white'}">
+                        ${it.checked ? '<i class="fas fa-check text-[10px]"></i>' : ''}
+                    </button>
+                    <div class="min-w-0 flex-1">
+                        <p class="text-sm font-medium text-gray-900 ${it.checked ? 'line-through text-gray-500' : ''}">${escapeHtml(it.text)}</p>
+                        ${it.note ? `<p class="text-xs text-gray-500 mt-1">${escapeHtml(it.note)}</p>` : ''}
+                    </div>
+                    <button type="button" data-shop-remove="${escapeHtml(it.id)}" class="shrink-0 w-8 h-8 rounded-full text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors" aria-label="Usuń">
+                        <i class="fas fa-times text-xs"></i>
+                    </button>
+                </li>`).join('')}
+            </ul>
+        </div>`;
+
+    bindItemButtons(list.id);
+}
+
+function bindItemButtons(listId) {
+    const root = document.getElementById('shopping-list-root');
+    if (!root) return;
+
+    root.querySelectorAll('[data-shop-toggle]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const id = btn.getAttribute('data-shop-toggle');
+            if (id) toggleItemInList(listId, id);
+            refreshShopping();
+        });
+    });
+    root.querySelectorAll('[data-shop-remove]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+            const id = btn.getAttribute('data-shop-remove');
+            if (id) removeItemFromList(listId, id);
+            refreshShopping();
+        });
+    });
+}
+
+export function refreshShopping() {
+    syncListSelect();
+    syncChromeForList();
+    const list = getActiveList();
+    if (list.type === 'kitchen') renderKitchenItems();
+    else renderFreeformItems();
+}
+
+export function setupShopping() {
+    const sel = document.getElementById('shopping-list-select');
+    sel?.addEventListener('change', () => {
+        const v = sel.value;
+        if (v) setActiveListId(v);
+        refreshShopping();
+    });
+
+    document.getElementById('shopping-new-list')?.addEventListener('click', () => {
+        const name = window.prompt('Nazwa nowej listy (dowolne zakupy):', 'Nowa lista');
+        if (name === null) return;
+        addFreeformList(name);
+        showAppToast('Utworzono listę.');
+        refreshShopping();
+    });
+
+    document.getElementById('shopping-delete-list')?.addEventListener('click', () => {
+        const list = getActiveList();
+        if (list.id === KITCHEN_LIST_ID) return;
+        if (!window.confirm(`Usunąć listę „${list.name}”?`)) return;
+        deleteList(list.id);
+        showAppToast('Lista usunięta.');
+        refreshShopping();
+    });
+
+    const submitFreeform = () => {
+        const list = getActiveList();
+        if (list.type !== 'freeform') return;
+        const input = document.getElementById('shopping-freeform-input');
+        const note = document.getElementById('shopping-freeform-note');
+        const text = input?.value || '';
+        addFreeformLine(list.id, text, note?.value || '');
+        if (input) input.value = '';
+        if (note) note.value = '';
+        refreshShopping();
+    };
+
+    document.getElementById('shopping-freeform-submit')?.addEventListener('click', submitFreeform);
+    document.getElementById('shopping-freeform-input')?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            submitFreeform();
+        }
+    });
+
+    refreshShopping();
+    window.refreshShopping = refreshShopping;
+}
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@@ -0,0 +1,31 @@
+{
+  "name": "Recipe App",
+  "short_name": "Recipe",
+  "description": "Plan posiłków, spiżarnia i zakupy",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#f3f4f6",
+  "theme_color": "#111827",
+  "lang": "pl",
+  "icons": [
+    {
+      "src": "./icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "./icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Do not store responses in browser or shared caches (Cloudflare, etc. respect unless overridden)
+    add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+    add_header Pragma "no-cache" always;
+
+    location = /manifest.webmanifest {
+        default_type application/manifest+json;
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+    }
+
+    location = /sw.js {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/sw.js
+++ b/sw.js
@@ -0,0 +1,13 @@
+/* Minimal service worker — wymagany m.in. przez Chrome, żeby pokazać „Zainstaluj aplikację”.
+   Sieć zawsze na pierwszym miejscu (bez cache’u zasobów). */
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(fetch(event.request));
+});