ShowConnections: Add verified & copy/link icons in tooltip (#1092)

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 <https://www.gnu.org/licenses/>.
+*/
+
+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<BaseIconProps>) {
+    return (
+        <svg
+            className={classes(className, "vc-icon")}
+            aria-hidden="true"
+            role="img"
+            width={width}
+            height={height}
+            viewBox={viewBox}
+        >
+            {children}
+        </svg>
+    );
+}
+
+/**
+ * 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 (
+        <Icon
+            height={height}
+            width={width}
+            className={classes(className, "vc-link-icon")}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" fill-rule="evenodd">
+                <path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z" />
+                <rect width={width} height={height} />
+            </g>
+        </Icon>
+    );
+}
+
+/**
+ * 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 (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-copy-icon")}
+            viewBox="0 0 24 24"
+        >
+            <g fill="currentColor">
+                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
+                <path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
+            </g>
+        </Icon>
+    );
+}

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 <https://www.gnu.org/licenses/>.
+*/
+
+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 (
+        <VerifiedIconComponent
+            color={color}
+            forcedIconColor={forcedIconColor}
+            size={16}
+            tooltipText={i18n.Messages.CONNECTION_VERIFIED}
+        />
+    );
+}

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
             </Text>
-            {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
+            <Flex style={{
+                marginTop: "8px",
+                gap: getSpacingPx(settings.store.iconSpacing),
+                flexWrap: "wrap"
+            }}>
+                {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
+            </Flex>
         </Section>
     );
 }
@@ -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 (
         <Tooltip
-            text={`${connection.name}${!connection.verified ? " (unverified)" : ""}`}
+            text={
+                <span className="vc-sc-tooltip">
+                    {connection.name}
+                    {connection.verified && <VerifiedIcon />}
+                    <TooltipIcon height={16} width={16} />
+                </span>
+            }
             key={connection.id}
         >
             {tooltipProps =>

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;
+}

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<t.Timestamp>("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format"));
 export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
@@ -50,6 +53,6 @@ export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"
 export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
 
 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;
 });

src/webpack/common/types/components.d.ts

@@ -375,3 +375,15 @@ export type Popout = ComponentType<{
 };
 
 export type Dialog = ComponentType<PropsWithChildren<any>>;
+
+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<Resolve>;