account management update

assets/i18n/en.json

@@ -3,7 +3,9 @@
         "title": "VeilidChat"
     },
     "menu": {
-        "settings_tooltip": "Settings",
+        "accounts_menu_tooltip": "Accounts Menu",
+        "contacts_tooltip": "Contacts List",
+        "new_chat_tooltip": "Start New Chat",
         "add_account_tooltip": "Add Account",
         "accounts": "Accounts",
         "version": "Version"
@@ -12,13 +14,23 @@
         "beta_title": "VeilidChat is BETA SOFTWARE",
         "beta_text": "DO NOT USE THIS FOR ANYTHING IMPORTANT\n\nUntil 1.0 is released:\n\n• You should have no expectations of actual privacy, or guarantees of security.\n• You will likely lose accounts, contacts, and messages and need to recreate them.\n\nPlease read our BETA PARTICIPATION GUIDE located here:\n\n"
     },
-    "pager": {
-        "chats": "Chats",
-        "contacts": "Contacts"
-    },
     "account": {
         "form_name": "Name",
-        "form_pronouns": "Pronouns (optional)",
+        "empty_name": "Your name (required)",
+        "form_pronouns": "Pronouns",
+        "empty_pronouns": "(optional pronouns)",
+        "form_about": "About Me",
+        "empty_about": "Tell your contacts about yourself",
+        "form_free_message": "Free Message",
+        "empty_free_message": "Status when availability is 'Free'",
+        "form_away_message": "Away Message",
+        "empty_away_message": "Status when availability is 'Away'",
+        "form_busy_message": "Free Message",
+        "empty_busy_message": "Status when availability is 'Busy'",
+        "form_availability": "Availability",
+        "form_avatar": "Avatar",
+        "form_auto_away": "Automatic 'away' detection",
+        "form_auto_away_timeout": "Auto-away timeout (in minutes)",
         "form_lock_type": "Lock Type",
         "lock_type_none": "none",
         "lock_type_pin": "pin",
@@ -101,11 +113,40 @@
         "invalid_account_title": "Invalid Account",
         "invalid_account_text": "Account is invalid, removing from list"
     },
