tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Press

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-30 10:03:37 +02:00
parent 018b751723
commit c9e776ae98
19 changed files with 1256 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/onboarding/slides.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import React, { useEffect, useRef, useState } from 'react';
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAnalytics } from '../../services/analytics';
@@ -112,6 +112,7 @@ const getSlidesCopy = (language: Language) => {
};
type SlidesCopy = ReturnType<typeof getSlidesCopy>;
const OVERLAY_TEXT_MAX_MULTIPLIER = 1.2;
/** Slide 1: Ursachen-Ranking statt Prozent-Behauptung. */
function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: ColorsType }) {
@@ -124,16 +125,18 @@ function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: Color
<View style={[styles.cornerBR, { borderColor: colors.primary }]} />
</View>
<View style={styles.healthCard}>
<Text style={styles.overlayEyebrow}>{copy.causeTitle}</Text>
<Text style={styles.overlayEyebrow} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causeTitle}
</Text>
<View style={[styles.healthRow, styles.healthRowWarning]}>
<Ionicons name="alert-circle" size={15} color="#C62828" />
<Text style={styles.healthRowWarningText}>
<Text style={styles.healthRowWarningText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causePrimary} · {copy.causePrimaryLevel}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="help-circle-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.causeSecondary} · {copy.causeSecondaryLevel}
</Text>
</View>
@@ -141,8 +144,12 @@ function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; colors: Color
positionierte Overlays ueberlappen sich, sobald Uebersetzungen die
Karte wachsen lassen. */}
<View style={styles.checkInline}>
<Text style={styles.checkChipLabel}>{copy.checkLabel}</Text>
<Text style={styles.checkChipText}>{copy.checkItems}</Text>
<Text style={styles.checkChipLabel} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.checkLabel}
</Text>
<Text style={styles.checkChipText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.checkItems}
</Text>
</View>
</View>
</>
@@ -157,15 +164,21 @@ function PlanOverlay({ copy }: { copy: SlidesCopy }) {
<View style={styles.healthCardIcon}>
<Ionicons name="calendar" size={16} color="#2e7d32" />
</View>
<Text style={styles.healthCardTitle}>{copy.planLabel}</Text>
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planLabel}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowSuccess]}>
<Ionicons name="water-outline" size={15} color="#2e7d32" />
<Text style={styles.healthRowSuccessText}>{copy.planNow}</Text>
<Text style={styles.healthRowSuccessText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planNow}
</Text>
</View>
<View style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="chatbubble-ellipses-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>{copy.planFollowUp}</Text>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.planFollowUp}
</Text>
</View>
</View>
);
@@ -179,23 +192,35 @@ function UncertaintyOverlay({ copy }: { copy: SlidesCopy }) {
<View style={styles.healthCardIcon}>
<Ionicons name="eye-off-outline" size={16} color="#6b7280" />
</View>
<Text style={styles.healthCardTitle}>{copy.uncertainTitle}</Text>
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.uncertainTitle}
</Text>
</View>
{copy.uncertainItems.map((item) => (
<View key={item} style={[styles.healthRow, styles.healthRowNeutral]}>
<Ionicons name="close-circle-outline" size={15} color="#6b7280" />
<Text style={styles.healthRowNeutralText}>{item}</Text>
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{item}
</Text>
</View>
))}
<Text style={styles.overlayNote}>{copy.uncertainNote}</Text>
<Text style={styles.overlayNote} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
{copy.uncertainNote}
</Text>
</View>
);
}
export default function OnboardingSlidesScreen() {
const router = useRouter();
const scrollRef = useRef<ScrollView>(null);
const { height } = useWindowDimensions();
const insets = useSafeAreaInsets();
const compact = height < 700;
// Das Bild bekommt den Platz, den das Sheet uebrig laesst - aber nie weniger
// als diese Untergrenze. Feste Prozenthoehen haben bei groesserer
// System-Schriftgroesse den CTA aus dem Bildschirm geschoben.
const imageMinHeight = Math.round(height * (compact ? 0.46 : 0.42));
const { language, isDarkMode, colorPalette } = useApp();
const colors = useColors(isDarkMode, colorPalette);
const posthog = useSafeAnalytics();
@@ -204,6 +229,7 @@ export default function OnboardingSlidesScreen() {
const slide = copy.slides[page];
useEffect(() => {
scrollRef.current?.scrollTo({ y: 0, animated: false });
posthog.capture('onboarding_slide_viewed', { index: page, slide: ['triage', 'plan', 'uncertainty'][page] });
}, [page, posthog]);
@@ -224,8 +250,15 @@ export default function OnboardingSlidesScreen() {
};
return (
<View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
<View style={[styles.imageArea, { height: compact ? '58%' : '65%' }]}>
<ScrollView
ref={scrollRef}
style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
bounces={false}
alwaysBounceVertical={false}
>
<View style={[styles.imageArea, { minHeight: imageMinHeight }]}>
<Image
source={
page === 0
@@ -246,9 +279,20 @@ export default function OnboardingSlidesScreen() {
{page === 1 && <PlanOverlay copy={copy} />}
{page === 2 && <UncertaintyOverlay copy={copy} />}
</View>
<View style={[styles.sheet, { backgroundColor: colors.surface }]}>
<Text style={[styles.title, { color: colors.text }]}>{slide.title}</Text>
<Text style={[styles.body, { color: colors.textSecondary }]}>{slide.body}</Text>
<View
style={[
styles.sheet,
{ backgroundColor: colors.surface, paddingBottom: Math.max(insets.bottom, 16) + 8 },
]}
>
{/* maxFontSizeMultiplier: die Systemschriftgroesse darf die Headline
vergroessern, aber nicht so weit, dass sie das halbe Sheet frisst. */}
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>
{slide.title}
</Text>
<Text style={[styles.body, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.35}>
{slide.body}
</Text>
<View style={styles.dots}>
{copy.slides.map((_, index) => (
<View
@@ -267,10 +311,12 @@ export default function OnboardingSlidesScreen() {
onPress={next}
activeOpacity={0.86}
>
<Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.continueLabel}</Text>
<Text style={[styles.ctaText, { color: colors.onPrimary }]} maxFontSizeMultiplier={1.2}>
{copy.continueLabel}
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
@@ -278,21 +324,26 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContent: {
// Fuellt mindestens den Bildschirm; wird der Inhalt bei sehr grosser
// Schrift hoeher, scrollt der Screen statt den CTA abzuschneiden.
flexGrow: 1,
},
imageArea: {
height: '58%',
flexGrow: 1,
flexShrink: 0,
position: 'relative',
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
position: 'absolute',
...StyleSheet.absoluteFillObject,
},
imageSafeArea: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 2,
},
backBtn: {
marginLeft: 16,
@@ -358,6 +409,7 @@ const styles = StyleSheet.create({
bottom: 34,
left: 16,
right: 16,
zIndex: 1,
backgroundColor: 'rgba(255,255,255,0.96)',
borderRadius: 18,
padding: 14,
@@ -456,7 +508,9 @@ const styles = StyleSheet.create({
// Reminder chips overlay (slide 3)
// Bottom sheet
sheet: {
flex: 1,
// Hoehe folgt dem Inhalt statt einem festen Prozentwert - sonst haengt es
// von Textlaenge und Systemschriftgroesse ab, ob der CTA noch passt.
flexShrink: 0,
borderTopLeftRadius: 28,
borderTopRightRadius: 28,
marginTop: -24,
@@ -481,7 +535,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
gap: 8,
marginBottom: 'auto',
marginBottom: 22,
},
dot: {
width: 8,
@@ -495,11 +549,11 @@ const styles = StyleSheet.create({
},
cta: {
alignSelf: 'stretch',
height: 58,
minHeight: 58,
paddingVertical: 16,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 24,
},
ctaText: {
fontSize: 17,