update version filter to supported in

Author: Efnilite

src/components/docs/DocsFilters.astro

@@ -6,8 +6,8 @@ import docs from "../../assets/docs/docs.json";
 const latest = docs.skriptVersion.match(/\d+\.(\d+)/)!!;
 const latestMinor = parseInt(latest[1], 10)!! - 1;
 
-let versions = [latest[0] + " (New)"];
-for (let i = latestMinor; i > latestMinor - 4; i--) {
+const versions = [];
+for (let i = latestMinor + 1; i > latestMinor - 4; i--) {
     versions.push(`2.${i}`);
 }
 
@@ -48,17 +48,22 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
 
     export interface Filter {
         types: string[];
-        versions: string[];
+        version: string;
     }
 
-    let filter: Filter = {types: [], versions: []}
+    let filter: Filter = {types: [], version: ""};
 
     function handleClick(button: HTMLButtonElement) {
+        const text = button.textContent!!.trim();
         const isType = button.getAttribute("data-type") === "type";
         if (isType) {
-            toggle(filter.types, button.textContent!!.trim());
+            toggle(filter.types, text);
         } else {
-            toggle(filter.versions, button.textContent!!.trim());
+            if (text === filter.version) {
+                filter.version = "";
+            } else {
+                filter.version = text;
+            } 
         }
 
         // update rest of buttons
@@ -68,7 +73,7 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
             if (button.getAttribute("data-type") === "type") {
                 match = filter.types.includes(button.textContent!!.trim());
             } else {
-                match = filter.versions.includes(button.textContent!!.trim());
+                match = filter.version === button.textContent!!.trim();
             }
 
             if (match) {
@@ -102,24 +107,31 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
 
                 element.classList.add("hidden-by-type");
             } else {
-                if (filter.versions.length === 0) {
+                if (filter.version === "") {
                     element.classList.remove("hidden-by-version");
                     return;
                 }
 
-                if (filter.versions.find(it => it.includes("New")) && element.getAttribute("data-new") === "true") {
+                if (filter.version.includes("New") && element.getAttribute("data-new") === "true") {
                     element.classList.remove("hidden-by-version");
                     return;
                 }
 
-                for (const v of filter.versions) {
-                    if (element.getAttribute("data-since")?.includes(v)) {
-                        element.classList.remove("hidden-by-version");
-                        return;
-                    }
+                const since = element.getAttribute("data-since");
+                if (since === null) {
+                    element.classList.remove("hidden-by-version");
+                    return;
                 }
 
-                element.classList.add("hidden-by-version");
+                const minor = parseInt(filter.version.match(/\d+\.(\d+)/)!![1], 10);
+                since.matchAll(/\d+\.(\d+)/g).forEach((match) => {
+                    const otherMinor = parseInt(match[1], 10);
+                
+                    if (otherMinor > minor) {
+                        element.classList.add("hidden-by-version");
+                        return;
+                    }
+                });
             }
         });
     }
@@ -169,7 +181,6 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
         filters.style.top = `${document.getElementById("nav")!!.offsetHeight}px`;   
     }
 
-
     updatePosition();
     window.addEventListener("DOMContentLoaded", () => {
         updatePosition();
@@ -214,9 +225,14 @@ for (let i = latestMinor; i > latestMinor - 4; i--) {
             )}
         </div>
 
-        <h3>Version</h3>
+        <h3>Supported in</h3>
         <div class="flex flex-wrap gap-2">
-            {versions.map(x => 
+            <button data-type="version" class="filter-button p-2 rounded-md text-center 
+                    bg-skript text-white font-bold
+                    hover:cursor-pointer hover:opacity-80 transition">
+                    {versions[0]}
+                </button>
+            {versions.slice(1).map(x => 
                 <button data-type="version" class="filter-button p-2 rounded-md text-center 
                     bg-l-bg-secondary dark:bg-d-bg-secondary 
                     hover:cursor-pointer hover:opacity-80 transition">