From dd0424e5a127f62d520b32c9a472a0430d3a3611 Mon Sep 17 00:00:00 2001
From: Alireza <alireza@nwhco.ir>
Date: Tue, 25 Aug 2026 22:18:59 +0000
Subject: [PATCH] fix(ui): unify PageHeader with Flutter AppBar specs (56px
 toolbar, safeArea, sticky blur)

---
 .../candidate-contact-client.tsx              |  4 +-
 .../finding-match/finding-match-client.tsx    |  4 +-
 src/app/new-match/new-match-client.tsx        | 18 +---
 .../request-accepted-client.tsx               |  4 +-
 src/app/request-sent/request-sent-client.tsx  |  4 +-
 src/components/Componentes/page-header.tsx    | 82 ++++++++++++-------
 6 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/app/candidate-contact/candidate-contact-client.tsx b/src/app/candidate-contact/candidate-contact-client.tsx
index 6c3e667..f31c167 100644
--- a/src/app/candidate-contact/candidate-contact-client.tsx
+++ b/src/app/candidate-contact/candidate-contact-client.tsx
@@ -130,7 +130,7 @@ export default function CandidateContactClient() {
           />
         ) : null}
 
-        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))]">
+        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))]">
           <PageHeader
             className="-mx-[6px]"
             profile={profile}
@@ -353,7 +353,7 @@ export default function CandidateContactClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-36">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pb-36">
         <PageHeader profile={profile} />
 
         <section className="flex flex-1 items-center justify-center">
diff --git a/src/app/finding-match/finding-match-client.tsx b/src/app/finding-match/finding-match-client.tsx
index f7f09ac..4a6edfc 100644
--- a/src/app/finding-match/finding-match-client.tsx
+++ b/src/app/finding-match/finding-match-client.tsx
@@ -87,9 +87,9 @@ export default function FindingMatchClient() {
 
       <main
         style={{ paddingBottom: "calc(100px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" />
+        <PageHeader />
 
         <section className="mt-20 flex flex-1 flex-col items-center">
           <div className="relative h-[124px] w-[130px]" aria-hidden="true">
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 6b717f7..92d44a3 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -636,14 +636,7 @@ export default function NewMatchClient() {
         <main
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
         >
-          <div
-            style={{
-              paddingTop: `${Math.max(12, top + 4)}px`,
-            }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
-          >
-            <PageHeader profile={profile} />
-          </div>
+          <PageHeader profile={profile} />
 
           <div
             style={{
@@ -725,14 +718,7 @@ export default function NewMatchClient() {
       <main
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
       >
-        <div
-          style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
-        >
-          <PageHeader profile={profile} />
-        </div>
+        <PageHeader profile={profile} />
 
         <div
           style={{
diff --git a/src/app/request-accepted/request-accepted-client.tsx b/src/app/request-accepted/request-accepted-client.tsx
index 02ddae0..1d5a7a0 100644
--- a/src/app/request-accepted/request-accepted-client.tsx
+++ b/src/app/request-accepted/request-accepted-client.tsx
@@ -538,8 +538,8 @@ export default function RequestAcceptedClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <PageHeader className="-mx-[6px]" profile={profile} />
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))] text-center">
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
           <section className="flex flex-col items-center">
diff --git a/src/app/request-sent/request-sent-client.tsx b/src/app/request-sent/request-sent-client.tsx
index 01fa028..fe94f51 100644
--- a/src/app/request-sent/request-sent-client.tsx
+++ b/src/app/request-sent/request-sent-client.tsx
@@ -88,9 +88,9 @@ export default function RequestSentClient() {
 
       <main
         style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" profile={profile} />
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-16 pt-8">
           <section className="flex flex-col items-center">
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index 6d9603a..7b2ff83 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -22,14 +22,26 @@ type PageHeaderProps = {
    */
   enableProfileQuery?: boolean;
   profile?: any;
+  /**
+   * Whether the header is sticky at the top during scroll (matching Flutter AppBar).
+   * Defaults to true.
+   */
+  sticky?: boolean;
 };
 
+/**
+ * Standard AppBar for Marriage WebApp matching Flutter's Scaffold.appBar:
+ * - Toolbar Height: 56px (Flutter Material kToolbarHeight)
+ * - Top Safe Area: max(12px, var(--safe-top) + 4px)
+ * - Sticky at top during body scroll with frosted blur backdrop
+ */
 export function PageHeader({
   className,
   leftButton,
   rightButton,
   enableProfileQuery = true,
   profile: profileProp,
+  sticky = true,
 }: PageHeaderProps) {
   const { dictionary: t } = useI18n();
 
@@ -57,51 +69,61 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex items-center justify-between pb-3", className]
+      style={{
+        paddingTop: "max(12px, calc(var(--safe-top) + 4px))",
+      }}
+      className={[
+        sticky
+          ? "sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F7F1F0]/90 backdrop-blur-md"
+          : "relative z-30 -mx-[17px] px-[17px]",
+        className,
+      ]
         .filter(Boolean)
         .join(" ")}
     >
-      {leftButton?.className?.includes("hidden") ? (
-        <div className="size-10 shrink-0" />
-      ) : (
-        <NavigationButton icon="back" profile={profile} {...leftButton} />
-      )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground">
-        {t["Habib Marriage"]}
-      </h1>
+      <div className="flex h-[56px] items-center justify-between">
+        {leftButton?.className?.includes("hidden") ? (
+          <div className="size-10 shrink-0" />
+        ) : (
+          <NavigationButton icon="back" profile={profile} {...leftButton} />
+        )}
 
-      {isCustomRightButton ? (
-        <NavigationButton
-          icon={iconFromProp || "support"}
-          profile={profile}
-          {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
-          {...rightButtonRest}
-        />
-      ) : isMale ? (
-        <div className="flex items-center gap-2">
+        <h1 className="font-faminela text-[20px] font-normal text-[#171717] leading-none select-none">
+          {t["Habib Marriage"]}
+        </h1>
+
+        {isCustomRightButton ? (
           <NavigationButton
-            icon="subscription"
+            icon={iconFromProp || "support"}
             profile={profile}
-            iconLabel={t["Subscription Status"] || "Subscription"}
+            {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
+            {...rightButtonRest}
           />
+        ) : isMale ? (
+          <div className="flex items-center gap-2">
+            <NavigationButton
+              icon="subscription"
+              profile={profile}
+              iconLabel={t["Subscription Status"] || "Subscription"}
+            />
+            <NavigationButton
+              icon="support"
+              profile={profile}
+              iconLabel={t["Support"]}
+              {...rightButtonRest}
+            />
+          </div>
+        ) : (
           <NavigationButton
             icon="support"
             profile={profile}
             iconLabel={t["Support"]}
             {...rightButtonRest}
           />
-        </div>
-      ) : (
-        <NavigationButton
-          icon="support"
-          profile={profile}
-          iconLabel={t["Support"]}
-          {...rightButtonRest}
-        />
-      )}
+        )}
+      </div>
     </header>
   );
 }
 
 export default PageHeader;
-