feat: standardize message deletion

ts/components/NoticeBanner.tsx

@@ -19,7 +19,7 @@ const StyledNoticeBanner = styled(Flex)<{ isClickable: boolean }>`
   }
 `;
 
-const StyledText = styled.span`
+const StyledBannerText = styled.span`
   margin-right: var(--margins-sm);
 `;
 
@@ -48,7 +48,7 @@ export const NoticeBanner = (props: NoticeBannerProps) => {
         onBannerClick();
       }}
     >
-      <StyledText>{text}</StyledText>
+      <StyledBannerText>{text}</StyledBannerText>
       {unicode ? (
         <SessionLucideIconButton unicode={unicode} iconColor="inherit" iconSize="small" />
       ) : null}

ts/components/OutgoingLightBox.tsx

@@ -106,6 +106,7 @@ export const OutgoingLightBox = (props: NonNullable<OutgoingLightBoxOptions>) =>
 
   return (
     <SessionFocusTrap
+      focusTrapId="OutgoingLightBox"
       initialFocus={() => ref.current}
       allowOutsideClick={true}
       returnFocusOnDeactivate={false}

ts/components/SessionFocusTrap.tsx

@@ -1,34 +1,102 @@
-import { FocusTrap } from 'focus-trap-react';
-import { ReactNode } from 'react';
+import { FocusTrap, type FocusTrapProps } from 'focus-trap-react';
+import { type ReactNode, useEffect, useState } from 'react';
 import type { CSSProperties } from 'styled-components';
+import { windowErrorFilters } from '../util/logger/renderer_process_logging';
+import { getFeatureFlagMemo } from '../state/ducks/types/releasedFeaturesReduxTypes';
+
+const focusTrapErrorSource = 'focus-trap';
+
+type SessionFocusTrapProps = FocusTrapProps['focusTrapOptions'] & {
+  /** id used for debugging */
+  focusTrapId: string;
+  children: ReactNode;
+  active?: boolean;
+  containerDivStyle?: CSSProperties;
+  /** Suppress errors thrown from inside the focus trap, preventing logging or global error emission */
+  suppressErrors?: boolean;
+  /** Allows the focus trap to exist without detectable tabbable elements. This is required if the children
+   * are within a Shadow DOM. Internally sets suppressErrors to true. */
+  allowNoTabbableNodes?: boolean;
+};
 
-/**
- * Focus trap which activates on mount.
- */
 export function SessionFocusTrap({
+  focusTrapId,
   children,
+  active = true,
   allowOutsideClick = true,
-  returnFocusOnDeactivate,
-  initialFocus,
   containerDivStyle,
-}: {
-  children: ReactNode;
-  allowOutsideClick?: boolean;
-  returnFocusOnDeactivate?: boolean;
-  initialFocus: () => HTMLElement | null;
-  containerDivStyle?: CSSProperties;
-}) {
+  suppressErrors,
+  allowNoTabbableNodes,
+  onActivate,
+  onPostActivate,
+  onDeactivate,
+  onPostDeactivate,
+  ...rest
+}: SessionFocusTrapProps) {
+  const debugFocusTrap = getFeatureFlagMemo('debugFocusTrap');
+  const defaultTabIndex = allowNoTabbableNodes ? 0 : -1;
+  const _suppressErrors = suppressErrors || allowNoTabbableNodes;
+  /**
+   * NOTE: the tab index tricks the focus trap into thinking it has
+   * tabbable children by setting a tab index on the empty div child. When
+   * the trap activates it will see the div in the tab list and render without
+   * error, then remove that div from the tab index list. Then when the trap
+   * deactivates the state is reset.
+   */
+  const [tabIndex, setTabIndex] = useState<0 | 1 | -1>(defaultTabIndex);
+
+  const _onActivate = () => {
+    if (debugFocusTrap) {
+      window.log.debug(`[SessionFocusTrap] onActivate - ${focusTrapId}`);
+    }
+    onActivate?.();
+  };
+
+  const _onPostActivate = () => {
+    if (allowNoTabbableNodes) {
+      setTabIndex(-1);
+    }
+    onPostActivate?.();
+  };
+
+  const _onDeactivate = () => {
+    if (debugFocusTrap) {
+      window.log.debug(`[SessionFocusTrap] onDeactivate - ${focusTrapId}`);
+    }
+    if (allowNoTabbableNodes) {
+      setTabIndex(defaultTabIndex);
+    }
+    onDeactivate?.();
+  };
+
+  useEffect(() => {
+    if (!active || !_suppressErrors) {
+      return;
+    }
+    windowErrorFilters.add(focusTrapErrorSource);
+    // eslint-disable-next-line consistent-return -- This return is the destructor
+    return () => {
+      windowErrorFilters.remove(focusTrapErrorSource);
+    };
+  }, [_suppressErrors, active]);
+
   return (
     <FocusTrap
-      active={true}
+      active={active}
       focusTrapOptions={{
-        initialFocus,
+        ...rest,
         allowOutsideClick,
-        returnFocusOnDeactivate,
+        onActivate: _onActivate,
+        onPostActivate: _onPostActivate,
+        onDeactivate: _onDeactivate,
+        onPostDeactivate,
       }}
     >
-      {/* Note:  not too sure why, but without this div, the focus trap doesn't work */}
-      <div style={containerDivStyle}>{children}</div>
+      {/* Note: without this div, the focus trap doesn't work */}
+      <div style={containerDivStyle}>
+        {allowNoTabbableNodes ? <div tabIndex={tabIndex} /> : null}
+        {children}
+      </div>
     </FocusTrap>
   );
 }

ts/components/SessionSearchInput.tsx

@@ -133,7 +133,11 @@ export const SessionSearchInput = ({ searchType }: { searchType: SearchType }) =
           iconColor="var(--text-secondary-color)"
           iconSize={iconSize}
           unicode={LUCIDE_ICONS_UNICODE.X}
-          tabIndex={0}
+          // NOTE: we don't want this clear button in the tab index list
+          // as the Escape key already does the clear action for keyboard
+          // users and we want the next tab after the search input to
+          // be the first search result
+          tabIndex={-1}
           onClick={() => {
             setCurrentSearchTerm('');
             dispatch(searchActions.clearSearch());

ts/components/SessionToastContainer.tsx

@@ -1,5 +1,6 @@
 import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
 import styled from 'styled-components';
+import { isTestIntegration } from '../shared/env_vars';
 
 // NOTE: https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
 const StyledToastContainer = styled(ToastContainer)`
