Refactor TreeTab code organization

src/components/dialogs/connectivity/connectivity-form.tsx

@@ -22,7 +22,6 @@ import {
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useIntl } from 'react-intl';
-import PositionDiagramPane from '../../diagrams/singleLineDiagram/position-diagram-pane';
 import { isNodeBuilt } from '../../graph/util/model-functions';
 import { CONNECTION_DIRECTIONS, getConnectionDirectionLabel } from '../../network/constants';
 import {
@@ -41,6 +40,7 @@ import { getConnectivityBusBarSectionData, getConnectivityVoltageLevelData } fro
 import { UUID } from 'crypto';
 import { ConnectablePositionFormInfos } from './connectivity.type';
 import { CurrentTreeNode } from '../../graph/tree-node.type';
+import PositionDiagramPane from 'components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 
 /**
  * Hook to handle a 'connectivity value' (voltage level, bus or bus bar section)

src/components/dialogs/network-modifications/coupling-device/modification/create-coupling-device-form.tsx

@@ -11,7 +11,6 @@ import GridItem from '../../../commons/grid-item';
 import { getObjectId } from '../../../../utils/utils';
 import { Box, Grid, TextField, Tooltip } from '@mui/material';
 import { InfoOutlined } from '@mui/icons-material';
-import PositionDiagramPane from '../../../../diagrams/singleLineDiagram/position-diagram-pane';
 import { useCallback, useState } from 'react';
 import Button from '@mui/material/Button';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -20,6 +19,7 @@ import GridSection from '../../../commons/grid-section';
 import { UUID } from 'crypto';
 import { isNodeBuilt } from '../../../../graph/util/model-functions';
 import { CurrentTreeNode } from '../../../../graph/tree-node.type';
+import PositionDiagramPane from 'components/grid-layout/cards/diagrams/singleLineDiagram/positionDiagram/position-diagram-pane';
 
 export interface CreateCouplingDeviceFormProps {
     sectionOptions: Option[];

src/components/diagrams/diagram-adder.tsx → src/components/grid-layout/cards/adder/diagram-adder.tsx

@@ -18,21 +18,16 @@ import {
     TreeViewFinderNodeProps,
 } from '@gridsuite/commons-ui';
 import { TopBarEquipmentSearchDialog } from 'components/top-bar-equipment-seach-dialog/top-bar-equipment-search-dialog';
+import { cardStyles } from '../card-styles';
 
 const styles = {
-    card: (theme: Theme) => ({
-        display: 'flex',
-        flexDirection: 'column',
-    }),
     adderContent: (theme: Theme) => ({
         display: 'flex',
         flexDirection: 'column',
-        flexGrow: 1,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.paper : theme.palette.grey[900],
         borderRadius: theme.spacing(2),
-        border:
+        borderTop:
             theme.palette.mode === 'light'
                 ? `1px solid ${theme.palette.grey[500]}`
                 : `1px solid ${theme.palette.grey[800]}`,
@@ -52,7 +47,7 @@ interface DiagramAdderProps extends ReactGridLayoutCustomChildComponentProps {
     onLoad: (elementUuid: UUID, elementType: ElementType, elementName: string) => void;
     onSearch: (element: EquipmentInfos) => void;
     onMap?: () => void;
-    key: string;
+    key: string; // Required for React Grid Layout to identify the component
 }
 
 export const DiagramAdder = forwardRef((props: DiagramAdderProps, ref: Ref<HTMLDivElement>) => {
@@ -71,8 +66,8 @@ export const DiagramAdder = forwardRef((props: DiagramAdderProps, ref: Ref<HTMLD
         setIsLoadSelectorOpen(false);
     };
     return (
-        <Box sx={mergeSx(style, styles.card)} ref={ref} {...otherProps}>
-            <Box sx={styles.adderContent}>
+        <Box sx={mergeSx(style, cardStyles.card)} ref={ref} {...otherProps}>
+            <Box sx={mergeSx(cardStyles.diagramContainer, styles.adderContent)}>
                 <FormattedMessage id="AddNewCard" />
                 <Box
                     sx={{

src/components/grid-layout/cards/card-styles.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { Theme } from '@mui/material';
+
+export const cardStyles = {
+    card: (theme: Theme) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        '& .react-resizable-handle, .card-header-close-button': {
+            visibility: 'hidden',
+        },
+        '&:hover': {
+            '& .react-resizable-handle, .card-header-close-button': {
+                visibility: 'visible',
+            },
+        },
+    }),
+    alertMessage: (theme: Theme) => ({
+        borderRadius: '0 0 0 0',
+        border:
+            theme.palette.mode === 'light'
+                ? `1px solid ${theme.palette.grey[500]}`
+                : `1px solid ${theme.palette.grey[800]}`,
+        borderTop: 'none', // remove the top border to avoid double border with CardHeader
+        borderBottom: 'none',
+    }),
+    diagramContainer: (theme: Theme) => ({
+        flexGrow: 1,
+        overflow: 'hidden',
+        position: 'relative',
+        backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.paper : '#292e33',
+        borderRadius: '0 0 ' + theme.spacing(2) + ' ' + theme.spacing(2),
+        border:
+            theme.palette.mode === 'light'
+                ? `1px solid ${theme.palette.grey[500]}`
+                : `1px solid ${theme.palette.grey[800]}`,
+        borderTop: 'none', // remove the top border to avoid double border with CardHeader
+    }),
+};

src/components/diagrams/card-header.tsx → src/components/grid-layout/cards/custom-card-header.tsx

@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import Box from '@mui/material/Box';
 import { mergeSx, OverflowableText } from '@gridsuite/commons-ui';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
-import { Theme, Typography } from '@mui/material';
+import { Box, Theme, Typography } from '@mui/material';
 
 export const BLINK_LENGTH_MS = 1800;
 
 const styles = {
     header: (theme: Theme) => ({
+        padding: 0,
         paddingLeft: theme.spacing(1),
         display: 'flex',
         alignItems: 'center',
@@ -41,13 +41,13 @@ const styles = {
     }),
 };
 
-interface CardHeaderProps {
+interface CustomCardHeaderProps {
     title?: React.ReactNode;
     onClose?: () => void;
     blinking?: boolean;
 }
 
-const CardHeader: React.FC<CardHeaderProps> = ({ title, onClose, blinking }) => {
+const CustomCardHeader: React.FC<CustomCardHeaderProps> = ({ title, onClose, blinking }) => {
     return (
         <Box sx={mergeSx(styles.header, blinking ? styles.blink : undefined)}>
             <OverflowableText
@@ -71,4 +71,4 @@ const CardHeader: React.FC<CardHeaderProps> = ({ title, onClose, blinking }) =>
     );
 };
 
-export default CardHeader;
+export default CustomCardHeader;