scroll to selected step

client/src/components/infoview/goals.tsx

@@ -235,7 +235,7 @@ export const OtherGoals = React.memo((props: GoalProps2) => {
   </>
 })
 
-
+// TODO: deprecated
 export const ProofDisplay = React.memo((props : ProofDisplayProps) => {
   const { proof } = props
   const steps = proof.match(/.+/g)

client/src/components/infoview/info.tsx

@@ -124,7 +124,6 @@ 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}/>
               <OtherGoals filter={goalFilter} goals={goals.goals} />
             </>}
           </div>

client/src/components/infoview/main.tsx

@@ -314,7 +314,7 @@ export function CommandLineInterface(props: {world: string, level: number, data:
     }
   }
 
-  function selectStep(line: number) {
+  function toggleSelectStep(line: number) {
     return (ev) => {
       if (selectedStep == line) {
         setSelectedStep(undefined)
@@ -326,6 +326,16 @@ export function CommandLineInterface(props: {world: string, level: number, data:
     }
   }
 
+  // Scroll to element if selection changes
+  React.useEffect(() => {
+    if (selectedStep) {
+      Array.from(proofPanelRef.current?.getElementsByClassName(`step-${selectedStep}`)).map((elem) => {
+        elem.scrollIntoView({block: "center"})
+      })
+    }
+  }, [selectedStep])
+
+
   const completed = useAppSelector(selectCompleted(gameId, props.world, props.level))
 
   /* Set up updates to the global infoview seither you solved the level with warnings or your last command contains a syntax error Lean can't parseate on editor events. */
@@ -378,7 +388,7 @@ export function CommandLineInterface(props: {world: string, level: number, data:
           </div>
         } else {
           return <>
-            <div className={'step' + (selectedStep == i ? ' selected' : '')} onClick={selectStep(i)}>
+            <div className={`step step-${i}` + (selectedStep == i ? ' selected' : '')} onClick={toggleSelectStep(i)}>
               <Command command={step.command} deleteProof={deleteProof(i)}/>
               <Errors errors={step.errors} commandLineMode={true}/>
               <GoalsTab proofStep={step}/>