TW-692: New design for settings screen

assets/l10n/intl_en.arb

@@ -1689,7 +1689,7 @@
         "type": "text",
         "placeholders": {}
     },
-    "search": "Search for people and channels",
+    "searchForPeopleAndChannels": "Search for people and channels",
     "@search": {
         "type": "text",
         "placeholders": {}
@@ -2647,7 +2647,6 @@
     "tapToAllowAccessToYourGallery": "Tap to allow access to your Gallery",
     "tapToAllowAccessToYourCamera": "You can enable camera access in the Settings app to make video calls in",
     "twake": "Twake",
-    "dismiss": "Dismiss",
     "permissionAccess": "Permission access",
     "allow": "Allow",
     "explainStoragePermission": "Twake need access to your storage to preview file",
@@ -2669,7 +2668,6 @@
         }
     },
     "keyboard": "Keyboard",
-    "tapToAllowAccessToYourGallery": "Tap to allow access to your Gallery",
     "changeChatAvatar": "Change the Chat avatar",
     "roomAvatarMaxFileSize": "The avatar size is too large",
     "@roomAvatarMaxFileSize": {},
@@ -2734,5 +2732,27 @@
     "unmuteThisMessage": "Unmute this message",
     "read": "Read",
     "unread": "Unread",
-    "unmute": "Unmute"
+    "unmute": "Unmute",
+    "privacyAndSecurity" : "Privacy & Security",
+    "notificationAndSounds": "Notification & Sounds",
+    "appLanguage": "App Language",
+    "chatFolders": "Chat Folders",
+    "settingsChatSubtitle" :  "Appearance, themes, wallpaper, chat history.",
+    "settingsPrivacyAndSecuritySubtitle": "Block contacts, disappearing messages.",
+    "settingsNotificationAndSoundsSubtitle": "Custom how you get notifications from Twake such as previewing messages, sounds, time,...",
+    "settingsChatFoldersSubtitle": "Create and manage folders for different groups of chats and quickly switch between them.",
+    "settingsAppLanguageSubtitle": "English (phone’s language).",
+    "settingsDevicesSubtitle": "Control your sign in and sign out on any device.",
+    "settingsHelpSubtitle": "Help center, contact us, privacy policy.",
+    "displayName": "Display Name",
+    "bio": "Bio (optional)",
+    "matrixId": "Matrix ID",
+    "email": "Email",
+    "company": "Company",
+    "basicInfo": "BASIC INFO",
+    "editProfileDescriptions": "Update your profile with a new name, picture and a short introduction.",
+    "workIdentitiesInfo": "WORK IDENTITIES INFO",
+    "editWorkIdentitiesDescriptions": "Edit your work identity settings such as Matrix ID, email or company name.",
+    "copiedMatrixIdToClipboard": "Copied Matrix ID to clipboard.",
+    "changeProfilePhoto": "Change profile photo"
 }

docs/adr/0009-Instructions-for-naming-twake-events.md

