Plugin for 3-Pane File Explorer with Note Previews

[Jopp]

I added that last one sentence because it’s true and not because i wanna reinforce that I’m right, but… that I’ve a wider overview in regards.

The 3 pane layout is “recurrent” in many Mac apps so in the end it’s easy to attribute it to a “apple thing” - conceptually it’s not Apple but an outline as you pointed out. An outline is just a method of organizing.
Debating which brand used this layout most is most rhetorical nature and less helpful, imo.

A lot of customization is appealing but not essential, so what I do is, I try to understand what features are essential to improve a gui.

I still remember Notational velocity and you hadn’t any folders at all - very minimal and : functional. It’s still alive if someone wants to explore functionality over cosmetic designs .

[Dor]

@ontheexam

a “three pane” view (now pretty much standard in MacOS), where there is a pane with a list of folders, then a pane with the files in the current folder showing the title and previews of the note, and then the editor pane

This is one of the views available in Tangent Notes.

Tangent Notes is a separate program (Windows, Mac, Linux only) but can be used as if it were a plugin. It uses workspaces (= Obsidian vaults) and Obsidian syntax. As well as the Notes view, it also has a Feed view, showing the content of all the files in seuence.

Early stage in its development - and it’s one developer’s side project - but this part works well and easily integrates with Obsidian use. Based on Typewriter rather than Codemirror.

[BarryPorter13]

with workspaces in Obsidian, you should be able to set this up. I have seen a split 4 column
window ( 4X4) , that can be saved as. workspace.

Barry

[TRU]

This isn’t the same, but I was thinking about improvement to the sidebar when I added this thread. The idea might appeal to those interested in a three pane system.

Multi column sidebar

Hi, This is a quality of life request to add a little more versatility to the UI. Have the sidebar take advantage of widescreens. Currently we can tab panels or stack panels in the sidebar. Provide the option to have multiple columns as well. Currently we can use multiple editor windows in column or row configs. Having the sidebar contain multiple columns means you can have more info displayed about the current editor (links/tag). Also you can collapse it or hide it easier. For anyone with a …

@Jopp

I still remember Notational velocity and you hadn’t any folders at all - very minimal and : functional. It’s still alive if someone wants to explore functionality over cosmetic designs .

I don’t see this thread as a matter of cosmetic design choice. It’s more like a workflow choice. I’d accept an argument that Obsidian is different because of the graph, and backlinks, and whatever, but because we already have a file tree, it makes sense that some users would want it exploded into separate columns: divided by folders, and files, with a preview. All able to be hidden away with a hotkey for a distraction free experience when preferred. The examples provided by the op demonstrate the utility clearly, so I don’t accept an argument that it’s just a common pattern, and not rooted in function.

I’m sorry to say this is probably why most developers shouldn’t design user interfaces. It always pains me how they fail to understand user intent.

@Jopp

I added that last one sentence because it’s true and not because i wanna reinforce that I’m right, but… that I’ve a wider overview in regards.

@Jopp

Obsidian is multi-platform and these columns are not essential in its current Form and therefore, would only clutter up the Gui.
After a decade of app development and ui design, i know a bit how things could work or work even better.

BTW-that is exactly what you did. You made a judgement claim about the idea being not essential, and then stated your authority on the matter. It seemed arrogant and dismissive.

This is a forum on the internet, so I could be getting a totally wrong impression. If so I apologize. My point is to support options that would be used and useful.

[robertsmith]

@ontheexam , I want this too. I’d personally finance the development of this plugin.

If you’re a dev who can this— and you want to make it—speak up!

If I could have a ulysses folder/file browser in obsidian… I’d never use ulysses again!

[robertsmith]

Just going to play out what I think would be cool:

I’d like:

• A “Folder Sidebar” — on far left.
  • that shows all top-level folders in vault.
• A “Folder Contents Sidebar” — next to the Folder Sidebar.
  • that shows all folders & files inside the top-level folder…
  • when you
  • select a folder in the far-left Folder Sidebar.

In the “Folder Contents Sidebar”, I’d like:

• “File Thumbnails” to display:
  • A File’s Title.
  • A File’s Body Content (maybe 100-200 characters).

What do you think?

Can this be done?

[TRU]

Should have custom sort order option also. Goes along with this kind of view/workflow

File Explorer Custom Sort

