Merge remote-tracking branch 'origin/dev' into dev

src/app/(main)/NavBar.tsx

@@ -14,7 +14,7 @@ import styles from './NavBar.module.css';
 export function NavBar() {
   const { formatMessage, labels } = useMessages();
   const { pathname, router } = useNavigation();
-  const { renderTeamUrl } = useTeamUrl();
+  const { teamId, renderTeamUrl } = useTeamUrl();
 
   const cloudMode = !!process.env.cloudMode;
 
@@ -34,25 +34,38 @@ export function NavBar() {
       label: formatMessage(labels.settings),
       url: renderTeamUrl('/settings'),
       children: [
+        ...(teamId
+          ? [
+              {
+                label: formatMessage(labels.team),
+                url: renderTeamUrl('/settings/team'),
+              },
+            ]
+          : []),
         {
           label: formatMessage(labels.websites),
-          url: '/settings/websites',
-        },
-        {
-          label: formatMessage(labels.teams),
-          url: '/settings/teams',
-        },
-        {
-          label: formatMessage(labels.users),
-          url: '/settings/users',
-        },
-        {
-          label: formatMessage(labels.profile),
-          url: '/profile',
+          url: renderTeamUrl('/settings/websites'),
         },
+        ...(!teamId
+          ? [
+              {
+                label: formatMessage(labels.teams),
+                url: renderTeamUrl('/settings/teams'),
+              },
+              {
+                label: formatMessage(labels.users),
+                url: '/settings/users',
+              },
+            ]
+          : [
+              {
+                label: formatMessage(labels.members),
+                url: renderTeamUrl('/settings/members'),
+              },
+            ]),
       ],
     },
-    cloudMode && {
+    {
       label: formatMessage(labels.profile),
       url: '/profile',
     },
@@ -94,6 +107,7 @@ export function NavBar() {
         <ProfileButton />
       </div>
       <div className={styles.mobile}>
+        <TeamsButton onChange={handleTeamChange} showText={false} />
         <HamburgerButton menuItems={menuItems} />
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Text } from 'react-basics';
+import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import LinkButton from 'components/common/LinkButton';
@@ -14,9 +14,10 @@ export function TeamWebsitesTable({
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       <GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>

src/app/(main)/settings/websites/WebsitesTable.module.css

@@ -1,13 +0,0 @@
-@media screen and (max-width: 992px) {
-  .row {
-    flex-wrap: wrap;
-  }
-
-  .header .actions {
-    display: none;
-  }
-
-  .actions {
-    flex-basis: 100%;
-  }
-}

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

@@ -6,7 +6,7 @@ import WebsiteChart from './WebsiteChart';
 import useDashboard from 'store/dashboard';
 import WebsiteHeader from './WebsiteHeader';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
-import { useMessages, useLocale } from 'components/hooks';
+import { useMessages, useLocale, useTeamUrl } from 'components/hooks';
 
 export default function WebsiteChartList({
   websites,
@@ -19,6 +19,7 @@ export default function WebsiteChartList({
 }) {
   const { formatMessage, labels } = useMessages();
   const { websiteOrder } = useDashboard();
+  const { renderTeamUrl } = useTeamUrl();
   const { dir } = useLocale();
 
   const ordered = useMemo(
@@ -35,7 +36,7 @@ export default function WebsiteChartList({
         return index < limit ? (
           <div key={id}>
             <WebsiteHeader websiteId={id} showLinks={false}>
-              <Link href={`/websites/${id}`}>
+              <Link href={renderTeamUrl(`/websites/${id}`)}>
                 <Button variant="primary">
                   <Text>{formatMessage(labels.viewDetails)}</Text>
                   <Icon>

src/components/input/TeamsButton.tsx

@@ -7,9 +7,11 @@ import styles from './TeamsButton.module.css';
 
 export function TeamsButton({
   className,
+  showText = true,
   onChange,
 }: {
   className?: string;
+  showText?: boolean;
   onChange?: (value: string) => void;
 }) {
   const { user } = useLogin();
@@ -31,7 +33,7 @@ export function TeamsButton({
     <PopupTrigger>
       <Button className={classNames(styles.button, className)} variant="quiet">
         <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
-        <Text>{teamId ? team?.name : user.username}</Text>
+        {showText && <Text>{teamId ? team?.name : user.username}</Text>}
         <Icon>
           <Icons.ChevronDown />
         </Icon>