feat: Improved encryption UI

lib/components/list_items/message.dart

@@ -1,21 +1,16 @@
 import 'package:famedlysdk/famedlysdk.dart';
-import 'package:famedlysdk/encryption.dart';
-import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
 import 'package:fluffychat/components/message_content.dart';
 import 'package:fluffychat/components/reply_content.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/event_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_gen/gen_l10n/l10n.dart';
 
 import '../adaptive_page_layout.dart';
 import '../avatar.dart';
 import '../matrix.dart';
 import '../message_reactions.dart';
 import 'state_message.dart';
-import '../../views/key_verification.dart';
-import '../../utils/app_route.dart';
 
 class Message extends StatelessWidget {
   final Event event;
@@ -40,36 +35,6 @@ class Message extends StatelessWidget {
   /// of touchscreen.
   static bool useMouse = false;
 
-  void _verifyOrRequestKey(BuildContext context) async {
-    final client = Matrix.of(context).client;
-    if (client.isUnknownSession && client.encryption.crossSigning.enabled) {
-      final req =
-          await client.userDeviceKeys[client.userID].startVerification();
-      req.onUpdate = () async {
-        if (req.state == KeyVerificationState.done) {
-          for (var i = 0; i < 12; i++) {
-            if (await client.encryption.keyManager.isCached()) {
-              break;
-            }
-            await Future.delayed(Duration(seconds: 1));
-          }
-          final timeline = await event.room.getTimeline();
-          timeline.requestKeys();
-          timeline.cancelSubscriptions();
-        }
-      };
-      await Navigator.of(context).push(
-        AppRoute.defaultRoute(
-          context,
-          KeyVerificationView(request: req),
-        ),
-      );
-    } else {
-      await SimpleDialogs(context).tryRequestWithLoadingDialog(
-          event.getDisplayEvent(timeline).requestKey());
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
     if (![EventTypes.Message, EventTypes.Sticker, EventTypes.Encrypted]
@@ -161,20 +126,6 @@ class Message extends StatelessWidget {
                       displayEvent,
                       textColor: textColor,
                     ),
-                    if (displayEvent.type == EventTypes.Encrypted &&
-                        displayEvent.messageType == MessageTypes.BadEncrypted &&
-                        displayEvent.content['can_request_session'] == true)
-                      RaisedButton(
-                        color: color.withAlpha(100),
-                        child: Text(
-                          client.isUnknownSession &&
-                                  client.encryption.crossSigning.enabled
-                              ? L10n.of(context).verify
-                              : L10n.of(context).requestPermission,
-                          style: TextStyle(color: textColor),
-                        ),
-                        onPressed: () => _verifyOrRequestKey(context),
-                      ),
                     SizedBox(height: 4),
                     Opacity(
                       opacity: 0,

lib/components/message_content.dart

@@ -1,8 +1,13 @@
+import 'package:famedlysdk/encryption/utils/key_verification.dart';
 import 'package:famedlysdk/famedlysdk.dart';
 import 'package:fluffychat/components/audio_player.dart';
+import 'package:fluffychat/components/dialogs/simple_dialogs.dart';
 import 'package:fluffychat/components/image_bubble.dart';
+import 'package:fluffychat/utils/app_route.dart';
 import 'package:fluffychat/utils/event_extension.dart';
 import 'package:fluffychat/utils/matrix_locals.dart';
+import 'package:fluffychat/views/key_verification.dart';
+import 'package:flushbar/flushbar_helper.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:matrix_link_text/link_text.dart';
@@ -20,6 +25,54 @@ class MessageContent extends StatelessWidget {
 
   const MessageContent(this.event, {this.textColor});
 
+  void _verifyOrRequestKey(BuildContext context) async {
+    if (event.content['can_request_session'] != true) {
+      FlushbarHelper.createError(
+        message: event.type == EventTypes.Encrypted
+            ? L10n.of(context).needPantalaimonWarning
+            : event.getLocalizedBody(
+                MatrixLocals(L10n.of(context)),
+              ),
+      );
+      return;
+    }
+    final client = Matrix.of(context).client;
+    if (client.isUnknownSession && client.encryption.crossSigning.enabled) {
+      final req =
+          await client.userDeviceKeys[client.userID].startVerification();
+      req.onUpdate = () async {
+        if (req.state == KeyVerificationState.done) {
+          for (var i = 0; i < 12; i++) {
+            if (await client.encryption.keyManager.isCached()) {
+              break;
+            }
+            await Future.delayed(Duration(seconds: 1));
+          }
+          final timeline = await event.room.getTimeline();
+          timeline.requestKeys();
+          timeline.cancelSubscriptions();
+        }
+      };
+      await Navigator.of(context).push(
+        AppRoute.defaultRoute(
+          context,
+          KeyVerificationView(request: req),
+        ),
+      );
+    } else {
+      final success = await SimpleDialogs(context).tryRequestWithLoadingDialog(
+        event.requestKey(),
+      );
+      if (success != false) {
+        await FlushbarHelper.createLoading(
+          title: L10n.of(context).loadingPleaseWait,
+          message: L10n.of(context).requestToReadOlderMessages,
+          linearProgressIndicator: LinearProgressIndicator(),
+        ).show(context);
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     switch (event.type) {
@@ -68,6 +121,23 @@ class MessageContent extends StatelessWidget {
             // else we fall through to the normal message rendering
             continue textmessage;
           case MessageTypes.BadEncrypted:
+          case EventTypes.Encrypted:
+            return RaisedButton(
+              elevation: 7,
+              color: Theme.of(context).scaffoldBackgroundColor,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(6),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(Icons.lock_outline),
+                  SizedBox(width: 8),
+                  Text(L10n.of(context).encrypted),
+                ],
+              ),
+              onPressed: () => _verifyOrRequestKey(context),
+            );
           case MessageTypes.Location:
           case MessageTypes.None:
           textmessage:

lib/components/user_bottom_sheet.dart

@@ -166,8 +166,8 @@ class UserBottomSheet extends StatelessWidget {
                 title: Text(user.calcDisplayname()),
                 actions: [
                   if (verificationStatus != null)
-                    InkWell(
-                      child: Icon(
+                    IconButton(
+                      icon: Icon(
                         Icons.lock,
                         color: {
                               UserVerifiedStatus.unknownDevice: Colors.red,
@@ -175,7 +175,7 @@ class UserBottomSheet extends StatelessWidget {
                             }[verificationStatus] ??
                             Colors.orange,
                       ),
-                      onTap: () =>
+                      onPressed: () =>
                           verificationStatus == UserVerifiedStatus.unknown
                               ? _verifyAction(context)
                               : null,