[gui] refactor update entry in settings

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

@@ -1,10 +1,12 @@
+import 'package:basics/basics.dart';
 import 'package:flutter/material.dart' hide Switch;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../dropdown.dart';
 import '../notifications.dart';
 import '../providers.dart';
 import '../switch.dart';
+import '../update_available.dart';
 import 'autostart_notifiers.dart';
 
 final onAppCloseProvider = guiSettingProvider(onAppCloseKey);
@@ -14,6 +16,7 @@ class GeneralSettings extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final update = ref.watch(updateProvider).valueOrNull ?? UpdateInfo();
     final autostart = ref.watch(autostartProvider).valueOrNull ?? false;
     final onAppClose = ref.watch(onAppCloseProvider);
 
@@ -23,6 +26,10 @@ class GeneralSettings extends ConsumerWidget {
         style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
       ),
       const SizedBox(height: 20),
+      if (update.version.isNotBlank) ...[
+        UpdateAvailable(update),
+        const SizedBox(height: 20),
+      ],
       Switch(
         label: 'Open the Multipass GUI on startup',
         value: autostart,

src/client/gui/lib/update_available.dart

@@ -18,6 +18,45 @@ final installUrl = Uri.parse('https://multipass.run/install');
 
 Future<void> launchInstallUrl() => launchUrl(installUrl);
 
+class UpdateAvailable extends StatelessWidget {
+  final UpdateInfo updateInfo;
+
+  const UpdateAvailable(this.updateInfo, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final icon = Container(
+      alignment: Alignment.center,
+      color: _color,
+      height: 40,
+      width: 40,
+      child: SvgPicture.asset('assets/multipass.svg', width: 25),
+    );
+
+    final text = Text(
+      'Multipass ${updateInfo.version} is available',
+      style: const TextStyle(fontSize: 16),
+    );
+
+    const button = TextButton(
+      onPressed: launchInstallUrl,
+      child: Text('Upgrade now'),
+    );
+
+    return Container(
+      color: const Color(0xffF7F7F7),
+      padding: const EdgeInsets.all(12),
+      child: Row(children: [
+        icon,
+        const SizedBox(width: 12),
+        text,
+        const Spacer(),
+        button,
+      ]),
+    );
+  }
+}
+
 class UpdateAvailableNotification extends StatelessWidget {
   final UpdateInfo updateInfo;