From 83760c4a9bf6a8ce31289b9944bfcae3971829e3 Mon Sep 17 00:00:00 2001
From: Felix Faerber <ffaerber@gmail.com>
Date: Thu, 28 May 2026 09:29:20 +0300
Subject: [PATCH] add shared navbar on /account, /chat, /bee

Three-link nav (Chat / Account / Bee) with active-route highlighting,
plus a t4t Gateway home link on the left. Replaces the bespoke header
on the chat page; account and bee gain the same top-of-page nav.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/components/nav.tsx | 37 +++++++++++++++++++++++++++++++++++++
 app/routes/account.tsx | 15 +++++++++++----
 app/routes/bee.tsx     | 15 +++++++++++----
 app/routes/chat.tsx    | 15 +++++----------
 4 files changed, 64 insertions(+), 18 deletions(-)
 create mode 100644 app/components/nav.tsx

diff --git a/app/components/nav.tsx b/app/components/nav.tsx
new file mode 100644
index 0000000..b2427aa
--- /dev/null
+++ b/app/components/nav.tsx
@@ -0,0 +1,37 @@
+import { NavLink } from 'react-router';
+
+const ITEMS = [
+  { to: '/chat', label: 'Chat' },
+  { to: '/account', label: 'Account' },
+  { to: '/bee', label: 'Bee' },
+];
+
+export function Nav() {
+  return (
+    <nav className='border-b border-neutral-200 bg-white'>
+      <div className='mx-auto flex max-w-3xl items-center justify-between px-6 py-3'>
+        <a href='/' className='text-sm font-semibold tracking-tight'>
+          t4t Gateway
+        </a>
+        <ul className='flex gap-1'>
+          {ITEMS.map((item) => (
+            <li key={item.to}>
+              <NavLink
+                to={item.to}
+                className={({ isActive }) =>
+                  `inline-flex h-8 items-center rounded-md px-3 text-sm font-medium transition-colors ${
+                    isActive
+                      ? 'bg-neutral-900 text-white'
+                      : 'text-neutral-700 hover:bg-neutral-100'
+                  }`
+                }
+              >
+                {item.label}
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+}
diff --git a/app/routes/account.tsx b/app/routes/account.tsx
index 76f7099..61f7eb3 100644
--- a/app/routes/account.tsx
+++ b/app/routes/account.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Nav } from '~/components/nav';
 
 const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
 const WEI_PER_XBZZ = 10n ** 18n;
@@ -168,14 +169,19 @@ export default function Account() {
 
   if (loading) {
     return (
-      <main className='flex min-h-screen items-center justify-center'>
-        <p className='text-sm text-neutral-600'>Loading…</p>
-      </main>
+      <>
+        <Nav />
+        <main className='flex min-h-[60vh] items-center justify-center'>
+          <p className='text-sm text-neutral-600'>Loading…</p>
+        </main>
+      </>
     );
   }
 
   return (
-    <main className='mx-auto min-h-screen max-w-3xl px-6 py-12'>
+    <>
+      <Nav />
+      <main className='mx-auto max-w-3xl px-6 py-10'>
       <div className='flex items-center justify-between'>
         <div>
           <h1 className='text-2xl font-semibold'>Account</h1>
@@ -394,5 +400,6 @@ export default function Account() {
         </div>
       )}
     </main>
+    </>
   );
 }
diff --git a/app/routes/bee.tsx b/app/routes/bee.tsx
index 93e042e..40536ac 100644
--- a/app/routes/bee.tsx
+++ b/app/routes/bee.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { Nav } from '~/components/nav';
 
 const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
 
@@ -100,14 +101,19 @@ export default function BeePage() {
 
   if (loading) {
     return (
-      <main className='flex min-h-screen items-center justify-center'>
-        <p className='text-sm text-neutral-600'>Loading Bee stats…</p>
-      </main>
+      <>
+        <Nav />
+        <main className='flex min-h-[60vh] items-center justify-center'>
+          <p className='text-sm text-neutral-600'>Loading Bee stats…</p>
+        </main>
+      </>
     );
   }
 
   return (
-    <main className='mx-auto min-h-screen max-w-3xl px-6 py-12'>
+    <>
+      <Nav />
+      <main className='mx-auto max-w-3xl px-6 py-10'>
       <h1 className='text-2xl font-semibold'>Bee node</h1>
       <p className='mt-1 text-sm text-neutral-600'>Read-only status of the operator's Bee node.</p>
 
@@ -198,5 +204,6 @@ export default function BeePage() {
         </Card>
       </div>
     </main>
+    </>
   );
 }
diff --git a/app/routes/chat.tsx b/app/routes/chat.tsx
index 55bdbac..83d5da3 100644
--- a/app/routes/chat.tsx
+++ b/app/routes/chat.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { Nav } from '~/components/nav';
 
 const API_URL = import.meta.env.VITE_API_URL ?? 'https://api.t4t-gateway.com';
 
@@ -100,15 +101,9 @@ export default function Chat() {
 
   return (
     <main className='flex min-h-screen flex-col'>
-      <header className='border-b border-neutral-200 bg-white px-6 py-3'>
-        <div className='mx-auto flex max-w-3xl items-center justify-between'>
-          <div className='flex items-center gap-3'>
-            <a href='/account' className='text-sm font-medium text-neutral-700 hover:underline'>
-              ← Account
-            </a>
-            <span className='text-neutral-300'>|</span>
-            <h1 className='text-sm font-semibold'>Chat</h1>
-          </div>
+      <Nav />
+      <div className='border-b border-neutral-200 bg-white px-6 py-2'>
+        <div className='mx-auto flex max-w-3xl items-center justify-end'>
           <select
             aria-label='Model'
             value={model}
@@ -125,7 +120,7 @@ export default function Chat() {
             ))}
           </select>
         </div>
-      </header>
+      </div>
 
       <div
         ref={scrollRef}