frosty/lib/screens/channel/chat/details/chat_modes.dart
Tommy Chow 96bce87a0e add FrostyColors ThemeExtension, align hardcoded colors with M3 roles
Introduce FrostyColors ThemeExtension with 7 semantic color fields
(highlightedMessage, emoteOnly, followersOnly, slowMode, subOnly,
uniqueMode, overlayOnSurface) and brightness-aware light/dark variants.

Replace hardcoded colors across 15 files:
- Links use colorScheme.primary instead of Colors.blue
- Mentions use colorScheme.error instead of Colors.red
- First-time chatters share highlightedMessage (Twitch purple)
- Chat mode indicators use frostyColors fields
- Overlay text uses frostyColors.overlayOnSurface

Remove Provider<FrostyThemes> pattern from main.dart, channel.dart,
video_overlay.dart, and frosty_photo_view_dialog.dart.

Replace manual onSurface.withValues(alpha: 0.6) with M3's built-in
onSurfaceVariant for secondary text in section headers, chat modes,
alerts, loading indicators, and input hints. Fix double-muted
onSurfaceVariant.withValues(alpha: 0.6) in navigation icons and
notification dismiss button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 19:01:44 -08:00

183 lines
5.3 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:frosty/models/irc.dart';
import 'package:frosty/utils/context_extensions.dart';
class ChatModes extends StatelessWidget {
final ROOMSTATE roomState;
const ChatModes({super.key, required this.roomState});
String pluralize(String str, String count) => count == '1' ? str : '${str}s';
@override
Widget build(BuildContext context) {
return Observer(
builder: (context) {
final activeModes = <MapEntry<String, Widget>>[];
// Collect active modes with their labels for sorting
if (roomState.emoteOnly != '0') {
activeModes.add(
MapEntry(
'Emote only',
_buildModeChip(
context: context,
icon: Icons.emoji_emotions_outlined,
activeIcon: Icons.emoji_emotions_rounded,
label: 'Emote only',
activeLabel: 'Emote only',
isActive: true,
activeColor: context.frostyColors.emoteOnly,
),
),
);
}
if (roomState.followersOnly != '-1') {
activeModes.add(
MapEntry(
'Follower only',
_buildModeChip(
context: context,
icon: Icons.favorite_outline_rounded,
activeIcon: Icons.favorite_rounded,
label: 'Follower only',
activeLabel: 'Follower only',
isActive: true,
activeColor: context.frostyColors.followersOnly,
duration: _getFollowersDuration(),
),
),
);
}
if (roomState.slowMode != '0') {
activeModes.add(
MapEntry(
'Slow mode',
_buildModeChip(
context: context,
icon: Icons.hourglass_empty_rounded,
activeIcon: Icons.hourglass_top_rounded,
label: 'Slow mode',
activeLabel: 'Slow mode',
isActive: true,
activeColor: context.frostyColors.slowMode,
duration: _getSlowModeDuration(),
),
),
);
}
if (roomState.subMode != '0') {
activeModes.add(
MapEntry(
'Sub only',
_buildModeChip(
context: context,
icon: Icons.monetization_on_outlined,
activeIcon: Icons.monetization_on_rounded,
label: 'Sub only',
activeLabel: 'Sub only',
isActive: true,
activeColor: context.frostyColors.subOnly,
),
),
);
}
if (roomState.r9k != '0') {
activeModes.add(
MapEntry(
'Unique mode',
_buildModeChip(
context: context,
icon: Icons.quiz_outlined,
activeIcon: Icons.quiz_rounded,
label: 'Unique mode',
activeLabel: 'Unique mode',
isActive: true,
activeColor: context.frostyColors.uniqueMode,
),
),
);
}
// Sort alphabetically by label
activeModes.sort((a, b) => a.key.compareTo(b.key));
final activeChips = activeModes.map((entry) => entry.value).toList();
return Wrap(spacing: 8, runSpacing: -4, children: activeChips);
},
);
}
String? _getFollowersDuration() {
if (roomState.followersOnly == '0') {
return null; // No duration for immediate followers
}
final minutes = int.parse(roomState.followersOnly);
if (minutes >= 60) {
final hours = minutes ~/ 60;
final remainingMinutes = minutes % 60;
if (remainingMinutes == 0) {
return '${hours}h';
} else {
return '${hours}h ${remainingMinutes}m';
}
}
return '${minutes}m';
}
String _getSlowModeDuration() {
final seconds = int.parse(roomState.slowMode);
if (seconds >= 60) {
final minutes = seconds ~/ 60;
final remainingSeconds = seconds % 60;
if (remainingSeconds == 0) {
return '${minutes}m';
} else {
return '${minutes}m ${remainingSeconds}s';
}
}
return '${seconds}s';
}
Widget _buildModeChip({
required BuildContext context,
required IconData icon,
required IconData activeIcon,
required String label,
required String activeLabel,
required bool isActive,
required Color activeColor,
String? duration,
}) {
return Chip(
avatar: Icon(
isActive ? activeIcon : icon,
size: 16,
color: isActive ? activeColor : null,
),
label: duration != null
? Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(isActive ? activeLabel : label),
const SizedBox(width: 4),
Text(
duration,
style: TextStyle(
color: Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
),
],
)
: Text(isActive ? activeLabel : label),
side: BorderSide.none,
);
}
}