chore: add tooltip to describe vocab highlighting in activity dropdown menu (#4412)

lib/l10n/intl_en.arb

@@ -5304,5 +5304,6 @@
   "addCourse": "Add a course",
   "joinCourseWithCode": "Join course with code",
   "joinPublicCourse": "Join public course",
-  "vocabLevelsDesc": "This is where vocab words will go once you’ve leveled them up!"
+  "vocabLevelsDesc": "This is where vocab words will go once you’ve leveled them up!",
+  "highlightVocabTooltip": "Highlight target vocab words below by sending them or practicing with them in the chat"
 }

lib/pangea/activity_sessions/activity_session_chat/activity_stats_menu.dart

@@ -19,6 +19,8 @@ import 'package:fluffychat/pangea/common/utils/overlay.dart';
 import 'package:fluffychat/pangea/constructs/construct_identifier.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_text_model.dart';
 import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
+import 'package:fluffychat/pangea/instructions/instructions_enum.dart';
+import 'package:fluffychat/pangea/instructions/instructions_inline_tooltip.dart';
 import 'package:fluffychat/pangea/toolbar/widgets/word_zoom/word_zoom_widget.dart';
 import 'package:fluffychat/widgets/future_loading_dialog.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -175,6 +177,12 @@ class ActivityStatsMenuState extends State<ActivityStatsMenu> {
                               style: const TextStyle(fontSize: 12.0),
                             ),
                           ),
+                          InstructionsInlineTooltip(
+                            instructionsEnum: InstructionsEnum.highlightVocab,
+                            textStyle: FluffyThemes.isColumnMode(context)
+                                ? Theme.of(context).textTheme.titleMedium
+                                : Theme.of(context).textTheme.bodyLarge,
+                          ),
                           ActivitySessionDetailsRow(
                             icon: Symbols.dictionary,
                             iconSize: 16.0,

lib/pangea/instructions/instructions_enum.dart

@@ -26,6 +26,7 @@ enum InstructionsEnum {
   emptyChatWarning,
   activityStatsMenu,
   chatListTooltip,
+  highlightVocab,
 }
 
 extension InstructionsEnumExtension on InstructionsEnum {
@@ -51,6 +52,7 @@ extension InstructionsEnumExtension on InstructionsEnum {
       case InstructionsEnum.activityStatsMenu:
       case InstructionsEnum.chatListTooltip:
       case InstructionsEnum.activityAnalyticsList:
+      case InstructionsEnum.highlightVocab:
         ErrorHandler.logError(
           e: Exception("No title for this instruction"),
           m: 'InstructionsEnumExtension.title',
@@ -105,6 +107,8 @@ extension InstructionsEnumExtension on InstructionsEnum {
         return l10n.activityStatsButtonInstruction;
       case InstructionsEnum.chatListTooltip:
         return l10n.chatListTooltip;
+      case InstructionsEnum.highlightVocab:
+        return l10n.highlightVocabTooltip;
     }
   }
 

lib/pangea/instructions/instructions_inline_tooltip.dart

@@ -9,12 +9,14 @@ class InstructionsInlineTooltip extends StatelessWidget {
   final InstructionsEnum instructionsEnum;
   final bool animate;
   final EdgeInsets? padding;
+  final TextStyle? textStyle;
 
   const InstructionsInlineTooltip({
     super.key,
     required this.instructionsEnum,
     this.animate = true,
     this.padding,
+    this.textStyle,
   });
 
   @override
@@ -25,6 +27,7 @@ class InstructionsInlineTooltip extends StatelessWidget {
       onClose: () => instructionsEnum.setToggledOff(true),
       animate: animate,
       padding: padding,
+      textStyle: textStyle,
     );
   }
 }
@@ -37,6 +40,8 @@ class InlineTooltip extends StatefulWidget {
   final VoidCallback? onClose;
   final bool animate;
 
+  final TextStyle? textStyle;
+
   const InlineTooltip({
     super.key,
     required this.message,
@@ -44,6 +49,7 @@ class InlineTooltip extends StatefulWidget {
     this.onClose,
     this.animate = true,
     this.padding,
+    this.textStyle,
   });
 
   @override
@@ -138,9 +144,10 @@ class InlineTooltipState extends State<InlineTooltip>
                 child: Center(
                   child: Text(
                     widget.message,
-                    style: FluffyThemes.isColumnMode(context)
-                        ? Theme.of(context).textTheme.titleLarge
-                        : Theme.of(context).textTheme.bodyLarge,
+                    style: widget.textStyle ??
+                        (FluffyThemes.isColumnMode(context)
+                            ? Theme.of(context).textTheme.titleLarge
+                            : Theme.of(context).textTheme.bodyLarge),
                     textAlign: TextAlign.center,
                   ),
                 ),