Instance name drop

static/confirm_instance_details.mts

@@ -3,7 +3,7 @@
 import { parseHost } from "./add_an_instance.mjs";
 import { FormDialog, ONCE } from "./dialog.mjs";
 import { findButtonOrFail, findFormOrFail, findImageOrFail, findInputOrFail, findOptionOrFail, findSelectOrFail } from "./dom.mjs";
-import knownSoftware from "./known_software.mjs";
+import knownSoftware, { getName } from "./known_software.mjs";
 import { Instance } from "./storage_manager.mjs";
 
 export function mergeHost(host: string, secure: boolean): string {
@@ -126,7 +126,7 @@ export class InstanceDetailsDialog extends FormDialog {
         for (const item of items) {
             const option = document.createElement("option");
             option.value = item;
-            option.innerText = knownSoftware.software[item]?.name ?? knownSoftware.groups[item]?.name ?? item;
+            option.innerText = getName(knownSoftware, item) ?? item;
             this.defaultsList.list.appendChild(option);
         }
 

static/crossroad.html

@@ -24,9 +24,12 @@
                 <div class="flex-vcenter full-height">
                     <center class="half-width">
                         You're about to go to
-                        <pre id="path" class="inline-block"></pre>.<br>
+                        <pre id="path" class="inline-block margin-none"></pre>
+                        on <span id="aOrAn"></span>
+                        <span id="destination" class="inline-block margin-none"></span>
+                        instance.<br>
                         <img src="/static/down_arrow.svg" alt="" class="medium-height" />
-                        <p id="no-instance">You currently don't have any instances. You should add one!</p>
+                        <p id="noInstance">You currently don't have any instances. You should add one!</p>
                         <form id="instanceSelectForm" class="align-start wfit-content"></form>
                         <br>
                         <button id="startAddInstanceFlow">Add an instance</button>

static/crossroad.mts

@@ -1,6 +1,6 @@
 import { AddInstanceFlow } from "./add_instance_flow.mjs";
-import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail } from "./dom.mjs";
-import knownSoftware from "./known_software.mjs";
+import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail, findSpanOrFail } from "./dom.mjs";
+import knownSoftware, { getName } from "./known_software.mjs";
 import storageManager from "./storage_manager.mjs";
 
 const RADIO_BUTTON_NAME = "instanceSelect";
@@ -15,7 +15,10 @@ const detailsDialog = findDialogOrFail(document.body, "#instanceDetails");
 const instanceSelectForm = findFormOrFail(document.body, "#instanceSelectForm");
 const redirectButton = findButtonOrFail(document.body, "#redirect");
 const redirectAlwaysButton = findButtonOrFail(document.body, "#redirectAlways");
+const noInstanceParagraph = findParagraphOrFail(document.body, "#noInstance");
 const pathText = findPreOrFail(document.body, "#path");
+const aOrAnText = findSpanOrFail(document.body, "#aOrAn");
+const destinationText = findSpanOrFail(document.body, "#destination");
 
 // Don't bother initializing if we're performing autoredirect
 if (!autoRedirect()) {
@@ -25,6 +28,11 @@ if (!autoRedirect()) {
     storageManager.addSaveCallback(updateNoInstanceHint);
 
     pathText.innerText = getTargetPath();
+    const targetID = getTargetSoftwareOrGroup();
+    const targetName = getName(knownSoftware, targetID) ?? targetID;
+    aOrAnText.innerText = "aeiou".includes(targetName[0].toLowerCase()) ? "an" : "a";
+    destinationText.innerText = targetName;
+
 
     addInstanceFlow = new AddInstanceFlow(addDialog, spinnerDialog, detailsDialog);
 
@@ -46,7 +54,7 @@ redirectAlwaysButton.addEventListener("click", e => {
 });
 
 function updateNoInstanceHint() {
-    findParagraphOrFail(document.body, "#no-instance").hidden =
+    noInstanceParagraph.hidden =
         storageManager.storage.instances.length > 0;
 }
 

static/dom.mts

@@ -1,6 +1,13 @@
 // I would've LOVED to use generics for this but unfortunately that's not possible.
 // Type safety, but at what cost... >~< thanks TypeScript
 
+export function findSpanOrFail(on: Element, selector: string): HTMLSpanElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLSpanElement))
+        throw new Error(`${selector} isn't a span`);
+    return element;
+}
+
 export function findOptionOrFail(on: Element, selector: string): HTMLOptionElement {
     const element = on.querySelector(selector);
     if (!(element instanceof HTMLOptionElement))

static/known_software.mts

@@ -16,4 +16,8 @@ type KnownSoftware = {
     groups: Record<string, Group>,
 }
 
+export function getName(knownSoftware: KnownSoftware, id: string): string | undefined {
+    return knownSoftware.software[id]?.name ?? knownSoftware.groups[id].name;
+}
+
 export default await fetch("/known-software.json").then(r => r.json()) as KnownSoftware;

static/main.css

@@ -145,6 +145,10 @@ abbr[title] {
     border-bottom: solid 1px var(--transparent-black);
 }
 
+.margin-none {
+    margin: 0;
+}
+
 .margin-auto-top {
     margin-top: auto;
 }