Added settings layout.

package.components.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.40.0",
+  "version": "0.1.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

src/app/(main)/NavBar.tsx

@@ -49,13 +49,13 @@ export function NavBar() {
         },
         {
           label: formatMessage(labels.profile),
-          url: '/settings/profile',
+          url: '/profile',
         },
       ],
     },
     cloudMode && {
       label: formatMessage(labels.profile),
-      url: '/settings/profile',
+      url: '/profile',
     },
     !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
   ].filter(n => n);

src/app/(main)/profile/PasswordChangeButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
-import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm';
+import PasswordEditForm from 'app/(main)/profile/PasswordEditForm';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
 

src/app/(main)/profile/ProfileSettings.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
-import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
-import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
-import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
+import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
+import LanguageSetting from 'app/(main)/profile/LanguageSetting';
+import ThemeSetting from 'app/(main)/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
 import { useLogin, useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';

src/app/(main)/profile/page.tsx

@@ -12,5 +12,5 @@ export default function () {
 }
 
 export const metadata: Metadata = {
-  title: 'Profile Settings | Umami',
+  title: 'Profile | Umami',
 };

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

@@ -0,0 +1,25 @@
+'use client';
+import { ReactNode } from 'react';
+import { useLogin, useMessages } from 'components/hooks';
+import SettingsLayout from 'components/layout/SettingsLayout';
+
+export default function Settings({ children }: { children: ReactNode }) {
+  const { user } = useLogin();
+  const { formatMessage, labels } = useMessages();
+
+  const items = [
+    {
+      key: 'websites',
+      label: formatMessage(labels.websites),
+      url: '/settings/websites',
+    },
+    { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+    user.isAdmin && {
+      key: 'users',
+      label: formatMessage(labels.users),
+      url: '/settings/users',
+    },
+  ].filter(n => n);
+
+  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+}

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

@@ -1,56 +1,5 @@
-'use client';
-import { usePathname } from 'next/navigation';
-import { useLogin, useMessages, useTeamUrl } from 'components/hooks';
-import SideNav from 'components/layout/SideNav';
-import styles from './layout.module.css';
+import Settings from './Settings';
 
-export default function SettingsLayout({ children }) {
-  const { user } = useLogin();
-  const pathname = usePathname();
-  const { formatMessage, labels } = useMessages();
-  const cloudMode = !!process.env.cloudMode;
-  const { teamId, renderTeamUrl } = useTeamUrl();
-
-  const items = [
-    teamId && {
-      key: 'team',
-      label: formatMessage(labels.team),
-      url: renderTeamUrl('/settings/team'),
-    },
-    teamId && {
-      key: 'members',
-      label: formatMessage(labels.members),
-      url: renderTeamUrl('/settings/members'),
-    },
-    {
-      key: 'websites',
-      label: formatMessage(labels.websites),
-      url: renderTeamUrl('/settings/websites'),
-    },
-    !teamId && { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
-    !teamId &&
-      user.isAdmin && {
-        key: 'users',
-        label: formatMessage(labels.users),
-        url: renderTeamUrl('/settings/users'),
-      },
-    !teamId && { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
-  ].filter(n => n);
-
-  const getKey = () => items.find(({ url }) => pathname === url)?.key;
-
-  if (cloudMode && pathname !== '/settings/profile') {
-    return null;
-  }
-
-  return (
-    <div className={styles.layout}>
-      {!cloudMode && (
-        <div className={styles.menu}>
-          <SideNav items={items} shallow={true} selectedKey={getKey()} />
-        </div>
-      )}
-      <div className={styles.content}>{children}</div>
-    </div>
-  );
+export default function ({ children }) {
+  return <Settings>{children}</Settings>;
 }

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

@@ -0,0 +1,28 @@
+'use client';
+import { ReactNode } from 'react';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import { useMessages } from 'components/hooks';
+
+export default function ({ children, teamId }: { children: ReactNode; teamId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  const items = [
+    {
+      key: 'team',
+      label: formatMessage(labels.team),
+      url: `/teams/${teamId}/settings/team`,
+    },
+    {
+      key: 'members',
+      label: formatMessage(labels.members),
+      url: `/teams/${teamId}/settings/members`,
+    },
+    {
+      key: 'websites',
+      label: formatMessage(labels.websites),
+      url: `/teams/${teamId}/settings/websites`,
+    },
+  ].filter(n => n);
+
+  return <SettingsLayout items={items}>{children}</SettingsLayout>;
+}

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

@@ -1,3 +1,5 @@
-import Layout from 'app/(main)/settings/layout';
+import TeamSettings from './TeamSettings';
 
-export default Layout;
+export default function ({ children, params: { teamId } }) {
+  return <TeamSettings teamId={teamId}>{children}</TeamSettings>;
+}

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

@@ -1,26 +1,23 @@
 'use client';
-import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
-import { useLogin, useMessages, useTeam } from 'components/hooks';
-import { Loading } from 'react-basics';
+import { useContext } from 'react';
+import { useLogin, useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
+import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
 
 export default function Team({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const { data: team, isLoading } = useTeam(teamId);
   const allowEdit = !!team?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
   );
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
     <>
       <PageHeader title={formatMessage(labels.team)} />
-      <TeamEditForm teamId={teamId} data={team} allowEdit={allowEdit} />
+      <TeamEditForm teamId={teamId} allowEdit={allowEdit} />
     </>
   );
 }

src/components/input/SettingsButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
-import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
-import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
+import TimezoneSetting from 'app/(main)/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(main)/profile/DateRangeSetting';
 import Icons from 'components/icons';
 import { useMessages } from 'components/hooks';
 import styles from './SettingsButton.module.css';

src/components/layout/SettingsLayout.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import SideNav from 'components/layout/SideNav';
+import styles from './SettingsLayout.module.css';
+
+export function SettingsLayout({ items = [], children }: { items: any[]; children: ReactNode }) {
+  const pathname = usePathname();
+  const cloudMode = !!process.env.cloudMode;
+
+  const getKey = () => items.find(({ url }) => pathname === url)?.key;
+
+  return (
+    <div className={styles.layout}>
+      {!cloudMode && (
+        <div className={styles.menu}>
+          <SideNav items={items} shallow={true} selectedKey={getKey()} />
+        </div>
+      )}
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+export default SettingsLayout;