mobile global buttons

src/public/javascripts/mobile_old.js

@@ -133,12 +133,6 @@ $detail.on("click", ".note-menu-button", async e => {
     });
 });
 
-$("#switch-to-desktop-button").on('click', () => {
-    utils.setCookie('trilium-device', 'desktop');
-
-    utils.reloadApp();
-});
-
 $("#log-out-button").on('click', () => {
     $("#logout-form").trigger('submit');
 });

src/public/javascripts/services/entrypoints.js

@@ -7,6 +7,7 @@ import server from "./server.js";
 import appContext from "./app_context.js";
 import Component from "../widgets/component.js";
 import toastService from "./toast.js";
+import noteCreateService from "./note_create.js";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -158,4 +159,12 @@ export default class Entrypoints extends Component {
         // when the result list does not change with a query
         toastService.showMessage("Search finished successfully.");
     }
+
+    async switchToDesktopVersionCommand() {
+        utils.setCookie('trilium-device', 'desktop');
+
+        utils.reloadApp();
+    }
+
+    createTopLevelNoteCommand() { noteCreateService.createNewTopLevelNote(); }
 }

src/public/javascripts/widgets/mobile_global_buttons.js

@@ -0,0 +1,38 @@
+import BasicWidget from "./basic_widget.js";
+
+const WIDGET_TPL = `
+<div id="global-buttons">
+    <style>
+    #global-buttons {
+        display: flex;
+        flex-shrink: 0;
+        justify-content: space-around;
+        padding: 3px 0 3px 0;
+        margin: 0 10px 0 16px;
+    }
+    </style>
+
+    <a data-trigger-command="createTopLevelNote" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
+
+    <a data-trigger-command="collapseTree" title="Collapse note tree" class="icon-action bx bx-layer-minus"></a>
+
+    <a data-trigger-command="scrollToActiveNote" title="Scroll to active note" class="icon-action bx bx-crosshair"></a>
+
+    <div class="dropdown">
+        <a title="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a>
+
+        <div class="dropdown-menu dropdown-menu-right">
+            <a class="dropdown-item" data-trigger-command="switchToDesktopVersion"><span class="bx bx-laptop"></span> Switch to desktop version</a>
+            <a class="dropdown-item" data-trigger-command="logout"><span class="bx bx-log-out"></span> Logout</a>
+        </div>
+    </div>
+</div>
+`;
+
+class MobileGlobalButtonsWidget extends BasicWidget {
+    doRender() {
+        return this.$widget = $(WIDGET_TPL);
+    }
+}
+
+export default MobileGlobalButtonsWidget;

src/public/javascripts/widgets/mobile_layout.js

@@ -2,6 +2,7 @@ import FlexContainer from "./flex_container.js";
 import NoteTitleWidget from "./note_title.js";
 import NoteDetailWidget from "./note_detail.js";
 import NoteTreeWidget from "./note_tree.js";
+import MobileGlobalButtonsWidget from "./mobile_global_buttons.js";
 
 export default class MobileLayout {
     getRootWidget(appContext) {
@@ -10,7 +11,7 @@ export default class MobileLayout {
             .id('root-widget')
             .css('height', '100vh')
             .child(new FlexContainer('column')
-                // .child(/* buttons */)
+                .child(new MobileGlobalButtonsWidget())
                 .child(new NoteTreeWidget()))
             .child(new FlexContainer('column')
                 .child(new NoteTitleWidget())

src/public/javascripts/widgets/note_tree.js

@@ -103,9 +103,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
             },
             expand: (event, data) => this.setExpandedToServer(data.node.data.branchId, true),
             collapse: (event, data) => this.setExpandedToServer(data.node.data.branchId, false),
-            hotkeys: {
-                keydown: await this.getHotKeys()
-            },
+            hotkeys: utils.isMobile() ? undefined : { keydown: await this.getHotKeys() },
             dnd5: {
                 autoExpandMS: 600,
                 dragStart: (node, data) => {
@@ -399,8 +397,6 @@ export default class NoteTreeWidget extends TabAwareWidget {
         await this.tree.reload(notes);
     }
 
-    createTopLevelNoteCommand() { noteCreateService.createNewTopLevelNote(); }
-
     collapseTreeCommand() { this.collapseTree(); }
 
     isEnabled() {

src/public/stylesheets/mobile.css

@@ -5,17 +5,6 @@ html, body {
     padding: 0;
 }
 
-#container-row {
-    height: 100%;
-}
-
-#global-buttons {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: space-around;
-    padding: 3px 0 3px 0;
-    margin: 0 10px 0 16px;
-}
 
 .tree {
     width: 100%;

src/views/mobile.ejs

@@ -13,7 +13,6 @@
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
 
-
 <script type="text/javascript">
     window.baseApiUrl = 'api/';
     window.device = "mobile";