As a researcher, the tab feature is essential for multiple-file editing experience. Personally, I often go back and forth between dozens of files for cross referencing, comparing, etc. However, this quickly becomes inefficient. In the following figure, only a handful of files are open, but the tabs are too narrow for figuring out which opened file is where. This issue becomes more severe when one relies on screen splitting.
There is a feature request for vertical tabs and a plugin provides this feature. Pretty much every modern web browser supports this feature, and I want to bring this to Obsidian. Some workarounds are suggested in the original post, but none of these are ideal.
For example, the existing vertical tabs plugin works in many cases, but does not support long filenames and multi-panel layouts very well.
To solve these issues, I developed a new plugin (currently still under code review). As shown in the following figure, it groups tabs by their residing panels, and displays the whole file name in the tabs. To make the UI space efficient without breaking any feature, it only display the active tabs; all other tabs are visible in the vertical tab view. You can drag the horizontal tab (provided by Obsidian) freely to other existing panels or make some new panels.
Currently this plugin is still a MVP (Minimum Viable Product). I spent days on experimenting and figuring out the best UX (User Experience). Development, for now, is actually an easy step, which takes a couple of hours. I posted my plugin here to see if anyone else has any suggestions, as its improvements could be time consuming.
Some functionalities in my original design have not been implemented yet, since the API provided by the Obsidian team is quite limited (partially due to security concerns), and some ad hoc teaks or hacking might be necessary.
This is becoming a very useful plug-in, I’m now using it instead of Workspaces as it suits my workflow better.
Some suggestions (re: the attached image)
The icon for “visible/not visible” is the wrong way around (imho). A crossed-out eye icon says to me “can’t see”.
When switching to another group and hiding the current group, the active tab in the previous group remains highlighted. I would suggest either removing the highlight or (even better) muting the highlight by making the colour partially transparent.
The font styles don’t differentiate clearly between groups and note names. I would suggest an option for changing colour, size or bold.
The icon for “visible/not visible” is the wrong way around (imho). A crossed-out eye icon says to me “can’t see”.
This might be a UX design dilemma: Option 1. Action Perspective: From this point of view, the icon indicates the action that would be done. A “crossed-out eye” icon spells: “click me to make this invisible”. Option 2. State Perspective: As an alternative, the icon tells the state of some related object. A “crossed-out eye” icon tells: “this thing is invisible”.
My preference here is Option 1. To solve your problem, graying out the hidden group might be better, as it provides an intuitive and consistent visual indication of the state.
When switching to another group and hiding the current group, the active tab in the previous group remains highlighted. I would suggest either removing the highlight or (even better) muting the highlight by making the colour partially transparent.
This is a CSS issue regarding your theme. In the following demo, tab 1, 2 and 5 are highlighted since they are selected in their own groups. Tab 5’s highlighting is darker to show that it is the one being edited.
Drag-and-Drop for Tabs The drag-and-drop functionality for tabs is now always enabled, making workspace management easier. (#36)
Middle-Click Improvements Middle-mouse scrolling is no longer triggered accidentally. Middle-clicking now reliably closes tabs in all situations. (#14)
Vertical Tabs UsabilityVertical Tabs can no longer be dragged to the main split, preventing itself from getting hidden. (#35)
Clear File Paths For files with the same name, the full file path is now displayed to help distinguish between them. (#30)
Group Management A new button has been added to quickly collapse or expand all groups, except the sidebars, for better organization. (#37)
Click me to install
Coming Next
Hide/Unhide groups without closing/reopening the tabs
Please make sure to update to this latest version (v.0.5.4) as soon as possible.
Improved the speed and responsiveness of drag-and-drop.
