📱 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,8 +141,6 @@ class _ChatScreenState extends State<ChatScreen> {
     return Obx(
       () => DefaultTabController(
         length: 2 + realms.availableRealms.length,
-        child: Material(
-          color: Theme.of(context).colorScheme.surface,
         child: Scaffold(
           appBar: AppBar(
             leading: Obx(() {
@@ -132,14 +166,13 @@ 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.pushNamed('channelOrganizing').then(
                         (value) {
                           if (value != null) {
-                              _channels.refreshAvailableChannel();
+                            _loadAllChannels();
                           }
                         },
                       );
@@ -152,8 +185,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 channels = Get.find();
@@ -161,7 +193,7 @@ class _ChatScreenState extends State<ChatScreen> {
                           .createDirectChannel(context, 'global')
                           .then((resp) {
                         if (resp != null) {
-                            _channels.refreshAvailableChannel();
+                          _loadAllChannels();
                         }
                       }).catchError((e) {
                         context.showErrorDialog(e);
@@ -176,7 +208,7 @@ class _ChatScreenState extends State<ChatScreen> {
             ],
             bottom: TabBar(
               isScrollable: true,
-                dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
+              dividerHeight: 0.3,
               tabAlignment: TabAlignment.startOffset,
               tabs: [
                 Tab(
@@ -185,8 +217,7 @@ class _ChatScreenState extends State<ChatScreen> {
                     children: [
                       CircleAvatar(
                         radius: 14,
-                          backgroundColor:
+                        backgroundColor: Theme.of(context).colorScheme.primary,
-                              Theme.of(context).colorScheme.primary,
                         child: const Icon(
                           Icons.forum,
                           size: 16,
@@ -287,7 +318,6 @@ class _ChatScreenState extends State<ChatScreen> {
           }),
         ),
       ),
-      ),
     );
   }
 }

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