refactor(app): restructure settings with modular section navigation

packages/app/src/components/branch-switcher.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { useQueryClient } from "@tanstack/react-query";
 import { ChevronDown, GitBranch } from "lucide-react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -8,6 +8,7 @@ import { useIsCompactFormFactor } from "@/constants/layout";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useToast } from "@/contexts/toast-context";
 import { useBranchSwitcher } from "@/hooks/use-branch-switcher";
+import { ScreenTitle } from "@/components/headers/screen-title";
 
 interface BranchSwitcherProps {
   currentBranchName: string | null;
@@ -46,9 +47,7 @@ export function BranchSwitcher({
   const titleContent = (
     <>
       {isGitCheckout ? <GitBranch size={14} color={theme.colors.foregroundMuted} /> : null}
-      <Text testID="workspace-header-title" style={styles.headerTitle} numberOfLines={1}>
-        {title}
-      </Text>
+      <ScreenTitle testID="workspace-header-title">{title}</ScreenTitle>
     </>
   );
 
@@ -102,15 +101,6 @@ export function BranchSwitcher({
 }
 
 const styles = StyleSheet.create((theme) => ({
-  headerTitle: {
-    fontSize: theme.fontSize.base,
-    fontWeight: {
-      xs: "400",
-      md: "300",
-    },
-    color: theme.colors.foreground,
-    flexShrink: 1,
-  },
   branchSwitcherTrigger: {
     flexDirection: "row",
     alignItems: "center",