From 542a5e52210995b17d14fe5aa35100e6f19d1b3d Mon Sep 17 00:00:00 2001 From: help4bis Date: Mon, 27 Apr 2026 06:23:27 +1000 Subject: [PATCH] feat: image fullscreen viewer, public room browser - Chat: tap any image to open fullscreen InteractiveViewer (pinch/zoom) - Rooms: public room browser (Find rooms FAB + empty state button) searches Matrix room directory via queryPublicRooms, join from results - Rooms: empty state now shows 'Find rooms' button to onboard new users Co-Authored-By: Claude Sonnet 4.6 --- .../chat/presentation/message_bubble.dart | 69 +++++- .../presentation/public_rooms_dialog.dart | 225 ++++++++++++++++++ .../rooms/presentation/rooms_screen.dart | 20 +- pubspec.yaml | 2 +- 4 files changed, 306 insertions(+), 10 deletions(-) create mode 100644 lib/features/rooms/presentation/public_rooms_dialog.dart diff --git a/lib/features/chat/presentation/message_bubble.dart b/lib/features/chat/presentation/message_bubble.dart index 933b697..7f0ca8c 100644 --- a/lib/features/chat/presentation/message_bubble.dart +++ b/lib/features/chat/presentation/message_bubble.dart @@ -1,4 +1,4 @@ -// Version: 1.2.0 | Created: 2026-04-01 | Updated: 2026-04-10 +// Version: 1.3.0 | Created: 2026-04-01 | Updated: 2026-04-27 // Message bubble widget. Handles text, images, files, redacted, replies. import 'package:cached_network_image/cached_network_image.dart'; @@ -172,11 +172,15 @@ class _ImageContent extends StatelessWidget { @override Widget build(BuildContext context) { - if (message.mediaUrl != null) { - return ClipRRect( + final url = message.mediaUrl; + if (url == null) return const Icon(Icons.image_not_supported); + + return GestureDetector( + onTap: () => _openFullscreen(context, url, message.body), + child: ClipRRect( borderRadius: BorderRadius.circular(8), child: CachedNetworkImage( - imageUrl: message.mediaUrl!, + imageUrl: url, width: 240, fit: BoxFit.cover, placeholder: (_, __) => const SizedBox( @@ -188,9 +192,60 @@ class _ImageContent extends StatelessWidget { child: Center(child: Icon(Icons.broken_image)), ), ), - ); - } - return const Icon(Icons.image_not_supported); + ), + ); + } + + void _openFullscreen(BuildContext context, String url, String? caption) { + Navigator.of(context).push( + MaterialPageRoute( + fullscreenDialog: true, + builder: (_) => _ImageViewer(url: url, caption: caption), + ), + ); + } +} + +class _ImageViewer extends StatelessWidget { + const _ImageViewer({required this.url, this.caption}); + + final String url; + final String? caption; + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.black, + appBar: AppBar( + backgroundColor: Colors.black, + foregroundColor: Colors.white, + title: caption != null + ? Text( + caption!, + style: const TextStyle(fontSize: 14), + overflow: TextOverflow.ellipsis, + ) + : null, + ), + body: Center( + child: InteractiveViewer( + minScale: 0.5, + maxScale: 4, + child: CachedNetworkImage( + imageUrl: url, + fit: BoxFit.contain, + placeholder: (_, __) => const CircularProgressIndicator( + color: Colors.white, + ), + errorWidget: (_, __, ___) => const Icon( + Icons.broken_image, + color: Colors.white, + size: 64, + ), + ), + ), + ), + ); } } diff --git a/lib/features/rooms/presentation/public_rooms_dialog.dart b/lib/features/rooms/presentation/public_rooms_dialog.dart new file mode 100644 index 0000000..8fba88c --- /dev/null +++ b/lib/features/rooms/presentation/public_rooms_dialog.dart @@ -0,0 +1,225 @@ +// Version: 1.0.0 | Created: 2026-04-27 +// Public room browser — search Matrix room directory and join rooms. + +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:go_router/go_router.dart'; +import 'package:matrix/matrix_api_lite.dart' + show PublicRoomQueryFilter, PublicRoomsChunk; +import 'package:riverpod_annotation/riverpod_annotation.dart'; + +import '../../../core/network/matrix_client.dart'; +import '../../../shared/widgets/matrix_avatar.dart'; + +part 'public_rooms_dialog.g.dart'; + +@riverpod +Future> publicRooms( + Ref ref, String searchTerm) async { + final client = ref.watch(matrixClientProvider); + final filter = searchTerm.trim().isEmpty + ? null + : PublicRoomQueryFilter(genericSearchTerm: searchTerm.trim()); + + final response = await client.queryPublicRooms( + filter: filter, + limit: 30, + ); + return response.chunk; +} + +Future showPublicRoomsDialog(BuildContext context) { + return showDialog( + context: context, + builder: (_) => const _PublicRoomsDialog(), + ); +} + +class _PublicRoomsDialog extends ConsumerStatefulWidget { + const _PublicRoomsDialog(); + + @override + ConsumerState<_PublicRoomsDialog> createState() => + _PublicRoomsDialogState(); +} + +class _PublicRoomsDialogState extends ConsumerState<_PublicRoomsDialog> { + final _controller = TextEditingController(); + String _searchTerm = ''; + Timer? _debounce; + String? _joiningRoomId; + + @override + void dispose() { + _debounce?.cancel(); + _controller.dispose(); + super.dispose(); + } + + void _onSearchChanged(String val) { + _debounce?.cancel(); + _debounce = Timer(const Duration(milliseconds: 450), () { + if (mounted) setState(() => _searchTerm = val); + }); + } + + Future _join(PublicRoomsChunk room) async { + if (_joiningRoomId != null) return; + setState(() => _joiningRoomId = room.roomId); + + try { + final client = ref.read(matrixClientProvider); + await client.joinRoom(room.canonicalAlias ?? room.roomId); + if (!mounted) return; + Navigator.of(context).pop(); + context.push('/rooms/${Uri.encodeComponent(room.roomId)}'); + } on Exception catch (e) { + if (!mounted) return; + setState(() => _joiningRoomId = null); + ScaffoldMessenger.of(context).showSnackBar( + SnackBar(content: Text('Could not join room: $e')), + ); + } + } + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final roomsAsync = ref.watch(publicRoomsProvider(_searchTerm)); + + return Dialog( + insetPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32), + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 520, maxHeight: 600), + child: Column( + children: [ + // Header + Padding( + padding: const EdgeInsets.fromLTRB(16, 16, 4, 0), + child: Row( + children: [ + Text( + 'Find rooms', + style: theme.textTheme.titleMedium?.copyWith( + fontWeight: FontWeight.w600, + ), + ), + const Spacer(), + IconButton( + icon: const Icon(Icons.close), + onPressed: () => Navigator.of(context).pop(), + ), + ], + ), + ), + + // Search + Padding( + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + child: TextField( + controller: _controller, + autofocus: true, + decoration: const InputDecoration( + hintText: 'Search public rooms...', + prefixIcon: Icon(Icons.search), + ), + onChanged: _onSearchChanged, + ), + ), + + // Results + Flexible( + child: roomsAsync.when( + loading: () => + const Center(child: CircularProgressIndicator()), + error: (err, _) => Padding( + padding: const EdgeInsets.all(16), + child: Text('Search failed: $err'), + ), + data: (rooms) { + if (rooms.isEmpty) { + return Padding( + padding: const EdgeInsets.all(24), + child: Text( + _searchTerm.isEmpty + ? 'No public rooms found.' + : 'No rooms match "$_searchTerm".', + textAlign: TextAlign.center, + style: theme.textTheme.bodySmall?.copyWith( + color: theme.colorScheme.onSurface.withAlpha(102), + ), + ), + ); + } + + return ListView.separated( + shrinkWrap: true, + itemCount: rooms.length, + separatorBuilder: (_, __) => + const Divider(height: 1, indent: 72), + itemBuilder: (context, index) { + final room = rooms[index]; + final name = room.name ?? + room.canonicalAlias ?? + room.roomId; + final isJoining = _joiningRoomId == room.roomId; + + return ListTile( + leading: MatrixAvatar( + name: name, + avatarUrl: room.avatarUrl?.toString(), + radius: 20, + ), + title: Text( + name, + overflow: TextOverflow.ellipsis, + ), + subtitle: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + if (room.topic != null) + Text( + room.topic!, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.bodySmall, + ), + Text( + '${room.numJoinedMembers} member' + '${room.numJoinedMembers == 1 ? '' : 's'}', + style: theme.textTheme.bodySmall?.copyWith( + color: theme.colorScheme.onSurface + .withAlpha(120), + ), + ), + ], + ), + isThreeLine: room.topic != null, + trailing: isJoining + ? const SizedBox( + width: 20, + height: 20, + child: CircularProgressIndicator( + strokeWidth: 2), + ) + : OutlinedButton( + onPressed: _joiningRoomId != null + ? null + : () => _join(room), + child: const Text('Join'), + ), + ); + }, + ); + }, + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/features/rooms/presentation/rooms_screen.dart b/lib/features/rooms/presentation/rooms_screen.dart index 9ed59fe..f9fabdd 100644 --- a/lib/features/rooms/presentation/rooms_screen.dart +++ b/lib/features/rooms/presentation/rooms_screen.dart @@ -1,4 +1,4 @@ -// Version: 1.4.0 | Created: 2026-04-01 | Updated: 2026-04-27 +// Version: 1.5.0 | Created: 2026-04-01 | Updated: 2026-04-27 // Main rooms list screen with bottom navigation. import 'package:flutter/material.dart'; @@ -9,6 +9,7 @@ import '../../help/presentation/help_tab.dart'; import '../../jitsi/presentation/conference_tab.dart'; import '../../profile/presentation/profile_screen.dart'; import '../../spaces/presentation/spaces_screen.dart'; +import 'public_rooms_dialog.dart'; import 'room_tile.dart'; import 'rooms_controller.dart'; import 'user_search_dialog.dart'; @@ -113,6 +114,13 @@ class _RoomsScreenState extends ConsumerState { ) : null, body: _buildBody(), + floatingActionButton: _selectedIndex == 0 && !_searchActive + ? FloatingActionButton( + onPressed: () => showPublicRoomsDialog(context), + tooltip: 'Find rooms', + child: const Icon(Icons.explore_outlined), + ) + : null, bottomNavigationBar: NavigationBar( selectedIndex: _selectedIndex, onDestinationSelected: (index) => @@ -233,11 +241,19 @@ class _EmptyRoomsState extends StatelessWidget { ), const SizedBox(height: 8), Text( - 'Rooms you join will appear here.', + 'Use the pencil icon above to message someone, or find ' + 'a public room to join.', + textAlign: TextAlign.center, style: theme.textTheme.bodySmall?.copyWith( color: theme.colorScheme.onSurface.withAlpha(102), ), ), + const SizedBox(height: 20), + OutlinedButton.icon( + onPressed: () => showPublicRoomsDialog(context), + icon: const Icon(Icons.explore_outlined), + label: const Text('Find rooms'), + ), ], ), ), diff --git a/pubspec.yaml b/pubspec.yaml index 525086b..36547d4 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,7 @@ name: m8chat_app description: "M8Chat — Matrix chat client for Android, iOS, and Web." publish_to: 'none' -version: 1.3.1+5 +version: 1.4.0+6 environment: sdk: '>=3.11.0 <4.0.0'