feat(ui): Replace the squircles with a simple list

assets/i18n/strings.i18n.json

@@ -154,15 +154,13 @@
 	    "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": {
+	    "general": {
-		"devices": "Devices"
+		"omemo": "Security"
 	    },
 	    "conversation": {
-		"muteChatTooltip": "Mute chat",
+		"notifications": "Notifications",
-		"unmuteChatTooltip": "Unmute chat",
+		"notificationsMuted": "Muted",
-		"muteChat": "Mute",
+		"notificationsEnabled": "Enabled"
-		"unmuteChat": "Unmute",
-		"devices": "Devices"
 	    },
 	    "owndevices": {
 		"title": "Own Devices",

assets/i18n/strings_de.i18n.json

@@ -154,15 +154,13 @@
 	    "confirmBody": "Einer oder mehr Chats sind unverschlüsselt. Das bedeutet, dass die Dateien dem Server unverschlüsselt vorliegen. Dateien trotzdem senden?"
 	},
 	"profile": {
-	    "self": {
+	    "general": {
-		"devices": "Geräte"
+		"omemo": "Sicherheit"
 	    },
 	    "conversation": {
-		"muteChatTooltip": "Chat stummschalten",
+		"notifications": "Benachrichtigungen",
-		"unmuteChatTooltip": "Chat lautstellen",
+		"notificationsMuted": "Stumm",
-		"muteChat": "Stummschalten",
+		"notificationsEnabled": "Eingeschaltet"
-		"unmuteChat": "Lautstellen",
-		"devices": "Geräte"
 	    },
 	    "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,29 +79,36 @@ class ConversationProfileHeader extends StatelessWidget {
             ),
           ),
         ),
-        Padding(
+
-          padding: const EdgeInsets.only(top: 16),
+        Align(
-          child: Row(
+          alignment: Alignment.centerLeft,
-            //mainAxisSize: MainAxisSize.min,
+          child: Padding(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            padding: const EdgeInsets.only(
-            children: [
+              top: 16,
-              Tooltip(
+              left: 64,
-                message: conversation.muted ?
+              right: 64,
-                  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),
+            child: ProfileOptions(
+              options: [
+                ProfileOption(
+                  icon: Icons.security_outlined,
+                  title: t.pages.profile.general.omemo,
                   onTap: () {
-                        GetIt.I.get<ProfileBloc>().add(
+                    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,
@@ -111,44 +116,13 @@ class ConversationProfileHeader extends StatelessWidget {
                     );
                   },
                 ),
-                    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?
         /*
+        // TODO(Unknown): How to integrate this into the UI?
         Tooltip(
           message: subscribed ?
             'Unsubscribe' :
@@ -197,9 +171,6 @@ class ConversationProfileHeader extends StatelessWidget {
           ),
         ),*/
       ],
-          ),
-        ),
-      ],
     );
   }
 }

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,37 +78,28 @@ class SelfProfileHeader extends StatelessWidget {
             ],
           ),
         ),
-        Padding(
+        Align(
-          padding: const EdgeInsets.only(top: 16),
+          alignment: Alignment.centerLeft,
-          child: Row(
+          child: Padding(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            padding: const EdgeInsets.only(
-            children: [
+              top: 16,
-              Tooltip(
+              left: 64,
-                message: t.pages.profile.self.devices,
+              right: 64,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                  children: [
-                    SharedMediaContainer(
-                      const Icon(
-                        Icons.security_outlined,
-                        size: 32,
             ),
-                      color: getTileColor(context),
+            child: ProfileOptions(
+              options: [
+                ProfileOption(
+                  icon: Icons.security_outlined,
+                  title: t.pages.profile.general.omemo,
                   onTap: () {
-                        GetIt.I.get<OwnDevicesBloc>().add(OwnDevicesRequestedEvent());
+                    context.read<OwnDevicesBloc>().add(
+                      OwnDevicesRequestedEvent(),
+                    );
                   },
                 ),
-                    Text(
-                      t.pages.profile.self.devices,
-                      style: const TextStyle(
-                        fontSize: fontsizeAppbar,
-                      ),
-                    ),
               ],
             ),
           ),
-            ],
-          ),
         ),
       ],
     );

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(),
+    );
+  }
+}