feat: Lucide icons on edit/del/copy and inline edit save/cancel buttons

pencil → edit, trash-2 → del, copy → copy, check → copied feedback,
check → Save, x → Cancel. All small action buttons get inline-flex
alignment for consistent icon+label layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-26 23:32:19 -04:00
parent 826bd6cfe3
commit 4f09823afe
2 changed files with 23 additions and 9 deletions

View File

@@ -541,20 +541,21 @@
const editBtn = document.createElement('button');
editBtn.className = 'msg-act-btn';
editBtn.textContent = 'edit';
editBtn.innerHTML = icon_html('pencil', 12) + ' edit';
editBtn.addEventListener('click', () => {
startEdit(msgDiv);
});
const delBtn = document.createElement('button');
delBtn.className = 'msg-act-btn del';
delBtn.textContent = 'del';
delBtn.innerHTML = icon_html('trash-2', 12) + ' del';
delBtn.addEventListener('click', () => {
deleteMsg(wrapper);
});
actionsDiv.appendChild(editBtn);
actionsDiv.appendChild(delBtn);
render_icons();
}
// After any currentHistory splice, renumber all wrapper data-hist-idx attributes.
@@ -587,17 +588,18 @@
ta.rows = Math.min(originalText.split('\n').length + 1, 12);
const saveBtn = document.createElement('button');
saveBtn.textContent = 'Save';
saveBtn.className = 'edit-save-btn';
saveBtn.innerHTML = icon_html('check', 13) + ' Save';
saveBtn.className = 'edit-save-btn';
const cancelBtn = document.createElement('button');
cancelBtn.textContent = 'Cancel';
cancelBtn.className = 'edit-cancel-btn';
cancelBtn.innerHTML = icon_html('x', 13) + ' Cancel';
cancelBtn.className = 'edit-cancel-btn';
const btnRow = document.createElement('div');
btnRow.className = 'edit-btns';
btnRow.appendChild(saveBtn);
btnRow.appendChild(cancelBtn);
render_icons();
msgDiv.innerHTML = '';
msgDiv.appendChild(ta);
@@ -672,7 +674,8 @@
function makeCopyBtn(div) {
const btn = document.createElement('button');
btn.className = 'copy-btn';
btn.textContent = 'copy';
btn.innerHTML = icon_html('copy', 12) + ' copy';
render_icons();
btn.addEventListener('click', (e) => {
e.stopPropagation();
const text = div.dataset.raw || '';
@@ -681,11 +684,13 @@
} else {
fallbackCopy(text);
}
btn.textContent = '';
btn.innerHTML = icon_html('check', 12) + ' copied';
render_icons();
btn.classList.add('copied');
setTimeout(() => {
btn.textContent = 'copy';
btn.innerHTML = icon_html('copy', 12) + ' copy';
btn.classList.remove('copied');
render_icons();
}, 1500);
});
return btn;

View File

@@ -454,6 +454,9 @@
.message.assistant { position: relative; }
.copy-btn {
display: inline-flex;
align-items: center;
gap: 4px;
position: absolute;
top: 7px;
right: 8px;
@@ -714,6 +717,9 @@
.msg-wrapper:hover .msg-actions { opacity: 1; }
.msg-act-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid var(--border);
border-radius: 4px;
@@ -751,6 +757,9 @@
}
.edit-save-btn, .edit-cancel-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid var(--border);
border-radius: 4px;