added themes, extension manifest and layout splits

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

@@ -1,23 +1,55 @@
 import { DockviewReact, IDockviewPanelProps } from "dockview";
 import { useGridLayoutPersistance } from "./hooks/useGridLayoutPersistance";
-import { FC, createElement, useMemo } from "react";
+import { FC, createElement, useCallback, useMemo } from "react";
 import { GridLayoutComponentProps } from "../../types";
+import { GridLayoutItemWrapper } from "../GridLayoutItemWrapper";
+import { splitLayoutVertical } from "./utils/splitLayoutVertical";
+import { splitLayoutHorizontal } from "./utils/splitLayoutHorizontal";
+import styles from "./styles.module.scss";
 
 export interface GridLayoutProps {
   component: FC<GridLayoutComponentProps>;
 }
 
+interface DefaultLayoutProps {
+  panelProps: IDockviewPanelProps<{ title: string }>;
+  component: FC<GridLayoutComponentProps>;
+}
+const DefaultLayout = ({ component, panelProps }: DefaultLayoutProps) => {
+  const splitVertical = useCallback(() => {
+    splitLayoutVertical(panelProps.api.id, panelProps.containerApi);
+  }, [panelProps.api.id, panelProps.containerApi]);
+
+  const splitHorizontal = useCallback(() => {
+    splitLayoutHorizontal(panelProps.api.id, panelProps.containerApi);
+  }, [panelProps.api.id, panelProps.containerApi]);
+
+  const remove = useCallback(() => {
+    panelProps.api.close();
+  }, [panelProps.api]);
+
+  return (
+    <GridLayoutItemWrapper
+      splitVertical={splitVertical}
+      splitHorizontal={splitHorizontal}
+      remove={remove}
+    >
+      {createElement(component, {
+        id: panelProps.api.id,
+        title: panelProps.params.title,
+      })}
+    </GridLayoutItemWrapper>
+  );
+};
+
 export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
   const { onReady } = useGridLayoutPersistance();
 
   const components = useMemo(
     () => ({
-      default: (props: IDockviewPanelProps<{ title: string }>) => {
-        return createElement(component, {
-          id: props.api.id,
-          title: props.params.title,
-        });
-      },
+      default: (props: IDockviewPanelProps<{ title: string }>) => (
+        <DefaultLayout panelProps={props} component={component} />
+      ),
     }),
     [component]
   );
@@ -26,7 +58,7 @@ export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
     <DockviewReact
       components={components}
       onReady={onReady}
-      className="dockview-theme-abyss"
+      className={styles.layout}
     />
   );
 };

src/modules/layout/components/GridLayout/styles.module.scss

@@ -0,0 +1,11 @@
+.layout {
+  :global {
+    .vertical .sash {
+      border-top: 1px solid var(--color-border);
+    }
+
+    .horizontal .sash {
+      border-right: 1px solid var(--color-border);
+    }
+  }
+}

src/modules/layout/components/GridLayout/utils/createDefaultLayout.ts

@@ -2,15 +2,15 @@ import { DockviewApi } from "dockview";
 import { v4 } from "uuid";
 
 export const createDefaultLayout = (api: DockviewApi) => {
-  api.addPanel({
+  const panel = api.addPanel({
     id: v4(),
     component: "default",
-    title: "New editor",
+    title: "",
     params: {
-      title: "Panel 1",
+      title: "",
     },
   });
 
   // panel.group.locked = true;
-  // panel.group.header.hidden = true;
+  panel.group.header.hidden = true;
 };

src/modules/layout/components/GridLayout/utils/splitLayoutHorizontal.ts

@@ -0,0 +1,23 @@
+import { DockviewApi } from "dockview";
+import { v4 } from "uuid";
+
+export const splitLayoutHorizontal = (
+  referencePanel: string,
+  api: DockviewApi
+) => {
+  const panel = api.addPanel({
+    id: v4(),
+    component: "default",
+    title: "",
+    params: {
+      title: "",
+    },
+    position: {
+      referencePanel,
+      direction: "below",
+    },
+  });
+
+  // panel.group.locked = true;
+  panel.group.header.hidden = true;
+};

src/modules/layout/components/GridLayout/utils/splitLayoutVertical.ts

@@ -0,0 +1,23 @@
+import { DockviewApi } from "dockview";
+import { v4 } from "uuid";
+
+export const splitLayoutVertical = (
+  referencePanel: string,
+  api: DockviewApi
+) => {
+  const panel = api.addPanel({
+    id: v4(),
+    component: "default",
+    title: "",
+    params: {
+      title: "",
+    },
+    position: {
+      referencePanel,
+      direction: "right",
+    },
+  });
+
+  // panel.group.locked = true;
+  panel.group.header.hidden = true;
+};

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

@@ -0,0 +1,33 @@
+import { FC, PropsWithChildren } from "react";
+import styles from "./styles.module.scss";
+
+type GridLayoutItemWrapperProps = PropsWithChildren & {
+  splitVertical: () => void;
+  splitHorizontal: () => void;
+  remove: () => void;
+};
+
+const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
+  children,
+  splitVertical,
+  splitHorizontal,
+  remove,
+}) => (
+  <div className={styles.wrapper}>
+    <div className={styles.menu}>
+      <button onClick={splitVertical} role="button">
+        v
+      </button>
+      <button onClick={splitHorizontal} role="button">
+        h
+      </button>
+      <button onClick={remove} role="button">
+        d
+      </button>
+    </div>
+
+    {children}
+  </div>
+);
+
+export { GridLayoutItemWrapper };

src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

src/styles/_dark.scss

@@ -0,0 +1,5 @@
+:root {
+  --color-border: #333333;
+  --color-background: #111111;
+  --color-text: #ffffff;
+}

src/styles/main.scss

@@ -1,9 +1,13 @@
 @import "dockview/dist/styles/dockview.css";
+@import "reset.scss";
+@import "dark.scss";
 
 html,
 body {
   padding: 0;
   margin: 0;
+  color: var(--color-text);
+  background: var(--color-background);
 }
 
 #root {