-    "contacts_page": {
+    "contacts_dialog": {
         "contacts": "Contacts",
+        "edit_contact": "Edit Contact",
         "invitations": "Invitations",
+        "no_contact_selected": "No contact selected",
+        "new_chat": "New Chat"
+    },
+    "contact_list": {
+        "contacts": "Contacts",
+        "invite_people": "Invite people to VeilidChat",
+        "search": "Search contacts",
+        "invitation": "Invitation",
         "loading_contacts": "Loading contacts..."
     },
+    "contact_form": {
+        "form_name": "Name",
+        "form_pronouns": "Pronouns",
+        "form_about": "About",
+        "form_status": "Current Status",
+        "form_nickname": "Nickname",
+        "form_notes": "Notes",
+        "form_fingerprint": "Fingerprint",
+        "form_show_availability": "Show availability",
+        "save": "Save",
+        "save_disabled": "Save"
+    },
+    "availability": {
+        "unspecified": "Unspecified",
+        "offline": "Offline",
+        "always_show_offline": "Always Show Offline",
+        "free": "Free",
+        "busy": "Busy",
+        "away": "Away"
+    },
     "add_contact_sheet": {
         "new_contact": "New Contact",
         "create_invite": "Create Invitation",
@@ -188,11 +229,6 @@
         "reenter_password": "Re-Enter Password To Confirm",
         "password_does_not_match": "Password does not match"
     },
-    "contact_list": {
-        "invite_people": "Invite people to VeilidChat",
-        "search": "Search contacts",
-        "invitation": "Invitation"
-    },
     "chat_list": {
         "search": "Search chats",
         "start_a_conversation": "Start A Conversation",

lib/account_manager/cubits/account_record_cubit.dart

@@ -40,12 +40,43 @@ class AccountRecordCubit extends DefaultDHTRecordCubit<AccountRecordState> {
   ////////////////////////////////////////////////////////////////////////////
   // Public Interface
 
-  Future<void> updateProfile(proto.Profile profile) async {
+  Future<void> updateAccount(
+    AccountSpec accountSpec,
+  ) async {
     await record.eventualUpdateProtobuf(proto.Account.fromBuffer, (old) async {
-      if (old == null || old.profile == profile) {
+      if (old == null) {
         return null;
       }
-      return old.deepCopy()..profile = profile;
+
+      final newAccount = old.deepCopy()
+        ..profile.name = accountSpec.name
+        ..profile.pronouns = accountSpec.pronouns
+        ..profile.about = accountSpec.about
+        ..profile.availability = accountSpec.availability
+        ..profile.status = accountSpec.status
+        //..profile.avatar =
+        ..profile.timestamp = Veilid.instance.now().toInt64()
+        ..invisible = accountSpec.invisible
+        ..autodetectAway = accountSpec.autoAway
+        ..autoAwayTimeoutMin = accountSpec.autoAwayTimeout
+        ..freeMessage = accountSpec.freeMessage
+        ..awayMessage = accountSpec.awayMessage
+        ..busyMessage = accountSpec.busyMessage;
+
+      var changed = false;
+      if (newAccount.profile != old.profile ||
+          newAccount.invisible != old.invisible ||
+          newAccount.autodetectAway != old.autodetectAway ||
+          newAccount.autoAwayTimeoutMin != old.autoAwayTimeoutMin ||
+          newAccount.freeMessage != old.freeMessage ||
+          newAccount.busyMessage != old.busyMessage ||
+          newAccount.awayMessage != old.awayMessage) {
+        changed = true;
+      }
+      if (changed) {
+        return newAccount;
+      }
+      return null;
     });
   }
 }

lib/account_manager/models/account_spec.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/widgets.dart';
+
+import '../../proto/proto.dart' as proto;
+
+/// Profile and Account configurable fields
+/// Some are publicly visible via the proto.Profile
+/// Some are privately held as proto.Account configurations
+class AccountSpec {
+  AccountSpec(
+      {required this.name,
+      required this.pronouns,
+      required this.about,
+      required this.availability,
+      required this.invisible,
+      required this.freeMessage,
+      required this.awayMessage,
+      required this.busyMessage,
+      required this.avatar,
+      required this.autoAway,
+      required this.autoAwayTimeout});
+
+  String get status {
+    late final String status;
+    switch (availability) {
+      case proto.Availability.AVAILABILITY_AWAY:
+        status = awayMessage;
+        break;
+      case proto.Availability.AVAILABILITY_BUSY:
+        status = busyMessage;
+        break;
+      case proto.Availability.AVAILABILITY_FREE:
+        status = freeMessage;
+        break;
+      case proto.Availability.AVAILABILITY_UNSPECIFIED:
+      case proto.Availability.AVAILABILITY_OFFLINE:
+        status = '';
+        break;
+    }
+    return status;
+  }
+
+  ////////////////////////////////////////////////////////////////////////////
+
+  String name;
+  String pronouns;
+  String about;
+  proto.Availability availability;
+  bool invisible;
+  String freeMessage;
+  String awayMessage;
+  String busyMessage;
+  ImageProvider? avatar;
+  bool autoAway;
+  int autoAwayTimeout;
+}

lib/account_manager/models/models.dart

@@ -1,6 +1,6 @@
 export 'account_info.dart';
+export 'account_update_spec.dart';
 export 'encryption_key_type.dart';
 export 'local_account/local_account.dart';
-export 'new_profile_spec.dart';
 export 'per_account_collection_state/per_account_collection_state.dart';
 export 'user_login/user_login.dart';

lib/account_manager/models/new_profile_spec.dart

@@ -1,5 +0,0 @@
-class NewProfileSpec {
-  NewProfileSpec({required this.name, required this.pronouns});
-  String name;
-  String pronouns;
-}

lib/account_manager/repository/account_repository.dart

@@ -133,14 +133,14 @@ class AccountRepository {
   /// with the identity instance, stores the account in the identity key and
   /// then logs into that account with no password set at this time
   Future<WritableSuperIdentity> createWithNewSuperIdentity(
-      proto.Profile newProfile) async {
+      AccountSpec accountSpec) async {
     log.debug('Creating super identity');
     final wsi = await WritableSuperIdentity.create();
     try {
       final localAccount = await _newLocalAccount(
           superIdentity: wsi.superIdentity,
           identitySecret: wsi.identitySecret,
-          newProfile: newProfile);
+          accountSpec: accountSpec);
 
       // Log in the new account by default with no pin
       final ok = await login(
@@ -154,15 +154,13 @@ class AccountRepository {
     }
   }
 
-  Future<void> editAccountProfile(
+  Future<void> updateLocalAccount(
-      TypedKey superIdentityRecordKey, proto.Profile newProfile) async {
+      TypedKey superIdentityRecordKey, AccountSpec accountSpec) async {
-    log.debug('Editing profile for $superIdentityRecordKey');
-
     final localAccounts = await _localAccounts.get();
 
     final newLocalAccounts = localAccounts.replaceFirstWhere(
         (x) => x.superIdentity.recordKey == superIdentityRecordKey,
-        (localAccount) => localAccount!.copyWith(name: newProfile.name));
+        (localAccount) => localAccount!.copyWith(name: accountSpec.name));
 
     await _localAccounts.set(newLocalAccounts);
     _streamController.add(AccountRepositoryChange.localAccounts);
@@ -248,7 +246,7 @@ class AccountRepository {
   Future<LocalAccount> _newLocalAccount(
       {required SuperIdentity superIdentity,
       required SecretKey identitySecret,
-      required proto.Profile newProfile,
+      required AccountSpec accountSpec,
       EncryptionKeyType encryptionKeyType = EncryptionKeyType.none,
       String encryptionKey = ''}) async {
     log.debug('Creating new local account');
@@ -285,7 +283,10 @@ class AccountRepository {
 
           // Make account object
           final account = proto.Account()
-            ..profile = newProfile
+            ..profile.name = accountSpec.name
+            ..profile.pronouns = accountSpec.pronouns
+            ..profile.about = accountSpec.about
+            ..profile.status = accountSpec.status
             ..contactList = contactList.toProto()
             ..contactInvitationRecords = contactInvitationRecords.toProto()
             ..chatList = chatRecords.toProto();
@@ -309,7 +310,7 @@ class AccountRepository {
       encryptionKeyType: encryptionKeyType,
       biometricsEnabled: false,
       hiddenAccount: false,
-      name: newProfile.name,
+      name: accountSpec.name,
     );
 
     // Add local account object to internal store

lib/account_manager/views/edit_account_page.dart

@@ -4,10 +4,8 @@ import 'package:awesome_extensions/awesome_extensions.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:flutter_translate/flutter_translate.dart';
 import 'package:go_router/go_router.dart';
-import 'package:protobuf/protobuf.dart';
 import 'package:veilid_support/veilid_support.dart';
 
 import '../../layout/default_app_bar.dart';
@@ -17,12 +15,12 @@ import '../../theme/theme.dart';
 import '../../tools/tools.dart';
 import '../../veilid_processor/veilid_processor.dart';
 import '../account_manager.dart';
-import 'profile_edit_form.dart';
+import 'edit_profile_form.dart';
 
 class EditAccountPage extends StatefulWidget {
   const EditAccountPage(
       {required this.superIdentityRecordKey,
-      required this.existingProfile,
+      required this.existingAccount,
       required this.accountRecord,
       super.key});
 
@@ -30,7 +28,7 @@ class EditAccountPage extends StatefulWidget {
   State createState() => _EditAccountPageState();
 
   final TypedKey superIdentityRecordKey;
-  final proto.Profile existingProfile;
+  final proto.Account existingAccount;
   final OwnedDHTRecordPointer accountRecord;
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -38,8 +36,8 @@ class EditAccountPage extends StatefulWidget {
     properties
       ..add(DiagnosticsProperty<TypedKey>(
           'superIdentityRecordKey', superIdentityRecordKey))
-      ..add(DiagnosticsProperty<proto.Profile>(
+      ..add(DiagnosticsProperty<proto.Account>(
-          'existingProfile', existingProfile))
+          'existingAccount', existingAccount))
       ..add(DiagnosticsProperty<OwnedDHTRecordPointer>(
           'accountRecord', accountRecord));
   }
@@ -52,8 +50,7 @@ class _EditAccountPageState extends WindowSetupState<EditAccountPage> {
             orientationCapability: OrientationCapability.portraitOnly);
 
   Widget _editAccountForm(BuildContext context,
-          {required Future<void> Function(GlobalKey<FormBuilderState>)
+          {required Future<void> Function(AccountSpec) onSubmit}) =>
-              onSubmit}) =>
       EditProfileForm(
         header: translate('edit_account_page.header'),
         instructions: translate('edit_account_page.instructions'),
@@ -61,8 +58,25 @@ class _EditAccountPageState extends WindowSetupState<EditAccountPage> {
         submitDisabledText: translate('button.waiting_for_network'),
         onSubmit: onSubmit,
         initialValueCallback: (key) => switch (key) {
-          EditProfileForm.formFieldName => widget.existingProfile.name,
+          EditProfileForm.formFieldName => widget.existingAccount.profile.name,
-          EditProfileForm.formFieldPronouns => widget.existingProfile.pronouns,
+          EditProfileForm.formFieldPronouns =>
+            widget.existingAccount.profile.pronouns,
+          EditProfileForm.formFieldAbout =>
+            widget.existingAccount.profile.about,
+          EditProfileForm.formFieldAvailability =>
+            widget.existingAccount.profile.availability,
+          EditProfileForm.formFieldFreeMessage =>
+            widget.existingAccount.freeMessage,
+          EditProfileForm.formFieldAwayMessage =>
+            widget.existingAccount.awayMessage,
+          EditProfileForm.formFieldBusyMessage =>
+            widget.existingAccount.busyMessage,
+          EditProfileForm.formFieldAvatar =>
+            widget.existingAccount.profile.avatar,
+          EditProfileForm.formFieldAutoAway =>
+            widget.existingAccount.autodetectAway,
+          EditProfileForm.formFieldAutoAwayTimeout =>
+            widget.existingAccount.autoAwayTimeoutMin,
           String() => throw UnimplementedError(),
         },
       );
@@ -200,21 +214,11 @@ class _EditAccountPageState extends WindowSetupState<EditAccountPage> {
     }
   }
 
-  Future<void> _onSubmit(GlobalKey<FormBuilderState> formKey) async {
+  Future<void> _onSubmit(AccountSpec accountSpec) async {
     // dismiss the keyboard by unfocusing the textfield
     FocusScope.of(context).unfocus();
 
     try {
-      final name = formKey
-          .currentState!.fields[EditProfileForm.formFieldName]!.value as String;
-      final pronouns = formKey.currentState!
-              .fields[EditProfileForm.formFieldPronouns]!.value as String? ??
-          '';
-      final newProfile = widget.existingProfile.deepCopy()
-        ..name = name
-        ..pronouns = pronouns
-        ..timestamp = Veilid.instance.now().toInt64();
-
       setState(() {
         _isInAsyncCall = true;
       });
@@ -231,11 +235,11 @@ class _EditAccountPageState extends WindowSetupState<EditAccountPage> {
 
         // Update account profile DHT record
         // This triggers ConversationCubits to update
-        await accountRecordCubit.updateProfile(newProfile);
+        await accountRecordCubit.updateAccount(accountSpec);
 
         // Update local account profile
         await AccountRepository.instance
-            .editAccountProfile(widget.superIdentityRecordKey, newProfile);
+            .updateLocalAccount(widget.superIdentityRecordKey, accountSpec);
 
         if (mounted) {
           Navigator.canPop(context)

lib/account_manager/views/edit_profile_form.dart

@@ -0,0 +1,302 @@
+import 'package:awesome_extensions/awesome_extensions.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+import 'package:form_builder_validators/form_builder_validators.dart';
+
+import '../../contacts/contacts.dart';
+import '../../proto/proto.dart' as proto;
+import '../../theme/theme.dart';
+import '../models/models.dart';
+
+class EditProfileForm extends StatefulWidget {
+  const EditProfileForm({
+    required this.header,
+    required this.instructions,
+    required this.submitText,
+    required this.submitDisabledText,
+    super.key,
+    this.onSubmit,
+    this.initialValueCallback,
+  });
+
+  @override
+  State createState() => _EditProfileFormState();
+
+  final String header;
+  final String instructions;
+  final Future<void> Function(AccountSpec)? onSubmit;
+  final String submitText;
+  final String submitDisabledText;
+  final Object? Function(String key)? initialValueCallback;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(StringProperty('header', header))
+      ..add(StringProperty('instructions', instructions))
+      ..add(ObjectFlagProperty<Future<void> Function(AccountSpec)?>.has(
+          'onSubmit', onSubmit))
+      ..add(StringProperty('submitText', submitText))
+      ..add(StringProperty('submitDisabledText', submitDisabledText))
+      ..add(ObjectFlagProperty<Object? Function(String key)?>.has(
+          'initialValueCallback', initialValueCallback));
+  }
+
+  static const String formFieldName = 'name';
+  static const String formFieldPronouns = 'pronouns';
+  static const String formFieldAbout = 'about';
+  static const String formFieldAvailability = 'availability';
+  static const String formFieldFreeMessage = 'free_message';
+  static const String formFieldAwayMessage = 'away_message';
+  static const String formFieldBusyMessage = 'busy_message';
+  static const String formFieldAvatar = 'avatar';
+  static const String formFieldAutoAway = 'auto_away';
+  static const String formFieldAutoAwayTimeout = 'auto_away_timeout';
+}
+
+class _EditProfileFormState extends State<EditProfileForm> {
+  final _formKey = GlobalKey<FormBuilderState>();
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  FormBuilderDropdown<proto.Availability> _availabilityDropDown(
+      BuildContext context) {
+    final initialValueX =
+        widget.initialValueCallback?.call(EditProfileForm.formFieldAvailability)
+                as proto.Availability? ??
+            proto.Availability.AVAILABILITY_FREE;
+    final initialValue =
+        initialValueX == proto.Availability.AVAILABILITY_UNSPECIFIED
+            ? proto.Availability.AVAILABILITY_FREE
+            : initialValueX;
+
+    final availabilities = [
+      proto.Availability.AVAILABILITY_FREE,
+      proto.Availability.AVAILABILITY_AWAY,
+      proto.Availability.AVAILABILITY_BUSY,
+      proto.Availability.AVAILABILITY_OFFLINE,
+    ];
+
+    return FormBuilderDropdown<proto.Availability>(
+      name: EditProfileForm.formFieldAvailability,
+      initialValue: initialValue,
+      items: availabilities
+          .map((x) => DropdownMenuItem<proto.Availability>(
+              value: x,
+              child: Row(mainAxisSize: MainAxisSize.min, children: [
+                Icon(AvailabilityWidget.availabilityIcon(x)),
+                Text(x == proto.Availability.AVAILABILITY_OFFLINE
+                    ? translate('availability.always_show_offline')
+                    : AvailabilityWidget.availabilityName(x)),
+              ])))
+          .toList(),
+    );
+  }
+
+  AccountSpec _makeAccountSpec() {
+    final name = _formKey
+        .currentState!.fields[EditProfileForm.formFieldName]!.value as String;
+    final pronouns = _formKey.currentState!
+            .fields[EditProfileForm.formFieldPronouns]!.value as String? ??
+        '';
+    final about = _formKey.currentState!.fields[EditProfileForm.formFieldAbout]!
+            .value as String? ??
+        '';
+    final availability = _formKey
+            .currentState!
+            .fields[EditProfileForm.formFieldAvailability]!
+            .value as proto.Availability? ??
+        proto.Availability.AVAILABILITY_FREE;
+
+    final invisible = availability == proto.Availability.AVAILABILITY_OFFLINE;
+
+    final freeMessage = _formKey.currentState!
+            .fields[EditProfileForm.formFieldFreeMessage]!.value as String? ??
+        '';
+    final awayMessage = _formKey.currentState!
+            .fields[EditProfileForm.formFieldAwayMessage]!.value as String? ??
+        '';
+    final busyMessage = _formKey.currentState!
+            .fields[EditProfileForm.formFieldBusyMessage]!.value as String? ??
+        '';
+    final autoAway = _formKey.currentState!
+            .fields[EditProfileForm.formFieldAutoAway]!.value as bool? ??
+        false;
+    final autoAwayTimeout = _formKey.currentState!
+            .fields[EditProfileForm.formFieldAutoAwayTimeout]!.value as int? ??
+        30;
+
+    return AccountSpec(
+        name: name,
+        pronouns: pronouns,
+        about: about,
+        availability: availability,
+        invisible: invisible,
+        freeMessage: freeMessage,
+        awayMessage: awayMessage,
+        busyMessage: busyMessage,
+        avatar: null,
+        autoAway: autoAway,
+        autoAwayTimeout: autoAwayTimeout);
+  }
+
+  Widget _editProfileForm(
+    BuildContext context,
+  ) {
+    final theme = Theme.of(context);
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+    final textTheme = theme.textTheme;
+
+    late final Color border;
+    if (scaleConfig.useVisualIndicators && !scaleConfig.preferBorders) {
+      border = scale.primaryScale.elementBackground;
+    } else {
+      border = scale.primaryScale.border;
+    }
+
+    return FormBuilder(
+      key: _formKey,
+      child: Column(
+        children: [
+          AvatarWidget(
+            name: _formKey.currentState?.value[EditProfileForm.formFieldName]
+                    as String? ??
+                '?',
+            size: 128,
+            borderColor: border,
+            foregroundColor: scale.primaryScale.primaryText,
+            backgroundColor: scale.primaryScale.primary,
+            scaleConfig: scaleConfig,
+            textStyle: theme.textTheme.titleLarge!.copyWith(fontSize: 64),
+          ).paddingLTRB(0, 0, 0, 16),
+          FormBuilderTextField(
+            autofocus: true,
+            name: EditProfileForm.formFieldName,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldName) as String?,
+            decoration: InputDecoration(
+                labelText: translate('account.form_name'),
+                hintText: translate('account.empty_name')),
+            maxLength: 64,
+            // The validator receives the text that the user has entered.
+            validator: FormBuilderValidators.compose([
+              FormBuilderValidators.required(),
+            ]),
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldPronouns,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldPronouns) as String?,
+            maxLength: 64,
+            decoration: InputDecoration(
+                labelText: translate('account.form_pronouns'),
+                hintText: translate('account.empty_pronouns')),
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldAbout,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldAbout) as String?,
+            maxLength: 1024,
+            maxLines: 8,
+            minLines: 1,
+            decoration: InputDecoration(
+                labelText: translate('account.form_about'),
+                hintText: translate('account.empty_about')),
+            textInputAction: TextInputAction.newline,
+          ),
+          _availabilityDropDown(context),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldFreeMessage,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldFreeMessage) as String?,
+            maxLength: 128,
+            decoration: InputDecoration(
+                labelText: translate('account.form_free_message'),
+                hintText: translate('account.empty_free_message')),
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldAwayMessage,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldAwayMessage) as String?,
+            maxLength: 128,
+            decoration: InputDecoration(
+                labelText: translate('account.form_away_message'),
+                hintText: translate('account.empty_away_message')),
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldBusyMessage,
+            initialValue: widget.initialValueCallback
+                ?.call(EditProfileForm.formFieldBusyMessage) as String?,
+            maxLength: 128,
+            decoration: InputDecoration(
+                labelText: translate('account.form_busy_message'),
+                hintText: translate('account.empty_busy_message')),
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderCheckbox(
+            name: EditProfileForm.formFieldAutoAway,
+            initialValue: widget.initialValueCallback
+                    ?.call(EditProfileForm.formFieldAutoAway) as bool? ??
+                false,
+            side: BorderSide(color: scale.primaryScale.border, width: 2),
+            title: Text(translate('account.form_auto_away'),
+                style: textTheme.labelMedium),
+          ),
+          FormBuilderTextField(
+            name: EditProfileForm.formFieldAutoAwayTimeout,
+            enabled: _formKey.currentState
+                    ?.value[EditProfileForm.formFieldAutoAway] as bool? ??
+                false,
+            initialValue: widget.initialValueCallback
+                        ?.call(EditProfileForm.formFieldAutoAwayTimeout)
+                    as String? ??
+                '15',
+            decoration: InputDecoration(
+              labelText: translate('account.form_auto_away_timeout'),
+            ),
+            validator: FormBuilderValidators.positiveNumber(),
+            textInputAction: TextInputAction.next,
+          ),
+          Row(children: [
+            const Spacer(),
+            Text(widget.instructions).toCenter().flexible(flex: 6),
+            const Spacer(),
+          ]).paddingSymmetric(vertical: 4),
+          ElevatedButton(
+            onPressed: widget.onSubmit == null
+                ? null
+                : () async {
+                    if (_formKey.currentState?.saveAndValidate() ?? false) {
+                      final aus = _makeAccountSpec();
+                      await widget.onSubmit!(aus);
+                    }
+                  },
+            child: Row(mainAxisSize: MainAxisSize.min, children: [
+              const Icon(Icons.check, size: 16).paddingLTRB(0, 0, 4, 0),
+              Text((widget.onSubmit == null)
+                      ? widget.submitDisabledText
+                      : widget.submitText)
+                  .paddingLTRB(0, 0, 4, 0)
+            ]),
+          ).paddingSymmetric(vertical: 4).alignAtCenterRight(),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) => _editProfileForm(
+        context,
+      );
+}

lib/account_manager/views/new_account_page.dart

@@ -3,17 +3,15 @@ import 'dart:async';
 import 'package:awesome_extensions/awesome_extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_form_builder/flutter_form_builder.dart';
 import 'package:flutter_translate/flutter_translate.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../layout/default_app_bar.dart';
-import '../../proto/proto.dart' as proto;
 import '../../theme/theme.dart';
 import '../../tools/tools.dart';
 import '../../veilid_processor/veilid_processor.dart';
 import '../account_manager.dart';
-import 'profile_edit_form.dart';
+import 'edit_profile_form.dart';
 
 class NewAccountPage extends StatefulWidget {
   const NewAccountPage({super.key});
@@ -29,7 +27,7 @@ class _NewAccountPageState extends WindowSetupState<NewAccountPage> {
             orientationCapability: OrientationCapability.portraitOnly);
 
   Widget _newAccountForm(BuildContext context,
-      {required Future<void> Function(GlobalKey<FormBuilderState>) onSubmit}) {
+      {required Future<void> Function(AccountSpec) onSubmit}) {
     final networkReady = context
             .watch<ConnectionStateCubit>()
             .state
@@ -47,28 +45,19 @@ class _NewAccountPageState extends WindowSetupState<NewAccountPage> {
         onSubmit: !canSubmit ? null : onSubmit);
   }
 
-  Future<void> _onSubmit(GlobalKey<FormBuilderState> formKey) async {
+  Future<void> _onSubmit(AccountSpec accountSpec) async {
     // dismiss the keyboard by unfocusing the textfield
     FocusScope.of(context).unfocus();
 
     try {
-      final name = formKey
-          .currentState!.fields[EditProfileForm.formFieldName]!.value as String;
-      final pronouns = formKey.currentState!
-              .fields[EditProfileForm.formFieldPronouns]!.value as String? ??
-          '';
-      final newProfile = proto.Profile()
-        ..name = name
-        ..pronouns = pronouns;
-
       setState(() {
         _isInAsyncCall = true;
       });
       try {
         final writableSuperIdentity = await AccountRepository.instance
-            .createWithNewSuperIdentity(newProfile);
+            .createWithNewSuperIdentity(accountSpec);
         GoRouterHelper(context).pushReplacement('/new_account/recovery_key',
-            extra: [writableSuperIdentity, newProfile.name]);
+            extra: [writableSuperIdentity, accountSpec.name]);
       } finally {
         if (mounted) {
           setState(() {

lib/account_manager/views/profile_edit_form.dart

@@ -1,118 +0,0 @@
-import 'package:awesome_extensions/awesome_extensions.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_form_builder/flutter_form_builder.dart';
-import 'package:flutter_translate/flutter_translate.dart';
-import 'package:form_builder_validators/form_builder_validators.dart';
-
-class EditProfileForm extends StatefulWidget {
-  const EditProfileForm({
-    required this.header,
-    required this.instructions,
-    required this.submitText,
-    required this.submitDisabledText,
-    super.key,
-    this.onSubmit,
-    this.initialValueCallback,
-  });
-
-  @override
-  State createState() => _EditProfileFormState();
-
-  final String header;
-  final String instructions;
-  final Future<void> Function(GlobalKey<FormBuilderState>)? onSubmit;
-  final String submitText;
-  final String submitDisabledText;
-  final Object? Function(String key)? initialValueCallback;
-
-  @override
-  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
-    super.debugFillProperties(properties);
-    properties
-      ..add(StringProperty('header', header))
-      ..add(StringProperty('instructions', instructions))
-      ..add(ObjectFlagProperty<
-          Future<void> Function(
-              GlobalKey<FormBuilderState> p1)?>.has('onSubmit', onSubmit))
-      ..add(StringProperty('submitText', submitText))
-      ..add(StringProperty('submitDisabledText', submitDisabledText))
-      ..add(ObjectFlagProperty<Object? Function(String key)?>.has(
-          'initialValueCallback', initialValueCallback));
-  }
-
-  static const String formFieldName = 'name';
-  static const String formFieldPronouns = 'pronouns';
-}
-
-class _EditProfileFormState extends State<EditProfileForm> {
-  final _formKey = GlobalKey<FormBuilderState>();
-
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  Widget _editProfileForm(
-    BuildContext context,
-  ) =>
-      FormBuilder(
-        key: _formKey,
-        child: Column(
-          children: [
-            Text(widget.header)
-                .textStyle(context.headlineSmall)
-                .paddingSymmetric(vertical: 16),
-            FormBuilderTextField(
-              autofocus: true,
-              name: EditProfileForm.formFieldName,
-              initialValue: widget.initialValueCallback
-                  ?.call(EditProfileForm.formFieldName) as String?,
-              decoration:
-                  InputDecoration(labelText: translate('account.form_name')),
-              maxLength: 64,
-              // The validator receives the text that the user has entered.
-              validator: FormBuilderValidators.compose([
-                FormBuilderValidators.required(),
-              ]),
-              textInputAction: TextInputAction.next,
-            ),
-            FormBuilderTextField(
-              name: EditProfileForm.formFieldPronouns,
-              initialValue: widget.initialValueCallback
-                  ?.call(EditProfileForm.formFieldPronouns) as String?,
-              maxLength: 64,
-              decoration: InputDecoration(
-                  labelText: translate('account.form_pronouns')),
-              textInputAction: TextInputAction.next,
-            ),
-            Row(children: [
-              const Spacer(),
-              Text(widget.instructions).toCenter().flexible(flex: 6),
-              const Spacer(),
-            ]).paddingSymmetric(vertical: 4),
-            ElevatedButton(
-              onPressed: widget.onSubmit == null
-                  ? null
-                  : () async {
-                      if (_formKey.currentState?.saveAndValidate() ?? false) {
-                        await widget.onSubmit!(_formKey);
-                      }
-                    },
-              child: Row(mainAxisSize: MainAxisSize.min, children: [
-                const Icon(Icons.check, size: 16).paddingLTRB(0, 0, 4, 0),
-                Text((widget.onSubmit == null)
-                        ? widget.submitDisabledText
-                        : widget.submitText)
-                    .paddingLTRB(0, 0, 4, 0)
-              ]),
-            ).paddingSymmetric(vertical: 4).alignAtCenterRight(),
-          ],
-        ),
-      );
-
-  @override
-  Widget build(BuildContext context) => _editProfileForm(
-        context,
-      );
-}

lib/contact_invitation/views/contact_invitation_list_widget.dart

@@ -61,7 +61,7 @@ class ContactInvitationListWidgetState
           });
           _controller.animateTo(_expanded ? 1 : 0);
         },
-        title: translate('contacts_page.invitations'),
+        title: translate('contacts_dialog.invitations'),
         sliver: SliverList.builder(
           itemCount: widget.contactInvitationRecordList.length,
           itemBuilder: (context, index) {

lib/contacts/cubits/contact_list_cubit.dart

@@ -71,7 +71,43 @@ class ContactListCubit extends DHTShortArrayCubit<proto.Contact> {
           final updated = await writer.tryWriteItemProtobuf(
               proto.Contact.fromBuffer, pos, newContact);
           if (!updated) {
-            throw DHTExceptionOutdated();
+            throw const DHTExceptionOutdated();
+          }
+          break;
+        }
+      }
+    });
+  }
+
+  Future<void> updateContactFields({
+    required TypedKey localConversationRecordKey,
+    String? nickname,
+    String? notes,
+    bool? showAvailability,
+  }) async {
+    // Update contact's locally-modifiable fields
+    await operateWriteEventual((writer) async {
+      for (var pos = 0; pos < writer.length; pos++) {
+        final c = await writer.getProtobuf(proto.Contact.fromBuffer, pos);
+        if (c != null &&
+            c.localConversationRecordKey.toVeilid() ==
+                localConversationRecordKey) {
+          final newContact = c.deepCopy();
+
+          if (nickname != null) {
+            newContact.nickname = nickname;
+          }
+          if (notes != null) {
+            newContact.notes = notes;
+          }
+          if (showAvailability != null) {
+            newContact.showAvailability = showAvailability;
+          }
+
+          final updated = await writer.tryWriteItemProtobuf(
+              proto.Contact.fromBuffer, pos, newContact);
+          if (!updated) {
+            throw const DHTExceptionOutdated();
           }
           break;
         }

lib/contacts/views/availability_widget.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+
+import '../../proto/proto.dart' as proto;
+
+class AvailabilityWidget extends StatelessWidget {
+  const AvailabilityWidget({required this.availability, super.key});
+
+  static IconData availabilityIcon(proto.Availability availability) {
+    late final IconData iconData;
+    switch (availability) {
+      case proto.Availability.AVAILABILITY_AWAY:
+        iconData = Icons.hot_tub;
+      case proto.Availability.AVAILABILITY_BUSY:
+        iconData = Icons.event_busy;
+      case proto.Availability.AVAILABILITY_FREE:
+        iconData = Icons.event_available;
+      case proto.Availability.AVAILABILITY_OFFLINE:
+        iconData = Icons.cloud_off;
+      case proto.Availability.AVAILABILITY_UNSPECIFIED:
+        iconData = Icons.question_mark;
+    }
+    return iconData;
+  }
+
+  static String availabilityName(proto.Availability availability) {
+    late final String name;
+    switch (availability) {
+      case proto.Availability.AVAILABILITY_AWAY:
+        name = translate('availability.away');
+      case proto.Availability.AVAILABILITY_BUSY:
+        name = translate('availability.busy');
+      case proto.Availability.AVAILABILITY_FREE:
+        name = translate('availability.free');
+      case proto.Availability.AVAILABILITY_OFFLINE:
+        name = translate('availability.offline');
+      case proto.Availability.AVAILABILITY_UNSPECIFIED:
+        name = translate('availability.unspecified');
+    }
+    return name;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    // final scale = theme.extension<ScaleScheme>()!;
+    // final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    final name = availabilityName(availability);
+    final iconData = availabilityIcon(availability);
+
+    return Row(mainAxisSize: MainAxisSize.min, children: [
+      Icon(iconData, size: 32),
+      Text(name, style: textTheme.labelSmall)
+    ]);
+  }
+
+  final proto.Availability availability;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(
+        DiagnosticsProperty<proto.Availability>('availability', availability));
+  }
+}

lib/contacts/views/contact_details_widget.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../proto/proto.dart' as proto;
+import '../contacts.dart';
+
+class ContactDetailsWidget extends StatefulWidget {
+  const ContactDetailsWidget({required this.contact, super.key});
+  final proto.Contact contact;
+
+  @override
+  State<ContactDetailsWidget> createState() => _ContactDetailsWidgetState();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty<proto.Contact>('contact', contact));
+  }
+}
+
+class _ContactDetailsWidgetState extends State<ContactDetailsWidget>
+    with SingleTickerProviderStateMixin {
+  @override
+  Widget build(BuildContext context) => SingleChildScrollView(
+      child: EditContactForm(
+          formKey: GlobalKey(),
+          contact: widget.contact,
+          onSubmit: (fbs) async {
+            final contactList = context.read<ContactListCubit>();
+            await contactList.updateContactFields(
+                localConversationRecordKey:
+                    widget.contact.localConversationRecordKey.toVeilid(),
+                nickname: fbs.currentState
+                    ?.value[EditContactForm.formFieldNickname] as String,
+                notes: fbs.currentState?.value[EditContactForm.formFieldNotes]
+                    as String,
+                showAvailability: fbs.currentState
+                    ?.value[EditContactForm.formFieldShowAvailability] as bool);
+          }));
+}

lib/contacts/views/contact_item_widget.dart

@@ -1,34 +1,36 @@
+import 'package:async_tools/async_tools.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_translate/flutter_translate.dart';
-import '../../chat_list/chat_list.dart';
-import '../../layout/layout.dart';
 import '../../proto/proto.dart' as proto;
 import '../../theme/theme.dart';
-import '../contacts.dart';
+
+const _kOnTap = 'onTap';
+const _kOnDelete = 'onDelete';
 
 class ContactItemWidget extends StatelessWidget {
   const ContactItemWidget(
-      {required proto.Contact contact, required bool disabled, super.key})
+      {required proto.Contact contact,
+      required bool disabled,
+      required bool selected,
+      Future<void> Function(proto.Contact)? onTap,
+      Future<void> Function(proto.Contact)? onDoubleTap,
+      Future<void> Function(proto.Contact)? onDelete,
+      super.key})
       : _disabled = disabled,
-        _contact = contact;
+        _selected = selected,
+        _contact = contact,
+        _onTap = onTap,
+        _onDoubleTap = onDoubleTap,
+        _onDelete = onDelete;
 
   @override
   // ignore: prefer_expression_function_bodies
   Widget build(
     BuildContext context,
   ) {
-    final localConversationRecordKey =
-        _contact.localConversationRecordKey.toVeilid();
-
-    const selected = false; // xxx: eventually when we have selectable contacts:
-    // activeContactCubit.state == localConversationRecordKey;
-
-    final tileDisabled = _disabled || context.watch<ContactListCubit>().isBusy;
-
     late final String title;
     late final String subtitle;
+
     if (_contact.nickname.isNotEmpty) {
       title = _contact.nickname;
       if (_contact.profile.pronouns.isNotEmpty) {
@@ -47,41 +49,33 @@ class ContactItemWidget extends StatelessWidget {
 
     return SliderTile(
       key: ObjectKey(_contact),
-      disabled: tileDisabled,
+      disabled: _disabled,
-      selected: selected,
+      selected: _selected,
       tileScale: ScaleKind.primary,
       title: title,
       subtitle: subtitle,
       icon: Icons.person,
-      onTap: () async {
+      onDoubleTap: _onDoubleTap == null
-        // Start a chat
+          ? null
-        final chatListCubit = context.read<ChatListCubit>();
+          : () => singleFuture<void>((this, _kOnTap), () async {
-
+                await _onDoubleTap(_contact);
-        await chatListCubit.getOrCreateChatSingleContact(contact: _contact);
+              }),
-        // Click over to chats
+      onTap: _onTap == null
-        if (context.mounted) {
+          ? null
-          await MainPager.of(context)
+          : () => singleFuture<void>((this, _kOnTap), () async {
-              ?.pageController
+                await _onTap(_contact);
-              .animateToPage(1, duration: 250.ms, curve: Curves.easeInOut);
+              }),
-        }
-      },
       endActions: [
-        SliderTileAction(
+        if (_onDelete != null)
+          SliderTileAction(
             icon: Icons.delete,
             label: translate('button.delete'),
             actionScale: ScaleKind.tertiary,
-            onPressed: (context) async {
+            onPressed: (_context) =>
-              final contactListCubit = context.read<ContactListCubit>();
+                singleFuture<void>((this, _kOnDelete), () async {
-              final chatListCubit = context.read<ChatListCubit>();
+              await _onDelete(_contact);
-
+            }),
-              // Delete the contact itself
+          ),
-              await contactListCubit.deleteContact(
-                  localConversationRecordKey: localConversationRecordKey);
-
-              // Remove any chats for this contact
-              await chatListCubit.deleteChat(
-                  localConversationRecordKey: localConversationRecordKey);
-            })
       ],
     );
   }
@@ -90,4 +84,8 @@ class ContactItemWidget extends StatelessWidget {
 
   final proto.Contact _contact;
   final bool _disabled;
+  final bool _selected;
+  final Future<void> Function(proto.Contact contact)? _onTap;
+  final Future<void> Function(proto.Contact contact)? _onDoubleTap;
+  final Future<void> Function(proto.Contact contact)? _onDelete;
 }

lib/contacts/views/contact_list_widget.dart

@@ -1,86 +0,0 @@
-import 'package:awesome_extensions/awesome_extensions.dart';
-import 'package:fast_immutable_collections/fast_immutable_collections.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_translate/flutter_translate.dart';
-import 'package:searchable_listview/searchable_listview.dart';
-
-import '../../proto/proto.dart' as proto;
-import '../../theme/theme.dart';
-import 'contact_item_widget.dart';
-import 'empty_contact_list_widget.dart';
-
-class ContactListWidget extends StatefulWidget {
-  const ContactListWidget(
-      {required this.contactList, required this.disabled, super.key});
-  final IList<proto.Contact>? contactList;
-  final bool disabled;
-
-  @override
-  State<ContactListWidget> createState() => _ContactListWidgetState();
-
-  @override
-  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
-    super.debugFillProperties(properties);
-    properties
-      ..add(IterableProperty<proto.Contact>('contactList', contactList))
-      ..add(DiagnosticsProperty<bool>('disabled', disabled));
-  }
-}
-
-class _ContactListWidgetState extends State<ContactListWidget>
-    with SingleTickerProviderStateMixin {
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    //final textTheme = theme.textTheme;
-    final scale = theme.extension<ScaleScheme>()!;
-    final scaleConfig = theme.extension<ScaleConfig>()!;
-
-    return SliverLayoutBuilder(
-        builder: (context, constraints) => styledHeaderSliver(
-            context: context,
-            backgroundColor: scaleConfig.preferBorders
-                ? scale.primaryScale.subtleBackground
-                : scale.primaryScale.subtleBorder,
-            title: translate('contacts_page.contacts'),
-            sliver: SliverFillRemaining(
-              child: SearchableList<proto.Contact>.sliver(
-                initialList: widget.contactList == null
-                    ? []
-                    : widget.contactList!.toList(),
-                itemBuilder: (c) =>
-                    ContactItemWidget(contact: c, disabled: widget.disabled)
-                        .paddingLTRB(0, 4, 0, 0),
-                filter: (value) {
-                  final lowerValue = value.toLowerCase();
-                  if (widget.contactList == null) {
-                    return [];
-                  }
-                  return widget.contactList!
-                      .where((element) =>
-                          element.nickname.toLowerCase().contains(lowerValue) ||
-                          element.profile.name
-                              .toLowerCase()
-                              .contains(lowerValue) ||
-                          element.profile.pronouns
-                              .toLowerCase()
-                              .contains(lowerValue))
-                      .toList();
-                },
-                searchFieldHeight: 40,
-                spaceBetweenSearchAndList: 4,
-                emptyWidget: widget.contactList == null
-                    ? waitingPage(
-                        text: translate('contacts_page.loading_contacts'))
-                    : const EmptyContactListWidget(),
-                defaultSuffixIconColor: scale.primaryScale.border,
-                closeKeyboardWhenScrolling: true,
-                searchFieldEnabled: widget.contactList != null,
-                inputDecoration: InputDecoration(
-                  labelText: translate('contact_list.search'),
-                ),
-              ),
-            )));
-  }
-}

lib/contacts/views/contacts_browser.dart

@@ -0,0 +1,247 @@
+import 'package:awesome_extensions/awesome_extensions.dart';
+import 'package:fast_immutable_collections/fast_immutable_collections.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+import 'package:searchable_listview/searchable_listview.dart';
+import 'package:veilid_support/veilid_support.dart';
+
+import '../../chat_list/chat_list.dart';
+import '../../contact_invitation/contact_invitation.dart';
+import '../../proto/proto.dart' as proto;
+import '../../theme/theme.dart';
+import '../cubits/cubits.dart';
+import 'contact_item_widget.dart';
+import 'empty_contact_list_widget.dart';
+
+enum ContactsBrowserElementKind {
+  invitation,
+  contact,
+}
+
+class ContactsBrowserElement {
+  ContactsBrowserElement.invitation(proto.ContactInvitationRecord i)
+      : kind = ContactsBrowserElementKind.invitation,
+        contact = null,
+        invitation = i;
+  ContactsBrowserElement.contact(proto.Contact c)
+      : kind = ContactsBrowserElementKind.contact,
+        invitation = null,
+        contact = c;
+
+  final ContactsBrowserElementKind kind;
+  final proto.ContactInvitationRecord? invitation;
+  final proto.Contact? contact;
+}
+
+class ContactsBrowser extends StatefulWidget {
+  const ContactsBrowser(
+      {required this.onContactSelected,
+      required this.onChatStarted,
+      this.selectedContactRecordKey,
+      super.key});
+  @override
+  State<ContactsBrowser> createState() => _ContactsBrowserState();
+
+  final Future<void> Function(proto.Contact? contact) onContactSelected;
+  final Future<void> Function(proto.Contact contact) onChatStarted;
+  final TypedKey? selectedContactRecordKey;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty<TypedKey?>(
+          'selectedContactRecordKey', selectedContactRecordKey))
+      ..add(
+          ObjectFlagProperty<Future<void> Function(proto.Contact? contact)>.has(
+              'onContactSelected', onContactSelected))
+      ..add(
+          ObjectFlagProperty<Future<void> Function(proto.Contact contact)>.has(
+              'onChatStarted', onChatStarted));
+  }
+}
+
+class _ContactsBrowserState extends State<ContactsBrowser>
+    with SingleTickerProviderStateMixin {
+  Widget buildInvitationBar(BuildContext context) {
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
+      Column(mainAxisSize: MainAxisSize.min, children: [
+        IconButton(
+          onPressed: () async {
+            await CreateInvitationDialog.show(context);
+          },
+          iconSize: 32,
+          icon: const Icon(Icons.contact_page),
+          color: scale.primaryScale.hoverBorder,
+          tooltip: translate('add_contact_sheet.create_invite'),
+        )
+      ]),
+      Column(mainAxisSize: MainAxisSize.min, children: [
+        IconButton(
+            onPressed: () async {
+              await ScanInvitationDialog.show(context);
+            },
+            iconSize: 32,
+            icon: const Icon(Icons.qr_code_scanner),
+            color: scale.primaryScale.hoverBorder,
+            tooltip: translate('add_contact_sheet.scan_invite')),
+      ]),
+      Column(mainAxisSize: MainAxisSize.min, children: [
+        IconButton(
+          onPressed: () async {
+            await PasteInvitationDialog.show(context);
+          },
+          iconSize: 32,
+          icon: const Icon(Icons.paste),
+          color: scale.primaryScale.hoverBorder,
+          tooltip: translate('add_contact_sheet.paste_invite'),
+        ),
+      ])
+    ]).paddingAll(16);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    final cilState = context.watch<ContactInvitationListCubit>().state;
+    final cilBusy = cilState.busy;
+    final contactInvitationRecordList =
+        cilState.state.asData?.value.map((x) => x.value).toIList() ??
+            const IListConst([]);
+
+    final ciState = context.watch<ContactListCubit>().state;
+    final ciBusy = ciState.busy;
+    final contactList =
+        ciState.state.asData?.value.map((x) => x.value).toIList();
+
+    final expansionListData =
+        <ContactsBrowserElementKind, List<ContactsBrowserElement>>{};
+    if (contactInvitationRecordList.isNotEmpty) {
+      expansionListData[ContactsBrowserElementKind.invitation] =
+          contactInvitationRecordList
+              .toList()
+              .map(ContactsBrowserElement.invitation)
+              .toList();
+    }
+    if (contactList != null) {
+      expansionListData[ContactsBrowserElementKind.contact] =
+          contactList.toList().map(ContactsBrowserElement.contact).toList();
+    }
+
+    return Column(children: [
+      buildInvitationBar(context),
+      SearchableList<ContactsBrowserElement>.expansion(
+        expansionListData: expansionListData,
+        expansionTitleBuilder: (k) {
+          final kind = k as ContactsBrowserElementKind;
+          late final String title;
+          switch (kind) {
+            case ContactsBrowserElementKind.contact:
+              title = translate('contacts_dialog.contacts');
+            case ContactsBrowserElementKind.invitation:
+              title = translate('contacts_dialog.invitations');
+          }
+
+          return Center(
+            child: Text(title, style: textTheme.titleSmall),
+          );
+        },
+        expansionInitiallyExpanded: (k) => true,
+        expansionListBuilder: (_index, element) {
+          switch (element.kind) {
+            case ContactsBrowserElementKind.contact:
+              final contact = element.contact!;
+              return ContactItemWidget(
+                      contact: contact,
+                      selected: widget.selectedContactRecordKey ==
+                          contact.localConversationRecordKey.toVeilid(),
+                      disabled: ciBusy,
+                      onTap: _onTapContact,
+                      onDoubleTap: _onStartChat,
+                      onDelete: _onDeleteContact)
+                  .paddingLTRB(0, 4, 0, 0);
+            case ContactsBrowserElementKind.invitation:
+              final invitation = element.invitation!;
+              return ContactInvitationItemWidget(
+                      contactInvitationRecord: invitation, disabled: cilBusy)
+                  .paddingLTRB(0, 4, 0, 0);
+          }
+        },
+        filterExpansionData: (value) {
+          final lowerValue = value.toLowerCase();
+          final filteredMap = {
+            for (final entry in expansionListData.entries)
+              entry.key: (expansionListData[entry.key] ?? []).where((element) {
+                switch (element.kind) {
+                  case ContactsBrowserElementKind.contact:
+                    final contact = element.contact!;
+                    return contact.nickname
+                            .toLowerCase()
+                            .contains(lowerValue) ||
+                        contact.profile.name
+                            .toLowerCase()
+                            .contains(lowerValue) ||
+                        contact.profile.pronouns
+                            .toLowerCase()
+                            .contains(lowerValue);
+                  case ContactsBrowserElementKind.invitation:
+                    final invitation = element.invitation!;
+                    return invitation.message
+                        .toLowerCase()
+                        .contains(lowerValue);
+                }
+              }).toList()
+          };
+          return filteredMap;
+        },
+        hideEmptyExpansionItems: true,
+        searchFieldHeight: 40,
+        listViewPadding: const EdgeInsets.all(4),
+        spaceBetweenSearchAndList: 4,
+        emptyWidget: contactList == null
+            ? waitingPage(text: translate('contact_list.loading_contacts'))
+            : const EmptyContactListWidget(),
+        defaultSuffixIconColor: scale.primaryScale.border,
+        closeKeyboardWhenScrolling: true,
+        searchFieldEnabled: contactList != null,
+        inputDecoration:
+            InputDecoration(labelText: translate('contact_list.search')),
+      ).expanded()
+    ]);
+  }
+
+  Future<void> _onTapContact(proto.Contact contact) async {
+    await widget.onContactSelected(contact);
+  }
+
+  Future<void> _onStartChat(proto.Contact contact) async {
+    await widget.onChatStarted(contact);
+  }
+
+  Future<void> _onDeleteContact(proto.Contact contact) async {
+    final localConversationRecordKey =
+        contact.localConversationRecordKey.toVeilid();
+
+    final contactListCubit = context.read<ContactListCubit>();
+    final chatListCubit = context.read<ChatListCubit>();
+
+    // Delete the contact itself
+    await contactListCubit.deleteContact(
+        localConversationRecordKey: localConversationRecordKey);
+
+    // Remove any chats for this contact
+    await chatListCubit.deleteChat(
+        localConversationRecordKey: localConversationRecordKey);
+  }
+}

lib/contacts/views/contacts_dialog.dart

@@ -0,0 +1,140 @@
+import 'package:awesome_extensions/awesome_extensions.dart';
+import 'package:fast_immutable_collections/fast_immutable_collections.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
+
+import '../../chat/chat.dart';
+import '../../chat_list/chat_list.dart';
+import '../../proto/proto.dart' as proto;
+import '../../contact_invitation/contact_invitation.dart';
+import '../../layout/layout.dart';
+import '../../theme/theme.dart';
+import '../../veilid_processor/veilid_processor.dart';
+import '../contacts.dart';
+
+class ContactsDialog extends StatefulWidget {
+  const ContactsDialog._({required this.modalContext});
+
+  @override
+  State<ContactsDialog> createState() => _ContactsDialogState();
+
+  static Future<void> show(BuildContext modalContext) async {
+    await showDialog<void>(
+        context: modalContext,
+        barrierDismissible: false,
+        useRootNavigator: false,
+        builder: (context) => ContactsDialog._(modalContext: modalContext));
+  }
+
+  final BuildContext modalContext;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+        .add(DiagnosticsProperty<BuildContext>('modalContext', modalContext));
+  }
+}
+
+class _ContactsDialogState extends State<ContactsDialog> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textTheme = theme.textTheme;
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+
+    final enableSplit = !isMobileWidth(context);
+    final enableLeft = enableSplit || _selectedContact == null;
+    final enableRight = enableSplit || _selectedContact != null;
+
+    return SizedBox(
+        width: MediaQuery.of(context).size.width,
+        child: StyledScaffold(
+            appBar: DefaultAppBar(
+                title: Text(!enableSplit && enableRight
+                    ? translate('contacts_dialog.edit_contact')
+                    : translate('contacts_dialog.contacts')),
+                leading: Navigator.canPop(context)
+                    ? IconButton(
+                        icon: const Icon(Icons.arrow_back),
+                        onPressed: () {
+                          if (!enableSplit && enableRight) {
+                            setState(() {
+                              _selectedContact = null;
+                            });
+                          } else {
+                            Navigator.pop(context);
+                          }
+                        },
+                      )
+                    : null,
+                actions: [
+                  if (_selectedContact != null)
+                    IconButton(
+                        icon: const Icon(Icons.chat_bubble),
+                        tooltip: translate('contacts_dialog.new_chat'),
+                        onPressed: () async {
+                          await onChatStarted(_selectedContact!);
+                        })
+                ]),
+            body: LayoutBuilder(builder: (context, constraint) {
+              final maxWidth = constraint.maxWidth;
+
+              return Row(children: [
+                Offstage(
+                    offstage: !enableLeft,
+                    child: SizedBox(
+                        width: enableLeft && !enableRight
+                            ? maxWidth
+                            : (maxWidth / 3).clamp(200, 500),
+                        child: DecoratedBox(
+                            decoration: BoxDecoration(
+                                color: scale.primaryScale.subtleBackground),
+                            child: ContactsBrowser(
+                              selectedContactRecordKey: _selectedContact
+                                  ?.localConversationRecordKey
+                                  .toVeilid(),
+                              onContactSelected: onContactSelected,
+                              onChatStarted: onChatStarted,
+                            ).paddingAll(8)))),
+                if (enableRight)
+                  if (_selectedContact == null)
+                    const NoContactWidget().expanded()
+                  else
+                    ContactDetailsWidget(contact: _selectedContact!)
+                        .paddingAll(8)
+                        .expanded(),
+              ]);
+            })));
+  }
+
+  Future<void> onContactSelected(proto.Contact? contact) async {
+    setState(() {
+      _selectedContact = contact;
+    });
+  }
+
+  Future<void> onChatStarted(proto.Contact contact) async {
+    final chatListCubit = context.read<ChatListCubit>();
+    await chatListCubit.getOrCreateChatSingleContact(contact: contact);
+
+    if (mounted) {
+      context
+          .read<ActiveChatCubit>()
+          .setActiveChat(contact.localConversationRecordKey.toVeilid());
+
+      Navigator.pop(context);
+    }
+  }
+
+  proto.Contact? _selectedContact;
+}

lib/contacts/views/edit_contact_form.dart

@@ -0,0 +1,174 @@
+import 'package:awesome_extensions/awesome_extensions.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+
+import '../../proto/proto.dart' as proto;
+import '../../theme/theme.dart';
+import 'availability_widget.dart';
+
+class EditContactForm extends StatefulWidget {
+  const EditContactForm({
+    required this.formKey,
+    required this.contact,
+    this.onSubmit,
+    super.key,
+  });
+
+  @override
+  State createState() => _EditContactFormState();
+
+  final proto.Contact contact;
+  final Future<void> Function(GlobalKey<FormBuilderState>)? onSubmit;
+  final GlobalKey<FormBuilderState> formKey;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(ObjectFlagProperty<
+          Future<void> Function(
+              GlobalKey<FormBuilderState> p1)?>.has('onSubmit', onSubmit))
+      ..add(DiagnosticsProperty<proto.Contact>('contact', contact))
+      ..add(
+          DiagnosticsProperty<GlobalKey<FormBuilderState>>('formKey', formKey));
+  }
+
+  static const String formFieldNickname = 'nickname';
+  static const String formFieldNotes = 'notes';
+  static const String formFieldShowAvailability = 'show_availability';
+}
+
+class _EditContactFormState extends State<EditContactForm> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  Widget _availabilityWidget(
+          BuildContext context, proto.Availability availability) =>
+      AvailabilityWidget(availability: availability);
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final scale = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+    final textTheme = theme.textTheme;
+
+    late final Color border;
+    if (scaleConfig.useVisualIndicators && !scaleConfig.preferBorders) {
+      border = scale.primaryScale.elementBackground;
+    } else {
+      border = scale.primaryScale.border;
+    }
+
+    return FormBuilder(
+      key: widget.formKey,
+      child: Column(
+        children: [
+          AvatarWidget(
+            name: widget.contact.profile.name,
+            size: 128,
+            borderColor: border,
+            foregroundColor: scale.primaryScale.primaryText,
+            backgroundColor: scale.primaryScale.primary,
+            scaleConfig: scaleConfig,
+            textStyle: theme.textTheme.titleLarge!.copyWith(fontSize: 64),
+          ).paddingLTRB(0, 0, 0, 16),
+          SelectableText(widget.contact.profile.name,
+                  style: textTheme.headlineMedium)
+              .decoratorLabel(
+                context,
+                translate('contact_form.form_name'),
+                scale: scale.secondaryScale,
+              )
+              .paddingSymmetric(vertical: 8),
+          SelectableText(widget.contact.profile.pronouns,
+                  style: textTheme.headlineSmall)
+              .decoratorLabel(
+                context,
+                translate('contact_form.form_pronouns'),
+                scale: scale.secondaryScale,
+              )
+              .paddingSymmetric(vertical: 8),
+          Row(children: [
+            _availabilityWidget(context, widget.contact.profile.availability),
+            SelectableText(widget.contact.profile.status,
+                    style: textTheme.bodyMedium)
+                .paddingSymmetric(horizontal: 8)
+          ])
+              .decoratorLabel(
+                context,
+                translate('contact_form.form_status'),
+                scale: scale.secondaryScale,
+              )
+              .paddingSymmetric(vertical: 8),
+          SelectableText(widget.contact.profile.about,
+                  minLines: 1, maxLines: 8, style: textTheme.bodyMedium)
+              .decoratorLabel(
+                context,
+                translate('contact_form.form_about'),
+                scale: scale.secondaryScale,
+              )
+              .paddingSymmetric(vertical: 8),
+          SelectableText(
+                  widget.contact.identityPublicKey.value.toVeilid().toString(),
+                  style: textTheme.labelMedium!
+                      .copyWith(fontFamily: 'Source Code Pro'))
+              .decoratorLabel(
+                context,
+                translate('contact_form.form_fingerprint'),
+                scale: scale.secondaryScale,
+              )
+              .paddingSymmetric(vertical: 8),
+          Divider(color: border).paddingLTRB(8, 0, 8, 8),
+          FormBuilderTextField(
+            autofocus: true,
+            name: EditContactForm.formFieldNickname,
+            initialValue: widget.contact.nickname,
+            decoration: InputDecoration(
+                labelText: translate('contact_form.form_nickname')),
+            maxLength: 64,
+            textInputAction: TextInputAction.next,
+          ),
+          FormBuilderCheckbox(
+            name: EditContactForm.formFieldShowAvailability,
+            initialValue: widget.contact.showAvailability,
+            side: BorderSide(color: scale.primaryScale.border, width: 2),
+            title: Text(translate('contact_form.form_show_availability'),
+                style: textTheme.labelMedium),
+          ),
+          FormBuilderTextField(
+            name: EditContactForm.formFieldNotes,
+            initialValue: widget.contact.notes,
+            minLines: 1,
+            maxLines: 8,
+            maxLength: 1024,
+            decoration: InputDecoration(
+                labelText: translate('contact_form.form_notes')),
+            textInputAction: TextInputAction.newline,
+          ),
+          ElevatedButton(
+            onPressed: widget.onSubmit == null
+                ? null
+                : () async {
+                    if (widget.formKey.currentState?.saveAndValidate() ??
+                        false) {
+                      await widget.onSubmit!(widget.formKey);
+                    }
+                  },
+            child: Row(mainAxisSize: MainAxisSize.min, children: [
+              const Icon(Icons.check, size: 16).paddingLTRB(0, 0, 4, 0),
+              Text((widget.onSubmit == null)
+                      ? translate('contact_form.save')
+                      : translate('contact_form.save'))
+                  .paddingLTRB(0, 0, 4, 0)
+            ]),
+          ).paddingSymmetric(vertical: 4).alignAtCenterRight(),
+        ],
+      ),
+    );
+  }
+}

lib/contacts/views/no_contact_widget.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_translate/flutter_translate.dart';
+
+import '../../theme/models/scale_scheme.dart';
+
+class NoContactWidget extends StatelessWidget {
+  const NoContactWidget({super.key});
+
+  @override
+  // ignore: prefer_expression_function_bodies
+  Widget build(
+    BuildContext context,
+  ) {
+    final theme = Theme.of(context);
+    final scale = theme.extension<ScaleScheme>()!;
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: scale.primaryScale.appBackground,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(
+            Icons.person,
+            color: scale.primaryScale.subtleBorder,
+            size: 48,
+          ),
+          Text(
+            textAlign: TextAlign.center,
+            translate('contacts_dialog.no_contact_selected'),
+            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: scale.primaryScale.subtleBorder,
+                ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/contacts/views/views.dart

@@ -1,3 +1,8 @@
+export 'availability_widget.dart';
+export 'contact_details_widget.dart';
 export 'contact_item_widget.dart';
-export 'contact_list_widget.dart';
+export 'contacts_browser.dart';
+export 'contacts_dialog.dart';
+export 'edit_contact_form.dart';
 export 'empty_contact_list_widget.dart';
+export 'no_contact_widget.dart';

lib/layout/home/drawer_menu/drawer_menu.dart

@@ -40,10 +40,10 @@ class _DrawerMenuState extends State<DrawerMenu> {
   }
 
   void _doEditClick(TypedKey superIdentityRecordKey,
-      proto.Profile existingProfile, OwnedDHTRecordPointer accountRecord) {
+      proto.Account existingAccount, OwnedDHTRecordPointer accountRecord) {
     singleFuture(this, () async {
       await GoRouterHelper(context).push('/edit_account',
-          extra: [superIdentityRecordKey, existingProfile, accountRecord]);
+          extra: [superIdentityRecordKey, existingAccount, accountRecord]);
     });
   }
 
@@ -58,6 +58,45 @@ class _DrawerMenuState extends State<DrawerMenu> {
                   borderRadius: BorderRadius.circular(borderRadius))),
           child: child);
 
+  Widget _makeAvatarWidget({
+    required String name,
+    required double size,
+    required Color borderColor,
+    required Color foregroundColor,
+    required Color backgroundColor,
+    required ScaleConfig scaleConfig,
+    required TextStyle textStyle,
+    ImageProvider<Object>? imageProvider,
+  }) {
+    final abbrev = name.split(' ').map((s) => s.isEmpty ? '' : s[0]).join();
+    late final String shortname;
+    if (abbrev.length >= 3) {
+      shortname = abbrev[0] + abbrev[1] + abbrev[abbrev.length - 1];
+    } else {
+      shortname = abbrev;
+    }
+
+    return Container(
+        height: size,
+        width: size,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: scaleConfig.preferBorders
+              ? Border.all(
+                  color: borderColor,
+                  width: 2 * (size ~/ 32 + 1),
+                  strokeAlign: BorderSide.strokeAlignOutside)
+              : null,
+          color: Colors.blue,
+        ),
+        child: AvatarImage(
+            //size: 32,
+            backgroundImage: imageProvider,
+            backgroundColor: backgroundColor,
+            foregroundColor: foregroundColor,
+            child: Text(shortname, style: textStyle)));
+  }
+
   Widget _makeAccountWidget(
       {required String name,
       required bool selected,
@@ -67,13 +106,6 @@ class _DrawerMenuState extends State<DrawerMenu> {
       required void Function()? callback,
       required void Function()? footerCallback}) {
     final theme = Theme.of(context);
-    final abbrev = name.split(' ').map((s) => s.isEmpty ? '' : s[0]).join();
-    late final String shortname;
-    if (abbrev.length >= 3) {
-      shortname = abbrev[0] + abbrev[1] + abbrev[abbrev.length - 1];
-    } else {
-      shortname = abbrev;
-    }
 
     late final Color background;
     late final Color hoverBackground;
@@ -99,24 +131,15 @@ class _DrawerMenuState extends State<DrawerMenu> {
       activeBorder = scale.primary;
     }
 
-    final avatar = Container(
+    final avatar = AvatarWidget(
-        height: 34,
+      name: name,
-        width: 34,
+      size: 34,
-        decoration: BoxDecoration(
+      borderColor: border,
-          shape: BoxShape.circle,
+      foregroundColor: loggedIn ? scale.primaryText : scale.subtleText,
-          border: scaleConfig.preferBorders
+      backgroundColor: loggedIn ? scale.primary : scale.elementBackground,
-              ? Border.all(
+      scaleConfig: scaleConfig,
-                  color: border,
+      textStyle: theme.textTheme.titleLarge!,
-                  width: 2,
+    );
-                  strokeAlign: BorderSide.strokeAlignOutside)
-              : null,
-          color: Colors.blue,
-        ),
-        child: AvatarImage(
-            //size: 32,
-            backgroundColor: loggedIn ? scale.primary : scale.elementBackground,
-            foregroundColor: loggedIn ? scale.primaryText : scale.subtleText,
-            child: Text(shortname, style: theme.textTheme.titleLarge)));
 
     return AnimatedPadding(
         padding: EdgeInsets.fromLTRB(selected ? 0 : 8, selected ? 0 : 2,
@@ -190,7 +213,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
               footerCallback: () {
                 _doEditClick(
                     superIdentityRecordKey,
-                    value.profile,
+                    value,
                     perAccountState.accountInfo.userLogin!.accountRecordInfo
                         .accountRecord);
               }),

lib/layout/home/home_account_ready.dart

@@ -6,9 +6,10 @@ import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
 
 import '../../account_manager/account_manager.dart';
 import '../../chat/chat.dart';
+import '../../chat_list/chat_list.dart';
+import '../../contacts/contacts.dart';
 import '../../proto/proto.dart' as proto;
 import '../../theme/theme.dart';
-import 'main_pager/main_pager.dart';
 
 class HomeAccountReady extends StatefulWidget {
   const HomeAccountReady({super.key});
@@ -23,6 +24,75 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
     super.initState();
   }
 
+  Widget buildMenuButton() => Builder(builder: (context) {
+        final theme = Theme.of(context);
+        final scale = theme.extension<ScaleScheme>()!;
+        final scaleConfig = theme.extension<ScaleConfig>()!;
+        return IconButton(
+            icon: const Icon(Icons.menu),
+            color: scaleConfig.preferBorders
+                ? scale.primaryScale.border
+                : scale.primaryScale.borderText,
+            constraints: const BoxConstraints.expand(height: 48, width: 48),
+            style: ButtonStyle(
+                backgroundColor: WidgetStateProperty.all(
+                    scaleConfig.preferBorders
+                        ? scale.primaryScale.hoverElementBackground
+                        : scale.primaryScale.hoverBorder),
+                shape: WidgetStateProperty.all(
+                  RoundedRectangleBorder(
+                      side: !scaleConfig.useVisualIndicators
+                          ? BorderSide.none
+                          : BorderSide(
+                              strokeAlign: BorderSide.strokeAlignCenter,
+                              color: scaleConfig.preferBorders
+                                  ? scale.primaryScale.border
+                                  : scale.primaryScale.borderText,
+                              width: 2),
+                      borderRadius: BorderRadius.all(
+                          Radius.circular(12 * scaleConfig.borderRadiusScale))),
+                )),
+            tooltip: translate('menu.accounts_menu_tooltip'),
+            onPressed: () async {
+              final ctrl = context.read<ZoomDrawerController>();
+              await ctrl.toggle?.call();
+            });
+      });
+
+  Widget buildContactsButton() => Builder(builder: (context) {
+        final theme = Theme.of(context);
+        final scale = theme.extension<ScaleScheme>()!;
+        final scaleConfig = theme.extension<ScaleConfig>()!;
+        return IconButton(
+            icon: const Icon(Icons.contacts),
+            color: scaleConfig.preferBorders
+                ? scale.primaryScale.border
+                : scale.primaryScale.borderText,
+            constraints: const BoxConstraints.expand(height: 48, width: 48),
+            style: ButtonStyle(
+                backgroundColor: WidgetStateProperty.all(
+                    scaleConfig.preferBorders
+                        ? scale.primaryScale.hoverElementBackground
+                        : scale.primaryScale.hoverBorder),
+                shape: WidgetStateProperty.all(
+                  RoundedRectangleBorder(
+                      side: !scaleConfig.useVisualIndicators
+                          ? BorderSide.none
+                          : BorderSide(
+                              strokeAlign: BorderSide.strokeAlignCenter,
+                              color: scaleConfig.preferBorders
+                                  ? scale.primaryScale.border
+                                  : scale.primaryScale.borderText,
+                              width: 2),
+                      borderRadius: BorderRadius.all(
+                          Radius.circular(12 * scaleConfig.borderRadiusScale))),
+                )),
+            tooltip: translate('menu.contacts_tooltip'),
+            onPressed: () async {
+              await ContactsDialog.show(context);
+            });
+      });
+
   Widget buildUserPanel() => Builder(builder: (context) {
         final profile = context.select<AccountRecordCubit, proto.Profile>(
             (c) => c.state.asData!.value.profile);
@@ -36,43 +106,14 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
                 : scale.primaryScale.subtleBorder,
             child: Column(children: <Widget>[
               Row(children: [
-                IconButton(
+                buildMenuButton().paddingLTRB(0, 0, 8, 0),
-                    icon: const Icon(Icons.menu),
-                    color: scaleConfig.preferBorders
-                        ? scale.primaryScale.border
-                        : scale.primaryScale.borderText,
-                    constraints:
-                        const BoxConstraints.expand(height: 48, width: 48),
-                    style: ButtonStyle(
-                        backgroundColor: WidgetStateProperty.all(
-                            scaleConfig.preferBorders
-                                ? scale.primaryScale.hoverElementBackground
-                                : scale.primaryScale.hoverBorder),
-                        shape: WidgetStateProperty.all(
-                          RoundedRectangleBorder(
-                              side: !scaleConfig.useVisualIndicators
-                                  ? BorderSide.none
-                                  : BorderSide(
-                                      strokeAlign: BorderSide.strokeAlignCenter,
-                                      color: scaleConfig.preferBorders
-                                          ? scale.primaryScale.border
-                                          : scale.primaryScale.borderText,
-                                      width: 2),
-                              borderRadius: BorderRadius.all(Radius.circular(
-                                  12 * scaleConfig.borderRadiusScale))),
-                        )),
-                    tooltip: translate('menu.settings_tooltip'),
-                    onPressed: () async {
-                      final ctrl = context.read<ZoomDrawerController>();
-                      await ctrl.toggle?.call();
-                      //await GoRouterHelper(context).push('/settings');
-                    }).paddingLTRB(0, 0, 8, 0),
                 ProfileWidget(
                   profile: profile,
                   showPronouns: false,
                 ).expanded(),
+                buildContactsButton().paddingLTRB(8, 0, 0, 0),
               ]).paddingAll(8),
-              MainPager(key: _mainPagerKey).expanded()
+              const ChatListWidget().expanded()
             ]));
       });
 
@@ -156,7 +197,4 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
       ]);
     });
   }
-
-  ////////////////////////////////////////////////////////////////////////////
-  final _mainPagerKey = GlobalKey(debugLabel: '_mainPagerKey');
 }

lib/layout/home/home_screen.dart

@@ -132,7 +132,14 @@ class HomeScreenState extends State<HomeScreen>
 
         // Re-export all ready blocs to the account display subtree
         return perAccountCollectionState.provide(
-            child: const HomeAccountReady());
+            child: Navigator(
+                onPopPage: (route, result) {
+                  if (!route.didPop(result)) {
+                    return false;
+                  }
+                  return true;
+                },
+                pages: const [MaterialPage(child: HomeAccountReady())]));
     }
   }
 

