SortFriendRequests: improve formatting & display

src/plugins/replyTimestamp/index.tsx

@@ -9,16 +9,11 @@ import "./style.css";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { filters, findByPropsLazy, mapMangledModuleLazy } from "@webpack";
-import { Timestamp } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { DateUtils, Timestamp } from "@webpack/common";
 import type { Message } from "discord-types/general";
 import type { HTMLAttributes } from "react";
 
-const { calendarFormat, dateFormat, isSameDay } = mapMangledModuleLazy("millisecondsInUnit:", {
-    calendarFormat: filters.byCode("sameElse"),
-    dateFormat: filters.byCode('":'),
-    isSameDay: filters.byCode("Math.abs(+"),
-});
 const MessageClasses = findByPropsLazy("separator", "latin24CompactTimeStamp");
 
 function Sep(props: HTMLAttributes<HTMLElement>) {
@@ -46,14 +41,14 @@ function ReplyTimestamp({
     return (
         <Timestamp
             className="vc-reply-timestamp"
-            compact={isSameDay(refTimestamp, baseTimestamp)}
+            compact={DateUtils.isSameDay(refTimestamp, baseTimestamp)}
             timestamp={refTimestamp}
             isInline={false}
         >
             <Sep>[</Sep>
-            {isSameDay(refTimestamp, baseTimestamp)
-                ? dateFormat(refTimestamp, "LT")
-                : calendarFormat(refTimestamp)
+            {DateUtils.isSameDay(refTimestamp, baseTimestamp)
+                ? DateUtils.dateFormat(refTimestamp, "LT")
+                : DateUtils.calendarFormat(refTimestamp)
             }
             <Sep>]</Sep>
         </Timestamp>

src/plugins/sortFriendRequests/index.tsx

@@ -16,15 +16,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
 import { definePluginSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { RelationshipStore, Text } from "@webpack/common";
+import { DateUtils, RelationshipStore, Text, TooltipContainer } from "@webpack/common";
 import { User } from "discord-types/general";
 import { PropsWithChildren } from "react";
 
+const formatter = new Intl.DateTimeFormat(undefined, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+});
+
+const cl = classNameFactory("vc-sortFriendRequests-");
+
 function getSince(user: User) {
     return new Date(RelationshipStore.getSince(user.id));
 }
@@ -68,9 +78,13 @@ export default definePlugin({
     WrapperDateComponent: ErrorBoundary.wrap(({ user, children }: PropsWithChildren<{ user: User; }>) => {
         const since = getSince(user);
 
-        return <Flex flexDirection="row" style={{ alignItems: "center", justifyContent: "space-between", width: "100%", marginRight: "0.5em" }}>
+        return <div className={cl("wrapper")}>
             {children}
-            {!isNaN(since.getTime()) && <Text variant="text-xs/normal" color="text-muted">{since.toDateString()}</Text>}
-        </Flex>;
+            {!isNaN(since.getTime()) && (
+                <TooltipContainer text={DateUtils.dateFormat(since, "LLLL")} tooltipClassName={cl("tooltip")}>
+                    <Text variant="text-xs/normal" className={cl("date")}>{formatter.format(since)}</Text>
+                </TooltipContainer>
+            )}
+        </div>;
     })
 });

src/plugins/sortFriendRequests/styles.css

@@ -0,0 +1,18 @@
+.vc-sortFriendRequests-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-right: 0.5em;
+}
+
+.vc-sortFriendRequests-tooltip {
+    max-width: none;
+    white-space: nowrap;
+}
+
+.vc-sortFriendRequests-date {
+    color: var(--text-muted);
+    font-family: var(--font-code);
+}

src/webpack/common/types/utils.d.ts

@@ -324,3 +324,10 @@ export interface DisplayProfileUtils {
     getDisplayProfile(userId: string, guildId?: string, customStores?: any): DisplayProfile | null;
     useDisplayProfile(userId: string, guildId?: string, customStores?: any): DisplayProfile | null;
 }
+
+export interface DateUtils {
+    isSameDay(date1: Date, date2: Date): boolean;
+    calendarFormat(date: Date): string;
+    dateFormat(date: Date, format: string): string;
+    diffAsUnits(start: Date, end: Date, stopAtOneSecond?: boolean): Record<"days" | "hours" | "minutes" | "seconds", number>;
+}

src/webpack/common/utils.ts

@@ -199,3 +199,10 @@ export const DisplayProfileUtils: t.DisplayProfileUtils = mapMangledModuleLazy(/
     getDisplayProfile: filters.byCode(".getGuildMemberProfile("),
     useDisplayProfile: filters.byCode(/\[\i\.\i,\i\.\i],\(\)=>/)
 });
+
+export const DateUtils: t.DateUtils = mapMangledModuleLazy("millisecondsInUnit:", {
+    calendarFormat: filters.byCode("sameElse"),
+    dateFormat: filters.byCode('":'),
+    isSameDay: filters.byCode("Math.abs(+"),
+    diffAsUnits: filters.byCode("days:0", "millisecondsInUnit")
+});