Fix broken mobile layout, sidebar portal, and header animations

.open-next 2/worker 10.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 11.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 12.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 13.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 14.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 15.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 4.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

.open-next 2/worker 5.js

@@ -0,0 +1,50 @@
+//@ts-expect-error: Will be resolved by wrangler build
+import { handleImageRequest } from "./cloudflare/images.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
+//@ts-expect-error: Will be resolved by wrangler build
+import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
+// @ts-expect-error: Will be resolved by wrangler build
+import { handler as middlewareHandler } from "./middleware/handler.mjs";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOQueueHandler } from "./.build/durable-objects/queue.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
+//@ts-expect-error: Will be resolved by wrangler build
+export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
+export default {
+    async fetch(request, env, ctx) {
+        return runWithCloudflareRequestContext(request, env, ctx, async () => {
+            const response = maybeGetSkewProtectionResponse(request);
+            if (response) {
+                return response;
+            }
+            const url = new URL(request.url);
+            // Serve images in development.
+            // Note: "/cdn-cgi/image/..." requests do not reach production workers.
+            if (url.pathname.startsWith("/cdn-cgi/image/")) {
+                const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
+                if (m === null) {
+                    return new Response("Not Found!", { status: 404 });
+                }
+                const imageUrl = m.groups.url;
+                return imageUrl.match(/^https?:\/\//)
+                    ? fetch(imageUrl, { cf: { cacheEverything: true } })
+                    : env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
+            }
+            // Fallback for the Next default image loader.
+            if (url.pathname ===
+                `${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
+                return await handleImageRequest(url, request.headers, env);
+            }
+            // - `Request`s are handled by the Next server
+            const reqOrResp = await middlewareHandler(request, env, ctx);
+            if (reqOrResp instanceof Response) {
+                return reqOrResp;
+            }
+            // @ts-expect-error: resolved by wrangler build
+            const { handler } = await import("./server-functions/default/handler.mjs");
+            return handler(reqOrResp, env, ctx, request.signal);
+        });
+    },
+};

src/app/globals.css

@@ -629,6 +629,7 @@
   opacity: 0.7;
   filter: blur(5px);
 }
+
 /* Swipe ecosystem for mobile placards */
 @media (max-width: 640px) {
   .swipe-container {
@@ -651,7 +652,7 @@
   }
 
   .swipe-item {
-    flex: 0 0 calc(100vw - 3rem);
+    flex: 0 0 88vw;
     scroll-snap-align: center;
   }
-}
+}

src/components/Dashboard.tsx

@@ -237,54 +237,51 @@ export function Dashboard({ user }: DashboardProps) {
             {/* Dashboard Sections */}
             <div className="space-y-10 sm:space-y-12">
 
-              {/* SECTION: Daily Snapshot (Horizontal Swipe on Mobile) */}
+              {/* SECTION: Mobile Swipe Ecosystem */}
-              <section>
+              <div className="swipe-container sm:space-y-12 sm:block">
-                <div className="flex items-center justify-between mb-4 px-1">
+
-                  <h2 className="text-xs font-bold uppercase tracking-[0.2em] opacity-50">Daily Snapshot</h2>
+                {/* SLIDE 1: Daily Stats (Nicotine & Weed) */}
-                  <div className="sm:hidden flex items-center gap-1.5 opacity-30">
+                <div className="swipe-item sm:opacity-100 sm:animate-none">
-                    <div className="w-1 h-1 rounded-full bg-primary" />
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
-                    <div className="w-1 h-1 rounded-full bg-primary/50" />
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Daily Stats</h2>
-                    <div className="w-1 h-1 rounded-full bg-primary/50" />
+                  </div>
+                  <div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
+                    <StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
+                    <StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
                   </div>
                 </div>
 
-                <div className="swipe-container sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-6 sm:px-0 sm:margin-0">
+                {/* SLIDE 2: Calendar & Inspiration */}
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up">
+                <div id="calendar-section" className="swipe-item sm:opacity-100 sm:animate-none">
-                    <StatsCard key={`stats-combined-${refreshKey}`} usageData={usageData} substance={preferences.substance} />
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Calendar</h2>
                   </div>
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-75">
+                  <UsageCalendar
+                    key={refreshKey}
+                    usageData={usageData}
+                    onDataUpdate={loadData}
+                    userId={user.id}
+                    religion={preferences.religion}
+                    onReligionUpdate={async (religion) => {
+                      const updatedPrefs = { ...preferences, religion };
+                      setPreferences(updatedPrefs);
+                      await savePreferencesAsync(updatedPrefs);
+                    }}
+                    preferences={preferences}
+                    onPreferencesUpdate={async (updatedPrefs) => {
+                      await savePreferencesAsync(updatedPrefs);
+                      setPreferences(updatedPrefs);
+                    }}
+                  />
+                </div>
+
+                {/* SLIDE 3: Mood & Savings */}
+                <div className="swipe-item sm:opacity-100 sm:animate-none space-y-4">
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Mood & Savings</h2>
+                  </div>
+                  <div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
                     <MoodTracker />
-                  </div>
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-150 sm:col-span-2 lg:col-span-1">
-                    <UsageCalendar
-                      key={refreshKey}
-                      usageData={usageData}
-                      onDataUpdate={loadData}
-                      userId={user.id}
-                      religion={preferences.religion}
-                      onReligionUpdate={async (religion) => {
-                        const updatedPrefs = { ...preferences, religion };
-                        setPreferences(updatedPrefs);
-                        await savePreferencesAsync(updatedPrefs);
-                      }}
-                      preferences={preferences}
-                      onPreferencesUpdate={async (updatedPrefs) => {
-                        await savePreferencesAsync(updatedPrefs);
-                        setPreferences(updatedPrefs);
-                      }}
-                    />
-                  </div>
-                </div>
-              </section>
-
-              {/* SECTION: Your Journey */}
-              <section>
-                <div className="flex items-center justify-between mb-4 px-1">
-                  <h2 className="text-xs font-bold uppercase tracking-[0.2em] opacity-50">Your Journey</h2>
-                </div>
-
-                <div className="swipe-container sm:grid sm:grid-cols-2 lg:grid-cols-4 sm:gap-6 sm:px-0">
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-200">
                     <SavingsTrackerCard
                       key={`savings-${refreshKey}`}
                       savingsConfig={savingsConfig}
@@ -293,21 +290,24 @@ export function Dashboard({ user }: DashboardProps) {
                       onSavingsConfigChange={handleSavingsConfigChange}
                     />
                   </div>
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-300">
+                </div>
+
+                {/* SLIDE 4: Journey & Plan */}
+                <div id="journey-section" className="swipe-item sm:opacity-100 sm:animate-none">
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Your Journey</h2>
+                  </div>
+                  <div className="grid sm:grid-cols-3 gap-6 space-y-4 sm:space-y-0">
                     <HealthTimelineCard
                       key={`health-${refreshKey}`}
                       usageData={usageData}
                       preferences={preferences}
                     />
-                  </div>
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-400">
                     <AchievementsCard
                       key={`achievements-${refreshKey}`}
                       achievements={achievements}
                       substance={preferences.substance}
                     />
-                  </div>
-                  <div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-500">
                     <QuitPlanCard
                       key={`quit-plan-${refreshKey}`}
                       plan={preferences.quitPlan}
@@ -316,29 +316,34 @@ export function Dashboard({ user }: DashboardProps) {
                     />
                   </div>
                 </div>
-              </section>
+
+              </div>
             </div>
           </>
         )}
-      </main>
+      </main >
 
       <SetupWizard open={showSetup} onComplete={handleSetupComplete} />
 
-      {preferences && (
+      {
-        <UsagePromptDialog
+        preferences && (
-          open={showUsagePrompt}
+          <UsagePromptDialog
-          onClose={() => setShowUsagePrompt(false)}
+            open={showUsagePrompt}
-          onSubmit={handleUsageSubmit}
+            onClose={() => setShowUsagePrompt(false)}
-          userId={user.id}
+            onSubmit={handleUsageSubmit}
-        />
+            userId={user.id}
-      )}
+          />
+        )
+      }
 
-      {showCelebration && newBadge && (
+      {
-        <CelebrationAnimation
+        showCelebration && newBadge && (
-          badge={newBadge}
+          <CelebrationAnimation
-          onComplete={handleCelebrationComplete}
+            badge={newBadge}
-        />
+            onComplete={handleCelebrationComplete}
-      )}
+          />
-    </div>
+        )
+      }
+    </div >
   );
 }

src/components/SideMenu.tsx

@@ -12,10 +12,12 @@ import {
     Heart,
     Calendar
 } from 'lucide-react';
+import React from 'react';
 import { useRouter } from 'next/navigation';
 import { cn } from '@/lib/utils';
 import { useTheme } from '@/lib/theme-context';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { createPortal } from 'react-dom';
 
 interface SideMenuProps {
     isOpen: boolean;
@@ -50,18 +52,27 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
         .join('')
         .toUpperCase() || user.email[0].toUpperCase();
 
-    return (
+    // Use Portal to render outside of header stacking context
+    const [mounted, setMounted] = React.useState(false);
+
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null;
+
+    return createPortal(
         <div className="fixed inset-0 z-[100] flex">
             {/* Backdrop */}
             <div
-                className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-none"
+                className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-all animate-in fade-in duration-300"
                 onClick={onClose}
             />
 
             {/* Menu Content */}
             <div
                 className={cn(
-                    "relative w-72 h-full flex flex-col shadow-2xl transition-none",
+                    "relative w-72 h-full flex flex-col shadow-2xl transition-all animate-in slide-in-from-left duration-300",
                     theme === 'light'
                         ? "bg-white text-slate-900"
                         : "bg-slate-900 text-white border-r border-white/5"
@@ -125,13 +136,25 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
                     <MenuLink
                         icon={Heart}
                         label="Health Status"
-                        onClick={onClose}
+                        onClick={() => {
+                            // Link to Dashboard Health Section
+                            onClose();
+                            const el = document.getElementById('journey-section');
+                            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                            else alert("View your Health Status on the Dashboard Journey section!");
+                        }}
                         color="blue"
                     />
                     <MenuLink
                         icon={Calendar}
                         label="History"
-                        onClick={onClose}
+                        onClick={() => {
+                            onClose();
+                            // Link to Calendar section
+                            const el = document.getElementById('calendar-section');
+                            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                            else alert("View your History on the Dashboard Calendar!");
+                        }}
                         color="amber"
                     />
                 </div>
@@ -144,7 +167,10 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
                     <MenuLink
                         icon={Settings}
                         label="Settings"
-                        onClick={onClose}
+                        onClick={() => {
+                            onClose();
+                            alert("Please use the Notification Bell in the header for settings.");
+                        }}
                     />
                     <button
                         onClick={handleLogout}
@@ -155,7 +181,8 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
                     </button>
                 </div>
             </div>
-        </div>
+        </div>,
+        document.body
     );
 }
 

src/components/UserHeader.tsx

@@ -33,6 +33,7 @@ import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, B
 import { useTheme } from '@/lib/theme-context';
 import { InstallAppButton } from './InstallAppButton';
 import { cn } from '@/lib/utils';
+import { SideMenu } from './SideMenu';
 
 interface UserHeaderProps {
   user: User;
@@ -121,8 +122,6 @@ function HourlyTimePicker({ value, onChange }: HourlyTimePickerProps) {
   );
 }
 
-import { SideMenu } from './SideMenu';
-
 export function UserHeader({ user, preferences }: UserHeaderProps) {
   const [userName, setUserName] = useState<string | null>(null);
   const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00', frequency: 'daily' });
@@ -220,10 +219,10 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
         backdropFilter: 'blur(12px)',
         borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.05)'
       }}>
-        {/* Cloudy/Foggy effect overlay */}
+        {/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
-        <div className="absolute inset-0 pointer-events-none select-none overflow-hidden">
+        <div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
-          <div className="absolute inset-0 fog-layer-1 opacity-20" />
+          <div className="absolute inset-0 fog-layer-1 opacity-40 dark:opacity-30" />
-          <div className="absolute inset-0 fog-layer-2 opacity-15" />
+          <div className="absolute inset-0 fog-layer-2 opacity-30 dark:opacity-20" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">
@@ -231,15 +230,19 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
           <div className="flex-1 flex justify-start">
             <button
               onClick={() => setIsSideMenuOpen(true)}
-              className="group relative flex items-center gap-2 p-1 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5 active:scale-95"
+              className="group relative flex items-center gap-2 p-1.5 pr-3 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5 active:scale-95 border border-transparent hover:border-primary/10"
             >
-              <Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-primary/20 transition-all group-hover:ring-primary/40">
+              <div className="relative">
-                <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
+                <Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-primary/20 transition-all group-hover:ring-primary/50 shadow-sm">
-                <AvatarFallback className="bg-primary/20 text-primary text-xs font-bold">{initials}</AvatarFallback>
+                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
-              </Avatar>
+                  <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white font-bold">{initials}</AvatarFallback>
-              <div className="hidden lg:block text-left mr-2">
+                </Avatar>
-                <div className="text-[10px] font-bold uppercase tracking-widest opacity-40 leading-none mb-1">Menu</div>
+                <div className="absolute -bottom-1 -right-1 bg-white dark:bg-slate-900 rounded-full p-0.5 shadow-sm border border-border">
-                <div className="h-0.5 w-4 bg-primary/40 rounded-full" />
+                  <Menu className="h-3 w-3 text-primary" />
+                </div>
+              </div>
+              <div className="hidden sm:block text-left">
+                <div className="text-[10px] font-bold uppercase tracking-widest opacity-50 leading-none">Menu</div>
               </div>
             </button>
           </div>