Outline / Table of contents improvements

@marcoambrosini

Describe the bug
There's many issues and complaints about how the outline / table of contents feature currently works:

The feature is hard to discover: better position for outline toggle button #6876
On small screen, it overflows the text content and is barley readable: Outline / table of contents overflow into notes field #7522, Outline placed over the text body when using full width option collectives#1715, ability to hide pages list (left sidebar) collectives#667
We currently use display: grid for the Text editor .content-wrapper container and its left and right siblings just to have a container for the outline. This leads to all kinds of problems with printing the document (see printing to pdf: lines cut off at page break #7553) and full width view of documents that contain a table (Markdown table will breake the whole design, if wide-text is enabled and you make the table wide enough to have a scroll bar #7228).

Expected behavior
It should be easy to toggle the table of contents. We should have a good design concept of where and how to display it, both on wide screens with much whitespace left and right to the editor, and on narrow screens without any extra horizontal whitespace.

Screenshots

See linked issues.

Cc @marcoambrosini @nextcloud/designers

And another possible solution, which is my preferred one at this point, would be to replace the content of NcSidebar with it.

I think we're needlessly anchored to the idea that whenever the sidebar unfolds because of a certain action triggered within the content, we have to automatically present all other possible actions that one can do in the sidebar. I don't think it makes much sense.
This seems like a good opportunity for breaking out of this pattern

If you think it's too much to break out of the pattern at this point, I suggest we move sharing into a dialog and replace that tab with the outline.
Reasoning: there's no need to be looking the document while creating a share. On the other hand when navigating an outline we have very much the need of looking at the document simultaneously

In general I really like the approach to move the outline to the sidebar, both for standalone Text (opened from Files app) and for Collectives. It solves many problems at a time:

The space for the sidebar is already taken into account in our design and we have a concept of how it works with different screen sizes.
It provides a unified solution people can get used to both in standalone Text and Collectives.
In Collectives we then have a clear order from generic to specific from left to right (Collectives list, page list, page content, page details).
We can get rid of the grid container in Text app that currently provides the wrapper containers that hold the outline. The grid container currently brings many problems, with print view, with tables that overflow the horizontal editor width.

I would prefer to implement the outline as a new tab in the sidebar though, as this is technically easier and doesn't bring the problem of hiding other content in the sidebar. In Collectives I don't see a big problem with it as we currently have four sidebar tabs. In Files app (on our company instance) we already have five tabs in the sidebar. In my opinion it still works well.

Fine by me as well, it's undoubtedly a step in the right direction even with this not ideal amount of tabs.

Would still prefer to move sharing to a dialog though.

@jancborchardt

Works well in English but translations will likely be cut off in a lot of languages already. However I agree that this is the most sensible position also considering the other technical factors. I remember lengthy discussions in the past about that we have too many tabs with 4/5 tabs already, so I'd like to get also some feedback from @jancborchardt here as well.

Would still prefer to move sharing to a dialog though.

I tend to agree, but out of scope for Text. Something that would need to happen in the files_sharing app.

@jancborchardt

After discussing this with @jancborchardt, we came up with the idea to implement the outline similar to how notion does it with some adjustments. I'll try to write down the approach:

If document has two or more headings, display outline skeleton on the right side
Extend to a popover that shows the full outline
On narrow desktop view, make the outline popover overflow the document
In outline popover, allow to pin it (make it persistent, don't collapse on mouseleave)
Don't display outline skeleton on mobile
On mobile, popover to show outline becomes fullscreen and no option to pin it
Hide and don't allow to display outline in rich workspace
Hide outline in print view
Ellipsize long headings in outline popover

Implementation details:

Get rid of grid container
Use a column on the right side with 250-300px for the outline
In Collectives, make sure that we have enough space for drag handler and outline in the wrapping container

Outline in Notion

@mejo-

@mejo- sounds good to me!

@marcoambrosini

Given that we also want to display an outline on mobile, how and where should it be positioned? Taking away horizontal space for it doesn't look great in my opinion:

Outline on mobile

@marcoambrosini @jancborchardt

Fixed with #8033.

Navigation Menu

Repository navigation

Outline / Table of contents improvements #7741

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Outline / Table of contents improvements #7741

Description

Activity

11 remaining items

marcoambrosini commented on Nov 5, 2025

marcoambrosini commented on Nov 5, 2025

mejo- commented on Dec 3, 2025

marcoambrosini commented on Dec 3, 2025

juliusknorr commented on Dec 3, 2025

mejo- commented on Dec 3, 2025

mejo- commented on Dec 3, 2025

jancborchardt commented on Dec 4, 2025

mejo- commented on Dec 8, 2025

mejo- commented on Dec 16, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions