Feature Request: Ability to Hide Files in File Explorer Sidebar

[singodiyashubham87]

Description:

Currently, the StackBlitz Embed SDK does not provide a built-in option to hide specific files in the embedded project’s File Explorer sidebar. A feature that allows developers to hide files from the sidebar in an embedded project would be extremely helpful for streamlining the user interface and focusing on relevant files while still keeping them part of the project for reference.

Proposed Solution:

I would like to request a feature enhancement for the Embed SDK to include an option for hiding specific files from the File Explorer sidebar when embedding a project. This could be implemented as a configuration option when calling the sdk.embedProject function, such as:

const _embedSDK = async () => {
    return sdk.embedProject(
        embedRef.current,
        {
            files: questionContent,
            template: 'node',
            title: `My First Docs!`,
            description:`This is an example of my first doc!`,
        },
        {
            openFile: 'README.md',
            height:  800,
            width:  '100%',
            hiddenFiles: ['src/file1.js', 'file2.md'], // Files to hide in the file explorer sidebar
        }
    )
}

Use Cases:

Simplified Workspace: Hide files like configuration files, tests, or documentation that are not frequently edited.
Project Organization: Allow users to focus on the core files they are working on without distractions.
Cleaner UI: Provide a more streamlined and less overwhelming user interface.

Additional Context:

While there may be workarounds (such as manually deleting files or using git ignore files), having a built-in feature would be a more user-friendly and intuitive solution for those who want to work in a cleaner environment.