feat(Decor): Enforce guidelines more (#2035)

2024-01-03 13:49:03 +01:00 · 2024-01-03 13:49:03 +01:00 · 1eb2510353
parent a963a19bdc
commit 1eb2510353
6 changed files with 242 additions and 139 deletions
--- a/src/plugins/decor/index.tsx
+++ b/src/plugins/decor/index.tsx
@ -6,21 +6,17 @@

 import "./ui/styles.css";

-import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Link } from "@components/Link";
 import { Devs } from "@utils/constants";
-import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
-import { closeAllModals } from "@utils/modal";
-import definePlugin, { OptionType } from "@utils/types";
+import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { FluxDispatcher, Forms, UserStore } from "@webpack/common";
+import { UserStore } from "@webpack/common";

 import { CDN_URL, RAW_SKU_ID, SKU_ID } from "./lib/constants";
 import { useAuthorizationStore } from "./lib/stores/AuthorizationStore";
 import { useCurrentUserDecorationsStore } from "./lib/stores/CurrentUserDecorationsStore";
 import { useUserDecorAvatarDecoration, useUsersDecorationsStore } from "./lib/stores/UsersDecorationsStore";
+import { settings } from "./settings";
 import { setDecorationGridDecoration, setDecorationGridItem } from "./ui/components";
 import DecorSection from "./ui/components/DecorSection";

@ -30,27 +26,6 @@ export interface AvatarDecoration {
    skuId: string;
 }

