Do not display border bottom for last widget of tab (#16856)

Closes [2030](https://github.com/twentyhq/core-team-issues/issues/2030).

Determines if a widget is the last visible widget in its parent tab. The
hook:
- Finds the tab containing the widget
- Filters widgets based on visibility rules (respects conditionalDisplay
and edit mode)
- Returns true if the current widget is the last in the filtered list
- Updated `WidgetCard`: Added isLastWidget prop to conditionally apply
border-bottom for the side-column variant
- Updated `WidgetRenderer`: Integrates the hook and passes isLastWidget
to WidgetCard
This commit is contained in:
Abdullah.
2025-12-31 01:28:59 +05:00
committed by GitHub
parent 656a32be73
commit 62e496f65d
3 changed files with 54 additions and 1 deletions
@@ -9,6 +9,7 @@ import { pageLayoutResizingWidgetIdComponentState } from '@/page-layout/states/p
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { PageLayoutWidgetForbiddenDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetForbiddenDisplay';
import { WidgetContentRenderer } from '@/page-layout/widgets/components/WidgetContentRenderer';
import { useIsCurrentWidgetLastOfTab } from '@/page-layout/widgets/hooks/useIsCurrentWidgetLastOfTab';
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useWidgetActions } from '@/page-layout/widgets/hooks/useWidgetActions';
import { useWidgetPermissions } from '@/page-layout/widgets/hooks/useWidgetPermissions';
@@ -67,6 +68,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
const { currentPageLayout } = useCurrentPageLayoutOrThrow();
const isLastWidget = useIsCurrentWidgetLastOfTab(widget.id);
// TODO: when we have more widgets without headers, we should use a more generic approach to hide the header
// each widget type could have metadata (e.g., hasHeader: boolean or headerMode: 'always' | 'editOnly' | 'never')
const isRichTextWidget = widget.type === WidgetType.STANDALONE_RICH_TEXT;
@@ -119,6 +122,7 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
isEditing={isEditing}
isDragging={isDragging}
isResizing={isResizing}
isLastWidget={isLastWidget}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
data-widget-id={widget.id}