fix(ui): Translate the "Shared media" in the profile

Also left-align the title.

assets/i18n/strings.i18n.json

@@ -154,15 +154,14 @@
 	    "confirmBody": "One or more chats are unencrypted. This means that the file will be leaked to the server. Do you still want to continue?"
 	},
 	"profile": {
-	    "self": {
-		"devices": "Devices"
+	    "general": {
+		"omemo": "Security"
 	    },
 	    "conversation": {
-		"muteChatTooltip": "Mute chat",
-		"unmuteChatTooltip": "Unmute chat",
-		"muteChat": "Mute",
-		"unmuteChat": "Unmute",
-		"devices": "Devices"
+		"notifications": "Notifications",
+		"notificationsMuted": "Muted",
+		"notificationsEnabled": "Enabled",
+		"sharedMedia": "Media"
 	    },
 	    "owndevices": {
 		"title": "Own Devices",

assets/i18n/strings_de.i18n.json

@@ -154,15 +154,14 @@
 	    "confirmBody": "Einer oder mehr Chats sind unverschlüsselt. Das bedeutet, dass die Dateien dem Server unverschlüsselt vorliegen. Dateien trotzdem senden?"
 	},
 	"profile": {
-	    "self": {
-		"devices": "Geräte"
+	    "general": {
+		"omemo": "Sicherheit"
 	    },
 	    "conversation": {
-		"muteChatTooltip": "Chat stummschalten",
-		"unmuteChatTooltip": "Chat lautstellen",
-		"muteChat": "Stummschalten",
-		"unmuteChat": "Lautstellen",
-		"devices": "Geräte"
+		"notifications": "Benachrichtigungen",
+		"notificationsMuted": "Stumm",
+		"notificationsEnabled": "Eingeschaltet",
+		"sharedMedia": "Medien"
 	    },
 	    "owndevices": {
 		"title": "Eigene Geräte",

lib/ui/pages/profile/conversationheader.dart

@@ -1,15 +1,13 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
-import 'package:get_it/get_it.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:moxxyv2/i18n/strings.g.dart';
 import 'package:moxxyv2/shared/models/conversation.dart';
 import 'package:moxxyv2/ui/bloc/devices_bloc.dart';
 import 'package:moxxyv2/ui/bloc/profile_bloc.dart';
-import 'package:moxxyv2/ui/constants.dart';
-import 'package:moxxyv2/ui/helpers.dart';
 import 'package:moxxyv2/ui/widgets/avatar.dart';
-import 'package:moxxyv2/ui/widgets/chat/shared/base.dart';
 import 'package:moxxyv2/ui/widgets/contact_helper.dart';
+import 'package:moxxyv2/ui/widgets/profile/options.dart';
 //import 'package:phosphor_flutter/phosphor_flutter.dart';
 
 class ConversationProfileHeader extends StatelessWidget {
@@ -81,124 +79,97 @@ class ConversationProfileHeader extends StatelessWidget {
             ),
           ),
         ),
-        Padding(
-          padding: const EdgeInsets.only(top: 16),
-          child: Row(
-            //mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: [
-              Tooltip(
-                message: conversation.muted ?
-                  t.pages.profile.conversation.unmuteChatTooltip :
-                  t.pages.profile.conversation.muteChatTooltip,
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    SharedMediaContainer(
-                      Icon(
-                        conversation.muted ?
-                          Icons.do_not_disturb_on :
-                          Icons.do_not_disturb_off,
-                        size: 32,
-                      ),
-                      color: getTileColor(context),
-                      onTap: () {
-                        GetIt.I.get<ProfileBloc>().add(
-                          MuteStateSetEvent(
-                            conversation.jid,
-                            !conversation.muted,
-                          ),
-                        );
-                      },
-                    ),
-                    Text(
-                      conversation.muted ?
-                        t.pages.profile.conversation.unmuteChat :
-                        t.pages.profile.conversation.muteChat,
-                      style: const TextStyle(
-                        fontSize: fontsizeAppbar,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              // TODO(PapaTutuWawa): Only show when the chat partner has OMEMO keys
-              Tooltip(
-                message: t.pages.profile.conversation.devices,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
-                    SharedMediaContainer(
-                      const Icon(
-                        Icons.security_outlined,
-                        size: 32,
-                      ),
-                      color: getTileColor(context),
-                      onTap: () {
-                        GetIt.I.get<DevicesBloc>().add(DevicesRequestedEvent(conversation.jid));
-                      },
-                    ),
-                    Text(
-                      t.pages.profile.conversation.devices,
-                      style: const TextStyle(
-                        fontSize: fontsizeAppbar,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              // TODO(Unknown): How to integrate this into the UI?
-              /* 
-              Tooltip(
-                message: subscribed ?
-                  'Unsubscribe' :
-                  'Subscribe',
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    SharedMediaContainer(
-                      ClipRRect(
-                        borderRadius: BorderRadius.circular(10),
-                        child: ColoredBox(
-                          color: getTileColor(context),
-                          child: Icon(
-                            subscribed ?
-                              PhosphorIcons.link :
-                              PhosphorIcons.linkBreak,
-                            size: 32,
-                          ),
-                        ),
-                      ),
-                      onTap: () {
-                        GetIt.I.get<ProfileBloc>().add(
-                          SetSubscriptionStateEvent(
-                            conversation.jid,
-                            !subscribed,
-                          ),
-                        );
-                      },
-                    ),
-                    Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Text(
-                          subscribed ?
-                          'Unsubscribe' :
-                          'Subscribe',
-                          style: TextStyle(
-                            fontSize: fontsizeAppbar,
-                          ),
-                        ),
 
-                        Icon(Icons.info),
-                      ],
-                    ),
-                  ],
+        Align(
+          alignment: Alignment.centerLeft,
+          child: Padding(
+            padding: const EdgeInsets.only(
+              top: 16,
+              left: 64,
+              right: 64,
+            ),
+            child: ProfileOptions(
+              options: [
+                ProfileOption(
+                  icon: Icons.security_outlined,
+                  title: t.pages.profile.general.omemo,
+                  onTap: () {
+                    context.read<DevicesBloc>().add(
+                      DevicesRequestedEvent(conversation.jid),
+                    );
+                  },
                 ),
-              ),*/
-            ],
+                ProfileOption(
+                  icon: conversation.muted ?
+                    Icons.notifications_off :
+                    Icons.notifications,
+                  title: t.pages.profile.conversation.notifications,
+                  description: conversation.muted ?
+                    t.pages.profile.conversation.notificationsMuted :
+                    t.pages.profile.conversation.notificationsEnabled,
+                  onTap: () {
+                    context.read<ProfileBloc>().add(
+                      MuteStateSetEvent(
+                        conversation.jid,
+                        !conversation.muted,
+                      ),
+                    );
+                  },
+                ),
+              ],
+            ),
           ),
         ),
+
+        /*
+        // TODO(Unknown): How to integrate this into the UI?
+        Tooltip(
+          message: subscribed ?
+            'Unsubscribe' :
+            'Subscribe',
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              SharedMediaContainer(
+                ClipRRect(
+                  borderRadius: BorderRadius.circular(10),
+                  child: ColoredBox(
+                    color: getTileColor(context),
+                    child: Icon(
+                      subscribed ?
+                        PhosphorIcons.link :
+                        PhosphorIcons.linkBreak,
+                      size: 32,
+                    ),
+                  ),
+                ),
+                onTap: () {
+                  GetIt.I.get<ProfileBloc>().add(
+                    SetSubscriptionStateEvent(
+                      conversation.jid,
+                      !subscribed,
+                    ),
+                  );
+                },
+              ),
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    subscribed ?
+                    'Unsubscribe' :
+                    'Subscribe',
+                    style: TextStyle(
+                      fontSize: fontsizeAppbar,
+                    ),
+                  ),
+
+                  Icon(Icons.info),
+                ],
+              ),
+            ],
+          ),
+        ),*/
       ],
     );
   }

lib/ui/pages/profile/profile.dart

@@ -48,14 +48,11 @@ class ProfilePage extends StatelessWidget {
                     child: _buildHeader(context, state),
                   ),
 
-                  // TODO(Unknown): Maybe don't show this conditionally but always
-                  Visibility(
-                    visible: !state.isSelfProfile && state.conversation!.sharedMedia.isNotEmpty,
-                    child: state.isSelfProfile ? const SizedBox() : SharedMediaDisplay(
+                  if (!state.isSelfProfile && state.conversation!.sharedMedia.isNotEmpty)
+                    SharedMediaDisplay(
                       state.conversation!.sharedMedia,
                       state.conversation!.jid,
                     ),
-                  )
                 ],
               ),
               Positioned(

lib/ui/pages/profile/selfheader.dart

@@ -1,11 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:get_it/get_it.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:moxxyv2/i18n/strings.g.dart';
 import 'package:moxxyv2/ui/bloc/own_devices_bloc.dart';
-import 'package:moxxyv2/ui/constants.dart';
 import 'package:moxxyv2/ui/helpers.dart';
 import 'package:moxxyv2/ui/widgets/avatar.dart';
-import 'package:moxxyv2/ui/widgets/chat/shared/base.dart';
+import 'package:moxxyv2/ui/widgets/profile/options.dart';
 
 class SelfProfileHeader extends StatelessWidget {
   const SelfProfileHeader(
@@ -79,36 +78,27 @@ class SelfProfileHeader extends StatelessWidget {
             ],
           ),
         ),
-        Padding(
-          padding: const EdgeInsets.only(top: 16),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: [
-              Tooltip(
-                message: t.pages.profile.self.devices,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
-                    SharedMediaContainer(
-                      const Icon(
-                        Icons.security_outlined,
-                        size: 32,
-                      ),
-                      color: getTileColor(context),
-                      onTap: () {
-                        GetIt.I.get<OwnDevicesBloc>().add(OwnDevicesRequestedEvent());
-                      },
-                    ),
-                    Text(
-                      t.pages.profile.self.devices,
-                      style: const TextStyle(
-                        fontSize: fontsizeAppbar,
-                      ),
-                    ),
-                  ],
+        Align(
+          alignment: Alignment.centerLeft,
+          child: Padding(
+            padding: const EdgeInsets.only(
+              top: 16,
+              left: 64,
+              right: 64,
+            ),
+            child: ProfileOptions(
+              options: [
+                ProfileOption(
+                  icon: Icons.security_outlined,
+                  title: t.pages.profile.general.omemo,
+                  onTap: () {
+                    context.read<OwnDevicesBloc>().add(
+                      OwnDevicesRequestedEvent(),
+                    );
+                  },
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ],

lib/ui/widgets/chat/shared/media.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:moxxyv2/i18n/strings.g.dart';
 import 'package:moxxyv2/shared/models/media.dart';
 import 'package:moxxyv2/ui/widgets/chat/media/media.dart';
 import 'package:moxxyv2/ui/widgets/chat/shared/summary.dart';
@@ -36,14 +37,17 @@ class SharedMediaDisplay extends StatelessWidget {
     final padding = 0.5 * (width - 15 - 300);
     
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        const Padding(
-          padding: EdgeInsets.only(top: 25),
+        Padding(
+          padding: EdgeInsets.only(
+            top: 25,
+            left: padding,
+            right: padding,
+          ),
           child: Text(
-            'Shared Media',
-            style: TextStyle(
-              fontSize: 25,
-            ),
+            t.pages.profile.conversation.sharedMedia,
+            style: Theme.of(context).textTheme.headline5,
           ),
         ),
         Padding(

lib/ui/widgets/profile/options.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+
+class ProfileOption {
+  const ProfileOption({
+    required this.icon,
+    required this.title,
+    required this.onTap,
+    this.description,
+  });
+  final IconData icon;
+  final String title;
+  final String? description;
+  final void Function() onTap;
+}
+
+class ProfileOptions extends StatelessWidget {
+  const ProfileOptions({
+    required this.options,
+    super.key,
+  });
+  final List<ProfileOption> options;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: options
+        .map((option) => InkWell(
+          onTap: option.onTap,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              vertical: 16,
+              horizontal: 8,
+            ),
+            child: Row(
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(right: 16),
+                  child: Icon(
+                    option.icon,
+                    size: 32,
+                  ),
+                ),
+
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      option.title,
+                      style: Theme.of(context).textTheme.headline6,
+                    ),
+
+                    if (option.description != null)
+                      Text(
+                        option.description!,
+                        style: Theme.of(context).textTheme.bodyMedium,
+                      ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),).toList(),
+    );
+  }
+}