Refactored settings. Updated sidebar.

src/app/(main)/SideNav.tsx

@@ -6,6 +6,7 @@ import {
   SidebarHeader,
   Row,
   SidebarProps,
+  ThemeButton,
 } from '@umami/react-zen';
 import {
   Globe,
@@ -14,24 +15,19 @@ import {
   Logo,
   Grid2X2,
   Settings,
-  LockKeyhole,
   PanelLeft,
 } from '@/components/icons';
 import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
 import { TeamsButton } from '@/components/input/TeamsButton';
 import { PanelButton } from '@/components/input/PanelButton';
+import { ProfileButton } from '@/components/input/ProfileButton';
 
 export function SideNav(props: SidebarProps) {
   const { formatMessage, labels } = useMessages();
   const { pathname, renderUrl, websiteId } = useNavigation();
   const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
 
-  const hasNav = !!(
-    websiteId ||
-    pathname.startsWith('/admin') ||
-    pathname.startsWith('/settings') ||
-    pathname.endsWith('/settings')
-  );
+  const hasNav = !!(websiteId || pathname.startsWith('/admin') || pathname.includes('/settings'));
 
   const links = [
     {
@@ -64,15 +60,9 @@ export function SideNav(props: SidebarProps) {
     {
       id: 'settings',
       label: formatMessage(labels.settings),
-      path: '/settings',
+      path: renderUrl('/settings'),
       icon: <Settings />,
     },
-    {
-      id: 'admin',
-      label: formatMessage(labels.admin),
-      path: '/admin',
-      icon: <LockKeyhole />,
-    },
   ];
 
   return (
@@ -99,10 +89,18 @@ export function SideNav(props: SidebarProps) {
           {bottomLinks.map(({ id, path, label, icon }) => {
             return (
               <Link key={id} href={path} role="button">
-                <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
+                <SidebarItem label={label} icon={icon} isSelected={pathname.includes(path)} />
               </Link>
             );
           })}
+          <Row alignItems="center" justifyContent="space-between" height="40px">
+            <ProfileButton />
+            {!isCollapsed && !hasNav && (
+              <Row>
+                <ThemeButton />
+              </Row>
+            )}
+          </Row>
         </SidebarSection>
       </Sidebar>
     </Row>

src/app/(main)/admin/AdminLayout.tsx

@@ -17,7 +17,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
 
   const items = [
     {
-      label: formatMessage(labels.application),
+      label: formatMessage(labels.manage),
       items: [
         {
           id: 'users',

src/app/(main)/admin/teams/[teamId]/AdminTeamPage.tsx

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

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

@@ -20,12 +20,6 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
           path: renderUrl('/settings/preferences'),
           icon: <Knobs />,
         },
-        {
-          id: 'teams',
-          label: formatMessage(labels.teams),
-          path: renderUrl('/settings/teams'),
-          icon: <Users />,
-        },
       ],
     },
     {
@@ -37,12 +31,18 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
           path: renderUrl('/settings/profile'),
           icon: <UserCircle />,
         },
+        {
+          id: 'teams',
+          label: formatMessage(labels.teams),
+          path: renderUrl('/settings/teams'),
+          icon: <Users />,
+        },
       ],
     },
   ];
 
   const selectedKey =
-    items.flatMap(e => e.items)?.find(({ path }) => path && pathname.endsWith(path))?.id ||
+    items.flatMap(e => e.items)?.find(({ path }) => path && pathname.includes(path))?.id ||
     'overview';
 
   return (

src/app/(main)/settings/preferences/PreferencesPage.tsx

@@ -4,16 +4,19 @@ import { useMessages } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { PreferenceSettings } from './PreferenceSettings';
 import { PageHeader } from '@/components/common/PageHeader';
+import { PageBody } from '@/components/common/PageBody';
 
 export function PreferencesPage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap="6">
-      <PageHeader title={formatMessage(labels.preferences)} />
-      <Panel>
-        <PreferenceSettings />
-      </Panel>
-    </Column>
+    <PageBody>
+      <Column gap="6">
+        <PageHeader title={formatMessage(labels.preferences)} />
+        <Panel>
+          <PreferenceSettings />
+        </Panel>
+      </Column>
+    </PageBody>
   );
 }

src/app/(main)/settings/profile/ProfilePage.tsx

@@ -4,16 +4,19 @@ import { useMessages } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { Column } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
+import { PageBody } from '@/components/common/PageBody';
 
 export function ProfilePage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap="6">
-      <PageHeader title={formatMessage(labels.profile)} />
-      <Panel>
-        <ProfileSettings />
-      </Panel>
-    </Column>
+    <PageBody>
+      <Column gap="6">
+        <PageHeader title={formatMessage(labels.profile)} />
+        <Panel>
+          <ProfileSettings />
+        </Panel>
+      </Column>
+    </PageBody>
   );
 }

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+import { TeamsDataTable } from '@/app/(main)/teams/TeamsDataTable';
+import { TeamsHeader } from '@/app/(main)/teams/TeamsHeader';
+import { Column } from '@umami/react-zen';
+import { Panel } from '@/components/common/Panel';
+import { PageBody } from '@/components/common/PageBody';
+
+export function TeamsPage() {
+  return (
+    <PageBody>
+      <Column gap="6">
+        <TeamsHeader />
+        <Panel>
+          <TeamsDataTable />
+        </Panel>
+      </Column>
+    </PageBody>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { Eye, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
@@ -14,20 +14,21 @@ export function TeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
+  const { renderUrl } = useNavigation();
 
   return (
     <DataTable data={data}>
       <DataColumn id="name" label={formatMessage(labels.name)}>
-        {(row: any) => <Link href={`/settings/teams/${row.id}`}>{row.name}</Link>}
+        {(row: any) => <Link href={renderUrl(`/settings/teams/${row.id}`)}>{row.name}</Link>}
       </DataColumn>
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
-        {(row: any) => row.users.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
+        {(row: any) => row?.members?.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
       <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
-        {(row: any) => row._count.websites}
+        {(row: any) => row?._count?.websites}
       </DataColumn>
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
-        {(row: any) => row._count.users}
+        {(row: any) => row?._count?.members}
       </DataColumn>
       {showActions ? (
         <DataColumn id="action" label=" " align="end">

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

@@ -13,7 +13,7 @@ import { TeamMembersDataTable } from './TeamMembersDataTable';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
-export function TeamDetails({ teamId }: { teamId: string }) {
+export function TeamSettings({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
@@ -23,12 +23,12 @@ export function TeamDetails({ teamId }: { teamId: string }) {
   const isAdmin = pathname.includes('/admin');
 
   const isTeamOwner =
-    !!team?.teamUser?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
+    !!team?.members?.find(({ userId, role }) => role === ROLES.teamOwner && userId === user.id) &&
     user.role !== ROLES.viewOnly;
 
   const canEdit =
     user.isAdmin ||
-    (!!team?.teamUser?.find(
+    (!!team?.members?.find(
       ({ userId, role }) =>
         (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
     ) &&

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

@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import { TeamsPage } from './TeamsPage';
+
+export default function () {
+  return <TeamsPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Teams',
+};

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

@@ -137,7 +137,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
 
   return (
     <SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>
-      <WebsiteSelect buttonProps={{ variant: 'quiet' }} websiteId={websiteId} teamId={teamId} />
+      <WebsiteSelect websiteId={websiteId} teamId={teamId} />
     </SideMenu>
   );
 }