improved code

Author: programmer-rahul

app/components/code-capture/code-image-preview.tsx

@@ -18,7 +18,7 @@ export default function CodeImagePreview() {
           }}
         >
           <div
-            className="window flex flex-col bg-[#353742af] border rounded-md border-[#82738E]"
+            className="window flex flex-col border rounded-md border-[#82738E]"
             style={{
               width: windowWidth,
             }}

app/components/code-capture/controls/control-options.tsx

@@ -9,12 +9,15 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import useStore from "@/lib/store/store";
-import { setTheme } from "@/lib/editor/themes/change-theme";
 
 import themeList from "monaco-themes/themes/themelist.json";
 import editorLanguages from "@/lib/editor/languages/editor-languages";
+import useEditorTheme from "@/hooks/editor-theme";
 
 export default function ControlOptions() {
+  // hook
+  const { updateEditorWindowTheme } = useEditorTheme();
+
   // store
   const changeEditorTheme = useStore((state) => state.changeEditorTheme);
   const changeEditorLanguage = useStore((state) => state.changeEditorLanguage);
@@ -49,7 +52,7 @@ export default function ControlOptions() {
           <Select
             onValueChange={(value) => {
               changeEditorTheme(value);
-              setTheme(value);
+              updateEditorWindowTheme();
             }}
           >
             <SelectTrigger>

app/components/code-capture/preview/window-content.tsx

@@ -14,7 +14,7 @@ export default function WindowContent() {
       `;
 
   return (
-    <div className="content rounded-b-md opacity-90 h-60">
+    <div className="content rounded-b-md h-60">
       <MonacoEditor />
     </div>
   );

app/components/code-capture/preview/window-header.tsx

@@ -1,8 +1,19 @@
+import { cn } from "@/lib/utils";
 import WindowButtons from "./window-buttons";
+import useStore from "@/lib/store/store";
 
 export default function WindowHeader() {
+  const editorThemeColors = useStore((state) => state.editorThemeColors);
+
+  console.log("edit", editorThemeColors);
+
   return (
-    <div className="window-header rounded-t-md  flex justify-between w-full py-3 px-4 items-center">
+    <div
+      className="window-header rounded-t-md flex justify-between w-full py-3 px-4 items-center"
+      style={{
+        background: editorThemeColors["editor.background"],
+      }}
+    >
       <WindowButtons />
 
       <div className="window-title">

hooks/editor-theme.tsx

@@ -0,0 +1,19 @@
+import { applyTheme } from "@/lib/editor/themes/apply-theme";
+import useStore from "@/lib/store/store";
+
+export default function useEditorTheme() {
+    
+  const editorTheme = useStore((state) => state.editorTheme);
+  const editorThemeColors = useStore((state) => state.editorThemeColors);
+  const changeEditorThemeColors = useStore(
+    (state) => state.changeEditorThemeColors
+  );
+
+  const updateEditorWindowTheme = async () => {
+    const colors = await applyTheme(editorTheme);
+    changeEditorThemeColors(colors);
+    13;
+  };
+
+  return { updateEditorWindowTheme };
+}

lib/editor/themes/change-theme.ts renamed to lib/editor/themes/apply-theme.ts

@@ -1,21 +1,19 @@
 import { loader } from "@monaco-editor/react";
 
-const setTheme = async (themeName: string) => {
+const applyTheme = async (themeName: string) => {
   console.log(themeName);
   let themeData = await import(`monaco-themes/themes/${themeName}.json`);
-  themeData = { ...themeData };
 
   themeName &&
     loader.init().then((monaco) => {
       if (themeName.split(" ").length > 1) {
-        console.log("yes");
         themeName = themeName.split(" ")[0] + "-" + themeName.split(" ")[1];
       }
-      monaco.editor.defineTheme(themeName, themeData);
+      monaco.editor.defineTheme(themeName, { ...themeData });
       monaco.editor.setTheme(themeName);
     });
 
-  return { ...themeData };
+  return themeData.colors;
 };
 
-export { setTheme };
+export { applyTheme };

lib/monoco-editor.tsx

@@ -3,16 +3,16 @@
 import { Editor, MonacoDiffEditor } from "@monaco-editor/react";
 import React from "react";
 import useStore from "./store/store";
-import { setTheme } from "./editor/themes/change-theme";
-import { Languages } from "lucide-react";
+import useEditorTheme from "@/hooks/editor-theme";
 
 export default function MonacoEditor() {
   const editorRef = React.useRef<MonacoDiffEditor>(null);
 
+  const { updateEditorWindowTheme } = useEditorTheme();
+
   const windowWidth = useStore((state) => state.windowWidth);
   const changeWindowWidth = useStore((state) => state.changeWindowWidth);
 
-  const editorTheme = useStore((state) => state.editorTheme);
   const editorLanguage = useStore((state) => state.editorLanguage);
 
   // to adjust editor width based on its content
@@ -27,7 +27,7 @@ export default function MonacoEditor() {
     }
   };
 
-  console.log('changed language',editorLanguage);
+  console.log("changed language", editorLanguage);
 
   return (
     <Editor
@@ -41,11 +41,10 @@ export default function MonacoEditor() {
       theme="vs-dark"
       onMount={(editor) => {
         editorRef.current = editor;
-        setTheme(editorTheme);
+        updateEditorWindowTheme();
       }}
-      onChange={(editor, monaco) => {
+      onChange={() => {
         controlEditorWidth();
-        // detectModel()
       }}
       options={{
         lineNumbers: "off",

lib/store/slices/editor-slice.ts

@@ -0,0 +1,26 @@
+import EditorSlice from "@/lib/types/store/slices/editor-slice";
+import { SetState } from "@/lib/types/store/store";
+
+export default function createEditorSlice(set : SetState): EditorSlice {
+  return {
+    editorTheme: "Night Owl",
+    changeEditorTheme: (theme) =>
+      set(() => ({
+        editorTheme: theme,
+      })),
+
+    editorLanguage: "javascript",
+    changeEditorLanguage: (language) =>
+      set(() => ({
+        editorLanguage: language,
+      })),
+
+    editorThemeColors: {
+      "editor.background": "",
+    },
+    changeEditorThemeColors: (themeColors) =>
+      set(() => ({
+        editorThemeColors: themeColors,
+      })),
+  };
+}

lib/store/slices/window-slice.ts

@@ -0,0 +1,12 @@
+import WindowSlice from "@/lib/types/store/slices/window-slice";
+import { SetState } from "@/lib/types/store/store";
+
+export default function createWindowSlice(set: SetState): WindowSlice {
+  return {
+    windowWidth: 600,
+    changeWindowWidth: (newWidth) =>
+      set(() => ({
+        windowWidth: newWidth,
+      })),
+  };
+}

lib/store/store.tsx

@@ -1,34 +1,11 @@
 import { create } from "zustand";
-
-interface StoreStates {
-  windowWidth: number;
-  changeWindowWidth: (newWidth: number) => void;
-
-  editorTheme: string;
-  changeEditorTheme: (theme: string) => void;
-
-  editorLanguage: string;
-  changeEditorLanguage: (language: string) => void;
-}
+import createWindowSlice from "./slices/window-slice";
+import createEditorSlice from "./slices/editor-slice";
+import { StoreStates } from "../types/store/store";
 
 const useStore = create<StoreStates>()((set) => ({
-  windowWidth: 600,
-  changeWindowWidth: (newWidth) =>
-    set(() => ({
-      windowWidth: newWidth,
-    })),
-
-  editorTheme: "Night Owl",
-  changeEditorTheme: (theme) =>
-    set(() => ({
-      editorTheme: theme,
-    })),
-
-  editorLanguage: "javascript",
-  changeEditorLanguage: (language) =>
-    set(() => ({
-      editorLanguage: language,
-    })),
+  ...createWindowSlice(set),
+  ...createEditorSlice(set),
 }));
 
 export default useStore;

lib/types/store/slices/editor-slice.tsx

@@ -0,0 +1,14 @@
+export interface EditorThemeColors {
+  "editor.background": string;
+}
+
+export default interface EditorSlice {
+  editorTheme: string;
+  changeEditorTheme: (theme: string) => void;
+
+  editorLanguage: string;
+  changeEditorLanguage: (language: string) => void;
+
+  editorThemeColors: EditorThemeColors;
+  changeEditorThemeColors: (themeColors: EditorThemeColors) => void;
+}

lib/types/store/slices/window-slice.tsx

@@ -0,0 +1,4 @@
+export default interface WindowSlice {
+    windowWidth: number;
+    changeWindowWidth: (newWidth: number) => void;
+  }

lib/types/store/store.tsx

@@ -0,0 +1,12 @@
+import EditorSlice from "./slices/editor-slice";
+import WindowSlice from "./slices/window-slice";
+
+export type StoreStates = WindowSlice & EditorSlice;
+
+export type SetState = (
+  partial:
+    | StoreStates
+    | Partial<StoreStates>
+    | ((state: StoreStates) => StoreStates | Partial<StoreStates>),
+  replace?: boolean | undefined
+) => void;