feat(search): improve headlines search UI

- Use shared state widgets
- Integrate search bar in AppBar
- Add search button to AppBar

Author: fulleni

lib/headlines-feed/view/headlines_feed_page.dart

@@ -116,13 +116,17 @@ class _HeadlinesFeedViewState extends State<_HeadlinesFeedView> {
         builder: (context, state) {
           switch (state) {
             case HeadlinesFeedLoading():
-              return const LoadingStateWidget();
+              return const LoadingStateWidget(
+                icon: Icons.hourglass_empty,
+                headline: 'Loading...',
+                subheadline: 'Fetching headlines',
+              );
             case HeadlinesFeedLoaded():
               return RefreshIndicator(
                 onRefresh: () async {
-                  context
-                      .read<HeadlinesFeedBloc>()
-                      .add(HeadlinesFeedRefreshRequested());
+                  context.read<HeadlinesFeedBloc>().add(
+                        HeadlinesFeedRefreshRequested(),
+                      );
                 },
                 child: ListView.builder(
                   controller: _scrollController,
@@ -131,7 +135,11 @@ class _HeadlinesFeedViewState extends State<_HeadlinesFeedView> {
                       : state.headlines.length,
                   itemBuilder: (context, index) {
                     if (index >= state.headlines.length) {
-                      return const LoadingStateWidget();
+                      return const LoadingStateWidget(
+                        icon: Icons.hourglass_empty,
+                        headline: 'Loading...',
+                        subheadline: 'Fetching more headlines',
+                      );
                     }
                     final headline = state.headlines[index];
                     return HeadlineItemWidget(headline: headline);

lib/headlines-search/view/headlines_search_view.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:ht_headlines_repository/ht_headlines_repository.dart';
 import 'package:ht_main/headlines-feed/widgets/headline_item_widget.dart';
 import 'package:ht_main/headlines-search/bloc/headlines_search_bloc.dart';
+import 'package:ht_main/shared/widgets/failure_state_widget.dart';
+import 'package:ht_main/shared/widgets/initial_state_widget.dart';
+import 'package:ht_main/shared/widgets/loading_state_widget.dart';
 
 class HeadlinesSearchView extends StatelessWidget {
   const HeadlinesSearchView({super.key});
@@ -10,47 +14,69 @@ class HeadlinesSearchView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: SearchBar(
-          hintText: 'Search Headlines',
+        title: TextField(
+          decoration: const InputDecoration(
+            hintText: 'Search Headlines...',
+          ),
           onChanged: (value) {
-            context
-                .read<HeadlinesSearchBloc>()
-                .add(HeadlinesSearchTermChanged(searchTerm: value));
-          },
-          onSubmitted: (value) {
-            context.read<HeadlinesSearchBloc>().add(HeadlinesSearchRequested());
+            context.read<HeadlinesSearchBloc>().add(
+                  HeadlinesSearchTermChanged(searchTerm: value),
+                );
           },
         ),
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.search),
+            onPressed: () {
+              context.read<HeadlinesSearchBloc>().add(
+                    HeadlinesSearchRequested(),
+                  );
+            },
+          ),
+        ],
       ),
       body: BlocBuilder<HeadlinesSearchBloc, HeadlinesSearchState>(
         builder: (context, state) {
-          if (state is HeadlinesSearchInitial) {
-            return const Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(Icons.search, size: 64),
-                  SizedBox(height: 16),
-                  Text('Search Headlines', style: TextStyle(fontSize: 24)),
-                  Text('Enter keywords to find articles'),
-                ],
+          return switch (state) {
+            HeadlinesSearchInitial() => const InitialStateWidget(
+                icon: Icons.search,
+                headline: 'Search Headlines',
+                subheadline: 'Enter keywords to find articles',
+              ),
+            HeadlinesSearchLoading() => const LoadingStateWidget(
+                icon: Icons.hourglass_empty,
+                headline: 'Loading...',
+                subheadline: 'Fetching headlines',
+              ),
+            HeadlinesSearchLoaded(:final headlines) =>
+              _HeadlinesSearchLoadedView(headlines: headlines),
+            HeadlinesSearchError(:final message) => FailureStateWidget(
+                message: message,
+                onRetry: () {
+                  context
+                      .read<HeadlinesSearchBloc>()
+                      .add(HeadlinesSearchRequested());
+                },
               ),
-            );
-          } else if (state is HeadlinesSearchLoading) {
-            return const Center(child: CircularProgressIndicator());
-          } else if (state is HeadlinesSearchLoaded) {
-            return ListView.builder(
-              itemCount: state.headlines.length,
-              itemBuilder: (context, index) {
-                return HeadlineItemWidget(headline: state.headlines[index]);
-              },
-            );
-          } else if (state is HeadlinesSearchError) {
-            return Center(child: Text(state.message));
-          }
-          return Container(); // Should never reach here
+          };
         },
       ),
     );
   }
 }
