import type {  NativeStackHeaderItem,  NativeStackNavigationOptions,} from "@react-navigation/native-stack";import { useEffect, useRef, useState, type ReactNode } from "react";import { ActivityIndicator, Animated, Platform, Pressable, View } from "react-native"; import { SymbolView } from "../../components/AppSymbol";import { AppText as Text } from "../../components/AppText";import { brandTitleOffset, CompactBrandTitle } from "../../components/CompactBrandTitle";import { useThemeColor } from "../../lib/useThemeColor";import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";import { useWorkspaceState } from "../../state/workspace";import {  workspaceConnectionStatusPresentation,  type WorkspaceConnectionStatusPresentation,} from "./workspace-connection-status"; /** * Delay before a connection interruption surfaces in the title slot. Sub-second * blips (the common reconnect case) resolve without any UI at all. */const STATUS_SHOW_DELAY_MS = 800;const FADE_IN_MS = 250; /** * Connection status presentation, debounced for display: null until the * workspace has been in a non-connected state for STATUS_SHOW_DELAY_MS, * then live-updating until the workspace reconnects (null again immediately). */function useDelayedConnectionStatus(): WorkspaceConnectionStatusPresentation | null {  const { state } = useWorkspaceState();  const presentation = workspaceConnectionStatusPresentation(state);  const hasStatus = presentation !== null;  const [visible, setVisible] = useState(false);   useEffect(() => {    if (!hasStatus) {      setVisible(false);      return;    }    const timer = setTimeout(() => setVisible(true), STATUS_SHOW_DELAY_MS);    return () => clearTimeout(timer);  }, [hasStatus]);   return visible ? presentation : null;} /** * One-shot entrance fade for the status label. Deliberately JS-driven: this can * mount inside a native header item (RNSScreenStackHeaderSubview), where * native-driver animated nodes blank the re-hosted view entirely. The JS driver * updates opacity through the ordinary style path, which those subviews handle. */function StatusFadeIn(props: { readonly children: ReactNode; readonly grow?: boolean }) {  const opacity = useRef(new Animated.Value(0)).current;   useEffect(() => {    const animation = Animated.timing(opacity, {      duration: FADE_IN_MS,      toValue: 1,      useNativeDriver: false,    });    animation.start();    return () => animation.stop();  }, [opacity]);   return (    <Animated.View      style={[        { alignItems: "center", flexDirection: "row", opacity },        props.grow ? { flex: 1, minWidth: 0 } : null,      ]}    >      {props.children}    </Animated.View>  );} /** * Renders the brand/title slot of a thread-list surface, swapping the brand * for the workspace connection status while an environment is unavailable. * * Both states occupy the same slot, so connection changes never shift the * layout below. While connected the brand renders untouched — no wrapper — * keeping the native header item on the exact element tree that predates the * status swap. Replaces the old WorkspaceConnectionStatus pill, which inserted * a row above the thread list. */export function WorkspaceConnectionTitle(props: {  /** Content shown while connected (brand lockup or a screen title). */  readonly brand: ReactNode;  /** Opens environment settings. Status is not pressable when omitted. */  readonly onPress?: () => void;  /** Fill the available row width (in-flow headers) instead of hugging content (native title slots). */  readonly grow?: boolean;  readonly size?: "navbar" | "pageTitle";  /** Horizontal correction so the status aligns with the brand in native title slots. */  readonly statusOffset?: number;}) {  const iconColor = String(useThemeColor("--color-icon-muted"));  const status = useDelayedConnectionStatus();  const size = props.size ?? "navbar";   if (status === null) {    return props.grow ? (      <View style={{ alignItems: "center", flex: 1, flexDirection: "row", minWidth: 0 }}>        {props.brand}      </View>    ) : (      <>{props.brand}</>    );  }   return (    <StatusFadeIn grow={props.grow}>      <Pressable        accessibilityHint="Opens environment settings"        accessibilityLabel={status.label}        accessibilityRole="button"        disabled={props.onPress === undefined}        hitSlop={8}        onPress={props.onPress}        className="flex-row items-center gap-2"        style={{ marginLeft: props.statusOffset ?? 0 }}      >        {status.showsProgress ? (          <ActivityIndicator color={iconColor} size="small" />        ) : (          <SymbolView            name="wifi.slash"            size={size === "pageTitle" ? 17 : 15}            tintColor={iconColor}            type="monochrome"          />        )}        <Text          className={            size === "pageTitle"              ? "text-[20px] font-t3-bold text-foreground-muted"              : "text-[16px] font-t3-bold text-foreground-muted"          }          numberOfLines={1}          style={{ flexShrink: 1 }}        >          {status.label}        </Text>      </Pressable>    </StatusFadeIn>  );} /** * getCompactBrandHeaderOptions with the brand slot upgraded to the * connection-status swap. Screens with an environment-settings callback apply * this over the static brand options at mount. */export function getConnectionAwareBrandHeaderOptions(opts: {  readonly onOpenEnvironments: () => void;  readonly fallbackTitleStyle?: NativeStackNavigationOptions["headerTitleStyle"];}): NativeStackNavigationOptions {  if (Platform.OS === "ios" && NATIVE_LIQUID_GLASS_SUPPORTED) {    return {      headerTitle: "Threads",      headerTitleStyle: { color: "transparent", fontSize: 18, fontWeight: "800" },      title: "Threads",      unstable_headerLeftItems: (): NativeStackHeaderItem[] => [        {          element: (            <WorkspaceConnectionTitle              brand={<CompactBrandTitle nativeLeadingItem />}              onPress={opts.onOpenEnvironments}              statusOffset={brandTitleOffset(true)}            />          ),          hidesSharedBackground: true,          type: "custom",        },      ],    };  }   return {    headerTitle: () => (      <WorkspaceConnectionTitle        brand={<CompactBrandTitle />}        onPress={opts.onOpenEnvironments}        statusOffset={brandTitleOffset(false)}      />    ),    headerTitleStyle: opts.fallbackTitleStyle,    title: "Threads",  };}