fix: start work on UserSettings

- moved the modal to a new name
- added the panebutton to display to the modal (but still in
  ActionsPanel for now_)

Author: Bilb

ts/components/SessionWrapperModal.tsx

@@ -230,6 +230,7 @@ export type SessionWrapperModalType = {
    * Instead of centering the modal (and having layout shifts on height change), we can use this to anchor the modal to a % from the top of the screen.
    */
   topAnchor?: ModalTopAnchor;
+  $flexGap?: string;
   style?: Omit<CSSProperties, 'maxWidth' | 'minWidth' | 'padding' | 'border'>;
 };
 
@@ -360,6 +361,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
     removeScrollbarGutter,
     onClose,
     topAnchor,
+    $flexGap,
   } = props;
 
   const [scrolled, setScrolled] = useState(false);
@@ -427,6 +429,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
                     $alignItems="center"
                     $flexDirection="column"
                     paddingInline="var(--margins-lg)" // add the padding here so that the rest of the modal isn't affected (including buttonChildren/ModalHeader)
+                    $flexGap={$flexGap}
                   >
                     {props.children}
                   </Flex>

ts/components/basic/SessionIdNotEditable.tsx

@@ -26,12 +26,14 @@ export const SessionIDNotEditable = ({
   tooltipNode,
   displayType,
   style: providedStyle = {},
+  onClick,
 }: {
   sessionId: string;
   tooltipNode: ReactNode;
   displayType: 'blinded' | '2lines' | '3lines';
   dataTestId: SessionDataTestId;
   style: CSSProperties;
+  onClick?: () => void;
 }) => {
   if (sessionId.length !== 66) {
     throw new Error('Unsupported case for SessionIDNotEditable: sessionId.length !== 66');
@@ -40,7 +42,11 @@ export const SessionIDNotEditable = ({
     throw new Error('Unsupported case for SessionIDNotEditable: sessionId is blinded');
   }
 
-  const style = tooltipNode ? { ...providedStyle, marginLeft: 'var(--margins-lg)' } : providedStyle;
+  const pointerStyle = onClick ? { cursor: 'pointer' } : {};
+
+  const style = tooltipNode
+    ? { ...providedStyle, ...pointerStyle, marginLeft: 'var(--margins-lg)' }
+    : { ...providedStyle, ...pointerStyle };
 
   if (displayType === 'blinded') {
     const shortenedSessionId = PubKey.shorten(sessionId, {
@@ -53,6 +59,7 @@ export const SessionIDNotEditable = ({
         data-testid={dataTestId}
         // Note: we want the text centered even if the tooltip is offsetting it
         style={style}
+        onClick={onClick}
       >
         {shortenedSessionId}
         {tooltipNode}
@@ -68,6 +75,7 @@ export const SessionIDNotEditable = ({
       <StyledSessionIDNotEditable
         data-testid={dataTestId} // Note: we want the text centered even if the tooltip is offsetting it
         style={style}
+        onClick={onClick}
       >
         {firstLine}
         <br />
@@ -80,7 +88,7 @@ export const SessionIDNotEditable = ({
   }
 
   return (
-    <StyledSessionIDNotEditable data-testid={dataTestId} style={style}>
+    <StyledSessionIDNotEditable data-testid={dataTestId} style={style} onClick={onClick}>
       {sessionId.slice(0, 33)}
       <br />
       {sessionId.slice(33)}

ts/components/dialog/EditProfilePictureModal.tsx

@@ -3,12 +3,12 @@ import { useDispatch } from 'react-redux';
 import type { AnyAction, Dispatch } from 'redux';
 import styled from 'styled-components';
 import { ToastUtils, UserUtils } from '../../session/utils';
-import { editProfileModal, updateEditProfilePictureModal } from '../../state/ducks/modalDialog';
+import { userSettingsModal, updateEditProfilePictureModal } from '../../state/ducks/modalDialog';
 import type { EditProfilePictureModalProps } from '../../types/ReduxTypes';
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionSpinner } from '../loading';
-import { ProfileAvatar } from './edit-profile/components';
+import { ProfileAvatar } from './user-settings/components';
 import {
   useAvatarPath,
   useConversationUsernameWithFallback,
@@ -30,7 +30,7 @@ import {
   SessionWrapperModal,
 } from '../SessionWrapperModal';
 import { useIsProAvailable } from '../../hooks/useIsProAvailable';
-import { SpacerLG } from '../basic/Text';
+import { SpacerLG, SpacerSM } from '../basic/Text';
 import {
   SessionProInfoVariant,
   useShowSessionProInfoDialogCbWithVariant,
@@ -39,7 +39,8 @@ import { AvatarSize } from '../avatar/Avatar';
 import { ProIconButton } from '../buttons/ProButton';
 import { useProBadgeOnClickCb } from '../menuAndSettingsHooks/useProBadgeOnClickCb';
 import { useUserHasPro } from '../../hooks/useHasPro';
-import { UploadFirstImageButton } from './edit-profile/UploadFirstImage';
+import { UploadFirstImageButton } from './user-settings/UploadFirstImage';
+import { Localizer } from '../basic/Localizer';
 
 const StyledAvatarContainer = styled.div`
   cursor: pointer;
@@ -96,7 +97,7 @@ const triggerUploadProfileAvatar = async (
         ToastUtils.pushToastError('edit-profile', error.message);
       }
       window.log.error(
-        'showEditProfileDialog Error ensuring that image is properly sized:',
+        'triggerUploadProfileAvatar Error ensuring that image is properly sized:',
         error && error.stack ? error.stack : error
       );
     }
@@ -162,7 +163,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
   const closeDialog = useCallback(() => {
     dispatch(updateEditProfilePictureModal(null));
     if (isMe) {
-      dispatch(editProfileModal({}));
+      dispatch(userSettingsModal({}));
     }
   }, [dispatch, isMe]);
 
@@ -274,6 +275,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
           ) : null}
         </ModalActionsContainer>
       }
+      $flexGap="var(--margins-sm)"
     >
       {isMe && proBadgeCb.cb ? (
         <StyledCTADescription reverseDirection={userHasPro}>
@@ -308,9 +310,17 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
             <UploadFirstImageButton onClick={handleClick} />
           )}
         </StyledAvatarContainer>
-        <SpacerLG />
       </div>
-      <SessionSpinner loading={loading} />
+      {}
+      {loading ? (
+        <>
+          <SpacerSM />
+          {isMe ? <Localizer token="updating" /> : null}
+          <SessionSpinner loading={loading} height="30px" />
+        </>
+      ) : (
+        <SpacerLG />
+      )}
     </SessionWrapperModal>
   );
 };

ts/components/dialog/ModalContainer.tsx

@@ -8,7 +8,7 @@ import {
   getConversationSettingsModalState,
   getDebugMenuModalState,
   getDeleteAccountModalState,
-  getEditProfileDialog,
+  getUserSettingsModal,
   getEditProfilePictureModalState,
   getEnterPasswordModalState,
   getHideRecoveryPasswordModalState,
@@ -25,7 +25,7 @@ import {
   getUpdateGroupMembersModal,
   getUserProfileModal,
   getLocalizedPopupDialogState,
-  getUpdateGroupOrCommunityDetailsModal,
+  getUpdateConversationDetailsModal,
 } from '../../state/selectors/modal';
 import { LightboxGallery } from '../lightbox/LightboxGallery';
 import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog';
@@ -42,9 +42,8 @@ import { ReactListModal } from './ReactListModal';
 import { SessionNicknameDialog } from './SessionNicknameDialog';
 import { SessionSetPasswordDialog } from './SessionSetPasswordDialog';
 import { UpdateGroupMembersDialog } from './UpdateGroupMembersDialog';
-import { UpdateGroupOrCommunityDetailsDialog } from './UpdateGroupOrCommunityDetailsDialog';
+import { UpdateConversationDetailsDialog } from './UpdateConversationDetailsDialog';
 import { UserProfileModal } from './UserProfileModal';
-import { EditProfileDialog } from './edit-profile/EditProfileDialog';
 import { OpenUrlModal } from './OpenUrlModal';
 import { BlockOrUnblockDialog } from './blockOrUnblock/BlockOrUnblockDialog';
 import { DebugMenuModal } from './debug/DebugMenuModal';
@@ -53,17 +52,18 @@ import { SessionNetworkModal } from './network/SessionNetworkModal';
 import { SessionConfirm } from './SessionConfirm';
 import { SessionProInfoModal } from './SessionProInfoModal';
 import { LocalizedPopupDialog } from './LocalizedPopupDialog';
+import { UserSettingsDialog } from './user-settings/UserSettingsDialog';
 
 export const ModalContainer = () => {
   const confirmModalState = useSelector(getConfirmModal);
   const inviteModalState = useSelector(getInviteContactModal);
   const addModeratorsModalState = useSelector(getAddModeratorsModal);
   const removeModeratorsModalState = useSelector(getRemoveModeratorsModal);
   const updateGroupMembersModalState = useSelector(getUpdateGroupMembersModal);
-  const updateGroupOrCommunityDetailsState = useSelector(getUpdateGroupOrCommunityDetailsModal);
+  const updateConversationDetailsModalState = useSelector(getUpdateConversationDetailsModal);
   const userProfileModalState = useSelector(getUserProfileModal);
   const changeNicknameModal = useSelector(getChangeNickNameDialog);
-  const editProfileModalState = useSelector(getEditProfileDialog);
+  const userSettingsModalState = useSelector(getUserSettingsModal);
   const onionPathModalState = useSelector(getOnionPathDialog);
   const enterPasswordModalState = useSelector(getEnterPasswordModalState);
   const sessionPasswordModalState = useSelector(getSessionPasswordDialog);
@@ -91,7 +91,7 @@ export const ModalContainer = () => {
       )}
       {sessionPasswordModalState && <SessionSetPasswordDialog {...sessionPasswordModalState} />}
       {sessionNetworkModalState && <SessionNetworkModal {...sessionNetworkModalState} />}
-      {editProfileModalState && <EditProfileDialog {...editProfileModalState} />}
+      {userSettingsModalState && <UserSettingsDialog {...userSettingsModalState} />}
       {onionPathModalState && <OnionPathModal {...onionPathModalState} />}
       {reactListModalState && <ReactListModal {...reactListModalState} />}
       {debugMenuModalState && <DebugMenuModal {...debugMenuModalState} />}
@@ -104,8 +104,8 @@ export const ModalContainer = () => {
       {updateGroupMembersModalState && (
         <UpdateGroupMembersDialog {...updateGroupMembersModalState} />
       )}
-      {updateGroupOrCommunityDetailsState && (
-        <UpdateGroupOrCommunityDetailsDialog {...updateGroupOrCommunityDetailsState} />
+      {updateConversationDetailsModalState && (
+        <UpdateConversationDetailsDialog {...updateConversationDetailsModalState} />
       )}
       {userProfileModalState && <UserProfileModal {...userProfileModalState} />}
       {changeNicknameModal && <SessionNicknameDialog {...changeNicknameModal} />}