diff --git a/apps/client/src/layouts/mobile_layout.css b/apps/client/src/layouts/mobile_layout.css
index 701d261ffd..d07864c476 100644
--- a/apps/client/src/layouts/mobile_layout.css
+++ b/apps/client/src/layouts/mobile_layout.css
@@ -27,3 +27,50 @@ kbd {
max-width: 350px;
}
+/* #region Tree (non-standalone mobile: Fancytree-based) */
+.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 */
diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 5f23c0fbee..c78ee13543 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -1,6 +1,7 @@
import "./mobile_layout.css";
import type AppContext from "../components/app_context.js";
+import { isMobileApp } from "../services/utils";
import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
import CloseZenModeButton from "../widgets/close_zen_button.js";
import NoteList from "../widgets/collections/NoteList.jsx";
@@ -21,10 +22,10 @@ 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 QuickSearchWidget from "../widgets/quick_search.js";
-import { isMobileApp } from "../services/utils";
import ScrollPadding from "../widgets/scroll_padding";
import SearchResult from "../widgets/search_result.jsx";
import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
@@ -48,7 +49,13 @@ 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())
+ .child(
+ new FlexContainer("column")
+ .filling()
+ .id("mobile-sidebar-wrapper")
+ .child(new QuickSearchWidget())
+ .child(glob.isStandalone ? : new NoteTreeWidget())
+ )
)
.child(
new ScreenContainer("detail", "row")