use slivers with sticky header for tab sheet

app/lib/features/search_browser/presentation/screens/browser.dart

@@ -396,9 +396,13 @@ class KagiScreen extends HookConsumerWidget {
                     minChildSize: 0.1,
                     maxChildSize: _realtiveSafeArea(context),
                     builder: (context, scrollController) {
-                      return SingleChildScrollView(
+                      return ClipRRect(
-                        controller: scrollController,
+                        borderRadius: const BorderRadius.only(
+                          topLeft: Radius.circular(28),
+                          topRight: Radius.circular(28),
+                        ),
                         child: ViewTabsSheet(
+                          sheetScrollController: scrollController,
                           onClose: () {
                             ref.read(bottomSheetProvider.notifier).dismiss();
                           },

app/lib/features/search_browser/presentation/widgets/sheets/view_tabs_sheet.dart

@@ -1,20 +1,26 @@
+import 'dart:async';
+
 import 'package:bang_navigator/features/web_view/domain/repositories/web_view.dart';
 import 'package:bang_navigator/features/web_view/presentation/controllers/switch_new_tab.dart';
 import 'package:bang_navigator/features/web_view/presentation/widgets/web_view_tab.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
-class ViewTabsSheet extends HookConsumerWidget {
+class _SliverHeaderDelagate extends SliverPersistentHeaderDelegate {
   final VoidCallback onClose;
 
-  const ViewTabsSheet({required this.onClose, super.key});
+  _SliverHeaderDelagate({required this.onClose});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(
-    return Column(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
-      mainAxisSize: MainAxisSize.min,
+    return Material(
-      children: [
+      child: Consumer(
-        Row(
+        builder: (context, ref, child) {
+          //Fix layout issue https://github.com/flutter/flutter/issues/78748#issuecomment-1194680555
+          return Align(
+            child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 TextButton.icon(
@@ -31,13 +37,69 @@ class ViewTabsSheet extends HookConsumerWidget {
                 TextButton.icon(
                   onPressed: () {
                     ref.read(webViewRepositoryProvider.notifier).closeAllTabs();
+                    onClose();
                   },
                   icon: const Icon(Icons.delete),
                   label: const Text('Close All'),
                 ),
               ],
             ),
-        Consumer(
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  double get minExtent => 48;
+
+  @override
+  double get maxExtent => 48;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
+      false;
+}
+
+class ViewTabsSheet extends HookConsumerWidget {
+  final ScrollController sheetScrollController;
+  final VoidCallback onClose;
+
+  const ViewTabsSheet({
+    required this.onClose,
+    required this.sheetScrollController,
+    super.key,
+  });
+
+  double _calculateItemHeight({
+    required double screenWidth,
+    required double childAspectRatio,
+    required double horizontalPadding,
+    required double mainAxisSpacing,
+    required double crossAxisSpacing,
+    required int crossAxisCount,
+  }) {
+    final totalHorizontalPadding = horizontalPadding * 2;
+    final totalCrossAxisSpacing = crossAxisSpacing * (crossAxisCount - 1);
+    final availableWidth =
+        screenWidth - totalHorizontalPadding - totalCrossAxisSpacing;
+    final itemWidth = availableWidth / crossAxisCount;
+    final itemHeight = itemWidth / childAspectRatio;
+    final totalItemHeight = itemHeight + mainAxisSpacing;
+
+    return totalItemHeight;
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return CustomScrollView(
+      controller: sheetScrollController,
+      slivers: [
+        SliverPersistentHeader(
+          pinned: true,
+          delegate: _SliverHeaderDelagate(onClose: onClose),
+        ),
+        HookConsumer(
           builder: (context, ref, child) {
             final tabs = ref.watch(
               webViewRepositoryProvider.select((tabs) => tabs.values.toList()),
@@ -48,11 +110,48 @@ class ViewTabsSheet extends HookConsumerWidget {
               ),
             );
 
-            return GridView.count(
+            final itemHeight = useMemoized(
-              shrinkWrap: true,
+              () => _calculateItemHeight(
-              physics: const NeverScrollableScrollPhysics(),
+                screenWidth: MediaQuery.of(context).size.width,
                 childAspectRatio: 0.75,
+                horizontalPadding: 4.0,
+                mainAxisSpacing: 8.0,
+                crossAxisSpacing: 8.0,
+                crossAxisCount: 2,
+              ),
+              [MediaQuery.of(context).size.width],
+            );
+
+            useEffect(
+              () {
+                final index =
+                    tabs.indexWhere((webView) => webView.key == activeTab);
+
+                if (index > -1) {
+                  final reversedIndex = tabs.length - 1 - index;
+                  final offset = (reversedIndex ~/ 2) * itemHeight;
+
+                  if (offset != sheetScrollController.offset) {
+                    unawaited(
+                      sheetScrollController.animateTo(
+                        offset,
+                        duration: const Duration(milliseconds: 200),
+                        curve: Curves.easeInOut,
+                      ),
+                    );
+                  }
+                }
+
+                return null;
+              },
+              [],
+            );
+
+            return SliverPadding(
               padding: const EdgeInsets.symmetric(horizontal: 4.0),
+              sliver: SliverGrid.count(
+                //Sync values for itemHeight calculation _calculateItemHeight
+                childAspectRatio: 0.75,
                 mainAxisSpacing: 8.0,
                 crossAxisSpacing: 8.0,
                 crossAxisCount: 2,
@@ -65,6 +164,7 @@ class ViewTabsSheet extends HookConsumerWidget {
                       ),
                     )
                     .toList(),
+              ),
             );
           },
         ),