Subtask Tree
Nested subtask view with two levels of indented checkboxes, expand chevrons on parent nodes, and a progress bar that rolls up only leaf-node completion.
Nested subtask view with two levels of indented checkboxes, expand chevrons on parent nodes, and a progress bar that rolls up only leaf-node completion.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Subtask Tree is the hierarchical task view for ACM-247 (Design system audit, assigned to Avery Stone), a two- level indented tree with expand chevrons on parent nodes, filled checkboxes on completed items with strikethrough labels, and a Progress bar above the list that rolls up the leaf-node count, showing 3 of 6 done. The inner node "Document token mismatches" is expanded to reveal three sub-items: Color tokens (done), Spacing tokens, and Typography scale.
The tree is a typed recursive Subtask array and a countLeaves helper that only scores leaves so intermediate nodes do not double-count. Indentation is computed inline via paddingLeft with 24px per depth level.
Reach for this block on a task detail page wherever tasks decompose into tracked sub-steps, wired to your task hierarchy endpoint. Pair it with the task comments panel on the same detail view.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the engineering task breakdown view. Other subtask trees:
Tip: only count leaf nodes in the progress rollup, counting every node in the tree inflates the denominator and makes 80% feel like nothing happened.