From 8ce75f8eef073eda625e8ad83fe2760255dab944 Mon Sep 17 00:00:00 2001
From: Tim Thomas <0800tim@gmail.com>
Date: Fri, 5 Jun 2026 11:22:36 +1200
Subject: [PATCH] feat(nav): add 'The Bet' to desktop top nav + drawer

After Pools in both surfaces, so the headline-grabbing NZ$1.5M
house wager is one click away on every page. New HouseStackIcon
glyph (house perched on a stack of coins) for the entry.

  apps/web/components/shell/nav-links.tsx
    PRIMARY_DESKTOP: insert The Bet after Pools.
    DRAWER_PRIMARY:  insert The Bet between Pools and My Profile,
                     matching Tim's drawer-order spec.

  apps/web/components/shell/icons.tsx
    HouseStackIcon, lightweight SVG matching the existing 24x24
    24px-grid "baseProps" style used by the other shell icons.

Drawer label uses the same i18n key as the desktop entry so a single
'nav.the_bet' string in the locale catalogues covers both. English
fallback is 'The Bet'.

Tim 2026-06-05.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Signed-off-by: Tim Thomas <0800tim@gmail.com>
---
 apps/web/components/shell/icons.tsx     | 16 ++++++++++++++++
 apps/web/components/shell/nav-links.tsx | 12 ++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/apps/web/components/shell/icons.tsx b/apps/web/components/shell/icons.tsx
index 6142049e..4a54d753 100644
--- a/apps/web/components/shell/icons.tsx
+++ b/apps/web/components/shell/icons.tsx
@@ -135,6 +135,22 @@ export function CodeIcon(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+/**
+ * House-on-stack-of-coins glyph for "The Bet" nav entry. The literal
+ * subject of the bet is Tim's house, so the icon leans on that visual.
+ * Tim 2026-06-05.
+ */
+export function HouseStackIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...baseProps} {...props}>
+      <path d="M4 11.5 12 5l8 6.5" />
+      <path d="M6 11v6h4v-4h4v4h4v-6" />
+      <path d="M3 19h18" />
+      <path d="M3 21h18" />
+    </svg>
+  );
+}
+
 export function MoleculeIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...baseProps} {...props}>
diff --git a/apps/web/components/shell/nav-links.tsx b/apps/web/components/shell/nav-links.tsx
index c24f9b97..557da9da 100644
--- a/apps/web/components/shell/nav-links.tsx
+++ b/apps/web/components/shell/nav-links.tsx
@@ -29,6 +29,7 @@ import {
   CodeIcon,
   ShareIcon,
   MoleculeIcon,
+  HouseStackIcon,
 } from "./icons";
 
 export interface NavLink {
@@ -116,6 +117,16 @@ export const PRIMARY_DESKTOP: readonly NavLink[] = [
     icon: <GroupsIcon />,
     matchPrefix: "/pools",
   },
+  // "The Bet" sits after Pools so the headline-grabbing hook is one
+  // click away on every page (Tim 2026-06-05). The page itself is
+  // `/the-bet` (the long-form letter and the NZ$1.5M house wager).
+  {
+    label: "The Bet",
+    i18nKey: "nav.the_bet",
+    href: "/the-bet",
+    icon: <HouseStackIcon />,
+    matchPrefix: "/the-bet",
+  },
 ];
 
 /**
@@ -148,6 +159,7 @@ export const DRAWER_PRIMARY: readonly NavLink[] = [
   { label: "3D Molecule",      i18nKey: "nav.molecule_3d",     href: "/world-cup-2026/molecule",   icon: <MoleculeIcon />, matchPrefix: "/world-cup-2026/molecule" },
   { label: "Leaderboard",      i18nKey: "nav.leaderboard",     href: "/leaderboard",               icon: <TrophyIcon />,   matchPrefix: "/leaderboard" },
   { label: "Pools",            i18nKey: "nav.pools",           href: "/syndicates",                icon: <GroupsIcon />,   matchPrefix: "/syndicates" },
+  { label: "The Bet",          i18nKey: "nav.the_bet",         href: "/the-bet",                   icon: <HouseStackIcon />, matchPrefix: "/the-bet" },
   { label: "My Profile",       i18nKey: "nav.profile_my",      href: "/profile",                   icon: <ProfileIcon />,  matchPrefix: "/profile" },
   { label: "Share & Save",     i18nKey: "nav.share_save",      href: "/world-cup-2026/save-share", icon: <ShareIcon />,    matchPrefix: "/world-cup-2026/save-share" },
 ];