commit 67b4699bf59d437347c9e02e41b623e21ba68ae9 · bretton.dev/coves-mobile

+312

lib/widgets/post_card.dart

···

       1
       +
       import 'package:cached_network_image/cached_network_image.dart';

     

       2
       +
       import 'package:flutter/foundation.dart';

     

       3
       +
       import 'package:flutter/material.dart';

     

       4
       +
       

     

       5
       +
       import '../constants/app_colors.dart';

     

       6
       +
       import '../models/post.dart';

     

       7
       +
       import '../utils/date_time_utils.dart';

     

       8
       +
       

     

       9
       +
       /// Post card widget for displaying feed posts

     

       10
       +
       ///

     

       11
       +
       /// Displays a post with:

     

       12
       +
       /// - Community and author information

     

       13
       +
       /// - Post title and text content

     

       14
       +
       /// - External embed (link preview with image)

     

       15
       +
       /// - Action buttons (share, comment, like)

     

       16
       +
       ///

     

       17
       +
       /// The [currentTime] parameter allows passing the current time for

     

       18
       +
       /// time-ago calculations, enabling:

     

       19
       +
       /// - Periodic updates of time strings

     

       20
       +
       /// - Deterministic testing without DateTime.now()

     

       21
       +
       class PostCard extends StatelessWidget {

     

       22
       +
         const PostCard({required this.post, this.currentTime, super.key});

     

       23
       +
       

     

       24
       +
         final FeedViewPost post;

     

       25
       +
         final DateTime? currentTime;

     

       26
       +
       

     

       27
       +
         @override

     

       28
       +
         Widget build(BuildContext context) {

     

       29
       +
           return Container(

     

       30
       +
             margin: const EdgeInsets.only(bottom: 8),

     

       31
       +
             decoration: const BoxDecoration(

     

       32
       +
               color: AppColors.background,

     

       33
       +
               border: Border(bottom: BorderSide(color: AppColors.border)),

     

       34
       +
             ),

     

       35
       +
             child: Padding(

     

       36
       +
               padding: const EdgeInsets.fromLTRB(16, 4, 16, 1),

     

       37
       +
               child: Column(

     

       38
       +
                 crossAxisAlignment: CrossAxisAlignment.start,

     

       39
       +
                 children: [

     

       40
       +
                   // Community and author info

     

       41
       +
                   Row(

     

       42
       +
                     children: [

     

       43
       +
                       // Community avatar placeholder

     

       44
       +
                       Container(

     

       45
       +
                         width: 24,

     

       46
       +
                         height: 24,

     

       47
       +
                         decoration: BoxDecoration(

     

       48
       +
                           color: AppColors.primary,

     

       49
       +
                           borderRadius: BorderRadius.circular(4),

     

       50
       +
                         ),

     

       51
       +
                         child: Center(

     

       52
       +
                           child: Text(

     

       53
       +
                             post.post.community.name[0].toUpperCase(),

     

       54
       +
                             style: const TextStyle(

     

       55
       +
                               color: AppColors.textPrimary,

     

       56
       +
                               fontSize: 12,

     

       57
       +
                               fontWeight: FontWeight.bold,

     

       58
       +
                             ),

     

       59
       +
                           ),

     

       60
       +
                         ),

     

       61
       +
                       ),

     

       62
       +
                       const SizedBox(width: 8),

     

       63
       +
                       Expanded(

     

       64
       +
                         child: Column(

     

       65
       +
                           crossAxisAlignment: CrossAxisAlignment.start,

     

       66
       +
                           children: [

     

       67
       +
                             Text(

     

       68
       +
                               'c/${post.post.community.name}',

     

       69
       +
                               style: const TextStyle(

     

       70
       +
                                 color: AppColors.textPrimary,

     

       71
       +
                                 fontSize: 14,

     

       72
       +
                                 fontWeight: FontWeight.bold,

     

       73
       +
                               ),

     

       74
       +
                             ),

     

       75
       +
                             Text(

     

       76
       +
                               '@${post.post.author.handle}',

     

       77
       +
                               style: const TextStyle(

     

       78
       +
                                 color: AppColors.textSecondary,

     

       79
       +
                                 fontSize: 12,

     

       80
       +
                               ),

     

       81
       +
                             ),

     

       82
       +
                           ],

     

       83
       +
                         ),

     

       84
       +
                       ),

     

       85
       +
                       // Time ago

     

       86
       +
                       Text(

     

       87
       +
                         DateTimeUtils.formatTimeAgo(

     

       88
       +
                           post.post.createdAt,

     

       89
       +
                           currentTime: currentTime,

     

       90
       +
                         ),

     

       91
       +
                         style: TextStyle(

     

       92
       +
                           color: AppColors.textPrimary.withValues(alpha: 0.5),

     

       93
       +
                           fontSize: 14,

     

       94
       +
                         ),

     

       95
       +
                       ),

     

       96
       +
                     ],

     

       97
       +
                   ),

     

       98
       +
                   const SizedBox(height: 8),

     

       99
       +
       

     

       100
       +
                   // Post title

     

       101
       +
                   if (post.post.title != null) ...[

     

       102
       +
                     Text(

     

       103
       +
                       post.post.title!,

     

       104
       +
                       style: const TextStyle(

     

       105
       +
                         color: AppColors.textPrimary,

     

       106
       +
                         fontSize: 16,

     

       107
       +
                         fontWeight: FontWeight.w400,

     

       108
       +
                       ),

     

       109
       +
                     ),

     

       110
       +
                   ],

     

       111
       +
       

     

       112
       +
                   // Spacing after title (only if we have content below)

     

       113
       +
                   if (post.post.title != null &&

     

       114
       +
                       (post.post.embed?.external != null ||

     

       115
       +
                           post.post.text.isNotEmpty))

     

       116
       +
                     const SizedBox(height: 8),

     

       117
       +
       

     

       118
       +
                   // Embed (link preview)

     

       119
       +
                   if (post.post.embed?.external != null) ...[

     

       120
       +
                     _EmbedCard(embed: post.post.embed!.external!),

     

       121
       +
                     const SizedBox(height: 8),

     

       122
       +
                   ],

     

       123
       +
       

     

       124
       +
                   // Post text body preview

     

       125
       +
                   if (post.post.text.isNotEmpty) ...[

     

       126
       +
                     Container(

     

       127
       +
                       padding: const EdgeInsets.all(10),

     

       128
       +
                       decoration: BoxDecoration(

     

       129
       +
                         color: AppColors.backgroundSecondary,

     

       130
       +
                         borderRadius: BorderRadius.circular(8),

     

       131
       +
                       ),

     

       132
       +
                       child: Text(

     

       133
       +
                         post.post.text,

     

       134
       +
                         style: TextStyle(

     

       135
       +
                           color: AppColors.textPrimary.withValues(alpha: 0.7),

     

       136
       +
                           fontSize: 13,

     

       137
       +
                           height: 1.4,

     

       138
       +
                         ),

     

       139
       +
                         maxLines: 5,

     

       140
       +
                         overflow: TextOverflow.ellipsis,

     

       141
       +
                       ),

     

       142
       +
                     ),

     

       143
       +
                   ],

     

       144
       +
       

     

       145
       +
                   // Reduced spacing before action buttons

     

       146
       +
                   const SizedBox(height: 4),

     

       147
       +
       

     

       148
       +
                   // Action buttons row

     

       149
       +
                   Row(

     

       150
       +
                     mainAxisAlignment: MainAxisAlignment.end,

     

       151
       +
                     children: [

     

       152
       +
                       // Share button

     

       153
       +
                       InkWell(

     

       154
       +
                         onTap: () {

     

       155
       +
                           // TODO: Handle share interaction with backend

     

       156
       +
                           if (kDebugMode) {

     

       157
       +
                             debugPrint('Share button tapped for post');

     

       158
       +
                           }

     

       159
       +
                         },

     

       160
       +
                         child: Padding(

     

       161
       +
                           // Increased padding for better touch targets

     

       162
       +
                           padding: const EdgeInsets.symmetric(

     

       163
       +
                             horizontal: 12,

     

       164
       +
                             vertical: 10,

     

       165
       +
                           ),

     

       166
       +
                           child: Icon(

     

       167
       +
                             Icons.ios_share,

     

       168
       +
                             size: 18,

     

       169
       +
                             color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       170
       +
                           ),

     

       171
       +
                         ),

     

       172
       +
                       ),

     

       173
       +
                       const SizedBox(width: 8),

     

       174
       +
       

     

       175
       +
                       // Comment button

     

       176
       +
                       InkWell(

     

       177
       +
                         onTap: () {

     

       178
       +
                           // TODO: Navigate to post detail/comments screen

     

       179
       +
                           if (kDebugMode) {

     

       180
       +
                             debugPrint('Comment button tapped for post');

     

       181
       +
                           }

     

       182
       +
                         },

     

       183
       +
                         child: Padding(

     

       184
       +
                           // Increased padding for better touch targets

     

       185
       +
                           padding: const EdgeInsets.symmetric(

     

       186
       +
                             horizontal: 12,

     

       187
       +
                             vertical: 10,

     

       188
       +
                           ),

     

       189
       +
                           child: Row(

     

       190
       +
                             mainAxisSize: MainAxisSize.min,

     

       191
       +
                             children: [

     

       192
       +
                               Icon(

     

       193
       +
                                 Icons.chat_bubble_outline,

     

       194
       +
                                 size: 18,

     

       195
       +
                                 color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       196
       +
                               ),

     

       197
       +
                               const SizedBox(width: 5),

     

       198
       +
                               Text(

     

       199
       +
                                 DateTimeUtils.formatCount(

     

       200
       +
                                   post.post.stats.commentCount,

     

       201
       +
                                 ),

     

       202
       +
                                 style: TextStyle(

     

       203
       +
                                   color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       204
       +
                                   fontSize: 13,

     

       205
       +
                                 ),

     

       206
       +
                               ),

     

       207
       +
                             ],

     

       208
       +
                           ),

     

       209
       +
                         ),

     

       210
       +
                       ),

     

       211
       +
                       const SizedBox(width: 8),

     

       212
       +
       

     

       213
       +
                       // Heart button

     

       214
       +
                       InkWell(

     

       215
       +
                         onTap: () {

     

       216
       +
                           // TODO: Handle upvote/like interaction with backend

     

       217
       +
                           if (kDebugMode) {

     

       218
       +
                             debugPrint('Heart button tapped for post');

     

       219
       +
                           }

     

       220
       +
                         },

     

       221
       +
                         child: Padding(

     

       222
       +
                           // Increased padding for better touch targets

     

       223
       +
                           padding: const EdgeInsets.symmetric(

     

       224
       +
                             horizontal: 12,

     

       225
       +
                             vertical: 10,

     

       226
       +
                           ),

     

       227
       +
                           child: Row(

     

       228
       +
                             mainAxisSize: MainAxisSize.min,

     

       229
       +
                             children: [

     

       230
       +
                               Icon(

     

       231
       +
                                 Icons.favorite_border,

     

       232
       +
                                 size: 18,

     

       233
       +
                                 color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       234
       +
                               ),

     

       235
       +
                               const SizedBox(width: 5),

     

       236
       +
                               Text(

     

       237
       +
                                 DateTimeUtils.formatCount(post.post.stats.score),

     

       238
       +
                                 style: TextStyle(

     

       239
       +
                                   color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       240
       +
                                   fontSize: 13,

     

       241
       +
                                 ),

     

       242
       +
                               ),

     

       243
       +
                             ],

     

       244
       +
                           ),

     

       245
       +
                         ),

     

       246
       +
                       ),

     

       247
       +
                     ],

     

       248
       +
                   ),

     

       249
       +
                 ],

     

       250
       +
               ),

     

       251
       +
             ),

     

       252
       +
           );

     

       253
       +
         }

     

       254
       +
       }

     

       255
       +
       

     

       256
       +
       /// Embed card widget for displaying link previews

     

       257
       +
       ///

     

       258
       +
       /// Shows a thumbnail image for external embeds with loading and error states.

     

       259
       +
       class _EmbedCard extends StatelessWidget {

     

       260
       +
         const _EmbedCard({required this.embed});

     

       261
       +
       

     

       262
       +
         final ExternalEmbed embed;

     

       263
       +
       

     

       264
       +
         @override

     

       265
       +
         Widget build(BuildContext context) {

     

       266
       +
           // Only show image if thumbnail exists

     

       267
       +
           if (embed.thumb == null) {

     

       268
       +
             return const SizedBox.shrink();

     

       269
       +
           }

     

       270
       +
       

     

       271
       +
           return Container(

     

       272
       +
             decoration: BoxDecoration(

     

       273
       +
               borderRadius: BorderRadius.circular(8),

     

       274
       +
               border: Border.all(color: AppColors.border),

     

       275
       +
             ),

     

       276
       +
             clipBehavior: Clip.antiAlias,

     

       277
       +
             child: CachedNetworkImage(

     

       278
       +
               imageUrl: embed.thumb!,

     

       279
       +
               width: double.infinity,

     

       280
       +
               height: 180,

     

       281
       +
               fit: BoxFit.cover,

     

       282
       +
               placeholder:

     

       283
       +
                   (context, url) => Container(

     

       284
       +
                     width: double.infinity,

     

       285
       +
                     height: 180,

     

       286
       +
                     color: AppColors.background,

     

       287
       +
                     child: const Center(

     

       288
       +
                       child: CircularProgressIndicator(

     

       289
       +
                         color: AppColors.loadingIndicator,

     

       290
       +
                       ),

     

       291
       +
                     ),

     

       292
       +
                   ),

     

       293
       +
               errorWidget: (context, url, error) {

     

       294
       +
                 if (kDebugMode) {

     

       295
       +
                   debugPrint('❌ Image load error: $error');

     

       296
       +
                   debugPrint('URL: $url');

     

       297
       +
                 }

     

       298
       +
                 return Container(

     

       299
       +
                   width: double.infinity,

     

       300
       +
                   height: 180,

     

       301
       +
                   color: AppColors.background,

     

       302
       +
                   child: const Icon(

     

       303
       +
                     Icons.broken_image,

     

       304
       +
                     color: AppColors.loadingIndicator,

     

       305
       +
                     size: 48,

     

       306
       +
                   ),

     

       307
       +
                 );

     

       308
       +
               },

     

       309
       +
             ),

     

       310
       +
           );

     

       311
       +
         }

     

       312
       +
       }