Merge branch 'dev' into boards

# Conflicts:
#	pnpm-lock.yaml

src/app/(main)/links/LinksTable.tsx

@@ -21,7 +21,11 @@ export function LinksTable(props: DataTableProps) {
       <DataColumn id="slug" label={formatMessage(labels.link)}>
         {({ slug }: any) => {
           const url = getSlugUrl(slug);
-          return <ExternalLink href={url}>{url}</ExternalLink>;
+          return (
+            <ExternalLink href={url} prefetch={false}>
+              {url}
+            </ExternalLink>
+          );
         }}
       </DataColumn>
       <DataColumn id="url" label={formatMessage(labels.destinationUrl)}>

src/app/(main)/links/[linkId]/LinkHeader.tsx

@@ -1,4 +1,4 @@
-import { Icon, Text } from '@umami/react-zen';
+import { IconLabel } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useLink, useMessages, useSlug } from '@/components/hooks';
@@ -10,12 +10,9 @@ export function LinkHeader() {
   const link = useLink();
 
   return (
-    <PageHeader title={link.name} description={link.url} icon={<Link />} marginBottom="3">
-      <LinkButton href={getSlugUrl(link.slug)} target="_blank">
-        <Icon>
-          <ExternalLink />
-        </Icon>
-        <Text>{formatMessage(labels.view)}</Text>
+    <PageHeader title={link.name} description={link.url} icon={<Link />}>
+      <LinkButton href={getSlugUrl(link.slug)} target="_blank" prefetch={false} asAnchor>
+        <IconLabel icon={<ExternalLink />} label={formatMessage(labels.view)} />
       </LinkButton>
     </PageHeader>
   );

src/app/(main)/pixels/PixelsTable.tsx

@@ -21,7 +21,11 @@ export function PixelsTable(props: DataTableProps) {
       <DataColumn id="url" label="URL">
         {({ slug }: any) => {
           const url = getSlugUrl(slug);
-          return <ExternalLink href={url}>{url}</ExternalLink>;
+          return (
+            <ExternalLink href={url} prefetch={false}>
+              {url}
+            </ExternalLink>
+          );
         }}
       </DataColumn>
       <DataColumn id="created" label={formatMessage(labels.created)}>

src/app/(main)/pixels/[pixelId]/PixelHeader.tsx

@@ -1,4 +1,4 @@
-import { Icon, Text } from '@umami/react-zen';
+import { IconLabel } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useMessages, usePixel, useSlug } from '@/components/hooks';
@@ -10,12 +10,9 @@ export function PixelHeader() {
   const pixel = usePixel();
 
   return (
-    <PageHeader title={pixel.name} icon={<Grid2x2 />} marginBottom="3">
-      <LinkButton href={getSlugUrl(pixel.slug)} target="_blank" prefetch={false}>
-        <Icon>
-          <ExternalLink />
-        </Icon>
-        <Text>{formatMessage(labels.view)}</Text>
+    <PageHeader title={pixel.name} icon={<Grid2x2 />}>
+      <LinkButton href={getSlugUrl(pixel.slug)} target="_blank" prefetch={false} asAnchor>
+        <IconLabel icon={<ExternalLink />} label={formatMessage(labels.view)} />
       </LinkButton>
     </PageHeader>
   );

src/app/(main)/websites/WebsitesDataTable.tsx

@@ -1,6 +1,8 @@
+import { Icon, Row } from '@umami/react-zen';
 import Link from 'next/link';
 import { DataGrid } from '@/components/common/DataGrid';
 import { useLoginQuery, useNavigation, useUserWebsitesQuery } from '@/components/hooks';
+import { Favicon } from '@/index';
 import { WebsitesTable } from './WebsitesTable';
 
 export function WebsitesDataTable({
@@ -21,7 +23,12 @@ export function WebsitesDataTable({
   const { renderUrl } = useNavigation();
 
   const renderLink = (row: any) => (
-    <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>
+    <Row alignItems="center" gap="3">
+      <Icon size="md" color="muted">
+        <Favicon domain={row.domain} />
+      </Icon>
+      <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>
+    </Row>
   );
 
   return (

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

@@ -13,12 +13,18 @@ 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} />}
+      titleHref={renderUrl(`/websites/${website.id}`, false)}
+    >
       <Row alignItems="center" gap="6" wrap="wrap">
         <ActiveUsers websiteId={website.id} />
 
@@ -29,7 +35,7 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
               <Icon>
                 <Edit />
               </Icon>
-              <Text>Edit</Text>
+              <Text>{formatMessage(labels.edit)}</Text>
             </LinkButton>
           </Row>
         )}