Add background image and update Editor theme

- Introduced a background image in the main application layout for enhanced visual appeal.
- Updated the Editor component to use a transparent theme for improved aesthetics.
- Cleaned up the App component by removing unnecessary padding in the editor container.

Author: souravrax

src/app/App.tsx

@@ -45,7 +45,7 @@ const App = () => {
     <div className="flex flex-col h-screen w-full p-4 gap-4">
       <NavBar />
       <div className="flex-1 w-full min-h-0 flex gap-4">
-        <div className="w-[60%] rounded-lg overflow-hidden border p-1">
+        <div className="w-[60%] rounded-lg overflow-hidden border">
           <Suspense fallback={<div>Loading...</div>}>
             <Editor />
           </Suspense>

src/assets/background.png

@@ -1,9 +1,79 @@
+import * as monaco from "monaco-editor";
 import { useState, useEffect, useRef, Suspense, SetStateAction } from "react";
 import MonacoEditor from "@monaco-editor/react";
 
 import languageToSyntax from "../assets/mapLanguageToSyntax.json";
 import { useAppSettings, useCodeEditor } from "@/store/store";
 import { useTheme } from "@/context/ThemeProvider";
+import { loader } from "@monaco-editor/react";
+
+loader.config({ monaco });
+
+monaco.editor.defineTheme("transparent", {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      background: "00000000",
+    } as any,
+    {
+      token: "comment",
+      foreground: "6a9955",
+    },
+    {
+      token: "string",
+      foreground: "ce9178",
+    },
+    {
+      token: "number",
+      foreground: "b5cea8",
+    },
+    {
+      token: "keyword",
+      foreground: "569cd6",
+    },
+    {
+      token: "type",
+      foreground: "4ec9b0",
+    },
+    {
+      token: "delimiter",
+      foreground: "d4d4d4",
+    },
+    {
+      token: "tag",
+      foreground: "569cd6",
+    },
+    {
+      token: "attribute.name",
+      foreground: "9cdcfe",
+    },
+    {
+      token: "attribute.value",
+      foreground: "ce9178",
+    },
+    {
+      token: "operator",
+      foreground: "d4d4d4",
+    },
+  ],
+  colors: {
+    "editor.background": "#00000000",
+    "editor.foreground": "#d4d4d4",
+    "editor.lineHighlightBackground": "#ffffff1a",
+    "editorCursor.foreground": "#d4d4d4",
+    "editorWhitespace.foreground": "#ffffff1a",
+    "editorIndentGuide.background": "#ffffff1a",
+    "editorIndentGuide.activeBackground": "#ffffff33",
+    "editor.selectionBackground": "#264f78",
+
+    "minimap.background": "#00000000",
+    "minimap.selectionHighlight": "#264f7880",
+    "minimapSlider.background": "#ffffff20",
+    "minimapSlider.hoverBackground": "#ffffff33",
+    "minimapSlider.activeBackground": "#ffffff44",
+  },
+});
 
 const Editor = () => {
   const { resolvedTheme: theme } = useTheme();
@@ -22,9 +92,9 @@ const Editor = () => {
   const resizeObserver = useRef<ResizeObserver | null>(null);
   const [editorOptions, setEditorOptions] = useState({});
   const execute = useCodeEditor((s) => s.execute);
-  const code = useCodeEditor(s => s.code);
-  const language = useCodeEditor(s => s.language);
-  const setCode = useCodeEditor(s => s.setCode);
+  const code = useCodeEditor((s) => s.code);
+  const language = useCodeEditor((s) => s.language);
+  const setCode = useCodeEditor((s) => s.setCode);
 
   const editorDidMount = (editor: any, monaco: any) => {
     editor.onKeyDown((event: any) => {
@@ -104,9 +174,11 @@ const Editor = () => {
             language={
               languageToSyntax[language as keyof typeof languageToSyntax]
             }
-            theme={`vs-${theme}`}
+            theme={`transparent`}
             value={code}
-            options={editorOptions}
+            options={{
+              ...editorOptions,
+            }}
             onChange={(newCode, event) => {
               setCode(newCode ?? "");
             }}

src/components/Editor.tsx

@@ -5,9 +5,17 @@ import { HashRouter, Routes, Route } from "react-router";
 import App from "./app/App";
 import { Toaster } from "./components/ui/sonner";
 import { ThemeProvider } from "./context/ThemeProvider";
+import BGImage from "@/assets/background.png";
 
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider>
+    <div className="h-screen w-screen absolute left-0 top-0 -z-10 overflow-hidden">
+      <img
+        className="absolute left-0 right-0 top-0 bottom-0 bg-cover -z-10"
+        src={BGImage}
+        alt="background-image"
+      />
+    </div>
     <HashRouter>
       <Routes>
         <Route index element={<App />} />