Add ability to fold Group headings

[claremacrae]

From Discord

I'm using the Obsidian Tasks plugin and have a query like this:

```tasks
not done
group by filename
group by heading
path includes 90-Projects
```

Can you add a fold icon to the filenames and the headlines? It like to collapse some items when going through the list.

[claremacrae]

See #1323 - a request to fold indented tasks when viewed in reading mode.

[claremacrae]

See #1466 - another request to fold group headings.

[st--]

@claremacrae this is something I'd be very keen on too; I had a look at the code, how to make it work with the is-collapsed class (see #1323 (comment)) would be beyond me, but I was wondering if a simpler solution for folding away groups would be to just make use of the <detail> tag, i.e. edit

obsidian-tasks/src/Renderer/QueryRenderer.ts

Lines 314 to 322 in e65dd75

	private async addAllTaskGroups(tasksSortedLimitedGrouped: TaskGroups, content: HTMLDivElement) {
	for (const group of tasksSortedLimitedGrouped.groups) {
	// If there were no 'group by' instructions, group.groupHeadings
	// will be empty, and no headings will be added.
	await this.addGroupHeadings(content, group.groupHeadings);
	await this.createTaskList(group.tasks, content);
	}
	}

into something like this:

    private async addAllTaskGroups(tasksSortedLimitedGrouped: TaskGroups, content: HTMLDivElement) {
        for (const group of tasksSortedLimitedGrouped.groups) {
            // If there were no 'group by' instructions, group.groupHeadings
            // will be empty, and no headings will be added.

            const detailsGroup = content.createEl('details');
            const summaryItem = content.createEl('summary'); // or detailsGroup.createEl(...)?
            // detailsGroup.appendChild(summaryItem) ?
            await this.addGroupHeadings(summaryItem, group.groupHeadings);

            await this.createTaskList(group.tasks, detailsGroup); // does this then create the new elements within the <details></details> tag?
        }
    }

It's been a while that I've dealt with javascript so my implementation might be completely off, but if you think that's going in the right direction, I would be happy to try and implement this. <details> should provide folding/unfolding out of the box at least...

[claremacrae]

Hi @st-- Thank you very much indeed for looking at this.

I am currently overwhelmed with work finishing off the Dependencies feature, so won't have the capacity to do much supporting on other PRs for a couple of weeks or more.

Re <detail> - I don't really know the consequences of this, but if Obsidian wasn't using <detail> to represent folding, then I think it will likely be trading one set of unhappy users for another...

I think Tasks should do whatever Obsidian does for folding headings. And it should honour the user settings as to whether folding is enabled or not.

I note that dataview-generated headings also don't support folding.

[st--]

Dataviews seems to have the same issue (and e.g. in this thread someone also suggests the <details> workaround). It might be a fundamentally challenging problem, as apparently the rendering of views like Dataview or Tasks plugin happens at a different stage to the rendering of the markdown. So I'm not sure if it's even possible to do it in the same way as Obsidian :(

I might try and implement the <details> approach at least for myself - and if I get it to work, you can see if you'd still want to include it in Tasks (perhaps with its own config flag) once you have capacity for it again.

[claremacrae]

That’s a great idea. Thank you very much indeed.

[claremacrae]

I've had a look at the generated HTML and asked the following in #theme-dev in Discord:

---

I'm not sure if this is a #plugin-dev or #theme-dev question... I think it needs more CSS expertise, so will start here....
The Tasks plugin can group tasks together under headings - Levels 4, 5, and 6.
I would love to be able to make those headings foldable: currently they don't fold.
I've looked at the HTML generated...

For ##### Later (3 tasks), in Reading mode, default theme, all snippets turned off, Obsidian generates:

<div>
    <h5 data-heading="Later (3 tasks)">
        <div class="heading-collapse-indicator collapse-indicator collapse-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="svg-icon right-triangle">
                <path d="M3 8L12 17L21 8"></path>
            </svg>
        </div>
        Later (3 tasks)
    </h5>
</div>

(The above code is the same, regardless of whether or not Settings > Editor > Fold headings is enabled.

And Tasks generates:

<h5 class="tasks-group-heading">
    <p>Later (3 tasks)</p>
</h5>

Should I simply rewrite the heading-creation in Tasks, to mimic those 10 or so lines of Obsidian code (and would it then work on all platforms?)
Or is there a less verbose way of achieving the folding effect?
(in case it's relevant, the code is all generated inside a class that inherits MarkdownRenderChild.

---

[jamie9090]

[claremacrae]

Please don’t just +1 - they are an interruption and definite demotivation.
Use the up-vote facility, and new information that adds context or helps solve the issue is always welcome.

[jamie9090]

Sorry Clare! Well noted. Thank you for your efforts. 🙏️