feat: filter history based on query

Author: CoderUni

lib/presentation/history/bloc/history_bloc.dart

@@ -10,6 +10,7 @@ part 'history_state.dart';
 class HistoryBloc extends Bloc<HistoryEvent, HistoryState> {
   HistoryBloc(this.historyRepository) : super(const HistoryState()) {
     on<HistoryFetched>(_onHistoryFetched);
+    on<HistoryFiltered>(_onHistoryFiltered);
   }
   final HistoryRepository historyRepository;
 
@@ -21,9 +22,22 @@ class HistoryBloc extends Bloc<HistoryEvent, HistoryState> {
       emit(state.loading());
       // Fetch history from the database
       final history = await historyRepository.fetchTranslationHistory();
-      emit(state.success(history));
+
+      emit(state.fetchSuccess(history));
     } on Exception catch (e) {
       emit(state.error(e));
     }
   }
+
+  void _onHistoryFiltered(
+    HistoryFiltered event,
+    Emitter<HistoryState> emit,
+  ) {
+    final filteredHistory = historyRepository.filterHistory(
+      state.history,
+      event.query,
+    );
+
+    emit(state.filterSuccess(filteredHistory, state.history));
+  }
 }

lib/presentation/history/bloc/history_event.dart

@@ -15,6 +15,14 @@ final class HistoryFetched extends HistoryEvent {
   List<Object?> get props => [];
 }
 
+final class HistoryFiltered extends HistoryEvent {
+  const HistoryFiltered(this.query);
+  final String query;
+
+  @override
+  List<Object?> get props => [query];
+}
+
 final class HistoryDeleted extends HistoryEvent {
   const HistoryDeleted(this.historyId);
   final int historyId;

lib/presentation/history/bloc/history_state.dart

@@ -18,12 +18,14 @@ final class HistoryState extends Equatable {
   const HistoryState({
     this.method = HistoryMethod.initial,
     this.status = HistoryStatus.initial,
+    this.filteredHistory = const [],
     this.history = const [],
     this.exception,
   });
 
   final HistoryMethod method;
   final HistoryStatus status;
+  final List<TranslationHistory> filteredHistory;
   final List<TranslationHistory> history;
   final Exception? exception;
 
@@ -32,17 +34,30 @@ final class HistoryState extends Equatable {
         history: history,
       );
 
-  HistoryState success(List<TranslationHistory> history) => HistoryState(
+  HistoryState fetchSuccess(List<TranslationHistory> history) => HistoryState(
         status: HistoryStatus.success,
         history: history,
+        filteredHistory: history,
       );
 
+  HistoryState filterSuccess(
+    List<TranslationHistory> filteredHistory,
+    List<TranslationHistory> history,
+  ) {
+    return HistoryState(
+      status: HistoryStatus.success,
+      filteredHistory: filteredHistory,
+      history: history,
+    );
+  }
+
   HistoryState error(Exception e) => HistoryState(
         status: HistoryStatus.error,
         history: history,
         exception: e,
       );
 
   @override
-  List<Object?> get props => [method, status, history, exception];
+  List<Object?> get props =>
+      [method, status, filteredHistory, history, exception];
 }

lib/presentation/history/repositories/history_repository.dart

@@ -26,4 +26,32 @@ final class HistoryRepository {
       }).toList(),
     );
   }
+
+  List<TranslationHistory> filterHistory(
+    List<TranslationHistory> history,
+    String query,
+  ) {
+    if (query.isEmpty) return history;
+
+    final queryLower = query.toLowerCase().trim();
+
+    final matchingInput = history.where((entry) {
+      final inputLower = entry.input.toLowerCase();
+      return inputLower.contains(queryLower);
+    }).toList();
+
+    // Include entries where any translation output matches the query
+    // TODO: Rank the outputs based on how well the output matches the query
+    final matchingOutput = history.where((entry) {
+      // ignore: omit_local_variable_types
+      for (final TranslationHistoryItem item in entry.items ?? []) {
+        if (item.output.toLowerCase().contains(queryLower)) {
+          return true;
+        }
+      }
+      return false;
+    }).toList();
+
+    return <TranslationHistory>{...matchingInput, ...matchingOutput}.toList();
+  }
 }

