feat: redesign repost modal

ice-blockchain · Dec 31, 2024 · ca1e72d · ca1e72d
1 parent 1fc4ffd
commit ca1e72d
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 50 deletions.
diff --git a/...mponents/action_button/action_button.dart → ...al_action_button/modal_action_button.dart b/...mponents/action_button/action_button.dart → ...al_action_button/modal_action_button.dart
@@ -9,8 +9,8 @@ import 'package:ion/app/extensions/num.dart';
 import 'package:ion/app/extensions/theme_data.dart';
 import 'package:ion/generated/assets.gen.dart';
 
-class ActionButton extends StatelessWidget {
-  const ActionButton({
+class ModalActionButton extends StatelessWidget {
+  const ModalActionButton({
     required this.icon,
     required this.label,
     required this.onTap,

diff --git a/lib/app/features/feed/views/pages/repost_options_modal/repost_option_action.dart b/lib/app/features/feed/views/pages/repost_options_modal/repost_option_action.dart
@@ -0,0 +1,29 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import 'package:flutter/material.dart';
+import 'package:ion/app/extensions/extensions.dart';
+import 'package:ion/generated/assets.gen.dart';
+
+enum RepostOptionAction {
+  repost,
+  quotePost;
+
+  String getLabel(BuildContext context) => switch (this) {
+        RepostOptionAction.repost => context.i18n.feed_repost,
+        RepostOptionAction.quotePost => context.i18n.feed_quote_post,
+      };
+
+  Color getIconColor(BuildContext context) => switch (this) {
+        RepostOptionAction.repost => context.theme.appColors.primaryAccent,
+        RepostOptionAction.quotePost => context.theme.appColors.primaryAccent,
+      };
+
+  Widget getIcon(BuildContext context) {
+    final icon = switch (this) {
+      RepostOptionAction.repost => Assets.svg.iconFeedRepost,
+      RepostOptionAction.quotePost => Assets.svg.iconFeedQuote,
+    };
+
+    return icon.icon(color: getIconColor(context));
+  }
+}
diff --git a/lib/app/features/feed/views/pages/repost_options_modal/repost_options_modal.dart b/lib/app/features/feed/views/pages/repost_options_modal/repost_options_modal.dart
@@ -1,21 +1,24 @@
 // SPDX-License-Identifier: ice License 1.0
 
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:ion/app/components/button/button.dart';
+import 'package:ion/app/components/modal_action_button/modal_action_button.dart';
 import 'package:ion/app/components/progress_bar/ion_loading_indicator.dart';
+import 'package:ion/app/components/screen_offset/screen_bottom_offset.dart';
 import 'package:ion/app/components/screen_offset/screen_side_offset.dart';
+import 'package:ion/app/components/separated/separated_column.dart';
 import 'package:ion/app/extensions/extensions.dart';
 import 'package:ion/app/features/feed/providers/repost_notifier.c.dart';
+import 'package:ion/app/features/feed/views/pages/repost_options_modal/repost_option_action.dart';
 import 'package:ion/app/features/nostr/model/event_reference.c.dart';
 import 'package:ion/app/router/app_routes.c.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_app_bar.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_close_button.dart';
 import 'package:ion/app/router/components/sheet_content/sheet_content.dart';
-import 'package:ion/generated/assets.gen.dart';
 
-class RepostOptionsModal extends ConsumerWidget {
+class RepostOptionsModal extends HookConsumerWidget {
   const RepostOptionsModal({
     required this.eventReference,
     super.key,
@@ -26,6 +29,9 @@ class RepostOptionsModal extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     ref.displayErrors(repostNotifierProvider);
+
+    final selectedAction = useState<RepostOptionAction?>(null);
+
     final repostLoading = ref.watch(repostNotifierProvider).isLoading;
 
     return SheetContent(
@@ -36,47 +42,42 @@ class RepostOptionsModal extends ConsumerWidget {
             NavigationAppBar.modal(
               showBackButton: false,
               title: Text(context.i18n.feed_repost_type),
-              leading: NavigationCloseButton(onPressed: context.pop),
-            ),
-            SizedBox(height: 11.0.s),
-            ScreenSideOffset.small(
-              child: Button(
-                type: ButtonType.secondary,
-                mainAxisSize: MainAxisSize.max,
-                disabled: repostLoading,
-                onPressed: () async {
-                  await ref
-                      .read(repostNotifierProvider.notifier)
-                      .repost(eventReference: eventReference);
-                  if (!ref.read(repostNotifierProvider).hasError) {
-                    if (context.mounted) {
-                      context.pop();
-                    }
-                  }
-                },
-                leadingIcon: repostLoading
-                    ? const IONLoadingIndicator(type: IndicatorType.dark)
-                    : Assets.svg.iconFeedRepost.icon(size: 18.0.s),
-                leadingIconOffset: 12.0.s,
-                label: Text(context.i18n.feed_repost),
-              ),
+              actions: [NavigationCloseButton(onPressed: context.pop)],
             ),
-            SizedBox(height: 16.0.s),
+            SizedBox(height: 6.0.s),
             ScreenSideOffset.small(
-              child: Button(
-                type: ButtonType.secondary,
-                mainAxisSize: MainAxisSize.max,
-                onPressed: () {
-                  CreatePostRoute(quotedEvent: eventReference.toString()).pushReplacement(context);
-                },
-                leadingIcon: Assets.svg.iconFeedQuote.icon(size: 18.0.s),
-                leadingIconOffset: 12.0.s,
-                label: Text(
-                  context.i18n.feed_quote_post,
-                ),
+              child: SeparatedColumn(
+                separator: SizedBox(height: 9.0.s),
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  for (final option in RepostOptionAction.values)
+                    ModalActionButton(
+                      icon: (repostLoading && selectedAction.value == option)
+                          ? const IONLoadingIndicator(type: IndicatorType.dark)
+                          : option.getIcon(context),
+                      label: option.getLabel(context),
+                      onTap: () async {
+                        selectedAction.value = option;
+                        if (option == RepostOptionAction.repost) {
+                          await ref
+                              .read(repostNotifierProvider.notifier)
+                              .repost(eventReference: eventReference);
+                          if (!ref.read(repostNotifierProvider).hasError) {
+                            if (context.mounted) {
+                              context.pop();
+                            }
+                          }
+                        } else if (option == RepostOptionAction.quotePost) {
+                          CreatePostRoute(quotedEvent: eventReference.toString()).go(context);
+                        }
+                        selectedAction.value = null;
+                      },
+                    ),
+                ],
               ),
             ),
             SizedBox(height: 20.0.s),
+            ScreenBottomOffset(),
           ],
         ),
       ),

diff --git a/lib/app/features/settings/views/profile_settings_modal.dart b/lib/app/features/settings/views/profile_settings_modal.dart
@@ -2,13 +2,13 @@
 
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ion/app/components/modal_action_button/modal_action_button.dart';
 import 'package:ion/app/components/screen_offset/screen_bottom_offset.dart';
 import 'package:ion/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ion/app/components/separated/separated_column.dart';
 import 'package:ion/app/extensions/extensions.dart';
 import 'package:ion/app/features/core/model/language.dart';
 import 'package:ion/app/features/core/providers/app_locale_provider.c.dart';
-import 'package:ion/app/features/user/pages/switch_account_modal/components/action_button/action_button.dart';
 import 'package:ion/app/router/app_routes.c.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_app_bar.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_close_button.dart';
@@ -40,7 +40,7 @@ class ProfileSettingsModal extends ConsumerWidget {
               separator: SizedBox(height: 9.0.s),
               mainAxisSize: MainAxisSize.min,
               children: [
-                ActionButton(
+                ModalActionButton(
                   icon: Assets.svg.iconProfileUser.icon(
                     color: primaryColor,
                   ),
@@ -49,7 +49,7 @@ class ProfileSettingsModal extends ConsumerWidget {
                     ProfileEditRoute().go(context);
                   },
                 ),
-                ActionButton(
+                ModalActionButton(
                   icon: Assets.svg.iconSelectLanguage.icon(
                     color: primaryColor,
                   ),
@@ -62,7 +62,7 @@ class ProfileSettingsModal extends ConsumerWidget {
                     AppLanguagesRoute().push<void>(context);
                   },
                 ),
-                ActionButton(
+                ModalActionButton(
                   icon: Assets.svg.iconSelectLanguage.icon(
                     color: primaryColor,
                   ),

diff --git a/lib/app/features/settings/views/settings_modal.dart b/lib/app/features/settings/views/settings_modal.dart
@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ion/app/components/modal_action_button/modal_action_button.dart';
 import 'package:ion/app/components/screen_offset/screen_bottom_offset.dart';
 import 'package:ion/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ion/app/components/separated/separated_column.dart';
@@ -11,7 +12,6 @@ import 'package:ion/app/extensions/extensions.dart';
 import 'package:ion/app/features/auth/providers/auth_provider.c.dart';
 import 'package:ion/app/features/core/providers/app_info_provider.c.dart';
 import 'package:ion/app/features/settings/model/settings_action.dart';
-import 'package:ion/app/features/user/pages/switch_account_modal/components/action_button/action_button.dart';
 import 'package:ion/app/router/app_routes.c.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_app_bar.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_close_button.dart';
@@ -57,7 +57,7 @@ class SettingsModal extends ConsumerWidget {
               mainAxisSize: MainAxisSize.min,
               children: [
                 for (final option in SettingsAction.values)
-                  ActionButton(
+                  ModalActionButton(
                     icon: option.getIcon(context),
                     label: option.getLabel(context),
                     onTap: getOnPressed(option),

diff --git a/lib/app/features/user/pages/switch_account_modal/switch_account_modal.dart b/lib/app/features/user/pages/switch_account_modal/switch_account_modal.dart
@@ -3,12 +3,12 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ion/app/components/modal_action_button/modal_action_button.dart';
 import 'package:ion/app/components/screen_offset/screen_bottom_offset.dart';
 import 'package:ion/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ion/app/extensions/extensions.dart';
 import 'package:ion/app/features/auth/providers/auth_provider.c.dart';
 import 'package:ion/app/features/user/pages/switch_account_modal/components/accounts_list/accounts_list.dart';
-import 'package:ion/app/features/user/pages/switch_account_modal/components/action_button/action_button.dart';
 import 'package:ion/app/features/user/providers/user_metadata_provider.c.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_app_bar.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_close_button.dart';
@@ -36,15 +36,15 @@ class SwitchAccountModal extends ConsumerWidget {
                   NavigationCloseButton(onPressed: context.pop),
                 ],
               ),
-              ActionButton(
+              ModalActionButton(
                 icon: Assets.svg.iconChannelType.icon(color: context.theme.appColors.primaryAccent),
                 label: context.i18n.profile_create_new_account,
                 onTap: () {},
               ),
               SizedBox(height: 16.0.s),
               const AccountsList(),
               SizedBox(height: 16.0.s),
-              ActionButton(
+              ModalActionButton(
                 icon: Assets.svg.iconMenuLogout.icon(size: 24.0.s),
                 label: context.i18n.profile_log_out(
                   prefixUsername(username: userMetadataValue?.data.name, context: context),