Listing screen tweaks (#165)

* fix item highlighting * prevent the query provider to reset state * jump to the current article when redrawing the listing
casimir · Apr 17, 2024 · 7d92dfe · 7d92dfe
1 parent 07ff855
commit 7d92dfe
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -281,7 +281,7 @@ class _MainContainerState extends ConsumerState<_MainContainer> {
       context.push('/articles/$articleId');
     }
 
-    return ListingPage(onItemSelect: onItemSelect);
+    return ListingPage(onItemSelect: onItemSelect, showSelectedItem: false);
   }
 
   Widget _buildWideLayout() {

diff --git a/lib/pages/listing.dart b/lib/pages/listing.dart
@@ -33,16 +33,37 @@ class ListingPage extends ConsumerStatefulWidget {
     super.key,
     this.onItemSelect,
     this.withProgressIndicator = true,
+    this.showSelectedItem = true,
   });
 
   final void Function(int articleId)? onItemSelect;
   final bool withProgressIndicator;
+  final bool showSelectedItem;
 
   @override
   ConsumerState<ListingPage> createState() => _ListingPageState();
 }
 
 class _ListingPageState extends ConsumerState<ListingPage> {
+  final ScrollController _scroller = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+
+    final articleId = ref.read(currentArticleProvider)?.id;
+    if (articleId != null) {
+      final query = ref.read(queryProvider);
+      final scrollToIndex =
+          context.read<WallabagStorage>().indexOf(articleId, query);
+      if (scrollToIndex != null) {
+        WidgetsBinding.instance!.addPostFrameCallback((_) {
+          _scroller.jumpTo(scrollToIndex * listingHeight);
+        });
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final storage = context.watch<WallabagStorage>();
@@ -85,6 +106,7 @@ class _ListingPageState extends ConsumerState<ListingPage> {
                   child: RefreshIndicator.adaptive(
                     onRefresh: doRefresh,
                     child: ListView.separated(
+                      controller: _scroller,
                       padding: const EdgeInsets.symmetric(vertical: 8.0),
                       itemBuilder: (context, index) {
                         final article = storage.index(index, query)!;
@@ -103,6 +125,7 @@ class _ListingPageState extends ConsumerState<ListingPage> {
                                 .change(article.id!);
                             widget.onItemSelect?.call(article.id!);
                           },
+                          showSelection: widget.showSelectedItem,
                         );
                       },
                       separatorBuilder: (context, index) => const Divider(),
@@ -194,10 +217,16 @@ class _TitleWidgetState extends ConsumerState<TitleWidget> {
 }
 
 class ArticleListItem extends ConsumerWidget {
-  const ArticleListItem({super.key, required this.article, this.onTap});
+  const ArticleListItem({
+    super.key,
+    required this.article,
+    this.onTap,
+    required this.showSelection,
+  });
 
   final Article article;
   final void Function(Article)? onTap;
+  final bool showSelection;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -208,7 +237,9 @@ class ArticleListItem extends ConsumerWidget {
     final selectedId = ref.watch(currentArticleProvider)?.id;
 
     return Ink(
-      color: selectedId == article.id ? Theme.of(context).hoverColor : null,
+      color: showSelection && selectedId == article.id
+          ? Theme.of(context).highlightColor
+          : null,
       child: SizedBox(
         height: listingHeight,
         child: InkWell(

diff --git a/lib/providers/query.dart b/lib/providers/query.dart
@@ -5,7 +5,7 @@ import '../services/wallabag_storage.dart';
 
 part 'query.g.dart';
 
-@riverpod
+@Riverpod(keepAlive: true)
 class Query extends _$Query {
   @override
   WQuery build() => WQuery(state: StateFilter.unread);

diff --git a/lib/providers/query.g.dart b/lib/providers/query.g.dart
diff --git a/lib/services/wallabag_storage.dart b/lib/services/wallabag_storage.dart
@@ -89,10 +89,19 @@ class WallabagStorage with ChangeNotifier {
 
   Article? index(int n, WQuery wq) {
     if (n < 0 || n >= count(wq)) return null;
-    var ids = _buildQuery(wq, sort: '-createdAt', property: 'id').findAllSync();
+    final ids =
+        _buildQuery(wq, sort: '-createdAt', property: 'id').findAllSync();
     return db.articles.getSync(ids[n])!;
   }
 
+  int? indexOf(int articleId, WQuery wq) {
+    if (articleId <= 0) return null;
+    final ids =
+        _buildQuery(wq, sort: '-createdAt', property: 'id').findAllSync();
+    final index = ids.indexOf(articleId);
+    return index >= 0 ? index : null;
+  }
+
   int count(WQuery wq) => _buildQuery(wq).countSync();
 
   List<String> get tags {