notification system implemented

need refinements

apps/mobile/src/app/(tabs)/recommendations.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef } from "react";
 import {
   View,
   Text,
@@ -15,6 +15,8 @@ import { useUser } from "@clerk/clerk-expo";
 import { useFocusEffect } from "expo-router";
 import { theme } from "../../styles/theme";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
+import { useNotifications } from "../../contexts/NotificationsContext";
+import { NotificationsModal } from "../../components/NotificationsModal";
 import type { Recommendation } from "../../api/recommendations";
 import log from "../../utils/logger";
 
@@ -26,8 +28,20 @@ export default function RecommendationsScreen() {
     refetchRecommendations,
     generateNewRecommendation,
   } = useRecommendations();
+  const { unreadCount, refetchNotifications } = useNotifications();
   const [generating, setGenerating] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [notificationsVisible, setNotificationsVisible] = useState(false);
+
+  const handleOpenNotifications = () => {
+    log.debug("Opening notifications modal", { unreadCount });
+    setNotificationsVisible(true);
+  };
+
+  const handleCloseNotifications = () => {
+    log.debug("Closing notifications modal");
+    setNotificationsVisible(false);
+  };
 
   // Filter to show only approved recommendations for regular users
   const recommendations = allRecommendations.filter(
@@ -37,12 +51,13 @@ export default function RecommendationsScreen() {
   useFocusEffect(
     useCallback(() => {
       refetchRecommendations();
-    }, [refetchRecommendations]),
+      refetchNotifications();
+    }, [refetchRecommendations, refetchNotifications]),
   );
 
   const onRefresh = async () => {
     setRefreshing(true);
-    await refetchRecommendations();
+    await Promise.all([refetchRecommendations(), refetchNotifications()]);
     setRefreshing(false);
   };
 
@@ -61,7 +76,7 @@ export default function RecommendationsScreen() {
               setGenerating(true);
               await generateNewRecommendation({
                 userId: user.id,
-                modelProvider: "openai",
+                modelProvider: "deepseek",
                 useExternalModel: true,
               });
               Alert.alert(
@@ -94,6 +109,10 @@ export default function RecommendationsScreen() {
 
   return (
     <View style={styles.container}>
+      <NotificationsModal
+        visible={notificationsVisible}
+        onClose={handleCloseNotifications}
+      />
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         refreshControl={
@@ -117,9 +136,18 @@ export default function RecommendationsScreen() {
               Personalized fitness & nutrition plans
             </Text>
           </View>
-          <View style={styles.iconContainer}>
+          <TouchableOpacity
+            style={styles.iconContainer}
+            onPress={handleOpenNotifications}
+            activeOpacity={0.7}
+          >
             <Ionicons name="sparkles" size={32} color="#fff" />
-          </View>
+            {unreadCount > 0 && (
+              <View style={styles.badge}>
+                <Text style={styles.badgeText}>{unreadCount}</Text>
+              </View>
+            )}
+          </TouchableOpacity>
         </LinearGradient>
 
         {/* Generate Button */}
@@ -314,6 +342,22 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    backgroundColor: theme.colors.danger,
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  badgeText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: "bold",
+  },
   actionContainer: {
     paddingHorizontal: 20,
     marginBottom: 20,