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
+22 -20
View File
@@ -437,14 +437,19 @@
<!-- App Settings Modal -->
<div class="modal" id="appSettingsModal">
<div class="modal-backdrop" onclick="app.closeAppSettings()"></div>
<div class="modal-content">
<div class="modal-content modal-lg">
<div class="modal-header">
<h3>App Settings</h3>
<button class="modal-close" onclick="app.closeAppSettings()">&times;</button>
</div>
<div class="modal-tabs">
<button class="modal-tab-btn active" data-tab="settings-display">Display</button>
<button class="modal-tab-btn" data-tab="settings-claude">Claude CLI</button>
<button class="modal-tab-btn" data-tab="settings-paths">Paths</button>
</div>
<div class="modal-body">
<div class="settings-section">
<div class="settings-section-title">Header Display</div>
<!-- Display Tab -->
<div class="modal-tab-content" id="settings-display">
<div class="form-row form-row-switch">
<label>Show Font Controls</label>
<label class="switch">
@@ -478,8 +483,8 @@
<span class="form-hint">Show Monitor panel at bottom right</span>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">Claude CLI</div>
<!-- Claude CLI Tab -->
<div class="modal-tab-content hidden" id="settings-claude">
<div class="form-row">
<label>Startup Mode</label>
<select id="appSettingsClaudeMode" class="form-select">
@@ -492,13 +497,21 @@
<div class="form-row" id="allowedToolsRow" style="display: none;">
<label>Allowed Tools</label>
<input type="text" id="appSettingsAllowedTools" placeholder="Read,Glob,Grep,Bash">
<span class="form-hint">Comma-separated list of tools to allow (e.g., Read,Glob,Grep,Bash)</span>
<span class="form-hint">Comma-separated list of tools to allow</span>
</div>
<div class="form-row form-row-switch">
<label>Enable Ralph Tracker</label>
<label class="switch">
<input type="checkbox" id="appSettingsRalphEnabled">
<span class="slider"></span>
</label>
<span class="form-hint">Auto-enable for new sessions (otherwise auto-enables on Ralph pattern detection)</span>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">Paths & Defaults</div>
<!-- Paths Tab -->
<div class="modal-tab-content hidden" id="settings-paths">
<div class="form-row">
<label>Default CLAUDE.md Template Path</label>
<label>Default CLAUDE.md Template</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>
@@ -508,17 +521,6 @@
<span class="form-hint">Default directory for new sessions.</span>
</div>
</div>
<div class="settings-section">
<div class="settings-section-title">Features</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">
<button class="btn-toolbar" onclick="app.closeAppSettings()">Cancel</button>