docs(user): improve documentation on mobile support

docs/User Guide/User Guide/Basic Concepts and Features/Navigation/Bookmarks.md

@@ -1,12 +1,18 @@
 # Bookmarks
-To easily access selected notes, you can bookmark them. See demo:
+Frequently used notes can be bookmarked, which will make them appear in the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> for easy access.
 
-![](Bookmarks_bookmarks.gif)
+## Configuring the launch bar
+
+If bookmarks don't appear in the launch bar, then most likely the bookmark section has been hidden. Go to the <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> configuration from the <a class="reference-link" href="../UI%20Elements/Global%20menu.md">Global menu</a> and ensure _Bookmarks_ is in the _Visible Launchers_ section.
 
 ## Bookmark folder
 
 Space in the left panel is limited, and you might want to bookmark many items. One possible solution is to bookmark a folder, so it shows its children:
 
-![](Bookmarks_bookmark-folder.png)
+To do this, bookmark a folder and assign it the `#bookmarkFolder` label.
 
-To do this, you need to add a `#bookmarkFolder` label to the note.
+## Mobile
+
+On mobile, bookmarks are only displayed starting with v0.102.0. Because of the more constrained screen size, the bookmarks are grouped under a single icon instead of displaying them as separate icons.
+
+When pressed, a menu will appear listing all the bookmarks. Bookmark folders are also supported and will appear as sub-menus.

docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.md

@@ -1,7 +1,11 @@
 # Launch Bar
 ## Position of the Launch bar
 
-Depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See [Vertical and horizontal layout](Vertical%20and%20horizontal%20layout.md) for more information.
+On desktop, depending on the layout selected, the launcher bar will either be on the left side of the screen with buttons displayed vertically or at the top of the screen. See <a class="reference-link" href="Vertical%20and%20horizontal%20layout.md">Vertical and horizontal layout</a> for more information.
+
+On mobile, the launch bar will always be at the bottom.
+
+If there are too many items in the launch bar to fit the screen, it will become scrollable.
 
 ## Terminology
 
@@ -9,30 +13,38 @@ Depending on the layout selected, the launcher bar will either be on the left si
 *   **Available Launcher**: a launcher that is not displayed on the launch bar, but can be added.
 *   **Visible Launcher**: a launcher that is currently displayed on the launch bar.
 
-## Configuring the Launch bar
+## Configuring the desktop Launch bar
 
 There are two ways to configure the launch bar:
 
 *   Right click in the empty space between launchers on the launch bar and select _Configure Launchbar._
-*   Click on the [Global menu](Global%20menu.md) and select _Configure Launchbar_.
+*   Click on the <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
 
-This will open a new tab with the [Note Tree](Note%20Tree.md) listing the launchers.
+This will open a new tab with the <a class="reference-link" href="Note%20Tree.md">Note Tree</a> listing the launchers.
 
 ![](Launch%20Bar_image.png)
 
 Expanding _Available Launchers_ section will show the list of launchers that are not displayed on the launch bar. The _Visible Launchers_ will show the ones that are currently displayed.
 
+## Configuring the mobile launch bar
+
+The launch bar on mobile uses a different configuration from the desktop one. The reasoning is that not all desktop icons are available on mobile, and fewer icons fit on a mobile screen.
+
+To configure the launch bar on mobile, go to <a class="reference-link" href="Global%20menu.md">Global menu</a> and select _Configure Launchbar_.
+
+The configure the mobile launch bar while on the desktop (especially useful to configure more complicated launchers such as scripts or custom widgets), go to <a class="reference-link" href="Global%20menu.md">Global menu</a> → Advanced → Show Hidden Subtree and look for the _Mobile Launch Bar_ section. While in the hidden subtree, it's also possible to drag launchers between the _Mobile Launch Bar_ and (Desktop) _Launch Bar_ sections.
+
 ### Adding/removing and reordering launchers
 
 To display a new launcher in the launch bar, first look for it in the _Available Launchers_ section. Then right click it and select _Move to visible launchers_. It is also possible to drag and drop the item manually.
 
 Similarly, to remove it from the launch bar, simply look for it in _Visible Launchers_ then right click it and select _Move to available launchers_ or use drag-and-drop.
 
-Drag-and-drop the items in the tree in order to change their order. See [Note Tree](Note%20Tree.md) for more interaction options, including using keyboard shortcuts.
+Drag-and-drop the items in the tree in order to change their order. See <a class="reference-link" href="Note%20Tree.md">Note Tree</a> for more interaction options, including using keyboard shortcuts.
 
 ## Customizing the launcher
 
