Merge branch 'tablet' into dev

app/(auth)/_layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {Drawer} from "expo-router/drawer";
 import {useSignOut} from "@/hooks/firebase/useSignOut";
 import {DrawerContentScrollView,} from "@react-navigation/drawer";
@@ -10,7 +10,7 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
-import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
+import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
 import {MaterialIcons} from "@expo/vector-icons";
 import {useSetAtom} from "jotai";
 import {
@@ -20,6 +20,9 @@ import {
     userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import Constants from "expo-constants";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 export default function TabLayout() {
     const {mutateAsync: signOut} = useSignOut();
@@ -32,14 +35,20 @@ export default function TabLayout() {
         <Drawer
             initialRouteName={"index"}
             detachInactiveScreens
-            screenOptions={{
+            screenOptions={({ navigation }) => ({
                 headerShown: true,
-                drawerStyle: {
+                headerRight: () =>
+          Device.deviceType === DeviceType.TABLET ? (
+            <ViewSwitch navigation={navigation} />
+          ) : (
+            <></>
+          ),
+        drawerStyle: {
                     width: "90%",
                     backgroundColor: "#f9f8f7",
                     height: "100%",
                 },
-            }}
+            })}
             drawerContent={(props) => {
                 return (
                     <DrawerContentScrollView {...props} style={{}}>

app/(auth)/calendar/index.tsx

@@ -4,6 +4,10 @@ import { useSetAtom } from "jotai";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
 import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
 import { colorMap } from "@/constants/colorMap";
+import { View } from "react-native-ui-lib";
+import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
+import { DeviceType } from "expo-device";
+import * as Device from "expo-device";
 
 export default function Screen() {
   const [refreshing, setRefreshing] = useState(false);
@@ -24,9 +28,13 @@ export default function Screen() {
       setRefreshing(false);
     }
   }, [setRefreshTrigger]);
-
+  
   return (
-    <ScrollView
+    <View style={{ backgroundColor: "white" }}>
+      {Device.deviceType === DeviceType.TABLET ? (
+        <TabletCalendarPage />
+      ) : (
+        <ScrollView
       style={{ flex: 1 }}
       contentContainerStyle={{ flex: 1 }}
       refreshControl={
@@ -49,5 +57,7 @@ export default function Screen() {
     >
       <CalendarPage />
     </ScrollView>
+      )}
+    </View>
   );
 }

app/(auth)/todos/index.tsx

@@ -1,3 +1,4 @@
+import TabletChoresPage from "@/components/pages/(tablet_pages)/chores/TabletChoresPage";
 import AddChore from "@/components/pages/todos/AddChore";
 import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
@@ -8,12 +9,17 @@ import { useAuthContext } from "@/contexts/AuthContext";
 import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
 import { AntDesign } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
-import { Button, ButtonSize, View, Text } from "react-native-ui-lib";
+import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";
+import * as Device from "expo-device";
 
 export default function Screen() {
   return (
     <ToDosContextProvider>
-      <ToDosPage />
+      {Device.deviceType === Device.DeviceType.TABLET ? (
+        <TabletChoresPage />
+      ) : (
+        <ToDosPage />
+      )}
     </ToDosContextProvider>
   );
 }