commit 45986b10137947ca0690530fc7bbd7f77a9c1091 · bretton.dev/coves-mobile

+21

lib/providers/comments_provider.dart

···

       81
       81
        
         String? _cursor;

     

       82
       82
        
         bool _hasMore = true;

     

       83
       83
        
       

     

       84
       84
       +
         // Collapsed thread state - stores URIs of collapsed comments

     

       85
       85
       +
         final Set<String> _collapsedComments = {};

     

       86
       86
       +
       

     

       84
       87
        
         // Current post being viewed

     

       85
       88
        
         String? _postUri;

     

       86
       89
        
         String? _postCid;

     
···

       105
       108
        
         String get sort => _sort;

     

       106
       109
        
         String? get timeframe => _timeframe;

     

       107
       110
        
         ValueNotifier<DateTime?> get currentTimeNotifier => _currentTimeNotifier;

     

       111
       111
       +
         Set<String> get collapsedComments => _collapsedComments;

     

       112
       112
       +
       

     

       113
       113
       +
         /// Toggle collapsed state for a comment thread

     

       114
       114
       +
         ///

     

       115
       115
       +
         /// When collapsed, the comment's replies are hidden from view.

     

       116
       116
       +
         /// Long-pressing the same comment again will expand the thread.

     

       117
       117
       +
         void toggleCollapsed(String uri) {

     

       118
       118
       +
           if (_collapsedComments.contains(uri)) {

     

       119
       119
       +
             _collapsedComments.remove(uri);

     

       120
       120
       +
           } else {

     

       121
       121
       +
             _collapsedComments.add(uri);

     

       122
       122
       +
           }

     

       123
       123
       +
           notifyListeners();

     

       124
       124
       +
         }

     

       125
       125
       +
       

     

       126
       126
       +
         /// Check if a specific comment is collapsed

     

       127
       127
       +
         bool isCollapsed(String uri) => _collapsedComments.contains(uri);

     

       108
       128
        
       

     

       109
       129
        
         /// Start periodic time updates for "time ago" strings

     

       110
       130
        
         ///

     
···

       494
       514
        
           _postUri = null;

     

       495
       515
        
           _postCid = null;

     

       496
       516
        
           _pendingRefresh = false;

     

       517
       517
       +
           _collapsedComments.clear();

     

       497
       518
        
           notifyListeners();

     

       498
       519
        
         }

     

       499
       520

lib/screens/home/post_detail_screen.dart

···

       574
       574
        
                               currentTimeNotifier:

     

       575
       575
        
                                   commentsProvider.currentTimeNotifier,

     

       576
       576
        
                               onCommentTap: _openReplyToComment,

     

       577
       577
       +
                               collapsedComments: commentsProvider.collapsedComments,

     

       578
       578
       +
                               onCollapseToggle: commentsProvider.toggleCollapsed,

     

       577
       579
        
                             );

     

       578
       580
        
                           },

     

       579
       581
        
                           childCount:

     
···

       636
       638
        
           required this.comment,

     

       637
       639
        
           required this.currentTimeNotifier,

     

       638
       640
        
           this.onCommentTap,

     

       641
       641
       +
           this.collapsedComments = const {},

     

       642
       642
       +
           this.onCollapseToggle,

     

       639
       643
        
         });

     

       640
       644
        
       

     

       641
       645
        
         final ThreadViewComment comment;

     

       642
       646
        
         final ValueNotifier<DateTime?> currentTimeNotifier;

     

       643
       647
        
         final void Function(ThreadViewComment)? onCommentTap;

     

       648
       648
       +
         final Set<String> collapsedComments;

     

       649
       649
       +
         final void Function(String uri)? onCollapseToggle;

     

       644
       650
        
       

     

       645
       651
        
         @override

     

       646
       652
        
         Widget build(BuildContext context) {

     
···

       652
       658
        
                 currentTime: currentTime,

     

       653
       659
        
                 maxDepth: 6,

     

       654
       660
        
                 onCommentTap: onCommentTap,

     

       661
       661
       +
                 collapsedComments: collapsedComments,

     

       662
       662
       +
                 onCollapseToggle: onCollapseToggle,

     

       655
       663
        
               );

     

       656
       664
        
             },

     

       657
       665
        
           );