@@ -40,7 +41,7 @@ export const SessionToastContainer = () => {
   return (
     <WrappedToastContainer
       position="bottom-right"
-      autoClose={5000}
+      autoClose={isTestIntegration() ? 1000 : 3000}
       hideProgressBar={true}
       newestOnTop={true}
       closeOnClick={true}

ts/components/SessionTooltip.tsx

@@ -5,6 +5,7 @@ import {
   useRef,
   useState,
   useEffect,
+  type Dispatch,
 } from 'react';
 import styled, { type CSSProperties } from 'styled-components';
 import useDebounce from 'react-use/lib/useDebounce';
@@ -47,6 +48,11 @@ export type PopoverTriggerPosition = {
   offsetX?: number;
 };
 
+export type WithPopoverPosition = { triggerPosition: PopoverTriggerPosition | null };
+export type WithSetPopoverPosition = {
+  setTriggerPosition: Dispatch<PopoverTriggerPosition | null>;
+};
+
 export const defaultTriggerPos: PopoverTriggerPosition = { x: 0, y: 0, width: 0, height: 0 };
 
 export function getTriggerPositionFromBoundingClientRect(rect: DOMRect): PopoverTriggerPosition {
@@ -67,15 +73,20 @@ export const getTriggerPositionFromId = (id: string): PopoverTriggerPosition =>
 };
 
 // Returns null if the ref is null
-export const useTriggerPosition = (
-  ref: RefObject<HTMLElement | null>
-): PopoverTriggerPosition | null => {
+export const getTriggerPosition = (ref: RefObject<HTMLElement | null>) => {
   if (!ref.current) {
     return null;
   }
   return getTriggerPositionFromBoundingClientRect(ref.current.getBoundingClientRect());
 };
 
+// Returns null if the ref is null
+export const useTriggerPosition = (
+  ref: RefObject<HTMLElement | null>
+): PopoverTriggerPosition | null => {
+  return getTriggerPosition(ref);
+};
+
 export const SessionTooltip = ({
   children,
   content,

ts/components/SessionWrapperModal.tsx

@@ -452,7 +452,11 @@ export const SessionWrapperModal = (props: SessionWrapperModalType & { onClose?:
     props.headerChildren && moveHeaderIntoScrollableBody ? props.headerChildren : null;
 
   return (
-    <SessionFocusTrap allowOutsideClick={allowOutsideClick} initialFocus={() => modalRef.current}>
+    <SessionFocusTrap
+      focusTrapId="SessionWrapperModal"
+      allowOutsideClick={allowOutsideClick}
+      initialFocus={() => modalRef.current}
+    >
       <IsModalScrolledContext.Provider value={scrolled}>
         <ModalHasActionButtonContext.Provider value={!!buttonChildren}>
           <OnModalCloseContext.Provider value={onClose ?? null}>

ts/components/basic/SessionRadioGroup.tsx

@@ -10,6 +10,7 @@ export type SessionRadioItems = Array<{
   label: string;
   inputDataTestId: SessionDataTestId;
   labelDataTestId: SessionDataTestId;
+  disabled?: boolean;
 }>;
 
 interface Props {
@@ -50,6 +51,7 @@ export const SessionRadioGroup = (props: Props) => {
             label={item.label}
             active={itemIsActive}
             value={item.value}
+            disabled={item.disabled}
             inputDataTestId={item.inputDataTestId}
             labelDataTestId={item.labelDataTestId}
             inputName={group}

ts/components/calling/IncomingCallDialog.tsx

@@ -60,7 +60,6 @@ export const IncomingCallDialog = () => {
     };
   }, [incomingCallFromPubkey]);
 
-  // #region input handlers
   const handleAcceptIncomingCall = async () => {
     if (incomingCallFromPubkey) {
       await CallManager.USER_acceptIncomingCallRequest(incomingCallFromPubkey);
@@ -77,7 +76,6 @@ export const IncomingCallDialog = () => {
   if (!hasIncomingCall || !incomingCallFromPubkey) {
     return null;
   }
-  // #endregion
 
   if (hasIncomingCall) {
     return (

ts/components/conversation/SessionConversation.tsx

@@ -226,10 +226,10 @@ export class SessionConversation extends Component<Props, State> {
     if (msg.body.replace(/\s/g, '').includes(recoveryPhrase.replace(/\s/g, ''))) {
       window.inboxStore?.dispatch(
         updateConfirmModal({
-          title: tr('warning'),
+          title: { token: 'warning' },
           i18nMessage: { token: 'recoveryPasswordWarningSendDescription' },
           okTheme: SessionButtonColor.Danger,
-          okText: tr('send'),
+          okText: { token: 'send' },
           onClickOk: () => {
             void sendAndScroll();
           },

ts/components/conversation/SessionEmojiPanel.tsx

@@ -1,14 +1,14 @@
 import Picker from '@emoji-mart/react';
-import { forwardRef } from 'react';
+import { type RefObject } from 'react';
 import styled from 'styled-components';
-import clsx from 'clsx';
 
 import { usePrimaryColor } from '../../state/selectors/primaryColor';
 import { useIsDarkTheme, useTheme } from '../../state/theme/selectors/theme';
 import { COLORS, THEMES, ThemeStateType, type ColorsType } from '../../themes/constants/colors';
 import { FixedBaseEmoji } from '../../types/Reaction';
 import { i18nEmojiData } from '../../util/emoji';
 import { hexColorToRGB } from '../../util/hexColorToRGB';
+import { SessionFocusTrap } from '../SessionFocusTrap';
 
 export const StyledEmojiPanel = styled.div<{
   $isModal: boolean;
@@ -19,20 +19,11 @@ export const StyledEmojiPanel = styled.div<{
 }>`
   ${props => (!props.$isModal ? 'padding: var(--margins-lg);' : '')}
   z-index: 5;
-  opacity: 0;
-  visibility: hidden;
-  // this disables the slide-in animation when showing the emoji picker from a right click on a message
-  /* transition: var(--default-duration); */
 
   button:focus {
     outline: none;
   }
 
-  &.show {
-    opacity: 1;
-    visibility: visible;
-  }
-
   em-emoji-picker {
     ${props => props.$panelBackgroundRGB && `background-color: rgb(${props.$panelBackgroundRGB})`};
     border: var(--default-borders);
@@ -75,21 +66,18 @@ export const StyledEmojiPanel = styled.div<{
 `;
 
 type Props = {
+  ref?: RefObject<HTMLDivElement | null>;
   onEmojiClicked: (emoji: FixedBaseEmoji) => void;
-  show: boolean;
   isModal?: boolean;
   onClose?: () => void;
+  show: boolean;
 };
 
-const pickerProps = {
-  title: '',
-  showPreview: true,
-  autoFocus: true,
-  skinTonePosition: 'preview',
+export const SessionEmojiPanel = (props: Props) => {
+  return props.show ? <EmojiPanel {...props} /> : null;
 };
 
-export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
-  const { onEmojiClicked, show, isModal = false, onClose } = props;
+const EmojiPanel = ({ ref, onEmojiClicked, isModal = false, onClose }: Props) => {
   const _primaryColor = usePrimaryColor();
   const theme = useTheme();
   const isDarkTheme = useIsDarkTheme();
@@ -125,22 +113,31 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
       );
 
   return (
-    <StyledEmojiPanel
-      $isModal={isModal}
-      $primaryColor={primaryColor}
-      $theme={theme}
-      $panelBackgroundRGB={panelBackgroundRGB}
-      $panelTextRGB={panelTextRGB}
-      className={clsx(show && 'show')}
-      ref={ref}
+    <SessionFocusTrap
+      focusTrapId="SessionEmojiPanel"
+      clickOutsideDeactivates={true}
+      allowNoTabbableNodes={true}
+      onDeactivate={onClose}
     >
-      <Picker
-        theme={isDarkTheme ? 'dark' : 'light'}
-        i18n={i18nEmojiData}
-        onEmojiSelect={onEmojiClicked}
-        onClose={onClose}
-        {...pickerProps}
-      />
-    </StyledEmojiPanel>
+      <StyledEmojiPanel
+        $isModal={isModal}
+        $primaryColor={primaryColor}
+        $theme={theme}
+        $panelBackgroundRGB={panelBackgroundRGB}
+        $panelTextRGB={panelTextRGB}
+        ref={ref}
+      >
+        <Picker
+          theme={isDarkTheme ? 'dark' : 'light'}
+          i18n={i18nEmojiData}
+          onEmojiSelect={onEmojiClicked}
+          onClose={onClose}
+          title=""
+          showPreview={true}
+          skinTonePosition={'preview'}
+          autoFocus={true}
+        />
+      </StyledEmojiPanel>
+    </SessionFocusTrap>
   );
-});
+};