From d83f2019c790e06df494f81fd379146f78f00a73 Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Thu, 12 Dec 2024 11:21:00 -0300
Subject: [PATCH] feat(ContextMenu, Input, Chatbar): Enhance keyboard handling
 for mobile devices to improve user experience

---
 src/lib/components/ui/ContextMenu.svelte | 42 +++++++++++++++++-------
 src/lib/elements/Input/Input.svelte      |  5 +--
 src/lib/layouts/Chatbar.svelte           | 16 ++++-----
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/ui/ContextMenu.svelte b/src/lib/components/ui/ContextMenu.svelte
index e0c591f84..42b09ac61 100644
--- a/src/lib/components/ui/ContextMenu.svelte
+++ b/src/lib/components/ui/ContextMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+    import { Keyboard } from "@capacitor/keyboard"
     // A close handler referencing the current open context menu
     let close_context: any
 </script>
@@ -9,8 +10,10 @@
     import { clickoutside } from "@svelte-put/clickoutside"
     import { Appearance } from "$lib/enums"
     import type { ContextItem } from "$lib/types"
-    import { createEventDispatcher, tick } from "svelte"
+    import { createEventDispatcher, onMount, tick } from "svelte"
     import { log } from "$lib/utils/Logger"
+    import type { PluginListenerHandle } from "@capacitor/core"
+    import { isAndroidOriOS } from "$lib/utils/Mobile"
 
     let visible: boolean = false
     let coords: [number, number] = [0, 0]
@@ -31,7 +34,7 @@
         const { width, height } = context.getBoundingClientRect()
 
         const offsetX = evt.pageX
-        const offsetY = evt.pageY
+        const offsetY = evt.pageY - keyboardHeight / 2.5
         const screenWidth = evt.view!.innerWidth
         const screenHeight = evt.view!.innerHeight
 
@@ -42,9 +45,7 @@
 
         // Calculate Y position, prioritizing space above the cursor if not enough below
         const adjustedY = offsetY - height
-        const topY = screenHeight - offsetY < height + 30 
-            ? Math.max(5, adjustedY) 
-            : Math.max(5, overFlowY ? offsetY - height : offsetY)
+        const topY = screenHeight - offsetY < height + 30 ? Math.max(5, adjustedY) : Math.max(5, overFlowY ? offsetY - height : offsetY)
 
         return [topX, topY]
     }
@@ -60,6 +61,29 @@
         await tick()
         coords = calculatePos(evt)
     }
+    let keyboardHeight = 0
+    onMount(() => {
+        let mobileKeyboardListener01: PluginListenerHandle | undefined
+        let mobileKeyboardListener02: PluginListenerHandle | undefined
+
+        async function setupListeners() {
+            mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", info => {
+                keyboardHeight = info.keyboardHeight
+            })
+
+            mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
+                keyboardHeight = 0
+            })
+        }
+        if (isAndroidOriOS()) {
+            setupListeners()
+        }
+
+        return () => {
+            if (mobileKeyboardListener01) mobileKeyboardListener01.remove()
+            if (mobileKeyboardListener02) mobileKeyboardListener02.remove()
+        }
+    })
 
     function handleItemClick(e: MouseEvent, item: ContextItem) {
         e.stopPropagation()
@@ -74,13 +98,7 @@
 
 <slot name="content" open={openContext} />
 {#if visible}
-    <div 
-        id="context-menu" 
-        data-cy={hook} 
-        bind:this={context} 
-        use:clickoutside 
-        on:clickoutside={onClose} 
-        style={`position: fixed; left: ${coords[0]}px; top: ${coords[1]}px;`}>
+    <div id="context-menu" data-cy={hook} bind:this={context} use:clickoutside on:clickoutside={onClose} style={`position: fixed; left: ${coords[0]}px; top: ${coords[1]}px;`}>
         <slot name="items" close={onClose}></slot>
         {#each items as item}
             <Button
diff --git a/src/lib/elements/Input/Input.svelte b/src/lib/elements/Input/Input.svelte
index c18341756..a50ff557e 100644
--- a/src/lib/elements/Input/Input.svelte
+++ b/src/lib/elements/Input/Input.svelte
@@ -70,7 +70,7 @@
 
     let onsend: any[] = []
     let editor: MarkdownEditor
-
+    let mobileKeyboardWasAlreadyOpened = false
     $: if (rich && $input && (!editor || !Array.from($input.parentNode!.children).some(el => el === editor.codemirror.dom))) {
         if (editor) {
             editor.codemirror.destroy()
@@ -87,7 +87,7 @@
         editor.codemirror.dispatch({
             selection: { head: line.to, anchor: line.to },
         })
-        if ((autoFocus && !isAndroidOriOS()) || isKeyboardOpened) editor.codemirror.focus()
+        if ((autoFocus && !isAndroidOriOS()) || (autoFocus && mobileKeyboardWasAlreadyOpened) || isKeyboardOpened) editor.codemirror.focus()
         // @ts-ignore
         editor.updatePlaceholder(input.placeholder)
         editor.registerListener("input", ({ value: val }: { value: string }) => {
@@ -144,6 +144,7 @@
 
     onMount(async () => {
         mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", () => {
+            mobileKeyboardWasAlreadyOpened = true
             isKeyboardOpened = true
         })
 
diff --git a/src/lib/layouts/Chatbar.svelte b/src/lib/layouts/Chatbar.svelte
index a5ce783cd..38138e935 100644
--- a/src/lib/layouts/Chatbar.svelte
+++ b/src/lib/layouts/Chatbar.svelte
@@ -167,15 +167,15 @@
     onMount(async () => {
         hackVariableToRefocusChatBar.set(Math.random().toString())
 
-        let chat = get(Store.state.activeChat)
-        const chatbar = document.getElementById(`chatbar-container-${chat.id}`)
-        chatbar?.addEventListener("click", _ => {
-            if (isMobileKeyboardOpened && !$emojiSelectorOpen) {
-                hackVariableToRefocusChatBar.set(Math.random().toString())
-            }
-        })
-
         if (isAndroidOriOS()) {
+            let chat = get(Store.state.activeChat)
+            const chatbar = document.getElementById(`chatbar-container-${chat.id}`)
+            chatbar?.addEventListener("click", _ => {
+                if (isMobileKeyboardOpened && !$emojiSelectorOpen) {
+                    hackVariableToRefocusChatBar.set(Math.random().toString())
+                }
+            })
+
             mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", info => {
                 if (isiOSMobile()) {
                     isMobileKeyboardOpened = true