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
+34
View File
@@ -50,6 +50,7 @@ class ClaudemanApp {
init() {
this.initTerminal();
this.loadFontSize();
this.applyHeaderVisibilitySettings();
this.connectSSE();
this.loadState();
this.loadQuickStartCases();
@@ -1641,6 +1642,10 @@ class ClaudemanApp {
document.getElementById('appSettingsClaudeMdPath').value = settings.defaultClaudeMdPath || '';
document.getElementById('appSettingsDefaultDir').value = settings.defaultWorkingDir || '';
document.getElementById('appSettingsRalphEnabled').checked = settings.ralphTrackerEnabled ?? false;
// Header visibility settings (default to true/enabled)
document.getElementById('appSettingsShowFontControls').checked = settings.showFontControls ?? true;
document.getElementById('appSettingsShowSystemStats').checked = settings.showSystemStats ?? true;
document.getElementById('appSettingsShowTokenCount').checked = settings.showTokenCount ?? true;
document.getElementById('appSettingsModal').classList.add('active');
}
@@ -1653,11 +1658,18 @@ class ClaudemanApp {
defaultClaudeMdPath: document.getElementById('appSettingsClaudeMdPath').value.trim(),
defaultWorkingDir: document.getElementById('appSettingsDefaultDir').value.trim(),
ralphTrackerEnabled: document.getElementById('appSettingsRalphEnabled').checked,
// Header visibility settings
showFontControls: document.getElementById('appSettingsShowFontControls').checked,
showSystemStats: document.getElementById('appSettingsShowSystemStats').checked,
showTokenCount: document.getElementById('appSettingsShowTokenCount').checked,
};
// Save to localStorage
localStorage.setItem('claudeman-app-settings', JSON.stringify(settings));
// Apply header visibility immediately
this.applyHeaderVisibilitySettings();
// Also save to server
try {
await fetch('/api/settings', {
@@ -1692,6 +1704,28 @@ class ClaudemanApp {
return {};
}
applyHeaderVisibilitySettings() {
const settings = this.loadAppSettingsFromStorage();
// Default all to true (enabled) if not set
const showFontControls = settings.showFontControls ?? true;
const showSystemStats = settings.showSystemStats ?? true;
const showTokenCount = settings.showTokenCount ?? true;
const fontControlsEl = document.querySelector('.header-font-controls');
const systemStatsEl = document.getElementById('headerSystemStats');
const tokenCountEl = document.getElementById('headerTokens');
if (fontControlsEl) {
fontControlsEl.style.display = showFontControls ? '' : 'none';
}
if (systemStatsEl) {
systemStatsEl.style.display = showSystemStats ? '' : 'none';
}
if (tokenCountEl) {
tokenCountEl.style.display = showTokenCount ? '' : 'none';
}
}
async loadAppSettingsFromServer() {
try {
const res = await fetch('/api/settings');