From a4a95dcca3e192c9e482e87fbad813da261e9dd6 Mon Sep 17 00:00:00 2001
From: tinkle-community <tinklefund@gmail.com>
Date: Sun, 30 Nov 2025 12:40:14 +0800
Subject: [PATCH] fix: ensure tab navigation updates page state correctly Tab
 buttons were only calling navigate() which changes URL but doesn't trigger
 popstate events. App.tsx listens to popstate/hashchange to update page state,
 so clicks appeared to do nothing. Now all tab buttons call both
 onPageChange() callback and navigate() to ensure page state updates and URL
 stays in sync.

---
 web/src/components/HeaderBar.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/web/src/components/HeaderBar.tsx b/web/src/components/HeaderBar.tsx
index 30e7d8a6..eb7180c9 100644
--- a/web/src/components/HeaderBar.tsx
+++ b/web/src/components/HeaderBar.tsx
@@ -101,6 +101,9 @@ export default function HeaderBar({
               <>
                 <button
                   onClick={() => {
+                    if (onPageChange) {
+                      onPageChange('competition')
+                    }
                     navigate('/competition')
                   }}
                   className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
@@ -140,6 +143,9 @@ export default function HeaderBar({
 
                 <button
                   onClick={() => {
+                    if (onPageChange) {
+                      onPageChange('traders')
+                    }
                     navigate('/traders')
                   }}
                   className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
@@ -179,6 +185,9 @@ export default function HeaderBar({
 
                 <button
                   onClick={() => {
+                    if (onPageChange) {
+                      onPageChange('trader')
+                    }
                     navigate('/dashboard')
                   }}
                   className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
@@ -261,9 +270,8 @@ export default function HeaderBar({
                   onClick={() => {
                     if (onPageChange) {
                       onPageChange('faq')
-                    } else {
-                      navigate('/faq')
                     }
+                    navigate('/faq')
                   }}
                   className="text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500"
                   style={{
@@ -708,9 +716,8 @@ export default function HeaderBar({
                 onClick={() => {
                   if (onPageChange) {
                     onPageChange('traders')
-                  } else {
-                    navigate('/traders')
                   }
+                  navigate('/traders')
                   setMobileMenuOpen(false)
                 }}
                 className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
@@ -743,9 +750,8 @@ export default function HeaderBar({
                 onClick={() => {
                   if (onPageChange) {
                     onPageChange('trader')
-                  } else {
-                    navigate('/dashboard')
                   }
+                  navigate('/dashboard')
                   setMobileMenuOpen(false)
                 }}
                 className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"
@@ -778,9 +784,8 @@ export default function HeaderBar({
                 onClick={() => {
                   if (onPageChange) {
                     onPageChange('faq')
-                  } else {
-                    navigate('/faq')
                   }
+                  navigate('/faq')
                   setMobileMenuOpen(false)
                 }}
                 className="block text-sm font-bold transition-all duration-300 relative focus:outline-2 focus:outline-yellow-500 hover:text-yellow-500"