Settings and UI

import { definePluginSettings } from "@api/Settings";
import { OptionType } from "@utils/types";

const settings = definePluginSettings({
    enabled: {
        type: OptionType.BOOLEAN,
        description: "Enable the feature.",
        default: true
    },
    label: {
        type: OptionType.STRING,
        description: "Text shown by the feature.",
        default: "Hello"
    }
});

const KEYS = ["enabled", "label"] as const;

function SettingsPreview() {
    const values = settings.use(KEYS);
    return <span>{values.enabled ? values.label : "Disabled"}</span>;
}

import { showToast, Toasts } from "@webpack/common";

showToast("Settings saved.", Toasts.Type.SUCCESS);
showToast("Could not save settings.", Toasts.Type.FAILURE);

import { ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
import { Button, Text } from "@webpack/common";

function openExampleModal() {
    openModal(props => (
        <ModalRoot {...props}>
            <ModalHeader>Example</ModalHeader>
            <ModalContent>
                <Text variant="text-md/normal">Hello from a plugin modal.</Text>
                <Button onClick={props.onClose}>Close</Button>
            </ModalContent>
        </ModalRoot>
    ));
}

import ErrorBoundary from "@components/ErrorBoundary";
import { EquicordDevs } from "@utils/constants";
import definePlugin from "@utils/types";

function ExampleDecoration() {
    return <span>Example</span>;
}

export default definePlugin({
    name: "DecorationExample",
    description: "Shows an injected decoration example.",
    authors: [EquicordDevs.irritably],

    renderMessageDecoration: {
        render: ErrorBoundary.wrap(ExampleDecoration, { noop: true })
    }
});