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

feat: add settings dialog HTML structure and CSS

Browse Source
This commit is contained in:
Brian Krabach
2026-03-29 23:04:11 -07:00
parent 19ec5c02a5
commit b20759c6cb
6 changed files with 563 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
muxplex/frontend/index.html
+55 -1
View File
@@ -20,7 +20,11 @@
<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>
<div class="header-actions">
<button id="new-session-btn" class="header-btn" aria-label="New session">+</button>
<button id="settings-btn" class="header-btn" aria-label="Settings">&#9881;</button>
<span id="connection-status"></span>
</div>
</header>
<div id="session-grid" class="session-grid" role="list"></div>
<div id="empty-state" class="empty-state hidden">No active tmux sessions</div>
@@ -32,6 +36,7 @@
<button id="back-btn" class="back-btn" aria-label="Back">&#8592;</button>
<button id="sidebar-toggle-btn" class="sidebar-toggle-btn" aria-label="Toggle session list">&#9776;</button>
<span id="expanded-session-name" class="expanded-session-name"></span>
<button id="settings-btn-expanded" class="header-btn" aria-label="Settings">&#9881;</button>
</header>
<div class="view-body">
<div id="session-sidebar" class="session-sidebar">
@@ -64,6 +69,55 @@
<!-- ── Toast notification ─────────────────────────────────────────────────── -->
<div id="toast" class="toast hidden" role="status" aria-live="polite" aria-atomic="true"></div>
<!-- ── Settings ─────────────────────────────────────────────────────────────────────── -->
<div id="settings-backdrop" class="settings-backdrop hidden"></div>
<dialog id="settings-dialog" class="settings-dialog">
<div class="settings-layout">
<nav class="settings-tabs">
<button class="settings-tab settings-tab--active" data-tab="display">Display</button>
<button class="settings-tab" data-tab="sessions">Sessions</button>
<button class="settings-tab" data-tab="notifications">Notifications</button>
<button class="settings-tab" data-tab="new-session">New Session</button>
</nav>
<div class="settings-content">
<div class="settings-panel" data-panel="display">
<div class="settings-field">
<label class="settings-label" for="setting-font-size">Font Size</label>
<select id="setting-font-size" class="settings-select">
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14" selected>14</option>
<option value="16">16</option>
</select>
</div>
<div class="settings-field">
<label class="settings-label" for="setting-hover-delay">Hover Delay</label>
<select id="setting-hover-delay" class="settings-select">
<option value="0">Off</option>
<option value="1000">1000ms</option>
<option value="1500" selected>1500ms</option>
<option value="2000">2000ms</option>
<option value="3000">3000ms</option>
</select>
</div>
<div class="settings-field">
<label class="settings-label" for="setting-grid-columns">Grid Columns</label>
<select id="setting-grid-columns" class="settings-select">
<option value="auto" selected>Auto</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="settings-panel hidden" data-panel="sessions"></div>
<div class="settings-panel hidden" data-panel="notifications"></div>
<div class="settings-panel hidden" data-panel="new-session"></div>
</div>
</div>
</dialog>
<!-- ── 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>
muxplex/frontend/style.css
+186
View File
@@ -873,6 +873,192 @@ body {
/* ============================================================
Header actions + settings buttons
============================================================ */
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.header-btn {
width: 32px;
height: 32px;
background: none;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 0;
flex-shrink: 0;
}
.header-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ============================================================
Settings dialog
============================================================ */
.settings-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 299;
}
.settings-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 480px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
z-index: 300;
padding: 0;
overflow: hidden;
margin: 0;
}
.settings-dialog::backdrop {
background: transparent;
}
.settings-layout {
display: flex;
height: 100%;
}
.settings-tabs {
width: 140px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
padding: 8px 0;
background: var(--bg-secondary);
}
.settings-tab {
background: none;
border: none;
border-left: 3px solid transparent;
color: var(--text-muted);
cursor: pointer;
text-align: left;
padding: 10px 16px;
font-size: 13px;
}
.settings-tab:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
.settings-tab--active {
color: var(--accent);
border-left-color: var(--accent);
}
.settings-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.settings-panel-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 16px;
}
.settings-field {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
}
.settings-label {
font-size: 13px;
color: var(--text);
}
.settings-select {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-size: 13px;
padding: 4px 8px;
cursor: pointer;
}
.settings-select:focus {
outline: none;
border-color: var(--accent);
}
/* ============================================================
Settings dialog — mobile (bottom sheet at ≤599px)
============================================================ */
@media (max-width: 599px) {
.settings-dialog {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
transform: none;
width: 100%;
height: 85vh;
border-radius: 12px 12px 0 0;
margin: 0;
}
.settings-layout {
flex-direction: column;
}
.settings-tabs {
width: auto;
flex-direction: row;
overflow-x: auto;
border-right: none;
border-bottom: 1px solid var(--border);
padding: 0;
height: auto;
}
.settings-tab {
border-left: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
padding: 10px 16px;
}
.settings-tab--active {
border-bottom-color: var(--accent);
border-left-color: transparent;
}
}
/* ============================================================
Responsive overlay sidebar at <960px
============================================================ */