2280 new chat page and activity planner refine (#2289)

* chore: show new room error on text field * chore: update button show colors of activity suggestion cards
2025-03-31 15:08:44 -04:00 · 2025-03-31 15:08:44 -04:00 · 9142d1f31d
commit 9142d1f31d
parent 8a84925452
9 changed files with 94 additions and 62 deletions
--- a/assets/l10n/intl_en.arb
+++ b/assets/l10n/intl_en.arb
@ -4833,7 +4833,7 @@
  "resetInstructionTooltipsTitle": "Reset instruction tooltips",
  "resetInstructionTooltipsDesc": "Click to show instruction tooltips like for a brand new user.",
  "selectForGrammar": "Select a grammar icon for activities and details.",
-  "newChatActivityTitle": "Add a fun activity",
+  "newChatActivityTitle": "Add a fun activity?",
  "newChatActivityDesc": "Choose one of the activities below to add to your chat or skip this step and create an activity later.",
  "exploreMore": "Explore more",
  "randomize": "Randomize",
--- a/lib/pages/new_group/new_group.dart
+++ b/lib/pages/new_group/new_group.dart
@ -41,6 +41,9 @@ class NewGroupController extends State<NewGroup> {
  Uint8List? selectedActivityImage;
  String? selectedActivityImageFilename;

+  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
+  final FocusNode focusNode = FocusNode();
+
  bool requiredCodeToJoin = false;
  // bool publicGroup = false;
  // Pangea#
@ -76,6 +79,10 @@ class NewGroupController extends State<NewGroup> {
      selectedActivity = activity;
      selectedActivityImage = image;
      selectedActivityImageFilename = imageFilename;
+      if (avatar == null) {
+        avatar = image;
+        avatarUrl = null;
+      }
    });
  }

@ -84,6 +91,13 @@ class NewGroupController extends State<NewGroup> {
    super.initState();
    nameController.addListener(() => setState(() {}));
  }
+
+  @override
+  void dispose() {
+    nameController.dispose();
+    focusNode.dispose();
+    super.dispose();
+  }
  // Pangea#

  void setGroupCanBeFound(bool b) => setState(() => groupCanBeFound = b);
@ -253,10 +267,14 @@ class NewGroupController extends State<NewGroup> {

    try {
      // #Pangea
-      // if (nameController.text.trim().isEmpty &&
-      //     createGroupType == CreateGroupType.space) {
-      if (nameController.text.trim().isEmpty) {
-        // Pangea#
+      if (!formKey.currentState!.validate()) {
+        focusNode.requestFocus();
+        return;
+      }
+      // Pangea#
+
+      if (nameController.text.trim().isEmpty &&
+          createGroupType == CreateGroupType.space) {
        setState(() => error = L10n.of(context).pleaseFillOut);
        return;
      }
--- a/lib/pages/new_group/new_group_view.dart
+++ b/lib/pages/new_group/new_group_view.dart
@ -5,7 +5,6 @@ import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/new_group/new_group.dart';
 import 'package:fluffychat/pangea/activity_suggestions/activity_suggestion_carousel.dart';
-import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/layouts/max_width_body.dart';

@ -16,10 +15,14 @@ class NewGroupView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
+    // #Pangea
+    // final theme = Theme.of(context);
+    // Pangea#

    final avatar = controller.avatar;
-    final error = controller.error;
+    // #Pangea
+    // final error = controller.error;
+    // Pangea#
    return Scaffold(
      appBar: AppBar(
        leading: Center(
@ -90,25 +93,36 @@ class NewGroupView extends StatelessWidget {
            const SizedBox(height: 32),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24.0),
-              child: TextField(
-                autofocus: true,
-                controller: controller.nameController,
-                autocorrect: false,
-                readOnly: controller.loading,
-                decoration: InputDecoration(
-                  prefixIcon: const Icon(Icons.people_outlined),
-                  labelText: controller.createGroupType == CreateGroupType.space
-                      ? L10n.of(context).spaceName
-                      // #Pangea
-                      // : L10n.of(context).groupName,
-                      : L10n.of(context).chatName,
+              // #Pangea
+              // child: TextField(
+              child: Form(
+                key: controller.formKey,
+                child: TextFormField(
+                  // Pangea#
+                  autofocus: true,
+                  controller: controller.nameController,
+                  autocorrect: false,
+                  readOnly: controller.loading,
+                  decoration: InputDecoration(
+                    prefixIcon: const Icon(Icons.people_outlined),
+                    labelText:
+                        controller.createGroupType == CreateGroupType.space
+                            ? L10n.of(context).spaceName
+                            // #Pangea
+                            // : L10n.of(context).groupName,
+                            : L10n.of(context).chatName,
+                    // Pangea#
+                  ),
+                  // #Pangea
+                  onFieldSubmitted: (value) {
+                    controller.loading ? null : controller.submitAction();
+                  },
+                  validator: (value) => value == null || value.isEmpty
+                      ? L10n.of(context).pleaseFillOut
+                      : null,
+                  focusNode: controller.focusNode,
                  // Pangea#
                ),
-                // #Pangea
-                onSubmitted: (value) {
-                  controller.loading ? null : controller.submitAction();
-                },
-                // Pangea#
              ),
            ),
            const SizedBox(height: 16),
@ -230,24 +244,26 @@ class NewGroupView extends StatelessWidget {
                ),
              ),
            ),
-            AnimatedSize(
-              duration: FluffyThemes.animationDuration,
-              curve: FluffyThemes.animationCurve,
-              child: error == null
-                  ? const SizedBox.shrink()
-                  : ListTile(
-                      leading: Icon(
-                        Icons.warning_outlined,
-                        color: theme.colorScheme.error,
-                      ),
-                      title: Text(
-                        error.toLocalizedString(context),
-                        style: TextStyle(
-                          color: theme.colorScheme.error,
-                        ),
-                      ),
-                    ),
-            ),
+            // #Pangea
+            // AnimatedSize(
+            //   duration: FluffyThemes.animationDuration,
+            //   curve: FluffyThemes.animationCurve,
+            //   child: error == null
+            //       ? const SizedBox.shrink()
+            //       : ListTile(
+            //           leading: Icon(
+            //             Icons.warning_outlined,
+            //             color: theme.colorScheme.error,
+            //           ),
+            //           title: Text(
+            //             error.toLocalizedString(context),
+            //             style: TextStyle(
+            //               color: theme.colorScheme.error,
+            //             ),
+            //           ),
+            //         ),
+            // ),
+            // Pangea#
          ],
        ),
      ),
--- a/lib/pangea/activity_suggestions/activity_suggestion_card.dart
+++ b/lib/pangea/activity_suggestions/activity_suggestion_card.dart
@ -46,7 +46,10 @@ class ActivitySuggestionCard extends StatelessWidget {
        depressed: selected || onPressed == null,
        onPressed: onPressed,
        borderRadius: BorderRadius.circular(24.0),
-        color: theme.colorScheme.primary,
+        color: theme.brightness == Brightness.dark
+            ? theme.colorScheme.primary
+            : theme.colorScheme.surfaceContainerHighest,
+        colorFactor: theme.brightness == Brightness.dark ? 0.6 : 0.2,
        child: Container(
          decoration: BoxDecoration(
            border: selected
--- a/lib/pangea/activity_suggestions/activity_suggestion_carousel.dart
+++ b/lib/pangea/activity_suggestions/activity_suggestion_carousel.dart
@ -302,18 +302,6 @@ class ActivitySuggestionCarouselState
                        );
                      }).toList(),
                    ),
-                    ElevatedButton(
-                      onPressed: widget.enabled ? _close : null,
-                      style: ElevatedButton.styleFrom(
-                        backgroundColor: theme.colorScheme.primaryContainer,
-                      ),
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: [
-                          Text(L10n.of(context).skip),
-                        ],
-                      ),
-                    ),
                  ],
                ),
              ),
