feat: Add UI Settings panel with config management
- Add 3 API endpoints: GET /api/v2/config, POST /api/v2/config/edit, GET /api/v2/config/validate
- Add Settings button (⚙️) to bottom bar
- Add Settings panel with CSS styling (8 classes)
- Add JavaScript functions: toggleSettings, loadSettings, editSetting, saveSetting, validateSettings, cancelEdit, toast
- Support viewing/editing/validating all config sections (server, postgresql, authentication, test, logging)
- Update AGENTS.md with UI Settings documentation
Features:
- Real-time config editing via UI
- Input validation before save
- Toast notifications for user feedback
- Responsive design matching existing UI style
Files changed:
- src/server.rs: +70 lines (API handlers)
- src/page.html: +110 lines (UI + JS)
- AGENTS.md: +40 lines (documentation)
Tested: All API endpoints verified, UI elements present in HTML
This commit is contained in:
Warren
122
src/page.html
122
src/page.html
@@ -68,6 +68,20 @@ body.mb-locked .mb-tree-node:hover .mb-folder-actions{display:none!important}
|
||||
.mb-icon-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:200px;overflow-y:auto;margin:8px 0}
|
||||
.mb-icon-picker button{background:#0f172a;border:2px solid transparent;border-radius:6px;font-size:22px;padding:6px;cursor:pointer}
|
||||
.mb-icon-picker button:hover{background:#1e3a5f;border-color:#60a5fa}
|
||||
|
||||
#mb-settings-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:52px;background:#0f172a;z-index:9998;overflow-y:auto;padding:16px 24px}
|
||||
#mb-settings-panel.active{display:block}
|
||||
.mb-config-section{background:#1e293b;border-radius:8px;padding:16px;margin:8px 0}
|
||||
.mb-config-header{color:#60a5fa;font-size:14px;font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #334155}
|
||||
.mb-config-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #334155}
|
||||
.mb-config-item:last-child{border-bottom:none}
|
||||
.mb-config-label{color:#94a3b8;font-size:13px}
|
||||
.mb-config-value{color:#e2e8f0;font-size:13px;font-family:monospace}
|
||||
.mb-config-edit-btn{background:#334155;border:none;color:#60a5fa;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px}
|
||||
.mb-config-edit-btn:hover{background:#475569}
|
||||
.mb-config-input{background:#0f172a;border:1px solid #60a5fa;border-radius:4px;color:#e2e8f0;padding:2px 8px;font-size:12px;font-family:monospace;width:150px}
|
||||
.mb-config-save-btn{background:#064e3b;border:1px solid #4ade80;color:#4ade80;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px}
|
||||
.mb-config-cancel-btn{background:#451a03;border:1px solid #fbbf24;color:#fbbf24;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:false,theme:'dark',themeVariables:{primaryColor:'#60a5fa',primaryTextColor:'#e2e8f0',lineColor:'#94a3b8'}})</script>
|
||||
@@ -76,6 +90,7 @@ body.mb-locked .mb-tree-node:hover .mb-folder-actions{display:none!important}
|
||||
<div id=mb-overlay onclick="closeDetail()"></div>
|
||||
<div id=mb-detail><button id=mb-detail-close onclick="closeDetail()">✕</button><div id=mb-detail-body></div></div>
|
||||
<div id=mb-tree-panel><div id=mb-tree-body></div></div>
|
||||
<div id=mb-settings-panel><div id=mb-settings-body></div></div>
|
||||
|
||||
<div id=mb-bar style="position:fixed;bottom:0;left:0;right:0;background:#1e293b;border-top:1px solid #334155;display:flex;justify-content:center;align-items:center;gap:5px;padding:5px 10px;z-index:9999;font-size:12px">
|
||||
<button onclick="fetch('/command',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({cmd:'restart'})})" title="Restart">⏮</button>
|
||||
@@ -88,6 +103,8 @@ body.mb-locked .mb-tree-node:hover .mb-folder-actions{display:none!important}
|
||||
<span style=color:#475569;font-size:10px>|</span>
|
||||
<button onclick="toggleTree()" title="File Tree" style="background:none;border:none;color:#60a5fa;cursor:pointer;font-size:16px">🗂</button>
|
||||
<span style=color:#475569;font-size:10px>|</span>
|
||||
<button onclick="toggleSettings()" title="Settings" style="background:none;border:none;color:#60a5fa;cursor:pointer;font-size:16px">⚙️</button>
|
||||
<span style=color:#475569;font-size:10px>|</span>
|
||||
<button onclick="var t=this.textContent;this.textContent=t===String.fromCodePoint(0x1F50A)?String.fromCodePoint(0x1F507):String.fromCodePoint(0x1F50A)" id=mbvb title=Voice style=font-size:16px>🔊</button>
|
||||
<select id=mbvl onchange="fetch('/command',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({cmd:'lang',val:this.value})})" style="background:#0f172a;color:white;border:1px solid #334155;border-radius:4px;padding:1px 3px;font-size:10px">
|
||||
<option value=zh_TW>🇹🇼</option><option value=en_US>🇺🇸</option><option value=ja_JP>🇯🇵</option><option value=ko_KR>🇰🇷</option><option value=fr_FR>🇫🇷</option></select>
|
||||
@@ -101,6 +118,111 @@ body.mb-locked .mb-tree-node:hover .mb-folder-actions{display:none!important}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ═══════════════ SETTINGS PANEL ═══════════════
|
||||
var _sv=false;
|
||||
|
||||
function toggleSettings(){
|
||||
_sv=!_sv;
|
||||
document.getElementById("mb-settings-panel").classList.toggle("active",_sv);
|
||||
if(_sv)loadSettings();
|
||||
}
|
||||
|
||||
function loadSettings(){
|
||||
var b=document.getElementById("mb-settings-body");
|
||||
if(!b)return;
|
||||
b.innerHTML="<div style=text-align:center;padding:40px;color:#64748b>Loading...</div>";
|
||||
|
||||
fetch("/api/v2/config").then(function(r){return r.json()}).then(function(d){
|
||||
var h="<div class=mb-mode-bar>";
|
||||
h+="<span style=color:#60a5fa;font-size:16px>⚙️</span>";
|
||||
h+="<span style=font-size:14px;color:#e2e8f0;margin-left:8px>Settings</span>";
|
||||
h+="<span style=flex:1></span>";
|
||||
h+="<button class=mb-new-folder-btn onclick=validateSettings()>Validate</button>";
|
||||
h+="<button onclick=toggleSettings() style='background:none;border:none;color:#64748b;font-size:18px;cursor:pointer'>✕</button>";
|
||||
h+="</div>";
|
||||
|
||||
var sections=["server","postgresql","authentication","test","logging"];
|
||||
sections.forEach(function(sec){
|
||||
var secData=d[sec];
|
||||
if(!secData)return;
|
||||
|
||||
h+="<div class=mb-config-section>";
|
||||
h+="<div class=mb-config-header>"+sec.toUpperCase()+"</div>";
|
||||
|
||||
for(var key in secData){
|
||||
if(secData.hasOwnProperty(key)){
|
||||
var val=secData[key];
|
||||
var ckey=sec+"."+key;
|
||||
var dispVal=typeof val==="object"?JSON.stringify(val):String(val);
|
||||
var safeId=ckey.replace(/[^a-zA-Z0-9]/g,"-");
|
||||
|
||||
h+="<div class=mb-config-item>";
|
||||
h+="<span class=mb-config-label>"+key+"</span>";
|
||||
h+="<div style=display:flex;gap:6px;align-items:center>";
|
||||
h+="<span class=mb-config-value id=config-value-"+safeId+">"+dispVal+"</span>";
|
||||
h+="<button class=mb-config-edit-btn onclick=editSetting(\""+ckey+"\",\""+encodeURIComponent(dispVal)+"\")>Edit</button>";
|
||||
h+="</div>";
|
||||
h+="</div>";
|
||||
}
|
||||
}
|
||||
h+="</div>";
|
||||
});
|
||||
|
||||
b.innerHTML=h;
|
||||
}).catch(function(e){
|
||||
b.innerHTML="<div style=padding:20px;color:#ef4444>Failed to load settings: "+e+"</div>";
|
||||
});
|
||||
}
|
||||
|
||||
function editSetting(key,currentVal){
|
||||
var safeId=key.replace(/[^a-zA-Z0-9]/g,"-");
|
||||
var valEl=document.getElementById("config-value-"+safeId);
|
||||
if(!valEl)return;
|
||||
|
||||
var decodedVal=decodeURIComponent(currentVal);
|
||||
valEl.innerHTML="<input class=mb-config-input id=config-input-"+safeId+" value='"+decodedVal+"'>";
|
||||
|
||||
var parent=valEl.parentElement;
|
||||
var editBtn=parent.querySelector(".mb-config-edit-btn");
|
||||
editBtn.outerHTML="<button class=mb-config-save-btn onclick=saveSetting(\""+key+"\",\""+safeId+"\")>Save</button><button class=mb-config-cancel-btn onclick=cancelEdit(\""+key+"\",\""+currentVal+"\")>Cancel</button>";
|
||||
}
|
||||
|
||||
function saveSetting(key,safeId){
|
||||
var input=document.getElementById("config-input-"+safeId);
|
||||
if(!input)return;
|
||||
|
||||
var newVal=input.value;
|
||||
|
||||
fetch("/api/v2/config/edit?key="+encodeURIComponent(key)+"&value="+encodeURIComponent(newVal),{method:"POST"})
|
||||
.then(function(r){return r.json()}).then(function(d){
|
||||
if(d.ok){
|
||||
toast("Saved: "+key);
|
||||
loadSettings();
|
||||
}else{
|
||||
toast("Error: "+(d.error||"unknown"));
|
||||
}
|
||||
}).catch(function(e){toast("Save error: "+e)});
|
||||
}
|
||||
|
||||
function cancelEdit(key,currentVal){
|
||||
loadSettings();
|
||||
}
|
||||
|
||||
function validateSettings(){
|
||||
fetch("/api/v2/config/validate").then(function(r){return r.json()}).then(function(d){
|
||||
if(d.ok)toast("✓ Settings valid");
|
||||
else toast("✗ Invalid: "+(d.error||"unknown"));
|
||||
}).catch(function(e){toast("Validate error: "+e)});
|
||||
}
|
||||
|
||||
function toast(msg){
|
||||
var t=document.createElement("div");
|
||||
t.className="mb-toast";
|
||||
t.textContent=msg;
|
||||
document.body.appendChild(t);
|
||||
setTimeout(function(){t.style.opacity="0";setTimeout(function(){t.remove()},300)},2000);
|
||||
}
|
||||
|
||||
// Page version polling (skip while tree or detail panel is open)
|
||||
var _v=-1;
|
||||
setInterval(function(){
|
||||
|
||||
Reference in New Issue
Block a user