# Plugin: Note Tabs

**URL:** <https://discourse.joplinapp.org/t/plugin-note-tabs/12752>\
**Category:** Plugins\
**Created:** [28 November 2020 14:17 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752 "2020-11-28T14:17:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 14:17 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/1 "2020-11-28T14:17:13Z")

</div>

Here's my first plugin I wrote. It shall allow you to "open" multiple notes at a time in tabs.

You can install it via the Joplin plugin system. Please see [here](https://github.com/benji300/joplin-note-tabs#automatic-joplin-v164-and-newer) for details.

I hope it will help you to improve your daily work with Joplin. 🙂

## Features

- Display selected note as tab
- Additional display options below the tabs
  - Navigation buttons ( `historyBackward/Forward` )
  - Completion status of all checklists in selected note
  - Full breadcrumbs for selected note

- Pin note(s) to the tabs
  - Either via command or drag & drop from the note list

- Save pinned tabs permanently
  - Stored in database (not synced with other devices!)

- Remember last opened and unpinned note
- Change position of tabs within the panel
  - Either via drag & drop or keyboard shortcuts (which have been assigned to the corresponding commands)

- Toggle to-do state directly on the tabs
  - Optionally unpin completed to-dos automatically

- Configurable style attributes
- Support horizontal and vertical layout

For more details about all features and usage please refer to the [README](https://github.com/benji300/joplin-note-tabs#joplin-note-tabs).

## Usage

### Panel position

By default, all new plugin panels are placed on the right side of the app screen. However, this can be changed manually later. Please see [here](https://github.com/benji300/joplin-note-tabs#place-the-panel) how to place the panel at the desired position.

## Screenshots

 ![tabs-top-horizontal](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/2/2326da6b8dd49a0a976da24eb9ab7ffedac84204.png)

 ![tabs-right-vertical](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/c6910723f254de679a70fe071c844c09bbb2d963.png)

## Repository

> **[GitHub - benji300/joplin-note-tabs: Allows to open several notes at once in tabs and...](https://github.com/benji300/joplin-note-tabs)**
>
> Allows to open several notes at once in tabs and pin them.

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 14:32 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/2 "2020-11-28T14:32:28Z")

</div>

Great, thanks!

I can't find how to change layout to horizontal. Plugin settings look like this

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/7/79df880309b0942218b92c14ae3c4d0b991aa0ac.png)

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 14:36 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/3 "2020-11-28T14:36:52Z")

</div>

Hi @danil-tolkachev,

thanks for your feedback.

The layout changes automatically when you decrease the panel width. Currently it switches at about 400px width from horizontal to vertical.

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 14:41 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/4 "2020-11-28T14:41:51Z")

</div>

Oh, it doesn't work well on my Linux Mint 19.3

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/3edc67c3578ad0cb188e4b5c4ed40e3466963da0.png)

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 14:45 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/5 "2020-11-28T14:45:51Z")

</div>

Sorry for that question, but have you tried to decrease the size of the right most panel a bit more? Could you try to drag the splitter (between content and tabs panel) to right window size?

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 14:50 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/6 "2020-11-28T14:50:47Z")

</div>

Here are some tests.

[https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bd326c70c62732de4b5193ca4d6e71ecbdb40d68.mp4](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bd326c70c62732de4b5193ca4d6e71ecbdb40d68.mp4)

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 15:06 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/7 "2020-11-28T15:06:48Z")

</div>

Okay what I can see is what I expect it should do. If you decrease the width of the panel the layout of the tabs is changed.  
Width \> 400px =\> all tabs are displayed inline with the specified min and max-width  
Width \< 400px =\> all tabs are displyed in single rows and expanded to the full-width of the panel

Am I right that your expactation would rather be to use the vertical layout always indepent from the panel's width?

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 15:11 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/8 "2020-11-28T15:11:00Z")

</div>

I just want this layout like yours 😉

 ![tabs-top-horizontal](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/2/2326da6b8dd49a0a976da24eb9ab7ffedac84204.png)

How can I configure it?

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 15:16 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/9 "2020-11-28T15:16:06Z")

</div>

Ah sorry... now I see. This description is currently missing... you're right.  
I want to create a short screencast for that...

But for now do the following steps:

- navigate to **View \> Change application layout**
- Use the arrow keys (the displayed ones, not keyboard keys) to move the panel at the desired position
- Press ESC to save the layout and return to normal mode
- Move the splitter (between content and tabs panel) up to reach the desired height of the panel

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 15:25 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/10 "2020-11-28T15:25:09Z")

</div>

Thanks for clarification. I haven't seen **View \> Change application layout** before.

Don't you think that check box **Horizontal layout** in the plugin settings would be more intuitive? Is it possible with current Joplin Plugin API?

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [28 November 2020 15:37 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/11 "2020-11-28T15:37:56Z")

</div>

wow, well done, I didn't even know if was possible to do this with the current plugin system.

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 15:45 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/12 "2020-11-28T15:45:03Z")

