Merge branch 'dev' of https://github.com/umami-software/umami into dev

src/components/common/ExternalLink.tsx

@@ -1,8 +1,13 @@
 import { Icon, Row, Text } from '@umami/react-zen';
-import Link from 'next/link';
+import Link, { type LinkProps } from 'next/link';
+import type { ReactNode } from 'react';
 import { ExternalLink as LinkIcon } from '@/components/icons';
 
-export function ExternalLink({ href, children, ...props }) {
+export function ExternalLink({
+  href,
+  children,
+  ...props
+}: LinkProps & { href: string; children: ReactNode }) {
   return (
     <Row alignItems="center" overflow="hidden" gap>
       <Text title={href} truncate>

src/components/common/LinkButton.tsx

@@ -9,6 +9,7 @@ export interface LinkButtonProps extends ButtonProps {
   scroll?: boolean;
   variant?: any;
   prefetch?: boolean;
+  asAnchor?: boolean;
   children?: ReactNode;
 }
 
@@ -19,15 +20,22 @@ export function LinkButton({
   target,
   prefetch,
   children,
+  asAnchor,
   ...props
 }: LinkButtonProps) {
   const { dir } = useLocale();
 
   return (
     <Button {...props} variant={variant} asChild>
-      <Link href={href} dir={dir} scroll={scroll} target={target} prefetch={prefetch}>
-        {children}
-      </Link>
+      {asAnchor ? (
+        <a href={href} target={target}>
+          {children}
+        </a>
+      ) : (
+        <Link href={href} dir={dir} scroll={scroll} target={target} prefetch={prefetch}>
+          {children}
+        </Link>
+      )}
     </Button>
   );
 }

src/components/common/PageHeader.tsx

@@ -1,5 +1,6 @@
 import { Column, Grid, Heading, Icon, Row, Text } from '@umami/react-zen';
 import type { ReactNode } from 'react';
+import { LinkButton } from './LinkButton';
 
 export function PageHeader({
   title,
@@ -7,6 +8,7 @@ export function PageHeader({
   label,
   icon,
   showBorder = true,
+  titleHref,
   children,
 }: {
   title: string;
@@ -14,6 +16,7 @@ export function PageHeader({
   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}>
@@ -41,7 +50,9 @@ export function PageHeader({
           </Text>
         )}
       </Column>
-      <Row justifyContent="flex-end">{children}</Row>
+      <Row justifyContent="flex-end" alignItems="center">
+        {children}
+      </Row>
     </Grid>
   );
 }