From 6c551650d09adb07753dafc3a777e95c5ed5997a Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Sun, 14 Jan 2024 16:24:40 +0000
Subject: [PATCH] feat: add reset to default button

---
 src/api/Settings.ts                           |  2 +-
 src/components/Icons.tsx                      | 19 +++++++++
 src/components/ThemeSettings/UserCSSModal.tsx | 40 ++++++++++++++-----
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/api/Settings.ts b/src/api/Settings.ts
index 887d9d4c4..8a27d1bed 100644
--- a/src/api/Settings.ts
+++ b/src/api/Settings.ts
@@ -77,7 +77,7 @@ export interface Settings {
     };
 
     userCssVars: {
-        [fileName: string]: {
+        [themeId: string]: {
             [varName: string]: string;
         };
     };
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 3d7504f8a..4ff2d9fcf 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -326,3 +326,22 @@ export function PasteIcon(props: IconProps) {
         </Icon>
     );
 }
+
+export function ResetIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+            <path d="M3 3v5h5" />
+        </Icon>
+    );
+}
diff --git a/src/components/ThemeSettings/UserCSSModal.tsx b/src/components/ThemeSettings/UserCSSModal.tsx
index 100005a90..3ac4738e7 100644
--- a/src/components/ThemeSettings/UserCSSModal.tsx
+++ b/src/components/ThemeSettings/UserCSSModal.tsx
@@ -6,7 +6,7 @@
 
 import { Settings, useSettings } from "@api/Settings";
 import { Flex } from "@components/Flex";
-import { CopyIcon, PasteIcon } from "@components/Icons";
+import { CopyIcon, PasteIcon, ResetIcon } from "@components/Icons";
 import { copyWithToast } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
 import { showToast, Text, Toasts, Tooltip } from "@webpack/common";
@@ -73,9 +73,28 @@ function ImportButton({ themeSettings }: { themeSettings: Settings["userCssVars"
     </Tooltip>;
 }
 
+function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["userCssVars"]; themeId: string; }) {
+    return <Tooltip text={"Reset settings to default"}>
+        {({ onMouseLeave, onMouseEnter }) => (
+            <div
+                style={{ cursor: "pointer" }}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+
+                onClick={async () => {
+                    delete themeSettings[themeId];
+                }}>
+                <ResetIcon />
+            </div>
+        )}
+    </Tooltip>;
+}
+
 export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
     // @ts-expect-error UseSettings<> can't determine this is a valid key
-    const themeSettings = useSettings(["userCssVars"], false).userCssVars[theme.id];
+    const { userCssVars } = useSettings(["userCssVars"], false);
+
+    const themeVars = userCssVars[theme.id];
 
     const controls: ReactNode[] = [];
 
@@ -86,7 +105,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                     <SettingTextComponent
                         label={varInfo.label}
                         name={name}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -97,7 +116,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                     <SettingBooleanComponent
                         label={varInfo.label}
                         name={name}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -108,7 +127,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                     <SettingColorComponent
                         label={varInfo.label}
                         name={name}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -119,7 +138,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                     <SettingNumberComponent
                         label={varInfo.label}
                         name={name}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -132,7 +151,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                         name={name}
                         options={varInfo.options}
                         default={varInfo.default}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -147,7 +166,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
                         min={varInfo.min}
                         max={varInfo.max}
                         step={varInfo.step}
-                        themeSettings={themeSettings}
+                        themeSettings={themeVars}
                     />
                 );
                 break;
@@ -160,8 +179,9 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
             <ModalHeader separator={false}>
                 <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text>
                 <Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons">
-                    <ExportButton themeSettings={themeSettings} />
-                    <ImportButton themeSettings={themeSettings} />
+                    <ExportButton themeSettings={themeVars} />
+                    <ImportButton themeSettings={themeVars} />
+                    <ResetButton themeSettings={userCssVars} themeId={theme.id} />
                 </Flex>
                 <ModalCloseButton onClick={modalProps.onClose} />
             </ModalHeader>