Added menu options for cloud mode. Async fixes.

src/components/input/SegmentFilters.tsx

@@ -1,6 +1,7 @@
 import { List, ListItem } from '@umami/react-zen';
 import { useWebsiteSegmentsQuery } from '@/components/hooks';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { Empty } from '@/components/common/Empty';
 
 export interface SegmentFiltersProps {
   websiteId: string;
@@ -23,6 +24,7 @@ export function SegmentFilters({
 
   return (
     <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} overflowY="auto">
+      {data?.data?.length === 0 && <Empty />}
       <List selectionMode="single" value={[segmentId]} onChange={id => handleChange(id[0])}>
         {data?.data?.map(item => {
           return (

src/components/input/SettingsButton.tsx

@@ -10,23 +10,27 @@ import {
   MenuSection,
 } from '@umami/react-zen';
 import { useMessages, useLoginQuery, useNavigation, useConfig } from '@/components/hooks';
-import { LogOut, LockKeyhole, Settings, UserCircle } from '@/components/icons';
+import { LogOut, LockKeyhole, Settings, UserCircle, LifeBuoy, BookText } from '@/components/icons';
+import { DOCS_URL } from '@/lib/constants';
 
 export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
-  const { router, renderUrl } = useNavigation();
+  const { router } = useNavigation();
   const { cloudMode } = useConfig();
 
   const handleAction = (id: Key) => {
-    const url = `/${id}`;
+    const url = id.toString();
 
     if (cloudMode) {
-      window.location.href = url;
-      return;
+      if (url === '/docs') {
+        window.open(DOCS_URL, '_blank');
+      } else {
+        window.location.href = url;
+      }
+    } else {
+      router.push(url);
     }
-
-    router.push(renderUrl(url));
   };
 
   return (
@@ -40,12 +44,26 @@ export function SettingsButton() {
         <Menu autoFocus="last" onAction={handleAction}>
           <MenuSection title={user.username}>
             <MenuSeparator />
-            <MenuItem id="settings" icon={<Settings />} label={formatMessage(labels.settings)} />
+            <MenuItem id="/settings" icon={<Settings />} label={formatMessage(labels.settings)} />
             {!cloudMode && user.isAdmin && (
               <MenuItem id="admin" icon={<LockKeyhole />} label={formatMessage(labels.admin)} />
             )}
+            {cloudMode && (
+              <>
+                <MenuItem
+                  id="/docs"
+                  icon={<BookText />}
+                  label={formatMessage(labels.documentation)}
+                />
+                <MenuItem
+                  id="/settings/support"
+                  icon={<LifeBuoy />}
+                  label={formatMessage(labels.support)}
+                />
+              </>
+            )}
             <MenuSeparator />
-            <MenuItem id="logout" icon={<LogOut />} label={formatMessage(labels.logout)} />
+            <MenuItem id="/logout" icon={<LogOut />} label={formatMessage(labels.logout)} />
           </MenuSection>
         </Menu>
       </Popover>

src/components/messages.ts

@@ -360,6 +360,8 @@ export const labels = defineMessages({
   environment: { id: 'label.environment', defaultMessage: 'Environment' },
   criteria: { id: 'label.criteria', defaultMessage: 'Criteria' },
   share: { id: 'label.share', defaultMessage: 'Share' },
+  support: { id: 'label.support', defaultMessage: 'Support' },
+  documentation: { id: 'label.documentation', defaultMessage: 'Documentation' },
 });
 
 export const messages = defineMessages({