more practice mode updates

2025-12-17 13:38:54 -05:00 · 2025-12-17 13:38:54 -05:00 · 60b01425f4
commit 60b01425f4
parent 0dd76722f5
6 changed files with 75 additions and 51 deletions
--- a/lib/config/app_config.dart
+++ b/lib/config/app_config.dart
@ -35,7 +35,7 @@ abstract class AppConfig {
  static const double toolbarButtonsHeight = 50.0;
  static const double toolbarSpacing = 8.0;
  static const double toolbarIconSize = 24.0;
-  static const double readingAssistanceInputBarHeight = 140.0;
+  static const double readingAssistanceInputBarHeight = 175.0;
  static const double reactionsPickerHeight = 48.0;
  static const double chatInputRowOverlayPadding = 8.0;
  static const double selectModeInputBarHeight = 0;
--- a/lib/pangea/toolbar/layout/message_selection_positioner.dart
+++ b/lib/pangea/toolbar/layout/message_selection_positioner.dart
@ -14,6 +14,7 @@ import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pangea/common/utils/error_handler.dart';
 import 'package:fluffychat/pangea/events/event_wrappers/pangea_message_event.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
+import 'package:fluffychat/pangea/instructions/instructions_inline_tooltip.dart';
 import 'package:fluffychat/pangea/toolbar/layout/over_message_overlay.dart';
 import 'package:fluffychat/pangea/toolbar/layout/practice_mode_transition_animation.dart';
 import 'package:fluffychat/pangea/toolbar/layout/reading_assistance_mode_enum.dart';
@ -394,6 +395,28 @@ class MessageSelectionPositionerState extends State<MessageSelectionPositioner>
                  alignment:
                      ownMessage ? Alignment.centerRight : Alignment.centerLeft,
                  children: [
+                    Positioned(
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      child: ListenableBuilder(
+                        listenable: widget.overlayController.practiceController,
+                        builder: (context, _) {
+                          final instruction = widget.overlayController
+                              .practiceController.practiceMode.instruction;
+                          if (instruction != null) {
+                            return InstructionsInlineTooltip(
+                              instructionsEnum: widget.overlayController
+                                  .practiceController.practiceMode.instruction!,
+                              padding: const EdgeInsets.all(16.0),
+                              animate: false,
+                            );
+                          }
+
+                          return const SizedBox();
+                        },
+                      ),
+                    ),
                    ValueListenableBuilder(
                      valueListenable: _startedTransition,
                      builder: (context, started, __) {
--- a/lib/pangea/toolbar/message_practice/practice_match_card.dart
+++ b/lib/pangea/toolbar/message_practice/practice_match_card.dart
@ -7,7 +7,6 @@ import 'package:collection/collection.dart';

 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pangea/common/widgets/choice_animation.dart';
-import 'package:fluffychat/pangea/common/widgets/shimmer_background.dart';
 import 'package:fluffychat/pangea/practice_activities/activity_type_enum.dart';
 import 'package:fluffychat/pangea/practice_activities/practice_activity_model.dart';
 import 'package:fluffychat/pangea/practice_activities/practice_choice.dart';
@ -38,28 +37,20 @@ class MatchActivityCard extends StatelessWidget {
    switch (activityType) {
      case ActivityTypeEnum.emoji:
      case ActivityTypeEnum.wordMeaning:
-        return ShimmerBackground(
-          enabled: controller.selectedChoice == null &&
-              !currentActivity.practiceTarget.hasAnyCorrectChoices,
-          child: Padding(
-            padding: const EdgeInsets.all(8),
-            child: Text(
-              choice,
-              style: TextStyle(fontSize: fontSize),
-              textAlign: TextAlign.center,
-            ),
+        return Padding(
+          padding: const EdgeInsets.all(8),
+          child: Text(
+            choice,
+            style: TextStyle(fontSize: fontSize),
+            textAlign: TextAlign.center,
          ),
        );
      case ActivityTypeEnum.wordFocusListening:
-        return ShimmerBackground(
-          enabled: controller.selectedChoice == null &&
-              !currentActivity.practiceTarget.hasAnyCorrectChoices,
-          child: Padding(
-            padding: const EdgeInsets.all(8),
-            child: Icon(
-              Icons.volume_up,
-              size: fontSize,
-            ),
+        return Padding(
+          padding: const EdgeInsets.all(8),
+          child: Icon(
+            Icons.volume_up,
+            size: fontSize,
          ),
        );
      default:
@ -113,6 +104,8 @@ class MatchActivityCard extends StatelessWidget {
                          ? cf.choiceContent
                          : null,
                  controller: controller,
+                  shimmer: controller.selectedChoice == null &&
+                      !currentActivity.practiceTarget.hasAnyCorrectChoices,
                ),
              );
            },
--- a/lib/pangea/toolbar/message_practice/practice_match_item.dart
+++ b/lib/pangea/toolbar/message_practice/practice_match_item.dart
@ -5,6 +5,7 @@ import 'package:flutter/material.dart';

 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pangea/common/utils/error_handler.dart';
+import 'package:fluffychat/pangea/common/widgets/shimmer_background.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
 import 'package:fluffychat/pangea/practice_activities/practice_choice.dart';
 import 'package:fluffychat/pangea/text_to_speech/tts_controller.dart';
@ -19,6 +20,7 @@ class PracticeMatchItem extends StatefulWidget {
  final PracticeController controller;
  final bool? isCorrect;
  final bool isSelected;
+  final bool shimmer;

  const PracticeMatchItem({
    super.key,
@ -29,6 +31,7 @@ class PracticeMatchItem extends StatefulWidget {
    required this.isSelected,
    this.audioContent,
    required this.controller,
+    this.shimmer = false,
  });

  @override
@ -121,7 +124,6 @@ class PracticeMatchItemState extends State<PracticeMatchItem> {
      children: [
        Flexible(
          child: Container(
-            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: color(context).withAlpha((0.4 * 255).toInt()),
              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
@ -152,7 +154,10 @@ class PracticeMatchItemState extends State<PracticeMatchItem> {
        onHover: (isHovered) => setState(() => _isHovered = isHovered),
        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
        onTap: onTap,
-        child: content,
+        child: ShimmerBackground(
+          enabled: widget.shimmer,
+          child: content,
+        ),
      ),
    );
  }
--- a/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart
+++ b/lib/pangea/toolbar/message_practice/reading_assistance_input_bar.dart
@ -5,7 +5,6 @@ import 'package:material_symbols_icons/symbols.dart';
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
-import 'package:fluffychat/pangea/instructions/instructions_inline_tooltip.dart';
 import 'package:fluffychat/pangea/practice_activities/practice_target.dart';
 import 'package:fluffychat/pangea/toolbar/message_practice/message_practice_mode_enum.dart';
 import 'package:fluffychat/pangea/toolbar/message_practice/practice_activity_card.dart';
@ -67,15 +66,6 @@ class ReadingAssistanceInputBarState extends State<ReadingAssistanceInputBar> {
                ),
              ],
            ),
-            if (widget.controller.practiceMode.instruction != null)
-              InstructionsInlineTooltip(
-                instructionsEnum: widget.controller.practiceMode.instruction!,
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 16.0,
-                  vertical: 4.0,
-                ),
-                animate: false,
-              ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Material(
@ -151,10 +141,10 @@ class _ReadingAssistanceBarContent extends StatelessWidget {

        final target = controller.practiceSelection?.getTarget(activityType!);
        if (target == null || activityCompleted) {
-          return Text(
-            L10n.of(context).practiceActivityCompleted,
-            style: Theme.of(context).textTheme.bodyLarge,
-            textAlign: TextAlign.center,
+          return const Icon(
+            Symbols.fitness_center,
+            size: 60.0,
+            color: AppConfig.goldLight,
          );
        }

@ -169,10 +159,10 @@ class _ReadingAssistanceBarContent extends StatelessWidget {
          return const _AllDoneWidget();
        }
        if (activityCompleted) {
-          return Text(
-            L10n.of(context).practiceActivityCompleted,
-            style: Theme.of(context).textTheme.bodyLarge,
-            textAlign: TextAlign.center,
+          return const Icon(
+            Symbols.fitness_center,
+            size: 60.0,
+            color: AppConfig.goldLight,
          );
        }

--- a/lib/pangea/toolbar/message_practice/token_practice_button.dart
+++ b/lib/pangea/toolbar/message_practice/token_practice_button.dart
@ -8,6 +8,7 @@ import 'package:shimmer/shimmer.dart';

 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/pangea/common/widgets/shimmer_background.dart';
 import 'package:fluffychat/pangea/events/models/pangea_token_model.dart';
 import 'package:fluffychat/pangea/morphs/get_grammar_copy.dart';
 import 'package:fluffychat/pangea/morphs/morph_features_enum.dart';
@ -103,6 +104,8 @@ class TokenPracticeButton extends StatelessWidget {
                _activity!.morphFeature!,
              ),
            ),
+            shimmer: controller.selectedMorph == null &&
+                _activity?.hasAnyCorrectChoices == false,
          );
        } else {
          child = _StandardMatchButton(
@ -194,10 +197,12 @@ class _MorphMatchButton extends StatelessWidget {
  final Function()? onTap;
  final bool active;
  final Color textColor;
+  final bool shimmer;

  const _MorphMatchButton({
    required this.active,
    required this.textColor,
+    this.shimmer = false,
    this.onTap,
  });

@ -210,16 +215,24 @@ class _MorphMatchButton extends StatelessWidget {
          return InkWell(
            onTap: onTap,
            borderRadius: BorderRadius.circular(AppConfig.borderRadius - 4),
-            child: Opacity(
-              opacity: active ? 1.0 : 0.6,
-              child: AnimatedScale(
-                scale: hovered || active ? 1.25 : 1.0,
-                duration: FluffyThemes.animationDuration,
-                curve: FluffyThemes.animationCurve,
-                child: Icon(
-                  Symbols.toys_and_games,
-                  color: textColor,
-                  size: 24.0,
+            child: ShimmerBackground(
+              enabled: shimmer,
+              child: SizedBox(
+                width: 24.0,
+                child: Center(
+                  child: Opacity(
+                    opacity: active ? 1.0 : 0.6,
+                    child: AnimatedScale(
+                      scale: hovered || active ? 1.25 : 1.0,
+                      duration: FluffyThemes.animationDuration,
+                      curve: FluffyThemes.animationCurve,
+                      child: Icon(
+                        Symbols.toys_and_games,
+                        color: textColor,
+                        size: 24.0,
+                      ),
+                    ),
+                  ),
                ),
              ),
            ),