Add Display Names for Settings (#3212)

src/components/settings/tabs/plugins/components/BooleanSetting.tsx

@@ -41,7 +41,7 @@ export function BooleanSetting({ setting, pluginSettings, definedSettings, id, o
     }
 
     return (
-        <SettingsSection tag="label" name={id} description={setting.description} error={error} inlineSetting>
+        <SettingsSection tag="label" name={setting.displayName} id={id} description={setting.description} error={error} inlineSetting>
             <Switch
                 checked={state}
                 onChange={handleChange}

src/components/settings/tabs/plugins/components/Common.tsx

@@ -35,19 +35,20 @@ export function resolveError(isValidResult: boolean | string) {
 }
 
 interface SettingsSectionProps extends PropsWithChildren {
-    name: string;
+    name?: string;
+    id: string;
     description: string;
     error?: string | null;
     inlineSetting?: boolean;
     tag?: "label" | "div";
 }
 
-export function SettingsSection({ tag: Tag = "div", name, description, error, inlineSetting, children }: SettingsSectionProps) {
+export function SettingsSection({ tag: Tag = "div", name, id, description, error, inlineSetting, children }: SettingsSectionProps) {
     return (
         <Tag className={cl("section")}>
             <div className={classes(cl("content"), inlineSetting && cl("inline"))}>
                 <div className={cl("label")}>
-                    {name && <Text className={cl("title")} variant="text-md/medium">{wordsToTitle(wordsFromCamel(name))}</Text>}
+                    <Text className={cl("title")} variant="text-md/medium">{name ?? wordsToTitle(wordsFromCamel(id))}</Text>
                     {description && <Text className={cl("description")} variant="text-sm/normal">{description}</Text>}
                 </div>
                 {children}

src/components/settings/tabs/plugins/components/NumberSetting.tsx

@@ -50,7 +50,7 @@ export function NumberSetting({ setting, pluginSettings, definedSettings, id, on
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <TextInput
                 type="number"
                 pattern="-?[0-9]+"

src/components/settings/tabs/plugins/components/SelectSetting.tsx

@@ -40,7 +40,7 @@ export function SelectSetting({ setting, pluginSettings, definedSettings, onChan
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <Select
                 placeholder={setting.placeholder ?? "Select an option"}
                 options={setting.options}

src/components/settings/tabs/plugins/components/SliderSetting.tsx

@@ -38,7 +38,7 @@ export function SliderSetting({ setting, pluginSettings, definedSettings, id, on
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <Slider
                 markers={setting.markers}
                 minValue={setting.markers[0]}

src/components/settings/tabs/plugins/components/TextSetting.tsx

@@ -38,7 +38,7 @@ export function TextSetting({ setting, pluginSettings, definedSettings, id, onCh
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             {setting.multiline
                 ? <TextArea
                     placeholder={setting.placeholder ?? "Enter a value"}

src/plugins/consoleJanitor/index.tsx

@@ -57,7 +57,7 @@ function AllowLevelSetting({ settingKey }: AllowLevelSettingProps) {
 
 const AllowLevelSettings = ErrorBoundary.wrap(() => {
     return (
-        <SettingsSection name="Filter List" description="Always allow loggers of these types">
+        <SettingsSection name="Filter List" id="filterList" description="Always allow loggers of these types">
             <div style={{ display: "flex", flexDirection: "row" }}>
                 {Object.keys(settings.store.allowLevel).map(key => (
                     <AllowLevelSetting key={key} settingKey={key as keyof AllowLevels} />

src/plugins/ircColors/index.ts

@@ -49,6 +49,7 @@ const settings = definePluginSettings({
         default: false
     },
     applyColorOnlyInDms: {
+        displayName: "Apply Color Only In DMs",
         description: "Apply colors only in direct messages; do not apply colors in servers.",
         restartNeeded: false,
         type: OptionType.BOOLEAN,

src/plugins/lastfmRichPresence/index.tsx

@@ -67,6 +67,7 @@ function setActivity(activity: Activity | null) {
 
 const settings = definePluginSettings({
     apiKey: {
+        displayName: "API Key",
         description: "Custom Last.fm API key. Not required but highly recommended to avoid rate limiting with our shared key",
         type: OptionType.STRING,
     },
@@ -170,6 +171,7 @@ const settings = definePluginSettings({
         ],
     },
     showLastFmLogo: {
+        displayName: "Show Last.fm Logo",
         description: "Show the Last.fm logo by the album cover",
         type: OptionType.BOOLEAN,
         default: true,

src/plugins/mentionAvatars/index.tsx

@@ -16,6 +16,7 @@ import { GuildRoleStore, SelectedGuildStore, useState } from "@webpack/common";
 const settings = definePluginSettings({
     showAtSymbol: {
         type: OptionType.BOOLEAN,
+        displayName: "Show @ Symbol",
         description: "Whether the the @ symbol should be displayed on user mentions",
         default: true
     }

src/plugins/messageLinkEmbeds/index.tsx

@@ -113,6 +113,7 @@ const settings = definePluginSettings({
         ]
     },
     idList: {
+        displayName: "ID List",
         description: "Guild/channel/user IDs to blacklist or whitelist (separate with comma)",
         type: OptionType.STRING,
         default: "",

src/plugins/openInApp/index.ts

@@ -25,6 +25,7 @@ import type { MouseEvent } from "react";
 interface URLReplacementRule {
     match: RegExp;
     replace: (...matches: string[]) => string;
+    displayName?: string;
     description: string;
     shortlinkMatch?: RegExp;
     accountViewReplace?: (userId: string) => string;
@@ -59,6 +60,7 @@ const UrlReplacementRules: Record<string, URLReplacementRule> = {
     itunes: {
         match: /^https:\/\/(?:geo\.)?music\.apple\.com\/([a-z]{2}\/)?(album|artist|playlist|song|curator)\/([^/?#]+)\/?([^/?#]+)?(?:\?.*)?(?:#.*)?$/,
         replace: (_, lang, type, name, id) => id ? `itunes://music.apple.com/us/${type}/${name}/${id}` : `itunes://music.apple.com/us/${type}/${name}`,
+        displayName: "iTunes",
         description: "Open Apple Music links in the iTunes app"
     },
 };
@@ -67,6 +69,7 @@ const pluginSettings = definePluginSettings(
     Object.entries(UrlReplacementRules).reduce((acc, [key, rule]) => {
         acc[key] = {
             type: OptionType.BOOLEAN,
+            displayName: rule.displayName,
             description: rule.description,
             default: true,
         };

src/plugins/pinDms/index.tsx

@@ -48,11 +48,13 @@ export const settings = definePluginSettings({
     },
     canCollapseDmSection: {
         type: OptionType.BOOLEAN,
+        displayName: "Can Collapse DM Section",
         description: "Allow uncategorised DMs section to be collapsable",
         default: false
     },
     dmSectionCollapsed: {
         type: OptionType.BOOLEAN,
+        displayName: "DM Section Collapsed",
         description: "Collapse DM section",
         default: false,
         hidden: true

src/plugins/replaceGoogleSearch/index.tsx

@@ -36,6 +36,7 @@ const settings = definePluginSettings({
         placeholder: "Google"
     },
     customEngineURL: {
+        displayName: "Custom Engine URL",
         description: "The URL of your Engine",
         type: OptionType.STRING,
         placeholder: "https://google.com/search?q="

src/plugins/serverListIndicators/index.tsx

@@ -34,7 +34,7 @@ const UserGuildJoinRequestStore = findStoreLazy("UserGuildJoinRequestStore");
 
 const settings = definePluginSettings({
     mode: {
-        description: "mode",
+        description: "Mode",
         type: OptionType.SELECT,
         options: [
             { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },

src/plugins/shikiCodeblocks.desktop/settings.ts

@@ -51,6 +51,7 @@ export const settings = definePluginSettings({
     },
     tryHljs: {
         type: OptionType.SELECT,
+        displayName: "Try Highlight.js",
         description: "Use the more lightweight default Discord highlighter and theme.",
         options: [
             {

src/plugins/silentTyping/index.tsx

@@ -136,7 +136,7 @@ export default definePlugin({
         options: [
             {
                 name: "value",
-                description: "whether to hide or not that you're typing (default is toggle)",
+                description: "Whether to hide or not that you're typing (default is toggle)",
                 required: false,
                 type: ApplicationCommandOptionType.BOOLEAN,
             },

src/plugins/translate/settings.tsx

@@ -61,6 +61,7 @@ export const settings = definePluginSettings({
     },
     deeplApiKey: {
         type: OptionType.STRING,
+        displayName: "DeepL API Key",
         description: "Your DeepL API key (from deepl.com/your-account)",
         default: ""
     },

src/plugins/viewIcons/index.tsx

@@ -62,6 +62,7 @@ const settings = definePluginSettings({
     },
     imgSize: {
         type: OptionType.SELECT,
+        displayName: "Image Size",
         description: "The image size to use",
         options: ["128", "256", "512", "1024", "2048", "4096"].map(n => ({ label: n, value: n, default: n === "1024" }))
     }

src/plugins/xsOverlay/index.tsx

@@ -103,6 +103,7 @@ const settings = definePluginSettings({
     },
     preferUDP: {
         type: OptionType.BOOLEAN,
+        displayName: "Prefer UDP",
         description: "Enable if you use an older build of XSOverlay unable to connect through websockets. This setting is ignored on web.",
         default: false,
         disabled: () => IS_WEB
@@ -119,11 +120,13 @@ const settings = definePluginSettings({
     },
     dmNotifications: {
         type: OptionType.BOOLEAN,
+        displayName: "DM Notifications",
         description: "Allow Direct Message notifications",
         default: true
     },
     groupDmNotifications: {
         type: OptionType.BOOLEAN,
+        displayName: "Group DM Notifications",
         description: "Allow Group DM notifications",
         default: true
     },

src/utils/types.ts

@@ -269,6 +269,7 @@ export type PluginSettingDef =
 
 export interface PluginSettingDefCommon extends IsDisabledOrHidden, IsValid<unknown> {
     description: string;
+    displayName?: string;
     placeholder?: string;
     onChange?(newValue: any): void;
     /**
@@ -352,7 +353,7 @@ export interface PluginSettingSliderDef extends PluginSettingDefCommon {
     stickToMarkers?: boolean;
 }
 
-export interface PluginSettingComponentDef extends Omit<PluginSettingDefCommon, "description" | "placeholder"> {
+export interface PluginSettingComponentDef extends Omit<PluginSettingDefCommon, "description" | "placeholder" | "displayName"> {
     type: OptionType.COMPONENT;
     component: (props: PluginSettingComponentProps) => ReactNode | Promise<ReactNode>;
     default?: any;