feat: fix Command Menu Side Panel Layout (#15883)

[Figma Design](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=81380-344641&t=FpjWNOK2gZuDQQfr-0)  --- > [!NOTE] > Adds a side panel layout for the Command Menu, routes modals into a local container, updates the top bar and context chips, and standardizes small button sizes. > > - **Command Menu**: > - **Side Panel Layout**: Introduces `CommandMenuSidePanelLayout` with animated width, hosts `CommandMenuRouter`, and provides a modal container via `ModalContainerContext`. > - **Top Bar**: Redesign (`CommandMenuTopBar`) with back icon, optional AI sparkles action, compact height (`COMMAND_MENU_SEARCH_BAR_HEIGHT=40`), and updated placeholder. > - **Context Chips**: Adds `CommandMenuLastContextChip` and `CommandMenuRecordInfo`; extends `CommandMenuContextChip` with `page` prop; updates `CommandMenuContextChipGroups` to render last chip as record info when applicable. > - **Container Simplification**: `CommandMenuContainer` simplified to just provide contexts and `AgentChatProvider`. > - **Modal System**: > - Adds `ModalContainerContext` and updates `Modal` to portal into provided container; `Modal.Backdrop` supports `isInContainer`. > - Updates usages (e.g., `UserOrMetadataLoader`, `ActionModal`) to align with new modal behavior. > - **Page Integration**: > - Replaces `PageBody` with `CommandMenuSidePanelLayout` in `RecordShowPage` and `RecordIndexContainerGater`. > - Removes global `CommandMenuRouter` from `DefaultLayout` (keeps keyboard shortcuts). > - **UI/Styling**: > - Standardizes several buttons to `size="small"` (e.g., command actions, open record, options, reply, workflow footer). > - Adjusts `ShowPageSubContainer` styling when rendered inside command menu. > - Storybook tests updated for new placeholder text. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 81fcaa145618a2fa1c3e11e2dc88fe832c51374c. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>  --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: Devessier <baptiste@devessier.fr> Co-authored-by: Aman Raj <92664006+araj00@users.noreply.github.com> Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com> Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com>
2025-11-21 20:42:41 +05:30
parent 28b8a4f7ec
commit 04b0a65e73
102 changed files with 1913 additions and 1548 deletions
@@ -0,0 +1,160 @@
+import { usePageLayoutHeaderInfo } from '@/command-menu/components/hooks/usePageLayoutHeaderInfo';
+import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useUpdatePageLayoutTab } from '@/page-layout/hooks/useUpdatePageLayoutTab';
+import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
+import { TitleInput } from '@/ui/input/components/TitleInput';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
+import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+
+const StyledPageLayoutInfoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+const StyledPageLayoutIcon = styled.div<{ iconColor: string }>`
+  align-items: center;
+  background: ${({ theme }) => theme.background.transparent.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ iconColor }) => iconColor};
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledPageLayoutTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  min-width: 0;
+`;
+
+const StyledPageLayoutType = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  white-space: nowrap;
+`;
+
+export const CommandMenuPageLayoutInfo = () => {
+  const theme = useTheme();
+  const { getIcon } = useIcons();
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
+
+  const draftPageLayout = useRecoilComponentValue(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutEditingWidgetId = useRecoilComponentValue(
+    pageLayoutEditingWidgetIdComponentState,
+    pageLayoutId,
+  );
+
+  const [openTabId] = useRecoilComponentState(
+    pageLayoutTabSettingsOpenTabIdComponentState,
+    pageLayoutId,
+  );
+
+  const { updateCommandMenuPageInfo } = useUpdateCommandMenuPageInfo();
+  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
+  const { updatePageLayoutTab } = useUpdatePageLayoutTab(pageLayoutId);
+
+  const [editedTitle, setEditedTitle] = useState<string | null>(null);
+
+  const headerInfo = usePageLayoutHeaderInfo({
+    commandMenuPage,
+    draftPageLayout,
+    pageLayoutEditingWidgetId,
+    openTabId,
+    editedTitle,
+  });
+
+  if (!headerInfo) {
+    return null;
+  }
+
+  const {
+    headerIcon,
+    headerIconColor,
+    headerType,
+    title,
+    isReadonly,
+    tab,
+    widgetInEditMode,
+  } = headerInfo;
+
+  const Icon = headerIcon ?? getIcon('IconDefault');
+
+  const handleTitleChange = (newTitle: string) => {
+    setEditedTitle(newTitle);
+  };
+
+  const saveTitle = async () => {
+    const finalTitle = editedTitle ?? title;
+
+    if (!isNonEmptyString(finalTitle)) {
+      return;
+    }
+
+    updateCommandMenuPageInfo({
+      pageTitle: finalTitle,
+      pageIcon: Icon,
+    });
+
+    if (
+      commandMenuPage === CommandMenuPages.PageLayoutTabSettings &&
+      isDefined(tab)
+    ) {
+      updatePageLayoutTab(tab.id, { title: finalTitle });
+    } else if (isDefined(widgetInEditMode)) {
+      updatePageLayoutWidget(widgetInEditMode.id, {
+        title: finalTitle,
+      });
+    }
+
+    setEditedTitle(null);
+  };
+
+  return (
+    <StyledPageLayoutInfoContainer>
+      {isDefined(headerIcon) && (
+        <StyledPageLayoutIcon iconColor={headerIconColor}>
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        </StyledPageLayoutIcon>
+      )}
+      <StyledPageLayoutTitleContainer>
+        <TitleInput
+          instanceId={`page-layout-title-${commandMenuPage}-${pageLayoutId}`}
+          disabled={isReadonly}
+          sizeVariant="sm"
+          value={title}
+          onChange={handleTitleChange}
+          placeholder={headerType}
+          onEnter={saveTitle}
+          onEscape={() => setEditedTitle(null)}
+          onClickOutside={saveTitle}
+          onTab={saveTitle}
+          onShiftTab={saveTitle}
+        />
+      </StyledPageLayoutTitleContainer>
+      {headerType && <StyledPageLayoutType>{headerType}</StyledPageLayoutType>}
+    </StyledPageLayoutInfoContainer>
+  );
+};