lib/layout/home/main_pager/bottom_sheet_action_button.dart

@@ -1,68 +0,0 @@
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-class BottomSheetActionButton extends StatefulWidget {
-  const BottomSheetActionButton(
-      {required this.bottomSheetBuilder,
-      required this.builder,
-      this.foregroundColor,
-      this.backgroundColor,
-      this.shape,
-      super.key});
-  final Color? foregroundColor;
-  final Color? backgroundColor;
-  final ShapeBorder? shape;
-  final Widget Function(BuildContext) builder;
-  final Widget Function(BuildContext) bottomSheetBuilder;
-
-  @override
-  BottomSheetActionButtonState createState() => BottomSheetActionButtonState();
-  @override
-  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
-    super.debugFillProperties(properties);
-    properties
-      ..add(ObjectFlagProperty<Widget Function(BuildContext p1)>.has(
-          'bottomSheetBuilder', bottomSheetBuilder))
-      ..add(ColorProperty('foregroundColor', foregroundColor))
-      ..add(ColorProperty('backgroundColor', backgroundColor))
-      ..add(DiagnosticsProperty<ShapeBorder?>('shape', shape))
-      ..add(ObjectFlagProperty<Widget? Function(BuildContext p1)>.has(
-          'builder', builder));
-  }
-}
-
-class BottomSheetActionButtonState extends State<BottomSheetActionButton> {
-  bool _showFab = true;
-
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  // ignore: prefer_expression_function_bodies
-  Widget build(BuildContext context) {
-    //
-    return _showFab
-        ? FloatingActionButton(
-            elevation: 0,
-            heroTag: this,
-            hoverElevation: 0,
-            shape: widget.shape,
-            foregroundColor: widget.foregroundColor,
-            backgroundColor: widget.backgroundColor,
-            child: widget.builder(context),
-            onPressed: () async {
-              await showModalBottomSheet<void>(
-                  context: context, builder: widget.bottomSheetBuilder);
-            },
-          )
-        : Container();
-  }
-
-  void showFloatingActionButton(bool value) {
-    setState(() {
-      _showFab = value;
-    });
-  }
-}

