fix: rename MAX_USERNAME_BYTES to MAX_NAME_LENGTH to match libsession, updated byte limit to 100

added doctstring to explain the prop

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { MAX_USERNAME_BYTES } from '../../../../session/constants';
+import { MAX_NAME_LENGTH } from '../../../../session/constants';
 import { ToastUtils } from '../../../../session/utils';
 import { sanitizeSessionUsername } from '../../../../session/utils/String';
 import { useSelectedConversationKey } from '../../../../state/selectors/selectedConversation';
@@ -86,7 +86,7 @@ export const OverlayRightPanelSettings2 = () => {
           placeholder={window.i18n('enterDisplayName')}
           value={inputValue}
           error={inputError}
-          maxLength={MAX_USERNAME_BYTES}
+          maxLength={MAX_NAME_LENGTH}
           onValueChanged={handleInputChanged}
           onEnterPressed={handleEnterPressed}
           ctaButton={

ts/components/dialog/EditProfileDialog.tsx

@@ -10,7 +10,7 @@ import { YourSessionIDPill, YourSessionIDSelectable } from '../basic/YourSession
 
 import { useOurAvatarPath, useOurConversationUsername } from '../../hooks/useParamSelector';
 import { ConversationTypeEnum } from '../../models/conversationAttributes';
-import { MAX_USERNAME_BYTES } from '../../session/constants';
+import { MAX_NAME_LENGTH } from '../../session/constants';
 import { getConversationController } from '../../session/conversations';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { editProfileModal, updateEditProfilePictureModel } from '../../state/ducks/modalDialog';
@@ -151,7 +151,7 @@ export const EditProfileDialog = (): ReactElement => {
     try {
       const newName = profileName ? profileName.trim() : '';
 
-      if (newName.length === 0 || newName.length > MAX_USERNAME_BYTES) {
+      if (newName.length === 0 || newName.length > MAX_NAME_LENGTH) {
         return;
       }
 
@@ -256,7 +256,7 @@ export const EditProfileDialog = (): ReactElement => {
                 value={profileName}
                 placeholder={window.i18n('displayName')}
                 onChange={onNameEdited}
-                maxLength={MAX_USERNAME_BYTES}
+                maxLength={MAX_NAME_LENGTH}
                 tabIndex={0}
                 required={true}
                 aria-required={true}

ts/session/constants.ts

@@ -68,8 +68,8 @@ export const VALIDATION = {
 export const DEFAULT_RECENT_REACTS = ['😂', '🥰', '😢', '😡', '😮', '😈'];
 export const REACT_LIMIT = 6;
 
-/** the useronfig wrapper name property character limit */
-export const MAX_USERNAME_BYTES = 64;
+/** character limit for a display name based on libsession MAX_NAME_LENGTH */
+export const MAX_NAME_LENGTH = 100;
 
 export const FEATURE_RELEASE_TIMESTAMPS = {
   // TODO update to agreed value between platforms for `disappearing_messages`

ts/session/utils/String.ts

@@ -1,5 +1,5 @@
 import ByteBuffer from 'bytebuffer';
-import { MAX_USERNAME_BYTES } from '../constants';
+import { MAX_NAME_LENGTH } from '../constants';
 
 export type Encoding = 'base64' | 'hex' | 'binary' | 'utf8';
 export type BufferType = ByteBuffer | Buffer | ArrayBuffer | Uint8Array;
@@ -57,7 +57,7 @@ const forbiddenDisplayCharRegex = /\uFFD2*/g;
  * This does not trim it as otherwise, a user cannot type User A as when he hits the space, it gets trimmed right away.
  * The trimming should hence happen after calling this and on saving the display name.
  *
- * This functions makes sure that the MAX_USERNAME_BYTES is verified for utf8 byte length
+ * This functions makes sure that the MAX_NAME_LENGTH is verified for utf8 byte length. MAX_NAME_LENGTH is the agreed character limit between platforms for libsession
  * @param inputName the input to sanitize
  * @returns a sanitized string, untrimmed
  */
@@ -65,7 +65,7 @@ export const sanitizeSessionUsername = (inputName: string) => {
   const validChars = inputName.replace(forbiddenDisplayCharRegex, '');
 
   const lengthBytes = encode(validChars, 'utf8').byteLength;
-  if (lengthBytes > MAX_USERNAME_BYTES) {
+  if (lengthBytes > MAX_NAME_LENGTH) {
     throw new Error('Display name is too long');
   }