version ordering and Flasher border

Author: bmorcelli

assets/js/catalog.js

@@ -1,4 +1,21 @@
 "use strict";
+const getPublishedTimestamp = (value) => {
+    if (!value) {
+        return Number.NEGATIVE_INFINITY;
+    }
+    const timestamp = Date.parse(value);
+    return Number.isNaN(timestamp) ? Number.NEGATIVE_INFINITY : timestamp;
+};
+const sortVersionsByPublishedDate = (versions) => {
+    return [...versions].sort((a, b) => {
+        const aTime = getPublishedTimestamp(a.published_at);
+        const bTime = getPublishedTimestamp(b.published_at);
+        if (aTime !== bTime) {
+            return bTime - aTime;
+        }
+        return 0;
+    });
+};
 const API_URL = "https://api.launcherhub.net/giveMeTheList";
 const CDN_COVER = "https://m5burner-cdn.m5stack.com/cover/";
 const CDN_FIRMWARE = "https://m5burner-cdn.m5stack.com/firmware/";
@@ -324,7 +341,11 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     };
     const hydrate = (entries) => {
-        firmware = entries.filter((item) => Array.isArray(item.versions) && item.versions.some((version) => Boolean(version.file)));
+        const sortedEntries = entries.map((item) => ({
+            ...item,
+            versions: sortVersionsByPublishedDate(item.versions ?? [])
+        }));
+        firmware = sortedEntries.filter((item) => Array.isArray(item.versions) && item.versions.some((version) => Boolean(version.file)));
         filtered = [...firmware];
         populateCategories();
         applyFilters();

assets/js/webflasher.js

@@ -548,7 +548,7 @@ const registerInstallDialogPatch = () => {
     document.querySelectorAll("ewt-install-dialog").forEach((dialog) => themeInstallDialog(dialog));
 };
 const injectDialogSurfaceStyles = (dialog) => {
-    if (!dialog || !dialog.closest(".page-webflasher")) {
+    if (!dialog) {
         return;
     }
     const shadow = dialog.shadowRoot;
@@ -559,13 +559,23 @@ const injectDialogSurfaceStyles = (dialog) => {
     style.id = "webflasher-ew-dialog-style";
     style.textContent = `
     dialog {
+      background: transparent;
+      border: none;
+      padding: 0;
+    }
+    .container {
+      box-sizing: border-box;
       background: rgba(12, 18, 21, 0.96);
       border-radius: var(--radius-lg, 24px);
-      border: 1px solid rgba(0, 221, 0, 0.24);
+      border: 1px solid var(--primary, #00dd00);
       box-shadow: 0 34px 120px rgba(0, 221, 0, 0.25);
       backdrop-filter: blur(24px);
       color: var(--text);
-      padding: 24px 28px 28px;
+      // padding: 24px 28px 28px;
+    }
+    .container::before {
+      background: rgba(12, 18, 21, 0.96);
+      border-radius: inherit;
     }
     dialog::backdrop {
       background: rgba(6, 10, 12, 0.7);

src/catalog.ts

@@ -16,6 +16,25 @@ type FirmwareEntry = {
   versions: FirmwareVersion[];
 };
 
+const getPublishedTimestamp = (value: string | undefined) => {
+  if (!value) {
+    return Number.NEGATIVE_INFINITY;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? Number.NEGATIVE_INFINITY : timestamp;
+};
+
+const sortVersionsByPublishedDate = (versions: FirmwareVersion[]) => {
+  return [...versions].sort((a, b) => {
+    const aTime = getPublishedTimestamp(a.published_at);
+    const bTime = getPublishedTimestamp(b.published_at);
+    if (aTime !== bTime) {
+      return bTime - aTime;
+    }
+    return 0;
+  });
+};
+
 const API_URL = "https://api.launcherhub.net/giveMeTheList";
 const CDN_COVER = "https://m5burner-cdn.m5stack.com/cover/";
 const CDN_FIRMWARE = "https://m5burner-cdn.m5stack.com/firmware/";
@@ -392,7 +411,12 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   const hydrate = (entries: FirmwareEntry[]) => {
-    firmware = entries.filter(
+    const sortedEntries = entries.map((item) => ({
+      ...item,
+      versions: sortVersionsByPublishedDate(item.versions ?? [])
+    }));
+
+    firmware = sortedEntries.filter(
       (item) => Array.isArray(item.versions) && item.versions.some((version) => Boolean(version.file))
     );
     filtered = [...firmware];

src/webflasher.ts

@@ -625,7 +625,7 @@ type EwDialogElement = HTMLElement & {
 };
 
 const injectDialogSurfaceStyles = (dialog: EwDialogElement) => {
-  if (!dialog || !dialog.closest(".page-webflasher")) {
+  if (!dialog) {
     return;
   }
 
@@ -638,13 +638,22 @@ const injectDialogSurfaceStyles = (dialog: EwDialogElement) => {
   style.id = "webflasher-ew-dialog-style";
   style.textContent = `
     dialog {
+      background: transparent;
+      border: none;
+      padding: 0;
+    }
+    .container {
+      box-sizing: border-box;
       background: rgba(12, 18, 21, 0.96);
       border-radius: var(--radius-lg, 24px);
-      border: 1px solid rgba(0, 221, 0, 0.24);
+      border: 1px solid var(--primary, #00dd00);
       box-shadow: 0 34px 120px rgba(0, 221, 0, 0.25);
       backdrop-filter: blur(24px);
       color: var(--text);
-      padding: 24px 28px 28px;
+    }
+    .container::before {
+      background: rgba(12, 18, 21, 0.96);
+      border-radius: inherit;
     }
     dialog::backdrop {
       background: rgba(6, 10, 12, 0.7);