Add Card.keys and sort cards by name in UI

Author: Kouda-Titanium

heartbeat_monitor/KanbanBroFirebaseHeartbeatCardProviderPlugin.js

@@ -35,6 +35,7 @@ export function apply() {
                     console.log(`${name}`, settings);
 
                     return {
+                        keys: { name },
                         image: (() => {
                             return also(new Image(), img => {
                                 img.loading = 'lazy';

heartbeat_monitor/SampleCardProviderPlugin.js

@@ -11,6 +11,7 @@ export function apply() {
             });
             signal.throwIfAborted();
             return {
+                keys: { name: String(number) },
                 image: (() => {
                     return also(new Image(), img => {
                         img.loading = "lazy";

heartbeat_monitor/index.html

@@ -410,12 +410,26 @@
 
         document.getElementById("cards").innerHTML = "";
         for (const cardPromise of window.KanbanBro.cardProviders.flatMap(provider => provider(abortController.signal))) {
-            document.getElementById("cards").append(
-                also(document.createElement("div"), cardDiv => {
-                    cardDiv.className = "card";
+            cardPromise.then(card => {
+                abortController.signal.throwIfAborted();
+
+                const cardContainer = document.getElementById("cards");
+
+                let refNode = null;
+                const newName = card.keys?.name ?? "";
+                for (const child of Array.from(cardContainer.children)) {
+                    const existingName = child.card.keys?.name ?? "";
+                    if (existingName.localeCompare(newName) > 0) {
+                        refNode = child;
+                        break;
+                    }
+                }
+
+                cardContainer.insertBefore(
+                    also(document.createElement("div"), cardDiv => {
+                        cardDiv.className = "card";
+                        cardDiv.card = card;
 
-                    cardPromise.then(card => {
-                        abortController.signal.throwIfAborted();
                         cardDiv.append(
                             also(document.createElement("div"), screenshotDiv => {
                                 screenshotDiv.className = "screenshot";
@@ -454,9 +468,10 @@
                                 );
                             }),
                         );
-                    });
-                }),
-            );
+                    }),
+                    refNode,
+                );
+            });
         }
     }