Updated layout. Fixed properties rendering.

src/components/common/Empty.tsx

@@ -16,6 +16,7 @@ export function Empty({ message }: EmptyProps) {
       width="100%"
       height="100%"
       minHeight="70px"
+      flexGrow={1}
     >
       {message || formatMessage(messages.noDataAvailable)}
     </Row>

src/components/common/PageHeader.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Heading, Icon, Row, Text } from '@umami/react-zen';
+import { Heading, Icon, Row, RowProps, Text } from '@umami/react-zen';
 
 export function PageHeader({
   title,
@@ -7,6 +7,7 @@ export function PageHeader({
   icon,
   showBorder = true,
   children,
+  ...props
 }: {
   title: string;
   description?: string;
@@ -15,7 +16,7 @@ export function PageHeader({
   allowEdit?: boolean;
   className?: string;
   children?: ReactNode;
-}) {
+} & RowProps) {
   return (
     <Row
       justifyContent="space-between"
@@ -23,6 +24,7 @@ export function PageHeader({
       paddingY="6"
       border={showBorder ? 'bottom' : undefined}
       width="100%"
+      {...props}
     >
       <Row alignItems="center" gap="3">
         {icon && <Icon>{icon}</Icon>}

src/components/icons.ts

@@ -45,6 +45,7 @@ export {
   Upload,
   User,
   Users,
+  UserPlus,
   X as Close,
 } from 'lucide-react';
 export * from '@/components/svg';

src/components/input/PanelButton.tsx

@@ -0,0 +1,14 @@
+import { Button, Icon } from '@umami/react-zen';
+import { PanelLeft } from '@/components/icons';
+import { useGlobalState } from '@/components/hooks';
+
+export function PanelButton() {
+  const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
+  return (
+    <Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet">
+      <Icon>
+        <PanelLeft />
+      </Icon>
+    </Button>
+  );
+}

src/components/input/TeamsButton.tsx

@@ -16,13 +16,7 @@ import {
 import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
 import { Chevron, User, Users } from '@/components/icons';
 
-export function TeamsButton({
-  className,
-  showText = true,
-}: {
-  className?: string;
-  showText?: boolean;
-}) {
+export function TeamsButton({ showText = true }: { showText?: boolean }) {
   const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { data } = useUserTeamsQuery(user.id);
@@ -41,13 +35,17 @@ export function TeamsButton({
 
   return (
     <MenuTrigger>
-      <Button className={className} variant="quiet">
-        <Row alignItems="center" gap="3">
-          <Icon>{teamId ? <Users /> : <User />}</Icon>
-          {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-          <Icon rotate={90} size="sm">
-            <Chevron />
-          </Icon>
+      <Button variant="quiet">
+        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
+          <Row alignItems="center" gap>
+            <Icon>{teamId ? <Users /> : <User />}</Icon>
+            {showText && <Text truncate>{teamId ? team?.name : user.username}</Text>}
+          </Row>
+          {showText && (
+            <Icon rotate={90} size="sm">
+              <Chevron />
+            </Icon>
+          )}
         </Row>
       </Button>
       <Popover placement="bottom start">

src/components/input/WebsiteSelect.tsx

@@ -1,16 +1,17 @@
 import { useState } from 'react';
 import { Select, SelectProps, ListItem } from '@umami/react-zen';
 import { useUserWebsitesQuery, useWebsiteQuery, useNavigation } from '@/components/hooks';
+import { ButtonProps } from 'react-basics';
 
 export function WebsiteSelect({
   websiteId,
   teamId,
-  variant,
+  buttonProps,
   ...props
 }: {
   websiteId?: string;
   teamId?: string;
-  variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
+  buttonProps?: ButtonProps;
 } & SelectProps) {
   const { router, renderUrl } = useNavigation();
   const [search, setSearch] = useState('');
@@ -32,7 +33,7 @@ export function WebsiteSelect({
       items={data?.['data'] || []}
       value={websiteId}
       isLoading={isLoading}
-      buttonProps={{ variant }}
+      buttonProps={buttonProps}
       allowSearch={true}
       searchValue={search}
       onSearch={handleSearch}

src/components/messages.ts

@@ -338,7 +338,7 @@ export const labels = defineMessages({
   location: { id: 'label.location', defaultMessage: 'Location' },
   chart: { id: 'label.chart', defaultMessage: 'Chart' },
   table: { id: 'label.table', defaultMessage: 'Table' },
-  core: { id: 'label.core', defaultMessage: 'Core' },
+  traffic: { id: 'label.traffic', defaultMessage: 'Traffic' },
   behavior: { id: 'label.behavior', defaultMessage: 'Behavior' },
   growth: { id: 'label.growth', defaultMessage: 'Growth' },
 });