lib/layout/home/main_pager/chats_page.dart

@@ -1,28 +0,0 @@
-import 'package:flutter/material.dart';
-
-import '../../../chat_list/chat_list.dart';
-
-class ChatsPage extends StatefulWidget {
-  const ChatsPage({super.key});
-
-  @override
-  ChatsPageState createState() => ChatsPageState();
-}
-
-class ChatsPageState extends State<ChatsPage> {
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    super.dispose();
-  }
-
-  @override
-  // ignore: prefer_expression_function_bodies
-  Widget build(BuildContext context) {
-    return const ChatListWidget();
-  }
-}

lib/layout/home/main_pager/contacts_page.dart

@@ -1,58 +0,0 @@
-import 'package:awesome_extensions/awesome_extensions.dart';
-import 'package:fast_immutable_collections/fast_immutable_collections.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
-import '../../../contact_invitation/contact_invitation.dart';
-import '../../../contacts/contacts.dart';
-
-class ContactsPage extends StatefulWidget {
-  const ContactsPage({
-    super.key,
-  });
-
-  @override
-  ContactsPageState createState() => ContactsPageState();
-}
-
-class ContactsPageState extends State<ContactsPage> {
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    super.dispose();
-  }
-
-  @override
-  // ignore: prefer_expression_function_bodies
-  Widget build(BuildContext context) {
-    // final theme = Theme.of(context);
-    // final textTheme = theme.textTheme;
-    // final scale = theme.extension<ScaleScheme>()!;
-    // final scaleConfig = theme.extension<ScaleConfig>()!;
-
-    final cilState = context.watch<ContactInvitationListCubit>().state;
-    final cilBusy = cilState.busy;
-    final contactInvitationRecordList =
-        cilState.state.asData?.value.map((x) => x.value).toIList() ??
-            const IListConst([]);
-
-    final ciState = context.watch<ContactListCubit>().state;
-    final ciBusy = ciState.busy;
-    final contactList =
-        ciState.state.asData?.value.map((x) => x.value).toIList();
-
-    return CustomScrollView(slivers: [
-      if (contactInvitationRecordList.isNotEmpty)
-        SliverPadding(
-            padding: const EdgeInsets.only(bottom: 8),
-            sliver: ContactInvitationListWidget(
-                contactInvitationRecordList: contactInvitationRecordList,
-                disabled: cilBusy)),
-      ContactListWidget(contactList: contactList, disabled: ciBusy)
-    ]).paddingLTRB(8, 0, 8, 8);
-  }
-}

