From 840da146b968b4db7616f5528f1a2b0d24e9517a Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Sat, 8 Apr 2023 23:28:12 +0200
Subject: [PATCH] UX: Make possibly copy-relevant text in settings copyable

---
 src/components/PatchHelper.tsx                 |  5 +++--
 src/components/PluginSettings/PluginModal.tsx  |  7 ++++---
 .../VencordSettings/BackupRestoreTab.tsx       |  1 +
 src/components/VencordSettings/ThemesTab.tsx   |  2 +-
 src/components/VencordSettings/Updater.tsx     | 18 +++++++++++++-----
 .../VencordSettings/settingsStyles.css         |  9 +++++++++
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/PatchHelper.tsx b/src/components/PatchHelper.tsx
index f1fe22c0c..37782ef3f 100644
--- a/src/components/PatchHelper.tsx
+++ b/src/components/PatchHelper.tsx
@@ -186,9 +186,10 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                 error={error ?? replacementError}
             />
             {!isFunc && (
-                <>
+                <div className="vc-text-selectable">
                     <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
                     {Object.entries({
+                        "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
                         "$$": "Insert a $",
                         "$&": "Insert the entire match",
                         "$`\u200b": "Insert the substring before the match",
@@ -200,7 +201,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                             {Parser.parse("`" + placeholder + "`")}: {desc}
                         </Forms.FormText>
                     ))}
-                </>
+                </div>
             )}
 
             <Switch
diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx
index 43e1d31ab..6240c17ff 100644
--- a/src/components/PluginSettings/PluginModal.tsx
+++ b/src/components/PluginSettings/PluginModal.tsx
@@ -20,7 +20,8 @@ import { generateId } from "@api/Commands";
 import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { LazyComponent } from "@utils/misc";
+import { Margins } from "@utils/margins";
+import { classes, LazyComponent } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
 import { proxyLazy } from "@utils/proxyLazy";
 import { OptionType, Plugin } from "@utils/types";
@@ -174,7 +175,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
+        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
             <ModalHeader separator={false}>
                 <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
                 <ModalCloseButton onClick={onClose} />
@@ -198,7 +199,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </div>
                 </Forms.FormSection>
                 {!!plugin.settingsAboutComponent && (
-                    <div style={{ marginBottom: 8 }}>
+                    <div className={classes(Margins.bottom8, "vc-text-selectable")}>
                         <Forms.FormSection>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
                                 <plugin.settingsAboutComponent tempSettings={tempSettings} />
diff --git a/src/components/VencordSettings/BackupRestoreTab.tsx b/src/components/VencordSettings/BackupRestoreTab.tsx
index 7a3729daf..173747026 100644
--- a/src/components/VencordSettings/BackupRestoreTab.tsx
+++ b/src/components/VencordSettings/BackupRestoreTab.tsx
@@ -41,6 +41,7 @@ function BackupRestoreTab() {
                 Settings Export contains:
                 <ul>
                     <li>&mdash; Custom QuickCSS</li>
+                    <li>&mdash; Theme Links</li>
                     <li>&mdash; Plugin Settings</li>
                 </ul>
             </Text>
diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx
index 4bd0eb8ed..83a087004 100644
--- a/src/components/VencordSettings/ThemesTab.tsx
+++ b/src/components/VencordSettings/ThemesTab.tsx
@@ -90,7 +90,7 @@ export default ErrorBoundary.wrap(function () {
 
     return (
         <>
-            <Card className="vc-settings-card">
+            <Card className="vc-settings-card vc-text-selectable">
                 <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
                 <Forms.FormText>One link per line</Forms.FormText>
                 <Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
diff --git a/src/components/VencordSettings/Updater.tsx b/src/components/VencordSettings/Updater.tsx
index 15a8c87a3..809a3e70c 100644
--- a/src/components/VencordSettings/Updater.tsx
+++ b/src/components/VencordSettings/Updater.tsx
@@ -229,11 +229,19 @@ function Updater() {
 
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
-            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
-                <Link href={repo}>
-                    {repo.split("/").slice(-2).join("/")}
-                </Link>
-            )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
+            <Forms.FormText className="vc-text-selectable">
+                {repoPending
+                    ? repo
+                    : err
+                        ? "Failed to retrieve - check console"
+                        : (
+                            <Link href={repo}>
+                                {repo.split("/").slice(-2).join("/")}
+                            </Link>
+                        )
+                }
+                {" "}(<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)
+            </Forms.FormText>
 
             <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
 
diff --git a/src/components/VencordSettings/settingsStyles.css b/src/components/VencordSettings/settingsStyles.css
index ebc112c05..971e9a877 100644
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@@ -57,3 +57,12 @@
     color: var(--white-500);
     background-color: var(--button-danger-background);
 }
+
+.vc-text-selectable,
+.vc-text-selectable :not(a, button) {
+    /* make text selectable, silly discord makes the entirety of settings not selectable */
+    user-select: text;
+
+    /* discord also sets cursor: default which prevents the cursor from showing as text */
+    cursor: initial;
+}