Merge pull request umami-software#3805 from prince0xdev/feat/mobile-navigation-improvement

Improve mobile navigation: clickable “online” badge & page title

Author: mikecao

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

@@ -13,12 +13,19 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
   const { renderUrl, pathname } = useNavigation();
   const isSettings = pathname.endsWith('/settings');
 
+  const { formatMessage, labels } = useMessages();
+
   if (isSettings) {
     return null;
   }
 
   return (
-    <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
+    <PageHeader
+      title={website.name}
+      icon={<Favicon domain={website.domain} />}
+      marginBottom="3"
+      titleHref={renderUrl(`/websites/${website.id}`, false)}
+    >
       <Row alignItems="center" gap="6" wrap="wrap">
         <ActiveUsers websiteId={website.id} />
 
@@ -29,7 +36,7 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
               <Icon>
                 <Edit />
               </Icon>
-              <Text>Edit</Text>
+              <Text>{formatMessage(labels.edit)}</Text>
             </LinkButton>
           </Row>
         )}

src/components/common/PageHeader.tsx

@@ -1,19 +1,22 @@
 import { ReactNode } from 'react';
 import { Heading, Icon, Row, Text, Column, Grid } from '@umami/react-zen';
+import { LinkButton } from './LinkButton';
 
 export function PageHeader({
   title,
   description,
   label,
   icon,
   showBorder = true,
+  titleHref,
   children,
 }: {
   title: string;
   description?: string;
   label?: ReactNode;
   icon?: ReactNode;
   showBorder?: boolean;
+  titleHref?: string;
   allowEdit?: boolean;
   className?: string;
   children?: ReactNode;
@@ -33,7 +36,13 @@ export function PageHeader({
               {icon}
             </Icon>
           )}
-          {title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>}
+          {title && titleHref ? (
+            <LinkButton href={titleHref} variant="quiet">
+              <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
+            </LinkButton>
+          ) : (
+            title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
+          )}
         </Row>
         {description && (
           <Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>

src/components/metrics/ActiveUsers.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Text, StatusLight } from '@umami/react-zen';
 import { useMessages, useActyiveUsersQuery } from '@/components/hooks';
+import { LinkButton } from '@/components/common/LinkButton';
 
 export function ActiveUsers({
   websiteId,
@@ -27,10 +28,12 @@ export function ActiveUsers({
   }
 
   return (
-    <StatusLight variant="success">
-      <Text size="2" weight="medium">
-        {count} {formatMessage(labels.online)}
-      </Text>
-    </StatusLight>
+    <LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
+      <StatusLight variant="success">
+        <Text size="2" weight="medium">
+          {count} {formatMessage(labels.online)}
+        </Text>
+      </StatusLight>
+    </LinkButton>
   );
 }

src/lang/ar-SA.json

@@ -289,6 +289,7 @@
   "label.websites": "المواقع",
   "label.window": "النافذة",
   "label.yesterday": "الأمس",
+  "label.behavior": "السلوك",
   "message.action-confirmation": "اكتب {confirmation} في المربع أدناه للتأكيد.",
   "message.active-users": "{x} حاليا {x, plural, one {زائر واحد} other {زوار}}",
   "message.bad-request": "Bad request",

src/lang/be-BY.json

@@ -20,6 +20,7 @@
   "label.average": "Сярэдняе",
   "label.back": "Назад",
   "label.before": "Да",
+  "label.behavior": "Паводзіны",
   "label.boards": "Дошкі",
   "label.bounce-rate": "Паказчык адмоваў",
   "label.breakdown": "Разбіўка",

src/lang/bg-BG.json

@@ -20,6 +20,7 @@
   "label.average": "Средно",
   "label.back": "Назад",
   "label.before": "Преди",
+  "label.behavior": "Поведение",
   "label.boards": "Дъски",
   "label.bounce-rate": "Kоефициент на отказ",
   "label.breakdown": "Разбивка",

src/lang/bn-BD.json

@@ -20,6 +20,7 @@
   "label.average": "গড়",
   "label.back": "পেছনে",
   "label.before": "পূর্বে",
+  "label.behavior": "আচরণ",
   "label.boards": "বোর্ডসমূহ",
   "label.bounce-rate": "উপরে উঠার হার",
   "label.breakdown": "ভাঙ্গন",

src/lang/bs-BA.json

@@ -20,6 +20,7 @@
   "label.average": "Prosjek",
   "label.back": "Nazad",
   "label.before": "Prije",
+  "label.behavior": "Ponašanje",
   "label.boards": "Ploče",
   "label.bounce-rate": "Stopa napuštanja",
   "label.breakdown": "Pregled po kategorijama",

src/lang/ca-ES.json

@@ -20,6 +20,7 @@
   "label.average": "Mitjana",
   "label.back": "Enrere",
   "label.before": "Abans",
+  "label.behavior": "Comportament",
   "label.boards": "Taulers",
   "label.bounce-rate": "Percentatge de rebot",
   "label.breakdown": "Desglossament",

src/lang/cs-CZ.json

@@ -20,6 +20,7 @@
   "label.average": "Průměr",
   "label.back": "Zpět",
   "label.before": "Před",
+  "label.behavior": "Chování",
   "label.boards": "Nástěnky",
   "label.bounce-rate": "Okamžité opuštění",
   "label.breakdown": "Rozpis",