⚗️ Testing desktop layout

lib/route.dart

@@ -16,7 +16,17 @@ class AppRouter extends RootStackRouter {
         AutoRoute(page: ExploreRoute.page, path: 'explore'),
         AutoRoute(page: AccountRoute.page, path: 'account'),
         AutoRoute(page: RealmListRoute.page, path: 'realms'),
-        AutoRoute(page: ChatListRoute.page, path: 'chat'),
+        AutoRoute(
+          page: ChatShellRoute.page,
+          path: 'chat',
+          children: [
+            AutoRoute(page: ChatListRoute.page, path: ''),
+            AutoRoute(page: ChatRoomRoute.page, path: ':id'),
+            AutoRoute(page: NewChatRoute.page, path: 'new'),
+            AutoRoute(page: EditChatRoute.page, path: ':id/edit'),
+            AutoRoute(page: ChatDetailRoute.page, path: ':id/detail'),
+          ],
+        ),
       ],
     ),
     AutoRoute(page: WalletRoute.page, path: '/wallet'),
@@ -47,10 +57,6 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: NewRealmRoute.page, path: '/realms/new'),
     AutoRoute(page: RealmDetailRoute.page, path: '/realms/:slug'),
     AutoRoute(page: EditRealmRoute.page, path: '/realms/:slug/edit'),
-    AutoRoute(page: NewChatRoute.page, path: '/chat/new'),
-    AutoRoute(page: EditChatRoute.page, path: '/chat/:id/edit'),
-    AutoRoute(page: ChatRoomRoute.page, path: '/chat/:id'),
-    AutoRoute(page: ChatDetailRoute.page, path: '/chat/:id/detail'),
     AutoRoute(page: CreatorHubRoute.page, path: '/creators'),
     AutoRoute(page: StickersRoute.page, path: '/creators/:name/stickers'),
     AutoRoute(

lib/route.gr.dart

@@ -209,6 +209,22 @@ class ChatRoomRouteArgs {
   }
 }
 
