feat(mobile/split): collapse inactive split when keyboard is opened

apps/client/src/menus/link_context_menu.ts

@@ -2,13 +2,15 @@ import { t } from "../services/i18n.js";
 import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
+import utils from "../services/utils.js";
+import { getClosestNtxId } from "../widgets/widget_utils.js";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
         items: getItems(),
-        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, notePath, viewScope, hoistedNoteId)
+        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, e, notePath, viewScope, hoistedNoteId)
     });
 }
 
@@ -21,7 +23,7 @@ function getItems(): MenuItem<CommandNames>[] {
     ];
 }
 
-function handleLinkContextMenuItem(command: string | undefined, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
         hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
@@ -29,15 +31,8 @@ function handleLinkContextMenuItem(command: string | undefined, notePath: string
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewSplit") {
-        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-
-        if (!subContexts) {
-            logError("subContexts is null");
-            return;
-        }
-
-        const { ntxId } = subContexts[subContexts.length - 1];
-
+        const ntxId = getNtxId(e);
+        if (!ntxId) return;
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
@@ -46,6 +41,16 @@ function handleLinkContextMenuItem(command: string | undefined, notePath: string
     }
 }
 
+function getNtxId(e: ContextMenuEvent) {
+    if (utils.isDesktop()) {
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
+        if (!subContexts) return null;
+        return subContexts[subContexts.length - 1].ntxId;
+    } else {
+        return getClosestNtxId(e.target);
+    }
+}
+
 export default {
     getItems,
     handleLinkContextMenuItem,

apps/client/src/stylesheets/style.css

@@ -2627,15 +2627,22 @@ iframe.print-iframe {
 }
 
 @media (max-width: 991px) {
-    body.mobile .split-note-container-widget {
-        flex-direction: column !important;
-        
-        .note-split {
-            width: 100%;
+    body.mobile {
+        .split-note-container-widget {
+            flex-direction: column !important;
+            
+            .note-split {
+                width: 100%;
+            }
+
+            .note-split.visible + .note-split.visible {
+                border-top: 1px solid var(--main-border-color);
+            }
         }
 
-        .note-split.visible + .note-split.visible {
-            border-top: 1px solid var(--main-border-color);
+        #root-widget.virtual-keyboard-opened .note-split:not(:focus-within) {
+            max-height: 80px;
+            opacity: 0.4;
         }
     }
 }

apps/client/src/widgets/widget_utils.ts

@@ -19,3 +19,9 @@ export function onWheelHorizontalScroll(event: WheelEvent) {
     event.stopImmediatePropagation();
     (event.currentTarget as HTMLElement).scrollLeft += event.deltaY + event.deltaX;
 }
+
+export function getClosestNtxId(element: HTMLElement) {
+    const closestNtxEl = element.closest<HTMLElement>("[data-ntx-id]");
+    if (!closestNtxEl) return null;
+    return closestNtxEl.dataset.ntxId ?? null;
+}