feat(client/import_preview): add possibilty to change parent note

feat(client/import_preview): carry on with the import
feat(client/import_preview): count attachments
2026-02-07 23:19:16 +01:00 · 2026-02-07 23:58:06 +02:00 · 2026-02-07 23:47:29 +02:00 · 2026-02-07 23:30:34 +02:00 · 2026-02-07 23:22:47 +02:00 · 2026-02-07 23:20:13 +02:00
233 changed files with 9885 additions and 3078 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -42,5 +42,8 @@
    },
    "eslint.rules.customizations": [
        { "rule": "*", "severity": "warn" }
+    ],
+    "cSpell.words": [
+      "Trilium"
    ]
-}
+}
--- a/apps/build-docs/package.json
+++ b/apps/build-docs/package.json
@@ -11,7 +11,7 @@
  "license": "AGPL-3.0-only",
  "packageManager": "pnpm@10.28.2",
  "devDependencies": {
-    "@redocly/cli": "2.14.9",
+    "@redocly/cli": "2.15.1",
    "archiver": "7.0.1",
    "fs-extra": "11.3.3",
    "react": "19.2.4",
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -13,6 +13,7 @@
    <body id="trilium-app">
        <noscript>Trilium requires JavaScript to be enabled.</noscript>

+        <div id="context-menu-cover"></div>
        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>

        <!-- Required to match the PWA's top bar color with the theme -->
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -27,7 +27,7 @@
    "@mermaid-js/layout-elk": "0.2.0",
    "@mind-elixir/node-menu": "5.0.1",
    "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.6.1",
+    "@preact/signals": "2.6.2",
    "@triliumnext/ckeditor5": "workspace:*",
    "@triliumnext/codemirror": "workspace:*",
    "@triliumnext/commons": "workspace:*",
@@ -42,8 +42,8 @@
    "color": "5.0.3",
    "debounce": "3.0.0",
    "draggabilly": "3.0.0",
-    "force-graph": "1.51.0",
-    "globals": "17.0.0",
+    "force-graph": "1.51.1",
+    "globals": "17.3.0",
    "i18next": "25.8.0",
    "i18next-http-backend": "3.0.2",
    "jquery": "4.0.0",
@@ -56,12 +56,12 @@
    "mark.js": "8.11.1",
    "marked": "17.0.1",
    "mermaid": "11.12.2",
-    "mind-elixir": "5.6.1",
+    "mind-elixir": "5.7.1",
    "normalize.css": "8.0.1",
    "panzoom": "9.4.3",
-    "preact": "10.28.2",
+    "preact": "10.28.3",
    "react-i18next": "16.5.4",
-    "react-window": "2.2.5",
+    "react-window": "2.2.6",
    "reveal.js": "5.2.1",
    "svg-pan-zoom": "3.6.2",
    "tabulator-tables": "6.3.1",
@@ -78,7 +78,7 @@
    "@types/reveal.js": "5.2.2",
    "@types/tabulator-tables": "6.3.1",
    "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.4.0",
+    "happy-dom": "20.5.0",
    "lightningcss": "1.31.1",
    "script-loader": "0.7.2",
    "vite-plugin-static-copy": "3.2.0"
--- a/apps/client/src/components/app_context.ts
+++ b/apps/client/src/components/app_context.ts
@@ -19,6 +19,7 @@ import type RootContainer from "../widgets/containers/root_container.js";
 import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
 import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
 import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import { ImportPreviewData } from "../widgets/dialogs/import_preview.jsx";
 import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
 import type { InfoProps } from "../widgets/dialogs/info.jsx";
 import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
@@ -130,6 +131,7 @@ export type CommandMappings = {
    showConfirmDialog: ConfirmWithMessageOptions;
    showRecentChanges: CommandData & { ancestorNoteId: string };
    showImportDialog: CommandData & { noteId: string };
+    showImportPreviewDialog: CommandData & ImportPreviewData;
    openNewNoteSplit: NoteCommandData;
    openInWindow: NoteCommandData;
    openInPopup: CommandData & { noteIdOrPath: string; };
--- a/apps/client/src/desktop.ts
+++ b/apps/client/src/desktop.ts
@@ -46,10 +46,6 @@ if (utils.isElectron()) {
    electronContextMenu.setupContextMenu();
 }

-if (utils.isPWA()) {
-    initPWATopbarColor();
-}
-
 function initOnElectron() {
    const electron: typeof Electron = utils.dynamicRequire("electron");
    electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
@@ -99,15 +95,22 @@ function initFullScreenDetection(currentWindow: Electron.BrowserWindow) {
 }

 function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
+    const material = style.getPropertyValue("--background-material").trim();
    if (window.glob.platform === "win32") {
-        const material = style.getPropertyValue("--background-material");
-        // TriliumNextTODO: find a nicer way to make TypeScript happy – unfortunately TS did not like Array.includes here
        const bgMaterialOptions = ["auto", "none", "mica", "acrylic", "tabbed"] as const;
        const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
        if (foundBgMaterialOption) {
            currentWindow.setBackgroundMaterial(foundBgMaterialOption);
        }
    }
+
+    if (window.glob.platform === "darwin") {
+        const bgMaterialOptions = [ "popover", "tooltip", "titlebar", "selection", "menu", "sidebar", "header", "sheet", "window", "hud", "fullscreen-ui", "content", "under-window", "under-page" ] as const;
+        const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
+        if (foundBgMaterialOption) {
+            currentWindow.setVibrancy(foundBgMaterialOption);
+        }
+    }
 }

 /**
@@ -127,20 +130,3 @@ function initDarkOrLightMode(style: CSSStyleDeclaration) {
    const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
    nativeTheme.themeSource = themeSource;
 }
-
-function initPWATopbarColor() {
-    const tracker = $("#background-color-tracker");
-
-    if (tracker.length) {
-        const applyThemeColor = () => {
-            let meta = $("meta[name='theme-color']");
-            if (!meta.length) {
-                meta = $(`<meta name="theme-color">`).appendTo($("head"));
-            }
-            meta.attr("content", tracker.css("color"));
-        };
-
-        tracker.on("transitionend", applyThemeColor);
-        applyThemeColor();
-    }
-}
--- a/apps/client/src/layouts/layout_commons.tsx
+++ b/apps/client/src/layouts/layout_commons.tsx
@@ -1,29 +1,29 @@
 import type RootContainer from "../widgets/containers/root_container.js";
-
 import AboutDialog from "../widgets/dialogs/about.js";
-import HelpDialog from "../widgets/dialogs/help.js";
-import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
-import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
-import PromptDialog from "../widgets/dialogs/prompt.js";
 import AddLinkDialog from "../widgets/dialogs/add_link.js";
-import IncludeNoteDialog from "../widgets/dialogs/include_note.js";
-import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
 import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
-import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
-import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js";
-import MoveToDialog from "../widgets/dialogs/move_to.js";
-import CloneToDialog from "../widgets/dialogs/clone_to.js";
-import ImportDialog from "../widgets/dialogs/import.js";
-import ExportDialog from "../widgets/dialogs/export.js";
-import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
-import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
-import ConfirmDialog from "../widgets/dialogs/confirm.js";
-import RevisionsDialog from "../widgets/dialogs/revisions.js";
-import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
-import InfoDialog from "../widgets/dialogs/info.js";
-import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
+import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
+import CloneToDialog from "../widgets/dialogs/clone_to.js";
+import ConfirmDialog from "../widgets/dialogs/confirm.js";
+import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
+import ExportDialog from "../widgets/dialogs/export.js";
+import HelpDialog from "../widgets/dialogs/help.js";
+import ImportDialog from "../widgets/dialogs/import.js";
+import ImportPreviewDialog from "../widgets/dialogs/import_preview.jsx";
+import IncludeNoteDialog from "../widgets/dialogs/include_note.js";
+import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
+import InfoDialog from "../widgets/dialogs/info.js";
+import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
+import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
+import MoveToDialog from "../widgets/dialogs/move_to.js";
+import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js";
 import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
+import PromptDialog from "../widgets/dialogs/prompt.js";
+import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
+import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
+import RevisionsDialog from "../widgets/dialogs/revisions.js";
+import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
 import ToastContainer from "../widgets/Toast.jsx";

 export function applyModals(rootContainer: RootContainer) {
@@ -52,5 +52,6 @@ export function applyModals(rootContainer: RootContainer) {
        .child(<IncorrectCpuArchDialog />)
        .child(<PopupEditorDialog />)
        .child(<CallToActionDialog />)
-        .child(<ToastContainer />);
+        .child(<ToastContainer />)
+        .child(<ImportPreviewDialog />);
 }
--- a/apps/client/src/layouts/mobile_layout.css
+++ b/apps/client/src/layouts/mobile_layout.css
@@ -0,0 +1,76 @@
+#background-color-tracker {
+    color: var(--main-background-color) !important;
+}
+
+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 */
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -1,128 +1,41 @@
+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";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import FindWidget from "../widgets/find.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import InlineTitle from "../widgets/layout/InlineTitle.jsx";
+import NoteBadges from "../widgets/layout/NoteBadges.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
 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 ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
 import SearchResult from "../widgets/search_result.jsx";
-import SharedInfoWidget from "../widgets/shared_info.js";
-import TabRowWidget from "../widgets/tab_row.js";
 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")
@@ -136,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")
@@ -147,30 +60,28 @@ export default class MobileLayout {
                                    new NoteWrapperWidget()
                                        .child(
                                            new FlexContainer("row")
+                                                .class("title-row note-split-title")
                                                .contentSized()
-                                                .css("font-size", "larger")
                                                .css("align-items", "center")
                                                .child(<ToggleSidebarButton />)
+                                                .child(<NoteIconWidget />)
                                                .child(<NoteTitleWidget />)
+                                                .child(<NoteBadges />)
                                                .child(<MobileDetailMenu />)
                                        )
-                                        .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                        .child(<PromotedAttributes />)
                                        .child(
                                            new ScrollingContainer()
                                                .filling()
                                                .contentSized()
-                                                .child(new ContentHeader()
-                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                    .child(<SharedInfoWidget />)
-                                                )
+                                                .child(<InlineTitle />)
+                                                .child(<NoteTitleActions />)
                                                .child(<NoteDetail />)
                                                .child(<NoteList media="screen" />)
-                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
                                                .child(<SearchResult />)
                                                .child(<FilePropertiesWrapper />)
                                        )
                                        .child(<MobileEditorToolbar />)
+                                        .child(new FindWidget())
                                )
                            )
                    )
