chore: cleanup PR before review

Author: Bilb

ts/components/SessionQRCode.tsx

@@ -123,7 +123,7 @@ export function SessionQRCode(props: SessionQRCodeProps) {
       $alignItems="center"
       size={size}
       id={id}
-      title={tr('download')}
+      title={tr('fullScreenToggle')}
       aria-label={ariaLabel || 'QR code'}
       onClick={(event: MouseEvent<HTMLDivElement>) => {
         event.preventDefault();

ts/components/SessionWrapperModal.tsx

@@ -15,6 +15,23 @@ import { LUCIDE_ICONS_UNICODE } from './icon/lucide';
 import { IsModalScrolledContext, useIsModalScrolled } from '../contexts/IsModalScrolledContext';
 import { OnModalCloseContext, useOnModalClose } from '../contexts/OnModalCloseContext';
 
+type WithExtraLeftButton = {
+  /**
+   * A button to be displayed on the left side of the header title.
+   * If all you want is a close button, use showExitIcon instead.
+   * Check other usages to use the correct icon size and styling.
+   */
+  extraLeftButton?: ReactNode;
+};
+type WithExtraRightButton = {
+  /**
+   * A button to be displayed on the right side of the header title.
+   * Check other usages to use the correct icon size and styling.
+   */
+  extraRightButton?: ReactNode;
+};
+type WithShowExitIcon = { showExitIcon?: boolean };
+
 const StyledModalHeader = styled(Flex)<{ bigHeader?: boolean; scrolled: boolean }>`
   position: relative;
   font-family: var(--font-default);
@@ -53,12 +70,13 @@ export enum WrapperModalWidth {
 const StyledModal = styled.div<{
   $contentMaxWidth?: WrapperModalWidth;
   $contentMinWidth?: WrapperModalWidth;
-  padding?: string;
-  topAnchor?: string;
+  $padding?: string;
+  $topAnchor: ModalTopAnchor;
 }>`
   position: absolute;
-  top: ${props => (props.topAnchor ? props.topAnchor : '15vh')};
-  max-height: 80vh;
+  top: ${props => props.$topAnchor};
+  max-height: ${props => `calc(100vh - ${props.$topAnchor} - 5vh)`};
+
   animation: fadein var(--default-duration);
   z-index: 150;
   max-width: ${props =>
@@ -75,8 +93,8 @@ const StyledModal = styled.div<{
 
   margin: auto auto;
   padding: ${props =>
-    props.padding
-      ? props.padding
+    props.$padding
+      ? props.$padding
       : // Note: no padding by default as it depends on what is rendered, see the ModalMap before you change something here
         '0'};
 
@@ -187,15 +205,11 @@ export type SessionWrapperModalType = {
 
 function ExtraSpacerLeft({
   extraRightButton,
-  leftButton,
+  extraLeftButton,
   showExitIcon,
-}: {
-  showExitIcon?: boolean;
-  leftButton?: ReactNode;
-  extraRightButton?: ReactNode;
-}) {
+}: WithShowExitIcon & WithExtraRightButton & WithExtraLeftButton) {
   // if we have two button on the right, and one on the left, we need to add one spacer
-  if (extraRightButton && showExitIcon && leftButton) {
+  if (extraRightButton && showExitIcon && extraLeftButton) {
     return <SpacerLG />;
   }
   if (extraRightButton && showExitIcon) {
@@ -209,7 +223,7 @@ function ExtraSpacerLeft({
   }
   // starting here, showExitIcon is false.
 
-  if (extraRightButton && leftButton) {
+  if (extraRightButton && extraLeftButton) {
     // if we have one button on each sides, no need for a spacer,
     return null;
   }
@@ -223,23 +237,18 @@ function ExtraSpacerLeft({
  */
 export const ModalBasicHeader = ({
   showExitIcon,
-  leftButton,
+  extraLeftButton,
   title,
   bigHeader,
   modalHeaderDataTestId,
   extraRightButton,
-}: {
-  title?: ReactNode;
-  showExitIcon?: boolean;
-  leftButton?: ReactNode;
-  /**
-   * A button to be displayed on the right side of the header.
-   * If all you want is a close button, use showExitIcon instead.
-   */
-  extraRightButton?: ReactNode;
-  bigHeader?: boolean;
-  modalHeaderDataTestId?: SessionDataTestId;
-}) => {
+}: WithShowExitIcon &
+  WithExtraRightButton &
+  WithExtraLeftButton & {
+    title?: ReactNode;
+    bigHeader?: boolean;
+    modalHeaderDataTestId?: SessionDataTestId;
+  }) => {
   const htmlDirection = useHTMLDirection();
 
   const onClose = useOnModalClose();
@@ -267,13 +276,14 @@ export const ModalBasicHeader = ({
         {/* Note: add a spacer if no left button is set but we have an exit icon */}
         <ExtraSpacerLeft
           showExitIcon={showExitIcon}
-          leftButton={leftButton}
+          extraLeftButton={extraLeftButton}
           extraRightButton={extraRightButton}
         />
+        {extraLeftButton}
       </Flex>
       <StyledTitle
         bigHeader={bigHeader}
-        tabIndex={!showExitIcon && !leftButton ? 0 : undefined}
+        tabIndex={!showExitIcon && !extraLeftButton ? 0 : undefined}
         data-testid="modal-heading"
       >
         {title}
@@ -371,9 +381,9 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
                 ref={modalRef}
                 $contentMaxWidth={$contentMaxWidth}
                 $contentMinWidth={$contentMinWidth}
-                padding={padding}
+                $padding={padding}
                 style={style}
-                topAnchor={topAnchor}
+                $topAnchor={topAnchor ?? '15vh'}
               >
                 {props.headerChildren ? props.headerChildren : null}
 

ts/components/avatar/CrownIcon.tsx

@@ -26,7 +26,13 @@ export const CrownIcon = () => {
         iconColor={iconColor}
         iconSize={'small'}
         iconType="crown"
-        iconPadding="1px 0px 1px 1px"
+        iconPadding="2px"
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
       />
     </CrownWrapper>
   );

ts/components/conversation/ContactName/ContactName.tsx

@@ -19,32 +19,132 @@ import { ProIconButton } from '../../buttons/ProButton';
 import { useMessageIdFromContext } from '../../../contexts/MessageIdContext';
 import { useMessageDirection } from '../../../state/selectors';
 import { useShowUserDetailsCbFromConversation } from '../../menuAndSettingsHooks/useShowUserDetailsCb';
+import { assertUnreachable } from '../../../types/sqlSharedTypes';
 
-const boldProfileNameCtx: Array<ContactNameContext> = [
-  'conversation-list-item',
-  'quoted-message-composition',
-  'message-author',
-  'message-info-author',
-  'member-list-item',
-  'contact-list-row',
-];
-
-const showPubkeyCtx: Array<ContactNameContext> = ['message-author'];
-
-const ntsIsYouCtx: Array<ContactNameContext> = [
-  'message-author',
-  'quote-author',
-  'quoted-message-composition',
-  'message-search-result',
-  'react-list-modal',
-  'member-list-item',
-];
-
-const forceSingleLineCtx: Array<ContactNameContext> = [
-  'message-info-author',
-  'member-list-item',
-  'contact-list-row',
-];
+/**
+ * In some contexts, we want to bold the name of the contact.
+ */
+function isBoldProfileNameCtx(ctx: ContactNameContext) {
+  // We are doing this as a switch instead of an array so we have to be explicit anytime we add a new context,
+  // thanks to the assertUnreachable below
+  switch (ctx) {
+    case 'conversation-list-item':
+    case 'quoted-message-composition':
+    case 'message-author':
+    case 'message-info-author':
+    case 'member-list-item':
+    case 'contact-list-row':
+      return true;
+    case 'quote-author':
+    case 'conversation-list-item-search':
+    case 'react-list-modal':
+    case 'message-search-result':
+      return false;
+    default:
+      assertUnreachable(ctx, 'isBoldProfileNameCtx');
+      throw new Error('isBoldProfileNameCtx: unreachable');
+  }
+}
+
+/**
+ * In some contexts, we want to show the pubkey of the contact.
+ */
+function isShowPubkeyCtx(ctx: ContactNameContext) {
+  // We are doing this as a switch instead of an array so we have to be explicit anytime we add a new context,
+  // thanks to the assertUnreachable below
+  switch (ctx) {
+    case 'message-author':
+    case 'message-info-author':
+      return true;
+    case 'member-list-item':
+    case 'contact-list-row':
+    case 'quote-author':
+    case 'conversation-list-item':
+    case 'quoted-message-composition':
+    case 'conversation-list-item-search':
+    case 'react-list-modal':
+    case 'message-search-result':
+      return false;
+    default:
+      assertUnreachable(ctx, 'isShowPubkeyCtx');
+      throw new Error('isShowPubkeyCtx: unreachable');
+  }
+}
+
+/**
+ * In some contexts, we want to rename "Note To Self" to "You".
+ */
+function isShowNtsIsYouCtx(ctx: ContactNameContext) {
+  // We are doing this as a switch instead of an array so we have to be explicit anytime we add a new context,
+  // thanks to the assertUnreachable below
+  switch (ctx) {
+    case 'message-author':
+    case 'quote-author':
+    case 'quoted-message-composition':
+    case 'react-list-modal':
+    case 'message-search-result':
+    case 'member-list-item':
+      return true;
+    case 'message-info-author':
+    case 'contact-list-row':
+    case 'conversation-list-item':
+    case 'conversation-list-item-search':
+      return false;
+    default:
+      assertUnreachable(ctx, 'isShowNtsIsYouCtx');
+      throw new Error('isShowNtsIsYouCtx: unreachable');
+  }
+}
+
+/**
+ * Usually, we'd allow the name to be multiline. but in some contexts we want to force it to be single line.
+ */
+function isForceSingleLineCtx(ctx: ContactNameContext) {
+  // We are doing this as a switch instead of an array so we have to be explicit anytime we add a new context,
+  // thanks to the assertUnreachable below
+  switch (ctx) {
+    case 'message-info-author':
+    case 'member-list-item':
+    case 'contact-list-row':
+      return true;
+    case 'message-author':
+    case 'quote-author':
+    case 'quoted-message-composition':
+    case 'react-list-modal':
+    case 'message-search-result':
+    case 'conversation-list-item':
+    case 'conversation-list-item-search':
+      return false;
+    default:
+      assertUnreachable(ctx, 'isForceSingleLineCtx');
+      throw new Error('isForceSingleLineCtx: unreachable');
+  }
+}
+
+/**
+ * Usually, we'd allow the name to be multiline. but in some contexts we want to force it to be single line.
+ */
+function isShowUPMOnClickCtx(ctx: ContactNameContext) {
+  // We are doing this as a switch instead of an array so we have to be explicit anytime we add a new context,
+  // thanks to the assertUnreachable below
+  switch (ctx) {
+    case 'message-info-author':
+      return true;
+    case 'member-list-item':
+    case 'contact-list-row':
+    case 'message-author':
+    case 'quote-author':
+    case 'quoted-message-composition':
+    case 'react-list-modal':
+    case 'message-search-result':
+    case 'conversation-list-item':
+    case 'conversation-list-item-search':
+      return false;
+    default:
+      assertUnreachable(ctx, 'isForceSingleLineCtx');
+      throw new Error('isForceSingleLineCtx: unreachable');
+  }
+}
 
 const commonNameStyles: CSSProperties = {
   minWidth: 0,
@@ -62,8 +162,6 @@ const boldStyles: CSSProperties = {
   fontWeight: 'bold',
 };
 
-const contactNameContextShowUPM: Array<ContactNameContext> = ['message-info-author'];
-
 export const ContactName = ({
   pubkey,
   module,
@@ -99,21 +197,19 @@ export const ContactName = ({
   const msgDirection = useMessageDirection(msgId);
 
   const displayName = isMe
-    ? // we want to show "You" instead of Note to Self in some places (like quotes)
-      ntsIsYouCtx.includes(contactNameContext)
-      ? tr('you')
-      : tr('noteToSelf')
-    : // we want to show the nickname in brackets if a nickname is set for search results
+    ? // we want to show "You" instead of "Note to Self" in some places (like quotes)
+      tr(isShowNtsIsYouCtx(contactNameContext) ? 'you' : 'noteToSelf')
+    : // we want to show the realName in brackets if a nickname is set for search results
       contactNameContext === 'conversation-list-item-search' && nickname && realName
       ? `${nickname} (${realName})`
       : noFallback;
 
   const shouldShowShortenPkAsName = !displayName;
 
   const shouldShowPubkey =
-    !shouldShowShortenPkAsName && isPublic && showPubkeyCtx.includes(contactNameContext);
-  const boldProfileName = boldProfileNameCtx.includes(contactNameContext);
-  const forceSingleLine = forceSingleLineCtx.includes(contactNameContext);
+    !shouldShowShortenPkAsName && isPublic && isShowPubkeyCtx(contactNameContext);
+  const boldProfileName = isBoldProfileNameCtx(contactNameContext);
+  const forceSingleLine = isForceSingleLineCtx(contactNameContext);
 
   const displayedName = shouldShowShortenPkAsName ? shortPubkey : displayName;
 
@@ -163,10 +259,7 @@ export const ContactName = ({
         maxWidth: '100%',
         ...style,
       }}
-      onClick={
-        (contactNameContextShowUPM.includes(contactNameContext) && showConversationSettingsCb) ||
-        undefined
-      }
+      onClick={(isShowUPMOnClickCtx(contactNameContext) && showConversationSettingsCb) || undefined}
     >
       {displayedName ? (
         <div style={mergedNameStyle} className={`${prefix}__profile-name`}>

ts/components/dialog/SessionConfirm.tsx

@@ -18,13 +18,11 @@ import { ModalDescription } from './shared/ModalDescriptionContainer';
 import { tr } from '../../localization/localeTools';
 import { ModalFlexContainer } from './shared/ModalFlexContainer';
 
-export interface SessionConfirmDialogProps {
+export type SessionConfirmDialogProps = {
   i18nMessage?: LocalizerProps;
   title?: string;
   radioOptions?: SessionRadioItems;
-  onOk?: any;
   onClose?: any;
-  closeAfterInput?: boolean;
 
   /**
    * function to run on ok click. Closes modal after execution by default
@@ -49,7 +47,7 @@ export interface SessionConfirmDialogProps {
   closeTheme?: SessionButtonColor;
   showExitIcon?: boolean | undefined;
   conversationId?: string;
-}
+};
 
 export const SessionConfirm = (props: SessionConfirmDialogProps) => {
   const {