Populate the list

static/crossroad.css

@@ -119,4 +119,13 @@ abbr[title] {
     top: 50%;
     left: 50%;
     translate: -50% -50%;
+}
+
+.logo {
+    height: 4em;
+}
+
+.inlineIcon {
+    height: var(--medium);
+    vertical-align: text-top;
 }

static/crossroad.html

@@ -20,15 +20,19 @@
                     <h1>FeDirect</h1>
                     <p class="margin-auto-top">&ThickSpace;By Nekomata</p>
                 </div>
-                <img src="/static/nekomata_small.png" alt="Nekomata Logo" style="height: 4em;" />
+                <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="logo" />
             </header>
             <div class="flex-row">
                 <div class="half-width">
-                    <form>
-                        <input id="radio" type="radio" />
-                        <label for="radio">
-                            Instances and stuff go here!
-                        </label>
+                    <form id="instanceSelectForm">
+                        <div>
+                            <input id="eepy.moe" type="radio" name="instanceSelect" />
+                            <label for="eepy.moe">
+                                Eepy Moe <img src="https://eepy.moe/static-assets/icons/192.png" alt="Eepy Moe icon"
+                                    class="inlineIcon" />
+                                <small>(Sharkey)</small>
+                            </label>
+                        </div>
                     </form>
                     <br>
                     <button onclick="showAddInstanceDialog()">Add an instance</button>

static/crossroad.mts

@@ -1,5 +1,7 @@
 import { initializeAddInstanceFlow } from "./add_instance_flow.mjs";
-import { findDialogOrFail } from "./dom.mjs";
+import { findDialogOrFail, findFormOrFail } from "./dom.mjs";
+import knownSoftware from "./known_software.mjs";
+import storageManager from "./storage_manager.mjs";
 
 export function getMainDialog(): HTMLDialogElement {
     return document.getElementById('mainDialog') as HTMLDialogElement;
@@ -7,8 +9,43 @@ export function getMainDialog(): HTMLDialogElement {
 
 const detailsDialog = findDialogOrFail(document.body, "#instanceDetails");
 const addDialog = findDialogOrFail(document.body, "#addInstance");
+const instanceSelectForm = findFormOrFail(document.body, "#instanceSelectForm");
 
 export const {
     showAddInstanceDialog,
     hideAddInstanceDialog
 } = initializeAddInstanceFlow(detailsDialog, addDialog);
+
+function createInstanceSelectOptions() {
+    instanceSelectForm.replaceChildren(); // Erase all child nodes
+    for (const instance of storageManager.storage.instances) {
+        const div = document.createElement("div");
+        div.setAttribute("x-option", instance.origin);
+        const radio = document.createElement("input");
+        radio.id = instance.origin;
+        radio.type = "radio";
+        radio.name = "instanceSelect";
+        const label = document.createElement("label");
+        label.htmlFor = instance.origin;
+        label.innerText = instance.name + " ";
+        if (instance.iconURL) {
+            const img = new Image();
+            img.src = instance.iconURL;
+            img.alt = `${instance.name} icon`;
+            img.className = "inlineIcon";
+            label.append(img, " ");
+        }
+        const small = document.createElement("small");
+        const softwareName = knownSoftware.software[instance.software].name;
+        small.innerText = `(${softwareName})`;
+        label.appendChild(small);
+        div.appendChild(radio);
+        div.appendChild(label);
+        instanceSelectForm.appendChild(div);
+    }
+    const firstInput = instanceSelectForm.querySelector("input");
+    if (firstInput) firstInput.checked = true;
+}
+
+createInstanceSelectOptions();
+storageManager.addSaveCallback(createInstanceSelectOptions);

static/storage_manager.mts

@@ -33,6 +33,7 @@ type LocalStorage = {
 
 export default new class StorageManager {
     storage: LocalStorage;
+    saveCallbacks: (() => void)[] = [];
 
     constructor() {
         this.load();
@@ -50,5 +51,10 @@ export default new class StorageManager {
 
     save() {
         window.localStorage.setItem("storage", JSON.stringify(this.storage));
+        this.saveCallbacks.forEach(c => c());
+    }
+
+    addSaveCallback(callback: () => void) {
+        this.saveCallbacks.push(callback);
     }
 }();