style: simplify loop cards and update status icons

Loop Cards:
- Remove left border accent from cards (cleaner look)
- Remove status-specific border-left colors
- Keep simple 1px border all around

Status Icons Updated:
- created: circle → square
- running: activity → zap (lightning bolt)
- paused: pause-circle → pause
- completed: check-circle-2 → check
- failed: x-circle → alert-triangle

Both renderLoopCard() and getStatusIcon() functions updated for consistency.
This commit is contained in:
catlog22
2026-01-22 11:33:45 +08:00
parent 62d5ce3f34
commit ddb7fb7d7a
2 changed files with 11 additions and 19 deletions

View File

@@ -332,7 +332,6 @@
margin-bottom: 0.75rem;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-left: 4px solid hsl(var(--muted-foreground));
border-radius: 0.625rem;
cursor: pointer;
transition: all 0.2s ease;
@@ -351,13 +350,6 @@
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
}
/* Status border colors */
.loop-card.status-created { border-left-color: hsl(var(--muted-foreground)); }
.loop-card.status-running { border-left-color: hsl(var(--info)); }
.loop-card.status-paused { border-left-color: hsl(var(--warning)); }
.loop-card.status-completed { border-left-color: hsl(var(--success)); }
.loop-card.status-failed { border-left-color: hsl(var(--destructive)); }
.loop-card-header {
display: flex;
align-items: center;

View File

@@ -305,11 +305,11 @@ function renderLoopCard(loop) {
// Lucide icons for each status
const statusIcons = {
created: 'circle',
running: 'activity',
paused: 'pause-circle',
completed: 'check-circle-2',
failed: 'x-circle'
created: 'square',
running: 'zap',
paused: 'pause',
completed: 'check',
failed: 'alert-triangle'
};
// Check if this is a v2 loop (has title field) or v1 loop (has task_id field)
@@ -1318,13 +1318,13 @@ window.destroyLoopMonitor = function() {
// Helper functions
function getStatusIcon(status) {
const icons = {
created: 'circle',
running: 'activity',
paused: 'pause-circle',
completed: 'check-circle-2',
failed: 'x-circle'
created: 'square',
running: 'zap',
paused: 'pause',
completed: 'check',
failed: 'alert-triangle'
};
return icons[status] || 'circle';
return icons[status] || 'square';
}
function escapeHtml(text) {