Support side panel in record page layout (#15216)

## Demo https://github.com/user-attachments/assets/078b67d3-52d7-4ddf-a65a-fb002f82cfdd Closes https://github.com/twentyhq/core-team-issues/issues/1731 --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-10-21 13:01:43 +02:00
parent ea09987e80
commit e58668003d
9 changed files with 563 additions and 52 deletions
@@ -0,0 +1,35 @@
+import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
+import { PageLayoutGridLayout } from '@/page-layout/components/PageLayoutGridLayout';
+import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
+import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
+import { PageLayoutType } from '~/generated/graphql';
+
+type PageLayoutLeftPanelProps = {
+  pinnedLeftTabId: string;
+};
+
+export const PageLayoutLeftPanel = ({
+  pinnedLeftTabId,
+}: PageLayoutLeftPanelProps) => {
+  const { currentPageLayout } = useCurrentPageLayout();
+  const targetRecordIdentifier = useTargetRecord();
+  const { isInRightDrawer } = useLayoutRenderingContext();
+
+  if (currentPageLayout?.type !== PageLayoutType.RECORD_PAGE) {
+    return null;
+  }
+
+  return (
+    <ShowPageLeftContainer>
+      <SummaryCard
+        objectNameSingular={targetRecordIdentifier.targetObjectNameSingular}
+        objectRecordId={targetRecordIdentifier.id}
+        isInRightDrawer={isInRightDrawer}
+      />
+
+      <PageLayoutGridLayout tabId={pinnedLeftTabId} />
+    </ShowPageLeftContainer>
+  );
+};