stuff

src/components/PluginSettings/PluginModal.tsx

@@ -83,7 +83,7 @@ const Components: Record<OptionType, React.ComponentType<ISettingElementProps<an
     [OptionType.SELECT]: SettingSelectComponent,
     [OptionType.SLIDER]: SettingSliderComponent,
     [OptionType.COMPONENT]: SettingCustomComponent,
-    [OptionType.LIST]: SettingListComponent,
+    [OptionType.ARRAY]: SettingListComponent,
     [OptionType.USERS]: SettingListComponent,
     [OptionType.CHANNELS]: SettingListComponent,
     [OptionType.GUILDS]: SettingListComponent

src/components/PluginSettings/components/SettingListComponent.tsx

@@ -22,7 +22,7 @@ import { Margins } from "@utils/margins";
 import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { OptionType, PluginOptionList } from "@utils/types";
 import { findComponentByCodeLazy } from "@webpack";
-import { Button,ChannelStore, Forms, GuildStore, React, useState } from "@webpack/common";
+import { Button, ChannelStore, Forms, GuildStore, React, TextInput, useState } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 import { Channel } from "discord-types/general";
@@ -35,6 +35,13 @@ const CloseIcon = () => {
     </svg>;
 };
 
+const CheckMarkIcon = () => {
+    return <svg width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M21.7 5.3a1 1 0 0 1 0 1.4l-12 12a1 1 0 0 1-1.4 0l-6-6a1 1 0 1 1 1.4-1.4L9 16.58l11.3-11.3a1 1 0 0 1 1.4 0Z"></path>
+    </svg>;
+};
+
+
 interface UserMentionComponentProps {
     id: string;
     channelId: string;
@@ -52,30 +59,21 @@ export function SettingListComponent({
     const [error, setError] = useState<string | null>(null);
 
     const [items, setItems] = useState<string[]>([]);
-    const [newItem, setNewItem] = useState<string>("");
-
-    const addItem = () => {
-        if (newItem.trim() !== "") {
-            setItems([...items, newItem]);
-            setNewItem("");
-        }
-        pluginSettings[id] = items;
-    };
 
     if (items.length === 0 && pluginSettings[id].length !== 0) {
         setItems(pluginSettings[id]);
     }
 
     const removeItem = (index: number) => {
+        if (items.length === 1) {
+            setItems([]);
+            pluginSettings[id] = [];
+            return;
+        }
         setItems(items.filter((_, i) => i !== index));
         pluginSettings[id] = items;
     };
 
-
-    function handleChange(newValue) {
-        onChange(newValue);
-    }
-
     function wrapChannel(id: string) {
         const channel = ChannelStore.getChannel(id) as Channel;
         if (!channel) {
@@ -84,48 +82,86 @@ export function SettingListComponent({
         return (GuildStore.getGuild(channel.guild_id)?.name ?? "Unknown Guild") + " - " + channel.name;
     }
 
+    /* Pseudocode for handling submit */
+    function handleSubmit() {
+        // Handle the submit action for the specific item
+        // This could involve updating the state, making an API call, etc.
+        // Clear the input field after submission
+        const inputElement = document.getElementById(`vc-plugin-modal-input-${option.type === OptionType.CHANNELS ? "channel" : option.type === OptionType.GUILDS ? "guild" : option.type === OptionType.USERS ? "user" : "string"}`);
+        if (!inputElement || inputElement.value === "") {
+            return;
+        }
+        // TODO add searching for users, channels, and guilds lol
+        setItems([...items, inputElement.value]);
+        pluginSettings[id] = items;
+        inputElement.value = "";
+    }
+
+
     // FIXME make channels and guilds nicer!
+    // TODO make string type work
     return (
         <Forms.FormSection>
             <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText>
             <ErrorBoundary noop>
-                {items.map((item, index) => (
+                <React.Fragment>
-                    <React.Fragment key={`${item}-${index}`}>
+                    {items.map((item, index) => (
-                        <Flex
+                            <Flex
-                            flexDirection="row"
+                                flexDirection="row"
-                            style={{
+                                style={{
-                                gap: "1px",
+                                    gap: "1px",
-                            }}
+                                }}
-                        >
-                            {option.type === OptionType.USERS ? (
-                                <UserMentionComponent
-                                    userId={item}
-                                    className="mention"
-                                />
-                            ) : option.type === OptionType.CHANNELS ? (
-                                <span style={{ color: "white" }}>{wrapChannel(item)}</span>
-                            ) : option.type === OptionType.GUILDS ? (
-                                <span style={{ color: "white" }}>
-                                    {GuildStore.getGuild(item)?.name || "Unknown Guild"}
-                                </span>
-                                // TODO add logo to guild and channel?
-                            ) : (
-                                <span>{item}</span>
-                            )}
-                            <Button
-                                size={Button.Sizes.MIN}
-                                onClick={() => removeItem(index)}
-                                style={
-                                    { background: "none", }
-                                }
                             >
-                                <CloseIcon />
+                                {option.type === OptionType.USERS ? (
-                            </Button>
+                                    <UserMentionComponent
+                                        userId={item}
+                                        className="mention"
+                                    />
+                                ) : option.type === OptionType.CHANNELS ? (
+                                    <span style={{ color: "white" }}>{wrapChannel(item)}</span>
+                                ) : option.type === OptionType.GUILDS ? (
+                                    <span style={{ color: "white" }}>
+                                        {GuildStore.getGuild(item)?.name || "Unknown Guild"}
+                                    </span>
+                                    // TODO add logo to guild and channel?
+                                ) : (
+                                    <span style={{ color: "white" }}>{item}</span>
+                                )}
+                                <Button
+                                    size={Button.Sizes.MIN}
+                                    onClick={() => removeItem(index)}
+                                    style={
+                                        { background: "none", }
+                                    }
+                                >
+                                    <CloseIcon/>
+                                </Button>
                         </Flex>
-                    </React.Fragment>
+                    ))}
-                ))}
+                            <Flex
-
+                                flexDirection="row"
+                                style={{
+                                    gap: "5px",
+                                    marginTop: "10px",
+                                }}
+                            >
+                                {/* Add a single input field */}
+                                <TextInput
+                                    type="text"
+                                    placeholder="Add Item"
+                                    id={`vc-plugin-modal-input-${option.type === OptionType.CHANNELS ? "channel" : option.type === OptionType.GUILDS ? "guild" : option.type === OptionType.USERS ? "user" : "string"}`}
+                                />
+                                {/* Add a submit button */}
+                                <Button
+                                    size={Button.Sizes.MIN}
+                                    onClick={handleSubmit}
+                                    style={{ background: "none" }}
+                                >
+                                    <CheckMarkIcon/>
+                                </Button>
+                            </Flex>
+                </React.Fragment>
             </ErrorBoundary>
 
 

src/plugins/loadingQuotes/index.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { definePluginSettings } from "@api/Settings";
+import { definePluginSettings, migrateSettingsToArrays } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
@@ -25,6 +25,8 @@ import presetQuotesText from "file://quotes.txt";
 const presetQuotes = presetQuotesText.split("\n").map(quote => /^\s*[^#\s]/.test(quote) && quote.trim()).filter(Boolean) as string[];
 const noQuotesQuote = "Did you really disable all loading quotes? What a buffoon you are...";
 
+migrateSettingsToArrays("LoadingQuotes", ["additionalQuotes"], "|");
+
 const settings = definePluginSettings({
     replaceEvents: {
         description: "Should this plugin also apply during events with special event themed quotes? (e.g. Halloween)",
@@ -42,14 +44,8 @@ const settings = definePluginSettings({
         default: false
     },
     additionalQuotes: {
-        description: "Additional custom quotes to possibly appear, separated by the below delimiter",
+        description: "Additional custom quotes to possibly appear",
-        type: OptionType.STRING,
+        type: OptionType.ARRAY,
-        default: "",
-    },
-    additionalQuotesDelimiter: {
-        description: "Delimiter for additional quotes",
-        type: OptionType.STRING,
-        default: "|",
     },
 });
 
@@ -79,16 +75,15 @@ export default definePlugin({
 
     mutateQuotes(quotes: string[]) {
         try {
-            const { enableDiscordPresetQuotes, additionalQuotes, additionalQuotesDelimiter, enablePluginPresetQuotes } = settings.store;
+            const { enableDiscordPresetQuotes, additionalQuotes, enablePluginPresetQuotes } = settings.store;
 
             if (!enableDiscordPresetQuotes)
                 quotes.length = 0;
 
-
             if (enablePluginPresetQuotes)
                 quotes.push(...presetQuotes);
 
-            quotes.push(...additionalQuotes.split(additionalQuotesDelimiter).filter(Boolean));
+            quotes.push(...additionalQuotes);
 
             if (!quotes.length)
                 quotes.push(noQuotesQuote);

src/plugins/textReplace/index.tsx

@@ -72,12 +72,12 @@ const settings = definePluginSettings({
         }
     },
     stringRules: {
-        type: OptionType.LIST,
+        type: OptionType.ARRAY,
         hidden: true,
         description: ""
     },
     regexRules: {
-        type: OptionType.LIST,
+        type: OptionType.ARRAY,
         hidden: true,
         description: ""
     },

src/utils/types.ts

@@ -167,7 +167,7 @@ export const enum OptionType {
     SELECT,
     SLIDER,
     COMPONENT,
-    LIST,
+    ARRAY,
     USERS, // List of users
     CHANNELS, // List of channels
     GUILDS, // List of guilds
@@ -265,7 +265,7 @@ export interface PluginSettingSliderDef {
 }
 
 export interface PluginSettingListDef{
-    type: OptionType.LIST | OptionType.CHANNELS | OptionType.GUILDS | OptionType.USERS;
+    type: OptionType.ARRAY | OptionType.CHANNELS | OptionType.GUILDS | OptionType.USERS;
     popoutText?: string;
     hidePopout?: boolean;
 }
@@ -305,7 +305,7 @@ type PluginSettingType<O extends PluginSettingDef> = O extends PluginSettingStri
     O extends PluginSettingComponentDef ? any :
     O extends PluginSettingListDef ? any[] :
     never;
-type PluginSettingDefaultType<O extends PluginSettingDef> = O extends PluginSettingSelectDef ? (
+type PluginSettingDefaultType<O extends PluginSettingDef> = O extends PluginSettingListDef ? any[] : O extends PluginSettingSelectDef ? (
     O["options"] extends { default?: boolean; }[] ? O["options"][number]["value"] : undefined
 ) : O extends { default: infer T; } ? T : undefined;