Add new condensed post body view type (#994)

* Introduce new condensed post body mode

* Change post body view type to enum

* Fix enum name

lib/core/enums/local_settings.dart

@@ -28,6 +28,7 @@ enum LocalSettings {
   showThumbnailPreviewOnRight(name: 'setting_compact_show_thumbnail_on_right', label: 'Thumbnails on the Right'),
   showTextPostIndicator(name: 'setting_compact_show_text_post_indicator', label: 'Show Text Post Indicator'),
   tappableAuthorCommunity(name: 'setting_compact_tappable_author_community', label: 'Tappable Authors & Communities'),
+  postBodyViewType(name: 'setting_general_post_body_view_type', label: ''),
 
   // General Settings
   showPostVoteActions(name: 'setting_general_show_vote_actions', label: 'Show Vote Buttons'),

lib/core/enums/post_body_view_type.dart

@@ -0,0 +1,4 @@
+enum PostBodyViewType {
+  condensed,
+  expanded,
+}

lib/l10n/app_en.arb

@@ -187,6 +187,10 @@
   "@compactViewSettings": {
     "description": "Subcategory in Setting -> Appearance -> Posts"
   },
+  "condensed": "Condensed",
+  "@condensed": {
+    "description": "Condensed post body view type"
+  },
   "confirmLogOutBody": "Are you sure you want to log out?",
   "@confirmLogOutBody": {
     "description": "The body of the confirm logout dialog"
@@ -325,6 +329,10 @@
   "@expandCommentPreview": {
     "description": "Semantic label for the expand button in Setting -> Appearance -> Comments"
   },
+  "expanded": "Expanded",
+  "@expanded": {
+    "description": "Expanded post body view type"
+  },
   "expandInformation": "Expand Information",
   "@expandInformation": {
     "description": "Describes the action to expand information - used in FAB settings"
@@ -611,6 +619,18 @@
   },
   "postBody": "Post Body",
   "@postBody": {},
+  "postBodySettings": "Post Body Settings",
+  "@postBodySettings": {
+    "description": "Settings heading for post body settings"
+  },
+  "postBodySettingsDescription": "These settings affect the display of the post body",
+  "@postBodySettingsDescription": {
+    "description": "Description of post body settings"
+  },
+  "postBodyViewType": "Post Body View Type",
+  "@postBodyViewType": {
+    "description": "Setting name for the post body view type setting"
+  },
   "postLocked": "Post locked. No replies allowed.",
   "@postLocked": {},
   "postNSFW": "Mark as NSFW",

lib/post/widgets/post_view.dart

@@ -18,10 +18,13 @@ import 'package:thunder/account/models/account.dart';
 import 'package:thunder/community/pages/create_post_page.dart';
 import 'package:thunder/community/utils/post_card_action_helpers.dart';
 import 'package:thunder/community/widgets/post_card_metadata.dart';
+import 'package:thunder/community/widgets/post_card_type_badge.dart';
 import 'package:thunder/core/auth/helpers/fetch_account.dart';
 import 'package:thunder/core/enums/font_scale.dart';
 import 'package:thunder/core/enums/full_name_separator.dart';
 import 'package:thunder/core/enums/local_settings.dart';
+import 'package:thunder/core/enums/post_body_view_type.dart';
+import 'package:thunder/core/enums/view_mode.dart';
 import 'package:thunder/core/singletons/lemmy_client.dart';
 import 'package:thunder/core/singletons/preferences.dart';
 import 'package:thunder/feed/utils/utils.dart';
@@ -113,39 +116,45 @@ class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStat
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: Row(
                 children: [
+                  if (thunderState.postBodyViewType == PostBodyViewType.condensed && !thunderState.showThumbnailPreviewOnRight && postViewMedia.media.isNotEmpty)
+                    _getMediaPreview(thunderState, hideNsfwPreviews, markPostReadOnMediaView, isUserLoggedIn),
                   Expanded(
                     child: ScalableText(
                       HtmlUnescape().convert(post.name),
                       fontScale: thunderState.titleFontSizeScale,
                       style: theme.textTheme.titleMedium,
                     ),
                   ),
-                  IconButton(
-                    visualDensity: VisualDensity.compact,
-                    icon: Icon(
-                      expandableController.expanded ? Icons.expand_less_rounded : Icons.expand_more_rounded,
-                      semanticLabel: expandableController.expanded ? l10n.collapsePost : l10n.expandPost,
+                  if (thunderState.postBodyViewType == PostBodyViewType.condensed && thunderState.showThumbnailPreviewOnRight && postViewMedia.media.isNotEmpty)
+                    _getMediaPreview(thunderState, hideNsfwPreviews, markPostReadOnMediaView, isUserLoggedIn),
+                  if (thunderState.postBodyViewType != PostBodyViewType.condensed || postViewMedia.media.isEmpty)
+                    IconButton(
+                      visualDensity: VisualDensity.compact,
+                      icon: Icon(
+                        expandableController.expanded ? Icons.expand_less_rounded : Icons.expand_more_rounded,
+                        semanticLabel: expandableController.expanded ? l10n.collapsePost : l10n.expandPost,
+                      ),
+                      onPressed: () {
+                        expandableController.toggle();
+                        setState(() {}); // Update the state to trigger the collapse/expand
+                      },
                     ),
-                    onPressed: () {
-                      expandableController.toggle();
-                      setState(() {}); // Update the state to trigger the collapse/expand
-                    },
-                  ),
                 ],
               ),
             ),
-            Expandable(
-              controller: expandableController,
-              collapsed: Container(),
-              expanded: MediaView(
-                scrapeMissingPreviews: scrapeMissingPreviews,
-                post: post,
-                postView: widget.postViewMedia,
-                hideNsfwPreviews: hideNsfwPreviews,
-                markPostReadOnMediaView: markPostReadOnMediaView,
-                isUserLoggedIn: isUserLoggedIn,
+            if (thunderState.postBodyViewType != PostBodyViewType.condensed)
+              Expandable(
+                controller: expandableController,
+                collapsed: Container(),
+                expanded: MediaView(
+                  scrapeMissingPreviews: scrapeMissingPreviews,
+                  post: post,
+                  postView: widget.postViewMedia,
+                  hideNsfwPreviews: hideNsfwPreviews,
+                  markPostReadOnMediaView: markPostReadOnMediaView,
+                  isUserLoggedIn: isUserLoggedIn,
+                ),
               ),
-            ),
             if (widget.postViewMedia.postView.post.body != null)
               Expandable(
                 controller: expandableController,
@@ -517,6 +526,36 @@ class _PostSubviewState extends State<PostSubview> with SingleTickerProviderStat
       ),
     );
   }
+
+  Widget _getMediaPreview(ThunderState thunderState, bool hideNsfwPreviews, bool markPostReadOnMediaView, bool isUserLoggedIn) {
+    return Stack(
+      alignment: AlignmentDirectional.bottomEnd,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: 10.0,
+            vertical: 4,
+          ),
+          child: MediaView(
+            scrapeMissingPreviews: thunderState.scrapeMissingPreviews,
+            postView: postViewMedia,
+            showFullHeightImages: false,
+            hideNsfwPreviews: hideNsfwPreviews,
+            markPostReadOnMediaView: markPostReadOnMediaView,
+            viewMode: ViewMode.compact,
+            isUserLoggedIn: isUserLoggedIn,
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(right: 6, bottom: 0),
+          child: TypeBadge(
+            postViewMedia: postViewMedia,
+            read: false,
+          ),
+        ),
+      ],
+    );
+  }
 }
 
 /// Provides a preview of the post body when the post is collapsed.

