Split view of the File Pane

[HaujetZhao]

Use case or problem

In the file pane of the Obsidian, the files and the folders show in one single pane.

Take the help vault as an example, if I want to expand the How to folder:

it would become like this:

All the other folders are pushed out of the screen. If I want to check out the Panes folder, I have to collapse the How to folder, then expand the Panes folder. That’s not pleasant, right?

Proposed solution

To improve the experience, the split view could be introduced, which means the File Pane is split into two parts, one parts only show the folders, and the other parts only shows the files within the selected folder, like this:

In that way, exploring the vault architecture won’t require frequent expanding and collapsing operations any more.

Current workaround (optional)

Bear with it.

Related feature requests (optional)

[EleanorKonik]

• The File Tree Alternative plugin creates a file explorer similar to Evernote where folders and files are in separate leafs. It may do what you want, and if not the dev would probably be amenable to a feature request

[HaujetZhao]

Kind of nice, but still, exploring folders need a lot of back and forth steps. Looking forward to a up-down split view solution.

[ozan]

Hi @HaujetZhao

I initially developed the plugin as you mentioned in the forum but there are some obstacles to fully manipulate the default file explorer of Obsidian. I was hiding the file elements to ensure they are visible only in a separate leaf, however, Obsidian has some features to add space automatically into the place, where file elements don’t exist anymore. I talked with Licat, but he didn’t have a solution, either.

That’s why I moved away from that approach. But if you want to use such a feature specifically, please download this version of the plugin and install it manually:

Release 1.0.1 · ozntel/file-tree-alternative

All next releases will be different so please ensure that you don’t update by mistake from the community plugins.

@EleanorKonik just FYI

Version 1.0.1 Looks as below:

Obsidian File Tree Alternative Plugin

The New Version:

File Tree Alternative New Version

[brimwats]

out of curiosity, will this work with custom CSS that changes the color of files + subfolders?

here’s a decent chunk of the CSS for you to peep at:

/* Change all text to lighter */
.nav-file-title-content, .nav-folder-title-content {
    color: var(--FoldText);
}

/* Set up explorer container margins */
.nav-files-container{margin: 0px 5px;}

/* Remove collapse arrow from top level folders */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{display: none;}


/* Top Level Folder Titles */
    .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 16px;
        color: var(--FoldText);
        padding-left: 3px;
        margin-top: 3px; /* space between top level sections */
        border-radius: 20px 20px 0px 0px;
        }
/* Rounded borders */
    .nav-folder.mod-root>.nav-folder-children>.nav-folder.is-collapsed>.nav-folder-title{
        border-radius: 20px;
        }

/* General Nav Folder Children (this is the part that expands from each top level folder) */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-children{
    padding-left: 0px;
    border-top: var(--FoldText) 1px solid;
    border-radius: 0px 0px 20px 20px;
    padding-bottom: 12px;
}

.nav-file-title{
    padding-left: 5px;
}

/* active file increase font size and removes normal highlight marker */
    .nav-file-title.is-active{ 
        background-color: #00000000;
        font-size: 105%;}
/* Adds hemisphere marker to active file instead */
    .nav-file-title.is-active::before{
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--FoldText);
        position: absolute;
        left: -9px;
        margin-top: 4px;}

[ozan]

The answer is yes and no.

The new version of the plugin uses a totally new view for the folders. Hence, your folder styling won’t work. As for the files list, I used the class names, which are used by Obsidian. Classes like nav-file-title, is-active will work.

If you prefer using the old version (v 1.0.1), which I shared above the link for, both folder and file views are using Obsidian classes. Your snippets should work.

Hope this clarifies.