Implement new version of the side panel sub header (#16683)

## Before
<img width="822" height="302" alt="CleanShot 2025-12-18 at 17 08 09@2x"
src="https://github.com/user-attachments/assets/d4d0f783-64f2-4164-9a4d-42c341fa828d"
/>

## After
<img width="836" height="370" alt="CleanShot 2025-12-18 at 17 07 49@2x"
src="https://github.com/user-attachments/assets/aca7a72f-bb83-4e40-89d2-f62bb7c8f053"
/>

packages/twenty-front/src/modules/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader.tsx

@@ -1,39 +0,0 @@
-import styled from '@emotion/styled';
-import { IconChevronLeft } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-
-  flex-direction: row;
-`;
-
-const StyledTextContainer = styled.div`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-bottom: ${({ theme }) => theme.spacing(0.2)};
-`;
-
-type CommandMenuSubPageNavigationHeaderProps = {
-  title: string;
-  onBackClick: () => void;
-};
-
-export const CommandMenuSubPageNavigationHeader = ({
-  onBackClick,
-  title,
-}: CommandMenuSubPageNavigationHeaderProps) => {
-  return (
-    <StyledContainer>
-      <IconButton
-        onClick={onBackClick}
-        Icon={IconChevronLeft}
-        variant="tertiary"
-      />
-      <StyledTextContainer>{title}</StyledTextContainer>
-    </StyledContainer>
-  );
-};

packages/twenty-front/src/modules/command-menu/pages/common/components/SidePanelSubPageNavigationHeader.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import { IconChevronLeft } from 'twenty-ui/display';
+import { IconButton } from 'twenty-ui/input';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  height: 40px;
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+type SidePanelSubPageNavigationHeaderProps = {
+  title: string;
+  onBackClick: () => void;
+};
+
+export const SidePanelSubPageNavigationHeader = ({
+  onBackClick,
+  title,
+}: SidePanelSubPageNavigationHeaderProps) => {
+  return (
+    <StyledContainer>
+      <IconButton
+        onClick={onBackClick}
+        Icon={IconChevronLeft}
+        variant="tertiary"
+        size="small"
+      />
+      <StyledText>{title}</StyledText>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx

@@ -1,6 +1,6 @@
-import { CommandMenuSubPageNavigationHeader } from '@/command-menu/pages/common/components/CommandMenuSubPageNavigationHeader';
-import { ChartFiltersSettingsInitializeStateEffect } from '@/command-menu/pages/page-layout/components/ChartFiltersSettingsInitializeStateEffect';
 import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
+import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
+import { ChartFiltersSettingsInitializeStateEffect } from '@/command-menu/pages/page-layout/components/ChartFiltersSettingsInitializeStateEffect';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { type ChartWidget } from '@/command-menu/pages/page-layout/types/ChartWidget';
@@ -95,30 +95,32 @@ export const ChartFiltersSettings = ({
   );
 
   return (
-    <StyledChartFiltersPageContainer>
-      <CommandMenuSubPageNavigationHeader
+    <>
+      <SidePanelSubPageNavigationHeader
         title={t`Filter`}
         onBackClick={goBackFromCommandMenu}
       />
-      <div>
-        <InputLabel>{t`Conditions`}</InputLabel>
-        <RecordFilterGroupsComponentInstanceContext.Provider
-          value={{ instanceId }}
-        >
-          <RecordFiltersComponentInstanceContext.Provider
+      <StyledChartFiltersPageContainer>
+        <div>
+          <InputLabel>{t`Conditions`}</InputLabel>
+          <RecordFilterGroupsComponentInstanceContext.Provider
             value={{ instanceId }}
           >
-            <AdvancedFilterCommandMenuContainer
-              onUpdate={handleFiltersUpdate}
-              objectMetadataItem={objectMetadataItem}
-              isWorkflowFindRecords={false}
-            />
-            <ChartFiltersSettingsInitializeStateEffect
-              initialChartFilters={chartWidgetConfiguration.filter}
-            />
-          </RecordFiltersComponentInstanceContext.Provider>
-        </RecordFilterGroupsComponentInstanceContext.Provider>
-      </div>
-    </StyledChartFiltersPageContainer>
+            <RecordFiltersComponentInstanceContext.Provider
+              value={{ instanceId }}
+            >
+              <AdvancedFilterCommandMenuContainer
+                onUpdate={handleFiltersUpdate}
+                objectMetadataItem={objectMetadataItem}
+                isWorkflowFindRecords={false}
+              />
+              <ChartFiltersSettingsInitializeStateEffect
+                initialChartFilters={chartWidgetConfiguration.filter}
+              />
+            </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
+        </div>
+      </StyledChartFiltersPageContainer>
+    </>
   );
 };