feat: add media renaming functionality; implement rename feature in MediaViewer and NASAPI

App.js

@@ -6,8 +6,10 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
 import { registerRootComponent } from 'expo';
 import * as WebBrowser from 'expo-web-browser';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ThemeProvider, useTheme } from './src/services/ThemeContext';
 import DatabaseService from './src/services/DatabaseService';
+import { getStoredUserId } from './src/services/AuthSession';
 import LoginScreen from './src/screens/LoginScreen';
 import RegisterScreen from './src/screens/RegisterScreen';
 import OnboardingScreen from './src/screens/OnboardingScreen';
@@ -15,6 +17,9 @@ import HomeScreen from './src/screens/HomeScreen';
 import SearchScreen from './src/screens/SearchScreen';
 import CollectionsScreen from './src/screens/AlbumsScreen';
 import SettingsScreen from './src/screens/SettingsScreen';
+import FolderIcon from './assets/icons/folder.svg';
+import LibraryGridIcon from './assets/icons/library-grid.svg';
+import SearchIcon from './assets/icons/search.svg';
 WebBrowser.maybeCompleteAuthSession();
 
 const Stack = createNativeStackNavigator();
@@ -22,6 +27,8 @@ const Tab = createBottomTabNavigator();
 function MainTabs({ route }) {
   const { userId } = route.params || {};
   const { theme } = useTheme();
+  const insets = useSafeAreaInsets();
+  const bottomInset = Math.max(insets.bottom, 8);
 
   return (
     <Tab.Navigator
@@ -33,8 +40,8 @@ function MainTabs({ route }) {
           backgroundColor: theme.tabBar,
           borderTopColor: theme.tabBarBorder,
           borderTopWidth: 1,
-          height: 56,
-          paddingBottom: 6,
+          height: 56 + bottomInset,
+          paddingBottom: bottomInset,
           paddingTop: 6,
         },
         tabBarLabelStyle: { fontSize: 11, fontWeight: '500' },
@@ -46,7 +53,7 @@ function MainTabs({ route }) {
         initialParams={{ userId }}
         options={{
           tabBarLabel: 'Library',
-          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>🖼️</Text>,
+          tabBarIcon: ({ color }) => <LibraryGridIcon width={20} height={20} color={color} />,
         }}
       />
       <Tab.Screen
@@ -55,7 +62,7 @@ function MainTabs({ route }) {
         initialParams={{ userId }}
         options={{
           tabBarLabel: 'Search',
-          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>🔍</Text>,
+          tabBarIcon: ({ color }) => <SearchIcon width={20} height={20} color={color} />,
         }}
       />
       <Tab.Screen
@@ -64,28 +71,20 @@ function MainTabs({ route }) {
         initialParams={{ userId }}
         options={{
           tabBarLabel: 'Collections',
-          tabBarIcon: ({ color }) => <Text style={{ fontSize: 22, color }}>📁</Text>,
+          tabBarIcon: ({ color }) => <FolderIcon width={20} height={20} color={color} />,
         }}
       />
     </Tab.Navigator>
   );
 }
-function AppNavigator() {
-  return (
-    <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="Login" component={LoginScreen} />
-      <Stack.Screen name="Register" component={RegisterScreen} />
-      <Stack.Screen name="Onboarding" component={OnboardingScreen} />
-      <Stack.Screen name="MainTabs" component={MainTabs} />
-      <Stack.Screen name="Settings" component={SettingsScreen} />
-    </Stack.Navigator>
-  );
-}
+// App navigation is initialized inside AppInner.
 
 function AppInner() {
   const { theme } = useTheme();
   const [isReady, setIsReady] = useState(false);
   const [error, setError] = useState(null);
+  const [bootUserId, setBootUserId] = useState(null);
+  const [bootChecked, setBootChecked] = useState(false);
 
   useEffect(() => { initializeApp(); }, []);
 
@@ -93,6 +92,9 @@ function AppInner() {
     try {
       setError(null);
       await DatabaseService.initDatabase();
+      const stored = await getStoredUserId();
+      setBootUserId(stored);
+      setBootChecked(true);
       setIsReady(true);
     } catch (err) {
       console.error('Database initialization failed:', err);
@@ -101,7 +103,7 @@ function AppInner() {
     }
   };
 
-  if (!isReady && !error) {
+  if ((!isReady || !bootChecked) && !error) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: theme.background }}>
         <ActivityIndicator size="large" color={theme.primary} />
@@ -126,7 +128,20 @@ function AppInner() {
   return (
     <>
       <NavigationContainer>
-        <AppNavigator />
+        <Stack.Navigator
+          screenOptions={{ headerShown: false }}
+          initialRouteName={bootUserId ? 'MainTabs' : 'Login'}
+        >
+          <Stack.Screen name="Login" component={LoginScreen} />
+          <Stack.Screen name="Register" component={RegisterScreen} />
+          <Stack.Screen name="Onboarding" component={OnboardingScreen} />
+          <Stack.Screen
+            name="MainTabs"
+            component={MainTabs}
+            initialParams={bootUserId ? { userId: bootUserId } : undefined}
+          />
+          <Stack.Screen name="Settings" component={SettingsScreen} />
+        </Stack.Navigator>
       </NavigationContainer>
       <StatusBar style={theme.statusBarStyle} backgroundColor={theme.background} />
     </>