From 71e54b43034eaa7b79b63d4dfd0b6cd4a94e06f9 Mon Sep 17 00:00:00 2001
From: tabarra <tabarra@vexguard.net>
Date: Sat, 30 Dec 2023 13:58:00 -0300
Subject: [PATCH] tweak: removed id copy button from player modal

I couldn't get it to work both on localhost and remote, both in browser
and in game. Revisit this at a later time.
---
 docs/feature_graveyard.md               |  1 +
 panel/src/layout/playerModal/IdsTab.tsx | 28 +++++++++++++++----------
 panel/src/lib/utils.ts                  | 21 +++++++++++++++++++
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/docs/feature_graveyard.md b/docs/feature_graveyard.md
index dfcaffd01..07906ab4d 100644
--- a/docs/feature_graveyard.md
+++ b/docs/feature_graveyard.md
@@ -15,6 +15,7 @@ And as part of the process, we "retired" many features and parts of our code bas
 - **Discord /status command:** Removed to give place for the persistent & auto-updated embed message;
 - **Import bans from EasyAdmin, BanSQL, vMenu, vRP, el_bwh:** It was there for over a year, who wanted to migrate could have migrated already. Furthermore it is kinda easy write code to import it directly into the database JSON file;
 - **Cfx.re proxy URL:** The `https://monitor-xxxxx.users.cfx.re/` reverse proxy URL has been deprecated due to the complexity it added to txAdmin while being used by only 1% of all txAdmin servers.
+- **Host CPU/memory stats on sidebar:** That was not really that useful, and took precious sidebar space.
 
 Don't cry because they are gone.  
 Smile because they once existed :)
diff --git a/panel/src/layout/playerModal/IdsTab.tsx b/panel/src/layout/playerModal/IdsTab.tsx
index 8c017a623..0131add57 100644
--- a/panel/src/layout/playerModal/IdsTab.tsx
+++ b/panel/src/layout/playerModal/IdsTab.tsx
@@ -1,5 +1,5 @@
 import { txToast } from "@/components/TxToaster";
-import { cn } from "@/lib/utils";
+import { cn, copyToClipboard } from "@/lib/utils";
 import { PlayerModalPlayerData } from "@shared/playerApiTypes";
 import { CopyIcon } from "lucide-react";
 import { useState } from "react";
@@ -18,20 +18,26 @@ function IdsBlock({ title, emptyMessage, currIds, allIds, isSmaller }: IdsBlockP
     const displayOldIds = allIds.filter((id) => !currIds.includes(id)).sort((a, b) => a.localeCompare(b));
 
     const handleCopyIds = () => {
-        try {
-            //Just to guarantee the correct visual order
-            const arrToCopy = [...displayCurrIds, ...displayOldIds];
-            navigator.clipboard.writeText(arrToCopy.join('\n'));
-            setHasCopiedIds(true);
-        } catch (error) {
-            txToast.error('Failed to copy to clipboard :(');
-        }
+        //Just to guarantee the correct visual order
+        const arrToCopy = [...displayCurrIds, ...displayOldIds];
+        copyToClipboard(arrToCopy.join('\n')).then((res) => {
+            if (res !== false) {
+                setHasCopiedIds(true);
+            } else {
+                txToast.error('Failed to copy to clipboard :(');
+            }
+        }).catch((error) => {
+            txToast.error({
+                title: 'Failed to copy to clipboard:',
+                msg: error.message,
+            });
+        });
     }
 
     return <div>
         <div className="flex justify-between items-center pb-1">
             <h3 className="text-xl">{title}</h3>
-            {hasCopiedIds ? (
+            {/* {hasCopiedIds ? (
                 <span className="text-sm text-success-inline">Copied!</span>
             ) : (
                 // TODO: a button to erase the ids from the database can be added here,
@@ -39,7 +45,7 @@ function IdsBlock({ title, emptyMessage, currIds, allIds, isSmaller }: IdsBlockP
                 <button onClick={handleCopyIds}>
                     <CopyIcon className="h-4 text-secondary hover:text-primary" />
                 </button>
-            )}
+            )} */}
         </div>
         <p className={cn(
             "font-mono break-all whitespace-pre-wrap border rounded divide-y divide-border/50 text-muted-foreground",
diff --git a/panel/src/lib/utils.ts b/panel/src/lib/utils.ts
index 3152a2263..b89cbdc9c 100644
--- a/panel/src/lib/utils.ts
+++ b/panel/src/lib/utils.ts
@@ -146,3 +146,24 @@ export const createRandomHslColor = () => {
     const hue = Math.floor(Math.random() * 360);
     return `hsl(${hue}, 90%, 65%)`;
 }
+
+
+/**
+ * Copy text to clipboard.
+ * Because we don't have access to Clipboard API in FiveM's CEF, as well as on
+ * non-localhost origins without https, we need to use the old school method.
+ * FIXME: literally not working
+ */
+export const copyToClipboard = async (value: string) => {
+    if (navigator?.clipboard) { 
+        return navigator.clipboard.writeText(value);
+    } else {
+        const clipElem = document.createElement("textarea");
+        clipElem.value = value;
+        document.body.appendChild(clipElem);
+        clipElem.select();
+        const result = document.execCommand("copy");
+        document.body.removeChild(clipElem);
+        return result;
+    }
+}