Settings(mainTab): bleh

src/components/VencordSettings/VencordTab.tsx

@@ -14,7 +14,7 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
+ */
 
 import "./VencordTab.css";
 
@@ -28,83 +28,116 @@ import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { relaunch, showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { Button, Card, Forms, React, Select, showToast, Switch } from "@webpack/common";
+import {
+  Button,
+  Card,
+  Forms,
+  React,
+  Select,
+  showToast,
+  Switch,
+} from "@webpack/common";
 
-import { Flex, FolderIcon, GithubIcon, Heart, LogIcon, PaintbrushIcon, RestartIcon } from "..";
+import {
+  Flex,
+  FolderIcon,
+  GithubIcon,
+  Heart,
+  LogIcon,
+  PaintbrushIcon,
+  RestartIcon,
+} from "..";
 import { openNotificationSettingsModal } from "./NotificationSettings";
 import { QuickAction, QuickActionCard } from "./quickActions";
 import { SettingsTab, wrapTab } from "./shared";
 
 const cl = classNameFactory("vc-settings-");
 
-const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
+const DEFAULT_DONATE_IMAGE =
+  "https://cdn.discordapp.com/emojis/1026533090627174460.png";
 const SHIGGY_DONATE_IMAGE = "https://i.imgur.com/57ATLZu.png";
 
 type KeysOfType<Object, Type> = {
   [K in keyof Object]: Object[K] extends Type ? K : never;
 }[keyof Object];
 
-
 function EquicordSettings() {
-    const [settingsDir, , settingsDirPending] = useAwaiter(VencordNative.settings.getSettingsDir, {
+  const [settingsDir, , settingsDirPending] = useAwaiter(
-        fallbackValue: "Loading..."
+    VencordNative.settings.getSettingsDir,
-    });
+    {
+      fallbackValue: "Loading...",
+    },
+  );
   const settings = useSettings();
 
   const discordInvite = "bFp57wxCkv";
-    const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
+  const donateImage = React.useMemo(
+    () => (Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE),
+    [],
+  );
 
   const isWindows = navigator.platform.toLowerCase().startsWith("win");
   const isMac = navigator.platform.toLowerCase().startsWith("mac");
   const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac;
 
-    const Switches: Array<false | {
+  const Switches: Array<
+    | false
+    | {
         key: KeysOfType<typeof settings, boolean>;
         title: string;
         note: string;
-        warning: { enabled: boolean; message?: string; };
+        warning: { enabled: boolean; message?: string };
-    }> =
+      }
-        [
+  > = [
     {
       key: "useQuickCss",
       title: "Enable Custom CSS",
       note: "Loads your Custom CSS",
-                warning: { enabled: false }
+      warning: { enabled: false },
     },
     !IS_WEB && {
       key: "enableReactDevtools",
       title: "Enable React Developer Tools",
       note: "Requires a full restart",
-                warning: { enabled: false }
+      warning: { enabled: false },
     },
-            !IS_WEB && (!IS_DISCORD_DESKTOP || !isWindows ? {
+    !IS_WEB &&
+      (!IS_DISCORD_DESKTOP || !isWindows
+        ? {
             key: "frameless",
             title: "Disable the window frame",
             note: "Requires a full restart",
-                warning: { enabled: false }
+            warning: { enabled: false },
-            } : {
+          }
+        : {
             key: "winNativeTitleBar",
-                title: "Use Windows' native title bar instead of Discord's custom one",
+            title:
+              "Use Windows' native title bar instead of Discord's custom one",
             note: "Requires a full restart",
-                warning: { enabled: false }
+            warning: { enabled: false },
           }),
     !IS_WEB && {
       key: "transparent",
       title: "Enable window transparency.",
       note: "You need a theme that supports transparency or this will do nothing. Requires a full restart!",
-                warning: { enabled: true, message: "This will stop the window from being resizable." }
+      warning: {
+        enabled: true,
+        message: "This will stop the window from being resizable.",
       },
-            !IS_WEB && isWindows && {
+    },
+    !IS_WEB &&
+      isWindows && {
         key: "winCtrlQ",
-                title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
+        title:
+          "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
         note: "Requires a full restart",
-                warning: { enabled: false }
+        warning: { enabled: false },
       },
     IS_DISCORD_DESKTOP && {
       key: "disableMinSize",
       title: "Disable minimum window size",
       note: "Requires a full restart",
-                warning: { enabled: false }
+      warning: { enabled: false },
     },
   ];
 
@@ -140,7 +173,11 @@ function EquicordSettings() {
           <QuickAction
             Icon={GithubIcon}
             text="View Source Code"
-                        action={() => VencordNative.native.openExternal("https://github.com/" + gitRemote)}
+            action={() =>
+              VencordNative.native.openExternal(
+                "https://github.com/" + gitRemote,
+              )
+            }
           />
         </QuickActionCard>
       </Forms.FormSection>
@@ -148,102 +185,122 @@ function EquicordSettings() {
       <Forms.FormDivider />
 
       <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
-                <Forms.FormText className={Margins.bottom20} style={{ color: "var(--text-muted)" }}>
+        <Forms.FormText
-                    Hint: You can change the position of this settings section in the
+          className={Margins.bottom20}
-                    {" "}<Button
+          style={{ color: "var(--text-muted)" }}
+        >
+          Hint: You can change the position of this settings section in the{" "}
+          <Button
             look={Button.Looks.BLANK}
             style={{ color: "var(--text-link)", display: "inline-block" }}
             onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)}
           >
             settings of the Settings plugin
-                    </Button>!
+          </Button>
+          !
         </Forms.FormText>
 
-                {Switches.map(s => s && (
+        {Switches.map(
+          (s) =>
+            s && (
               <Switch
                 key={s.key}
                 value={settings[s.key]}
-                        onChange={v => settings[s.key] = v}
+                onChange={(v) => (settings[s.key] = v)}
                 note={
-                            s.warning.enabled ? <>
+                  s.warning.enabled ? (
+                    <>
                       {s.note}
                       <div className="form-switch-warning">
                         {s.warning.message}
                       </div>
-                            </> : s.note
+                    </>
+                  ) : (
+                    s.note
+                  )
                 }
               >
                 {s.title}
               </Switch>
-                ))}
+            ),
+        )}
       </Forms.FormSection>
 
-
+      {needsVibrancySettings && (
-            {needsVibrancySettings && <>
+        <>
-                <Forms.FormTitle tag="h5">Window vibrancy style (requires restart)</Forms.FormTitle>
+          <Forms.FormTitle tag="h5">
+            Window vibrancy style (requires restart)
+          </Forms.FormTitle>
           <Select
             className={Margins.bottom20}
             placeholder="Window vibrancy style"
             options={[
               // Sorted from most opaque to most transparent
               {
-                            label: "No vibrancy", value: undefined
+                label: "No vibrancy",
+                value: undefined,
               },
               {
                 label: "Under Page (window tinting)",
-                            value: "under-page"
+                value: "under-page",
               },
               {
                 label: "Content",
-                            value: "content"
+                value: "content",
               },
               {
                 label: "Window",
-                            value: "window"
+                value: "window",
               },
               {
                 label: "Selection",
-                            value: "selection"
+                value: "selection",
               },
               {
                 label: "Titlebar",
-                            value: "titlebar"
+                value: "titlebar",
               },
               {
                 label: "Header",
-                            value: "header"
+                value: "header",
               },
               {
                 label: "Sidebar",
-                            value: "sidebar"
+                value: "sidebar",
               },
               {
                 label: "Tooltip",
-                            value: "tooltip"
+                value: "tooltip",
               },
               {
                 label: "Menu",
-                            value: "menu"
+                value: "menu",
               },
               {
                 label: "Popover",
-                            value: "popover"
+                value: "popover",
               },
               {
                 label: "Fullscreen UI (transparent but slightly muted)",
-                            value: "fullscreen-ui"
+                value: "fullscreen-ui",
               },
               {
                 label: "HUD (Most transparent)",
-                            value: "hud"
+                value: "hud",
               },
             ]}
-                    select={v => settings.macosVibrancyStyle = v}
+            select={(v) => (settings.macosVibrancyStyle = v)}
-                    isSelected={v => settings.macosVibrancyStyle === v}
+            isSelected={(v) => settings.macosVibrancyStyle === v}
-                    serialize={identity} />
+            serialize={identity}
-            </>}
+          />
+        </>
+      )}
 
-            <Forms.FormSection className={Margins.top16} title="Equicord Notifications" tag="h5">
+      <Forms.FormSection
+        className={Margins.top16}
+        title="Equicord Notifications"
+        tag="h5"
+      >
         <Flex>
           <Button onClick={openNotificationSettingsModal}>
             Notification Settings
@@ -262,21 +319,28 @@ interface DiscordInviteProps {
   image: string;
 }
 
-
 function DiscordInviteCard({ invite, image }: DiscordInviteProps) {
   return (
     <Card className={cl("card", "discordinvite")}>
       <div>
         <Forms.FormTitle tag="h5">Join the discord!</Forms.FormTitle>
-                <Forms.FormText>Please consider joining the discord for any news on breaking changes, or new bigger updates!</Forms.FormText>
+        <Forms.FormText>
-                <Forms.FormText>You can also donate to me if you'd like to support this project. <Heart /></Forms.FormText>
+          Please consider joining the discord for any news on breaking changes,
+          or new bigger updates!
+        </Forms.FormText>
+        <Forms.FormText>
+          <Heart /> You can also donate to me if you'd like to support this
+          project.
+        </Forms.FormText>
 
         <div className={cl("card-buttons")}>
           <Button
             className="vc-joindiscordbutton vc-settingbuttons"
-                        onClick={async e => {
+            onClick={async (e) => {
               e.preventDefault();
-                            openInviteModal(invite).catch(() => showToast("Invalid or expired invite"));
+              openInviteModal(invite).catch(() =>
+                showToast("Invalid or expired invite"),
+              );
             }}
           >
             Join
@@ -284,7 +348,11 @@ function DiscordInviteCard({ invite, image }: DiscordInviteProps) {
 
           <Button
             className="vc-donatebutton vc-settingbuttons"
-                        onClick={() => { VencordNative.native.openExternal("https://github.com/sponsors/verticalsync"); }}
+            onClick={() => {
+              VencordNative.native.openExternal(
+                "https://github.com/sponsors/verticalsync",
+              );
+            }}
           >
             Donate
           </Button>