Floating menu and search bar

index.html

@@ -8,7 +8,7 @@
     <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?v=20260406-27">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260406-42">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -278,20 +278,45 @@
             pointer-events: none;
         }
         #recipe-search-shell {
-            min-height: 2.75rem;
+            min-height: 3rem;
-            border-radius: 1.5rem;
+            width: min(calc(100% - 0.5rem), 22.4rem);
-            background: #3a3b38 !important;
+            margin-inline: auto;
-            border: 1px solid rgba(79, 81, 76, 0.95) !important;
+            position: relative;
+            z-index: 0;
+            isolation: isolate;
+            border-radius: 999px;
+            background: #393937 !important;
+            border: 1px solid #41423f !important;
             box-shadow:
-                inset 0 1px 0 rgba(255, 255, 255, 0.045),
+                0 5px 10px rgba(0, 0, 0, 0.16),
-                0 0 0 1px rgba(255, 255, 255, 0.015) !important;
+                0 14px 22px rgba(0, 0, 0, 0.24),
+                0 22px 34px rgba(0, 0, 0, 0.18),
+                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+        }
+        #recipe-search-shell::after {
+            content: '';
+            position: absolute;
+            left: 11%;
+            right: 11%;
+            bottom: -0.72rem;
+            height: 1.05rem;
+            border-radius: 999px;
+            background: rgba(0, 0, 0, 0.36);
+            filter: blur(12px);
+            opacity: 0.9;
+            z-index: -1;
+            pointer-events: none;
         }
         #recipe-search-shell:focus-within {
-            background: #3a3b38 !important;
+            background: #393937 !important;
-            border: 1px solid rgba(92, 94, 88, 0.98) !important;
+            border: 1px solid #4a4b47 !important;
             box-shadow:
-                inset 0 1px 0 rgba(255, 255, 255, 0.05),
+                0 6px 12px rgba(0, 0, 0, 0.18),
-                0 0 0 1px rgba(255, 255, 255, 0.02) !important;
+                0 16px 24px rgba(0, 0, 0, 0.24),
+                0 24px 36px rgba(0, 0, 0, 0.18),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
         }
         #recipe-search-input {
             appearance: none;
@@ -346,6 +371,128 @@
             backdrop-filter: blur(10px);
         }
 
+        /* Bottom dock */
+        #app-bottom-nav {
+            position: absolute;
+            inset-inline: 0;
+            bottom: 0;
+            z-index: 30;
+            display: flex;
+            justify-content: center;
+            padding: 0 0.85rem calc(1.12rem + env(safe-area-inset-bottom));
+            pointer-events: none;
+        }
+        #app-bottom-nav .bottom-dock {
+            position: relative;
+            z-index: 0;
+            isolation: isolate;
+            width: min(calc(100% - 2rem), 22.4rem);
+            min-height: 3.7rem;
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            align-items: center;
+            gap: 0.1rem;
+            padding: 0.35rem 0.45rem;
+            border-radius: 999px;
+            background: #393937;
+            border: 1px solid #41423f;
+            box-shadow:
+                0 5px 10px rgba(0, 0, 0, 0.16),
+                0 14px 22px rgba(0, 0, 0, 0.24),
+                0 22px 34px rgba(0, 0, 0, 0.18),
+                inset 0 1px 0 rgba(255, 255, 255, 0.04);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            pointer-events: auto;
+        }
+        #app-bottom-nav .bottom-dock::after {
+            content: '';
+            position: absolute;
+            left: 11%;
+            right: 11%;
+            bottom: -0.72rem;
+            height: 1.05rem;
+            border-radius: 999px;
+            background: rgba(0, 0, 0, 0.36);
+            filter: blur(12px);
+            opacity: 0.9;
+            z-index: -1;
+            pointer-events: none;
+        }
+        #app-bottom-nav .nav-tab,
+        #app-bottom-nav .nav-action {
+            appearance: none;
+            -webkit-appearance: none;
+            border: 0;
+            background: transparent !important;
+            box-shadow: none !important;
+            width: 2.55rem;
+            height: 2.55rem;
+            margin: 0;
+            padding: 0;
+            border-radius: 999px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            justify-self: center;
+            color: #ece8e0;
+            cursor: pointer;
+            transition:
+                transform 160ms ease,
+                color 160ms ease,
+                background-color 160ms ease,
+                box-shadow 180ms ease;
+        }
+        #app-bottom-nav .nav-tab i,
+        #app-bottom-nav .nav-action i {
+            font-size: 0.95rem;
+            line-height: 1;
+        }
+        #app-bottom-nav .nav-tab:hover,
+        #app-bottom-nav .nav-action:hover {
+            transform: translateY(-1px);
+            color: #ffffff;
+            background: rgba(255, 255, 255, 0.04) !important;
+        }
+        #app-bottom-nav .nav-tab.is-active {
+            width: 2.95rem;
+            height: 2.95rem;
+            color: #fff;
+            background: #2d2e2b !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.04),
+                0 10px 20px rgba(0, 0, 0, 0.24) !important;
+        }
+        #app-bottom-nav .nav-tab:active,
+        #app-bottom-nav .nav-action:active {
+            transform: scale(0.97);
+        }
+        #app-bottom-nav button:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 3px rgba(255, 255, 255, 0.08),
+                0 0 0 6px rgba(var(--accent-rgb), 0.26) !important;
+        }
+        @media (max-width: 380px) {
+            #app-bottom-nav {
+                padding-inline: 0.7rem;
+            }
+            #app-bottom-nav .bottom-dock {
+                width: min(calc(100% - 1.4rem), 21.6rem);
+                min-height: 3.45rem;
+                padding-inline: 0.35rem;
+            }
+            #app-bottom-nav .nav-tab,
+            #app-bottom-nav .nav-action {
+                width: 2.35rem;
+                height: 2.35rem;
+            }
+            #app-bottom-nav .nav-tab.is-active {
+                width: 2.75rem;
+                height: 2.75rem;
+            }
+        }
+
         /* Planner and common interactive surfaces */
         #planner-open-ingredients,
         .planner-pick-recipe,
