import type {  EnvironmentId,  SidebarProjectGroupingMode,  SidebarThreadSortOrder,} from "@t3tools/contracts";import {  DEFAULT_SIDEBAR_PROJECT_GROUPING_MODE,  DEFAULT_SIDEBAR_PROJECT_SORT_ORDER,  DEFAULT_SIDEBAR_THREAD_SORT_ORDER,} from "@t3tools/contracts";import { Stack } from "expo-router";import { Text as RNText, View } from "react-native"; import { useThemeColor } from "../../lib/useThemeColor";import { MOBILE_TYPOGRAPHY } from "../../lib/typography";import type { HomeProjectSortOrder } from "./homeThreadList"; export interface HomeHeaderEnvironment {  readonly environmentId: EnvironmentId;  readonly label: string;} const PROJECT_SORT_OPTIONS: ReadonlyArray<{  readonly value: HomeProjectSortOrder;  readonly label: string;}> = [  { value: "updated_at", label: "Last user message" },  { value: "created_at", label: "Created at" },]; const THREAD_SORT_OPTIONS: ReadonlyArray<{  readonly value: SidebarThreadSortOrder;  readonly label: string;}> = [  { value: "updated_at", label: "Last user message" },  { value: "created_at", label: "Created at" },]; const PROJECT_GROUPING_OPTIONS: ReadonlyArray<{  readonly value: SidebarProjectGroupingMode;  readonly label: string;  readonly subtitle: string;}> = [  {    value: "repository",    label: "Group by repository",    subtitle: "Combine matching repositories across environments",  },  {    value: "repository_path",    label: "Group by repository path",    subtitle: "Combine only matching paths within a repository",  },  {    value: "separate",    label: "Keep separate",    subtitle: "Show every project path separately",  },]; export function HomeHeader(props: {  readonly environments: ReadonlyArray<HomeHeaderEnvironment>;  readonly selectedEnvironmentId: EnvironmentId | null;  readonly projectSortOrder: HomeProjectSortOrder;  readonly threadSortOrder: SidebarThreadSortOrder;  readonly projectGroupingMode: SidebarProjectGroupingMode;  readonly onSearchQueryChange: (query: string) => void;  readonly onEnvironmentChange: (environmentId: EnvironmentId | null) => void;  readonly onProjectSortOrderChange: (sortOrder: HomeProjectSortOrder) => void;  readonly onThreadSortOrderChange: (sortOrder: SidebarThreadSortOrder) => void;  readonly onProjectGroupingModeChange: (mode: SidebarProjectGroupingMode) => void;  readonly onOpenSettings: () => void;  readonly onStartNewTask: () => void;}) {  const iconColor = useThemeColor("--color-icon");  const mutedColor = useThemeColor("--color-foreground-muted");  const subtleColor = useThemeColor("--color-subtle");  const hasCustomListOptions =    props.selectedEnvironmentId !== null ||    props.projectSortOrder !== DEFAULT_SIDEBAR_PROJECT_SORT_ORDER ||    props.threadSortOrder !== DEFAULT_SIDEBAR_THREAD_SORT_ORDER ||    props.projectGroupingMode !== DEFAULT_SIDEBAR_PROJECT_GROUPING_MODE;   return (    <>      <Stack.Screen        options={{          headerShown: true,          headerTransparent: true,          headerStyle: { backgroundColor: "transparent" },          headerShadowVisible: false,          headerTintColor: iconColor,          headerTitle: "",          headerSearchBarOptions: {            placeholder: "Search threads",            hideNavigationBar: false,            onChangeText: (event) => {              props.onSearchQueryChange(event.nativeEvent.text);            },            onCancelButtonPress: () => {              props.onSearchQueryChange("");            },            allowToolbarIntegration: true,          },        }}      />       <Stack.Toolbar placement="left">        <Stack.Toolbar.View hidesSharedBackground>          <View            style={{              width: 128,              height: 32,              flexDirection: "row",              alignItems: "center",              gap: 8,            }}          >            <RNText              style={{                fontFamily: "DMSans_700Bold",                fontSize: MOBILE_TYPOGRAPHY.headline.fontSize,                color: iconColor,                letterSpacing: -0.4,              }}            >              T3 Code            </RNText>            <View              style={{                backgroundColor: subtleColor,                borderRadius: 99,                paddingHorizontal: 8,                paddingVertical: 3,              }}            >              <RNText                style={{                  fontFamily: "DMSans_700Bold",                  fontSize: MOBILE_TYPOGRAPHY.micro.fontSize,                  color: mutedColor,                  letterSpacing: 1.1,                  textTransform: "uppercase",                }}              >                Alpha              </RNText>            </View>          </View>        </Stack.Toolbar.View>      </Stack.Toolbar>       <Stack.Toolbar placement="right">        <Stack.Toolbar.Menu          accessibilityLabel="Filter and sort threads"          icon={            hasCustomListOptions              ? "line.3.horizontal.decrease.circle.fill"              : "line.3.horizontal.decrease.circle"          }          separateBackground          title="Thread list options"        >          <Stack.Toolbar.Menu title="Environment">            <Stack.Toolbar.Label>Environment</Stack.Toolbar.Label>            <Stack.Toolbar.MenuAction              isOn={props.selectedEnvironmentId === null}              onPress={() => props.onEnvironmentChange(null)}              subtitle="Show threads from every environment"            >              <Stack.Toolbar.Label>All environments</Stack.Toolbar.Label>            </Stack.Toolbar.MenuAction>            {props.environments.map((environment) => (              <Stack.Toolbar.MenuAction                key={environment.environmentId}                isOn={props.selectedEnvironmentId === environment.environmentId}                onPress={() => props.onEnvironmentChange(environment.environmentId)}              >                <Stack.Toolbar.Label>{environment.label}</Stack.Toolbar.Label>              </Stack.Toolbar.MenuAction>            ))}          </Stack.Toolbar.Menu>           <Stack.Toolbar.Menu title="Sort projects">            <Stack.Toolbar.Label>Sort projects</Stack.Toolbar.Label>            {PROJECT_SORT_OPTIONS.map((option) => (              <Stack.Toolbar.MenuAction                key={option.value}                isOn={props.projectSortOrder === option.value}                onPress={() => props.onProjectSortOrderChange(option.value)}              >                <Stack.Toolbar.Label>{option.label}</Stack.Toolbar.Label>              </Stack.Toolbar.MenuAction>            ))}          </Stack.Toolbar.Menu>           <Stack.Toolbar.Menu title="Sort threads">            <Stack.Toolbar.Label>Sort threads</Stack.Toolbar.Label>            {THREAD_SORT_OPTIONS.map((option) => (              <Stack.Toolbar.MenuAction                key={option.value}                isOn={props.threadSortOrder === option.value}                onPress={() => props.onThreadSortOrderChange(option.value)}              >                <Stack.Toolbar.Label>{option.label}</Stack.Toolbar.Label>              </Stack.Toolbar.MenuAction>            ))}          </Stack.Toolbar.Menu>           <Stack.Toolbar.Menu title="Group projects">            <Stack.Toolbar.Label>Group projects</Stack.Toolbar.Label>            {PROJECT_GROUPING_OPTIONS.map((option) => (              <Stack.Toolbar.MenuAction                key={option.value}                isOn={props.projectGroupingMode === option.value}                onPress={() => props.onProjectGroupingModeChange(option.value)}                subtitle={option.subtitle}              >                <Stack.Toolbar.Label>{option.label}</Stack.Toolbar.Label>              </Stack.Toolbar.MenuAction>            ))}          </Stack.Toolbar.Menu>        </Stack.Toolbar.Menu>         <Stack.Toolbar.Button          accessibilityLabel="Open settings"          icon="gearshape"          onPress={props.onOpenSettings}          separateBackground        />      </Stack.Toolbar>       <Stack.Toolbar placement="bottom">        <Stack.Toolbar.SearchBarSlot />        <Stack.Toolbar.Spacer width={8} sharesBackground={false} />        <Stack.Toolbar.Button          accessibilityLabel="New task"          icon="square.and.pencil"          onPress={props.onStartNewTask}          separateBackground        />      </Stack.Toolbar>    </>  );}