feat: add Activity screen and establish core application navigation structure.

Author: Arun-kushwaha007

apps/mobile/app/navigation/AppNavigator.tsx

@@ -80,7 +80,8 @@ function MainTabs() {
             Activity: 'history',
             Profile: 'account-circle',
           };
-          return <MaterialCommunityIcons name={iconByRoute[route.name]} size={size} color={color} />;
+          const iconName = iconByRoute[route.name] || 'information';
+          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
         },
       })}
     >

apps/mobile/app/screens/ActivityScreen.tsx

@@ -140,7 +140,7 @@ export function ActivityScreen({ route }: { route?: { params?: { groupId?: strin
           accessibilityLabel={actionText(item)}
         >
           <View style={[styles.iconBg, { backgroundColor: `${iconColor}18` }]}>
-            <MaterialCommunityIcons name={iconByType[item.type]} size={20} color={iconColor} />
+            <MaterialCommunityIcons name={iconByType[item.type] || 'information-outline'} size={20} color={iconColor} />
           </View>
           <View style={styles.content}>
             <Text style={[styles.title, { color: colors.text_primary }]} numberOfLines={1}>

apps/mobile/app/theme/useAppTheme.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import { useColorScheme } from 'react-native';
 import { colors } from './colors';
+import { typography } from './typography';
+import { spacing } from './spacing';
+import { lightTheme, darkTheme } from './theme';
 import { useThemeStore } from '../store/themeStore';
 
 export type ThemeColors = typeof colors.light;
+export type ThemeTypography = typeof typography;
+export type ThemeSpacing = typeof spacing;
+export type ThemeShadows = typeof lightTheme.shadows;
 
-export function useAppTheme(): { isDark: boolean; colors: ThemeColors } {
+export function useAppTheme() {
   const systemColorScheme = useColorScheme();
   const themeMode = useThemeStore((state) => state.themeMode);
 
@@ -14,8 +20,13 @@ export function useAppTheme(): { isDark: boolean; colors: ThemeColors } {
     return themeMode === 'dark';
   }, [themeMode, systemColorScheme]);
 
+  const theme = isDark ? darkTheme : lightTheme;
+  
   return React.useMemo(() => ({
     isDark,
     colors: isDark ? colors.dark : colors.light,
-  }), [isDark]);
+    typography,
+    spacing,
+    shadows: theme.shadows,
+  }), [isDark, theme.shadows]);
 }