lib/settings/pages/general_settings_page.dart

@@ -72,9 +72,6 @@ class _GeneralSettingsPageState extends State<GeneralSettingsPage> with SingleTi
   /// When enabled, sharing posts will use the advanced share sheet
   bool useAdvancedShareSheet = true;
 
-  /// When enabled, cross posts will be shown on the post page
-  bool showCrossPosts = true;
-
   /// When enabled, the parent comment body will be hidden if the parent comment is collapsed
   bool collapseParentCommentOnGesture = true;
 
@@ -129,10 +126,6 @@ class _GeneralSettingsPageState extends State<GeneralSettingsPage> with SingleTi
         await prefs.setBool(LocalSettings.useTabletMode.name, value);
         setState(() => tabletMode = value);
 
-      case LocalSettings.showCrossPosts:
-        await prefs.setBool(LocalSettings.showCrossPosts.name, value);
-        setState(() => showCrossPosts = value);
-        break;
       case LocalSettings.useAdvancedShareSheet:
         await prefs.setBool(LocalSettings.useAdvancedShareSheet.name, value);
         setState(() => useAdvancedShareSheet = value);
@@ -205,7 +198,6 @@ class _GeneralSettingsPageState extends State<GeneralSettingsPage> with SingleTi
       markPostReadOnMediaView = prefs.getBool(LocalSettings.markPostAsReadOnMediaView.name) ?? false;
       tabletMode = prefs.getBool(LocalSettings.useTabletMode.name) ?? false;
 
