Initial Mobile

mobile/app/(tabs)/_layout.tsx

@@ -0,0 +1,55 @@
+import { Redirect, Tabs } from 'expo-router';
+
+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 { useAuth } from '@/src/providers/auth-provider';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+  const { isBootstrapping, token, requiresTenantSelection } = useAuth();
+
+  if (isBootstrapping) {
+    return null;
+  }
+
+  if (!token) {
+    return <Redirect href="/login" />;
+  }
+
+  if (requiresTenantSelection) {
+    return <Redirect href="/tenant-select" />;
+  }
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        headerShown: true,
+        tabBarButton: HapticTab,
+      }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Aufgaben',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="checklist" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Konto',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="person.crop.circle.fill" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="time"
+        options={{
+          title: 'Zeit',
+          tabBarIcon: ({ color }) => <IconSymbol size={24} name="clock.fill" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}