lib/layout/home/main_pager/main_pager.dart

@@ -1,242 +0,0 @@
-import 'dart:async';
-
-import 'package:animated_bottom_navigation_bar/'
-    'animated_bottom_navigation_bar.dart';
-import 'package:awesome_extensions/awesome_extensions.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
-import 'package:flutter_animate/flutter_animate.dart';
-import 'package:flutter_translate/flutter_translate.dart';
-import 'package:preload_page_view/preload_page_view.dart';
-import 'package:provider/provider.dart';
-
-import '../../../chat/chat.dart';
-import '../../../contact_invitation/contact_invitation.dart';
-import '../../../theme/theme.dart';
-import 'bottom_sheet_action_button.dart';
-import 'chats_page.dart';
-import 'contacts_page.dart';
-
-class MainPager extends StatefulWidget {
-  const MainPager({super.key});
-
-  @override
-  MainPagerState createState() => MainPagerState();
-
-  static MainPagerState? of(BuildContext context) =>
-      context.findAncestorStateOfType<MainPagerState>();
-}
-
-class MainPagerState extends State<MainPager> with TickerProviderStateMixin {
-  //////////////////////////////////////////////////////////////////
-
-  @override
-  void initState() {
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    pageController.dispose();
-    super.dispose();
-  }
-
-  Future<void> scanContactInvitationDialog(BuildContext context) async {
-    await showDialog<void>(
-        context: context,
-        // ignore: prefer_expression_function_bodies
-        builder: (context) {
-          return AlertDialog(
-              shape: const RoundedRectangleBorder(
-                borderRadius: BorderRadius.all(Radius.circular(20)),
-              ),
-              contentPadding: const EdgeInsets.only(
-                top: 10,
-              ),
-              title: const Text(
-                'Scan Contact Invite',
-                style: TextStyle(fontSize: 24),
-              ),
-              content: ScanInvitationDialog(
-                locator: context.read,
-              ));
-        });
-  }
-
-  Widget _buildBottomBarItem(int index, bool isActive) {
-    final theme = Theme.of(context);
-    final scale = theme.extension<ScaleScheme>()!;
-    final scaleConfig = theme.extension<ScaleConfig>()!;
-
-    final color = scaleConfig.useVisualIndicators
-        ? (scaleConfig.preferBorders
-            ? scale.primaryScale.border
-            : scale.primaryScale.borderText)
-        : (isActive
-            ? (scaleConfig.preferBorders
-                ? scale.primaryScale.border
-                : scale.primaryScale.borderText)
-            : (scaleConfig.preferBorders
-                ? scale.primaryScale.subtleBorder
-                : scale.primaryScale.borderText.withAlpha(0x80)));
-
-    final item = Column(
-      mainAxisSize: MainAxisSize.min,
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        Icon(
-          _selectedIconList[index],
-          size: 24,
-          color: color,
-        ),
-        const SizedBox(height: 4),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 4),
-          child: Text(
-            _bottomLabelList[index],
-            style: theme.textTheme.labelMedium!.copyWith(
-                fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
-                color: color),
-          ),
-        )
-      ],
-    );
-
-    if (scaleConfig.useVisualIndicators && isActive) {
-      return DecoratedBox(
-              decoration: ShapeDecoration(
-                  shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(
-                          14 * scaleConfig.borderRadiusScale),
-                      side: BorderSide(
-                          width: 2,
-                          color: scaleConfig.preferBorders
-                              ? scale.primaryScale.border
-                              : scale.primaryScale.borderText))),
-              child: item)
-          .paddingLTRB(8, 0, 8, 6);
-    }
-
-    return item;
-  }
-
-  Widget _bottomSheetBuilder(BuildContext sheetContext, BuildContext context) {
-    if (currentPage == 0) {
-      // New contact invitation
-      return newContactBottomSheetBuilder(sheetContext, context);
-    } else if (currentPage == 1) {
-      // New chat
-      return newChatBottomSheetBuilder(sheetContext, context);
-    } else {
-      // Unknown error
-      return debugPage('unknown page');
-    }
-  }
-
-  @override
-  // ignore: prefer_expression_function_bodies
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final scale = theme.extension<ScaleScheme>()!;
-    final scaleConfig = theme.extension<ScaleConfig>()!;
-
-    return Scaffold(
-      //extendBody: true,
-      backgroundColor: Colors.transparent,
-      body: PreloadPageView(
-          key: _pageViewKey,
-          controller: pageController,
-          preloadPagesCount: 2,
-          onPageChanged: (index) {
-            setState(() {
-              currentPage = index;
-            });
-          },
-          children: const [
-            ContactsPage(),
-            ChatsPage(),
-          ]),
-      // appBar: AppBar(
-      //   toolbarHeight: 24,
-      //   title: Text(
-      //     'C',
-      //     style: Theme.of(context).textTheme.headlineSmall,
-      //   ),
-      // ),
-      bottomNavigationBar: AnimatedBottomNavigationBar.builder(
-        itemCount: 2,
-        height: 64,
-        tabBuilder: _buildBottomBarItem,
-        activeIndex: currentPage,
-        gapLocation: GapLocation.end,
-        gapWidth: 90,
-        notchSmoothness: NotchSmoothness.defaultEdge,
-        notchMargin: 4,
-        backgroundColor: scaleConfig.preferBorders
-            ? scale.primaryScale.hoverElementBackground
-            : scale.primaryScale.hoverBorder,
-        elevation: 0,
-        onTap: (index) async {
-          await pageController.animateToPage(index,
-              duration: 250.ms, curve: Curves.easeInOut);
-        },
-      ),
-      floatingActionButton: BottomSheetActionButton(
-          shape: CircleBorder(
-            side: !scaleConfig.useVisualIndicators
-                ? BorderSide.none
-                : BorderSide(
-                    strokeAlign: BorderSide.strokeAlignCenter,
-                    color: scaleConfig.preferBorders
-                        ? scale.secondaryScale.border
-                        : scale.secondaryScale.borderText,
-                    width: 2),
-          ),
-          foregroundColor: scaleConfig.preferBorders
-              ? scale.secondaryScale.border
-              : scale.secondaryScale.borderText,
-          backgroundColor: scaleConfig.preferBorders
-              ? scale.secondaryScale.hoverElementBackground
-              : scale.secondaryScale.hoverBorder,
-          builder: (context) => Icon(
-                _fabIconList[currentPage],
-                color: scaleConfig.preferBorders
-                    ? scale.secondaryScale.border
-                    : scale.secondaryScale.borderText,
-              ),
-          bottomSheetBuilder: (sheetContext) =>
-              _bottomSheetBuilder(sheetContext, context)),
-      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
-    );
-  }
-
-  //////////////////////////////////////////////////////////////////
-
-  final _selectedIconList = <IconData>[Icons.person, Icons.chat];
-  // final _unselectedIconList = <IconData>[
-  //   Icons.chat_outlined,
-  //   Icons.person_outlined
-  // ];
-  final _fabIconList = <IconData>[
-    Icons.person_add_sharp,
-    Icons.chat,
-  ];
-  final _bottomLabelList = <String>[
-    translate('pager.contacts'),
-    translate('pager.chats'),
-  ];
-  final _pageViewKey = GlobalKey(debugLabel: '_pageViewKey');
-
-  // key-accessible controller
-  int currentPage = 0;
-  final pageController = PreloadPageController();
-
-  @override
-  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
-    super.debugFillProperties(properties);
-    properties
-      ..add(IntProperty('currentPage', currentPage))
-      ..add(DiagnosticsProperty<PreloadPageController>(
-          'pageController', pageController));
-  }
-}

