The New layout is a series of UI/UX changes that were introduced
+ in v0.101.0 that heavily change both existing UI elements, as well as adding
+ some new ones. The goal of this new layout is to modernize the application
+ and to make it more intuitive but at the same time to reduce clutter.
+
Newly introduced features
+
Status bar
+
At the bottom of the window there is a new bar called the Status bar.
+ This bar houses multiple items such as the Breadcrumb navigation and information
+ and settings about the current note, such as the content language and
+ Attributes.
In previous versions of Trilium, the title bar was fixed at all times.
+ In the new layout, there is both a fixed title bar and one that scrolls
+ with the text. The newly introduced title is called the Inline title and
+ it displays the title in a larger font, while also displaying additional
+ information such as the creation and the modification date.
+
Whenever the title is scrolled past, the fixed title is shown instead.
+
This only affects Text and
+ Code notes. Note types that take the entirety of the screen such
+ as Canvas will
+ always have only the fixed title bar.
+
Depending on the note type, the inline title will also present some more
+ interactive options such as being able to switch the note type (see below).
+
+
+ The Inline title, which is displayed at the top of the note and
+ can be scrolled past.
+
+
+
+ The fixed title bar. The title only appears after scrolling past the Inline title.
+
+
New note type switcher
+
When a new Text or
+ Code note is created, a note type switcher will appear below
+ the Inline title. Apart from changing the note type, it's also
+ possible to apply a template.
+
The switcher will disappear as soon as a text is entered.
+
+
+
+
Note badges
+
Note badges appear near the fixed note title and indicate important information
+ about the note such as whether it is read-only. Some of the badges are
+ also interactive.
+
+
+
+
The following badges are available:
+
+
Read-only badge, which will be shown if the note is not
+ editable due to either automatic read-only or manual read-only. Clicking
+ on the badge will temporarily edit the note (similar to the Edit floating button).
+
Share badge, which will indicate that the current note
+ is shared. The badge will also indicate if the share is on the local network
+ (for the desktop application without Synchronization set
+ up) or publicly accessible (for the server).
+
Web clip badge, which will indicate if the note was clipped
+ using the Web Clipper.
+ The badge acts as a link, so it can be clicked on to navigate to the page
+ or right clicked for more options.
Some of these badges replace the dedicated panels at the top of the note.
+
Collapsible sections
+
+
+
+
The following sections have been made collapsible:
+
+
Promoted Attributes
+
+
For full-height notes such as Canvas,
+ the promoted attributes are collapsed by default to make room.
+
The keyboard shortcut previously used to trigger the promoted attributes
+ ribbon tab (which was no longer working) has been repurposed to toggle
+ the promoted attributes instead.
+
+
+
Edited Notes, which appears for Day Notes is
+ now shown underneath the title.
+
+
Whether the section is collapsed or not depends on the choice in
+ Options → Appearance.
+
+
+
Search Properties, which appears for the full Search and
+ Saved Search.
+
+
Changing to the existing layout
+
Removal of the ribbon
+
The most significant change is the removal of the ribbon. All the actions
+ and options from the ribbon were integrated in other places in the application.
+
Here's how all the different tabs that were once part of the ribbon are
+ now available in the new layout:
+
+
“Formatting toolbar” was relocated to the top of the page.
+
+
Instead of having one per split, now there is a single formatting toolbar
+ per tab. This allows more space for the toolbar items.
+
+
+
“Owned attributes” and “Inherited attributes” were merged and moved to
+ the status bar region (displayed one above the other).
+
“Basic Properties” were integrated in the Note buttons menu.
+
+
The only exception here is the Language combo box which can now be found
+ in the status bar (top-right of the screen).
+
+
+
“File” and “Image” tabs
+
+
The buttons were moved to the right of the note title, as dedicated entries
+ in Note buttons.
+
The info section has been merged into the Note info section of
+ the status bar.
+
+
+
Edited notes
+
+
Moved underneath the title, displayed under a collapsible area and the
+ notes are represented as badges/chips.
+
Whether the section is expanded or collapsed depends on the “Edited Notes
+ ribbon tab will automatically open on day notes” setting from Options →
+ Appearance.
+
+
+
Search definition tab
+
+
Moved underneath the title under a collapsible area.
+
Expanded by default for new searches, collapsed for saved searches.
+
+
+
The Note map is now available in the Note actions menu.
+
+
Instead of opening into a panel in the ribbon, the note map now opens
+ in a side split (similar to the in-app help).
+
+
+
“Note info” tab was moved to a small (i) icon in the status bar.
+
“Similar notes” tab
+
+
Moved to the status bar, by going to the “Note info” section and pressing
+ the button to show similar notes.
+
Displayed as a fixed panel, similar to the attributes.
+
+
+
The Collection properties tab were relocated under the note title and
+ grouped into:
+
+
A combo box to quickly switch between views.
+
Individual settings for the current view in a submenu.
+
+
+
Some smaller ribbon tabs were converted to badges that appear near the
+ note title in the breadcrumb section:
+
+
Original URL indicator for clipped web pages (#pageUrl).
+
SQL and script execute buttons.
+
+
+
+
+
Removal of the floating buttons
+
Most of the buttons were relocated to the right of the note title, in
+ the Note buttons area,
+ with the exception of:
+
+
The Edit button is displayed near the note title, as a badge.
+
Backlinks is displayed in the status bar. When clicked, the same
+ list of backlinks is displayed.
+
Relation map zoom buttons are now part of the relation map itself.
+
Export image to PNG/SVG are now in the Note actions menu, in the Export as image option.
+
+
How to toggle the new layout
+
Starting with v0.101.0, this new layout is enabled by default. It is possible
+ to fall back to the old layout by going to Options →
+ Appearance and selecting Old layout.
+
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.html
new file mode 100644
index 000000000..6ed290852
--- /dev/null
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.html
@@ -0,0 +1,55 @@
+
+
+
+
The breadcrumb allows quickly viewing the note hierarchy of the current
+ note and navigating through it.
+
It is part of the Status bar,
+ displayed in the bottom-left of the screen.
+
Layout and Interaction
+
+
If a note or workspace is hoisted, a badge will appear on the left-most
+ side.
+
+
Clicking on the badge will un-hoist the note/workspace.
+
+
+
The left-most icon represents the root note, or the hoisted note or workspace.
+
+
Clicking the icon will jump to the root note.
+
Right clicking the icon will display a menu that allows opening the note
+ in a new tab, split, etc.
+
+
+
Each segment shows the title of a note in the current note hierarchy.
+
+
Clicking the icon will jump to that note.
+
Right clicking will open a menu with multiple options such as opening
+ the note in a different tab/split/window, hoisting, moving/cloning the
+ note, duplicating as well as changing the color of the note.
+
+
+
Clicking the arrow next to each segment will reveal the child notes of
+ the segment on the left.
+
+
Clicking on an icon will navigate to that particular note.
+
It's also possible to create a new child note from here.
+
The menu can optionally hide the archived notes.
+
+
+
If the current note is deep within a hierarchy, the segments will collapse
+ into a […] button in order not to occupy too much space.
+
+
Clicking this button will display each collapsed entry as a menu item.
+ Clicking on it will navigate to that particular note.
+
+
+
Right clicking on an empty space to the right of the breadcrumb (before
+ the other status bar items) will reveal another menu that allows:
+
+
Toggling whether archived notes are displayed in the breadcrumb and in
+ the note tree.
+
Copying the current note path to clipboard.
+
+
+
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png
new file mode 100644
index 000000000..4a2f36ae2
Binary files /dev/null and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png differ
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.html
new file mode 100644
index 000000000..213a1b507
--- /dev/null
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.html
@@ -0,0 +1,53 @@
+
The status bar displays information about the current note and allows
+ changing settings related to it such as configuring the language or attributes.
+
Layout and interaction
+
On the left side, the Breadcrumb is
+ displayed which indicates the current note as well as its parent notes
+ and allows for quick navigation throughout the hierarchy.
+
On the right side, specific sections will show depending on the type of
+ the current note.
+
+
For code notes, the language mode of the note is indicated (e.g. JavaScript,
+ plain text), as well as allowing easy switching to another mode.
+
For text notes, the content language is displayed and can be changed,
+ thus configuring the spell-check and the right-to-left support.
+
+
Note that this applies to the entire note and not the selection, unlike
+ some text editors.
+
+
+
If a note is placed in multiple places in the tree (cloned), the number
+ of the note paths will be displayed.
+
+
Clicking it will reveal the full list of note paths and a button to place
+ it somewhere else.
+
+
+
If a note has attachments, their number will be displayed.
+
+
Clicking on it will reveal the list of attachments in a new tab.
+
+
+
If a note is linked from other text notes (backlinks), the number of backlinks
+ will be displayed.
+
+
Clicking on it will show the list of notes that link to this note, as
+ well as an excerpt of where the note is referenced.
+
+
+
+
Regardless of note type, the following items will always be displayed
+ if there is a note:
+
+
Note info, which displays:
+
+
The creation/modification date of the note.
+
The type and MIME of the note.
+
The note ID.
+
An estimation of the note size of the note itself and its children.
+
A button to show Similar notes.
+
+
+
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png
new file mode 100644
index 000000000..12f5e0d5f
Binary files /dev/null and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png differ
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.html
index 0f3209d34..ee5335c45 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.html
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.html
@@ -3,10 +3,15 @@
-
The Note Revisions button displays the Note Revisions for
+
The Note Revisions button displays the Note Revisions for
that particular note.
-
The contextual menu offers commands for the note or its subtree, such
+
The contextual menu offers commands for the note or its subtree, such
as import, export, viewing the Note source code or
Attachments.
-
\ No newline at end of file
+
+
On the New Layout,
+ the button area is populated by some more buttons that are specific to
+ the current note. For example, for Image and File notes,
+ the download and copy buttons were relocated there.
\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Kanban Board.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Kanban Board.html
index c2696105a..30acffb59 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Kanban Board.html
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/Kanban Board.html
@@ -7,98 +7,94 @@
adjusted.
How it works
When first creating a collection of Board type, a few subnotes
- will be created, each having a #status label
- set. The board then groups each note by the value of the status attribute.
+ will be created, each having a #status label set. The board
+ then groups each note by the value of the status attribute.
Notes are displayed recursively, so even the child notes of the child
notes will be displayed. However, unlike the Table, the notes are not displayed in a hierarchy.
Interaction
Working with columns
-
Create a new column by pressing Add Column near the last column.
+
Create a new column by pressing Add Column near the last column.
-
Once pressed, a text box will be displayed to set the name of the column.
+
Once pressed, a text box will be displayed to set the name of the column.
Press Enter to confirm, or Escape to dismiss.
-
To reorder a column, simply hold the mouse over the title and drag it
+
To reorder a column, simply hold the mouse over the title and drag it
to the desired position.
-
To delete a column, right click on its title and select Delete column.
-
To rename a column, click on the note title.
+
To delete a column, right click on its title and select Delete column.
+
To rename a column, click on the note title.
-
Press Enter to confirm.
-
Upon renaming a column, the corresponding status attribute of all its
+
Press Enter to confirm.
+
Upon renaming a column, the corresponding status attribute of all its
notes will be changed in bulk.
-
-
If there are many columns, use the mouse wheel to scroll.
+
+
If there are many columns, use the mouse wheel to scroll.
Working with notes
-
Create a new note in any column by pressing New item
+
Create a new note in any column by pressing New item
-
Enter the name of the note and press Enter or click away. To
+
Enter the name of the note and press Enter or click away. To
dismiss the creation of a new note, simply press Escape or leave
the name empty.
-
Once created, the new note will have an attribute (status label
+
Once created, the new note will have an attribute (status label
by default) set to the name of the column.
-
To open the note, simply click on it.
-
To change the title of the note directly from the board, hover the mouse
+
To open the note, simply click on it.
+
To change the title of the note directly from the board, hover the mouse
over its card and press the edit button on the right.
-
To change the state of a note, simply drag a note from one column to the
+
To change the state of a note, simply drag a note from one column to the
other to change its state.
-
The order of the notes in each column corresponds to their position in
+
The order of the notes in each column corresponds to their position in
the tree.
-
It's possible to reorder notes simply by dragging them to the desired
+
It's possible to reorder notes simply by dragging them to the desired
position within the same columns.
-
It's also possible to drag notes across columns, at the desired position.
+
It's also possible to drag notes across columns, at the desired position.
-
For more options, right click on a note to display a context menu with
+
For more options, right click on a note to display a context menu with
the following options:
-
Open the note in a new tab/split/window or quick edit.
-
Move the note to any column.
-
Insert a new note above/below the current one.
-
Archive/unarchive the current note.
-
Delete the current note.
+
Open the note in a new tab/split/window or quick edit.
+
Move the note to any column.
+
Insert a new note above/below the current one.
+
Archive/unarchive the current note.
+
Delete the current note.
-
If there are many notes within the column, move the mouse over the column
+
If there are many notes within the column, move the mouse over the column
and use the mouse wheel to scroll.
Working with the note tree
It's also possible to add items on the board using the Note Tree.
Hold the mouse on the note and drag it to the to the desired column.
This works for:
-
Notes that are not children of the board, case in which a clone will
+
Notes that are not children of the board, case in which a clone will
be created.
-
Notes that are children of the board, but not yet assigned on the board.
-
Notes that are children of the board, case in which they will be moved
+
Notes that are children of the board, but not yet assigned on the board.
+
Notes that are children of the board, case in which they will be moved
to the new column.
Keyboard interaction
The board view has mild support for keyboard-based navigation:
-
Use Tab and Shift+Tab to navigate between
+
Use Tab and Shift+Tab to navigate between
column titles, notes and the “New item” button for each of the columns,
in sequential order.
-
To rename a column or a note, press F2 while it is focused.
-
To open a specific note or create a new item, press Enter while
+
To rename a column or a note, press F2 while it is focused.
+
To open a specific note or create a new item, press Enter while
it is focused.
-
To dismiss a rename of a note or a column, press Escape.
+
To dismiss a rename of a note or a column, press Escape.
Configuration
Displaying custom attributes
@@ -112,37 +108,33 @@
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes). The easiest way to
add these is:
-
Go to board note.
-
In the ribbon select Owned Attributes → plus button → Add new label/relation definition.
-
Configure the attribute as desired.
-
Check Inheritable to make it applicable to child notes automatically.
+
Go to board note.
+
In the ribbon select Owned Attributes → plus button → Add new label/relation definition.
+
Configure the attribute as desired.
+
Check Inheritable to make it applicable to child notes automatically.
After creating the attribute, click on a note and fill in the promoted
attributes which should then reflect inside the board.
Of note:
-
Both promoted and non-promoted attribute definitions are supported. The
+
Both promoted and non-promoted attribute definitions are supported. The
only difference is that non-promoted attributes don't have an “Alias” for
assigning a custom name.
-
Both “Single value” and “Multi value” attributes are supported. In case
+
Both “Single value” and “Multi value” attributes are supported. In case
of multi-value, a badge is displayed for every instance of the attribute.
-
All label types are supported, including dates, booleans and URLs.
-
Relation attributes are also supported as well, showing a link with the
- target note title and icon.
-
Currently, it's not possible to adjust which promoted attributes are displayed,
- since all promoted attributes will be displayed (except the board:groupBy one).
- There are plans to improve upon this being able to hide promoted attributes
- individually.
+
All label types are supported, including dates, booleans and URLs.
+
Relation attributes are also supported as well, showing a link with the
+ target note title and icon.
+
Currently, it's not possible to adjust which promoted attributes are displayed,
+ since all promoted attributes will be displayed (except the board:groupBy one).
+ There are plans to improve upon this being able to hide promoted attributes
+ individually.
Grouping by another label
-
By default, the label used to group the notes is #status.
- It is possible to use a different label if needed by defining a label named
- #board:groupBywith the value being the attribute to use (with or
- without # attribute prefix).
+
By default, the label used to group the notes is #status.
+ It is possible to use a different label if needed by defining a label named #board:groupBy with
+ the value being the attribute to use (with or without # attribute
+ prefix).
Grouping by relations
A more advanced use-case is grouping by Relations.
During this mode:
-
The columns represent the target notes of a relation.
-
When creating a new column, a note is selected instead of a column name.
-
The column icon will match the target note.
-
Moving notes between columns will change its relation.
-
Renaming an existing column will change the target note of all the notes
- in that column.
+
The columns represent the target notes of a relation.
+
When creating a new column, a note is selected instead of a column name.
+
The column icon will match the target note.
+
Moving notes between columns will change its relation.
+
Renaming an existing column will change the target note of all the notes
+ in that column.
Using relations instead of labels has some benefits:
-
The status/grouping of the notes is visible outside the Kanban board,
+
The status/grouping of the notes is visible outside the Kanban board,
for example on the Note Map.
-
Columns can have icons.
-
Renaming columns is less intensive since it simply involves changing the
- note title of the target note instead of having to do a bulk rename.
+
Columns can have icons.
+
Renaming columns is less intensive since it simply involves changing the
+ note title of the target note instead of having to do a bulk rename.
To do so:
-
First, create a Kanban board from scratch and not a template:
-
Assign #viewType=board #hidePromotedAttributes to
- emulate the default template.
-
Set #board:groupBy to the name of a relation
- to group by, including the~prefix (e.g.
- ~status).
-
-
Optionally, use Promoted Attributes for
- easy status change within the note:
\ No newline at end of file
diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index 6dca18485..8f16c43a3 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md
+++ b/docs/Developer Guide/Developer Guide/Documentation.md
@@ -1,5 +1,5 @@
# Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index d846c6d27..2e16e2add 100644
--- a/docs/User Guide/!!!meta.json
+++ b/docs/User Guide/!!!meta.json
@@ -2851,6 +2851,20 @@
"value": "note-buttons",
"isInheritable": false,
"position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "IjZS7iK5EXtb",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "W8vYD3Q1zjCR",
+ "isInheritable": false,
+ "position": 80
}
],
"format": "markdown",
@@ -3436,6 +3450,286 @@
"dataFileName": "Note Tooltip_image.png"
}
]
+ },
+ {
+ "isClone": false,
+ "noteId": "IjZS7iK5EXtb",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb"
+ ],
+ "title": "New Layout",
+ "notePosition": 220,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-layout",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "4TIF1oA4VQRO",
+ "isInheritable": false,
+ "position": 40
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "iPIMuisry3hd",
+ "isInheritable": false,
+ "position": 50
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "6f9hih2hXXZk",
+ "isInheritable": false,
+ "position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "KC1HB96bqqHX",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "8YBEPzcpUgxw",
+ "isInheritable": false,
+ "position": 80
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "grjYqerjn243",
+ "isInheritable": false,
+ "position": 90
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "XpOYSgsLkTJy",
+ "isInheritable": false,
+ "position": 100
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "cbkrhQjrkKrh",
+ "isInheritable": false,
+ "position": 110
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "MtPxeAWVAzMg",
+ "isInheritable": false,
+ "position": 120
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "CdNpE2pqjmI6",
+ "isInheritable": false,
+ "position": 140
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "YKWqdJhzi2VY",
+ "isInheritable": false,
+ "position": 150
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "veGu4faJErEM",
+ "isInheritable": false,
+ "position": 160
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "zEY4DaJG4YT5",
+ "isInheritable": false,
+ "position": 170
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "AlJ73vBCjWDw",
+ "isInheritable": false,
+ "position": 180
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "l0tKav7yLHGF",
+ "isInheritable": false,
+ "position": 190
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "eIg8jdvaoNNd",
+ "isInheritable": false,
+ "position": 200
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "m523cpzocqaD",
+ "isInheritable": false,
+ "position": 210
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "New Layout.md",
+ "attachments": [
+ {
+ "attachmentId": "3DFGaMiTTHQ1",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "New Layout_image.png"
+ },
+ {
+ "attachmentId": "6iN5nrmdwG6z",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "1_New Layout_image.png"
+ },
+ {
+ "attachmentId": "KvNAEoJjRhyr",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "2_New Layout_image.png"
+ },
+ {
+ "attachmentId": "lEKxf6dYMG6u",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "3_New Layout_image.png"
+ },
+ {
+ "attachmentId": "SYOTVGCyx749",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "4_New Layout_image.png"
+ },
+ {
+ "attachmentId": "wCwzwfGspejR",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "5_New Layout_image.png"
+ }
+ ],
+ "dirFileName": "New Layout",
+ "children": [
+ {
+ "isClone": false,
+ "noteId": "I6p2a06hdnL6",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb",
+ "I6p2a06hdnL6"
+ ],
+ "title": "Breadcrumb",
+ "notePosition": 10,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "AlJ73vBCjWDw",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-chevron-right",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Breadcrumb.md",
+ "attachments": [
+ {
+ "attachmentId": "CjYmaJD0L1D4",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Breadcrumb_image.png"
+ }
+ ]
+ },
+ {
+ "isClone": false,
+ "noteId": "AlJ73vBCjWDw",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb",
+ "AlJ73vBCjWDw"
+ ],
+ "title": "Status bar",
+ "notePosition": 20,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "I6p2a06hdnL6",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-dock-bottom",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Status bar.md",
+ "attachments": []
+ }
+ ]
}
]
},
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png
new file mode 100644
index 000000000..c9a85f777
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png
new file mode 100644
index 000000000..10676a08e
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png
new file mode 100644
index 000000000..b4452f695
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png
new file mode 100644
index 000000000..4a2f36ae2
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png
new file mode 100644
index 000000000..ca7593700
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md
new file mode 100644
index 000000000..0fcfe17d8
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md
@@ -0,0 +1,114 @@
+# New Layout
+The _New layout_ is a series of UI/UX changes that were introduced in v0.101.0 that heavily change both existing UI elements, as well as adding some new ones. The goal of this new layout is to modernize the application and to make it more intuitive but at the same time to reduce clutter.
+
+## Newly introduced features
+
+### Status bar
+
+At the bottom of the window there is a new bar called the _Status bar_. This bar houses multiple items such as the Breadcrumb navigation and information and settings about the current note, such as the [content language](../../Note%20Types/Text/Content%20language%20%26%20Right-to-le.md) and Attributes.
+
+For more information, consult the [dedicated page](New%20Layout/Status%20bar.md).
+
+
+
+### Inline title
+
+In previous versions of Trilium, the title bar was fixed at all times. In the new layout, there is both a fixed title bar and one that scrolls with the text. The newly introduced title is called the _Inline title_ and it displays the title in a larger font, while also displaying additional information such as the creation and the modification date.
+
+Whenever the title is scrolled past, the fixed title is shown instead.
+
+This only affects Text and Code notes. Note types that take the entirety of the screen such as Canvas will always have only the fixed title bar.
+
+Depending on the note type, the inline title will also present some more interactive options such as being able to switch the note type (see below).
+
+The Inline title, which is displayed at the top of the note and can be scrolled past.The fixed title bar. The title only appears after scrolling past the Inline title.
+
+### New note type switcher
+
+When a new Text or Code note is created, a note type switcher will appear below the _Inline title_. Apart from changing the note type, it's also possible to apply a [template](../../Advanced%20Usage/Templates.md).
+
+The switcher will disappear as soon as a text is entered.
+
+
+
+### Note badges
+
+Note badges appear near the fixed note title and indicate important information about the note such as whether it is read-only. Some of the badges are also interactive.
+
+
+
+The following badges are available:
+
+* **Read-only badge**, which will be shown if the note is not editable due to either automatic read-only or manual read-only. Clicking on the badge will temporarily edit the note (similar to the Edit [floating button](Floating%20buttons.md)).
+* **Share badge**, which will indicate that the current note is shared. The badge will also indicate if the share is on the local network (for the desktop application without Synchronization set up) or publicly accessible (for the server).
+* **Web clip badge**, which will indicate if the note was clipped using the Web Clipper. The badge acts as a link, so it can be clicked on to navigate to the page or right clicked for more options.
+* **Execute badge**, for [scripts](../../Scripting.md) or [saved SQL queries](../../Advanced%20Usage/Database/Manually%20altering%20the%20database/SQL%20Console.md) which have an execute button or a description.
+
+Some of these badges replace the dedicated panels at the top of the note.
+
+### Collapsible sections
+
+
+
+The following sections have been made collapsible:
+
+* _Promoted Attributes_
+ * For full-height notes such as Canvas, the promoted attributes are collapsed by default to make room.
+ * The keyboard shortcut previously used to trigger the promoted attributes ribbon tab (which was no longer working) has been repurposed to toggle the promoted attributes instead.
+* _Edited Notes_, which appears for Day Notes is now shown underneath the title.
+ * Whether the section is collapsed or not depends on the choice in Options → Appearance.
+* _Search Properties_, which appears for the full Search and Saved Search.
+
+## Changing to the existing layout
+
+### Removal of the ribbon
+
+The most significant change is the removal of the ribbon. All the actions and options from the ribbon were integrated in other places in the application.
+
+Here's how all the different tabs that were once part of the ribbon are now available in the new layout:
+
+* “Formatting toolbar” was relocated to the top of the page.
+ * Instead of having one per split, now there is a single formatting toolbar per tab. This allows more space for the toolbar items.
+* “Owned attributes” and “Inherited attributes” were merged and moved to the status bar region (displayed one above the other).
+* “Basic Properties” were integrated in the Note buttons menu.
+ * The only exception here is the Language combo box which can now be found in the status bar (top-right of the screen).
+* “File” and “Image” tabs
+ * The buttons were moved to the right of the note title, as dedicated entries in Note buttons.
+ * The info section has been merged into the _Note info_ section of the status bar.
+* Edited notes
+ * Moved underneath the title, displayed under a collapsible area and the notes are represented as badges/chips.
+ * Whether the section is expanded or collapsed depends on the “Edited Notes ribbon tab will automatically open on day notes” setting from Options → Appearance.
+* Search definition tab
+ * Moved underneath the title under a collapsible area.
+ * Expanded by default for new searches, collapsed for saved searches.
+* The Note map is now available in the Note actions menu.
+ * Instead of opening into a panel in the ribbon, the note map now opens in a side split (similar to the in-app help).
+* “Note info” tab was moved to a small (i) icon in the status bar.
+* “Similar notes” tab
+ * Moved to the status bar, by going to the “Note info” section and pressing the button to show similar notes.
+ * Displayed as a fixed panel, similar to the attributes.
+* The Collection properties tab were relocated under the note title and grouped into:
+ * A combo box to quickly switch between views.
+ * Individual settings for the current view in a submenu.
+* Some smaller ribbon tabs were converted to badges that appear near the note title in the breadcrumb section:
+ * Original URL indicator for clipped web pages (`#pageUrl`).
+ * SQL and script execute buttons.
+
+> [!NOTE]
+> The ribbon keyboard shortcuts (e.g. `toggleRibbonTabClassicEditor`) have been repurposed to work on the new layout, where they will toggle the appropriate panel.
+
+### Removal of the floating buttons
+
+Most of the buttons were relocated to the right of the note title, in the Note buttons area, with the exception of:
+
+* The Edit button is displayed near the note title, as a badge.
+* _Backlinks_ is displayed in the status bar. When clicked, the same list of backlinks is displayed.
+* Relation map zoom buttons are now part of the relation map itself.
+* Export image to PNG/SVG are now in the Note actions menu, in the _Export as image_ option.
+
+## How to toggle the new layout
+
+Starting with v0.101.0, this new layout is enabled by default. It is possible to fall back to the old layout by going to Options → Appearance and selecting _Old layout_.
+
+> [!IMPORTANT]
+> Since a new layout was introduced, this becomes the standard one. The _Old layout_ is considered deprecated and will not receive new features (for example, the breadcrumb) as we focus on the new one. At some point the old layout will be removed entirely, as maintaining two layouts with major differences creates a maintenance burden.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.md
new file mode 100644
index 000000000..fb27f092a
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb.md
@@ -0,0 +1,26 @@
+# Breadcrumb
+
+
+The breadcrumb allows quickly viewing the note hierarchy of the current note and navigating through it.
+
+It is part of the Status bar, displayed in the bottom-left of the screen.
+
+## Layout and Interaction
+
+* If a note or workspace is hoisted, a badge will appear on the left-most side.
+ * Clicking on the badge will un-hoist the note/workspace.
+* The left-most icon represents the root note, or the hoisted note or workspace.
+ * Clicking the icon will jump to the root note.
+ * Right clicking the icon will display a menu that allows opening the note in a new tab, split, etc.
+* Each segment shows the title of a note in the current note hierarchy.
+ * Clicking the icon will jump to that note.
+ * Right clicking will open a menu with multiple options such as opening the note in a different tab/split/window, hoisting, moving/cloning the note, duplicating as well as changing the color of the note.
+* Clicking the arrow next to each segment will reveal the child notes of the segment on the left.
+ * Clicking on an icon will navigate to that particular note.
+ * It's also possible to create a new child note from here.
+ * The menu can optionally hide the archived notes.
+* If the current note is deep within a hierarchy, the segments will collapse into a \[…\] button in order not to occupy too much space.
+ * Clicking this button will display each collapsed entry as a menu item. Clicking on it will navigate to that particular note.
+* Right clicking on an empty space to the right of the breadcrumb (before the other status bar items) will reveal another menu that allows:
+ * Toggling whether archived notes are displayed in the breadcrumb and in the note tree.
+ * Copying the current note path to clipboard.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png
new file mode 100644
index 000000000..4a2f36ae2
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Breadcrumb_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.md
new file mode 100644
index 000000000..f5c12d3a7
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout/Status bar.md
@@ -0,0 +1,27 @@
+# Status bar
+The status bar displays information about the current note and allows changing settings related to it such as configuring the language or attributes.
+
+## Layout and interaction
+
+On the left side, the Breadcrumb is displayed which indicates the current note as well as its parent notes and allows for quick navigation throughout the hierarchy.
+
+On the right side, specific sections will show depending on the type of the current note.
+
+1. For code notes, the language mode of the note is indicated (e.g. JavaScript, plain text), as well as allowing easy switching to another mode.
+2. For text notes, the content language is displayed and can be changed, thus configuring the spell-check and the right-to-left support.
+ 1. Note that this applies to the entire note and not the selection, unlike some text editors.
+3. If a note is placed in multiple places in the tree (cloned), the number of the note paths will be displayed.
+ 1. Clicking it will reveal the full list of note paths and a button to place it somewhere else.
+4. If a note has attachments, their number will be displayed.
+ 1. Clicking on it will reveal the list of attachments in a new tab.
+5. If a note is linked from other text notes (backlinks), the number of backlinks will be displayed.
+ 1. Clicking on it will show the list of notes that link to this note, as well as an excerpt of where the note is referenced.
+
+Regardless of note type, the following items will always be displayed if there is a note:
+
+1. Note info, which displays:
+ 1. The creation/modification date of the note.
+ 2. The type and MIME of the note.
+ 3. The note ID.
+ 4. An estimation of the note size of the note itself and its children.
+ 5. A button to show Similar notes.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png
new file mode 100644
index 000000000..12f5e0d5f
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.md
index 3ec642656..d7577945a 100644
--- a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.md
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note buttons.md
@@ -2,4 +2,6 @@
To the right of the [Ribbon](Ribbon.md) there are a few more buttons: 
* The Note Revisions button displays the [Note Revisions](../Notes/Note%20Revisions.md) for that particular note.
-* The contextual menu offers commands for the note or its subtree, such as import, export, viewing the [Note source code](../../Advanced%20Usage/Note%20source.md) or [Attachments](../Notes/Attachments.md).
\ No newline at end of file
+* The contextual menu offers commands for the note or its subtree, such as import, export, viewing the [Note source code](../../Advanced%20Usage/Note%20source.md) or [Attachments](../Notes/Attachments.md).
+
+On the New Layout, the button area is populated by some more buttons that are specific to the current note. For example, for Image and File notes, the download and copy buttons were relocated there.
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+
A more advanced use-case is grouping by Relations.
+There are multiple types of documentation for Trilium:
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index d846c6d27..2e16e2add 100644
--- a/docs/User Guide/!!!meta.json
+++ b/docs/User Guide/!!!meta.json
@@ -2851,6 +2851,20 @@
"value": "note-buttons",
"isInheritable": false,
"position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "IjZS7iK5EXtb",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "W8vYD3Q1zjCR",
+ "isInheritable": false,
+ "position": 80
}
],
"format": "markdown",
@@ -3436,6 +3450,286 @@
"dataFileName": "Note Tooltip_image.png"
}
]
+ },
+ {
+ "isClone": false,
+ "noteId": "IjZS7iK5EXtb",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb"
+ ],
+ "title": "New Layout",
+ "notePosition": 220,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-layout",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "4TIF1oA4VQRO",
+ "isInheritable": false,
+ "position": 40
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "iPIMuisry3hd",
+ "isInheritable": false,
+ "position": 50
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "6f9hih2hXXZk",
+ "isInheritable": false,
+ "position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "KC1HB96bqqHX",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "8YBEPzcpUgxw",
+ "isInheritable": false,
+ "position": 80
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "grjYqerjn243",
+ "isInheritable": false,
+ "position": 90
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "XpOYSgsLkTJy",
+ "isInheritable": false,
+ "position": 100
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "cbkrhQjrkKrh",
+ "isInheritable": false,
+ "position": 110
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "MtPxeAWVAzMg",
+ "isInheritable": false,
+ "position": 120
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "CdNpE2pqjmI6",
+ "isInheritable": false,
+ "position": 140
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "YKWqdJhzi2VY",
+ "isInheritable": false,
+ "position": 150
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "veGu4faJErEM",
+ "isInheritable": false,
+ "position": 160
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "zEY4DaJG4YT5",
+ "isInheritable": false,
+ "position": 170
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "AlJ73vBCjWDw",
+ "isInheritable": false,
+ "position": 180
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "l0tKav7yLHGF",
+ "isInheritable": false,
+ "position": 190
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "eIg8jdvaoNNd",
+ "isInheritable": false,
+ "position": 200
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "m523cpzocqaD",
+ "isInheritable": false,
+ "position": 210
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "New Layout.md",
+ "attachments": [
+ {
+ "attachmentId": "3DFGaMiTTHQ1",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "New Layout_image.png"
+ },
+ {
+ "attachmentId": "6iN5nrmdwG6z",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "1_New Layout_image.png"
+ },
+ {
+ "attachmentId": "KvNAEoJjRhyr",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "2_New Layout_image.png"
+ },
+ {
+ "attachmentId": "lEKxf6dYMG6u",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "3_New Layout_image.png"
+ },
+ {
+ "attachmentId": "SYOTVGCyx749",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "4_New Layout_image.png"
+ },
+ {
+ "attachmentId": "wCwzwfGspejR",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "5_New Layout_image.png"
+ }
+ ],
+ "dirFileName": "New Layout",
+ "children": [
+ {
+ "isClone": false,
+ "noteId": "I6p2a06hdnL6",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb",
+ "I6p2a06hdnL6"
+ ],
+ "title": "Breadcrumb",
+ "notePosition": 10,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "AlJ73vBCjWDw",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-chevron-right",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Breadcrumb.md",
+ "attachments": [
+ {
+ "attachmentId": "CjYmaJD0L1D4",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Breadcrumb_image.png"
+ }
+ ]
+ },
+ {
+ "isClone": false,
+ "noteId": "AlJ73vBCjWDw",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "IjZS7iK5EXtb",
+ "AlJ73vBCjWDw"
+ ],
+ "title": "Status bar",
+ "notePosition": 20,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "I6p2a06hdnL6",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "label",
+ "name": "iconClass",
+ "value": "bx bx-dock-bottom",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Status bar.md",
+ "attachments": []
+ }
+ ]
}
]
},
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png
new file mode 100644
index 000000000..c9a85f777
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/1_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png
new file mode 100644
index 000000000..10676a08e
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png
new file mode 100644
index 000000000..b4452f695
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png
new file mode 100644
index 000000000..4a2f36ae2
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png
new file mode 100644
index 000000000..ca7593700
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png differ
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md
new file mode 100644
index 000000000..0fcfe17d8
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md
@@ -0,0 +1,114 @@
+# New Layout
+The _New layout_ is a series of UI/UX changes that were introduced in v0.101.0 that heavily change both existing UI elements, as well as adding some new ones. The goal of this new layout is to modernize the application and to make it more intuitive but at the same time to reduce clutter.
+
+## Newly introduced features
+
+### Status bar
+
+At the bottom of the window there is a new bar called the _Status bar_. This bar houses multiple items such as the Breadcrumb navigation and information and settings about the current note, such as the [content language](../../Note%20Types/Text/Content%20language%20%26%20Right-to-le.md) and Attributes.
+
+For more information, consult the [dedicated page](New%20Layout/Status%20bar.md).
+
+