+
+class _HeadlinesSearchLoadedView extends StatelessWidget {
+  const _HeadlinesSearchLoadedView({required this.headlines});
+
+  final List<Headline> headlines;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: headlines.length,
+      itemBuilder: (context, index) {
+        return HeadlineItemWidget(headline: headlines[index]);
+      },
+    );
+  }
+}

lib/shared/widgets/initial_state_widget.dart

@@ -1,12 +1,29 @@
 import 'package:flutter/material.dart';
 
 class InitialStateWidget extends StatelessWidget {
-  const InitialStateWidget({super.key});
+  const InitialStateWidget({
+    required this.icon,
+    required this.headline,
+    required this.subheadline,
+    super.key,
+  });
+
+  final IconData icon;
+  final String headline;
+  final String subheadline;
 
   @override
   Widget build(BuildContext context) {
-    return const Center(
-      child: Text('Initial State'),
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(icon, size: 64),
+          const SizedBox(height: 16),
+          Text(headline, style: const TextStyle(fontSize: 24)),
+          Text(subheadline),
+        ],
+      ),
     );
   }
 }

lib/shared/widgets/loading_state_widget.dart

@@ -1,13 +1,32 @@
 import 'package:flutter/material.dart';
 
 class LoadingStateWidget extends StatelessWidget {
-  const LoadingStateWidget({super.key});
+  const LoadingStateWidget({
+    required this.icon,
+    required this.headline,
+    required this.subheadline,
+    super.key,
+  });
+
+  final IconData icon;
+  final String headline;
+  final String subheadline;
 
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: CircularProgressIndicator(
-        color: Theme.of(context).colorScheme.secondary,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(icon, size: 64),
+          const SizedBox(height: 16),
+          Text(headline, style: const TextStyle(fontSize: 24)),
+          Text(subheadline),
+          const SizedBox(height: 16),
+          CircularProgressIndicator(
+            color: Theme.of(context).colorScheme.secondary,
+          ),
+        ],
       ),
     );
   }

memory-bank/.clinerules

@@ -23,3 +23,6 @@
 - Document exceptions associated with calling a function in its documentation comments.
 - Define descriptive exceptions by implementing `Exception` with descriptive names, rather than throwing generic `Exception`.
 - When using `go_router` for navigation, `BuildContext` is required for methods like `context.goNamed()`. Since BLoCs don't have inherent access to `BuildContext`, it needs to be passed through the event triggering the navigation.
+
+## Repository
+- The `searchHeadlines` method in `HtHeadlinesRepository` does not support pagination. Pagination-like behavior is handled in the `HeadlinesSearchBloc`.

memory-bank/activeContext.md

@@ -2,11 +2,13 @@
 
 ## Current Focus
 
-Creating the project README.
+Implementing remaining features.
 
 ## Recent Changes
 
-- Updated the memory bank to reflect the full product vision and licensing details.
+- Updated the search page to use shared widgets for initial, loading, and error states.
+- Simplified the search bar by integrating it directly into the AppBar.
+- Added a search button to the AppBar to trigger the search.
 
 ## Next Steps
 

memory-bank/progress.md

@@ -22,6 +22,9 @@
     -   `HeadlinesSearchBloc` for managing headlines search.
     -   `HeadlinesSearchPage` and `HeadlinesSearchView` for displaying search results.
     -   Debounced search term input.
+    -   Uses shared widgets for initial, loading, and error states.
+    -   Integrated search bar directly into the AppBar.
+    -   Search button in the AppBar to trigger the search.
 -   Error handling within BLoCs, with specific error states.
 -   Page/View pattern for UI components.
 
@@ -43,7 +46,7 @@
 
 ## Current Status
 
--   Early development stage. Core architecture, basic headline feed and search functionality, and initial memory bank documentation are complete. The focus is now on creating the README and then implementing the remaining features and backend integration.
+-   Implementing remaining features and backend integration.
 
 ## Known Issues
 

pubspec.yaml

@@ -1,6 +1,6 @@
 name: ht_main
 description: main headlines toolkit mobile app.
-version: 0.17.0
+version: 0.19.0
 publish_to: none
 repository: https://github.com/headlines-toolkit/ht-main
 environment: