From 4282cebecc8c2810586e31a086abf5966d6034fe Mon Sep 17 00:00:00 2001
From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com>
Date: Thu, 9 Nov 2023 11:12:14 -0500
Subject: [PATCH] Started dropdown menu

---
 package-lock.json                             | 271 ++++++++++++++++++
 package.json                                  |   1 +
 .../DropdownButton/DropdownButton.module.css  |  35 +++
 src/components/DropdownButton/index.tsx       |  59 +++-
 src/components/Launch/LaunchButton/index.tsx  |  17 +-
 5 files changed, 365 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1997644..97fa4f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.2.4",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.0.4",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "1.0.6",
@@ -1157,6 +1158,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -1217,6 +1247,153 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
@@ -8459,6 +8636,21 @@
         "@radix-ui/react-use-escape-keydown": "1.0.3"
       }
     },
+    "@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      }
+    },
     "@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -8487,6 +8679,85 @@
         "@radix-ui/react-use-layout-effect": "1.0.1"
       }
     },
+    "@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@radix-ui/react-dismissable-layer": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+          "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-escape-keydown": "1.0.3"
+          }
+        },
+        "@radix-ui/react-focus-scope": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+          "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+          "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "^2.0.0",
+            "@radix-ui/react-arrow": "1.0.3",
+            "@radix-ui/react-compose-refs": "1.0.1",
+            "@radix-ui/react-context": "1.0.1",
+            "@radix-ui/react-primitive": "1.0.3",
+            "@radix-ui/react-use-callback-ref": "1.0.1",
+            "@radix-ui/react-use-layout-effect": "1.0.1",
+            "@radix-ui/react-use-rect": "1.0.1",
+            "@radix-ui/react-use-size": "1.0.1",
+            "@radix-ui/rect": "1.0.1"
+          }
+        },
+        "@radix-ui/react-portal": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+          "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.3"
+          }
+        }
+      }
+    },
     "@radix-ui/react-popper": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
diff --git a/package.json b/package.json
index fb552ea..a0993db 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "1.0.6",
diff --git a/src/components/DropdownButton/DropdownButton.module.css b/src/components/DropdownButton/DropdownButton.module.css
index e2b83cb..a84fccd 100644
--- a/src/components/DropdownButton/DropdownButton.module.css
+++ b/src/components/DropdownButton/DropdownButton.module.css
@@ -32,4 +32,39 @@
     background: var(--sideBar_background);
     border: none;
     cursor: pointer;
+}
+
+.dropdown_content {
+    width: 300px;
+    background-color: white;
+    border-radius: 6px;
+    padding: 5px;
+    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+}
+
+.dropdown_item {
+    font-size: 16px;
+    line-height: 1;
+    color: var(--violet-11);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    padding: 0 5px;
+    position: relative;
+    padding-left: 25px;
+    user-select: none;
+    outline: none;
+}
+
+.dropdown_item[data-highlighted] {
+    background-color: var(--violet-9);
+    color: var(--violet-1);
+}
+
+.dropdown_arrow {
+    fill: white;
 }
\ No newline at end of file
diff --git a/src/components/DropdownButton/index.tsx b/src/components/DropdownButton/index.tsx
index dc4d7df..8e22a95 100644
--- a/src/components/DropdownButton/index.tsx
+++ b/src/components/DropdownButton/index.tsx
@@ -1,22 +1,53 @@
 import { DropdownIcon } from "@app/assets/Icons";
 import Button, { ButtonProps } from "../Button";
 import styles from "./DropdownButton.module.css";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
-interface Props extends ButtonProps {
-    buttonChildren: React.ReactNode
+interface DropdownProps extends ButtonProps {
+    dropdownChildren: React.ReactNode
 }
 
-const DropdownButton: React.FC<Props> = (props: Props) => {
-    const { children, style, className, ...buttonProps } = props;
-
-    return <div className={[styles.container, className].join(" ")} style={style}>
-        <Button {...buttonProps as ButtonProps} className={styles.button}>
-            {props.buttonChildren}
-        </Button>
-        <button className={styles.dropdown_button}>
-            <DropdownIcon width={12} height={12} />
-        </button>
-    </div>;
+const DropdownButton: React.FC<DropdownProps> = (props: DropdownProps) => {
+    const {
+        dropdownChildren,
+        style,
+        className,
+        children,
+        ...buttonProps
+    } = props;
+
+    return <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+            <div className={[styles.container, className].join(" ")} style={style}>
+                <Button {...buttonProps as ButtonProps} className={styles.button}>
+                    {children}
+                </Button>
+                <button className={styles.dropdown_button}>
+                    <DropdownIcon width={12} height={12} />
+                </button>
+            </div>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+            <DropdownMenu.Content className={styles.dropdown_content} sideOffset={5}>
+                {dropdownChildren}
+                <DropdownMenu.Arrow className={styles.dropdown_arrow} />
+            </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+
+    </DropdownMenu.Root>;
+};
+
+type ItemProps = React.PropsWithChildren;
+
+const DropdownItem: React.FC<ItemProps> = (props: ItemProps) => {
+    const {
+        children,
+    } = props;
+
+    return <DropdownMenu.Item className={styles.dropdown_item}>
+        {children}
+    </DropdownMenu.Item>;
 };
 
-export default DropdownButton;
\ No newline at end of file
+export { DropdownButton, DropdownItem };
\ No newline at end of file
diff --git a/src/components/Launch/LaunchButton/index.tsx b/src/components/Launch/LaunchButton/index.tsx
index 0d04451..6c60fe6 100644
--- a/src/components/Launch/LaunchButton/index.tsx
+++ b/src/components/Launch/LaunchButton/index.tsx
@@ -4,7 +4,7 @@ import { InstallingIcon, UpdateIcon } from "@app/assets/Icons";
 import { calculatePayloadPercentage } from "@app/utils/Download/payload";
 import PayloadProgress from "../../PayloadProgress";
 import Button from "@app/components/Button";
-import DropdownButton from "@app/components/DropdownButton";
+import { DropdownButton, DropdownItem } from "@app/components/DropdownButton";
 
 interface LaunchButtonProps extends React.PropsWithChildren {
     version: YARGVersion,
@@ -23,8 +23,9 @@ export function LaunchButton(props: LaunchButtonProps) {
         return <DropdownButton
             style={props.style}
             color={ButtonColor.GREEN}
-            onClick={() => version.download()}
-            buttonChildren={buttonChildren}>
+            onClick={() => version.download()}>
+
+            {buttonChildren}
         </DropdownButton>;
     }
 
@@ -48,11 +49,19 @@ export function LaunchButton(props: LaunchButtonProps) {
             Play {playName}
         </>;
 
+        const dropdownChildren = <>
+            <DropdownItem>
+                Uninstall
+            </DropdownItem>
+        </>;
+
         return <DropdownButton
             style={props.style}
             color={ButtonColor.BLUE}
             onClick={() => version.play()}
-            buttonChildren={buttonChildren}>
+            dropdownChildren={dropdownChildren}>
+
+            {buttonChildren}
         </DropdownButton>;
     }