Option To Keep FileTree Toggles Closed by default

[yntpdotme]

What version of starlight are you using?

0.32.5

What is your idea?

Currently, the FileTree view displays all toggles expanded by default. This feature request suggests adding an option to allow users to keep the toggles closed by default while still providing the flexibility to expand folders when necessary

Why is this feature necessary?

• Users working with large directory structures often face clutter and distraction due to expanded toggles.
• Providing the option to keep toggles closed by default will allow for a more streamlined and focused experience.
• The feature should improve the overall user experience, especially for users dealing with large file structures.

Do you have examples of this feature in other projects?

• If feasible, the implementation could be controlled via user preferences, making it customizable for each user.

• In Notion all toggles are closed by default and if user open particular toggle it preserve that setting...

• Current view
  

• Proposed View
  

[delucis]

Thanks for the request @yntpdotme!

Some quick notes to share off the top of my head:

• Technically, toggling state is pretty simple: by default, the component renders a <details open> element for each directory with content. Collapsing a directory by default would require omitting the open attribute when rendering it:

  starlight/packages/starlight/user-components/rehype-file-tree.ts

  Line 120 in 8278ec9

  h('details', { open: hasContents }, [

• Collapsing all directories in a tree could also be quite simple: an API with a component prop like <FileTree collapseDirectories> would be simple to implement.

• That API is also limited though. As your proposed output example already shows, wanting to collapse only some directories is likely to be a reasonably common desire.

• Collapsing directories selectively is more complex: we use the nice shorthand list format to author file trees which is clean and readable in the source file, but it does make it hard to set things like states or properties on parts of the tree.

[yntpdotme]

• Thanks for quick notes.. @delucis ✨
• In Notion all toggles are closed by default and if user open particular toggle it preserve that setting...
  so how can we have something like this for <FileTree collapseDirectories> .
• I guess you were planning to do this state management for Sidebar component right..?

[delucis]

Personally, I think preserving state across navigations should be out of scope. It’s relatively complex to do and I’m not really sure how useful it is? How often is it important for a user to return to a page and see the exact same collapsed state they previously saw in an example file tree?

With the sidebar it makes sense because we aim to improve visual stability across navigations to aid a user’s ability to track their journey. And we have just the single sidebar to store and restore. With file trees, we’d need some kind of unique ID to store each tree’s state under and it could end up being a lot of stored data and extra code. I’m not sure there’s a use case that justifies that?

[yntpdotme]

• Make sense that for FileTree is relatively complex.
• Does Starlight support persisting states of sidebar..?

[delucis]

Does Starlight support persisting states of sidebar..?

Yup!