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/modules/ui/layout/page/components/PageCardLayout.tsx

@@ -0,0 +1,69 @@
+import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+
+type PageCardLayoutProps = {
+  header: ReactNode;
+  secondaryBar?: ReactNode;
+  children: ReactNode;
+  showInformationBanner?: boolean;
+};
+
+const StyledRoot = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+`;
+
+const StyledMainCardWrapper = styled.div`
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  width: 0;
+`;
+
+const StyledCard = styled.div`
+  background: ${themeCssVariables.background.primary};
+  border-left: 1px solid ${themeCssVariables.border.color.medium};
+  border-right: 1px solid ${themeCssVariables.border.color.medium};
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledBodyContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+`;
+
+export const PageCardLayout = ({
+  header,
+  secondaryBar,
+  children,
+  showInformationBanner = true,
+}: PageCardLayoutProps) => {
+  return (
+    <StyledRoot>
+      <StyledMainCardWrapper>
+        <StyledCard>
+          {header}
+          {secondaryBar}
+          <StyledBodyContent>
+            {showInformationBanner && <InformationBannerWrapper />}
+            {children}
+          </StyledBodyContent>
+        </StyledCard>
+      </StyledMainCardWrapper>
+    </StyledRoot>
+  );
+};