bretton.dev / coves-mobile
Main coves client
fork atom

feat: improve post detail screen UX and navigation

Enhance post detail screen with better organization and interaction:

Comment Navigation:
- Wire up dual comment button behavior:
- Input field opens reply composer
- Comment count button scrolls to comments section
- Add _scrollToComments() method with smooth animation
- Uses GlobalKey on CommentsHeader for precise scrolling

Visual Improvements:
- Add 1px border divider before comments section
- Replace blank spacing with clear visual separator
- Matches feed/comment divider styling for consistency
- 16px vertical margins for breathing room

Content Organization:
- Enable author footer in detail view (showAuthorFooter: true)
- Shows author info and timestamp above post title
- Enhanced typography: 20px title, 16px text, 1.6 line height
- Larger embeds (280px) for better content visibility

Changes:
- Add _commentsHeaderKey GlobalKey for scroll targeting
- Add _scrollToComments() method with Scrollable.ensureVisible
- Use onCommentInputTap and onCommentCountTap callbacks
- Add Container divider with AppColors.border
- Enable showAuthorFooter parameter

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

bretton.dev 9c6aa565 6ac77667

options
unified split
Changed files
+31 -1
lib
screens
home
post_detail_screen.dart
+31 -1
lib/screens/home/post_detail_screen.dart 
···

       
44

       
 

       



     

       
45

       
 

       
class _PostDetailScreenState extends State<PostDetailScreen> {


     

       
46

       
 

       
  final ScrollController _scrollController = ScrollController();


     

       

       

       
     

       
47

       
 

       



     

       
48

       
 

       
  // Current sort option


     

       
49

       
 

       
  String _currentSort = 'hot';


     
···

       
281

       
 

       
        return PostActionBar(


     

       
282

       
 

       
          post: displayPost,


     

       
283

       
 

       
          isVoted: isVoted,


     

       
284

       
-

       
          onCommentTap: _openCommentComposer,


     

       

       

       
     

       
285

       
 

       
          onVoteTap: () async {


     

       
286

       
 

       
            // Check authentication


     

       
287

       
 

       
            final authProvider = context.read<AuthProvider>();


     
···

       
328

       
 

       
        );


     

       
329

       
 

       
      },


     

       
330

       
 

       
    );


     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
331

       
 

       
  }


     

       
332

       
 

       



     

       
333

       
 

       
  /// Open the reply screen for composing a comment


     
···

       
435

       
 

       
                              currentTimeNotifier:


     

       
436

       
 

       
                                  commentsProvider.currentTimeNotifier,


     

       
437

       
 

       
                            ),


     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
438

       
 

       
                            // Comments header with sort dropdown


     

       
439

       
 

       
                            CommentsHeader(


     

       

       

       
     

       
440

       
 

       
                              commentCount: comments.length,


     

       
441

       
 

       
                              currentSort: _currentSort,


     

       
442

       
 

       
                              onSortChanged: _onSortChanged,


     
···

       
508

       
 

       
          showActions: false,


     

       
509

       
 

       
          showHeader: false,


     

       
510

       
 

       
          showBorder: false,


     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
511

       
 

       
        );


     

       
512

       
 

       
      },


     

       
513

       
 

       
    );


     
···

       
44

       
 

       



     

       
45

       
 

       
class _PostDetailScreenState extends State<PostDetailScreen> {


     

       
46

       
 

       
  final ScrollController _scrollController = ScrollController();


     

       
47

       
+

       
  final GlobalKey _commentsHeaderKey = GlobalKey();


     

       
48

       
 

       



     

       
49

       
 

       
  // Current sort option


     

       
50

       
 

       
  String _currentSort = 'hot';


     
···

       
282

       
 

       
        return PostActionBar(


     

       
283

       
 

       
          post: displayPost,


     

       
284

       
 

       
          isVoted: isVoted,


     

       
285

       
+

       
          onCommentInputTap: _openCommentComposer,


     

       
286

       
+

       
          onCommentCountTap: _scrollToComments,


     

       
287

       
 

       
          onVoteTap: () async {


     

       
288

       
 

       
            // Check authentication


     

       
289

       
 

       
            final authProvider = context.read<AuthProvider>();


     
···

       
330

       
 

       
        );


     

       
331

       
 

       
      },


     

       
332

       
 

       
    );


     

       
333

       
+

       
  }


     

       
334

       
+

       



     

       
335

       
+

       
  /// Scroll to the comments section


     

       
336

       
+

       
  void _scrollToComments() {


     

       
337

       
+

       
    final context = _commentsHeaderKey.currentContext;


     

       
338

       
+

       
    if (context != null) {


     

       
339

       
+

       
      Scrollable.ensureVisible(


     

       
340

       
+

       
        context,


     

       
341

       
+

       
        duration: const Duration(milliseconds: 300),


     

       
342

       
+

       
        curve: Curves.easeInOut,


     

       
343

       
+

       
      );


     

       
344

       
+

       
    }


     

       
345

       
 

       
  }


     

       
346

       
 

       



     

       
347

       
 

       
  /// Open the reply screen for composing a comment


     
···

       
449

       
 

       
                              currentTimeNotifier:


     

       
450

       
 

       
                                  commentsProvider.currentTimeNotifier,


     

       
451

       
 

       
                            ),


     

       
452

       
+

       



     

       
453

       
+

       
                            // Visual divider before comments section


     

       
454

       
+

       
                            Container(


     

       
455

       
+

       
                              margin: const EdgeInsets.symmetric(vertical: 16),


     

       
456

       
+

       
                              height: 1,


     

       
457

       
+

       
                              color: AppColors.border,


     

       
458

       
+

       
                            ),


     

       
459

       
+

       



     

       
460

       
 

       
                            // Comments header with sort dropdown


     

       
461

       
 

       
                            CommentsHeader(


     

       
462

       
+

       
                              key: _commentsHeaderKey,


     

       
463

       
 

       
                              commentCount: comments.length,


     

       
464

       
 

       
                              currentSort: _currentSort,


     

       
465

       
 

       
                              onSortChanged: _onSortChanged,


     
···

       
531

       
 

       
          showActions: false,


     

       
532

       
 

       
          showHeader: false,


     

       
533

       
 

       
          showBorder: false,


     

       
534

       
+

       
          showFullText: true,


     

       
535

       
+

       
          showAuthorFooter: true,


     

       
536

       
+

       
          textFontSize: 16,


     

       
537

       
+

       
          textLineHeight: 1.6,


     

       
538

       
+

       
          embedHeight: 280,


     

       
539

       
+

       
          titleFontSize: 20,


     

       
540

       
+

       
          titleFontWeight: FontWeight.w600,


     

       
541

       
 

       
        );


     

       
542

       
 

       
      },


     

       
543

       
 

       
    );