Merge pull request #1526 from session-foundation/feat/user-profile-modal

feat: user details modal

Author: Bilb

images/cta_hero_generic_base_layer.webp

@@ -66,7 +66,8 @@ window.sessionFeatureFlags = {
   alwaysShowRemainingChars: false,
   showPopoverAnchors: false,
   proAvailable: !isEmpty(process.env.SESSION_PRO),
-  mockUserHasPro: !isEmpty(process.env.SESSION_HAS_PRO),
+  mockCurrentUserHasPro: !isEmpty(process.env.SESSION_USER_HAS_PRO),
+  mockOthersHavePro: !isEmpty(process.env.SESSION_OTHERS_HAVE_PRO),
   // Note: some stuff are init when the app starts, so fsTTL30s should only be set from the env itself (before app starts)
   fsTTL30s: !isEmpty(process.env.FILE_SERVER_TTL_30S),
   debug: {

preload.js

@@ -1,4 +1,11 @@
-import { MouseEvent, useEffect, useRef, useState, type SessionDataTestId } from 'react';
+import {
+  MouseEvent,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type SessionDataTestId,
+} from 'react';
 import { QRCode } from 'react-qrcode-logo';
 import styled, { CSSProperties } from 'styled-components';
 import { THEME_GLOBALS } from '../themes/globals';
@@ -13,7 +20,7 @@ const StyledQRView = styled(AnimatedFlex)<{
 }>`
   cursor: pointer;
   border-radius: 10px;
-  overflow: hidden;
+  overflow: visible; // we need this for overflow buttons to be visible (see UserProfileModal)
   ${props => props.size && `width: ${props.size}px; height: ${props.size}px;`}
 `;
 
@@ -33,6 +40,7 @@ export type SessionQRCodeProps = {
   ariaLabel?: string;
   dataTestId?: SessionDataTestId;
   style?: CSSProperties;
+  children?: ReactNode;
 };
 
 export function SessionQRCode(props: SessionQRCodeProps) {
@@ -50,6 +58,7 @@ export function SessionQRCode(props: SessionQRCodeProps) {
     ariaLabel,
     dataTestId,
     style,
+    children,
   } = props;
   const [logo, setLogo] = useState(logoImage);
   const [bgColor, setBgColor] = useState(backgroundColor);
@@ -144,6 +153,7 @@ export function SessionQRCode(props: SessionQRCodeProps) {
           height: size,
         }}
       />
+      {children}
     </StyledQRView>
   );
 }

ts/components/SessionQRCode.tsx

@@ -159,7 +159,7 @@ export const ModalActionsContainer = ({
 };
 
 export type SessionWrapperModalType = {
-  headerChildren: ReactNode | null;
+  headerChildren: ReactNode;
   children: ReactNode;
   /**
    * *Should* be some SessionButtons enclosed in a ModalActionsContainer

ts/components/SessionWrapperModal.tsx

@@ -23,7 +23,7 @@ export enum AvatarSize {
   M = 48,
   L = 80,
   XL = 110,
-  HUGE = 300,
+  HUGE = 190,
 }
 
 type Props = {

ts/components/avatar/Avatar.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { tr } from '../../localization/localeTools';
+
+const StyledPillDividerLine = styled.div`
+  border-bottom: 1px solid var(--border-color);
+  line-height: 0.1rem;
+  flex-grow: 1;
+  height: 1px;
+  align-self: center;
+`;
+
+const StyledPillSpan = styled.span`
+  padding: 6px 15px 5px;
+  border-radius: 50px;
+  color: var(--text-secondary-color);
+  border: 1px solid var(--border-color);
+`;
+
+const StyledPillDivider = styled.div`
+  width: 100%;
+  text-align: center;
+  display: flex;
+  margin: 0;
+`;
+
+export const AccountIdPill = ({ accountType }: { accountType: 'ours' | 'theirs' | 'blinded' }) => {
+  return (
+    <StyledPillDivider data-testid="account-id-pill">
+      <StyledPillDividerLine />
+      <StyledPillSpan>
+        {tr(
+          accountType === 'blinded'
+            ? 'blindedId'
+            : accountType === 'ours'
+              ? 'accountIdYours'
+              : 'accountId'
+        )}
+      </StyledPillSpan>
+      <StyledPillDividerLine />
+    </StyledPillDivider>
+  );
+};

ts/components/basic/AccountIdPill.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode, SessionDataTestId, CSSProperties } from 'react';
+import styled from 'styled-components';
+import { PubKey } from '../../session/types';
+
+const StyledSessionIDNotEditable = styled.div`
+  display: flex;
+  gap: var(--margins-sm);
+  user-select: none;
+  text-align: center;
+  word-break: break-all;
+  font-weight: 400;
+  font-size: var(--font-size-md);
+  color: var(--text-secondary-color);
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+
+  .session-id-tooltip {
+    font-family: var(--font-default);
+    font-size: var(--font-size-sm);
+  }
+`;
+
+export const SessionIDNotEditable = ({
+  sessionId,
+  dataTestId,
+  tooltipNode,
+  displayType,
+  style: providedStyle = {},
+}: {
+  sessionId: string;
+  tooltipNode: ReactNode;
+  displayType: 'blinded' | '2lines' | '3lines';
+  dataTestId: SessionDataTestId;
+  style: CSSProperties;
+}) => {
+  if (sessionId.length !== 66) {
+    throw new Error('Unsupported case for SessionIDNotEditable: sessionId.length !== 66');
+  }
+  if (PubKey.isBlinded(sessionId) && displayType !== 'blinded') {
+    throw new Error('Unsupported case for SessionIDNotEditable: sessionId is blinded');
+  }
+
+  const style = tooltipNode ? { ...providedStyle, marginLeft: 'var(--margins-lg)' } : providedStyle;
+
+  if (displayType === 'blinded') {
+    const shortenedSessionId = PubKey.shorten(sessionId, {
+      keepCharacters: 12,
+      withParenthesis: false,
+    });
+
+    return (
+      <StyledSessionIDNotEditable
+        data-testid={dataTestId}
+        // Note: we want the text centered even if the tooltip is offsetting it
+        style={style}
+      >
+        {shortenedSessionId}
+        {tooltipNode}
+      </StyledSessionIDNotEditable>
+    );
+  }
+
+  if (displayType === '3lines') {
+    const firstLine = sessionId.slice(0, 27);
+    const secondLine = sessionId.slice(27, 54);
+    const thirdLine = sessionId.slice(54);
+    return (
+      <StyledSessionIDNotEditable
+        data-testid={dataTestId} // Note: we want the text centered even if the tooltip is offsetting it
+        style={style}
+      >
+        {firstLine}
+        <br />
+        {secondLine}
+        <br />
+        {thirdLine}
+        {tooltipNode}
+      </StyledSessionIDNotEditable>
+    );
+  }
+
+  return (
+    <StyledSessionIDNotEditable data-testid={dataTestId} style={style}>
+      {sessionId.slice(0, 33)}
+      <br />
+      {sessionId.slice(33)}
+    </StyledSessionIDNotEditable>
+  );
+};

ts/components/basic/SessionIdNotEditable.tsx

@@ -1,13 +1,16 @@
 import { isEmpty } from 'lodash';
 import { useState } from 'react';
 import { clipboard } from 'electron';
+import useTimeoutFn from 'react-use/lib/useTimeoutFn';
+
 import { useHotkey } from '../../hooks/useHotkey';
 import { ToastUtils } from '../../session/utils';
 import { SessionButton, SessionButtonProps } from '../basic/SessionButton';
 import { SessionIconButtonProps, SessionLucideIconButton } from '../icon/SessionIconButton';
 import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 import type { SessionIconSize } from '../icon';
 import { tr } from '../../localization/localeTools';
+import { DURATION } from '../../session/constants';
 
 type CopyProps = {
   copyContent?: string;
@@ -21,6 +24,14 @@ export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
   const { copyContent, onCopyComplete, hotkey = false, text } = props;
   const [copied, setCopied] = useState(false);
 
+  // reset the copied state after 5 seconds
+  useTimeoutFn(
+    () => {
+      setCopied(false);
+    },
+    copied ? 5 * DURATION.SECONDS : 0
+  );
+
   const onClick = () => {
     try {
       const toCopy = copyContent || text;

ts/components/basic/YourSessionIDPill.tsx

@@ -20,7 +20,7 @@ export const PlusAvatarButton = ({
       padding={'var(--margins-xxs)'}
       style={{
         position: 'absolute',
-        bottom: '0',
+        bottom: '3%',
         insetInlineEnd: 0,
         boxShadow: '0px 0px 3px 2px var(--border-color)',
       }}