MutualGroupDMs: Add Mutual Groups to DM Sidebar (#2817)

src/plugins/mutualGroupDMs/index.tsx

@@ -20,7 +20,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { isNonNullish } from "@utils/guards";
 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 { Channel, User } from "discord-types/general";
 
@@ -28,6 +28,7 @@ const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
 const UserUtils = findByPropsLazy("getGlobalName");
 
 const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
+const ExpandableList = findComponentByCodeLazy(".mutualFriendItem]");
 const GuildLabelClasses = findByPropsLazy("guildNick", "guildAvatarWithoutIcon");
 
 function getGroupDMName(channel: Channel) {
@@ -50,6 +51,29 @@ function getMutualGDMCountText(user: User) {
     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");
 
 export default definePlugin({
@@ -70,6 +94,13 @@ export default definePlugin({
                     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; }) => {
-        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 (
             <ScrollerThin
@@ -124,5 +136,24 @@ export default definePlugin({
                 }
             </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, () => { })}
+                />
+            </>
+        );
     })
 });