feat(twenty-front): generalize the page primary/secondary bars (flat redesign) (#21308)

Replaces #21279 and #21282 with one clean PR from `main`.

Generalizes the settings primary-bar / secondary-bar card chrome to the
record index, record show and standalone pages via a shared
`PageCardLayout` + `PageCardHeader` (the side panel sits as a sibling of
the content card), and applies the new flat design direction: square
corners on the card, side panel and loading skeletons.

Iterating toward the new design (Figma node 102282-221623); the
confirmed direction and the explicit "remove rounded corners" change are
in, remaining designer specifics to follow.

packages/twenty-front/src/loading/components/PageContentSkeletonLoader.tsx

@@ -1,59 +1,58 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
-import { PageBody } from '@/ui/layout/page/components/PageBody';
-import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
+import { PageCardHeader } from '@/ui/layout/page/components/PageCardHeader';
+import { PageCardLayout } from '@/ui/layout/page/components/PageCardLayout';
 import { styled } from '@linaria/react';
-import { useContext } from 'react';
+import { type ReactNode, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import {
   ThemeContext,
   themeCssVariables,
 } from 'twenty-ui-deprecated/theme-constants';
 
-const StyledHeaderSkeleton = styled.div`
-  align-items: center;
-  background: ${themeCssVariables.background.noisy};
+const StyledBody = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: ${themeCssVariables.spacing[2]};
-  justify-content: space-between;
-  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
   padding: ${themeCssVariables.spacing[3]};
 `;
 
-const StyledHeaderLeft = styled.div`
-  flex: 1;
-`;
+type PageContentSkeletonLoaderProps = {
+  secondaryBar?: ReactNode;
+};
 
-export const PageContentSkeletonLoader = () => {
+export const PageContentSkeletonLoader = ({
+  secondaryBar,
+}: PageContentSkeletonLoaderProps) => {
   const { theme } = useContext(ThemeContext);
 
   return (
-    <>
-      <StyledHeaderSkeleton>
-        <StyledHeaderLeft>
-          <SkeletonTheme
-            baseColor={theme.background.tertiary}
-            highlightColor={theme.background.transparent.lighter}
-            borderRadius={4}
-          >
-            <Skeleton
-              height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
-              width={104}
-            />
-          </SkeletonTheme>
-        </StyledHeaderLeft>
-        <SkeletonTheme
-          baseColor={theme.background.tertiary}
-          highlightColor={theme.background.transparent.lighter}
-          borderRadius={4}
-        >
-          <Skeleton
-            width={132}
-            height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={4}
+    >
+      <PageCardLayout
+        header={
+          <PageCardHeader
+            icon={<Skeleton width={20} height={20} />}
+            title={
+              <Skeleton
+                width={120}
+                height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+              />
+            }
           />
-        </SkeletonTheme>
-      </StyledHeaderSkeleton>
-      <PageBody>{null}</PageBody>
-    </>
+        }
+        secondaryBar={secondaryBar}
+        showInformationBanner={false}
+      >
+        <StyledBody>
+          <Skeleton
+            count={8}
+            height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
+          />
+        </StyledBody>
+      </PageCardLayout>
+    </SkeletonTheme>
   );
 };

packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx

@@ -1,14 +0,0 @@
-import { PageContentSkeletonLoader } from '~/loading/components/PageContentSkeletonLoader';
-import { styled } from '@linaria/react';
-
-const StyledRightPanelContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-export const RightPanelSkeletonLoader = () => (
-  <StyledRightPanelContainer>
-    <PageContentSkeletonLoader />
-  </StyledRightPanelContainer>
-);

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -9,7 +9,7 @@ import {
 } from 'twenty-ui-deprecated/theme-constants';
 import { ModalBackdrop } from 'twenty-ui-deprecated/layout';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
-import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
+import { PageContentSkeletonLoader } from '~/loading/components/PageContentSkeletonLoader';
 
 const StyledContainer = styled.div`
   background: ${themeCssVariables.background.noisy};
@@ -44,7 +44,7 @@ export const UserOrMetadataLoader = () => {
       <StyledLeftPanelWrapper>
         <LeftPanelSkeletonLoader />
       </StyledLeftPanelWrapper>
-      <RightPanelSkeletonLoader />
+      <PageContentSkeletonLoader />
     </StyledContainer>
   );
 };