feat: Filter for room members page and easier approve knocking users

Signed-off-by: Krille <c.kussowski@famedly.com>
This commit is contained in:
Krille 2025-04-13 13:11:14 +02:00
commit 5e7b0bf724
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
7 changed files with 215 additions and 126 deletions

View file

@ -3211,5 +3211,6 @@
"recordAVideo": "Record a video", "recordAVideo": "Record a video",
"optionalMessage": "(Optional) message...", "optionalMessage": "(Optional) message...",
"notSupportedOnThisDevice": "Not supported on this device", "notSupportedOnThisDevice": "Not supported on this device",
"enterNewChat": "Enter new chat" "enterNewChat": "Enter new chat",
"approve": "Approve"
} }

View file

@ -75,6 +75,14 @@ abstract class FluffyThemes {
), ),
contentPadding: const EdgeInsets.all(12), contentPadding: const EdgeInsets.all(12),
), ),
chipTheme: ChipThemeData(
showCheckmark: false,
backgroundColor: colorScheme.surfaceContainer,
side: BorderSide.none,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
),
),
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
toolbarHeight: isColumnMode ? 72 : 56, toolbarHeight: isColumnMode ? 72 : 56,
shadowColor: shadowColor:

View file

@ -30,65 +30,68 @@ class ParticipantListItem extends StatelessWidget {
? L10n.of(context).moderator ? L10n.of(context).moderator
: ''; : '';
return Opacity( return ListTile(
opacity: user.membership == Membership.join ? 1 : 0.5, onTap: () => showMemberActionsPopupMenu(context: context, user: user),
child: ListTile( title: Row(
onTap: () => showMemberActionsPopupMenu(context: context, user: user), children: <Widget>[
title: Row( Expanded(
children: <Widget>[ child: Text(
Expanded( user.calcDisplayname(),
overflow: TextOverflow.ellipsis,
),
),
if (permissionBatch.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: user.powerLevel >= 100
? theme.colorScheme.tertiary
: theme.colorScheme.tertiaryContainer,
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
),
child: Text( child: Text(
user.calcDisplayname(), permissionBatch,
overflow: TextOverflow.ellipsis, style: theme.textTheme.labelSmall?.copyWith(
color: user.powerLevel >= 100
? theme.colorScheme.onTertiary
: theme.colorScheme.onTertiaryContainer,
),
), ),
), ),
if (permissionBatch.isNotEmpty) membershipBatch == null
Container( ? const SizedBox.shrink()
padding: const EdgeInsets.symmetric( : Container(
horizontal: 12, padding:
vertical: 6, const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
), margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: user.powerLevel >= 100 color: theme.colorScheme.secondaryContainer,
? theme.colorScheme.tertiary borderRadius: BorderRadius.circular(8),
: theme.colorScheme.tertiaryContainer,
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
), ),
), child: Center(
child: Text( child: Text(
permissionBatch, membershipBatch,
style: theme.textTheme.labelSmall?.copyWith( style: theme.textTheme.labelSmall?.copyWith(
color: user.powerLevel >= 100 color: theme.colorScheme.onSecondaryContainer,
? theme.colorScheme.onTertiary
: theme.colorScheme.onTertiaryContainer,
),
),
),
membershipBatch == null
? const SizedBox.shrink()
: Container(
padding: const EdgeInsets.all(4),
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: theme.secondaryHeaderColor,
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
membershipBatch,
style: theme.textTheme.labelSmall,
), ),
), ),
), ),
], ),
), ],
subtitle: Text( ),
user.id, subtitle: Text(
maxLines: 1, user.id,
overflow: TextOverflow.ellipsis, maxLines: 1,
), overflow: TextOverflow.ellipsis,
leading: Avatar( ),
leading: Opacity(
opacity: user.membership == Membership.join ? 1 : 0.5,
child: Avatar(
mxContent: user.avatarUrl, mxContent: user.avatarUrl,
name: user.calcDisplayname(), name: user.calcDisplayname(),
presenceUserId: user.stateKey, presenceUserId: user.stateKey,

View file

@ -14,7 +14,6 @@ import 'package:fluffychat/pages/chat_list/status_msg_list.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart'; import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/stream_extension.dart'; import 'package:fluffychat/utils/stream_extension.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart'; import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
import '../../config/themes.dart'; import '../../config/themes.dart';
import '../../widgets/adaptive_dialogs/user_dialog.dart'; import '../../widgets/adaptive_dialogs/user_dialog.dart';
@ -155,7 +154,7 @@ class ChatListViewBody extends StatelessWidget {
child: ListView( child: ListView(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 12.0, horizontal: 12.0,
vertical: 16.0, vertical: 12.0,
), ),
shrinkWrap: true, shrinkWrap: true,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@ -172,53 +171,15 @@ class ChatListViewBody extends StatelessWidget {
] ]
.map( .map(
(filter) => Padding( (filter) => Padding(
padding: padding: const EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 4), horizontal: 4.0,
child: HoverBuilder( ),
builder: (context, hovered) => child: FilterChip(
AnimatedScale( selected: filter == controller.activeFilter,
duration: FluffyThemes.animationDuration, onSelected: (_) =>
curve: FluffyThemes.animationCurve, controller.setActiveFilter(filter),
scale: hovered ? 1.1 : 1.0, label:
child: InkWell( Text(filter.toLocalizedString(context)),
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
onTap: () =>
controller.setActiveFilter(filter),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: filter ==
controller.activeFilter
? theme.colorScheme.primary
: theme.colorScheme
.secondaryContainer,
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
),
alignment: Alignment.center,
child: Text(
filter.toLocalizedString(context),
style: TextStyle(
fontWeight: filter ==
controller.activeFilter
? FontWeight.w500
: FontWeight.normal,
color: filter ==
controller.activeFilter
? theme.colorScheme.onPrimary
: theme.colorScheme
.onSecondaryContainer,
),
),
),
),
),
), ),
), ),
) )

