feat: unify group rides and social experience

This commit is contained in:
Developer 2026-09-05 04:08:53 -04:00
parent ce6641102d
commit 4beacfde03
8 changed files with 2779 additions and 1417 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/responsive/viewport_size.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart';
import '../../services/group_rides/group_ride_models.dart';
import '../../services/group_rides/group_ride_providers.dart';
@ -31,19 +34,20 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
@override
Widget build(BuildContext context) {
final colors = context.motorColors;
final user = ref.watch(currentUserProvider);
final isAuthed = user != null && !user.isAnonymous;
return Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
backgroundColor: const Color(0xFF13151A),
backgroundColor: colors.surfaceContainerHigh,
elevation: 0,
title: const Row(
title: Row(
children: [
Icon(Icons.two_wheeler, color: Color(0xFF00E5FF), size: 24),
SizedBox(width: 10),
Text(
Icon(Icons.two_wheeler, color: colors.cyberCyan, size: 24),
const SizedBox(width: 10),
const Text(
'GROUP RIDES',
style: TextStyle(
fontWeight: FontWeight.w900,
@ -55,9 +59,9 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
),
bottom: TabBar(
controller: _tabController,
indicatorColor: const Color(0xFF00E5FF),
indicatorColor: colors.cyberCyan,
indicatorWeight: 3,
labelColor: const Color(0xFF00E5FF),
labelColor: colors.cyberCyan,
unselectedLabelColor: Colors.white60,
labelStyle: const TextStyle(
fontWeight: FontWeight.bold,
@ -73,25 +77,30 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
if (isAuthed)
IconButton(
key: const ValueKey('group_rides_create_appbar_button'),
icon: const Icon(Icons.add, color: Color(0xFF00E5FF)),
icon: Icon(Icons.add, color: colors.cyberCyan),
tooltip: 'Create Group Ride',
onPressed: () => context.push('/group-rides/create'),
),
],
),
body: !isAuthed
? _buildAccountRequiredNotice(context)
: TabBarView(
controller: _tabController,
children: [
_buildUpcomingTab(context, ref, user.uid),
_buildMyRidesTab(context, ref, user.uid),
],
),
body: ResponsiveLayout(
builder: (context, snapshot) {
if (!isAuthed) {
return _buildAccountRequiredNotice(context, colors);
}
return TabBarView(
controller: _tabController,
children: [
_buildUpcomingTab(context, ref, user.uid, snapshot, colors),
_buildMyRidesTab(context, ref, user.uid, snapshot, colors),
],
);
},
),
floatingActionButton: isAuthed
? FloatingActionButton.extended(
key: const ValueKey('create_group_ride_fab'),
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
icon: const Icon(Icons.add_road),
label: const Text(
@ -104,9 +113,12 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
);
}
Widget _buildAccountRequiredNotice(BuildContext context) {
Widget _buildAccountRequiredNotice(
BuildContext context,
MotorSignalThemeColors colors,
) {
return Center(
child: Padding(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@ -115,12 +127,12 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF00E5FF).withValues(alpha: 0.1),
color: colors.cyberCyan.withValues(alpha: 0.1),
),
child: const Icon(
child: Icon(
Icons.groups_outlined,
size: 64,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
),
const SizedBox(height: 20),
@ -145,7 +157,7 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
const SizedBox(height: 24),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 24,
@ -172,6 +184,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
BuildContext context,
WidgetRef ref,
String currentUid,
ResponsiveSnapshot snapshot,
MotorSignalThemeColors colors,
) {
final ridesAsync = ref.watch(upcomingGroupRidesProvider);
@ -179,6 +193,7 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
data: (rides) {
if (rides.isEmpty) {
return _buildEmptyState(
colors: colors,
icon: Icons.map_outlined,
title: 'No Upcoming Group Rides',
message:
@ -188,22 +203,43 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
);
}
final isWide = snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
if (isWide) {
final crossAxisCount = snapshot.width >= 1100 ? 3 : 2;
return GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
mainAxisExtent: 185,
),
itemCount: rides.length,
itemBuilder: (context, index) {
final ride = rides[index];
return _buildRideCard(context, ride, currentUid, colors);
},
);
}
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: rides.length,
itemBuilder: (context, index) {
final ride = rides[index];
return _buildRideCard(context, ride, currentUid);
return _buildRideCard(context, ride, currentUid, colors);
},
);
},
loading: () => const Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)),
loading: () => Center(
child: CircularProgressIndicator(color: colors.cyberCyan),
),
error: (e, _) => Center(
child: Text(
'Error loading rides: $e',
style: const TextStyle(color: Colors.redAccent),
style: TextStyle(color: colors.raceRed),
),
),
);
@ -213,6 +249,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
BuildContext context,
WidgetRef ref,
String currentUid,
ResponsiveSnapshot snapshot,
MotorSignalThemeColors colors,
) {
final ridesAsync = ref.watch(upcomingGroupRidesProvider);
@ -224,6 +262,7 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
if (myRides.isEmpty) {
return _buildEmptyState(
colors: colors,
icon: Icons.sports_motorsports_outlined,
title: 'You Haven\'t Created Any Rides',
message:
@ -233,28 +272,50 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
);
}
final isWide = snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
if (isWide) {
final crossAxisCount = snapshot.width >= 1100 ? 3 : 2;
return GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
mainAxisExtent: 185,
),
itemCount: myRides.length,
itemBuilder: (context, index) {
final ride = myRides[index];
return _buildRideCard(context, ride, currentUid, colors);
},
);
}
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: myRides.length,
itemBuilder: (context, index) {
final ride = myRides[index];
return _buildRideCard(context, ride, currentUid);
return _buildRideCard(context, ride, currentUid, colors);
},
);
},
loading: () => const Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)),
loading: () => Center(
child: CircularProgressIndicator(color: colors.cyberCyan),
),
error: (e, _) => Center(
child: Text(
'Error: $e',
style: const TextStyle(color: Colors.redAccent),
style: TextStyle(color: colors.raceRed),
),
),
);
}
Widget _buildEmptyState({
required MotorSignalThemeColors colors,
required IconData icon,
required String title,
required String message,
@ -286,8 +347,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
const SizedBox(height: 20),
OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: const Color(0xFF00E5FF),
side: const BorderSide(color: Color(0xFF00E5FF)),
foregroundColor: colors.cyberCyan,
side: BorderSide(color: colors.cyberCyan),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
@ -305,18 +366,19 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
BuildContext context,
GroupRide ride,
String currentUid,
MotorSignalThemeColors colors,
) {
final isOrganizer = ride.organizerUid == currentUid;
return Card(
margin: const EdgeInsets.only(bottom: 12),
color: const Color(0xFF161922),
color: colors.surfaceContainerHigh,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(
color: isOrganizer
? const Color(0xFF00E5FF).withValues(alpha: 0.4)
: Colors.white12,
? colors.cyberCyan.withValues(alpha: 0.4)
: colors.outlineVariant,
),
),
child: InkWell(
@ -337,8 +399,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
),
decoration: BoxDecoration(
color: ride.isCanceled
? Colors.redAccent.withValues(alpha: 0.2)
: const Color(0xFF00E5FF).withValues(alpha: 0.15),
? colors.raceRed.withValues(alpha: 0.2)
: colors.cyberCyan.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(6),
),
child: Text(
@ -347,8 +409,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
fontSize: 10,
fontWeight: FontWeight.w900,
color: ride.isCanceled
? Colors.redAccent
: const Color(0xFF00E5FF),
? colors.raceRed
: colors.cyberCyan,
),
),
),
@ -360,15 +422,15 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.amber.withValues(alpha: 0.2),
color: colors.warningAmber.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(4),
),
child: const Text(
child: Text(
'ORGANIZER',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: Colors.amber,
color: colors.warningAmber,
),
),
),
@ -396,6 +458,8 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
const SizedBox(height: 10),
Text(
ride.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
@ -405,18 +469,21 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
const SizedBox(height: 6),
Row(
children: [
const Icon(
Icon(
Icons.schedule,
size: 14,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
const SizedBox(width: 6),
Text(
'Meet: ${_formatDateTime(ride.scheduledStartAt)} • KSU: ${_formatTime(ride.departureAt)}',
style: const TextStyle(
fontSize: 12,
color: Colors.white70,
fontWeight: FontWeight.w500,
Expanded(
child: Text(
'Meet: ${_formatDateTime(ride.scheduledStartAt)} • KSU: ${_formatTime(ride.departureAt)}',
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 12,
color: Colors.white70,
fontWeight: FontWeight.w500,
),
),
),
],
@ -446,10 +513,10 @@ class _GroupRidesHubScreenState extends ConsumerState<GroupRidesHubScreen>
const SizedBox(height: 4),
Row(
children: [
const Icon(
Icon(
Icons.flag_outlined,
size: 14,
color: Color(0xFFFFB300),
color: colors.warningAmber,
),
const SizedBox(width: 6),
Expanded(

View File

@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:geolocator/geolocator.dart';
import 'package:go_router/go_router.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart';
import '../../services/group_rides/group_ride_models.dart';
import '../../services/group_rides/group_ride_providers.dart';
@ -48,6 +50,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
@override
Widget build(BuildContext context) {
final colors = context.motorColors;
final rideAsync = ref.watch(groupRideStreamProvider(widget.rideId));
final participantsAsync = ref.watch(
groupRideParticipantsProvider(widget.rideId),
@ -68,9 +71,9 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
data: (ride) {
if (ride == null) {
return Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
backgroundColor: const Color(0xFF13151A),
backgroundColor: colors.surfaceContainerHigh,
title: const Text('LIVE GROUP RIDE'),
),
body: const Center(
@ -88,9 +91,9 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
// Check if ride was closed
if (ride.isCompleted || ride.isCanceled) {
return Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
backgroundColor: const Color(0xFF13151A),
backgroundColor: colors.surfaceContainerHigh,
title: Text(
ride.title.toUpperCase(),
style: const TextStyle(
@ -109,8 +112,8 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
Icon(
ride.isCompleted ? Icons.flag : Icons.cancel,
color: ride.isCompleted
? Colors.greenAccent
: Colors.redAccent,
? colors.launchGreen
: colors.raceRed,
size: 48,
),
const SizedBox(height: 16),
@ -128,7 +131,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
const SizedBox(height: 24),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
onPressed: () => context.pop(),
@ -202,7 +205,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
points: attachedRoute.previewPoints
.map((p) => AppLatLng(p.latitude, p.longitude))
.toList(),
color: const Color(0xFF00E5FF).withValues(alpha: 0.85),
color: colors.cyberCyan.withValues(alpha: 0.85),
width: 3.5,
),
);
@ -217,10 +220,11 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
currentUid: currentUid,
leadUid: leadParticipant?.userId,
attachedRoute: attachedRoute,
colors: colors,
);
return Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
appBar: _buildAppBar(
context: context,
ride: ride,
@ -229,137 +233,153 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
participants: acceptedParticipants,
presences: presences,
leadPresence: leadPresence,
colors: colors,
),
body: Stack(
children: [
// 1. Unified Map
Positioned.fill(
child: UnifiedMapView(
center: center,
zoom: _mapZoom,
markers: markers,
polylines: polylines,
onPositionChanged: (pos) {
_customMapCenter = pos;
},
),
),
body: ResponsiveLayout(
builder: (context, snapshot) {
final isShort = snapshot.height < 450;
final isLandscapeWide =
snapshot.isLandscape && snapshot.width >= 720;
// 2. Top Banners (Regroup, Master Privacy)
Positioned(
top: 8,
left: 8,
right: 8,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (regroupCaller != null)
_buildRegroupBanner(
context: context,
caller: regroupCaller,
participants: acceptedParticipants,
isLeadOrOrganizer:
isOrganizer ||
(leadParticipant != null &&
leadParticipant.userId == currentUid),
controller: broadcastController,
),
if (!broadcastState.isMasterAllowed)
_buildMasterPrivacyBanner(context, ref),
],
),
),
// 3. Quick Status Bar & Broadcast Floating Control
Positioned(
bottom: 12,
left: 8,
right: 8,
child: SafeArea(
top: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Quick Status Selector
_buildQuickStatusBar(
currentStatus: broadcastState.status,
isBroadcasting: broadcastState.isBroadcasting,
onStatusSelected: (s) =>
broadcastController.setStatus(s),
),
const SizedBox(height: 8),
// Bottom Control Strip (Opt-in toggle, Roster opener, Recenter)
_buildBottomControlStrip(
context: context,
ride: ride,
broadcastState: broadcastState,
broadcastController: broadcastController,
participants: acceptedParticipants,
presences: presences,
leadPresence: leadPresence,
currentUid: currentUid,
),
],
return Stack(
children: [
// 1. Unified Map
Positioned.fill(
child: UnifiedMapView(
center: center,
zoom: _mapZoom,
markers: markers,
polylines: polylines,
onPositionChanged: (pos) {
_customMapCenter = pos;
},
),
),
),
),
],
// 2. Top Banners (Regroup, Master Privacy)
Positioned(
top: 8,
left: 8,
right: isLandscapeWide ? snapshot.width * 0.35 : 8,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (regroupCaller != null)
_buildRegroupBanner(
context: context,
caller: regroupCaller,
participants: acceptedParticipants,
isLeadOrOrganizer:
isOrganizer ||
(leadParticipant != null &&
leadParticipant.userId ==
currentUid),
controller: broadcastController,
colors: colors,
),
if (!broadcastState.isMasterAllowed)
_buildMasterPrivacyBanner(
context, ref, colors),
],
),
),
// 3. Quick Status Bar & Broadcast Floating Control
Positioned(
bottom: isShort ? 6 : 12,
left: 8,
right: 8,
child: SafeArea(
top: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Quick Status Selector
_buildQuickStatusBar(
currentStatus: broadcastState.status,
isBroadcasting:
broadcastState.isBroadcasting,
onStatusSelected: (s) =>
broadcastController.setStatus(s),
colors: colors,
isShort: isShort,
),
SizedBox(height: isShort ? 6 : 8),
// Bottom Control Strip (Opt-in toggle, Roster opener, Recenter)
_buildBottomControlStrip(
context: context,
ride: ride,
broadcastState: broadcastState,
broadcastController: broadcastController,
participants: acceptedParticipants,
presences: presences,
leadPresence: leadPresence,
currentUid: currentUid,
colors: colors,
isShort: isShort,
),
],
),
),
),
],
);
},
),
);
},
loading: () => const Scaffold(
backgroundColor: Color(0xFF0D0E11),
loading: () => Scaffold(
backgroundColor: colors.surfaceContainer,
body: Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)),
child: CircularProgressIndicator(color: colors.cyberCyan),
),
),
error: (e, _) => Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
body: Center(
child: Text(
'Error loading live presence: $e',
style: const TextStyle(color: Colors.redAccent),
style: TextStyle(color: colors.raceRed),
),
),
),
);
},
loading: () => const Scaffold(
backgroundColor: Color(0xFF0D0E11),
loading: () => Scaffold(
backgroundColor: colors.surfaceContainer,
body: Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)),
child: CircularProgressIndicator(color: colors.cyberCyan),
),
),
error: (e, _) => Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
body: Center(
child: Text(
'Error loading participants: $e',
style: const TextStyle(color: Colors.redAccent),
style: TextStyle(color: colors.raceRed),
),
),
),
);
},
loading: () => const Scaffold(
backgroundColor: Color(0xFF0D0E11),
loading: () => Scaffold(
backgroundColor: colors.surfaceContainer,
body: Center(
child: CircularProgressIndicator(color: Color(0xFF00E5FF)),
child: CircularProgressIndicator(color: colors.cyberCyan),
),
),
error: (e, _) => Scaffold(
backgroundColor: const Color(0xFF0D0E11),
backgroundColor: colors.surfaceContainer,
body: Center(
child: Text(
'Error loading ride: $e',
style: const TextStyle(color: Colors.redAccent),
style: TextStyle(color: colors.raceRed),
),
),
),
);
}
PreferredSizeWidget _buildAppBar({
required BuildContext context,
required GroupRide ride,
@ -368,9 +388,10 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required List<GroupRideParticipant> participants,
required List<LiveGroupPresence> presences,
required LiveGroupPresence? leadPresence,
required MotorSignalThemeColors colors,
}) {
return AppBar(
backgroundColor: const Color(0xFF13151A),
backgroundColor: colors.surfaceContainerHigh,
elevation: 3,
leading: IconButton(
icon: const Icon(Icons.arrow_back),
@ -399,8 +420,8 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
decoration: BoxDecoration(
color: ride.status == GroupRideStatus.underway
? const Color(0xFF00E5FF).withValues(alpha: 0.2)
: Colors.amber.withValues(alpha: 0.2),
? colors.cyberCyan.withValues(alpha: 0.2)
: colors.warningAmber.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(4),
),
child: Text(
@ -409,8 +430,8 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
fontSize: 9,
fontWeight: FontWeight.w900,
color: ride.status == GroupRideStatus.underway
? const Color(0xFF00E5FF)
: Colors.amber,
? colors.cyberCyan
: colors.warningAmber,
),
),
),
@ -425,15 +446,15 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
actions: [
if (isOrganizer)
IconButton(
icon: const Icon(
icon: Icon(
Icons.stop_circle_outlined,
color: Colors.redAccent,
color: colors.raceRed,
),
tooltip: 'End Ride',
onPressed: () => _confirmEndRide(context, ride, currentUid),
onPressed: () => _confirmEndRide(context, ride, currentUid, colors),
),
IconButton(
icon: const Icon(Icons.people_outline, color: Color(0xFF00E5FF)),
icon: Icon(Icons.people_outline, color: colors.cyberCyan),
tooltip: 'Roster',
onPressed: () => _showRosterSheet(
context: context,
@ -441,6 +462,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
presences: presences,
leadPresence: leadPresence,
currentUid: currentUid,
colors: colors,
),
),
],
@ -453,6 +475,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required List<GroupRideParticipant> participants,
required bool isLeadOrOrganizer,
required LiveBroadcastController controller,
required MotorSignalThemeColors colors,
}) {
String callerName = caller.userId;
try {
@ -466,7 +489,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.amber.withValues(alpha: 0.92),
color: colors.warningAmber.withValues(alpha: 0.92),
borderRadius: BorderRadius.circular(8),
boxShadow: const [
BoxShadow(color: Colors.black45, blurRadius: 4, offset: Offset(0, 2)),
@ -536,18 +559,19 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
);
}
Widget _buildMasterPrivacyBanner(BuildContext context, WidgetRef ref) {
Widget _buildMasterPrivacyBanner(
BuildContext context, WidgetRef ref, MotorSignalThemeColors colors) {
return Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: const Color(0xFF1E222D),
color: colors.surfaceContainerHigh,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.amber.withValues(alpha: 0.6)),
border: Border.all(color: colors.warningAmber.withValues(alpha: 0.6)),
),
child: Row(
children: [
const Icon(Icons.lock_outline, color: Colors.amber, size: 18),
Icon(Icons.lock_outline, color: colors.warningAmber, size: 18),
const SizedBox(width: 8),
const Expanded(
child: Text(
@ -558,7 +582,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
const SizedBox(width: 6),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.amber,
backgroundColor: colors.warningAmber,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
minimumSize: Size.zero,
@ -581,6 +605,8 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required LivePresenceStatus currentStatus,
required bool isBroadcasting,
required ValueChanged<LivePresenceStatus> onStatusSelected,
required MotorSignalThemeColors colors,
bool isShort = false,
}) {
final statuses = [
(LivePresenceStatus.riding, 'RIDING', Icons.two_wheeler),
@ -592,11 +618,11 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
];
return Container(
height: 46,
height: isShort ? 40 : 46,
decoration: BoxDecoration(
color: const Color(0xFF161922).withValues(alpha: 0.95),
color: colors.surfaceContainerHigh.withValues(alpha: 0.95),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.white12),
border: Border.all(color: colors.outlineVariant),
boxShadow: const [
BoxShadow(color: Colors.black54, blurRadius: 6, offset: Offset(0, 2)),
],
@ -610,13 +636,13 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
final (status, label, icon) = statuses[index];
final isSelected = currentStatus == status;
Color activeColor = const Color(0xFF00E5FF);
Color activeColor = colors.cyberCyan;
if (status == LivePresenceStatus.needFuel)
activeColor = Colors.orangeAccent;
if (status == LivePresenceStatus.regrouping)
activeColor = Colors.amber;
activeColor = colors.warningAmber;
if (status == LivePresenceStatus.arrived)
activeColor = Colors.greenAccent;
activeColor = colors.launchGreen;
return InkWell(
borderRadius: BorderRadius.circular(6),
@ -670,13 +696,15 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required List<LiveGroupPresence> presences,
required LiveGroupPresence? leadPresence,
required String? currentUid,
required MotorSignalThemeColors colors,
bool isShort = false,
}) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: isShort ? 4 : 6),
decoration: BoxDecoration(
color: const Color(0xFF161922).withValues(alpha: 0.95),
color: colors.surfaceContainerHigh.withValues(alpha: 0.95),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.white12),
border: Border.all(color: colors.outlineVariant),
boxShadow: const [
BoxShadow(color: Colors.black54, blurRadius: 6, offset: Offset(0, 2)),
],
@ -692,7 +720,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
? Icons.radar
: Icons.location_off,
color: broadcastState.isBroadcasting
? const Color(0xFF00E5FF)
? colors.cyberCyan
: Colors.white38,
size: 20,
),
@ -714,8 +742,8 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
style: TextStyle(
color: broadcastState.isBroadcasting
? (broadcastState.isPaused
? Colors.amber
: const Color(0xFF00E5FF))
? colors.warningAmber
: colors.cyberCyan)
: Colors.white60,
fontWeight: FontWeight.bold,
fontSize: 11,
@ -743,7 +771,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
key: const ValueKey('live_ride_broadcast_switch'),
value: broadcastState.isOptedIn,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
activeThumbColor: const Color(0xFF00E5FF),
activeThumbColor: colors.cyberCyan,
onChanged: (val) => broadcastController.setOptIn(val),
),
],
@ -752,18 +780,18 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
const SizedBox(width: 8),
// Recenter Map Button
// Recenter Map Button (min 48x48 tap target)
IconButton(
key: const ValueKey('live_ride_recenter_button'),
style: IconButton.styleFrom(
backgroundColor: Colors.white10,
backgroundColor: colors.surfaceContainer,
padding: const EdgeInsets.all(8),
minimumSize: const Size(36, 36),
minimumSize: const Size(48, 48),
),
icon: const Icon(
Icons.my_location,
color: Colors.white70,
size: 18,
size: 20,
),
tooltip: 'Center on Me',
onPressed: () {
@ -792,13 +820,13 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
ElevatedButton.icon(
key: const ValueKey('live_ride_roster_button'),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF).withValues(alpha: 0.15),
foregroundColor: const Color(0xFF00E5FF),
side: const BorderSide(color: Color(0xFF00E5FF)),
backgroundColor: colors.cyberCyan.withValues(alpha: 0.15),
foregroundColor: colors.cyberCyan,
side: BorderSide(color: colors.cyberCyan),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
minimumSize: Size.zero,
minimumSize: const Size(48, 48),
),
icon: const Icon(Icons.format_list_bulleted, size: 15),
icon: const Icon(Icons.format_list_bulleted, size: 16),
label: Text(
'${participants.length}',
style: const TextStyle(fontSize: 11, fontWeight: FontWeight.bold),
@ -809,6 +837,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
presences: presences,
leadPresence: leadPresence,
currentUid: currentUid,
colors: colors,
),
),
],
@ -822,10 +851,11 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required List<LiveGroupPresence> presences,
required LiveGroupPresence? leadPresence,
required String? currentUid,
required MotorSignalThemeColors colors,
}) {
showModalBottomSheet(
context: context,
backgroundColor: const Color(0xFF161922),
backgroundColor: colors.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
@ -835,12 +865,12 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
children: [
Row(
children: [
const Icon(Icons.people, color: Color(0xFF00E5FF), size: 18),
Icon(Icons.people, color: colors.cyberCyan, size: 18),
const SizedBox(width: 8),
const Text(
Text(
'LIVE RIDER ROSTER',
style: TextStyle(
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
fontWeight: FontWeight.bold,
letterSpacing: 1.0,
fontSize: 13,
@ -853,13 +883,14 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
),
],
),
const Divider(height: 20, color: Colors.white12),
Divider(height: 20, color: colors.outlineVariant),
for (final p in participants) ...[
_buildRosterItem(
participant: p,
presence: _findPresence(presences, p.userId),
leadPresence: leadPresence,
isCaller: p.userId == currentUid,
colors: colors,
onCenter: (pos) {
Navigator.pop(ctx);
setState(() {
@ -881,6 +912,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required LiveGroupPresence? presence,
required LiveGroupPresence? leadPresence,
required bool isCaller,
required MotorSignalThemeColors colors,
required ValueChanged<AppLatLng> onCenter,
}) {
// Freshness
@ -910,12 +942,12 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
return Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFF1B1E28),
color: colors.surfaceContainer,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isCaller
? const Color(0xFF00E5FF).withValues(alpha: 0.5)
: Colors.white10,
? colors.cyberCyan.withValues(alpha: 0.5)
: colors.outlineVariant,
),
),
child: Row(
@ -925,7 +957,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
children: [
CircleAvatar(
radius: 18,
backgroundColor: Colors.white10,
backgroundColor: colors.surfaceContainerHigh,
child: Text(
participant.riderDisplayName.isNotEmpty
? participant.riderDisplayName[0].toUpperCase()
@ -937,12 +969,12 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
),
),
if (isLive)
const Positioned(
Positioned(
bottom: 0,
right: 0,
child: CircleAvatar(
radius: 5,
backgroundColor: Colors.greenAccent,
backgroundColor: colors.launchGreen,
),
),
],
@ -965,7 +997,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: isCaller
? const Color(0xFF00E5FF)
? colors.cyberCyan
: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 13,
@ -982,6 +1014,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
decoration: BoxDecoration(
color: _roleColor(
participant.role,
colors,
).withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(3),
),
@ -990,7 +1023,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: _roleColor(participant.role),
color: _roleColor(participant.role, colors),
),
),
),
@ -1007,7 +1040,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: _statusColor(presence.status),
color: _statusColor(presence.status, colors),
),
)
else
@ -1041,18 +1074,18 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
isLive ? 'LIVE' : '${presence.secondsAgo}s ago',
style: TextStyle(
color: isLive
? Colors.greenAccent
: (isRecent ? Colors.amber : Colors.white38),
? colors.launchGreen
: (isRecent ? colors.warningAmber : Colors.white38),
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 6),
IconButton(
icon: const Icon(
icon: Icon(
Icons.gps_fixed,
size: 16,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
padding: EdgeInsets.zero,
@ -1070,12 +1103,12 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
);
}
Color _roleColor(GroupRideRole role) {
Color _roleColor(GroupRideRole role, MotorSignalThemeColors colors) {
switch (role) {
case GroupRideRole.organizer:
return const Color(0xFF00E5FF);
return colors.cyberCyan;
case GroupRideRole.lead:
return const Color(0xFFFFD700);
return colors.warningAmber;
case GroupRideRole.sweep:
return Colors.orangeAccent;
case GroupRideRole.participant:
@ -1083,20 +1116,20 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
}
}
Color _statusColor(LivePresenceStatus status) {
Color _statusColor(LivePresenceStatus status, MotorSignalThemeColors colors) {
switch (status) {
case LivePresenceStatus.riding:
return Colors.greenAccent;
return colors.launchGreen;
case LivePresenceStatus.stopped:
return Colors.white70;
case LivePresenceStatus.needFuel:
return Colors.orangeAccent;
case LivePresenceStatus.regrouping:
return Colors.amber;
return colors.warningAmber;
case LivePresenceStatus.delayed:
return Colors.redAccent;
return colors.raceRed;
case LivePresenceStatus.arrived:
return const Color(0xFF00E5FF);
return colors.cyberCyan;
case LivePresenceStatus.offline:
return Colors.white38;
}
@ -1136,6 +1169,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
required String? currentUid,
required String? leadUid,
MotorSignalRoute? attachedRoute,
required MotorSignalThemeColors colors,
}) {
final markers = <AppMapMarker>[];
@ -1152,10 +1186,10 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
: 'Meetup',
iconWidget: Container(
padding: const EdgeInsets.all(6),
decoration: const BoxDecoration(
color: Colors.greenAccent,
decoration: BoxDecoration(
color: colors.launchGreen,
shape: BoxShape.circle,
boxShadow: [
boxShadow: const [
BoxShadow(
color: Colors.black45,
blurRadius: 4,
@ -1186,10 +1220,10 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
label: stop.displayName,
iconWidget: Container(
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
color: Color(0xFF00E5FF),
decoration: BoxDecoration(
color: colors.cyberCyan,
shape: BoxShape.circle,
boxShadow: [
boxShadow: const [
BoxShadow(
color: Colors.black45,
blurRadius: 4,
@ -1276,10 +1310,10 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
: 'Destination',
iconWidget: Container(
padding: const EdgeInsets.all(6),
decoration: const BoxDecoration(
color: Colors.redAccent,
decoration: BoxDecoration(
color: colors.raceRed,
shape: BoxShape.circle,
boxShadow: [
boxShadow: const [
BoxShadow(
color: Colors.black45,
blurRadius: 4,
@ -1310,11 +1344,11 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
final isCaller = presence.userId == currentUid;
// Color scheme
Color markerColor = const Color(0xFF00E5FF);
if (isLead) markerColor = const Color(0xFFFFD700); // Gold for lead
Color markerColor = colors.cyberCyan;
if (isLead) markerColor = colors.warningAmber; // Gold for lead
if (isSweep) markerColor = Colors.orangeAccent; // Orange for sweep
if (presence.status == LivePresenceStatus.regrouping)
markerColor = Colors.amber;
markerColor = colors.warningAmber;
if (presence.status == LivePresenceStatus.needFuel)
markerColor = Colors.deepOrangeAccent;
@ -1367,12 +1401,13 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
BuildContext context,
GroupRide ride,
String? currentUid,
MotorSignalThemeColors colors,
) {
if (currentUid == null) return;
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: const Color(0xFF161922),
backgroundColor: colors.surfaceContainerHigh,
title: const Text(
'End Group Ride?',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
@ -1391,7 +1426,7 @@ class _LiveGroupRideScreenState extends ConsumerState<LiveGroupRideScreen>
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent,
backgroundColor: colors.raceRed,
foregroundColor: Colors.white,
),
onPressed: () async {

View File

@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/theme/evolution_theme_config.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/responsive/viewport_size.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart';
import '../../services/social/rider_profile_models.dart';
import '../../services/social/social_providers.dart';
@ -273,23 +275,18 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
@override
Widget build(BuildContext context) {
final colors = context.motorColors;
final authState = ref.watch(authNotifierProvider);
final isAuthed = authState.isAuthenticated;
final themeMode = ref.watch(dashboardThemeModeProvider);
final isEvolution = themeMode == DashboardThemeMode.evolution;
final bgColor = isEvolution
? Colors.black
: Theme.of(context).scaffoldBackgroundColor;
final titleFont = isEvolution ? 'Sora' : null;
if (!isAuthed) {
return Scaffold(
backgroundColor: bgColor,
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
title: Text(
backgroundColor: colors.surfaceContainerHigh,
title: const Text(
'Friends & Riders',
style: TextStyle(fontFamily: titleFont, fontWeight: FontWeight.w800),
style: TextStyle(fontWeight: FontWeight.w800),
),
),
body: Center(
@ -298,16 +295,15 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icon(
Icons.group_outlined,
size: 64,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
const SizedBox(height: 16),
Text(
const Text(
'MOTORCLOUD ACCOUNT REQUIRED',
style: TextStyle(
fontFamily: titleFont,
fontWeight: FontWeight.w800,
fontSize: 16,
color: Colors.white,
@ -323,7 +319,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
const SizedBox(height: 24),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
icon: const Icon(Icons.login),
@ -345,11 +341,12 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
final friendsCount = friendsAsync.value?.length ?? 0;
return Scaffold(
backgroundColor: bgColor,
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
title: Text(
backgroundColor: colors.surfaceContainerHigh,
title: const Text(
'Friends & Riders',
style: TextStyle(fontFamily: titleFont, fontWeight: FontWeight.w800),
style: TextStyle(fontWeight: FontWeight.w800),
),
actions: [
IconButton(
@ -360,8 +357,10 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
],
bottom: TabBar(
controller: _tabController,
indicatorColor: const Color(0xFF00E5FF),
labelColor: const Color(0xFF00E5FF),
isScrollable: true,
tabAlignment: TabAlignment.start,
indicatorColor: colors.cyberCyan,
labelColor: colors.cyberCyan,
unselectedLabelColor: Colors.white60,
tabs: [
Tab(text: 'FRIENDS ($friendsCount)'),
@ -378,7 +377,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
vertical: 2,
),
decoration: BoxDecoration(
color: Colors.amberAccent,
color: colors.warningAmber,
borderRadius: BorderRadius.circular(10),
),
child: Text(
@ -403,8 +402,15 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
children: [
// TAB 1: FRIENDS LIST
friendsAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, _) => Center(child: Text('Error: $err')),
loading: () => Center(
child: CircularProgressIndicator(color: colors.cyberCyan),
),
error: (err, _) => Center(
child: Text(
'Error: $err',
style: TextStyle(color: colors.raceRed),
),
),
data: (friends) {
if (friends.isEmpty) {
return Center(
@ -437,7 +443,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
const SizedBox(height: 16),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
icon: const Icon(Icons.search),
@ -450,67 +456,112 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
);
}
return ListView.separated(
padding: const EdgeInsets.all(16.0),
itemCount: friends.length,
separatorBuilder: (context, index) =>
const Divider(color: Colors.white10),
itemBuilder: (context, index) {
final friend = friends[index];
return ListTile(
contentPadding: EdgeInsets.zero,
leading: AvatarBadge(
avatarPreset: friend.avatarPreset,
photoUrl: friend.avatarUrl,
displayName: friend.displayName,
radius: 24,
),
title: Text(
friend.displayName,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
return ResponsiveLayout(
builder: (context, snapshot) {
final isWide = snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
if (isWide) {
final crossAxisCount = snapshot.width >= 1100 ? 3 : 2;
return GridView.builder(
padding: const EdgeInsets.all(20),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
mainAxisExtent: 88,
),
),
subtitle: Text(
friend.displayHandle,
style: const TextStyle(
color: Color(0xFF00E5FF),
fontSize: 12,
),
),
trailing: PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white60),
onSelected: (val) {
if (val == 'remove') {
_removeFriend(friend);
} else if (val == 'block') {
_blockRider(friend.uid, friend.handle, friend.displayName);
}
itemCount: friends.length,
itemBuilder: (context, index) {
final friend = friends[index];
return Card(
color: colors.surfaceContainerHigh,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 14,
vertical: 8,
),
child: Row(
children: [
AvatarBadge(
avatarPreset: friend.avatarPreset,
photoUrl: friend.avatarUrl,
displayName: friend.displayName,
radius: 24,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
friend.displayName,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
Text(
friend.displayHandle,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: colors.cyberCyan,
fontSize: 12,
),
),
],
),
),
_buildFriendMenu(friend, colors),
],
),
),
);
},
itemBuilder: (context) => [
const PopupMenuItem(
value: 'remove',
child: Row(
children: [
Icon(Icons.person_remove_outlined, size: 18),
SizedBox(width: 8),
Text('Remove Friend'),
],
);
}
return ListView.separated(
padding: const EdgeInsets.all(16.0),
itemCount: friends.length,
separatorBuilder: (context, index) =>
Divider(color: colors.outlineVariant),
itemBuilder: (context, index) {
final friend = friends[index];
return ListTile(
contentPadding: EdgeInsets.zero,
leading: AvatarBadge(
avatarPreset: friend.avatarPreset,
photoUrl: friend.avatarUrl,
displayName: friend.displayName,
radius: 24,
),
title: Text(
friend.displayName,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
const PopupMenuItem(
value: 'block',
child: Row(
children: [
Icon(Icons.block, size: 18, color: Colors.redAccent),
SizedBox(width: 8),
Text('Block Rider', style: TextStyle(color: Colors.redAccent)),
],
subtitle: Text(
friend.displayHandle,
style: TextStyle(
color: colors.cyberCyan,
fontSize: 12,
),
),
],
),
trailing: _buildFriendMenu(friend, colors),
);
},
);
},
);
@ -522,10 +573,10 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
padding: const EdgeInsets.all(16.0),
children: [
// Incoming Section
const Text(
Text(
'INCOMING REQUESTS',
style: TextStyle(
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
fontSize: 12,
fontWeight: FontWeight.w800,
letterSpacing: 0.8,
@ -533,13 +584,16 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
const SizedBox(height: 8),
incomingAsync.when(
loading: () => const Center(
loading: () => Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: CircularProgressIndicator(),
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(color: colors.cyberCyan),
),
),
error: (err, _) => Text('Error: $err'),
error: (err, _) => Text(
'Error: $err',
style: TextStyle(color: colors.raceRed),
),
data: (requests) {
if (requests.isEmpty) {
return const Padding(
@ -554,8 +608,12 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
return Column(
children: requests.map((req) {
return Card(
color: Colors.white.withValues(alpha: 0.05),
color: colors.surfaceContainerHigh,
margin: const EdgeInsets.only(bottom: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
@ -580,8 +638,8 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
Text(
'@${req.senderHandle}',
style: const TextStyle(
color: Color(0xFF00E5FF),
style: TextStyle(
color: colors.cyberCyan,
fontSize: 11,
),
),
@ -589,17 +647,17 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
),
IconButton(
icon: const Icon(
icon: Icon(
Icons.check_circle_outline,
color: Colors.greenAccent,
color: colors.launchGreen,
),
tooltip: 'Accept',
onPressed: () => _acceptFriendRequest(req),
),
IconButton(
icon: const Icon(
icon: Icon(
Icons.cancel_outlined,
color: Colors.redAccent,
color: colors.raceRed,
),
tooltip: 'Decline',
onPressed: () => _declineFriendRequest(req),
@ -627,7 +685,10 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
const SizedBox(height: 8),
outgoingAsync.when(
loading: () => const SizedBox.shrink(),
error: (err, _) => Text('Error: $err'),
error: (err, _) => Text(
'Error: $err',
style: TextStyle(color: colors.raceRed),
),
data: (requests) {
if (requests.isEmpty) {
return const Padding(
@ -685,10 +746,13 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
Expanded(
child: TextField(
controller: _searchController,
decoration: const InputDecoration(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Enter @handle (e.g. speed_demon)',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(),
prefixIcon: const Icon(Icons.search),
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainerHigh,
),
onSubmitted: (_) => _performSearch(),
),
@ -696,7 +760,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
const SizedBox(width: 8),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(
horizontal: 16,
@ -735,7 +799,11 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
if (_searchResult != null) ...[
Card(
color: Colors.white.withValues(alpha: 0.06),
color: colors.surfaceContainerHigh,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
@ -764,8 +832,8 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
Text(
_searchResult!.displayHandle,
style: const TextStyle(
color: Color(0xFF00E5FF),
style: TextStyle(
color: colors.cyberCyan,
fontWeight: FontWeight.w700,
fontSize: 13,
),
@ -796,7 +864,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
),
],
const Divider(height: 24, color: Colors.white12),
Divider(height: 24, color: colors.outlineVariant),
// Relationship Action
Row(
@ -813,32 +881,36 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
)
else if (_searchResult!.relationship ==
FriendshipStatus.friend)
const Chip(
avatar: Icon(Icons.check, size: 16),
label: Text('Friends'),
backgroundColor: Color(0xFF003840),
Chip(
avatar: Icon(Icons.check,
size: 16, color: colors.cyberCyan),
label: const Text('Friends'),
backgroundColor:
colors.cyberCyan.withValues(alpha: 0.15),
labelStyle: TextStyle(
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
)
else if (_searchResult!.relationship ==
FriendshipStatus.requestOutgoing)
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white12,
backgroundColor:
colors.surfaceContainerHighest,
foregroundColor: Colors.white,
),
icon: const Icon(Icons.cancel_outlined, size: 16),
icon: const Icon(Icons.cancel_outlined,
size: 16),
label: const Text('CANCEL REQUEST'),
onPressed: () =>
_cancelFriendRequest(_searchResult!.uid),
)
else if (_searchResult!.relationship ==
FriendshipStatus.requestIncoming)
const Text(
Text(
'Check Requests tab to respond',
style: TextStyle(
color: Colors.amberAccent,
color: colors.warningAmber,
fontSize: 12,
),
)
@ -853,7 +925,7 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
else
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
icon: const Icon(Icons.person_add, size: 16),
@ -891,4 +963,41 @@ class _FriendsScreenState extends ConsumerState<FriendsScreen>
),
);
}
Widget _buildFriendMenu(
FriendSummary friend, MotorSignalThemeColors colors) {
return PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white60),
color: colors.surfaceContainerHighest,
onSelected: (val) {
if (val == 'remove') {
_removeFriend(friend);
} else if (val == 'block') {
_blockRider(friend.uid, friend.handle, friend.displayName);
}
},
itemBuilder: (context) => [
const PopupMenuItem(
value: 'remove',
child: Row(
children: [
Icon(Icons.person_remove_outlined, size: 18),
SizedBox(width: 8),
Text('Remove Friend'),
],
),
),
PopupMenuItem(
value: 'block',
child: Row(
children: [
Icon(Icons.block, size: 18, color: colors.raceRed),
const SizedBox(width: 8),
Text('Block Rider', style: TextStyle(color: colors.raceRed)),
],
),
),
],
);
}
}

View File

@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/theme/evolution_theme_config.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/responsive/viewport_size.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/auth/auth_providers.dart';
import '../../services/social/handle_validator.dart';
import '../../services/social/rider_profile_models.dart';
@ -75,11 +77,14 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
.toLowerCase()
.replaceAll(RegExp(r'[^a-z0-9_]'), '_');
if (candidate.length >= 3) {
_handleController.text = candidate.substring(0, candidate.length.clamp(0, 18));
_handleController.text =
candidate.substring(0, candidate.length.clamp(0, 18));
}
} else if (user.email != null) {
final candidate = user.email!.split('@').first.replaceAll(RegExp(r'[^a-z0-9_]'), '_');
_handleController.text = candidate.substring(0, candidate.length.clamp(0, 18));
final candidate =
user.email!.split('@').first.replaceAll(RegExp(r'[^a-z0-9_]'), '_');
_handleController.text =
candidate.substring(0, candidate.length.clamp(0, 18));
}
}
_selectedAvatarPreset = PresetAvatar.availablePresets.first.id;
@ -142,21 +147,18 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
@override
Widget build(BuildContext context) {
final colors = context.motorColors;
final authState = ref.watch(authNotifierProvider);
final isAuthed = authState.isAuthenticated;
final themeMode = ref.watch(dashboardThemeModeProvider);
final isEvolution = themeMode == DashboardThemeMode.evolution;
final bgColor = isEvolution ? Colors.black : Theme.of(context).scaffoldBackgroundColor;
final titleFont = isEvolution ? 'Sora' : null;
if (!isAuthed) {
return Scaffold(
backgroundColor: bgColor,
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
title: Text(
backgroundColor: colors.surfaceContainerHigh,
title: const Text(
'Rider Profile',
style: TextStyle(fontFamily: titleFont, fontWeight: FontWeight.w800),
style: TextStyle(fontWeight: FontWeight.w800),
),
),
body: Center(
@ -165,16 +167,15 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icon(
Icons.person_pin_circle_outlined,
size: 64,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
const SizedBox(height: 16),
Text(
const Text(
'MOTORCLOUD ACCOUNT REQUIRED',
style: TextStyle(
fontFamily: titleFont,
fontWeight: FontWeight.w800,
fontSize: 16,
color: Colors.white,
@ -190,7 +191,7 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
const SizedBox(height: 24),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
),
icon: const Icon(Icons.login),
@ -207,11 +208,12 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
final profileAsync = ref.watch(myRiderProfileProvider);
return Scaffold(
backgroundColor: bgColor,
backgroundColor: colors.surfaceContainer,
appBar: AppBar(
title: Text(
backgroundColor: colors.surfaceContainerHigh,
title: const Text(
'Rider Profile',
style: TextStyle(fontFamily: titleFont, fontWeight: FontWeight.w800),
style: TextStyle(fontWeight: FontWeight.w800),
),
actions: [
IconButton(
@ -222,8 +224,15 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
],
),
body: profileAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, _) => Center(child: Text('Error loading profile: $err')),
loading: () => Center(
child: CircularProgressIndicator(color: colors.cyberCyan),
),
error: (err, _) => Center(
child: Text(
'Error loading profile: $err',
style: TextStyle(color: colors.raceRed),
),
),
data: (profile) {
if (profile != null) {
_populateFromProfile(profile);
@ -231,228 +240,439 @@ class _RiderProfileScreenState extends ConsumerState<RiderProfileScreen> {
_populateDefaults();
}
return SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 100.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Header avatar preview
Center(
child: Column(
children: [
AvatarBadge(
avatarPreset: _selectedAvatarPreset,
displayName: _displayNameController.text.isEmpty
? 'Rider'
: _displayNameController.text,
radius: 40,
),
const SizedBox(height: 8),
Text(
_handleController.text.isNotEmpty
? '@${_handleController.text}'
: '@handle',
style: const TextStyle(
color: Color(0xFF00E5FF),
fontWeight: FontWeight.w800,
fontSize: 14,
fontFamily: 'Inter',
),
),
],
),
),
const SizedBox(height: 20),
return ResponsiveLayout(
builder: (context, snapshot) {
final isWide = snapshot.sizeClass == WindowSizeClass.expanded ||
(snapshot.isLandscape && snapshot.width >= 720);
// Messages
if (_errorMessage != null) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.redAccent.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.redAccent),
),
child: Text(
_errorMessage!,
style: const TextStyle(color: Colors.redAccent, fontSize: 12),
),
),
const SizedBox(height: 16),
],
if (_successMessage != null) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.greenAccent.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.greenAccent),
),
child: Text(
_successMessage!,
style: const TextStyle(color: Colors.greenAccent, fontSize: 12),
),
),
const SizedBox(height: 16),
],
// Avatar preset selector
AvatarSelector(
selectedPresetId: _selectedAvatarPreset,
onSelected: (presetId) {
setState(() {
_selectedAvatarPreset = presetId;
});
},
),
const SizedBox(height: 24),
// Handle input
TextFormField(
controller: _handleController,
decoration: const InputDecoration(
labelText: 'Rider Handle',
hintText: 'e.g. canyon_runner',
prefixText: '@',
helperText: 'Unique, 3-20 characters, lowercase letters, numbers, and underscores',
border: OutlineInputBorder(),
),
onChanged: (_) => setState(() {}),
),
const SizedBox(height: 16),
// Display Name input
TextFormField(
controller: _displayNameController,
decoration: const InputDecoration(
labelText: 'Display Name',
hintText: 'e.g. Alex Rivera',
border: OutlineInputBorder(),
),
onChanged: (_) => setState(() {}),
),
const SizedBox(height: 16),
// Region input
TextFormField(
controller: _regionController,
decoration: const InputDecoration(
labelText: 'Riding Region (Optional)',
hintText: 'e.g. Blue Ridge Mountains, NC',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
// Bio input
TextFormField(
controller: _bioController,
maxLines: 3,
decoration: const InputDecoration(
labelText: 'Rider Bio (Optional)',
hintText: 'Tell fellow riders about what you ride and your riding style...',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 24),
// Privacy Settings Card
Card(
color: Colors.white.withValues(alpha: 0.05),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Row(
children: [
Icon(Icons.shield_outlined, color: Color(0xFF00E5FF), size: 18),
SizedBox(width: 8),
Text(
'PRIVACY CONTROLS',
style: TextStyle(
color: Color(0xFF00E5FF),
fontWeight: FontWeight.w800,
fontSize: 12,
letterSpacing: 0.8,
),
),
],
),
const SizedBox(height: 12),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Discoverable by Handle', style: TextStyle(fontSize: 14)),
subtitle: const Text(
'Allow other riders to find your profile by searching your @handle.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _isSearchableByHandle,
onChanged: (val) => setState(() => _isSearchableByHandle = val),
),
const Divider(color: Colors.white12),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Public Profile', style: TextStyle(fontSize: 14)),
subtitle: const Text(
'When off, non-friends only see your handle and avatar, hiding bio and region.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _isProfilePublic,
onChanged: (val) => setState(() => _isProfilePublic = val),
),
const Divider(color: Colors.white12),
SwitchListTile(
contentPadding: EdgeInsets.zero,
title: const Text('Allow Friend Requests', style: TextStyle(fontSize: 14)),
subtitle: const Text(
'Allow other riders to send you friend requests.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _allowFriendRequests,
onChanged: (val) => setState(() => _allowFriendRequests = val),
),
],
),
),
),
const SizedBox(height: 24),
// Save Button
SizedBox(
height: 48,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00E5FF),
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
onPressed: _isSaving ? null : _handleSave,
child: _isSaving
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.black,
),
)
: const Text(
'SAVE PROFILE',
style: TextStyle(fontWeight: FontWeight.w900, letterSpacing: 0.8),
),
),
),
],
),
),
if (isWide) {
return _buildWideProfile(context, colors);
}
return _buildCompactProfile(context, colors);
},
);
},
),
);
}
Widget _buildWideProfile(
BuildContext context, MotorSignalThemeColors colors) {
return Form(
key: _formKey,
child: SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: Column(
children: [
if (_errorMessage != null) _buildErrorMessage(colors),
if (_successMessage != null) _buildSuccessMessage(colors),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Left Column: Avatar & Handle Identity
Expanded(
flex: 5,
child: Card(
color: colors.surfaceContainerHigh,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Center(
child: Column(
children: [
AvatarBadge(
avatarPreset: _selectedAvatarPreset,
displayName:
_displayNameController.text.isEmpty
? 'Rider'
: _displayNameController.text,
radius: 44,
),
const SizedBox(height: 8),
Text(
_handleController.text.isNotEmpty
? '@${_handleController.text}'
: '@handle',
style: TextStyle(
color: colors.cyberCyan,
fontWeight: FontWeight.w800,
fontSize: 14,
),
),
],
),
),
const SizedBox(height: 16),
AvatarSelector(
selectedPresetId: _selectedAvatarPreset,
onSelected: (presetId) {
setState(() {
_selectedAvatarPreset = presetId;
});
},
),
const SizedBox(height: 20),
TextFormField(
controller: _handleController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Rider Handle',
hintText: 'e.g. canyon_runner',
prefixText: '@',
helperText:
'Unique, 3-20 chars: letters, numbers, underscores',
helperStyle: const TextStyle(
color: Colors.white38, fontSize: 11),
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainer,
),
onChanged: (_) => setState(() {}),
),
const SizedBox(height: 16),
TextFormField(
controller: _displayNameController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Display Name',
hintText: 'e.g. Alex Rivera',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainer,
),
onChanged: (_) => setState(() {}),
),
],
),
),
),
),
const SizedBox(width: 24),
// Right Column: Bio, Region & Privacy
Expanded(
flex: 6,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
color: colors.surfaceContainerHigh,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
controller: _regionController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Riding Region (Optional)',
hintText: 'e.g. Blue Ridge Mountains, NC',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainer,
),
),
const SizedBox(height: 16),
TextFormField(
controller: _bioController,
style: const TextStyle(color: Colors.white),
maxLines: 3,
decoration: InputDecoration(
labelText: 'Rider Bio (Optional)',
hintText:
'Tell fellow riders about your bike and riding style...',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainer,
),
),
],
),
),
),
const SizedBox(height: 20),
_buildPrivacyCard(colors),
const SizedBox(height: 24),
_buildSaveButton(colors),
],
),
),
],
),
],
),
),
);
}
Widget _buildCompactProfile(
BuildContext context, MotorSignalThemeColors colors) {
return Form(
key: _formKey,
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 48.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Header avatar preview
Center(
child: Column(
children: [
AvatarBadge(
avatarPreset: _selectedAvatarPreset,
displayName: _displayNameController.text.isEmpty
? 'Rider'
: _displayNameController.text,
radius: 40,
),
const SizedBox(height: 8),
Text(
_handleController.text.isNotEmpty
? '@${_handleController.text}'
: '@handle',
style: TextStyle(
color: colors.cyberCyan,
fontWeight: FontWeight.w800,
fontSize: 14,
),
),
],
),
),
const SizedBox(height: 20),
if (_errorMessage != null) _buildErrorMessage(colors),
if (_successMessage != null) _buildSuccessMessage(colors),
AvatarSelector(
selectedPresetId: _selectedAvatarPreset,
onSelected: (presetId) {
setState(() {
_selectedAvatarPreset = presetId;
});
},
),
const SizedBox(height: 24),
TextFormField(
controller: _handleController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Rider Handle',
hintText: 'e.g. canyon_runner',
prefixText: '@',
helperText: 'Unique, 3-20 characters: letters, numbers, underscores',
helperStyle:
const TextStyle(color: Colors.white38, fontSize: 11),
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainerHigh,
),
onChanged: (_) => setState(() {}),
),
const SizedBox(height: 16),
TextFormField(
controller: _displayNameController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Display Name',
hintText: 'e.g. Alex Rivera',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainerHigh,
),
onChanged: (_) => setState(() {}),
),
const SizedBox(height: 16),
TextFormField(
controller: _regionController,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Riding Region (Optional)',
hintText: 'e.g. Blue Ridge Mountains, NC',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainerHigh,
),
),
const SizedBox(height: 16),
TextFormField(
controller: _bioController,
style: const TextStyle(color: Colors.white),
maxLines: 3,
decoration: InputDecoration(
labelText: 'Rider Bio (Optional)',
hintText:
'Tell fellow riders about what you ride and your riding style...',
border: const OutlineInputBorder(),
filled: true,
fillColor: colors.surfaceContainerHigh,
),
),
const SizedBox(height: 24),
_buildPrivacyCard(colors),
const SizedBox(height: 24),
_buildSaveButton(colors),
],
),
),
);
}
Widget _buildErrorMessage(MotorSignalThemeColors colors) {
return Container(
margin: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colors.raceRed.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: colors.raceRed),
),
child: Text(
_errorMessage!,
style: TextStyle(color: colors.raceRed, fontSize: 12),
),
);
}
Widget _buildSuccessMessage(MotorSignalThemeColors colors) {
return Container(
margin: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: colors.launchGreen.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: colors.launchGreen),
),
child: Text(
_successMessage!,
style: TextStyle(color: colors.launchGreen, fontSize: 12),
),
);
}
Widget _buildPrivacyCard(MotorSignalThemeColors colors) {
return Card(
color: colors.surfaceContainerHigh,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.shield_outlined,
color: colors.cyberCyan, size: 18),
const SizedBox(width: 8),
Text(
'PRIVACY CONTROLS',
style: TextStyle(
color: colors.cyberCyan,
fontWeight: FontWeight.w800,
fontSize: 12,
letterSpacing: 0.8,
),
),
],
),
const SizedBox(height: 12),
SwitchListTile(
contentPadding: EdgeInsets.zero,
activeThumbColor: colors.cyberCyan,
title: const Text('Discoverable by Handle',
style: TextStyle(fontSize: 14)),
subtitle: const Text(
'Allow other riders to find your profile by searching your @handle.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _isSearchableByHandle,
onChanged: (val) =>
setState(() => _isSearchableByHandle = val),
),
Divider(color: colors.outlineVariant),
SwitchListTile(
contentPadding: EdgeInsets.zero,
activeThumbColor: colors.cyberCyan,
title: const Text('Public Profile',
style: TextStyle(fontSize: 14)),
subtitle: const Text(
'When off, non-friends only see your handle and avatar, hiding bio and region.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _isProfilePublic,
onChanged: (val) =>
setState(() => _isProfilePublic = val),
),
Divider(color: colors.outlineVariant),
SwitchListTile(
contentPadding: EdgeInsets.zero,
activeThumbColor: colors.cyberCyan,
title: const Text('Allow Friend Requests',
style: TextStyle(fontSize: 14)),
subtitle: const Text(
'Allow other riders to send you friend requests.',
style: TextStyle(fontSize: 11, color: Colors.white60),
),
value: _allowFriendRequests,
onChanged: (val) =>
setState(() => _allowFriendRequests = val),
),
],
),
),
);
}
Widget _buildSaveButton(MotorSignalThemeColors colors) {
return SizedBox(
height: 48,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
onPressed: _isSaving ? null : _handleSave,
child: _isSaving
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.black,
),
)
: const Text(
'SAVE PROFILE',
style:
TextStyle(fontWeight: FontWeight.w900, letterSpacing: 0.8),
),
),
);
}
}

View File

@ -68,7 +68,7 @@ class AvatarBadge extends StatelessWidget {
padding: const EdgeInsets.all(3),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: const Color(0xFF00E5FF), width: 2),
border: Border.all(color: Theme.of(context).colorScheme.primary, width: 2),
),
child: inner,
);

View File

@ -0,0 +1,539 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:motorcycle_dash/core/theme/theme.dart';
import 'package:motorcycle_dash/features/group_rides/group_rides_hub_screen.dart';
import 'package:motorcycle_dash/features/group_rides/create_group_ride_screen.dart';
import 'package:motorcycle_dash/features/group_rides/group_ride_detail_screen.dart';
import 'package:motorcycle_dash/features/group_rides/live_group_ride_screen.dart';
import 'package:motorcycle_dash/features/social/rider_profile_screen.dart';
import 'package:motorcycle_dash/features/social/friends_screen.dart';
import 'package:motorcycle_dash/services/auth/auth_providers.dart';
import 'package:motorcycle_dash/services/auth/auth_service.dart';
import 'package:motorcycle_dash/services/auth/auth_state.dart';
import 'package:motorcycle_dash/services/auth/auth_user.dart';
import 'package:motorcycle_dash/services/group_rides/group_ride_models.dart';
import 'package:motorcycle_dash/services/group_rides/group_ride_providers.dart';
import 'package:motorcycle_dash/services/group_rides/live_broadcast_controller.dart';
import 'package:motorcycle_dash/services/social/rider_profile_models.dart';
import 'package:motorcycle_dash/services/social/social_providers.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:motorcycle_dash/features/records/records_service.dart';
class _FakeAuth implements AuthService {
final _states = StreamController<AuthState>.broadcast();
AuthUser? user;
_FakeAuth({this.user});
@override
Stream<AuthState> get authStateChanges => _states.stream;
@override
AuthState get currentState => user == null
? const AuthState.unauthenticated(isFirebaseConfigured: true)
: (user!.isAnonymous
? AuthState.anonymous(user!, isFirebaseConfigured: true)
: AuthState.authenticated(user!, isFirebaseConfigured: true));
@override
AuthUser? get currentUser => user;
@override
bool get isConfigured => true;
@override
bool get isEmailVerified => true;
@override
Future<void> deleteCurrentUser() async {}
@override
void dispose() => _states.close();
@override
Future<String?> getIdToken([bool forceRefresh = false]) async => 'token';
@override
Future<void> reauthenticate({String? password}) async {}
@override
Future<void> reloadCurrentUser() async {}
@override
Future<void> sendEmailVerification() async {}
@override
Future<void> sendPasswordResetEmail(String email) async {}
@override
Future<void> signInAnonymously() async {}
@override
Future<void> signInWithEmailAndPassword(String email, String password) async {}
@override
Future<void> createUserWithEmailAndPassword(String email, String password,
{String? displayName}) async {}
@override
Future<void> signInWithGoogle() async {}
@override
Future<void> signOut() async {}
}
class _FakeLiveBroadcastController extends StateNotifier<LiveBroadcastState>
implements LiveBroadcastController {
_FakeLiveBroadcastController(super.initialState);
@override
dynamic noSuchMethod(Invocation invocation) => super.noSuchMethod(invocation);
@override
Future<void> setOptIn(bool optIn) async {}
@override
Future<void> setStatus(LivePresenceStatus status) async {}
@override
Future<void> triggerRegroup() async {}
@override
Future<void> clearRegroup() async {}
@override
void updateAppLifecycle(AppLifecycleState state) {}
}
void main() {
TestWidgetsFlutterBinding.ensureInitialized();
late SharedPreferences prefs;
setUp(() async {
SharedPreferences.setMockInitialValues({});
prefs = await SharedPreferences.getInstance();
});
const testUser = AuthUser(
uid: 'uid_lead',
email: 'rider@motorsignal.app',
displayName: 'Canyon Lead',
isAnonymous: false,
);
final testProfile = RiderProfile(
uid: 'uid_lead',
handle: 'canyon_lead',
displayName: 'Canyon Lead',
bio: 'Twisty roads and track days',
region: 'Blue Ridge, NC',
avatarPreset: 'preset_neon_cyan',
privacySettings: const ProfilePrivacySettings(
isSearchableByHandle: true,
isProfilePublic: true,
allowFriendRequests: true,
),
createdAt: DateTime(2026, 1, 1),
updatedAt: DateTime(2026, 1, 1),
);
final now = DateTime(2026, 9, 1, 12, 0);
final testRide = GroupRide(
id: 'ride_101',
organizerUid: 'uid_lead',
organizerHandle: 'canyon_lead',
organizerDisplayName: 'Canyon Lead',
title: 'Blue Ridge Twisties Run',
description: 'Scenic group ride through Blue Ridge twisties.',
scheduledStartAt: DateTime(2026, 10, 15, 9, 0),
departureAt: DateTime(2026, 10, 15, 9, 30),
status: GroupRideStatus.underway,
joinPolicy: GroupRideJoinPolicy.open,
visibility: GroupRideVisibility.public,
meetingPoint: const GroupRideLocation(
latitude: 35.5951,
longitude: -82.5515,
displayName: 'Asheville Meetup',
locationType: GroupRideLocationType.meetup,
),
destination: const GroupRideLocation(
latitude: 35.7951,
longitude: -82.2515,
displayName: 'Mount Mitchell Peak',
locationType: GroupRideLocationType.destination,
),
participantCount: 3,
stops: const [
GroupRideLocation(
latitude: 35.65,
longitude: -82.40,
displayName: 'Scenic Overlook Stop',
locationType: GroupRideLocationType.scenic,
),
],
createdAt: now,
updatedAt: now,
);
final List<GroupRideParticipant> testParticipants = [
GroupRideParticipant(
userId: 'uid_lead',
riderHandle: 'canyon_lead',
riderDisplayName: 'Canyon Lead',
role: GroupRideRole.lead,
status: ParticipantStatus.accepted,
createdAt: now,
updatedAt: now,
),
GroupRideParticipant(
userId: 'uid_sweep',
riderHandle: 'tail_gunner',
riderDisplayName: 'Tail Gunner',
role: GroupRideRole.sweep,
status: ParticipantStatus.accepted,
createdAt: now,
updatedAt: now,
),
GroupRideParticipant(
userId: 'uid_rider3',
riderHandle: 'moto_enthusiast',
riderDisplayName: 'Moto Enthusiast',
role: GroupRideRole.participant,
status: ParticipantStatus.accepted,
createdAt: now,
updatedAt: now,
),
];
final List<LiveGroupPresence> testPresences = [
LiveGroupPresence(
userId: 'uid_lead',
groupRideId: 'ride_101',
latitude: 35.5951,
longitude: -82.5515,
heading: 45.0,
speedMph: 45.0,
accuracyMeters: 5.0,
status: LivePresenceStatus.riding,
sharingEnabled: true,
updatedAt: now,
expiresAt: now.add(const Duration(seconds: 120)),
),
LiveGroupPresence(
userId: 'uid_sweep',
groupRideId: 'ride_101',
latitude: 35.5900,
longitude: -82.5500,
heading: 40.0,
speedMph: 42.0,
accuracyMeters: 5.0,
status: LivePresenceStatus.riding,
sharingEnabled: true,
updatedAt: now.subtract(const Duration(seconds: 8)),
expiresAt: now.add(const Duration(seconds: 112)),
),
];
final List<FriendSummary> testFriends = [
FriendSummary(
uid: 'uid_sweep',
handle: 'tail_gunner',
displayName: 'Tail Gunner',
avatarPreset: 'preset_amber_flame',
friendedAt: DateTime(2026, 8, 1),
),
FriendSummary(
uid: 'uid_rider3',
handle: 'moto_enthusiast',
displayName: 'Moto Enthusiast',
avatarPreset: 'preset_electric_green',
friendedAt: DateTime(2026, 8, 10),
),
];
final List<FriendRequest> testIncomingRequests = [
FriendRequest(
requestId: 'req_1',
senderUid: 'uid_guest',
senderHandle: 'speed_demon',
senderDisplayName: 'Speed Demon',
senderAvatarPreset: 'preset_hyper_purple',
receiverUid: 'uid_lead',
sentAt: DateTime(2026, 9, 4),
),
];
final viewports = <String, Size>{
'Compact Phone (320x640)': const Size(320, 640),
'Standard Phone (400x800)': const Size(400, 800),
'Tall Phone (412x915)': const Size(412, 915),
'Small Landscape (640x320)': const Size(640, 320),
'Short Moto Mount Landscape (780x360)': const Size(780, 360),
'Standard Landscape (800x360)': const Size(800, 360),
'Wide Landscape (840x390)': const Size(840, 390),
'Medium Tablet Portrait (768x1024)': const Size(768, 1024),
'Expanded Tablet Landscape (1024x768)': const Size(1024, 768),
};
group('GroupRidesHubScreen Responsive Viewport Matrix', () {
for (final entry in viewports.entries) {
testWidgets('Renders cleanly without overflow on ${entry.key}',
(tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
myRiderProfileProvider.overrideWith(
(ref) => Stream.value(testProfile),
),
upcomingGroupRidesProvider.overrideWith(
(ref) => Stream.value([testRide]),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const GroupRidesHubScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('GROUP RIDES'), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('CreateGroupRideScreen Responsive Matrix', () {
for (final entry in [
const MapEntry('Compact (400x800)', Size(400, 800)),
const MapEntry('Short Landscape (800x360)', Size(800, 360)),
const MapEntry('Expanded Tablet (1024x768)', Size(1024, 768)),
]) {
testWidgets('Renders cleanly on ${entry.key}', (tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
myRiderProfileProvider.overrideWith(
(ref) => Stream.value(testProfile),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const CreateGroupRideScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('CREATE GROUP RIDE'), findsOneWidget);
expect(find.text('1. RIDE DETAILS'), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('GroupRideDetailScreen Responsive Matrix', () {
for (final entry in [
const MapEntry('Compact (400x800)', Size(400, 800)),
const MapEntry('Short Landscape (800x360)', Size(800, 360)),
const MapEntry('Expanded Tablet (1024x768)', Size(1024, 768)),
]) {
testWidgets('Renders 2-column on wide and details cleanly on ${entry.key}',
(tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
groupRideStreamProvider('ride_101').overrideWith(
(ref) => Stream.value(testRide),
),
groupRideParticipantsProvider('ride_101').overrideWith(
(ref) => Stream.value(testParticipants),
),
groupRideLivePresenceProvider('ride_101').overrideWith(
(ref) => Stream.value(testPresences),
),
myRiderProfileProvider.overrideWith(
(ref) => Stream.value(testProfile),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const GroupRideDetailScreen(rideId: 'ride_101'),
),
),
);
await tester.pumpAndSettle();
expect(find.text('Blue Ridge Twisties Run'), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('LiveGroupRideScreen Responsive Matrix', () {
for (final entry in [
const MapEntry('Compact (400x800)', Size(400, 800)),
const MapEntry('Short Landscape (800x360)', Size(800, 360)),
const MapEntry('Expanded Tablet (1024x768)', Size(1024, 768)),
]) {
testWidgets('Renders map, status bar, and controls on ${entry.key}',
(tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
groupRideStreamProvider('ride_101').overrideWith(
(ref) => Stream.value(testRide),
),
groupRideParticipantsProvider('ride_101').overrideWith(
(ref) => Stream.value(testParticipants),
),
groupRideLivePresenceProvider('ride_101').overrideWith(
(ref) => Stream.value(testPresences),
),
liveBroadcastControllerProvider('ride_101').overrideWith(
(ref) => _FakeLiveBroadcastController(
const LiveBroadcastState(
isOptedIn: true,
isBroadcasting: true,
status: LivePresenceStatus.riding,
),
),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const LiveGroupRideScreen(rideId: 'ride_101'),
),
),
);
await tester.pumpAndSettle();
expect(find.byKey(const ValueKey('live_ride_broadcast_switch')),
findsOneWidget);
expect(find.byKey(const ValueKey('live_ride_recenter_button')),
findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('RiderProfileScreen & FriendsScreen Responsive Matrix', () {
for (final entry in [
const MapEntry('Compact (400x800)', Size(400, 800)),
const MapEntry('Wide (1024x768)', Size(1024, 768)),
]) {
testWidgets('RiderProfileScreen renders on ${entry.key}', (tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
myRiderProfileProvider.overrideWith(
(ref) => Stream.value(testProfile),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const RiderProfileScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('Rider Profile'), findsOneWidget);
expect(find.text('PRIVACY CONTROLS'), findsOneWidget);
expect(tester.takeException(), isNull);
});
testWidgets('FriendsScreen renders on ${entry.key}', (tester) async {
tester.view.physicalSize = entry.value;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.resetPhysicalSize);
final fakeAuth = _FakeAuth(user: testUser);
await tester.pumpWidget(
ProviderScope(
overrides: [
sharedPreferencesProvider.overrideWithValue(prefs),
authServiceProvider.overrideWithValue(fakeAuth),
currentUserProvider.overrideWithValue(testUser),
myRiderProfileProvider.overrideWith(
(ref) => Stream.value(testProfile),
),
myFriendsProvider.overrideWith(
(ref) => Stream.value(testFriends),
),
myIncomingRequestsProvider.overrideWith(
(ref) => Stream.value(testIncomingRequests),
),
myOutgoingRequestsProvider.overrideWith(
(ref) => Stream.value(<FriendRequest>[]),
),
],
child: MaterialApp(
theme: AppTheme.darkTheme,
home: const FriendsScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('Friends & Riders'), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
}