✨ Large screen support

lib/router.dart

@@ -32,10 +32,48 @@ abstract class AppRouter {
           child: child,
         ),
         routes: [
-          GoRoute(
+          ShellRoute(
-            path: '/',
+            builder: (context, state, child) => BasicShell(
-            name: 'social',
+              state: state,
-            builder: (context, state) => const SocialScreen(),
+              sidebarFirst: true,
+              showAppBar: false,
+              sidebar: const SocialScreen(),
+              child: child,
+            ),
+            routes: [
+              GoRoute(
+                path: '/',
+                name: 'social',
+                builder: (context, state) =>
+                    SolianTheme.isExtraLargeScreen(context)
+                        ? const EmptyPagePlaceholder()
+                        : const SocialScreen(),
+              ),
+              GoRoute(
+                path: '/posts/view/:alias',
+                name: 'postDetail',
+                builder: (context, state) => TitleShell(
+                  showAppBar: SolianTheme.isExtraLargeScreen(context),
+                  state: state,
+                  child: PostDetailScreen(
+                    alias: state.pathParameters['alias']!,
+                  ),
+                ),
+              ),
+              GoRoute(
+                path: '/posts/publish',
+                name: 'postPublishing',
+                builder: (context, state) {
+                  final arguments = state.extra as PostPublishingArguments?;
+                  return PostPublishingScreen(
+                    edit: arguments?.edit,
+                    reply: arguments?.reply,
+                    repost: arguments?.repost,
+                    realm: arguments?.realm,
+                  );
+                },
+              ),
+            ],
           ),
           ShellRoute(
             builder: (context, state, child) => BasicShell(
@@ -49,9 +87,10 @@ abstract class AppRouter {
               GoRoute(
                 path: '/chat',
                 name: 'chat',
-                builder: (context, state) => SolianTheme.isExtraLargeScreen(context)
+                builder: (context, state) =>
-                    ? const EmptyPagePlaceholder()
+                    SolianTheme.isExtraLargeScreen(context)
-                    : const ChatScreen(),
+                        ? const EmptyPagePlaceholder()
+                        : const ChatScreen(),
               ),
               GoRoute(
                 path: '/chat/organize',
@@ -92,98 +131,104 @@ abstract class AppRouter {
               ),
             ],
           ),
-          GoRoute(
+          ShellRoute(
-            path: '/realms',
+            builder: (context, state, child) => BasicShell(
-            name: 'realms',
+              state: state,
-            builder: (context, state) => const RealmListScreen(),
+              sidebarFirst: true,
-          ),
+              showAppBar: false,
-          GoRoute(
+              sidebar: const RealmListScreen(),
-            path: '/account',
+              child: child,
-            name: 'account',
-            builder: (context, state) => const AccountScreen(),
-          ),
-        ],
-      ),
-      ShellRoute(
-        builder: (context, state, child) =>
-            BasicShell(state: state, child: child),
-        routes: [
-          GoRoute(
-            path: '/posts/view/:alias',
-            name: 'postDetail',
-            builder: (context, state) => PostDetailScreen(
-              alias: state.pathParameters['alias']!,
             ),
+            routes: [
+              GoRoute(
+                path: '/realms',
+                name: 'realms',
+                builder: (context, state) =>
+                    SolianTheme.isExtraLargeScreen(context)
+                        ? const EmptyPagePlaceholder()
+                        : const RealmListScreen(),
+              ),
+              GoRoute(
+                path: '/realms/:alias/detail',
+                name: 'realmDetail',
+                builder: (context, state) => TitleShell(
+                  showAppBar: SolianTheme.isExtraLargeScreen(context),
+                  state: state,
+                  child: RealmDetailScreen(
+                    realm: state.extra as Realm,
+                    alias: state.pathParameters['alias']!,
+                  ),
+                ),
+              ),
+              GoRoute(
+                path: '/realm/organize',
+                name: 'realmOrganizing',
+                builder: (context, state) {
+                  final arguments = state.extra as RealmOrganizeArguments?;
+                  return RealmOrganizeScreen(
+                    edit: arguments?.edit,
+                  );
+                },
+              ),
+              GoRoute(
+                path: '/realm/:alias',
+                name: 'realmView',
+                builder: (context, state) {
+                  return RealmViewScreen(
+                    alias: state.pathParameters['alias']!,
+                  );
+                },
+              ),
+            ],
           ),
-        ],
+          ShellRoute(
-      ),
+            builder: (context, state, child) => BasicShell(
-      GoRoute(
+              state: state,
-        path: '/posts/publish',
+              sidebarFirst: true,
-        name: 'postPublishing',
+              showAppBar: false,
-        builder: (context, state) {
+              sidebar: const AccountScreen(),
-          final arguments = state.extra as PostPublishingArguments?;
+              child: child,
-          return PostPublishingScreen(
-            edit: arguments?.edit,
-            reply: arguments?.reply,
-            repost: arguments?.repost,
-            realm: arguments?.realm,
-          );
-        },
-      ),
-      ShellRoute(
-        builder: (context, state, child) =>
-            BasicShell(state: state, child: child),
-        routes: [
-          GoRoute(
-            path: '/account/friend',
-            name: 'accountFriend',
-            builder: (context, state) => const FriendScreen(),
-          ),
-          GoRoute(
-            path: '/account/personalize',
-            name: 'accountPersonalize',
-            builder: (context, state) => const PersonalizeScreen(),
-          ),
-          GoRoute(
-            path: '/about',
-            name: 'about',
-            builder: (context, state) => const AboutScreen(),
-          ),
-        ],
-      ),
-      ShellRoute(
-        builder: (context, state, child) =>
-            BasicShell(state: state, child: child),
-        routes: [
-          GoRoute(
-            path: '/realms/:alias/detail',
-            name: 'realmDetail',
-            builder: (context, state) => RealmDetailScreen(
-              realm: state.extra as Realm,
-              alias: state.pathParameters['alias']!,
             ),
+            routes: [
+              GoRoute(
+                path: '/account',
+                name: 'account',
+                builder: (context, state) =>
+                    SolianTheme.isExtraLargeScreen(context)
+                        ? const EmptyPagePlaceholder()
+                        : const AccountScreen(),
+              ),
+              GoRoute(
+                path: '/account/friend',
+                name: 'accountFriend',
+                builder: (context, state) => TitleShell(
+                  showAppBar: SolianTheme.isExtraLargeScreen(context),
+                  state: state,
+                  child: const FriendScreen(),
+                ),
+              ),
+              GoRoute(
+                path: '/account/personalize',
+                name: 'accountPersonalize',
+                builder: (context, state) => TitleShell(
+                  showAppBar: SolianTheme.isExtraLargeScreen(context),
+                  state: state,
+                  child: const PersonalizeScreen(),
+                ),
+              ),
+              GoRoute(
+                path: '/about',
+                name: 'about',
+                builder: (context, state) => TitleShell(
+                  showAppBar: SolianTheme.isExtraLargeScreen(context),
+                  state: state,
+                  child: const AboutScreen(),
+                ),
+              ),
+            ],
           ),
         ],
       ),
-      GoRoute(
-        path: '/realm/organize',
-        name: 'realmOrganizing',
-        builder: (context, state) {
-          final arguments = state.extra as RealmOrganizeArguments?;
-          return RealmOrganizeScreen(
-            edit: arguments?.edit,
-          );
-        },
-      ),
-      GoRoute(
-        path: '/realm/:alias',
-        name: 'realmView',
-        builder: (context, state) {
-          return RealmViewScreen(
-            alias: state.pathParameters['alias']!,
-          );
-        },
-      ),
     ],
   );
 }

lib/screens/about.dart

@@ -12,57 +12,60 @@ class AboutScreen extends StatelessWidget {
 
     return Material(
       color: Theme.of(context).colorScheme.surface,
-      child: Column(
+      child: SizedBox(
-        mainAxisAlignment: MainAxisAlignment.center,
+        width: double.infinity,
-        children: [
+        child: Column(
-          Image.asset('assets/logo.png', width: 64, height: 64),
+          mainAxisAlignment: MainAxisAlignment.center,
-          Text(
+          children: [
-            'Solian',
+            Image.asset('assets/logo.png', width: 64, height: 64),
-            style: Theme.of(context).textTheme.headlineMedium,
+            Text(
-          ),
+              'Solian',
-          const Text(
+              style: Theme.of(context).textTheme.headlineMedium,
-            'The Solar Network',
-            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
-          ),
-          const SizedBox(height: 8),
-          FutureBuilder(
-            future: PackageInfo.fromPlatform(),
-            builder: (context, snapshot) {
-              if (!snapshot.hasData) {
-                return const SizedBox();
-              }
-
-              return Text(
-                'v${snapshot.data!.version} · ${snapshot.data!.buildNumber}',
-                style: const TextStyle(fontFamily: 'monospace'),
-              );
-            },
-          ),
-          Text('Copyright © ${DateTime.now().year} Solsynth LLC'),
-          const SizedBox(height: 16),
-          TextButton(
-            style: denseButtonStyle,
-            child: const Text('More Information'),
-            onPressed: () {
-              launchUrlString('https://solsynth.dev/products/solar-network');
-            },
-          ),
-          TextButton(
-            style: denseButtonStyle,
-            onPressed: () {
-              launchUrlString('https://solsynth.dev');
-            },
-            child: const Text('Official Website'),
-          ),
-          const SizedBox(height: 16),
-          const Text(
-            'Open-sourced under AGPLv3',
-            style: TextStyle(
-              fontWeight: FontWeight.w300,
-              fontSize: 12,
             ),
-          ),
+            const Text(
-        ],
+              'The Solar Network',
+              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+            ),
+            const SizedBox(height: 8),
+            FutureBuilder(
+              future: PackageInfo.fromPlatform(),
+              builder: (context, snapshot) {
+                if (!snapshot.hasData) {
+                  return const SizedBox();
+                }
+
+                return Text(
+                  'v${snapshot.data!.version} · ${snapshot.data!.buildNumber}',
+                  style: const TextStyle(fontFamily: 'monospace'),
+                );
+              },
+            ),
+            Text('Copyright © ${DateTime.now().year} Solsynth LLC'),
+            const SizedBox(height: 16),
+            TextButton(
+              style: denseButtonStyle,
+              child: const Text('More Information'),
+              onPressed: () {
+                launchUrlString('https://solsynth.dev/products/solar-network');
+              },
+            ),
+            TextButton(
+              style: denseButtonStyle,
+              onPressed: () {
+                launchUrlString('https://solsynth.dev');
+              },
+              child: const Text('Official Website'),
+            ),
+            const SizedBox(height: 16),
+            const Text(
+              'Open-sourced under AGPLv3',
+              style: TextStyle(
+                fontWeight: FontWeight.w300,
+                fontSize: 12,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/translations.dart

@@ -76,7 +76,7 @@ class SolianMessages extends Translations {
           'postInRealm': 'In realm @realm',
           'postDetail': 'Post',
           'postReplies': 'Replies',
-          'postPublishing': 'Post post',
+          'postPublishing': 'Post a post',
           'postIdentityNotify': 'You will post this post as',
           'postContentPlaceholder': 'What\'s happened?!',
           'postReaction': 'Reactions of the Post',

lib/widgets/sidebar/empty_placeholder.dart

@@ -1,13 +1,15 @@
 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(
+    return Material(
-      child: Image.asset('assets/logo.png', width: 80, height: 80),
+      color: Theme.of(context).colorScheme.surface,
+      child: Center(
+        child: Image.asset('assets/logo.png', width: 80, height: 80),
+      ),
     );
   }
 }

lib/widgets/sidebar/sidebar_placeholder.dart

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