From b225f2ec6cbb29f565bc3379254cd846cb259e2e Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Mon, 8 Sep 2025 02:51:04 +0200
Subject: [PATCH] SpotifyControls: add copy song/artist/album name options

---
 .../spotifyControls/PlayerComponent.tsx       | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 32c78c36..dabd31dc 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -21,7 +21,7 @@ import "./spotifyStyles.css";
 import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
-import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
+import { CopyIcon, ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
 import { debounce } from "@shared/debounce";
 import { openImageModal } from "@utils/discord";
 import { classes, copyWithToast } from "@utils/misc";
@@ -76,27 +76,28 @@ function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
     );
 }
 
-function CopyContextMenu({ name, path }: { name: string; path: string; }) {
-    const copyId = `spotify-copy-${name}`;
-    const openId = `spotify-open-${name}`;
-
+function CopyContextMenu({ name, type, path }: { type: string; name: string; path: string; }) {
     return (
         <Menu.Menu
-            navId={`spotify-${name}-menu`}
-            onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
-            aria-label={`Spotify ${name} Menu`}
+            navId="vc-spotify-menu"
+            onClose={ContextMenuApi.closeContextMenu}
+            aria-label={`Spotify ${type} Menu`}
         >
             <Menu.MenuItem
-                key={copyId}
-                id={copyId}
-                label={`Copy ${name} Link`}
+                id="vc-spotify-copy-name"
+                label={`Copy ${type} Name`}
+                action={() => copyWithToast(name)}
+                icon={CopyIcon}
+            />
+            <Menu.MenuItem
+                id="vc-spotify-copy-link"
+                label={`Copy ${type} Link`}
                 action={() => copyWithToast("https://open.spotify.com" + path)}
                 icon={LinkIcon}
             />
             <Menu.MenuItem
-                key={openId}
-                id={openId}
-                label={`Open ${name} in Spotify`}
+                id="vc-spotify-open"
+                label={`Open ${type} in Spotify`}
                 action={() => SpotifyStore.openExternal(path)}
                 icon={OpenExternalIcon}
             />
@@ -104,11 +105,6 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
     );
 }
 
-function makeContextMenu(name: string, path: string) {
-    return (e: React.MouseEvent<HTMLElement, MouseEvent>) =>
-        ContextMenuApi.openContextMenu(e, () => <CopyContextMenu name={name} path={path} />);
-}
-
 function Controls() {
     const [isPlaying, shuffle, repeat] = useStateFromStores(
         [SpotifyStore],
@@ -259,13 +255,14 @@ function AlbumContextMenu({ track }: { track: Track; }) {
     );
 }
 
-function makeLinkProps(name: string, condition: unknown, path: string) {
+function makeLinkProps(type: "Song" | "Artist" | "Album", condition: unknown, name: string, path: string) {
     if (!condition) return {};
 
     return {
         role: "link",
         onClick: () => SpotifyStore.openExternal(path),
-        onContextMenu: makeContextMenu(name, path)
+        onContextMenu: e =>
+            ContextMenuApi.openContextMenu(e, () => <CopyContextMenu type={type} name={name} path={path} />)
     } satisfies React.HTMLAttributes<HTMLElement>;
 }
 
@@ -306,7 +303,7 @@ function Info({ track }: { track: Track; }) {
                     id={cl("song-title")}
                     className={cl("ellipoverflow")}
                     title={track.name}
-                    {...makeLinkProps("Song", track.id, `/track/${track.id}`)}
+                    {...makeLinkProps("Song", track.id, track.name, `/track/${track.id}`)}
                 >
                     {track.name}
                 </Forms.FormText>
@@ -319,7 +316,7 @@ function Info({ track }: { track: Track; }) {
                                     className={cl("artist")}
                                     style={{ fontSize: "inherit" }}
                                     title={a.name}
-                                    {...makeLinkProps("Artist", a.id, `/artist/${a.id}`)}
+                                    {...makeLinkProps("Artist", a.id, a.name, `/artist/${a.id}`)}
                                 >
                                     {a.name}
                                 </span>
@@ -336,7 +333,7 @@ function Info({ track }: { track: Track; }) {
                             className={cl("album")}
                             style={{ fontSize: "inherit" }}
                             title={track.album.name}
-                            {...makeLinkProps("Album", track.album.id, `/album/${track.album.id}`)}
+                            {...makeLinkProps("Album", track.album.id, track.album.name, `/album/${track.album.id}`)}
                         >
                             {track.album.name}
                         </span>