New website nav.

src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx

@@ -6,7 +6,7 @@ import { ListCheck } from '@/components/icons';
 import { Panel } from '@/components/common/Panel';
 import { Breakdown } from './Breakdown';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
-import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/reports/breakdown/FieldSelectForm';
+import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm';
 
 export function BreakdownPage({ websiteId }: { websiteId: string }) {
   const {

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

@@ -1,4 +1,4 @@
-import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen';
+import { DataTable, DataColumn, Icon, Row, Text } from '@umami/react-zen';
 import { useFormat, useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
@@ -21,13 +21,17 @@ export function EventsTable({ data = [] }) {
       <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
         {(row: any) => {
           return (
-            <Row alignItems="center" gap>
+            <Row alignItems="center" gap="2">
               <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
                 <Avatar seed={row.sessionId} size={32} />
               </Link>
               <Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
-              {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
-              <strong>{row.eventName || row.urlPath}</strong>
+              <Text>
+                {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
+              </Text>
+              <Text weight="bold" truncate>
+                {row.eventName || row.urlPath}
+              </Text>
             </Row>
           );
         }}
@@ -39,14 +43,14 @@ export function EventsTable({ data = [] }) {
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="browser" label={formatMessage(labels.browser)}>
+      <DataColumn id="browser" label={formatMessage(labels.browser)} width="120px">
         {(row: any) => (
           <TypeIcon type="browser" value={row.browser}>
             {formatValue(row.browser, 'browser')}
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="device" label={formatMessage(labels.device)}>
+      <DataColumn id="device" label={formatMessage(labels.device)} width="120px">
         {(row: any) => (
           <TypeIcon type="device" value={row.device}>
             {formatValue(row.device, 'device')}

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

@@ -1,15 +0,0 @@
-'use client';
-import { ReactNode } from 'react';
-import { Grid, Column } from '@umami/react-zen';
-import { ReportsNav } from './ReportsNav';
-
-export function ReportsLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
-  return (
-    <Grid columns="180px 1fr" gap="6">
-      <Column>
-        <ReportsNav websiteId={websiteId} />
-      </Column>
-      <Column minWidth="0">{children}</Column>
-    </Grid>
-  );
-}

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

@@ -1,87 +0,0 @@
-import { Row, NavMenu, NavMenuItem, Icon, Text } from '@umami/react-zen';
-import { useMessages, useNavigation } from '@/components/hooks';
-import { Funnel, Sheet, Magnet, Money, Network, Path, Tag, Target } from '@/components/icons';
-import Link from 'next/link';
-
-export function ReportsNav({ websiteId }: { websiteId: string }) {
-  const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl } = useNavigation();
-
-  const links = [
-    {
-      id: 'goals',
-      label: formatMessage(labels.goals),
-      icon: <Target />,
-      path: '/goals',
-    },
-    {
-      id: 'funnel',
-      label: formatMessage(labels.funnels),
-      icon: <Funnel />,
-      path: '/funnels',
-    },
-    {
-      id: 'journeys',
-      label: formatMessage(labels.journeys),
-      icon: <Path />,
-      path: '/journeys',
-    },
-    {
-      id: 'retention',
-      label: formatMessage(labels.retention),
-      icon: <Magnet />,
-      path: '/retention',
-    },
-    {
-      id: 'breakdown',
-      label: formatMessage(labels.breakdown),
-      icon: <Sheet />,
-      path: '/breakdown',
-    },
-    {
-      id: 'utm',
-      label: formatMessage(labels.utm),
-      icon: <Tag />,
-      path: '/utm',
-    },
-    {
-      id: 'revenue',
-      label: formatMessage(labels.revenue),
-      icon: <Money />,
-      path: '/revenue',
-    },
-    {
-      id: 'attribution',
-      label: formatMessage(labels.attribution),
-      icon: <Network />,
-      path: '/attribution',
-    },
-  ];
-
-  const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'goals';
-
-  return (
-    <NavMenu highlightColor="3">
-      {links.map(({ id, label, icon, path }) => {
-        const isSelected = selected === id;
-
-        return (
-          <Link
-            key={id}
-            href={renderUrl(
-              `/websites/${websiteId}/reports${path}`,
-              path === '/retention' ? { date: undefined } : null,
-            )}
-          >
-            <NavMenuItem isSelected={isSelected}>
-              <Row alignItems="center" gap>
-                <Icon>{icon}</Icon>
-                <Text>{label}</Text>
-              </Row>
-            </NavMenuItem>
-          </Link>
-        );
-      })}
-    </NavMenu>
-  );
-}

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

@@ -1,21 +0,0 @@
-import { Metadata } from 'next';
-import { ReportsLayout } from './ReportsLayout';
-
-export default async function ({
-  children,
-  params,
-}: {
-  children: any;
-  params: Promise<{ websiteId: string }>;
-}) {
-  const { websiteId } = await params;
-
-  return <ReportsLayout websiteId={websiteId}>{children}</ReportsLayout>;
-}
-
-export const metadata: Metadata = {
-  title: {
-    template: '%s | Umami',
-    default: 'Websites | Umami',
-  },
-};