feat(betterActivities): use ActivityView in tooltip

src/plugins/betterActivities/components/ActivityTooltip.tsx

@@ -6,26 +6,10 @@
 
 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 settings from "../settings";
+import { ActivityView } from "../index";
 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;
@@ -35,41 +19,15 @@ interface ActivityTooltipProps {
 }
 
 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>
-                    {settings.store.showAppDescriptions && application?.description && <div>{application.description}</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 className={cl("activity-tooltip")}>
+                <ActivityView
+                    activity={activity}
+                    user={user}
+                    application={application}
+                    type="BiteSizePopout"
+                />
             </div>
         </ErrorBoundary>
     );

src/plugins/betterActivities/index.tsx

@@ -23,7 +23,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { findComponentByCodeLazy } from "@webpack";
-import { PresenceStore, React, Tooltip, useStateFromStores } from "@webpack/common";
+import { PresenceStore, React, Tooltip, useEffect, useState, useStateFromStores } from "@webpack/common";
 import { User } from "discord-types/general";
 
 import ActivityTooltip from "./components/ActivityTooltip";
@@ -44,7 +44,7 @@ import {
 
 const cl = classNameFactory("vc-bactivities-");
 
-const ActivityView = findComponentByCodeLazy<ActivityViewProps>(",onOpenGameProfileModal:");
+export const ActivityView = findComponentByCodeLazy<ActivityViewProps>(",onOpenGameProfileModal:");
 
 // if discord one day decides to change their icon this needs to be updated
 const DefaultActivityIcon = findComponentByCodeLazy("M6,7 L2,7 L2,6 L6,6 L6,7 Z M8,5 L2,5 L2,4 L8,4 L8,5 Z M8,3 L2,3 L2,2 L8,2 L8,3 Z M8.88888889,0 L1.11111111,0 C0.494444444,0 0,0.494444444 0,1.11111111 L0,8.88888889 C0,9.50253861 0.497461389,10 1.11111111,10 L8.88888889,10 C9.50253861,10 10,9.50253861 10,8.88888889 L10,1.11111111 C10,0.494444444 9.5,0 8.88888889,0 Z");
@@ -135,7 +135,7 @@ export default definePlugin({
     },
 
     showAllActivitiesComponent({ activity, user, ...props }: ActivityViewProps) {
-        const [currentActivity, setCurrentActivity] = React.useState<Activity | null>(
+        const [currentActivity, setCurrentActivity] = useState<Activity | null>(
             activity?.type !== 4 ? activity! : null
         );
 
@@ -143,7 +143,7 @@ export default definePlugin({
             [PresenceStore], () => PresenceStore.getActivities(user.id).filter((activity: Activity) => activity.type !== 4)
         ) ?? [];
 
-        React.useEffect(() => {
+        useEffect(() => {
             if (!activities.length) {
                 setCurrentActivity(null);
                 return;
@@ -186,7 +186,7 @@ export default definePlugin({
                             >
                                 <Caret
                                     disabled={activities.indexOf(currentActivity!) < 1}
-                                    direction="left"/>
+                                    direction="left" />
                             </span>;
                         }}</Tooltip>
 
@@ -195,7 +195,7 @@ export default definePlugin({
                                 <div
                                     key={"dot--" + index}
                                     onClick={() => setCurrentActivity(activity)}
-                                    className={`dot ${currentActivity === activity ? "selected" : ""}`}/>
+                                    className={`dot ${currentActivity === activity ? "selected" : ""}`} />
                             ))}
                         </div>
 
@@ -214,7 +214,7 @@ export default definePlugin({
                             >
                                 <Caret
                                     disabled={activities.indexOf(currentActivity!) >= activities.length - 1}
-                                    direction="right"/>
+                                    direction="right" />
                             </span>;
                         }}</Tooltip>
                     </div>

src/plugins/betterActivities/settings.tsx

@@ -48,7 +48,7 @@ const settings = definePluginSettings({
                 borderTop: "thin solid var(--background-modifier-accent)",
                 paddingTop: 5,
                 paddingBottom: 5
-            }}/>
+            }} />
         ),
     },
     profiles: {

src/plugins/betterActivities/styles.css

@@ -19,44 +19,8 @@
     border-radius: 50%;
 }
 
-.vc-bactivities-activity {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-
-.vc-bactivities-activity-title {
-    font-weight: bold;
-    text-align: center;
-}
-
-.vc-bactivities-activity-image {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.vc-bactivities-activity-divider {
-    width: 100%;
-    border-top: 1px dotted rgb(255 255 255 / 20%);
-    margin-top: 3px;
-    margin-bottom: 3px;
-}
-
-.vc-bactivities-activity-details {
-    display: flex;
-    flex-direction: column;
-    color: var(--text-muted);
-    word-break: break-word;
-}
-
-.vc-bactivities-activity-time-bar {
-    width: 100%;
-    margin-top: 3px;
-    margin-bottom: 3px;
+.vc-bactivities-activity-tooltip {
+    padding: 1px;
 }
 
 .vc-bactivities-caret-left,

src/plugins/betterActivities/types.ts

@@ -85,4 +85,6 @@ export interface IconCSSProperties extends CSSProperties {
 export interface ActivityViewProps {
     activity: Activity | null;
     user: User;
+    application?: Application;
+    type: string;
 }