ced4568/rootnode-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add focus mode to maximize scenario panel

Browse Source 
Signed-off-by: Abhinav Sinha <[email protected]>
This commit is contained in:
Abhinav Sinha
2026-06-18 01:30:39 +05:30
parent 09bd1b20da
commit 35dfeb7208
3 changed files with 107 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ScenarioPanel.jsx
+47 -1
View File
@@ -24,7 +24,7 @@ async function resetProgress(scope, opts) {
})
}
export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioStart, isExamMode, examProgress, totalExamWeight }) {
export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioStart, isExamMode, examProgress, totalExamWeight, focusMode, onToggleFocus }) {
const [tab, setTab] = useState('problem')
const [setupState, setSetupState] = useState('idle') // idle | running | done | error
const [validating, setValidating] = useState(false)
@@ -216,6 +216,29 @@ export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioSt
</div>
<div className={styles.titleRow}>
<div className={styles.scenarioTitle}>{scenario.title}</div>
{onToggleFocus && !isExamMode && (
<button
className={focusMode ? styles.focusBtnActive : styles.focusBtn}
onClick={onToggleFocus}
title={focusMode ? 'Exit focus mode' : 'Focus mode — hide sidebar, terminal & nav'}
>
{focusMode ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="4 14 10 14 10 20" />
<polyline points="20 10 14 10 14 4" />
<line x1="10" y1="14" x2="3" y2="21" />
<line x1="21" y1="3" x2="14" y2="10" />
</svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="15 3 21 3 21 9" />
<polyline points="9 21 3 21 3 15" />
<line x1="21" y1="3" x2="14" y2="10" />
<line x1="3" y1="21" x2="10" y2="14" />
</svg>
)}
</button>
)}
{isExamMode && scenario.progress?.started_at && (
<div className={styles.progressStats}>
<div className={styles.statItem}>
@@ -238,6 +261,29 @@ export default function ScenarioPanel({ scenario, onProgressUpdate, onScenarioSt
</div>
</div>
)}
{onToggleFocus && isExamMode && (
<button
className={focusMode ? styles.focusBtnActive : styles.focusBtn}
onClick={onToggleFocus}
title={focusMode ? 'Exit focus mode' : 'Focus mode — hide sidebar, terminal & nav'}
>
{focusMode ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="4 14 10 14 10 20" />
<polyline points="20 10 14 10 14 4" />
<line x1="10" y1="14" x2="3" y2="21" />
<line x1="21" y1="3" x2="14" y2="10" />
</svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<polyline points="15 3 21 3 21 9" />
<polyline points="9 21 3 21 3 15" />
<line x1="21" y1="3" x2="14" y2="10" />
<line x1="3" y1="21" x2="10" y2="14" />
</svg>
)}
</button>
)}
{scenario.progress?.status !== 'not_started' && scenario.progress?.attempts > 0 && (
<button
className={styles.resetBtn}
frontend/src/components/ScenarioPanel.module.css
+28
View File
@@ -128,6 +128,34 @@
background: var(--red-dim);
}
.focusBtn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 6px;
color: var(--text-3);
width: 28px;
height: 28px;
cursor: pointer;
align-self: center;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.focusBtn:hover {
color: var(--green);
border-color: color-mix(in srgb, var(--green) 40%, transparent);
background: var(--green-dim);
}
.focusBtnActive {
composes: focusBtn;
color: var(--green);
border-color: color-mix(in srgb, var(--green) 40%, transparent);
background: var(--green-dim);
}
.completedBanner {
margin-top: 8px;
font-size: 12px;