✨ Better dashboard design for large screen (and mobile device)

lib/models/channel.dart

@@ -72,6 +72,15 @@ class Channel {
         'realm_id': realmId,
         'is_encrypted': isEncrypted,
       };
+
+  @override
+  bool operator ==(Object other) {
+    if (other is! Channel) return false;
+    return id == other.id;
+  }
+
+  @override
+  int get hashCode => id;
 }
 
 class ChannelMember {

lib/providers/last_read.dart

@@ -12,14 +12,20 @@ class LastReadProvider extends GetxController {
 
   set feedLastReadAt(int? value) {
     if (value == _feedLastReadAt) return;
-    _feedLastReadAt = max(_feedLastReadAt ?? 0, value ?? 0);
+    final newValue = max(_feedLastReadAt ?? 0, value ?? 0);
-    if (value != _feedLastReadAt) _saveToStorage();
+    if (newValue != _feedLastReadAt) {
+      _feedLastReadAt = newValue;
+      _saveToStorage();
+    }
   }
 
   set messagesLastReadAt(int? value) {
     if (value == _messagesLastReadAt) return;
-    _messagesLastReadAt = max(_messagesLastReadAt ?? 0, value ?? 0);
+    final newValue = max(_messagesLastReadAt ?? 0, value ?? 0);
-    if (value != _messagesLastReadAt) _saveToStorage();
+    if (newValue != _messagesLastReadAt) {
+      _messagesLastReadAt = newValue;
+      _saveToStorage();
+    }
   }
 
   LastReadProvider() {

lib/screens/dashboard.dart

@@ -1,16 +1,21 @@
 import 'dart:developer';
 import 'dart:math' hide log;
 
-import 'package:flutter/material.dart';
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart' hide Notification;
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:intl/intl.dart';
 import 'package:solian/exts.dart';
+import 'package:solian/models/channel.dart';
 import 'package:solian/models/daily_sign.dart';
 import 'package:solian/models/event.dart';
+import 'package:solian/models/notification.dart';
 import 'package:solian/models/pagination.dart';
 import 'package:solian/models/post.dart';
+import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/content/posts.dart';
 import 'package:solian/providers/daily_sign.dart';
 import 'package:solian/providers/last_read.dart';
@@ -29,6 +34,7 @@ class DashboardScreen extends StatefulWidget {
 }
 
 class _DashboardScreenState extends State<DashboardScreen> {
+  late final AuthProvider _auth = Get.find();
   late final LastReadProvider _lastRead = Get.find();
   late final WebSocketProvider _ws = Get.find();
   late final PostProvider _posts = Get.find();
@@ -37,6 +43,10 @@ class _DashboardScreenState extends State<DashboardScreen> {
   Color get _unFocusColor =>
       Theme.of(context).colorScheme.onSurface.withOpacity(0.75);
 
+  List<Notification> get _pendingNotifications =>
+      List<Notification>.from(_ws.notifications)
+        ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
+
   List<Post>? _currentPosts;
   int? _currentPostsCount;
 
@@ -54,6 +64,9 @@ class _DashboardScreenState extends State<DashboardScreen> {
   List<Event>? _currentMessages;
   int? _currentMessagesCount;
 
+  Map<Channel, List<Event>>? get _currentGroupedMessages =>
+      _currentMessages?.groupListsBy((x) => x.channel!);
+
   Future<void> _pullMessages() async {
     if (_lastRead.messagesLastReadAt == null) return;
     log('[Dashboard] Pulling messages with pivot: ${_lastRead.messagesLastReadAt}');
@@ -90,24 +103,36 @@ class _DashboardScreenState extends State<DashboardScreen> {
     setState(() => _signingDaily = false);
   }
 
+  Future<void> _pullData() async {
+    if (!_auth.isAuthorized.value) return;
+    await Future.wait([
+      _pullPosts(),
+      _pullMessages(),
+      _pullDaily(),
+    ]);
+  }
+
   @override
   void initState() {
     super.initState();
-    _pullPosts();
+    _pullData();
-    _pullMessages();
-    _pullDaily();
   }
 
   @override
   Widget build(BuildContext context) {
     final width = MediaQuery.of(context).size.width;
 
-    return ListView(
+    return RefreshIndicator(
+      onRefresh: _pullData,
+      child: ListView(
         children: [
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-            Text('today'.tr, style: Theme.of(context).textTheme.headlineSmall),
+              Text(
+                'today'.tr,
+                style: Theme.of(context).textTheme.headlineSmall,
+              ),
               Text(DateFormat('yyyy/MM/dd').format(DateTime.now())),
             ],
           ).paddingOnly(top: 8, left: 18, right: 18, bottom: 12),
@@ -129,8 +154,8 @@ class _DashboardScreenState extends State<DashboardScreen> {
                         children: [
                           Text(
                             DateFormat('dd').format(DateTime.now()),
-                          style:
+                            style: GoogleFonts.robotoMono(
-                              GoogleFonts.robotoMono(fontSize: 22, height: 1.2),
+                                fontSize: 22, height: 1.2),
                           ),
                           Text(
                             DateFormat('yy/MM').format(DateTime.now()),
@@ -170,6 +195,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
             ),
           ).paddingSymmetric(horizontal: 8),
           const Divider(thickness: 0.3).paddingSymmetric(vertical: 8),
+          // Unread notifications
           Obx(
             () => Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -210,21 +236,25 @@ class _DashboardScreenState extends State<DashboardScreen> {
                 if (_ws.notifications.isNotEmpty)
                   SizedBox(
                     height: 76,
-                  width: width,
+                    child: ListView.separated(
-                  child: ListView.builder(
                       scrollDirection: Axis.horizontal,
-                    itemCount: min(_ws.notifications.length, 3),
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
+                      itemCount: min(_pendingNotifications.length, 10),
                       itemBuilder: (context, idx) {
-                      final x = _ws.notifications[idx];
+                        final x = _pendingNotifications[idx];
                         return SizedBox(
-                        width: width,
+                          width: min(360, width),
                           child: Card(
                             child: ListTile(
                               contentPadding: const EdgeInsets.symmetric(
                                 horizontal: 24,
                                 vertical: 4,
                               ),
-                            title: Text(x.title),
+                              title: Text(
+                                x.title,
+                                maxLines: 1,
+                                overflow: TextOverflow.ellipsis,
+                              ),
                               subtitle: Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
@@ -233,15 +263,17 @@ class _DashboardScreenState extends State<DashboardScreen> {
                                 ],
                               ),
                             ),
-                        ).paddingSymmetric(horizontal: 8),
+                          ),
                         );
                       },
+                      separatorBuilder: (_, __) => const Gap(4),
                     ),
                   )
                 else
                   Card(
                     child: ListTile(
-                    contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+                      contentPadding:
+                          const EdgeInsets.symmetric(horizontal: 24),
                       trailing: const Icon(Icons.inbox_outlined),
                       title: Text('notifyEmpty'.tr),
                       subtitle: Text('notifyEmptyCaption'.tr),
@@ -250,6 +282,8 @@ class _DashboardScreenState extends State<DashboardScreen> {
               ],
             ).paddingOnly(bottom: 12),
           ),
+
+          /// Unread friends / followed people posts
           if (_currentPosts?.isNotEmpty ?? false)
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -284,14 +318,13 @@ class _DashboardScreenState extends State<DashboardScreen> {
                 ).paddingOnly(left: 18, right: 18, bottom: 8),
                 SizedBox(
                   height: 360,
-                width: width,
                   child: ListView.builder(
                     scrollDirection: Axis.horizontal,
                     itemCount: _currentPosts!.length,
                     itemBuilder: (context, idx) {
                       final item = _currentPosts![idx];
                       return SizedBox(
-                      width: width,
+                        width: min(480, width),
                         child: Card(
                           child: PostListEntryWidget(
                             item: item,
@@ -301,8 +334,9 @@ class _DashboardScreenState extends State<DashboardScreen> {
                             onUpdate: (_) {
                               _pullPosts();
                             },
-                          backgroundColor:
+                            backgroundColor: Theme.of(context)
-                              Theme.of(context).colorScheme.surfaceContainerLow,
+                                .colorScheme
+                                .surfaceContainerLow,
                           ),
                         ).paddingSymmetric(horizontal: 8),
                       );
@@ -311,6 +345,8 @@ class _DashboardScreenState extends State<DashboardScreen> {
                 )
               ],
             ),
+
+          /// Unread messages part
           if (_currentMessages?.isNotEmpty ?? false)
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -344,15 +380,17 @@ class _DashboardScreenState extends State<DashboardScreen> {
                   ],
                 ).paddingOnly(left: 18, right: 18, bottom: 8),
                 SizedBox(
-                height: 240,
+                  height: 360,
-                width: width,
                   child: ListView.builder(
                     scrollDirection: Axis.horizontal,
-                  itemCount: _currentMessages!.length,
+                    itemCount: _currentGroupedMessages!.length,
                     itemBuilder: (context, idx) {
-                    final item = _currentMessages![idx];
+                      final channel =
+                          _currentGroupedMessages!.keys.elementAt(idx);
+                      final itemList =
+                          _currentGroupedMessages!.values.elementAt(idx);
                       return SizedBox(
-                      width: width,
+                        width: min(520, width),
                         child: Card(
                           child: Column(
                             children: [
@@ -366,37 +404,45 @@ class _DashboardScreenState extends State<DashboardScreen> {
                                   topRight: Radius.circular(8),
                                 )),
                                 leading: CircleAvatar(
-                                backgroundColor: item.channel!.realmId == null
+                                  backgroundColor: channel.realmId == null
                                       ? Theme.of(context).colorScheme.primary
                                       : Colors.transparent,
                                   radius: 20,
                                   child: FaIcon(
                                     FontAwesomeIcons.hashtag,
-                                  color: item.channel!.realmId == null
+                                    color: channel.realmId == null
-                                      ? Theme.of(context).colorScheme.onPrimary
+                                        ? Theme.of(context)
+                                            .colorScheme
+                                            .onPrimary
                                         : Theme.of(context).colorScheme.primary,
                                     size: 16,
                                   ),
                                 ),
                                 contentPadding:
                                     const EdgeInsets.symmetric(horizontal: 16),
-                              title: Text(item.channel!.name),
+                                title: Text(channel.name),
-                              subtitle: Text(item.channel!.description),
+                                subtitle: Text(channel.description),
                                 onTap: () {
                                   AppRouter.instance.pushNamed(
                                     'channelChat',
-                                  pathParameters: {
+                                    pathParameters: {'alias': channel.alias},
-                                    'alias': item.channel!.alias
-                                  },
                                     queryParameters: {
-                                    if (item.channel!.realmId != null)
+                                      if (channel.realmId != null)
-                                      'realm': item.channel!.realm!.alias,
+                                        'realm': channel.realm!.alias,
                                     },
                                   );
                                 },
                               ),
-                            ChatEvent(item: item).paddingOnly(
+                              Expanded(
-                                bottom: 8, top: 16, left: 8, right: 8),
+                                child: ListView.builder(
+                                  itemCount: itemList.length,
+                                  itemBuilder: (context, idx) {
+                                    final item = itemList[idx];
+                                    return ChatEvent(item: item).paddingOnly(
+                                        bottom: 8, top: 16, left: 8, right: 8);
+                                  },
+                                ),
+                              ),
                             ],
                           ),
                         ).paddingSymmetric(horizontal: 8),
@@ -415,7 +461,13 @@ class _DashboardScreenState extends State<DashboardScreen> {
               ),
               Text(
                 'dashboardFooter'.tr,
-              style: GoogleFonts.notoSerifHk(
+                style: [const Locale('zh', 'CN'), const Locale('zh', 'HK')]
+                        .contains(Get.deviceLocale)
+                    ? GoogleFonts.notoSerifHk(
+                        color: _unFocusColor,
+                        fontSize: 12,
+                      )
+                    : TextStyle(
                         color: _unFocusColor,
                         fontSize: 12,
                       ),
@@ -423,6 +475,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
             ],
           ).paddingAll(8),
         ],
+      ),
     );
   }
 }

lib/widgets/navigation/app_navigation_drawer.dart

@@ -26,7 +26,7 @@ class AppNavigationDrawer extends StatefulWidget {
 
 class _AppNavigationDrawerState extends State<AppNavigationDrawer>
     with TickerProviderStateMixin {
-  bool _isCollapsed = false;
+  bool _isCollapsed = true;
 
   late final AnimationController _drawerAnimationController =
       AnimationController(

pubspec.lock

@@ -885,6 +885,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.0"
+  gap:
+    dependency: "direct main"
+    description:
+      name: gap
+      sha256: f19387d4e32f849394758b91377f9153a1b41d79513ef7668c088c77dbc6955d
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.1"
   get:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -76,6 +76,7 @@ dependencies:
   google_fonts: ^6.2.1
   freezed_annotation: ^2.4.4
   json_annotation: ^4.9.0
+  gap: ^3.0.1
 
 dev_dependencies:
   flutter_test: