Merge pull request #141 from flutter-news-app-full-source-code/refactor/enhance-headlines-table-ui

Refactor/enhance headlines table UI

Author: fulleni

lib/content_management/bloc/content_management_bloc.dart

@@ -7,7 +7,6 @@ import 'package:equatable/equatable.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/content_management/bloc/headlines_filter/headlines_filter_bloc.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/content_management/bloc/sources_filter/sources_filter_bloc.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/content_management/bloc/topics_filter/topics_filter_bloc.dart';
-import 'package:flutter_news_app_web_dashboard_full_source_code/content_management/models/breaking_news_filter_status.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/shared/constants/app_constants.dart';
 import 'package:flutter_news_app_web_dashboard_full_source_code/shared/services/pending_deletions_service.dart';
 import 'package:ui_kit/ui_kit.dart';
@@ -154,15 +153,9 @@ class ContentManagementBloc
       filter['eventCountry.id'] = {r'$in': state.selectedCountryIds};
     }
 
-    // Handle the breaking news filter based on the enum status.
-    switch (state.isBreaking) {
-      case BreakingNewsFilterStatus.breakingOnly:
-        filter['isBreaking'] = true;
-      case BreakingNewsFilterStatus.nonBreakingOnly:
-        filter['isBreaking'] = false;
-      case BreakingNewsFilterStatus.all:
-        // For 'all', we don't add the 'isBreaking' key to the filter.
-        break;
+    // If the breaking news filter is active, add it to the query.
+    if (state.isBreaking) {
+      filter['isBreaking'] = true;
     }
 
     return filter;
@@ -394,14 +387,15 @@ class ContentManagementBloc
       state.copyWith(
         headlines: updatedHeadlines,
         lastPendingDeletionId: event.id,
-        snackbarMessage: 'Headline "${headlineToDelete.title}" deleted.',
+        itemPendingDeletion: headlineToDelete,
       ),
     );
 
     _pendingDeletionsService.requestDeletion(
       item: headlineToDelete,
       repository: _headlinesRepository,
       undoDuration: AppConstants.kSnackbarDuration,
+      // messageBuilder is omitted, UI will build the message
     );
   }
 
@@ -585,14 +579,15 @@ class ContentManagementBloc
       state.copyWith(
         topics: updatedTopics,
         lastPendingDeletionId: event.id,
-        snackbarMessage: 'Topic "${topicToDelete.name}" deleted.',
+        itemPendingDeletion: topicToDelete,
       ),
     );
 
     _pendingDeletionsService.requestDeletion(
       item: topicToDelete,
       repository: _topicsRepository,
       undoDuration: AppConstants.kSnackbarDuration,
+      // messageBuilder is omitted, UI will build the message
     );
   }
 
@@ -776,14 +771,15 @@ class ContentManagementBloc
       state.copyWith(
         sources: updatedSources,
         lastPendingDeletionId: event.id,
-        snackbarMessage: 'Source "${sourceToDelete.name}" deleted.',
+        itemPendingDeletion: sourceToDelete,
       ),
     );
 
     _pendingDeletionsService.requestDeletion(
       item: sourceToDelete,
       repository: _sourcesRepository,
       undoDuration: AppConstants.kSnackbarDuration,
+      // messageBuilder is omitted, UI will build the message
     );
   }
 
@@ -804,13 +800,20 @@ class ContentManagementBloc
     Emitter<ContentManagementState> emit,
   ) async {
     switch (event.event.status) {
+      case DeletionStatus.requested:
+        // This case is now handled by the optimistic UI update in the
+        // specific delete handlers (e.g., _onDeleteHeadlineForeverRequested).
+        // The itemPendingDeletion is set there, which the UI uses to build
+        // the snackbar message.
+        break;
       case DeletionStatus.confirmed:
         // If deletion is confirmed, clear pending status.
         // The item was already optimistically removed from the list.
         emit(
           state.copyWith(
-            lastPendingDeletionId: null,
-            snackbarMessage: null,
+            lastPendingDeletionId: null, // Clear the pending ID
+            // Clear the item so the snackbar doesn't reappear on rebuilds
+            itemPendingDeletion: null,
           ),
         );
       case DeletionStatus.undone:
@@ -823,8 +826,8 @@ class ContentManagementBloc
           emit(
             state.copyWith(
               headlines: updatedHeadlines,
-              lastPendingDeletionId: null,
-              snackbarMessage: null,
+              lastPendingDeletionId: null, // Clear the pending ID
+              itemPendingDeletion: null,
             ),
           );
         } else if (item is Topic) {
@@ -834,8 +837,8 @@ class ContentManagementBloc
           emit(
             state.copyWith(
               topics: updatedTopics,
-              lastPendingDeletionId: null,
-              snackbarMessage: null,
+              lastPendingDeletionId: null, // Clear the pending ID
+              itemPendingDeletion: null,
             ),
           );
         } else if (item is Source) {
@@ -845,8 +848,8 @@ class ContentManagementBloc
           emit(
             state.copyWith(
               sources: updatedSources,
-              lastPendingDeletionId: null,
-              snackbarMessage: null,
+              lastPendingDeletionId: null, // Clear the pending ID
+              itemPendingDeletion: null,
             ),
           );
         }

lib/content_management/bloc/content_management_state.dart

@@ -36,7 +36,7 @@ class ContentManagementState extends Equatable {
     this.sourcesHasMore = false,
     this.exception,
     this.lastPendingDeletionId,
-    this.snackbarMessage,
+    this.itemPendingDeletion,
   });
 
   /// The currently active tab in the content management section.
