✨ Expanded drawer nav

assets/translations/en-US.json

@@ -97,9 +97,9 @@
   "postReact": "React",
   "postReactions": "Reactions of Post",
   "postReactionPoints": {
-    "zero": "{}pt",
+    "zero": "{} pt",
-    "one": "{}pt",
+    "one": "{} pt",
-    "other": "{}pts"
+    "other": "{} pts"
   },
   "postReactCompleted": "Reaction has been added.",
   "postReactUncompleted": "Reaction has been removed.",

lib/widgets/attachment/attachment_list.dart

@@ -10,15 +10,15 @@ import 'package:surface/widgets/attachment/attachment_item.dart';
 class AttachmentList extends StatelessWidget {
   final List<SnAttachment> data;
   final bool? bordered;
-  final double? maxListHeight;
+  final double? maxHeight;
   const AttachmentList({
     super.key,
     required this.data,
     this.bordered,
-    this.maxListHeight,
+    this.maxHeight,
   });
 
-  static const double kMaxListItemWidth = 520;
+  static const double kMaxItemWidth = 520;
   static const BorderRadius kDefaultRadius =
       BorderRadius.all(Radius.circular(8));
 
@@ -33,9 +33,10 @@ class AttachmentList extends StatelessWidget {
       if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
         return Container(
           constraints: BoxConstraints(
+            maxHeight: maxHeight ?? double.infinity,
             maxWidth: math.min(
               MediaQuery.of(context).size.width - 20,
-              kMaxListItemWidth,
+              kMaxItemWidth,
             ),
           ),
           decoration: BoxDecoration(
@@ -64,7 +65,7 @@ class AttachmentList extends StatelessWidget {
     }
 
     return Container(
-      constraints: BoxConstraints(maxHeight: maxListHeight ?? 320),
+      constraints: BoxConstraints(maxHeight: maxHeight ?? 320),
       child: ScrollConfiguration(
         behavior: _AttachmentListScrollBehavior(),
         child: ListView.separated(
@@ -73,9 +74,10 @@ class AttachmentList extends StatelessWidget {
           itemBuilder: (context, idx) {
             return Container(
               constraints: BoxConstraints(
+                maxHeight: maxHeight ?? double.infinity,
                 maxWidth: math.min(
                   MediaQuery.of(context).size.width - 20,
-                  kMaxListItemWidth,
+                  kMaxItemWidth,
                 ),
               ),
               decoration: BoxDecoration(

lib/widgets/navigation/app_drawer_navigation.dart

@@ -1,7 +1,10 @@
+import 'dart:math' as math;
+
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/navigation.dart';
 
@@ -27,6 +30,10 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
   Widget build(BuildContext context) {
     final nav = context.watch<NavigationProvider>();
 
+    final backgroundColor = ResponsiveBreakpoints.of(context).largerThan(MOBILE)
+        ? Theme.of(context).colorScheme.surface
+        : null;
+
     return ListenableBuilder(
       listenable: nav,
       builder: (context, _) {
@@ -36,6 +43,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
         ];
 
         return NavigationDrawer(
+          backgroundColor: backgroundColor,
           selectedIndex: nav.currentIndex,
           children: [
             Column(
@@ -48,7 +56,8 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
               ],
             ).padding(
               horizontal: 32,
-              vertical: 8,
+              top: math.max(MediaQuery.of(context).padding.top, 16),
+              bottom: 16,
             ),
             ...destinations.where((ele) => ele.isPinned).map((ele) {
               return NavigationDrawerDestination(

lib/widgets/navigation/app_scaffold.dart

@@ -30,14 +30,16 @@ class AppScaffold extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isShowDrawer = showDrawer;
+    final isShowDrawer = showDrawer
+        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
+        : false;
     final isShowBottomNavigation = (showBottomNavigation)
-        ? (ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE))
+        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
         : false;
 
     final state = GoRouter.maybeOf(context);
 
-    return AppBackground(
+    final innerWidget = AppBackground(
       child: Scaffold(
         appBar: appBar ??
             (autoImplyAppBar
@@ -59,5 +61,17 @@ class AppScaffold extends StatelessWidget {
             isShowBottomNavigation ? AppBottomNavigationBar() : null,
       ),
     );
+
+    if (showDrawer) {
+      return Row(
+        children: [
+          AppNavigationDrawer(),
+          VerticalDivider(width: 1, color: Theme.of(context).dividerColor),
+          Expanded(child: innerWidget),
+        ],
+      );
+    }
+
+    return innerWidget;
   }
 }

lib/widgets/post/post_item.dart

@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:relative_time/relative_time.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
@@ -33,6 +34,10 @@ class PostItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isListAttachments =
+        ResponsiveBreakpoints.of(context).largerThan(MOBILE) ||
+            (data.preload?.attachments?.length ?? 0) > 1;
+
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -40,14 +45,14 @@ class PostItem extends StatelessWidget {
         _PostContentBody(data: data.body).padding(horizontal: 16, bottom: 6),
         if (data.repostTo != null)
           _PostQuoteContent(child: data.repostTo!).padding(
-            horizontal: 8,
+            horizontal: 12,
-            bottom: 4,
           ),
         if (data.preload?.attachments?.isNotEmpty ?? true)
           AttachmentList(
             data: data.preload!.attachments!,
             bordered: true,
-          ),
+            maxHeight: 520,
+          ).padding(horizontal: isListAttachments ? 12 : 0),
         _PostBottomAction(
           data: data,
           showComments: showComments,