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: [ children: [
if (_focusContext!.parentPost != null) ...[ if (_focusContext!.parentPost != null) ...[
_buildAnchorZone(_focusContext!.parentPost!), _buildAnchorZone(_focusContext!.parentPost!),
const SizedBox(height: 16),
], ],
// Zone B: The Stage (Current Focal Post) // Zone B: The Stage (Current Focal Post)
@ -316,29 +315,38 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
return SlideTransition( return SlideTransition(
position: _slideAnimation, position: _slideAnimation,
child: Container( 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( decoration: BoxDecoration(
color: AppTheme.cardSurface, // Rounded top corners, flat bottom
borderRadius: BorderRadius.circular(18), borderRadius: const BorderRadius.only(
border: Border.all( topLeft: Radius.circular(20),
color: AppTheme.navyBlue.withValues(alpha: 0.18), 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, width: 2,
), ),
boxShadow: [
BoxShadow(
color: AppTheme.navyBlue.withValues(alpha: 0.08),
blurRadius: 14,
offset: const Offset(0, 6),
), ),
],
), ),
child: Material( child: Container(
color: Colors.transparent, padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
child: InkWell(
onTap: () => _navigateToPost(parentPost.id),
borderRadius: BorderRadius.circular(18),
child: Padding(
padding: const EdgeInsets.all(14),
child: Row( child: Row(
children: [ children: [
_buildCompactAvatar(parentPost), _buildCompactAvatar(parentPost),
@ -348,22 +356,33 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
parentPost.author?.displayName ?? 'Anonymous', 'Previous chain',
style: GoogleFonts.inter( style: GoogleFonts.inter(
color: AppTheme.navyBlue.withValues(alpha: 0.9), color: AppTheme.textSecondary.withValues(alpha: 0.9),
fontSize: 13, fontSize: 10,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
letterSpacing: 0.6,
), ),
), ),
const SizedBox(height: 4), 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( Text(
parentPost.body, parentPost.body,
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: GoogleFonts.inter( style: GoogleFonts.inter(
color: AppTheme.navyText.withValues(alpha: 0.72), color: AppTheme.navyText.withValues(alpha: 0.8),
fontSize: 12, fontSize: 12,
height: 1.35, height: 1.3,
fontWeight: FontWeight.w500,
), ),
), ),
], ],
@ -371,10 +390,10 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Container( Container(
padding: const EdgeInsets.all(6), padding: const EdgeInsets.all(8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.brightNavy.withValues(alpha: 0.12), color: AppTheme.brightNavy.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(10),
), ),
child: Icon( child: Icon(
Icons.arrow_upward, 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) { Widget _buildStageZone(Post focalPost) {
@ -397,7 +416,7 @@ class _ThreadedConversationScreenState extends ConsumerState<ThreadedConversatio
child: FadeTransition( child: FadeTransition(
opacity: _fadeAnimation, opacity: _fadeAnimation,
child: Container( child: Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 0), margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.cardSurface, color: AppTheme.cardSurface,
borderRadius: BorderRadius.circular(26), borderRadius: BorderRadius.circular(26),