✨ Large screen sidebar

lib/screens/channel/channel_chat.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -210,6 +211,7 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
     return InkWell(
       child: Container(
         child: ChatMessage(
+          key: Key('m${item.uuid}'),
           item: item,
           isMerged: isMerged,
         ).paddingOnly(
@@ -327,7 +329,7 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
             ],
           ),
           Positioned(
-            bottom: MediaQuery.of(context).padding.bottom,
+            bottom: math.max(MediaQuery.of(context).padding.bottom, 16),
             left: 16,
             right: 16,
             child: ChatMessageInput(

lib/shells/nav_shell.dart

@@ -6,6 +6,7 @@ import 'package:solian/theme.dart';
 import 'package:solian/widgets/prev_page.dart';
 import 'package:solian/widgets/navigation/app_navigation_bottom_bar.dart';
 import 'package:solian/widgets/navigation/app_navigation_rail.dart';
+import 'package:solian/widgets/sidebar/sidebar_placeholder.dart';
 
 class NavShell extends StatelessWidget {
   final bool showAppBar;
@@ -42,7 +43,17 @@ class NavShell extends StatelessWidget {
               children: [
                 const AppNavigationRail(),
                 const VerticalDivider(thickness: 0.3, width: 1),
-                Expanded(child: child),
+                Flexible(
+                  flex: 2,
+                  child: child,
+                ),
+                if (SolianTheme.isExtraLargeScreen(context))
+                  const VerticalDivider(thickness: 0.3, width: 1),
+                if (SolianTheme.isExtraLargeScreen(context))
+                  const Flexible(
+                    flex: 1,
+                    child: SidebarPlaceholder(),
+                  ),
               ],
             )
           : child,

lib/theme.dart

@@ -4,11 +4,15 @@ abstract class SolianTheme {
   static bool isLargeScreen(BuildContext context) =>
       MediaQuery.of(context).size.width > 640;
 
+  static bool isExtraLargeScreen(BuildContext context) =>
+      MediaQuery.of(context).size.width > 720;
+
   static ThemeData build(Brightness brightness) {
     return ThemeData(
       brightness: brightness,
       useMaterial3: true,
-      colorScheme: ColorScheme.fromSeed(brightness: brightness, seedColor: Colors.indigo),
+      colorScheme: ColorScheme.fromSeed(
+          brightness: brightness, seedColor: Colors.indigo),
     );
   }
-}
+}

lib/translations.dart

@@ -182,6 +182,8 @@ 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.'
         },
         'zh_CN': {
           'hide': '隐藏',
@@ -351,6 +353,8 @@ class SolianMessages extends Translations {
           'callParticipantVideoOff': '静音参与者',
           'callParticipantVideoOn': '解除静音参与者',
           'callAlreadyOngoing': '当前正在进行一则通话',
+          'sidebarPlaceholder':
+              '你的屏幕真的太大啦，我们只好空出一块地方好让布局不那么混乱，未来我们会在此处加入一下小挂件来供你这样的富人玩乐，但现在就这样吧。'
         }
       };
 }

lib/widgets/sidebar/sidebar_placeholder.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class SidebarPlaceholder extends StatelessWidget {
+  const SidebarPlaceholder({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Container(
+        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),
+          ],
+        ),
+      ),
+    );
+  }
+}