View file

@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
@ -7,6 +9,7 @@ import 'chat_members_view.dart';
class ChatMembersPage extends StatefulWidget { class ChatMembersPage extends StatefulWidget {
final String roomId; final String roomId;
const ChatMembersPage({required this.roomId, super.key}); const ChatMembersPage({required this.roomId, super.key});
@override @override
@ -17,12 +20,27 @@ class ChatMembersController extends State<ChatMembersPage> {
List<User>? members; List<User>? members;
List<User>? filteredMembers; List<User>? filteredMembers;
Object? error; Object? error;
Membership membershipFilter = Membership.join;
final TextEditingController filterController = TextEditingController(); final TextEditingController filterController = TextEditingController();
void setMembershipFilter(Membership membership) {
membershipFilter = membership;
setFilter();
}
void setFilter([_]) async { void setFilter([_]) async {
final filter = filterController.text.toLowerCase().trim(); final filter = filterController.text.toLowerCase().trim();
final members = this
.members
?.where(
(member) =>
membershipFilter == Membership.join ||
member.membership == membershipFilter,
)
.toList();
if (filter.isEmpty) { if (filter.isEmpty) {
setState(() { setState(() {
filteredMembers = members filteredMembers = members
@ -42,7 +60,8 @@ class ChatMembersController extends State<ChatMembersPage> {
}); });
} }
void refreshMembers() async { void refreshMembers([_]) async {
Logs().d('Load room members from', widget.roomId);
try { try {
setState(() { setState(() {
error = null; error = null;
@ -50,7 +69,7 @@ class ChatMembersController extends State<ChatMembersPage> {
final participants = await Matrix.of(context) final participants = await Matrix.of(context)
.client .client
.getRoomById(widget.roomId) .getRoomById(widget.roomId)
?.requestParticipants(); ?.requestParticipants(Membership.values);
if (!mounted) return; if (!mounted) return;
@ -67,10 +86,30 @@ class ChatMembersController extends State<ChatMembersPage> {
} }
} }
StreamSubscription? _updateSub;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
refreshMembers(); refreshMembers();
_updateSub = Matrix.of(context)
.client
.onSync
.stream
.where(
(syncUpdate) =>
syncUpdate.rooms?.join?[widget.roomId]?.timeline?.events
?.any((state) => state.type == EventTypes.RoomMember) ??
false,
)
.listen(refreshMembers);
}
@override
void dispose() {
_updateSub?.cancel();
super.dispose();
} }
@override @override

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/utils/localized_exception_extension.dart'; import 'package:fluffychat/utils/localized_exception_extension.dart';
import '../../widgets/layouts/max_width_body.dart'; import '../../widgets/layouts/max_width_body.dart';
@ -11,6 +12,7 @@ import 'chat_members.dart';
class ChatMembersView extends StatelessWidget { class ChatMembersView extends StatelessWidget {
final ChatMembersController controller; final ChatMembersController controller;
const ChatMembersView(this.controller, {super.key}); const ChatMembersView(this.controller, {super.key});
@override @override
@ -84,29 +86,89 @@ class ChatMembersView extends StatelessWidget {
: ListView.builder( : ListView.builder(
shrinkWrap: true, shrinkWrap: true,
itemCount: members.length + 1, itemCount: members.length + 1,
itemBuilder: (context, i) => i == 0 itemBuilder: (context, i) {
? Padding( if (i == 0) {
padding: const EdgeInsets.all(16.0), final availableFilters = Membership.values
child: TextField( .where(
controller: controller.filterController, (membership) =>
onChanged: controller.setFilter, controller.members?.any(
decoration: InputDecoration( (member) => member.membership == membership,
filled: true, ) ??
fillColor: theme.colorScheme.secondaryContainer, false,
border: OutlineInputBorder( )
borderSide: BorderSide.none, .toList();
borderRadius: BorderRadius.circular(99), availableFilters
.sort((a, b) => a == Membership.join ? -1 : 1);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: controller.filterController,
onChanged: controller.setFilter,
decoration: InputDecoration(
filled: true,
fillColor:
theme.colorScheme.secondaryContainer,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(99),
),
hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
),
prefixIcon: const Icon(Icons.search_outlined),
hintText: L10n.of(context).search,
), ),
hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
),
prefixIcon: const Icon(Icons.search_outlined),
hintText: L10n.of(context).search,
), ),
), ),
) if (availableFilters.length > 1)
: ParticipantListItem(members[i - 1]), SizedBox(
height: 64,
child: ListView.builder(
padding: const EdgeInsets.symmetric(
horizontal: 12.0,
vertical: 12.0,
),
scrollDirection: Axis.horizontal,
itemCount: availableFilters.length,
itemBuilder: (context, i) => Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
),
child: FilterChip(
label: Text(
switch (availableFilters[i]) {
Membership.ban =>
L10n.of(context).banned,
Membership.invite =>
L10n.of(context).invited,
Membership.join =>
L10n.of(context).all,
Membership.knock =>
L10n.of(context).knocking,
Membership.leave =>
L10n.of(context).leftTheChat,
},
),
selected: controller.membershipFilter ==
availableFilters[i],
onSelected: (_) =>
controller.setMembershipFilter(
availableFilters[i],
),
),
),
),
),
],
);
}
i--;
return ParticipantListItem(members[i]);
},
), ),
), ),
); );

