Merge remote-tracking branch 'origin/main'

apps/web/app/admin/layout.tsx

@@ -1,10 +1,4 @@
-import {
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
-  Page,
-  PageBody,
-  PageHeader,
-  PageMobileNavigation,
-  PageNavigation,
-} from '@kit/ui/page';
 
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
@@ -16,11 +10,6 @@ export const metadata = {
 export default function AdminLayout(props: React.PropsWithChildren) {
   return (
     <Page style={'sidebar'}>
-      <PageHeader
-        title={'Super Admin'}
-        description={`Your SaaS stats at a glance`}
-      />
-
       <PageNavigation>
         <AdminSidebar />
       </PageNavigation>
@@ -29,7 +18,7 @@ export default function AdminLayout(props: React.PropsWithChildren) {
         <AdminMobileNavigation />
       </PageMobileNavigation>
 
-      <PageBody>{props.children}</PageBody>
+      {props.children}
     </Page>
   );
 }

apps/web/app/admin/page.tsx

@@ -1,10 +1,18 @@
 import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { PageBody, PageHeader } from '@kit/ui/page';
 
 function AdminPage() {
   return (
     <>
-      <AdminDashboard />
+      <PageHeader
+        title={'Super Admin'}
+        description={`Your SaaS stats at a glance`}
+      />
+
+      <PageBody>
+        <AdminDashboard />
+      </PageBody>
     </>
   );
 }

apps/web/app/home/(user)/_components/home-sidebar.tsx

@@ -17,7 +17,7 @@ export function HomeSidebar(props: { workspace: UserWorkspace }) {
   return (
     <Sidebar>
       <SidebarContent className={'h-16 justify-center'}>
-        <div className={'flex items-center justify-between'}>
+        <div className={'flex items-center justify-between space-x-2'}>
           <If
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={<AppLogo className={'py-2'} />}

apps/web/app/home/(user)/layout.tsx

@@ -1,7 +1,14 @@
 import { use } from 'react';
 
+import { cookies } from 'next/headers';
+
 import { If } from '@kit/ui/if';
-import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import {
+  Page,
+  PageLayoutStyle,
+  PageMobileNavigation,
+  PageNavigation,
+} from '@kit/ui/page';
 
 import { AppLogo } from '~/components/app-logo';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
@@ -13,10 +20,9 @@ import { HomeMobileNavigation } from './_components/home-mobile-navigation';
 import { HomeSidebar } from './_components/home-sidebar';
 import { loadUserWorkspace } from './_lib/server/load-user-workspace';
 
-const style = personalAccountNavigationConfig.style;
-
 function UserHomeLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
+  const style = getLayoutStyle();
 
   return (
     <Page style={style}>
@@ -41,3 +47,10 @@ function UserHomeLayout({ children }: React.PropsWithChildren) {
 }
 
 export default withI18n(UserHomeLayout);
+
+function getLayoutStyle() {
+  return (
+    (cookies().get('layout-style')?.value as PageLayoutStyle) ??
+    personalAccountNavigationConfig.style
+  );
+}

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -60,8 +60,8 @@ function SidebarContainer(props: {
 
   return (
     <>
-      <SidebarContent className={'mt-4'}>
+      <SidebarContent className={'h-16 justify-center'}>
-        <div className={'flex items-center justify-between'}>
+        <div className={'flex max-w-full items-center space-x-2'}>
           <TeamAccountAccountsSelector
             selectedAccount={account}
             accounts={accounts}

apps/web/app/home/[account]/layout.tsx

@@ -1,7 +1,14 @@
 import { use } from 'react';
 
+import { cookies } from 'next/headers';
+
 import { If } from '@kit/ui/if';
-import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import {
+  Page,
+  PageLayoutStyle,
+  PageMobileNavigation,
+  PageNavigation,
+} from '@kit/ui/page';
 
 import { AppLogo } from '~/components/app-logo';
 import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
@@ -24,7 +31,7 @@ function TeamWorkspaceLayout({
   params: Params;
 }>) {
   const data = use(loadTeamWorkspace(params.account));
-  const style = getTeamAccountSidebarConfig(params.account).style;
+  const style = getLayoutStyle(params.account);
 
   const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
     label: name,
@@ -62,4 +69,11 @@ function TeamWorkspaceLayout({
   );
 }
 
+function getLayoutStyle(account: string) {
+  return (
+    (cookies().get('layout-style')?.value as PageLayoutStyle) ??
+    getTeamAccountSidebarConfig(account).style
+  );
+}
+
 export default withI18n(TeamWorkspaceLayout);

packages/features/accounts/src/components/account-selector.tsx

@@ -85,7 +85,7 @@ export function AccountSelector({
     pictureUrl ? (
       <UserAvatar pictureUrl={pictureUrl} />
     ) : (
-      <PersonIcon className="h-4 w-4" />
+      <PersonIcon className="h-4 min-h-4 w-4 min-w-4" />
     );
 
   return (
@@ -98,19 +98,22 @@ export function AccountSelector({
             variant="ghost"
             role="combobox"
             aria-expanded={open}
-            className={cn('dark:shadow-primary/10 group px-2', {
+            className={cn(
-              'justify-between': !collapsed,
+              'dark:shadow-primary/10 group w-full min-w-0 max-w-full px-2',
-              'justify-center': collapsed,
+              {
-            })}
+                'justify-between': !collapsed,
+                'justify-center': collapsed,
+              },
+            )}
           >
             <If
               condition={selected}
               fallback={
-                <span className={'flex items-center space-x-2'}>
+                <span className={'flex max-w-full items-center space-x-2'}>
                   <PersonalAccountAvatar />
 
                   <span
-                    className={cn({
+                    className={cn('truncate', {
                       hidden: collapsed,
                     })}
                   >
@@ -120,7 +123,7 @@ export function AccountSelector({
               }
             >
               {(account) => (
-                <span className={'flex items-center space-x-2'}>
+                <span className={'flex max-w-full items-center space-x-2'}>
                   <Avatar
                     className={
                       'group-hover:border-border h-6 w-6 border border-transparent'
@@ -134,7 +137,7 @@ export function AccountSelector({
                   </Avatar>
 
                   <span
-                    className={cn({
+                    className={cn('truncate', {
                       hidden: collapsed,
                     })}
                   >
@@ -144,7 +147,7 @@ export function AccountSelector({
               )}
             </If>
 
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <CaretSortIcon className="ml-1 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
 

packages/features/admin/src/components/admin-accounts-table.tsx

@@ -100,7 +100,7 @@ function AccountsTableFilters(props: {
 
   return (
     <div className={'flex items-center justify-between space-x-4'}>
-      <Heading level={4}>Accounts</Heading>
+      <Heading level={3}>Accounts</Heading>
 
       <div className={'flex space-x-4'}>
         <Form {...form}>

packages/features/notifications/src/components/notifications-popover.tsx

@@ -112,7 +112,7 @@ export function NotificationsPopover(params: {
     <Popover modal open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button className={'h-9 w-9'} variant={'ghost'}>
-          <Bell className={'min-h-5 min-w-5'} />
+          <Bell className={'min-h-4 min-w-4'} />
 
           <span
             className={cn(

packages/ui/src/makerkit/page.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 
 import { cn } from '../utils';
 
-type PageStyle = 'sidebar' | 'header' | 'custom';
+export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
 
 type PageProps = React.PropsWithChildren<{
-  style?: PageStyle;
+  style?: PageLayoutStyle;
   contentContainerClassName?: string;
   className?: string;
   sticky?: boolean;