patrick/sojorn
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Redesign previous chain (anchor zone) in threaded conversation

Browse source 
- Edit correct file: threaded_conversation_screen.dart _buildAnchorZone method
- Implement rounded top corners with flat bottom
- Add gradient from darker navy top to transparent bottom
- Add prominent top border for visual separation
- Remove spacing between anchor zone and stage zone
- Add 'Previous chain' label and enhanced styling
- Update arrow icon with background container
This commit is contained in:
Patrick Britton 2026-02-01 13:39:12 -06:00
parent af0b29bff1
commit 904996a14e
1 changed files with 54 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
sojorn_app/lib/screens/post/threaded_conversation_screen.dart
View file

@ -205,7 +205,6 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
children: [
if (_focusContext!.parentPost != null) ...[
_buildAnchorZone(_focusContext!.parentPost!),
const SizedBox(height: 16),
],
// Zone B: The Stage (Current Focal Post)
@ -316,29 +315,38 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
return SlideTransition(
position: _slideAnimation,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
child: GestureDetector(
onTap: () => _navigateToPost(parentPost.id),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: AppTheme.cardSurface,
borderRadius: BorderRadius.circular(18),
border: Border.all(
color: AppTheme.navyBlue.withValues(alpha: 0.18),
// Rounded top corners, flat bottom
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
// Gradient from darker top to lighter bottom
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
AppTheme.navyBlue.withValues(alpha: 0.25), // Darker at top
AppTheme.navyBlue.withValues(alpha: 0.12), // Lighter at bottom
Colors.transparent, // Fade to transparent
],
stops: const [0.0, 0.6, 1.0],
),
// Subtle border at the top
border: Border(
top: BorderSide(
color: AppTheme.brightNavy.withValues(alpha: 0.5),
width: 2,
),
boxShadow: [
BoxShadow(
color: AppTheme.navyBlue.withValues(alpha: 0.08),
blurRadius: 14,
offset: const Offset(0, 6),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => _navigateToPost(parentPost.id),
borderRadius: BorderRadius.circular(18),
child: Padding(
padding: const EdgeInsets.all(14),
child: Container(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
child: Row(
children: [
_buildCompactAvatar(parentPost),
@ -348,22 +356,33 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
parentPost.author?.displayName ?? 'Anonymous',
'Previous chain',
style: GoogleFonts.inter(
color: AppTheme.navyBlue.withValues(alpha: 0.9),
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.textSecondary.withValues(alpha: 0.9),
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.6,
),
),
const SizedBox(height: 4),
Text(
parentPost.author?.displayName ?? 'Anonymous',
style: GoogleFonts.inter(
color: AppTheme.navyBlue.withValues(alpha: 0.95),
fontSize: 13,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 3),
Text(
parentPost.body,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.inter(
color: AppTheme.navyText.withValues(alpha: 0.72),
color: AppTheme.navyText.withValues(alpha: 0.8),
fontSize: 12,
height: 1.35,
height: 1.3,
fontWeight: FontWeight.w500,
),
),
],
@ -371,10 +390,10 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
),
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.all(6),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppTheme.brightNavy.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(12),
color: AppTheme.brightNavy.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(10),
),
child: Icon(
Icons.arrow_upward,
@ -387,8 +406,8 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
),
),
),
),
).animate().slideY(begin: -0.08, end: 0, duration: 220.ms);
).animate().slideY(begin: -0.08, end: 0, duration: 220.ms),
);
}
Widget _buildStageZone(Post focalPost) {
@ -397,7 +416,7 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
child: FadeTransition(
opacity: _fadeAnimation,
child: Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 0),
margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
decoration: BoxDecoration(
color: AppTheme.cardSurface,
borderRadius: BorderRadius.circular(26),