Comments on the new layout introduced in 0.101.0

[XavierFigari]

Hello,

Congrats on this new release and thanks for all the efforts !
I'm starting this thread as you mentionned "Feedback is welcome" 🙂

Note : please update the link in the release notes :

See documentation of the changes and the new UI elements.

https://docs.triliumnotes.org/user-guide/concepts/ui/new-layout
instead of :
https://docs.triliumnotes.org/user-guide/concepts/ui/New%20Layout

My comments :

• I like the overall new look and clutter reduction
• I appreciate the fact that the button to allow editing read-only notes is back !! A very common use case for me is to scroll down to the bottom of a note, and then realize I want to add something to the note. Having a way to do this without scrolling up to the top is really a must. Having this "sticky" title bar with the "Auto read-only" red button allows that, although it is not very intuitive that I need to click on it to enable editing. I would prefer, as before, a separate toggle button that would say "Unlock editing" (when in read-only mode), or "Lock editing" (when in editing mode).
• When I reopen a big note that has the read-only status, the table of contents is not displayed. I need to enable editing to show the table of contents. See image below. I can create an issue for that, if you want.
• there is too much blank space between the note title and the note content. The "title-actions component" class for this
  section should have smaller height when nothing needs to be displayed inside.
• personnaly I don't like the fact that the note icon is shown white on grey backgroud, opposite from what I have chosen, and opposite of what is displayed in the tree. Maybe I can change that in the theme ?
• after scrolling, the note title font appears smaller (1.5em by default) than the h2 font size (1.6em by default, I think), which doesn't help reading. I wish it was at least the same size (or bigger) than h2 font, after scrolling down.
• status / navigation bar at the bottom : personnaly I do not like clickable bars at the bottom, because I have an auto-hiding panel on my desktop (using Gnome and dash-to-panel), so whenever I get too close to the bottom with my mouse the desktop panel hides the status/navigation bar of Trilium. I wish there was an option to display this bar at the top of the note, which is very intuitive for navigating accross the note hierarchy, by the way. Thinking about it, this is a Must for me 🙂

That's it for now, I'll post some more comments later if I see something else.
Thanks !

[XavierFigari]

Oh, I forgot to mention this one :

When I start Trilium, I have a pop-up that shows an error :

It appears to be a script of the Timeline extension, that tries to access the table of contents. This might be linked to the "table of contents not displayed in read-only mode" issue that I mentionned above.

Here's the piece of script in the Timeline extension that seems to trigger that popup at launch time :

	var li = document.querySelectorAll("div.toc-widget span.toc li");
	for (var i = 0; i < li.length; i += 1) {

[dosubot[bot]]

The error about the missing parentWidget property happens because Trilium now requires custom widget scripts to specify where in the UI they attach. If your Timeline extension script isn't meant to create a visible widget, you should add the directive #run=frontendStartup at the top of your script note to run it at app startup instead—this avoids the widget system and the parentWidget requirement.

The script error and the TOC not displaying in read-only mode are likely related: your script tries to access TOC DOM elements that may not exist yet, or at all, in certain note states (especially after recent layout and TOC widget changes). The new layout refactored the TOC, changed its DOM structure, and added support for read-only notes, but there are still some known issues with TOC visibility and timing in read-only mode (details).

To make your script more robust:

• Use #run=frontendStartup if you don't need a UI widget.
• If you do need to interact with the TOC, wait for the relevant DOM elements to exist before querying them. You might listen for UI events like contentElRefreshed (added in the new layout) to know when the content is ready.
• Be aware that the TOC may not be present in read-only mode, depending on the note and current sidebar state.

If you want to adapt your script to the new requirements, here's a minimal example for a widget that needs to specify its parent:

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "right-pane"; } // or another valid pane
    doRender() {
        this.$widget = $("<div>My Widget</div>");
        return this.$widget;
    }
}

If you only want to run code at startup (not as a widget), just add #run=frontendStartup at the top of your script note.

Let me know if you want help adapting your script to the new layout or handling TOC changes!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[XavierFigari]

Ok, forget about the 2nd issue with the Timeline extension for now, even if it might be related to the table of content issue I mentioned earlier. This is irrelevant in this topic, wich was meant to discuss the new layout.
Sorry about that.

[openapphub]

I've just tried it and find that the old version suits me better; I've been using it for 4 years. The new version may still require some time to get accustomed to.

[eliandoran]

@openapphub , let me know if you encounter any issues with the new layout. I know it's a big change, but we hope it's for the best.

[eliandoran]

Thanks for the feedback.

When I reopen a big note that has the read-only status, the table of contents is not displayed. I need to enable editing to show the table of contents. See image below. I can create an issue for that, if you want.

I can reproduce the issue, we'll fix it.

When I start Trilium, I have a pop-up that shows an error.

We've made the #widget validation slightly more strict, it shows a warning if there's a widget that doesn't specify a parent component. In the past, the warning was only logged to the console.

If your custom script doesn't actually render a widget and modify the application in some headless way (like altering a different component), then #run=frontendStartup needs to be used instead. On the new layout the sidebar (including ToC) is different so if your widgets alters that, then the widget won't work either way.

[XavierFigari]

Thanks for the quick fix on 0.101.1

However it does not work well for me : the right side bar is not displayed automatically to show the TOC on big notes. I had to set up a keyboard shortcut to open it.

I could not find either the setting in the options, to set the minimum number of headings to display the TOC automatically : where is this setting now ?

The "table of contents" documentation refers to a deleted note :

In [missing note] options, look for the Table of Contents section and configure the minimum amount of headings that need to be present in the current note in order for the table of contents to show:

[eliandoran]

