[Glitch] Add ability to middle-mouse click posts in web UI

Port 683db3ab25 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/status.jsx

@@ -28,6 +28,7 @@ import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
 import { DisplayName } from './display_name';
 import { getHashtagBarForStatus } from './hashtag_bar';
+import { Permalink } from './permalink';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusIcons from './status_icons';
@@ -270,28 +271,18 @@ class Status extends ImmutablePureComponent {
   };
 
   handleClick = e => {
-    if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
-      return;
-    }
-    
-    if (e) {
-      e.preventDefault();
-    }
-    
-    this.handleHotkeyOpen();
+    e.preventDefault();
+    this.handleHotkeyOpen(e);
   };
 
-  handleAccountClick = (e, proper = true) => {
-    if (e && (e.button !== 0 || e.ctrlKey || e.metaKey))  {
+  handleMouseUp = e => {
+    // Only handle clicks on the empty space above the content
+     
+    if (e.target !== e.currentTarget) {
       return;
     }
      
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-
-    this._openProfile(proper);
+    this.handleClick(e);
   };
 
   handleExpandedToggle = () => {
@@ -358,7 +349,7 @@ class Status extends ImmutablePureComponent {
     this.props.onMention(this.props.status.get('account'));
   };
 
-  handleHotkeyOpen = () => {
+  handleHotkeyOpen = (e) => {
     if (this.props.onClick) {
       this.props.onClick();
       return;
@@ -371,7 +362,13 @@ class Status extends ImmutablePureComponent {
       return;
     }
 
-    history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`);
+    const path = `/@${status.getIn(['account', 'acct'])}/${status.get('id')}`;
+
+    if (e?.button === 0 && !(e?.ctrlKey || e?.metaKey)) {
+      history.push(path);
+    } else if (e?.button === 1 || (e?.button === 0 && (e?.ctrlKey || e?.metaKey))) {
+      window.open(path, '_blank', 'noreferrer noopener');
+    }
   };
 
   handleHotkeyOpenProfile = () => {
@@ -697,15 +694,14 @@ class Status extends ImmutablePureComponent {
             {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
 
             {(!muted) && (
-              /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-              <header onClick={this.handleClick} className='status__info'>
-                <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])}  className='status__display-name' target='_blank' rel='noopener noreferrer'>
+              <header onMouseUp={this.handleMouseUp} className='status__info'>
+                <Permalink href={status.getIn(['account', 'url'])} to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name'>
                   <div className='status__avatar'>
                     {statusAvatar}
                   </div>
 
                   <DisplayName account={status.get('account')} />
-                </a>
+                </Permalink>
                 <StatusIcons
                   status={status}
                   mediaIcons={contentMediaIcons.concat(extraMediaIcons)}

app/javascript/flavours/glitch/components/status_content.jsx

@@ -319,7 +319,7 @@ class StatusContent extends PureComponent {
       element = element.parentNode;
     }
 
-    if (deltaX + deltaY < 5 && e.button === 0 && this.props.onClick) {
+    if (deltaX + deltaY < 5 && (e.button === 0 || e.button === 1) && this.props.onClick) {
       this.props.onClick(e);
     }
 

app/javascript/flavours/glitch/features/notifications_v2/components/embedded_status.tsx

@@ -43,7 +43,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   );
 
   const handleMouseUp = useCallback<React.MouseEventHandler<HTMLDivElement>>(
-    ({ clientX, clientY, target, button }) => {
+    ({ clientX, clientY, target, button, ctrlKey, metaKey }) => {
       const [startX, startY] = clickCoordinatesRef.current ?? [0, 0];
       const [deltaX, deltaY] = [
         Math.abs(clientX - startX),
@@ -64,8 +64,14 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         element = element.parentNode as HTMLDivElement | null;
       }
 
-      if (deltaX + deltaY < 5 && button === 0 && account) {
-        history.push(`/@${account.acct}/${statusId}`);
+      if (deltaX + deltaY < 5 && account) {
+        const path = `/@${account.acct}/${statusId}`;
+
+        if (button === 0 && !(ctrlKey || metaKey)) {
+          history.push(path);
+        } else if (button === 1 || (button === 0 && (ctrlKey || metaKey))) {
+          window.open(path, '_blank', 'noreferrer noopener');
+        }
       }
 
       clickCoordinatesRef.current = null;