Add about page

lib/features/about/view/about_page.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:hiddify/core/core_providers.dart';
+import 'package:hiddify/domain/constants.dart';
+import 'package:hiddify/features/common/runtime_details.dart';
+import 'package:hiddify/gen/assets.gen.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:recase/recase.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class AboutPage extends HookConsumerWidget {
+  const AboutPage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
+    final details = ref.watch(runtimeDetailsNotifierProvider);
+
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
+            title: Text(t.about.pageTitle.titleCase),
+          ),
+          ...switch (details) {
+            AsyncData(:final value) => [
+                SliverToBoxAdapter(
+                  child: Padding(
+                    padding: const EdgeInsets.all(16),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Assets.images.logo.svg(width: 64, height: 64),
+                        const Gap(16),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              t.general.appTitle.titleCase,
+                              style: Theme.of(context).textTheme.titleLarge,
+                            ),
+                            const Gap(4),
+                            Text(
+                              "${t.about.version} ${value.version} ${value.buildNumber}",
+                            ),
+                          ],
+                        )
+                      ],
+                    ),
+                  ),
+                ),
+                SliverList(
+                  delegate: SliverChildListDelegate(
+                    [
+                      ListTile(
+                        title: Text(t.about.whatsNew.sentenceCase),
+                      ),
+                      ListTile(
+                        title: Text(t.about.sourceCode.sentenceCase),
+                        trailing: const Icon(Icons.open_in_new),
+                        onTap: () async {
+                          await launchUrl(
+                            Uri.parse(Constants.githubUrl),
+                            mode: LaunchMode.externalApplication,
+                          );
+                        },
+                      ),
+                      ListTile(
+                        title: Text(t.about.telegramChannel.sentenceCase),
+                        trailing: const Icon(Icons.open_in_new),
+                        onTap: () async {
+                          await launchUrl(
+                            Uri.parse(Constants.telegramChannelUrl),
+                            mode: LaunchMode.externalApplication,
+                          );
+                        },
+                      ),
+                      ListTile(
+                        title: Text(t.about.checkForUpdate.sentenceCase),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            _ => [],
+          }
+        ],
+      ),
+    );
+  }
+}

lib/features/about/view/view.dart

@@ -0,0 +1 @@
+export 'about_page.dart';

lib/features/common/runtime_details.dart

@@ -0,0 +1,37 @@
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:hiddify/utils/utils.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'runtime_details.freezed.dart';
+part 'runtime_details.g.dart';
+
+// TODO implement clash version
+@Riverpod(keepAlive: true)
+class RuntimeDetailsNotifier extends _$RuntimeDetailsNotifier with AppLogger {
+  @override
+  Future<RuntimeDetails> build() async {
+    final packageInfo = await PackageInfo.fromPlatform();
+    return RuntimeDetails(
+      version: packageInfo.version,
+      buildNumber: packageInfo.buildNumber,
+      installerStore: packageInfo.installerStore,
+      clashVersion: "",
+    );
+  }
+}
+
+@freezed
+class RuntimeDetails with _$RuntimeDetails {
+  const RuntimeDetails._();
+
+  const factory RuntimeDetails({
+    required String version,
+    required String buildNumber,
+    String? installerStore,
+    required String clashVersion,
+  }) = _RuntimeDetails;
+
+  factory RuntimeDetails.fromJson(Map<String, dynamic> json) =>
+      _$RuntimeDetailsFromJson(json);
+}

lib/features/wrapper/view/desktop_wrapper.dart

@@ -33,6 +33,10 @@ class DesktopWrapper extends HookConsumerWidget {
         icon: const Icon(Icons.settings),
         label: Text(t.settings.pageTitle.titleCase),
       ),
+      NavigationRailDestination(
+        icon: const Icon(Icons.info),
+        label: Text(t.about.pageTitle.titleCase),
+      ),
     ];
 
     return Scaffold(

lib/features/wrapper/view/mobile_wrapper.dart

@@ -42,6 +42,12 @@ class MobileWrapper extends HookConsumerWidget {
                 selected: location == LogsRoute.path,
                 onSelect: () => const LogsRoute().push(context),
               ),
+              DrawerTile(
+                label: t.about.pageTitle.titleCase,
+                icon: Icons.info,
+                selected: location == AboutRoute.path,
+                onSelect: () => const AboutRoute().push(context),
+              ),
               const Spacer(),
               Align(
                 child: Column(