(fix): weird keyboard behaviour in android app

(qol): update todos

apps/tauri/src-tauri/gen/android/app/src/main/java/net/tensamin/client/MainActivity.kt

@@ -1,11 +1,90 @@
 package net.tensamin.client
 
+import android.graphics.Rect
 import android.os.Bundle
-import androidx.activity.enableEdgeToEdge
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.view.WindowManager
+import android.widget.FrameLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
 
 class MainActivity : TauriActivity() {
+  private var contentRoot: FrameLayout? = null
+  private var contentChild: android.view.View? = null
+  private var previousUsableHeight = 0
+  private var attachLayoutListener: ViewTreeObserver.OnGlobalLayoutListener? = null
+
   override fun onCreate(savedInstanceState: Bundle?) {
-    enableEdgeToEdge()
+    WindowCompat.setDecorFitsSystemWindows(window, true)
+    window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING)
     super.onCreate(savedInstanceState)
+    installKeyboardResizeWorkaround()
+  }
+
+  override fun onDestroy() {
+    attachLayoutListener?.let { listener ->
+      contentRoot?.viewTreeObserver?.removeOnGlobalLayoutListener(listener)
+    }
+    attachLayoutListener = null
+    contentRoot = null
+    contentChild = null
+    super.onDestroy()
+  }
+
+  private fun installKeyboardResizeWorkaround() {
+    val content = window.decorView.findViewById<FrameLayout>(android.R.id.content)
+    contentRoot = content
+
+    val listener = ViewTreeObserver.OnGlobalLayoutListener {
+      attachKeyboardResizeWorkaroundIfReady(content)
+    }
+
+    attachLayoutListener = listener
+    content.viewTreeObserver.addOnGlobalLayoutListener(listener)
+    content.post { attachKeyboardResizeWorkaroundIfReady(content) }
+  }
+
+  private fun attachKeyboardResizeWorkaroundIfReady(content: FrameLayout) {
+    if (contentChild != null) {
+      resizeContentForKeyboard(contentChild ?: return)
+      return
+    }
+
+    val child = content.getChildAt(0) ?: return
+    contentChild = child
+
+    ViewCompat.setOnApplyWindowInsetsListener(content) { _, insets ->
+      resizeContentForKeyboard(child, insets)
+      insets
+    }
+
+    ViewCompat.requestApplyInsets(content)
+    resizeContentForKeyboard(child)
+  }
+
+  private fun resizeContentForKeyboard(
+    child: android.view.View,
+    insets: WindowInsetsCompat? = ViewCompat.getRootWindowInsets(child),
+  ) {
+    val visibleFrame = Rect()
+    child.getWindowVisibleDisplayFrame(visibleFrame)
+
+    val rootHeight = child.rootView.height
+    if (rootHeight <= 0) return
+
+    val imeHeight = insets?.getInsets(WindowInsetsCompat.Type.ime())?.bottom ?: 0
+    val keyboardHeight = maxOf(imeHeight, rootHeight - visibleFrame.bottom)
+    val keyboardVisible = keyboardHeight > rootHeight * 0.15
+    val usableHeight = if (keyboardVisible) rootHeight - keyboardHeight else ViewGroup.LayoutParams.MATCH_PARENT
+
+    if (previousUsableHeight == usableHeight) return
+
+    val params = child.layoutParams
+    params.height = usableHeight
+    child.layoutParams = params
+    child.requestLayout()
+    previousUsableHeight = usableHeight
   }
 }

apps/web/src/components/navbar.tsx

@@ -30,7 +30,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
   return (
     <div
       data-tauri-drag-region
-      className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
+      className={`${forMobile && "border-b"} w-full shrink-0 gap-2 h-13.5 flex items-center justify-between`}
     >
       <div className="flex items-center justify-center gap-2">
         {forMobile ? (
@@ -137,7 +137,7 @@ export function MobileNavbar() {
   const { setOpenMobile } = useSidebar();
 
   return (
-    <div className="z-51 w-full pb-[env(safe-area-inset-bottom)] bg-card border-t">
+    <div className="z-51 w-full shrink-0 pb-[env(safe-area-inset-bottom)] bg-card border-t">
       <div className="z-51 w-full h-15 grid grid-cols-3 items-center place-items-center px-5">
         <SidebarTrigger
           className="text-foreground w-12! h-12! aspect-square rounded-xl flex flex-col gap-1"

apps/web/src/index.css

@@ -5,3 +5,15 @@
 
 @source "./**/*.{ts,tsx}";
 @source "../../../packages/**/src/**/*.{ts,tsx}";
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#root {
+  min-height: 0;
+}

apps/web/src/index.tsx

@@ -110,7 +110,7 @@ function RootShell() {
   return (
     <DeeplinkContext>
       <ThemeProvider>
-        <div className="w-screen h-screen overflow-hidden">
+        <div className="w-screen h-dvh overflow-hidden">
           <Toaster
             position={isMobile ? "top-center" : "bottom-right"}
             {...(isTauri() && isMobile

apps/web/src/routes/app/layout.tsx

@@ -18,13 +18,13 @@ export default function Layout({ children }: { children: ReactNode }) {
   const showMobileNavbar = useShowMobileNavbar();
 
   return (
-    <div className="w-full h-full flex bg-sidebar">
-      <SidebarProvider>
+    <div className="w-full h-full min-h-0 flex overflow-hidden bg-sidebar">
+      <SidebarProvider className="h-full min-h-0 overflow-hidden">
         <Sidebar />
         <div
           // Background of ui that is overlapping with the system ui
           className={cn(
-            "w-full h-full flex flex-col",
+            "w-full h-full min-h-0 flex flex-col overflow-hidden",
             isTauri() && isMobile && "pt-[env(safe-area-inset-top)]",
             isMobile && showMobileNavbar && "bg-background",
           )}
@@ -34,7 +34,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
           <div
             className={cn(
-              "bg-background h-full w-full",
+              "bg-background min-h-0 flex-1 w-full overflow-hidden",
               !isMobile && "rounded-tl-3xl border-t border-l",
             )}
           >

apps/web/todo.md

@@ -0,0 +1 @@
+- Make the sidebar use <Activity /> to make it feel less slow on mobile