Fix: Emojis showing through spoilers.

Fix: Copy ID copies wrong ID.
Messaging: Add context menu to avatar / username.

external/lang

@@ -1 +1 @@
-Subproject commit 755f35fcdd769f15a68512403074a584441f3fc6
+Subproject commit 099fb74131c60955e8226ce0a290cb22e959d7d6

src/components/common/messaging/Message.tsx

@@ -32,6 +32,8 @@ function Message({ attachContext, message, contrast, content: replacement, head:
 
     const content = message.content as string;
     const head = preferHead || (message.replies && message.replies.length > 0);
+    const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
+
     return (
         <>
             { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
@@ -44,12 +46,14 @@ function Message({ attachContext, message, contrast, content: replacement, head:
                 onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
                 <MessageInfo>
                     { head ?
-                        <UserIcon target={user} size={36} /> :
+                        <UserIcon target={user} size={36} onContextMenu={userContext} /> :
                         <MessageDetail message={message} position="left" /> }
                 </MessageInfo>
                 <MessageContent>
-                    { head && <span className="author">
+                    { head && <span className="detail">
-                        <Username user={user} />
+                        <span className="author">
+                            <Username user={user} onContextMenu={userContext} />
+                        </span>
                         <MessageDetail message={message} position="top" />
                     </span> }
                     { replacement ?? <Markdown content={content} /> }

src/components/common/messaging/MessageBase.tsx

@@ -53,12 +53,20 @@ export default styled.div<BaseMessageProps>`
         color: var(--error);
     ` }
 
-    .author {
+    .detail {
         gap: 8px;
         display: flex;
         align-items: center;
     }
 
+    .author {
+        cursor: pointer;
+        
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    
     .copy {
         width: 0;
         height: 0;
@@ -89,6 +97,10 @@ export const MessageInfo = styled.div`
         color: var(--tertiary-foreground);
     }
 
+    svg {
+        cursor: pointer;
+    }
+
     time {
         opacity: 0;
     }

src/components/common/user/UserShort.tsx

@@ -2,8 +2,8 @@ import { User } from "revolt.js";
 import UserIcon from "./UserIcon";
 import { Text } from "preact-i18n";
 
-export function Username({ user }: { user?: User }) {
+export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
-    return <b>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
+    return <b {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
 }
 
 export default function UserShort({ user, size }: { user?: User, size?: number }) {

src/components/markdown/Markdown.module.scss

@@ -115,15 +115,23 @@
         padding: 0 2px;
         cursor: pointer;
         user-select: none;
-        color: transparent;
         border-radius: 4px;
+        color: transparent;
         background: #151515;
 
+        > * {
+            opacity: 0;
+        }
+
         &:global(.shown) {
             cursor: auto;
             user-select: all;
             color: var(--foreground);
             background: var(--secondary-background);
+
+            > * {
+                opacity: 1;
+            }
         }
     }
 

src/components/navigation/items/ButtonItem.tsx

@@ -97,8 +97,7 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
     const { openScreen } = useIntermediate();
 
     return (
-        <div
+        <div data-active={active}
-            data-active={active}
             data-alert={typeof alert === 'string'}
             className={classNames(styles.item, { [styles.compact]: compact })}
             onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>

src/lib/ContextMenus.tsx

@@ -562,7 +562,7 @@ function ContextMenus(props: WithDispatcher) {
                         }
                     }
 
-                    let id = server?._id ?? channel?._id ?? user?._id ?? message?._id;
+                    let id = sid ?? cid ?? uid ?? message?._id;
                     if (id) {
                         pushDivider();