Merge branch 'main' of https://github.com/Equicord/Equicord

src/plugins/serverListIndicators/index.tsx

@@ -19,7 +19,8 @@
 import "./styles.css";
 
 import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
-import { Settings } from "@api/Settings";
+import { definePluginSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs, EquicordDevs } from "@utils/constants";
 import { useForceUpdater } from "@utils/react";
@@ -42,6 +43,7 @@ function FriendsIndicator() {
 
     return (
         <div id="vc-friendcount">
+            {!settings.store.useCompact &&
                 <svg
                     id="vc-friendcount-icon"
                     xmlns="http://www.w3.org/2000/svg"
@@ -54,10 +56,13 @@ function FriendsIndicator() {
                     <path
                         fill="currentColor"
                         d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z">
-                </path></svg>
+                    </path>
-            <span id="vc-friendcount-text">
+                </svg>
-                {onlineFriends}
+            }
-            </span>
+            <span id="vc-friendcount-text">{onlineFriends}</span>
+            {!!settings.store.useCompact &&
+                <span id="vc-friendcount-text-compact">Friends</span>
+            }
         </div>
     );
 }
@@ -67,7 +72,7 @@ function ServersIndicator() {
 
     return (
         <div id="vc-guildcount">
-            <div id="vc-guildcount-dot">
+            {!settings.store.useCompact &&
                 <svg
                     id="vc-guildcount-icon"
                     aria-hidden="true"
@@ -80,11 +85,13 @@ function ServersIndicator() {
                     <path
                         fill="currentColor"
                         d="M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z">
-                    </path></svg>
+                    </path>
-            </div>
+                </svg>
-            <span id="vc-guildcount-text">
+            }
-                {guildCount}
+            <span id="vc-guildcount-text">{guildCount}</span>
-            </span>
+            {!!settings.store.useCompact &&
+                <span id="vc-guildcount-text-compact">Servers</span>
+            }
         </div>
     );
 }
@@ -107,41 +114,58 @@ function handleGuildUpdate() {
     forceUpdateGuildCount?.();
 }
 
-export default definePlugin({
+export const settings = definePluginSettings({
-    name: "ServerListIndicators",
-    description: "Add online friend count or server count in the server list",
-    authors: [Devs.dzshn, EquicordDevs.Panniku],
-    dependencies: ["ServerListAPI"],
-
-    options: {
     mode: {
-            description: "mode",
+        description: "Mode",
         type: OptionType.SELECT,
         options: [
             { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },
             { label: "Only server count", value: IndicatorType.SERVER },
             { label: "Both server and online friend counts", value: IndicatorType.BOTH },
-            ]
+        ],
-        }
+        restartNeeded: true // Restart needed just to force update
     },
+    useCompact: {
+        description: "Makes the indicator appear with only text",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: true // Restart needed just to force update
+    }
+});
+
+export default definePlugin({
+    name: "ServerListIndicators",
+    description: "Add online friend count or server count in the server list",
+    authors: [Devs.dzshn, EquicordDevs.Panniku],
+    dependencies: ["ServerListAPI"],
+    settings,
 
     renderIndicator: () => {
-        const { mode } = Settings.plugins.ServerListIndicators;
+        const { mode, useCompact } = settings.store;
         let text;
-        if (!!(mode & IndicatorType.FRIEND) && !!(mode & IndicatorType.SERVER)) {
+        // switch is simply better
+        switch (mode) {
+            case IndicatorType.BOTH:
                 text = `${onlineFriends} Friends, ${guildCount} Servers`;
-        } else if (!!(mode & IndicatorType.FRIEND)) {
+                break;
+            case IndicatorType.FRIEND:
                 text = `${onlineFriends} Friends`;
-        } else if (!!(mode & IndicatorType.SERVER)) {
+                break;
-            text = `${guildCount} Servers`;
+            case IndicatorType.SERVER:
+                text = `${onlineFriends} Friends, ${guildCount} Servers`;
+                break;
         }
 
+        let cl;
+        if (useCompact) cl = classNameFactory("vc-indicators-compact");
+        else cl = classNameFactory("vc-indicators");
+
         return <ErrorBoundary noop>
-            <div id="vc-indicators-container">
+            <div id={cl("-container")}>
                 <Tooltip text={text} position="right">
                     {({ onMouseEnter, onMouseLeave }) => (
                         <div
-                            id="vc-serverlist-indicators"
+                            id={cl("-indicator-items")}
                             onMouseEnter={onMouseEnter}
                             onMouseLeave={onMouseLeave}>
                             {!!(mode & IndicatorType.FRIEND) && <FriendsIndicator />}
@@ -159,7 +183,6 @@ export default definePlugin({
         GUILD_DELETE: handleGuildUpdate,
     },
 
-
     start() {
         addServerListElement(ServerListRenderPosition.Above, this.renderIndicator);
         handlePresenceUpdate();

src/plugins/serverListIndicators/styles.css

@@ -1,4 +1,5 @@
-#vc-indicators-container {
+#vc-indicators-container,
+#vc-indicators-compact-container {
     width: 100%;
     display: flex;
     align-items: center;
@@ -6,7 +7,7 @@
     margin-bottom: 8px;
 }
 
-#vc-serverlist-indicators {
+#vc-indicators-indicator-items {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -18,38 +19,23 @@
     transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
 }
 
-#vc-serverlist-indicators:hover {
+#vc-indicators-compact-indicator-items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+#vc-indicators-indicator-items:hover {
     border-radius: 34%;
     background-color: var(--brand-500);
 }
 
-#vc-serverlist-indicators::before {
-    content: "";
-    display: block;
-    position: absolute;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    width: 0px;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    height: 0px;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    left: 0px;
-    border-radius: 0 4px 4px 0;
-    background-color: var(--header-primary);
-    opacity: 0;
-    transition: width 0.15s ease-out, height 0.15s ease-out,
-        opacity 0.15s ease-out;
-}
-
-#vc-serverlist-indicators:hover::before {
-    width: 4px;
-    height: 20px;
-    opacity: 1;
-}
-
 #vc-friendcount,
 #vc-guildcount {
     display: flex;
     align-items: center;
+    justify-content: center;
     font-size: 12px;
     font-weight: 600;
     width: 100%;
@@ -58,17 +44,13 @@
 
 #vc-friendcount-icon,
 #vc-guildcount-icon {
-    padding-left: 8px;
     padding-right: 2px;
     width: 14px;
     height: 14px;
 }
 
-#vc-guildcount-icon {
+#vc-indicators-compact-container #vc-friendcount-text-compact,
-    padding-top: 2px;
+#vc-indicators-compact-container #vc-guildcount-text-compact {
-}
+    display: block;
-
+    padding-left: 4px;
-#vc-friendcount-text,
-#vc-guildcount-text {
-    width: auto;
 }