feat(ui): Implement a generic list item

lib/src/ui/pages/anime_list.dart

@@ -3,7 +3,7 @@ import 'package:anitrack/src/data/type.dart';
 import 'package:anitrack/src/ui/bloc/anime_list_bloc.dart';
 import 'package:anitrack/src/ui/bloc/anime_search_bloc.dart';
 import 'package:anitrack/src/ui/constants.dart';
-import 'package:anitrack/src/ui/widgets/anime.dart';
+import 'package:anitrack/src/ui/widgets/list_item.dart';
 import 'package:bottom_bar/bottom_bar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -81,8 +81,15 @@ class AnimeListPage extends StatelessWidget {
                     if (anime.state != state.filterState) return Container();
                   }
 
-                  return AnimeListWidget(
+                  return ListItem(
-                    data: anime,
+                    title: anime.title,
+                    thumbnailUrl: anime.thumbnailUrl,
+                    extra: [
+                      Text(
+                        '${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                    ],
                     onLeftSwipe: () {
                       context.read<AnimeListBloc>().add(
                         AnimeEpisodeDecrementedEvent(state.animes[index].id),

lib/src/ui/pages/anime_search.dart

@@ -3,7 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:anitrack/src/data/anime.dart';
 import 'package:anitrack/src/ui/bloc/anime_search_bloc.dart';
 import 'package:anitrack/src/ui/constants.dart';
-import 'package:anitrack/src/ui/widgets/anime.dart';
+import 'package:anitrack/src/ui/widgets/list_item.dart';
 import 'package:anitrack/src/ui/widgets/image.dart';
 
 class AnimeSearchPage extends StatelessWidget {
@@ -54,7 +54,6 @@ class AnimeSearchPage extends StatelessWidget {
               else
                 Expanded(
                   child: ListView.builder(
-                    //shrinkWrap: true,
                     itemCount: state.searchResults.length,
                     itemBuilder: (context, index) {
                       final item = state.searchResults[index];
@@ -64,49 +63,22 @@ class AnimeSearchPage extends StatelessWidget {
                             AnimeAddedEvent(item),
                           );
                         },
-                        child: Padding(
+                        child: ListItem(
-                          padding: const EdgeInsets.all(8),
+                          title: item.title,
-                          child: Row(
+                          thumbnailUrl: item.thumbnailUrl,
-                            crossAxisAlignment: CrossAxisAlignment.start,
+                          extra: [
-                            children: [
+                            Align(
-                              AnimeCoverImage(
+                              alignment: Alignment.centerLeft,
-                                url: item.thumbnailUrl,
+                              child: Text(
+                                item.description,
+                                textAlign: TextAlign.justify,
+                                style: Theme.of(context).textTheme.bodyMedium,
+                                maxLines: 4,
+                                softWrap: true,
+                                overflow: TextOverflow.ellipsis,
                               ),
-
+                            ),
-                              Expanded(
+                          ],
-                                child: Padding(
-                                  padding: const EdgeInsets.symmetric(horizontal: 8),
-                                  child: Column(
-                                    mainAxisSize: MainAxisSize.min,
-                                    children: [
-                                      Align(
-                                        alignment: Alignment.centerLeft,
-                                        child: Text(
-                                          item.title,
-                                          style: Theme.of(context).textTheme.titleLarge,
-                                          maxLines: 2,
-                                          softWrap: true,
-                                          overflow: TextOverflow.ellipsis,
-                                        ),
-                                      ),
-
-                                      Align(
-                                        alignment: Alignment.centerLeft,
-                                        child: Text(
-                                          item.description,
-                                          textAlign: TextAlign.justify,
-                                          style: Theme.of(context).textTheme.bodyMedium,
-                                          maxLines: 4,
-                                          softWrap: true,
-                                          overflow: TextOverflow.ellipsis,
-                                        ),
-                                      ),
-                                    ],
-                                  ),
-                                ),
-                              ),
-                            ],
-                          ),
                         ),
                       );
                     }

lib/src/ui/widgets/list_item.dart

@@ -4,29 +4,37 @@ import 'package:flutter/material.dart';
 import 'package:swipeable_tile/swipeable_tile.dart';
 
 /// A widget for displaying simple data about an anime in the listview
-class AnimeListWidget extends StatelessWidget {
+class ListItem extends StatelessWidget {
-  const AnimeListWidget({
+  ListItem({
-    required this.data,
+    required this.thumbnailUrl,
-    required this.onLeftSwipe,
+    required this.title,
-    required this.onRightSwipe,
+    this.onLeftSwipe,
+    this.onRightSwipe,
+    this.extra = const [],
     super.key,
   });
   
-  /// The anime to display
+  /// URL for the cover image.
-  final AnimeTrackingData data;
+  final String thumbnailUrl;
 
-  /// Callbacks for the swipe functionality
+  /// The title of the item
-  final void Function() onLeftSwipe;
+  final String title;
-  final void Function() onRightSwipe;
+
+  /// Extra widgets.
+  final List<Widget> extra;
+  
+  /// Callbacks for the swipe functionality.
+  final void Function()? onLeftSwipe;
+  final void Function()? onRightSwipe;
 
   @override
   Widget build(BuildContext context) {
     return SwipeableTile.swipeToTrigger(
       onSwiped: (direction) {
         if (direction == SwipeDirection.endToStart) {
-          onRightSwipe();
+          onRightSwipe!();
         } else if (direction == SwipeDirection.startToEnd) {
-          onLeftSwipe();
+          onLeftSwipe!();
         }
       },
       // TODO(PapaTutuWawa): Fix
@@ -51,7 +59,9 @@ class AnimeListWidget extends StatelessWidget {
         return Container();
       },
       color: Theme.of(context).scaffoldBackgroundColor,
-      direction: SwipeDirection.horizontal,
+      direction: onRightSwipe != null && onLeftSwipe != null ?
+        SwipeDirection.horizontal :
+        SwipeDirection.none,
       child: Padding(
         padding: const EdgeInsets.all(8),
         child: Row(
@@ -62,7 +72,7 @@ class AnimeListWidget extends StatelessWidget {
               child: SizedBox(
                 width: 100,
                 child: Image.network(
-                  data.thumbnailUrl,
+                  thumbnailUrl,
                 ),
               ),
             ),
@@ -75,7 +85,7 @@ class AnimeListWidget extends StatelessWidget {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Text(
-                      data.title,
+                      title,
                       textAlign: TextAlign.left,
                       style: Theme.of(context).textTheme.titleLarge,
                       maxLines: 2,
@@ -83,10 +93,7 @@ class AnimeListWidget extends StatelessWidget {
                       overflow: TextOverflow.ellipsis,
                     ),
 
-                    Text(
+                    ...extra,
-                      '${data.episodesWatched}/${data.episodesTotal ?? "???"}',
-                      style: Theme.of(context).textTheme.titleMedium,
-                    ),
                   ],
                 ),
               ),