@@ -85,9 +85,9 @@ class ContentManagementState extends Equatable {
   /// Used to trigger the snackbar display.
   final String? lastPendingDeletionId;
 
-  /// The message to display in the snackbar for pending deletions or other
-  /// transient messages.
-  final String? snackbarMessage;
+  /// The item that was just requested for deletion, used by the UI to show
+  /// a confirmation snackbar.
+  final FeedItem? itemPendingDeletion;
 
   /// Creates a copy of this [ContentManagementState] with updated values.
   ContentManagementState copyWith({
@@ -106,7 +106,7 @@ class ContentManagementState extends Equatable {
     bool? sourcesHasMore,
     HttpException? exception,
     String? lastPendingDeletionId,
-    String? snackbarMessage,
+    FeedItem? itemPendingDeletion,
   }) {
     return ContentManagementState(
       activeTab: activeTab ?? this.activeTab,
@@ -124,7 +124,7 @@ class ContentManagementState extends Equatable {
       sourcesHasMore: sourcesHasMore ?? this.sourcesHasMore,
       exception: exception,
       lastPendingDeletionId: lastPendingDeletionId,
-      snackbarMessage: snackbarMessage,
+      itemPendingDeletion: itemPendingDeletion,
     );
   }
 
@@ -145,6 +145,6 @@ class ContentManagementState extends Equatable {
     sourcesHasMore,
     exception,
     lastPendingDeletionId,
-    snackbarMessage,
+    itemPendingDeletion,
   ];
 }

lib/content_management/bloc/headlines_filter/headlines_filter_bloc.dart

@@ -1,7 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:core/core.dart';
 import 'package:equatable/equatable.dart';
-import 'package:flutter_news_app_web_dashboard_full_source_code/content_management/models/breaking_news_filter_status.dart';
 
 part 'headlines_filter_event.dart';
 part 'headlines_filter_state.dart';
@@ -79,8 +78,7 @@ class HeadlinesFilterBloc
 
   /// Handles changes to the breaking news filter.
   ///
-  /// This updates the `isBreaking` status for the filter using the
-  /// [BreakingNewsFilterStatus] enum.
+  /// This updates the `isBreaking` status for the filter.
   void _onHeadlinesBreakingNewsFilterChanged(
     HeadlinesBreakingNewsFilterChanged event,
     Emitter<HeadlinesFilterState> emit,
@@ -139,9 +137,8 @@ class HeadlinesFilterBloc
     if (state.selectedCountryIds.isNotEmpty) {
       filter['eventCountry.id'] = {r'$in': state.selectedCountryIds};
     }
-    if (state.isBreaking != BreakingNewsFilterStatus.all) {
-      filter['isBreaking'] =
-          state.isBreaking == BreakingNewsFilterStatus.breakingOnly;
+    if (state.isBreaking) {
+      filter['isBreaking'] = true;
     }
 
     return filter;

lib/content_management/bloc/headlines_filter/headlines_filter_event.dart

@@ -62,10 +62,10 @@ final class HeadlinesCountryFilterChanged extends HeadlinesFilterEvent {
 final class HeadlinesBreakingNewsFilterChanged extends HeadlinesFilterEvent {
   const HeadlinesBreakingNewsFilterChanged(this.isBreaking);
 
-  final BreakingNewsFilterStatus isBreaking;
+  final bool isBreaking;
 
   @override
-  List<Object?> get props => [isBreaking];
+  List<Object> get props => [isBreaking];
 }
 
 /// Event to request applying all current filters.
@@ -84,7 +84,7 @@ final class HeadlinesFilterApplied extends HeadlinesFilterEvent {
   final List<String> selectedSourceIds;
   final List<String> selectedTopicIds;
   final List<String> selectedCountryIds;
-  final BreakingNewsFilterStatus isBreaking;
+  final bool isBreaking;
 
   @override
   List<Object?> get props => [

lib/content_management/bloc/headlines_filter/headlines_filter_state.dart

@@ -15,7 +15,7 @@ class HeadlinesFilterState extends Equatable {
     this.selectedSourceIds = const [],
     this.selectedTopicIds = const [],
     this.selectedCountryIds = const [],
-    this.isBreaking = BreakingNewsFilterStatus.all,
+    this.isBreaking = false,
   });
 
   /// The current text in the search query field.
@@ -33,9 +33,8 @@ class HeadlinesFilterState extends Equatable {
   /// The list of country IDs to be included in the filter.
   final List<String> selectedCountryIds;
 
-  /// The breaking news status to filter by.
-  /// `null` = all, `true` = breaking only, `false` = non-breaking only.
-  final BreakingNewsFilterStatus isBreaking;
+  /// A flag to filter for breaking news only.
+  final bool isBreaking;
 
   /// Creates a copy of this state with the given fields replaced with the
   /// new values.
@@ -45,7 +44,7 @@ class HeadlinesFilterState extends Equatable {
     List<String>? selectedSourceIds,
     List<String>? selectedTopicIds,
     List<String>? selectedCountryIds,
-    BreakingNewsFilterStatus? isBreaking,
+    bool? isBreaking,
   }) {
     return HeadlinesFilterState(
       searchQuery: searchQuery ?? this.searchQuery,

lib/content_management/view/content_management_page.dart

@@ -135,14 +135,27 @@ class _ContentManagementPageState extends State<ContentManagementPage>
         ),
         BlocListener<ContentManagementBloc, ContentManagementState>(
           listenWhen: (previous, current) =>
-              previous.snackbarMessage != current.snackbarMessage &&
-              current.snackbarMessage != null,
+              previous.itemPendingDeletion != current.itemPendingDeletion &&
+              current.itemPendingDeletion != null,
           listener: (context, state) {
+            final item = state.itemPendingDeletion!;
+            String itemType;
+            String itemName;
+            if (item is Headline) {
+              itemType = l10n.headline;
+              itemName = item.title;
+            } else if (item is Topic) {
+              itemType = l10n.topic;
+              itemName = item.name;
+            } else {
+              itemType = l10n.source;
+              itemName = (item as Source).name;
+            }
             ScaffoldMessenger.of(context)
               ..hideCurrentSnackBar()
               ..showSnackBar(
                 SnackBar(
-                  content: Text(state.snackbarMessage!),
+                  content: Text(l10n.itemDeletedSnackbar(itemType, itemName)),
                   action: SnackBarAction(
                     label: l10n.undo,
                     onPressed: () {

lib/content_management/view/headlines_page.dart

@@ -221,32 +221,30 @@ class _HeadlinesDataSource extends DataTableSource {
       },
       cells: [
         DataCell(
-          Stack(
-            alignment: AlignmentDirectional.centerStart,
-            children: <Widget>[
-              // Add padding to the text to make space for the icon only when
-              // the headline is breaking news. This ensures all titles align
-              // vertically regardless of the icon's presence.
-              Padding(
-                padding: EdgeInsetsDirectional.only(
-                  start: headline.isBreaking
-                      ? AppSpacing.xl + AppSpacing.xs
-                      : 0,
-                ),
-                child: Text(
-                  headline.title,
-                  maxLines: 2,
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ),
-              // Conditionally display the icon at the start of the cell.
-              if (headline.isBreaking)
-                Icon(
-                  Icons.flash_on,
-                  size: 18,
-                  color: Theme.of(context).colorScheme.primary,
-                ),
-            ],
+          RichText(
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            text: TextSpan(
+              style: Theme.of(context).textTheme.bodyMedium,
+              children: [
+                TextSpan(text: headline.title),
+                if (headline.isBreaking)
+                  WidgetSpan(
+                    alignment: PlaceholderAlignment.middle,
+                    child: Padding(
+                      padding: const EdgeInsets.only(left: AppSpacing.xs),
+                      child: Tooltip(
+                        message: l10n.breakingNewsHint,
+                        child: Icon(
+                          Icons.flash_on,
+                          size: 14,
+                          color: Theme.of(context).colorScheme.primary,
+                        ),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
           ),
         ),
         if (!isMobile) // Conditionally show Source Name