feat(mobile): add very basic support for tabs

src/public/app/components/note_context.ts

@@ -237,7 +237,7 @@ class NoteContext extends Component
 
         this.hoistedNoteId = noteIdToHoist;
 
-        if (!this.notePathArray?.includes(noteIdToHoist) && !utils.isMobile()) {
+        if (!this.notePathArray?.includes(noteIdToHoist)) {
             await this.setNote(noteIdToHoist);
         }
 

src/public/app/components/tab_manager.js

@@ -62,10 +62,6 @@ export default class TabManager extends Component {
             ], true);
 
             const filteredNoteContexts = noteContextsToOpen.filter(openTab => {
-                if (utils.isMobile()) { // mobile frontend doesn't have tabs so show only the active tab
-                    return !!openTab.active;
-                }
-
                 const noteId = treeService.getNoteIdFromUrl(openTab.notePath);
                 if (!(noteId in froca.notes)) {
                     // note doesn't exist so don't try to open tab for it
@@ -272,15 +268,7 @@ export default class TabManager extends Component {
     async openEmptyTab(ntxId = null, hoistedNoteId = 'root', mainNtxId = null) {
         const noteContext = new NoteContext(ntxId, hoistedNoteId, mainNtxId);
 
-        let existingNoteContext;
+        const existingNoteContext = this.children.find(nc => nc.ntxId === noteContext.ntxId);
-
-        if (utils.isMobile()) {
-            // kind of hacky way to enforce a single tab on mobile interface - all requests to create a new one
-            // are forced to reuse the existing ab instead
-            existingNoteContext = this.getActiveContext();
-        } else {
-            existingNoteContext = this.children.find(nc => nc.ntxId === noteContext.ntxId);
-        }
 
         if (existingNoteContext) {
             await existingNoteContext.setHoistedNoteId(hoistedNoteId);
@@ -421,7 +409,10 @@ export default class TabManager extends Component {
             }
 
             // close dangling autocompletes after closing the tab
-            $(".aa-input").autocomplete("close");
+            const $autocompleteEl = $(".aa-input");
+            if ("autocomplete" in $autocompleteEl) {
+                $autocompleteEl.autocomplete("close");
+            }
 
             const noteContextsToRemove = noteContextToRemove.getSubContexts();
             const ntxIdsToRemove = noteContextsToRemove.map(nc => nc.ntxId);
@@ -551,7 +542,7 @@ export default class TabManager extends Component {
             await this.removeNoteContext(ntxIdToRemove);
         }
     }
-    
+
     async closeOtherTabsCommand({ntxId}) {
         for (const ntxIdToRemove of this.mainNoteContexts.map(nc => nc.ntxId)) {
             if (ntxIdToRemove !== ntxId) {
@@ -589,7 +580,7 @@ export default class TabManager extends Component {
     async copyTabToNewWindowCommand({ntxId}) {
         const {notePath, hoistedNoteId} = this.getNoteContextById(ntxId);
         this.triggerCommand('openInWindow', {notePath, hoistedNoteId});
-    } 
+    }
 
     async reopenLastTabCommand() {
         let closeLastEmptyTab = null;

src/public/app/layouts/mobile_layout.ts

@@ -28,6 +28,7 @@ import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 import AboutDialog from "../widgets/dialogs/about.js";
 import HelpDialog from "../widgets/dialogs/help.js";
 import AppContext from "../components/app_context.js";
+import TabRowWidget from "../widgets/tab_row.js";
 
 const MOBILE_CSS = `
 <style>
@@ -183,6 +184,7 @@ export default class MobileLayout {
                 .child(new ProtectedSessionPasswordDialog())
                 .child(new ConfirmDialog())
             )
+            .child(new TabRowWidget().css('height', '40px'))
             .child(new FlexContainer("row")
                 .class("horizontal")
                 .css("height", "53px")

src/public/app/widgets/note_context_aware_widget.js

@@ -49,10 +49,10 @@ class NoteContextAwareWidget extends BasicWidget {
 
     /**
      * Indicates if the widget is enabled. Widgets are enabled by default. Generally setting this to `false` will cause the widget not to be displayed, however it will still be available on the DOM but hidden.
-     * 
+     *
      * <p>
      * If the widget is not enabled, it will not receive `refreshWithNote` updates.
-     * 
+     *
      * @returns {boolean} true when an active note exists
      */
     isEnabled() {
@@ -88,6 +88,7 @@ class NoteContextAwareWidget extends BasicWidget {
     async refreshWithNote(note) {}
 
     async noteSwitchedEvent({noteContext, notePath}) {
+        this.noteContext = noteContext;
         // if notePath does not match, then the noteContext has been switched to another note in the meantime
         if (noteContext.notePath === notePath) {
             await this.noteSwitched();