vd-plugins/plugins/Commands/settings/pages/HiddenSettingsPage.tsx

import { storage } from "@vendetta/plugin";
import { useProxy } from "@vendetta/storage";
import { React, ReactNative as RN, stylesheet } from "@vendetta/metro/common";
import { semanticColors } from "@vendetta/ui";
import { getAssetIDByName } from "@vendetta/ui/assets";
import { Forms } from "@vendetta/ui/components";
import { alerts } from "@vendetta/ui";
import { showToast } from "@vendetta/ui/toasts";
import BetterTableRowGroup from "../components/BetterTableRowGroup";

const { FormSwitchRow, FormRow } = Forms;

export default function HiddenSettingsPage() {
  useProxy(storage);
  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);

  const styles = stylesheet.createThemedStyleSheet({
    container: {
      flex: 1,
      backgroundColor: semanticColors.BACKGROUND_PRIMARY,
    },
    warningText: {
      fontSize: 14,
      color: semanticColors.TEXT_MUTED,
      textAlign: "center",
      lineHeight: 20,
      fontWeight: "600",
    },
    infoText: {
      fontSize: 14,
      color: semanticColors.TEXT_MUTED,
      textAlign: "center",
      lineHeight: 20,
      marginTop: 8,
    },
  });

  return (
    <RN.ScrollView
      style={styles.container}
      contentContainerStyle={{
        flexGrow: 1,
        paddingVertical: 16,
        maxWidth: "100%",
      }}
    >
      <BetterTableRowGroup
        title="Warning"
        icon={getAssetIDByName("WarningIcon")}
        padding={true}
      >
        <RN.Text style={styles.warningText}>
          These are hidden commands that may contain mature content or
          experimental features.
        </RN.Text>
        <RN.Text style={styles.infoText}>
          Use at your own discretion. Commands in this section are disabled by
          default.
        </RN.Text>
      </BetterTableRowGroup>

      <BetterTableRowGroup
        title="Hidden Commands"
        icon={getAssetIDByName("EyeIcon")}
      >
        <FormSwitchRow
          label="/lovefemboys"
          subLabel="Get random femboy images from r/femboys (NSFW content available)"
          leading={<FormRow.Icon source={getAssetIDByName("HeartIcon")} />}
          value={storage.enabledCommands.lovefemboys}
          onValueChange={(v) => {
            storage.enabledCommands.lovefemboys = v;
            storage.pendingRestart = true;
            forceUpdate();
          }}
        />
      </BetterTableRowGroup>

      <BetterTableRowGroup
        title="NSFW Bypass Options"
        icon={getAssetIDByName("WarningIcon")}
      >
        <FormSwitchRow
          label="KonoChan NSFW Bypass"
          subLabel="Allow NSFW KonoChan content in non-NSFW channels (USE WITH CAUTION)"
          leading={<FormRow.Icon source={getAssetIDByName("ShieldIcon")} />}
          value={storage.hiddenSettings.konochanBypassNsfw}
          onValueChange={(v) => {
            if (v) {
              alerts.showConfirmationAlert({
                title: "⚠️ NSFW Bypass Warning",
                content:
                  "Enabling this allows NSFW content from KonoChan to be sent in any channel, including non-NSFW channels. This could violate server rules or Discord ToS. Use responsibly!",
                confirmText: "I Understand",
                cancelText: "Cancel",
                onConfirm: () => {
                  storage.hiddenSettings.konochanBypassNsfw = true;
                  forceUpdate();
                },
                onCancel: () => {},
              });
            } else {
              storage.hiddenSettings.konochanBypassNsfw = false;
              forceUpdate();
            }
          }}
        />
      </BetterTableRowGroup>

      <BetterTableRowGroup
        title="Hidden Settings Control"
        icon={getAssetIDByName("SettingsIcon")}
      >
        <FormSwitchRow
          label="Keep Hidden Settings Visible"
          subLabel="Keep this section visible even when navigating away"
          leading={<FormRow.Icon source={getAssetIDByName("EyeIcon")} />}
          value={storage.hiddenSettings.visible}
          onValueChange={(v) => {
            storage.hiddenSettings.visible = v;
          }}
        />
        <FormRow
          label="Reset Hidden Settings"
          subLabel="Hide this section and disable all hidden commands"
          leading={<FormRow.Icon source={getAssetIDByName("TrashIcon")} />}
          onPress={() => {
            alerts.showConfirmationAlert({
              title: "Reset Hidden Settings",
              content:
                "This will hide the hidden settings section and disable all hidden commands. Are you sure?",
              confirmText: "Reset",
              onConfirm: () => {
                storage.hiddenSettings.enabled = false;
                storage.hiddenSettings.visible = false;
                storage.hiddenSettings.konochanBypassNsfw = false;
                storage.enabledCommands.lovefemboys = false;

                storage.pendingRestart = true;
                showToast(
                  "Hidden settings reset",
                  getAssetIDByName("CheckmarkIcon"),
                );
              },
              cancelText: "Cancel",
            });
          }}
        />
      </BetterTableRowGroup>
    </RN.ScrollView>
  );
}