commit 26a82cb0f3d1e36688380febd1c528466d134744 · bretton.dev/coves-mobile

+543

lib/screens/compose/reply_screen.dart

···

       1
       +
       import 'dart:async';

     

       2
       +
       import 'dart:math' as math;

     

       3
       +
       

     

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

     

       5
       +
       import 'package:flutter/services.dart';

     

       6
       +
       import 'package:provider/provider.dart';

     

       7
       +
       

     

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

     

       9
       +
       import '../../models/comment.dart';

     

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

     

       11
       +
       import '../../providers/comments_provider.dart';

     

       12
       +
       import '../../widgets/comment_thread.dart';

     

       13
       +
       import '../../widgets/post_card.dart';

     

       14
       +
       

     

       15
       +
       /// Reply Screen

     

       16
       +
       ///

     

       17
       +
       /// Full-screen reply interface inspired by Thunder's natural scrolling

     

       18
       +
       /// approach:

     

       19
       +
       /// - Scrollable content area (post/comment preview + text input)

     

       20
       +
       /// - Fixed bottom action bar with keyboard-aware margin

     

       21
       +
       /// - "Cancel" button in app bar (left)

     

       22
       +
       /// - "Reply" button in app bar (right, pill-shaped, enabled when text

     

       23
       +
       ///   present)

     

       24
       +
       ///

     

       25
       +
       /// Key Features:

     

       26
       +
       /// - Natural scrolling without fixed split ratios

     

       27
       +
       /// - Thunder-style keyboard handling with manual margin

     

       28
       +
       /// - Post/comment context visible while composing

     

       29
       +
       /// - Text selection and copy/paste enabled

     

       30
       +
       class ReplyScreen extends StatefulWidget {

     

       31
       +
         const ReplyScreen({

     

       32
       +
           this.post,

     

       33
       +
           this.comment,

     

       34
       +
           required this.onSubmit,

     

       35
       +
           super.key,

     

       36
       +
         }) : assert(

     

       37
       +
                (post != null) != (comment != null),

     

       38
       +
                'Must provide exactly one: post or comment',

     

       39
       +
              );

     

       40
       +
       

     

       41
       +
         /// Post being replied to (mutually exclusive with comment)

     

       42
       +
         final FeedViewPost? post;

     

       43
       +
       

     

       44
       +
         /// Comment being replied to (mutually exclusive with post)

     

       45
       +
         final ThreadViewComment? comment;

     

       46
       +
       

     

       47
       +
         /// Callback when user submits reply

     

       48
       +
         final Future<void> Function(String content) onSubmit;

     

       49
       +
       

     

       50
       +
         @override

     

       51
       +
         State<ReplyScreen> createState() => _ReplyScreenState();

     

       52
       +
       }

     

       53
       +
       

     

       54
       +
       class _ReplyScreenState extends State<ReplyScreen> with WidgetsBindingObserver {

     

       55
       +
         final TextEditingController _textController = TextEditingController();

     

       56
       +
         final FocusNode _focusNode = FocusNode();

     

       57
       +
         final ScrollController _scrollController = ScrollController();

     

       58
       +
         bool _hasText = false;

     

       59
       +
         bool _isKeyboardOpening = false;

     

       60
       +
         bool _isSubmitting = false;

     

       61
       +
         double _lastKeyboardHeight = 0;

     

       62
       +
         Timer? _bannerDismissTimer;

     

       63
       +
       

     

       64
       +
         @override

     

       65
       +
         void initState() {

     

       66
       +
           super.initState();

     

       67
       +
           WidgetsBinding.instance.addObserver(this);

     

       68
       +
           _textController.addListener(_onTextChanged);

     

       69
       +
           _focusNode.addListener(_onFocusChanged);

     

       70
       +
       

     

       71
       +
           // Autofocus with delay (Thunder approach - let screen render first)

     

       72
       +
           Future.delayed(const Duration(milliseconds: 300), () {

     

       73
       +
             if (mounted) {

     

       74
       +
               _isKeyboardOpening = true;

     

       75
       +
               _focusNode.requestFocus();

     

       76
       +
             }

     

       77
       +
           });

     

       78
       +
         }

     

       79
       +
       

     

       80
       +
         void _onFocusChanged() {

     

       81
       +
           // When text field gains focus, scroll to bottom as keyboard opens

     

       82
       +
           if (_focusNode.hasFocus) {

     

       83
       +
             _isKeyboardOpening = true;

     

       84
       +
           }

     

       85
       +
         }

     

       86
       +
       

     

       87
       +
         @override

     

       88
       +
         void didChangeMetrics() {

     

       89
       +
           super.didChangeMetrics();

     

       90
       +
           final keyboardHeight = View.of(context).viewInsets.bottom;

     

       91
       +
       

     

       92
       +
           // Detect keyboard closing and unfocus text field

     

       93
       +
           if (_lastKeyboardHeight > 0 && keyboardHeight == 0) {

     

       94
       +
             // Keyboard just closed - unfocus the text field

     

       95
       +
             if (_focusNode.hasFocus) {

     

       96
       +
               _focusNode.unfocus();

     

       97
       +
             }

     

       98
       +
           }

     

       99
       +
       

     

       100
       +
           _lastKeyboardHeight = keyboardHeight;

     

       101
       +
       

     

       102
       +
           // Scroll to bottom as keyboard opens

     

       103
       +
           if (_isKeyboardOpening && _scrollController.hasClients) {

     

       104
       +
             WidgetsBinding.instance.addPostFrameCallback((_) {

     

       105
       +
               if (mounted && _scrollController.hasClients) {

     

       106
       +
                 _scrollController.jumpTo(_scrollController.position.maxScrollExtent);

     

       107
       +
       

     

       108
       +
                 // Stop auto-scrolling after keyboard animation completes

     

       109
       +
                 if (keyboardHeight > 100) {

     

       110
       +
                   // Keyboard is substantially open, stop tracking after a delay

     

       111
       +
                   Future.delayed(const Duration(milliseconds: 500), () {

     

       112
       +
                     _isKeyboardOpening = false;

     

       113
       +
                   });

     

       114
       +
                 }

     

       115
       +
               }

     

       116
       +
             });

     

       117
       +
           }

     

       118
       +
         }

     

       119
       +
       

     

       120
       +
         @override

     

       121
       +
         void dispose() {

     

       122
       +
           _bannerDismissTimer?.cancel();

     

       123
       +
           WidgetsBinding.instance.removeObserver(this);

     

       124
       +
           _textController.dispose();

     

       125
       +
           _focusNode.dispose();

     

       126
       +
           _scrollController.dispose();

     

       127
       +
           super.dispose();

     

       128
       +
         }

     

       129
       +
       

     

       130
       +
         void _onTextChanged() {

     

       131
       +
           final hasText = _textController.text.trim().isNotEmpty;

     

       132
       +
           if (hasText != _hasText) {

     

       133
       +
             setState(() {

     

       134
       +
               _hasText = hasText;

     

       135
       +
             });

     

       136
       +
           }

     

       137
       +
         }

     

       138
       +
       

     

       139
       +
         Future<void> _handleSubmit() async {

     

       140
       +
           final content = _textController.text.trim();

     

       141
       +
           if (content.isEmpty) {

     

       142
       +
             return;

     

       143
       +
           }

     

       144
       +
       

     

       145
       +
           // Add haptic feedback before submission

     

       146
       +
           await HapticFeedback.lightImpact();

     

       147
       +
       

     

       148
       +
           // Set loading state

     

       149
       +
           setState(() {

     

       150
       +
             _isSubmitting = true;

     

       151
       +
           });

     

       152
       +
       

     

       153
       +
           try {

     

       154
       +
             await widget.onSubmit(content);

     

       155
       +
             // Pop screen after successful submission

     

       156
       +
             if (mounted) {

     

       157
       +
               Navigator.of(context).pop();

     

       158
       +
             }

     

       159
       +
           } on Exception catch (e) {

     

       160
       +
             // Show error if submission fails

     

       161
       +
             if (mounted) {

     

       162
       +
               ScaffoldMessenger.of(context).showSnackBar(

     

       163
       +
                 SnackBar(

     

       164
       +
                   content: Text('Failed to submit: $e'),

     

       165
       +
                   backgroundColor: AppColors.primary,

     

       166
       +
                   behavior: SnackBarBehavior.floating,

     

       167
       +
                 ),

     

       168
       +
               );

     

       169
       +
               // Reset loading state on error

     

       170
       +
               setState(() {

     

       171
       +
                 _isSubmitting = false;

     

       172
       +
               });

     

       173
       +
             }

     

       174
       +
           }

     

       175
       +
         }

     

       176
       +
       

     

       177
       +
         void _showComingSoonBanner(String feature) {

     

       178
       +
           // Cancel any existing timer to prevent multiple banners

     

       179
       +
           _bannerDismissTimer?.cancel();

     

       180
       +
       

     

       181
       +
           final messenger = ScaffoldMessenger.of(context);

     

       182
       +
           messenger.showMaterialBanner(

     

       183
       +
             MaterialBanner(

     

       184
       +
               content: Text('$feature coming soon!'),

     

       185
       +
               backgroundColor: AppColors.primary,

     

       186
       +
               leading: const Icon(Icons.info_outline, color: AppColors.textPrimary),

     

       187
       +
               actions: [

     

       188
       +
                 TextButton(

     

       189
       +
                   onPressed: messenger.hideCurrentMaterialBanner,

     

       190
       +
                   child: const Text(

     

       191
       +
                     'Dismiss',

     

       192
       +
                     style: TextStyle(color: AppColors.textPrimary),

     

       193
       +
                   ),

     

       194
       +
                 ),

     

       195
       +
               ],

     

       196
       +
             ),

     

       197
       +
           );

     

       198
       +
       

     

       199
       +
           // Auto-hide after 2 seconds with cancelable timer

     

       200
       +
           _bannerDismissTimer = Timer(const Duration(seconds: 2), () {

     

       201
       +
             if (mounted) {

     

       202
       +
               messenger.hideCurrentMaterialBanner();

     

       203
       +
             }

     

       204
       +
           });

     

       205
       +
         }

     

       206
       +
       

     

       207
       +
         void _handleMentionTap() {

     

       208
       +
           _showComingSoonBanner('Mention feature');

     

       209
       +
         }

     

       210
       +
       

     

       211
       +
         void _handleImageTap() {

     

       212
       +
           _showComingSoonBanner('Image upload');

     

       213
       +
         }

     

       214
       +
       

     

       215
       +
         void _handleCancel() {

     

       216
       +
           Navigator.of(context).pop();

     

       217
       +
         }

     

       218
       +
       

     

       219
       +
         @override

     

       220
       +
         Widget build(BuildContext context) {

     

       221
       +
           return GestureDetector(

     

       222
       +
             onTap: () {

     

       223
       +
               // Dismiss keyboard when tapping outside

     

       224
       +
               FocusManager.instance.primaryFocus?.unfocus();

     

       225
       +
             },

     

       226
       +
             child: Scaffold(

     

       227
       +
               backgroundColor: AppColors.background,

     

       228
       +
               resizeToAvoidBottomInset: false, // Thunder approach

     

       229
       +
               appBar: AppBar(

     

       230
       +
                 backgroundColor: AppColors.background,

     

       231
       +
                 surfaceTintColor: Colors.transparent,

     

       232
       +
                 foregroundColor: AppColors.textPrimary,

     

       233
       +
                 elevation: 0,

     

       234
       +
                 automaticallyImplyLeading: false,

     

       235
       +
                 leading: TextButton(

     

       236
       +
                   onPressed: _handleCancel,

     

       237
       +
                   child: const Text(

     

       238
       +
                     'Cancel',

     

       239
       +
                     style: TextStyle(color: AppColors.textPrimary, fontSize: 16),

     

       240
       +
                   ),

     

       241
       +
                 ),

     

       242
       +
                 leadingWidth: 80,

     

       243
       +
               ),

     

       244
       +
               body: Column(

     

       245
       +
                 children: [

     

       246
       +
                   // Scrollable content area (Thunder style)

     

       247
       +
                   Expanded(

     

       248
       +
                     child: SingleChildScrollView(

     

       249
       +
                       controller: _scrollController,

     

       250
       +
                       padding: const EdgeInsets.only(bottom: 16),

     

       251
       +
                       child: Column(

     

       252
       +
                         children: [

     

       253
       +
                           // Post or comment preview

     

       254
       +
                           _buildContext(),

     

       255
       +
       

     

       256
       +
                           const SizedBox(height: 8),

     

       257
       +
       

     

       258
       +
                           // Divider between post and text input

     

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

     

       260
       +
       

     

       261
       +
                           // Text input - no background box, types directly into

     

       262
       +
                           // main area

     

       263
       +
                           Padding(

     

       264
       +
                             padding: const EdgeInsets.all(16),

     

       265
       +
                             child: TextField(

     

       266
       +
                               controller: _textController,

     

       267
       +
                               focusNode: _focusNode,

     

       268
       +
                               maxLines: null,

     

       269
       +
                               minLines: 8,

     

       270
       +
                               keyboardType: TextInputType.multiline,

     

       271
       +
                               textCapitalization: TextCapitalization.sentences,

     

       272
       +
                               textInputAction: TextInputAction.newline,

     

       273
       +
                               style: const TextStyle(

     

       274
       +
                                 color: AppColors.textPrimary,

     

       275
       +
                                 fontSize: 16,

     

       276
       +
                                 height: 1.4,

     

       277
       +
                               ),

     

       278
       +
                               decoration: const InputDecoration(

     

       279
       +
                                 hintText: 'Say something...',

     

       280
       +
                                 hintStyle: TextStyle(

     

       281
       +
                                   color: AppColors.textSecondary,

     

       282
       +
                                   fontSize: 16,

     

       283
       +
                                 ),

     

       284
       +
                                 border: InputBorder.none,

     

       285
       +
                                 contentPadding: EdgeInsets.zero,

     

       286
       +
                               ),

     

       287
       +
                             ),

     

       288
       +
                           ),

     

       289
       +
                         ],

     

       290
       +
                       ),

     

       291
       +
                     ),

     

       292
       +
                   ),

     

       293
       +
       

     

       294
       +
                   // Divider - simple straight line like posts and comments

     

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

     

       296
       +
       

     

       297
       +
                   _ReplyToolbar(

     

       298
       +
                     hasText: _hasText,

     

       299
       +
                     isSubmitting: _isSubmitting,

     

       300
       +
                     onImageTap: _handleImageTap,

     

       301
       +
                     onMentionTap: _handleMentionTap,

     

       302
       +
                     onSubmit: _handleSubmit,

     

       303
       +
                   ),

     

       304
       +
                 ],

     

       305
       +
               ),

     

       306
       +
             ),

     

       307
       +
           );

     

       308
       +
         }

     

       309
       +
       

     

       310
       +
         /// Build context area (post or comment chain)

     

       311
       +
         Widget _buildContext() {

     

       312
       +
           // Wrap in RepaintBoundary to isolate from keyboard animation rebuilds

     

       313
       +
           return RepaintBoundary(

     

       314
       +
             child: _ContextPreview(post: widget.post, comment: widget.comment),

     

       315
       +
           );

     

       316
       +
         }

     

       317
       +
       }

     

       318
       +
       

     

       319
       +
       /// Isolated context preview that doesn't rebuild on keyboard changes

     

       320
       +
       class _ContextPreview extends StatelessWidget {

     

       321
       +
         const _ContextPreview({this.post, this.comment});

     

       322
       +
       

     

       323
       +
         final FeedViewPost? post;

     

       324
       +
         final ThreadViewComment? comment;

     

       325
       +
       

     

       326
       +
         @override

     

       327
       +
         Widget build(BuildContext context) {

     

       328
       +
           if (post != null) {

     

       329
       +
             // Show full post card - Consumer only rebuilds THIS widget, not parents

     

       330
       +
             return Consumer<CommentsProvider>(

     

       331
       +
               builder: (context, commentsProvider, child) {

     

       332
       +
                 return PostCard(

     

       333
       +
                   post: post!,

     

       334
       +
                   currentTime: commentsProvider.currentTimeNotifier.value,

     

       335
       +
                   showCommentButton: false,

     

       336
       +
                   disableNavigation: true,

     

       337
       +
                   showActions: false,

     

       338
       +
                   showBorder: false,

     

       339
       +
                 );

     

       340
       +
               },

     

       341
       +
             );

     

       342
       +
           } else if (comment != null) {

     

       343
       +
             // Show comment thread/chain

     

       344
       +
             return Consumer<CommentsProvider>(

     

       345
       +
               builder: (context, commentsProvider, child) {

     

       346
       +
                 return CommentThread(

     

       347
       +
                   thread: comment!,

     

       348
       +
                   currentTime: commentsProvider.currentTimeNotifier.value,

     

       349
       +
                   maxDepth: 6,

     

       350
       +
                 );

     

       351
       +
               },

     

       352
       +
             );

     

       353
       +
           }

     

       354
       +
       

     

       355
       +
           return const SizedBox.shrink();

     

       356
       +
         }

     

       357
       +
       }

     

       358
       +
       

     

       359
       +
       class _ReplyToolbar extends StatefulWidget {

     

       360
       +
         const _ReplyToolbar({

     

       361
       +
           required this.hasText,

     

       362
       +
           required this.isSubmitting,

     

       363
       +
           required this.onMentionTap,

     

       364
       +
           required this.onImageTap,

     

       365
       +
           required this.onSubmit,

     

       366
       +
         });

     

       367
       +
       

     

       368
       +
         final bool hasText;

     

       369
       +
         final bool isSubmitting;

     

       370
       +
         final VoidCallback onMentionTap;

     

       371
       +
         final VoidCallback onImageTap;

     

       372
       +
         final VoidCallback onSubmit;

     

       373
       +
       

     

       374
       +
         @override

     

       375
       +
         State<_ReplyToolbar> createState() => _ReplyToolbarState();

     

       376
       +
       }

     

       377
       +
       

     

       378
       +
       class _ReplyToolbarState extends State<_ReplyToolbar>

     

       379
       +
           with WidgetsBindingObserver {

     

       380
       +
         final ValueNotifier<double> _keyboardMarginNotifier = ValueNotifier(0);

     

       381
       +
         final ValueNotifier<double> _safeAreaBottomNotifier = ValueNotifier(0);

     

       382
       +
       

     

       383
       +
         @override

     

       384
       +
         void initState() {

     

       385
       +
           super.initState();

     

       386
       +
           WidgetsBinding.instance.addObserver(this);

     

       387
       +
         }

     

       388
       +
       

     

       389
       +
         @override

     

       390
       +
         void didChangeDependencies() {

     

       391
       +
           super.didChangeDependencies();

     

       392
       +
           _updateMargins();

     

       393
       +
         }

     

       394
       +
       

     

       395
       +
         @override

     

       396
       +
         void dispose() {

     

       397
       +
           _keyboardMarginNotifier.dispose();

     

       398
       +
           _safeAreaBottomNotifier.dispose();

     

       399
       +
           WidgetsBinding.instance.removeObserver(this);

     

       400
       +
           super.dispose();

     

       401
       +
         }

     

       402
       +
       

     

       403
       +
         @override

     

       404
       +
         void didChangeMetrics() {

     

       405
       +
           _updateMargins();

     

       406
       +
         }

     

       407
       +
       

     

       408
       +
         void _updateMargins() {

     

       409
       +
           if (!mounted) {

     

       410
       +
             return;

     

       411
       +
           }

     

       412
       +
           final view = View.of(context);

     

       413
       +
           final devicePixelRatio = view.devicePixelRatio;

     

       414
       +
           final keyboardInset = view.viewInsets.bottom / devicePixelRatio;

     

       415
       +
           final viewPaddingBottom = view.viewPadding.bottom / devicePixelRatio;

     

       416
       +
           final safeAreaBottom =

     

       417
       +
               math.max(0, viewPaddingBottom - keyboardInset).toDouble();

     

       418
       +
       

     

       419
       +
           // Smooth tracking: Follow keyboard height in real-time (Bluesky/Thunder approach)

     

       420
       +
           _keyboardMarginNotifier.value = keyboardInset;

     

       421
       +
           _safeAreaBottomNotifier.value = safeAreaBottom;

     

       422
       +
         }

     

       423
       +
       

     

       424
       +
         @override

     

       425
       +
         Widget build(BuildContext context) {

     

       426
       +
           return Column(

     

       427
       +
             mainAxisSize: MainAxisSize.min,

     

       428
       +
             children: [

     

       429
       +
               ValueListenableBuilder<double>(

     

       430
       +
                 valueListenable: _keyboardMarginNotifier,

     

       431
       +
                 builder: (context, margin, child) {

     

       432
       +
                   return AnimatedContainer(

     

       433
       +
                     duration: const Duration(milliseconds: 100),

     

       434
       +
                     curve: Curves.easeOut,

     

       435
       +
                     margin: EdgeInsets.only(bottom: margin),

     

       436
       +
                     color: AppColors.backgroundSecondary,

     

       437
       +
                     padding: const EdgeInsets.only(

     

       438
       +
                       left: 8,

     

       439
       +
                       right: 8,

     

       440
       +
                       top: 4,

     

       441
       +
                       bottom: 4,

     

       442
       +
                     ),

     

       443
       +
                     child: child,

     

       444
       +
                   );

     

       445
       +
                 },

     

       446
       +
                 child: Row(

     

       447
       +
                   children: [

     

       448
       +
                     Semantics(

     

       449
       +
                       button: true,

     

       450
       +
                       label: 'Mention user',

     

       451
       +
                       child: GestureDetector(

     

       452
       +
                         onTap: widget.onMentionTap,

     

       453
       +
                         child: const Padding(

     

       454
       +
                           padding: EdgeInsets.all(8),

     

       455
       +
                           child: Icon(

     

       456
       +
                             Icons.alternate_email_rounded,

     

       457
       +
                             size: 24,

     

       458
       +
                             color: AppColors.textSecondary,

     

       459
       +
                           ),

     

       460
       +
                         ),

     

       461
       +
                       ),

     

       462
       +
                     ),

     

       463
       +
                     const SizedBox(width: 4),

     

       464
       +
                     Semantics(

     

       465
       +
                       button: true,

     

       466
       +
                       label: 'Add image',

     

       467
       +
                       child: GestureDetector(

     

       468
       +
                         onTap: widget.onImageTap,

     

       469
       +
                         child: const Padding(

     

       470
       +
                           padding: EdgeInsets.all(8),

     

       471
       +
                           child: Icon(

     

       472
       +
                             Icons.image_outlined,

     

       473
       +
                             size: 24,

     

       474
       +
                             color: AppColors.textSecondary,

     

       475
       +
                           ),

     

       476
       +
                         ),

     

       477
       +
                       ),

     

       478
       +
                     ),

     

       479
       +
                     const Spacer(),

     

       480
       +
                     Semantics(

     

       481
       +
                       button: true,

     

       482
       +
                       label: 'Send comment',

     

       483
       +
                       child: GestureDetector(

     

       484
       +
                         onTap:

     

       485
       +
                             (widget.hasText && !widget.isSubmitting)

     

       486
       +
                                 ? widget.onSubmit

     

       487
       +
                                 : null,

     

       488
       +
                         child: Container(

     

       489
       +
                           height: 32,

     

       490
       +
                           padding: const EdgeInsets.symmetric(horizontal: 14),

     

       491
       +
                           decoration: BoxDecoration(

     

       492
       +
                             color:

     

       493
       +
                                 (widget.hasText && !widget.isSubmitting)

     

       494
       +
                                     ? AppColors.primary

     

       495
       +
                                     : AppColors.textSecondary.withValues(alpha: 0.3),

     

       496
       +
                             borderRadius: BorderRadius.circular(20),

     

       497
       +
                           ),

     

       498
       +
                           child: Row(

     

       499
       +
                             mainAxisSize: MainAxisSize.min,

     

       500
       +
                             children: [

     

       501
       +
                               if (widget.isSubmitting)

     

       502
       +
                                 const SizedBox(

     

       503
       +
                                   width: 14,

     

       504
       +
                                   height: 14,

     

       505
       +
                                   child: CircularProgressIndicator(

     

       506
       +
                                     strokeWidth: 2,

     

       507
       +
                                     valueColor: AlwaysStoppedAnimation<Color>(

     

       508
       +
                                       AppColors.textPrimary,

     

       509
       +
                                     ),

     

       510
       +
                                   ),

     

       511
       +
                                 )

     

       512
       +
                               else

     

       513
       +
                                 const Text(

     

       514
       +
                                   'Send',

     

       515
       +
                                   style: TextStyle(

     

       516
       +
                                     color: AppColors.textPrimary,

     

       517
       +
                                     fontSize: 13,

     

       518
       +
                                     fontWeight: FontWeight.normal,

     

       519
       +
                                   ),

     

       520
       +
                                 ),

     

       521
       +
                             ],

     

       522
       +
                           ),

     

       523
       +
                         ),

     

       524
       +
                       ),

     

       525
       +
                     ),

     

       526
       +
                   ],

     

       527
       +
                 ),

     

       528
       +
               ),

     

       529
       +
               ValueListenableBuilder<double>(

     

       530
       +
                 valueListenable: _safeAreaBottomNotifier,

     

       531
       +
                 builder: (context, safeAreaBottom, child) {

     

       532
       +
                   return AnimatedContainer(

     

       533
       +
                     duration: const Duration(milliseconds: 100),

     

       534
       +
                     curve: Curves.easeOut,

     

       535
       +
                     height: safeAreaBottom,

     

       536
       +
                     color: AppColors.backgroundSecondary,

     

       537
       +
                   );

     

       538
       +
                 },

     

       539
       +
               ),

     

       540
       +
             ],

     

       541
       +
           );

     

       542
       +
         }

     

       543
       +
       }

