chore: Better connection status indicator

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..."
 }

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(
+                StreamBuilder(
-                  duration: FluffyThemes.animationDuration,
+                  stream: room.client.onSyncStatus.stream,
-                  child: PresenceBuilder(
+                  builder: (context, snapshot) {
-                    userId: room.directChatMatrixID,
+                    final status = room.client.onSyncStatus.value ??
-                    builder: (context, presence) {
+                        const SyncStatusUpdate(SyncStatus.waitingForResponse);
-                      final lastActiveTimestamp = presence?.lastActiveTimestamp;
+                    final hide = room.client.onSync.value != null &&
-                      final style = Theme.of(context).textTheme.bodySmall;
+                        status.status != SyncStatus.error &&
-                      if (presence?.currentlyActive == true) {
+                        room.client.prevBatch != null;
-                        return Text(
+                    return AnimatedSize(
-                          L10n.of(context).currentlyActive,
+                      duration: FluffyThemes.animationDuration,
-                          style: style,
+                      child: hide
-                        );
+                          ? PresenceBuilder(
-                      }
+                              userId: room.directChatMatrixID,
-                      if (lastActiveTimestamp != null) {
+                              builder: (context, presence) {
-                        return Text(
+                                final lastActiveTimestamp =
-                          L10n.of(context).lastActiveAgo(
+                                    presence?.lastActiveTimestamp;
-                            lastActiveTimestamp.localizedTimeShort(context),
+                                final style =
-                          ),
+                                    Theme.of(context).textTheme.bodySmall;
-                          style: style,
+                                if (presence?.currentlyActive == true) {
-                        );
+                                  return Text(
-                      }
+                                    L10n.of(context).currentlyActive,
-                      return const SizedBox.shrink();
+                                    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,
+                                    ),
+                                  ),
+                                ),
+                              ],
+                            ),
+                    );
+                  },
                 ),
               ],
             ),

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),

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,

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(
+      title: StreamBuilder(
-        controller: controller.searchController,
+        stream: client.onSyncStatus.stream,
-        focusNode: controller.searchFocusNode,
+        builder: (context, snapshot) {
-        textInputAction: TextInputAction.search,
+          final status = client.onSyncStatus.value ??
-        onChanged: (text) => controller.onSearchEnter(
+              const SyncStatusUpdate(SyncStatus.waitingForResponse);
-          text,
+          final hide = client.onSync.value != null &&
-          globalSearch: globalSearch,
+              status.status != SyncStatus.error &&
-        ),
+              client.prevBatch != null;
-        decoration: InputDecoration(
+          return TextField(
-          filled: true,
+            controller: controller.searchController,
-          fillColor: theme.colorScheme.secondaryContainer,
+            focusNode: controller.searchFocusNode,
-          border: OutlineInputBorder(
+            textInputAction: TextInputAction.search,
-            borderSide: BorderSide.none,
+            onChanged: (text) => controller.onSearchEnter(
-            borderRadius: BorderRadius.circular(99),
+              text,
-          ),
+              globalSearch: globalSearch,
-          contentPadding: EdgeInsets.zero,
+            ),
-          hintText: L10n.of(context).searchChatsRooms,
+            decoration: InputDecoration(
-          hintStyle: TextStyle(
+              filled: true,
-            color: theme.colorScheme.onPrimaryContainer,
+              fillColor: theme.colorScheme.secondaryContainer,
-            fontWeight: FontWeight.normal,
+              border: OutlineInputBorder(
-          ),
+                borderSide: BorderSide.none,
-          floatingLabelBehavior: FloatingLabelBehavior.never,
+                borderRadius: BorderRadius.circular(99),
-          prefixIcon: controller.isSearchMode
+              ),
-              ? IconButton(
+              contentPadding: EdgeInsets.zero,
-                  tooltip: L10n.of(context).cancel,
+              label: hide
-                  icon: const Icon(Icons.close_outlined),
+                  ? null
-                  onPressed: controller.cancelSearch,
+                  : Center(
-                  color: theme.colorScheme.onPrimaryContainer,
+                      child: Text(
-                )
+                        status.calcLocalizedString(context),
-              : IconButton(
+                        style: TextStyle(
-                  onPressed: controller.startSearch,
+                          color: status.error != null
-                  icon: Icon(
+                              ? theme.colorScheme.onErrorContainer
-                    Icons.search_outlined,
+                              : null,
-                    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,
                         ),
                       ),
+                    ),
+              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(
+                  : IconButton(
-                      onPressed: controller.setServer,
+                      onPressed: controller.startSearch,
-                      style: TextButton.styleFrom(
+                      icon: Icon(
-                        shape: RoundedRectangleBorder(
+                        Icons.search_outlined,
-                          borderRadius: BorderRadius.circular(99),
+                        color: theme.colorScheme.onPrimaryContainer,
-                        ),
-                        textStyle: const TextStyle(fontSize: 12),
                       ),
-                      icon: const Icon(Icons.edit_outlined, size: 16),
+                    ),
-                      label: Text(
+              suffixIcon: controller.isSearchMode && globalSearch
-                        controller.searchServer ??
+                  ? controller.isSearching
-                            Matrix.of(context).client.homeserver!.host,
+                      ? const Padding(
-                        maxLines: 2,
+                          padding: EdgeInsets.symmetric(
-                      ),
+                            vertical: 10.0,
-                    )
+                            horizontal: 12,
-              : SizedBox(
+                          ),
-                  width: 0,
+                          child: SizedBox.square(
-                  child: ClientChooserButton(controller),
+                            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),
+                    ),
+            ),
+          );
+        },
       ),
     );
   }

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(),
+              );
+    }
+  }
+}

lib/widgets/connection_status_header.dart

@@ -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<ConnectionStatusHeader> {
-  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;
-    }
-  }
-}