feat(mobile): add search to launch bar

; Conflicts:
;	apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx

apps/client/src/layouts/mobile_layout.css

@@ -0,0 +1,72 @@
+span.keyboard-shortcut,
+kbd {
+    display: none;
+}
+
+.dropdown-menu {
+    font-size: larger;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.25em;
+    padding-inline-start: 0.5em;
+    padding-inline-end: 0.5em;
+    color: var(--main-text-color);
+}
+.quick-search {
+    margin: 0;
+}
+.quick-search .dropdown-menu {
+    max-width: 350px;
+}
+
+/* #region Tree */
+.tree-wrapper {
+    max-height: 100%;
+    margin-top: 0px;
+    overflow-y: auto;
+    contain: content;
+    padding-inline-start: 10px;
+}
+
+.fancytree-title {
+    margin-inline-start: 0.6em !important;
+}
+
+.fancytree-node {
+    padding: 5px;
+}
+
+span.fancytree-expander {
+    width: 24px !important;
+    margin-inline-end: 5px;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 24px;
+    height: 32px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 20px;
+    height: 20px;
+    margin-top: 4px;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.tree-wrapper .collapse-tree-button,
+.tree-wrapper .scroll-to-active-note-button,
+.tree-wrapper .tree-settings-button {
+    position: fixed;
+    margin-inline-end: 16px;
+    display: none;
+}
+
+.tree-wrapper .unhoist-button {
+    font-size: 200%;
+}
+/* #endregion */

apps/client/src/layouts/mobile_layout.tsx

@@ -1,3 +1,5 @@
+import "./mobile_layout.css";
+
 import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
@@ -20,7 +22,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import { useNoteContext } from "../widgets/react/hooks.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
@@ -30,98 +31,11 @@ import SearchResult from "../widgets/search_result.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
 
-const MOBILE_CSS = `
-<style>
-span.keyboard-shortcut,
-kbd {
-    display: none;
-}
-
-.dropdown-menu {
-    font-size: larger;
-}
-
-.action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.25em;
-    padding-inline-start: 0.5em;
-    padding-inline-end: 0.5em;
-    color: var(--main-text-color);
-}
-.quick-search {
-    margin: 0;
-}
-.quick-search .dropdown-menu {
-    max-width: 350px;
-}
-</style>`;
-
-const FANCYTREE_CSS = `
-<style>
-.tree-wrapper {
-    max-height: 100%;
-    margin-top: 0px;
-    overflow-y: auto;
-    contain: content;
-    padding-inline-start: 10px;
-}
-
-.fancytree-custom-icon {
-    font-size: 2em;
-}
-
-.fancytree-title {
-    font-size: 1.5em;
-    margin-inline-start: 0.6em !important;
-}
-
-.fancytree-node {
-    padding: 5px;
-}
-
-.fancytree-node .fancytree-expander:before {
-    font-size: 2em !important;
-}
-
-span.fancytree-expander {
-    width: 24px !important;
-    margin-inline-end: 5px;
-}
-
-.fancytree-loading span.fancytree-expander {
-    width: 24px;
-    height: 32px;
-}
-
-.fancytree-loading  span.fancytree-expander:after {
-    width: 20px;
-    height: 20px;
-    margin-top: 4px;
-    border-width: 2px;
-    border-style: solid;
-}
-
-.tree-wrapper .collapse-tree-button,
-.tree-wrapper .scroll-to-active-note-button,
-.tree-wrapper .tree-settings-button {
-    position: fixed;
-    margin-inline-end: 16px;
-    display: none;
-}
-
-.tree-wrapper .unhoist-button {
-    font-size: 200%;
-}
-</style>`;
-
 export default class MobileLayout {
     getRootWidget(appContext: typeof AppContext) {
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
             .class("horizontal-layout")
-            .cssBlock(MOBILE_CSS)
             .child(new FlexContainer("column").id("mobile-sidebar-container"))
             .child(
                 new FlexContainer("row")
@@ -135,7 +49,7 @@ export default class MobileLayout {
                             .css("padding-inline-start", "0")
                             .css("padding-inline-end", "0")
                             .css("contain", "content")
-                            .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
+                            .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget()))
                     )
                     .child(
                         new ScreenContainer("detail", "row")
@@ -155,7 +69,6 @@ export default class MobileLayout {
                                                 .child(<NoteBadges />)
                                                 .child(<MobileDetailMenu />)
                                         )
-                                        .child(<PromotedAttributes />)
                                         .child(
                                             new ScrollingContainer()
                                                 .filling()
@@ -164,7 +77,6 @@ export default class MobileLayout {
                                                 .child(<NoteTitleActions />)
                                                 .child(<NoteDetail />)
                                                 .child(<NoteList media="screen" />)
-                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
                                                 .child(<SearchResult />)
                                                 .child(<FilePropertiesWrapper />)
                                         )

apps/client/src/services/content_renderer.css

@@ -0,0 +1,9 @@
+.rendered-content.no-preview > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    font-size: 500%;
+    flex-grow: 1;
+}

apps/client/src/services/content_renderer.ts

@@ -1,3 +1,5 @@
+import "./content_renderer.css";
+
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 import WheelZoom from 'vanilla-js-wheel-zoom';
 
@@ -71,18 +73,9 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
 
         $renderedContent.append($("<div>").append("<div>This note is protected and to access it you need to enter password.</div>").append("<br/>").append($button));
     } else if (entity instanceof FNote) {
-        $renderedContent
-            .css("display", "flex")
-            .css("flex-direction", "column");
+        $renderedContent.addClass("no-preview");
         $renderedContent.append(
-            $("<div>")
-                .css("display", "flex")
-                .css("justify-content", "space-around")
-                .css("align-items", "center")
-                .css("height", "100%")
-                .css("font-size", "500%")
-                .css("flex-grow", "1")
-                .append($("<span>").addClass(entity.getIcon()))
+            $("<div>").append($("<span>").addClass(entity.getIcon()))
         );
 
         if (entity.type === "webView" && entity.hasLabel("webViewSrc")) {

apps/client/src/stylesheets/style.css

@@ -28,7 +28,7 @@
     --bs-body-color: var(--main-text-color) !important;
     --bs-body-bg: var(--main-background-color) !important;
     --ck-mention-list-max-height: 500px;
-    --tn-modal-max-height: 90vh;
+    --tn-modal-max-height: 90svh;
 
     --tree-item-light-theme-max-color-lightness: 50;
     --tree-item-dark-theme-min-color-lightness: 75;
@@ -111,6 +111,7 @@ body.mobile #root-widget.virtual-keyboard-opened #mobile-bottom-bar {
 }
 
 #mobile-bottom-bar {
+    border-top: 1px solid var(--main-border-color);
     padding-bottom: var(--mobile-bottom-offset);
 }
 
@@ -409,6 +410,7 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu.static {
     box-shadow: unset;
+    backdrop-filter: unset !important;
 }
 
 .dropend .dropdown-toggle::after {
@@ -1552,8 +1554,9 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         max-height: calc(var(--tn-modal-max-height) - var(--dropdown-bottom));
     }
 
-    body.mobile .modal-dialog .dropdown-menu.mobile-bottom-menu.show {
-        --dropdown-bottom: 0;
+    body.mobile .dropdown-menu.mobile-bottom-menu.show {
+        --dropdown-bottom: 0px;
+        padding-bottom: calc(max(var(--menu-padding-size), env(safe-area-inset-bottom))) !important;
     }
 
     #mobile-sidebar-container {
@@ -1681,47 +1684,15 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         background: var(--main-background-color);
     }
 
-    .modal-dialog {
-        margin: var(--bs-modal-margin);
-        max-width: 80%;
-    }
+    body.mobile {
+        .modal-dialog {
+            margin: var(--bs-modal-margin);
+            max-width: 80%;
+        }
 
-    .modal-content {
-        height: 100%;
-    }
-}
-
-@media (max-width: 991px) {
-    body.mobile.force-fixed-tree #mobile-sidebar-wrapper {
-        padding-top: 0;
-        position: static;
-        height: 40vh;
-        width: 100vw;
-        transform: none !important;
-        background-color: var(--left-pane-background-color) !important;
-        border-bottom: 0.5px solid var(--main-border-color);
-    }
-
-    body.mobile.force-fixed-tree #mobile-sidebar-container {
-        display: none !important;
-    }
-
-    body.mobile.force-fixed-tree #mobile-sidebar-wrapper .quick-search {
-        display: none;
-    }
-
-    body.mobile.force-fixed-tree .component > button.bx-sidebar {
-        visibility: hidden;
-        padding: 0;
-        width: 6px;
-    }
-
-    body.mobile.force-fixed-tree #mobile-rest-container {
-        flex-direction: column !important;
-    }
-
-    body.mobile.force-fixed-tree #detail-container {
-        flex-grow: 1;
+        .modal-content {
+            height: 100%;
+        }
     }
 }
 
