From e241a1222a8a2b32d2a9825c4c96925138104a41 Mon Sep 17 00:00:00 2001
From: Fabian Freund <github@fabi.online>
Date: Fri, 18 Jul 2025 14:34:51 +0200
Subject: [PATCH] add certificate tile

---
 .../presentation/dialogs/web_page_dialog.dart |  6 +-
 .../widgets/certificate_tile.dart             | 60 +++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 app/lib/features/geckoview/features/browser/presentation/widgets/certificate_tile.dart

diff --git a/app/lib/features/geckoview/features/browser/presentation/dialogs/web_page_dialog.dart b/app/lib/features/geckoview/features/browser/presentation/dialogs/web_page_dialog.dart
index b2fa8fcf..8d6a3dd3 100644
--- a/app/lib/features/geckoview/features/browser/presentation/dialogs/web_page_dialog.dart
+++ b/app/lib/features/geckoview/features/browser/presentation/dialogs/web_page_dialog.dart
@@ -16,6 +16,7 @@ import 'package:weblibre/features/geckoview/domain/providers/tab_session.dart';
 import 'package:weblibre/features/geckoview/domain/repositories/tab.dart';
 import 'package:weblibre/features/geckoview/features/browser/presentation/dialogs/qr_code.dart';
 import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/address_with_suggestions_field.dart';
+import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/certificate_tile.dart';
 import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/container.dart';
 import 'package:weblibre/features/geckoview/features/tabs/domain/repositories/tab.dart';
 import 'package:weblibre/features/user/domain/providers.dart';
@@ -56,6 +57,8 @@ class WebPageDialog extends HookConsumerWidget {
               padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 0.0),
               child: WebsiteTitleTile(url, precachedInfo: precachedInfo),
             ),
+            CertificateTile(),
+            const Divider(),
             SizedBox(
               //We need this to stretch the dialog, then padding from dialog is applied
               width: double.maxFinite,
@@ -67,8 +70,7 @@ class WebPageDialog extends HookConsumerWidget {
                 ),
               ),
             ),
-            const SizedBox(height: 4),
-            const Divider(),
+            const SizedBox(height: 8),
             Flexible(
               child: FadingScroll(
                 fadingSize: 25,
diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/certificate_tile.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/certificate_tile.dart
new file mode 100644
index 00000000..dc927053
--- /dev/null
+++ b/app/lib/features/geckoview/features/browser/presentation/widgets/certificate_tile.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+import 'package:weblibre/features/geckoview/domain/providers/tab_state.dart';
+
+class CertificateTile extends HookConsumerWidget {
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final tabState = ref.watch(selectedTabStateProvider);
+
+    if (tabState == null) {
+      return const SizedBox.shrink();
+    }
+
+    final icon = useMemoized(() {
+      if (tabState.url.isScheme('http')) {
+        return ListTile(
+          leading: Icon(
+            MdiIcons.lockOff,
+            color: Theme.of(context).colorScheme.error,
+          ),
+          title: Text(
+            'Connection is not secure',
+            style: TextStyle(color: Theme.of(context).colorScheme.error),
+          ),
+        );
+      } else if (!tabState.securityInfoState.secure) {
+        return ListTile(
+          leading: Icon(
+            MdiIcons.lockAlert,
+            color: Theme.of(context).colorScheme.errorContainer,
+          ),
+          title: Text(
+            'Connection is not secure',
+            style: TextStyle(
+              color: Theme.of(context).colorScheme.errorContainer,
+            ),
+          ),
+        );
+      } else if (!tabState.isLoading) {
+        return ListTile(
+          leading: const Icon(MdiIcons.lock),
+          title: const Text('Connection is secure'),
+          subtitle: Text('Verified By: ${tabState.securityInfoState.issuer}'),
+        );
+      } else {
+        return Skeletonizer(
+          child: ListTile(
+            leading: const Skeleton.keep(child: Icon(MdiIcons.timerSand)),
+            title: Text(BoneMock.title),
+          ),
+        );
+      }
+    }, [tabState]);
+
+    return icon;
+  }
+}