client(LineInput.tsx): update the removeBadge function so it only triggers on double click

Author: 0l1v3rr

client/build/asset-manifest.json

@@ -18,7 +18,6 @@ const ColorInput: FC<ColorInputProps> = (props) => {
   const isError = props.validate(props.value).trim() !== "";
 
   const generateHex = useCallback((): string => {
-    // return "#" + Math.floor(Math.random() * 16777215).toString(16);
     return "#" + Math.random().toString(16).slice(2, 8).toLowerCase();
   }, []);
 

client/build/index.html

@@ -22,17 +22,10 @@ const LineInput: FC<InputProps> = (props) => {
     });
   };
 
-  const removeBadge = (badge: Badge) => {
+  const removeBadge = (index: number) => {
     props.updateLine({
       lineNumber: props.line.lineNumber,
-      badges: [...props.line.badges].filter(
-        (b) =>
-          !(
-            b.color === badge.color &&
-            b.iconName === badge.iconName &&
-            b.label === badge.label
-          )
-      ),
+      badges: [...props.line.badges].filter((_, i) => i !== index),
     });
   };
 
@@ -66,7 +59,10 @@ const LineInput: FC<InputProps> = (props) => {
             Badges: {props.line.badges.length}
           </span>
 
-          <HoverText label="Click the badge to remove it" className="ml-auto">
+          <HoverText
+            label="Double click on the badge to remove it"
+            className="ml-auto"
+          >
             <div
               className="cursor-pointer text-gh-text-secondary 
                 hover:text-gh-text transition-all duration-150"
@@ -96,11 +92,16 @@ const LineInput: FC<InputProps> = (props) => {
 
         {props.line.badges.length > 0 && (
           <div className="flex items-center gap-3 p-2 overflow-hidden flex-wrap">
-            {props.line.badges.map((badge) => {
+            {props.line.badges.map((badge, index) => {
               return (
                 <div
                   key={`${badge.iconName}-${Math.random()}`}
-                  onClick={() => removeBadge(badge)}
+                  onClick={(event) => {
+                    // double click
+                    if (event.detail === 2) {
+                      removeBadge(index);
+                    }
+                  }}
                   className="flex items-center gap-3 py-[.45rem] px-3 bg-gh-bg-secondary 
                     cursor-pointer border border-solid border-gh-bg-secondary 
                     hover:border-gh-red transition-all duration-150"

client/build/static/js/main.b1581886.js renamed to client/build/static/js/main.ba7571ef.js

@@ -17,7 +17,7 @@ interface LinePopupProps {
 const LinePopup: FC<LinePopupProps> = (props) => {
   const [icon, setIcon] = useState<string>("react");
   const [label, setLabel] = useState<string>("react");
-  const [color, setColor] = useState<string>("#3498db");
+  const [color, setColor] = useState<string>("#5ed3f3");
 
   const handleSave = () => {
     props.addBadge({
@@ -33,7 +33,7 @@ const LinePopup: FC<LinePopupProps> = (props) => {
     props.closePopup();
     setIcon("react");
     setLabel("react");
-    setColor("#3498db");
+    setColor("#5ed3f3");
   };
 
   const activeClasses = "opacity-100 pointer-events-auto scale-100";
@@ -79,7 +79,7 @@ const LinePopup: FC<LinePopupProps> = (props) => {
 
         <ColorInput
           label="Badge color"
-          placeholder="#3498db"
+          placeholder="#5ed3f3"
           value={color}
           setValue={(val: string) => setColor(val)}
           validate={(val) => validateHex(val)}