improve tor ui

app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart

@@ -801,7 +801,9 @@ class NavigationMenuButton extends HookConsumerWidget {
             child: const Text('Tor™ Proxy'),
             builder: (context, ref, child) {
               final torConnected = ref.watch(
-                torProxyServiceProvider.select((value) => value.value != null),
+                torProxyServiceProvider.select(
+                  (value) => value.value?.isRunning == true,
+                ),
               );
 
               return Badge(

app/lib/features/tor/presentation/widgets/tor_notification.dart

@@ -29,7 +29,8 @@ class TorNotification extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     ref.listen(torProxyServiceProvider, (previous, next) {
-      if (!next.isLoading) {
+      if (next.hasValue & next.requireValue.isRunning &&
+          next.requireValue.bootstrapProgress == 100) {
         ref.read(overlayControllerProvider.notifier).dismiss();
       }
     });
@@ -38,39 +39,59 @@ class TorNotification extends HookConsumerWidget {
       child: ColoredBox(
         color: AppColors.torPurple,
         child: SizedBox(
-          height: 56,
+          height: 56 + 12,
           width: MediaQuery.of(context).size.width,
           child: Padding(
             padding: const EdgeInsets.all(8.0),
-            child: Row(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
               children: [
-                AnimateGradientShader(
+                Row(
-                  duration: const Duration(milliseconds: 500),
+                  children: [
-                  primaryEnd: Alignment.bottomLeft,
+                    AnimateGradientShader(
-                  secondaryEnd: Alignment.topRight,
+                      duration: const Duration(milliseconds: 500),
-                  primaryColors: const [
+                      primaryEnd: Alignment.bottomLeft,
-                    AppColors.torActiveGreen,
+                      secondaryEnd: Alignment.topRight,
-                    AppColors.torActiveGreen,
+                      primaryColors: const [
+                        AppColors.torActiveGreen,
+                        AppColors.torActiveGreen,
+                      ],
+                      secondaryColors: const [Colors.white, Colors.white],
+                      child: const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 12),
+                        child: Icon(TorIcons.onionAlt),
+                      ),
+                    ),
+                    Expanded(
+                      child: Text(
+                        'Tor Proxy is connecting...',
+                        style: Theme.of(
+                          context,
+                        ).textTheme.bodyMedium?.copyWith(color: Colors.white),
+                      ),
+                    ),
+                    IconButton(
+                      onPressed: () {
+                        ref.read(overlayControllerProvider.notifier).dismiss();
+                      },
+                      icon: const Icon(Icons.close, color: Colors.white),
+                    ),
                   ],
-                  secondaryColors: const [Colors.white, Colors.white],
-                  child: const Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 12),
-                    child: Icon(TorIcons.onionAlt),
-                  ),
                 ),
-                Expanded(
+                Consumer(
-                  child: Text(
+                  builder: (context, ref, child) {
-                    'Tor Proxy is connecting...',
+                    final bootstrapProgress = ref.watch(
-                    style: Theme.of(
+                      torProxyServiceProvider.select(
-                      context,
+                        (value) => value.value?.bootstrapProgress ?? 0,
-                    ).textTheme.bodyMedium?.copyWith(color: Colors.white),
+                      ),
-                  ),
+                    );
-                ),
+
-                IconButton(
+                    return LinearProgressIndicator(
-                  onPressed: () {
+                      backgroundColor: AppColors.torBackgroundGrey,
-                    ref.read(overlayControllerProvider.notifier).dismiss();
+                      color: AppColors.torActiveGreen,
+                      value: bootstrapProgress / 100,
+                    );
                   },
-                  icon: const Icon(Icons.close, color: Colors.white),
                 ),
               ],
             ),