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

@@ -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>
   );
 }

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'}>
-        <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}

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);