feat: add sidebar + New sticky footer with inline input

- Add div.sidebar-footer with button#sidebar-new-session-btn.sidebar-new-btn
  ('+ New') to #session-sidebar in index.html, positioned after #sidebar-list
- Add CSS for .sidebar-footer (padding: 8px, border-top, flex-shrink: 0)
- Add CSS for .sidebar-new-btn (width: 100%, dashed border, dim text, hover
  effects with muted text and border color)
- Bind #sidebar-new-session-btn click to showNewSessionInput() in
  bindStaticEventListeners()
- Add 15 tests covering HTML structure, CSS rules, and JS binding

🤖 Co-authored-by: Amplifier <amplifier@example.com>
This commit is contained in:
Brian Krabach
2026-03-30 01:23:37 -07:00
parent 84fb7826d7
commit d76042560a
6 changed files with 241 additions and 0 deletions
+2
View File
@@ -1346,6 +1346,8 @@ function bindStaticEventListeners() {
on($('back-btn'), 'click', closeSession);
var newSessionBtn = $('new-session-btn');
if (newSessionBtn) on(newSessionBtn, 'click', function() { showNewSessionInput(newSessionBtn); });
var sidebarNewSessionBtn = $('sidebar-new-session-btn');
if (sidebarNewSessionBtn) on(sidebarNewSessionBtn, 'click', function() { showNewSessionInput(sidebarNewSessionBtn); });
on($('sidebar-toggle-btn'), 'click', toggleSidebar);
on($('sidebar-collapse-btn'), 'click', toggleSidebar);
bindSidebarClickAway();
+3
View File
@@ -45,6 +45,9 @@
<button id="sidebar-collapse-btn" class="sidebar-collapse-btn" aria-label="Collapse session list">&#8249;</button>
</div>
<div id="sidebar-list" class="sidebar-list"></div>
<div class="sidebar-footer">
<button id="sidebar-new-session-btn" class="sidebar-new-btn">+ New</button>
</div>
</div>
<div id="terminal-container" class="terminal-container"></div>
</div>
+27
View File
@@ -1174,6 +1174,33 @@ body {
color: var(--text-dim);
}
/* ============================================================
Sidebar sticky footer (+ New button)
============================================================ */
.sidebar-footer {
padding: 8px;
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.sidebar-new-btn {
width: 100%;
background: none;
border: 1px dashed var(--border);
border-radius: 4px;
color: var(--text-dim);
font-size: 12px;
font-family: var(--font-ui);
padding: 8px;
cursor: pointer;
}
.sidebar-new-btn:hover {
color: var(--text-muted);
border-color: var(--text-muted);
}
/* ============================================================
Responsive overlay sidebar at <960px
============================================================ */