Add 'apps/mobile/' from commit '5fa30f365f21531094cd4d2045042bb4f1370ac3'

git-subtree-dir: apps/mobile git-subtree-mainline: 86f8987dff git-subtree-split: 5fa30f365f
2026-08-16 21:42:59 -04:00
parent 86f8987dff 5fa30f365f
commit d057ba208d
222 changed files with 23436 additions and 0 deletions
@@ -0,0 +1,55 @@
+import { BlurView } from "expo-blur";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { TopChrome } from "@/components/TopChrome";
+import { useAppTheme } from "@/contexts/ThemeContext";
+import { blurIntensity } from "@/lib/beenvoice-theme";
+import {
+  TOP_CHROME_PADDING_BOTTOM,
+  TOP_CHROME_ROW_HEIGHT,
+} from "@/lib/top-chrome-insets";
+
+type TopChromeBarProps = {
+  showMoreBack?: boolean;
+};
+
+/** Blurred status-bar chrome with logo + account switcher. */
+export function TopChromeBar({ showMoreBack = false }: TopChromeBarProps) {
+  const insets = useSafeAreaInsets();
+  const { isDark } = useAppTheme();
+  const tint = isDark ? "rgba(9, 9, 11, 0.28)" : "rgba(255, 255, 255, 0.32)";
+
+  return (
+    <View
+      style={[
+        styles.host,
+        {
+          paddingTop: insets.top,
+          paddingBottom: TOP_CHROME_PADDING_BOTTOM,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          height: insets.top + TOP_CHROME_ROW_HEIGHT + TOP_CHROME_PADDING_BOTTOM,
+        },
+      ]}
+    >
+      <BlurView
+        intensity={blurIntensity.chrome}
+        tint={isDark ? "dark" : "light"}
+        style={StyleSheet.absoluteFill}
+      />
+      <View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { backgroundColor: tint }]}
+      />
+      <TopChrome showMoreBack={showMoreBack} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flexShrink: 0,
+    overflow: "hidden",
+  },
+});