profile: Add toggle switch for "Invisible mode"

chrisbobbe · chrisbobbe · commit b67ac626682c · 2025-06-26T13:49:28.000-07:00
I think we'll get an updated design for the profile page soon, but pending that, this is our current thinking for how "Invisible mode" should look: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/presence.3A.20invisible.20mode/near/2204336 Fixes: #1578
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -765,6 +765,18 @@
   "@yesterday": {
     "description": "Term to use to reference the previous day."
   },
+  "invisibleMode": "Invisible mode",
+  "@invisibleMode": {
+    "description": "Label for the 'Invisible mode' switch on the profile page."
+  },
+  "turnOnInvisibleModeErrorTitle": "Error turning on invisible mode. Please try again.",
+  "@turnOnInvisibleModeErrorTitle": {
+    "description": "Error title when turning on invisible mode failed."
+  },
+  "turnOffInvisibleModeErrorTitle": "Error turning off invisible mode. Please try again.",
+  "@turnOffInvisibleModeErrorTitle": {
+    "description": "Error title when turning off invisible mode failed."
+  },
   "userRoleOwner": "Owner",
   "@userRoleOwner": {
     "description": "Label for UserRole.owner"
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1161,6 +1161,24 @@ abstract class ZulipLocalizations {
   /// **'Yesterday'**
   String get yesterday;
 
+  /// Label for the 'Invisible mode' switch on the profile page.
+  ///
+  /// In en, this message translates to:
+  /// **'Invisible mode'**
+  String get invisibleMode;
+
+  /// Error title when turning on invisible mode failed.
+  ///
+  /// In en, this message translates to:
+  /// **'Error turning on invisible mode. Please try again.'**
+  String get turnOnInvisibleModeErrorTitle;
+
+  /// Error title when turning off invisible mode failed.
+  ///
+  /// In en, this message translates to:
+  /// **'Error turning off invisible mode. Please try again.'**
+  String get turnOffInvisibleModeErrorTitle;
+
   /// Label for UserRole.owner
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -629,6 +629,17 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get yesterday => 'Yesterday';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Owner';
 
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -650,6 +650,17 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   @override
   String get yesterday => 'Gestern';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Besitzer';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -629,6 +629,17 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get yesterday => 'Yesterday';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Owner';
 
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -644,6 +644,17 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   @override
   String get yesterday => 'Ieri';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Proprietario';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -629,6 +629,17 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get yesterday => 'Yesterday';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'オーナー';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -629,6 +629,17 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get yesterday => 'Yesterday';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Owner';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -640,6 +640,17 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get yesterday => 'Wczoraj';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Właściciel';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -643,6 +643,17 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get yesterday => 'Вчера';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Владелец';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -631,6 +631,17 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get yesterday => 'Včera';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Majiteľ';
 
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -655,6 +655,17 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   @override
   String get yesterday => 'Včeraj';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Lastnik';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -643,6 +643,17 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   @override
   String get yesterday => 'Учора';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Власник';
 
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -629,6 +629,17 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   @override
   String get yesterday => 'Yesterday';
 
+  @override
+  String get invisibleMode => 'Invisible mode';
+
+  @override
+  String get turnOnInvisibleModeErrorTitle =>
+      'Error turning on invisible mode. Please try again.';
+
+  @override
+  String get turnOffInvisibleModeErrorTitle =>
+      'Error turning off invisible mode. Please try again.';
+
   @override
   String get userRoleOwner => 'Owner';
 
diff --git a/lib/widgets/button.dart b/lib/widgets/button.dart
@@ -318,7 +318,7 @@ class Toggle extends StatelessWidget {
     // Figma has this (grey/400) in both light and dark mode.
     final inactiveColor = Color(0xff9194a3);
 
-    // TODO(upstream):
+    // TODO(#1636):
     //   All of these just need _SwitchConfig to be exposed,
     //   and there's an upstream issue for that:
     //     https://github.com/flutter/flutter/issues/131478
@@ -350,8 +350,10 @@ class Toggle extends StatelessWidget {
         ~WidgetState.selected: inactiveColor,
       }),
       trackOutlineWidth: WidgetStateProperty<double>.fromMap({
-        WidgetState.selected: 2,
-        ~WidgetState.selected: 1,
+        // The outline is effectively painted with strokeAlignCenter:
+        //   https://api.flutter.dev/flutter/painting/BorderSide/strokeAlignCenter-constant.html
+        WidgetState.selected: 2 * 2,
+        ~WidgetState.selected: 1 * 2,
       }),
       overlayColor: WidgetStatePropertyAll(Colors.transparent),
       materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
diff --git a/lib/widgets/profile.dart b/lib/widgets/profile.dart
@@ -3,13 +3,17 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 
 import '../api/model/model.dart';
+import '../api/route/settings.dart';
 import '../generated/l10n/zulip_localizations.dart';
+import '../log.dart';
 import '../model/content.dart';
 import '../model/narrow.dart';
 import 'app_bar.dart';
+import 'button.dart';
 import 'content.dart';
 import 'message_list.dart';
 import 'page.dart';
+import 'per_account_settings.dart';
 import 'store.dart';
 import 'text.dart';
 
@@ -80,6 +84,28 @@ class ProfilePage extends StatelessWidget {
       // TODO(#196) render active status
       // TODO(#292) render user local time
 
+      if (!store.realmPresenceDisabled && userId == store.selfUserId) ...[
+        const SizedBox(height: 16),
+        MenuButtonsShape(buttons: [
+          // `value: true` means invisible mode is on,
+          // i.e., that presenceEnabled is false.
+          PerAccountSettingBuilder<bool>(
+            findValueInStore: (store) => !store.userSettings.presenceEnabled,
+            sendValueToServer: (value) => updateSettings(store.connection,
+              newSettings: {UserSettingName.presenceEnabled: !value}),
+            // TODO(#741) interpret API errors for user
+            onError: (e, requestedValue) => reportErrorToUserBriefly(
+              requestedValue
+                ? zulipLocalizations.turnOnInvisibleModeErrorTitle
+                : zulipLocalizations.turnOffInvisibleModeErrorTitle),
+            builder: (value, handleRequestNewValue) => MenuButton(
+              label: zulipLocalizations.invisibleMode,
+              onPressed: () => handleRequestNewValue(!value),
+              beforeIcon: Toggle(value: value, onChanged: handleRequestNewValue))),
+        ]),
+        const SizedBox(height: 16),
+      ],
+
       _ProfileDataTable(profileData: user.profileData),
       const SizedBox(height: 16),
       FilledButton.icon(
