frontend: flesh mood components screen

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 6b55ce5b08c2cf596a6f02f8e37e459809efd41d
Parents: 2b711ef
1 file(s) changed
frontend/app/entry/mood-components.tsx +245 -0
frontend/app/entry/mood-components.tsx
@@ -0,0 +1,245 @@
  + import React from 'react';
  + import {
  +   View,
  +   Text,
  +   ScrollView,
  +   Pressable,
  +   StyleSheet,
  + } from 'react-native';
  + import { router } from 'expo-router';
  + import { Ionicons } from '@expo/vector-icons';
  + 
  + import { ScaleSlider } from '@/components/ui/ScaleSlider';
  + import { Row, Grid } from '@/components/ui/LayoutHelpers';
  + import { Section, SectionHeader } from '@/components/ui/Sections';
  + import { Button } from '@/components/ui/Button';
  + import { Card } from '@/components/ui/Cards';
  + import { Theme } from '@/constants/theme';
  + import {
  +   MOOD_COMPONENTS,
  +   getMoodComponent,
  +   intensityLabel,
  + } from '@/constants/mood-components';
  + 
  + import {
  +   useMoodEntryStore,
  + } from '@/stores/moodEntry';
  + 
  + export default function MoodComponentsScreen() {
  +   const {
  +     selectedMood,
  +     components,
  +     addComponent,
  +     removeComponent,
  +     setComponentIntensity,
  +   } = useMoodEntryStore();
  + 
  +   const activeIds = components.map((c) => c.id);
  +   const available = MOOD_COMPONENTS.filter((d) => !activeIds.includes(d.id));
  + 
  +   const handleDone = () => {
  +     router.back();
  +   };
  + 
  +   return (
  +     <View style={styles.container}>
  + 
  +       {/* Header */}
  +       <View style={styles.header}>
  +         <Pressable onPress={() => router.back()} hitSlop={8}>
  +           <Ionicons name="close" size={24} color={Theme.colors.text} />
  +         </Pressable>
  +         <Text style={styles.headerTitle}>Editar Componentes</Text>
  +         <Pressable onPress={handleDone} hitSlop={8}>
  +           <Text style={styles.headerAction}>Pronto</Text>
  +         </Pressable>
  +       </View>
  + 
  +       <ScrollView
  +         contentContainerStyle={styles.content}
  +         showsVerticalScrollIndicator={false}
  +       >
  + 
  +         {/* Subtitle */}
  +         {selectedMood && (
  +           <View style={styles.subtitleBlock}>
  +             <Text style={styles.subtitleSmall}>Baseado no seu humor selecionado</Text>
  +             <Text style={styles.subtitleLarge}>{selectedMood.label}</Text>
  +           </View>
  +         )}
  + 
  +         {/* Active components */}
  +         {components.length > 0 && (
  +           <Section>
  +             <SectionHeader
  +               title="Intensidade dos Componentes"
  +               info={`Ativos: ${components.length}`} />
  + 
  +             {components.map((comp) => {
  +               const def = getMoodComponent(comp.id);
  +               if (!def) return null;
  + 
  +               return (
  +                 <Card key={comp.id} style={styles.activeCard}>
  +                   {/* Card header */}
  +                   <Row style={styles.activeCardHeader}>
  +                     <View style={[styles.dot, { backgroundColor: def.color }]} />
  +                     <Text style={styles.activeCardLabel}>{def.label}</Text>
  +                     <Pressable
  +                       onPress={() => removeComponent(comp.id)}
  +                       hitSlop={8}
  +                     >
  +                       <Ionicons
  +                         name="remove-circle-outline"
  +                         size={22}
  +                         color="#F87171"
  +                       />
  +                     </Pressable>
  +                   </Row>
  + 
  +                   {/* Slider */}
  +                   <ScaleSlider
  +                     variant="compact"
  +                     label="Intensidade"
  +                     value={comp.intensity}
  +                     onValueChange={(v) => setComponentIntensity(comp.id, v)}
  +                     min={1}
  +                     max={10}
  +                     step={1}
  +                     minLabel="Suave"
  +                     maxLabel="Intensa"
  +                     style={styles.slider}
  +                   />
  +                 </Card>
  +               );
  +             })}
  + 
  +           </Section>
  +         )}
  + 
  +         {/* Available to add */}
  +         {available.length > 0 && (
  +           <Section>
  +             <SectionHeader title="Adicionar outros" />
  +             <Grid gap={2}>
  +               {available.map((def) => (
  +                 <Card key={def.id} style={styles.availableItem}>
  +                   <Pressable
  +                     onPress={() => addComponent(def.id)}
  +                     style={styles.availableItemInternalWrapper}
  +                   >
  +                     <Row gap={8} style={styles.availableInner}>
  +                       <View style={[styles.dot, { backgroundColor: def.color }]} />
  +                       <Text style={styles.availableLabel}>{def.label}</Text>
  +                     </Row>
  + 
  +                     <Ionicons
  +                       name="add-circle-outline"
  +                       size={20}
  +                       color={Theme.colors.light.smallAddButtonIcon}
  +                     />
  +                   </Pressable>
  +                 </Card>
  +               ))}
  +             </Grid>
  +           </Section>
  +         )}
  +       </ScrollView>
  +     </View>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   container: {
  +     flex: 1,
  +   },
  +   header: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +     paddingHorizontal: Theme.spacing.containerPadding,
  +     paddingVertical: 16,
  +     borderBottomWidth: 1,
  +     borderBottomColor: Theme.colors.light.divider,
  +   },
  +   headerTitle: {
  +     fontSize: Theme.typography.bodyLg.fontSize,
  +     fontWeight: '700',
  +     color: Theme.colors.light.text,
  +   },
  +   headerAction: {
  +     fontSize: Theme.typography.bodyMd.fontSize,
  +     fontWeight: '600',
  +     color: Theme.colors.light.tint,
  +   },
  +   content: {
  +     padding: Theme.spacing.containerPadding,
  +     gap: Theme.spacing.sectionGap,
  +     paddingBottom: 120,
  +   },
  +   subtitleBlock: {
  +     alignItems: 'center',
  +     gap: 4,
  +   },
  +   subtitleSmall: {
  +     fontSize: Theme.typography.bodyMd.fontSize,
  +     color: Theme.colors.light.textSecondary,
  +   },
  +   subtitleLarge: {
  +     fontSize: 28,
  +     fontWeight: '700',
  +     color: Theme.colors.light.text,
  +   },
  +   section: {
  +     gap: Theme.spacing.cardGap,
  +   },
  +   sectionHeader: {
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +   },
  +   activeCard: {
  +     padding: Theme.spacing.cardGap,
  +   },
  +   activeCardHeader: {
  +     alignItems: 'center',
  +     justifyContent: 'space-between',
  +     marginBottom: 16
  +   },
  +   activeCardLabel: {
  +     flex: 1,
  +     ... { ...Theme.typography.bodyLg, lineHeight: 24 },
  +     color: Theme.colors.light.text,
  +     marginLeft: 4,
  +   },
  +   dot: {
  +     width: 12,
  +     height: 12,
  +     borderRadius: 6,
  +     flexShrink: 0,
  +   },
  +   slider: {
  +     marginTop: 4,
  +   },
  +   availableItem: {
  +     flexDirection: 'row',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +     paddingHorizontal: 12,
  +     paddingVertical: 10,
  +   },
  +   availableItemInternalWrapper: {
  +     flexDirection: 'row',
  +     width: '100%',
  +     justifyContent: 'space-between',
  +     alignItems: 'center',
  +   },
  +   availableInner: {
  +     alignItems: 'center',
  +     flexShrink: 1,
  +   },
  +   availableLabel: {
  +     fontSize: Theme.typography.bodyMd.fontSize,
  +     fontWeight: '500',
  +     color: Theme.colors.light.text,
  +   }
  + });