fix(keyboard): share height state across useKeyboardHeight instances

When the thread drawer is open alongside the main room view, two
RoomInput components each mount their own useKeyboardHeight instance.
On keyboard open the thread instance had savedHeight=0 (freshly mounted),
so its immediate-estimate branch fell back to viewport.height — the
wrong mid-animation value — and overwrote the correct estimate already
written by the main room instance.  This produced a third layout change
(wrong height → correct height) visible as jank on every keyboard open.

Fix: promote savedHeight, cssVarsSet, and the mount reference counter to
module-level variables so all instances share them.

- sharedSavedHeight: all instances read and write the same value, so the
  estimate is always correct even for newly-mounted instances.
- cssVarsApplied: the 'only set once while keyboard open' guard now works
  across instances, preventing double setCSSVars calls.
- mountCount: reference-counted so only the last instance to unmount
  clears the CSS variables — prevents the thread drawer unmounting while
  the main room keyboard is still open from wiping --sable-visible-height.

Author: Just-Insane

src/app/hooks/ios-keyboard-fix/useKeyboardHeight.ts

@@ -21,41 +21,54 @@ import { useEffect, useRef, useState } from 'react';
 // visible and skips its document-scroll prediction.
 const STABILITY_MS = 80;
 
+// Module-level state shared across all useKeyboardHeight instances.
+// The keyboard height is a device property — it's the same regardless of
+// which input has focus. Sharing savedHeight prevents the case where two
+// simultaneous RoomInput instances (main timeline + open thread drawer) race
+// on keyboard open: the thread instance starts with savedHeight=0 and would
+// overwrite the main instance's correct estimate with the wrong mid-animation
+// viewport.height.
+// mountCount is a reference counter so only the last unmounting instance
+// clears the CSS vars (prevents the thread drawer unmounting mid-keyboard-open
+// from wiping --sable-visible-height while the main room input still uses it).
+let sharedSavedHeight = 0;
+let mountCount = 0;
+// Whether --sable-visible-height is currently applied. Shared so multiple
+// instances see the same state and the "only set once while open" guard works
+// across instances.
+let cssVarsApplied = false;
+
 export function useKeyboardHeight() {
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
 
   // Mirror state in refs so triggerPreLift sees fresh values from
   // an onMouseDown handler without re-creating the function each render.
-  const savedHeight = useRef(0);
   const hasOpenedOnce = useRef(false);
   const isVisibleRef = useRef(false);
 
   useEffect(() => {
     const viewport = window.visualViewport;
     if (!viewport) return undefined;
 
+    mountCount += 1;
     let baselineHeight = window.innerHeight;
     let stabilityTimer: ReturnType<typeof setTimeout> | null = null;
     let pendingValue = 0;
-    // Tracks whether --sable-visible-height is currently set so the opening
-    // path only fires setCSSVars once (avoids double-setting on repeated
-    // resize events while the keyboard is already open).
-    let cssVarsSet = false;
 
     const setCSSVars = (viewportHeight: number) => {
       document.documentElement.style.setProperty(
         '--sable-visible-height',
         `${Math.round(viewportHeight)}px`
       );
       document.documentElement.style.setProperty('--sable-safe-bottom', '0px');
-      cssVarsSet = true;
+      cssVarsApplied = true;
     };
 
     const clearCSSVars = () => {
       document.documentElement.style.removeProperty('--sable-visible-height');
       document.documentElement.style.removeProperty('--sable-safe-bottom');
-      cssVarsSet = false;
+      cssVarsApplied = false;
     };
 
     const handleResize = () => {
@@ -85,9 +98,9 @@ export function useKeyboardHeight() {
       // immediate and stability-timer setCSSVars calls land on the same pixel
       // value — eliminating the second layout change that causes visible
       // timeline stutter during the keyboard animation.
-      if (!cssVarsSet) {
+      if (!cssVarsApplied) {
         const estimatedViewportHeight =
-          savedHeight.current > 0 ? baselineHeight - savedHeight.current : viewport.height;
+          sharedSavedHeight > 0 ? baselineHeight - sharedSavedHeight : viewport.height;
         setCSSVars(estimatedViewportHeight);
       }
 
@@ -102,7 +115,7 @@ export function useKeyboardHeight() {
       pendingValue = calculatedHeight;
       if (stabilityTimer) clearTimeout(stabilityTimer);
       stabilityTimer = setTimeout(() => {
-        savedHeight.current = pendingValue;
+        sharedSavedHeight = pendingValue;
         hasOpenedOnce.current = true;
         isVisibleRef.current = true;
         setCSSVars(viewport.height); // refine to final settled viewport height
@@ -120,7 +133,7 @@ export function useKeyboardHeight() {
         stabilityTimer = null;
       }
       pendingValue = 0;
-      savedHeight.current = 0;
+      sharedSavedHeight = 0;
       hasOpenedOnce.current = false;
       isVisibleRef.current = false;
       clearCSSVars();
@@ -135,10 +148,14 @@ export function useKeyboardHeight() {
     viewport.addEventListener('resize', handleResize);
     window.addEventListener('orientationchange', handleOrientationChange);
     return () => {
+      mountCount -= 1;
       if (stabilityTimer) clearTimeout(stabilityTimer);
       viewport.removeEventListener('resize', handleResize);
       window.removeEventListener('orientationchange', handleOrientationChange);
-      clearCSSVars();
+      // Only clear CSS vars when the last instance unmounts — prevents the thread
+      // drawer unmounting mid-keyboard-open from wiping the variable while the
+      // main room's RoomInput still has the keyboard open.
+      if (mountCount === 0) clearCSSVars();
     };
   }, []);
 
@@ -148,8 +165,8 @@ export function useKeyboardHeight() {
   // Reads from refs so it always sees the latest state, even when
   // captured by an onMouseDown handler that mounted earlier.
   const triggerPreLift = () => {
-    if (hasOpenedOnce.current && savedHeight.current > 0 && isVisibleRef.current) {
-      setKeyboardHeight(savedHeight.current);
+    if (hasOpenedOnce.current && sharedSavedHeight > 0 && isVisibleRef.current) {
+      setKeyboardHeight(sharedSavedHeight);
     }
   };