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,43 +1,105 @@
+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, double shrinkOffset, bool overlapsContent) {
+    return Material(
+      child: Consumer(
+        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(
+                  onPressed: () async {
+                    await ref
+                        .read(switchNewTabControllerProvider.notifier)
+                        .add(Uri.https('kagi.com'));
+
+                    onClose();
+                  },
+                  icon: const Icon(Icons.add),
+                  label: const Text('New Tab'),
+                ),
+                TextButton.icon(
+                  onPressed: () {
+                    ref.read(webViewRepositoryProvider.notifier).closeAllTabs();
+                    onClose();
+                  },
+                  icon: const Icon(Icons.delete),
+                  label: const Text('Close All'),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  @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 Column(
+    return CustomScrollView(
-      mainAxisSize: MainAxisSize.min,
+      controller: sheetScrollController,
-      children: [
+      slivers: [
-        Row(
+        SliverPersistentHeader(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          pinned: true,
-          children: [
+          delegate: _SliverHeaderDelagate(onClose: onClose),
-            TextButton.icon(
-              onPressed: () async {
-                await ref
-                    .read(switchNewTabControllerProvider.notifier)
-                    .add(Uri.https('kagi.com'));
-
-                onClose();
-              },
-              icon: const Icon(Icons.add),
-              label: const Text('New Tab'),
-            ),
-            TextButton.icon(
-              onPressed: () {
-                ref.read(webViewRepositoryProvider.notifier).closeAllTabs();
-              },
-              icon: const Icon(Icons.delete),
-              label: const Text('Close All'),
-            ),
-          ],
         ),
-        Consumer(
+        HookConsumer(
           builder: (context, ref, child) {
             final tabs = ref.watch(
               webViewRepositoryProvider.select((tabs) => tabs.values.toList()),
@@ -48,23 +110,61 @@ 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,
+                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),
-              mainAxisSpacing: 8.0,
+              sliver: SliverGrid.count(
-              crossAxisSpacing: 8.0,
+                //Sync values for itemHeight calculation _calculateItemHeight
-              crossAxisCount: 2,
+                childAspectRatio: 0.75,
-              children: tabs.reversed
+                mainAxisSpacing: 8.0,
-                  .map(
+                crossAxisSpacing: 8.0,
-                    (webView) => WebViewTab(
+                crossAxisCount: 2,
-                      webView: webView,
+                children: tabs.reversed
-                      isActive: webView.key == activeTab,
+                    .map(
-                      onClose: onClose,
+                      (webView) => WebViewTab(
-                    ),
+                        webView: webView,
-                  )
+                        isActive: webView.key == activeTab,
-                  .toList(),
+                        onClose: onClose,
+                      ),
+                    )
+                    .toList(),
+              ),
             );
           },
         ),