@@ -0,0 +1,73 @@
+# 7. Instructions for naming twake events
+
+Date: 2023-10-03
+
+## Status
+
+Accepted
+
+## Docs
+
+- [Spec](https://spec.matrix.org/v1.6/#events)
+
+## Context
+
+- All data exchanged through Matrix is represented as an “event”. In addition, we have local support events.
+- We can use local events to handle logic and behavior by injecting events into a defined stream.
+
+## Decision
+
+How to name events
+- Below are the naming rules for events.
+- App.twake is the name of the application.
+- Inapp is event use for local support.
+- Profile is the name of the feature.
+- Avatar is the name of the event.
+ ex: 'app.twake.inapp.profile.avatar'   
+
+How to use events.
+- Send event
+
+```
+class TwakeEventDispatcher {
+  static final TwakeEventDispatcher _twakeEventDispatcher =
+      TwakeEventDispatcher._instance();
+
+  factory TwakeEventDispatcher() {
+    return _twakeEventDispatcher;
+  }
+
+  TwakeEventDispatcher._instance();
+
+  void sendAccountDataEvent({
+    required Client client,
+    required BasicEvent basicEvent,
+  }) {
+    client.onAccountData.add(basicEvent);
+  }
+}
+
+twakeEventDispatcher.sendAccountDataEvent(
+      client: client,
+      basicEvent: BasicEvent(
+        type: TwakeInappEventTypes.uploadAvatarEvent,
+        content: profile.toJson(),
+      ),
+    );
+```
+- Listen event and handle it
+
+```
+client.onAccountData.stream.listen((event) {
+      Logs().d(
+        'FetchProfileMixin::onAccountData() - EventType: ${event.type} - EventContent: ${event.content}',
+      );
+      if (event.type == TwakeInappEventTypes.uploadAvatarEvent) {
+        profileNotifier.value = Profile.fromJson(event.content);
+      }
+    });
+```
+
+## Consequences
+
+- If we do not specifically define the event, it will be duplicated with the homeserver event

lib/config/app_config.dart

@@ -75,6 +75,7 @@ abstract class AppConfig {
   static const String defaultVideoBlurHash = 'L5H2EC=PM+yV0g-mq.wG9c010J}I';
   static const int thumbnailQuality = 70;
   static const int blurHashSize = 32;
+  static const int imageQuality = 50;
 
   static String? issueId;
 

lib/config/go_routes/go_router.dart

@@ -10,6 +10,7 @@ import 'package:fluffychat/pages/chat_draft/draft_chat.dart';
 import 'package:fluffychat/pages/chat_encryption_settings/chat_encryption_settings.dart';
 import 'package:fluffychat/pages/error_page/error_page.dart';
 import 'package:fluffychat/pages/homeserver_picker/homeserver_picker.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_profile/settings_profile.dart';
 import 'package:fluffychat/pages/share/share.dart';
 import 'package:fluffychat/pages/story/story_page.dart';
 import 'package:fluffychat/presentation/model/chat/chat_router_input_argument.dart';
@@ -25,15 +26,15 @@ import 'package:fluffychat/pages/invitation_selection/invitation_selection.dart'
 import 'package:fluffychat/pages/login/login.dart';
 import 'package:fluffychat/pages/new_group/new_group.dart';
 import 'package:fluffychat/pages/new_private_chat/new_private_chat.dart';
-import 'package:fluffychat/pages/settings_3pid/settings_3pid.dart';
-import 'package:fluffychat/pages/settings_chat/settings_chat.dart';
-import 'package:fluffychat/pages/settings_emotes/settings_emotes.dart';
-import 'package:fluffychat/pages/settings_ignore_list/settings_ignore_list.dart';
-import 'package:fluffychat/pages/settings_multiple_emotes/settings_multiple_emotes.dart';
-import 'package:fluffychat/pages/settings_notifications/settings_notifications.dart';
-import 'package:fluffychat/pages/settings_security/settings_security.dart';
-import 'package:fluffychat/pages/settings_stories/settings_stories.dart';
-import 'package:fluffychat/pages/settings_style/settings_style.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_3pid/settings_3pid.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_chat/settings_chat.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_emotes/settings_emotes.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_ignore_list/settings_ignore_list.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_multiple_emotes/settings_multiple_emotes.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_notifications/settings_notifications.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_security/settings_security.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_stories/settings_stories.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_style/settings_style.dart';
 import 'package:fluffychat/pages/sign_up/signup.dart';
 import 'package:fluffychat/widgets/log_view.dart';
 import 'package:fluffychat/widgets/matrix.dart';
@@ -243,6 +244,13 @@ abstract class AppRoutes {
                 );
               },
             ),
