diff --git a/src/api/Badges.ts b/src/api/Badges.ts index b50016c5..061bdeb8 100644 --- a/src/api/Badges.ts +++ b/src/api/Badges.ts @@ -36,7 +36,7 @@ export interface ProfileBadge { image?: string; link?: string; /** Action to perform when you click the badge */ - onClick?(): void; + onClick?(event: React.MouseEvent, props: BadgeUserArgs): void; /** Should the user display this badge? */ shouldShow?(userInfo: BadgeUserArgs): boolean; /** Optional props (e.g. style) for the badge, ignored for component badges */ @@ -87,9 +87,7 @@ export function _getBadges(args: BadgeUserArgs) { export interface BadgeUserArgs { user: User; - profile: Profile; - premiumSince: Date; - premiumGuildSince?: Date; + guildId: string; } interface ConnectedAccount { diff --git a/src/components/PluginSettings/ContributorModal.tsx b/src/components/PluginSettings/ContributorModal.tsx index 82c23025..99a8da16 100644 --- a/src/components/PluginSettings/ContributorModal.tsx +++ b/src/components/PluginSettings/ContributorModal.tsx @@ -9,10 +9,12 @@ import "./contributorModal.css"; import { useSettings } from "@api/Settings"; import { classNameFactory } from "@api/Styles"; import ErrorBoundary from "@components/ErrorBoundary"; +import { Link } from "@components/Link"; import { DevsById } from "@utils/constants"; import { fetchUserProfile, getTheme, Theme } from "@utils/discord"; +import { pluralise } from "@utils/misc"; import { ModalContent, ModalRoot, openModal } from "@utils/modal"; -import { Forms, MaskedLink, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common"; +import { Forms, MaskedLink, showToast, Tooltip, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common"; import { User } from "discord-types/general"; import Plugins from "~plugins"; @@ -72,6 +74,8 @@ function ContributorModal({ user }: { user: User; }) { .sort((a, b) => Number(a.required ?? false) - Number(b.required ?? false)); }, [user.id, user.username]); + const ContributedHyperLink = contributed; + return ( <>
@@ -84,30 +88,48 @@ function ContributorModal({ user }: { user: User; }) {
{website && ( - - - + + {props => ( + + + + )} + )} {githubName && ( - - - + + {props => ( + + + + )} + )}
-
- {plugins.map(p => - showToast("Restart to apply changes!")} - /> - )} -
+ {plugins.length ? ( + + This person has {ContributedHyperLink} to {pluralise(plugins.length, "plugin")}! + + ) : ( + + This person has not made any plugins. They likely {ContributedHyperLink} to Vencord in other ways! + + )} + + {!!plugins.length && ( +
+ {plugins.map(p => + showToast("Restart to apply changes!")} + /> + )} +
+ )} ); } diff --git a/src/components/PluginSettings/contributorModal.css b/src/components/PluginSettings/contributorModal.css index 09f0103f..ad2f1330 100644 --- a/src/components/PluginSettings/contributorModal.css +++ b/src/components/PluginSettings/contributorModal.css @@ -25,11 +25,13 @@ display: block; position: absolute; height: 100%; - width: 16px; + width: 32px; background: var(--background-tertiary); z-index: -1; - left: -16px; + left: -32px; top: 0; + border-top-left-radius: 9999px; + border-bottom-left-radius: 9999px; } .vc-author-modal-avatar { @@ -55,4 +57,5 @@ .vc-author-modal-plugins { display: grid; gap: 0.5em; + margin-top: 0.75em; } diff --git a/src/plugins/_api/badges.tsx b/src/plugins/_api/badges.tsx index 6b1a79cd..6cbe1feb 100644 --- a/src/plugins/_api/badges.tsx +++ b/src/plugins/_api/badges.tsx @@ -34,14 +34,13 @@ const ContributorBadge: ProfileBadge = { description: "Vencord Contributor", image: CONTRIBUTOR_BADGE, position: BadgePosition.START, - props: { - style: { - borderRadius: "50%", - transform: "scale(0.9)" // The image is a bit too big compared to default badges - } - }, shouldShow: ({ user }) => isPluginDev(user.id), - link: "https://github.com/Vendicated/Vencord" + onClick(_, { user }) { + // circular import shenanigans + const { openContributorModal } = require("@components/PluginSettings/ContributorModal") as typeof import("@components/PluginSettings/ContributorModal"); + // setImmediate is needed to run on later tick to workaround limitation in proxyLazy + setImmediate(() => openContributorModal(user)); + } }; let DonorBadges = {} as Record>>; @@ -85,7 +84,7 @@ export default definePlugin({ // conditionally override their onClick with badge.onClick if it exists { match: /href:(\i)\.link/, - replace: "...($1.onClick && { onClick: $1.onClick }),$&" + replace: "...($1.onClick && { onClick: vcE => $1.onClick(vcE, arguments[0]) }),$&" } ] } diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx index 2b8ccf8a..32010e59 100644 --- a/src/utils/misc.tsx +++ b/src/utils/misc.tsx @@ -114,3 +114,7 @@ export function identity(value: T): T { export const isMobile = navigator.userAgent.includes("Mobi"); export const isPluginDev = (id: string) => Object.hasOwn(DevsById, id); + +export function pluralise(amount: number, singular: string, plural = singular + "s") { + return amount === 1 ? `${amount} ${singular}` : `${amount} ${plural}`; +}