Thoughts on current layout & theme of the application

[eliandoran]

@TriliumNext/everyone ,

I'll be honest, I'm not very fond of the current theme for Trilium:

The theme itself is not the issue actually, but the layout. It feels cluttered. There are so many "dimensions": the button bar on the left, the tree, the tab bar, the header, the ribbon, the sidebar, contextual menus.

To my surprise, I've recently learned that I prefer the old theme:

In my GNOME theme, I moved the button bar on the top:

In my Breeze theme, I moved the ribbon at the bottom.

What are your thoughts on improving the default theme? I'll start by suggesting we should probably bring back the sidebar as it was initially.

[rijulraju]

Agree wholeheartedly. Here's my custom VS code style theme -- happy to share the source if anyone is interested:

[eliandoran]

Looks pretty nice. Let me know if there are any design decisions that you think we might want to take into consideration, things that cannot be directly done via themes.

[eliandoran]

@Nriver , you mentioned you missed the old logo, did you happen to miss the old theme as well? :)

[eliandoran]

If anyone wants a trip down memory lane, I've found a random release containing that theme: https://github.com/zadam/trilium/releases/tag/v0.47.3

You can run trilium-portable and it should work out of the box.

[Nriver]

When it comes to button layout, I prefer using the Lightpad theme.

On Desktop:
I prefer the buttons on the left. I use bookmarks as shortcuts to deep-level notes and usually want to click the note tree immediately after using a bookmark. Having the bookmark and note tree close to each other simplifies navigation. For instance, I have a universal TODO note with sub-notes like daily TODO, weekly TODO, and monthly TODO. I bookmark the top TODO note and then navigate the tree to find the sub-notes.

On Mobile:
I prefer the buttons on the top. This is more practical due to limited screen space. Buttons on the left would stack on each other due to the mobile IME keyboard which is not easy to touch by fingers. Moving the buttons to the top and making them scrollable solves this problem for me.

[eliandoran]

@Nriver , perhaps we could get away with having an adjustable bar that can be placed either at the top or at the left side. Personally , I much prefer the bar at the top, to the left it feels a bit weird.

[perfectra1n]

I've tweaked the theme from SiriusXT:
custom-dark-theme.txt

I've found it to be a lot easier to see all of my nested notes with it, which was my biggest gripe with the current and previous default theme.

[eliandoran]

@perfectra1n , drop a screenshot in here so we can see it without importing. :D

[doobes]

I like this theme a lot:

The lines make it a LOT more readable.

Saying all that, I like the option of having the button bar at the top.

[meichthys]

@eliandoran I really like your GNOME theme 👍
The buttons on the top with the search bar in the top middle feels right to me.

[meichthys]

IMO, the QuickSearch and the "Jump to Note" features should be combined into one search/command input.
I have (mostly new) users that are constantly confused about when to use search and when to use the jump-to feature.

Perhaps adding a / (or something else) to the beginning of a search term would return the "jump-to" results instead (similar to how VSCode has the > symbol in it's command input field.

[eliandoran]

@meichthys , indeed it does seem a bit duplicated IMO.
I actually never use the search bar at the top. I much prefer the Ctrl+J approach.

[justyns]

I haven't been keeping up with trilliumnext, but I did have a plugin/script that adds a command palette:

https://github.com/justyns/trilium-scripts/blob/master/command-palette/palette-testing-widget.js

If the beginning of the text input was "> ", it'd show available commands. Otherwise it'd act like "Jump to Note" and show notes. I don't think I ever added it, but I planned on having a "Search for ..." always show up as an option in the "Jump to Note" mode. So basically it'd filter a list of notes for what you're typing, but you could also select the search option instead

[meichthys]

@eliandoran Likewise, I rarely use the quick search.
@justyns Very interesting. I'll have to give it a try!

[zerebos]

I think there's a lot that can be improved UI-wise for Trilium, and of course the current layout and theme is one of them. I would argue finalizing the layout is more important than the theme, but even before doing the layout I think it would be good for us to make the current UI system more proper and more consistent. For example Trilium uses a weird mix of switches and checkboxes amongst other input types all over the place. This is due to it all being jquery with custom html and not using something component-based where you would have a consistent look and feel.

That said, it's never too early to discuss things 😄 as for the launcherbar I both like and dislike it being at the top. Currently I'm for keeping it to the side solely because vertical space is more precious on monitors these days and I prefer not putting something static there that takes away space from the most important part of the note taking app; the note.

I've personally been going back and forth between these two layouts for my custom theme (yet to be made public)

The first one is essentially a stylized fancy version of the default layout with some customizations. The second one is more similar to your own theme; the launcherbar is up top. But for mine the tabs are at the bottom and I've extended that to make the tree actions combine with the tabs to make a nice bottom bar. But I like how in your breeze theme you have the note properties at the bottom like that as well.

I also played around with emulating the current Obsidian's look and feel (using a preset customization for my theme) and it seems somewhat suitable to Trilium as well

[zerebos]

Sounds interesting, maybe you could elaborate a bit on this subject and see how we can improve it? Perhaps define which widgets are out of place and which widgets should become template.

Just as a quick example of what I mean, in nearly the same spot Trilium will show switch-style booleans and checkbox style

vs

It's definitely something I would want to work on. But would you say making the UI consistent while keeping jQuery is important? or should we decide on and switch to a new frontend framework first?

If vertical space is a concern, then what about the ribbon? An expanded ribbon for "Note info" has 91px (at least on my theme, slight differences might apply), whereas the top bar is under 50px. If I open a daily note, the "Edited Note" ribbon pops at the top by default with a whopping 237px of vertical space.

Oh I agree, I'd love to be able to hide that entire section personally like you can in several other note apps:

vs

[eliandoran]

It's definitely something I would want to work on. But would you say making the UI consistent while keeping jQuery is important? or should we decide on and switch to a new frontend framework first?

I think it would be a nice idea to do it now. The frontend rewrite might take a while. And if we do it now, I think we'll reduce the workload in the future as well since we'd have to convert all switch-style widgets to a single component instead of having to look for both checkboxes and switch-style widgets.

I think we can create tickets for each of these minor inconsistencies and solve them. But I would do it only after we convert the frontend to TypeScript as well (#156).

Oh I agree, I'd love to be able to hide that entire section personally like you can in several other note apps:

I thought of that too, but I think the problem is that our ribbon is more than the header of a note, such as what you have in Notion for example. It's a combination of note information, configuration, tags but also bigger elements such as the note map. Some of them have to be relocated to a sidebar I think. Don't forget we already have a sidebar is currently only used for table of contents and highlights list, as far as I know.

[zerebos]

I think it would be a nice idea to do it now.

I'm of the same mind

Don't forget we already have a sidebar is currently only used for table of contents and highlights list, as far as I know.

Yeah I think there's a lot of potential for reworking that area of the UI but that might be better to save for after converting the frontend to a modern framework.

[diyoyo]

I've personally been going back and forth between these two layouts for my custom theme (yet to be made public)

Oh my, please make them public :D
I agree with @eliandoran on all the things that are mentioned in the first post.

Personnally, the top things that bug me these days:

• the code coloring. I use a plugin that was suggested a while ago in a message I posted on trilium, but it's really ugly, specially in dark mode. So your (@rauenzi ) theme is making me dream of better days (please don't tell me that the actual code in your screenshot was actually a screenshot image)
• The "Promoted Attributes" : I use a lot of them, as my trilium instance is organized in an Object-Oriented fashion: I have Templates for what I call "Classes" (like Persons, Companies, Movies, Books, ...) and Templates for what I call "Interfaces" (like withDate, withContactInfo, withMoodWeather). So all these generate promoted attributes to children notes. So my dream would be to go away from this "centered random" layout for all the attribute fields. I also would love some kind of field organizer (like in espoCRM).
• The search' result context menu that displays all the attributes of a note, even when the searched keyword is not part of them.
• the backlink button, which I do like, that hides the text right below it, even when typing.

By the way, these checkboxes are also way too big imho, in the previous screenshot.

Finally, I agree about the inspiration from the other note taking apps. The ones that recently really pleased me in terms of UI are AFFine, and, to some extent, Microsoft Loop, which seems to compile some the recent trends in the note taking scene (including Trilium?)

[zerebos]

Oh my, please make them public :D

I definitely will soon once I fix a few more important issues with it!

please don't tell me that the actual code in your screenshot was actually a screenshot image

Nope, it's absolutely a code block! It does still use a plugin (likely the same one you're referring to but with a small modification of my own) and my theme overrides the default styles of the plugin.

The "Promoted Attributes" [...]

Completely agree this system including the display needs a massive overhaul. I agree having some proper field management along with a suitable UI would be game-chaning.

these checkboxes are also way too big imho, in the previous screenshot.

In my theme I used a bit of a css hack to turn them into switches

The ones that recently really pleased me in terms of UI are AFFine, [...]

AFFine was actually the inspiration for my theme, I tried to capture as much of it as I can including smaller details like the context menus (see below). I have more of a showcase in the Discord since it's not super relevant here