feat(Keyboard): Enhance keyboard handling for mobile devices to impro…

…ve user experience

src/lib/elements/Input/Input.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
+    import { isAndroidOriOS } from "$lib/utils/Mobile"
     import { InputRules } from "./inputRules"
     import { Appearance } from "../../enums/index"
     import { MarkdownEditor } from "markdown-editor"
     import "./markdown.scss"
-    import { createEventDispatcher, onMount } from "svelte"
+    import { createEventDispatcher, onDestroy, onMount } from "svelte"
     import { EditorView } from "@codemirror/view"
     import { writable } from "svelte/store"
     import Text from "../Text.svelte"
     import { debounce } from "$lib/utils/Functions"
+    import type { PluginListenerHandle } from "@capacitor/core"
+    import { Keyboard } from "@capacitor/keyboard"
 
     export let placeholder: string = ""
     export let hook: string = ""
@@ -84,7 +87,7 @@
         editor.codemirror.dispatch({
             selection: { head: line.to, anchor: line.to },
         })
-        if (autoFocus) editor.codemirror.focus()
+        if ((autoFocus && !isAndroidOriOS()) || isKeyboardOpened) editor.codemirror.focus()
         // @ts-ignore
         editor.updatePlaceholder(input.placeholder)
         editor.registerListener("input", ({ value: val }: { value: string }) => {
@@ -134,6 +137,25 @@
             input.addEventListener("mouseup", mouseupListener)
         })
     }
+
+    let mobileKeyboardListener01: PluginListenerHandle | undefined
+    let mobileKeyboardListener02: PluginListenerHandle | undefined
+    $: isKeyboardOpened = false
+
+    onMount(async () => {
+        mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", () => {
+            isKeyboardOpened = true
+        })
+
+        mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
+            isKeyboardOpened = false
+        })
+    })
+
+    onDestroy(async () => {
+        if (mobileKeyboardListener01) await mobileKeyboardListener01.remove()
+        if (mobileKeyboardListener02) await mobileKeyboardListener02.remove()
+    })
 </script>
 
 {#key hook}
@@ -161,7 +183,7 @@
                 on:keydown={onKeyDown}
                 on:input={onInput}
                 on:blur={onBlur}
-                autofocus={autoFocus} />
+                autofocus={isAndroidOriOS() ? isKeyboardOpened : autoFocus} />
         </div>
     </div>
     {#if errorMessage}

src/lib/layouts/BottomNavBarMobile.svelte

@@ -7,9 +7,10 @@
     import { UIStore } from "$lib/state/ui"
     import type { FriendRequest, NavRoute } from "$lib/types"
     import { checkMobile, isAndroidOriOS } from "$lib/utils/Mobile"
-    import { createEventDispatcher, onDestroy } from "svelte"
+    import { createEventDispatcher, onDestroy, onMount } from "svelte"
     import { get } from "svelte/store"
     import { Keyboard } from "@capacitor/keyboard"
+    import type { PluginListenerHandle } from "@capacitor/core"
 
     export let routes: NavRoute[] = []
     export let activeRoute: Route | SettingsRoute | CommunitySettingsRoute = Route.Home
@@ -68,8 +69,22 @@
         if (route.to === Route.Settings) return true
     }
 
+    let mobileKeyboardListener01: PluginListenerHandle | undefined
+    let mobileKeyboardListener02: PluginListenerHandle | undefined
+    $: isKeyboardOpened = false
+
+    onMount(async () => {
+        mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", () => {
+            isKeyboardOpened = true
+        })
+
+        mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
+            isKeyboardOpened = false
+        })
+    })
+
     // Clean up subscriptions when component is destroyed
-    onDestroy(() => {
+    onDestroy(async () => {
         setTimeout(() => {
             if (get(Store.state.activeCall)) {
                 Store.setActiveCall(Store.getCallingChat(VoiceRTCInstance.channel!)!)
@@ -78,18 +93,10 @@
 
         unsubscribeStore()
         unsubscribeUIStore()
-        Keyboard.removeAllListeners()
+        await mobileKeyboardListener01?.remove()
+        await mobileKeyboardListener02?.remove()
     })
     $: settings = SettingsStore.state
-
-    $: isKeyboardOpened = false
-    Keyboard.addListener("keyboardWillShow", _ => {
-        isKeyboardOpened = true
-    })
-
-    Keyboard.addListener("keyboardWillHide", () => {
-        isKeyboardOpened = false
-    })
 </script>
 
 {#if !isKeyboardOpened}

src/lib/layouts/Chatbar.svelte

@@ -22,6 +22,7 @@
     import StoreResolver from "$lib/components/utils/StoreResolver.svelte"
     import MessageText from "$lib/components/messaging/message/MessageText.svelte"
     import { Keyboard } from "@capacitor/keyboard"
+    import type { PluginListenerHandle } from "@capacitor/core"
 
     export let replyTo: MessageType | undefined = undefined
     export let emojiClickHook: (emoji: string) => boolean
@@ -159,27 +160,63 @@
         return result
     }
 
-    let mobileAutoFocus: boolean
-
-    Keyboard.addListener("keyboardWillShow", () => {
-        mobileAutoFocus = true
-    })
+    let mobileKeyboardListener01: PluginListenerHandle | undefined
+    let mobileKeyboardListener02: PluginListenerHandle | undefined
+    $: isMobileKeyboardOpened = false
 
     onMount(async () => {
-        mobileAutoFocus = false
         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()) {
+            mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", info => {
+                if (isiOSMobile()) {
+                    isMobileKeyboardOpened = true
+                    let chat = get(Store.state.activeChat)
+                    const chatbar = document.getElementById(`chatbar-container-${chat.id}`)
+                    if (chatbar) {
+                        chatbar.style.marginBottom = `${info.keyboardHeight - 30}px`
+                    }
+                }
+            })
+
+            mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
+                if (isiOSMobile()) {
+                    isMobileKeyboardOpened = false
+                    let chat = get(Store.state.activeChat)
+                    const chatbar = document.getElementById(`chatbar-container-${chat.id}`)
+                    if (chatbar) {
+                        chatbar.style.marginBottom = `0px`
+                    }
+                }
+            })
+        }
+    })
+
+    onDestroy(() => {
+        if (isAndroidOriOS()) {
+            mobileKeyboardListener01?.remove()
+            mobileKeyboardListener02?.remove()
+        }
     })
 </script>
 
