Merge feature/feed-and-nav-ux: Your-feed activity stream + uniform nav

/dashboard/following becomes a single-column new-cart activity feed.
A shared (public)/layout.tsx makes every public page auth-aware,
fixing the 'Sign in while signed in' bug; the immersive /c/[slug]
moves to a chrome-less group. Frontend-only.

Author: mayur-tolexo

docs/superpowers/specs/2026-05-25-feed-and-nav-ux-design.md

@@ -0,0 +1,108 @@
+# "Your feed" activity stream + uniform navigation — Design
+
+Date: 2026-05-25
+Status: Approved for implementation
+
+Two independent, frontend-only workstreams (disjoint file sets → parallelizable).
+
+---
+
+## Workstream A — "Your feed" activity stream
+
+### Goal
+Redesign `/dashboard/following` from a grid of cart cards into a single-column **activity stream of new-cart events** from creators you follow, newest-first.
+
+### Why frontend-only
+`getFollowingFeed()` already returns `Cart[]` (newest-first by `createdAt`) with everything an entry needs: `ownerHandle`, `ownerDisplayName`, `ownerAvatarUrl`, `createdAt`, `title`, `slug`, `products[]`. No backend, query, or migration change.
+
+### Pieces
+1. **`web/lib/relative-time.ts`** — pure `relativeTime(iso: string, now?: Date): string`:
+   - `< 60s` → "just now"; `< 60m` → "Nm ago"; `< 24h` → "Nh ago"; `< 7d` → "Nd ago"; else short date "Mar 4" (and include year if a different year).
+   - Pure + deterministic (accepts injectable `now`) so it is unit-testable in the repo's node-env vitest.
+   - **`web/lib/relative-time.test.ts`** — cases for each bucket + boundary + older-than-a-week date formatting.
+
+2. **`web/components/feed-item.tsx`** — presentational (no `"use client"` needed). Props: `cart: Cart`. Renders one entry:
+   - Header: avatar + `@ownerHandle` linking to `/u/{ownerHandle}`, then `· {relativeTime(createdAt)}`.
+   - Headline (muted, small): `shared a new cart`.
+   - Cart title (`font-serif`) linking to `/c/{slug}`.
+   - Thumbnail row: up to **4** product images (64px square, `rounded-lg`, `object-cover`, `unoptimized`); a neutral placeholder block when a product has no `imageUrl`; if `products.length > 4`, a trailing `+N` chip. Thumbnails link to `/c/{slug}` (the cart), not individual products.
+   - Footer: `{products.length} products · View cart →` linking to `/c/{slug}`.
+   - Use discrete links (creator vs cart) — do NOT wrap the whole card in one `<Link>`.
+   - Card chrome: `rounded-2xl border border-rule bg-cream`, subtle hover shadow.
+
+3. **`web/app/dashboard/following/page.tsx`** — rewrite the list section:
+   - Centered single column: `mx-auto max-w-2xl ... space-y-4` (or `space-y-5`).
+   - Keep the page heading; update copy to "Your feed" / subtitle "New carts from creators you follow."
+   - Map feed → `<FeedItem cart={c} />`.
+   - Keep & lightly refine the existing empty state (CTA → `/discover`).
+   - Keep `force-dynamic`, the cookie-forwarding fetch, and the `/login` redirect on auth failure.
+
+### Mobile
+Single column at all widths; thumbnails (4×64 + gaps) fit at 360px; tap targets ≥44px (creator link, View-cart CTA); keep bottom-nav padding (`pb-24 sm:pb-10`).
+
+### Out of scope (v1)
+Tap-thumbnail-to-shop; unread/seen state; "items added to existing cart" events (only new-cart events selected); pagination UI.
+
+### Files (A) — does NOT touch any nav component
+Create: `web/lib/relative-time.ts`, `web/lib/relative-time.test.ts`, `web/components/feed-item.tsx`.
+Modify: `web/app/dashboard/following/page.tsx`.
+
+---
+
+## Workstream B — Uniform navigation + auth-state fix
+
+### Problems
+1. **"Sign in" shows while signed in** on `app/(public)/feedback/page.tsx` and `app/not-found.tsx` — both render a bare `<NavBar variant="marketing" />` with **no `user` prop**, so the nav can't reflect login state. (feedback is a `"use client"` page, so it could not render the async server `MarketingNav` directly — hence the bare NavBar.)
+2. **Inconsistent chrome** — each `(public)` page individually renders `<MarketingNav/>` + `<Footer/>`; there is no shared layout, so it drifts.
+
+### Fix: a shared server layout for the public group
+1. **Create `web/app/(public)/layout.tsx`** (server component):
+   ```tsx
+   import { MarketingNav } from "@/components/marketing-nav";
+   import { Footer } from "@/components/footer";
+   export default function PublicLayout({ children }: { children: React.ReactNode }) {
+     return (
+       <>
+         <MarketingNav />
+         <main className="min-h-[calc(100vh-15rem)]">{children}</main>
+         <Footer />
+       </>
+     );
+   }
+   ```
+   `MarketingNav` is the auth-aware server wrapper (resolves the session cookie → passes `user`), so EVERY public page — including client pages like feedback — now gets a login-state-correct nav. This both fixes the bug and removes the drift.
+
+2. **Strip per-page chrome** from all `(public)` pages so chrome isn't doubled. For each of: `discover`, `feedback`, `get-extension`, `legal/extension-privacy`, `legal/privacy`, `legal/terms`, `mobile`, `page` (home), `roadmap`, `u/[handle]` — remove their own `<MarketingNav/>` / `<NavBar .../>` and `<Footer/>` and the now-unused imports, plus any redundant wrapping `<>...</>` / outer `<main>` that the layout now supplies. Leave only page content. (Do NOT touch `dashboard/following` — different route group, owned by workstream A.)
+
+3. **Keep the cart page chrome-less.** `/c/[slug]` is an intentional immersive share page (its own hero + footer, no top nav). The new `(public)/layout.tsx` would wrap it, so move it out of the group: relocate
+   `app/(public)/c/[slug]/page.tsx` → `app/(share)/c/[slug]/page.tsx`
+   `app/(public)/c/[slug]/loading.tsx` → `app/(share)/c/[slug]/loading.tsx`
+   Route groups don't affect URLs, so the public URL stays `/c/{slug}`. The `(share)` group has **no** layout (inherits root only) → identical chrome-less rendering as today. Change nothing else in those files.
+
+4. **Fix `app/not-found.tsx`** (a server component): replace bare `<NavBar variant="marketing" />` + `<Footer/>` with `<MarketingNav/>` + `<Footer/>` (import `MarketingNav` from `@/components/marketing-nav`). It is app-root (not under `(public)`), so it does not inherit the public layout and keeps rendering its own chrome — just auth-aware now.
+
+5. **Relabel "Following" → "Feed"** to match product language:
+   - `web/components/nav-bar.tsx` — the app-variant "Following" link text → "Feed".
+   - `web/components/mobile-bottom-nav.tsx` — the "Following" item label → "Feed".
+   - Keep the route `/dashboard/following` (no file/route rename).
+
+### Deliberately left as-is
+`/login`, `/add`, `/connect-extension` are focused single-purpose flows (top-level routes, no chrome today). Leaving them chrome-light is intentional; not part of this pass.
+
+### Uniformity result
+- All public pages: one identical auth-aware `MarketingNav` + `Footer` from the shared layout.
+- All dashboard pages: already share `dashboard/layout.tsx` (app nav + bottom nav + footer).
+- `/c/[slug]`: intentionally chrome-less, preserved.
+- The marketing↔app nav difference is by design (different contexts), but both are now auth-state-correct everywhere.
+
+### Files (B) — does NOT touch workstream A's files
+Create: `web/app/(public)/layout.tsx`.
+Move: `web/app/(public)/c/[slug]/{page.tsx,loading.tsx}` → `web/app/(share)/c/[slug]/`.
+Modify: the 10 `(public)/*` pages listed (strip chrome), `web/app/not-found.tsx`, `web/components/nav-bar.tsx`, `web/components/mobile-bottom-nav.tsx`.
+
+---
+
+## Verification (both workstreams)
+Run from `web/`: `pnpm lint`, `pnpm exec tsc --noEmit`, `pnpm test`. (The integrating engineer runs the authoritative `pnpm build` + live route check — agents must NOT run `pnpm build` to avoid clobbering `.next` concurrently.)
+
+Post-integration route checks (build + serve): every page renders exactly one nav + one footer; feedback & a 404 show "Dashboard" (not "Sign in") when logged in; `/c/{slug}` still renders with no top nav; `/dashboard/following` shows the activity stream.

