From 7639686cbc6907b9cf1513238138647f45cf3855 Mon Sep 17 00:00:00 2001
From: Pranav-0440 <pranavghorpade61@gmail.com>
Date: Thu, 26 Feb 2026 19:39:47 +0530
Subject: [PATCH 1/5] feat: add toggle button to show/hide Monaco editor (#206)

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>
---
 src/App.tsx                      | 42 +++++++++++++++++---------------
 src/components/App/AppHeader.tsx | 13 +++++++++-
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e463efe9..3b0b6fe2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,10 +19,8 @@ import "./App.css";
 import AppFooter from "./components/App/AppFooter";
 import AppHeader from "./components/App/AppHeader";
 import { Container, Section, Bar } from "@column-resizer/react";
-import { RefreshCw } from "react-feather";
 import { decompressSharedTd } from "./share";
 import { editor } from "monaco-editor";
-import BaseButton from "./components/TDViewer/base/BaseButton";
 import ErrorDialog from "./components/Dialogs/ErrorDialog";
 
 const GlobalStateWrapper = () => {
@@ -46,7 +44,7 @@ const App: React.FC = () => {
   const context = useContext(ediTDorContext);
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const [doShowJSON, setDoShowJSON] = useState(false);
+  const [doShowJSON, setDoShowJSON] = useState(true);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
 
@@ -165,11 +163,19 @@ const App: React.FC = () => {
 
   return (
     <main className="flex max-h-screen w-screen flex-col">
-      <AppHeader></AppHeader>
+      <AppHeader
+        onToggleJSON={handleToggleJSON}
+        isJSONVisible={doShowJSON}
+      />
 
       <div className="">
         <Container className="height-adjust flex flex-col md:flex-row">
-          <Section minSize={550} className="w-full min-w-16 md:w-7/12">
+          <Section
+            minSize={550}
+            className={`w-full min-w-16 ${
+              doShowJSON ? "md:w-7/12" : "md:w-full"
+            }`}
+          >
             <div ref={tdViewerRef} className="h-full w-full">
               <TDViewer
                 onUndo={handleUndo}
@@ -179,23 +185,19 @@ const App: React.FC = () => {
             </div>
           </Section>
 
-          <Bar
-            size={7.5}
-            className="cursor-col-resize bg-gray-300 hover:bg-blue-500"
-          />
+          {doShowJSON && (
+            <>
+              <Bar
+                size={7.5}
+                className="cursor-col-resize bg-gray-300 hover:bg-blue-500"
+              />
 
-          <Section className="w-full md:w-5/12">
-            <JsonEditor editorRef={editorRef} />
-          </Section>
+              <Section className="w-full md:w-5/12">
+                <JsonEditor editorRef={editorRef} />
+              </Section>
+            </>
+          )}
 
-          <BaseButton
-            type="button"
-            className="fixed bottom-12 right-2 z-10 rounded-full bg-blue-500 p-4"
-            onClick={handleToggleJSON}
-            variant="empty"
-          >
-            <RefreshCw color="white" />
-          </BaseButton>
         </Container>
       </div>
       <div className="fixed bottom-0 w-screen">
diff --git a/src/components/App/AppHeader.tsx b/src/components/App/AppHeader.tsx
index 2974e581..4a99103c 100644
--- a/src/components/App/AppHeader.tsx
+++ b/src/components/App/AppHeader.tsx
@@ -26,6 +26,8 @@ import {
   Share,
   Link,
   Send,
+  Eye,
+  EyeOff,
 } from "react-feather";
 import editdorLogo from "../../assets/editdor.png";
 import ediTDorContext from "../../context/ediTDorContext";
@@ -49,7 +51,10 @@ const INVALID_TYPE_MESSAGE =
 const VALIDATION_FAILED_MESSAGE =
   "The Thing Model did not pass the JSON schema validation Please make sure the Thing Model is valid according to the JSON schema before contributing it to the catalog.";
 
-const AppHeader: React.FC = () => {
+const AppHeader: React.FC<{
+  onToggleJSON: () => void;
+  isJSONVisible: boolean;
+}> = ({ onToggleJSON, isJSONVisible }) => {
   const context = useContext(ediTDorContext);
   const td: ThingDescription = context.parsedTD;
   /** States*/
@@ -335,6 +340,12 @@ const AppHeader: React.FC = () => {
             <Settings />
             <div className="text-xs">Settings</div>
           </Button>
+          <Button onClick={onToggleJSON}>
+            {isJSONVisible ? <EyeOff /> : <Eye />}
+            <div className="text-xs">
+              {isJSONVisible ? "Hide Code" : "Show Code"}
+            </div>
+          </Button>
         </div>
       </header>
       <SendTDDialog ref={sendTdDialog} currentTdId={currentTdId} />

From 1cf9f08f07ef3fd05efbb69f59a7f0577ad20491 Mon Sep 17 00:00:00 2001
From: Pranav-0440 <pranavghorpade61@gmail.com>
Date: Thu, 26 Feb 2026 19:50:14 +0530
Subject: [PATCH 2/5] style: fix prettier formatting

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>
---
 src/App.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3b0b6fe2..30f2d875 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -163,10 +163,7 @@ const App: React.FC = () => {
 
   return (
     <main className="flex max-h-screen w-screen flex-col">
-      <AppHeader
-        onToggleJSON={handleToggleJSON}
-        isJSONVisible={doShowJSON}
-      />
+      <AppHeader onToggleJSON={handleToggleJSON} isJSONVisible={doShowJSON} />
 
       <div className="">
         <Container className="height-adjust flex flex-col md:flex-row">
@@ -197,7 +194,6 @@ const App: React.FC = () => {
               </Section>
             </>
           )}
-
         </Container>
       </div>
       <div className="fixed bottom-0 w-screen">

From 4e74c9afbfa4585add19b344f52fdbad96764bdc Mon Sep 17 00:00:00 2001
From: Pranav-0440 <pranavghorpade61@gmail.com>
Date: Fri, 27 Feb 2026 23:44:44 +0530
Subject: [PATCH 3/5] fix: preserve column-resizer functionality when toggling
 editor

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>
---
 src/App.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 30f2d875..010e7080 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -185,12 +185,18 @@ const App: React.FC = () => {
           {doShowJSON && (
             <>
               <Bar
-                size={7.5}
-                className="cursor-col-resize bg-gray-300 hover:bg-blue-500"
+                size={doShowJSON ? 7.5 : 0}
+                className={`cursor-col-resize bg-gray-300 hover:bg-blue-500 ${
+                  doShowJSON ? "" : "hidden"
+                }`}
               />
 
-              <Section className="w-full md:w-5/12">
-                <JsonEditor editorRef={editorRef} />
+              <Section
+                className={`w-full ${
+                  doShowJSON ? "md:w-5/12" : "md:w-0"
+                } overflow-hidden`}
+              >
+                {doShowJSON && <JsonEditor editorRef={editorRef} />}
               </Section>
             </>
           )}

From 439259b7871b6cd262d5351912ab1318c6a29bfb Mon Sep 17 00:00:00 2001
From: Pranav-0440 <pranavghorpade61@gmail.com>
Date: Thu, 26 Mar 2026 23:34:46 +0530
Subject: [PATCH 4/5] fix: restore resizable split bar after toggling Monaco
 editor visibility

---
 src/App.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 010e7080..504b1ca5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,6 +45,7 @@ const App: React.FC = () => {
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const [doShowJSON, setDoShowJSON] = useState(true);
+  const [containerKey, setContainerKey] = useState(0);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
 
@@ -74,6 +75,7 @@ const App: React.FC = () => {
 
   const handleToggleJSON = () => {
     setDoShowJSON((prev) => !prev);
+    setContainerKey((prev) => prev + 1);
   };
 
   useEffect(() => {
@@ -166,7 +168,7 @@ const App: React.FC = () => {
       <AppHeader onToggleJSON={handleToggleJSON} isJSONVisible={doShowJSON} />
 
       <div className="">
-        <Container className="height-adjust flex flex-col md:flex-row">
+        <Container key={containerKey} className="height-adjust flex flex-col md:flex-row">
           <Section
             minSize={550}
             className={`w-full min-w-16 ${

From 7d5937482f50e4186bc1a7ea3d4b3552c72075dc Mon Sep 17 00:00:00 2001
From: Pranav-0440 <pranavghorpade61@gmail.com>
Date: Thu, 26 Mar 2026 23:40:02 +0530
Subject: [PATCH 5/5] style: fix prettier formatting in App.tsx

---
 src/App.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 504b1ca5..b8b70054 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -168,7 +168,10 @@ const App: React.FC = () => {
       <AppHeader onToggleJSON={handleToggleJSON} isJSONVisible={doShowJSON} />
 
       <div className="">
-        <Container key={containerKey} className="height-adjust flex flex-col md:flex-row">
+        <Container
+          key={containerKey}
+          className="height-adjust flex flex-col md:flex-row"
+        >
           <Section
             minSize={550}
             className={`w-full min-w-16 ${