Merge remote-tracking branch 'origin/multiple-attachments' into gleasonator

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: don't have to click the play button twice for embedded videos.
 - index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
 - Modals: fix media modal automatically switching to video.
+- Navigation: profile dropdown erratic behavior.
 
 ### Removed
 - Admin: single user mode. Now the homepage can be redirected to any URL.

app/soapbox/actions/soapbox.ts

@@ -32,8 +32,8 @@ const getSoapboxConfig = createSelector([
     }
 
     // If RGI reacts aren't supported, strip VS16s
-    // // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
-    if (!features.emojiReactsRGI) {
+    // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
+    if (features.emojiReactsNonRGI) {
       soapboxConfig.set('allowedEmoji', soapboxConfig.allowedEmoji.map(removeVS16s));
     }
   });

app/soapbox/components/account.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector, useOnScreen } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
@@ -117,19 +117,14 @@ const Account = ({
   emoji,
   note,
 }: IAccount) => {
-  const overflowRef = React.useRef<HTMLDivElement>(null);
-  const actionRef = React.useRef<HTMLDivElement>(null);
-  // @ts-ignore
-  const isOnScreen = useOnScreen(overflowRef);
-
-  const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
+  const overflowRef = useRef<HTMLDivElement>(null);
+  const actionRef = useRef<HTMLDivElement>(null);
 
   const me = useAppSelector((state) => state.me);
   const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
 
   const handleAction = () => {
-    // @ts-ignore
-    onActionClick(account);
+    onActionClick!(account);
   };
 
   const renderAction = () => {
@@ -162,19 +157,6 @@ const Account = ({
 
   const intl = useIntl();
 
-  React.useEffect(() => {
-    const style: React.CSSProperties = {};
-    const actionWidth = actionRef.current?.clientWidth || 0;
-
-    if (overflowRef.current) {
-      style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
-    } else {
-      style.visibility = 'hidden';
-    }
-
-    setStyle(style);
-  }, [isOnScreen, overflowRef, actionRef]);
-
   if (!account) {
     return null;
   }
@@ -195,7 +177,7 @@ const Account = ({
   return (
     <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3}>
+        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='overflow-hidden'>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -215,7 +197,7 @@ const Account = ({
             </LinkEl>
           </ProfilePopper>
 
-          <div className='grow'>
+          <div className='grow overflow-hidden'>
             <ProfilePopper
               condition={showProfileHoverCard}
               wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -225,7 +207,7 @@ const Account = ({
                 title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
-                <HStack space={1} alignItems='center' grow style={style}>
+                <HStack space={1} alignItems='center' grow>
                   <Text
                     size='sm'
                     weight='semibold'
@@ -241,7 +223,7 @@ const Account = ({
             </ProfilePopper>
 
             <Stack space={withAccountNote || note ? 1 : 0}>
-              <HStack alignItems='center' space={1} style={style}>
+              <HStack alignItems='center' space={1}>
                 <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
 
                 {account.favicon && (

app/soapbox/components/ui/menu/menu.css

@@ -31,7 +31,3 @@ div:focus[data-reach-menu-list] {
 [data-reach-menu-link][data-disabled] {
   @apply opacity-25 cursor-default;
 }
-
-[data-reach-menu-popover] hr {
-  @apply my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800;
-}

app/soapbox/components/ui/menu/menu.tsx

@@ -37,6 +37,6 @@ const MenuList: React.FC<IMenuList> = (props) => {
 };
 
 /** Divides menu items. */
-const MenuDivider = () => <hr />;
+const MenuDivider = () => <hr className='my-1 mx-2 border-t-2 border-gray-100 dark:border-gray-800' />;
 
 export { Menu, MenuButton, MenuDivider, MenuItems, MenuItem, MenuList, MenuLink };

app/soapbox/features/chats/components/chat-composer.tsx

@@ -43,7 +43,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   onSelectFile: (files: FileList, intl: IntlShape) => void
   resetFileKey: number | null
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
@@ -73,13 +73,14 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocked_by']));
   const isBlocking = useAppSelector((state) => state.getIn(['relationships', chat?.account?.id, 'blocking']));
   const maxCharacterCount = useAppSelector((state) => state.instance.getIn(['configuration', 'chats', 'max_characters']) as number);
+  const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
 
   const [suggestions, setSuggestions] = useState<Suggestion>(initialSuggestionState);
   const isSuggestionsAvailable = suggestions.list.length > 0;
 
   const hasAttachment = attachments.length > 0;
   const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
-  const isSubmitDisabled = disabled || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
+  const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
 
   const overLimitText = maxCharacterCount ? maxCharacterCount - value?.length : '';
 
@@ -172,6 +173,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
               resetFileKey={resetFileKey}
               iconClassName='w-5 h-5'
               className='text-primary-500'
+              disabled={isUploading || (attachments.length >= attachmentLimit)}
             />
           </Stack>
         )}

app/soapbox/features/chats/components/chat-textarea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Textarea } from 'soapbox/components/ui';
+import { HStack, Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
 
 import ChatPendingUpload from './chat-pending-upload';
@@ -8,7 +8,7 @@ import ChatUpload from './chat-upload';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
-  onDeleteAttachment?: () => void
+  onDeleteAttachment?: (i: number) => void
   isUploading?: boolean
   uploadProgress?: number
 }
@@ -21,6 +21,14 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
   uploadProgress = 0,
   ...rest
 }) => {
+  const handleDeleteAttachment = (i: number) => {
+    return () => {
+      if (onDeleteAttachment) {
+        onDeleteAttachment(i);
+      }
+    };
+  };
+
   return (
     <div className={`
       block
@@ -35,19 +43,23 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
     `}
     >
       {(!!attachments?.length || isUploading) && (
-        <div className='flex p-3 pb-0'>
-          {isUploading && (
-            <ChatPendingUpload progress={uploadProgress} />
-          )}
-
-          {attachments?.map(attachment => (
-            <ChatUpload
-              key={attachment.id}
-              attachment={attachment}
-              onDelete={onDeleteAttachment}
-            />
+        <HStack className='-ml-2 -mt-2 p-3 pb-0' wrap>
+          {attachments?.map((attachment, i) => (
+            <div className='ml-2 mt-2 flex'>
+              <ChatUpload
+                key={attachment.id}
+                attachment={attachment}
+                onDelete={handleDeleteAttachment(i)}
+              />
+            </div>
           ))}
-        </div>
+
+          {isUploading && (
+            <div className='ml-2 mt-2 flex'>
+              <ChatPendingUpload progress={uploadProgress} />
+            </div>
+          )}
+        </HStack>
       )}
 
       <Textarea theme='transparent' {...rest} />

app/soapbox/features/chats/components/chat-upload-preview.tsx

@@ -21,6 +21,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
 
   switch (attachment.type) {
     case 'image':
+    case 'gifv':
       return (
         <img
           className='pointer-events-none h-full w-full object-cover'

app/soapbox/features/chats/components/chat.tsx

@@ -5,17 +5,21 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
 import { Stack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { IChat, useChatActions } from 'soapbox/queries/chats';
+import toast from 'soapbox/toast';
 
 import ChatComposer from './chat-composer';
 import ChatMessageList from './chat-message-list';
 
+import type { Attachment } from 'soapbox/types/entities';
+
 const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 
 const messages = defineMessages({
   failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' },
+  uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
 });
 
 interface ChatInterface {
@@ -49,18 +53,19 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   const dispatch = useAppDispatch();
 
   const { createChatMessage, acceptChat } = useChatActions(chat.id);
+  const attachmentLimit = useAppSelector(state => state.instance.configuration.getIn(['chats', 'max_media_attachments']) as number);
 
   const [content, setContent] = useState<string>('');
-  const [attachment, setAttachment] = useState<any>(undefined);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
   const [errorMessage, setErrorMessage] = useState<string>();
 
-  const isSubmitDisabled = content.length === 0 && !attachment;
+  const isSubmitDisabled = content.length === 0 && attachments.length === 0;
 
   const submitMessage = () => {
-    createChatMessage.mutate({ chatId: chat.id, content, mediaId: attachment?.id }, {
+    createChatMessage.mutate({ chatId: chat.id, content, mediaIds: attachments.map(a => a.id) }, {
       onSuccess: () => {
         setErrorMessage(undefined);
       },
@@ -79,7 +84,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
       clearNativeInputValue(inputRef.current);
     }
     setContent('');
-    setAttachment(undefined);
+    setAttachments([]);
     setIsUploading(false);
     setUploadProgress(0);
     setResetFileKey(fileKeyGen());
@@ -126,8 +131,10 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   const handleMouseOver = () => markRead();
 
-  const handleRemoveFile = () => {
-    setAttachment(undefined);
+  const handleRemoveFile = (i: number) => {
+    const newAttachments = [...attachments];
+    newAttachments.splice(i, 1);
+    setAttachments(newAttachments);
     setResetFileKey(fileKeyGen());
   };
 
@@ -137,13 +144,18 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   };
 
   const handleFiles = (files: FileList) => {
+    if (files.length + attachments.length > attachmentLimit) {
+      toast.error(messages.uploadErrorLimit);
+      return;
+    }
+
     setIsUploading(true);
 
     const data = new FormData();
     data.append('file', files[0]);
 
     dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachment(normalizeAttachment(response.data));
+      setAttachments([...attachments, normalizeAttachment(response.data)]);
       setIsUploading(false);
     }).catch(() => {
       setIsUploading(false);
@@ -172,7 +184,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         onSelectFile={handleFiles}
         resetFileKey={resetFileKey}
         onPaste={handlePaste}
-        attachments={attachment ? [attachment] : []}
+        attachments={attachments}
         onDeleteAttachment={handleRemoveFile}
         isUploading={isUploading}
         uploadProgress={uploadProgress}

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -1,12 +1,14 @@
+import { useFloating } from '@floating-ui/react';
+import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
 import Account from 'soapbox/components/account';
-import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { MenuDivider } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 import ThemeToggle from './theme-toggle';
@@ -39,6 +41,8 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const features = useFeatures();
   const intl = useIntl();
 
+  const [visible, setVisible] = useState(false);
+  const { x, y, strategy, refs } = useFloating<HTMLButtonElement>({ placement: 'bottom-end' });
   const authUsers = useAppSelector((state) => state.auth.users);
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.id)!));
 
@@ -62,7 +66,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     );
   };
 
-  const menu: IMenuItem[] = React.useMemo(() => {
+  const menu: IMenuItem[] = useMemo(() => {
     const menu: IMenuItem[] = [];
 
     menu.push({ text: renderAccount(account), to: `/@${account.acct}` });
@@ -96,42 +100,82 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     return menu;
   }, [account, authUsers, features]);
 
-  React.useEffect(() => {
+  const toggleVisible = () => setVisible(!visible);
+
+  useEffect(() => {
     fetchOwnAccountThrottled();
   }, [account, authUsers]);
 
+  useClickOutside(refs, () => {
+    setVisible(false);
+  });
+
   return (
-    <Menu>
-      <MenuButton>
+    <>
+      <button type='button' ref={refs.setReference} onClick={toggleVisible}>
         {children}
-      </MenuButton>
+      </button>
 
-      <MenuList>
-        {menu.map((menuItem, idx) => {
-          if (menuItem.toggle) {
-            return (
-              <div key={idx} className='flex flex-row items-center justify-between space-x-4 px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
-                <span>{menuItem.text}</span>
-
-                {menuItem.toggle}
-              </div>
-            );
-          } else if (!menuItem.text) {
-            return <MenuDivider key={idx} />;
-          } else {
-            const Comp: any = menuItem.action ? MenuItem : MenuLink;
-            const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
-
-            return (
-              <Comp key={idx} {...itemProps} className='truncate'>
-                {menuItem.text}
-              </Comp>
-            );
-          }
-        })}
-      </MenuList>
-    </Menu>
+      {visible && (
+        <div
+          ref={refs.setFloating}
+          className='z-[1003] mt-2 max-w-xs rounded-md bg-white shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            width: 'max-content',
+          }}
+        >
+          {menu.map((menuItem, i) => (
+            <MenuItem key={i} menuItem={menuItem} />
+          ))}
+        </div>
+      )}
+    </>
   );
 };
 
+interface MenuItemProps {
+  className?: string
+  menuItem: IMenuItem
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ className, menuItem }) => {
+  const baseClassName = clsx(className, 'block w-full cursor-pointer truncate px-4 py-2.5 text-left text-sm text-gray-700 hover:bg-gray-100 rtl:text-right dark:text-gray-500 dark:hover:bg-gray-800');
+
+  if (menuItem.toggle) {
+    return (
+      <div className='flex flex-row items-center justify-between space-x-4 px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
+        <span>{menuItem.text}</span>
+
+        {menuItem.toggle}
+      </div>
+    );
+  } else if (!menuItem.text) {
+    return <MenuDivider />;
+  } else if (menuItem.action) {
+    return (
+      <button
+        type='button'
+        onClick={menuItem.action}
+        className={baseClassName}
+      >
+        {menuItem.text}
+      </button>
+    );
+  } else if (menuItem.to) {
+    return (
+      <Link
+        to={menuItem.to}
+        className={baseClassName}
+      >
+        {menuItem.text}
+      </Link>
+    );
+  } else {
+    throw menuItem;
+  }
+};
+
 export default ProfileDropdown;

app/soapbox/hooks/index.ts

@@ -2,6 +2,7 @@ export { useAccount } from './useAccount';
 export { useApi } from './useApi';
 export { useAppDispatch } from './useAppDispatch';
 export { useAppSelector } from './useAppSelector';
+export { useClickOutside } from './useClickOutside';
 export { useCompose } from './useCompose';
 export { useDebounce } from './useDebounce';
 export { useDimensions } from './useDimensions';

app/soapbox/hooks/useClickOutside.ts

@@ -0,0 +1,29 @@
+import { ExtendedRefs } from '@floating-ui/react';
+import { useCallback, useEffect } from 'react';
+
+/** Trigger `callback` when a Floating UI element is clicked outside from. */
+export const useClickOutside = <T extends HTMLElement>(
+  refs: ExtendedRefs<T>,
+  callback: (e: MouseEvent) => void,
+) => {
+  const handleWindowClick = useCallback((e: MouseEvent) => {
+    if (e.target) {
+      const target = e.target as Node;
+
+      const floating = refs.floating.current;
+      const reference = refs.reference.current as T | undefined;
+
+      if (!(floating?.contains(target) || reference?.contains(target))) {
+        callback(e);
+      }
+    }
+  }, [refs.floating.current, refs.reference.current]);
+
+  useEffect(() => {
+    window.addEventListener('click', handleWindowClick);
+
+    return () => {
+      window.removeEventListener('click', handleWindowClick);
+    };
+  }, []);
+};

app/soapbox/hooks/useOnScreen.ts

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
-export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
-  const [isIntersecting, setIntersecting] = React.useState(false);
+/** Detect whether a given element is on the screen. */
+// https://stackoverflow.com/a/64892655
+export const useOnScreen = <T>(ref: React.RefObject<T & Element>) =>  {
+  const [isIntersecting, setIntersecting] = useState(false);
 
-  const observer = new IntersectionObserver(
-    ([entry]) => setIntersecting(entry.isIntersecting),
-  );
+  const observer = useMemo(() => {
+    return new IntersectionObserver(
+      ([entry]) => setIntersecting(entry.isIntersecting),
+    );
+  }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (ref.current) {
       observer.observe(ref.current);
     }

app/soapbox/normalizers/__tests__/instance.test.ts

@@ -10,7 +10,8 @@ describe('normalizeInstance()', () => {
       configuration: {
         media_attachments: {},
         chats: {
-          max_characters: 500,
+          max_characters: 5000,
+          max_media_attachments: 1,
         },
         polls: {
           max_options: 4,

app/soapbox/normalizers/instance.ts

@@ -22,7 +22,8 @@ export const InstanceRecord = ImmutableRecord({
   configuration: ImmutableMap<string, any>({
     media_attachments: ImmutableMap<string, any>(),
     chats: ImmutableMap<string, number>({
-      max_characters: 500,
+      max_characters: 5000,
+      max_media_attachments: 1,
     }),
     polls: ImmutableMap<string, number>({
       max_options: 4,

app/soapbox/queries/chats.ts

@@ -231,9 +231,13 @@ const useChatActions = (chatId: string) => {
   };
 
   const createChatMessage = useMutation(
-    (
-      {  chatId, content, mediaId }: { chatId: string, content: string, mediaId?: string },
-    ) => api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, { content, media_id: mediaId, media_ids: [mediaId] }),
+    ({ chatId, content, mediaIds }: { chatId: string, content: string, mediaIds?: string[] }) => {
+      return api.post<ChatMessage>(`/api/v1/pleroma/chats/${chatId}/messages`, {
+        content,
+        media_id: (mediaIds && mediaIds.length === 1) ? mediaIds[0] : undefined, // Pleroma backwards-compat
+        media_ids: mediaIds,
+      });
+    },
     {
       retry: false,
       onMutate: async (variables) => {

app/soapbox/reducers/__tests__/instance.test.ts

@@ -13,7 +13,8 @@ describe('instance reducer', () => {
       description_limit: 1500,
       configuration: {
         chats: {
-          max_characters: 500,
+          max_characters: 5000,
+          max_media_attachments: 1,
         },
         statuses: {
           max_characters: 500,

app/soapbox/utils/features.ts

@@ -380,10 +380,10 @@ const getInstanceFeatures = (instance: Instance) => {
     emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
 
     /**
-     * The backend allows only RGI ("Recommended for General Interchange") emoji reactions.
+     * The backend allows only non-RGI ("Recommended for General Interchange") emoji reactions.
      * @see PUT /api/v1/pleroma/statuses/:id/reactions/:emoji
      */
-    emojiReactsRGI: (v.software === PLEROMA && gte(v.version, '2.2.49')) || v.software === TRUTHSOCIAL,
+    emojiReactsNonRGI: v.software === PLEROMA && lt(v.version, '2.2.49'),
 
     /**
      * Sign in with an Ethereum wallet.

package.json

@@ -46,6 +46,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.20.13",
+    "@floating-ui/react": "^0.19.1",
     "@fontsource/inter": "^4.5.1",
     "@fontsource/roboto-mono": "^4.5.8",
     "@gamestdio/websocket": "^0.3.2",

yarn.lock

@@ -1722,6 +1722,34 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.0.tgz#ae7ae7923d41f3d84cb2fd88740a89436610bbec"
+  integrity sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==
+
+"@floating-ui/dom@^1.1.1":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.0.tgz#a60212069cc58961c478037c30eba4b191c75316"
+  integrity sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==
+  dependencies:
+    "@floating-ui/core" "^1.2.0"
+
+"@floating-ui/react-dom@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.2.2.tgz#ed256992fd44fcfcddc96da68b4b92f123d61871"
+  integrity sha512-DbmFBLwFrZhtXgCI2ra7wXYT8L2BN4/4AMQKyu05qzsVji51tXOfF36VE2gpMB6nhJGHa85PdEg75FB4+vnLFQ==
+  dependencies:
+    "@floating-ui/dom" "^1.1.1"
+
+"@floating-ui/react@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.1.tgz#bcaeaf3856dfeea388816f7e66750cab26208376"
+  integrity sha512-h7hr53rLp+VVvWvbu0dOBvGsLeeZwn1DTLIllIaLYjGWw20YhAgEqegHU+nc7BJ30ttxq4Sq6hqARm0ne6chXQ==
+  dependencies:
+    "@floating-ui/react-dom" "^1.2.2"
+    aria-hidden "^1.1.3"
+    tabbable "^6.0.1"
+
 "@fontsource/inter@^4.5.1":
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.1.tgz#058d8a02354f3c78e369d452c15d33557ec1b705"
@@ -5381,6 +5409,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.3:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.2.tgz#8c4f7cc88d73ca42114106fdf6f47e68d31475b8"
+  integrity sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -16517,6 +16552,11 @@ tabbable@^5.3.3:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
   integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
 
+tabbable@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.0.1.tgz#427a09b13c83ae41eed3e88abb76a4af28bde1a6"
+  integrity sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"