feat: update design of the Notification Settings screen

the preview button is not linked yet

_locales/en/messages.json

@@ -335,7 +335,8 @@
   "appearanceSettingsTitle": "Appearance",
   "privacySettingsTitle": "Privacy",
   "notificationsSettingsTitle": "Notifications",
-  "notificationsSettingsContent": "Notifications Content",
+  "notificationsSettingsContent": "Notification Content",
+  "notificationPreview": "Preview",
   "recoveryPhraseEmpty": "Enter your recovery phrase",
   "displayNameEmpty": "Please enter a display name",
   "members": "$count$ members",

tools/updateI18nKeysType.py

@@ -1,8 +1,6 @@
 #!/bin/python3
 
 
-# usage : ./tools/compareLocalizedStrings.py en de
-
 import re
 from os import path, listdir
 from glob import glob
@@ -23,6 +21,7 @@ with open(EN_FILE,'r') as jsonFile:
 
     stringToWrite += json.dumps(keys, sort_keys=True).replace(',', '\n  |').replace('"', '\'')[1:-1]
 
+
     stringToWrite += ';\n'
     # print(stringToWrite)
     with open(LOCALIZED_KEYS_FILE, "w") as typeFile:

ts/components/leftpane/ActionsPanel.tsx

@@ -257,7 +257,7 @@ async function fetchReleaseFromFSAndUpdateMain() {
 async function askEnablingOpengroupPruningIfNeeded() {
   if (Storage.get(SettingsKey.settingsOpengroupPruning) === undefined) {
     const setSettingsAndCloseDialog = async (valueToSetPruningTo: boolean) => {
-      window.setSettingValue(SettingsKey.settingsOpengroupPruning, valueToSetPruningTo);
+      await window.setSettingValue(SettingsKey.settingsOpengroupPruning, valueToSetPruningTo);
       await window.setOpengroupPruning(valueToSetPruningTo);
       window.inboxStore?.dispatch(updateConfirmModal(null));
     };

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -1,42 +1,99 @@
 import React from 'react';
+// tslint:disable-next-line: no-submodule-imports
+import useUpdate from 'react-use/lib/useUpdate';
+import styled from 'styled-components';
+import { SettingsKey } from '../../data/settings-key';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionRadioGroup } from '../basic/SessionRadioGroup';
-import { SessionSettingsItemWrapper } from './SessionSettingListItem';
+import { SpacerLG } from '../basic/Text';
+import { SessionSettingsItemWrapper, SessionToggleWithDescription } from './SessionSettingListItem';
+// tslint:disable: use-simple-attributes
+
+enum NOTIFICATION {
+  MESSAGE = 'message',
+  NAME = 'name',
+  COUNT = 'count',
+  OFF = 'off',
+}
+
+const StyledButtonContainer = styled.div`
+  display: flex;
+  width: min-content;
+  flex-direction: column;
+  padding-inline-start: var(--margins-lg);
+`;
 
 export const SessionNotificationGroupSettings = (props: { hasPassword: boolean | null }) => {
+  const forceUpdate = useUpdate();
+
   if (props.hasPassword === null) {
     return null;
   }
+  const initialItem =
+    window.getSettingValue(SettingsKey.settingsNotification) || NOTIFICATION.MESSAGE;
 
-  const initialItem = window.getSettingValue('notification-setting') || 'message';
+  const notificationsAreEnabled = initialItem && initialItem !== NOTIFICATION.OFF;
+
+  const onClickPreview = () => {
+    if (!notificationsAreEnabled) {
+      return;
+    }
+  };
 
   const items = [
     {
       label: window.i18n('nameAndMessage'),
-      value: 'message',
+      value: NOTIFICATION.MESSAGE,
     },
     {
       label: window.i18n('nameOnly'),
-      value: 'name',
+      value: NOTIFICATION.NAME,
     },
     {
       label: window.i18n('noNameOrMessage'),
-      value: 'count',
-    },
-    {
-      label: window.i18n('disableNotifications'),
-      value: 'off',
+      value: NOTIFICATION.COUNT,
     },
   ];
+
   return (
-    <SessionSettingsItemWrapper title={window.i18n('notificationSettingsDialog')} inline={false}>
-      <SessionRadioGroup
-        initialItem={initialItem}
-        group={'notification-setting'}
-        items={items}
-        onClick={(selectedRadioValue: string) => {
-          window.setSettingValue('notification-setting', selectedRadioValue);
+    <>
+      <SessionToggleWithDescription
+        onClickToggle={async () => {
+          await window.setSettingValue(
+            SettingsKey.settingsNotification,
+            notificationsAreEnabled ? NOTIFICATION.OFF : NOTIFICATION.MESSAGE
+          );
+          forceUpdate();
         }}
+        title={window.i18n('notificationsSettingsTitle')}
+        active={notificationsAreEnabled}
       />
-    </SessionSettingsItemWrapper>
+      {notificationsAreEnabled ? (
+        <SessionSettingsItemWrapper
+          title={window.i18n('notificationsSettingsContent')}
+          description={window.i18n('notificationSettingsDialog')}
+          inline={false}
+        >
+          <SessionRadioGroup
+            initialItem={initialItem}
+            group={SettingsKey.settingsNotification}
+            items={items}
+            onClick={async (selectedRadioValue: string) => {
+              await window.setSettingValue(SettingsKey.settingsNotification, selectedRadioValue);
+              forceUpdate();
+            }}
+          />
+          <StyledButtonContainer>
+            <SpacerLG />
+            <SessionButton
+              text={window.i18n('notificationPreview')}
+              buttonColor={SessionButtonColor.Green}
+              onClick={onClickPreview}
+              buttonType={SessionButtonType.BrandOutline}
+            />
+          </StyledButtonContainer>
+        </SessionSettingsItemWrapper>
+      ) : null}
+    </>
   );
 };

ts/components/settings/SessionSettingListItem.tsx

@@ -58,7 +58,6 @@ export const SessionSettingsItemWrapper = (props: {
   inline: boolean;
   title?: string;
   description?: string;
-  isTypingMessageItem?: boolean;
   children?: React.ReactNode;
   childrenDescription?: React.ReactNode;
 }) => {

ts/components/settings/ZoomingSessionSlider.tsx

@@ -6,9 +6,9 @@ import { SessionSettingsItemWrapper } from './SessionSettingListItem';
 
 export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) => void }) => {
   const forceUpdate = useUpdate();
-  const handleSlider = (valueToForward: number) => {
+  const handleSlider = async (valueToForward: number) => {
     props?.onSliderChange?.(valueToForward);
-    window.setSettingValue('zoom-factor-setting', valueToForward);
+    await window.setSettingValue('zoom-factor-setting', valueToForward);
     window.updateZoomFactor();
     forceUpdate();
   };

ts/components/settings/section/CategoryConversations.tsx

@@ -21,7 +21,7 @@ async function toggleCommunitiesPruning() {
     const newValue = !(await window.getOpengroupPruning());
 
     // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
-    window.setSettingValue(SettingsKey.settingsOpengroupPruning, newValue);
+    await window.setSettingValue(SettingsKey.settingsOpengroupPruning, newValue);
     await window.setOpengroupPruning(newValue);
     ToastUtils.pushRestartNeeded();
   } catch (e) {

ts/components/settings/section/CategoryPermissions.tsx

@@ -37,7 +37,7 @@ async function toggleStartInTray() {
     const newValue = !(await window.getStartInTray());
 
     // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
-    window.setSettingValue(SettingsKey.settingsStartInTray, newValue);
+    await window.setSettingValue(SettingsKey.settingsStartInTray, newValue);
     await window.setStartInTray(newValue);
     if (!newValue) {
       ToastUtils.pushRestartNeeded();
@@ -73,9 +73,9 @@ export const SettingsCategoryPermissions = (props: { hasPassword: boolean | null
           active={Boolean(window.getCallMediaPermissions())}
         />
         <SessionToggleWithDescription
-          onClickToggle={() => {
+          onClickToggle={async () => {
             const old = Boolean(window.getSettingValue(SettingsKey.settingsAutoUpdate));
-            window.setSettingValue(SettingsKey.settingsAutoUpdate, !old);
+            await window.setSettingValue(SettingsKey.settingsAutoUpdate, !old);
             forceUpdate();
           }}
           title={window.i18n('autoUpdateSettingTitle')}

ts/components/settings/section/CategoryPrivacy.tsx

@@ -28,7 +28,7 @@ function displayPasswordModal(
 
 async function toggleLinkPreviews() {
   const newValue = !window.getSettingValue(SettingsKey.settingsLinkPreview);
-  window.setSettingValue(SettingsKey.settingsLinkPreview, newValue);
+  await window.setSettingValue(SettingsKey.settingsLinkPreview, newValue);
   if (!newValue) {
     await Data.createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false });
   } else {
@@ -63,9 +63,9 @@ export const SettingsCategoryPrivacy = (props: {
     return (
       <>
         <SessionToggleWithDescription
-          onClickToggle={() => {
+          onClickToggle={async () => {
             const old = Boolean(window.getSettingValue(SettingsKey.settingsReadReceipt));
-            window.setSettingValue(SettingsKey.settingsReadReceipt, !old);
+            await window.setSettingValue(SettingsKey.settingsReadReceipt, !old);
             forceUpdate();
           }}
           title={window.i18n('readReceiptSettingTitle')}
@@ -73,9 +73,9 @@ export const SettingsCategoryPrivacy = (props: {
           active={window.getSettingValue(SettingsKey.settingsReadReceipt)}
         />
         <SessionToggleWithDescription
-          onClickToggle={() => {
+          onClickToggle={async () => {
             const old = Boolean(window.getSettingValue(SettingsKey.settingsTypingIndicator));
-            window.setSettingValue(SettingsKey.settingsTypingIndicator, !old);
+            await window.setSettingValue(SettingsKey.settingsTypingIndicator, !old);
             forceUpdate();
           }}
           title={window.i18n('typingIndicatorsSettingTitle')}

ts/data/settings-key.ts

@@ -7,6 +7,7 @@ const settingsSpellCheck = 'spell-check';
 const settingsLinkPreview = 'link-preview-setting';
 const settingsStartInTray = 'start-in-tray-setting';
 const settingsOpengroupPruning = 'prune-setting';
+const settingsNotification = 'notification-setting';
 
 export const SettingsKey = {
   settingsReadReceipt,
@@ -17,4 +18,5 @@ export const SettingsKey = {
   settingsLinkPreview,
   settingsStartInTray,
   settingsOpengroupPruning,
+  settingsNotification,
 };

ts/interactions/conversationInteractions.ts

@@ -497,8 +497,8 @@ export async function showLinkSharingConfirmationModalDialog(e: any) {
           title: window.i18n('linkPreviewsTitle'),
           message: window.i18n('linkPreviewsConfirmMessage'),
           okTheme: SessionButtonColor.Danger,
-          onClickOk: () => {
-            window.setSettingValue('link-preview-setting', true);
+          onClickOk: async () => {
+            await window.setSettingValue('link-preview-setting', true);
           },
           onClickClose: async () => {
             await Data.createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: true });

ts/mains/main_renderer.tsx

@@ -275,14 +275,6 @@ async function start() {
   const prevLaunchCount = window.getSettingValue('launch-count');
   // tslint:disable-next-line: restrict-plus-operands
   const launchCount = !prevLaunchCount ? 1 : prevLaunchCount + 1;
-  window.setSettingValue('launch-count', launchCount);
-
-  // On first launch
-  if (launchCount === 1) {
-    // Initialise default settings
-    window.setSettingValue('hide-menu-bar', true);
-    window.setSettingValue('link-preview-setting', false);
-  }
 
   window.setTheme = newTheme => {
     window.Events.setThemeSetting(newTheme);
@@ -351,6 +343,14 @@ async function start() {
       openInbox();
     }
   };
+  await window.setSettingValue('launch-count', launchCount);
+
+  // On first launch
+  if (launchCount === 1) {
+    // Initialise default settings
+    await window.setSettingValue('hide-menu-bar', true);
+    await window.setSettingValue('link-preview-setting', false);
+  }
 
   WhisperEvents.on('openInbox', () => {
     openInbox();

ts/types/LocalizerKeys.ts

@@ -22,7 +22,7 @@ export type LocalizerKeys =
   | 'timerOption_10_seconds_abbreviated'
   | 'enterDisplayName'
   | 'connectToServerFail'
-  | 'disableNotifications'
+  | 'moreInformation'
   | 'publicChatExists'
   | 'noMediaUntilApproved'
   | 'passwordViewTitle'
@@ -67,6 +67,7 @@ export type LocalizerKeys =
   | 'conversationsSettingsTitle'
   | 'tookAScreenshot'
   | 'from'
+  | 'requestsSubtitle'
   | 'thisMonth'
   | 'next'
   | 'addModerators'
@@ -85,7 +86,7 @@ export type LocalizerKeys =
   | 'windowMenuZoom'
   | 'allUsersAreRandomly...'
   | 'cameraPermissionNeeded'
-  | 'requestsSubtitle'
+  | 'notificationsSettingsContent'
   | 'ringing'
   | 'closedGroupInviteSuccessTitle'
   | 'accept'
@@ -153,7 +154,7 @@ export type LocalizerKeys =
   | 'removeAccountPasswordDescription'
   | 'establishingConnection'
   | 'noModeratorsToRemove'
-  | 'moreInformation'
+  | 'youHaveANewFriendRequest'
   | 'offline'
   | 'appearanceSettingsTitle'
   | 'mainMenuView'
@@ -223,6 +224,7 @@ export type LocalizerKeys =
   | 'timerOption_10_seconds'
   | 'helpSettingsTitle'
   | 'openMessageRequestInboxDescription'
+  | 'notificationPreview'
   | 'noteToSelf'
   | 'failedToAddAsModerator'
   | 'disabledDisappearingMessages'
@@ -414,7 +416,6 @@ export type LocalizerKeys =
   | 'youLeftTheGroup'
   | 'theyChangedTheTimer'
   | 'userBanned'
-  | 'youHaveANewFriendRequest'
   | 'addACaption'
   | 'timerOption_5_seconds_abbreviated'
   | 'removeFromModerators'

ts/util/notifications.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { debounce, last } from 'lodash';
 import { getStatus } from '../notifications';
 import { UserSetting } from '../notifications/getStatus';
 import { isMacOS } from '../OS';
@@ -41,7 +41,7 @@ let currentNotifications: Array<SessionNotification> = [];
 //   to manually close them. This introduces a minimum amount of time between calls,
 //   and batches up the quick successive update() calls we get from an incoming
 //   read sync, which might have a number of messages referenced inside of it.
-const debouncedUpdate = _.debounce(update, 2000);
+const debouncedUpdate = debounce(update, 2000);
 const fastUpdate = update;
 
 function clear() {
@@ -156,7 +156,7 @@ function update() {
     return;
   }
 
-  const lastNotification = _.last(currentNotifications);
+  const lastNotification = last(currentNotifications);
 
   if (!lastNotification) {
     return;

ts/window.d.ts

@@ -31,7 +31,7 @@ declare global {
     clipboard: any;
     dcodeIO: any;
     getSettingValue: (id: string, comparisonValue?: any) => any;
-    setSettingValue: (id: string, value: any) => void;
+    setSettingValue: (id: string, value: any) => Promise<void>;
 
     i18n: LocalizerType;
     log: any;