I would like to be able to drag/drop files in the file explorer into a custom sort that can be toggled on/off along with other sort options.

[wazah]

I would love this! It would make a very large improvement in it’s functionality, maybe even essential for Obsidian. It’s not necessarily an ‘Apple’ design I’d say. In other note apps, like Evernote, Synology notes or even every e-mail program like Outlook it helps and improves day to day work for me having this kind of preview.

[ontheexam]

This looks exactly like how I would want it as well! Thanks for taking the time to mock this up.

Like you, I am really interested in such a layout. I like, also, the idea that as a plugin you could toggle this on or off. So you could go back to the more compact, “standard” file explorer if you wanted, or could use this layout.

Obsidian would also replace Ulysses for me if we had this! I think a three pane view like this is particularly well-suited to a certain kind of longer-form writing. Ulysses employs the metaphor of “sheets” that you can glue together. That is easily translatable to internal liniks and embeds in Obsidian. What we need is just this alternative way of looking at the files.

And I agree, a built-in ability to drag-around to custom sort would be really great too.

Who do we know in the developer community that could pull this off???

[ontheexam]

I agree!

I also think @Jopp 's reply ended up being a digression which put an over-emphasis on the “Apple” design, which wasn’t my primary point. I actually had Evernote in mind as well, I just don’t have that installed anymore. I’m kind of surprised that with the three-pane view being such a popular layout, there’s no plugin yet to support it as one possible view that might be helpful for users.

[technosean]

I like this as it is a time-tested format that works for a lot of people. I insist on his visual format when reading email: Mailbox List of emails with a line or two of context) Full view of one email. The format is helpful for quick overviews of a number of items. Many apps, including apple notes, use this view because of its utility. Also, people are used to working with this format, so presenting notes this way is immediately useful.

It could be fun, even. How is the content summary generated? There’s so many ways of doing this that it would be fun to discuss.

(BTW I would LOVE to see Omnisearch results presented in a 3 pane format like this.)

-Sean

[ontheexam]

Agreed! One thing that would be cool would be settings to choose the number of preview lines, the metadata, etc. that would be displayed under the title of the note.

Another thought: maybe an option to choose between showing the note title and the first heading (h1)

[moiraine]

To start off, one might just modify the existing file list to show a preview line, would not be too difficult I guess (needs to reset/trigger on file save or folder expand/close, etc), for example:

js

const container = document.getElementsByClassName('nav-file-title-content');

for (let i = 0; i < container.length; i++) {
    path_ = container[i].parentElement.dataset.path;
    if (path_.endsWith(".md")) {
        txt_ = await this.app.vault.read(this.app.vault.getAbstractFileByPath(path_));
    } else { 
        txt_ = "";
    }
    container[i].insertAdjacentHTML(
      'afterend',
      `<div class="fl_prv">${txt_}</div>`,
      );

    container[i].parentElement.style.flexFlow = 'wrap';
}

css

.fl_prv {
    color: #d3c8c8;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 7px;
    border: 0;
    vertical-align: middle;
}

.nav-file-title:not(.is-active) {
    border-bottom: 1px dashed #49c098;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.nav-file-title.is-active {
    border-bottom: 1px dashed #ca1daf;
}

.nav-folder-title {
    border-bottom: 1px dashed #8b8b8b;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

[wazah]

That looks awesome allready!
Is this a solution I (and other people) could implement by editing configuration files?

[wazah]

I am happy to edit the JS and CSS files myself. But I fail to find them.
In a search I checked the Program directory, the User folder and in the Vault directories.
Which would be the correct file/directory to edit?
Many thanks!

[khanhtoan529]

I found the solution! File-Tree Alternative Plugin:

[TRU]

That’s cool. Is there a way to change the styling?

[wazah]

I tried the FIle-Tree option, but I failed to get previews of the notes. Does it need a special setting enabled?

[PietArt]

Great job, thank the developer/s for this plugin! I searched a lot for that kind of solution and i know a lot of other obsidian users would like to use that too. Hopefully, they will ”find” this plugin.

[PietArt]

Hello wazah,

1. activate ”Preview File on Hover” in the external extensions settings for ”File Tree Alternative Plugin”
2. press the command-key (or try control, option-key, depends on your presettings) and hover a note with the cursor - a preview of the note will pop up.