fixxed big ui cavia

carry-your-live/app/(tabs)/calendar.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
 import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, FlatList } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Header } from '@/components/Header';
 import { useTasksByDate } from '@/hooks/useTasks';
+import { useTaskModals } from '@/hooks/useTaskModals';
 import { toggleTaskComplete } from '@/utils/taskActions';
 import { useSettings } from '@/theme';
 import { TaskItem } from '@/components/TaskItem';
 import { QuickAddBar } from '@/components/QuickAddBar';
 import { TaskData } from '@/types';
-import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, addMonths, isToday } from 'date-fns';
+import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay, isSameMonth, addMonths, isToday, startOfDay } from 'date-fns';
 import Svg, { Path } from 'react-native-svg';
+import type { ThemeColors } from '@/theme';
 
 const DAY_WIDTH = 44;
 const DAY_GAP = 6;
@@ -17,6 +19,7 @@ const DAY_GAP = 6;
 export default function CalendarScreen() {
   const router = useRouter();
   const { theme } = useSettings();
+  const { modals, openTaskMenu, openTaskDelete } = useTaskModals();
   const [visibleMonth, setVisibleMonth] = useState(() => new Date());
   const [selectedDate, setSelectedDate] = useState(() => new Date());
   const stripRef = useRef<ScrollView>(null);
@@ -28,46 +31,57 @@ export default function CalendarScreen() {
 
   const { tasks, loading } = useTasksByDate(selectedDate);
 
-  const handleDayPress = (day: Date) => {
+  const handleDayPress = useCallback((day: Date) => {
     setSelectedDate(day);
     if (!isSameMonth(day, visibleMonth)) {
       setVisibleMonth(day);
     }
-  };
+  }, [visibleMonth]);
 
-  const handlePrevMonth = () => {
+  const handlePrevMonth = useCallback(() => {
     const prev = addMonths(visibleMonth, -1);
     setVisibleMonth(prev);
     if (!isSameMonth(selectedDate, prev)) {
       setSelectedDate(startOfMonth(prev));
     }
-  };
+  }, [visibleMonth, selectedDate]);
 
-  const handleNextMonth = () => {
+  const handleNextMonth = useCallback(() => {
     const next = addMonths(visibleMonth, 1);
     setVisibleMonth(next);
     if (!isSameMonth(selectedDate, next)) {
       setSelectedDate(startOfMonth(next));
     }
-  };
+  }, [visibleMonth, selectedDate]);
 
-  const handleToggleComplete = async (taskId: string) => {
+  const handleToggleComplete = useCallback(async (taskId: string) => {
     await toggleTaskComplete(taskId);
-  };
+  }, []);
 
-  const today = new Date();
-
-  const scrollToDay = (day: Date) => {
+  const scrollToDay = useCallback((day: Date) => {
     const index = days.findIndex((d) => isSameDay(d, day));
     if (index >= 0) {
       stripRef.current?.scrollTo({ x: Math.max(0, index * (DAY_WIDTH + DAY_GAP) - 24), animated: true });
     }
-  };
+  }, [days]);
 
   React.useEffect(() => {
-    scrollToDay(isSameMonth(selectedDate, visibleMonth) ? selectedDate : today);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visibleMonth]);
+    const target = isSameMonth(selectedDate, visibleMonth) ? selectedDate : startOfDay(new Date());
+    scrollToDay(target);
+  }, [visibleMonth, scrollToDay, selectedDate]);
+
+  const renderTask = useCallback(
+    ({ item }: { item: TaskData }) => (
+      <TaskItem
+        task={item}
+        onToggle={() => handleToggleComplete(item.id)}
+        onDelete={() => openTaskDelete(item)}
+        onPress={() => router.push({ pathname: '/task-detail', params: { id: item.id } })}
+        onMenuOpen={() => openTaskMenu(item)}
+      />
+    ),
+    [handleToggleComplete, openTaskDelete, openTaskMenu, router]
+  );
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
@@ -79,30 +93,16 @@ export default function CalendarScreen() {
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.dateStrip}
       >
-        {days.map((day) => {
-          const isSelected = isSameDay(day, selectedDate);
-          const isCurrent = isToday(day);
-          return (
-            <TouchableOpacity
-              key={day.toISOString()}
-              style={[
-                styles.dayButton,
-                { backgroundColor: theme.card, borderColor: theme.borderStrong },
-                isCurrent && !isSelected && { borderColor: theme.accent, borderWidth: 1.5 },
-                isSelected && { backgroundColor: theme.accent, borderColor: theme.accent },
-              ]}
-              onPress={() => handleDayPress(day)}
-              activeOpacity={0.7}
-            >
-              <Text style={[styles.dayWeekday, { color: theme.textMuted }, isSelected && styles.dayTextSelected]}>
-                {format(day, 'EEE').charAt(0)}
-              </Text>
-              <Text style={[styles.dayNumber, { color: theme.text }, isSelected && styles.dayTextSelected]}>
-                {format(day, 'd')}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
+        {days.map((day) => (
+          <DayButton
+            key={day.toISOString()}
+            day={day}
+            selected={isSameDay(day, selectedDate)}
+            current={isToday(day) && !isSameDay(day, selectedDate)}
+            onPress={handleDayPress}
+            theme={theme}
+          />
+        ))}
       </ScrollView>
 
       <View style={styles.monthRow}>
@@ -122,14 +122,8 @@ export default function CalendarScreen() {
       <FlatList
         data={tasks}
         keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <TaskItem
-            task={item as TaskData}
-            onToggle={() => handleToggleComplete(item.id)}
-            onPress={() => router.push({ pathname: '/task-detail', params: { id: item.id } })}
-          />
-        )}
-        ItemSeparatorComponent={() => <View style={styles.separator} />}
+        renderItem={renderTask}
+        ItemSeparatorComponent={MemoSeparator}
         ListEmptyComponent={
           loading ? (
             <View style={styles.emptyState}>
@@ -149,10 +143,46 @@ export default function CalendarScreen() {
         dueDate={selectedDate.getTime()}
         placeholder={`Add task for ${format(selectedDate, 'MMM d')}`}
       />
+
+      {modals(() => {})}
     </SafeAreaView>
   );
 }
 
+interface DayButtonProps {
+  day: Date;
+  selected: boolean;
+  current: boolean;
+  onPress: (day: Date) => void;
+  theme: ThemeColors;
+}
+
+const DayButton = React.memo(function DayButton({ day, selected, current, onPress, theme }: DayButtonProps) {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.dayButton,
+        { backgroundColor: theme.card, borderColor: theme.borderStrong },
+        current && { borderColor: theme.accent, borderWidth: 1.5 },
+        selected && { backgroundColor: theme.accent, borderColor: theme.accent },
+      ]}
+      onPress={() => onPress(day)}
+      activeOpacity={0.7}
+    >
+      <Text style={[styles.dayWeekday, { color: theme.textMuted }, selected && styles.dayTextSelected]}>
+        {format(day, 'EEE').charAt(0)}
+      </Text>
+      <Text style={[styles.dayNumber, { color: theme.text }, selected && styles.dayTextSelected]}>
+        {format(day, 'd')}
+      </Text>
+    </TouchableOpacity>
+  );
+});
+
+const MemoSeparator = React.memo(function Separator() {
+  return <View style={styles.separator} />;
+});
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,