Add desktop active proxy info

assets/translations/strings_en.i18n.json

@@ -38,7 +38,8 @@
             "traffic": "Live Traffic",
             "trafficTotal": "Total Traffic",
             "uplink": "Uplink",
-            "downlink": "Downlink"
+            "downlink": "Downlink",
+            "connection": "Connection"
         }
     },
     "profile": {

lib/features/home/widget/home_page.dart

@@ -62,18 +62,17 @@ class HomePage extends HookConsumerWidget {
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
-                            Expanded(
+                            const Expanded(
                               child: Column(
                                 mainAxisSize: MainAxisSize.min,
                                 mainAxisAlignment: MainAxisAlignment.center,
                                 children: [
-                                  const ConnectionButton(),
+                                  ConnectionButton(),
-                                  if (Platform.isAndroid || Platform.isIOS)
+                                  ActiveProxyDelayIndicator(),
-                                    const ActiveProxyDelayIndicator(),
                                 ],
                               ),
                             ),
-                            if (Platform.isAndroid || Platform.isIOS)
+                            if (MediaQuery.sizeOf(context).width < 840)
                               const ActiveProxyFooter(),
                           ],
                         ),

lib/features/proxy/active/active_proxy_sidebar_card.dart

@@ -0,0 +1,109 @@
+import 'package:circle_flags/circle_flags.dart';
+import 'package:dartx/dartx.dart';
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:gap/gap.dart';
+import 'package:hiddify/core/localization/translations.dart';
+import 'package:hiddify/core/widget/skeleton_widget.dart';
+import 'package:hiddify/features/proxy/active/active_proxy_notifier.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ActiveProxySideBarCard extends HookConsumerWidget {
+  const ActiveProxySideBarCard({super.key});
+
+  Widget buildProp(Widget icon, Widget child) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        icon,
+        const Gap(4),
+        Flexible(child: child),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+    final t = ref.watch(translationsProvider);
+    final asyncState = ref.watch(activeProxyNotifierProvider);
+
+    Widget propText(String txt) {
+      return Text(
+        txt,
+        overflow: TextOverflow.ellipsis,
+        style: theme.textTheme.bodySmall,
+      );
+    }
+
+    return Theme(
+      data: theme.copyWith(
+        iconTheme: theme.iconTheme.copyWith(size: 14),
+      ),
+      child: Card(
+        margin: EdgeInsets.zero,
+        shadowColor: Colors.transparent,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(t.home.stats.connection),
+              const Gap(4),
+              switch (asyncState) {
+                AsyncData(:final value) => buildProp(
+                    const Icon(FluentIcons.arrow_routing_20_regular),
+                    propText(
+                      value.proxy.selectedName.isNotNullOrBlank
+                          ? value.proxy.selectedName!
+                          : value.proxy.name,
+                    ),
+                  ),
+                _ => buildProp(
+                    const Icon(FluentIcons.arrow_routing_20_regular),
+                    propText("..."),
+                  ),
+              },
+              const Gap(4),
+              () {
+                if (asyncState case AsyncData(:final value)) {
+                  switch (value.ipInfo) {
+                    case AsyncData(value: final ipInfo?):
+                      return buildProp(
+                        CircleFlag(ipInfo.countryCode, size: 12),
+                        propText(ipInfo.ip),
+                      );
+                    case AsyncError():
+                      return buildProp(
+                        const Icon(FluentIcons.error_circle_20_regular),
+                        propText(t.general.unknown),
+                      );
+                    case AsyncLoading():
+                      return buildProp(
+                        const Icon(FluentIcons.question_circle_20_regular),
+                        const Skeleton(height: 14, widthFactor: .85)
+                            .animate(
+                              onPlay: (controller) => controller.loop(),
+                            )
+                            .shimmer(
+                              duration: 1000.ms,
+                              angle: 45,
+                              color: Theme.of(context).colorScheme.secondary,
+                            ),
+                      );
+                  }
+                }
+
+                return buildProp(
+                  const Icon(FluentIcons.question_circle_20_regular),
+                  propText(t.general.unknown),
+                );
+              }(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/stats/widget/side_bar_stats_overview.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:hiddify/core/localization/translations.dart';
+import 'package:hiddify/features/proxy/active/active_proxy_sidebar_card.dart';
 import 'package:hiddify/features/stats/model/stats_entity.dart';
 import 'package:hiddify/features/stats/notifier/stats_notifier.dart';
 import 'package:hiddify/utils/number_formatters.dart';
@@ -21,6 +22,8 @@ class SideBarStatsOverview extends HookConsumerWidget {
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
+          const ActiveProxySideBarCard(),
+          const Gap(8),
           _StatCard(
             title: t.home.stats.traffic,
             firstStat: (

lib/singbox/service/ffi_singbox_service.dart

@@ -320,8 +320,42 @@ class FFISingboxService with InfraLogger implements SingboxService {
 
   @override
   Stream<List<SingboxOutboundGroup>> watchActiveOutbounds() {
-    // TODO: implement watchActiveOutbounds
+    final logger = newLoggy("[ActiveGroupsClient]");
-    throw UnimplementedError();
+    final receiver = ReceivePort('active groups receiver');
+    final outboundsStream = receiver.asBroadcastStream(
+      onCancel: (_) {
+        logger.debug("stopping");
+        final err = _box.stopCommandClient(12).cast<Utf8>().toDartString();
+        if (err.isNotEmpty) {
+          logger.error("failed stopping: $err");
+        }
+        receiver.close();
+      },
+    ).map(
+      (event) {
+        if (event case String _) {
+          if (event.startsWith('error:')) {
+            logger.error(event);
+            throw event.replaceFirst('error:', "");
+          }
+          return (jsonDecode(event) as List).map((e) {
+            return SingboxOutboundGroup.fromJson(e as Map<String, dynamic>);
+          }).toList();
+        }
+        logger.error("unexpected type, msg: $event");
+        throw "invalid type";
+      },
+    );
+
+    final err = _box
+        .startCommandClient(12, receiver.sendPort.nativePort)
+        .cast<Utf8>()
+        .toDartString();
+    if (err.isNotEmpty) {
+      logger.error("error starting: $err");
+      throw err;
+    }
+    return outboundsStream;
   }
 
   @override