lib/layout/layout.dart

@@ -1,4 +1,3 @@
 export 'default_app_bar.dart';
 export 'home/home.dart';
-export 'home/main_pager/main_pager.dart';
 export 'splash.dart';

lib/proto/veilidchat.pb.dart

@@ -1647,11 +1647,15 @@ class Account extends $pb.GeneratedMessage {
   static final $pb.BuilderInfo _i = $pb.BuilderInfo(_omitMessageNames ? '' : 'Account', package: const $pb.PackageName(_omitMessageNames ? '' : 'veilidchat'), createEmptyInstance: create)
     ..aOM<Profile>(1, _omitFieldNames ? '' : 'profile', subBuilder: Profile.create)
     ..aOB(2, _omitFieldNames ? '' : 'invisible')
-    ..a<$core.int>(3, _omitFieldNames ? '' : 'autoAwayTimeoutSec', $pb.PbFieldType.OU3)
+    ..a<$core.int>(3, _omitFieldNames ? '' : 'autoAwayTimeoutMin', $pb.PbFieldType.OU3)
     ..aOM<$1.OwnedDHTRecordPointer>(4, _omitFieldNames ? '' : 'contactList', subBuilder: $1.OwnedDHTRecordPointer.create)
     ..aOM<$1.OwnedDHTRecordPointer>(5, _omitFieldNames ? '' : 'contactInvitationRecords', subBuilder: $1.OwnedDHTRecordPointer.create)
     ..aOM<$1.OwnedDHTRecordPointer>(6, _omitFieldNames ? '' : 'chatList', subBuilder: $1.OwnedDHTRecordPointer.create)
     ..aOM<$1.OwnedDHTRecordPointer>(7, _omitFieldNames ? '' : 'groupChatList', subBuilder: $1.OwnedDHTRecordPointer.create)
+    ..aOS(8, _omitFieldNames ? '' : 'freeMessage')
+    ..aOS(9, _omitFieldNames ? '' : 'busyMessage')
+    ..aOS(10, _omitFieldNames ? '' : 'awayMessage')
+    ..aOB(11, _omitFieldNames ? '' : 'autodetectAway')
     ..hasRequiredFields = false
   ;
 
@@ -1697,13 +1701,13 @@ class Account extends $pb.GeneratedMessage {
   void clearInvisible() => clearField(2);
 
   @$pb.TagNumber(3)
-  $core.int get autoAwayTimeoutSec => $_getIZ(2);
+  $core.int get autoAwayTimeoutMin => $_getIZ(2);
   @$pb.TagNumber(3)
-  set autoAwayTimeoutSec($core.int v) { $_setUnsignedInt32(2, v); }
+  set autoAwayTimeoutMin($core.int v) { $_setUnsignedInt32(2, v); }
   @$pb.TagNumber(3)
-  $core.bool hasAutoAwayTimeoutSec() => $_has(2);
+  $core.bool hasAutoAwayTimeoutMin() => $_has(2);
   @$pb.TagNumber(3)
-  void clearAutoAwayTimeoutSec() => clearField(3);
+  void clearAutoAwayTimeoutMin() => clearField(3);
 
   @$pb.TagNumber(4)
   $1.OwnedDHTRecordPointer get contactList => $_getN(3);
@@ -1748,6 +1752,42 @@ class Account extends $pb.GeneratedMessage {
   void clearGroupChatList() => clearField(7);
   @$pb.TagNumber(7)
   $1.OwnedDHTRecordPointer ensureGroupChatList() => $_ensure(6);
+
+  @$pb.TagNumber(8)
+  $core.String get freeMessage => $_getSZ(7);
+  @$pb.TagNumber(8)
+  set freeMessage($core.String v) { $_setString(7, v); }
+  @$pb.TagNumber(8)
+  $core.bool hasFreeMessage() => $_has(7);
+  @$pb.TagNumber(8)
+  void clearFreeMessage() => clearField(8);
+
+  @$pb.TagNumber(9)
+  $core.String get busyMessage => $_getSZ(8);
+  @$pb.TagNumber(9)
+  set busyMessage($core.String v) { $_setString(8, v); }
+  @$pb.TagNumber(9)
+  $core.bool hasBusyMessage() => $_has(8);
+  @$pb.TagNumber(9)
+  void clearBusyMessage() => clearField(9);
+
+  @$pb.TagNumber(10)
+  $core.String get awayMessage => $_getSZ(9);
+  @$pb.TagNumber(10)
+  set awayMessage($core.String v) { $_setString(9, v); }
+  @$pb.TagNumber(10)
+  $core.bool hasAwayMessage() => $_has(9);
+  @$pb.TagNumber(10)
+  void clearAwayMessage() => clearField(10);
+
+  @$pb.TagNumber(11)
+  $core.bool get autodetectAway => $_getBF(10);
+  @$pb.TagNumber(11)
+  set autodetectAway($core.bool v) { $_setBool(10, v); }
+  @$pb.TagNumber(11)
+  $core.bool hasAutodetectAway() => $_has(10);
+  @$pb.TagNumber(11)
+  void clearAutodetectAway() => clearField(11);
 }
 
 class Contact extends $pb.GeneratedMessage {

lib/proto/veilidchat.pbjson.dart

@@ -467,24 +467,31 @@ const Account$json = {
   '2': [
     {'1': 'profile', '3': 1, '4': 1, '5': 11, '6': '.veilidchat.Profile', '10': 'profile'},
     {'1': 'invisible', '3': 2, '4': 1, '5': 8, '10': 'invisible'},
-    {'1': 'auto_away_timeout_sec', '3': 3, '4': 1, '5': 13, '10': 'autoAwayTimeoutSec'},
+    {'1': 'auto_away_timeout_min', '3': 3, '4': 1, '5': 13, '10': 'autoAwayTimeoutMin'},
     {'1': 'contact_list', '3': 4, '4': 1, '5': 11, '6': '.dht.OwnedDHTRecordPointer', '10': 'contactList'},
     {'1': 'contact_invitation_records', '3': 5, '4': 1, '5': 11, '6': '.dht.OwnedDHTRecordPointer', '10': 'contactInvitationRecords'},
     {'1': 'chat_list', '3': 6, '4': 1, '5': 11, '6': '.dht.OwnedDHTRecordPointer', '10': 'chatList'},
     {'1': 'group_chat_list', '3': 7, '4': 1, '5': 11, '6': '.dht.OwnedDHTRecordPointer', '10': 'groupChatList'},
+    {'1': 'free_message', '3': 8, '4': 1, '5': 9, '10': 'freeMessage'},
+    {'1': 'busy_message', '3': 9, '4': 1, '5': 9, '10': 'busyMessage'},
+    {'1': 'away_message', '3': 10, '4': 1, '5': 9, '10': 'awayMessage'},
+    {'1': 'autodetect_away', '3': 11, '4': 1, '5': 8, '10': 'autodetectAway'},
   ],
 };
 
 /// Descriptor for `Account`. Decode as a `google.protobuf.DescriptorProto`.
 final $typed_data.Uint8List accountDescriptor = $convert.base64Decode(
     'CgdBY2NvdW50Ei0KB3Byb2ZpbGUYASABKAsyEy52ZWlsaWRjaGF0LlByb2ZpbGVSB3Byb2ZpbG'
-    'USHAoJaW52aXNpYmxlGAIgASgIUglpbnZpc2libGUSMQoVYXV0b19hd2F5X3RpbWVvdXRfc2Vj'
+    'USHAoJaW52aXNpYmxlGAIgASgIUglpbnZpc2libGUSMQoVYXV0b19hd2F5X3RpbWVvdXRfbWlu'
-    'GAMgASgNUhJhdXRvQXdheVRpbWVvdXRTZWMSPQoMY29udGFjdF9saXN0GAQgASgLMhouZGh0Lk'
+    'GAMgASgNUhJhdXRvQXdheVRpbWVvdXRNaW4SPQoMY29udGFjdF9saXN0GAQgASgLMhouZGh0Lk'
     '93bmVkREhUUmVjb3JkUG9pbnRlclILY29udGFjdExpc3QSWAoaY29udGFjdF9pbnZpdGF0aW9u'
     'X3JlY29yZHMYBSABKAsyGi5kaHQuT3duZWRESFRSZWNvcmRQb2ludGVyUhhjb250YWN0SW52aX'
     'RhdGlvblJlY29yZHMSNwoJY2hhdF9saXN0GAYgASgLMhouZGh0Lk93bmVkREhUUmVjb3JkUG9p'
     'bnRlclIIY2hhdExpc3QSQgoPZ3JvdXBfY2hhdF9saXN0GAcgASgLMhouZGh0Lk93bmVkREhUUm'
-    'Vjb3JkUG9pbnRlclINZ3JvdXBDaGF0TGlzdA==');
+    'Vjb3JkUG9pbnRlclINZ3JvdXBDaGF0TGlzdBIhCgxmcmVlX21lc3NhZ2UYCCABKAlSC2ZyZWVN'
+    'ZXNzYWdlEiEKDGJ1c3lfbWVzc2FnZRgJIAEoCVILYnVzeU1lc3NhZ2USIQoMYXdheV9tZXNzYW'
+    'dlGAogASgJUgthd2F5TWVzc2FnZRInCg9hdXRvZGV0ZWN0X2F3YXkYCyABKAhSDmF1dG9kZXRl'
+    'Y3RBd2F5');
 
 @$core.Deprecated('Use contactDescriptor instead')
 const Contact$json = {

lib/proto/veilidchat.proto

@@ -319,13 +319,13 @@ message Chat {
 // Pronouns - Pronouns of user
 // Icon - Little picture to represent user in contact list
 message Profile  {
-    // Friendy name
+    // Friendy name (max length 64)
     string name = 1;
-    // Pronouns of user
+    // Pronouns of user (max length 64)
     string pronouns = 2;
-    // Description of the user
+    // Description of the user (max length 1024)
     string about = 3;
-    // Status/away message
+    // Status/away message (max length 128)
     string status = 4;
     // Availability
     Availability availability = 5;
@@ -345,8 +345,8 @@ message Account {
     Profile profile = 1;
     // Invisibility makes you always look 'Offline'
     bool invisible = 2;
-    // Auto-away sets 'away' mode after an inactivity time
+    // Auto-away sets 'away' mode after an inactivity time (only if autodetect_away is set)
-    uint32 auto_away_timeout_sec = 3;
+    uint32 auto_away_timeout_min = 3;
     // The contacts DHTList for this account
     // DHT Private
     dht.OwnedDHTRecordPointer contact_list = 4;
@@ -359,6 +359,15 @@ message Account {
     // The GroupChats DHTList for this account
     // DHT Private
     dht.OwnedDHTRecordPointer group_chat_list = 7;
+    // Free message (max length 128)
+    string free_message = 8;
+    // Busy message (max length 128)
+    string busy_message = 9;
+    // Away message (max length 128)
+    string away_message = 10;
+    // Auto-detect away
+    bool autodetect_away = 11;
+
 }
 
 // A record of a contact that has accepted a contact invitation

lib/router/cubits/router_cubit.dart

@@ -72,7 +72,7 @@ class RouterCubit extends Cubit<RouterState> {
                   final extra = state.extra! as List<Object?>;
                   return EditAccountPage(
                     superIdentityRecordKey: extra[0]! as TypedKey,
-                    existingProfile: extra[1]! as proto.Profile,
+                    existingAccount: extra[1]! as proto.Account,
                     accountRecord: extra[2]! as OwnedDHTRecordPointer,
                   );
                 },

lib/settings/settings_page.dart

@@ -47,7 +47,9 @@ class SettingsPageState extends State<SettingsPage> {
                   child: ListView(
                     children: [
                       buildSettingsPageColorPreferences(
-                          context: context, onChanged: () => setState(() {})),
+                              context: context,
+                              onChanged: () => setState(() {}))
+                          .paddingLTRB(0, 8, 0, 0),
                       buildSettingsPageBrightnessPreferences(
                           context: context, onChanged: () => setState(() {})),
                       buildSettingsPageNotificationPreferences(

lib/theme/models/slider_tile.dart

@@ -30,6 +30,7 @@ class SliderTile extends StatelessWidget {
       this.endActions = const [],
       this.startActions = const [],
       this.onTap,
+      this.onDoubleTap,
       this.icon,
       super.key});
 
@@ -39,6 +40,7 @@ class SliderTile extends StatelessWidget {
   final List<SliderTileAction> endActions;
   final List<SliderTileAction> startActions;
   final GestureTapCallback? onTap;
+  final GestureTapCallback? onDoubleTap;
   final IconData? icon;
   final String title;
   final String subtitle;
@@ -55,7 +57,9 @@ class SliderTile extends StatelessWidget {
       ..add(ObjectFlagProperty<GestureTapCallback?>.has('onTap', onTap))
       ..add(DiagnosticsProperty<IconData?>('icon', icon))
       ..add(StringProperty('title', title))
-      ..add(StringProperty('subtitle', subtitle));
+      ..add(StringProperty('subtitle', subtitle))
+      ..add(ObjectFlagProperty<GestureTapCallback?>.has(
+          'onDoubleTap', onDoubleTap));
   }
 
   @override
@@ -138,18 +142,20 @@ class SliderTile extends StatelessWidget {
                 padding: scaleConfig.useVisualIndicators
                     ? EdgeInsets.zero
                     : const EdgeInsets.fromLTRB(0, 2, 0, 2),
-                child: ListTile(
+                child: GestureDetector(
-                    onTap: onTap,
+                    onDoubleTap: onDoubleTap,
-                    dense: true,
+                    child: ListTile(
-                    visualDensity: const VisualDensity(vertical: -4),
+                        onTap: onTap,
-                    title: Text(
+                        dense: true,
-                      title,
+                        visualDensity: const VisualDensity(vertical: -4),
-                      overflow: TextOverflow.fade,
+                        title: Text(
-                      softWrap: false,
+                          title,
-                    ),
+                          overflow: TextOverflow.fade,
-                    subtitle: subtitle.isNotEmpty ? Text(subtitle) : null,
+                          softWrap: false,
-                    iconColor: textColor,
+                        ),
-                    textColor: textColor,
+                        subtitle: subtitle.isNotEmpty ? Text(subtitle) : null,
-                    leading: icon == null ? null : Icon(icon)))));
+                        iconColor: textColor,
+                        textColor: textColor,
+                        leading: icon == null ? null : Icon(icon))))));
   }
 }

lib/theme/views/avatar_widget.dart

@@ -0,0 +1,77 @@
+import 'package:awesome_extensions/awesome_extensions.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+import '../theme.dart';
+
+class AvatarWidget extends StatelessWidget {
+  AvatarWidget({
+    required String name,
+    required double size,
+    required Color borderColor,
+    required Color foregroundColor,
+    required Color backgroundColor,
+    required ScaleConfig scaleConfig,
+    required TextStyle textStyle,
+    super.key,
+    ImageProvider<Object>? imageProvider,
+  })  : _name = name,
+        _size = size,
+        _borderColor = borderColor,
+        _foregroundColor = foregroundColor,
+        _backgroundColor = backgroundColor,
+        _scaleConfig = scaleConfig,
+        _textStyle = textStyle,
+        _imageProvider = imageProvider;
+
+  @override
+  Widget build(BuildContext context) {
+    final abbrev = _name.split(' ').map((s) => s.isEmpty ? '' : s[0]).join();
+    late final String shortname;
+    if (abbrev.length >= 3) {
+      shortname = abbrev[0] + abbrev[1] + abbrev[abbrev.length - 1];
+    } else {
+      shortname = abbrev;
+    }
+
+    return Container(
+        height: _size,
+        width: _size,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: _scaleConfig.preferBorders
+              ? Border.all(
+                  color: _borderColor,
+                  width: 1 * (_size ~/ 32 + 1),
+                  strokeAlign: BorderSide.strokeAlignOutside)
+              : null,
+          color: _borderColor,
+        ),
+        child: AvatarImage(
+            //size: 32,
+            backgroundImage: _imageProvider,
+            backgroundColor:
+                _scaleConfig.useVisualIndicators && !_scaleConfig.preferBorders
+                    ? _foregroundColor
+                    : _backgroundColor,
+            child: Text(
+              shortname,
+              style: _textStyle.copyWith(
+                color: _scaleConfig.useVisualIndicators &&
+                        !_scaleConfig.preferBorders
+                    ? _backgroundColor
+                    : _foregroundColor,
+              ),
+            )));
+  }
+
+  ////////////////////////////////////////////////////////////////////////////
+  final String _name;
+  final double _size;
+  final Color _borderColor;
+  final Color _foregroundColor;
+  final Color _backgroundColor;
+  final ScaleConfig _scaleConfig;
+  final TextStyle _textStyle;
+  final ImageProvider<Object>? _imageProvider;
+}

lib/theme/views/styled_dialog.dart

@@ -50,6 +50,7 @@ class StyledDialog extends StatelessWidget {
           required Widget child}) async =>
       showDialog<T>(
           context: context,
+          useRootNavigator: false,
           builder: (context) => StyledDialog(title: title, child: child));
 
   final String title;

