From caf04015bb8f3143e06f59290c5bf46b2b651dd6 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 5 Oct 2025 16:02:23 -0700
Subject: [PATCH] Fixed default date range handling. Added header to share
 page.

---
 .../settings/preferences/DateRangeSetting.tsx |  5 +++-
 .../websites/[websiteId]/WebsiteHeader.tsx    | 23 +++++++++++--------
 .../websites/[websiteId]/WebsiteLayout.tsx    |  2 +-
 src/app/share/[...shareId]/SharePage.tsx      |  2 ++
 src/components/hooks/useDateRange.ts          | 10 +++++---
 src/styles/global.css                         |  2 +-
 6 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/app/(main)/settings/preferences/DateRangeSetting.tsx b/src/app/(main)/settings/preferences/DateRangeSetting.tsx
index e47ce0b6..c0e8221e 100644
--- a/src/app/(main)/settings/preferences/DateRangeSetting.tsx
+++ b/src/app/(main)/settings/preferences/DateRangeSetting.tsx
@@ -14,7 +14,10 @@ export function DateRangeSetting() {
     setDate(value);
   };
 
-  const handleReset = () => setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE);
+  const handleReset = () => {
+    setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE);
+    setDate(DEFAULT_DATE_RANGE_VALUE);
+  };
 
   return (
     <Row gap="3">
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index 4a2ffdf0..0f9f8123 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -7,7 +7,7 @@ import { WebsiteShareForm } from '@/app/(main)/websites/[websiteId]/settings/Web
 import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
 
-export function WebsiteHeader() {
+export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
   const website = useWebsite();
   const { renderUrl, pathname } = useNavigation();
   const isSettings = pathname.endsWith('/settings');
@@ -20,15 +20,18 @@ export function WebsiteHeader() {
     <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
       <Row alignItems="center" gap="6">
         <ActiveUsers websiteId={website.id} />
-        <Row alignItems="center" gap>
-          <ShareButton websiteId={website.id} shareId={website.shareId} />
-          <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
-            <Icon>
-              <Edit />
-            </Icon>
-            <Text>Edit</Text>
-          </LinkButton>
-        </Row>
+
+        {showActions && (
+          <Row alignItems="center" gap>
+            <ShareButton websiteId={website.id} shareId={website.shareId} />
+            <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
+              <Icon>
+                <Edit />
+              </Icon>
+              <Text>Edit</Text>
+            </LinkButton>
+          </Row>
+        )}
       </Row>
     </PageHeader>
   );
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
index e25541e9..61766921 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
@@ -21,7 +21,7 @@ export function WebsiteLayout({ websiteId, children }: { websiteId: string; chil
           </Column>
         )}
         <PageBody gap>
-          <WebsiteHeader />
+          <WebsiteHeader showActions />
           <Column>{children}</Column>
         </PageBody>
       </Grid>
diff --git a/src/app/share/[...shareId]/SharePage.tsx b/src/app/share/[...shareId]/SharePage.tsx
index 0fa3c0bf..f33798a1 100644
--- a/src/app/share/[...shareId]/SharePage.tsx
+++ b/src/app/share/[...shareId]/SharePage.tsx
@@ -6,6 +6,7 @@ import { useShareTokenQuery } from '@/components/hooks';
 import { PageBody } from '@/components/common/PageBody';
 import { Header } from './Header';
 import { Footer } from './Footer';
+import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
 
 export function SharePage({ shareId }) {
   const { shareToken, isLoading } = useShareTokenQuery(shareId);
@@ -19,6 +20,7 @@ export function SharePage({ shareId }) {
       <PageBody gap>
         <Header />
         <WebsiteProvider websiteId={shareToken.websiteId}>
+          <WebsiteHeader showActions={false} />
           <WebsitePage websiteId={shareToken.websiteId} />
         </WebsiteProvider>
         <Footer />
diff --git a/src/components/hooks/useDateRange.ts b/src/components/hooks/useDateRange.ts
index b5d967ed..de53343a 100644
--- a/src/components/hooks/useDateRange.ts
+++ b/src/components/hooks/useDateRange.ts
@@ -2,16 +2,20 @@ import { useNavigation } from '@/components/hooks/useNavigation';
 import { useMemo } from 'react';
 import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date';
 import { useLocale } from '@/components/hooks/useLocale';
-import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
+import { getItem } from '@/lib/storage';
 
 export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
   const {
-    query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev' },
+    query: { date = '', offset = 0, compare = 'prev' },
   } = useNavigation();
   const { locale } = useLocale();
 
   const dateRange = useMemo(() => {
-    const dateRangeObject = parseDateRange(date, locale);
+    const dateRangeObject = parseDateRange(
+      date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
+      locale,
+    );
 
     return !options.ignoreOffset && offset
       ? getOffsetDateRange(dateRangeObject, +offset)
diff --git a/src/styles/global.css b/src/styles/global.css
index 5f3b1602..d63ebf38 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,7 +3,7 @@ body {
   font-family: var(--font-family), sans-serif;
   color: var(--font-color);
   font-size: var(--font-size);
-  background-color: var(--background-color);
+  background-color: var(--base-color-2);
   width: 100%;
   min-height: 100vh;
 }