Improve mobile feed resilience and dashboard nav UX (#39)

* Improve mobile dashboard UX and add feed transport fallback

* Add env-gated Convex auth and transport debugging

Author: prazgaitis

.claude/napkin.md

@@ -3,6 +3,13 @@
 ## Corrections
 | Date | Source | What Went Wrong | What To Do Instead |
 |------|--------|----------------|-------------------|
+| 2026-02-16 | self | Ran eslint command with unquoted bracketed path (`app/api/challenges/[id]/...`) and zsh globbing failed | Quote any CLI path containing `[]` in this repo, including lint/file-specific commands |
+| 2026-02-16 | user | Fade behavior was interpreted as full hide, and reappearing nav felt inactive | Use partial opacity dimming (not `opacity-0`), keep nav interactive, and restore stronger foreground styling when revealed |
+| 2026-02-16 | self | Tried to use `python` for a quick text edit and the command wasn't available here | Use `apply_patch` or shell-native tools for small file edits; avoid Python for routine edits in this repo |
+| 2026-02-16 | user | After enabling `viewportFit: \"cover\"`, top dashboard feed nav could sit under mobile browser top chrome/notch | When using safe-area viewport mode, add top inset offsets to mobile main content and sticky top elements |
+| 2026-02-16 | user | Implemented mobile nav hide-on-scroll too aggressively; user perceived nav as disappearing entirely | Keep mobile bottom nav persistently visible by default; add hide-on-scroll only as an opt-in, tuned enhancement |
+| 2026-02-16 | self | Ran `pnpm -F web exec eslint` with `apps/web/...` paths, which failed because the command runs from `apps/web` | Use package-relative paths (e.g., `components/...`, `app/...`) when executing commands inside a filtered workspace |
+| 2026-02-16 | self | Ran `rg` with unquoted path containing `[id]` so zsh expanded it and command failed | Always single-quote paths with glob chars (`[]`, `()`) in shell commands |
 | 2026-02-11 | self | Ran `ls` before reading napkin (again) | Always read `.claude/napkin.md` before any other command |
 | 2026-02-10 | self | Ran `ls` before reading napkin | Always read `.claude/napkin.md` before any other command |
 | 2026-02-10 | self | Used backticks in a shell-quoted PR body so the shell tried to execute `turbo` | Use a heredoc or escape backticks when passing PR bodies to shell commands |
@@ -13,20 +20,28 @@
 ## User Preferences
 - Hide navbar on full-screen flow pages (invite, dashboard, admin) via `ConditionalHeader` patterns + remove `page-with-header` class
 - Avoid LAN-specific runtime rewrites in product code unless explicitly requested
+- For mobile bottom nav visual style, prefer transparent icon treatment over standout filled purple CTA button.
+- For production troubleshooting UX, do not add user-facing alerts for transient feed/connection issues; log to Sentry instead.
 
 ## Patterns That Work
 - Convex queries can join related data inline (e.g., activity types + categories in one query)
 - `conditional-header.tsx` DASHBOARD_LAYOUT_PATTERNS array controls navbar visibility per route
 - Admin console sidebar approach was scrapped — revisit admin nav design in the future
 - Mobile feed performance improves by skipping non-critical per-item work (engagement count scans and media URL generation) on initial query
 - For mobile perceived performance, SSR the first feed page from server auth and then let client `usePaginatedQuery` take over for realtime/pagination
+- For mobile browser chrome collapse behavior, use document scrolling on mobile and keep internal `overflow-y-auto` scrollers only on desktop breakpoints.
+- For x-like translucent mobile bottom nav, use low-alpha supported background (`supports-[backdrop-filter]:bg-zinc-950/15`) plus stronger blur/saturation.
+- If user prefers no glass treatment, remove all `backdrop-*` and `supports-[backdrop-filter]:*` classes and use a plain alpha background (`bg-zinc-950/55`).
+- Scroll-direction-driven nav fade works with a throttled `requestAnimationFrame` + `opacity` transition, and avoids layout jumps versus translate-based hide.
+- For Convex mobile diagnostics, prefer env-gated verbose logs (`NEXT_PUBLIC_CONVEX_DEBUG=1`, `AUTH_LOG_LEVEL=DEBUG`) plus Sentry capture over user-facing banners.
 
 ## Patterns That Don't Work
 - Deriving env vars inside `convex deploy --cmd` shell strings — escaping hell, fragile, hard to debug. Instead, derive them in `next.config.ts` which runs at build time and can set `process.env` before Next.js compiles.
 
 ## Domain Notes
 - Scoring configs have types: distance, duration, count, variant
 - `page-with-header` CSS class = `pt-16` to offset fixed navbar
+- Dashboard layout uses `h-dvh` + `overflow-hidden` shell with an internal `main` scroller (`overflow-y-auto`); mobile browser chrome hide behavior is tied to this choice.
 - Seed data lives in `packages/backend/actions/seed.ts`
 - Schema changes auto-deploy locally via `pnpm dev`
 - Local Convex HTTP routes (`httpAction`, `/api/v1/*`) are served from site origin (`127.0.0.1:3211`), not cloud origin (`127.0.0.1:3210`)

apps/web/app/api/challenges/[id]/feed/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import type { Id } from "@repo/backend/_generated/dataModel";
+import { api } from "@repo/backend";
+
+import { fetchAuthQuery } from "@/lib/server-auth";
+
+interface FeedRequestBody {
+  followingOnly?: boolean;
+  includeEngagementCounts?: boolean;
+  includeMediaUrls?: boolean;
+  cursor?: string | null;
+  numItems?: number;
+}
+
+function parseBody(value: unknown): FeedRequestBody {
+  if (!value || typeof value !== "object") {
+    return {};
+  }
+  return value as FeedRequestBody;
+}
+
+export async function POST(
+  request: Request,
+  context: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await context.params;
+    const body = parseBody(await request.json().catch(() => ({})));
+
+    const followingOnly = Boolean(body.followingOnly);
+    const includeEngagementCounts = body.includeEngagementCounts ?? true;
+    const includeMediaUrls = body.includeMediaUrls ?? true;
+    const cursor = typeof body.cursor === "string" || body.cursor === null
+      ? body.cursor
+      : null;
+    const requestedNumItems = Number.isFinite(body.numItems)
+      ? Number(body.numItems)
+      : 10;
+    const numItems = Math.min(50, Math.max(1, requestedNumItems));
+
+    const result = await fetchAuthQuery(api.queries.activities.getChallengeFeed, {
+      challengeId: id as Id<"challenges">,
+      followingOnly,
+      includeEngagementCounts,
+      includeMediaUrls,
+      paginationOpts: {
+        numItems,
+        cursor,
+      },
+    });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("[feed api] failed", error);
+    return NextResponse.json(
+      { error: "Failed to load feed" },
+      { status: 500 }
+    );
+  }
+}