</div>

I'm not quite sure, because it would only control the behavior (layout) inside the panel itself.  
But it is currently not possible to change the position of a panel programmatically via the plugin API.

But if it helps you to "force" the layout of the panel with a setting, I could create a feature request.

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 15:51 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/13 "2020-11-28T15:51:57Z")

</div>

Here's a short screencast of the basic usage:

[https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/c3de108d4d43279f510ea2cc812c0e1d010a7028.mp4](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/c3de108d4d43279f510ea2cc812c0e1d010a7028.mp4)

---

<div class="post-metadata">

**Author:** ![danil-tolkachev](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/danil-tolkachev/32/1552_2.png) [@danil-tolkachev](https://discourse.joplinapp.org/u/danil-tolkachev)\
**Post date:** [28 November 2020 16:01 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/14 "2020-11-28T16:01:00Z")

</div>

> But if it helps you to "force" the layout of the panel with a setting, I could create a feature request.

I think it would be more convenience way to change layout. But we can wait what another users think.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [28 November 2020 16:13 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/15 "2020-11-28T16:13:06Z")

</div>

> [@benji300](#):
>
> But it is currently not possible to change the position of a panel programmatically via the plugin API.

Maybe some API could be provided to allow positioning relatively to one of the default components (sidebar, noteList, editor).

For example with a function like `moveNear(componentName, direction)`. So in your case, you would call `moveNear("editor", "top")` to put it on top of the editor, or `moveNear("editor", "right")` to move it to the right of the editor as a sidebar. I think that would cover most cases, without having to expose the complex tree of components that makes up the layout.

Maybe a way to set a default size would be good too.

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [28 November 2020 16:38 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/16 "2020-11-28T16:38:16Z")

</div>

I've created a feature request. So you can upvote it 😉 Let's see what other users think...

> <https://github.com/benji300/joplin-note-tabs/issues/2>
>
> Add an option to the user settings to force either horizontal or vertical layout of tabs. Regardless of the width or...

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [29 November 2020 15:44 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/17 "2020-11-29T15:44:53Z")

</div>

Yes I think this would be a good idea to at least give the initial position of a panel.  
That would help most users I think. If you want to you can still move the panel as you like.

The default height would be very helpful in this case also.  
Maybe as an optional parameter of the function you proposed `moveNear("editor", "top", 40)`.

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [30 November 2020 17:46 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/18 "2020-11-30T17:46:06Z")

</div>

Sorry for bothering you @laurent , but I found two more points in the plugin API that I would like to clarify.

1. Would it be possible to add an additional event that is triggered each time any note property value is changed (e.g. `joplin.workspace.onNotePropertyChange()`)? With this plugin I came across a little unpleasantness. If a to-do is set to complete in the list, there is no event triggered to update the panel. The user has to change the selected note to update the panel. See attached screencast. The plugin currently listens to the following events to update the panel:

```auto
		WORKSPACE.onNoteSelectionChange(() => {
			updateTabsPanel();
		});

		WORKSPACE.onNoteContentChange(() => {
			updateTabsPanel();
		});

		WORKSPACE.onSyncComplete(() => {
			updateTabsPanel();
		});

```

1. Is it intended that when switching to an empty list, the selected note is kept? Currently I can determine this behavior with the plugin. The selected note remains highlighted when switching to an empty list. See also the screencast.

 ![2020-11-30 18-36-12](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/a/abb12206c320b1c09ccb5ecd7c7dc293a8ac3456.gif)

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [30 November 2020 17:55 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/19 "2020-11-30T17:55:46Z")

</div>

> [@benji300](#):
>
> 1. Would it be possible to add an additional event that is triggered each time any note property value is changed (e.g. `joplin.workspace.onNotePropertyChange()` )? With this plugin I came across a little unpleasantness. If a to-do is set to complete in the list, there is no event triggered to update the panel. The user has to change the selected note to update the panel. See attached screencast.

If I remember correctly onNoteContentChange is supposed to be triggered when any property change, so it might just be that this event is buggy and needs to be fixed.

> 1. Is it intended that when switching to an empty list, the selected note is kept? Currently I can determine this behavior with the plugin. The selected note remains highlighted when switching to an empty list. See also the screencast.

Also a bug. State handling is one of the oldest part of Joplin and at time is a bit messy, but if there's no note in the list the selected note state should be cleared. I'll have a look.

---

<div class="post-metadata">

**Author:** ![benji300](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/benji300/32/5645_2.png) [@benji300](https://discourse.joplinapp.org/u/benji300)\
**Post date:** [30 November 2020 18:09 UTC](https://discourse.joplinapp.org/t/plugin-note-tabs/12752/20 "2020-11-30T18:09:01Z")

</div>

Thanks for your quick response and checking.  
But the topics are not the highest priority, I think there are more important things to do first.

[Next page](https://discourse.joplinapp.org/t/plugin-note-tabs/12752.md?page=2)