chore: Adjust design of user viewer and popup buttons

lib/pages/chat_list/chat_list.dart

@@ -440,25 +440,16 @@ class ChatListController extends State<ChatList>
         PopupMenuItem(
           value: ChatContextAction.open,
           child: Row(
-            mainAxisSize: .min,
             spacing: 12.0,
             children: [
-              Avatar(mxContent: room.avatar, name: displayname),
+              Avatar(mxContent: room.avatar, name: displayname, size: 24),
               ConstrainedBox(
-                constraints: const BoxConstraints(maxWidth: 128),
+                constraints: const BoxConstraints(maxWidth: 200),
-                child: Text(
+                child: Text(displayname, maxLines: 1, overflow: .ellipsis),
-                  displayname,
-                  style: TextStyle(
-                    color: Theme.of(context).colorScheme.onSurface,
-                  ),
-                  maxLines: 2,
-                  overflow: TextOverflow.ellipsis,
-                ),
               ),
             ],
           ),
         ),
-        const PopupMenuDivider(),
         if (space != null)
           PopupMenuItem(
             value: ChatContextAction.goToSpace,

lib/widgets/adaptive_dialogs/user_dialog.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -5,10 +6,11 @@ import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:go_router/go_router.dart';
 import 'package:matrix/matrix.dart';
 
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/l10n/l10n.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
-import 'package:fluffychat/widgets/adaptive_dialogs/adaptive_dialog_action.dart';
+import 'package:fluffychat/utils/fluffy_share.dart';
 import 'package:fluffychat/widgets/avatar.dart';
 import 'package:fluffychat/widgets/presence_builder.dart';
 import '../../utils/url_launcher.dart';
@@ -37,7 +39,6 @@ class UserDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
-    final dmRoomId = client.getDirectChatFromUserId(profile.userId);
     final displayname =
         profile.displayName ??
         profile.userId.localpart ??
@@ -46,12 +47,8 @@ class UserDialog extends StatelessWidget {
     final theme = Theme.of(context);
     final avatar = profile.avatarUrl;
     return AlertDialog.adaptive(
-      title: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 256),
-        child: Center(child: Text(displayname, textAlign: TextAlign.center)),
-      ),
       content: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 256, maxHeight: 256),
