added simple modal dialog

src/modules/layout/components/GridLayout/index.tsx

@@ -6,6 +6,7 @@ import { GridLayoutItemWrapper } from "../GridLayoutItemWrapper";
 import { splitLayoutVertical } from "./utils/splitLayoutVertical";
 import { splitLayoutHorizontal } from "./utils/splitLayoutHorizontal";
 import styles from "./styles.module.scss";
+import { useSettings } from "~/modules/settings/context/SettingsContext";
 
 export interface GridLayoutProps {
   component: FC<GridLayoutComponentProps>;
@@ -22,6 +23,8 @@ const DefaultLayout = ({
   panelProps,
   persistLayout,
 }: DefaultLayoutProps) => {
+  const { show: showSettings } = useSettings();
+
   const splitVertical = useCallback(() => {
     splitLayoutVertical(panelProps.api.id, panelProps.containerApi);
   }, [panelProps.api.id, panelProps.containerApi]);
@@ -54,6 +57,7 @@ const DefaultLayout = ({
       remove={remove}
       locked={locked}
       lock={lock}
+      showSettings={showSettings}
     >
       {createElement(component, {
         id: panelProps.api.id,

src/modules/layout/components/GridLayoutItemWrapper/index.tsx

@@ -14,12 +14,14 @@ type GridLayoutItemWrapperProps = PropsWithChildren & {
   remove: () => void;
   locked: boolean;
   lock: () => void;
+  showSettings: () => void;
 };
 
 const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
   children,
   splitVertical,
   splitHorizontal,
+  showSettings,
   remove,
   locked,
   lock,
@@ -33,6 +35,7 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
       >
         <SplitVertical />
       </IconButton>
+
       <IconButton
         onClick={splitHorizontal}
         role="button"
@@ -41,6 +44,14 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
         <SplitHorizontal />
       </IconButton>
 
+      <IconButton
+        onClick={showSettings}
+        role="button"
+        className={styles.button}
+      >
+        S
+      </IconButton>
+
       {!locked && (
         <IconButton onClick={remove} role="button" className={styles.button}>
           <DeleteIcon />