Refactored settings. Updated sidebar.

src/components/common/LoadingPanel.tsx

@@ -43,7 +43,7 @@ export function LoadingPanel({
       {!error && !isLoading && !isFetching && empty && renderEmpty()}
 
       {/* Show main content when data exists */}
-      {!error && !empty && children}
+      {!isLoading && !isFetching && !error && !empty && children}
     </>
   );
 }

src/components/input/ProfileButton.tsx

@@ -1,4 +1,4 @@
-import { Key } from 'react';
+import { Fragment } from 'react';
 import {
   Icon,
   Button,
@@ -11,19 +11,37 @@ import {
   Text,
   Row,
 } from '@umami/react-zen';
-import { useRouter } from 'next/navigation';
-import { useMessages, useLoginQuery } from '@/components/hooks';
-import { LogOut, Settings, UserCircle, LockKeyhole } from '@/components/icons';
+import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
+import { LogOut, UserCircle, LockKeyhole } from '@/components/icons';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
-  const router = useRouter();
+  const { renderUrl } = useNavigation();
   const cloudMode = !!process.env.cloudMode;
 
-  const handleSelect = (key: Key) => {
-    router.push(`/${key}`);
-  };
+  const items = [
+    {
+      id: 'profile',
+      label: formatMessage(labels.profile),
+      path: renderUrl('/settings/profile'),
+      icon: <UserCircle />,
+    },
+    user.isAdmin &&
+      !cloudMode && {
+        id: 'admin',
+        label: formatMessage(labels.admin),
+        path: '/admin',
+        icon: <LockKeyhole />,
+      },
+    {
+      id: 'LogOut',
+      label: formatMessage(labels.logout),
+      path: '/logout',
+      icon: <LogOut />,
+      separator: true,
+    },
+  ].filter(n => n);
 
   return (
     <MenuTrigger>
@@ -33,37 +51,22 @@ export function ProfileButton() {
         </Icon>
       </Button>
       <Popover placement="bottom end">
-        <Menu autoFocus="last" onAction={handleSelect}>
+        <Menu autoFocus="last">
           <MenuSection title={user.username}>
             <MenuSeparator />
-            <MenuItem id="settings">
-              <Row alignItems="center" gap>
-                <Icon>
-                  <Settings />
-                </Icon>
-                <Text>{formatMessage(labels.settings)}</Text>
-              </Row>
-            </MenuItem>
-            {user.isAdmin && (
-              <MenuItem id="admin">
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <LockKeyhole />
-                  </Icon>
-                  <Text>{formatMessage(labels.admin)}</Text>
-                </Row>
-              </MenuItem>
-            )}
-            {!cloudMode && (
-              <MenuItem data-test="item-logout" id="logout">
-                <Row alignItems="center" gap>
-                  <Icon>
-                    <LogOut />
-                  </Icon>
-                  <Text>{formatMessage(labels.logout)}</Text>
-                </Row>
-              </MenuItem>
-            )}
+            {items.map(({ id, path, label, icon, separator }) => {
+              return (
+                <Fragment key={id}>
+                  {separator && <MenuSeparator />}
+                  <MenuItem id={id} href={path}>
+                    <Row alignItems="center" gap>
+                      <Icon>{icon}</Icon>
+                      <Text>{label}</Text>
+                    </Row>
+                  </MenuItem>
+                </Fragment>
+              );
+            })}
           </MenuSection>
         </Menu>
       </Popover>

src/components/input/WebsiteSelect.tsx

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

src/components/metrics/MetricsTable.tsx

@@ -117,7 +117,7 @@ export function MetricsTable({
 
   return (
     <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
-      <Grid rows="auto 1fr" height="100%" overflow="hidden" gap>
+      <Grid rows="40px 1fr" height="100%" overflow="hidden" gap>
         <Row alignItems="center">
           {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
           <Row justifyContent="flex-end" flexGrow={1} gap>