feat: initial work for set display picture modal done

still need to do logic and handle multiple modals on screen

_locales/en/messages.json

@@ -507,5 +507,7 @@
   "reactionPopupThree": "$name$, $name2$ & $name3$",
   "reactionPopupMany": "$name$, $name2$, $name3$ &",
   "reactionListCountSingular": "And $otherSingular$ has reacted <span>$emoji$</span> to this message",
-  "reactionListCountPlural": "And $otherPlural$ have reacted <span>$emoji$</span> to this message"
+  "reactionListCountPlural": "And $otherPlural$ have reacted <span>$emoji$</span> to this message",
+  "setDisplayPicture": "Set Display Picture",
+  "upload": "Upload"
 }

ts/components/dialog/DisplayPictureModal.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement } from 'react';
+import { SessionWrapperModal } from '../SessionWrapperModal';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { Avatar, AvatarSize } from '../avatar/Avatar';
+import { SpacerLG } from '../basic/Text';
+import { UserUtils } from '../../session/utils';
+import { useDispatch } from 'react-redux';
+import { updateDisplayPictureModel } from '../../state/ducks/modalDialog';
+
+type Props = {};
+
+export const DisplayPictureModal = (props: Props): ReactElement => {
+  const {} = props;
+  const dispatch = useDispatch();
+
+  const onClickClose = () => {
+    dispatch(updateDisplayPictureModel(null));
+  };
+
+  return (
+    <SessionWrapperModal
+      title={window.i18n('setDisplayPicture')}
+      onClose={onClickClose}
+      showHeader={true}
+      showExitIcon={true}
+    >
+      <div className="avatar-center">
+        <div className="avatar-center-inner">
+          <Avatar size={AvatarSize.XL} pubkey={UserUtils.getOurPubKeyStrFromCache()} />
+        </div>
+      </div>
+
+      <SpacerLG />
+
+      <div className="session-modal__button-group">
+        <SessionButton
+          text={window.i18n('upload')}
+          buttonType={SessionButtonType.Simple}
+          onClick={() => {}}
+        />
+        <SessionButton
+          text={window.i18n('remove')}
+          buttonColor={SessionButtonColor.Danger}
+          buttonType={SessionButtonType.Simple}
+          onClick={() => {}}
+        />
+      </div>
+    </SessionWrapperModal>
+  );
+};

ts/components/dialog/EditProfileDialog.tsx

@@ -5,12 +5,10 @@ import { Avatar, AvatarSize } from '../avatar/Avatar';
 
 import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
 import { YourSessionIDPill, YourSessionIDSelectable } from '../basic/YourSessionIDPill';
-import styled from 'styled-components';
-import { uploadOurAvatar } from '../../interactions/conversationInteractions';
-import { ConversationTypeEnum } from '../../models/conversationAttributes';
-import { MAX_USERNAME_BYTES } from '../../session/constants';
+import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
+
 import { getConversationController } from '../../session/conversations';
-import { editProfileModal } from '../../state/ducks/modalDialog';
+import { editProfileModal, updateDisplayPictureModel } from '../../state/ducks/modalDialog';
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { saveQRCode } from '../../util/saveQRCode';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
@@ -21,6 +19,7 @@ import { SessionIconButton } from '../icon';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { useOurConversationUsername } from '../../hooks/useParamSelector';
 import { useOurAvatarPath } from '../../hooks/useParamSelector';
