fix(mobile): Usage and Settings use the glass header and the Duo rail

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

@@ -19,7 +19,6 @@ import { Platform, View } from "react-native";
 import { useWorkspaceSurface } from "../workspace/useWorkspaceSurface";
 import { useDeviceType } from "../../native/native-layout-metrics";
 import { useCompactWorkspaceTabs } from "../workspace/useSystemWorkspaceTabBar";
-import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { deriveProjectGroupLabel } from "@t3tools/client-runtime/state/project-grouping";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -47,15 +46,6 @@ export function SettingsRouteScreen() {
 
   return (
     <View className={`flex-1 ${surface.className}`}>
-      {Platform.OS === "ios" ? (
-        <NativeStackScreenOptions
-          options={{
-            headerTransparent: false,
-            headerStyle: { backgroundColor: surface.backgroundColor },
-            contentStyle: { backgroundColor: surface.backgroundColor },
-          }}
-        />
-      ) : null}
       <SettingsEnvironmentFilterHeader />
       <ScreenScrollViewBottomInset value={deviceType === "pad" || compactTabs ? 80 : 0}>
         {Platform.OS === "android" ? (

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

@@ -8,7 +8,6 @@ import { ScreenContent as SettingsScreenContent } from "../../../components/ui/S
 import { useWorkspaceTabs } from "../../workspace/WorkspaceTabsContext";
 import { useWorkspaceSurface } from "../../workspace/useWorkspaceSurface";
 import { useDeviceType } from "../../../native/native-layout-metrics";
-import { NativeStackScreenOptions } from "../../../native/StackHeader";
 import { useCompactWorkspaceTabs } from "../../workspace/useSystemWorkspaceTabBar";
 import { ScreenScrollViewBottomInset } from "../../../components/ui/ScreenScrollView";
 
@@ -47,15 +46,6 @@ export function SettingsScreen(
         onBack={workspaceRoot ? undefined : () => navigation.goBack()}
         hideBottomBorder={!props.formSheet}
       />
-      {Platform.OS === "ios" && (workspaceRoot || cover) ? (
-        <NativeStackScreenOptions
-          options={{
-            headerTransparent: false,
-            headerStyle: { backgroundColor: surface.backgroundColor },
-            contentStyle: { backgroundColor: surface.backgroundColor },
-          }}
-        />
-      ) : null}
       <ScreenScrollViewBottomInset value={deviceType === "pad" || compactTabs ? 80 : 0}>
         {props.formSheet ? (
           props.children

apps/mobile/src/features/usage/UsageRouteScreen.tsx

@@ -56,6 +56,7 @@ import { UsageLimitsSection } from "./UsageLimitsPooled";
 import { Menu } from "../../components/ui/Menu";
 import { SymbolView } from "../../components/ui/AppSymbol";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
+import { withNativeGlassHeaderItem } from "../layout/native-glass-header-items";
 import type { UsageChartMetric } from "./usageChartData";
 import { PROVIDER_LABEL, useProviderColors, useUsageMixColors } from "./usageProviders";
 
@@ -245,8 +246,31 @@ function UsageScreen(props: {
     <SettingsScreen title="Usage" trailing={environmentFilter} workspaceRoot={props.workspace}>
       {Platform.OS === "ios" ? (
         <NativeStackScreenOptions
-          optionsVersion={environmentFilter}
-          options={{ headerRight: () => environmentFilter }}
+          optionsVersion={JSON.stringify({ showEnvironmentFilter, filterIcon, environmentActions })}
+          options={{
+            // A native menu item, unlike a custom view, moves into the Duo's vertical bar.
+            unstable_headerRightItems: () =>
+              showEnvironmentFilter
+                ? [
+                    withNativeGlassHeaderItem({
+                      accessibilityLabel: "Filter usage environments",
+                      icon: { name: filterIcon, type: "sfSymbol" },
+                      label: "",
+                      type: "menu",
+                      menu: {
+                        title: "Environments",
+                        items: environmentActions.map((action) => ({
+                          type: "action" as const,
+                          label: action.title,
+                          description: action.subtitle,
+                          state: action.state === "on" ? ("on" as const) : undefined,
+                          onPress: () => selectEnvironment(action.id),
+                        })),
+                      },
+                    }),
+                  ]
+                : [],
+          }}
         />
       ) : null}
       <ScrollView

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

@@ -7,9 +7,7 @@ export function WorkspaceExtraTab(_props: {
 }) {
   return (
     <>
-      <NativeStackScreenOptions
-        options={{ headerSearchBarOptions: undefined, unstable_headerRightItems: undefined }}
-      />
+      <NativeStackScreenOptions options={{ headerSearchBarOptions: undefined }} />
       <UsageRouteScreen workspace />
     </>
   );

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

@@ -93,7 +93,6 @@ function WorkspaceRootContent() {
   const keyboardHeight = useKeyboardState((keyboard) => keyboard.height);
   const workspace = useWorkspaceTabs()!;
   const { state } = workspace;
-  const solidHeader = deviceType === "duo-folded" || state.selectedTab === "usage";
   const renderHeaderTitle = useCallback(
     () => (
       <WorkspaceRootTitle
@@ -150,16 +149,11 @@ function WorkspaceRootContent() {
             options={{
               title: enabled.length ? TAB_TITLES[state.selectedTab] : "Navigation",
               headerShown: true,
-              headerTransparent: solidHeader ? false : NATIVE_LIQUID_GLASS_SUPPORTED,
-              headerStyle: solidHeader
-                ? { backgroundColor: surface.backgroundColor }
-                : NATIVE_LIQUID_GLASS_SUPPORTED
-                  ? { backgroundColor: "transparent" }
-                  : undefined,
-              contentStyle: solidHeader ? { backgroundColor: surface.backgroundColor } : undefined,
-              ...(state.selectedTab !== "usage" || enabled.length === 0
-                ? { headerRight: undefined }
-                : {}),
+              headerTransparent: NATIVE_LIQUID_GLASS_SUPPORTED,
+              headerStyle: NATIVE_LIQUID_GLASS_SUPPORTED
+                ? { backgroundColor: "transparent" }
+                : undefined,
+              contentStyle: undefined,
               ...(enabled.length === 0
                 ? { headerSearchBarOptions: undefined, unstable_headerRightItems: () => [] }
                 : {}),