📱 New layout for the landscape device

assets/locales/en_us.json

@@ -466,5 +466,7 @@
   "learnMoreAboutPerson": "Learn more about that person",
   "global": "Global",
   "all": "All",
-  "unablePreview": "Unable to preview"
+  "unablePreview": "Unable to preview",
+  "dashboardNav": "Dash",
+  "accountNav": "You"
 }

assets/locales/zh_cn.json

@@ -462,5 +462,7 @@
   "learnMoreAboutPerson": "了解关于 TA 的更多",
   "global": "全局",
   "all": "全部",
-  "unablePreview": "无法预览"
+  "unablePreview": "无法预览",
+  "dashboardNav": "仪表盘",
+  "accountNav": "您"
 }

lib/bootstrapper.dart

@@ -12,7 +12,6 @@ import 'package:solian/exceptions/request.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/platform.dart';
 import 'package:solian/providers/auth.dart';
-import 'package:solian/providers/content/channel.dart';
 import 'package:solian/providers/content/realm.dart';
 import 'package:solian/providers/relation.dart';
 import 'package:solian/providers/theme_switcher.dart';
@@ -198,8 +197,6 @@ class _BootstrapperShellState extends State<BootstrapperShell> {
         final AuthProvider auth = Get.find();
         try {
           await Future.wait([
-            if (auth.isAuthorized.isTrue)
-              Get.find<ChannelProvider>().refreshAvailableChannel(),
             if (auth.isAuthorized.isTrue)
               Get.find<RelationshipProvider>().refreshRelativeList(),
             if (auth.isAuthorized.isTrue)

lib/providers/content/channel.dart

@@ -9,24 +9,6 @@ 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 (auth.isAuthorized.isFalse) throw const UnauthorizedException();
-
-    isLoading.value = true;
-    final resp = await listAvailableChannel();
-    isLoading.value = false;
-
-    availableChannels.value = await listAvailableChannel();
-    availableChannels.refresh();
-  }
 
   Future<Response> getChannel(String alias, {String realm = 'global'}) async {
     final AuthProvider auth = Get.find();

lib/router.dart

@@ -28,6 +28,8 @@ import 'package:solian/screens/posts/post_editor.dart';
 import 'package:solian/screens/settings.dart';
 import 'package:solian/shells/root_shell.dart';
 import 'package:solian/shells/title_shell.dart';
+import 'package:solian/theme.dart';
+import 'package:solian/widgets/sidebar/empty_placeholder.dart';
 
 abstract class AppRouter {
   static GoRouter instance = GoRouter(
@@ -137,12 +139,14 @@ abstract class AppRouter {
   );
 
   static final ShellRoute _chatRoute = ShellRoute(
-    builder: (context, state, child) => child,
+    builder: (context, state, child) => ChatListShell(child: child),
     routes: [
       GoRoute(
         path: '/chat',
         name: 'chat',
-        builder: (context, state) => const ChatScreen(),
+        builder: (context, state) => AppTheme.isLargeScreen(context)
+            ? const EmptyPagePlaceholder()
+            : const ChatScreen(),
       ),
       GoRoute(
         path: '/chat/organize',

lib/screens/auth/signin.dart

@@ -7,7 +7,6 @@ import 'package:solian/exceptions/request.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/auth.dart';
 import 'package:solian/providers/auth.dart';
-import 'package:solian/providers/content/channel.dart';
 import 'package:solian/providers/content/realm.dart';
 import 'package:solian/providers/relation.dart';
 import 'package:solian/providers/websocket.dart';
@@ -177,7 +176,6 @@ class _SignInScreenState extends State<SignInScreen> {
           await auth.refreshAuthorizeStatus();
           await auth.refreshUserProfile();
 
-          Get.find<ChannelProvider>().refreshAvailableChannel();
           Get.find<RealmProvider>().refreshAvailableRealms();
           Get.find<RelationshipProvider>().refreshRelativeList();
           Get.find<WebSocketProvider>().registerPushNotifications();

lib/screens/chat.dart

@@ -19,15 +19,51 @@ 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/sidebar/empty_placeholder.dart';
 
-class ChatScreen extends StatefulWidget {
+class ChatScreen extends StatelessWidget {
   const ChatScreen({super.key});
 
   @override
-  State<ChatScreen> createState() => _ChatScreenState();
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).colorScheme.surface,
+      child: const ChatList(),
+    );
+  }
 }
 
-class _ChatScreenState extends State<ChatScreen> {
+class ChatListShell extends StatelessWidget {
+  final Widget? child;
+
+  const ChatListShell({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).colorScheme.surface,
+      child: Row(
+        children: [
+          const SizedBox(
+            width: 360,
+            child: ChatList(),
+          ),
+          const VerticalDivider(thickness: 0.3, width: 0.3),
+          Expanded(child: child ?? const EmptyPagePlaceholder()),
+        ],
+      ),
+    );
+  }
+}
+
+class ChatList extends StatefulWidget {
+  const ChatList({super.key});
+
+  @override
+  State<ChatList> createState() => _ChatListState();
+}
+
+class _ChatListState extends State<ChatList> {
   List<Channel> _normalChannels = List.empty();
   List<Channel> _directChannels = List.empty();
   final Map<String, List<Channel>> _realmChannels = {};
@@ -105,187 +141,181 @@ class _ChatScreenState extends State<ChatScreen> {
     return Obx(
       () => DefaultTabController(
         length: 2 + realms.availableRealms.length,
-        child: Material(
+        child: Scaffold(
-          color: Theme.of(context).colorScheme.surface,
+          appBar: AppBar(
-          child: Scaffold(
+            leading: Obx(() {
-            appBar: AppBar(
+              final adaptive = AppBarLeadingButton.adaptive(context);
-              leading: Obx(() {
+              if (adaptive != null) return adaptive;
-                final adaptive = AppBarLeadingButton.adaptive(context);
+              if (_channels.isLoading.value) {
-                if (adaptive != null) return adaptive;
+                return const CircularProgressIndicator(
-                if (_channels.isLoading.value) {
+                  strokeWidth: 3,
-                  return const CircularProgressIndicator(
+                ).paddingAll(18);
-                    strokeWidth: 3,
+              }
-                  ).paddingAll(18);
+              return const SizedBox.shrink();
-                }
+            }),
-                return const SizedBox.shrink();
+            title: AppBarTitle('chat'.tr),
-              }),
+            centerTitle: true,
-              title: AppBarTitle('chat'.tr),
+            toolbarHeight: AppTheme.toolbarHeight(context),
-              centerTitle: true,
+            actions: [
-              toolbarHeight: AppTheme.toolbarHeight(context),
+              const BackgroundStateWidget(),
-              actions: [
+              const NotificationButton(),
-                const BackgroundStateWidget(),
+              PopupMenuButton(
-                const NotificationButton(),
+                icon: const Icon(Icons.add_circle),
-                PopupMenuButton(
+                itemBuilder: (BuildContext context) => [
-                  icon: const Icon(Icons.add_circle),
+                  PopupMenuItem(
-                  itemBuilder: (BuildContext context) => [
+                    child: ListTile(
-                    PopupMenuItem(
+                      title: Text('channelOrganizeCommon'.tr),
-                      child: ListTile(
+                      leading: const Icon(Icons.tag),
-                        title: Text('channelOrganizeCommon'.tr),
+                      contentPadding: const EdgeInsets.symmetric(horizontal: 8),
-                        leading: const Icon(Icons.tag),
-                        contentPadding:
-                            const EdgeInsets.symmetric(horizontal: 8),
-                      ),
-                      onTap: () {
-                        AppRouter.instance.pushNamed('channelOrganizing').then(
-                          (value) {
-                            if (value != null) {
-                              _channels.refreshAvailableChannel();
-                            }
-                          },
-                        );
-                      },
                     ),
-                    PopupMenuItem(
+                    onTap: () {
-                      child: ListTile(
+                      AppRouter.instance.pushNamed('channelOrganizing').then(
-                        title: Text('channelOrganizeDirect'.tr),
+                        (value) {
-                        leading: const FaIcon(
+                          if (value != null) {
-                          FontAwesomeIcons.userGroup,
+                            _loadAllChannels();
-                          size: 16,
-                        ),
-                        contentPadding:
-                            const EdgeInsets.symmetric(horizontal: 8),
-                      ),
-                      onTap: () {
-                        final ChannelProvider channels = Get.find();
-                        channels
-                            .createDirectChannel(context, 'global')
-                            .then((resp) {
-                          if (resp != null) {
-                            _channels.refreshAvailableChannel();
                           }
-                        }).catchError((e) {
+                        },
-                          context.showErrorDialog(e);
+                      );
-                        });
+                    },
-                      },
-                    ),
-                  ],
-                ),
-                SizedBox(
-                  width: AppTheme.isLargeScreen(context) ? 8 : 16,
-                ),
-              ],
-              bottom: TabBar(
-                isScrollable: true,
-                dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
-                tabAlignment: TabAlignment.startOffset,
-                tabs: [
-                  Tab(
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        CircleAvatar(
-                          radius: 14,
-                          backgroundColor:
-                              Theme.of(context).colorScheme.primary,
-                          child: const Icon(
-                            Icons.forum,
-                            size: 16,
-                            color: Colors.white,
-                          ),
-                        ),
-                        const Gap(8),
-                        Text('all'.tr),
-                      ],
-                    ),
                   ),
-                  Tab(
+                  PopupMenuItem(
-                    child: Row(
+                    child: ListTile(
-                      mainAxisSize: MainAxisSize.min,
+                      title: Text('channelOrganizeDirect'.tr),
-                      children: [
+                      leading: const FaIcon(
-                        const CircleAvatar(
+                        FontAwesomeIcons.userGroup,
-                          radius: 14,
+                        size: 16,
-                          child: Icon(
+                      ),
-                            Icons.chat_bubble,
+                      contentPadding: const EdgeInsets.symmetric(horizontal: 8),
-                            size: 16,
-                          ),
-                        ),
-                        const Gap(8),
-                        Text('channelTypeDirect'.tr),
-                      ],
                     ),
+                    onTap: () {
+                      final ChannelProvider channels = Get.find();
+                      channels
+                          .createDirectChannel(context, 'global')
+                          .then((resp) {
+                        if (resp != null) {
+                          _loadAllChannels();
+                        }
+                      }).catchError((e) {
+                        context.showErrorDialog(e);
+                      });
+                    },
                   ),
-                  ...realms.availableRealms.map((x) => Tab(
-                        child: Row(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            AccountAvatar(
-                              content: x.avatar,
-                              radius: 14,
-                              fallbackWidget: const Icon(
-                                Icons.workspaces,
-                                size: 16,
-                              ),
-                            ),
-                            const Gap(8),
-                            Text(x.name),
-                          ],
-                        ),
-                      )),
                 ],
               ),
-            ),
+              SizedBox(
-            body: Obx(() {
+                width: AppTheme.isLargeScreen(context) ? 8 : 16,
-              if (auth.isAuthorized.isFalse) {
+              ),
-                return SigninRequiredOverlay(
+            ],
-                  onDone: () => _loadAllChannels(),
+            bottom: TabBar(
-                );
+              isScrollable: true,
-              }
+              dividerHeight: 0.3,
-
+              tabAlignment: TabAlignment.startOffset,
-              final selfId = auth.userProfile.value!['id'];
+              tabs: [
-
+                Tab(
-              return Column(
+                  child: Row(
-                children: [
+                    mainAxisSize: MainAxisSize.min,
-                  const ChatCallCurrentIndicator(),
+                    children: [
-                  Expanded(
+                      CircleAvatar(
-                    child: TabBarView(
+                        radius: 14,
-                      children: [
+                        backgroundColor: Theme.of(context).colorScheme.primary,
-                        RefreshIndicator(
+                        child: const Icon(
-                          onRefresh: _loadNormalChannels,
+                          Icons.forum,
-                          child: ChannelListWidget(
+                          size: 16,
-                            channels: _sortChannels([
+                          color: Colors.white,
-                              ..._normalChannels,
-                              ..._directChannels,
-                              ..._realmChannels.values.expand((x) => x),
-                            ]),
-                            selfId: selfId,
-                            useReplace: false,
-                          ),
                         ),
-                        RefreshIndicator(
+                      ),
-                          onRefresh: _loadDirectChannels,
+                      const Gap(8),
-                          child: ChannelListWidget(
+                      Text('all'.tr),
-                            channels: _directChannels,
+                    ],
-                            selfId: selfId,
+                  ),
-                            useReplace: false,
+                ),
-                          ),
+                Tab(
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      const CircleAvatar(
+                        radius: 14,
+                        child: Icon(
+                          Icons.chat_bubble,
+                          size: 16,
                         ),
-                        ...realms.availableRealms.map(
+                      ),
-                          (x) => RefreshIndicator(
+                      const Gap(8),
-                            onRefresh: () => _loadRealmChannels(x.alias),
+                      Text('channelTypeDirect'.tr),
-                            child: ChannelListWidget(
+                    ],
-                              channels: _realmChannels[x.alias] ?? [],
+                  ),
-                              selfId: selfId,
+                ),
-                              useReplace: false,
+                ...realms.availableRealms.map((x) => Tab(
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          AccountAvatar(
+                            content: x.avatar,
+                            radius: 14,
+                            fallbackWidget: const Icon(
+                              Icons.workspaces,
+                              size: 16,
                             ),
                           ),
-                        ),
+                          const Gap(8),
-                      ],
+                          Text(x.name),
-                    ),
+                        ],
-                  ),
+                      ),
-                ],
+                    )),
-              );
+              ],
-            }),
+            ),
           ),
+          body: Obx(() {
+            if (auth.isAuthorized.isFalse) {
+              return SigninRequiredOverlay(
+                onDone: () => _loadAllChannels(),
+              );
+            }
+
+            final selfId = auth.userProfile.value!['id'];
+
+            return Column(
+              children: [
+                const ChatCallCurrentIndicator(),
+                Expanded(
+                  child: TabBarView(
+                    children: [
+                      RefreshIndicator(
+                        onRefresh: _loadNormalChannels,
+                        child: ChannelListWidget(
+                          channels: _sortChannels([
+                            ..._normalChannels,
+                            ..._directChannels,
+                            ..._realmChannels.values.expand((x) => x),
+                          ]),
+                          selfId: selfId,
+                          useReplace: false,
+                        ),
+                      ),
+                      RefreshIndicator(
+                        onRefresh: _loadDirectChannels,
+                        child: ChannelListWidget(
+                          channels: _directChannels,
+                          selfId: selfId,
+                          useReplace: false,
+                        ),
+                      ),
+                      ...realms.availableRealms.map(
+                        (x) => RefreshIndicator(
+                          onRefresh: () => _loadRealmChannels(x.alias),
+                          child: ChannelListWidget(
+                            channels: _realmChannels[x.alias] ?? [],
+                            selfId: selfId,
+                            useReplace: false,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            );
+          }),
         ),
       ),
     );

lib/screens/explore.dart

@@ -101,11 +101,39 @@ class _ExploreScreenState extends State<ExploreScreen>
                 ],
                 bottom: TabBar(
                   controller: _tabController,
-                  dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
+                  dividerHeight: 0.3,
+                  tabAlignment: TabAlignment.fill,
                   tabs: [
-                    Tab(text: 'postListNews'.tr),
+                    Tab(
-                    Tab(text: 'postListFriends'.tr),
+                      child: Row(
-                    Tab(text: 'postListShuffle'.tr),
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Icon(Icons.feed, size: 20),
+                          const Gap(8),
+                          Text('postListNews'.tr),
+                        ],
+                      ),
+                    ),
+                    Tab(
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Icon(Icons.people, size: 20),
+                          const Gap(8),
+                          Text('postListFriends'.tr),
+                        ],
+                      ),
+                    ),
+                    Tab(
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Icon(Icons.shuffle_on_outlined, size: 20),
+                          const Gap(8),
+                          Text('postListShuffle'.tr),
+                        ],
+                      ),
+                    ),
                   ],
                 ),
               )

lib/shells/root_shell.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/navigation/app_navigation.dart';
 import 'package:solian/widgets/navigation/app_navigation_bottom.dart';
+import 'package:solian/widgets/navigation/app_navigation_rail.dart';
 
 final GlobalKey<ScaffoldState> rootScaffoldKey = GlobalKey<ScaffoldState>();
 
@@ -40,8 +41,11 @@ class RootShell extends StatelessWidget {
       );
     }
 
+    final showRailNavigation = AppTheme.isLargeScreen(context);
+
     final destNames = AppNavigation.destinations.map((x) => x.page).toList();
-    final showBottomNavigation = destNames.contains(routeName);
+    final showBottomNavigation =
+        destNames.contains(routeName) && !showRailNavigation;
 
     return Scaffold(
       key: rootScaffoldKey,
@@ -53,6 +57,12 @@ class RootShell extends StatelessWidget {
       body: AppTheme.isLargeScreen(context)
           ? Row(
               children: [
+                if (showRailNavigation) const AppNavigationRail(),
+                if (showRailNavigation)
+                  const VerticalDivider(
+                    width: 0.3,
+                    thickness: 0.3,
+                  ),
                 Expanded(child: child),
               ],
             )

lib/widgets/navigation/app_navigation.dart

@@ -6,7 +6,7 @@ abstract class AppNavigation {
   static List<AppNavigationDestination> destinations = [
     AppNavigationDestination(
       icon: const Icon(Icons.dashboard),
-      label: 'dashboard'.tr,
+      label: 'dashboardNav'.tr,
       page: 'dashboard',
     ),
     AppNavigationDestination(
@@ -26,7 +26,7 @@ abstract class AppNavigation {
     ),
     AppNavigationDestination(
       icon: const AppAccountWidget(),
-      label: 'account'.tr,
+      label: 'accountNav'.tr,
       page: 'account',
     ),
   ];

lib/widgets/navigation/app_navigation_bottom.dart

@@ -28,7 +28,7 @@ class _AppNavigationBottomState extends State<AppNavigationBottom> {
       currentIndex: _currentIndex,
       type: BottomNavigationBarType.fixed,
       showUnselectedLabels: false,
-      showSelectedLabels: false,
+      showSelectedLabels: true,
       landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
       items: AppNavigation.destinations
           .map(

lib/widgets/navigation/app_navigation_rail.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:solian/router.dart';
+import 'package:solian/widgets/navigation/app_navigation.dart';
+
+class AppNavigationRail extends StatefulWidget {
+  final int initialIndex;
+
+  const AppNavigationRail({super.key, this.initialIndex = 0});
+
+  @override
+  State<AppNavigationRail> createState() => _AppNavigationRailState();
+}
+
+class _AppNavigationRailState extends State<AppNavigationRail> {
+  int? _currentIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.initialIndex >= 0) {
+      _currentIndex = widget.initialIndex;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationRail(
+      selectedIndex: _currentIndex,
+      labelType: NavigationRailLabelType.selected,
+      groupAlignment: -1,
+      destinations: AppNavigation.destinations
+          .sublist(0, AppNavigation.destinations.length - 1)
+          .map(
+            (x) => NavigationRailDestination(
+              icon: x.icon,
+              label: Text(x.label),
+            ),
+          )
+          .toList(),
+      trailing: Expanded(
+        child: Align(
+          alignment: Alignment.bottomCenter,
+          child: IconButton(
+            icon: AppNavigation.destinations.last.icon,
+            tooltip: AppNavigation.destinations.last.label,
+            onPressed: () {
+              setState(() => _currentIndex = null);
+              AppRouter.instance.goNamed(AppNavigation.destinations.last.page);
+            },
+          ),
+        ),
+      ),
+      onDestinationSelected: (idx) {
+        setState(() => _currentIndex = idx);
+        AppRouter.instance.goNamed(AppNavigation.destinations[idx].page);
+      },
+    );
+  }
+}

lib/widgets/navigation/realm_switcher.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
@@ -18,9 +20,10 @@ class RealmSwitcher extends StatelessWidget {
     return Obx(() {
       return DropdownButtonHideUnderline(
         child: DropdownButton2<Realm?>(
+          iconStyleData: const IconStyleData(iconSize: 0),
           isExpanded: true,
           hint: Text(
-            'Select Item',
+            'Realm Region',
             style: TextStyle(
               fontSize: 14,
               color: Theme.of(context).hintColor,
@@ -71,11 +74,11 @@ class RealmSwitcher extends StatelessWidget {
           onChanged: (Realm? value) {
             navState.focusedRealm.value = value;
           },
-          buttonStyleData: const ButtonStyleData(
+          buttonStyleData: ButtonStyleData(
-            padding: EdgeInsets.symmetric(horizontal: 16),
             height: 48,
-            width: 200,
+            width: max(200, MediaQuery.of(context).size.width * 0.4),
-            decoration: BoxDecoration(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            decoration: const BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(16)),
             ),
           ),

lib/widgets/sidebar/sidebar_placeholder.dart

@@ -1,15 +0,0 @@
-import 'package:flutter/material.dart';
-
-class SidebarPlaceholder extends StatelessWidget {
-  const SidebarPlaceholder({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Material(
-      color: Theme.of(context).colorScheme.surface,
-      child: const Center(
-        child: Icon(Icons.menu_open, size: 50),
-      ),
-    );
-  }
-}