-      showCrossPosts = prefs.getBool(LocalSettings.showCrossPosts.name) ?? true;
       useAdvancedShareSheet = prefs.getBool(LocalSettings.useAdvancedShareSheet.name) ?? true;
 
       collapseParentCommentOnGesture = prefs.getBool(LocalSettings.collapseParentCommentBodyOnGesture.name) ?? true;
@@ -419,18 +411,6 @@ class _GeneralSettingsPageState extends State<GeneralSettingsPage> with SingleTi
               child: Text(l10n.postBehaviourSettings, style: theme.textTheme.titleMedium),
             ),
           ),
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16.0),
-              child: ToggleOption(
-                description: LocalSettings.showCrossPosts.label,
-                value: showCrossPosts,
-                iconEnabled: Icons.repeat_on_rounded,
-                iconDisabled: Icons.repeat_rounded,
-                onToggle: (bool value) => setPreferences(LocalSettings.showCrossPosts, value),
-              ),
-            ),
-          ),
           SliverToBoxAdapter(
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 16.0),

lib/settings/pages/post_appearance_settings_page.dart

@@ -9,6 +9,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:thunder/community/widgets/post_card_view_comfortable.dart';
 import 'package:thunder/community/widgets/post_card_view_compact.dart';
 import 'package:thunder/core/enums/local_settings.dart';
+import 'package:thunder/core/enums/post_body_view_type.dart';
 import 'package:thunder/core/models/post_view_media.dart';
 import 'package:thunder/core/singletons/preferences.dart';
 import 'package:thunder/feed/utils/post.dart';
@@ -74,6 +75,9 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
   /// Controller to manage expandable state for comment preview
   ExpandableController expandableController = ExpandableController();
 
+  /// Determines how post bodies are displayed
+  PostBodyViewType postBodyViewType = PostBodyViewType.expanded;
+
   /// Initialize the settings from the user's shared preferences
   Future<void> initPreferences() async {
     final prefs = (await UserPreferences.instance).sharedPreferences;
@@ -85,7 +89,6 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
       showPostAuthor = prefs.getBool(LocalSettings.showPostAuthor.name) ?? false;
       useDisplayNames = prefs.getBool(LocalSettings.useDisplayNamesForUsers.name) ?? true;
       dimReadPosts = prefs.getBool(LocalSettings.dimReadPosts.name) ?? true;
-      showCrossPosts = prefs.getBool(LocalSettings.showCrossPosts.name) ?? true;
 
       // Compact View Settings
       showThumbnailPreviewOnRight = prefs.getBool(LocalSettings.showThumbnailPreviewOnRight.name) ?? false;
@@ -99,6 +102,10 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
       showVoteActions = prefs.getBool(LocalSettings.showPostVoteActions.name) ?? true;
       showSaveAction = prefs.getBool(LocalSettings.showPostSaveAction.name) ?? true;
       showCommunityIcons = prefs.getBool(LocalSettings.showPostCommunityIcons.name) ?? false;
+
+      // Post body settings
+      showCrossPosts = prefs.getBool(LocalSettings.showCrossPosts.name) ?? true;
+      postBodyViewType = PostBodyViewType.values.byName(prefs.getString(LocalSettings.postBodyViewType.name) ?? PostBodyViewType.expanded.name);
     });
   }
 
@@ -127,10 +134,6 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
         await prefs.setBool(LocalSettings.dimReadPosts.name, value);
         setState(() => dimReadPosts = value);
         break;
