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

feat: Phase 5 - Harmony State explainer modal with progression chart, tappable from profile

Browse source
This commit is contained in:
Patrick Britton 2026-02-17 03:38:10 -06:00
parent 60a42c4704
commit f5612be301
2 changed files with 338 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
sojorn_app/lib/screens/profile/viewable_profile_screen.dart
View file

@ -24,6 +24,7 @@ import '../../services/secure_chat_service.dart';
import '../post/post_detail_screen.dart';
import 'profile_settings_screen.dart';
import 'followers_following_screen.dart';
import '../../widgets/harmony_explainer_modal.dart';
/// Unified profile screen - handles both own profile and viewing others.
///
@ -1275,7 +1276,9 @@ class _UnifiedProfileScreenState extends ConsumerState<UnifiedProfileScreen>
}
Widget _buildTrustInfo(TrustState trustState) {
return Container(
return GestureDetector(
onTap: () => HarmonyExplainerModal.show(context, trustState),
child: Container(
padding: const EdgeInsets.all(AppTheme.spacingMd),
decoration: BoxDecoration(
color: AppTheme.cardSurface,
@ -1332,6 +1335,7 @@ class _UnifiedProfileScreenState extends ConsumerState<UnifiedProfileScreen>
),
],
),
),
);
}

333
sojorn_app/lib/widgets/harmony_explainer_modal.dart Normal file
View file

