feat(ui): add header display settings for font controls, system stats, and token count

- Add visibility toggles in App Settings modal for A-/A+, CPU/MEM, and token count
- Make settings gear icon larger (32px) for better accessibility
- Apply settings on startup and immediately when saved
- All options enabled by default, persisted to localStorage

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-19 19:22:28 +01:00
co-authored by Claude Opus 4.5
parent fc319d8987
commit e202d0753d
3 changed files with 109 additions and 17 deletions
+47 -17
View File
@@ -46,7 +46,7 @@
<span class="stat-value" id="statMem">--</span>
</div>
</div>
<button class="btn-icon-header" onclick="app.openAppSettings()" title="App Settings">&#x2699;</button>
<button class="btn-icon-header btn-settings" onclick="app.openAppSettings()" title="App Settings">&#x2699;</button>
<div class="header-tokens" id="headerTokens" title="Total tokens across all sessions">0 tokens</div>
</div>
</header>
@@ -456,23 +456,53 @@
<button class="modal-close" onclick="app.closeAppSettings()">&times;</button>
</div>
<div class="modal-body">
<div class="form-row">
<label>Default CLAUDE.md Template Path</label>
<input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
<span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
<div class="settings-section">
<div class="settings-section-title">Header Display</div>
<div class="form-row form-row-switch">
<label>Show Font Controls</label>
<label class="switch">
<input type="checkbox" id="appSettingsShowFontControls" checked>
<span class="slider"></span>
</label>
<span class="form-hint">Show A-/A+ font size buttons in header</span>
</div>
<div class="form-row form-row-switch">
<label>Show System Stats</label>
<label class="switch">
<input type="checkbox" id="appSettingsShowSystemStats" checked>
<span class="slider"></span>
</label>
<span class="form-hint">Show CPU and memory usage in header</span>
</div>
<div class="form-row form-row-switch">
<label>Show Token Count</label>
<label class="switch">
<input type="checkbox" id="appSettingsShowTokenCount" checked>
<span class="slider"></span>
</label>
<span class="form-hint">Show total token count in header</span>
</div>
</div>
<div class="form-row">
<label>Default Working Directory</label>
<input type="text" id="appSettingsDefaultDir" placeholder="~/projects">
<span class="form-hint">Default directory for new sessions.</span>
</div>
<div class="form-row form-row-switch">
<label>Enable Ralph Wiggum Tracker</label>
<label class="switch">
<input type="checkbox" id="appSettingsRalphEnabled">
<span class="slider"></span>
</label>
<span class="form-hint">Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected.</span>
<div class="settings-section">
<div class="settings-section-title">General</div>
<div class="form-row">
<label>Default CLAUDE.md Template Path</label>
<input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
<span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
</div>
<div class="form-row">
<label>Default Working Directory</label>
<input type="text" id="appSettingsDefaultDir" placeholder="~/projects">
<span class="form-hint">Default directory for new sessions.</span>
</div>
<div class="form-row form-row-switch">
<label>Enable Ralph Wiggum Tracker</label>
<label class="switch">
<input type="checkbox" id="appSettingsRalphEnabled">
<span class="slider"></span>
</label>
<span class="form-hint">Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected.</span>
</div>
</div>
</div>
<div class="form-actions">