-const settings = definePluginSettings({
-    changeDecoration: {
-        type: OptionType.COMPONENT,
-        description: "Change your avatar decoration",
-        component() {
-            return <div>
-                <DecorSection hideTitle hideDivider noMargin />
-                <Forms.FormText type="description" className={classes(Margins.top8, Margins.bottom8)}>
-                    You can also access Decor decorations from the <Link
-                        href="/settings/profile-customization"
-                        onClick={e => {
-                            e.preventDefault();
-                            closeAllModals();
-                            FluxDispatcher.dispatch({ type: "USER_SETTINGS_MODAL_SET_SECTION", section: "Profile Customization" });
-                        }}
-                    >Profiles</Link> page.
-                </Forms.FormText>
-            </div>;
-        }
-    }
-});
 export default definePlugin({
    name: "Decor",
    description: "Create and use your own custom avatar decorations, or pick your favorite from the presets.",
--- a/src/plugins/decor/settings.tsx
+++ b/src/plugins/decor/settings.tsx
@ -0,0 +1,47 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { Link } from "@components/Link";
+import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
+import { closeAllModals } from "@utils/modal";
+import { OptionType } from "@utils/types";
+import { FluxDispatcher, Forms } from "@webpack/common";
+
+import DecorSection from "./ui/components/DecorSection";
+
+export const settings = definePluginSettings({
+    changeDecoration: {
+        type: OptionType.COMPONENT,
+        description: "Change your avatar decoration",
+        component() {
+            if (!Vencord.Plugins.plugins.Decor.started) return <Forms.FormText>
+                Enable Decor and restart your client to change your avatar decoration.
+            </Forms.FormText>;
+
+            return <div>
+                <DecorSection hideTitle hideDivider noMargin />
+                <Forms.FormText type="description" className={classes(Margins.top8, Margins.bottom8)}>
+                    You can also access Decor decorations from the <Link
+                        href="/settings/profile-customization"
+                        onClick={e => {
+                            e.preventDefault();
+                            closeAllModals();
+                            FluxDispatcher.dispatch({ type: "USER_SETTINGS_MODAL_SET_SECTION", section: "Profile Customization" });
+                        }}
+                    >Profiles</Link> page.
+                </Forms.FormText>
+            </div>;
+        }
+    },
+    agreedToGuidelines: {
+        type: OptionType.BOOLEAN,
+        description: "Agreed to guidelines",
+        hidden: true,
+        default: false
+    }
+});
--- a/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
+++ b/src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
@ -4,11 +4,12 @@
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

+import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
-import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
 import { Alerts, Button, FluxDispatcher, Forms, GuildStore, NavigationRouter, Parser, Text, Tooltip, useEffect, UserStore, UserUtils, useState } from "@webpack/common";
 import { User } from "discord-types/general";
@ -18,6 +19,7 @@ import { GUILD_ID, INVITE_KEY } from "../../lib/constants";
 import { useAuthorizationStore } from "../../lib/stores/AuthorizationStore";
 import { useCurrentUserDecorationsStore } from "../../lib/stores/CurrentUserDecorationsStore";
 import { decorationToAvatarDecoration } from "../../lib/utils/decoration";
+import { settings } from "../../settings";
 import { cl, requireAvatarDecorationModal } from "../";
 import { AvatarDecorationModalPreview } from "../components";
 import DecorationGridCreate from "../components/DecorationGridCreate";
@ -25,6 +27,7 @@ import DecorationGridNone from "../components/DecorationGridNone";
 import DecorDecorationGridDecoration from "../components/DecorDecorationGridDecoration";
 import SectionedGridList from "../components/SectionedGridList";
 import { openCreateDecorationModal } from "./CreateDecorationModal";
+import { openGuidelinesModal } from "./GuidelinesModal";

 const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
 const DecorationModalStyles = findByPropsLazy("modalFooterShopButton");
@ -83,7 +86,7 @@ function SectionHeader({ section }: { section: Section; }) {
    </div>;
 }

-export default function ChangeDecorationModal(props: any) {
+function ChangeDecorationModal(props: ModalProps) {
    // undefined = not trying, null = none, Decoration = selected
    const [tryingDecoration, setTryingDecoration] = useState<Decoration | null | undefined>(undefined);
    const isTryingDecoration = typeof tryingDecoration !== "undefined";
@ -116,6 +119,7 @@ export default function ChangeDecorationModal(props: any) {
    const data = [
        {
            title: "Your Decorations",
+            subtitle: "You can delete your own decorations by right clicking on them.",
            sectionKey: "ownDecorations",
            items: ["none", ...ownDecorations, "create"]
        },
@ -148,6 +152,7 @@ export default function ChangeDecorationModal(props: any) {
            className={cl("change-decoration-modal-content")}
            scrollbarType="none"
        >
+            <ErrorBoundary>
                <SectionedGridList
                    renderItem={item => {
                        if (typeof item === "string") {
@ -163,7 +168,7 @@ export default function ChangeDecorationModal(props: any) {
                                        {tooltipProps => <DecorationGridCreate
                                            className={cl("change-decoration-modal-decoration")}
                                            {...tooltipProps}
-                                        onSelect={!hasDecorationPendingReview ? openCreateDecorationModal : () => { }}
+                                            onSelect={!hasDecorationPendingReview ? (settings.store.agreedToGuidelines ? openCreateDecorationModal : openGuidelinesModal) : () => { }}
                                        />}
                                    </Tooltip>;
                            }
@ -202,6 +207,7 @@ export default function ChangeDecorationModal(props: any) {
                    }
                    {activeDecorationHasAuthor && <Text key={`createdBy-${activeSelectedDecoration.authorId}`}>Created by {Parser.parse(`<@${activeSelectedDecoration.authorId}>`)}</Text>}
                </div>
+            </ErrorBoundary>
        </ModalContent>
        <ModalFooter className={classes(cl("change-decoration-modal-footer", cl("modal-footer")))}>
            <div className={cl("change-decoration-modal-footer-btn-container")}>
--- a/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
+++ b/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
@ -4,10 +4,11 @@
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

+import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
 import { Button, FluxDispatcher, Forms, GuildStore, NavigationRouter, Text, TextInput, useEffect, useMemo, UserStore, useState } from "@webpack/common";

@ -21,6 +22,8 @@ const DecorationModalStyles = findByPropsLazy("modalFooterShopButton");

 const FileUpload = findComponentByCodeLazy("fileUploadInput,");

+const { default: HelpMessage, HelpMessageTypes } = findByPropsLazy("HelpMessageTypes");
+
 function useObjectURL(object: Blob | MediaSource | null) {
    const [url, setUrl] = useState<string | null>(null);

@ -39,7 +42,7 @@ function useObjectURL(object: Blob | MediaSource | null) {
    return url;
 }

-export default function CreateDecorationModal(props) {
+function CreateDecorationModal(props: ModalProps) {
    const [name, setName] = useState("");
    const [file, setFile] = useState<File | null>(null);
    const [submitting, setSubmitting] = useState(false);
@ -75,6 +78,14 @@ export default function CreateDecorationModal(props) {
            className={cl("create-decoration-modal-content")}
            scrollbarType="none"
        >
+            <ErrorBoundary>
+                <HelpMessage messageType={HelpMessageTypes.WARNING}>
+                    Make sure your decoration does not violate <Link
+                        href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
+                    >
+                        the guidelines
+                    </Link> before submitting it.
+                </HelpMessage>
                <div className={cl("create-decoration-modal-form-preview-container")}>
                    <div className={cl("create-decoration-modal-form")}>
                        {error !== null && <Text color="text-danger" variant="text-xs/normal">{error.message}</Text>}
@ -109,11 +120,6 @@ export default function CreateDecorationModal(props) {
                    </div>
                </div>
                <Forms.FormText type="description" className={Margins.bottom16}>
-                Make sure your decoration does not violate <Link
-                    href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
-                >
-                    the guidelines
-                </Link> before creating your decoration.
                    <br />You can receive updates on your decoration's review by joining <Link
                        href={`https://discord.gg/${INVITE_KEY}`}
                        onClick={async e => {
@ -134,6 +140,7 @@ export default function CreateDecorationModal(props) {
                        Decor's Discord server
                    </Link>.
                </Forms.FormText>
+            </ErrorBoundary>
        </ModalContent>
        <ModalFooter className={cl("modal-footer")}>
            <Button
@ -145,7 +152,7 @@ export default function CreateDecorationModal(props) {
                disabled={!file || !name}
                submitting={submitting}
            >
-                Create
+                Submit for Review
            </Button>
            <Button
                onClick={props.onClose}
--- a/src/plugins/decor/ui/modals/GuidelinesModal.tsx
+++ b/src/plugins/decor/ui/modals/GuidelinesModal.tsx
@ -0,0 +1,68 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Link } from "@components/Link";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { findByPropsLazy } from "@webpack";
+import { Button, Forms, Text } from "@webpack/common";
+
+import { settings } from "../../settings";
+import { cl, requireAvatarDecorationModal } from "../";
+import { openCreateDecorationModal } from "./CreateDecorationModal";
+
+const DecorationModalStyles = findByPropsLazy("modalFooterShopButton");
+
+function GuidelinesModal(props: ModalProps) {
+    return <ModalRoot
+        {...props}
+        size={ModalSize.SMALL}
+        className={DecorationModalStyles.modal}
+    >
+        <ModalHeader separator={false} className={cl("modal-header")}>
+            <Text
+                color="header-primary"
+                variant="heading-lg/semibold"
+                tag="h1"
+                style={{ flexGrow: 1 }}
+            >
+                Hold on
+            </Text>
+            <ModalCloseButton onClick={props.onClose} />
+        </ModalHeader>
+        <ModalContent
+            scrollbarType="none"
+        >
+            <Forms.FormText>
+                By submitting a decoration, you agree to <Link
+                    href="https://github.com/decor-discord/.github/blob/main/GUIDELINES.md"
+                >
+                    the guidelines
+                </Link>. Not reading these guidelines may get your account suspended from creating more decorations in the future.
+            </Forms.FormText>
+        </ModalContent>
+        <ModalFooter className={cl("modal-footer")}>
+            <Button
+                onClick={() => {
+                    settings.store.agreedToGuidelines = true;
+                    props.onClose();
+                    openCreateDecorationModal();
+                }}
+            >
+                Continue
+            </Button>
+            <Button
+                onClick={props.onClose}
+                color={Button.Colors.PRIMARY}
+                look={Button.Looks.LINK}
+            >
+                Go Back
+            </Button>
+        </ModalFooter>
+    </ModalRoot>;
+}
+
+export const openGuidelinesModal = () =>
+    requireAvatarDecorationModal().then(() => openModal(props => <GuidelinesModal {...props} />));
--- a/src/plugins/decor/ui/styles.css
+++ b/src/plugins/decor/ui/styles.css
@ -8,7 +8,7 @@
    display: flex;
    border-radius: 5px 5px 0 0;
    padding: 0 16px;
-    gap: 4px
+    gap: 4px;
 }

 .vc-decor-change-decoration-modal-preview {
@ -72,7 +72,7 @@
 .vc-decor-sectioned-grid-list-grid {
    display: flex;
    flex-wrap: wrap;
-    gap: 8px
+    gap: 8px;
 }

 .vc-decor-section-remove-margin {