-<div class="chatbar" data-cy="chatbar" id={`chatbat-container-${activeChat.id}`}>
+<div class="chatbar" data-cy="chatbar" id={`chatbar-container-${activeChat.id}`}>
     <Controls>
         <slot name="pre-controls"></slot>
     </Controls>
     <Input
         hook={`${activeChat.id}-${$hackVariableToRefocusChatBar}`}
         alt
         placeholder={$_("generic.placeholder")}
-        autoFocus={isAndroidOriOS() ? mobileAutoFocus : true}
+        autoFocus={true}
         bind:value={$message}
         rounded
         rich={markdown}

src/routes/chat/+page.svelte

@@ -5,22 +5,7 @@
     import { animationDuration } from "$lib/globals/animations"
     import { slide } from "svelte/transition"
     import { Chatbar, Sidebar, Topbar, Profile } from "$lib/layouts"
-    import {
-        ImageEmbed,
-        ChatPreview,
-        Conversation,
-        Message as MessageComponent,
-        MessageGroup,
-        MessageReactions,
-        MessageReplyContainer,
-        ProfilePicture,
-        Modal,
-        ProfilePictureMany,
-        ChatFilter,
-        ContextMenu,
-        EmojiGroup,
-        ChatIcon,
-    } from "$lib/components"
+    import { ImageEmbed, ChatPreview, Conversation, Message as MessageComponent, MessageGroup, MessageReactions, MessageReplyContainer, Modal, ChatFilter, ContextMenu, EmojiGroup, ChatIcon } from "$lib/components"
     import CreateTransaction from "$lib/components/wallet/CreateTransaction.svelte"
     import { Button, FileInput, Icon, Label, Text } from "$lib/elements"
     import CallScreen from "$lib/components/calling/CallScreen.svelte"
@@ -83,27 +68,6 @@
     $: statusMessage = $activeChat.kind === ChatType.DirectMessage ? $users[$activeChat.users[1]]?.profile?.status_message : $activeChat.motd
     $: pinned = getPinned($conversation)
 
-    UIStore.state.sidebarOpen.subscribe(_ => {
-        if (isiOSMobile()) {
-            let chat = get(Store.state.activeChat)
-            Keyboard.removeAllListeners().then(() => {
-                Keyboard.addListener("keyboardWillShow", info => {
-                    const chatbar = document.getElementById(`chatbat-container-${chat.id}`)
-                    if (chatbar) {
-                        chatbar.style.marginBottom = `${info.keyboardHeight - 30}px`
-                    }
-                })
-
-                Keyboard.addListener("keyboardWillHide", () => {
-                    const chatbar = document.getElementById(`chatbat-container-${chat.id}`)
-                    if (chatbar) {
-                        chatbar.style.marginBottom = `0px`
-                    }
-                })
-            })
-        }
-    })
-
     function toggleSidebar() {
         UIStore.toggleSidebar()
     }

src/routes/settings/profile/+page.svelte

@@ -25,22 +25,7 @@
     import PinInput from "$lib/components/PinInput.svelte"
     import { isiOSMobile } from "$lib/utils/Mobile"
     import { Keyboard } from "@capacitor/keyboard"
-
-    if (isiOSMobile()) {
-        Keyboard.removeAllListeners().then(() => {
-            Keyboard.addListener("keyboardWillShow", _ => {
-                const focusedElement = document.activeElement
-                if (focusedElement && (focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA")) {
-                    setTimeout(() => {
-                        focusedElement.scrollIntoView({
-                            behavior: "smooth",
-                            block: "center",
-                        })
-                    }, 100)
-                }
-            })
-        })
-    }
+    import type { PluginListenerHandle } from "@capacitor/core"
 
     enum SeedState {
         Hidden,
@@ -191,15 +176,31 @@
     let statusMessage: string = { ...get(Store.state.user) }.profile.status_message
     let seedWarning = false
 
-    onMount(() => {
+    let mobileKeyboardListener: PluginListenerHandle | undefined
+
+    onMount(async () => {
         userReference = { ...get(Store.state.user) }
         statusMessage = { ...get(Store.state.user) }.profile.status_message
+
+        if (isiOSMobile()) {
+            mobileKeyboardListener = await Keyboard.addListener("keyboardWillShow", _ => {
+                const focusedElement = document.activeElement
+                if (focusedElement && (focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA")) {
+                    setTimeout(() => {
+                        focusedElement.scrollIntoView({
+                            behavior: "smooth",
+                            block: "center",
+                        })
+                    }, 100)
+                }
+            })
+        }
     })
 
-    onDestroy(() => {
+    onDestroy(async () => {
         Store.setUsername(userReference.name)
         Store.setStatusMessage(userReference.profile.status_message)
-        Keyboard.removeAllListeners()
+        await mobileKeyboardListener?.remove()
     })
 
     $: user = Store.state.user