refresh button, calendar margins

app/(auth)/_layout.tsx

@@ -1,9 +1,19 @@
 import React from "react";
-import {Drawer} from "expo-router/drawer";
-import {useSignOut} from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView, DrawerNavigationOptions, DrawerNavigationProp} from "@react-navigation/drawer";
-import {Button, ButtonSize, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import {ImageBackground, StyleSheet} from "react-native";
+import { Drawer } from "expo-router/drawer";
+import { useSignOut } from "@/hooks/firebase/useSignOut";
+import {
+  DrawerContentScrollView,
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+} from "@react-navigation/drawer";
+import {
+  Button,
+  ButtonSize,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import { ImageBackground, StyleSheet } from "react-native";
 import DrawerButton from "@/components/shared/DrawerButton";
 import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@@ -11,7 +21,7 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
 import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
-import {useSetAtom} from "jotai";
+import { useSetAtom } from "jotai";
 import {
   isFamilyViewAtom,
   settingsPageIndex,
@@ -20,10 +30,12 @@ import {
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import * as Device from "expo-device";
-import {DeviceType} from "expo-device";
+import { DeviceType } from "expo-device";
 import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
 import DrawerIcon from "@/assets/svgs/DrawerIcon";
-import {RouteProp} from "@react-navigation/core";
+import { RouteProp } from "@react-navigation/core";
+import RefreshButton from "@/components/shared/RefreshButton";
+import { useCalSync } from "@/hooks/useCalSync";
 
 type DrawerParamList = {
   index: undefined;
@@ -42,27 +54,36 @@ interface HeaderRightProps {
   navigation: NavigationProp;
 }
 
-const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({navigation}) => (
-    <View marginR-16>
-        <ViewSwitch navigation={navigation}/>
-    </View>
+const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({ navigation }) => (
+  <ViewSwitch navigation={navigation} />
 ));
 
-const HeaderRight = React.memo<HeaderRightProps>(({routeName, navigation}) => {
+const HeaderRight = React.memo<HeaderRightProps>(
+  ({ routeName, navigation }) => {
     const showViewSwitch = ["calendar", "todos", "index"].includes(routeName);
 
     if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
       return null;
     }
 
-    return <MemoizedViewSwitch navigation={navigation}/>;
-});
+    return <MemoizedViewSwitch navigation={navigation} />;
+  }
+);
 export default function TabLayout() {
-    const {mutateAsync: signOut} = useSignOut();
+  const { mutateAsync: signOut } = useSignOut();
   const setIsFamilyView = useSetAtom(isFamilyViewAtom);
   const setPageIndex = useSetAtom(settingsPageIndex);
   const setUserView = useSetAtom(userSettingsView);
   const setToDosIndex = useSetAtom(toDosPageIndex);
+  const { resyncAllCalendars, isSyncing } = useCalSync();
+
+  const onRefresh = React.useCallback(async () => {
+    try {
+      await resyncAllCalendars();
+    } catch (error) {
+      console.error("Refresh failed:", error);
+    }
+  }, [resyncAllCalendars]);
 
   const screenOptions = ({
     navigation,
@@ -72,7 +93,8 @@ export default function TabLayout() {
     route: RouteProp<DrawerParamList>;
   }): DrawerNavigationOptions => ({
     headerShown: true,
-        headerTitleAlign: Device.deviceType === DeviceType.TABLET ? "left" : "center",
+    headerTitleAlign:
+      Device.deviceType === DeviceType.TABLET ? "left" : "center",
     headerTitleStyle: {
       fontFamily: "Manrope_600SemiBold",
       fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
@@ -80,26 +102,37 @@ export default function TabLayout() {
     headerLeft: () => (
       <TouchableOpacity
         onPress={navigation.toggleDrawer}
-                style={{marginLeft: 16}}
+        style={{ marginLeft: 16 }}
       >
-                <DrawerIcon/>
+        <DrawerIcon />
       </TouchableOpacity>
     ),
     headerRight: () => {
-            const showViewSwitch = ["calendar", "todos", "index"].includes(route.name);
+      const showViewSwitch = ["calendar", "todos", "index"].includes(
+        route.name
+      );
 
       if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
-                return null;
+        return (
+          <View marginR-16>
+            <RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} />
+          </View>
+        );
       }
 
-            return <MemoizedViewSwitch navigation={navigation}/>;
+      return (
+        <View marginR-16 row>
+          <RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} />
+          <MemoizedViewSwitch navigation={navigation} />
+        </View>
+      );
     },
     drawerStyle: {
       width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
       backgroundColor: "#f9f8f7",
       height: "100%",
     },
-    })
+  });
 
   return (
     <Drawer
@@ -127,7 +160,7 @@ export default function TabLayout() {
                 paddingHorizontal: 30,
               }}
             >
-                            <View style={{flex: 1, paddingRight: 5}}>
+              <View style={{ flex: 1, paddingRight: 5 }}>
                 <DrawerButton
                   title={"Calendar"}
                   color="rgb(7, 184, 199)"
@@ -139,7 +172,7 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<NavCalendarIcon/>}
+                  icon={<NavCalendarIcon />}
                 />
                 <DrawerButton
                   color="#50be0c"
@@ -152,7 +185,7 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<NavGroceryIcon/>}
+                  icon={<NavGroceryIcon />}
                 />
                 <DrawerButton
                   color="#ea156d"
@@ -165,10 +198,10 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<FeedbackNavIcon/>}
+                  icon={<FeedbackNavIcon />}
                 />
               </View>
