feat: add more module filters (spicetify#5)

* feat: add show/hide lib modules toggle * feat: lib tag * feat: add enabled filter --------- Co-authored-by: Delusoire <[email protected]>
harbassan · Mar 23, 2024 · 34c3ae4 · 34c3ae4
1 parent 7732dc8
commit 34c3ae4
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 33 deletions.
diff --git a/src/pages/Marketplace.js b/src/pages/Marketplace.js
@@ -6,6 +6,7 @@ import { Module } from "/hooks/module.js";
 import { fetchJSON } from "/hooks/util.js";
 import ModuleCard from "../components/ModuleCard/index.js";
 import { settingsButton } from "../../index.js";
+import { CONFIG } from "../settings.js";
 import { getProp, useChipFilter, useDropdown, useSearchBar } from "/modules/Delusoire/stdlib/lib/components/index.js";
 const cachedMetaURLs = new Map();
 export const fetchMetaURLSync = (metaURL)=>cachedMetaURLs.get(metaURL);
@@ -98,34 +99,63 @@ const SortFns = {
     "z-a": (a, b)=>a.name > b.name ? 1 : b.name > a.name ? -1 : 0,
     random: ()=>Math.random() - 0.5
 };
-const filters = {
-    "": undefined,
-    themes: {
-        "": t("filter.themes")
-    },
-    apps: {
-        "": t("filter.apps")
-    },
-    extensions: {
-        "": t("filter.extensions")
-    },
-    snippets: {
-        "": t("filter.snippets")
+const enabled = {
+    enabled: {
+        "": t("filter.enabled")
+    }
+};
+const getFilters = ()=>({
+        "": null,
+        themes: {
+            "": t("filter.themes"),
+            ...enabled
+        },
+        extensions: {
+            "": t("filter.extensions"),
+            ...enabled
+        },
+        apps: {
+            "": t("filter.apps"),
+            ...enabled
+        },
+        snippets: {
+            "": t("filter.snippets"),
+            ...enabled
+        },
+        libs: {
+            "": CONFIG.showLibs && t("filter.libs")
+        }
+    });
+const isModLib = (mod)=>_.intersection(mod.metadata.tags, [
+        "lib",
+        "npm",
+        "internal"
+    ]).length > 0;
+const enabledFn = {
+    enabled: {
+        "": (mod)=>Module.registry.get(mod.identifier).isEnabled()
     }
 };
 const filterFNs = {
-    "": ()=>true,
+    "": (mod)=>CONFIG.showLibs || !isModLib(mod),
     themes: {
-        "": (mod)=>mod.metadata.tags.includes("theme")
+        "": (mod)=>mod.metadata.tags.includes("theme"),
+        ...enabledFn
     },
     apps: {
-        "": (mod)=>mod.metadata.tags.includes("app")
+        "": (mod)=>mod.metadata.tags.includes("app"),
+        ...enabledFn
     },
     extensions: {
-        "": (mod)=>mod.metadata.tags.includes("extension")
+        "": (mod)=>mod.metadata.tags.includes("extension"),
+        ...enabledFn
     },
     snippets: {
-        "": (mod)=>mod.metadata.tags.includes("snippets")
+        "": (mod)=>mod.metadata.tags.includes("snippet"),
+        ...enabledFn
+    },
+    libs: {
+        "": isModLib
     }
 };
 export default function() {
@@ -138,7 +168,7 @@ export default function() {
         options: SortOptions
     });
     const sortFn = SortFns[sortOption];
-    const [chipFilter, selectedFilters] = useChipFilter(filters);
+    const [chipFilter, selectedFilters] = useChipFilter(getFilters());
     const selectedFilterFNs = selectedFilters.map(({ key })=>getProp(filterFNs, key));
     const identifiersToMetadataURLsLists = React.useMemo(()=>{
         const localModules = Module.getModules();

diff --git a/src/pages/Marketplace.tsx b/src/pages/Marketplace.tsx
@@ -6,6 +6,7 @@ import { type Metadata, Module } from "/hooks/module.js";
 import { fetchJSON } from "/hooks/util.js";
 import ModuleCard from "../components/ModuleCard/index.js";
 import { settingsButton } from "../../index.js";
+import { CONFIG } from "../settings.js";
 import { getProp, useChipFilter, useDropdown, useSearchBar } from "/modules/Delusoire/stdlib/lib/components/index.js";
 
 const cachedMetaURLs = new Map<string, Metadata>();
@@ -107,20 +108,27 @@ const SortFns: Record<keyof typeof SortOptions, (a: Metadata, b: Metadata) => nu
 	random: () => Math.random() - 0.5,
 };
 
-const filters = {
-	"": undefined,
-	themes: { "": t("filter.themes") },
-	apps: { "": t("filter.apps") },
-	extensions: { "": t("filter.extensions") },
-	snippets: { "": t("filter.snippets") },
-};
+const enabled = { enabled: { "": t("filter.enabled") } };
+
+const getFilters = () => ({
+	"": null,
+	themes: { "": t("filter.themes"), ...enabled },
+	extensions: { "": t("filter.extensions"), ...enabled },
+	apps: { "": t("filter.apps"), ...enabled },
+	snippets: { "": t("filter.snippets"), ...enabled },
+	libs: { "": CONFIG.showLibs && t("filter.libs") },
+});
+
+const isModLib = (mod: Metadata) => _.intersection(mod.metadata.tags, ["lib", "npm", "internal"]).length > 0;
+const enabledFn = { enabled: { "": mod => Module.registry.get(mod.identifier).isEnabled() } };
 
 const filterFNs = {
-	"": () => true,
-	themes: { "": mod => mod.metadata.tags.includes("theme") },
-	apps: { "": mod => mod.metadata.tags.includes("app") },
-	extensions: { "": mod => mod.metadata.tags.includes("extension") },
-	snippets: { "": mod => mod.metadata.tags.includes("snippets") },
+	"": mod => CONFIG.showLibs || !isModLib(mod),
+	themes: { "": mod => mod.metadata.tags.includes("theme"), ...enabledFn },
+	apps: { "": mod => mod.metadata.tags.includes("app"), ...enabledFn },
+	extensions: { "": mod => mod.metadata.tags.includes("extension"), ...enabledFn },
+	snippets: { "": mod => mod.metadata.tags.includes("snippet"), ...enabledFn },
+	libs: { "": isModLib },
 };
 
 export default function () {
@@ -131,7 +139,7 @@ export default function () {
 	const [sortbox, sortOption] = useDropdown({ options: SortOptions });
 	const sortFn = SortFns[sortOption];
 
-	const [chipFilter, selectedFilters] = useChipFilter(filters);
+	const [chipFilter, selectedFilters] = useChipFilter(getFilters());
 	const selectedFilterFNs = selectedFilters.map(({ key }) => getProp(filterFNs, key));
 
 	const identifiersToMetadataURLsLists = React.useMemo(() => {

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -27,7 +27,9 @@
 			"themes": "Themes",
 			"apps": "Apps",
 			"extensions": "Extensions",
-			"snippets": "Snippets"
+			"snippets": "Snippets",
+			"libs": "Libraries",
+			"enabled": "Enabled"
 		}
 	}
 }
diff --git a/src/settings.js b/src/settings.js
@@ -0,0 +1,5 @@
+import { settings } from "../index.js";
+export const CONFIG = settings.addToggle({
+    id: "showLibs",
+    desc: "Show Libraries"
+}, ()=>false).finalize().cfg;
diff --git a/src/settings.ts b/src/settings.ts
@@ -0,0 +1,3 @@
+import { settings } from "../index.js";
+
+export const CONFIG = settings.addToggle({ id: "showLibs", desc: "Show Libraries" }, () => false).finalize().cfg;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { settings } from "../index.js";

		export const CONFIG = settings.addToggle({ id: "showLibs", desc: "Show Libraries" }, () => false).finalize().cfg;