Trend is now style brrraa (#75)

otjamin · web-flow · commit 25e360d1d7c2 · 2025-07-04T00:59:37.000+02:00
diff --git a/mobile/app/(tabs)/trends/[trendId].tsx b/mobile/app/(tabs)/trends/[trendId].tsx
@@ -1,11 +1,13 @@
 import { useLocalSearchParams } from 'expo-router';
-import { Alert, Button, ScrollView, Share, StyleSheet, Text, View } from 'react-native';
+import { Alert, Pressable, ScrollView, Share, StyleSheet, Text, View } from 'react-native';
 
 import CustomSafeAreaView from '@/components/CustomSafeAreaView';
 import { Image } from 'expo-image';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { useEffect, useState } from 'react';
 import { fetchTrend, Trend } from '@/utils/trendApi';
+import SectionHeader from '@/components/SectionHeader';
+import { Colors } from '@/constants/Colors';
 
 export default function TrendDetail() {
   const { trendId } = useLocalSearchParams();
@@ -23,7 +25,7 @@ export default function TrendDetail() {
       });
   }, [trendId]);
 
-  const onShare = async () => {
+  const handleShare = async () => {
     try {
       const result = await Share.share({
         message: `Check out this trend!
@@ -50,25 +52,45 @@ _found with GetDressed ✨_`,
 
   return (
     <CustomSafeAreaView style={styles.container}>
-      <ScrollView>
+      <SectionHeader title={trend?.trendTitle || 'Aktueller Trend'} />
+      <Pressable onPress={handleShare} style={styles.floatingShare}>
+        <Ionicons name="share" size={24} style={styles.floatingText} />
+      </Pressable>
+      <ScrollView style={styles.scrollContainer} showsVerticalScrollIndicator={false}>
         <View style={{ marginBottom: 24 }}>
+          <Image source={trend?.trendImage} style={styles.image} />
           <Text style={styles.title}>Aktueller Trend:</Text>
           <Text style={styles.title}>{trend?.trendTitle}</Text>
-          <Image source={trend?.trendImage} style={styles.image} />
         </View>
         <View style={{ marginBottom: 24 }}>
-          <Text style={styles.title}>Hype auf Instagram</Text>
           <Text style={styles.text}>{trend?.trendDescription}</Text>
         </View>
         <View style={{ marginBottom: 24 }}>
           <Text style={styles.text}>found on:</Text>
           <View style={{ flexDirection: 'row' }}>
-            <Ionicons style={styles.socialIcon} name="logo-instagram" size={24} color="#999" />
-            <Ionicons style={styles.socialIcon} name="logo-pinterest" size={24} color="#999" />
-            <Ionicons style={styles.socialIcon} name="logo-twitter" size={24} color="#999" />
+            {trend?.trendSources?.map((source) => {
+              // Map known sources to valid Ionicons names
+              const iconMap: { [key: string]: keyof typeof Ionicons.glyphMap } = {
+                Instagram: 'logo-instagram',
+                Facebook: 'logo-facebook',
+                Twitter: 'logo-twitter',
+                TikTok: 'logo-tiktok',
+                Pinterest: 'logo-pinterest',
+                // add more mappings as needed
+              };
+              const iconName = iconMap[source] || 'help';
+              return (
+                <Ionicons
+                  style={styles.socialIcon}
+                  name={iconName}
+                  size={24}
+                  color="#999"
+                  key={source}
+                />
+              );
+            })}
           </View>
         </View>
-        <Button onPress={onShare} title="Share" />
       </ScrollView>
     </CustomSafeAreaView>
   );
@@ -77,10 +99,12 @@ _found with GetDressed ✨_`,
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 32,
-    paddingHorizontal: 16,
     backgroundColor: '#fff',
   },
+  scrollContainer: {
+    marginTop: 24,
+    paddingHorizontal: 16,
+  },
   title: {
     fontSize: 22,
     fontWeight: 'bold',
@@ -92,10 +116,24 @@ const styles = StyleSheet.create({
   },
   text: {
     marginBottom: 16,
-    fontWeight: 'bold',
     color: '#999',
   },
   socialIcon: {
     marginRight: 16,
   },
+  floatingShare: {
+    position: 'absolute',
+    zIndex: 100,
+    right: 16,
+    bottom: 22,
+    width: 50,
+    height: 50,
+    backgroundColor: Colors.light.shareButton,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  floatingText: {
+    color: '#fff',
+  },
 });
diff --git a/mobile/app/(tabs)/trends/index.tsx b/mobile/app/(tabs)/trends/index.tsx
@@ -1,11 +1,13 @@
 import CustomSafeAreaView from '@/components/CustomSafeAreaView';
+import SectionHeader from '@/components/SectionHeader';
 import TrendList from '@/components/TrendList';
 import TrendPrompt from '@/components/TrendPrompt';
 import { StyleSheet, Text, View } from 'react-native';
 
 export default function TrendScout() {
   return (
     <CustomSafeAreaView style={styles.container}>
+      <SectionHeader title="Trend-Scout" />
       <View style={styles.promptContainer}>
         <Text style={styles.title}>Frag den Trend-Scout</Text>
         <Text style={styles.text}>
@@ -25,15 +27,16 @@ export default function TrendScout() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 16,
     backgroundColor: '#fff',
-    paddingTop: 32,
   },
   promptContainer: {
-    marginBottom: 24,
+    marginTop: 24,
+    paddingHorizontal: 16,
   },
   trendsContainer: {
     flex: 1,
+    marginTop: 24,
+    paddingHorizontal: 16,
   },
   title: {
     fontSize: 22,
@@ -42,7 +45,6 @@ const styles = StyleSheet.create({
   },
   text: {
     marginBottom: 16,
-    fontWeight: 'bold',
     color: '#999',
   },
 });
diff --git a/mobile/components/TrendList.tsx b/mobile/components/TrendList.tsx
@@ -34,6 +34,7 @@ export default function TrendList() {
         renderItem={({ item }) => <TrendListItem trend={item} />}
         keyExtractor={(item) => item.trendId}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+        showsVerticalScrollIndicator={false}
       />
     </View>
   );
diff --git a/mobile/components/TrendPrompt.tsx b/mobile/components/TrendPrompt.tsx
@@ -1,11 +1,54 @@
 import { generateTrends, saveTrends } from '@/utils/trendApi';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { useState } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, TextInput, View } from 'react-native';
+import { useEffect, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  useAnimatedValue,
+  View,
+} from 'react-native';
 
 export default function TrendPrompt() {
   const [prompt, setPrompt] = useState<string>('');
   const [isThinking, setIsThinking] = useState<boolean>(false);
+  const rotateValue = useAnimatedValue(0);
+
+  useEffect(() => {
+    const flipLoop = () => {
+      Animated.sequence([
+        Animated.timing(rotateValue, {
+          toValue: 1,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.delay(500), // pause after flip
+        Animated.timing(rotateValue, {
+          toValue: 0,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.delay(500), // pause after flipping back
+      ]).start(() => flipLoop());
+    };
+
+    flipLoop();
+  }, [rotateValue]);
+
+  const rotateInterpolate = rotateValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+
+  const animatedStyle = {
+    transform: [{ rotate: rotateInterpolate }],
+  };
+
+  const AnimatedIcon = Animated.createAnimatedComponent(Ionicons);
 
   const handleSubmit = async () => {
     setIsThinking(true);
@@ -24,23 +67,29 @@ export default function TrendPrompt() {
   return (
     <View>
       <View style={styles.inputContainer}>
+        {isThinking && (
+          <AnimatedIcon
+            name="hourglass-outline"
+            size={24}
+            style={[styles.thinkingIdicator, animatedStyle]}
+          />
+        )}
         <TextInput
           style={styles.input}
           enterKeyHint="search"
           maxLength={200}
           multiline
           textAlignVertical="top"
           submitBehavior="blurAndSubmit"
-          placeholder="Welche Sneakers sind bei Stars gerade angesagt?"
           value={prompt}
           onChangeText={setPrompt}
           onSubmitEditing={handleSubmit}
+          editable={!isThinking}
         />
-        <Pressable onPress={handleSubmit}>
+        <Pressable onPress={handleSubmit} disabled={isThinking}>
           <Ionicons name="send" size={24} />
         </Pressable>
       </View>
-      {isThinking && <ActivityIndicator />}
     </View>
   );
 }
@@ -57,4 +106,7 @@ const styles = StyleSheet.create({
     padding: 14,
     backgroundColor: '#f3f3f3',
   },
+  thinkingIdicator: {
+    color: '#999',
+  },
 });
diff --git a/mobile/constants/Colors.ts b/mobile/constants/Colors.ts
@@ -8,9 +8,11 @@ export const Colors = {
   light: {
     background: neutralColor,
     tabBarIconActive: tertiaryColor,
+    shareButton: primaryColor,
   },
   dark: {
     background: neutralColor,
     tabBarIconActive: tertiaryColor,
+    shareButton: primaryColor,
   },
 };
diff --git a/mobile/utils/trendApi.ts b/mobile/utils/trendApi.ts
@@ -16,6 +16,7 @@ export const fetchTrend = async (trendId: string): Promise<Trend | undefined> =>
       trendTitle: trendData.title,
       trendDescription: trendData.description,
       trendImage: pb.files.getURL(trendData, trendData.image),
+      trendSources: trendData.sources ? (trendData.sources as string[]) : [],
     };
     return formattedTrend;
   } catch (error) {
