Commit 859304b7808ab9a4be87b1bddcd07c6485bf9c4f | the-knife

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx+17-2

 @@ -22,7 +22,12 @@ import {
   type ReactNode,
 } from "react";
 import { useWindowDimensions, View } from "react-native";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { AsyncResult } from "effect/unstable/reactivity";
 import {
 @@ -51,6 +56,7 @@ import { useAppearancePreferences } from "../settings/appearance/AppearancePrefe
 import { ThreadNavigationSidebar } from "../threads/ThreadNavigationSidebar";
 import { WORKSPACE_PANE_TIMING } from "./workspace-pane-animation";
 import { WorkspaceInspectorPane } from "./workspace-inspector-pane";
+import { WorkspaceContentWidthContext } from "./workspace-content-width";
 interface AdaptiveWorkspaceContextValue {
   readonly layout: Layout;
 @@ -505,6 +511,10 @@ function AdaptiveWorkspaceLayoutContent(
   const contentSettledWidth = layout.usesSplitView
     ? Math.max(0, panes.contentPaneWidth - inspectorColumnTargetWidth)
     : null;
+  const renderedInspectorWidth = useSharedValue(inspectorColumnTargetWidth);
+  const renderedContentWidth = useDerivedValue(() =>
+    Math.max(0, width - renderedSidebarWidth.value - renderedInspectorWidth.value),
+  );
   const handleSelectThread = useCallback(
     (thread: EnvironmentThreadShell) => {
 @@ -583,10 +593,15 @@ function AdaptiveWorkspaceLayoutContent(
                 contentSettledWidth !== null ? { flex: 1, width: contentSettledWidth } : { flex: 1 }
               }
             >
-              {props.children}
+              <WorkspaceContentWidthContext
+                value={layout.usesSplitView ? renderedContentWidth : null}
+              >
+                {props.children}
+              </WorkspaceContentWidthContext>
             </View>
           </View>
           <WorkspaceInspectorPane
+            renderedInspectorWidth={renderedInspectorWidth}
             active={workspaceInspector?.active ?? false}
             panes={panes}
             renderInspector={workspaceInspector?.render}

apps/mobile/src/features/layout/workspace-content-width.ts created+10

...	@@ -0,0 +1,10 @@
1	import { createContext, use } from "react";
2	import type { SharedValue } from "react-native-reanimated";
3
4	// Floating controls follow the visible pane while the expensive navigator/feed
5	// stays laid out at its settled width during sidebar and inspector transitions.
6	export const WorkspaceContentWidthContext = createContext<SharedValue<number> \| null>(null);
7
8	export function useWorkspaceContentWidth() {
9	return use(WorkspaceContentWidthContext);
10	}

apps/mobile/src/features/layout/workspace-inspector-pane.tsx+3-1

apps/mobile/src/features/threads/ThreadComposer.tsx+29-7

 @@ -37,7 +37,7 @@ import {
 import Animated, {
   FadeIn,
   FadeOut,
-  LinearTransition,
+  type LayoutAnimationFunction,
   ReduceMotion,
   useAnimatedStyle,
   useSharedValue,
 @@ -153,10 +153,32 @@ export interface ThreadComposerProps {
 // running alongside that translate reads as jitter. Snapping the layout and
 // letting the keyboard-synced slide be the only motion looks native there.
 export const COMPOSER_TRANSITION_DURATION_MS = 220;
+// Side panes already animate the dock's width. Nested horizontal layout
+// transitions would leave the surface trailing its toolbar's new position.
+// Keep the vertical pill/card morph while horizontal layout follows the dock.
+const composerHeightTransition: LayoutAnimationFunction = (values) => {
+  "worklet";
+  const timing = {
+    duration: COMPOSER_TRANSITION_DURATION_MS,
+    reduceMotion: ReduceMotion.System,
+  };
+  return {
+    initialValues: {
+      originX: values.targetOriginX,
+      originY: values.currentOriginY,
+      width: values.targetWidth,
+      height: values.currentHeight,
+    },
+    animations: {
+      originX: values.targetOriginX,
+      originY: withTiming(values.targetOriginY, timing),
+      width: values.targetWidth,
+      height: withTiming(values.targetHeight, timing),
+    },
+  };
+};
 export const COMPOSER_LAYOUT_TRANSITION =
-  Platform.OS === "android"
+  Platform.OS === "android" ? undefined : composerHeightTransition;
-    ? undefined
-    : LinearTransition.duration(COMPOSER_TRANSITION_DURATION_MS).reduceMotion(ReduceMotion.System);
 const COMPOSER_ATTACHMENT_ENTERING =
   Platform.OS === "android"
 @@ -351,7 +373,7 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   );
   const isVoiceInputPresented = voicePresentation.statusLabel !== null;
   // An open draft stays visible; only a collapsed composer becomes a voice strip.
-  const isExpanded = isFocused || settingsSheetPresentation.isActive;
+  const isExpanded = isFocused || settingsSheetPresentation.keepsComposerExpanded;
   const showsCompactDictation = isVoiceInputPresented && !isExpanded;
   const isToolbarVisible = isExpanded || isVoiceInputPresented;
   const attachmentBlockReason = composerAttachmentUploadBlockReason({
 @@ -407,11 +429,11 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
   const handleBlur = useCallback(() => {
     setIsFocused(false);
-    if (!settingsSheetPresentation.isActive) {
+    if (!settingsSheetPresentation.keepsComposerExpanded) {
       onExpandedChange?.(false);
     }
     onEditorFocusChange?.(false);
-  }, [onEditorFocusChange, onExpandedChange, settingsSheetPresentation.isActive]);
+  }, [onEditorFocusChange, onExpandedChange, settingsSheetPresentation.keepsComposerExpanded]);
   const handleSend = useCallback(async () => {
     // Typed out in full rather than picked from the menu. Attachments mean the
     // user is sending a prompt, so those go through as usual.

apps/mobile/src/features/threads/ThreadDetailScreen.tsx+9-1

 @@ -58,10 +58,12 @@ import Animated, {
   FadeOut,
   ReduceMotion,
   useAnimatedReaction,
+  useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useWorkspaceContentWidth } from "../layout/workspace-content-width";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { collectProviderUsageLimits } from "@t3tools/shared/usageLimits";
 @@ -647,6 +649,12 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
   const layoutVariant = props.layoutVariant ?? "compact";
   const isSplitLayout = layoutVariant === "split";
   const contentMaxWidth = isSplitLayout ? CHAT_CONTENT_MAX_WIDTH : undefined;
+  const workspaceContentWidth = useWorkspaceContentWidth();
+  const composerWidthStyle = useAnimatedStyle(() =>
+    isSplitLayout && workspaceContentWidth !== null
+      ? { width: workspaceContentWidth.value, right: undefined }
+      : { width: undefined, right: 0 },
+  );
   const selectedInstanceId = props.selectedThread.modelSelection.instanceId;
   useStreamingHaptics(props.selectedThread.id, props.selectedThreadFeed);
   const selectedProviderSkills = useMemo(() => {
 @@ -915,7 +923,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
           <Animated.View
             layout={COMPOSER_LAYOUT_TRANSITION}
             pointerEvents="box-none"
-            style={{ position: "absolute", bottom: 0, left: 0, right: 0 }}
+            style={[{ position: "absolute", bottom: 0, left: 0, right: 0 }, composerWidthStyle]}
           >
             {/* No paddingTop here: the overlay's measured height becomes the
                 list's bottom inset, so any padding above the pill/composer

apps/mobile/src/features/threads/use-thread-settings-sheet-presentation.ts+16-11

 @@ -3,7 +3,7 @@ import { KeyboardController } from "react-native-keyboard-controller";
 import type { ComposerEditorHandle } from "../../components/ComposerEditor";
-type PresentationPhase = "closed" | "opening" | "visible";
+type PresentationPhase = "closed" | "opening" | "visible" | "restoring";
 /**
  * The navigator-level UIKit completion event added by the repo's
 @@ -91,7 +91,8 @@ export function useThreadSettingsSheetPresentation(input: {
     focusRestoreIdRef.current += 1;
     clearDismissRestoreTimer();
     restorePendingRef.current = false;
-    restoreFocusAfterDismissRef.current = input.isEditorFocused || KeyboardController.isVisible();
+    restoreFocusAfterDismissRef.current =
+      phase === "restoring" || input.isEditorFocused || KeyboardController.isVisible();
     setPhase("opening");
     const openingId = openingIdRef.current + 1;
 @@ -109,7 +110,7 @@ export function useThreadSettingsSheetPresentation(input: {
       }
       setPhase("visible");
     });
-  }, [clearDismissRestoreTimer, input.editorRef, input.isEditorFocused]);
+  }, [clearDismissRestoreTimer, input.editorRef, input.isEditorFocused, phase]);
   const restoreEditorFocus = useCallback(() => {
     const focusRestoreId = focusRestoreIdRef.current + 1;
 @@ -120,12 +121,11 @@ export function useThreadSettingsSheetPresentation(input: {
     // normally succeeds; the retries are insurance against UIKit briefly
     // refusing first-responder status right at the transition boundary.
     const restoreFocus = () => {
-      if (
+      if (!isMountedRef.current || focusRestoreIdRef.current !== focusRestoreId) {
-        !isMountedRef.current ||
+        return;
-        focusRestoreIdRef.current !== focusRestoreId ||
+      }
-        isEditorFocusedRef.current ||
+      if (isEditorFocusedRef.current || attemptsRemaining <= 0) {
-        attemptsRemaining <= 0
+        setPhase("closed");
-      ) {
         return;
       }
 @@ -157,11 +157,15 @@ export function useThreadSettingsSheetPresentation(input: {
    */
   const onDismissed = useCallback(() => {
     isActiveRef.current = false;
-    setPhase("closed");
     if (!restoreFocusAfterDismissRef.current) {
+      setPhase("closed");
       return;
     }
+    // Keep the card expanded across the handoff back to its editor. With a
+    // hardware keyboard there is no software-keyboard travel to hide a collapse
+    // while the sheet dismissal and focus restoration finish.
+    setPhase("restoring");
     restoreFocusAfterDismissRef.current = false;
     restorePendingRef.current = true;
     clearDismissRestoreTimer();
 @@ -185,7 +189,8 @@ export function useThreadSettingsSheetPresentation(input: {
   }, [runPendingDismissalRestore]);
   return {
-    isActive: phase !== "closed",
+    isActive: phase === "opening" || phase === "visible",
+    keepsComposerExpanded: phase !== "closed",
     isVisible: phase === "visible",
     open,
     onDismissed,

author	Julius Marminge <julius0216@outlook.com> 2026-09-10 14:03:00-07:00
committer	GitHub <noreply@github.com> 2026-09-10 14:03:00-07:00
log	859304b7808ab9a4be87b1bddcd07c6485bf9c4f
tree	784652183f5d4f840a653bfe2b2d5887d3be9193
parent	96f43708a0ec97e9da89ab1e165039f50f09e037
signature	Signed by PGP key B5690EEEBB952194

...	@@ -4,6 +4,7 @@ import Animated, {	...	@@ -4,6 +4,7 @@ import Animated, {
4	useAnimatedStyle,	4	useAnimatedStyle,
5	useSharedValue,	5	useSharedValue,
6	withTiming,	6	withTiming,
		7	type SharedValue,
7	} from "react-native-reanimated";	8	} from "react-native-reanimated";
8		9
9	import { constrainAuxiliaryPaneWidth, type WorkspacePaneLayout } from "../../lib/layout";	10	import { constrainAuxiliaryPaneWidth, type WorkspacePaneLayout } from "../../lib/layout";
...	@@ -22,6 +23,7 @@ import { WorkspacePaneDivider } from "./workspace-pane-divider";	...	@@ -22,6 +23,7 @@ import { WorkspacePaneDivider } from "./workspace-pane-divider";
22	* module stays import-cycle-free with AdaptiveWorkspaceLayout.	23	* module stays import-cycle-free with AdaptiveWorkspaceLayout.
23	*/	24	*/
24	export function WorkspaceInspectorPane(props: {	25	export function WorkspaceInspectorPane(props: {
		26	readonly renderedInspectorWidth: SharedValue<number>;
25	/**	27	/**
26	* When false the pane animates closed but keeps its content mounted for the	28	* When false the pane animates closed but keeps its content mounted for the
27	* exit transition (a route that lost focus). `onClosed` fires once the	29	* exit transition (a route that lost focus). `onClosed` fires once the
...	@@ -45,7 +47,7 @@ export function WorkspaceInspectorPane(props: {	...	@@ -45,7 +47,7 @@ export function WorkspaceInspectorPane(props: {
45	// inspector at its final position so route replacement never replays an	47	// inspector at its final position so route replacement never replays an
46	// entering transition. Only visibility and explicit resizing change it.	48	// entering transition. Only visibility and explicit resizing change it.
47	const inspectorProgress = useSharedValue(inspectorVisible ? 1 : 0);	49	const inspectorProgress = useSharedValue(inspectorVisible ? 1 : 0);
48	const renderedInspectorWidth = useSharedValue(inspectorVisible ? (inspectorWidth ?? 0) : 0);	50	const { renderedInspectorWidth } = props;
49	// The content keeps its own width so the reveal (outer width) clips a	51	// The content keeps its own width so the reveal (outer width) clips a
50	// fully-laid-out pane instead of reflowing text every frame. When the OPEN	52	// fully-laid-out pane instead of reflowing text every frame. When the OPEN
51	// pane's target width changes (e.g. the sidebar toggles and reserves	53	// pane's target width changes (e.g. the sidebar toggles and reserves

fix(mobile): keep composer transitions aligned (#11127)