web/app/(public)/discover/page.tsx

@@ -2,8 +2,6 @@ import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import type { Creator } from "@/lib/types";
 import { listCreators } from "@/lib/api-client";
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
 import { CreatorCard } from "@/components/creator-card";
 
 export const dynamic = "force-dynamic";
@@ -25,33 +23,29 @@ export default async function DiscoverPage() {
   }
 
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-6xl px-4 sm:px-6 pb-24 sm:pb-16">
-        <section className="pt-12 pb-8 sm:pt-16 sm:pb-10 max-w-2xl">
-          <p className="text-sm text-accent uppercase tracking-widest font-medium mb-3">Discover</p>
-          <h1 className="font-serif text-4xl sm:text-5xl leading-[1.05] mb-3">
-            Find creators you&apos;ll love
-          </h1>
-          <p className="text-muted text-lg leading-relaxed">
-            Browse the people curating on shoplit. Follow your favourites and their newest carts
-            land in your feed.
-          </p>
-        </section>
+    <div className="mx-auto max-w-6xl px-4 sm:px-6 pb-24 sm:pb-16">
+      <section className="pt-12 pb-8 sm:pt-16 sm:pb-10 max-w-2xl">
+        <p className="text-sm text-accent uppercase tracking-widest font-medium mb-3">Discover</p>
+        <h1 className="font-serif text-4xl sm:text-5xl leading-[1.05] mb-3">
+          Find creators you&apos;ll love
+        </h1>
+        <p className="text-muted text-lg leading-relaxed">
+          Browse the people curating on shoplit. Follow your favourites and their newest carts
+          land in your feed.
+        </p>
+      </section>
 