@@ -381,7 +528,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260406-29';
+        const APP_ASSET_VERSION = '20260406-42';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -415,7 +562,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-29';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260406-42';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {

js/app.js

@@ -50,27 +50,33 @@ function getAppToastHTML() {
 function getBottomNavHTML() {
     const isDark = document.documentElement.classList.contains('dark');
     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-1 py-2.5 pb-6 z-20 gap-0" aria-label="Główna nawigacja">
+    <nav id="app-bottom-nav" 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]">
+        <div class="bottom-dock">
-            <i class="fas fa-book text-base" aria-hidden="true"></i>
+        <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
-            <span class="text-[9px] font-medium leading-tight text-center">Przepisy</span>
+            <i class="fas fa-book" aria-hidden="true"></i>
         </button>
-        <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]">
+        <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
-            <i class="far fa-calendar-alt text-base" aria-hidden="true"></i>
+            <i class="far fa-calendar-alt" aria-hidden="true"></i>
-            <span class="text-[9px] font-medium leading-tight text-center">Planer</span>
         </button>
-        <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]">
+        <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
-            <i class="fas fa-warehouse text-base" aria-hidden="true"></i>
+            <i class="fas fa-warehouse" aria-hidden="true"></i>
-            <span class="text-[9px] font-medium leading-tight text-center">Spiżarnia</span>
         </button>
-        <button type="button" id="nav-theme-toggle" class="flex flex-col items-center gap-0.5 text-gray-500 hover:text-gray-700 flex-1 min-w-0 max-w-[5.5rem]" aria-label="Przełącz tryb ciemny/jasny">
+        <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
-            <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'} text-base" aria-hidden="true"></i>
+            <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
-            <span class="text-[9px] font-medium leading-tight text-center">${isDark ? 'Jasny' : 'Ciemny'}</span>
         </button>