+import { useDispatch } from 'react-redux';
 
 const handleSaveQRCode = (event: MouseEvent) => {
   event.preventDefault();
@@ -110,6 +109,8 @@ type ProfileHeaderProps = ProfileAvatarProps & {
 const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
   const { newAvatarObjectUrl, oldAvatarPath, profileName, ourId, fireInputEvent, setMode } = props;
 
+  const dispatch = useDispatch();
+
   return (
     <div className="avatar-center">
       <div className="avatar-center-inner">
@@ -123,7 +124,8 @@ const ProfileHeader = (props: ProfileHeaderProps): ReactElement => {
           className="image-upload-section"
           role="button"
           onClick={async () => {
-            void fireInputEvent();
+            // void fireInputEvent();
+            dispatch(updateDisplayPictureModel({}));
           }}
           data-testid="image-upload-section"
         />

ts/components/dialog/ModalContainer.tsx

@@ -7,6 +7,7 @@ import {
   getChangeNickNameDialog,
   getConfirmModal,
   getDeleteAccountModalState,
+  getDisplayPictureModalState,
   getEditProfileDialog,
   getInviteContactModal,
   getOnionPathDialog,
@@ -36,6 +37,7 @@ import { SessionNicknameDialog } from './SessionNicknameDialog';
 import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog';
 import { ReactListModal } from './ReactListModal';
 import { ReactClearAllModal } from './ReactClearAllModal';
+import { DisplayPictureModal } from './DisplayPictureModal';
 
 export const ModalContainer = () => {
   const confirmModalState = useSelector(getConfirmModal);
@@ -55,6 +57,7 @@ export const ModalContainer = () => {
   const banOrUnbanUserModalState = useSelector(getBanOrUnbanUserModalState);
   const reactListModalState = useSelector(getReactListDialog);
   const reactClearAllModalState = useSelector(getReactClearAllDialog);
+  const DisplayPictureModalState = useSelector(getDisplayPictureModalState);
 
   return (
     <>
@@ -79,6 +82,7 @@ export const ModalContainer = () => {
       {confirmModalState && <SessionConfirm {...confirmModalState} />}
       {reactListModalState && <ReactListModal {...reactListModalState} />}
       {reactClearAllModalState && <ReactClearAllModal {...reactClearAllModalState} />}
+      {DisplayPictureModalState && <DisplayPictureModal {...DisplayPictureModalState} />}
     </>
   );
 };

ts/state/ducks/modalDialog.tsx

@@ -34,6 +34,8 @@ export type ReactModalsState = {
   messageId: string;
 } | null;
 
+export type DisplayPictureModalState = {} | null;
+
 export type ModalState = {
   confirmModal: ConfirmModalState;
   inviteContactModal: InviteContactModalState;
@@ -52,6 +54,7 @@ export type ModalState = {
   deleteAccountModal: DeleteAccountModalState;
   reactListModalState: ReactModalsState;
   reactClearAllModalState: ReactModalsState;
+  displayPictureModalState: DisplayPictureModalState;
 };
 
 export const initialModalState: ModalState = {
@@ -72,6 +75,7 @@ export const initialModalState: ModalState = {
   deleteAccountModal: null,
   reactListModalState: null,
   reactClearAllModalState: null,
+  displayPictureModalState: null,
 };
 
 const ModalSlice = createSlice({
@@ -129,6 +133,9 @@ const ModalSlice = createSlice({
     updateReactClearAllModal(state, action: PayloadAction<ReactModalsState>) {
       return { ...state, reactClearAllModalState: action.payload };
     },
+    updateDisplayPictureModel(state, action: PayloadAction<DisplayPictureModalState>) {
+      return { ...state, displayPictureModalState: action.payload };
+    },
   },
 });
 
@@ -151,5 +158,6 @@ export const {
   updateBanOrUnbanUserModal,
   updateReactListModal,
   updateReactClearAllModal,
+  updateDisplayPictureModel,
 } = actions;
 export const modalReducer = reducer;

ts/state/selectors/modal.ts

@@ -8,6 +8,7 @@ import {
   ChangeNickNameModalState,
   ConfirmModalState,
   DeleteAccountModalState,
+  DisplayPictureModalState,
   EditProfileModalState,
   InviteContactModalState,
   ModalState,
@@ -109,3 +110,8 @@ export const getReactClearAllDialog = createSelector(
   getModal,
   (state: ModalState): ReactModalsState => state.reactClearAllModalState
 );
+
+export const getDisplayPictureModalState = createSelector(
+  getModal,
+  (state: ModalState): DisplayPictureModalState => state.displayPictureModalState
+);

ts/types/LocalizerKeys.ts

@@ -506,5 +506,33 @@ export type LocalizerKeys =
   | 'reactionPopupTwo'
   | 'reactionPopupThree'
   | 'reactionPopupMany'
-  | 'reactionListCountSingular'
-  | 'reactionListCountPlural';
+  | 'timerSetTo'
+  | 'iAmSure'
+  | 'primaryColorRed'
+  | 'selectMessage'
+  | 'enterAnOpenGroupURL'
+  | 'delete'
+  | 'changePasswordInvalid'
+  | 'themesSettingTitle'
+  | 'timerOption_6_hours'
+  | 'confirmPassword'
+  | 'downloadAttachment'
+  | 'trimDatabaseDescription'
+  | 'showUserDetails'
+  | 'titleIsNow'
+  | 'removePasswordToastDescription'
+  | 'recoveryPhrase'
+  | 'deleteAccountFromLogin'
+  | 'newMessages'
+  | 'you'
+  | 'pruneSettingTitle'
+  | 'unbanUser'
+  | 'notificationForConvo_mentions_only'
+  | 'trustThisContactDialogDescription'
+  | 'unknownCountry'
+  | 'searchFor...'
+  | 'displayNameTooLong'
+  | 'joinedTheGroup'
+  | 'editGroupName'
+  | 'reportIssue'
+  | 'setDisplayPicture';