From 54ff20c7555e028b50471ac83a7030921c76f43b Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 29 Sep 2025 11:51:59 -0500
Subject: [PATCH] refactor: completely remove @nav parallel routes and simplify
 navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove entire src/app/@nav directory and all parallel route files
- Delete complex AppNav component that handled route-based nav detection
- Update layout.tsx to remove nav slot parameter entirely
- Create simple PageWithNav component that takes title/emoji as props
- Update matching and memory-quiz games to use PageWithNav directly
- Each page now controls its own navigation - dead simple and direct

This eliminates the over-engineered parallel routes approach in favor of
straightforward React prop passing. Much easier to understand and maintain.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/@nav/create/page.tsx         |  3 --
 apps/web/src/app/@nav/default.tsx             |  3 --
 apps/web/src/app/@nav/games/matching/page.tsx | 14 -----
 .../src/app/@nav/games/memory-quiz/page.tsx   | 14 -----
 apps/web/src/app/@nav/games/page.tsx          |  3 --
 apps/web/src/app/@nav/guide/page.tsx          |  3 --
 apps/web/src/app/@nav/page.tsx                |  3 --
 apps/web/src/app/games/matching/page.tsx      |  9 ++--
 apps/web/src/app/games/memory-quiz/page.tsx   | 12 +++--
 apps/web/src/app/layout.tsx                   |  4 --
 apps/web/src/components/AppNav.tsx            | 52 -------------------
 apps/web/src/components/PageWithNav.tsx       | 33 ++++++++++++
 12 files changed, 46 insertions(+), 107 deletions(-)
 delete mode 100644 apps/web/src/app/@nav/create/page.tsx
 delete mode 100644 apps/web/src/app/@nav/default.tsx
 delete mode 100644 apps/web/src/app/@nav/games/matching/page.tsx
 delete mode 100644 apps/web/src/app/@nav/games/memory-quiz/page.tsx
 delete mode 100644 apps/web/src/app/@nav/games/page.tsx
 delete mode 100644 apps/web/src/app/@nav/guide/page.tsx
 delete mode 100644 apps/web/src/app/@nav/page.tsx
 delete mode 100644 apps/web/src/components/AppNav.tsx
 create mode 100644 apps/web/src/components/PageWithNav.tsx

