MutualGroupDMs: Add Mutual Groups to DM Sidebar (#2817)
This commit is contained in:
parent
0c71d6c3fa
commit
d0ad4e6c1d
|
@ -20,7 +20,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
import { isNonNullish } from "@utils/guards";
|
import { isNonNullish } from "@utils/guards";
|
||||||
import definePlugin from "@utils/types";
|
import definePlugin from "@utils/types";
|
||||||
import { findByPropsLazy } from "@webpack";
|
import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
|
||||||
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
|
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
|
||||||
import { Channel, User } from "discord-types/general";
|
import { Channel, User } from "discord-types/general";
|
||||||
|
|
||||||
|
@ -28,6 +28,7 @@ const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
|
||||||
const UserUtils = findByPropsLazy("getGlobalName");
|
const UserUtils = findByPropsLazy("getGlobalName");
|
||||||
|
|
||||||
const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
|
const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
|
||||||
|
const ExpandableList = findComponentByCodeLazy(".mutualFriendItem]");
|
||||||
const GuildLabelClasses = findByPropsLazy("guildNick", "guildAvatarWithoutIcon");
|
const GuildLabelClasses = findByPropsLazy("guildNick", "guildAvatarWithoutIcon");
|
||||||
|
|
||||||
function getGroupDMName(channel: Channel) {
|
function getGroupDMName(channel: Channel) {
|
||||||
|
@ -50,6 +51,29 @@ function getMutualGDMCountText(user: User) {
|
||||||
return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
|
return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderClickableGDMs(mutualDms: Channel[], onClose: () => void) {
|
||||||
|
return mutualDms.map(c => (
|
||||||
|
<Clickable
|
||||||
|
className={ProfileListClasses.listRow}
|
||||||
|
onClick={() => {
|
||||||
|
onClose();
|
||||||
|
SelectedChannelActionCreators.selectPrivateChannel(c.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
|
||||||
|
size="SIZE_40"
|
||||||
|
className={ProfileListClasses.listAvatar}
|
||||||
|
>
|
||||||
|
</Avatar>
|
||||||
|
<div className={ProfileListClasses.listRowContent}>
|
||||||
|
<div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
|
||||||
|
<div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
|
||||||
|
</div>
|
||||||
|
</Clickable>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
const IS_PATCHED = Symbol("MutualGroupDMs.Patched");
|
const IS_PATCHED = Symbol("MutualGroupDMs.Patched");
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
|
@ -70,6 +94,13 @@ export default definePlugin({
|
||||||
replace: "$1==='MUTUAL_GDMS'?$self.renderMutualGDMs(arguments[0]):$&"
|
replace: "$1==='MUTUAL_GDMS'?$self.renderMutualGDMs(arguments[0]):$&"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: 'section:"MUTUAL_FRIENDS"',
|
||||||
|
replacement: {
|
||||||
|
match: /\.openUserProfileModal.+?\)}\)}\)(?<=(\(0,\i\.jsxs?\)\(\i\.\i,{className:(\i)\.divider}\)).+?)/,
|
||||||
|
replace: "$&,$self.renderDMPageList({user: arguments[0].user, Divider: $1, listStyle: $2.list})"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
@ -84,28 +115,9 @@ export default definePlugin({
|
||||||
},
|
},
|
||||||
|
|
||||||
renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: User, onClose: () => void; }) => {
|
renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: User, onClose: () => void; }) => {
|
||||||
const mutualDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
|
const mutualGDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
|
||||||
|
|
||||||
const entries = mutualDms.map(c => (
|
const entries = renderClickableGDMs(mutualGDms, onClose);
|
||||||
<Clickable
|
|
||||||
className={ProfileListClasses.listRow}
|
|
||||||
onClick={() => {
|
|
||||||
onClose();
|
|
||||||
SelectedChannelActionCreators.selectPrivateChannel(c.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Avatar
|
|
||||||
src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
|
|
||||||
size="SIZE_40"
|
|
||||||
className={ProfileListClasses.listAvatar}
|
|
||||||
>
|
|
||||||
</Avatar>
|
|
||||||
<div className={ProfileListClasses.listRowContent}>
|
|
||||||
<div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
|
|
||||||
<div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
|
|
||||||
</div>
|
|
||||||
</Clickable>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollerThin
|
<ScrollerThin
|
||||||
|
@ -124,5 +136,24 @@ export default definePlugin({
|
||||||
}
|
}
|
||||||
</ScrollerThin>
|
</ScrollerThin>
|
||||||
);
|
);
|
||||||
|
}),
|
||||||
|
|
||||||
|
renderDMPageList: ErrorBoundary.wrap(({ user, Divider, listStyle }: { user: User, Divider: JSX.Element, listStyle: string; }) => {
|
||||||
|
const mutualGDms = getMutualGroupDms(user.id);
|
||||||
|
if (mutualGDms.length === 0) return null;
|
||||||
|
|
||||||
|
const header = getMutualGDMCountText(user);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{Divider}
|
||||||
|
<ExpandableList
|
||||||
|
className={listStyle}
|
||||||
|
header={header}
|
||||||
|
isLoadingHeader={false}
|
||||||
|
children={renderClickableGDMs(mutualGDms, () => { })}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue