feat: refactor service glyphs and improve loading states; replace inline components with CenteredState and ServiceGlyph

App.js

@@ -3,13 +3,13 @@ import { StatusBar } from 'expo-status-bar';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 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 CenteredState from './src/components/CenteredState';
 import LoginScreen from './src/screens/LoginScreen';
 import RegisterScreen from './src/screens/RegisterScreen';
 import OnboardingScreen from './src/screens/OnboardingScreen';
@@ -32,6 +32,7 @@ function MainTabs({ route }) {
 
   return (
     <Tab.Navigator
+      id="MainTabsNavigator"
       screenOptions={{
         headerShown: false,
         tabBarActiveTintColor: theme.tabActive,
@@ -104,24 +105,18 @@ function AppInner() {
   };
 
   if ((!isReady || !bootChecked) && !error) {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: theme.background }}>
-        <ActivityIndicator size="large" color={theme.primary} />
-      </View>
-    );
+    return <CenteredState loading title="Loading app…" containerStyle={{ backgroundColor: theme.background }} />;
   }
 
   if (error) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20, backgroundColor: theme.background }}>
-        <Text style={{ fontSize: 16, color: theme.text, marginBottom: 12, textAlign: 'center' }}>{error}</Text>
-        <TouchableOpacity
-          onPress={initializeApp}
-          style={{ backgroundColor: theme.primary, paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
-        >
-          <Text style={{ color: '#fff', fontWeight: '600' }}>Retry</Text>
-        </TouchableOpacity>
-      </View>
+      <CenteredState
+        title="Unable to start app"
+        description={error}
+        actionLabel="Retry"
+        onAction={initializeApp}
+        containerStyle={{ backgroundColor: theme.background }}
+      />
     );
   }
 
@@ -129,6 +124,7 @@ function AppInner() {
     <>
       <NavigationContainer>
         <Stack.Navigator
+          id="RootStackNavigator"
           screenOptions={{ headerShown: false }}
           initialRouteName={bootUserId ? 'MainTabs' : 'Login'}
         >
@@ -143,7 +139,7 @@ function AppInner() {
           <Stack.Screen name="Settings" component={SettingsScreen} />
         </Stack.Navigator>
       </NavigationContainer>
-      <StatusBar style={theme.statusBarStyle} backgroundColor={theme.background} />
+      <StatusBar style={theme.statusBarStyle} />
     </>
   );
 }
@@ -158,4 +154,3 @@ function App() {
 
 registerRootComponent(App);
 
-export default App;