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/object-record/components/MainContainerLayoutWithSidePanel.tsx

@@ -1,83 +0,0 @@
-import { CommandMenuForMobile } from '@/command-menu/components/CommandMenuForMobile';
-import { SidePanelForDesktop } from '@/side-panel/components/SidePanelForDesktop';
-import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
-import { PageBody } from '@/ui/layout/page/components/PageBody';
-import { styled } from '@linaria/react';
-import { type ReactNode } from 'react';
-import { useIsMobile } from 'twenty-ui-deprecated/utilities';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
-
-type MainContainerLayoutWithSidePanelProps = {
-  children: ReactNode;
-};
-
-const StyledMainContainerLayoutForDesktop = styled.div`
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  padding-bottom: ${themeCssVariables.spacing[3]};
-  padding-right: ${themeCssVariables.spacing[3]};
-`;
-
-const StyledPageBodyForDesktopContainer = styled.div`
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  min-width: 0;
-  width: 0;
-
-  > * {
-    padding-bottom: 0;
-    padding-right: 0;
-  }
-`;
-
-const StyledMainContainerLayoutForMobile = styled.div`
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  padding: 0;
-`;
-
-const StyledPageBodyForMobileContainer = styled.div`
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  width: 0;
-
-  > * {
-    padding-bottom: 0;
-    padding-left: ${themeCssVariables.spacing[1]};
-    padding-right: ${themeCssVariables.spacing['1.5']};
-  }
-`;
-
-export const MainContainerLayoutWithSidePanel = ({
-  children,
-}: MainContainerLayoutWithSidePanelProps) => {
-  const isMobile = useIsMobile();
-
-  useCommandMenuHotKeys();
-
-  if (isMobile) {
-    return (
-      <StyledMainContainerLayoutForMobile>
-        <StyledPageBodyForMobileContainer>
-          <PageBody>{children}</PageBody>
-        </StyledPageBodyForMobileContainer>
-        <CommandMenuForMobile />
-      </StyledMainContainerLayoutForMobile>
-    );
-  }
-
-  return (
-    <StyledMainContainerLayoutForDesktop>
-      <StyledPageBodyForDesktopContainer>
-        <PageBody>{children}</PageBody>
-      </StyledPageBodyForDesktopContainer>
-      <SidePanelForDesktop />
-    </StyledMainContainerLayoutForDesktop>
-  );
-};