Add settings toggle to timestamp message breaks more frequently.

_locales/en/messages.json

@@ -220,6 +220,8 @@
   "noteToSelf": "Note to Self",
   "hideMenuBarTitle": "Hide Menu Bar",
   "hideMenuBarDescription": "Toggle system menu bar visibility",
+  "frequentTimestampsTitle": "Frequent Timestamps",
+  "frequentTimestampsDescription": "Reduce time between timestamps in conversations",
   "startConversation": "Start New Conversation",
   "invalidNumberError": "Invalid Session ID or ONS Name",
   "failedResolveOns": "Failed to resolve ONS name",

js/background.js

@@ -136,6 +136,11 @@
         window.setMenuBarVisibility(!value);
       },
 
+      getFrequentTimestamps: () => storage.get('frequent-timestamps', false),
+      setFrequentTimestamps: value => {
+        storage.put('frequent-timestamps', value);
+      },
+
       getSpellCheck: () => storage.get('spell-check', true),
       setSpellCheck: value => {
         storage.put('spell-check', value);
@@ -282,6 +287,16 @@
       window.Events.setHideMenuBar(!current);
     };
 
+    window.toggleFrequentTimestamps = () => {
+      const current = window.getSettingValue('frequent-timestamps');
+      if (current === undefined) {
+        window.Events.setFrequentTimestamps(false);
+        return;
+      }
+
+      window.Events.setFrequentTimestamps(!current);
+    };
+
     window.toggleSpellCheck = () => {
       const currentValue = window.getSettingValue('spell-check');
       // if undefined, it means 'default' so true. but we have to toggle it, so false

ts/components/settings/section/CategoryAppearance.tsx

@@ -45,10 +45,12 @@ async function toggleStartInTray() {
 }
 
 const settingsMenuBar = 'hide-menu-bar';
+const settingsFrequentTimestamps = 'frequent-timestamps';
 const settingsSpellCheck = 'spell-check';
 const settingsLinkPreview = 'link-preview-setting';
 const settingsStartInTray = 'start-in-tray-setting';
 
+// tslint:disable: max-func-body-length
 export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null }) => {
   const dispatch = useDispatch();
   const forceUpdate = useUpdate();
@@ -60,6 +62,11 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
         ? true
         : window.getSettingValue(settingsMenuBar);
 
+    const isFrequentTimestampsActive =
+      window.getSettingValue(settingsFrequentTimestamps) === undefined
+        ? true
+        : window.getSettingValue(settingsFrequentTimestamps);
+
     const isSpellCheckActive =
       window.getSettingValue(settingsSpellCheck) === undefined
         ? true
@@ -81,6 +88,15 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
             active={isHideMenuBarActive}
           />
         )}
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            window.toggleFrequentTimestamps();
+            forceUpdate();
+          }}
+          title={window.i18n('frequentTimestampsTitle')}
+          description={window.i18n('frequentTimestampsDescription')}
+          active={isFrequentTimestampsActive}
+        />
         <SessionToggleWithDescription
           onClickToggle={() => {
             window.toggleSpellCheck();

ts/state/selectors/conversations.ts

@@ -183,7 +183,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
   getSortedMessagesOfSelectedConversation,
   getFirstUnreadMessageId,
   (sortedMessages, firstUnreadId) => {
-    const maxMessagesBetweenTwoDateBreaks = 5;
+    const maxMessagesBetweenTwoDateBreaks = window.getSettingValue('frequent-timestamps') ? 0.25 : 5;
     // we want to show the date break if there is a large jump in time
     // remember that messages are sorted from the most recent to the oldest
     return sortedMessages.map((msg, index) => {

ts/types/LocalizerKeys.ts

@@ -52,6 +52,7 @@ export type LocalizerKeys =
   | 'openGroupURL'
   | 'messageRequestsDescription'
   | 'hideMenuBarDescription'
+  | 'frequentTimestampsDescription'
   | 'search'
   | 'pickClosedGroupMember'
   | 'ByUsingThisService...'
@@ -253,6 +254,7 @@ export type LocalizerKeys =
   | 'setPassword'
   | 'editMenuDeleteContact'
   | 'hideMenuBarTitle'
+  | 'frequentTimestampsTitle'
   | 'imageCaptionIconAlt'
   | 'blockAll'
   | 'sendRecoveryPhraseTitle'

ts/window.d.ts

@@ -54,6 +54,7 @@ declare global {
     getCallMediaPermissions: () => boolean;
     updateZoomFactor: () => boolean;
     toggleMenuBar: () => void;
+    toggleFrequentTimestamps: () => void;
     toggleSpellCheck: any;
     setTheme: (newTheme: string) => any;
     isDev?: () => boolean;