feat: Added Settings

Co-authored-by: Magix <[email protected]>

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "dev.wolfplugs.ClipsEnhanced",
   "name": "Clips Enhanced",
-  "description": "Gives u extra options to clips",
+  "description": "More options for Discord's clip system!",
   "author": {
     "name": "Wolfkid200444",
     "discordID": "347096063569559553",
@@ -15,6 +15,7 @@
   "license": "MIT",
   "type": "replugged-plugin",
   "renderer": "src/index.ts",
+  "plaintextPatches": "src/plainTextpatches.ts",
   "source": "https://github.com/WolfPlugs/ClipsEnhanced",
   "image": ["https://i.imgur.com/14CNs3a.png?CHANGE-THIS-URL"]
 }

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "plugin-template",
+  "name": "clips-enhanced",
   "version": "1.0.0",
-  "description": "A plugin template",
+  "description": "More options for Discord's clip system!",
   "engines": {
     "node": ">=18.0.0",
     "pnpm": ">=8.0.0"
@@ -24,6 +24,7 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^20.6.1",
+    "@types/react": "^18.2.42",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "eslint": "^8.49.0",

src/index.ts

@@ -1,26 +1,38 @@
-import { Injector, Logger, webpack } from "replugged";
+import { Injector, Logger, settings } from "replugged";
+import "./style.css"
 
 const inject = new Injector();
 const logger = Logger.plugin("Clips Enhanced");
 
-interface Option {
+export interface Option {
   value: number;
   label: string;
 }
 
-export async function start(): Promise<void> {
+export interface Options {
+  clipOptions: Option[];
+}
+
+export const setting = await settings.init("dev.wolfplugs.ClipsEnhanced", {
+  clipOptions: [
+    {
+      value: 300e3,
+      label: "5 minutes",
+    },
+  ],
+});
 
+export function start(): Promise<void> {
+  logger.log("Enabled custom clip settings.");
+  return new Promise(() => {});
 }
 
 export function stop(): void {
   inject.uninjectAll();
 }
 
 export function customOptions(): Option[] {
-  return [
-    {
-      value: 300e3,
-      label: "5 minutes"
-    }
-  ];
+  return setting.get("clipOptions");
 }
+
+export { Settings } from "./settings";

src/settings.tsx

@@ -1,46 +1,70 @@
-import { common, components, settings } from "replugged";
+import { common, components, settings, types } from "replugged";
+import { ReactElement } from "./type";
+import { setting } from ".";
 
 const { React } = common;
-const { Modal: { ModalRoot, ModalHeader, ModalCloseButton, ModalFooter, ModalContent }, Text, TextInput } = components;
+const { Modal: { ModalRoot, ModalHeader, ModalCloseButton, ModalFooter, ModalContent }, Text, TextInput, Select, Button } = components;
 
-function parseTime(time: string, unit: string) {
+function parseTime(time: string, unit: string): number {
   const rawTime = parseInt(time);
   switch (unit) {
-    case "seconds":
+    case "Seconds":
       return rawTime * 1e3;
-    case "minutes":
+    case "Minutes":
       return rawTime * 60e3;
-    case "hours":
+    case "Hours":
       return rawTime * 3600e3;
+    default:
+      return rawTime;
   }
 }
 
-function setClipTime(time: string, unit: string): void {
-
-}
-
-export default (props) => {
+const Units = ["Seconds", "Minutes", "Hours"];
 
+export const Settings = (): ReactElement => {
   const [time, setTime] = React.useState<string>();
   const [unit, setUnit] = React.useState<string>();
 
-
+  const formatedTime = React.useCallback(() => {
+    const time5 = parseTime(time, unit);
+    setting.set("clipOptions", [
+      { value: time5, 
+        label: `${time} ${unit}`
+      }
+    ]);
+  }, [time, unit])
 
   return (
-    <ModalRoot {...props}>
-      <ModalHeader>
+    <div>
+      <ModalHeader className="title-header">
         <Text tag="h3">Set Time</Text>
       </ModalHeader>
       <ModalContent>
         <TextInput
           value={time}
           placeholder="Time"
-          onChange={(value) => setTime(value)}
-          style={{ marginBottom: "10pc"}}
+          onChange={(value: string) => setTime(value)}
+          style={{ marginBottom: "10pc" }}
         />
-
-
-      <ModalContent/>
-    <ModalRoot/>
+        <Select
+          options={
+            Units.map((unit) => ({
+              label: unit,
+              value: unit,
+            }))
+          }
+          isSelected={(value: string) => value === unit}
+          select={(value: string) => setUnit(value)}
+          serialize={(value: string) => value}
+        />
+      </ModalContent>
+      <ModalFooter>
+        <Button
+          onClick={() => {
+            formatedTime();
+          }}
+        />
+      </ModalFooter>
+    </div>
   )
 }

src/style.css

@@ -0,0 +1,5 @@
+.title-header {
+  margin-bottom: 10px;
+  padding: 16px 16px 10px 16px;
+}
+

src/type.d.ts

@@ -0,0 +1 @@
+export { ReactElement } from "react"