improve the add friends view

lib/src/database/daos/messages.dao.dart

@@ -278,14 +278,12 @@ class MessagesDao extends DatabaseAccessor<TwonlyDB> with _$MessagesDaoMixin {
           messageId,
           MessageActionType.openedAt,
         );
-        final now = clock.now();
-
         await (update(
           messages,
         )..where((tbl) => tbl.messageId.equals(messageId))).write(
           MessagesCompanion(
-            openedAt: Value(now),
+            openedAt: Value(timestamp),
-            openedByAll: Value(isOpenedByAll ? now : null),
+            openedByAll: Value(isOpenedByAll ? timestamp : null),
           ),
         );
       } catch (e) {
@@ -309,7 +307,7 @@ class MessagesDao extends DatabaseAccessor<TwonlyDB> with _$MessagesDaoMixin {
     );
     await twonlyDB.messagesDao.updateMessageId(
       messageId,
-      MessagesCompanion(ackByServer: Value(clock.now())),
+      MessagesCompanion(ackByServer: Value(timestamp)),
     );
   }
 

lib/src/localization/generated/app_localizations.dart

@@ -2342,6 +2342,12 @@ abstract class AppLocalizations {
   /// **'Open your own QR code'**
   String get openYourOwnQRcode;
 
+  /// No description provided for @addContactQrSheetSubtext.
+  ///
+  /// In en, this message translates to:
+  /// **'Let a friend scan this QR code to add you'**
+  String get addContactQrSheetSubtext;
+
   /// No description provided for @finishSetupCardTitle.
   ///
   /// In en, this message translates to:
@@ -3343,6 +3349,12 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'Drag to Zoom'**
   String get dragToZoom;
+
+  /// No description provided for @showUsername.
+  ///
+  /// In en, this message translates to:
+  /// **'Show username'**
+  String get showUsername;
 }
 
 class _AppLocalizationsDelegate

lib/src/localization/generated/app_localizations_de.dart

@@ -1277,6 +1277,10 @@ class AppLocalizationsDe extends AppLocalizations {
   @override
   String get openYourOwnQRcode => 'Eigenen QR-Code öffnen';
 
+  @override
+  String get addContactQrSheetSubtext =>
+      'Lass einen Freund diesen QR-Code scannen, um dich hinzuzufügen';
+
   @override
   String get finishSetupCardTitle => 'Profil vervollständigen';
 
@@ -1901,4 +1905,7 @@ class AppLocalizationsDe extends AppLocalizations {
 
   @override
   String get dragToZoom => 'Zum Zoomen ziehen';
+
+  @override
+  String get showUsername => 'Benutzernamen anzeigen';
 }

lib/src/localization/generated/app_localizations_en.dart

@@ -1268,6 +1268,10 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get openYourOwnQRcode => 'Open your own QR code';
 
+  @override
+  String get addContactQrSheetSubtext =>
+      'Let a friend scan this QR code to add you';
+
   @override
   String get finishSetupCardTitle => 'Complete your profile';
 
@@ -1885,4 +1889,7 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get dragToZoom => 'Drag to Zoom';
+
+  @override
+  String get showUsername => 'Show username';
 }

lib/src/localization/translations

@@ -1 +1 @@
-Subproject commit 49a063c35d7173082c224cf4da1e8d5eb3978ebc
+Subproject commit f356d455e46d223ca2ea370892d23e54a6fe48c4

lib/src/visual/components/profile_qr_code.comp.dart