apps/web/app/layout.tsx

@@ -24,6 +24,7 @@ export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
+  viewportFit: "cover",
 };
 
 export const metadata: Metadata = {

apps/web/components/dashboard/activity-feed.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { formatDistanceToNow } from 'date-fns';
+import * as Sentry from '@sentry/nextjs';
 import {
   Flag,
   Loader2,
@@ -13,7 +14,7 @@ import {
   ThumbsUp,
   Zap,
 } from 'lucide-react';
-import { useMutation, usePaginatedQuery } from 'convex/react';
+import { useConvexConnectionState, useMutation, usePaginatedQuery } from 'convex/react';
 import { api } from '@repo/backend';
 import type { Id } from '@repo/backend/_generated/dataModel';
 import { ConvexError } from 'convex/values';
@@ -102,15 +103,28 @@ interface ActivityFeedProps {
 
 type FeedFilter = 'all' | 'following';
 
+interface FeedPageResponse {
+  page: ActivityFeedItem[];
+  continueCursor: string;
+  isDone: boolean;
+}
+
 export function ActivityFeed({
   challengeId,
   initialItems = [],
   initialLightweightMode = false,
 }: ActivityFeedProps) {
+  const connectionState = useConvexConnectionState();
   const { hasNewActivity, acknowledgeActivity } = useChallengeRealtime();
   const { users: mentionUsers } = useMentionableUsers(challengeId);
   const [pendingLikes, setPendingLikes] = useState<Record<string, boolean>>({});
   const [feedFilter, setFeedFilter] = useState<FeedFilter>('all');
+  const [useHttpFallback, setUseHttpFallback] = useState(false);
+  const [httpItems, setHttpItems] = useState<ActivityFeedItem[]>(initialItems);
+  const [httpCursor, setHttpCursor] = useState<string | null>(null);
+  const [httpIsDone, setHttpIsDone] = useState(false);
+  const [httpLoading, setHttpLoading] = useState(false);
+  const httpRequestIdRef = useRef(0);
   const isMobileClient = useMemo(() => {
     if (typeof navigator === 'undefined') {
       return false;
@@ -137,7 +151,126 @@ export function ActivityFeed({
     { initialNumItems: 10 }
   );
 
+  const loadHttpPage = useCallback(async (cursor: string | null, append: boolean) => {
+    const requestId = ++httpRequestIdRef.current;
+    setHttpLoading(true);
+
+    try {
+      const response = await fetch(`/api/challenges/${challengeId}/feed`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          followingOnly: feedFilter === "following",
+          includeEngagementCounts: !lightweightFeedMode,
+          includeMediaUrls: !lightweightFeedMode,
+          cursor,
+          numItems: 10,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Feed request failed with status ${response.status}`);
+      }
+
+      const data = (await response.json()) as FeedPageResponse;
+      if (requestId !== httpRequestIdRef.current) {
+        return;
+      }
+
+      setHttpItems((prev) => (append ? [...prev, ...data.page] : data.page));
+      setHttpIsDone(data.isDone);
+      setHttpCursor(data.isDone ? null : (data.continueCursor ?? null));
+    } catch (error) {
+      if (requestId !== httpRequestIdRef.current) {
+        return;
+      }
+      console.error("Failed to load feed over HTTP fallback", error);
+      Sentry.captureException(error, {
+        tags: {
+          area: "activity-feed",
+          transport: "http-fallback",
+          feedFilter,
+          platform: isMobileClient ? "mobile" : "desktop",
+        },
+        extra: {
+          challengeId,
+          lightweightFeedMode,
+        },
+      });
+    } finally {
+      if (requestId === httpRequestIdRef.current) {
+        setHttpLoading(false);
+      }
+    }
+  }, [challengeId, feedFilter, isMobileClient, lightweightFeedMode]);
+
+  useEffect(() => {
+    if (useHttpFallback) {
+      return;
+    }
+    if (!isLoading) {
+      return;
+    }
+    if (connectionState.isWebSocketConnected || connectionState.hasEverConnected) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      Sentry.captureMessage("Convex websocket not ready; enabling HTTP feed fallback", {
+        level: "warning",
+        tags: {
+          area: "activity-feed",
+          feedFilter,
+          platform: isMobileClient ? "mobile" : "desktop",
+        },
+        extra: {
+          challengeId,
+          hasEverConnected: connectionState.hasEverConnected,
+          isWebSocketConnected: connectionState.isWebSocketConnected,
+          connectionRetries: connectionState.connectionRetries,
+        },
+      });
+      setUseHttpFallback(true);
+    }, 6000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    challengeId,
+    connectionState.connectionRetries,
+    connectionState.hasEverConnected,
+    connectionState.isWebSocketConnected,
+    feedFilter,
+    isMobileClient,
+    isLoading,
+    useHttpFallback,
+  ]);
+
+  useEffect(() => {
+    if (!useHttpFallback) {
+      return;
+    }
+
+    httpRequestIdRef.current += 1;
+    setHttpCursor(null);
+    setHttpIsDone(false);
+    setHttpItems(feedFilter === "all" ? initialItems : []);
+
+    void loadHttpPage(null, false);
+  }, [feedFilter, initialItems, loadHttpPage, useHttpFallback]);
+
   const handleLoadMore = () => {
+    if (useHttpFallback) {
+      if (!httpLoading && !httpIsDone && httpCursor) {
+        void loadHttpPage(httpCursor, true);
+      }
+      return;
+    }
+
     if (status === "CanLoadMore") {
       loadMore(10);
     }
@@ -166,15 +299,7 @@ export function ActivityFeed({
     }
   };
 
-  const feedStatus = useMemo(() => {
-    const hasInitialFeed = feedFilter === 'all' && initialItems.length > 0;
-    if (isLoading && !hasInitialFeed) {
-      return 'Loading recent activities...';
-    }
-    return null;
-  }, [feedFilter, initialItems.length, isLoading]);
-
-  const displayResults = useMemo(() => {
+  const liveDisplayResults = useMemo(() => {
     if (feedFilter !== 'all') {
       return results;
     }
@@ -186,10 +311,35 @@ export function ActivityFeed({
     return results;
   }, [feedFilter, initialItems, results]);
 
+  const displayResults = useMemo(() => {
+    if (!useHttpFallback) {
+      return liveDisplayResults;
+    }
+
+    if (feedFilter === "all" && httpItems.length === 0) {
+      return initialItems;
+    }
+
+    return httpItems;
+  }, [feedFilter, httpItems, initialItems, liveDisplayResults, useHttpFallback]);
+
+  const effectiveIsLoading = useHttpFallback ? httpLoading : isLoading;
+  const canLoadMore = useHttpFallback
+    ? !httpIsDone && !httpLoading && httpCursor !== null
+    : status === "CanLoadMore";
+
+  const feedStatus = useMemo(() => {
+    const hasInitialFeed = feedFilter === "all" && (displayResults?.length ?? 0) > 0;
+    if (effectiveIsLoading && !hasInitialFeed) {
+      return "Loading recent activities...";
+    }
+    return null;
+  }, [displayResults, effectiveIsLoading, feedFilter]);
+
   return (
     <div className="space-y-4">
       {/* Twitter-like Feed Filter Tabs */}
-      <div className="sticky top-0 z-10 -mx-4 border-b border-zinc-800 bg-black/80 backdrop-blur">
+      <div className="sticky top-[env(safe-area-inset-top)] z-10 -mx-4 border-b border-zinc-800 bg-black/80 backdrop-blur">
         <div className="flex">
           <button
             onClick={() => setFeedFilter('all')}
@@ -258,7 +408,7 @@ export function ActivityFeed({
         />
       ))}
 
-      {!isLoading && (displayResults?.length ?? 0) === 0 && (
+      {!effectiveIsLoading && (displayResults?.length ?? 0) === 0 && (
         <Card className="border-dashed text-center">
           <CardHeader>
             <CardTitle>
@@ -273,10 +423,10 @@ export function ActivityFeed({
         </Card>
       )}
 
-      {status === "CanLoadMore" && (
+      {canLoadMore && (
         <div className="flex justify-center">
-          <Button variant="outline" onClick={handleLoadMore}>
-            Load more
+          <Button variant="outline" onClick={handleLoadMore} disabled={effectiveIsLoading}>
+            {effectiveIsLoading ? "Loading..." : "Load more"}
           </Button>
         </div>
       )}

apps/web/components/dashboard/dashboard-layout.tsx

@@ -40,7 +40,7 @@ export function DashboardLayout({
   }, []);
 
   return (
-    <div className="flex h-dvh overflow-hidden bg-black text-white">
+    <div className="flex min-h-dvh bg-black text-white lg:h-dvh lg:overflow-hidden">
       {/* Left Sidebar - Collapsed (lg) */}
       <aside onWheel={forwardScroll} className="hidden w-[72px] flex-shrink-0 flex-col border-r border-zinc-800 lg:flex xl:hidden">
         <div className="flex h-full flex-col items-center py-4">
@@ -129,8 +129,11 @@ export function DashboardLayout({
         </div>
       </aside>
 
-      {/* Main Content - Scrollable */}
-      <main ref={mainRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-hide pb-20 lg:pb-0">
+      {/* Main Content */}
+      <main
+        ref={mainRef}
+        className="min-h-0 flex-1 scrollbar-hide pt-[env(safe-area-inset-top)] pb-[calc(5.5rem+env(safe-area-inset-bottom))] lg:overflow-y-auto lg:overscroll-contain lg:pt-0 lg:pb-0"
+      >
         <PaymentRequiredBanner challengeId={challenge.id} />
         <AnnouncementBanner challengeId={challenge.id} />
         {children}