feat: support seeing all people that liked a post

frontend/lib/models/post_models.dart

@@ -92,6 +92,84 @@ class Post {
   }
 }
 
+class LikedUser {
+  final String id;
+  final String displayName;
+  final DateTime likeTime;
+
+  LikedUser({
+    required this.id,
+    required this.displayName,
+    required this.likeTime,
+  });
+
+  factory LikedUser.fromJson(Map<String, dynamic> json) {
+    return LikedUser(
+      id: json['id']?.toString() ?? '',
+      displayName: json['displayName'] ?? '',
+      likeTime: DateTime.parse(json['likeTime'] ?? DateTime.now().toIso8601String()),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'id': id,
+      'displayName': displayName,
+      'likeTime': likeTime.toIso8601String(),
+    };
+  }
+}
+
+class DetailedPost {
+  final String id;
+  final PostCreator creator;
+  final String body;
+  final int likes;
+  final int comments;
+  final bool liked;
+  final DateTime creationDate;
+  final List<LikedUser> likedUsers;
+
+  DetailedPost({
+    required this.id,
+    required this.creator,
+    required this.body,
+    required this.likes,
+    required this.comments,
+    required this.liked,
+    required this.creationDate,
+    required this.likedUsers,
+  });
+
+  factory DetailedPost.fromJson(Map<String, dynamic> json) {
+    return DetailedPost(
+      id: json['id']?.toString() ?? '',
+      creator: PostCreator.fromJson(json['creator'] ?? {}),
+      body: json['body'] ?? '',
+      likes: int.tryParse(json['likes']?.toString() ?? '0') ?? 0,
+      comments: int.tryParse(json['comments']?.toString() ?? '0') ?? 0,
+      liked: json['liked'] == true,
+      creationDate: DateTime.parse(json['creationDate'] ?? DateTime.now().toIso8601String()),
+      likedUsers: (json['likedUsers'] as List?)
+          ?.map((user) => LikedUser.fromJson(user))
+          .toList() ?? [],
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'id': id,
+      'creator': creator.toJson(),
+      'body': body,
+      'likes': likes,
+      'comments': comments,
+      'liked': liked,
+      'creationDate': creationDate.toIso8601String(),
+      'likedUsers': likedUsers.map((user) => user.toJson()).toList(),
+    };
+  }
+}
+
 class CreatePostRequest {
   final String body;
 

frontend/lib/screens/pages/post_view_page.dart

@@ -0,0 +1,648 @@
+import 'package:flutter/material.dart';
+import 'package:share_plus/share_plus.dart';
+import '../../models/post_models.dart';
+import '../../services/post_service.dart';
+import '../../utils/invitation_utils.dart';
+
+class PostViewPage extends StatefulWidget {
+  final String postId;
+
+  const PostViewPage({Key? key, required this.postId}) : super(key: key);
+
+  @override
+  _PostViewPageState createState() => _PostViewPageState();
+}
+
+class _PostViewPageState extends State<PostViewPage> {
+  bool _isLoading = true;
+  DetailedPost? _post;
+  String _errorMessage = '';
+  bool _isLiking = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadPost();
+  }
+
+  Future<void> _loadPost() async {
+    setState(() {
+      _isLoading = true;
+      _errorMessage = '';
+    });
+
+    try {
+      final result = await PostService.getPost(widget.postId);
+      setState(() {
+        if (result['success']) {
+          _post = result['post'];
+        } else {
+          _errorMessage = result['message'] ?? 'Failed to load post';
+        }
+        _isLoading = false;
+      });
+    } catch (e) {
+      setState(() {
+        _errorMessage = 'Network error: $e';
+        _isLoading = false;
+      });
+    }
+  }
+
+  Color _getAvatarColor(String displayName) {
+    final colors = [
+      Color(0xFF32B0A5),
+      Color(0xFF4600B9),
+      Color(0xFF6A4C93),
+      Color(0xFFFF6347),
+      Color(0xFF32CD32),
+      Color(0xFF9932CC),
+    ];
+
+    int hash = displayName.hashCode;
+    return colors[hash.abs() % colors.length];
+  }
+
+  String _getAvatarLetter(String displayName) {
+    return displayName.isNotEmpty ? displayName[0].toUpperCase() : '?';
+  }
+
+  void _sharePost(DetailedPost post) {
+    final shareText =
+        '${post.creator.displayName} posted on Wesal.online:\n\n${post.body}';
+    Share.share(shareText);
+  }
+
+  Future<void> _toggleLike() async {
+    if (_isLiking || _post == null) return;
+
+    setState(() {
+      _isLiking = true;
+    });
+
+    try {
+      Map<String, dynamic> result;
+      if (_post!.liked) {
+        result = await PostService.unlikePost(_post!.id);
+      } else {
+        result = await PostService.likePost(_post!.id);
+      }
+
+      if (result['success']) {
+        await _loadPost(); // Reload to get updated data
+      } else {
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(result['message'] ?? 'Failed to update like'),
+              backgroundColor: Colors.red,
+            ),
+          );
+        }
+      }
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Network error occurred'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    } finally {
+      setState(() {
+        _isLiking = false;
+      });
+    }
+  }
+
+  Widget _buildLikedBySection() {
+    if (_post == null || _post!.likes == 0) return SizedBox.shrink();
+
+    final displayUsers = _post!.likedUsers.take(3).toList();
+
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 16),
+      child: GestureDetector(
+        onTap: _showLikedUsers,
+        child: Container(
+          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.05),
+                blurRadius: 10,
+                offset: Offset(0, 2),
+              ),
+            ],
+          ),
+          child: Row(
+            children: [
+              // Show up to 3 avatars
+              ...displayUsers.asMap().entries.map((entry) {
+                final index = entry.key;
+                final user = entry.value;
+                final avatarColor = _getAvatarColor(user.displayName);
+                final avatarLetter = _getAvatarLetter(user.displayName);
+
+                return Container(
+                  margin: EdgeInsets.only(
+                    right: index < displayUsers.length - 1 ? -8 : 0,
+                  ),
+                  child: CircleAvatar(
+                    radius: 16,
+                    backgroundColor: Colors.white,
+                    child: CircleAvatar(
+                      radius: 14,
+                      backgroundColor: avatarColor,
+                      child: Text(
+                        avatarLetter,
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                          fontSize: 12,
+                        ),
+                      ),
+                    ),
+                  ),
+                );
+              }).toList(),
+              SizedBox(width: 12),
+              Expanded(
+                child: Text(
+                  _post!.likes == 1
+                      ? 'Liked by ${_post!.likedUsers.first.displayName}'
+                      : _post!.likes == 2
+                      ? 'Liked by ${_post!.likedUsers[0].displayName} and ${_post!.likedUsers[1].displayName}'
+                      : 'Liked by ${_post!.likedUsers[0].displayName}, ${_post!.likedUsers[1].displayName} and ${_post!.likes - 2} others',
+                  style: TextStyle(color: Colors.grey[700], fontSize: 14),
+                ),
+              ),
+              Text(
+                'See all',
+                style: TextStyle(
+                  color: Color(0xFF6A4C93),
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+              SizedBox(width: 4),
+              Icon(Icons.arrow_forward_ios, size: 12, color: Color(0xFF6A4C93)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _showLikedUsers() {
+    if (_post == null || _post!.likedUsers.isEmpty) return;
+
+    showModalBottomSheet(
+      context: context,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (context) => Container(
+        padding: EdgeInsets.all(16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: 50,
+              height: 4,
+              decoration: BoxDecoration(
+                color: Colors.grey[300],
+                borderRadius: BorderRadius.circular(2),
+              ),
+            ),
+            SizedBox(height: 16),
+            Text(
+              'Liked by',
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: Colors.black87,
+              ),
+            ),
+            SizedBox(height: 16),
+            Flexible(
+              child: ListView.builder(
+                shrinkWrap: true,
+                itemCount: _post!.likedUsers.length,
+                itemBuilder: (context, index) {
+                  final user = _post!.likedUsers[index];
+                  final avatarColor = _getAvatarColor(user.displayName);
+                  final avatarLetter = _getAvatarLetter(user.displayName);
+                  final relativeTime = InvitationUtils.getRelativeTime(
+                    user.likeTime,
+                  );
+
+                  return ListTile(
+                    leading: CircleAvatar(
+                      radius: 20,
+                      backgroundColor: avatarColor,
+                      child: Text(
+                        avatarLetter,
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                    title: Text(
+                      user.displayName,
+                      style: TextStyle(
+                        fontWeight: FontWeight.w500,
+                        fontSize: 16,
+                      ),
+                    ),
+                    subtitle: Text(
+                      relativeTime,
+                      style: TextStyle(color: Colors.grey[600], fontSize: 12),
+                    ),
+                  );
+                },
+              ),
+            ),
+            SizedBox(height: 16),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildMockComments() {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Comments',
+            style: TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w600,
+              color: Colors.black87,
+            ),
+          ),
+          SizedBox(height: 16),
+          _buildComment(
+            'Ahmed Ali',
+            'Great post! This is exactly what I was thinking about.',
+            '2h',
+            false,
+          ),
+          _buildComment(
+            'Sara Ahmed',
+            'Thanks for sharing this. Very insightful!',
+            '1h',
+            false,
+          ),
+          _buildComment(
+            'Mohamed Hassan',
+            'I completely agree with your point here.',
+            '45m',
+            true,
+            replyTo: 'Sara Ahmed',
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildComment(
+    String name,
+    String comment,
+    String time,
+    bool isReply, {
+    String? replyTo,
+  }) {
+    final avatarColor = _getAvatarColor(name);
+    final avatarLetter = _getAvatarLetter(name);
+
+    return Container(
+      margin: EdgeInsets.only(bottom: 16, left: isReply ? 40 : 0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          CircleAvatar(
+            radius: isReply ? 16 : 20,
+            backgroundColor: avatarColor,
+            child: Text(
+              avatarLetter,
+              style: TextStyle(
+                color: Colors.white,
+                fontWeight: FontWeight.bold,
+                fontSize: isReply ? 12 : 14,
+              ),
+            ),
+          ),
+          SizedBox(width: 12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    Text(
+                      name,
+                      style: TextStyle(
+                        fontWeight: FontWeight.w600,
+                        fontSize: 14,
+                        color: Colors.black87,
+                      ),
+                    ),
+                    SizedBox(width: 8),
+                    Text(
+                      time,
+                      style: TextStyle(color: Colors.grey[600], fontSize: 12),
+                    ),
+                  ],
+                ),
+                if (replyTo != null) ...[
+                  SizedBox(height: 4),
+                  Text.rich(
+                    TextSpan(
+                      children: [
+                        TextSpan(
+                          text: 'Replying to ',
+                          style: TextStyle(
+                            color: Colors.grey[600],
+                            fontSize: 12,
+                          ),
+                        ),
+                        TextSpan(
+                          text: '@$replyTo',
+                          style: TextStyle(
+                            color: Color(0xFF6A4C93),
+                            fontSize: 12,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+                SizedBox(height: 4),
+                Text(
+                  comment,
+                  style: TextStyle(
+                    fontSize: 14,
+                    height: 1.4,
+                    color: Colors.black87,
+                  ),
+                ),
+                SizedBox(height: 8),
+                Row(
+                  children: [
+                    TextButton(
+                      onPressed: () {},
+                      style: TextButton.styleFrom(
+                        padding: EdgeInsets.zero,
+                        minimumSize: Size.zero,
+                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      ),
+                      child: Text(
+                        'Like',
+                        style: TextStyle(color: Colors.grey[600], fontSize: 12),
+                      ),
+                    ),
+                    SizedBox(width: 16),
+                    TextButton(
+                      onPressed: () {},
+                      style: TextButton.styleFrom(
+                        padding: EdgeInsets.zero,
+                        minimumSize: Size.zero,
+                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      ),
+                      child: Text(
+                        'Reply',
+                        style: TextStyle(color: Colors.grey[600], fontSize: 12),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        elevation: 0,
+        leading: IconButton(
+          onPressed: () => Navigator.pop(context),
+          icon: Icon(Icons.arrow_back, color: Colors.black87),
+        ),
+        title: Text(
+          'Post',
+          style: TextStyle(
+            color: Colors.black87,
+            fontSize: 18,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+      backgroundColor: Color(0xFFF5F5F5),
+      body: _buildBody(),
+    );
+  }
+
+  Widget _buildBody() {
+    if (_isLoading) {
+      return Center(
+        child: CircularProgressIndicator(
+          valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF6A4C93)),
+        ),
+      );
+    }
+
+    if (_errorMessage.isNotEmpty) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(Icons.error_outline, size: 64, color: Colors.grey[400]),
+            SizedBox(height: 16),
+            Text(
+              _errorMessage,
+              style: TextStyle(fontSize: 16, color: Colors.grey[600]),
+              textAlign: TextAlign.center,
+            ),
+            SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: _loadPost,
+              style: ElevatedButton.styleFrom(
+                backgroundColor: Color(0xFF6A4C93),
+                foregroundColor: Colors.white,
+              ),
+              child: Text('Try Again'),
+            ),
+          ],
+        ),
+      );
+    }
+
+    if (_post == null) {
+      return Center(child: Text('Post not found'));
+    }
+
+    final creator = _post!.creator;
+    final avatarColor = _getAvatarColor(creator.displayName);
+    final avatarLetter = _getAvatarLetter(creator.displayName);
+    final relativeTime = InvitationUtils.getRelativeTime(_post!.creationDate);
+
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            margin: EdgeInsets.all(16),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(12),
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.05),
+                  blurRadius: 10,
+                  offset: Offset(0, 2),
+                ),
+              ],
+            ),
+            child: Padding(
+              padding: EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    children: [
+                      CircleAvatar(
+                        radius: 24,
+                        backgroundColor: avatarColor,
+                        child: Text(
+                          avatarLetter,
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontWeight: FontWeight.bold,
+                            fontSize: 18,
+                          ),
+                        ),
+                      ),
+                      SizedBox(width: 12),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              creator.displayName,
+                              style: TextStyle(
+                                fontWeight: FontWeight.w600,
+                                fontSize: 18,
+                                color: Colors.black87,
+                              ),
+                            ),
+                            SizedBox(height: 2),
+                            Text(
+                              relativeTime,
+                              style: TextStyle(
+                                color: Colors.grey[600],
+                                fontSize: 14,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      IconButton(
+                        onPressed: () => _sharePost(_post!),
+                        icon: Icon(
+                          Icons.share_outlined,
+                          color: Colors.grey[600],
+                        ),
+                      ),
+                    ],
+                  ),
+                  SizedBox(height: 16),
+                  Text(
+                    _post!.body,
+                    style: TextStyle(
+                      fontSize: 16,
+                      height: 1.5,
+                      color: Colors.black87,
+                    ),
+                  ),
+                  SizedBox(height: 20),
+                  Row(
+                    children: [
+                      IconButton(
+                        onPressed: _isLiking ? null : _toggleLike,
+                        icon: _isLiking
+                            ? SizedBox(
+                                width: 24,
+                                height: 24,
+                                child: CircularProgressIndicator(
+                                  strokeWidth: 2,
+                                  valueColor: AlwaysStoppedAnimation<Color>(
+                                    _post!.liked
+                                        ? Colors.red
+                                        : Colors.grey[600]!,
+                                  ),
+                                ),
+                              )
+                            : Icon(
+                                _post!.liked
+                                    ? Icons.favorite
+                                    : Icons.favorite_border,
+                                color: _post!.liked
+                                    ? Colors.red
+                                    : Colors.grey[600],
+                                size: 28,
+                              ),
+                      ),
+                      Text(
+                        '${_post!.likes}',
+                        style: TextStyle(
+                          color: Colors.grey[700],
+                          fontWeight: FontWeight.w500,
+                          fontSize: 16,
+                        ),
+                      ),
+                      SizedBox(width: 20),
+                      Icon(
+                        Icons.chat_bubble_outline,
+                        color: Colors.grey[600],
+                        size: 28,
+                      ),
+                      SizedBox(width: 8),
+                      Text(
+                        '${_post!.comments}',
+                        style: TextStyle(
+                          color: Colors.grey[700],
+                          fontWeight: FontWeight.w500,
+                          fontSize: 16,
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SizedBox(height: 8),
+          _buildLikedBySection(),
+          SizedBox(height: 16),
+          _buildMockComments(),
+          SizedBox(height: 24),
+        ],
+      ),
+    );
+  }
+}

frontend/lib/services/post_service.dart

@@ -155,4 +155,31 @@ class PostService {
       return {'success': false, 'message': 'Network error: $e', 'post': null};
     }
   }
+
+  static Future<Map<String, dynamic>> getPost(String postId) async {
+    try {
+      final response = await HttpService.get('/posts/get?id=$postId');
+
+      final responseData = jsonDecode(response.body);
+
+      if (response.statusCode == 200) {
+        return {
+          'success': responseData['status'] ?? false,
+          'message': responseData['message'] ?? '',
+          'post': responseData['data'] != null
+              ? DetailedPost.fromJson(responseData['data'])
+              : null,
+        };
+      } else {
+        return {
+          'success': false,
+          'message': responseData['message'] ?? 'Failed to fetch post',
+          'post': null,
+        };
+      }
+    } catch (e) {
+      print('Error fetching post: $e');
+      return {'success': false, 'message': 'Network error: $e', 'post': null};
+    }
+  }
 }

frontend/lib/widgets/posts_list.dart

@@ -3,6 +3,7 @@ import 'package:share_plus/share_plus.dart';
 import '../models/post_models.dart';
 import '../services/post_service.dart';
 import '../utils/invitation_utils.dart';
+import '../screens/pages/post_view_page.dart';
 
 class PostsList extends StatefulWidget {
   final Future<Map<String, dynamic>> Function() fetchPosts;
@@ -77,10 +78,7 @@ class PostsListState extends State<PostsList> {
     Widget body = _buildBody();
 
     if (widget.showRefreshIndicator) {
-      body = RefreshIndicator(
+      body = RefreshIndicator(onRefresh: _refreshPosts, child: body);
-        onRefresh: _refreshPosts,
-        child: body,
-      );
     }
 
     return body;
@@ -100,18 +98,11 @@ class PostsListState extends State<PostsList> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Icon(
+            Icon(Icons.error_outline, size: 64, color: Colors.grey[400]),
-              Icons.error_outline,
-              size: 64,
-              color: Colors.grey[400],
-            ),
             SizedBox(height: 16),
             Text(
               _errorMessage,
-              style: TextStyle(
+              style: TextStyle(fontSize: 16, color: Colors.grey[600]),
-                fontSize: 16,
-                color: Colors.grey[600],
-              ),
               textAlign: TextAlign.center,
             ),
             SizedBox(height: 16),
@@ -133,11 +124,7 @@ class PostsListState extends State<PostsList> {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Icon(
+            Icon(Icons.post_add, size: 64, color: Colors.grey[400]),
-              Icons.post_add,
-              size: 64,
-              color: Colors.grey[400],
-            ),
             SizedBox(height: 16),
             Text(
               widget.emptyStateTitle,
@@ -150,10 +137,7 @@ class PostsListState extends State<PostsList> {
             SizedBox(height: 8),
             Text(
               widget.emptyStateSubtitle,
-              style: TextStyle(
+              style: TextStyle(fontSize: 14, color: Colors.grey[500]),
-                fontSize: 14,
-                color: Colors.grey[500],
-              ),
             ),
           ],
         ),
@@ -164,9 +148,7 @@ class PostsListState extends State<PostsList> {
       padding: EdgeInsets.symmetric(vertical: 8),
       itemCount: _posts.length,
       itemBuilder: (context, index) {
-        return PostCard(
+        return PostCard(post: _posts[index]);
-          post: _posts[index],
-        );
       },
     );
   }
@@ -179,8 +161,7 @@ class PostsListState extends State<PostsList> {
 class PostCard extends StatefulWidget {
   final Post post;
 
-  const PostCard({Key? key, required this.post})
+  const PostCard({Key? key, required this.post}) : super(key: key);
-    : super(key: key);
 
   @override
   _PostCardState createState() => _PostCardState();
@@ -224,7 +205,8 @@ class _PostCardState extends State<PostCard> {
   }
 
   void _sharePost(Post post) {
-    final shareText = '${post.creator.displayName} posted on Wesal.online:\n\n${post.body}';
+    final shareText =
+        '${post.creator.displayName} posted on Wesal.online:\n\n${post.body}';
     Share.share(shareText);
   }
 
@@ -236,7 +218,9 @@ class _PostCardState extends State<PostCard> {
       // Optimistic update - immediately change UI
       _currentPost = _currentPost.copyWith(
         liked: !_currentPost.liked,
-        likes: _currentPost.liked ? _currentPost.likes - 1 : _currentPost.likes + 1,
+        likes: _currentPost.liked
+            ? _currentPost.likes - 1
+            : _currentPost.likes + 1,
       );
     });
 
@@ -294,9 +278,20 @@ class _PostCardState extends State<PostCard> {
     final creator = _currentPost.creator;
     final avatarColor = _getAvatarColor(creator.displayName);
     final avatarLetter = _getAvatarLetter(creator.displayName);
-    final relativeTime = InvitationUtils.getRelativeTime(_currentPost.creationDate);
+    final relativeTime = InvitationUtils.getRelativeTime(
+      _currentPost.creationDate,
+    );
 
-    return Container(
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) => PostViewPage(postId: _currentPost.id),
+          ),
+        );
+      },
+      child: Container(
         margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
         decoration: BoxDecoration(
           color: Colors.white,
@@ -344,7 +339,10 @@ class _PostCardState extends State<PostCard> {
                         SizedBox(height: 2),
                         Text(
                           relativeTime,
-                        style: TextStyle(color: Colors.grey[600], fontSize: 12),
+                          style: TextStyle(
+                            color: Colors.grey[600],
+                            fontSize: 12,
+                          ),
                         ),
                       ],
                     ),
@@ -374,7 +372,9 @@ class _PostCardState extends State<PostCard> {
                   IconButton(
                     onPressed: _toggleLike,
                     icon: Icon(
-                    _currentPost.liked ? Icons.favorite : Icons.favorite_border,
+                      _currentPost.liked
+                          ? Icons.favorite
+                          : Icons.favorite_border,
                       color: _currentPost.liked ? Colors.red : Colors.grey[600],
                       size: 24,
                     ),
@@ -389,8 +389,12 @@ class _PostCardState extends State<PostCard> {
                   SizedBox(width: 16),
                   IconButton(
                     onPressed: () {
-                    ScaffoldMessenger.of(context).showSnackBar(
+                      Navigator.push(
-                      SnackBar(content: Text('Comments feature coming soon!')),
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) =>
+                              PostViewPage(postId: _currentPost.id),
+                        ),
                       );
                     },
                     icon: Icon(
@@ -420,6 +424,7 @@ class _PostCardState extends State<PostCard> {
             ],
           ),
         ),
+      ),
     );
   }
 }
@@ -485,9 +490,7 @@ class _ProfilePostsListState extends State<ProfilePostsList> {
         padding: EdgeInsets.all(32),
         child: Center(
           child: CircularProgressIndicator(
-            valueColor: AlwaysStoppedAnimation<Color>(
+            valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF6A4C93)),
-              Color(0xFF6A4C93),
-            ),
           ),
         ),
       );
@@ -499,18 +502,11 @@ class _ProfilePostsListState extends State<ProfilePostsList> {
         child: Center(
           child: Column(
             children: [
-              Icon(
+              Icon(Icons.error_outline, size: 64, color: Colors.grey[400]),
-                Icons.error_outline,
-                size: 64,
-                color: Colors.grey[400],
-              ),
               SizedBox(height: 16),
               Text(
                 _errorMessage,
-                style: TextStyle(
+                style: TextStyle(fontSize: 16, color: Colors.grey[600]),
-                  fontSize: 16,
-                  color: Colors.grey[600],
-                ),
                 textAlign: TextAlign.center,
               ),
               SizedBox(height: 16),
@@ -534,11 +530,7 @@ class _ProfilePostsListState extends State<ProfilePostsList> {
         child: Center(
           child: Column(
             children: [
-              Icon(
+              Icon(Icons.post_add, size: 64, color: Colors.grey[400]),
-                Icons.post_add,
-                size: 64,
-                color: Colors.grey[400],
-              ),
               SizedBox(height: 16),
               Text(
                 'No posts yet',
@@ -551,10 +543,7 @@ class _ProfilePostsListState extends State<ProfilePostsList> {
               SizedBox(height: 8),
               Text(
                 'Start sharing your thoughts!',
-                style: TextStyle(
+                style: TextStyle(fontSize: 14, color: Colors.grey[500]),
-                  fontSize: 14,
-                  color: Colors.grey[500],
-                ),
               ),
             ],
           ),
@@ -564,11 +553,11 @@ class _ProfilePostsListState extends State<ProfilePostsList> {
 
     return Column(
       children: [
-        ..._posts.map((post) => 
+        ..._posts.map(
-          Container(
+          (post) => Container(
             margin: EdgeInsets.only(bottom: 16, left: 16, right: 16),
             child: PostCard(post: post),
-          )
+          ),
         ),
         SizedBox(height: 24),
       ],