fix: settings unsaved-changes guard, add Slate theme, improve Light theme
Unsaved-changes guard: - _closeSettingsPanel() intercepts all three close paths (X button, overlay click, Escape key) and checks _settingsDirty before closing - If dirty: shows inline 'Unsaved changes' bar with Save & Close / Discard - Discard reverts the live theme preview to what it was when panel opened - _markSettingsDirty() wired to all inputs via addEventListener in loadSettingsPanel() - saveSettings() now resets dirty flag and hides the bar on successful save Theme improvements: - Add 'Slate' theme: warm charcoal (#2b2d30 bg), a softer/lighter dark option that sits between Dark and the full light themes - Rework 'Light' theme: replace pure white (#f5f5f7) with warm off-white (#f0ede8) -- warmer, lower contrast, less harsh on most displays - Update /theme command to include 'slate' in valid list - Add test_settings_set_theme_slate() to test_sprint26.py
This commit is contained in:
Nathan Esquenazi
@@ -908,17 +908,70 @@ document.addEventListener('drop',e=>{e.preventDefault();dragCounter=0;wrap.class
|
||||
|
||||
// ── Settings panel ───────────────────────────────────────────────────────────
|
||||
|
||||
let _settingsDirty = false;
|
||||
let _settingsThemeOnOpen = null; // track theme at open time for discard revert
|
||||
|
||||
function toggleSettings(){
|
||||
const overlay=$('settingsOverlay');
|
||||
if(!overlay) return;
|
||||
if(overlay.style.display==='none'){
|
||||
_settingsDirty = false;
|
||||
_settingsThemeOnOpen = document.documentElement.dataset.theme || 'dark';
|
||||
overlay.style.display='';
|
||||
loadSettingsPanel();
|
||||
} else {
|
||||
overlay.style.display='none';
|
||||
_closeSettingsPanel();
|
||||
}
|
||||
}
|
||||
|
||||
// Close with unsaved-changes check. If dirty, show a confirm dialog.
|
||||
function _closeSettingsPanel(){
|
||||
if(!_settingsDirty){
|
||||
// Nothing changed -- revert any live preview and close
|
||||
_revertSettingsPreview();
|
||||
$('settingsOverlay').style.display='none';
|
||||
return;
|
||||
}
|
||||
// Dirty -- show inline confirm bar
|
||||
_showSettingsUnsavedBar();
|
||||
}
|
||||
|
||||
// Revert live DOM/localStorage to what they were when the panel opened
|
||||
function _revertSettingsPreview(){
|
||||
if(_settingsThemeOnOpen){
|
||||
document.documentElement.dataset.theme = _settingsThemeOnOpen;
|
||||
localStorage.setItem('hermes-theme', _settingsThemeOnOpen);
|
||||
}
|
||||
}
|
||||
|
||||
// Show the "Unsaved changes" bar inside the settings panel
|
||||
function _showSettingsUnsavedBar(){
|
||||
let bar = $('settingsUnsavedBar');
|
||||
if(bar){ bar.style.display=''; return; }
|
||||
// Create it
|
||||
bar = document.createElement('div');
|
||||
bar.id = 'settingsUnsavedBar';
|
||||
bar.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(233,69,96,.12);border:1px solid rgba(233,69,96,.3);border-radius:8px;padding:10px 14px;margin:0 0 12px;font-size:13px;';
|
||||
bar.innerHTML = '<span style="color:var(--text)">You have unsaved changes.</span>'
|
||||
+ '<span style="display:flex;gap:8px">'
|
||||
+ '<button onclick="_discardSettings()" style="padding:5px 12px;border-radius:6px;border:1px solid var(--border2);background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;font-size:12px;font-weight:600">Discard</button>'
|
||||
+ '<button onclick="saveSettings(true)" style="padding:5px 12px;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:12px;font-weight:600">Save & Close</button>'
|
||||
+ '</span>';
|
||||
const body = document.querySelector('.settings-body') || document.querySelector('.settings-panel');
|
||||
if(body) body.prepend(bar);
|
||||
}
|
||||
|
||||
function _discardSettings(){
|
||||
_revertSettingsPreview();
|
||||
_settingsDirty = false;
|
||||
$('settingsOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
// Mark settings as dirty whenever anything changes
|
||||
function _markSettingsDirty(){
|
||||
_settingsDirty = true;
|
||||
}
|
||||
|
||||
async function loadSettingsPanel(){
|
||||
try{
|
||||
const settings=await api('/api/settings');
|
||||
@@ -940,6 +993,7 @@ async function loadSettingsPanel(){
|
||||
}
|
||||
}catch(e){}
|
||||
modelSel.value=settings.default_model||'';
|
||||
modelSel.addEventListener('change',_markSettingsDirty,{once:false});
|
||||
}
|
||||
// Populate workspace dropdown from /api/workspaces
|
||||
const wsSel=$('settingsWorkspace');
|
||||
@@ -954,22 +1008,23 @@ async function loadSettingsPanel(){
|
||||
}
|
||||
}catch(e){}
|
||||
wsSel.value=settings.default_workspace||'';
|
||||
wsSel.addEventListener('change',_markSettingsDirty,{once:false});
|
||||
}
|
||||
// Send key preference
|
||||
const sendKeySel=$('settingsSendKey');
|
||||
if(sendKeySel) sendKeySel.value=settings.send_key||'enter';
|
||||
if(sendKeySel){sendKeySel.value=settings.send_key||'enter';sendKeySel.addEventListener('change',_markSettingsDirty,{once:false});}
|
||||
// Theme preference
|
||||
const themeSel=$('settingsTheme');
|
||||
if(themeSel) themeSel.value=settings.theme||'dark';
|
||||
if(themeSel){themeSel.value=settings.theme||'dark';themeSel.addEventListener('change',_markSettingsDirty,{once:false});}
|
||||
const showUsageCb=$('settingsShowTokenUsage');
|
||||
if(showUsageCb) showUsageCb.checked=!!settings.show_token_usage;
|
||||
if(showUsageCb){showUsageCb.checked=!!settings.show_token_usage;showUsageCb.addEventListener('change',_markSettingsDirty,{once:false});}
|
||||
const showCliCb=$('settingsShowCliSessions');
|
||||
if(showCliCb) showCliCb.checked=!!settings.show_cli_sessions;
|
||||
if(showCliCb){showCliCb.checked=!!settings.show_cli_sessions;showCliCb.addEventListener('change',_markSettingsDirty,{once:false});}
|
||||
const syncCb=$('settingsSyncInsights');
|
||||
if(syncCb) syncCb.checked=!!settings.sync_to_insights;
|
||||
if(syncCb){syncCb.checked=!!settings.sync_to_insights;syncCb.addEventListener('change',_markSettingsDirty,{once:false});}
|
||||
// Password field: always blank (we don't send hash back)
|
||||
const pwField=$('settingsPassword');
|
||||
if(pwField) pwField.value='';
|
||||
if(pwField){pwField.value='';pwField.addEventListener('input',_markSettingsDirty,{once:false});}
|
||||
// Show auth buttons only when auth is active
|
||||
try{
|
||||
const authStatus=await api('/api/auth/status');
|
||||
@@ -984,18 +1039,19 @@ async function loadSettingsPanel(){
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings(){
|
||||
async function saveSettings(andClose){
|
||||
const model=($('settingsModel')||{}).value;
|
||||
const workspace=($('settingsWorkspace')||{}).value;
|
||||
const sendKey=($('settingsSendKey')||{}).value;
|
||||
const showTokenUsage=!!($('settingsShowTokenUsage')||{}).checked;
|
||||
const showCliSessions=!!($('settingsShowCliSessions')||{}).checked;
|
||||
const pw=($('settingsPassword')||{}).value;
|
||||
const theme=($('settingsTheme')||{}).value||'dark';
|
||||
const body={};
|
||||
if(model) body.default_model=model;
|
||||
if(workspace) body.default_workspace=workspace;
|
||||
if(sendKey) body.send_key=sendKey;
|
||||
body.theme=($('settingsTheme')||{}).value||'dark';
|
||||
body.theme=theme;
|
||||
body.show_token_usage=showTokenUsage;
|
||||
body.show_cli_sessions=showCliSessions;
|
||||
body.sync_to_insights=!!($('settingsSyncInsights')||{}).checked;
|
||||
@@ -1006,7 +1062,9 @@ async function saveSettings(){
|
||||
window._sendKey=sendKey||'enter';
|
||||
window._showTokenUsage=showTokenUsage;
|
||||
showToast('Settings saved (password set — login now required)');
|
||||
toggleSettings();
|
||||
_settingsDirty=false; _settingsThemeOnOpen=theme;
|
||||
const bar=$('settingsUnsavedBar'); if(bar) bar.style.display='none';
|
||||
$('settingsOverlay').style.display='none';
|
||||
return;
|
||||
}catch(e){showToast('Save failed: '+e.message);return;}
|
||||
}
|
||||
@@ -1015,10 +1073,12 @@ async function saveSettings(){
|
||||
window._sendKey=sendKey||'enter';
|
||||
window._showTokenUsage=showTokenUsage;
|
||||
window._showCliSessions=showCliSessions;
|
||||
_settingsDirty=false; _settingsThemeOnOpen=theme;
|
||||
const bar=$('settingsUnsavedBar'); if(bar) bar.style.display='none';
|
||||
renderMessages();
|
||||
if(typeof renderSessionList==='function') renderSessionList();
|
||||
showToast('Settings saved');
|
||||
toggleSettings();
|
||||
$('settingsOverlay').style.display='none';
|
||||
}catch(e){
|
||||
showToast('Save failed: '+e.message);
|
||||
}
|
||||
@@ -1048,10 +1108,10 @@ async function disableAuth(){
|
||||
}
|
||||
}
|
||||
|
||||
// Close settings on overlay click (not panel click)
|
||||
// Close settings on overlay click (not panel click) -- with unsaved-changes check
|
||||
document.addEventListener('click',e=>{
|
||||
const overlay=$('settingsOverlay');
|
||||
if(overlay&&e.target===overlay) toggleSettings();
|
||||
if(overlay&&e.target===overlay) _closeSettingsPanel();
|
||||
});
|
||||
|
||||
// ── Cron completion alerts ────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user