@ -0,0 +1,333 @@
import 'package:flutter/material.dart';
import '../models/trust_state.dart';
import '../models/trust_tier.dart';
import '../theme/app_theme.dart';
import '../theme/tokens.dart';
/// Modal that explains the Harmony State system.
/// Shows current level, progression chart, and tips.
class HarmonyExplainerModal extends StatelessWidget {
final TrustState trustState;
const HarmonyExplainerModal({super.key, required this.trustState});
static void show(BuildContext context, TrustState trustState) {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
isScrollControlled: true,
builder: (_) => HarmonyExplainerModal(trustState: trustState),
);
}
@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.75,
maxChildSize: 0.92,
minChildSize: 0.5,
builder: (_, controller) => Container(
decoration: BoxDecoration(
color: AppTheme.cardSurface,
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
),
child: ListView(
controller: controller,
padding: const EdgeInsets.fromLTRB(24, 12, 24, 32),
children: [
// Handle
Center(child: Container(
width: 40, height: 4,
decoration: BoxDecoration(
color: AppTheme.navyBlue.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(2),
),
)),
const SizedBox(height: 20),
// Title
Text('What is Harmony State?', style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w800, color: AppTheme.navyBlue,
)),
const SizedBox(height: 10),
Text(
'Your Harmony State is your community contribution score. It affects your reach multiplier — how far your posts travel.',
style: TextStyle(fontSize: 14, color: SojornColors.postContentLight, height: 1.5),
),
const SizedBox(height: 24),
// Current state card
_CurrentStateCard(trustState: trustState),
const SizedBox(height: 24),
// Progression chart
Text('Progression', style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w700, color: AppTheme.navyBlue,
)),
const SizedBox(height: 12),
_ProgressionChart(currentTier: trustState.tier),
const SizedBox(height: 24),
// How to increase
Text('How to Increase Harmony', style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w700, color: AppTheme.navyBlue,
)),
const SizedBox(height: 12),
_TipRow(icon: Icons.check_circle, color: const Color(0xFF4CAF50),
text: 'Post helpful beacons that get upvoted'),
_TipRow(icon: Icons.check_circle, color: const Color(0xFF4CAF50),
text: 'Create posts that receive positive engagement'),
_TipRow(icon: Icons.check_circle, color: const Color(0xFF4CAF50),
text: 'Participate in chains constructively'),
_TipRow(icon: Icons.check_circle, color: const Color(0xFF4CAF50),
text: 'Join and contribute to groups'),
const SizedBox(height: 16),
// What decreases
Text('What Decreases Harmony', style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w700, color: AppTheme.navyBlue,
)),
const SizedBox(height: 12),
_TipRow(icon: Icons.cancel, color: SojornColors.destructive,
text: 'Spam or inappropriate content'),
_TipRow(icon: Icons.cancel, color: SojornColors.destructive,
text: 'Beacons that get downvoted as false'),
_TipRow(icon: Icons.cancel, color: SojornColors.destructive,
text: 'Repeated community guideline violations'),
],
),
),
);
}
}
class _CurrentStateCard extends StatelessWidget {
final TrustState trustState;
const _CurrentStateCard({required this.trustState});
@override
Widget build(BuildContext context) {
final tier = trustState.tier;
final score = trustState.harmonyScore;
final multiplier = _multiplierForTier(tier);
final nextTier = _nextTier(tier);
final nextThreshold = _thresholdForTier(nextTier);
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppTheme.navyBlue.withValues(alpha: 0.06),
AppTheme.brightNavy.withValues(alpha: 0.04),
],
),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppTheme.navyBlue.withValues(alpha: 0.1)),
),
child: Column(
children: [
Row(
children: [
Container(
width: 48, height: 48,
decoration: BoxDecoration(
color: _colorForTier(tier).withValues(alpha: 0.15),
shape: BoxShape.circle,
),
child: Icon(Icons.auto_graph, color: _colorForTier(tier), size: 24),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Current: ${tier.displayName}', style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w700, color: AppTheme.navyBlue,
)),
Text('Score: $score', style: TextStyle(
fontSize: 13, color: SojornColors.textDisabled,
)),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: _colorForTier(tier).withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(20),
),
child: Text('${multiplier}x reach', style: TextStyle(
fontSize: 13, fontWeight: FontWeight.w700, color: _colorForTier(tier),
)),
),
],
),
if (nextTier != null) ...[
const SizedBox(height: 14),
// Progress bar to next tier
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Next: ${nextTier.displayName}', style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w600, color: SojornColors.textDisabled,
)),
Text('$score / $nextThreshold', style: TextStyle(
fontSize: 12, color: SojornColors.textDisabled,
)),
],
),
const SizedBox(height: 6),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: (score / nextThreshold).clamp(0.0, 1.0),
backgroundColor: AppTheme.navyBlue.withValues(alpha: 0.08),
valueColor: AlwaysStoppedAnimation(_colorForTier(tier)),
minHeight: 6,
),
),
],
),
],
],
),
);
}
String _multiplierForTier(TrustTier tier) {
switch (tier) {
case TrustTier.new_user: return '1.0';
case TrustTier.established: return '1.5';
case TrustTier.trusted: return '2.0';
}
}
TrustTier? _nextTier(TrustTier tier) {
switch (tier) {
case TrustTier.new_user: return TrustTier.established;
case TrustTier.established: return TrustTier.trusted;
case TrustTier.trusted: return null;
}
}
int _thresholdForTier(TrustTier? tier) {
switch (tier) {
case TrustTier.established: return 100;
case TrustTier.trusted: return 500;
default: return 100;
}
}
Color _colorForTier(TrustTier tier) {
switch (tier) {
case TrustTier.new_user: return AppTheme.egyptianBlue;
case TrustTier.established: return AppTheme.royalPurple;
case TrustTier.trusted: return const Color(0xFF4CAF50);
}
}
}
class _ProgressionChart extends StatelessWidget {
final TrustTier currentTier;
const _ProgressionChart({required this.currentTier});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: AppTheme.navyBlue.withValues(alpha: 0.03),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: AppTheme.navyBlue.withValues(alpha: 0.06)),
),
child: Column(
children: [
_LevelRow(label: 'New', range: '0–100', multiplier: '1.0x',
color: AppTheme.egyptianBlue, isActive: currentTier == TrustTier.new_user),
const SizedBox(height: 10),
_LevelRow(label: 'Established', range: '100–500', multiplier: '1.5x',
color: AppTheme.royalPurple, isActive: currentTier == TrustTier.established),
const SizedBox(height: 10),
_LevelRow(label: 'Trusted', range: '500+', multiplier: '2.0x',
color: const Color(0xFF4CAF50), isActive: currentTier == TrustTier.trusted),
],
),
);
}
}
class _LevelRow extends StatelessWidget {
final String label;
final String range;
final String multiplier;
final Color color;
final bool isActive;
const _LevelRow({
required this.label, required this.range,
required this.multiplier, required this.color, required this.isActive,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
Container(
width: 12, height: 12,
decoration: BoxDecoration(
color: isActive ? color : color.withValues(alpha: 0.2),
shape: BoxShape.circle,
border: isActive ? Border.all(color: color, width: 2) : null,
),
),
const SizedBox(width: 12),
Expanded(child: Text(label, style: TextStyle(
fontSize: 14, fontWeight: isActive ? FontWeight.w700 : FontWeight.w500,
color: isActive ? AppTheme.navyBlue : SojornColors.textDisabled,
))),
Text(range, style: TextStyle(fontSize: 12, color: SojornColors.textDisabled)),
const SizedBox(width: 14),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: isActive ? color.withValues(alpha: 0.12) : AppTheme.navyBlue.withValues(alpha: 0.04),
borderRadius: BorderRadius.circular(8),
),
child: Text(multiplier, style: TextStyle(
fontSize: 12, fontWeight: FontWeight.w700,
color: isActive ? color : SojornColors.textDisabled,
)),
),
],
);
}
}
class _TipRow extends StatelessWidget {
final IconData icon;
final Color color;
final String text;
const _TipRow({required this.icon, required this.color, required this.text});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, size: 18, color: color),
const SizedBox(width: 10),
Expanded(child: Text(text, style: TextStyle(
fontSize: 13, color: SojornColors.postContentLight, height: 1.4,
))),
],
),
);
}
}