-      case LocalSettings.showCrossPosts:
-        await prefs.setBool(LocalSettings.showCrossPosts.name, value);
-        setState(() => showCrossPosts = value);
-        break;
 
       case LocalSettings.showThumbnailPreviewOnRight:
         await prefs.setBool(LocalSettings.showThumbnailPreviewOnRight.name, value);
@@ -168,6 +171,15 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
         await prefs.setBool(LocalSettings.showPostCommunityIcons.name, value);
         setState(() => showCommunityIcons = value);
         break;
+
+      case LocalSettings.showCrossPosts:
+        await prefs.setBool(LocalSettings.showCrossPosts.name, value);
+        setState(() => showCrossPosts = value);
+        break;
+      case LocalSettings.postBodyViewType:
+        await prefs.setString(LocalSettings.postBodyViewType.name, (value as PostBodyViewType).name);
+        setState(() => postBodyViewType = value);
+        break;
     }
 
     if (context.mounted) {
@@ -184,7 +196,6 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
     await prefs.remove(LocalSettings.showPostAuthor.name);
     await prefs.remove(LocalSettings.useDisplayNamesForUsers.name);
     await prefs.remove(LocalSettings.dimReadPosts.name);
-    await prefs.remove(LocalSettings.showCrossPosts.name);
     await prefs.remove(LocalSettings.showThumbnailPreviewOnRight.name);
     await prefs.remove(LocalSettings.showTextPostIndicator.name);
     await prefs.remove(LocalSettings.showPostTitleFirst.name);
@@ -194,6 +205,8 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
     await prefs.remove(LocalSettings.showPostVoteActions.name);
     await prefs.remove(LocalSettings.showPostSaveAction.name);
     await prefs.remove(LocalSettings.showPostCommunityIcons.name);
+    await prefs.remove(LocalSettings.showCrossPosts.name);
+    await prefs.remove(LocalSettings.postBodyViewType.name);
 
     await initPreferences();
 
@@ -458,18 +471,6 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
               ),
             ),
           ),
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16.0),
-              child: ToggleOption(
-                description: LocalSettings.showCrossPosts.label,
-                value: showCrossPosts,
-                iconEnabled: Icons.repeat_on_rounded,
-                iconDisabled: Icons.repeat_rounded,
-                onToggle: (bool value) => setPreferences(LocalSettings.showCrossPosts, value),
-              ),
-            ),
-          ),
           const SliverToBoxAdapter(child: SizedBox(height: 32.0)),
           SliverToBoxAdapter(
             child: Padding(
@@ -614,6 +615,58 @@ class _PostAppearanceSettingsPageState extends State<PostAppearanceSettingsPage>
               ),
             ),
           ),
+          const SliverToBoxAdapter(child: SizedBox(height: 32.0)),
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(l10n.postBodySettings, style: theme.textTheme.titleMedium),
+                  Text(
+                    l10n.postBodySettingsDescription,
+                    style: theme.textTheme.bodyMedium?.copyWith(
+                      color: theme.textTheme.bodyMedium?.color?.withOpacity(0.8),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: ToggleOption(
+                description: LocalSettings.showCrossPosts.label,
+                value: showCrossPosts,
+                iconEnabled: Icons.repeat_on_rounded,
+                iconDisabled: Icons.repeat_rounded,
+                onToggle: (bool value) => setPreferences(LocalSettings.showCrossPosts, value),
+              ),
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: ListOption(
+                description: l10n.postBodyViewType,
+                value: ListPickerItem(
+                    label: switch (postBodyViewType) {
+                      PostBodyViewType.condensed => l10n.condensed,
+                      PostBodyViewType.expanded => l10n.expanded,
+                    },
+                    icon: Icons.crop_16_9_rounded,
+                    payload: postBodyViewType,
+                    capitalizeLabel: false),
+                options: [
+                  ListPickerItem(icon: Icons.crop_16_9_rounded, label: l10n.condensed, payload: PostBodyViewType.condensed),
+                  ListPickerItem(icon: Icons.crop_din_rounded, label: l10n.expanded, payload: PostBodyViewType.expanded),
+                ],
+                icon: Icons.view_list_rounded,
+                onChanged: (value) => setPreferences(LocalSettings.postBodyViewType, value.payload),
+              ),
+            ),
+          ),
           const SliverToBoxAdapter(child: SizedBox(height: 128.0)),
         ],
       ),