diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 0c53694936b6d4b4c203689a75081701b63c4610..8c27c5130bc7851658bc2b647f593d55a9387584 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/src/components/common/messaging/Message.tsx
@@ -14,6 +14,7 @@ import { useContext } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { memo } from "preact/compat";
import { MessageReply } from "./attachments/MessageReply";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
interface Props {
attachContext?: boolean
@@ -29,10 +30,13 @@ function Message({ attachContext, message, contrast, content: replacement, head:
// TODO: of dependencies. We only need to update on u/avatar.
const user = useUser(message.author);
const client = useContext(AppContext);
+ const { openScreen } = useIntermediate();
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
+ const openProfile = () => openScreen({ id: 'profile', user_id: message.author });
return (
<div id={message._id}>
@@ -46,13 +50,13 @@ 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} onContextMenu={userContext} /> :
+ <UserIcon target={user} size={36} onContextMenu={userContext} onClick={openProfile} /> :
<MessageDetail message={message} position="left" /> }
</MessageInfo>
<MessageContent>
{ head && <span className="detail">
<span className="author">
- <Username user={user} onContextMenu={userContext} />
+ <Username user={user} onContextMenu={userContext} onClick={openProfile} />
</span>
<MessageDetail message={message} position="top" />
</span> }
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index 139ec677b37e6dd483b82a40405cb4cd0f4c1138..176f5f809f0a63ef9495c3a789094ae865f2a49b 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -14,7 +14,7 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from '../../../context/intermediate/Intermediate';
import { stopPropagation } from '../../../lib/stopPropagation';
-interface CommonProps {
+type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
active?: boolean
alert?: 'unread' | 'mention'
alertCount?: number
@@ -26,11 +26,12 @@ type UserProps = CommonProps & {
channel?: Channels.DirectMessageChannel
}
-export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
+export function UserButton(props: UserProps) {
+ const { active, alert, alertCount, user, context, channel, ...divProps } = props;
const { openScreen } = useIntermediate();
return (
- <div
+ <div {...divProps}
className={classNames(styles.item, styles.user)}
data-active={active}
data-alert={typeof alert === 'string'}
@@ -85,7 +86,9 @@ type ChannelProps = CommonProps & {
compact?: boolean
}
-export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) {
+export function ChannelButton(props: ChannelProps) {
+ const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
+
if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
if (channel.channel_type === 'DirectMessage') {
if (typeof user === 'undefined') throw "No user provided.";
@@ -95,9 +98,10 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
const { openScreen } = useIntermediate();
return (
- <div data-active={active}
+ <div {...divProps}
+ data-active={active}
data-alert={typeof alert === 'string'}
- aria-label={{}} /*TOFIX: ADD ARIA LABEL*/
+ aria-label={{}} /*FIXME: ADD ARIA LABEL*/
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
<ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
@@ -138,9 +142,12 @@ type ButtonProps = CommonProps & {
compact?: boolean
}
-export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
+export default function ButtonItem(props: ButtonProps) {
+ const { active, alert, alertCount, onClick, className, children, compact, ...divProps } = props;
+
return (
- <div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
+ <div {...divProps}
+ className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
onClick={onClick}
data-active={active}
data-alert={typeof alert === 'string'}>
diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx
index 973835490c81954d65487f4a350492e53e0dc52c..96b3728ffb19abbc31a55169e09475d4e19bf2de 100644
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -8,11 +8,12 @@ import { UserButton } from "../items/ButtonItem";
import { ChannelDebugInfo } from "./ChannelDebugInfo";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
import placeholderSVG from "../items/placeholder.svg";
-import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
interface Props {
ctx: HookContext
@@ -31,6 +32,7 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
}
export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
+ const { openScreen } = useIntermediate();
const users = useUsers(undefined, ctx);
let members = channel.recipients
.map(x => users.find(y => y?._id === x))
@@ -112,13 +114,11 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
{members.map(
user =>
user && (
- // <LinkProfile user_id={user._id}>
- <UserButton
- key={user._id}
- user={user}
- context={channel}
- />
- // </LinkProfile>
+ <UserButton
+ key={user._id}
+ user={user}
+ context={channel}
+ onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
)
)}
</GenericSidebarList>
diff --git a/src/context/intermediate/Intermediate.tsx b/src/context/intermediate/Intermediate.tsx
index ff723c0b9fc1f2f94f6ea3d3106fc1e2f92a732e..3fb816742824cf36b32dfe0a11bd9cd252d796b5 100644
--- a/src/context/intermediate/Intermediate.tsx
+++ b/src/context/intermediate/Intermediate.tsx
@@ -98,7 +98,7 @@ export default function Intermediate(props: Props) {
const navigate = (path: string) => history.push(path);
const subs = [
- internalSubscribe("Intermediate", "open_profile", openProfile),
+ internalSubscribe("Intermediate", "openProfile", openProfile),
internalSubscribe("Intermediate", "navigate", navigate)
]