Extensions page improvements (#636)

* fix: auto fixed vulnerabilities

using npm audit fix

* feat: added basic filters to extensions page

* fix: removed 'Every language' notice

* feat: added search filter

* chore: edit NSFW content switch labels

* feat: display full language name in filters

* chore: use auto closing elements

* chore: made input clearable

* feat: added loading indicator

* style: prefer using curly braces

* chore: made languages filter placeholder more clear

* chore: improved loading indicator

* feat: added sorting

* chore: edit sort labels

.eslintrc.js

@@ -4,10 +4,7 @@ module.exports = {
 		es6: true,
 	},
 
-	extends: [
+	extends: ["vuepress", "prettier"],
-		"vuepress",
-		"prettier"
-	],
 
 	globals: {
 		Atomics: "readonly",
@@ -30,16 +27,11 @@ module.exports = {
 		"import/no-unresolved": [
 			2,
 			{
-				ignore: [
+				ignore: ["^@"],
-					"^@",
-				],
 			},
 		],
+		curly: ["error", "all"],
 	},
 
-	plugins: [
+	plugins: ["vue", "prettier", "markdown"],
-		"vue",
+};
-		"prettier",
-		"markdown",
-	],
-}

package-lock.json

@@ -1309,62 +1309,6 @@
 				"js-tokens": "^4.0.0"
 			}
 		},
-		"node_modules/@babel/highlight/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-		},
-		"node_modules/@babel/highlight/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-			"dependencies": {
-				"has-flag": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/@babel/parser": {
 			"version": "7.12.11",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
@@ -3415,43 +3359,6 @@
 				"upath": "^1.1.0"
 			}
 		},
-		"node_modules/@vuepress/shared-utils/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@vuepress/shared-utils/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@vuepress/shared-utils/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@vuepress/shared-utils/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-		},
 		"node_modules/@vuepress/shared-utils/node_modules/fs-extra": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -3465,14 +3372,6 @@
 				"node": ">=6 <7 || >=8"
 			}
 		},
-		"node_modules/@vuepress/shared-utils/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/@vuepress/shared-utils/node_modules/jsonfile": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -3481,17 +3380,6 @@
 				"graceful-fs": "^4.1.6"
 			}
 		},
-		"node_modules/@vuepress/shared-utils/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-			"dependencies": {
-				"has-flag": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/@vuepress/shared-utils/node_modules/universalify": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -9083,9 +8971,9 @@
 			}
 		},
 		"node_modules/hosted-git-info": {
-			"version": "2.8.8",
+			"version": "2.8.9",
-			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-			"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
 		},
 		"node_modules/hpack.js": {
 			"version": "2.1.6",
@@ -14300,9 +14188,9 @@
 			}
 		},
 		"node_modules/ssri": {
-			"version": "6.0.1",
+			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-			"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+			"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
 			"dependencies": {
 				"figgy-pudding": "^3.5.1"
 			}
@@ -16843,30 +16731,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/wrap-ansi/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/wrap-ansi/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/wrap-ansi/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-		},
 		"node_modules/wrap-ansi/node_modules/is-fullwidth-code-point": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -16946,9 +16810,9 @@
 			}
 		},
 		"node_modules/y18n": {
-			"version": "4.0.0",
+			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-			"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
 		},
 		"node_modules/yallist": {
 			"version": "2.1.2",
@@ -18292,52 +18156,6 @@
 				"@babel/helper-validator-identifier": "^7.10.4",
 				"chalk": "^2.0.0",
 				"js-tokens": "^4.0.0"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-					"requires": {
-						"color-convert": "^1.9.0"
-					}
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"color-convert": {
-					"version": "1.9.3",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-					"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-					"requires": {
-						"color-name": "1.1.3"
-					}
-				},
-				"color-name": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-					"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-				},
-				"has-flag": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-					"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-				},
-				"supports-color": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-					"requires": {
-						"has-flag": "^3.0.0"
-					}
-				}
 			}
 		},
 		"@babel/parser": {
@@ -20251,37 +20069,6 @@
 				"upath": "^1.1.0"
 			},
 			"dependencies": {
-				"ansi-styles": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-					"requires": {
-						"color-convert": "^1.9.0"
-					}
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"color-convert": {
-					"version": "1.9.3",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-					"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-					"requires": {
-						"color-name": "1.1.3"
-					}
-				},
-				"color-name": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-					"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-				},
 				"fs-extra": {
 					"version": "7.0.1",
 					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -20292,11 +20079,6 @@
 						"universalify": "^0.1.0"
 					}
 				},
-				"has-flag": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-					"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-				},
 				"jsonfile": {
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -20305,14 +20087,6 @@
 						"graceful-fs": "^4.1.6"
 					}
 				},
