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

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