From 7599ce86277919240f47b153b1c5461d77c2c6d2 Mon Sep 17 00:00:00 2001 From: Krille Date: Sun, 2 Feb 2025 16:34:09 +0100 Subject: [PATCH] chore: Better connection status indicator --- assets/l10n/intl_en.arb | 10 +- lib/pages/chat/chat_app_bar_title.dart | 93 +++++++++---- lib/pages/chat/chat_view.dart | 2 - lib/pages/chat_list/chat_list_body.dart | 2 - lib/pages/chat_list/chat_list_header.dart | 156 +++++++++++++--------- lib/utils/sync_status_localization.dart | 27 ++++ lib/widgets/connection_status_header.dart | 92 ------------- 7 files changed, 195 insertions(+), 187 deletions(-) create mode 100644 lib/utils/sync_status_localization.dart delete mode 100644 lib/widgets/connection_status_header.dart diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb index c7886dcc5..c69ffeff2 100644 --- a/assets/l10n/intl_en.arb +++ b/assets/l10n/intl_en.arb @@ -1881,6 +1881,13 @@ "type": "text", "placeholders": {} }, + "synchronizingPleaseWaitCounter": " Synchronizing… ({percentage}%)", + "@synchronizingPleaseWaitCounter": { + "type": "text", + "placeholders": { + "percentage": {} + } + }, "systemTheme": "System", "@systemTheme": { "type": "text", @@ -2831,5 +2838,6 @@ } }, "appWantsToUseForLoginDescription": "You hereby allow the app and website to share information about you.", - "open": "Open" + "open": "Open", + "waitingForServer": "Waiting for server..." } diff --git a/lib/pages/chat/chat_app_bar_title.dart b/lib/pages/chat/chat_app_bar_title.dart index 09ead63ce..2b9f2cc37 100644 --- a/lib/pages/chat/chat_app_bar_title.dart +++ b/lib/pages/chat/chat_app_bar_title.dart @@ -2,11 +2,13 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:go_router/go_router.dart'; +import 'package:matrix/matrix.dart'; import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/pages/chat/chat.dart'; import 'package:fluffychat/utils/date_time_extension.dart'; import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart'; +import 'package:fluffychat/utils/sync_status_localization.dart'; import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/presence_builder.dart'; @@ -54,30 +56,73 @@ class ChatAppBarTitle extends StatelessWidget { fontSize: 16, ), ), - AnimatedSize( - duration: FluffyThemes.animationDuration, - child: PresenceBuilder( - userId: room.directChatMatrixID, - builder: (context, presence) { - final lastActiveTimestamp = presence?.lastActiveTimestamp; - final style = Theme.of(context).textTheme.bodySmall; - if (presence?.currentlyActive == true) { - return Text( - L10n.of(context).currentlyActive, - style: style, - ); - } - if (lastActiveTimestamp != null) { - return Text( - L10n.of(context).lastActiveAgo( - lastActiveTimestamp.localizedTimeShort(context), - ), - style: style, - ); - } - return const SizedBox.shrink(); - }, - ), + StreamBuilder( + stream: room.client.onSyncStatus.stream, + builder: (context, snapshot) { + final status = room.client.onSyncStatus.value ?? + const SyncStatusUpdate(SyncStatus.waitingForResponse); + final hide = room.client.onSync.value != null && + status.status != SyncStatus.error && + room.client.prevBatch != null; + return AnimatedSize( + duration: FluffyThemes.animationDuration, + child: hide + ? PresenceBuilder( + userId: room.directChatMatrixID, + builder: (context, presence) { + final lastActiveTimestamp = + presence?.lastActiveTimestamp; + final style = + Theme.of(context).textTheme.bodySmall; + if (presence?.currentlyActive == true) { + return Text( + L10n.of(context).currentlyActive, + style: style, + ); + } + if (lastActiveTimestamp != null) { + return Text( + L10n.of(context).lastActiveAgo( + lastActiveTimestamp + .localizedTimeShort(context), + ), + style: style, + ); + } + return const SizedBox.shrink(); + }, + ) + : Row( + children: [ + if (status.error != null) ...[ + Icon( + Icons.cloud_off_outlined, + size: 12, + color: status.error != null + ? Theme.of(context) + .colorScheme + .onErrorContainer + : null, + ), + const SizedBox(width: 4), + ], + Expanded( + child: Text( + status.calcLocalizedString(context), + style: TextStyle( + fontSize: 12, + color: status.error != null + ? Theme.of(context) + .colorScheme + .onErrorContainer + : null, + ), + ), + ), + ], + ), + ); + }, ), ], ), diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index e716a2a32..b6aad7f3c 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -19,7 +19,6 @@ import 'package:fluffychat/pages/chat/reply_display.dart'; import 'package:fluffychat/utils/account_config.dart'; import 'package:fluffychat/utils/localized_exception_extension.dart'; import 'package:fluffychat/widgets/chat_settings_popup_menu.dart'; -import 'package:fluffychat/widgets/connection_status_header.dart'; import 'package:fluffychat/widgets/future_loading_dialog.dart'; import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/mxc_image.dart'; @@ -354,7 +353,6 @@ class ChatView extends StatelessWidget { : Column( mainAxisSize: MainAxisSize.min, children: [ - const ConnectionStatusHeader(), ReactionsPicker(controller), ReplyDisplay(controller), ChatInputRow(controller), diff --git a/lib/pages/chat_list/chat_list_body.dart b/lib/pages/chat_list/chat_list_body.dart index 8170732c2..18133dadf 100644 --- a/lib/pages/chat_list/chat_list_body.dart +++ b/lib/pages/chat_list/chat_list_body.dart @@ -18,7 +18,6 @@ import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/hover_builder.dart'; import 'package:fluffychat/widgets/public_room_bottom_sheet.dart'; import '../../config/themes.dart'; -import '../../widgets/connection_status_header.dart'; import '../../widgets/matrix.dart'; import 'chat_list_header.dart'; @@ -136,7 +135,6 @@ class ChatListViewBody extends StatelessWidget { onStatusEdit: controller.setStatus, ), ), - const ConnectionStatusHeader(), AnimatedContainer( height: controller.isTorBrowser ? 64 : 0, duration: FluffyThemes.animationDuration, diff --git a/lib/pages/chat_list/chat_list_header.dart b/lib/pages/chat_list/chat_list_header.dart index 2c300cfcc..79166b6ef 100644 --- a/lib/pages/chat_list/chat_list_header.dart +++ b/lib/pages/chat_list/chat_list_header.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/l10n.dart'; +import 'package:matrix/matrix.dart'; import 'package:fluffychat/config/themes.dart'; import 'package:fluffychat/pages/chat_list/chat_list.dart'; import 'package:fluffychat/pages/chat_list/client_chooser_button.dart'; +import 'package:fluffychat/utils/sync_status_localization.dart'; import '../../widgets/matrix.dart'; class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { @@ -20,6 +22,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { @override Widget build(BuildContext context) { final theme = Theme.of(context); + final client = Matrix.of(context).client; return SliverAppBar( floating: true, @@ -28,76 +31,97 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { scrolledUnderElevation: 0, backgroundColor: Colors.transparent, automaticallyImplyLeading: false, - title: TextField( - controller: controller.searchController, - focusNode: controller.searchFocusNode, - textInputAction: TextInputAction.search, - onChanged: (text) => controller.onSearchEnter( - text, - globalSearch: globalSearch, - ), - decoration: InputDecoration( - filled: true, - fillColor: theme.colorScheme.secondaryContainer, - border: OutlineInputBorder( - borderSide: BorderSide.none, - borderRadius: BorderRadius.circular(99), - ), - contentPadding: EdgeInsets.zero, - hintText: L10n.of(context).searchChatsRooms, - hintStyle: TextStyle( - color: theme.colorScheme.onPrimaryContainer, - fontWeight: FontWeight.normal, - ), - floatingLabelBehavior: FloatingLabelBehavior.never, - prefixIcon: controller.isSearchMode - ? IconButton( - tooltip: L10n.of(context).cancel, - icon: const Icon(Icons.close_outlined), - onPressed: controller.cancelSearch, - color: theme.colorScheme.onPrimaryContainer, - ) - : IconButton( - onPressed: controller.startSearch, - icon: Icon( - Icons.search_outlined, - color: theme.colorScheme.onPrimaryContainer, - ), - ), - suffixIcon: controller.isSearchMode && globalSearch - ? controller.isSearching - ? const Padding( - padding: EdgeInsets.symmetric( - vertical: 10.0, - horizontal: 12, - ), - child: SizedBox.square( - dimension: 24, - child: CircularProgressIndicator.adaptive( - strokeWidth: 2, + title: StreamBuilder( + stream: client.onSyncStatus.stream, + builder: (context, snapshot) { + final status = client.onSyncStatus.value ?? + const SyncStatusUpdate(SyncStatus.waitingForResponse); + final hide = client.onSync.value != null && + status.status != SyncStatus.error && + client.prevBatch != null; + return TextField( + controller: controller.searchController, + focusNode: controller.searchFocusNode, + textInputAction: TextInputAction.search, + onChanged: (text) => controller.onSearchEnter( + text, + globalSearch: globalSearch, + ), + decoration: InputDecoration( + filled: true, + fillColor: theme.colorScheme.secondaryContainer, + border: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.circular(99), + ), + contentPadding: EdgeInsets.zero, + label: hide + ? null + : Center( + child: Text( + status.calcLocalizedString(context), + style: TextStyle( + color: status.error != null + ? theme.colorScheme.onErrorContainer + : null, ), ), + ), + hintText: L10n.of(context).searchChatsRooms, + hintStyle: TextStyle( + color: theme.colorScheme.onPrimaryContainer, + fontWeight: FontWeight.normal, + ), + prefixIcon: controller.isSearchMode + ? IconButton( + tooltip: L10n.of(context).cancel, + icon: const Icon(Icons.close_outlined), + onPressed: controller.cancelSearch, + color: theme.colorScheme.onPrimaryContainer, ) - : TextButton.icon( - onPressed: controller.setServer, - style: TextButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(99), - ), - textStyle: const TextStyle(fontSize: 12), + : IconButton( + onPressed: controller.startSearch, + icon: Icon( + Icons.search_outlined, + color: theme.colorScheme.onPrimaryContainer, ), - icon: const Icon(Icons.edit_outlined, size: 16), - label: Text( - controller.searchServer ?? - Matrix.of(context).client.homeserver!.host, - maxLines: 2, - ), - ) - : SizedBox( - width: 0, - child: ClientChooserButton(controller), - ), - ), + ), + suffixIcon: controller.isSearchMode && globalSearch + ? controller.isSearching + ? const Padding( + padding: EdgeInsets.symmetric( + vertical: 10.0, + horizontal: 12, + ), + child: SizedBox.square( + dimension: 24, + child: CircularProgressIndicator.adaptive( + strokeWidth: 2, + ), + ), + ) + : TextButton.icon( + onPressed: controller.setServer, + style: TextButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(99), + ), + textStyle: const TextStyle(fontSize: 12), + ), + icon: const Icon(Icons.edit_outlined, size: 16), + label: Text( + controller.searchServer ?? + Matrix.of(context).client.homeserver!.host, + maxLines: 2, + ), + ) + : SizedBox( + width: 0, + child: ClientChooserButton(controller), + ), + ), + ); + }, ), ); } diff --git a/lib/utils/sync_status_localization.dart b/lib/utils/sync_status_localization.dart new file mode 100644 index 000000000..9cc7888e6 --- /dev/null +++ b/lib/utils/sync_status_localization.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +import 'package:flutter_gen/gen_l10n/l10n.dart'; +import 'package:matrix/matrix.dart'; + +import 'package:fluffychat/utils/localized_exception_extension.dart'; + +extension SyncStatusLocalization on SyncStatusUpdate { + String calcLocalizedString(BuildContext context) { + final progress = this.progress; + switch (status) { + case SyncStatus.waitingForResponse: + return L10n.of(context).waitingForServer; + case SyncStatus.error: + return ((error?.exception ?? Object()) as Object) + .toLocalizedString(context); + case SyncStatus.processing: + case SyncStatus.cleaningUp: + case SyncStatus.finished: + return progress == null + ? L10n.of(context).synchronizingPleaseWait + : L10n.of(context).synchronizingPleaseWaitCounter( + progress.round().toString(), + ); + } + } +} diff --git a/lib/widgets/connection_status_header.dart b/lib/widgets/connection_status_header.dart deleted file mode 100644 index d12e252d4..000000000 --- a/lib/widgets/connection_status_header.dart +++ /dev/null @@ -1,92 +0,0 @@ -import 'dart:async'; - -import 'package:flutter/material.dart'; - -import 'package:flutter_gen/gen_l10n/l10n.dart'; -import 'package:matrix/matrix.dart'; - -import '../config/themes.dart'; -import '../utils/localized_exception_extension.dart'; -import 'matrix.dart'; - -class ConnectionStatusHeader extends StatefulWidget { - const ConnectionStatusHeader({super.key}); - - @override - ConnectionStatusHeaderState createState() => ConnectionStatusHeaderState(); -} - -class ConnectionStatusHeaderState extends State { - late final StreamSubscription _onSyncSub; - - @override - void initState() { - _onSyncSub = Matrix.of(context).client.onSyncStatus.stream.listen( - (_) => setState(() {}), - ); - super.initState(); - } - - @override - void dispose() { - _onSyncSub.cancel(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - final theme = Theme.of(context); - - final client = Matrix.of(context).client; - final status = client.onSyncStatus.value ?? - const SyncStatusUpdate(SyncStatus.waitingForResponse); - final hide = client.onSync.value != null && - status.status != SyncStatus.error && - client.prevBatch != null; - - return AnimatedContainer( - duration: FluffyThemes.animationDuration, - curve: FluffyThemes.animationCurve, - height: hide ? 0 : 36, - clipBehavior: Clip.hardEdge, - decoration: const BoxDecoration(color: Colors.transparent), - padding: const EdgeInsets.symmetric(horizontal: 12), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox( - width: 24, - height: 24, - child: CircularProgressIndicator.adaptive( - strokeWidth: 2, - value: hide ? 1.0 : status.progress, - ), - ), - const SizedBox(width: 12), - Text( - status.toLocalizedString(context), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle(color: theme.colorScheme.onSurface), - ), - ], - ), - ); - } -} - -extension on SyncStatusUpdate { - String toLocalizedString(BuildContext context) { - switch (status) { - case SyncStatus.waitingForResponse: - return L10n.of(context).loadingPleaseWait; - case SyncStatus.error: - return ((error?.exception ?? Object()) as Object) - .toLocalizedString(context); - case SyncStatus.processing: - case SyncStatus.cleaningUp: - case SyncStatus.finished: - return L10n.of(context).synchronizingPleaseWait; - } - } -}