Page layout conditional display (#15802)

- Allow widgets to be hidden based on device's type conditions: desktop
or mobile
- Create two widgets for rich text fields on tasks and notes. One widget
is displayed below fields on mobile (and in the right drawer); the other
is displayed on a separate tab on desktop
- In read mode, hide tabs if they contain no visible widgets. If there
is no tab left to display, display at least the first one with no
widgets.
- In edit mode, display all tabs and all widgets.

## Demo


https://github.com/user-attachments/assets/65ef1261-3902-4432-a420-48983b763b2c

Closes https://github.com/twentyhq/core-team-issues/issues/1811
This commit is contained in:
Baptiste Devessier
2025-11-18 10:35:38 +01:00
committed by GitHub
parent d0d90735cb
commit e0d1f74648
22 changed files with 918 additions and 64 deletions
@@ -2,6 +2,7 @@ import { SummaryCard } from '@/object-record/record-show/components/SummaryCard'
import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
@@ -18,15 +19,12 @@ export const PageLayoutLeftPanel = ({
const { currentPageLayout } = useCurrentPageLayout();
const targetRecordIdentifier = useTargetRecord();
const { isInRightDrawer } = useLayoutRenderingContext();
const pinnedTab = usePageLayoutTabWithVisibleWidgetsOrThrow(pinnedLeftTabId);
if (currentPageLayout?.type !== PageLayoutType.RECORD_PAGE) {
return null;
}
const pinnedTab = currentPageLayout.tabs.find(
(tab) => tab.id === pinnedLeftTabId,
);
const layoutMode = getTabLayoutMode({
tab: pinnedTab,
pageLayoutType: currentPageLayout.type,