Settings refactor.

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,5 +1,14 @@
 import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import {
+  Button,
+  Icon,
+  Modal,
+  Dialog,
+  DialogTrigger,
+  Text,
+  Column,
+  useToast,
+} from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
@@ -24,7 +33,11 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addWebsite)}>
-          {({ close }) => <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
+          {({ close }) => (
+            <Column width="300px">
+              <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
+            </Column>
+          )}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -6,7 +6,7 @@ import { Eye, SquarePen } from '@/components/icons';
 import Link from 'next/link';
 
 export interface WebsitesTableProps {
-  data: any[];
+  data: Record<string, any>[];
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
@@ -22,7 +22,8 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
+  const { renderUrl, pathname } = useNavigation();
+  const isSettings = pathname.includes('/settings');
 
   if (!data?.length) {
     return children;
@@ -31,7 +32,11 @@ export function WebsitesTable({
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={renderUrl(`/websites/${row.id}`, false)}>{row.name}</Link>}
+        {(row: any) => (
+          <Link href={renderUrl(`${isSettings ? '/settings' : ''}/websites/${row.id}`, false)}>
+            {row.name}
+          </Link>
+        )}
       </DataColumn>
       <DataColumn id="domain" label={formatMessage(labels.domain)} />
       {showActions && (
@@ -41,7 +46,7 @@ export function WebsitesTable({
 
             return (
               <MenuButton>
-                {allowEdit && (
+                {allowView && (
                   <MenuItem href={renderUrl(`/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-view">
@@ -51,7 +56,7 @@ export function WebsitesTable({
                     </Row>
                   </MenuItem>
                 )}
-                {allowView && (
+                {allowEdit && (
                   <MenuItem href={renderUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">

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

@@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 420 }}>
+    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

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

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
-import { Globe, Arrow } from '@/components/icons';
+import { Globe, Eye } from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
@@ -25,7 +25,7 @@ export function WebsiteSettings({
       <SectionHeader title={website?.name} icon={<Globe />}>
         <LinkButton href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Icon>
-            <Arrow />
+            <Eye />
           </Icon>
           <Text>{formatMessage(labels.view)}</Text>
         </LinkButton>
@@ -35,7 +35,7 @@ export function WebsiteSettings({
           <Tab id="details">{formatMessage(labels.details)}</Tab>
           <Tab id="tracking">{formatMessage(labels.trackingCode)}</Tab>
           <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
-          <Tab id="data">{formatMessage(labels.data)}</Tab>
+          <Tab id="manage">{formatMessage(labels.manage)}</Tab>
         </TabList>
         <TabPanel id="details">
           <WebsiteEditForm websiteId={websiteId} />
@@ -44,9 +44,9 @@ export function WebsiteSettings({
           <WebsiteTrackingCode websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="share">
-          <WebsiteShareForm websiteId={websiteId} />
+          <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
         </TabPanel>
-        <TabPanel id="data">
+        <TabPanel id="manage">
           <WebsiteData websiteId={websiteId} />
         </TabPanel>
       </Tabs>