SpotifyControls: Add context menu icons

3 files changed, 41 insertions, 0 deletions

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index c3905d9..d1cc7a6 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./iconStyles.css";
+
 import { classes } from "@utils/misc";
 import type { PropsWithChildren } from "react";
 
@@ -81,3 +83,34 @@ export function CopyIcon(props: IconProps) {
         </Icon>
     );
 }
+
+/**
+ * Discord's open external icon, as seen in the user profile connections
+ */
+export function OpenExternalIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-open-external-icon")}
+            viewBox="0 0 24 24"
+        >
+            <polygon
+                fill="currentColor"
+                fill-rule="nonzero"
+                points="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"
+            />
+        </Icon>
+    );
+}
+
+export function ImageIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-image-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path fill="currentColor" d="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z" />
+        </Icon>
+    );
+}
diff --git a/src/components/iconStyles.css b/src/components/iconStyles.css
new file mode 100644
index 0000000..9f2ef8e
--- /dev/null
+++ b/src/components/iconStyles.css
@@ -0,0 +1,3 @@
+.vc-open-external-icon {
+    transform: rotate(45deg);
+}
diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 7076085..f4c7c81 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -20,6 +20,7 @@ import "./spotifyStyles.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
+import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
 import { Link } from "@components/Link";
 import { debounce } from "@utils/debounce";
 import { classes, copyWithToast } from "@utils/misc";
@@ -88,12 +89,14 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
                 id={copyId}
                 label={`Copy ${name} Link`}
                 action={() => copyWithToast("https://open.spotify.com" + path)}
+                icon={LinkIcon}
             />
             <Menu.MenuItem
                 key={openId}
                 id={openId}
                 label={`Open ${name} in Spotify`}
                 action={() => SpotifyStore.openExternal(path)}
+                icon={OpenExternalIcon}
             />
         </Menu.Menu>
     );
@@ -221,6 +224,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 id="open-album"
                 label="Open Album"
                 action={() => SpotifyStore.openExternal(`/album/${track.album.id}`)}
+                icon={OpenExternalIcon}
             />
             <Menu.MenuItem
                 key="view-cover"
@@ -228,6 +232,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 label="View Album Cover"
                 // trolley
                 action={() => (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)}
+                icon={ImageIcon}
             />
             <Menu.MenuControlItem
                 id="spotify-volume"