+/// generated route for
+/// [_i5.ChatShellScreen]
+class ChatShellRoute extends _i25.PageRouteInfo<void> {
+  const ChatShellRoute({List<_i25.PageRouteInfo>? children})
+    : super(ChatShellRoute.name, initialChildren: children);
+
+  static const String name = 'ChatShellRoute';
+
+  static _i25.PageInfo page = _i25.PageInfo(
+    name,
+    builder: (data) {
+      return const _i5.ChatShellScreen();
+    },
+  );
+}
+
 /// generated route for
 /// [_i7.CreateAccountScreen]
 class CreateAccountRoute extends _i25.PageRouteInfo<void> {

lib/screens/auth/tabs.dart

@@ -1,6 +1,7 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
 import 'package:island/route.gr.dart';
 import 'package:island/services/responsive.dart';
 import 'package:material_symbols_icons/symbols.dart';
@@ -11,36 +12,15 @@ class TabsScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final useHorizontalLayout =
+    final useHorizontalLayout = isWideScreen(context);
-        MediaQuery.of(context).size.width > kWideScreenWidth;
+    final useExpandableLayout = isWidestScreen(context);
 
-    return AutoTabsRouter.pageView(
+    final destinations = [
-      routes: const [
-        ExploreRoute(),
-        ChatListRoute(),
-        RealmListRoute(),
-        AccountRoute(),
-      ],
-      scrollDirection: useHorizontalLayout ? Axis.vertical : Axis.horizontal,
-      physics: const NeverScrollableScrollPhysics(),
-      builder: (context, child, _) {
-        final tabsRouter = AutoTabsRouter.of(context);
-        return Scaffold(
-          extendBodyBehindAppBar: true,
-          backgroundColor: Colors.transparent,
-          body: child,
-          bottomNavigationBar: NavigationBar(
-            selectedIndex: tabsRouter.activeIndex,
-            onDestinationSelected: tabsRouter.setActiveIndex,
-            destinations: [
       NavigationDestination(
         label: 'explore'.tr(),
         icon: const Icon(Symbols.explore),
       ),
-              NavigationDestination(
+      NavigationDestination(label: 'chat'.tr(), icon: const Icon(Symbols.chat)),
-                label: 'chat'.tr(),
-                icon: const Icon(Symbols.chat),
-              ),
       NavigationDestination(
         label: 'realms'.tr(),
         icon: const Icon(Symbols.workspaces),
@@ -49,8 +29,90 @@ class TabsScreen extends StatelessWidget {
         label: 'account'.tr(),
         icon: const Icon(Symbols.account_circle),
       ),
+    ];
+
+    final routes = [
+      ExploreRoute(),
+      ChatListRoute(),
+      RealmListRoute(),
+      AccountRoute(),
+    ];
+
+    return AutoTabsRouter.tabBar(
+      routes: routes,
+      scrollDirection: useHorizontalLayout ? Axis.vertical : Axis.horizontal,
+      physics: const NeverScrollableScrollPhysics(),
+      builder: (context, child, _) {
+        final tabsRouter = AutoTabsRouter.of(context);
+
+        // Check if current route is a tab route
+        final currentRoute = context.router.topRoute;
+        final isTabRoute = routes.any(
+          (route) => route.routeName == currentRoute.name,
+        );
+
+        return Scaffold(
+          extendBodyBehindAppBar: true,
+          backgroundColor: Colors.transparent,
+          body:
+              useHorizontalLayout
+                  ? Row(
+                    children: [
+                      if (isTabRoute)
+                        Column(
+                          children: [
+                            Gap(MediaQuery.of(context).padding.top + 8),
+                            if (useExpandableLayout)
+                              Expanded(
+                                child: NavigationDrawer(
+                                  backgroundColor: Colors.transparent,
+                                  children: [
+                                    for (final destination in destinations)
+                                      NavigationDrawerDestination(
+                                        label: Text(destination.label),
+                                        icon: destination.icon,
+                                      ),
                                   ],
                                 ),
+                              )
+                            else
+                              Expanded(
+                                child: NavigationRail(
+                                  selectedIndex: tabsRouter.activeIndex,
+                                  onDestinationSelected:
+                                      tabsRouter.setActiveIndex,
+                                  labelType: NavigationRailLabelType.all,
+                                  destinations:
+                                      destinations
+                                          .map(
+                                            (d) => NavigationRailDestination(
+                                              icon: d.icon,
+                                              label: Text(d.label),
+                                            ),
+                                          )
+                                          .toList(),
+                                ),
+                              ),
+                            Gap(MediaQuery.of(context).padding.bottom + 8),
+                          ],
+                        ),
+                      if (isTabRoute)
+                        VerticalDivider(
+                          color: Theme.of(context).dividerColor,
+                          width: 1 / MediaQuery.of(context).devicePixelRatio,
+                        ),
+                      Expanded(child: child),
+                    ],
+                  )
+                  : child,
+          bottomNavigationBar:
+              !useHorizontalLayout && isTabRoute
+                  ? NavigationBar(
+                    selectedIndex: tabsRouter.activeIndex,
+                    onDestinationSelected: tabsRouter.setActiveIndex,
+                    destinations: destinations,
+                  )
+                  : null,
         );
       },
     );

lib/screens/chat/chat.dart

@@ -16,11 +16,13 @@ import 'package:island/pods/network.dart';
 import 'package:island/route.gr.dart';
 import 'package:island/screens/realm/realms.dart';
 import 'package:island/services/file.dart';
+import 'package:island/services/responsive.dart';
 import 'package:island/widgets/account/account_picker.dart';
 import 'package:island/widgets/alert.dart';
 import 'package:island/widgets/app_scaffold.dart';
 import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/realms/selection_dropdown.dart';
+import 'package:island/widgets/response.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:styled_widget/styled_widget.dart';
@@ -69,11 +71,7 @@ class ChatRoomListTile extends StatelessWidget {
               ? Text(room.members!.map((e) => '@${e.account.name}').join(', '))
               : Text(room.description ?? 'descriptionNone'.tr()),
       trailing: trailing,
-      onTap:
+      onTap: onTap,
-          onTap ??
-          () {
-            context.pushRoute(ChatRoomRoute(id: room.id));
-          },
     );
   }
 }
@@ -88,9 +86,32 @@ Future<List<SnChatRoom>> chatroomsJoined(Ref ref) async {
       .toList();
 }
 
+@RoutePage()
+class ChatShellScreen extends HookConsumerWidget {
+  const ChatShellScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isWide = isWideScreen(context);
+
+    if (isWide) {
+      return Row(
+        children: [
+          SizedBox(width: 320, child: ChatListScreen(isAside: true)),
+          VerticalDivider(width: 1),
+          Expanded(child: AutoRouter()),
+        ],
+      );
+    }
+
+    return AutoRouter();
+  }
+}
+
 @RoutePage()
 class ChatListScreen extends HookConsumerWidget {
-  const ChatListScreen({super.key});
+  final bool isAside;
+  const ChatListScreen({super.key, this.isAside = false});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -112,6 +133,12 @@ class ChatListScreen extends HookConsumerWidget {
       }
     }
 
+    final isWide = isWideScreen(context);
+
+    if (isWide && !isAside) {
+      return SizedBox.shrink();
+    }
+
     return AppScaffold(
       appBar: AppBar(
         title: Text('chat').tr(),
@@ -191,15 +218,25 @@ class ChatListScreen extends HookConsumerWidget {
                 itemCount: items.length,
                 itemBuilder: (context, index) {
                   final item = items[index];
-                  return ChatRoomListTile(room: item, isDirect: item.type == 1);
+                  return ChatRoomListTile(
+                    room: item,
+                    isDirect: item.type == 1,
+                    onTap: () {
+                      if (isWide) {
+                        context.router.replace(ChatRoomRoute(id: item.id));
+                      } else {
+                        context.router.push(ChatRoomRoute(id: item.id));
+                      }
+                    },
+                  );
                 },
               ),
             ),
         loading: () => const Center(child: CircularProgressIndicator()),
         error:
-            (error, stack) => GestureDetector(
+            (error, stack) => ResponseErrorWidget(
-              child: Center(child: Text('Error: $error')),
+              error: error,
-              onTap: () {
+              onRetry: () {
                 ref.invalidate(chatroomsJoinedProvider);
               },
             ),

lib/screens/chat/room.dart

@@ -17,7 +17,9 @@ import 'package:island/pods/network.dart';
 import 'package:island/pods/websocket.dart';
 import 'package:island/route.gr.dart';
 import 'package:island/screens/posts/compose.dart';
+import 'package:island/services/responsive.dart';
 import 'package:island/widgets/alert.dart';
+import 'package:island/widgets/app_scaffold.dart';
 import 'package:island/widgets/chat/message_item.dart';
 import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/response.dart';
@@ -415,14 +417,19 @@ class ChatRoomScreen extends HookConsumerWidget {
       }
     }
 
+    final compactHeader = isWideScreen(context);
+
     return Scaffold(
       appBar: AppBar(
-        toolbarHeight: 64,
+        leading: !compactHeader ? const Center(child: PageBackButton()) : null,
+        automaticallyImplyLeading: false,
+        toolbarHeight: compactHeader ? null : 64,
         title: chatRoom.when(
           data:
-              (room) => Column(
+              (room) =>
-                spacing: 4,
+                  compactHeader
-                mainAxisAlignment: MainAxisAlignment.center,
+                      ? Row(
+                        spacing: 8,
                         crossAxisAlignment: CrossAxisAlignment.center,
                         children: [
                           SizedBox(
@@ -433,7 +440,10 @@ class ChatRoomScreen extends HookConsumerWidget {
                                     ? SplitAvatarWidget(
                                       filesId:
                                           room.members!
-                                      .map((e) => e.account.profile.pictureId)
+                                              .map(
+                                                (e) =>
+                                                    e.account.profile.pictureId,
+                                              )
                                               .toList(),
                                     )
                                     : room.pictureId != null
@@ -450,7 +460,49 @@ class ChatRoomScreen extends HookConsumerWidget {
                           ),
                           Text(
                             (room.type == 1 && room.name == null)
-                        ? room.members!.map((e) => e.account.nick).join(', ')
+                                ? room.members!
+                                    .map((e) => e.account.nick)
+                                    .join(', ')
+                                : room.name!,
+                          ).fontSize(19),
+                        ],
+                      )
+                      : Column(
+                        spacing: 4,
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          SizedBox(
+                            height: 26,
+                            width: 26,
+                            child:
+                                (room!.type == 1 && room.pictureId == null)
+                                    ? SplitAvatarWidget(
+                                      filesId:
+                                          room.members!
+                                              .map(
+                                                (e) =>
+                                                    e.account.profile.pictureId,
+                                              )
+                                              .toList(),
+                                    )
+                                    : room.pictureId != null
+                                    ? ProfilePictureWidget(
+                                      fileId: room.pictureId,
+                                      fallbackIcon: Symbols.chat,
+                                    )
+                                    : CircleAvatar(
+                                      child: Text(
+                                        room.name![0].toUpperCase(),
+                                        style: const TextStyle(fontSize: 12),
+                                      ),
+                                    ),
+                          ),
+                          Text(
+                            (room.type == 1 && room.name == null)
+                                ? room.members!
+                                    .map((e) => e.account.nick)
+                                    .join(', ')
                                 : room.name!,
                           ).fontSize(15),
                         ],

lib/services/responsive.dart

@@ -1 +1,17 @@
-const kWideScreenWidth = 640;
+import 'package:flutter/widgets.dart';
+
+const kWideScreenWidth = 768;
+const kWiderScreenWidth = 1024;
+const kWidescreenWidth = 1280;
+
+bool isWideScreen(BuildContext context) {
+  return MediaQuery.of(context).size.width > kWideScreenWidth;
+}
+
+bool isWiderScreen(BuildContext context) {
+  return MediaQuery.of(context).size.width > kWiderScreenWidth;
+}
+
+bool isWidestScreen(BuildContext context) {
+  return MediaQuery.of(context).size.width > kWidescreenWidth;
+}

lib/widgets/chat/message_item.dart

@@ -151,15 +151,6 @@ class MessageItem extends HookConsumerWidget {
                 crossAxisAlignment: CrossAxisAlignment.end,
                 children: [
                   Flexible(
-                    child: Container(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 12,
-                        vertical: 8,
-                      ),
-                      decoration: BoxDecoration(
-                        color: containerColor,
-                        borderRadius: BorderRadius.circular(16),
-                      ),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
@@ -195,13 +186,11 @@ class MessageItem extends HookConsumerWidget {
                             crossAxisAlignment: CrossAxisAlignment.stretch,
                             spacing: 8,
                             children: [
-                                if ((remoteMessage.content?.isNotEmpty ??
+                              if ((remoteMessage.content?.isNotEmpty ?? false))
-                                    false))
                                 const Gap(0),
                               for (var entry in progress!.entries)
                                 Column(
-                                    crossAxisAlignment:
+                                  crossAxisAlignment: CrossAxisAlignment.start,
-                                        CrossAxisAlignment.start,
                                   children: [
                                     Text(
                                       'fileUploadingProgress'.tr(
@@ -222,11 +211,8 @@ class MessageItem extends HookConsumerWidget {
                                           Theme.of(
                                             context,
                                           ).colorScheme.surfaceVariant,
-                                        valueColor:
+                                      valueColor: AlwaysStoppedAnimation<Color>(
-                                            AlwaysStoppedAnimation<Color>(
+                                        Theme.of(context).colorScheme.primary,
-                                              Theme.of(
-                                                context,
-                                              ).colorScheme.primary,
                                       ),
                                     ),
                                   ],
@@ -235,8 +221,7 @@ class MessageItem extends HookConsumerWidget {
                             ],
                           ),
                       ],
-                      ),
+                    ).padding(left: 40),
-                    ),
                   ),
                   _buildMessageIndicators(
                     context,