fix: bottom toolbar layout - show case selector, gray Run Claude button

- Rearranged bottom toolbar: Run Claude + Run Shell left, + case selector center
- Made Run Claude button gray instead of blue gradient
- Fixed mobile CSS that was hiding toolbar-center with display:none
- Reduced toolbar height 20%, increased header height
- Tighter session tab styling (smaller padding, font, border-radius)
- Added version display to header next to logo

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-31 05:48:55 +01:00
co-authored by Claude Opus 4.5
parent ad8410e29a
commit 140bf6fdd6
5 changed files with 83 additions and 77 deletions
+13 -26
View File
@@ -20,6 +20,7 @@
<header class="header">
<div class="header-brand">
<span class="logo" onclick="app.goHome()" title="Go to main page">Claudeman</span>
<span class="header-version" id="headerVersion" title="Claudeman version">v0.0.0</span>
</div>
<!-- Session Tabs -->
@@ -263,47 +264,33 @@
<!-- Bottom Toolbar -->
<footer class="toolbar">
<div class="toolbar-left">
<!-- Run Claude -->
<!-- Run Claude & Shell -->
<div class="toolbar-group">
<button class="btn-toolbar btn-claude" onclick="app.runClaude()" title="Run Claude (Ctrl+Enter)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Run Claude
</button>
<div class="tab-count-group" title="Instance count">
<button class="tab-count-btn" onclick="app.decrementTabCount()">−</button>
<input type="number" id="tabCount" class="tab-count-input" value="1" min="1" max="20" readonly>
<button class="tab-count-btn" onclick="app.incrementTabCount()">+</button>
</div>
<button class="btn-toolbar btn-shell" onclick="app.runShell()" title="Run Shell">
Run Shell
</button>
<div class="tab-count-group" title="Instance count">
<button class="tab-count-btn" onclick="app.decrementShellCount()">−</button>
<input type="number" id="shellCount" class="tab-count-input" value="1" min="1" max="20" readonly>
<button class="tab-count-btn" onclick="app.incrementShellCount()">+</button>
</div>
<div class="case-select-group">
<select id="quickStartCase" class="toolbar-select" title="Select case">
<option value="testcase">testcase</option>
</select>
<button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
</div>
</div>
<!-- Directory (hidden) -->
<div class="toolbar-group" style="display: none;">
<button class="btn-toolbar" onclick="app.toggleDirInput()" title="Set working directory">
<span id="dirDisplay">No directory</span>
</button>
<input type="text" id="dirInput" class="toolbar-input hidden" placeholder="Working directory..." onblur="app.hideDirInput()">
</div>
</div>
<div class="toolbar-center">
<span class="version-display" id="versionDisplay" title="Claudeman version">v0.0.0</span>
<!-- Add Case + Case Select -->
<div class="toolbar-group toolbar-case-group">
<button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
<select id="quickStartCase" class="toolbar-select" title="Select case">
<option value="testcase">testcase</option>
</select>
</div>
</div>
<div class="toolbar-right">
<span class="version-display" id="versionDisplay" title="Claudeman version">v0.0.0</span>
<!-- Hidden instance counts (preserved for functionality) -->
<input type="hidden" id="tabCount" value="1">
<input type="hidden" id="shellCount" value="1">
</div>
</footer>