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/MainAppLayoutWithSidePanel.tsx

@@ -0,0 +1,37 @@
+import { CommandMenuForMobile } from '@/command-menu/components/CommandMenuForMobile';
+import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
+import { SidePanelForDesktop } from '@/side-panel/components/SidePanelForDesktop';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { styled } from '@linaria/react';
+import { Outlet } from 'react-router-dom';
+
+const StyledRow = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+`;
+
+export const MainAppLayoutWithSidePanel = () => {
+  const isMobile = useIsMobile();
+
+  useCommandMenuHotKeys();
+
+  return (
+    <StyledRow>
+      <StyledContent>
+        <Outlet />
+      </StyledContent>
+      {isMobile ? <CommandMenuForMobile /> : <SidePanelForDesktop />}
+    </StyledRow>
+  );
+};

packages/twenty-front/src/modules/ui/layout/page/components/PageCardHeader.tsx

@@ -0,0 +1,94 @@
+import { useNavigationDrawerExpanded } from '@/navigation/hooks/useNavigationDrawerExpanded';
+import { SIDE_PANEL_TOP_BAR_HEIGHT } from '@/side-panel/constants/SidePanelTopBarHeight';
+import {
+  Breadcrumb,
+  type BreadcrumbProps,
+} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { styled } from '@linaria/react';
+import { type ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+
+type PageCardHeaderProps = {
+  links?: BreadcrumbProps['links'];
+  breadcrumb?: ReactNode;
+  icon?: ReactNode;
+  title?: ReactNode;
+  tag?: ReactNode;
+  actionButton?: ReactNode;
+};
+
+const StyledHeader = styled.div`
+  align-items: center;
+  background-color: ${themeCssVariables.background.secondary};
+  border-bottom: 1px solid ${themeCssVariables.border.color.medium};
+  box-sizing: border-box;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+  min-height: ${SIDE_PANEL_TOP_BAR_HEIGHT}px;
+  padding: 0 ${themeCssVariables.spacing[3]};
+  width: 100%;
+`;
+
+const StyledLeft = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+  min-width: 0;
+  overflow: hidden;
+`;
+
+const StyledTitle = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.primary};
+  display: flex;
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.semiBold};
+  gap: ${themeCssVariables.spacing[2]};
+  min-width: 0;
+`;
+
+const StyledRight = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${themeCssVariables.spacing[2]};
+  justify-content: flex-end;
+  min-width: 0;
+`;
+
+export const PageCardHeader = ({
+  links,
+  breadcrumb,
+  icon,
+  title,
+  tag,
+  actionButton,
+}: PageCardHeaderProps) => {
+  const isMobile = useIsMobile();
+  const isNavigationDrawerExpanded = useNavigationDrawerExpanded();
+
+  return (
+    <StyledHeader>
+      <StyledLeft>
+        {!isNavigationDrawerExpanded && (
+          <NavigationDrawerCollapseButton direction="right" />
+        )}
+        {isDefined(breadcrumb)
+          ? breadcrumb
+          : isDefined(links) && <Breadcrumb links={links} />}
+        {!isMobile &&
+          (isDefined(icon) || isDefined(title) || isDefined(tag)) && (
+            <StyledTitle>
+              {icon}
+              {isDefined(title) && title}
+              {tag}
+            </StyledTitle>
+          )}
+      </StyledLeft>
+      <StyledRight>{actionButton}</StyledRight>
+    </StyledHeader>
+  );
+};

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

packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx

@@ -5,7 +5,6 @@ import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 const StyledPanel = styled.div`
   background: ${themeCssVariables.background.primary};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-direction: column;
   height: 100%;

packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx

@@ -21,7 +21,6 @@ const StyledInnerContainer = styled.div`
 
 const StyledScrollWrapperContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
-  border-radius: ${themeCssVariables.border.radius.md};
   overflow: hidden;
 `;
 

packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelGap.tsx

@@ -4,12 +4,19 @@ import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizabl
 import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
 import { type ResizablePanelSide } from '@/ui/layout/resizable-panel/types/ResizablePanelSide';
 
+// Horizontal padding offset by an equal negative margin keeps the resize
+// handle grabbable even when the visual gap is 0, without shifting neighbors.
 const StyledGap = styled.div<{ gapWidth: number }>`
+  box-sizing: content-box;
   cursor: col-resize;
   flex-shrink: 0;
   height: 100%;
+  margin: 0 -4px;
+  padding: 0 4px;
+  position: relative;
   transition: width 0.15s ease;
   width: ${({ gapWidth }) => gapWidth}px;
+  z-index: 1;
 `;
 
 type ResizablePanelGapProps = {