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.

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>
 

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;