lib/presentation/history/view/history_page.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:qack/constants/constants.dart';
 import 'package:qack/layout/layout_handler.dart';
 import 'package:qack/presentation/history/bloc/history_bloc.dart';
 import 'package:qack/presentation/history/repositories/history_repository.dart';
+import 'package:qack/presentation/settings/models/translator_details.dart';
 import 'package:qack/theme/theme.dart';
 import 'package:qack/utils/database/database.dart';
 import 'package:qack/widgets/input/input.dart';
@@ -17,15 +19,29 @@ class HistoryPage extends StatelessWidget {
         HistoryRepository(appDatabase: context.read<AppDatabase>()),
       ),
       child: const LayoutHandler(
-        mobile: HistoryView(),
-        tablet: HistoryView(),
+        mobile: HistoryView(
+          searchBarPadding: EdgeInsets.only(
+            top: 16,
+            left: PaddingConstants.mobileHorizontalMarginValue,
+            right: PaddingConstants.mobileHorizontalMarginValue,
+          ),
+        ),
+        tablet: HistoryView(
+          searchBarPadding: EdgeInsets.only(
+            top: 24,
+            left: PaddingConstants.tabletHorizontalMarginValue,
+            right: PaddingConstants.tabletHorizontalMarginValue,
+          ),
+        ),
       ),
     );
   }
 }
 
 class HistoryView extends StatefulWidget {
-  const HistoryView({super.key});
+  const HistoryView({required this.searchBarPadding, super.key});
+
+  final EdgeInsets searchBarPadding;
 
   @override
   State<HistoryView> createState() => _HistoryViewState();
@@ -45,10 +61,15 @@ class _HistoryViewState extends State<HistoryView> {
       body: SafeArea(
         child: CustomScrollView(
           slivers: [
-            const SliverPadding(
-              padding: EdgeInsets.only(top: 16),
+            SliverPadding(
+              padding: widget.searchBarPadding,
               sliver: SliverToBoxAdapter(
-                child: AppSearchBar(),
+                child: AppSearchBar(
+                  onChanged: (query) {
+                    context.read<HistoryBloc>().add(HistoryFiltered(query));
+                  },
+                  hintText: 'Search',
+                ),
               ),
             ),
             SliverPadding(
@@ -70,7 +91,7 @@ class _HistoryViewState extends State<HistoryView> {
                               ),
                             ),
                           );
-                        } else if (state.history.isEmpty) {
+                        } else if (state.filteredHistory.isEmpty) {
                           // TODO: only show this text if history and filter
                           // are empty
                           return const Center(
@@ -79,18 +100,22 @@ class _HistoryViewState extends State<HistoryView> {
                         }
 
                         // Temporary history
-                        final translationHistory = state.history[index];
+                        final translationHistory = state.filteredHistory[index];
                         return ListTile(
                           title: Text(translationHistory.input),
                           subtitle: Text(
                             translationHistory.items
-                                    ?.map((item) => item.output)
-                                    .join('\n') ??
+                                    ?.map(
+                                      (item) =>
+                                          '${item.translator.toTranslator()}: '
+                                          '${item.output}',
+                                    )
+                                    .join('\n\n') ??
                                 '',
                           ),
                         );
                       },
-                      childCount: state.history.length,
+                      childCount: state.filteredHistory.length,
                     ),
                   );
                 },

lib/presentation/settings/models/translator_details.dart

@@ -12,6 +12,23 @@ enum Translator {
   youDao,
 }
 
+extension TranslatorIntExt on int {
+  String toTranslator() {
+    switch (this) {
+      case 0:
+        return Translator.google.name;
+      case 1:
+        return Translator.baidu.name;
+      case 2:
+        return Translator.deepSeek.name;
+      case 3:
+        return Translator.youDao.name;
+      default:
+        throw ArgumentError('Invalid translator index: $this');
+    }
+  }
+}
+
 typedef TranslatorApiKeys = Map<String, String>;
 
 @freezed