fixed refresh, tablet drawer, drawer titles

app/(auth)/_layout.tsx

@@ -2,7 +2,13 @@ import React, { useEffect } from "react";
 import { Drawer } from "expo-router/drawer";
 import { useSignOut } from "@/hooks/firebase/useSignOut";
 import { DrawerContentScrollView } from "@react-navigation/drawer";
-import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
+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";
@@ -11,7 +17,6 @@ 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 { MaterialIcons } from "@expo/vector-icons";
 import { useSetAtom } from "jotai";
 import {
   isFamilyViewAtom,
@@ -23,6 +28,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import * as Device from "expo-device";
 import { DeviceType } from "expo-device";
 import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
+import DrawerIcon from "@/assets/svgs/DrawerIcon";
 
 export default function TabLayout() {
   const { mutateAsync: signOut } = useSignOut();
@@ -37,6 +43,20 @@ export default function TabLayout() {
       detachInactiveScreens
       screenOptions={({ navigation, route }) => ({
         headerShown: true,
+        headerTitleAlign:
+          Device.deviceType === DeviceType.TABLET ? "left" : "center",
+        headerTitleStyle: {
+          fontFamily: "Manrope_600SemiBold",
+          fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
+        },
+        headerLeft: (props) => (
+          <TouchableOpacity
+            onPress={navigation.toggleDrawer}
+            style={{ marginLeft: 16 }}
+          >
+            <DrawerIcon />
+          </TouchableOpacity>
+        ),
         headerRight: () => {
           // Only show ViewSwitch on calendar and todos pages
           const showViewSwitch = ["calendar", "todos", "index"].includes(
@@ -48,9 +68,8 @@ export default function TabLayout() {
             </View>
           ) : null;
         },
-        headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
         drawerStyle: {
-          width:  Device.deviceType === DeviceType.TABLET ? "50%" : "90%",
+          width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
           backgroundColor: "#f9f8f7",
           height: "100%",
         },
@@ -117,7 +136,7 @@ export default function TabLayout() {
                   icon={<FeedbackNavIcon />}
                 />
               </View>
-              <View style={{ flex: 1 }}>
+              <View style={{ flex: 1, paddingRight: 0 }}>
                 {/*<DrawerButton
                   color="#fd1775"
                   title={"My Reminders"}
@@ -233,14 +252,20 @@ export default function TabLayout() {
         name="index"
         options={{
           drawerLabel: "Calendar",
-          title: "Calendar",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family Calendar"
+              : "Calendar",
         }}
       />
       <Drawer.Screen
         name="calendar"
         options={{
           drawerLabel: "Calendar",
-          title: "Calendar",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family Calendar"
+              : "Calendar",
           drawerItemStyle: { display: "none" },
         }}
       />
@@ -276,7 +301,10 @@ export default function TabLayout() {
         name="todos"
         options={{
           drawerLabel: "To-Do",
-          title: "To-Dos",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family To Do's"
+              : "To Do's",
         }}
       />
       <Drawer.Screen

app/(auth)/calendar/index.tsx

@@ -1,16 +1,26 @@
 import React, { useState } from "react";
-import { ScrollView, RefreshControl } from "react-native";
-import { useSetAtom } from "jotai";
+import { ScrollView, RefreshControl, View } from "react-native";
+import { useAtom } from "jotai";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
 import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
 import { colorMap } from "@/constants/colorMap";
 import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
 import { DeviceType } from "expo-device";
 import * as Device from "expo-device";
+import { useCalSync } from "@/hooks/useCalSync";
+import Toast from "react-native-toast-message";
 
 export default function Screen() {
   const [refreshing, setRefreshing] = useState(false);
-  const setRefreshTrigger = useSetAtom(refreshTriggerAtom);
+  const [shouldRefresh, setShouldRefresh] = useAtom(refreshTriggerAtom);
+
+  const {
+    isConnectedToGoogle,
+    isConnectedToMicrosoft,
+    isConnectedToApple,
+    resyncAllCalendars,
+    isSyncing,
+  } = useCalSync();
 
   const onRefresh = React.useCallback(async () => {
     setRefreshing(true);
@@ -18,45 +28,65 @@ export default function Screen() {
     const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));
 
     try {
-      setRefreshTrigger((prev) => !prev);
-
-      await Promise.all([minimumDelay]);
+      if (isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) {
+        await Promise.all([resyncAllCalendars(), minimumDelay]);
+      } else {
+        await minimumDelay;
+      }
     } catch (error) {
       console.error("Refresh failed:", error);
     } finally {
       setRefreshing(false);
+      setShouldRefresh((prev) => !prev);
     }
-  }, [setRefreshTrigger]);
-  
+  }, [
+    resyncAllCalendars,
+    isConnectedToGoogle,
+    isConnectedToMicrosoft,
+    isConnectedToApple,
+  ]);
+
   return (
-    <>
-      {Device.deviceType === DeviceType.TABLET ? (
-        <TabletCalendarPage />
-      ) : (
-        <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{ flex: 1 }}
-      refreshControl={
-        <RefreshControl
-          colors={[
-            colorMap.pink,
-            colorMap.green,
-            colorMap.orange,
-            colorMap.purple,
-            colorMap.teal,
-          ]}
-          tintColor={colorMap.pink}
-          progressBackgroundColor={"white"}
-          refreshing={refreshing}
-          onRefresh={onRefresh}
-        />
-      }
-      bounces={true}
-      showsVerticalScrollIndicator={false}
-    >
-      <CalendarPage />
-    </ScrollView>
-      )}
-    </>
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, zIndex: -2 }}>
+        {Device.deviceType === DeviceType.TABLET ? (
+          <TabletCalendarPage />
+        ) : (
+          <CalendarPage />
+        )}
+      </View>
+
+      <ScrollView
+        style={{
+          position: "absolute",
+          top: 0,
+          left: Device.deviceType === DeviceType.TABLET ? "15%" : 0,
+          right: Device.deviceType === DeviceType.TABLET ? "25%" : 0,
+          height: Device.deviceType === DeviceType.TABLET ? "9%" : "12%",
+          width: Device.deviceType === DeviceType.TABLET ? "62%" : "100%",
+          zIndex: 100,
+          backgroundColor: "transparent",
+        }}
+        contentContainerStyle={{ flex: 1 }}
+        refreshControl={
+          <RefreshControl
+            colors={[
+              colorMap.pink,
+              colorMap.green,
+              colorMap.orange,
+              colorMap.purple,
+              colorMap.teal,
+            ]}
+            tintColor={colorMap.pink}
+            progressBackgroundColor={"white"}
+            refreshing={refreshing || isSyncing}
+            onRefresh={onRefresh}
+          />
+        }
+        bounces={true}
+        showsVerticalScrollIndicator={false}
+        pointerEvents={refreshing || isSyncing ? "auto" : "none"}
+      />
+    </View>
   );
 }