Fixed mobile menus.

Share page overview should look the same as normal app overview

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -1,46 +1,48 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-.pnpm-store
-package-lock.json
-
-# testing
-/coverage
-
-# next.js
-/.next
-/out
-
-# production
-/build
-/public/script.js
-/geo
-/dist
-/generated
-/src/generated
-pm2.yml
-
-# misc
-.DS_Store
-.idea
-.yarn
-*.iml
-*.log
-.vscode
-.tool-versions
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env.*
-*.env.*
-
-*.dev.yml
-
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.pnpm-store
+package-lock.json
+
+# testing
+/coverage
+
+# next.js
+/.next
+/out
+
+# production
+/build
+/public/script.js
+/geo
+/dist
+/generated
+/src/generated
+pm2.yml
+
+# misc
+.DS_Store
+.idea
+.yarn
+*.iml
+*.log
+.vscode
+.tool-versions
+.claude
+nul
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.*
+*.env.*
+
+*.dev.yml
+

package.json

@@ -11,7 +11,7 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3001 --turbo",
+    "dev": "next dev -p 3002 --turbo",
     "build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
     "start": "next start",
     "build-docker": "npm-run-all build-db build-tracker build-geo build-app",
@@ -102,7 +102,7 @@
     "kafkajs": "^2.1.0",
     "lucide-react": "^0.543.0",
     "maxmind": "^5.0.0",
-    "next": "^15.5.9",
+    "next": "^15.5.10",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "papaparse": "^5.5.3",
@@ -164,7 +164,7 @@
     "stylelint-config-css-modules": "^4.5.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^14.0.0",
-    "tar": "^7.5.4",
+    "tar": "^7.5.7",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.1",
     "tsup": "^8.5.0",

src/app/(main)/MobileNav.tsx

