From 861b2130a7259a9b82aa0878dd1b3b3854630ea8 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Wed, 1 May 2024 02:18:04 +0700
Subject: [PATCH] New layout updates (#23)

* Remove redundant files and update pnpm lockfile

* Refactor and improve UI responsiveness

UI elements have been refactored for better responsiveness and a more consistent user interface. Changes include adjusting padding and margin in several components, altering sizes of variables like avatar and button, and repositioning notifications for better visibility. A more detailed breakdown can be found in the diffs.

* Updated UI components and page layout configurations

Enhanced UI components among different modules, adjusting their behavior and appearance. Also added logic to get layout style from cookies if available. This enables persistent interface configuration across sessions. Modified the PageStyle type renaming it as PageLayoutStyle and exported it, allowing use throughout the application.
---
 apps/web/app/admin/layout.tsx                 | 15 ++----------
 apps/web/app/admin/page.tsx                   | 10 +++++++-
 .../home/(user)/_components/home-sidebar.tsx  |  2 +-
 apps/web/app/home/(user)/layout.tsx           | 19 ++++++++++++---
 .../team-account-layout-sidebar.tsx           |  4 ++--
 apps/web/app/home/[account]/layout.tsx        | 18 +++++++++++++--
 .../src/components/account-selector.tsx       | 23 +++++++++++--------
 .../src/components/admin-accounts-table.tsx   |  2 +-
 .../src/components/notifications-popover.tsx  |  2 +-
 packages/ui/src/makerkit/page.tsx             |  4 ++--
 10 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
index e2cab237d..67caeab9c 100644
--- a/apps/web/app/admin/layout.tsx
+++ b/apps/web/app/admin/layout.tsx
@@ -1,10 +1,4 @@
-import {
-  Page,
-  PageBody,
-  PageHeader,
-  PageMobileNavigation,
-  PageNavigation,
-} from '@kit/ui/page';
+import { Page, 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>
   );
 }
diff --git a/apps/web/app/admin/page.tsx b/apps/web/app/admin/page.tsx
index 98ebcbdab..f39d6f9a6 100644
--- a/apps/web/app/admin/page.tsx
+++ b/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>
     </>
   );
 }
diff --git a/apps/web/app/home/(user)/_components/home-sidebar.tsx b/apps/web/app/home/(user)/_components/home-sidebar.tsx
index e84dadcb7..2904863c8 100644
--- a/apps/web/app/home/(user)/_components/home-sidebar.tsx
+++ b/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'} />}
diff --git a/apps/web/app/home/(user)/layout.tsx b/apps/web/app/home/(user)/layout.tsx
index c681865f9..228ea90c2 100644
--- a/apps/web/app/home/(user)/layout.tsx
+++ b/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
+  );
+}
diff --git a/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx b/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
index e8ba8d57e..f7998ec34 100644
--- a/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
+++ b/apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx
@@ -60,8 +60,8 @@ function SidebarContainer(props: {
 
   return (
     <>
-      <SidebarContent className={'mt-4'}>
-        <div className={'flex items-center justify-between'}>
+      <SidebarContent className={'h-16 justify-center'}>
+        <div className={'flex max-w-full items-center space-x-2'}>
           <TeamAccountAccountsSelector
             selectedAccount={account}
             accounts={accounts}
diff --git a/apps/web/app/home/[account]/layout.tsx b/apps/web/app/home/[account]/layout.tsx
index e520746d1..55431c721 100644
--- a/apps/web/app/home/[account]/layout.tsx
+++ b/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);
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index d02a60a70..90ee76616 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/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', {
-              'justify-between': !collapsed,
-              'justify-center': collapsed,
-            })}
+            className={cn(
+              'dark:shadow-primary/10 group w-full min-w-0 max-w-full px-2',
+              {
+                '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>
 
diff --git a/packages/features/admin/src/components/admin-accounts-table.tsx b/packages/features/admin/src/components/admin-accounts-table.tsx
index 764f5535b..c10c2798a 100644
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/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}>
diff --git a/packages/features/notifications/src/components/notifications-popover.tsx b/packages/features/notifications/src/components/notifications-popover.tsx
index 60b17a2fe..bd13d03a4 100644
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/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(
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx
index 4e11a98f8..9261f24f3 100644
--- a/packages/ui/src/makerkit/page.tsx
+++ b/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;