Refactored icons.

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

@@ -1,4 +1,4 @@
-import { Text, Icon, Icons } from '@umami/react-zen';
+import { Text, Icon } from '@umami/react-zen';
 import { useMemo } from 'react';
 import { firstBy } from 'thenby';
 import { WebsiteChart } from './WebsiteChart';
@@ -7,6 +7,7 @@ import { WebsiteControls } from './WebsiteControls';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
+import { Arrow } from '@/components/icons';
 
 export function WebsiteChartList({
   websites,
@@ -30,7 +31,7 @@ export function WebsiteChartList({
 
   return (
     <div>
-      {ordered.map(({ id }, index) => {
+      {ordered.map(({ id }: { id: string }, index) => {
         return index < limit ? (
           <div key={id}>
             <WebsiteControls websiteId={id} showLinks={false}>
@@ -38,7 +39,7 @@ export function WebsiteChartList({
                 <Text>{formatMessage(labels.viewDetails)}</Text>
                 <Icon>
                   <Icon>
-                    <Icons.Arrow />
+                    <Arrow />
                   </Icon>
                 </Icon>
               </LinkButton>

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

@@ -1,4 +1,4 @@
-import { Icon, Icons, Text, Grid, Column } from '@umami/react-zen';
+import { Icon, Text, Grid, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -18,6 +18,7 @@ import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
 import { Panel } from '@/components/common/Panel';
+import { Arrow } from '@/components/icons';
 
 const views = {
   url: PagesTable,
@@ -140,7 +141,7 @@ export function WebsiteExpandedView({
         <Column gap="6" width="200px" border="right" paddingRight="3">
           <LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
             <Icon rotate={180}>
-              <Icons.Arrow />
+              <Arrow />
             </Icon>
             <Text>{formatMessage(labels.back)}</Text>
           </LinkButton>

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

@@ -1,5 +1,5 @@
 import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
-import { Lucide } from '@/components/icons';
+import { ListFilter } from '@/components/icons';
 import { FilterEditForm } from '@/components/common/FilterEditForm';
 import { useMessages, useNavigation, useFilters } from '@/components/hooks';
 
@@ -34,7 +34,7 @@ export function WebsiteFilterButton({
     <DialogTrigger>
       <Button variant="quiet">
         <Icon>
-          <Lucide.ListFilter />
+          <ListFilter />
         </Icon>
         {showText && <Text weight="bold">{formatMessage(labels.filter)}</Text>}
       </Button>

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

@@ -1,7 +1,7 @@
 import { Button, Icon, Text, Row } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useWebsite } from '@/components/hooks/useWebsite';
-import { Lucide } from '@/components/icons';
+import { Share, Edit } from '@/components/icons';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 
@@ -14,13 +14,13 @@ export function WebsiteHeader() {
         <ActiveUsers websiteId={website.id} />
         <Button>
           <Icon>
-            <Lucide.Share />
+            <Share />
           </Icon>
           <Text>Share</Text>
         </Button>
         <Button>
           <Icon>
-            <Lucide.Edit />
+            <Edit />
           </Icon>
           <Text>Edit</Text>
         </Button>

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

@@ -1,7 +1,6 @@
 import {
   Button,
   Icon,
-  Icons,
   Menu,
   MenuItem,
   MenuSeparator,
@@ -10,7 +9,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { Fragment } from 'react';
-import { Lucide } from '@/components/icons';
+import { More, Share, Edit } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { InputItem } from '@/lib/types';
 
@@ -19,8 +18,8 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { router, renderUrl, renderTeamUrl } = useNavigation();
 
   const menuItems: InputItem[] = [
-    { id: 'share', label: formatMessage(labels.share), icon: <Lucide.Share /> },
-    { id: 'edit', label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
+    { id: 'share', label: formatMessage(labels.share), icon: <Share /> },
+    { id: 'edit', label: formatMessage(labels.edit), icon: <Edit />, seperator: true },
   ];
 
   const handleAction = (id: any) => {
@@ -35,7 +34,7 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="quiet">
         <Icon>
-          <Icons.More />
+          <More />
         </Icon>
       </Button>
       <Popover placement="bottom">

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

@@ -1,5 +1,18 @@
 import { Icon, Text, Row, NavMenu, NavMenuItem } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import {
+  Overview,
+  Lightning,
+  User,
+  Clock,
+  Lightbulb,
+  Target,
+  Funnel,
+  Path,
+  Magnet,
+  Tag,
+  Money,
+  Network,
+} from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
 
@@ -11,73 +24,73 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
     {
       id: 'overview',
       label: formatMessage(labels.overview),
-      icon: <Icons.Overview />,
+      icon: <Overview />,
       path: '',
     },
     {
       id: 'events',
       label: formatMessage(labels.events),
-      icon: <Icons.Lightning />,
+      icon: <Lightning />,
       path: '/events',
     },
     {
       id: 'sessions',
       label: formatMessage(labels.sessions),
-      icon: <Icons.User />,
+      icon: <User />,
       path: '/sessions',
     },
     {
       id: 'realtime',
       label: formatMessage(labels.realtime),
-      icon: <Icons.Clock />,
+      icon: <Clock />,
       path: '/realtime',
     },
     {
       id: 'insights',
       label: formatMessage(labels.insights),
-      icon: <Icons.Lightbulb />,
+      icon: <Lightbulb />,
       path: '/insights',
     },
     {
       id: 'goals',
       label: formatMessage(labels.goals),
-      icon: <Icons.Target />,
+      icon: <Target />,
       path: '/goals',
     },
     {
       id: 'funnel',
       label: formatMessage(labels.funnel),
-      icon: <Icons.Funnel />,
+      icon: <Funnel />,
       path: '/funnels',
     },
     {
       id: 'journeys',
       label: formatMessage(labels.journey),
-      icon: <Icons.Path />,
+      icon: <Path />,
       path: '/goals',
     },
     {
       id: 'retention',
       label: formatMessage(labels.retention),
-      icon: <Icons.Magnet />,
+      icon: <Magnet />,
       path: '/retention',
     },
     {
       id: 'utm',
       label: formatMessage(labels.utm),
-      icon: <Icons.Tag />,
+      icon: <Tag />,
       path: '/utm',
     },
     {
       id: 'revenue',
       label: formatMessage(labels.revenue),
-      icon: <Icons.Money />,
+      icon: <Money />,
       path: '/revenue',
     },
     {
       id: 'attribution',
       label: formatMessage(labels.attribution),
-      icon: <Icons.Network />,
+      icon: <Network />,
       path: '/attribution',
     },
   ];

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

@@ -3,7 +3,7 @@ import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
-import { Icons } from '@/components/icons';
+import { Bolt, Eye } from '@/components/icons';
 
 export function EventsTable({ data = [] }) {
   const { formatTimezoneDate } = useTimezone();
@@ -27,7 +27,7 @@ export function EventsTable({ data = [] }) {
         {(row: any) => {
           return (
             <Row alignItems="center" gap="2">
-              <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
+              <Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
               {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
               <strong>{row.eventName || row.urlPath}</strong>
             </Row>

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

@@ -1,7 +1,7 @@
 import { Button, MenuTrigger, Dialog, Icon, Text, Modal } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { GoalAddForm } from './GoalAddForm';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 
 export function GoalAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -10,7 +10,7 @@ export function GoalAddButton({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="primary">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.addGoal)}</Text>
       </Button>

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

@@ -9,7 +9,15 @@ import {
 } from '@umami/react-zen';
 import { useApi, useMessages } from '@/components/hooks';
 
-export function GoalAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
+export function GoalAddForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
@@ -32,6 +40,7 @@ export function GoalAddForm({ onSave, onClose }: { onSave?: () => void; onClose?
 
   return (
     <Form onSubmit={handleSubmit} error={error?.message}>
+      {websiteId}
       <FormField
         name="name"
         label={formatMessage(labels.name)}

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

@@ -2,7 +2,7 @@ import { useFormat } from '@/components//hooks/useFormat';
 import { Empty } from '@/components/common/Empty';
 import { FilterButtons } from '@/components/common/FilterButtons';
 import { useCountryNames, useLocale, useMessages, useTimezone } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Eye, Visitor, Bolt } from '@/components/icons';
 import { BROWSERS, OS_NAMES } from '@/lib/constants';
 import { stringToColor } from '@/lib/format';
 import { RealtimeData } from '@/lib/types';
@@ -18,9 +18,9 @@ const TYPE_SESSION = 'session';
 const TYPE_EVENT = 'event';
 
 const icons = {
-  [TYPE_PAGEVIEW]: <Icons.Eye />,
-  [TYPE_SESSION]: <Icons.Visitor />,
-  [TYPE_EVENT]: <Icons.Bolt />,
+  [TYPE_PAGEVIEW]: <Eye />,
+  [TYPE_SESSION]: <Visitor />,
+  [TYPE_EVENT]: <Bolt />,
 };
 
 export function RealtimeLog({ data }: { data: RealtimeData }) {

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { Lucide } from '@/components/icons';
+import { Users } from '@/components/icons';
 import { useMessages, useLocale, useRetentionQuery } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import { formatLongNumber } from '@/lib/format';
@@ -68,7 +68,7 @@ export function RetentionTable({ websiteId, days = DAYS }: { websiteId: string;
               <Text weight="bold">{formatDate(date, 'PP', locale)}</Text>
               <Row alignItems="center" gap>
                 <Icon>
-                  <Lucide.Users />
+                  <Users />
                 </Icon>
                 <Text>{formatLongNumber(visitors)}</Text>
               </Row>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx

@@ -1,6 +1,6 @@
 import { isSameDay } from 'date-fns';
 import { Loading, Icon, StatusLight } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Bolt, Eye } from '@/components/icons';
 import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import styles from './SessionActivity.module.css';
 import { Fragment } from 'react';
@@ -42,7 +42,7 @@ export function SessionActivity({
                   {formatTimezoneDate(createdAt, 'pp')}
                 </StatusLight>
               </div>
-              <Icon>{eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
+              <Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
               <div>{eventName || urlPath}</div>
             </div>
           </Fragment>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -1,7 +1,7 @@
 import { Icon, TextField, Column, Row, Label, Box, Text } from '@umami/react-zen';
 import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
 import { TypeIcon } from '@/components/common/TypeIcon';
-import { Icons } from '@/components/icons';
+import { Location } from '@/components/icons';
 
 export function SessionInfo({ data }) {
   const { locale } = useLocale();
@@ -44,7 +44,7 @@ export function SessionInfo({ data }) {
         <Label>{formatMessage(labels.region)}</Label>
         <Row gap="3">
           <Icon>
-            <Icons.Location />
+            <Location />
           </Icon>
           {getRegionName(data?.region)}
         </Row>
@@ -54,7 +54,7 @@ export function SessionInfo({ data }) {
         <Label>{formatMessage(labels.city)}</Label>
         <Row gap="3">
           <Icon>
-            <Icons.Location />
+            <Location />
           </Icon>
           <Text>{data?.city}</Text>
         </Row>