diff --git a/apps/web/src/app/@nav/create/page.tsx b/apps/web/src/app/@nav/create/page.tsx
deleted file mode 100644
index 44b9715f..00000000
--- a/apps/web/src/app/@nav/create/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function CreateNav() {
-  return null
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/default.tsx b/apps/web/src/app/@nav/default.tsx
deleted file mode 100644
index 867b896c..00000000
--- a/apps/web/src/app/@nav/default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function DefaultNav() {
-  return null // No navigation content for routes without specific @nav slots
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/games/matching/page.tsx b/apps/web/src/app/@nav/games/matching/page.tsx
deleted file mode 100644
index 9141cf32..00000000
--- a/apps/web/src/app/@nav/games/matching/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function MatchingNav() {
-  return (
-    <h1 style={{
-      fontSize: '18px',
-      fontWeight: 'bold',
-      background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
-      backgroundClip: 'text',
-      color: 'transparent',
-      margin: 0
-    }}>
-      🧩 Memory Pairs
-    </h1>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/games/memory-quiz/page.tsx b/apps/web/src/app/@nav/games/memory-quiz/page.tsx
deleted file mode 100644
index 19c76ad7..00000000
--- a/apps/web/src/app/@nav/games/memory-quiz/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function MemoryQuizNav() {
-  return (
-    <h1 style={{
-      fontSize: '18px',
-      fontWeight: 'bold',
-      background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
-      backgroundClip: 'text',
-      color: 'transparent',
-      margin: 0
-    }}>
-      🧠 Memory Lightning
-    </h1>
-  )
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/games/page.tsx b/apps/web/src/app/@nav/games/page.tsx
deleted file mode 100644
index bbdf8a2a..00000000
--- a/apps/web/src/app/@nav/games/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function GamesNav() {
-  return null
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/guide/page.tsx b/apps/web/src/app/@nav/guide/page.tsx
deleted file mode 100644
index 32196175..00000000
--- a/apps/web/src/app/@nav/guide/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function GuideNav() {
-  return null
-}
\ No newline at end of file
diff --git a/apps/web/src/app/@nav/page.tsx b/apps/web/src/app/@nav/page.tsx
deleted file mode 100644
index 9be08d2d..00000000
--- a/apps/web/src/app/@nav/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function HomeNav() {
-  return null
-}
\ No newline at end of file
diff --git a/apps/web/src/app/games/matching/page.tsx b/apps/web/src/app/games/matching/page.tsx
index d32aa1a6..95e3805f 100644
--- a/apps/web/src/app/games/matching/page.tsx
+++ b/apps/web/src/app/games/matching/page.tsx
@@ -1,10 +1,13 @@
+import { PageWithNav } from '@/components/PageWithNav'
 import { MemoryPairsProvider } from './context/MemoryPairsContext'
 import { MemoryPairsGame } from './components/MemoryPairsGame'
 
 export default function MatchingPage() {
   return (
-    <MemoryPairsProvider>
-      <MemoryPairsGame />
-    </MemoryPairsProvider>
+    <PageWithNav navTitle="Memory Pairs" navEmoji="🧩">
+      <MemoryPairsProvider>
+        <MemoryPairsGame />
+      </MemoryPairsProvider>
+    </PageWithNav>
   )
 }
\ No newline at end of file
diff --git a/apps/web/src/app/games/memory-quiz/page.tsx b/apps/web/src/app/games/memory-quiz/page.tsx
index 379d57dc..b5abdc2b 100644
--- a/apps/web/src/app/games/memory-quiz/page.tsx
+++ b/apps/web/src/app/games/memory-quiz/page.tsx
@@ -6,7 +6,7 @@ import { css } from '../../../../styled-system/css'
 import { AbacusReact } from '@soroban/abacus-react'
 import { useAbacusConfig } from '@soroban/abacus-react'
 import { isPrefix } from '../../../lib/memory-quiz-utils'
-import { StandardGameLayout } from '../../../components/StandardGameLayout'
+import { PageWithNav } from '@/components/PageWithNav'
 
 
 interface QuizCard {
@@ -1733,7 +1733,7 @@ export default function MemoryQuizPage() {
   }, [state.prefixAcceptanceTimeout])
 
   return (
-    <StandardGameLayout>
+    <PageWithNav navTitle="Memory Lightning" navEmoji="🧠">
       <style dangerouslySetInnerHTML={{ __html: globalAnimations }} />
 
       <div
@@ -1741,14 +1741,16 @@ export default function MemoryQuizPage() {
           flex: 1,
           display: 'flex',
           flexDirection: 'column',
-          overflow: 'auto'
+          overflow: 'auto',
+          padding: '20px 8px',
+          minHeight: '100vh',
+          background: 'linear-gradient(135deg, #f8fafc, #e2e8f0)'
         }}
       >
         <div
           style={{
             maxWidth: '100%',
             margin: '0 auto',
-            padding: '0 8px',
             flex: 1,
             display: 'flex',
             flexDirection: 'column'
@@ -1800,6 +1802,6 @@ export default function MemoryQuizPage() {
           </div>
         </div>
       </div>
-    </StandardGameLayout>
+    </PageWithNav>
   )
 }
\ No newline at end of file
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 65ce7772..bee716e6 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata, Viewport } from 'next'
 import './globals.css'
 import { ClientProviders } from '@/components/ClientProviders'
-import { AppNav } from '@/components/AppNav'
 
 export const metadata: Metadata = {
   title: 'Soroban Flashcard Generator',
@@ -17,16 +16,13 @@ export const viewport: Viewport = {
 
 export default function RootLayout({
   children,
-  nav,
 }: {
   children: React.ReactNode
-  nav: React.ReactNode
 }) {
   return (
     <html lang="en">
       <body>
         <ClientProviders>
-          <AppNav>{nav}</AppNav>
           {children}
         </ClientProviders>
       </body>
diff --git a/apps/web/src/components/AppNav.tsx b/apps/web/src/components/AppNav.tsx
deleted file mode 100644
index fe059a02..00000000
--- a/apps/web/src/components/AppNav.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react'
-import { headers } from 'next/headers'
-import { AppNavBar } from './AppNavBar'
-
-interface AppNavProps {
-  children: React.ReactNode
-}
-
-function getNavContentForPath(pathname: string): React.ReactNode {
-  // Route-based nav content - no lazy loading needed
-  if (pathname === '/games/matching' || pathname.startsWith('/arcade') && pathname.includes('matching')) {
-    return (
-      <h1 style={{
-        fontSize: '18px',
-        fontWeight: 'bold',
-        background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
-        backgroundClip: 'text',
-        color: 'transparent',
-        margin: 0
-      }}>
-        🧩 Memory Pairs
-      </h1>
-    )
-  }
-
-  if (pathname === '/games/memory-quiz' || pathname.startsWith('/arcade') && pathname.includes('memory-quiz')) {
-    return (
-      <h1 style={{
-        fontSize: '18px',
-        fontWeight: 'bold',
-        background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
-        backgroundClip: 'text',
-        color: 'transparent',
-        margin: 0
-      }}>
-        🧠 Memory Lightning
-      </h1>
-    )
-  }
-
-  return null
-}
-
-export function AppNav({ children }: AppNavProps) {
-  const headersList = headers()
-  const pathname = headersList.get('x-pathname') || ''
-
-  // Use @nav slot content if available, otherwise fall back to route-based detection
-  const navContent = children || getNavContentForPath(pathname)
-
-  return <AppNavBar navSlot={navContent} />
-}
\ No newline at end of file
diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
new file mode 100644
index 00000000..23f3af89
--- /dev/null
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import React from 'react'
+import { AppNavBar } from './AppNavBar'
+
+interface PageWithNavProps {
+  navTitle?: string
+  navEmoji?: string
+  children: React.ReactNode
+}
+
+export function PageWithNav({ navTitle, navEmoji, children }: PageWithNavProps) {
+  // Create nav content if title is provided
+  const navContent = navTitle ? (
+    <h1 style={{
+      fontSize: '18px',
+      fontWeight: 'bold',
+      background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+      backgroundClip: 'text',
+      color: 'transparent',
+      margin: 0
+    }}>
+      {navEmoji && `${navEmoji} `}{navTitle}
+    </h1>
+  ) : null
+
+  return (
+    <>
+      <AppNavBar navSlot={navContent} />
+      {children}
+    </>
+  )
+}
\ No newline at end of file