+321

lib/widgets/comment_composer.dart

···

       1
       +
       import 'dart:async';

     

       2
       +
       

     

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

     

       4
       +
       import 'package:flutter/services.dart';

     

       5
       +
       

     

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

     

       7
       +
       

     

       8
       +
       /// Comment Composer Widget

     

       9
       +
       ///

     

       10
       +
       /// Reusable widget for composing comments across the app.

     

       11
       +
       /// Used in post detail screens and potentially nested comment replies.

     

       12
       +
       ///

     

       13
       +
       /// Features:

     

       14
       +
       /// - Multi-line text input with auto-expanding height

     

       15
       +
       /// - @ mention button (coming soon)

     

       16
       +
       /// - Image upload button (coming soon)

     

       17
       +
       /// - Send button with validation

     

       18
       +
       /// - Proper keyboard handling

     

       19
       +
       ///

     

       20
       +
       /// Note: This widget is currently unused but has been created for future use

     

       21
       +
       /// in other parts of the app where inline comment composition is needed.

     

       22
       +
       class CommentComposer extends StatefulWidget {

     

       23
       +
         const CommentComposer({

     

       24
       +
           required this.onSubmit,

     

       25
       +
           this.placeholder = 'Say something...',

     

       26
       +
           this.autofocus = false,

     

       27
       +
           super.key,

     

       28
       +
         });

     

       29
       +
       

     

       30
       +
         /// Callback when user submits a comment

     

       31
       +
         final Future<void> Function(String content) onSubmit;

     

       32
       +
       

     

       33
       +
         /// Placeholder text for the input field

     

       34
       +
         final String placeholder;

     

       35
       +
       

     

       36
       +
         /// Whether to autofocus the input field

     

       37
       +
         final bool autofocus;

     

       38
       +
       

     

       39
       +
         @override

     

       40
       +
         State<CommentComposer> createState() => _CommentComposerState();

     

       41
       +
       }

     

       42
       +
       

     

       43
       +
       class _CommentComposerState extends State<CommentComposer> {

     

       44
       +
         final TextEditingController _textController = TextEditingController();

     

       45
       +
         final FocusNode _focusNode = FocusNode();

     

       46
       +
         bool _hasText = false;

     

       47
       +
         bool _isSubmitting = false;

     

       48
       +
         Timer? _bannerDismissTimer;

     

       49
       +
       

     

       50
       +
         @override

     

       51
       +
         void initState() {

     

       52
       +
           super.initState();

     

       53
       +
           _textController.addListener(_onTextChanged);

     

       54
       +
           if (widget.autofocus) {

     

       55
       +
             // Focus after frame is built

     

       56
       +
             WidgetsBinding.instance.addPostFrameCallback((_) {

     

       57
       +
               if (mounted) {

     

       58
       +
                 _focusNode.requestFocus();

     

       59
       +
               }

     

       60
       +
             });

     

       61
       +
           }

     

       62
       +
         }

     

       63
       +
       

     

       64
       +
         @override

     

       65
       +
         void dispose() {

     

       66
       +
           _bannerDismissTimer?.cancel();

     

       67
       +
           _textController.dispose();

     

       68
       +
           _focusNode.dispose();

     

       69
       +
           super.dispose();

     

       70
       +
         }

     

       71
       +
       

     

       72
       +
         void _onTextChanged() {

     

       73
       +
           final hasText = _textController.text.trim().isNotEmpty;

     

       74
       +
           if (hasText != _hasText) {

     

       75
       +
             setState(() {

     

       76
       +
               _hasText = hasText;

     

       77
       +
             });

     

       78
       +
           }

     

       79
       +
         }

     

       80
       +
       

     

       81
       +
         Future<void> _handleSubmit() async {

     

       82
       +
           final content = _textController.text.trim();

     

       83
       +
           if (content.isEmpty) {

     

       84
       +
             return;

     

       85
       +
           }

     

       86
       +
       

     

       87
       +
           // Add haptic feedback before submission

     

       88
       +
           await HapticFeedback.lightImpact();

     

       89
       +
       

     

       90
       +
           // Set loading state

     

       91
       +
           setState(() {

     

       92
       +
             _isSubmitting = true;

     

       93
       +
           });

     

       94
       +
       

     

       95
       +
           try {

     

       96
       +
             await widget.onSubmit(content);

     

       97
       +
             _textController.clear();

     

       98
       +
             // Keep focus for rapid commenting

     

       99
       +
           } on Exception catch (e) {

     

       100
       +
             // Show error if submission fails

     

       101
       +
             if (mounted) {

     

       102
       +
               ScaffoldMessenger.of(context).showSnackBar(

     

       103
       +
                 SnackBar(

     

       104
       +
                   content: Text('Failed to submit: $e'),

     

       105
       +
                   backgroundColor: AppColors.primary,

     

       106
       +
                   behavior: SnackBarBehavior.floating,

     

       107
       +
                 ),

     

       108
       +
               );

     

       109
       +
             }

     

       110
       +
           } finally {

     

       111
       +
             // Always reset loading state

     

       112
       +
             if (mounted) {

     

       113
       +
               setState(() {

     

       114
       +
                 _isSubmitting = false;

     

       115
       +
               });

     

       116
       +
             }

     

       117
       +
           }

     

       118
       +
         }

     

       119
       +
       

     

       120
       +
         void _showComingSoonBanner(String feature) {

     

       121
       +
           // Cancel any existing timer to prevent multiple banners

     

       122
       +
           _bannerDismissTimer?.cancel();

     

       123
       +
       

     

       124
       +
           final messenger = ScaffoldMessenger.of(context);

     

       125
       +
           messenger.showMaterialBanner(

     

       126
       +
             MaterialBanner(

     

       127
       +
               content: Text('$feature coming soon!'),

     

       128
       +
               backgroundColor: AppColors.primary,

     

       129
       +
               leading: const Icon(Icons.info_outline, color: AppColors.textPrimary),

     

       130
       +
               actions: [

     

       131
       +
                 TextButton(

     

       132
       +
                   onPressed: messenger.hideCurrentMaterialBanner,

     

       133
       +
                   child: const Text(

     

       134
       +
                     'Dismiss',

     

       135
       +
                     style: TextStyle(color: AppColors.textPrimary),

     

       136
       +
                   ),

     

       137
       +
                 ),

     

       138
       +
               ],

     

       139
       +
             ),

     

       140
       +
           );

     

       141
       +
       

     

       142
       +
           // Auto-hide after 2 seconds with cancelable timer

     

       143
       +
           _bannerDismissTimer = Timer(const Duration(seconds: 2), () {

     

       144
       +
             if (mounted) {

     

       145
       +
               messenger.hideCurrentMaterialBanner();

     

       146
       +
             }

     

       147
       +
           });

     

       148
       +
         }

     

       149
       +
       

     

       150
       +
         void _handleMentionTap() {

     

       151
       +
           _showComingSoonBanner('Mention feature');

     

       152
       +
         }

     

       153
       +
       

     

       154
       +
         void _handleImageTap() {

     

       155
       +
           _showComingSoonBanner('Image upload');

     

       156
       +
         }

     

       157
       +
       

     

       158
       +
         @override

     

       159
       +
         Widget build(BuildContext context) {

     

       160
       +
           // Calculate max height for text input: 50% of screen

     

       161
       +
           final maxTextHeight = MediaQuery.of(context).size.height * 0.5;

     

       162
       +
       

     

       163
       +
           return Container(

     

       164
       +
             decoration: const BoxDecoration(

     

       165
       +
               color: AppColors.backgroundSecondary,

     

       166
       +
               border: Border(top: BorderSide(color: AppColors.border)),

     

       167
       +
             ),

     

       168
       +
             child: Padding(

     

       169
       +
               padding: EdgeInsets.only(

     

       170
       +
                 left: 12,

     

       171
       +
                 right: 12,

     

       172
       +
                 top: 6,

     

       173
       +
                 bottom: 6 + MediaQuery.of(context).padding.bottom,

     

       174
       +
               ),

     

       175
       +
               child: Column(

     

       176
       +
                 mainAxisSize: MainAxisSize.min,

     

       177
       +
                 children: [

     

       178
       +
                   // Text input (scrollable if too long)

     

       179
       +
                   ConstrainedBox(

     

       180
       +
                     constraints: BoxConstraints(maxHeight: maxTextHeight),

     

       181
       +
                     child: Theme(

     

       182
       +
                       data: Theme.of(context).copyWith(

     

       183
       +
                         scrollbarTheme: ScrollbarThemeData(

     

       184
       +
                           thumbColor: WidgetStateProperty.all(

     

       185
       +
                             AppColors.textSecondary.withValues(alpha: 0.3),

     

       186
       +
                           ),

     

       187
       +
                         ),

     

       188
       +
                       ),

     

       189
       +
                       child: Scrollbar(

     

       190
       +
                         thumbVisibility: false,

     

       191
       +
                         thickness: 3,

     

       192
       +
                         radius: const Radius.circular(2),

     

       193
       +
                         child: SingleChildScrollView(

     

       194
       +
                           child: Container(

     

       195
       +
                             decoration: BoxDecoration(

     

       196
       +
                               color: AppColors.background,

     

       197
       +
                               borderRadius: BorderRadius.circular(20),

     

       198
       +
                             ),

     

       199
       +
                             child: TextField(

     

       200
       +
                               controller: _textController,

     

       201
       +
                               focusNode: _focusNode,

     

       202
       +
                               maxLines: null,

     

       203
       +
                               keyboardType: TextInputType.multiline,

     

       204
       +
                               textCapitalization: TextCapitalization.sentences,

     

       205
       +
                               textInputAction: TextInputAction.newline,

     

       206
       +
                               style: const TextStyle(

     

       207
       +
                                 color: AppColors.textPrimary,

     

       208
       +
                                 fontSize: 14,

     

       209
       +
                               ),

     

       210
       +
                               decoration: InputDecoration(

     

       211
       +
                                 hintText: widget.placeholder,

     

       212
       +
                                 hintStyle: TextStyle(

     

       213
       +
                                   color: AppColors.textSecondary.withValues(

     

       214
       +
                                     alpha: 0.6,

     

       215
       +
                                   ),

     

       216
       +
                                   fontSize: 15,

     

       217
       +
                                 ),

     

       218
       +
                                 border: InputBorder.none,

     

       219
       +
                                 contentPadding: const EdgeInsets.symmetric(

     

       220
       +
                                   horizontal: 16,

     

       221
       +
                                   vertical: 10,

     

       222
       +
                                 ),

     

       223
       +
                               ),

     

       224
       +
                             ),

     

       225
       +
                           ),

     

       226
       +
                         ),

     

       227
       +
                       ),

     

       228
       +
                     ),

     

       229
       +
                   ),

     

       230
       +
                   const SizedBox(height: 8),

     

       231
       +
                   // Action buttons row with send button (always visible)

     

       232
       +
                   Row(

     

       233
       +
                     children: [

     

       234
       +
                       // Mention button

     

       235
       +
                       Semantics(

     

       236
       +
                         button: true,

     

       237
       +
                         label: 'Mention user',

     

       238
       +
                         child: GestureDetector(

     

       239
       +
                           onTap: _handleMentionTap,

     

       240
       +
                           child: const Padding(

     

       241
       +
                             padding: EdgeInsets.all(8),

     

       242
       +
                             child: Icon(

     

       243
       +
                               Icons.alternate_email_rounded,

     

       244
       +
                               size: 24,

     

       245
       +
                               color: AppColors.textSecondary,

     

       246
       +
                             ),

     

       247
       +
                           ),

     

       248
       +
                         ),

     

       249
       +
                       ),

     

       250
       +
                       const SizedBox(width: 4),

     

       251
       +
                       // Image button

     

       252
       +
                       Semantics(

     

       253
       +
                         button: true,

     

       254
       +
                         label: 'Add image',

     

       255
       +
                         child: GestureDetector(

     

       256
       +
                           onTap: _handleImageTap,

     

       257
       +
                           child: const Padding(

     

       258
       +
                             padding: EdgeInsets.all(8),

     

       259
       +
                             child: Icon(

     

       260
       +
                               Icons.image_outlined,

     

       261
       +
                               size: 24,

     

       262
       +
                               color: AppColors.textSecondary,

     

       263
       +
                             ),

     

       264
       +
                           ),

     

       265
       +
                         ),

     

       266
       +
                       ),

     

       267
       +
                       const Spacer(),

     

       268
       +
                       // Send button (pill-shaped)

     

       269
       +
                       Semantics(

     

       270
       +
                         button: true,

     

       271
       +
                         label: 'Send comment',

     

       272
       +
                         child: GestureDetector(

     

       273
       +
                           onTap: (_hasText && !_isSubmitting) ? _handleSubmit : null,

     

       274
       +
                           child: Container(

     

       275
       +
                             height: 32,

     

       276
       +
                             padding: const EdgeInsets.symmetric(horizontal: 14),

     

       277
       +
                             decoration: BoxDecoration(

     

       278
       +
                               color:

     

       279
       +
                                   (_hasText && !_isSubmitting)

     

       280
       +
                                       ? AppColors.primary

     

       281
       +
                                       : AppColors.textSecondary.withValues(

     

       282
       +
                                         alpha: 0.3,

     

       283
       +
                                       ),

     

       284
       +
                               borderRadius: BorderRadius.circular(20),

     

       285
       +
                             ),

     

       286
       +
                             child: Row(

     

       287
       +
                               mainAxisSize: MainAxisSize.min,

     

       288
       +
                               children: [

     

       289
       +
                                 if (_isSubmitting)

     

       290
       +
                                   const SizedBox(

     

       291
       +
                                     width: 14,

     

       292
       +
                                     height: 14,

     

       293
       +
                                     child: CircularProgressIndicator(

     

       294
       +
                                       strokeWidth: 2,

     

       295
       +
                                       valueColor: AlwaysStoppedAnimation<Color>(

     

       296
       +
                                         AppColors.textPrimary,

     

       297
       +
                                       ),

     

       298
       +
                                     ),

     

       299
       +
                                   )

     

       300
       +
                                 else

     

       301
       +
                                   const Text(

     

       302
       +
                                     'Send',

     

       303
       +
                                     style: TextStyle(

     

       304
       +
                                       color: AppColors.textPrimary,

     

       305
       +
                                       fontSize: 13,

     

       306
       +
                                       fontWeight: FontWeight.normal,

     

       307
       +
                                     ),

     

       308
       +
                                   ),

     

       309
       +
                               ],

     

       310
       +
                             ),

     

       311
       +
                           ),

     

       312
       +
                         ),

     

       313
       +
                       ),

     

       314
       +
                     ],

     

       315
       +
                   ),

     

       316
       +
                 ],

     

       317
       +
               ),

     

       318
       +
             ),

     

       319
       +
           );

     

       320
       +
         }

     

       321
       +
       }