-                            <View style={{flex: 1, paddingRight: 0}}>
+              <View style={{ flex: 1, paddingRight: 0 }}>
                 {/*<DrawerButton
                   color="#fd1775"
                   title={"My Reminders"}
@@ -193,7 +226,7 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<NavToDosIcon/>}
+                  icon={<NavToDosIcon />}
                 />
                 <DrawerButton
                   color="#e0ca03"
@@ -206,7 +239,7 @@ export default function TabLayout() {
                     setUserView(true);
                     setIsFamilyView(false);
                   }}
-                                    icon={<NavBrainDumpIcon/>}
+                  icon={<NavBrainDumpIcon />}
                 />
                 <DrawerButton
                   color="#e0ca03"
@@ -244,12 +277,12 @@ export default function TabLayout() {
                   backgroundColor="#ededed"
                   width={60}
                   height={60}
-                                    style={{borderRadius: 50}}
+                  style={{ borderRadius: 50 }}
                   marginR-10
                   centerV
                   centerH
                 >
-                                    <NavSettingsIcon/>
+                  <NavSettingsIcon />
                 </View>
               )}
               backgroundColor="white"
@@ -257,7 +290,7 @@ export default function TabLayout() {
               paddingV-30
               marginH-30
               borderRadius={18.55}
-                            style={{elevation: 0}}
+              style={{ elevation: 0 }}
             />
 
             <Button
@@ -298,7 +331,7 @@ export default function TabLayout() {
             Device.deviceType === DeviceType.TABLET
               ? "Family Calendar"
               : "Calendar",
-                    drawerItemStyle: {display: "none"},
+          drawerItemStyle: { display: "none" },
         }}
       />
       <Drawer.Screen
@@ -348,15 +381,15 @@ export default function TabLayout() {
       />
       <Drawer.Screen
         name="feedback"
-                options={{drawerLabel: "Feedback", title: "Feedback"}}
+        options={{ drawerLabel: "Feedback", title: "Feedback" }}
       />
     </Drawer>
   );
 }
 
 const styles = StyleSheet.create({
-    signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
-    label: {fontFamily: "Poppins_400Medium", fontSize: 15},
+  signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
+  label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
   title: {
     fontSize: 26.13,
     fontFamily: "Manrope_600SemiBold",

app/(auth)/calendar/index.tsx

@@ -61,7 +61,6 @@ export default function Screen() {
                         justifyContent: "center",
                         paddingRight: 200,
                     }}
-                    refreshControl={refreshControl}
                     bounces={true}
                     showsVerticalScrollIndicator={false}
                     pointerEvents={isSyncing ? "auto" : "none"}
@@ -74,7 +73,6 @@ export default function Screen() {
         <ScrollView
             style={{flex: 1, height: "100%"}}
             contentContainerStyle={{flex: 1, height: "100%"}}
-            refreshControl={refreshControl}
             bounces={true}
             showsVerticalScrollIndicator={false}
         >

assets/svgs/CheckmarkIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const CheckmarkIcon = (props: SvgProps) => (
+  <Svg
+    width={13}
+    height={10}
+    viewBox="0 0 13 10"
+    fill={props.color || "white"}
+    {...props}
+  >
+    <Path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.95}
+      d="m1.48 5.489 3.2 3.178 7.2-7.15"
+    />
+  </Svg>
+)
+export default CheckmarkIcon

components/pages/calendar/CalendarPage.tsx

@@ -5,9 +5,9 @@ import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
 export default function CalendarPage() {
   return (
     <View
-      style={{ flex: 1, height: "100%", padding: 10 }}
-      paddingH-22
-      paddingT-22
+      style={{ flex: 1, height: "100%", padding: 0 }}
+      paddingH-0
+      paddingT-0
     >
       {/*<HeaderTemplate
         message={"Let's get your week started !"}

components/pages/calendar/InnerCalendar.tsx

@@ -25,9 +25,10 @@ export const InnerCalendar = () => {
     return (
         <>
             <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 10, overflow: "hidden"}}
+                style={{flex: 1, backgroundColor: "#fff", borderRadius: 0, marginBottom: 0, overflow: "hidden"}}
                 ref={calendarContainerRef}
                 onLayout={onLayout}
+                paddingB-15
             >
                 <CalendarHeader/>
                 {calendarHeight > 0 && (

components/shared/RefreshButton.tsx

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import { TouchableOpacity, Animated, Easing } from 'react-native';
+import { Feather } from '@expo/vector-icons'; 
+
+interface RefreshButtonProps {
+  onRefresh: () => Promise<void>;
+  isSyncing: boolean;
+  size?: number;
+  color?: string;
+}
+
+const RefreshButton = ({ 
+  onRefresh, 
+  isSyncing,
+  size = 24, 
+  color = "#83807F" 
+}: RefreshButtonProps) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const rotationLoop = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (isSyncing) {
+      startContinuousRotation();
+    } else {
+      stopRotation();
+    }
+  }, [isSyncing]);
+
+  const startContinuousRotation = () => {
+    rotateAnim.setValue(0);
+    rotationLoop.current = Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    rotationLoop.current.start();
+  };
+
+  const stopRotation = () => {
+    rotationLoop.current?.stop();
+    rotateAnim.setValue(0);
+  };
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const handlePress = async () => {
+    if (!isSyncing) {
+      await onRefresh();
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress} disabled={isSyncing}>
+      <Animated.View style={{ transform: [{ rotate }] }}>
+        <Feather name="refresh-cw" size={size} color={color} />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+export default RefreshButton;