diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss
new file mode 100644
index 00000000000..8bd080b577f
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss
@@ -0,0 +1,16 @@
+.trigger {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2px;
+ background: transparent;
+ border: none;
+ border-radius: 2px;
+ color: var(--bg-vanilla-400, #8993ae);
+ cursor: pointer;
+
+ &:hover {
+ color: var(--bg-vanilla-100, #fff);
+ background: var(--bg-slate-400, #1d212d);
+ }
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx
new file mode 100644
index 00000000000..8465801c552
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx
@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import styles from './PanelActionsMenu.module.scss';
+
+interface Props {
+ panelId: string;
+ currentLayoutIndex: number;
+ sections: DashboardSection[];
+ onMovePanel?: (args: MovePanelArgs) => void;
+ onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelActionsMenu({
+ panelId,
+ currentLayoutIndex,
+ sections,
+ onMovePanel,
+ onDeletePanel,
+}: Props): JSX.Element {
+ const items = useMemo
(() => {
+ const result: MenuItem[] = [];
+
+ if (onMovePanel) {
+ const targets = sections.filter(
+ (s) => s.title && s.layoutIndex !== currentLayoutIndex,
+ );
+ if (targets.length === 0) {
+ result.push({
+ key: 'move',
+ label: 'Move to section',
+ icon: ,
+ disabled: true,
+ });
+ } else {
+ result.push({
+ key: 'move',
+ label: 'Move to section',
+ icon: ,
+ children: targets.map((s) => ({
+ key: `move-${s.layoutIndex}`,
+ label: s.title,
+ onClick: (): void =>
+ onMovePanel({
+ panelId,
+ fromLayoutIndex: currentLayoutIndex,
+ toLayoutIndex: s.layoutIndex,
+ }),
+ })),
+ });
+ }
+ }
+
+ if (onDeletePanel) {
+ if (result.length > 0) {
+ result.push({ type: 'divider' });
+ }
+ result.push({
+ key: 'delete-panel',
+ danger: true,
+ icon: ,
+ label: 'Delete panel',
+ onClick: (): void =>
+ onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
+ });
+ }
+
+ return result;
+ }, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
+
+ return (
+
+
+
+ );
+}
+
+export default PanelActionsMenu;
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss
new file mode 100644
index 00000000000..9562a779af1
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss
@@ -0,0 +1,22 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+}
+
+.typeButton {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px;
+ background: var(--bg-ink-400, #0b0c0e);
+ border: 1px solid var(--bg-slate-400, #1d212d);
+ border-radius: 4px;
+ color: var(--bg-vanilla-100, #fff);
+ cursor: pointer;
+ text-align: left;
+
+ &:hover {
+ border-color: var(--bg-robin-500);
+ }
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx
new file mode 100644
index 00000000000..8c8fdfb33e6
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx
@@ -0,0 +1,82 @@
+import { Modal } from 'antd';
+import {
+ BarChart,
+ ChartLine,
+ ChartPie,
+ Hash,
+ List,
+ Table,
+} from '@signozhq/icons';
+
+import styles from './PanelTypeSelectionModal.module.scss';
+
+interface PanelType {
+ pluginKind: string;
+ label: string;
+ icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+ {
+ pluginKind: 'signoz/TimeSeriesPanel',
+ label: 'Time Series',
+ icon: ,
+ },
+ { pluginKind: 'signoz/NumberPanel', label: 'Value', icon: },
+ { pluginKind: 'signoz/TablePanel', label: 'Table', icon: },
+ {
+ pluginKind: 'signoz/BarChartPanel',
+ label: 'Bar Chart',
+ icon: ,
+ },
+ {
+ pluginKind: 'signoz/PieChartPanel',
+ label: 'Pie Chart',
+ icon: ,
+ },
+ {
+ pluginKind: 'signoz/HistogramPanel',
+ label: 'Histogram',
+ icon: ,
+ },
+ { pluginKind: 'signoz/ListPanel', label: 'List', icon:
},
+];
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+ onSelect: (pluginKind: string) => void;
+}
+
+function PanelTypeSelectionModal({
+ open,
+ onClose,
+ onSelect,
+}: Props): JSX.Element {
+ return (
+
+
+ {PANEL_TYPES.map((type) => (
+
+ ))}
+
+
+ );
+}
+
+export default PanelTypeSelectionModal;
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts
new file mode 100644
index 00000000000..78616f60d89
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts
@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+ addPanelToSectionOps,
+ createDefaultPanel,
+ panelRef,
+} from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+ sections: DashboardSection[];
+}
+
+export interface AddPanelArgs {
+ layoutIndex: number;
+ pluginKind: string;
+}
+
+/**
+ * Creates a new panel and places its item ref at the bottom of the target
+ * section, as one atomic patch. Structure-only: the panel is a valid minimal
+ * placeholder (its query is filled in once the panel editor lands).
+ */
+export function useAddPanelToSection({
+ sections,
+}: Params): (args: AddPanelArgs) => Promise {
+ const dashboardId = useDashboardStore((s) => s.dashboardId);
+ const refetch = useDashboardStore((s) => s.refetch);
+ const { showErrorModal } = useErrorModal();
+
+ return useCallback(
+ async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise => {
+ if (!dashboardId) {
+ return;
+ }
+ const target = sections.find((s) => s.layoutIndex === layoutIndex);
+ if (!target) {
+ return;
+ }
+
+ const panelId = uuid();
+ const nextY = target.items.reduce(
+ (max, i) => Math.max(max, i.y + i.height),
+ 0,
+ );
+
+ try {
+ await patchDashboardV2(
+ { id: dashboardId },
+ addPanelToSectionOps({
+ panelId,
+ panel: createDefaultPanel(pluginKind),
+ layoutIndex,
+ item: {
+ x: 0,
+ y: nextY,
+ width: 6,
+ height: 6,
+ content: { $ref: panelRef(panelId) },
+ },
+ }),
+ );
+ refetch();
+ } catch (error) {
+ showErrorModal(error as APIError);
+ }
+ },
+ [sections, dashboardId, refetch, showErrorModal],
+ );
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts
new file mode 100644
index 00000000000..30dded7a9ca
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts
@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+ sections: DashboardSection[];
+}
+
+export interface DeletePanelArgs {
+ panelId: string;
+ layoutIndex: number;
+}
+
+/**
+ * Removes a panel: drops its item ref from the section's items and deletes the
+ * panel from `spec.panels`, as one atomic patch.
+ */
+export function useDeletePanel({
+ sections,
+}: Params): (args: DeletePanelArgs) => Promise {
+ const dashboardId = useDashboardStore((s) => s.dashboardId);
+ const refetch = useDashboardStore((s) => s.refetch);
+ const { showErrorModal } = useErrorModal();
+
+ return useCallback(
+ async ({ panelId, layoutIndex }: DeletePanelArgs): Promise => {
+ if (!dashboardId) {
+ return;
+ }
+ const section = sections.find((s) => s.layoutIndex === layoutIndex);
+ if (!section) {
+ return;
+ }
+
+ const nextItems = section.items.filter((i) => i.id !== panelId);
+ try {
+ await patchDashboardV2({ id: dashboardId }, [
+ replaceSectionItemsOp(layoutIndex, nextItems),
+ removePanelOp(panelId),
+ ]);
+ refetch();
+ } catch (error) {
+ showErrorModal(error as APIError);
+ }
+ },
+ [sections, dashboardId, refetch, showErrorModal],
+ );
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts
new file mode 100644
index 00000000000..1e5953308fe
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts
@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { movePanelBetweenSectionsOps } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+export interface MovePanelArgs {
+ panelId: string;
+ fromLayoutIndex: number;
+ toLayoutIndex: number;
+}
+
+interface Params {
+ sections: DashboardSection[];
+}
+
+/**
+ * Relocates a panel's item ref from one section to another. The panel itself
+ * stays in `spec.panels`; only the grid item moves, dropped into a free row at
+ * the bottom of the target section. Persisted as one atomic patch.
+ */
+export function useMovePanelToSection({
+ sections,
+}: Params): (args: MovePanelArgs) => Promise {
+ const dashboardId = useDashboardStore((s) => s.dashboardId);
+ const refetch = useDashboardStore((s) => s.refetch);
+ const { showErrorModal } = useErrorModal();
+
+ return useCallback(
+ async ({
+ panelId,
+ fromLayoutIndex,
+ toLayoutIndex,
+ }: MovePanelArgs): Promise => {
+ if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
+ return;
+ }
+
+ const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
+ const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
+ if (!source || !target) {
+ return;
+ }
+
+ const moved = source.items.find((i) => i.id === panelId);
+ if (!moved) {
+ return;
+ }
+
+ const sourceItems = source.items.filter((i) => i.id !== panelId);
+ // Place at a fresh row at the bottom of the target section.
+ const nextY = target.items.reduce(
+ (max, i) => Math.max(max, i.y + i.height),
+ 0,
+ );
+ const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
+
+ try {
+ await patchDashboardV2(
+ { id: dashboardId },
+ movePanelBetweenSectionsOps({
+ sourceIndex: fromLayoutIndex,
+ sourceItems,
+ targetIndex: toLayoutIndex,
+ targetItems,
+ }),
+ );
+ refetch();
+ } catch (error) {
+ showErrorModal(error as APIError);
+ }
+ },
+ [sections, dashboardId, refetch, showErrorModal],
+ );
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss
new file mode 100644
index 00000000000..4f1be888faf
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss
@@ -0,0 +1,17 @@
+.addButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 8px;
+ padding: 8px 12px;
+ background: transparent;
+ border: 1px dashed var(--bg-slate-400, #1d212d);
+ border-radius: 4px;
+ color: var(--bg-vanilla-400, #8993ae);
+ cursor: pointer;
+
+ &:hover {
+ border-color: var(--bg-robin-500);
+ color: var(--bg-vanilla-100, #fff);
+ }
+}
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx
new file mode 100644
index 00000000000..10b6dee24a4
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } from '../../../utils';
+import { useAddSection } from '../hooks/useAddSection';
+import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
+import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
+import styles from './AddSectionControl.module.scss';
+
+const DEFAULT_SECTION_TITLE = 'New section';
+
+interface Props {
+ sections: DashboardSection[];
+ layouts: DashboardtypesLayoutDTO[] | undefined | null;
+ isSectioned: boolean;
+}
+
+function AddSectionControl({
+ sections,
+ layouts,
+ isSectioned,
+}: Props): JSX.Element {
+ const [isMigrationOpen, setIsMigrationOpen] = useState(false);
+ const { addSection } = useAddSection({ layouts });
+ const { migrate, isSaving } = useFirstSectionMigration({ sections });
+
+ // Free-flowing dashboard with existing panels → must migrate before sections
+ // can coexist (every panel must belong to a section once any exists).
+ const needsMigration =
+ !isSectioned && sections.some((s) => s.items.length > 0);
+
+ const handleClick = (): void => {
+ if (needsMigration) {
+ setIsMigrationOpen(true);
+ return;
+ }
+ void addSection(DEFAULT_SECTION_TITLE);
+ };
+
+ const handleConfirmMigration = async (): Promise => {
+ await migrate(DEFAULT_SECTION_TITLE);
+ setIsMigrationOpen(false);
+ };
+
+ return (
+ <>
+
+ setIsMigrationOpen(false)}
+ onConfirm={handleConfirmMigration}
+ />
+
+ );
+}
+
+export default AddSectionControl;
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx
new file mode 100644
index 00000000000..9e9f4b7a5f0
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx
@@ -0,0 +1,41 @@
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+interface Props {
+ open: boolean;
+ isSaving: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+}
+
+/**
+ * Shown when the user adds the first section to a free-flowing dashboard that
+ * already has panels. Confirms grouping the existing panels into a section
+ * before proceeding.
+ */
+function FirstSectionMigrationModal({
+ open,
+ isSaving,
+ onClose,
+ onConfirm,
+}: Props): JSX.Element {
+ return (
+
+
+ This dashboard's panels are currently free-flowing. Adding a section
+ will move the existing panels into their own section, and a new empty
+ section will be added below. You can rename sections afterwards.
+
+
+ );
+}
+
+export default FirstSectionMigrationModal;
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx
new file mode 100644
index 00000000000..779d7f9d8b8
--- /dev/null
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+
+interface Props {
+ open: boolean;
+ initialValue: string;
+ isSaving: boolean;
+ onClose: () => void;
+ onSubmit: (title: string) => void;
+}
+
+function RenameSectionModal({
+ open,
+ initialValue,
+ isSaving,
+ onClose,
+ onSubmit,
+}: Props): JSX.Element {
+ const [value, setValue] = useState(initialValue);
+
+ // Reseed the field each time the modal opens.
+ useEffect(() => {
+ if (open) {
+ setValue(initialValue);
+ }
+ }, [open, initialValue]);
+
+ const submit = (): void => {
+ const trimmed = value.trim();
+ if (trimmed) {
+ onSubmit(trimmed);
+ }
+ };
+
+ return (
+
+ setValue(e.target.value)}
+ onKeyDown={(e): void => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ submit();
+ }
+ }}
+ />
+
+ );
+}
+
+export default RenameSectionModal;
diff --git a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
index cd7380a4eb3..210e39d1375 100644
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
@@ -1,17 +1,45 @@
import { useRef, useState } from 'react';
+import { Modal } from 'antd';
import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
import type { DashboardSection } from '../../../utils';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useDeleteSection } from '../hooks/useDeleteSection';
+import { useRenameSection } from '../hooks/useRenameSection';
+import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
+import RenameSectionModal from '../RenameSectionModal';
import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader from '../SectionHeader/SectionHeader';
+import SectionHeader, {
+ type SectionDragHandle,
+} from '../SectionHeader/SectionHeader';
import styles from './Section.module.scss';
interface Props {
section: DashboardSection;
+ /** Adds a panel to this section; present only in editable sectioned mode. */
+ onAddPanel?: (args: AddPanelArgs) => void;
+ /** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
+ sections?: DashboardSection[];
+ onMovePanel?: (args: MovePanelArgs) => void;
+ onDeletePanel?: (args: DeletePanelArgs) => void;
+ /** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+ dragHandle?: SectionDragHandle;
}
-function Section({ section }: Props): JSX.Element {
+function Section({
+ section,
+ onAddPanel,
+ sections,
+ onMovePanel,
+ onDeletePanel,
+ dragHandle,
+}: Props): JSX.Element {
+ const isEditable = useDashboardStore((s) => s.isEditable);
const containerRef = useRef(null);
// Placeholder signal for lazy panel query-loading (consumed in a later PR):
// true once the section scrolls into (or near) the viewport.
@@ -19,10 +47,48 @@ function Section({ section }: Props): JSX.Element {
rootMargin: '200px',
});
- const [open, setOpen] = useState(section.open);
- const toggle = (): void => setOpen((prev) => !prev);
+ const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
- const grid = ;
+ const [isRenaming, setIsRenaming] = useState(false);
+ const { rename, isSaving } = useRenameSection({
+ layoutIndex: section.layoutIndex,
+ });
+
+ const handleRenameSubmit = async (title: string): Promise => {
+ const ok = await rename(title);
+ if (ok) {
+ setIsRenaming(false);
+ }
+ };
+
+ const [isAddingPanel, setIsAddingPanel] = useState(false);
+ const handleSelectPanelType = (pluginKind: string): void => {
+ onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+ setIsAddingPanel(false);
+ };
+
+ const { deleteSection } = useDeleteSection({ section });
+ const confirmDeleteSection = (): void => {
+ Modal.confirm({
+ title: `Delete section "${section.title ?? ''}"?`,
+ content: 'Panels in this section will be removed.',
+ okText: 'Delete',
+ okButtonProps: { danger: true },
+ centered: true,
+ onOk: () => deleteSection(),
+ });
+ };
+
+ const grid = (
+
+ );
if (!section.title) {
// Untitled section — just the grid (no header chrome), but still observed
@@ -51,8 +117,26 @@ function Section({ section }: Props): JSX.Element {
open={open}
onToggle={toggle}
repeatVariable={section.repeatVariable}
+ dragHandle={dragHandle}
+ onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+ onAddPanel={
+ isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
+ }
+ onDeleteSection={isEditable ? confirmDeleteSection : undefined}
/>
{open ? grid : null}
+ setIsRenaming(false)}
+ onSubmit={handleRenameSubmit}
+ />
+ setIsAddingPanel(false)}
+ onSelect={handleSelectPanelType}
+ />