added fonts and icons

src/assets/images/delete.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
+	<path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+</svg>

src/assets/images/split-horizontal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
+	<path d="M220 486h520V236H220v250Zm0 60q-24 0-42-18t-18-42V236q0-24 18-42t42-18h520q24 0 42 18t18 42v250q0 24-18 42t-42 18H220Zm0 370h520V666H220v250Zm0 60q-24 0-42-18t-18-42V666q0-24 18-42t42-18h520q24 0 42 18t18 42v250q0 24-18 42t-42 18H220Zm0-490V236v250Zm0 430V666v250Z" />
+</svg>

src/assets/images/split-vertical.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
+	<path d="M570 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h210q24 0 42 18t18 42v600q0 24-18 42t-42 18H570Zm0-660v600h210V276H570ZM180 936q-24 0-42-18t-18-42V276q0-24 18-42t42-18h210q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-660v600h210V276H180Zm600 0H570h210Zm-390 0H180h210Z" />
+</svg>

src/components/buttons/IconButton/index.tsx

@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import { FC } from "react";
+
+import styles from "./styles.module.scss";
+
+type IconButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+const IconButton: FC<IconButtonProps> = ({ children, className, ...props }) => (
+  <button {...props} className={classNames(styles.button, className)}>
+    {children}
+  </button>
+);
+
+export { IconButton };

src/components/buttons/IconButton/styles.module.scss

@@ -0,0 +1,8 @@
+.button {
+  background: none;
+  border: none;
+  color: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

src/main.tsx

@@ -3,9 +3,12 @@ import ReactDOM from "react-dom/client";
 import { Editor } from "~/pages/editor";
 
 import "./styles/main.scss";
+import { ThemeProvider } from "./modules/theme/containers/ThemeProvider";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <Editor />
+    <ThemeProvider>
+      <Editor />
+    </ThemeProvider>
   </React.StrictMode>
 );

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

@@ -1,5 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
+import { IconButton } from "~/components/buttons/IconButton";
+
+import DeleteIcon from "~/assets/images/delete.svg";
+import SplitVertical from "~/assets/images/split-vertical.svg";
+import SplitHorizontal from "~/assets/images/split-horizontal.svg";
+
+console.log(DeleteIcon);
 
 type GridLayoutItemWrapperProps = PropsWithChildren & {
   splitVertical: () => void;
@@ -15,15 +22,23 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
 }) => (
   <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>
+      <IconButton
+        onClick={splitVertical}
+        role="button"
+        className={styles.button}
+      >
+        <SplitVertical />
+      </IconButton>
+      <IconButton
+        onClick={splitHorizontal}
+        role="button"
+        className={styles.button}
+      >
+        <SplitHorizontal />
+      </IconButton>
+      <IconButton onClick={remove} role="button" className={styles.button}>
+        <DeleteIcon />
+      </IconButton>
     </div>
 
     {children}

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

@@ -9,3 +9,20 @@
   top: 0;
   right: 0;
 }
+
+.button {
+  opacity: 0.3;
+  cursor: pointer;
+  padding: 4px 2px;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+}

src/modules/layout/editor/containers/MarkdownEditorContainer/hooks/usePersistedValue.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-const prefix = "VALUE__";
-
 const safelyGetStringValue = (key: string) => {
   try {
     return localStorage.getItem(key) ?? "";
@@ -19,7 +17,8 @@ const safelySetStringValue = (key: string, value: string) => {
 };
 
 export const usePersistedValue = (
-  id: string
+  id: string,
+  prefix: string
 ): [string, (val: string) => void] => {
   const key = `${prefix}${id}`;
   const [value, setValue] = useState(safelyGetStringValue(key));

src/modules/layout/editor/containers/MarkdownEditorContainer/index.tsx

@@ -11,7 +11,7 @@ interface MarkdownEditorContainerProps {
 export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
 }) => {
-  const [value, setValue] = usePersistedValue(id);
+  const [value, setValue] = usePersistedValue(id, "MarkdownEditorContainer");
 
   return (
     <div className={styles.editor}>

src/modules/theme/constants/fonts.ts

@@ -0,0 +1,3 @@
+export enum FontFamily {
+  Inter = "inter",
+}

src/modules/theme/constants/theme.ts

@@ -0,0 +1,3 @@
+export enum Theme {
+  Dark = "dark",
+}

src/modules/theme/containers/ThemeProvider/index.tsx

@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren, useEffect, useState } from "react";
+import { ThemeContext, defaultTheme } from "../../context/ThemeContext";
+
+type ThemeProviderProps = PropsWithChildren;
+
+const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
+  const [theme] = useState(defaultTheme);
+
+  useEffect(() => {
+    document.body.classList.add(`font-family-${theme.font}`);
+    return () => document.body.classList.remove(`font-family-${theme.font}`);
+  }, [theme.font]);
+
+  useEffect(() => {
+    document.body.classList.add(`theme-${theme.theme}`);
+    return () => document.body.classList.remove(`theme-${theme.theme}`);
+  }, [theme.theme]);
+
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+};
+
+export { ThemeProvider };

src/modules/theme/context/ThemeContext/index.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { Theme } from "../../constants/theme";
+import { FontFamily } from "../../constants/fonts";
+
+export const defaultTheme = {
+  theme: Theme.Dark,
+  font: FontFamily.Inter,
+};
+
+export const ThemeContext = createContext(defaultTheme);
+
+export const useTheme = () => useContext(ThemeContext);

src/styles/_dark.scss

@@ -2,4 +2,5 @@
   --color-border: #333333;
   --color-background: #111111;
   --color-text: #ffffff;
+  --color-link: #25bfe6;
 }

src/styles/_fonts.scss

@@ -0,0 +1,4 @@
+body.font-family-inter {
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+  font-family: "Inter", sans-serif;
+}

src/styles/main.scss

@@ -1,5 +1,6 @@
 @import "dockview/dist/styles/dockview.css";
 @import "reset.scss";
+@import "fonts.scss";
 @import "dark.scss";
 
 html,
@@ -14,3 +15,13 @@ body {
   height: 100vh;
   overflow: hidden;
 }
+
+a {
+  color: var(--color-link);
+}
+
+ul {
+  li p {
+    margin: 0.5em 0;
+  }
+}