prettier goal display

client/src/components/infoview/goals.tsx

@@ -115,13 +115,14 @@ function Hyp({ hyp: h, mvarId }: HypProps) {
 interface GoalProps {
     goal: InteractiveGoal
     filter: GoalFilterState
+    showHints?: boolean
 }
 
 /**
  * Displays the hypotheses, target type and optional case label of a goal according to the
  * provided `filter`. */
 export const Goal = React.memo((props: GoalProps) => {
-    const { goal, filter } = props
+    const { goal, filter, showHints } = props
 
     const filteredList = getFilteredHypotheses(goal.hyps, filter);
     const hyps = filter.reverse ? filteredList.slice().reverse() : filteredList;
@@ -156,7 +157,7 @@ export const Goal = React.memo((props: GoalProps) => {
             <div className="hyp-group"><div className="hyp-group-title">Assumptions:</div>
             {assumptionHyps.map((h, i) => <Hyp hyp={h} mvarId={goal.mvarId} key={i} />)}</div> }
         {!filter.reverse && goalLi}
-        {hints}
+        {showHints && hints}
     </div>
 })
 

client/src/components/infoview/info.tsx

@@ -15,6 +15,7 @@ import { InteractiveGoal, InteractiveGoals } from './rpcApi';
 import { PanelWidgetDisplay } from '../../../../node_modules/lean4-infoview/src/infoview/userWidget'
 import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
 import { GoalsLocation, Locations, LocationsContext } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation';
+import { InteractiveCode } from '../../../../node_modules/lean4-infoview/src/infoview/interactiveCode'
 
 type InfoStatus = 'updating' | 'error' | 'ready';
 type InfoKind = 'cursor' | 'pin';
@@ -120,7 +121,10 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
                 <a className='link pointer dim' onClick={e => { e.preventDefault(); void triggerUpdate(); }}>{' '}Try again.</a>
             </div>}
         <LocationsContext.Provider value={locs}>
-            {goals && goals.goals.length > 0 && <Goal filter={goalFilter} key='mainGoal' goal={goals.goals[0]} />}
+            <div className="goals-section">
+                <div className="goals-section-title">Main Goal</div>
+                {goals && goals.goals.length > 0 && <Goal filter={goalFilter} key='mainGoal' goal={goals.goals[0]} showHints={true} />}
+            </div>
         </LocationsContext.Provider>
         {/* <FilteredGoals headerChildren='Expected type' key='term-goal'
             goals={termGoal !== undefined ? {goals: [{...termGoal, hints: []}]} : undefined} /> */}
@@ -150,7 +154,12 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
                 <div>Loading goal...</div>)}
         <AllMessages uri={pos.uri} />
         <LocationsContext.Provider value={locs}>
-            {goals && goals.goals.slice(1).map((goal, i) => <Goal filter={goalFilter} key={i} goal={goal} />)}
+            <div className="goals-section">
+                <div className="goals-section-title">Other Goals</div>
+
+                {goals && goals.goals.slice(1).map((goal, i) =>
+                  <details key={i}><summary><InteractiveCode fmt={goal.type} /></summary> <Goal filter={goalFilter} goal={goal} /></details>)}
+            </div>
         </LocationsContext.Provider>
     </>
 })

client/src/components/infoview/infoview.css

@@ -25,3 +25,8 @@
   font-family: var(--ff-primary);
   font-size: 1.2rem;
 }
+
+.goals-section-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+}