Hide nav when keyboard is open

CHANGELOG.md

@@ -7,6 +7,8 @@
 * Add space membership management and bans
 * Add event info to profile dialog
 * Add better room membership management
+* Refactor stores for performance
+* Hide nav when keyboard is open
 
 # 1.5.3
 

src/app.css

@@ -392,6 +392,16 @@ progress[value]::-webkit-progress-value {
   @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
 }
 
+/* Keyboard open state adjustments */
+
+body.keyboard-open .cb {
+  @apply bottom-sai;
+}
+
+body.keyboard-open .bottom-nav {
+  display: none;
+}
+
 /* chat view */
 
 .chat__compose {

src/app/components/PrimaryNav.svelte

@@ -110,9 +110,10 @@
 {@render children?.()}
 
 <!-- a little extra something for ios -->
-<div class="fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden"></div>
+<div class="bottom-nav fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+</div>
 <div
-  class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="bottom-nav border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Home" href="/home">

src/app/util/keyboard.ts

@@ -0,0 +1,21 @@
+import {Capacitor} from '@capacitor/core'
+import {Keyboard} from "@capacitor/keyboard"
+import {noop} from '@welshman/lib'
+
+export const syncKeyboard = () => {
+  if (!Capacitor.isNativePlatform()) return noop
+
+  const showListener = Keyboard.addListener("keyboardWillShow", () => {
+    document.body.classList.add("keyboard-open")
+  })
+
+  const hideListener = Keyboard.addListener("keyboardWillHide", () => {
+    document.body.classList.remove("keyboard-open")
+  })
+
+  return () => {
+    showListener.then(listener => listener.remove())
+    hideListener.then(listener => listener.remove())
+    document.body.classList.remove("keyboard-open")
+  }
+}

src/routes/+layout.svelte

@@ -37,6 +37,7 @@
   import {initializePushNotifications} from "@app/util/push"
   import * as notifications from "@app/util/notifications"
   import * as storage from "@app/util/storage"
+  import {syncKeyboard} from "@app/util/keyboard"
   import NewNotificationSound from "@src/app/components/NewNotificationSound.svelte"
 
   const {children} = $props()
@@ -134,6 +135,9 @@
     // Subscribe to badge count for changes
     unsubscribers.push(notifications.badgeCount.subscribe(notifications.handleBadgeCountChanges))
 
+    // Initialize keyboard state tracking
+    unsubscribers.push(syncKeyboard())
+
     // Listen for signer errors, report to user via toast
     unsubscribers.push(
       signerLog.subscribe(