-*   The icon of a launcher can be changed just like a normal note. See [Note Icons](../Notes/Note%20Icons.md) for more information.
+*   The icon of a launcher can be changed just like a normal note. See <a class="reference-link" href="../Notes/Note%20Icons.md">Note Icons</a> for more information.
 *   The title of the launcher can also be changed.
 
 ### Resetting
@@ -45,19 +57,17 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
 
 1.  **Note Launcher**  
     A note launcher will simply navigate to a specified note.
-    
     1.  Set the `target` promoted attribute to the note to navigate to.
-    2.  Optionally, set `hoistedNote` to hoist a particular note. See [Note Hoisting](../Navigation/Note%20Hoisting.md) for more information.
+    2.  Optionally, set `hoistedNote` to hoist a particular note. See <a class="reference-link" href="../Navigation/Note%20Hoisting.md">Note Hoisting</a> for more information.
     3.  Optionally, set a `keyboardShortcut` to trigger the launcher.
 2.  **Script Launcher**  
-    An advanced launcher which will run a script upon pressing. See [Scripts](../../Scripting.md) for more information.
-    
+    An advanced launcher which will run a script upon pressing. See <a class="reference-link" href="../../Scripting.md">Scripting</a> for more information.
     1.  Set `script` to point to the desired script to run.
     2.  Optionally, set a `keyboardShortcut` to trigger the launcher.
 3.  **Custom Widget**
     
-    Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md) for more information.
+    Allows defining a custom widget to be rendered inside the launcher. See <a class="reference-link" href="../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md">Widget Basics</a> for more information.
 4.  **Spacers**  
     Launchers that create some distance between other launchers for better visual distinction.
 
-Launchers are configured via predefined [Promoted Attributes](../../Advanced%20Usage/Attributes/Promoted%20Attributes.md).
+Launchers are configured via predefined <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a>.

docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs.md

@@ -26,5 +26,20 @@ Since tabs are a commonly used feature, there are multiple keyboard shortcuts th
 *   <kbd>Ctrl</kbd>+<kbd>W</kbd> to close the current tab.
 *   <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen the last closed tab.
 *   <kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to go to the next or previous tab.
-*   <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up til ninth tab.
-*   There is also a shortcut to go to the last tab, but it is not assigned a key by default.
+*   <kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to activate the first, second and up to ninth tab.
+*   There is also a shortcut to go to the last tab, but it is not assigned a key by default.
+
+## Mobile
+
+<figure class="image image-style-align-right image_resized" style="width:34.12%;"><img style="aspect-ratio:1242/2688;" src="Tabs_IMG_1767.PNG" width="1242" height="2688"></figure>
+
+Tabs are also supported on the <a class="reference-link" href="../../Installation%20%26%20Setup/Mobile%20Frontend.md">Mobile Frontend</a>.
+
+Since v0.102.0, the tabs are displayed by pressing the dedicated tab switcher button in the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. In this view the tabs are laid out on a grid with a preview of the note content.
+
+The context menu button at the top-right of the popup allows creating a new tab, reopening the last closed tab and closing all the tabs.
+
+<a class="reference-link" href="Split%20View.md">Split View</a>s are also indicated in the tab switcher, with two titles displayed in a tab.
+
+> [!NOTE]
+> Versions prior to v0.102.0 also supported tabs, but they were displayed directly above the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a>. The decision to use a more mobile-like tab switcher was taken because the original tab bar could not support many tabs at once and the new design better aligns with how mobile applications handle tabs.

docs/User Guide/User Guide/Installation & Setup/Mobile Frontend.md

@@ -1,28 +1,85 @@
 # Mobile Frontend
-Trilium ([server edition](Server%20Installation.md)) has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
+<figure class="image image_resized image-style-align-right" style="width:33.52%;"><img style="aspect-ratio:1242/2688;" src="Mobile Frontend_IMG_1765.PNG" width="1242" height="2688"></figure>
 
-Mobile frontend is limited in features compared to full desktop frontend. See below for more details on this.
+Trilium has a mobile web frontend which is optimized for touch based devices - smartphones and tablets. It is activated automatically during login process based on browser detection.
 
