Fixed default date range handling. Added header to share page.

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">

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,6 +20,8 @@ export function WebsiteHeader() {
     <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
       <Row alignItems="center" gap="6">
         <ActiveUsers websiteId={website.id} />
+
+        {showActions && (
           <Row alignItems="center" gap>
             <ShareButton websiteId={website.id} shareId={website.shareId} />
             <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
@@ -29,6 +31,7 @@ export function WebsiteHeader() {
               <Text>Edit</Text>
             </LinkButton>
           </Row>
+        )}
       </Row>
     </PageHeader>
   );

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>

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

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)

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;
 }