2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Spaces UX improvements

Browse source
This commit is contained in:
krille-chan 2023-12-23 15:07:35 +01:00
commit d64b532afe
No known key found for this signature in database
55 changed files with 473 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

7
lib/pages/chat_list/chat_list.dart
View file

@ -95,6 +95,13 @@ class ChatListController extends State<ChatList>
});
}
void createNewSpace() async {
final spaceId = await context.push<String?>('/rooms/newspace');
if (spaceId != null) {
setActiveSpace(spaceId);
}
}
int get selectedIndex {
switch (activeFilter) {
case ActiveFilter.allChats:

3
lib/pages/chat_list/chat_list_body.dart
View file

@ -66,8 +66,7 @@ class ChatListViewBody extends StatelessWidget {
.where((s) => s.hasRoomUpdate)
.rateLimit(const Duration(seconds: 1)),
builder: (context, _) {
if (controller.activeFilter == ActiveFilter.spaces &&
!controller.isSearchMode) {
if (controller.activeFilter == ActiveFilter.spaces) {
return SpaceView(
controller,
scrollController: controller.scrollController,

1
lib/pages/chat_list/chat_list_view.dart
View file

@ -212,6 +212,7 @@ class ChatListView extends StatelessWidget {
activeFilter: controller.activeFilter,
roomsIsEmpty: false,
scrolledToTop: controller.scrolledToTop,
createNewSpace: controller.createNewSpace,
)
: const SizedBox.shrink(),
),

2
lib/pages/chat_list/client_chooser_button.dart
View file

@ -264,7 +264,7 @@ class ClientChooserButton extends StatelessWidget {
context.go('/rooms/newgroup');
break;
case SettingsAction.newSpace:
context.go('/rooms/newspace');
controller.createNewSpace();
break;
case SettingsAction.invite:
FluffyShare.shareInviteLink(context);

469
lib/pages/chat_list/space_view.dart
View file

@ -5,6 +5,7 @@ import 'package:collection/collection.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';
import 'package:matrix/matrix.dart' as sdk;
import 'package:matrix/matrix.dart';
import 'package:fluffychat/pages/chat_list/chat_list.dart';
@ -30,23 +31,57 @@ class SpaceView extends StatefulWidget {
}
class _SpaceViewState extends State<SpaceView> {
static final Map<String, Future<GetSpaceHierarchyResponse>> _requests = {};
static final Map<String, GetSpaceHierarchyResponse> _lastResponse = {};
String? prevBatch;
Object? error;
bool loading = false;
void _refresh() {
setState(() {
_requests.remove(widget.controller.activeSpaceId);
});
@override
void initState() {
loadHierarchy();
super.initState();
}
Future<GetSpaceHierarchyResponse> getFuture(String activeSpaceId) =>
_requests[activeSpaceId] ??= Matrix.of(context).client.getSpaceHierarchy(
void _refresh() {
_lastResponse.remove(widget.controller.activeSpaceId);
loadHierarchy();
}
Future<GetSpaceHierarchyResponse> loadHierarchy([String? prevBatch]) async {
final activeSpaceId = widget.controller.activeSpaceId!;
setState(() {
error = null;
loading = true;
});
try {
final response = await Matrix.of(context).client.getSpaceHierarchy(
activeSpaceId,
maxDepth: 1,
from: prevBatch,
);
if (prevBatch != null) {
response.rooms.insertAll(0, _lastResponse[activeSpaceId]?.rooms ?? []);
}
setState(() {
_lastResponse[activeSpaceId] = response;
});
return _lastResponse[activeSpaceId]!;
} catch (e) {
setState(() {
error = e;
});
rethrow;
} finally {
setState(() {
loading = false;
});
}
}
void _onJoinSpaceChild(SpaceRoomsChunk spaceChild) async {
final client = Matrix.of(context).client;
final space = client.getRoomById(widget.controller.activeSpaceId!);
@ -140,6 +175,91 @@ class _SpaceViewState extends State<SpaceView> {
}
}
void _addChatOrSubSpace() async {
final roomType = await showConfirmationDialog(
context: context,
title: L10n.of(context)!.addChatOrSubSpace,
actions: [
AlertDialogAction(
key: AddRoomType.subspace,
label: L10n.of(context)!.createNewSpace,
),
AlertDialogAction(
key: AddRoomType.chat,
label: L10n.of(context)!.createGroup,
),
],
);
if (roomType == null) return;
final names = await showTextInputDialog(
context: context,
title: roomType == AddRoomType.subspace
? L10n.of(context)!.createNewSpace
: L10n.of(context)!.createGroup,
textFields: [
DialogTextField(
hintText: roomType == AddRoomType.subspace
? L10n.of(context)!.spaceName
: L10n.of(context)!.groupName,
minLines: 1,
maxLines: 1,
maxLength: 64,
validator: (text) {
if (text == null || text.isEmpty) {
return L10n.of(context)!.pleaseChoose;
}
return null;
},
),
DialogTextField(
hintText: L10n.of(context)!.chatDescription,
minLines: 4,
maxLines: 8,
maxLength: 255,
),
],
okLabel: L10n.of(context)!.create,
cancelLabel: L10n.of(context)!.cancel,
);
if (names == null) return;
final client = Matrix.of(context).client;
final result = await showFutureLoadingDialog(
context: context,
future: () async {
late final String roomId;
final activeSpace = client.getRoomById(
widget.controller.activeSpaceId!,
)!;
if (roomType == AddRoomType.subspace) {
roomId = await client.createSpace(
name: names.first,
topic: names.last.isEmpty ? null : names.last,
visibility: activeSpace.joinRules == JoinRules.public
? sdk.Visibility.public
: sdk.Visibility.private,
);
} else {
roomId = await client.createGroupChat(
groupName: names.first,
initialState: names.length > 1 && names.last.isNotEmpty
? [
sdk.StateEvent(
type: sdk.EventTypes.RoomTopic,
content: {'topic': names.last},
),
]
: null,
);
}
await activeSpace.setSpaceChild(roomId);
},
);
if (result.error != null) return;
_refresh();
}
@override
Widget build(BuildContext context) {
final client = Matrix.of(context).client;
@ -195,93 +315,93 @@ class _SpaceViewState extends State<SpaceView> {
],
);
}
return FutureBuilder<GetSpaceHierarchyResponse>(
future: getFuture(activeSpaceId),
builder: (context, snapshot) {
final response = snapshot.data;
final error = snapshot.error;
if (error != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(error.toLocalizedString(context)),
),
IconButton(
onPressed: _refresh,
icon: const Icon(Icons.refresh_outlined),
),
],
);
final parentSpace = allSpaces.firstWhereOrNull(
(space) =>
space.spaceChildren.any((child) => child.roomId == activeSpaceId),
);
return PopScope(
canPop: parentSpace == null,
onPopInvoked: (pop) async {
if (pop) return;
if (parentSpace != null) {
widget.controller.setActiveSpace(parentSpace.id);
}
if (response == null) {
return CustomScrollView(
slivers: [
ChatListHeader(controller: widget.controller),
const SliverFillRemaining(
child: Center(
child: CircularProgressIndicator.adaptive(),
),
},
child: CustomScrollView(
controller: widget.scrollController,
slivers: [
ChatListHeader(controller: widget.controller),
SliverAppBar(
titleSpacing: 0,
title: ListTile(
leading: BackButton(
onPressed: () =>
widget.controller.setActiveSpace(parentSpace?.id),
),
],
);
}
final parentSpace = allSpaces.firstWhereOrNull(
(space) =>
space.spaceChildren.any((child) => child.roomId == activeSpaceId),
);
final spaceChildren = response.rooms;
final canLoadMore = response.nextBatch != null;
return PopScope(
canPop: parentSpace == null,
onPopInvoked: (pop) async {
if (pop) return;
if (parentSpace != null) {
widget.controller.setActiveSpace(parentSpace.id);
}
},
child: CustomScrollView(
controller: widget.scrollController,
slivers: [
ChatListHeader(controller: widget.controller),
SliverList(
title: Text(
parentSpace == null
? L10n.of(context)!.allSpaces
: parentSpace.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!),
),
),
trailing: IconButton(
icon: loading
? const CircularProgressIndicator.adaptive(strokeWidth: 2)
: const Icon(Icons.refresh_outlined),
onPressed: loading ? null : _refresh,
),
),
),
Builder(
builder: (context) {
final response = _lastResponse[activeSpaceId];
final error = this.error;
if (error != null) {
return SliverFillRemaining(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(error.toLocalizedString(context)),
),
IconButton(
onPressed: _refresh,
icon: const Icon(Icons.refresh_outlined),
),
],
),
);
}
if (response == null) {
return SliverFillRemaining(
child: Center(
child: Text(L10n.of(context)!.loadingPleaseWait),
),
);
}
final spaceChildren = response.rooms;
final canLoadMore = response.nextBatch != null;
return SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
if (i == 0) {
return ListTile(
leading: BackButton(
onPressed: () =>
widget.controller.setActiveSpace(parentSpace?.id),
),
title: Text(
parentSpace == null
? L10n.of(context)!.allSpaces
: parentSpace.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!),
),
),
trailing: IconButton(
icon: snapshot.connectionState != ConnectionState.done
? const CircularProgressIndicator.adaptive()
: const Icon(Icons.refresh_outlined),
onPressed:
snapshot.connectionState != ConnectionState.done
? null
: _refresh,
),
);
}
i--;
if (canLoadMore && i == spaceChildren.length) {
return ListTile(
title: Text(L10n.of(context)!.loadMore),
trailing: const Icon(Icons.chevron_right_outlined),
onTap: () {
prevBatch = response.nextBatch;
_refresh();
},
return Padding(
padding: const EdgeInsets.all(16.0),
child: OutlinedButton.icon(
label: loading
? const LinearProgressIndicator()
: Text(L10n.of(context)!.loadMore),
icon: const Icon(Icons.chevron_right_outlined),
onPressed: loading
? null
: () {
loadHierarchy(response.nextBatch);
},
),
);
}
final spaceChild = spaceChildren[i];
@ -299,85 +419,114 @@ class _SpaceViewState extends State<SpaceView> {
? null
: spaceChild.topic;
if (spaceChild.roomId == activeSpaceId) {
return SearchTitle(
title: spaceChild.name ??
spaceChild.canonicalAlias ??
'Space',
icon: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Avatar(
size: 24,
mxContent: spaceChild.avatarUrl,
name: spaceChild.name,
fontSize: 9,
return Column(
mainAxisSize: MainAxisSize.min,
children: [
SearchTitle(
title: spaceChild.name ??
spaceChild.canonicalAlias ??
'Space',
icon: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10.0),
child: Avatar(
size: 24,
mxContent: spaceChild.avatarUrl,
name: spaceChild.name,
fontSize: 9,
),
),
color: Theme.of(context)
.colorScheme
.secondaryContainer
.withAlpha(128),
trailing: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Icon(Icons.edit_outlined),
),
onTap: () => _onJoinSpaceChild(spaceChild),
),
),
color: Theme.of(context)
.colorScheme
.secondaryContainer
.withAlpha(128),
trailing: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Icon(Icons.edit_outlined),
),
onTap: () => _onJoinSpaceChild(spaceChild),
Material(
child: ListTile(
leading: const CircleAvatar(
child: Icon(Icons.group_add_outlined),
),
title: Text(L10n.of(context)!.addChatOrSubSpace),
trailing:
const Icon(Icons.chevron_right_outlined),
onTap: _addChatOrSubSpace,
),
),
],
);
}
return ListTile(
leading: Avatar(
mxContent: spaceChild.avatarUrl,
name: spaceChild.name,
),
title: Row(
children: [
Expanded(
child: Text(
spaceChild.name ??
spaceChild.canonicalAlias ??
L10n.of(context)!.chat,
maxLines: 1,
style:
const TextStyle(fontWeight: FontWeight.bold),
),
),
if (!isSpace) ...[
const Icon(
Icons.people_outline,
size: 16,
),
const SizedBox(width: 4),
Text(
spaceChild.numJoinedMembers.toString(),
style: const TextStyle(fontSize: 14),
),
],
],
),
onTap: () => _onJoinSpaceChild(spaceChild),
onLongPress: () =>
_onSpaceChildContextMenu(spaceChild, room),
subtitle: Text(
topic ??
(isSpace
? L10n.of(context)!.enterSpace
: L10n.of(context)!.enterRoom),
maxLines: 1,
style: TextStyle(
color: Theme.of(context).colorScheme.onBackground,
final name = spaceChild.name ??
spaceChild.canonicalAlias ??
L10n.of(context)!.chat;
if (widget.controller.isSearchMode &&
!name.toLowerCase().contains(
widget.controller.searchController.text,
)) {
return const SizedBox.shrink();
}
return Material(
child: ListTile(
leading: Avatar(
mxContent: spaceChild.avatarUrl,
name: spaceChild.name,
),
title: Row(
children: [
Expanded(
child: Text(
name,
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
if (!isSpace) ...[
const Icon(
Icons.people_outline,
size: 16,
),
const SizedBox(width: 4),
Text(
spaceChild.numJoinedMembers.toString(),
style: const TextStyle(fontSize: 14),
),
],
],
),
onTap: () => room?.isSpace == true
? widget.controller.setActiveSpace(room!.id)
: _onSpaceChildContextMenu(spaceChild, room),
onLongPress: () =>
_onSpaceChildContextMenu(spaceChild, room),
subtitle: Text(
topic ??
(isSpace
? L10n.of(context)!.enterSpace
: L10n.of(context)!.enterRoom),
maxLines: 1,
style: TextStyle(
color: Theme.of(context).colorScheme.onBackground,
),
),
trailing: isSpace
? const Icon(Icons.chevron_right_outlined)
: null,
),
trailing: isSpace
? const Icon(Icons.chevron_right_outlined)
: null,
);
},
childCount: spaceChildren.length + 1 + (canLoadMore ? 1 : 0),
childCount: spaceChildren.length + (canLoadMore ? 1 : 0),
),
),
],
);
},
),
);
},
],
),
);
}
}
@ -387,3 +536,5 @@ enum SpaceChildContextAction {
leave,
removeFromSpace,
}
enum AddRoomType { chat, subspace }

6
lib/pages/chat_list/start_chat_fab.dart
View file

@ -10,15 +10,17 @@ class StartChatFloatingActionButton extends StatelessWidget {
final ActiveFilter activeFilter;
final ValueNotifier<bool> scrolledToTop;
final bool roomsIsEmpty;
final void Function() createNewSpace;
const StartChatFloatingActionButton({
super.key,
required this.activeFilter,
required this.scrolledToTop,
required this.roomsIsEmpty,
required this.createNewSpace,
});
void _onPressed(BuildContext context) {
void _onPressed(BuildContext context) async {
switch (activeFilter) {
case ActiveFilter.allChats:
case ActiveFilter.messages:
@ -28,7 +30,7 @@ class StartChatFloatingActionButton extends StatelessWidget {
context.go('/rooms/newgroup');
break;
case ActiveFilter.spaces:
context.go('/rooms/newspace');
createNewSpace();
break;
}
}

82
lib/pages/new_space/new_space.dart
View file

@ -1,11 +1,15 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:future_loading_dialog/future_loading_dialog.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart' as sdk;
import 'package:matrix/matrix.dart';
import 'package:fluffychat/pages/new_space/new_space_view.dart';
import 'package:fluffychat/utils/localized_exception_extension.dart';
import 'package:fluffychat/widgets/matrix.dart';
class NewSpace extends StatefulWidget {
@ -16,30 +20,82 @@ class NewSpace extends StatefulWidget {
}
class NewSpaceController extends State<NewSpace> {
TextEditingController controller = TextEditingController();
TextEditingController nameController = TextEditingController();
TextEditingController topicController = TextEditingController();
bool publicGroup = false;
bool loading = false;
String? nameError;
String? topicError;
Uint8List? avatar;
Uri? avatarUrl;
void selectPhoto() async {
final photo = await FilePicker.platform.pickFiles(
type: FileType.image,
allowMultiple: false,
withData: true,
);
setState(() {
avatarUrl = null;
avatar = photo?.files.singleOrNull?.bytes;
});
}
void setPublicGroup(bool b) => setState(() => publicGroup = b);
void submitAction([_]) async {
final matrix = Matrix.of(context);
final roomID = await showFutureLoadingDialog(
context: context,
future: () => matrix.client.createRoom(
final client = Matrix.of(context).client;
setState(() {
nameError = topicError = null;
});
if (nameController.text.isEmpty) {
setState(() {
nameError = L10n.of(context)!.pleaseChoose;
});
return;
}
setState(() {
loading = true;
});
try {
final avatar = this.avatar;
avatarUrl ??= avatar == null ? null : await client.uploadContent(avatar);
final spaceId = await client.createRoom(
preset: publicGroup
? sdk.CreateRoomPreset.publicChat
: sdk.CreateRoomPreset.privateChat,
creationContent: {'type': RoomCreationTypes.mSpace},
visibility: publicGroup ? sdk.Visibility.public : null,
roomAliasName: publicGroup && controller.text.isNotEmpty
? controller.text.trim().toLowerCase().replaceAll(' ', '_')
roomAliasName: publicGroup
? nameController.text.trim().toLowerCase().replaceAll(' ', '_')
: null,
name: controller.text.isNotEmpty ? controller.text : null,
),
);
if (roomID.error == null) {
context.go('/rooms/${roomID.result!}');
name: nameController.text.trim(),
topic: topicController.text.isEmpty ? null : topicController.text,
powerLevelContentOverride: {'events_default': 100},
initialState: [
if (avatar != null)
sdk.StateEvent(
type: sdk.EventTypes.RoomAvatar,
content: {'url': avatarUrl.toString()},
),
],
);
if (!mounted) return;
context.pop<String>(spaceId);
} catch (e) {
setState(() {
topicError = e.toLocalizedString(context);
});
} finally {
setState(() {
loading = false;
});
}
// TODO: Go to spaces
}
@override

113
lib/pages/new_space/new_space_view.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
import 'new_space.dart';
@ -12,6 +13,7 @@ class NewSpaceView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final avatar = controller.avatar;
return Scaffold(
appBar: AppBar(
title: Text(L10n.of(context)!.createNewSpace),
@ -20,26 +22,6 @@ class NewSpaceView extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: TextField(
controller: controller.controller,
autofocus: true,
autocorrect: false,
textInputAction: TextInputAction.go,
onSubmitted: controller.submitAction,
decoration: InputDecoration(
labelText: L10n.of(context)!.spaceName,
prefixIcon: const Icon(Icons.people_outlined),
hintText: L10n.of(context)!.enterASpacepName,
),
),
),
SwitchListTile.adaptive(
title: Text(L10n.of(context)!.spaceIsPublic),
value: controller.publicGroup,
onChanged: controller.setPublicGroup,
),
ListTile(
trailing: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
@ -47,13 +29,96 @@ class NewSpaceView extends StatelessWidget {
),
subtitle: Text(L10n.of(context)!.newSpaceDescription),
),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
borderRadius: BorderRadius.circular(90),
onTap: controller.loading ? null : controller.selectPhoto,
child: CircleAvatar(
radius: Avatar.defaultSize / 2,
child: avatar == null
? const Icon(Icons.camera_alt_outlined)
: ClipRRect(
borderRadius: BorderRadius.circular(90),
child: Image.memory(
avatar,
width: Avatar.defaultSize,
height: Avatar.defaultSize,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(width: 16),
Expanded(
child: TextField(
controller: controller.nameController,
autocorrect: false,
readOnly: controller.loading,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.people_outlined),
hintText: L10n.of(context)!.spaceName,
errorText: controller.nameError,
),
),
),
],
),
),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TextField(
controller: controller.topicController,
minLines: 4,
maxLines: 4,
maxLength: 255,
readOnly: controller.loading,
decoration: InputDecoration(
hintText: L10n.of(context)!.addChatDescription,
errorText: controller.topicError,
),
),
),
const SizedBox(height: 16),
SwitchListTile.adaptive(
title: Text(L10n.of(context)!.spaceIsPublic),
value: controller.publicGroup,
onChanged: controller.setPublicGroup,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
foregroundColor: Theme.of(context).colorScheme.onPrimary,
backgroundColor: Theme.of(context).colorScheme.primary,
),
onPressed:
controller.loading ? null : controller.submitAction,
child: controller.loading
? const LinearProgressIndicator()
: Row(
children: [
Expanded(
child: Text(
L10n.of(context)!.createNewSpace,
),
),
Icon(Icons.adaptive.arrow_forward_outlined),
],
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: controller.submitAction,
child: const Icon(Icons.arrow_forward_outlined),
),
);
}
}