CustomVoiceFilter: Refactored UIs

src/plugins/customVoiceFilter/CreateVoiceFilterModal.tsx

@@ -11,6 +11,7 @@ import { JSX } from "react";
 
 import { voices } from ".";
 import { openErrorModal } from "./ErrorModal";
+import { openHelpModal } from "./HelpModal";
 import { IVoiceFilter, useVoiceFiltersStore } from "./index";
 const requiredFields = ["name", "iconURL", "onnxFileUrl", "previewSoundURLs"] as const satisfies readonly (keyof IVoiceFilter)[];
 
@@ -102,8 +103,9 @@ function CreateVoiceFilterModal({ modalProps, close, defaultValue }: CreateVoice
             </ModalContent>
             <ModalFooter>
                 <Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
-                    <Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
+                    <Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>How to create a voicepack?</Button>
                     <Button color={Button.Colors.GREEN} onClick={submit}>{voiceFilter.id ? "Save" : "Create"}</Button>
+                    <Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
                 </Flex>
             </ModalFooter>
         </ModalRoot>

src/plugins/customVoiceFilter/SettingsModal.tsx

@@ -6,12 +6,13 @@
 
 import { Margins } from "@utils/margins";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { PluginNative } from "@utils/types";
 import { Button, Flex, Forms, Slider } from "@webpack/common";
 import { JSX } from "react";
 
-import plugin, { settings } from "./index";
+import plugin, { settings, useVoiceFiltersStore } from "./index";
-
 
+const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
 export function openSettingsModal(): string {
     const key = openModal(modalProps => (
         <SettingsModal modalProps={modalProps} close={() => closeModal(key)} />
@@ -24,12 +25,16 @@ interface SettingsModalProps {
     close: () => void;
 }
 
+function openModelFolder() {
+    const { modulePath } = useVoiceFiltersStore.getState();
+    Native.openFolder(modulePath);
+}
 
 //  Create Voice Filter Modal
 function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
     const settingsState = settings.use();
     const { settings: { def } } = plugin;
-
+    const { deleteAll, exportVoiceFilters, importVoiceFilters } = useVoiceFiltersStore();
     return (
         <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
             <ModalHeader>
@@ -66,6 +71,16 @@ function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
                             stickToMarkers={true}
                         />
                     </Forms.FormSection>
+                    <Forms.FormSection>
+                        <Forms.FormTitle>Voicepacks:</Forms.FormTitle>
+                        <Forms.FormText type="description">Here you can manage your voicepacks.</Forms.FormText>
+                        <Flex style={{ gap: "0.5rem" }}>
+                            <Button onClick={deleteAll} color={Button.Colors.RED}>Delete all voicepacks</Button>
+                            <Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Models Folder</Button>
+                            <Button onClick={exportVoiceFilters} color={Button.Colors.GREEN}>Export</Button>
+                            <Button onClick={importVoiceFilters} color={Button.Colors.GREEN}>Import</Button>
+                        </Flex>
+                    </Forms.FormSection>
                 </Flex>
             </ModalContent>
             <ModalFooter>

src/plugins/customVoiceFilter/VoiceFiltersModal.tsx

@@ -11,7 +11,6 @@ import { Button, Flex, Forms, Text, TextInput, Tooltip, useEffect, useState } fr
 import { JSX } from "react";
 
 import { openCreateVoiceModal } from "./CreateVoiceFilterModal";
-import { openHelpModal } from "./HelpModal";
 import { DownloadIcon, DownloadingIcon, PauseIcon, PlayIcon, RefreshIcon, TrashIcon } from "./Icons";
 import { downloadCustomVoiceModel, getClient, IVoiceFilter, useVoiceFiltersStore, VoiceFilterStyles } from "./index";
 import { openSettingsModal } from "./SettingsModal";
@@ -20,11 +19,6 @@ import { openWikiHomeModal } from "./WikiHomeModal";
 
 const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
 
-function openModelFolder() {
-    const { modulePath } = useVoiceFiltersStore.getState();
-    const modelFolder = Native.openFolder(modulePath);
-}
-
 export function openVoiceFiltersModal(): string {
     const key = openModal(modalProps => (
         <VoiceFiltersModal
@@ -47,7 +41,7 @@ interface VoiceFiltersModalProps {
 
 function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps): JSX.Element {
     const [url, setUrl] = useState("");
-    const { downloadVoicepack, deleteAll, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
+    const { downloadVoicepack, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
     const { client } = getClient();
     const voiceComponents = Object.values(voiceFilters).map(voice =>
         <VoiceFilter {...voice} key={voice.id} />
@@ -64,6 +58,7 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
             <ModalContent className="vc-voice-filters-modal">
                 <Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
                     <Text>Download a voicepack from a url or paste a voicepack data here:</Text>
+                    <Flex style={{ display: "grid", gridTemplateColumns: "89% 10%", gap: "0.5rem" }}>
                         <TextInput
                             value={url}
                             placeholder="( e.g. https://fox3000foxy.com/voicepacks/agents.json )"
@@ -71,13 +66,7 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
                             onKeyDown={e => { if (e.key === "Enter") downloadVoicepack(url); }}
                             style={{ width: "100%" }}
                         />
-                    <Flex style={{ gap: "0.5rem" }}>
+                        <Button onClick={() => downloadVoicepack(url || "https://fox3000foxy.com/voicepacks/agents.json")}>Download</Button>
-                        <Button onClick={() => downloadVoicepack(url)}>Download</Button>
-                        <Button onClick={deleteAll} color={Button.Colors.RED}>Delete all</Button>
-                        <Button onClick={exportVoiceFilters} color={Button.Colors.TRANSPARENT}>Export</Button>
-                        <Button onClick={importVoiceFilters} color={Button.Colors.TRANSPARENT}>Import</Button>
-                        <Button onClick={() => downloadVoicepack("https://fox3000foxy.com/voicepacks/agents.json")} color={Button.Colors.TRANSPARENT}>Download Default</Button>
-                        <Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Model Folder</Button>
                     </Flex>
 
                     <Text>Voice filters list:</Text>
@@ -94,7 +83,6 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
             <ModalFooter>
                 <Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
                     <Button color={Button.Colors.TRANSPARENT} onClick={openSettingsModal}>Settings</Button>
-                    <Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>Learn how to build your own voicepack</Button>
                     <Button color={Button.Colors.TRANSPARENT} onClick={() => openCreateVoiceModal()}>Create Voicepack</Button>
                     <Button color={Button.Colors.GREEN} onClick={openWikiHomeModal}>Wiki</Button>
                     <Button color={Button.Colors.RED} onClick={accept}>Close</Button>