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/command-menu-item/display/components/CommandMenuItemRenderer.tsx

@@ -31,12 +31,14 @@ const StyledPreviewWrapper = styled.div`
 
 type CommandMenuItemRendererProps = {
   item: CommandMenuItemFieldsFragment;
+  isPrimaryAction?: boolean;
 };
 
 type CommandMenuItemButtonRendererProps = CommandMenuItemRendererProps;
 
 const CommandMenuItemButtonRenderer = ({
   item,
+  isPrimaryAction = false,
 }: CommandMenuItemButtonRendererProps) => {
   const { commandMenuContextApi, isInPreviewMode } =
     useContext(CommandMenuContext);
@@ -60,7 +62,10 @@ const CommandMenuItemButtonRenderer = ({
   if (isInPreviewMode) {
     return (
       <StyledPreviewWrapper>
-        <CommandMenuButton command={command} />
+        <CommandMenuButton
+          command={command}
+          isPrimaryAction={isPrimaryAction}
+        />
       </StyledPreviewWrapper>
     );
   }
@@ -70,6 +75,7 @@ const CommandMenuItemButtonRenderer = ({
       command={command}
       onClick={disabled ? undefined : handleClick}
       disabled={disabled}
+      isPrimaryAction={isPrimaryAction}
     />
   );
 };
@@ -167,11 +173,17 @@ const CommandMenuItemSelectableRenderer = ({
 // oxlint-disable-next-line twenty/effect-components
 export const CommandMenuItemRenderer = ({
   item,
+  isPrimaryAction,
 }: CommandMenuItemRendererProps) => {
   const { displayType } = useContext(CommandMenuContext);
 
   if (displayType === 'button') {
-    return <CommandMenuItemButtonRenderer item={item} />;
+    return (
+      <CommandMenuItemButtonRenderer
+        item={item}
+        isPrimaryAction={isPrimaryAction}
+      />
+    );
   }
 
   if (displayType === 'listItem' || displayType === 'dropdownItem') {

packages/twenty-front/src/modules/command-menu-item/display/components/PinnedCommandMenuItemButtons.tsx

@@ -8,6 +8,7 @@ import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
 import { useContext, useMemo } from 'react';
 import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import { EngineComponentKey } from '~/generated-metadata/graphql';
 
 const StyledCommandMenuItemContainer = styled(motion.div)`
   align-items: center;
@@ -80,7 +81,13 @@ export const PinnedCommandMenuItemButtons = () => {
                     ease: 'easeInOut',
                   }}
                 >
-                  <CommandMenuItemRenderer item={item} />
+                  <CommandMenuItemRenderer
+                    item={item}
+                    isPrimaryAction={
+                      item.engineComponentKey ===
+                      EngineComponentKey.CREATE_NEW_RECORD
+                    }
+                  />
                 </StyledCommandMenuItemContainer>
               ))}
             </StyledItemsContainer>