frontend: rig mood component cards & reset new mood entry page when going back

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 168d22498bb1eb151e34366b5620c81f53768e83

Parents: 6b55ce5

3 file(s) changed

frontend/app/(tabs)/new/entry.tsx +22 -11
frontend/components/ui/MoodComponentCard.tsx +75 -0
frontend/constants/theme.ts +1 -0

frontend/app/(tabs)/new/entry.tsx

@@ -22,6 +22,7 @@ import { Input, TextArea } from '@/components/ui/Input';
    import { Section, SectionHeader } from '@/components/ui/Sections';
    import { Spacing, Typography, Colors } from '@/constants/theme';
    import { ScaleSlider } from '@/components/ui/ScaleSlider';
  + import { MoodComponentCard } from '@/components/ui/MoodComponentCard';
    import { Ionicons } from '@expo/vector-icons';
    import { useThemeColor } from '@/hooks/use-theme-color';
    import {

@@ -46,15 +47,18 @@ const {
        selectedMood,
        setSelectedMood,
        components,
  +     reset
      } = useMoodEntryStore();
    
      useEffect(() => {
        setSelectedMood(getMood(initialMood));
      }, [initialMood]);
    
  +   useEffect(() => {
  +     return () => reset();
  +   }, []);
  + 
      const editComponents = () => {
  -     console.log("Wants to open the components");
  - 
        router.push("/entry/mood-components")
      }
    

@@ -69,7 +73,7 @@ Como você está se sentindo agora?
                </ThemedText>
    
                <ThemedText style={styles.statusText}>
  -               {selectedMood.label || "Neutro"}
  +               {selectedMood?.label || "Neutro"}
                </ThemedText>
              </Center>
    

@@ -121,16 +125,23 @@ </Card>
    
              <Section>
                <SectionHeader title="Componentes do Humor" info="Editar" />
  -             <Grid gap={4}>
  -               <Card style={{height: 38}} />
  -               <Card style={{height: 38}} />
  -             </Grid>
  +             {components.length > 0 ? (
  +               <Grid gap={2} style={{ marginTop: 8 }}>
  +                 {components.map((comp) => (
  +                   <MoodComponentCard
  +                     key={comp.id}
  +                     id={comp.id}
  +                     intensity={comp.intensity}
  +                   />
  +                 ))}
  +               </Grid>
  +             ) : null}
    
                <Button title="Adicionar Componentes"
  -                     onPress={editComponents}
  -                     textStyle={{ fontWeight: 500 }}
  -                     variant="dashed"
  -                     />
  +               onPress={editComponents}
  +               textStyle={{ fontWeight: 500 }}
  +               variant="dashed"
  +             />
              </Section>
            </View>
          </ScrollView>

frontend/components/ui/MoodComponentCard.tsx

@@ -0,0 +1,75 @@
  + import React from 'react';
  + import { View, Text, StyleSheet, ViewStyle } from 'react-native';
  + import { Row } from '@/components/ui/LayoutHelpers';
  + import { Card } from '@/components/ui/Cards';
  + import { getMoodComponent, intensityLabel } from '@/constants/mood-components';
  + import { Theme } from '@/constants/theme';
  + 
  + interface MoodComponentCardProps {
  +   id: string;
  +   intensity: number;
  +   style?: ViewStyle;
  + }
  + 
  + export const MoodComponentCard: React.FC<MoodComponentCardProps> = ({
  +   id,
  +   intensity,
  +   style,
  + }) => {
  +   const definition = getMoodComponent(id);
  +   if (!definition) return null;
  + 
  +   return (
  +     <Card style={[styles.card, style]}>
  +       <Row gap={6} style={styles.inner}>
  +         <View style={styles.mood}>
  +           <View style={[styles.dot, { backgroundColor: definition.color }]} />
  +           <Text style={styles.label} numberOfLines={1}>
  +             {definition.label}
  +           </Text>
  +         </View>
  + 
  +         <Text style={styles.intensity} numberOfLines={1}>
  +           {intensityLabel(intensity)}
  +         </Text>
  +       </Row>
  +     </Card>
  +   );
  + };
  + 
  + const styles = StyleSheet.create({
  +   card: {
  +     paddingHorizontal: 10,
  +     paddingVertical: 8,
  +   },
  +   mood: {
  +     flex: 1,
  +     flexDirection: 'row',
  +     alignItems: 'center',
  +     height: '100%',
  +   },
  +   inner: {
  +     alignItems: 'baseline',
  +     flexShrink: 1,
  +   },
  +   dot: {
  +     width: 8,
  +     height: 8,
  +     borderRadius: 5,
  +     flexShrink: 0,
  +     marginRight: 4,
  +     justifyContent: 'center'
  +   },
  +   label: {
  +     fontSize: Theme.typography.bodyMd.fontSize,
  +     fontWeight: '600',
  +     color: Theme.colors.light.text,
  +     flexShrink: 1,
  +   },
  +   intensity: {
  +     fontSize: Theme.typography.labelSm.fontSize,
  +     color: Theme.colors.light.moodIntensityLabel,
  +     flexShrink: 1,
  +     height: '100%',
  +   },
  + });

frontend/constants/theme.ts

@@ -68,6 +68,7 @@
        // Active / Inactive States
        activeBackground: STATUS_ACTIVE_BG,
        inactiveOpacity: 0.7,
  +     moodIntensityLabel: '#94a3b8',
    
        // Semantic Accents (for categorization)
        accentBlue: PILL_BLUE,