💄 Post item maxWidth

lib/screens/explore.dart

@@ -5,6 +5,7 @@ import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/types/post.dart';
@@ -172,7 +173,10 @@ class _ExploreScreenState extends State<ExploreScreen> {
               onFetchData: _fetchPosts,
               itemBuilder: (context, idx) {
                 return GestureDetector(
-                  child: PostItem(data: _posts[idx]),
+                  child: Container(
+                    constraints: const BoxConstraints(maxWidth: 640),
+                    child: PostItem(data: _posts[idx]),
+                  ).center(),
                   onTap: () {
                     GoRouter.of(context).pushNamed(
                       'postDetail',

lib/screens/post/post_detail.dart

@@ -9,6 +9,7 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
+import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/loading_indicator.dart';
@@ -71,6 +72,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
 
   @override
   Widget build(BuildContext context) {
+    final ua = context.watch<UserProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
     return Scaffold(
@@ -107,10 +109,13 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
           ),
           if (_data != null)
             SliverToBoxAdapter(
-              child: PostItem(
-                data: _data!,
-                showComments: false,
-              ),
+              child: Container(
+                constraints: const BoxConstraints(maxWidth: 640),
+                child: PostItem(
+                  data: _data!,
+                  showComments: false,
+                ),
+              ).center(),
             ),
           const SliverToBoxAdapter(child: Divider(height: 1)),
           if (_data != null)
@@ -126,7 +131,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
                 ],
               ).padding(horizontal: 20, vertical: 12),
             ),
-          if (_data != null)
+          if (_data != null && ua.isAuthorized)
             SliverToBoxAdapter(
               child: Container(
                 height: 240,
@@ -157,6 +162,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
             PostCommentSliverList(
               key: _childListKey,
               parentPostId: _data!.id,
+              maxWidth: 640,
             ),
           SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
         ],

lib/widgets/attachment/attachment_list.dart

@@ -26,6 +26,11 @@ class AttachmentList extends StatelessWidget {
     final borderSide = (bordered ?? false)
         ? BorderSide(width: 1, color: Theme.of(context).dividerColor)
         : BorderSide.none;
+    final backgroundColor = Theme.of(context).colorScheme.surfaceContainer;
+    final constraints = BoxConstraints(
+      minWidth: 80,
+      maxHeight: maxHeight ?? double.infinity,
+    );
 
     if (data.isEmpty) return const SizedBox.shrink();
     if (data.length == 1) {
@@ -34,11 +39,9 @@ class AttachmentList extends StatelessWidget {
           // Single child list-like displaying
           padding: listPadding ?? EdgeInsets.zero,
           child: Container(
-            constraints: BoxConstraints(
-              minWidth: 80,
-              maxHeight: maxHeight ?? double.infinity,
-            ),
+            constraints: constraints,
             decoration: BoxDecoration(
+              color: backgroundColor,
               border: Border(top: borderSide, bottom: borderSide),
               borderRadius: kDefaultRadius,
             ),
@@ -55,6 +58,7 @@ class AttachmentList extends StatelessWidget {
 
       return Container(
         decoration: BoxDecoration(
+          color: backgroundColor,
           border: Border(top: borderSide, bottom: borderSide),
         ),
         child: AspectRatio(
@@ -72,22 +76,32 @@ class AttachmentList extends StatelessWidget {
           shrinkWrap: true,
           itemCount: data.length,
           itemBuilder: (context, idx) {
-            return Container(
-              constraints: BoxConstraints(
-                minWidth: 80,
-                maxHeight: maxHeight ?? double.infinity,
-              ),
-              decoration: BoxDecoration(
-                border: Border(top: borderSide, bottom: borderSide),
-                borderRadius: kDefaultRadius,
-              ),
-              child: AspectRatio(
-                aspectRatio: data[idx].metadata['ratio']?.toDouble() ?? 1,
-                child: ClipRRect(
-                  borderRadius: kDefaultRadius,
-                  child: AttachmentItem(data: data[idx], isExpandable: true),
+            return Stack(
+              children: [
+                Container(
+                  constraints: constraints,
+                  decoration: BoxDecoration(
+                    color: backgroundColor,
+                    border: Border(top: borderSide, bottom: borderSide),
+                    borderRadius: kDefaultRadius,
+                  ),
+                  child: AspectRatio(
+                    aspectRatio: data[idx].metadata['ratio']?.toDouble() ?? 1,
+                    child: ClipRRect(
+                      borderRadius: kDefaultRadius,
+                      child:
+                          AttachmentItem(data: data[idx], isExpandable: true),
+                    ),
+                  ),
                 ),
-              ),
+                Positioned(
+                  right: 12,
+                  bottom: 12,
+                  child: Chip(
+                    label: Text('${idx + 1}/${data.length}'),
+                  ),
+                ),
+              ],
             );
           },
           separatorBuilder: (context, index) => const Gap(8),

lib/widgets/post/post_comment_list.dart

@@ -7,6 +7,7 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/sn_attachment.dart';
 import 'package:surface/providers/sn_network.dart';
+import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:surface/widgets/post/post_mini_editor.dart';
@@ -14,7 +15,12 @@ import 'package:very_good_infinite_list/very_good_infinite_list.dart';
 
 class PostCommentSliverList extends StatefulWidget {
   final int parentPostId;
-  const PostCommentSliverList({super.key, required this.parentPostId});
+  final double? maxWidth;
+  const PostCommentSliverList({
+    super.key,
+    required this.parentPostId,
+    this.maxWidth,
+  });
 
   @override
   State<PostCommentSliverList> createState() => PostCommentSliverListState();
@@ -88,7 +94,12 @@ class PostCommentSliverListState extends State<PostCommentSliverList> {
       onFetchData: _fetchPosts,
       itemBuilder: (context, idx) {
         return GestureDetector(
-          child: PostItem(data: _posts[idx]),
+          child: Container(
+            constraints: BoxConstraints(
+              maxWidth: widget.maxWidth ?? double.infinity,
+            ),
+            child: PostItem(data: _posts[idx]),
+          ).center(),
           onTap: () {
             GoRouter.of(context).pushNamed(
               'postDetail',
@@ -121,6 +132,7 @@ class _PostCommentListPopupState extends State<PostCommentListPopup> {
 
   @override
   Widget build(BuildContext context) {
+    final ua = context.watch<UserProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
     return Column(
@@ -139,25 +151,26 @@ class _PostCommentListPopupState extends State<PostCommentListPopup> {
         Expanded(
           child: CustomScrollView(
             slivers: [
-              SliverToBoxAdapter(
-                child: Container(
-                  height: 240,
-                  decoration: BoxDecoration(
-                    border: Border.symmetric(
-                      horizontal: BorderSide(
-                        color: Theme.of(context).dividerColor,
-                        width: 1 / devicePixelRatio,
+              if (ua.isAuthorized)
+                SliverToBoxAdapter(
+                  child: Container(
+                    height: 240,
+                    decoration: BoxDecoration(
+                      border: Border.symmetric(
+                        horizontal: BorderSide(
+                          color: Theme.of(context).dividerColor,
+                          width: 1 / devicePixelRatio,
+                        ),
                       ),
                     ),
-                  ),
-                  child: PostMiniEditor(
-                    postReplyId: widget.postId,
-                    onPost: () {
-                      _childListKey.currentState!.refresh();
-                    },
+                    child: PostMiniEditor(
+                      postReplyId: widget.postId,
+                      onPost: () {
+                        _childListKey.currentState!.refresh();
+                      },
+                    ),
                   ),
                 ),
-              ),
               PostCommentSliverList(
                 key: _childListKey,
                 parentPostId: widget.postId,