Implement main screen structure with tab navigation, contacts and profile screens

frontend/src/navigation/AppNavigator.tsx

@@ -4,8 +4,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useAuth } from '../contexts/AuthContext';
 import { LoginScreen } from '../screens/LoginScreen';
 import { RegisterScreen } from '../screens/RegisterScreen';
-import { ConversationsScreen } from '../screens/ConversationsScreen';
-import { ChatScreen } from '../screens/ChatScreen';
+import { MainNavigator } from './MainNavigator';
 import { ActivityIndicator, View } from 'react-native';
 
 const Stack = createNativeStackNavigator();
@@ -25,23 +24,11 @@ export const AppNavigator = () => {
     <NavigationContainer>
       <Stack.Navigator>
         {user ? (
-          <>
-            <Stack.Screen 
-              name="Conversations" 
-              component={ConversationsScreen}
-              options={{ 
-                title: 'Чаты',
-                headerLargeTitle: true,
-              }}
-            />
-            <Stack.Screen 
-              name="Chat" 
-              component={ChatScreen}
-              options={({ route }) => ({ 
-                title: route.params?.title || 'Чат',
-              })}
-            />
-          </>
+          <Stack.Screen 
+            name="Main" 
+            component={MainNavigator}
+            options={{ headerShown: false }}
+          />
         ) : (
           <>
             <Stack.Screen 

frontend/src/navigation/MainNavigator.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useTheme } from 'react-native-paper';
+
+// Импортируем существующие экраны
+import { ConversationsScreen } from '../screens/ConversationsScreen';
+import { ChatScreen } from '../screens/ChatScreen';
+
+// Заглушки для новых экранов (создадим позже)
+import { ContactsScreen } from '../screens/ContactsScreen';
+import { ProfileScreen } from '../screens/ProfileScreen';
+
+const Tab = createBottomTabNavigator();
+const ChatsStack = createNativeStackNavigator();
+const ContactsStack = createNativeStackNavigator();
+const ProfileStack = createNativeStackNavigator();
+
+// Стек навигации для чатов
+function ChatsStackNavigator() {
+  return (
+    <ChatsStack.Navigator>
+      <ChatsStack.Screen 
+        name="ConversationsList" 
+        component={ConversationsScreen}
+        options={{ 
+          title: 'Чаты',
+          headerLargeTitle: true,
+        }}
+      />
+      <ChatsStack.Screen 
+        name="Chat" 
+        component={ChatScreen}
+        options={({ route }) => ({ 
+          title: route.params?.title || 'Чат',
+        })}
+      />
+    </ChatsStack.Navigator>
+  );
+}
+
+// Стек навигации для контактов
+function ContactsStackNavigator() {
+  return (
+    <ContactsStack.Navigator>
+      <ContactsStack.Screen 
+        name="ContactsList" 
+        component={ContactsScreen}
+        options={{ 
+          title: 'Контакты',
+          headerLargeTitle: true,
+        }}
+      />
+    </ContactsStack.Navigator>
+  );
+}
+
+// Стек навигации для профиля
+function ProfileStackNavigator() {
+  return (
+    <ProfileStack.Navigator>
+      <ProfileStack.Screen 
+        name="ProfileMain" 
+        component={ProfileScreen}
+        options={{ 
+          title: 'Профиль',
+          headerLargeTitle: true,
+        }}
+      />
+    </ProfileStack.Navigator>
+  );
+}
+
+export function MainNavigator() {
+  const theme = useTheme();
+  
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused, color, size }) => {
+          let iconName: string;
+
+          if (route.name === 'Chats') {
+            iconName = focused ? 'message' : 'message-outline';
+          } else if (route.name === 'Contacts') {
+            iconName = focused ? 'account-group' : 'account-group-outline';
+          } else if (route.name === 'Profile') {
+            iconName = focused ? 'account-circle' : 'account-circle-outline';
+          } else {
+            iconName = 'help';
+          }
+
+          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
+        },
+        tabBarActiveTintColor: theme.colors.primary,
+        tabBarInactiveTintColor: 'gray',
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: theme.colors.surface,
+          borderTopColor: theme.colors.outlineVariant,
+          borderTopWidth: 1,
+        },
+      })}
+    >
+      <Tab.Screen 
+        name="Chats" 
+        component={ChatsStackNavigator}
+        options={{ 
+          tabBarLabel: 'Чаты',
+          tabBarBadge: undefined, // Здесь можно показывать количество непрочитанных
+        }}
+      />
+      <Tab.Screen 
+        name="Contacts" 
+        component={ContactsStackNavigator}
+        options={{ 
+          tabBarLabel: 'Контакты',
+        }}
+      />
+      <Tab.Screen 
+        name="Profile" 
+        component={ProfileStackNavigator}
+        options={{ 
+          tabBarLabel: 'Профиль',
+        }}
+      />
+    </Tab.Navigator>
+  );
+}