feat: add no relay indicator and heads-up notification in chat list

Author: codeswot

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Global No relay indicator
 
 ### Changed
 

assets/pngs/ic_add_chat.png

@@ -11,8 +11,10 @@ import 'package:whitenoise/config/providers/group_provider.dart';
 import 'package:whitenoise/config/providers/polling_provider.dart';
 import 'package:whitenoise/config/providers/profile_provider.dart';
 import 'package:whitenoise/config/providers/profile_ready_card_visibility_provider.dart';
+import 'package:whitenoise/config/providers/relay_status_provider.dart';
 import 'package:whitenoise/config/providers/welcomes_provider.dart';
 import 'package:whitenoise/domain/models/chat_list_item.dart';
+import 'package:whitenoise/models/relay_status.dart';
 import 'package:whitenoise/routing/routes.dart';
 import 'package:whitenoise/src/rust/api/welcomes.dart';
 import 'package:whitenoise/ui/contact_list/new_chat_bottom_sheet.dart';
@@ -24,6 +26,7 @@ import 'package:whitenoise/ui/core/themes/assets.dart';
 import 'package:whitenoise/ui/core/themes/src/extensions.dart';
 import 'package:whitenoise/ui/core/ui/wn_app_bar.dart';
 import 'package:whitenoise/ui/core/ui/wn_bottom_fade.dart';
+import 'package:whitenoise/ui/core/ui/wn_heads_up.dart';
 import 'package:whitenoise/ui/core/ui/wn_text_form_field.dart';
 
 class ChatListScreen extends ConsumerStatefulWidget {
@@ -219,6 +222,13 @@ class _ChatListScreenState extends ConsumerState<ChatListScreen> with TickerProv
                   (item.lastMessage?.content?.toLowerCase().contains(searchLower) ?? false);
             }).toList();
 
+    final noRelayConnected = ref
+        .watch(relayStatusProvider)
+        .relayStatuses
+        .values
+        .every(
+          (status) => status != RelayStatus.connected,
+        );
     return GestureDetector(
       onTap: () {
         if (_searchFocusNode.hasFocus) {
@@ -251,16 +261,22 @@ class _ChatListScreenState extends ConsumerState<ChatListScreen> with TickerProv
                   ),
                   actions: [
                     IconButton(
-                      onPressed: () {
-                        if (_searchFocusNode.hasFocus) {
-                          _searchFocusNode.unfocus();
-                        }
-                        NewChatBottomSheet.show(context);
-                      },
+                      onPressed:
+                          noRelayConnected
+                              ? null
+                              : () {
+                                if (_searchFocusNode.hasFocus) {
+                                  _searchFocusNode.unfocus();
+                                }
+                                NewChatBottomSheet.show(context);
+                              },
                       icon: Image.asset(
-                        AssetsPaths.icAddNewChat,
-                        width: 32.w,
-                        height: 32.w,
+                        noRelayConnected ? AssetsPaths.icOffChat : AssetsPaths.icAddNewChat,
+                        width: 21.w,
+                        height: 21.w,
+                        color: context.colors.primaryForeground.withValues(
+                          alpha: noRelayConnected ? 0.5 : 1.0,
+                        ),
                       ),
                     ),
                     Gap(8.w),
@@ -318,7 +334,26 @@ class _ChatListScreenState extends ConsumerState<ChatListScreen> with TickerProv
                         },
                       ),
                     ),
-
+                  if (noRelayConnected)
+                    SliverToBoxAdapter(
+                      child:
+                          WnStickyHeadsUp(
+                            title: 'No Relays Connected',
+                            subtitle: 'The app won\'t work until you add at least one.',
+                            action: InkWell(
+                              child: Text(
+                                'Connect Relays',
+                                style: TextStyle(
+                                  fontSize: 14.sp,
+                                  color: context.colors.primary,
+                                  fontWeight: FontWeight.w600,
+                                  decoration: TextDecoration.underline,
+                                ),
+                              ),
+                              onTap: () => context.push(Routes.settingsNetwork),
+                            ),
+                          ).animate().fadeIn(),
+                    ),
                   if (_isSearchVisible)
                     SliverPadding(
                       padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 16.h),

assets/pngs/ic_off_chat.png

@@ -59,6 +59,7 @@ class AssetsPaths {
   static const String greenBird = '$_pngsDir/green_bird.png';
   static const String hands = '$_pngsDir/hands.png';
   static const String icAddNewChat = '$_pngsDir/ic_add_chat.png';
+  static const String icOffChat = '$_pngsDir/ic_off_chat.png';
   static const String icNotificationMuted = '$_pngsDir/ic_notification_muted.png';
   static const String icCheckmarkSolid = '$_pngsDir/ic_checkmark_solid.png';
   static const String icCheckmarkDashed = '$_pngsDir/ic_checkmark_dashed.png';

lib/ui/contact_list/chat_list_screen.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:supa_carbon_icons/supa_carbon_icons.dart';
+import 'package:whitenoise/ui/core/themes/src/app_theme.dart';
+
+class WnStickyHeadsUp extends StatelessWidget {
+  const WnStickyHeadsUp({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    this.type = WnHeadingType.error,
+    this.icon,
+    this.action,
+  });
+  final String title;
+  final String subtitle;
+  final IconData? icon;
+  final Widget? action;
+  final WnHeadingType type;
+
+  @override
+  Widget build(BuildContext context) {
+    final color = type.color(context);
+    return Container(
+      padding: EdgeInsets.all(16.w),
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            color: color,
+            width: 1.w,
+          ),
+        ),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Icon(
+            icon ?? type.icon,
+            size: 24.w,
+            color: color,
+          ),
+          Gap(8.w),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  title,
+                  style: TextStyle(
+                    fontSize: 16.sp,
+                    fontWeight: FontWeight.w600,
+                    color: context.colors.primary,
+                  ),
+                ),
+                Gap(4.h),
+                Text(
+                  subtitle,
+                  style: TextStyle(
+                    fontSize: 14.sp,
+                    fontWeight: FontWeight.w500,
+                    color: context.colors.mutedForeground,
+                  ),
+                ),
+                Gap(4.h),
+                if (action != null) action!,
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+enum WnHeadingType {
+  error,
+  warning,
+  info;
+
+  Color color(BuildContext context) {
+    switch (this) {
+      case WnHeadingType.error:
+        return context.colors.destructive;
+      case WnHeadingType.warning:
+        return context.colors.warning;
+      case WnHeadingType.info:
+        return context.colors.info;
+    }
+  }
+
+  IconData get icon {
+    switch (this) {
+      case WnHeadingType.error:
+        return CarbonIcons.error_filled;
+      case WnHeadingType.warning:
+        return CarbonIcons.warning_filled;
+      case WnHeadingType.info:
+        return CarbonIcons.information;
+    }
+  }
+}