Add customizable feed card divider (#1230)

lib/community/widgets/post_card.dart

@@ -12,6 +12,7 @@ import 'package:thunder/core/auth/bloc/auth_bloc.dart';
 import 'package:thunder/core/enums/swipe_action.dart';
 import 'package:thunder/core/models/post_view_media.dart';
 import 'package:thunder/feed/bloc/feed_bloc.dart';
+import 'package:thunder/feed/widgets/widgets.dart';
 import 'package:thunder/post/enums/post_action.dart';
 import 'package:thunder/thunder/bloc/thunder_bloc.dart';
 import 'package:thunder/post/utils/navigate_post.dart';
@@ -132,15 +133,6 @@ class _PostCardState extends State<PostCard> {
       },
       child: Column(
         children: [
-          Divider(
-            height: 1.0,
-            thickness: 4.0,
-            color: ElevationOverlay.applySurfaceTint(
-              Theme.of(context).colorScheme.surface,
-              Theme.of(context).colorScheme.surfaceTint,
-              10,
-            ),
-          ),
           Dismissible(
             direction: isOverridingSwipeGestureAction == true ? DismissDirection.none : determinePostSwipeDirection(isUserLoggedIn, state),
             key: ObjectKey(widget.postViewMedia.postView.post.id),
@@ -244,6 +236,7 @@ class _PostCardState extends State<PostCard> {
               },
             ),
           ),
+          const FeedCardDivider(),
         ],
       ),
     );

lib/core/enums/feed_card_divider_thickness.dart

@@ -0,0 +1,16 @@
+enum FeedCardDividerThickness {
+  compact,
+  standard,
+  comfortable;
+
+  double get value {
+    switch (this) {
+      case FeedCardDividerThickness.compact:
+        return 2.0;
+      case FeedCardDividerThickness.standard:
+        return 6.0;
+      case FeedCardDividerThickness.comfortable:
+        return 10.0;
+    }
+  }
+}

lib/core/enums/local_settings.dart

