feat: added single mode view for closed groups and note to self

ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx

@@ -7,10 +7,16 @@ type DisappearingModesProps = {
   options: Record<DisappearingMessageConversationType, boolean>;
   selected?: DisappearingMessageConversationType;
   setSelected: (value: string) => void;
+  hasOnlyOneMode?: boolean;
 };
 
 export const DisappearingModes = (props: DisappearingModesProps) => {
-  const { options, selected, setSelected } = props;
+  const { options, selected, setSelected, hasOnlyOneMode } = props;
+
+  if (hasOnlyOneMode) {
+    return null;
+  }
+
   return (
     <>
       <PanelLabel>{window.i18n('disappearingMessagesModeLabel')}</PanelLabel>

ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx

@@ -57,6 +57,14 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
       : getSelectedConversationExpirationModesWithLegacy
   );
 
+  // NOTE if there is only 'off' and one disappearing message mode then we trigger single mode
+  const singleMode =
+    disappearingModeOptions['off'] !== undefined &&
+    Object.keys(disappearingModeOptions).length === 2
+      ? Object.keys(disappearingModeOptions)[1]
+      : undefined;
+  const hasOnlyOneMode = Boolean(singleMode && singleMode.length > 0);
+
   const convoProps = useSelector(getSelectedConversationExpirationSettings);
 
   if (!convoProps) {
@@ -75,7 +83,27 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
   );
 
   // TODO verify that this if fine compared to updating in the useEffect
-  const timerOptions = useTimerOptionsByMode(modeSelected);
+  const timerOptions = useTimerOptionsByMode(modeSelected, hasOnlyOneMode);
+
+  const handleSetMode = async () => {
+    if (hasOnlyOneMode) {
+      if (selectedConversationKey && singleMode) {
+        await setDisappearingMessagesByConvoId(
+          selectedConversationKey,
+          timeSelected === 0 ? 'off' : singleMode,
+          timeSelected
+        );
+        dispatch(closeRightPanel());
+        dispatch(resetRightOverlayMode());
+      }
+    } else {
+      if (selectedConversationKey && modeSelected && timeSelected) {
+        await setDisappearingMessagesByConvoId(selectedConversationKey, modeSelected, timeSelected);
+        dispatch(closeRightPanel());
+        dispatch(resetRightOverlayMode());
+      }
+    }
+  };
 
   useEffect(() => {
     if (modeSelected !== convoProps.expirationType) {
@@ -91,21 +119,35 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
       <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
         <Header
           title={window.i18n('disappearingMessages')}
-          subtitle={window.i18n('settingAppliesToEveryone')}
+          subtitle={
+            singleMode === 'deleteAfterRead'
+              ? window.i18n('disappearingMessagesModeAfterReadSubtitle')
+              : singleMode === 'deleteAfterSend'
+              ? window.i18n('disappearingMessagesModeAfterSendSubtitle')
+              : window.i18n('settingAppliesToEveryone')
+          }
         />
         <DisappearingModes
           options={disappearingModeOptions}
           selected={modeSelected}
           setSelected={setModeSelected}
+          hasOnlyOneMode={hasOnlyOneMode}
         />
-        {modeSelected !== 'off' && (
+        {(hasOnlyOneMode || modeSelected !== 'off') && (
           <>
-            <SpacerLG />
+            {!hasOnlyOneMode && <SpacerLG />}
             <TimeOptions
               options={timerOptions}
               selected={timeSelected}
               setSelected={setTimeSelected}
-              disabled={modeSelected ? disappearingModeOptions[modeSelected] : undefined}
+              hasOnlyOneMode={hasOnlyOneMode}
+              disabled={
+                singleMode
+                  ? disappearingModeOptions[singleMode]
+                  : modeSelected
+                  ? disappearingModeOptions[modeSelected]
+                  : undefined
+              }
             />
           </>
         )}
@@ -120,18 +162,14 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
           </>
         )}
         <SessionButton
-          onClick={async () => {
+          onClick={handleSetMode}
-            if (selectedConversationKey && modeSelected && timeSelected) {
+          disabled={
-              await setDisappearingMessagesByConvoId(
+            singleMode
-                selectedConversationKey,
+              ? disappearingModeOptions[singleMode]
-                modeSelected,
+              : modeSelected
-                timeSelected
+              ? disappearingModeOptions[modeSelected]
-              );
+              : undefined
-              dispatch(closeRightPanel());
+          }
-              dispatch(resetRightOverlayMode());
-            }
-          }}
-          disabled={modeSelected ? disappearingModeOptions[modeSelected] : undefined}
         >
           {window.i18n('set')}
         </SessionButton>

ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx

@@ -8,11 +8,12 @@ type TimerOptionsProps = {
   options: TimerOptionsArray | null;
   selected?: number;
   setSelected: (value: number) => void;
+  hasOnlyOneMode?: boolean;
   disabled?: boolean;
 };
 
 export const TimeOptions = (props: TimerOptionsProps) => {
-  const { options, selected, setSelected, disabled } = props;
+  const { options, selected, setSelected, hasOnlyOneMode, disabled } = props;
 
   if (!options || isEmpty(options)) {
     return null;
@@ -20,21 +21,23 @@ export const TimeOptions = (props: TimerOptionsProps) => {
 
   return (
     <>
-      <PanelLabel>{window.i18n('timer')}</PanelLabel>
+      {!hasOnlyOneMode && <PanelLabel>{window.i18n('timer')}</PanelLabel>}
       <PanelButtonGroup>
-        {options.map((option: any) => (
+        {options.map((option: any) => {
-          <PanelRadioButton
+          return (
-            key={option.name}
+            <PanelRadioButton
-            text={option.name}
+              key={option.name}
-            value={option.name}
+              text={option.name}
-            isSelected={selected === option.value}
+              value={option.name}
-            onSelect={() => {
+              isSelected={selected === option.value}
-              setSelected(option.value);
+              onSelect={() => {
-            }}
+                setSelected(option.value);
-            noBackgroundColor={true}
+              }}
-            disabled={disabled}
+              noBackgroundColor={true}
-          />
+              disabled={disabled}
-        ))}
+            />
+          );
+        })}
       </PanelButtonGroup>
     </>
   );

ts/hooks/useParamSelector.ts

@@ -185,7 +185,7 @@ export function useMessageReactsPropsById(messageId?: string) {
 }
 
 // TODO remove 10 seconds timer
-export function useTimerOptionsByMode(disappearingMessageMode?: string) {
+export function useTimerOptionsByMode(disappearingMessageMode?: string, hasOnlyOneMode?: boolean) {
   return useSelector((state: StateType) => {
     const options = state.timerOptions.timerOptions;
 
@@ -194,6 +194,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) {
       case 'legacy':
         return options.filter(option => {
           return (
+            (hasOnlyOneMode && option.value === 0) ||
             option.value === 5 || // 5 seconds
             option.value === 10 || // 10 seconds
             option.value === 30 || // 30 seconds
@@ -210,6 +211,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) {
       case 'deleteAfterSend':
         return options.filter(option => {
           return (
+            (hasOnlyOneMode && option.value === 0) ||
             option.value === 10 || // 10 seconds (for development)
             option.value === 30 || // 30 seconds (for development)
             option.value === 60 || // 1 minute (for testing)
@@ -222,6 +224,7 @@ export function useTimerOptionsByMode(disappearingMessageMode?: string) {
       case 'deleteAfterRead':
         return options.filter(option => {
           return (
+            (hasOnlyOneMode && option.value === 0) ||
             option.value === 10 || // 10 seconds (for development)
             option.value === 30 || // 30 seconds (for development)
             option.value === 60 || // 1 minute (for testing)