[gui] Add About section and DisplayField

The additional widget is to display text without input. The versions are
copy on click for issue reporting.

Author: tobe2098

src/client/gui/lib/display_field.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+import 'copyable_text.dart';
+
+class DisplayField extends StatelessWidget {
+  final String? label;
+  final TextStyle labelStyle;
+  final String? text;
+  final double width;
+  final bool copyable;
+
+  const DisplayField({
+    super.key,
+    this.label,
+    this.labelStyle = const TextStyle(fontSize: 16),
+    this.text,
+    this.width = 360,
+    this.copyable = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Only build the right-hand side if text is non-null
+    final Widget? styledField = text != null
+        ? SizedBox(
+            width: width,
+            child: copyable
+                ? CopyableText(
+                    text!,
+                    style: const TextStyle(fontSize: 16),
+                  )
+                : Text(
+                    text!,
+                    style: const TextStyle(fontSize: 16),
+                  ),
+          )
+        : null;
+
+    return Row(
+      children: [
+        if (label != null)
+          Expanded(
+            child: Text(
+              label!,
+              style: labelStyle,
+            ),
+          ),
+        if (styledField != null) styledField,
+      ],
+    );
+  }
+}

src/client/gui/lib/settings/about_section.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../display_field.dart';
+import '../providers.dart';
+import '../ffi.dart';
+
+class AboutSection extends ConsumerWidget {
+  const AboutSection({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final daemonVersion = ref.watch(daemonVersionProvider);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const Text(
+          'About',
+          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+        ),
+        const SizedBox(height: 20),
+        DisplayField(
+          label: 'multipass version:',
+          labelStyle: TextStyle(
+            fontFamily: 'monospace',
+            fontSize: 16,
+            color: Colors.black87,
+          ),
+          width: 260,
+          text: multipassVersion,
+          copyable: true,
+        ),
+        const SizedBox(height: 20),
+        DisplayField(
+          label: 'multipassd version:',
+          labelStyle: TextStyle(
+            fontFamily: 'monospace',
+            fontSize: 16,
+            color: Colors.black87,
+          ),
+          width: 260,
+          text: daemonVersion,
+          copyable: true,
+        ),
+        const SizedBox(height: 20),
+        DisplayField(
+          label: 'Copyright (C) Canonical, Ltd.',
+          labelStyle: TextStyle(
+            fontSize: 16,
+            color: Colors.grey,
+          ),
+          width: 260,
+          copyable: false,
+        ),
+      ],
+    );
+  }
+}

src/client/gui/lib/settings/settings.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'general_settings.dart';
 import 'usage_settings.dart';
 import 'virtualization_settings.dart';
+import 'about_section.dart';
 
 class SettingsScreen extends StatelessWidget {
   static const sidebarKey = 'settings';
@@ -22,6 +23,8 @@ class SettingsScreen extends StatelessWidget {
           UsageSettings(),
           Divider(height: 60),
           VirtualizationSettings(),
+          Divider(height: 60),
+          AboutSection(),
         ],
       ),
     );