feat: add header + button with inline name input for session creation

- Add showNewSessionInput(btn): creates inline text input with class
  'new-session-input', placeholder 'Session name…', autocomplete off,
  spellcheck false; hides button, inserts input before it, focuses it.
  Handles Enter (create), Escape (cancel), and blur (150ms delayed cleanup).
- Add createNewSession(name): POSTs to /api/sessions, shows toast with
  created session name, calls pollSessions(), and if ss.auto_open_created
  !== false calls openSession(data.name) after 500ms delay.
- Bind #new-session-btn click to showNewSessionInput in bindStaticEventListeners.
- Export showNewSessionInput and createNewSession from module.exports.
- Add .new-session-input CSS (bg, border 1px solid accent, border-radius 4px,
  font-size 13px, font-ui, padding 4px 10px, width 180px, outline none) and
  ::placeholder { color: var(--text-dim) } in style.css.
- Add 28 new tests covering all spec requirements (19 JS structural, 9 CSS).
This commit is contained in:
Brian Krabach
2026-03-30 01:08:19 -07:00
parent 5f81b87348
commit 84fb7826d7
4 changed files with 480 additions and 0 deletions
+20
View File
@@ -1154,6 +1154,26 @@ body {
cursor: not-allowed;
}
/* ============================================================
Header + button inline name input (new-session-btn)
============================================================ */
.new-session-input {
background: var(--bg);
border: 1px solid var(--accent);
border-radius: 4px;
font-size: 13px;
font-family: var(--font-ui);
padding: 4px 10px;
width: 180px;
outline: none;
color: var(--text);
}
.new-session-input::placeholder {
color: var(--text-dim);
}
/* ============================================================
Responsive overlay sidebar at <960px
============================================================ */