feat(mobile): move journal date picker into page header (#8968)

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>
       </>
     );

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))',
-    },
-  },
 });

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')} />