+        constraints: const BoxConstraints(maxWidth: 256),
         child: PresenceBuilder(
           userId: profile.userId,
           client: Matrix.of(context).client,
@@ -66,17 +63,18 @@ class UserDialog extends StatelessWidget {
                     lastActiveTimestamp.localizedTimeShort(context),
                   )
                 : null;
-            return SingleChildScrollView(
+            return Column(
-              child: Column(
+              spacing: 16,
-                spacing: 8,
               mainAxisSize: .min,
               crossAxisAlignment: .stretch,
               children: [
-                  Center(
+                Row(
-                    child: Avatar(
+                  spacing: 12,
+                  children: [
+                    Avatar(
                       mxContent: avatar,
                       name: displayname,
-                      size: Avatar.defaultSize * 2,
+                      size: Avatar.defaultSize * 1.5,
                       onTap: avatar != null
                           ? () => showDialog(
                               context: context,
@@ -84,7 +82,17 @@ class UserDialog extends StatelessWidget {
                             )
                           : null,
                     ),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: .start,
+                        children: [
+                          Text(
+                            displayname,
+                            maxLines: 1,
+                            overflow: .ellipsis,
+                            style: TextStyle(fontSize: 16),
                           ),
+                          const SizedBox(height: 8),
                           HoverBuilder(
                             builder: (context, hovered) => StatefulBuilder(
                               builder: (context, setState) => MouseRegion(
@@ -103,10 +111,14 @@ class UserDialog extends StatelessWidget {
                                       children: [
                                         WidgetSpan(
                                           child: Padding(
-                                    padding: const EdgeInsets.only(right: 4.0),
+                                            padding: const EdgeInsets.only(
+                                              right: 4.0,
+                                            ),
                                             child: AnimatedScale(
-                                      duration: FluffyThemes.animationDuration,
+                                              duration: FluffyThemes
-                                      curve: FluffyThemes.animationCurve,
+                                                  .animationDuration,
+                                              curve:
+                                                  FluffyThemes.animationCurve,
                                               scale: hovered
                                                   ? 1.33
                                                   : copied
@@ -117,17 +129,20 @@ class UserDialog extends StatelessWidget {
                                                     ? Icons.check_circle
                                                     : Icons.copy,
                                                 size: 12,
-                                        color: copied ? Colors.green : null,
+                                                color: copied
+                                                    ? Colors.green
+                                                    : null,
                                               ),
                                             ),
                                           ),
                                         ),
                                         TextSpan(text: profile.userId),
                                       ],
-                              style: theme.textTheme.bodyMedium?.copyWith(
+                                      style: theme.textTheme.bodyMedium
-                                fontSize: 10,
+                                          ?.copyWith(fontSize: 10),
-                              ),
                                     ),
+                                    maxLines: 1,
+                                    overflow: .ellipsis,
                                     textAlign: TextAlign.center,
                                   ),
                                 ),
@@ -137,37 +152,37 @@ class UserDialog extends StatelessWidget {
                           if (presenceText != null)
                             Text(
                               presenceText,
-                      style: const TextStyle(fontSize: 10),
+                              style: theme.textTheme.bodyMedium?.copyWith(
-                      textAlign: TextAlign.center,
+                                fontSize: 10,
                               ),
+                            ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+
                 if (statusMsg != null)
                   SelectableLinkify(
                     text: statusMsg,
-                      textScaleFactor: MediaQuery.textScalerOf(
+                    textScaleFactor: MediaQuery.textScalerOf(context).scale(1),
-                        context,
+                    textAlign: TextAlign.start,
-                      ).scale(1),
-                      textAlign: TextAlign.center,
                     options: const LinkifyOptions(humanize: false),
                     linkStyle: TextStyle(
                       color: theme.colorScheme.primary,
                       decoration: TextDecoration.underline,
                       decorationColor: theme.colorScheme.primary,
                     ),
-                      onOpen: (url) =>
+                    onOpen: (url) => UrlLauncher(context, url.url).launchUrl(),
-                          UrlLauncher(context, url.url).launchUrl(),
                   ),
-                ],
+                Row(
-              ),
+                  mainAxisAlignment: .spaceBetween,
-            );
+                  spacing: 4,
-          },
+                  children: [
-        ),
+                    _IconTextButton(
-      ),
+                      label: L10n.of(context).chat,
-      actions: [
+                      icon: Icons.chat_outlined,
-        if (client.userID != profile.userId) ...[
+                      onTap: () async {
-          AdaptiveDialogAction(
-            borderRadius: AdaptiveDialogAction.topRadius,
-            bigButtons: true,
-            onPressed: () async {
                         final router = GoRouter.of(context);
                         final roomIdResult = await showFutureLoadingDialog(
                           context: context,
@@ -178,16 +193,11 @@ class UserDialog extends StatelessWidget {
                         if (context.mounted) Navigator.of(context).pop();
                         router.go('/rooms/$roomId');
                       },
-            child: Text(
-              dmRoomId == null
-                  ? L10n.of(context).startConversation
-                  : L10n.of(context).sendAMessage,
                     ),
-          ),
+                    _IconTextButton(
-          AdaptiveDialogAction(
+                      label: L10n.of(context).block,
-            bigButtons: true,
+                      icon: Icons.block_outlined,
-            borderRadius: AdaptiveDialogAction.centerRadius,
+                      onTap: () {
-            onPressed: () {
                         final router = GoRouter.of(context);
                         Navigator.of(context).pop();
                         router.go(
@@ -195,19 +205,55 @@ class UserDialog extends StatelessWidget {
                           extra: profile.userId,
                         );
                       },
-            child: Text(
-              L10n.of(context).ignoreUser,
-              style: TextStyle(color: theme.colorScheme.error),
                     ),
+                    _IconTextButton(
+                      label: L10n.of(context).share,
+                      icon: Icons.adaptive.share,
+                      onTap: () => FluffyShare.share(profile.userId, context),
                     ),
                   ],
-        AdaptiveDialogAction(
-          bigButtons: true,
-          borderRadius: AdaptiveDialogAction.bottomRadius,
-          onPressed: Navigator.of(context).pop,
-          child: Text(L10n.of(context).close),
                 ),
               ],
             );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class _IconTextButton extends StatelessWidget {
+  final String label;
+  final IconData icon;
+  final VoidCallback onTap;
+  const _IconTextButton({
+    required this.label,
+    required this.icon,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Expanded(
+      child: CupertinoButton(
+        onPressed: onTap,
+        borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
+        color: theme.colorScheme.surfaceBright,
+        padding: EdgeInsets.all(8),
+        child: Column(
+          mainAxisSize: .min,
+          children: [
+            Icon(icon),
+            Text(
+              label,
+              style: TextStyle(fontSize: 12),
+              maxLines: 1,
+              overflow: .ellipsis,
+            ),
+          ],
+        ),
+      ),
+    );
   }
 }

lib/widgets/member_actions_popup_menu_button.dart

@@ -45,40 +45,22 @@ Future<void> showMemberActionsPopupMenu({
           children: [
             Avatar(
               name: displayname,
+              size: 30,
               mxContent: user.avatarUrl,
               presenceUserId: user.id,
               presenceBackgroundColor: theme.colorScheme.surfaceContainer,
             ),
-            Column(
-              mainAxisSize: .min,
-              crossAxisAlignment: .start,
-              children: [
             ConstrainedBox(
-                  constraints: const BoxConstraints(maxWidth: 128),
+              constraints: const BoxConstraints(maxWidth: 200),
               child: Text(
                 displayname,
-                    textAlign: TextAlign.center,
-                    style: theme.textTheme.labelLarge,
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ),
-                ConstrainedBox(
-                  constraints: const BoxConstraints(maxWidth: 128),
-                  child: Text(
-                    user.id,
-                    textAlign: TextAlign.center,
-                    style: const TextStyle(fontSize: 10),
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
               ),
             ),
           ],
         ),
-          ],
       ),
-      ),
-      const PopupMenuDivider(),
       if (onMention != null)
         PopupMenuItem(
           value: _MemberActions.mention,