design: Redesign permissions settings with dropdownbuttons

assets/l10n/intl_en.arb

@@ -2525,6 +2525,13 @@
   "@thisDevice": {},
   "initAppError": "An error occured while init the app",
   "@initAppError": {},
+  "minimumPowerLevel": "{level} is the minimum power level.",
+  "@minimumPowerLevel": {
+    "type": "text",
+    "placeholders": {
+      "level": {}
+    }
+  },
   "databaseBuildErrorBody": "Unable to build the SQlite database. The app tries to use the legacy database for now. Please report this error to the developers at {url}. The error message is: {error}",
   "@databaseBuildErrorBody": {
     "type": "text",

lib/pages/chat_permissions_settings/chat_permissions_settings.dart

@@ -2,6 +2,7 @@ import 'dart:developer';
 
 import 'package:flutter/material.dart';
 
+import 'package:adaptive_dialog/adaptive_dialog.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:future_loading_dialog/future_loading_dialog.dart';
 import 'package:go_router/go_router.dart';
@@ -9,7 +10,6 @@ import 'package:matrix/matrix.dart';
 
 import 'package:fluffychat/pages/chat_permissions_settings/chat_permissions_settings_view.dart';
 import 'package:fluffychat/widgets/matrix.dart';
-import 'package:fluffychat/widgets/permission_slider_dialog.dart';
 
 class ChatPermissionsSettings extends StatefulWidget {
   const ChatPermissionsSettings({super.key});
@@ -25,6 +25,7 @@ class ChatPermissionsSettingsController extends State<ChatPermissionsSettings> {
     BuildContext context,
     String key,
     int currentLevel, {
+    int? newLevel,
     String? category,
   }) async {
     final room = Matrix.of(context).client.getRoomById(roomId!)!;
@@ -34,9 +35,30 @@ class ChatPermissionsSettingsController extends State<ChatPermissionsSettings> {
       );
       return;
     }
-    final newLevel = await showPermissionChooser(
-      context,
-      currentLevel: currentLevel,
+    newLevel ??= int.tryParse(
+      (await showTextInputDialog(
+            context: context,
+            title: L10n.of(context)!.setPermissionsLevel,
+            textFields: [
+              DialogTextField(
+                initialText: currentLevel.toString(),
+                keyboardType: TextInputType.number,
+                autocorrect: false,
+                validator: (text) {
+                  if (text == null) {
+                    return L10n.of(context)!.pleaseEnterANumber;
+                  }
+                  final level = int.tryParse(text);
+                  if (level == null || level < 0) {
+                    return L10n.of(context)!.pleaseEnterANumber;
+                  }
+                  return null;
+                },
+              ),
+            ],
+          ))
+              ?.singleOrNull ??
+          '',
     );
     if (newLevel == null) return;
     final content = Map<String, dynamic>.from(

lib/pages/chat_permissions_settings/chat_permissions_settings_view.dart

@@ -48,11 +48,13 @@ class ChatPermissionsSettingsView extends StatelessWidget {
                       PermissionsListTile(
                         permissionKey: entry.key,
                         permission: entry.value,
-                        onTap: () => controller.editPowerLevel(
+                        onChanged: (level) => controller.editPowerLevel(
                           context,
                           entry.key,
                           entry.value,
+                          newLevel: level,
                         ),
+                        canEdit: room.canChangePowerLevel,
                       ),
                     Divider(color: Theme.of(context).dividerColor),
                     ListTile(
@@ -78,10 +80,12 @@ class ChatPermissionsSettingsView extends StatelessWidget {
                           permissionKey: key,
                           permission: value,
                           category: 'notifications',
-                          onTap: () => controller.editPowerLevel(
+                          canEdit: room.canChangePowerLevel,
+                          onChanged: (level) => controller.editPowerLevel(
                             context,
                             key,
                             value,
+                            newLevel: level,
                             category: 'notifications',
                           ),
                         );
@@ -102,10 +106,12 @@ class ChatPermissionsSettingsView extends StatelessWidget {
                         permissionKey: entry.key,
                         category: 'events',
                         permission: entry.value ?? 0,
-                        onTap: () => controller.editPowerLevel(
+                        canEdit: room.canChangePowerLevel,
+                        onChanged: (level) => controller.editPowerLevel(
                           context,
                           entry.key,
                           entry.value ?? 0,
+                          newLevel: level,
                           category: 'events',
                         ),
                       ),

lib/pages/chat_permissions_settings/permission_list_tile.dart

@@ -7,14 +7,16 @@ class PermissionsListTile extends StatelessWidget {
   final String permissionKey;
   final int permission;
   final String? category;
-  final void Function()? onTap;
+  final void Function(int? level)? onChanged;
+  final bool canEdit;
 
   const PermissionsListTile({
     super.key,
     required this.permissionKey,
     required this.permission,
     this.category,
-    this.onTap,
+    required this.onChanged,
+    required this.canEdit,
   });
 
   String getLocalizedPowerLevelString(BuildContext context) {
@@ -66,39 +68,32 @@ class PermissionsListTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ListTile(
-      onTap: onTap,
-      leading: CircleAvatar(
-        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
-        foregroundColor: Colors.grey,
-        child: const Icon(Icons.edit_attributes_outlined),
-      ),
       title: Text(getLocalizedPowerLevelString(context)),
-      subtitle: Row(
-        children: [
-          Container(
-            padding: const EdgeInsets.all(4),
-            decoration: BoxDecoration(
-              color: Theme.of(context).secondaryHeaderColor,
-              borderRadius: BorderRadius.circular(8),
+      subtitle: Text(
+        L10n.of(context)!.minimumPowerLevel(permission.toString()),
+      ),
+      trailing: DropdownButton<int>(
+        onChanged: canEdit ? onChanged : null,
+        value: {0, 50, 100}.contains(permission) ? permission : null,
+        items: [
+          DropdownMenuItem(
+            value: 0,
+            child: Text(L10n.of(context)!.user),
+          ),
+          DropdownMenuItem(
+            value: 50,
+            child: Text(L10n.of(context)!.moderator),
           ),
-            child: Center(
-              child: Text(permission.toString()),
+          DropdownMenuItem(
+            value: 100,
+            child: Text(L10n.of(context)!.admin),
           ),
+          DropdownMenuItem(
+            value: null,
+            child: Text(L10n.of(context)!.custom),
           ),
-          const SizedBox(width: 8),
-          Text(permission.toLocalizedPowerLevelString(context)),
         ],
       ),
     );
   }
 }
-
-extension on int {
-  String toLocalizedPowerLevelString(BuildContext context) {
-    return this == 100
-        ? L10n.of(context)!.admin
-        : this >= 50
-            ? L10n.of(context)!.moderator
-            : L10n.of(context)!.participant;
-  }
-}