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

@@ -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 :)

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,28 +18,34 @@ 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,
                 // requires tooltip and confirm modal though
                 <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",

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;
+    }
+}