fix: add NoticeBanner showing when legacy config message received

_locales/en/messages.json

@@ -490,6 +490,7 @@
   "noMessagesInNoteToSelf": "You have no messages in <b>$name$</b>.",
   "noMessagesInEverythingElse": "You have no messages from <b>$name$</b>. Send a message to start the conversation!",
   "hideBanner": "Hide",
+  "someOfYourDeviceUseOutdatedVersion": "Some of your devices are using outdated versions. Syncing may be unreliable until they are updated.",
   "openMessageRequestInboxDescription": "View your Message Request inbox",
   "clearAllReactions": "Are you sure you want to clear all $emoji$ ?",
   "expandedReactionsText": "Show Less",

stylesheets/_index.scss

@@ -6,6 +6,7 @@
 
 .inbox.index {
   display: flex;
+  flex-direction: column;
   background-color: var(--background-primary-color);
 }
 
@@ -64,9 +65,6 @@
   flex-grow: 1;
   display: flex;
 }
-.conversation.placeholder {
-  height: 100vh;
-}
 .left-pane-wrapper {
   flex: 1;
 }

stylesheets/_session.scss

@@ -525,7 +525,7 @@ label {
 
 .session-settings {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background-color: var(--background-secondary-color);

stylesheets/_session_conversation.scss

@@ -82,6 +82,7 @@
   display: flex;
   flex-direction: column;
   max-width: calc(100vw - 380px);
+  height: 100%;
 
   .selection-mode {
     .messages-container > *:not(.message-selected) {

stylesheets/_session_left_pane.scss

@@ -70,14 +70,14 @@ $session-compose-margin: 20px;
 
 .module-left-pane {
   position: relative;
-  height: 100vh;
+  height: 100%;
   flex-shrink: 0;
   border-left: 1px solid var(--border-color);
   border-right: 1px solid var(--border-color);
 
   &-session {
     display: flex;
-    height: 100vh;
+    height: 100%;
   }
 
   &__header {
@@ -143,6 +143,8 @@ $session-compose-margin: 20px;
 
 .conversation.placeholder {
   margin: auto;
+  height: 100%;
+
   .container {
     display: flex;
     height: 100%;

ts/components/NoticeBanner.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex } from './basic/Flex';
+import { SessionIconButton } from './icon';
+
+const StyledNoticeBanner = styled(Flex)`
+  position: relative;
+  background-color: var(--primary-color);
+  color: var(--background-primary-color);
+  font-size: var(--font-size-lg);
+  padding: var(--margins-xs) var(--margins-sm);
+  text-align: center;
+  flex-shrink: 0;
+  .session-icon-button {
+    position: absolute;
+    right: var(--margins-sm);
+  }
+`;
+
+const StyledText = styled.span`
+  margin-right: var(--margins-lg);
+`;
+
+type NoticeBannerProps = {
+  text: string;
+  dismissCallback: () => void;
+};
+
+export const NoticeBanner = (props: NoticeBannerProps) => {
+  const { text, dismissCallback } = props;
+
+  return (
+    <StyledNoticeBanner
+      container={true}
+      flexDirection={'row'}
+      justifyContent={'center'}
+      alignItems={'center'}
+    >
+      <StyledText>{text}</StyledText>
+      <SessionIconButton
+        iconType="exit"
+        iconColor="inherit"
+        iconSize="small"
+        onClick={event => {
+          event?.preventDefault();
+          dismissCallback();
+        }}
+      />
+    </StyledNoticeBanner>
+  );
+};

ts/components/SessionInboxView.tsx

@@ -32,6 +32,7 @@ import { SessionMainPanel } from './SessionMainPanel';
 import moment from 'moment';
 import styled from 'styled-components';
 import { initialSogsRoomInfoState } from '../state/ducks/sogsRoomInfo';
+import { Storage } from '../util/storage';
 
 // Default to the locale from env. It will be overridden if moment
 // does not recognize it with what moment knows which is the closest.
@@ -42,6 +43,10 @@ moment.locale((window.i18n as any).getLocale());
 // Workaround: A react component's required properties are filtering up through connect()
 //   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
 import useUpdate from 'react-use/lib/useUpdate';
+import useInterval from 'react-use/lib/useInterval';
+import { SettingsKey } from '../data/settings-key';
+import { NoticeBanner } from './NoticeBanner';
+import { Flex } from './basic/Flex';
 
 const StyledGutter = styled.div`
   width: 380px !important;
@@ -89,6 +94,36 @@ function setupLeftPane(forceUpdateInboxComponent: () => void) {
   forceUpdateInboxComponent();
 }
 
+const SomeDeviceOutdatedSyncingNotice = () => {
+  const forceUpdate = useUpdate();
+  const isShown = Boolean(window.getSettingValue(SettingsKey.someDeviceOutdatedSyncing));
+
+  // it would be nice to get the settings into a redux slice in addition to their Storage location and keep them in sync.
+  // So we could just use a selector here.
+  useInterval(() => {
+    const shouldBeShown = Storage.get(SettingsKey.someDeviceOutdatedSyncing);
+
+    if (!isShown && shouldBeShown) {
+      forceUpdate();
+    }
+  }, 1000);
+
+  const dismiss = async () => {
+    await window.setSettingValue(SettingsKey.someDeviceOutdatedSyncing, false);
+    forceUpdate();
+  };
+
+  if (!isShown) {
+    return null;
+  }
+  return (
+    <NoticeBanner
+      text={window.i18n('someOfYourDeviceUseOutdatedVersion')}
+      dismissCallback={dismiss}
+    />
+  );
+};
+
 export const SessionInboxView = () => {
   const update = useUpdate();
   // run only on mount
@@ -105,10 +140,13 @@ export const SessionInboxView = () => {
     <div className="inbox index">
       <Provider store={window.inboxStore}>
         <PersistGate loading={null} persistor={persistor}>
-          <StyledGutter>
-            <LeftPane />
-          </StyledGutter>
-          <SessionMainPanel />
+          <SomeDeviceOutdatedSyncingNotice />
+          <Flex container={true} height="0" flexShrink={100} flexGrow={1}>
+            <StyledGutter>
+              <LeftPane />
+            </StyledGutter>
+            <SessionMainPanel />
+          </Flex>
         </PersistGate>
       </Provider>
     </div>

ts/components/leftpane/ActionsPanel.tsx

@@ -16,8 +16,8 @@ import useTimeoutFn from 'react-use/lib/useTimeoutFn';
 import { clearSearch } from '../../state/ducks/search';
 import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../state/ducks/section';
 import {
-  getOurPrimaryConversation,
   getGlobalUnreadMessageCount,
+  getOurPrimaryConversation,
 } from '../../state/selectors/conversations';
 import { getFocusedSection } from '../../state/selectors/section';
 import { getOurNumber } from '../../state/selectors/user';

ts/data/settings-key.ts

@@ -9,6 +9,7 @@ const settingsStartInTray = 'start-in-tray-setting';
 const settingsOpengroupPruning = 'prune-setting';
 const settingsNotification = 'notification-setting';
 const settingsAudioNotification = 'audio-notification-setting';
+const someDeviceOutdatedSyncing = 'some-device-outdated-syncing';
 
 export const SettingsKey = {
   settingsReadReceipt,
@@ -21,6 +22,7 @@ export const SettingsKey = {
   settingsOpengroupPruning,
   settingsNotification,
   settingsAudioNotification,
+  someDeviceOutdatedSyncing,
 };
 
 export const KNOWN_BLINDED_KEYS_ITEM = 'KNOWN_BLINDED_KEYS_ITEM';

ts/receiver/configMessage.ts

@@ -41,6 +41,7 @@ import { addKeyPairToCacheAndDBIfNeeded, handleNewClosedGroup } from './closedGr
 import { HexKeyPair } from './keypairs';
 import { queueAllCachedFromSource } from './receiver';
 import { EnvelopePlus } from './types';
+import { SettingsKey } from '../data/settings-key';
 
 function groupByVariant(
   incomingConfigs: Array<IncomingMessage<SignalService.ISharedConfigMessage>>
@@ -873,6 +874,7 @@ async function handleConfigurationMessageLegacy(
     window?.log?.info(
       'useSharedUtilForUserConfig is set, not handling config messages with "handleConfigurationMessageLegacy()"'
     );
+    window.setSettingValue(SettingsKey.someDeviceOutdatedSyncing, true);
     await removeFromCache(envelope);
     return;
   }

ts/types/LocalizerKeys.ts

@@ -489,6 +489,7 @@ export type LocalizerKeys =
   | 'noMessagesInNoteToSelf'
   | 'noMessagesInEverythingElse'
   | 'hideBanner'
+  | 'someOfYourDeviceUseOutdatedVersion'
   | 'openMessageRequestInboxDescription'
   | 'clearAllReactions'
   | 'expandedReactionsText'