From b5d2b5b0cdbdee4484d580f95a57efbec412b0fd Mon Sep 17 00:00:00 2001
From: "dev.daminik00" <dev.daminik00@gmail.com>
Date: Mon, 22 Sep 2025 18:46:05 +0200
Subject: [PATCH] add blur

---
 .../NavigationBar/NavigationBar.module.scss   | 21 ++++++
 .../layout/NavigationBar/NavigationBar.tsx    | 73 ++++++++++---------
 src/shared/api/httpClient.ts                  | 19 ++++-
 3 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/components/layout/NavigationBar/NavigationBar.module.scss b/src/components/layout/NavigationBar/NavigationBar.module.scss
index d2b90cb..2ac3fc2 100644
--- a/src/components/layout/NavigationBar/NavigationBar.module.scss
+++ b/src/components/layout/NavigationBar/NavigationBar.module.scss
@@ -1,3 +1,24 @@
+// Blur background under tab bar
+.blurBackground {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  // Height: tab bar height + moderate overlap above tab bar
+  height: calc(14px + 60px + 20px); // bottom offset + tab bar height + overlap above
+  z-index: 9994; // Just below the tab bar
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  background: rgba(255, 255, 255, 0.7);
+  pointer-events: none; // Don't block interactions
+  
+  // Fallback for browsers that don't support backdrop-filter
+  @supports not (backdrop-filter: blur(1px)) {
+    background: rgba(255, 255, 255, 0.85);
+  }
+}
+
 .container {
   width: calc(100% - 32px);
   max-width: 400px;
diff --git a/src/components/layout/NavigationBar/NavigationBar.tsx b/src/components/layout/NavigationBar/NavigationBar.tsx
index 16e56ba..4ca4a7f 100644
--- a/src/components/layout/NavigationBar/NavigationBar.tsx
+++ b/src/components/layout/NavigationBar/NavigationBar.tsx
@@ -30,41 +30,46 @@ export default function NavigationBar() {
   if (isRetainingFunnel) return null;
 
   return (
-    <nav className={styles.container}>
-      {navItems.map(item => {
-        const isActive =
-          item.href === ROUTES.home()
-            ? pathnameWithoutLocale === item.href
-            : pathnameWithoutLocale.startsWith(item.href);
+    <>
+      {/* Blur background under tab bar */}
+      <div className={styles.blurBackground} />
 
-        const badge = getBadge(item, totalUnreadCount);
+      <nav className={styles.container}>
+        {navItems.map(item => {
+          const isActive =
+            item.href === ROUTES.home()
+              ? pathnameWithoutLocale === item.href
+              : pathnameWithoutLocale.startsWith(item.href);
 
-        return (
-          <Link
-            key={item.key}
-            href={item.href}
-            className={clsx(styles.item, { [styles.active]: isActive })}
-          >
-            <Icon name={item.icon} color={isActive ? "#007AFF" : "#8A8D93"}>
-              {!!badge && (
-                <Badge className={styles.badge}>
-                  <Typography
-                    weight="medium"
-                    size="xs"
-                    color="white"
-                    className={styles.badgeContent}
-                  >
-                    {badge > 99 ? "99+" : badge}
-                  </Typography>
-                </Badge>
-              )}
-            </Icon>
-            <Typography weight="medium" className={styles.label}>
-              {item.label}
-            </Typography>
-          </Link>
-        );
-      })}
-    </nav>
+          const badge = getBadge(item, totalUnreadCount);
+
+          return (
+            <Link
+              key={item.key}
+              href={item.href}
+              className={clsx(styles.item, { [styles.active]: isActive })}
+            >
+              <Icon name={item.icon} color={isActive ? "#007AFF" : "#8A8D93"}>
+                {!!badge && (
+                  <Badge className={styles.badge}>
+                    <Typography
+                      weight="medium"
+                      size="xs"
+                      color="white"
+                      className={styles.badgeContent}
+                    >
+                      {badge > 99 ? "99+" : badge}
+                    </Typography>
+                  </Badge>
+                )}
+              </Icon>
+              <Typography weight="medium" className={styles.label}>
+                {item.label}
+              </Typography>
+            </Link>
+          );
+        })}
+      </nav>
+    </>
   );
 }
diff --git a/src/shared/api/httpClient.ts b/src/shared/api/httpClient.ts
index 1844085..2b69185 100644
--- a/src/shared/api/httpClient.ts
+++ b/src/shared/api/httpClient.ts
@@ -148,7 +148,24 @@ class HttpClient {
     }
 
     const data = payload as T;
-    const validatedData = schema ? schema.parse(data) : data;
+
+    // Validate data with enhanced error logging
+    let validatedData: T;
+    if (schema) {
+      try {
+        validatedData = schema.parse(data);
+      } catch (error) {
+        console.error(`❌ [ZOD VALIDATION ERROR] ${method} ${fullUrl}`);
+        console.error(`📊 Status: ${res.status}`);
+        console.error(`📦 Raw Data:`, data);
+        console.error(`📋 Schema Expected:`, schema._def);
+        console.error(`⚠️ Validation Error:`, error);
+        console.error(`🔍 Data Type:`, typeof data, data === null ? "(null)" : "");
+        throw error;
+      }
+    } else {
+      validatedData = data;
+    }
 
     // Log successful API response (both client and server)
     if (typeof window !== "undefined") {