@@ -0,0 +1,97 @@
+import 'dart:typed_data';
+import 'package:flutter/material.dart';
+import 'package:qr_flutter/qr_flutter.dart';
+import 'package:twonly/src/utils/avatars.dart';
+import 'package:twonly/src/utils/misc.dart';
+import 'package:twonly/src/utils/qr.utils.dart';
+
+class ProfileQrCodeComp extends StatefulWidget {
+  const ProfileQrCodeComp({
+    this.size = 250,
+    this.showAvatar = true,
+    super.key,
+  });
+
+  final double size;
+  final bool showAvatar;
+
+  @override
+  State<ProfileQrCodeComp> createState() => _ProfileQrCodeCompState();
+}
+
+class _ProfileQrCodeCompState extends State<ProfileQrCodeComp> {
+  String? _qrCode;
+  Uint8List? _userAvatar;
+  bool _isLoading = true;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadData();
+  }
+
+  Future<void> _loadData() async {
+    final qr = await QrCodeUtils.publicProfileLink();
+    final avatar = widget.showAvatar ? await getUserAvatar() : null;
+    if (mounted) {
+      setState(() {
+        _qrCode = qr;
+        _userAvatar = avatar;
+        _isLoading = false;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_isLoading || _qrCode == null) {
+      return SizedBox(
+        width: widget.size,
+        height: widget.size,
+        child: const Center(
+          child: CircularProgressIndicator(),
+        ),
+      );
+    }
+
+    return Container(
+      // padding: const EdgeInsets.all(3),
+      decoration: BoxDecoration(
+        color: context.color.primary,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: const [
+          BoxShadow(
+            color: Colors.black26,
+            blurRadius: 3,
+            offset: Offset(0, 2),
+          ),
+        ],
+      ),
+      child: QrImageView.withQr(
+        qr: QrCode.fromData(
+          data: _qrCode!,
+          errorCorrectLevel: QrErrorCorrectLevel.M,
+        ),
+        eyeStyle: QrEyeStyle(
+          color: isDarkMode(context) ? Colors.black : Colors.white,
+          borderRadius: 2,
+        ),
+        dataModuleStyle: QrDataModuleStyle(
+          color: isDarkMode(context) ? Colors.black : Colors.white,
+          borderRadius: 2,
+        ),
+        gapless: false,
+        embeddedImage: (widget.showAvatar && _userAvatar != null)
+            ? MemoryImage(_userAvatar!)
+            : null,
+        embeddedImageStyle: QrEmbeddedImageStyle(
+          size: const Size(60, 66),
+          embeddedImageShape: EmbeddedImageShape.square,
+          shapeColor: context.color.primary,
+          safeArea: true,
+        ),
+        size: widget.size,
+      ),
+    );
+  }
+}

lib/src/visual/views/contact/add_new_contact.view.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:convert';
 
 import 'package:collection/collection.dart';
 import 'package:drift/drift.dart' hide Column;
@@ -6,14 +7,18 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:share_plus/share_plus.dart';
 import 'package:twonly/locator.dart';
 import 'package:twonly/src/constants/routes.keys.dart';
 import 'package:twonly/src/database/daos/user_discovery.dao.dart';
 import 'package:twonly/src/database/tables/contacts.table.dart';
 import 'package:twonly/src/database/twonly.db.dart';
 import 'package:twonly/src/services/api/utils.api.dart';
+import 'package:twonly/src/services/signal/identity.signal.dart';
 import 'package:twonly/src/utils/misc.dart';
 import 'package:twonly/src/visual/components/alert.dialog.dart';
+import 'package:twonly/src/visual/components/profile_qr_code.comp.dart';
+import 'package:twonly/src/visual/themes/light.dart';
 import 'package:twonly/src/visual/views/contact/add_new_contact_components/friend_suggestions.comp.dart';
 import 'package:twonly/src/visual/views/contact/add_new_contact_components/open_requests_list.comp.dart';
 
@@ -85,6 +90,61 @@ class _SearchUsernameView extends State<AddNewUserView> {
     twonlyDB.userDiscoveryDao.markAllValidAnnouncedUsersAsShown();
   }
 
+  Future<void> _shareProfile() async {
+    final pubKey = await getUserPublicKey();
+    final params = ShareParams(
+      text:
+          'https://me.twonly.eu/${userService.currentUser.username}#${base64Url.encode(pubKey)}',
+    );
+    await SharePlus.instance.share(params);
+  }
+
+  void _showMyQrCode() {
+    // ignore: inference_failure_on_function_invocation
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (context) {
+        return Container(
+          decoration: BoxDecoration(
+            color: context.color.surface,
+            borderRadius: const BorderRadius.vertical(
+              top: Radius.circular(24),
+            ),
+          ),
+          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const SizedBox(width: double.infinity),
+              Container(
+                width: 40,
+                height: 4,
+                decoration: BoxDecoration(
+                  color: context.color.onSurface.withValues(alpha: 0.2),
+                  borderRadius: BorderRadius.circular(2),
+                ),
+              ),
+              const SizedBox(height: 24),
+              const ProfileQrCodeComp(),
+              const SizedBox(height: 24),
+              Text(
+                context.lang.addContactQrSheetSubtext,
+                style: TextStyle(
+                  fontSize: 14,
+                  color: context.color.onSurface.withValues(alpha: 0.6),
+                ),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 16),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
   @override
   void dispose() {
     _contactsStream.cancel();
@@ -154,21 +214,6 @@ class _SearchUsernameView extends State<AddNewUserView> {
     if (added > 0) await importSignalContactAndCreateRequest(userdata);
   }
 
-  InputDecoration _getInputDecoration(String hintText) {
-    return InputDecoration(
-      hintText: hintText,
-      focusedBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(9),
-        borderSide: BorderSide(color: context.color.primary),
-      ),
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(8),
-        borderSide: BorderSide(color: context.color.outline),
-      ),
-      contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -176,77 +221,162 @@ class _SearchUsernameView extends State<AddNewUserView> {
         title: Text(context.lang.addFriendTitle),
       ),
       body: SafeArea(
-        child: Padding(
+        child: ListView(
-          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
+          children: [
-          child: Column(
+            Padding(
-            children: [
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-              Padding(
+              child: SearchBar(
-                padding: const EdgeInsets.symmetric(horizontal: 10),
+                controller: _usernameController,
-                child: Row(
+                hintText: context.lang.searchUsernameInput,
-                  children: [
+                elevation: const WidgetStatePropertyAll(0),
-                    Expanded(
+                backgroundColor: WidgetStatePropertyAll(
-                      child: TextField(
+                  context.color.surfaceContainerHighest.withValues(alpha: 0.3),
-                        onSubmitted: _requestNewUserByUsername,
+                ),
-                        onChanged: (value) {
+                shape: WidgetStatePropertyAll(
-                          _usernameController.text = value.toLowerCase();
+                  RoundedRectangleBorder(
-                          _usernameController.selection =
+                    borderRadius: BorderRadius.circular(12),
-                              TextSelection.fromPosition(
+                  ),
-                                TextPosition(
+                ),
-                                  offset: _usernameController.text.length,
+                padding: const WidgetStatePropertyAll(
-                                ),
+                  EdgeInsets.symmetric(horizontal: 8),
-                              );
+                ),
-                          setState(() {});
+                leading: const Icon(Icons.search, size: 20, color: Colors.grey),
-                        },
+                trailing: [
-                        inputFormatters: [
+                  if (_usernameController.text.isNotEmpty) ...[
-                          LengthLimitingTextInputFormatter(12),
+                    IconButton(
-                          FilteringTextInputFormatter.allow(
+                      icon: const Icon(Icons.clear, size: 20),
-                            RegExp('[a-z0-9A-Z._]'),
+                      onPressed: () {
-                          ),
+                        _usernameController.clear();
-                        ],
+                        setState(() {});
-                        controller: _usernameController,
+                      },
-                        decoration: _getInputDecoration(
+                    ),
-                          context.lang.searchUsernameInput,
+                    if (_isLoading)
+                      const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 8),
+                        child: SizedBox(
+                          width: 18,
+                          height: 18,
+                          child: CircularProgressIndicator(strokeWidth: 2),
+                        ),
+                      )
+                    else
+                      IconButton(
+                        icon: FaIcon(
+                          FontAwesomeIcons.magnifyingGlassPlus,
+                          size: 20,
+                          color: context.color.primary,
+                        ),
+                        onPressed: () => _requestNewUserByUsername(
+                          _usernameController.text,
                         ),
                       ),
-                    ),
+                  ] else ...[
-                  ],
+                    IconButton(
-                ),
+                      icon: FaIcon(
-              ),
+                        FontAwesomeIcons.camera,
-              const SizedBox(
+                        size: 20,
-                height: 20,
+                        color: context.color.primary,
-              ),
-              Expanded(
-                child: ListView(
-                  children: [
-                    Center(
-                      child: OutlinedButton.icon(
-                        onPressed: () =>
-                            context.push(Routes.settingsPublicProfile),
-                        icon: const FaIcon(FontAwesomeIcons.qrcode),
-                        label: Text(context.lang.scanQrOrShow),
                       ),
+                      onPressed: () => context.push(Routes.cameraQRScanner),
+                      tooltip: context.lang.scanOtherProfile,
                     ),
-                    OpenRequestsListComp(
-                      contacts: _openRequestsContacts,
-                      relations: _allAnnouncedUsers,
-                    ),
-                    FriendSuggestionsComp(_newAnnouncedUsers),
                   ],
-                ),
+                ],
+                onSubmitted: _requestNewUserByUsername,
+                onChanged: (value) {
+                  _usernameController.text = value.toLowerCase();
+                  _usernameController.selection = TextSelection.fromPosition(
+                    TextPosition(offset: _usernameController.text.length),
+                  );
+                  setState(() {});
+                },
               ),
-            ],
+            ),
-          ),
+            const SizedBox(
-        ),
+              height: 10,
-      ),
+            ),
-      floatingActionButton: Padding(
+            Padding(
-        padding: const EdgeInsets.only(bottom: 30),
+              padding: const EdgeInsets.symmetric(horizontal: 10),
-        child: FloatingActionButton(
+              child: Column(
-          onPressed: _isLoading || _usernameController.text.isEmpty
+                mainAxisSize: MainAxisSize.min,
-              ? null
+                children: [
-              : () => _requestNewUserByUsername(_usernameController.text),
+                  Row(
-          child: _isLoading
+                    children: [
-              ? const Center(child: CircularProgressIndicator())
+                      Expanded(
-              : const FaIcon(FontAwesomeIcons.magnifyingGlassPlus),
+                        child: FilledButton.icon(
+                          style: FilledButton.styleFrom(
+                            backgroundColor: primaryColor,
+                            foregroundColor: Colors.black87,
+                            padding: const EdgeInsets.symmetric(
+                              vertical: 8,
+                              horizontal: 10,
+                            ),
+                            elevation: 0,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          onPressed: _shareProfile,
+                          icon: const FaIcon(
+                            FontAwesomeIcons.shareNodes,
+                            size: 14,
+                          ),
+                          label: FittedBox(
+                            fit: BoxFit.scaleDown,
+                            child: Text(
+                              context.lang.shareYourProfile,
+                              style: const TextStyle(
+                                fontSize: 13,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: FilledButton.icon(
+                          style: FilledButton.styleFrom(
+                            backgroundColor: context.color.secondaryContainer,
+                            foregroundColor: context.color.onSecondaryContainer,
+                            padding: const EdgeInsets.symmetric(
+                              vertical: 8,
+                              horizontal: 10,
+                            ),
+                            elevation: 0,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          onPressed: _showMyQrCode,
+                          icon: const FaIcon(
+                            FontAwesomeIcons.qrcode,
+                            size: 14,
+                          ),
+                          label: FittedBox(
+                            fit: BoxFit.scaleDown,
+                            child: Text(
+                              context.lang.openYourOwnQRcode,
+                              style: const TextStyle(
+                                fontSize: 13,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 15),
+            OpenRequestsListComp(
+              contacts: _openRequestsContacts,
+              relations: _allAnnouncedUsers,
+            ),
+            FriendSuggestionsComp(_newAnnouncedUsers),
+          ],
         ),
       ),
     );

lib/src/visual/views/public_profile.view.dart

@@ -5,15 +5,13 @@ import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
-import 'package:qr_flutter/qr_flutter.dart';
 import 'package:share_plus/share_plus.dart';
 import 'package:twonly/locator.dart';
 import 'package:twonly/src/constants/routes.keys.dart';
 import 'package:twonly/src/services/signal/identity.signal.dart';
-import 'package:twonly/src/utils/avatars.dart';
 import 'package:twonly/src/utils/misc.dart';
-import 'package:twonly/src/utils/qr.utils.dart';
 import 'package:twonly/src/visual/components/notification_badge.comp.dart';
+import 'package:twonly/src/visual/components/profile_qr_code.comp.dart';
 import 'package:twonly/src/visual/elements/better_list_title.element.dart';
 import 'package:twonly/src/visual/themes/light.dart';
 
@@ -25,8 +23,6 @@ class PublicProfileView extends StatefulWidget {
 }
 
 class _PublicProfileViewState extends State<PublicProfileView> {
-  String? _qrCode;
-  Uint8List? _userAvatar;
   Uint8List? _publicKey;
   int _countContactRequest = 0;
   late StreamSubscription<int?> _countContactRequestStream;
@@ -38,8 +34,6 @@ class _PublicProfileViewState extends State<PublicProfileView> {
   }
 
   Future<void> initAsync() async {
-    _qrCode = await QrCodeUtils.publicProfileLink();
-    _userAvatar = await getUserAvatar();
     _publicKey = await getUserPublicKey();
     if (mounted) setState(() {});
 
@@ -134,43 +128,7 @@ class _PublicProfileViewState extends State<PublicProfileView> {
             ),
           ),
           const SizedBox(height: 20),
-          if (_qrCode != null && _userAvatar != null)
+          const ProfileQrCodeComp(),
-            Container(
-              decoration: BoxDecoration(
-                color: context.color.primary,
-                borderRadius: BorderRadius.circular(12),
-                boxShadow: const [
-                  BoxShadow(
-                    color: Colors.black26,
-                    blurRadius: 6,
-                    offset: Offset(0, 2),
-                  ),
-                ],
-              ),
-              child: QrImageView.withQr(
-                qr: QrCode.fromData(
-                  data: _qrCode!,
-                  errorCorrectLevel: QrErrorCorrectLevel.M,
-                ),
-                eyeStyle: QrEyeStyle(
-                  color: isDarkMode(context) ? Colors.black : Colors.white,
-                  borderRadius: 2,
-                ),
-                dataModuleStyle: QrDataModuleStyle(
-                  color: isDarkMode(context) ? Colors.black : Colors.white,
-                  borderRadius: 2,
-                ),
-                gapless: false,
-                embeddedImage: MemoryImage(_userAvatar!),
-                embeddedImageStyle: QrEmbeddedImageStyle(
-                  size: const Size(60, 66),
-                  embeddedImageShape: EmbeddedImageShape.square,
-                  shapeColor: context.color.primary,
-                  safeArea: true,
-                ),
-                size: 250,
-              ),
-            ),
           const SizedBox(height: 20),
           Text(
             userService.currentUser.username,