add: cleaner ui, prior view check, audio element, rendering fixes

app/public/app.js

@@ -147,6 +147,19 @@ globalThis.tab_editor = () => {
     }
 };
 
+globalThis.get_preview = async () => {
+    return await (
+        await fetch("/api/v1/render", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                content: globalThis.editor.getValue(),
+                metadata: globalThis.metadata_editor.getValue(),
+            }),
+        })
+    ).text();
+};
+
 globalThis.tab_preview = async () => {
     if (
         !document
@@ -157,16 +170,7 @@ globalThis.tab_preview = async () => {
     }
 
     // render
-    const res = await (
-        await fetch("/api/v1/render", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-                content: globalThis.editor.getValue(),
-                metadata: globalThis.metadata_editor.getValue(),
-            }),
-        })
-    ).text();
+    const res = await get_preview();
 
     document.getElementById("preview_tab").innerHTML = res;
     hljs.highlightAll();
@@ -366,3 +370,24 @@ setTimeout(() => {
     // run initial hash check
     hash_check(window.location.hash);
 }, 150);
+
+globalThis.submitter_load = (submitter) => {
+    return {
+        load() {
+            submitter.querySelector("[ui_ident=text]").classList.add("hidden");
+            submitter
+                .querySelector("[ui_ident=loader]")
+                .classList.remove("hidden");
+            submitter.setAttribute("disabled", "true");
+        },
+        failed() {
+            submitter
+                .querySelector("[ui_ident=text]")
+                .classList.remove("hidden");
+            submitter
+                .querySelector("[ui_ident=loader]")
+                .classList.add("hidden");
+            submitter.removeAttribute("disabled");
+        },
+    };
+};

app/public/style.css

@@ -14,6 +14,8 @@
     --color-green: hsl(100, 84%, 20%);
     --color-yellow: oklch(47% 0.157 37.304);
     --color-purple: hsl(284, 84%, 20%);
+    --color-green-lowered: hsl(100, 84%, 15%);
+    --color-red-lowered: hsl(0, 84%, 35%);
 
     --shadow-x-offset: 0;
     --shadow-y-offset: 0.125rem;
@@ -207,6 +209,11 @@ video {
     appearance: none;
 }
 
+.button:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+}
+
 .button.small {
     --h: 28px;
 }
@@ -243,6 +250,24 @@ video {
     background: var(--color-super-raised);
 }
 
+.button.green:not(.dark *) {
+    background: var(--color-green);
+    color: white !important;
+
+    &:hover {
+        background: var(--color-green-lowered) !important;
+    }
+}
+
+.button.red:not(.dark *) {
+    background: var(--color-red);
+    color: white !important;
+
+    &:hover {
+        background: var(--color-red-lowered) !important;
+    }
+}
+
 /* dropdown */
 .dropdown {
     position: relative;
@@ -272,9 +297,8 @@ video {
 }
 
 .dropdown .inner .title {
-    font-weight: 500;
-    border-top: solid 1px var(--color-super-lowered);
-    margin-top: var(--pad-2);
+    font-weight: 600;
+    font-size: 14px;
 }
 
 .dropdown:has(.inner.open) .button:nth-child(1):not(.inner *) {
@@ -710,6 +734,23 @@ span {
     }
 }
 
+.loader {
+    animation: spin linear infinite 2s forwards running;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
 .items-end {
     align-items: flex-end;
 }
@@ -753,3 +794,32 @@ details .content {
     padding: var(--pad-4);
     background: var(--color-surface);
 }
+
+/* dialog */
+dialog {
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+    animation: fadein ease-in-out 1 0.25s forwards running;
+    max-width: 95%;
+    width: 30rem;
+    margin: auto;
+    padding: var(--pad-4);
+    border: 0;
+}
+
+dialog.inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pad-2);
+}
+
+dialog::backdrop {
+    background: hsla(0, 0%, 0%, 25%);
+    backdrop-filter: blur(2px);
+}
+
+dialog:is(.dark *)::backdrop {
+    background: hsla(0, 0%, 100%, 15%);
+}