From 8602141fea22b788d91b64120e548b6af7026aac Mon Sep 17 00:00:00 2001
From: D3SOX <nico@d3sox.me>
Date: Sat, 11 May 2024 00:02:46 +0200
Subject: [PATCH] feat(betterActivities): setting to not show special ones
 first

and reorganize/group the settings
---
 src/plugins/betterActivities/index.tsx | 79 +++++++++++++++++---------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/plugins/betterActivities/index.tsx b/src/plugins/betterActivities/index.tsx
index 1bba5426f..2cf06a44a 100644
--- a/src/plugins/betterActivities/index.tsx
+++ b/src/plugins/betterActivities/index.tsx
@@ -39,6 +39,38 @@ const settings = definePluginSettings({
         default: true,
         restartNeeded: true,
     },
+    iconSize: {
+        type: OptionType.SLIDER,
+        description: "Size of the activity icons",
+        markers: [10, 15, 20],
+        default: 15,
+        stickToMarkers: false,
+    },
+    specialFirst: {
+        type: OptionType.BOOLEAN,
+        description: "Show special activities first (Currently Spotify and Twitch)",
+        default: true,
+        restartNeeded: false,
+    },
+    renderGifs: {
+        type: OptionType.BOOLEAN,
+        description: "Allow rendering GIFs",
+        default: true,
+        restartNeeded: false,
+    },
+    divider: {
+        type: OptionType.COMPONENT,
+        description: "",
+        component: () => (
+            <div style={{
+                width: "100%",
+                height: 1,
+                borderTop: "thin solid var(--background-modifier-accent)",
+                paddingTop: 5,
+                paddingBottom: 5
+            }}/>
+        ),
+    },
     profileSidebar: {
         type: OptionType.BOOLEAN,
         description: "Show all activities in the profile sidebar",
@@ -51,19 +83,6 @@ const settings = definePluginSettings({
         default: true,
         restartNeeded: true,
     },
-    iconSize: {
-        type: OptionType.SLIDER,
-        description: "Size of the activity icons",
-        markers: [10, 15, 20],
-        default: 15,
-        stickToMarkers: false,
-    },
-    renderGifs: {
-        type: OptionType.BOOLEAN,
-        description: "Allow rendering GIFs",
-        default: true,
-        restartNeeded: false,
-    },
     allActivitiesStyle: {
         type: OptionType.SELECT,
         description: "Style for showing all activities",
@@ -292,21 +311,6 @@ export default definePlugin({
     patchActivityList: ({ activities, user }: { activities: Activity[], user: User; }): JSX.Element | null => {
         const icons: ActivityListIcon[] = [];
 
-        const spotifyActivity = activities.find(({ name }) => name === "Spotify");
-        if (spotifyActivity) {
-            icons.push({
-                iconElement: <SpotifyIcon />,
-                tooltip: <ActivityTooltip activity={spotifyActivity} user={user} />
-            });
-        }
-        const twitchActivity = activities.find(({ name }) => name === "Twitch");
-        if (twitchActivity) {
-            icons.push({
-                iconElement: <TwitchIcon />,
-                tooltip: <ActivityTooltip activity={twitchActivity} user={user} />
-            });
-        }
-
         const applicationIcons = getApplicationIcons(activities);
         if (applicationIcons.length) {
             const compareImageSource = (a: ApplicationIcon, b: ApplicationIcon) => {
@@ -323,6 +327,25 @@ export default definePlugin({
             }
         }
 
+        const addActivityIcon = (activityName: string, IconComponent: React.ComponentType) => {
+            const activityIndex = activities.findIndex(({ name }) => name === activityName);
+            if (activityIndex !== -1) {
+                const activity = activities[activityIndex];
+                const iconObject = {
+                    iconElement: <IconComponent />,
+                    tooltip: <ActivityTooltip activity={activity} user={user} />
+                };
+
+                if (settings.store.specialFirst) {
+                    icons.unshift(iconObject);
+                } else {
+                    icons.splice(activityIndex, 0, iconObject);
+                }
+            }
+        };
+        addActivityIcon("Twitch", TwitchIcon);
+        addActivityIcon("Spotify", SpotifyIcon);
+
         if (icons.length) {
             const iconStyle: IconCSSProperties = {
                 "--icon-size": `${settings.store.iconSize}px`,