Add heading-grouped, nested, draggable todos with keyboard navigation
Some checks failed
Node.js build / build (20.x) (push) Failing after 5m48s
Node.js build / build (22.x) (push) Failing after 5m43s

Enhance the todo tracker sidebar panel with:
- Group todos by heading from the source file
- Display nested (indented) todos as a tree
- Drag-and-drop to reorder todos within/across heading groups
- Keyboard navigation (arrow keys, Enter to open, M to move, toggle hotkey)
- Right-click context menu replacing the ellipsis button
- Proper focus management (no focus stealing on refresh)
- Platform-aware Obsidian hotkey matching for toggle checkbox

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-20 09:56:45 -08:00
parent 2936f7d359
commit 349810aecf
8 changed files with 984 additions and 53 deletions

View File

@@ -2,6 +2,7 @@
.todo-tracker-container {
padding: 10px;
outline: none;
}
.todo-tracker-header {
@@ -20,18 +21,45 @@
text-align: center;
}
/* Heading Groups */
.todo-tracker-group {
margin-bottom: 12px;
border-radius: 4px;
transition: background-color 0.15s ease;
}
.todo-tracker-group-heading {
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
padding: 4px 4px 4px 0;
margin-bottom: 2px;
}
/* Todo Lists */
.todo-tracker-list {
list-style: none;
padding: 0;
margin: 0;
}
.todo-tracker-nested-list {
list-style: none;
padding-left: 20px;
margin: 0;
width: 100%;
}
/* Todo Items */
.todo-tracker-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 6px 4px;
border-radius: 4px;
cursor: grab;
transition: background-color 0.15s ease;
}
.todo-tracker-item:hover {
@@ -55,23 +83,26 @@
color: var(--text-muted);
}
.todo-tracker-menu-btn {
flex-shrink: 0;
background: none;
border: none;
padding: 4px;
border-radius: 4px;
cursor: pointer;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.15s ease;
}
.todo-tracker-item:hover .todo-tracker-menu-btn {
opacity: 1;
}
.todo-tracker-menu-btn:hover {
/* Keyboard focus */
.todo-tracker-item-focused {
outline: 2px solid var(--interactive-accent);
outline-offset: -2px;
background-color: var(--background-modifier-hover);
}
/* Drag and drop */
.todo-tracker-item-dragging {
opacity: 0.4;
}
.todo-tracker-drop-above {
border-top: 2px solid var(--interactive-accent);
}
.todo-tracker-drop-below {
border-bottom: 2px solid var(--interactive-accent);
}
.todo-tracker-drag-over {
background-color: var(--background-modifier-hover);
color: var(--text-normal);
}