-				"supports-color": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-					"requires": {
-						"has-flag": "^3.0.0"
-					}
-				},
 				"universalify": {
 					"version": "0.1.2",
 					"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -24953,9 +24727,9 @@
 			}
 		},
 		"hosted-git-info": {
-			"version": "2.8.8",
+			"version": "2.8.9",
-			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-			"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
 		},
 		"hpack.js": {
 			"version": "2.1.6",
@@ -29241,9 +29015,9 @@
 			}
 		},
 		"ssri": {
-			"version": "6.0.1",
+			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-			"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+			"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
 			"requires": {
 				"figgy-pudding": "^3.5.1"
 			}
@@ -31380,27 +31154,6 @@
 					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
 					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
 				},
-				"ansi-styles": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-					"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-					"requires": {
-						"color-convert": "^1.9.0"
-					}
-				},
-				"color-convert": {
-					"version": "1.9.3",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-					"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-					"requires": {
-						"color-name": "1.1.3"
-					}
-				},
-				"color-name": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-					"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-				},
 				"is-fullwidth-code-point": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -31467,9 +31220,9 @@
 			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
 		},
 		"y18n": {
-			"version": "4.0.0",
+			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-			"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
 		},
 		"yallist": {
 			"version": "2.1.2",

src/.vuepress/components/ExtensionList.vue

@@ -1,16 +1,50 @@
 <template>
 	<div class="extension-list">
-		<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
+		<span class="filters-list">
+			<ElInput v-model="filters.search" placeholder="Search extensions by name..." clearable />
+
+			<ElSelect v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
+				<ElOption
+					v-for="[group] in extensions"
+					:key="group.lang"
+					:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
+					:value="group.lang"
+				/>
+			</ElSelect>
+
+			<div>
+				Sort by
+				<ElRadioGroup v-model="filters.sort">
+					<ElRadioButton label="Ascending"></ElRadioButton>
+					<ElRadioButton label="Descending"></ElRadioButton>
+				</ElRadioGroup>
+			</div>
+
+			<div>
+				Display extensions with NSFW content?
+				<ElRadioGroup v-model="filters.nsfw">
+					<ElRadioButton label="Yes"></ElRadioButton>
+					<ElRadioButton label="No"></ElRadioButton>
+					<ElRadioButton label="Don't care"></ElRadioButton>
+				</ElRadioGroup>
+			</div>
+		</span>
+
+		<div v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
+		<div v-for="extensionGroup in filteredExtensions" :key="extensionGroup[0].lang">
 			<h3>
-				{{
+				<span>
-					extensionGroup[0].lang === "en"
+					{{
-						? simpleLangName(extensionGroup[0].lang)
+						extensionGroup[0].lang === "en"
-						: langName(extensionGroup[0].lang)
+							? simpleLangName(extensionGroup[0].lang)
-				}}
+							: langName(extensionGroup[0].lang)
+					}}
+				</span>
+
 				<span class="extensions-total">
 					Total:
 					<span class="extensions-total-sum">
-						{{ extensions.reduce((sum, item) => sum + item.length, 0) }}
+						{{ filteredExtensions.reduce((sum, item) => sum + item.length, 0) }}
 					</span>
 				</span>
 			</h3>
@@ -59,9 +93,50 @@ export default {
 	data() {
 		return {
 			extensions: [],
+			filters: {
+				search: "",
+				lang: [],
+				nsfw: "Don't care",
+				sort: "Ascending",
+			},
+			loading: true,
 		};
 	},
 
+	computed: {
+		filteredExtensions() {
+			const { extensions, filters } = this;
+
+			const filtered = [];
+
+			for (const group of extensions) {
+				let filteredGroup = filters.lang.length ? (filters.lang.includes(group[0].lang) ? group : []) : group;
+
+				if (filters.search) {
+					filteredGroup = filteredGroup.filter((ext) =>
+						ext.name.toLowerCase().includes(filters.search.toLowerCase())
+					);
+				}
+
+				filteredGroup = filteredGroup.filter((ext) =>
+					filters.nsfw === "Don't care" ? true : ext.nsfw === (filters.nsfw === "Yes" ? 1 : 0)
+				);
+
+				if (filters.sort && filters.sort === "Descending") {
+					filteredGroup = filteredGroup.sort((a, b) => {
+						return a.name < b.name ? 1 : a.name > b.name ? -1 : 0;
+					});
+				}
+
+				if (filteredGroup.length) {
+					filtered.push(filteredGroup);
+				}
+			}
+
+			return filtered;
+		},
+	},
+
 	async beforeMount() {
 		const { data } = await axios.get(GITHUB_EXTENSION_JSON);
 		const values = Object.values(groupBy(data, "lang"));
@@ -89,6 +164,10 @@ export default {
 			return 0;
 		});
 		this.$data.extensions = values;
+
+		this.$nextTick(() => {
+			this.loading = false;
+		});
 	},
 
 	updated() {
@@ -118,6 +197,10 @@ export default {
 		&:not(:first-of-type)
 			.extensions-total
 				display none
+	.filters-list
+		display flex
+		flex-direction column
+		row-gap 1rem
 
 .extensions-total
 	float right

src/extensions/README.md

@@ -7,4 +7,5 @@ lang: en-US
 # Extensions
 
 List of available extensions to use with Tachiyomi, you can download them from here or from the app.
+
 <ExtensionList/>