feat add RichMagnetLinks (#504)

* feat add RichMagnetLinks

* Update magnet link handling in richMagnetLinks

---------

Co-authored-by: thororen <78185467+thororen1234@users.noreply.github.com>

src/equicordplugins/richMagnetLinks/index.tsx

@@ -0,0 +1,59 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { EquicordDevs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    authors: [EquicordDevs.cassie, EquicordDevs.mochienya],
+    name: "RichMagnetLinks",
+    description: "Renders magnet links like message links",
+    patches: [
+        {
+            find: "AUTO_MODERATION_SYSTEM_MESSAGE_RULES:",
+            replacement: {
+                match: /mention:\{order:(\i\.\i\.order)/,
+                replace: "magnet:$self.magnetLink($1),$&"
+            }
+        },
+        {
+            find: '"flattenMarkdown"',
+            replacement: {
+                match: /mention:{type:/,
+                replace: "magnet:{type:\"inlineObject\"},$&",
+            }
+        },
+    ],
+    magnetLink: (order: number) => ({
+        order,
+        requiredFirstCharacters: ["magnet:?"],
+        match(content: string) {
+            return /magnet:\?\S+/.exec(content);
+        },
+        parse(matchedContent: RegExpExecArray, _, parseProps: Record<string, any>) {
+            // Don't run when typing/editing message
+            if (!parseProps.messageId || parseProps.isInsideOfLink) return {
+                type: "text",
+                content: matchedContent[0]
+            };
+
+            const magnetLink = matchedContent[0];
+            const filename = (new URL(magnetLink)).searchParams.get("dn") ?? "unknown filename";
+            return { type: "magnet", filename, magnetLink };
+        },
+        react({ magnetLink, filename }) {
+            return <a href={magnetLink} className="vc-magnet-link interactive">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M15 12h-4v3h4zM5 12H1v3h4zM0 8a8 8 0 1 1 16 0v8h-6V8a2 2 0 1 0-4 0v8H0z"></path>
+                </svg>
+                {filename}
+            </a>;
+        }
+    })
+});
+

src/equicordplugins/richMagnetLinks/styles.css

@@ -0,0 +1,23 @@
+/* `a.` is needed for specificity */
+a.vc-magnet-link {
+    background: var(--mention-background);
+    border-radius: 3px;
+    color: var(--mention-foreground);
+    font-weight: var(--font-weight-medium);
+    padding: 0 2px;
+    unicode-bidi: plaintext;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: max-content;
+    
+    &:hover { text-decoration: none }
+}
+
+a.vc-magnet-link svg {
+    height: 1em;
+    vertical-align: middle;
+    width: 1em;
+    margin: 0 var(--space-4);
+    scale: 0.9;
+}

src/utils/constants.ts

@@ -1022,6 +1022,10 @@ export const EquicordDevs = Object.freeze({
         name: "OIRNOIR",
         id: 720842469024989195n
     },
+    cassie: {
+        name: "cassie",
+        id: 280411966126948353n,
+    },
     mochienya: {
         name: "mochie",
         id: 1043599230247374869n,