Make task status pills interactive

This commit is contained in:
pewdiepie-archdaemon
2026-06-01 14:54:24 +09:00
parent ee62acd3f1
commit 6872679f31
2 changed files with 25 additions and 7 deletions
+15 -4
View File
@@ -627,13 +627,15 @@ function _renderList() {
// status dot (right). Click to expand.
const titleRow = document.createElement('div');
titleRow.style.cssText = 'display:flex;align-items:center;gap:6px;cursor:pointer;';
const pausedBadge = task.status === 'paused'
? `<span class="task-paused-badge" title="Paused" style="position:relative;top:4px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg> paused</span>`
: '';
const statusBadge = task.status === 'paused'
? `<span class="task-status-badge task-paused-badge" data-task-status-action="resume" title="Click to resume" style="position:relative;top:4px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg> paused</span>`
: task.status === 'active'
? `<span class="task-status-badge task-active-badge" data-task-status-action="pause" title="Click to pause" style="position:relative;top:4px;"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><polygon points="7 4 19 12 7 20 7 4"/></svg> active</span>`
: '';
const builtinBadge = task.is_builtin
? `<span class="task-builtin-badge${task.is_modified ? ' modified' : ''}" title="${task.is_modified ? 'Built-in task — edited from its default' : 'Built-in task'}">built-in${task.is_modified ? ' · edited' : ''}</span>`
: '';
titleRow.innerHTML = `${_taskIcon(task)}<span class="memory-item-title">${_esc(task.name)}</span>${builtinBadge}<span style="flex:1;"></span>${pausedBadge}${_statusDot(task.status)}`;
titleRow.innerHTML = `${_taskIcon(task)}<span class="memory-item-title">${_esc(task.name)}</span>${builtinBadge}<span style="flex:1;"></span>${statusBadge}${_statusDot(task.status)}`;
// ... menu button (hover to show)
const actionsWrap = document.createElement('div');
@@ -690,6 +692,15 @@ function _renderList() {
meta.textContent = metaParts.join(' · ');
content.appendChild(meta);
const statusPill = titleRow.querySelector('[data-task-status-action]');
if (statusPill) {
statusPill.addEventListener('click', async (e) => {
e.stopPropagation();
if (statusPill.dataset.taskStatusAction === 'pause') await _doPause(task.id);
else await _doResume(task.id);
});
}
// Expandable detail (revealed on click) — like the library doc/chat cards:
// extra meta + last-run result + description.
const detail = document.createElement('div');
+10 -3
View File
@@ -9955,7 +9955,7 @@ textarea.memory-add-input {
opacity: 0.85 !important;
filter: saturate(0.9);
}
.task-paused-badge {
.task-status-badge {
display: inline-flex;
align-items: center;
gap: 3px;
@@ -9963,11 +9963,18 @@ textarea.memory-add-input {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--orange, #ff9800);
background: color-mix(in srgb, var(--orange, #ff9800) 12%, transparent);
padding: 2px 6px;
border-radius: 10px;
flex-shrink: 0;
cursor: pointer;
}
.task-paused-badge {
color: var(--orange, #ff9800);
background: color-mix(in srgb, var(--orange, #ff9800) 12%, transparent);
}
.task-active-badge {
color: var(--green, #50fa7b);
background: color-mix(in srgb, var(--green, #50fa7b) 12%, transparent);
}
.task-builtin-badge {