Filters Redesign (#658)

* Add XCheckboxFilter

* Fix madara typo

* Change the branch name in config

* Add typing for madara popoularnovels filters

* Add preview and refactor PluginWrapper

* Add preview HTML sanitize and other improv.

* Web improvements + sanitizeHTML

* Add dark mode

* Add git run less to compile less

* Add less.js to remove the need for compiling less

plugins/english/pandaMTL.ts

@@ -1,6 +1,6 @@
 import { load as parseHTML } from "cheerio";
 import { fetchApi, fetchFile } from "@libs/fetch";
-import { Filter, FilterInputs } from "@libs/filterInputs";
+import { FilterTypes, Filters } from "@libs/filterInputs";
 import { Plugin } from "@typings/plugin";
 
 class PandaMTL implements Plugin.PluginBase {
@@ -11,26 +11,28 @@ class PandaMTL implements Plugin.PluginBase {
     version = "1.0.0";
     userAgent = "";
     cookieString = "";
-    async popularNovels(pageNo: number, {filters}: Plugin.PopularNovelsOptions): Promise<Plugin.NovelItem[]> {
+    async popularNovels(
+        pageNo: number,
+        { filters }: Plugin.PopularNovelsOptions<typeof this.filters>
+    ): Promise<Plugin.NovelItem[]> {
         let link = `${this.site}series/?page=${pageNo}`;
 
-        if (filters) {
-            if (Array.isArray(filters.genres) && filters.genres.length) {
-                link += filters.genres.map((i) => `&genre[]=${i}`).join("");
-            }
-
-            if (Array.isArray(filters.type) && filters.type.length)
-                link += filters.type.map((i) => `&lang[]=${i}`).join("");
+        if (filters.genres.value.length) {
+            link += filters.genres.value.map((i) => `&genre[]=${i}`).join("");
         }
+
+        if (filters.type.value.length)
+            link += filters.type.value.map((i) => `&lang[]=${i}`).join("");
+
         link += "&status=" + (filters?.status ? filters.status : "");
 
         link += "&order=" + (filters?.order ? filters.order : "popular");
 
         const headers = new Headers();
-        if(this.cookieString){
+        if (this.cookieString) {
             headers.append("cookie", this.cookieString);
         }
-        const body = await fetchApi(link, {headers}).then((result) =>
+        const body = await fetchApi(link, { headers }).then((result) =>
             result.text()
         );
 
@@ -60,10 +62,10 @@ class PandaMTL implements Plugin.PluginBase {
     async parseNovelAndChapters(novelUrl: string): Promise<Plugin.SourceNovel> {
         const url = novelUrl;
         const headers = new Headers();
-        if(this.cookieString){
+        if (this.cookieString) {
             headers.append("cookie", this.cookieString);
         }
-        const result = await fetchApi(url, {headers});
+        const result = await fetchApi(url, { headers });
         const body = await result.text();
 
         let loadedCheerio = parseHTML(body);
@@ -136,10 +138,10 @@ class PandaMTL implements Plugin.PluginBase {
     }
     async parseChapter(chapterUrl: string): Promise<string> {
         const headers = new Headers();
-        if(this.cookieString){
+        if (this.cookieString) {
             headers.append("cookie", this.cookieString);
         }
-        const result = await fetchApi(chapterUrl, {headers});
+        const result = await fetchApi(chapterUrl, { headers });
         const body = await result.text();
 
         const loadedCheerio = parseHTML(body);
@@ -148,13 +150,16 @@ class PandaMTL implements Plugin.PluginBase {
 
         return chapterText;
     }
-    async searchNovels(searchTerm: string, pageNo?: number | undefined): Promise<Plugin.NovelItem[]> {
+    async searchNovels(
+        searchTerm: string,
+        pageNo?: number | undefined
+    ): Promise<Plugin.NovelItem[]> {
         const url = `${this.site}?s=${searchTerm}`;
         const headers = new Headers();
-        if(this.cookieString){
+        if (this.cookieString) {
             headers.append("cookie", this.cookieString);
         }
-        const result = await fetchApi(url, {headers});
+        const result = await fetchApi(url, { headers });
         const body = await result.text();
 
         const loadedCheerio = parseHTML(body);
@@ -182,12 +187,11 @@ class PandaMTL implements Plugin.PluginBase {
         return await fetchFile(url);
     }
 
-
-    filters = [
-        {
-            key: "order",
+    filters = {
+        order: {
             label: "Sort By",
-            values: [
+            value: "",
+            options: [
                 { label: "Default", value: "" },
 
                 { label: "A-Z", value: "title" },
@@ -200,12 +204,12 @@ class PandaMTL implements Plugin.PluginBase {
 
                 { label: "Popular", value: "popular" },
             ],
-            inputType: FilterInputs.Picker,
+            type: FilterTypes.Picker,
         },
-        {
-            key: "status",
+        status: {
             label: "Status",
-            values: [
+            value: "",
+            options: [
                 { label: "All", value: "" },
 
                 { label: "Ongoing", value: "ongoing" },
@@ -214,22 +218,22 @@ class PandaMTL implements Plugin.PluginBase {
 
                 { label: "Completed", value: "completed" },
             ],
-            inputType: FilterInputs.Picker,
+            type: FilterTypes.Picker,
         },
-        {
-            key: "type",
+        type: {
+            value: [],
             label: "Type",
-            values: [
+            options: [
                 { label: "Light Novel (KR)", value: "light-novel-kr" },
 
                 { label: "Web Novel", value: "web-novel" },
             ],
-            inputType: FilterInputs.Checkbox,
+            type: FilterTypes.CheckboxGroup,
         },
-        {
-            key: "genres",
+        genres: {
             label: "Genres",
-            values: [
+            value: [],
+            options: [
                 { label: "Action", value: "action" },
 
                 { label: "Adult", value: "adult" },
@@ -268,9 +272,9 @@ class PandaMTL implements Plugin.PluginBase {
 
                 { label: "Tragedy", value: "tragedy" },
             ],
-            inputType: FilterInputs.Checkbox,
+            type: FilterTypes.CheckboxGroup,
         },
-    ];
+    } satisfies Filters;
 }
 
-export default new PandaMTL();
+export default new PandaMTL();