feat(mobile): split wide Android Settings into two panes (#24298)

Author: PixPMusic

apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx

@@ -95,9 +95,13 @@ import {
   currentWorkspaceSelections,
   workspaceSelectionCheck,
 } from "../workspace/workspace-selection-store";
-import { workspaceTabNavigationState } from "../workspace/workspace-tab-navigation";
+import {
+  workspaceTabColumns,
+  workspaceTabNavigationState,
+} from "../workspace/workspace-tab-navigation";
 import type { WorkspaceTab } from "../workspace/workspace-tabs-state";
 import { workspaceRoutesOf } from "./workspace-overlay-routes";
+import { SettingsWorkspaceLayout } from "../settings/SettingsWorkspaceLayout";
 
 export { useAdaptiveWorkspaceLayout };
 
@@ -478,7 +482,7 @@ function AdaptiveWorkspaceLayoutContent(
       tab,
       currentWorkspaceSelections(),
       {
-        columns: Platform.OS === "ios" && (options?.columns ?? layout.usesSplitView),
+        columns: workspaceTabColumns(Platform.OS, tab, options?.columns ?? layout.usesSplitView),
         check: workspaceSelectionCheck,
         overlays,
       },
@@ -908,7 +912,9 @@ function AdaptiveWorkspaceLayoutContent(
                         compactAndroidSettings ? { ...safeAreaInsets, bottom: 0 } : safeAreaInsets
                       }
                     >
-                      <View className="flex-1">{props.children}</View>
+                      <View className="flex-1">
+                        <SettingsWorkspaceLayout>{props.children}</SettingsWorkspaceLayout>
+                      </View>
                     </SafeAreaInsetsContext>
                     {compactAndroidSettings ? (
                       <AndroidWorkspaceNavigation onNewThread={handleStartNewTask} />

apps/mobile/src/features/settings/SettingsRouteScreen.tsx

@@ -24,7 +24,7 @@ import { deriveProjectGroupLabel } from "@t3tools/client-runtime/state/project-g
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { hasCloudPublicConfig } from "../cloud/publicConfig";
-import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
+import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
 import { SettingsRow } from "./components/SettingsRow";
 import { SettingsSection, SettingsSidebarContext } from "./components/SettingsSection";
@@ -39,8 +39,6 @@ import { filterSettingsSections } from "./settings-search";
 import { NativePrimaryColumnContext } from "../../native/v5-workspace-context";
 
 export function SettingsRouteScreen() {
-  const surface = useWorkspaceSurface();
-  const workspace = useWorkspaceTabs();
   const { layout } = useAdaptiveWorkspaceLayout();
   const inSidebar = use(NativePrimaryColumnContext) !== null && layout.usesSplitView;
   // The page open beside the list: the route right above the Settings tab's route. While
@@ -52,6 +50,17 @@ export function SettingsRouteScreen() {
       ? rememberedSettingsPage(currentWorkspaceSelections())
       : (state.routes[list + 1]?.name ?? null);
   });
+  return <SettingsListScreen sidebar={inSidebar} selected={selected} />;
+}
+
+export function SettingsListScreen(props: {
+  readonly sidebar: boolean;
+  readonly selected: string | null;
+}) {
+  const surface = useWorkspaceSurface();
+  const workspace = useWorkspaceTabs();
+  const inSidebar = props.sidebar;
+  const selected = props.selected;
   const sidebar = useMemo(() => (inSidebar ? { selected } : null), [inSidebar, selected]);
   const content = hasCloudPublicConfig() ? (
     <ConfiguredSettingsRouteScreen />
@@ -66,6 +75,7 @@ export function SettingsRouteScreen() {
         {Platform.OS === "android" ? (
           <SettingsScreen
             title="Settings"
+            workspaceRoot={inSidebar}
             trailing={<AndroidSettingsEnvironmentFilter />}
             search={
               workspace

apps/mobile/src/features/settings/SettingsWorkspaceLayout.android.tsx

@@ -0,0 +1,57 @@
+import { NavigationRouteContext } from "@react-navigation/native";
+import { Activity, useState, type ReactNode } from "react";
+import { View } from "react-native";
+
+import { AppText } from "../../components/ui/AppText";
+import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
+import { useAndroidWorkspaceRoot } from "../workspace/AndroidWorkspaceTabsProvider";
+import { SettingsListScreen } from "./SettingsRouteScreen";
+import { SettingsScreen } from "./components/SettingsScreen";
+
+const SETTINGS_LIST_ROUTE = { key: "settings-sidebar", name: "Settings" };
+
+export function SettingsWorkspaceLayout(props: { readonly children: ReactNode }) {
+  const root = useAndroidWorkspaceRoot();
+  const { layout } = useAdaptiveWorkspaceLayout();
+  const split = root?.settingsOpen === true && layout.usesSplitView;
+  const [visited, setVisited] = useState(split);
+  if (split && !visited) setVisited(true);
+  const emptyDetail = split && root.settingsPage === null;
+  const route = root?.settingsRoute ?? SETTINGS_LIST_ROUTE;
+
+  return (
+    <View className="flex-1 flex-row">
+      {visited ? (
+        <Activity mode={split ? "visible" : "hidden"}>
+          <View style={{ width: layout.listPaneWidth ?? 0, marginRight: layout.listPaneGap ?? 0 }}>
+            <NavigationRouteContext value={route}>
+              <SettingsListScreen sidebar selected={root?.settingsPage ?? null} />
+            </NavigationRouteContext>
+          </View>
+        </Activity>
+      ) : null}
+      <View className="flex-1">
+        <View
+          className="flex-1"
+          pointerEvents={emptyDetail ? "none" : "auto"}
+          accessibilityElementsHidden={emptyDetail}
+          importantForAccessibility={emptyDetail ? "no-hide-descendants" : "auto"}
+          style={emptyDetail ? { opacity: 0 } : undefined}
+        >
+          {props.children}
+        </View>
+        {emptyDetail ? (
+          <View className="absolute inset-0">
+            <NavigationRouteContext value={route}>
+              <SettingsScreen title="Settings" workspaceRoot>
+                <View className="flex-1 items-center justify-center p-6">
+                  <AppText className="text-foreground-muted">Select a setting</AppText>
+                </View>
+              </SettingsScreen>
+            </NavigationRouteContext>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

apps/mobile/src/features/settings/SettingsWorkspaceLayout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export function SettingsWorkspaceLayout(props: { readonly children: ReactNode }) {
+  return props.children;
+}

apps/mobile/src/features/settings/components/SettingsScreen.tsx

@@ -9,6 +9,7 @@ import { useWorkspaceTabs } from "../../workspace/WorkspaceTabsContext";
 import { useWorkspaceSurface } from "../../workspace/useWorkspaceSurface";
 import { useDeviceType } from "../../../native/native-layout-metrics";
 import { useCompactWorkspaceTabs } from "../../workspace/useSystemWorkspaceTabBar";
+import { useAdaptiveWorkspaceLayout } from "../../layout/adaptive-workspace-context";
 import {
   ScreenScrollViewBottomInset,
   ScreenScrollViewSurface,
@@ -29,6 +30,7 @@ export function SettingsScreen(
   const surface = useWorkspaceSurface();
   const deviceType = useDeviceType();
   const compactTabs = useCompactWorkspaceTabs();
+  const { layout } = useAdaptiveWorkspaceLayout();
   const cover = deviceType === "duo-folded";
   // Android opens Settings as a workspace tab; its root page has nothing to go back to.
   const workspaceRoot =
@@ -55,7 +57,11 @@ export function SettingsScreen(
           {props.formSheet ? (
             props.children
           ) : (
-            <SettingsScreenContent>{props.children}</SettingsScreenContent>
+            <SettingsScreenContent
+              insetHorizontal={Platform.OS === "android" && layout.usesSplitView}
+            >
+              {props.children}
+            </SettingsScreenContent>
           )}
         </ScreenScrollViewSurface>
       </ScreenScrollViewBottomInset>

apps/mobile/src/features/workspace/AndroidWorkspaceNavigation.android.tsx

@@ -118,7 +118,9 @@ export function AndroidWorkspaceNavigation(props: {
           // Reset the root stack even when a nested settings navigator has focus.
           if (root) {
             navigation.dispatch({
-              ...CommonActions.reset(androidWorkspaceTabNavigationState(root.getState(), tab)),
+              ...CommonActions.reset(
+                androidWorkspaceTabNavigationState(root.getState(), tab, rail),
+              ),
               target: root.key,
             });
           }

apps/mobile/src/features/workspace/AndroidWorkspaceTabsProvider.tsx

@@ -21,6 +21,8 @@ interface AndroidWorkspaceRoot {
   readonly getState: () => NavigationState;
   /** Settings is derived from navigation rather than kept in the tab reducer. */
   readonly settingsOpen: boolean;
+  readonly settingsRoute: NavigationState["routes"][number] | undefined;
+  readonly settingsPage: string | null;
 }
 
 const AndroidWorkspaceRootContext = createContext<AndroidWorkspaceRoot | null>(null);
@@ -41,7 +43,14 @@ export function AndroidWorkspaceTabsProvider(props: {
   const getState = useCallback(() => stateRef.current, []);
   const key = props.state.key;
   const settingsOpen = Platform.OS === "android" && androidWorkspaceSettingsOpen(props.state);
-  const root = useMemo(() => ({ key, getState, settingsOpen }), [key, getState, settingsOpen]);
+  const settingsIndex = props.state.routes.findIndex((route) => route.name === "Settings");
+  const settingsRoute = settingsIndex < 0 ? undefined : props.state.routes[settingsIndex];
+  const settingsPage =
+    settingsIndex < 0 ? null : (props.state.routes[settingsIndex + 1]?.name ?? null);
+  const root = useMemo(
+    () => ({ key, getState, settingsOpen, settingsRoute, settingsPage }),
+    [key, getState, settingsOpen, settingsRoute, settingsPage],
+  );
   return Platform.OS === "android" ? (
     <WorkspaceTabsProvider>
       <AndroidWorkspaceRootContext value={root}>{props.children}</AndroidWorkspaceRootContext>

apps/mobile/src/features/workspace/android-workspace-tabs.ts

@@ -6,6 +6,7 @@ import {
   settingsOpenIn,
 } from "../settings/settings-navigation";
 import type { WorkspaceTab } from "./workspace-tabs-state";
+import { rememberedSettingsPage, workspaceSelectionsIn } from "./workspace-tab-navigation";
 
 /** Settings joins the two list tabs as a top-level Android destination. */
 export type AndroidWorkspaceNavigationTab = WorkspaceTab | "settings";
@@ -16,9 +17,15 @@ const WORKSPACE_ROUTES = new Set(["Home", "Thread", "PullRequest"]);
 export function androidWorkspaceTabNavigationState(
   state: NavigationState,
   tab: AndroidWorkspaceNavigationTab,
+  columns = false,
 ) {
   const home = androidWorkspaceNavigationState(state);
-  return tab === "settings" ? settingsNavigationState(home, undefined) : home;
+  if (tab !== "settings") return home;
+  const page = columns
+    ? rememberedSettingsPage(workspaceSelectionsIn(state.routes, {}))
+    : undefined;
+  const current = state.routes.find((route) => route.name === page);
+  return settingsNavigationState(state, page, current?.params);
 }
 
 /** Settings stays selected while one of its pages is the topmost workspace route. */

apps/mobile/src/features/workspace/useSelectWorkspaceTab.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { Keyboard } from "react-native";
 
-import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
+import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
 import { useWorkspaceTabs } from "./WorkspaceTabsContext";
 import type { WorkspaceTab } from "./workspace-tabs-state";
 

apps/mobile/src/features/workspace/useSystemWorkspaceTabBar.ts

@@ -1,6 +1,6 @@
 import { isDuoDevice } from "../../lib/device-type";
 import { Platform } from "react-native";
-import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
+import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
 import { useDeviceType, useNativeLayoutMetrics } from "../../native/native-layout-metrics";
 import { useWorkspaceTabs } from "./WorkspaceTabsContext";
 import { workspaceUsesColumns } from "./workspace-tabs-state";