Brian Krabach
a3f1e2efd8
- 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>
85 lines
4.9 KiB
HTML
85 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<meta name="theme-color" content="#0D1117" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<title>muxplex</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ── 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>
|
|
<span id="connection-status"></span>
|
|
</header>
|
|
<div id="session-grid" class="session-grid" role="list"></div>
|
|
<div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
|
|
</div>
|
|
|
|
<!-- ── Expanded (terminal) view ──────────────────────────────────────────── -->
|
|
<div id="view-expanded" class="view hidden">
|
|
<header class="expanded-header">
|
|
<button id="back-btn" class="back-btn" aria-label="Back">←</button>
|
|
<button id="sidebar-toggle-btn" aria-label="Toggle session list">☰</button>
|
|
<span id="expanded-session-name" class="expanded-session-name"></span>
|
|
<button id="palette-trigger" class="palette-trigger" aria-label="Open command palette">⌘K</button>
|
|
</header>
|
|
<div class="view-body">
|
|
<div id="session-sidebar">
|
|
<div class="sidebar-header">
|
|
<span class="sidebar-title">Sessions</span>
|
|
<button id="sidebar-collapse-btn">‹</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…</div>
|
|
</div>
|
|
|
|
<!-- ── 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">
|
|
<input id="palette-input" class="command-palette__input" type="text"
|
|
placeholder="Jump to session…" autocomplete="off" spellcheck="false">
|
|
<ul id="palette-list" class="command-palette__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── 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">
|
|
<div class="bottom-sheet__handle" aria-hidden="true"></div>
|
|
<ul id="sheet-list" class="bottom-sheet__list" role="listbox" aria-label="Sessions"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── 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">🔔</span>
|
|
</button>
|
|
|
|
<!-- ── Toast notification ─────────────────────────────────────────────────── -->
|
|
<div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<!-- ── 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>
|
|
<script src="/terminal.js" defer></script>
|
|
</body>
|
|
</html>
|