feat(ui): improve settings modal with tabs and bolder Run Claude text

- Add tabbed interface to App Settings modal (Display, Claude CLI, Paths)
- Add modal-lg class for wider settings modal (520px)
- Remove "(will be created)" text from empty case display
- Make Run Claude button text bolder (font-weight: 700)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-21 13:08:32 +01:00
co-authored by Claude Opus 4.5
parent e8c30b9880
commit f61df0b89e
3 changed files with 48 additions and 24 deletions
+21 -3
View File
@@ -942,9 +942,9 @@ class ClaudemanApp {
select.value = firstCase.name;
this.updateDirDisplayForCase(firstCase.name);
} else {
// No cases exist yet - show the default case name as directory hint
// No cases exist yet - show the default case name as directory
select.value = 'testcase';
document.getElementById('dirDisplay').textContent = '~/claudeman-cases/testcase (will be created)';
document.getElementById('dirDisplay').textContent = '~/claudeman-cases/testcase';
}
// Only add event listener once (on first load)
@@ -1771,7 +1771,25 @@ class ClaudemanApp {
claudeModeSelect.onchange = () => {
allowedToolsRow.style.display = claudeModeSelect.value === 'allowedTools' ? '' : 'none';
};
document.getElementById('appSettingsModal').classList.add('active');
// Reset to first tab and wire up tab switching
this.switchSettingsTab('settings-display');
const modal = document.getElementById('appSettingsModal');
modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
btn.onclick = () => this.switchSettingsTab(btn.dataset.tab);
});
modal.classList.add('active');
}
switchSettingsTab(tabName) {
const modal = document.getElementById('appSettingsModal');
// Toggle active class on tab buttons
modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.tab === tabName);
});
// Toggle hidden class on tab content
modal.querySelectorAll('.modal-tab-content').forEach(content => {
content.classList.toggle('hidden', content.id !== tabName);
});
}
closeAppSettings() {