-        {creators.length === 0 ? (
-          <p className="text-muted py-16 text-center">
-            No creators to show yet — check back soon.
-          </p>
-        ) : (
-          <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-3">
-            {creators.map((c) => (
-              <CreatorCard key={c.handle} creator={c} />
-            ))}
-          </div>
-        )}
-      </main>
-      <Footer />
-    </>
+      {creators.length === 0 ? (
+        <p className="text-muted py-16 text-center">
+          No creators to show yet — check back soon.
+        </p>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-3">
+          {creators.map((c) => (
+            <CreatorCard key={c.handle} creator={c} />
+          ))}
+        </div>
+      )}
+    </div>
   );
 }

web/app/(public)/feedback/page.tsx

@@ -2,8 +2,6 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { NavBar } from "@/components/nav-bar";
-import { Footer } from "@/components/footer";
 import { submitFeedback } from "@/lib/api-client";
 import { Lightbulb, ArrowRight } from "lucide-react";
 
@@ -39,10 +37,8 @@ export default function FeedbackPage() {
   };
 
   return (
-    <>
-      <NavBar variant="marketing" />
-      <main className="mx-auto max-w-6xl px-4 sm:px-6">
-        {/* HERO */}
+    <div className="mx-auto max-w-6xl px-4 sm:px-6">
+      {/* HERO */}
         <section className="pt-16 pb-10 sm:pt-24 sm:pb-14 text-center max-w-2xl mx-auto">
           <span
             className="inline-grid place-items-center size-12 rounded-2xl text-accent mb-5"
@@ -164,8 +160,6 @@ export default function FeedbackPage() {
             )}
           </div>
         </section>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/get-extension/page.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
 import { Puzzle, Monitor, Smartphone } from "lucide-react";
 
 const STORE_URL = "https://chromewebstore.google.com/detail/shoplit-%E2%80%94-add-to-cart/dplbbiamddaaimhjennfncbpbnkfconn";
