Use FormattedMessage. Updated icons. Fixed bugs.

src/components/common/PageHeader.tsx

@@ -4,6 +4,7 @@ import { Heading, Icon, Row, RowProps, Text, Column } from '@umami/react-zen';
 export function PageHeader({
   title,
   description,
+  label,
   icon,
   showBorder = true,
   children,
@@ -11,6 +12,7 @@ export function PageHeader({
 }: {
   title: string;
   description?: string;
+  label?: ReactNode;
   icon?: ReactNode;
   showBorder?: boolean;
   allowEdit?: boolean;
@@ -26,7 +28,8 @@ export function PageHeader({
       width="100%"
       {...props}
     >
-      <Column>
+      <Column gap="2">
+        {label}
         <Row alignItems="center" gap="3">
           {icon && (
             <Icon size="md" color="muted">

src/components/hooks/useMessages.ts

@@ -1,7 +1,22 @@
-import { useIntl } from 'react-intl';
+import { useIntl, FormattedMessage, type MessageDescriptor } from 'react-intl';
 import { messages, labels } from '@/components/messages';
 
-export function useMessages() {
+type FormatMessage = (
+  descriptor: MessageDescriptor,
+  values?: Record<string, string | number | boolean | null | undefined>,
+  opts?: any,
+) => string | null;
+
+interface UseMessages {
+  formatMessage: FormatMessage;
+  messages: typeof messages;
+  labels: typeof labels;
+  getMessage: (id: string) => string;
+  getErrorMessage: (error: unknown) => string | undefined;
+  FormattedMessage: typeof FormattedMessage;
+}
+
+export function useMessages(): UseMessages {
   const intl = useIntl();
 
   const getMessage = (id: string) => {
@@ -21,15 +36,12 @@ export function useMessages() {
   };
 
   const formatMessage = (
-    descriptor: {
-      id: string;
-      defaultMessage: string;
-    },
-    values?: Record<string, string>,
+    descriptor: MessageDescriptor,
+    values?: Record<string, string | number | boolean | null | undefined>,
     opts?: any,
   ) => {
     return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
   };
 
-  return { formatMessage, messages, labels, getMessage, getErrorMessage };
+  return { formatMessage, messages, labels, getMessage, getErrorMessage, FormattedMessage };
 }

src/components/icons.ts

@@ -1,17 +1,13 @@
 export * from 'lucide-react';
 export {
   Logo as LogoSvg,
-  Bolt as BoltSvg,
-  Change as ChangeSvg,
   Compare as CompareSvg,
   Funnel as FunnelSvg,
-  Lightbulb as LightbulbSvg,
   Lightning as LightningSvg,
   Location as LocationSvg,
   Magnet as MagnetSvg,
   Money as MoneySvg,
   Network as NetworkSvg,
   Path as PathSvg,
-  Tag as TagSvg,
   Target as TargetSvg,
 } from '@/components/svg';

src/components/input/WebsiteDateFilter.tsx

@@ -18,7 +18,7 @@ export function WebsiteDateFilter({
   showButtons = true,
   allowCompare,
 }: WebsiteDateFilterProps) {
-  const { dateRange } = useDateRange(websiteId);
+  const { dateRange, saveDateRange } = useDateRange(websiteId);
   const { value, endDate } = dateRange;
   const { formatMessage, labels } = useMessages();
   const {
@@ -32,6 +32,7 @@ export function WebsiteDateFilter({
   const disableForward = value === 'all' || isAfter(endDate, new Date());
 
   const handleChange = (date: string) => {
+    saveDateRange(date);
     router.push(updateParams({ date, offset: undefined }));
   };
 

src/components/metrics/WeeklyTraffic.tsx

@@ -85,7 +85,7 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                             height="16px"
                             borderRadius="full"
                             style={{ margin: '0 auto' }}
-                            role="cell"
+                            role="button"
                           >
                             <Row
                               backgroundColor="primary"