From 372dbf5ec89bb6a02237cb54e4221d946130f32b Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 2 Dec 2024 02:05:04 +0000
Subject: [PATCH] feat(mobile): move journal date picker into page header
 (#8968)

---
 .../mobile/components/page-header/index.tsx   | 13 ++++++++++
 .../detail/mobile-detail-page.css.ts          | 10 +-------
 .../workspace/detail/mobile-detail-page.tsx   | 24 +++++++++----------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/core/src/mobile/components/page-header/index.tsx b/packages/frontend/core/src/mobile/components/page-header/index.tsx
index 536d67d88..2ff0ce6a9 100644
--- a/packages/frontend/core/src/mobile/components/page-header/index.tsx
+++ b/packages/frontend/core/src/mobile/components/page-header/index.tsx
@@ -44,6 +44,15 @@ export interface PageHeaderProps
   prefixStyle?: React.CSSProperties;
   suffixClassName?: string;
   suffixStyle?: React.CSSProperties;
+
+  /**
+   * Custom bottom content
+   */
+  bottom?: ReactNode;
+  /**
+   * Bottom Spacer height
+   */
+  bottomSpacer?: number;
 }
 export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
   function PageHeader(
@@ -59,6 +68,8 @@ export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
       prefixStyle,
       suffixClassName,
       suffixStyle,
+      bottom,
+      bottomSpacer,
       ...attrs
     },
     ref
@@ -120,11 +131,13 @@ export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
               {suffix}
             </section>
           </header>
+          {bottom}
         </SafeArea>
 
         {/* Spacer */}
         <SafeArea top>
           <div className={styles.headerSpacer} />
+          {bottom ? <div style={{ height: bottomSpacer ?? 0 }} /> : null}
         </SafeArea>
       </>
     );
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
index 5a5f60330..ead03e3e0 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
+++ b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.css.ts
@@ -94,14 +94,6 @@ export const journalIconButton = style({
   display: 'flex',
 });
 
-export const journalDatePickerSticky = style({
+export const journalDatePicker = style({
   background: cssVarV2('layer/background/primary'),
-  position: 'sticky',
-  zIndex: 1,
-  top: 56,
-  selectors: {
-    '&[data-standalone]': {
-      top: 'calc(44px + env(safe-area-inset-top, 12px))',
-    },
-  },
 });
diff --git a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
index 3c69993c6..ae0f7823a 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx
@@ -253,6 +253,17 @@ const MobileDetailPage = ({
               <PageHeaderMenuButton />
             </>
           }
+          bottom={
+            date ? (
+              <JournalDatePicker
+                date={date}
+                onChange={handleDateChange}
+                withDotDates={allJournalDates}
+                className={styles.journalDatePicker}
+              />
+            ) : null
+          }
+          bottomSpacer={94}
         >
           {date ? (
             <span className={bodyEmphasized}>
@@ -260,19 +271,6 @@ const MobileDetailPage = ({
             </span>
           ) : null}
         </PageHeader>
-        {date ? (
-          <JournalDatePicker
-            date={date}
-            onChange={handleDateChange}
-            withDotDates={allJournalDates}
-            className={styles.journalDatePickerSticky}
-            data-standalone={
-              environment.isPwa || BUILD_CONFIG.isAndroid || BUILD_CONFIG.isIOS
-                ? ''
-                : undefined
-            }
-          />
-        ) : null}
         <DetailPageImpl />
         {date ? (
           <AppTabs background={cssVarV2('layer/background/primary')} />