Custom explore redirect

extras/popup/popup.css

@@ -470,11 +470,16 @@ span.new-feature-tag.beta {
 
 .option-selection {
   text-align: right;
-  width: 100%;
+  width: calc(100% - 1rem);
+  display: flex;
+  overflow-wrap: break-word;
+  flex-wrap: wrap;
+  border: 1.5px solid var(--feature-input-bg);
+  border-radius: .25rem;
+  overflow: hidden;
 }
 
 .option-selection span {
-  border: 1.5px solid var(--feature-input-bg);
   padding: .25rem;
   padding-left: .5rem;
   padding-right: .5rem;
@@ -483,20 +488,24 @@ span.new-feature-tag.beta {
   background-color: transparent;
   color: var(--secondary-color);
   transition: background-color .3s, border .3s, color .3s;
+  display: inline-block;
+    word-break: break-word;
+    white-space: nowrap;
+    flex: 1 0 auto;
+    text-align: center;
+    border-inline-end: 1.5px solid var(--feature-input-bg);
+}
+
+.option label {
+  margin-right: 1rem;
 }
 
 .option-selection span.option-selected {
   background-color: var(--theme);
   color: white;
-  border: 1.5px solid var(--theme);
-}
-
-.option-selection span:first-child {
-  border-top-left-radius: .25rem;
-  border-bottom-left-radius: .25rem;
+  border-inline-end: 1.5px solid transparent;
 }
 
 .option-selection span:last-child {
-  border-top-right-radius: .25rem;
-  border-bottom-right-radius: .25rem;
-}
+  border-inline-end: none;
+}

extras/style.css

@@ -849,11 +849,16 @@ body {
 
 .option-selection {
   text-align: right;
-  width: 100%;
+  width: calc(100% - 1rem);
+  display: flex;
+  overflow-wrap: break-word;
+  flex-wrap: wrap;
+  border: 1.5px solid var(--feature-input-bg);
+  border-radius: .25rem;
+  overflow: hidden;
 }
 
 .option-selection span {
-  border: 1.5px solid var(--feature-input-bg);
   padding: .25rem;
   padding-left: .5rem;
   padding-right: .5rem;
@@ -862,20 +867,24 @@ body {
   background-color: transparent;
   color: var(--secondary-color);
   transition: background-color .3s, border .3s, color .3s;
+  display: inline-block;
+    word-break: break-word;
+    white-space: nowrap;
+    flex: 1 0 auto;
+    text-align: center;
+    border-inline-end: 1.5px solid var(--feature-input-bg);
+}
+
+.option label {
+  margin-right: 1rem;
 }
 
 .option-selection span.option-selected {
   background-color: var(--theme);
   color: white;
-  border: 1.5px solid var(--theme);
-}
-
-.option-selection span:first-child {
-  border-top-left-radius: .25rem;
-  border-bottom-left-radius: .25rem;
+  border-inline-end: 1.5px solid transparent;
 }
 
 .option-selection span:last-child {
-  border-top-right-radius: .25rem;
-  border-bottom-right-radius: .25rem;
+  border-inline-end: none;
 }

features/custom-explore/data.json

@@ -0,0 +1,65 @@
+{
+    "title": "Custom Explore Redirect",
+    "description": "Automatically redirect to a specific tab on the Explore page.",
+    "credits": [
+        {
+            "username": "ItsThatKittyDragon",
+            "url": "https://scratch.mit.edu/users/ItsThatKittyDragon/"
+        },
+        {
+            "username": "MaterArc",
+            "url": "https://scratch.mit.edu/users/MaterArc/"
+        },
+         {
+            "username": "rgantzos",
+            "url": "https://scratch.mit.edu/users/rgantzos/"
+        }
+    ],
+    "type": [
+        "Website"
+    ],
+    "tags": [
+        "New",
+        "Featured"
+    ],
+    "scripts": [
+        {
+            "file": "script.js",
+            "runOn": "/*"
+        }
+    ],
+    "dynamic": true,
+    "options": [
+        {
+            "id": "custom-explore-tab",
+            "name": "Tab",
+            "type": 4,
+            "options": [
+                {
+                    "name": "Animations",
+                    "value": "animations"
+                },
+                {
+                    "name": "Art",
+                    "value": "art"
+                },
+                {
+                    "name": "Games",
+                    "value": "games"
+                },
+                {
+                    "name": "Music",
+                    "value": "music"
+                },
+                 {
+                    "name": "Stories",
+                    "value": "stories"
+                },
+                {
+                    "name": "Tutorials",
+                    "value": "tutorials"
+                }
+            ]
+        }
+    ]
+}

features/custom-explore/script.js

@@ -0,0 +1,24 @@
+export default async function({ feature, console }) {
+    let ELEMENTS = []
+    let type = feature.settings.get("custom-explore-tab") || "Animations"
+
+    ScratchTools.waitForElements("a[href='/explore/projects/'], a[href='/explore/projects'], a[href='/explore/projects/all'], a[href='/explore/projects/all/']", function(a) {
+        if (a.parentElement.className.includes("sub-nav categories")) return;
+        ELEMENTS.push(a)
+
+        a.href = feature.self.enabled ? `/explore/projects/${type.toLowerCase()}/` : "/explore/projects/"
+    })
+
+    function updateRedirects() {
+        for (var i in ELEMENTS) {
+            ELEMENTS[i].href = feature.self.enabled ? `/explore/projects/${type.toLowerCase()}/` : "/explore/projects/"
+        }
+    }
+
+    feature.addEventListener("disabled", updateRedirects)
+    feature.addEventListener("enabled", updateRedirects)
+    feature.settings.addEventListener("changed", function({ value }) {
+        type = value
+        updateRedirects()
+    })
+}

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "custom-explore",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "stage-in-spritepane",