@@ -179,7 +90,6 @@ export default class MobileLayout {
                new FlexContainer("column")
                    .contentSized()
                    .id("mobile-bottom-bar")
-                    .child(new TabRowWidget().css("height", "40px"))
                    .child(new FlexContainer("row")
                        .class("horizontal")
                        .css("height", "53px")
--- a/apps/client/src/menus/context_menu.ts
+++ b/apps/client/src/menus/context_menu.ts
@@ -1,8 +1,9 @@
 import { KeyboardActionNames } from "@triliumnext/commons";
+import { h, JSX, render } from "preact";
+
 import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
-import { h, JSX, render } from "preact";

 export interface ContextMenuOptions<T> {
    x: number;
@@ -62,17 +63,17 @@ export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEve

 class ContextMenu {
    private $widget: JQuery<HTMLElement>;
-    private $cover: JQuery<HTMLElement>;
+    private $cover?: JQuery<HTMLElement>;
    private options?: ContextMenuOptions<any>;
    private isMobile: boolean;

    constructor() {
        this.$widget = $("#context-menu-container");
-        this.$cover = $("#context-menu-cover");
        this.$widget.addClass("dropend");
        this.isMobile = utils.isMobile();

        if (this.isMobile) {
+            this.$cover = $("#context-menu-cover");
            this.$cover.on("click", () => this.hide());
        } else {
            $(document).on("click", (e) => this.hide());
@@ -91,7 +92,7 @@ class ContextMenu {
        }

        this.$widget.toggleClass("mobile-bottom-menu", !this.options.forcePositionOnMobile);
-        this.$cover.addClass("show");
+        this.$cover?.addClass("show");
        $("body").addClass("context-menu-shown");

        this.$widget.empty();
@@ -140,16 +141,14 @@ class ContextMenu {
            } else {
                left = this.options.x - contextMenuWidth + CONTEXT_MENU_OFFSET;
            }
+        } else if (contextMenuWidth && this.options.x + contextMenuWidth - CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
+            // Overflow: right
+            left = clientWidth - contextMenuWidth - CONTEXT_MENU_PADDING;
+        } else if (this.options.x - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
+            // Overflow: left
+            left = CONTEXT_MENU_PADDING;
        } else {
-            if (contextMenuWidth && this.options.x + contextMenuWidth - CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
-                // Overflow: right
-                left = clientWidth - contextMenuWidth - CONTEXT_MENU_PADDING;
-            } else if (this.options.x - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
-                // Overflow: left
-                left = CONTEXT_MENU_PADDING;
-            } else {
-                left = this.options.x - CONTEXT_MENU_OFFSET;
-            }
+            left = this.options.x - CONTEXT_MENU_OFFSET;
        }

        this.$widget
@@ -249,7 +248,7 @@ class ContextMenu {
        if ("uiIcon" in item || "checked" in item) {
            const icon = (item.checked ? "bx bx-check" : item.uiIcon);
            if (icon) {
-                $icon.addClass(icon);
+                $icon.addClass([icon, "tn-icon"]);
            } else {
                $icon.append("&nbsp;");
            }
@@ -261,7 +260,7 @@ class ContextMenu {
            .append(item.title);

        if ("badges" in item && item.badges) {
-            for (let badge of item.badges) {
+            for (const badge of item.badges) {
                const badgeElement = $(`<span class="badge">`).text(badge.title);

                if (badge.className) {
@@ -352,7 +351,7 @@ class ContextMenu {
    async hide() {
        this.options?.onHide?.();
        this.$widget.removeClass("show");
-        this.$cover.removeClass("show");
+        this.$cover?.removeClass("show");
        $("body").removeClass("context-menu-shown");
        this.$widget.hide();
    }
--- a/apps/client/src/menus/launcher_context_menu.ts
+++ b/apps/client/src/menus/launcher_context_menu.ts
@@ -1,12 +1,12 @@
-import treeService from "../services/tree.js";
-import froca from "../services/froca.js";
-import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";
-import dialogService from "../services/dialog.js";
-import server from "../services/server.js";
-import { t } from "../services/i18n.js";
+import type { ContextMenuCommandData,FilteredCommandNames } from "../components/app_context.js";
 import type { SelectMenuItemEventListener } from "../components/events.js";
+import dialogService from "../services/dialog.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import server from "../services/server.js";
+import treeService from "../services/tree.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
-import type { FilteredCommandNames, ContextMenuCommandData } from "../components/app_context.js";
+import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";

 type LauncherCommandNames = FilteredCommandNames<ContextMenuCommandData>;

@@ -32,8 +32,8 @@ export default class LauncherContextMenu implements SelectMenuItemEventListener<
        const note = this.node.data.noteId ? await froca.getNote(this.node.data.noteId) : null;
        const parentNoteId = this.node.getParent().data.noteId;

-        const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers";
-        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers";
+        const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers" || note?.noteId === "_lbMobileVisibleLaunchers";
+        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers" || note?.noteId === "_lbMobileAvailableLaunchers";
        const isVisibleItem = parentNoteId === "_lbVisibleLaunchers" || parentNoteId === "_lbMobileVisibleLaunchers";
        const isAvailableItem = parentNoteId === "_lbAvailableLaunchers" || parentNoteId === "_lbMobileAvailableLaunchers";
        const isItem = isVisibleItem || isAvailableItem;
--- a/apps/client/src/services/content_renderer.css
+++ b/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;
+}
--- a/apps/client/src/services/content_renderer.ts
+++ b/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")) {
@@ -292,10 +285,11 @@ function getRenderingType(entity: FNote | FAttachment) {
    }

    const mime = "mime" in entity && entity.mime;
+    const isIconPack = entity instanceof FNote && entity.hasLabel("iconPack");

    if (type === "file" && mime === "application/pdf") {
        type = "pdf";
-    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime)) {
+    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime) && !isIconPack) {
        type = "code";
    } else if (type === "file" && mime && mime.startsWith("audio/")) {
        type = "audio";
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -49,7 +49,7 @@ function createClassForColor(colorString: string | null) {
    return clsx("use-note-color", className, colorsWithHue.has(className) && "with-hue");
 }

-function parseColor(color: string) {
+export function parseColor(color: string) {
    try {
        return Color(color.toLowerCase());
    } catch (ex) {
@@ -77,7 +77,7 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
 }

 /** Returns the hue of the specified color, or undefined if the color is grayscale. */
-function getHue(color: ColorInstance) {
+export function getHue(color: ColorInstance) {
    const hslColor = color.hsl();
    if (hslColor.saturationl() > 0) {
        return hslColor.hue();
--- a/apps/client/src/services/experimental_features.ts
+++ b/apps/client/src/services/experimental_features.ts
@@ -1,5 +1,6 @@
 import { t } from "./i18n";
 import options from "./options";
+import { isMobile } from "./utils";

 export interface ExperimentalFeature {
    id: string;
@@ -21,7 +22,7 @@ let enabledFeatures: Set<ExperimentalFeatureId> | null = null;

 export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
    if (featureId === "new-layout") {
-        return options.is("newLayout");
+        return (isMobile() || options.is("newLayout"));
    }

    return getEnabledFeatures().has(featureId);
@@ -29,7 +30,7 @@ export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId):

 export function getEnabledExperimentalFeatureIds() {
    const values = [ ...getEnabledFeatures().values() ];
-    if (options.is("newLayout")) {
+    if (isMobile() || options.is("newLayout")) {
        values.push("new-layout");
    }
    return values;
--- a/apps/client/src/services/import.ts
+++ b/apps/client/src/services/import.ts
@@ -1,12 +1,13 @@
-import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
-import server from "./server.js";
-import ws from "./ws.js";
-import utils from "./utils.js";
+import { ImportPreviewResponse, WebSocketMessage } from "@triliumnext/commons";
+
 import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
-import { WebSocketMessage } from "@triliumnext/commons";
+import server from "./server.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";

-type BooleanLike = boolean | "true" | "false";
+type BooleanLike = "true" | "false";

 export interface UploadFilesOptions {
    safeImport?: BooleanLike;
@@ -48,7 +49,7 @@ export async function uploadFiles(entityType: string, parentNoteId: string, file
            dataType: "json",
            type: "POST",
            timeout: 60 * 60 * 1000,
-            error: function (xhr) {
+            error (xhr) {
                toastService.showError(t("import.failed", { message: xhr.responseText }));
            },
            contentType: false, // NEEDED, DON'T REMOVE THIS
@@ -57,6 +58,58 @@ export async function uploadFiles(entityType: string, parentNoteId: string, file
    }
 }

+export async function uploadFilesWithPreview(parentNoteId: string, files: string[] | File[]) {
+    if (files.length === 0) {
+        return;
+    }
+
+    const taskId = utils.randomString(10);
+    const results: ImportPreviewResponse[] = [];
+    for (const file of files) {
+        const formData = new FormData();
+        formData.append("upload", file);
+        formData.append("taskId", taskId);
+
+        results.push(await $.ajax({
+            url: `${window.glob.baseApiUrl}notes/${parentNoteId}/preview-import`,
+            headers: await server.getHeaders(),
+            data: formData,
+            dataType: "json",
+            type: "POST",
+            timeout: 60 * 60 * 1000,
+            error (xhr) {
+                toastService.showError(t("import.failed", { message: xhr.responseText }));
+            },
+            contentType: false, // NEEDED, DON'T REMOVE THIS
+            processData: false // NEEDED, DON'T REMOVE THIS
+        }));
+    }
+    return results;
+}
+
+export async function executeUploadWithPreview(parentNoteId: string, files: ImportPreviewResponse[], options: UploadFilesOptions) {
+    if (files.length === 0) {
+        return;
+    }
+
+    const taskId = utils.randomString(10);
+    let counter = 0;
+
+    for (const file of files) {
+        counter++;
+
+        server.post(
+            `notes/${parentNoteId}/execute-import`,
+            {
+                ...options,
+                id: file.id,
+                taskId,
+                last: counter === files.length ? "true" : "false"
+            }
+        );
+    }
+}
+
 function makeToast(id: string, message: string): ToastOptionsWithRequiredId {
    return {
        id,
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -913,6 +913,10 @@ export function handleRightToLeftPlacement<T extends string>(placement: T) {
    return placement;
 }

+export function boolToString(value: boolean) {
+    return value ? "true" : "false";
+}
+
 export default {
    reloadFrontendApp,
    restartDesktopApp,
--- a/apps/client/src/stylesheets/style.css
+++ b/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);
 }

@@ -224,10 +225,6 @@ body.mobile .modal .modal-dialog {
    width: 100%;
 }

-body.mobile .modal .modal-content {
-    border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
-}
-
 .component {
    contain: size;
 }
@@ -413,6 +410,7 @@ body.desktop .tabulator-popup-container,

 .dropdown-menu.static {
    box-shadow: unset;
+    backdrop-filter: unset !important;
 }

 .dropend .dropdown-toggle::after {
@@ -458,7 +456,7 @@ body.desktop .tabulator-popup-container,
    visibility: hidden;
 }

-body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
+.dropdown-menu:not(#context-menu-container) .dropdown-item,
 body.desktop .dropdown-menu .dropdown-toggle,
 body #context-menu-container .dropdown-item > span,
 body.mobile .dropdown .dropdown-submenu > span {
@@ -466,6 +464,15 @@ body.mobile .dropdown .dropdown-submenu > span {
    align-items: center;
 }

+
+body.mobile .dropdown .dropdown-submenu {
+    flex-wrap: wrap;
+
+    & > span {
+        flex-grow: 1;
+    }
+}
+
 .dropdown-item span.keyboard-shortcut,
 .dropdown-item *:not(.keyboard-shortcut) > kbd {
    flex-grow: 1;
@@ -1255,7 +1262,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
-    z-index: 1000;
+    z-index: 2500;
    background: rgba(0, 0, 0, 0.1);
 }

@@ -1534,7 +1541,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {

@media (max-width: 991px) {
    body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show,
-    body.mobile #launcher-container .dropdown > .dropdown-menu.show {
+    body.mobile #launcher-container .dropdown > .dropdown-menu.show,
+    body.mobile .dropdown-menu.mobile-bottom-menu.show {
        --dropdown-bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size));
        position: fixed !important;
        bottom: var(--dropdown-bottom) !important;
@@ -1546,6 +1554,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
        max-height: calc(var(--tn-modal-max-height) - var(--dropdown-bottom));
    }

+    body.mobile #launcher-container .dropdown > .dropdown-menu.show {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 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 {
        position: fixed;
        top: 0;
@@ -1614,6 +1632,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {

    body.mobile .modal-content {
        overflow-y: auto;
+        border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
    }

    body.mobile .modal-footer {
@@ -1669,39 +1688,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
    #detail-container {
        background: var(--main-background-color);
    }
-}

-@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 {
+        .modal-dialog {
+            margin: var(--bs-modal-margin);
+            max-width: 80%;
+        }

-    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%;
+        }
    }
 }

@@ -2617,14 +2613,14 @@ 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;
        }
    }
 }

-body.desktop .title-row {
+.title-row {
    height: 50px;
    min-height: 50px;
    align-items: center;
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -134,6 +134,7 @@
    --left-pane-collapsed-border-color: #0009;
    --left-pane-background-color: #1f1f1f;
    --left-pane-text-color: #aaaaaa;
+    --left-pane-icon-color: #c5c5c5;
    --left-pane-item-hover-background: #ffffff0d;
    --left-pane-item-selected-background: #ffffff25;
    --left-pane-item-selected-color: #dfdfdf;
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -127,6 +127,7 @@
    --left-pane-collapsed-border-color: #0000000d;
    --left-pane-background-color: #f2f2f2;
    --left-pane-text-color: #383838;
+    --left-pane-icon-color: currentColor;
    --left-pane-item-hover-background: rgba(0, 0, 0, 0.032);
    --left-pane-item-selected-background: white;
    --left-pane-item-selected-color: black;
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -47,9 +47,14 @@
 }

 /* The toolbar show / hide button for the current text block */
-.ck.ck-block-toolbar-button {
+:root .ck.ck-block-toolbar-button {
+    --ck-color-block-toolbar-button: var(--muted-text-color);
    --ck-color-button-on-background: transparent;
-    --ck-color-button-on-color: currentColor;
+    --ck-color-button-on-color: var(--ck-editor-toolbar-button-on-color);
+    translate: -40% 0;
+    min-width: 0;
+    padding: 0;
+    z-index: 1600;
 }

 :root .ck.ck-toolbar .ck-button:not(.ck-disabled):active,
@@ -517,6 +522,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
 * EDITOR'S CONTENT
 */

+.note-detail-editable-text-editor > .ck-placeholder {
+    opacity: .5;
+}
+
 /*
 * Code Blocks
 */
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/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;
@@ -156,6 +156,10 @@
    --preferred-max-content-width: var(--options-card-max-width);
 }

+.note-split.options .collection-properties {
+    visibility: hidden;
+}
+
 /* Create a gap at the top of the option pages */
 .note-detail-content-widget-content.options>*:first-child {
    margin-top: var(--options-first-item-top-margin, 1em);
@@ -331,4 +335,4 @@ nav.options-section-tabs + .options-section {

 .etapi-options-section div {
    height: auto !important;
-}
+}
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -40,13 +40,30 @@ body.mobile {

 /* #region Mica */

+/* Quirk: --background-material is read before "theme-supports-background-effects" class
+ * is applied. Apply the matterial even if the theme doesn't support it. */
 body.background-effects.platform-win32 {
-    /* Quirk: --background-material is read before "theme-supports-background-effects" class
-     * is applied. Apply the matterial even if the theme doesn't support it. */
-    --background-material: tabbed;
+    &.layout-vertical {
+        --background-material: mica;
+    }
+
+    &.layout-horizontal {
+        --background-material: tabbed;
+    }
 }

-body.background-effects.theme-supports-background-effects.platform-win32 {
+body.background-effects.platform-darwin {
+    /** Reference: https://developer.apple.com/documentation/appkit/nsvisualeffectview?preferredLanguage=objc **/
+    &.layout-vertical {
+        --background-material: under-window;
+    }
+
+    &.layout-horizontal {
+        --background-material: hud;
+    }
+}
+
+body.background-effects.theme-supports-background-effects {
    --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
    --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
    --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx);
@@ -56,33 +73,29 @@ body.background-effects.theme-supports-background-effects.platform-win32 {
    --root-background: transparent;
 }

-body.background-effects.platform-win32.layout-vertical {
-    --background-material: mica;
-}
-
-body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical {
+body.background-effects.theme-supports-background-effects.layout-vertical {
    --left-pane-background-color: var(--window-background-color-bgfx);
    --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx);
    --right-pane-background-color: var(--right-pane-background-color-bgfx);
 }

-body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal {
+body.background-effects.theme-supports-background-effects.layout-horizontal {
    --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
    --gutter-color: var(--left-pane-background-color);
 }

-body.background-effects.theme-supports-background-effects.platform-win32,
-body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
+body.background-effects.theme-supports-background-effects,
+body.background-effects.theme-supports-background-effects #root-widget {
    background: var(--window-background-color-bgfx) !important;
 }

-body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container,
-body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container {
+body.background-effects.theme-supports-background-effects.layout-horizontal #horizontal-main-container,
+body.background-effects.theme-supports-background-effects.layout-vertical #vertical-main-container {
    background-color: var(--root-background);
 }

 /* Note split with background effects */
-body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx {
+body.background-effects.theme-supports-background-effects #center-pane .note-split.bgfx {
    --note-split-background-color: var(--center-pane-background-color-bgfx);
 }

@@ -726,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);
@@ -756,9 +763,9 @@ body.mobile .fancytree-node > span {

 #left-pane .fancytree-custom-icon {
    margin-top: 0; /* Use this to align the icon with the tree view item's caption */
+    color: var(--custom-color, var(--left-pane-icon-color));
 }

-
 #left-pane span.fancytree-active .fancytree-title {
    font-weight: normal;
 }
@@ -1054,7 +1061,7 @@ body.layout-horizontal .tab-row-widget-container {
    overflow: hidden;
 }

-body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-layout {
+body.desktop:not(.background-effects) #root-widget.horizontal-layout {
    background-color: var(--root-background) !important;
 }

@@ -1259,7 +1266,7 @@ body.layout-horizontal #rest-pane > .classic-toolbar-widget {
 #center-pane .note-split {
    padding-top: 2px;
    background-color: var(--note-split-background-color, var(--main-background-color));
-    transition: border-color 250ms ease-in;
+    transition: border-color 150ms ease-out;
    border: 2px solid transparent;
 }

@@ -1309,7 +1316,7 @@ body.mobile .note-title {
    margin-inline-start: 0;
 }

-.title-row {
+body.desktop .title-row {
    /* Aligns the "Create new split" button with the note menu button (the three dots button) */
    padding-inline-end: 3px;
 }
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -206,6 +206,7 @@ span.fancytree-selected .fancytree-title {
 }

 span.fancytree-selected .fancytree-custom-icon::before {
+    font-family: "boxicons";
    content: "\eb43";
    border: 1px solid var(--main-border-color);
    border-radius: 3px;
--- a/apps/client/src/translations/ar/translation.json
+++ b/apps/client/src/translations/ar/translation.json
@@ -29,7 +29,9 @@
    "widget-render-error": {
      "title": "فشل عرض عنصر واجهة مستخدم React مخصص"
    },
-    "widget-missing-parent": "لا تحتوي الأداة المخصصة على خاصية إلزامية '{{property}}'.\n\nإذا كان من المفترض تشغيل هذا البرنامج النصي بدون عنصر واجهة مستخدم، فاستخدم '#run=frontendStartup' بدلاً من ذلك."
+    "widget-missing-parent": "لا تحتوي الأداة المخصصة على خاصية إلزامية '{{property}}'.\n\nإذا كان من المفترض تشغيل هذا البرنامج النصي بدون عنصر واجهة مستخدم، فاستخدم '#run=frontendStartup' بدلاً من ذلك.",
+    "open-script-note": "فتح ملاحظة برمجية",
+    "scripting-error": "خطأ في النص البرمجي المخصص: {{title}}"
  },
  "add_link": {
    "add_link": "أضافة رابط",
@@ -37,14 +39,19 @@
    "search_note": "البحث عن الملاحظة بالاسم",
    "link_title": "عنوان الرابط",
    "button_add_link": "اضافة رابط",
-    "help_on_links": "مساعدة حول الارتباطات التشعبية"
+    "help_on_links": "مساعدة حول الارتباطات التشعبية",
+    "link_title_mirrors": "عنوان الرابط يعكس العنوان الحالي للملاحظة",
+    "link_title_arbitrary": "يمكن تغيير عنوان الرابط حسب الرغبة"
  },
  "branch_prefix": {
    "edit_branch_prefix": "تعديل بادئة الفرع",
    "prefix": "البادئة: ",
    "save": "حفظ",
    "help_on_tree_prefix": "مساعدة حول بادئة الشجرة",
-    "branch_prefix_saved": "تم حفظ بادئة الفرع."
+    "branch_prefix_saved": "تم حفظ بادئة الفرع.",
+    "edit_branch_prefix_multiple": "تعديل البادئة لـ {{count}} من تفرعات الملاحظات",
+    "branch_prefix_saved_multiple": "تم حفظ بادئة التفرع لـ {{count}} من التفرعات.",
+    "affected_branches": "الفروع المتأثرة ({{count}}):"
  },
  "bulk_actions": {
    "bulk_actions": "اجراءات جماعية",
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -662,7 +662,8 @@
    "show-cheatsheet": "显示快捷帮助",
    "toggle-zen-mode": "禅模式",
    "new-version-available": "新更新可用",
-    "download-update": "取得版本 {{latestVersion}}"
+    "download-update": "取得版本 {{latestVersion}}",
+    "search_notes": "搜索笔记"
  },
  "zen_mode": {
    "button_exit": "退出禅模式"
@@ -745,7 +746,7 @@
    "button_title": "导出SVG格式图片"
  },
  "relation_map_buttons": {
-    "create_child_note_title": "创建新的子笔记并添加到关系图",
+    "create_child_note_title": "创建子笔记并添加到图",
    "reset_pan_zoom_title": "重置平移和缩放到初始坐标和放大倍率",
    "zoom_in_title": "放大",
    "zoom_out_title": "缩小"
@@ -759,7 +760,9 @@
    "delete_this_note": "删除此笔记",
    "error_cannot_get_branch_id": "无法获取 notePath '{{notePath}}' 的 branchId",
    "error_unrecognized_command": "无法识别的命令 {{command}}",
-    "note_revisions": "笔记历史版本"
+    "note_revisions": "笔记历史版本",
+    "backlinks": "反链",
+    "content_language_switcher": "内容语言: {{language}}"
  },
  "note_icon": {
    "change_note_icon": "更改笔记图标",
@@ -910,7 +913,8 @@
    "unknown_search_option": "未知的搜索选项 {{searchOptionName}}",
    "search_note_saved": "搜索笔记已保存到 {{- notePathTitle}}",
    "actions_executed": "操作已执行。",
-    "view_options": "查看选项："
+    "view_options": "查看选项：",
+    "option": "选项"
  },
  "similar_notes": {
    "title": "相似笔记",
@@ -1782,8 +1786,8 @@
    "desktop-application": "桌面应用程序",
    "native-title-bar": "原生标题栏",
    "native-title-bar-description": "对于 Windows 和 macOS，关闭原生标题栏可使应用程序看起来更紧凑。在 Linux 上，保留原生标题栏可以更好地与系统集成。",
-    "background-effects": "启用背景效果（仅适用于 Windows 11）",
-    "background-effects-description": "Mica 效果为应用窗口添加模糊且时尚的背景，营造出深度感和现代外观。「原生标题栏」必須被禁用。",
+    "background-effects": "启用背景效果",
+    "background-effects-description": "为应用窗口添加模糊且时尚的背景，营造出深度感和现代外观。「原生标题栏」必須被禁用。",
    "restart-app-button": "重启应用程序以查看更改",
    "zoom-factor": "缩放系数"
  },
@@ -1802,7 +1806,8 @@
  "geo-map": {
    "create-child-note-title": "创建一个新的子笔记并将其添加到地图中",
    "create-child-note-instruction": "单击地图以在该位置创建新笔记，或按 Escape 以取消。",
-    "unable-to-load-map": "无法加载地图。"
+    "unable-to-load-map": "无法加载地图。",
+    "create-child-note-text": "添加标记"
  },
  "geo-map-context": {
    "open-location": "打开位置",
@@ -2117,7 +2122,7 @@
  },
  "call_to_action": {
    "background_effects_title": "背景效果现已推出稳定版本",
-    "background_effects_message": "在 Windows 装置上，背景效果现在已完全稳定。背景效果通过模糊背后的背景，为使用者界面增添一抹色彩。此技术也用于其他应用程序，例如 Windows 资源管理器。",
+    "background_effects_message": "在 Windows 和 macOS 设备上，背景效果现在已稳定。背景效果通过模糊背后的背景，为使用者界面增添一抹色彩。",
    "background_effects_button": "启用背景效果",
    "next_theme_title": "试用新 Trilium 主题",
    "next_theme_message": "当前使用旧版主题，要试用新主题吗？",
@@ -2253,5 +2258,15 @@
    "pages_alt": "第{{pageNumber}}页",
    "pages_loading": "加载中...",
    "layers_other": "{{count}} 层"
+  },
+  "platform_indicator": {
+    "available_on": "在 {{platform}} 上可用"
+  },
+  "mobile_tab_switcher": {
+    "title_other": "{{count}} 选项卡",
+    "more_options": "更多选项"
+  },
+  "bookmark_buttons": {
+    "bookmarks": "书签"
  }
 }
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -742,7 +742,7 @@
    "button_title": "Diagramm als SVG exportieren"
  },
  "relation_map_buttons": {
-    "create_child_note_title": "Erstelle eine neue untergeordnete Notiz und füge sie dieser Beziehungskarte hinzu",
+    "create_child_note_title": "Erstelle eine untergeordnete Notiz und füge sie dieser Karte hinzu",
    "reset_pan_zoom_title": "Schwenken und Zoomen auf die ursprünglichen Koordinaten und Vergrößerung zurücksetzen",
    "zoom_in_title": "Hineinzoom",
    "zoom_out_title": "Herauszoomen"
@@ -757,7 +757,8 @@
    "delete_this_note": "Diese Notiz löschen",
    "error_cannot_get_branch_id": "BranchId für notePath „{{notePath}}“ kann nicht abgerufen werden",
    "error_unrecognized_command": "Unbekannter Befehl {{command}}",
-    "note_revisions": "Notiz Revisionen"
+    "note_revisions": "Notiz Revisionen",
+    "backlinks": "Rücklinks"
  },
  "note_icon": {
    "change_note_icon": "Notiz-Icon ändern",
@@ -1751,8 +1752,8 @@
    "desktop-application": "Desktop Anwendung",
    "native-title-bar": "Native Anwendungsleiste",
    "native-title-bar-description": "In Windows und macOS, sorgt das Deaktivieren der nativen Anwendungsleiste für ein kompakteres Aussehen. Unter Linux, sorgt das Aktivieren der nativen Anwendungsleiste für eine bessere Integration mit anderen Teilen des Systems.",
-    "background-effects": "Hintergrundeffekte aktivieren (nur Windows 11)",
-    "background-effects-description": "Der Mica Effekt fügt einen unscharfen, stylischen Hintergrund in Anwendungsfenstern ein. Dieser erzeugt Tiefe und ein modernes Auftreten. \"Native Titelleiste\" muss deaktiviert sein.",
+    "background-effects": "Hintergrundeffekte aktivieren",
+    "background-effects-description": "Fügt einen unscharfen, stylischen Hintergrund in das Anwendungsfenstern ein. Dies erzeugt Tiefe und ein modernes Auftreten. \"Native Titelleiste\" muss deaktiviert sein.",
    "restart-app-button": "Anwendung neustarten um Änderungen anzuwenden",
    "zoom-factor": "Zoomfaktor"
  },
@@ -1771,7 +1772,8 @@
  "geo-map": {
    "create-child-note-title": "Neue Unternotiz anlegen und zur Karte hinzufügen",
    "create-child-note-instruction": "Auf die Karte klicken, um eine neue Notiz an der Stelle zu erstellen oder Escape drücken um abzubrechen.",
-    "unable-to-load-map": "Karte konnte nicht geladen werden."
+    "unable-to-load-map": "Karte konnte nicht geladen werden.",
+    "create-child-note-text": "Marker hinzufügen"
  },
  "geo-map-context": {
    "open-location": "Ort öffnen",
@@ -2133,7 +2135,7 @@
    "next_theme_message": "Es wird aktuell das alte Design verwendet. Möchten Sie das neue Design ausprobieren?",
    "next_theme_button": "Teste das neue Design",
    "background_effects_title": "Hintergrundeffekte sind jetzt zuverlässig nutzbar",
-    "background_effects_message": "Auf Windows-Geräten sind die Hintergrundeffekte nun vollständig stabil. Die Hintergrundeffekte verleihen der Benutzeroberfläche einen Farbakzent, indem der Hintergrund dahinter weichgezeichnet wird. Diese Technik wird auch in anderen Anwendungen wie dem Windows-Explorer eingesetzt.",
+    "background_effects_message": "Auf Windows- und macOS-Geräten sind die Hintergrundeffekte nun stabil. Die Hintergrundeffekte verleihen der Benutzeroberfläche einen Farbakzent, indem der Hintergrund dahinter weichgezeichnet wird.",
    "background_effects_button": "Aktiviere Hintergrundeffekte",
    "dismiss": "Ablehnen",
    "new_layout_title": "Neues Layout",
@@ -2267,5 +2269,13 @@
    "pages_other": "{{count}} Seiten",
    "pages_alt": "Seite {{pageNumber}}",
    "pages_loading": "Lädt..."
+  },
+  "platform_indicator": {
+    "available_on": "Verfügbar auf {{platform}}"
+  },
+  "mobile_tab_switcher": {
+    "title_one": "{{count}} Tab",
+    "title_other": "{{count}} Tabs",
+    "more_options": "Weitere Optionen"
  }
 }
--- a/apps/client/src/translations/en/translation.json
+++ b/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"
@@ -745,7 +746,7 @@
    "button_title": "Export diagram as SVG"
  },
  "relation_map_buttons": {
-    "create_child_note_title": "Create new child note and add it into this relation map",
+    "create_child_note_title": "Create child note and add it to map",
    "reset_pan_zoom_title": "Reset pan & zoom to initial coordinates and magnification",
    "zoom_in_title": "Zoom In",
    "zoom_out_title": "Zoom Out"
@@ -760,7 +761,9 @@
    "delete_this_note": "Delete this note",
    "note_revisions": "Note revisions",
    "error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'",
-    "error_unrecognized_command": "Unrecognized command {{command}}"
+    "error_unrecognized_command": "Unrecognized command {{command}}",
+    "backlinks": "Backlinks",
+    "content_language_switcher": "Content language: {{language}}"
  },
  "note_icon": {
    "change_note_icon": "Change note icon",
@@ -905,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",
@@ -1958,8 +1962,8 @@
    "desktop-application": "Desktop Application",
    "native-title-bar": "Native title bar",
    "native-title-bar-description": "For Windows and macOS, keeping the native title bar off makes the application look more compact. On Linux, keeping the native title bar on integrates better with the rest of the system.",
-    "background-effects": "Enable background effects (Windows 11 only)",
-    "background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look. \"Native title bar\" must be disabled.",
+    "background-effects": "Enable background effects",
+    "background-effects-description": "Adds a blurred, stylish background to app windows, creating depth and a modern look. \"Native title bar\" must be disabled.",
    "restart-app-button": "Restart the application to view the changes",
    "zoom-factor": "Zoom factor"
  },
@@ -1977,6 +1981,7 @@
  },
  "geo-map": {
    "create-child-note-title": "Create a new child note and add it to the map",
+    "create-child-note-text": "Add marker",
    "create-child-note-instruction": "Click on the map to create a new note at that location or press Escape to dismiss.",
    "unable-to-load-map": "Unable to load map."
  },
@@ -2152,7 +2157,7 @@
    "next_theme_message": "You are currently using the legacy theme, would you like to try the new theme?",
    "next_theme_button": "Try the new theme",
    "background_effects_title": "Background effects are now stable",
-    "background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
+    "background_effects_message": "On Windows and macOS devices, background effects are now stable. The background effects adds a touch of color to the user interface by blurring the background behind it.",
    "background_effects_button": "Enable background effects",
    "new_layout_title": "New layout",
    "new_layout_message": "We’ve introduced a modernized layout for Trilium. The ribbon has been removed and seamlessly integrated into the main interface, with a new status bar and expandable sections (such as promoted attributes) taking over key functions.\n\nThe new layout is enabled by default, and can be temporarily disabled via Options → Appearance.",
@@ -2267,5 +2272,48 @@
    "pages_other": "{{count}} pages",
    "pages_alt": "Page {{pageNumber}}",
    "pages_loading": "Loading..."
+  },
+  "platform_indicator": {
+    "available_on": "Available on {{platform}}"
+  },
+  "mobile_tab_switcher": {
+    "title_one": "{{count}} tab",
+    "title_other": "{{count}} tabs",
+    "more_options": "More options"
+  },
+  "bookmark_buttons": {
+    "bookmarks": "Bookmarks"
+  },
+  "import_preview": {
+    "intro_safe_one": "You are about to import an archive with no unsafe content.",
+    "intro_safe_other": "You are about to import {{count}} archives with no unsafe content.",
+    "intro_unsafe_one": "You are about to import an archive with active content.",
+    "intro_unsafe_other": "You are about to import {{count}} archives, some of which have active content.",
+
+    "title": "Import preview",
+    "notes_count_one": "{{count}} note",
+    "notes_count_other": "{{count}} notes",
+    "attributes_count_one": "{{count}} attribute",
+    "attributes_count_other": "{{count}} attributes",
+    "attachments_count_one": "{{count}} attachment",
+    "attachments_count_other": "{{count}} attachments",
+    "cancel": "Cancel",
+    "import": "Import",
+    "import_with_timeout": "Import ({{timeout}})",
+    "import_safely": "Import safely (recommended)",
+    "import_safely_description": "Scripts, widgets and icon packs will be disabled.",
+    "import_trust": "Trust and enable active content",
+    "import_trust_description": "Only do this if you trust the source.",
+    "parent_note": "Parent note",
+    "badge_client_side_scripting_title": "Client-side scripting",
+    "badge_client_side_scripting_tooltip": "Can modify the application's interface and send requests to the server. Malicious scripts can read or change your notes.",
+    "badge_server_side_scripting_title": "Server-side scripting",
+    "badge_server_side_scripting_tooltip": "Runs on the server with access to your database and local files. Malicious scripts could read, modify, or delete your data.",
+    "badge_code_execution_title": "Code execution",
+    "badge_code_execution_description": "Allows running arbitrary programs on your system or server. This can fully compromise your data and environment.",
+    "badge_icon_pack_title": "Icon pack",
+    "badge_icon_pack_description": "Provides custom icons. Usually safe, but malformed or very large icon packs may cause performance or stability issues.",
+    "badge_web_view_title": "Web view",
+    "badge_web_view_description": "Displays external web pages inside Trilium. These pages may track activity or receive information about your notes."
  }
 }
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -745,7 +745,7 @@
    "button_title": "Exportar diagrama como SVG"
  },
  "relation_map_buttons": {
-    "create_child_note_title": "Crear una nueva subnota y agregarla a este mapa de relaciones",
+    "create_child_note_title": "Crear una subnota y agregarla al mapa",
    "reset_pan_zoom_title": "Restablecer la panorámica y el zoom a las coordenadas y ampliación iniciales",
    "zoom_in_title": "Acercar",
    "zoom_out_title": "Alejar"
@@ -754,14 +754,15 @@
    "relation": "relación",
    "backlink_one": "{{count}} Vínculo de retroceso",
    "backlink_many": "{{count}} Vínculos de retroceso",
-    "backlink_other": "{{count}} vínculos de retroceso"
+    "backlink_other": "{{count}} Vínculos de retroceso"
  },
  "mobile_detail_menu": {
    "insert_child_note": "Insertar subnota",
    "delete_this_note": "Eliminar esta nota",
    "error_cannot_get_branch_id": "No se puede obtener el branchID del notePath '{{notePath}}'",
    "error_unrecognized_command": "Comando no reconocido {{command}}",
-    "note_revisions": "Revisiones de notas"
+    "note_revisions": "Revisiones de notas",
+    "backlinks": "Vínculos de retroceso"
  },
  "note_icon": {
    "change_note_icon": "Cambiar icono de nota",
@@ -1614,7 +1615,7 @@
  },
  "bookmark_switch": {
    "bookmark": "Marcador",
-    "bookmark_this_note": "Añadir esta nota a marcadores en el panel lateral izquierdo",
+    "bookmark_this_note": "Agregar esta nota a marcadores en el panel lateral izquierdo",
    "remove_bookmark": "Eliminar marcador"
  },
  "editability_select": {
@@ -1944,8 +1945,8 @@
    "desktop-application": "Aplicación de escritorio",
    "native-title-bar": "Barra de título nativa",
    "native-title-bar-description": "Para Windows y macOS, quitar la barra de título nativa hace que la aplicación se vea más compacta. En Linux, mantener la barra de título nativa hace que se integre mejor con el resto del sistema.",
-    "background-effects": "Habilitar efectos de fondo (sólo en Windows 11)",
-    "background-effects-description": "El efecto Mica agrega un fondo borroso y elegante a las ventanas de la aplicación, creando profundidad y un aspecto moderno. \"Título nativo de la barra\" debe deshabilitarse.",
+    "background-effects": "Habilitar efectos de fondo",
+    "background-effects-description": "Agrega un fondo borroso y elegante a las ventanas de la aplicación, creando profundidad y un aspecto moderno. \"Título nativo de la barra\" debe deshabilitarse.",
    "restart-app-button": "Reiniciar la aplicación para ver los cambios",
    "zoom-factor": "Factor de zoom"
  },
@@ -1964,7 +1965,8 @@
  "geo-map": {
    "create-child-note-title": "Crear una nueva subnota y agregarla al mapa",
    "create-child-note-instruction": "Dé clic en el mapa para crear una nueva nota en esa ubicación o presione Escape para cancelar.",
-    "unable-to-load-map": "No se puede cargar el mapa."
+    "unable-to-load-map": "No se puede cargar el mapa.",
+    "create-child-note-text": "Agregar marcador"
  },
  "geo-map-context": {
    "open-location": "Abrir ubicación",
@@ -2130,7 +2132,7 @@
    "next_theme_message": "Estás usando actualmente el tema heredado. ¿Te gustaría probar el nuevo tema?",
    "next_theme_button": "Prueba el nuevo tema",
    "background_effects_title": "Los efectos de fondo son ahora estables",
-    "background_effects_message": "En los dispositivos Windows, los efectos de fondo ya son totalmente estables. Los efectos de fondo añaden un toque de color a la interfaz de usuario difuminando el fondo que hay detrás. Esta técnica también se utiliza en otras aplicaciones como el Explorador de Windows.",
+    "background_effects_message": "En los dispositivos Windows y macOS, los efectos de fondo ya son estables. Los efectos de fondo añaden un toque de color a la interfaz de usuario difuminando el fondo que hay detrás.",
    "background_effects_button": "Activar efectos de fondo",
    "dismiss": "Desestimar",
    "new_layout_title": "Nuevo diseño",
@@ -2281,5 +2283,14 @@
    "empty_button": "Ocultar el panel",
    "toggle": "Alternar panel derecho",
    "custom_widget_go_to_source": "Ir al código fuente"
+  },
+  "platform_indicator": {
+    "available_on": "Disponible en {{platform}}"
+  },
+  "mobile_tab_switcher": {
+    "title_one": "{{count}} pestaña",
+    "title_many": "{{count}} pestañas",
+    "title_other": "{{count}} pestañas",
+    "more_options": "Más opciones"
  }
 }
--- a/apps/client/src/translations/ga/translation.json
+++ b/apps/client/src/translations/ga/translation.json
--- a/apps/client/src/translations/ja/translation.json
+++ b/apps/client/src/translations/ja/translation.json
@@ -81,7 +81,8 @@
    "configure_launchbar": "ランチャーバーの設定",
    "show_shared_notes_subtree": "共有ノートのサブツリーを表示",
    "new-version-available": "新しいアップデートが利用可能",
-    "download-update": "{{latestVersion}} をバージョンを入手"
+    "download-update": "{{latestVersion}} をバージョンを入手",
+    "search_notes": "検索ノート"
  },
  "left_pane_toggle": {
    "show_panel": "パネルを表示",
@@ -234,7 +235,8 @@
    "search_note_saved": "検索ノートが {{- notePathTitle}} に保存されました",
    "actions_executed": "アクションが実行されました。",
    "ancestor": "祖先:",
-    "view_options": "表示オプション:"
+    "view_options": "表示オプション:",
+    "option": "オプション"
  },
  "shortcuts": {
    "multiple_shortcuts": "同じアクションに対して複数のショートカットを設定する場合、カンマで区切ることができます。",
@@ -407,7 +409,7 @@
  "relation_map_buttons": {
    "zoom_out_title": "ズームアウト",
    "zoom_in_title": "ズームイン",
-    "create_child_note_title": "新しい子ノートを作成し、関連マップに追加",
+    "create_child_note_title": "子ノートを作成し、マップに追加",
    "reset_pan_zoom_title": "パンとズームを初期座標と倍率にリセット"
  },
  "tree-context-menu": {
@@ -1648,7 +1650,9 @@
    "error_unrecognized_command": "認識されないコマンド {{command}}",
    "insert_child_note": "子ノートを挿入",
    "error_cannot_get_branch_id": "ノートパス 「{{notePath}} のbranchIdを取得できません",
-    "note_revisions": "ノートの変更履歴"
+    "note_revisions": "ノートの変更履歴",
+    "backlinks": "バックリンク",
+    "content_language_switcher": "コンテンツの言語: {{language}}"
  },
  "inherited_attribute_list": {
    "title": "継承属性",
@@ -1757,8 +1761,8 @@
    "desktop-application": "デスクトップアプリケーション",
    "native-title-bar": "ネイティブタイトルバー",
    "native-title-bar-description": "WindowsとmacOSでは、ネイティブタイトルバーをオフにしておくと、アプリケーションがよりコンパクトに見えます。Linuxでは、ネイティブタイトルバーを表示したままの方が、他のシステムとの統一性が高まります。",
-    "background-effects": "背景効果を有効化（Windows 11のみ）",
-    "background-effects-description": "Mica効果は、アプリのウィンドウにぼかされたスタイリッシュな背景を追加し、奥行きとモダンな外観を演出します。「ネイティブタイトルバー」を無効にする必要があります。",
+    "background-effects": "背景効果を有効化",
+    "background-effects-description": "アプリウィンドウにぼかしの効いたスタイリッシュな背景を追加し、奥行きとモダンな外観を演出します。「ネイティブタイトルバー」を無効にする必要があります。",
    "restart-app-button": "アプリケーションを再起動して変更を反映",
    "zoom-factor": "ズーム倍率"
  },
@@ -2008,7 +2012,8 @@
  "geo-map": {
    "create-child-note-title": "新しい子ノートを作成し、マップに追加する",
    "create-child-note-instruction": "地図をクリックしてその場所に新しいノートを作成するか、Esc キーを押して閉じます。",
-    "unable-to-load-map": "マップを読み込めません。"
+    "unable-to-load-map": "マップを読み込めません。",
+    "create-child-note-text": "マーカーを追加"
  },
  "geo-map-context": {
    "open-location": "現在位置を表示",
@@ -2044,7 +2049,7 @@
    "next_theme_message": "現在、レガシーテーマを使用しています。新しいテーマを試してみませんか?",
    "next_theme_button": "新しいテーマを試す",
    "background_effects_title": "背景効果が安定しました",
-    "background_effects_message": "Windowsデバイスでは、背景効果が完全に安定しました。背景効果は、背景をぼかすことでユーザーインターフェースに彩りを添えます。この技術は、Windowsエクスプローラーなどの他のアプリケーションでも使用されています。",
+    "background_effects_message": "WindowsおよびmacOSデバイスで、背景効果が安定しました。背景効果は、背景をぼかすことでユーザーインターフェースに彩りを添えます。",
    "background_effects_button": "背景効果を有効にする",
    "dismiss": "却下",
    "new_layout_title": "新しいレイアウト",
@@ -2253,5 +2258,15 @@
    "pages_other": "{{count}} ページ",
    "pages_alt": "ページ {{pageNumber}}",
    "pages_loading": "読み込み中..."
+  },
+  "platform_indicator": {
+    "available_on": "{{platform}} で利用可能"
+  },
+  "mobile_tab_switcher": {
+    "title_other": "{{count}} タブ",
+    "more_options": "その他のオプション"
+  },
+  "bookmark_buttons": {
+    "bookmarks": "ブックマーク"
  }
 }
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -1761,8 +1761,8 @@
    "show-recent-notes": "Afișează notițele recente"
  },
  "electron_integration": {
-    "background-effects": "Activează efectele de fundal (doar pentru Windows 11)",
-    "background-effects-description": "Efectul Mica adaugă un fundal estompat și elegant ferestrelor aplicațiilor, creând profunzime și un aspect modern. Opțiunea „Bară de titlu nativă” trebuie să fie dezactivată.",
+    "background-effects": "Activează efectele de fundal",
+    "background-effects-description": "Adaugă un fundal estompat și elegant ferestrelor aplicațiilor, creând profunzime și un aspect modern. Opțiunea „Bară de titlu nativă” trebuie să fie dezactivată.",
    "desktop-application": "Aplicația desktop",
    "native-title-bar": "Bară de titlu nativă",
    "native-title-bar-description": "Pentru Windows și macOS, dezactivarea bării de titlu native face aplicația să pară mai compactă. Pe Linux, păstrarea bării integrează mai bine aplicația cu restul sistemului de operare.",
@@ -1781,7 +1781,8 @@
  "geo-map": {
    "create-child-note-title": "Crează o notiță nouă și adaug-o pe hartă",
    "unable-to-load-map": "Nu s-a putut încărca harta.",
-    "create-child-note-instruction": "Click pe hartă pentru a crea o nouă notiță la acea poziție sau apăsați Escape pentru a anula."
+    "create-child-note-instruction": "Click pe hartă pentru a crea o nouă notiță la acea poziție sau apăsați Escape pentru a anula.",
+    "create-child-note-text": "Adaugă marcaj"
  },
  "duration": {
    "days": "zile",
@@ -2127,7 +2128,7 @@
  },
  "call_to_action": {
    "background_effects_title": "Efectele de fundal sunt acum stabile",
-    "background_effects_message": "Pe dispozitive cu Windows, efectele de fundal sunt complet stabile. Acestea adaugă un strop de culoare interfeței grafice prin estomparea fundalului din spatele ferestrei. Această tehnică este folosită și în alte aplicații precum Windows Explorer.",
+    "background_effects_message": "Pe dispozitive cu Windows și macOS, efectele de fundal sunt stabile. Acestea adaugă un strop de culoare interfeței grafice prin estomparea fundalului din spatele ferestrei.",
    "background_effects_button": "Activează efectele de fundal",
    "next_theme_title": "Încercați noua temă Trilium",
    "next_theme_message": "Utilizați tema clasică, doriți să încercați noua temă?",
@@ -2281,5 +2282,14 @@
    "pages_other": "{{count}} de pagini",
    "pages_alt": "Pagina {{pageNumber}}",
    "pages_loading": "Încărcare..."
+  },
+  "platform_indicator": {
+    "available_on": "Disponibil pe {{platform}}"
+  },
+  "mobile_tab_switcher": {
+    "title_one": "{{count}} tab",
+    "title_few": "{{count}} taburi",
+    "title_other": "{{count}} de taburi",
+    "more_options": "Mai multe opțiuni"
  }
 }
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -757,7 +757,8 @@
    "delete_this_note": "刪除此筆記",
    "error_cannot_get_branch_id": "無法獲取 notePath '{{notePath}}' 的 branchId",
    "error_unrecognized_command": "無法識別的命令 {{command}}",
-    "note_revisions": "筆記歷史版本"
+    "note_revisions": "筆記歷史版本",
+    "backlinks": "反向連結"
  },
  "note_icon": {
    "change_note_icon": "更改筆記圖標",
@@ -1939,8 +1940,8 @@
    "desktop-application": "桌面版應用程式",
    "native-title-bar": "原生標題列",
    "native-title-bar-description": "對於 Windows 和 macOS，關閉原生標題列會讓應用程式看起來更緊湊。在 Linux 上，開啟原生標題列可以與系統的其他部分整合得更好。",
-    "background-effects": "啟用背景效果（僅適用於 Windows 11）",
-    "background-effects-description": "Mica 效果為程式視窗新增模糊且時尚的背景，營造出深度感和現代化外觀。「原生標題列」必須被禁用。",
+    "background-effects": "啟用背景效果",
+    "background-effects-description": "為程式視窗新增模糊且時尚的背景，營造立體感和現代化外觀。「原生標題列」必須被禁用。",
    "restart-app-button": "重新啟動應用程式以查看更改",
    "zoom-factor": "縮放係數"
  },
@@ -1959,7 +1960,8 @@
  "geo-map": {
    "create-child-note-title": "建立一個新的子筆記並將其加至地圖中",
    "create-child-note-instruction": "點擊地圖以在該位置建立新筆記，或按 Escape 以取消。",
-    "unable-to-load-map": "無法載入地圖。"
+    "unable-to-load-map": "無法載入地圖。",
+    "create-child-note-text": "新增地圖標記"
  },
  "geo-map-context": {
    "open-location": "打開位置",
@@ -2122,7 +2124,7 @@
  },
  "call_to_action": {
    "background_effects_title": "背景特效已推出穩定版本",
-    "background_effects_message": "在 Windows 裝置上，背景特效現在已完全穩定。背景特效透過模糊背後的背景，為使用者介面增添一抹色彩。此技術也用於其他應用程式，例如 Windows 檔案總管。",
+    "background_effects_message": "在 Windows 和macOS裝置上，背景特效現在已穩定。背景特效透過模糊背後的背景，為使用者介面增添一抹色彩。",
    "background_effects_button": "啟用背景特效",
    "next_theme_title": "試用新 Trilium 主題",
    "next_theme_message": "您正在使用舊版主題，要試用新主題嗎？",
@@ -2267,5 +2269,12 @@
    "pages_other": "",
    "pages_alt": "第 {{pageNumber}} 頁",
    "pages_loading": "正在載入…"
+  },
+  "mobile_tab_switcher": {
+    "more_options": "更多選項",
+    "title_one": "{{count}} 個分頁"
+  },
+  "platform_indicator": {
+    "available_on": "可於 {{platform}} 使用"
  }
 }
--- a/apps/client/src/widgets/Backlinks.css
+++ b/apps/client/src/widgets/Backlinks.css
@@ -0,0 +1,83 @@
+.tn-backlinks-widget .backlinks-items {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: static;
+    width: unset;
+
+    > li {
+        --border-radius: 8px;
+
+        max-width: 600px;
+        padding: 10px 20px;
+        background: var(--card-background-color);
+
+        & + li {
+            margin-top: 2px;
+        }
+
+        &:first-child {
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        &:last-child {
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+        }
+
+        /* Card header */
+        & > span:first-child {
+            display: block;
+
+            > span {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+
+                /* Note path */
+                > small {
+                    flex: 100%;
+                    order: -1;
+                    font-size: .65rem;
+
+                    .note-path {
+                        padding: 0;
+                    }
+                }
+
+                /* Note icon */
+                > .tn-icon {
+                    color: var(--menu-item-icon-color);
+                }
+
+                /* Note title */
+                > a {
+                    margin-inline-start: 4px;
+                    color: currentColor;
+                    font-weight: 500;
+                }
+            }
+        }
+
+        /* Card content - excerpt */
+        .backlink-excerpt {
+            all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
+            display: block;
+
+            margin: 8px 0;
+            border-radius: 4px;
+            background: var(--quick-search-result-content-background);
+            padding: 8px;
+            font-size: .75rem;
+
+            a {
+                background: transparent;
+                color: var(--quick-search-result-highlight-color);
+                text-decoration: underline;
+            }
+
+            p {
+                margin: 0;
+            }
+        }
+    }
+}
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -1,3 +1,5 @@
+import "./Backlinks.css";
+
 import { BacklinkCountResponse, BacklinksResponse, SaveSqlConsoleResponse } from "@triliumnext/commons";
 import { VNode } from "preact";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
@@ -54,21 +56,12 @@ export const DESKTOP_FLOATING_BUTTONS: FloatingButtonsList = [
    OpenTriliumApiDocsButton,
    SaveToNoteButton,
    RelationMapButtons,
-    GeoMapButtons,
    CopyImageReferenceButton,
    ExportImageButtons,
    InAppHelpButton,
    Backlinks
 ];

-export const MOBILE_FLOATING_BUTTONS: FloatingButtonsList = [
-    RefreshBackendLogButton,
-    EditButton,
-    RelationMapButtons,
-    ExportImageButtons,
-    Backlinks
-];
-
 /**
 * Floating buttons that should be hidden in popup editor (Quick edit).
 */
@@ -98,10 +91,10 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: F
    />;
 }

-function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) {
+function ToggleReadOnlyButton({ note, isDefaultViewMode }: FloatingButtonContext) {
    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
    const isSavedSqlite = note.isTriliumSqlite() && !note.isHiddenCompletely();
-    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap" || isSavedSqlite)
+    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || isSavedSqlite)
            && note.isContentAvailable() && isDefaultViewMode;

    return isEnabled && <FloatingButton
@@ -243,17 +236,6 @@ function RelationMapButtons({ note, isDefaultViewMode, triggerEvent }: FloatingB
    );
 }

-function GeoMapButtons({ triggerEvent, viewType, isReadOnly }: FloatingButtonContext) {
-    const isEnabled = viewType === "geoMap" && !isReadOnly;
-    return isEnabled && (
-        <FloatingButton
-            icon="bx bx-plus-circle"
-            text={t("geo-map.create-child-note-title")}
-            onClick={() => triggerEvent("geoMapCreateChildNote")}
-        />
-    );
-}
-
 function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonContext) {
    const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
    const isEnabled = (
@@ -305,7 +287,7 @@ function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingB

 function InAppHelpButton({ note }: FloatingButtonContext) {
    const helpUrl = getHelpUrlForNote(note);
-    const isEnabled = !!helpUrl;
+    const isEnabled = note.type !== "book" && !!helpUrl;

    return isEnabled && (
        <FloatingButton
--- a/apps/client/src/widgets/NoteDetail.css
+++ b/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;
-}
+}
--- a/apps/client/src/widgets/NoteDetail.tsx
+++ b/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.
--- a/apps/client/src/widgets/PromotedAttributes.tsx
+++ b/apps/client/src/widgets/PromotedAttributes.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { ComponentChild, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";

+import NoteContext from "../components/note_context";
 import FAttribute from "../entities/fattribute";
 import FNote from "../entities/fnote";
 import { Attribute } from "../services/attribute_parser";
@@ -40,8 +41,8 @@ type OnChangeEventData = TargetedEvent<HTMLInputElement, Event> | InputEvent | J
 type OnChangeListener = (e: OnChangeEventData) => Promise<void>;

 export default function PromotedAttributes() {
-    const { note, componentId } = useNoteContext();
-    const [ cells, setCells ] = usePromotedAttributeData(note, componentId);
+    const { note, componentId, noteContext } = useNoteContext();
+    const [ cells, setCells ] = usePromotedAttributeData(note, componentId, noteContext);
    return <PromotedAttributesContent note={note} componentId={componentId} cells={cells} setCells={setCells} />;
 }

@@ -74,12 +75,12 @@ export function PromotedAttributesContent({ note, componentId, cells, setCells }
 *
 * The cells are returned as a state since they can also be altered internally if needed, for example to add a new empty cell.
 */
-export function usePromotedAttributeData(note: FNote | null | undefined, componentId: string): [ Cell[] | undefined, Dispatch<StateUpdater<Cell[] | undefined>> ] {
+export function usePromotedAttributeData(note: FNote | null | undefined, componentId: string, noteContext: NoteContext | undefined): [ Cell[] | undefined, Dispatch<StateUpdater<Cell[] | undefined>> ] {
    const [ viewType ] = useNoteLabel(note, "viewType");
    const [ cells, setCells ] = useState<Cell[]>();

    function refresh() {
-        if (!note || viewType === "table") {
+        if (!note || viewType === "table" || noteContext?.viewScope?.viewMode !== "default") {
            setCells([]);
            return;
        }
@@ -124,7 +125,7 @@ export function usePromotedAttributeData(note: FNote | null | undefined, compone
        setCells(cells);
    }

-    useEffect(refresh, [ note, viewType ]);
+    useEffect(refresh, [ note, viewType, noteContext ]);
    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
        if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, note))) {
            refresh();
--- a/apps/client/src/widgets/buttons/global_menu.tsx
+++ b/apps/client/src/widgets/buttons/global_menu.tsx
@@ -29,7 +29,6 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
    const isVerticalLayout = !isHorizontalLayout;
    const parentComponent = useContext(ParentComponent);
    const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
-    const isMobileLocal = isMobile();
    const logoRef = useRef<SVGSVGElement>(null);
    useStaticTooltip(logoRef);

@@ -44,9 +43,12 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
                </div>}
            </>}
            noDropdownListStyle
-            onShown={isMobileLocal ? () => document.getElementById("context-menu-cover")?.classList.add("show", "global-menu-cover") : undefined}
-            onHidden={isMobileLocal ? () => document.getElementById("context-menu-cover")?.classList.remove("show", "global-menu-cover") : undefined}
+            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")} />
@@ -107,8 +109,7 @@ function BrowserOnlyOptions() {

 function DevelopmentOptions({ dropStart }: { dropStart: boolean }) {
    return <>
-        <FormDropdownDivider />
-        <FormListItem disabled>Development Options</FormListItem>
+        <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} />
--- a/apps/client/src/widgets/collections/NoteList.css
+++ b/apps/client/src/widgets/collections/NoteList.css
@@ -1,7 +1,7 @@
 .note-list-widget {
    min-height: 0;
    max-width: var(--max-content-width); /* Inherited from .note-split */
- 
+
    overflow: auto;
    contain: none !important;
 }
@@ -11,10 +11,6 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
    margin-inline: auto;
 }

-.note-list-widget .note-list {
-    padding-block: 10px;
-}
-
 .note-list-widget.full-height,
 .note-list-widget.full-height .note-list-widget-content {
    height: 100%;
@@ -25,8 +21,12 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
 }

 /* #region Pagination */
-.note-list-pager span.current-page {
-    text-decoration: underline;
-    font-weight: bold;
+.note-list-pager {
+    font-size: 1rem;
+
+    span.current-page {
+        text-decoration: underline;
+        font-weight: bold;
+    }
 }
-/* #endregion */
+/* #endregion */
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -2,25 +2,28 @@
  position: relative;
  height: 100%;
  user-select: none;
-  overflow-x: auto;
+  display: flex;
+  flex-direction: column;

  --card-font-size: 0.9em;
  --card-line-height: 1.2;
  --card-padding: 0.6em;
 }

-body.mobile .board-view {
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-}
-
 .board-view-container {
  height: 100%;
  display: flex;
  gap: 1em;
-  padding: 1em;
+  padding-inline: 12px;
+  padding-block: 4px;
  align-items: flex-start;
+  overflow-x: auto;
+}
+
+body.mobile .board-view-container {
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
 }

 .board-view-container .board-column {
@@ -352,4 +355,4 @@ body.mobile .board-view-container .board-column {
  font-size: 0.9em;
  max-width: 200px;
  word-wrap: break-word;
-}
+}
--- a/apps/client/src/widgets/collections/board/index.tsx
+++ b/apps/client/src/widgets/collections/board/index.tsx
@@ -1,20 +1,23 @@
-import { Dispatch, StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { ViewModeProps } from "../interface";
 import "./index.css";
-import { ColumnMap, getBoardData } from "./data";
+
+import { createContext, TargetedKeyboardEvent } from "preact";
+import { Dispatch, StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import toast from "../../../services/toast";
+import CollectionProperties from "../../note_bars/CollectionProperties";
+import FormTextArea from "../../react/FormTextArea";
+import FormTextBox from "../../react/FormTextBox";
 import { useNoteLabelBoolean, useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
 import Icon from "../../react/Icon";
-import { t } from "../../../services/i18n";
-import Api from "./api";
-import FormTextBox from "../../react/FormTextBox";
-import { createContext, TargetedKeyboardEvent } from "preact";
-import { onWheelHorizontalScroll } from "../../widget_utils";
-import Column from "./column";
-import BoardApi from "./api";
-import FormTextArea from "../../react/FormTextArea";
-import FNote from "../../../entities/fnote";
 import NoteAutocomplete from "../../react/NoteAutocomplete";
-import toast from "../../../services/toast";
+import { onWheelHorizontalScroll } from "../../widget_utils";
+import { ViewModeProps } from "../interface";
+import Api from "./api";
+import BoardApi from "./api";
+import Column from "./column";
+import { ColumnMap, getBoardData } from "./data";

 export interface BoardViewData {
    columns?: BoardColumnData[];
@@ -145,7 +148,7 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
        const insertBefore = mouseX < columnMiddle;

        // Calculate the target position
-        let targetIndex = insertBefore ? index : index + 1;
+        const targetIndex = insertBefore ? index : index + 1;

        setColumnDropPosition(targetIndex);
    }, [draggedColumn]);
@@ -159,15 +162,14 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
    }, [draggedColumn, columnDropPosition, handleColumnDrop]);

    return (
-        <div
-            className="board-view"
-            onWheel={onWheelHorizontalScroll}
-        >
+        <div className="board-view">
+            <CollectionProperties note={parentNote} />
            <BoardViewContext.Provider value={boardViewContext}>
                {byColumn && columns && <div
                    className="board-view-container"
                    onDragOver={handleColumnDragOver}
                    onDrop={handleContainerDrop}
+                    onWheel={onWheelHorizontalScroll}
                >
                    {columns.map((column, index) => (
                        <>
@@ -194,7 +196,7 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
                </div>}
            </BoardViewContext.Provider>
        </div>
-    )
+    );
 }

 function AddNewColumn({ api, isInRelationMode }: { api: BoardApi, isInRelationMode: boolean }) {
@@ -218,26 +220,26 @@ function AddNewColumn({ api, isInRelationMode }: { api: BoardApi, isInRelationMo
            tabIndex={300}
        >
            {!isCreatingNewColumn
-            ? <>
-                <Icon icon="bx bx-plus" />{" "}
-                {t("board_view.add-column")}
-            </>
-            : (
-                <TitleEditor
-                    placeholder={t("board_view.add-column-placeholder")}
-                    save={async (columnName) => {
-                        const created = await api.addNewColumn(columnName);
-                        if (!created) {
-                            toast.showMessage(t("board_view.column-already-exists"), undefined, "bx bx-duplicate");
-                        }
-                    }}
-                    dismiss={() => setIsCreatingNewColumn(false)}
-                    isNewItem
-                    mode={isInRelationMode ? "relation" : "normal"}
-                />
-            )}
+                ? <>
+                    <Icon icon="bx bx-plus" />{" "}
+                    {t("board_view.add-column")}
+                </>
+                : (
+                    <TitleEditor
+                        placeholder={t("board_view.add-column-placeholder")}
+                        save={async (columnName) => {
+                            const created = await api.addNewColumn(columnName);
+                            if (!created) {
+                                toast.showMessage(t("board_view.column-already-exists"), undefined, "bx bx-duplicate");
+                            }
+                        }}
+                        dismiss={() => setIsCreatingNewColumn(false)}
+                        isNewItem
+                        mode={isInRelationMode ? "relation" : "normal"}
+                    />
+                )}
        </div>
-    )
+    );
 }

 export function TitleEditor({ currentValue, placeholder, save, dismiss, mode, isNewItem }: {
@@ -302,26 +304,26 @@ export function TitleEditor({ currentValue, placeholder, save, dismiss, mode, is
                onBlur={onBlur}
            />
        );
-    } else {
-        return (
-            <NoteAutocomplete
-                inputRef={inputRef}
-                noteId={currentValue ?? ""}
-                opts={{
-                    hideAllButtons: true,
-                    allowCreatingNotes: true
-                }}
-                onKeyDown={(e) => {
-                    if (e.key === "Escape") {
-                        dismiss();
-                    }
-                }}
-                onBlur={() => dismiss()}
-                noteIdChanged={(newValue) => {
-                    save(newValue);
-                    dismiss();
-                }}
-            />
-        );
    }
+    return (
+        <NoteAutocomplete
+            inputRef={inputRef}
+            noteId={currentValue ?? ""}
+            opts={{
+                hideAllButtons: true,
+                allowCreatingNotes: true
+            }}
+            onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                    dismiss();
+                }
+            }}
+            onBlur={() => dismiss()}
+            noteIdChanged={(newValue) => {
+                save(newValue);
+                dismiss();
+            }}
+        />
+    );
+
 }
--- a/apps/client/src/widgets/collections/calendar/index.css
+++ b/apps/client/src/widgets/collections/calendar/index.css
@@ -21,7 +21,16 @@
    outline: 0;
    height: 100%;
    user-select: none;
-    padding: 10px;
+    padding: 0;
+
+    @media (max-width: 991px) {
+        padding: 0;
+
+        th {
+            font-weight: normal;
+            font-size: 0.9em;
+        }
+    }
 }

 .calendar-view a,
@@ -43,6 +52,7 @@
    --fc-border-color: var(--main-border-color);
    --fc-neutral-bg-color: var(--launcher-pane-background-color);
    --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
+    padding: 0 12px;
 }

 .calendar-container .fc-list-sticky .fc-list-day > * {
@@ -59,33 +69,35 @@
    overflow: hidden;
 }

-/* #region Header */
-.calendar-view .calendar-header {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
+.calendar-view .collection-properties {
+    .center-container {
+        justify-content: center;

-.calendar-view .calendar-header .btn {
-    min-width: unset !important;
-}
+        .title {
+            min-width: 150px;
+            font-size: 1.2em;
+            text-align: center;
+        }
+    }

-.calendar-view .calendar-header > .title {
-    flex-grow: 1;
-    font-size: 1.3rem;
-    font-weight: normal;
-}
+    @media (max-width: 991px) {
+        >div {
+            justify-content: flex-start;
+        }

-body.desktop:not(.zen):not(.experimental-feature-new-layout) .calendar-view .calendar-header {
-    padding-block-start: 4px;
-    padding-inline-end: 5em;
-}
+        .right-container {
+            flex-grow: 0;
+        }

-.search-result-widget-content .calendar-view .calendar-header {
-    padding-inline-end: unset !important;
+        .center-container {
+            .title {
+                flex-grow: 1;
+                min-width: 110px;
+                font-size: 0.95em;
+            }
+        }
+    }
 }
-/* #endregion */

 /* #region Events */

@@ -93,7 +105,7 @@ body.desktop:not(.zen):not(.experimental-feature-new-layout) .calendar-view .cal
 * week, month, year views
 */

- .calendar-container a.fc-event {
+.calendar-container a.fc-event {
    text-decoration: none;
 }

--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -14,8 +14,11 @@ import dialog from "../../../services/dialog";
 import froca from "../../../services/froca";
 import { t } from "../../../services/i18n";
 import { isMobile } from "../../../services/utils";
+import CollectionProperties from "../../note_bars/CollectionProperties";
 import ActionButton from "../../react/ActionButton";
 import Button, { ButtonGroup } from "../../react/Button";
+import Dropdown from "../../react/Dropdown";
+import { FormListItem } from "../../react/FormList";
 import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import { ParentComponent } from "../../react/react_utils";
 import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
@@ -41,24 +44,28 @@ const CALENDAR_VIEWS = [
    {
        type: "timeGridWeek",
        name: t("calendar.week"),
+        icon: "bx bx-calendar-week",
        previousText: t("calendar.week_previous"),
        nextText: t("calendar.week_next")
    },
    {
        type: "dayGridMonth",
        name: t("calendar.month"),
+        icon: "bx bx-calendar",
        previousText: t("calendar.month_previous"),
        nextText: t("calendar.month_next")
    },
    {
        type: "multiMonthYear",
        name: t("calendar.year"),
+        icon: "bx bx-layer",
        previousText: t("calendar.year_previous"),
        nextText: t("calendar.year_next")
    },
    {
        type: "listMonth",
        name: t("calendar.list"),
+        icon: "bx bx-list-ol",
        previousText: t("calendar.month_previous"),
        nextText: t("calendar.month_next")
    }
@@ -72,6 +79,7 @@ export const LOCALE_MAPPINGS: Record<DISPLAYABLE_LOCALE_IDS, (() => Promise<{ de
    es: () => import("@fullcalendar/core/locales/es"),
    fr: () => import("@fullcalendar/core/locales/fr"),
    it: () => import("@fullcalendar/core/locales/it"),
+    ga: null,
    cn: () => import("@fullcalendar/core/locales/zh-cn"),
    tw: () => import("@fullcalendar/core/locales/zh-tw"),
    ro: () => import("@fullcalendar/core/locales/ro"),
@@ -140,7 +148,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi

    return (plugins &&
        <div className="calendar-view" ref={containerRef} tabIndex={100}>
-            <CalendarHeader calendarRef={calendarRef} />
+            <CalendarCollectionProperties note={note} calendarRef={calendarRef} />
            <Calendar
                events={eventBuilder}
                calendarRef={calendarRef}
@@ -169,28 +177,67 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
    );
 }

-function CalendarHeader({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
+function CalendarCollectionProperties({ note, calendarRef }: {
+    note: FNote;
+    calendarRef: RefObject<FullCalendar>;
+}) {
    const { title, viewType: currentViewType } = useOnDatesSet(calendarRef);
    const currentViewData = CALENDAR_VIEWS.find(v => calendarRef.current && v.type === currentViewType);
+    const isMobileLocal = isMobile();

    return (
-        <div className="calendar-header">
-            <span className="title">{title}</span>
+        <CollectionProperties
+            note={note}
+            centerChildren={<>
+                <ActionButton icon="bx bx-chevron-left" text={currentViewData?.previousText ?? ""} onClick={() => calendarRef.current?.prev()} />
+                <span className="title">{title}</span>
+                <ActionButton icon="bx bx-chevron-right" text={currentViewData?.nextText ?? ""} onClick={() => calendarRef.current?.next()} />
+                <Button text={t("calendar.today")} onClick={() => calendarRef.current?.today()} />
+                {isMobileLocal && <MobileCalendarViewSwitcher calendarRef={calendarRef} />}
+            </>}
+            rightChildren={<>
+                {!isMobileLocal && <DesktopCalendarViewSwitcher calendarRef={calendarRef} />}
+            </>}
+        />
+    );
+}
+
+function DesktopCalendarViewSwitcher({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
+    const { viewType: currentViewType } = useOnDatesSet(calendarRef);
+
+    return (
+        <>
            <ButtonGroup>
                {CALENDAR_VIEWS.map(viewData => (
                    <Button
+                        key={viewData.type}
                        text={viewData.name}
                        className={currentViewType === viewData.type ? "active" : ""}
                        onClick={() => calendarRef.current?.changeView(viewData.type)}
                    />
                ))}
            </ButtonGroup>
-            <Button text={t("calendar.today")} onClick={() => calendarRef.current?.today()} />
-            <ButtonGroup>
-                <ActionButton icon="bx bx-chevron-left" text={currentViewData?.previousText ?? ""} frame onClick={() => calendarRef.current?.prev()} />
-                <ActionButton icon="bx bx-chevron-right" text={currentViewData?.nextText ?? ""} frame onClick={() => calendarRef.current?.next()} />
-            </ButtonGroup>
-        </div>
+        </>
+    );
+}
+
+function MobileCalendarViewSwitcher({ calendarRef }: { calendarRef: RefObject<FullCalendar> }) {
+    const { viewType: currentViewType } = useOnDatesSet(calendarRef);
+    const currentViewTypeData = CALENDAR_VIEWS.find(view => view.type === currentViewType);
+
+    return (
+        <Dropdown
+            text={currentViewTypeData?.name}
+        >
+            {CALENDAR_VIEWS.map(viewData => (
+                <FormListItem
+                    key={viewData.type}
+                    selected={currentViewType === viewData.type}
+                    icon={viewData.icon}
+                    onClick={() => calendarRef.current?.changeView(viewData.type)}
+                >{viewData.name}</FormListItem>
+            ))}
+        </Dropdown>
    );
 }

--- a/apps/client/src/widgets/collections/geomap/index.css
+++ b/apps/client/src/widgets/collections/geomap/index.css
@@ -2,6 +2,13 @@
  overflow: hidden;
  position: relative;
  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > .collection-properties {
+    position: relative;
+    z-index: 2000;
+  }
 }

 .geo-map-container {
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -1,24 +1,29 @@
-import Map from "./map";
 import "./index.css";
-import { ViewModeProps } from "../interface";
-import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
-import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
+
 import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import Marker, { GpxTrack } from "./marker";
-import froca from "../../../services/froca";
-import FNote from "../../../entities/fnote";
 import markerIcon from "leaflet/dist/images/marker-icon.png";
 import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
 import appContext from "../../../components/app_context";
-import { createNewNote, moveMarker } from "./api";
-import openContextMenu, { openMapContextMenu } from "./context_menu";
-import toast from "../../../services/toast";
+import FNote from "../../../entities/fnote";
+import branches from "../../../services/branches";
+import froca from "../../../services/froca";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
-import branches from "../../../services/branches";
-import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSlider } from "../../react/TouchBar";
+import toast from "../../../services/toast";
+import CollectionProperties from "../../note_bars/CollectionProperties";
+import ActionButton from "../../react/ActionButton";
+import { ButtonOrActionButton } from "../../react/Button";
+import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
 import { ParentComponent } from "../../react/react_utils";
+import TouchBar, { TouchBarButton, TouchBarSlider } from "../../react/TouchBar";
+import { ViewModeProps } from "../interface";
+import { createNewNote, moveMarker } from "./api";
+import openContextMenu, { openMapContextMenu } from "./context_menu";
+import Map from "./map";
+import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
+import Marker, { GpxTrack } from "./marker";

 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -50,7 +55,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
        }
    }, 5000);

-    useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
+    useEffect(() => { froca.getNotes(noteIds).then(setNotes); }, [ noteIds ]);

    useEffect(() => {
        if (!note) return;
@@ -60,7 +65,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM

    // Note creation.
    useTriliumEvent("geoMapCreateChildNote", () => {
-         toast.showPersistent({
+        toast.showPersistent({
            icon: "plus",
            id: "geo-new-note",
            title: "New note",
@@ -130,6 +135,19 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM

    return (
        <div className={`geo-view ${state === State.NewNote ? "placing-note" : ""}`}>
+            <CollectionProperties
+                note={note}
+                rightChildren={<>
+                    <ToggleReadOnlyButton note={note} />
+                    <ButtonOrActionButton
+                        icon="bx bx-plus"
+                        text={t("geo-map.create-child-note-text")}
+                        title={t("geo-map.create-child-note-title")}
+                        triggerCommand="geoMapCreateChildNote"
+                        disabled={isReadOnly}
+                    />
+                </>}
+            />
            { coordinates !== undefined && zoom !== undefined && <Map
                apiRef={apiRef} containerRef={containerRef}
                coordinates={coordinates}
@@ -151,6 +169,16 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
    );
 }

+function ToggleReadOnlyButton({ note }: { note: FNote }) {
+    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+
+    return <ActionButton
+        text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
+        icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
+        onClick={() => setReadOnly(!isReadOnly)}
+    />;
+}
+
 function NoteWrapper({ note, isReadOnly }: { note: FNote, isReadOnly: boolean }) {
    const mime = useNoteProperty(note, "mime");
    const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE);
@@ -204,7 +232,7 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
        onDragged={editable ? onDragged : undefined}
        onClick={!editable ? onClick : undefined}
        onContextMenu={onContextMenu}
-    />
+    />;
 }

 function NoteGpxTrack({ note }: { note: FNote }) {
@@ -238,7 +266,7 @@ function NoteGpxTrack({ note }: { note: FNote }) {
            color: note.getLabelValue("color") ?? "blue"
        }
    }), [ color, iconClass ]);
-    return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />
+    return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />;
 }

 function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string, archived?: boolean) {
@@ -292,5 +320,5 @@ function GeoMapTouchBar({ state, map }: { state: State, map: L.Map | null | unde
                enabled={state === State.Normal}
            />
        </TouchBar>
-    )
+    );
 }
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -7,7 +7,8 @@ import attribute_renderer from "../../../services/attribute_renderer";
 import content_renderer from "../../../services/content_renderer";
 import { t } from "../../../services/i18n";
 import link from "../../../services/link";
-import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean } from "../../react/hooks";
+import CollectionProperties from "../../note_bars/CollectionProperties";
+import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
 import Icon from "../../react/Icon";
 import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
@@ -19,11 +20,18 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
    const { pageNotes, ...pagination } = usePagination(note, noteIds);
    const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
+    const noteType = useNoteProperty(note, "type");
+    const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");

    return (
        <div class="note-list list-view">
+            <CollectionProperties
+                note={note}
+                centerChildren={<Pager {...pagination} />}
+            />
+
            { noteIds.length > 0 && <div class="note-list-wrapper">
-                <Pager {...pagination} />
+                {!hasCollectionProperties && <Pager {...pagination} />}

                <div class="note-list-container use-tn-links">
                    {pageNotes?.map(childNote => (
@@ -45,11 +53,18 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
    const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
    const { pageNotes, ...pagination } = usePagination(note, noteIds);
    const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
+    const noteType = useNoteProperty(note, "type");
+    const hasCollectionProperties = [ "book", "search" ].includes(noteType ?? "");

    return (
        <div class="note-list grid-view">
+            <CollectionProperties
+                note={note}
+                centerChildren={<Pager {...pagination} />}
+            />
+
            <div class="note-list-wrapper">
-                <Pager {...pagination} />
+                {!hasCollectionProperties && <Pager {...pagination} />}

                <div class="note-list-container use-tn-links">
                    {pageNotes?.map(childNote => (
@@ -140,7 +155,7 @@ function NoteAttributes({ note }: { note: FNote }) {
    return <span className="note-list-attributes" ref={ref} />;
 }

-function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
+export function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
    note: FNote;
    trim?: boolean;
    noChildrenList?: boolean;
--- a/apps/client/src/widgets/collections/presentation/index.css
+++ b/apps/client/src/widgets/collections/presentation/index.css
@@ -1,11 +1,7 @@
-.presentation-button-bar {
-    position: absolute;
-    top: 1em;
-    right: 1em;
-
-    .floating-buttons-children {
-        top: 0;
-    }
+.presentation-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }

 .presentation-container {
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -1,18 +1,21 @@
-import { ViewModeMedia, ViewModeProps } from "../interface";
+import "./index.css";
+
+import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import Reveal from "reveal.js";
 import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
-import slideCustomStylesheet from "./slidejs.css?raw";
-import { buildPresentationModel, PresentationModel, PresentationSlideBaseModel } from "./model";
-import ShadowDom from "../../react/ShadowDom";
-import ActionButton from "../../react/ActionButton";
-import "./index.css";
-import { RefObject } from "preact";
+
 import { openInCurrentNoteContext } from "../../../components/note_context";
-import { useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
-import { t } from "../../../services/i18n";
-import { DEFAULT_THEME, loadPresentationTheme } from "./themes";
 import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import CollectionProperties from "../../note_bars/CollectionProperties";
+import ActionButton from "../../react/ActionButton";
+import { useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
+import ShadowDom from "../../react/ShadowDom";
+import { ViewModeMedia, ViewModeProps } from "../interface";
+import { buildPresentationModel, PresentationModel, PresentationSlideBaseModel } from "./model";
+import slideCustomStylesheet from "./slidejs.css?raw";
+import { DEFAULT_THEME, loadPresentationTheme } from "./themes";

 export default function PresentationView({ note, noteIds, media, onReady, onProgressChanged }: ViewModeProps<{}>) {
    const [ presentation, setPresentation ] = useState<PresentationModel>();
@@ -51,14 +54,17 @@ export default function PresentationView({ note, noteIds, media, onReady, onProg

    if (media === "screen") {
        return (
-            <>
+            <div class="presentation-view">
+                <CollectionProperties
+                    note={note}
+                    rightChildren={<ButtonOverlay containerRef={containerRef} api={api} />}
+                />
                <ShadowDom
                    className="presentation-container"
                    containerRef={containerRef}
                >{content}</ShadowDom>
-                <ButtonOverlay containerRef={containerRef} api={api} />
-            </>
-        )
+            </div>
+        );
    } else if (media === "print") {
        // Printing needs a query parameter that is read by Reveal.js.
        const url = new URL(window.location.href);
@@ -108,42 +114,34 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
    }, [ api ]);

    return (
-        <div className="presentation-button-bar">
-            <div className="floating-buttons-children">
-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-edit"
-                    text={t("presentation_view.edit-slide")}
-                    noIconActionClass
-                    onClick={e => {
-                        const currentSlide = api?.getCurrentSlide();
-                        const noteId = getNoteIdFromSlide(currentSlide);
+        <>
+            <ActionButton
+                icon="bx bx-edit"
+                text={t("presentation_view.edit-slide")}
+                onClick={e => {
+                    const currentSlide = api?.getCurrentSlide();
+                    const noteId = getNoteIdFromSlide(currentSlide);

-                        if (noteId) {
-                            openInCurrentNoteContext(e, noteId);
-                        }
-                    }}
-                />
+                    if (noteId) {
+                        openInCurrentNoteContext(e, noteId);
+                    }
+                }}
+            />

-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-grid-horizontal"
-                    text={t("presentation_view.slide-overview")}
-                    active={isOverviewActive}
-                    noIconActionClass
-                    onClick={() => api?.toggleOverview()}
-                />
+            <ActionButton
+                icon="bx bx-grid-horizontal"
+                text={t("presentation_view.slide-overview")}
+                active={isOverviewActive}
+                onClick={() => api?.toggleOverview()}
+            />

-                <ActionButton
-                    className="floating-button"
-                    icon="bx bx-fullscreen"
-                    text={t("presentation_view.start-presentation")}
-                    noIconActionClass
-                    onClick={() => containerRef.current?.requestFullscreen()}
-                />
-            </div>
-        </div>
-    )
+            <ActionButton
+                icon="bx bx-fullscreen"
+                text={t("presentation_view.start-presentation")}
+                onClick={() => containerRef.current?.requestFullscreen()}
+            />
+        </>
+    );
 }

 function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api | undefined) => void }) {
@@ -179,7 +177,7 @@ function Presentation({ presentation, setApi } : { presentation: PresentationMod
            api.destroy();
            setRevealApi(undefined);
            setApi(undefined);
-        }
+        };
    }, []);

    useEffect(() => {
@@ -191,19 +189,19 @@ function Presentation({ presentation, setApi } : { presentation: PresentationMod
            <div className="slides">
                {presentation.slides?.map(slide => {
                    if (!slide.verticalSlides) {
-                        return <Slide key={slide.noteId} slide={slide} />
-                    } else {
-                        return (
-                            <section>
-                                <Slide key={slide.noteId} slide={slide} />
-                                {slide.verticalSlides.map(slide => <Slide key={slide.noteId} slide={slide} /> )}
-                            </section>
-                        );
+                        return <Slide key={slide.noteId} slide={slide} />;
                    }
+                    return (
+                        <section>
+                            <Slide key={slide.noteId} slide={slide} />
+                            {slide.verticalSlides.map(slide => <Slide key={slide.noteId} slide={slide} /> )}
+                        </section>
+                    );
+
                })}
            </div>
        </div>
-    )
+    );

 }

--- a/apps/client/src/widgets/collections/table/index.css
+++ b/apps/client/src/widgets/collections/table/index.css
@@ -3,7 +3,8 @@
    position: relative;
    height: 100%;
    user-select: none;
-    padding: 0 5px 0 10px;
+    display: flex;
+    flex-direction: column;

    .tabulator-tableholder {
        height: unset !important;
--- a/apps/client/src/widgets/collections/table/index.tsx
+++ b/apps/client/src/widgets/collections/table/index.tsx
@@ -1,20 +1,22 @@
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { ViewModeProps } from "../interface";
-import { TableData } from "./rows";
-import { useLegacyWidget } from "../../react/hooks";
-import Tabulator from "./tabulator";
-import { Tabulator as VanillaTabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule, Options, RowComponent} from 'tabulator-tables';
-import { useContextMenu } from "./context_menu";
-import { ParentComponent } from "../../react/react_utils";
-import FNote from "../../../entities/fnote";
-import { t } from "../../../services/i18n";
-import Button from "../../react/Button";
 import "./index.css";
-import useRowTableEditing from "./row_editing";
-import useColTableEditing from "./col_editing";
-import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
+
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { DataTreeModule, EditModule, FormatModule, FrozenColumnsModule, InteractionModule, MoveColumnsModule, MoveRowsModule, Options, PersistenceModule, ResizeColumnsModule, RowComponent,SortModule, Tabulator as VanillaTabulator} from 'tabulator-tables';
+
+import { t } from "../../../services/i18n";
 import SpacedUpdate from "../../../services/spaced_update";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
+import CollectionProperties from "../../note_bars/CollectionProperties";
+import { ButtonOrActionButton } from "../../react/Button";
+import { useLegacyWidget } from "../../react/hooks";
+import { ParentComponent } from "../../react/react_utils";
+import { ViewModeProps } from "../interface";
+import useColTableEditing from "./col_editing";
+import { useContextMenu } from "./context_menu";
 import useData, { TableConfig } from "./data";
+import useRowTableEditing from "./row_editing";
+import { TableData } from "./rows";
+import Tabulator from "./tabulator";

 export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
    const tabulatorRef = useRef<VanillaTabulator>(null);
@@ -36,7 +38,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
            dataTreeChildIndent: 20,
            dataTreeExpandElement: `<button class="tree-expand"><span class="bx bx-chevron-right"></span></button>`,
            dataTreeCollapseElement: `<button class="tree-collapse"><span class="bx bx-chevron-down"></span></button>`
-        }
+        };
    }, [ hasChildren ]);

    const rowFormatter = useCallback((row: RowComponent) => {
@@ -46,6 +48,16 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon

    return (
        <div className="table-view">
+            <CollectionProperties
+                note={note}
+                rightChildren={note.type !== "search" &&
+                    <>
+                        <ButtonOrActionButton triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
+                        <ButtonOrActionButton triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
+                    </>
+                }
+            />
+
            {rowData !== undefined && persistenceProps &&  (
                <>
                    <Tabulator
@@ -54,7 +66,6 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                        columns={columnDefs ?? []}
                        data={rowData}
                        modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
-                        footerElement={<TableFooter note={note} />}
                        events={{
                            ...contextMenuEvents,
                            ...rowEditingEvents
@@ -67,24 +78,11 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                        rowFormatter={rowFormatter}
                        {...dataTreeProps}
                    />
-                    <TableFooter note={note} />
                </>
            )}
            {attributeDetailWidgetEl}
        </div>
-    )
-}
-
-function TableFooter({ note }: { note: FNote }) {
-    return (note.type !== "search" &&
-        <div className="tabulator-footer">
-            <div className="tabulator-footer-contents">
-                <Button triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
-                {" "}
-                <Button triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
-            </div>
-        </div>
-    )
+    );
 }

 function usePersistence(viewConfig: TableConfig | null | undefined, saveConfig: (newConfig: TableConfig) => void) {
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/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> {
@@ -39,6 +38,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
        this.#setThemeCapabilities();
        this.#setLocaleAndDirection(options.get("locale"));
        this.#setExperimentalFeatures();
+        this.#initPWATopbarColor();

        return super.render();
    }
@@ -64,8 +64,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 +92,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 +100,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);
    }
@@ -112,8 +116,23 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
        document.body.lang = locale;
        document.body.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
    }
+
+    #initPWATopbarColor() {
+        if (!utils.isPWA()) return;
+        const tracker = $("#background-color-tracker");
+
+        if (tracker.length) {
+            const applyThemeColor = () => {
+                let meta = $("meta[name='theme-color']");
+                if (!meta.length) {
+                    meta = $(`<meta name="theme-color">`).appendTo($("head"));
+                }
+                meta.attr("content", tracker.css("color"));
+            };
+
+            tracker.on("transitionend", applyThemeColor);
+            applyThemeColor();
+        }
+    }
 }

-function getViewportHeight() {
-    return window.visualViewport?.height ?? window.innerHeight;
-}
--- a/apps/client/src/widgets/containers/scrolling_container.css
+++ b/apps/client/src/widgets/containers/scrolling_container.css
@@ -1,14 +1,22 @@
 .scrolling-container {
+    --content-margin-inline: 24px;
+
    overflow: auto;
    scroll-behavior: smooth;
    position: relative;

-    > .inline-title,
-    > .note-detail > .note-detail-editable-text,
-    > .note-list-widget:not(.full-height) {
-        padding-inline: 24px;
+    > .note-detail > .note-detail-editable-text > .note-detail-editable-text-editor,
+    > .note-list-widget:not(.full-height) .note-list-wrapper {
+        margin-inline: var(--content-margin-inline);
    }

+    > .inline-title {
+        padding-inline: var(--content-margin-inline);
+    }
+
+    > .note-detail > .note-detail-editable-text > .note-detail-editable-text-editor {
+        overflow: unset;
+    }
 }

 .note-split.type-code:not(.mime-text-x-sqlite) {
--- a/apps/client/src/widgets/dialogs/PopupEditor.css
+++ b/apps/client/src/widgets/dialogs/PopupEditor.css
@@ -91,8 +91,9 @@ body.mobile .modal.popup-editor-dialog .modal-dialog {
    height: 100%;
 }

-.modal.popup-editor-dialog .note-detail-editable-text {
-    padding: 0 1em;
+.modal.popup-editor-dialog .note-detail-editable-text-editor {
+    margin: 0 28px;
+    overflow: visible; /* Allow selection rectangle to go outside of the editor area */
 }

 .modal.popup-editor-dialog .note-detail-file {
--- a/apps/client/src/widgets/dialogs/PopupEditor.tsx
+++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx
@@ -5,13 +5,15 @@ import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";

 import appContext from "../../components/app_context";
 import NoteContext from "../../components/note_context";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import froca from "../../services/froca";
 import { t } from "../../services/i18n";
 import tree from "../../services/tree";
 import utils from "../../services/utils";
 import NoteList from "../collections/NoteList";
 import FloatingButtons from "../FloatingButtons";
-import { DESKTOP_FLOATING_BUTTONS, MOBILE_FLOATING_BUTTONS, POPUP_HIDDEN_FLOATING_BUTTONS } from "../FloatingButtonsDefinitions";
+import { DESKTOP_FLOATING_BUTTONS, POPUP_HIDDEN_FLOATING_BUTTONS } from "../FloatingButtonsDefinitions";
+import NoteBadges from "../layout/NoteBadges";
 import NoteIcon from "../note_icon";
 import NoteTitleWidget from "../note_title";
 import NoteDetail from "../NoteDetail";
@@ -23,8 +25,6 @@ import ReadOnlyNoteInfoBar from "../ReadOnlyNoteInfoBar";
 import StandaloneRibbonAdapter from "../ribbon/components/StandaloneRibbonAdapter";
 import FormattingToolbar from "../ribbon/FormattingToolbar";
 import MobileEditorToolbar from "../type_widgets/text/mobile_editor_toolbar";
-import NoteBadges from "../layout/NoteBadges";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";

 const isNewLayout = isExperimentalFeatureEnabled("new-layout");

@@ -34,7 +34,7 @@ export default function PopupEditor() {
    const [ noteContext, setNoteContext ] = useState(new NoteContext("_popup-editor"));
    const isMobile = utils.isMobile();
    const items = useMemo(() => {
-        const baseItems = isMobile ? MOBILE_FLOATING_BUTTONS : DESKTOP_FLOATING_BUTTONS;
+        const baseItems = isMobile ? [] : DESKTOP_FLOATING_BUTTONS;
        return baseItems.filter(item => !POPUP_HIDDEN_FLOATING_BUTTONS.includes(item));
    }, [ isMobile ]);

--- a/apps/client/src/widgets/dialogs/call_to_action_definitions.ts
+++ b/apps/client/src/widgets/dialogs/call_to_action_definitions.ts
@@ -1,7 +1,7 @@
 import appContext from "../../components/app_context";
 import { t } from "../../services/i18n";
 import options from "../../services/options";
-import utils from "../../services/utils";
+import utils, { isMac } from "../../services/utils";

 /**
 * A "call-to-action" is an interactive message for the user, generally to present new features.
@@ -41,10 +41,6 @@ export interface CallToAction {
    }[];
 }

-function isNextTheme() {
-    return [ "next", "next-light", "next-dark" ].includes(options.get("theme"));
-}
-
 const CALL_TO_ACTIONS: CallToAction[] = [
    {
        id: "new_layout",
@@ -63,7 +59,7 @@ const CALL_TO_ACTIONS: CallToAction[] = [
        id: "background_effects",
        title: t("call_to_action.background_effects_title"),
        message: t("call_to_action.background_effects_message"),
-        enabled: () => false,
+        enabled: () => (isMac() && !options.is("backgroundEffects")),
        buttons: [
            {
                text: t("call_to_action.background_effects_button"),
@@ -78,7 +74,7 @@ const CALL_TO_ACTIONS: CallToAction[] = [
        id: "next_theme",
        title: t("call_to_action.next_theme_title"),
        message: t("call_to_action.next_theme_message"),
-        enabled: () => !isNextTheme(),
+        enabled: () => ![ "next", "next-light", "next-dark" ].includes(options.get("theme")),
        buttons: [
            {
                text: t("call_to_action.next_theme_button"),
--- a/apps/client/src/widgets/dialogs/help.tsx
+++ b/apps/client/src/widgets/dialogs/help.tsx
@@ -1,11 +1,12 @@
-import Modal from "../react/Modal.jsx";
-import { t } from "../../services/i18n.js";
-import { ComponentChildren } from "preact";
-import appContext, { CommandNames } from "../../components/app_context.js";
-import RawHtml from "../react/RawHtml.jsx";
 import { useEffect, useState } from "preact/hooks";
+
+import appContext, { CommandNames } from "../../components/app_context.js";
+import { t } from "../../services/i18n.js";
 import keyboard_actions from "../../services/keyboard_actions.js";
+import { Card } from "../react/Card.jsx";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import Modal from "../react/Modal.jsx";
+import RawHtml from "../react/RawHtml.jsx";

 export default function HelpDialog() {
    const [ shown, setShown ] = useState(false);
@@ -110,7 +111,7 @@ export default function HelpDialog() {

 function KeyboardShortcut({ commands, description }: { commands: CommandNames | CommandNames[], description: string }) {
    const [ shortcuts, setShortcuts ] = useState<string[]>([]);
-    
+
    useEffect(() => {
        (async () => {
            const shortcuts: string[] = [];
@@ -148,20 +149,6 @@ function FixedKeyboardShortcut({ keys, description }: { keys?: string[], descrip
    );
 }

-function Card({ title, children }: { title: string, children: ComponentChildren }) {
-    return (
-        <div className="card">
-            <div className="card-body">
-                <h5 className="card-title">{title}</h5>
-
-                <p className="card-text">
-                    {children}
-                </p>
-            </div>
-        </div>
-    )
-}
-
 function editShortcuts() {
    appContext.tabManager.openContextWithNote("_optionsShortcuts", { activate: true });
-}
+}
--- a/apps/client/src/widgets/dialogs/import.tsx
+++ b/apps/client/src/widgets/dialogs/import.tsx
@@ -1,14 +1,16 @@
 import { useState } from "preact/hooks";
+
 import { t } from "../../services/i18n";
+import importService, { UploadFilesOptions } from "../../services/import";
 import tree from "../../services/tree";
+import { boolToString } from "../../services/utils";
 import Button from "../react/Button";
 import FormCheckbox from "../react/FormCheckbox";
 import FormFileUpload from "../react/FormFileUpload";
 import FormGroup, { FormMultiGroup } from "../react/FormGroup";
+import { useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
 import Modal from "../react/Modal";
 import RawHtml from "../react/RawHtml";
-import importService, { UploadFilesOptions } from "../../services/import";
-import { useTriliumEvent, useTriliumOptionBool } from "../react/hooks";

 export default function ImportDialog() {
    const [ compressImages ] = useTriliumOptionBool("compressImages");
@@ -98,6 +100,4 @@ export default function ImportDialog() {
    );
 }

-function boolToString(value: boolean) {
-    return value ? "true" : "false";
-}
+
--- a/apps/client/src/widgets/dialogs/import_preview.css
+++ b/apps/client/src/widgets/dialogs/import_preview.css
@@ -0,0 +1,47 @@
+.modal.import-preview-dialog {
+    .stats {
+        color: var(--muted-text-color);
+        font-size: 0.9em;
+
+        span:after {
+            content: " • "
+        }
+
+        span:last-of-type:after {
+            content: unset;
+        }
+    }
+
+
+    .critical { --color: #ff7979; }
+    .warning { --color: #e2b11d; }
+    .safe { --color: var(--admonition-tip-accent-color); }
+
+    .card {
+        margin-bottom: 1em;
+        position: relative;
+        overflow: hidden;
+        padding-inline: 0.75em;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 4px;
+            background: var(--color);
+        }
+    }
+
+    .dangerous-categories {
+        display: flex;
+        gap: 0.5em;
+        margin-top: 0.5em;
+        --badge-radius: 1000px;
+
+        .ext-badge {
+            color: black;
+        }
+    }
+}
--- a/apps/client/src/widgets/dialogs/import_preview.tsx
+++ b/apps/client/src/widgets/dialogs/import_preview.tsx
@@ -0,0 +1,216 @@
+import "./import_preview.css";
+
+import { DangerousAttributeCategory, ImportPreviewResponse } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
+
+import { t } from "../../services/i18n";
+import { executeUploadWithPreview } from "../../services/import";
+import { boolToString } from "../../services/utils";
+import { Badge } from "../react/Badge";
+import Button from "../react/Button";
+import { Card } from "../react/Card";
+import FormGroup from "../react/FormGroup";
+import FormRadioGroup from "../react/FormRadioGroup";
+import { useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
+import Modal from "../react/Modal";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+
+export interface ImportPreviewData {
+    parentNoteId: string;
+    previews: ImportPreviewResponse[];
+}
+
+type DangerousCategory = "critical" | "warning";
+const DANGEROUS_CATEGORIES_MAPPINGS: Record<DangerousAttributeCategory, {
+    title: string;
+    description: string;
+    icon: string;
+    category: DangerousCategory;
+}> = {
+    clientSideScripting: {
+        icon: "bx bx-window-alt",
+        title: t("import_preview.badge_client_side_scripting_title"),
+        description: t("import_preview.badge_client_side_scripting_tooltip"),
+        category: "critical"
+    },
+    serverSideScripting: {
+        icon: "bx bx-server",
+        title: t("import_preview.badge_server_side_scripting_title"),
+        description: t("import_preview.badge_server_side_scripting_tooltip"),
+        category: "critical"
+    },
+    codeExecution: {
+        icon: "bx bx-terminal",
+        title: t("import_preview.badge_code_execution_title"),
+        description: t("import_preview.badge_code_execution_description"),
+        category: "critical"
+    },
+    iconPack: {
+        icon: "bx bx-package",
+        title: t("import_preview.badge_icon_pack_title"),
+        description: t("import_preview.badge_icon_pack_description"),
+        category: "warning"
+    },
+    webview: {
+        icon: "bx bx-globe",
+        title: t("import_preview.badge_web_view_title"),
+        description: t("import_preview.badge_web_view_description"),
+        category: "warning"
+    }
+};
+
+const SEVERITY_ORDER: Record<DangerousCategory, number> = {
+    critical: 0,
+    warning: 1
+};
+
+const IMPORT_BUTTON_TIMEOUT = 3;
+
+export default function ImportPreviewDialog() {
+    const [ data, setData ] = useState<ImportPreviewData | null>(null);
+    const [ shown, setShown ] = useState(false);
+    const [ importMethod, setImportMethod ] = useState<string>("safe");
+    const isDangerousImport = data?.previews.some(preview => preview.isDangerous);
+    const [ importButtonTimeout, setImportButtonTimeout ] = useState(0);
+    const [ compressImages ] = useTriliumOptionBool("compressImages");
+
+    useEffect(() => {
+        // If safe → reset and do nothing
+        if (!isDangerousImport) {
+            setImportButtonTimeout(0);
+            return;
+        }
+
+        // Start countdown
+        setImportButtonTimeout(IMPORT_BUTTON_TIMEOUT);
+
+        const interval = setInterval(() => {
+            setImportButtonTimeout(prev => {
+                if (prev <= 1) {
+                    clearInterval(interval);
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [isDangerousImport]);
+
+    useTriliumEvent("showImportPreviewDialog", (data) => {
+        setData(data);
+        setShown(true);
+        setImportButtonTimeout(IMPORT_BUTTON_TIMEOUT);
+    });
+
+    return (
+        <Modal
+            className="import-preview-dialog"
+            size="lg"
+            title={t("import_preview.title")}
+            footer={<>
+                <Button text={t("import_preview.cancel")} onClick={() => setShown(false)}/>
+                <Button
+                    text={importButtonTimeout
+                        ? t("import_preview.import_with_timeout", { timeout: importButtonTimeout })
+                        : t("import_preview.import")}
+                    disabled={importButtonTimeout > 0}
+                    primary
+                />
+            </>}
+            show={shown}
+            onSubmit={() => {
+                if (!data) return;
+                executeUploadWithPreview(data.parentNoteId, data.previews, {
+                    shrinkImages: boolToString(compressImages),
+                    safeImport: boolToString(importMethod === "safe")
+                });
+                setShown(false);
+            }}
+            onHidden={() => {
+                setShown(false);
+                setData(null);
+                setImportButtonTimeout(3);
+            }}
+        >
+            <p>{isDangerousImport
+                ? t("import_preview.intro_unsafe", { count: data?.previews.length })
+                : t("import_preview.intro_safe", { count: data?.previews.length })}</p>
+
+            {data?.previews.map(preview => <SinglePreview key={preview.id} preview={preview} />)}
+
+            <div className="import-options">
+                <FormGroup name="parent-note" label={t("import_preview.parent_note")}>
+                    <NoteAutocomplete
+                        noteId={data?.parentNoteId}
+                        noteIdChanged={noteId => {
+                            if (!data) return;
+                            setData({
+                                ...data,
+                                parentNoteId: noteId
+                            });
+                        }}
+                    />
+                </FormGroup>
+
+                <FormRadioGroup
+                    name="import-method"
+                    currentValue={importMethod} onChange={setImportMethod}
+                    values={[
+                        { value: "safe", label: t("import_preview.import_safely"), inlineDescription: t("import_preview.import_safely_description") },
+                        { value: "unsafe", label: t("import_preview.import_trust"), inlineDescription: t("import_preview.import_trust_description") }
+                    ]}
+                />
+            </div>
+        </Modal>
+    );
+}
+
+function SinglePreview({ preview }: { preview: ImportPreviewResponse }) {
+    const categories = sortDangerousAttributeCategoryBySeverity(preview.dangerousAttributeCategories);
+
+    return (
+        <Card
+            title={preview.fileName}
+            className={DANGEROUS_CATEGORIES_MAPPINGS[categories[0]]?.category ?? "safe"}
+        >
+            <div className="stats">
+                <span>{t("import_preview.notes_count", { count: preview.numNotes })}</span>
+                <span>{t("import_preview.attributes_count", { count: preview.numAttributes })}</span>
+                <span>{t("import_preview.attachments_count", { count: preview.numAttachments })}</span>
+            </div>
+
+            <div className="dangerous-categories">
+                {categories.length > 0
+                    ? categories.map(dangerousCategory => {
+                        const mapping = DANGEROUS_CATEGORIES_MAPPINGS[dangerousCategory];
+                        return (
+                            <Badge
+                                key={dangerousCategory}
+                                className={mapping.category}
+                                icon={mapping.icon}
+                                text={mapping.title}
+                                tooltip={mapping.description}
+                            />
+                        );
+                    })
+                    : (
+                        <Badge
+                            className="safe"
+                            icon="bx bx-check"
+                            text="Safe"
+                            tooltip="This archive has no active content such as scripts or widgets that could affect your knowledge base or access sensitive data."
+                        />
+                    )}
+            </div>
+        </Card>
+    );
+}
+
+function sortDangerousAttributeCategoryBySeverity(categories: string[]) {
+    return categories.toSorted((a, b) => {
+        const aLevel = DANGEROUS_CATEGORIES_MAPPINGS[a].category;
+        const bLevel = DANGEROUS_CATEGORIES_MAPPINGS[b].category;
+        return SEVERITY_ORDER[aLevel] - SEVERITY_ORDER[bLevel];
+    });
+}
--- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx
@@ -1,11 +1,16 @@
-import { useContext, useMemo } from "preact/hooks";
-import { LaunchBarContext, LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
-import { CSSProperties } from "preact";
-import type FNote from "../../entities/fnote";
-import { useChildNotes, useNoteLabelBoolean } from "../react/hooks";
 import "./BookmarkButtons.css";
+
+import { CSSProperties } from "preact";
+import { useContext, useMemo } from "preact/hooks";
+
+import type FNote from "../../entities/fnote";
+import { t } from "../../services/i18n";
+import { FormDropdownSubmenu, FormListItem } from "../react/FormList";
+import { useChildNotes, useNote, useNoteIcon, useNoteLabelBoolean } from "../react/hooks";
 import NoteLink from "../react/NoteLink";
-import { CustomNoteLauncher } from "./GenericButtons";
+import ResponsiveContainer from "../react/ResponsiveContainer";
+import { CustomNoteLauncher, launchCustomNoteLauncher } from "./GenericButtons";
+import { LaunchBarContext, LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";

 const PARENT_NOTE_ID = "_lbBookmarks";

@@ -19,17 +24,64 @@ export default function BookmarkButtons() {
    const childNotes = useChildNotes(PARENT_NOTE_ID);

    return (
-        <div style={style}>
-            {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
-        </div>
-    )
+        <ResponsiveContainer
+            desktop={
+                <div style={style}>
+                    {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
+                </div>
+            }
+            mobile={
+                <LaunchBarDropdownButton
+                    icon="bx bx-bookmark"
+                    title={t("bookmark_buttons.bookmarks")}
+                >
+                    {childNotes?.map(childNote => <SingleBookmark key={childNote.noteId} note={childNote} />)}
+                </LaunchBarDropdownButton>
+            }
+        />
+    );
 }

 function SingleBookmark({ note }: { note: FNote }) {
    const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder");
-    return bookmarkFolder
-        ? <BookmarkFolder note={note} />
-        : <CustomNoteLauncher launcherNote={note} getTargetNoteId={() => note.noteId} />
+    return <ResponsiveContainer
+        desktop={
+            bookmarkFolder
+                ? <BookmarkFolder note={note} />
+                : <CustomNoteLauncher launcherNote={note} getTargetNoteId={() => note.noteId} />
+        }
+        mobile={<MobileBookmarkItem noteId={note.noteId} bookmarkFolder={bookmarkFolder} />}
+    />;
+}
+
+function MobileBookmarkItem({ noteId, bookmarkFolder }: { noteId: string, bookmarkFolder: boolean }) {
+    const note = useNote(noteId);
+    const noteIcon = useNoteIcon(note);
+    if (!note) return null;
+
+    return (
+        !bookmarkFolder
+            ? <FormListItem icon={noteIcon} onClick={(e) => launchCustomNoteLauncher(e, { launcherNote: note, getTargetNoteId: () => note.noteId })}>{note.title}</FormListItem>
+            : <MobileBookmarkFolder note={note} />
+    );
+}
+
+function MobileBookmarkFolder({ note }: { note: FNote }) {
+    const childNotes = useChildNotes(note.noteId);
+
+    return (
+        <FormDropdownSubmenu icon="bx bx-folder" title={note.title}>
+            {childNotes.map(childNote => (
+                <FormListItem
+                    key={childNote.noteId}
+                    icon={childNote.getIcon()}
+                    onClick={(e) => launchCustomNoteLauncher(e, { launcherNote: childNote, getTargetNoteId: () => childNote.noteId })}
+                >
+                    {childNote.title}
+                </FormListItem>
+            ))}
+        </FormDropdownSubmenu>
+    );
 }

 function BookmarkFolder({ note }: { note: FNote }) {
@@ -55,5 +107,5 @@ function BookmarkFolder({ note }: { note: FNote }) {
                </ul>
            </div>
        </LaunchBarDropdownButton>
-    )
+    );
 }
--- a/apps/client/src/widgets/launch_bar/GenericButtons.tsx
+++ b/apps/client/src/widgets/launch_bar/GenericButtons.tsx
@@ -7,32 +7,18 @@ import { isCtrlKey } from "../../services/utils";
 import { useGlobalShortcut, useNoteLabel } from "../react/hooks";
 import { LaunchBarActionButton, useLauncherIconAndTitle } from "./launch_bar_widgets";

-export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNoteId }: {
+export function CustomNoteLauncher(props: {
    launcherNote: FNote;
    getTargetNoteId: (launcherNote: FNote) => string | null | Promise<string | null>;
    getHoistedNoteId?: (launcherNote: FNote) => string | null;
    keyboardShortcut?: string;
 }) {
+    const { launcherNote, getTargetNoteId } = props;
    const { icon, title } = useLauncherIconAndTitle(launcherNote);

    const launch = useCallback(async (evt: MouseEvent | KeyboardEvent) => {
-        if (evt.which === 3) {
-            return;
-        }
-
-        const targetNoteId = await getTargetNoteId(launcherNote);
-        if (!targetNoteId) return;
-
-        const hoistedNoteIdWithDefault = getHoistedNoteId?.(launcherNote) || appContext.tabManager.getActiveContext()?.hoistedNoteId;
-        const ctrlKey = isCtrlKey(evt);
-
-        if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
-            const activate = !!evt.shiftKey;
-            await appContext.tabManager.openInNewTab(targetNoteId, hoistedNoteIdWithDefault, activate);
-        } else {
-            await appContext.tabManager.openInSameTab(targetNoteId, hoistedNoteIdWithDefault);
-        }
-    }, [ launcherNote, getTargetNoteId, getHoistedNoteId ]);
+        await launchCustomNoteLauncher(evt, props);
+    }, [ props ]);

    // Keyboard shortcut.
    const [ shortcut ] = useNoteLabel(launcherNote, "keyboardShortcut");
@@ -54,3 +40,24 @@ export function CustomNoteLauncher({ launcherNote, getTargetNoteId, getHoistedNo
        />
    );
 }
+
+export async function launchCustomNoteLauncher(evt: MouseEvent | KeyboardEvent, { launcherNote, getTargetNoteId, getHoistedNoteId }: {
+    launcherNote: FNote;
+    getTargetNoteId: (launcherNote: FNote) => string | null | Promise<string | null>;
+    getHoistedNoteId?: (launcherNote: FNote) => string | null;
+}) {
+    if (evt.which === 3) return;
+
+    const targetNoteId = await getTargetNoteId(launcherNote);
+    if (!targetNoteId) return;
+
+    const hoistedNoteIdWithDefault = getHoistedNoteId?.(launcherNote) || appContext.tabManager.getActiveContext()?.hoistedNoteId;
+    const ctrlKey = isCtrlKey(evt);
+
+    if ((evt.which === 1 && ctrlKey) || evt.which === 2) {
+        const activate = !!evt.shiftKey;
+        await appContext.tabManager.openInNewTab(targetNoteId, hoistedNoteIdWithDefault, activate);
+    } else {
+        await appContext.tabManager.openInSameTab(targetNoteId, hoistedNoteIdWithDefault);
+    }
+}
--- a/apps/client/src/widgets/launch_bar/LauncherContainer.tsx
+++ b/apps/client/src/widgets/launch_bar/LauncherContainer.tsx
@@ -3,6 +3,7 @@ import { useCallback, useLayoutEffect, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
 import { isDesktop, isMobile } from "../../services/utils";
+import TabSwitcher from "../mobile_widgets/TabSwitcher";
 import { useTriliumEvent } from "../react/hooks";
 import { onWheelHorizontalScroll } from "../widget_utils";
 import BookmarkButtons from "./BookmarkButtons";
@@ -97,6 +98,8 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
            return <QuickSearchLauncherWidget />;
        case "aiChatLauncher":
            return <AiChatButton launcherNote={note} />;
+        case "mobileTabSwitcher":
+            return <TabSwitcher />;
        default:
            throw new Error(`Unrecognized builtin widget ${builtinWidget} for launcher ${note.noteId} "${note.title}"`);
    }
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";

@@ -18,12 +19,12 @@ export interface LauncherNoteProps {
    launcherNote: FNote;
 }

-export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
+export function LaunchBarActionButton({ className, ...props }: Omit<ActionButtonProps, "noIconActionClass" | "titlePosition">) {
    const { isHorizontalLayout } = useContext(LaunchBarContext);

    return (
        <ActionButton
-            className="button-widget launcher-button"
+            className={clsx("button-widget launcher-button", className)}
            noIconActionClass
            titlePosition={isHorizontalLayout ? "bottom" : "right"}
            {...props}
@@ -48,6 +49,7 @@ export function LaunchBarDropdownButton({ children, icon, dropdownOptions, ...pr
                    placement: isHorizontalLayout ? "bottom" : "right"
                }
            }}
+            mobileBackdrop
            {...props}
        >{children}</Dropdown>
    );
--- a/apps/client/src/widgets/layout/InlineTitle.tsx
+++ b/apps/client/src/widgets/layout/InlineTitle.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from "bootstrap";
 import clsx from "clsx";
 import { ComponentChild } from "preact";
 import { useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import type React from "react";
 import { Trans } from "react-i18next";

 import FNote from "../../entities/fnote";
--- a/apps/client/src/widgets/layout/NoteTitleActions.css
+++ b/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 {
        }
    }
 }
+
--- a/apps/client/src/widgets/layout/NoteTitleActions.tsx
+++ b/apps/client/src/widgets/layout/NoteTitleActions.tsx
@@ -1,34 +1,29 @@
 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 (
        <div className="title-actions">
            <PromotedAttributes note={note} componentId={componentId} noteContext={noteContext} />
            {noteType === "search" && <SearchProperties note={note} ntxId={ntxId} />}
-            {!isHiddenNote && note && noteType === "book" && <CollectionProperties note={note} />}
            <EditedNotes />
-            <NoteTypeSwitcher />
+            {(!viewScope?.viewMode || viewScope.viewMode === "default") && <NoteTypeSwitcher />}
        </div>
    );
 }
@@ -49,7 +44,7 @@ function PromotedAttributes({ note, componentId, noteContext }: {
    componentId: string,
    noteContext: NoteContext | undefined
 }) {
-    const [ cells, setCells ] = usePromotedAttributeData(note, componentId);
+    const [ cells, setCells ] = usePromotedAttributeData(note, componentId, noteContext);
    const [ expanded, setExpanded ] = useState(false);

    useEffect(() => {
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -58,101 +58,12 @@

        .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 {
            .note-paths-widget {
                padding: 0.5em;
            }
-
-            .note-path-intro {
-                color: var(--muted-text-color);
-            }
-
-            .note-path-list {
-                margin: 12px 0;
-                padding: 0;
-                list-style: none;
-
-                /* Note path card */
-                li {
-                    --border-radius: 6px;
-
-                    position: relative;
-                    background: var(--card-background-color);
-                    padding: 8px 20px 8px 25px;
-
-                    &:first-child {
-                        border-radius: var(--border-radius) var(--border-radius) 0 0;
-                    }
-
-                    &:last-child {
-                        border-radius: 0 0 var(--border-radius) var(--border-radius);
-                    }
-
-                    & + li {
-                        margin-top: 2px;
-                    }
-
-                    /* Current path arrow */
-                    &.path-current::before {
-                        position: absolute;
-                        display: flex;
-                        justify-content: flex-end;
-                        align-items: center;
-                        content: "\ee8f";
-                        top: 0;
-                        left: 0;
-                        width: 20px;
-                        bottom: 0;
-                        font-family: "boxicons";
-                        font-size: .75em;
-                        color: var(--menu-item-icon-color);
-                    }
-                }
-
-                /* Note path segment */
-                a {
-                    margin-inline: 2px;
-                    padding-inline: 2px;
-                    color: currentColor;
-                    font-weight: normal;
-                    text-decoration: none;
-
-                    /* The last segment of the note path */
-                    &.basename {
-                        color: var(--muted-text-color);
-                    }
-                }
-
-            }
        }

        .backlinks-widget > .dropdown-menu {
@@ -160,84 +71,6 @@

            max-height: 60vh;
            overflow-y: scroll;
-
-            /* Backlink card */
-            li {
-                --border-radius: 8px;
-
-                max-width: 600px;
-                padding: 10px 20px;
-                background: var(--card-background-color);
-
-                & + li {
-                    margin-top: 2px;
-                }
-
-                &:first-child {
-                    border-radius: var(--border-radius) var(--border-radius) 0 0;
-                }
-
-                &:last-child {
-                    border-radius: 0 0 var(--border-radius) var(--border-radius);
-                }
-
-                /* Card header */
-                & > span:first-child {
-                    display: block;
-
-                    > span {
-                        display: flex;
-                        flex-wrap: wrap;
-                        align-items: center;
-
-                        /* Note path */
-                        > small {
-                            flex: 100%;
-                            order: -1;
-                            font-size: .65rem;
-
-                            .note-path {
-                                padding: 0;
-                            }
-                        }
-
-                        /* Note icon */
-                        > .tn-icon {
-                            color: var(--menu-item-icon-color);
-                        }
-
-                        /* Note title */
-                        > a {
-                            margin-inline-start: 4px;
-                            color: currentColor;
-                            font-weight: 500;
-                        }
-                    }
-                }
-
-                /* Card content - excerpt */
-                & > span:nth-child(2) > div {
-                    all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
-                    display: block;
-
-                    margin: 8px 0;
-                    border-radius: 4px;
-                    background: var(--quick-search-result-content-background);
-                    padding: 8px;
-                    font-size: .75rem;
-
-                    a {
-                        background: transparent;
-                        color: var(--quick-search-result-highlight-color);
-                        text-decoration: underline;
-                    }
-
-                    p {
-                       margin: 0;
-                    }
-                }
-
-            }
        }
    }

@@ -284,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;
--- a/apps/client/src/widgets/layout/StatusBar.tsx
+++ b/apps/client/src/widgets/layout/StatusBar.tsx
@@ -56,7 +56,7 @@ export default function StatusBar() {
        similarNotesShown: activePane === "similar-notes",
        setSimilarNotesShown: (shown) => setActivePane(shown && "similar-notes")
    };
-    const isHiddenNote = note?.isInHiddenSubtree();
+    const isHiddenNote = note?.isHiddenCompletely();

    return (
        <div className="status-bar">
@@ -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>
    );
 }

@@ -300,7 +300,7 @@ function BacklinksBadge({ note, viewScope }: StatusBarContext) {
    const count = useBacklinkCount(note, viewScope?.viewMode === "default");
    return (note && count > 0 &&
        <StatusBarDropdown
-            className="backlinks-badge backlinks-widget"
+            className="backlinks-badge backlinks-widget tn-backlinks-widget"
            icon="bx bx-link"
            text={t("status_bar.backlinks", { count })}
            title={t("status_bar.backlinks_title", { count })}
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -0,0 +1,139 @@
+#launcher-container .mobile-tab-switcher {
+    position: relative;
+
+    &::after {
+        content: attr(data-tab-count);
+        font-family: var(--main-font-family);
+        font-size: 10px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.modal.tab-bar-modal {
+    .modal-dialog {
+        min-height: 85vh;
+    }
+
+    .tabs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1em;
+
+        @media (min-width: 850px) {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .tab-card {
+            background: var(--card-background-color);
+            border-radius: 1em;
+            min-width: 0;
+            overflow: hidden;
+            height: 200px;
+            display: flex;
+            flex-direction: column;
+
+            &.with-hue {
+                background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
+                border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
+            }
+
+            &.active {
+                outline: 4px solid var(--more-accented-background-color);
+                background: var(--card-background-hover-color);
+
+                .title {
+                    font-weight: bold;
+                }
+            }
+
+            header {
+                padding: 0.4em 0.5em;
+                border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+                display: flex;
+                overflow: hidden;
+                align-items: center;
+                color: var(--custom-color, inherit);
+                flex-shrink: 0;
+
+                &:not(:first-of-type) {
+                    border-top: 1px solid rgba(150, 150, 150, 0.1);
+                }
+
+                >.tn-icon {
+                    margin-inline-end: 0.4em;
+                }
+
+                .title {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    text-wrap: nowrap;
+                    font-size: 0.9em;
+                    flex-grow: 1;
+                }
+
+                .icon-action {
+                    flex-shrink: 0;
+                }
+            }
+
+            .tab-preview {
+                flex-grow: 1;
+                height: 100%;
+                overflow: hidden;
+                font-size: 0.5em;
+                user-select: none;
+                pointer-events: none;
+
+                &.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-relationMap,
+                &.type-launcher,
+                &.tab-preview-placeholder {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.25em;
+                    color: var(--muted-text-color);
+                }
+
+                .preview-placeholder {
+                    font-size: 500%;
+                }
+            }
+
+            &.with-split {
+                .preview-placeholder {
+                    font-size: 250%;
+                }
+            }
+        }
+    }
+
+    .modal-footer {
+        .tn-link {
+            color: var(--main-text-color);
+            width: 40%;
+            text-align: center;
+            text-decoration: none;
+        }
+    }
+}
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -0,0 +1,267 @@
+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";
+
+import appContext, { CommandNames } from "../../components/app_context";
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+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";
+import ActionButton from "../react/ActionButton";
+import { useActiveNoteContext, useNoteIcon, useTriliumEvents } from "../react/hooks";
+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();
+
+    return (
+        <>
+            <LaunchBarActionButton
+                className="mobile-tab-switcher"
+                icon="bx bx-rectangle"
+                text="Tabs"
+                onClick={() => setShown(true)}
+                data-tab-count={mainNoteContexts.length > 99 ? "∞" : mainNoteContexts.length}
+            />
+            {createPortal(<TabBarModal mainNoteContexts={mainNoteContexts} shown={shown} setShown={setShown} />, document.body)}
+        </>
+    );
+}
+
+function TabBarModal({ mainNoteContexts, shown, setShown }: {
+    mainNoteContexts: NoteContext[];
+    shown: boolean;
+    setShown: (newValue: boolean) => void;
+}) {
+    const [ fullyShown, setFullyShown ] = useState(false);
+    const selectTab = useCallback((noteContextToActivate: NoteContext) => {
+        appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
+        setShown(false);
+    }, [ setShown ]);
+
+    return (
+        <Modal
+            className="tab-bar-modal"
+            size="xl"
+            title={t("mobile_tab_switcher.title", { count: mainNoteContexts.length})}
+            show={shown}
+            onShown={() => setFullyShown(true)}
+            customTitleBarButtons={[
+                {
+                    iconClassName: "bx bx-dots-vertical-rounded",
+                    title: t("mobile_tab_switcher.more_options"),
+                    onClick(e) {
+                        contextMenu.show<CommandNames>({
+                            x: e.pageX,
+                            y: e.pageY,
+                            items: [
+                                { title: t("tab_row.new_tab"), command: "openNewTab", uiIcon: "bx bx-plus" },
+                                { title: t("tab_row.reopen_last_tab"), command: "reopenLastTab", uiIcon: "bx bx-undo", enabled: appContext.tabManager.recentlyClosedTabs.length !== 0 },
+                                { kind: "separator" },
+                                { title: t("tab_row.close_all_tabs"), command: "closeAllTabs", uiIcon: "bx bx-trash destructive-action-icon" },
+                            ],
+                            selectMenuItemHandler: ({ command }) => {
+                                if (command) {
+                                    appContext.triggerCommand(command);
+                                }
+                            }
+                        });
+                    },
+                }
+            ]}
+            footer={<>
+                <LinkButton
+                    text={t("tab_row.new_tab")}
+                    onClick={() => {
+                        appContext.triggerCommand("openNewTab");
+                        setShown(false);
+                    }}
+                />
+            </>}
+            scrollable
+            onHidden={() => {
+                setShown(false);
+                setFullyShown(false);
+            }}
+        >
+            <TabBarModelContent mainNoteContexts={mainNoteContexts} selectTab={selectTab} shown={fullyShown} />
+        </Modal>
+    );
+}
+
+function TabBarModelContent({ mainNoteContexts, selectTab, shown }: {
+    mainNoteContexts: NoteContext[];
+    shown: boolean;
+    selectTab: (noteContextToActivate: NoteContext) => void;
+}) {
+    const activeNoteContext = useActiveNoteContext();
+    const tabRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+    // Scroll to active tab.
+    useEffect(() => {
+        if (!shown || !activeNoteContext?.ntxId) return;
+        const correspondingEl = tabRefs.current[activeNoteContext.ntxId];
+        requestAnimationFrame(() => {
+            correspondingEl?.scrollIntoView();
+        });
+    }, [ activeNoteContext, shown ]);
+
+    return (
+        <div className="tabs">
+            {mainNoteContexts.map((noteContext) => (
+                <Tab
+                    key={noteContext.ntxId}
+                    noteContext={noteContext}
+                    activeNtxId={activeNoteContext.ntxId}
+                    selectTab={selectTab}
+                    containerRef={el => (tabRefs.current[noteContext.ntxId ?? ""] = el)}
+                />
+            ))}
+        </div>
+    );
+}
+
+function Tab({ noteContext, containerRef, selectTab, activeNtxId }: {
+    containerRef: (el: HTMLDivElement | null) => void;
+    noteContext: NoteContext;
+    selectTab: (noteContextToActivate: NoteContext) => void;
+    activeNtxId: string | null | undefined;
+}) {
+    const { note } = noteContext;
+    const colorClass = note?.getColorClass() || '';
+    const workspaceTabBackgroundColorHue = getWorkspaceTabBackgroundColorHue(noteContext);
+    const subContexts = noteContext.getSubContexts();
+
+    return (
+        <div
+            ref={containerRef}
+            class={clsx("tab-card", {
+                active: noteContext.ntxId === activeNtxId,
+                "with-hue": workspaceTabBackgroundColorHue !== undefined,
+                "with-split": subContexts.length > 1
+            })}
+            onClick={() => selectTab(noteContext)}
+            style={{
+                "--bg-hue": workspaceTabBackgroundColorHue
+            }}
+        >
+            {subContexts.map(subContext => (
+                <Fragment key={subContext.ntxId}>
+                    <TabHeader noteContext={subContext} colorClass={colorClass} />
+                    <TabPreviewContent note={subContext.note} viewScope={subContext.viewScope} />
+                </Fragment>
+            ))}
+        </div>
+    );
+}
+
+function TabHeader({ noteContext, colorClass }: { noteContext: NoteContext, colorClass: string }) {
+    const iconClass = useNoteIcon(noteContext.note);
+    const [ navigationTitle, setNavigationTitle ] = useState<string | null>(null);
+
+    // Manage the title for read-only notes
+    useEffect(() => {
+        noteContext?.getNavigationTitle().then(setNavigationTitle);
+    }, [noteContext]);
+
+    return (
+        <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>
+    );
+}
+
+function PreviewPlaceholder({ icon}: {
+    icon: string;
+}) {
+    return (
+        <div className="preview-placeholder">
+            <Icon icon={icon} />
+        </div>
+    );
+}
+
+function getWorkspaceTabBackgroundColorHue(noteContext: NoteContext) {
+    if (!noteContext.hoistedNoteId) return;
+    const hoistedNote = froca.getNoteFromCache(noteContext.hoistedNoteId);
+    if (!hoistedNote) return;
+
+    const workspaceTabBackgroundColor = hoistedNote.getWorkspaceTabBackgroundColor();
+    if (!workspaceTabBackgroundColor) return;
+
+    try {
+        const parsedColor = parseColor(workspaceTabBackgroundColor);
+        if (!parsedColor) return;
+        return getHue(parsedColor);
+    } catch (e) {
+        // Colors are non-critical, simply ignore.
+        console.warn(e);
+    }
+}
+
+function useMainNoteContexts() {
+    const [ noteContexts, setNoteContexts ] = useState(appContext.tabManager.getMainNoteContexts());
+
+    useTriliumEvents([ "newNoteContextCreated", "noteContextRemoved" ] , () => {
+        setNoteContexts(appContext.tabManager.getMainNoteContexts());
+    });
+
+    return noteContexts;
+}
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.css
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.css
@@ -0,0 +1,3 @@
+.code-note-switcher-modal .dropdown-menu {
+    background: none !important;
+}
--- a/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
+++ b/apps/client/src/widgets/mobile_widgets/mobile_detail_menu.tsx
@@ -1,74 +1,240 @@
-import { useContext } from "preact/hooks";
-import appContext, { CommandMappings } from "../../components/app_context";
-import contextMenu, { MenuItem } from "../../menus/context_menu";
-import branches from "../../services/branches";
+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 tree from "../../services/tree";
+import server from "../../services/server";
+import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
+import { getLocaleName, NoteInfoContent } from "../layout/StatusBar";
 import ActionButton from "../react/ActionButton";
-import { ParentComponent } from "../react/react_utils";
-import BasicWidget from "../basic_widget";
+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 parentComponent = useContext(ParentComponent);
+    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");
+
+    function closePane() {
+        // Wait first for the context menu to be dismissed, otherwise the backdrop stays on.
+        requestAnimationFrame(() => {
+            parentComponent.triggerCommand("closeThisNoteSplit", { ntxId });
+        });
+    }

    return (
-        <ActionButton
-            icon="bx bx-dots-vertical-rounded"
-            text=""
-            onClick={(e) => {
-                const ntxId = (parentComponent as BasicWidget | null)?.getClosestNtxId();
-                if (!ntxId) return;
+        <div style={{ contain: "none" }}>
+            {note ? (
+                <NoteContextMenu
+                    dropdownRef={dropdownRef}
+                    note={note} noteContext={noteContext}
+                    itemsAtStart={<>
+                        <div className="form-list-row">
+                            <div className="form-list-col">
+                                <FormListItem
+                                    icon="bx bx-link"
+                                    onClick={() => setBacklinksModalShown(true)}
+                                    disabled={backlinksCount === 0}
+                                >{t("status_bar.backlinks", { count: backlinksCount })}</FormListItem>
+                            </div>
+                            <div className="form-list-col">
+                                <FormListItem
+                                    icon="bx bx-directions"
+                                    onClick={() => setNotePathsModalShown(true)}
+                                    disabled={(sortedNotePaths?.length ?? 0) <= 1}
+                                >{t("status_bar.note_paths", { count: sortedNotePaths?.length })}</FormListItem>
+                            </div>
+                        </div>
+                        <FormDropdownDivider />

-                const noteContext = appContext.tabManager.getNoteContextById(ntxId);
-                const subContexts = noteContext.getMainContext().getSubContexts();
-                const isMainContext = noteContext?.isMainContext();
-                const note = noteContext.note;
+                        {noteContext && ntxId && <NoteActionsCustom note={note} noteContext={noteContext} ntxId={ntxId} />}
+                        <FormListItem
+                            onClick={() => noteContext?.notePath && note_create.createNote(noteContext.notePath)}
+                            icon="bx bx-plus"
+                        >{t("mobile_detail_menu.insert_child_note")}</FormListItem>
+                        {subContexts.length < 2 && <>
+                            <FormDropdownDivider />
+                            <FormListItem
+                                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>
+                        </>}
+                        {!isMainContext && <>
+                            <FormDropdownDivider />
+                            <FormListItem
+                                icon="bx bx-x"
+                                onClick={closePane}
+                            >{t("close_pane_button.close_this_pane")}</FormListItem>
+                        </>}
+                        <FormDropdownDivider />
+                    </>}
+                    itemsNearNoteSettings={<>
+                        {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 />
+                    </>}
+                />
+            ) : (
+                <ActionButton
+                    icon="bx bx-x"
+                    onClick={closePane}
+                    text={t("close_pane_button.close_this_pane")}
+                />
+            )}

-                const items: (MenuItem<keyof CommandMappings>)[] = [
-                    { title: t("mobile_detail_menu.insert_child_note"), command: "insertChildNote", uiIcon: "bx bx-plus", enabled: note?.type !== "search" },
-                    { title: t("mobile_detail_menu.delete_this_note"), command: "delete", uiIcon: "bx bx-trash", enabled: note?.noteId !== "root" },
-                    { kind: "separator" },
-                    { title: t("mobile_detail_menu.note_revisions"), command: "showRevisions", uiIcon: "bx bx-history" },
-                    { kind: "separator" },
-                    subContexts.length < 2 && { title: t("create_pane_button.create_new_split"), command: "openNewNoteSplit", uiIcon: "bx bx-dock-right" },
-                    !isMainContext && { title: t("close_pane_button.close_this_pane"), command: "closeThisNoteSplit", uiIcon: "bx bx-x" }
-                ].filter(i => !!i) as MenuItem<keyof CommandMappings>[];
-
-                const lastItem = items.at(-1);
-                if (lastItem && "kind" in lastItem && lastItem.kind === "separator") {
-                    items.pop();
-                }
-
-                contextMenu.show<keyof CommandMappings>({
-                    x: e.pageX,
-                    y: e.pageY,
-                    items,
-                    selectMenuItemHandler: async ({ command }) => {
-                        if (command === "insertChildNote") {
-                            note_create.createNote(appContext.tabManager.getActiveContextNotePath() ?? undefined);
-                        } else if (command === "delete") {
-                            const notePath = appContext.tabManager.getActiveContextNotePath();
-                            if (!notePath) {
-                                throw new Error("Cannot get note path to delete.");
-                            }
-
-                            const branchId = await tree.getBranchIdFromUrl(notePath);
-
-                            if (!branchId) {
-                                throw new Error(t("mobile_detail_menu.error_cannot_get_branch_id", { notePath }));
-                            }
-
-                            if (await branches.deleteNotes([branchId]) && parentComponent) {
-                                parentComponent.triggerCommand("setActiveScreen", { screen: "tree" });
-                            }
-                        } else if (command && parentComponent) {
-                            parentComponent.triggerCommand(command, { ntxId });
-                        }
-                    },
-                    forcePositionOnMobile: true
-                });
-            }}
-        />
-    )
+            {createPortal((
+                <>
+                    <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 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"
+            size="md"
+            title={t("mobile_detail_menu.backlinks")}
+            show={modalShown}
+            onHidden={() => setModalShown(false)}
+        >
+            <ul className="backlinks-items">
+                {note && <BacklinksList note={note} />}
+            </ul>
+        </Modal>
+    );
+}
+
+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"
+            size="md"
+            title={t("note_paths.title")}
+            show={modalShown}
+            onHidden={() => setModalShown(false)}
+        >
+            {note && (
+                <NotePathsWidget
+                    sortedNotePaths={sortedNotePaths}
+                    currentNotePath={notePath}
+                />
+            )}
+        </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>
+    );
 }
--- a/apps/client/src/widgets/note_bars/CollectionProperties.css
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.css
@@ -1,5 +1,5 @@
 .collection-properties {
-    padding: 0;
+    padding: 0.55em 12px;
    display: flex;
    gap: 0.25em;
    align-items: center;
@@ -14,7 +14,31 @@
        }
    }

-    .spacer {
+    >div {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
+    .center-container {
        flex-grow: 1;
+        justify-content: center;
+    }
+
+    .right-container {
+        justify-content: flex-end;
+    }
+
+    button.btn {
+        min-width: 0;
+    }
+
+    @media (max-width: 991px) {
+        flex-wrap: wrap;
+        padding: 0.55em 1em;
+
+        >div {
+            flex-grow: 1;
+        }
    }
 }
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -1,24 +1,22 @@
 import "./CollectionProperties.css";

 import { t } from "i18next";
+import { ComponentChildren } from "preact";
 import { useContext, useRef } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";

 import FNote from "../../entities/fnote";
-import { getHelpUrlForNote } from "../../services/in_app_help";
-import { openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
-import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
 import FormTextBox from "../react/FormTextBox";
-import { useNoteLabel, useNoteLabelBoolean, useNoteLabelWithDefault, useTriliumEvent } from "../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useNoteLabelWithDefault, useNoteProperty, useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import { ParentComponent } from "../react/react_utils";
 import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";

-const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
+export const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
    grid: "bx bxs-grid",
    list: "bx bx-list-ul",
    calendar: "bx bx-calendar",
@@ -28,15 +26,26 @@ const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
    presentation: "bx bx-rectangle"
 };

-export default function CollectionProperties({ note }: { note: FNote }) {
+export default function CollectionProperties({ note, centerChildren, rightChildren }: {
+    note: FNote;
+    centerChildren?: ComponentChildren;
+    rightChildren?: ComponentChildren;
+}) {
    const [ viewType, setViewType ] = useViewType(note);
+    const noteType = useNoteProperty(note, "type");

-    return (
+    return ([ "book", "search" ].includes(noteType ?? "") &&
        <div className="collection-properties">
-            <ViewTypeSwitcher viewType={viewType} setViewType={setViewType} />
-            <ViewOptions note={note} viewType={viewType} />
-            <div className="spacer" />
-            <HelpButton note={note} />
+            <div className="left-container">
+                <ViewTypeSwitcher viewType={viewType} setViewType={setViewType} />
+                <ViewOptions note={note} viewType={viewType} />
+            </div>
+            <div className="center-container">
+                {centerChildren}
+            </div>
+            <div className="right-container">
+                {rightChildren}
+            </div>
        </div>
    );
 }
@@ -222,15 +231,3 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
        />
    );
 }
-
-function HelpButton({ note }: { note: FNote }) {
-    const helpUrl = getHelpUrlForNote(note);
-
-    return (helpUrl && (
-        <ActionButton
-            icon="bx bx-help-circle"
-            onClick={(() => openInAppHelpFromUrl(helpUrl))}
-            text={t("help-button.title")}
-        />
-    ));
-}
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -117,3 +117,35 @@ body.experimental-feature-new-layout {
        }
    }
 }
+
+body.mobile .modal.icon-switcher {
+    .modal-dialog {
+        left: 0;
+        right: 0;
+        margin: unset;
+        transform: unset;
+        max-width: 100%;
+        height: 100%;
+    }
+
+    .modal-body {
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+
+        > .filter-row {
+            padding: 0.25em var(--bs-modal-padding) 0.5em var(--bs-modal-padding);
+            border-bottom: 1px solid var(--main-border-color);
+        }
+    }
+
+    .icon-list {
+        margin: auto;
+        flex-grow: 1;
+        height: 100%;
+
+        span {
+            padding: 12px;
+        }
+    }
+}
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -4,18 +4,24 @@ import { IconRegistry } from "@triliumnext/commons";
 import { Dropdown as BootstrapDropdown } from "bootstrap";
 import clsx from "clsx";
 import { t } from "i18next";
-import { CSSProperties, RefObject } from "preact";
+import { CSSProperties } from "preact";
+import { createPortal } from "preact/compat";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import type React from "react";
 import { CellComponentProps, Grid } from "react-window";

 import FNote from "../entities/fnote";
 import attributes from "../services/attributes";
 import server from "../services/server";
+import { isDesktop, isMobile } from "../services/utils";
 import ActionButton from "./react/ActionButton";
 import Dropdown from "./react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "./react/FormList";
 import FormTextBox from "./react/FormTextBox";
-import { useNoteContext, useNoteLabel, useStaticTooltip } from "./react/hooks";
+import { useNoteContext, useNoteLabel, useStaticTooltip, useWindowSize } from "./react/hooks";
+import Modal from "./react/Modal";
+
+const ICON_SIZE = isMobile() ? 56 : 48;

 interface IconToCountCache {
    iconClassToCountMap: Record<string, number>;
@@ -36,6 +42,10 @@ export default function NoteIcon() {
        setIcon(note?.getIcon());
    }, [ note, iconClass, workspaceIconClass ]);

+    if (isMobile()) {
+        return <MobileNoteIconSwitcher note={note} icon={icon} />;
+    }
+
    return (
        <Dropdown
            className="note-icon-widget"
@@ -47,16 +57,47 @@ export default function NoteIcon() {
            hideToggleArrow
            disabled={viewScope?.viewMode !== "default"}
        >
-            { note && <NoteIconList note={note} dropdownRef={dropdownRef} /> }
+            { note && <NoteIconList note={note} onHide={() => dropdownRef?.current?.hide()} columnCount={12} /> }
        </Dropdown>
    );
 }

-function NoteIconList({ note, dropdownRef }: {
-    note: FNote,
-    dropdownRef: RefObject<BootstrapDropdown>;
+function MobileNoteIconSwitcher({ note, icon }: {
+    note: FNote | null | undefined;
+    icon: string | null | undefined;
+}) {
+    const [ modalShown, setModalShown ] = useState(false);
+    const { windowWidth } = useWindowSize();
+
+    return (note &&
+        <div className="note-icon-widget">
+            <ActionButton
+                className="note-icon"
+                icon={icon ?? "bx bx-empty"}
+                text={t("note_icon.change_note_icon")}
+                onClick={() => setModalShown(true)}
+            />
+
+            {createPortal((
+                <Modal
+                    title={t("note_icon.change_note_icon")}
+                    size="xl"
+                    show={modalShown} onHidden={() => setModalShown(false)}
+                    className="icon-switcher note-icon-widget"
+                    scrollable
+                >
+                    <NoteIconList note={note} onHide={() => setModalShown(false)} columnCount={Math.max(1, Math.floor(windowWidth / ICON_SIZE))} />
+                </Modal>
+            ), document.body)}
+        </div>
+    );
+}
+
+function NoteIconList({ note, onHide, columnCount }: {
+    note: FNote;
+    onHide: () => void;
+    columnCount: number;
 }) {
-    const searchBoxRef = useRef<HTMLInputElement>(null);
    const iconListRef = useRef<HTMLDivElement>(null);
    const [ search, setSearch ] = useState<string>();
    const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
@@ -72,53 +113,22 @@ function NoteIconList({ note, dropdownRef }: {

    return (
        <>
-            <div class="filter-row">
-                <span>{t("note_icon.search")}</span>
-                <FormTextBox
-                    inputRef={searchBoxRef}
-                    type="text"
-                    name="icon-search"
-                    placeholder={ filterByPrefix
-                        ? t("note_icon.search_placeholder_filtered", {
-                            number: filteredIcons.length ?? 0,
-                            name: glob.iconRegistry.sources.find(s => s.prefix === filterByPrefix)?.name ?? ""
-                        })
-                        : t("note_icon.search_placeholder", { number: filteredIcons.length ?? 0, count: glob.iconRegistry.sources.length })}
-                    currentValue={search} onChange={setSearch}
-                    autoFocus
-                />
-
-                {getIconLabels(note).length > 0 && (
-                    <div style={{ textAlign: "center" }}>
-                        <ActionButton
-                            icon="bx bx-reset"
-                            text={t("note_icon.reset-default")}
-                            onClick={() => {
-                                if (!note) return;
-                                for (const label of getIconLabels(note)) {
-                                    attributes.removeAttributeById(note.noteId, label.attributeId);
-                                }
-                                dropdownRef?.current?.hide();
-                            }}
-                        />
-                    </div>
-                )}
-
-                {glob.iconRegistry.sources.length > 0 && <Dropdown
-                    buttonClassName="bx bx-filter-alt"
-                    hideToggleArrow
-                    noSelectButtonStyle
-                    noDropdownListStyle
-                    iconAction
-                    title={t("note_icon.filter")}
-                >
-                    <IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
-                </Dropdown>}
-            </div>
+            <FilterRow
+                note={note}
+                filterByPrefix={filterByPrefix}
+                search={search}
+                setSearch={setSearch}
+                setFilterByPrefix={setFilterByPrefix}
+                filteredIcons={filteredIcons}
+                onHide={onHide}
+            />

            <div
                class="icon-list"
                ref={iconListRef}
+                style={{
+                    width: (columnCount * ICON_SIZE + 10),
+                }}
                onClick={(e) => {
                    // Make sure we are not clicking on something else than a button.
                    const clickedTarget = e.target as HTMLElement;
@@ -129,18 +139,19 @@ function NoteIconList({ note, dropdownRef }: {
                        const attributeToSet = note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass";
                        attributes.setLabel(note.noteId, attributeToSet, iconClass);
                    }
-                    dropdownRef?.current?.hide();
+                    onHide();
                }}
            >
                {filteredIcons.length ? (
                    <Grid
-                        columnCount={12}
-                        columnWidth={48}
-                        rowCount={Math.ceil(filteredIcons.length / 12)}
-                        rowHeight={48}
+                        columnCount={columnCount}
+                        columnWidth={ICON_SIZE}
+                        rowCount={Math.ceil(filteredIcons.length / columnCount)}
+                        rowHeight={ICON_SIZE}
                        cellComponent={IconItemCell}
                        cellProps={{
-                            filteredIcons
+                            filteredIcons,
+                            columnCount
                        }}
                    />
                ) : (
@@ -151,12 +162,97 @@ function NoteIconList({ note, dropdownRef }: {
    );
 }

-function IconItemCell({ rowIndex, columnIndex, style, filteredIcons }: CellComponentProps<{
+function FilterRow({ note, filterByPrefix, search, setSearch, setFilterByPrefix, filteredIcons, onHide }: {
+    note: FNote;
+    filterByPrefix: string | null;
+    search: string | undefined;
+    setSearch: (value: string | undefined) => void;
+    setFilterByPrefix: (value: string | null) => void;
    filteredIcons: IconWithName[];
-}>): React.JSX.Element {
-    const iconIndex = rowIndex * 12 + columnIndex;
+    onHide: () => void;
+}) {
+    const searchBoxRef = useRef<HTMLInputElement>(null);
+    const hasCustomIcon = getIconLabels(note).length > 0;
+
+    function resetToDefaultIcon() {
+        if (!note) return;
+        for (const label of getIconLabels(note)) {
+            attributes.removeAttributeById(note.noteId, label.attributeId);
+        }
+        onHide();
+    }
+
+    return (
+        <div class="filter-row">
+            <span>{t("note_icon.search")}</span>
+            <FormTextBox
+                inputRef={searchBoxRef}
+                type="text"
+                name="icon-search"
+                placeholder={ filterByPrefix
+                    ? t("note_icon.search_placeholder_filtered", {
+                        number: filteredIcons.length ?? 0,
+                        name: glob.iconRegistry.sources.find(s => s.prefix === filterByPrefix)?.name ?? ""
+                    })
+                    : t("note_icon.search_placeholder", { number: filteredIcons.length ?? 0, count: glob.iconRegistry.sources.length })}
+                currentValue={search} onChange={setSearch}
+                autoFocus
+            />
+
+            {isDesktop()
+                ? <>
+                    {hasCustomIcon && (
+                        <div style={{ textAlign: "center" }}>
+                            <ActionButton
+                                icon="bx bx-reset"
+                                text={t("note_icon.reset-default")}
+                                onClick={resetToDefaultIcon}
+                            />
+                        </div>
+                    )}
+
+                    {<Dropdown
+                        buttonClassName="bx bx-filter-alt"
+                        hideToggleArrow
+                        noSelectButtonStyle
+                        noDropdownListStyle
+                        iconAction
+                        title={t("note_icon.filter")}
+                    >
+                        <IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
+                    </Dropdown>}
+                </> : (
+                    <Dropdown
+                        buttonClassName="bx bx-dots-vertical-rounded"
+                        hideToggleArrow
+                        noSelectButtonStyle
+                        noDropdownListStyle
+                        iconAction
+                        dropdownContainerClassName="mobile-bottom-menu"
+                    >
+                        {hasCustomIcon && <>
+                            <FormListItem
+                                icon="bx bx-reset"
+                                onClick={resetToDefaultIcon}
+                                disabled={!hasCustomIcon}
+                            >{t("note_icon.reset-default")}</FormListItem>
+                            <FormDropdownDivider />
+                        </>}
+
+                        <IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
+                    </Dropdown>
+                )}
+        </div>
+    );
+}
+
+function IconItemCell({ rowIndex, columnIndex, style, filteredIcons, columnCount }: CellComponentProps<{
+    filteredIcons: IconWithName[];
+    columnCount: number;
+}>) {
+    const iconIndex = rowIndex * columnCount + columnIndex;
    const iconData = filteredIcons[iconIndex] as IconWithName | undefined;
-    if (!iconData) return <></>;
+    if (!iconData) return <></> as React.ReactElement;

    const { id, terms, iconPack } = iconData;
    return (
@@ -166,7 +262,7 @@ function IconItemCell({ rowIndex, columnIndex, style, filteredIcons }: CellCompo
            title={t("note_icon.icon_tooltip", { name: terms?.[0] ?? id, iconPack })}
            style={style as CSSProperties}
        />
-    );
+    ) as React.ReactElement;
 }

 function IconFilterContent({ filterByPrefix, setFilterByPrefix }: {
@@ -183,7 +279,7 @@ function IconFilterContent({ filterByPrefix, setFilterByPrefix }: {
                checked={filterByPrefix === "bx"}
                onClick={() => setFilterByPrefix("bx")}
            >{t("note_icon.filter-default")}</FormListItem>
-            <FormDropdownDivider />
+            {glob.iconRegistry.sources.length > 1 && <FormDropdownDivider />}

            {glob.iconRegistry.sources.map(({ prefix, name, icon }) => (
                prefix !== "bx" && <FormListItem
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -109,4 +109,29 @@ body.experimental-feature-new-layout {
            --input-focus-color: initial;
        }
    }
+
+    &.mobile .title-row {
+        .icon-action:not(.note-icon) {
+            --icon-button-size: 45px;
+            --icon-button-icon-ratio: 0.5;
+            flex-shrink: 0;
+        }
+
+        .note-actions {
+            width: auto;
+        }
+
+        .note-badges {
+            margin-inline: 0.5em;
+            flex-shrink: 0;
+        }
+
+        .note-icon-widget {
+            margin-inline: 0.5em;
+
+            .note-icon {
+                --icon-button-size: 24px;
+            }
+        }
+    }
 }
--- a/apps/client/src/widgets/note_tree.css
+++ b/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;
--- a/apps/client/src/widgets/note_tree.ts
+++ b/apps/client/src/widgets/note_tree.ts
@@ -523,46 +523,59 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                    const dataTransfer = data.dataTransfer;

                    if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
-                        const files = [...dataTransfer.files]; // chrome has issue that dataTransfer.files empties after async operation
+                        const files: File[] = [...dataTransfer.files]; // chrome has issue that dataTransfer.files empties after async operation

                        const importService = await import("../services/import.js");
+                        const isTriliumImport = files.every(f => f.name.endsWith(".trilium"));
+                        const parentNoteId = node.data.noteId;

-                        importService.uploadFiles("notes", node.data.noteId, files, {
-                            safeImport: true,
-                            shrinkImages: true,
-                            textImportedAsText: true,
-                            codeImportedAsCode: true,
-                            explodeArchives: true,
-                            replaceUnderscoresWithSpaces: true
-                        });
-                    } else {
-                        const jsonStr = dataTransfer.getData("text");
-                        let notes: BranchRow[];
-
-                        try {
-                            notes = JSON.parse(jsonStr);
-                        } catch (e) {
-                            logError(`Cannot parse JSON '${jsonStr}' into notes for drop`);
+                        if (!isTriliumImport) {
+                            importService.uploadFiles("notes", parentNoteId, files, {
+                                safeImport: true,
+                                shrinkImages: true,
+                                textImportedAsText: true,
+                                codeImportedAsCode: true,
+                                explodeArchives: true,
+                                replaceUnderscoresWithSpaces: true
+                            });
+                        } else {
+                            importService.uploadFilesWithPreview(parentNoteId, files).then((previews) => {
+                                if (!previews) return;
+                                this.triggerCommand("showImportPreviewDialog", {
+                                    parentNoteId,
+                                    previews
+                                });
+                            });
                            return;
                        }
-
-                        // This function MUST be defined to enable dropping of items on the tree.
-                        // data.hitMode is 'before', 'after', or 'over'.
-
-                        const selectedBranchIds = notes
-                            .map((note) => note.branchId)
-                            .filter((branchId) => branchId) as string[];
-
-                        if (data.hitMode === "before") {
-                            branchService.moveBeforeBranch(selectedBranchIds, node.data.branchId);
-                        } else if (data.hitMode === "after") {
-                            branchService.moveAfterBranch(selectedBranchIds, node.data.branchId);
-                        } else if (data.hitMode === "over") {
-                            branchService.moveToParentNote(selectedBranchIds, node.data.branchId, this.componentId);
-                        } else {
-                            throw new Error(`Unknown hitMode '${data.hitMode}'`);
-                        }
                    }
+                    const jsonStr = dataTransfer.getData("text");
+                    let notes: BranchRow[];
+
+                    try {
+                        notes = JSON.parse(jsonStr);
+                    } catch (e) {
+                        logError(`Cannot parse JSON '${jsonStr}' into notes for drop`);
+                        return;
+                    }
+
+                    // This function MUST be defined to enable dropping of items on the tree.
+                    // data.hitMode is 'before', 'after', or 'over'.
+
+                    const selectedBranchIds = notes
+                        .map((note) => note.branchId)
+                        .filter((branchId) => branchId) as string[];
+
+                    if (data.hitMode === "before") {
+                        branchService.moveBeforeBranch(selectedBranchIds, node.data.branchId);
+                    } else if (data.hitMode === "after") {
+                        branchService.moveAfterBranch(selectedBranchIds, node.data.branchId);
+                    } else if (data.hitMode === "over") {
+                        branchService.moveToParentNote(selectedBranchIds, node.data.branchId, this.componentId);
+                    } else {
+                        throw new Error(`Unknown hitMode '${data.hitMode}'`);
+                    }
+
                }
            },
            lazyLoad: (event, data) => {
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from "preact/hooks";
-import { CommandNames } from "../../components/app_context";
-import { useStaticTooltip } from "./hooks";
-import keyboard_actions from "../../services/keyboard_actions";
 import { HTMLAttributes } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";

-export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu"> {
+import { CommandNames } from "../../components/app_context";
+import keyboard_actions from "../../services/keyboard_actions";
+import { useStaticTooltip } from "./hooks";
+
+export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu" | "style"> {
    text: string;
    titlePosition?: "top" | "right" | "bottom" | "left";
    icon: string;
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -1,8 +1,11 @@
 import type { ComponentChildren, RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
-import { useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
+import { useMemo } from "preact/hooks";
+
 import { CommandNames } from "../../components/app_context";
+import { isDesktop } from "../../services/utils";
+import ActionButton from "./ActionButton";
 import Icon from "./Icon";

 export interface ButtonProps {
@@ -78,7 +81,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
        <div className="btn-group" role="group">
            {children}
        </div>
-    )
+    );
 }

 export function SplitButton({ text, icon, children, ...restProps }: {
@@ -103,7 +106,17 @@ export function SplitButton({ text, icon, children, ...restProps }: {
                {children}
            </ul>
        </ButtonGroup>
-    )
+    );
+}
+
+export function ButtonOrActionButton(props: {
+    text: string;
+    icon: string;
+} & Pick<ButtonProps, "onClick" | "triggerCommand" | "disabled" | "title">) {
+    if (isDesktop()) {
+        return <Button {...props} />;
+    }
+    return <ActionButton {...props} />;
 }

 export default Button;
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import type { ComponentChildren } from "preact";
+
+export function Card({ title, className, children }: {
+    title: string;
+    children: ComponentChildren;
+    className?: string;
+}) {
+    return (
+        <div className={clsx("card", className)}>
+            <div className="card-body">
+                <h5 className="card-title">{title}</h5>
+
+                <p className="card-text">
+                    {children}
+                </p>
+            </div>
+        </div>
+    );
+}
--- a/apps/client/src/widgets/react/Collapsible.css
+++ b/apps/client/src/widgets/react/Collapsible.css
@@ -17,21 +17,34 @@
    .collapsible-body {
        height: 0;
        overflow: hidden;
+
+        &.fully-expanded {
+            overflow: visible;
+        }
    }

    .collapsible-inner-body {
        padding-top: 0.5em;
+        opacity: 0;
    }

    &.expanded {
        .collapsible-title .arrow {
            transform: rotate(90deg);
        }
+
+        .collapsible-inner-body {
+            opacity: 1;
+        }
    }

    &.with-transition {
        .collapsible-body {
            transition: height 250ms ease-in;
        }
+
+        .collapsible-inner-body {
+            transition: opacity 250ms ease-in;
+        }
    }
 }
--- a/apps/client/src/widgets/react/Collapsible.tsx
+++ b/apps/client/src/widgets/react/Collapsible.tsx
@@ -27,6 +27,7 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
    const { height } = useElementSize(innerRef) ?? {};
    const contentId = useUniqueName();
    const [ transitionEnabled, setTransitionEnabled ] = useState(false);
+    const [ fullyExpanded, setFullyExpanded ] = useState(false);

    useEffect(() => {
        const timeout = setTimeout(() => {
@@ -35,6 +36,21 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
        return () => clearTimeout(timeout);
    }, []);

+    useEffect(() => {
+        if (expanded) {
+            if (transitionEnabled) {
+                const timeout = setTimeout(() => {
+                    setFullyExpanded(true);
+                }, 250);
+                return () => clearTimeout(timeout);
+            } else {
+                setFullyExpanded(true);
+            }
+        } else {
+            setFullyExpanded(false);
+        }
+    }, [expanded, transitionEnabled])
+
    return (
        <div className={clsx("collapsible", className, {
            expanded,
@@ -53,7 +69,7 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
            <div
                id={contentId}
                ref={bodyRef}
-                className="collapsible-body"
+                className={clsx("collapsible-body", {"fully-expanded": fullyExpanded})}
                style={{ height: expanded ? height : "0" }}
                aria-hidden={!expanded}
            >
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -3,6 +3,7 @@ import { ComponentChildren, HTMLAttributes } from "preact";
 import { CSSProperties, HTMLProps } from "preact/compat";
 import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";

+import { isMobile } from "../../services/utils";
 import { useTooltip, useUniqueName } from "./hooks";

 type DataAttributes = {
@@ -32,9 +33,10 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
    dropdownRef?: MutableRef<BootstrapDropdown | null>;
    titlePosition?: "top" | "right" | "bottom" | "left";
    titleOptions?: Partial<Tooltip.Options>;
+    mobileBackdrop?: boolean;
 }

-export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, dropdownContainerRef: externalContainerRef, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef, titlePosition, titleOptions }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, dropdownContainerRef: externalContainerRef, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef, titlePosition, titleOptions, mobileBackdrop }: DropdownProps) {
    const containerRef = useRef<HTMLDivElement | null>(null);
    const triggerRef = useRef<HTMLButtonElement | null>(null);
    const dropdownContainerRef = useRef<HTMLUListElement | null>(null);
@@ -74,12 +76,18 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
        setShown(true);
        externalOnShown?.();
        hideTooltip();
-    }, [ hideTooltip ]);
+        if (mobileBackdrop && isMobile()) {
+            document.getElementById("context-menu-cover")?.classList.add("show", "global-menu-cover");
+        }
+    }, [ hideTooltip, mobileBackdrop ]);

    const onHidden = useCallback(() => {
        setShown(false);
        externalOnHidden?.();
-    }, []);
+        if (mobileBackdrop && isMobile()) {
+            document.getElementById("context-menu-cover")?.classList.remove("show", "global-menu-cover");
+        }
+    }, [ mobileBackdrop ]);

    useEffect(() => {
        if (!containerRef.current) return;
--- a/apps/client/src/widgets/react/FormFileUpload.tsx
+++ b/apps/client/src/widgets/react/FormFileUpload.tsx
@@ -3,8 +3,9 @@ import { useEffect, useRef } from "preact/hooks";

 import ActionButton, { ActionButtonProps } from "./ActionButton";
 import Button, { ButtonProps } from "./Button";
+import { FormListItem, FormListItemOpts } from "./FormList";

-interface FormFileUploadProps {
+export interface FormFileUploadProps {
    name?: string;
    onChange: (files: FileList | null) => void;
    multiple?: boolean;
@@ -75,3 +76,25 @@ export function FormFileUploadActionButton({ onChange, ...buttonProps }: Omit<Ac
        </>
    );
 }
+
+/**
+ * Similar to {@link FormFileUploadButton}, but uses an {@link FormListItem} instead of a normal {@link Button}.
+ * @param param the change listener for the file upload and the properties for the button.
+ */
+export function FormFileUploadFormListItem({ onChange, children, ...buttonProps }: Omit<FormListItemOpts, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <>
+            <FormListItem
+                {...buttonProps}
+                onClick={() => inputRef.current?.click()}
+            >{children}</FormListItem>
+            <FormFileUpload
+                inputRef={inputRef}
+                hidden
+                onChange={onChange}
+            />
+        </>
+    );
+}
--- a/apps/client/src/widgets/react/FormList.css
+++ b/apps/client/src/widgets/react/FormList.css
@@ -27,3 +27,13 @@
        }
    }
 }
+
+.form-list-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+
+    .form-list-col {
+        flex-grow: 1;
+    }
+}
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -78,7 +78,7 @@ export interface FormListBadge {
    text: string;
 }

-interface FormListItemOpts {
+export interface FormListItemOpts {
    children: ComponentChildren;
    icon?: string;
    value?: string;
--- a/apps/client/src/widgets/react/Icon.tsx
+++ b/apps/client/src/widgets/react/Icon.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { HTMLAttributes } from "preact";

-interface IconProps extends Pick<HTMLAttributes<HTMLSpanElement>, "className" | "onClick"> {
+interface IconProps extends Pick<HTMLAttributes<HTMLSpanElement>, "className" | "onClick" | "title"> {
    icon?: string;
    className?: string;
 }
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -1,17 +1,17 @@
-import clsx from "clsx";
-import { useEffect, useRef, useMemo } from "preact/hooks";
-import { t } from "../../services/i18n";
-import { ComponentChildren } from "preact";
-import type { CSSProperties, RefObject } from "preact/compat";
-import { openDialog } from "../../services/dialog";
 import { Modal as BootstrapModal } from "bootstrap";
+import clsx from "clsx";
+import { ComponentChildren, CSSProperties, RefObject } from "preact";
 import { memo } from "preact/compat";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+
+import { openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
 import { useSyncedRef } from "./hooks";

 interface CustomTitleBarButton {
    title: string;
    iconClassName: string;
-    onClick: () => void;
+    onClick: (e: MouseEvent) => void;
 }

 export interface ModalProps {
@@ -80,7 +80,7 @@ export interface ModalProps {
    noFocus?: boolean;
 }

-export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
+export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
    const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
    const modalInstanceRef = useRef<BootstrapModal>();
    const elementToFocus = useRef<Element | null>();
@@ -116,7 +116,7 @@ export default function Modal({ children, className, size, title, customTitleBar
                focus: !noFocus
            }).then(($widget) => {
                modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
-            })
+            });
        } else {
            modalInstanceRef.current?.hide();
        }
@@ -159,13 +159,12 @@ export default function Modal({ children, className, size, title, customTitleBar

                        {titleBarButtons?.filter((b) => b !== null).map((titleBarButton) => (
                            <button type="button"
-                                    className={clsx("custom-title-bar-button bx", titleBarButton.iconClassName)}
-                                    title={titleBarButton.title}
-                                    onClick={titleBarButton.onClick}>
-                            </button>
+                                className={clsx("custom-title-bar-button bx", titleBarButton.iconClassName)}
+                                title={titleBarButton.title}
+                                onClick={titleBarButton.onClick} />
                        ))}

-                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")}></button>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")} />

                    </div>

--- a/apps/client/src/widgets/react/ResponsiveContainer.tsx
+++ b/apps/client/src/widgets/react/ResponsiveContainer.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);
+}
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/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;
+
 }
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -1,6 +1,6 @@
 import { ConvertToAttachmentResponse } from "@triliumnext/commons";
 import { Dropdown as BootstrapDropdown } from "bootstrap";
-import { RefObject } from "preact";
+import { ComponentChildren, RefObject } from "preact";
 import { useContext, useEffect, useRef } from "preact/hooks";

 import appContext, { CommandNames } from "../../components/app_context";
@@ -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,14 @@ function RevisionsButton({ note }: { note: FNote }) {

 type ItemToFocus = "basic-properties";

-function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: NoteContext }) {
-    const dropdownRef = useRef<BootstrapDropdown>(null);
+export function NoteContextMenu({ note, noteContext, itemsAtStart, itemsNearNoteSettings, dropdownRef: externalDropdownRef }: {
+    note: FNote,
+    noteContext?: NoteContext,
+    itemsAtStart?: ComponentChildren;
+    itemsNearNoteSettings?: ComponentChildren;
+    dropdownRef?: RefObject<BootstrapDropdown>;
+}) {
+    const dropdownRef = useSyncedRef<BootstrapDropdown>(externalDropdownRef, null);
    const parentComponent = useContext(ParentComponent);
    const noteType = useNoteProperty(note, "type") ?? "";
    const [viewType] = useNoteLabel(note, "viewType");
@@ -99,12 +105,15 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
            dropdownRef={dropdownRef}
            buttonClassName={ isNewLayout ? "bx bx-dots-horizontal-rounded" : "bx bx-dots-vertical-rounded" }
            className="note-actions"
+            dropdownContainerClassName="mobile-bottom-menu"
            hideToggleArrow
            noSelectButtonStyle
            noDropdownListStyle
            iconAction
            onHidden={() => itemToFocusRef.current = null }
+            mobileBackdrop
        >
+            {itemsAtStart}

            {isReadOnly && <>
                <CommandItem icon="bx bx-pencil" text={t("read-only-info.edit-note")}
@@ -123,6 +132,8 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
                <FormDropdownDivider />
            </>}

+            {itemsNearNoteSettings}
+
            <CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
                disabled={isInOptionsOrHelp || note.type === "search"}
                command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
@@ -277,7 +288,7 @@ function DevelopmentActions({ note, noteContext }: { note: FNote, noteContext?:
    );
 }

-function CommandItem({ icon, text, title, command, disabled }: { icon: string, text: string, title?: string, command: CommandNames | (() => void), disabled?: boolean, destructive?: boolean }) {
+export function CommandItem({ icon, text, title, command, disabled }: { icon: string, text: string, title?: string, command: CommandNames | (() => void), disabled?: boolean, destructive?: boolean }) {
    return <FormListItem
        icon={icon}
        title={title}
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.css
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.css
@@ -0,0 +1,3 @@
+body.mobile .note-actions-custom:not(:empty) {
+    margin-bottom: calc(var(--bs-dropdown-divider-margin-y) * 2);
+}
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -1,3 +1,5 @@
+import "./NoteActionsCustom.css";
+
 import { NoteType } from "@triliumnext/commons";
 import { useContext, useEffect, useRef, useState } from "preact/hooks";

@@ -7,11 +9,12 @@ import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { getHelpUrlForNote } from "../../services/in_app_help";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
-import { openInAppHelpFromUrl } from "../../services/utils";
+import { isMobile, openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
 import { buildSaveSqlToNoteHandler } from "../FloatingButtonsDefinitions";
-import ActionButton from "../react/ActionButton";
-import { FormFileUploadActionButton } from "../react/FormFileUpload";
+import ActionButton, { ActionButtonProps } from "../react/ActionButton";
+import { FormFileUploadActionButton, FormFileUploadFormListItem, FormFileUploadProps } from "../react/FormFileUpload";
+import { FormListItem } from "../react/FormList";
 import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
 import { buildUploadNewFileRevisionListener } from "./FilePropertiesTab";
@@ -32,6 +35,8 @@ interface NoteActionsCustomInnerProps extends NoteActionsCustomProps {
    viewType: ViewTypeOptions | null | undefined;
 }

+const cachedIsMobile = isMobile();
+
 /**
 * Part of {@link NoteActions} on the new layout, but are rendered with a slight spacing
 * from the rest of the note items and the buttons differ based on the note type.
@@ -115,7 +120,7 @@ function UploadNewRevisionButton({ note, onChange }: NoteActionsCustomInnerProps
    onChange: (files: FileList | null) => void;
 }) {
    return (
-        <FormFileUploadActionButton
+        <NoteActionWithFileUpload
            icon="bx bx-folder-open"
            text={t("image_properties.upload_new_revision")}
            disabled={!note.isContentAvailable()}
@@ -125,8 +130,8 @@ function UploadNewRevisionButton({ note, onChange }: NoteActionsCustomInnerProps
 }

 function OpenExternallyButton({ note, noteMime }: NoteActionsCustomInnerProps) {
-    return (
-        <ActionButton
+    return (!cachedIsMobile &&
+        <NoteAction
            icon="bx bx-link-external"
            text={t("file_properties.open")}
            disabled={note.isProtected}
@@ -137,7 +142,7 @@ function OpenExternallyButton({ note, noteMime }: NoteActionsCustomInnerProps) {

 function DownloadFileButton({ note, parentComponent, ntxId }: NoteActionsCustomInnerProps) {
    return (
-        <ActionButton
+        <NoteAction
            icon="bx bx-download"
            text={t("file_properties.download")}
            disabled={!note.isContentAvailable()}
@@ -149,7 +154,7 @@ function DownloadFileButton({ note, parentComponent, ntxId }: NoteActionsCustomI
 //#region Floating buttons
 function CopyReferenceToClipboardButton({ ntxId, noteType, parentComponent }: NoteActionsCustomInnerProps) {
    return (["mermaid", "canvas", "mindMap", "image"].includes(noteType) &&
-        <ActionButton
+        <NoteAction
            text={t("image_properties.copy_reference_to_clipboard")}
            icon="bx bx-copy"
            onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
@@ -161,7 +166,7 @@ function RefreshButton({ note, noteType, isDefaultViewMode, parentComponent, not
    const isEnabled = (note.noteId === "_backendLog" || noteType === "render") && isDefaultViewMode;

    return (isEnabled &&
-        <ActionButton
+        <NoteAction
            text={t("backend_log.refresh")}
            icon="bx bx-refresh"
            onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
@@ -170,11 +175,11 @@ function RefreshButton({ note, noteType, isDefaultViewMode, parentComponent, not
 }

 function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: NoteActionsCustomInnerProps) {
-    const isShown = note.type === "mermaid" && note.isContentAvailable() && isDefaultViewMode;
+    const isShown = note.type === "mermaid" && !cachedIsMobile && note.isContentAvailable() && isDefaultViewMode;
    const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
    const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";

-    return isShown && <ActionButton
+    return isShown && <NoteAction
        text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
        onClick={() => setSplitEditorOrientation(upcomingOrientation)}
@@ -182,13 +187,13 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: N
    />;
 }

-function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: NoteActionsCustomInnerProps) {
+export function ToggleReadOnlyButton({ note, isDefaultViewMode }: NoteActionsCustomInnerProps) {
    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
    const isSavedSqlite = note.isTriliumSqlite() && !note.isHiddenCompletely();
-    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap" || isSavedSqlite)
+    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || isSavedSqlite)
            && note.isContentAvailable() && isDefaultViewMode;

-    return isEnabled && <ActionButton
+    return isEnabled && <NoteAction
        text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
        icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
        onClick={() => setReadOnly(!isReadOnly)}
@@ -197,7 +202,7 @@ function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: NoteActions

 function RunActiveNoteButton({ noteMime }: NoteActionsCustomInnerProps) {
    const isEnabled = noteMime.startsWith("application/javascript") || noteMime === "text/x-sqlite;schema=trilium";
-    return isEnabled && <ActionButton
+    return isEnabled && <NoteAction
        icon="bx bx-play"
        text={t("code_buttons.execute_button_title")}
        triggerCommand="runActiveNote"
@@ -218,7 +223,7 @@ function SaveToNoteButton({ note, noteMime }: NoteActionsCustomInnerProps) {
        }
    });

-    return isEnabled && <ActionButton
+    return isEnabled && <NoteAction
        icon="bx bx-save"
        text={t("code_buttons.save_to_note_button_title")}
        onClick={buildSaveSqlToNoteHandler(note)}
@@ -227,19 +232,19 @@ function SaveToNoteButton({ note, noteMime }: NoteActionsCustomInnerProps) {

 function OpenTriliumApiDocsButton({ noteMime }: NoteActionsCustomInnerProps) {
    const isEnabled = noteMime.startsWith("application/javascript;env=");
-    return isEnabled && <ActionButton
+    return isEnabled && <NoteAction
        icon="bx bx-help-circle"
        text={t("code_buttons.trilium_api_docs_button_title")}
        onClick={() => openInAppHelpFromUrl(noteMime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
    />;
 }

-function InAppHelpButton({ note, noteType }: NoteActionsCustomInnerProps) {
+function InAppHelpButton({ note }: NoteActionsCustomInnerProps) {
    const helpUrl = getHelpUrlForNote(note);
-    const isEnabled = !!helpUrl && (noteType !== "book");
+    const isEnabled = !!helpUrl;

    return isEnabled && (
-        <ActionButton
+        <NoteAction
            icon="bx bx-help-circle"
            text={t("help-button.title")}
            onClick={() => helpUrl && openInAppHelpFromUrl(helpUrl)}
@@ -247,16 +252,9 @@ function InAppHelpButton({ note, noteType }: NoteActionsCustomInnerProps) {
    );
 }

-function AddChildButton({ parentComponent, noteType, viewType, ntxId, isReadOnly }: NoteActionsCustomInnerProps) {
-    if (noteType === "book" && viewType === "geoMap") {
-        return <ActionButton
-            icon="bx bx-plus-circle"
-            text={t("geo-map.create-child-note-title")}
-            onClick={() => parentComponent.triggerEvent("geoMapCreateChildNote", { ntxId })}
-            disabled={isReadOnly}
-        />;
-    } else if (noteType === "relationMap") {
-        return <ActionButton
+function AddChildButton({ parentComponent, noteType, ntxId, isReadOnly }: NoteActionsCustomInnerProps) {
+    if (noteType === "relationMap") {
+        return <NoteAction
            icon="bx bx-folder-plus"
            text={t("relation_map_buttons.create_child_note_title")}
            onClick={() => parentComponent.triggerEvent("relationMapCreateChildNote", { ntxId })}
@@ -265,3 +263,19 @@ function AddChildButton({ parentComponent, noteType, viewType, ntxId, isReadOnly
    }
 }
 //#endregion
+
+function NoteAction({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & {
+    onClick?: ((e: MouseEvent) => void) | undefined;
+}) {
+    return (cachedIsMobile
+        ? <FormListItem {...props}>{text}</FormListItem>
+        : <ActionButton text={text} {...props} />
+    );
+}
+
+function NoteActionWithFileUpload({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & Pick<FormFileUploadProps, "onChange">) {
+    return (cachedIsMobile
+        ? <FormFileUploadFormListItem {...props}>{text}</FormFileUploadFormListItem>
+        : <FormFileUploadActionButton text={text} {...props} />
+    );
+}
--- a/apps/client/src/widgets/ribbon/NotePathsTab.css
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.css
@@ -0,0 +1,63 @@
+body.experimental-feature-new-layout .note-paths-widget {
+    .note-path-intro {
+        color: var(--muted-text-color);
+    }
+
+    .note-path-list {
+        margin: 12px 0;
+        padding: 0;
+        list-style: none;
+
+        /* Note path card */
+        li {
+            --border-radius: 6px;
+
+            position: relative;
+            background: var(--card-background-color);
+            padding: 8px 20px 8px 25px;
+
+            &:first-child {
+                border-radius: var(--border-radius) var(--border-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--border-radius) var(--border-radius);
+            }
+
+            & + li {
+                margin-top: 2px;
+            }
+
+            /* Current path arrow */
+            &.path-current::before {
+                position: absolute;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                content: "\ee8f";
+                top: 0;
+                left: 0;
+                width: 20px;
+                bottom: 0;
+                font-family: "boxicons";
+                font-size: .75em;
+                color: var(--menu-item-icon-color);
+            }
+        }
+
+        /* Note path segment */
+        a {
+            margin-inline: 2px;
+            padding-inline: 2px;
+            color: currentColor;
+            font-weight: normal;
+            text-decoration: none;
+
+            /* The last segment of the note path */
+            &.basename {
+                color: var(--muted-text-color);
+            }
+        }
+
+    }
+}
--- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
@@ -1,15 +1,16 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import "./NotePathsTab.css";
+
+import clsx from "clsx";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";

 import FNote, { NotePathRecord } from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
 import { useTriliumEvent } from "../react/hooks";
-import NoteLink from "../react/NoteLink";
-import { joinElements } from "../react/react_utils";
-import { TabContext } from "./ribbon-interface";
 import LinkButton from "../react/LinkButton";
-import clsx from "clsx";
-
+import NoteLink from "../react/NoteLink";
+import { joinElements, ParentComponent } from "../react/react_utils";
+import { TabContext } from "./ribbon-interface";

 export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
    const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
@@ -20,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">
            <>
@@ -39,7 +41,7 @@ export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {

                <LinkButton
                    text={t("note_paths.clone_button")}
-                    triggerCommand="cloneNoteIdsTo"
+                    onClick={() => parentComponent?.triggerCommand("cloneNoteIdsTo")}
                />
            </>
        </div>
@@ -112,9 +114,9 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
        <li class={classes}>
            {joinElements(fullNotePaths.map((notePath, index, arr) => (
                <NoteLink key={notePath}
-                          className={clsx({"basename": (index === arr.length - 1)})}
-                          notePath={notePath}
-                          noPreview />
+                    className={clsx({"basename": (index === arr.length - 1)})}
+                    notePath={notePath}
+                    noPreview />
            )), NOTE_PATH_TITLE_SEPARATOR)}

            {icons.map(({ icon, title }) => (
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -2,12 +2,12 @@ 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";
 import attributes from "../../services/attributes";
 import bulk_action, { ACTION_GROUPS } from "../../services/bulk_action";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import froca from "../../services/froca";
 import { t } from "../../services/i18n";
 import server from "../../services/server";
@@ -16,18 +16,16 @@ import tree from "../../services/tree";
 import { getErrorMessage } from "../../services/utils";
 import ws from "../../services/ws";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
-import CollectionProperties from "../note_bars/CollectionProperties";
-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/ResponsiveContainer";
 import { TabContext } from "./ribbon-interface";
 import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";

-const isNewLayout = isExperimentalFeatureEnabled("new-layout");
-
 export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabContext, "note" | "ntxId" | "hidden">) {
    const parentComponent = useContext(ParentComponent);
    const [ searchOptions, setSearchOptions ] = useState<{ availableOptions: SearchOption[], activeOptions: SearchOption[] }>();
@@ -88,15 +86,32 @@ 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 }) => (
+                                            <Button
+                                                key={`${attributeType}-${attributeName}`}
+                                                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 }) => (
+                                                    <FormListItem
+                                                        key={`${attributeType}-${attributeName}`}
+                                                        icon={icon}
+                                                        description={tooltip}
+                                                        onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                                                    >{label}</FormListItem>
+                                                ))}
+                                            </Dropdown>
+                                        }
+                                    />

                                    <AddBulkActionButton note={note} />
                                </td>
@@ -115,55 +130,9 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
                                    defaultValue={defaultValue}
                                />;
                            })}
-
-                            {isNewLayout && <tr className="view-options">
-                                <td className="title-column">{t("search_definition.view_options")}</td>
-                                <td><CollectionProperties note={note} /></td>
-                            </tr>}
                        </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>
@@ -171,6 +140,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[]>();

@@ -203,15 +222,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>
    );
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -459,7 +459,7 @@ body.experimental-feature-new-layout {
            gap: var(--button-gap);

            &> button:last-of-type {
-                margin-right: 1em;
+                margin-right: 0.5em;
            }
        }
    }
--- a/Show More
+++ b/Show More