Merge pull request #4828 from pangeachat/show-disabled-buttons

Show disabled toolbar buttons

lib/l10n/intl_en.arb

@@ -4996,6 +4996,7 @@
   "otherGender": "Other",
   "unselectedGender": "Select a gender option",
   "gender": "Gender",
+  "modeDisabled": "Learning tools are disabled for messages that aren't in your target language.",
   "courseParticipantTooltip": "This is everybody in this course. Click on any user’s avatar and “start conversation” to send a DM.",
   "chatParticipantTooltip": "This is everybody in this chat. Click on any user’s avatar and “start conversation” to send a DM.",
   "inOngoingActivity": "You have an ongoing activity!"

lib/pangea/toolbar/reading_assistance/select_mode_buttons.dart

@@ -210,6 +210,14 @@ class SelectModeButtonsState extends State<SelectModeButtons> {
     }
   }
 
+  Future<void> modeDisabled() async {
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: Text(L10n.of(context).modeDisabled),
+      ),
+    );
+  }
+
   Future<void> playAudio() async {
     final playerID = "${messageEvent.eventId}_button";
 
@@ -299,15 +307,17 @@ class SelectModeButtonsState extends State<SelectModeButtons> {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final modes = controller.readingAssistanceModes;
+    final allModes = controller.allModes;
     return Material(
       type: MaterialType.transparency,
       child: SizedBox(
         height: AppConfig.toolbarMenuHeight,
         child: Row(
           mainAxisSize: MainAxisSize.min,
-          children: List.generate(modes.length + 1, (index) {
-            if (index < modes.length) {
-              final mode = modes[index];
+          children: List.generate(allModes.length + 1, (index) {
+            if (index < allModes.length) {
+              final mode = allModes[index];
+              final enabled = modes.contains(mode);
               return Container(
                 width: 45.0,
                 alignment: Alignment.center,
@@ -322,29 +332,35 @@ class SelectModeButtonsState extends State<SelectModeButtons> {
                     ),
                     builder: (context, _) {
                       final selectedMode = controller.selectedMode.value;
-                      return PressableButton(
-                        borderRadius: BorderRadius.circular(20),
-                        depressed: mode == selectedMode,
-                        color: theme.colorScheme.primaryContainer,
-                        onPressed: () => updateMode(mode),
-                        playSound: mode != SelectMode.audio,
-                        colorFactor:
-                            theme.brightness == Brightness.light ? 0.55 : 0.3,
-                        child: AnimatedContainer(
-                          duration: FluffyThemes.animationDuration,
-                          height: buttonSize,
-                          width: buttonSize,
-                          decoration: BoxDecoration(
-                            color: theme.colorScheme.primaryContainer,
-                            shape: BoxShape.circle,
-                          ),
-                          child: _SelectModeButtonIcon(
-                            mode: mode,
-                            loading:
-                                controller.isLoading && mode == selectedMode,
-                            playing: mode == SelectMode.audio &&
-                                matrix?.audioPlayer?.playerState.playing ==
-                                    true,
+                      return Opacity(
+                        opacity: enabled ? 1.0 : 0.5,
+                        child: PressableButton(
+                          borderRadius: BorderRadius.circular(20),
+                          depressed: mode == selectedMode || !enabled,
+                          color: enabled
+                              ? theme.colorScheme.primaryContainer
+                              : theme.disabledColor,
+                          onPressed:
+                              enabled ? () => updateMode(mode) : modeDisabled,
+                          playSound: enabled && mode != SelectMode.audio,
+                          colorFactor:
+                              theme.brightness == Brightness.light ? 0.55 : 0.3,
+                          child: AnimatedContainer(
+                            duration: FluffyThemes.animationDuration,
+                            height: buttonSize,
+                            width: buttonSize,
+                            decoration: BoxDecoration(
+                              color: theme.colorScheme.primaryContainer,
+                              shape: BoxShape.circle,
+                            ),
+                            child: _SelectModeButtonIcon(
+                              mode: mode,
+                              loading:
+                                  controller.isLoading && mode == selectedMode,
+                              playing: mode == SelectMode.audio &&
+                                  matrix?.audioPlayer?.playerState.playing ==
+                                      true,
+                            ),
                           ),
                         ),
                       );

lib/pangea/toolbar/reading_assistance/select_mode_controller.dart

@@ -119,6 +119,19 @@ class SelectModeController {
 
   (PangeaAudioFile, File?)? get audioFile => _audioLoader.value;
 
+  List<SelectMode> get allModes {
+    final validTypes = {MessageTypes.Text, MessageTypes.Audio};
+    if (!messageEvent.event.status.isSent ||
+        messageEvent.event.type != EventTypes.Message ||
+        !validTypes.contains(messageEvent.event.messageType)) {
+      return [];
+    }
+
+    return messageEvent.event.messageType == MessageTypes.Text
+        ? _textModes
+        : _audioModes;
+  }
+
   List<SelectMode> get readingAssistanceModes {
     final validTypes = {MessageTypes.Text, MessageTypes.Audio};
     if (!messageEvent.event.status.isSent ||