Fullscreen height

components/Editor/EditorFooter.tsx

@@ -0,0 +1,53 @@
+import { useContext } from 'react'
+
+import cn from 'classnames'
+
+import { AppUiContext } from '../../context/appUiContext'
+import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import KBarButton from '../KBar/Button'
+import ThemeSelector from '../ThemeSelector'
+import ToggleFullScreen from '../ToggleFullScreen'
+import ToggleThreeColumnLayout from '../ToggleThreeColumnLayout'
+
+function EditorFooter() {
+  const { cairoLangCompilerVersion } = useContext(CairoVMApiContext)
+  const { isFullScreen } = useContext(AppUiContext)
+  return (
+    <div
+      className={cn(
+        'px-5 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
+        !isFullScreen && 'rounded-b-lg',
+      )}
+    >
+      <span>
+        {cairoLangCompilerVersion !== ''
+          ? `Cairo Compiler v${cairoLangCompilerVersion}`
+          : ' '}
+      </span>
+
+      {isFullScreen && (
+        <div className="flex items-center justify-end divide-x divide-gray-200 dark:divide-black-500">
+          <span className="pr-4">
+            Made with ❤️ by{' '}
+            <a
+              className="underline font-medium"
+              href="https://walnut.dev"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Walnut
+            </a>
+          </span>
+          <div className="items-center flex">
+            <KBarButton />
+            <ToggleFullScreen />
+            <ToggleThreeColumnLayout />
+            <ThemeSelector />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default EditorFooter

components/Editor/ExtraColumn.tsx

@@ -10,14 +10,12 @@ import Header from './Header'
 import { InstructionsTable } from './InstructionsTable'
 
 type ExtraColumnProps = {
-  cairoEditorHeight: number
   cairoCode: string
   highlightCode: (value: string, codeType: string | undefined) => string
   isBytecode: boolean
 }
 
 const ExtraColumn = ({
-  cairoEditorHeight,
   cairoCode,
   highlightCode,
   isBytecode,
@@ -34,17 +32,14 @@ const ExtraColumn = ({
 
   return (
     <div className="w-full md:w-1/3 flex flex-col">
-      <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r">
+      <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r flex-none">
         <Header
           codeType={codeType}
           onCodeTypeChange={({ value }) => setCodeType(value)}
           onlyDropDown
         />
       </div>
-      <div
-        className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
-        style={{ height: cairoEditorHeight }}
-      >
+      <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
         {codeType === CodeType.CASM ? (
           <InstructionsTable
             instructions={casmInstructions}

components/Editor/Header.tsx

@@ -1,5 +1,7 @@
 import { useMemo, useId } from 'react'
 
+import Image from 'next/image'
+import cairoLogo from 'public/cairo_logo.png'
 import Select, { OnChangeValue } from 'react-select'
 
 import { CodeType } from '../../context/appUiContext'
@@ -8,6 +10,7 @@ type Props = {
   codeType: string | undefined
   onCodeTypeChange: (option: OnChangeValue<any, any>) => void
   onlyDropDown?: boolean
+  withLogo?: boolean
 }
 
 const codeLangOptions = Object.keys(CodeType).map((lang) => ({
@@ -19,6 +22,7 @@ const EditorHeader = ({
   codeType,
   onCodeTypeChange,
   onlyDropDown = false,
+  withLogo = false,
 }: Props) => {
   const codeTypeValue = useMemo(
     () => ({
@@ -27,28 +31,35 @@ const EditorHeader = ({
     }),
     [codeType],
   )
-
   return (
-    <div className="flex justify-between items-center w-full">
-      {!onlyDropDown && (
-        <h3 className="font-semibold text-md hidden xl:inline-flex items-center">
-          <span>Cairo VM Playground</span>
-        </h3>
-      )}
+    <>
+      <div className={'flex justify-between items-center w-full'}>
+        {!onlyDropDown &&
+          (withLogo ? (
+            <div className="flex items-center text-lg font-semibold tracking-tight text-gray-900 dark:text-white">
+              <span className="pr-2">cairovm</span>
+              <Image src={cairoLogo} width={20} height={20} alt="cairo" />
+              <span className="pl-2">codes</span>
+            </div>
+          ) : (
+            <h3 className="font-semibold text-md hidden xl:inline-flex items-center">
+              <span>Cairo VM Playground</span>
+            </h3>
+          ))}
 
-      <div className="flex items-center justify-between w-full xl:w-auto z-20">
-        <Select
-          onChange={onCodeTypeChange}
-          options={codeLangOptions}
-          value={codeTypeValue}
-          isSearchable={false}
-          classNamePrefix="select"
-          menuPlacement="auto"
-          instanceId={useId()}
-        />
+        <div className="flex items-center ">
+          <Select
+            onChange={onCodeTypeChange}
+            options={codeLangOptions}
+            value={codeTypeValue}
+            isSearchable={false}
+            classNamePrefix="select"
+            menuPlacement="auto"
+            instanceId={useId()}
+          />
+        </div>
       </div>
-    </div>
+    </>
   )
 }
-
 export default EditorHeader

components/Editor/index.tsx

@@ -33,6 +33,7 @@ import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
 
 import { ArgumentsHelperModal } from './ArgumentsHelperModal'
 import EditorControls from './EditorControls'
+import EditorFooter from './EditorFooter'
 import ExtraColumn from './ExtraColumn'
 import Header from './Header'
 import { InstructionsTable } from './InstructionsTable'
@@ -45,8 +46,6 @@ type SCEditorRef = {
   _input: HTMLTextAreaElement
 } & RefObject<React.FC>
 
-const cairoEditorHeight = 350
-
 function isCommentLine(input: string) {
   return input.startsWith('// ')
 }
@@ -60,7 +59,6 @@ const Editor = ({ readOnly = false }: Props) => {
     executionState,
     executionPanicMessage,
     compileCairoCode,
-    cairoLangCompilerVersion,
     serializedOutput,
     casmInstructions,
     activeCasmInstructionIndex,
@@ -81,6 +79,8 @@ const Editor = ({ readOnly = false }: Props) => {
   const [showArgumentsHelper, setShowArgumentsHelper] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+  const { isFullScreen } = useContext(AppUiContext)
+
   useEffect(() => {
     const query = router.query
 
@@ -332,25 +332,33 @@ const Editor = ({ readOnly = false }: Props) => {
 
   return (
     <>
-      <div className="bg-gray-100 dark:bg-black-700 rounded-lg">
-        <div className="flex flex-col md:flex-row">
+      <div
+        className={cn(
+          'bg-gray-100 dark:bg-black-700 ',
+          !isFullScreen && 'rounded-lg',
+        )}
+      >
+        <div
+          className="flex flex-col md:flex-row"
+          style={{
+            height: isFullScreen ? 'calc(100vh - 42px)' : '70vh',
+          }}
+        >
           <div
             className={cn(
               'w-full md:w-1/2 flex flex-col',
               isThreeColumnLayout && 'md:w-1/3',
             )}
           >
-            <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r">
+            <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 flex-none md:border-r justify-between">
               <Header
                 codeType={codeType}
                 onCodeTypeChange={({ value }) => setCodeType(value)}
+                withLogo={isFullScreen}
               />
             </div>
 
-            <div
-              className="relative pane grow pane-light md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
-              style={{ height: cairoEditorHeight }}
-            >
+            <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
               {codeType === CodeType.CASM ? (
                 <InstructionsTable
                   instructions={casmInstructions}
@@ -404,27 +412,22 @@ const Editor = ({ readOnly = false }: Props) => {
           {isThreeColumnLayout && (
             <ExtraColumn
               cairoCode={cairoCode}
-              cairoEditorHeight={cairoEditorHeight}
               highlightCode={highlightCode}
               isBytecode={isBytecode}
             />
           )}
 
           <div
             className={cn(
-              'w-full md:w-1/2 flex flex-col',
+              'w-full md:w-1/2 flex flex-col justify-between',
               isThreeColumnLayout && 'md:w-1/3',
             )}
           >
-            <Tracer mainHeight={cairoEditorHeight} />
+            <Tracer />
           </div>
         </div>
 
-        <div className="rounded-b-lg py-2 px-4 border-t bg-gray-800 dark:bg-black-700 border-black-900/25 text-gray-400 dark:text-gray-600 text-xs">
-          {cairoLangCompilerVersion !== ''
-            ? `Cairo Compiler v${cairoLangCompilerVersion}`
-            : ' '}
-        </div>
+        <EditorFooter />
       </div>
       <ArgumentsHelperModal
         showArgumentsHelper={showArgumentsHelper}

components/KBar/Button.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
 
+import { RiCommandLine } from '@remixicon/react'
 import { useKBar } from 'kbar'
 
 import { isMac } from 'util/browser'
 
 import { Button } from 'components/ui'
-import { RiCommandLine } from '@remixicon/react'
 
 const KBarButton = () => {
   const { query } = useKBar()

components/Tracer/index.tsx

@@ -52,11 +52,7 @@ enum IConsoleTab {
   DebugInfo = 'output',
 }
 
-interface TracerProps {
-  mainHeight: number
-}
-
-export const Tracer = ({ mainHeight }: TracerProps) => {
+export const Tracer = () => {
   const {
     tracerData,
     breakPoints,
@@ -75,8 +71,6 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
     IConsoleTab.Console,
   )
 
-  const consoleHeight = 150
-
   const [currentFocus, setCurrentFocus] = useReducer(
     (state: any, newIdx: number) => {
       state = {
@@ -174,34 +168,33 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
 
   return (
     <>
-      <div className="flex-grow">
-        <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">
-          <ExecutionStatus
-            onStepIn={stepIn}
-            onStepOut={stepOut}
-            onContinueExecution={continueExecution}
+      <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">
+        <ExecutionStatus
+          onStepIn={stepIn}
+          onStepOut={stepOut}
+          onContinueExecution={continueExecution}
+        />
+      </div>
+
+      {tracerData && currentTraceEntry && trace && breakPoints && (
+        <div
+          ref={tableRef}
+          className={
+            'overflow-auto pane grow pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500'
+          }
+        >
+          <InstructionsTable
+            memory={tracerData.memory}
+            pcInstMap={tracerData.pcInstMap}
+            currentTraceEntry={currentTraceEntry}
+            currentFocus={currentFocus.idx}
+            breakpoints={breakPoints}
+            toogleBreakPoint={toogleBreakPoint}
           />
         </div>
-        {tracerData && currentTraceEntry && trace && breakPoints && (
-          <>
-            <div
-              ref={tableRef}
-              className="overflow-auto pane pane-light relative bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500"
-              style={{ height: mainHeight }}
-            >
-              <InstructionsTable
-                memory={tracerData.memory}
-                pcInstMap={tracerData.pcInstMap}
-                currentTraceEntry={currentTraceEntry}
-                currentFocus={currentFocus.idx}
-                breakpoints={breakPoints}
-                toogleBreakPoint={toogleBreakPoint}
-              />
-            </div>
-          </>
-        )}
-      </div>
-      <div className="border-gray-200 border-t">
+      )}
+
+      <div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden mb-[10px] h-[22vh]">
         <div className="px-4">
           <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
             <button
@@ -232,10 +225,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
             </button>
           </nav>
         </div>
-        <div
-          className="pane pane-light overflow-auto"
-          style={{ height: consoleHeight }}
-        >
+        <div className="pane pane-light overflow-auto pb-4 grow h-[90%]">
           {selectedConsoleTab === IConsoleTab.Console && <Console />}
 
           {selectedConsoleTab === IConsoleTab.DebugInfo && (