Updated date range handling.

src/app/(main)/SideNav.tsx

@@ -19,32 +19,32 @@ export function SideNav(props: any) {
   const links = [
     {
       label: formatMessage(labels.websites),
-      href: renderUrl('/websites'),
+      href: '/websites',
       icon: <Globe />,
     },
     {
       label: formatMessage(labels.boards),
-      href: renderUrl('/boards'),
+      href: '/boards',
       icon: <LayoutDashboard />,
     },
     {
       label: formatMessage(labels.links),
-      href: renderUrl('/links'),
+      href: '/links',
       icon: <LinkIcon />,
     },
     {
       label: formatMessage(labels.pixels),
-      href: renderUrl('/pixels'),
+      href: '/pixels',
       icon: <Grid2X2 />,
     },
     {
       label: formatMessage(labels.settings),
-      href: renderUrl('/settings'),
+      href: '/settings',
       icon: <Settings />,
     },
     {
       label: formatMessage(labels.admin),
-      href: renderUrl('/admin'),
+      href: '/admin',
       icon: <LockKeyhole />,
     },
   ].filter(n => n);
@@ -57,7 +57,7 @@ export function SideNav(props: any) {
       <SidebarSection>
         {links.map(({ href, label, icon }) => {
           return (
-            <Link key={href} href={href} role="button">
+            <Link key={href} href={renderUrl(href, false)} role="button">
               <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(href)} />
             </Link>
           );

src/app/(main)/settings/profile/DateRangeSetting.tsx

@@ -1,16 +1,15 @@
 import { DateFilter } from '@/components/input/DateFilter';
 import { Button, Row } from '@umami/react-zen';
 import { useDateRange, useMessages } from '@/components/hooks';
-import { DEFAULT_DATE_RANGE } from '@/lib/constants';
-import { DateRange } from '@/lib/types';
+import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
 
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
   const { dateRange, saveDateRange } = useDateRange();
   const { value } = dateRange;
 
-  const handleChange = (value: string | DateRange) => saveDateRange(value);
-  const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE);
+  const handleChange = (value: string) => saveDateRange(value);
+  const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE_VALUE);
 
   return (
     <Row gap="3">

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -33,7 +33,7 @@ export function ProfileSettings() {
   };
 
   return (
-    <Column gap="6">
+    <Column width="400px" gap="6">
       <Column>
         <Label>{formatMessage(labels.username)}</Label>
         {username}

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -5,7 +5,7 @@ import { useMessages } from '@/components/hooks';
 import { Globe, Arrow } from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { WebsiteShareForm } from './WebsiteShareForm';
-import { TrackingCode } from './TrackingCode';
+import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
 import { LinkButton } from '@/components/common/LinkButton';
@@ -23,11 +23,7 @@ export function WebsiteSettings({
   return (
     <>
       <SectionHeader title={website?.name} icon={<Globe />}>
-        <LinkButton
-          variant="primary"
-          href={`/websites/${websiteId}`}
-          target={openExternal ? '_blank' : null}
-        >
+        <LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Icon>
             <Arrow />
           </Icon>
@@ -45,10 +41,10 @@ export function WebsiteSettings({
           <WebsiteEditForm websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="tracking">
-          <TrackingCode websiteId={websiteId} />
+          <WebsiteTrackingCode websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="share">
-          <WebsiteShareForm />
+          <WebsiteShareForm websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="data">
           <WebsiteData websiteId={websiteId} />

src/app/(main)/settings/websites/[websiteId]/WebsiteShareForm.tsx

@@ -22,7 +22,7 @@ const generateId = () => getRandomChars(16);
 
 export interface WebsiteShareFormProps {
   websiteId: string;
-  shareId: string;
+  shareId?: string;
   onSave?: () => void;
   onClose?: () => void;
 }

src/app/(main)/settings/websites/[websiteId]/WebsiteTrackingCode.tsx

@@ -1,9 +1,15 @@
-import { TextField } from '@umami/react-zen';
+import { TextField, Text, Column } from '@umami/react-zen';
 import { useMessages, useConfig } from '@/components/hooks';
 
 const SCRIPT_NAME = 'script.js';
 
-export function TrackingCode({ websiteId, hostUrl }: { websiteId: string; hostUrl?: string }) {
+export function WebsiteTrackingCode({
+  websiteId,
+  hostUrl,
+}: {
+  websiteId: string;
+  hostUrl?: string;
+}) {
   const { formatMessage, messages } = useMessages();
   const config = useConfig();
 
@@ -19,9 +25,9 @@ export function TrackingCode({ websiteId, hostUrl }: { websiteId: string; hostUr
   const code = `<script defer src="${url}" data-website-id="${websiteId}"></script>`;
 
   return (
-    <>
-      <p>{formatMessage(messages.trackingCode)}</p>
-      <TextField value={code} isReadOnly allowCopy asTextArea />
-    </>
+    <Column gap>
+      <Text>{formatMessage(messages.trackingCode)}</Text>
+      <TextField value={code} isReadOnly allowCopy asTextArea resize="none" />
+    </Column>
   );
 }

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -5,22 +5,24 @@ import { Share, Edit } from '@/components/icons';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 import { WebsiteShareForm } from '@/app/(main)/settings/websites/[websiteId]/WebsiteShareForm';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { LinkButton } from '@/components/common/LinkButton';
 
 export function WebsiteHeader() {
   const website = useWebsite();
+  const { renderUrl } = useNavigation();
 
   return (
     <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} showBorder={false}>
       <Row alignItems="center" gap>
         <ActiveUsers websiteId={website.id} />
         <ShareButton websiteId={website.id} shareId={website.shareId} />
-        <Button>
+        <LinkButton href={renderUrl(`/settings/websites/${website.id}`)}>
           <Icon>
             <Edit />
           </Icon>
           <Text>Edit</Text>
-        </Button>
+        </LinkButton>
       </Row>
     </PageHeader>
   );