fix: scroll is working on main page and rename some file

app/application/habits/index.tsx

@@ -1,7 +1,7 @@
 import { SafeAreaView } from "react-native-safe-area-context"
 import { ActivityIndicator, Button, Text } from "react-native-paper"
 
-import { HabitsHistory } from "@/presentation/react/components/HabitsHistory/HabitsHistory"
+import { HabitsMainPage } from "@/presentation/react/components/HabitsHistory/HabitsMainPage"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
 import { useAuthentication } from "@/presentation/react/contexts/Authentication"
 
@@ -61,7 +61,7 @@ const HabitsPage: React.FC = () => {
           </Button>
         </>
       ) : (
-        <HabitsHistory habitsTracker={habitsTracker} />
+        <HabitsMainPage habitsTracker={habitsTracker} />
       )}
     </SafeAreaView>
   )

presentation/react/components/HabitsHistory/HabitCard.tsx

@@ -5,11 +5,11 @@ import { List } from "react-native-paper"
 import type { HabitHistory as HabitHistoryType } from "@/domain/entities/HabitHistory"
 import { getColorRGBAFromHex } from "@/presentation/presenters/utils/colors"
 
-export interface HabitHistoryProps {
+export interface HabitCardProps {
   habitHistory: HabitHistoryType
 }
 
-export const HabitHistory: React.FC<HabitHistoryProps> = (props) => {
+export const HabitCard: React.FC<HabitCardProps> = (props) => {
   const { habitHistory } = props
   const { habit } = habitHistory
 

presentation/react/components/HabitsHistory/HabitsMainPage.tsx

@@ -1,19 +1,19 @@
 import { useRouter } from "expo-router"
 import { useMemo, useState } from "react"
-import { FlatList, View } from "react-native"
+import { View, ScrollView, Dimensions } from "react-native"
 import { Button, List, Text } from "react-native-paper"
 
 import type { GoalFrequency } from "@/domain/entities/Goal"
 import { GOAL_FREQUENCIES } from "@/domain/entities/Goal"
 import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
 import { capitalize } from "@/presentation/presenters/utils/strings"
-import { HabitHistory } from "./HabitHistory"
+import { HabitCard } from "./HabitCard"
 
-export interface HabitsHistoryProps {
+export interface HabitsMainPageProps {
   habitsTracker: HabitsTracker
 }
 
-export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
+export const HabitsMainPage: React.FC<HabitsMainPageProps> = (props) => {
   const { habitsTracker } = props
 
   const router = useRouter()
@@ -68,42 +68,41 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
   }
 
   return (
-    <List.Section
+    <ScrollView
-      style={[
+      showsVerticalScrollIndicator={false}
-        {
+      style={{
-          width: "92%",
+        paddingHorizontal: 20,
-        },
+        width: Dimensions.get("window").width,
-      ]}
+      }}
     >
-      {habitsByFrequency.map((frequency) => {
+      <List.Section>
-        return (
+        {habitsByFrequency.map((frequency) => {
-          <List.Accordion
+          return (
-            expanded={accordionExpanded[frequency]}
+            <List.Accordion
-            onPress={() => {
+              expanded={accordionExpanded[frequency]}
-              setAccordionExpanded((old) => {
+              onPress={() => {
-                return {
+                setAccordionExpanded((old) => {
-                  ...old,
+                  return {
-                  [frequency]: !old[frequency],
+                    ...old,
-                }
+                    [frequency]: !old[frequency],
-              })
+                  }
-            }}
+                })
-            key={frequency}
-            title={capitalize(frequency)}
-            titleStyle={[
-              {
-                fontSize: 26,
-              },
-            ]}
-          >
-            <FlatList
-              data={habitsTracker.habitsHistory[frequency]}
-              renderItem={({ item }) => {
-                return <HabitHistory habitHistory={item} />
               }}
-            />
+              key={frequency}
-          </List.Accordion>
+              title={capitalize(frequency)}
-        )
+              titleStyle={[
-      })}
+                {
-    </List.Section>
+                  fontSize: 26,
+                },
+              ]}
+            >
+              {habitsTracker.habitsHistory[frequency].map((item) => {
+                return <HabitCard habitHistory={item} key={item.habit.id} />
+              })}
+            </List.Accordion>
+          )
+        })}
+      </List.Section>
+    </ScrollView>
   )
 }