Add desktop active proxy info

2024-02-10 17:32:45 +03:30
parent f58b34df2b
commit 8f4d40026b
5 changed files with 154 additions and 8 deletions
--- a/lib/features/proxy/active/active_proxy_sidebar_card.dart
+++ b/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),
+                );
+              }(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}