lib/theme/views/styled_scaffold.dart

@@ -12,15 +12,15 @@ class StyledScaffold extends StatelessWidget {
     final scale = theme.extension<ScaleScheme>()!;
     final scaleConfig = theme.extension<ScaleConfig>()!;
 
-    final scaffold = isDesktop
+    final enableBorder = !isMobileWidth(context);
-        ? clipBorder(
+
-                clipEnabled: true,
+    final scaffold = clipBorder(
-                borderEnabled: scaleConfig.useVisualIndicators,
+            clipEnabled: enableBorder,
-                borderRadius: 16 * scaleConfig.borderRadiusScale,
+            borderEnabled: scaleConfig.useVisualIndicators,
-                borderColor: scale.primaryScale.border,
+            borderRadius: 16 * scaleConfig.borderRadiusScale,
-                child: Scaffold(appBar: appBar, body: body, key: key))
+            borderColor: scale.primaryScale.border,
-            .paddingAll(32)
+            child: Scaffold(appBar: appBar, body: body, key: key))
-        : Scaffold(appBar: appBar, body: body, key: key);
+        .paddingAll(enableBorder ? 32 : 0);
 
     return GestureDetector(
         onTap: () => FocusManager.instance.primaryFocus?.unfocus(),

lib/theme/views/views.dart

@@ -1,3 +1,4 @@
+export 'avatar_widget.dart';
 export 'brightness_preferences.dart';
 export 'color_preferences.dart';
 export 'enter_password.dart';

lib/theme/views/widget_helpers.dart

@@ -41,6 +41,44 @@ extension ModalProgressExt on Widget {
   }
 }
 
+extension LabelExt on Widget {
+  Widget decoratorLabel(BuildContext context, String label,
+      {ScaleColor? scale}) {
+    final theme = Theme.of(context);
+    final scaleScheme = theme.extension<ScaleScheme>()!;
+    final scaleConfig = theme.extension<ScaleConfig>()!;
+    scale = scale ?? scaleScheme.primaryScale;
+
+    final border = scale.border;
+    final disabledBorder = scaleScheme.grayScale.border;
+    final hoverBorder = scale.hoverBorder;
+    final focusedErrorBorder = scaleScheme.errorScale.border;
+    final errorBorder = scaleScheme.errorScale.primary;
+    OutlineInputBorder makeBorder(Color color) => OutlineInputBorder(
+          borderRadius:
+              BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
+          borderSide: BorderSide(color: color),
+        );
+    OutlineInputBorder makeFocusedBorder(Color color) => OutlineInputBorder(
+          borderRadius:
+              BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
+          borderSide: BorderSide(width: 2, color: color),
+        );
+    return InputDecorator(
+        decoration: InputDecoration(
+          labelText: label,
+          floatingLabelStyle: TextStyle(color: hoverBorder),
+          border: makeBorder(border),
+          enabledBorder: makeBorder(border),
+          disabledBorder: makeBorder(disabledBorder),
+          focusedBorder: makeFocusedBorder(hoverBorder),
+          errorBorder: makeBorder(errorBorder),
+          focusedErrorBorder: makeFocusedBorder(focusedErrorBorder),
+        ),
+        child: this);
+  }
+}
+
 Widget buildProgressIndicator() => Builder(builder: (context) {
       final theme = Theme.of(context);
       final scale = theme.extension<ScaleScheme>()!;
@@ -292,6 +330,23 @@ Widget styledExpandingSliver(
       ));
 }
 
+Widget styledHeader({required BuildContext context, required Widget child}) {
+  final theme = Theme.of(context);
+  final scale = theme.extension<ScaleScheme>()!;
+  final scaleConfig = theme.extension<ScaleConfig>()!;
+  // final textTheme = theme.textTheme;
+
+  return DecoratedBox(
+      decoration: ShapeDecoration(
+          color: scale.primaryScale.border,
+          shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                  topLeft: Radius.circular(12 * scaleConfig.borderRadiusScale),
+                  topRight:
+                      Radius.circular(12 * scaleConfig.borderRadiusScale)))),
+      child: child);
+}
+
 Widget styledTitleContainer({
   required BuildContext context,
   required String title,

pubspec.lock

@@ -675,10 +675,10 @@ packages:
     dependency: "direct main"
     description:
       name: form_builder_validators
-      sha256: "475853a177bfc832ec12551f752fd0001278358a6d42d2364681ff15f48f67cf"
+      sha256: c61ed7b1deecf0e1ebe49e2fa79e3283937c5a21c7e48e3ed9856a4a14e1191a
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.1"
+    version: "11.0.0"
   freezed:
     dependency: "direct dev"
     description:
@@ -1258,11 +1258,10 @@ packages:
   searchable_listview:
     dependency: "direct main"
     description:
-      name: searchable_listview
+      path: "../Searchable-Listview"
-      sha256: "5e547f2a3f88f99a798cfe64882cfce51496d8f3177bea4829dd7bcf3fa8910d"
+      relative: true
-      url: "https://pub.dev"
+    source: path
-    source: hosted
+    version: "2.14.1"
-    version: "2.14.0"
   share_plus:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -52,7 +52,7 @@ dependencies:
   flutter_svg: ^2.0.10+1
   flutter_translate: ^4.1.0
   flutter_zoom_drawer: ^3.2.0
-  form_builder_validators: ^10.0.1
+  form_builder_validators: ^11.0.0
   freezed_annotation: ^2.4.1
   go_router: ^14.1.4
   hydrated_bloc: ^9.1.5
@@ -81,7 +81,10 @@ dependencies:
   reorderable_grid: ^1.0.10
   screenshot: ^3.0.0
   scroll_to_index: ^3.0.1
-  searchable_listview: ^2.14.0
+  searchable_listview:
+    git:
+      url: https://gitlab.com/veilid/Searchable-Listview.git
+      ref: main
   share_plus: ^9.0.0
   shared_preferences: ^2.2.3
   signal_strength_indicator: ^0.4.1
@@ -112,6 +115,8 @@ dependency_overrides:
     path: ../dart_async_tools
   bloc_advanced_tools: 
     path: ../bloc_advanced_tools
+  searchable_listview:
+    path: ../Searchable-Listview
 #   flutter_chat_ui:
 #    path: ../flutter_chat_ui