Merge remote-tracking branch 'upstream/dev' into delete-msg-options-updated

Author: Bilb

.github/workflows/build-binaries.yml

@@ -78,6 +78,7 @@ jobs:
           makeLatest: false
           omitBodyDuringUpdate: true
           omitNameDuringUpdate: true
+          commit: master # needed so that the "target" of the release is correct on github
 
   lint:
     runs-on: ubuntu-22.04

CONTRIBUTING.md

@@ -67,7 +67,7 @@ See [node-gyp installation instructions](https://github.com/nodejs/node-gyp#inst
   <summary>Fedora</summary>
 
   ```sh
-  sudo dnf install make automake gcc gcc-c++ kernel-devel
+  sudo dnf install make cmake automake gcc gcc-c++ kernel-devel
   ```
 
   </details>

dynamic_assets

@@ -4,7 +4,7 @@
   "name": "session-desktop",
   "productName": "Session",
   "description": "Private messaging from your desktop",
-  "version": "1.17.10",
+  "version": "1.17.12",
   "license": "GPL-3.0",
   "author": {
     "name": "Session Foundation",

package.json

@@ -6,3 +6,5 @@ onlyBuiltDependencies:
   - libsession_util_nodejs
   - protobufjs
   - sharp
+publicHoistPattern:
+  - '@img/*'

pnpm-workspace.yaml

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { type ReactNode, useMemo, useRef } from 'react';
 import { getFeatureFlagMemo } from '../state/ducks/types/releasedFeaturesReduxTypes';
 import { clampNumber } from '../util/maths';
-import { defaultTriggerPos, PopoverTriggerPosition } from './SessionTooltip';
+import { PopoverTriggerPosition } from './SessionTooltip';
 
 const TIP_LENGTH = 18;
 const VIEWPORT_MARGIN = 4;
@@ -95,7 +95,7 @@ const StyledPopover = styled.div<{
 export type PopoverProps = {
   children: ReactNode;
   pointerOffset?: number;
-  triggerPosition: PopoverTriggerPosition;
+  triggerPosition: PopoverTriggerPosition | null;
   open: boolean;
   loading?: boolean;
   maxWidth?: string;
@@ -124,7 +124,7 @@ export const SessionPopoverContent = (props: PopoverProps) => {
     loading,
     maxWidth,
     onClick,
-    triggerPosition = defaultTriggerPos,
+    triggerPosition,
     isTooltip,
     contentMargin = 0,
     containerMarginTop = VIEWPORT_MARGIN,
@@ -146,8 +146,10 @@ export const SessionPopoverContent = (props: PopoverProps) => {
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
 
+  const show = open && !loading && !!triggerPosition;
+
   const { x, y, pointerOffset, anchorX, finalVerticalPos, bounds } = useMemo(() => {
-    if (!open || loading) {
+    if (!show) {
       return {
         x: 0,
         y: 0,
@@ -217,15 +219,10 @@ export const SessionPopoverContent = (props: PopoverProps) => {
       bounds: { x1: minX, y1: minY, x2: maxX, y2: maxY },
     };
   }, [
-    open,
-    loading,
+    show,
     contentWidth,
     isTooltip,
-    triggerPosition.x,
-    triggerPosition.y,
-    triggerPosition.width,
-    triggerPosition.height,
-    triggerPosition.offsetX,
+    triggerPosition,
     horizontalPosition,
     viewportWidth,
     verticalPosition,
@@ -244,7 +241,7 @@ export const SessionPopoverContent = (props: PopoverProps) => {
     <>
       <StyledPopover
         ref={ref}
-        $readyToShow={open && !loading}
+        $readyToShow={show}
         onClick={onClick}
         x={x}
         y={y}
@@ -257,7 +254,7 @@ export const SessionPopoverContent = (props: PopoverProps) => {
       >
         {children}
       </StyledPopover>
-      {showPopoverAnchors && open ? (
+      {showPopoverAnchors && show ? (
         // NOTE: these are only rendered when the debug option is enabled
         <>
           <StyledCoordinateRectangleMarker title="allowedArea" $bounds={bounds} />

ts/components/SessionPopover.tsx

@@ -72,9 +72,12 @@ export const getTriggerPositionFromId = (id: string): PopoverTriggerPosition =>
   return getTriggerPositionFromBoundingClientRect(el.getBoundingClientRect());
 };
 
-export const useTriggerPosition = (ref: RefObject<HTMLElement | null>): PopoverTriggerPosition => {
+// Returns null if the ref is null
+export const useTriggerPosition = (
+  ref: RefObject<HTMLElement | null>
+): PopoverTriggerPosition | null => {
   if (!ref.current) {
-    return defaultTriggerPos;
+    return null;
   }
   return getTriggerPositionFromBoundingClientRect(ref.current.getBoundingClientRect());
 };

ts/components/SessionTooltip.tsx

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { useTriggerPosition } from '../SessionTooltip';
+import { type PopoverTriggerPosition } from '../SessionTooltip';
 import { SessionEmojiPanel } from './SessionEmojiPanel';
 import { SessionPopoverContent } from '../SessionPopover';
 import { FixedBaseEmoji } from '../../types/Reaction';
@@ -9,30 +9,30 @@ const EMOJI_PANEL_WIDTH_PX = 354;
 const EMOJI_PANEL_HEIGHT_PX = 435;
 
 export function SessionEmojiPanelPopover({
-  triggerRef,
+  triggerPos,
   emojiPanelRef,
   onEmojiClicked,
   open,
   onClose,
 }: {
-  triggerRef: RefObject<HTMLButtonElement | null>;
+  triggerPos: PopoverTriggerPosition | null;
   open: boolean;
   emojiPanelRef: RefObject<HTMLDivElement | null>;
   onEmojiClicked: (emoji: FixedBaseEmoji) => void;
   onClose: () => void;
 }) {
-  const triggerPos = useTriggerPosition(triggerRef);
+  const _open = open && !!triggerPos;
   return (
     <SessionPopoverContent
       triggerPosition={triggerPos}
-      open={open}
+      open={_open}
       isTooltip={false}
       verticalPosition="bottom"
       horizontalPosition="center"
       fallbackContentWidth={EMOJI_PANEL_WIDTH_PX}
       fallbackContentHeight={EMOJI_PANEL_HEIGHT_PX}
     >
-      {open ? (
+      {_open ? (
         <SessionEmojiPanel
           ref={emojiPanelRef}
           show={true}

ts/components/conversation/SessionEmojiPanelPopover.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import useClickAway from 'react-use/lib/useClickAway';
-import type { PopoverTriggerPosition } from '../SessionTooltip';
+import { useTriggerPosition, type PopoverTriggerPosition } from '../SessionTooltip';
 import { SessionPopoverContent } from '../SessionPopover';
 import { MessageReactBar } from './message/message-content/MessageReactBar';
 import { THEME_GLOBALS } from '../../themes/globals';
@@ -22,14 +22,14 @@ export function SessionEmojiReactBarPopover({
   onClickAwayFromReactionBar: () => void;
 }) {
   const emojiPanelTriggerRef = useRef<HTMLButtonElement>(null);
+  const emojiPanelTriggerPos = useTriggerPosition(emojiPanelTriggerRef);
   const emojiPanelRef = useRef<HTMLDivElement>(null);
   const emojiReactionBarRef = useRef<HTMLDivElement>(null);
   const [showEmojiPanel, setShowEmojiPanel] = useState<boolean>(false);
   const reactToMessage = useReactToMessage(messageId);
   const focusedMessageId = useFocusedMessageId();
 
   const closeEmojiPanel = () => {
-    closeContextMenus();
     setShowEmojiPanel(false);
   };
 
@@ -66,7 +66,7 @@ export function SessionEmojiReactBarPopover({
     <>
       <SessionEmojiPanelPopover
         emojiPanelRef={emojiPanelRef}
-        triggerRef={emojiPanelTriggerRef}
+        triggerPos={emojiPanelTriggerPos}
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         onEmojiClicked={onEmojiClick}
         open={showEmojiPanel}

ts/components/conversation/SessionEmojiReactBarPopover.tsx

@@ -1,4 +1,11 @@
-import { type MouseEvent, type KeyboardEvent, useCallback, useRef, useState } from 'react';
+import {
+  type MouseEvent,
+  type KeyboardEvent,
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
 import clsx from 'clsx';
 
 import styled, { keyframes } from 'styled-components';
@@ -31,6 +38,7 @@ import { GroupUpdateMessage } from './GroupUpdateMessage';
 import { CallNotification } from './notification-bubble/CallNotification';
 import { InteractionNotification } from './InteractionNotification';
 import { MessageRequestResponse } from './MessageRequestResponse';
+import { useFocusScope, useIsInScope } from '../../../../state/focus';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -44,6 +52,7 @@ const highlightedMessageAnimation = keyframes`
 const StyledReadableMessage = styled.div<{
   selected: boolean;
   $isDetailView: boolean;
+  $focusedKeyboard: boolean;
 }>`
   display: flex;
   align-items: center;
@@ -59,9 +68,12 @@ const StyledReadableMessage = styled.div<{
     margin-top: var(--margins-xs);
   }
 
-  &:focus-visible {
+  ${props =>
+    props.$focusedKeyboard
+      ? `&:focus-visible {
     background-color: var(--conversation-tab-background-selected-color);
-  }
+  }`
+      : ''}
 `;
 
 function getMessageComponent(messageType: UIMessageType) {
@@ -104,8 +116,10 @@ export const GenericReadableMessage = ({ messageId }: WithMessageId) => {
 
   const ref = useRef<HTMLDivElement>(null);
   const pointerDownRef = useRef(false);
-  const keyboardFocusedRef = useRef(false);
   const [triggerPosition, setTriggerPosition] = useState<PopoverTriggerPosition | null>(null);
+  const isInFocusScope = useIsInScope({ scope: 'message', scopeId: messageId });
+  const { focusedMessageId } = useFocusScope();
+  const isAnotherMessageFocused = focusedMessageId && !isInFocusScope;
 
   const getMessageContainerTriggerPosition = (): PopoverTriggerPosition | null => {
     if (!ref.current) {
@@ -180,6 +194,12 @@ export const GenericReadableMessage = ({ messageId }: WithMessageId) => {
 
   const messageType = useMessageType(messageId);
 
+  useEffect(() => {
+    if (isAnotherMessageFocused) {
+      setTriggerPosition(null);
+    }
+  }, [isAnotherMessageFocused]);
+
   if (!convoId || !messageId || !messageType) {
     return null;
   }
@@ -200,23 +220,16 @@ export const GenericReadableMessage = ({ messageId }: WithMessageId) => {
       onContextMenu={handleContextMenu}
       key={`readable-message-${messageId}`}
       onKeyDown={onKeyDown}
+      $focusedKeyboard={!pointerDownRef.current}
       tabIndex={0}
       onPointerDown={() => {
         pointerDownRef.current = true;
       }}
       onFocus={() => {
-        if (!pointerDownRef.current) {
-          keyboardFocusedRef.current = true;
-          onFocus();
-        }
+        onFocus();
         pointerDownRef.current = false;
       }}
-      onBlur={() => {
-        if (keyboardFocusedRef.current) {
-          keyboardFocusedRef.current = false;
-          onBlur();
-        }
-      }}
+      onBlur={onBlur}
     >
       <CmpToRender
         contextMenuId={ctxMenuID}