fix(dashboard): replace task status emoji icons with Lucide icons in session-detail

- Replace ✓/○/⟳ with check-circle/circle/loader-2 icons
- Update formatStatusLabel() to return HTML with Lucide icons
- Update task stats bar and bulk action buttons
- Simplify toast messages to avoid HTML in text content
- Add lucide.createIcons() call in updateTaskStatsBar()
This commit is contained in:
catlog22
2025-12-08 23:31:01 +08:00
parent 02f77c0a51
commit 2ba7756d13

View File

@@ -178,21 +178,21 @@ function renderTasksTab(session, tasks, completed, inProgress, pending) {
<!-- Combined Stats & Actions Bar --> <!-- Combined Stats & Actions Bar -->
<div class="task-toolbar"> <div class="task-toolbar">
<div class="task-stats-bar"> <div class="task-stats-bar">
<span class="task-stat completed">${completed} completed</span> <span class="task-stat completed"><i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>${completed} completed</span>
<span class="task-stat in-progress">${inProgress} in progress</span> <span class="task-stat in-progress"><i data-lucide="loader-2" class="w-4 h-4 inline mr-1"></i>${inProgress} in progress</span>
<span class="task-stat pending">${pending} pending</span> <span class="task-stat pending"><i data-lucide="circle" class="w-4 h-4 inline mr-1"></i>${pending} pending</span>
</div> </div>
<div class="toolbar-divider"></div> <div class="toolbar-divider"></div>
<div class="task-bulk-actions"> <div class="task-bulk-actions">
<span class="bulk-label">Quick Actions:</span> <span class="bulk-label">Quick Actions:</span>
<button class="bulk-action-btn" onclick="bulkSetAllStatus('pending')" title="Set all tasks to pending"> <button class="bulk-action-btn" onclick="bulkSetAllStatus('pending')" title="Set all tasks to pending">
<span class="bulk-icon"></span> All Pending <span class="bulk-icon"><i data-lucide="circle" class="w-4 h-4"></i></span> All Pending
</button> </button>
<button class="bulk-action-btn" onclick="bulkSetAllStatus('in_progress')" title="Set all tasks to in progress"> <button class="bulk-action-btn" onclick="bulkSetAllStatus('in_progress')" title="Set all tasks to in progress">
<span class="bulk-icon"></span> All In Progress <span class="bulk-icon"><i data-lucide="loader-2" class="w-4 h-4"></i></span> All In Progress
</button> </button>
<button class="bulk-action-btn completed" onclick="bulkSetAllStatus('completed')" title="Set all tasks to completed"> <button class="bulk-action-btn completed" onclick="bulkSetAllStatus('completed')" title="Set all tasks to completed">
<span class="bulk-icon"></span> All Completed <span class="bulk-icon"><i data-lucide="check-circle" class="w-4 h-4"></i></span> All Completed
</button> </button>
</div> </div>
</div> </div>
@@ -271,9 +271,9 @@ function renderDetailTaskItem(task) {
function formatStatusLabel(status) { function formatStatusLabel(status) {
const labels = { const labels = {
'pending': 'Pending', 'pending': '<i data-lucide="circle" class="w-3 h-3 inline mr-1"></i>Pending',
'in_progress': 'In Progress', 'in_progress': '<i data-lucide="loader-2" class="w-3 h-3 inline mr-1"></i>In Progress',
'completed': 'Completed' 'completed': '<i data-lucide="check-circle" class="w-3 h-3 inline mr-1"></i>Completed'
}; };
return labels[status] || status; return labels[status] || status;
} }
@@ -582,7 +582,7 @@ async function updateSingleTaskStatus(taskId, newStatus) {
// Update UI // Update UI
updateTaskItemUI(taskId, newStatus); updateTaskItemUI(taskId, newStatus);
updateTaskStatsBar(); updateTaskStatsBar();
showToast(`Task ${taskId} ${formatStatusLabel(newStatus)}`, 'success'); showToast(`Task ${taskId} status updated`, 'success');
} else { } else {
showToast(result.error || 'Failed to update status', 'error'); showToast(result.error || 'Failed to update status', 'error');
// Revert select // Revert select
@@ -624,7 +624,7 @@ async function bulkSetAllStatus(newStatus) {
// Update all task UIs // Update all task UIs
taskIds.forEach(id => updateTaskItemUI(id, newStatus)); taskIds.forEach(id => updateTaskItemUI(id, newStatus));
updateTaskStatsBar(); updateTaskStatsBar();
showToast(`All ${taskIds.length} tasks ${formatStatusLabel(newStatus)}`, 'success'); showToast(`All ${taskIds.length} tasks updated`, 'success');
} else { } else {
showToast(result.error || 'Failed to bulk update', 'error'); showToast(result.error || 'Failed to bulk update', 'error');
} }
@@ -664,7 +664,7 @@ async function bulkSetPendingToInProgress() {
if (result.success) { if (result.success) {
pendingTaskIds.forEach(id => updateTaskItemUI(id, 'in_progress')); pendingTaskIds.forEach(id => updateTaskItemUI(id, 'in_progress'));
updateTaskStatsBar(); updateTaskStatsBar();
showToast(`${pendingTaskIds.length} tasks: Pending → In Progress`, 'success'); showToast(`${pendingTaskIds.length} tasks moved to In Progress`, 'success');
} else { } else {
showToast(result.error || 'Failed to update', 'error'); showToast(result.error || 'Failed to update', 'error');
} }
@@ -704,7 +704,7 @@ async function bulkSetInProgressToCompleted() {
if (result.success) { if (result.success) {
inProgressTaskIds.forEach(id => updateTaskItemUI(id, 'completed')); inProgressTaskIds.forEach(id => updateTaskItemUI(id, 'completed'));
updateTaskStatsBar(); updateTaskStatsBar();
showToast(`${inProgressTaskIds.length} tasks: In Progress → Completed`, 'success'); showToast(`${inProgressTaskIds.length} tasks completed`, 'success');
} else { } else {
showToast(result.error || 'Failed to update', 'error'); showToast(result.error || 'Failed to update', 'error');
} }
@@ -743,10 +743,12 @@ function updateTaskStatsBar() {
const statsBar = document.querySelector('.task-stats-bar'); const statsBar = document.querySelector('.task-stats-bar');
if (statsBar) { if (statsBar) {
statsBar.innerHTML = ` statsBar.innerHTML = `
<span class="task-stat completed">${completed} completed</span> <span class="task-stat completed"><i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>${completed} completed</span>
<span class="task-stat in-progress">${inProgress} in progress</span> <span class="task-stat in-progress"><i data-lucide="loader-2" class="w-4 h-4 inline mr-1"></i>${inProgress} in progress</span>
<span class="task-stat pending">${pending} pending</span> <span class="task-stat pending"><i data-lucide="circle" class="w-4 h-4 inline mr-1"></i>${pending} pending</span>
`; `;
// Reinitialize Lucide icons
if (typeof lucide !== 'undefined') lucide.createIcons();
} }
} }