Update app and ignore local artifacts

components/ui/app-header.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AppText } from './app-text';
+import { colors, size, spacing } from './tokens';
+
+type Props = {
+  title: string;
+  context?: string;
+  subtitle?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function AppHeader({ title, context, subtitle, leading, trailing, compact = false, style }: Props) {
+  if (compact) return <View style={[styles.compact, style]}>
+    <View style={styles.side}>{leading}</View>
+    <AppText variant="title" numberOfLines={1} style={styles.compactTitle}>{title}</AppText>
+    <View style={[styles.side, styles.trailing]}>{trailing}</View>
+  </View>;
+
+  return <View style={[styles.root, style]}>
+    <View style={styles.copy}>
+      {context ? <AppText variant="bodySmall" color={colors.neutral.textMuted}>{context}</AppText> : null}
+      <AppText variant="heading1" style={context ? styles.titleWithContext : undefined}>{title}</AppText>
+      {subtitle ? <AppText variant="bodySmall" color={colors.neutral.textSecondary} style={styles.subtitle}>{subtitle}</AppText> : null}
+    </View>
+    {trailing ? <View style={styles.rootTrailing}>{trailing}</View> : null}
+  </View>;
+}
+
+const styles = StyleSheet.create({
+  root: { minHeight: 76, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: spacing[5], paddingTop: spacing[6] },
+  copy: { flex: 1 },
+  titleWithContext: { marginTop: spacing[1] },
+  subtitle: { marginTop: spacing[1] },
+  rootTrailing: { alignSelf: 'flex-start', paddingTop: spacing[1] },
+  compact: { height: 56, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  side: { width: size.touchTargetMin, minHeight: size.touchTargetMin, justifyContent: 'center' },
+  trailing: { alignItems: 'flex-end' },
+  compactTitle: { flex: 1, textAlign: 'center', paddingHorizontal: spacing[3] },
+});