From eaeabaf813dfbdb5cc42da4e94bf2fa28c32a489 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Wed, 31 Jul 2024 15:11:50 +1000
Subject: [PATCH 01/23] fix: dont trim display name when sanitizing

trim on submission
---
 ts/components/dialog/edit-profile/EditProfileDialog.tsx | 1 +
 ts/components/registration/utils/index.tsx              | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ts/components/dialog/edit-profile/EditProfileDialog.tsx b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
index b4ffdf7d9..d679b672f 100644
--- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx
+++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
@@ -216,6 +216,7 @@ export const EditProfileDialog = () => {
       setLoading(true);
       const validName = await ProfileManager.updateOurProfileDisplayName(profileName);
       setUpdateProfileName(validName);
+      setProfileName(validName);
       setMode('default');
     } catch (err) {
       window.log.error('Profile update error', err);
diff --git a/ts/components/registration/utils/index.tsx b/ts/components/registration/utils/index.tsx
index 3ea00dfc6..4220c06d2 100644
--- a/ts/components/registration/utils/index.tsx
+++ b/ts/components/registration/utils/index.tsx
@@ -9,15 +9,14 @@ export function sanitizeDisplayNameOrToast(
 ) {
   try {
     const sanitizedName = sanitizeSessionUsername(displayName);
-    const trimName = sanitizedName.trim();
-    const errorString = !trimName ? window.i18n('displayNameEmpty') : undefined;
+    const errorString = !sanitizedName ? window.i18n('displayNameEmpty') : undefined;
     if (dispatch) {
       dispatch(onDisplayNameError(errorString));
     } else {
       onDisplayNameError(errorString); // this is is either calling dispatch in the caller or just `setDisplayNameError`
     }
 
-    return trimName;
+    return sanitizedName;
   } catch (e) {
     if (dispatch) {
       dispatch(onDisplayNameError(window.i18n('displayNameErrorDescriptionShorter')));

From e66d443a97bcd15d70e30a9d968fc09bff037672 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Wed, 31 Jul 2024 15:32:06 +1000
Subject: [PATCH 02/23] fix: reset input color after error if the value changes

---
 ts/components/inputs/SessionInput.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index f52ec154f..699435cd4 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -277,6 +277,7 @@ export const SessionInput = (props: Props) => {
   } = props;
   const [inputValue, setInputValue] = useState('');
   const [errorString, setErrorString] = useState('');
+  const [textErrorStyle, setTextErrorStyle] = useState(false);
   const [forceShow, setForceShow] = useState(false);
 
   const correctType = forceShow ? 'text' : type;
@@ -288,6 +289,7 @@ export const SessionInput = (props: Props) => {
     e.preventDefault();
     const val = e.target.value;
     setInputValue(val);
+    setTextErrorStyle(false);
     if (onValueChanged) {
       onValueChanged(val);
     }
@@ -332,7 +334,7 @@ export const SessionInput = (props: Props) => {
 
   const containerProps = {
     noValue: isEmpty(value),
-    error: Boolean(error),
+    error: textErrorStyle,
     centerText,
     textSize,
     monospaced,
@@ -342,6 +344,7 @@ export const SessionInput = (props: Props) => {
   useEffect(() => {
     if (error && !isEmpty(error) && !isEqual(error, errorString)) {
       setErrorString(error);
+      setTextErrorStyle(!!error);
     }
   }, [error, errorString]);
 

From d52461aecc1f6b5127f047c4d6bbb818f658a997 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Wed, 31 Jul 2024 17:20:15 +1000
Subject: [PATCH 03/23] fix: don't use name length for the recovery password
 input and trim it

---
 ts/components/registration/stages/RestoreAccount.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx
index af3e7850b..cbfc3b320 100644
--- a/ts/components/registration/stages/RestoreAccount.tsx
+++ b/ts/components/registration/stages/RestoreAccount.tsx
@@ -133,13 +133,15 @@ export const RestoreAccount = () => {
     if (!(!!recoveryPassword && !recoveryPasswordError)) {
       return;
     }
+    const trimmedPassword = recoveryPassword.trim();
+    setRecoveryPassword(trimmedPassword);
 
     const abortController = new AbortController();
     try {
       dispatch(setProgress(0));
       dispatch(setAccountRestorationStep(AccountRestoration.Loading));
       await signInAndFetchDisplayName({
-        recoveryPassword,
+        recoveryPassword: trimmedPassword,
         dispatch,
         abortSignal: abortController.signal,
       });
@@ -248,7 +250,6 @@ export const RestoreAccount = () => {
               }}
               onEnterPressed={recoverAndFetchDisplayName}
               error={recoveryPasswordError}
-              maxLength={LIBSESSION_CONSTANTS.CONTACT_MAX_NAME_LENGTH}
               enableShowHideButton={true}
               showHideButtonAriaLabels={{
                 hide: 'Hide recovery password toggle',
@@ -289,6 +290,7 @@ export const RestoreAccount = () => {
               }}
               onEnterPressed={recoverAndEnterDisplayName}
               error={displayNameError}
+              maxLength={LIBSESSION_CONSTANTS.CONTACT_MAX_NAME_LENGTH}
               inputDataTestId="display-name-input"
             />
             <SpacerLG />

From 8260f0481b9394c320627717f4208516910d4faa Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Thu, 1 Aug 2024 16:25:49 +1000
Subject: [PATCH 04/23] fix: session input with textarea now centers content
 correctly

---
 ts/components/dialog/UserDetailsDialog.tsx    |  3 +-
 ts/components/inputs/SessionInput.tsx         | 53 +++++++++++++------
 .../leftpane/overlay/OverlayInvite.tsx        | 11 ++--
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx
index 36f447c91..baa388e20 100644
--- a/ts/components/dialog/UserDetailsDialog.tsx
+++ b/ts/components/dialog/UserDetailsDialog.tsx
@@ -16,8 +16,9 @@ import { ConversationTypeEnum } from '../../models/types';
 
 const StyledInputContainer = styled(Flex)`
   textarea {
+    cursor: default;
     overflow: hidden;
-    padding-top: var(--margins-xs);
+    top: 14px;
   }
 `;
 
diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index 699435cd4..2f30ce0e3 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode, RefObject, useEffect, useState } from 'react';
+import { ChangeEvent, ReactNode, RefObject, useEffect, useRef, useState } from 'react';
 
 import { motion } from 'framer-motion';
 import { isEmpty, isEqual } from 'lodash';
@@ -13,7 +13,7 @@ type TextSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 const StyledSessionInput = styled(Flex)<{
   error: boolean;
-  textSize?: TextSizes;
+  textSize: TextSizes;
 }>`
   position: relative;
   width: 100%;
@@ -68,6 +68,7 @@ const StyledBorder = styled(AnimatedFlex)`
 
 const StyledInput = styled(motion.input)<{
   error: boolean;
+  textSize: TextSizes;
   centerText?: boolean;
   monospaced?: boolean;
 }>`
@@ -79,9 +80,9 @@ const StyledInput = styled(motion.input)<{
   color: ${props => (props.error ? 'var(--danger-color)' : 'var(--input-text-color)')};
 
   font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
-  font-size: 12px;
   line-height: 1.4;
   ${props => props.centerText && 'text-align: center;'}
+  ${props => `font-size: var(--font-size-${props.textSize});`}
 
   &::placeholder {
     color: var(--input-text-placeholder-color);
@@ -89,13 +90,15 @@ const StyledInput = styled(motion.input)<{
   }
 `;
 
-const StyledTextAreaContainer = styled(motion.div)<{
+export const StyledTextAreaContainer = styled(motion.div)<{
   noValue: boolean;
   error: boolean;
+  textSize: TextSizes;
   centerText?: boolean;
-  textSize?: TextSizes;
   monospaced?: boolean;
 }>`
+  display: flex;
+  align-items: center;
   overflow: hidden;
   position: relative;
   height: ${props => (props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px')};
@@ -107,8 +110,8 @@ const StyledTextAreaContainer = styled(motion.div)<{
   outline: 0;
 
   font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
-  font-size: 12px;
-  line-height: 1.4;
+  ${props => `font-size: var(--font-size-${props.textSize});`}
+  line-height: 1;
 
   ${props => props.centerText && 'text-align: center;'}
 
@@ -121,21 +124,20 @@ const StyledTextAreaContainer = styled(motion.div)<{
     border: none;
     background: transparent;
 
-    ${props =>
-      props.noValue &&
-      `position: absolute;
-    top: ${props.textSize ? `calc(var(--font-size-${props.textSize}) + 5px)` : 'calc(12px + 5px)'};`}
+    position: absolute;
+    top: ${props =>
+      `calc(var(--font-size-${props.textSize}) + ${props.textSize === 'xl' ? '8px' : '5px'})`};
 
     resize: none;
-    overflow-wrap: break-word;
+    word-break: break-all;
     user-select: all;
 
     ${props => props.centerText && 'text-align: center;'}
 
     &:placeholder-shown {
       font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')};
-      font-size: 12px;
-      line-height: 1.4;
+      ${props => `font-size: var(--font-size-${props.textSize});`}
+      line-height: 1;
     }
 
     &::placeholder {
@@ -267,7 +269,7 @@ export const SessionInput = (props: Props) => {
     showHideButtonDataTestIds,
     ctaButton,
     monospaced,
-    textSize,
+    textSize = 'sm',
     centerText,
     editable = true,
     isTextArea,
@@ -280,6 +282,8 @@ export const SessionInput = (props: Props) => {
   const [textErrorStyle, setTextErrorStyle] = useState(false);
   const [forceShow, setForceShow] = useState(false);
 
+  const textAreaRef = useRef(inputRef?.current || null);
+
   const correctType = forceShow ? 'text' : type;
 
   const updateInputValue = (e: ChangeEvent<HTMLInputElement>) => {
@@ -290,6 +294,16 @@ export const SessionInput = (props: Props) => {
     const val = e.target.value;
     setInputValue(val);
     setTextErrorStyle(false);
+    if (isTextArea && textAreaRef && textAreaRef.current !== null) {
+      const scrollHeight = `${textAreaRef.current.scrollHeight}px`;
+      if (isEmpty(val)) {
+        // resets the height of the text area so it's centered if we clear the text
+        textAreaRef.current.style.height = 'unset';
+      }
+      if (scrollHeight !== textAreaRef.current.style.height) {
+        textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+      }
+    }
     if (onValueChanged) {
       onValueChanged(val);
     }
@@ -301,6 +315,7 @@ export const SessionInput = (props: Props) => {
     type: correctType,
     placeholder,
     value,
+    textSize,
     disabled: !editable,
     maxLength,
     autoFocus,
@@ -308,7 +323,6 @@ export const SessionInput = (props: Props) => {
     required,
     'aria-required': required,
     tabIndex,
-    ref: inputRef,
     onChange: updateInputValue,
     style: { paddingInlineEnd: enableShowHideButton ? '48px' : undefined },
     // just in case onChange isn't triggered
@@ -372,12 +386,17 @@ export const SessionInput = (props: Props) => {
       >
         {isTextArea ? (
           <StyledTextAreaContainer {...containerProps}>
-            <textarea {...inputProps} aria-label={ariaLabel || 'session input text area'} />
+            <textarea
+              {...inputProps}
+              ref={inputRef || textAreaRef}
+              aria-label={ariaLabel || 'session input text area'}
+            />
           </StyledTextAreaContainer>
         ) : (
           <StyledInput
             {...inputProps}
             {...containerProps}
+            ref={inputRef}
             aria-label={ariaLabel || 'session input'}
           />
         )}
diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx
index c0a525d54..d8dc90a4f 100644
--- a/ts/components/leftpane/overlay/OverlayInvite.tsx
+++ b/ts/components/leftpane/overlay/OverlayInvite.tsx
@@ -13,6 +13,7 @@ import { CopyToClipboardButton } from '../../buttons/CopyToClipboardButton';
 import { SessionIcon } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { StyledLeftPaneOverlay } from './OverlayMessage';
+import { StyledTextAreaContainer } from '../../inputs/SessionInput';
 
 const StyledHeadingContainer = styled(Flex)`
   .session-icon-button {
@@ -53,9 +54,13 @@ const StyledButtonerContainer = styled.div`
 `;
 
 const StyledInputContainer = styled(Flex)`
-  textarea {
-    position: absolute;
-    top: 8px;
+  ${StyledTextAreaContainer} {
+    margin: var(--margins-sm);
+    textarea {
+      cursor: default;
+      overflow: hidden;
+      top: 12px;
+    }
   }
 `;
 

From f5951f911f9cdabbbc7e9157cbf6b604a2359f1a Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Thu, 1 Aug 2024 17:29:59 +1000
Subject: [PATCH 05/23] fix: show note to self and outgoing message requests in
 contact list

---
 .../choose-action/ContactsListWithBreaks.tsx  | 10 +++++--
 ts/state/selectors/conversations.ts           | 29 ++++++++++---------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index ab14f2bf4..f4c400aaa 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -6,12 +6,13 @@ import styled, { CSSProperties } from 'styled-components';
 import {
   DirectContactsByNameType,
   getDirectContactsByName,
-  getDirectContactsCount,
+  getContactsCount,
 } from '../../../../state/selectors/conversations';
 import { leftPaneListWidth } from '../../LeftPane';
 import { StyledLeftPaneList } from '../../LeftPaneList';
 import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
+import { UserUtils } from '../../../../session/utils';
 
 const StyledContactSection = styled.div`
   display: flex;
@@ -90,6 +91,11 @@ const ContactListItemSection = () => {
     directContactsByNameWithBreaks.push(m);
   });
 
+  directContactsByNameWithBreaks.unshift({
+    id: UserUtils.getOurPubKeyStrFromCache(),
+    displayName: window.i18n('noteToSelf'),
+  });
+
   const length = Number(directContactsByNameWithBreaks.length);
 
   return (
@@ -118,7 +124,7 @@ const ContactListItemSection = () => {
 };
 
 export const ContactsListWithBreaks = () => {
-  const contactsCount = useSelector(getDirectContactsCount);
+  const contactsCount = useSelector(getContactsCount);
 
   return (
     <StyledContactSection>
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index 3efe592f6..86999952e 100644
--- a/ts/state/selectors/conversations.ts
+++ b/ts/state/selectors/conversations.ts
@@ -297,18 +297,12 @@ const _getLeftPaneConversationIds = (
     .map(m => m.id);
 };
 
-const _getPrivateFriendsConversations = (
+const _getContacts = (
   sortedConversations: Array<ReduxConversationType>
 ): Array<ReduxConversationType> => {
   return sortedConversations.filter(convo => {
-    return (
-      convo.isPrivate &&
-      !convo.isMe &&
-      !convo.isBlocked &&
-      convo.isApproved &&
-      convo.didApproveMe &&
-      convo.activeAt !== undefined
-    );
+    // a private conversation not approved is a message request. Include them in the list of contacts
+    return !convo.isBlocked && convo.isPrivate && !convo.isMe;
   });
 };
 
@@ -437,7 +431,6 @@ export const getUnreadConversationRequests = createSelector(
  * - approved (or message requests are disabled)
  * - active_at is set to something truthy
  */
-
 export const getLeftPaneConversationIds = createSelector(
   getSortedConversations,
   _getLeftPaneConversationIds
@@ -450,10 +443,16 @@ export const getLeftPaneConversationIdsCount = createSelector(
   }
 );
 
-const getDirectContacts = createSelector(getSortedConversations, _getPrivateFriendsConversations);
+/**
+ * Returns all the conversation ids of contacts which are
+ * - private
+ * - not me
+ * - not blocked
+ */
+const getContacts = createSelector(getSortedConversations, _getContacts);
 
-export const getDirectContactsCount = createSelector(
-  getDirectContacts,
+export const getContactsCount = createSelector(
+  getContacts,
   (contacts: Array<ReduxConversationType>) => contacts.length
 );
 
@@ -464,7 +463,7 @@ export type DirectContactsByNameType = {
 
 // make sure that createSelector is called here so this function is memoized
 export const getDirectContactsByName = createSelector(
-  getDirectContacts,
+  getContacts,
   (contacts: Array<ReduxConversationType>): Array<DirectContactsByNameType> => {
     const us = UserUtils.getOurPubKeyStrFromCache();
     const extractedContacts = contacts
@@ -475,10 +474,12 @@ export const getDirectContactsByName = createSelector(
           displayName: m.nickname || m.displayNameInProfile,
         };
       });
+
     const extractedContactsNoDisplayName = sortBy(
       extractedContacts.filter(m => !m.displayName),
       'id'
     );
+
     const extractedContactsWithDisplayName = sortBy(
       extractedContacts.filter(m => Boolean(m.displayName)),
       m => m.displayName?.toLowerCase()

From d210b5c354fcb985713c988460942ff37d8a4ce5 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 10:28:36 +1000
Subject: [PATCH 06/23] fix: adjust contacts list to match design

no borders and smaller breaks
---
 .../leftpane/overlay/choose-action/ContactRow.tsx    | 11 ++---------
 .../overlay/choose-action/ContactsListWithBreaks.tsx | 12 ++++++++----
 ts/themes/globals.tsx                                | 11 +++++++++++
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
index 02bcf50ab..5c2d2568a 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
@@ -47,11 +47,6 @@ const StyledRowContainer = styled.button`
   padding: 0 var(--margins-lg);
   transition: background-color var(--default-duration) linear;
   cursor: pointer;
-  border-bottom: 1px var(--border-color) solid;
-
-  &:first-child {
-    border-top: 1px var(--border-color) solid;
-  }
 
   &:hover {
     background-color: var(--conversation-tab-background-hover-color);
@@ -63,10 +58,8 @@ const StyledBreak = styled.div`
   align-items: center;
   padding: 0 var(--margins-lg);
   color: var(--text-secondary-color);
-  font-size: var(--font-size-md);
-  height: 30px; // should also be changed in rowHeight
-
-  border-bottom: 1px var(--border-color) solid;
+  font-size: var(--font-size-sm);
+  height: var(--contact-row-break-width);
 `;
 
 export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => {
diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index f4c400aaa..cb186d88b 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -13,6 +13,7 @@ import { StyledLeftPaneList } from '../../LeftPaneList';
 import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
 import { UserUtils } from '../../../../session/utils';
+import { getThemeValue, pxValueToNumber } from '../../../../themes/globals';
 
 const StyledContactSection = styled.div`
   display: flex;
@@ -98,6 +99,12 @@ const ContactListItemSection = () => {
 
   const length = Number(directContactsByNameWithBreaks.length);
 
+  const calcRowHeight = (params: Index) => {
+    return isString(directContactsByNameWithBreaks[params.index])
+      ? pxValueToNumber(getThemeValue('--contact-row-break-height'))
+      : pxValueToNumber(getThemeValue('--contact-row-height'));
+  };
+
   return (
     <StyledLeftPaneList key={0} style={{ width: '100%' }}>
       <AutoSizer>
@@ -107,10 +114,7 @@ const ContactListItemSection = () => {
               className="module-left-pane__virtual-list"
               height={height}
               rowCount={length}
-              rowHeight={
-                (params: Index) =>
-                  isString(directContactsByNameWithBreaks[params.index]) ? 30 : 64 // should also be changed in `ContactRowBreak`
-              }
+              rowHeight={calcRowHeight}
               directContactsByNameWithBreaks={directContactsByNameWithBreaks}
               rowRenderer={renderRow}
               width={leftPaneListWidth}
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 57fc3ccb5..42a92ace8 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -7,6 +7,10 @@ function setDuration(duration: number | string) {
   return `${!isTestIntegration() ? duration : typeof duration === 'string' ? '0s' : '0'}`;
 }
 
+export function pxValueToNumber(value: string) {
+  return Number(value.replace('px', ''));
+}
+
 // These variables are independent of the current theme
 type ThemeGlobals = {
   /* Fonts */
@@ -117,6 +121,10 @@ type ThemeGlobals = {
   '--right-panel-height': string;
   '--right-panel-attachment-width': string;
   '--right-panel-attachment-height': string;
+
+  /* Contact Row */
+  '--contact-row-height': string;
+  '--contact-row-break-height': string;
 };
 
 type Theme = ThemeGlobals | ThemeColorVariables;
@@ -226,4 +234,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
   '--right-panel-attachment-height':
     'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
+
+  '--contact-row-height': '60px',
+  '--contact-row-break-height': '20px',
 };

From f5c396ee0a3c517d01f003472ac47a4dd581bbe5 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 10:49:12 +1000
Subject: [PATCH 07/23] fix: made group members list match contacts list style
 on create group page

---
 ts/components/MemberListItem.tsx              | 22 ++++++++++---------
 .../leftpane/overlay/OverlayClosedGroup.tsx   |  4 +---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index 18a9724cc..805a1bbd8 100644
--- a/ts/components/MemberListItem.tsx
+++ b/ts/components/MemberListItem.tsx
@@ -23,6 +23,7 @@ const StyledSessionMemberItem = styled.button<{
   zombie?: boolean;
   selected?: boolean;
   disableBg?: boolean;
+  withBorder?: boolean;
 }>`
   cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
@@ -40,11 +41,16 @@ const StyledSessionMemberItem = styled.button<{
       ? 'var(--conversation-tab-background-selected-color) !important'
       : null};
 
-  &:not(button:last-child) {
+  ${props => props.inMentions && 'max-width: 300px;'}
+  ${props =>
+    props.withBorder &&
+    `&:not(button:last-child) {
     border-bottom: 1px solid var(--border-color);
-  }
+  }`}
 
-  ${props => props.inMentions && 'max-width: 300px;'}
+  &:hover {
+    background-color: var(--conversation-tab-background-hover-color);
+  }
 `;
 
 const StyledInfo = styled.div`
@@ -75,6 +81,7 @@ export const MemberListItem = (props: {
   isZombie?: boolean;
   inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
   disableBg?: boolean;
+  withBorder?: boolean;
   maxNameWidth?: string;
   isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
@@ -91,6 +98,7 @@ export const MemberListItem = (props: {
     onUnselect,
     inMentions,
     disableBg,
+    withBorder = true,
     maxNameWidth,
     disabled,
     dataTestId,
@@ -104,18 +112,12 @@ export const MemberListItem = (props: {
         // eslint-disable-next-line no-unused-expressions
         isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
       }}
-      style={
-        !inMentions && !disableBg
-          ? {
-              backgroundColor: 'var(--background-primary-color)',
-            }
-          : {}
-      }
       data-testid={dataTestId}
       zombie={isZombie}
       inMentions={inMentions}
       selected={isSelected}
       disableBg={disableBg}
+      withBorder={withBorder}
       disabled={disabled}
     >
       <StyledInfo>
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 6b2124b6f..78a858d55 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -46,9 +46,6 @@ const StyledGroupMemberListContainer = styled.div`
   overflow-x: hidden;
   overflow-y: auto;
 
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-
   &::-webkit-scrollbar-track {
     background-color: var(--background-secondary-color);
   }
@@ -192,6 +189,7 @@ export const OverlayClosedGroup = () => {
               isSelected={selectedMemberIds.includes(pubkey)}
               onSelect={addToSelected}
               onUnselect={removeFromSelected}
+              withBorder={false}
               disabled={loading}
             />
           ))

From 87f050ae55c639c0c8219e694af6cec73ae8039f Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 11:12:41 +1000
Subject: [PATCH 08/23] fix: no letter headings in search results conversations
 and adjusted height

---
 .../choose-action/ContactsListWithBreaks.tsx  | 22 +++++++++++++------
 ts/components/search/SearchResults.tsx        |  8 ++++---
 ts/state/selectors/search.ts                  | 19 ++++++++--------
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index cb186d88b..e18c1d578 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -14,6 +14,7 @@ import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
 import { UserUtils } from '../../../../session/utils';
 import { getThemeValue, pxValueToNumber } from '../../../../themes/globals';
+import { SearchResultsMergedListItem } from '../../../../state/selectors/search';
 
 const StyledContactSection = styled.div`
   display: flex;
@@ -68,6 +69,19 @@ const renderRow = (props: ListRowProps) => {
   return <ContactRow style={style as CSSProperties} key={key} {...item} />;
 };
 
+export function calcContactRowHeight(
+  items: Array<SearchResultsMergedListItem | string | DirectContactsByNameType>,
+  params: Index,
+  overrides?: {
+    rowHeight?: number;
+    breakRowHeight?: number;
+  }
+) {
+  return isString(items[params.index])
+    ? overrides?.breakRowHeight || pxValueToNumber(getThemeValue('--contact-row-break-height'))
+    : overrides?.rowHeight || pxValueToNumber(getThemeValue('--contact-row-height'));
+}
+
 const unknownSection = 'unknown';
 
 const ContactListItemSection = () => {
@@ -99,12 +113,6 @@ const ContactListItemSection = () => {
 
   const length = Number(directContactsByNameWithBreaks.length);
 
-  const calcRowHeight = (params: Index) => {
-    return isString(directContactsByNameWithBreaks[params.index])
-      ? pxValueToNumber(getThemeValue('--contact-row-break-height'))
-      : pxValueToNumber(getThemeValue('--contact-row-height'));
-  };
-
   return (
     <StyledLeftPaneList key={0} style={{ width: '100%' }}>
       <AutoSizer>
@@ -114,7 +122,7 @@ const ContactListItemSection = () => {
               className="module-left-pane__virtual-list"
               height={height}
               rowCount={length}
-              rowHeight={calcRowHeight}
+              rowHeight={params => calcContactRowHeight(directContactsByNameWithBreaks, params)}
               directContactsByNameWithBreaks={directContactsByNameWithBreaks}
               rowRenderer={renderRow}
               width={leftPaneListWidth}
diff --git a/ts/components/search/SearchResults.tsx b/ts/components/search/SearchResults.tsx
index f86d21124..651d40ee9 100644
--- a/ts/components/search/SearchResults.tsx
+++ b/ts/components/search/SearchResults.tsx
@@ -12,6 +12,7 @@ import {
   getSearchResultsList,
   getSearchTerm,
 } from '../../state/selectors/search';
+import { calcContactRowHeight } from '../leftpane/overlay/choose-action/ContactsListWithBreaks';
 
 const StyledSeparatorSection = styled.div<{ isSubtitle: boolean }>`
   height: 36px;
@@ -63,15 +64,16 @@ function isContact(item: SearchResultsMergedListItem): item is { contactConvoId:
 
 const VirtualizedList = () => {
   const searchResultList = useSelector(getSearchResultsList);
+
   return (
     <AutoSizer>
       {({ height, width }) => (
         <List
           height={height}
           rowCount={searchResultList.length}
-          rowHeight={rowPos => {
-            return isString(searchResultList[rowPos.index]) ? 36 : 64;
-          }}
+          rowHeight={params =>
+            calcContactRowHeight(searchResultList, params, { breakRowHeight: 36 })
+          }
           rowRenderer={({ index, key, style }) => {
             const row = searchResultList[index];
             if (!row) {
diff --git a/ts/state/selectors/search.ts b/ts/state/selectors/search.ts
index f19c5c130..e5c778421 100644
--- a/ts/state/selectors/search.ts
+++ b/ts/state/selectors/search.ts
@@ -99,21 +99,22 @@ export const getSearchResultsList = createSelector([getSearchResults], searchSta
     );
 
     // add a break wherever needed
-    let currentChar = '';
+    // let currentChar = '';
     for (let i = 0; i < idsWithNameAndType.length; i++) {
       const m = idsWithNameAndType[i];
       if (m.contactConvoId === us) {
         usIndex = i;
         continue;
       }
-      if (
-        idsWithNameAndType.length > 1 &&
-        m.displayName &&
-        m.displayName[0].toLowerCase() !== currentChar
-      ) {
-        currentChar = m.displayName[0].toLowerCase();
-        builtList.push(currentChar.toUpperCase());
-      }
+      // we might want breaks again in future
+      // if (
+      //   idsWithNameAndType.length > 1 &&
+      //   m.displayName &&
+      //   m.displayName[0].toLowerCase() !== currentChar
+      // ) {
+      //   currentChar = m.displayName[0].toLowerCase();
+      //   builtList.push(currentChar.toUpperCase());
+      // }
       builtList.push(m);
     }
 

From 242a4ae52fe228319e44b97d5a29f3fd54a59df2 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 11:50:50 +1000
Subject: [PATCH 09/23] feat: contact names starting with a number go into the
 unknown section

---
 .../choose-action/ContactsListWithBreaks.tsx  | 21 +++++++++++++++++--
 ts/state/selectors/search.ts                  |  9 ++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index e18c1d578..63bba6c16 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -95,15 +95,25 @@ const ContactListItemSection = () => {
   let currentChar = '';
   // if the item is a string we consider it to be a break of that string
   const directContactsByNameWithBreaks: Array<DirectContactsByNameType | string> = [];
+  const directContactsStartingWithANumber: Array<DirectContactsByNameType | string> = [];
   directContactsByName.forEach(m => {
-    if (m.displayName && m.displayName[0].toLowerCase() !== currentChar) {
+    if (
+      m.displayName &&
+      m.displayName[0].toLowerCase() !== currentChar &&
+      !m.displayName[0].match(/^[0-9]+$/)
+    ) {
       currentChar = m.displayName[0].toLowerCase();
       directContactsByNameWithBreaks.push(currentChar.toUpperCase());
     } else if (!m.displayName && currentChar !== unknownSection) {
       currentChar = unknownSection;
       directContactsByNameWithBreaks.push('#');
     }
-    directContactsByNameWithBreaks.push(m);
+
+    if (m.displayName && !!m.displayName[0].match(/^[0-9]+$/)) {
+      directContactsStartingWithANumber.push(m);
+    } else {
+      directContactsByNameWithBreaks.push(m);
+    }
   });
 
   directContactsByNameWithBreaks.unshift({
@@ -111,6 +121,13 @@ const ContactListItemSection = () => {
     displayName: window.i18n('noteToSelf'),
   });
 
+  if (directContactsStartingWithANumber.length) {
+    if (currentChar !== unknownSection) {
+      directContactsByNameWithBreaks.push('#');
+    }
+    directContactsByNameWithBreaks.push(...directContactsStartingWithANumber);
+  }
+
   const length = Number(directContactsByNameWithBreaks.length);
 
   return (
diff --git a/ts/state/selectors/search.ts b/ts/state/selectors/search.ts
index e5c778421..57a71fde9 100644
--- a/ts/state/selectors/search.ts
+++ b/ts/state/selectors/search.ts
@@ -93,8 +93,8 @@ export const getSearchResultsList = createSelector([getSearchResults], searchSta
       m => m.displayName?.toLowerCase()
     );
 
-    const idsWithNoDisplayNames = sortBy(
-      remove(idsWithNameAndType, m => !m.displayName),
+    const idsWithNoDisplayNamesOrStartingWithANumber = sortBy(
+      remove(idsWithNameAndType, m => !m.displayName || m.displayName[0].match(/^[0-9]+$/)),
       m => m.contactConvoId
     );
 
@@ -120,8 +120,9 @@ export const getSearchResultsList = createSelector([getSearchResults], searchSta
 
     builtList.unshift(...groupsAndCommunities);
 
-    if (idsWithNoDisplayNames.length) {
-      builtList.push('#', ...idsWithNoDisplayNames);
+    if (idsWithNoDisplayNamesOrStartingWithANumber.length) {
+      // builtList.push('#');
+      builtList.push(...idsWithNoDisplayNamesOrStartingWithANumber);
     }
 
     if (usIndex !== -1) {

From 462e3b2ff32c90d562bbb35d270260a8a83f0492 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 12:19:04 +1000
Subject: [PATCH 10/23] fix: message results now match contact row dimensions

---
 ts/components/search/MessageSearchResults.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx
index 8fe2af7c9..7ea4e209a 100644
--- a/ts/components/search/MessageSearchResults.tsx
+++ b/ts/components/search/MessageSearchResults.tsx
@@ -15,6 +15,7 @@ import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { MessageBodyHighlight } from '../basic/MessageBodyHighlight';
 import { ContactName } from '../conversation/ContactName';
 import { Timestamp } from '../conversation/Timestamp';
+import { leftPaneListWidth } from '../leftpane/LeftPane';
 
 const StyledConversationTitleResults = styled.div`
   flex-grow: 1;
@@ -39,11 +40,9 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)
 `;
 
 const StyledSearchResults = styled.div`
-  padding: 8px;
-  padding-inline-start: 16px;
-  padding-inline-end: 16px;
-  min-height: 64px;
-  max-width: 300px;
+  padding: var(--margins-sm) var(--margins-md);
+  height: var(--contact-row-height);
+  max-width: ${leftPaneListWidth}px;
 
   display: flex;
   flex-direction: row;

From f00e21dc44b1187cf546bd53f11f00720453e3cc Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 13:43:21 +1000
Subject: [PATCH 11/23] feat: unknown section now includes display names that
 start with numbers

---
 .../choose-action/ContactsListWithBreaks.tsx  | 59 ++++---------------
 ts/state/selectors/conversations.ts           | 55 ++++++++++++++---
 2 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
index 63bba6c16..be0148205 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@@ -5,14 +5,13 @@ import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized';
 import styled, { CSSProperties } from 'styled-components';
 import {
   DirectContactsByNameType,
-  getDirectContactsByName,
   getContactsCount,
+  getSortedContactsWithBreaks,
 } from '../../../../state/selectors/conversations';
 import { leftPaneListWidth } from '../../LeftPane';
 import { StyledLeftPaneList } from '../../LeftPaneList';
 import { StyledChooseActionTitle } from './ActionRow';
 import { ContactRow, ContactRowBreak } from './ContactRow';
-import { UserUtils } from '../../../../session/utils';
 import { getThemeValue, pxValueToNumber } from '../../../../themes/globals';
 import { SearchResultsMergedListItem } from '../../../../state/selectors/search';
 
@@ -55,9 +54,10 @@ const renderRow = (props: ListRowProps) => {
 
   // ugly, but it seems react-virtualized does not support very well functional components just yet
   // https://stackoverflow.com/questions/54488954/how-to-pass-prop-into-rowrender-of-react-virtualized
-  const directContactsByNameWithBreaks = (parent as any).props
-    .directContactsByNameWithBreaks as Array<DirectContactsByNameType | string>;
-  const item = directContactsByNameWithBreaks?.[index];
+  const contactsByNameWithBreaks = (parent as any).props.contactsByNameWithBreaks as Array<
+    DirectContactsByNameType | string
+  >;
+  const item = contactsByNameWithBreaks?.[index];
   if (!item) {
     return null;
   }
@@ -82,53 +82,14 @@ export function calcContactRowHeight(
     : overrides?.rowHeight || pxValueToNumber(getThemeValue('--contact-row-height'));
 }
 
-const unknownSection = 'unknown';
-
 const ContactListItemSection = () => {
-  const directContactsByName = useSelector(getDirectContactsByName);
+  const contactsByNameWithBreaks = useSelector(getSortedContactsWithBreaks);
 
-  if (!directContactsByName) {
+  if (!contactsByNameWithBreaks) {
     return null;
   }
 
-  // add a break wherever needed
-  let currentChar = '';
-  // if the item is a string we consider it to be a break of that string
-  const directContactsByNameWithBreaks: Array<DirectContactsByNameType | string> = [];
-  const directContactsStartingWithANumber: Array<DirectContactsByNameType | string> = [];
-  directContactsByName.forEach(m => {
-    if (
-      m.displayName &&
-      m.displayName[0].toLowerCase() !== currentChar &&
-      !m.displayName[0].match(/^[0-9]+$/)
-    ) {
-      currentChar = m.displayName[0].toLowerCase();
-      directContactsByNameWithBreaks.push(currentChar.toUpperCase());
-    } else if (!m.displayName && currentChar !== unknownSection) {
-      currentChar = unknownSection;
-      directContactsByNameWithBreaks.push('#');
-    }
-
-    if (m.displayName && !!m.displayName[0].match(/^[0-9]+$/)) {
-      directContactsStartingWithANumber.push(m);
-    } else {
-      directContactsByNameWithBreaks.push(m);
-    }
-  });
-
-  directContactsByNameWithBreaks.unshift({
-    id: UserUtils.getOurPubKeyStrFromCache(),
-    displayName: window.i18n('noteToSelf'),
-  });
-
-  if (directContactsStartingWithANumber.length) {
-    if (currentChar !== unknownSection) {
-      directContactsByNameWithBreaks.push('#');
-    }
-    directContactsByNameWithBreaks.push(...directContactsStartingWithANumber);
-  }
-
-  const length = Number(directContactsByNameWithBreaks.length);
+  const length = Number(contactsByNameWithBreaks.length);
 
   return (
     <StyledLeftPaneList key={0} style={{ width: '100%' }}>
@@ -139,8 +100,8 @@ const ContactListItemSection = () => {
               className="module-left-pane__virtual-list"
               height={height}
               rowCount={length}
-              rowHeight={params => calcContactRowHeight(directContactsByNameWithBreaks, params)}
-              directContactsByNameWithBreaks={directContactsByNameWithBreaks}
+              rowHeight={params => calcContactRowHeight(contactsByNameWithBreaks, params)}
+              contactsByNameWithBreaks={contactsByNameWithBreaks}
               rowRenderer={renderRow}
               width={leftPaneListWidth}
               autoHeight={false}
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index 86999952e..5473c6e55 100644
--- a/ts/state/selectors/conversations.ts
+++ b/ts/state/selectors/conversations.ts
@@ -462,7 +462,7 @@ export type DirectContactsByNameType = {
 };
 
 // make sure that createSelector is called here so this function is memoized
-export const getDirectContactsByName = createSelector(
+export const getSortedContacts = createSelector(
   getContacts,
   (contacts: Array<ReduxConversationType>): Array<DirectContactsByNameType> => {
     const us = UserUtils.getOurPubKeyStrFromCache();
@@ -475,21 +475,60 @@ export const getDirectContactsByName = createSelector(
         };
       });
 
-    const extractedContactsNoDisplayName = sortBy(
-      extractedContacts.filter(m => !m.displayName),
-      'id'
+    const contactsStartingWithANumber = sortBy(
+      extractedContacts.filter(
+        m => !m.displayName || (m.displayName && m.displayName[0].match(/^[0-9]+$/))
+      ),
+      m => m.displayName || m.id
     );
 
-    const extractedContactsWithDisplayName = sortBy(
-      extractedContacts.filter(m => Boolean(m.displayName)),
+    const contactsWithDisplayName = sortBy(
+      extractedContacts.filter(m => !!m.displayName && !m.displayName[0].match(/^[0-9]+$/)),
       m => m.displayName?.toLowerCase()
     );
 
-    return [...extractedContactsWithDisplayName, ...extractedContactsNoDisplayName];
+    return [...contactsWithDisplayName, ...contactsStartingWithANumber];
   }
 );
 
-export const getPrivateContactsPubkeys = createSelector(getDirectContactsByName, state =>
+export const getSortedContactsWithBreaks = createSelector(
+  getSortedContacts,
+  (contacts: Array<DirectContactsByNameType>): Array<DirectContactsByNameType | string> => {
+    // add a break wherever needed
+    const unknownSection = 'unknown';
+    let currentChar = '';
+    // if the item is a string we consider it to be a break of that string
+    const contactsWithBreaks: Array<DirectContactsByNameType | string> = [];
+
+    contacts.forEach(m => {
+      if (
+        !!m.displayName &&
+        m.displayName[0].toLowerCase() !== currentChar &&
+        !m.displayName[0].match(/^[0-9]+$/)
+      ) {
+        currentChar = m.displayName[0].toLowerCase();
+        contactsWithBreaks.push(currentChar.toUpperCase());
+      } else if (
+        ((m.displayName && m.displayName[0].match(/^[0-9]+$/)) || !m.displayName) &&
+        currentChar !== unknownSection
+      ) {
+        currentChar = unknownSection;
+        contactsWithBreaks.push('#');
+      }
+
+      contactsWithBreaks.push(m);
+    });
+
+    contactsWithBreaks.unshift({
+      id: UserUtils.getOurPubKeyStrFromCache(),
+      displayName: window.i18n('noteToSelf'),
+    });
+
+    return contactsWithBreaks;
+  }
+);
+
+export const getPrivateContactsPubkeys = createSelector(getSortedContacts, state =>
   state.map(m => m.id)
 );
 

From 24f516ab57b05a99b6cd987198eea03a24c89b70 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 14:11:58 +1000
Subject: [PATCH 12/23] feat: search results contact list now matches contact
 list

---
 ts/state/selectors/search.ts | 53 ++++++++++++------------------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/ts/state/selectors/search.ts b/ts/state/selectors/search.ts
index 57a71fde9..2f3c5ce07 100644
--- a/ts/state/selectors/search.ts
+++ b/ts/state/selectors/search.ts
@@ -76,58 +76,41 @@ export type SearchResultsMergedListItem =
 
 export const getSearchResultsList = createSelector([getSearchResults], searchState => {
   const { contactsAndGroups, messages } = searchState;
-  const builtList: Array<SearchResultsMergedListItem> = [];
+  const builtList = [];
 
   if (contactsAndGroups.length) {
-    const us = UserUtils.getOurPubKeyStrFromCache();
-    let usIndex: number = -1;
-
-    const idsWithNameAndType = contactsAndGroups.map(m => ({
+    const contactsWithNameAndType = contactsAndGroups.map(m => ({
       contactConvoId: m.id,
       displayName: m.nickname || m.displayNameInProfile,
       type: m.type,
     }));
 
     const groupsAndCommunities = sortBy(
-      remove(idsWithNameAndType, m => m.type === ConversationTypeEnum.GROUP),
+      remove(contactsWithNameAndType, m => m.type === ConversationTypeEnum.GROUP),
       m => m.displayName?.toLowerCase()
     );
 
-    const idsWithNoDisplayNamesOrStartingWithANumber = sortBy(
-      remove(idsWithNameAndType, m => !m.displayName || m.displayName[0].match(/^[0-9]+$/)),
-      m => m.contactConvoId
+    const contactsStartingWithANumber = sortBy(
+      remove(
+        contactsWithNameAndType,
+        m => !m.displayName || (m.displayName && m.displayName[0].match(/^[0-9]+$/))
+      ),
+      m => m.displayName || m.contactConvoId
     );
 
-    // add a break wherever needed
-    // let currentChar = '';
-    for (let i = 0; i < idsWithNameAndType.length; i++) {
-      const m = idsWithNameAndType[i];
-      if (m.contactConvoId === us) {
-        usIndex = i;
-        continue;
-      }
-      // we might want breaks again in future
-      // if (
-      //   idsWithNameAndType.length > 1 &&
-      //   m.displayName &&
-      //   m.displayName[0].toLowerCase() !== currentChar
-      // ) {
-      //   currentChar = m.displayName[0].toLowerCase();
-      //   builtList.push(currentChar.toUpperCase());
-      // }
-      builtList.push(m);
-    }
-
-    builtList.unshift(...groupsAndCommunities);
+    builtList.push(
+      ...groupsAndCommunities,
+      ...contactsWithNameAndType,
+      ...contactsStartingWithANumber
+    );
 
-    if (idsWithNoDisplayNamesOrStartingWithANumber.length) {
-      // builtList.push('#');
-      builtList.push(...idsWithNoDisplayNamesOrStartingWithANumber);
-    }
+    const us = UserUtils.getOurPubKeyStrFromCache();
+    const hasUs = remove(builtList, m => m.contactConvoId === us);
 
-    if (usIndex !== -1) {
+    if (hasUs.length) {
       builtList.unshift({ contactConvoId: us, displayName: window.i18n('noteToSelf') });
     }
+
     builtList.unshift(window.i18n('sessionConversations'));
   }
 

From be86e0b4399edd034393331de5f0a75e80558661 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 14:17:46 +1000
Subject: [PATCH 13/23] fix: search input clears on escape when focused

---
 ts/components/SessionSearchInput.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx
index d8df8fc7b..bfe7e5a2b 100644
--- a/ts/components/SessionSearchInput.tsx
+++ b/ts/components/SessionSearchInput.tsx
@@ -1,12 +1,13 @@
 import { Dispatch } from '@reduxjs/toolkit';
 import { debounce } from 'lodash';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { clearSearch, search, updateSearchTerm } from '../state/ducks/search';
 import { getConversationsCount } from '../state/selectors/conversations';
 import { getLeftOverlayMode } from '../state/selectors/section';
 import { SessionIconButton } from './icon';
+import { useHotkey } from '../hooks/useHotkey';
 
 const StyledSearchInput = styled.div`
   height: var(--search-input-height);
@@ -70,6 +71,15 @@ export const SessionSearchInput = () => {
   const isGroupCreationSearch = useSelector(getLeftOverlayMode) === 'closed-group';
   const convoCount = useSelector(getConversationsCount);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useHotkey('Escape', () => {
+    if (inputRef.current !== null && inputRef.current === document.activeElement) {
+      setCurrentSearchTerm('');
+      dispatch(clearSearch());
+    }
+  });
+
   // just after onboard we only have a conversation with ourself
   if (convoCount <= 1) {
     return null;
@@ -87,6 +97,7 @@ export const SessionSearchInput = () => {
         iconType="search"
       />
       <StyledInput
+        ref={inputRef}
         value={currentSearchTerm}
         onChange={e => {
           const inputValue = e.target.value;

From 8796355ce392ff87cd2a00a241eb49c3c00113d7 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 14:59:52 +1000
Subject: [PATCH 14/23] feat: on settings screen if we press escape go back to
 the messages view

---
 ts/components/leftpane/ActionsPanel.tsx | 17 ++++++++++++++++-
 ts/state/selectors/modal.ts             | 13 +++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
index 4d27e45c4..1186699ef 100644
--- a/ts/components/leftpane/ActionsPanel.tsx
+++ b/ts/components/leftpane/ActionsPanel.tsx
@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import useInterval from 'react-use/lib/useInterval';
@@ -47,6 +47,8 @@ import { switchThemeTo } from '../../themes/switchTheme';
 import { ReleasedFeatures } from '../../util/releaseFeature';
 import { getOppositeTheme } from '../../util/theme';
 import { SessionNotificationCount } from '../icon/SessionNotificationCount';
+import { useHotkey } from '../../hooks/useHotkey';
+import { getIsModalVisble } from '../../state/selectors/modal';
 
 const Section = (props: { type: SectionType }) => {
   const ourNumber = useSelector(getOurNumber);
@@ -54,6 +56,7 @@ const Section = (props: { type: SectionType }) => {
   const dispatch = useDispatch();
   const { type } = props;
 
+  const isModalVisible = useSelector(getIsModalVisble);
   const isDarkTheme = useIsDarkTheme();
   const focusedSection = useSelector(getFocusedSection);
   const isSelected = focusedSection === props.type;
@@ -82,6 +85,17 @@ const Section = (props: { type: SectionType }) => {
     }
   };
 
+  const settingsIconRef = useRef<HTMLButtonElement>(null);
+
+  useHotkey('Escape', () => {
+    if (type === SectionType.Settings && !isModalVisible) {
+      settingsIconRef.current?.blur();
+      dispatch(clearSearch());
+      dispatch(showLeftPaneSection(SectionType.Message));
+      dispatch(resetLeftOverlayMode());
+    }
+  });
+
   if (type === SectionType.Profile) {
     return (
       <Avatar
@@ -116,6 +130,7 @@ const Section = (props: { type: SectionType }) => {
           iconType={'gear'}
           onClick={handleClick}
           isSelected={isSelected}
+          ref={settingsIconRef}
         />
       );
     case SectionType.PathIndicator:
diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts
index 71ce6b581..a1896f736 100644
--- a/ts/state/selectors/modal.ts
+++ b/ts/state/selectors/modal.ts
@@ -27,6 +27,19 @@ export const getModal = (state: StateType): ModalState => {
   return state.modals;
 };
 
+export const getIsModalVisble = createSelector(getModal, (state: ModalState): boolean => {
+  const modalValues = Object.values(state);
+  let visible = false;
+  for (let i = 0; i < modalValues.length; i++) {
+    if (modalValues[i] !== null) {
+      visible = true;
+      break;
+    }
+  }
+
+  return visible;
+});
+
 export const getConfirmModal = createSelector(
   getModal,
   (state: ModalState): ConfirmModalState => state.confirmModal

From fd7d6e322b62783e0c90d6451c16a01d0c3361f1 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 15:30:18 +1000
Subject: [PATCH 15/23] fix: recovery qr toggle shortcut

---
 .../settings/section/CategoryRecoveryPassword.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx
index d9abcb06d..c3f9f06e4 100644
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx
@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
 import styled from 'styled-components';
 import { useIconToImageURL } from '../../../hooks/useIconToImageURL';
@@ -24,6 +24,8 @@ import { SpacerMD, SpacerSM } from '../../basic/Text';
 import { CopyToClipboardIcon } from '../../buttons/CopyToClipboardButton';
 import { SessionIconButton } from '../../icon';
 import { SessionSettingButtonItem, SessionSettingsItemWrapper } from '../SessionSettingListItem';
+import { useHotkey } from '../../../hooks/useHotkey';
+import { getIsModalVisble } from '../../../state/selectors/modal';
 
 const StyledSettingsItemContainer = styled.div`
   p {
@@ -62,6 +64,7 @@ export const SettingsCategoryRecoveryPassword = () => {
   const [isQRVisible, setIsQRVisible] = useState(false);
 
   const hideRecoveryPassword = useHideRecoveryPasswordEnabled();
+  const isModalVisible = useSelector(getIsModalVisble);
 
   const isDarkTheme = useIsDarkTheme();
   const { dataURL, iconSize, iconColor, backgroundColor, loading } = useIconToImageURL(qrLogoProps);
@@ -90,6 +93,16 @@ export const SettingsCategoryRecoveryPassword = () => {
     }
   });
 
+  useHotkey(
+    'v',
+    () => {
+      if (!isModalVisible) {
+        setIsQRVisible(!isQRVisible);
+      }
+    },
+    (hasPassword && !passwordValid) || loadingSeed || hideRecoveryPassword
+  );
+
   if ((hasPassword && !passwordValid) || loadingSeed || hideRecoveryPassword) {
     return null;
   }

From 4478ee160d54c5842466e77adf3624f95df2b1af Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 16:29:59 +1000
Subject: [PATCH 16/23] feat: stop polling if restoring and we push the back
 button

---
 .../registration/components/BackButton.tsx    |  8 +++++++
 .../registration/stages/RestoreAccount.tsx    | 21 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx
index 6f7f0388d..f1ec39f7b 100644
--- a/ts/components/registration/components/BackButton.tsx
+++ b/ts/components/registration/components/BackButton.tsx
@@ -28,12 +28,14 @@ export const BackButtonWithinContainer = ({
   children,
   margin,
   callback,
+  onQuitVisible,
   shouldQuitOnClick,
   quitMessage,
 }: {
   children: ReactNode;
   margin?: string;
   callback?: () => void;
+  onQuitVisible?: () => void;
   shouldQuitOnClick?: boolean;
   quitMessage?: string;
 }) => {
@@ -48,6 +50,7 @@ export const BackButtonWithinContainer = ({
       <div style={{ margin }}>
         <BackButton
           callback={callback}
+          onQuitVisible={onQuitVisible}
           shouldQuitOnClick={shouldQuitOnClick}
           quitMessage={quitMessage}
         />
@@ -59,10 +62,12 @@ export const BackButtonWithinContainer = ({
 
 export const BackButton = ({
   callback,
+  onQuitVisible,
   shouldQuitOnClick,
   quitMessage,
 }: {
   callback?: () => void;
+  onQuitVisible?: () => void;
   shouldQuitOnClick?: boolean;
   quitMessage?: string;
 }) => {
@@ -81,6 +86,9 @@ export const BackButton = ({
       padding={'0'}
       onClick={() => {
         if (shouldQuitOnClick && quitMessage) {
+          if (onQuitVisible) {
+            onQuitVisible();
+          }
           dispatch(
             updateQuitModal({
               title: window.i18n('warning'),
diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx
index cbfc3b320..777efd254 100644
--- a/ts/components/registration/stages/RestoreAccount.tsx
+++ b/ts/components/registration/stages/RestoreAccount.tsx
@@ -117,6 +117,8 @@ async function signInWithNewDisplayName({
   }
 }
 
+let abortController = new AbortController();
+
 export const RestoreAccount = () => {
   const step = useOnboardAccountRestorationStep();
   const recoveryPassword = useRecoveryPassword();
@@ -136,8 +138,8 @@ export const RestoreAccount = () => {
     const trimmedPassword = recoveryPassword.trim();
     setRecoveryPassword(trimmedPassword);
 
-    const abortController = new AbortController();
     try {
+      abortController = new AbortController();
       dispatch(setProgress(0));
       dispatch(setAccountRestorationStep(AccountRestoration.Loading));
       await signInAndFetchDisplayName({
@@ -201,6 +203,23 @@ export const RestoreAccount = () => {
       margin={'2px 0 0 -36px'}
       shouldQuitOnClick={step !== AccountRestoration.RecoveryPassword}
       quitMessage={window.i18n('onboardingBackLoadAccount')}
+      onQuitVisible={() => {
+        if (!abortController.signal.aborted) {
+          abortController.abort();
+        }
+        dispatch(setRecoveryPassword(''));
+        dispatch(setDisplayName(''));
+        dispatch(setProgress(0));
+        dispatch(setRecoveryPasswordError(undefined));
+        dispatch(setDisplayNameError(undefined));
+        if (
+          step === AccountRestoration.Loading ||
+          step === AccountRestoration.Finishing ||
+          step === AccountRestoration.Finished
+        ) {
+          dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
+        }
+      }}
       callback={() => {
         dispatch(setRecoveryPassword(''));
         dispatch(setDisplayName(''));

From 6c291e38c4e1cbe453cbd233f2c2d74992bf3c0f Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Mon, 5 Aug 2024 14:20:15 +1000
Subject: [PATCH 17/23] fix: disable attachments and voice messages and warn a
 user when starting a new convo

even if they haven't sent a message request yet
---
 ts/components/conversation/MessageRequestButtons.tsx |  8 ++++++--
 ts/components/conversation/SubtleNotification.tsx    |  3 ++-
 .../conversation/composition/CompositionButtons.tsx  |  5 ++++-
 .../conversation/header/ConversationHeader.tsx       |  8 ++++++--
 .../leftpane/conversation-list-item/MessageItem.tsx  |  4 +++-
 ts/hooks/useParamSelector.ts                         |  4 +++-
 ts/models/conversation.ts                            | 12 +++++++++++-
 7 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/ts/components/conversation/MessageRequestButtons.tsx b/ts/components/conversation/MessageRequestButtons.tsx
index 13872f90d..ffdc58b7c 100644
--- a/ts/components/conversation/MessageRequestButtons.tsx
+++ b/ts/components/conversation/MessageRequestButtons.tsx
@@ -6,7 +6,10 @@ import {
   declineConversationWithConfirm,
 } from '../../interactions/conversationInteractions';
 import { getConversationController } from '../../session/conversations';
-import { hasSelectedConversationIncomingMessages } from '../../state/selectors/conversations';
+import {
+  getSelectedHasMessages,
+  hasSelectedConversationIncomingMessages,
+} from '../../state/selectors/conversations';
 import { useSelectedConversationKey } from '../../state/selectors/selectedConversation';
 import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
 import {
@@ -78,9 +81,10 @@ const handleAcceptConversationRequest = async (convoId: string) => {
 export const ConversationMessageRequestButtons = () => {
   const selectedConvoId = useSelectedConversationKey();
 
+  const hasMessages = useSelector(getSelectedHasMessages);
   const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
   const isIncomingRequest = useIsIncomingRequest(selectedConvoId);
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoId);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoId, hasMessages);
 
   if (!selectedConvoId || (!isIncomingRequest && !isOutgoingRequest)) {
     return null;
diff --git a/ts/components/conversation/SubtleNotification.tsx b/ts/components/conversation/SubtleNotification.tsx
index 53813f592..6ec6080b7 100644
--- a/ts/components/conversation/SubtleNotification.tsx
+++ b/ts/components/conversation/SubtleNotification.tsx
@@ -35,7 +35,8 @@ const TextInner = styled.div`
  */
 export const ConversationOutgoingRequestExplanation = () => {
   const selectedConversation = useSelectedConversationKey();
-  const isOutgoingMessageRequest = useIsOutgoingRequest(selectedConversation);
+  const hasMessages = useSelector(getSelectedHasMessages);
+  const isOutgoingMessageRequest = useIsOutgoingRequest(selectedConversation, hasMessages);
   const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
 
   const showMsgRequestUI = selectedConversation && isOutgoingMessageRequest;
diff --git a/ts/components/conversation/composition/CompositionButtons.tsx b/ts/components/conversation/composition/CompositionButtons.tsx
index 00af99e9d..47d8d0051 100644
--- a/ts/components/conversation/composition/CompositionButtons.tsx
+++ b/ts/components/conversation/composition/CompositionButtons.tsx
@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import { useIsOutgoingRequest } from '../../../hooks/useParamSelector';
 import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { SessionIconButton } from '../../icon';
+import { getSelectedHasMessages } from '../../../state/selectors/conversations';
 
 const StyledChatButtonContainer = styled.div<{ disabled?: boolean }>`
   .session-icon-button {
@@ -20,7 +22,8 @@ const StyledChatButtonContainer = styled.div<{ disabled?: boolean }>`
 
 export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
   const selectedConvoKey = useSelectedConversationKey();
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
+  const hasMessages = useSelector(getSelectedHasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey, hasMessages);
 
   return (
     <StyledChatButtonContainer disabled={isOutgoingRequest}>
diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx
index 238c7aba6..0097b6e90 100644
--- a/ts/components/conversation/header/ConversationHeader.tsx
+++ b/ts/components/conversation/header/ConversationHeader.tsx
@@ -1,5 +1,8 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { isMessageSelectionMode } from '../../../state/selectors/conversations';
+import {
+  getSelectedHasMessages,
+  isMessageSelectionMode,
+} from '../../../state/selectors/conversations';
 
 import { openRightPanel } from '../../../state/ducks/conversations';
 
@@ -13,7 +16,8 @@ import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
   const selectedConvoKey = useSelectedConversationKey();
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
+  const hasMessages = useSelector(getSelectedHasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey, hasMessages);
 
   const dispatch = useDispatch();
 
diff --git a/ts/components/leftpane/conversation-list-item/MessageItem.tsx b/ts/components/leftpane/conversation-list-item/MessageItem.tsx
index a1e653137..1cf873f5e 100644
--- a/ts/components/leftpane/conversation-list-item/MessageItem.tsx
+++ b/ts/components/leftpane/conversation-list-item/MessageItem.tsx
@@ -18,6 +18,7 @@ import { MessageBody } from '../../conversation/message/message-content/MessageB
 import { SessionIcon } from '../../icon';
 import { InteractionItem } from './InteractionItem';
 import { LastMessageStatusType } from '../../../state/ducks/types';
+import { getSelectedHasMessages } from '../../../state/selectors/conversations';
 
 export const MessageItem = () => {
   const conversationId = useConvoIdFromContext();
@@ -27,7 +28,8 @@ export const MessageItem = () => {
   const hasUnread = useHasUnread(conversationId);
   const isConvoTyping = useIsTyping(conversationId);
   const isMessageRequest = useSelector(getIsMessageRequestOverlayShown);
-  const isOutgoingRequest = useIsOutgoingRequest(conversationId);
+  const hasMessages = useSelector(getSelectedHasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(conversationId, hasMessages);
 
   const isSearchingMode = useSelector(isSearching);
 
diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts
index e51be0c27..cd212c4d1 100644
--- a/ts/hooks/useParamSelector.ts
+++ b/ts/hooks/useParamSelector.ts
@@ -194,11 +194,12 @@ export function useIsIncomingRequest(convoId?: string) {
   );
 }
 
-export function useIsOutgoingRequest(convoId?: string) {
+export function useIsOutgoingRequest(convoId?: string, hasMessages?: boolean) {
   const convoProps = useConversationPropsById(convoId);
   if (!convoProps) {
     return false;
   }
+
   return Boolean(
     convoProps &&
       hasValidOutgoingRequestValues({
@@ -208,6 +209,7 @@ export function useIsOutgoingRequest(convoId?: string) {
         isPrivate: convoProps.isPrivate || false,
         isBlocked: convoProps.isBlocked || false,
         activeAt: convoProps.activeAt || 0,
+        hasMessages,
       })
   );
 }
diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts
index 2f512c9e2..381b794b0 100644
--- a/ts/models/conversation.ts
+++ b/ts/models/conversation.ts
@@ -2588,6 +2588,7 @@ export function hasValidOutgoingRequestValues({
   isBlocked,
   isPrivate,
   activeAt,
+  hasMessages,
 }: {
   isMe: boolean;
   isApproved: boolean;
@@ -2595,10 +2596,19 @@ export function hasValidOutgoingRequestValues({
   isBlocked: boolean;
   isPrivate: boolean;
   activeAt: number;
+  hasMessages?: boolean;
 }): boolean {
   const isActive = activeAt && isFinite(activeAt) && activeAt > 0;
 
-  return Boolean(!isMe && isApproved && isPrivate && !isBlocked && !didApproveMe && isActive);
+  // Started a new message, but haven't sent a message yet
+  const emptyConvo =
+    !hasMessages && !isMe && !isApproved && isPrivate && !isBlocked && !didApproveMe && !!isActive;
+
+  // Started a new message, and sent a message
+  const sentOutgoingRequest =
+    !isMe && isApproved && isPrivate && !isBlocked && !didApproveMe && !!isActive;
+
+  return emptyConvo || sentOutgoingRequest;
 }
 
 /**

From f12eef4a51d704052383872fee309e950e8a07b1 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Mon, 5 Aug 2024 14:33:38 +1000
Subject: [PATCH 18/23] fix: adjust about window style

---
 ts/components/AboutView.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx
index 05f97a140..751e460a1 100644
--- a/ts/components/AboutView.tsx
+++ b/ts/components/AboutView.tsx
@@ -21,8 +21,12 @@ const StyledContent = styled(Flex)`
     color: var(--text-primary-color);
   }
 
-  img {
-    margin: var(--margins-lg) 0 var(--margins-md);
+  img:first-child {
+    margin: var(--margins-2xl) 0 var(--margins-lg);
+  }
+
+  img:nth-child(2) {
+    margin-bottom: var(--margins-xl);
   }
 
   .session-button {
@@ -67,7 +71,18 @@ export const AboutView = () => {
         justifyContent={'center'}
         alignItems={'center'}
       >
-        <img src="images/session/session_icon.png" width="250" height="250" alt="session icon" />
+        <img
+          src="images/session/session_icon.png"
+          alt="session brand icon"
+          width="200"
+          height="200"
+        />
+        <img
+          src="images/session/session-text.svg"
+          alt="session brand text"
+          width={192}
+          height={26}
+        />
 
         <CopyToClipboardButton
           className="version"

From 29d4f8497cd1ced5813c62f4a3e20adfba108b63 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Mon, 5 Aug 2024 15:33:46 +1000
Subject: [PATCH 19/23] fix: restoring groups should use the libsession joined
 at timestamp

and then update using the active_at value as we read messages
---
 ts/receiver/configMessage.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ts/receiver/configMessage.ts b/ts/receiver/configMessage.ts
index abe4c49d2..2b680fa07 100644
--- a/ts/receiver/configMessage.ts
+++ b/ts/receiver/configMessage.ts
@@ -602,6 +602,8 @@ async function handleLegacyGroupUpdate(latestEnvelopeTimestamp: number) {
 
     const members = fromWrapper.members.map(m => m.pubkeyHex);
     const admins = fromWrapper.members.filter(m => m.isAdmin).map(m => m.pubkeyHex);
+
+    const creationTimestamp = fromWrapper.joinedAtSeconds ? fromWrapper.joinedAtSeconds * 1000 : 0;
     // then for all the existing legacy group in the wrapper, we need to override the field of what we have in the DB with what is in the wrapper
     // We only set group admins on group creation
     const groupDetails: ClosedGroup.GroupInfo = {
@@ -610,10 +612,9 @@ async function handleLegacyGroupUpdate(latestEnvelopeTimestamp: number) {
       members,
       admins,
       activeAt:
-        !!legacyGroupConvo.get('active_at') &&
-        legacyGroupConvo.get('active_at') < latestEnvelopeTimestamp
+        !!legacyGroupConvo.get('active_at') && legacyGroupConvo.get('active_at') > creationTimestamp
           ? legacyGroupConvo.get('active_at')
-          : latestEnvelopeTimestamp,
+          : creationTimestamp,
     };
 
     await ClosedGroup.updateOrCreateClosedGroup(groupDetails);

From 043739092203ee0b98c4dc5f7dc3c93944aa30f7 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@getsession.org>
Date: Tue, 6 Aug 2024 11:43:45 +1000
Subject: [PATCH 20/23] fix: show msg request description using libsession
 state and not msgs

---
 .../conversation/MessageRequestButtons.tsx    |  8 ++---
 .../conversation/SubtleNotification.tsx       | 32 ++++++++++++-------
 .../composition/CompositionButtons.tsx        |  5 +--
 .../header/ConversationHeader.tsx             |  8 ++---
 .../conversation-list-item/MessageItem.tsx    |  6 ++--
 ts/hooks/useParamSelector.ts                  |  3 +-
 ts/models/conversation.ts                     |  5 +--
 7 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/ts/components/conversation/MessageRequestButtons.tsx b/ts/components/conversation/MessageRequestButtons.tsx
index ffdc58b7c..13872f90d 100644
--- a/ts/components/conversation/MessageRequestButtons.tsx
+++ b/ts/components/conversation/MessageRequestButtons.tsx
@@ -6,10 +6,7 @@ import {
   declineConversationWithConfirm,
 } from '../../interactions/conversationInteractions';
 import { getConversationController } from '../../session/conversations';
-import {
-  getSelectedHasMessages,
-  hasSelectedConversationIncomingMessages,
-} from '../../state/selectors/conversations';
+import { hasSelectedConversationIncomingMessages } from '../../state/selectors/conversations';
 import { useSelectedConversationKey } from '../../state/selectors/selectedConversation';
 import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
 import {
@@ -81,10 +78,9 @@ const handleAcceptConversationRequest = async (convoId: string) => {
 export const ConversationMessageRequestButtons = () => {
   const selectedConvoId = useSelectedConversationKey();
 
-  const hasMessages = useSelector(getSelectedHasMessages);
   const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
   const isIncomingRequest = useIsIncomingRequest(selectedConvoId);
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoId, hasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoId);
 
   if (!selectedConvoId || (!isIncomingRequest && !isOutgoingRequest)) {
     return null;
diff --git a/ts/components/conversation/SubtleNotification.tsx b/ts/components/conversation/SubtleNotification.tsx
index 6ec6080b7..86bbc8422 100644
--- a/ts/components/conversation/SubtleNotification.tsx
+++ b/ts/components/conversation/SubtleNotification.tsx
@@ -10,10 +10,12 @@ import {
   useSelectedConversationKey,
   useSelectedHasDisabledBlindedMsgRequests,
   useSelectedIsNoteToSelf,
+  useSelectedIsPrivate,
   useSelectedNicknameOrProfileNameOrShortenedPubkey,
 } from '../../state/selectors/selectedConversation';
 import { LocalizerKeys } from '../../types/LocalizerKeys';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
+import { SessionUtilContact } from '../../session/utils/libsession/libsession_utils_contacts';
 
 const Container = styled.div`
   display: flex;
@@ -35,21 +37,29 @@ const TextInner = styled.div`
  */
 export const ConversationOutgoingRequestExplanation = () => {
   const selectedConversation = useSelectedConversationKey();
-  const hasMessages = useSelector(getSelectedHasMessages);
-  const isOutgoingMessageRequest = useIsOutgoingRequest(selectedConversation, hasMessages);
+  const isOutgoingMessageRequest = useIsOutgoingRequest(selectedConversation);
   const hasIncomingMessages = useSelector(hasSelectedConversationIncomingMessages);
 
   const showMsgRequestUI = selectedConversation && isOutgoingMessageRequest;
 
-  if (!showMsgRequestUI || hasIncomingMessages) {
+  const selectedIsPrivate = useSelectedIsPrivate();
+
+  if (!showMsgRequestUI || hasIncomingMessages || !selectedIsPrivate) {
     return null;
   }
-
-  return (
-    <Container data-testid={'empty-conversation-control-message'} style={{ padding: 0 }}>
-      <TextInner>{window.i18n('messageRequestPendingDescription')}</TextInner>
-    </Container>
-  );
+  const contactFromLibsession = SessionUtilContact.getContactCached(selectedConversation);
+  // Note: we want to display this description when the conversation is private (or blinded) AND
+  // - the conversation is brand new (and not saved yet in libsession: transient conversation),
+  // - the conversation exists in libsession but we are not approved yet.
+  // This works because a blinded conversation is not saved in libsession currently, and will only be once approved_me is true
+  if (!contactFromLibsession || !contactFromLibsession.approvedMe) {
+    return (
+      <Container data-testid={'empty-conversation-control-message'} style={{ padding: 0 }}>
+        <TextInner>{window.i18n('messageRequestPendingDescription')}</TextInner>
+      </Container>
+    );
+  }
+  return null;
 };
 
 /**
@@ -80,7 +90,7 @@ export const ConversationIncomingRequestExplanation = () => {
 export const NoMessageInConversation = () => {
   const selectedConversation = useSelectedConversationKey();
 
-  const hasMessage = useSelector(getSelectedHasMessages);
+  const hasMessages = useSelector(getSelectedHasMessages);
 
   const isMe = useSelectedIsNoteToSelf();
   const canWrite = useSelector(getSelectedCanWrite);
@@ -88,7 +98,7 @@ export const NoMessageInConversation = () => {
   // TODOLATER use this selector across the whole application (left pane excluded)
   const nameToRender = useSelectedNicknameOrProfileNameOrShortenedPubkey();
 
-  if (!selectedConversation || hasMessage) {
+  if (!selectedConversation || hasMessages) {
     return null;
   }
   let localizedKey: LocalizerKeys = 'noMessagesInEverythingElse';
diff --git a/ts/components/conversation/composition/CompositionButtons.tsx b/ts/components/conversation/composition/CompositionButtons.tsx
index 47d8d0051..00af99e9d 100644
--- a/ts/components/conversation/composition/CompositionButtons.tsx
+++ b/ts/components/conversation/composition/CompositionButtons.tsx
@@ -1,10 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { useIsOutgoingRequest } from '../../../hooks/useParamSelector';
 import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { SessionIconButton } from '../../icon';
-import { getSelectedHasMessages } from '../../../state/selectors/conversations';
 
 const StyledChatButtonContainer = styled.div<{ disabled?: boolean }>`
   .session-icon-button {
@@ -22,8 +20,7 @@ const StyledChatButtonContainer = styled.div<{ disabled?: boolean }>`
 
 export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
   const selectedConvoKey = useSelectedConversationKey();
-  const hasMessages = useSelector(getSelectedHasMessages);
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey, hasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
 
   return (
     <StyledChatButtonContainer disabled={isOutgoingRequest}>
diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx
index 0097b6e90..238c7aba6 100644
--- a/ts/components/conversation/header/ConversationHeader.tsx
+++ b/ts/components/conversation/header/ConversationHeader.tsx
@@ -1,8 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  getSelectedHasMessages,
-  isMessageSelectionMode,
-} from '../../../state/selectors/conversations';
+import { isMessageSelectionMode } from '../../../state/selectors/conversations';
 
 import { openRightPanel } from '../../../state/ducks/conversations';
 
@@ -16,8 +13,7 @@ import { ConversationHeaderTitle } from './ConversationHeaderTitle';
 export const ConversationHeaderWithDetails = () => {
   const isSelectionMode = useSelector(isMessageSelectionMode);
   const selectedConvoKey = useSelectedConversationKey();
-  const hasMessages = useSelector(getSelectedHasMessages);
-  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey, hasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(selectedConvoKey);
 
   const dispatch = useDispatch();
 
diff --git a/ts/components/leftpane/conversation-list-item/MessageItem.tsx b/ts/components/leftpane/conversation-list-item/MessageItem.tsx
index 1cf873f5e..644138225 100644
--- a/ts/components/leftpane/conversation-list-item/MessageItem.tsx
+++ b/ts/components/leftpane/conversation-list-item/MessageItem.tsx
@@ -10,6 +10,7 @@ import {
   useIsTyping,
   useLastMessage,
 } from '../../../hooks/useParamSelector';
+import { LastMessageStatusType } from '../../../state/ducks/types';
 import { isSearching } from '../../../state/selectors/search';
 import { getIsMessageRequestOverlayShown } from '../../../state/selectors/section';
 import { assertUnreachable } from '../../../types/sqlSharedTypes';
@@ -17,8 +18,6 @@ import { TypingAnimation } from '../../conversation/TypingAnimation';
 import { MessageBody } from '../../conversation/message/message-content/MessageBody';
 import { SessionIcon } from '../../icon';
 import { InteractionItem } from './InteractionItem';
-import { LastMessageStatusType } from '../../../state/ducks/types';
-import { getSelectedHasMessages } from '../../../state/selectors/conversations';
 
 export const MessageItem = () => {
   const conversationId = useConvoIdFromContext();
@@ -28,8 +27,7 @@ export const MessageItem = () => {
   const hasUnread = useHasUnread(conversationId);
   const isConvoTyping = useIsTyping(conversationId);
   const isMessageRequest = useSelector(getIsMessageRequestOverlayShown);
-  const hasMessages = useSelector(getSelectedHasMessages);
-  const isOutgoingRequest = useIsOutgoingRequest(conversationId, hasMessages);
+  const isOutgoingRequest = useIsOutgoingRequest(conversationId);
 
   const isSearchingMode = useSelector(isSearching);
 
diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts
index cd212c4d1..142a65471 100644
--- a/ts/hooks/useParamSelector.ts
+++ b/ts/hooks/useParamSelector.ts
@@ -194,7 +194,7 @@ export function useIsIncomingRequest(convoId?: string) {
   );
 }
 
-export function useIsOutgoingRequest(convoId?: string, hasMessages?: boolean) {
+export function useIsOutgoingRequest(convoId?: string) {
   const convoProps = useConversationPropsById(convoId);
   if (!convoProps) {
     return false;
@@ -209,7 +209,6 @@ export function useIsOutgoingRequest(convoId?: string, hasMessages?: boolean) {
         isPrivate: convoProps.isPrivate || false,
         isBlocked: convoProps.isBlocked || false,
         activeAt: convoProps.activeAt || 0,
-        hasMessages,
       })
   );
 }
diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts
index 381b794b0..03e2fcd68 100644
--- a/ts/models/conversation.ts
+++ b/ts/models/conversation.ts
@@ -2588,7 +2588,6 @@ export function hasValidOutgoingRequestValues({
   isBlocked,
   isPrivate,
   activeAt,
-  hasMessages,
 }: {
   isMe: boolean;
   isApproved: boolean;
@@ -2596,13 +2595,11 @@ export function hasValidOutgoingRequestValues({
   isBlocked: boolean;
   isPrivate: boolean;
   activeAt: number;
-  hasMessages?: boolean;
 }): boolean {
   const isActive = activeAt && isFinite(activeAt) && activeAt > 0;
 
   // Started a new message, but haven't sent a message yet
-  const emptyConvo =
-    !hasMessages && !isMe && !isApproved && isPrivate && !isBlocked && !didApproveMe && !!isActive;
+  const emptyConvo = !isMe && !isApproved && isPrivate && !isBlocked && !didApproveMe && !!isActive;
 
   // Started a new message, and sent a message
   const sentOutgoingRequest =

From 7f2660e61506401e524dc671c4d5b0145b1cf5b2 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Tue, 6 Aug 2024 14:24:17 +1000
Subject: [PATCH 21/23] fix: return to qr view on profile modal when exiting
 the lightbox

---
 .../dialog/edit-profile/EditProfileDialog.tsx |  2 +-
 .../dialog/edit-profile/components.tsx        |  2 +-
 ts/components/lightbox/Lightbox.tsx           | 19 +++++++++++--------
 ts/components/lightbox/LightboxGallery.tsx    |  3 ++-
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/ts/components/dialog/edit-profile/EditProfileDialog.tsx b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
index d679b672f..7657c0bb1 100644
--- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx
+++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx
@@ -352,7 +352,7 @@ export const EditProfileDialog = () => {
           <YourSessionIDSelectable />
           <SessionSpinner loading={loading} height={'74px'} />
           {!loading ? <Spacer2XL /> : null}
-          {mode === 'default' || mode === 'qr' ? (
+          {mode === 'default' || mode === 'qr' || mode === 'lightbox' ? (
             <Flex
               container={true}
               justifyContent={mode === 'default' ? 'space-between' : 'center'}
diff --git a/ts/components/dialog/edit-profile/components.tsx b/ts/components/dialog/edit-profile/components.tsx
index 63adb50f7..08db916b8 100644
--- a/ts/components/dialog/edit-profile/components.tsx
+++ b/ts/components/dialog/edit-profile/components.tsx
@@ -36,7 +36,7 @@ export const QRView = ({
       loading={loading}
       onClick={(fileName, dataUrl) => {
         const lightBoxOptions = prepareQRCodeForLightBox(fileName, dataUrl, () => {
-          setMode('edit');
+          setMode('qr');
         });
         window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions));
         setMode('lightbox');
diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx
index ad4b261a7..8df6e2c77 100644
--- a/ts/components/lightbox/Lightbox.tsx
+++ b/ts/components/lightbox/Lightbox.tsx
@@ -28,6 +28,7 @@ type Props = {
   onNext?: () => void;
   onPrevious?: () => void;
   onSave?: () => void;
+  onClose?: () => void;
 };
 
 const CONTROLS_WIDTH = 50;
@@ -273,18 +274,25 @@ export const LightboxObject = ({
 export const Lightbox = (props: Props) => {
   const renderedRef = useRef<any>(null);
   const dispatch = useDispatch();
-  const { caption, contentType, objectURL, onNext, onPrevious, onSave } = props;
+  const { caption, contentType, objectURL, onNext, onPrevious, onSave, onClose } = props;
 
   const onObjectClick = (event: any) => {
     event.stopPropagation();
     dispatch(updateLightBoxOptions(null));
   };
 
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    dispatch(updateLightBoxOptions(null));
+  };
+
   const onContainerClick = (event: MouseEvent<HTMLDivElement>) => {
     if (renderedRef && event.target === renderedRef.current) {
       return;
     }
-    dispatch(updateLightBoxOptions(null));
+    handleClose();
   };
 
   return (
@@ -306,12 +314,7 @@ export const Lightbox = (props: Props) => {
         </div>
         <div style={styles.controls as any}>
           <Flex container={true}>
-            <IconButton
-              type="close"
-              onClick={() => {
-                dispatch(updateLightBoxOptions(null));
-              }}
-            />
+            <IconButton type="close" onClick={handleClose} />
           </Flex>
 
           {onSave ? <IconButton type="save" onClick={onSave} style={styles.saveButton} /> : null}
diff --git a/ts/components/lightbox/LightboxGallery.tsx b/ts/components/lightbox/LightboxGallery.tsx
index e1ab69137..d3c4055bf 100644
--- a/ts/components/lightbox/LightboxGallery.tsx
+++ b/ts/components/lightbox/LightboxGallery.tsx
@@ -96,10 +96,10 @@ export const LightboxGallery = (props: Props) => {
   useKey(
     'Escape',
     () => {
-      dispatch(updateLightBoxOptions(null));
       if (onClose) {
         onClose();
       }
+      dispatch(updateLightBoxOptions(null));
     },
     undefined,
     [currentIndex, updateLightBoxOptions, dispatch, onClose]
@@ -122,6 +122,7 @@ export const LightboxGallery = (props: Props) => {
       onPrevious={hasPrevious ? onPrevious : undefined}
       onNext={hasNext ? onNext : undefined}
       onSave={handleSave}
+      onClose={onClose}
       objectURL={objectURL}
       caption={caption}
       contentType={selectedMedia.contentType}

From 935175120ac9ecaef0caab9d46d6f66398fef2c2 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Tue, 6 Aug 2024 14:47:28 +1000
Subject: [PATCH 22/23] fix: make sure when using pxValueToNumber we pass valid
 numbers

---
 ts/themes/globals.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 42a92ace8..40c3e8f56 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -8,7 +8,11 @@ function setDuration(duration: number | string) {
 }
 
 export function pxValueToNumber(value: string) {
-  return Number(value.replace('px', ''));
+  const numberValue = Number(value.replace('px', ''));
+  if (Number.isNaN(numberValue)) {
+    throw new Error('Invalid number value');
+  }
+  return numberValue;
 }
 
 // These variables are independent of the current theme

From 21180c28ff0a791ea8370a9b25f71ce5d71e8728 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Tue, 6 Aug 2024 14:50:40 +1000
Subject: [PATCH 23/23] fix: simplify getIsModalVisable Selector

---
 ts/state/selectors/modal.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts
index a1896f736..04054402c 100644
--- a/ts/state/selectors/modal.ts
+++ b/ts/state/selectors/modal.ts
@@ -29,15 +29,13 @@ export const getModal = (state: StateType): ModalState => {
 
 export const getIsModalVisble = createSelector(getModal, (state: ModalState): boolean => {
   const modalValues = Object.values(state);
-  let visible = false;
   for (let i = 0; i < modalValues.length; i++) {
     if (modalValues[i] !== null) {
-      visible = true;
-      break;
+      return true;
     }
   }
 
-  return visible;
+  return false;
 });
 
 export const getConfirmModal = createSelector(