@XavierFigari , I'll look into the broken link.
Regarding the sidebar no longer appearing automatically, this is by design: https://docs.triliumnotes.org/user-guide/concepts/ui/new-layout#changes-to-the-sidebar

The sidebar will no longer appear automatically. You need to toggle it manually via the button or keyboard shortcut.

[XavierFigari]

Great ! Sorry, I missed this new feature of the new layout 🙂 (RTFM...)

The user guide would need to be updated, then, because it still mentions automatic toc display based on a minimum amount of headings.

I was looking for such a button on the top of the note pane itself, rather than on the top-right side of the screen, near the window buttons. It would be more intuitive for me to have it there, next to the "..." menu icon. But I understand the right sidebar is common to all split panes, so it would have to be displayed on the farmost right pane only... so I understand your choice to put it on the title bar.

This button to display the right sidebar looks quite similar to the "create new split" button, so maybe a visual like "<<" and ">>" to expand (resp collapse) the right sidebar would be better ? This would be more coherent with the note tree on the left. Just a thought.

[hulmgulm]

The sidebar will no longer appear automatically. You need to toggle it manually via the button or keyboard shortcut.

Having played around with this for a few days now, I'd like to have this feature back. Maybe as an attribute which will open the sidebar when set?

[Vorteth]

I am a big fan of the new layout.

I will admit it will take some time to get use to it, but I appreciate the lack of clutter at the top of notes now. Also, I appreciate the pane on the right now remembers it is closed so it doesn't continually open over and over again when I jump between notes.

[iamdangry]

New layout is good, except for one minor thing (and this might subjective). Promoted attributes don't align with anything if you have Keep Content Centered checked. In the old layout, promoted attributes and the note title aligned left. In the new layout, the note title now aligns with content, leaving promoted attributes out in the cold.

Old layout:

New layout:

After grabbing the screenshots, this might also be a UI bug as I found some other examples where the alignment is a bit off when Keep Content Centered checked. The UI oddities get better/worse depending on what Max Content Width is set to.

Content width set at 800px, title is centered:

Content width set at 1200px, title is off to the left:

[adoriandoran]

@iamdangry, that definitely is a bug.

[XavierFigari]

Hi there,

I was able to tune the next-light theme to better reflect my preferences for the new layout :

• bigger note icon, and no color inversion (black on white)
• bigger note title font
• somme custom colors and styles for the headers
• vertical bars on the note tree, with some colors

Theme css is attached. ==> see below, attached to this comment.

I'll use this until you make some changes that best suit me.

I'm not sure either if there is a way to move the status bar to the top, as it involves more than css tuning.

Thanks in advance for your feedback for those suggestions.

[LokiLuciferase]

In principle I very much like the idea of decluttering the note, but the increased spacing around the note title does not work for me at all. I am typically using Trilium Notes tiled to a quarter of a full HD screen. With the new layout I can barely get 10 lines in before I need to start scrolling.

new:

old:

If the title could be brought into the same row as the split button (as before), and the spacing otherwise reduced, I would definitely switch. As it stands, I'll stick with the old layout

[XavierFigari]

Starting to look good with a little of css tuning :

@eliandoran or @adoriandoran , if you want to use some of the css to improve the default theme, feel free to do so 😉

I attach the whole theme for those interested :

Trilium (Light) Xav.css

[LokiLuciferase]

@XavierFigari thanks the pointers! I finally found the time to play around with the CSS on my own, and the following was the most straight forward and maintainable change to the layout which still works for me, screen-real-estate-wise:

Combined with the fact that, as mentioned by @rom1dep , the title scrolls away, I'm happy with it now. The visibility of the empty note-type-switcher in the new layout does seem like a bug to me but either way, this fix is easy enough for me to maintain.

[XavierFigari]

This works fine too !

Note that having the note-type-switcher disappear, we rely on the title-actions padding to give some room below the inline title :

body.experimental-feature-new-layout {
    & .title-actions {
        &:not(:empty) {
            padding: .75em 15px;
        }
    }
}

It's a bit confusing in the code, as this &:not(:empty) selector is actually useless, as there is always a <div class="note-type-switcher"></div> section below the title-actions div (as I described above), even if it's empty.
So the .75em top&bottom padding is always applied, acting as a bottom padding for the inline title.

A cleaner way, in my opinion, would be to apply systematically a bottom padding to the inline title, and only have a bottom padding for the .title-action when it actually contains something (with proper selector) : it would lokk like this (not tested) :

.inline-title {
    padding-top: 0 !important;
    padding-bottom: .75em !important;
}
body.experimental-feature-new-layout {
    & .title-actions:has(> div:not(:empty)) {
        padding: 0 15px 1.5em;
    }
}

[Aitanuqui]

@XavierFigari, thanks to your example I was able to investigate further to make it even more compact by forcing the sticky row to show the title at all times while hiding the inline title. I also made size and colour adjustments.

Compact (Follow system color scheme).css

But I like to have it even more compact by removing icons.

Compact without icons (Follow system color scheme).css

That said, I don’t want to remove all icons. Ideally, I’d like to keep

• workspace icons, and
• icons for notes that are immediate children of the root

The legacy theme shows only workspace icons in tabs, in case that helps point to a solution.
In anyone knows, what would be the best approach to achieve this?

Edit: misspellings and adjustments in the no-icons theme.

[eliandoran]

@Aitanuqui , check https://docs.triliumnotes.org/user-guide/theme-development/reference#note-icons-tab-workspace-accent-color

[XavierFigari]

Hi there,
Happy new year ! I wish Trilium stays the best open source note taking tool for 2026 !

Just a note :
I've noticed that the tooltip is truncated in menu "Advanced → Open note externally" (when there is no pane to the right) :