💄 Chat large screen support

lib/router.dart

@@ -17,23 +17,80 @@ import 'package:solian/screens/social.dart';
 import 'package:solian/screens/posts/post_publish.dart';
 import 'package:solian/shells/basic_shell.dart';
 import 'package:solian/shells/nav_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(
     routes: [
       ShellRoute(
-        builder: (context, state, child) =>
+        builder: (context, state, child) => NavShell(
-            NavShell(state: state, showAppBar: false, child: child),
+          state: state,
+          showAppBar: false,
+          showSidebar: false,
+          child: child,
+        ),
         routes: [
           GoRoute(
             path: '/',
             name: 'social',
             builder: (context, state) => const SocialScreen(),
           ),
-          GoRoute(
+          ShellRoute(
-            path: '/chat',
+            builder: (context, state, child) => BasicShell(
-            name: 'chat',
+              state: state,
-            builder: (context, state) => const ChatScreen(),
+              sidebarFirst: true,
+              showAppBar: false,
+              sidebar: const ChatScreen(),
+              child: child,
+            ),
+            routes: [
+              GoRoute(
+                path: '/chat',
+                name: 'chat',
+                builder: (context, state) => SolianTheme.isExtraLargeScreen(context)
+                    ? const EmptyPagePlaceholder()
+                    : const ChatScreen(),
+              ),
+              GoRoute(
+                path: '/chat/organize',
+                name: 'channelOrganizing',
+                builder: (context, state) {
+                  final arguments = state.extra as ChannelOrganizeArguments?;
+                  return ChannelOrganizeScreen(
+                    edit: arguments?.edit,
+                    realm: arguments?.realm,
+                  );
+                },
+              ),
+              GoRoute(
+                path: '/chat/:alias',
+                name: 'channelChat',
+                builder: (context, state) {
+                  return ChannelChatScreen(
+                    alias: state.pathParameters['alias']!,
+                    realm: state.uri.queryParameters['realm'] ?? 'global',
+                  );
+                },
+              ),
+              GoRoute(
+                path: '/chat/:alias/detail',
+                name: 'channelDetail',
+                builder: (context, state) {
+                  final arguments = state.extra as ChannelDetailArguments;
+                  return TitleShell(
+                    showAppBar: SolianTheme.isExtraLargeScreen(context),
+                    state: state,
+                    child: ChannelDetailScreen(
+                      channel: arguments.channel,
+                      profile: arguments.profile,
+                      realm: state.uri.queryParameters['realm'] ?? 'global',
+                    ),
+                  );
+                },
+              ),
+            ],
           ),
           GoRoute(
             path: '/realms',
@@ -94,45 +151,6 @@ abstract class AppRouter {
           ),
         ],
       ),
-      ShellRoute(
-        builder: (context, state, child) =>
-            BasicShell(state: state, child: child),
-        routes: [
-          GoRoute(
-            path: '/chat/:alias/detail',
-            name: 'channelDetail',
-            builder: (context, state) {
-              final arguments = state.extra as ChannelDetailArguments;
-              return ChannelDetailScreen(
-                channel: arguments.channel,
-                profile: arguments.profile,
-                realm: state.uri.queryParameters['realm'] ?? 'global',
-              );
-            },
-          ),
-        ],
-      ),
-      GoRoute(
-        path: '/chat/organize',
-        name: 'channelOrganizing',
-        builder: (context, state) {
-          final arguments = state.extra as ChannelOrganizeArguments?;
-          return ChannelOrganizeScreen(
-            edit: arguments?.edit,
-            realm: arguments?.realm,
-          );
-        },
-      ),
-      GoRoute(
-        path: '/chat/:alias',
-        name: 'channelChat',
-        builder: (context, state) {
-          return ChannelChatScreen(
-            alias: state.pathParameters['alias']!,
-            realm: state.uri.queryParameters['realm'] ?? 'global',
-          );
-        },
-      ),
       ShellRoute(
         builder: (context, state, child) =>
             BasicShell(state: state, child: child),

lib/shells/basic_shell.dart

@@ -5,26 +5,62 @@ import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/prev_page.dart';
+import 'package:solian/widgets/sidebar/sidebar_placeholder.dart';
 
 class BasicShell extends StatelessWidget {
+  final bool showAppBar;
   final GoRouterState state;
   final Widget child;
 
-  const BasicShell({super.key, required this.child, required this.state});
+  final bool sidebarFirst;
+  final Widget? sidebar;
+
+  const BasicShell({
+    super.key,
+    required this.child,
+    required this.state,
+    this.showAppBar = true,
+    this.sidebarFirst = false,
+    this.sidebar,
+  });
+
+  List<Widget> buildContent(BuildContext context) {
+    return [
+      Flexible(
+        flex: 2,
+        child: child,
+      ),
+      if (SolianTheme.isExtraLargeScreen(context))
+        const VerticalDivider(thickness: 0.3, width: 1),
+      if (SolianTheme.isExtraLargeScreen(context))
+        Flexible(
+          flex: 1,
+          child: sidebar ?? const SidebarPlaceholder(),
+        ),
+    ];
+  }
 
   @override
   Widget build(BuildContext context) {
     final canPop = AppRouter.instance.canPop();
 
     return Scaffold(
-      appBar: AppBar(
+      appBar: showAppBar
-        title: AppBarTitle(state.topRoute?.name?.tr ?? 'page'.tr),
+          ? AppBar(
-        centerTitle: false,
+              title: AppBarTitle(state.topRoute?.name?.tr ?? 'page'.tr),
-        toolbarHeight: SolianTheme.toolbarHeight(context),
+              centerTitle: false,
-        leading: canPop ? const PrevPageButton() : null,
+              toolbarHeight: SolianTheme.toolbarHeight(context),
-        automaticallyImplyLeading: false,
+              leading: canPop ? const PrevPageButton() : null,
-      ),
+              automaticallyImplyLeading: false,
-      body: child,
+            )
+          : null,
+      body: SolianTheme.isLargeScreen(context)
+          ? Row(
+              children: sidebarFirst
+                  ? buildContent(context).reversed.toList()
+                  : buildContent(context),
+            )
+          : child,
     );
   }
 }

lib/shells/nav_shell.dart

@@ -10,16 +10,39 @@ import 'package:solian/widgets/sidebar/sidebar_placeholder.dart';
 
 class NavShell extends StatelessWidget {
   final bool showAppBar;
+  final bool showSidebar;
   final GoRouterState state;
   final Widget child;
 
+  final bool sidebarFirst;
+  final Widget? sidebar;
+
   const NavShell({
     super.key,
     required this.child,
     required this.state,
     this.showAppBar = true,
+    this.showSidebar = true,
+    this.sidebarFirst = false,
+    this.sidebar,
   });
 
+  List<Widget> buildContent(BuildContext context) {
+    return [
+      Flexible(
+        flex: 2,
+        child: child,
+      ),
+      if (SolianTheme.isExtraLargeScreen(context))
+        const VerticalDivider(thickness: 0.3, width: 1),
+      if (SolianTheme.isExtraLargeScreen(context))
+        Flexible(
+          flex: 1,
+          child: sidebar ?? const SidebarPlaceholder(),
+        ),
+    ];
+  }
+
   @override
   Widget build(BuildContext context) {
     final canPop = AppRouter.instance.canPop();
@@ -43,17 +66,12 @@ class NavShell extends StatelessWidget {
               children: [
                 const AppNavigationRail(),
                 const VerticalDivider(thickness: 0.3, width: 1),
-                Flexible(
+                if (showSidebar && sidebarFirst)
-                  flex: 2,
+                  ...buildContent(context).reversed
-                  child: child,
+                else if (showSidebar)
-                ),
+                  ...buildContent(context)
-                if (SolianTheme.isExtraLargeScreen(context))
+                else
-                  const VerticalDivider(thickness: 0.3, width: 1),
+                  Expanded(child: child),
-                if (SolianTheme.isExtraLargeScreen(context))
-                  const Flexible(
-                    flex: 1,
-                    child: SidebarPlaceholder(),
-                  ),
               ],
             )
           : child,

lib/shells/title_shell.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:go_router/go_router.dart';
+import 'package:solian/router.dart';
+import 'package:solian/theme.dart';
+import 'package:solian/widgets/app_bar_title.dart';
+import 'package:solian/widgets/prev_page.dart';
+
+class TitleShell extends StatelessWidget {
+  final bool showAppBar;
+  final GoRouterState state;
+  final Widget child;
+
+  const TitleShell({
+    super.key,
+    required this.child,
+    required this.state,
+    this.showAppBar = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final canPop = AppRouter.instance.canPop();
+
+    return Scaffold(
+      appBar: showAppBar
+          ? AppBar(
+        title: AppBarTitle(state.topRoute?.name?.tr ?? 'page'.tr),
+        centerTitle: false,
+        toolbarHeight: SolianTheme.toolbarHeight(context),
+        leading: canPop ? const PrevPageButton() : null,
+        automaticallyImplyLeading: false,
+      )
+          : null,
+      body: child,
+    );
+  }
+}

lib/translations.dart

@@ -202,8 +202,6 @@ class SolianMessages extends Translations {
           'callParticipantVideoOff': 'Turn Off Participant Video',
           'callParticipantVideoOn': 'Turn On Participant Video',
           'callAlreadyOngoing': 'A call is already ongoing',
-          'sidebarPlaceholder':
-              'Your screen is really too large, so we had to leave some space here to prevent the layout from being too messy. In the future, we will add some small widgets here for wealthy users like you to enjoy, but for now, it will stay this way.',
           'badge': 'Badge',
           'badges': 'Badges',
           'badgeGrantAt': 'Badge awarded on @date',
@@ -417,8 +415,6 @@ class SolianMessages extends Translations {
           'callParticipantVideoOff': '静音参与者',
           'callParticipantVideoOn': '解除静音参与者',
           'callAlreadyOngoing': '当前正在进行一则通话',
-          'sidebarPlaceholder':
-              '你的屏幕真的太大啦，我们只好空出一块地方好让布局不那么混乱，未来我们会在此处加入一下小挂件来供你这样的富人玩乐，但现在就这样吧。',
           'badge': '徽章',
           'badges': '徽章',
           'badgeGrantAt': '徽章颁发于 @date',

lib/widgets/sidebar/empty_placeholder.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class EmptyPagePlaceholder extends StatelessWidget {
+  const EmptyPagePlaceholder({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Image.asset('assets/logo.png', width: 80, height: 80),
+    );
+  }
+}

lib/widgets/sidebar/sidebar_placeholder.dart

@@ -6,18 +6,8 @@ class SidebarPlaceholder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Center(
+    return const Center(
-      child: Container(
+      child: Icon(Icons.menu_open, size: 50),
-        constraints: const BoxConstraints(maxWidth: 280),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            const Icon(Icons.menu_open, size: 48),
-            const SizedBox(height: 8),
-            Text('sidebarPlaceholder'.tr, textAlign: TextAlign.center),
-          ],
-        ),
-      ),
     );
   }
 }