fix: make sure to update state when the covnersation changes

ts/components/buttons/PanelButton.tsx

@@ -30,6 +30,9 @@ export const PanelLabel = styled.p`
 `;
 
 const StyledRoundedPanelButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   overflow: hidden;
   background: var(--right-panel-item-background-color);
   border-radius: 16px;
@@ -40,7 +43,7 @@ const StyledRoundedPanelButtonGroup = styled.div`
 
 const PanelButtonContainer = styled.div`
   overflow: auto;
-  min-height: 40px;
+  min-height: 50px;
   max-height: 100%;
 `;
 
@@ -69,7 +72,7 @@ const StyledPanelButton = styled.button<{
   flex-grow: 1;
   font-family: var(--font-default);
   padding: 0px var(--margins-sm);
-  height: '50px';
+  min-height: 50px;
   width: 100%;
   transition: var(--default-duration);
   background-color: ${props =>

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { setDisappearingMessagesByConvoId } from '../../../../interactions/conversationInteractions';
@@ -94,7 +94,7 @@ const Header = (props: HeaderProps) => {
 
 type DisappearingModesProps = {
   options: Array<DisappearingMessageType>;
-  selected: DisappearingMessageType;
+  selected?: DisappearingMessageType;
   setSelected: (value: string) => void;
 };
 
@@ -140,7 +140,7 @@ const DisappearingModes = (props: DisappearingModesProps) => {
 
 type TimerOptionsProps = {
   options: Array<any>;
-  selected: number;
+  selected?: number;
   setSelected: (value: number) => void;
 };
 
@@ -173,10 +173,23 @@ export const OverlayDisappearingMessages = () => {
   const disappearingModeOptions = DisappearingMessageSetting;
   const timerOptions = useSelector(getTimerOptions).timerOptions;
 
-  const { expirationType, expireTimer } = useSelector(getSelectedConversationExpirationSettings);
+  const convoProps = useSelector(getSelectedConversationExpirationSettings);
 
-  const [modeSelected, setModeSelected] = useState(expirationType);
-  const [timeSelected, setTimeSelected] = useState(expireTimer);
+  if (!convoProps) {
+    return null;
+  }
+
+  const [modeSelected, setModeSelected] = useState(convoProps.expirationType);
+  const [timeSelected, setTimeSelected] = useState(convoProps.expireTimer);
+
+  useEffect(() => {
+    if (modeSelected !== convoProps.expirationType) {
+      setModeSelected(convoProps.expirationType);
+    }
+    if (timeSelected !== convoProps.expireTimer) {
+      setTimeSelected(convoProps.expireTimer);
+    }
+  }, [convoProps.expirationType, convoProps.expireTimer]);
 
   return (
     <StyledScrollContainer>

ts/state/selectors/conversations.ts

@@ -33,11 +33,7 @@ import { LightBoxOptions } from '../../components/conversation/SessionConversati
 import { getConversationController } from '../../session/conversations';
 import { UserUtils } from '../../session/utils';
 import { Storage } from '../../util/storage';
-import {
-  ConversationTypeEnum,
-  DisappearingMessageSetting,
-  DisappearingMessageType,
-} from '../../models/conversationAttributes';
+import { ConversationTypeEnum } from '../../models/conversationAttributes';
 
 import { MessageReactsSelectorProps } from '../../components/conversation/message/message-content/MessageReactions';
 import { filter, isEmpty, pick, sortBy } from 'lodash';
@@ -1181,10 +1177,8 @@ export const getIsSelectedConvoInitialLoadingInProgress = createSelector(
 
 export const getSelectedConversationExpirationSettings = createSelector(
   getSelectedConversation,
-  (
-    convo: ReduxConversationType | undefined
-  ): { expirationType: DisappearingMessageType; expireTimer: number } => ({
-    expirationType: convo?.expirationType || DisappearingMessageSetting[0],
-    expireTimer: convo?.expireTimer || 0,
+  (convo: ReduxConversationType | undefined) => ({
+    expirationType: convo?.expirationType,
+    expireTimer: convo?.expireTimer,
   })
 );