@@ -125,6 +125,11 @@ enum LocalSettings {
   cardPostCardMetadataItems(name: 'setting_card_post_card_metadata_items', key: 'cardPostCardMetadataItems', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts),
   showFullPostDate(name: 'setting_general_show_full_post_date', key: 'showFullPostDate', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts),
   dateFormat(name: 'setting_general_date_format', key: 'dateFormat', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts),
+  // This setting exists purely for the searching function
+  dividerAppearance(name: '', key: 'dividerAppearance', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts),
+  feedCardDividerThickness(
+      name: 'setting_feed_card_divider_thickness', key: 'feedCardDividerThickness', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts, searchable: false),
+  feedCardDividerColor(name: 'setting_feed_card_divider_color', key: 'feedCardDividerColor', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.posts, searchable: false),
 
   // Post body settings
   showCrossPosts(name: 'setting_show_cross_posts', key: 'showCrossPosts', category: LocalSettingsCategories.posts, subCategory: LocalSettingsSubCategories.general),
@@ -322,6 +327,7 @@ extension LocalizationExt on AppLocalizations {
       'dimReadPosts': dimReadPosts,
       'showFullPostDate': showFullDate,
       'dateFormat': dateFormat,
+      'dividerAppearance': dividerAppearance,
       'showCrossPosts': showCrossPosts,
       'postBodyShowUserInstance': postBodyShowUserInstance,
       'postBodyShowCommunityInstance': postBodyShowCommunityInstance,

lib/feed/view/feed_comment_list.dart

@@ -4,6 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:lemmy_api_client/v3.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import 'package:thunder/core/auth/bloc/auth_bloc.dart';
+import 'package:thunder/feed/feed.dart';
 
 import 'package:thunder/shared/comment_reference.dart';
 
@@ -27,25 +28,30 @@ class FeedCommentList extends StatelessWidget {
       crossAxisSpacing: 40,
       mainAxisSpacing: 0,
       itemBuilder: (BuildContext context, int index) {
-        return CommentReference(
-          comment: commentViews[index],
-          now: DateTime.now(),
-          onVoteAction: (int commentId, int voteType) => {
-            // TODO: Implement action
-          },
-          onSaveAction: (int commentId, bool save) => {
-            // TODO: Implement action
-          },
-          onDeleteAction: (int commentId, bool deleted) => {
-            // TODO: Implement action
-          },
-          onReportAction: (int commentId) {
-            // TODO: Implement action
-          },
-          onReplyEditAction: (CommentView commentView, bool isEdit) {
-            // TODO: Implement action
-          },
-          isOwnComment: commentViews[index].comment.creatorId == state.account?.userId,
+        return Column(
+          children: [
+            CommentReference(
+              comment: commentViews[index],
+              now: DateTime.now(),
+              onVoteAction: (int commentId, int voteType) => {
+                // TODO: Implement action
+              },
+              onSaveAction: (int commentId, bool save) => {
+                // TODO: Implement action
+              },
+              onDeleteAction: (int commentId, bool deleted) => {
+                // TODO: Implement action
+              },
+              onReportAction: (int commentId) {
+                // TODO: Implement action
+              },
+              onReplyEditAction: (CommentView commentView, bool isEdit) {
+                // TODO: Implement action
+              },
+              isOwnComment: commentViews[index].comment.creatorId == state.account?.userId,
+            ),
+            const FeedCardDivider(),
+          ],
         );
       },
       childCount: commentViews.length,

lib/feed/widgets/feed_card_divider.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:thunder/thunder/bloc/thunder_bloc.dart';
+
+class FeedCardDivider extends StatelessWidget {
+  const FeedCardDivider({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final state = context.watch<ThunderBloc>().state;
+
+    final feedCardDividerThickness = state.feedCardDividerThickness;
+    final feedCardDividerColor = state.feedCardDividerColor;
+
+    return Divider(
+      height: feedCardDividerThickness.value,
+      thickness: feedCardDividerThickness.value,
+      color: feedCardDividerColor == Colors.transparent
+          ? ElevationOverlay.applySurfaceTint(theme.colorScheme.surface, theme.colorScheme.surfaceTint, 10)
+          : Color.alphaBlend(theme.colorScheme.primaryContainer.withOpacity(0.6), feedCardDividerColor).withOpacity(0.2),
+    );
+  }
+}

lib/feed/widgets/widgets.dart

@@ -1 +1,2 @@
 export 'feed_page_app_bar.dart';
+export 'feed_card_divider.dart';

lib/l10n/app_en.arb

@@ -211,6 +211,10 @@
   "@collapseSpoiler": {
     "description": "Label for collapsing spoiler"
   },
+  "color": "Color",
+  "@color": {
+    "description": "Describes a color"
+  },
   "colorizeCommunityName": "Colorize Community Name",
   "@colorizeCommunityName": {
     "description": "Setting for colorizing community name"
@@ -235,6 +239,10 @@
   "@combineNavAndFab": {},
   "combineNavAndFabDescription": "Floating Action Button will be shown between navigation buttons.",
   "@combineNavAndFabDescription": {},
+  "comfortable": "Comfortable",
+  "@comfortable": {
+    "description": "Describes a comfortable visual density"
+  },
   "comment": "Comment",
   "@comment": {},
   "commentBehaviourSettings": "Comments",
@@ -287,6 +295,10 @@
   "@communityStyle": {
     "description": "Heading for community style setting"
   },
+  "compact": "Compact",
+  "@compact": {
+    "description": "Describes a compact visual density"
+  },
   "compactPostCardMetadataItems": "Compact View Metadata",
   "@compactPostCardMetadataItems": {
     "description": "Name of setting for compact post card metadata items"
@@ -455,6 +467,10 @@
   "@displayUserScore": {
     "description": "Option for displaying user scores or karma."
   },
+  "dividerAppearance": "Divider Appearance",
+  "@dividerAppearance": {
+    "description": "Divider appearance category"
+  },
   "doNotShowAgain": "Do Not Show Again",
   "@doNotShowAgain": {
     "description": "Action for hiding something permanently"
@@ -569,6 +585,10 @@
   "@feedBehaviourSettings": {
     "description": "Subcategory in Setting -> General"
   },
+  "feedSettings": "Feed Settings",
+  "@feedSettings": {
+    "description": "Feed settings category."
+  },
   "feedTypeAndSorts": "Default Feed Type and Sorting",
   "@feedTypeAndSorts": {
     "description": "Subcategory in Setting -> General"
@@ -1533,6 +1553,10 @@
   "@spoiler": {
     "description": "Placeholder label for spoiler"
   },
+  "standard": "Standard",
+  "@standard": {
+    "description": "Describes a standard visual density"
+  },
   "submit": "Submit",
   "@submit": {},
   "subscribe": "Subscribe",
@@ -1593,6 +1617,10 @@
   "@theming": {
     "description": "Title of Theming in Settings -> Appearance -> Theming"
   },
+  "thickness": "Thickness",
+  "@thickness": {
+    "description": "Describes a thickness (e.g., divider)"
+  },
   "thunderHasBeenUpdated": "Thunder updated to {version}!",
   "@thunderHasBeenUpdated": {
     "description": "Heading for changelog when Thunder has been updated"

lib/modlog/widgets/modlog_filter_picker.dart

@@ -110,28 +110,28 @@ class _ModlogActionTypePickerState extends State<ModlogActionTypePicker> {
               title: AppLocalizations.of(GlobalContext.context)!.posts,
               items: postModlogActionTypeItems,
               onNavigateBack: () => setState(() => category = ModlogActionTypeFilterCategory.all),
-              onSelect: (item) => widget.onSelect(item),
+              onSelect: (item) => widget.onSelect?.call(item),
               previouslySelectedItem: widget.previouslySelected,
             ),
           ModlogActionTypeFilterCategory.comment => ModlogSubFilterPicker(
               title: AppLocalizations.of(GlobalContext.context)!.comments,
               items: commentModlogActionTypeItems,
               onNavigateBack: () => setState(() => category = ModlogActionTypeFilterCategory.all),
-              onSelect: (item) => widget.onSelect(item),
+              onSelect: (item) => widget.onSelect?.call(item),
               previouslySelectedItem: widget.previouslySelected,
             ),
           ModlogActionTypeFilterCategory.community => ModlogSubFilterPicker(
               title: AppLocalizations.of(GlobalContext.context)!.community,
               items: communityModlogActionTypeItems,
               onNavigateBack: () => setState(() => category = ModlogActionTypeFilterCategory.all),
-              onSelect: (item) => widget.onSelect(item),
+              onSelect: (item) => widget.onSelect?.call(item),
               previouslySelectedItem: widget.previouslySelected,
             ),
           ModlogActionTypeFilterCategory.instance => ModlogSubFilterPicker(
               title: AppLocalizations.of(GlobalContext.context)!.instance(1),
               items: instanceModlogActionTypeItems,
               onNavigateBack: () => setState(() => category = ModlogActionTypeFilterCategory.all),
-              onSelect: (item) => widget.onSelect(item),
+              onSelect: (item) => widget.onSelect?.call(item),
               previouslySelectedItem: widget.previouslySelected,
             ),
         },
@@ -168,7 +168,7 @@ class _ModlogActionTypePickerState extends State<ModlogActionTypePicker> {
                 onSelected: () {
                   HapticFeedback.mediumImpact();
                   Navigator.of(context).pop();
-                  widget.onSelect(item);
+                  widget.onSelect?.call(item);
                 },
                 isSelected: widget.previouslySelected == item.payload,
               ),