+        </div>
     </nav>
     `;
 }
 
+function syncThemeToggleButton(btn, isDark) {
+    if (!btn) return;
+    const icon = btn.querySelector('i');
+    if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
+    btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
+    btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
+}
+
 function setupThemeToggle() {
     const btn = document.getElementById('nav-theme-toggle');
     if (!btn) return;
@@ -80,10 +86,7 @@ function setupThemeToggle() {
         const isDark = html.classList.toggle('dark');
         localStorage.setItem('theme', isDark ? 'dark' : 'light');
 
-        const icon = btn.querySelector('i');
+        syncThemeToggleButton(btn, isDark);
-        const label = btn.querySelector('span');
-        if (icon) icon.className = isDark ? 'fas fa-sun text-base' : 'fas fa-moon text-base';
-        if (label) label.textContent = isDark ? 'Jasny' : 'Ciemny';
 
         const meta = document.querySelector('meta[name="theme-color"]');
         if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
@@ -97,9 +100,6 @@ function setupTabs() {
     const nav = document.getElementById('app-bottom-nav');
     if (!main || !planner || !pantry || !nav) return;
 
-    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) => {
         main.classList.toggle('hidden', tab !== 'recipes');
         planner.classList.toggle('hidden', tab !== 'planner');
@@ -111,7 +111,10 @@ function setupTabs() {
             const id = btn.getAttribute('data-tab');
             if (btn.hasAttribute('disabled')) return;
             if (id === 'recipes' || id === 'planner' || id === 'pantry') {
-                btn.className = id === tab ? activeTab : idleTab;
+                const isActive = id === tab;
+                btn.classList.toggle('is-active', isActive);
+                if (isActive) btn.setAttribute('aria-current', 'page');
+                else btn.removeAttribute('aria-current');
             }
         });
     };

js/views/RecipeList.js

@@ -13,8 +13,7 @@ const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 const DEFAULT_MIN_MINUTES = 5;
 const DEFAULT_MAX_MINUTES = 120;
 const SEARCH_SHELL_BASE_SHADOW =
-    'inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0 1px rgba(255,255,255,0.015)';
+    '0 5px 10px rgba(0,0,0,0.16), 0 14px 22px rgba(0,0,0,0.24), 0 22px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04)';
-const SEARCH_HEADER_SCROLLED_SHADOW = '0 10px 16px rgba(0,0,0,0.34)';
 
 function slotLabelsFor(recipe) {
     return (recipe.allowedSlots || [])
@@ -84,21 +83,14 @@ function renderRecipeCard(recipe) {
 
 function syncRecipeScrollShadow() {
     const scroll = document.getElementById('recipe-scroll');
-    const shadow = document.getElementById('recipe-top-bar-shadow');
-    const header = document.getElementById('recipe-top-bar');
     const searchShell = document.getElementById('recipe-search-shell');
-    if (!shadow || !header || !searchShell) return;
+    if (!searchShell) return;
 
     if (!scroll) {
-        shadow.style.opacity = '0';
-        header.style.boxShadow = 'none';
         searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
         return;
     }
 
-    const isScrolled = scroll.scrollTop > 6;
-    shadow.style.opacity = isScrolled ? '1' : '0';
-    header.style.boxShadow = isScrolled ? SEARCH_HEADER_SCROLLED_SHADOW : 'none';
     searchShell.style.boxShadow = SEARCH_SHELL_BASE_SHADOW;
 }
 
@@ -127,17 +119,16 @@ function renderGrid() {
 export function getRecipeListHTML() {
     return `
     <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
-        <div id="recipe-top-bar" class="relative z-[2] px-4 pt-3 pb-4 mt-2" style="background:#2d2e2b !important; border:none !important; transition:box-shadow 180ms ease;">
+        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
-            <div id="recipe-search-shell" class="relative z-[1] flex items-center w-full overflow-hidden" style="background:#3a3b38 !important; border:1px solid rgba(79,81,76,0.95) !important; border-radius:1.5rem !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
+            <div id="recipe-search-shell" class="pointer-events-auto relative z-[1] mx-auto flex items-center w-full overflow-hidden" style="width:min(calc(100% - 0.5rem), 22.4rem); background:#393937 !important; border:1px solid #41423f !important; border-radius:999px !important; box-shadow:${SEARCH_SHELL_BASE_SHADOW} !important; transition:box-shadow 180ms ease;">
                 <input type="text" id="recipe-search-input" placeholder="Szukaj przepisów..." class="w-full bg-transparent outline-none text-[15px] text-center py-[12px] pl-8 pr-14" style="background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important;">
                 <button id="recipe-filter-btn" onclick="openFilters()" class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 text-[#c9c3b8] hover:text-[#f0e8dc] flex items-center justify-center transition-colors" style="background:transparent !important; border:none !important; box-shadow:none !important;" aria-label="Otwórz filtry">
                     <i class="fas fa-sliders-h"></i>
                 </button>
             </div>
-            <div id="recipe-top-bar-shadow" class="pointer-events-none absolute inset-x-0 bottom-0 z-[0] h-4 translate-y-1 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.18), rgba(0,0,0,0)); filter:blur(7px);"></div>
         </div>
 
-        <div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
+        <div id="recipe-scroll" class="relative flex-1 overflow-y-auto px-4 pt-20 pb-24 bg-[#2d2e2b]" style="background:#2d2e2b !important;">
             <div id="recipe-grid" class="grid grid-cols-2 gap-3 bg-[#2d2e2b]" style="background:#2d2e2b !important;"></div>
         </div>
     </div>