Ship of theseus for commit 97fc0eb

static/crossroad.css

@@ -58,10 +58,15 @@ abbr[title] {
     text-align: start;
 }
 
-pre#path {
+.inline-block {
     display: inline-block;
 }
 
+.align-content-center {
+    justify-content: center;
+    align-items: center;
+}
+
 .flex-vcenter {
     display: flex;
     flex-direction: column;
@@ -80,8 +85,6 @@ pre#path {
 
 .flex-row {
     display: flex;
-    justify-content: center;
-    align-items: center;;
     flex-direction: row;
 }
 
@@ -123,6 +126,10 @@ pre#path {
     min-height: 100%;
 }
 
+.medium-height {
+    height: var(--medium);
+}
+
 .separator-bottom {
     border-bottom: solid 1px var(--transparent-black);
 }
@@ -161,14 +168,9 @@ pre#path {
 }
 
 .inlineIcon {
-    height: var(--medium);
     vertical-align: text-top;
 }
 
 .buttonPanel>* {
     margin-top: min(var(--xl), 6vh);
-}
-
-.hidden {
- display: none;
 }

static/crossroad.html

@@ -22,16 +22,18 @@
                 </div>
                 <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="logo" />
             </header>
-            <div class="flex-row">
+            <div class="flex-row align-content-center">
-                <center class="half-width">
+                <div class="flex-vcenter full-height">
-                    You're about to go to <pre id="path"></pre>.<br />
+                    <center class="half-width">
-                    <svg height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path d="M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3L304 256l0-96c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32l0 96-57.7 0C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"/></svg>
+                        You're about to go to
-                    <p id="no-instance" class="hidden">You currently don't have any instances. You should add one!</p>
+                        <pre id="path" class="inline-block"></pre>.<br>
-                <form></form>
+                        <img src="/static/down_arrow.svg" alt="" class="medium-height" />
-                    <form id="instanceSelectForm" class="align-start wfit-content"></form>
+                        <p id="no-instance">You currently don't have any instances. You should add one!</p>
-                    <br>
+                        <form id="instanceSelectForm" class="align-start wfit-content"></form>
-                    <button onclick="showAddInstanceDialog()">Add an instance</button>
+                        <br>
-                </center>
+                        <button onclick="showAddInstanceDialog()">Add an instance</button>
+                    </center>
+                </div>
                 <div class="half-width">
                     <div class="flex-hcenter">
                         <div class="flex-column buttonPanel">

static/crossroad.mts

@@ -1,5 +1,5 @@
 import { initializeAddInstanceFlow } from "./add_instance_flow.mjs";
-import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail } from "./dom.mjs";
+import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail } from "./dom.mjs";
 import knownSoftware from "./known_software.mjs";
 import storageManager from "./storage_manager.mjs";
 
@@ -39,13 +39,22 @@ export const {
     }
     createInstanceSelectOptions();
     storageManager.addSaveCallback(createInstanceSelectOptions);
+    updateNoInstanceHint();
+    storageManager.addSaveCallback(updateNoInstanceHint);
+
+    findPreOrFail(document.body, "#path").innerText = getTargetPath();
+
     return initializeAddInstanceFlow(detailsDialog, addDialog)
 })();
 
+function updateNoInstanceHint() {
+    findParagraphOrFail(document.body, "#no-instance").style.display =
+        storageManager.storage.instances.length > 0
+            ? "none"
+            : "";
+}
+
 function createInstanceSelectOptions() {
-    if (storageManager.storage.instances.length > 0) {
-        document.querySelector("#no-instance")?.classList.add("hidden")
-    }
     instanceSelectForm.replaceChildren(); // Erase all child nodes
     for (const instance of storageManager.storage.instances) {
         const div = document.createElement("div");
@@ -62,7 +71,7 @@ function createInstanceSelectOptions() {
             const img = new Image();
             img.src = instance.iconURL;
             img.alt = `${instance.name} icon`;
-            img.className = "inlineIcon";
+            img.className = "inlineIcon medium-height";
             label.append(img, " ");
         }
         const small = document.createElement("small");
@@ -132,7 +141,4 @@ function redirect(to: string) {
     location.href = url.toString();
 }
 
-document.querySelector("#path")!.innerHTML = getTargetPath()
+export { storageManager };
-if (storageManager.storage.instances.length === 0) {
-    document.querySelector("#no-instance")?.classList.remove("hidden")
-}

static/dom.mts

@@ -1,6 +1,20 @@
 // 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 findPreOrFail(on: Element, selector: string): HTMLPreElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLPreElement))
+        throw new Error(`${selector} isn't a pre`);
+    return element;
+}
+
+export function findParagraphOrFail(on: Element, selector: string): HTMLParagraphElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLParagraphElement))
+        throw new Error(`${selector} isn't a paragraph`);
+    return element;
+}
+
 export function findDialogOrFail(on: Element, selector: string): HTMLDialogElement {
     const element = on.querySelector(selector);
     if (!(element instanceof HTMLDialogElement))

static/down_arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path d="M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3L304 256l0-96c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32l0 96-57.7 0C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"/></svg>