+            GoRoute(
+              path: 'profile',
+              pageBuilder: (context, state) => defaultPageBuilder(
+                context,
+                const SettingsProfile(),
+              ),
+            ),
             GoRoute(
               path: 'notifications',
               pageBuilder: (context, state) => defaultPageBuilder(

lib/di/global/get_it_initializer.dart

@@ -41,6 +41,8 @@ import 'package:fluffychat/domain/usecase/send_file_interactor.dart';
 import 'package:fluffychat/domain/usecase/send_file_on_web_interactor.dart';
 import 'package:fluffychat/domain/usecase/send_image_interactor.dart';
 import 'package:fluffychat/domain/usecase/send_images_interactor.dart';
+import 'package:fluffychat/domain/usecase/settings/update_profile_interactor.dart';
+import 'package:fluffychat/event/twake_event_dispatcher.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:get_it/get_it.dart';
 
@@ -71,6 +73,7 @@ class GetItInitializer {
     HiveDI().bind();
     NetworkConnectivityDI().bind();
     getIt.registerSingleton(ResponsiveUtils());
+    getIt.registerSingleton(TwakeEventDispatcher());
   }
 
   void bindingQueue() {
@@ -175,5 +178,8 @@ class GetItInitializer {
     getIt.registerSingleton<TimelineSearchEventInteractor>(
       TimelineSearchEventInteractor(),
     );
+    getIt.registerSingleton<UpdateProfileInteractor>(
+      UpdateProfileInteractor(),
+    );
   }
 }

lib/domain/app_state/settings/update_profile_failure.dart

@@ -0,0 +1,10 @@
+import 'package:fluffychat/app_state/failure.dart';
+
+class UpdateProfileFailure extends Failure {
+  final dynamic exception;
+
+  const UpdateProfileFailure(this.exception) : super();
+
+  @override
+  List<Object?> get props => [exception];
+}

lib/domain/app_state/settings/update_profile_loading.dart

@@ -0,0 +1,8 @@
+import 'package:fluffychat/app_state/success.dart';
+
+class UpdateProfileLoading extends Success {
+  const UpdateProfileLoading();
+
+  @override
+  List<Object?> get props => [];
+}

lib/domain/app_state/settings/update_profile_success.dart

@@ -0,0 +1,21 @@
+import 'package:fluffychat/app_state/success.dart';
+
+class UpdateProfileInitial extends Success {
+  @override
+  List<Object?> get props => [];
+}
+
+class UpdateProfileSuccess extends Success {
+  final Uri? avatar;
+  final String? displayName;
+  final bool isDeleteAvatar;
+
+  const UpdateProfileSuccess({
+    this.avatar,
+    this.displayName,
+    this.isDeleteAvatar = false,
+  });
+
+  @override
+  List<Object?> get props => [avatar, displayName, isDeleteAvatar];
+}

lib/domain/usecase/settings/update_profile_interactor.dart

@@ -0,0 +1,47 @@
+import 'package:dartz/dartz.dart';
+import 'package:fluffychat/app_state/failure.dart';
+import 'package:fluffychat/app_state/success.dart';
+import 'package:fluffychat/domain/app_state/settings/update_profile_failure.dart';
+import 'package:fluffychat/domain/app_state/settings/update_profile_loading.dart';
+import 'package:fluffychat/domain/app_state/settings/update_profile_success.dart';
+import 'package:matrix/matrix.dart';
+
+class UpdateProfileInteractor {
+  Stream<Either<Failure, Success>> execute({
+    required Client client,
+    Uri? avatarUrl,
+    bool isDeleteAvatar = false,
+    String? displayName,
+  }) async* {
+    yield const Right(UpdateProfileLoading());
+    try {
+      Logs().d(
+        'UploadProfileInteractor::execute(): Uri - $avatarUrl - displayName - $displayName',
+      );
+      if (avatarUrl != null || isDeleteAvatar) {
+        await client.setAvatarUrl(
+          client.userID!,
+          avatarUrl ?? Uri.parse(''),
+        );
+      }
+      if (displayName != null) {
+        await client.setDisplayName(
+          client.userID!,
+          displayName,
+        );
+      }
+      yield Right(
+        UpdateProfileSuccess(
+          displayName: displayName,
+          avatar: avatarUrl,
+          isDeleteAvatar: isDeleteAvatar,
+        ),
+      );
+    } catch (e) {
+      Logs().d(
+        'UploadAvatarInteractor::execute(): Exception - $e}',
+      );
+      yield Left(UpdateProfileFailure(e));
+    }
+  }
+}

lib/event/twake_event_dispatcher.dart

@@ -0,0 +1,19 @@
+import 'package:matrix/matrix.dart';
+
+class TwakeEventDispatcher {
+  static final TwakeEventDispatcher _twakeEventDispatcher =
+      TwakeEventDispatcher._instance();
+
+  factory TwakeEventDispatcher() {
+    return _twakeEventDispatcher;
+  }
+
+  TwakeEventDispatcher._instance();
+
+  void sendAccountDataEvent({
+    required Client client,
+    required BasicEvent basicEvent,
+  }) {
+    client.onAccountData.add(basicEvent);
+  }
+}

lib/event/twake_inapp_event_types.dart

@@ -0,0 +1,3 @@
+class TwakeInappEventTypes {
+  static const String uploadAvatarEvent = 'app.twake.inapp.profile.avatar';
+}

lib/pages/chat_details/chat_details.dart

@@ -9,6 +9,7 @@ import 'package:fluffychat/pages/chat_details/chat_details_page_view/links/chat_
 import 'package:fluffychat/pages/chat_details/chat_details_page_view/media/chat_details_media_page.dart';
 import 'package:fluffychat/pages/invitation_selection/invitation_selection.dart';
 import 'package:fluffychat/pages/invitation_selection/invitation_selection_web.dart';
+import 'package:fluffychat/presentation/enum/settings/settings_profile_enum.dart';
 import 'package:fluffychat/presentation/extensions/room_summary_extension.dart';
 import 'package:fluffychat/presentation/mixins/handle_video_download_mixin.dart';
 import 'package:fluffychat/presentation/mixins/play_video_action_mixin.dart';
@@ -28,7 +29,6 @@ import 'package:image_picker/image_picker.dart';
 import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/pages/chat_details/chat_details_view.dart';
-import 'package:fluffychat/pages/settings/settings.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/matrix.dart';

lib/pages/chat_list/chat_list.dart

@@ -12,7 +12,7 @@ import 'package:fluffychat/pages/bootstrap/bootstrap_dialog.dart';
 import 'package:fluffychat/pages/bootstrap/tom_bootstrap_dialog.dart';
 import 'package:fluffychat/pages/chat_list/chat_list_view.dart';
 import 'package:fluffychat/pages/chat_list/receive_sharing_intent_mixin.dart';
-import 'package:fluffychat/pages/settings_security/settings_security.dart';
+import 'package:fluffychat/pages/settings_dashboard/settings_security/settings_security.dart';
 import 'package:fluffychat/presentation/enum/chat_list/chat_list_enum.dart';
 import 'package:fluffychat/presentation/extensions/client_extension.dart';
 import 'package:fluffychat/presentation/model/chat_list/chat_selection_actions.dart';

lib/pages/chat_list/chat_list_item_mixin.dart

@@ -75,25 +75,27 @@ mixin ChatListItemMixin {
     return isGroup
         ? Row(
             children: [
-              FutureBuilder<User?>(
-                future: room.lastEvent?.fetchSenderUser(),
-                builder: (context, snapshot) {
-                  if (snapshot.data == null) return const SizedBox.shrink();
-                  return Text(
-                    snapshot.data!.calcDisplayname(),
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 1,
-                    softWrap: false,
-                    style: Theme.of(context).textTheme.labelLarge?.merge(
-                          TextStyle(
-                            overflow: TextOverflow.ellipsis,
-                            color: unread
-                                ? Theme.of(context).colorScheme.onSurface
-                                : ChatListItemStyle.readMessageColor,
+              Expanded(
+                child: FutureBuilder<User?>(
+                  future: room.lastEvent?.fetchSenderUser(),
+                  builder: (context, snapshot) {
+                    if (snapshot.data == null) return const SizedBox.shrink();
+                    return Text(
+                      snapshot.data!.calcDisplayname(),
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      softWrap: false,
+                      style: Theme.of(context).textTheme.labelLarge?.merge(
+                            TextStyle(
+                              overflow: TextOverflow.ellipsis,
+                              color: unread
+                                  ? Theme.of(context).colorScheme.onSurface
+                                  : ChatListItemStyle.readMessageColor,
+                            ),
                           ),
-                        ),
-                  );
-                },
+                    );
+                  },
+                ),
               ),
               const Spacer()
             ],