Files
beenvoice-app/components/TopChromeBar.tsx
T
soconnor 0b2d65a4e9 Add Authentik sign-in, fix tab scroll insets, and polish multi-account auth.
Mobile app detects SSO per server, supports OAuth sign-in, and preserves saved
sessions when adding accounts. Tab screens get proper chrome layout and tab-bar
clearance with scrollable page headers.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-18 02:27:31 -04:00

52 lines
1.4 KiB
TypeScript

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";
/** Blurred status-bar chrome with logo + account switcher. */
export function TopChromeBar() {
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 />
</View>
);
}
const styles = StyleSheet.create({
host: {
flexShrink: 0,
overflow: "hidden",
},
});