--- a/lib/pangea/activity_suggestions/create_chat_card.dart
+++ b/lib/pangea/activity_suggestions/create_chat_card.dart
@ -28,7 +28,10 @@ class CreateChatCard extends StatelessWidget {
      child: PressableButton(
        onPressed: () => context.go('/rooms/newgroup'),
        borderRadius: BorderRadius.circular(24.0),
-        color: theme.colorScheme.primary,
+        color: theme.brightness == Brightness.dark
+            ? theme.colorScheme.primary
+            : theme.colorScheme.surfaceContainerHighest,
+        colorFactor: theme.brightness == Brightness.dark ? 0.6 : 0.2,
        child: Container(
          decoration: BoxDecoration(
            color: theme.colorScheme.surfaceContainer,
--- a/lib/pangea/activity_suggestions/make_activity_card.dart
+++ b/lib/pangea/activity_suggestions/make_activity_card.dart
@ -34,7 +34,10 @@ class MakeActivityCard extends StatelessWidget {
              : context.go('/rooms/${roomID!}/planner/generator');
        },
        borderRadius: BorderRadius.circular(24.0),
-        color: theme.colorScheme.primary,
+        color: theme.brightness == Brightness.dark
+            ? theme.colorScheme.primary
+            : theme.colorScheme.surfaceContainerHighest,
+        colorFactor: theme.brightness == Brightness.dark ? 0.6 : 0.2,
        child: Container(
          decoration: BoxDecoration(
            color: theme.colorScheme.surfaceContainer,
--- a/lib/pangea/common/widgets/pressable_button.dart
+++ b/lib/pangea/common/widgets/pressable_button.dart
@ -17,7 +17,7 @@ class PressableButton extends StatefulWidget {
  final Stream? triggerAnimation;
  final bool playSound;

-  final bool? isShadow;
+  final double colorFactor;

  const PressableButton({
    required this.borderRadius,
@ -27,8 +27,8 @@ class PressableButton extends StatefulWidget {
    this.buttonHeight = 4,
    this.depressed = false,
    this.triggerAnimation,
-    this.isShadow,
    this.playSound = false,
+    this.colorFactor = 0.3,
    super.key,
  });

@ -155,7 +155,9 @@ class PressableButtonState extends State<PressableButton>
                      Container(
                        decoration: BoxDecoration(
                          color: Color.alphaBlend(
-                            Colors.black.withAlpha(70),
+                            Colors.black.withAlpha(
+                              (255 * widget.colorFactor).round(),
+                            ),
                            widget.color,
                          ),
                          borderRadius: widget.borderRadius,
--- a/lib/pangea/login/widgets/full_width_button.dart
+++ b/lib/pangea/login/widgets/full_width_button.dart
@ -44,7 +44,6 @@ class FullWidthButtonState extends State<FullWidthButton> {
              onPressed: widget.onPressed,
              borderRadius: BorderRadius.circular(36),
              color: Theme.of(context).colorScheme.primary,
-              isShadow: true,
              child: Container(
                // internal padding
                padding: const EdgeInsets.symmetric(horizontal: 16),