feat: integrate show notification button option (#5302)

frontend/appflowy_flutter/lib/core/config/kv_keys.dart

@@ -65,6 +65,11 @@ class KVKeys {
   /// {'feature_flag_1': true, 'feature_flag_2': false}
   static const String featureFlag = 'featureFlag';
 
+  /// The key for saving show notification icon option
+  ///
+  /// The value is a boolean string
+  static const String showNotificationIcon = 'showNotificationIcon';
+
   /// The key for saving the last opened workspace id
   ///
   /// The workspace id is a string.

frontend/appflowy_flutter/lib/workspace/application/settings/notifications/notification_settings_cubit.dart

@@ -1,5 +1,8 @@
 import 'dart:async';
 
+import 'package:appflowy/core/config/kv.dart';
+import 'package:appflowy/core/config/kv_keys.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/user_settings_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_setting.pb.dart';
@@ -10,23 +13,30 @@ part 'notification_settings_cubit.freezed.dart';
 
 class NotificationSettingsCubit extends Cubit<NotificationSettingsState> {
   NotificationSettingsCubit() : super(NotificationSettingsState.initial()) {
-    UserSettingsBackendService()
-        .getNotificationSettings()
-        .then((notificationSettings) {
-      _notificationSettings = notificationSettings;
-      emit(
-        state.copyWith(
-          isNotificationsEnabled: _notificationSettings.notificationsEnabled,
-        ),
-      );
-      _initCompleter.complete();
-    });
+    _initialize();
   }
 
   final Completer<void> _initCompleter = Completer();
 
   late final NotificationSettingsPB _notificationSettings;
 
+  Future<void> _initialize() async {
+    _notificationSettings =
+        await UserSettingsBackendService().getNotificationSettings();
+
+    final showNotificationSetting = await getIt<KeyValueStorage>()
+        .getWithFormat(KVKeys.showNotificationIcon, (v) => bool.parse(v));
+
+    emit(
+      state.copyWith(
+        isNotificationsEnabled: _notificationSettings.notificationsEnabled,
+        isShowNotificationsIconEnabled: showNotificationSetting ?? true,
+      ),
+    );
+
+    _initCompleter.complete();
+  }
+
   Future<void> toggleNotificationsEnabled() async {
     await _initCompleter.future;
 
@@ -41,9 +51,24 @@ class NotificationSettingsCubit extends Cubit<NotificationSettingsState> {
     await _saveNotificationSettings();
   }
 
+  Future<void> toogleShowNotificationIconEnabled() async {
+    await _initCompleter.future;
+
+    emit(
+      state.copyWith(
+        isShowNotificationsIconEnabled: !state.isShowNotificationsIconEnabled,
+      ),
+    );
+  }
+
   Future<void> _saveNotificationSettings() async {
     await _initCompleter.future;
 
+    await getIt<KeyValueStorage>().set(
+      KVKeys.showNotificationIcon,
+      state.isShowNotificationsIconEnabled.toString(),
+    );
+
     final result = await UserSettingsBackendService()
         .setNotificationSettings(_notificationSettings);
     result.fold(
@@ -59,8 +84,12 @@ class NotificationSettingsState with _$NotificationSettingsState {
 
   const factory NotificationSettingsState({
     required bool isNotificationsEnabled,
+    required bool isShowNotificationsIconEnabled,
   }) = _NotificationSettingsState;
 
   factory NotificationSettingsState.initial() =>
-      const NotificationSettingsState(isNotificationsEnabled: true);
+      const NotificationSettingsState(
+        isNotificationsEnabled: true,
+        isShowNotificationsIconEnabled: true,
+      );
 }

frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
+import 'package:appflowy/workspace/application/settings/notifications/notification_settings_cubit.dart';
 import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/notifications/notification_dialog.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -25,25 +26,35 @@ class NotificationButton extends StatelessWidget {
 
     return BlocProvider<ReminderBloc>.value(
       value: getIt<ReminderBloc>(),
-      child: BlocBuilder<ReminderBloc, ReminderState>(
-        builder: (context, state) => FlowyTooltip(
-          message: LocaleKeys.notificationHub_title.tr(),
-          child: AppFlowyPopover(
-            mutex: mutex,
-            direction: PopoverDirection.bottomWithLeftAligned,
-            constraints: const BoxConstraints(maxHeight: 500, maxWidth: 425),
-            windowPadding: EdgeInsets.zero,
-            margin: EdgeInsets.zero,
-            popupBuilder: (_) => NotificationDialog(views: views, mutex: mutex),
-            child: SizedBox.square(
-              dimension: HomeSizes.workspaceSectionHeight,
-              child: FlowyButton(
-                useIntrinsicWidth: true,
-                text: _buildNotificationIcon(context, state.hasUnreads),
-              ),
-            ),
-          ),
-        ),
+      child: BlocBuilder<NotificationSettingsCubit, NotificationSettingsState>(
+        builder: (notificationSettingsContext, notificationSettingsState) {
+          return BlocBuilder<ReminderBloc, ReminderState>(
+            builder: (context, state) => notificationSettingsState
+                    .isShowNotificationsIconEnabled
+                ? FlowyTooltip(
+                    message: LocaleKeys.notificationHub_title.tr(),
+                    child: AppFlowyPopover(
+                      mutex: mutex,
+                      direction: PopoverDirection.bottomWithLeftAligned,
+                      constraints:
+                          const BoxConstraints(maxHeight: 500, maxWidth: 425),
+                      windowPadding: EdgeInsets.zero,
+                      margin: EdgeInsets.zero,
+                      popupBuilder: (_) =>
+                          NotificationDialog(views: views, mutex: mutex),
+                      child: SizedBox.square(
+                        dimension: HomeSizes.workspaceSectionHeight,
+                        child: FlowyButton(
+                          useIntrinsicWidth: true,
+                          text:
+                              _buildNotificationIcon(context, state.hasUnreads),
+                        ),
+                      ),
+                    ),
+                  )
+                : const SizedBox.shrink(),
+          );
+        },
       ),
     );
   }

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_notifications_view.dart

@@ -33,6 +33,23 @@ class SettingsNotificationsView extends StatelessWidget {
                 ),
               ],
             ),
+            SettingListTile(
+              label: LocaleKeys
+                  .settings_notifications_showNotificationsIcon_label
+                  .tr(),
+              hint: LocaleKeys.settings_notifications_showNotificationsIcon_hint
+                  .tr(),
+              trailing: [
+                Switch(
+                  value: state.isShowNotificationsIconEnabled,
+                  splashRadius: 0,
+                  activeColor: Theme.of(context).colorScheme.primary,
+                  onChanged: (_) => context
+                      .read<NotificationSettingsCubit>()
+                      .toogleShowNotificationIconEnabled(),
+                ),
+              ],
+            ),
           ],
         );
       },

frontend/resources/translations/de-DE.json

@@ -65,7 +65,7 @@
     "alreadyHaveAnAccount": "Du hast bereits ein Konto?",
     "logIn": "Anmeldung",
     "generalError": "Etwas ist schiefgelaufen. Bitte versuche es später noch einmal",
-    "limitRateError": "Aus Sicherheitsgründen kannst du nur alle 60 Sekunden einen Authentifizierungslink anfordern",
+    "limitRateError": "Aus Sicherheitsgründen kannst du nur alle 60 Sekunden einen Authentifizierungslink anfordern"
   },
   "workspace": {
     "chooseWorkspace": "Arbeitsbereich wählen",

frontend/resources/translations/en.json

@@ -547,6 +547,10 @@
       "enableNotifications": {
         "label": "Enable notifications",
         "hint": "Turn off to stop local notifications from appearing."
+      },
+      "showNotificationsIcon": {
+        "label": "Show notifications icon",
+        "hint": "Turn off to hide notification icons in the app."
       }
     },
     "appearance": {

frontend/resources/translations/es-VE.json

@@ -64,7 +64,7 @@
     "alreadyHaveAnAccount": "¿Ya tienes cuenta?",
     "logIn": "Iniciar sesión",
     "generalError": "Algo ha salido mal. Por favor, inténtalo más tarde",
-    "limitRateError": "Por razones de seguridad, solo puedes solicitar un enlace mágico cada 60 segundos",
+    "limitRateError": "Por razones de seguridad, solo puedes solicitar un enlace mágico cada 60 segundos"
   },
   "workspace": {
     "chooseWorkspace": "Elige tu espacio de trabajo",