Improve record page layout editing experience (#25087)

## Summary

- Insert widgets at a chosen position using hover controls and the
existing picker.
- Show the expanded Add widget chooser at the bottom when possible, or
above a lone full-height widget.
- Click a different tab to navigate; click the current tab again to open
its settings, preserving the blue outline.
- Use distinct Fields group / Field icons and clearer picker labels.

## Before / After

**Before:** Widget insertion used a fixed chooser, and clicking a tab
also opened its settings.

**After:** Insertion controls mark the intended position, and tab
navigation stays separate from configuration.

**Between widgets**

![Hover insertion control between
widgets](https://github.com/user-attachments/assets/3b3fd707-549f-4f66-8824-f73c70810c14)

**Above a lone full-height widget**

![Add widget chooser above a full-height
widget](https://github.com/user-attachments/assets/f9a176a1-824c-432f-b54b-14d1c27768b4)

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/25087?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Jonathan Bredo <Bredo@users.noreply.github.com>

Author: Bonapara

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

@@ -4,9 +4,12 @@ import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutCo
 import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
 import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
 import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
-import { StandaloneWidgetPlaceholder } from '@/page-layout/widgets/components/StandaloneWidgetPlaceholder';
 import { RecordPageAddWidgetSection } from '@/page-layout/widgets/components/RecordPageAddWidgetSection';
+import { RecordPageWidgetInsertionSeparator } from '@/page-layout/widgets/components/RecordPageWidgetInsertionSeparator';
+import { StandaloneWidgetPlaceholder } from '@/page-layout/widgets/components/StandaloneWidgetPlaceholder';
+import { isViewportFillingWidgetType } from '@/page-layout/widgets/utils/isViewportFillingWidgetType';
 import { styled } from '@linaria/react';
+import { isDefined } from 'twenty-shared/utils';
 import {
   PageLayoutTabLayoutMode,
   PageLayoutType,
@@ -23,6 +26,7 @@ export const PageLayoutContent = () => {
   const { layoutMode, tabId } = usePageLayoutContentContext();
 
   const activeTab = usePageLayoutTabWithVisibleWidgetsOrThrow(tabId);
+  const firstWidget = activeTab.widgets[0];
 
   const { currentPageLayout } = useCurrentPageLayoutOrThrow();
 
@@ -47,14 +51,29 @@ export const PageLayoutContent = () => {
     return <PageLayoutGridLayout tabId={tabId} />;
   }
 
-  const isVerticalListInEditMode = isPageLayoutInEditMode && isRecordPageLayout;
-
   return (
     <PageLayoutVerticalList
-      isInEditMode={isVerticalListInEditMode}
+      isInEditMode={isPageLayoutInEditMode && isRecordPageLayout}
       widgets={activeTab.widgets}
+      leadingElement={
+        isRecordPageLayout &&
+        isDefined(firstWidget) &&
+        isViewportFillingWidgetType(firstWidget.type) ? (
+          <RecordPageAddWidgetSection
+            insertionContext={{
+              targetWidgetId: firstWidget.id,
+              direction: 'above',
+            }}
+          />
+        ) : undefined
+      }
       trailingElement={
-        isVerticalListInEditMode ? <RecordPageAddWidgetSection /> : undefined
+        isRecordPageLayout ? <RecordPageAddWidgetSection /> : undefined
+      }
+      renderWidgetSeparator={
+        isRecordPageLayout
+          ? (widget) => <RecordPageWidgetInsertionSeparator widget={widget} />
+          : undefined
       }
     />
   );

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

@@ -40,12 +40,12 @@ import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { type PageLayoutWidgetDndData } from '@/page-layout/types/PageLayoutWidgetDndData';
 import { shouldEnableTabEditingFeatures } from '@/page-layout/utils/shouldEnableTabEditingFeatures';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { TabListDropdown } from '@/ui/layout/tab-list/components/TabListDropdown';
 import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab-list/components/TabListFromUrlOptionalEffect';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {
@@ -267,11 +267,13 @@ export const PageLayoutTabList = ({
   });
 
   const isPageLayoutInEditMode = useIsPageLayoutInEditMode();
-  const pageLayoutTabSettingsOpenTabId = useAtomComponentStateValue(
-    pageLayoutTabSettingsOpenTabIdComponentState,
-    pageLayoutId,
-  );
+  const [pageLayoutTabSettingsOpenTabId, setPageLayoutTabSettingsOpenTabId] =
+    useAtomComponentState(
+      pageLayoutTabSettingsOpenTabIdComponentState,
+      pageLayoutId,
+    );
   const { openTabSettings } = useOpenPageLayoutTabSettings(pageLayoutId);
+  const { closeSidePanelMenu } = useSidePanelMenu();
 
   const isTabSettingsOpen = isDefined(pageLayoutTabSettingsOpenTabId);
 
@@ -295,7 +297,13 @@ export const PageLayoutTabList = ({
   );
 
   const handleSelectTab = useCallback(
-    (tabId: string) => {
+    ({
+      tabId,
+      select = selectTab,
+    }: {
+      tabId: string;
+      select?: (tabId: string) => void;
+    }) => {
       const shouldOpenSettings =
         isPageLayoutInEditMode &&
         shouldEnableTabEditingFeatures(pageLayoutType);
@@ -306,48 +314,34 @@ export const PageLayoutTabList = ({
       }
 
       if (shouldOpenSettings && isTabSettingsOpen) {
-        openTabSettings(tabId);
+        if (pageLayoutType === PageLayoutType.RECORD_PAGE) {
+          closeSidePanelMenu();
+          setPageLayoutTabSettingsOpenTabId(null);
+        } else {
+          openTabSettings(tabId);
+        }
       }
 
-      selectTab(tabId);
+      select(tabId);
     },
     [
       isPageLayoutInEditMode,
       pageLayoutType,
       activeTabId,
       isTabSettingsOpen,
+      closeSidePanelMenu,
+      setPageLayoutTabSettingsOpenTabId,
       openTabSettings,
       selectTab,
     ],
   );
 
   const handleSelectTabFromDropdown = useCallback(
     (tabId: string) => {
-      const shouldOpenSettings =
-        isPageLayoutInEditMode &&
-        shouldEnableTabEditingFeatures(pageLayoutType);
-
-      if (shouldOpenSettings && activeTabId === tabId) {
-        openTabSettings(tabId);
-        closeOverflowDropdown();
-        return;
-      }
-
-      if (shouldOpenSettings && isTabSettingsOpen) {
-        openTabSettings(tabId);
-      }
-
-      selectTabFromDropdown(tabId);
+      handleSelectTab({ tabId, select: selectTabFromDropdown });
+      closeOverflowDropdown();
     },
-    [
-      isPageLayoutInEditMode,
-      pageLayoutType,
-      activeTabId,
-      isTabSettingsOpen,
-      openTabSettings,
-      closeOverflowDropdown,
-      selectTabFromDropdown,
-    ],
+    [handleSelectTab, closeOverflowDropdown, selectTabFromDropdown],
   );
 
   if (tabsWithIcons.length === 0) {
@@ -435,7 +429,7 @@ export const PageLayoutTabList = ({
             behaveAsLinks={behaveAsLinks}
             loading={loading}
             onChangeTab={onChangeTab}
-            onSelectTab={handleSelectTab}
+            onSelectTab={(tabId) => handleSelectTab({ tabId })}
             canReorder={canReorderTabs}
             widgetDropTargetWidgetsByTabId={widgetDropTargetWidgetsByTabId}
             firstHiddenTabId={

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

@@ -54,11 +54,11 @@ export const PageLayoutTabListNewTabDropdownContent = ({
     (tabId: string) => {
       updatePageLayoutTab(tabId, { isActive: true });
       setActiveTabId(tabId);
-      setPageLayoutTabSettingsOpenTabId(tabId);
       navigatePageLayoutSidePanel({
         sidePanelPage: SidePanelPages.PageLayoutTabSettings,
         resetNavigationStack: true,
       });
+      setPageLayoutTabSettingsOpenTabId(tabId);
       closeDropdown(dropdownId);
     },
     [

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

@@ -103,10 +103,10 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
   };
 
   const handleEditClick = (tabId: string) => {
-    setPageLayoutTabSettingsOpenTabId(tabId);
     navigatePageLayoutSidePanel({
       sidePanelPage: SidePanelPages.PageLayoutTabSettings,
     });
+    setPageLayoutTabSettingsOpenTabId(tabId);
     onClose();
   };
 

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

@@ -3,13 +3,15 @@ import { PAGE_LAYOUT_TAB_DND_TYPE } from '@/page-layout/constants/PageLayoutTabD
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { type PageLayoutTabDragData } from '@/page-layout/types/PageLayoutTabDragData';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { DragDropItemSortableCell } from '@/ui/utilities/drag-and-drop/components/DragDropItemSortableCell';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
 import { StyledTabContainer, TabContent } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { PageLayoutType } from '~/generated-metadata/graphql';
 
 type PageLayoutTabListReorderableTabProps = {
   tab: SingleTabProps;
@@ -22,10 +24,10 @@ type PageLayoutTabListReorderableTabProps = {
   onSelect: () => void;
 };
 
-const StyledTabContentWrapper = styled.div<{ isBeingEdited: boolean }>`
+const StyledTabContentWrapper = styled.div<{ isHighlighted: boolean }>`
   border-radius: ${themeCssVariables.border.radius.sm};
-  outline: ${({ isBeingEdited }) =>
-    isBeingEdited ? `1px solid ${themeCssVariables.color.blue}` : 'none'};
+  outline: ${({ isHighlighted }) =>
+    isHighlighted ? `1px solid ${themeCssVariables.color.blue}` : 'none'};
   outline-offset: -1px;
 `;
 
@@ -39,11 +41,15 @@ export const PageLayoutTabListReorderableTab = ({
   widgetDropTargetWidgets,
   onSelect,
 }: PageLayoutTabListReorderableTabProps) => {
+  const { layoutType } = useLayoutRenderingContext();
   const pageLayoutTabSettingsOpenTabId = useAtomComponentStateValue(
     pageLayoutTabSettingsOpenTabIdComponentState,
   );
 
-  const isSettingsOpenForThisTab = pageLayoutTabSettingsOpenTabId === tab.id;
+  const isHighlighted =
+    layoutType === PageLayoutType.RECORD_PAGE
+      ? isActive
+      : pageLayoutTabSettingsOpenTabId === tab.id;
 
   const tabDragData: PageLayoutTabDragData = {
     type: 'tab',
@@ -69,7 +75,7 @@ export const PageLayoutTabListReorderableTab = ({
         active={isActive}
         disabled={disabled}
       >
-        <StyledTabContentWrapper isBeingEdited={isSettingsOpenForThisTab}>
+        <StyledTabContentWrapper isHighlighted={isHighlighted}>
           <TabContent
             id={tab.id}
             active={isActive}

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

@@ -80,7 +80,10 @@ export const PageLayoutTabMenuItemSelectAvatar = ({
               Icon={IconPencil}
               size="small"
               accent="tertiary"
-              onClick={() => onEditClick?.(tab.id)}
+              onClick={(event) => {
+                event.stopPropagation();
+                onEditClick?.(tab.id);
+              }}
             />
           </div>
         )}

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

@@ -5,13 +5,15 @@ import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { type PageLayoutWidgetListDropData } from '@/page-layout/types/PageLayoutWidgetListDropData';
 import { canVerticalListAcceptWidgetDrag } from '@/page-layout/utils/canVerticalListAcceptWidgetDrag';
 import { getIsSingleWidgetTab } from '@/page-layout/utils/getIsSingleWidgetTab';
+import { isViewportFillingWidgetType } from '@/page-layout/widgets/utils/isViewportFillingWidgetType';
 import { DragDropItemDropTarget } from '@/ui/utilities/drag-and-drop/components/DragDropItemDropTarget';
 import { WorkflowDiagramAllowPageScrollContext } from '@/workflow/workflow-diagram/contexts/WorkflowDiagramAllowPageScrollContext';
 import { type Draggable } from '@dnd-kit/abstract';
 import { pointerIntersection } from '@dnd-kit/collision';
 import { useDroppable } from '@dnd-kit/react';
 import { styled } from '@linaria/react';
-import { type ReactNode, useCallback } from 'react';
+import { Fragment, type ReactNode, useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { PageLayoutTabLayoutMode } from '~/generated-metadata/graphql';
 
@@ -41,8 +43,6 @@ const StyledVerticalListContainer = styled.div<{
   background: var(--record-card-background-color);
   display: flex;
   flex-direction: column;
-  gap: ${({ isInEditMode }) =>
-    isInEditMode ? themeCssVariables.spacing[4] : '0'};
   min-height: ${({ isInEditMode }) => (isInEditMode ? '0' : '100%')};
   // The pinned tab sits next to the main tab area, so while editing it takes
   // that area's vertical padding to line their widgets up, and keeps the
@@ -58,25 +58,37 @@ const StyledVerticalListContainer = styled.div<{
       : '0'};
 `;
 
+const StyledHeader = styled.div`
+  flex-shrink: 0;
+  margin-bottom: ${themeCssVariables.spacing[4]};
+`;
+
 const StyledDropTarget = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: ${themeCssVariables.spacing[4]};
   min-height: ${themeCssVariables.spacing[6]};
   position: relative;
+
+  &:not(:first-child) {
+    margin-top: ${themeCssVariables.spacing[4]};
+  }
 `;
 
 type PageLayoutVerticalListProps = {
   isInEditMode: boolean;
   widgets: PageLayoutWidget[];
+  leadingElement?: ReactNode;
   trailingElement?: ReactNode;
+  renderWidgetSeparator?: (widget: PageLayoutWidget) => ReactNode;
 };
 
 export const PageLayoutVerticalList = ({
   isInEditMode,
   widgets,
+  leadingElement,
   trailingElement,
+  renderWidgetSeparator,
 }: PageLayoutVerticalListProps) => {
   const { layoutMode, tabId } = usePageLayoutContentContext();
 
@@ -99,6 +111,11 @@ export const PageLayoutVerticalList = ({
   // (workflow canvases) must keep it when there is no page scroll to reach.
   const hasPageScroll = isInEditMode || widgets.length > 1;
 
+  const firstViewportFillingWidgetIndex = widgets.findIndex((widget) =>
+    isViewportFillingWidgetType(widget.type),
+  );
+  const hasViewportFillingWidget = firstViewportFillingWidgetIndex !== -1;
+
   const endDropData: PageLayoutWidgetListDropData = {
     type: 'widget-list',
     tabId,
@@ -119,7 +136,7 @@ export const PageLayoutVerticalList = ({
     accept: canAcceptWidgetDrag,
     collisionDetector: pointerIntersection,
     data: endDropData,
-    disabled: !isInEditMode,
+    disabled: !isInEditMode || hasViewportFillingWidget,
   });
 
   return (
@@ -130,20 +147,29 @@ export const PageLayoutVerticalList = ({
       shouldUseWhiteBackground={!isInPinnedTab || isMobile}
     >
       <WorkflowDiagramAllowPageScrollContext.Provider value={hasPageScroll}>
+        {isInEditMode && isDefined(leadingElement) && (
+          <StyledHeader>{leadingElement}</StyledHeader>
+        )}
         {widgets.map((widget, index) => (
-          <PageLayoutVerticalListWidgetSlot
-            canAcceptWidgetDrag={canAcceptWidgetDrag}
-            index={index}
-            isInEditMode={isInEditMode}
-            isSoloCanvasPresentation={shouldUseSoloCanvasPresentation}
-            key={widget.id}
-            layoutMode={layoutMode}
-            shouldShowDivider={isSideColumnContext}
-            tabId={tabId}
-            widget={widget}
-          />
+          <Fragment key={widget.id}>
+            {isInEditMode &&
+              index > 0 &&
+              (!hasViewportFillingWidget ||
+                index <= firstViewportFillingWidgetIndex) &&
+              renderWidgetSeparator?.(widget)}
+            <PageLayoutVerticalListWidgetSlot
+              canAcceptWidgetDrag={canAcceptWidgetDrag}
+              index={index}
+              isInEditMode={isInEditMode}
+              isSoloCanvasPresentation={shouldUseSoloCanvasPresentation}
+              layoutMode={layoutMode}
+              shouldShowDivider={isSideColumnContext}
+              tabId={tabId}
+              widget={widget}
+            />
+          </Fragment>
         ))}
-        {isInEditMode && (
+        {isInEditMode && !hasViewportFillingWidget && (
           <StyledDropTarget ref={endDropZoneRef}>
             <DragDropItemDropTarget
               index={widgets.length}