SortFriendRequests: Add SortFriendList

src/plugins/sortFriendRequests/index.tsx

@@ -21,10 +21,10 @@ import "./styles.css";
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Devs } from "@utils/constants";
+import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { User } from "@vencord/discord-types";
-import { DateUtils, RelationshipStore, Text, TooltipContainer } from "@webpack/common";
+import { DateUtils, Flex, RelationshipStore, Text, TooltipContainer } from "@webpack/common";
 import { PropsWithChildren } from "react";
 
 const formatter = new Intl.DateTimeFormat(undefined, {
@@ -50,24 +50,34 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "SortFriendRequests",
-    authors: [Devs.Megu],
+    authors: [Devs.Megu, EquicordDevs.CallMeGii],
     description: "Sorts friend requests by date of receipt",
     settings,
 
-    patches: [{
-        find: "getRelationshipCounts(){",
-        replacement: {
-            match: /\}\)\.sortBy\((.+?)\)\.value\(\)/,
-            replace: "}).sortBy(row => $self.wrapSort(($1), row)).value()"
+    patches: [
+        {
+            find: "getRelationshipCounts(){",
+            replacement: {
+                match: /\}\)\.sortBy\((.+?)\)\.value\(\)/,
+                replace: "}).sortBy(row => $self.wrapSort(($1), row)).value()"
+            }
+        }, {
+            find: "#{intl::FRIEND_REQUEST_CANCEL}",
+            replacement: {
+                predicate: () => settings.store.showDates,
+                match: /(?<=\.listItemContents,children:\[)\(0,.+?(?=,\(0)(?<=user:(\i).+?)/,
+                replace: (children, user) => `$self.WrapperDateComponent({user:${user},children:${children}})`
+            }
+        },
+        {
+            find: "peopleListItemRef",
+            replacement: {
+                predicate: () => settings.store.showDates,
+                match: /(?<=children:.*user:(\i),.*subText:).+?(?=,hovered:\i,showAccountIdentifier)/,
+                replace: "$self.makeSubtext($1, $&)"
+            }
         }
-    }, {
-        find: "#{intl::FRIEND_REQUEST_CANCEL}",
-        replacement: {
-            predicate: () => settings.store.showDates,
-            match: /(?<=\.listItemContents,children:\[)\(0,.+?(?=,\(0)(?<=user:(\i).+?)/,
-            replace: (children, user) => `$self.WrapperDateComponent({user:${user},children:${children}})`
-        }
-    }],
+    ],
 
     wrapSort(comparator: Function, row: any) {
         return row.type === 3 || row.type === 4
@@ -75,6 +85,44 @@ export default definePlugin({
             : comparator(row);
     },
 
+    makeSubtext(user: User, origSubtext: any) {
+        const since = this.getSince(user);
+        if (isNaN(since.getTime())) {
+            return null;
+        }
+
+        return (
+            <Flex
+                flexDirection="column"
+                style={{ gap: "0px", flexWrap: "wrap", lineHeight: "0.9rem" }}
+            >
+                <span>{origSubtext}</span>
+                <span>
+                    <div className="" style={{ display: "flex", alignItems: "center" }}>
+                        <svg
+                            aria-hidden="true"
+                            role="img"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="8"
+                            height="8"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            style={{ marginRight: "4px", display: "inline-block" }}
+                        >
+                            <path
+                                fill="var(--input-placeholder-text)"
+                                fillRule="evenodd"
+                                d="M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm1-18a1 1 0 1 0-2 0v7c0 .27.1.52.3.7l3 3a1 1 0 0 0 1.4-1.4L13 11.58V5Z"
+                                clipRule="evenodd"
+                            ></path>
+                        </svg>
+                        <span>Added &mdash; {since.toDateString()}</span>
+                    </div>
+                </span>
+            </Flex>
+        );
+    },
+
     WrapperDateComponent: ErrorBoundary.wrap(({ user, children }: PropsWithChildren<{ user: User; }>) => {
         const since = getSince(user);
 

src/utils/constants.ts

@@ -1157,6 +1157,10 @@ export const EquicordDevs = Object.freeze({
         name: "qouesm",
         id: 130388483494641664n,
     },
+    CallMeGii: {
+        name: "gii",
+        id: 156481332652802048n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly