Fixed 'use client' usage.

src/app/(main)/settings/SettingsLayout.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { ReactNode } from 'react';
 import { useLogin, useMessages } from 'components/hooks';
-import SettingsLayout from 'components/layout/SettingsLayout';
+import MenuLayout from 'components/layout/MenuLayout';
 
-export default function Settings({ children }: { children: ReactNode }) {
+export default function SettingsLayout({ children }: { children: ReactNode }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
 
@@ -21,5 +21,5 @@ export default function Settings({ children }: { children: ReactNode }) {
     },
   ].filter(n => n);
 
-  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+  return <MenuLayout items={items}>{children}</MenuLayout>;
 }

src/app/(main)/settings/layout.tsx

@@ -1,5 +1,5 @@
-import Settings from './Settings';
+import SettingsLayout from './SettingsLayout';
 
 export default function ({ children }) {
-  return <Settings>{children}</Settings>;
+  return <SettingsLayout>{children}</SettingsLayout>;
 }

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useRef } from 'react';
 import {
   Form,

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useMessages, useLocale, useLogin } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import ConfirmationForm from 'components/common/ConfirmationForm';

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/teams/TeamsDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
 import { useTeams } from 'components/hooks';

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/teams/TeamsPage.tsx

@@ -0,0 +1,12 @@
+'use client';
+import TeamsDataTable from './TeamsDataTable';
+import TeamsHeader from './TeamsHeader';
+
+export default function TeamsPage() {
+  return (
+    <>
+      <TeamsHeader />
+      <TeamsDataTable />
+    </>
+  );
+}

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';

src/app/(main)/settings/teams/WebsiteTags.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import styles from './WebsiteTags.module.css';
 

src/app/(main)/settings/teams/[teamId]/members/TeamMemberRemoveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { touch } from 'store/modified';

src/app/(main)/settings/teams/[teamId]/members/TeamMembersDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import TeamMembersTable from './TeamMembersTable';
 import { useTeamMembers } from 'components/hooks';

src/app/(main)/settings/teams/[teamId]/members/TeamMembersPage.tsx

@@ -1,17 +1,18 @@
 'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import TeamMembersDataTable from './TeamMembersDataTable';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 
-export function TeamMembers({ teamId }: { teamId: string }) {
+export function TeamMembersPage({ teamId }: { teamId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <TeamProvider teamId={teamId}>
       <PageHeader title={formatMessage(labels.members)} />
       <TeamMembersDataTable teamId={teamId} allowEdit={true} />
-    </>
+    </TeamProvider>
   );
 }
 
-export default TeamMembers;
+export default TeamMembersPage;

src/app/(main)/settings/teams/[teamId]/members/TeamMembersTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/teams/[teamId]/members/page.tsx

@@ -1,13 +1,8 @@
-import TeamMembers from './TeamMembers';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamMembersPage from './TeamMembersPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamMembers teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamMembersPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/teams/[teamId]/team/TeamAdmin.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import TeamDeleteForm from './TeamDeleteForm';

src/app/(main)/settings/teams/[teamId]/team/TeamDeleteForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { touch } from 'store/modified';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';

src/app/(main)/settings/teams/[teamId]/team/TeamDetails.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useState } from 'react';
 import { Item, Tabs, Flexbox, Text, Icon } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
@@ -10,7 +9,7 @@ import TeamAdmin from './TeamAdmin';
 import LinkButton from 'components/common/LinkButton';
 import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
-export function Team({ teamId }: { teamId: string }) {
+export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
@@ -42,4 +41,4 @@ export function Team({ teamId }: { teamId: string }) {
   );
 }
 
-export default Team;
+export default TeamDetails;

src/app/(main)/settings/teams/[teamId]/team/TeamEditForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   SubmitButton,
   Form,

src/app/(main)/settings/teams/[teamId]/team/TeamPage.tsx

@@ -0,0 +1,13 @@
+'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamDetails from './TeamDetails';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  return (
+    <TeamProvider teamId={teamId}>
+      <TeamDetails teamId={teamId} />
+    </TeamProvider>
+  );
+}
+
+export default TeamMembersPage;

