Commit 29a23fdf1481485593d7d90e195b7c8bf2a705a8 | the-knife

apps/mobile/src/Stack.tsx+38-23

 @@ -11,7 +11,14 @@ import {
   type NativeStackNavigationOptions,
 } from "@react-navigation/native-stack";
 import { useEffect, useRef } from "react";
-import { Platform, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+} from "react-native";
 import { useResolveClassNames } from "uniwind";
 import { AppText as Text } from "./components/AppText";
 @@ -93,6 +100,7 @@ import {
   transitionIncomingSharePresentation,
 } from "./features/sharing/incoming-share-presentation";
 import { NATIVE_LIQUID_GLASS_SUPPORTED } from "./native/native-glass";
+import { deriveLayout } from "./lib/layout";
 import { nativeHeaderScrollEdgeEffects } from "./native/StackHeader";
 import { FORM_SHEET_PRESENTATION_OPTIONS } from "./native/sheet-surface";
 import { useThreadOutboxDrain } from "./state/use-thread-outbox-drain";
 @@ -339,9 +347,8 @@ const SettingsSheetStack = createNativeStackNavigator({
 // the same deep-link URLs the nested config produced.
 const THREAD_LINKING_PREFIX = "threads/:environmentId/:threadId";
-// New-task / add-project flow: nested navigator inside the formSheet (Settings-sheet
+// New-task / add-project flow: the nested navigator owns the header and pushes
-// pattern — a plain formSheet screen cannot render a stack header; the header and
+// whether the flow opens in the workspace or in a compact form sheet.
-// in-sheet pushes come from this nested stack).
 const NewTaskSheetStack = createNativeStackNavigator({
   initialRouteName: "NewTask",
   screenOptions: {
 @@ -570,7 +577,7 @@ function NotFoundScreen() {
   );
 }
-export const RootStack = createNativeStackNavigator({
+const RootStackConfig = createNativeStackNavigator({
   initialRouteName: "Home",
   layout: RootStackLayout,
   screenOptions: {
 @@ -698,15 +705,6 @@ export const RootStack = createNativeStackNavigator({
       options: {
         gestureEnabled: true,
         headerShown: false,
-        // Android pushes settings as a regular full page with an in-screen
-        // back header; iOS keeps the detented form sheet.
-        ...(Platform.OS === "android"
-          ? { presentation: "card" as const }
-          : {
-              ...FORM_SHEET_PRESENTATION_OPTIONS,
-              sheetAllowedDetents: [0.92],
-              sheetGrabberVisible: true,
-            }),
       },
     }),
     SettingsLegal: createNativeStackScreen({
 @@ -770,15 +768,6 @@ export const RootStack = createNativeStackNavigator({
       options: {
         gestureEnabled: true,
         headerShown: false,
-        // Android pushes the flow as a regular full page — the draft should
-        // read like a thread that just doesn't exist yet; iOS keeps the sheet.
-        ...(Platform.OS === "android"
-          ? { presentation: "card" as const }
-          : {
-              ...FORM_SHEET_PRESENTATION_OPTIONS,
-              sheetAllowedDetents: [0.92],
-              sheetGrabberVisible: true,
-            }),
       },
     }),
     NotFound: createNativeStackScreen({
 @@ -787,6 +776,32 @@ export const RootStack = createNativeStackNavigator({
     }),
   },
 });
+export const RootStack = RootStackConfig.with(function AdaptiveRootStack({ Navigator }) {
+  const { width, height } = useWindowDimensions();
+  const usesWorkspaceFlowScreens =
+    Platform.OS === "android" || deriveLayout({ width, height }).usesSplitView;
+  return (
+    <Navigator
+      screenOptions={({ route }) => {
+        if (route.name !== "SettingsSheet" && route.name !== "NewTaskSheet") {
+          return {};
+        }
+        // Follow the workspace viewport as it resizes; compact iOS keeps sheets.
+        return usesWorkspaceFlowScreens
+          ? { presentation: "card" }
+          : {
+              ...FORM_SHEET_PRESENTATION_OPTIONS,
+              sheetAllowedDetents: [0.92],
+              sheetGrabberVisible: true,
+            };
+      }}
+    />
+  );
+});
 type RootStackType = typeof RootStack;
 const navigationPathConfig = {

apps/mobile/src/components/AndroidScreenHeader.tsx+1-7

 @@ -25,13 +25,7 @@ export function AndroidHeaderIconButton(props: {
   readonly disabled?: boolean;
   readonly selected?: boolean;
 }) {
-  return (
+  return <MaterialIconButton {...props} tintColorClassName="accent-header-foreground" />;
-    <MaterialIconButton
-      {...props}
-      tintColorClassName="accent-header-foreground"
-      variant={props.selected ? "tonal" : "standard"}
-    />
-  );
 }
 export function AndroidScreenHeader(props: {

apps/mobile/src/components/AppSymbol.tsx+2-2

apps/mobile/src/components/ScreenHeader.tsx+17-13

...	@@ -103,7 +103,7 @@ export function ScreenHeader(props: ScreenHeaderProps) {	...	@@ -103,7 +103,7 @@ export function ScreenHeader(props: ScreenHeaderProps) {
103	...props.options,	103	...props.options,
104	}}	104	}}
105	/>	105	/>
106	{props.sidebar !== false && layout.usesSplitView ? (	106	{layout.usesSplitView && (props.sidebar !== false \|\| props.backInSplitView) ? (
107	<NativeHeaderToolbar placement="left">	107	<NativeHeaderToolbar placement="left">
108	{props.backInSplitView && (props.backInSplitView.onPress \|\| props.onBack) ? (	108	{props.backInSplitView && (props.backInSplitView.onPress \|\| props.onBack) ? (
109	<ScreenHeaderButton	109	<ScreenHeaderButton
...	@@ -111,18 +111,22 @@ export function ScreenHeader(props: ScreenHeaderProps) {	...	@@ -111,18 +111,22 @@ export function ScreenHeader(props: ScreenHeaderProps) {
111	onPress={props.backInSplitView.onPress ?? props.onBack}	111	onPress={props.backInSplitView.onPress ?? props.onBack}
112	/>	112	/>
113	) : null}	113	) : null}
114	<ScreenHeaderButton	114	{props.sidebar !== false ? (
115	accessibilityLabel={	115	<ScreenHeaderButton
116	panes.primarySidebarVisible ? `Maximize ${props.title.toLowerCase()}` : "Show threads"	116	accessibilityLabel={
117	}	117	panes.primarySidebarVisible
118	icon={	118	? `Maximize ${props.title.toLowerCase()}`
119	panes.primarySidebarVisible ? "arrow.up.left.and.arrow.down.right" : "sidebar.left"	119	: "Show threads"
120	}	120	}
121	onPress={togglePrimarySidebar}	121	icon={
122	separateBackground={	122	panes.primarySidebarVisible ? "arrow.up.left.and.arrow.down.right" : "sidebar.left"
123	props.backInSplitView ? props.backInSplitView.separateBackground : true	123	}
124	}	124	onPress={togglePrimarySidebar}
125	/>	125	separateBackground={
		126	props.backInSplitView ? props.backInSplitView.separateBackground : true
		127	}
		128	/>
		129	) : null}
126	</NativeHeaderToolbar>	130	</NativeHeaderToolbar>
127	) : null}	131	) : null}
128	{(props.actions?.length \|\|	132	{(props.actions?.length \|\|

apps/mobile/src/features/home/HomeRouteScreen.tsx+4-10

 @@ -11,10 +11,6 @@ import { useWorkspaceState } from "../../state/workspace";
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
 import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
 import { WorkspaceEmptyDetail } from "../layout/WorkspaceEmptyDetail";
-import {
-  AndroidWorkspaceSidebarButton,
-  WorkspaceSidebarToolbar,
-} from "../layout/workspace-sidebar-toolbar";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { checkForAppUpdateOnLaunch, startAppUpdateForegroundRecheck } from "../updates/app-updates";
 import { AndroidHomeFabLayout } from "./AndroidHomeFab";
 @@ -121,18 +117,16 @@ export function HomeRouteScreen() {
               : { title: "", headerTitle: "", unstable_headerLeftItems: () => [] }
           }
         />
-        <WorkspaceSidebarToolbar
+        {Platform.OS === "ios" ? (
-          afterSidebarButton={
+          <NativeHeaderToolbar placement="left">
             <NativeHeaderToolbar.Button
               accessibilityLabel="New task"
               icon="square.and.pencil"
               onPress={() => navigation.navigate("NewTaskSheet", { screen: "NewTask" })}
             />
-          }
+          </NativeHeaderToolbar>
-        />
-        {Platform.OS === "android" ? (
-          <AndroidScreenHeader title="Threads" leading={<AndroidWorkspaceSidebarButton />} />
         ) : null}
+        {Platform.OS === "android" ? <AndroidScreenHeader title="Threads" /> : null}
         <WorkspaceEmptyDetail
           onAddConnection={
             Platform.OS === "android" && !catalogState.hasConnections

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx+14-14

 @@ -238,6 +238,7 @@ function AdaptiveWorkspaceLayoutContent(
   const navigation = useNavigation();
   const activeRoleOwner = useRef<symbol | null>(null);
   const [primarySidebarPreferredVisible, setPrimarySidebarPreferredVisible] = useState(true);
+  const showPrimarySidebar = pathname === "/" || primarySidebarPreferredVisible;
   const [supplementaryPanePreferredVisible, setSupplementaryPanePreferredVisible] = useState(true);
   const [supplementaryPanePreferredWidth, setSupplementaryPanePreferredWidth] = useState<
     number | null
 @@ -262,17 +263,9 @@ function AdaptiveWorkspaceLayoutContent(
         viewportWidth: width,
         preferredWidth: fileInspectorPreferredWidth ?? undefined,
         reservedLeadingWidth:
-          shouldRenderPrimarySidebar && primarySidebarPreferredVisible
+          shouldRenderPrimarySidebar && showPrimarySidebar ? (layout.listPaneWidth ?? 0) : 0,
-            ? (layout.listPaneWidth ?? 0)
-            : 0,
       }),
-    [
+    [fileInspectorPreferredWidth, layout, showPrimarySidebar, shouldRenderPrimarySidebar, width],
-      fileInspectorPreferredWidth,
-      layout,
-      primarySidebarPreferredVisible,
-      shouldRenderPrimarySidebar,
-      width,
-    ],
   );
   const auxiliaryPaneRole: WorkspaceAuxiliaryPaneRole =
     focusedAuxiliaryPaneRole ?? (/\/files(?:\/|$)/.test(pathname) ? "inspector" : "supplementary");
 @@ -289,7 +282,7 @@ function AdaptiveWorkspaceLayoutContent(
       deriveWorkspacePaneLayout({
         layout,
         viewportWidth: width,
-        primarySidebarPreferredVisible,
+        primarySidebarPreferredVisible: showPrimarySidebar,
         auxiliaryPanePreferredVisible,
         auxiliaryPaneRole,
         auxiliaryPanePreferredWidth: auxiliaryPanePreferredWidth ?? undefined,
 @@ -299,7 +292,7 @@ function AdaptiveWorkspaceLayoutContent(
       auxiliaryPaneRole,
       auxiliaryPanePreferredWidth,
       layout,
-      primarySidebarPreferredVisible,
+      showPrimarySidebar,
       width,
     ],
   );
 @@ -357,13 +350,16 @@ function AdaptiveWorkspaceLayoutContent(
     };
   }, []);
   const togglePrimarySidebar = useCallback(() => {
+    if (pathname === "/") {
+      return;
+    }
     if (!panes.primarySidebarVisible && panes.primarySidebarSuppressedByAuxiliary) {
       setFileInspectorPreferredVisible(false);
       setPrimarySidebarPreferredVisible(true);
       return;
     }
     setPrimarySidebarPreferredVisible((current) => !current);
-  }, [panes.primarySidebarSuppressedByAuxiliary, panes.primarySidebarVisible]);
+  }, [panes.primarySidebarSuppressedByAuxiliary, panes.primarySidebarVisible, pathname]);
   const revealPrimarySidebar = useCallback(() => {
     if (panes.primarySidebarSuppressedByAuxiliary) {
       setFileInspectorPreferredVisible(false);
 @@ -374,7 +370,11 @@ function AdaptiveWorkspaceLayoutContent(
     togglePrimarySidebar();
     return true;
   }, [togglePrimarySidebar]);
-  useHardwareKeyboardCommand("toggleSidebar", handleToggleSidebarCommand);
+  const sidebarCommands = useMemo(
+    () => (pathname === "/" ? [] : (["toggleSidebar"] as const)),
+    [pathname],
+  );
+  useHardwareKeyboardCommand(sidebarCommands, handleToggleSidebarCommand);
   const showAuxiliaryPane = useCallback((role: WorkspaceAuxiliaryPaneRole) => {
     if (role === "inspector") {
       setFocusedAuxiliaryPaneRole("inspector");

apps/mobile/src/features/layout/workspace-sidebar-toolbar.tsx+2-34

...	@@ -1,5 +1,3 @@	...	@@ -1,5 +1,3 @@
1	import { NativeHeaderToolbar } from "../../native/StackHeader";
2	import type { ReactNode } from "react";
3	import { Platform } from "react-native";	1	import { Platform } from "react-native";
4		2
5	import { AndroidHeaderIconButton } from "../../components/AndroidScreenHeader";	3	import { AndroidHeaderIconButton } from "../../components/AndroidScreenHeader";
...	@@ -12,39 +10,9 @@ export function AndroidWorkspaceSidebarButton() {	...	@@ -12,39 +10,9 @@ export function AndroidWorkspaceSidebarButton() {
12		10
13	return (	11	return (
14	<AndroidHeaderIconButton	12	<AndroidHeaderIconButton
15	accessibilityLabel={	13	accessibilityLabel={panes.primarySidebarVisible ? "Maximize content" : "Show thread sidebar"}
16	panes.primarySidebarVisible ? "Hide thread sidebar" : "Show thread sidebar"	14	icon={panes.primarySidebarVisible ? "arrow.up.left.and.arrow.down.right" : "sidebar.left"}
17	}
18	icon="sidebar.left"
19	selected={panes.primarySidebarVisible}
20	onPress={togglePrimarySidebar}	15	onPress={togglePrimarySidebar}
21	/>	16	/>
22	);	17	);
23	}	18	}
24
25	export function WorkspaceSidebarToolbar(
26	props: {
27	readonly children?: ReactNode;
28	readonly afterSidebarButton?: ReactNode;
29	} = {},
30	) {
31	const { layout, panes, togglePrimarySidebar } = useAdaptiveWorkspaceLayout();
32
33	if (Platform.OS === "android" \|\| !layout.usesSplitView) {
34	return null;
35	}
36
37	return (
38	<NativeHeaderToolbar placement="left">
39	{props.children}
40	<NativeHeaderToolbar.Button
41	accessibilityLabel={
42	panes.primarySidebarVisible ? "Maximize content" : "Show thread sidebar"
43	}
44	icon={panes.primarySidebarVisible ? "arrow.up.left.and.arrow.down.right" : "sidebar.left"}
45	onPress={togglePrimarySidebar}
46	/>
47	{props.afterSidebarButton}
48	</NativeHeaderToolbar>
49	);
50	}

apps/mobile/src/features/settings/SettingsRouteScreen.tsx+13-2

 @@ -6,7 +6,8 @@ import { deriveProjectGroupLabel } from "@t3tools/client-runtime/state/project-g
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { hasCloudPublicConfig } from "../cloud/publicConfig";
-import { WorkspaceSidebarToolbar } from "../layout/workspace-sidebar-toolbar";
+import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
+import { NativeHeaderToolbar } from "../../native/StackHeader";
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
 import { SettingsRow } from "./components/SettingsRow";
 import { SettingsSection } from "./components/SettingsSection";
 @@ -18,6 +19,8 @@ import {
 import { useSettingsEnvironmentFilter } from "./settings-environment-filter";
 export function SettingsRouteScreen() {
+  const navigation = useNavigation();
+  const { layout } = useAdaptiveWorkspaceLayout();
   const content = hasCloudPublicConfig() ? (
     <ConfiguredSettingsRouteScreen />
   ) : (
 @@ -26,7 +29,15 @@ export function SettingsRouteScreen() {
   return (
     <>
-      <WorkspaceSidebarToolbar />
+      {Platform.OS === "ios" && layout.usesSplitView ? (
+        <NativeHeaderToolbar placement="left">
+          <NativeHeaderToolbar.Button
+            accessibilityLabel="Go back"
+            icon="chevron.left"
+            onPress={() => navigation.goBack()}
+          />
+        </NativeHeaderToolbar>
+      ) : null}
       <SettingsEnvironmentFilterHeader closeSettings />
       {Platform.OS === "android" ? (
         <SettingsScreen title="Settings" trailing={<AndroidSettingsEnvironmentFilter />}>

apps/mobile/src/features/settings/components/SettingsEnvironmentFilterHeader.tsx+5-1

 @@ -5,10 +5,13 @@ import { ControlPillMenu } from "../../../components/ControlPill";
 import { SymbolView } from "../../../components/AppSymbol";
 import { NativeStackScreenOptions } from "../../../native/StackHeader";
 import { withNativeGlassHeaderItem } from "../../layout/native-glass-header-items";
+import { useAdaptiveWorkspaceLayout } from "../../layout/AdaptiveWorkspaceLayout";
 import { useSettingsEnvironmentFilter } from "../settings-environment-filter";
 export function SettingsEnvironmentFilterHeader(props: { readonly closeSettings?: boolean }) {
   const navigation = useNavigation();
+  const { layout } = useAdaptiveWorkspaceLayout();
+  const closeSettings = props.closeSettings === true && !layout.usesSplitView;
   const {
     availableTargets,
     selectedTargets,
 @@ -26,6 +29,7 @@ export function SettingsEnvironmentFilterHeader(props: { readonly closeSettings?
       ? "line.3.horizontal.decrease"
       : "line.3.horizontal.decrease.circle.fill";
   const filterVersion = JSON.stringify({
+    closeSettings,
     selection: selectedIds === null ? null : [...selectedIds].sort(),
     targets: availableTargets.map((entry) => [entry.environmentId, entry.label, entry.displayUrl]),
     project: selectedProjectKey,
 @@ -94,7 +98,7 @@ export function SettingsEnvironmentFilterHeader(props: { readonly closeSettings?
               ],
             },
           }),
-          ...(props.closeSettings
+          ...(closeSettings
             ? [
                 withNativeGlassHeaderItem({
                   accessibilityLabel: "Close settings",

apps/mobile/src/features/settings/components/SettingsScreen.tsx+1-1

...	@@ -23,7 +23,7 @@ export function SettingsScreen(	...	@@ -23,7 +23,7 @@ export function SettingsScreen(
23	title={props.title}	23	title={props.title}
24	actions={props.actions}	24	actions={props.actions}
25	trailing={Platform.OS === "android" ? props.trailing : undefined}	25	trailing={Platform.OS === "android" ? props.trailing : undefined}
26	sidebar={Platform.OS === "android" && !props.formSheet}	26	sidebar={false}
27	onBack={() => navigation.goBack()}	27	onBack={() => navigation.goBack()}
28	hideBottomBorder={!props.formSheet}	28	hideBottomBorder={!props.formSheet}
29	/>	29	/>

apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx+2-3

 @@ -100,9 +100,8 @@ function TerminalHeader(props: {
       subtitle={props.subtitle}
       onBack={props.onCloseTerminal}
       backInSplitView={{
-        accessibilityLabel: "Close terminal",
+        accessibilityLabel: "Back to chat",
-        icon: "xmark",
+        icon: "chevron.left",
-        separateBackground: true,
       }}
       menus={
         props.isEnvironmentReady

apps/mobile/src/features/threads/NewTaskRouteScreen.tsx+10-14

 @@ -98,28 +98,24 @@ function NewTaskHeader(props: {
       title={props.title}
       subtitle={props.subtitle ?? undefined}
       sidebar={false}
+      backInSplitView={{
+        accessibilityLabel: "Go back",
+        icon: "chevron.left",
+      }}
+      options={{ headerBackVisible: !layout.usesSplitView }}
       hideBottomBorder
       onBack={() => navigation.goBack()}
-      actions={[
+      actions={
-        ...(Platform.OS === "ios" && layout.usesSplitView
+        props.canAddProject
-          ? [
-              {
-                accessibilityLabel: "Close new task",
-                icon: "xmark" as const,
-                onPress: () => navigation.goBack(),
-              },
-            ]
-          : []),
-        ...(props.canAddProject
           ? [
               {
                 accessibilityLabel: "Add project",
-                icon: "plus" as const,
+                icon: "plus",
                 onPress: () => navigation.dispatch(StackActions.push("AddProject")),
               },
             ]
-          : []),
+          : []
-      ]}
+      }
       search={{
         value: props.searchText,
         onChangeText: props.onSearchTextChange,

author	Julius Marminge <julius0216@outlook.com> 2026-09-18 23:58:18-07:00
committer	GitHub <noreply@github.com> 2026-09-18 23:58:18-07:00
log	29a23fdf1481485593d7d90e195b7c8bf2a705a8
tree	de38807a6b63ea7b761333eba8701112f501867c
parent	803f94e787faef498edecba5dbd07493ac8bc817
signature	Signed by PGP key B5690EEEBB952194

...	@@ -19,7 +19,7 @@ import IconArrowUp from "@tabler/icons-react-native/IconArrowUp";	...	@@ -19,7 +19,7 @@ import IconArrowUp from "@tabler/icons-react-native/IconArrowUp";
19	import IconArrowUpCircle from "@tabler/icons-react-native/IconArrowUpCircle";	19	import IconArrowUpCircle from "@tabler/icons-react-native/IconArrowUpCircle";
20	import IconArrowUpRight from "@tabler/icons-react-native/IconArrowUpRight";	20	import IconArrowUpRight from "@tabler/icons-react-native/IconArrowUpRight";
21	import IconArrowUpRightCircle from "@tabler/icons-react-native/IconArrowUpRightCircle";	21	import IconArrowUpRightCircle from "@tabler/icons-react-native/IconArrowUpRightCircle";
22	import IconArrowsMaximize from "@tabler/icons-react-native/IconArrowsMaximize";	22	import IconArrowsDiagonal2 from "@tabler/icons-react-native/IconArrowsDiagonal2";
23	import IconArrowsMinimize from "@tabler/icons-react-native/IconArrowsMinimize";	23	import IconArrowsMinimize from "@tabler/icons-react-native/IconArrowsMinimize";
24	import IconBellRinging from "@tabler/icons-react-native/IconBellRinging";	24	import IconBellRinging from "@tabler/icons-react-native/IconBellRinging";
25	import IconBolt from "@tabler/icons-react-native/IconBolt";	25	import IconBolt from "@tabler/icons-react-native/IconBolt";
...	@@ -122,7 +122,7 @@ const ANDROID_ICON_BY_SF_SYMBOL = {	...	@@ -122,7 +122,7 @@ const ANDROID_ICON_BY_SF_SYMBOL = {
122	"arrow.turn.left.up": IconArrowBackUp,	122	"arrow.turn.left.up": IconArrowBackUp,
123	"arrow.up": IconArrowUp,	123	"arrow.up": IconArrowUp,
124	"arrow.up.circle": IconArrowUpCircle,	124	"arrow.up.circle": IconArrowUpCircle,
125	"arrow.up.left.and.arrow.down.right": IconArrowsMaximize,	125	"arrow.up.left.and.arrow.down.right": IconArrowsDiagonal2,
126	"arrow.down.right.and.arrow.up.left": IconArrowsMinimize,	126	"arrow.down.right.and.arrow.up.left": IconArrowsMinimize,
127	"arrow.up.right": IconArrowUpRight,	127	"arrow.up.right": IconArrowUpRight,
128	"arrow.up.right.circle": IconArrowUpRightCircle,	128	"arrow.up.right.circle": IconArrowUpRightCircle,

fix(mobile): adapt workspace navigation and expand controls (#12551)