ken/muxplex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add sidebar markup, toggle button, and view-body wrapper to expanded view

Browse Source 
- Add #sidebar-toggle-btn to expanded-header (after #back-btn, before #expanded-session-name)
  with aria-label='Toggle session list' and hamburger icon ☰
- Wrap #terminal-container in div.view-body
- Add #session-sidebar before #terminal-container inside .view-body, containing:
  - .sidebar-header with .sidebar-title 'Sessions' and #sidebar-collapse-btn (chevron ‹)
  - #sidebar-list div
- Keep #reconnect-overlay outside .view-body as sibling inside #view-expanded

Tests added:
- test_html_sidebar_toggle_button: verifies placement, aria-label, and order in header
- test_html_view_body_wrapper: verifies .view-body contains #session-sidebar and #terminal-container
- test_html_reconnect_overlay_outside_view_body: verifies #reconnect-overlay is outside .view-body
- test_html_session_sidebar_structure: verifies full sidebar DOM structure

Co-authored-by: Amplifier <amplifier@amplified.dev>
This commit is contained in:
Brian Krabach
2026-03-27 16:35:43 -07:00
parent 95c1ec1ad4
commit a3f1e2efd8
2 changed files with 102 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+18 -8
View File
@@ -16,7 +16,7 @@
</head>
<body>
<!-- ── Overview view ─────────────────────────────────────────────── -->
<!-- ── Overview view ─────────────────────────────────────────────────────── -->
<div id="view-overview" class="view view--active">
<header class="app-header">
<h1 class="app-wordmark"><img src="/wordmark-on-dark.svg" alt="muxplex" height="24" /></h1>
@@ -26,18 +26,28 @@
<div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
</div>
<!-- ── Expanded (terminal) view ────────────────────────────────────── -->
<!-- ── Expanded (terminal) view ──────────────────────────────────────────── -->
<div id="view-expanded" class="view hidden">
<header class="expanded-header">
<button id="back-btn" class="back-btn" aria-label="Back">&#8592;</button>
<button id="sidebar-toggle-btn" aria-label="Toggle session list">&#9776;</button>
<span id="expanded-session-name" class="expanded-session-name"></span>
<button id="palette-trigger" class="palette-trigger" aria-label="Open command palette">&#8984;K</button>
</header>
<div id="terminal-container" class="terminal-container"></div>
<div class="view-body">
<div id="session-sidebar">
<div class="sidebar-header">
<span class="sidebar-title">Sessions</span>
<button id="sidebar-collapse-btn">&#8249;</button>
</div>
<div id="sidebar-list"></div>
</div>
<div id="terminal-container" class="terminal-container"></div>
</div>
<div id="reconnect-overlay" class="reconnect-overlay hidden" aria-live="polite">Reconnecting&hellip;</div>
</div>
<!-- ── Command palette ─────────────────────────────────────────────── -->
<!-- ── Command palette ───────────────────────────────────────────────────── -->
<div id="command-palette" class="command-palette hidden" role="dialog" aria-modal="true" aria-label="Switch session">
<div class="command-palette__backdrop" id="palette-backdrop"></div>
<div class="command-palette__dialog">
@@ -47,7 +57,7 @@
</div>
</div>
<!-- ── Bottom sheet (session switcher) ─────────────────────────────── -->
<!-- ── Bottom sheet (session switcher) ───────────────────────────────────── -->
<div id="bottom-sheet" class="bottom-sheet hidden" role="dialog" aria-modal="true" aria-label="Switch session">
<div class="bottom-sheet__backdrop" id="sheet-backdrop"></div>
<div class="bottom-sheet__panel">
@@ -56,16 +66,16 @@
</div>
</div>
<!-- ── Session pill (persistent overlay button) ───────────────────── -->
<!-- ── Session pill (persistent overlay button) ──────────────────────────── -->
<button id="session-pill" class="session-pill hidden" aria-label="Switch session">
<span id="session-pill-label" class="session-pill__label"></span>
<span id="session-pill-bell" class="session-pill__bell hidden" aria-hidden="true">&#128276;</span>
</button>
<!-- ── Toast notification ─────────────────────────────────────────── -->
<!-- ── Toast notification ─────────────────────────────────────────────────── -->
<div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
<!-- ── Scripts ────────────────────────────────────────────────────── -->
<!-- ── Scripts ─────────────────────────────────────────────────────────────── -->
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
<script src="/app.js" defer></script>