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/App.jsx
+32
View File
@@ -54,6 +54,36 @@ export default function App() {
const tmDragY0 = useRef(0)
const tmDragH0 = useRef(0)
// Focus mode — collapses sidebar, bundles nav, terminal for distraction-free reading
const [focusMode, setFocusMode] = useState(false)
const focusSavedState = useRef(null)
const toggleFocusMode = useCallback(() => {
if (!focusMode) {
// Save current states then collapse everything
focusSavedState.current = { sidebarCollapsed, bundlesCollapsed, termCollapsed }
setSidebarCollapsed(true)
setBundlesCollapsed(true)
setTermCollapsed(true)
setFocusMode(true)
} else {
// Restore previous states
const saved = focusSavedState.current || {}
setSidebarCollapsed(saved.sidebarCollapsed ?? false)
setBundlesCollapsed(saved.bundlesCollapsed ?? false)
setTermCollapsed(saved.termCollapsed ?? false)
setFocusMode(false)
}
}, [focusMode, sidebarCollapsed, bundlesCollapsed, termCollapsed])
// If the user manually opens any panel while in focus mode, exit focus mode
// so the button icon reverts to "expand" (next click re-collapses everything)
useEffect(() => {
if (focusMode && (!sidebarCollapsed || !bundlesCollapsed || !termCollapsed)) {
setFocusMode(false)
}
}, [sidebarCollapsed, bundlesCollapsed, termCollapsed, focusMode])
// Track previous scenario id to teardown on switch
const prevActiveIdRef = useRef(null)
@@ -330,6 +360,8 @@ export default function App() {
isExamMode={!!examSession}
examProgress={examProgress}
totalExamWeight={totalExamWeight}
focusMode={focusMode}
onToggleFocus={toggleFocusMode}
/>
</div>
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;