move command line to bottom

client/src/components/infoview/goals.tsx

@@ -170,7 +170,7 @@ export const Goal = React.memo((props: GoalProps) => {
         {!commandLine && assumptionHyps.length > 0 &&
             <div className="hyp-group"><div className="hyp-group-title">Assumptions:</div>
             {assumptionHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}</div> }
-        {commandLine && commandLineMode && <CommandLine />}
+        {/* {commandLine && commandLineMode && <CommandLine />} */}
         {!filter.reverse && goalLi}
         {/* {showHints && hints} */}
     </div>

client/src/components/infoview/info.tsx

@@ -128,7 +128,7 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
           <div className="goals-section">
             { goals &&  goals.goals.length > 0 && <>
               <MainAssumptions filter={goalFilter} key='mainGoal' goals={goals.goals} />
-              <ProofDisplay proof={proof}/>
+              {/* <ProofDisplay proof={proof}/> */}
               <OtherGoals filter={goalFilter} goals={goals.goals} />
             </>}
           </div>

client/src/components/infoview/infoview.css

@@ -41,7 +41,7 @@
   padding: 0.5em;
   font-family: var(--ff-primary);
   border-radius: 0.2em;
-  margin: 0.2em 0;
+  margin: 0.2em 0 0;
 }
 
 .command-line form {

client/src/components/infoview/main.tsx

@@ -21,6 +21,20 @@ import { useAppDispatch, useAppSelector } from '../../hooks';
 import { levelCompleted, selectCompleted } from '../../state/progress';
 import { GameIdContext } from '../../App';
 import { InputModeContext } from '../Level';
+import { CommandLine } from './CommandLine';
+import Markdown from '../Markdown';
+import { LevelInfo } from '../../state/api';
+
+// The mathematical formulation of the statement, supporting e.g. Latex
+// It takes three forms, depending on the precence of name and description:
+// - Theorem xyz: description
+// - Theorem xyz
+// - Exercises: description
+function ExerciseStatement({data}) {
+  return <div className="exercise-statement"><Markdown>
+    {(data?.statementName ? `**Theorem** \`${data?.statementName}\`: ` : data?.descrText && "**Exercise**: ") + `${data?.descrText}` }
+  </Markdown></div>
+}
 
 // TODO: This is only used in `EditorInterface`
 // while `CommandLineInterface` has this copy-pasted in.
@@ -110,6 +124,7 @@ export function EditorInterface({data, codeviewRef, hidden, worldId, levelId, ed
   const { commandLineMode, setCommandLineMode } = React.useContext(InputModeContext)
 
   return <div className={hidden ? 'hidden' : ''}>
+    <ExerciseStatement data={data} />
     <div className={`statement ${commandLineMode ? 'hidden' : ''}`}><code>{data?.descrFormat}</code></div>
     <div ref={codeviewRef} className={'codeview'}></div>
     {editorConnection && <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />}
@@ -117,7 +132,7 @@ export function EditorInterface({data, codeviewRef, hidden, worldId, levelId, ed
   </div>
 }
 
-export function CommandLineInterface(props: {world: string, level: number}) {
+export function CommandLineInterface(props: {world: string, level: number, data: LevelInfo}) {
 
   const ec = React.useContext(EditorContext);
   const gameId = React.useContext(GameIdContext)
@@ -177,13 +192,18 @@ export function CommandLineInterface(props: {world: string, level: number}) {
   } else if (serverStoppedResult){
       ret = <div><p>{serverStoppedResult.message}</p><p className="error">{serverStoppedResult.reason}</p></div>
   } else {
-      ret = <div className="infoview vscode-light">
-          {completed && <div className="level-completed">Level completed! 🎉</div>}
-          <Infos />
+      //className="infoview vscode-light"
+      ret = <div className="commandline-interface">
+          {/* {completed && <div className="level-completed">Level completed! 🎉</div>} */}
+          <div className="content">
+            <ExerciseStatement data={props.data} />
+            <Infos />
+          </div>
+          <CommandLine />
       </div>
   }
 
-  return <div>
+  return <>
     {/* <button className="btn" onClick={handleUndo} disabled={!canUndo}><FontAwesomeIcon icon={faRotateLeft} /> Undo</button> */}
     <ConfigContext.Provider value={config}>
       <VersionContext.Provider value={serverVersion}>
@@ -196,7 +216,7 @@ export function CommandLineInterface(props: {world: string, level: number}) {
         </WithRpcSessions>
       </VersionContext.Provider>
     </ConfigContext.Provider>
-  </div>
+  </>
 
 
 }