From db8378a01f03686e4e3c3f0c5daf453dbb33dbc9 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 21:06:03 +0700
Subject: [PATCH] fix: Remove duplicate header in SettingsLayout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed double header issue in Settings pages.

Issue:
- SettingsLayout showed inline header when action prop exists
- This caused duplicate headers:
  1. Contextual header (sticky, correct) ✅
  2. Inline header (scrollable, duplicate) ❌

Root Cause:
- Logic was: !onSave (hide inline if Save button exists)
- But pages with custom actions (like Refresh) still showed inline header

Fix:
- Changed logic to: !onSave && !action
- Now inline header only shows when NO contextual header is used
- If onSave OR action exists → use contextual header only

Result:
✅ Payments page: Single "Payments" header in contextual area
✅ Store page: Single "Store Details" header with Save button
✅ Index page: Inline header (no contextual header needed)
✅ No more duplicate headers
---
 admin-spa/src/routes/Settings/components/SettingsLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
index acf3cc1..66d75eb 100644
--- a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
+++ b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
@@ -72,7 +72,8 @@ export function SettingsLayout({
 
       {/* Content */}
       <div className="w-full max-w-5xl mx-auto min-w-0">
-        {!onSave && (
+        {/* Only show inline header if NOT using contextual header (no onSave and no action) */}
+        {!onSave && !action && (
           <div className="mb-8">
             <div className="flex items-start justify-between gap-4 min-w-0">
               <div className="min-w-0 flex-1">
@@ -81,7 +82,6 @@ export function SettingsLayout({
                   <p className="text-muted-foreground mt-2">{description}</p>
                 )}
               </div>
-              {action && <div className="shrink-0">{action}</div>}
             </div>
           </div>
         )}