feat(KB-038): add steps toggle to TaskCard

- Add steps toggle state and expand/collapse UI to TaskCard
- Add expand/collapse all steps button for better task navigation
- Add comprehensive tests for steps toggle functionality
- Update styles.css with toggle button and step list styling
- Include changeset for patch release
This commit is contained in:
gsxdsm
2026-03-29 19:40:11 -07:00
parent b93bcc0ef2
commit e75a09d4c9
4 changed files with 345 additions and 12 deletions

View File

@@ -610,6 +610,90 @@ body {
flex-shrink: 0;
}
/* Steps toggle and list */
.card-steps-toggle {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-size: 11px;
color: var(--text-muted);
transition: color 0.15s ease;
}
.card-steps-toggle:hover {
color: var(--text);
}
.card-steps-toggle:focus {
outline: 1px solid var(--todo);
outline-offset: 1px;
border-radius: 2px;
}
.card-steps-toggle-icon {
transition: transform 0.2s ease;
}
.card-steps-toggle-icon.expanded {
transform: rotate(180deg);
}
.card-steps-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
max-height: 200px;
overflow-y: auto;
}
.card-step-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.card-step-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.card-step-dot--pending {
background: var(--border, #30363d);
}
.card-step-dot--in-progress {
background: var(--todo, #58a6ff);
}
.card-step-dot--done {
background: var(--color-success, #3fb950);
}
.card-step-dot--skipped {
background: var(--text-dim, #484f58);
}
.card-step-name {
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-step-name.completed {
text-decoration: line-through;
opacity: 0.6;
}
/* === Modals === */
.modal-overlay {
display: none;