♻️ Chat listening on sidebar

lib/main.dart

@@ -95,7 +95,7 @@ class SolianApp extends StatelessWidget {
     );
   }
 
-  void _initializeProviders(BuildContext context) {
+  void _initializeProviders(BuildContext context) async {
     Get.lazyPut(() => AuthProvider());
     Get.lazyPut(() => FriendProvider());
     Get.lazyPut(() => FeedProvider());
@@ -108,11 +108,12 @@ class SolianApp extends StatelessWidget {
     Get.lazyPut(() => ChatCallProvider());
 
     final AuthProvider auth = Get.find();
-    auth.isAuthorized.then((value) async {
+    if (await auth.isAuthorized) {
-      if (value) {
       Get.find<AccountProvider>().connect();
       Get.find<ChatProvider>().connect();
 
+      Get.find<ChannelProvider>().refreshAvailableChannel();
+
       try {
         Get.find<AccountProvider>().registerPushNotifications();
       } catch (err) {
@@ -121,6 +122,5 @@ class SolianApp extends StatelessWidget {
         );
       }
     }
-    });
   }
 }

lib/providers/content/channel.dart

@@ -1,10 +1,32 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:solian/models/channel.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/widgets/account/friend_select.dart';
 import 'package:uuid/uuid.dart';
 
 class ChannelProvider extends GetxController {
+  RxBool isLoading = false.obs;
+  RxList<Channel> availableChannels = RxList.empty(growable: true);
+
+  List<Channel> get groupChannels =>
+      availableChannels.where((x) => x.type == 0).toList();
+  List<Channel> get directChannels =>
+      availableChannels.where((x) => x.type == 1).toList();
+
+  Future<void> refreshAvailableChannel() async {
+    final AuthProvider auth = Get.find();
+    if (!await auth.isAuthorized) throw Exception('unauthorized');
+
+    isLoading.value = true;
+    final resp = await listAvailableChannel();
+    isLoading.value = false;
+
+    availableChannels.value =
+        resp.body.map((x) => Channel.fromJson(x)).toList().cast<Channel>();
+    availableChannels.refresh();
+  }
+
   Future<Response> getChannel(String alias, {String realm = 'global'}) async {
     final AuthProvider auth = Get.find();
     if (!await auth.isAuthorized) throw Exception('unauthorized');
@@ -19,7 +41,8 @@ class ChannelProvider extends GetxController {
     return resp;
   }
 
-  Future<Response> getMyChannelProfile(String alias, {String realm = 'global'}) async {
+  Future<Response> getMyChannelProfile(String alias,
+      {String realm = 'global'}) async {
     final AuthProvider auth = Get.find();
     if (!await auth.isAuthorized) throw Exception('unauthorized');
 

lib/router.dart

@@ -19,7 +19,7 @@ import 'package:solian/screens/realms/realm_organize.dart';
 import 'package:solian/screens/realms/realm_view.dart';
 import 'package:solian/screens/home.dart';
 import 'package:solian/screens/posts/post_editor.dart';
-import 'package:solian/shells/basic_shell.dart';
+import 'package:solian/shells/sidebar_shell.dart';
 import 'package:solian/shells/root_shell.dart';
 import 'package:solian/shells/title_shell.dart';
 import 'package:solian/theme.dart';
@@ -115,20 +115,12 @@ abstract class AppRouter {
   );
 
   static final ShellRoute _chatRoute = ShellRoute(
-    builder: (context, state, child) => BasicShell(
+    builder: (context, state, child) => child,
-      state: state,
-      sidebarFirst: true,
-      showAppBar: false,
-      sidebar: const ChatScreen(),
-      child: child,
-    ),
     routes: [
       GoRoute(
         path: '/chat',
         name: 'chat',
-        builder: (context, state) => SolianTheme.isExtraLargeScreen(context)
+        builder: (context, state) => const ChatScreen(),
-            ? const EmptyPagePlaceholder()
-            : const ChatScreen(),
       ),
       GoRoute(
         path: '/chat/organize',
@@ -170,20 +162,12 @@ abstract class AppRouter {
   );
 
   static final ShellRoute _realmRoute = ShellRoute(
-    builder: (context, state, child) => BasicShell(
+    builder: (context, state, child) => child,
-      state: state,
-      sidebarFirst: true,
-      showAppBar: false,
-      sidebar: const RealmListScreen(),
-      child: child,
-    ),
     routes: [
       GoRoute(
         path: '/realms',
         name: 'realms',
-        builder: (context, state) => SolianTheme.isExtraLargeScreen(context)
+        builder: (context, state) => const RealmListScreen(),
-            ? const EmptyPagePlaceholder()
-            : const RealmListScreen(),
       ),
       GoRoute(
         path: '/realms/:alias/detail',
@@ -219,7 +203,7 @@ abstract class AppRouter {
   );
 
   static final ShellRoute _accountRoute = ShellRoute(
-    builder: (context, state, child) => BasicShell(
+    builder: (context, state, child) => SidebarShell(
       state: state,
       sidebarFirst: true,
       showAppBar: false,

lib/screens/chat.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
-import 'package:solian/models/channel.dart';
+import 'package:solian/exts.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/content/channel.dart';
 import 'package:solian/router.dart';
@@ -12,6 +12,7 @@ import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/channel/channel_list.dart';
 import 'package:solian/widgets/chat/call/chat_call_indicator.dart';
 import 'package:solian/widgets/current_state_action.dart';
+import 'package:solian/widgets/sized_container.dart';
 
 class ChatScreen extends StatefulWidget {
   const ChatScreen({super.key});
@@ -21,44 +22,17 @@ class ChatScreen extends StatefulWidget {
 }
 
 class _ChatScreenState extends State<ChatScreen> {
-  bool _isBusy = true;
+  late final ChannelProvider _channels;
-  int? _accountId;
-
-  final List<Channel> _channels = List.empty(growable: true);
-
-  getProfile() async {
-    final AuthProvider auth = Get.find();
-    if (!await auth.isAuthorized) return;
-
-    final prof = await auth.getProfile();
-    _accountId = prof.body['id'];
-  }
-
-  getChannels() async {
-    final AuthProvider auth = Get.find();
-    if (!await auth.isAuthorized) return;
-
-    setState(() => _isBusy = true);
-
-    final ChannelProvider provider = Get.find();
-    final resp = await provider.listAvailableChannel();
-
-    setState(() {
-      _channels.clear();
-      _channels.addAll(
-        resp.body.map((e) => Channel.fromJson(e)).toList().cast<Channel>(),
-      );
-    });
-
-    setState(() => _isBusy = false);
-  }
 
   @override
   void initState() {
     super.initState();
-
+    try {
-    getProfile();
+      _channels = Get.find();
-    getChannels();
+      _channels.refreshAvailableChannel();
+    } catch (e) {
+      context.showErrorDialog(e);
+    }
   }
 
   @override
@@ -67,33 +41,10 @@ class _ChatScreenState extends State<ChatScreen> {
 
     return Material(
       color: Theme.of(context).colorScheme.surface,
-      child: FutureBuilder(
+      child: Scaffold(
-        future: auth.isAuthorized,
+        appBar: AppBar(
-        builder: (context, snapshot) {
-          if (!snapshot.hasData) {
-            return const Center(
-              child: CircularProgressIndicator(),
-            );
-          } else if (snapshot.data == false) {
-            return SigninRequiredOverlay(
-              onSignedIn: () {
-                getChannels();
-              },
-            );
-          }
-
-          return DefaultTabController(
-            length: 2,
-            child: NestedScrollView(
-              headerSliverBuilder: (context, innerBoxIsScrolled) {
-                return [
-                  SliverOverlapAbsorber(
-                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
-                        context),
-                    sliver: SliverAppBar(
           title: AppBarTitle('chat'.tr),
           centerTitle: false,
-                      floating: true,
           toolbarHeight: SolianTheme.toolbarHeight(context),
           actions: [
             const BackgroundStateWidget(),
@@ -105,15 +56,14 @@ class _ChatScreenState extends State<ChatScreen> {
                   child: ListTile(
                     title: Text('channelOrganizeCommon'.tr),
                     leading: const Icon(Icons.tag),
-                                contentPadding:
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 8),
-                                    const EdgeInsets.symmetric(horizontal: 8),
                   ),
                   onTap: () {
-                                AppRouter.instance
+                    AppRouter.instance.pushNamed('channelOrganizing').then(
-                                    .pushNamed('channelOrganizing')
-                                    .then(
                       (value) {
-                                    if (value != null) getChannels();
+                        if (value != null) {
+                          _channels.refreshAvailableChannel();
+                        }
                       },
                     );
                   },
@@ -125,8 +75,7 @@ class _ChatScreenState extends State<ChatScreen> {
                       FontAwesomeIcons.userGroup,
                       size: 16,
                     ),
-                                contentPadding:
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 8),
-                                    const EdgeInsets.symmetric(horizontal: 8),
                   ),
                   onTap: () {
                     final ChannelProvider provider = Get.find();
@@ -134,7 +83,7 @@ class _ChatScreenState extends State<ChatScreen> {
                         .createDirectChannel(context, 'global')
                         .then((resp) {
                       if (resp != null) {
-                                    getChannels();
+                        _channels.refreshAvailableChannel();
                       }
                     });
                   },
@@ -145,67 +94,51 @@ class _ChatScreenState extends State<ChatScreen> {
               width: SolianTheme.isLargeScreen(context) ? 8 : 16,
             ),
           ],
-                      bottom: TabBar(
-                        tabs: [
-                          Tab(
-                            icon: const Icon(Icons.tag),
-                            text: 'channels'.tr,
         ),
-                          Tab(
+        body: FutureBuilder(
-                            icon: const Icon(Icons.chat),
+          future: auth.getProfileWithCheck(),
-                            text: 'channelCategoryDirect'.tr,
+          builder: (context, snapshot) {
-                          ),
+            if (!snapshot.hasData) {
-                        ],
+              return const Center(
-                      ),
+                child: CircularProgressIndicator(),
-                    ),
+              );
-                  ),
+            } else if (snapshot.data == null) {
-                ];
+              return SigninRequiredOverlay(
-              },
+                onSignedIn: () => _channels.refreshAvailableChannel(),
-              body: Builder(builder: (context) {
+              );
-                if (_isBusy) {
-                  return const Center(child: CircularProgressIndicator());
             }
 
-                return TabBarView(
+            final selfId = snapshot.data!.body['id'];
+
+            return Column(
               children: [
-                    Column(
+                Obx(() {
-                      children: [
+                  if (_channels.isLoading.isFalse) {
-                        const ChatCallCurrentIndicator(),
+                    return const SizedBox();
-                        Expanded(
+                  } else {
-                          child: RefreshIndicator(
+                    return const LinearProgressIndicator();
-                            onRefresh: () => getChannels(),
+                  }
-                            child: ChannelListWidget(
-                              channels:
-                                  _channels.where((x) => x.type == 0).toList(),
-                              selfId: _accountId ?? 0,
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                    Column(
-                      children: [
-                        const ChatCallCurrentIndicator(),
-                        Expanded(
-                          child: RefreshIndicator(
-                            onRefresh: () => getChannels(),
-                            child: ChannelListWidget(
-                              channels:
-                                  _channels.where((x) => x.type == 1).toList(),
-                              selfId: _accountId ?? 0,
-                              noCategory: true,
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                  ],
-                );
                 }),
+                const ChatCallCurrentIndicator(),
+                Expanded(
+                  child: CenteredContainer(
+                    child: RefreshIndicator(
+                      onRefresh: _channels.refreshAvailableChannel,
+                      child: Obx(
+                        () => ChannelListWidget(
+                          noCategory: true,
+                          channels: _channels.directChannels,
+                          selfId: selfId,
                         ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
             );
           },
         ),
+      ),
     );
   }
 }

lib/screens/realms.dart

@@ -11,6 +11,7 @@ import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/current_state_action.dart';
+import 'package:solian/widgets/sized_container.dart';
 
 class RealmListScreen extends StatefulWidget {
   const RealmListScreen({super.key});
@@ -56,29 +57,10 @@ class _RealmListScreenState extends State<RealmListScreen> {
 
     return Material(
       color: Theme.of(context).colorScheme.surface,
-      child: FutureBuilder(
+      child: Scaffold(
-        future: auth.isAuthorized,
+        appBar: AppBar(
-        builder: (context, snapshot) {
-          if (!snapshot.hasData) {
-            return const Center(
-              child: CircularProgressIndicator(),
-            );
-          } else if (snapshot.data == false) {
-            return SigninRequiredOverlay(
-              onSignedIn: () {
-                getRealms();
-              },
-            );
-          }
-
-          return RefreshIndicator(
-            onRefresh: () => getRealms(),
-            child: CustomScrollView(
-              slivers: [
-                SliverAppBar(
           title: AppBarTitle('realm'.tr),
           centerTitle: false,
-                  floating: true,
           toolbarHeight: SolianTheme.toolbarHeight(context),
           actions: [
             const BackgroundStateWidget(),
@@ -98,22 +80,43 @@ class _RealmListScreenState extends State<RealmListScreen> {
             ),
           ],
         ),
-                if (_isBusy)
+        body: FutureBuilder(
-                  SliverToBoxAdapter(
+          future: auth.isAuthorized,
-                    child: const LinearProgressIndicator().animate().scaleX(),
+          builder: (context, snapshot) {
-                  ),
+            if (!snapshot.hasData) {
-                SliverList.builder(
+              return const Center(
+                child: CircularProgressIndicator(),
+              );
+            } else if (snapshot.data == false) {
+              return SigninRequiredOverlay(
+                onSignedIn: () {
+                  getRealms();
+                },
+              );
+            }
+
+            return Column(
+              children: [
+                if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+                Expanded(
+                  child: CenteredContainer(
+                    child: RefreshIndicator(
+                      onRefresh: () => getRealms(),
+                      child: ListView.builder(
                         itemCount: _realms.length,
                         itemBuilder: (context, index) {
                           final element = _realms[index];
                           return buildRealm(element);
                         },
-                )
-              ],
                       ),
+                    ),
+                  ),
+                ),
+              ],
             );
           },
         ),
+      ),
     );
   }
 

lib/shells/sidebar_shell.dart

@@ -5,7 +5,7 @@ import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/sidebar/sidebar_placeholder.dart';
 
-class BasicShell extends StatelessWidget {
+class SidebarShell extends StatelessWidget {
   final bool showAppBar;
   final GoRouterState state;
   final Widget child;
@@ -13,7 +13,7 @@ class BasicShell extends StatelessWidget {
   final bool sidebarFirst;
   final Widget? sidebar;
 
-  const BasicShell({
+  const SidebarShell({
     super.key,
     required this.child,
     required this.state,

lib/widgets/channel/channel_list.dart

@@ -8,13 +8,17 @@ import 'package:solian/widgets/account/account_avatar.dart';
 class ChannelListWidget extends StatefulWidget {
   final List<Channel> channels;
   final int selfId;
+  final bool isDense;
   final bool noCategory;
+  final bool useReplace;
 
   const ChannelListWidget({
     super.key,
     required this.channels,
     required this.selfId,
+    this.isDense = false,
     this.noCategory = false,
+    this.useReplace = false,
   });
 
   @override
@@ -48,69 +52,88 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
 
   @override
   void didUpdateWidget(covariant ChannelListWidget oldWidget) {
-    setState(() => mapChannels());
     super.didUpdateWidget(oldWidget);
+    setState(() => mapChannels());
   }
 
   @override
   void initState() {
-    mapChannels();
     super.initState();
+    mapChannels();
   }
 
-  Widget buildItem(Channel element) {
+  void gotoChannel(Channel item) {
-    if (element.type == 1) {
+    if (widget.useReplace) {
-      final otherside = element.members!
+      AppRouter.instance.pushReplacementNamed(
+        'channelChat',
+        pathParameters: {'alias': item.alias},
+        queryParameters: {
+          if (item.realmId != null) 'realm': item.realm!.alias,
+        },
+      );
+    } else {
+      AppRouter.instance.pushNamed(
+        'channelChat',
+        pathParameters: {'alias': item.alias},
+        queryParameters: {
+          if (item.realmId != null) 'realm': item.realm!.alias,
+        },
+      );
+    }
+  }
+
+  Widget buildItem(Channel item) {
+    final padding = widget.isDense
+        ? const EdgeInsets.symmetric(horizontal: 20)
+        : const EdgeInsets.symmetric(horizontal: 24);
+
+    if (item.type == 1) {
+      final otherside = item.members!
           .where((e) => e.account.externalId != widget.selfId)
           .first;
 
       return ListTile(
         leading: AccountAvatar(
           content: otherside.account.avatar,
+          radius: widget.isDense ? 12 : 24,
           bgColor: Colors.indigo,
           feColor: Colors.white,
         ),
-        contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+        contentPadding: padding,
         title: Text(otherside.account.nick),
-        subtitle: Text(
+        subtitle: !widget.isDense
-          'channelDirectDescription'
+            ? Text(
-              .trParams({'username': '@${otherside.account.name}'}),
+                'channelDirectDescription'.trParams(
+                  {'username': '@${otherside.account.name}'},
                 ),
-        onTap: () {
+              )
-          AppRouter.instance.pushNamed(
+            : null,
-            'channelChat',
+        onTap: () => gotoChannel(item),
-            pathParameters: {'alias': element.alias},
-            queryParameters: {
-              if (element.realmId != null) 'realm': element.realm!.alias,
-            },
       );
-        },
+    } else {
-      );
-    }
-
       return ListTile(
-      leading: const CircleAvatar(
+        minTileHeight: item.realmId == null
-        backgroundColor: Colors.indigo,
+            ? 48
+            : widget.isDense
+                ? 24
+                : null,
+        leading: CircleAvatar(
+          backgroundColor:
+              item.realmId == null ? Colors.indigo : Colors.transparent,
+          radius: widget.isDense ? 12 : 24,
           child: FaIcon(
             FontAwesomeIcons.hashtag,
-          color: Colors.white,
+            color: item.realmId == null ? Colors.white : Colors.indigo,
-          size: 16,
+            size: widget.isDense ? 12 : 16,
           ),
         ),
-      contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+        contentPadding: padding,
-      title: Text(element.name),
+        title: Text(item.name),
-      subtitle: Text(element.description),
+        subtitle: !widget.isDense ? Text(item.description) : null,
-      onTap: () {
+        onTap: () => gotoChannel(item),
-        AppRouter.instance.pushNamed(
-          'channelChat',
-          pathParameters: {'alias': element.alias},
-          queryParameters: {
-            if (element.realmId != null) 'realm': element.realm!.alias,
-          },
-        );
-      },
       );
     }
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -137,25 +160,16 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
             return buildItem(element);
           },
         ),
-        ..._inRealms.entries.map((element) {
+        SliverList.list(
-          return SliverList.builder(
+          children: _inRealms.entries.map((element) {
-            itemCount: element.value.length + 1,
+            return ExpansionTile(
-            itemBuilder: (context, index) {
+              tilePadding: const EdgeInsets.symmetric(horizontal: 24),
-              if (index == 0) {
+              minTileHeight: 48,
-                return ListTile(
-                  contentPadding: const EdgeInsets.symmetric(horizontal: 28),
-                  leading: const Icon(Icons.workspaces, size: 20)
-                      .paddingOnly(left: 6, right: 10),
-                  tileColor: Theme.of(context).colorScheme.surfaceContainerHigh,
               title: Text(element.value.first.realm!.name),
+              children: element.value.map((x) => buildItem(x)).toList(),
             );
-              }
+          }).toList(),
-
+        ),
-              final item = element.value[index - 1];
-              return buildItem(item);
-            },
-          );
-        }),
       ],
     );
   }

lib/widgets/navigation/app_navigation_drawer.dart

@@ -3,10 +3,12 @@ import 'package:get/get.dart';
 import 'package:solian/models/account_status.dart';
 import 'package:solian/providers/account_status.dart';
 import 'package:solian/providers/auth.dart';
+import 'package:solian/providers/content/channel.dart';
 import 'package:solian/router.dart';
 import 'package:solian/shells/root_shell.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/account/account_status_action.dart';
+import 'package:solian/widgets/channel/channel_list.dart';
 import 'package:solian/widgets/navigation/app_navigation.dart';
 import 'package:badges/badges.dart' as badges;
 
@@ -21,8 +23,12 @@ class AppNavigationDrawer extends StatefulWidget {
 
 class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
   int? _selectedIndex = 0;
+
   AccountStatus? _accountStatus;
 
+  late final AuthProvider _auth;
+  late final ChannelProvider _channels;
+
   void getStatus() async {
     final StatusProvider provider = Get.find();
 
@@ -50,6 +56,8 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
   @override
   void initState() {
     super.initState();
+    _auth = Get.find();
+    _channels = Get.find();
     detectSelectedIndex();
     getStatus();
   }
@@ -145,7 +153,38 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
         ),
         const Divider(thickness: 0.3, height: 1).paddingOnly(
           top: 12,
-          bottom: 8,
+        ),
+        FutureBuilder(
+          future: _auth.getProfileWithCheck(),
+          builder: (context, snapshot) {
+            if (!snapshot.hasData || snapshot.data == null) {
+              return const SizedBox();
+            }
+
+            final selfId = snapshot.data!.body['id'];
+
+            return Column(
+              children: [
+                ExpansionTile(
+                  title: Text('chat'.tr),
+                  tilePadding: const EdgeInsets.symmetric(horizontal: 24),
+                  children: [
+                    Obx(
+                      () => SizedBox(
+                        height: 360,
+                        child: ChannelListWidget(
+                          channels: _channels.groupChannels,
+                          selfId: selfId,
+                          isDense: true,
+                          useReplace: true,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            );
+          },
         ),
       ],
     );