fix/tabBar + landing routing

clients/mobile/app/(auth)/sign-in.tsx

@@ -25,7 +25,7 @@ export default function Login() {
       const result = await signIn.create({ identifier: email, password });
       if (result.status === ClerkStatus.Complete) {
         await setActive({ session: result.createdSessionId });
-        router.replace("/home");
+        router.replace("/(tabs)");
       }
     });
 

clients/mobile/app/(auth)/verify.tsx

@@ -25,7 +25,7 @@ export default function VerifyEmail() {
       const result = await signUp.attemptEmailAddressVerification({ code });
       if (result.status === ClerkStatus.Complete) {
         await setActive({ session: result.createdSessionId });
-        router.replace("/home");
+        router.replace("/(tabs)");
       }
     });
 

clients/mobile/app/(tabs)/_layout.tsx

@@ -5,60 +5,118 @@ import { HapticTab } from "@/components/haptic-tab";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useColorScheme } from "@/hooks/use-color-scheme";
+import { View, Text } from "react-native";
+
+type TabBarIconProps = {
+  name: React.ComponentProps<typeof IconSymbol>["name"];
+  focused: boolean;
+  activeColor: string;
+  highlightColor: string;
+  label: string;
+};
+
+const TabBarIcon = ({ name, focused, activeColor, label }: TabBarIconProps) => (
+  <View
+    className={`rounded-xl px-3 py-1 items-center gap-1 min-w-20 ${focused ? "bg-card" : "bg-transparent"}`}
+  >
+    <IconSymbol size={22} name={name} color={activeColor} />
+    <Text numberOfLines={1} className="text-xs font-medium text-primary">
+      {label}
+    </Text>
+  </View>
+);
+
+const PlusButton = () => (
+  <View className="bg-primary rounded-full w-14 h-14 items-center justify-center -mb-2">
+    <IconSymbol size={22} name="plus" color={Colors["light"].background} />
+  </View>
+);
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
+  const c = Colors[colorScheme ?? "light"];
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+        tabBarShowLabel: false,
         headerShown: false,
         tabBarButton: HapticTab,
+        tabBarActiveTintColor: c.tabBarActive,
+        tabBarInactiveTintColor: c.tabBarActive,
+        tabBarItemStyle: {
+          paddingVertical: 10,
+        },
+        tabBarStyle: {
+          height: 70,
+        },
       }}
     >
       <Tabs.Screen
-        name="index"
+        name="tasks"
         options={{
-          title: "Home",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
+          title: "Tasks",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon
+              name="checklist"
+              focused={focused}
+              activeColor={c.tabBarActive}
+              highlightColor={c.tabBarHighlight}
+              label="Tasks"
+            />
           ),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: "Explore",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="paperplane.fill" color={color} />
+          title: "Floor",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon
+              name="map"
+              focused={focused}
+              activeColor={c.tabBarActive}
+              highlightColor={c.tabBarHighlight}
+              label="Floor"
+            />
           ),
         }}
       />
       <Tabs.Screen
-        name="tasks"
+        name="index"
         options={{
-          title: "Tasks",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="checklist" color={color} />
-          ),
+          title: "",
+          tabBarLabel: () => null,
+          tabBarIcon: () => <PlusButton />,
         }}
       />
       <Tabs.Screen
         name="guests"
         options={{
-          title: "Guests",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="person.3.fill" color={color} />
+          title: "Guest",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon
+              name="suitcase.cart"
+              focused={focused}
+              activeColor={c.tabBarActive}
+              highlightColor={c.tabBarHighlight}
+              label="Guests"
+            />
           ),
         }}
       />
       <Tabs.Screen
         name="profile"
         options={{
           title: "Profile",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="person.fill" color={color} />
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon
+              name="person.circle"
+              focused={focused}
+              activeColor={c.tabBarActive}
+              highlightColor={c.tabBarHighlight}
+              label="Profile"
+            />
           ),
         }}
       />

clients/mobile/app/index.tsx

@@ -9,7 +9,7 @@ export default function Index() {
   useEffect(() => {
     if (!isLoaded) return;
     if (isSignedIn) {
-      router.replace("/home");
+      router.replace("/(tabs)");
     } else {
       router.replace("/sign-in");
     }

clients/mobile/constants/theme.ts

@@ -16,6 +16,8 @@ export const Colors = {
     icon: "#687076",
     tabIconDefault: "#687076",
     tabIconSelected: tintColorLight,
+    tabBarActive: "#15502C",
+    tabBarHighlight: "#EDF5F1",
   },
   dark: {
     text: "#ECEDEE",
@@ -25,6 +27,8 @@ export const Colors = {
     tabIconDefault: "#9BA1A6",
     tabIconSelected: tintColorDark,
     greenBorder: "#166534",
+    tabBarActive: "#15502C",
+    tabBarHighlight: "#EDF5F1",
   },
 };