improved tab & topic handling

app/lib/presentation/widgets/selectable_chips.dart

@@ -1,14 +1,33 @@
+import 'package:fading_scroll/fading_scroll.dart';
 import 'package:flutter/material.dart';
 
-class SelectableChips<T, K> extends StatelessWidget {
+class _BadgeWrapper extends StatelessWidget {
+  final Widget child;
+  final int? count;
+
+  const _BadgeWrapper({required this.child, this.count});
+
+  @override
+  Widget build(BuildContext context) {
+    return count != null
+        ? Badge.count(
+            count: count!,
+            child: child,
+          )
+        : child;
+  }
+}
+
+class SelectableChips<T extends S, S, K> extends StatelessWidget {
   final List<T> availableItems;
-  final T? selectedItem;
+  final S? selectedItem;
   final int maxCount;
   final bool deleteIcon;
 
-  final K Function(T item) itemId;
+  final K Function(S item) itemId;
   final Widget Function(T item) itemLabel;
   final Widget? Function(T item)? itemAvatar;
+  final int? Function(T item)? itemBadgeCount;
 
   final void Function(T item)? onSelected;
   final void Function(T item)? onDeleted;
@@ -17,6 +36,7 @@ class SelectableChips<T, K> extends StatelessWidget {
     required this.itemId,
     required this.itemLabel,
     this.itemAvatar,
+    this.itemBadgeCount,
     required this.availableItems,
     this.selectedItem,
     this.maxCount = 25,
@@ -46,33 +66,42 @@ class SelectableChips<T, K> extends StatelessWidget {
       }
     }
 
-    return ListView.builder(
-      scrollDirection: Axis.horizontal,
-      shrinkWrap: true,
-      itemCount: items.length,
-      itemBuilder: (context, index) {
-        final item = items[index];
-        return Padding(
-          padding: const EdgeInsets.only(right: 8.0),
-          child: FilterChip(
-            selected: selectedItem != null &&
-                itemId(item) == itemId(selectedItem as T),
-            showCheckmark: false,
-            onSelected: (value) {
-              if (value) {
-                onSelected?.call(item);
-              } else {
-                onDeleted?.call(item);
-              }
-            },
-            onDeleted: deleteIcon
-                ? () {
-                    onDeleted?.call(item);
-                  }
-                : null,
-            label: itemLabel.call(item),
-            avatar: itemAvatar?.call(item),
-          ),
+    return FadingScroll(
+      fadingSize: 15,
+      builder: (context, controller) {
+        return ListView.builder(
+          controller: controller,
+          scrollDirection: Axis.horizontal,
+          shrinkWrap: true,
+          itemCount: items.length,
+          itemBuilder: (context, index) {
+            final item = items[index];
+            return Padding(
+              padding: const EdgeInsets.only(right: 8.0),
+              child: _BadgeWrapper(
+                count: itemBadgeCount?.call(item),
+                child: FilterChip(
+                  selected: selectedItem != null &&
+                      itemId(item) == itemId(selectedItem as S),
+                  showCheckmark: false,
+                  onSelected: (value) {
+                    if (value) {
+                      onSelected?.call(item);
+                    } else {
+                      onDeleted?.call(item);
+                    }
+                  },
+                  onDeleted: deleteIcon
+                      ? () {
+                          onDeleted?.call(item);
+                        }
+                      : null,
+                  label: itemLabel.call(item),
+                  avatar: itemAvatar?.call(item),
+                ),
+              ),
+            );
+          },
         );
       },
     );

app/lib/presentation/widgets/website_title_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:lensai/domain/entities/web_page_info.dart';
 import 'package:lensai/features/web_view/presentation/widgets/favicon.dart';
 import 'package:lensai/presentation/controllers/website_title.dart';
 import 'package:lensai/presentation/widgets/failure_widget.dart';
@@ -7,16 +8,17 @@ import 'package:skeletonizer/skeletonizer.dart';
 
 class WebsiteTitleTile extends HookConsumerWidget {
   final Uri url;
+  final WebPageInfo? precachedInfo;
 
-  const WebsiteTitleTile(this.url, {super.key});
+  const WebsiteTitleTile(this.url, {this.precachedInfo, super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final websiteTileAsync = ref.watch(pageInfoProvider(url));
+    final pageInfoAsync = ref.watch(pageInfoProvider(url));
 
     return Skeletonizer(
-      enabled: websiteTileAsync.isLoading,
-      child: websiteTileAsync.when(
+      enabled: pageInfoAsync.isLoading && precachedInfo == null,
+      child: pageInfoAsync.when(
         data: (info) {
           return ListTile(
             leading: FaviconImage(
@@ -35,11 +37,22 @@ class WebsiteTitleTile extends HookConsumerWidget {
             onRetry: () => ref.refresh(pageInfoProvider(url)),
           );
         },
-        loading: () => const ListTile(
-          contentPadding: EdgeInsets.zero,
-          title: Bone.text(),
-          subtitle: Bone.text(),
-        ),
+        loading: () => (precachedInfo != null)
+            ? ListTile(
+                leading: FaviconImage(
+                  favicon: precachedInfo!.favicon,
+                  url: precachedInfo!.url,
+                  size: 24,
+                ),
+                contentPadding: EdgeInsets.zero,
+                title: Text(precachedInfo!.title ?? 'Unknown Title'),
+                subtitle: Text(url.authority),
+              )
+            : const ListTile(
+                contentPadding: EdgeInsets.zero,
+                title: Bone.text(),
+                subtitle: Bone.text(),
+              ),
       ),
     );
   }