-Note that this is not an Android/iOS app, this is just mobile friendly web page served on the [server edition](Server%20Installation.md).
+Mobile frontend is limited in features compared to the full desktop version. See below for more details on this.
+
+## Layout basics
+
+Unlike the desktop version, the mobile version has a slightly different UI meant to better fit the constrained screens of a mobile phone.
+
+Here is a non-exhaustive list of differences between the desktop version and the mobile one:
+
+*   The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a> is displayed as a sidebar. To display the sidebar, press the button in the top-left of the screen.
+    
+    *   There is also a swipe gesture that can be done from the left of the screen, but the browser's navigation gesture interferes with it most of the time (depending on the platform).
+    *   Press and hold a note to display the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree/Note%20tree%20contextual%20menu.md">Note tree contextual menu</a>.
+*   The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Quick%20search.md">Quick search</a> bar is also displayed at the top of the note tree.
+*   The full <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Search.md">Search</a> function can be triggered either from either the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a> or from the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, if configured.
+*   The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> is displayed at the bottom of the screen.
+    
+    *   The launch bar uses a different configuration for icons than the desktop version. See the dedicated page for more information on how to configure it.
+*   Most of the note-related actions are grouped in the horizontal dots icon on the top-right of the note.
+*   The <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Tabs.md">Tabs</a> are grouped under a tab switcher in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, where the tabs are displayed in a full-screen grid with preview for easy switching, as well as additional options such as reopening closed tabs.
+*   Since v0.100.0, <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Split%20View.md">Split View</a> can also be used in mobile view, but with a maximum of two panes at once. The splits are displayed vertically instead of horizontally.
+*   Starting with v0.102.0, the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/New%20Layout.md">New Layout</a> is enforced on mobile. This brings features such as the note badges, note type switcher or collection properties which would otherwise not be available.
+
+## Installing as a PWA
+
+The mobile view can be set up as a PWA. While this does not offer any offline capabilities, it will display the application in full-screen and makes it easy to access via your mobile phone's home screen.
+
+### On iOS with Safari
+
+1.  Open your default web browser and access your Trilium instance.
+2.  Login.
+3.  Press the \[…\] button in the bottom-right of the screen and select Share.
+4.  Scroll down to reveal the full list of items and choose “Add to Home Screen”.
+5.  Press “Add” and the web app will be available.
+
+### On Android with Google Chrome
+
+> [!IMPORTANT]
+> Google Chrome requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
+
+1.  Open your default web browser and access your Trilium instance.
+2.  Login.
+3.  Press the three vertical dots icon in the top-right of the screen and select _Add to Home screen._
+4.  Select the _Install_ option.
+5.  Select an appropriate name.
+6.  The web app will appear as an application, not on the home screen.
+
+### On Android with Brave
+
+> [!IMPORTANT]
+> Brave requires the server to be served over HTTPS in order to display in full-screen. If using HTTP, the app will appear like a normal web page (similar to a bookmark).
+
+1.  Open your default web browser and access your Trilium instance.
+2.  Login.
+3.  Press the three vertical dots icon in the bottom-right of the screen and select _Add to Home screen_.
+4.  Press the _Install_ option.
+5.  The web app will appear as an application, not on the home screen.
+
+### On Samsung Browser
+
+1.  Open your default web browser and access your Trilium instance.
+2.  Login.
+3.  Press the hamburger menu in the bottom-right of the screen.
+4.  Select _Add to_, followed by _Home screen_.
+5.  Press _Add_ and the web app will appear on the home page.
 
 ## Testing via the desktop application
 
 If you are running Trilium without a dedicated [server installation](Server%20Installation.md), you can still test the mobile application using the desktop application. For more information, see <a class="reference-link" href="Desktop%20Installation/Using%20the%20desktop%20application%20.md">Using the desktop application as a server</a>. To access it go to `http://<ip>:37840/login?mobile` .
 
-## Limitations
-
-Mobile frontend provides only some of the features of the full desktop frontend:
-
-*   it is possible to browse the whole note tree, read and edit all types of notes, but you can create only text notes
-*   reading and editing [protected notes](../Basic%20Concepts%20and%20Features/Notes/Protected%20Notes.md) is possible, but creating them is not supported
-*   editing options is not supported
-*   cloning notes is not supported
-*   uploading file attachments is not supported
-
 ## Forcing mobile/desktop frontend
 
-Trilium decides automatically whether to use mobile or desktop frontend. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
+Trilium decides automatically whether to use mobile or desktop front-end. If this is not appropriate, you can use `?mobile` or `?desktop` query param on **login** page (Note: you might need to log out).
+
+Alternatively, simply select _Switch to Mobile/Desktop Version_ in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>.
 
 ## Scripting
 
-You can alter the behavior with [scripts](../Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
+You can alter the behavior with <a class="reference-link" href="../Scripting.md">Scripting</a>, just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
+
+Custom <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a> widgets are also supported.