diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx new file mode 100644 index 00000000..c3905d9a --- /dev/null +++ b/src/components/Icons.tsx @@ -0,0 +1,83 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +import { classes } from "@utils/misc"; +import type { PropsWithChildren } from "react"; + +interface BaseIconProps extends IconProps { + viewBox: string; +} + +interface IconProps { + className?: string; + height?: number; + width?: number; +} + +function Icon({ height = 24, width = 24, className, children, viewBox }: PropsWithChildren) { + return ( + + ); +} + +/** + * Discord's link icon, as seen in the Message context menu "Copy Message Link" option + */ +export function LinkIcon({ height = 24, width = 24, className }: IconProps) { + return ( + + + + + + + ); +} + +/** + * Discord's copy icon, as seen in the user popout right of the username when clicking + * your own username in the bottom left user panel + */ +export function CopyIcon(props: IconProps) { + return ( + + + + + + + ); +} diff --git a/src/plugins/showConnections/VerifiedIcon.tsx b/src/plugins/showConnections/VerifiedIcon.tsx new file mode 100644 index 00000000..79e27c45 --- /dev/null +++ b/src/plugins/showConnections/VerifiedIcon.tsx @@ -0,0 +1,38 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +import { LazyComponent } from "@utils/react"; +import { findByCode, findLazy } from "@webpack"; +import { i18n, useToken } from "@webpack/common"; + +const ColorMap = findLazy(m => m.colors?.INTERACTIVE_MUTED?.css); +const VerifiedIconComponent = LazyComponent(() => findByCode(".CONNECTIONS_ROLE_OFFICIAL_ICON_TOOLTIP")); + +export function VerifiedIcon() { + const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex(); + const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex(); + + return ( + + ); +} diff --git a/src/plugins/showConnections/index.tsx b/src/plugins/showConnections/index.tsx index e2afc5b9..50fcfe10 100644 --- a/src/plugins/showConnections/index.tsx +++ b/src/plugins/showConnections/index.tsx @@ -20,6 +20,8 @@ import "./styles.css"; import { definePluginSettings } from "@api/Settings"; import ErrorBoundary from "@components/ErrorBoundary"; +import { Flex } from "@components/Flex"; +import { CopyIcon, LinkIcon } from "@components/Icons"; import { Devs } from "@utils/constants"; import { copyWithToast } from "@utils/misc"; import { LazyComponent } from "@utils/react"; @@ -28,6 +30,8 @@ import { findByCode, findByCodeLazy, findByPropsLazy, findStoreLazy } from "@web import { Text, Tooltip } from "@webpack/common"; import { User } from "discord-types/general"; +import { VerifiedIcon } from "./VerifiedIcon"; + const Section = LazyComponent(() => findByCode("().lastSection")); const UserProfileStore = findStoreLazy("UserProfileStore"); const ThemeStore = findStoreLazy("ThemeStore"); @@ -97,7 +101,13 @@ function ConnectionsComponent({ id, theme }: { id: string, theme: string; }) { > Connections - {connections.map(connection => )} + + {connections.map(connection => )} + ); } @@ -111,17 +121,23 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect aria-label={connection.name} src={theme === "light" ? platform.icon.lightSVG : platform.icon.darkSVG} style={{ - marginTop: getSpacingPx(settings.store.iconSpacing), - marginRight: getSpacingPx(settings.store.iconSpacing), width: settings.store.iconSize, height: settings.store.iconSize }} /> ); + const TooltipIcon = url ? LinkIcon : CopyIcon; + return ( + {connection.name} + {connection.verified && } + + + } key={connection.id} > {tooltipProps => diff --git a/src/plugins/showConnections/styles.css b/src/plugins/showConnections/styles.css index 71a835b9..383593c1 100644 --- a/src/plugins/showConnections/styles.css +++ b/src/plugins/showConnections/styles.css @@ -3,3 +3,9 @@ display: inline-block; cursor: pointer; } + +.vc-sc-tooltip { + display: inline-flex; + gap: 0.25em; + align-items: center; +} diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts index 97816bff..8f59ac0f 100644 --- a/src/webpack/common/components.ts +++ b/src/webpack/common/components.ts @@ -43,6 +43,9 @@ export let ButtonLooks: t.ButtonLooks; export let Popout: t.Popout; export let Dialog: t.Dialog; export let TabBar: any; +// token lagger real +/** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */ +export let useToken: t.useToken; export const Timestamp = waitForComponent("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format")); export const Flex = waitForComponent("Flex", ["Justify", "Align", "Wrap"]); @@ -50,6 +53,6 @@ export const Flex = waitForComponent("Flex", ["Justify", "Align", "Wrap" export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record; waitFor("FormItem", m => { - ({ Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m); + ({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m); Forms = m; }); diff --git a/src/webpack/common/types/components.d.ts b/src/webpack/common/types/components.d.ts index 835de799..0b911f1e 100644 --- a/src/webpack/common/types/components.d.ts +++ b/src/webpack/common/types/components.d.ts @@ -375,3 +375,15 @@ export type Popout = ComponentType<{ }; export type Dialog = ComponentType>; + +type Resolve = (data: { theme: "light" | "dark", saturation: number; }) => { + hex(): string; + hsl(): string; + int(): number; + spring(): string; +}; + +export type useToken = (color: { + css: string; + resolve: Resolve; +}) => ReturnType;