change search tabbar to pill toggle

app/lib/features/geckoview/features/search/presentation/widgets/smart_bang_selector.dart

@@ -164,22 +164,98 @@ class _TabbedBangSelector extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final tabController = useTabController(initialLength: 2);
+    final tabIndex = useState(0);
+
+    useEffect(
+      () {
+        void listener() => tabIndex.value = tabController.index;
+        tabController.addListener(listener);
+        return () => tabController.removeListener(listener);
+      },
+      [tabController],
+    );
+
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+    final disableAnimations = MediaQuery.disableAnimationsOf(context);
 
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        // Tab bar - full width
+        // Animated sliding pill toggle
-        SizedBox(
+        Padding(
-          height: 32,
+          padding: const EdgeInsets.only(right: 16.0),
-          width: double.infinity,
+          child: Container(
-          child: TabBar(
+            height: 36,
-            controller: tabController,
+            decoration: BoxDecoration(
-            dividerColor: Colors.transparent,
+              color: colorScheme.surfaceContainerHighest,
-            tabs: const [
+              borderRadius: BorderRadius.circular(18),
-              Tab(text: 'Search On This Site'),
+            ),
-              Tab(text: 'All Providers'),
+            child: Stack(
+              children: [
+                AnimatedAlign(
+                  alignment: tabIndex.value == 1
+                      ? Alignment.centerRight
+                      : Alignment.centerLeft,
+                  duration: disableAnimations
+                      ? Duration.zero
+                      : const Duration(milliseconds: 250),
+                  curve: Curves.easeOutCubic,
+                  child: FractionallySizedBox(
+                    widthFactor: 0.5,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: colorScheme.primaryContainer,
+                        borderRadius: BorderRadius.circular(18),
+                      ),
+                    ),
+                  ),
+                ),
+                Row(
+                  children: [
+                    Expanded(
+                      child: GestureDetector(
+                        behavior: HitTestBehavior.opaque,
+                        onTap: () => tabController.animateTo(0),
+                        child: Center(
+                          child: Text(
+                            'Search On This Site',
+                            style: theme.textTheme.labelMedium?.copyWith(
+                              color: tabIndex.value == 0
+                                  ? colorScheme.onPrimaryContainer
+                                  : colorScheme.onSurfaceVariant,
+                              fontWeight: tabIndex.value == 0
+                                  ? FontWeight.w600
+                                  : FontWeight.normal,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                    Expanded(
+                      child: GestureDetector(
+                        behavior: HitTestBehavior.opaque,
+                        onTap: () => tabController.animateTo(1),
+                        child: Center(
+                          child: Text(
+                            'All Providers',
+                            style: theme.textTheme.labelMedium?.copyWith(
+                              color: tabIndex.value == 1
+                                  ? colorScheme.onPrimaryContainer
+                                  : colorScheme.onSurfaceVariant,
+                              fontWeight: tabIndex.value == 1
+                                  ? FontWeight.w600
+                                  : FontWeight.normal,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
                   ],
                 ),
+              ],
+            ),
+          ),
         ),
         // Tab content
         SizedBox(