From 078914a40fd5a5956a0badfc49efa35ce88812a5 Mon Sep 17 00:00:00 2001 From: thororen1234 <78185467+thororen1234@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:09:28 -0500 Subject: [PATCH] GlobalBadges & UserPFP: Update Modals & Settings --- .../tabs/plugins/ContributorModal.tsx | 2 - .../globalBadges/badgeComponent.tsx | 28 +++-- .../globalBadges/badgeModal.tsx | 101 ++++++++++-------- src/equicordplugins/globalBadges/index.tsx | 15 ++- src/equicordplugins/globalBadges/settings.ts | 14 ++- src/equicordplugins/globalBadges/styles.css | 26 ++--- src/equicordplugins/globalBadges/utils.ts | 14 +-- src/equicordplugins/userpfp/index.tsx | 39 ++++--- src/equicordplugins/userpfp/styles.css | 4 + 9 files changed, 148 insertions(+), 95 deletions(-) create mode 100644 src/equicordplugins/userpfp/styles.css diff --git a/src/components/settings/tabs/plugins/ContributorModal.tsx b/src/components/settings/tabs/plugins/ContributorModal.tsx index 8022e38b1..8bdfbbd13 100644 --- a/src/components/settings/tabs/plugins/ContributorModal.tsx +++ b/src/components/settings/tabs/plugins/ContributorModal.tsx @@ -26,8 +26,6 @@ import { PluginCard } from "./PluginCard"; const cl = classNameFactory("vc-author-modal-"); -type PluginFilter = "all" | "equicord" | "vencord" | "modified" | "user"; - export function openContributorModal(user: User) { openModal(modalProps => diff --git a/src/equicordplugins/globalBadges/badgeComponent.tsx b/src/equicordplugins/globalBadges/badgeComponent.tsx index fa455e5b2..69524521a 100644 --- a/src/equicordplugins/globalBadges/badgeComponent.tsx +++ b/src/equicordplugins/globalBadges/badgeComponent.tsx @@ -7,12 +7,17 @@ import { React, Tooltip, UserStore } from "@webpack/common"; import { JSX } from "react"; -import { BadgeModalComponent, openBadgeModal } from "./badgeModal"; +import { openBadgeModal } from "./badgeModal"; import { settings } from "./settings"; import { BadgeCache } from "./types"; -import { cl, fetchBadges, serviceMap } from "./utils"; +import { cl, fetchBadges } from "./utils"; -export let badgeImages; +interface BadgeModalItem { + name: string; + rawName: string; +} + +export let badgeData; export const BadgeComponent = ({ name, img }: { name: string, img: string; }) => { return ( @@ -38,7 +43,7 @@ export const GlobalBadges = ({ userId }: { userId: string; }) => { if (!badges) return null; const globalBadges: JSX.Element[] = []; - const badgeModal: JSX.Element[] = []; + const badgeModal: BadgeModalItem[] = []; Object.keys(badges).forEach(mod => { if (!badges[mod] || !Array.isArray(badges[mod]) || badges[mod].length === 0) return; @@ -46,20 +51,23 @@ export const GlobalBadges = ({ userId }: { userId: string; }) => { badges[mod].forEach(badge => { if (!badge || !badge.tooltip || !badge.badge) return; - const modDisplay = serviceMap[mod.toLowerCase()] || mod; - const prefix = settings.store.showPrefix ? `(${modDisplay})` : ""; - const suffix = settings.store.showSuffix ? `(${modDisplay})` : ""; + const prefix = settings.store.showPrefix ? `(${mod})` : ""; + const suffix = settings.store.showSuffix ? `(${mod})` : ""; const displayName = `${prefix} ${badge.tooltip} ${suffix}`; - if (mod.toLowerCase() === "badgevault") { + if (mod === "BadgeVault") { badge.custom = true; } globalBadges.push(); - badgeModal.push(); + badgeModal.push({ + name: displayName, + rawName: badge.tooltip, + ...badge + }); }); }); - badgeImages = badgeModal; + badgeData = badgeModal; return (
{ return ( - - {(tooltipProps: any) => ( - - )} - + <> + + {(tooltipProps: any) => ( + + )} + + ); }; -export function BadgeModal({ user }: { user: User; }) { - return ( - <> -
- - {badgeImages.length ? ( - - {user.username} has {badgeImages.length} global badges - - ) : ( - - {user.username} has no global badges - - )} -
- {!!badgeImages.length && ( -
- {badgeImages} -
- )} - - ); -} - export function openBadgeModal(user: User) { - openModal(modalprops => + const badgeDataElements = badgeData.map(badge => ( + + )); + + openModal(modalprops => ( - - + + + + {user.username} + + + + {badgeDataElements.length ? ( + <> + + {badgeDataElements.length} global badge + {badgeDataElements.length > 1 ? "s" : ""}. + +
+ {badgeDataElements} +
+ + ) : ( + + No global badges. + + )} + + + - ); + )); } diff --git a/src/equicordplugins/globalBadges/index.tsx b/src/equicordplugins/globalBadges/index.tsx index 2e7d7796d..b9266efd8 100644 --- a/src/equicordplugins/globalBadges/index.tsx +++ b/src/equicordplugins/globalBadges/index.tsx @@ -7,13 +7,15 @@ import "./styles.css"; import { addProfileBadge, BadgePosition, ProfileBadge, removeProfileBadge } from "@api/Badges"; +import { Button } from "@components/Button"; import { Devs, EquicordDevs } from "@utils/constants"; +import { openInviteModal } from "@utils/discord"; import definePlugin from "@utils/types"; import { React } from "@webpack/common"; import { GlobalBadges } from "./badgeComponent"; import { settings } from "./settings"; -import { fetchBadges } from "./utils"; +import { cl, fetchBadges, INVITE_LINK } from "./utils"; const Badge: ProfileBadge = { component: b => , @@ -27,6 +29,17 @@ export default definePlugin({ description: "Adds global badges from other client mods", authors: [Devs.HypedDomi, EquicordDevs.Wolfie], settings, + settingsAboutComponent: () => ( + <> + + + ), start: () => addProfileBadge(Badge), stop: () => removeProfileBadge(Badge), }); diff --git a/src/equicordplugins/globalBadges/settings.ts b/src/equicordplugins/globalBadges/settings.ts index b9285b424..4bfe8e1a0 100644 --- a/src/equicordplugins/globalBadges/settings.ts +++ b/src/equicordplugins/globalBadges/settings.ts @@ -12,13 +12,23 @@ export const settings = definePluginSettings({ type: OptionType.BOOLEAN, description: "Shows the Mod as Prefix", default: true, - restartNeeded: false + restartNeeded: false, + onChange: (e => { + if (e && settings.store.showSuffix) { + settings.store.showSuffix = false; + } + }) }, showSuffix: { type: OptionType.BOOLEAN, description: "Shows the Mod as Suffix", default: false, - restartNeeded: false + restartNeeded: false, + onChange: (e => { + if (e && settings.store.showPrefix) { + settings.store.showPrefix = false; + } + }) }, showCustom: { type: OptionType.BOOLEAN, diff --git a/src/equicordplugins/globalBadges/styles.css b/src/equicordplugins/globalBadges/styles.css index f08323166..4a90e6782 100644 --- a/src/equicordplugins/globalBadges/styles.css +++ b/src/equicordplugins/globalBadges/styles.css @@ -4,13 +4,7 @@ flex-wrap: nowrap; } -.vc-global-badges-header { - display: flex; - align-items: center; - margin-bottom: 1em; -} - -.vc-global-badges-name { +.vc-global-badges-modal-name { text-transform: none; flex-grow: 0; background: var(--background-base-lowest); @@ -22,7 +16,7 @@ text-wrap: nowrap; } -.vc-global-badges-name::before { +.vc-global-badges-modal-name::before { content: ""; display: block; position: absolute; @@ -36,19 +30,27 @@ border-bottom-left-radius: 9999px; } -.vc-global-badges-avatar { +.vc-global-badges-modal-avatar { height: 48px; width: 48px; border-radius: 50%; } -.vc-global-badges-description { +.vc-global-badges-modal-description { font-size: 16px; - margin-left: 6px; } -.vc-global-badges-modal-badges { +.vc-global-badges-modal-text { + margin-left: 8px; +} + +.vc-global-badges-modal-badge { width: 50px; height: 50px; margin: 2px; +} + +.vc-global-badges-settings-button { + width: 100%; + height: 50px; } \ No newline at end of file diff --git a/src/equicordplugins/globalBadges/utils.ts b/src/equicordplugins/globalBadges/utils.ts index d75d28556..f28ae835f 100644 --- a/src/equicordplugins/globalBadges/utils.ts +++ b/src/equicordplugins/globalBadges/utils.ts @@ -13,17 +13,7 @@ const cache = new Map(); const EXPIRES = 1000 * 60 * 15; export const cl = classNameFactory("vc-global-badges-"); -export const serviceMap = { - "nekocord": "Nekocord", - "reviewdb": "ReviewDB", - "aero": "Aero", - "aliucord": "Aliucord", - "ra1ncord": "Ra1ncord", - "velocity": "Velocity", - "enmity": "Enmity", - "replugged": "Replugged", - "badgevault": "BadgeVault" -}; +export const INVITE_LINK = "https://discord.gg/kwHCJPxp8t"; export const fetchBadges = (id: string): BadgeCache["badges"] | undefined => { const cachedValue = cache.get(id); @@ -44,7 +34,7 @@ export const fetchBadges = (id: string): BadgeCache["badges"] | undefined => { return {}; } - fetch(`${settings.store.apiUrl}${id}?seperated=true&services=${services.join(",")}`) + fetch(`${settings.store.apiUrl}${id}?seperated=true&capitalize=true&services=${services.join(",")}`) .then(res => res.json() as Promise<{ status: number; badges: BadgeCache["badges"]; }>) .then(body => { cache.set(id, { badges: body.badges, expires: Date.now() + EXPIRES }); diff --git a/src/equicordplugins/userpfp/index.tsx b/src/equicordplugins/userpfp/index.tsx index 740bfd4d3..ae3d6ed8c 100644 --- a/src/equicordplugins/userpfp/index.tsx +++ b/src/equicordplugins/userpfp/index.tsx @@ -4,12 +4,20 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import "./styles.css"; + import { definePluginSettings } from "@api/Settings"; -import { Link } from "@components/Link"; +import { classNameFactory } from "@api/Styles"; +import { Button } from "@components/Button"; import { Devs, EquicordDevs } from "@utils/constants"; +import { openInviteModal } from "@utils/discord"; import definePlugin, { OptionType } from "@utils/types"; import { User } from "@vencord/discord-types"; +const cl = classNameFactory("vc-userpfp-"); +const DONO_URL = "https://ko-fi.com/coolesding"; +const INVITE_LINK = "https://discord.gg/userpfp-1129784704267210844"; + let data = { avatars: {} as Record }; const settings = definePluginSettings({ preferNitro: { @@ -20,32 +28,39 @@ const settings = definePluginSettings({ { label: "Nitro", value: true, default: true }, ], }, - dbSource: { + databaseSource: { description: "URL to load database from", type: OptionType.STRING, default: "https://userpfp.github.io/UserPFP/source/data.json", onChange: (e => { - if (!e) return settings.store.dbSource = "https://userpfp.github.io/UserPFP/source/data.json"; + if (!e) return settings.store.databaseSource = "https://userpfp.github.io/UserPFP/source/data.json"; return e; }) } }); export default definePlugin({ - data, name: "UserPFP", description: "Allows you to use an animated avatar without Nitro", authors: [EquicordDevs.nexpid, Devs.thororen], settings, settingsAboutComponent: () => ( <> - - Submit your own PFP here! - +
- - Support UserPFP here! - + ), patches: [ @@ -72,9 +87,9 @@ export default definePlugin({ return res.toString(); }, async start() { - await fetch(settings.store.dbSource) + await fetch(settings.store.databaseSource) .then(async res => { - if (res.ok) this.data = data = await res.json(); + if (res.ok) data = await res.json(); }) .catch(() => null); } diff --git a/src/equicordplugins/userpfp/styles.css b/src/equicordplugins/userpfp/styles.css new file mode 100644 index 000000000..c0905b981 --- /dev/null +++ b/src/equicordplugins/userpfp/styles.css @@ -0,0 +1,4 @@ +.vc-userpfp-settings-button { + width: 100%; + height: 50px; +} \ No newline at end of file