3c4680bdd7
**Major Features Added:** - **Inline Reply System**: Replace compose screen with inline reply boxes - **Thread Navigation**: Parent/child navigation with jump functionality - **Chain Flow UI**: Reply counts, expand/collapse animations, visual hierarchy - **Enhanced Animations**: Smooth transitions, hover effects, micro-interactions **Frontend Changes:** - **ThreadedCommentWidget**: Complete rewrite with animations and navigation - **ThreadNode Model**: Added parent references and descendant counting - **ThreadedConversationScreen**: Integrated navigation handlers - **PostDetailScreen**: Replaced with threaded conversation view - **ComposeScreen**: Added reply indicators and context - **PostActions**: Fixed visibility checks for chain buttons **Backend Changes:** - **API Route**: Added /posts/:id/thread endpoint - **Post Repository**: Include allow_chain and visibility fields in feed - **Thread Handler**: Support for fetching post chains **UI/UX Improvements:** - **Reply Context**: Clear indication when replying to specific posts - **Character Counting**: 500 character limit with live counter - **Visual Hierarchy**: Depth-based indentation and styling - **Smooth Animations**: SizeTransition, FadeTransition, hover states - **Chain Navigation**: Parent/child buttons with visual feedback **Technical Enhancements:** - **Animation Controllers**: Proper lifecycle management - **State Management**: Clean separation of concerns - **Navigation Callbacks**: Reusable navigation system - **Error Handling**: Graceful fallbacks and user feedback This creates a Reddit-style threaded conversation experience with smooth animations, inline replies, and intuitive navigation between posts in a chain.
599 lines
19 KiB
Dart
599 lines
19 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:timeago/timeago.dart' as timeago;
|
|
import '../models/post.dart';
|
|
import '../models/thread_node.dart';
|
|
import '../theme/app_theme.dart';
|
|
import '../widgets/media/signed_media_image.dart';
|
|
import '../widgets/post/post_actions.dart';
|
|
|
|
/// Recursive widget for rendering threaded conversations (Reddit-style)
|
|
class ThreadedCommentWidget extends StatefulWidget {
|
|
final ThreadNode node;
|
|
final VoidCallback? onReply;
|
|
final VoidCallback? onLike;
|
|
final Function(ThreadNode)? onNavigateToParent;
|
|
final Function(ThreadNode)? onNavigateToChild;
|
|
final bool isRootPost;
|
|
|
|
const ThreadedCommentWidget({
|
|
super.key,
|
|
required this.node,
|
|
this.onReply,
|
|
this.onLike,
|
|
this.onNavigateToParent,
|
|
this.onNavigateToChild,
|
|
this.isRootPost = false,
|
|
});
|
|
|
|
@override
|
|
State<ThreadedCommentWidget> createState() => _ThreadedCommentWidgetState();
|
|
}
|
|
|
|
class _ThreadedCommentWidgetState extends State<ThreadedCommentWidget>
|
|
with TickerProviderStateMixin {
|
|
bool _isExpanded = true;
|
|
bool _isHovering = false;
|
|
bool _showReplyBox = false;
|
|
final _replyController = TextEditingController();
|
|
late AnimationController _expandController;
|
|
late AnimationController _hoverController;
|
|
late AnimationController _replyBoxController;
|
|
late Animation<double> _expandAnimation;
|
|
late Animation<double> _hoverAnimation;
|
|
late Animation<double> _replyBoxAnimation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
// Expand/collapse animation
|
|
_expandController = AnimationController(
|
|
duration: const Duration(milliseconds: 300),
|
|
vsync: this,
|
|
);
|
|
_expandAnimation = CurvedAnimation(
|
|
parent: _expandController,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
_expandController.forward();
|
|
|
|
// Hover animation
|
|
_hoverController = AnimationController(
|
|
duration: const Duration(milliseconds: 200),
|
|
vsync: this,
|
|
);
|
|
_hoverAnimation = CurvedAnimation(
|
|
parent: _hoverController,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
|
|
// Reply box animation
|
|
_replyBoxController = AnimationController(
|
|
duration: const Duration(milliseconds: 250),
|
|
vsync: this,
|
|
);
|
|
_replyBoxAnimation = CurvedAnimation(
|
|
parent: _replyBoxController,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_expandController.dispose();
|
|
_hoverController.dispose();
|
|
_replyBoxController.dispose();
|
|
_replyController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// The post content with indentation
|
|
_buildPostWithIndentation(),
|
|
|
|
// Thread line connector
|
|
if (widget.node.hasChildren && _isExpanded)
|
|
_buildThreadLine(),
|
|
|
|
// Recursive children with animation
|
|
if (widget.node.hasChildren)
|
|
_buildChildren(),
|
|
|
|
// Inline reply box
|
|
_buildInlineReplyBox(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPostWithIndentation() {
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
margin: EdgeInsets.only(
|
|
left: widget.isRootPost ? 0 : (widget.node.depth * 16.0 + 8.0),
|
|
right: 16,
|
|
top: widget.isRootPost ? 0 : 8,
|
|
bottom: 8,
|
|
),
|
|
decoration: BoxDecoration(
|
|
border: widget.isRootPost ? null : Border(
|
|
left: BorderSide(
|
|
color: AppTheme.navyBlue.withValues(alpha: _isHovering ? 0.6 : 0.2),
|
|
width: _isHovering ? 3 : 2,
|
|
),
|
|
),
|
|
borderRadius: BorderRadius.circular(8),
|
|
color: _isHovering ? AppTheme.navyBlue.withValues(alpha: 0.05) : null,
|
|
),
|
|
child: MouseRegion(
|
|
onEnter: (_) {
|
|
setState(() => _isHovering = true);
|
|
_hoverController.forward();
|
|
},
|
|
onExit: (_) {
|
|
setState(() => _isHovering = false);
|
|
_hoverController.reverse();
|
|
},
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Chain navigation header
|
|
if (!widget.isRootPost) _buildChainNavigation(),
|
|
|
|
// Post content
|
|
_buildPostContent(),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildChainNavigation() {
|
|
final totalReplies = widget.node.totalDescendants;
|
|
final hasParent = widget.node.parent != null;
|
|
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 8),
|
|
child: Row(
|
|
children: [
|
|
// Navigate up chain
|
|
if (hasParent)
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
if (widget.onNavigateToParent != null && widget.node.parent != null) {
|
|
widget.onNavigateToParent!(widget.node.parent!);
|
|
}
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.navyBlue.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.arrow_upward, size: 14, color: AppTheme.navyBlue),
|
|
const SizedBox(width: 4),
|
|
Text('Parent', style: TextStyle(fontSize: 12, color: AppTheme.navyBlue)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const Spacer(),
|
|
|
|
// Chain navigation buttons
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Reply count with expand/collapse
|
|
if (widget.node.hasChildren)
|
|
GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_isExpanded = !_isExpanded;
|
|
if (_isExpanded) {
|
|
_expandController.forward();
|
|
} else {
|
|
_expandController.reverse();
|
|
}
|
|
});
|
|
},
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.egyptianBlue.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 200),
|
|
child: Icon(
|
|
_isExpanded ? Icons.expand_less : Icons.expand_more,
|
|
size: 14,
|
|
color: AppTheme.egyptianBlue,
|
|
key: ValueKey(_isExpanded),
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'$totalReplies ${totalReplies == 1 ? "reply" : "replies"}',
|
|
style: TextStyle(fontSize: 12, color: AppTheme.egyptianBlue),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Quick navigation to first child
|
|
if (widget.node.hasChildren && widget.node.children.isNotEmpty)
|
|
const SizedBox(width: 8),
|
|
if (widget.node.hasChildren && widget.node.children.isNotEmpty)
|
|
GestureDetector(
|
|
onTap: () {
|
|
if (widget.onNavigateToChild != null) {
|
|
widget.onNavigateToChild!(widget.node.children.first);
|
|
}
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.brightNavy.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_downward,
|
|
size: 12,
|
|
color: AppTheme.brightNavy,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.egyptianBlue.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 200),
|
|
child: Icon(
|
|
_isExpanded ? Icons.expand_less : Icons.expand_more,
|
|
size: 14,
|
|
color: AppTheme.egyptianBlue,
|
|
key: ValueKey(_isExpanded),
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
'$totalReplies ${totalReplies == 1 ? "reply" : "replies"}',
|
|
style: TextStyle(fontSize: 12, color: AppTheme.egyptianBlue),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPostContent() {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Author info and metadata
|
|
_buildAuthorRow(),
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// Post body
|
|
_buildPostBody(),
|
|
|
|
// Media if present
|
|
if (widget.node.post.imageUrl != null) ...[
|
|
const SizedBox(height: 8),
|
|
_buildPostImage(),
|
|
],
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// Actions bar
|
|
_buildActionsBar(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPostBody() {
|
|
return Text(
|
|
widget.node.post.body,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 14,
|
|
color: AppTheme.navyText,
|
|
height: 1.4,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPostImage() {
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: SignedMediaImage(
|
|
url: widget.node.post.imageUrl!,
|
|
width: double.infinity,
|
|
height: 200,
|
|
fit: BoxFit.cover,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildActionsBar() {
|
|
return PostActions(
|
|
post: widget.node.post,
|
|
onChain: _toggleReplyBox,
|
|
);
|
|
}
|
|
|
|
Widget _buildInlineReplyBox() {
|
|
return SizeTransition(
|
|
sizeFactor: _replyBoxAnimation,
|
|
child: FadeTransition(
|
|
opacity: _replyBoxAnimation,
|
|
child: Container(
|
|
margin: EdgeInsets.only(
|
|
left: widget.isRootPost ? 0 : (widget.node.depth * 16.0 + 8.0),
|
|
right: 16,
|
|
top: 8,
|
|
bottom: 16,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.navyBlue.withValues(alpha: 0.05),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.navyBlue.withValues(alpha: 0.2),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Reply header
|
|
Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.reply, size: 16, color: AppTheme.navyBlue),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'Replying to ${widget.node.post.author?.displayName ?? 'Anonymous'}',
|
|
style: GoogleFonts.inter(
|
|
fontSize: 12,
|
|
color: AppTheme.navyBlue,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
GestureDetector(
|
|
onTap: _toggleReplyBox,
|
|
child: Icon(Icons.close, size: 16, color: AppTheme.navyBlue),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Text input
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
|
child: TextField(
|
|
controller: _replyController,
|
|
maxLines: 3,
|
|
minLines: 1,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 14,
|
|
color: AppTheme.navyText,
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: 'Write your reply...',
|
|
hintStyle: GoogleFonts.inter(
|
|
fontSize: 14,
|
|
color: AppTheme.textSecondary,
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
),
|
|
|
|
// Action buttons
|
|
Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Row(
|
|
children: [
|
|
// Image button (placeholder for now)
|
|
IconButton(
|
|
onPressed: () {
|
|
// TODO: Add image functionality
|
|
},
|
|
icon: Icon(Icons.image, size: 18, color: AppTheme.textSecondary),
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(),
|
|
),
|
|
|
|
const SizedBox(width: 16),
|
|
|
|
// Character count
|
|
Text(
|
|
'${_replyController.text.length}/500',
|
|
style: GoogleFonts.inter(
|
|
fontSize: 12,
|
|
color: AppTheme.textSecondary,
|
|
),
|
|
),
|
|
|
|
const Spacer(),
|
|
|
|
// Post button
|
|
ElevatedButton(
|
|
onPressed: _replyController.text.trim().isNotEmpty ? _submitReply : null,
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppTheme.brightNavy,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
),
|
|
child: Text(
|
|
'Reply',
|
|
style: GoogleFonts.inter(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _toggleReplyBox() {
|
|
setState(() {
|
|
_showReplyBox = !_showReplyBox;
|
|
if (_showReplyBox) {
|
|
_replyBoxController.forward();
|
|
_replyController.clear();
|
|
FocusScope.of(context).requestFocus(FocusNode());
|
|
} else {
|
|
_replyBoxController.reverse();
|
|
}
|
|
});
|
|
}
|
|
|
|
void _submitReply() async {
|
|
if (_replyController.text.trim().isEmpty) return;
|
|
|
|
// TODO: Implement actual reply submission
|
|
// For now, just close the box and clear the text
|
|
setState(() {
|
|
_showReplyBox = false;
|
|
_replyBoxController.reverse();
|
|
_replyController.clear();
|
|
});
|
|
|
|
// Call the original onReply callback if provided
|
|
if (widget.onReply != null) {
|
|
widget.onReply!();
|
|
}
|
|
}
|
|
|
|
Widget _buildAuthorRow() {
|
|
return Row(
|
|
children: [
|
|
// Avatar
|
|
Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.brightNavy.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
'L${widget.node.depth}',
|
|
style: GoogleFonts.inter(
|
|
color: AppTheme.brightNavy,
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
widget.node.post.author?.displayName ?? 'Anonymous',
|
|
style: GoogleFonts.inter(
|
|
color: AppTheme.textPrimary,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
Text(
|
|
timeago.format(widget.node.post.createdAt),
|
|
style: GoogleFonts.inter(
|
|
color: AppTheme.textSecondary,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildThreadLine() {
|
|
return Container(
|
|
height: 20,
|
|
margin: EdgeInsets.only(
|
|
left: widget.isRootPost ? 0 : (widget.node.depth * 16.0 + 8.0 + 16),
|
|
),
|
|
child: Container(
|
|
width: 2,
|
|
color: AppTheme.navyBlue.withValues(alpha: 0.3),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildChildren() {
|
|
return SizeTransition(
|
|
sizeFactor: _expandAnimation,
|
|
child: FadeTransition(
|
|
opacity: _expandAnimation,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: widget.node.children.map((child) =>
|
|
ThreadedCommentWidget(
|
|
node: child,
|
|
onReply: widget.onReply,
|
|
onLike: widget.onLike,
|
|
onNavigateToParent: widget.onNavigateToParent,
|
|
onNavigateToChild: widget.onNavigateToChild,
|
|
),
|
|
).toList(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|