src/app/(main)/settings/teams/[teamId]/team/page.tsx

@@ -1,13 +1,8 @@
-import Team from './Team';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import { Metadata } from 'next';
+import TeamPage from './TeamPage';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <Team teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsiteRemoveButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useTeamWebsites } from 'components/hooks';
 import TeamWebsitesTable from './TeamWebsitesTable';

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesPage.tsx

@@ -1,17 +1,18 @@
 'use client';
+import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
 import TeamWebsitesDataTable from './TeamWebsitesDataTable';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 
-export function TeamWebsites({ teamId }: { teamId: string }) {
+export function TeamWebsitesPage({ teamId }: { teamId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <>
+    <TeamProvider teamId={teamId}>
       <PageHeader title={formatMessage(labels.websites)} />
       <TeamWebsitesDataTable teamId={teamId} allowEdit={true} />
-    </>
+    </TeamProvider>
   );
 }
 
-export default TeamWebsites;
+export default TeamWebsitesPage;

src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';

src/app/(main)/settings/teams/[teamId]/websites/page.tsx

@@ -1,15 +1,10 @@
-import TeamWebsites from './TeamWebsites';
-import TeamProvider from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamWebsitesPage from './TeamWebsitesPage';
 import { Metadata } from 'next';
 
 export default function ({ params: { teamId } }) {
-  return (
-    <TeamProvider teamId={teamId}>
-      <TeamWebsites teamId={teamId} />
-    </TeamProvider>
-  );
+  return <TeamWebsitesPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {
-  title: 'Teams websites - Umami',
+  title: 'Teams Websites - Umami',
 };

src/app/(main)/settings/teams/page.tsx

@@ -1,14 +1,8 @@
 import { Metadata } from 'next';
-import TeamsDataTable from './TeamsDataTable';
-import TeamsHeader from './TeamsHeader';
+import TeamsPage from './TeamsPage';
 
 export default function () {
-  return (
-    <>
-      <TeamsHeader />
-      <TeamsDataTable />
-    </>
-  );
+  return <TeamsPage />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/users/UserAddButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
 import UserAddForm from './UserAddForm';
 import { useMessages } from 'components/hooks';

src/app/(main)/settings/users/UserAddForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   Dropdown,
   Item,

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import UserDeleteForm from './UserDeleteForm';

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import ConfirmationForm from 'components/common/ConfirmationForm';
 import { touch } from 'store/modified';

src/app/(main)/settings/users/UserEditForm.tsx

@@ -1,4 +1,3 @@
-'use client';
 import {
   Dropdown,
   Item,

src/app/(main)/settings/users/UsersDataTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import DataTable from 'components/common/DataTable';
 import { useUsers } from 'components/hooks';
 import UsersTable from './UsersTable';

src/app/(main)/settings/users/UsersHeader.tsx

@@ -1,4 +1,3 @@
-'use client';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 import UserAddButton from './UserAddButton';

src/app/(main)/settings/users/UsersPage.tsx

@@ -0,0 +1,12 @@
+'use client';
+import UsersDataTable from './UsersDataTable';
+import UsersHeader from './UsersHeader';
+
+export default function UsersPage() {
+  return (
+    <>
+      <UsersHeader />
+      <UsersDataTable />
+    </>
+  );
+}

src/app/(main)/settings/users/UsersTable.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import { ROLES } from 'lib/constants';

src/app/(main)/settings/users/[userId]/UserPage.tsx

@@ -0,0 +1,6 @@
+'use client';
+import UserSettings from './UserSettings';
+
+export default function ({ userId }: { userId: string }) {
+  return <UserSettings userId={userId} />;
+}

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { Key, useState } from 'react';
 import { Item, Loading, Tabs } from 'react-basics';
 import Icons from 'components/icons';

src/app/(main)/settings/users/[userId]/UserWebsites.tsx

@@ -1,4 +1,3 @@
-'use client';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
 import DataTable from 'components/common/DataTable';
 import { useWebsites } from 'components/hooks';

src/app/(main)/settings/users/[userId]/page.tsx

@@ -1,5 +1,10 @@
-import UserSettings from './UserSettings';
+import UserPage from './UserPage';
+import { Metadata } from 'next';
 
 export default function ({ params: { userId } }) {
-  return <UserSettings userId={userId} />;
+  return <UserPage userId={userId} />;
 }
+
+export const metadata: Metadata = {
+  title: 'User Settings - Umami',
+};

src/app/(main)/settings/users/page.tsx

@@ -1,14 +1,8 @@
 import { Metadata } from 'next';
-import UsersDataTable from './UsersDataTable';
-import UsersHeader from './UsersHeader';
+import UsersPage from './UsersPage';
 
 export default function () {
-  return (
-    <>
-      <UsersHeader />
-      <UsersDataTable />
-    </>
-  );
+  return <UsersPage />;
 }
 export const metadata: Metadata = {
   title: 'Users | Umami',

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

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
 import { useMessages } from 'components/hooks';

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

@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,

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

@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
 import DataTable from 'components/common/DataTable';

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

@@ -1,4 +1,3 @@
-'use client';
 import { useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';

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

@@ -3,12 +3,12 @@ import { useLogin } from 'components/hooks';
 import WebsitesDataTable from './WebsitesDataTable';
 import WebsitesHeader from './WebsitesHeader';
 
-export default function Websites({ teamId }: { teamId: string }) {
+export default function WebsitesPage({ teamId }: { teamId: string }) {
   const { user } = useLogin();
 
   return (
     <>
-      <WebsitesHeader teamId={teamId} showActions={user.role !== 'view-only'} />
+      <WebsitesHeader teamId={teamId} allowCreate={user.role !== 'view-only'} />
       <WebsitesDataTable teamId={teamId} userId={user.id} allowEdit={true} />
     </>
   );

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

@@ -1,4 +1,3 @@
-'use client';
 import { ReactNode } from 'react';
 import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { useMessages, useTeamUrl } from 'components/hooks';

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

@@ -1,4 +1,3 @@
-'use client';
 import {
   Form,
   FormRow,

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

@@ -1,4 +1,3 @@
-'use client';
 import { TextArea } from 'react-basics';
 import { useMessages, useConfig } from 'components/hooks';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { Button, Modal, ModalTrigger, ActionForm, useToasts } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import { useMessages } from 'components/hooks';

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

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { useContext, useRef } from 'react';
 import {
   SubmitButton,

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

@@ -0,0 +1,11 @@
+'use client';
+import WebsiteProvider from 'app/(main)/websites/[websiteId]/WebsiteProvider';
+import WebsiteSettings from './WebsiteSettings';
+
+export default function WebsitePage({ websiteId }: { websiteId: string }) {
+  return (
+    <WebsiteProvider websiteId={websiteId}>
+      <WebsiteSettings websiteId={websiteId} />
+    </WebsiteProvider>
+  );
+}

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

@@ -1,4 +1,3 @@
-'use client';
 import { useApi, useMessages } from 'components/hooks';
 import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { useState, Key, useContext } from 'react';
 import { Item, Tabs, Button, Text, Icon } from 'react-basics';
 import Link from 'next/link';

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

@@ -1,10 +1,10 @@
-import WebsiteProvider from 'app/(main)/websites/[websiteId]/WebsiteProvider';
-import WebsiteSettings from './WebsiteSettings';
+import WebsitePage from './WebsitePage';
+import { Metadata } from 'next';
 
-export default async function WebsiteSettingsPage({ params: { websiteId } }) {
-  return (
-    <WebsiteProvider websiteId={websiteId}>
-      <WebsiteSettings websiteId={websiteId} />
-    </WebsiteProvider>
-  );
+export default async function ({ params: { websiteId } }) {
+  return <WebsitePage websiteId={websiteId} />;
 }
+
+export const metadata: Metadata = {
+  title: 'Website settings - Umami',
+};

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

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import Websites from './Websites';
+import WebsitesPage from './WebsitesPage';
 
 export default function ({ params: { teamId } }: { params: { teamId: string } }) {
-  return <Websites teamId={teamId} />;
+  return <WebsitesPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {