Merge feature/rail-and-acquisition: desktop rail + cart acquisition banner

Author: mayur-tolexo

docs/superpowers/specs/2026-05-25-rail-and-acquisition-design.md

@@ -0,0 +1,60 @@
+# Desktop nav rail + cart-page acquisition banner — Design
+
+Date: 2026-05-25
+Status: Approved for implementation
+
+Two independent frontend-only features, disjoint files → parallelizable.
+
+---
+
+## Feature 1 — Fixed desktop nav rail (rail BELOW the top bar; desktop only)
+
+Goal: on desktop (`lg+`), logged-in users get a permanently-visible left nav rail so navigating between primary pages is **one click** (not open-drawer-then-click). **Mobile/tablet (`< lg`) is unchanged** (top bar + drawer, phone bottom tab bar). The existing top bar is kept (chosen "rail below top bar" approach — do NOT remove or restructure the top bar or the page layouts).
+
+### Components
+- **`web/components/desktop-rail.tsx`** (`"use client"`), props `{ user: User }`:
+  - `hidden lg:flex flex-col fixed left-0 top-[57px] bottom-0 w-56 z-30 border-r border-rule bg-cream overflow-y-auto py-4 px-3`. (`top-[57px]` ≈ the top bar's height so the rail sits just under it; fine-tune to match the rendered NavBar height.)
+  - Vertical nav items (icon + label, `min-h-[44px]`, rounded, active = `bg-paper text-accent font-medium` via `usePathname`, inactive = `text-muted hover:bg-paper hover:text-ink`): **Dashboard** `/dashboard` (Home), **Discover** `/discover` (Compass), **Your feed** `/dashboard/following` (Rss), **Your profile** `/u/{handle}` (User; omit if no handle), **New cart** `/add` (Plus). Then, only when `user.isAdmin`: a divider + **Admin** `/dashboard/admin` (ShieldCheck).
+  - Reuse the drawer's link set/idiom (`app-sidebar.tsx`) for consistency; account/sign-out stay in the top-bar avatar drawer (the rail is nav-only).
+- **`web/components/app-frame.tsx`** (`"use client"`), props `{ user: User | null; children }`:
+  - `const showShell = !!user && isAppRoute(pathname)` where `isAppRoute(p) = p === "/discover" || p === "/add" || p.startsWith("/dashboard") || p.startsWith("/u/")`.
+  - Renders: `<div className={showShell ? "lg:pl-56" : undefined}>{children}</div>`, then `{showShell && user && <DesktopRail user={user} />}`, then `<MobileTabBar user={user} />`.
+  - (The `lg:pl-56` shifts page content right of the rail on desktop only; below `lg` no padding. The top bar lives inside `children` and reflows within the padded width — acceptable; do not try to special-case it.)
+
+### Wiring
+- `web/app/layout.tsx`: where it currently renders `<MobileTabBar user={...} />` after `{children}`, instead wrap: `<AppFrame user={user}>{children}</AppFrame>` (AppFrame now renders MobileTabBar internally — remove the standalone MobileTabBar render/import from the root layout).
+- **No other files change** for Feature 1 (top bar, `(public)`/`dashboard` layouts, drawer all stay).
+
+### Mobile/tablet
+`< lg`: rail is `hidden` (not rendered visually), no `lg:pl-56` effect → current mobile UX (top bar + drawer + phone bottom bar) is fully preserved.
+
+### Files (1)
+Create: `web/components/desktop-rail.tsx`, `web/components/app-frame.tsx`. Modify: `web/app/layout.tsx`.
+
+---
+
+## Feature 2 — "Create your own shoplit" banner on public cart pages
+
+Goal: convert viewers of a shared cart (`/c/{slug}`, the `(share)` group) into shoplit signups with a **bold, on-brand** call-to-action.
+
+### Component
+- **`web/components/create-your-own-banner.tsx`** (server or simple client; no heavy state): a prominent, on-brand CTA card — `rounded-2xl bg-ink text-cream` (or an accent gradient) section with:
+  - the shoplit logo/wordmark,
+  - a punchy headline, e.g. **"Love this? Build your own shoplit."**,
+  - one line of subtext (e.g., "Turn the products you love into one beautiful, shareable link — free."),
+  - a primary button **"Create your shoplit — free"** → `/login`, and a quieter secondary link **"Discover creators"** → `/discover`.
+  - Tasteful, generous padding; works at 360px (stacks), `≥44px` tap targets.
+
+### Placement
+- In `web/app/(share)/c/[slug]/page.tsx`: render `<CreateYourOwnBanner />` **after the products section, before the footer**. Leave the hero, products, `StickyShareBar`, and footer intact (don't disturb the immersive layout or the sticky share bar's spacing — keep enough bottom padding so the banner isn't hidden behind the sticky bar).
+
+### Files (2)
+Create: `web/components/create-your-own-banner.tsx`. Modify: `web/app/(share)/c/[slug]/page.tsx`.
+
+---
+
+## Verification (both)
+`pnpm exec tsc --noEmit`, `pnpm lint`, `pnpm test`, `pnpm build` (each agent builds its own tree). Integrator: deploy `shoplit-web` (frontend-only); desktop visual check that the rail shows on `/dashboard`,`/discover`,`/u/*` (lg+) with content cleared of it and one-click nav; mobile unchanged; cart page shows the banner.
+
+## Out of scope
+Collapsible/resizable rail; removing the top bar on desktop; exit-intent popups; A/B testing the banner copy.

web/app/(share)/c/[slug]/page.tsx

@@ -7,6 +7,7 @@ import { ProductCard } from "@/components/product-card";
 import { RevealOnScroll } from "@/components/reveal-on-scroll";
 import { StickyShareBar } from "@/components/sticky-share-bar";
 import { CartCover } from "@/components/cart-cover";
+import { CreateYourOwnBanner } from "@/components/create-your-own-banner";
 import { linkify } from "@/lib/linkify";
 
 export const dynamic = "force-dynamic";
@@ -78,6 +79,9 @@ export default async function PublicCartPage({ params }: { params: { slug: strin
         )}
       </section>
 
+      {/* ACQUISITION CTA — convert viewers into shoplit signups. */}
+      <CreateYourOwnBanner />
+
       {/* FOOTER (extra bottom padding so it isn't covered by the sticky share bar) */}
       <footer className="border-t border-rule mt-16 pb-24">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 py-10 text-sm text-muted text-center space-y-3">

web/app/layout.tsx

@@ -4,7 +4,7 @@ import { cookies } from "next/headers";
 import "./globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { SwRegister } from "@/components/sw-register";
-import { MobileTabBar } from "@/components/mobile-tab-bar";
+import { AppFrame } from "@/components/app-frame";
 import { getCurrentUser } from "@/lib/api-client";
 
 const fraunces = Fraunces({
@@ -46,16 +46,16 @@ export const viewport: Viewport = {
 };
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  // Resolve the viewer once, globally, so the mobile tab bar can render across
-  // the primary surfaces (Carts/Discover/Feed/Add). Fail open: a logged-out
-  // visitor (or any lookup error) yields null so public pages never error.
+  // Resolve the viewer once, globally, so AppFrame's persistent nav surfaces
+  // (desktop rail + mobile tab bar) can render across the primary surfaces
+  // (Carts/Discover/Feed/Add). Fail open: a logged-out visitor (or any lookup
+  // error) yields null so public pages never error.
   const user = await getCurrentUser({ cookie: cookies().toString() }).catch(() => null);
 
   return (
     <html lang="en" className={`${fraunces.variable} ${inter.variable} ${notoDeva.variable} ${jetbrains.variable}`}>
       <body>
-        {children}
-        <MobileTabBar user={user} />
+        <AppFrame user={user}>{children}</AppFrame>
         <Toaster position="bottom-center" richColors />
         <SwRegister />
       </body>

web/components/app-frame.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { DesktopRail } from "@/components/desktop-rail";
+import { MobileTabBar } from "@/components/mobile-tab-bar";
+import type { User } from "@/lib/types";
+
+// Global app chrome wrapper, rendered once from the root layout. It owns the
+// two persistent nav surfaces — the desktop rail (lg+) and the phone bottom tab
+// bar (< sm) — so they live across the primary signed-in surfaces instead of
+// per-route. `children` (incl. the top NavBar) render inside the rail-padded
+// column.
+//
+// `showShell` mirrors MobileTabBar's isPrimaryRoute idiom: only signed-in
+// viewers on a primary app route get the rail + content padding. On /c/[slug],
+// /login, the marketing home, etc. there's no rail and no padding. The
+// lg:pl-56 only applies at lg+, so below lg there is no padding effect and the
+// rail is `hidden` — mobile/tablet UX is fully preserved.
+function isAppRoute(pathname: string): boolean {
+  return (
+    pathname === "/discover" ||
+    pathname === "/add" ||
+    pathname.startsWith("/dashboard") ||
+    pathname.startsWith("/u/")
+  );
+}
+
+export function AppFrame({
+  user,
+  children,
+}: {
+  user: User | null;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const showShell = !!user && isAppRoute(pathname);
+
+  return (
+    <>
+      <div className={showShell ? "lg:pl-56" : undefined}>{children}</div>
+      {showShell && user && <DesktopRail user={user} />}
+      <MobileTabBar user={user} />
+    </>
+  );
+}

web/components/create-your-own-banner.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { LogoMark } from "@/components/logo";
+
+// Acquisition CTA shown at the bottom of every public cart page (`/c/{slug}`),
+// after the products and before the footer. Converts viewers of a shared cart
+// into shoplit signups. On-brand: dark ink card with cream text and an accent
+// glow that picks up the cart's per-page --accent (set inline on the page
+// wrapper). Stacks cleanly at 360px; all tap targets are >=44px.
+export function CreateYourOwnBanner() {
+  return (
+    <section className="mx-auto max-w-4xl px-4 sm:px-6">
+      <div className="relative overflow-hidden rounded-2xl bg-ink text-cream px-6 py-10 sm:px-12 sm:py-14">
+        {/* Soft accent glow so the card feels tied to this creator's cart. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-16 -top-20 h-56 w-56 rounded-full opacity-30 blur-3xl"
+          style={{ background: "var(--accent)" }}
+        />
+        <div className="relative flex flex-col items-start gap-5 text-left">
+          {/* Wordmark: standalone mark (accent fill) + serif name in cream. */}
+          <div className="flex items-center gap-2">
+            <LogoMark className="h-9 w-9 shrink-0" />
+            <span className="font-serif text-2xl leading-none tracking-tight text-cream">
+              shoplit
+            </span>
+          </div>
+
+          <h2 className="font-serif text-3xl sm:text-4xl leading-[1.05] text-cream max-w-xl">
+            Love this? Build your own shoplit.
+          </h2>
+
+          <p className="text-sm sm:text-base text-cream/75 max-w-md leading-relaxed">
+            Turn the products you love into one beautiful, shareable link — free.
+          </p>
+
+          <div className="mt-2 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center w-full sm:w-auto">
+            <Link
+              href="/login"
+              className="inline-flex min-h-[44px] items-center justify-center gap-2 rounded-full bg-cream px-6 text-sm font-medium text-ink transition-opacity hover:opacity-90"
+            >
+              Create your shoplit — free
+              <ArrowRight size={16} aria-hidden />
+            </Link>
+            <Link
+              href="/discover"
+              className="inline-flex min-h-[44px] items-center justify-center rounded-full px-6 text-sm font-medium text-cream/80 transition-colors hover:text-cream"
+            >
+              Discover creators
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

web/components/desktop-rail.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Compass,
+  Home,
+  Plus,
+  Rss,
+  ShieldCheck,
+  User as UserIcon,
+} from "lucide-react";
+import type { User } from "@/lib/types";
+
+// Fixed desktop nav rail. Rendered (via AppFrame) only for signed-in viewers on
+// the primary app routes, and only at lg+ — it's `hidden` below lg so the
+// mobile/tablet UX (top bar + drawer + phone bottom bar) is untouched. It sits
+// just below the sticky top NavBar (top-[57px] ≈ NavBar height) and gives
+// one-click navigation between the primary surfaces. Nav-only by design:
+// account / sign-out stay in the top-bar avatar drawer (AppSidebar).
+export function DesktopRail({ user }: { user: User }) {
+  const pathname = usePathname();
+  const profileHref = user.handle ? `/u/${user.handle}` : null;
+
+  return (
+    <nav
+      aria-label="Primary navigation"
+      className="hidden lg:flex flex-col fixed left-0 top-[57px] bottom-0 w-56 z-30 border-r border-rule bg-cream overflow-y-auto py-4 px-3"
+    >
+      <RailLink
+        href="/dashboard"
+        label="Dashboard"
+        icon={<Home size={18} />}
+        active={pathname === "/dashboard"}
+      />
+      <RailLink
+        href="/discover"
+        label="Discover"
+        icon={<Compass size={18} />}
+        active={pathname === "/discover"}
+      />
+      <RailLink
+        href="/dashboard/following"
+        label="Your feed"
+        icon={<Rss size={18} />}
+        active={pathname === "/dashboard/following"}
+      />
+      {profileHref && (
+        <RailLink
+          href={profileHref}
+          label="Your profile"
+          icon={<UserIcon size={18} />}
+          active={pathname === profileHref}
+        />
+      )}
+      <RailLink
+        href="/add"
+        label="New cart"
+        icon={<Plus size={18} />}
+        active={pathname === "/add"}
+      />
+
+      {user.isAdmin && (
+        <>
+          <div className="my-2 h-px bg-rule" aria-hidden="true" />
+          <RailLink
+            href="/dashboard/admin"
+            label="Admin"
+            icon={<ShieldCheck size={18} />}
+            active={pathname.startsWith("/dashboard/admin")}
+          />
+        </>
+      )}
+    </nav>
+  );
+}
+
+function RailLink({
+  href,
+  label,
+  icon,
+  active,
+}: {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  active: boolean;
+}) {
+  return (
+    <Link
+      href={href}
+      aria-current={active ? "page" : undefined}
+      className={`flex items-center gap-3 min-h-[44px] px-3 rounded-md text-sm transition-colors ${
+        active
+          ? "bg-paper text-accent font-medium"
+          : "text-muted hover:bg-paper hover:text-ink"
+      }`}
+    >
+      {icon}
+      {label}
+    </Link>
+  );
+}