From c0256884cea6c335389c471847a05e23f92d971d Mon Sep 17 00:00:00 2001
From: gigbeeAtReelo <girish.bari@reelo.io>
Date: Fri, 7 Nov 2025 18:12:55 +0000
Subject: [PATCH] Add beautify btn to format the code

---
 app/components/CodeEditor/CodeEditor.tsx |  9 +++++++++
 app/components/MyBtn/MyBtn.tsx           |  2 +-
 app/styles/theme.ts                      | 13 +++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
index 32870c3..3e47e99 100644
--- a/app/components/CodeEditor/CodeEditor.tsx
+++ b/app/components/CodeEditor/CodeEditor.tsx
@@ -97,12 +97,14 @@ const useCodePersistence = (
 // EditorControls component for the buttons section
 const EditorControls = ({
   handleValidate,
+  handleBeautify,
   isValidating,
   resetCode,
   nextStepPath,
   outputResult,
 }: {
   handleValidate: () => void;
+  handleBeautify: () => void;
   isValidating: boolean;
   resetCode: () => void;
   nextStepPath: string | undefined;
@@ -126,6 +128,10 @@ const EditorControls = ({
         <MyBtn onClick={resetCode} variant="error">
           Reset
         </MyBtn>
+
+        <MyBtn onClick={handleBeautify} variant="secondary">
+          Beautify
+        </MyBtn>
       </Flex>
       {!nextStepPath ? (
         <CertificateButton />
@@ -208,6 +214,8 @@ export default function CodeEditor({
     dispatchOutput({ type: "RESET" });
   };
 
+  const handleBeautify = () => tryFormattingCode(editorRef, setCodeString);
+
   const handleEditorMount = (editor: any, monaco: Monaco) => {
     setMonaco(monaco);
 
@@ -237,6 +245,7 @@ export default function CodeEditor({
       </div>
       <EditorControls
         handleValidate={handleValidate}
+        handleBeautify={handleBeautify}
         isValidating={isValidating}
         resetCode={resetCode}
         nextStepPath={nextStepPath}
diff --git a/app/components/MyBtn/MyBtn.tsx b/app/components/MyBtn/MyBtn.tsx
index f8d135c..8c64047 100644
--- a/app/components/MyBtn/MyBtn.tsx
+++ b/app/components/MyBtn/MyBtn.tsx
@@ -10,7 +10,7 @@ export default function MyBtn({
   size = "xs",
 }: {
   children: React.ReactNode;
-  variant: "success" | "error" | "default";
+  variant: "success" | "error" | "default" | "secondary";
   onClick: () => void;
   isDisabled?: boolean;
   tooltip?: string;
diff --git a/app/styles/theme.ts b/app/styles/theme.ts
index 4ab7f90..ec1f365 100644
--- a/app/styles/theme.ts
+++ b/app/styles/theme.ts
@@ -15,6 +15,19 @@ const Button = {
         bg: "hsl(var(--primary) / 0.6)",
       },
     },
+    secondary: {
+      color: "hsl(var(--text))",
+      bg: "hsl(var(--background2))",
+      borderColor: "hsl(var(--border-color))",
+      borderWidth: "1px",
+      _hover: {
+        bg: "hsl(var(--primary) / 0.12)",
+        borderColor: "hsl(var(--primary))",
+      },
+      _active: {
+        bg: "hsl(var(--primary) / 0.2)",
+      },
+    },
     success: {
       color: "hsl(var(--success))",
       borderColor: "hsl(var(--success))",