Merge pull request #11 from sBubshait/feature/ux

Feature/ux

frontend/lib/main.dart

@@ -129,11 +129,8 @@ class _LandingPageState extends State<LandingPage> {
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: false, // Prevent back navigation from landing page
-        // Prevent back navigation from landing page
-        return false;
-      },
       child: Scaffold(
       body: Stack(
         children: [
@@ -379,11 +376,8 @@ class _SignInPageState extends State<SignInPage> {
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: false, // Prevent back navigation from sign in page
-        // Prevent back navigation from sign in page
-        return false;
-      },
       child: Scaffold(
         body: Container(
         decoration: BoxDecoration(

frontend/lib/screens/create_post_screen.dart

@@ -70,11 +70,8 @@ class _CreatePostScreenState extends State<CreatePostScreen> {
     final remainingChars = _maxCharacters - _bodyController.text.length;
     final isOverLimit = remainingChars < 0;
 
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: true, // Allow back navigation to go back to feed page only
-        // Allow back navigation to go back to feed page only
-        return true;
-      },
       child: Scaffold(
       appBar: AppBar(
         title: Text('Create Post', style: TextStyle(fontWeight: FontWeight.w600)),

frontend/lib/screens/home_screen.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'pages/feed_page.dart';
 import 'pages/invitations_page.dart';
 import 'pages/profile_page.dart';
+import '../services/invitations_service.dart';
 
 class HomeScreen extends StatefulWidget {
   @override
@@ -10,9 +11,70 @@ class HomeScreen extends StatefulWidget {
 
 class _HomeScreenState extends State<HomeScreen> {
   int _currentIndex = 0;
+  int _availableInvitationsCount = 0;
 
   final List<Widget> _pages = [FeedPage(), InvitationsPage(), ProfilePage()];
 
+  @override
+  void initState() {
+    super.initState();
+    // Start polling and listen to invitations stream
+    InvitationsService.startPolling();
+    _listenToInvitations();
+  }
+
+  @override
+  void dispose() {
+    InvitationsService.stopPolling();
+    super.dispose();
+  }
+
+  void _listenToInvitations() {
+    InvitationsService.getInvitationsStream().listen((invitationsData) {
+      if (mounted) {
+        setState(() {
+          _availableInvitationsCount = invitationsData.available.length;
+        });
+      }
+    });
+  }
+
+  Widget _buildInvitationsBadge() {
+    if (_availableInvitationsCount == 0) {
+      return Icon(Icons.mail);
+    }
+    
+    return Stack(
+      children: [
+        Icon(Icons.mail),
+        Positioned(
+          right: 0,
+          top: 0,
+          child: Container(
+            padding: EdgeInsets.all(1),
+            decoration: BoxDecoration(
+              color: Colors.red,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            constraints: BoxConstraints(
+              minWidth: 16,
+              minHeight: 16,
+            ),
+            child: Text(
+              _availableInvitationsCount > 99 ? '99+' : '$_availableInvitationsCount',
+              style: TextStyle(
+                color: Colors.white,
+                fontSize: 10,
+                fontWeight: FontWeight.bold,
+              ),
+              textAlign: TextAlign.center,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return PopScope(
@@ -32,7 +94,7 @@ class _HomeScreenState extends State<HomeScreen> {
           items: [
             BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Feed'),
             BottomNavigationBarItem(
-              icon: Icon(Icons.mail),
+              icon: _buildInvitationsBadge(),
               label: 'Invitations',
             ),
             BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),

frontend/lib/screens/notification_permission_screen.dart

@@ -79,11 +79,8 @@ class _NotificationPermissionScreenState
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: false, // Prevent back navigation from notification permission screen
-        // Prevent back navigation from notification permission screen
-        return false;
-      },
       child: Scaffold(
       body: Container(
         decoration: BoxDecoration(

frontend/lib/screens/pages/feed_page.dart

@@ -14,7 +14,15 @@ class _FeedPageState extends State<FeedPage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return PopScope(
+      canPop: false, // Prevent back navigation from feed page
+      onPopInvoked: (bool didPop) {
+        // Prevent any pop behavior, including iOS back gesture
+        if (!didPop) {
+          // Do nothing - stay on feed page
+        }
+      },
+      child: Scaffold(
       appBar: AppBar(
         title: Text('Feed', style: TextStyle(fontWeight: FontWeight.w600)),
         backgroundColor: Colors.white,
@@ -45,6 +53,7 @@ class _FeedPageState extends State<FeedPage> {
         backgroundColor: Color(0xFF6A4C93),
         child: Icon(Icons.edit, color: Colors.white),
       ),
+      ),
     );
   }
 

frontend/lib/screens/pages/invitation_details_page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import '../../models/invitation_models.dart';
 import '../../services/invitations_service.dart';
+import '../../services/user_service.dart';
 import '../../utils/invitation_utils.dart';
 
 class InvitationDetailsPage extends StatefulWidget {
@@ -23,11 +24,14 @@ class _InvitationDetailsPageState extends State<InvitationDetailsPage> {
   InvitationDetails? _invitationDetails;
   bool _isLoading = true;
   bool _isCancelling = false;
+  bool _isAccepting = false;
+  bool _isCurrentlyParticipant = false;
   String? _errorMessage;
 
   @override
   void initState() {
     super.initState();
+    _isCurrentlyParticipant = widget.isParticipant;
     _loadInvitationDetails();
   }
 
@@ -48,6 +52,11 @@ class _InvitationDetailsPageState extends State<InvitationDetailsPage> {
           _errorMessage = result['message'];
         }
       });
+      
+      // Update participation status after loading details
+      if (result['success']) {
+        await _updateParticipationStatus();
+      }
     }
   }
 
@@ -150,13 +159,56 @@ class _InvitationDetailsPageState extends State<InvitationDetailsPage> {
     }
   }
 
+  Future<void> _updateParticipationStatus() async {
+    if (_invitationDetails == null) return;
+    
+    final userResult = await UserService.getCurrentUser();
+    if (userResult['success'] && userResult['data'] != null) {
+      final currentUserId = userResult['data']['id'];
+      final isParticipant = _invitationDetails!.attendees.any((attendee) => attendee.id == currentUserId);
+      setState(() {
+        _isCurrentlyParticipant = isParticipant;
+      });
+    }
+  }
+
+  Future<void> _acceptInvitation() async {
+    setState(() {
+      _isAccepting = true;
+    });
+
+    final result = await InvitationsService.acceptInvitation(widget.invitationId);
+
+    if (mounted) {
+      setState(() {
+        _isAccepting = false;
+      });
+
+      if (result['success']) {
+        // Reload invitation details to reflect the new state
+        await _loadInvitationDetails();
+        
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Invitation accepted successfully!'),
+            backgroundColor: Colors.green,
+          ),
+        );
+      } else {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(result['message'] ?? 'Failed to accept invitation'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: true, // Allow back navigation to go back to invitations page only
-        // Allow back navigation to go back to invitations page only
-        return true;
-      },
       child: Scaffold(
       backgroundColor: Colors.grey[50],
       appBar: AppBar(
@@ -512,7 +564,45 @@ class _InvitationDetailsPageState extends State<InvitationDetailsPage> {
                           ),
                         ),
                       ],
-                      if (widget.isParticipant) ...[
+                      
+                      // Accept button for non-participants who are not owners
+                      if (!_isCurrentlyParticipant && !widget.isOwner) ...[
+                        SizedBox(height: 32),
+                        Container(
+                          width: double.infinity,
+                          height: 56,
+                          child: ElevatedButton(
+                            onPressed: _isAccepting ? null : _acceptInvitation,
+                            style: ElevatedButton.styleFrom(
+                              backgroundColor: Color(0xFF6A4C93),
+                              foregroundColor: Colors.white,
+                              shape: RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(12),
+                              ),
+                              elevation: 2,
+                            ),
+                            child: _isAccepting
+                                ? SizedBox(
+                                    height: 20,
+                                    width: 20,
+                                    child: CircularProgressIndicator(
+                                      strokeWidth: 2,
+                                      valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+                                    ),
+                                  )
+                                : Text(
+                                    'Accept Invitation',
+                                    style: TextStyle(
+                                      fontSize: 16,
+                                      fontWeight: FontWeight.w600,
+                                    ),
+                                  ),
+                          ),
+                        ),
+                      ],
+                      
+                      // Cancel/Leave button for participants
+                      if (_isCurrentlyParticipant) ...[
                         SizedBox(height: 32),
                         Container(
                           width: double.infinity,

frontend/lib/screens/pages/invitations_page.dart

@@ -49,7 +49,9 @@ class _InvitationsPageState extends State<InvitationsPage>
                 _isLoading = false;
                 _errorMessage = null;
               });
-              print('Invitations UI updated with ${updatedInvitationsData.created.length + updatedInvitationsData.accepted.length + updatedInvitationsData.available.length} total invitations');
+              print(
+                'Invitations UI updated with ${updatedInvitationsData.created.length + updatedInvitationsData.accepted.length + updatedInvitationsData.available.length} total invitations',
+              );
             }
           },
           onError: (error) {
@@ -69,7 +71,9 @@ class _InvitationsPageState extends State<InvitationsPage>
       });
     }
 
-    final result = await InvitationsService.getAllInvitations(forceRefresh: forceRefresh);
+    final result = await InvitationsService.getAllInvitations(
+      forceRefresh: forceRefresh,
+    );
 
     if (mounted) {
       setState(() {
@@ -528,7 +532,15 @@ class _InvitationsPageState extends State<InvitationsPage>
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return PopScope(
+      canPop: false, // Prevent back navigation from invitations page
+      onPopInvoked: (bool didPop) {
+        // Prevent any pop behavior, including iOS back gesture
+        if (!didPop) {
+          // Do nothing - stay on invitations page
+        }
+      },
+      child: Scaffold(
         appBar: AppBar(
           title: Text(
             'Invitations',
@@ -543,7 +555,10 @@ class _InvitationsPageState extends State<InvitationsPage>
           ),
           automaticallyImplyLeading: false,
           actions: [
-          IconButton(icon: Icon(Icons.refresh), onPressed: () => _loadInvitations(forceRefresh: true)),
+            IconButton(
+              icon: Icon(Icons.refresh),
+              onPressed: () => _loadInvitations(forceRefresh: true),
+            ),
           ],
         ),
         body: _isLoading
@@ -593,6 +608,7 @@ class _InvitationsPageState extends State<InvitationsPage>
           backgroundColor: Color(0xFF6A4C93),
           child: Icon(Icons.add, color: Colors.white),
         ),
+      ),
     );
   }
 }
@@ -734,11 +750,8 @@ class _CreateInvitationPageState extends State<CreateInvitationPage> {
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: true, // Allow back navigation to go back to invitations page only
-        // Allow back navigation to go back to invitations page only
-        return true;
-      },
       child: Scaffold(
         body: Container(
           decoration: BoxDecoration(

frontend/lib/screens/pages/profile_page.dart

@@ -170,7 +170,15 @@ class _ProfilePageState extends State<ProfilePage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return PopScope(
+      canPop: false, // Prevent back navigation from profile page
+      onPopInvoked: (bool didPop) {
+        // Prevent any pop behavior, including iOS back gesture
+        if (!didPop) {
+          // Do nothing - stay on profile page
+        }
+      },
+      child: Scaffold(
       appBar: AppBar(
         title: Text('Profile', style: TextStyle(fontWeight: FontWeight.w600)),
         backgroundColor: Colors.white,
@@ -319,6 +327,7 @@ class _ProfilePageState extends State<ProfilePage> {
           ],
         ),
         ),
+      ),
     );
   }
 }
@@ -674,11 +683,8 @@ class _SettingsPageState extends State<SettingsPage> {
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    return PopScope(
-      onWillPop: () async {
+      canPop: true, // Allow back navigation to go back to profile page only
-        // Allow back navigation to go back to profile page only
-        return true;
-      },
       child: Scaffold(
         appBar: AppBar(
           title: Text('Settings', style: TextStyle(fontWeight: FontWeight.w600)),

frontend/web/index.html

@@ -32,6 +32,21 @@
 
   <title>Wesal</title>
   <link rel="manifest" href="manifest.json">
+  <style>
+    body {
+      overscroll-behavior-x: none;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    /* Prevent pull-to-refresh and back gesture */
+    html,
+    body {
+      overflow-x: hidden;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </head>
 
 <body>
@@ -50,6 +65,23 @@
           });
       });
     }
+
+    // Prevent iOS Safari back gesture
+    window.addEventListener('touchstart', function (e) {
+      if (e.touches.length > 1) return;
+
+      const touch = e.touches[0];
+      if (touch.clientX < 20) { // Left edge
+        e.preventDefault();
+      }
+    }, { passive: false });
+
+    // Override browser back
+    window.addEventListener('popstate', function (e) {
+      e.preventDefault();
+      // Send message to Flutter
+      window.dispatchEvent(new CustomEvent('browser-back'));
+    });
   </script>
 </body>