View file

@ -84,6 +84,17 @@ void showMemberActionsPopupMenu({
], ],
), ),
), ),
if (user.membership == Membership.knock)
PopupMenuItem(
value: _MemberActions.approve,
child: Row(
children: [
const Icon(Icons.how_to_reg_outlined),
const SizedBox(width: 18),
Text(L10n.of(context).approve),
],
),
),
PopupMenuItem( PopupMenuItem(
enabled: user.room.canChangePowerLevel && user.canChangeUserPowerLevel, enabled: user.room.canChangePowerLevel && user.canChangeUserPowerLevel,
value: _MemberActions.setRole, value: _MemberActions.setRole,
@ -202,9 +213,14 @@ void showMemberActionsPopupMenu({
future: () => user.setPower(power), future: () => user.setPower(power),
); );
return; return;
case _MemberActions.approve:
await showFutureLoadingDialog(
context: context,
future: () => user.room.invite(user.id),
);
return;
case _MemberActions.kick: case _MemberActions.kick:
if (await showOkCancelAlertDialog( if (await showOkCancelAlertDialog(
useRootNavigator: false,
context: context, context: context,
title: L10n.of(context).areYouSure, title: L10n.of(context).areYouSure,
okLabel: L10n.of(context).yes, okLabel: L10n.of(context).yes,
@ -220,7 +236,6 @@ void showMemberActionsPopupMenu({
return; return;
case _MemberActions.ban: case _MemberActions.ban:
if (await showOkCancelAlertDialog( if (await showOkCancelAlertDialog(
useRootNavigator: false,
context: context, context: context,
title: L10n.of(context).areYouSure, title: L10n.of(context).areYouSure,
okLabel: L10n.of(context).yes, okLabel: L10n.of(context).yes,
@ -268,7 +283,6 @@ void showMemberActionsPopupMenu({
return; return;
case _MemberActions.unban: case _MemberActions.unban:
if (await showOkCancelAlertDialog( if (await showOkCancelAlertDialog(
useRootNavigator: false,
context: context, context: context,
title: L10n.of(context).areYouSure, title: L10n.of(context).areYouSure,
okLabel: L10n.of(context).yes, okLabel: L10n.of(context).yes,
@ -290,6 +304,7 @@ enum _MemberActions {
setRole, setRole,
kick, kick,
ban, ban,
approve,
unban, unban,
report, report,
} }