+117 -67

lib/widgets/comment_card.dart

···

       21
       21
        
       /// - Heart vote button with optimistic updates via VoteProvider

     

       22
       22
        
       /// - Visual threading indicator based on nesting depth

     

       23
       23
        
       /// - Tap-to-reply functionality via [onTap] callback

     

       24
       24
       +
       /// - Long-press to collapse thread via [onLongPress] callback

     

       24
       25
        
       ///

     

       25
       26
        
       /// The [currentTime] parameter allows passing the current time for

     

       26
       27
        
       /// time-ago calculations, enabling periodic updates and testing.

     

       28
       28
       +
       ///

     

       29
       29
       +
       /// When [isCollapsed] is true, displays a badge showing [collapsedCount]

     

       30
       30
       +
       /// hidden replies on the threading indicator bar.

     

       27
       31
        
       class CommentCard extends StatelessWidget {

     

       28
       32
        
         const CommentCard({

     

       29
       33
        
           required this.comment,

     

       30
       34
        
           this.depth = 0,

     

       31
       35
        
           this.currentTime,

     

       32
       36
        
           this.onTap,

     

       37
       37
       +
           this.onLongPress,

     

       38
       38
       +
           this.isCollapsed = false,

     

       39
       39
       +
           this.collapsedCount = 0,

     

       33
       40
        
           super.key,

     

       34
       41
        
         });

     

       35
       42
        
       

     
···

       40
       47
        
         /// Callback when the comment is tapped (for reply functionality)

     

       41
       48
        
         final VoidCallback? onTap;

     

       42
       49
        
       

     

       50
       50
       +
         /// Callback when the comment is long-pressed (for collapse functionality)

     

       51
       51
       +
         final VoidCallback? onLongPress;

     

       52
       52
       +
       

     

       53
       53
       +
         /// Whether this comment's thread is currently collapsed

     

       54
       54
       +
         final bool isCollapsed;

     

       55
       55
       +
       

     

       56
       56
       +
         /// Number of replies hidden when collapsed

     

       57
       57
       +
         final int collapsedCount;

     

       58
       58
       +
       

     

       43
       59
        
         @override

     

       44
       60
        
         Widget build(BuildContext context) {

     

       45
       61
        
           // All comments get at least 1 threading line (depth + 1)

     
···

       50
       66
        
           // the stroke width)

     

       51
       67
        
           final borderLeftOffset = (threadingLineCount * 6.0) + 2.0;

     

       52
       68
        
       

     

       53
       53
       -
           return InkWell(

     

       54
       54
       -
             onTap: onTap,

     

       55
       55
       -
             child: Container(

     

       56
       56
       -
               decoration: const BoxDecoration(color: AppColors.background),

     

       57
       57
       -
               child: Stack(

     

       58
       58
       -
                 children: [

     

       59
       59
       -
                   // Threading indicators - vertical lines showing nesting ancestry

     

       60
       60
       -
                   Positioned.fill(

     

       61
       61
       -
                     child: CustomPaint(

     

       62
       62
       -
                       painter: _CommentDepthPainter(depth: threadingLineCount),

     

       69
       69
       +
           return GestureDetector(

     

       70
       70
       +
             onLongPress: onLongPress != null

     

       71
       71
       +
                 ? () {

     

       72
       72
       +
                     HapticFeedback.mediumImpact();

     

       73
       73
       +
                     onLongPress!();

     

       74
       74
       +
                   }

     

       75
       75
       +
                 : null,

     

       76
       76
       +
             child: InkWell(

     

       77
       77
       +
               onTap: onTap,

     

       78
       78
       +
               child: Container(

     

       79
       79
       +
                 decoration: const BoxDecoration(color: AppColors.background),

     

       80
       80
       +
                 child: Stack(

     

       81
       81
       +
                   children: [

     

       82
       82
       +
                     // Threading indicators - vertical lines showing nesting ancestry

     

       83
       83
       +
                     Positioned.fill(

     

       84
       84
       +
                       child: CustomPaint(

     

       85
       85
       +
                         painter: _CommentDepthPainter(depth: threadingLineCount),

     

       86
       86
       +
                       ),

     

       63
       87
        
                     ),

     

       64
       64
       -
                   ),

     

       65
       65
       -
                   // Bottom border (starts after threading lines, not overlapping them)

     

       66
       66
       -
                   Positioned(

     

       67
       67
       -
                     left: borderLeftOffset,

     

       68
       68
       -
                     right: 0,

     

       69
       69
       -
                     bottom: 0,

     

       70
       70
       -
                     child: Container(height: 1, color: AppColors.border),

     

       71
       71
       -
                   ),

     

       72
       72
       -
                   // Comment content with depth-based left padding

     

       73
       73
       -
                   Padding(

     

       74
       74
       -
                     padding: EdgeInsets.fromLTRB(leftPadding, 12, 16, 8),

     

       75
       75
       -
                     child: Column(

     

       76
       76
       -
                       crossAxisAlignment: CrossAxisAlignment.start,

     

       77
       77
       -
                       children: [

     

       78
       78
       -
                         // Author info row

     

       79
       79
       -
                         Row(

     

       80
       80
       -
                           children: [

     

       81
       81
       -
                             // Author avatar

     

       82
       82
       -
                             _buildAuthorAvatar(comment.author),

     

       83
       83
       -
                             const SizedBox(width: 8),

     

       84
       84
       -
                             Expanded(

     

       85
       85
       -
                               child: Column(

     

       86
       86
       -
                                 crossAxisAlignment: CrossAxisAlignment.start,

     

       87
       87
       -
                                 children: [

     

       88
       88
       -
                                   // Author handle

     

       89
       89
       -
                                   Text(

     

       90
       90
       -
                                     '@${comment.author.handle}',

     

       91
       91
       -
                                     style: TextStyle(

     

       92
       92
       -
                                       color: AppColors.textPrimary.withValues(

     

       93
       93
       -
                                         alpha: 0.5,

     

       88
       88
       +
                     // Collapsed count badge - positioned after threading lines

     

       89
       89
       +
                     // to avoid overlap at any depth level

     

       90
       90
       +
                     if (isCollapsed && collapsedCount > 0)

     

       91
       91
       +
                       Positioned(

     

       92
       92
       +
                         left: borderLeftOffset + 4,

     

       93
       93
       +
                         bottom: 8,

     

       94
       94
       +
                         child: Container(

     

       95
       95
       +
                           padding: const EdgeInsets.symmetric(

     

       96
       96
       +
                             horizontal: 6,

     

       97
       97
       +
                             vertical: 2,

     

       98
       98
       +
                           ),

     

       99
       99
       +
                           decoration: BoxDecoration(

     

       100
       100
       +
                             color: AppColors.primary,

     

       101
       101
       +
                             borderRadius: BorderRadius.circular(8),

     

       102
       102
       +
                           ),

     

       103
       103
       +
                           child: Text(

     

       104
       104
       +
                             '+$collapsedCount hidden',

     

       105
       105
       +
                             style: const TextStyle(

     

       106
       106
       +
                               color: AppColors.textPrimary,

     

       107
       107
       +
                               fontSize: 10,

     

       108
       108
       +
                               fontWeight: FontWeight.w500,

     

       109
       109
       +
                             ),

     

       110
       110
       +
                           ),

     

       111
       111
       +
                         ),

     

       112
       112
       +
                       ),

     

       113
       113
       +
                     // Bottom border

     

       114
       114
       +
                     // (starts after threading lines, not overlapping them)

     

       115
       115
       +
                     Positioned(

     

       116
       116
       +
                       left: borderLeftOffset,

     

       117
       117
       +
                       right: 0,

     

       118
       118
       +
                       bottom: 0,

     

       119
       119
       +
                       child: Container(height: 1, color: AppColors.border),

     

       120
       120
       +
                     ),

     

       121
       121
       +
                     // Comment content with depth-based left padding

     

       122
       122
       +
                     Padding(

     

       123
       123
       +
                       padding: EdgeInsets.fromLTRB(leftPadding, 12, 16, 8),

     

       124
       124
       +
                       child: Column(

     

       125
       125
       +
                         crossAxisAlignment: CrossAxisAlignment.start,

     

       126
       126
       +
                         children: [

     

       127
       127
       +
                           // Author info row

     

       128
       128
       +
                           Row(

     

       129
       129
       +
                             children: [

     

       130
       130
       +
                               // Author avatar

     

       131
       131
       +
                               _buildAuthorAvatar(comment.author),

     

       132
       132
       +
                               const SizedBox(width: 8),

     

       133
       133
       +
                               Expanded(

     

       134
       134
       +
                                 child: Column(

     

       135
       135
       +
                                   crossAxisAlignment: CrossAxisAlignment.start,

     

       136
       136
       +
                                   children: [

     

       137
       137
       +
                                     // Author handle

     

       138
       138
       +
                                     Text(

     

       139
       139
       +
                                       '@${comment.author.handle}',

     

       140
       140
       +
                                       style: TextStyle(

     

       141
       141
       +
                                         color: AppColors.textPrimary.withValues(

     

       142
       142
       +
                                           alpha: 0.5,

     

       143
       143
       +
                                         ),

     

       144
       144
       +
                                         fontSize: 13,

     

       145
       145
       +
                                         fontWeight: FontWeight.w500,

     

       94
       146
        
                                       ),

     

       95
       95
       -
                                       fontSize: 13,

     

       96
       96
       -
                                       fontWeight: FontWeight.w500,

     

       97
       147
        
                                     ),

     

       98
       98
       -
                                   ),

     

       99
       99
       -
                                 ],

     

       100
       100
       -
                               ),

     

       101
       101
       -
                             ),

     

       102
       102
       -
                             // Time ago

     

       103
       103
       -
                             Text(

     

       104
       104
       -
                               DateTimeUtils.formatTimeAgo(

     

       105
       105
       -
                                 comment.createdAt,

     

       106
       106
       -
                                 currentTime: currentTime,

     

       148
       148
       +
                                   ],

     

       149
       149
       +
                                 ),

     

       107
       150
        
                               ),

     

       108
       108
       -
                               style: TextStyle(

     

       109
       109
       -
                                 color: AppColors.textPrimary.withValues(alpha: 0.5),

     

       110
       110
       -
                                 fontSize: 12,

     

       151
       151
       +
                               // Time ago

     

       152
       152
       +
                               Text(

     

       153
       153
       +
                                 DateTimeUtils.formatTimeAgo(

     

       154
       154
       +
                                   comment.createdAt,

     

       155
       155
       +
                                   currentTime: currentTime,

     

       156
       156
       +
                                 ),

     

       157
       157
       +
                                 style: TextStyle(

     

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

     

       159
       159
       +
                                   fontSize: 12,

     

       160
       160
       +
                                 ),

     

       111
       161
        
                               ),

     

       112
       112
       -
                             ),

     

       162
       162
       +
                             ],

     

       163
       163
       +
                           ),

     

       164
       164
       +
                           const SizedBox(height: 8),

     

       165
       165
       +
       

     

       166
       166
       +
                           // Comment content

     

       167
       167
       +
                           if (comment.content.isNotEmpty) ...[

     

       168
       168
       +
                             _buildCommentContent(comment),

     

       169
       169
       +
                             const SizedBox(height: 8),

     

       113
       170
        
                           ],

     

       114
       114
       -
                         ),

     

       115
       115
       -
                         const SizedBox(height: 8),

     

       116
       171
        
       

     

       117
       117
       -
                         // Comment content

     

       118
       118
       -
                         if (comment.content.isNotEmpty) ...[

     

       119
       119
       -
                           _buildCommentContent(comment),

     

       120
       120
       -
                           const SizedBox(height: 8),

     

       172
       172
       +
                           // Action buttons (just vote for now)

     

       173
       173
       +
                           _buildActionButtons(context),

     

       121
       174
        
                         ],

     

       122
       122
       -
       

     

       123
       123
       -
                         // Action buttons (just vote for now)

     

       124
       124
       -
                         _buildActionButtons(context),

     

       125
       125
       -
                       ],

     

       175
       175
       +
                       ),

     

       126
       176
        
                     ),

     

       127
       127
       -
                   ),

     

       128
       128
       -
                 ],

     

       177
       177
       +
                   ],

     

       178
       178
       +
                 ),

     

       129
       179
        
               ),

     

       130
       180
        
             ),

     

       131
       181
        
           );

+77 -14

lib/widgets/comment_thread.dart

···

       14
       14
        
       /// - Limits nesting depth to prevent excessive indentation

     

       15
       15
        
       /// - Shows "Load more replies" button when hasMore is true

     

       16
       16
        
       /// - Supports tap-to-reply via [onCommentTap] callback

     

       17
       17
       +
       /// - Supports long-press to collapse threads via [onCollapseToggle] callback

     

       17
       18
        
       ///

     

       18
       19
        
       /// The [maxDepth] parameter controls how deeply nested comments can be

     

       19
       20
        
       /// before they're rendered at the same level to prevent UI overflow.

     

       21
       21
       +
       ///

     

       22
       22
       +
       /// When a comment is collapsed (via [collapsedComments]), its replies are

     

       23
       23
       +
       /// hidden with a smooth animation and a badge shows the hidden count.

     

       20
       24
        
       class CommentThread extends StatelessWidget {

     

       21
       25
        
         const CommentThread({

     

       22
       26
        
           required this.thread,

     
···

       25
       29
        
           this.currentTime,

     

       26
       30
        
           this.onLoadMoreReplies,

     

       27
       31
        
           this.onCommentTap,

     

       32
       32
       +
           this.collapsedComments = const {},

     

       33
       33
       +
           this.onCollapseToggle,

     

       28
       34
        
           super.key,

     

       29
       35
        
         });

     

       30
       36
        
       

     
···

       37
       43
        
         /// Callback when a comment is tapped (for reply functionality)

     

       38
       44
        
         final void Function(ThreadViewComment)? onCommentTap;

     

       39
       45
        
       

     

       46
       46
       +
         /// Set of collapsed comment URIs

     

       47
       47
       +
         final Set<String> collapsedComments;

     

       48
       48
       +
       

     

       49
       49
       +
         /// Callback when a comment collapse state is toggled

     

       50
       50
       +
         final void Function(String uri)? onCollapseToggle;

     

       51
       51
       +
       

     

       52
       52
       +
         /// Count all descendants recursively

     

       53
       53
       +
         static int countDescendants(ThreadViewComment thread) {

     

       54
       54
       +
           if (thread.replies == null || thread.replies!.isEmpty) {

     

       55
       55
       +
             return 0;

     

       56
       56
       +
           }

     

       57
       57
       +
           var count = thread.replies!.length;

     

       58
       58
       +
           for (final reply in thread.replies!) {

     

       59
       59
       +
             count += countDescendants(reply);

     

       60
       60
       +
           }

     

       61
       61
       +
           return count;

     

       62
       62
       +
         }

     

       63
       63
       +
       

     

       40
       64
        
         @override

     

       41
       65
        
         Widget build(BuildContext context) {

     

       42
       66
        
           // Calculate effective depth (flatten after maxDepth)

     

       43
       67
        
           final effectiveDepth = depth > maxDepth ? maxDepth : depth;

     

       44
       68
        
       

     

       69
       69
       +
           // Check if this comment is collapsed

     

       70
       70
       +
           final isCollapsed = collapsedComments.contains(thread.comment.uri);

     

       71
       71
       +
           final collapsedCount = isCollapsed ? countDescendants(thread) : 0;

     

       72
       72
       +
       

     

       73
       73
       +
           // Check if there are replies to render

     

       74
       74
       +
           final hasReplies = thread.replies != null && thread.replies!.isNotEmpty;

     

       75
       75
       +
       

     

       76
       76
       +
           // Only build replies widget when NOT collapsed (optimization)

     

       77
       77
       +
           // When collapsed, AnimatedSwitcher shows SizedBox.shrink() so children

     

       78
       78
       +
           // are never mounted - no need to build them at all

     

       79
       79
       +
           final repliesWidget = hasReplies && !isCollapsed

     

       80
       80
       +
               ? Column(

     

       81
       81
       +
                   key: const ValueKey('replies'),

     

       82
       82
       +
                   crossAxisAlignment: CrossAxisAlignment.start,

     

       83
       83
       +
                   children: thread.replies!.map((reply) {

     

       84
       84
       +
                     return CommentThread(

     

       85
       85
       +
                       thread: reply,

     

       86
       86
       +
                       depth: depth + 1,

     

       87
       87
       +
                       maxDepth: maxDepth,

     

       88
       88
       +
                       currentTime: currentTime,

     

       89
       89
       +
                       onLoadMoreReplies: onLoadMoreReplies,

     

       90
       90
       +
                       onCommentTap: onCommentTap,

     

       91
       91
       +
                       collapsedComments: collapsedComments,

     

       92
       92
       +
                       onCollapseToggle: onCollapseToggle,

     

       93
       93
       +
                     );

     

       94
       94
       +
                   }).toList(),

     

       95
       95
       +
                 )

     

       96
       96
       +
               : null;

     

       97
       97
       +
       

     

       45
       98
        
           return Column(

     

       46
       99
        
             crossAxisAlignment: CrossAxisAlignment.start,

     

       47
       100
        
             children: [

     

       48
       48
       -
               // Render the comment with tap handler

     

       101
       101
       +
               // Render the comment with tap and long-press handlers

     

       49
       102
        
               CommentCard(

     

       50
       103
        
                 comment: thread.comment,

     

       51
       104
        
                 depth: effectiveDepth,

     

       52
       105
        
                 currentTime: currentTime,

     

       53
       106
        
                 onTap: onCommentTap != null ? () => onCommentTap!(thread) : null,

     

       107
       107
       +
                 onLongPress: onCollapseToggle != null

     

       108
       108
       +
                     ? () => onCollapseToggle!(thread.comment.uri)

     

       109
       109
       +
                     : null,

     

       110
       110
       +
                 isCollapsed: isCollapsed,

     

       111
       111
       +
                 collapsedCount: collapsedCount,

     

       54
       112
        
               ),

     

       55
       113
        
       

     

       56
       56
       -
               // Render replies recursively

     

       57
       57
       -
               if (thread.replies != null && thread.replies!.isNotEmpty)

     

       58
       58
       -
                 ...thread.replies!.map(

     

       59
       59
       -
                   (reply) => CommentThread(

     

       60
       60
       -
                     thread: reply,

     

       61
       61
       -
                     depth: depth + 1,

     

       62
       62
       -
                     maxDepth: maxDepth,

     

       63
       63
       -
                     currentTime: currentTime,

     

       64
       64
       -
                     onLoadMoreReplies: onLoadMoreReplies,

     

       65
       65
       -
                     onCommentTap: onCommentTap,

     

       66
       66
       -
                   ),

     

       114
       114
       +
               // Render replies with animation

     

       115
       115
       +
               if (hasReplies)

     

       116
       116
       +
                 AnimatedSwitcher(

     

       117
       117
       +
                   duration: const Duration(milliseconds: 200),

     

       118
       118
       +
                   switchInCurve: Curves.easeInOutCubicEmphasized,

     

       119
       119
       +
                   switchOutCurve: Curves.easeInOutCubicEmphasized,

     

       120
       120
       +
                   transitionBuilder: (Widget child, Animation<double> animation) {

     

       121
       121
       +
                     return SizeTransition(

     

       122
       122
       +
                       sizeFactor: animation,

     

       123
       123
       +
                       axisAlignment: -1,

     

       124
       124
       +
                       child: child,

     

       125
       125
       +
                     );

     

       126
       126
       +
                   },

     

       127
       127
       +
                   child: isCollapsed

     

       128
       128
       +
                       ? const SizedBox.shrink(key: ValueKey('collapsed'))

     

       129
       129
       +
                       : repliesWidget,

     

       67
       130
        
                 ),

     

       68
       131
        
       

     

       69
       69
       -
               // Show "Load more replies" button if there are more

     

       70
       70
       -
               if (thread.hasMore) _buildLoadMoreButton(context),

     

       132
       132
       +
               // Show "Load more replies" button if there are more (and not collapsed)

     

       133
       133
       +
               if (thread.hasMore && !isCollapsed) _buildLoadMoreButton(context),

     

       71
       134
        
             ],

     

       72
       135
        
           );

     

       73
       136
        
         }