@@ -2637,10 +2608,10 @@ iframe.print-iframe {
             }
         }
 
-        /* #root-widget.virtual-keyboard-opened .note-split:not(:focus-within) {
+        #root-widget.virtual-keyboard-opened .note-split:not(.active) {
             max-height: 80px;
             opacity: 0.4;
-        } */
+        }
     }
 }
 

apps/client/src/stylesheets/theme-next/pages.css

@@ -57,12 +57,12 @@
     height: 18px;
 }
 
-/* 
+/*
  * SEARCH PAGE
  */
 
  /* Button bar */
- .search-definition-widget .search-setting-table tbody:last-child div {
+ .search-definition-widget .search-setting-table .search-actions-container {
     justify-content: flex-end;
     gap: 8px;
  }
@@ -143,7 +143,7 @@
 /*
  * OPTIONS PAGES
  */
- 
+
  :root {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
@@ -335,4 +335,4 @@ nav.options-section-tabs + .options-section {
 
 .etapi-options-section div {
     height: auto !important;
-}
+}

apps/client/src/stylesheets/theme-next/shell.css

@@ -739,18 +739,12 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
     transform: translateX(-25%);
 }
 
-body.mobile .fancytree-expander::before,
-body.mobile .fancytree-title,
-body.mobile .fancytree-node > span {
-    font-size: 1rem !important;
-}
-
 @media (max-width: 991px) {
     body.mobile #mobile-sidebar-container {
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper {
+    body.mobile #mobile-sidebar-wrapper {
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
         border-inline-end: 1px solid var(--subtle-border-color);

apps/client/src/translations/en/translation.json

@@ -662,7 +662,8 @@
     "show-cheatsheet": "Show Cheatsheet",
     "toggle-zen-mode": "Zen Mode",
     "new-version-available": "New Update Available",
-    "download-update": "Get Version {{latestVersion}}"
+    "download-update": "Get Version {{latestVersion}}",
+    "search_notes": "Search notes"
   },
   "zen_mode": {
     "button_exit": "Exit Zen Mode"
@@ -761,7 +762,8 @@
     "note_revisions": "Note revisions",
     "error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'",
     "error_unrecognized_command": "Unrecognized command {{command}}",
-    "backlinks": "Backlinks"
+    "backlinks": "Backlinks",
+    "content_language_switcher": "Content language: {{language}}"
   },
   "note_icon": {
     "change_note_icon": "Change note icon",
@@ -906,6 +908,7 @@
     "debug": "debug",
     "debug_description": "Debug will print extra debugging information into the console to aid in debugging complex queries",
     "action": "action",
+    "option": "option",
     "search_button": "Search",
     "search_execute": "Search & Execute actions",
     "save_to_note": "Save to note",

apps/client/src/widgets/NoteDetail.css

@@ -3,6 +3,30 @@
     font-family: var(--detail-font-family);
     font-size: var(--detail-font-size);
     contain: none;
+
+    &.fixed-tree {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .fixed-note-tree-container {
+            height: 60%;
+            border-bottom: 1px solid var(--main-border-color);
+            overflow: auto;
+
+            .tree-wrapper {
+                padding: 0;
+            }
+
+            .tree {
+                padding: 0;
+            }
+
+            ul {
+                margin: 0;
+            }
+        }
+    }
 }
 
 body.prefers-centered-content .note-detail {
@@ -12,4 +36,4 @@ body.prefers-centered-content .note-detail {
 
 .note-detail > * {
     contain: none;
-}
+}

apps/client/src/widgets/NoteDetail.tsx

@@ -1,5 +1,6 @@
 import "./NoteDetail.css";
 
+import clsx from "clsx";
 import { isValidElement, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -12,8 +13,9 @@ import { t } from "../services/i18n";
 import protected_session_holder from "../services/protected_session_holder";
 import toast from "../services/toast.js";
 import { dynamicRequire, isElectron, isMobile } from "../services/utils";
+import NoteTreeWidget from "./note_tree";
 import { ExtendedNoteType, TYPE_MAPPINGS, TypeWidget } from "./note_types";
-import { useNoteContext, useTriliumEvent } from "./react/hooks";
+import { useLegacyWidget, useNoteContext, useTriliumEvent } from "./react/hooks";
 import { NoteListWithLinks } from "./react/NoteList";
 import { TypeWidgetProps } from "./type_widgets/type_widget";
 
@@ -36,6 +38,7 @@ export default function NoteDetail() {
     const [ noteTypesToRender, setNoteTypesToRender ] = useState<{ [ key in ExtendedNoteType ]?: (props: TypeWidgetProps) => VNode }>({});
     const [ activeNoteType, setActiveNoteType ] = useState<ExtendedNoteType>();
     const widgetRequestId = useRef(0);
+    const hasFixedTree = note && noteContext?.hoistedNoteId === "_lbMobileRoot" && isMobile() && note.noteId.startsWith("_lbMobile");
 
     const props: TypeWidgetProps = {
         note: note!,
@@ -119,13 +122,6 @@ export default function NoteDetail() {
         }
     });
 
-    // Fixed tree for launch bar config on mobile.
-    useEffect(() => {
-        if (!isMobile) return;
-        const hasFixedTree = noteContext?.hoistedNoteId === "_lbMobileRoot";
-        document.body.classList.toggle("force-fixed-tree", hasFixedTree);
-    }, [ note ]);
-
     // Handle toast notifications.
     useEffect(() => {
         if (!isElectron()) return;
@@ -215,8 +211,13 @@ export default function NoteDetail() {
     return (
         <div
             ref={containerRef}
-            class={`component note-detail ${isFullHeight ? "full-height" : ""}`}
+            class={clsx("component note-detail", {
+                "full-height": isFullHeight,
+                "fixed-tree": hasFixedTree
+            })}
         >
+            {hasFixedTree && <FixedTree noteContext={noteContext} />}
+
             {Object.entries(noteTypesToRender).map(([ itemType, Element ]) => {
                 return <NoteDetailWrapper
                     Element={Element}
@@ -231,6 +232,11 @@ export default function NoteDetail() {
     );
 }
 
+function FixedTree({ noteContext }: { noteContext: NoteContext }) {
+    const [ treeEl ] = useLegacyWidget(() => new NoteTreeWidget(), { noteContext });
+    return <div class="fixed-note-tree-container">{treeEl}</div>;
+}
+
 /**
  * Wraps a single note type widget, in order to keep it in the DOM even after the user has switched away to another note type. This allows faster loading of the same note type again. The properties are cached, so that they are updated only
  * while the widget is visible, to avoid rendering in the background. When not visible, the DOM element is simply hidden.

apps/client/src/widgets/buttons/global_menu.tsx

@@ -45,6 +45,10 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             noDropdownListStyle
             mobileBackdrop
         >
+            {isMobile() && <>
+                <MenuItem command="searchNotes" icon="bx bx-search" text={t("global_menu.search_notes")} />
+                <FormDropdownDivider />
+            </>}
 
             <MenuItem command="openNewWindow" icon="bx bx-window-open" text={t("global_menu.open_new_window")} />
             <MenuItem command="showShareSubtree" icon="bx bx-share-alt" text={t("global_menu.show_shared_notes_subtree")} />
@@ -105,7 +109,7 @@ function BrowserOnlyOptions() {
 
 function DevelopmentOptions({ dropStart }: { dropStart: boolean }) {
     return <>
-        <FormListHeader text="Development Options"></FormListHeader>
+        <FormListHeader text="Development Options" />
         <FormDropdownSubmenu icon="bx bx-test-tube" title="Experimental features" dropStart={dropStart}>
             {experimentalFeatures.map((feature) => (
                 <ExperimentalFeatureToggle key={feature.id} experimentalFeature={feature as ExperimentalFeature} />

apps/client/src/widgets/containers/root_container.ts

@@ -1,11 +1,12 @@
-import { EventData } from "../../components/app_context.js";
 import { LOCALES } from "@triliumnext/commons";
-import { readCssVar } from "../../utils/css-var.js";
-import FlexContainer from "./flex_container.js";
-import options from "../../services/options.js";
-import type BasicWidget from "../basic_widget.js";
-import utils from "../../services/utils.js";
+
+import { EventData } from "../../components/app_context.js";
 import { getEnabledExperimentalFeatureIds } from "../../services/experimental_features.js";
+import options from "../../services/options.js";
+import utils, { isMobile } from "../../services/utils.js";
+import { readCssVar } from "../../utils/css-var.js";
+import type BasicWidget from "../basic_widget.js";
+import FlexContainer from "./flex_container.js";
 
 /**
  * The root container is the top-most widget/container, from which the entire layout derives.
@@ -17,14 +18,12 @@ import { getEnabledExperimentalFeatureIds } from "../../services/experimental_fe
  * - `#root-container.vertical-layout`, if the current layout is horizontal.
  */
 export default class RootContainer extends FlexContainer<BasicWidget> {
-    private originalViewportHeight: number;
 
     constructor(isHorizontalLayout: boolean) {
         super(isHorizontalLayout ? "column" : "row");
 
         this.id("root-widget");
         this.css("height", "100dvh");
-        this.originalViewportHeight = getViewportHeight();
     }
 
     render(): JQuery<HTMLElement> {
@@ -64,8 +63,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
     }
 
     #onMobileResize() {
-        const currentViewportHeight = getViewportHeight();
-        const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight);
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+        const windowHeight = window.innerHeight;
+
+        // If viewport is significantly smaller, keyboard is likely open
+        const isKeyboardOpened = windowHeight - viewportHeight > 150;
+
         this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
     }
 
@@ -88,7 +91,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
     }
 
     #setBackdropEffects() {
-        const enabled = options.is("backdropEffectsEnabled");
+        const enabled = options.is("backdropEffectsEnabled") && !isMobile();
         document.body.classList.toggle("backdrop-effects-disabled", !enabled);
     }
 
@@ -96,7 +99,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         // Supports background effects
 
         const useBgfx = readCssVar(document.documentElement, "allow-background-effects")
-                        .asBoolean(false);
+            .asBoolean(false);
 
         document.body.classList.toggle("theme-supports-background-effects", useBgfx);
     }
@@ -114,6 +117,3 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
     }
 }
 
-function getViewportHeight() {
-    return window.visualViewport?.height ?? window.innerHeight;
-}

apps/client/src/widgets/layout/NoteTitleActions.css

@@ -50,6 +50,9 @@ body.experimental-feature-new-layout {
             }
         }
 
+    }
+
+    body.desktop .title-actions {
         > .collapsible,
         > .note-type-switcher {
             padding-inline-start: calc(24px - var(--title-actions-padding-start));
@@ -57,3 +60,4 @@ body.experimental-feature-new-layout {
         }
     }
 }
+

apps/client/src/widgets/layout/NoteTitleActions.tsx

@@ -1,25 +1,21 @@
 import "./NoteTitleActions.css";
 
-import clsx from "clsx";
 import { useEffect, useState } from "preact/hooks";
 
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
-import CollectionProperties from "../note_bars/CollectionProperties";
 import { checkFullHeight, getExtendedWidgetType } from "../NoteDetail";
 import { PromotedAttributesContent, usePromotedAttributeData } from "../PromotedAttributes";
-import SimpleBadge from "../react/Badge";
 import Collapsible, { ExternallyControlledCollapsible } from "../react/Collapsible";
 import { useNoteContext, useNoteLabel, useNoteProperty, useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
-import NoteLink, { NewNoteLink } from "../react/NoteLink";
+import { NewNoteLink } from "../react/NoteLink";
 import { useEditedNotes } from "../ribbon/EditedNotesTab";
 import SearchDefinitionTab from "../ribbon/SearchDefinitionTab";
 import NoteTypeSwitcher from "./NoteTypeSwitcher";
 
 export default function NoteTitleActions() {
-    const { note, ntxId, componentId, noteContext } = useNoteContext();
-    const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_");
+    const { note, ntxId, componentId, noteContext, viewScope } = useNoteContext();
     const noteType = useNoteProperty(note, "type");
 
     return (
@@ -27,7 +23,7 @@ export default function NoteTitleActions() {
             <PromotedAttributes note={note} componentId={componentId} noteContext={noteContext} />
             {noteType === "search" && <SearchProperties note={note} ntxId={ntxId} />}
             <EditedNotes />
-            <NoteTypeSwitcher />
+            {viewScope?.viewMode === "default" && <NoteTypeSwitcher />}
         </div>
     );
 }

apps/client/src/widgets/layout/StatusBar.css

@@ -58,33 +58,6 @@
 
         .dropdown-note-info {
             padding: 1em !important;
-
-            ul {
-                --row-block-margin: .2em;
-
-                list-style-type: none;
-                padding: 0;
-                margin: 0;
-                margin-top: calc(0px - var(--row-block-margin));
-                margin-bottom: 12px;
-                display: table;
-
-                li {
-                    display: table-row;
-
-                    > strong {
-                        display: table-cell;
-                        padding: var(--row-block-margin) 0;
-                        opacity: .5;
-                    }
-
-                    > span {
-                        display: table-cell;
-                        user-select: text;
-                        padding-left: 2em;
-                    }
-                }
-            }
         }
 
         .dropdown-note-paths {
@@ -144,16 +117,50 @@
 
     }
 
-    div.similar-notes-widget div.similar-notes-wrapper {
-        max-height: unset;
-    }
-
     button.select-button:not(:focus-visible) {
         outline: none;
     }
 
 }
 
+body.experimental-feature-new-layout .note-info-content {
+    ul {
+                --row-block-margin: .2em;
+
+                list-style-type: none;
+                padding: 0;
+                margin: 0;
+                margin-top: calc(0px - var(--row-block-margin));
+                margin-bottom: 12px;
+                display: table;
+
+                li {
+                    display: table-row;
+
+                    > strong {
+                        display: table-cell;
+                        padding: var(--row-block-margin) 0;
+                        opacity: .5;
+                    }
+
+                    > span {
+                        display: table-cell;
+                        user-select: text;
+                        padding-left: 2em;
+                    }
+                }
+            }
+}
+
+body.experimental-feature-new-layout div.similar-notes-widget div.similar-notes-wrapper {
+    max-height: unset;
+}
+
+body.experimental-feature-new-layout.mobile div.similar-notes-widget div.similar-notes-wrapper {
+    max-height: unset;
+    padding: 0;
+}
+
 .bottom-panel {
     margin: 0 !important;
     padding: 0;

apps/client/src/widgets/layout/StatusBar.tsx

@@ -212,8 +212,8 @@ export function getLocaleName(locale: Locale | null | undefined) {
 
 //#region Note info & Similar
 interface NoteInfoContext extends StatusBarContext {
-    similarNotesShown: boolean;
-    setSimilarNotesShown: (value: boolean) => void;
+    similarNotesShown?: boolean;
+    setSimilarNotesShown?: (value: boolean) => void;
 }
 
 export function NoteInfoBadge(context: NoteInfoContext) {
@@ -225,7 +225,7 @@ export function NoteInfoBadge(context: NoteInfoContext) {
 
     // Keyboard shortcut.
     useTriliumEvent("toggleRibbonTabNoteInfo", () => enabled && dropdownRef.current?.show());
-    useTriliumEvent("toggleRibbonTabSimilarNotes", () => setSimilarNotesShown(!similarNotesShown));
+    useTriliumEvent("toggleRibbonTabSimilarNotes", () => setSimilarNotesShown && setSimilarNotesShown(!similarNotesShown));
 
     return (enabled &&
         <StatusBarDropdown
@@ -242,8 +242,8 @@ export function NoteInfoBadge(context: NoteInfoContext) {
     );
 }
 
-function NoteInfoContent({ note, setSimilarNotesShown, noteType, dropdownRef }: NoteInfoContext & {
-    dropdownRef: RefObject<BootstrapDropdown>;
+export function NoteInfoContent({ note, setSimilarNotesShown, noteType, dropdownRef }: Pick<NoteInfoContext, "note" | "setSimilarNotesShown"> & {
+    dropdownRef?: RefObject<BootstrapDropdown>;
     noteType: NoteType;
 }) {
     const { metadata, ...sizeProps } = useNoteMetadata(note);
@@ -251,7 +251,7 @@ function NoteInfoContent({ note, setSimilarNotesShown, noteType, dropdownRef }:
     const noteTypeMapping = useMemo(() => NOTE_TYPES.find(t => t.type === noteType), [ noteType ]);
 
     return (
-        <>
+        <div className="note-info-content">
             <ul>
                 {originalFileName && <NoteInfoValue text={t("file_properties.original_file_name")} value={originalFileName} />}
                 <NoteInfoValue text={t("note_info_widget.created")} value={formatDateTime(metadata?.dateCreated)} />
@@ -262,14 +262,14 @@ function NoteInfoContent({ note, setSimilarNotesShown, noteType, dropdownRef }:
                 <NoteInfoValue text={t("note_info_widget.note_size")} title={t("note_info_widget.note_size_info")} value={<NoteSizeWidget {...sizeProps} />} />
             </ul>
 
-            <LinkButton
+            {setSimilarNotesShown && <LinkButton
                 text={t("note_info_widget.show_similar_notes")}
                 onClick={() => {
-                    dropdownRef.current?.hide();
+                    dropdownRef?.current?.hide();
                     setSimilarNotesShown(true);
                 }}
-            />
-        </>
+            />}
+        </div>
     );
 }
 

apps/client/src/widgets/mobile_widgets/TabSwitcher.css

@@ -89,12 +89,25 @@
 
                 &.type-text {
                     padding: 10px;
+                    --ck-content-todo-list-checkmark-size: 8px;
+
+                    p { margin-bottom: 0.2em;}
+                    hr { margin-block: 0.1em; height: 1px; }
+                    h2 { font-size: 1.20em; }
+                    h3 { font-size: 1.15em; }
+                    h4 { font-size: 1.10em; }
+                    h5 { font-size: 1.05em}
+                    h6 { font-size: 1em; }
+                    ul, ol { margin: 0 }
                 }
 
                 &.type-book,
                 &.type-contentWidget,
                 &.type-search,
-                &.type-empty {
+                &.type-empty,
+                &.type-relationMap,
+                &.type-launcher,
+                &.tab-preview-placeholder {
                     display: flex;
                     align-items: center;
                     justify-content: center;
@@ -105,13 +118,6 @@
                 .preview-placeholder {
                     font-size: 500%;
                 }
-
-                p { margin-bottom: 0.2em;}
-                h2 { font-size: 1.20em; }
-                h3 { font-size: 1.15em; }
-                h4 { font-size: 1.10em; }
-                h5 { font-size: 1.05em}
-                h6 { font-size: 1em; }
             }
 
             &.with-split {

apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx

@@ -1,6 +1,7 @@
 import "./TabSwitcher.css";
 
 import clsx from "clsx";
+import { ComponentChild } from "preact";
 import { createPortal, Fragment } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
@@ -11,6 +12,7 @@ import contextMenu from "../../menus/context_menu";
 import { getHue, parseColor } from "../../services/css_class_manager";
 import froca from "../../services/froca";
 import { t } from "../../services/i18n";
+import type { ViewMode, ViewScope } from "../../services/link";
 import { NoteContent } from "../collections/legacy/ListOrGridView";
 import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
 import { ICON_MAPPINGS } from "../note_bars/CollectionProperties";
@@ -20,6 +22,13 @@ import Icon from "../react/Icon";
 import LinkButton from "../react/LinkButton";
 import Modal from "../react/Modal";
 
+const VIEW_MODE_ICON_MAPPINGS: Record<Exclude<ViewMode, "default">, string> = {
+    source: "bx bx-code",
+    "contextual-help": "bx bx-help-circle",
+    "note-map": "bx bxs-network-chart",
+    attachments: "bx bx-paperclip",
+};
+
 export default function TabSwitcher() {
     const [ shown, setShown ] = useState(false);
     const mainNoteContexts = useMainNoteContexts();
@@ -138,7 +147,6 @@ function Tab({ noteContext, containerRef, selectTab, activeNtxId }: {
     activeNtxId: string | null | undefined;
 }) {
     const { note } = noteContext;
-    const iconClass = useNoteIcon(note);
     const colorClass = note?.getColorClass() || '';
     const workspaceTabBackgroundColorHue = getWorkspaceTabBackgroundColorHue(noteContext);
     const subContexts = noteContext.getSubContexts();
@@ -158,46 +166,65 @@ function Tab({ noteContext, containerRef, selectTab, activeNtxId }: {
         >
             {subContexts.map(subContext => (
                 <Fragment key={subContext.ntxId}>
-                    <header className={colorClass}>
-                        {subContext.note && <Icon icon={iconClass} />}
-                        <span className="title">{subContext.note?.title ?? t("tab_row.new_tab")}</span>
-                        {subContext.isMainContext() && <ActionButton
-                            icon="bx bx-x"
-                            text={t("tab_row.close_tab")}
-                            onClick={(e) => {
-                                // We are closing a tab, so we need to prevent propagation for click (activate tab).
-                                e.stopPropagation();
-                                appContext.tabManager.removeNoteContext(subContext.ntxId);
-                            }}
-                        />}
-                    </header>
-                    <div className={clsx("tab-preview", `type-${subContext.note?.type ?? "empty"}`)}>
-                        <TabPreviewContent note={subContext.note} />
-                    </div>
+                    <TabHeader noteContext={subContext} colorClass={colorClass} />
+                    <TabPreviewContent note={subContext.note} viewScope={subContext.viewScope} />
                 </Fragment>
             ))}
         </div>
     );
 }
 
-function TabPreviewContent({ note }: {
-    note: FNote | null
-}) {
-    if (!note) {
-        return <PreviewPlaceholder icon="bx bx-plus" />;
-    }
+function TabHeader({ noteContext, colorClass }: { noteContext: NoteContext, colorClass: string }) {
+    const iconClass = useNoteIcon(noteContext.note);
+    const [ navigationTitle, setNavigationTitle ] = useState<string | null>(null);
 
-    if (note.type === "book") {
-        return <PreviewPlaceholder icon={ICON_MAPPINGS[note.getLabelValue("viewType") ?? ""] ?? "bx bx-book"} />;
-    }
+    // Manage the title for read-only notes
+    useEffect(() => {
+        noteContext?.getNavigationTitle().then(setNavigationTitle);
+    }, [noteContext]);
 
     return (
-        <NoteContent
+        <header className={colorClass}>
+            {noteContext.note && <Icon icon={iconClass} />}
+            <span className="title">{navigationTitle ?? noteContext.note?.title ?? t("tab_row.new_tab")}</span>
+            {noteContext.isMainContext() && <ActionButton
+                icon="bx bx-x"
+                text={t("tab_row.close_tab")}
+                onClick={(e) => {
+                    // We are closing a tab, so we need to prevent propagation for click (activate tab).
+                    e.stopPropagation();
+                    appContext.tabManager.removeNoteContext(noteContext.ntxId);
+                }}
+            />}
+        </header>
+    );
+}
+
+function TabPreviewContent({ note, viewScope }: {
+    note: FNote | null,
+    viewScope: ViewScope | undefined
+}) {
+    let el: ComponentChild;
+    let isPlaceholder = true;
+
+    if (!note) {
+        el = <PreviewPlaceholder icon="bx bx-plus" />;
+    } else if (note.type === "book") {
+        el = <PreviewPlaceholder icon={ICON_MAPPINGS[note.getLabelValue("viewType") ?? ""] ?? "bx bx-book"} />;
+    } else if (viewScope?.viewMode && viewScope.viewMode !== "default") {
+        el = <PreviewPlaceholder icon={VIEW_MODE_ICON_MAPPINGS[viewScope?.viewMode ?? ""] ?? "bx bx-empty"} />;
+    } else {
+        el = <NoteContent
             note={note}
             highlightedTokens={undefined}
             trim
             includeArchivedNotes={false}
-        />
+        />;
+        isPlaceholder = false;
+    }
+
+    return (
+        <div className={clsx("tab-preview", `type-${note?.type ?? "empty"}`, { "tab-preview-placeholder": isPlaceholder })}>{el}</div>
     );
 }
 

apps/client/src/widgets/mobile_widgets/mobile_detail_menu.css

@@ -0,0 +1,3 @@
+.code-note-switcher-modal .dropdown-menu {
+    background: none !important;
+}

apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx

@@ -1,23 +1,35 @@
-import { createPortal, useState } from "preact/compat";
+import "./mobile_detail_menu.css";
+
+import { Dropdown as BootstrapDropdown } from "bootstrap";
+import { createPortal, useRef, useState } from "preact/compat";
 
 import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import note_create from "../../services/note_create";
+import server from "../../services/server";
 import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
+import { getLocaleName, NoteInfoContent } from "../layout/StatusBar";
 import ActionButton from "../react/ActionButton";
-import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useNoteContext } from "../react/hooks";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
+import { useNoteContext, useNoteProperty } from "../react/hooks";
 import Modal from "../react/Modal";
+import { NoteTypeCodeNoteList, useLanguageSwitcher, useMimeTypes } from "../ribbon/BasicPropertiesTab";
 import { NoteContextMenu } from "../ribbon/NoteActions";
 import NoteActionsCustom from "../ribbon/NoteActionsCustom";
 import { NotePathsWidget, useSortedNotePaths } from "../ribbon/NotePathsTab";
+import SimilarNotesTab from "../ribbon/SimilarNotesTab";
+import { useProcessedLocales } from "../type_widgets/options/components/LocaleSelector";
 
 export default function MobileDetailMenu() {
+    const dropdownRef = useRef<BootstrapDropdown | null>(null);
     const { note, noteContext, parentComponent, ntxId, viewScope, hoistedNoteId } = useNoteContext();
     const subContexts = noteContext?.getMainContext().getSubContexts() ?? [];
     const isMainContext = noteContext?.isMainContext();
     const [ backlinksModalShown, setBacklinksModalShown ] = useState(false);
     const [ notePathsModalShown, setNotePathsModalShown ] = useState(false);
+    const [ noteInfoModalShown, setNoteInfoModalShown ] = useState(false);
+    const [ similarNotesModalShown, setSimilarNotesModalShown ] = useState(false);
+    const [ codeNoteSwitcherModalShown, setCodeNoteSwitcherModalShown ] = useState(false);
     const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
     const backlinksCount = useBacklinkCount(note, viewScope?.viewMode === "default");
 
@@ -32,6 +44,7 @@ export default function MobileDetailMenu() {
         <div style={{ contain: "none" }}>
             {note ? (
                 <NoteContextMenu
+                    dropdownRef={dropdownRef}
                     note={note} noteContext={noteContext}
                     extraItems={<>
                         <div className="form-list-row">
@@ -60,7 +73,12 @@ export default function MobileDetailMenu() {
                         {subContexts.length < 2 && <>
                             <FormDropdownDivider />
                             <FormListItem
-                                onClick={() => parentComponent.triggerCommand("openNewNoteSplit", { ntxId })}
+                                onClick={(e) => {
+                                    // We have to manually manage the hide because otherwise the old note context gets activated.
+                                    e.stopPropagation();
+                                    dropdownRef.current?.hide();
+                                    parentComponent.triggerCommand("openNewNoteSplit", { ntxId });
+                                }}
                                 icon="bx bx-dock-right"
                             >{t("create_pane_button.create_new_split")}</FormListItem>
                         </>}
@@ -72,6 +90,11 @@ export default function MobileDetailMenu() {
                             >{t("close_pane_button.close_this_pane")}</FormListItem>
                         </>}
                         <FormDropdownDivider />
+                        {note.type === "text" && <ContentLanguageSelector note={note} />}
+                        {note.type === "code" && <FormListItem icon={"bx bx-code"} onClick={() => setCodeNoteSwitcherModalShown(true)}>{t("status_bar.code_note_switcher")}</FormListItem>}
+                        <FormListItem icon="bx bx-info-circle" onClick={() => setNoteInfoModalShown(true)}>{t("note_info_widget.title")}</FormListItem>
+                        <FormListItem icon="bx bx-bar-chart" onClick={() => setSimilarNotesModalShown(true)}>{t("similar_notes.title")}</FormListItem>
+                        <FormDropdownDivider />
                     </>}
                 />
             ) : (
@@ -86,13 +109,46 @@ export default function MobileDetailMenu() {
                 <>
                     <BacklinksModal note={note} modalShown={backlinksModalShown} setModalShown={setBacklinksModalShown} />
                     <NotePathsModal note={note} modalShown={notePathsModalShown} notePath={noteContext?.notePath} sortedNotePaths={sortedNotePaths} setModalShown={setNotePathsModalShown} />
+                    <NoteInfoModal note={note}  modalShown={noteInfoModalShown} setModalShown={setNoteInfoModalShown} />
+                    <SimilarNotesModal note={note} modalShown={similarNotesModalShown} setModalShown={setSimilarNotesModalShown} />
+                    <CodeNoteSwitcherModal note={note} modalShown={codeNoteSwitcherModalShown} setModalShown={setCodeNoteSwitcherModalShown} />
                 </>
             ), document.body)}
         </div>
     );
 }
 
-function BacklinksModal({ note, modalShown, setModalShown }: { note: FNote | null | undefined, modalShown: boolean, setModalShown: (shown: boolean) => void }) {
+function ContentLanguageSelector({ note }: { note: FNote | null | undefined }) {
+    const { locales, DEFAULT_LOCALE, currentNoteLanguage, setCurrentNoteLanguage } = useLanguageSwitcher(note);
+    const { activeLocale, processedLocales } = useProcessedLocales(locales, DEFAULT_LOCALE, currentNoteLanguage ?? DEFAULT_LOCALE.id);
+
+    return (
+        <FormDropdownSubmenu
+            icon="bx bx-globe"
+            title={t("mobile_detail_menu.content_language_switcher", { language: getLocaleName(activeLocale ?? DEFAULT_LOCALE) })}
+        >
+            {processedLocales.map((locale, index) =>
+                (typeof locale === "object") ? (
+                    <FormListItem
+                        key={locale.id}
+                        rtl={locale.rtl}
+                        checked={locale.id === currentNoteLanguage}
+                        onClick={() => setCurrentNoteLanguage(locale.id)}
+                    >{locale.name}</FormListItem>
+                ) : (
+                    <FormDropdownDivider key={`divider-${index}`} />
+                )
+            )}
+        </FormDropdownSubmenu>
+    );
+}
+
+interface WithModal {
+    modalShown: boolean;
+    setModalShown: (shown: boolean) => void;
+}
+
+function BacklinksModal({ note, modalShown, setModalShown }: { note: FNote | null | undefined } & WithModal) {
     return (
         <Modal
             className="backlinks-modal tn-backlinks-widget"
@@ -108,7 +164,7 @@ function BacklinksModal({ note, modalShown, setModalShown }: { note: FNote | nul
     );
 }
 
-function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalShown }: { note: FNote | null | undefined, modalShown: boolean, sortedNotePaths: NotePathRecord[] | undefined, notePath: string | null | undefined, setModalShown: (shown: boolean) => void }) {
+function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalShown }: { note: FNote | null | undefined, sortedNotePaths: NotePathRecord[] | undefined, notePath: string | null | undefined } & WithModal) {
     return (
         <Modal
             className="note-paths-modal"
@@ -126,3 +182,57 @@ function NotePathsModal({ note, modalShown, notePath, sortedNotePaths, setModalS
         </Modal>
     );
 }
+
+function NoteInfoModal({ note, modalShown, setModalShown }: { note: FNote | null | undefined } & WithModal) {
+    return (
+        <Modal
+            className="note-info-modal"
+            size="md"
+            title={t("note_info_widget.title")}
+            show={modalShown}
+            onHidden={() => setModalShown(false)}
+        >
+            {note && <NoteInfoContent note={note} noteType={note.type}  />}
+        </Modal>
+    );
+}
+
+function SimilarNotesModal({ note, modalShown, setModalShown }: { note: FNote | null | undefined } & WithModal) {
+    return (
+        <Modal
+            className="similar-notes-modal"
+            size="md"
+            title={t("similar_notes.title")}
+            show={modalShown}
+            onHidden={() => setModalShown(false)}
+        >
+            <SimilarNotesTab note={note} />
+        </Modal>
+    );
+}
+
+function CodeNoteSwitcherModal({ note, modalShown, setModalShown }: { note: FNote | null | undefined } & WithModal) {
+    const currentNoteMime = useNoteProperty(note, "mime");
+    const mimeTypes = useMimeTypes();
+
+    return (
+        <Modal
+            className="code-note-switcher-modal"
+            size="md"
+            title={t("status_bar.code_note_switcher")}
+            show={modalShown}
+            onHidden={() => setModalShown(false)}
+        >
+            <div className="dropdown-menu static show">
+                {note && <NoteTypeCodeNoteList
+                    currentMimeType={currentNoteMime}
+                    mimeTypes={mimeTypes}
+                    changeNoteType={(type, mime) => {
+                        server.put(`notes/${note.noteId}/type`, { type, mime });
+                        setModalShown(false);
+                    }}
+                />}
+            </div>
+        </Modal>
+    );
+}

apps/client/src/widgets/note_tree.css

@@ -1,4 +1,4 @@
-#left-pane .tree-wrapper {
+.tree-wrapper {
     .note-indicator-icon.subtree-hidden-badge {
         font-family: inherit !important;
         margin-inline: 0.5em;

apps/client/src/widgets/react/ResponseContainer.tsx

@@ -0,0 +1,12 @@
+import { ComponentChildren } from "preact";
+
+import { isMobile } from "../../services/utils";
+
+interface ResponsiveContainerProps {
+    mobile?: ComponentChildren;
+    desktop?: ComponentChildren;
+}
+
+export default function ResponsiveContainer({ mobile, desktop }: ResponsiveContainerProps) {
+    return (isMobile() ? mobile : desktop);
+}

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -1,5 +1,4 @@
 import { MimeType, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
-import { ComponentChildren } from "preact";
 import { createPortal } from "preact/compat";
 import { Dispatch, StateUpdater, useCallback, useEffect, useMemo, useState } from "preact/hooks";
 
@@ -117,19 +116,18 @@ export function NoteTypeDropdownContent({ currentNoteType, currentNoteMime, note
                             onClick={() => changeNoteType(type, mime)}
                         >{title}</FormListItem>
                     );
-                } else {
-                    return (
-                        <>
-                            <FormDropdownDivider />
-                            <FormListItem
-                                checked={checked}
-                                disabled
-                            >
-                                <strong>{title}</strong>
-                            </FormListItem>
-                        </>
-                    );
                 }
+                return (
+                    <>
+                        <FormDropdownDivider />
+                        <FormListItem
+                            checked={checked}
+                            disabled
+                        >
+                            <strong>{title}</strong>
+                        </FormListItem>
+                    </>
+                );
             })}
 
             {!noCodeNotes && <NoteTypeCodeNoteList mimeTypes={mimeTypes} changeNoteType={changeNoteType} setModalShown={setModalShown} />}
@@ -141,7 +139,7 @@ export function NoteTypeCodeNoteList({ currentMimeType, mimeTypes, changeNoteTyp
     currentMimeType?: string;
     mimeTypes: MimeType[];
     changeNoteType(type: NoteType, mime: string): void;
-    setModalShown(shown: boolean): void;
+    setModalShown?(shown: boolean): void;
 }) {
     return (
         <>
@@ -155,8 +153,10 @@ export function NoteTypeCodeNoteList({ currentMimeType, mimeTypes, changeNoteTyp
                 </FormListItem>
             ))}
 
-            <FormDropdownDivider />
-            <FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
+            {setModalShown && <>
+                <FormDropdownDivider />
+                <FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
+            </>}
         </>
     );
 }
@@ -195,7 +195,7 @@ function ProtectedNoteSwitch({ note }: { note?: FNote | null }) {
                 onChange={(shouldProtect) => note && protected_session.protectNote(note.noteId, shouldProtect, false)}
             />
         </div>
-    )
+    );
 }
 
 function EditabilitySelect({ note }: { note?: FNote | null }) {
@@ -417,9 +417,9 @@ function findTypeTitle(type?: NoteType, mime?: string | null) {
         const found = mimeTypes.find((mt) => mt.mime === mime);
 
         return found ? found.title : mime;
-    } else {
-        const noteType = NOTE_TYPES.find((nt) => nt.type === type);
-
-        return noteType ? noteType.title : type;
     }
+    const noteType = NOTE_TYPES.find((nt) => nt.type === type);
+
+    return noteType ? noteType.title : type;
+
 }

apps/client/src/widgets/ribbon/NoteActions.tsx

@@ -22,7 +22,7 @@ import MovePaneButton from "../buttons/move_pane_button";
 import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem, FormListToggleableItem } from "../react/FormList";
-import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
+import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useSyncedRef, useTriliumEvent, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import { NoteTypeDropdownContent, useNoteBookmarkState, useShareState } from "./BasicPropertiesTab";
 import NoteActionsCustom from "./NoteActionsCustom";
@@ -63,8 +63,13 @@ function RevisionsButton({ note }: { note: FNote }) {
 
 type ItemToFocus = "basic-properties";
 
-export function NoteContextMenu({ note, noteContext, extraItems }: { note: FNote, noteContext?: NoteContext, extraItems?: ComponentChildren; }) {
-    const dropdownRef = useRef<BootstrapDropdown>(null);
+export function NoteContextMenu({ note, noteContext, extraItems, dropdownRef: externalDropdownRef }: {
+    note: FNote,
+    noteContext?: NoteContext,
+    extraItems?: ComponentChildren;
+    dropdownRef?: RefObject<BootstrapDropdown>;
+}) {
+    const dropdownRef = useSyncedRef<BootstrapDropdown>(externalDropdownRef, null);
     const parentComponent = useContext(ParentComponent);
     const noteType = useNoteProperty(note, "type") ?? "";
     const [viewType] = useNoteLabel(note, "viewType");

apps/client/src/widgets/ribbon/NoteActionsCustom.css

@@ -1,4 +1,3 @@
 body.mobile .note-actions-custom:not(:empty) {
     margin-bottom: calc(var(--bs-dropdown-divider-margin-y) * 2);
-    border-top: 1px solid var(--bs-dropdown-divider-bg);
 }

apps/client/src/widgets/ribbon/NotePathsTab.tsx

@@ -1,7 +1,7 @@
 import "./NotePathsTab.css";
 
 import clsx from "clsx";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
 import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
@@ -9,7 +9,7 @@ import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
 import { useTriliumEvent } from "../react/hooks";
 import LinkButton from "../react/LinkButton";
 import NoteLink from "../react/NoteLink";
-import { joinElements } from "../react/react_utils";
+import { joinElements, ParentComponent } from "../react/react_utils";
 import { TabContext } from "./ribbon-interface";
 
 export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
@@ -21,6 +21,7 @@ export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {
     sortedNotePaths: NotePathRecord[] | undefined;
     currentNotePath?: string | null | undefined;
 }) {
+    const parentComponent = useContext(ParentComponent);
     return (
         <div class="note-paths-widget">
             <>
@@ -40,7 +41,7 @@ export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {
 
                 <LinkButton
                     text={t("note_paths.clone_button")}
-                    triggerCommand="cloneNoteIdsTo"
+                    onClick={() => parentComponent?.triggerCommand("cloneNoteIdsTo")}
                 />
             </>
         </div>

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -2,6 +2,7 @@ import "./SearchDefinitionTab.css";
 
 import { SaveSearchNoteResponse } from "@triliumnext/commons";
 import { useContext, useEffect, useState } from "preact/hooks";
+import { Fragment } from "preact/jsx-runtime";
 
 import appContext from "../../components/app_context";
 import FNote from "../../entities/fnote";
@@ -15,12 +16,13 @@ import tree from "../../services/tree";
 import { getErrorMessage } from "../../services/utils";
 import ws from "../../services/ws";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
-import Button from "../react/Button";
+import Button, { SplitButton } from "../react/Button";
 import Dropdown from "../react/Dropdown";
 import { FormListHeader, FormListItem } from "../react/FormList";
 import { useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import { ParentComponent } from "../react/react_utils";
+import ResponsiveContainer from "../react/ResponseContainer";
 import { TabContext } from "./ribbon-interface";
 import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";
 
@@ -84,15 +86,31 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
                             <tr>
                                 <td className="title-column">{t("search_definition.add_search_option")}</td>
                                 <td colSpan={2} className="add-search-option">
-                                    {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => (
-                                        <Button
-                                            size="small"
-                                            icon={icon}
-                                            text={label}
-                                            title={tooltip}
-                                            onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
-                                        />
-                                    ))}
+                                    <ResponsiveContainer
+                                        desktop={searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
+                                            <Button
+                                                key={index} size="small" icon={icon} text={label} title={tooltip}
+                                                onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                                            />
+                                        ))}
+                                        mobile={
+                                            <Dropdown
+                                                buttonClassName="action-add-toggle btn btn-sm"
+                                                text={<><Icon icon="bx bx-plus" />{" "}{t("search_definition.option")}</>}
+                                                dropdownContainerClassName="mobile-bottom-menu" mobileBackdrop
+                                                noSelectButtonStyle
+                                            >
+                                                {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
+                                                    <FormListItem
+                                                        key={index} icon={icon}
+                                                        description={tooltip}
+                                                        onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                                                    >{label}</FormListItem>
+                                                ))}
+                                            </Dropdown>
+                                        }
+                                    />
+
 
                                     <AddBulkActionButton note={note} />
                                 </td>
@@ -113,48 +131,7 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
                             })}
                         </tbody>
                         <BulkActionsList note={note} />
-                        <tbody className="search-actions">
-                            <tr>
-                                <td colSpan={3}>
-                                    <div className="search-actions-container">
-                                        <Button
-                                            icon="bx bx-search"
-                                            text={t("search_definition.search_button")}
-                                            keyboardShortcut="Enter"
-                                            onClick={refreshResults}
-                                        />
-
-                                        <Button
-                                            icon="bx bxs-zap"
-                                            text={t("search_definition.search_execute")}
-                                            onClick={async () => {
-                                                await server.post(`search-and-execute-note/${note.noteId}`);
-                                                refreshResults();
-                                                toast.showMessage(t("search_definition.actions_executed"), 3000);
-                                            }}
-                                        />
-
-                                        {note.isHiddenCompletely() && <Button
-                                            icon="bx bx-save"
-                                            text={t("search_definition.save_to_note")}
-                                            onClick={async () => {
-                                                const { notePath } = await server.post<SaveSearchNoteResponse>("special-notes/save-search-note", { searchNoteId: note.noteId });
-                                                if (!notePath) {
-                                                    return;
-                                                }
-
-                                                await ws.waitForMaxKnownEntityChangeId();
-                                                await appContext.tabManager.getActiveContext()?.setNote(notePath);
-
-                                                // Note the {{- notePathTitle}} in json file is not typo, it's unescaping
-                                                // See https://www.i18next.com/translation-function/interpolation#unescape
-                                                toast.showMessage(t("search_definition.search_note_saved", { notePathTitle: await tree.getNotePathTitle(notePath) }));
-                                            }}
-                                        />}
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
+                        <SearchButtonBar note={note} refreshResults={refreshResults} />
                     </table>
                 )}
             </div>
@@ -162,6 +139,56 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
     );
 }
 
+function SearchButtonBar({ note, refreshResults }: {
+    note: FNote;
+    refreshResults(): void;
+}) {
+    async function searchAndExecuteActions() {
+        await server.post(`search-and-execute-note/${note.noteId}`);
+        refreshResults();
+        toast.showMessage(t("search_definition.actions_executed"), 3000);
+    }
+
+    async function saveSearchNote() {
+        const { notePath } = await server.post<SaveSearchNoteResponse>("special-notes/save-search-note", { searchNoteId: note.noteId });
+        if (!notePath) return;
+
+        await ws.waitForMaxKnownEntityChangeId();
+        await appContext.tabManager.getActiveContext()?.setNote(notePath);
+
+        // Note the {{- notePathTitle}} in json file is not typo, it's unescaping
+        // See https://www.i18next.com/translation-function/interpolation#unescape
+        toast.showMessage(t("search_definition.search_note_saved", { notePathTitle: await tree.getNotePathTitle(notePath) }));
+    }
+
+    return (
+        <tbody className="search-actions">
+            <tr>
+                <td colSpan={3}>
+                    <ResponsiveContainer
+                        desktop={
+                            <div className="search-actions-container">
+                                <Button icon="bx bx-search" text={t("search_definition.search_button")} keyboardShortcut="Enter" onClick={refreshResults} />
+                                <Button icon="bx bxs-zap" text={t("search_definition.search_execute")} onClick={searchAndExecuteActions} />
+                                {note.isHiddenCompletely() && <Button icon="bx bx-save" text={t("search_definition.save_to_note")} onClick={saveSearchNote} />}
+                            </div>
+                        }
+                        mobile={
+                            <SplitButton
+                                text={t("search_definition.search_button")} icon="bx bx-search"
+                                onClick={refreshResults}
+                            >
+                                <FormListItem icon="bx bxs-zap" onClick={searchAndExecuteActions}>{t("search_definition.search_execute")}</FormListItem>
+                                {note.isHiddenCompletely() && <FormListItem icon="bx bx-save" onClick={saveSearchNote}>{t("search_definition.save_to_note")}</FormListItem>}
+                            </SplitButton>
+                        }
+                    />
+                </td>
+            </tr>
+        </tbody>
+    );
+}
+
 function BulkActionsList({ note }: { note: FNote }) {
     const [ bulkActions, setBulkActions ] = useState<RenameNoteBulkAction[]>();
 
@@ -194,15 +221,18 @@ function AddBulkActionButton({ note }: { note: FNote }) {
             buttonClassName="action-add-toggle btn btn-sm"
             text={<><Icon icon="bx bxs-zap" />{" "}{t("search_definition.action")}</>}
             noSelectButtonStyle
+            dropdownContainerClassName="mobile-bottom-menu" mobileBackdrop
         >
-            {ACTION_GROUPS.map(({ actions, title }) => (
-                <>
+            {ACTION_GROUPS.map(({ actions, title }, index) => (
+                <Fragment key={index}>
                     <FormListHeader text={title} />
 
-                    {actions.map(({ actionName, actionTitle }) => (
-                        <FormListItem onClick={() => bulk_action.addAction(note.noteId, actionName)}>{actionTitle}</FormListItem>
-                    ))}
-                </>
+                    <div>
+                        {actions.map(({ actionName, actionTitle }) => (
+                            <FormListItem key={actionName} onClick={() => bulk_action.addAction(note.noteId, actionName)}>{actionTitle}</FormListItem>
+                        ))}
+                    </div>
+                </Fragment>
             ))}
         </Dropdown>
     );

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -388,10 +388,10 @@ function Performance() {
             currentValue={shadowsEnabled} onChange={setShadowsEnabled}
         />
 
-        <FormCheckbox
+        {!isMobile() && <FormCheckbox
             label={t("ui-performance.enable-backdrop-effects")}
             currentValue={backdropEffectsEnabled} onChange={setBackdropEffectsEnabled}
-        />
+        />}
 
         {isElectron() && <SmoothScrollEnabledOption />}
 

apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx

@@ -1,8 +1,10 @@
-import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { useNoteContext, useTriliumEvent } from "../../react/hooks";
 import "./mobile_editor_toolbar.css";
-import { isIOS } from "../../../services/utils";
+
 import { CKTextEditor, ClassicEditor } from "@triliumnext/ckeditor5";
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import { isIOS } from "../../../services/utils";
+import { useIsNoteReadOnly, useNoteContext, useNoteProperty, useTriliumEvent } from "../../react/hooks";
 
 interface MobileEditorToolbarProps {
     inPopupEditor?: boolean;
@@ -17,17 +19,13 @@ interface MobileEditorToolbarProps {
 export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolbarProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const { note, noteContext, ntxId } = useNoteContext();
-    const [ shouldDisplay, setShouldDisplay ] = useState(false);
+    const noteType = useNoteProperty(note, "type");
+    const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
+    const shouldDisplay = noteType === "text" && isReadOnly === false;
     const [ dropdownActive, setDropdownActive ] = useState(false);
 
     usePositioningOniOS(!inPopupEditor, containerRef);
 
-    useEffect(() => {
-        noteContext?.isReadOnly().then(isReadOnly => {
-            setShouldDisplay(note?.type === "text" && !isReadOnly);
-        });
-    }, [ note ]);
-
     // Attach the toolbar from the CKEditor.
     useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => {
         if (eventNtxId !== ntxId || !containerRef.current) return;
@@ -62,15 +60,15 @@ export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolb
 
     return (
         <div className={`classic-toolbar-outer-container ${!shouldDisplay ? "hidden-ext" : "visible"} ${isIOS() ? "ios" : ""}`}>
-            <div ref={containerRef} className={`classic-toolbar-widget ${dropdownActive ? "dropdown-active" : ""}`}></div>
+            <div ref={containerRef} className={`classic-toolbar-widget ${dropdownActive ? "dropdown-active" : ""}`} />
         </div>
-    )
+    );
 }
 
 function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) {
     const adjustPosition = useCallback(() => {
         if (!wrapperRef.current) return;
-        let bottom = window.innerHeight - (window.visualViewport?.height || 0);
+        const bottom = window.innerHeight - (window.visualViewport?.height || 0);
         wrapperRef.current.style.bottom = `${bottom}px`;
     }, []);
 

apps/server/src/services/hidden_subtree_launcherbar.ts

@@ -40,18 +40,18 @@ export default function buildLaunchBarConfig() {
             type: "launcher",
             command: "showRecentChanges",
             icon: "bx bx-history"
+        },
+        searchNotes: {
+            title: t("hidden-subtree.search-notes-title"),
+            type: "launcher",
+            command: "searchNotes",
+            icon: "bx bx-search",
         }
     };
 
     const desktopAvailableLaunchers: HiddenSubtreeItem[] = [
-        {
-            id: "_lbBackInHistory",
-            ...sharedLaunchers.backInHistory
-        },
-        {
-            id: "_lbForwardInHistory",
-            ...sharedLaunchers.forwardInHistory
-        },
+        { id: "_lbBackInHistory", ...sharedLaunchers.backInHistory },
+        { id: "_lbForwardInHistory", ...sharedLaunchers.forwardInHistory },
         {
             id: "_commandPalette",
             title: t("hidden-subtree.command-palette"),
@@ -82,11 +82,7 @@ export default function buildLaunchBarConfig() {
         },
         {
             id: "_lbSearch",
-            title: t("hidden-subtree.search-notes-title"),
-            type: "launcher",
-            command: "searchNotes",
-            icon: "bx bx-search",
-            attributes: [{ type: "label", name: "desktopOnly" }]
+            ...sharedLaunchers.searchNotes
         },
         {
             id: "_lbJumpTo",
@@ -179,22 +175,14 @@ export default function buildLaunchBarConfig() {
 
     const mobileAvailableLaunchers: HiddenSubtreeItem[] = [
         { id: "_lbMobileNewNote", ...sharedLaunchers.newNote },
+        { id: "_lbMobileSearchNotes", ...sharedLaunchers.searchNotes },
         { id: "_lbMobileToday", ...sharedLaunchers.openToday },
-        {
-            id: "_lbMobileRecentChanges",
-            ...sharedLaunchers.recentChanges
-        }
+        { id: "_lbMobileRecentChanges", ...sharedLaunchers.recentChanges }
     ];
 
     const mobileVisibleLaunchers: HiddenSubtreeItem[] = [
-        {
-            id: "_lbMobileBackInHistory",
-            ...sharedLaunchers.backInHistory
-        },
-        {
-            id: "_lbMobileForwardInHistory",
-            ...sharedLaunchers.forwardInHistory
-        },
+        { id: "_lbMobileBackInHistory", ...sharedLaunchers.backInHistory },
+        { id: "_lbMobileForwardInHistory", ...sharedLaunchers.forwardInHistory },
         {
             id: "_lbMobileJumpTo",
             title: t("hidden-subtree.jump-to-note-title"),
@@ -210,7 +198,8 @@ export default function buildLaunchBarConfig() {
             id: "_lbMobileTabSwitcher",
             title: t("hidden-subtree.tab-switcher-title"),
             type: "launcher",
-            builtinWidget: "mobileTabSwitcher"
+            builtinWidget: "mobileTabSwitcher",
+            icon: "bx bx-rectangle"
         }
     ];