improve bottom app bar

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

@@ -228,8 +228,9 @@ class KagiScreen extends HookConsumerWidget {
                         horizontal: 8.0,
                       ),
                       child: readerabilityState.when(
-                        data: (_) => (isReaderable == true || readerableApplied)
-                            ? InkWell(
+                        data: (_) => Visibility(
+                          visible: isReaderable == true || readerableApplied,
+                          child: InkWell(
                                 onTap: readerabilityState.isLoading
                                     ? null
                                     : () async {
@@ -248,8 +249,8 @@ class KagiScreen extends HookConsumerWidget {
                                         }
                                       },
                                 child: icon,
-                              )
-                            : const SizedBox.shrink(),
+                          ),
+                        ),
                         error: (error, stackTrace) => SizedBox.shrink(),
                         loading: () => AnimateGradientShader(
                           duration: const Duration(milliseconds: 500),
@@ -315,6 +316,7 @@ class KagiScreen extends HookConsumerWidget {
                 ),
               ),
             TabsActionButton(
+              isActive: displayedSheet is ViewTabs,
               onTap: () {
                 if (displayedSheet case ViewTabs()) {
                   ref.read(bottomSheetProvider.notifier).dismiss();

app/lib/features/search_browser/presentation/widgets/tabs_action_button.dart

@@ -3,12 +3,19 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:lensai/features/web_view/domain/repositories/web_view.dart';
 
 class TabsActionButton extends HookConsumerWidget {
+  final bool isActive;
   final VoidCallback onTap;
 
-  const TabsActionButton({required this.onTap, super.key});
+  const TabsActionButton({
+    required this.onTap,
+    this.isActive = false,
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     final tabCount =
         ref.watch(webViewRepositoryProvider.select((tabs) => tabs.length));
 
@@ -23,7 +30,9 @@ class TabsActionButton extends HookConsumerWidget {
           decoration: BoxDecoration(
             border: Border.all(
               width: 2.0,
-              color: DefaultTextStyle.of(context).style.color!,
+              color: isActive
+                  ? theme.colorScheme.primary
+                  : DefaultTextStyle.of(context).style.color!,
             ),
             borderRadius: BorderRadius.circular(5.0),
           ),
@@ -31,9 +40,10 @@ class TabsActionButton extends HookConsumerWidget {
           child: Center(
             child: Text(
               tabCount.toString(),
-              style: const TextStyle(
+              style: TextStyle(
                 fontWeight: FontWeight.bold,
                 fontSize: 14.0,
+                color: isActive ? theme.colorScheme.primary : null,
               ),
             ),
           ),