@@ -26,10 +24,8 @@ const mobileSteps = [
 
 export default function GetExtensionPage() {
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
-        <div className="text-center mb-10">
+    <div className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
+      <div className="text-center mb-10">
           <span
             className="inline-grid place-items-center size-14 rounded-2xl text-accent mb-4"
             style={{ backgroundColor: "color-mix(in srgb, var(--accent) 12%, transparent)" }}
@@ -117,8 +113,6 @@ export default function GetExtensionPage() {
             See the full mobile guide →
           </Link>
         </p>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/layout.tsx

@@ -0,0 +1,12 @@
+import { MarketingNav } from "@/components/marketing-nav";
+import { Footer } from "@/components/footer";
+
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <MarketingNav />
+      <main className="min-h-[calc(100vh-15rem)]">{children}</main>
+      <Footer />
+    </>
+  );
+}

web/app/(public)/legal/extension-privacy/page.tsx

@@ -1,14 +1,9 @@
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
-
 export const metadata = { title: "Extension Privacy · shoplit" };
 
 export default function ExtensionPrivacyPage() {
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
-        <h1 className="font-serif text-4xl mb-2">shoplit browser extension — Privacy</h1>
+    <div className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
+      <h1 className="font-serif text-4xl mb-2">shoplit browser extension — Privacy</h1>
         <p className="text-sm text-muted mb-8">Last updated: 2026-05-24</p>
 
         <h2 className="font-serif text-2xl mt-8 mb-2">What the extension does</h2>
@@ -63,8 +58,6 @@ export default function ExtensionPrivacyPage() {
         <p className="leading-relaxed text-ink">
           Questions about this policy: <a href="mailto:mayur.das4@gmail.com" className="text-accent underline underline-offset-2">mayur.das4@gmail.com</a>.
         </p>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/legal/privacy/page.tsx

@@ -1,14 +1,9 @@
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
-
 export const metadata = { title: "Privacy · shoplit" };
 
 export default function PrivacyPage() {
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
-        <h1 className="font-serif text-4xl mb-2">Privacy</h1>
+    <div className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
+      <h1 className="font-serif text-4xl mb-2">Privacy</h1>
         <p className="text-sm text-muted mb-8">Last updated: 2026-05-23</p>
 
         <h2 className="font-serif text-2xl mt-8 mb-2">What we collect</h2>
@@ -44,8 +39,6 @@ export default function PrivacyPage() {
         <p className="leading-relaxed text-ink">
           Questions? Reach us via the GitHub repo&apos;s issue tracker.
         </p>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/legal/terms/page.tsx

@@ -1,14 +1,9 @@
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
-
 export const metadata = { title: "Terms · shoplit" };
 
 export default function TermsPage() {
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
-        <h1 className="font-serif text-4xl mb-2">Terms</h1>
+    <div className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
+      <h1 className="font-serif text-4xl mb-2">Terms</h1>
         <p className="text-sm text-muted mb-8">Last updated: 2026-05-23</p>
 
         <h2 className="font-serif text-2xl mt-8 mb-2">Using shoplit</h2>
@@ -51,8 +46,6 @@ export default function TermsPage() {
         <p className="leading-relaxed text-ink">
           Questions or disputes? Reach us via the GitHub repo&apos;s issue tracker.
         </p>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/mobile/page.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
 import { Smartphone, Apple, Share2, ImageIcon } from "lucide-react";
 
 export const metadata: Metadata = {
@@ -25,10 +23,8 @@ const iosSteps = [
 
 export default function MobileGuidePage() {
   return (
-    <>
-      <MarketingNav />
-      <main className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
-        {/* HERO */}
+    <div className="mx-auto max-w-2xl px-4 sm:px-6 py-16">
+      {/* HERO */}
         <div className="text-center mb-10">
           <span
             className="inline-grid place-items-center size-14 rounded-2xl text-accent mb-4"
@@ -107,8 +103,6 @@ export default function MobileGuidePage() {
             No account yet? Create one free
           </Link>
         </div>
-      </main>
-      <Footer />
-    </>
+    </div>
   );
 }

web/app/(public)/page.tsx

@@ -1,7 +1,5 @@
 import Link from "next/link";
 import { ArrowRight, Sparkles } from "lucide-react";
-import { MarketingNav } from "@/components/marketing-nav";
-import { Footer } from "@/components/footer";
 import { CartCard } from "@/components/cart-card";
 import { CartCover } from "@/components/cart-cover";
 import { RevealOnScroll } from "@/components/reveal-on-scroll";
@@ -21,9 +19,7 @@ export default async function LandingPage() {
   }
   return (
     <>
-      <MarketingNav />
-      <main>
-        {/* HERO — animated gradient background + cascading phone mockups */}
+      {/* HERO — animated gradient background + cascading phone mockups */}
         <section className="relative overflow-hidden">
           {/* Soft warm gradient blobs (CSS-animated) behind the hero */}
           <div aria-hidden className="absolute inset-0 -z-10 pointer-events-none">
@@ -209,8 +205,6 @@ export default async function LandingPage() {
             </p>
           </div>
         </section>
-      </main>
-      <Footer />
     </>
   );
 }