@@ -42,7 +42,7 @@ export function MobileNav() {
         {({ close }) => {
           return (
             <>
-              <NavMenu padding="3" onItemClick={close} border="bottom">
+              <NavMenu padding="3" onItemClick={close} border="bottom" width="100%">
                 <NavButton />
                 {links.map(link => {
                   return (

src/app/(main)/pixels/PixelsTable.tsx

@@ -14,7 +14,6 @@ export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
-  console.log(showActions);
 
   return (
     <DataTable {...props}>

src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx

@@ -1,6 +1,6 @@
 import { Box, Column, Dialog, Grid, Icon, ProgressBar, Row, Text } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useResultQuery } from '@/components/hooks';
+import { useMessages, useNavigation, useResultQuery } from '@/components/hooks';
 import { File, User } from '@/components/icons';
 import { ReportEditButton } from '@/components/input/ReportEditButton';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
@@ -20,6 +20,8 @@ type FunnelResult = {
 
 export function Funnel({ id, name, type, parameters, websiteId }) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
   const { data, error, isLoading } = useResultQuery(type, {
     websiteId,
     ...parameters,
@@ -36,21 +38,22 @@ export function Funnel({ id, name, type, parameters, websiteId }) {
               </Text>
             </Row>
           </Column>
-          <Column>
-            <ReportEditButton id={id} name={name} type={type}>
-              {({ close }) => {
-                return (
-                  <Dialog
-                    title={formatMessage(labels.funnel)}
-                    variant="modal"
-                    style={{ minHeight: 300, minWidth: 400 }}
-                  >
-                    <FunnelEditForm id={id} websiteId={websiteId} onClose={close} />
-                  </Dialog>
-                );
-              }}
-            </ReportEditButton>
-          </Column>
+          {!isSharePage && (
+            <Column>
+              <ReportEditButton id={id} name={name} type={type}>
+                {({ close }) => {
+                  return (
+                    <Dialog
+                      title={formatMessage(labels.funnel)}
+                      style={{ minHeight: 300, minWidth: 400 }}
+                    >
+                      <FunnelEditForm id={id} websiteId={websiteId} onClose={close} />
+                    </Dialog>
+                  );
+                }}
+              </ReportEditButton>
+            </Column>
+          )}
         </Grid>
         {data?.map(
           (

src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage.tsx

@@ -4,7 +4,7 @@ import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteContro
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { useDateRange, useReportsQuery } from '@/components/hooks';
+import { useDateRange, useNavigation, useReportsQuery } from '@/components/hooks';
 import { Funnel } from './Funnel';
 import { FunnelAddButton } from './FunnelAddButton';
 
@@ -13,13 +13,17 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <SectionHeader>
-        <FunnelAddButton websiteId={websiteId} />
-      </SectionHeader>
+      {!isSharePage && (
+        <SectionHeader>
+          <FunnelAddButton websiteId={websiteId} />
+        </SectionHeader>
+      )}
       <LoadingPanel data={data} isLoading={isLoading} error={error}>
         {data && (
           <Grid gap>

src/app/(main)/websites/[websiteId]/(reports)/goals/Goal.tsx

@@ -1,6 +1,6 @@
 import { Column, Dialog, Grid, Icon, ProgressBar, Row, Text } from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useResultQuery } from '@/components/hooks';
+import { useMessages, useNavigation, useResultQuery } from '@/components/hooks';
 import { File, User } from '@/components/icons';
 import { ReportEditButton } from '@/components/input/ReportEditButton';
 import { Lightning } from '@/components/svg';
@@ -25,6 +25,8 @@ export type GoalData = { num: number; total: number };
 
 export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
   const { data, error, isLoading, isFetching } = useResultQuery<GoalData>(type, {
     websiteId,
     startDate,
@@ -45,21 +47,23 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
                 </Text>
               </Row>
             </Column>
-            <Column>
-              <ReportEditButton id={id} name={name} type={type}>
-                {({ close }) => {
-                  return (
-                    <Dialog
-                      title={formatMessage(labels.goal)}
-                      variant="modal"
-                      style={{ minHeight: 300, minWidth: 400 }}
-                    >
-                      <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
-                    </Dialog>
-                  );
-                }}
-              </ReportEditButton>
-            </Column>
+            {!isSharePage && (
+              <Column>
+                <ReportEditButton id={id} name={name} type={type}>
+                  {({ close }) => {
+                    return (
+                      <Dialog
+                        title={formatMessage(labels.goal)}
+                        variant="modal"
+                        style={{ minHeight: 300, minWidth: 400 }}
+                      >
+                        <GoalEditForm id={id} websiteId={websiteId} onClose={close} />
+                      </Dialog>
+                    );
+                  }}
+                </ReportEditButton>
+              </Column>
+            )}
           </Grid>
           <Row alignItems="center" justifyContent="space-between" gap>
             <Text color="muted">

src/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage.tsx

@@ -4,7 +4,7 @@ import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteContro
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { useDateRange, useReportsQuery } from '@/components/hooks';
+import { useDateRange, useNavigation, useReportsQuery } from '@/components/hooks';
 import { Goal } from './Goal';
 import { GoalAddButton } from './GoalAddButton';
 
@@ -13,13 +13,17 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
+  const { pathname } = useNavigation();
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <SectionHeader>
-        <GoalAddButton websiteId={websiteId} />
-      </SectionHeader>
+      {!isSharePage && (
+        <SectionHeader>
+          <GoalAddButton websiteId={websiteId} />
+        </SectionHeader>
+      )}
       <LoadingPanel data={data} isLoading={isLoading} error={error}>
         {data && (
           <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>

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

@@ -6,7 +6,13 @@ import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
 import { Edit } from '@/components/icons';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 
-export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
+export function WebsiteHeader({
+  showActions,
+  allowLink = true,
+}: {
+  showActions?: boolean;
+  allowLink?: boolean;
+}) {
   const website = useWebsite();
   const { renderUrl, pathname } = useNavigation();
   const isSettings = pathname.endsWith('/settings');
@@ -21,7 +27,7 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
     <PageHeader
       title={website.name}
       icon={<Favicon domain={website.domain} />}
-      titleHref={renderUrl(`/websites/${website.id}`, false)}
+      titleHref={allowLink ? renderUrl(`/websites/${website.id}`, false) : undefined}
     >
       <Row alignItems="center" gap="6" wrap="wrap">
         <ActiveUsers websiteId={website.id} />

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

@@ -9,11 +9,10 @@ import { WebsiteNav } from './WebsiteNav';
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
+      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%">
         <Column
           display={{ xs: 'none', lg: 'flex' }}
           width="240px"
-          height="100%"
           border="right"
           backgroundColor
           marginRight="2"

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

@@ -1,15 +1,13 @@
 import { Grid, Heading, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
 import { GridRow } from '@/components/common/GridRow';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { EventsChart } from '@/components/metrics/EventsChart';
+import { useMessages } from '@/components/hooks';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
 import { WorldMap } from '@/components/metrics/WorldMap';
 
 export function WebsitePanels({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { pathname } = useNavigation();
   const tableProps = {
     websiteId,
     limit: 10,
@@ -18,7 +16,6 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     metric: formatMessage(labels.visitors),
   };
   const rowProps = { minHeight: '570px' };
-  const isSharePage = pathname.includes('/share/');
 
   return (
     <Grid gap="3">
@@ -116,25 +113,6 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>
       </GridRow>
-      {isSharePage && (
-        <GridRow layout="two-one" {...rowProps}>
-          <Panel>
-            <Heading size="2">{formatMessage(labels.events)}</Heading>
-            <Row border="bottom" marginBottom="4" />
-            <MetricsTable
-              websiteId={websiteId}
-              type="event"
-              title={formatMessage(labels.event)}
-              metric={formatMessage(labels.count)}
-              limit={15}
-              filterLink={false}
-            />
-          </Panel>
-          <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }}>
-            <EventsChart websiteId={websiteId} />
-          </Panel>
-        </GridRow>
-      )}
     </Grid>
   );
 }

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

@@ -1,81 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  Column,
-  Form,
-  FormField,
-  FormSubmitButton,
-  Row,
-  Text,
-} from '@umami/react-zen';
-import { useState } from 'react';
-import { useApi, useMessages, useModified } from '@/components/hooks';
-import { SHARE_NAV_ITEMS } from './constants';
-
-export interface ShareCreateFormProps {
-  websiteId: string;
-  onSave?: () => void;
-  onClose?: () => void;
-}
-
-export function ShareCreateForm({ websiteId, onSave, onClose }: ShareCreateFormProps) {
-  const { formatMessage, labels } = useMessages();
-  const { post } = useApi();
-  const { touch } = useModified();
-  const [isPending, setIsPending] = useState(false);
-
-  // Build default values - only overview and events enabled by default
-  const defaultValues: Record<string, boolean> = {};
-  SHARE_NAV_ITEMS.forEach(section => {
-    section.items.forEach(item => {
-      defaultValues[item.id] = item.id === 'overview' || item.id === 'events';
-    });
-  });
-
-  const handleSubmit = async (data: any) => {
-    setIsPending(true);
-    try {
-      const parameters: Record<string, boolean> = {};
-      SHARE_NAV_ITEMS.forEach(section => {
-        section.items.forEach(item => {
-          parameters[item.id] = data[item.id] ?? false;
-        });
-      });
-      await post(`/websites/${websiteId}/shares`, { parameters });
-      touch('shares');
-      onSave?.();
-      onClose?.();
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <Form onSubmit={handleSubmit} defaultValues={defaultValues}>
-      <Column gap="3">
-        {SHARE_NAV_ITEMS.map(section => (
-          <Column key={section.section} gap="1">
-            <Text size="2" weight="bold">
-              {formatMessage((labels as any)[section.section])}
-            </Text>
-            <Column gap="1">
-              {section.items.map(item => (
-                <FormField key={item.id} name={item.id}>
-                  <Checkbox>{formatMessage((labels as any)[item.label])}</Checkbox>
-                </FormField>
-              ))}
-            </Column>
-          </Column>
-        ))}
-        <Row justifyContent="flex-end" paddingTop="3" gap="3">
-          {onClose && (
-            <Button isDisabled={isPending} onPress={onClose}>
-              {formatMessage(labels.cancel)}
-            </Button>
-          )}
-          <FormSubmitButton isDisabled={isPending}>{formatMessage(labels.save)}</FormSubmitButton>
-        </Row>
-      </Column>
-    </Form>
-  );
-}

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

@@ -5,6 +5,7 @@ import {
   Form,
   FormField,
   FormSubmitButton,
+  Grid,
   Label,
   Loading,
   Row,
@@ -13,25 +14,30 @@ import {
 } from '@umami/react-zen';
 import { useEffect, useState } from 'react';
 import { useApi, useConfig, useMessages, useModified } from '@/components/hooks';
-import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
 import { SHARE_NAV_ITEMS } from './constants';
 
 export function ShareEditForm({
   shareId,
+  websiteId,
   onSave,
   onClose,
 }: {
-  shareId: string;
+  shareId?: string;
+  websiteId?: string;
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
-  const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery(`/share/id/${shareId}`);
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { cloudMode } = useConfig();
-  const { get } = useApi();
+  const { get, post } = useApi();
+  const { touch } = useModified();
   const { modified } = useModified('shares');
   const [share, setShare] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!!shareId);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<any>(null);
+
+  const isEditing = !!shareId;
 
   const getUrl = (slug: string) => {
     if (cloudMode) {
@@ -41,6 +47,8 @@ export function ShareEditForm({
   };
 
   useEffect(() => {
+    if (!shareId) return;
+
     const loadShare = async () => {
       setIsLoading(true);
       try {
@@ -61,27 +69,35 @@ export function ShareEditForm({
       });
     });
 
-    await mutateAsync(
-      { slug: share.slug, parameters },
-      {
-        onSuccess: async () => {
-          toast(formatMessage(messages.saved));
-          touch('shares');
-          onSave?.();
-          onClose?.();
-        },
-      },
-    );
+    setIsPending(true);
+    setError(null);
+
+    try {
+      if (isEditing) {
+        await post(`/share/id/${shareId}`, { name: data.name, slug: share.slug, parameters });
+      } else {
+        await post(`/websites/${websiteId}/shares`, { name: data.name, parameters });
+      }
+      touch('shares');
+      onSave?.();
+      onClose?.();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsPending(false);
+    }
   };
 
   if (isLoading) {
     return <Loading placement="absolute" />;
   }
 
-  const url = getUrl(share?.slug || '');
+  const url = isEditing ? getUrl(share?.slug || '') : null;
 
   // Build default values from share parameters
-  const defaultValues: Record<string, boolean> = {};
+  const defaultValues: Record<string, any> = {
+    name: share?.name || '',
+  };
   SHARE_NAV_ITEMS.forEach(section => {
     section.items.forEach(item => {
       const defaultSelected = item.id === 'overview' || item.id === 'events';
@@ -89,34 +105,60 @@ export function ShareEditForm({
     });
   });
 
+  // Get all item ids for validation
+  const allItemIds = SHARE_NAV_ITEMS.flatMap(section => section.items.map(item => item.id));
+
   return (
     <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={defaultValues}>
-      <Column gap="3">
-        <Column>
-          <Label>{formatMessage(labels.shareUrl)}</Label>
-          <TextField value={url} isReadOnly allowCopy />
-        </Column>
-        {SHARE_NAV_ITEMS.map(section => (
-          <Column key={section.section} gap="1">
-            <Text weight="bold">{formatMessage((labels as any)[section.section])}</Text>
-            <Column gap="1">
-              {section.items.map(item => (
-                <FormField key={item.id} name={item.id}>
-                  <Checkbox>{formatMessage((labels as any)[item.label])}</Checkbox>
-                </FormField>
+      {({ watch }) => {
+        const values = watch();
+        const hasSelection = allItemIds.some(id => values[id]);
+
+        return (
+          <Column gap="6">
+            {url && (
+              <Column>
+                <Label>{formatMessage(labels.shareUrl)}</Label>
+                <TextField value={url} isReadOnly allowCopy />
+              </Column>
+            )}
+            <FormField
+              label={formatMessage(labels.name)}
+              name="name"
+              rules={{ required: formatMessage(labels.required) }}
+            >
+              <TextField autoComplete="off" autoFocus={!isEditing} />
+            </FormField>
+            <Grid columns="repeat(auto-fit, minmax(150px, 1fr))" gap="3">
+              {SHARE_NAV_ITEMS.map(section => (
+                <Column key={section.section} gap="3">
+                  <Text weight="bold">{formatMessage((labels as any)[section.section])}</Text>
+                  <Column gap="1">
+                    {section.items.map(item => (
+                      <FormField key={item.id} name={item.id}>
+                        <Checkbox>{formatMessage((labels as any)[item.label])}</Checkbox>
+                      </FormField>
+                    ))}
+                  </Column>
+                </Column>
               ))}
-            </Column>
+            </Grid>
+            <Row justifyContent="flex-end" paddingTop="3" gap="3">
+              {onClose && (
+                <Button isDisabled={isPending} onPress={onClose}>
+                  {formatMessage(labels.cancel)}
+                </Button>
+              )}
+              <FormSubmitButton
+                variant="primary"
+                isDisabled={isPending || !hasSelection || !values.name}
+              >
+                {formatMessage(labels.save)}
+              </FormSubmitButton>
+            </Row>
           </Column>
-        ))}
-        <Row justifyContent="flex-end" paddingTop="3" gap="3">
-          {onClose && (
-            <Button isDisabled={isPending} onPress={onClose}>
-              {formatMessage(labels.cancel)}
-            </Button>
-          )}
-          <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
-        </Row>
-      </Column>
+        );
+      }}
     </Form>
   );
 }

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

@@ -1,24 +1,25 @@
 import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
 import { DateDistance } from '@/components/common/DateDistance';
 import { ExternalLink } from '@/components/common/ExternalLink';
-import { useConfig, useMessages } from '@/components/hooks';
+import { useConfig, useMessages, useMobile } from '@/components/hooks';
 import { ShareDeleteButton } from './ShareDeleteButton';
 import { ShareEditButton } from './ShareEditButton';
 
 export function SharesTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
   const { cloudMode } = useConfig();
+  const { isMobile } = useMobile();
 
   const getUrl = (slug: string) => {
-    if (cloudMode) {
-      return `${process.env.cloudUrl}/share/${slug}`;
-    }
-    return `${window?.location.origin}${process.env.basePath || ''}/share/${slug}`;
+    return `${cloudMode ? process.env.cloudUrl : window?.location.origin}${process.env.basePath || ''}/share/${slug}`;
   };
 
   return (
     <DataTable {...props}>
-      <DataColumn id="slug" label={formatMessage(labels.shareUrl)}>
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {({ name }: any) => name}
+      </DataColumn>
+      <DataColumn id="slug" label={formatMessage(labels.shareUrl)} width="2fr">
         {({ slug }: any) => {
           const url = getUrl(slug);
           return (
@@ -28,9 +29,11 @@ export function SharesTable(props: DataTableProps) {
           );
         }}
       </DataColumn>
-      <DataColumn id="created" label={formatMessage(labels.created)} width="200px">
-        {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
-      </DataColumn>
+      {!isMobile && (
+        <DataColumn id="created" label={formatMessage(labels.created)}>
+          {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
+        </DataColumn>
+      )}
       <DataColumn id="action" align="end" width="100px">
         {({ id, slug }: any) => {
           return (

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

@@ -2,7 +2,7 @@ import { Column, Heading, Row, Text } from '@umami/react-zen';
 import { Plus } from 'lucide-react';
 import { useMessages, useWebsiteSharesQuery } from '@/components/hooks';
 import { DialogButton } from '@/components/input/DialogButton';
-import { ShareCreateForm } from './ShareCreateForm';
+import { ShareEditForm } from './ShareEditForm';
 import { SharesTable } from './SharesTable';
 
 export interface WebsiteShareFormProps {
@@ -11,7 +11,7 @@ export interface WebsiteShareFormProps {
 
 export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) {
   const { formatMessage, labels, messages } = useMessages();
-  const { data, isLoading } = useWebsiteSharesQuery({ websiteId });
+  const { data } = useWebsiteSharesQuery({ websiteId });
 
   const shares = data?.data || [];
   const hasShares = shares.length > 0;
@@ -25,9 +25,9 @@ export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) {
           label={formatMessage(labels.add)}
           title={formatMessage(labels.share)}
           variant="primary"
-          width="400px"
+          width="600px"
         >
-          {({ close }) => <ShareCreateForm websiteId={websiteId} onClose={close} />}
+          {({ close }) => <ShareEditForm websiteId={websiteId} onClose={close} />}
         </DialogButton>
       </Row>
       {hasShares ? (

src/app/api/share/[slug]/route.ts

@@ -1,7 +1,47 @@
+import { ROLES } from '@/lib/constants';
 import { secret } from '@/lib/crypto';
 import { createToken } from '@/lib/jwt';
+import prisma from '@/lib/prisma';
+import redis from '@/lib/redis';
 import { json, notFound } from '@/lib/response';
-import { getShareByCode } from '@/queries/prisma';
+import type { WhiteLabel } from '@/lib/types';
+import { getShareByCode, getWebsite } from '@/queries/prisma';
+
+async function getAccountId(website: { userId?: string; teamId?: string }): Promise<string | null> {
+  if (website.userId) {
+    return website.userId;
+  }
+
+  if (website.teamId) {
+    const teamOwner = await prisma.client.teamUser.findFirst({
+      where: {
+        teamId: website.teamId,
+        role: ROLES.teamOwner,
+      },
+      select: {
+        userId: true,
+      },
+    });
+
+    return teamOwner?.userId || null;
+  }
+
+  return null;
+}
+
+async function getWhiteLabel(accountId: string): Promise<WhiteLabel | null> {
+  if (!redis.enabled) {
+    return null;
+  }
+
+  const data = await redis.client.get(`white-label:${accountId}`);
+
+  if (data) {
+    return data as WhiteLabel;
+  }
+
+  return null;
+}
 
 export async function GET(_request: Request, { params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
@@ -12,12 +52,25 @@ export async function GET(_request: Request, { params }: { params: Promise<{ slu
     return notFound();
   }
 
-  const data = {
+  const website = await getWebsite(share.entityId);
+
+  const data: Record<string, any> = {
     shareId: share.id,
     websiteId: share.entityId,
     parameters: share.parameters,
   };
-  const token = createToken(data, secret());
 
-  return json({ ...data, token });
+  data.token = createToken(data, secret());
+
+  const accountId = await getAccountId(website);
+
+  if (accountId) {
+    const whiteLabel = await getWhiteLabel(accountId);
+
+    if (whiteLabel) {
+      data.whiteLabel = whiteLabel;
+    }
+  }
+
+  return json(data);
 }

src/app/api/share/id/[shareId]/route.ts

@@ -25,6 +25,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ shar
 
 export async function POST(request: Request, { params }: { params: Promise<{ shareId: string }> }) {
   const schema = z.object({
+    name: z.string().max(200),
     slug: z.string().max(100),
     parameters: anyObjectParam,
   });
@@ -36,7 +37,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ sha
   }
 
   const { shareId } = await params;
-  const { slug, parameters } = body;
+  const { name, slug, parameters } = body;
 
   const share = await getShare(shareId);
 
@@ -49,6 +50,7 @@ export async function POST(request: Request, { params }: { params: Promise<{ sha
   }
 
   const result = await updateShare(shareId, {
+    name,
     slug,
     parameters,
   } as any);

src/app/api/websites/[websiteId]/shares/route.ts

@@ -44,6 +44,7 @@ export async function POST(
   { params }: { params: Promise<{ websiteId: string }> },
 ) {
   const schema = z.object({
+    name: z.string().max(200),
     parameters: anyObjectParam.optional(),
   });
 
@@ -54,7 +55,8 @@ export async function POST(
   }
 
   const { websiteId } = await params;
-  const { parameters = {} } = body;
+  const { name, parameters } = body;
+  const shareParameters = parameters ?? {};
 
   if (!(await canUpdateWebsite(auth, websiteId))) {
     return unauthorized();
@@ -66,8 +68,9 @@ export async function POST(
     id: uuid(),
     entityId: websiteId,
     shareType: ENTITY_TYPE.website,
+    name,
     slug,
-    parameters,
+    parameters: shareParameters,
   });
 
   return json(share);

src/app/share/ShareProvider.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { Loading } from '@umami/react-zen';
+import { usePathname, useRouter } from 'next/navigation';
+import { createContext, type ReactNode, useEffect } from 'react';
+import { useShareTokenQuery } from '@/components/hooks';
+import type { WhiteLabel } from '@/lib/types';
+
+export interface ShareData {
+  shareId: string;
+  slug: string;
+  websiteId: string;
+  parameters: any;
+  token: string;
+  whiteLabel?: WhiteLabel;
+}
+
+export const ShareContext = createContext<ShareData>(null);
+
+const ALL_SECTION_IDS = [
+  'overview',
+  'events',
+  'sessions',
+  'realtime',
+  'compare',
+  'breakdown',
+  'goals',
+  'funnels',
+  'journeys',
+  'retention',
+  'utm',
+  'revenue',
+  'attribution',
+];
+
+function getSharePath(pathname: string) {
+  const segments = pathname.split('/');
+  const firstSegment = segments[3];
+
+  // If first segment looks like a domain name, skip it
+  if (firstSegment?.includes('.')) {
+    return segments[4];
+  }
+
+  return firstSegment;
+}
+
+export function ShareProvider({ slug, children }: { slug: string; children: ReactNode }) {
+  const { share, isLoading, isFetching } = useShareTokenQuery(slug);
+  const router = useRouter();
+  const pathname = usePathname();
+  const path = getSharePath(pathname);
+
+  const allowedSections = share?.parameters
+    ? ALL_SECTION_IDS.filter(id => share.parameters[id] !== false)
+    : [];
+
+  const shouldRedirect =
+    allowedSections.length === 1 &&
+    allowedSections[0] !== 'overview' &&
+    (path === undefined || path === '' || path === 'overview');
+
+  useEffect(() => {
+    if (shouldRedirect) {
+      router.replace(`/share/${slug}/${allowedSections[0]}`);
+    }
+  }, [shouldRedirect, slug, allowedSections, router]);
+
+  if (isFetching && isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  if (!share || shouldRedirect) {
+    return null;
+  }
+
+  return <ShareContext.Provider value={{ ...share, slug }}>{children}</ShareContext.Provider>;
+}

src/app/share/[...shareId]/Footer.tsx

@@ -1,12 +0,0 @@
-import { Row, Text } from '@umami/react-zen';
-import { CURRENT_VERSION, HOMEPAGE_URL } from '@/lib/constants';
-
-export function Footer() {
-  return (
-    <Row as="footer" paddingY="6" justifyContent="flex-end">
-      <a href={HOMEPAGE_URL} target="_blank">
-        <Text weight="bold">umami</Text> {`v${CURRENT_VERSION}`}
-      </a>
-    </Row>
-  );
-}

src/app/share/[...shareId]/Header.tsx

@@ -1,24 +0,0 @@
-import { Icon, Row, Text, ThemeButton } from '@umami/react-zen';
-import { LanguageButton } from '@/components/input/LanguageButton';
-import { PreferencesButton } from '@/components/input/PreferencesButton';
-import { Logo } from '@/components/svg';
-
-export function Header() {
-  return (
-    <Row as="header" justifyContent="space-between" alignItems="center" paddingY="3">
-      <a href="https://umami.is" target="_blank" rel="noopener">
-        <Row alignItems="center" gap>
-          <Icon>
-            <Logo />
-          </Icon>
-          <Text weight="bold">umami</Text>
-        </Row>
-      </a>
-      <Row alignItems="center" gap>
-        <ThemeButton />
-        <LanguageButton />
-        <PreferencesButton />
-      </Row>
-    </Row>
-  );
-}

src/app/share/[...shareId]/page.tsx

@@ -1,8 +0,0 @@
-import { SharePage } from './SharePage';
-
-export default async function ({ params }: { params: Promise<{ shareId: string[] }> }) {
-  const { shareId } = await params;
-  const [slug, ...path] = shareId;
-
-  return <SharePage shareId={slug} path={path.join('/')} />;
-}

src/app/share/[slug]/[[...path]]/ShareNav.tsx

@@ -1,23 +1,30 @@
-'use client';
-import { Column } from '@umami/react-zen';
+import { Button, Column, Icon, Row, Text, ThemeButton } from '@umami/react-zen';
 import { SideMenu } from '@/components/common/SideMenu';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { AlignEndHorizontal, Clock, Eye, Sheet, Tag, User } from '@/components/icons';
-import { Funnel, Lightning, Magnet, Money, Network, Path, Target } from '@/components/svg';
+import { useMessages, useNavigation, useShare } from '@/components/hooks';
+import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons';
+import { LanguageButton } from '@/components/input/LanguageButton';
+import { PreferencesButton } from '@/components/input/PreferencesButton';
+import { Funnel, Lightning, Logo, Magnet, Money, Network, Path, Target } from '@/components/svg';
 
 export function ShareNav({
-  shareId,
-  parameters,
+  collapsed,
+  onCollapse,
   onItemClick,
 }: {
-  shareId: string;
-  parameters: Record<string, boolean>;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
   onItemClick?: () => void;
 }) {
+  const share = useShare();
   const { formatMessage, labels } = useMessages();
   const { pathname } = useNavigation();
+  const { slug, parameters, whiteLabel } = share;
 
-  const renderPath = (path: string) => `/share/${shareId}${path}`;
+  const logoUrl = whiteLabel?.url || 'https://umami.is';
+  const logoName = whiteLabel?.name || 'umami';
+  const logoImage = whiteLabel?.image;
+
+  const renderPath = (path: string) => `/share/${slug}${path}`;
 
   const allItems = [
     {
@@ -130,14 +137,70 @@ export function ShareNav({
     .flatMap(e => e.items)
     .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
 
+  const isMobile = !!onItemClick;
+
   return (
-    <Column padding="3" position="sticky" top="0" gap>
-      <SideMenu
-        items={items}
-        selectedKey={selectedKey}
-        allowMinimize={false}
-        onItemClick={onItemClick}
-      />
+    <Column
+      position={isMobile ? undefined : 'fixed'}
+      padding="3"
+      width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
+      maxHeight="100dvh"
+      height="100dvh"
+      border={isMobile ? undefined : 'right'}
+      borderColor={isMobile ? undefined : '4'}
+    >
+      <Row as="header" gap alignItems="center" justifyContent="space-between">
+        {!collapsed && (
+          <a href={logoUrl} target="_blank" rel="noopener" style={{ marginLeft: 12 }}>
+            <Row alignItems="center" gap>
+              {logoImage ? (
+                <img src={logoImage} alt={logoName} style={{ height: 24 }} />
+              ) : (
+                <Icon>
+                  <Logo />
+                </Icon>
+              )}
+              <Text weight="bold">{logoName}</Text>
+            </Row>
+          </a>
+        )}
+        {!onItemClick && (
+          <Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}>
+            <Icon color="muted">
+              <PanelLeft />
+            </Icon>
+          </Button>
+        )}
+      </Row>
+      {!collapsed && (
+        <Column flexGrow={1} overflowY="auto">
+          <SideMenu
+            items={items}
+            selectedKey={selectedKey}
+            allowMinimize={false}
+            onItemClick={onItemClick}
+          />
+        </Column>
+      )}
+      <Column
+        flexGrow={collapsed ? 1 : undefined}
+        justifyContent="flex-end"
+        alignItems={collapsed ? 'center' : undefined}
+      >
+        {collapsed ? (
+          <Column gap="2" alignItems="center">
+            <ThemeButton />
+            <LanguageButton />
+            <PreferencesButton />
+          </Column>
+        ) : (
+          <Row>
+            <ThemeButton />
+            <LanguageButton />
+            <PreferencesButton />
+          </Row>
+        )}
+      </Column>
     </Column>
   );
 }

src/app/share/[slug]/[[...path]]/SharePage.tsx

@@ -1,6 +1,7 @@
 'use client';
-import { Column, Grid, useTheme } from '@umami/react-zen';
-import { useEffect } from 'react';
+import { Column, Grid, Row, useTheme } from '@umami/react-zen';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
 import { AttributionPage } from '@/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage';
 import { BreakdownPage } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage';
 import { FunnelsPage } from '@/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage';
@@ -17,9 +18,8 @@ import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
 import { WebsitePage } from '@/app/(main)/websites/[websiteId]/WebsitePage';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
 import { PageBody } from '@/components/common/PageBody';
-import { useShareTokenQuery } from '@/components/hooks';
-import { Footer } from './Footer';
-import { Header } from './Header';
+import { useShare } from '@/components/hooks';
+import { MobileMenuButton } from '@/components/input/MobileMenuButton';
 import { ShareNav } from './ShareNav';
 
 const PAGE_COMPONENTS: Record<string, React.ComponentType<{ websiteId: string }>> = {
@@ -39,9 +39,25 @@ const PAGE_COMPONENTS: Record<string, React.ComponentType<{ websiteId: string }>
   attribution: AttributionPage,
 };
 
-export function SharePage({ shareId, path = '' }: { shareId: string; path?: string }) {
-  const { shareToken, isLoading } = useShareTokenQuery(shareId);
+function getSharePath(pathname: string) {
+  const segments = pathname.split('/');
+  const firstSegment = segments[3];
+
+  // If first segment looks like a domain name, skip it
+  if (firstSegment?.includes('.')) {
+    return segments[4];
+  }
+
+  return firstSegment;
+}
+
+export function SharePage() {
+  const [navCollapsed, setNavCollapsed] = useState(false);
+  const share = useShare();
   const { setTheme } = useTheme();
+  const pathname = usePathname();
+  const path = getSharePath(pathname);
+  const { websiteId, parameters = {} } = share;
 
   useEffect(() => {
     const url = new URL(window?.location?.href);
@@ -52,12 +68,6 @@ export function SharePage({ shareId, path = '' }: { shareId: string; path?: stri
     }
   }, []);
 
-  if (isLoading || !shareToken) {
-    return null;
-  }
-
-  const { websiteId, parameters = {} } = shareToken;
-
   // Check if the requested path is allowed
   const pageKey = path || '';
   const isAllowed = pageKey === '' || pageKey === 'overview' || parameters[pageKey] !== false;
@@ -69,29 +79,25 @@ export function SharePage({ shareId, path = '' }: { shareId: string; path?: stri
   const PageComponent = PAGE_COMPONENTS[pageKey] || WebsitePage;
 
   return (
-    <Column backgroundColor="2">
-      <Header />
-      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
-        <Column
-          display={{ xs: 'none', lg: 'flex' }}
-          width="240px"
-          height="100%"
-          border="right"
-          backgroundColor
-          marginRight="2"
-        >
-          <ShareNav shareId={shareId} parameters={parameters} />
-        </Column>
-        <PageBody gap>
-          <WebsiteProvider websiteId={websiteId}>
+    <Grid columns={{ xs: '1fr', lg: `${navCollapsed ? '60px' : '240px'} 1fr` }} width="100%">
+      <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
+        <MobileMenuButton>
+          {({ close }) => {
+            return <ShareNav onItemClick={close} />;
+          }}
+        </MobileMenuButton>
+      </Row>
+      <Column display={{ xs: 'none', lg: 'flex' }} marginRight="2">
+        <ShareNav collapsed={navCollapsed} onCollapse={setNavCollapsed} />
+      </Column>
+      <PageBody gap>
+        <WebsiteProvider websiteId={websiteId}>
+          <Column>
             <WebsiteHeader showActions={false} />
-            <Column>
-              <PageComponent websiteId={websiteId} />
-            </Column>
-          </WebsiteProvider>
-        </PageBody>
-      </Grid>
-      <Footer />
-    </Column>
+            <PageComponent websiteId={websiteId} />
+          </Column>
+        </WebsiteProvider>
+      </PageBody>
+    </Grid>
   );
 }

src/app/share/[slug]/[[...path]]/page.tsx

@@ -0,0 +1,5 @@
+import { SharePage } from './SharePage';
+
+export default function () {
+  return <SharePage />;
+}

src/app/share/[slug]/layout.tsx

@@ -0,0 +1,13 @@
+import { ShareProvider } from '@/app/share/ShareProvider';
+
+export default async function ({
+  params,
+  children,
+}: {
+  params: Promise<{ slug: string }>;
+  children: React.ReactNode;
+}) {
+  const { slug } = await params;
+
+  return <ShareProvider slug={slug}>{children}</ShareProvider>;
+}

src/components/common/PageBody.tsx

@@ -31,6 +31,7 @@ export function PageBody({
     <Column
       {...props}
       width="100%"
+      minHeight="100vh"
       paddingBottom="6"
       maxWidth={maxWidth}
       paddingX={{ xs: '3', md: '6' }}

src/components/common/SideMenu.tsx

@@ -7,6 +7,7 @@ import {
   NavMenuItem,
   type NavMenuProps,
   Row,
+  Text,
 } from '@umami/react-zen';
 import Link from 'next/link';
 
@@ -42,9 +43,11 @@ export function SideMenu({
 
       return (
         <Link key={id} href={path}>
-          <NavMenuItem isSelected={isSelected}>
-            <IconLabel icon={icon}>{label}</IconLabel>
-          </NavMenuItem>
+          <Row padding hoverBackgroundColor="3">
+            <IconLabel icon={icon}>
+              <Text weight={isSelected ? 'bold' : undefined}>{label}</Text>
+            </IconLabel>
+          </Row>
         </Link>
       );
     });

src/components/hooks/context/useShare.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ShareContext } from '@/app/share/ShareProvider';
+
+export function useShare() {
+  return useContext(ShareContext);
+}

src/components/hooks/index.ts

@@ -3,6 +3,7 @@
 // Context hooks
 export * from './context/useLink';
 export * from './context/usePixel';
+export * from './context/useShare';
 export * from './context/useTeam';
 export * from './context/useUser';
 export * from './context/useWebsite';

src/components/hooks/queries/useShareTokenQuery.ts

@@ -1,25 +1,21 @@
-import { setShareToken, useApp } from '@/store/app';
+import { setShare, useApp } from '@/store/app';
 import { useApi } from '../useApi';
 
-const selector = (state: { shareToken: string }) => state.shareToken;
+const selector = state => state.share;
 
-export function useShareTokenQuery(slug: string): {
-  shareToken: any;
-  isLoading?: boolean;
-  error?: Error;
-} {
-  const shareToken = useApp(selector);
+export function useShareTokenQuery(slug: string) {
+  const share = useApp(selector);
   const { get, useQuery } = useApi();
-  const { isLoading, error } = useQuery({
+  const query = useQuery({
     queryKey: ['share', slug],
     queryFn: async () => {
       const data = await get(`/share/${slug}`);
 
-      setShareToken(data);
+      setShare(data);
 
       return data;
     },
   });
 
-  return { shareToken, isLoading, error };
+  return { share, ...query };
 }

src/components/input/MobileMenuButton.tsx

@@ -10,7 +10,7 @@ export function MobileMenuButton(props: DialogProps) {
         </Icon>
       </Button>
       <Modal placement="left" offset="80px">
-        <Dialog variant="sheet" {...props} />
+        <Dialog variant="sheet" {...props} style={{ width: 'auto' }} />
       </Modal>
     </DialogTrigger>
   );

src/components/input/WebsiteDateFilter.tsx

@@ -31,9 +31,11 @@ export function WebsiteDateFilter({
   const showCompare = allowCompare && !isAllTime;
 
   const websiteDateRange = useDateRangeQuery(websiteId);
+  const { startDate, endDate } = websiteDateRange;
+  const hasData = startDate && endDate;
 
   const handleChange = (date: string) => {
-    if (date === 'all') {
+    if (date === 'all' && hasData) {
       router.push(
         updateParams({
           date: `${getDateRangeValue(websiteDateRange.startDate, websiteDateRange.endDate)}:all`,
@@ -78,7 +80,7 @@ export function WebsiteDateFilter({
         <DateFilter
           value={dateValue}
           onChange={handleChange}
-          showAllTime={showAllTime}
+          showAllTime={hasData && showAllTime}
           renderDate={+offset !== 0}
         />
       </Row>

src/components/input/WebsiteSelect.tsx

@@ -26,7 +26,7 @@ export function WebsiteSelect({
   const { user } = useLoginQuery();
   const { data, isLoading } = useUserWebsitesQuery(
     { userId: user?.id, teamId },
-    { search, pageSize: 10, includeTeams },
+    { search, pageSize: 20, includeTeams },
   );
   const listItems: { id: string; name: string }[] = data?.data || [];
 

src/lib/__tests__/detect.test.ts

@@ -18,5 +18,5 @@ test('getIpAddress: Standard header', () => {
 });
 
 test('getIpAddress: No header', () => {
-  expect(getIpAddress(new Headers())).toEqual(null);
+  expect(getIpAddress(new Headers())).toEqual(undefined);
 });

src/lib/charts.ts

@@ -11,7 +11,6 @@ export function renderDateLabels(unit: string, locale: string) {
 
     switch (unit) {
       case 'minute':
-        return formatDate(d, 'h:mm', locale);
       case 'hour':
         return formatDate(d, 'p', locale);
       case 'day':

src/lib/prisma.ts

@@ -108,7 +108,7 @@ function getFilterQuery(filters: Record<string, any>, options: QueryOptions = {}
 
         if (name === 'referrer') {
           arr.push(
-            `and (website_event.referrer_domain != website_event.hostname or website_event.referrer_domain is null)`,
+            `and (website_event.referrer_domain != regexp_replace(website_event.hostname, '^www.', '') or website_event.referrer_domain is null)`,
           );
         }
       }

src/lib/types.ts

@@ -141,3 +141,9 @@ export interface ApiError extends Error {
   code?: string;
   message: string;
 }
+
+export interface WhiteLabel {
+  name: string;
+  url: string;
+  image: string;
+}

src/permissions/entity.ts

@@ -5,7 +5,11 @@ import type { Auth } from '@/lib/types';
 import { getTeamUser } from '@/queries/prisma';
 
 export async function canViewEntity({ user }: Auth, entityId: string) {
-  if (user?.isAdmin) {
+  if (!user) {
+    return false;
+  }
+
+  if (user.isAdmin) {
     return true;
   }
 
@@ -25,6 +29,10 @@ export async function canViewEntity({ user }: Auth, entityId: string) {
 }
 
 export async function canUpdateEntity({ user }: Auth, entityId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -45,6 +53,10 @@ export async function canUpdateEntity({ user }: Auth, entityId: string) {
 }
 
 export async function canDeleteEntity({ user }: Auth, entityId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }

src/permissions/link.ts

@@ -4,7 +4,11 @@ import type { Auth } from '@/lib/types';
 import { getLink, getTeamUser } from '@/queries/prisma';
 
 export async function canViewLink({ user }: Auth, linkId: string) {
-  if (user?.isAdmin) {
+  if (!user) {
+    return false;
+  }
+
+  if (user.isAdmin) {
     return true;
   }
 
@@ -24,6 +28,10 @@ export async function canViewLink({ user }: Auth, linkId: string) {
 }
 
 export async function canUpdateLink({ user }: Auth, linkId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -44,6 +52,10 @@ export async function canUpdateLink({ user }: Auth, linkId: string) {
 }
 
 export async function canDeleteLink({ user }: Auth, linkId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }

src/permissions/pixel.ts

@@ -4,7 +4,11 @@ import type { Auth } from '@/lib/types';
 import { getPixel, getTeamUser } from '@/queries/prisma';
 
 export async function canViewPixel({ user }: Auth, pixelId: string) {
-  if (user?.isAdmin) {
+  if (!user) {
+    return false;
+  }
+
+  if (user.isAdmin) {
     return true;
   }
 
@@ -24,6 +28,10 @@ export async function canViewPixel({ user }: Auth, pixelId: string) {
 }
 
 export async function canUpdatePixel({ user }: Auth, pixelId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -44,6 +52,10 @@ export async function canUpdatePixel({ user }: Auth, pixelId: string) {
 }
 
 export async function canDeletePixel({ user }: Auth, pixelId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }

src/permissions/report.ts

@@ -3,11 +3,11 @@ import type { Auth } from '@/lib/types';
 import { canViewWebsite } from './website';
 
 export async function canViewReport(auth: Auth, report: Report) {
-  if (auth.user.isAdmin) {
+  if (auth.user?.isAdmin) {
     return true;
   }
 
-  if (auth.user.id === report.userId) {
+  if (auth.user?.id === report.userId) {
     return true;
   }
 
@@ -15,6 +15,10 @@ export async function canViewReport(auth: Auth, report: Report) {
 }
 
 export async function canUpdateReport({ user }: Auth, report: Report) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }

src/permissions/team.ts

@@ -4,6 +4,10 @@ import type { Auth } from '@/lib/types';
 import { getTeamUser } from '@/queries/prisma';
 
 export async function canViewTeam({ user }: Auth, teamId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -12,6 +16,10 @@ export async function canViewTeam({ user }: Auth, teamId: string) {
 }
 
 export async function canCreateTeam({ user }: Auth) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -20,6 +28,10 @@ export async function canCreateTeam({ user }: Auth) {
 }
 
 export async function canUpdateTeam({ user }: Auth, teamId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -30,6 +42,10 @@ export async function canUpdateTeam({ user }: Auth, teamId: string) {
 }
 
 export async function canDeleteTeam({ user }: Auth, teamId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -40,6 +56,10 @@ export async function canDeleteTeam({ user }: Auth, teamId: string) {
 }
 
 export async function canDeleteTeamUser({ user }: Auth, teamId: string, removeUserId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -54,6 +74,10 @@ export async function canDeleteTeamUser({ user }: Auth, teamId: string, removeUs
 }
 
 export async function canCreateTeamWebsite({ user }: Auth, teamId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -64,5 +88,5 @@ export async function canCreateTeamWebsite({ user }: Auth, teamId: string) {
 }
 
 export async function canViewAllTeams({ user }: Auth) {
-  return user.isAdmin;
+  return user?.isAdmin ?? false;
 }

src/permissions/user.ts

@@ -1,10 +1,14 @@
 import type { Auth } from '@/lib/types';
 
 export async function canCreateUser({ user }: Auth) {
-  return user.isAdmin;
+  return user?.isAdmin ?? false;
 }
 
 export async function canViewUser({ user }: Auth, viewedUserId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -13,10 +17,14 @@ export async function canViewUser({ user }: Auth, viewedUserId: string) {
 }
 
 export async function canViewUsers({ user }: Auth) {
-  return user.isAdmin;
+  return user?.isAdmin ?? false;
 }
 
 export async function canUpdateUser({ user }: Auth, viewedUserId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -25,5 +33,5 @@ export async function canUpdateUser({ user }: Auth, viewedUserId: string) {
 }
 
 export async function canDeleteUser({ user }: Auth) {
-  return user.isAdmin;
+  return user?.isAdmin ?? false;
 }

src/permissions/website.ts

@@ -15,7 +15,7 @@ export async function canViewWebsite({ user, shareToken }: Auth, websiteId: stri
 
   const entity = await getEntity(websiteId);
 
-  if (!entity) {
+  if (!entity || !user) {
     return false;
   }
 
@@ -33,10 +33,14 @@ export async function canViewWebsite({ user, shareToken }: Auth, websiteId: stri
 }
 
 export async function canViewAllWebsites({ user }: Auth) {
-  return user.isAdmin;
+  return user?.isAdmin ?? false;
 }
 
 export async function canCreateWebsite({ user }: Auth) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -45,6 +49,10 @@ export async function canCreateWebsite({ user }: Auth) {
 }
 
 export async function canUpdateWebsite({ user }: Auth, websiteId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -69,6 +77,10 @@ export async function canUpdateWebsite({ user }: Auth, websiteId: string) {
 }
 
 export async function canDeleteWebsite({ user }: Auth, websiteId: string) {
+  if (!user) {
+    return false;
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -93,6 +105,10 @@ export async function canDeleteWebsite({ user }: Auth, websiteId: string) {
 }
 
 export async function canTransferWebsiteToUser({ user }: Auth, websiteId: string, userId: string) {
+  if (!user) {
+    return false;
+  }
+
   const website = await getWebsite(websiteId);
 
   if (!website) {
@@ -109,6 +125,10 @@ export async function canTransferWebsiteToUser({ user }: Auth, websiteId: string
 }
 
 export async function canTransferWebsiteToTeam({ user }: Auth, websiteId: string, teamId: string) {
+  if (!user) {
+    return false;
+  }
+
   const website = await getWebsite(websiteId);
 
   if (!website) {

src/queries/sql/getValues.ts

@@ -23,7 +23,7 @@ async function relationalQuery(websiteId: string, column: string, filters: Query
   let excludeDomain = '';
 
   if (column === 'referrer_domain') {
-    excludeDomain = `and website_event.referrer_domain != website_event.hostname
+    excludeDomain = `and website_event.referrer_domain != regexp_replace(website_event.hostname, '^www.', '')
       and website_event.referrer_domain != ''`;
   }
 

src/queries/sql/getWeeklyTraffic.ts

@@ -14,7 +14,7 @@ export async function getWeeklyTraffic(...args: [websiteId: string, filters: Que
 }
 
 async function relationalQuery(websiteId: string, filters: QueryFilters) {
-  const timezone = 'utc';
+  const { timezone = 'utc' } = filters;
   const { rawQuery, getDateWeeklySQL, parseFilters } = prisma;
   const { filterQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
@@ -33,7 +33,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
       and website_event.created_at between {{startDate}} and {{endDate}}
       ${filterQuery}
     group by time
-    order by 2
+    order by 1
     `,
     queryParams,
     FUNCTION_NAME,

src/queries/sql/pageviews/getPageviewExpandedMetrics.ts

@@ -50,7 +50,7 @@ async function relationalQuery(
   let excludeDomain = '';
 
   if (column === 'referrer_domain') {
-    excludeDomain = `and website_event.referrer_domain != website_event.hostname
+    excludeDomain = `and website_event.referrer_domain != regexp_replace(website_event.hostname, '^www.', '')
       and website_event.referrer_domain != ''`;
     if (type === 'domain') {
       column = toPostgresGroupedReferrer(GROUPED_DOMAINS);

src/queries/sql/pageviews/getPageviewMetrics.ts

@@ -46,7 +46,7 @@ async function relationalQuery(
   let excludeDomain = '';
 
   if (column === 'referrer_domain') {
-    excludeDomain = `and website_event.referrer_domain != website_event.hostname
+    excludeDomain = `and website_event.referrer_domain != regexp_replace(website_event.hostname, '^www.', '')
       and website_event.referrer_domain != ''`;
   }
 

src/queries/sql/reports/getAttribution.ts

@@ -142,7 +142,7 @@ async function relationalQuery(
     ${
       currency
         ? ''
-        : `and we.referrer_domain != hostname
+        : `and we.referrer_domain != regexp_replace(we.hostname, '^www.', '')
       and we.referrer_domain != ''`
     }  
     group by 1

src/store/app.ts

@@ -16,7 +16,7 @@ const initialState = {
   theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
   timezone: getItem(TIMEZONE_CONFIG) || getTimezone(),
   dateRangeValue: getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
-  shareToken: null,
+  share: null,
   user: null,
   config: null,
 };
@@ -31,8 +31,8 @@ export function setLocale(locale: string) {
   store.setState({ locale });
 }
 
-export function setShareToken(shareToken: string) {
-  store.setState({ shareToken });
+export function setShare(share: object) {
+  store.setState({ share });
 }
 
 export function setUser(user: object) {