feat(terminal): collapsible top navigation in fullscreen mode #82

Merged

ashraf merged 1 commit from development_terminal_fullscreen_collapsible_nav into development

2026-05-03 11:06:38 +00:00

ashraf commented

2026-05-03 11:03:56 +00:00

Member

Summary

Replace the broken display: none !important on the navbar and tabs in the Terminal page's fullscreen mode with an overlay-based show/hide scheme. The five top-level nav links (Home, Router, Terminal, Admin, Docs) — plus the API Docs and MCP tabs added on development — stay structurally intact in every mode. They are translated off-screen by default in fullscreen so the terminal owns the viewport, and revealed on demand without leaving fullscreen and without triggering an xterm.js refit.

Closes #71

Changes

crates/hero_router/templates/terminal.html
- Removed: body.term-fullscreen nav.navbar, body.term-fullscreen .nav-tabs { display: none !important; }
- Added: overlay CSS using position: fixed; transform: translateY(-100%); transition; z-index: 9500 keyed off a new term-nav-revealed body class, with the tabs container targeted via the adjacent-sibling selector to avoid touching partials/tabs.html or base.html.
- Added: #termNavToggle toolbar button (visible only in fullscreen) next to #termFullscreen.
- Added: shortcuts-modal row documenting Ctrl+Shift+N.
crates/hero_router/static/js/terminal.js
- Added revealNav() / hideNav() / toggleNav() helpers; do not call fitAllPanes() so toggling never causes flicker (the overlay never changes the terminal box geometry).
- enterFullscreen() / exitFullscreen() now manage #termNavToggle visibility and apply / clear the persisted reveal preference.
- localStorage keys: hero_router.term.fullscreen (state) and hero_router.term.fullscreen.navRevealed (preference). Fullscreen state is persisted in addition to the URL hash so it survives navigating to a sibling tab (Home / Router / Admin / Docs / API / MCP) and back.
- Wired the new button click handler and a Ctrl+Shift+N keybinding (gated on isFullscreen so it is a no-op outside fullscreen).

No changes to base.html, partials/tabs.html, partials/sidebar.html, or any Rust handler. Total diff: +80 / -3 across the two files.

Test Results

Build: clean (cargo build -p hero_router)
Tests: 99 passed, 0 failed, 0 ignored (94 in herolib_router lib + 5 in log_bridge)
Pure HTML/JS feature; no Rust test directly exercises the terminal UI behavior. Browser-level verification recommended as part of review.

Acceptance Criteria

Full-screen mode available for terminal (preserved from existing F11 flow)
Navigation bar can be shown/hidden while in full-screen (#termNavToggle and Ctrl+Shift+N)
No navigation items permanently lost in full-screen mode (overlay, not display: none)
Works as a primary remote working interface (terminal owns full viewport by default; nav is one click / one keystroke away)
Fullscreen state survives navigating to a sibling tab and back (localStorage)

## Summary Replace the broken `display: none !important` on the navbar and tabs in the Terminal page's fullscreen mode with an overlay-based show/hide scheme. The five top-level nav links (Home, Router, Terminal, Admin, Docs) — plus the API Docs and MCP tabs added on `development` — stay structurally intact in every mode. They are translated off-screen by default in fullscreen so the terminal owns the viewport, and revealed on demand without leaving fullscreen and without triggering an xterm.js refit. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_router/issues/71 ## Changes - `crates/hero_router/templates/terminal.html` - Removed: `body.term-fullscreen nav.navbar, body.term-fullscreen .nav-tabs { display: none !important; }` - Added: overlay CSS using `position: fixed; transform: translateY(-100%); transition; z-index: 9500` keyed off a new `term-nav-revealed` body class, with the tabs container targeted via the adjacent-sibling selector to avoid touching `partials/tabs.html` or `base.html`. - Added: `#termNavToggle` toolbar button (visible only in fullscreen) next to `#termFullscreen`. - Added: shortcuts-modal row documenting `Ctrl+Shift+N`. - `crates/hero_router/static/js/terminal.js` - Added `revealNav()` / `hideNav()` / `toggleNav()` helpers; do not call `fitAllPanes()` so toggling never causes flicker (the overlay never changes the terminal box geometry). - `enterFullscreen()` / `exitFullscreen()` now manage `#termNavToggle` visibility and apply / clear the persisted reveal preference. - localStorage keys: `hero_router.term.fullscreen` (state) and `hero_router.term.fullscreen.navRevealed` (preference). Fullscreen state is persisted in addition to the URL hash so it survives navigating to a sibling tab (Home / Router / Admin / Docs / API / MCP) and back. - Wired the new button click handler and a `Ctrl+Shift+N` keybinding (gated on `isFullscreen` so it is a no-op outside fullscreen). No changes to `base.html`, `partials/tabs.html`, `partials/sidebar.html`, or any Rust handler. Total diff: +80 / -3 across the two files. ## Test Results - Build: clean (`cargo build -p hero_router`) - Tests: 99 passed, 0 failed, 0 ignored (94 in `herolib_router` lib + 5 in `log_bridge`) - Pure HTML/JS feature; no Rust test directly exercises the terminal UI behavior. Browser-level verification recommended as part of review. ## Acceptance Criteria - [x] Full-screen mode available for terminal (preserved from existing F11 flow) - [x] Navigation bar can be shown/hidden while in full-screen (`#termNavToggle` and `Ctrl+Shift+N`) - [x] No navigation items permanently lost in full-screen mode (overlay, not `display: none`) - [x] Works as a primary remote working interface (terminal owns full viewport by default; nav is one click / one keystroke away) - [x] Fullscreen state survives navigating to a sibling tab and back (localStorage)

ashraf added 1 commit

2026-05-03 11:03:56 +00:00

feat(terminal): collapsible top navigation in fullscreen mode

Build & Test / check (pull_request) Successful in 2m32s

Details

Build & Test / check (push) Has been cancelled

Details

2bc9eb6bd8

Replace the broken display:none of the navbar+tabs in fullscreen with an
overlay-based show/hide scheme: navbar and tabs stay structurally intact
and are translated off-screen by default; a toolbar button (#termNavToggle)
and Ctrl+Shift+N reveal/hide them on demand without leaving fullscreen and
without xterm.js refit. State and reveal preference persisted in
localStorage so fullscreen survives navigating to a sibling tab and back.

#71