design: Follow up chat settings design

assets/l10n/intl_en.arb

@@ -131,6 +131,7 @@
     "type": "text",
     "placeholders": {}
   },
+  "appLockDescription": "Lock the app when not using with a pin code",
   "archive": "Archive",
   "@archive": {
     "type": "text",
@@ -759,6 +760,8 @@
     "type": "text",
     "placeholders": {}
   },
+  "customEmojisAndStickers": "Custom emojis and stickers",
+  "customEmojisAndStickersBody": "Add or share custom emojis or stickers which can be used in any chat.",
   "emoteShortcode": "Emote shortcode",
   "@emoteShortcode": {
     "type": "text",

lib/pages/chat_details/chat_details_view.dart

@@ -293,7 +293,8 @@ class ChatDetailsView extends StatelessWidget {
                               Icons.insert_emoticon_outlined,
                             ),
                           ),
-                          title: Text(L10n.of(context)!.emoteSettings),
+                          title:
+                              Text(L10n.of(context)!.customEmojisAndStickers),
                           subtitle: Text(L10n.of(context)!.setCustomEmotes),
                           onTap: controller.goToEmoteSettings,
                           trailing: const Icon(Icons.chevron_right_outlined),

lib/pages/settings_chat/settings_chat_view.dart

@@ -25,16 +25,6 @@ class SettingsChatView extends StatelessWidget {
         child: MaxWidthBody(
           child: Column(
             children: [
-              ListTile(
-                title: Text(L10n.of(context)!.emoteSettings),
-                onTap: () => context.go('/rooms/settings/chat/emotes'),
-                trailing: const Icon(Icons.chevron_right_outlined),
-                leading: const Icon(Icons.emoji_emotions_outlined),
-              ),
-              Divider(
-                height: 1,
-                color: Theme.of(context).dividerColor,
-              ),
               SettingsSwitchListTile.adaptive(
                 title: L10n.of(context)!.formattedMessages,
                 subtitle: L10n.of(context)!.formattedMessagesDescription,
@@ -69,16 +59,29 @@ class SettingsChatView extends StatelessWidget {
                   storeKey: SettingKeys.autoplayImages,
                   defaultValue: AppConfig.autoplayImages,
                 ),
-              Divider(
-                height: 1,
-                color: Theme.of(context).dividerColor,
-              ),
               SettingsSwitchListTile.adaptive(
                 title: L10n.of(context)!.sendOnEnter,
                 onChanged: (b) => AppConfig.sendOnEnter = b,
                 storeKey: SettingKeys.sendOnEnter,
                 defaultValue: AppConfig.sendOnEnter ?? !PlatformInfos.isMobile,
               ),
+              Divider(
+                height: 1,
+                color: Theme.of(context).dividerColor,
+              ),
+              ListTile(
+                title: Text(L10n.of(context)!.customEmojisAndStickers),
+                subtitle: Text(L10n.of(context)!.customEmojisAndStickersBody),
+                onTap: () => context.go('/rooms/settings/chat/emotes'),
+                trailing: const Padding(
+                  padding: EdgeInsets.all(16.0),
+                  child: Icon(Icons.emoji_emotions_outlined),
+                ),
+              ),
+              Divider(
+                height: 1,
+                color: Theme.of(context).dividerColor,
+              ),
               SettingsSwitchListTile.adaptive(
                 title: L10n.of(context)!.experimentalVideoCalls,
                 onChanged: (b) {

lib/pages/settings_emotes/settings_emotes_view.dart

@@ -24,7 +24,7 @@ class EmotesSettingsView extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         leading: const Center(child: BackButton()),
-        title: Text(L10n.of(context)!.emoteSettings),
+        title: Text(L10n.of(context)!.customEmojisAndStickers),
         actions: [
           PopupMenuButton<PopupMenuEmojiActions>(
             onSelected: (value) {

lib/pages/settings_security/settings_security_view.dart

@@ -80,9 +80,9 @@ class SettingsSecurityView extends StatelessWidget {
                   if (Matrix.of(context).client.encryption != null) ...{
                     if (PlatformInfos.isMobile)
                       ListTile(
-                        leading: const Icon(Icons.lock_outlined),
                         trailing: const Icon(Icons.chevron_right_outlined),
                         title: Text(L10n.of(context)!.appLock),
+                        subtitle: Text(L10n.of(context)!.appLockDescription),
                         onTap: controller.setAppLockAction,
                       ),
                   },