From 53c5764af9cbd3d9f380f6f37b6b5c813718a8a2 Mon Sep 17 00:00:00 2001
From: melnikga <melnik.goshan2013@gmail.com>
Date: Tue, 23 Apr 2024 14:38:02 +0400
Subject: [PATCH 1/2] The console is shifted under the editor

---
 components/Editor/index.tsx |  23 ++++++--
 components/Tracer/index.tsx | 104 ++++++------------------------------
 2 files changed, 34 insertions(+), 93 deletions(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 545f6a7..cb922cd 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -32,6 +32,8 @@ import { Tracer } from 'components/Tracer'
 import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
 import { cn } from '../../util/styles'
 
+import Console from './Console'
+
 import { ArgumentsHelperModal } from './ArgumentsHelperModal'
 import { registerCairoLanguageSupport } from './cairoLangConfig'
 import EditorControls from './EditorControls'
@@ -478,10 +480,23 @@ const Editor = ({ readOnly = false }: Props) => {
                 </div>
               )}
             </div>
-            <div className={cn('h-[22vh] border-r border-t bg-red-300')}>
-              {/* <div className=" border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 flex-none md:border-r justify-between"> */}
-              Console
-              {/* </div> */}
+            <div
+              className={cn(
+                'h-[22vh] border-r border-t pane pane-light overflow-auto pb-4',
+              )}
+            >
+              <div className="px-4">
+                <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+                  <div
+                    className={cn(
+                      'text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
+                    )}
+                  >
+                    Console
+                  </div>
+                </nav>
+              </div>
+              <Console />
             </div>
           </div>
 
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index 6a375cd..4e2188e 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -1,13 +1,5 @@
-import {
-  memo,
-  useContext,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react'
-
-import { Priority, useRegisterActions } from 'kbar'
+import { memo, useContext, useEffect, useReducer, useRef } from 'react'
+
 import ReactTooltip from 'react-tooltip'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 
@@ -18,7 +10,6 @@ import {
 } from 'context/cairoVMApiContext'
 
 import { cn } from '../../util/styles'
-import Console from '../Editor/Console'
 
 import ExecutionStatus from './ExecutionStatus'
 
@@ -61,11 +52,6 @@ export interface TracerData {
   entryToSierraVarsMap: { [key: string]: SierraVariables }
 }
 
-enum IConsoleTab {
-  Console = 'debug-console',
-  DebugInfo = 'output',
-}
-
 export const Tracer = () => {
   const {
     executionState,
@@ -86,10 +72,6 @@ export const Tracer = () => {
       : null
   const currentCallstackEntry = tracerData?.callstack[executionTraceStepNumber]
 
-  const [selectedConsoleTab, setSelectedConsoleTab] = useState<IConsoleTab>(
-    IConsoleTab.Console,
-  )
-
   const [currentFocus, setCurrentFocus] = useReducer(
     (state: any, newIdx: number) => {
       state = {
@@ -156,35 +138,6 @@ export const Tracer = () => {
     }
   }
 
-  const actions = [
-    {
-      id: 'debugInfo',
-      name: 'Debug Info',
-      shortcut: ['d'],
-      keywords: 'Debug info',
-      section: 'Execution',
-      perform: () => {
-        setSelectedConsoleTab(IConsoleTab.DebugInfo)
-      },
-      subtitle: 'Switch to Debug Info',
-      priority: Priority.HIGH,
-    },
-    {
-      id: 'console',
-      name: 'Console',
-      shortcut: ['e'],
-      keywords: 'Console',
-      section: 'Execution',
-      perform: () => {
-        setSelectedConsoleTab(IConsoleTab.Console)
-      },
-      subtitle: 'Switch to Console',
-      priority: Priority.HIGH,
-    },
-  ]
-
-  useRegisterActions(actions, [setSelectedConsoleTab])
-
   return (
     <>
       <div className="border-t md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-6 h-14 flex-none">
@@ -220,52 +173,25 @@ export const Tracer = () => {
         </div>
       )}
 
-      <div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden h-[22vh]">
+      <div className="border-gray-200 border-t dark:border-black-500 flex-none pane pane-light overflow-auto pb-4 h-[22vh]">
         <div className="px-4">
-          <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
-            <button
+          <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+            <div
               className={cn(
-                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
-                {
-                  'border-indigo-600 text-gray-700':
-                    selectedConsoleTab === IConsoleTab.DebugInfo,
-                  'border-transparent text-gray-500':
-                    selectedConsoleTab !== IConsoleTab.DebugInfo,
-                },
+                'text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
               )}
-              onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
             >
-              Debug Info [d]
-            </button>
-            <button
-              onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
-              className={cn(
-                'hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin',
-                {
-                  'border-indigo-600 text-gray-700':
-                    selectedConsoleTab === IConsoleTab.Console,
-                  'border-transparent text-gray-500':
-                    selectedConsoleTab !== IConsoleTab.Console,
-                },
-              )}
-            >
-              Console [e]
-            </button>
+              Debug Info
+            </div>
           </nav>
         </div>
-        <div className="pane pane-light overflow-auto pb-4 grow h-[calc(100%_-_38px)]">
-          {selectedConsoleTab === IConsoleTab.Console && <Console />}
-
-          {selectedConsoleTab === IConsoleTab.DebugInfo && (
-            <DebugInfoTab
-              trace={trace}
-              currentTraceEntry={currentTraceEntry}
-              executionTraceStepNumber={executionTraceStepNumber}
-              currentCallstackEntry={currentCallstackEntry}
-              handleRegisterPointerClick={handleRegisterPointerClick}
-            />
-          )}
-        </div>
+        <DebugInfoTab
+          trace={trace}
+          currentTraceEntry={currentTraceEntry}
+          executionTraceStepNumber={executionTraceStepNumber}
+          currentCallstackEntry={currentCallstackEntry}
+          handleRegisterPointerClick={handleRegisterPointerClick}
+        />
       </div>
     </>
   )

From 569c72da192a890dc655c58a7602eb7ef0f94ac6 Mon Sep 17 00:00:00 2001
From: melnikga <melnik.goshan2013@gmail.com>
Date: Tue, 23 Apr 2024 15:19:40 +0400
Subject: [PATCH 2/2] Fixed the vertical shrinking problem

---
 components/Editor/index.tsx | 2 +-
 styles/globals.css          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index cb922cd..b71aba3 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -438,7 +438,7 @@ const Editor = ({ readOnly = false }: Props) => {
                         onChange={handleCairoCodeChange}
                         language={'cairo'}
                         className={cn(
-                          'code-editor whitespace-pre-wrap overflow-hidden',
+                          'code-editor whitespace-pre-wrap overflow-hidden p-0 m-0 w-full h-full absolute top-0 left-0',
                           {
                             'with-numbers': !isBytecode,
                           },
diff --git a/styles/globals.css b/styles/globals.css
index c3b7355..4bb500f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,6 +10,7 @@ html {
  * Code editor
  */
 .code-editor {
+  max-height: 100% !important;
   @apply font-mono text-base md:text-tiny leading-4;
 }