feat(BetterActivites): Added

src/plugins/betterActivities/components/ActivityTooltip.tsx

@@ -0,0 +1,74 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { findComponentByCodeLazy } from "@webpack";
+import { moment, React, useMemo } from "@webpack/common";
+import { User } from "discord-types/general";
+
+import { Activity, Application } from "../types";
+import {
+    formatElapsedTime,
+    getActivityImage,
+    getApplicationIcons,
+    getValidStartTimeStamp,
+    getValidTimestamps
+} from "../utils";
+
+const TimeBar = findComponentByCodeLazy<{
+    start: number;
+    end: number;
+    themed: boolean;
+    className: string;
+}>("isSingleLine");
+
+interface ActivityTooltipProps {
+    activity: Activity;
+    application?: Application;
+    user: User;
+    cl: ReturnType<typeof classNameFactory>;
+}
+
+export default function ActivityTooltip({ activity, application, user, cl }: Readonly<ActivityTooltipProps>) {
+    const image = useMemo(() => {
+        const activityImage = getActivityImage(activity, application);
+        if (activityImage) {
+            return activityImage;
+        }
+        const icon = getApplicationIcons([activity], true)[0];
+        return icon?.image.src;
+    }, [activity]);
+    const timestamps = useMemo(() => getValidTimestamps(activity), [activity]);
+    const startTime = useMemo(() => getValidStartTimeStamp(activity), [activity]);
+
+    const hasDetails = activity.details ?? activity.state;
+    return (
+        <ErrorBoundary>
+            <div className={cl("activity")}>
+                {image && <img className={cl("activity-image")} src={image} alt="Activity logo" />}
+                <div className={cl("activity-title")}>{activity.name}</div>
+                {hasDetails && <div className={cl("activity-divider")} />}
+                <div className={cl("activity-details")}>
+                    <div>{activity.details}</div>
+                    <div>{activity.state}</div>
+                    {!timestamps && startTime &&
+                        <div className={cl("activity-time-bar")}>
+                            {formatElapsedTime(moment(startTime), moment())}
+                        </div>
+                    }
+                </div>
+                {timestamps && (
+                    <TimeBar start={timestamps.start}
+                        end={timestamps.end}
+                        themed={false}
+                        className={cl("activity-time-bar")}
+                    />
+                )}
+            </div>
+        </ErrorBoundary>
+    );
+}

src/plugins/betterActivities/components/Caret.tsx

@@ -0,0 +1,13 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export function Caret({ disabled, direction }: { disabled: boolean; direction: "left" | "right"; }) {
+    return (
+        <svg className={`vc-bactivities-caret-${direction.toLowerCase()} ${disabled && "disabled"}`} width="24" height="24" viewBox="0 0 24 24">
+            <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M16.59 8.59004L12 13.17L7.41 8.59004L6 10L12 16L18 10L16.59 8.59004Z" />
+        </svg>
+    );
+}

src/plugins/betterActivities/components/SpotifyIcon.tsx

@@ -0,0 +1,11 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { SVGProps } from "react";
+
+export function SpotifyIcon(props: SVGProps<SVGSVGElement>) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}><path fill="#1ed760" d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007a7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"></path></svg>);
+}

src/plugins/betterActivities/components/TwitchIcon.tsx

@@ -0,0 +1,11 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { SVGProps } from "react";
+
+export function TwitchIcon(props: SVGProps<SVGSVGElement>) {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 268" {...props}><path fill="#5a3e85" d="M17.458 0L0 46.556v186.201h63.983v34.934h34.931l34.898-34.934h52.36L256 162.954V0zm23.259 23.263H232.73v128.029l-40.739 40.741H128L93.113 226.92v-34.886H40.717zm64.008 116.405H128V69.844h-23.275zm63.997 0h23.27V69.844h-23.27z"></path></svg>);
+}