mobile: Introduce a tab layout and move the sharing page into a modal

3 files changed, 70 insertions, 0 deletions

diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
new file mode 100644
index 00000000..49d95b35
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Tabs } from "expo-router";
+import { Home, Settings } from "lucide-react-native";
+
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <Home color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => <Settings color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/packages/mobile/app/dashboard/(tabs)/index.tsx b/packages/mobile/app/dashboard/(tabs)/index.tsx
new file mode 100644
index 00000000..d043a9c4
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/index.tsx
@@ -0,0 +1,8 @@
+import { View } from "react-native";
+
+export default function Home() {
+  return (
+    <View className="flex h-full items-center justify-center gap-4 px-4">
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard/(tabs)/settings.tsx b/packages/mobile/app/dashboard/(tabs)/settings.tsx
new file mode 100644
index 00000000..b4f535c5
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/settings.tsx
@@ -0,0 +1,38 @@
+import { useRouter } from "expo-router";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+
+import Logo from "@/components/Logo";
+import { Button } from "@/components/ui/Button";
+import { useSession } from "@/lib/session";
+import { api } from "@/lib/trpc";
+
+export default function Dashboard() {
+  const router = useRouter();
+
+  const { isLoggedIn, logout } = useSession();
+
+  useEffect(() => {
+    if (isLoggedIn !== undefined && !isLoggedIn) {
+      router.replace("signin");
+    }
+  }, [isLoggedIn]);
+
+  const { data, error, isLoading } = api.users.whoami.useQuery();
+
+  useEffect(() => {
+    if (error?.data?.code === "UNAUTHORIZED") {
+      logout();
+    }
+  }, [error]);
+
+  return (
+    <View className="flex h-full items-center justify-center gap-4 px-4">
+      <Logo />
+      <Text className="justify-center">
+        Logged in as: {isLoading ? "Loading ..." : data?.email}
+      </Text>
+      <Button label="Log Out" onPress={logout} />
+    </View>
+  );
+}