Merge branch 'feature/migration-to-scss' of https://github.com/hydralauncher/hydra into feature/migration-to-scss

src/renderer/src/pages/editor/editor.scss

@@ -14,5 +14,18 @@
 .editor-header-title {
   font-size: 7px;
   font-weight: 500;
-  color: $body-color;
+  color: globals.$body-color;
+  display: flex;
+  align-items: center;
+  gap: globals.$spacing-unit;
+  height: 100%;
+}
+
+.editor-header-status {
+  width: globals.$spacing-unit;
+  height: globals.$spacing-unit;
+  background-color: globals.$body-color;
+  border-radius: 50%;
+  display: inline-flex;
+  align-self: center;
 }

src/renderer/src/pages/editor/editor.tsx

@@ -1,18 +1,44 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { vars } from "@renderer/theme.css";
 import "./editor.scss";
+import { Editor as Monaco } from "@monaco-editor/react";
 
 export default function Editor() {
+  const [code, setCode] = useState("");
+  const [currentCode, setCurrentCode] = useState("");
+  const [updated, setUpdated] = useState(true);
+
   useEffect(() => {
     console.log("spectre");
   }, []);
 
+  useEffect(() => {
+    setUpdated(currentCode === code);
+  }, [code, currentCode]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === "s") {
+        e.preventDefault();
+        setCode(currentCode);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentCode]);
+
+  const handleEditorChange = (value: string | undefined) => {
+    setCurrentCode(value || "");
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className="editor-header">
         <div className="editor-header-title">
           <h1>CSS Editor</h1>
+          {!updated && <div className="editor-header-status" />}
         </div>
       </div>
 
@@ -27,7 +53,16 @@ export default function Editor() {
           justifyContent: "center",
         }}
       >
-        <p>spectre</p>
+        <Monaco
+          height="100%"
+          width="100%"
+          defaultLanguage="css"
+          theme="vs-dark"
+          value={currentCode}
+          onChange={handleEditorChange}
+          defaultValue={code}
+          className="editor-monaco"
+        />
       </div>
     </SkeletonTheme>
   );